@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/themes/mashroom/01-settings/_index.scss

@@ -0,0 +1,69 @@
+/*!
+ * Shaj Default Theme Settings Index
+ * Modern design system settings for clean, aesthetic UI
+ */
+
+// Base colors and variables that everything depends on
+@forward './settings.colors';
+@forward './settings.config';
+
+// 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.typography';
+
+// Component settings - alphabetically ordered
+@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.callout';
+@forward './settings.card';
+@forward './settings.checkbox-group';
+@forward './settings.checkbox';
+@forward './settings.color-mode';
+@forward './settings.countdown';
+@forward './settings.data-table';
+@forward './settings.datepicker';
+@forward './settings.dropdown';
+@forward './settings.edge-panel';
+@forward './settings.form';
+@forward './settings.form-group';
+@forward './settings.grid';
+@forward './settings.hero';
+@forward './settings.input';
+@forward './settings.link';
+@forward './settings.list-group';
+@forward './settings.list';
+@forward './settings.design-tokens';
+@forward './settings.menu';
+@forward './settings.messages';
+@forward './settings.modal';
+@forward './settings.nav';
+@forward './settings.navbar';
+@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.upload';
+@forward './settings.z-layers';

package/src/themes/mashroom/01-settings/_settings.accordion.scss

@@ -0,0 +1,32 @@
+@use '../../../styles/01-settings/settings.accordion' with (
+  $accordion-width: 100%,
+  $accordion-padding-x: 24px,
+  // 24px - more spacious
+  $accordion-padding-y: 16px,
+
+  // 16px
+  $accordion-border-width: 1px,
+  $accordion-border-color: transparent,
+  $accordion-border-radius: 15px,
+
+  // 8px - softer
+  $accordion-body-padding-x: 24px,
+  // 24px
+  $accordion-body-padding-y: 12px,
+  // 12px
+  $accordion-body-color: var(--atomix-body-color),
+  $accordion-body-bg: var(--atomix-secondary-bg-subtle),
+  $accordion-header-padding-x: 24px,
+  // 24px
+  $accordion-header-padding-y: 16px,
+  // 16px
+  $accordion-header-color: var(--atomix-body-color),
+  $accordion-header-bg: var(--atomix-secondary-bg-subtle),
+  $accordion-header-bg-hover: var(--atomix-tertiary-bg-subtle),
+  $accordion-icon-size: 20px,
+  // 20px - larger icons
+  $accordion-icon-color: var(--atomix-body-color),
+  $accordion-icon-transform: 180deg,
+
+  $accordion-disable-color: var(--atomix-tertiary-text-emphasis)
+);

package/src/themes/mashroom/01-settings/_settings.animations.scss

@@ -0,0 +1,26 @@
+// Animation durations
+$transition-duration-fast: 150ms !default;
+$transition-duration: 250ms !default; // base
+$transition-duration-slow: 350ms !default;
+
+// Easing functions
+$easing-linear: linear !default;
+$easing: ease !default; // base
+$easing-in: ease-in !default;
+$easing-out: ease-out !default;
+$easing-in-out: ease-in-out !default;
+$easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+// Transition presets
+$transition-base: all $transition-duration $easing !default;
+$transition-fast: all $transition-duration-fast $easing-in-out !default;
+$transition-slow: all $transition-duration-slow $easing !default;
+
+// Component-specific transitions
+$transition-colors:
+  color $transition-duration-fast $easing-in-out,
+  background-color $transition-duration-fast $easing-in-out,
+  border-color $transition-duration-fast $easing-in-out !default;
+
+$transition-shadow: box-shadow $transition-duration $easing !default;
+$transition-transform: transform $transition-duration $easing !default;

package/src/themes/mashroom/01-settings/_settings.avatar-group.scss

@@ -0,0 +1,22 @@
+@use '../../../styles/01-settings/settings.avatar-group' with (
+  // Avatar group spacing
+  $avatar-group-gap: 12px,
+  // 12px - more generous spacing
+  $avatar-group-stacked-overlap: 40%,
+  // 40% - less overlap for clarity
+  $avatar-group-stacked-hover-gap: 12px,
+
+  // 12px
+  // Avatar group "more" indicator
+  $avatar-group-more-color: var(--atomix-tertiary-text-emphasis),
+  $avatar-group-more-bg: var(--atomix-body-bg),
+  $avatar-group-more-font-size: 14px,
+  // 14px
+  $avatar-group-more-font-weight: 500,
+  $avatar-group-more-border-width: 1px,
+  $avatar-group-more-border-color: var(--atomix-primary-border-subtle),
+  // Avatar group transitions
+  $avatar-group-transition-duration: 0.3s,
+  // smoother transition
+  $avatar-group-transition-timing: ease-in-out
+);

package/src/themes/mashroom/01-settings/_settings.avatar.scss

