feat!: Introduce brand color palettes and rename color tokens (#1755)

Amsterdam · Nov 19, 2024 · cf37ecc · cf37ecc
1 parent eeea7b6
commit cf37ecc
Show file tree

Hide file tree

Showing 56 changed files with 523 additions and 388 deletions.
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -151,7 +151,6 @@
 :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
 }
 
@@ -169,15 +168,13 @@
 :is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
 }
 
 // Invalid indeterminate hover
 :is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
 }
 

diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
@@ -71,7 +71,6 @@
   box-shadow: var(--ams-date-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss
@@ -53,7 +53,6 @@
   box-shadow: var(--ams-password-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
@@ -116,12 +116,10 @@
 // Invalid hover
 .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
   .ams-radio__circle {
-    // TODO: this should be the (currently non-existent) dark red hover color
     stroke: var(--ams-radio-circle-invalid-hover-stroke);
   }
 
   .ams-radio__checked-indicator {
-    // TODO: this should be the (currently non-existent) dark red hover color
     fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
   }
 }

diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
@@ -50,7 +50,6 @@
   box-shadow: var(--ams-search-field-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
   }
 }

diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss
@@ -55,7 +55,6 @@
   box-shadow: var(--ams-text-area-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }

diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
@@ -53,7 +53,6 @@
   box-shadow: var(--ams-text-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss
@@ -72,7 +72,6 @@
   box-shadow: var(--ams-time-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
   }
 }
diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
@@ -80,7 +80,7 @@ Examples:
 
 ```css
 :root {
-  --ams-color-primary-red: #ec0000;
+  --ams-brand-color-red-60: #ec0000;
   --ams-space-md: 1rem;
   --ams-aspect-ratio-wide: 4/3;
   --ams-border-width-lg: 0.1875rem;
@@ -168,8 +168,9 @@ Use ‘dot notation’ or square brackets to access the tokens.
 ```ts
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
-const buttonBackgroundColor = tokens.ams.color["primary-blue"]
-const rowGap = tokens.ams.space.md
+const { ams } = tokens
+const buttonBackgroundColor = ams.brand.color.blue['60']
+const rowGap = ams.space.md
 ```
 
 Import and merge the compact tokens if you need them.
@@ -180,7 +181,7 @@ Then you can use the tokens in scripting or css-in-js libraries.
 import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
 import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
 
-const tokens = { ...spaciousTokens, ...compactTokens }
+const { ams } = { ...spaciousTokens, ...compactTokens }
 ```
 
 ## Usage in Figma

