@daikin-oss/dds-tokens 0.2.0 → 0.2.1

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

@@ -100,20 +100,74 @@
   --dds-color-dark-gray-105: #383838;
   --dds-color-dark-gray-115: #282828;
   --dds-color-dark-gray-125: #1a1a1a;
+  --dds-color-purple-10: #f0ddf3;
+  --dds-color-purple-20: #e1bbe8;
+  --dds-color-purple-30: #d399dc;
+  --dds-color-purple-40: #c477d0;
+  --dds-color-purple-50: #b556c5;
+  --dds-color-purple-60: #a03db0;
+  --dds-color-purple-70: #81318e;
+  --dds-color-purple-80: #6f2a7a;
+  --dds-color-purple-90: #5c2365;
+  --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: #76cff4; /* Primary brand blue */
-  --dds-color-brand-secondary: #30ade9; /* Primary secondary brand blue */
-  --dds-color-text-brand-primary: #76cff4;
-  --dds-color-text-theme: #414141;
-  --dds-color-text-default: #f2f2f2;
-  --dds-color-text-default-sub: #ebebeb;
-  --dds-color-background-theme: #000000;
-  --dds-color-background-component: #414141;
-  --dds-color-background-object: #f2f2f2;
+  --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-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-selected-default: #002b40;
+  --dds-color-common-surface-selected-hover: #004160;
+  --dds-color-common-surface-selected-press: #005077;
+  --dds-color-common-neutral-default: #bfbfbf;
+  --dds-color-common-neutral-hover: #cecece;
+  --dds-color-common-neutral-press: #dcdcdc;
+  --dds-color-common-danger-default: #f21a27;
+  --dds-color-common-danger-hover: #f4404b;
+  --dds-color-common-danger-press: #f7666f;
+  --dds-color-common-success: #00c3ac;
+  --dds-color-common-warning: #efb000;
+  --dds-color-common-alarm: #fa7a12;
+  --dds-color-common-information: #30ade9;
+  --dds-color-common-disabled: #616161;
+  --dds-color-common-text-primary: #dcdcdc;
+  --dds-color-common-text-secondary: #bfbfbf;
+  --dds-color-common-text-inverse: #212121;
+  --dds-color-common-border-focus: #54c3f1;
+  --dds-color-common-border-empty: #515151;
+  --dds-color-common-background-default: #212121;
+  --dds-color-common-background-overlay: #000000;
+  --dds-color-divider: #515151;
+  --dds-color-link-text-default: #76cff4;
+  --dds-color-link-text-hover: #98dbf7;
+  --dds-color-link-text-press: #bbe7f9;
+  --dds-color-link-text-visited-default: #c477d0;
+  --dds-color-link-text-visited-hover: #d399dc;
+  --dds-color-link-text-visited-press: #e1bbe8;
+  --dds-color-link-surface-visited-hover: #250e29;
+  --dds-color-link-surface-visited-press: #37153d;
   --dds-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -178,40 +232,44 @@
   --dds-notification-color-background-warning: #ffbf0e;
   --dds-notification-color-background-alarm: #fa7a12;
   --dds-notification-color-background-information: #30ade9;
-  --dds-notification-color-background-theme: #414141;
-  --dds-notification-color-text: #f2f2f2;
+  --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: #f2f2f2;
-  --dds-icon-color-background-theme: #000000;
-  --dds-container-color-background: #414141;
-  --dds-container-color-text-header: #f2f2f2;
-  --dds-container-color-text-body: #ebebeb;
-  --dds-card-shadow: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
-  --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;
-  --dds-tab-color-line-active: #76cff4;
-  --dds-tab-color-line-hover: #30ade9;
-  --dds-tab-color-line-press: #98dbf7;
-  --dds-tab-color-line-focus: #bbe7f9;
-  --dds-tab-color-line-disabled: #616161;
-  --dds-tab-color-text-active: #76cff4;
-  --dds-tab-color-text-hover: #30ade9;
-  --dds-tab-color-text-press: #98dbf7;
-  --dds-tab-color-text-focus: #bbe7f9;
-  --dds-tab-color-text-disabled: #616161;
+  --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/build/scss/daikin/Light/_mixins.scss

@@ -100,6 +100,18 @@
   --dds-color-dark-gray-105: #383838;
   --dds-color-dark-gray-115: #282828;
   --dds-color-dark-gray-125: #1a1a1a;
