Merge pull request #864 from HelixDesignSystem/design-tokens-v0.0.9

feat(tokens): incorporate v0.0.9

Author: 100stacks

src/scss/_tokens.scss

@@ -1,5 +1,5 @@
-// Design Tokens - v0.0.8
-// Generated on Thu, 18 Mar 2021 10:52:35 GMT
+// v0.0.9
+// Generated on Wed, 14 Apr 2021 11:08:37 GMT
 
 $rax-border-width-none: 0;
 $rax-border-width-thin: 1px;
@@ -91,60 +91,6 @@ $rax-color-text-subdued: #757575;
 $rax-color-text-subbody: #757575;
 $rax-color-text-caption: #757575;
 $rax-color-text-input-label: #333333;
-$rax-font-family-sans: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-font-family-mono: "Roboto Mono", monospace;
-$rax-font-family-body: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-font-family-code: "Roboto Mono", monospace;
-$rax-font-family-default: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-typescale-medium-font-size-100: 0.75rem;
-$rax-typescale-medium-font-size-200: 0.75rem;
-$rax-typescale-medium-font-size-300: 0.875rem;
-$rax-typescale-medium-font-size-400: 1rem;
-$rax-typescale-medium-font-size-500: 1.25rem;
-$rax-typescale-medium-font-size-600: 1.5rem;
-$rax-typescale-medium-font-size-700: 2rem;
-$rax-typescale-medium-font-size-default: 0.875rem;
-$rax-typescale-small-font-size-100: 0.75rem;
-$rax-typescale-small-font-size-200: 0.75rem;
-$rax-typescale-small-font-size-300: 0.75rem;
-$rax-typescale-small-font-size-400: 0.875rem;
-$rax-typescale-small-font-size-500: 1rem;
-$rax-typescale-small-font-size-600: 1.25rem;
-$rax-typescale-small-font-size-700: 1.5rem;
-$rax-typescale-small-font-size-default: 0.75rem;
-$rax-typescale-large-font-size-100: 0.75rem;
-$rax-typescale-large-font-size-200: 0.875rem;
-$rax-typescale-large-font-size-300: 1rem;
-$rax-typescale-large-font-size-400: 1.25rem;
-$rax-typescale-large-font-size-500: 1.5rem;
-$rax-typescale-large-font-size-600: 2rem;
-$rax-typescale-large-font-size-700: 2.625rem;
-$rax-typescale-large-font-size-default: 1rem;
-$rax-font-size-100: 0.75rem;
-$rax-font-size-200: 0.875rem;
-$rax-font-size-300: 1rem;
-$rax-font-size-400: 1.25rem;
-$rax-font-size-500: 1.5rem;
-$rax-font-size-600: 2rem;
-$rax-font-size-700: 2.625rem;
-$rax-font-size-default: 1rem;
-$rax-font-weight-thin: 100;
-$rax-font-weight-extralight: 200;
-$rax-font-weight-light: 300;
-$rax-font-weight-normal: 400;
-$rax-font-weight-regular: 400;
-$rax-font-weight-medium: 500;
-$rax-font-weight-semibold: 600;
-$rax-font-weight-bold: 700;
-$rax-font-weight-extrabold: 800;
-$rax-font-weight-black: 900;
-$rax-font-weight-default: 400;
-$rax-line-height-none: 1;
-$rax-line-height-tight: 1.25;
-$rax-line-height-snug: 1.375;
-$rax-line-height-normal: 1.5;
-$rax-line-height-relaxed: 1.625;
-$rax-line-height-loose: 2;
 $rax-time-transition-duration-75: 75ms;
 $rax-time-transition-duration-100: 100ms;
 $rax-time-transition-duration-150: 150ms;
@@ -254,17 +200,17 @@ $rax-component-input-base-border-style: solid;
 $rax-component-input-default-border-bottom-color: #bdbdbd;
 $rax-component-input-focus-border-bottom-color: #367ed4;
 $rax-component-input-error-border-bottom-color: #d6251f;
-$rax-component-label-default-font-size: 500;
+$rax-component-label-default-font-size: 1rem;
 $rax-component-label-default-font-weight: 600;
 $rax-component-label-default-margin-bottom: 0.5rem;
 $rax-component-label-default-color: #333333;
 $rax-component-label-disabled-color: #9e9e9e;
-$rax-component-radio-label-default-font-size: 500;
+$rax-component-radio-label-default-font-size: 1rem;
 $rax-component-radio-label-default-font-weight: 400;
 $rax-component-radio-label-default-margin-left: 0.5rem;
 $rax-component-radio-label-default-color: #424242;
 $rax-component-radio-label-disabled-color: #9e9e9e;