diff --git a/proprietary/tokens/src/brand/ams/color.tokens.json b/proprietary/tokens/src/brand/ams/color.tokens.json
@@ -1,21 +1,130 @@
 {
   "ams": {
-    "color": {
-      "primary-black": { "value": "#000000" },
-      "primary-white": { "value": "#FFFFFF" },
-      "primary-blue": { "value": "#004699" },
-      "primary-red": { "value": "#EC0000" },
-      "dark-blue": { "value": "#102E62" },
-      "orange": { "value": "#FF9100" },
-      "yellow": { "value": "#FFE600" },
-      "green": { "value": "#BED200" },
-      "dark-green": { "value": "#00A03C" },
-      "blue": { "value": "#009DE6" },
-      "purple": { "value": "#A00078" },
-      "magenta": { "value": "#E50082" },
-      "neutral-grey1": { "value": "#E8E8E8" },
-      "neutral-grey2": { "value": "#BEBEBE" },
-      "neutral-grey3": { "value": "#767676" }
+    "brand": {
+      "color": {
+        "azure": {
+          "10": { "value": "#F2F7FD" },
+          "20": { "value": "#E4EFFA" },
+          "30": { "value": "#C6DDF5" },
+          "40": { "value": "#A1CAF0" },
+          "50": { "value": "#72B5EB" },
+          "60": { "value": "#009DE6" },
+          "70": { "value": "#008CCE" },
+          "80": { "value": "#007AB2" },
+          "90": { "value": "#006391" },
+          "100": { "value": "#004667" }
+        },
+        "blue": {
+          "10": { "value": "#F2F3F7" },
+          "20": { "value": "#E4E6EE" },
+          "30": { "value": "#C6CADC" },
+          "40": { "value": "#A1AAC8" },
+          "50": { "value": "#7282B2" },
+          "60": { "value": "#004699" },
+          "70": { "value": "#003F89" },
+          "80": { "value": "#003677" },
+          "90": { "value": "#002C61" },
+          "100": { "value": "#001F44" }
+        },
+        "green": {
+          "10": { "value": "#F2F7F3" },
+          "20": { "value": "#E4EFE6" },
+          "30": { "value": "#C6DEC9" },
+          "40": { "value": "#A1CBA8" },
+          "50": { "value": "#72B77E" },
+          "60": { "value": "#00A03C" },
+          "70": { "value": "#008F36" },
+          "80": { "value": "#007C2E" },
+          "90": { "value": "#006526" },
+          "100": { "value": "#00481B" }
+        },
+        "lime": {
+          "10": { "value": "#F9FBF2" },
+          "20": { "value": "#F3F7E4" },
+          "30": { "value": "#E7EEC6" },
+          "40": { "value": "#DAE5A1" },
+          "50": { "value": "#CDDC72" },
+          "60": { "value": "#BED200" },
+          "70": { "value": "#AABC00" },
+          "80": { "value": "#93A300" },
+          "90": { "value": "#788500" },
+          "100": { "value": "#555E00" }
+        },
+        "magenta": {
+          "10": { "value": "#FDF2F5" },
+          "20": { "value": "#FAE4EB" },
+          "30": { "value": "#F5C6D6" },
+          "40": { "value": "#F0A1BE" },
+          "50": { "value": "#EA72A3" },
+          "60": { "value": "#E50082" },
+          "70": { "value": "#CD0074" },
+          "80": { "value": "#B10065" },
+          "90": { "value": "#910052" },
+          "100": { "value": "#66003A" }
+        },
+        "neutral": {
+          "0": { "value": "#FFFFFF" },
+          "10": { "value": "#E8E8E8" },
+          "20": { "value": "#D1D1D1" },
+          "30": { "value": "#BBBBBB" },
+          "40": { "value": "#A4A4A4" },
+          "50": { "value": "#8D8D8D" },
+          "60": { "value": "#767676" },
+          "70": { "value": "#5E5E5E" },
+          "80": { "value": "#474747" },
+          "90": { "value": "#2F2F2F" },
+          "100": { "value": "#181818" },
+          "110": { "value": "#000000" }
+        },
+        "orange": {
+          "10": { "value": "#FFF6F2" },
+          "20": { "value": "#FFEDE4" },
+          "30": { "value": "#FFDAC6" },
+          "40": { "value": "#FFC5A1" },
+          "50": { "value": "#FFAD72" },
+          "60": { "value": "#FF9100" },
+          "70": { "value": "#E48200" },
+          "80": { "value": "#C67000" },
+          "90": { "value": "#A15C00" },
+          "100": { "value": "#724100" }
+        },
+        "purple": {
+          "10": { "value": "#F7F2F5" },
+          "20": { "value": "#EFE4EA" },
+          "30": { "value": "#DEC6D4" },
+          "40": { "value": "#CBA1BA" },
+          "50": { "value": "#B7729D" },
+          "60": { "value": "#A00078" },
+          "70": { "value": "#8F006B" },
+          "80": { "value": "#7C005D" },
+          "90": { "value": "#65004C" },
+          "100": { "value": "#480036" }
+        },
+        "red": {
+          "10": { "value": "#FDF2F2" },
+          "20": { "value": "#FBE4E4" },
+          "30": { "value": "#F8C6C6" },
+          "40": { "value": "#F4A1A1" },
+          "50": { "value": "#F07272" },
+          "60": { "value": "#EC0000" },
+          "70": { "value": "#D30000" },
+          "80": { "value": "#B70000" },
+          "90": { "value": "#950000" },
+          "100": { "value": "#6A0000" }
+        },
+        "yellow": {
+          "10": { "value": "#FFFDF2" },
+          "20": { "value": "#FFFAE4" },
+          "30": { "value": "#FFF5C6" },
+          "40": { "value": "#FFF0A1" },
+          "50": { "value": "#FFEB72" },
+          "60": { "value": "#FFE600" },
+          "70": { "value": "#E4CE00" },
+          "80": { "value": "#C6B200" },
+          "90": { "value": "#A19100" },
+          "100": { "value": "#726700" }
+        }
+      }
     }
   }
 }
diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -1,11 +1,11 @@
 {
   "ams": {
     "link-appearance": {
-      "color": { "value": "{ams.color.primary-blue}" },
+      "color": { "value": "{ams.brand.color.blue.60}" },
       "text-decoration-thickness": { "value": "{ams.border.width.md}" },
       "text-underline-offset": { "value": "0.3333em" },
       "hover": {
-        "color": { "value": "{ams.color.dark-blue}" }
+        "color": { "value": "{ams.brand.color.blue.80}" }
       },
       "regular": {
         "text-decoration-line": { "value": "underline" },
@@ -21,21 +21,21 @@
         }
       },
       "contrast": {
-        "color": { "value": "{ams.color.primary-black}" },
+        "color": { "value": "{ams.brand.color.neutral.100}" },
         "hover": {
-          "color": { "value": "{ams.color.primary-black}" }
+          "color": { "value": "{ams.brand.color.neutral.100}" }
         },
         "visited": {
-          "color": { "value": "{ams.color.primary-black}" }
+          "color": { "value": "{ams.brand.color.neutral.100}" }
         }
       },
       "inverse": {
-        "color": { "value": "{ams.color.primary-white}" },
+        "color": { "value": "{ams.brand.color.neutral.0}" },
         "hover": {
-          "color": { "value": "{ams.color.primary-white}" }
+          "color": { "value": "{ams.brand.color.neutral.0}" }
         },
         "visited": {
-          "color": { "value": "{ams.color.primary-white}" }
+          "color": { "value": "{ams.brand.color.neutral.0}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -3,7 +3,7 @@
     "accordion": {
       "gap": { "value": "{ams.space.md}" },
       "button": {
-        "color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.brand.color.blue.60}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
@@ -15,7 +15,7 @@
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
         },
         "hover": {
-          "color": { "value": "{ams.color.dark-blue}" }
+          "color": { "value": "{ams.brand.color.blue.80}" }
         }
       },
       "panel": {

diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -7,21 +7,21 @@
       "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
-        "border-color": { "value": "{ams.color.primary-red}" }
+        "border-color": { "value": "{ams.brand.color.red.60}" }
       },
       "info": {
-        "border-color": { "value": "{ams.color.primary-blue}" }
+        "border-color": { "value": "{ams.brand.color.blue.60}" }
       },
       "success": {
-        "border-color": { "value": "{ams.color.dark-green}" }
+        "border-color": { "value": "{ams.brand.color.green.60}" }
       },
       "warning": {
-        "border-color": { "value": "{ams.color.orange}" }
+        "border-color": { "value": "{ams.brand.color.orange.60}" }
       },
       "close": {
-        "fill": { "value": "{ams.color.primary-black}" },
+        "fill": { "value": "{ams.brand.color.neutral.100}" },
         "hover": {
-          "fill": { "value": "{ams.color.primary-blue}" }
+          "fill": { "value": "{ams.brand.color.blue.60}" }
         }
       },
       "content": {