npm - @db-ux/core-foundations - Versions diffs - 4.5.4 → 4.6.0 - Mend

@db-ux/core-foundations 4.5.4 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/CHANGELOG.md +10 -0
package/README.md +16 -69
package/agent/_instructions.md +84 -0
package/agent/tailwind/Variables.md +11 -9
package/build/styles/bundle.css +4820 -0
package/build/styles/{index.scss → bundle.scss} +5 -0
package/build/styles/colors/_default-color-mappings.scss +3461 -3472
package/build/styles/colors/_placeholder.scss +155 -159
package/build/styles/colors/classes/all.css +2499 -2601
package/build/styles/colors/classes/blue.css +147 -185
package/build/styles/colors/classes/brand.css +147 -185
package/build/styles/colors/classes/burgundy.css +147 -185
package/build/styles/colors/classes/critical.css +147 -185
package/build/styles/colors/classes/cyan.css +147 -185
package/build/styles/colors/classes/green.css +147 -185
package/build/styles/colors/classes/informational.css +147 -185
package/build/styles/colors/classes/light-green.css +147 -185
package/build/styles/colors/classes/neutral.css +147 -185
package/build/styles/colors/classes/orange.css +147 -185
package/build/styles/colors/classes/pink.css +147 -185
package/build/styles/colors/classes/red.css +147 -185
package/build/styles/colors/classes/successful.css +147 -185
package/build/styles/colors/classes/turquoise.css +147 -185
package/build/styles/colors/classes/violet.css +147 -185
package/build/styles/colors/classes/warning.css +147 -185
package/build/styles/colors/classes/yellow.css +147 -185
package/build/styles/defaults/default-code.css +97 -97
package/build/styles/defaults/default-container-properties.css +1 -0
package/build/styles/defaults/default-container-variables.css +1 -0
package/build/styles/defaults/default-elevation.css +1 -1
package/build/styles/defaults/default-fonts.css +1 -1
package/build/styles/defaults/default-icons.css +1 -1
package/build/styles/defaults/default-properties.css +1 -0
package/build/styles/defaults/default-required.css +1 -1
package/build/styles/defaults/default-required.scss +13 -16
package/build/styles/defaults/default-root.css +97 -97
package/build/styles/defaults/default-variables.css +1 -0
package/build/styles/density/_scaling-placeholder.scss +51 -54
package/build/styles/density/_typography-placeholder.scss +54 -60
package/build/styles/density/classes/all.css +759 -907
package/build/styles/density/classes/expressive.css +255 -377
package/build/styles/density/classes/functional.css +255 -377
package/build/styles/density/classes/regular.css +255 -377
package/build/styles/fonts/_font-sizes.scss +10 -16
package/build/styles/fonts/absolute.scss +1 -1
package/build/styles/fonts/classes/all.css +54 -214
package/build/styles/fonts/classes/body/2xl.css +3 -95
package/build/styles/fonts/classes/body/2xs.css +3 -95
package/build/styles/fonts/classes/body/3xl.css +3 -95
package/build/styles/fonts/classes/body/3xs.css +3 -95
package/build/styles/fonts/classes/body/all.css +27 -151
package/build/styles/fonts/classes/body/lg.css +3 -95
package/build/styles/fonts/classes/body/md.css +3 -95
package/build/styles/fonts/classes/body/sm.css +3 -95
package/build/styles/fonts/classes/body/xl.css +3 -95
package/build/styles/fonts/classes/body/xs.css +3 -95
package/build/styles/fonts/classes/headline/2xl.css +3 -95
package/build/styles/fonts/classes/headline/2xs.css +3 -95
package/build/styles/fonts/classes/headline/3xl.css +3 -95
package/build/styles/fonts/classes/headline/3xs.css +3 -95
package/build/styles/fonts/classes/headline/all.css +27 -151
package/build/styles/fonts/classes/headline/lg.css +3 -95
package/build/styles/fonts/classes/headline/md.css +3 -95
package/build/styles/fonts/classes/headline/sm.css +3 -95
package/build/styles/fonts/classes/headline/xl.css +3 -95
package/build/styles/fonts/classes/headline/xs.css +3 -95
package/build/styles/fonts/relative.scss +1 -1
package/build/styles/fonts/rollup.scss +1 -1
package/build/styles/fonts/webpack.scss +1 -1
package/build/styles/helpers/_index.scss +0 -1
package/build/styles/helpers/classes/all.css +0 -34
package/build/styles/helpers/classes/divider.css +0 -34
package/build/styles/helpers/classes/focus.css +0 -34
package/build/styles/icons/absolute.css +1 -1
package/build/styles/icons/absolute.scss +1 -1
package/build/styles/icons/relative.css +1 -1
package/build/styles/icons/relative.scss +1 -1
package/build/styles/icons/rollup.css +1 -1
package/build/styles/icons/rollup.scss +1 -1
package/build/styles/icons/webpack.css +1 -1
package/build/styles/icons/webpack.scss +1 -1
package/build/styles/theme/absolute.css +1 -0
package/build/styles/theme/relative.css +1 -0
package/build/styles/{defaults/default-theme.scss → theme/relative.scss} +3 -6
package/build/styles/theme/rollup.css +1 -0
package/build/styles/theme/webpack.css +1 -0
package/build/tailwind/theme/colors.css +1 -2953
package/build/tailwind/theme/colors.scss +1 -10
package/build/tailwind/theme/dimensions.css +77 -160
package/package.json +4 -4
package/build/styles/absolute.css +0 -10635
package/build/styles/defaults/default-theme.css +0 -97
package/build/styles/helpers/_layer.scss +0 -1
package/build/styles/index.css +0 -4907
package/build/styles/relative.css +0 -10635
package/build/styles/relative.scss +0 -4
package/build/styles/rollup.css +0 -10635
package/build/styles/webpack.css +0 -10635
package/build/tailwind/theme/_variables.scss +0 -77
package/build/tailwind/theme/dimensions.scss +0 -17
/package/build/styles/defaults/{_default-container-properties.scss → default-container-properties.scss} +0 -0
/package/build/styles/defaults/{_default-container-variables.scss → default-container-variables.scss} +0 -0
/package/build/styles/defaults/{_default-properties.scss → default-properties.scss} +0 -0
/package/build/styles/defaults/{_default-variables.scss → default-variables.scss} +0 -0
/package/build/styles/{_absolute.assets-paths.scss → theme/_absolute.assets-paths.scss} +0 -0
/package/build/styles/{_default.assets-paths.scss → theme/_default.assets-paths.scss} +0 -0
/package/build/styles/{_rollup.assets-paths.scss → theme/_rollup.assets-paths.scss} +0 -0
/package/build/styles/{_webpack.assets-paths.scss → theme/_webpack.assets-paths.scss} +0 -0
/package/build/styles/{absolute.scss → theme/absolute.scss} +0 -0
/package/build/styles/{rollup.scss → theme/rollup.scss} +0 -0
/package/build/styles/{webpack.scss → theme/webpack.scss} +0 -0

