@daikin-oss/dds-tokens 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- **BREAKING CHANGE**: 378 token(s) removed (`button-color-background-primary-active`, `checkbox-border-unselected`, `color-text-default`, `line-height-tight`, `regular-tight-350` and more).
+  **BREAKING CHANGE**: 24 token(s) updated with incompatible changes (`font-family-base`, `font-size-300`, `font-size-350`, `font-size-400`, `font-weight-bold` and more).
+  56 token(s) added.
+  4 token(s) updated.
+
+## 0.2.1
+
+### Patch Changes
+
+- 99 token(s) added.
+  44 token(s) updated.
+
 ## 0.2.0
 
 ### Minor Changes

package/build/css/aaf/Dark/variables.css

@@ -63,12 +63,6 @@
   --dds-color-red-100: #7b070e;
   --dds-color-red-110: #5d050a;
   --dds-color-red-120: #3e0307;
-  --dds-color-red-aaf-100: #fcecea;
-  --dds-color-red-aaf-200: #f5c0b8;
-  --dds-color-red-aaf-300: #f8aeba;
-  --dds-color-red-aaf-400: #db4f66;
-  --dds-color-red-aaf-500: #d2324c;
-  --dds-color-red-aaf-600: #c8102e;
   --dds-color-gray-10: #f2f2f2;
   --dds-color-gray-20: #ebebeb;
   --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
   --dds-color-gray-120: #212121;
   --dds-color-black: #000000;
   --dds-color-white: #ffffff;
-  --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
-  --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
   --dds-color-blue-gray-10: #eef0f2;
   --dds-color-blue-gray-20: #d8dde0;
   --dds-color-blue-gray-30: #bbc1c7;
@@ -100,20 +92,18 @@
   --dds-color-dark-gray-105: #383838;
   --dds-color-dark-gray-115: #282828;
   --dds-color-dark-gray-125: #1a1a1a;
-  --dds-color-feedback-positive: #00c3ac; /* System status is positive */
-  --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
-  --dds-color-feedback-negative: #f21a27; /* System status is warning */
-  --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
-  --dds-color-feedback-information: #30ade9; /* System status is warning */
-  --dds-color-brand-primary: #db4f66; /* Primary brand blue */
-  --dds-color-brand-secondary: #c8102e;
-  --dds-color-text-brand-primary: #db4f66;
-  --dds-color-text-theme: #515151;
-  --dds-color-text-default: #ffffff;
-  --dds-color-text-default-sub: #f2f2f2;
-  --dds-color-background-theme: #000000;
-  --dds-color-background-component: #515151;
-  --dds-color-background-object: #ffffff;
+  --dds-color-purple-10: #f0ddf3;
+  --dds-color-purple-20: #e1bbe8;
+  --dds-color-purple-30: #d399dc;
+  --dds-color-purple-40: #c477d0;
+  --dds-color-purple-50: #b556c5;
+  --dds-color-purple-60: #a03db0;
+  --dds-color-purple-70: #81318e;
+  --dds-color-purple-80: #6f2a7a;
+  --dds-color-purple-90: #5c2365;
+  --dds-color-purple-100: #4a1c51;
+  --dds-color-purple-110: #37153d;
+  --dds-color-purple-120: #250e29;
   --dds-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -130,73 +120,24 @@
   --dds-space-400: 16px;
   --dds-space-800: 32px;
   --dds-space-050: 2px;
-  --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
+  --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
+  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
+  --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
+  --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
+  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
+  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
+  --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
+  --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
+  --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
+  --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
+  --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
+  --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
   --dds-font-size-300: 12px;
   --dds-font-size-350: 14px;
   --dds-font-size-400: 16px;
