Update tokens

packages/tokens/README.md

@@ -43,6 +43,39 @@ a DOM element as far up in the DOM tree as possible.
 </body>
 ```
 
+## Usage with Tailwind CSS v4
+
+Tailwind CSS v4 uses a CSS-first configuration. Meteor Tokens provides pre-configured CSS files that use the new `@theme` block to automatically register utility classes.
+
+### Configuration
+
+In your main CSS entry point, import the Tailwind-ready CSS files after the `@import "tailwindcss";` directive:
+
+```css
+@import "tailwindcss";
+@import "@shopware-ag/meteor-tokens/tailwind";
+@import "@shopware-ag/meteor-tokens/tailwind/administration";
+```
+
+### Usage
+
+Once imported, the tokens are automatically available as utility classes. For example:
+
+```html
+<button class="bg-interaction-primary-default text-text-primary-inverse px-scale-size-16 py-scale-size-8 rounded-border-radius-button">
+  Click me
+</button>
+```
+
+### Source Detection
+
+Tailwind v4 automatically scans your project for class names but ignores `node_modules` by default. If you are using these tokens in an external library or a monorepo setup, you may need to [explicitly register the package as a source](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) to ensure all utility classes are detected:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@shopware-ag/meteor-tokens";
+```
+
 ## License
 
 Shopware 6 is completely free and released under the [MIT License](./LICENSE.md).

packages/tokens/deliverables/administration/dark.css

@@ -21,7 +21,7 @@
   --color-elevation-surface-frame: #1e1e24;
   --color-elevation-surface-backdrop: #101013;
   --color-elevation-surface-floating: #ffffff;
-  --color-elevation-backdrop-default: #10101399;
+  --color-elevation-backdrop-default: #101013e5;
   --color-elevation-floating-default: #ffffff;
   --color-elevation-shadow-default: #1010131a;
   --color-background-primary-default: #1e1e24;
@@ -111,19 +111,19 @@
   --font-line-height-xl: 2rem;
   --font-line-height-2xl: 2.25rem;
   --font-line-height-3xl: 2.5rem;
-  --border-radius-card: 0.5rem;
-  --border-radius-overlay: 0.25rem;
-  --border-radius-button: 0.25rem;
-  --border-radius-checkbox: 0.25rem;
-  --border-radius-none: 0rem;
-  --border-radius-2xs: 0.125rem;
-  --border-radius-xs: 0.25rem;
-  --border-radius-s: 0.375rem;
-  --border-radius-m: 0.5rem;
-  --border-radius-l: 0.75rem;
-  --border-radius-xl: 1rem;
-  --border-radius-2xl: 1.25rem;
-  --border-radius-3xl: 1.5rem;
-  --border-radius-4xl: 2rem;
-  --border-radius-round: 624.9375rem;
+  --radius-card: 0.5rem;
+  --radius-overlay: 0.25rem;
+  --radius-button: 0.25rem;
+  --radius-checkbox: 0.25rem;
+  --radius-none: 0rem;
+  --radius-2xs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-s: 0.375rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-round: 624.9375rem;
 }

packages/tokens/deliverables/administration/light.css

@@ -111,19 +111,19 @@
   --font-line-height-xl: 2rem;
   --font-line-height-2xl: 2.25rem;
   --font-line-height-3xl: 2.5rem;
-  --border-radius-card: 0.5rem;
-  --border-radius-overlay: 0.25rem;
-  --border-radius-button: 0.25rem;
-  --border-radius-checkbox: 0.25rem;
-  --border-radius-none: 0rem;
-  --border-radius-2xs: 0.125rem;
-  --border-radius-xs: 0.25rem;
-  --border-radius-s: 0.375rem;
-  --border-radius-m: 0.5rem;
-  --border-radius-l: 0.75rem;
-  --border-radius-xl: 1rem;
-  --border-radius-2xl: 1.25rem;
-  --border-radius-3xl: 1.5rem;
-  --border-radius-4xl: 2rem;
-  --border-radius-round: 624.9375rem;
+  --radius-card: 0.5rem;
+  --radius-overlay: 0.25rem;
+  --radius-button: 0.25rem;
+  --radius-checkbox: 0.25rem;
+  --radius-none: 0rem;
+  --radius-2xs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-s: 0.375rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-round: 624.9375rem;
 }

