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"
         }
       },