-  --dds-line-height-tight: 130%;
-  --dds-line-height-normal: 150%;
-  --dds-font-weight-bold: Bold;
-  --dds-font-weight-regular: Regular;
-  --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
-  --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-checkbox-border-unselected: 2px solid #bfbfbf;
-  --dds-checkbox-color-background: #30ade9;
-  --dds-checkbox-color-icon: #ffffff;
-  --dds-dropdown-color-background: #ffffff;
-  --dds-dropdown-color-text: #515151;
-  --dds-dropdown-tray-color-background-selected: #ebebeb;
-  --dds-table-color-background: #ffffff;
-  --dds-table-color-text: #515151;
-  --dds-table-header-border: 1px none #000000;
-  --dds-table-cell-border: 1px none #ebebeb;
-  --dds-table-page-number-color-background-selected: #828282;
-  --dds-table-page-number-color-text-default: #515151;
-  --dds-table-page-number-color-text-selected: #ffffff;
-  --dds-table-page-number-border-hover: 1px none #828282;
-  --dds-login-sso-button-border: 1px none #616161;
-  --dds-login-sso-button-color-text: #616161;
-  --dds-form-color-background: #ffffff;
-  --dds-form-color-text-default: #414141;
-  --dds-form-color-text-placeholder: #828282;
-  --dds-form-color-text-positive: #00c3ac;
-  --dds-form-color-text-negative: #f21a27;
-  --dds-notification-color-background-success: #00c3ac;
-  --dds-notification-color-background-error: #f21a27;
-  --dds-notification-color-background-warning: #ffbf0e;
-  --dds-notification-color-background-alarm: #fa7a12;
-  --dds-notification-color-background-information: #30ade9;
-  --dds-icon-color-background: #ffffff;
-  --dds-container-color-background: #515151;
-  --dds-container-color-text-header: #ffffff;
-  --dds-container-color-text-body: #f2f2f2;
-  --dds-container-shadow: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
-  --dds-button-color-background-primary-active: #db4f66; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #c8102e;
-  --dds-button-color-background-primary-press: #f8aeba;
-  --dds-button-color-background-primary-focus: #f5c0b8;
-  --dds-button-color-background-primary-disabled: #616161;
-  --dds-button-color-border-secondary-active: #db4f66;
-  --dds-button-color-border-secondary-hover: #c8102e;
-  --dds-button-color-border-secondary-press: #f8aeba;
-  --dds-button-color-border-secondary-focus: #f5c0b8;
-  --dds-button-color-border-secondary-disabled: #616161;
-  --dds-button-color-text-secondary-active: #db4f66;
-  --dds-button-color-text-secondary-hover: #c8102e;
-  --dds-button-color-text-secondary-press: #f8aeba;
-  --dds-button-color-text-secondary-focus: #f5c0b8;
-  --dds-button-color-text-secondary-disabled: #616161;
-  --dds-button-color-text-primary: #515151;
+  --dds-font-line-height-tight: 1.3;
+  --dds-font-line-height-normal: 1.5;
+  --dds-font-weight-bold: 700;
+  --dds-font-weight-regular: 400;
+  --dds-font-family-base: Roboto;
 }

package/build/css/aaf/Light/variables.css

@@ -63,12 +63,6 @@
   --dds-color-red-100: #7b070e;
   --dds-color-red-110: #5d050a;
   --dds-color-red-120: #3e0307;
-  --dds-color-red-aaf-100: #fcecea;
-  --dds-color-red-aaf-200: #f5c0b8;
-  --dds-color-red-aaf-300: #f8aeba;
-  --dds-color-red-aaf-400: #db4f66;
-  --dds-color-red-aaf-500: #d2324c;
-  --dds-color-red-aaf-600: #c8102e;
   --dds-color-gray-10: #f2f2f2;
   --dds-color-gray-20: #ebebeb;
   --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
   --dds-color-gray-120: #212121;
   --dds-color-black: #000000;
   --dds-color-white: #ffffff;
-  --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
-  --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
   --dds-color-blue-gray-10: #eef0f2;
   --dds-color-blue-gray-20: #d8dde0;
   --dds-color-blue-gray-30: #bbc1c7;
@@ -100,20 +92,18 @@
   --dds-color-dark-gray-105: #383838;
   --dds-color-dark-gray-115: #282828;
   --dds-color-dark-gray-125: #1a1a1a;
-  --dds-color-feedback-positive: #00c3ac; /* System status is positive */
-  --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
-  --dds-color-feedback-negative: #f21a27; /* System status is warning */
-  --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
-  --dds-color-feedback-information: #30ade9; /* System status is warning */
-  --dds-color-brand-primary: #c8102e; /* Primary brand blue */
-  --dds-color-brand-secondary: #db4f66;
-  --dds-color-text-brand-primary: #c8102e;
-  --dds-color-text-theme: #ffffff;
-  --dds-color-text-default: #515151;
-  --dds-color-text-default-sub: #828282;
-  --dds-color-background-theme: #ffffff;
-  --dds-color-background-component: #ffffff;
-  --dds-color-background-object: #515151;
+  --dds-color-purple-10: #f0ddf3;
+  --dds-color-purple-20: #e1bbe8;
+  --dds-color-purple-30: #d399dc;
+  --dds-color-purple-40: #c477d0;
+  --dds-color-purple-50: #b556c5;
+  --dds-color-purple-60: #a03db0;
+  --dds-color-purple-70: #81318e;
+  --dds-color-purple-80: #6f2a7a;
+  --dds-color-purple-90: #5c2365;
+  --dds-color-purple-100: #4a1c51;
+  --dds-color-purple-110: #37153d;
+  --dds-color-purple-120: #250e29;
   --dds-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -130,73 +120,24 @@
   --dds-space-400: 16px;
   --dds-space-800: 32px;
   --dds-space-050: 2px;