packages/tokens/deliverables/tailwind-administration.css

@@ -0,0 +1,137 @@
+@theme {
+  --color-interaction-primary-default: light-dark(#0870ff, #0870ff);
+  --color-interaction-primary-hover: light-dark(#005cd7, #005cd7);
+  --color-interaction-primary-pressed: light-dark(#0042a0, #0042a0);
+  --color-interaction-primary-disabled: light-dark(#76aaff, #00296a);
+  --color-interaction-secondary-default: light-dark(#ffffff, #1e1e24);
+  --color-interaction-secondary-hover: light-dark(#f2f3f8, #26262b);
+  --color-interaction-secondary-pressed: light-dark(#e2e3e9, #2d2e32);
+  --color-interaction-secondary-disabled: light-dark(#e2e3e9, #3d3e42);
+  --color-interaction-secondary-dark: light-dark(#f2f3f8, #2d2e32);
+  --color-interaction-critical-default: light-dark(#e2262a, #e2262a);
+  --color-interaction-critical-hover: light-dark(#c20017, #c20017);
+  --color-interaction-critical-pressed: light-dark(#90000e, #90000e);
+  --color-interaction-critical-disabled: light-dark(#ffa9a0, #5e0006);
+  --color-elevation-surface-sunken: light-dark(#fafbfe, #09090b);
+  --color-elevation-surface-default: light-dark(#ffffff, #101013);
+  --color-elevation-surface-selected: light-dark(#cdced4, #2d2e32);
+  --color-elevation-surface-hover: light-dark(#e2e3e9, #3d3e42);
+  --color-elevation-surface-raised: light-dark(#ffffff, #141418);
+  --color-elevation-surface-overlay: light-dark(#ffffff, #26262b);
+  --color-elevation-surface-frame: light-dark(#fafbfe, #1e1e24);
+  --color-elevation-surface-backdrop: light-dark(#101013, #101013);
+  --color-elevation-surface-floating: light-dark(#ffffff, #ffffff);
+  --color-elevation-backdrop-default: light-dark(#10101399, #101013e5);
+  --color-elevation-floating-default: light-dark(#26262b, #ffffff);
+  --color-elevation-shadow-default: light-dark(#1010131a, #1010131a);
+  --color-background-primary-default: light-dark(#ffffff, #1e1e24);
+  --color-background-primary-disabled: light-dark(#2d2e32, #2d2e32);
+  --color-background-secondary-default: light-dark(#fafbfe, #26262b);
+  --color-background-tertiary-default: light-dark(#f2f3f8, #2d2e32);
+  --color-background-brand-default: light-dark(#f0f6ff, #00153e);
+  --color-background-critical-default: light-dark(#fff2f0, #360002);
+  --color-background-critical-dark: light-dark(#360002, #360002);
+  --color-background-attention-default: light-dark(#fff3e3, #241500);
+  --color-background-positive-default: light-dark(#e1ffe0, #002002);
+  --color-background-accent-default: light-dark(#e4e1ff, #1c0049);
+  --color-icon-primary-default: light-dark(#1e1e24, #fafbfe);
+  --color-icon-primary-disabled: light-dark(#b9babf, #696a6e);
+  --color-icon-primary-inverse: light-dark(#fafbfe, #1e1e24);
+  --color-icon-secondary-default: light-dark(#696a6e, #a5a6ab);
+  --color-icon-secondary-disabled: light-dark(#b9babf, #696a6e);
+  --color-icon-secondary-inverse: light-dark(#a5a6ab, #696a6e);
+  --color-icon-brand-default: light-dark(#0870ff, #0870ff);
+  --color-icon-brand-hover: light-dark(#005cd7, #005cd7);
+  --color-icon-brand-pressed: light-dark(#0042a0, #0042a0);
+  --color-icon-brand-disabled: light-dark(#76aaff, #0042a0);
+  --color-icon-critical-default: light-dark(#e2262a, #e2262a);
+  --color-icon-critical-hover: light-dark(#c20017, #c20017);
+  --color-icon-critical-disabled: light-dark(#ff7f74, #5e0006);
+  --color-icon-attention-default: light-dark(#fbaf18, #ffbc51);
+  --color-icon-positive-default: light-dark(#36d046, #4dde58);
+  --color-icon-accent-default: light-dark(#633bc6, #b5a8ff);
+  --color-icon-static-default: light-dark(#ffffff, #ffffff);
+  --color-icon-static-dark: light-dark(#09090b, #09090b);
+  --color-icon-inverse-default: light-dark(#1e1e24, #1e1e24);
+  --color-border-primary-default: light-dark(#cdced4, #3d3e42);
+  --color-border-secondary-default: light-dark(#e2e3e9, #26262b);
+  --color-border-brand-selected: light-dark(#0870ff, #0870ff);
+  --color-border-brand-default: light-dark(#0870ff, #0870ff);
+  --color-border-brand-disabled: light-dark(#76aaff, #0042a0);
+  --color-border-critical-default: light-dark(#e2262a, #e2262a);
+  --color-border-critical-dark: light-dark(#5e0006, #5e0006);
+  --color-border-critical-disabled: light-dark(#ff7f74, #90000e);
+  --color-border-attention-default: light-dark(#fbaf18, #cc8c00);
+  --color-border-positive-default: light-dark(#36d046, #00ab26);
+  --color-border-accent-default: light-dark(#a694ff, #886fe9);
+  --color-text-primary-default: light-dark(#1e1e24, #fafbfe);
+  --color-text-primary-disabled: light-dark(#b9babf, #696a6e);
+  --color-text-primary-inverse: light-dark(#fafbfe, #1e1e24);
+  --color-text-secondary-default: light-dark(#696a6e, #a5a6ab);
+  --color-text-secondary-disabled: light-dark(#b9babf, #696a6e);
+  --color-text-secondary-inverse: light-dark(#a5a6ab, #696a6e);
+  --color-text-tertiary-default: light-dark(#a5a6ab, #a5a6ab);
+  --color-text-brand-default: light-dark(#0870ff, #4a8fff);
+  --color-text-brand-hover: light-dark(#005cd7, #0870ff);
+  --color-text-brand-pressed: light-dark(#0042a0, #005cd7);
+  --color-text-brand-disabled: light-dark(#76aaff, #0042a0);
+  --color-text-brand-inverse: light-dark(#4a8fff, #0870ff);
+  --color-text-critical-default: light-dark(#e2262a, #fc4945);
+  --color-text-critical-hover: light-dark(#c20017, #e2262a);
+  --color-text-critical-pressed: light-dark(#90000e, #c20017);
+  --color-text-critical-disabled: light-dark(#ff7f74, #90000e);
+  --color-text-critical-dark: light-dark(#fc4945, #fc4945);
+  --color-text-attention-default: light-dark(#533600, #fff3e3);
+  --color-text-positive-default: light-dark(#00470a, #e1ffe0);
+  --color-text-accent-default: light-dark(#633bc6, #b5a8ff);
+  --color-text-static-default: light-dark(#ffffff, #ffffff);
+  --color-text-static-dark: light-dark(#09090b, #09090b);
+  --color-text-inverse-default: light-dark(#1e1e24, #1e1e24);
+  --color-static-white: light-dark(#ffffff, #ffffff);
+  --color-static-black: light-dark(#09090b, #09090b);
+  --font-family-headings: 'Inter';
+  --font-family-body: 'Inter';
+  --font-size-2xs: 0.75rem;
+  --font-size-xs: 0.875rem;
+  --font-size-s: 1rem;
+  --font-size-m: 1.125rem;
+  --font-size-l: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.75rem;
+  --font-size-3xl: 2rem;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-line-height-2xs: 1.125rem;
+  --font-line-height-xs: 1.375rem;
+  --font-line-height-s: 1.625rem;
+  --font-line-height-m: 1.75rem;
+  --font-line-height-l: 1.875rem;
+  --font-line-height-xl: 2rem;
+  --font-line-height-2xl: 2.25rem;
+  --font-line-height-3xl: 2.5rem;
+  --radius-card: 0.5rem;
+  --radius-overlay: 0.25rem;
+  --radius-button: 0.25rem;
+  --radius-checkbox: 0.25rem;
+  --radius-none: 0rem;
+  --radius-2xs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-s: 0.375rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-round: 624.9375rem;
+}
+
+:root {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}