Draft: New token structure

digdir · May 3, 2024 · 031581b · 031581b
1 parent 52f9d0a
commit 031581b
Show file tree

Hide file tree

Showing 11 changed files with 773 additions and 212 deletions.
diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json
@@ -1,12 +1,15 @@
 {
  "tokenSetOrder": [
- "Base/Core",
- "Base/Semantic",
- "Base/Fluid",
- "Brand/Digdir",
- "Brand/Tilsynet",
+ "System/light",
+ "System/dark",
+ "System/Style",
+ "Brand/1/Light",
+ "Brand/1/Dark",
+ "Brand/2",
  "Brand/Altinn",
  "Brand/Brreg",
+ "Base/Semantic",
+ "Base/Fluid",
  "Viewport/@320",
  "Viewport/@375",
  "Viewport/@576",

diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json
diff --git a/design-tokens/Base/Semantic.json b/design-tokens/Base/Semantic.json
@@ -408,6 +408,162 @@
  "type": "color"
  }
  }
+ },
+ "accent": {
+ "background": {
+ "value": "#",
+ "type": "color"
+ },
+ "background-subtle": {
+ "value": "#",
+ "type": "color"
+ }
+ },
+ "success": {
+ "background": {
+ "value": "{green.1}",
+ "type": "color"
+ },
+ "background-subtle": {
+ "value": "{green.2}",
+ "type": "color"
+ },
+ "surface": {
+ "value": "{green.3}",
+ "type": "color"
+ },
+ "surface-hover": {
+ "value": "{green.4}",
+ "type": "color"
+ },
+ "surface-active": {
+ "value": "{green.5}",
+ "type": "color"
+ },
+ "border-subtle": {
+ "value": "{green.6}",
+ "type": "color"
+ },
+ "border": {
+ "value": "{green.7}",
+ "type": "color"
+ },
+ "border-strong": {
+ "value": "{green.8}",
+ "type": "color"
+ },
+ "border-base": {
+ "value": "{green.9}",
+ "type": "color"
+ },
+ "border-base-hover": {
+ "value": "{green.10}",
+ "type": "color"
+ },
+ "border-base-active": {
+ "value": "{green.11}",
+ "type": "color"
+ }
+ },
+ "danger": {
+ "background": {
+ "value": "{green.1}",
+ "type": "color"
+ },
+ "background-subtle": {
+ "value": "{green.2}",
+ "type": "color"
+ },
+ "surface": {
+ "value": "{green.3}",
+ "type": "color"
+ },
+ "surface-hover": {
+ "value": "{green.4}",
+ "type": "color"
+ },
+ "surface-active": {
+ "value": "{green.5}",
+ "type": "color"
+ },
+ "border-subtle": {
+ "value": "{green.6}",
+ "type": "color"
+ },
+ "border": {
+ "value": "{green.7}",
+ "type": "color"
+ },
+ "border-strong": {
+ "value": "{green.8}",
+ "type": "color"
+ },
+ "border-base": {
+ "value": "{green.9}",
+ "type": "color"
+ },
+ "border-base-hover": {
+ "value": "{green.10}",
+ "type": "color"
+ },
+ "border-base-active": {
+ "value": "{green.11}",
+ "type": "color"
+ },
+ "text-subtle": {
+ "value": "{green.12}",
+ "type": "color"
+ }
+ },
+ "warning": {
+ "background": {
+ "value": "{green.1}",
+ "type": "color"
+ },
+ "background-subtle": {
+ "value": "{green.2}",
+ "type": "color"
+ },
+ "surface": {
+ "value": "{green.3}",
+ "type": "color"
+ },
+ "surface-hover": {
+ "value": "{green.4}",
+ "type": "color"
+ },
+ "surface-active": {
+ "value": "{green.5}",
+ "type": "color"
+ },
+ "border-subtle": {
+ "value": "{green.6}",
+ "type": "color"
+ },
+ "border": {
+ "value": "{green.7}",
+ "type": "color"
+ },
+ "border-strong": {
+ "value": "{green.8}",
+ "type": "color"
+ },
+ "border-base": {
+ "value": "{green.9}",
+ "type": "color"
+ },
+ "border-base-hover": {
+ "value": "{green.10}",
+ "type": "color"
+ },
+ "border-base-active": {
+ "value": "{green.11}",
+ "type": "color"
+ },
+ "text-subtle": {
+ "value": "{green.12}",
+ "type": "color"
+ }
  }
  },
  "typography": {
@@ -993,5 +1149,57 @@
  "value": "{shadow.500}",
  "type": "boxShadow"
  }
