From 8bb2b66de74b38b08a897044b765541cd21418dd Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 30 Jan 2025 13:02:53 +0100 Subject: [PATCH] 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 dda1309604f3..cfa22450a4d9 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 000000000000..7a9634ebcd8e --- /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 000000000000..ebc0379d7a10 --- /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); + } + } +}