@navikt/ds-tokens 7.9.1 → 7.10.0

package/dist/tokens.js

@@ -175,6 +175,28 @@ export const ADataBorder3 = "rgba(199, 115, 0, 1)";
 export const ADataBorder4 = "rgba(54, 141, 168, 1)";
 export const ADataBorder5 = "rgba(42, 167, 88, 1)";
 export const ADataBorder6 = "rgba(130, 105, 162, 1)";
+export const ASpace128 = "8rem";
+export const ASpace96 = "6rem";
+export const ASpace80 = "5rem";
+export const ASpace72 = "4.5rem";
+export const ASpace64 = "4rem";
+export const ASpace56 = "3.5rem";
+export const ASpace48 = "3rem";
+export const ASpace44 = "2.75rem";
+export const ASpace40 = "2.5rem";
+export const ASpace36 = "2.25rem";
+export const ASpace32 = "2rem";
+export const ASpace28 = "1.75rem";
+export const ASpace24 = "1.5rem";
+export const ASpace20 = "1.25rem";
+export const ASpace16 = "1rem";
+export const ASpace12 = ".75rem";
+export const ASpace8 = ".5rem";
+export const ASpace6 = ".375rem";
+export const ASpace4 = ".25rem";
+export const ASpace2 = ".125rem";
+export const ASpace1 = ".0625rem";
+export const ASpace0 = "0rem";
 export const ATransparent = "rgba(255, 255, 255, 0)";
 export const AWhite = "rgba(255, 255, 255, 1)";
 export const ANavRed = "rgba(195, 0, 0, 1)";

package/dist/tokens.less

@@ -174,6 +174,28 @@
 @a-data-border-4: rgba(54, 141, 168, 1);
 @a-data-border-5: rgba(42, 167, 88, 1);
 @a-data-border-6: rgba(130, 105, 162, 1);
+@a-space-128: 8rem;
+@a-space-96: 6rem;
+@a-space-80: 5rem;
+@a-space-72: 4.5rem;
+@a-space-64: 4rem;
+@a-space-56: 3.5rem;
+@a-space-48: 3rem;
+@a-space-44: 2.75rem;
+@a-space-40: 2.5rem;
+@a-space-36: 2.25rem;
+@a-space-32: 2rem;
+@a-space-28: 1.75rem;
+@a-space-24: 1.5rem;
+@a-space-20: 1.25rem;
+@a-space-16: 1rem;
+@a-space-12: .75rem;
+@a-space-8: .5rem;
+@a-space-6: .375rem;
+@a-space-4: .25rem;
+@a-space-2: .125rem;
+@a-space-1: .0625rem;
+@a-space-0: 0rem;
 @a-transparent: rgba(255, 255, 255, 0);
 @a-white: rgba(255, 255, 255, 1);
 @a-nav-red: rgba(195, 0, 0, 1);

package/dist/tokens.scss

@@ -174,6 +174,28 @@ $a-data-border-3: rgba(199, 115, 0, 1);
 $a-data-border-4: rgba(54, 141, 168, 1);
 $a-data-border-5: rgba(42, 167, 88, 1);
 $a-data-border-6: rgba(130, 105, 162, 1);
+$a-space-128: 8rem;
+$a-space-96: 6rem;
+$a-space-80: 5rem;
+$a-space-72: 4.5rem;
+$a-space-64: 4rem;
+$a-space-56: 3.5rem;
+$a-space-48: 3rem;
+$a-space-44: 2.75rem;
+$a-space-40: 2.5rem;
+$a-space-36: 2.25rem;
+$a-space-32: 2rem;
+$a-space-28: 1.75rem;
+$a-space-24: 1.5rem;
+$a-space-20: 1.25rem;
+$a-space-16: 1rem;
+$a-space-12: .75rem;
+$a-space-8: .5rem;
+$a-space-6: .375rem;
+$a-space-4: .25rem;
+$a-space-2: .125rem;
+$a-space-1: .0625rem;
+$a-space-0: 0rem;
 $a-transparent: rgba(255, 255, 255, 0);
 $a-white: rgba(255, 255, 255, 1);
 $a-nav-red: rgba(195, 0, 0, 1);

