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

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-fire-theme-colors {
   $primary-500: #d8291c;
   $secondary-500: #f2790f;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #fdf4f4;
   --eun-divider-tint: #ded7dd;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-forest-dark-theme-colors {
   $primary-500: #8cddb7;
   $secondary-500: #c49e7b;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2b363f;
   --eun-divider-tint: #68748c;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-forest-theme-colors {
   $primary-500: #1b7a4d;
   $secondary-500: #8b5e34;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f4f8f6;
   --eun-divider-tint: #d4dbdf;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-gold-dark-theme-colors {
   $primary-500: #ccab42;
   $secondary-500: #a7c9e7;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2e3339;
   --eun-divider-tint: #6b7186;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-gold-theme-colors {
   $primary-500: #c9a227;
   $secondary-500: #123a5e;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #fcfaf4;
   --eun-divider-tint: #dddddd;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-ocean-dark-theme-colors {
   $primary-500: #7dd1ea;
   $secondary-500: #46c6ba;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a3542;
   --eun-divider-tint: #67738f;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-ocean-theme-colors {
   $primary-500: #0b6e8c;
   $secondary-500: #2ec4b6;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f3f8f9;
   --eun-divider-tint: #d3dae2;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-salmon-dark-theme-colors {
   $primary-500: #ef9c7c;
   $secondary-500: #3ba1dd;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a2d37;
   --eun-divider-tint: #676b84;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-salmon-theme-colors {
   $primary-500: #ef9c7c;
   $secondary-500: #148cd2;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #fefaf8;
   --eun-divider-tint: #dfdde2;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-dark-theme-colors {
   $primary-500: #8b5bd5;
   $secondary-500: #65e6e5;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: rgba(255, 255, 255, 0.08);
-  --eun-content-pressed: rgba(255, 255, 255, 0.14);
-  --eun-divider-color: var(--eun-color-grey-300);
-  --eun-border-color: var(--eun-color-grey-300);
-  --eun-surface-color: var(--eun-color-grey-0);
-  --eun-disabled-color: var(--eun-color-grey-200);
-  --eun-readonly-color: var(--eun-color-grey-600);
-  --eun-text-color: var(--eun-color-grey-800);
-  --eun-text-secondary: var(--eun-color-grey-700);
-  --eun-placeholder-color: var(--eun-color-grey-400);
-  --eun-text-disabled-color: var(--eun-color-grey-500);
-  --eun-text-readonly-color: var(--eun-color-grey-400);
-  --eun-disabled-content: var(--eun-color-grey-400);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a2d40;
   --eun-divider-tint: #666b8d;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-theme-colors {
   $primary-500: #6d28d9;
   $secondary-500: #0ea5a4;
@@ -58,19 +60,7 @@
   --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
   --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
 
-  --eun-content-hover: #edeff0;
-  --eun-content-pressed: #e4e6e8;
-  --eun-divider-color: #dee0e7;
-  --eun-border-color: #dee0e7;
-  --eun-surface-color: #ffffff;
-  --eun-disabled-color: #ecedf0;
-  --eun-readonly-color: #666e8a;
-  --eun-text-color: #071621;
-  --eun-text-secondary: #484e61;
-  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
-  --eun-text-disabled-color: #8d93aa;
-  --eun-text-readonly-color: #c1c9d6;
-  --eun-disabled-content: #c1c9d6;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f8f4fd;
   --eun-divider-tint: #d8d7e6;

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

@@ -9,6 +9,7 @@
 @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-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

package/styles/tools/indexes/eunomia-tools.index.scss

@@ -1,3 +1,4 @@
+@forward './../mixins/settings/eunomia-alpha.mixin.scss';
 @forward './../mixins/settings/eunomia-border.mixin.scss';
 @forward './../mixins/settings/eunomia-breakpoints.mixin.scss';
 @forward './../mixins/settings/eunomia-font.mixin.scss';

package/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -0,0 +1,39 @@
+// Translucent surface/text primitives, derived from the active theme's
+// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
+// color mixin, so they follow light/dark and brand switches automatically.
+@mixin eunomia-alpha {
+  --eun-surface-transparent-25: color-mix(
+    in srgb,
+    var(--eun-surface-color) 25%,
+    transparent
+  );
+  --eun-surface-transparent-50: color-mix(
+    in srgb,
+    var(--eun-surface-color) 50%,
+    transparent
+  );
+  --eun-surface-transparent-75: color-mix(
+    in srgb,
+    var(--eun-surface-color) 75%,
+    transparent
+  );
+
+  --eun-text-transparent-25: color-mix(
+    in srgb,
+    var(--eun-text-color) 25%,
+    transparent
+  );
+  --eun-text-transparent-50: color-mix(
+    in srgb,
+    var(--eun-text-color) 50%,
+    transparent
+  );
+  --eun-text-transparent-75: color-mix(
+    in srgb,
+    var(--eun-text-color) 75%,
+    transparent
+  );
+
+  // Fixed (theme-independent) muted text, legible on a dark surface
+  --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+}

package/styles/tools/mixins/settings/eunomia-border.mixin.scss

@@ -1,5 +1,5 @@
 @mixin eunomia-border-width {
-  --eun-borderWidth-s: 1px;
-  --eun-borderWidth-m: 1.5px;
-  --eun-borderWidth-l: 2px;
+  --eun-border-width-s: 1px;
+  --eun-border-width-m: 1.5px;
+  --eun-border-width-l: 2px;
 }

package/styles/tools/mixins/settings/eunomia-font.mixin.scss

@@ -34,19 +34,19 @@
 }
 
 @mixin eunomia-font-sizes {
-  --eun-fontSize-xxs: 0.4rem;
-  --eun-fontSize-xs: 0.6rem;
-  --eun-fontSize-s: 0.82rem;
-  --eun-fontSize-m: 1rem;
-  --eun-fontSize-l: 1.3rem;
-  --eun-fontSize-xl: 1.6rem;
-  --eun-fontSize-xxl: 2rem;
-  --eun-fontSize-xxxl: 3.4rem;
-  --eun-fontSize-xxxxl: 5rem;
+  --eun-font-size-xxs: 0.4rem;
+  --eun-font-size-xs: 0.6rem;
+  --eun-font-size-s: 0.82rem;
+  --eun-font-size-m: 1rem;
+  --eun-font-size-l: 1.3rem;
+  --eun-font-size-xl: 1.6rem;
+  --eun-font-size-xxl: 2rem;
+  --eun-font-size-xxxl: 3.4rem;
+  --eun-font-size-xxxxl: 5rem;
 }
 
 @mixin eunomia-font-weight {
-  --eun-fontWeight-s: 300;
-  --eun-fontWeight-m: 500;
-  --eun-fontWeight-l: 700;
+  --eun-font-weight-s: 300;
+  --eun-font-weight-m: 500;
+  --eun-font-weight-l: 700;
 }

package/styles/tools/mixins/settings/eunomia-radius.mixin.scss

@@ -1,6 +1,6 @@
 @mixin eunomia-border-radius {
-  --eun-borderRadius-s: 5px;
-  --eun-borderRadius-m: 10px;
-  --eun-borderRadius-l: 20px;
-  --eun-borderRadius-xl: 999px;
+  --eun-border-radius-s: 5px;
+  --eun-border-radius-m: 10px;
+  --eun-border-radius-l: 20px;
+  --eun-border-radius-xl: 999px;
 }