@daikin-oss/dds-tokens 0.0.0 → 0.2.0

package/build/scss/_mixins.scss

@@ -0,0 +1,4 @@
+@forward "daikin/Light/mixins" as daikin-Light-*;
+@forward "daikin/Dark/mixins" as daikin-Dark-*;
+@forward "aaf/Light/mixins" as aaf-Light-*;
+@forward "aaf/Dark/mixins" as aaf-Dark-*;

package/build/scss/aaf/Dark/_mixins.scss

@@ -0,0 +1,202 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@mixin variables {
+  --dds-color-blue-10: #ddf3fc;
+  --dds-color-blue-20: #bbe7f9;
+  --dds-color-blue-30: #98dbf7;
+  --dds-color-blue-40: #76cff4;
+  --dds-color-blue-50: #54c3f1;
+  --dds-color-blue-60: #30ade9;
+  --dds-color-blue-70: #0097e0;
+  --dds-color-blue-80: #0081c0;
+  --dds-color-blue-90: #00689a;
+  --dds-color-blue-100: #005077;
+  --dds-color-blue-110: #004160;
+  --dds-color-blue-120: #002b40;
+  --dds-color-green-10: #ccfef8;
+  --dds-color-green-20: #9bfaef;
+  --dds-color-green-30: #6cf5e4;
+  --dds-color-green-40: #3bf1dc;
+  --dds-color-green-50: #13e5cc;
+  --dds-color-green-60: #00c3ac;
+  --dds-color-green-70: #008f7e;
+  --dds-color-green-80: #007b6c;
+  --dds-color-green-90: #00665a;
+  --dds-color-green-100: #005248;
+  --dds-color-green-110: #003d36;
+  --dds-color-green-120: #002924;
+  --dds-color-yellow-10: #fff4d7;
+  --dds-color-yellow-20: #ffeaaf;
+  --dds-color-yellow-30: #ffd45f;
+  --dds-color-yellow-40: #ffc936;
+  --dds-color-yellow-50: #ffbf0e;
+  --dds-color-yellow-60: #efb000;
+  --dds-color-yellow-70: #b88700;
+  --dds-color-yellow-80: #9e7400;
+  --dds-color-yellow-90: #836000;
+  --dds-color-yellow-100: #694d00;
+  --dds-color-yellow-110: #4f3a00;
+  --dds-color-yellow-120: #352700;
+  --dds-color-orange-10: #feead9;
+  --dds-color-orange-20: #fcd4b3;
+  --dds-color-orange-30: #fbbf8e;
+  --dds-color-orange-40: #ff9c4b;
+  --dds-color-orange-50: #fd8b2e;
+  --dds-color-orange-60: #fa7a12;
+  --dds-color-orange-70: #e46b08;
+  --dds-color-orange-80: #b45100;
+  --dds-color-orange-90: #964400;
+  --dds-color-orange-100: #783600;
+  --dds-color-orange-110: #5a2900;
+  --dds-color-orange-120: #3c1b00;
+  --dds-color-red-10: #fdd9db;
+  --dds-color-red-20: #fbb3b7;
+  --dds-color-red-30: #f98d93;
+  --dds-color-red-40: #f7666f;
+  --dds-color-red-50: #f4404b;
+  --dds-color-red-60: #f21a27;
+  --dds-color-red-70: #d80c18;
+  --dds-color-red-80: #b90a15;
+  --dds-color-red-90: #9a0911;
+  --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;
+  --dds-color-gray-40: #cecece;
+  --dds-color-gray-50: #bfbfbf;
+  --dds-color-gray-60: #a0a0a0;
+  --dds-color-gray-70: #828282;
+  --dds-color-gray-80: #616161;
+  --dds-color-gray-90: #515151;
+  --dds-color-gray-100: #414141;
+  --dds-color-gray-110: #313131;
+  --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;
+  --dds-color-blue-gray-40: #a4acb4;
+  --dds-color-blue-gray-50: #8d98a1;
+  --dds-color-blue-gray-60: #76838e;
+  --dds-color-blue-gray-70: #636e78;
+  --dds-color-blue-gray-80: #505961;
+  --dds-color-blue-gray-90: #444b52;
+  --dds-color-blue-gray-100: #30353a;
+  --dds-color-blue-gray-110: #282c30;
+  --dds-color-blue-gray-120: #1b1e21;
+  --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-border-radius-100: 4px;
+  --dds-border-radius-150: 6px;
+  --dds-border-radius-200: 8px;
+  --dds-border-radius-250: 10px;
+  --dds-border-radius-300: 12px;
+  --dds-border-radius-400: 16px;
+  --dds-border-radius-050: 2px;
+  --dds-border-width-100: 4px;
+  --dds-border-width-025: 1px;
+  --dds-border-width-050: 2px;
+  --dds-space-100: 4px;
+  --dds-space-200: 8px;
+  --dds-space-300: 12px;
+  --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-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;
+}