+  --dds-color-purple-10: #f0ddf3;
+  --dds-color-purple-20: #e1bbe8;
+  --dds-color-purple-30: #d399dc;
+  --dds-color-purple-40: #c477d0;
+  --dds-color-purple-50: #b556c5;
+  --dds-color-purple-60: #a03db0;
+  --dds-color-purple-70: #81318e;
+  --dds-color-purple-80: #6f2a7a;
+  --dds-color-purple-90: #5c2365;
+  --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 */
@@ -150,7 +162,12 @@
   --dds-color-divider: #cecece;
   --dds-color-link-text-default: #00689a;
   --dds-color-link-text-hover: #005077;
-  --dds-color-link-text-press: #005077;
+  --dds-color-link-text-press: #004160;
+  --dds-color-link-text-visited-default: #5c2365;
+  --dds-color-link-text-visited-hover: #4a1c51;
+  --dds-color-link-text-visited-press: #37153d;
+  --dds-color-link-surface-visited-hover: #f0ddf3;
+  --dds-color-link-surface-visited-press: #e1bbe8;
   --dds-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;

package/package.json

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

package/themes/dkn/dark/component.json

@@ -19,8 +19,40 @@
   },
   "card": {
     "shadow": {
-      "value": "{shadow.white}",
+      "value": "{shadow.black}",
       "type": "boxShadow"
+    },
+    "color": {
+      "background": {
+        "value": "{container.color.background}",
+        "type": "color"
+      }
+    },
+    "border": {
+      "hover": {
+        "value": {
+          "color": "#BFBFBF",
+          "width": "2",
+          "style": "solid"
+        },
+        "type": "border"
+      },
+      "alert": {
+        "value": {
+          "color": "{color.feedback.negative}",
+          "width": "2",
+          "style": "solid"
+        },
+        "type": "border"
+      },
+      "underline": {
+        "value": {
+          "color": "{color.blue-gray.20}",
+          "width": "1",
+          "style": "solid"
+        },
+        "type": "border"
+      }
     }
   },
   "notification": {
@@ -89,15 +121,15 @@
             "type": "color"
           },
           "press": {
-            "value": "{color.blue.30}",
+            "value": "{color.blue.70}",
             "type": "color"
           },
           "focus": {
-            "value": "{color.blue.20}",
+            "value": "{color.blue.80}",
             "type": "color"
           },
           "disabled": {
-            "value": "{color.gray.80}",
+            "value": "{color.gray.30}",
             "type": "color"
           }
         }
@@ -113,15 +145,15 @@
             "type": "color"
           },
           "press": {
-            "value": "{color.blue.30}",
+            "value": "{color.blue.70}",
             "type": "color"
           },
           "focus": {
-            "value": "{color.blue.20}",
+            "value": "{color.blue.80}",
             "type": "color"
           },
           "disabled": {
-            "value": "{color.gray.80}",
+            "value": "{color.gray.30}",
             "type": "color"
           }
         }
@@ -137,15 +169,15 @@
             "type": "color"
           },
           "press": {
-            "value": "{color.blue.30}",
+            "value": "{color.blue.70}",
             "type": "color"
           },
           "focus": {
-            "value": "{color.blue.20}",
+            "value": "{color.blue.80}",
             "type": "color"
           },
           "disabled": {
-            "value": "{color.gray.80}",
+            "value": "{color.gray.30}",
             "type": "color"
           }
         },
@@ -168,15 +200,15 @@
           "type": "color"
         },
         "press": {
-          "value": "{color.blue.30}",
+          "value": "{color.blue.70}",
           "type": "color"
         },
         "focus": {
-          "value": "{color.blue.20}",
+          "value": "{color.blue.80}",
           "type": "color"
         },
         "disabled": {
-          "value": "{color.gray.80}",
+          "value": "{color.gray.30}",
           "type": "color"
         }
       },