-  --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
+  --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
+  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
+  --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
+  --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
+  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
+  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
+  --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
+  --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
+  --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
+  --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
+  --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
+  --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
   --dds-font-size-300: 12px;
   --dds-font-size-350: 14px;
   --dds-font-size-400: 16px;
-  --dds-line-height-tight: 130%;
-  --dds-line-height-normal: 150%;
-  --dds-font-weight-bold: Bold;
-  --dds-font-weight-regular: Regular;
-  --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
-  --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-checkbox-border-unselected: 2px solid #bfbfbf;
-  --dds-checkbox-color-background: #30ade9;
-  --dds-checkbox-color-icon: #ffffff;
-  --dds-dropdown-color-background: #ffffff;
-  --dds-dropdown-color-text: #515151;
-  --dds-dropdown-tray-color-background-selected: #ebebeb;
-  --dds-table-color-background: #ffffff;
-  --dds-table-color-text: #515151;
-  --dds-table-header-border: 1px none #000000;
-  --dds-table-cell-border: 1px none #ebebeb;
-  --dds-table-page-number-color-background-selected: #828282;
-  --dds-table-page-number-color-text-default: #515151;
-  --dds-table-page-number-color-text-selected: #ffffff;
-  --dds-table-page-number-border-hover: 1px none #828282;
-  --dds-login-sso-button-border: 1px none #616161;
-  --dds-login-sso-button-color-text: #616161;
-  --dds-form-color-background: #ffffff;
-  --dds-form-color-text-default: #414141;
-  --dds-form-color-text-placeholder: #828282;
-  --dds-form-color-text-positive: #00c3ac;
-  --dds-form-color-text-negative: #f21a27;
-  --dds-notification-color-background-success: #00c3ac;
-  --dds-notification-color-background-error: #f21a27;
-  --dds-notification-color-background-warning: #ffbf0e;
-  --dds-notification-color-background-alarm: #fa7a12;
-  --dds-notification-color-background-information: #30ade9;
-  --dds-icon-color-background: #515151;
-  --dds-container-color-background: #ffffff;
-  --dds-container-color-text-header: #515151;
-  --dds-container-color-text-body: #828282;
-  --dds-container-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-button-color-background-primary-active: #c8102e; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #db4f66;
-  --dds-button-color-background-primary-press: #d2324c;
-  --dds-button-color-background-primary-focus: #f8aeba;
-  --dds-button-color-background-primary-disabled: #dcdcdc;
-  --dds-button-color-border-secondary-active: #c8102e;
-  --dds-button-color-border-secondary-hover: #db4f66;
-  --dds-button-color-border-secondary-press: #d2324c;
-  --dds-button-color-border-secondary-focus: #f8aeba;
-  --dds-button-color-border-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-secondary-active: #c8102e;
-  --dds-button-color-text-secondary-hover: #db4f66;
-  --dds-button-color-text-secondary-press: #d2324c;
-  --dds-button-color-text-secondary-focus: #f8aeba;
-  --dds-button-color-text-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-primary: #ffffff;
+  --dds-font-line-height-tight: 1.3;
+  --dds-font-line-height-normal: 1.5;
+  --dds-font-weight-bold: 700;
+  --dds-font-weight-regular: 400;
+  --dds-font-family-base: Roboto;
 }

package/build/css/daikin/Dark/variables.css

@@ -63,12 +63,6 @@
   --dds-color-red-100: #7b070e;
   --dds-color-red-110: #5d050a;
   --dds-color-red-120: #3e0307;
-  --dds-color-red-aaf-100: #fcecea;
-  --dds-color-red-aaf-200: #f5c0b8;
-  --dds-color-red-aaf-300: #f8aeba;
-  --dds-color-red-aaf-400: #db4f66;
-  --dds-color-red-aaf-500: #d2324c;
-  --dds-color-red-aaf-600: #c8102e;
   --dds-color-gray-10: #f2f2f2;
   --dds-color-gray-20: #ebebeb;
   --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
   --dds-color-gray-120: #212121;
   --dds-color-black: #000000;
   --dds-color-white: #ffffff;