package/build/scss/aaf/Light/_mixins.scss

@@ -0,0 +1,202 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@mixin variables {
+  --dds-color-blue-10: #ddf3fc;
+  --dds-color-blue-20: #bbe7f9;
+  --dds-color-blue-30: #98dbf7;
+  --dds-color-blue-40: #76cff4;
+  --dds-color-blue-50: #54c3f1;
+  --dds-color-blue-60: #30ade9;
+  --dds-color-blue-70: #0097e0;
+  --dds-color-blue-80: #0081c0;
+  --dds-color-blue-90: #00689a;
+  --dds-color-blue-100: #005077;
+  --dds-color-blue-110: #004160;
+  --dds-color-blue-120: #002b40;
+  --dds-color-green-10: #ccfef8;
+  --dds-color-green-20: #9bfaef;
+  --dds-color-green-30: #6cf5e4;
+  --dds-color-green-40: #3bf1dc;
+  --dds-color-green-50: #13e5cc;
+  --dds-color-green-60: #00c3ac;
+  --dds-color-green-70: #008f7e;
+  --dds-color-green-80: #007b6c;
+  --dds-color-green-90: #00665a;
+  --dds-color-green-100: #005248;
+  --dds-color-green-110: #003d36;
+  --dds-color-green-120: #002924;
+  --dds-color-yellow-10: #fff4d7;
+  --dds-color-yellow-20: #ffeaaf;
+  --dds-color-yellow-30: #ffd45f;
+  --dds-color-yellow-40: #ffc936;
+  --dds-color-yellow-50: #ffbf0e;
+  --dds-color-yellow-60: #efb000;
+  --dds-color-yellow-70: #b88700;
+  --dds-color-yellow-80: #9e7400;
+  --dds-color-yellow-90: #836000;
+  --dds-color-yellow-100: #694d00;
+  --dds-color-yellow-110: #4f3a00;
+  --dds-color-yellow-120: #352700;
+  --dds-color-orange-10: #feead9;
+  --dds-color-orange-20: #fcd4b3;
+  --dds-color-orange-30: #fbbf8e;
+  --dds-color-orange-40: #ff9c4b;
+  --dds-color-orange-50: #fd8b2e;
+  --dds-color-orange-60: #fa7a12;
+  --dds-color-orange-70: #e46b08;
+  --dds-color-orange-80: #b45100;
+  --dds-color-orange-90: #964400;
+  --dds-color-orange-100: #783600;
+  --dds-color-orange-110: #5a2900;
+  --dds-color-orange-120: #3c1b00;
+  --dds-color-red-10: #fdd9db;
+  --dds-color-red-20: #fbb3b7;
+  --dds-color-red-30: #f98d93;
+  --dds-color-red-40: #f7666f;
+  --dds-color-red-50: #f4404b;
+  --dds-color-red-60: #f21a27;
+  --dds-color-red-70: #d80c18;
+  --dds-color-red-80: #b90a15;
+  --dds-color-red-90: #9a0911;
+  --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;
+  --dds-color-gray-40: #cecece;
+  --dds-color-gray-50: #bfbfbf;
+  --dds-color-gray-60: #a0a0a0;
+  --dds-color-gray-70: #828282;
+  --dds-color-gray-80: #616161;
+  --dds-color-gray-90: #515151;
+  --dds-color-gray-100: #414141;
+  --dds-color-gray-110: #313131;
+  --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;
+  --dds-color-blue-gray-40: #a4acb4;
+  --dds-color-blue-gray-50: #8d98a1;
+  --dds-color-blue-gray-60: #76838e;
+  --dds-color-blue-gray-70: #636e78;
+  --dds-color-blue-gray-80: #505961;
+  --dds-color-blue-gray-90: #444b52;
+  --dds-color-blue-gray-100: #30353a;
+  --dds-color-blue-gray-110: #282c30;
+  --dds-color-blue-gray-120: #1b1e21;
+  --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-border-radius-100: 4px;
+  --dds-border-radius-150: 6px;
+  --dds-border-radius-200: 8px;
+  --dds-border-radius-250: 10px;
+  --dds-border-radius-300: 12px;
+  --dds-border-radius-400: 16px;
+  --dds-border-radius-050: 2px;
+  --dds-border-width-100: 4px;
+  --dds-border-width-025: 1px;
+  --dds-border-width-050: 2px;
+  --dds-space-100: 4px;
+  --dds-space-200: 8px;
+  --dds-space-300: 12px;
+  --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-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;
+}

