@db-ux/core-foundations 4.5.4-table-c758ae7 → 4.5.4-tailwind-inline-5d37a00

package/agent/_instructions.md

@@ -53,3 +53,52 @@ If you use tailwind follow those rules as well:
 
 - Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
 - Never use something like `font-['DB_Neo_Screen_Head']` and `leading-[48px]` instead use `text-head-xx` class, where `-xx` can be a t-shirt size from `3xs` to `3xl`; If it has a `font-wight:300;` use `text-head-light-xx` instead.
+
+## Stylelint Rules (Common CSS/SCSS Mistakes)
+
+The `@db-ux/core-stylelint` plugin enforces design token usage. Never use raw `px`, `rem`, or hardcoded color values for the following properties:
+
+### Spacings (`db-ux/use-spacings`)
+
+- Applies to: `margin`, `padding`, `gap` (and all sub-properties like `margin-top`, `padding-inline`, etc.)
+- Use `var(--db-spacing-fixed-xx)` or `var(--db-spacing-responsive-xx)` instead of `px`/`rem` values
+- `var(--db-sizing-xx)`, `%`, `vw`, `vh` are also allowed
+- Allowed exact values: `0px`, `0`, `auto`, `inherit`, `initial`, `unset`
+- ❌ `margin: 20px;` / `padding: 0.5rem;` / `margin-top: 8px;`
+- ✅ `margin: var(--db-spacing-fixed-md);` / `padding: var(--db-spacing-responsive-lg);`
+
+### Sizing (`db-ux/use-sizing`)
+
+- Applies to: `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`, `block-size`, `inline-size`
+- Use `var(--db-sizing-xx)`, `var(--db-screen-xx)`, `var(--db-container-xx)`, `%`, `lh`, `ch`, `vw`, `vh` instead of `px`/`rem`
+- Additional allowed values: `fit-content`, `max-content`, `min-content`, `none`, `revert`, `revert-layer`
+- ❌ `width: 100px;` / `height: 50px;` / `block-size: 200px;`
+- ✅ `width: var(--db-sizing-md);` / `height: 100%;` / `block-size: var(--db-screen-sm);`
+
+### Border Radius (`db-ux/use-border-radius`)
+
+- Applies to: all `border-*-radius` properties
+- Use `var(--db-border-radius-xx)` instead of `px`/`rem`
+- ❌ `border-radius: 4px;` / `border-top-left-radius: 0.5rem;`
+- ✅ `border-radius: var(--db-border-radius-md);`
+
+### Border Width (`db-ux/use-border-width`)
+
+- Applies to: `border`, `border-top`, `border-right`, `border-bottom`, `border-left`, `border-block`, `border-block-start`, `border-block-end`, `border-inline`, `border-inline-start`, `border-inline-end`, and all `border-*-width` properties
+- Use `var(--db-border-width-xx)` instead of `px`/`rem` for the width part
+- ❌ `border: 1px solid transparent;` / `border-top: 2px solid red;`
+- ✅ `border: var(--db-border-width-sm) solid transparent;`
+
+### Border Color (`db-ux/use-border-color`)
+
+- Applies to: same border properties as border-width, plus all `border-*-color` properties
+- Use `var(--db-adaptive-on-bg-basic-emphasis-xx-default)` or `var(--db-adaptive-on-bg-inverted)` for border colors
+- `transparent` and `currentcolor` are also allowed
+- ❌ `border: 1px solid red;` / `border-color: #ff0;` / `border-top: 1px solid blue;`
+- ✅ `border: var(--db-border-width-sm) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);`
+
+### General Notes
+
+- CSS custom properties (`--my-var`) and SCSS variables (`$my-var`) are always allowed as values
+- `0px`, `0`, `auto`, `inherit`, `initial`, `unset` are always allowed
+- `calc()` expressions can be allowed via config option `allowCalc: true`

package/assets/icons/LICENCES.json

