@daikin-oss/dds-tokens 0.0.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+
+## 0.2.0
+
+### Minor Changes
+
+- **BREAKING CHANGE**: 604 token(s) removed (`body-2-xl`, `border-width-s`, `color-magenta-110`, `font-size-s`, `space-2` and more).
+  **BREAKING CHANGE**: 12 token(s) updated with incompatible changes (`font-family-base`, `font-family-base`, `font-weight-bold`).
+  315 token(s) added.
+  349 token(s) updated.
+
+### Patch Changes
+
+- [#32](https://github.com/dsv-rp/dds-tokens/pull/32) [`bed4855`](https://github.com/dsv-rp/dds-tokens/commit/bed4855045a60df8c448c1024f991d69377e8c8f) Thanks [@yodas7](https://github.com/yodas7)! - Add JSON builds. (DDS-1513)
+  Add type definitions for CJS files.
+
+- [#25](https://github.com/dsv-rp/dds-tokens/pull/25) [`b0f7c73`](https://github.com/dsv-rp/dds-tokens/commit/b0f7c73f4214e8480af395c21ae59ef8752d676f) Thanks [@yodas7](https://github.com/yodas7)! - Add SCSS build and JSON source to the package.
+  The `.js` extension is now optional when importing JS files.
+  The directory structure of the build results has been changed so that ESM and CJS are generated in the same directory.
+  There is no difference in the import method, except that the `.js` extension can now be omitted, as we define subpath exports.
+
+All notable changes to this project will be documented in this file.
+
+## [0.1.0] - 2024-07-29
+
+### Added
+
+- DDS-1227 Add CJS output to build
+- Design Token Changes DDS-873/874/980
+
+## [0.0.0] - Initial Commit
+
+### Added
+
+- Initial support for design tokens in both CSS and JS formats for Daikin and AAF brands.

package/README.md

@@ -1,38 +1,102 @@
 # dds-tokens
 
-This package outputs:
+This package contains:
 
--   Tokens as both `js` and `css` variables
--   Brand-specific tokens (i.e. `Daikin` and `AAF`)
--   `Light` and `Dark` mode
--   General styles as `variables.(css|js)`
--   Component-specific styles (i.e. `buttons.css`)
+- Tokens as JS, CSS and SCSS variables
+- Brand-specific tokens (e.g. `Daikin` and `AAF`)
+- `Light` and `Dark` mode for each themes
+- General styles as `variables.(css|js)`
+- Component-specific styles (e.g. `buttons.css`)
+- SCSS mixins
 
-For a complete list of outputs, please check out the file outputs in the `build` folder.
+For the complete list of outputs, please check out the files output in the `build` folder.
 
 ## Usage
 
-```
+Install package:
+
+```sh
 npm install @daikin-oss/dds-tokens
 ```
 
-Import as js variables:
+### Import JS variables
 
-```
-import {
-    buttonColorBackgroundPrimaryActive
-} from '@daikin-oss/dds-tokens/js/daikin/Light/variables.js';
+```js
+// ESM
+import { buttonColorBackgroundPrimaryActive } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+
+// CommonJS
+const {
+  buttonColorBackgroundPrimaryActive,
+} = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 ```
 
-Import the CSS:
+### Import CSS
 
+```js
+import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css";
 ```
-import variables from '@daikin-oss/dds-tokens/css/daikin/Dark/variables.css'
+
+or
+
+```css
+@import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");
 ```
 
-The above includes all CSS classes - including core styles and components
+The above includes all CSS classes - including core styles and components.
 There are also component-specific files if you don't need everything:
 
+```js
+import buttonStyles from "@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css";
+```
+
+### Import SCSS mixins
+
+SCSS mixins require the SCSS compiler, but they provide flexibility in terms of where CSS variables are deployed.
+
+Import all themes:
+
+```scss
+@use "pkg:@daikin-oss/dds-tokens/scss/mixins" as dds-tokens;
+
+:root {
+  @include dds-tokens.daikin-Light-variables;
+}
+
+:root[data-theme="aaf"] {
+  @include dds-tokens.aaf-Light-variables;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dds-tokens.daikin-Dark-variables;
+  }
+
+  :root[data-theme="aaf"] {
+    @include dds-tokens.aaf-Dark-variables;
+  }
+}
 ```
-import buttonStyles from '@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css'
+
+Import individual themes:
+
+```scss
+@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Light/mixins" as daikin-Light;
+@use "pkg:@daikin-oss/dds-tokens/scss/daikin/Dark/mixins" as daikin-Dark;
+
+:root {
+  @include daikin-Light.variables;
+}
+
+:root.dark {
+  @include daikin-Dark.variables;
+}
 ```
+
+## JSONs
+
+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>"] }`.
+
+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/buttons.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --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/css/aaf/Dark/variables.css

@@ -0,0 +1,202 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --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/css/aaf/Light/buttons.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --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/css/aaf/Light/variables.css

@@ -0,0 +1,202 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --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/css/daikin/Dark/buttons.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --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;
+}