@solid-design-system/tokens 7.0.0-next.7 → 7.0.0-next.8

package/dist/themes/vb/vb.css

@@ -124,16 +124,42 @@
   --sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.5);
   --sd-checkbox--invalid-color-background: 253 237 237;
   --sd-checkbox-border-width: var(--sd-spacing-0\.5);
-  --sd-chip--primary-200-color-background: 237 240 244;
-  --sd-chip--primary-200-color-border: var(--sd-color-primary-900);
-  --sd-chip--primary-300-color-background: 237 248 253;
-  --sd-chip--primary-300-color-border: 0 121 168;
-  --sd-chip--primary-500-color-background: 237 248 253;
-  --sd-chip--primary-500-color-border: 0 121 168;
-  --sd-chip--primary-500-color-text: var(--sd-color-black);
+  --sd-chip--neutral-high-color-background: 237 248 253;
+  --sd-chip--neutral-high-color-border: 0 121 168;
+  --sd-chip--neutral-high-color-filled-border: 0 121 168;
+  --sd-chip--neutral-high-color-outline-fill: 237 248 253;
+  --sd-chip--neutral-low-color-background: 237 240 244;
+  --sd-chip--neutral-low-color-border: var(--sd-color-primary-900);
+  --sd-chip--neutral-low-color-filled-border: var(--sd-color-primary-900);
+  --sd-chip--neutral-low-color-outline-fill: 237 240 244;
+  --sd-chip--neutral-medium-color-background: 237 248 253;
+  --sd-chip--neutral-medium-color-border: 0 121 168;
+  --sd-chip--neutral-medium-color-filled-border: 0 121 168;
+  --sd-chip--neutral-medium-color-outline-fill: 237 248 253;
+  --sd-chip--neutral-strong-color-border: 0 121 168;
+  --sd-chip--neutral-strong-color-outline-fill: 237 248 253;
+  --sd-chip--neutral-subtle-color-background: 237 240 244;
+  --sd-chip--neutral-subtle-color-filled-border: var(--sd-color-primary-900);
+  --sd-chip--primary-high-color-background: 237 248 253;
+  --sd-chip--primary-high-color-border: 0 121 168;
+  --sd-chip--primary-high-color-filled-border: 0 121 168;
+  --sd-chip--primary-high-color-outline-fill: 237 248 253;
+  --sd-chip--primary-low-color-background: 237 240 244;
+  --sd-chip--primary-low-color-border: var(--sd-color-primary-900);
+  --sd-chip--primary-low-color-filled-border: var(--sd-color-primary-900);
+  --sd-chip--primary-low-color-outline-fill: 237 240 244;
+  --sd-chip--primary-medium-color-background: 237 248 253;
+  --sd-chip--primary-medium-color-border: 0 121 168;
+  --sd-chip--primary-medium-color-filled-border: 0 121 168;
+  --sd-chip--primary-medium-color-outline-fill: 237 248 253;
+  --sd-chip--primary-strong-color-border: 0 121 168;
+  --sd-chip--primary-strong-color-outline-fill: 237 248 253;
+  --sd-chip--primary-subtle-color-background: 237 240 244;
+  --sd-chip--primary-subtle-color-filled-border: var(--sd-color-primary-900);
   --sd-chip--white-color-background: 237 240 244;
-  --sd-chip--white-color-border: var(--sd-color-primary-900);
+  --sd-chip--white-color-filled-border: var(--sd-color-primary-900);
   --sd-chip-border-radius: var(--sd-spacing-1);
+  --sd-chip-border-width: var(--sd-spacing-0\.25);
   --sd-choice-control-font-weight: var(--sd-font-weight-bold);
   --sd-color-accent-100: 244 205 178;
   --sd-color-accent-200: 245 182 145;
@@ -160,6 +186,8 @@
   --sd-color-background-neutral-500: var(--sd-color-neutral-400);
   --sd-color-background-neutral-600: var(--sd-color-neutral-600);
   --sd-color-background-neutral-800: var(--sd-color-neutral-800);
+  --sd-color-background-neutral-blue: 237 248 253;
+  --sd-color-background-neutral-grey: 237 240 244;
   --sd-color-background-primary-100: var(--sd-color-primary-100);
   --sd-color-background-primary-200: var(--sd-color-primary-200);
   --sd-color-background-primary-300: var(--sd-color-primary-300);
