@daikin-oss/dds-tokens 0.2.0 → 0.3.0

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

@@ -239,30 +239,6 @@
     "#3e0307",
     "color"
   ],
-  "color-red-aaf-100": [
-    "#fcecea",
-    "color"
-  ],
-  "color-red-aaf-200": [
-    "#f5c0b8",
-    "color"
-  ],
-  "color-red-aaf-300": [
-    "#f8aeba",
-    "color"
-  ],
-  "color-red-aaf-400": [
-    "#db4f66",
-    "color"
-  ],
-  "color-red-aaf-500": [
-    "#d2324c",
-    "color"
-  ],
-  "color-red-aaf-600": [
-    "#c8102e",
-    "color"
-  ],
   "color-gray-10": [
     "#f2f2f2",
     "color"
@@ -319,14 +295,6 @@
     "#ffffff",
     "color"
   ],
-  "color-black-shadow": [
-    "rgba(0, 0, 0, 0.1)",
-    "color"
-  ],
-  "color-white-shadow": [
-    "rgba(255, 255, 255, 0.1)",
-    "color"
-  ],
   "color-blue-gray-10": [
     "#eef0f2",
     "color"
@@ -387,60 +355,52 @@
     "#1a1a1a",
     "color"
   ],
-  "color-feedback-positive": [
-    "#00c3ac",
-    "color"
-  ],
-  "color-feedback-warning": [
-    "#ffbf0e",
+  "color-purple-10": [
+    "#f0ddf3",
     "color"
   ],
-  "color-feedback-negative": [
-    "#f21a27",
-    "color"
-  ],
-  "color-feedback-alarm": [
-    "#fa7a12",
+  "color-purple-20": [
+    "#e1bbe8",
     "color"
   ],
-  "color-feedback-information": [
-    "#30ade9",
+  "color-purple-30": [
+    "#d399dc",
     "color"
   ],
-  "color-brand-primary": [
-    "#30ade9",
+  "color-purple-40": [
+    "#c477d0",
     "color"
   ],
-  "color-brand-secondary": [
-    "#76cff4",
+  "color-purple-50": [
+    "#b556c5",
     "color"
   ],
-  "color-text-brand-primary": [
-    "#30ade9",
+  "color-purple-60": [
+    "#a03db0",
     "color"
   ],
-  "color-text-theme": [
-    "#ffffff",
+  "color-purple-70": [
+    "#81318e",
     "color"
   ],
-  "color-text-default": [
-    "#414141",
+  "color-purple-80": [
+    "#6f2a7a",
     "color"
   ],
-  "color-text-default-sub": [
-    "#616161",
+  "color-purple-90": [
+    "#5c2365",
     "color"
   ],
-  "color-background-theme": [
-    "#ffffff",
+  "color-purple-100": [
+    "#4a1c51",
     "color"
   ],
-  "color-background-component": [
-    "#ffffff",
+  "color-purple-110": [
+    "#37153d",
     "color"
   ],
-  "color-background-object": [
-    "#414141",
+  "color-purple-120": [
+    "#250e29",
     "color"
   ],
   "color-common-brand-default": [
@@ -588,7 +548,27 @@
     "color"
   ],
   "color-link-text-press": [
-    "#005077",
+    "#004160",
+    "color"
+  ],
+  "color-link-text-visited-default": [
+    "#5c2365",
+    "color"
+  ],
+  "color-link-text-visited-hover": [
+    "#4a1c51",
+    "color"
+  ],
+  "color-link-text-visited-press": [
+    "#37153d",
+    "color"
+  ],
+  "color-link-surface-visited-hover": [
+    "#f0ddf3",
+    "color"
+  ],
+  "color-link-surface-visited-press": [
+    "#e1bbe8",
     "color"
   ],
   "border-radius-100": [
@@ -655,356 +635,84 @@
     "2px",
     "dimension"
   ],
-  "shadow-black": [
-    "0 -2px 19px 0 rgba(0, 0, 0, 0.1)",
-    "shadow"
-  ],
-  "shadow-white": [
-    "0 -2px 19px 0 rgba(255, 255, 255, 0.1)",
-    "shadow"
-  ],
-  "font-size-300": [
-    "12px",
-    "typography"
-  ],
-  "font-size-350": [
-    "14px",
-    "typography"
-  ],
-  "font-size-400": [
-    "16px",
-    "typography"
-  ],
-  "line-height-tight": [
-    "130%",
-    "typography"
-  ],
-  "line-height-normal": [
-    "150%",
-    "typography"
-  ],
-  "font-weight-bold": [
-    "Bold",
-    "typography"
-  ],
-  "font-weight-regular": [
-    "Regular",
-    "typography"
-  ],
-  "font-family-base": [
-    "Roboto",
-    "typography"
-  ],
-  "regular-normal-300": [
+  "font-regular-normal-300": [
     "400 12px/1.5 Roboto",
     "typography"
   ],
-  "regular-normal-350": [
+  "font-regular-normal-350": [
     "400 14px/1.5 Roboto",
     "typography"
   ],
-  "regular-normal-400": [
+  "font-regular-normal-400": [
     "400 16px/1.5 Roboto",
     "typography"
   ],
-  "regular-tight-300": [
+  "font-regular-tight-300": [
     "400 12px/1.3 Roboto",
     "typography"
   ],
-  "regular-tight-350": [
+  "font-regular-tight-350": [
     "400 14px/1.3 Roboto",
     "typography"
   ],
-  "regular-tight-400": [
+  "font-regular-tight-400": [
     "400 16px/1.3 Roboto",
     "typography"
   ],
-  "regular-bold-normal-300": [
+  "font-regular-bold-normal-300": [
     "700 12px/1.5 Roboto",
     "typography"
   ],
-  "regular-bold-normal-350": [
+  "font-regular-bold-normal-350": [
     "700 14px/1.5 Roboto",
     "typography"
   ],
-  "regular-bold-normal-400": [
+  "font-regular-bold-normal-400": [
     "700 16px/1.5 Roboto",
     "typography"
   ],
-  "regular-bold-tight-300": [
+  "font-regular-bold-tight-300": [
     "700 12px/1.3 Roboto",
     "typography"
   ],
-  "regular-bold-tight-350": [
+  "font-regular-bold-tight-350": [
     "700 14px/1.3 Roboto",
     "typography"
   ],
-  "regular-bold-tight-400": [
+  "font-regular-bold-tight-400": [
     "700 16px/1.3 Roboto",
     "typography"
   ],
-  "checkbox-border-unselected": [
-    "2px solid #bfbfbf",
-    "border"
-  ],
-  "checkbox-color-background": [
-    "#30ade9",
-    "color"
-  ],
-  "checkbox-color-icon": [
-    "#ffffff",
-    "color"
-  ],
-  "dropdown-color-background": [
-    "#ffffff",
-    "color"
-  ],
-  "dropdown-color-text": [
-    "#515151",
-    "color"
-  ],
-  "dropdown-tray-color-background-selected": [
-    "#ebebeb",
-    "color"
-  ],
-  "table-color-background": [
-    "#ffffff",
-    "color"
-  ],
-  "table-color-text": [
-    "#515151",
-    "color"
-  ],
-  "table-header-border": [
-    "1px none #000000",
-    "border"
-  ],
-  "table-cell-border": [
-    "1px none #ebebeb",
-    "border"
-  ],
-  "table-page-number-color-background-selected": [
-    "#828282",
-    "color"
-  ],
-  "table-page-number-color-text-default": [
-    "#515151",
-    "color"
-  ],
-  "table-page-number-color-text-selected": [
-    "#ffffff",
-    "color"
-  ],
-  "table-page-number-border-hover": [
-    "1px none #828282",
-    "border"
-  ],
-  "login-sso-button-border": [
-    "1px none #616161",
-    "border"
-  ],
-  "login-sso-button-color-text": [
-    "#616161",
-    "color"
-  ],
-  "form-color-background": [
-    "#ffffff",
-    "color"
-  ],
-  "form-color-text-default": [
-    "#414141",
-    "color"
-  ],
-  "form-color-text-placeholder": [
-    "#828282",
-    "color"
-  ],
-  "form-color-text-positive": [
-    "#00c3ac",
-    "color"
-  ],
-  "form-color-text-negative": [
-    "#f21a27",
-    "color"
-  ],
-  "notification-color-background-success": [
-    "#00c3ac",
-    "color"
-  ],
-  "notification-color-background-error": [
-    "#f21a27",
-    "color"
-  ],
-  "notification-color-background-warning": [
-    "#ffbf0e",
-    "color"
-  ],
-  "notification-color-background-alarm": [
-    "#fa7a12",
-    "color"
-  ],
-  "notification-color-background-information": [
-    "#30ade9",
-    "color"
-  ],
-  "notification-color-background-theme": [
-    "#ffffff",
-    "color"
-  ],
-  "notification-color-text": [
-    "#414141",
-    "color"
-  ],
-  "notification-shadow": [
-    "0 -2px 19px 0 rgba(0, 0, 0, 0.1)",
-    "shadow"
-  ],
-  "icon-color-background-neutral": [
-    "#a0a0a0",
-    "color"
-  ],
-  "icon-color-background-default": [
-    "#414141",
-    "color"
-  ],
-  "icon-color-background-theme": [
-    "#ffffff",
-    "color"
-  ],
-  "container-color-background": [
-    "#ffffff",
-    "color"
-  ],
-  "container-color-text-header": [
-    "#414141",
-    "color"
-  ],
-  "container-color-text-body": [
-    "#616161",
-    "color"
-  ],
-  "card-shadow": [
-    "0 -2px 19px 0 rgba(0, 0, 0, 0.1)",
-    "shadow"
-  ],
-  "card-color-background": [
-    "#ffffff",
-    "color"
-  ],
-  "card-border-hover": [
-    "2px solid #BFBFBF",
-    "border"
-  ],
-  "card-border-alert": [
-    "2px solid #f21a27",
-    "border"
-  ],
-  "card-border-underline": [
-    "1px solid #d8dde0",
-    "border"
-  ],
-  "button-color-background-primary-active": [
-    "#30ade9",
-    "color"
-  ],
-  "button-color-background-primary-hover": [
-    "#76cff4",
-    "color"
-  ],
-  "button-color-background-primary-press": [
-    "#0097e0",
-    "color"
-  ],
-  "button-color-background-primary-focus": [
-    "#0081c0",
-    "color"
-  ],
-  "button-color-background-primary-disabled": [
-    "#dcdcdc",
-    "color"
-  ],
-  "button-color-border-secondary-active": [
-    "#30ade9",
-    "color"
-  ],
-  "button-color-border-secondary-hover": [
-    "#76cff4",
-    "color"
-  ],
-  "button-color-border-secondary-press": [
-    "#0097e0",
-    "color"
-  ],
-  "button-color-border-secondary-focus": [
-    "#0081c0",
-    "color"
-  ],
-  "button-color-border-secondary-disabled": [
-    "#dcdcdc",
-    "color"
-  ],
-  "button-color-text-secondary-active": [
-    "#30ade9",
-    "color"
-  ],
-  "button-color-text-secondary-hover": [
-    "#76cff4",
-    "color"
-  ],
-  "button-color-text-secondary-press": [
-    "#0097e0",
-    "color"
-  ],
-  "button-color-text-secondary-focus": [
-    "#0081c0",
-    "color"
-  ],
-  "button-color-text-secondary-disabled": [
-    "#dcdcdc",
-    "color"
-  ],
-  "button-color-text-primary": [
-    "#ffffff",
-    "color"
-  ],
-  "tab-color-line-active": [
-    "#30ade9",
-    "color"
-  ],
-  "tab-color-line-hover": [
-    "#76cff4",
-    "color"
-  ],
-  "tab-color-line-press": [
-    "#0097e0",
-    "color"
+  "font-size-300": [
+    "12px",
+    "fontSize"
   ],
-  "tab-color-line-focus": [
-    "#0081c0",
-    "color"
+  "font-size-350": [
+    "14px",
+    "fontSize"
   ],
-  "tab-color-line-disabled": [
-    "#dcdcdc",
-    "color"
+  "font-size-400": [
+    "16px",
+    "fontSize"
   ],
-  "tab-color-text-active": [
-    "#30ade9",
-    "color"
+  "font-line-height-tight": [
+    "1.3",
+    "lineHeight"
   ],
-  "tab-color-text-hover": [
-    "#76cff4",
-    "color"
+  "font-line-height-normal": [
+    "1.5",
+    "lineHeight"
   ],
-  "tab-color-text-press": [
-    "#0097e0",
-    "color"
+  "font-weight-bold": [
+    "700",
+    "fontWeight"
   ],
-  "tab-color-text-focus": [
-    "#0081c0",
-    "color"
+  "font-weight-regular": [
+    "400",
+    "fontWeight"
   ],
-  "tab-color-text-disabled": [
-    "#dcdcdc",
-    "color"
+  "font-family-base": [
+    "Roboto",
+    "fontFamily"
   ]
 }

package/build/scss/aaf/Dark/_mixins.scss

@@ -63,12 +63,6 @@
   --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;
@@ -83,8 +77,6 @@
   --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;
@@ -100,20 +92,18 @@
   --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-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-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -130,73 +120,24 @@
   --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-regular-normal-300: 400 12px/1.5 Roboto;
+  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
+  --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
+  --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
+  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
+  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
+  --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
+  --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
+  --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
+  --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
+  --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
+  --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
   --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;
+  --dds-font-line-height-tight: 1.3;
+  --dds-font-line-height-normal: 1.5;
+  --dds-font-weight-bold: 700;
+  --dds-font-weight-regular: 400;
+  --dds-font-family-base: Roboto;
 }