@@ -0,0 +1,57 @@
+@use '../../../styles/01-settings/settings.avatar' with (
+  // Avatar sizes - slightly larger for modern feel
+  $avatar-size: (
+      xs: 28px,
+      // 28px
+      sm: 36px,
+      // 36px
+      md: 44px,
+      // 44px
+      lg: 52px,
+      // 52px
+      xl: 64px,
+      // 64px
+    ),
+
+  // Avatar border radius - softer corners
+  $avatar-border-radius: (
+      xs: 6px,
+      // 6px
+      sm: 6px,
+      // 6px
+      md: 8px,
+      // 8px
+      lg: 8px,
+      // 8px
+      xl: 10px,
+      // 10px
+      circle: 50%
+    ),
+
+  // Avatar colors
+  $avatar-color: var(--atomix-primary-text-emphasis),
+  $avatar-bg: var(--atomix-secondary-bg-subtle),
+  $avatar-border-width: 1px,
+  $avatar-border-color: var(--atomix-primary-border-subtle),
+  // Avatar content
+  $avatar-fit: cover,
+  $avatar-initials-font-weight: 500,
+  $avatar-initials-font-size: (
+    xs: 12px,
+    // 12px
+    sm: 14px,
+    // 14px
+    md: 16px,
+    // 16px
+    lg: 18px,
+    // 18px
+    xl: 20px,
+    // 20px
+  ),
+
+  // Interactive states
+  $avatar-hover-opacity: 0.9,
+  $avatar-focus-ring-width: 2px,
+  $avatar-focus-ring-color: var(--atomix-primary-border-subtle),
+  $avatar-disabled-opacity: 0.6
+);

package/src/themes/mashroom/01-settings/_settings.badge.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/01-settings/settings.badge' with (
+  $badge-font-size: 12px,
+  // 12px
+  $badge-font-weight: 500,
+  // medium weight
+  $badge-padding-x: 12px,
+  // 12px - more padding
+  $badge-padding-y: 6px,
+  // 6px
+  $badge-padding-y-sm: 4px,
+  // 4px
+  $badge-padding-y-lg: 8px,
+  // 8px
+  $badge-border-radius: 800px,
+  // pill shape
+  $badge-icon-size: 14px,
+  // 14px - smaller icons
+  $badge-inner-items-gap: 6px // 6px
+);

package/src/themes/mashroom/01-settings/_settings.border-radius.scss

@@ -0,0 +1,24 @@
+/*!
+ * Shaj Default Theme Border Radius
+ * Modern border radius values for clean UI components
+ * Overrides Atomix default border radius settings
+ */
+
+// Modern border radius scale
+$border-radius-none: 0 !default;
+$border-radius-sm: 2px !default; // 2px
+$border-radius: 4px !default; // 4px - base
+$border-radius-md: 6px !default; // 6px
+$border-radius-lg: 8px !default; // 8px
+$border-radius-xl: 12px !default; // 12px
+$border-radius-2xl: 16px !default; // 16px
+$border-radius-3xl: 24px !default; // 24px
+$border-radius-4xl: 32px !default; // 32px
+$border-radius-full: 9999px !default; // Full rounded
+$border-radius-pill: 800px !default; // Pill shape
+
+// Aliases for backward compatibility
+$border-radius-xxl: $border-radius-2xl !default;
+
+// Enable rounded corners
+$enable-rounded: true !default;

package/src/themes/mashroom/01-settings/_settings.border.scss

@@ -0,0 +1,14 @@
+@use '../../../styles/01-settings/settings.border' with (
+  $border-width: 1px,
+  $border-widths: (
+    1: 1px,
+    2: 2px,
+    3: 3px,
+    4: 4px,
+    5: 5px,
+  ),
+  $border-style: solid,
+  $border-color: var(--atomix-gray-3),
+  // softer default border
+  $border-color-dark: var(--atomix-gray-5) // darker border for dark mode
+);

package/src/themes/mashroom/01-settings/_settings.box-shadow.scss

@@ -0,0 +1,40 @@
+// Elegant shadows for light mode
+$box-shadow-none: none !default;
+$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$box-shadow:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
+$box-shadow-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
+$box-shadow-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+$box-shadow-xl:
+  0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
+$box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !default;
+$box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;
+
+// Alias for backward compatibility
+$box-shadow-xs: $box-shadow-sm !default;
+
+// Dark mode shadows
+$box-shadow-dark:
+  0 1px 3px 0 rgba(0, 0, 0, 0.3),
+  0 1px 2px 0 rgba(0, 0, 0, 0.2) !default;
+$box-shadow-sm-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !default;
+$box-shadow-md-dark:
+  0 4px 6px -1px rgba(0, 0, 0, 0.3),
+  0 2px 4px -1px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-lg-dark:
+  0 10px 15px -3px rgba(0, 0, 0, 0.3),
+  0 4px 6px -2px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-xl-dark:
+  0 20px 25px -5px rgba(0, 0, 0, 0.3),
+  0 10px 10px -5px rgba(0, 0, 0, 0.2) !default;
+$box-shadow-2xl-dark: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !default;
+$box-shadow-inner-dark: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2) !default;
+
+// Alias for backward compatibility
+$box-shadow-xs-dark: $box-shadow-sm-dark !default;

