@daikin-oss/dds-tokens 0.0.0 → 0.2.0

package/build/scss/daikin/Light/_mixins.scss

@@ -0,0 +1,258 @@
+/**
+ * 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: #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;
+  --dds-color-common-surface-brand-hover: #ddf3fc;
+  --dds-color-common-surface-brand-press: #bbe7f9;
+  --dds-color-common-surface-neutral-hover: #f2f2f2;
+  --dds-color-common-surface-neutral-press: #ebebeb;
+  --dds-color-common-surface-danger-hover: #fdd9db;
+  --dds-color-common-surface-danger-press: #fbb3b7;
+  --dds-color-common-surface-default: #ffffff;
+  --dds-color-common-surface-hover: #f2f2f2;
+  --dds-color-common-surface-press: #ebebeb;
+  --dds-color-common-surface-selected-default: #ddf3fc;
+  --dds-color-common-surface-selected-hover: #bbe7f9;
+  --dds-color-common-surface-selected-press: #98dbf7;
+  --dds-color-common-neutral-default: #616161;
+  --dds-color-common-neutral-hover: #515151;
+  --dds-color-common-neutral-press: #414141;
+  --dds-color-common-danger-default: #d80c18;
+  --dds-color-common-danger-hover: #b90a15;
+  --dds-color-common-danger-press: #9a0911;
+  --dds-color-common-success: #008f7e;
+  --dds-color-common-warning: #b88700;
+  --dds-color-common-alarm: #e46b08;
+  --dds-color-common-information: #0097e0;
+  --dds-color-common-disabled: #bfbfbf;
+  --dds-color-common-text-primary: #414141;
+  --dds-color-common-text-secondary: #616161;
+  --dds-color-common-text-inverse: #ffffff;
+  --dds-color-common-border-focus: #0081c0;
+  --dds-color-common-border-empty: #cecece;
+  --dds-color-common-background-default: #ffffff;
+  --dds-color-common-background-overlay: #000000;
+  --dds-color-divider: #cecece;
+  --dds-color-link-text-default: #00689a;
+  --dds-color-link-text-hover: #005077;
+  --dds-color-link-text-press: #005077;
+  --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: #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;
+}

package/package.json

@@ -1,45 +1,68 @@
 {
-    "name": "@daikin-oss/dds-tokens",
-    "version": "0.0.0",
-    "description": "Design token definitions for DDS",
-    "exports": {
-        "./css/daikin/*": "./build/css/DKN/*",
-        "./js/daikin/*": {
-            "import": "./build/js/DKN/*",
-            "types": "./build/js/DKN/*.d.ts"
-        },
-        "./css/aaf/*": "./build/css/AAF/*",
-        "./js/aaf/*": {
-            "import": "./build/js/AAF/*",
-            "types": "./build/js/DKN/*.d.ts"
-        }
+  "name": "@daikin-oss/dds-tokens",
+  "version": "0.2.0",
+  "description": "Design token definitions for DDS",
+  "type": "module",
+  "files": [
+    "build",
+    "themes",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./js/*.js": {
+      "import": "./build/js/*.js",
+      "require": "./build/js/*.cjs",
+      "types": "./build/js/*.d.ts",
+      "default": "./build/js/*.js"
     },
-    "scripts": {
-        "build": "node build-tokens.js",
-        "format": "prettier --write \"**/*.{js,json,yaml}\""
+    "./js/*": {
+      "import": "./build/js/*.js",
+      "require": "./build/js/*.cjs",
+      "types": "./build/js/*.d.ts",
+      "default": "./build/js/*.js"
     },
-    "files": [
-        "build"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dsv-rp/dds-tokens.git"
-    },
-    "keywords": [
-        "design",
-        "system",
-        "dds",
-        "tokens"
-    ],
-    "author": "",
-    "license": "ISC",
-    "bugs": {
-        "url": "https://github.com/dsv-rp/dds-tokens/issues"
-    },
-    "homepage": "https://github.com/dsv-rp/dds-tokens#readme",
-    "devDependencies": {
-        "@tokens-studio/sd-transforms": "^0.11.10",
-        "prettier": "^3.2.5",
-        "style-dictionary": "^3.9.0"
-    }
+    "./css/*": "./build/css/*",
+    "./scss/*": "./build/scss/*",
+    "./json/*": "./build/json/*",
+    "./themes/*": "./themes/*"
+  },
+  "scripts": {
+    "build": "tsx scripts/build.ts",
+    "changeset-tokens": "tsx scripts/changeset-tokens.ts",
+    "changeset-version": "changeset version && npm install --package-lock-only",
+    "changeset-publish": "changeset publish",
+    "format": "prettier -w .",
+    "test:unit": "vitest",
+    "test:e2e": "node --test e2e",
+    "test": "npm run test:unit -- --run && npm run test:e2e"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dsv-rp/dds-tokens.git"
+  },
+  "keywords": [
+    "design",
+    "system",
+    "dds",
+    "tokens"
+  ],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dsv-rp/dds-tokens/issues"
+  },
+  "homepage": "https://github.com/dsv-rp/dds-tokens#readme",
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.10",
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "@types/node": "^20.17.8",
+    "prettier": "^3.4.0",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "sass-embedded": "^1.81.0",
+    "style-dictionary": "^4.2.0",
+    "tsx": "^4.19.2",
+    "vitest": "^2.1.5"
+  }
 }