-  --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
-  --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
   --dds-color-blue-gray-10: #eef0f2;
   --dds-color-blue-gray-20: #d8dde0;
   --dds-color-blue-gray-30: #bbc1c7;
@@ -100,20 +92,60 @@
   --dds-color-dark-gray-105: #383838;
   --dds-color-dark-gray-115: #282828;
   --dds-color-dark-gray-125: #1a1a1a;
-  --dds-color-feedback-positive: #00c3ac; /* System status is positive */
-  --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
-  --dds-color-feedback-negative: #f21a27; /* System status is warning */
-  --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
-  --dds-color-feedback-information: #30ade9; /* System status is warning */
-  --dds-color-brand-primary: #76cff4; /* Primary brand blue */
-  --dds-color-brand-secondary: #30ade9; /* Primary secondary brand blue */
-  --dds-color-text-brand-primary: #76cff4;
-  --dds-color-text-theme: #414141;
-  --dds-color-text-default: #f2f2f2;
-  --dds-color-text-default-sub: #ebebeb;
-  --dds-color-background-theme: #000000;
-  --dds-color-background-component: #414141;
-  --dds-color-background-object: #f2f2f2;
+  --dds-color-purple-10: #f0ddf3;
+  --dds-color-purple-20: #e1bbe8;
+  --dds-color-purple-30: #d399dc;
+  --dds-color-purple-40: #c477d0;
+  --dds-color-purple-50: #b556c5;
+  --dds-color-purple-60: #a03db0;
+  --dds-color-purple-70: #81318e;
+  --dds-color-purple-80: #6f2a7a;
+  --dds-color-purple-90: #5c2365;
+  --dds-color-purple-100: #4a1c51;
+  --dds-color-purple-110: #37153d;
+  --dds-color-purple-120: #250e29;
+  --dds-color-common-brand-default: #30ade9;
+  --dds-color-common-brand-hover: #54c3f1;
+  --dds-color-common-brand-press: #76cff4;
+  --dds-color-common-surface-brand-hover: #002b40;
+  --dds-color-common-surface-brand-press: #004160;
+  --dds-color-common-surface-neutral-hover: #282828;
+  --dds-color-common-surface-neutral-press: #313131;
+  --dds-color-common-surface-danger-hover: #3e0307;
+  --dds-color-common-surface-danger-press: #5d050a;
+  --dds-color-common-surface-default: #212121;
+  --dds-color-common-surface-hover: #282828;
+  --dds-color-common-surface-press: #313131;
+  --dds-color-common-surface-selected-default: #002b40;
+  --dds-color-common-surface-selected-hover: #004160;
+  --dds-color-common-surface-selected-press: #005077;
+  --dds-color-common-neutral-default: #bfbfbf;
+  --dds-color-common-neutral-hover: #cecece;
+  --dds-color-common-neutral-press: #dcdcdc;
+  --dds-color-common-danger-default: #f21a27;
+  --dds-color-common-danger-hover: #f4404b;
+  --dds-color-common-danger-press: #f7666f;
+  --dds-color-common-success: #00c3ac;
+  --dds-color-common-warning: #efb000;
+  --dds-color-common-alarm: #fa7a12;
+  --dds-color-common-information: #30ade9;
+  --dds-color-common-disabled: #616161;
+  --dds-color-common-text-primary: #dcdcdc;
+  --dds-color-common-text-secondary: #bfbfbf;
+  --dds-color-common-text-inverse: #212121;
+  --dds-color-common-border-focus: #54c3f1;
+  --dds-color-common-border-empty: #515151;
+  --dds-color-common-background-default: #212121;
+  --dds-color-common-background-overlay: #000000;
+  --dds-color-divider: #515151;
+  --dds-color-link-text-default: #76cff4;
+  --dds-color-link-text-hover: #98dbf7;
+  --dds-color-link-text-press: #bbe7f9;
+  --dds-color-link-text-visited-default: #c477d0;
+  --dds-color-link-text-visited-hover: #d399dc;
+  --dds-color-link-text-visited-press: #e1bbe8;
+  --dds-color-link-surface-visited-hover: #250e29;
+  --dds-color-link-surface-visited-press: #37153d;
   --dds-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -130,88 +162,24 @@
   --dds-space-400: 16px;
   --dds-space-800: 32px;
   --dds-space-050: 2px;
