@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/styles/01-settings/_settings.testimonials.scss

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.typography' as typography;
 @use 'settings.config' as config;
 
 $testimonial-width: 100% !default;
-$testimonial-padding-x: 0px !default;
-$testimonial-padding-y: 0px !default;
-$testimonial-inner-spacer: 20px !default;
+$testimonial-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$testimonial-padding-y: map.get($spacing-sizes, 0) !default; //0px
+$testimonial-inner-spacer: map.get($spacing-sizes, 20) !default; //20px
 $testimonial-bg: null !default;
 $testimonial-quote-font-size: typography.$h3-font-size !default;
 $testimonial-quote-font-size-sm: typography.$font-size-md !default;
@@ -15,4 +17,4 @@ $testimonial-author-font-size: typography.$font-size-base !default;
 $testimonial-author-color: var(--#{config.$prefix}body-color) !default;
 $testimonial-author-role-font-size: typography.$font-size-xs !default;
 $testimonial-author-role-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$testimonial-author-inner-spacer: 12px !default;
+$testimonial-author-inner-spacer: map.get($spacing-sizes, 12) !default; //12px

package/src/styles/01-settings/_settings.toggle.scss

@@ -1,8 +1,10 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as borderRadius;
 @use 'settings.typography' as typography;
 
-$toggle-gap: 12px !default;
+$toggle-gap: map.get($spacing-sizes, 3) !default; //12px
 
 $toggle-switch-on-bg: var(--#{config.$prefix}primary) !default;
 $toggle-switch-off-bg: var(--#{config.$prefix}tertiary-bg-subtle) !default;

package/src/styles/01-settings/_settings.tooltip.scss

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as borderRadius;
 
 $tooltip-max-width: 240px !default;
-$tooltip-padding-x: 12px !default;
-$tooltip-padding-y: 8px !default;
+$tooltip-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$tooltip-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 
 $tooltip-font-size: typography.$font-size-xs !default;
@@ -16,4 +18,4 @@ $tooltip-border-width: null !default;
 $tooltip-border-color: null !default;
 $tooltip-box-shadow: null !default;
 
-$tooltip-arrow-size: 12px !default;
+$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px

package/src/styles/01-settings/_settings.upload.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as borderRadius;
@@ -6,54 +8,54 @@ $upload-width: 500px !default;
 $upload-width-sm: 400px !default;
 $upload-width-large: 700px !default;
 
-$upload-padding-x: 0px !default;
-$upload-padding-y: 0px !default;
+$upload-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$upload-padding-y: map.get($spacing-sizes, 0) !default; //0px
 
-$upload-inner-padding-x: 12px !default;
-$upload-inner-padding-y: 12px !default;
+$upload-inner-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$upload-inner-padding-y: map.get($spacing-sizes, 3) !default; //12px
 
-$upload-large-inner-padding-x: 20px !default;
-$upload-large-inner-padding-y: 22px !default;
+$upload-large-inner-padding-x: map.get($spacing-sizes, 5) !default; //20px
+$upload-large-inner-padding-y: map.get($spacing-sizes, 5.5) !default; //22px
 
 $upload-border-radius: borderRadius.$border-radius !default;
-$upload-border-width: 1px !default;
+$upload-border-width: var(--#{config.$prefix}border-width) !default;
 $upload-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $upload-bg: var(--#{config.$prefix}body-bg) !default;
 $upload-hover-bg: null !default;
 
-$upload-icon-size: 32px !default;
-$upload-icon-padding: 0px !default;
+$upload-icon-size: map.get($spacing-sizes, 8) !default; //32px
+$upload-icon-padding: map.get($spacing-sizes, 0) !default; //0px
 $upload-icon-bg: var(--#{config.$prefix}body-bg) !default;
 
 $upload-title-font-size: typography.$font-size-lg !default;
 $upload-title-font-weight: typography.$headings-font-weight !default;
 $upload-title-color: var(--#{config.$prefix}body-color) !default;
-$upload-title-margin-top: 8px !default;
+$upload-title-margin-top:  map.get($spacing-sizes, 2) !default; //8px
 
 $upload-text-font-size: typography.$font-size-sm !default;
 $upload-text-font-weight: typography.$font-weight-normal !default;
 $upload-text-color: var(--#{config.$prefix}body-color) !default;
-$upload-text-margin-top: 4px !default;
+$upload-text-margin-top:  map.get($spacing-sizes, 4) !default; //4px
 
-$upload-btn-margin-top: 20px !default;
-$upload-btn-margin-left: 16px !default;
+$upload-btn-margin-top: map.get($spacing-sizes, 5) !default; //20px
+$upload-btn-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
-$upload-content-margin-left: 16px !default;
+$upload-content-margin-left: map.get($spacing-sizes, 4) !default; //16px
 
 $upload-helper-text-font-size: typography.$font-size-sm !default;
 $upload-helper-text-font-weight: typography.$font-weight-normal !default;
 $upload-helper-text-color: var(--#{config.$prefix}body-color) !default;
-$upload-helper-text-margin-top: 8px !default;
+$upload-helper-text-margin-top: map.get($spacing-sizes, 2) !default; //8px
 
 $upload-disabled-opacity: 0.5 !default;
 
-$upload-loader-padding-x: 12px !default;
-$upload-loader-padding-y: 12px !default;
+$upload-loader-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$upload-loader-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $upload-loader-bg-opacity: 1 !default;
 $upload-loader-border-radius: $upload-border-radius !default;
 $upload-loader-border-width: $upload-border-width !default;
 $upload-loader-border-color: $upload-border-color !default;
-$upload-loader-margin-top: 20px !default;
+$upload-loader-margin-top: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-title-color: var(--#{config.$prefix}body-color) !default;
 $upload-loader-title-font-size: typography.$font-size-sm !default;
 $upload-loader-title-font-weight: typography.$font-weight-normal !default;
@@ -61,8 +63,8 @@ $upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $upload-loader-text-font-size: typography.$font-size-sm !default;
 $upload-loader-text-margin-top: 5px !default;
 $upload-loader-bar-height: 10px !default;
-$upload-loader-bar-margin-top: 10px !default;
-$upload-loader-control-icon-size: 20px !default;
+$upload-loader-bar-margin-top: map.get($spacing-sizes, 2.5) !default; //10px
+$upload-loader-control-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
 
 $upload-loader-progress-color: var(--#{config.$prefix}primary) !default;

package/src/styles/02-tools/_tools.animations.scss

@@ -99,3 +99,22 @@
 //     $iteration-count: infinite
 //   );
 // }
+
+
+@keyframes backgroundMoving { 
+  0% {
+    background-position: 0 0%;
+  }
+   250% {
+    background-position: 100% 100%;
+  }
+   50% {
+    background-position: 100% 0%;
+  }
+  75% {
+    background-position: 0% 100%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+} 

package/src/styles/02-tools/_tools.background.scss

@@ -0,0 +1,87 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
+@use '../01-settings/settings.background' as *;
+@use '../01-settings/settings.config' as *;
+@use '../02-tools/tools.to-rgb' as *;
+
+@mixin dynamic-background(
+  $color,
+  $transparency: $background-transparency,
+  $background-transparency-enable: $background-transparency-enable,
+  $blur: $background-blur,
+  $use-backdrop-filter: $background-enable-backdrop-filter
+) {
+  // Validate inputs
+  @if $transparency < 0 or $transparency > 1 {
+    @error 'Transparency must be between 0 and 1, got #{$transparency}';
+  }
+
+  @if $blur < 0 {
+    @error 'Blur value must be non-negative, got #{$blur}px';
+  }
+
+  // Apply background based on transparency settings
+  @if $background-transparency-enable and $transparency > 0 {
+    @if $background-enable-gradient-overlay {
+      background:
+        // Top highlight layer
+        linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.15) 0%,
+          rgba(255, 255, 255, 0.05) 25%,
+          transparent 50%
+        ),
+        // Main liquid glass layer
+        linear-gradient(
+            to bottom,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.2)}, transparent) 0%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency)}, transparent) 35%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.8)}, transparent) 65%,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 1.1)}, transparent) 100%
+          ),
+        // Bottom shadow layer
+        radial-gradient(
+            ellipse at bottom,
+            color-mix(in srgb, #{$color} #{math.percentage($transparency * 0.3)}, transparent) 0%,
+            transparent 70%
+          );
+    } @else {
+      background-color: color-mix(
+        in srgb,
+        #{$color} #{math.percentage($transparency)},
+        transparent
+      );
+    }
+  } @else {
+    background-color: $color;
+  }
+
+  // Apply backdrop filter effects based on settings
+  @if $background-enable-backdrop-filter and ($blur > 0 or $use-backdrop-filter) {
+    backdrop-filter: blur(#{$blur}px) saturate(1.5) contrast(1.2) brightness(1.1);
+    -webkit-backdrop-filter: blur(#{$blur}px) saturate(1.2) contrast(1.2) brightness(1.1);
+  }
+
+  @if $background-enable-with-shadow {
+    box-shadow:
+      var(--atomix-box-shadow-inset),
+      // Inner glow
+      // inset
+      //   0
+      //   1px
+      //   0
+      //   rgba(255, 255, 255, 0.25),
+      // inset 0 -1px 0 color-mix(in srgb, #{$color} 10%, transparent),
+      // Outer depth
+      4px
+        8px
+        32px
+        color-mix(in srgb, #{$color} 20%, transparent),
+      0 1px 2px rgba(0, 0, 0, 0.1),
+      0 8px 20px color-mix(in srgb, #{$color} 20%, transparent),
+      0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}

package/src/styles/02-tools/_tools.glass.scss

@@ -0,0 +1 @@
+

package/src/styles/02-tools/_tools.rem.scss

@@ -1,9 +1,22 @@
 @use 'sass:math';
+@use 'sass:meta';
 
-@function rem($pixels) {
-  @if math.unit($pixels) == 'px' {
-    @return math.div($pixels, 16px) * 1rem;
-  } @else {
-    @return $pixels;
+@function rem($value) {
+  // Handle null values safely, just return null if value is null
+  @if $value == null {
+    @return null;
   }
+
+  // If it's not a number, return as it is
+  @if meta.type-of($value) != 'number' {
+    @return $value;
+  }
+
+  // If the value is in pixels, convert to rem
+  @if math.unit($value) == 'px' {
+    @return math.div($value, 16px) * 1rem;
+  }
+
+  // Otherwise, return the value as it is (for rem/em/% values)
+  @return $value;
 }

package/src/styles/02-tools/_tools.utility-api.scss

@@ -3,6 +3,7 @@
 //
 // This API is used to generate utility classes from utility maps defined in the 99-utilities folder.
 // It provides a consistent way to generate utility classes with responsive variants, states, and more.
+// SASS Decimal Interpolation – If you want a more technical name, this focuses on the way decimal values are now processed in SASS with this code base or you can just use integer both will work.
 
 @use 'sass:map';
 @use 'sass:string';
@@ -13,14 +14,14 @@
 
 // Default config for utilities
 $utility-defaults: (
-  responsive: true,
-  rfs: false,
-  print: false,
-  dark: false,
-  class: null,
-  state: null,
-  local-vars: (),
-  rtl: true,
+        responsive: true,
+        rfs: false,
+        print: false,
+        dark: false,
+        class: null,
+        state: null,
+        local-vars: (),
+        rtl: true,
 ) !default;
 
 // Core function to generate utility classes
@@ -37,11 +38,16 @@ $utility-defaults: (
     $property-class: map.get($utility, class);
     $property-class: if($property-class, $property-class, list.nth($properties, 1));
 
+    // Handle decimal key case for spacing, only for numbers (integers or floats)
+    @if meta.type-of($key) == 'number' and $key % 1 != 0 {
+      $key: round($key); // Round to the nearest integer
+    }
+
     // Multiple properties are possible, like with borders or shadows
     $property-class: if(
-      meta.type-of($property-class) == 'list',
-      list.nth($property-class, 1),
-      $property-class
+                    meta.type-of($property-class) == 'list',
+                    list.nth($property-class, 1),
+                    $property-class
     );
 
     // State variants (hover, focus, active, etc.)
@@ -99,9 +105,9 @@ $utility-defaults: (
 ) {
   // Set default breakpoint infix generator if not provided
   $breakpoint-infix-generator: if(
-    $breakpoint-infix-generator,
-    $breakpoint-infix-generator,
-    get-breakpoint-infix
+                  $breakpoint-infix-generator,
+                  $breakpoint-infix-generator,
+                  get-breakpoint-infix
   );
 
   @each $utility, $config in $utilities {
@@ -111,17 +117,17 @@ $utility-defaults: (
     // Only process if the utility is not explicitly set to false
     @if map.get($config, generated) != false {
       $utility-map: (
-        property: map.get($config, property),
-        values: map.get($config, values),
-        class: map.get($config, class),
-        state: map.get($config, state),
-        rtl: map.get($config, rtl),
+              property: map.get($config, property),
+              values: map.get($config, values),
+              class: map.get($config, class),
+              state: map.get($config, state),
+              rtl: map.get($config, rtl),
       );
 
       @include generate-responsive-utilities(
-        $utility-map,
-        $breakpoints,
-        $breakpoint-infix-generator
+                      $utility-map,
+                      $breakpoints,
+                      $breakpoint-infix-generator
       );
     }
   }
@@ -153,10 +159,10 @@ $utility-defaults: (
 
   @each $key in $keys {
     $result: map.merge(
-      $result,
-      (
-        $key: if($index <= list.length($values), list.nth($values, $index), null),
-      )
+                    $result,
+                    (
+                            $key: if($index <= list.length($values), list.nth($values, $index), null),
+                    )
     );
     $index: $index + 1;
   }

package/src/styles/03-generic/_generic.root.scss

@@ -8,8 +8,8 @@
 @use '../01-settings/settings.box-shadow' as box-shadow;
 @use '../01-settings/settings.typography' as typography;
 @use 'sass:meta';
+@use 'sass:map';
 
-$gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !default;
 
 :root,
 [data-#{config.$prefix}color-mode='light'] {
@@ -53,13 +53,20 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
     --#{config.$prefix}#{$color}-hover: #{$value};
   }
 
+  @each $color, $value in color-maps.$gradient-colors {
+    --#{config.$prefix}#{$color}-gradient: #{$value};
+  }
+
+  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, light)};
+
   // Fonts
 
   // Note: Use meta.inspect for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{config.$prefix}font-sans-serif: #{meta.inspect(typography.$font-family-sans-serif)};
   --#{config.$prefix}font-monospace: #{meta.inspect(typography.$font-family-monospace)};
-  --#{config.$prefix}gradient: #{$gradient};
+
+  
 
   // Root and body
   // scss-docs-start root-body-variables
@@ -161,6 +168,12 @@ $gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255
       --#{config.$prefix}#{$color}-hover: #{$value};
     }
 
+    @each $color, $value in color-maps.$gradient-colors-dark {
+      --#{config.$prefix}#{$color}-gradient: #{$value};
+    }
+
+  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
+
     --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
     --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};
     --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm-dark};

package/src/styles/04-elements/_elements.body.scss

@@ -1,4 +1,9 @@
 @use '../01-settings/settings.typography' as typography;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.background' as *;
+@use '../01-settings/settings.colors' as *;
+@use '../02-tools/tools.background' as *;
+@use '../02-tools/tools.color-mode' as *;
 
 body {
   -webkit-font-smoothing: antialiased;
@@ -12,4 +17,5 @@ body {
   &.is-modal-open {
     overflow: hidden;
   }
+
 }

package/src/styles/06-components/_components.accordion.scss

@@ -2,6 +2,8 @@
 @use '../01-settings/settings.accordion' as accordion;
 @use '../01-settings/settings.config' as config;
 @use '../02-tools/tools.animations' as *;
+@use '../01-settings/settings.background' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-accordion {
   $root: &;
@@ -30,20 +32,22 @@
   border: var(--#{config.$prefix}accordion-border-width) solid
     var(--#{config.$prefix}accordion-border-color);
   border-radius: var(--#{config.$prefix}accordion-border-radius);
-
   overflow: hidden;
 
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
     color: var(--#{config.$prefix}accordion-header-color);
     padding: var(--#{config.$prefix}accordion-header-padding-y)
       var(--#{config.$prefix}accordion-header-padding-x);
-    background-color: var(--#{config.$prefix}accordion-header-bg);
     border: none;
+    outline: none;
     cursor: pointer;
-    width: 100%;
+    @include basic-transition(background);
+
+    @include dynamic-background(var(--#{config.$prefix}accordion-header-bg));
 
     &--icon-left {
       flex-direction: row-reverse;
@@ -80,9 +84,9 @@
     color: var(--#{config.$prefix}accordion-body-color);
     padding: var(--#{config.$prefix}accordion-body-padding-y)
       var(--#{config.$prefix}accordion-body-padding-x);
-    background-color: var(--#{config.$prefix}accordion-body-bg);
     border-radius: 0 0 var(--#{config.$prefix}accordion-border-radius)
       var(--#{config.$prefix}accordion-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}accordion-body-bg));
   }
 
   &:focus,
@@ -108,4 +112,20 @@
     --#{config.$prefix}accordion-body-color: var(--#{config.$prefix}accordion-disable-color);
     --#{config.$prefix}accordion-icon-color: var(--#{config.$prefix}accordion-disable-color);
   }
+
+  &--glass {
+    border-color: transparent;
+    #{$root}__header {
+      @include dynamic-background(
+        var(--#{config.$prefix}accordion-header-bg),
+        $background-transparency-enable: true
+      );
+    }
+    #{$root}__body {
+      @include dynamic-background(
+        var(--#{config.$prefix}accordion-header-bg),
+        $background-transparency-enable: true
+      );
+    }
+  }
 }

package/src/styles/06-components/_components.avatar-group.scss

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.border-radius' as *;
 @use '../02-tools/tools.animations' as *;
 @use '../01-settings/settings.typography' as *;
+@use '../02-tools/tools.background' as *;
 
 // Avatar group component
 .c-avatar-group {
@@ -35,7 +36,7 @@
     color: var(--#{$prefix}avatar-group-more-color);
     font-size: var(--#{$prefix}avatar-group-more-font-size);
     font-weight: var(--#{$prefix}avatar-group-more-font-weight);
-    background-color: var(--#{$prefix}avatar-group-more-bg);
+    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
     border: var(--#{$prefix}avatar-group-more-border-width) solid
       var(--#{$prefix}avatar-group-more-border-color);
 

package/src/styles/06-components/_components.avatar.scss

@@ -6,6 +6,7 @@
 @use '../02-tools/tools.object-fit' as *;
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 // Avatar base component
 .c-avatar {
@@ -31,7 +32,7 @@
   justify-content: center;
   @include square(var(--#{$prefix}avatar-size));
   border-radius: var(--#{$prefix}avatar-border-radius);
-  background-color: var(--#{$prefix}avatar-bg);
+  @include dynamic-background(var(--#{$prefix}avatar-bg));
   color: var(--#{$prefix}avatar-color);
   border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
   overflow: hidden;

package/src/styles/06-components/_components.badge.scss

@@ -4,6 +4,7 @@
 @use '../01-settings/settings.colors' as *;
 @use '../01-settings/settings.maps' as maps;
 @use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-badge {
   --#{$prefix}tag-font-size: #{$badge-font-size};
@@ -25,7 +26,7 @@
   line-height: 1;
   padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-x);
   border-radius: var(--#{$prefix}tag-border-radius);
-  background-color: var(--#{$prefix}tag-bg-color);
+  @include dynamic-background(var(--#{$prefix}tag-bg-color));
   user-select: none;
 
   &__icon {
@@ -42,6 +43,24 @@
     --#{$prefix}tag-padding-y: #{$badge-padding-y-lg};
   }
 
+  &--glass {
+    @include dynamic-background(
+      var(--#{$prefix}tag-bg-color),
+      $background-transparency-enable: true,
+      $transparency: 0.8
+    );
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 20%, transparent);
+
+
+      // // Outer depth and glass effect
+      // 0 1px 3px rgba(0, 0, 0, 0.2),
+      // 0 2px 8px rgba(0, 0, 0, 0.15),
+      // 0 4px 16px rgba(0, 0, 0, 0.1),
+      
+      // Subtle highlight on top edge
+      // 0 -1px 0 rgba(255, 255, 255, 0.1);
+  }
+
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
       @if ($color == 'primary') {
@@ -50,9 +69,11 @@
       } @else if ($color == 'dark') {
         --#{$prefix}tag-bg-color: var(--#{$prefix}dark);
         --#{$prefix}tag-color: var(--#{$prefix}light);
+        border: 1px solid var(--#{$prefix}dark);
       } @else if ($color == 'light') {
         --#{$prefix}tag-bg-color: var(--#{$prefix}light);
         --#{$prefix}tag-color: var(--#{$prefix}dark);
+        border: 1px solid var(--#{$prefix}light);
       } @else {
         --#{$prefix}tag-bg-color: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}tag-color: var(--#{$prefix}#{$color}-text-emphasis);
@@ -60,3 +81,17 @@
     }
   }
 }
+
+.c-badge-glass {
+  box-shadow:
+    // Inner glow
+    inset 1px 2px 3px rgba(255, 255, 255, 0.1),
+    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
+    // 0 1px 3px rgba(0, 0, 0, 0.2),
+    // 0 2px 8px rgba(0, 0, 0, 0.15),
+    // 0 4px 16px rgba(0, 0, 0, 0.1),
+    // Subtle highlight on top edge
+    // 0 -1px 0 rgba(255, 255, 255, 0.1);
+    border-radius: 999px;
+
+}

package/src/styles/06-components/_components.breadcrumb.scss

@@ -5,6 +5,7 @@
 @use '../01-settings/settings.typography' as *;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
+@use '../02-tools/tools.background' as *;
 
 .c-breadcrumb {
   --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
@@ -30,7 +31,7 @@
   list-style: none;
   padding-left: 0px;
   margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include dynamic-background(var(--#{$prefix}breadcrumb-bg));
 
   &__item {
     display: flex;