-$rax-component-checkbox-label-default-font-size: 500;
+$rax-component-checkbox-label-default-font-size: 1rem;
 $rax-component-checkbox-label-default-font-weight: 400;
 $rax-component-checkbox-label-default-margin-left: 0.5rem;
 $rax-component-checkbox-label-default-color: #424242;
@@ -322,58 +268,38 @@ $rax-component-body-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
 $rax-component-body-font-size: 1rem;
 $rax-component-body-font-weight: 400;
 $rax-component-body-line-height: 1.5;
-$rax-component-body-small-font-size: 0.75rem;
-$rax-component-body-medium-font-size: 0.875rem;
-$rax-component-body-large-font-size: 1rem;
 $rax-component-sub-body-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
 $rax-component-sub-body-font-size: 0.875rem;
-$rax-component-sub-body-small-font-size: 0.75rem;
-$rax-component-sub-body-medium-font-size: 0.75rem;
-$rax-component-sub-body-large-font-size: 0.875rem;
 $rax-component-sub-body-font-weight: 400;
 $rax-component-sub-body-line-height: 1.5;
 $rax-component-caption-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-caption-font-size: 0.875rem;
-$rax-component-caption-small-font-size: 0.75rem;
-$rax-component-caption-medium-font-size: 0.75rem;
-$rax-component-caption-large-font-size: 0.875rem;
-$rax-component-caption-font-weight: 300;
+$rax-component-caption-font-size: 0.75rem;
+$rax-component-caption-font-weight: 400;
 $rax-component-caption-line-height: 1.5;
-$rax-component-h-1-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-h-1-font-size: 2.625rem;
-$rax-component-h-1-small-font-size: 1.5rem;
-$rax-component-h-1-medium-font-size: 2rem;
-$rax-component-h-1-large-font-size: 2.625rem;
-$rax-component-h-1-font-weight: 300;
-$rax-component-h-1-line-height: 1.5;
-$rax-component-h-2-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-h-2-font-size: 2rem;
-$rax-component-h-2-small-font-size: 1.25rem;
-$rax-component-h-2-medium-font-size: 1.5rem;
-$rax-component-h-2-large-font-size: 2rem;
-$rax-component-h-2-font-weight: 300;
-$rax-component-h-2-line-height: 1.5;
-$rax-component-h-3-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-h-3-font-size: 1.5rem;
-$rax-component-h-3-small-font-size: 1rem;
-$rax-component-h-3-medium-font-size: 1.25rem;
-$rax-component-h-3-large-font-size: 1.5rem;
-$rax-component-h-3-font-weight: 400;
-$rax-component-h-3-line-height: 1.5;
-$rax-component-h-4-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-h-4-font-size: 1.25rem;
-$rax-component-h-4-small-font-size: 0.875rem;
-$rax-component-h-4-medium-font-size: 1rem;
-$rax-component-h-4-large-font-size: 1.25rem;
-$rax-component-h-4-font-weight: 500;
-$rax-component-h-4-line-height: 1.5;
-$rax-component-h-5-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
-$rax-component-h-5-font-size: 1rem;
-$rax-component-h-5-small-font-size: 0.75rem;
-$rax-component-h-5-medium-font-size: 0.875rem;
-$rax-component-h-5-large-font-size: 1rem;
-$rax-component-h-5-font-weight: 400;
-$rax-component-h-5-line-height: 1.5;
+$rax-component-h1-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h1-font-size: 1.75rem;
+$rax-component-h1-font-weight: 600;
+$rax-component-h1-line-height: 1.5;
+$rax-component-h2-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h2-font-size: 1.625rem;
+$rax-component-h2-font-weight: 600;
+$rax-component-h2-line-height: 1.5;
+$rax-component-h3-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h3-font-size: 1.375rem;
+$rax-component-h3-font-weight: 600;
+$rax-component-h3-line-height: 1.5;
+$rax-component-h4-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h4-font-size: 1.25rem;
+$rax-component-h4-font-weight: 600;
+$rax-component-h4-line-height: 1.5;
+$rax-component-h5-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h5-font-size: 1.125rem;
+$rax-component-h5-font-weight: 600;
+$rax-component-h5-line-height: 1.5;
+$rax-component-h6-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-component-h6-font-size: 1rem;
+$rax-component-h6-font-weight: 600;
+$rax-component-h6-line-height: 1.5;
 $rax-component-vertical-nav-base-font-family: "Open Sans", "Noto Sans JP", "sans-serif";
 $rax-component-vertical-nav-base-background-color: #f5f5f5;
 $rax-component-vertical-nav-base-color: #333333;
@@ -393,60 +319,53 @@ $rax-component-vertical-nav-link-selected-color: #95098a;
 $rax-component-vertical-nav-link-selected-font-weight: 600;
 $rax-component-vertical-nav-link-hover-color: #95098a;
 $rax-spacing-0: 0;
