@daikin-oss/dds-tokens 0.2.0 → 0.3.0

package/themes/reference.json

@@ -248,32 +248,6 @@
       "120": {
         "value": "#3E0307",
         "type": "color"
-      },
-      "aaf": {
-        "100": {
-          "value": "#FCECEA",
-          "type": "color"
-        },
-        "200": {
-          "value": "#F5C0B8",
-          "type": "color"
-        },
-        "300": {
-          "value": "#F8AEBA",
-          "type": "color"
-        },
-        "400": {
-          "value": "#DB4F66",
-          "type": "color"
-        },
-        "500": {
-          "value": "#D2324C",
-          "type": "color"
-        },
-        "600": {
-          "value": "#C8102E",
-          "type": "color"
-        }
       }
     },
     "gray": {
@@ -338,14 +312,6 @@
       "value": "#ffffff",
       "type": "color"
     },
-    "black-shadow": {
-      "value": "#0000001A",
-      "type": "color"
-    },
-    "white-shadow": {
-      "value": "#ffffff1A",
-      "type": "color"
-    },
     "blue-gray": {
       "10": {
         "value": "#EEF0F2",
@@ -409,6 +375,56 @@
         "value": "#1A1A1A",
         "type": "color"
       }
+    },
+    "purple": {
+      "10": {
+        "value": "#F0DDF3",
+        "type": "color"
+      },
+      "20": {
+        "value": "#E1BBE8",
+        "type": "color"
+      },
+      "30": {
+        "value": "#D399DC",
+        "type": "color"
+      },
+      "40": {
+        "value": "#C477D0",
+        "type": "color"
+      },
+      "50": {
+        "value": "#B556C5",
+        "type": "color"
+      },
+      "60": {
+        "value": "#A03DB0",
+        "type": "color"
+      },
+      "70": {
+        "value": "#81318E",
+        "type": "color"
+      },
+      "80": {
+        "value": "#6F2A7A",
+        "type": "color"
+      },
+      "90": {
+        "value": "#5C2365",
+        "type": "color"
+      },
+      "100": {
+        "value": "#4A1C51",
+        "type": "color"
+      },
+      "110": {
+        "value": "#37153D",
+        "type": "color"
+      },
+      "120": {
+        "value": "#250E29",
+        "type": "color"
+      }
     }
   },
   "border-radius": {
@@ -481,201 +497,166 @@
       "type": "spacing"
     }
   },
-  "shadow": {
-    "black": {
-      "value": {
-        "x": "0",
-        "y": "-2",
-        "blur": "19",
-        "spread": "0",
-        "color": "{color.black-shadow}",
-        "type": "dropShadow"
-      },
-      "type": "boxShadow"
-    },
-    "white": {
-      "value": {
-        "x": "0",
-        "y": "-2",
-        "blur": "19",
-        "spread": "0",
-        "color": "{color.white-shadow}",
-        "type": "dropShadow"
-      },
-      "type": "boxShadow"
-    }
-  },
-  "font-size": {
-    "300": {
-      "value": "12px",
-      "type": "typography"
-    },
-    "350": {
-      "value": "14px",
-      "type": "typography"
-    },
-    "400": {
-      "value": "16px",
-      "type": "typography"
-    }
-  },
-  "line-height": {
-    "tight": {
-      "value": "130%",
-      "type": "typography"
-    },
-    "normal": {
-      "value": "150%",
-      "type": "typography"
-    }
-  },
-  "font-weight": {
-    "bold": {
-      "value": "Bold",
-      "type": "typography"
-    },
+  "font": {
     "regular": {
-      "value": "Regular",
-      "type": "typography"
-    }
-  },
-  "font-family": {
-    "base": {
-      "value": "Roboto",
-      "type": "typography",
-      "description": "The primary font used in the DDS Design Kit is Roboto"
-    }
-  },
-  "regular": {
-    "normal": {
-      "300": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.normal}",
-          "fontSize": "{font-size.300}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      },
-      "350": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.normal}",
-          "fontSize": "{font-size.350}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      },
-      "400": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.normal}",
-          "fontSize": "{font-size.400}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      }
-    },
-    "tight": {
-      "300": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.tight}",
-          "fontSize": "{font-size.300}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      },
-      "350": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.tight}",
-          "fontSize": "{font-size.350}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      },
-      "400": {
-        "value": {
-          "fontFamily": "{font-family.base}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.tight}",
-          "fontSize": "{font-size.400}"
-        },
-        "type": "typography",
-        "description": "Body is primarily used for components and for blocks of text."
-      }
-    },
-    "bold": {
       "normal": {
         "300": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.normal}",
-            "fontSize": "{font-size.300}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.normal}",
+            "fontSize": "{font.size.300}"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "type": "typography"
         },
         "350": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.normal}",