package/themes/$metadata.json

@@ -0,0 +1,15 @@
+{
+  "tokenSetOrder": [
+    "reference",
+    "system",
+    "component",
+    "dkn/light/system",
+    "dkn/light/component",
+    "dkn/dark/system",
+    "dkn/dark/component",
+    "aaf/light/system",
+    "aaf/light/component",
+    "aaf/dark/system",
+    "aaf/dark/component"
+  ]
+}

package/themes/$themes.json

@@ -0,0 +1,54 @@
+[
+  {
+    "id": "098dc788a03b232460495b9960bc227e47904387",
+    "name": "Light",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "reference": "enabled",
+      "system": "enabled",
+      "component": "enabled",
+      "dkn/light/system": "enabled",
+      "dkn/light/component": "enabled"
+    },
+    "group": "DKN"
+  },
+  {
+    "id": "05b7910dfcd804207fd5ceeeac8d1e7a44b35d7c",
+    "name": "Dark",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "reference": "enabled",
+      "system": "enabled",
+      "component": "enabled",
+      "dkn/dark/system": "enabled",
+      "dkn/dark/component": "enabled"
+    },
+    "group": "DKN"
+  },
+  {
+    "id": "39a098e7762a7f008490481d4757642b1b668321",
+    "name": "Light",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "reference": "enabled",
+      "system": "enabled",
+      "component": "enabled",
+      "aaf/light/system": "enabled",
+      "aaf/light/component": "enabled"
+    },
+    "group": "AAF"
+  },
+  {
+    "id": "46b7b45ad095e7d7cf169eceb410a2511fa4a1f0",
+    "name": "Dark",
+    "$figmaStyleReferences": {},
+    "selectedTokenSets": {
+      "reference": "enabled",
+      "system": "enabled",
+      "component": "enabled",
+      "aaf/dark/system": "enabled",
+      "aaf/dark/component": "enabled"
+    },
+    "group": "AAF"
+  }
+]

package/themes/aaf/dark/component.json

@@ -0,0 +1,113 @@
+{
+  "container": {
+    "color": {
+      "background": {
+        "value": "{color.background.component}",
+        "type": "color"
+      },
+      "text": {
+        "header": {
+          "value": "{color.text.default}",
+          "type": "color"
+        },
+        "body": {
+          "value": "{color.text.default-sub}",
+          "type": "color"
+        }
+      }
+    },
+    "shadow": {
+      "value": "{shadow.white}",
+      "type": "boxShadow"
+    }
+  },
+  "icon": {
+    "color": {
+      "background": {
+        "value": "{color.background.object}",
+        "type": "color"
+      }
+    }
+  },
+  "button": {
+    "color": {
+      "background": {
+        "primary": {
+          "active": {
+            "value": "{color.brand.primary}",
+            "type": "color",
+            "description": "Color used for the default state of a secondary button"
+          },
+          "hover": {
+            "value": "{color.brand.secondary}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.red.aaf.300}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{color.red.aaf.200}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{color.gray.80}",
+            "type": "color"
+          }
+        }
+      },
+      "border": {
+        "secondary": {
+          "active": {
+            "value": "{color.brand.primary}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.brand.secondary}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.red.aaf.300}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{color.red.aaf.200}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{color.gray.80}",
+            "type": "color"
+          }
+        }
+      },
+      "text": {
+        "secondary": {
+          "active": {
+            "value": "{color.text.brand.primary}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.brand.secondary}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.red.aaf.300}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{color.red.aaf.200}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{color.gray.80}",
+            "type": "color"
+          }
+        },
+        "primary": {
+          "value": "{color.text.theme}",
+          "type": "color"
+        }
+      }
+    }
+  }
+}

package/themes/aaf/dark/system.json

@@ -0,0 +1,49 @@
+{
+  "color": {
+    "brand": {
+      "primary": {
+        "value": "{color.red.aaf.400}",
+        "type": "color",
+        "description": "Primary brand blue"
+      },
+      "secondary": {
+        "value": "{color.red.aaf.600}",
+        "type": "color"
+      }
+    },
+    "text": {
+      "brand": {
+        "primary": {
+          "value": "{color.brand.primary}",
+          "type": "color"
+        }
+      },
+      "theme": {
+        "value": "{color.gray.90}",
+        "type": "color"
+      },
+      "default": {
+        "value": "{color.white}",
+        "type": "color"
+      },
+      "default-sub": {
+        "value": "{color.gray.10}",
+        "type": "color"
+      }
+    },
+    "background": {
+      "theme": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "component": {
+        "value": "{color.gray.90}",
+        "type": "color"
+      },
+      "object": {
+        "value": "{color.white}",
+        "type": "color"
+      }
+    }
+  }
+}