@daikin-oss/dds-tokens 0.2.1 → 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"
@@ -435,62 +403,6 @@
     "#250e29",
     "color"
   ],
-  "color-feedback-positive": [
-    "#00c3ac",
-    "color"
-  ],
-  "color-feedback-warning": [
-    "#ffbf0e",
-    "color"
-  ],
-  "color-feedback-negative": [
-    "#f21a27",
-    "color"
-  ],
-  "color-feedback-alarm": [
-    "#fa7a12",
-    "color"
-  ],
-  "color-feedback-information": [
-    "#30ade9",
-    "color"
-  ],
-  "color-brand-primary": [
-    "#30ade9",
-    "color"
-  ],
-  "color-brand-secondary": [
-    "#76cff4",
-    "color"
-  ],
-  "color-text-brand-primary": [
-    "#30ade9",
-    "color"
-  ],
-  "color-text-theme": [
-    "#ffffff",
-    "color"
-  ],
-  "color-text-default": [
-    "#414141",
-    "color"
-  ],
-  "color-text-default-sub": [
-    "#616161",
-    "color"
-  ],
-  "color-background-theme": [
-    "#ffffff",
-    "color"
-  ],
-  "color-background-component": [
-    "#ffffff",
-    "color"
-  ],
-  "color-background-object": [
-    "#414141",
-    "color"
-  ],
   "color-common-brand-default": [
     "#0097e0",
     "color"
@@ -723,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;
@@ -112,20 +104,6 @@
   --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: #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-border-radius-100: 4px;
   --dds-border-radius-150: 6px;
   --dds-border-radius-200: 8px;
@@ -142,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;
 }