@daikin-oss/dds-tokens 0.4.2 → 1.1.0

package/build/tailwind4.css

@@ -0,0 +1,177 @@
+@theme inline {
+  --color-dds-color-blue-10: var(--dds-color-blue-10);
+  --color-dds-color-blue-20: var(--dds-color-blue-20);
+  --color-dds-color-blue-30: var(--dds-color-blue-30);
+  --color-dds-color-blue-40: var(--dds-color-blue-40);
+  --color-dds-color-blue-50: var(--dds-color-blue-50);
+  --color-dds-color-blue-60: var(--dds-color-blue-60);
+  --color-dds-color-blue-70: var(--dds-color-blue-70);
+  --color-dds-color-blue-80: var(--dds-color-blue-80);
+  --color-dds-color-blue-90: var(--dds-color-blue-90);
+  --color-dds-color-blue-100: var(--dds-color-blue-100);
+  --color-dds-color-blue-110: var(--dds-color-blue-110);
+  --color-dds-color-blue-120: var(--dds-color-blue-120);
+  --color-dds-color-green-10: var(--dds-color-green-10);
+  --color-dds-color-green-20: var(--dds-color-green-20);
+  --color-dds-color-green-30: var(--dds-color-green-30);
+  --color-dds-color-green-40: var(--dds-color-green-40);
+  --color-dds-color-green-50: var(--dds-color-green-50);
+  --color-dds-color-green-60: var(--dds-color-green-60);
+  --color-dds-color-green-70: var(--dds-color-green-70);
+  --color-dds-color-green-80: var(--dds-color-green-80);
+  --color-dds-color-green-90: var(--dds-color-green-90);
+  --color-dds-color-green-100: var(--dds-color-green-100);
+  --color-dds-color-green-110: var(--dds-color-green-110);
+  --color-dds-color-green-120: var(--dds-color-green-120);
+  --color-dds-color-yellow-10: var(--dds-color-yellow-10);
+  --color-dds-color-yellow-20: var(--dds-color-yellow-20);
+  --color-dds-color-yellow-30: var(--dds-color-yellow-30);
+  --color-dds-color-yellow-40: var(--dds-color-yellow-40);
+  --color-dds-color-yellow-50: var(--dds-color-yellow-50);
+  --color-dds-color-yellow-60: var(--dds-color-yellow-60);
+  --color-dds-color-yellow-70: var(--dds-color-yellow-70);
+  --color-dds-color-yellow-80: var(--dds-color-yellow-80);
+  --color-dds-color-yellow-90: var(--dds-color-yellow-90);
+  --color-dds-color-yellow-100: var(--dds-color-yellow-100);
+  --color-dds-color-yellow-110: var(--dds-color-yellow-110);
+  --color-dds-color-yellow-120: var(--dds-color-yellow-120);
+  --color-dds-color-orange-10: var(--dds-color-orange-10);
+  --color-dds-color-orange-20: var(--dds-color-orange-20);
+  --color-dds-color-orange-30: var(--dds-color-orange-30);
+  --color-dds-color-orange-40: var(--dds-color-orange-40);
+  --color-dds-color-orange-50: var(--dds-color-orange-50);
+  --color-dds-color-orange-60: var(--dds-color-orange-60);
+  --color-dds-color-orange-70: var(--dds-color-orange-70);
+  --color-dds-color-orange-80: var(--dds-color-orange-80);
+  --color-dds-color-orange-90: var(--dds-color-orange-90);
+  --color-dds-color-orange-100: var(--dds-color-orange-100);
+  --color-dds-color-orange-110: var(--dds-color-orange-110);
+  --color-dds-color-orange-120: var(--dds-color-orange-120);
+  --color-dds-color-red-10: var(--dds-color-red-10);
+  --color-dds-color-red-20: var(--dds-color-red-20);
+  --color-dds-color-red-30: var(--dds-color-red-30);
+  --color-dds-color-red-40: var(--dds-color-red-40);
+  --color-dds-color-red-50: var(--dds-color-red-50);
+  --color-dds-color-red-60: var(--dds-color-red-60);
+  --color-dds-color-red-70: var(--dds-color-red-70);
+  --color-dds-color-red-80: var(--dds-color-red-80);
+  --color-dds-color-red-90: var(--dds-color-red-90);
+  --color-dds-color-red-100: var(--dds-color-red-100);
+  --color-dds-color-red-110: var(--dds-color-red-110);
+  --color-dds-color-red-120: var(--dds-color-red-120);
+  --color-dds-color-gray-10: var(--dds-color-gray-10);
+  --color-dds-color-gray-20: var(--dds-color-gray-20);
+  --color-dds-color-gray-30: var(--dds-color-gray-30);
+  --color-dds-color-gray-40: var(--dds-color-gray-40);
+  --color-dds-color-gray-50: var(--dds-color-gray-50);
+  --color-dds-color-gray-60: var(--dds-color-gray-60);
+  --color-dds-color-gray-70: var(--dds-color-gray-70);
+  --color-dds-color-gray-80: var(--dds-color-gray-80);
+  --color-dds-color-gray-90: var(--dds-color-gray-90);
+  --color-dds-color-gray-100: var(--dds-color-gray-100);
+  --color-dds-color-gray-110: var(--dds-color-gray-110);
+  --color-dds-color-gray-120: var(--dds-color-gray-120);
+  --color-dds-color-black: var(--dds-color-black);
+  --color-dds-color-white: var(--dds-color-white);
+  --color-dds-color-blue-gray-10: var(--dds-color-blue-gray-10);
+  --color-dds-color-blue-gray-20: var(--dds-color-blue-gray-20);
+  --color-dds-color-blue-gray-30: var(--dds-color-blue-gray-30);
+  --color-dds-color-blue-gray-40: var(--dds-color-blue-gray-40);
+  --color-dds-color-blue-gray-50: var(--dds-color-blue-gray-50);
+  --color-dds-color-blue-gray-60: var(--dds-color-blue-gray-60);
+  --color-dds-color-blue-gray-70: var(--dds-color-blue-gray-70);
+  --color-dds-color-blue-gray-80: var(--dds-color-blue-gray-80);
+  --color-dds-color-blue-gray-90: var(--dds-color-blue-gray-90);
+  --color-dds-color-blue-gray-100: var(--dds-color-blue-gray-100);
+  --color-dds-color-blue-gray-110: var(--dds-color-blue-gray-110);
+  --color-dds-color-blue-gray-120: var(--dds-color-blue-gray-120);
+  --color-dds-color-dark-gray-105: var(--dds-color-dark-gray-105);
+  --color-dds-color-dark-gray-115: var(--dds-color-dark-gray-115);
+  --color-dds-color-dark-gray-125: var(--dds-color-dark-gray-125);
+  --color-dds-color-purple-10: var(--dds-color-purple-10);
+  --color-dds-color-purple-20: var(--dds-color-purple-20);
+  --color-dds-color-purple-30: var(--dds-color-purple-30);
+  --color-dds-color-purple-40: var(--dds-color-purple-40);
+  --color-dds-color-purple-50: var(--dds-color-purple-50);
+  --color-dds-color-purple-60: var(--dds-color-purple-60);
+  --color-dds-color-purple-70: var(--dds-color-purple-70);
+  --color-dds-color-purple-80: var(--dds-color-purple-80);
+  --color-dds-color-purple-90: var(--dds-color-purple-90);
+  --color-dds-color-purple-100: var(--dds-color-purple-100);
+  --color-dds-color-purple-110: var(--dds-color-purple-110);
+  --color-dds-color-purple-120: var(--dds-color-purple-120);
+  --color-dds-color-common-brand-default: var(--dds-color-common-brand-default);
+  --color-dds-color-common-brand-hover: var(--dds-color-common-brand-hover);
+  --color-dds-color-common-brand-press: var(--dds-color-common-brand-press);
+  --color-dds-color-common-surface-brand-hover: var(--dds-color-common-surface-brand-hover);
+  --color-dds-color-common-surface-brand-press: var(--dds-color-common-surface-brand-press);
+  --color-dds-color-common-surface-neutral-hover: var(--dds-color-common-surface-neutral-hover);
+  --color-dds-color-common-surface-neutral-press: var(--dds-color-common-surface-neutral-press);
+  --color-dds-color-common-surface-danger-hover: var(--dds-color-common-surface-danger-hover);
+  --color-dds-color-common-surface-danger-press: var(--dds-color-common-surface-danger-press);
+  --color-dds-color-common-surface-default: var(--dds-color-common-surface-default);
+  --color-dds-color-common-surface-secondary-default: var(--dds-color-common-surface-secondary-default);
+  --color-dds-color-common-surface-secondary-hover: var(--dds-color-common-surface-secondary-hover);
+  --color-dds-color-common-surface-secondary-press: var(--dds-color-common-surface-secondary-press);
+  --color-dds-color-common-surface-inverse: var(--dds-color-common-surface-inverse);
+  --color-dds-color-common-surface-hover: var(--dds-color-common-surface-hover);
+  --color-dds-color-common-surface-press: var(--dds-color-common-surface-press);
+  --color-dds-color-common-surface-selected-default: var(--dds-color-common-surface-selected-default);
+  --color-dds-color-common-surface-selected-hover: var(--dds-color-common-surface-selected-hover);
+  --color-dds-color-common-surface-selected-press: var(--dds-color-common-surface-selected-press);
+  --color-dds-color-common-neutral-default: var(--dds-color-common-neutral-default);
+  --color-dds-color-common-neutral-hover: var(--dds-color-common-neutral-hover);
+  --color-dds-color-common-neutral-press: var(--dds-color-common-neutral-press);
+  --color-dds-color-common-danger-default: var(--dds-color-common-danger-default);
+  --color-dds-color-common-danger-hover: var(--dds-color-common-danger-hover);
+  --color-dds-color-common-danger-press: var(--dds-color-common-danger-press);
+  --color-dds-color-common-success: var(--dds-color-common-success);
+  --color-dds-color-common-warning: var(--dds-color-common-warning);
+  --color-dds-color-common-alarm: var(--dds-color-common-alarm);
+  --color-dds-color-common-information: var(--dds-color-common-information);
+  --color-dds-color-common-disabled: var(--dds-color-common-disabled);
+  --color-dds-color-common-text-primary: var(--dds-color-common-text-primary);
+  --color-dds-color-common-text-secondary: var(--dds-color-common-text-secondary);
+  --color-dds-color-common-text-inverse: var(--dds-color-common-text-inverse);
+  --color-dds-color-common-border-focus: var(--dds-color-common-border-focus);
+  --color-dds-color-common-border-empty: var(--dds-color-common-border-empty);
+  --color-dds-color-common-border-inverse: var(--dds-color-common-border-inverse);
+  --color-dds-color-common-background-default: var(--dds-color-common-background-default);
+  --color-dds-color-common-background-overlay: var(--dds-color-common-background-overlay);
+  --color-dds-color-divider: var(--dds-color-divider);
+  --color-dds-color-link-text-default: var(--dds-color-link-text-default);
+  --color-dds-color-link-text-hover: var(--dds-color-link-text-hover);
+  --color-dds-color-link-text-press: var(--dds-color-link-text-press);
+  --color-dds-color-link-text-visited-default: var(--dds-color-link-text-visited-default);
+  --color-dds-color-link-text-visited-hover: var(--dds-color-link-text-visited-hover);
+  --color-dds-color-link-text-visited-press: var(--dds-color-link-text-visited-press);
+  --color-dds-color-link-surface-visited-hover: var(--dds-color-link-surface-visited-hover);
+  --color-dds-color-link-surface-visited-press: var(--dds-color-link-surface-visited-press);
+  --radius-dds-border-radius-100: var(--dds-border-radius-100);
+  --radius-dds-border-radius-200: var(--dds-border-radius-200);
+  --radius-dds-border-radius-050: var(--dds-border-radius-050);
+  --border-width-dds-border-width-100: var(--dds-border-width-100);
+  --border-width-dds-border-width-025: var(--dds-border-width-025);
+  --border-width-dds-border-width-050: var(--dds-border-width-050);
+  --spacing-dds-space-100: var(--dds-space-100);
+  --spacing-dds-space-200: var(--dds-space-200);
+  --spacing-dds-space-300: var(--dds-space-300);
+  --spacing-dds-space-400: var(--dds-space-400);
+  --spacing-dds-space-600: var(--dds-space-600);
+  --spacing-dds-space-800: var(--dds-space-800);
+  --spacing-dds-space-1200: var(--dds-space-1200);
+  --spacing-dds-space-1600: var(--dds-space-1600);
+  --spacing-dds-space-050: var(--dds-space-050);
+  --font-size-dds-font-size-300: var(--dds-font-size-300);
+  --font-size-dds-font-size-350: var(--dds-font-size-350);
+  --font-size-dds-font-size-400: var(--dds-font-size-400);
+  --font-size-dds-font-size-500: var(--dds-font-size-500);
+  --font-size-dds-font-size-600: var(--dds-font-size-600);
+  --font-size-dds-font-size-700: var(--dds-font-size-700);
+  --font-size-dds-font-size-800: var(--dds-font-size-800);
+  --line-height-dds-font-line-height-tight: var(--dds-font-line-height-tight);
+  --line-height-dds-font-line-height-normal: var(--dds-font-line-height-normal);
+  --font-weight-dds-font-weight-bold: var(--dds-font-weight-bold);
+  --font-weight-dds-font-weight-regular: var(--dds-font-weight-regular);
+  --font-family-dds-font-family-base: var(--dds-font-family-base);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daikin-oss/dds-tokens",
-  "version": "0.4.2",
+  "version": "1.1.0",
   "description": "Design token definitions for DDS",
   "type": "module",
   "files": [
@@ -11,6 +11,7 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./tailwind4.css": "./build/tailwind4.css",
     "./js/*.js": {
       "import": "./build/js/*.js",
       "require": "./build/js/*.cjs",
@@ -35,8 +36,12 @@
     "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"
+    "test:e2e": "node --test e2e/*.mjs e2e/*.cjs",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "license-check": "license-checker --summary --onlyAllow \"$npm_package_config_licenseAllowlist\""
+  },
+  "config": {
+    "licenseAllowlist": "0BSD;Apache-2.0;BlueOak-1.0.0;BSD-2-Clause;BSD-3-Clause;CC-BY-3.0;CC0-1.0;ISC;MIT;Public Domain;Unlicense"
   },
   "repository": {
     "type": "git",
@@ -59,10 +64,12 @@
     "@changesets/cli": "^2.27.12",
     "@tokens-studio/sd-transforms": "^1.2.9",
     "@types/node": "^20.17.17",
+    "license-checker": "^25.0.1",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "sass-embedded": "^1.83.4",
     "style-dictionary": "^4.3.2",
+    "tailwindcss": "^4.1.18",
     "tsx": "^4.19.2",
     "vitest": "^3.0.5"
   }

package/themes/dkn/dark/system.json

@@ -50,6 +50,20 @@
           "value": "{color.gray.120}",
           "type": "color"
         },
+        "secondary": {
+          "default": {
+            "value": "{color.gray.110}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.gray.100}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.gray.90}",
+            "type": "color"
+          }
+        },
         "inverse": {
           "value": "{color.white}",
           "type": "color"
@@ -147,6 +161,10 @@
         "empty": {
           "value": "{color.gray.90}",
           "type": "color"
+        },
+        "inverse": {
+          "value": "{color.gray.120}",
+          "type": "color"
         }
       },
       "background": {

package/themes/dkn/light/system.json

@@ -50,6 +50,20 @@
           "value": "{color.white}",
           "type": "color"
         },
+        "secondary": {
+          "default": {
+            "value": "{color.gray.20}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.gray.30}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.gray.40}",
+            "type": "color"
+          }
+        },
         "inverse": {
           "value": "{color.gray.80}",
           "type": "color"
@@ -147,6 +161,10 @@
         "empty": {
           "value": "{color.gray.40}",
           "type": "color"
+        },
+        "inverse": {
+          "value": "{color.white}",
+          "type": "color"
         }
       },
       "background": {
@@ -165,4 +183,4 @@
       "type": "color"
     }
   }