@@ -168,6 +196,7 @@
   --sd-color-background-primary: var(--sd-color-primary-800);
   --sd-color-background-success: var(--sd-color-success);
   --sd-color-background-warning: var(--sd-color-warning);
+  --sd-color-background-white-translucent: 255 255 255 / 0;
   --sd-color-background-white: var(--sd-color-white);
   --sd-color-black: 0 0 0 / 0.86;
   --sd-color-border-accent-550: var(--sd-color-primary-600);
@@ -178,6 +207,7 @@
   --sd-color-border-neutral-500: var(--sd-color-neutral-400);
   --sd-color-border-neutral-600: var(--sd-color-neutral-600);
   --sd-color-border-neutral-800: var(--sd-color-neutral-800);
+  --sd-color-border-neutral-blue: 0 121 168;
   --sd-color-border-primary-100: var(--sd-color-primary-100);
   --sd-color-border-primary-200: var(--sd-color-primary-200);
   --sd-color-border-primary-400: var(--sd-color-primary-400);
@@ -280,15 +310,6 @@
   --sd-duration-medium: 300ms;
   --sd-duration-slow: 500ms;
   --sd-duration-x-slow: 750ms;
-  --sd-flag--neutral-200-color-background: 237 240 244;
-  --sd-flag--neutral-200-color-border: var(--sd-color-primary-900);
-  --sd-flag--neutral-300-color-background: 237 248 253;
-  --sd-flag--neutral-300-color-border: 0 121 168;
-  --sd-flag--neutral-500-color-background: 237 248 253;
-  --sd-flag--neutral-500-color-border: 0 121 168;
-  --sd-flag--white-color-background: 237 240 244;
-  --sd-flag--white-color-border: var(--sd-color-primary-900);
-  --sd-flag-border-radius: var(--sd-spacing-1);
   --sd-font-primary: 'GenosGFG';
   --sd-font-weight-bold: 600;
   --sd-font-weight-normal: 400;
@@ -323,7 +344,6 @@
   --sd-map-marker--pin--default-color-background: var(--sd-color-white);
   --sd-map-marker--pin--hover-color-background: var(--sd-color-primary-100);
   --sd-map-marker--pin-color-text: var(--sd-color-primary);
-  --sd-marker-border-width: var(--sd-spacing-0\.25);
   --sd-marker-font-size: 0.875rem;
   --sd-marker-font-weight: var(--sd-font-weight-normal);
   --sd-menu-item--disabled-color-icon-fill: 0 0 0 / 0.2;
@@ -521,6 +541,7 @@
   --sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.4 16.4 8.9-10a1 1 0 1 1 1.4 1.3l-9.6 11a1 1 0 0 1-1.5 0L4.2 13A1 1 0 1 1 5.8 12z" clip-rule="evenodd"/></svg>';
   --sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 13a1 1 0 1 1 0-2h18a1 1 0 1 1 0 2z" clip-rule="evenodd"/></svg>';
   --sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2h.4l.3.3 7 7 .3.7v-.1V21q0 1-1 1H5a1 1 0 0 1-1-1V3q0-1 1-1zm-1 2H6v16h12v-9h-6a1 1 0 0 1-1-.9V4m5.6 5L13 5.4V9z" clip-rule="evenodd"/></svg>';