package/build/styles/colors/classes/red.css CHANGED Viewed

@@ -1,193 +1,155 @@
 /* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
 [data-color=red],
 .db-color-red {
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
-}
-@layer variables {
-  [data-color=red],
-  .db-color-red {
-    --db-adaptive-bg-basic-level-1-default: var(
-    	--db-red-bg-basic-level-1-default
-    );
-    --db-adaptive-bg-basic-level-1-hovered: var(
-    	--db-red-bg-basic-level-1-hovered
-    );
-    --db-adaptive-bg-basic-level-1-pressed: var(
-    	--db-red-bg-basic-level-1-pressed
-    );
-    --db-adaptive-bg-basic-level-2-default: var(
-    	--db-red-bg-basic-level-2-default
-    );
-    --db-adaptive-bg-basic-level-2-hovered: var(
-    	--db-red-bg-basic-level-2-hovered
-    );
-    --db-adaptive-bg-basic-level-2-pressed: var(
-    	--db-red-bg-basic-level-2-pressed
-    );
-    --db-adaptive-bg-basic-level-3-default: var(
-    	--db-red-bg-basic-level-3-default
-    );
-    --db-adaptive-bg-basic-level-3-hovered: var(
-    	--db-red-bg-basic-level-3-hovered
-    );
-    --db-adaptive-bg-basic-level-3-pressed: var(
-    	--db-red-bg-basic-level-3-pressed
-    );
-    --db-adaptive-bg-basic-transparent-full-default: var(
-    	--db-red-bg-basic-transparent-full-default
-    );
-    --db-adaptive-bg-basic-transparent-semi-default: var(
-    	--db-red-bg-basic-transparent-semi-default
-    );
-    --db-adaptive-bg-basic-transparent-full-hovered: var(
-    	--db-red-bg-basic-transparent-full-hovered
-    );
-    --db-adaptive-bg-basic-transparent-full-pressed: var(
-    	--db-red-bg-basic-transparent-full-pressed
-    );
-    --db-adaptive-bg-basic-transparent-semi-hovered: var(
-    	--db-red-bg-basic-transparent-semi-hovered
-    );
-    --db-adaptive-bg-basic-transparent-semi-pressed: var(
-    	--db-red-bg-basic-transparent-semi-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-default: var(
-    	--db-red-on-bg-basic-emphasis-100-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-    	--db-red-on-bg-basic-emphasis-100-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-    	--db-red-on-bg-basic-emphasis-100-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-default: var(
-    	--db-red-on-bg-basic-emphasis-90-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
-    	--db-red-on-bg-basic-emphasis-90-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
-    	--db-red-on-bg-basic-emphasis-90-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-default: var(
-    	--db-red-on-bg-basic-emphasis-80-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
-    	--db-red-on-bg-basic-emphasis-80-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
-    	--db-red-on-bg-basic-emphasis-80-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-default: var(
-    	--db-red-on-bg-basic-emphasis-70-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
-    	--db-red-on-bg-basic-emphasis-70-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
-    	--db-red-on-bg-basic-emphasis-70-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-60-default: var(
-    	--db-red-on-bg-basic-emphasis-60-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-50-default: var(
-    	--db-red-on-bg-basic-emphasis-50-default
-    );
-    --db-adaptive-bg-inverted-contrast-max-default: var(
-    	--db-red-bg-inverted-contrast-max-default
-    );
-    --db-adaptive-bg-inverted-contrast-max-hovered: var(
-    	--db-red-bg-inverted-contrast-max-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-max-pressed: var(
-    	--db-red-bg-inverted-contrast-max-pressed
-    );
-    --db-adaptive-bg-inverted-contrast-high-default: var(
-    	--db-red-bg-inverted-contrast-high-default
-    );
-    --db-adaptive-bg-inverted-contrast-high-hovered: var(
-    	--db-red-bg-inverted-contrast-high-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-high-pressed: var(
-    	--db-red-bg-inverted-contrast-high-pressed
-    );
-    --db-adaptive-bg-inverted-contrast-low-default: var(
-    	--db-red-bg-inverted-contrast-low-default
-    );
-    --db-adaptive-bg-inverted-contrast-low-hovered: var(
-    	--db-red-bg-inverted-contrast-low-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-low-pressed: var(
-    	--db-red-bg-inverted-contrast-low-pressed
-    );
-    --db-adaptive-on-bg-inverted-default: var(
-    	--db-red-on-bg-inverted-default
-    );
-    --db-adaptive-on-bg-inverted-hovered: var(
-    	--db-red-on-bg-inverted-hovered
-    );
-    --db-adaptive-on-bg-inverted-pressed: var(
-    	--db-red-on-bg-inverted-pressed
-    );
-    --db-adaptive-origin-default: var(--db-red-origin-default);
-    --db-adaptive-origin-hovered: var(--db-red-origin-hovered);
-    --db-adaptive-origin-pressed: var(--db-red-origin-pressed);
-    --db-adaptive-on-origin-default: var(
-    	--db-red-on-origin-default
-    );
-    --db-adaptive-bg-vibrant-default: var(
-    	--db-red-bg-vibrant-default
-    );
-    --db-adaptive-bg-vibrant-hovered: var(
-    	--db-red-bg-vibrant-hovered
-    );
-    --db-adaptive-bg-vibrant-pressed: var(
-    	--db-red-bg-vibrant-pressed
-    );
-    --db-adaptive-on-bg-vibrant-default: var(
-    	--db-red-on-bg-vibrant-default
-    );
-    --db-adaptive-on-bg-vibrant-hovered: var(
-    	--db-red-on-bg-vibrant-hovered
-    );
-    --db-adaptive-on-bg-vibrant-pressed: var(
-    	--db-red-on-bg-vibrant-pressed
-    );
-  }
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-red-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-red-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-red-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-red-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-red-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-red-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-red-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-red-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-red-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-red-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-red-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-red-bg-basic-transparent-full-hovered
+  );
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-red-bg-basic-transparent-full-pressed
+  );
+  --db-adaptive-bg-basic-transparent-semi-hovered: var(
+  	--db-red-bg-basic-transparent-semi-hovered
+  );
+  --db-adaptive-bg-basic-transparent-semi-pressed: var(
+  	--db-red-bg-basic-transparent-semi-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-red-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-red-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-red-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-red-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-red-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-red-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-red-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-red-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-red-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-red-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-red-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-red-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-red-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-red-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-red-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-red-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-red-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-red-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-red-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-red-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-red-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-red-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-red-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-red-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-red-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-red-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-red-origin-default);
+  --db-adaptive-origin-hovered: var(--db-red-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-red-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-red-on-origin-default
+  );
+  --db-adaptive-bg-vibrant-default: var(
+  	--db-red-bg-vibrant-default
+  );
+  --db-adaptive-bg-vibrant-hovered: var(
+  	--db-red-bg-vibrant-hovered
+  );
+  --db-adaptive-bg-vibrant-pressed: var(
+  	--db-red-bg-vibrant-pressed
+  );
+  --db-adaptive-on-bg-vibrant-default: var(
+  	--db-red-on-bg-vibrant-default
+  );
+  --db-adaptive-on-bg-vibrant-hovered: var(
+  	--db-red-on-bg-vibrant-hovered
+  );
+  --db-adaptive-on-bg-vibrant-pressed: var(
+  	--db-red-on-bg-vibrant-pressed
+  );
 }
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
-@layer variables {}
 [data-color=red],
 .db-color-red {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/styles/colors/classes/successful.css CHANGED Viewed

@@ -1,192 +1,154 @@
 /* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-@layer variables {}
-@layer variables {}
 [data-color=successful],
 .db-color-successful {
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-successful-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-successful-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-successful-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-successful-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-successful-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-successful-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-successful-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-successful-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-successful-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-successful-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-successful-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-full-hovered: var(
+  	--db-successful-bg-basic-transparent-full-hovered
+  );
+  --db-adaptive-bg-basic-transparent-full-pressed: var(
+  	--db-successful-bg-basic-transparent-full-pressed
+  );
+  --db-adaptive-bg-basic-transparent-semi-hovered: var(
+  	--db-successful-bg-basic-transparent-semi-hovered
+  );
+  --db-adaptive-bg-basic-transparent-semi-pressed: var(
+  	--db-successful-bg-basic-transparent-semi-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-successful-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-successful-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-successful-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-successful-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-successful-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-successful-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-successful-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-successful-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-successful-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-successful-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-successful-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-successful-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-successful-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-successful-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-successful-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-successful-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-successful-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-successful-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-successful-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-successful-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-successful-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-successful-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-successful-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-successful-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-successful-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-successful-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-successful-origin-default);
+  --db-adaptive-origin-hovered: var(--db-successful-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-successful-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-successful-on-origin-default
+  );
+  --db-adaptive-bg-vibrant-default: var(
+  	--db-successful-bg-vibrant-default
+  );
+  --db-adaptive-bg-vibrant-hovered: var(
+  	--db-successful-bg-vibrant-hovered
+  );
+  --db-adaptive-bg-vibrant-pressed: var(
+  	--db-successful-bg-vibrant-pressed
+  );
+  --db-adaptive-on-bg-vibrant-default: var(
+  	--db-successful-on-bg-vibrant-default
+  );
+  --db-adaptive-on-bg-vibrant-hovered: var(
+  	--db-successful-on-bg-vibrant-hovered
+  );
+  --db-adaptive-on-bg-vibrant-pressed: var(
+  	--db-successful-on-bg-vibrant-pressed
+  );
 }
-@layer variables {
-  [data-color=successful],
-  .db-color-successful {
-    --db-adaptive-bg-basic-level-1-default: var(
-    	--db-successful-bg-basic-level-1-default
-    );
-    --db-adaptive-bg-basic-level-1-hovered: var(
-    	--db-successful-bg-basic-level-1-hovered
-    );
-    --db-adaptive-bg-basic-level-1-pressed: var(
-    	--db-successful-bg-basic-level-1-pressed
-    );
-    --db-adaptive-bg-basic-level-2-default: var(
-    	--db-successful-bg-basic-level-2-default
-    );
-    --db-adaptive-bg-basic-level-2-hovered: var(
-    	--db-successful-bg-basic-level-2-hovered
-    );
-    --db-adaptive-bg-basic-level-2-pressed: var(
-    	--db-successful-bg-basic-level-2-pressed
-    );
-    --db-adaptive-bg-basic-level-3-default: var(
-    	--db-successful-bg-basic-level-3-default
-    );
-    --db-adaptive-bg-basic-level-3-hovered: var(
-    	--db-successful-bg-basic-level-3-hovered
-    );
-    --db-adaptive-bg-basic-level-3-pressed: var(
-    	--db-successful-bg-basic-level-3-pressed
-    );
-    --db-adaptive-bg-basic-transparent-full-default: var(
-    	--db-successful-bg-basic-transparent-full-default
-    );
-    --db-adaptive-bg-basic-transparent-semi-default: var(
-    	--db-successful-bg-basic-transparent-semi-default
-    );
-    --db-adaptive-bg-basic-transparent-full-hovered: var(
-    	--db-successful-bg-basic-transparent-full-hovered
-    );
-    --db-adaptive-bg-basic-transparent-full-pressed: var(
-    	--db-successful-bg-basic-transparent-full-pressed
-    );
-    --db-adaptive-bg-basic-transparent-semi-hovered: var(
-    	--db-successful-bg-basic-transparent-semi-hovered
-    );
-    --db-adaptive-bg-basic-transparent-semi-pressed: var(
-    	--db-successful-bg-basic-transparent-semi-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-default: var(
-    	--db-successful-on-bg-basic-emphasis-100-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-    	--db-successful-on-bg-basic-emphasis-100-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-    	--db-successful-on-bg-basic-emphasis-100-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-default: var(
-    	--db-successful-on-bg-basic-emphasis-90-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
-    	--db-successful-on-bg-basic-emphasis-90-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
-    	--db-successful-on-bg-basic-emphasis-90-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-default: var(
-    	--db-successful-on-bg-basic-emphasis-80-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
-    	--db-successful-on-bg-basic-emphasis-80-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
-    	--db-successful-on-bg-basic-emphasis-80-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-default: var(
-    	--db-successful-on-bg-basic-emphasis-70-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
-    	--db-successful-on-bg-basic-emphasis-70-hovered
-    );
-    --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
-    	--db-successful-on-bg-basic-emphasis-70-pressed
-    );
-    --db-adaptive-on-bg-basic-emphasis-60-default: var(
-    	--db-successful-on-bg-basic-emphasis-60-default
-    );
-    --db-adaptive-on-bg-basic-emphasis-50-default: var(
-    	--db-successful-on-bg-basic-emphasis-50-default
-    );
-    --db-adaptive-bg-inverted-contrast-max-default: var(
-    	--db-successful-bg-inverted-contrast-max-default
-    );
-    --db-adaptive-bg-inverted-contrast-max-hovered: var(
-    	--db-successful-bg-inverted-contrast-max-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-max-pressed: var(
-    	--db-successful-bg-inverted-contrast-max-pressed
-    );
-    --db-adaptive-bg-inverted-contrast-high-default: var(
-    	--db-successful-bg-inverted-contrast-high-default
-    );
-    --db-adaptive-bg-inverted-contrast-high-hovered: var(
-    	--db-successful-bg-inverted-contrast-high-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-high-pressed: var(
-    	--db-successful-bg-inverted-contrast-high-pressed
-    );
-    --db-adaptive-bg-inverted-contrast-low-default: var(
-    	--db-successful-bg-inverted-contrast-low-default
-    );
-    --db-adaptive-bg-inverted-contrast-low-hovered: var(
-    	--db-successful-bg-inverted-contrast-low-hovered
-    );
-    --db-adaptive-bg-inverted-contrast-low-pressed: var(
-    	--db-successful-bg-inverted-contrast-low-pressed
-    );
-    --db-adaptive-on-bg-inverted-default: var(
-    	--db-successful-on-bg-inverted-default
-    );
-    --db-adaptive-on-bg-inverted-hovered: var(
-    	--db-successful-on-bg-inverted-hovered
-    );
-    --db-adaptive-on-bg-inverted-pressed: var(
-    	--db-successful-on-bg-inverted-pressed
-    );
-    --db-adaptive-origin-default: var(--db-successful-origin-default);
-    --db-adaptive-origin-hovered: var(--db-successful-origin-hovered);
-    --db-adaptive-origin-pressed: var(--db-successful-origin-pressed);
-    --db-adaptive-on-origin-default: var(
-    	--db-successful-on-origin-default
-    );
-    --db-adaptive-bg-vibrant-default: var(
-    	--db-successful-bg-vibrant-default
-    );
-    --db-adaptive-bg-vibrant-hovered: var(
-    	--db-successful-bg-vibrant-hovered
-    );
-    --db-adaptive-bg-vibrant-pressed: var(
-    	--db-successful-bg-vibrant-pressed
-    );
-    --db-adaptive-on-bg-vibrant-default: var(
-    	--db-successful-on-bg-vibrant-default
-    );
-    --db-adaptive-on-bg-vibrant-hovered: var(
-    	--db-successful-on-bg-vibrant-hovered
-    );
-    --db-adaptive-on-bg-vibrant-pressed: var(
-    	--db-successful-on-bg-vibrant-pressed
-    );
-  }
-}
-@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-color=successful],
 .db-color-successful {