From 8bb2b66de74b38b08a897044b765541cd21418dd Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 30 Jan 2025 13:02:53 +0100 Subject: [PATCH 1/9] feat: add tailwind v4 theme --- packages/foundations/README.md | 16 +- .../foundations/tailwind/theme/colors.css | 148 ++++++++++++++++ packages/foundations/tailwind/theme/index.css | 167 ++++++++++++++++++ 3 files changed, 329 insertions(+), 2 deletions(-) create mode 100644 packages/foundations/tailwind/theme/colors.css create mode 100644 packages/foundations/tailwind/theme/index.css diff --git a/packages/foundations/README.md b/packages/foundations/README.md index dda1309604f..cfa22450a4d 100644 --- a/packages/foundations/README.md +++ b/packages/foundations/README.md @@ -199,9 +199,21 @@ In HTML: ### Tailwind Check the required imports for [CSS](https://db-ui.github.io/mono/review/main/foundations/readme?current=css) to enable all tokens and defaults. + +#### Tailwind v4 + +```css +@import "tailwindcss"; +@import "@db-ui/foundations/build/tailwind/theme/index.css"; +``` + +#### Tailwind v3 + +> **Note:** In Tailwind v4 you can use the config with `@config "tailwind.config.[js|ts]";` inside your `.css` file. + After this you can extend your tailwind config like this: -#### Javascript +##### Javascript ```javascript //tailwind.config.js @@ -223,7 +235,7 @@ export default { }; ``` -#### Typescript +##### Typescript ```typescript //tailwind.config.ts diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css new file mode 100644 index 00000000000..7a9634ebcd8 --- /dev/null +++ b/packages/foundations/tailwind/theme/colors.css @@ -0,0 +1,148 @@ +/* stylelint-disable */ + +@theme { + --color-*: initial; /* Color utilities like */ + /* Basic-Level */ + --color-adaptive-bg-basic-level-1-default: var( + --db-adaptive-bg-basic-level-1-default + ); + --color-adaptive-bg-basic-level-1-hovered: var( + --db-adaptive-bg-basic-level-1-hovered + ); + --color-adaptive-bg-basic-level-1-pressed: var( + --db-adaptive-bg-basic-level-1-pressed + ); + --color-adaptive-bg-basic-level-2-default: var( + --db-adaptive-bg-basic-level-2-default + ); + --color-adaptive-bg-basic-level-2-hovered: var( + --db-adaptive-bg-basic-level-2-hovered + ); + --color-adaptive-bg-basic-level-2-pressed: var( + --db-adaptive-bg-basic-level-2-pressed + ); + --color-adaptive-bg-basic-level-3-default: var( + --db-adaptive-bg-basic-level-3-default + ); + --color-adaptive-bg-basic-level-3-hovered: var( + --db-adaptive-bg-basic-level-3-hovered + ); + --color-adaptive-bg-basic-level-3-pressed: var( + --db-adaptive-bg-basic-level-3-pressed + ); + /* Transparent */ + --color-adaptive-bg-basic-transparent-full-default: var( + --db-adaptive-bg-basic-transparent-full-default + ); + --color-adaptive-bg-basic-transparent-semi-default: var( + --db-adaptive-bg-basic-transparent-semi-default + ); + --color-adaptive-bg-basic-transparent-hovered: var( + --db-adaptive-bg-basic-transparent-hovered + ); + --color-adaptive-bg-basic-transparent-pressed: var( + --db-adaptive-bg-basic-transparent-pressed + ); + /* Inverted */ + --color-adaptive-bg-inverted-contrast-max-default: var( + --db-adaptive-bg-inverted-contrast-max-default + ); + --color-adaptive-bg-inverted-contrast-max-hovered: var( + --db-adaptive-bg-inverted-contrast-max-hovered + ); + --color-adaptive-bg-inverted-contrast-max-pressed: var( + --db-adaptive-bg-inverted-contrast-max-pressed + ); + --color-adaptive-bg-inverted-contrast-high-default: var( + --db-adaptive-bg-inverted-contrast-high-default + ); + --color-adaptive-bg-inverted-contrast-high-hovered: var( + --db-adaptive-bg-inverted-contrast-high-hovered + ); + --color-adaptive-bg-inverted-contrast-high-pressed: var( + --db-adaptive-bg-inverted-contrast-high-pressed + ); + --color-adaptive-bg-inverted-contrast-low-default: var( + --db-adaptive-bg-inverted-contrast-low-default + ); + --color-adaptive-bg-inverted-contrast-low-hovered: var( + --db-adaptive-bg-inverted-contrast-low-hovered + ); + --color-adaptive-bg-inverted-contrast-low-pressed: var( + --db-adaptive-bg-inverted-contrast-low-pressed + ); + + /* On Colors */ + + --color-adaptive-on-bg-basic-emphasis-100-default: var( + --db-adaptive-on-bg-basic-emphasis-100-default + ); + --color-adaptive-on-bg-basic-emphasis-100-hovered: var( + --db-adaptive-on-bg-basic-emphasis-100-hovered + ); + --color-adaptive-on-bg-basic-emphasis-100-pressed: var( + --db-adaptive-on-bg-basic-emphasis-100-pressed + ); + --color-adaptive-on-bg-basic-emphasis-90-default: var( + --db-adaptive-on-bg-basic-emphasis-90-default + ); + --color-adaptive-on-bg-basic-emphasis-90-hovered: var( + --db-adaptive-on-bg-basic-emphasis-90-hovered + ); + --color-adaptive-on-bg-basic-emphasis-90-pressed: var( + --db-adaptive-on-bg-basic-emphasis-90-pressed + ); + --color-adaptive-on-bg-basic-emphasis-80-default: var( + --db-adaptive-on-bg-basic-emphasis-80-default + ); + --color-adaptive-on-bg-basic-emphasis-80-hovered: var( + --db-adaptive-on-bg-basic-emphasis-80-hovered + ); + --color-adaptive-on-bg-basic-emphasis-80-pressed: var( + --db-adaptive-on-bg-basic-emphasis-80-pressed + ); + --color-adaptive-on-bg-basic-emphasis-70-default: var( + --db-adaptive-on-bg-basic-emphasis-70-default + ); + --color-adaptive-on-bg-basic-emphasis-70-hovered: var( + --db-adaptive-on-bg-basic-emphasis-70-hovered + ); + --color-adaptive-on-bg-basic-emphasis-70-pressed: var( + --db-adaptive-on-bg-basic-emphasis-70-pressed + ); + --color-adaptive-on-bg-basic-emphasis-60-default: var( + --db-adaptive-on-bg-basic-emphasis-60-default + ); + --color-adaptive-on-bg-basic-emphasis-60-hovered: var( + --db-adaptive-on-bg-basic-emphasis-60-hovered + ); + --color-adaptive-on-bg-basic-emphasis-60-pressed: var( + --db-adaptive-on-bg-basic-emphasis-60-pressed + ); + --color-adaptive-on-bg-basic-emphasis-50-default: var( + --db-adaptive-on-bg-basic-emphasis-50-default + ); + --color-adaptive-on-bg-basic-emphasis-50-hovered: var( + --db-adaptive-on-bg-basic-emphasis-50-hovered + ); + --color-adaptive-on-bg-basic-emphasis-50-pressed: var( + --db-adaptive-on-bg-basic-emphasis-50-pressed + ); + /* On Inverted */ + --color-adaptive-on-bg-inverted-default: var( + --db-adaptive-on-bg-inverted-default + ); + --color-adaptive-on-bg-inverted-hovered: var( + --db-adaptive-on-bg-inverted-hovered + ); + --color-adaptive-on-bg-inverted-pressed: var( + --db-adaptive-on-bg-inverted-pressed + ); + /* On Origin */ + --color-adaptive-on-origin-default: var(--db-adaptive-on-origin-default); + --color-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered); + --color-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed); + --color-adaptive-origin-default: var(--db-adaptive-origin-default); + --color-adaptive-origin-hovered: var(--db-adaptive-origin-hovered); + --color-adaptive-origin-pressed: var(--db-adaptive-origin-pressed); +} diff --git a/packages/foundations/tailwind/theme/index.css b/packages/foundations/tailwind/theme/index.css new file mode 100644 index 00000000000..ebc0379d7a1 --- /dev/null +++ b/packages/foundations/tailwind/theme/index.css @@ -0,0 +1,167 @@ +/* stylelint-disable */ + +@import "./colors.css"; + +@theme { + --font-*: initial; /* Font family utilities like font-sans */ + --font-sans: var(--db-font-family-sans); + --font-head: var(--db-font-family-head); + + --text-*: initial; /* Font size utilities like text-body-xl */ + --text-base: var(--db-type-body-font-size-md); + --text-base--line-height: var(--db-type-body-line-height-md); + --text-body-3xs: var(--db-type-body-font-size-3xs); + --text-body-3xs--line-height: var(--db-type-body-line-height-3xs); + --text-body-2xs: var(--db-type-body-font-size-2xs); + --text-body-2xs--line-height: var(--db-type-body-line-height-2xs); + --text-body-xs: var(--db-type-body-font-size-xs); + --text-body-xs--line-height: var(--db-type-body-line-height-xs); + --text-body-sm: var(--db-type-body-font-size-sm); + --text-body-sm--line-height: var(--db-type-body-line-height-sm); + --text-body-md: var(--db-type-body-font-size-md); + --text-body-md--line-height: var(--db-type-body-line-height-md); + --text-body-lg: var(--db-type-body-font-size-lg); + --text-body-lg--line-height: var(--db-type-body-line-height-lg); + --text-body-xl: var(--db-type-body-font-size-xl); + --text-body-xl--line-height: var(--db-type-body-line-height-xl); + --text-body-2xl: var(--db-type-body-font-size-2xl); + --text-body-2xl--line-height: var(--db-type-body-line-height-2xl); + --text-body-3xl: var(--db-type-body-font-size-3xl); + --text-body-3xl--line-height: var(--db-type-body-line-height-3xl); + --text-head-3xs: var(--db-type-headline-font-size-3xs); + --text-head-3xs--line-height: var(--db-type-headline-line-height-3xs); + --text-head-2xs: var(--db-type-headline-font-size-2xs); + --text-head-2xs--line-height: var(--db-type-headline-line-height-2xs); + --text-head-xs: var(--db-type-headline-font-size-xs); + --text-head-xs--line-height: var(--db-type-headline-line-height-xs); + --text-head-sm: var(--db-type-headline-font-size-sm); + --text-head-sm--line-height: var(--db-type-headline-line-height-sm); + --text-head-md: var(--db-type-headline-font-size-md); + --text-head-md--line-height: var(--db-type-headline-line-height-md); + --text-head-lg: var(--db-type-headline-font-size-lg); + --text-head-lg--line-height: var(--db-type-headline-line-height-lg); + --text-head-xl: var(--db-type-headline-font-size-xl); + --text-head-xl--line-height: var(--db-type-headline-line-height-xl); + --text-head-2xl: var(--db-type-headline-font-size-2xl); + --text-head-2xl--line-height: var(--db-type-headline-line-height-2xl); + --text-head-3xl: var(--db-type-headline-font-size-3xl); + --text-head-3xl--line-height: var(--db-type-headline-line-height-3xl); + + --breakpoint-*: initial; /* Responsive breakpoint variants like sm:* */ + --breakpoint-xs: 360px; + --breakpoint-sm: 720px; + --breakpoint-md: 1024px; + --breakpoint-lg: 1440px; + --breakpoint-xl: 1920px; + + --spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */ + --spacing-none: 0px; + --spacing-0: 0px; + --spacing-fix-3xs: var(--db-spacing-fixed-3xs); + --spacing-fix-2xs: var(--db-spacing-fixed-2xs); + --spacing-fix-xs: var(--db-spacing-fixed-xs); + --spacing-fix-sm: var(--db-spacing-fixed-sm); + --spacing-fix-md: var(--db-spacing-fixed-md); + --spacing-fix-lg: var(--db-spacing-fixed-lg); + --spacing-fix-xl: var(--db-spacing-fixed-xl); + --spacing-fix-2xl: var(--db-spacing-fixed-2xl); + --spacing-fix-3xl: var(--db-spacing-fixed-3xl); + --spacing-res-3xs: var(--db-spacing-responsive-3xs); + --spacing-res-2xs: var(--db-spacing-responsive-2xs); + --spacing-res-xs: var(--db-spacing-responsive-xs); + --spacing-res-sm: var(--db-spacing-responsive-sm); + --spacing-res-md: var(--db-spacing-responsive-md); + --spacing-res-lg: var(--db-spacing-responsive-lg); + --spacing-res-xl: var(--db-spacing-responsive-xl); + --spacing-res-2xl: var(--db-spacing-responsive-2xl); + --spacing-res-3xl: var(--db-spacing-responsive-3xl); + --spacing-siz-3xs: var(--db-sizing-3xs); + --spacing-siz-2xs: var(--db-sizing-2xs); + --spacing-siz-xs: var(--db-sizing-xs); + --spacing-siz-sm: var(--db-sizing-sm); + --spacing-siz-md: var(--db-sizing-md); + --spacing-siz-lg: var(--db-sizing-lg); + --spacing-siz-xl: var(--db-sizing-xl); + --spacing-siz-2xl: var(--db-sizing-2xl); + --spacing-siz-3xl: var(--db-sizing-3xl); + + --gap-*: initial; /* Gap */ + --gap-none: 0px; + --gap-0: 0px; + --gap-3xs: var(--db-gap-fixed-3xs); + --gap-2xs: var(--db-gap-fixed-2xs); + --gap-xs: var(--db-gap-fixed-xs); + --gap-sm: var(--db-gap-fixed-sm); + --gap-md: var(--db-gap-fixed-md); + --gap-lg: var(--db-gap-fixed-lg); + --gap-xl: var(--db-gap-fixed-xl); + --gap-2xl: var(--db-gap-fixed-2xl); + --gap-3xl: var(--db-gap-fixed-3xl); + + --border-*: initial; /* Border width */ + --border: var(--db-border-height-3xs); + --border-none: 0px; + --border-0: 0px; + --border-3xs: var(--db-border-height-3xs); + --border-2xs: var(--db-border-height-2xs); + --border-xs: var(--db-border-height-xs); + --border-sm: var(--db-border-height-sm); + --border-md: var(--db-border-height-md); + --border-lg: var(--db-border-height-lg); + --border-xl: var(--db-border-height-xl); + --border-2xl: var(--db-border-height-2xl); + --border-3xl: var(--db-border-height-3xl); + + --radius-*: initial; /* Border radius utilities like rounded-sm */ + --radius: var(--db-border-radius-xs); + --radius-none: 0px; + --radius-0: 0px; + --radius-3xs: var(--db-border-radius-3xs); + --radius-2xs: var(--db-border-radius-2xs); + --radius-xs: var(--db-border-radius-xs); + --radius-sm: var(--db-border-radius-sm); + --radius-md: var(--db-border-radius-md); + --radius-lg: var(--db-border-radius-lg); + --radius-xl: var(--db-border-radius-xl); + --radius-2xl: var(--db-border-radius-2xl); + --radius-3xl: var(--db-border-radius-3xl); + --radius-full: var(--db-border-radius-full); + + --shadow-*: initial; /* Box shadow utilities like shadow-md */ + --shadow: var(--db-elevation-md); + --shadow-sm: var(--db-elevation-sm); + --shadow-md: var(--db-elevation-md); + --shadow-lg: var(--db-elevation-lg); +} + +@layer components { + .typography { + p { + font-size: var(--text-body-md); + } + h1 { + font-size: var(--text-xl); + line-height: var(--text-xl--line-height); + } + h2 { + font-size: var(--text-lg); + line-height: var(--text-lg--line-height); + } + h3 { + font-size: var(--text-md); + line-height: var(--text-md--line-height); + } + h4 { + font-size: var(--text-sm); + line-height: var(--text-sm--line-height); + } + h5 { + font-size: var(--text-xs); + line-height: var(--text-xs--line-height); + } + h6 { + font-size: var(--text-2xs); + line-height: var(--text-2xs--line-height); + } + } +} From 7573576d9d9c3fc3dd9bd11b829b38a04b758421 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 30 Jan 2025 16:32:35 +0100 Subject: [PATCH 2/9] chore: update comment for stylelint --- packages/foundations/tailwind/theme/colors.css | 1 + packages/foundations/tailwind/theme/index.css | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index 7a9634ebcd8..f74a378dfa6 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -1,3 +1,4 @@ +/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */ /* stylelint-disable */ @theme { diff --git a/packages/foundations/tailwind/theme/index.css b/packages/foundations/tailwind/theme/index.css index ebc0379d7a1..4e2e4bb667a 100644 --- a/packages/foundations/tailwind/theme/index.css +++ b/packages/foundations/tailwind/theme/index.css @@ -1,3 +1,4 @@ +/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */ /* stylelint-disable */ @import "./colors.css"; From 6f46a605a9f567857088f1b1f0fc560078e441d8 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Thu, 30 Jan 2025 16:36:42 +0100 Subject: [PATCH 3/9] Update README.md --- packages/foundations/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/foundations/README.md b/packages/foundations/README.md index cfa22450a4d..e92261c5f68 100644 --- a/packages/foundations/README.md +++ b/packages/foundations/README.md @@ -209,7 +209,7 @@ Check the required imports for [CSS](https://db-ui.github.io/mono/review/main/fo #### Tailwind v3 -> **Note:** In Tailwind v4 you can use the config with `@config "tailwind.config.[js|ts]";` inside your `.css` file. +> **Note:** In Tailwind v4 you can use the config with `@config "tailwind.config.[js|ts]";` inside your `.css` file as well. After this you can extend your tailwind config like this: From 65ce91a12b888555ae8558158b9fc1110067e3a7 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 30 Jan 2025 17:09:57 +0100 Subject: [PATCH 4/9] refactor: stylelint feedback --- packages/foundations/tailwind/theme/index.css | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/foundations/tailwind/theme/index.css b/packages/foundations/tailwind/theme/index.css index 4e2e4bb667a..9e7aae629b3 100644 --- a/packages/foundations/tailwind/theme/index.css +++ b/packages/foundations/tailwind/theme/index.css @@ -1,8 +1,10 @@ -/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */ -/* stylelint-disable */ +/* stylelint-disable custom-property-pattern, custom-property-empty-line-before */ +/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */ +/* stylelint-disable-next-line import-notation */ @import "./colors.css"; +/* stylelint-disable-next-line scss/at-rule-no-unknown */ @theme { --font-*: initial; /* Font family utilities like font-sans */ --font-sans: var(--db-font-family-sans); @@ -56,8 +58,8 @@ --breakpoint-xl: 1920px; --spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */ - --spacing-none: 0px; - --spacing-0: 0px; + --spacing-none: 0; + --spacing-0: 0; --spacing-fix-3xs: var(--db-spacing-fixed-3xs); --spacing-fix-2xs: var(--db-spacing-fixed-2xs); --spacing-fix-xs: var(--db-spacing-fixed-xs); @@ -87,8 +89,8 @@ --spacing-siz-3xl: var(--db-sizing-3xl); --gap-*: initial; /* Gap */ - --gap-none: 0px; - --gap-0: 0px; + --gap-none: 0; + --gap-0: 0; --gap-3xs: var(--db-gap-fixed-3xs); --gap-2xs: var(--db-gap-fixed-2xs); --gap-xs: var(--db-gap-fixed-xs); @@ -101,8 +103,8 @@ --border-*: initial; /* Border width */ --border: var(--db-border-height-3xs); - --border-none: 0px; - --border-0: 0px; + --border-none: 0; + --border-0: 0; --border-3xs: var(--db-border-height-3xs); --border-2xs: var(--db-border-height-2xs); --border-xs: var(--db-border-height-xs); @@ -115,8 +117,8 @@ --radius-*: initial; /* Border radius utilities like rounded-sm */ --radius: var(--db-border-radius-xs); - --radius-none: 0px; - --radius-0: 0px; + --radius-none: 0; + --radius-0: 0; --radius-3xs: var(--db-border-radius-3xs); --radius-2xs: var(--db-border-radius-2xs); --radius-xs: var(--db-border-radius-xs); @@ -140,26 +142,32 @@ p { font-size: var(--text-body-md); } + h1 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } + h2 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } + h3 { font-size: var(--text-md); line-height: var(--text-md--line-height); } + h4 { font-size: var(--text-sm); line-height: var(--text-sm--line-height); } + h5 { font-size: var(--text-xs); line-height: var(--text-xs--line-height); } + h6 { font-size: var(--text-2xs); line-height: var(--text-2xs--line-height); From 9aaac980882ac1813c4b456b79c881fcefb6b854 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 31 Jan 2025 08:10:54 +0100 Subject: [PATCH 5/9] Update packages/foundations/tailwind/theme/colors.css Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/tailwind/theme/colors.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index f74a378dfa6..f362074c6a0 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -31,6 +31,7 @@ --color-adaptive-bg-basic-level-3-pressed: var( --db-adaptive-bg-basic-level-3-pressed ); + /* Transparent */ --color-adaptive-bg-basic-transparent-full-default: var( --db-adaptive-bg-basic-transparent-full-default From a8dfaf2d8e8ecae95f825d54e9c4489eb1e17973 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 31 Jan 2025 08:11:01 +0100 Subject: [PATCH 6/9] Update packages/foundations/tailwind/theme/colors.css Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/tailwind/theme/colors.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index f362074c6a0..403763bf824 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -45,6 +45,7 @@ --color-adaptive-bg-basic-transparent-pressed: var( --db-adaptive-bg-basic-transparent-pressed ); + /* Inverted */ --color-adaptive-bg-inverted-contrast-max-default: var( --db-adaptive-bg-inverted-contrast-max-default From 9d5358f0410eb952848a77cc869c1fae9bb6da39 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 31 Jan 2025 08:11:12 +0100 Subject: [PATCH 7/9] Update packages/foundations/tailwind/theme/colors.css Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/tailwind/theme/colors.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index 403763bf824..2d948403b16 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -131,6 +131,7 @@ --color-adaptive-on-bg-basic-emphasis-50-pressed: var( --db-adaptive-on-bg-basic-emphasis-50-pressed ); + /* On Inverted */ --color-adaptive-on-bg-inverted-default: var( --db-adaptive-on-bg-inverted-default From 77221b83bb33e91b0bcae0f6f0e288e77ec8530e Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 31 Jan 2025 08:11:17 +0100 Subject: [PATCH 8/9] Update packages/foundations/tailwind/theme/colors.css Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/tailwind/theme/colors.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index 2d948403b16..3359d6c62d4 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -142,6 +142,7 @@ --color-adaptive-on-bg-inverted-pressed: var( --db-adaptive-on-bg-inverted-pressed ); + /* On Origin */ --color-adaptive-on-origin-default: var(--db-adaptive-on-origin-default); --color-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered); From ac5c9d7d24d0b1cde9ef1d18ccd6085a35ce252f Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 31 Jan 2025 08:11:46 +0100 Subject: [PATCH 9/9] Update packages/foundations/tailwind/theme/colors.css Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/tailwind/theme/colors.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/foundations/tailwind/theme/colors.css b/packages/foundations/tailwind/theme/colors.css index 3359d6c62d4..1d59f969f57 100644 --- a/packages/foundations/tailwind/theme/colors.css +++ b/packages/foundations/tailwind/theme/colors.css @@ -1,8 +1,9 @@ /* The prefix for variables are predefined by Tailwind, stylelint would throw an error */ -/* stylelint-disable */ - +/* stylelint-disable-next-line scss/at-rule-no-unknown */ @theme { + /* stylelint-disable-next-line custom-property-pattern */ --color-*: initial; /* Color utilities like */ + /* Basic-Level */ --color-adaptive-bg-basic-level-1-default: var( --db-adaptive-bg-basic-level-1-default