@workday/canvas-tokens-web 0.1.0

package/dist/scss/system/_variables.sass

@@ -0,0 +1,215 @@
+
+// Do not edit directly
+// Generated on Tue, 05 Sep 2023 04:00:01 GMT
+
+$cnvs-sys-space-zero: 0;
+$cnvs-sys-shape-zero: 0rem;
+$cnvs-sys-color-bg-delete-active: rgba(128,22,14,1);
+$cnvs-sys-color-bg-secondary-default: none;
+$cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
+$cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
+$cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
+$cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
+$cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-25;
+$cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
+$cnvs-sys-font-family-global: $cnvs-base-font-family-200;
+$cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
+$cnvs-sys-font-family-default: $cnvs-base-font-family-50;
+$cnvs-sys-space-x20: calc($cnvs-base-dimension * 20);
+$cnvs-sys-space-x16: calc($cnvs-base-dimension * 16);
+$cnvs-sys-space-x14: calc($cnvs-base-dimension * 14);
+$cnvs-sys-space-x12: calc($cnvs-base-dimension * 12);
+$cnvs-sys-space-x10: calc($cnvs-base-dimension * 10);
+$cnvs-sys-space-x8: calc($cnvs-base-dimension * 8);
+$cnvs-sys-space-x6: calc($cnvs-base-dimension * 6);
+$cnvs-sys-space-x5: calc($cnvs-base-dimension * 5);
+$cnvs-sys-space-x4: calc($cnvs-base-dimension * 4);
+$cnvs-sys-space-x3: calc($cnvs-base-dimension * 3);
+$cnvs-sys-space-x2: calc($cnvs-base-dimension * 2);
+$cnvs-sys-space-x1: $cnvs-base-dimension;
+$cnvs-sys-shape-circle: calc($cnvs-base-dimension * 250);
+$cnvs-sys-shape-large: calc($cnvs-base-dimension * 2);
+$cnvs-sys-shape-medium: $cnvs-base-dimension;
+$cnvs-sys-shape-small: calc($cnvs-base-dimension * 0.5);
+$cnvs-sys-opacity-disabled: $cnvs-base-opacity-300;
+$cnvs-sys-color-data-viz-09: $cnvs-base-palette-jewel-200;
+$cnvs-sys-color-data-viz-08: $cnvs-base-palette-cantaloupe-400;
+$cnvs-sys-color-data-viz-07: $cnvs-base-palette-cantaloupe-200;
+$cnvs-sys-color-data-viz-06: $cnvs-base-palette-pomegranate-300;
+$cnvs-sys-color-data-viz-05: $cnvs-base-palette-pomegranate-200;
+$cnvs-sys-color-data-viz-04: $cnvs-base-palette-plum-300;
+$cnvs-sys-color-data-viz-03: $cnvs-base-palette-plum-200;
+$cnvs-sys-color-data-viz-02: $cnvs-base-palette-watermelon-200;
+$cnvs-sys-color-data-viz-01: $cnvs-base-palette-watermelon-100;
+$cnvs-sys-color-data-viz-16: $cnvs-base-palette-peach-400;
+$cnvs-sys-color-data-viz-15: $cnvs-base-palette-peach-200;
+$cnvs-sys-color-data-viz-14: $cnvs-base-palette-island-punch-400;
+$cnvs-sys-color-data-viz-13: $cnvs-base-palette-island-punch-200;
+$cnvs-sys-color-data-viz-12: $cnvs-base-palette-sour-lemon-400;
+$cnvs-sys-color-data-viz-11: $cnvs-base-palette-sour-lemon-200;
+$cnvs-sys-color-data-viz-10: $cnvs-base-palette-jewel-300;
+$cnvs-sys-color-overlay-tooltip: rgba(0,0,0,$cnvs-base-opacity-500);
+$cnvs-sys-color-overlay-modal: rgba(0,0,0,$cnvs-base-opacity-400);
+$cnvs-sys-color-gradient: linear-gradient(90deg, $cnvs-base-palette-blueberry-500 0%, $cnvs-base-palette-blueberry-400 100%);
+$cnvs-sys-color-focus-ring: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-shadow-accent: rgba(31,38,46,$cnvs-base-opacity-100);
+$cnvs-sys-color-shadow-main: rgba(31,38,46,$cnvs-base-opacity-200);
+$cnvs-sys-color-border-input-alert: $cnvs-base-palette-cantaloupe-600;
+$cnvs-sys-color-border-input-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-border-input-active: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-border-input-disabled: $cnvs-base-palette-soap-600;
+$cnvs-sys-color-border-input-hover: $cnvs-base-palette-licorice-500;
+$cnvs-sys-color-border-input-default: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-primary: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-icon-inverse: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-fg-icon-disabled: $cnvs-base-palette-soap-600;
+$cnvs-sys-color-fg-icon-hover: $cnvs-base-palette-licorice-500;
+$cnvs-sys-color-fg-icon-accent: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-background: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-fill: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-type-selected: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-fg-type-inverse: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-fg-type-link-visited: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-fg-type-link-active: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-fg-type-link-focus: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-link-default: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-disabled: $cnvs-base-palette-licorice-100;
+$cnvs-sys-color-fg-type-hint: $cnvs-base-palette-licorice-300;
+$cnvs-sys-color-fg-type-body: $cnvs-base-palette-black-pepper-300;
+$cnvs-sys-color-fg-type-heading: $cnvs-base-palette-black-pepper-400;
+$cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400);
+$cnvs-sys-color-bg-help: rgba(0,0,0,$cnvs-base-opacity-500);
+$cnvs-sys-color-bg-status-alert: $cnvs-base-palette-cantaloupe-400;
+$cnvs-sys-color-bg-status-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-bg-status-success: $cnvs-base-palette-green-apple-400;
+$cnvs-sys-color-bg-delete-hover: $cnvs-base-palette-cinnamon-600;
+$cnvs-sys-color-bg-delete-default: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-bg-secondary-active: $cnvs-base-palette-black-pepper-400;
+$cnvs-sys-color-bg-secondary-hover: $cnvs-base-palette-black-pepper-300;
+$cnvs-sys-color-bg-secondary-focus: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-bg-primary-active: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-bg-primary-hover: $cnvs-base-palette-blueberry-500;
+$cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-bg-selected: $cnvs-base-palette-blueberry-200;
+$cnvs-sys-color-bg-active: $cnvs-base-palette-soap-400;
+$cnvs-sys-color-bg-hover: $cnvs-base-palette-soap-300;
+$cnvs-sys-color-bg-alt: $cnvs-base-palette-soap-200;
+$cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-border: 0.0625rem solid $cnvs-base-palette-soap-500;
+$cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
+$cnvs-sys-depth-6: $cnvs-base-shadow-600;
+$cnvs-sys-depth-5: $cnvs-base-shadow-500;
+$cnvs-sys-depth-4: $cnvs-base-shadow-400;
+$cnvs-sys-depth-3: $cnvs-base-shadow-300;
+$cnvs-sys-depth-2: $cnvs-base-shadow-200;
+$cnvs-sys-depth-1: $cnvs-base-shadow-100;
+$cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-150;
+$cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-150;
+$cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-200;
+$cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
+$cnvs-sys-line-height-body-small: $cnvs-base-line-height-250;
+$cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
+$cnvs-sys-line-height-body-large: $cnvs-base-line-height-300;
+$cnvs-sys-line-height-body-medium: $cnvs-base-line-height-300;
+$cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
+$cnvs-sys-line-height-heading-small: $cnvs-base-line-height-350;
+$cnvs-sys-font-size-heading-small: $cnvs-base-font-size-200;
+$cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-400;
+$cnvs-sys-font-size-heading-medium: $cnvs-base-font-size-250;
+$cnvs-sys-line-height-heading-large: $cnvs-base-line-height-450;
+$cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
+$cnvs-sys-line-height-title-small: $cnvs-base-line-height-500;
+$cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
+$cnvs-sys-line-height-title-medium: $cnvs-base-line-height-600;
+$cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
+$cnvs-sys-line-height-title-large: $cnvs-base-line-height-700;
+$cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
+
+.cnvs-sys-type-subtext-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-150;
+  font-size: $cnvs-base-font-size-25;
+  letter-spacing: $cnvs-base-letter-spacing-50;
+}
+
+.cnvs-sys-type-subtext-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-150;
+  font-size: $cnvs-base-font-size-50;
+  letter-spacing: $cnvs-base-letter-spacing-100;
+}
+
+.cnvs-sys-type-subtext-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-200;
+  font-size: $cnvs-base-font-size-75;
+  letter-spacing: $cnvs-base-letter-spacing-150;
+}
+
+.cnvs-sys-type-body-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-250;
+  font-size: $cnvs-base-font-size-100;
+  letter-spacing: $cnvs-base-letter-spacing-200;
+}
+
+.cnvs-sys-type-body-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-300;
+  font-size: $cnvs-base-font-size-125;
+}
+
+.cnvs-sys-type-body-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-300;
+  font-size: $cnvs-base-font-size-150;
+}
+
+.cnvs-sys-type-heading-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-350;
+  font-size: $cnvs-base-font-size-200;
+}
+
+.cnvs-sys-type-heading-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-400;
+  font-size: $cnvs-base-font-size-250;
+}
+
+.cnvs-sys-type-heading-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-450;
+  font-size: $cnvs-base-font-size-300;
+}
+
+.cnvs-sys-type-title-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-500;
+  font-size: $cnvs-base-font-size-400;
+}
+
+.cnvs-sys-type-title-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-600;
+  font-size: $cnvs-base-font-size-500;
+}
+
+.cnvs-sys-type-title-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-700;
+  font-size: $cnvs-base-font-size-600;
+}

