@amboss/design-system 1.14.5 → 1.15.0--canary-1

package/README.md

@@ -86,11 +86,20 @@ npm run lint
 |-- static
     |-- image-for-storybook.png
 |-- tokens
-    |-- themes
-        |-- dark.json
-        |-- light.json
-    |-- assets.json
-    |-- colors.json
+    |-- global
+      |-- themes
+          |-- dark.json
+          |-- light.json
+      |-- assets.json
+      |-- colors.json
+    |-- web
+      |-- component
+        |-- dark.json
+        |-- light.json
+    |-- android
+      |-- opacity.json
+    |-- ios
+      |-- opacity.json
 |-- src
     |-- index.ts
     |-- components
@@ -123,7 +132,7 @@ New variables and mixins gets generated automaticaly:
 - after npm install
 - before build
 
-You can generate tokens manually using `npm run tokens` and `npm run tokens:watch`
+You can generate tokens manually using `npm run tokens:web` and `npm run tokens:watch`
 
 We use tokens to control the most atomic values in styles and themes.
 
@@ -133,13 +142,11 @@ We have a set of .json files that are located in `./tokens` folder, and we have
 
 For example:
 
-We have a file - `./tokens/colors.json` that gets converted into part of `./build-tokens/visualConfig.ts` and `./build-tokens/_colors.json`.
+We have a file - `./tokens/global/light|dark.json` that gets converted into part of `./build-tokens/visualConfig.ts`.
 
 `visualConfig.ts` is used later as a source for emotion.js theme.
 
-`_colors.json` is imported inside `./.storybook/components/ColorGrid.tsx` in order to present in storybook all the colors we currently have.
-
-The configuration for `style-dictionary` is inside `./style-dictionary/style-dictionary.config.json`. In this config we use some custom transforms, filters and formatters, all of them defined in `./style-dictionary/style-dictionary.build.js`.
+The configuration for `style-dictionary` is inside `./style-dictionary/{platformName}/{platformName}.sd.config.json`. In this config we use some custom transforms, filters and formatters, all of them defined in corresponding files of platform folders.
 
 **custom/format/emotion-visual-config** - a formatter that generates visualConfig.ts that contains all variables and themed values.
 

package/build/cjs/build-tokens/visualConfig.js