-}
+}

package/themes/reference.json

@@ -480,6 +480,14 @@
       "value": "32",
       "type": "spacing"
     },
+    "1200": {
+      "value": "48",
+      "type": "spacing"
+    },
+    "1600": {
+      "value": "64",
+      "type": "spacing"
+    },
     "050": {
       "value": "2",
       "type": "spacing"
@@ -562,84 +570,6 @@
           },
           "type": "typography"
         }
-      },
-      "bold": {
-        "normal": {
-          "300": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.normal}",
-              "fontSize": "{font.size.300}"
-            },
-            "type": "typography"
-          },
-          "350": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.normal}",
-              "fontSize": "{font.size.350}"
-            },
-            "type": "typography"
-          },
-          "400": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.normal}",
-              "fontSize": "{font.size.400}"
-            },
-            "type": "typography"
-          },
-          "500": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.normal}",
-              "fontSize": "{font.size.500}"
-            },
-            "type": "typography"
-          }
-        },
-        "tight": {
-          "300": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.tight}",
-              "fontSize": "{font.size.300}"
-            },
-            "type": "typography"
-          },
-          "350": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.tight}",
-              "fontSize": "{font.size.350}"
-            },
-            "type": "typography"
-          },
-          "400": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.tight}",
-              "fontSize": "{font.size.400}"
-            },
-            "type": "typography"
-          },
-          "500": {
-            "value": {
-              "fontFamily": "{font.family.base}",
-              "fontWeight": "{font.weight.bold}",
-              "lineHeight": "{font.line-height.tight}",
-              "fontSize": "{font.size.500}"
-            },
-            "type": "typography"
-          }
-        }
       }
     },
     "size": {
@@ -658,6 +588,18 @@
       "500": {
         "value": "20",
         "type": "fontSizes"
+      },
+      "600": {
+        "value": "24",
+        "type": "fontSizes"
+      },
+      "700": {
+        "value": "28",
+        "type": "fontSizes"
+      },
+      "800": {
+        "value": "32",
+        "type": "fontSizes"
       }
     },
     "line-height": {
@@ -761,6 +703,33 @@
             "fontSize": "{font.size.500}"
           },
           "type": "typography"
+        },
+        "600": {
+          "value": {
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.bold}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.600}"
+          },
+          "type": "typography"
+        },
+        "700": {
+          "value": {
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.bold}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.700}"
+          },
+          "type": "typography"
+        },
+        "800": {
+          "value": {
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.bold}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.800}"
+          },
+          "type": "typography"
         }
       }
     }