package/dist/scss/system/_variables.scss

@@ -0,0 +1,215 @@
+
+// Do not edit directly
+// Generated on Tue, 05 Sep 2023 04:00:01 GMT
+
+$cnvs-sys-space-zero: 0;
+$cnvs-sys-shape-zero: 0rem;
+$cnvs-sys-color-bg-delete-active: rgba(128,22,14,1);
+$cnvs-sys-color-bg-secondary-default: none;
+$cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
+$cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
+$cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
+$cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
+$cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-25;
+$cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
+$cnvs-sys-font-family-global: $cnvs-base-font-family-200;
+$cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
+$cnvs-sys-font-family-default: $cnvs-base-font-family-50;
+$cnvs-sys-space-x20: calc($cnvs-base-dimension * 20);
+$cnvs-sys-space-x16: calc($cnvs-base-dimension * 16);
+$cnvs-sys-space-x14: calc($cnvs-base-dimension * 14);
+$cnvs-sys-space-x12: calc($cnvs-base-dimension * 12);
+$cnvs-sys-space-x10: calc($cnvs-base-dimension * 10);
+$cnvs-sys-space-x8: calc($cnvs-base-dimension * 8);
+$cnvs-sys-space-x6: calc($cnvs-base-dimension * 6);
+$cnvs-sys-space-x5: calc($cnvs-base-dimension * 5);
+$cnvs-sys-space-x4: calc($cnvs-base-dimension * 4);
+$cnvs-sys-space-x3: calc($cnvs-base-dimension * 3);
+$cnvs-sys-space-x2: calc($cnvs-base-dimension * 2);
+$cnvs-sys-space-x1: $cnvs-base-dimension;
+$cnvs-sys-shape-circle: calc($cnvs-base-dimension * 250);
+$cnvs-sys-shape-large: calc($cnvs-base-dimension * 2);
+$cnvs-sys-shape-medium: $cnvs-base-dimension;
+$cnvs-sys-shape-small: calc($cnvs-base-dimension * 0.5);
+$cnvs-sys-opacity-disabled: $cnvs-base-opacity-300;
+$cnvs-sys-color-data-viz-09: $cnvs-base-palette-jewel-200;
+$cnvs-sys-color-data-viz-08: $cnvs-base-palette-cantaloupe-400;
+$cnvs-sys-color-data-viz-07: $cnvs-base-palette-cantaloupe-200;
+$cnvs-sys-color-data-viz-06: $cnvs-base-palette-pomegranate-300;
+$cnvs-sys-color-data-viz-05: $cnvs-base-palette-pomegranate-200;
+$cnvs-sys-color-data-viz-04: $cnvs-base-palette-plum-300;
+$cnvs-sys-color-data-viz-03: $cnvs-base-palette-plum-200;
+$cnvs-sys-color-data-viz-02: $cnvs-base-palette-watermelon-200;
+$cnvs-sys-color-data-viz-01: $cnvs-base-palette-watermelon-100;
+$cnvs-sys-color-data-viz-16: $cnvs-base-palette-peach-400;
+$cnvs-sys-color-data-viz-15: $cnvs-base-palette-peach-200;
+$cnvs-sys-color-data-viz-14: $cnvs-base-palette-island-punch-400;
+$cnvs-sys-color-data-viz-13: $cnvs-base-palette-island-punch-200;
+$cnvs-sys-color-data-viz-12: $cnvs-base-palette-sour-lemon-400;
+$cnvs-sys-color-data-viz-11: $cnvs-base-palette-sour-lemon-200;
+$cnvs-sys-color-data-viz-10: $cnvs-base-palette-jewel-300;
+$cnvs-sys-color-overlay-tooltip: rgba(0,0,0,$cnvs-base-opacity-500);
+$cnvs-sys-color-overlay-modal: rgba(0,0,0,$cnvs-base-opacity-400);
+$cnvs-sys-color-gradient: linear-gradient(90deg, $cnvs-base-palette-blueberry-500 0%, $cnvs-base-palette-blueberry-400 100%);
+$cnvs-sys-color-focus-ring: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-shadow-accent: rgba(31,38,46,$cnvs-base-opacity-100);
+$cnvs-sys-color-shadow-main: rgba(31,38,46,$cnvs-base-opacity-200);
+$cnvs-sys-color-border-input-alert: $cnvs-base-palette-cantaloupe-600;
+$cnvs-sys-color-border-input-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-border-input-active: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-border-input-disabled: $cnvs-base-palette-soap-600;
+$cnvs-sys-color-border-input-hover: $cnvs-base-palette-licorice-500;
+$cnvs-sys-color-border-input-default: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-primary: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-icon-inverse: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-fg-icon-disabled: $cnvs-base-palette-soap-600;
+$cnvs-sys-color-fg-icon-hover: $cnvs-base-palette-licorice-500;
+$cnvs-sys-color-fg-icon-accent: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-background: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-icon-fill: $cnvs-base-palette-licorice-200;
+$cnvs-sys-color-fg-type-selected: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-fg-type-inverse: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-fg-type-link-visited: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-fg-type-link-active: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-fg-type-link-focus: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-link-default: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-fg-type-disabled: $cnvs-base-palette-licorice-100;
+$cnvs-sys-color-fg-type-hint: $cnvs-base-palette-licorice-300;
+$cnvs-sys-color-fg-type-body: $cnvs-base-palette-black-pepper-300;
+$cnvs-sys-color-fg-type-heading: $cnvs-base-palette-black-pepper-400;
+$cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400);
+$cnvs-sys-color-bg-help: rgba(0,0,0,$cnvs-base-opacity-500);
+$cnvs-sys-color-bg-status-alert: $cnvs-base-palette-cantaloupe-400;
+$cnvs-sys-color-bg-status-error: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-bg-status-success: $cnvs-base-palette-green-apple-400;
+$cnvs-sys-color-bg-delete-hover: $cnvs-base-palette-cinnamon-600;
+$cnvs-sys-color-bg-delete-default: $cnvs-base-palette-cinnamon-500;
+$cnvs-sys-color-bg-secondary-active: $cnvs-base-palette-black-pepper-400;
+$cnvs-sys-color-bg-secondary-hover: $cnvs-base-palette-black-pepper-300;
+$cnvs-sys-color-bg-secondary-focus: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-color-bg-primary-active: $cnvs-base-palette-blueberry-600;
+$cnvs-sys-color-bg-primary-hover: $cnvs-base-palette-blueberry-500;
+$cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blueberry-400;
+$cnvs-sys-color-bg-selected: $cnvs-base-palette-blueberry-200;
+$cnvs-sys-color-bg-active: $cnvs-base-palette-soap-400;
+$cnvs-sys-color-bg-hover: $cnvs-base-palette-soap-300;
+$cnvs-sys-color-bg-alt: $cnvs-base-palette-soap-200;
+$cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100;
+$cnvs-sys-border: 0.0625rem solid $cnvs-base-palette-soap-500;
+$cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
+$cnvs-sys-depth-6: $cnvs-base-shadow-600;
+$cnvs-sys-depth-5: $cnvs-base-shadow-500;
+$cnvs-sys-depth-4: $cnvs-base-shadow-400;
+$cnvs-sys-depth-3: $cnvs-base-shadow-300;
+$cnvs-sys-depth-2: $cnvs-base-shadow-200;
+$cnvs-sys-depth-1: $cnvs-base-shadow-100;
+$cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-150;
+$cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-150;
+$cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-200;
+$cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
+$cnvs-sys-line-height-body-small: $cnvs-base-line-height-250;
+$cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
+$cnvs-sys-line-height-body-large: $cnvs-base-line-height-300;
+$cnvs-sys-line-height-body-medium: $cnvs-base-line-height-300;
+$cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
+$cnvs-sys-line-height-heading-small: $cnvs-base-line-height-350;
+$cnvs-sys-font-size-heading-small: $cnvs-base-font-size-200;
+$cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-400;
+$cnvs-sys-font-size-heading-medium: $cnvs-base-font-size-250;
+$cnvs-sys-line-height-heading-large: $cnvs-base-line-height-450;
+$cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
+$cnvs-sys-line-height-title-small: $cnvs-base-line-height-500;
+$cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
+$cnvs-sys-line-height-title-medium: $cnvs-base-line-height-600;
+$cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
+$cnvs-sys-line-height-title-large: $cnvs-base-line-height-700;
+$cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
+
+.cnvs-sys-type-subtext-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-150;
+  font-size: $cnvs-base-font-size-25;
+  letter-spacing: $cnvs-base-letter-spacing-50;
+}
+
+.cnvs-sys-type-subtext-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-150;
+  font-size: $cnvs-base-font-size-50;
+  letter-spacing: $cnvs-base-letter-spacing-100;
+}
+
+.cnvs-sys-type-subtext-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-200;
+  font-size: $cnvs-base-font-size-75;
+  letter-spacing: $cnvs-base-letter-spacing-150;
+}
+
+.cnvs-sys-type-body-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-250;
+  font-size: $cnvs-base-font-size-100;
+  letter-spacing: $cnvs-base-letter-spacing-200;
+}
+
+.cnvs-sys-type-body-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-300;
+  font-size: $cnvs-base-font-size-125;
+}
+
+.cnvs-sys-type-body-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-400;
+  line-height: $cnvs-base-line-height-300;
+  font-size: $cnvs-base-font-size-150;
+}
+
+.cnvs-sys-type-heading-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-350;
+  font-size: $cnvs-base-font-size-200;
+}
+
+.cnvs-sys-type-heading-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-400;
+  font-size: $cnvs-base-font-size-250;
+}
+
+.cnvs-sys-type-heading-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-450;
+  font-size: $cnvs-base-font-size-300;
+}
+
+.cnvs-sys-type-title-small {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-500;
+  font-size: $cnvs-base-font-size-400;
+}
+
+.cnvs-sys-type-title-medium {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-600;
+  font-size: $cnvs-base-font-size-500;
+}
+
+.cnvs-sys-type-title-large {
+  font-family: $cnvs-base-font-family-50;
+  font-weight: $cnvs-base-font-weight-700;
+  line-height: $cnvs-base-line-height-700;
+  font-size: $cnvs-base-font-size-600;
+}

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@workday/canvas-tokens-web",
+  "version": "0.1.0",
+  "description": "Canvas design tokens for web",
+  "author": "Workday, Inc. (https://www.workday.com)",
+  "license": "CC-BY-ND-4.0",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es6/index.js",
+  "sideEffects": false,
+  "types": "dist/es6/index.d.ts",
+  "scripts": {},
+  "dependencies": {}
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}