@daikin-oss/dds-tokens 0.2.1 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.1
+
+### Patch Changes
+
+- [#43](https://github.com/dsv-rp/dds-tokens/pull/43) [`f337cef`](https://github.com/dsv-rp/dds-tokens/commit/f337ceffd68b769f50bba793d3ce010a50b09ab9) Thanks [@yodas7](https://github.com/yodas7)! - Add Tokens Studio type to the tokens in the JSON outputs.
+
+## 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

package/README.md

@@ -97,6 +97,6 @@ Import individual themes:
 
 There are JSON files under `json/` that lists the types and values of the tokens.
 These are basically for internal use and are used to integrate design tokens with Tailwind CSS.
-The structure of the JSON files is `{ "<token name>": ["<token value>", "<token type>"] }`.
+The structure of the JSON files is `{ "<token name>": ["<token value>", "<style-dictionary token type>", "<tokens-studio token type>" | null] }`.
 
 In addition, the theme JSON files before building, which are located in `themes/`, are also published in the same path in the package.

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;
@@ -112,20 +104,6 @@
   --dds-color-purple-100: #4a1c51;
   --dds-color-purple-110: #37153d;
   --dds-color-purple-120: #250e29;
-  --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;
@@ -142,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;
@@ -112,20 +104,6 @@
   --dds-color-purple-100: #4a1c51;
   --dds-color-purple-110: #37153d;
   --dds-color-purple-120: #250e29;
-  --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;
@@ -142,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;
@@ -112,32 +104,18 @@
   --dds-color-purple-100: #4a1c51;
   --dds-color-purple-110: #37153d;
   --dds-color-purple-120: #250e29;
-  --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: #30ade9; /* Primary brand blue */
-  --dds-color-brand-secondary: #76cff4; /* Primary secondary brand blue */
-  --dds-color-text-brand-primary: #30ade9;
-  --dds-color-text-theme: #ffffff;
-  --dds-color-text-default: #414141;
-  --dds-color-text-default-sub: #616161;
-  --dds-color-background-theme: #ffffff;
-  --dds-color-background-component: #ffffff;
-  --dds-color-background-object: #414141;
   --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: #313131;
-  --dds-color-common-surface-neutral-press: #414141;
+  --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: #313131;
-  --dds-color-common-surface-press: #414141;
+  --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;
@@ -184,92 +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: #ffffff;
-  --dds-notification-color-text: #414141;
-  --dds-notification-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-icon-color-background-neutral: #a0a0a0;
-  --dds-icon-color-background-default: #414141;
-  --dds-icon-color-background-theme: #ffffff;
-  --dds-container-color-background: #ffffff;
-  --dds-container-color-text-header: #414141;
-  --dds-container-color-text-body: #616161;
-  --dds-card-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-card-color-background: #ffffff;
-  --dds-card-border-hover: 2px solid #BFBFBF;
-  --dds-card-border-alert: 2px solid #f21a27;
-  --dds-card-border-underline: 1px solid #d8dde0;
-  --dds-button-color-background-primary-active: #30ade9; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #76cff4;
-  --dds-button-color-background-primary-press: #0097e0;
-  --dds-button-color-background-primary-focus: #0081c0;
-  --dds-button-color-background-primary-disabled: #dcdcdc;
-  --dds-button-color-border-secondary-active: #30ade9;
-  --dds-button-color-border-secondary-hover: #76cff4;
-  --dds-button-color-border-secondary-press: #0097e0;
-  --dds-button-color-border-secondary-focus: #0081c0;
-  --dds-button-color-border-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-secondary-active: #30ade9;
-  --dds-button-color-text-secondary-hover: #76cff4;
-  --dds-button-color-text-secondary-press: #0097e0;
-  --dds-button-color-text-secondary-focus: #0081c0;
-  --dds-button-color-text-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-primary: #ffffff;
-  --dds-tab-color-line-active: #30ade9;
-  --dds-tab-color-line-hover: #76cff4;
-  --dds-tab-color-line-press: #0097e0;
-  --dds-tab-color-line-focus: #0081c0;
-  --dds-tab-color-line-disabled: #dcdcdc;
-  --dds-tab-color-text-active: #30ade9;
-  --dds-tab-color-text-hover: #76cff4;
-  --dds-tab-color-text-press: #0097e0;
-  --dds-tab-color-text-focus: #0081c0;
-  --dds-tab-color-text-disabled: #dcdcdc;
+  --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/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;
@@ -112,20 +104,6 @@
   --dds-color-purple-100: #4a1c51;
   --dds-color-purple-110: #37153d;
   --dds-color-purple-120: #250e29;
-  --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: #30ade9; /* Primary brand blue */
-  --dds-color-brand-secondary: #76cff4; /* Primary secondary brand blue */
-  --dds-color-text-brand-primary: #30ade9;
-  --dds-color-text-theme: #ffffff;
-  --dds-color-text-default: #414141;
-  --dds-color-text-default-sub: #616161;
-  --dds-color-background-theme: #ffffff;
-  --dds-color-background-component: #ffffff;
-  --dds-color-background-object: #414141;
   --dds-color-common-brand-default: #0097e0;
   --dds-color-common-brand-hover: #0081c0;
   --dds-color-common-brand-press: #00689a;
@@ -184,92 +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: #ffffff;
-  --dds-notification-color-text: #414141;
-  --dds-notification-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-icon-color-background-neutral: #a0a0a0;
-  --dds-icon-color-background-default: #414141;
-  --dds-icon-color-background-theme: #ffffff;
-  --dds-container-color-background: #ffffff;
-  --dds-container-color-text-header: #414141;
-  --dds-container-color-text-body: #616161;
-  --dds-card-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
-  --dds-card-color-background: #ffffff;
-  --dds-card-border-hover: 2px solid #BFBFBF;
-  --dds-card-border-alert: 2px solid #f21a27;
-  --dds-card-border-underline: 1px solid #d8dde0;
-  --dds-button-color-background-primary-active: #30ade9; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #76cff4;
-  --dds-button-color-background-primary-press: #0097e0;
-  --dds-button-color-background-primary-focus: #0081c0;
-  --dds-button-color-background-primary-disabled: #dcdcdc;
-  --dds-button-color-border-secondary-active: #30ade9;
-  --dds-button-color-border-secondary-hover: #76cff4;
-  --dds-button-color-border-secondary-press: #0097e0;
-  --dds-button-color-border-secondary-focus: #0081c0;
-  --dds-button-color-border-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-secondary-active: #30ade9;
-  --dds-button-color-text-secondary-hover: #76cff4;
-  --dds-button-color-text-secondary-press: #0097e0;
-  --dds-button-color-text-secondary-focus: #0081c0;
-  --dds-button-color-text-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-primary: #ffffff;
-  --dds-tab-color-line-active: #30ade9;
-  --dds-tab-color-line-hover: #76cff4;
-  --dds-tab-color-line-press: #0097e0;
-  --dds-tab-color-line-focus: #0081c0;
-  --dds-tab-color-line-disabled: #dcdcdc;
-  --dds-tab-color-text-active: #30ade9;
-  --dds-tab-color-text-hover: #76cff4;
-  --dds-tab-color-text-press: #0097e0;
-  --dds-tab-color-text-focus: #0081c0;
-  --dds-tab-color-text-disabled: #dcdcdc;
+  --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;
 }