feat(web-components): revert syntax change for design tokens (#30819)

Co-authored-by: Christopher Holt <=>
microsoft · May 2, 2024 · 5bb7473 · 5bb7473
1 parent 6a3c7aa
commit 5bb7473
Show file tree

Hide file tree

Showing 32 changed files with 1,499 additions and 1,570 deletions.
diff --git a/change/@fluentui-web-components-518b3512-c7f4-4073-91e2-880c782b0864.json b/change/@fluentui-web-components-518b3512-c7f4-4073-91e2-880c782b0864.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "revert design token syntax change for DX",
+  "packageName": "@fluentui/web-components",
+  "email": "=",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
diff --git a/packages/web-components/scripts/generate-tokens.cjs b/packages/web-components/scripts/generate-tokens.cjs
@@ -9,7 +9,7 @@ const fluentTokens = Object.keys(tokens);
 const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
 
 const generatedTokens = fluentTokens.reduce((acc, t) => {
-  const token = `export const ${t} = '--${t}';\n`;
+  const token = `export const ${t} = 'var(--${t})';\n`;
   return acc + token;
 }, '');
 

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -36,12 +36,12 @@ export const styles = css`
     display: grid;
     position: relative;
     vertical-align: middle;
-    padding-inline: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
-    border-radius: var(${borderRadiusMedium});
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase300});
+    padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+    border-radius: ${borderRadiusMedium};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
     grid-template-columns: auto auto 1fr auto;
   }
 
@@ -60,9 +60,9 @@ export const styles = css`
     cursor: pointer;
     font-family: inherit;
     height: 44px;
-    color: var(${colorNeutralForeground1});
-    background: var(${colorTransparentBackground});
-    line-height: var(${lineHeightBase300});
+    color: ${colorNeutralForeground1};
+    background: ${colorTransparentBackground};
+    line-height: ${lineHeightBase300};
     height: auto;
     padding: 0;
     font-size: inherit;
@@ -75,7 +75,7 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: var(${borderRadiusSmall});
+    border-radius: ${borderRadiusSmall};
   }
 
   .icon {
@@ -85,20 +85,20 @@ export const styles = css`
     pointer-events: none;
     position: relative;
     height: 100%;
-    padding-right: var(${spacingHorizontalS});
+    padding-right: ${spacingHorizontalS};
     grid-column: 1 / span 1;
     grid-row: 1;
   }
 
   .region {
-    margin: 0 var(${spacingHorizontalM});
+    margin: 0 ${spacingHorizontalM};
   }
 
   ::slotted([slot='start']),
   ::slotted([slot='end']) {
     justify-content: center;
     align-items: center;
-    padding-right: var(${spacingHorizontalS});
+    padding-right: ${spacingHorizontalS};
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
   }
@@ -108,16 +108,16 @@ export const styles = css`
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: var(${borderRadiusSmall});
+    border-radius: ${borderRadiusSmall};
     outline: none;
-    border: 2px solid var(${colorStrokeFocus1});
-    box-shadow: inset 0 0 0 1px var(${colorStrokeFocus2});
+    border: 2px solid ${colorStrokeFocus1};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
   }
 
   /* --- Disabled attr styles --- */
 
   :host([disabled]) .button {
-    color: var(${colorNeutralForegroundDisabled});
+    color: ${colorNeutralForegroundDisabled};
   }
   :host([disabled]) svg {
     filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
@@ -149,23 +149,23 @@ export const styles = css`
   /* --- Appearance attr styles --- */
 
   .heading {
-    font-size: var(${fontSizeBase300});
-    line-height: var(${lineHeightBase300});
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
   }
 
   :host([size='small']) .heading {
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
   }
 
   :host([size='large']) .heading {
-    font-size: var(${fontSizeBase400});
-    line-height: var(${lineHeightBase400});
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
   }
 
   :host([size='extra-large']) .heading {
-    font-size: var(${fontSizeBase500});
-    line-height: var(${lineHeightBase500});
+    font-size: ${fontSizeBase500};
+    line-height: ${lineHeightBase500};
   }
 
   /* --- expand-icon-position attr styles --- */