npm - @eunomia/elements - Versions diffs - 1.0.0-beta.5 → 1.0.0-beta.7 - Mend

@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

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 (516) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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();

package/styles/themes/prebuilt-themes/salmon/eunomia-salmon.theme.scss CHANGED Viewed

@@ -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-salmon-theme() {

package/styles/themes/prebuilt-themes/violet/eunomia-violet-dark.mixin.scss CHANGED Viewed

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #000000de;
   --eun-color-primary-950: #b495e3;
   --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: #357777;
   --eun-color-on-secondary-50: #ffffff;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #000000de;
   --eun-color-secondary-950: #aff2f1;
   --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/violet/eunomia-violet.mixin.scss CHANGED Viewed

@@ -26,11 +26,11 @@
   --eun-color-on-primary-900: #ffffff;
   --eun-color-primary-950: #391571;
   --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: #82d0d0;
   --eun-color-on-secondary-50: #000000de;
@@ -54,11 +54,11 @@
   --eun-color-on-secondary-900: #ffffff;
   --eun-color-secondary-950: #075655;
   --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();