@eunomia/elements 1.0.0-beta.4 → 1.0.0-beta.6

package/styles/themes/mixins/eunomia-states.mixin.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./eunomia-a11y-color.mixin.scss" as *;
 
 @mixin eunomia-all-states {
@@ -12,40 +13,63 @@
   --eun-color-warning-100: #{eunomia-dark-accessible(#c85207)};
   --eun-color-critical-100: #{eunomia-dark-accessible(#aa0014)};
   --eun-color-info-100: #{eunomia-dark-accessible(#097faf)};
+  --eun-color-success-text: var(--eun-color-success-100);
+  --eun-color-warning-text: var(--eun-color-warning-100);
+  --eun-color-critical-text: var(--eun-color-critical-100);
+  --eun-color-info-text: var(--eun-color-info-100);
+}
+
+@function -eunomia-state-text($base) {
+  @return eunomia-light-accessible(
+    $base,
+    $surface: color.mix($base, #ffffff, 5%)
+  );
 }
 
 @mixin eunomia-success {
   $base: #1a9948;
 
   --eun-color-success-100: #{$base};
-  --eun-color-success-90: #{rgba($base, 0.32)};
-  --eun-color-success-50: #{rgba($base, 0.16)};
-  --eun-color-success-30: #{rgba($base, 0.06)};
+  --eun-color-success-text: #{-eunomia-state-text($base)};
+  --eun-color-success-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-success-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-success-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-success-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-success-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-warning {
   $base: #c85207;
 
   --eun-color-warning-100: #{$base};
-  --eun-color-warning-90: #{rgba($base, 0.32)};
-  --eun-color-warning-50: #{rgba($base, 0.16)};
-  --eun-color-warning-30: #{rgba($base, 0.06)};
+  --eun-color-warning-text: #{-eunomia-state-text($base)};
+  --eun-color-warning-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-warning-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-warning-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-warning-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-warning-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-critical {
   $base: #aa0014;
 
   --eun-color-critical-100: #{$base};
-  --eun-color-critical-90: #{rgba($base, 0.32)};
-  --eun-color-critical-50: #{rgba($base, 0.16)};
-  --eun-color-critical-30: #{rgba($base, 0.06)};
+  --eun-color-critical-text: #{-eunomia-state-text($base)};
+  --eun-color-critical-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-critical-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-critical-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-critical-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-critical-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-info {
   $base: #097faf;
 
   --eun-color-info-100: #{$base};
-  --eun-color-info-90: #{rgba($base, 0.32)};
-  --eun-color-info-50: #{rgba($base, 0.16)};
-  --eun-color-info-30: #{rgba($base, 0.06)};
+  --eun-color-info-text: #{-eunomia-state-text($base)};
+  --eun-color-info-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-info-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-info-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-info-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-info-alpha-40: #{rgba($base, 0.4)};
 }

package/styles/themes/prebuilt-themes/eunomia/eunomia-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #b3c6ff;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #7b623a;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #f6ddb4;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/eunomia/eunomia.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #203a85;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #f6ddb4;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #7b623a;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();
 

package/styles/themes/prebuilt-themes/eunomia/eunomia.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-eunomia-theme() {

package/styles/themes/prebuilt-themes/fire/eunomia-fire-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #e99b96;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #743f10;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #eeb98a;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/fire/eunomia-fire.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #70150f;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #f8b982;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #7e3f08;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();
 

package/styles/themes/prebuilt-themes/fire/eunomia-fire.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-fire-theme() {

package/styles/themes/prebuilt-themes/forest/eunomia-forest-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #c4edda;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #67523f;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #e1cdba;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/forest/eunomia-forest.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #0e3f28;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #c3ab95;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #48311b;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();
 

package/styles/themes/prebuilt-themes/forest/eunomia-forest.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-forest-theme() {

package/styles/themes/prebuilt-themes/gold/eunomia-gold-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #e5d39c;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #576978;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #d1e3f3;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/gold/eunomia-gold.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #695414;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #8499ab;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #091e31;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();
 

package/styles/themes/prebuilt-themes/gold/eunomia-gold.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-gold-theme() {

package/styles/themes/prebuilt-themes/ocean/eunomia-ocean-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #bbe6f4;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #256761;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #9fe1db;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/ocean/eunomia-ocean.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #063949;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #92e0d9;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #18665f;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();
 

package/styles/themes/prebuilt-themes/ocean/eunomia-ocean.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-ocean-theme() {

package/styles/themes/prebuilt-themes/salmon/eunomia-salmon-dark.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #ba9688;
   --eun-color-on-primary-950: #000000de;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #1e5373;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #99cfee;
   --eun-color-on-secondary-950: #000000de;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-dark-neutrals();
 

package/styles/themes/prebuilt-themes/salmon/eunomia-salmon.mixin.scss

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #7c5140;
   --eun-color-on-primary-950: #ffffff;
-  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
-  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
-  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
-  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+  --eun-color-primary-alpha-5: #{rgba($primary-500, 0.05)};
+  --eun-color-primary-alpha-10: #{rgba($primary-500, 0.1)};
+  --eun-color-primary-alpha-20: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-alpha-30: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-alpha-40: #{rgba($primary-500, 0.4)};
 
   --eun-color-secondary-50: #85c3e8;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #0a496d;
   --eun-color-on-secondary-950: #ffffff;
-  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
-  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
-  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
-  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+  --eun-color-secondary-alpha-5: #{rgba($secondary-500, 0.05)};
+  --eun-color-secondary-alpha-10: #{rgba($secondary-500, 0.1)};
+  --eun-color-secondary-alpha-20: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-alpha-30: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-alpha-40: #{rgba($secondary-500, 0.4)};
 
   @include eunomia-neutrals();