+  --sd-icon--upload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" d="M20 19v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5a1 1 0 1 1 2 0v4z" clip-rule="evenodd"/><path d="M11 15.02v-8.6L8.46 8.94a1 1 0 0 1-1.41-1.41l4.24-4.25a1 1 0 0 1 1.42 0l4.24 4.25a1 1 0 0 1-1.41 1.41L13 6.41v8.6a1 1 0 0 1-2 0"/></svg>';
   --sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 3.1a1 1 0 0 1 1.5.7V20a1 1 0 0 1-1.4 1v-.1L6.3 17H3a1 1 0 0 1-1-.8V8q0-.9.9-1h3.5zm6.3 2.3Q22 8.7 22 12a12 12 0 0 1-2.2 6.6 1 1 0 1 1-1.6-1A10 10 0 0 0 20 12q0-2.7-1.8-5.4a1 1 0 1 1 1.6-1.2m-6.8.3L7.1 8.9h-.3l-.1.1H4v6h3l.1.1 5.9 3.2zm4.8 2.7A6 6 0 0 1 19 12q0 1.8-1.2 3.6a1 1 0 0 1-1.6-1.2q.8-1.2.8-2.4t-.8-2.4a1 1 0 0 1 1.6-1.2" clip-rule="evenodd"/></svg>';
   --sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.9 19.5A1 1 0 0 1 21 21H3a1 1 0 0 1-.9-1.5l9-16a1 1 0 0 1 1.8 0zM12 6 4.7 19h14.6zm-1 4a1 1 0 1 1 2 0v4a1 1 0 0 1-2 0zm0 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>';
 }
@@ -530,16 +551,32 @@
   /*
    * Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
    * Use the actual used value instead. Example:
-   * Instead of --sd-chip-border-width use --sd-marker-border-width for your overrides.
+   * Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
    */
   --sd-button--size-lg-border-radius: var(--sd-button-border-radius);
   --sd-button--size-md-border-radius: var(--sd-button-border-radius);
   --sd-button--size-sm-border-radius: var(--sd-button-border-radius);
   --sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
   --sd-chip-font-size: var(--sd-marker-font-size);
-  --sd-chip-border-width: var(--sd-marker-border-width);
   --sd-chip-font-weight: var(--sd-marker-font-weight);
-  --sd-flag-border-width: var(--sd-marker-border-width);
+  --sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
+  --sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
+  --sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
+  --sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
+  --sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
+  --sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
+  --sd-chip--primary-500-color-text: var(--sd-color-white);
+  --sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
+  --sd-flag-border-radius: var(--sd-chip-border-radius);
+  --sd-flag-border-width: var(--sd-chip-border-width);
+  --sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
+  --sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
+  --sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
+  --sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
+  --sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
+  --sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
+  --sd-flag--white-color-background: var(--sd-chip--white-color-background);
+  --sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
   --sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
   --sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
   --sd-menu-color-text: var(--sd-menu-item-color-text);

package/dist/tokens.scss

@@ -121,16 +121,42 @@ $sd-carousel__pager-dot-background: var(--sd-carousel__pager-dot-background);
 $sd-carousel__pager-dot-border-width: var(--sd-carousel__pager-dot-border-width);
 $sd-checkbox--invalid-color-background: var(--sd-checkbox--invalid-color-background);
 $sd-checkbox-border-width: var(--sd-checkbox-border-width);
