feat: Introduce shades for brand colours

packages/css/src/components/alert/alert.scss

@@ -23,17 +23,21 @@
 }
 
 .ams-alert--error {
+  background-color: var(--ams-alert-error-background-color);
   border-color: var(--ams-alert-error-border-color);
 }
 
 .ams-alert--info {
+  background-color: var(--ams-alert-info-background-color);
   border-color: var(--ams-alert-info-border-color);
 }
 
 .ams-alert--success {
+  background-color: var(--ams-alert-success-background-color);
   border-color: var(--ams-alert-success-border-color);
 }
 
 .ams-alert--warning {
+  background-color: var(--ams-alert-warning-background-color);
   border-color: var(--ams-alert-warning-border-color);
 }

packages/css/src/components/badge/badge.scss

@@ -15,69 +15,139 @@
 .ams-badge--black {
   background-color: var(--ams-badge-black-background-color);
   color: var(--ams-badge-black-color);
+
+  &:hover {
+    background-color: var(--ams-badge-black-hover-background-color);
+    color: var(--ams-badge-black-hover-color);
+  }
 }
 
 .ams-badge--blue {
   background-color: var(--ams-badge-blue-background-color);
   color: var(--ams-badge-blue-color);
+
+  &:hover {
+    background-color: var(--ams-badge-blue-hover-background-color);
+    color: var(--ams-badge-blue-hover-color);
+  }
 }
 
 .ams-badge--dark-green {
   background-color: var(--ams-badge-dark-green-background-color);
   color: var(--ams-badge-dark-green-color);
+
+  &:hover {
+    background-color: var(--ams-badge-dark-green-hover-background-color);
+    color: var(--ams-badge-dark-green-hover-color);
+  }
 }
 
 .ams-badge--green {
   background-color: var(--ams-badge-green-background-color);
   color: var(--ams-badge-green-color);
+
+  &:hover {
+    background-color: var(--ams-badge-green-hover-background-color);
+    color: var(--ams-badge-green-hover-color);
+  }
 }
 
 .ams-badge--grey-1 {
   background-color: var(--ams-badge-grey-1-background-color);
   color: var(--ams-badge-grey-1-color);
+
+  &:hover {
+    background-color: var(--ams-badge-grey-1-hover-background-color);
+    color: var(--ams-badge-grey-1-hover-color);
+  }
 }
 
 .ams-badge--grey-2 {
   background-color: var(--ams-badge-grey-2-background-color);
   color: var(--ams-badge-grey-2-color);
+
+  &:hover {
+    background-color: var(--ams-badge-grey-2-hover-background-color);
+    color: var(--ams-badge-grey-2-hover-color);
+  }
 }
 
 .ams-badge--grey-3 {
   background-color: var(--ams-badge-grey-3-background-color);
   color: var(--ams-badge-grey-3-color);
+
+  &:hover {
+    background-color: var(--ams-badge-grey-3-hover-background-color);
+    color: var(--ams-badge-grey-3-hover-color);
+  }
 }
 
 .ams-badge--light-blue {
   background-color: var(--ams-badge-light-blue-background-color);
   color: var(--ams-badge-light-blue-color);
+
+  &:hover {
+    background-color: var(--ams-badge-light-blue-hover-background-color);
+    color: var(--ams-badge-light-blue-hover-color);
+  }
 }
 
 .ams-badge--magenta {
   background-color: var(--ams-badge-magenta-background-color);
   color: var(--ams-badge-magenta-color);
+
+  &:hover {
+    background-color: var(--ams-badge-magenta-hover-background-color);
+    color: var(--ams-badge-magenta-hover-color);
+  }
 }
 
 .ams-badge--orange {
   background-color: var(--ams-badge-orange-background-color);
   color: var(--ams-badge-orange-color);
+
+  &:hover {
+    background-color: var(--ams-badge-orange-hover-background-color);
+    color: var(--ams-badge-orange-hover-color);
+  }
 }
 
 .ams-badge--purple {
   background-color: var(--ams-badge-purple-background-color);
   color: var(--ams-badge-purple-color);
+
+  &:hover {
+    background-color: var(--ams-badge-purple-hover-background-color);
+    color: var(--ams-badge-purple-hover-color);
+  }
 }
 
 .ams-badge--red {
   background-color: var(--ams-badge-red-background-color);
   color: var(--ams-badge-red-color);
+
+  &:hover {
+    background-color: var(--ams-badge-red-hover-background-color);
+    color: var(--ams-badge-red-hover-color);
+  }
 }
 
 .ams-badge--white {
   background-color: var(--ams-badge-white-background-color);
   color: var(--ams-badge-white-color);
+
+  &:hover {
+    background-color: var(--ams-badge-white-hover-background-color);
+    color: var(--ams-badge-white-hover-color);
+  }
 }
 
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);
+
+  &:hover {
+    background-color: var(--ams-badge-yellow-hover-background-color);
+    color: var(--ams-badge-yellow-hover-color);
+  }
 }

packages/react/src/Badge/Badge.tsx

@@ -24,7 +24,7 @@ export const badgeColors = [
   'yellow',
 ] as const
 
-type BadgeColor = (typeof badgeColors)[number]
+export type BadgeColor = (typeof badgeColors)[number]
 
 export type BadgeProps = {
   /** The background colour. */

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

proprietary/tokens/src/brand/ams/color.tokens.json

@@ -16,6 +16,132 @@
       "neutral-grey1": { "value": "#E8E8E8" },
       "neutral-grey2": { "value": "#BEBEBE" },
       "neutral-grey3": { "value": "#767676" }
+    },
+    "brand": {
+      "color": {
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        },
+        "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" }
+        }
+      }
     }
   }
 }