@@ -1,171 +1,6 @@
 'use strict';
 
 const variables = {
-  "color": {
-    "neutral": {
-      "white": "#ffffff",
-      "whiteTransparent01": "rgba(255, 255, 255, 0.8)",
-      "whiteTransparent02": "rgba(255, 255, 255, 0.6)",
-      "whiteTransparent03": "rgba(255, 255, 255, 0.08)",
-      "black": "#1a1c1c",
-      "blackTransparent02": "rgba(0, 0, 0, 0.6)",
-      "transparent": "rgba(255, 255, 255, 0)"
-    },
-    "green": {
-      "regular": "#0fa980",
-      "regularAlt": "#39d6ac",
-      "dark01": "#0b8363",
-      "dark02": "#0a5c45",
-      "light01": "#8adcc6",
-      "light02": "#d0f1e8",
-      "light03": "#e8f8f4",
-      "regularTransparent": "rgba(15, 169, 128, 0.3)",
-      "dark02Transparent": "rgba(10, 92, 69, 0.3)"
-    },
-    "blue": {
-      "regular": "#1f6ce0",
-      "dark01": "#295dae",
-      "dark02": "#1c427d",
-      "light01": "#6e95cf",
-      "light02": "#d2e2f9",
-      "light03": "#e7effe",
-      "dark02Transparent": "rgba(28, 66, 125, 0.3)"
-    },
-    "gray": {
-      "light04": "#f5f7f9",
-      "light03": "#eef2f5",
-      "light02": "#e0e6eb",
-      "light01": "#a3b2bd",
-      "regular": "#607585",
-      "dark01": "#40515e",
-      "dark02": "#314554",
-      "transparent": "rgba(96, 117, 133, 0.08)",
-      "light01Transparent": "rgba(163, 178, 189, 0.3)",
-      "dark01Transparent": "rgba(64, 81, 94, 0.3)",
-      "dark02Transparent": "rgba(49, 69, 84, 0.3)"
-    },
-    "brand": {
-      "light03": "#e7f6f8",
-      "light02": "#ceedf1",
-      "light01": "#85d3dc",
-      "regular": "#0aa6b8",
-      "dark01": "#067c89",
-      "dark02": "#054f57"
-    },
-    "orange": {
-      "light03": "#fef3e1",
-      "light02": "#fceaca",
-      "light01": "#f6c66f",
-      "regular": "#f6bc56",
-      "regularAlt": "#f1d56b",
-      "dark01": "#df9411",
-      "dark02": "#9a6304"
-    },
-    "red": {
-      "light03": "#fde8e8",
-      "light02": "#fad1d1",
-      "light01": "#f07575",
-      "regular": "#ee6160",
-      "dark01": "#dc4847",
-      "dark02": "#c02725",
-      "dark02Transparent": "rgba(192, 39, 37, 0.3)"
-    },
-    "purple": {
-      "light03": "#f2effb",
-      "light02": "#d8d0f3",
-      "light01": "#a592e3",
-      "regular": "#7254d3",
-      "dark01": "#5d44ab",
-      "dark02": "#493687"
-    },
-    "yellow": {
-      "light03": "#fdfbe3",
-      "light02": "#faf5b8",
-      "light01": "#f3eb75",
-      "regular": "#ede13b",
-      "dark01": "#cec31c",
-      "dark02": "#a39905"
-    },
-    "nightBlack": {
-      "light03": "#40454f",
-      "light02": "#393e47",
-      "light01": "#32363e",
-      "regular": "#282c34",
-      "dark01": "#24282d",
-      "dark02": "#1e2125",
-      "light01Transparent": "rgba(50, 54, 62, 0.3)"
-    },
-    "nightGray": {
-      "light03": "#d8dade",
-      "light02": "#ced1d6",
-      "light01": "#b9bcc3",
-      "regular": "#93979f",
-      "dark01": "#757a84",
-      "dark02": "#5b5f67",
-      "regularTransparent": "rgba(147, 149, 159, 0.3)",
-      "transparent": "rgba(147, 151, 159, 0.08)",
-      "light03Transparent": "rgba(216, 218, 222, 0.3)"
-    },
-    "nightGreen": {
-      "light03": "#e2fef7",
-      "light02": "#a6f2dd",
-      "light01": "#41a48a",
-      "regular": "#28816b",
-      "dark01": "#233d3d",
-      "dark02": "#262e33",
-      "light01Transparent": "rgba(40, 129, 107, 0.3)",
-      "dark02Transparent": "rgba(38, 46, 51, 0.3)"
-    },
-    "nightBlue": {
-      "light03": "#e7effe",
-      "light02": "#99c1fa",
-      "light01": "#6e95cf",
-      "regular": "#2f538a",
-      "dark01": "#29364c",
-      "dark02": "#282e39"
-    },
-    "nightBrand": {
-      "light03": "#e1fbfe",
-      "light02": "#80dfea",
-      "light01": "#62b2bc",
-      "regular": "#1d6670",
-      "dark01": "#223c44",
-      "dark02": "#262f36"
-    },
-    "nightOrange": {
-      "light03": "#fef3e1",
-      "light02": "#fae0b3",
-      "light01": "#cbac76",
-      "regular": "#a4792d",
-      "dark01": "#4d412c",
-      "dark02": "#32302f"
-    },
-    "nightRed": {
-      "light03": "#fee7e7",
-      "light02": "#f49a9a",
-      "light01": "#d07c7c",
-      "regular": "#a45355",
-      "dark01": "#4d3237",
-      "dark02": "#312b31",
-      "dark02Transparent": "rgba(49, 43, 49, 0.3)"
-    },
-    "nightPurple": {
-      "light03": "#e8e1fe",
-      "light02": "#ad97f7",
-      "light01": "#7d67c5",
-      "regular": "#524389",
-      "dark01": "#33314b",
-      "dark02": "#2c2d3a"
-    },
-    "nightYellow": {
-      "light03": "#fefbd2",
-      "light02": "#f9f4a9",
-      "light01": "#cbc576",
-      "regular": "#b2ab39",
-      "dark01": "#494a2f",
-      "dark02": "#323530"
-    }
-  },
   "fontFamily": {
     "lato": "Lato, -apple-system, BlinkMacSystemFont, segoe ui, avenir next, avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif"
   },
@@ -397,7 +232,10 @@ const ambossVisualConfiguration = {
             "disabled": "rgba(255, 255, 255, 0.6)"
           },
           "error": {
-            "default": "#a45355"
+            "default": "#a45355",
+            "hover": "#d07c7c",
+            "active": "#4d3237",
+            "disabled": "rgba(164, 83, 85, 0.3)"
           },
           "success": {
             "default": "#28816b"
@@ -423,7 +261,7 @@ const ambossVisualConfiguration = {
           "warningSubtle": {
             "default": "#32302f"
           },
-          "hightlight": {
+          "highlight": {
             "default": "#40454f",
             "hover": "#393e47"
           },
@@ -468,7 +306,8 @@ const ambossVisualConfiguration = {
             "default": "#99c1fa"
           },
           "error": {
-            "default": "#f49a9a"
+            "default": "#f49a9a",
+            "disabled": "rgba(244, 154, 154, 0.3)"
           },
           "warning": {
             "default": "#fae0b3"
@@ -516,10 +355,10 @@ const ambossVisualConfiguration = {
         },
         "toggle": {
           "background": {
-            "hightlight": "#b2ab39"
+            "highlight": "#b2ab39"
           },
           "border": {
-            "hightlight": "#b2ab39"
+            "highlight": "#b2ab39"
           }
         },
         "badge": {
@@ -554,6 +393,13 @@ const ambossVisualConfiguration = {
             "gray": "#393e47"
           }
         },
+        "segmentedProgressBar": {
+          "monochrome": "#ced1d6",
+          "success": "#28816b",
+          "warning": "#a4792d",
+          "alert": "#a45355",
+          "inProgress": "#5b5f67"
+        },
         "tag": {
           "background": {
             "gray": "#5b5f67",
@@ -564,12 +410,11 @@ const ambossVisualConfiguration = {
             "blue": "#e7effe"
           }
         },
-        "segmentedProgressBar": {
-          "monochrome": "#ced1d6",
-          "success": "#28816b",
-          "warning": "#a4792d",
-          "alert": "#a45355",
-          "inProgress": "#5b5f67"
+        "destructiveTertiaryButton": {
+          "background": {
+            "hover": "rgba(164, 83, 85, 0.08)",
+            "active": "rgba(164, 83, 85, 0.08)"
+          }
         }
       },
       "subThemes": {
@@ -947,7 +792,10 @@ const ambossVisualConfiguration = {
             "disabled": "rgba(255, 255, 255, 0.6)"
           },
           "error": {
-            "default": "#dc4847"
+            "default": "#dc4847",
+            "hover": "#c02725",
+            "active": "#c02725",
+            "disabled": "rgba(238, 97, 96, 0.3)"
           },
           "success": {
             "default": "#0b8363"
@@ -973,7 +821,7 @@ const ambossVisualConfiguration = {
           "warningSubtle": {
             "default": "#fef3e1"
           },
-          "hightlight": {
+          "highlight": {
             "default": "#607585",
             "hover": "#40515e"
           },
@@ -1018,7 +866,8 @@ const ambossVisualConfiguration = {
             "default": "#1c427d"
           },
           "error": {
-            "default": "#c02725"
+            "default": "#c02725",
+            "disabled": "rgba(192, 39, 37, 0.3)"
           },
           "warning": {
             "default": "#314554"
@@ -1066,10 +915,10 @@ const ambossVisualConfiguration = {
         },
         "toggle": {
           "background": {
-            "hightlight": "#f3eb75"
+            "highlight": "#f3eb75"
           },
           "border": {
-            "hightlight": "#f3eb75"
+            "highlight": "#f3eb75"
           }
         },
         "badge": {
@@ -1104,6 +953,13 @@ const ambossVisualConfiguration = {
             "gray": "#eef2f5"
           }
         },
+        "segmentedProgressBar": {
+          "monochrome": "#607585",
+          "success": "#39d6ac",
+          "warning": "#f1d56b",
+          "alert": "#f07575",
+          "inProgress": "#e0e6eb"
+        },
         "tag": {
           "background": {
             "gray": "#e0e6eb",
@@ -1114,12 +970,11 @@ const ambossVisualConfiguration = {
             "blue": "#1c427d"
           }
         },
-        "segmentedProgressBar": {
-          "monochrome": "#607585",
-          "success": "#39d6ac",
-          "warning": "#f1d56b",
-          "alert": "#f07575",
-          "inProgress": "#e0e6eb"
+        "destructiveTertiaryButton": {
+          "background": {
+            "hover": "rgba(238, 97, 96, 0.08)",
+            "active": "rgba(238, 97, 96, 0.08)"
+          }
         }
       },
       "subThemes": {

package/build/cjs/scss/themes/dark.scss

@@ -1,105 +1,111 @@
 
 // Do not edit directly
-// Generated on Thu, 24 Aug 2023 13:55:58 GMT
+// Generated on Wed, 13 Sep 2023 07:09:24 GMT
 
-$color-canvas: #1e2125;
-$color-background-primary-default: #24282d;
-$color-background-secondary-default: #282c34;
-$color-background-secondary-hover: #393e47;
-$color-background-secondary-active: #393e47;
-$color-background-accent-default: #28816b;
-$color-background-accent-hover: #41a48a;
-$color-background-accent-active: #233d3d;
-$color-background-accent-disabled: rgba(40, 129, 107, 0.3);
-$color-background-onAccent-default: #ffffff;
-$color-background-onAccent-hover: #ffffff;
-$color-background-onAccent-active: #ffffff;
-$color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
-$color-background-error-default: #a45355;
-$color-background-success-default: #28816b;
-$color-background-info-default: #2f538a;
-$color-background-warning-default: #a4792d;
-$color-background-accentSubtle-default: #233d3d;
-$color-background-errorSubtle-default: #312b31;
-$color-background-successSubtle-default: #262e33;
-$color-background-infoSubtle-default: #282e39;
-$color-background-warningSubtle-default: #32302f;
-$color-background-hightlight-default: #40454f;
-$color-background-hightlight-hover: #393e47;
-$color-background-contrast-default: #ced1d6;
-$color-background-transparent-default: rgba(255, 255, 255, 0);
-$color-background-transparent-hover: rgba(147, 151, 159, 0.08);
-$color-background-transparent-active: rgba(147, 151, 159, 0.08);
-$color-background-backdrop-default: rgba(0, 0, 0, 0.6);
-$color-text-primary-default: #ced1d6;
-$color-text-primary-hover: #ffffff;
-$color-text-secondary-default: #b9bcc3;
-$color-text-secondary-hover: #ced1d6;
-$color-text-tertiary-default: #93979f;
-$color-text-tertiary-disabled: rgba(216, 218, 222, 0.3);
-$color-text-tertiary-hover: #b9bcc3;
-$color-text-quaternary-default: #757a84;
-$color-text-accent-default: #41a48a;
-$color-text-accent-hover: #a6f2dd;
-$color-text-onAccent-default: #ffffff;
-$color-text-onAccent-disabled: rgba(216, 218, 222, 0.3);
-$color-text-info-default: #99c1fa;
-$color-text-error-default: #f49a9a;
-$color-text-warning-default: #fae0b3;
-$color-text-success-default: #a6f2dd;
-$color-icon-primary: #d8dade;
-$color-icon-secondary: #ced1d6;
-$color-icon-tertiary: #93979f;
-$color-icon-quaternary: #757a84;
-$color-icon-accent: #41a48a;
-$color-icon-onAccent: #ffffff;
-$color-icon-info: #6e95cf;
-$color-icon-error: #d07c7c;
-$color-icon-warning: #cbac76;
-$color-icon-success: #41a48a;
-$color-icon-brand: #62b2bc;
-$color-border-primary-default: #5b5f67;
-$color-border-primary-hover: #757a84;
-$color-border-primary-active: #93979f;
-$color-border-primary-disabled: rgba(147, 151, 159, 0.08);
-$color-border-secondary-default: rgba(147, 149, 159, 0.3);
-$color-border-accent-default: #41a48a;
-$color-border-error-default: #d07c7c;
-$color-border-accentSubtle-default: #28816b;
-$color-divider-primary: #40454f;
-$color-divider-secondary: rgba(147, 151, 159, 0.08);
-$color-toggle-background-hightlight: #b2ab39;
-$color-toggle-border-hightlight: #b2ab39;
-$color-badge-background-default: transparent;
-$color-badge-background-green: transparent;
-$color-badge-background-blue: transparent;
-$color-badge-background-yellow: transparent;
-$color-badge-background-brand: transparent;
-$color-badge-background-purple: transparent;
-$color-badge-background-red: transparent;
-$color-badge-background-gray: transparent;
-$color-badge-text-default: #ced1d6;
-$color-badge-text-green: #41a48a;
-$color-badge-text-blue: #6e95cf;
-$color-badge-text-yellow: #cbac76;
-$color-badge-text-brand: #62b2bc;
-$color-badge-text-purple: #ad97f7;
-$color-badge-text-red: #d07c7c;
-$color-badge-text-gray: #93979f;
-$color-badge-border-default: #393e47;
-$color-badge-border-green: #393e47;
-$color-badge-border-blue: #393e47;
-$color-badge-border-yellow: #393e47;
-$color-badge-border-brand: #393e47;
-$color-badge-border-purple: #393e47;
-$color-badge-border-red: #393e47;
-$color-badge-border-gray: #393e47;
-$color-tag-background-gray: #5b5f67;
-$color-tag-background-blue: #2f538a;
-$color-tag-text-gray: #ced1d6;
-$color-tag-text-blue: #e7effe;
-$color-segmented-progress-bar-monochrome: #ced1d6;
-$color-segmented-progress-bar-success: #28816b;
-$color-segmented-progress-bar-warning: #a4792d;
-$color-segmented-progress-bar-alert: #a45355;
-$color-segmented-progress-bar-in-progress: #5b5f67;
+$dark-color-canvas: #1e2125;
+$dark-color-background-primary-default: #24282d;
+$dark-color-background-secondary-default: #282c34;
+$dark-color-background-secondary-hover: #393e47;
+$dark-color-background-secondary-active: #393e47;
+$dark-color-background-accent-default: #28816b;
+$dark-color-background-accent-hover: #41a48a;
+$dark-color-background-accent-active: #233d3d;
+$dark-color-background-accent-disabled: rgba(40, 129, 107, 0.3);
+$dark-color-background-onAccent-default: #ffffff;
+$dark-color-background-onAccent-hover: #ffffff;
+$dark-color-background-onAccent-active: #ffffff;
+$dark-color-background-onAccent-disabled: rgba(255, 255, 255, 0.6);
+$dark-color-background-error-default: #a45355;
+$dark-color-background-error-hover: #d07c7c;
+$dark-color-background-error-active: #4d3237;
+$dark-color-background-error-disabled: rgba(164, 83, 85, 0.3);
+$dark-color-background-success-default: #28816b;
+$dark-color-background-info-default: #2f538a;
+$dark-color-background-warning-default: #a4792d;
+$dark-color-background-accentSubtle-default: #233d3d;
+$dark-color-background-errorSubtle-default: #312b31;
+$dark-color-background-successSubtle-default: #262e33;
+$dark-color-background-infoSubtle-default: #282e39;
+$dark-color-background-warningSubtle-default: #32302f;
+$dark-color-background-highlight-default: #40454f;
+$dark-color-background-highlight-hover: #393e47;
+$dark-color-background-contrast-default: #ced1d6;
+$dark-color-background-transparent-default: rgba(255, 255, 255, 0);
+$dark-color-background-transparent-hover: rgba(147, 151, 159, 0.08);
+$dark-color-background-transparent-active: rgba(147, 151, 159, 0.08);
+$dark-color-background-backdrop-default: rgba(0, 0, 0, 0.6);
+$dark-color-text-primary-default: #ced1d6;
+$dark-color-text-primary-hover: #ffffff;
+$dark-color-text-secondary-default: #b9bcc3;
+$dark-color-text-secondary-hover: #ced1d6;
+$dark-color-text-tertiary-default: #93979f;
+$dark-color-text-tertiary-disabled: rgba(216, 218, 222, 0.3);
+$dark-color-text-tertiary-hover: #b9bcc3;
+$dark-color-text-quaternary-default: #757a84;
+$dark-color-text-accent-default: #41a48a;
+$dark-color-text-accent-hover: #a6f2dd;
+$dark-color-text-onAccent-default: #ffffff;
+$dark-color-text-onAccent-disabled: rgba(216, 218, 222, 0.3);
+$dark-color-text-info-default: #99c1fa;
+$dark-color-text-error-default: #f49a9a;
+$dark-color-text-error-disabled: rgba(244, 154, 154, 0.3);
+$dark-color-text-warning-default: #fae0b3;
+$dark-color-text-success-default: #a6f2dd;
+$dark-color-icon-primary: #d8dade;
+$dark-color-icon-secondary: #ced1d6;
+$dark-color-icon-tertiary: #93979f;
+$dark-color-icon-quaternary: #757a84;
+$dark-color-icon-accent: #41a48a;
+$dark-color-icon-onAccent: #ffffff;
+$dark-color-icon-info: #6e95cf;
+$dark-color-icon-error: #d07c7c;
+$dark-color-icon-warning: #cbac76;
+$dark-color-icon-success: #41a48a;
+$dark-color-icon-brand: #62b2bc;
+$dark-color-border-primary-default: #5b5f67;
+$dark-color-border-primary-hover: #757a84;
+$dark-color-border-primary-active: #93979f;
+$dark-color-border-primary-disabled: rgba(147, 151, 159, 0.08);
+$dark-color-border-secondary-default: rgba(147, 149, 159, 0.3);
+$dark-color-border-accent-default: #41a48a;
+$dark-color-border-error-default: #d07c7c;
+$dark-color-border-accentSubtle-default: #28816b;
+$dark-color-divider-primary: #40454f;
+$dark-color-divider-secondary: rgba(147, 151, 159, 0.08);
+$dark-color-toggle-background-highlight: #b2ab39;
+$dark-color-toggle-border-highlight: #b2ab39;
+$dark-color-badge-background-default: transparent;
+$dark-color-badge-background-green: transparent;
+$dark-color-badge-background-blue: transparent;
+$dark-color-badge-background-yellow: transparent;
+$dark-color-badge-background-brand: transparent;
+$dark-color-badge-background-purple: transparent;
+$dark-color-badge-background-red: transparent;
+$dark-color-badge-background-gray: transparent;
+$dark-color-badge-text-default: #ced1d6;
+$dark-color-badge-text-green: #41a48a;
+$dark-color-badge-text-blue: #6e95cf;
+$dark-color-badge-text-yellow: #cbac76;
+$dark-color-badge-text-brand: #62b2bc;
+$dark-color-badge-text-purple: #ad97f7;
+$dark-color-badge-text-red: #d07c7c;
+$dark-color-badge-text-gray: #93979f;
+$dark-color-badge-border-default: #393e47;
+$dark-color-badge-border-green: #393e47;
+$dark-color-badge-border-blue: #393e47;
+$dark-color-badge-border-yellow: #393e47;
+$dark-color-badge-border-brand: #393e47;
+$dark-color-badge-border-purple: #393e47;
+$dark-color-badge-border-red: #393e47;
+$dark-color-badge-border-gray: #393e47;
+$dark-color-segmented-progress-bar-monochrome: #ced1d6;
+$dark-color-segmented-progress-bar-success: #28816b;
+$dark-color-segmented-progress-bar-warning: #a4792d;
+$dark-color-segmented-progress-bar-alert: #a45355;
+$dark-color-segmented-progress-bar-in-progress: #5b5f67;
+$dark-color-tag-background-gray: #5b5f67;
+$dark-color-tag-background-blue: #2f538a;
+$dark-color-tag-text-gray: #ced1d6;
+$dark-color-tag-text-blue: #e7effe;
+$dark-color-destructive-tertiary-button-background-hover: rgba(164, 83, 85, 0.08);
+$dark-color-destructive-tertiary-button-background-active: rgba(164, 83, 85, 0.08);