package/src/themes/mashroom/01-settings/_settings.breakpoints.scss

@@ -0,0 +1,17 @@
+// Breakpoint definitions
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+) !default;
+
+// Individual breakpoint variables
+$breakpoint-xs: 0 !default;
+$breakpoint-sm: 576px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-lg: 992px !default;
+$breakpoint-xl: 1200px !default;
+$breakpoint-xxl: 1400px !default;

package/src/themes/mashroom/01-settings/_settings.btn-group.scss

@@ -0,0 +1,5 @@
+// Forward the btn-group settings as-is since the original doesn't use !default
+@forward '../../../styles/01-settings/settings.btn-group';
+
+// Override the gap value directly
+$btn-group-gap: 8px; // 8px - tighter grouping for cohesion

package/src/themes/mashroom/01-settings/_settings.button.scss

@@ -0,0 +1,50 @@
+@use '../../../styles/01-settings/settings.button' with (
+  $btn-padding-y: 12px,
+  // 12px - increased for more spacious feel
+  $btn-padding-x: 24px,
+  // 24px - wider buttons for modern look
+  $btn-font-size: 16px,
+  // 16px - larger text for better readability
+  $btn-line-height: 1.5,
+  $btn-font-weight: 500,
+
+  // Small button sizing
+  $btn-padding-y-sm: 8px,
+  // 8px
+  $btn-padding-x-sm: 16px,
+  // 16px
+  $btn-font-size-sm: 14px,
+  // 14px
+  // Large button sizing
+  $btn-padding-y-lg: 16px,
+  // 16px
+  $btn-padding-x-lg: 32px,
+  // 32px
+  $btn-font-size-lg: 18px,
+  // 18px
+  // Button border and radius
+  $btn-border-width: 1px,
+  $btn-border-radius: 8px,
+  // 8px - softer corners
+  $btn-border-radius-sm: 6px,
+  // 6px
+  $btn-border-radius-lg: 10px,
+  // 10px
+  // Button transitions
+  $btn-transition: all 200ms ease-in-out,
+
+  // smoother transition
+  // Button focus and states
+  $btn-focus-width: 2px,
+  $btn-focus-box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3),
+  // slightly larger focus ring
+  $btn-disabled-opacity: 0.6,
+
+  // Button icon spacing
+  $btn-inner-gap: 8px,
+  // 8px
+  // Button hover effects
+  $btn-hover-transform: translateY(-2px),
+  // more pronounced lift
+  $btn-active-transform: translateY(0)
+);

package/src/themes/mashroom/01-settings/_settings.callout.scss

@@ -0,0 +1,81 @@
+@use '../../../styles/01-settings/settings.callout' with (
+  // Callout
+  $callout-width: 100%,
+  $callout-padding-x: 20px,
+  // 20px - more generous padding
+  $callout-padding-y: 16px,
+  // 16px
+  $callout-tost-padding-x: 20px,
+  // 20px
+  $callout-tost-padding-y: 16px,
+  // 16px
+  $callout-bg: #ffffff,
+  $callout-border-radius: 8px,
+  // 8px - softer corners
+  $callout-border-color: var(--atomix-gray-3),
+  $callout-border-width: 1px,
+  $callout-title-font-size: 16px,
+  // 16px
+  $callout-title-font-weight: 600,
+  $callout-title-color: var(--atomix-gray-9),
+  $callout-text-font-size: 14px,
+  // 14px
+  $callout-text-font-weight: 400,
+  $callout-text-color: var(--atomix-gray-7),
+  $callout-message-spacer: 12px,
+  // 12px
+  $callout-icon-size: 20px,
+  // 20px
+  $callout-icon-color: var(--atomix-primary),
+  $callout-close-btn-size: 20px,
+  // 20px
+  $callout-actions-spacer: 12px,
+  // 12px
+  $callout-actions-spacer-y: 16px,
+  // 16px
+  $callout-toast-bg: #ffffff,
+  $callout-box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12),
+  // enhanced shadow
+  // Toast positions
+  $callout-toast-positions: (
+      'top-right': (
+        top: 24px,
+        // 24px
+        right: 24px,
+        // 24px
+      ),
+      'top-left': (
+        top: 24px,
+        // 24px
+        left: 24px,
+        // 24px
+      ),
+      'top-center': (
+        top: 24px,
+        // 24px
+        left: 50%,
+        transform: translateX(-50%),
+      ),
+      'bottom-right': (
+        bottom: 24px,
+        // 24px
+        right: 24px,
+        // 24px
+      ),
+      'bottom-left': (
+        bottom: 24px,
+        // 24px
+        left: 24px,
+        // 24px
+      ),
+      'bottom-center': (
+        bottom: 24px,
+        // 24px
+        left: 50%,
+        transform: translateX(-50%),
+      )
+    ),
+
+  // Z-index for toast containers
+  $callout-toast-z-index: 1000
+);