-  --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
+  --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
+  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
+  --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
+  --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
+  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
+  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
+  --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
+  --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
+  --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
+  --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
+  --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
+  --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
   --dds-font-size-300: 12px;
   --dds-font-size-350: 14px;
   --dds-font-size-400: 16px;
-  --dds-line-height-tight: 130%;
-  --dds-line-height-normal: 150%;
-  --dds-font-weight-bold: Bold;
-  --dds-font-weight-regular: Regular;
-  --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
-  --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
-  --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
-  --dds-checkbox-border-unselected: 2px solid #bfbfbf;
-  --dds-checkbox-color-background: #30ade9;
-  --dds-checkbox-color-icon: #ffffff;
-  --dds-dropdown-color-background: #ffffff;
-  --dds-dropdown-color-text: #515151;
-  --dds-dropdown-tray-color-background-selected: #ebebeb;
-  --dds-table-color-background: #ffffff;
-  --dds-table-color-text: #515151;
-  --dds-table-header-border: 1px none #000000;
-  --dds-table-cell-border: 1px none #ebebeb;
-  --dds-table-page-number-color-background-selected: #828282;
-  --dds-table-page-number-color-text-default: #515151;
-  --dds-table-page-number-color-text-selected: #ffffff;
-  --dds-table-page-number-border-hover: 1px none #828282;
-  --dds-login-sso-button-border: 1px none #616161;
-  --dds-login-sso-button-color-text: #616161;
-  --dds-form-color-background: #ffffff;
-  --dds-form-color-text-default: #414141;
-  --dds-form-color-text-placeholder: #828282;
-  --dds-form-color-text-positive: #00c3ac;
-  --dds-form-color-text-negative: #f21a27;
-  --dds-notification-color-background-success: #00c3ac;
-  --dds-notification-color-background-error: #f21a27;
-  --dds-notification-color-background-warning: #ffbf0e;
-  --dds-notification-color-background-alarm: #fa7a12;
-  --dds-notification-color-background-information: #30ade9;
-  --dds-notification-color-background-theme: #414141;
-  --dds-notification-color-text: #f2f2f2;
-  --dds-notification-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-icon-color-background-neutral: #a0a0a0;
-  --dds-icon-color-background-default: #f2f2f2;
-  --dds-icon-color-background-theme: #000000;
-  --dds-container-color-background: #414141;
-  --dds-container-color-text-header: #f2f2f2;
-  --dds-container-color-text-body: #ebebeb;
-  --dds-card-shadow: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
-  --dds-button-color-background-primary-active: #76cff4; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #30ade9;
-  --dds-button-color-background-primary-press: #98dbf7;
-  --dds-button-color-background-primary-focus: #bbe7f9;
-  --dds-button-color-background-primary-disabled: #616161;
-  --dds-button-color-border-secondary-active: #76cff4;
-  --dds-button-color-border-secondary-hover: #30ade9;
-  --dds-button-color-border-secondary-press: #98dbf7;
-  --dds-button-color-border-secondary-focus: #bbe7f9;
-  --dds-button-color-border-secondary-disabled: #616161;
-  --dds-button-color-text-secondary-active: #76cff4;
-  --dds-button-color-text-secondary-hover: #30ade9;
-  --dds-button-color-text-secondary-press: #98dbf7;
-  --dds-button-color-text-secondary-focus: #bbe7f9;
-  --dds-button-color-text-secondary-disabled: #616161;
-  --dds-button-color-text-primary: #414141;
-  --dds-tab-color-line-active: #76cff4;
-  --dds-tab-color-line-hover: #30ade9;
-  --dds-tab-color-line-press: #98dbf7;
-  --dds-tab-color-line-focus: #bbe7f9;
-  --dds-tab-color-line-disabled: #616161;
-  --dds-tab-color-text-active: #76cff4;
-  --dds-tab-color-text-hover: #30ade9;
-  --dds-tab-color-text-press: #98dbf7;
-  --dds-tab-color-text-focus: #bbe7f9;
-  --dds-tab-color-text-disabled: #616161;
+  --dds-font-line-height-tight: 1.3;
+  --dds-font-line-height-normal: 1.5;
+  --dds-font-weight-bold: 700;
+  --dds-font-weight-regular: 400;
+  --dds-font-family-base: Roboto;
 }