@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/types/index.ts

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

package/src/lib/utils/dom.ts

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,74 @@
+/**
+ * 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

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

package/src/lib/utils/useForkRef.ts

@@ -0,0 +1,36 @@
+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
+    (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

@@ -0,0 +1,64 @@
+// 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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+@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.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

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

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

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

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

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

@@ -0,0 +1,81 @@
+@use 'settings.config' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.typography' as *;
+
+$btn-color: var(--#{$prefix}body-color) !default;
+$btn-padding-y: 12px !default;
+$btn-padding-x: 20px !default;
+$btn-font-family: $font-family-base !default;
+$btn-font-size: $font-size-base !default;
+$btn-line-height: 1.2 !default;
+$btn-white-space: nowrap !default;
+$btn-icon-size: 20px !default;
+$btn-icon-size-sm: 18px !default;
+$btn-icon-size-lg: 22px !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: 16px !default;
+$btn-padding-x-lg: 24px !default;
+$btn-font-size-lg: $font-size-lg !default;
+
+$btn-border-width: 1px !default;
+
+$btn-font-weight: $font-weight-medium !default;
+$btn-focus-width: 2px !default;
+$btn-box-shadow:
+  0 1px 3px rgba(0, 0, 0, 0.1),
+  0 1px 2px rgba(0, 0, 0, 0.06) !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:
+  all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+  transform 0.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;
+
+// Enhanced button states
+$btn-hover-transform: translateY(-1px) !default;
+$btn-hover-shadow:
+  0 4px 12px rgba(0, 0, 0, 0.15),
+  0 2px 4px rgba(0, 0, 0, 0.1) !default;
+$btn-active-transform: translateY(0) !default;
+$btn-active-shadow:
+  0 1px 3px rgba(0, 0, 0, 0.2),
+  0 1px 2px rgba(0, 0, 0, 0.1) !default;
+$btn-focus-shadow-opacity: 0.25 !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

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

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

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

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

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

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