@db-ux/core-foundations 2.3.1 → 2.4.0

package/assets/fonts/generate-eu-fonts.ts

@@ -1,6 +1,6 @@
+import { glob } from 'glob';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
-import { glob } from 'glob';
 
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';

package/build/index.d.ts

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

package/build/index.js

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

package/build/styles/absolute.css

@@ -6328,56 +6328,6 @@ code {
 
 @layer variables {}
 
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-  font-family: monospace;
-}
-
-a:has(code:not([class])) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
 /* Use this file if you want the default elevation data attributes in your project */
 .db-interactive-elevation,
 [data-interactive=elevation] {
@@ -6550,6 +6500,63 @@ strong {
   font-weight: 700;
 }
 
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
+}
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
+}
+
+a:has(code:not([class])) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])) > code {
+  color: inherit;
+}
+
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
+}
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
+}
+
+blockquote:not([class]) {
+  margin: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
+}
+
 [data-icon]:is(span),
 [data-icon-before]:is(span),
 [data-icon-after]:is(span) {

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

@@ -90,4 +90,4 @@
     	--db-neutral-on-bg-vibrant-hovered
     );--db-adaptive-on-bg-vibrant-pressed:var(
     	--db-neutral-on-bg-vibrant-pressed
-    )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@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{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);font-family:monospace;padding:var(--db-spacing-fixed-xs)}a:has(code:not([class])){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]))>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);font-family:monospace;padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}
+    )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@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{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class])){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class])):hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class])):active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]))>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}

package/build/styles/defaults/default-code.scss