@@ -190,16 +222,60 @@
           "type": "color"
         },
         "press": {
-          "value": "{color.blue.30}",
+          "value": "{color.blue.70}",
           "type": "color"
         },
         "focus": {
-          "value": "{color.blue.20}",
+          "value": "{color.blue.80}",
           "type": "color"
         },
         "disabled": {
-          "value": "{color.gray.80}",
+          "value": "{color.gray.30}",
+          "type": "color"
+        }
+      }
+    }
+  },
+  "color": {
+    "link": {
+      "text": {
+        "default": {
+          "value": "{color.blue.40}",
           "type": "color"
+        },
+        "hover": {
+          "value": "{color.blue.30}",
+          "type": "color"
+        },
+        "press": {
+          "value": "{color.blue.20}",
+          "type": "color"
+        },
+        "visited": {
+          "default": {
+            "value": "{color.purple.40}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.purple.30}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.purple.20}",
+            "type": "color"
+          }
+        }
+      },
+      "surface": {
+        "visited": {
+          "hover": {
+            "value": "{color.purple.120}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.purple.110}",
+            "type": "color"
+          }
         }
       }
     }

package/themes/dkn/dark/system.json

@@ -2,12 +2,12 @@
   "color": {
     "brand": {
       "primary": {
-        "value": "{color.blue.40}",
+        "value": "{color.blue.60}",
         "type": "color",
         "description": "Primary brand blue"
       },
       "secondary": {
-        "value": "{color.blue.60}",
+        "value": "{color.blue.40}",
         "type": "color",
         "description": "Primary secondary brand blue"
       }
@@ -20,29 +20,29 @@
         }
       },
       "theme": {
-        "value": "{color.gray.100}",
+        "value": "{color.white}",
         "type": "color"
       },
       "default": {
-        "value": "{color.gray.10}",
+        "value": "{color.gray.100}",
         "type": "color"
       },
       "default-sub": {
-        "value": "{color.gray.20}",
+        "value": "{color.gray.80}",
         "type": "color"
       }
     },
     "background": {
       "theme": {
-        "value": "{color.black}",
+        "value": "{color.white}",
         "type": "color"
       },
       "component": {
-        "value": "{color.gray.100}",
+        "value": "{color.white}",
         "type": "color"
       },
       "object": {
-        "value": "{color.gray.10}",
+        "value": "{color.gray.100}",
         "type": "color"
       }
     },
@@ -72,6 +72,166 @@
         "type": "color",
         "description": "System status is warning"
       }
+    },
+    "common": {
+      "brand": {
+        "default": {
+          "value": "{color.blue.60}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.blue.50}",
+          "type": "color"
+        },
+        "press": {
+          "value": "{color.blue.40}",
+          "type": "color"
+        }
+      },
+      "surface": {
+        "brand": {
+          "hover": {
+            "value": "{color.blue.120}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.blue.110}",
+            "type": "color"
+          }
+        },
+        "neutral": {
+          "hover": {
+            "value": "{color.gray.110}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.gray.100}",
+            "type": "color"
+          }
+        },
+        "danger": {
+          "hover": {
+            "value": "{color.red.120}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.red.110}",
+            "type": "color"
+          }
+        },
+        "default": {
+          "value": "{color.gray.120}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.gray.110}",
+          "type": "color"
+        },
+        "press": {
+          "value": "{color.gray.100}",
+          "type": "color"
+        },
+        "selected": {
+          "default": {
+            "value": "{color.blue.120}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.blue.110}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.blue.100}",
+            "type": "color"
+          }
+        }
+      },
+      "neutral": {
+        "default": {
+          "value": "{color.gray.50}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.gray.40}",
+          "type": "color"
+        },
+        "press": {
+          "value": "{color.gray.30}",
+          "type": "color"
+        }
+      },
+      "danger": {
+        "default": {
+          "value": "{color.red.60}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{color.red.50}",
+          "type": "color"
+        },
+        "press": {
+          "value": "{color.red.40}",
+          "type": "color"
+        }
+      },
+      "success": {
+        "value": "{color.green.60}",
+        "type": "color"
+      },
+      "warning": {
+        "value": "{color.yellow.60}",
+        "type": "color"
+      },
+      "alarm": {
+        "value": "{color.orange.60}",
+        "type": "color"
+      },
+      "information": {
+        "value": "{color.blue.60}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.80}",
+        "type": "color"
+      },
+      "text": {
+        "primary": {
+          "value": "{color.gray.30}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{color.gray.50}",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "{color.gray.120}",
+          "type": "color"
+        }
+      },
+      "border": {
+        "focus": {
+          "value": "{color.blue.50}",
+          "type": "color"
+        },
+        "empty": {
+          "value": "{color.gray.90}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "{color.gray.120}",
+          "type": "color"
+        },
+        "overlay": {
+          "value": "{color.black}",
+          "type": "color"
+        }
+      }
+    },
+    "divider": {
+      "value": "{color.gray.90}",
+      "type": "color"
     }
   }
 }

package/themes/dkn/light/component.json

@@ -248,8 +248,34 @@
           "type": "color"
         },
         "press": {
-          "value": "{color.blue.100}",
+          "value": "{color.blue.110}",
           "type": "color"
+        },
+        "visited": {
+          "default": {
+            "value": "{color.purple.90}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{color.purple.100}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.purple.110}",
+            "type": "color"
+          }
+        }
+      },
+      "surface": {
+        "visited": {
+          "hover": {
+            "value": "{color.purple.10}",
+            "type": "color"
+          },
+          "press": {
+            "value": "{color.purple.20}",
+            "type": "color"
+          }
         }
       }
     }