@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/utils/dom.ts

@@ -36,10 +36,6 @@ export function removeClass(element: HTMLElement, className: string): void {
  * @param className - Class name to toggle
  * @param force - If true, adds class; if false, removes class
  */
-export function toggleClass(
-  element: HTMLElement, 
-  className: string, 
-  force?: boolean
-): void {
+export function toggleClass(element: HTMLElement, className: string, force?: boolean): void {
   element.classList.toggle(className, force);
-} 
+}

package/src/lib/utils/icons.ts

@@ -2,19 +2,27 @@
  * Icon path definitions for common Phosphor icons
  */
 const ICON_PATHS: Record<string, string> = {
-  House: 'M240 121.6V240h-48v-72a24 24 0 0 0-24-24h-80a24 24 0 0 0-24 24v72H16V121.6a16 16 0 0 1 5.4-12L111.4 29a16 16 0 0 1 21.2 0l90 80.6a16 16 0 0 1 5.4 12Z',
-  Package: 'M223.68 66.15 135.68 18a15.88 15.88 0 0 0-15.36 0l-88 48.13a16 16 0 0 0-8.32 14v95.64a16 16 0 0 0 8.32 14l88 48.17a15.88 15.88 0 0 0 15.36 0l88-48.17a16 16 0 0 0 8.32-14V80.18a16 16 0 0 0-8.32-14.03ZM128 32.59l74.12 40.55-32 17.56-74.12-40.55ZM96 68.08l73.56 40.23-32.04 17.53L64 85.64ZM40 95.83l72 39.39v79.23l-72-39.4Zm144 79.22v-79.23l72-39.39v79.22Z',
-  Folder: 'M216 72h-84.7L104.4 44.2A16.05 16.05 0 0 0 92.7 40H40a16 16 0 0 0-16 16v144.3a15.91 15.91 0 0 0 15.9 15.7h176.2a15.91 15.91 0 0 0 15.9-15.7V88a16 16 0 0 0-16-16Z',
+  House:
+    'M240 121.6V240h-48v-72a24 24 0 0 0-24-24h-80a24 24 0 0 0-24 24v72H16V121.6a16 16 0 0 1 5.4-12L111.4 29a16 16 0 0 1 21.2 0l90 80.6a16 16 0 0 1 5.4 12Z',
+  Package:
+    'M223.68 66.15 135.68 18a15.88 15.88 0 0 0-15.36 0l-88 48.13a16 16 0 0 0-8.32 14v95.64a16 16 0 0 0 8.32 14l88 48.17a15.88 15.88 0 0 0 15.36 0l88-48.17a16 16 0 0 0 8.32-14V80.18a16 16 0 0 0-8.32-14.03ZM128 32.59l74.12 40.55-32 17.56-74.12-40.55ZM96 68.08l73.56 40.23-32.04 17.53L64 85.64ZM40 95.83l72 39.39v79.23l-72-39.4Zm144 79.22v-79.23l72-39.39v79.22Z',
+  Folder:
+    'M216 72h-84.7L104.4 44.2A16.05 16.05 0 0 0 92.7 40H40a16 16 0 0 0-16 16v144.3a15.91 15.91 0 0 0 15.9 15.7h176.2a15.91 15.91 0 0 0 15.9-15.7V88a16 16 0 0 0-16-16Z',
   Tag: 'M246.15 128.6 183.06 65.5l.09-24.21A16.05 16.05 0 0 0 167 25.14l-24.1.09L79.4 88.85a16 16 0 0 0 0 22.63l67.26 67.27a16 16 0 0 0 22.63 0l76.86-76.86a16 16 0 0 0 0-23.29ZM160 152l-56-56 56-56 56 56Zm-16-72a16 16 0 1 1-16 16 16 16 0 0 1 16-16Z',
-  CaretRight: 'M181.66 133.66l-80 80A8 8 0 0 1 88 208V48a8 8 0 0 1 13.66-5.66l80 80a8 8 0 0 1 0 11.32Z',
-  CaretDown: 'M208 96v16a8 8 0 0 1-2.34 5.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 32 112V96a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8Z',
+  CaretRight:
+    'M181.66 133.66l-80 80A8 8 0 0 1 88 208V48a8 8 0 0 1 13.66-5.66l80 80a8 8 0 0 1 0 11.32Z',
+  CaretDown:
+    'M208 96v16a8 8 0 0 1-2.34 5.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 32 112V96a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8Z',
   User: 'M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z',
   Home: 'M224 115.55V208a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16v-40a8 8 0 0 0-8-8h-32a8 8 0 0 0-8 8v40a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-92.45a16 16 0 0 1 5.17-11.78l80-75.48a16 16 0 0 1 21.66 0l80 75.48a16 16 0 0 1 5.17 11.78Z',
   // Added icons for DatePicker
   X: 'M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128l66.35 66.34Z',
-  Calendar: 'M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Z',
-  CaretDoubleLeft: 'M181.66 181.66a8 8 0 0 1-11.32 0L120 131.31V160a8 8 0 0 1-13.66 5.66l-48-48a8 8 0 0 1 0-11.32l48-48A8 8 0 0 1 120 64v28.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0L102.63 98 64 128l38.63 30L114.34 146.63a8 8 0 0 1 11.32 0l56 56a8 8 0 0 1 0 11.32Z',
-  CaretDoubleRight: 'M74.34 181.66a8 8 0 0 0 11.32 0L136 131.31V160a8 8 0 0 0 13.66 5.66l48-48a8 8 0 0 0 0-11.32l-48-48A8 8 0 0 0 136 64v28.69L85.66 42.34a8 8 0 0 0-11.32 11.32l56 56a8 8 0 0 0 11.32 0l11.71-11.71L192 128l-38.63 30-11.71-11.71a8 8 0 0 0-11.32 0l-56 56a8 8 0 0 0 0 11.32Z'
+  Calendar:
+    'M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Z',
+  CaretDoubleLeft:
+    'M181.66 181.66a8 8 0 0 1-11.32 0L120 131.31V160a8 8 0 0 1-13.66 5.66l-48-48a8 8 0 0 1 0-11.32l48-48A8 8 0 0 1 120 64v28.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0L102.63 98 64 128l38.63 30L114.34 146.63a8 8 0 0 1 11.32 0l56 56a8 8 0 0 1 0 11.32Z',
+  CaretDoubleRight:
+    'M74.34 181.66a8 8 0 0 0 11.32 0L136 131.31V160a8 8 0 0 0 13.66 5.66l48-48a8 8 0 0 0 0-11.32l-48-48A8 8 0 0 0 136 64v28.69L85.66 42.34a8 8 0 0 0-11.32 11.32l56 56a8 8 0 0 0 11.32 0l11.71-11.71L192 128l-38.63 30-11.71-11.71a8 8 0 0 0-11.32 0l-56 56a8 8 0 0 0 0 11.32Z',
 };
 
 /**
@@ -25,11 +33,11 @@ const ICON_PATHS: Record<string, string> = {
  */
 export function createPhosphorIcon(name: string, size: number = 16): string {
   const path = ICON_PATHS[name] || '';
-  
+
   if (!path) {
     console.warn(`Icon "${name}" not found in icon library`);
   }
-  
+
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 256 256">
     <path d="${path}"></path>
   </svg>`;
@@ -53,7 +61,7 @@ export function createIconElement(
   iconElement.style.alignItems = 'center';
   iconElement.style.justifyContent = 'center';
   iconElement.innerHTML = createPhosphorIcon(name, size);
-  
+
   return iconElement;
 }
 
@@ -63,4 +71,4 @@ export function createIconElement(
  */
 export function getAvailableIcons(): string[] {
   return Object.keys(ICON_PATHS);
-} 
+}

package/src/lib/utils/index.ts

@@ -1,7 +1,7 @@
 // Export DOM utilities
 export * from './dom';
 
-// Export other utilities as needed 
+// Export other utilities as needed
 
 // Export icon utilities
-export * from './icons'; 
+export * from './icons';

package/src/lib/utils/useForkRef.ts

@@ -11,7 +11,6 @@ export function setRef<T>(
     ref(value);
   } else if (ref) {
     // This is safe because we're checking that ref exists first
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (ref as any).current = value;
   }
 }
@@ -28,7 +27,7 @@ export default function useForkRef<T>(
     if (refA == null && refB == null) {
       return null;
     }
-    
+
     return (refValue: T | null) => {
       setRef(refA, refValue);
       setRef(refB, refValue);

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

@@ -1,64 +1,64 @@
 // Base colors and variables that everything depends on
-@forward "./settings.colors";
+@forward './settings.colors';
 
 // Core settings that depend on colors
-@forward "./settings.border";
-@forward "./settings.border-radius";
-@forward "./settings.box-shadow";
-@forward "./settings.spacing";
-@forward "./settings.breakpoints";
-@forward "./settings.fonts";
-@forward "./settings.config";
+@forward './settings.border';
+@forward './settings.border-radius';
+@forward './settings.box-shadow';
+@forward './settings.spacing';
+@forward './settings.breakpoints';
+@forward './settings.fonts';
+@forward './settings.config';
 
 // Component settings
-@forward "./settings.accordion";
-@forward "./settings.animations";
-@forward "./settings.avatar-group";
-@forward "./settings.avatar";
-@forward "./settings.badge";
-@forward "./settings.btn-group";
-@forward "./settings.button";
-@forward "./settings.datepicker";
-@forward "./settings.card";
-@forward "./settings.checkbox-group";
-@forward "./settings.checkbox";
-@forward "./settings.color-mode";
-@forward "./settings.countdown";
-@forward "./settings.data-table";
-@forward "./settings.dropdown";
-@forward "./settings.edge-panel";
-@forward "./settings.form";
-@forward "./settings.grid";
-@forward "./settings.hero";
-@forward "./settings.form-group";
-@forward "./settings.input";
-@forward "./settings.link";
-@forward "./settings.list-group";
-@forward "./settings.list";
-@forward "./settings.maps";
-@forward "./settings.menu";
-@forward "./settings.messages";
-@forward "./settings.modal";
-@forward "./settings.nav";
-@forward "./settings.navbar";
-@forward "./settings.callout";
-@forward "./settings.pagination";
-@forward "./settings.popover";
-@forward "./settings.photoviewer";
-@forward "./settings.position";
-@forward "./settings.progress";
-@forward "./settings.rating";
-@forward "./settings.river";
-@forward "./settings.sectionintro";
-@forward "./settings.select";
-@forward "./settings.side-menu";
-@forward "./settings.skeleton";
-@forward "./settings.spinner";
-@forward "./settings.steps";
-@forward "./settings.tabs";
-@forward "./settings.testimonials";
-@forward "./settings.toggle";
-@forward "./settings.tooltip";
-@forward "./settings.typography";
-@forward "./settings.upload";
-@forward "./settings.z-layers";
+@forward './settings.accordion';
+@forward './settings.animations';
+@forward './settings.avatar-group';
+@forward './settings.avatar';
+@forward './settings.badge';
+@forward './settings.btn-group';
+@forward './settings.button';
+@forward './settings.datepicker';
+@forward './settings.card';
+@forward './settings.checkbox-group';
+@forward './settings.checkbox';
+@forward './settings.color-mode';
+@forward './settings.countdown';
+@forward './settings.data-table';
+@forward './settings.dropdown';
+@forward './settings.edge-panel';
+@forward './settings.form';
+@forward './settings.grid';
+@forward './settings.hero';
+@forward './settings.form-group';
+@forward './settings.input';
+@forward './settings.link';
+@forward './settings.list-group';
+@forward './settings.list';
+@forward './settings.maps';
+@forward './settings.menu';
+@forward './settings.messages';
+@forward './settings.modal';
+@forward './settings.nav';
+@forward './settings.navbar';
+@forward './settings.callout';
+@forward './settings.pagination';
+@forward './settings.popover';
+@forward './settings.photoviewer';
+@forward './settings.position';
+@forward './settings.progress';
+@forward './settings.rating';
+@forward './settings.river';
+@forward './settings.sectionintro';
+@forward './settings.select';
+@forward './settings.side-menu';
+@forward './settings.skeleton';
+@forward './settings.spinner';
+@forward './settings.steps';
+@forward './settings.tabs';
+@forward './settings.testimonials';
+@forward './settings.toggle';
+@forward './settings.tooltip';
+@forward './settings.typography';
+@forward './settings.upload';
+@forward './settings.z-layers';

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

@@ -1,29 +1,29 @@
-@use "./settings.border-radius" as radius;
-@use "./settings.config" as config;
+@use './settings.border-radius' as radius;
+@use './settings.config' as config;
 
-$accordion-width:                   100% !default;
-$accordion-padding-x:               20px !default;
-$accordion-padding-y:               16px !default;
+$accordion-width: 100% !default;
+$accordion-padding-x: 20px !default;
+$accordion-padding-y: 16px !default;
 
-$accordion-border-width:            2px !default;
-$accordion-border-color:            transparent !default;
-$accordion-border-radius:           radius.$border-radius-sm !default;
+$accordion-border-width: 2px !default;
+$accordion-border-color: transparent !default;
+$accordion-border-radius: radius.$border-radius-sm !default;
 
-$accordion-body-padding-x:          $accordion-padding-x !default;
-$accordion-body-padding-y:          8px !default;
-$accordion-body-color:              var(--#{config.$prefix}body-color) !default;
-$accordion-body-bg:                 var(--#{config.$prefix}secondary-bg-subtle) !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+$accordion-body-padding-y: 8px !default;
+$accordion-body-color: var(--#{config.$prefix}body-color) !default;
+$accordion-body-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
-$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}secondary-bg-subtle) !default;
+$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}secondary-bg-subtle) !default;
 
-$accordion-header-bg-hover:         var(--#{config.$prefix}tertiary-bg-subtle) !default;
+$accordion-header-bg-hover: var(--#{config.$prefix}tertiary-bg-subtle) !default;
 
-$accordion-icon-size:               20px !default;
-$accordion-icon-color:              var(--#{config.$prefix}body-color) !default;
+$accordion-icon-size: 20px !default;
+$accordion-icon-color: var(--#{config.$prefix}body-color) !default;
 
-$accordion-icon-transform:          180deg !default;
+$accordion-icon-transform: 180deg !default;
 
-$accordion-disable-color:           var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$accordion-disable-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;

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

@@ -1,2 +1,2 @@
-$transition-duration:       0.3s;
-$easing:                    cubic-bezier(0.23, 1, 0.32, 1);
+$transition-duration: 0.3s;
+$easing: cubic-bezier(0.23, 1, 0.32, 1);

package/src/styles/01-settings/_settings.avatar-group.scss

@@ -1,20 +1,20 @@
-@use "./settings.colors" as colors;
-@use "./settings.config" as config;
-@use "./settings.typography" as fonts;
+@use './settings.colors' as colors;
+@use './settings.config' as config;
+@use './settings.typography' as fonts;
 
 // Avatar group spacing
-$avatar-group-gap:                      8px !default;
-$avatar-group-stacked-overlap:          50% !default;
-$avatar-group-stacked-hover-gap:        8px !default;
+$avatar-group-gap: 8px !default;
+$avatar-group-stacked-overlap: 50% !default;
+$avatar-group-stacked-hover-gap: 8px !default;
 
 // Avatar group "more" indicator
-$avatar-group-more-color:               var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$avatar-group-more-bg:                  var(--#{config.$prefix}body-bg) !default;
-$avatar-group-more-font-size:           fonts.$font-size-sm !default;
-$avatar-group-more-font-weight:         fonts.$font-weight-medium !default;
-$avatar-group-more-border-width:        1px !default;
-$avatar-group-more-border-color:        var(--#{config.$prefix}primary-border-subtle) !default;
+$avatar-group-more-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$avatar-group-more-bg: var(--#{config.$prefix}body-bg) !default;
+$avatar-group-more-font-size: fonts.$font-size-sm !default;
+$avatar-group-more-font-weight: fonts.$font-weight-medium !default;
+$avatar-group-more-border-width: 1px !default;
+$avatar-group-more-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 
 // Avatar group transitions
-$avatar-group-transition-duration:      0.2s !default;
-$avatar-group-transition-timing:        ease-in-out !default;
+$avatar-group-transition-duration: 0.2s !default;
+$avatar-group-transition-timing: ease-in-out !default;

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

@@ -1,46 +1,46 @@
-@use "./settings.border-radius" as radius;
-@use "./settings.colors" as colors;
-@use "./settings.config" as config;
-@use "./settings.typography" as fonts;
+@use './settings.border-radius' as radius;
+@use './settings.colors' as colors;
+@use './settings.config' as config;
+@use './settings.typography' as fonts;
 
 // Avatar sizes
 $avatar-size: (
-    xs:         24px,
-    sm:         32px,
-    md:         40px,
-    lg:         48px,
-    xl:         56px,
-) !default;     
+  xs: 24px,
+  sm: 32px,
+  md: 40px,
+  lg: 48px,
+  xl: 56px,
+) !default;
 
 // Avatar border radius
 $avatar-border-radius: (
-    xs:         radius.$border-radius-sm,
-    sm:         radius.$border-radius-sm,
-    md:         radius.$border-radius,
-    lg:         radius.$border-radius,
-    xl:         radius.$border-radius,
-    circle:     50%
+  xs: radius.$border-radius-sm,
+  sm: radius.$border-radius-sm,
+  md: radius.$border-radius,
+  lg: radius.$border-radius,
+  xl: radius.$border-radius,
+  circle: 50%,
 ) !default;
 
 // Avatar colors
-$avatar-color:                      var(--#{config.$prefix}primary-text-emphasis) !default;
-$avatar-bg:                         var(--#{config.$prefix}secondary-bg-subtle) !default;
-$avatar-border-width:               1px !default;
-$avatar-border-color:               var(--#{config.$prefix}primary-border-subtle) !default;
+$avatar-color: var(--#{config.$prefix}primary-text-emphasis) !default;
+$avatar-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$avatar-border-width: 1px !default;
+$avatar-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 
 // Avatar content
-$avatar-fit:                        cover !default;
-$avatar-initials-font-weight:       fonts.$font-weight-medium !default;
+$avatar-fit: cover !default;
+$avatar-initials-font-weight: fonts.$font-weight-medium !default;
 $avatar-initials-font-size: (
-    xs:         fonts.$font-size-xs,
-    sm:         fonts.$font-size-xs,
-    md:         fonts.$font-size-sm,
-    lg:         fonts.$font-size-base,
-    xl:         fonts.$font-size-base,
+  xs: fonts.$font-size-xs,
+  sm: fonts.$font-size-xs,
+  md: fonts.$font-size-sm,
+  lg: fonts.$font-size-base,
+  xl: fonts.$font-size-base,
 ) !default;
 
 // Interactive states
-$avatar-hover-opacity:              0.8 !default;
-$avatar-focus-ring-width:           2px !default;
-$avatar-focus-ring-color:           var(--#{config.$prefix}primary-border-subtle) !default;
-$avatar-disabled-opacity:           0.5 !default;
+$avatar-hover-opacity: 0.8 !default;
+$avatar-focus-ring-width: 2px !default;
+$avatar-focus-ring-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$avatar-disabled-opacity: 0.5 !default;

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

@@ -1,12 +1,12 @@
-@use  "settings.border-radius" as radius;
-@use  "settings.typography" as fonts;
+@use 'settings.border-radius' as radius;
+@use 'settings.typography' as fonts;
 
-$tag-font-size:             fonts.$font-size-xs !default;
-$tag-font-weight:           fonts.$font-weight-normal !default;
-$tag-padding-x:             10px !default;
-$tag-padding-y:             6px !default;
-$tag-padding-y-sm:          4px !default;
-$tag-padding-y-lg:          8px !default;
-$tag-border-radius:         radius.$border-radius-pill !default;
-$tag-icon-size:             16px !default;
-$tag-inner-items-gap:       6px !default;
+$tag-font-size: fonts.$font-size-xs !default;
+$tag-font-weight: fonts.$font-weight-normal !default;
+$tag-padding-x: 10px !default;
+$tag-padding-y: 6px !default;
+$tag-padding-y-sm: 4px !default;
+$tag-padding-y-lg: 8px !default;
+$tag-border-radius: radius.$border-radius-pill !default;
+$tag-icon-size: 16px !default;
+$tag-inner-items-gap: 6px !default;

package/src/styles/01-settings/_settings.border-radius.scss

@@ -1,11 +1,12 @@
-$border-radius:               .5rem !default;       //8px
-$border-radius-sm:            .25rem !default;      //4px
-$border-radius-lg:            .625rem !default;     //10px
-$border-radius-xl:            .75rem !default;      //12px
-$border-radius-xxl:            1rem !default;        //16px
-$border-radius-3xl:           1.5rem !default;     //24px
-$border-radius-4xl:           2rem !default;        //32px
-$border-radius-pill:          50rem !default;       //800px
+$border-radius: 0.5rem !default; //8px
+$border-radius-sm: 0.25rem !default; //4px
+$border-radius-md: $border-radius !default; //4px
+$border-radius-lg: 0.625rem !default; //10px
+$border-radius-xl: 0.75rem !default; //12px
+$border-radius-xxl: 1rem !default; //16px
+$border-radius-3xl: 1.5rem !default; //24px
+$border-radius-4xl: 2rem !default; //32px
+$border-radius-pill: 50rem !default; //800px
 
 // Enable rounded corners
-$enable-rounded: true !default;
+$enable-rounded: true !default;

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

@@ -1,14 +1,14 @@
-@use "./settings.colors" as colors;
+@use './settings.colors' as colors;
 
-$border-color:              colors.$primary-border !default;
-$border-color-dark:         colors.$primary-border-dark !default;
-$border-width:              1px !default;
-$border-style:              solid !default;
+$border-color: colors.$primary-border !default;
+$border-color-dark: colors.$primary-border-dark !default;
+$border-width: 1px !default;
+$border-style: solid !default;
 
 $border-widths: (
   1: 1px,
   2: 2px,
   3: 3px,
   4: 4px,
-  5: 5px
-) !default;
+  5: 5px,
+) !default;

package/src/styles/01-settings/_settings.box-shadow.scss

@@ -1,16 +1,28 @@
-@use "./settings.colors" as colors;
+@use './settings.colors' as colors;
 
-$box-shadow:                     0 8px 16px rgba(colors.$black, 0.15) !default;
-$box-shadow-xs:                  0px 1px 2px 0px rgba(45, 54, 67, 0.04), 0px 2px 4px 0px rgba(45, 54, 67, 0.08) !default;
-$box-shadow-sm:                  0 2px 4px rgba(colors.$black, 0.075) !default;
-$box-shadow-lg:                  0 16px 48px rgba(colors.$black, 0.175) !default;
-$box-shadow-xl:                  0px 16px 64px -8px rgba(45, 54, 67, 0.14) !default;
-$box-shadow-inset:              inset 0 1px 2px rgba(colors.$black, 0.075) !default;
+$box-shadow: 0 8px 16px rgba(colors.$black, 0.15) !default;
+$box-shadow-xs:
+  0px 1px 2px 0px rgba(45, 54, 67, 0.04),
+  0px 2px 4px 0px rgba(45, 54, 67, 0.08) !default;
+$box-shadow-sm: 0 2px 4px rgba(colors.$black, 0.075) !default;
+$box-shadow-lg: 0 16px 48px rgba(colors.$black, 0.175) !default;
+$box-shadow-xl: 0px 16px 64px -8px rgba(45, 54, 67, 0.14) !default;
+$box-shadow-inset: inset 0 1px 2px rgba(colors.$black, 0.075) !default;
 
 // Drak mode
 
-$box-shadow-dark:                0px 8px 40px -8px rgba(30, 30, 30, 0.70), 0px 4px 20px 0px rgba(30, 30, 30, 0.80);
-$box-shadow-xs-dark:             0px 1px 2px 0px rgba(30, 30, 30, 0.50), 0px 2px 4px 0px rgba(30, 30, 30, 0.50);
-$box-shadow-sm-dark:             0px 2px 4px -2px rgba(30, 30, 30, 0.50), 0px 4px 8px -2px rgba(30, 30, 30, 0.50);
-$box-shadow-lg-dark:             0px 8px 18px -2px rgba(30, 30, 30, 0.50), 0px 8px 24px -2px rgba(30, 30, 30, 0.50);
-$box-shadow-xl-dark:             0px 33px 61px -8px rgba(30, 30, 30, 0.90), 0px 8px 10px 0px rgba(30, 30, 30, 0.90);
+$box-shadow-dark:
+  0px 8px 40px -8px rgba(30, 30, 30, 0.7),
+  0px 4px 20px 0px rgba(30, 30, 30, 0.8);
+$box-shadow-xs-dark:
+  0px 1px 2px 0px rgba(30, 30, 30, 0.5),
+  0px 2px 4px 0px rgba(30, 30, 30, 0.5);
+$box-shadow-sm-dark:
+  0px 2px 4px -2px rgba(30, 30, 30, 0.5),
+  0px 4px 8px -2px rgba(30, 30, 30, 0.5);
+$box-shadow-lg-dark:
+  0px 8px 18px -2px rgba(30, 30, 30, 0.5),
+  0px 8px 24px -2px rgba(30, 30, 30, 0.5);
+$box-shadow-xl-dark:
+  0px 33px 61px -8px rgba(30, 30, 30, 0.9),
+  0px 8px 10px 0px rgba(30, 30, 30, 0.9);

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

@@ -1,19 +1,19 @@
-@use "sass:string";
-@use "settings.config" as config;
-@use "settings.typography" as fonts;
+@use 'sass:string';
+@use 'settings.config' as config;
+@use 'settings.typography' as fonts;
 
-$breadcrumb-font-size:                  fonts.$font-size-sm !default;
-$breadcrumb-link-padding-y:             4px !default;
-$breadcrumb-link-padding-x:             0px !default;
-$breadcrumb-link-border-width:          2px !default;
-$breadcrumb-items-gap:                  12px !default;
-$breadcrumb-margin-bottom:              16px !default;
-$breadcrumb-color:                      var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$breadcrumb-hover-color:                var(--#{config.$prefix}body-color) !default;
-$breadcrumb-active-color:               var(--#{config.$prefix}body-color) !default;
-$breadcrumb-bg:                         null !default;
-$breadcrumb-divider-color:              var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$breadcrumb-divider-active-color:       var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$breadcrumb-divider:                    "\203A" !default; // Unicode character for '›'
-$breadcrumb-divider-size:               20px !default;
-$breadcrumb-divider-gap:                12px !default;
+$breadcrumb-font-size: fonts.$font-size-sm !default;
+$breadcrumb-link-padding-y: 4px !default;
+$breadcrumb-link-padding-x: 0px !default;
+$breadcrumb-link-border-width: 2px !default;
+$breadcrumb-items-gap: 12px !default;
+$breadcrumb-margin-bottom: 16px !default;
+$breadcrumb-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$breadcrumb-hover-color: var(--#{config.$prefix}body-color) !default;
+$breadcrumb-active-color: var(--#{config.$prefix}body-color) !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$breadcrumb-divider-active-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$breadcrumb-divider: '\203A' !default; // Unicode character for '›'
+$breadcrumb-divider-size: 20px !default;
+$breadcrumb-divider-gap: 12px !default;

package/src/styles/01-settings/_settings.btn-group.scss

@@ -1 +1 @@
-$btn-group-gap: 12px;
+$btn-group-gap: 12px;