-            "fontSize": "{font-size.350}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.normal}",
+            "fontSize": "{font.size.350}"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "type": "typography"
         },
         "400": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.normal}",
-            "fontSize": "{font-size.400}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.normal}",
+            "fontSize": "{font.size.400}"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "type": "typography"
         }
       },
       "tight": {
         "300": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.tight}",
-            "fontSize": "{font-size.300}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.300}"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "type": "typography"
         },
         "350": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.tight}",
-            "fontSize": "{font-size.350}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.350}"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "type": "typography"
         },
         "400": {
           "value": {
-            "fontFamily": "{font-family.base}",
-            "fontWeight": "{font-weight.bold}",
-            "lineHeight": "{line-height.tight}",
-            "fontSize": "{font-size.400}"
+            "fontFamily": "{font.family.base}",
+            "fontWeight": "{font.weight.regular}",
+            "lineHeight": "{font.line-height.tight}",
+            "fontSize": "{font.size.400}"
+          },
+          "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"
+          }
+        },
+        "tight": {
+          "300": {
+            "value": {
+              "fontFamily": "{font.family.base}",
+              "fontWeight": "{font.weight.bold}",
+              "lineHeight": "{font.line-height.tight}",
+              "fontSize": "{font.size.300}"
+            },
+            "type": "typography"
           },
-          "type": "typography",
-          "description": "Header is used to create various levels of typographic hierarchies."
+          "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"
+          }
         }
       }
+    },
+    "size": {
+      "300": {
+        "value": "12",
+        "type": "fontSizes"
+      },
+      "350": {
+        "value": "14",
+        "type": "fontSizes"
+      },
+      "400": {
+        "value": "16",
+        "type": "fontSizes"
+      }
+    },
+    "line-height": {
+      "tight": {
+        "value": "130%",
+        "type": "lineHeights"
+      },
+      "normal": {
+        "value": "150%",
+        "type": "lineHeights"
+      }
+    },
+    "weight": {
+      "bold": {
+        "value": "Bold",
+        "type": "fontWeights"
+      },
+      "regular": {
+        "value": "Regular",
+        "type": "fontWeights"
+      }
+    },
+    "family": {
+      "base": {
+        "value": "Roboto",
+        "type": "fontFamilies"
+      }
     }
   }
 }

package/themes/system.json

@@ -1,31 +1 @@
-{
-  "color": {
-    "feedback": {
-      "positive": {
-        "value": "{color.green.60}",
-        "type": "color",
-        "description": "System status is positive"
-      },
-      "warning": {
-        "value": "{color.yellow.50}",
-        "type": "color",
-        "description": "System status is warning"
-      },
-      "negative": {
-        "value": "{color.red.60}",
-        "type": "color",
-        "description": "System status is warning"
-      },
-      "alarm": {
-        "value": "{color.orange.60}",
-        "type": "color",
-        "description": "System status is warning"
-      },
-      "information": {
-        "value": "{color.blue.60}",
-        "type": "color",
-        "description": "System status is warning"
-      }
-    }
-  }
-}
+{}

package/build/css/aaf/Dark/buttons.css

@@ -1,22 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --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;
-}

package/build/css/aaf/Light/buttons.css

@@ -1,22 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --dds-button-color-background-primary-active: #c8102e; /* Color used for the default state of a secondary button */
-  --dds-button-color-background-primary-hover: #db4f66;
-  --dds-button-color-background-primary-press: #d2324c;
-  --dds-button-color-background-primary-focus: #f8aeba;
-  --dds-button-color-background-primary-disabled: #dcdcdc;
-  --dds-button-color-border-secondary-active: #c8102e;
-  --dds-button-color-border-secondary-hover: #db4f66;
-  --dds-button-color-border-secondary-press: #d2324c;
-  --dds-button-color-border-secondary-focus: #f8aeba;
-  --dds-button-color-border-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-secondary-active: #c8102e;
-  --dds-button-color-text-secondary-hover: #db4f66;
-  --dds-button-color-text-secondary-press: #d2324c;
-  --dds-button-color-text-secondary-focus: #f8aeba;
-  --dds-button-color-text-secondary-disabled: #dcdcdc;
-  --dds-button-color-text-primary: #ffffff;
-}

package/build/css/daikin/Dark/buttons.css

@@ -1,22 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --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;
-}

package/build/css/daikin/Light/buttons.css

@@ -1,22 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --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;
-}