Rename to CSSTokens and CSS custom properties

microsoft · Sep 11, 2023 · 14ff752 · 14ff752
1 parent 249809c
commit 14ff752
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 83 deletions.
diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx
@@ -53,14 +53,14 @@ type ComposerCoreUIProps = {
 };
 
 const ComposerCoreUI = memo(({ children }: ComposerCoreUIProps) => {
-  const [{ cssVariables }] = useStyleSet();
+  const [{ cssCustomProperties }] = useStyleSet();
 
   const dictationOnError = useCallback(err => {
     console.error(err);
   }, []);
 
   return (
-    <div className={classNames('webchat__css-variables', cssVariables)}>
+    <div className={classNames('webchat__css-custom-properties', cssCustomProperties)}>
       <ModalDialogComposer>
         {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
         <SendBoxComposer>

diff --git a/packages/component/src/Styles/CSSTokens.ts b/packages/component/src/Styles/CSSTokens.ts
@@ -0,0 +1,18 @@
+import CustomPropertyNames from './CustomPropertyNames';
+
+type CustomPropertyNamesType = typeof CustomPropertyNames;
+
+type CSSTokensType<T extends Readonly<Record<string, string>>> = {
+  [K in keyof T]: `var(${T[K]})`;
+};
+
+// To add/remove/update a token, go to `CustomPropertyName.ts`.
+const CSSTokens = new Proxy<CSSTokensType<CustomPropertyNamesType>>({} as CSSTokensType<CustomPropertyNamesType>, {
+  get(_, key: keyof CustomPropertyNamesType) {
+    // We already checked in the `CustomPropertyName`.
+    // eslint-disable-next-line security/detect-object-injection
+    return `var(${CustomPropertyNames[key]})`;
+  }
+});
+
+export default CSSTokens;
diff --git a/packages/component/src/Styles/CustomPropertyName.ts b/packages/component/src/Styles/CustomPropertyName.ts
diff --git a/packages/component/src/Styles/CustomPropertyNames.ts b/packages/component/src/Styles/CustomPropertyNames.ts
@@ -0,0 +1,16 @@
+const CustomPropertyNames = Object.freeze({
+  // Make sure key names does not have JavaScript forbidden names.
+  ColorAccent: '--webchat__color--accent',
+  ColorTimestamp: '--webchat__color--timestamp',
+  FontPrimary: '--webchat__font--primary',
+  FontSizeSmall: '--webchat__font-size--small',
+  IconURLExternalLink: '--webchat__icon-url--external-link',
+  MaxWidthBubble: '--webchat__max-width--bubble',
+  MinHeightBubble: '--webchat__min-height--bubble',
+  PaddingRegular: '--webchat__padding--regular'
+} as const);
+
+// This is for type-checking only to make sure the CSS custom property names is `--webchat__${string}`.
+const _TypeChecking: Readonly<Record<string, `--webchat__${string}`>> = CustomPropertyNames;
+
+export default CustomPropertyNames;
diff --git a/...onent/src/Styles/StyleSet/CSSVariables.ts → ...rc/Styles/StyleSet/CSSCustomProperties.ts b/...onent/src/Styles/StyleSet/CSSVariables.ts → ...rc/Styles/StyleSet/CSSCustomProperties.ts
@@ -1,7 +1,8 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
-import * as CustomPropertyName from '../CustomPropertyName';
 
-export default function createCSSVariablesStyle({
+import CustomPropertyNames from '../CustomPropertyNames';
+
+export default function createCSSCustomPropertiesStyle({
   accent,
   bubbleMaxWidth,
   bubbleMinHeight,
@@ -13,7 +14,7 @@ export default function createCSSVariablesStyle({
   timestampColor
 }: StrictStyleOptions) {
   return {
-    '&.webchat__css-variables': {
+    '&.webchat__css-custom-properties': {
       display: 'contents',
 
       // TODO: Should we register the CSS property for inheritance, type checking, and initial value?
@@ -31,14 +32,14 @@ export default function createCSSVariablesStyle({
       //       - We should put styling varibles here, e.g. paddingRegular
       //       - We MUST NOT put runtime variables here, e.g. sendTimeout
       //          - This is because we cannot programmatically know when the sendTimeout change
-      [CustomPropertyName.ColorAccent]: accent,
-      [CustomPropertyName.ColorTimestamp]: timestampColor || subtle, // Maybe we should not need this if we allow web devs to override CSS variables for certain components.
-      [CustomPropertyName.FontPrimary]: primaryFont,
-      [CustomPropertyName.FontSizeSmall]: fontSizeSmall,
-      [CustomPropertyName.IconURLExternalLink]: markdownExternalLinkIconImage,
-      [CustomPropertyName.MaxWidthBubble]: bubbleMaxWidth + 'px',
-      [CustomPropertyName.MinHeightBubble]: bubbleMinHeight + 'px',
-      [CustomPropertyName.PaddingRegular]: paddingRegular + 'px'
+      [CustomPropertyNames.ColorAccent]: accent,
+      [CustomPropertyNames.ColorTimestamp]: timestampColor || subtle, // Maybe we should not need this if we allow web devs to override CSS variables for certain components.
+      [CustomPropertyNames.FontPrimary]: primaryFont,
+      [CustomPropertyNames.FontSizeSmall]: fontSizeSmall,
+      [CustomPropertyNames.IconURLExternalLink]: markdownExternalLinkIconImage,
+      [CustomPropertyNames.MaxWidthBubble]: bubbleMaxWidth + 'px',
+      [CustomPropertyNames.MinHeightBubble]: bubbleMinHeight + 'px',
+      [CustomPropertyNames.PaddingRegular]: paddingRegular + 'px'
     }
   };
 }
diff --git a/packages/component/src/Styles/StyleSet/LinkDefinitions.ts b/packages/component/src/Styles/StyleSet/LinkDefinitions.ts
@@ -5,7 +5,8 @@ import {
   NOT_FORCED_COLORS_SELECTOR
 } from './Constants';
 
-// TODO: Fix CSS var.
+import CSSTokens from '../CSSTokens';
+
 export default function createLinkDefinitionsStyleSet() {
   return {
     '&.webchat__link-definitions': {
@@ -28,10 +29,6 @@ export default function createLinkDefinitionsStyleSet() {
         }
       },
 
-      // '.webchat__link-definitions__header-chevron': {
-      //   verticalAlign: 'middle'
-      // },
-
       '&:not([open]) .webchat__link-definitions__header-chevron': {
         marginBottom: '-0.1em',
         transform: 'rotate(-180deg)'
@@ -130,7 +127,7 @@ export default function createLinkDefinitionsStyleSet() {
         padding: 4,
 
         [NOT_FORCED_COLORS_SELECTOR]: {
-          color: 'var(--webchat__color--accent)'
+          color: CSSTokens.ColorAccent
         }
       },
 

diff --git a/packages/component/src/Styles/StyleSet/ModalDialog.ts b/packages/component/src/Styles/StyleSet/ModalDialog.ts
@@ -5,10 +5,12 @@ import {
   NOT_FORCED_COLORS_SELECTOR
 } from './Constants';
 
+import CSSTokens from '../CSSTokens';
+
 export default function createModalDialogStyleSet() {
   return {
     '&.webchat__modal-dialog': {
-      fontFamily: 'var(--webchat__font--primary)',
+      fontFamily: CSSTokens.FontPrimary,
       width: '100%',
 
       [NOT_FORCED_COLORS_SELECTOR]: {
@@ -18,11 +20,11 @@ export default function createModalDialogStyleSet() {
 
       '& .webchat__modal-dialog__box': {
         borderRadius: 2,
-        height: 'calc(100% - var(--webchat__padding--regular) * 2)',
+        height: `calc(100% - ${CSSTokens.PaddingRegular} * 2)`,
         overflow: 'hidden',
         margin: 'auto',
         maxWidth: '60%',
-        width: 'calc(100% - var(--webchat__padding--regular) * 2)',
+        width: `calc(100% - ${CSSTokens.PaddingRegular} * 2)`,
 
         [LIGHT_THEME_SELECTOR]: {
           // From Power BI:
@@ -49,7 +51,7 @@ export default function createModalDialogStyleSet() {
 
       '& .webchat__modal-dialog__close-button-layout': {
         float: 'right',
-        padding: 'var(--webchat__padding--regular)'
+        padding: CSSTokens.PaddingRegular
       },
 
       '& .webchat__modal-dialog__close-button': {
@@ -112,7 +114,7 @@ export default function createModalDialogStyleSet() {
       },
 
       '& .webchat__modal-dialog__body': {
-        margin: 'calc(var(--webchat__padding--regular) * 2)'
+        margin: `calc(${CSSTokens.PaddingRegular} * 2)`
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/OriginatorActivityStatus.ts b/packages/component/src/Styles/StyleSet/OriginatorActivityStatus.ts
diff --git a/packages/component/src/Styles/StyleSet/RenderMarkdown.ts b/packages/component/src/Styles/StyleSet/RenderMarkdown.ts
@@ -1,6 +1,5 @@
-/* eslint no-magic-numbers: "off" */
-
 import { FORCED_COLORS_SELECTOR, NOT_FORCED_COLORS_SELECTOR } from './Constants';
+import CSSTokens from '../CSSTokens';
 
 // This style is for accompanying result of `renderMarkdown()`.
 // Mostly, it should only styles elements that are generated/modified during `renderMarkdown()`.
@@ -9,7 +8,7 @@ export default function createMarkdownStyle() {
   return {
     '&.webchat__render-markdown': {
       '& .webchat__render-markdown__external-link-icon': {
-        backgroundImage: 'var(--webchat__icon-url--external-link)',
+        backgroundImage: CSSTokens.IconURLExternalLink,
         height: '.75em',
         marginLeft: '.25em'
       },
@@ -27,7 +26,7 @@ export default function createMarkdownStyle() {
         },
 
         [NOT_FORCED_COLORS_SELECTOR]: {
-          color: 'var(--webchat__color--accent)'
+          color: CSSTokens.ColorAccent
         }
       },
 

diff --git a/packages/component/src/Styles/StyleSet/SendStatus.ts b/packages/component/src/Styles/StyleSet/SendStatus.ts
@@ -1,10 +1,12 @@
+import CSSTokens from '../CSSTokens';
+
 export default function createSendStatusStyle() {
   return {
     '&.webchat__activity-status': {
-      color: 'var(--webchat__color--timestamp)',
-      fontFamily: 'var(--webchat__font--primary)',
-      fontSize: 'var(--webchat__font-size--small)',
-      marginTop: 'calc(var(--webchat__padding--regular) / 2)'
+      color: CSSTokens.ColorTimestamp,
+      fontFamily: CSSTokens.FontPrimary,
+      fontSize: CSSTokens.FontSizeSmall,
+      marginTop: `calc(${CSSTokens.PaddingRegular} / 2)`
     },
 
     '&.webchat__activity-status--slotted': {
@@ -16,7 +18,7 @@ export default function createSendStatusStyle() {
       alignItems: 'center',
 
       '&.webchat__activity-status__originator--has-link': {
-        color: 'var(--webchat__color--accent)'
+        color: CSSTokens.ColorAccent
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/SlottedActivityStatus.ts b/packages/component/src/Styles/StyleSet/SlottedActivityStatus.ts
@@ -1,13 +1,15 @@
+import CSSTokens from '../CSSTokens';
+
 export default function createSlottedActivityStatus() {
   return {
     '&.webchat__slotted-activity-status': {
       alignItems: 'center',
       display: 'inline-flex',
       gap: 4,
-      marginTop: 'calc(var(--webchat__padding--regular) / 2)',
+      marginTop: `calc(${CSSTokens.PaddingRegular} / 2)`,
 
       '& .webchat__slotted-activity-status__pipe': {
-        fontSize: 'var(--webchat__font-size--small)'
+        fontSize: CSSTokens.FontSizeSmall
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/TextContent.ts b/packages/component/src/Styles/StyleSet/TextContent.ts
@@ -1,17 +1,17 @@
-/* eslint no-magic-numbers: "off" */
+import CSSTokens from '../CSSTokens';
 
 export default function createTextContentStyle() {
   return {
     '&.webchat__text-content': {
-      fontFamily: 'var(--webchat__font--primary)',
+      fontFamily: CSSTokens.FontPrimary,
       margin: 0,
-      minHeight: 'calc(var(--webchat__min-height--bubble) - var(--webchat__padding--regular) * 2)',
-      padding: 'var(--webchat__padding--regular)',
+      minHeight: `calc(${CSSTokens.MinHeightBubble} - ${CSSTokens.PaddingRegular} * 2)`,
+      padding: CSSTokens.PaddingRegular,
 
       '&.webchat__text-content--is-markdown': {
         display: 'flex',
         flexDirection: 'column',
-        gap: 'var(--webchat__padding--regular)'
+        gap: CSSTokens.PaddingRegular
       },
 
       '& .webchat__text-content__markdown > :first-child': {
@@ -23,7 +23,7 @@ export default function createTextContentStyle() {
       },
 
       '& .webchat__text-content__markdown img:not(.webchat__render-markdown__external-link-icon)': {
-        maxWidth: 'var(--webchat__max-width--bubble)',
+        maxWidth: CSSTokens.MaxWidthBubble,
         width: '100%'
       },
 

diff --git a/packages/component/src/Styles/StyleSet/ThumbButton.ts b/packages/component/src/Styles/StyleSet/ThumbButton.ts
@@ -1,3 +1,5 @@
+import CSSTokens from '../CSSTokens';
+
 export default function () {
   return {
     '&.webchat__thumb-button': {
@@ -21,7 +23,7 @@ export default function () {
       },
 
       '& .webchat__thumb-button__image': {
-        color: 'var(--webchat__color--accent)',
+        color: CSSTokens.ColorAccent,
         width: 14
       },
 

diff --git a/packages/component/src/Styles/createStyleSet.ts b/packages/component/src/Styles/createStyleSet.ts
@@ -11,7 +11,7 @@ import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
 import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
-import createCSSVariablesStyle from './StyleSet/CSSVariables';
+import createCSSCustomPropertiesStyle from './StyleSet/CSSCustomProperties';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
 import createErrorBoxStyle from './StyleSet/ErrorBox';
 import createErrorNotificationStyle from './StyleSet/ErrorNotification';
@@ -99,7 +99,7 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
     // Following styles follows new house rules:
     // - Use CSS var instead of strictStyleOptions
-    cssVariables: createCSSVariablesStyle(strictStyleOptions),
+    cssCustomProperties: createCSSCustomPropertiesStyle(strictStyleOptions),
     linkDefinitions: createLinkDefinitionsStyle(),
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),