package/build/scss/daikin/Dark/_mixins.scss

@@ -0,0 +1,217 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@mixin variables {
+  --dds-color-blue-10: #ddf3fc;
+  --dds-color-blue-20: #bbe7f9;
+  --dds-color-blue-30: #98dbf7;
+  --dds-color-blue-40: #76cff4;
+  --dds-color-blue-50: #54c3f1;
+  --dds-color-blue-60: #30ade9;
+  --dds-color-blue-70: #0097e0;
+  --dds-color-blue-80: #0081c0;
+  --dds-color-blue-90: #00689a;
+  --dds-color-blue-100: #005077;
+  --dds-color-blue-110: #004160;
+  --dds-color-blue-120: #002b40;
+  --dds-color-green-10: #ccfef8;
+  --dds-color-green-20: #9bfaef;
+  --dds-color-green-30: #6cf5e4;
+  --dds-color-green-40: #3bf1dc;
+  --dds-color-green-50: #13e5cc;
+  --dds-color-green-60: #00c3ac;
+  --dds-color-green-70: #008f7e;
+  --dds-color-green-80: #007b6c;
+  --dds-color-green-90: #00665a;
+  --dds-color-green-100: #005248;
+  --dds-color-green-110: #003d36;
+  --dds-color-green-120: #002924;
+  --dds-color-yellow-10: #fff4d7;
+  --dds-color-yellow-20: #ffeaaf;
+  --dds-color-yellow-30: #ffd45f;
+  --dds-color-yellow-40: #ffc936;
+  --dds-color-yellow-50: #ffbf0e;
+  --dds-color-yellow-60: #efb000;
+  --dds-color-yellow-70: #b88700;
+  --dds-color-yellow-80: #9e7400;
+  --dds-color-yellow-90: #836000;
+  --dds-color-yellow-100: #694d00;
+  --dds-color-yellow-110: #4f3a00;
+  --dds-color-yellow-120: #352700;
+  --dds-color-orange-10: #feead9;
+  --dds-color-orange-20: #fcd4b3;
+  --dds-color-orange-30: #fbbf8e;
+  --dds-color-orange-40: #ff9c4b;
+  --dds-color-orange-50: #fd8b2e;
+  --dds-color-orange-60: #fa7a12;
+  --dds-color-orange-70: #e46b08;
+  --dds-color-orange-80: #b45100;
+  --dds-color-orange-90: #964400;
+  --dds-color-orange-100: #783600;
+  --dds-color-orange-110: #5a2900;
+  --dds-color-orange-120: #3c1b00;
+  --dds-color-red-10: #fdd9db;
+  --dds-color-red-20: #fbb3b7;
+  --dds-color-red-30: #f98d93;
+  --dds-color-red-40: #f7666f;
+  --dds-color-red-50: #f4404b;
+  --dds-color-red-60: #f21a27;
+  --dds-color-red-70: #d80c18;
+  --dds-color-red-80: #b90a15;
+  --dds-color-red-90: #9a0911;
+  --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;
+  --dds-color-gray-40: #cecece;
+  --dds-color-gray-50: #bfbfbf;
+  --dds-color-gray-60: #a0a0a0;
+  --dds-color-gray-70: #828282;
+  --dds-color-gray-80: #616161;
+  --dds-color-gray-90: #515151;
+  --dds-color-gray-100: #414141;
+  --dds-color-gray-110: #313131;
+  --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;
+  --dds-color-blue-gray-40: #a4acb4;
+  --dds-color-blue-gray-50: #8d98a1;
+  --dds-color-blue-gray-60: #76838e;
+  --dds-color-blue-gray-70: #636e78;
+  --dds-color-blue-gray-80: #505961;
+  --dds-color-blue-gray-90: #444b52;
+  --dds-color-blue-gray-100: #30353a;
+  --dds-color-blue-gray-110: #282c30;
+  --dds-color-blue-gray-120: #1b1e21;
+  --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-border-radius-100: 4px;
+  --dds-border-radius-150: 6px;
+  --dds-border-radius-200: 8px;
+  --dds-border-radius-250: 10px;
+  --dds-border-radius-300: 12px;
+  --dds-border-radius-400: 16px;
+  --dds-border-radius-050: 2px;
+  --dds-border-width-100: 4px;
+  --dds-border-width-025: 1px;
+  --dds-border-width-050: 2px;
+  --dds-space-100: 4px;
+  --dds-space-200: 8px;
+  --dds-space-300: 12px;
+  --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-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;
+}