feat: convert FASTDesignSystem to Design Token implementations (#4631)

* add design token definitions * create non-color design tokens * update stylesheets to use design token implementations * add refactor todo Co-authored-by: nicholasrice <[email protected]>
microsoft · May 28, 2021 · ac36da5 · ac36da5
1 parent e6b63c9
commit ac36da5
Show file tree

Hide file tree

Showing 39 changed files with 682 additions and 277 deletions.
diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
@@ -464,7 +464,7 @@ export class FASTDataGridCell extends DataGridCell {
 export class FASTDataGridRow extends DataGridRow {
 }
 
-// @public
+// @public @deprecated
 export interface FASTDesignSystem {
     accentBaseColor: string;
     // (undocumented)
@@ -588,7 +588,7 @@ export interface FASTDesignSystem {
     typeRampPlus6LineHeight: string;
 }
 
-// @public
+// @public @deprecated
 export const fastDesignSystemDefaults: FASTDesignSystem;
 
 // @public

diff --git a/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts
@@ -5,6 +5,15 @@ import {
     forcedColorsStylesheetBehavior,
 } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    bodyFont,
+    density,
+    designUnit,
+    focusOutlineWidth,
+    outlineWidth,
+    typeRampMinus1FontSize,
+    typeRampMinus1LineHeight,
+} from "../design-tokens";
 import {
     accentFillRestBehavior,
     neutralDividerRestBehavior,
@@ -20,16 +29,16 @@ export const accordionItemStyles = (context, definition) =>
     css`
     ${display("flex")} :host {
         box-sizing: border-box;
-        font-family: var(--body-font);
+        font-family: ${bodyFont};
         flex-direction: column;
-        font-size: var(--type-ramp-minus-1-font-size);
-        line-height: var(--type-ramp-minus-1-line-height);
-        border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
+        font-size: ${typeRampMinus1FontSize};
+        line-height: ${typeRampMinus1LineHeight};
+        border-bottom: calc(${outlineWidth} * 1px) solid var(--neutral-divider-rest);
     }
     
     .region {
         display: none;
-        padding: calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
+        padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);
     }
 
     .heading {
@@ -46,7 +55,7 @@ export const accordionItemStyles = (context, definition) =>
         grid-column: 2;
         grid-row: 1;
         outline: none;
-        padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
+        padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
         text-align: left;
         height: calc(${heightNumber} * 1px);
         color: ${neutralForegroundRestBehavior.var};
@@ -75,8 +84,8 @@ export const accordionItemStyles = (context, definition) =>
 
     .button:${focusVisible}::before {
         outline: none;
-        border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var};
-        box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px)
+        border: calc(${outlineWidth} * 1px) solid ${neutralFocusBehavior.var};
+        box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px)
             ${neutralFocusBehavior.var};
     }
 
@@ -117,7 +126,7 @@ export const accordionItemStyles = (context, definition) =>
     .start {
         display: flex;
         align-items: center;
-        padding-inline-start: calc(var(--design-unit) * 1px);
+        padding-inline-start: calc(${designUnit} * 1px);
         justify-content: center;
         grid-column: 1;
         z-index: 2;
@@ -142,7 +151,7 @@ export const accordionItemStyles = (context, definition) =>
             css`
             .button:${focusVisible}::before {
                 border-color: ${SystemColors.Highlight};
-                box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
+                box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${SystemColors.Highlight};
             }
         `
         )

diff --git a/packages/web-components/fast-components/src/accordion/accordion.styles.ts b/packages/web-components/fast-components/src/accordion/accordion.styles.ts
@@ -1,5 +1,11 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
+import {
+    bodyFont,
+    outlineWidth,
+    typeRampMinus1FontSize,
+    typeRampMinus1LineHeight,
+} from "../design-tokens";
 import {
     neutralDividerRestBehavior,
     neutralForegroundRestBehavior,
@@ -10,11 +16,11 @@ export const accordionStyles = (context, definition) =>
         ${display("flex")} :host {
             box-sizing: border-box;
             flex-direction: column;
-            font-family: var(--body-font);
-            font-size: var(--type-ramp-minus-1-font-size);
-            line-height: var(--type-ramp-minus-1-line-height);
+            font-family: ${bodyFont};
+            font-size: ${typeRampMinus1FontSize};
+            line-height: ${typeRampMinus1LineHeight};
             color: ${neutralForegroundRestBehavior.var};
-            border-top: calc(var(--outline-width) * 1px) solid
+            border-top: calc(${outlineWidth} * 1px) solid
                 ${neutralDividerRestBehavior.var};
         }
     `.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior);
diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts
@@ -1,19 +1,26 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
+import {
+    bodyFont,
+    cornerRadius,
+    designUnit,
+    typeRampMinus1FontSize,
+    typeRampMinus1LineHeight,
+} from "../design-tokens";
 import { accentForegroundRestBehavior, heightNumber } from "../styles/index";
 
 export const badgeStyles = (context, definition) =>
     css`
     ${display("inline-block")} :host {
         box-sizing: border-box;
-        font-family: var(--body-font);
-        font-size: var(--type-ramp-minus-1-font-size);
-        line-height: var(--type-ramp-minus-1-line-height);
+        font-family: ${bodyFont};
+        font-size: ${typeRampMinus1FontSize};
+        line-height: ${typeRampMinus1LineHeight};
     }
 
     .control {
-        border-radius: calc(var(--corner-radius) * 1px);
-        padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
+        border-radius: calc(${cornerRadius} * 1px);
+        padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
         color: ${accentForegroundRestBehavior.var};
         font-weight: 600;
     }
@@ -24,11 +31,11 @@ export const badgeStyles = (context, definition) =>
 
     :host([circular]) .control {
         border-radius: 100px;
-        padding: 0 calc(var(--design-unit) * 1px);
+        padding: 0 calc(${designUnit} * 1px);
         ${
             /* Need to work with Brian on width and height here */ ""
-        } height: calc((${heightNumber} - (var(--design-unit) * 3)) * 1px);
-        min-width: calc((${heightNumber} - (var(--design-unit) * 3)) * 1px);
+        } height: calc((${heightNumber} - (${designUnit} * 3)) * 1px);
+        min-width: calc((${heightNumber} - (${designUnit} * 3)) * 1px);
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -5,6 +5,13 @@ import {
     forcedColorsStylesheetBehavior,
 } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    bodyFont,
+    focusOutlineWidth,
+    outlineWidth,
+    typeRampBaseFontSize,
+    typeRampBaseLineHeight,
+} from "../design-tokens";
 import {
     accentForegroundActiveBehavior,
     accentForegroundHoverBehavior,
@@ -18,10 +25,10 @@ export const breadcrumbItemStyles = (context, definition) =>
     ${display("inline-flex")} :host {
         background: transparent;
         box-sizing: border-box;
-        font-family: var(--body-font);
-        font-size: var(--type-ramp-base-font-size);
+        font-family: ${bodyFont};
+        font-size: ${typeRampBaseFontSize};
         fill: currentColor;
-        line-height: var(--type-ramp-base-line-height);
+        line-height: ${typeRampBaseLineHeight};
         min-width: calc(${heightNumber} * 1px);
         outline: none;
     }
@@ -63,7 +70,7 @@ export const breadcrumbItemStyles = (context, definition) =>
     .control .content::before {
         content: "";
         display: block;
-        height: calc(var(--outline-width) * 1px);
+        height: calc(${outlineWidth} * 1px);
         left: 0;
         position: absolute;
         right: 0;
@@ -81,7 +88,7 @@ export const breadcrumbItemStyles = (context, definition) =>
 
     .control:${focusVisible} .content::before {
         background: ${neutralForegroundRestBehavior.var};
-        height: calc(var(--focus-outline-width) * 1px);
+        height: calc(${focusOutlineWidth} * 1px);
     }
 
     .control:not([href]) {

diff --git a/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts b/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts
@@ -1,12 +1,13 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
+import { bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight } from "../design-tokens";
 
 export const breadcrumbStyles = (context, definition) => css`
     ${display("inline-block")} :host {
         box-sizing: border-box;
-        font-family: var(--body-font);
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
+        font-family: ${bodyFont};
+        font-size: ${typeRampBaseFontSize};
+        line-height: ${typeRampBaseLineHeight};
     }
 
     .list {

diff --git a/packages/web-components/fast-components/src/card/card.styles.ts b/packages/web-components/fast-components/src/card/card.styles.ts
@@ -1,6 +1,7 @@
 import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
+import { cornerRadius } from "../design-tokens";
 import { elevation } from "../styles/index";
 
 export const CardStyles = css`
@@ -12,7 +13,7 @@ export const CardStyles = css`
         width: var(--card-width, 100%);
         box-sizing: border-box;
         background: var(--background-color);
-        border-radius: calc(var(--corner-radius) * 1px);
+        border-radius: calc(${cornerRadius} * 1px);
         ${elevation}
     }
 `.withBehaviors(

diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
@@ -6,6 +6,15 @@ import {
     forcedColorsStylesheetBehavior,
 } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    bodyFont,
+    cornerRadius,
+    designUnit,
+    disabledOpacity,
+    outlineWidth,
+    typeRampBaseFontSize,
+    typeRampBaseLineHeight,
+} from "../design-tokens";
 import {
     accentFillActiveBehavior,
     accentFillHoverBehavior,
@@ -28,7 +37,7 @@ export const checkboxStyles = (context, definition) =>
     ${display("inline-flex")} :host {
         align-items: center;
         outline: none;
-        margin: calc(var(--design-unit) * 1px) 0;
+        margin: calc(${designUnit} * 1px) 0;
         ${
             /*
              * Chromium likes to select label text or the default slot when
@@ -39,26 +48,26 @@ export const checkboxStyles = (context, definition) =>
 
     .control {
         position: relative;
-        width: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
-        height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px);
+        width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
+        height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
         box-sizing: border-box;
-        border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
+        border-radius: calc(${cornerRadius} * 1px);
+        border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRestBehavior.var};
         background: ${neutralFillInputRestBehavior.var};
         outline: none;
         cursor: pointer;
     }
 
     .label {
-        font-family: var(--body-font);
+        font-family: ${bodyFont};
         color: ${neutralForegroundRestBehavior.var};
         ${
             /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ""
-        } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
-        margin-inline-end: calc(var(--design-unit) * 2px + 2px);
+        } padding-inline-start: calc(${designUnit} * 2px + 2px);
+        margin-inline-end: calc(${designUnit} * 2px + 2px);
         cursor: pointer;
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
+        font-size: ${typeRampBaseFontSize};
+        line-height: ${typeRampBaseLineHeight};
     }
 
     .label__hidden {
@@ -76,7 +85,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     .indeterminate-indicator {
-        border-radius: calc(var(--corner-radius) * 1px);
+        border-radius: calc(${cornerRadius} * 1px);
         background: ${accentForegroundCutRestBehavior.var};
         position: absolute;
         top: 50%;
@@ -106,17 +115,17 @@ export const checkboxStyles = (context, definition) =>
 
     :host([aria-checked="true"]) .control {
         background: ${accentFillRestBehavior.var};
-        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
+        border: calc(${outlineWidth} * 1px) solid ${accentFillRestBehavior.var};
     }
 
     :host([aria-checked="true"]:not([disabled])) .control:hover {
         background: ${accentFillHoverBehavior.var};
-        border: calc(var(--outline-width) * 1px) solid ${accentFillHoverBehavior.var};
+        border: calc(${outlineWidth} * 1px) solid ${accentFillHoverBehavior.var};
     }
 
     :host([aria-checked="true"]:not([disabled])) .control:active {
         background: ${accentFillActiveBehavior.var};
-        border: calc(var(--outline-width) * 1px) solid ${accentFillActiveBehavior.var};
+        border: calc(${outlineWidth} * 1px) solid ${accentFillActiveBehavior.var};
     }
 
     :host([aria-checked="true"]:${focusVisible}:not([disabled])) .control {
@@ -140,7 +149,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     :host([disabled]) {
-        opacity: var(--disabled-opacity);
+        opacity: ${disabledOpacity};
     }
 `.withBehaviors(
         accentFillActiveBehavior,

diff --git a/packages/web-components/fast-components/src/combobox/combobox.styles.ts b/packages/web-components/fast-components/src/combobox/combobox.styles.ts
@@ -1,5 +1,10 @@
 import { css } from "@microsoft/fast-element";
 import { disabledCursor, focusVisible } from "@microsoft/fast-foundation";
+import {
+    outlineWidth,
+    typeRampBaseFontSize,
+    typeRampBaseLineHeight,
+} from "../design-tokens";
 import { selectStyles } from "../select/select.styles";
 
 export const comboboxStyles = (context, definition) => css`
@@ -20,9 +25,9 @@ export const comboboxStyles = (context, definition) => css`
         background: transparent;
         border: none;
         color: inherit;
-        font-size: var(--type-ramp-base-font-size);
-        line-height: var(--type-ramp-base-line-height);
-        height: calc(100% - (var(--outline-width) * 1px));
+        font-size: ${typeRampBaseFontSize};
+        line-height: ${typeRampBaseLineHeight};
+        height: calc(100% - (${outlineWidth} * 1px));
         margin: auto 0;
         width: 100%;
     }