@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/lib/types/index.ts

@@ -1,2 +0,0 @@
-// Component types
-export * from './components';

package/src/lib/utils/dom.ts

@@ -1,45 +0,0 @@
-/**
- * Check if element has a specific class
- * @param element - DOM element to check
- * @param className - Class name to check for
- * @returns Whether element has the class
- */
-export function hasClass(element: HTMLElement, className: string): boolean {
-  return element.classList.contains(className);
-}
-
-/**
- * Add class to element if not already present
- * @param element - DOM element to modify
- * @param className - Class name to add
- */
-export function addClass(element: HTMLElement, className: string): void {
-  if (!hasClass(element, className)) {
-    element.classList.add(className);
-  }
-}
-
-/**
- * Remove class from element if present
- * @param element - DOM element to modify
- * @param className - Class name to remove
- */
-export function removeClass(element: HTMLElement, className: string): void {
-  if (hasClass(element, className)) {
-    element.classList.remove(className);
-  }
-}
-
-/**
- * Toggle class on element
- * @param element - DOM element to modify
- * @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 {
-  element.classList.toggle(className, force);
-} 

package/src/lib/utils/icons.ts

@@ -1,66 +0,0 @@
-/**
- * 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',
-  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',
-  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'
-};
-
-/**
- * Create a Phosphor icon SVG element
- * @param name - Icon name
- * @param size - Icon size in pixels
- * @returns SVG element as HTML 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>`;
-}
-
-/**
- * Create an icon element
- * @param name - Icon name
- * @param size - Icon size in pixels
- * @param className - Additional CSS class name
- * @returns Icon element
- */
-export function createIconElement(
-  name: string,
-  size: number = 16,
-  className: string = ''
-): HTMLSpanElement {
-  const iconElement = document.createElement('span');
-  iconElement.className = className || 'c-icon';
-  iconElement.style.display = 'inline-flex';
-  iconElement.style.alignItems = 'center';
-  iconElement.style.justifyContent = 'center';
-  iconElement.innerHTML = createPhosphorIcon(name, size);
-  
-  return iconElement;
-}
-
-/**
- * Get all available icon names
- * @returns Array of icon names
- */
-export function getAvailableIcons(): string[] {
-  return Object.keys(ICON_PATHS);
-} 

package/src/lib/utils/index.ts

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

package/src/lib/utils/useForkRef.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-
-/**
- * Utility to merge multiple React refs into one
- */
-export function setRef<T>(
-  ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null,
-  value: T | null
-): void {
-  if (typeof ref === 'function') {
-    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;
-  }
-}
-
-/**
- * Combines two React refs into a single ref function
- * This is used when you need to use and forward a ref at the same time
- */
-export default function useForkRef<T>(
-  refA: React.Ref<T> | null,
-  refB: React.Ref<T> | null
-): React.RefCallback<T> | null {
-  return React.useMemo(() => {
-    if (refA == null && refB == null) {
-      return null;
-    }
-    
-    return (refValue: T | null) => {
-      setRef(refA, refValue);
-      setRef(refB, refValue);
-    };
-  }, [refA, refB]);
-}

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

@@ -1,64 +0,0 @@
-// Base colors and variables that everything depends on
-@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";
-
-// 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";

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

@@ -1,29 +0,0 @@
-@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-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-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-icon-size:               20px !default;
-$accordion-icon-color:              var(--#{config.$prefix}body-color) !default;
-
-$accordion-icon-transform:          180deg !default;
-
-$accordion-disable-color:           var(--#{config.$prefix}tertiary-text-emphasis) !default;

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

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

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

@@ -1,20 +0,0 @@
-@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 "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 transitions
-$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 +0,0 @@
-@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;     
-
-// 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%
-) !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 content
-$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,
-) !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;

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

@@ -1,12 +0,0 @@
-@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;

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

@@ -1,11 +0,0 @@
-$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
-
-// Enable rounded corners
-$enable-rounded: true !default;

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

@@ -1,14 +0,0 @@
-@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-widths: (
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px
-) !default;

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

@@ -1,16 +0,0 @@
-@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;
-
-// 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);

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

@@ -1,19 +0,0 @@
-@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;

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

@@ -1,8 +0,0 @@
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1440px,
-) !default;

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

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

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

