@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/lib/types/index.ts

@@ -0,0 +1,2 @@
+// Export all component types
+export * from './components.js';

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,55 @@
+// Export DOM utilities
+export * from './dom';
+
+// Export other utilities as needed
+
+// Export icon utilities
+export * from './icons';
+
+/**
+ * Class name utility function to conditionally join classNames together
+ * @param {...any} args - Class names or conditional class names
+ * @returns {string} - Joined class names
+ */
+export function cn(...args: any[]): string {
+  return args
+    .filter(Boolean)
+    .flat()
+    .map(arg => String(arg).trim())
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Generate a UUID v4 compatible string without relying on Node.js crypto
+ * This is a browser-compatible alternative to the uuid package
+ * @returns A UUID v4 compatible string
+ */
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Extract YouTube video ID from various YouTube URL formats
+ * @param url - YouTube URL
+ * @returns YouTube video ID or null if not found
+ */
+export function extractYouTubeId(url: string): string | null {
+  const regex =
+    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
+  const match = url.match(regex);
+  return match ? (match[1] as string) : null;
+}
+
+/**
+ * Check if a URL is a YouTube URL
+ * @param url - URL to check
+ * @returns True if the URL is a YouTube URL
+ */
+export function isYouTubeUrl(url: string): boolean {
+  return /(?:youtube\.com|youtu\.be)/.test(url);
+}

package/src/lib/utils/useForkRef.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import useForkRef, { setRef } from './useForkRef';
+
+describe('setRef', () => {
+  it('should call function ref with value', () => {
+    const ref = vi.fn();
+    const value = {};
+
+    setRef(ref, value);
+
+    expect(ref).toHaveBeenCalledWith(value);
+  });
+
+  it('should set current property on object ref', () => {
+    const ref = { current: null };
+    const value = {};
+
+    setRef(ref, value);
+
+    expect(ref.current).toBe(value);
+  });
+
+  it('should do nothing if ref is null', () => {
+    const value = {};
+
+    // This should not throw
+    setRef(null, value);
+  });
+});
+
+describe('useForkRef', () => {
+  it('should return null if both refs are null', () => {
+    const TestComponent = () => {
+      const forkedRef = useForkRef(null, null);
+      expect(forkedRef).toBeNull();
+      return null;
+    };
+
+    render(<TestComponent />);
+  });
+
+  it('should fork refs correctly', () => {
+    const refA = vi.fn();
+    const refB = { current: null };
+    const value = {};
+
+    const TestComponent = () => {
+      const forkedRef = useForkRef(refA, refB);
+      React.useEffect(() => {
+        if (forkedRef) {
+          forkedRef(value);
+        }
+      }, [forkedRef]);
+      return null;
+    };
+
+    render(<TestComponent />);
+
+    expect(refA).toHaveBeenCalledWith(value);
+    expect(refB.current).toBe(value);
+  });
+});

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/lib/utils.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+
+// Example test - replace with actual utility functions from your lib
+describe('Utils', () => {
+  it('should be able to run tests', () => {
+    expect(true).toBe(true);
+  });
+
+  // Add more tests for your actual utility functions
+  // Example:
+  // it('should format className correctly', () => {
+  //   expect(formatClassName('test', 'class')).toBe('test class');
+  // });
+});

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

@@ -53,6 +53,7 @@
 @forward './settings.select';
 @forward './settings.side-menu';
 @forward './settings.skeleton';
+@forward './settings.slider';
 @forward './settings.spinner';
 @forward './settings.steps';
 @forward './settings.tabs';
@@ -61,4 +62,5 @@
 @forward './settings.tooltip';
 @forward './settings.typography';
 @forward './settings.upload';
+@forward './settings.video-player';
 @forward './settings.z-layers';

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

@@ -1,16 +1,18 @@
+@use 'sass:map';
 @use './settings.border-radius' as radius;
 @use './settings.config' as config;
+@use './settings.spacing' as *;
 
 $accordion-width: 100% !default;
-$accordion-padding-x: 20px !default;
-$accordion-padding-y: 16px !default;
+$accordion-padding-x: map.get($spacing-sizes, 5) !default;
+$accordion-padding-y: map.get($spacing-sizes, 4) !default;
 
-$accordion-border-width: 2px !default;
+$accordion-border-width: calc(var(--#{config.$prefix}border-width) * 2) !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-padding-y: map.get($spacing-sizes, 2) !default;
 $accordion-body-color: var(--#{config.$prefix}body-color) !default;
 $accordion-body-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
@@ -21,7 +23,7 @@ $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-size: map.get($spacing-sizes, 5) !default;
 $accordion-icon-color: var(--#{config.$prefix}body-color) !default;
 
 $accordion-icon-transform: 180deg !default;

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

@@ -1,18 +1,21 @@
 @use './settings.colors' as colors;
 @use './settings.config' as config;
 @use './settings.typography' as fonts;
+@use './settings.spacing' as spacing;
+@use './settings.border' as border;
+@use 'sass:map';
 
 // Avatar group spacing
-$avatar-group-gap: 8px !default;
+$avatar-group-gap: map.get(spacing.$spacing-sizes, 2) !default;
 $avatar-group-stacked-overlap: 50% !default;
-$avatar-group-stacked-hover-gap: 8px !default;
+$avatar-group-stacked-hover-gap: map.get(spacing.$spacing-sizes, 2) !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-width: map.get(border.$border-widths, 1) !default;
 $avatar-group-more-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 
 // Avatar group transitions

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

@@ -25,7 +25,7 @@ $avatar-border-radius: (
 // 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-width: calc(var(--#{config.$prefix}border-width) * 1) !default;
 $avatar-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 
 // Avatar content
@@ -41,6 +41,6 @@ $avatar-initials-font-size: (
 
 // Interactive states
 $avatar-hover-opacity: 0.8 !default;
-$avatar-focus-ring-width: 2px !default;
+$avatar-focus-ring-width: calc(var(--#{config.$prefix}border-width) * 2) !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,18 @@
+@use 'sass:map';
 @use 'settings.border-radius' as radius;
 @use 'settings.typography' as fonts;
+@use './settings.spacing' as *;
 
-$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;
+$badge-font-size: fonts.$font-size-xs !default;
+$badge-font-weight: fonts.$font-weight-normal !default;
+
+$badge-padding-x: map.get($spacing-sizes, 2.5) !default; //10px
+$badge-padding-y: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-padding-y-sm: map.get($spacing-sizes, 1) !default; //4px
+$badge-padding-y-lg: map.get($spacing-sizes, 2) !default; //8px
+
+$badge-border-radius: radius.$border-radius-pill !default;
+
+$badge-icon-size: map.get($spacing-sizes, 4) !default; //16px
+
+$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px

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

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
+// Block Component Settings
+// These variables define the default values for the Block component
+
+// Spacing variables
+$block-spacing-xs: map.get($spacing-sizes, 4) !default; // 16px
+$block-spacing-sm: map.get($spacing-sizes, 8) !default; // 32px
+$block-spacing-md: map.get($spacing-sizes, 16) !default; // 64px
+$block-spacing-lg: map.get($spacing-sizes, 24) !default; // 96px
+$block-spacing-xl: map.get($spacing-sizes, 28) !default; // 128px

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

@@ -1,12 +1,15 @@
-$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
+@use 'sass:map';
+@use './settings.spacing' as *;
+
+$border-radius: map.get($spacing-sizes, 2) !default; //8px
+$border-radius-sm: map.get($spacing-sizes, 1) !default; //4px
+$border-radius-md: map.get($spacing-sizes, 1) !default; //4px
+$border-radius-lg: map.get($spacing-sizes, 2.5) !default; //10px
+$border-radius-xl: map.get($spacing-sizes, 3) !default; //12px
+$border-radius-xxl: map.get($spacing-sizes, 4) !default; //16px
+$border-radius-3xl: map.get($spacing-sizes, 6) !default; //24px
+$border-radius-4xl: map.get($spacing-sizes, 8) !default; //32px
+$border-radius-pill: map.get($spacing-sizes, 200) !default; //800px
 
 // Enable rounded corners
 $enable-rounded: true !default;

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

@@ -1,8 +1,11 @@
 @use './settings.colors' as colors;
+@use './settings.config' as config;
 
 $border-color: colors.$primary-border !default;
 $border-color-dark: colors.$primary-border-dark !default;
-$border-width: 1px !default;
+
+$border-width: 1px !default; //1px
+
 $border-style: solid !default;
 
 $border-widths: (

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

@@ -10,7 +10,7 @@ $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
+// Dark mode
 
 $box-shadow-dark:
   0px 8px 40px -8px rgba(30, 30, 30, 0.7),

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

@@ -1,13 +1,14 @@
-@use 'sass:string';
+@use 'sass:map';
+@use 'settings.spacing' as spacing;
 @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-link-padding-y: map.get(spacing.$spacing-sizes, 1) !default;
+$breadcrumb-link-padding-x: map.get(spacing.$spacing-sizes, 0) !default;
+$breadcrumb-link-border-width: map.get(spacing.$spacing-sizes, 2) !default;
+$breadcrumb-items-gap: map.get(spacing.$spacing-sizes, 3) !default;
+$breadcrumb-margin-bottom: map.get(spacing.$spacing-sizes, 4) !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;
@@ -15,5 +16,5 @@ $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-divider-size: map.get(spacing.$spacing-sizes, 4) !default;
+$breadcrumb-divider-gap: map.get(spacing.$spacing-sizes, 3) !default;

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

@@ -1 +1,4 @@
-$btn-group-gap: 12px;
+@use 'sass:map';
+@use 'settings.spacing' as spacing;
+
+$btn-group-gap: map.get(spacing.$spacing-sizes, 3) !default;

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

@@ -1,35 +1,37 @@
+@use 'sass:map';
+@use 'settings.spacing' as spacing;
+@use 'settings.border' as border;
+@use 'settings.box-shadow' as shadow;
 @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-padding-y: map.get(spacing.$spacing-sizes, 3) !default;
+$btn-padding-x: map.get(spacing.$spacing-sizes, 4) !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-icon-size: map.get(spacing.$spacing-sizes, 4) !default;
+$btn-icon-size-sm: map.get(spacing.$spacing-sizes, 3) !default;
+$btn-icon-size-lg: map.get(spacing.$spacing-sizes, 5) !default;
 $btn-letter-spacing: 0.0892857143em !default; // 1.25px/14px
 $btn-text-transform: none !default;
 
-$btn-padding-y-sm: 8px !default;
-$btn-padding-x-sm: 16px !default;
+$btn-padding-y-sm: map.get(spacing.$spacing-sizes, 1) !default;
+$btn-padding-x-sm: map.get(spacing.$spacing-sizes, 2) !default;
 $btn-font-size-sm: $font-size-sm !default;
 
-$btn-padding-y-lg: 16px !default;
-$btn-padding-x-lg: 24px !default;
+$btn-padding-y-lg: map.get(spacing.$spacing-sizes, 4) !default;
+$btn-padding-x-lg: map.get(spacing.$spacing-sizes, 6) !default;
 $btn-font-size-lg: $font-size-lg !default;
 
-$btn-border-width: 1px !default;
+$btn-border-width: map.get(border.$border-widths, 1) !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-box-shadow: shadow.$box-shadow !default;
 $btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba(var(--#{$prefix}primary-rgb), 0.25) !default;
 $btn-focus-outline: 2px solid var(--#{$prefix}primary) !default;
 $btn-focus-outline-offset: 2px !default;
@@ -49,11 +51,11 @@ $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-font-weight: $font-weight-medium !default;
 $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-inner-gap: map.get(spacing.$spacing-sizes, 2) !default;
 
 $btn-transition:
   all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
@@ -70,13 +72,9 @@ $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-hover-shadow: shadow.$box-shadow-sm !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-active-shadow: shadow.$box-shadow-xs !default;
 $btn-focus-shadow-opacity: 0.25 !default;
 
 // Enable pointer cursor on buttons