@@ -8,7 +8,12 @@ pre:not([class]):has(code) {
 	background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
 	color: colors.$db-adaptive-on-bg-inverted-default;
 	padding: variables.$db-spacing-fixed-xs;
-	font-family: monospace;
+
+	&,
+	code,
+	span {
+		font-family: monospace;
+	}
 }
 
 a:has(code:not([class])) {
@@ -33,7 +38,11 @@ code:not([class]) {
 	color: colors.$db-adaptive-on-bg-inverted-default;
 	padding-block: variables.$db-spacing-fixed-3xs;
 	padding-inline: variables.$db-spacing-fixed-2xs;
-	font-family: monospace;
+
+	&,
+	span {
+		font-family: monospace;
+	}
 }
 
 blockquote:not([class]) {

package/build/styles/index.css

@@ -627,56 +627,6 @@ code {
 
 @layer variables {}
 
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-  font-family: monospace;
-}
-
-a:has(code:not([class])) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
 /* Use this file if you want the default elevation data attributes in your project */
 .db-interactive-elevation,
 [data-interactive=elevation] {
@@ -849,6 +799,63 @@ strong {
   font-weight: 700;
 }
 
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
+}
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
+}
+
+a:has(code:not([class])) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])) > code {
+  color: inherit;
+}
+
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
+}
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
+}
+
+blockquote:not([class]) {
+  margin: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
+}
+
 [data-icon]::before,
 [data-icon-before]::before, [data-icon-after]::after {
   color: var(--db-icon-color, inherit);

package/build/styles/index.scss

@@ -1,6 +1,6 @@
 @forward "defaults/default-root";
-@forward "defaults/default-code";
 @forward "defaults/default-elevation";
 @forward "defaults/default-fonts";
+@forward "defaults/default-code";
 @forward "defaults/default-icons";
 @forward "defaults/default-required";

package/build/styles/relative.css

@@ -6328,56 +6328,6 @@ code {
 
 @layer variables {}
 
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-  font-family: monospace;
-}
-
-a:has(code:not([class])) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
 /* Use this file if you want the default elevation data attributes in your project */
 .db-interactive-elevation,
 [data-interactive=elevation] {
@@ -6550,6 +6500,63 @@ strong {
   font-weight: 700;
 }
 
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
+}
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
+}
+
+a:has(code:not([class])) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])) > code {
+  color: inherit;
+}
+
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
+}
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
+}
+
+blockquote:not([class]) {
+  margin: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
+}
+
 [data-icon]:is(span),
 [data-icon-before]:is(span),
 [data-icon-after]:is(span) {

package/build/styles/rollup.css

@@ -6328,56 +6328,6 @@ code {
 
 @layer variables {}
 
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-  font-family: monospace;
-}
-
-a:has(code:not([class])) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
 /* Use this file if you want the default elevation data attributes in your project */
 .db-interactive-elevation,
 [data-interactive=elevation] {
@@ -6550,6 +6500,63 @@ strong {
   font-weight: 700;
 }
 
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
+}
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
+}
+
+a:has(code:not([class])) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])) > code {
+  color: inherit;
+}
+
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
+}
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
+}
+
+blockquote:not([class]) {
+  margin: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
+}
+
 [data-icon]:is(span),
 [data-icon-before]:is(span),
 [data-icon-after]:is(span) {

package/build/styles/webpack.css

@@ -6328,56 +6328,6 @@ code {
 
 @layer variables {}
 
-/* Use this file if you want to use the defaults for the <code> tag in your project */
-pre:not([class]):has(code) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding: var(--db-spacing-fixed-xs);
-  font-family: monospace;
-}
-
-a:has(code:not([class])) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-hovered);
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  color: var(--db-adaptive-on-bg-inverted-pressed);
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-a:has(code:not([class])) > code {
-  color: inherit;
-}
-
-code:not([class]) {
-  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
-  color: var(--db-adaptive-on-bg-inverted-default);
-  padding-block: var(--db-spacing-fixed-3xs);
-  padding-inline: var(--db-spacing-fixed-2xs);
-  font-family: monospace;
-}
-
-blockquote:not([class]) {
-  margin: 0;
-  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
-}
-
 /* Use this file if you want the default elevation data attributes in your project */
 .db-interactive-elevation,
 [data-interactive=elevation] {
@@ -6550,6 +6500,63 @@ strong {
   font-weight: 700;
 }
 
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+pre:not([class]):has(code) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding: var(--db-spacing-fixed-xs);
+}
+pre:not([class]):has(code),
+pre:not([class]):has(code) code,
+pre:not([class]):has(code) span {
+  font-family: monospace;
+}
+
+a:has(code:not([class])) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-hovered);
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  color: var(--db-adaptive-on-bg-inverted-pressed);
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+a:has(code:not([class])) > code {
+  color: inherit;
+}
+
+code:not([class]) {
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+  color: var(--db-adaptive-on-bg-inverted-default);
+  padding-block: var(--db-spacing-fixed-3xs);
+  padding-inline: var(--db-spacing-fixed-2xs);
+}
+code:not([class]),
+code:not([class]) span {
+  font-family: monospace;
+}
+
+blockquote:not([class]) {
+  margin: 0;
+  padding: var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md);
+}
+
 [data-icon]:is(span),
 [data-icon-before]:is(span),
 [data-icon-after]:is(span) {

package/build/tailwind/tailwind.config.mjs

@@ -1,7 +1,6 @@
-/* eslint-disable import/no-anonymous-default-export */
 import tokens from './tailwind-tokens.json';
 
-export default {
+const tailwindConfig = {
 	content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
 	plugins: [],
 	theme: {
@@ -14,3 +13,5 @@ export default {
 		})
 	}
 };
+
+export default tailwindConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-foundations",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "type": "module",
   "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
   "repository": {
@@ -46,13 +46,14 @@
   },
   "devDependencies": {
     "@csstools/normalize.css": "12.1.1",
-    "@db-ux/icon-font-tools": "0.3.3",
+    "@db-ux/icon-font-tools": "0.3.4",
+    "@playwright/test": "1.53.2",
     "cpr": "3.0.1",
     "cssnano": "^7.0.7",
-    "dotenv": "^16.6.0",
+    "dotenv": "^17.0.1",
     "glob": "11.0.3",
     "nodemon": "3.1.10",
-    "prettier": "^3.6.1",
+    "prettier": "^3.6.2",
     "sass": "1.85.0",
     "tsx": "^4.20.3",
     "typescript": "^5.4.5",

package/build/styles/colors/speaking-colors/vibrant.js

@@ -1,43 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-
-const directoryPath = './';
-
-async function readDirectoryRecursive(dir) {
-	const entries = await fs.readdir(dir, { withFileTypes: true });
-	const files = await Promise.all(
-		entries.map((entry) => {
-			const res = path.resolve(dir, entry.name);
-			return entry.isDirectory() ? readDirectoryRecursive(res) : res;
-		})
-	);
-	return Array.prototype.concat(...files);
-}
-
-async function appendToFile(filePath, fileName) {
-	const namePart = fileName.split('_')[1].split('.')[0];
-	const snippet = `// vibrant
-$db-${namePart}-vibrant-default: var(--db-${namePart}-vibrant-default);
-$db-${namePart}-vibrant-hovered: var(--db-${namePart}-vibrant-hovered);
-$db-${namePart}-vibrant-pressed: var(--db-${namePart}-vibrant-pressed);
-
-// on-vibrant
-$db-${namePart}-on-vibrant-default: var(--db-${namePart}-on-vibrant-default);
-$db-${namePart}-on-vibrant-hovered: var(--db-${namePart}-on-vibrant-hovered);
-$db-${namePart}-on-vibrant-pressed: var(--db-${namePart}-on-vibrant-pressed);
-`;
-
-	await fs.appendFile(filePath, snippet);
-}
-
-async function processFiles() {
-	const files = await readDirectoryRecursive(directoryPath);
-	const scssFiles = files.filter((file) => file.endsWith('.scss'));
-
-	for (const file of scssFiles) {
-		const fileName = path.basename(file);
-		await appendToFile(file, fileName);
-	}
-}
-
-processFiles().catch(console.error);