-$sd-chip--primary-200-color-background: var(--sd-chip--primary-200-color-background);
-$sd-chip--primary-200-color-border: var(--sd-chip--primary-200-color-border);
-$sd-chip--primary-300-color-background: var(--sd-chip--primary-300-color-background);
-$sd-chip--primary-300-color-border: var(--sd-chip--primary-300-color-border);
-$sd-chip--primary-500-color-background: var(--sd-chip--primary-500-color-background);
-$sd-chip--primary-500-color-border: var(--sd-chip--primary-500-color-border);
-$sd-chip--primary-500-color-text: var(--sd-chip--primary-500-color-text);
+$sd-chip--neutral-high-color-background: var(--sd-chip--neutral-high-color-background);
+$sd-chip--neutral-high-color-border: var(--sd-chip--neutral-high-color-border);
+$sd-chip--neutral-high-color-filled-border: var(--sd-chip--neutral-high-color-filled-border);
+$sd-chip--neutral-high-color-outline-fill: var(--sd-chip--neutral-high-color-outline-fill);
+$sd-chip--neutral-low-color-background: var(--sd-chip--neutral-low-color-background);
+$sd-chip--neutral-low-color-border: var(--sd-chip--neutral-low-color-border);
+$sd-chip--neutral-low-color-filled-border: var(--sd-chip--neutral-low-color-filled-border);
+$sd-chip--neutral-low-color-outline-fill: var(--sd-chip--neutral-low-color-outline-fill);
+$sd-chip--neutral-medium-color-background: var(--sd-chip--neutral-medium-color-background);
+$sd-chip--neutral-medium-color-border: var(--sd-chip--neutral-medium-color-border);
+$sd-chip--neutral-medium-color-filled-border: var(--sd-chip--neutral-medium-color-filled-border);
+$sd-chip--neutral-medium-color-outline-fill: var(--sd-chip--neutral-medium-color-outline-fill);
+$sd-chip--neutral-strong-color-border: var(--sd-chip--neutral-strong-color-border);
+$sd-chip--neutral-strong-color-outline-fill: var(--sd-chip--neutral-strong-color-outline-fill);
+$sd-chip--neutral-subtle-color-background: var(--sd-chip--neutral-subtle-color-background);
+$sd-chip--neutral-subtle-color-filled-border: var(--sd-chip--neutral-subtle-color-filled-border);
+$sd-chip--primary-high-color-background: var(--sd-chip--primary-high-color-background);
+$sd-chip--primary-high-color-border: var(--sd-chip--primary-high-color-border);
+$sd-chip--primary-high-color-filled-border: var(--sd-chip--primary-high-color-filled-border);
+$sd-chip--primary-high-color-outline-fill: var(--sd-chip--primary-high-color-outline-fill);
+$sd-chip--primary-low-color-background: var(--sd-chip--primary-low-color-background);
+$sd-chip--primary-low-color-border: var(--sd-chip--primary-low-color-border);
+$sd-chip--primary-low-color-filled-border: var(--sd-chip--primary-low-color-filled-border);
+$sd-chip--primary-low-color-outline-fill: var(--sd-chip--primary-low-color-outline-fill);
+$sd-chip--primary-medium-color-background: var(--sd-chip--primary-medium-color-background);
+$sd-chip--primary-medium-color-border: var(--sd-chip--primary-medium-color-border);
+$sd-chip--primary-medium-color-filled-border: var(--sd-chip--primary-medium-color-filled-border);
+$sd-chip--primary-medium-color-outline-fill: var(--sd-chip--primary-medium-color-outline-fill);
+$sd-chip--primary-strong-color-border: var(--sd-chip--primary-strong-color-border);
+$sd-chip--primary-strong-color-outline-fill: var(--sd-chip--primary-strong-color-outline-fill);
+$sd-chip--primary-subtle-color-background: var(--sd-chip--primary-subtle-color-background);
+$sd-chip--primary-subtle-color-filled-border: var(--sd-chip--primary-subtle-color-filled-border);
 $sd-chip--white-color-background: var(--sd-chip--white-color-background);
-$sd-chip--white-color-border: var(--sd-chip--white-color-border);
+$sd-chip--white-color-filled-border: var(--sd-chip--white-color-filled-border);
 $sd-chip-border-radius: var(--sd-chip-border-radius);
+$sd-chip-border-width: var(--sd-chip-border-width);
 $sd-choice-control-font-weight: var(--sd-choice-control-font-weight);
 $sd-color-accent-100: var(--sd-color-accent-100);
 $sd-color-accent-200: var(--sd-color-accent-200);
@@ -157,6 +183,8 @@ $sd-color-background-neutral-400: var(--sd-color-background-neutral-400);
 $sd-color-background-neutral-500: var(--sd-color-background-neutral-500);
 $sd-color-background-neutral-600: var(--sd-color-background-neutral-600);
 $sd-color-background-neutral-800: var(--sd-color-background-neutral-800);
+$sd-color-background-neutral-blue: var(--sd-color-background-neutral-blue);
+$sd-color-background-neutral-grey: var(--sd-color-background-neutral-grey);
 $sd-color-background-primary-100: var(--sd-color-background-primary-100);
 $sd-color-background-primary-200: var(--sd-color-background-primary-200);
 $sd-color-background-primary-300: var(--sd-color-background-primary-300);
@@ -165,6 +193,7 @@ $sd-color-background-primary-800: var(--sd-color-background-primary-800);
 $sd-color-background-primary: var(--sd-color-background-primary);
 $sd-color-background-success: var(--sd-color-background-success);
 $sd-color-background-warning: var(--sd-color-background-warning);