package/docs.json

@@ -541,6 +541,30 @@
     { "name": "--a-spacing-24", "value": "6rem" },
     { "name": "--a-spacing-32", "value": "8rem" }
   ],
+  "space": [
+    { "name": "--a-space-128", "value": "8rem" },
+    { "name": "--a-space-96", "value": "6rem" },
+    { "name": "--a-space-80", "value": "5rem" },
+    { "name": "--a-space-72", "value": "4.5rem" },
+    { "name": "--a-space-64", "value": "4rem" },
+    { "name": "--a-space-56", "value": "3.5rem" },
+    { "name": "--a-space-48", "value": "3rem" },
+    { "name": "--a-space-44", "value": "2.75rem" },
+    { "name": "--a-space-40", "value": "2.5rem" },
+    { "name": "--a-space-36", "value": "2.25rem" },
+    { "name": "--a-space-32", "value": "2rem" },
+    { "name": "--a-space-28", "value": "1.75rem" },
+    { "name": "--a-space-24", "value": "1.5rem" },
+    { "name": "--a-space-20", "value": "1.25rem" },
+    { "name": "--a-space-16", "value": "1rem" },
+    { "name": "--a-space-12", "value": ".75rem" },
+    { "name": "--a-space-8", "value": ".5rem" },
+    { "name": "--a-space-6", "value": ".375rem" },
+    { "name": "--a-space-4", "value": ".25rem" },
+    { "name": "--a-space-2", "value": ".125rem" },
+    { "name": "--a-space-1", "value": ".0625rem" },
+    { "name": "--a-space-0", "value": "0rem" }
+  ],
   "z-index": [
     { "name": "--a-z-index-focus", "value": 10 },
     { "name": "--a-z-index-popover", "value": 1000 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "7.9.1",
+  "version": "7.10.0",
   "description": "Design-tokens for Nav designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [

package/src/future-space.json

@@ -0,0 +1,26 @@
+{
+  "a": {
+    "space-128": { "value": "8rem" },
+    "space-96": { "value": "6rem" },
+    "space-80": { "value": "5rem" },
+    "space-72": { "value": "4.5rem" },
+    "space-64": { "value": "4rem" },
+    "space-56": { "value": "3.5rem" },
+    "space-48": { "value": "3rem" },
+    "space-44": { "value": "2.75rem" },
+    "space-40": { "value": "2.5rem" },
+    "space-36": { "value": "2.25rem" },
+    "space-32": { "value": "2rem" },
+    "space-28": { "value": "1.75rem" },
+    "space-24": { "value": "1.5rem" },
+    "space-20": { "value": "1.25rem" },
+    "space-16": { "value": "1rem" },
+    "space-12": { "value": ".75rem" },
+    "space-8": { "value": ".5rem" },
+    "space-6": { "value": ".375rem" },
+    "space-4": { "value": ".25rem" },
+    "space-2": { "value": ".125rem" },
+    "space-1": { "value": ".0625rem" },
+    "space-0": { "value": "0rem" }
+  }
+}

package/types.ts

@@ -7,14 +7,15 @@ export const ColorRolesList = [
   "warning",
   "danger",
   "info",
-  "brand-magenta",
-  "brand-beige",
-  "brand-blue",
-  "meta-purple",
-  "meta-lime",
+  "brand-1",
+  "brand-2",
+  "brand-3",
+  "meta-1",
+  "meta-2",
 ] as const;
 
-export type ColorRoles = (typeof ColorRolesList)[number];
+export type GlobalColorRoles = (typeof ColorRolesList)[number];
+export type SemanticColorRoles = Exclude<GlobalColorRoles, "neutral">;
 
 export type GlobalColorScale =
   | "100"
@@ -34,43 +35,63 @@ export type GlobalColorScale =
   | "400A";
 
 export type GlobalColorKeys =
-  | `${Extract<ColorRoles, "neutral">}-${Extract<GlobalColorScale, "000">}`
-  | `${ColorRoles}-${Exclude<GlobalColorScale, "000">}`;
+  | `${Extract<GlobalColorRoles, "neutral">}-${Extract<
+      GlobalColorScale,
+      "000"
+    >}`
+  | `${GlobalColorRoles}-${Exclude<GlobalColorScale, "000">}`;
 
 /* Semantic tokens */
 
-export type DefaultBgKeys =
+export type StaticDefaultBgKeys =
   | "default"
   | "input"
   | "raised"
   | "sunken"
-  | "overlay";
+  | "overlay"
+  | "soft"
+  | "moderate"
+  | "moderateA"
+  | "strong";
+
+export type StatefulDefaultBgKeys =
+  | "hover"
+  | "hoverA"
+  | "moderate-hover"
+  | "moderate-hoverA"
+  | "moderate-pressed"
+  | "moderate-pressedA"
+  | "strong-hover"
+  | "strong-pressed";
 
 export type StaticBgKeys =
-  | ColorRoles
-  | `${ColorRoles}-moderate`
-  | `${ColorRoles}-moderateA`
-  | `${ColorRoles}-strong`
-  | `${ColorRoles}-raised`;
+  | `${SemanticColorRoles}-soft`
+  | `${SemanticColorRoles}-moderate`
+  | `${SemanticColorRoles}-moderateA`
+  | `${SemanticColorRoles}-strong`;
 
 export type StatefulBgKeys =
-  | `${ColorRoles}-hover`
-  | `${ColorRoles}-hoverA`
-  | `${ColorRoles}-moderate-hover`
-  | `${ColorRoles}-moderate-hoverA`
-  | `${ColorRoles}-moderate-pressed`
-  | `${ColorRoles}-moderate-pressedA`
-  | `${ColorRoles}-strong-hover`
-  | `${ColorRoles}-strong-pressed`
-  | `${ColorRoles}-raised-hover`;
-
-export type DefaultTextColorKeys = "default" | "subtle" | "icon" | "logo";
+  | `${SemanticColorRoles}-hover`
+  | `${SemanticColorRoles}-hoverA`
+  | `${SemanticColorRoles}-moderate-hover`
+  | `${SemanticColorRoles}-moderate-hoverA`
+  | `${SemanticColorRoles}-moderate-pressed`
+  | `${SemanticColorRoles}-moderate-pressedA`
+  | `${SemanticColorRoles}-strong-hover`
+  | `${SemanticColorRoles}-strong-pressed`;
+
+export type DefaultTextColorKeys =
+  | "default"
+  | "subtle"
+  | "icon"
+  | "logo"
+  | "contrast";
 
 export type TextColorKeys =
-  | ColorRoles
-  | `${ColorRoles}-strong`
-  | `${ColorRoles}-icon`
-  | `${ColorRoles}-contrast`;
+  | SemanticColorRoles
+  | `${SemanticColorRoles}-strong`
+  | `${SemanticColorRoles}-icon`
+  | `${SemanticColorRoles}-contrast`;
 
 export type BorderColorKeys =
   | "default"
@@ -80,33 +101,17 @@ export type BorderColorKeys =
   | "focus";
 
 export type BorderColorWithRoleKeys =
-  | ColorRoles
-  | `${ColorRoles}-subtle`
-  | `${ColorRoles}-subtleA`
-  | `${ColorRoles}-strong`;
+  | SemanticColorRoles
+  | `${SemanticColorRoles}-subtle`
+  | `${SemanticColorRoles}-subtleA`
+  | `${SemanticColorRoles}-strong`;
+
+export const spaceInPixels = [
+  0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 96,
+  128,
+] as const;
 
-export type SpacingKeys =
-  | "0"
-  | "05"
-  | "1"
-  | "1-alt"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "14"
-  | "16"
-  | "18"
-  | "20"
-  | "24"
-  | "32";
+export type SpaceKeys = `space-${(typeof spaceInPixels)[number]}`;
 
 export type ShadowKeys = "dialog";
 
@@ -220,3 +225,26 @@ export type LegacyBorderColorKeys =
   | "border-alt-1"
   | "border-alt-2"
   | "border-alt-3";
+
+export type LegacySpacingKeys =
+  | "0"
+  | "05"
+  | "1"
+  | "1-alt"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "14"
+  | "16"
+  | "18"
+  | "20"
+  | "24"
+  | "32";