@sebgroup/green-core 1.76.1 → 1.76.3

package/primitives/form-control-header/form-control-header.styles.js

@@ -7,7 +7,8 @@ const styles = css`
       display: flex;
       justify-content: space-between;
       align-items: center;
-      line-height: var(--gds-text-line-height-detail-m);
+      line-height: var(--gds-sys-text-line-height-detail-m);
+      color: var(--gds-sys-color-l2-content-primary);
 
       & > div {
         display: flex;
@@ -16,14 +17,14 @@ const styles = css`
     }
 
     ::slotted(label) {
-      font-weight: var(--gds-text-weight-book);
+      font-weight: var(--gds-sys-text-weight-book);
     }
 
     :host(.size-small) {
       & slot[name='supporting-text'],
       & ::slotted(label) {
-        font-size: var(--gds-text-size-detail-s);
-        line-height: var(--gds-text-line-height-detail-s);
+        font-size: var(--gds-sys-text-size-detail-s);
+        line-height: var(--gds-sys-text-line-height-detail-s);
       }
     }
 
@@ -32,23 +33,23 @@ const styles = css`
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 368ms;
       transition-property: all;
-      font-size: var(--gds-text-size-body-s);
-      line-height: var(--gds-text-line-height-body-s);
-      border-radius: var(--gds-space-xs);
-      background-color: var(--gds-color-l3-background-secondary);
-      color: var(--gds-color-l3-content-tertiary);
+      font-size: var(--gds-sys-text-size-body-s);
+      line-height: var(--gds-sys-text-line-height-body-s);
+      border-radius: var(--gds-sys-space-xs);
+      background-color: var(--gds-sys-color-l3-background-secondary);
+      color: var(--gds-sys-color-l3-content-tertiary);
       max-height: var(--_max-height);
 
       &[aria-hidden='false'] {
-        margin: var(--gds-space-2xs) 0 0 0;
-        padding: var(--gds-space-s) var(--gds-space-m);
+        margin: var(--gds-sys-space-2xs) 0 0 0;
+        padding: var(--gds-sys-space-s) var(--gds-sys-space-m);
       }
 
       &[aria-hidden='true'] {
         max-height: 0;
         opacity: 0;
         translate: 0 2px;
-        padding: 0 var(--gds-space-m);
+        padding: 0 var(--gds-sys-space-m);
         margin: 0;
         overflow: hidden;
       }

package/primitives/listbox/option.styles.js

@@ -5,19 +5,19 @@ const style = css`
 
   @layer base {
     :host(:not(:last-child)) {
-      border-bottom: 1px solid var(--gds-color-l2-border-primary);
+      border-bottom: 1px solid var(--gds-sys-color-l2-border-primary);
     }
 
     :host div {
       display: flex;
       align-items: center;
       user-select: none;
-      padding-inline: var(--gds-space-m);
-      padding-block: var(--gds-space-m);
+      padding-inline: var(--gds-sys-space-m);
+      padding-block: var(--gds-sys-space-m);
       cursor: pointer;
-      font-size: var(--gds-text-size-label-input-large);
-      font-weight: var(--gds-text-weight-regular);
-      line-height: var(--gds-text-line-height-label-input-large);
+      font-size: var(--gds-sys-text-size-label-input-large);
+      font-weight: var(--gds-sys-text-weight-regular);
+      line-height: var(--gds-sys-text-line-height-label-input-large);
       gap: 1ch;
       max-width: 100%;
       box-sizing: border-box;
@@ -26,10 +26,10 @@ const style = css`
       &::before {
         content: ' ';
         display: flex;
-        inset: var(--gds-space-2xs);
+        inset: var(--gds-sys-space-2xs);
         position: absolute;
-        border: var(--gds-space-3xs) solid currentColor;
-        border-radius: var(--gds-space-xs);
+        border: var(--gds-sys-space-3xs) solid currentColor;
+        border-radius: var(--gds-sys-space-xs);
         opacity: 0;
         visitility: hidden;
         pointer-events: none;
@@ -37,19 +37,19 @@ const style = css`
     }
 
     :host([highlighted]) {
-      background-color: var(--gds-color-l2-background-tertiary);
-      color: var(--gds-color-l2-content-tertiary);
+      background-color: var(--gds-sys-color-l2-background-tertiary);
+      color: var(--gds-sys-color-l2-content-tertiary);
     }
 
     :host(:hover:not([highlighted])) div {
-      background-color: var(--gds-color-l3-background-secondary);
+      background-color: var(--gds-sys-color-l3-background-secondary);
     }
 
     :host(:focus-visible) {
       outline: none;
 
       div::before {
-        inset: var(--gds-space-2xs);
+        inset: var(--gds-sys-space-2xs);
         opacity: 1;
         visivility: visible;
       }
@@ -68,17 +68,17 @@ const style = css`
       box-sizing: border-box;
       position: relative;
       aspect-ratio: 1/1;
-      border-radius: var(--gds-space-2xs);
-      border: var(--gds-space-3xs) solid currentColor;
-      padding: var(--gds-space-3xs);
+      border-radius: var(--gds-sys-space-2xs);
+      border: var(--gds-sys-space-3xs) solid currentColor;
+      padding: var(--gds-sys-space-3xs);
 
       &.checked {
         background-color: currentColor;
 
         gds-icon-checkmark {
           &::part(icon) {
-            color: var(--gds-color-l2-content-tertiary);
-            stroke-width: var(--gds-space-2xs);
+            color: var(--gds-sys-color-l2-content-tertiary);
+            stroke-width: var(--gds-sys-space-2xs);
           }
         }
       }

package/primitives/menu/menu-heading.styles.js

@@ -5,12 +5,12 @@ const style = css`
   @layer base {
     :host {
       cursor: pointer;
-      color: var(--gds-color-l3-content-secondary);
-      background-color: var(--gds-color-l3-background-secondary);
-      font-size: var(--gds-text-size-label-input-medium);
-      line-height: var(--gds-text-line-height-label-input-medium);
-      padding-inline: var(--gds-space-m);
-      padding-block: var(--gds-space-xs);
+      color: var(--gds-sys-color-l3-content-secondary);
+      background-color: var(--gds-sys-color-l3-background-secondary);
+      font-size: var(--gds-sys-text-size-label-input-medium);
+      line-height: var(--gds-sys-text-line-height-label-input-medium);
+      padding-inline: var(--gds-sys-space-m);
+      padding-block: var(--gds-sys-space-xs);
     }
   }
 `;

package/primitives/ripple/ripple.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = ":host {\n  --gds-ripple-motion-name: ripple;\n  --gds-ripple-motion: var(--gds-ripple-motion-name) 1.25s\n    cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;\n  border-radius: var(--gds-space-max);\n  contain: strict;\n  display: grid;\n  place-content: center;\n  height: 100%;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n}\n\ndiv {\n  background-color: currentColor;\n  border-radius: var(--gds-space-max);\n  display: flex;\n  height: 100%;\n  left: calc((-50% + var(--gds-ripple-left)) / 4);\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  will-change: transform;\n}\n\ndiv.gds-ripple-effect {\n  animation: var(--gds-ripple-motion);\n}\n\n@keyframes ripple {\n  from {\n    opacity: 0.2;\n    transform: scale(0.6, 1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(1.25);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --gds-ripple-motion-name: none !important;\n  }\n}";
+const styles = ":host {\n  --gds-ripple-motion-name: ripple;\n  --gds-ripple-motion: var(--gds-ripple-motion-name) 1.25s\n    cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;\n  border-radius: var(--gds-sys-space-max);\n  contain: strict;\n  display: grid;\n  place-content: center;\n  height: 100%;\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n}\n\ndiv {\n  background-color: currentColor;\n  border-radius: var(--gds-sys-space-max);\n  display: flex;\n  height: 100%;\n  left: calc((-50% + var(--gds-ripple-left)) / 4);\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  will-change: transform;\n}\n\ndiv.gds-ripple-effect {\n  animation: var(--gds-ripple-motion);\n}\n\n@keyframes ripple {\n  from {\n    opacity: 0.2;\n    transform: scale(0.6, 1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(1.25);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --gds-ripple-motion-name: none !important;\n  }\n}";
 export default styles;

package/primitives/selection-controls/selection-field-label.styles.js

@@ -19,7 +19,7 @@ const styles = css`
 
     .selection-field-container {
       display: flex;
-      gap: var(--gds-space-s);
+      gap: var(--gds-sys-space-s);
       cursor: pointer;
     }
 
@@ -31,14 +31,14 @@ const styles = css`
     }
 
     .primary-label {
-      font-weight: var(--gds-text-weight-book);
+      font-weight: var(--gds-sys-text-weight-book);
       cursor: pointer;
     }
 
     .supporting-text {
       font-size: var(--_font-size-supporting-text);
       line-height: var(--_line-height-supporting-text);
-      font-weight: var(--gds-text-weight-regular);
+      font-weight: var(--gds-sys-text-weight-regular);
     }
   }
 `;

package/shared-styles/form-control-host.style.js

@@ -11,20 +11,20 @@ var form_control_host_style_default = css`
     width: 100%;
     contain: layout;
     isolation: isolate;
-    gap: var(--gds-space-xs);
+    gap: var(--gds-sys-space-xs);
   }
 
   :host([size='small']) {
-    gap: var(--gds-space-2xs);
+    gap: var(--gds-sys-space-2xs);
   }
 
   :host([size='small']) .native-control {
-    font-size: var(--gds-text-size-detail-s);
-    line-height: var(--gds-text-line-height-detail-s);
+    font-size: var(--gds-sys-text-size-detail-s);
+    line-height: var(--gds-sys-text-line-height-detail-s);
   }
 
   :host([disabled]) {
-    color: var(--gds-color-l3-content-disabled);
+    color: var(--gds-sys-color-l3-content-disabled);
     pointer-events: none;
   }
 
@@ -38,25 +38,25 @@ var form_control_host_style_default = css`
     overflow: hidden;
     padding: unset;
     width: 100%;
-    font-size: var(--gds-text-size-detail-m);
-    line-height: var(--gds-text-line-height-detail-m);
+    font-size: var(--gds-sys-text-size-detail-m);
+    line-height: var(--gds-sys-text-line-height-detail-m);
     color: currentColor;
     text-align: left;
   }
 
   :host([size='small']) slot[name='lead']::slotted(*) {
     line-height: 18px;
-    width: var(--gds-space-m);
+    width: var(--gds-sys-space-m);
   }
 
   :host([size='small']) slot[name='lead']::slotted(*) {
-    min-width: var(--gds-space-m);
-    max-width: var(--gds-space-m);
+    min-width: var(--gds-sys-space-m);
+    max-width: var(--gds-sys-space-m);
     display: flex;
   }
 
   slot[name='lead']::slotted(*) {
-    min-width: var(--gds-space-l);
+    min-width: var(--gds-sys-space-l);
     display: flex;
   }
 `;

package/tokens/variables.css.js

@@ -0,0 +1,2 @@
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n  --gds-sys-state-hover-state-layer-opacity: 0.10;\n  --gds-sys-motion-easing-ease-in: cubic-bezier(0.64, 0, 0.78, 0);\n  --gds-sys-motion-easing-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);\n  --gds-sys-motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --gds-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-viewport-xs: 375;\n  --gds-sys-viewport-s: 430;\n  --gds-sys-viewport-m: 768;\n  --gds-sys-viewport-l: 1024;\n  --gds-sys-viewport-xl: 1440;\n  --gds-sys-viewport-2-xl: 2560;\n  --gds-sys-viewport-3-xl: 3840;\n  --gds-sys-shadow-xs-offset-x-1: 0;\n  --gds-sys-shadow-xs-offset-y-1: 0;\n  --gds-sys-shadow-xs-blur-1: 1;\n  --gds-sys-shadow-xs-spread-1: 0;\n  --gds-sys-shadow-xs-color-1: #000000;\n  --gds-sys-shadow-xs-offset-x-2: 0;\n  --gds-sys-shadow-xs-offset-y-2: 0;\n  --gds-sys-shadow-xs-blur-2: 1;\n  --gds-sys-shadow-xs-spread-2: 0;\n  --gds-sys-shadow-xs-color-2: #000000;\n  --gds-sys-shadow-s-offset-x-1: 0;\n  --gds-sys-shadow-s-offset-y-1: 1;\n  --gds-sys-shadow-s-blur-1: 3;\n  --gds-sys-shadow-s-spread-1: 0;\n  --gds-sys-shadow-s-color-1: #000000;\n  --gds-sys-shadow-s-offset-x-2: 0;\n  --gds-sys-shadow-s-offset-y-2: 1;\n  --gds-sys-shadow-s-blur-2: 2;\n  --gds-sys-shadow-s-spread-2: 0;\n  --gds-sys-shadow-s-color-2: #000000;\n  --gds-sys-shadow-m-offset-x-1: 0;\n  --gds-sys-shadow-m-offset-y-1: 4;\n  --gds-sys-shadow-m-blur-1: 8;\n  --gds-sys-shadow-m-spread-1: -2;\n  --gds-sys-shadow-m-color-1: #000000;\n  --gds-sys-shadow-m-offset-x-2: 0;\n  --gds-sys-shadow-m-offset-y-2: 2;\n  --gds-sys-shadow-m-blur-2: 4;\n  --gds-sys-shadow-m-spread-2: -2;\n  --gds-sys-shadow-m-color-2: #000000;\n  --gds-sys-shadow-l-offset-x-1: 0;\n  --gds-sys-shadow-l-offset-y-1: 12;\n  --gds-sys-shadow-l-blur-1: 16;\n  --gds-sys-shadow-l-spread-1: -4;\n  --gds-sys-shadow-l-color-1: #000000;\n  --gds-sys-shadow-l-offset-x-2: 0;\n  --gds-sys-shadow-l-offset-y-2: 4;\n  --gds-sys-shadow-l-blur-2: 6;\n  --gds-sys-shadow-l-spread-2: -2;\n  --gds-sys-shadow-l-color-2: #000000;\n  --gds-sys-shadow-xl-offset-x-1: 0;\n  --gds-sys-shadow-xl-offset-y-1: 20;\n  --gds-sys-shadow-xl-blur-1: 24;\n  --gds-sys-shadow-xl-spread-1: -4;\n  --gds-sys-shadow-xl-color-1: #000000;\n  --gds-sys-shadow-xl-offset-x-2: 0;\n  --gds-sys-shadow-xl-offset-y-2: 8;\n  --gds-sys-shadow-xl-blur-2: 8;\n  --gds-sys-shadow-xl-spread-2: -4;\n  --gds-sys-shadow-xl-color-2: #000000;\n  --gds-sys-text-size-heading-xl: 32px;\n  --gds-sys-text-size-heading-l: 28px;\n  --gds-sys-text-size-heading-m: 24px;\n  --gds-sys-text-size-heading-s: 20px;\n  --gds-sys-text-size-heading-xs: 16px;\n  --gds-sys-text-size-heading-2xs: 14px;\n  --gds-sys-text-size-heading-2xl: 14px;\n  --gds-sys-text-size-detail-m: 16px;\n  --gds-sys-text-size-detail-s: 14px;\n  --gds-sys-text-size-detail-xs: 12px;\n  --gds-sys-text-size-body-l: 20px;\n  --gds-sys-text-size-body-m: 16px;\n  --gds-sys-text-size-body-s: 14px;\n  --gds-sys-text-size-display-2xl: 82px;\n  --gds-sys-text-size-display-xl: 64px;\n  --gds-sys-text-size-display-l: 48px;\n  --gds-sys-text-size-display-m: 36px;\n  --gds-sys-text-size-display-s: 32px;\n  --gds-sys-text-size-preamble-2xl: 32px;\n  --gds-sys-text-size-preamble-xl: 28px;\n  --gds-sys-text-size-preamble-l: 24px;\n  --gds-sys-text-size-preamble-m: 20px;\n  --gds-sys-text-size-preamble-s: 18px;\n  --gds-sys-text-size-preamble-xs: 16px;\n  --gds-sys-text-line-height-heading-xl: 44px;\n  --gds-sys-text-line-height-heading-l: 40px;\n  --gds-sys-text-line-height-heading-m: 32px;\n  --gds-sys-text-line-height-heading-s: 28px;\n  --gds-sys-text-line-height-heading-xs: 24px;\n  --gds-sys-text-line-height-heading-2xs: 20px;\n  --gds-sys-text-line-height-detail-m: 20px;\n  --gds-sys-text-line-height-detail-s: 18px;\n  --gds-sys-text-line-height-detail-xs: 16px;\n  --gds-sys-text-line-height-body-l: 26px;\n  --gds-sys-text-line-height-body-m: 24px;\n  --gds-sys-text-line-height-body-s: 20px;\n  --gds-sys-text-line-height-display-2xl: 90px;\n  --gds-sys-text-line-height-display-xl: 72px;\n  --gds-sys-text-line-height-display-l: 56px;\n  --gds-sys-text-line-height-display-m: 44px;\n  --gds-sys-text-line-height-display-s: 40px;\n  --gds-sys-text-line-height-preamble-2xl: 40px;\n  --gds-sys-text-line-height-preamble-xl: 36px;\n  --gds-sys-text-line-height-preamble-l: 32px;\n  --gds-sys-text-line-height-preamble-m: 28px;\n  --gds-sys-text-line-height-preamble-s: 26px;\n  --gds-sys-text-line-height-preamble-xs: 24px;\n  --gds-sys-text-weight-light: 300;\n  --gds-sys-text-weight-regular: 400;\n  --gds-sys-text-weight-book: 450;\n  --gds-sys-text-weight-medium: 500;\n  --gds-sys-text-weight-bold: 700;\n  --gds-sys-space-0: 0px;\n  --gds-sys-space-4xs: 1px;\n  --gds-sys-space-3xs: 2px;\n  --gds-sys-space-2xs: 4px;\n  --gds-sys-space-xs: 8px;\n  --gds-sys-space-s: 12px;\n  --gds-sys-space-m: 16px;\n  --gds-sys-space-l: 24px;\n  --gds-sys-space-xl: 32px;\n  --gds-sys-space-2xl: 40px;\n  --gds-sys-space-3xl: 48px;\n  --gds-sys-space-4xl: 64px;\n  --gds-sys-space-5xl: 80px;\n  --gds-sys-space-6xl: 96px;\n  --gds-sys-space-7xl: 112px;\n  --gds-sys-space-8xl: 120px;\n  --gds-sys-space-max: 999px;";
+export default styles;

package/tokens/variables.dark.css.js

@@ -0,0 +1,2 @@
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: dark;\n  --gds-sys-color-l1-background-primary: #0e0e0e;\n  --gds-sys-color-l1-background-tertiary: #d7d7d7;\n  --gds-sys-color-l1-background-secondary: #131313;\n  --gds-sys-color-l1-content-positive: #54b561;\n  --gds-sys-color-l1-content-negative: #a63e2a;\n  --gds-sys-color-l1-content-primary: #d7d7d7;\n  --gds-sys-color-l1-content-secondary: #ababab;\n  --gds-sys-color-l1-content-tertiary: #1b1b1b;\n  --gds-sys-color-l2-background-primary: #242424;\n  --gds-sys-color-l2-background-secondary: #242424;\n  --gds-sys-color-l2-background-tertiary: #d7d7d7;\n  --gds-sys-color-l2-background-positive: #1d3f22;\n  --gds-sys-color-l2-background-negative: #4a1c13;\n  --gds-sys-color-l2-background-notice: #152c41;\n  --gds-sys-color-l2-background-warning: #4c3212;\n  --gds-sys-color-l2-background-information: #353535;\n  --gds-sys-color-l2-background-copper-01: #f2efeb;\n  --gds-sys-color-l2-background-copper-02: #332a18;\n  --gds-sys-color-l2-background-purple-01: #f3eff7;\n  --gds-sys-color-l2-background-purple-02: #372b40;\n  --gds-sys-color-l2-background-green-01: #ecf6ed;\n  --gds-sys-color-l2-background-green-02: #1d3f22;\n  --gds-sys-color-l2-background-blue-01: #eaf0f7;\n  --gds-sys-color-l2-background-blue-02: #152c41;\n  --gds-sys-color-l2-content-primary: #d7d7d7;\n  --gds-sys-color-l2-content-secondary: #ababab;\n  --gds-sys-color-l2-content-tertiary: #1b1b1b;\n  --gds-sys-color-l2-content-positive: #54b561;\n  --gds-sys-color-l2-content-negative: #ee8375;\n  --gds-sys-color-l2-content-warning: #f3b274;\n  --gds-sys-color-l2-content-notice: #78a3d5;\n  --gds-sys-color-l2-content-information: #d7d7d7;\n  --gds-sys-color-l2-content-copper-01: #1b1b1b;\n  --gds-sys-color-l2-content-copper-02: #ffffff;\n  --gds-sys-color-l2-content-purple-01: #1b1b1b;\n  --gds-sys-color-l2-content-purple-02: #ffffff;\n  --gds-sys-color-l2-content-green-01: #1b1b1b;\n  --gds-sys-color-l2-content-green-02: #ffffff;\n  --gds-sys-color-l2-content-blue-01: #1b1b1b;\n  --gds-sys-color-l2-content-blue-02: #ffffff;\n  --gds-sys-color-l2-border-primary: #353535;\n  --gds-sys-color-l2-border-secondary: #5e5e5e;\n  --gds-sys-color-l2-border-tertiary: #2c2c2c;\n  --gds-sys-color-l2-border-quarternary: #d7d7d7;\n  --gds-sys-color-l2-border-inversed: #1b1b1b;\n  --gds-sys-color-l3-background-primary: #d7d7d7;\n  --gds-sys-color-l3-background-secondary: #353535;\n  --gds-sys-color-l3-background-tertiary: #424242;\n  --gds-sys-color-l3-background-quarternary: #0e0e0e;\n  --gds-sys-color-l3-background-positive: #54b561;\n  --gds-sys-color-l3-background-positive-secondary: #25512b;\n  --gds-sys-color-l3-background-positive-badge: #306938;\n  --gds-sys-color-l3-background-negative: #c04831;\n  --gds-sys-color-l3-background-negative-secondary: #602418;\n  --gds-sys-color-l3-background-negative-badge: #4a1c13;\n  --gds-sys-color-l3-background-notice: #78a3d5;\n  --gds-sys-color-l3-background-notice-secondary: #1a3853;\n  --gds-sys-color-l3-background-notice-badge: #214769;\n  --gds-sys-color-l3-background-warning: #f3b274;\n  --gds-sys-color-l3-background-warning-secondary: #624017;\n  --gds-sys-color-l3-background-warning-badge: #744c1b;\n  --gds-sys-color-l3-background-information: #d7d7d7;\n  --gds-sys-color-l3-background-information-secondary: #424242;\n  --gds-sys-color-l3-background-information-badge: #616161;\n  --gds-sys-color-l3-background-buy: #3571a6;\n  --gds-sys-color-l3-background-copper-01: #e4ded5;\n  --gds-sys-color-l3-background-copper-02: #42361f;\n  --gds-sys-color-l3-background-purple-01: #e7deee;\n  --gds-sys-color-l3-background-purple-02: #473752;\n  --gds-sys-color-l3-background-green-01: #d7edd9;\n  --gds-sys-color-l3-background-green-02: #25512b;\n  --gds-sys-color-l3-background-blue-01: #d3dfef;\n  --gds-sys-color-l3-background-blue-02: #1a3853;\n  --gds-sys-color-l3-background-disabled: #181818;\n  --gds-sys-color-l3-background-disabled-secondary: #1b1b1b;\n  --gds-sys-color-l3-content-primary: #1b1b1b;\n  --gds-sys-color-l3-content-secondary: #ababab;\n  --gds-sys-color-l3-content-tertiary: #d7d7d7;\n  --gds-sys-color-l3-content-notice: #78a3d5;\n  --gds-sys-color-l3-content-warning: #f3b274;\n  --gds-sys-color-l3-content-information: #d7d7d7;\n  --gds-sys-color-l3-content-buy: #ffffff;\n  --gds-sys-color-l3-content-copper-01: #1b1b1b;\n  --gds-sys-color-l3-content-copper-02: #ffffff;\n  --gds-sys-color-l3-content-purple-01: #1b1b1b;\n  --gds-sys-color-l3-content-purple-02: #ffffff;\n  --gds-sys-color-l3-content-green-01: #1b1b1b;\n  --gds-sys-color-l3-content-green-02: #ffffff;\n  --gds-sys-color-l3-content-blue-01: #1b1b1b;\n  --gds-sys-color-l3-content-blue-02: #ffffff;\n  --gds-sys-color-l3-content-disabled: #5e5e5e;\n  --gds-sys-color-l3-content-positive: #54b561;\n  --gds-sys-color-l3-content-negative: #ee8375;\n  --gds-sys-color-l3-border-primary: #d7d7d7;\n  --gds-sys-color-l3-border-secondary: #ababab;\n  --gds-sys-color-l3-border-tertiary: #1b1b1b;\n  --gds-sys-color-l3-border-negative: #ee8375;\n  --gds-sys-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-sys-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-sys-color-l3-states-light-hover: #d7d7d7 10%;\n  --gds-sys-color-l3-states-light-pressed: #d7d7d7 20%;\n  --gds-sys-color-l3-states-positive-hover: #54b561 10%;\n  --gds-sys-color-l3-states-positive-pressed: #54b561 20%;\n  --gds-sys-color-l3-states-negative-hover: #ee8375 10%;\n  --gds-sys-color-l3-states-negative-pressed: #ee8375 20%;";
+export default styles;

package/tokens/variables.light.css.js

@@ -0,0 +1,2 @@
+const styles = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n\n  color-scheme: light;\n  --gds-sys-color-l1-background-primary: #ffffff;\n  --gds-sys-color-l1-background-tertiary: #1b1b1b;\n  --gds-sys-color-l1-background-secondary: #eeeeee;\n  --gds-sys-color-l1-content-positive: #35723d;\n  --gds-sys-color-l1-content-negative: #a63e2a;\n  --gds-sys-color-l1-content-primary: #1b1b1b;\n  --gds-sys-color-l1-content-secondary: #5e5e5e;\n  --gds-sys-color-l1-content-tertiary: #ffffff;\n  --gds-sys-color-l2-background-primary: #f3f3f3;\n  --gds-sys-color-l2-background-secondary: #ffffff;\n  --gds-sys-color-l2-background-tertiary: #242424;\n  --gds-sys-color-l2-background-positive: #ecf6ed;\n  --gds-sys-color-l2-background-negative: #fcecea;\n  --gds-sys-color-l2-background-notice: #eaf0f7;\n  --gds-sys-color-l2-background-warning: #fcecbc;\n  --gds-sys-color-l2-background-information: #e2e2e2;\n  --gds-sys-color-l2-background-copper-01: #f2efeb;\n  --gds-sys-color-l2-background-copper-02: #332a18;\n  --gds-sys-color-l2-background-purple-01: #f3eff7;\n  --gds-sys-color-l2-background-purple-02: #372b40;\n  --gds-sys-color-l2-background-green-01: #ecf6ed;\n  --gds-sys-color-l2-background-green-02: #1d3f22;\n  --gds-sys-color-l2-background-blue-01: #eaf0f7;\n  --gds-sys-color-l2-background-blue-02: #152c41;\n  --gds-sys-color-l2-content-primary: #1b1b1b;\n  --gds-sys-color-l2-content-secondary: #5e5e5e;\n  --gds-sys-color-l2-content-tertiary: #ffffff;\n  --gds-sys-color-l2-content-positive: #35723d;\n  --gds-sys-color-l2-content-negative: #a63e2a;\n  --gds-sys-color-l2-content-warning: #65581e;\n  --gds-sys-color-l2-content-notice: #005fac;\n  --gds-sys-color-l2-content-information: #1b1b1b;\n  --gds-sys-color-l2-content-copper-01: #1b1b1b;\n  --gds-sys-color-l2-content-copper-02: #ffffff;\n  --gds-sys-color-l2-content-purple-01: #1b1b1b;\n  --gds-sys-color-l2-content-purple-02: #ffffff;\n  --gds-sys-color-l2-content-green-01: #1b1b1b;\n  --gds-sys-color-l2-content-green-02: #ffffff;\n  --gds-sys-color-l2-content-blue-01: #1b1b1b;\n  --gds-sys-color-l2-content-blue-02: #ffffff;\n  --gds-sys-color-l2-border-primary: #d7d7d7;\n  --gds-sys-color-l2-border-secondary: #6f6f6f;\n  --gds-sys-color-l2-border-tertiary: #f9f9f9;\n  --gds-sys-color-l2-border-quarternary: #1b1b1b;\n  --gds-sys-color-l2-border-inversed: #ffffff;\n  --gds-sys-color-l3-background-primary: #003824;\n  --gds-sys-color-l3-background-secondary: #e2e2e2;\n  --gds-sys-color-l3-background-tertiary: #d7d7d7;\n  --gds-sys-color-l3-background-quarternary: #ffffff;\n  --gds-sys-color-l3-background-positive: #35723d;\n  --gds-sys-color-l3-background-positive-secondary: #d7edd9;\n  --gds-sys-color-l3-background-positive-badge: #d7edd9;\n  --gds-sys-color-l3-background-negative: #a63e2a;\n  --gds-sys-color-l3-background-negative-secondary: #fcecea;\n  --gds-sys-color-l3-background-negative-badge: #f8d6d3;\n  --gds-sys-color-l3-background-notice: #005fac;\n  --gds-sys-color-l3-background-notice-secondary: #d3dfef;\n  --gds-sys-color-l3-background-notice-badge: #d3dfef;\n  --gds-sys-color-l3-background-warning: #65581e;\n  --gds-sys-color-l3-background-warning-secondary: #fadf7b;\n  --gds-sys-color-l3-background-warning-badge: #fadf7b;\n  --gds-sys-color-l3-background-information: #1b1b1b;\n  --gds-sys-color-l3-background-information-secondary: #d7d7d7;\n  --gds-sys-color-l3-background-information-badge: #d7d7d7;\n  --gds-sys-color-l3-background-buy: #2e6290;\n  --gds-sys-color-l3-background-copper-01: #e4ded5;\n  --gds-sys-color-l3-background-copper-02: #42361f;\n  --gds-sys-color-l3-background-purple-01: #e7deee;\n  --gds-sys-color-l3-background-purple-02: #473752;\n  --gds-sys-color-l3-background-green-01: #d7edd9;\n  --gds-sys-color-l3-background-green-02: #25512b;\n  --gds-sys-color-l3-background-blue-01: #d3dfef;\n  --gds-sys-color-l3-background-blue-02: #1a3853;\n  --gds-sys-color-l3-background-disabled: #f9f9f9;\n  --gds-sys-color-l3-background-disabled-secondary: #f3f3f3;\n  --gds-sys-color-l3-content-primary: #ffffff;\n  --gds-sys-color-l3-content-secondary: #5e5e5e;\n  --gds-sys-color-l3-content-tertiary: #1b1b1b;\n  --gds-sys-color-l3-content-notice: #005fac;\n  --gds-sys-color-l3-content-warning: #65581e;\n  --gds-sys-color-l3-content-information: #1b1b1b;\n  --gds-sys-color-l3-content-buy: #ffffff;\n  --gds-sys-color-l3-content-copper-01: #1b1b1b;\n  --gds-sys-color-l3-content-copper-02: #ffffff;\n  --gds-sys-color-l3-content-purple-01: #1b1b1b;\n  --gds-sys-color-l3-content-purple-02: #ffffff;\n  --gds-sys-color-l3-content-green-01: #1b1b1b;\n  --gds-sys-color-l3-content-green-02: #ffffff;\n  --gds-sys-color-l3-content-blue-01: #1b1b1b;\n  --gds-sys-color-l3-content-blue-02: #ffffff;\n  --gds-sys-color-l3-content-disabled: #ababab;\n  --gds-sys-color-l3-content-positive: #35723d;\n  --gds-sys-color-l3-content-negative: #a63e2a;\n  --gds-sys-color-l3-border-primary: #1b1b1b;\n  --gds-sys-color-l3-border-secondary: #6f6f6f;\n  --gds-sys-color-l3-border-tertiary: #d7d7d7;\n  --gds-sys-color-l3-border-negative: #a63e2a;\n  --gds-sys-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-sys-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-sys-color-l3-states-light-hover: #1b1b1b 10%;\n  --gds-sys-color-l3-states-light-pressed: #1b1b1b 20%;\n  --gds-sys-color-l3-states-positive-hover: #35723d 10%;\n  --gds-sys-color-l3-states-positive-pressed: #35723d 20%;\n  --gds-sys-color-l3-states-negative-hover: #a63e2a 10%;\n  --gds-sys-color-l3-states-negative-pressed: #a63e2a 20%;";
+export default styles;

package/tokens.style.d.ts

@@ -1,4 +1,4 @@
-import colorsDark from '../../../dist/libs/tokens/internal/dark.css?inline';
-import colorsLight from '../../../dist/libs/tokens/internal/light.css?inline';
+import colorsDark from '../../../dist/libs/tokens/2023/internal/variables.dark.css?inline';
+import colorsLight from '../../../dist/libs/tokens/2023/internal/variables.light.css?inline';
 declare const tokens: import("lit").CSSResult[];
 export { tokens, colorsLight, colorsDark };

package/tokens.style.js

@@ -1,23 +1,16 @@
 import "./chunks/chunk.QTSIPXV3.js";
 import { css, unsafeCSS } from "lit";
-import colorsDark from "./tokens/dark.css.js";
-import colorsLight from "./tokens/light.css.js";
-import motionTokens from "./tokens/motion.css.js";
-import shadowTokens from "./tokens/shadow.css.js";
-import sizeTokens from "./tokens/size.css.js";
-import textTokens from "./tokens/text.css.js";
+import base from "./tokens/variables.css.js";
+import colorsDark from "./tokens/variables.dark.css.js";
+import colorsLight from "./tokens/variables.light.css.js";
 import { GlobalStylesRegistry } from "./utils/global-styles.js";
-const tokens = [
-  unsafeCSS(sizeTokens),
-  unsafeCSS(textTokens),
-  unsafeCSS(motionTokens),
-  unsafeCSS(shadowTokens)
-];
+const tokens = [unsafeCSS(base)];
 GlobalStylesRegistry.instance.injectGlobalStyles(
   "root-tokens",
   css`
     :root,
     :root[gds-theme='light'] {
+      ${unsafeCSS(base)}
       ${unsafeCSS(colorsLight)}
     }
     :root[gds-theme='dark'] {

package/utils/decorators/style-expression-property.d.ts

@@ -11,7 +11,7 @@ export type StyleExpressionPropertyOptions = {
      * attached to a property named `padding`, the default name of the CSS property will
      * also be `padding`. This option overrides that. */
     property?: string;
-    /** A function that takes a value and returns a string. Defaults to `(value) => 'var(--gds-space-${value})'`
+    /** A function that takes a value and returns a string. Defaults to `(value) => 'var(--gds-sys-space-${value})'`
      * This can be used to resolve the values into CSS variables for example. */
     valueTemplate?: (value: string) => string;
     /** A function that takes a property name and an array of values and returns a string. Defaults to

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-304b4b";
+const VER_SUFFIX = "-c1c41a";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/utils/helpers/style-expression-helpers.js

@@ -4,7 +4,7 @@ function parseColorValue(value, context, level) {
     return value;
   }
   const [colorName, transparency] = value.split("/");
-  const colorVar = `var(--gds-color-l${level}-${context}-${colorName})`;
+  const colorVar = `var(--gds-sys-color-l${level}-${context}-${colorName})`;
   return transparency ? `color-mix(in srgb, ${colorVar} ${parseFloat(transparency) * 100}%, transparent 0%)` : colorVar;
 }
 function forColorTokens(context) {
@@ -15,15 +15,15 @@ function forColorTokens(context) {
   };
 }
 const forSpaceTokens = {
-  valueTemplate: (value) => `var(--gds-space-${value}, 0)`
+  valueTemplate: (value) => `var(--gds-sys-space-${value}, 0)`
 };
 const forSpaceTokensAndCustomValues = {
-  valueTemplate: (value) => `var(--gds-space-${sanitizeVariableName(value)}, ${value})`
+  valueTemplate: (value) => `var(--gds-sys-space-${sanitizeVariableName(value)}, ${value})`
 };
 const forSpaceTokensSupportingNegative = {
   valueTemplate: (v) => {
     const sign = v.startsWith("-") ? "neg" : "pos";
-    const val = sign == "pos" ? `var(--gds-space-${v})` : `calc(var(--gds-space-${v.substring(1)}) * -1)`;
+    const val = sign == "pos" ? `var(--gds-sys-space-${v})` : `calc(var(--gds-sys-space-${v.substring(1)}) * -1)`;
     return v === "auto" ? "auto" : val;
   },
   styleTemplate: (prop, values) => {

package/tokens/dark.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\ncolor-scheme: dark;\n  --gds-color-l1-background-primary: #0e0e0e;\n  --gds-color-l1-background-tertiary: #d7d7d7;\n  --gds-color-l1-background-secondary: #131313;\n  --gds-color-l1-content-positive: #54b561;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #d7d7d7;\n  --gds-color-l1-content-secondary: #ababab;\n  --gds-color-l1-content-tertiary: #1b1b1b;\n  --gds-color-l2-background-primary: #242424;\n  --gds-color-l2-background-secondary: #242424;\n  --gds-color-l2-background-tertiary: #d7d7d7;\n  --gds-color-l2-background-positive: #1d3f22;\n  --gds-color-l2-background-negative: #4a1c13;\n  --gds-color-l2-background-notice: #152c41;\n  --gds-color-l2-background-warning: #4c3212;\n  --gds-color-l2-background-information: #353535;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #d7d7d7;\n  --gds-color-l2-content-secondary: #ababab;\n  --gds-color-l2-content-tertiary: #1b1b1b;\n  --gds-color-l2-content-positive: #54b561;\n  --gds-color-l2-content-negative: #ee8375;\n  --gds-color-l2-content-warning: #f3b274;\n  --gds-color-l2-content-notice: #78a3d5;\n  --gds-color-l2-content-information: #d7d7d7;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #353535;\n  --gds-color-l2-border-secondary: #5e5e5e;\n  --gds-color-l2-border-tertiary: #2c2c2c;\n  --gds-color-l2-border-quarternary: #d7d7d7;\n  --gds-color-l2-border-inversed: #1b1b1b;\n  --gds-color-l3-background-primary: #d7d7d7;\n  --gds-color-l3-background-secondary: #353535;\n  --gds-color-l3-background-tertiary: #424242;\n  --gds-color-l3-background-quarternary: #0e0e0e;\n  --gds-color-l3-background-positive: #54b561;\n  --gds-color-l3-background-positive-secondary: #25512b;\n  --gds-color-l3-background-positive-badge: #306938;\n  --gds-color-l3-background-negative: #c04831;\n  --gds-color-l3-background-negative-secondary: #602418;\n  --gds-color-l3-background-negative-badge: #4A1C13;\n  --gds-color-l3-background-notice: #78a3d5;\n  --gds-color-l3-background-notice-secondary: #1A3853;\n  --gds-color-l3-background-notice-badge: #214769;\n  --gds-color-l3-background-warning: #f3b274;\n  --gds-color-l3-background-warning-secondary: #624017;\n  --gds-color-l3-background-warning-badge: #744C1B;\n  --gds-color-l3-background-information: #d7d7d7;\n  --gds-color-l3-background-information-secondary: #424242;\n  --gds-color-l3-background-information-badge: #616161;\n  --gds-color-l3-background-buy: #3571a6;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #181818;\n  --gds-color-l3-background-disabled-secondary: #1b1b1b;\n  --gds-color-l3-content-primary: #1b1b1b;\n  --gds-color-l3-content-secondary: #ababab;\n  --gds-color-l3-content-tertiary: #d7d7d7;\n  --gds-color-l3-content-notice: #78a3d5;\n  --gds-color-l3-content-warning: #f3b274;\n  --gds-color-l3-content-information: #d7d7d7;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #5e5e5e;\n  --gds-color-l3-content-positive: #54b561;\n  --gds-color-l3-content-negative: #ee8375;\n  --gds-color-l3-border-primary: #d7d7d7;\n  --gds-color-l3-border-secondary: #ababab;\n  --gds-color-l3-border-tertiary: #1b1b1b;\n  --gds-color-l3-border-negative: #ee8375;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #d7d7d7 10%;\n  --gds-color-l3-states-light-pressed: #d7d7d7 20%;\n  --gds-color-l3-states-positive-hover: #54b561 10%;\n  --gds-color-l3-states-positive-pressed: #54b561 20%;\n  --gds-color-l3-states-negative-hover: #ee8375 10%;\n  --gds-color-l3-states-negative-pressed: #ee8375 20%;\n";
-export default styles;

package/tokens/light.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\ncolor-scheme: light;\n  --gds-color-l1-background-primary: #ffffff;\n  --gds-color-l1-background-tertiary: #1b1b1b;\n  --gds-color-l1-background-secondary: #eeeeee;\n  --gds-color-l1-content-positive: #35723d;\n  --gds-color-l1-content-negative: #a63e2a;\n  --gds-color-l1-content-primary: #1b1b1b;\n  --gds-color-l1-content-secondary: #5e5e5e;\n  --gds-color-l1-content-tertiary: #ffffff;\n  --gds-color-l2-background-primary: #f3f3f3;\n  --gds-color-l2-background-secondary: #ffffff;\n  --gds-color-l2-background-tertiary: #242424;\n  --gds-color-l2-background-positive: #ecf6ed;\n  --gds-color-l2-background-negative: #fcecea;\n  --gds-color-l2-background-notice: #eaf0f7;\n  --gds-color-l2-background-warning: #fcecbc;\n  --gds-color-l2-background-information: #e2e2e2;\n  --gds-color-l2-background-copper-01: #f2efeb;\n  --gds-color-l2-background-copper-02: #332a18;\n  --gds-color-l2-background-purple-01: #f3eff7;\n  --gds-color-l2-background-purple-02: #372b40;\n  --gds-color-l2-background-green-01: #ecf6ed;\n  --gds-color-l2-background-green-02: #1d3f22;\n  --gds-color-l2-background-blue-01: #eaf0f7;\n  --gds-color-l2-background-blue-02: #152c41;\n  --gds-color-l2-content-primary: #1b1b1b;\n  --gds-color-l2-content-secondary: #5e5e5e;\n  --gds-color-l2-content-tertiary: #ffffff;\n  --gds-color-l2-content-positive: #35723d;\n  --gds-color-l2-content-negative: #a63e2a;\n  --gds-color-l2-content-warning: #65581e;\n  --gds-color-l2-content-notice: #005fac;\n  --gds-color-l2-content-information: #1b1b1b;\n  --gds-color-l2-content-copper-01: #1b1b1b;\n  --gds-color-l2-content-copper-02: #ffffff;\n  --gds-color-l2-content-purple-01: #1b1b1b;\n  --gds-color-l2-content-purple-02: #ffffff;\n  --gds-color-l2-content-green-01: #1b1b1b;\n  --gds-color-l2-content-green-02: #ffffff;\n  --gds-color-l2-content-blue-01: #1b1b1b;\n  --gds-color-l2-content-blue-02: #ffffff;\n  --gds-color-l2-border-primary: #d7d7d7;\n  --gds-color-l2-border-secondary: #6f6f6f;\n  --gds-color-l2-border-tertiary: #f9f9f9;\n  --gds-color-l2-border-quarternary: #1b1b1b;\n  --gds-color-l2-border-inversed: #ffffff;\n  --gds-color-l3-background-primary: #1b1b1b;\n  --gds-color-l3-background-secondary: #e2e2e2;\n  --gds-color-l3-background-tertiary: #d7d7d7;\n  --gds-color-l3-background-quarternary: #ffffff;\n  --gds-color-l3-background-positive: #35723d;\n  --gds-color-l3-background-positive-secondary: #d7edd9;\n  --gds-color-l3-background-positive-badge: #d7edd9;\n  --gds-color-l3-background-negative: #a63e2a;\n  --gds-color-l3-background-negative-secondary: #fcecea;\n  --gds-color-l3-background-negative-badge: #f8d6d3;\n  --gds-color-l3-background-notice: #005fac;\n  --gds-color-l3-background-notice-secondary: #d3dfef;\n  --gds-color-l3-background-notice-badge: #d3dfef;\n  --gds-color-l3-background-warning: #65581e;\n  --gds-color-l3-background-warning-secondary: #fadf7b;\n  --gds-color-l3-background-warning-badge: #fadf7b;\n  --gds-color-l3-background-information: #1b1b1b;\n  --gds-color-l3-background-information-secondary: #d7d7d7;\n  --gds-color-l3-background-information-badge: #d7d7d7;\n  --gds-color-l3-background-buy: #2e6290;\n  --gds-color-l3-background-copper-01: #e4ded5;\n  --gds-color-l3-background-copper-02: #42361f;\n  --gds-color-l3-background-purple-01: #e7deee;\n  --gds-color-l3-background-purple-02: #473752;\n  --gds-color-l3-background-green-01: #d7edd9;\n  --gds-color-l3-background-green-02: #25512b;\n  --gds-color-l3-background-blue-01: #d3dfef;\n  --gds-color-l3-background-blue-02: #1a3853;\n  --gds-color-l3-background-disabled: #f9f9f9;\n  --gds-color-l3-background-disabled-secondary: #f3f3f3;\n  --gds-color-l3-content-primary: #ffffff;\n  --gds-color-l3-content-secondary: #5e5e5e;\n  --gds-color-l3-content-tertiary: #1b1b1b;\n  --gds-color-l3-content-notice: #005fac;\n  --gds-color-l3-content-warning: #65581e;\n  --gds-color-l3-content-information: #1b1b1b;\n  --gds-color-l3-content-buy: #ffffff;\n  --gds-color-l3-content-copper-01: #1b1b1b;\n  --gds-color-l3-content-copper-02: #ffffff;\n  --gds-color-l3-content-purple-01: #1b1b1b;\n  --gds-color-l3-content-purple-02: #ffffff;\n  --gds-color-l3-content-green-01: #1b1b1b;\n  --gds-color-l3-content-green-02: #ffffff;\n  --gds-color-l3-content-blue-01: #1b1b1b;\n  --gds-color-l3-content-blue-02: #ffffff;\n  --gds-color-l3-content-disabled: #ababab;\n  --gds-color-l3-content-positive: #35723d;\n  --gds-color-l3-content-negative: #a63e2a;\n  --gds-color-l3-border-primary: #1b1b1b;\n  --gds-color-l3-border-secondary: #6f6f6f;\n  --gds-color-l3-border-tertiary: #d7d7d7;\n  --gds-color-l3-border-negative: #a63e2a;\n  --gds-color-l3-states-dark-hover: #ffffff 15%;\n  --gds-color-l3-states-dark-pressed: #ffffff 25%;\n  --gds-color-l3-states-light-hover: #1b1b1b 10%;\n  --gds-color-l3-states-light-pressed: #1b1b1b 20%;\n  --gds-color-l3-states-positive-hover: #35723d 10%;\n  --gds-color-l3-states-positive-pressed: #35723d 20%;\n  --gds-color-l3-states-negative-hover: #a63e2a 10%;\n  --gds-color-l3-states-negative-pressed: #a63e2a 20%;\n";
-export default styles;

package/tokens/motion.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-sys-motion-duration-slowest: 1.5s;\n  --gds-sys-motion-duration-slow: 1s;\n  --gds-sys-motion-duration-default: .5s;\n  --gds-sys-motion-duration-fast: .4s;\n  --gds-sys-motion-duration-fastest: .2s;\n  --gds-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n  --gds-sys-motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --gds-sys-motion-easing-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);\n  --gds-sys-motion-easing-ease-in: cubic-bezier(0.64, 0, 0.78, 0);\n}\n";
-export default styles;

package/tokens/shadow.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n--gds-shadow-xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);\n--gds-shadow-s: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n--gds-shadow-m: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);\n--gds-shadow-l: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);\n--gds-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);\n}\n";
-export default styles;

package/tokens/size.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-space-max: 999px;\n  --gds-space-8xl: 120px;\n  --gds-space-7xl: 112px;\n  --gds-space-6xl: 96px;\n  --gds-space-5xl: 80px;\n  --gds-space-4xl: 64px;\n  --gds-space-3xl: 48px;\n  --gds-space-2xl: 40px;\n  --gds-space-xl: 32px;\n  --gds-space-l: 24px;\n  --gds-space-m: 16px;\n  --gds-space-s: 12px;\n  --gds-space-xs: 8px;\n  --gds-space-2xs: 4px;\n  --gds-space-3xs: 2px;\n  --gds-space-4xs: 1px;\n  --gds-space-0: 0px;\n}\n";
-export default styles;

package/tokens/text.css.js

@@ -1,2 +0,0 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 16 Apr 2025 11:48:17 GMT\n */\n\n:host {\n  --gds-text-weight-bold: 700;\n  --gds-text-weight-medium: 500;\n  --gds-text-weight-book: 450;\n  --gds-text-weight-regular: 400;\n  --gds-text-weight-light: 300;\n  --gds-text-size-preamble-xs: 1rem;\n  --gds-text-size-preamble-s: 1.125rem;\n  --gds-text-size-preamble-m: 1.25rem;\n  --gds-text-size-preamble-l: 1.5rem;\n  --gds-text-size-preamble-xl: 1.75rem;\n  --gds-text-size-preamble-2xl: 2rem;\n  --gds-text-size-display-s: 2rem;\n  --gds-text-size-display-m: 2.25rem;\n  --gds-text-size-display-l: 3rem;\n  --gds-text-size-display-xl: 4rem;\n  --gds-text-size-display-2xl: 5.125rem;\n  --gds-text-size-body-s: 0.875rem;\n  --gds-text-size-body-m: 1rem;\n  --gds-text-size-body-l: 1.25rem;\n  --gds-text-size-detail-xs: 0.75rem;\n  --gds-text-size-detail-s: 0.875rem;\n  --gds-text-size-detail-m: 1rem;\n  --gds-text-size-heading-2xl: 0.875rem;\n  --gds-text-size-heading-2xs: 0.875rem;\n  --gds-text-size-heading-xs: 1rem;\n  --gds-text-size-heading-s: 1.25rem;\n  --gds-text-size-heading-m: 1.5rem;\n  --gds-text-size-heading-l: 1.75rem;\n  --gds-text-size-heading-xl: 2rem;\n  --gds-text-line-height-preamble-xs: 1.5rem;\n  --gds-text-line-height-preamble-s: 1.625rem;\n  --gds-text-line-height-preamble-m: 1.75rem;\n  --gds-text-line-height-preamble-l: 2rem;\n  --gds-text-line-height-preamble-xl: 2.25rem;\n  --gds-text-line-height-preamble-2xl: 2.5rem;\n  --gds-text-line-height-display-s: 2.5rem;\n  --gds-text-line-height-display-m: 2.75rem;\n  --gds-text-line-height-display-l: 3.5rem;\n  --gds-text-line-height-display-xl: 4.5rem;\n  --gds-text-line-height-display-2xl: 5.625rem;\n  --gds-text-line-height-body-s: 1.25rem;\n  --gds-text-line-height-body-m: 1.5rem;\n  --gds-text-line-height-body-l: 1.625rem;\n  --gds-text-line-height-detail-xs: 1rem;\n  --gds-text-line-height-detail-s: 1.125rem;\n  --gds-text-line-height-detail-m: 1.25rem;\n  --gds-text-line-height-heading-2xs: 1.25rem;\n  --gds-text-line-height-heading-xs: 1.5rem;\n  --gds-text-line-height-heading-s: 1.75rem;\n  --gds-text-line-height-heading-m: 2rem;\n  --gds-text-line-height-heading-l: 2.5rem;\n  --gds-text-line-height-heading-xl: 2.75rem;\n}\n";
-export default styles;