@db-ux/core-foundations 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/build/styles/helpers/classes/all.css

@@ -77,13 +77,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-top-before,
-  [data-divider=top-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-before::before,
+  [data-divider=top-before]::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -104,13 +104,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-top-after,
-  [data-divider=top-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-after::after,
+  [data-divider=top-after]::after {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -131,13 +131,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-before,
-  [data-divider=bottom-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-before::before,
+  [data-divider=bottom-before]::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -158,13 +158,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-after,
-  [data-divider=bottom-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-after::after,
+  [data-divider=bottom-after]::after {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -185,13 +185,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-left-before,
-  [data-divider=left-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-before::before,
+  [data-divider=left-before]::before {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -212,13 +212,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-left-after,
-  [data-divider=left-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-after::after,
+  [data-divider=left-after]::after {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -239,12 +239,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-before,
-  [data-divider=right-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-before::before,
+  [data-divider=right-before]::before {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -265,11 +265,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-after,
-  [data-divider=right-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-after::after,
+  [data-divider=right-after]::after {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }

package/build/styles/helpers/classes/divider.css

@@ -60,13 +60,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-top-before,
-  [data-divider=top-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-before::before,
+  [data-divider=top-before]::before {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -87,13 +87,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-top-after,
-  [data-divider=top-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-after::after,
+  [data-divider=top-after]::after {
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -114,13 +114,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-before,
-  [data-divider=bottom-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-before::before,
+  [data-divider=bottom-before]::before {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -141,13 +141,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-after,
-  [data-divider=bottom-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-after::after,
+  [data-divider=bottom-after]::after {
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -168,13 +168,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-left-before,
-  [data-divider=left-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-before::before,
+  [data-divider=left-before]::before {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -195,13 +195,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media (forced-colors: active) {
-  .db-divider-left-after,
-  [data-divider=left-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-after::after,
+  [data-divider=left-after]::after {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -222,12 +222,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-before,
-  [data-divider=right-before] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-before::before,
+  [data-divider=right-before]::before {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -248,11 +248,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-after,
-  [data-divider=right-after] {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-after::after,
+  [data-divider=right-after]::after {
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }

package/build/styles/index.css

@@ -4702,6 +4702,15 @@ html:not(:has(> head > meta[name=color-scheme])) {
   color-scheme: dark;
 }
 
+[data-pride=true] {
+  --db-pride-red: var(--db-red-origin-default);
+  --db-pride-orange: var(--db-orange-origin-default);
+  --db-pride-yellow: var(--db-yellow-origin-default);
+  --db-pride-green: var(--db-light-green-origin-default);
+  --db-pride-blue: var(--db-blue-origin-default);
+  --db-pride-violet: var(--db-violet-origin-default);
+}
+
 html,
 body {
   margin: 0;

package/build/styles/relative.css

@@ -10415,6 +10415,15 @@ html:not(:has(> head > meta[name=color-scheme])) {
   color-scheme: dark;
 }
 
+[data-pride=true] {
+  --db-pride-red: var(--db-red-origin-default);
+  --db-pride-orange: var(--db-orange-origin-default);
+  --db-pride-yellow: var(--db-yellow-origin-default);
+  --db-pride-green: var(--db-light-green-origin-default);
+  --db-pride-blue: var(--db-blue-origin-default);
+  --db-pride-violet: var(--db-violet-origin-default);
+}
+
 html,
 body {
   margin: 0;

package/build/styles/rollup.css

@@ -10415,6 +10415,15 @@ html:not(:has(> head > meta[name=color-scheme])) {
   color-scheme: dark;
 }
 
+[data-pride=true] {
+  --db-pride-red: var(--db-red-origin-default);
+  --db-pride-orange: var(--db-orange-origin-default);
+  --db-pride-yellow: var(--db-yellow-origin-default);
+  --db-pride-green: var(--db-light-green-origin-default);
+  --db-pride-blue: var(--db-blue-origin-default);
+  --db-pride-violet: var(--db-violet-origin-default);
+}
+
 html,
 body {
   margin: 0;

package/build/styles/webpack.css

@@ -10415,6 +10415,15 @@ html:not(:has(> head > meta[name=color-scheme])) {
   color-scheme: dark;
 }
 
+[data-pride=true] {
+  --db-pride-red: var(--db-red-origin-default);
+  --db-pride-orange: var(--db-orange-origin-default);
+  --db-pride-yellow: var(--db-yellow-origin-default);
+  --db-pride-green: var(--db-light-green-origin-default);
+  --db-pride-blue: var(--db-blue-origin-default);
+  --db-pride-violet: var(--db-violet-origin-default);
+}
+
 html,
 body {
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-foundations",
-  "version": "3.0.2-copilot2-e7bf98b",
+  "version": "3.0.2-shell2-badc28f",
   "type": "module",
   "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
   "repository": {
@@ -12,7 +12,6 @@
   "types": "./build/index.d.ts",
   "module": "./build/index.js",
   "files": [
-    "agent",
     "assets",
     "build"
   ],
@@ -28,7 +27,6 @@
     "build:06_ts": "tsc",
     "clean": "rm --recursive --force build",
     "copy-build": "npm-run-all copy-build:*",
-    "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent -o",
     "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
     "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
     "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
@@ -39,6 +37,7 @@
     "dev": "vite --open",
     "generate:fonts": "tsx assets/fonts/generate-eu-fonts.ts",
     "generate:icons": "tsx scripts/local/generate-icon-font.ts",
+    "postcopy-prepare:icon-overview": "prettier dev/icons.html --write",
     "prebuild": "npm-run-all copy-prepare:*",
     "predev": "npm-run-all copy-prepare:*",
     "prestart": "npm-run-all copy-prepare:*",
@@ -52,7 +51,7 @@
     "@playwright/test": "1.54.1",
     "cpr": "3.0.1",
     "cssnano": "7.1.0",
-    "dotenv": "17.2.0",
+    "dotenv": "17.2.1",
     "glob": "11.0.3",
     "nodemon": "3.1.10",
     "prettier": "3.6.2",

package/agent/_instructions.md

@@ -1,15 +0,0 @@
-## CSS
-
-- If you use CSS follow these rules:
-    - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/css/Variables.md
-
-## SCSS
-
-- If you use SCSS follow these rules:
-    - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/scss/Variables.md
-
-## Tailwind
-
-- If you use Tailwind follow these rules:
-    - use for `variables` like, sizing, spacing, elevation, border, container-size the file **agent-path**/tailwind/Variables.md
-    - Always stick with the variables don't use something like `p-4` or `m-[16px]` use `p-fix-xs` or `m-fix-md` instead.

package/agent/css/Variables.md

@@ -1,130 +0,0 @@
-```css
-.my-component {
-	inline-size: var(--db-sizing-md); /* Use sizing for fixed widths */
-	block-size: var(--db-sizing-lg); /* Use sizing for fixed heights */
-	padding: var(--db-spacing-fixed-sm); /* Use fixed spacing for paddings */
-	margin: var(
-		--db-spacing-responsive-md
-	); /* Use responsive spacing for margins */
-	border-radius: var(--db-border-radius-md); /* Use border radius */
-	transition-duration: var(
-		--db-transition-duration-medium
-	); /* Use transition duration */
-	border-width: var(--db-border-width-md); /* Use border width */
-}
-```
-
-## CSS Variables List
-
-Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
-
-- `--db-sizing-3xs`
-- `--db-sizing-2xs`
-- `--db-sizing-xs`
-- `--db-sizing-sm`
-- `--db-sizing-md`
-- `--db-sizing-lg`
-- `--db-sizing-xl`
-- `--db-sizing-2xl`
-- `--db-sizing-3xl`
-
-Use fixed spacings for all kind of distances (margin, padding, ...)
-
-- `--db-spacing-fixed-3xs`
-- `--db-spacing-fixed-2xs`
-- `--db-spacing-fixed-xs`
-- `--db-spacing-fixed-sm`
-- `--db-spacing-fixed-md`
-- `--db-spacing-fixed-lg`
-- `--db-spacing-fixed-xl`
-- `--db-spacing-fixed-2xl`
-- `--db-spacing-fixed-3xl`
-
-The primary use-case for responsive spacings are paddings/gaps in an application e.g. the <main> should have a responsive padding.
-
-- `--db-spacing-responsive-3xs`
-- `--db-spacing-responsive-2xs`
-- `--db-spacing-responsive-xs`
-- `--db-spacing-responsive-sm`
-- `--db-spacing-responsive-md`
-- `--db-spacing-responsive-lg`
-- `--db-spacing-responsive-xl`
-- `--db-spacing-responsive-2xl`
-- `--db-spacing-responsive-3xl`
-
-Elevation
-
-- `--db-elevation-sm`
-- `--db-elevation-md`
-- `--db-elevation-lg`
-
-Border
-
-- `--db-border-width-3xs`
-- `--db-border-width-2xs`
-- `--db-border-width-xs`
-- `--db-border-width-sm`
-- `--db-border-width-md`
-- `--db-border-width-lg`
-- `--db-border-width-xl`
-- `--db-border-width-2xl`
-- `--db-border-width-3xl`
-- `--db-border-radius-3xs`
-- `--db-border-radius-2xs`
-- `--db-border-radius-xs`
-- `--db-border-radius-sm`
-- `--db-border-radius-md`
-- `--db-border-radius-lg`
-- `--db-border-radius-xl`
-- `--db-border-radius-2xl`
-- `--db-border-radius-3xl`
-- `--db-border-radius-full`
-
-Opacity
-
-- `--db-opacity-3xs`
-- `--db-opacity-2xs`
-- `--db-opacity-xs`
-- `--db-opacity-sm`
-- `--db-opacity-md`
-- `--db-opacity-lg`
-- `--db-opacity-xl`
-- `--db-opacity-2xl`
-- `--db-opacity-3xl`
-- `--db-opacity-full`
-
-Transitions
-
-- `--db-transition-duration-extra-slow`
-- `--db-transition-duration-slow`
-- `--db-transition-duration-medium`
-- `--db-transition-duration-fast`
-- `--db-transition-duration-extra-fast`
-- `--db-transition-timing-emotional`
-- `--db-transition-timing-functional`
-- `--db-transition-timing-show`
-- `--db-transition-timing-hide`
-- `--db-transition-straight-emotional`
-- `--db-transition-straight-functional`
-- `--db-transition-straight-show`
-- `--db-transition-straight-hide`
-
-Screen sizes
-
-- `--db-screen-xs`
-- `--db-screen-sm`
-- `--db-screen-md`
-- `--db-screen-lg`
-- `--db-screen-xl`
-
-Container sizes
-
-- `--db-container-3xs`
-- `--db-container-2xs`
-- `--db-container-xs`
-- `--db-container-sm`
-- `--db-container-md`
-- `--db-container-lg`
-- `--db-container-xl`
-- `--db-container-2xl`
-- `--db-container-3xl`

package/agent/scss/Variables.md

@@ -1,131 +0,0 @@
-```scss
-@use "@db-ux/core-foundations/build/styles/variables";
-
-.my-component {
-	inline-size: variables.$db-sizing-md; // Use sizing for fixed widths
-	block-size: variables.$db-sizing-lg; // Use sizing for fixed heights
-	padding: variables.$db-spacing-fixed-sm; // Use fixed spacing for paddings
-	margin: variables.$db-spacing-responsive-md; // Use responsive spacing for margins
-	border-radius: variables.$db-border-radius-md; // Use border radius
-	transition-duration: variables.$db-transition-duration-medium; // Use transition duration
-	border-width: variables.$db-border-width-md; // Use border width
-}
-```
-
-### SCSS Variables List
-
-Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
-
-- `$db-sizing-3xs`
-- `$db-sizing-2xs`
-- `$db-sizing-xs`
-- `$db-sizing-sm`
-- `$db-sizing-md`
-- `$db-sizing-lg`
-- `$db-sizing-xl`
-- `$db-sizing-2xl`
-- `$db-sizing-3xl`
-
-Use fixed spacings for all kind of distances (margin, padding, ...)
-
-- `$db-spacing-fixed-3xs`
-- `$db-spacing-fixed-2xs`
-- `$db-spacing-fixed-xs`
-- `$db-spacing-fixed-sm`
-- `$db-spacing-fixed-md`
-- `$db-spacing-fixed-lg`
-- `$db-spacing-fixed-xl`
-- `$db-spacing-fixed-2xl`
-- `$db-spacing-fixed-3xl`
-
-The primary use-case for responsive spacings are paddings/gaps in an application e.g. the <main> should have a responsive padding.
-
-- `$db-spacing-responsive-3xs`
-- `$db-spacing-responsive-2xs`
-- `$db-spacing-responsive-xs`
-- `$db-spacing-responsive-sm`
-- `$db-spacing-responsive-md`
-- `$db-spacing-responsive-lg`
-- `$db-spacing-responsive-xl`
-- `$db-spacing-responsive-2xl`
-- `$db-spacing-responsive-3xl`
-
-Use elevation for shadows
-
-- `$db-elevation-sm`
-- `$db-elevation-md`
-- `$db-elevation-lg`
-
-### Use border widths for borders
-
-- `$db-border-width-3xs`
-- `$db-border-width-2xs`
-- `$db-border-width-xs`
-- `$db-border-width-sm`
-- `$db-border-width-md`
-- `$db-border-width-lg`
-- `$db-border-width-xl`
-- `$db-border-width-2xl`
-- `$db-border-width-3xl`
-
-Use border radius for rounded corners
-
-- `$db-border-radius-3xs`
-- `$db-border-radius-2xs`
-- `$db-border-radius-xs`
-- `$db-border-radius-sm`
-- `$db-border-radius-md`
-- `$db-border-radius-lg`
-- `$db-border-radius-xl`
-- `$db-border-radius-2xl`
-- `$db-border-radius-3xl`
-- `$db-border-radius-full`
-
-Use opacity for transparency effects
-
-- `$db-opacity-3xs`
-- `$db-opacity-2xs`
-- `$db-opacity-xs`
-- `$db-opacity-sm`
-- `$db-opacity-md`
-- `$db-opacity-lg`
-- `$db-opacity-xl`
-- `$db-opacity-2xl`
-- `$db-opacity-3xl`
-- `$db-opacity-full`
-
-Use transition durations for animations
-
-- `$db-transition-duration-extra-slow`
-- `$db-transition-duration-slow`
-- `$db-transition-duration-medium`
-- `$db-transition-duration-fast`
-- `$db-transition-duration-extra-fast`
-- `$db-transition-timing-emotional`
-- `$db-transition-timing-functional`
-- `$db-transition-timing-show`
-- `$db-transition-timing-hide`
-- `$db-transition-straight-emotional`
-- `$db-transition-straight-functional`
-- `$db-transition-straight-show`
-- `$db-transition-straight-hide`
-
-Use screen sizes for responsive design breakpoints
-
-- `$db-screen-xs`
-- `$db-screen-sm`
-- `$db-screen-md`
-- `$db-screen-lg`
-- `$db-screen-xl`
-
-Use container sizes for fixed containers
-
-- `$db-container-3xs`
-- `$db-container-2xs`
-- `$db-container-xs`
-- `$db-container-sm`
-- `$db-container-md`
-- `$db-container-lg`
-- `$db-container-xl`
-- `$db-container-2xl`
-- `$db-container-3xl`