@daikin-oss/dds-tokens 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.1.1
+
+### Patch Changes
+
+- 2 token(s) updated.
+
+## 1.1.0
+
+### Minor Changes
+
+- 8 token(s) added.
+
 ## 1.0.0
 
 ### Major Changes

package/build/css/daikin/Dark/tailwind4.css

@@ -110,6 +110,9 @@
   --color-dds-color-common-surface-danger-hover: var(--dds-color-common-surface-danger-hover, #3e0307);
   --color-dds-color-common-surface-danger-press: var(--dds-color-common-surface-danger-press, #5d050a);
   --color-dds-color-common-surface-default: var(--dds-color-common-surface-default, #212121);
+  --color-dds-color-common-surface-secondary-default: var(--dds-color-common-surface-secondary-default, #313131);
+  --color-dds-color-common-surface-secondary-hover: var(--dds-color-common-surface-secondary-hover, #414141);
+  --color-dds-color-common-surface-secondary-press: var(--dds-color-common-surface-secondary-press, #515151);
   --color-dds-color-common-surface-inverse: var(--dds-color-common-surface-inverse, #ffffff);
   --color-dds-color-common-surface-hover: var(--dds-color-common-surface-hover, #282828);
   --color-dds-color-common-surface-press: var(--dds-color-common-surface-press, #313131);
@@ -132,8 +135,9 @@
   --color-dds-color-common-text-inverse: var(--dds-color-common-text-inverse, #212121);
   --color-dds-color-common-border-focus: var(--dds-color-common-border-focus, #54c3f1);
   --color-dds-color-common-border-empty: var(--dds-color-common-border-empty, #515151);
+  --color-dds-color-common-border-inverse: var(--dds-color-common-border-inverse, #212121);
   --color-dds-color-common-background-default: var(--dds-color-common-background-default, #212121);
-  --color-dds-color-common-background-overlay: var(--dds-color-common-background-overlay, #000000);
+  --color-dds-color-common-background-overlay: var(--dds-color-common-background-overlay, rgba(0, 0, 0, 0.75));
   --color-dds-color-divider: var(--dds-color-divider, #515151);
   --color-dds-color-link-text-default: var(--dds-color-link-text-default, #76cff4);
   --color-dds-color-link-text-hover: var(--dds-color-link-text-hover, #98dbf7);

package/build/css/daikin/Dark/variables.css

@@ -114,6 +114,9 @@
   --dds-color-common-surface-danger-hover: #3e0307;
   --dds-color-common-surface-danger-press: #5d050a;
   --dds-color-common-surface-default: #212121;
+  --dds-color-common-surface-secondary-default: #313131;
+  --dds-color-common-surface-secondary-hover: #414141;
+  --dds-color-common-surface-secondary-press: #515151;
   --dds-color-common-surface-inverse: #ffffff;
   --dds-color-common-surface-hover: #282828;
   --dds-color-common-surface-press: #313131;
@@ -136,8 +139,9 @@
   --dds-color-common-text-inverse: #212121;
   --dds-color-common-border-focus: #54c3f1;
   --dds-color-common-border-empty: #515151;
+  --dds-color-common-border-inverse: #212121;
   --dds-color-common-background-default: #212121;
-  --dds-color-common-background-overlay: #000000;
+  --dds-color-common-background-overlay: rgba(0, 0, 0, 0.75);
   --dds-color-divider: #515151;
   --dds-color-link-text-default: #76cff4;
   --dds-color-link-text-hover: #98dbf7;

package/build/css/daikin/Light/tailwind4.css

@@ -110,6 +110,9 @@
   --color-dds-color-common-surface-danger-hover: var(--dds-color-common-surface-danger-hover, #fdd9db);
   --color-dds-color-common-surface-danger-press: var(--dds-color-common-surface-danger-press, #fbb3b7);
   --color-dds-color-common-surface-default: var(--dds-color-common-surface-default, #ffffff);
+  --color-dds-color-common-surface-secondary-default: var(--dds-color-common-surface-secondary-default, #ebebeb);
+  --color-dds-color-common-surface-secondary-hover: var(--dds-color-common-surface-secondary-hover, #dcdcdc);
+  --color-dds-color-common-surface-secondary-press: var(--dds-color-common-surface-secondary-press, #cecece);
   --color-dds-color-common-surface-inverse: var(--dds-color-common-surface-inverse, #616161);
   --color-dds-color-common-surface-hover: var(--dds-color-common-surface-hover, #f2f2f2);
   --color-dds-color-common-surface-press: var(--dds-color-common-surface-press, #ebebeb);
@@ -132,8 +135,9 @@
   --color-dds-color-common-text-inverse: var(--dds-color-common-text-inverse, #ffffff);
   --color-dds-color-common-border-focus: var(--dds-color-common-border-focus, #0081c0);
   --color-dds-color-common-border-empty: var(--dds-color-common-border-empty, #cecece);
+  --color-dds-color-common-border-inverse: var(--dds-color-common-border-inverse, #ffffff);
   --color-dds-color-common-background-default: var(--dds-color-common-background-default, #ffffff);
-  --color-dds-color-common-background-overlay: var(--dds-color-common-background-overlay, #000000);
+  --color-dds-color-common-background-overlay: var(--dds-color-common-background-overlay, rgba(0, 0, 0, 0.5));
   --color-dds-color-divider: var(--dds-color-divider, #cecece);
   --color-dds-color-link-text-default: var(--dds-color-link-text-default, #00689a);
   --color-dds-color-link-text-hover: var(--dds-color-link-text-hover, #005077);

package/build/css/daikin/Light/variables.css

@@ -114,6 +114,9 @@
   --dds-color-common-surface-danger-hover: #fdd9db;
   --dds-color-common-surface-danger-press: #fbb3b7;
   --dds-color-common-surface-default: #ffffff;
+  --dds-color-common-surface-secondary-default: #ebebeb;
+  --dds-color-common-surface-secondary-hover: #dcdcdc;
+  --dds-color-common-surface-secondary-press: #cecece;
   --dds-color-common-surface-inverse: #616161;
   --dds-color-common-surface-hover: #f2f2f2;
   --dds-color-common-surface-press: #ebebeb;
@@ -136,8 +139,9 @@
   --dds-color-common-text-inverse: #ffffff;
   --dds-color-common-border-focus: #0081c0;
   --dds-color-common-border-empty: #cecece;
+  --dds-color-common-border-inverse: #ffffff;
   --dds-color-common-background-default: #ffffff;
-  --dds-color-common-background-overlay: #000000;
+  --dds-color-common-background-overlay: rgba(0, 0, 0, 0.5);
   --dds-color-divider: #cecece;
   --dds-color-link-text-default: #00689a;
   --dds-color-link-text-hover: #005077;

package/build/js/daikin/Dark/variables.cjs

@@ -114,6 +114,9 @@ module.exports = {
   colorCommonSurfaceDangerHover: "#3e0307",
   colorCommonSurfaceDangerPress: "#5d050a",
   colorCommonSurfaceDefault: "#212121",
+  colorCommonSurfaceSecondaryDefault: "#313131",
+  colorCommonSurfaceSecondaryHover: "#414141",
+  colorCommonSurfaceSecondaryPress: "#515151",
   colorCommonSurfaceInverse: "#ffffff",
   colorCommonSurfaceHover: "#282828",
   colorCommonSurfacePress: "#313131",
@@ -136,8 +139,9 @@ module.exports = {
   colorCommonTextInverse: "#212121",
   colorCommonBorderFocus: "#54c3f1",
   colorCommonBorderEmpty: "#515151",
+  colorCommonBorderInverse: "#212121",
   colorCommonBackgroundDefault: "#212121",
-  colorCommonBackgroundOverlay: "#000000",
+  colorCommonBackgroundOverlay: "rgba(0, 0, 0, 0.75)",
   colorDivider: "#515151",
   colorLinkTextDefault: "#76cff4",
   colorLinkTextHover: "#98dbf7",

package/build/js/daikin/Dark/variables.d.cts

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress: string;
 export const colorCommonSurfaceDangerHover: string;
 export const colorCommonSurfaceDangerPress: string;
 export const colorCommonSurfaceDefault: string;
+export const colorCommonSurfaceSecondaryDefault: string;
+export const colorCommonSurfaceSecondaryHover: string;
+export const colorCommonSurfaceSecondaryPress: string;
 export const colorCommonSurfaceInverse: string;
 export const colorCommonSurfaceHover: string;
 export const colorCommonSurfacePress: string;
@@ -135,6 +138,7 @@ export const colorCommonTextSecondary: string;
 export const colorCommonTextInverse: string;
 export const colorCommonBorderFocus: string;
 export const colorCommonBorderEmpty: string;
+export const colorCommonBorderInverse: string;
 export const colorCommonBackgroundDefault: string;
 export const colorCommonBackgroundOverlay: string;
 export const colorDivider: string;

package/build/js/daikin/Dark/variables.d.ts

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress: string;
 export const colorCommonSurfaceDangerHover: string;
 export const colorCommonSurfaceDangerPress: string;
 export const colorCommonSurfaceDefault: string;
+export const colorCommonSurfaceSecondaryDefault: string;
+export const colorCommonSurfaceSecondaryHover: string;
+export const colorCommonSurfaceSecondaryPress: string;
 export const colorCommonSurfaceInverse: string;
 export const colorCommonSurfaceHover: string;
 export const colorCommonSurfacePress: string;
@@ -135,6 +138,7 @@ export const colorCommonTextSecondary: string;
 export const colorCommonTextInverse: string;
 export const colorCommonBorderFocus: string;
 export const colorCommonBorderEmpty: string;
+export const colorCommonBorderInverse: string;
 export const colorCommonBackgroundDefault: string;
 export const colorCommonBackgroundOverlay: string;
 export const colorDivider: string;

package/build/js/daikin/Dark/variables.js

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress = "#313131";
 export const colorCommonSurfaceDangerHover = "#3e0307";
 export const colorCommonSurfaceDangerPress = "#5d050a";
 export const colorCommonSurfaceDefault = "#212121";
+export const colorCommonSurfaceSecondaryDefault = "#313131";
+export const colorCommonSurfaceSecondaryHover = "#414141";
+export const colorCommonSurfaceSecondaryPress = "#515151";
 export const colorCommonSurfaceInverse = "#ffffff";
 export const colorCommonSurfaceHover = "#282828";
 export const colorCommonSurfacePress = "#313131";
@@ -135,8 +138,9 @@ export const colorCommonTextSecondary = "#bfbfbf";
 export const colorCommonTextInverse = "#212121";
 export const colorCommonBorderFocus = "#54c3f1";
 export const colorCommonBorderEmpty = "#515151";
+export const colorCommonBorderInverse = "#212121";
 export const colorCommonBackgroundDefault = "#212121";
-export const colorCommonBackgroundOverlay = "#000000";
+export const colorCommonBackgroundOverlay = "rgba(0, 0, 0, 0.75)";
 export const colorDivider = "#515151";
 export const colorLinkTextDefault = "#76cff4";
 export const colorLinkTextHover = "#98dbf7";

package/build/js/daikin/Light/variables.cjs

@@ -114,6 +114,9 @@ module.exports = {
   colorCommonSurfaceDangerHover: "#fdd9db",
   colorCommonSurfaceDangerPress: "#fbb3b7",
   colorCommonSurfaceDefault: "#ffffff",
+  colorCommonSurfaceSecondaryDefault: "#ebebeb",
+  colorCommonSurfaceSecondaryHover: "#dcdcdc",
+  colorCommonSurfaceSecondaryPress: "#cecece",
   colorCommonSurfaceInverse: "#616161",
   colorCommonSurfaceHover: "#f2f2f2",
   colorCommonSurfacePress: "#ebebeb",
@@ -136,8 +139,9 @@ module.exports = {
   colorCommonTextInverse: "#ffffff",
   colorCommonBorderFocus: "#0081c0",
   colorCommonBorderEmpty: "#cecece",
+  colorCommonBorderInverse: "#ffffff",
   colorCommonBackgroundDefault: "#ffffff",
-  colorCommonBackgroundOverlay: "#000000",
+  colorCommonBackgroundOverlay: "rgba(0, 0, 0, 0.5)",
   colorDivider: "#cecece",
   colorLinkTextDefault: "#00689a",
   colorLinkTextHover: "#005077",

package/build/js/daikin/Light/variables.d.cts

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress: string;
 export const colorCommonSurfaceDangerHover: string;
 export const colorCommonSurfaceDangerPress: string;
 export const colorCommonSurfaceDefault: string;
+export const colorCommonSurfaceSecondaryDefault: string;
+export const colorCommonSurfaceSecondaryHover: string;
+export const colorCommonSurfaceSecondaryPress: string;
 export const colorCommonSurfaceInverse: string;
 export const colorCommonSurfaceHover: string;
 export const colorCommonSurfacePress: string;
@@ -135,6 +138,7 @@ export const colorCommonTextSecondary: string;
 export const colorCommonTextInverse: string;
 export const colorCommonBorderFocus: string;
 export const colorCommonBorderEmpty: string;
+export const colorCommonBorderInverse: string;
 export const colorCommonBackgroundDefault: string;
 export const colorCommonBackgroundOverlay: string;
 export const colorDivider: string;

package/build/js/daikin/Light/variables.d.ts

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress: string;
 export const colorCommonSurfaceDangerHover: string;
 export const colorCommonSurfaceDangerPress: string;
 export const colorCommonSurfaceDefault: string;
+export const colorCommonSurfaceSecondaryDefault: string;
+export const colorCommonSurfaceSecondaryHover: string;
+export const colorCommonSurfaceSecondaryPress: string;
 export const colorCommonSurfaceInverse: string;
 export const colorCommonSurfaceHover: string;
 export const colorCommonSurfacePress: string;
@@ -135,6 +138,7 @@ export const colorCommonTextSecondary: string;
 export const colorCommonTextInverse: string;
 export const colorCommonBorderFocus: string;
 export const colorCommonBorderEmpty: string;
+export const colorCommonBorderInverse: string;
 export const colorCommonBackgroundDefault: string;
 export const colorCommonBackgroundOverlay: string;
 export const colorDivider: string;

package/build/js/daikin/Light/variables.js

@@ -113,6 +113,9 @@ export const colorCommonSurfaceNeutralPress = "#ebebeb";
 export const colorCommonSurfaceDangerHover = "#fdd9db";
 export const colorCommonSurfaceDangerPress = "#fbb3b7";
 export const colorCommonSurfaceDefault = "#ffffff";
+export const colorCommonSurfaceSecondaryDefault = "#ebebeb";
+export const colorCommonSurfaceSecondaryHover = "#dcdcdc";
+export const colorCommonSurfaceSecondaryPress = "#cecece";
 export const colorCommonSurfaceInverse = "#616161";
 export const colorCommonSurfaceHover = "#f2f2f2";
 export const colorCommonSurfacePress = "#ebebeb";
@@ -135,8 +138,9 @@ export const colorCommonTextSecondary = "#616161";
 export const colorCommonTextInverse = "#ffffff";
 export const colorCommonBorderFocus = "#0081c0";
 export const colorCommonBorderEmpty = "#cecece";
+export const colorCommonBorderInverse = "#ffffff";
 export const colorCommonBackgroundDefault = "#ffffff";
-export const colorCommonBackgroundOverlay = "#000000";
+export const colorCommonBackgroundOverlay = "rgba(0, 0, 0, 0.5)";
 export const colorDivider = "#cecece";
 export const colorLinkTextDefault = "#00689a";
 export const colorLinkTextHover = "#005077";

package/build/json/daikin/Dark/tokens.json

@@ -554,6 +554,21 @@
     "color",
     null
   ],
+  "color-common-surface-secondary-default": [
+    "#313131",
+    "color",
+    null
+  ],
+  "color-common-surface-secondary-hover": [
+    "#414141",
+    "color",
+    null
+  ],
+  "color-common-surface-secondary-press": [
+    "#515151",
+    "color",
+    null
+  ],
   "color-common-surface-inverse": [
     "#ffffff",
     "color",
@@ -664,13 +679,18 @@
     "color",
     null
   ],
+  "color-common-border-inverse": [
+    "#212121",
+    "color",
+    null
+  ],
   "color-common-background-default": [
     "#212121",
     "color",
     null
   ],
   "color-common-background-overlay": [
-    "#000000",
+    "rgba(0, 0, 0, 0.75)",
     "color",
     null
   ],

package/build/json/daikin/Light/tokens.json

@@ -554,6 +554,21 @@
     "color",
     null
   ],
+  "color-common-surface-secondary-default": [
+    "#ebebeb",
+    "color",
+    null
+  ],
+  "color-common-surface-secondary-hover": [
+    "#dcdcdc",
+    "color",
+    null
+  ],
+  "color-common-surface-secondary-press": [
+    "#cecece",
+    "color",
+    null
+  ],
   "color-common-surface-inverse": [
     "#616161",
     "color",
@@ -664,13 +679,18 @@
     "color",
     null
   ],
+  "color-common-border-inverse": [
+    "#ffffff",
+    "color",
+    null
+  ],
   "color-common-background-default": [
     "#ffffff",
     "color",
     null
   ],
   "color-common-background-overlay": [
-    "#000000",
+    "rgba(0, 0, 0, 0.5)",
     "color",
     null
   ],

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

@@ -114,6 +114,9 @@
   --dds-color-common-surface-danger-hover: #3e0307;
   --dds-color-common-surface-danger-press: #5d050a;
   --dds-color-common-surface-default: #212121;
+  --dds-color-common-surface-secondary-default: #313131;
+  --dds-color-common-surface-secondary-hover: #414141;
+  --dds-color-common-surface-secondary-press: #515151;
   --dds-color-common-surface-inverse: #ffffff;
   --dds-color-common-surface-hover: #282828;
   --dds-color-common-surface-press: #313131;
@@ -136,8 +139,9 @@
   --dds-color-common-text-inverse: #212121;
   --dds-color-common-border-focus: #54c3f1;
   --dds-color-common-border-empty: #515151;
+  --dds-color-common-border-inverse: #212121;
   --dds-color-common-background-default: #212121;
-  --dds-color-common-background-overlay: #000000;
+  --dds-color-common-background-overlay: rgba(0, 0, 0, 0.75);
   --dds-color-divider: #515151;
   --dds-color-link-text-default: #76cff4;
   --dds-color-link-text-hover: #98dbf7;

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

@@ -114,6 +114,9 @@
   --dds-color-common-surface-danger-hover: #fdd9db;
   --dds-color-common-surface-danger-press: #fbb3b7;
   --dds-color-common-surface-default: #ffffff;
+  --dds-color-common-surface-secondary-default: #ebebeb;
+  --dds-color-common-surface-secondary-hover: #dcdcdc;
+  --dds-color-common-surface-secondary-press: #cecece;
   --dds-color-common-surface-inverse: #616161;
   --dds-color-common-surface-hover: #f2f2f2;
   --dds-color-common-surface-press: #ebebeb;
@@ -136,8 +139,9 @@
   --dds-color-common-text-inverse: #ffffff;
   --dds-color-common-border-focus: #0081c0;
   --dds-color-common-border-empty: #cecece;
+  --dds-color-common-border-inverse: #ffffff;
   --dds-color-common-background-default: #ffffff;
-  --dds-color-common-background-overlay: #000000;
+  --dds-color-common-background-overlay: rgba(0, 0, 0, 0.5);
   --dds-color-divider: #cecece;
   --dds-color-link-text-default: #00689a;
   --dds-color-link-text-hover: #005077;

package/build/tailwind4.css

@@ -110,6 +110,9 @@
   --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);
@@ -132,6 +135,7 @@
   --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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daikin-oss/dds-tokens",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Design token definitions for DDS",
   "type": "module",
   "files": [

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": {
@@ -155,7 +173,7 @@
           "type": "color"
         },
         "overlay": {
-          "value": "{color.black}",
+          "value": "#000000bf",
           "type": "color"
         }
       }

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": {
@@ -155,7 +173,7 @@
           "type": "color"
         },
         "overlay": {
-          "value": "{color.black}",
+          "value": "#00000080",
           "type": "color"
         }
       }
@@ -165,4 +183,4 @@
       "type": "color"
     }
   }
-}
+}