@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/lib/composables/useDataTable.ts

@@ -328,47 +328,64 @@ export function useDataTable({
     setCurrentPage(1);
   }, []);
 
+  // Pre-process column filters to avoid redundant lookups and transformations
+  const activeColumnFilters = useMemo(() => {
+    if (!columnFilters) return [];
+
+    return Object.entries(columnFilterValues)
+      .filter(([, value]) => value !== undefined && value !== null && value !== '')
+      .map(([columnKey, value]) => {
+        const column = columns.find(col => col.key === columnKey);
+        if (!column || !column.filterable) return null;
+
+        return {
+          key: columnKey,
+          value,
+          lowercaseValue: typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
+          column,
+        };
+      })
+      .filter((f): f is NonNullable<typeof f> => f !== null);
+  }, [columnFilters, columnFilterValues, columns]);
+
   // Filter data based on search query and column filters
   const filteredData = useMemo(() => {
-    let result = data;
+    if (!searchQuery && activeColumnFilters.length === 0) {
+      return data;
+    }
 
-    // Apply global search
-    if (searchQuery) {
-      const lowercaseQuery = searchQuery.toLowerCase();
-      result = result.filter(row => {
-        return visibleColumns.some(column => {
+    const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : '';
+
+    return data.filter(row => {
+      // Apply global search
+      if (searchQuery) {
+        const matchesGlobal = visibleColumns.some(column => {
           const value = row[column.key];
           if (value == null) return false;
           return String(value).toLowerCase().includes(lowercaseQuery);
         });
-      });
-    }
-
-    // Apply column-specific filters
-    if (columnFilters) {
-      result = result.filter(row => {
-        return Object.entries(columnFilterValues).every(([columnKey, filterValue]) => {
-          if (!filterValue) return true;
-
-          const column = columns.find(col => col.key === columnKey);
-          if (!column || !column.filterable) return true;
+        if (!matchesGlobal) return false;
+      }
 
-          const cellValue = row[columnKey];
-          if (cellValue == null) return false;
+      // Apply column-specific filters
+      for (let i = 0; i < activeColumnFilters.length; i++) {
+        const { key, value, lowercaseValue, column } = activeColumnFilters[i];
+        const cellValue = row[key];
 
-          // Use custom filter function if provided
-          if (column.filterFunction) {
-            return column.filterFunction(cellValue, filterValue);
-          }
+        if (cellValue == null) return false;
 
+        // Use custom filter function if provided
+        if (column.filterFunction) {
+          if (!column.filterFunction(cellValue, value)) return false;
+        } else {
           // Default text filter
-          return String(cellValue).toLowerCase().includes(filterValue.toLowerCase());
-        });
-      });
-    }
+          if (!String(cellValue).toLowerCase().includes(lowercaseValue)) return false;
+        }
+      }
 
-    return result;
-  }, [data, visibleColumns, searchQuery, columnFilterValues, columnFilters, columns]);
+      return true;
+    });
+  }, [data, visibleColumns, searchQuery, activeColumnFilters]);
 
   // Sort data
   const sortedData = useMemo(() => {

package/src/lib/constants/components.ts

@@ -1522,37 +1522,6 @@ export const BLOCK = {
   },
 };
 
-/**
- * GlassContainer-specific constants
- */
-export const GLASS_CONTAINER = {
-  CLASSES: {
-    BASE: 'c-glass-container',
-    GLASS: 'c-glass-container__glass',
-    WARP: 'c-glass-container__warp',
-    CONTENT: 'c-glass-container__content',
-    OVERLAY: 'c-glass-container__overlay',
-    OVERLAY_VISIBLE: 'c-glass-container__overlay--visible',
-    OVERLAY_HIDDEN: 'c-glass-container__overlay--hidden',
-    OVERLAY_BLEND: 'c-glass-container__overlay-blend',
-    BORDER: 'c-glass-container__border',
-    BORDER_OVERLAY: 'c-glass-container__border-overlay',
-    HOVER_EFFECT: 'c-glass-container__hover-effect',
-    ACTIVE_EFFECT: 'c-glass-container__active-effect',
-    INTERACTION_EFFECT: 'c-glass-container__interaction-effect',
-    ACTIVE: 'c-glass-container--active',
-    CLICKABLE: 'c-glass-container--clickable',
-  },
-  DISPLACEMENT_MAPS: {
-    STANDARD:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+',
-    POLAR:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=',
-    PROMINENT:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4=',
-  },
-};
-
 /**
  * Footer-specific constants
  */
@@ -1698,9 +1667,17 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
-    DEFAULT_CORNER_RADIUS: 16, // Fallback value matching design system
+    // Note: This default must match the SCSS variable --atomix-radius-md
+    // @see src/styles/01-settings/_settings.global.scss
+    DEFAULT_CORNER_RADIUS: 16,
     MAX_SIZE: 4096, // Maximum width/height for glass size
 
+    // Palette for internal calculations (matches design system base colors)
+    PALETTE: {
+      WHITE: '255, 255, 255',
+      BLACK: '0, 0, 0',
+    },
+
     // Gradient calculation constants
     GRADIENT: {
       BASE_ANGLE: 135, // Base angle for border gradients (degrees)

package/src/lib/theme/devtools/CLI.ts

@@ -2,7 +2,7 @@
 
 /**
  * Atomix Theme DevTools CLI
- * 
+ *
  * Internal CLI for theme validation and management.
  * This is called by the main atomix-cli.js via theme-bridge.js.
  */

package/src/lib/types/components.ts

@@ -199,7 +199,7 @@ export interface AtomixGlassProps {
   /**
    * Shader variant for shader mode
    */
-  shaderVariant?: 'liquidGlass' | 'premiumGlass';
+  shaderVariant?: 'liquidGlass' | 'premiumGlass' | 'appleFluid' | 'liquidMetal' | 'plasma' | 'waves' | 'noise';
 
   /**
    * Accessibility props

package/src/lib/utils/__tests__/csv.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { sanitizeCSVCell } from '../csv';
+
+describe('sanitizeCSVCell', () => {
+  it('should handle normal strings', () => {
+    expect(sanitizeCSVCell('Hello World')).toBe('Hello World');
+    expect(sanitizeCSVCell('123')).toBe('123');
+  });
+
+  it('should handle numbers', () => {
+    expect(sanitizeCSVCell(123)).toBe('123');
+    expect(sanitizeCSVCell(0)).toBe('0');
+    // Negative numbers are prefixed with ' to prevent potential formula injection
+    expect(sanitizeCSVCell(-1)).toBe("'-1");
+  });
+
+  it('should handle null and undefined', () => {
+    expect(sanitizeCSVCell(null)).toBe('');
+    expect(sanitizeCSVCell(undefined)).toBe('');
+  });
+
+  it('should replace newlines and tabs with spaces', () => {
+    expect(sanitizeCSVCell('Hello\nWorld')).toBe('Hello World');
+    expect(sanitizeCSVCell('Hello\rWorld')).toBe('Hello World');
+    expect(sanitizeCSVCell('Hello\tWorld')).toBe('Hello World');
+    expect(sanitizeCSVCell('Hello\r\nWorld')).toBe('Hello  World');
+  });
+
+  it('should escape double quotes', () => {
+    expect(sanitizeCSVCell('Hello "World"')).toBe('Hello ""World""');
+    expect(sanitizeCSVCell('"')).toBe('""');
+  });
+
+  it('should prevent formula injection', () => {
+    expect(sanitizeCSVCell('=SUM(A1:B1)')).toBe("'=SUM(A1:B1)");
+    expect(sanitizeCSVCell('+SUM(A1:B1)')).toBe("'+SUM(A1:B1)");
+    expect(sanitizeCSVCell('-SUM(A1:B1)')).toBe("'-SUM(A1:B1)");
+    expect(sanitizeCSVCell('@SUM(A1:B1)')).toBe("'@SUM(A1:B1)");
+  });
+
+  it('should handle mixed cases', () => {
+    // Dangerous character + quotes + newlines
+    expect(sanitizeCSVCell('=cmd|\' /C calc\'!A0\n')).toBe("'=cmd|' /C calc'!A0 ");
+  });
+});

package/src/lib/utils/csv.ts

@@ -0,0 +1,17 @@
+/**
+ * CSV Utility Functions
+ */
+
+/**
+ * Sanitize cell content to prevent CSV injection
+ *
+ * Replaces newlines and tabs with spaces, escapes double quotes,
+ * and prefixes dangerous characters (=, +, -, @) with a single quote
+ * to prevent formula injection.
+ */
+export function sanitizeCSVCell(cell: any): string {
+  const sanitized = String(cell ?? '').replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
+  // Prevent formula injection by prefixing dangerous characters
+  const dangerous = /^[=+\-@]/;
+  return dangerous.test(sanitized) ? `'${sanitized}` : sanitized;
+}

package/src/lib/utils/dataTableExport.ts

@@ -1,14 +1,5 @@
 import { DataTableColumn, ExportFormat } from '../types/components';
-
-/**
- * Sanitize cell content to prevent CSV injection
- */
-function sanitizeCSVCell(cell: any): string {
-  const sanitized = String(cell ?? '').replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
-  // Prevent formula injection by prefixing dangerous characters
-  const dangerous = /^[=+\-@]/;
-  return dangerous.test(sanitized) ? `'${sanitized}` : sanitized;
-}
+import { sanitizeCSVCell } from './csv';
 
 /**
  * Export data as CSV

package/src/styles/01-settings/_index.scss

@@ -64,4 +64,5 @@
 @forward './settings.typography';
 @forward './settings.upload';
 @forward './settings.video-player';
-@forward './settings.z-layers';
+@forward './settings.z-layers';
+

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

@@ -3,30 +3,51 @@
 @use './settings.config' as config;
 @use './settings.spacing' as *;
 @use './settings.colors' as *;
+@use './settings.typography' as *;
 
+// Accordion dimensions
 $accordion-width: 100% !default;
-$accordion-padding-x: map.get($spacing-sizes, 5) !default;
-$accordion-padding-y: map.get($spacing-sizes, 4) !default;
+$accordion-padding-x: map.get($spacing-sizes, 5) !default; //20px
+$accordion-padding-y: map.get($spacing-sizes, 4) !default; //16px
 
+// Accordion borders
 $accordion-border-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
-$accordion-border-color: transparent !default;
+$accordion-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $accordion-border-radius: radius.$border-radius-sm !default;
 
+// Accordion body
 $accordion-body-padding-x: $accordion-padding-x !default;
-$accordion-body-padding-y: map.get($spacing-sizes, 2) !default;
+$accordion-body-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $accordion-body-color: var(--#{config.$prefix}body-color) !default;
 $accordion-body-bg: var(--#{config.$prefix}body-bg) !default;
 
+// Accordion header
 $accordion-header-padding-x: $accordion-padding-x !default;
 $accordion-header-padding-y: $accordion-padding-y !default;
 $accordion-header-color: var(--#{config.$prefix}body-color) !default;
 $accordion-header-bg: var(--#{config.$prefix}body-bg) !default;
-
 $accordion-header-bg-hover: var(--#{config.$prefix}body-bg) !default;
+$accordion-header-font-size: $font-size-base !default;
+$accordion-header-font-weight: $font-weight-normal !default;
 
-$accordion-icon-size: map.get($spacing-sizes, 5) !default;
+// Accordion icon
+$accordion-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $accordion-icon-color: var(--#{config.$prefix}body-color) !default;
-
 $accordion-icon-transform: 180deg !default;
 
+// Accordion states
 $accordion-disable-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$accordion-focus-border-color: var(--#{config.$prefix}focus-border-color) !default;
+
+// Accordion transitions
+$accordion-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
+$accordion-panel-transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Accordion spacing
+$accordion-item-gap: 0px !default;
+$accordion-header-inner-gap: map.get($spacing-sizes, 2) !default; //8px
+
+// Enable features
+$accordion-enable-glass: true !default;
+$accordion-enable-smooth-scroll: true !default;
+$accordion-enable-focus-ring: true !default;

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

@@ -11,17 +11,17 @@ $black: #000000 !default;
 $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
-// Primitives Primary Colors
-$primary-1: #fff9e6 !default;
-$primary-2: #fff4cc !default; 
-$primary-3: #ffe699 !default; 
-$primary-4: #ffd966 !default; 
-$primary-5: #ffcc33 !default; 
-$primary-6: #ffb800 !default; // Balanced primary - main brand color (WCAG AA compliant)
-$primary-7: #e6a600 !default; 
-$primary-8: #cc9400 !default; 
-$primary-9: #b38200 !default; 
-$primary-10: #997000 !default; 
+// Primitives Primary Colors (Purple Scale)
+$primary-1: #f5f3ff !default;
+$primary-2: #ede9fe !default; 
+$primary-3: #ddd6fe !default; 
+$primary-4: #c4b5fd !default; 
+$primary-5: #a78bfa !default; 
+$primary-6: #8b5cf6 !default; // Balanced primary - main brand color (WCAG AA compliant)
+$primary-7: #7c3aed !default; 
+$primary-8: #6d28d9 !default; 
+$primary-9: #5b21b6 !default; 
+$primary-10: #4c1d95 !default; 
 
 // Primitives Red Colors
 $red-1: #fef2f2 !default;

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

@@ -3,7 +3,7 @@
 // Font, line-height, and color for body text, headings, and more.
 
 // Font stacks with appropriate fallbacks
-$Roboto: 'Roboto', sans-serif !default;
+$roboto: 'Roboto', sans-serif !default;
 
 $helvetica-neue:
   'Helvetica Neue',
@@ -26,11 +26,11 @@ $system-font-stack:
   Arial,
   sans-serif !default;
 
-$font-family-base: $Roboto !default;
-$font-family-sans-serif: $Roboto !default;
+$font-family-base: $roboto !default;
+$font-family-sans-serif: $roboto !default;
 $font-family-monospace:
   SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-$headings-font-family: $Roboto !default;
+$headings-font-family: $roboto !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
@@ -92,4 +92,4 @@ $h5-letter-spaceing: -0.5px !default;
 $h6-letter-spaceing: -0.5px !default;
 
 $paragraph-margin-bottom: 0 !default;
-$body-text-align: null !default;
+$body-text-align: null !default;

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

@@ -80,6 +80,13 @@ $utility-defaults: (
         } @else {
           #{$property-class}: $value if(map.get($utility, rtl), null, !important);
         }
+        
+        // Add local CSS variables if specified
+        @if map.get($utility, local-vars) {
+          @each $local-var-name, $local-var-value in map.get($utility, local-vars) {
+            --#{$local-var-name}: #{$local-var-value};
+          }
+        }
       }
     } @else {
       // Generate class with custom class name
@@ -104,6 +111,13 @@ $utility-defaults: (
         } @else {
           #{$base-class}: $value if(map.get($utility, rtl), null, !important);
         }
+        
+        // Add local CSS variables if specified
+        @if map.get($utility, local-vars) {
+          @each $local-var-name, $local-var-value in map.get($utility, local-vars) {
+            --#{$local-var-name}: #{$local-var-value};
+          }
+        }
       }
     }
   }

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

@@ -25,6 +25,12 @@
   --#{config.$prefix}accordion-icon-color: #{accordion.$accordion-icon-color};
   --#{config.$prefix}accordion-icon-transform: #{accordion.$accordion-icon-transform};
   --#{config.$prefix}accordion-disable-color: #{accordion.$accordion-disable-color};
+  --#{config.$prefix}accordion-focus-border-color: #{accordion.$accordion-focus-border-color};
+  --#{config.$prefix}accordion-header-font-size: #{accordion.$accordion-header-font-size};
+  --#{config.$prefix}accordion-header-font-weight: #{accordion.$accordion-header-font-weight};
+  --#{config.$prefix}accordion-header-inner-gap: #{rem(accordion.$accordion-header-inner-gap)};
+  --#{config.$prefix}accordion-transition: #{accordion.$accordion-transition};
+  --#{config.$prefix}accordion-panel-transition: #{accordion.$accordion-panel-transition};
   --panel-height: 0px;
 
   width: 100%;
@@ -33,6 +39,7 @@
     var(--#{config.$prefix}accordion-border-color);
   border-radius: var(--#{config.$prefix}accordion-border-radius);
   overflow: hidden;
+  transition: var(--#{config.$prefix}accordion-transition);
 
   &__header {
     display: flex;
@@ -45,6 +52,9 @@
     border: none;
     outline: none;
     cursor: pointer;
+    font-size: var(--#{config.$prefix}accordion-header-font-size);
+    font-weight: var(--#{config.$prefix}accordion-header-font-weight);
+    gap: var(--#{config.$prefix}accordion-header-inner-gap);
     @include basic-transition(background);
 
     @include dynamic-background(var(--#{config.$prefix}accordion-header-bg));
@@ -52,22 +62,32 @@
     &--icon-left {
       flex-direction: row-reverse;
       justify-content: flex-end;
-      gap: var(--#{config.$prefix}accordion-header-padding-x);
     }
 
     &:hover {
       --#{config.$prefix}accordion-header-bg: var(--#{config.$prefix}accordion-header-bg-hover);
     }
+
+    @if accordion.$accordion-enable-focus-ring {
+      &:focus-visible {
+        outline: 2px solid var(--#{config.$prefix}accordion-focus-border-color);
+        outline-offset: 2px;
+      }
+    }
   }
 
   &__title {
-    margin-right: rem(20px);
+    flex: 1;
   }
 
   &__icon {
     color: var(--#{config.$prefix}accordion-icon-color);
     font-size: var(--#{config.$prefix}accordion-icon-size);
     will-change: transform;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     @include basic-transition();
   }
@@ -77,6 +97,10 @@
     overflow: hidden;
     will-change: height;
 
+    @if accordion.$accordion-enable-smooth-scroll {
+      scroll-behavior: smooth;
+    }
+
     @include basic-transition();
   }
 
@@ -107,25 +131,43 @@
 
   &.is-disabled {
     pointer-events: none;
+    cursor: not-allowed;
 
     --#{config.$prefix}accordion-header-color: var(--#{config.$prefix}accordion-disable-color);
     --#{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
-      );
+      cursor: not-allowed;
     }
-    #{$root}__body {
-      @include dynamic-background(
-        var(--#{config.$prefix}accordion-header-bg),
-        $background-transparency-enable: true
-      );
+  }
+
+  @if accordion.$accordion-enable-glass {
+    &--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
+        );
+      }
+    }
+  }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    #{$root}__icon,
+    #{$root}__panel,
+    #{$root}__header {
+      transition: none;
     }
   }
 }

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

@@ -26,6 +26,7 @@
   --#{$prefix}checkbox-border-color-hover: #{$checkbox-border-color-hover};
   --#{$prefix}checkbox-border-color-disabled: #{$checkbox-border-color-disabled};
   --#{$prefix}checkbox-border-color-error: #{$checkbox-border-color-error};
+  --#{$prefix}checkbox-checked-border-color: #{$checkbox-checked-bg};
 
   display: flex;
   gap: var(--#{$prefix}checkbox-spacer);
@@ -48,16 +49,22 @@
 
     &::before {
       position: absolute;
-      top: -7px;
-      left: -4px;
-      font-family: 'Lux Icon';
-      color: var(--#{$prefix}checkbox-checked-bg);
-      content: '\ef10';
-      font-size: rem(26px);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--#{$prefix}checkbox-checked-text-color);
+      background: var(--#{$prefix}checkbox-checked-bg);
+      content: '';
       transform: scale(0);
-      display: block;
-      transform-origin: center;
-      transition: 120ms transform ease-in-out;
+      opacity: 0;
+      transition: transform 120ms ease-in-out, opacity 120ms ease-in-out;
+      font-size: 0.65em;
+      line-height: 1;
+      font-family: 'Lux Icon';
     }
 
     &:hover {
@@ -65,23 +72,21 @@
     }
 
     &:checked {
-      border-color: var(--#{$prefix}checkbox-checked-bg);
+      border-color: var(--#{$prefix}checkbox-checked-border-color);
 
       &::before {
+        content: '\ef10';
         transform: scale(1);
+        opacity: 1;
       }
 
       &:hover {
         border-color: var(--#{$prefix}checkbox-checked-bg-hover);
 
         &::before {
-          color: var(--#{$prefix}checkbox-checked-bg-hover);
+          background: var(--#{$prefix}checkbox-checked-bg-hover);
         }
       }
-
-      & + #{$root} {
-        color: red;
-      }
     }
 
     &:focus-visible {
@@ -93,7 +98,7 @@
       cursor: not-allowed;
 
       &::before {
-        color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
+        background: var(--#{$prefix}checkbox-checked-bg-disabled) !important;
       }
     }
   }
@@ -112,7 +117,7 @@
         cursor: not-allowed;
 
         &::before {
-          color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
+          background: var(--#{$prefix}checkbox-checked-bg-disabled) !important;
         }
       }
     }
@@ -130,6 +135,7 @@
     #{$root} {
       &__input::before {
         content: '\f0d6';
+        background: var(--#{$prefix}checkbox-checked-bg);
       }
     }
   }

package/src/styles/99-utilities/_index.scss

@@ -5,6 +5,7 @@
 @forward 'utilities.display';
 @forward 'utilities.flex';
 @forward 'utilities.glass-fixes';
+@forward 'utilities.gradient';
 @forward 'utilities.link';
 @forward 'utilities.object-fit';
 @forward 'utilities.opacity';
@@ -14,6 +15,7 @@
 @forward 'utilities.sizes';
 @forward 'utilities.spacing';
 @forward 'utilities.text';
+@forward 'utilities.text-gradient';
 @forward 'utilities.visibility';
 @forward 'utilities.visually-hidden';
 @forward 'utilities.z-index';

package/src/styles/99-utilities/_utilities.scss

@@ -19,6 +19,7 @@
 @use 'utilities.sizes' as sizes;
 @use 'utilities.spacing' as spacing;
 @use 'utilities.text' as text;
+@use 'utilities.text-gradient' as textGradient;
 @use 'utilities.visibility' as visibility;
 @use 'utilities.z-index' as z-index;
 
@@ -40,6 +41,7 @@ $utilities: map.merge($utilities, spacing.$utilities-spacing);
 $utilities: map.merge($utilities, text.$utilities-text);
 $utilities: map.merge($utilities, visibility.$utilities-visibility);
 $utilities: map.merge($utilities, z-index.$utilities-z-index);
+$utilities: map.merge($utilities, textGradient.$utilities-text-gradient);
 
 // Generate all utility classes
-@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);
+@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);