@@ -1,16 +1,4 @@
 [
-	{
-		"name": "arrows_vertical.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "arrow-down-up"
-	},
-	{
-		"name": "more_vertical.svg",
-		"type": "lucide",
-		"licence": "https://lucide.dev/license#lucide-license",
-		"origin": "ellipsis-vertical"
-	},
 	{
 		"name": "arrow_down.svg",
 		"type": "lucide",

package/build/all-icons.js

@@ -1,2 +1,42 @@
 /* This file was generated */
-export const ALL_ICONS = ["arrows_vertical", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "brand", "calendar", "chat", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "circle", "circle_small", "circular_arrows", "clock", "copy", "cross", "cross_circle", "double_chevron_down", "double_chevron_left", "double_chevron_right", "double_chevron_up", "exclamation_mark_circle", "exclamation_mark_triangle", "eye", "eye_disabled", "house", "information_circle", "magnifying_glass", "menu", "minus", "moon", "more_vertical", "plus", "resize_handle_corner", "sun", "x_placeholder"];
+export const ALL_ICONS = [
+    'arrow_down',
+    'arrow_left',
+    'arrow_right',
+    'arrow_up',
+    'arrow_up_right',
+    'brand',
+    'calendar',
+    'chat',
+    'check',
+    'check_circle',
+    'chevron_down',
+    'chevron_left',
+    'chevron_right',
+    'chevron_up',
+    'circle',
+    'circle_small',
+    'circular_arrows',
+    'clock',
+    'copy',
+    'cross',
+    'cross_circle',
+    'double_chevron_down',
+    'double_chevron_left',
+    'double_chevron_right',
+    'double_chevron_up',
+    'exclamation_mark_circle',
+    'exclamation_mark_triangle',
+    'eye',
+    'eye_disabled',
+    'house',
+    'information_circle',
+    'magnifying_glass',
+    'menu',
+    'minus',
+    'moon',
+    'plus',
+    'resize_handle_corner',
+    'sun',
+    'x_placeholder'
+];

package/build/base-icon-types.d.ts

@@ -1 +1 @@
-export type BaseIconTypes = "arrows_vertical" | "arrow_down" | "arrow_left" | "arrow_right" | "arrow_up" | "arrow_up_right" | "brand" | "calendar" | "chat" | "check" | "check_circle" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "circle" | "circle_small" | "circular_arrows" | "clock" | "copy" | "cross" | "cross_circle" | "double_chevron_down" | "double_chevron_left" | "double_chevron_right" | "double_chevron_up" | "exclamation_mark_circle" | "exclamation_mark_triangle" | "eye" | "eye_disabled" | "house" | "information_circle" | "magnifying_glass" | "menu" | "minus" | "moon" | "more_vertical" | "plus" | "resize_handle_corner" | "sun" | "x_placeholder";
+export type BaseIconTypes = 'arrow_down' | 'arrow_left' | 'arrow_right' | 'arrow_up' | 'arrow_up_right' | 'brand' | 'calendar' | 'chat' | 'check' | 'check_circle' | 'chevron_down' | 'chevron_left' | 'chevron_right' | 'chevron_up' | 'circle' | 'circle_small' | 'circular_arrows' | 'clock' | 'copy' | 'cross' | 'cross_circle' | 'double_chevron_down' | 'double_chevron_left' | 'double_chevron_right' | 'double_chevron_up' | 'exclamation_mark_circle' | 'exclamation_mark_triangle' | 'eye' | 'eye_disabled' | 'house' | 'information_circle' | 'magnifying_glass' | 'menu' | 'minus' | 'moon' | 'plus' | 'resize_handle_corner' | 'sun' | 'x_placeholder';

package/build/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./base-icon-types.js";
-export * from "./all-icons.js";
-export * from "./icon-types.js";
+export * from './all-icons.js';
+export * from './base-icon-types.js';
+export * from './icon-types.js';

package/build/index.js

@@ -1,3 +1,3 @@
-export * from "./base-icon-types.js";
-export * from "./all-icons.js";
-export * from "./icon-types.js";
+export * from './all-icons.js';
+export * from './base-icon-types.js';
+export * from './icon-types.js';

package/build/styles/absolute.css

@@ -6801,8 +6801,8 @@ blockquote:not([class]) {
     	var(--db-neutral-on-origin-dark-default)
     );
     --db-neutral-on-bg-basic-emphasis-50-default: light-dark(
-    	var(--db-neutral-9),
-    	var(--db-neutral-5)
+    	var(--db-neutral-12),
+    	var(--db-neutral-3)
     );
     --db-neutral-on-bg-basic-emphasis-60-default: light-dark(
     	var(--db-neutral-10),

package/build/styles/colors/_default-color-mappings.scss

@@ -18,8 +18,8 @@
 			var(--db-neutral-on-origin-dark-default)
 		);
 		--db-neutral-on-bg-basic-emphasis-50-default: light-dark(
-			var(--db-neutral-9),
-			var(--db-neutral-5)
+			var(--db-neutral-12),
+			var(--db-neutral-3)
 		);
 		--db-neutral-on-bg-basic-emphasis-60-default: light-dark(
 			var(--db-neutral-10),

package/build/styles/defaults/default-icons.css

@@ -1 +1 @@
-@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;aspect-ratio:1;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));flex-shrink:0;overflow:clip;text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:baseline}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}
+@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;aspect-ratio:1;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));flex-shrink:0;overflow:clip;text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:initial}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}