+ },
+ "color": {
+ "accent": {
+ "background": {
+ "value": "{green.1}",
+ "type": "color"
+ },
+ "background-subtle": {
+ "value": "{green.2}",
+ "type": "color"
+ },
+ "surface": {
+ "value": "{green.3}",
+ "type": "color"
+ },
+ "surface-hover": {
+ "value": "{green.4}",
+ "type": "color"
+ },
+ "surface-active": {
+ "value": "{green.5}",
+ "type": "color"
+ },
+ "border-subtle": {
+ "value": "{green.6}",
+ "type": "color"
+ },
+ "border": {
+ "value": "{green.7}",
+ "type": "color"
+ },
+ "border-strong": {
+ "value": "{green.8}",
+ "type": "color"
+ },
+ "border-base": {
+ "value": "{green.9}",
+ "type": "color"
+ },
+ "border-base-hover": {
+ "value": "{green.10}",
+ "type": "color"
+ },
+ "border-base-active": {
+ "value": "{green.11}",
+ "type": "color"
+ },
+ "text-subtle": {
+ "value": "{green.12}",
+ "type": "color"
+ }
+ }
  }
 }
diff --git a/design-tokens/Brand/Digdir.json → design-tokens/Brand/1/Dark.json b/design-tokens/Brand/Digdir.json → design-tokens/Brand/1/Dark.json
@@ -143,55 +143,55 @@
  "surface": {
  "first": {
  "subtle": {
- "value": "{brand.alt1.200}",
+ "value": "{Colors.alt1.200}",
  "type": "color"
  },
  "subtle-hover": {
- "value": "{brand.alt1.300}",
+ "value": "{Colors.alt1.300}",
  "type": "color"
  },
  "subtle-active": {
- "value": "{brand.alt1.400}",
+ "value": "{Colors.alt1.400}",
  "type": "color"
  },
  "strong": {
- "value": "{brand.alt1.800}",
+ "value": "{Colors.alt1.800}",
  "type": "color"
  }
  },
  "second": {
  "subtle": {
- "value": "{brand.alt2.200}",
+ "value": "{Colors.alt2.200}",
  "type": "color"
  },
  "subtle-hover": {
- "value": "{brand.alt2.300}",
+ "value": "{Colors.alt2.300}",
  "type": "color"
  },
  "subtle-active": {
- "value": "{brand.alt2.400}",
+ "value": "{Colors.alt2.400}",
  "type": "color"
  },
  "strong": {
- "value": "{brand.alt2.900}",
+ "value": "{Colors.alt2.900}",
  "type": "color"
  }
  },
  "third": {
  "subtle": {
- "value": "{brand.alt3.200}",
+ "value": "{Colors.alt3.200}",
  "type": "color"
  },
  "subtle-hover": {
- "value": "{brand.alt3.300}",
+ "value": "{Colors.alt3.300}",
  "type": "color"
  },
  "subtle-active": {
- "value": "{brand.alt3.400}",
+ "value": "{Colors.alt3.400}",
  "type": "color"
  },
  "strong": {
- "value": "{brand.alt3.800}",
+ "value": "{Colors.alt3.800}",
  "type": "color"
  }
  },
@@ -271,43 +271,43 @@
  "border": {
  "first": {
  "default": {
- "value": "{brand.alt1.600}",
+ "value": "{Colors.alt1.600}",
  "type": "color"
  },
  "hover": {
- "value": "{brand.alt1.700}",
+ "value": "{Colors.alt1.700}",
  "type": "color"
  },
  "active": {
- "value": "{brand.alt1.800}",
+ "value": "{Colors.alt1.800}",
  "type": "color"
  }
  },
  "second": {
  "default": {
- "value": "{brand.alt2.600}",
+ "value": "{Colors.alt2.600}",
  "type": "color"
  },
  "hover": {
- "value": "{brand.alt2.700}",
+ "value": "{Colors.alt2.700}",
  "type": "color"
  },
  "active": {
- "value": "{brand.alt2.800}",
+ "value": "{Colors.alt2.800}",
  "type": "color"
  }
  },
  "third": {
  "default": {
- "value": "{brand.alt3.600}",
+ "value": "{Colors.alt3.600}",
  "type": "color"
  },
  "hover": {
- "value": "{brand.alt3.700}",
+ "value": "{Colors.alt3.700}",
  "type": "color"
  },
  "active": {
- "value": "{brand.alt3.800}",
+ "value": "{Colors.alt3.800}",
  "type": "color"
  }
  },