package/src/themes/mashroom/01-settings/_settings.card.scss

@@ -0,0 +1,52 @@
+/*!
+ * Shaj Default Theme Card Settings
+ * Modern card styling with clean aesthetics
+ * Overrides Atomix default card settings
+ */
+
+@use '../../../styles/01-settings/settings.card' with (
+  $card-spacer-y: 20px,
+  // 20px - more generous spacing
+  $card-spacer-x: 20px,
+  // 20px
+  $card-row-spacer-y: 16px,
+  // 16px
+  $card-row-spacer-x: 16px,
+  // 16px
+  $card-title-spacer-y: 6px,
+  // 6px
+  $card-action-spacer-y: 16px,
+  // 16px
+  $card-header-spacer-y: 16px,
+
+  // 16px
+  $card-title-color: var(--atomix-body-color),
+  $card-title-font-size: 18px,
+  // 18px - larger titles
+  $card-text-color: var(--atomix-secondary-text-emphasis),
+  $card-text-font-size: 16px,
+
+  // 16px - better readability
+  $card-border-width: 1px,
+  $card-border-color: var(--atomix-primary-border-subtle),
+  $card-border-radius: var(--atomix-border-radius-xl),
+  // 12px
+  $card-image-border-radius: var(--atomix-border-radius-xl),
+  $card-boxshadow: 0 2px 8px rgba(0, 0, 0, 0.06),
+  // subtle shadow
+  $card-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
+  // elevated on hover
+  $card-height: null,
+
+  $card-bg: var(--atomix-primary-bg-subtle),
+  $card-bg-hover: var(--atomix-secondary-bg-subtle),
+  $card-icon-size: 24px,
+  // 24px - larger icons
+  $card-icon-padding: 12px,
+  // 12px
+  $card-icon-bg: var(--atomix-brand-bg-subtle),
+  $card-icon-color: var(--atomix-brand-text-emphasis),
+  $card-width: 100%,
+
+  $card-hover: true // enable hover effects
+);

package/src/themes/mashroom/01-settings/_settings.checkbox-group.scss

@@ -0,0 +1,5 @@
+@use '../../../styles/01-settings/settings.checkbox-group' with (
+  $checkbox-group-items-spacer-y: 12px,
+  // 12px - better vertical spacing
+  $checkbox-group-items-spacer-x: 20px // 20px - more horizontal spacing
+);

package/src/themes/mashroom/01-settings/_settings.checkbox.scss

@@ -0,0 +1,23 @@
+@use '../../../styles/01-settings/settings.checkbox' with (
+  $checkbox-width: 20px,
+  // 20px
+  $checkbox-height: 20px,
+  // 20px
+  $checkbox-spacer: 12px,
+  // 12px - more space between checkbox and label
+  $checkbox-font-size: 16px,
+  // 16px
+  $checkbox-text-color: var(--atomix-body-color),
+  $checkbox-checked-text-color: var(--atomix-body-color),
+  $checkbox-text-color-disabled: var(--atomix-tertiary-text-emphasis),
+  $checkbox-checked-text-color-disabled: var(--atomix-disabled-text-emphasis),
+  $checkbox-bg: var(--atomix-body-bg),
+  $checkbox-checked-bg: var(--atomix-invert-bg-subtle),
+  $checkbox-checked-bg-hover: var(--atomix-tertiary-text-emphasis),
+  $checkbox-checked-bg-disabled: var(--atomix-disabled-text-emphasis),
+  $checkbox-border-width: 1px,
+  $checkbox-border-color: var(--atomix-tertiary-text-emphasis),
+  $checkbox-border-color-hover: var(--atomix-primary-text-emphasis),
+  $checkbox-border-color-disabled: var(--atomix-disabled-text-emphasis),
+  $checkbox-border-color-error: var(--atomix-error-border-subtle)
+);

package/src/themes/mashroom/01-settings/_settings.color-mode.scss

@@ -0,0 +1,7 @@
+@use '../../../styles/01-settings/settings.color-mode' with (
+  // Enable dark mode support
+  $enable-dark-mode: true,
+
+  // Color mode configuration - use data attribute for better control
+  $color-mode-type: 'data-attribute' // Options: "media-query" or "data-attribute"
+);