+$sd-color-background-white-translucent: var(--sd-color-background-white-translucent);
 $sd-color-background-white: var(--sd-color-background-white);
 $sd-color-black: var(--sd-color-black);
 $sd-color-border-accent-550: var(--sd-color-border-accent-550);
@@ -175,6 +204,7 @@ $sd-color-border-neutral-400: var(--sd-color-border-neutral-400);
 $sd-color-border-neutral-500: var(--sd-color-border-neutral-500);
 $sd-color-border-neutral-600: var(--sd-color-border-neutral-600);
 $sd-color-border-neutral-800: var(--sd-color-border-neutral-800);
+$sd-color-border-neutral-blue: var(--sd-color-border-neutral-blue);
 $sd-color-border-primary-100: var(--sd-color-border-primary-100);
 $sd-color-border-primary-200: var(--sd-color-border-primary-200);
 $sd-color-border-primary-400: var(--sd-color-border-primary-400);
@@ -277,15 +307,6 @@ $sd-duration-fast: var(--sd-duration-fast);
 $sd-duration-medium: var(--sd-duration-medium);
 $sd-duration-slow: var(--sd-duration-slow);
 $sd-duration-x-slow: var(--sd-duration-x-slow);
-$sd-flag--neutral-200-color-background: var(--sd-flag--neutral-200-color-background);
-$sd-flag--neutral-200-color-border: var(--sd-flag--neutral-200-color-border);
-$sd-flag--neutral-300-color-background: var(--sd-flag--neutral-300-color-background);
-$sd-flag--neutral-300-color-border: var(--sd-flag--neutral-300-color-border);
-$sd-flag--neutral-500-color-background: var(--sd-flag--neutral-500-color-background);
-$sd-flag--neutral-500-color-border: var(--sd-flag--neutral-500-color-border);
-$sd-flag--white-color-background: var(--sd-flag--white-color-background);
-$sd-flag--white-color-border: var(--sd-flag--white-color-border);
-$sd-flag-border-radius: var(--sd-flag-border-radius);
 $sd-font-primary: var(--sd-font-primary);
 $sd-font-weight-bold: var(--sd-font-weight-bold);
 $sd-font-weight-normal: var(--sd-font-weight-normal);
@@ -320,7 +341,6 @@ $sd-map-marker--main-color-background: var(--sd-map-marker--main-color-backgroun
 $sd-map-marker--pin--default-color-background: var(--sd-map-marker--pin--default-color-background);
 $sd-map-marker--pin--hover-color-background: var(--sd-map-marker--pin--hover-color-background);
 $sd-map-marker--pin-color-text: var(--sd-map-marker--pin-color-text);
-$sd-marker-border-width: var(--sd-marker-border-width);
 $sd-marker-font-size: var(--sd-marker-font-size);
 $sd-marker-font-weight: var(--sd-marker-font-weight);
 $sd-menu-item--disabled-color-icon-fill: var(--sd-menu-item--disabled-color-icon-fill);

package/dist/tokens.tailwind.json

@@ -50,7 +50,9 @@
       "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
+      "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -62,7 +64,10 @@
     },
     "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
     "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
-    "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
+    "white": {
+      "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
+      "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
+    },
     "risk": {
       "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
       "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -87,7 +92,8 @@
       "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -151,7 +157,9 @@
       "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
+      "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -163,7 +171,10 @@
     },
     "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
     "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
-    "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
+    "white": {
+      "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
+      "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
+    },
     "risk": {
       "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
       "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -349,7 +360,9 @@
       "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
+      "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -361,7 +374,10 @@
     },
     "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
     "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
-    "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
+    "white": {
+      "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
+      "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
+    },
     "risk": {
       "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
       "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -407,7 +423,8 @@
       "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -475,7 +492,8 @@
       "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -519,7 +537,9 @@
       "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
+      "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -531,7 +551,10 @@
     },
     "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
     "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
-    "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
+    "white": {
+      "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
+      "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
+    },
     "risk": {
       "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
       "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -630,7 +653,8 @@
       "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
       "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
       "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
-      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
+      "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
+      "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
     },
     "primary": {
       "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-design-system/tokens",
-  "version": "7.0.0-next.7",
+  "version": "7.0.0-next.8",
   "description": "Solid Design System: Tokens",
   "publishConfig": {
     "access": "public",