@@ -1,67 +0,0 @@
-@use "settings.config" as *;
-@use "settings.border-radius" as *;
-@use "settings.typography" as *;
-
-$btn-color:                             var(--#{$prefix}body-color) !default;
-$btn-padding-y:                         10px !default;
-$btn-padding-x:                         16px!default;
-$btn-font-family:                       $font-family-base !default;
-$btn-font-size:                         $font-size-base !default;
-$btn-line-height:                       1 !default;
-$btn-white-space:                       null !default; // Set to 
-$btn-icon-size:                         22px !default;
-$btn-icon-size-sm:                      20px !default;
-$btn-icon-size-lg:                      24px !default;
-
-$btn-padding-y-sm:                      8px !default;
-$btn-padding-x-sm:                      16px !default;
-$btn-font-size-sm:                      $font-size-sm !default;
-
-$btn-padding-y-lg:                      14px !default;
-$btn-padding-x-lg:                      16px !default;
-$btn-font-size-lg:                      $font-size-base !default;
-
-$btn-border-width:                      1px !default;
-
-$btn-font-weight:                       $font-weight-normal !default;
-$btn-focus-width:                       1px !default;
-$btn-box-shadow:                        none !default;
-
-
-$btn-disabled-color:                    var(--#{$prefix}disabled-text-emphasis) !default;
-$btn-disabled-bg:                       var(--#{$prefix}secondary-bg-subtle) !default;
-$btn-disabled-border-color:             var(--#{$prefix}primary-border-subtle) !default;
-$btn-disabled-opacity:                  0.65 !default;
-
-$btn-link-color:                        var(--#{$prefix}link-color) !default;
-$btn-link-hover-color:                  var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:               var(--#{$prefix}disabled-text-emphasis) !default;
-
-$btn-border-radius:                     $border-radius-xl !default;
-$btn-border-radius-sm:                  $border-radius !default;
-$btn-border-radius-lg:                  $border-radius-xl !default;
-
-$btn-link-color:                        var(--#{$prefix}brand-text-emphasis) !default; 
-$btn-link-color-hover:                  var(--#{$prefix}invert-text-emphasis) !default;
-$btn-link-font-weight:                  $font-weight-medium;
-$btn-link-border-color:                 var(--#{$prefix}brand-border-subtle)  !default; 
-$btn-link-border-color-hover:           var(--#{$prefix}secondary-border-subtle)  !default; 
-
-$btn-inner-gap:                         8px !default;
-
-$btn-transition:                        color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$btn-hover-bg-shade-amount:             71.5% !default;
-$btn-hover-bg-tint-amount:              82% !default;
-$btn-hover-border-shade-amount:         20% !default;
-$btn-hover-border-tint-amount:          10% !default; 
-$btn-active-bg-shade-amount:            20% !default;
-$btn-active-bg-tint-amount:             20% !default;
-$btn-active-border-shade-amount:        25% !default;
-$btn-active-border-tint-amount:         10% !default;
-
-// Enable pointer cursor on buttons
-$enable-button-pointers: true !default;
-
-// Enable gradients
-$enable-gradients: false !default;

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

@@ -1,41 +0,0 @@
-@use 'settings.colors' as *;
-@use 'settings.config' as config;
-@use '../02-tools/tools.rem' as rem;
-
-// Callout
-$callout-width: 100% !default;
-$callout-padding-x: 16px !default;
-$callout-padding-y: 16px !default;
-$callout-tost-padding-x: 16px !default;
-$callout-tost-padding-y: 16px !default;
-$callout-bg: $white !default;
-$callout-border-radius: 8px !default;
-$callout-border-color: $gray-3 !default;
-$callout-border-width: 1px !default;
-$callout-title-font-size: 16px !default;
-$callout-title-font-weight: 600 !default;
-$callout-title-color: $gray-9 !default;
-$callout-text-font-size: 14px !default;
-$callout-text-font-weight: 400 !default;
-$callout-text-color: $gray-7 !default;
-$callout-message-spacer: 12px !default;
-$callout-icon-size: 20px !default;
-$callout-icon-color: $primary !default;
-$callout-close-btn-size: 20px !default;
-$callout-actions-spacer: 8px !default;
-$callout-actions-spacer-y: 12px !default;
-$callout-toast-bg: $white !default;
-$callout-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !default;
-
-// Toast positions
-$callout-toast-positions: (
-  'top-right': (top: 16px, right: 16px),
-  'top-left': (top: 16px, left: 16px),
-  'top-center': (top: 16px, left: 50%, transform: translateX(-50%)),
-  'bottom-right': (bottom: 16px, right: 16px),
-  'bottom-left': (bottom: 16px, left: 16px),
-  'bottom-center': (bottom: 16px, left: 50%, transform: translateX(-50%))
-) !default;
-
-// Z-index for toast containers
-$callout-toast-z-index: 1000 !default;

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

@@ -1,39 +0,0 @@
-@use "settings.config" as config;
-@use "settings.typography" as fonts;
-
-$card-spacer-y:                     16px !default;
-$card-spacer-x:                     16px !default;
-$card-row-spacer-y:                 12px !default;
-$card-row-spacer-x:                 12px !default; 
-$card-title-spacer-y:               4px !default;
-$card-action-spacer-y:              12px !default;
-$card-header-spacer-y:              12px !default;
-
-
-$card-title-color:                  var(--#{config.$prefix}body-color) !default;
-$card-title-font-size:              fonts.$font-size-base !default;
-$card-text-color:                   var(--#{config.$prefix}secondary-text-emphasis) !default;
-$card-text-font-size:               fonts.$font-size-sm !default;
-
-$card-border-width:                 1px !default;
-$card-border-color:                 var(--#{config.$prefix}primary-border-subtle) !default;
-
-$card-border-radius:                var(--#{config.$prefix}border-radius-lg) !default;
-$card-image-border-radius:          $card-border-radius !default;
-
-$card-boxshadow:                    null !default;
-$card-height:                       null !default;
-
-$card-bg:                           var(--#{config.$prefix}primary-bg-subtle) !default;
-$card-bg-hover:                     var(--#{config.$prefix}secondary-bg-subtle) !default;
-
-
-$card-icon-size:                    20px !default;
-$card-icon-padding:                 10px !default; 
-$card-icon-bg:                      var(--#{config.$prefix}brand-bg-subtle) !default;
-$card-icon-color:                   var(--#{config.$prefix}brand-text-emphasis) !default;
-
-$card-width:                        100% !default;
-
-$card-hover:                        false !default;
-

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

@@ -1,3 +0,0 @@
-
-$checkbox-group-items-spacer-y:           8px !default;
-$checkbox-group-items-spacer-x:           16px !default; 

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

@@ -1,21 +0,0 @@
-@use 'settings.config' as config;
-@use 'settings.typography' as fonts;
-
-$checkbox-width:                                20px !default;
-$checkbox-height:                               20px !default;
-$checkbox-spacer:                               8px !default;
-$checkbox-font-size:                            fonts.$font-size-base !default;
-$checkbox-text-color:                           var(--#{config.$prefix}body-color) !default;
-$checkbox-checked-text-color:                   $checkbox-text-color !default;
-$checkbox-text-color-disabled:                  var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$checkbox-checked-text-color-disabled:          var(--#{config.$prefix}disabled-text-emphasis) !default;
-$checkbox-bg:                                   var(--#{config.$prefix}body-bg) !default;
-$checkbox-checked-bg:                           var(--#{config.$prefix}invert-bg-subtle) !default;
-$checkbox-checked-bg-hover:                     var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$checkbox-checked-bg-disabled:                   var(--#{config.$prefix}disabled-text-emphasis) !default;
-$checkbox-border-width:                         1px !default;
-$checkbox-border-color:                         var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$checkbox-border-color-hover:                   var(--#{config.$prefix}primary-text-emphasis) !default;
-$checkbox-border-color-disabled:                var(--#{config.$prefix}disabled-text-emphasis) !default;
-$checkbox-border-color-error:                   var(--#{config.$prefix}error-border-subtle) !default;
- 

package/src/styles/01-settings/_settings.color-mode.scss

@@ -1,5 +0,0 @@
-// Enable dark mode support
-$enable-dark-mode: true !default;
-
-// Color mode configuration
-$color-mode-type: "data-attribute" !default; // Options: "media-query" or "data-attribute"