-$rax-spacing-1: 0.25rem;
-$rax-spacing-2: 0.5rem;
-$rax-spacing-3: 0.75rem;
-$rax-spacing-4: 1rem;
-$rax-spacing-5: 1.25rem;
-$rax-spacing-6: 1.5rem;
-$rax-spacing-7: 1.75rem;
-$rax-spacing-8: 2rem;
-$rax-spacing-9: 2.25rem;
-$rax-spacing-10: 2.5rem;
-$rax-spacing-11: 2.75rem;
-$rax-spacing-12: 3rem;
-$rax-spacing-13: 3.25rem;
-$rax-spacing-14: 3.5rem;
-$rax-spacing-15: 3.75rem;
-$rax-spacing-16: 4rem;
-$rax-spacing-17: 4.25rem;
-$rax-spacing-18: 4.5rem;
-$rax-spacing-19: 4.75rem;
-$rax-spacing-20: 5rem;
-$rax-spacing-21: 5.25rem;
-$rax-spacing-22: 5.5rem;
-$rax-spacing-23: 5.75rem;
-$rax-spacing-24: 6rem;
-$rax-spacing-25: 6.25rem;
-$rax-spacing-26: 6.5rem;
-$rax-spacing-27: 6.75rem;
-$rax-spacing-28: 7rem;
-$rax-spacing-29: 7.25rem;
-$rax-spacing-30: 7.5rem;
-$rax-spacing-31: 7.75rem;
-$rax-spacing-32: 8rem;
-$rax-spacing-33: 8.25rem;
-$rax-spacing-34: 8.5rem;
-$rax-spacing-35: 8.75rem;
-$rax-spacing-36: 9rem;
-$rax-spacing-37: 9.25rem;
-$rax-spacing-38: 9.5rem;
-$rax-spacing-39: 9.75rem;
-$rax-spacing-40: 10rem;
-$rax-spacing-41: 10.25rem;
-$rax-spacing-42: 10.5rem;
-$rax-spacing-43: 10.75rem;
-$rax-spacing-44: 11rem;
-$rax-spacing-45: 11.25rem;
-$rax-spacing-46: 11.5rem;
-$rax-spacing-47: 11.75rem;
-$rax-spacing-48: 12rem;
-$rax-spacing-49: 12.25rem;
-$rax-spacing-50: 12.5rem;
+$rax-spacing-50: 1px;
+$rax-spacing-75: 0.125rem;
+$rax-spacing-100: 0.25rem;
+$rax-spacing-200: 0.5rem;
+$rax-spacing-300: 0.75rem;
+$rax-spacing-400: 1rem;
+$rax-spacing-500: 1.25rem;
+$rax-spacing-600: 1.5rem;
+$rax-spacing-700: 1.75rem;
+$rax-spacing-800: 2rem;
+$rax-spacing-900: 2.25rem;
+$rax-spacing-1000: 2.5rem;
 $rax-spacing-none: 0;
-$rax-spacing-xs: 0.25rem;
-$rax-spacing-sm: 0.5rem;
-$rax-spacing-md: 1rem;
-$rax-spacing-lg: 1.5rem;
-$rax-spacing-xl: 2rem;
+$rax-spacing-unit: 0.25rem;
 $rax-spacing-default: 1rem;
+$rax-font-family-sans: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-font-family-mono: "Roboto Mono", monospace;
+$rax-font-family-body: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-font-family-code: "Roboto Mono", monospace;
+$rax-font-family-default: "Open Sans", "Noto Sans JP", "sans-serif";
+$rax-font-size-50: 0.75rem;
+$rax-font-size-75: 0.875rem;
+$rax-font-size-100: 1rem;
+$rax-font-size-200: 1.125rem;
+$rax-font-size-300: 1.25rem;
+$rax-font-size-400: 1.375rem;
+$rax-font-size-500: 1.625rem;
+$rax-font-size-600: 1.75rem;
+$rax-font-size-700: 2rem;
+$rax-font-size-800: 2.25rem;
+$rax-font-size-900: 2.625rem;
+$rax-font-size-1000: 2.875rem;
+$rax-font-size-default: 1rem;
+$rax-font-weight-thin: 100;
+$rax-font-weight-extralight: 200;
+$rax-font-weight-light: 300;
+$rax-font-weight-normal: 400;
+$rax-font-weight-regular: 400;
+$rax-font-weight-medium: 500;
+$rax-font-weight-semibold: 600;
+$rax-font-weight-bold: 700;
+$rax-font-weight-extrabold: 800;
+$rax-font-weight-black: 900;
+$rax-font-weight-default: 400;
+$rax-line-height-none: 1;
+$rax-line-height-tight: 1.25;
+$rax-line-height-snug: 1.375;
+$rax-line-height-normal: 1.5;
+$rax-line-height-relaxed: 1.625;
+$rax-line-height-loose: 2;