@shohojdhara/atomix 0.3.2 → 0.3.3

package/src/themes/shaj-default/01-settings/_settings.steps.scss

@@ -0,0 +1,39 @@
+/*!
+ * Shaj Default Theme Steps Settings
+ * Modern step indicator styling with clean aesthetics
+ * Overrides Atomix default steps settings
+ */
+
+@use '../../../styles/01-settings/settings.steps' with (
+  $steps-padding-x: 0px,
+  $steps-padding-y: 0px,
+
+  $steps-item-color: var(--atomix-tertiary-text-emphasis),
+  $steps-item-bg: var(--atomix-secondary-bg-subtle),
+  $steps-item-active-color: var(--atomix-brand-text-emphasis),
+  $steps-item-active-bg: var(--atomix-primary),
+  $steps-item-number-bg: var(--atomix-secondary-bg-subtle),
+  $steps-item-number-color: var(--atomix-tertiary-text-emphasis),
+  $steps-item-number-active-color: var(--atomix-gray-1),
+  $steps-item-number-size: 32px,
+  // 32px - larger for better visibility
+  $steps-item-number-font-size: 14px,
+  // 14px
+  $steps-item-number-border-radius: 800px,
+  // pill shape
+  $steps-item-font-size: 16px,
+  // 16px - better readability
+  $steps-item-content-gap: 12px,
+
+  // 12px
+  $steps-line-height: 2px,
+  // 2px - thicker line
+  $steps-line-width: 48px,
+  // 48px - longer connecting lines
+  $steps-gap: 16px,
+
+  // 16px - more spacing
+  $steps-line-height-vertical: 48px,
+  // 48px
+  $steps-line-width-vertical: 2px // 2px
+);

package/src/themes/shaj-default/01-settings/_settings.tabs.scss

@@ -0,0 +1,39 @@
+/*!
+ * Shaj Default Theme Tabs Settings
+ * Modern tabs styling with clean aesthetics
+ * Overrides Atomix default tabs settings
+ */
+
+@use '../../../styles/01-settings/settings.tabs' with (
+  $tabs-width: 100%,
+  $tabs-nav-btn-padding-x: 16px,
+  // 16px - more padding
+  $tabs-nav-btn-padding-y: 12px,
+  // 12px
+  $tabs-nav-btn-font-size: 16px,
+  // 16px
+  $tabs-nav-btn-font-weight: 500,
+  $tabs-nav-btn-color: var(--atomix-tertiary-text-emphasis),
+  $tabs-nav-btn-active-color: var(--atomix-body-color),
+  $tabs-nav-btn-disabled-color: var(--atomix-disabled-text-emphasis),
+  $tabs-nav-btn-bg: var(--atomix-body-bg),
+  $tabs-nav-btn-bg-hover: var(--atomix-secondary-bg-subtle),
+  $tabs-nav-btn-bg-active: var(--atomix-body-bg),
+  $tabs-nav-btn-bg-disabled: var(--atomix-body-bg),
+  $tabs-nav-btn-border-radius: 6px,
+  // 6px - softer corners
+  $tabs-nav-btn-border-width: 2px,
+  $tabs-nav-btn-border-color: transparent,
+  $tabs-nav-btn-border-active-color: var(--atomix-brand-border-subtle),
+  $tabs-nav-btn-border-disabled-color: var(--atomix-primary-border-subtle),
+  $tabs-nav-btns-gap: 4px,
+  // 4px - small gap between tabs
+  $tabs-nav-btn-inner-gap: 8px,
+  // 8px
+  $tab-nav-btn-icon-size: 18px,
+
+  // 18px
+  $tabs-panel-padding-x: 16px,
+  // 16px
+  $tabs-panel-padding-y: 16px // 16px
+);

package/src/themes/shaj-default/01-settings/_settings.testimonials.scss

@@ -0,0 +1,30 @@
+/*!
+ * Shaj Default Theme Testimonials Settings
+ * Modern testimonial styling with clean aesthetics
+ * Overrides Atomix default testimonials settings
+ */
+
+@use '../../../styles/01-settings/settings.testimonials' with (
+  $testimonial-width: 100%,
+  $testimonial-padding-x: 0px,
+  $testimonial-padding-y: 0px,
+  $testimonial-inner-spacer: 24px,
+  // 24px - more generous spacing
+  $testimonial-bg: null,
+  $testimonial-quote-font-size: 24px,
+  // 24px - impactful quotes
+  $testimonial-quote-font-size-sm: 18px,
+  // 18px
+  $testimonial-quote-font-size-lg: 32px,
+  // 32px
+  $testimonial-quote-font-weight: 500,
+  // medium weight for readability
+  $testimonial-quote-color: var(--atomix-body-color),
+  $testimonial-author-font-size: 16px,
+  // 16px
+  $testimonial-author-color: var(--atomix-body-color),
+  $testimonial-author-role-font-size: 14px,
+  // 14px - larger role text
+  $testimonial-author-role-color: var(--atomix-tertiary-text-emphasis),
+  $testimonial-author-inner-spacer: 8px // 8px - tighter author spacing
+);

package/src/themes/shaj-default/01-settings/_settings.todo.scss

@@ -0,0 +1,58 @@
+/*!
+ * Shaj Default Theme Todo Settings
+ * Modern todo/task list styling with clean aesthetics
+ * Overrides Atomix default todo settings
+ */
+
+@use '../../../styles/01-settings/settings.todo' with (
+  // Base styles
+  $todo-bg: #ffffff,
+  $todo-color: var(--atomix-gray-9),
+  $todo-border-color: var(--atomix-gray-3),
+  $todo-border-radius: 8px,
+  // softer corners
+  $todo-padding: 1.5rem,
+  // more generous padding
+  $todo-margin-bottom: 1.5rem,
+
+  // Title
+  $todo-title-font-size: 1.375rem,
+  // larger title
+  $todo-title-font-weight: 600,
+  // medium bold
+  $todo-title-margin-bottom: 1.25rem,
+
+  // Form
+  $todo-form-margin-bottom: 1.25rem,
+  $todo-form-gap: 0.75rem,
+
+  // more spacing
+  // Item
+  $todo-item-padding: 1rem,
+  // more padding
+  $todo-item-border-color: var(--atomix-gray-3),
+  $todo-item-hover-bg: var(--atomix-gray-2),
+  // Completed item
+  $todo-completed-color: var(--atomix-gray-6),
+  $todo-completed-text-decoration: line-through,
+
+  // Empty state
+  $todo-empty-color: var(--atomix-gray-6),
+  // Small size
+  $todo-padding-sm: 1rem,
+  $todo-font-size-sm: 0.875rem,
+  $todo-title-font-size-sm: 1.125rem,
+  $todo-title-margin-bottom-sm: 1rem,
+  $todo-item-padding-sm: 0.75rem,
+
+  // Large size
+  $todo-padding-lg: 2rem,
+  // more generous large padding
+  $todo-title-font-size-lg: 1.625rem,
+  // larger title
+  $todo-title-margin-bottom-lg: 1.5rem,
+  $todo-item-padding-lg: 1.25rem,
+
+  // Disabled state
+  $todo-disabled-opacity: 0.6
+);

package/src/themes/shaj-default/01-settings/_settings.toggle.scss

@@ -0,0 +1,55 @@
+/*!
+ * Shaj Default Theme Toggle Settings
+ * Modern toggle/switch styling with clean aesthetics
+ * Overrides Atomix default toggle settings
+ */
+
+@use '../../../styles/01-settings/settings.toggle' with (
+  $toggle-gap: 12px,
+
+  // 12px
+  $toggle-switch-on-bg: var(--atomix-primary),
+  $toggle-switch-off-bg: var(--atomix-tertiary-bg-subtle),
+  $toggle-switch-disabled-bg: var(--atomix-secondary-bg-subtle),
+  $toggle-switch-border-radius: 12px,
+  // 12px - softer corners
+  $toggle-switch-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
+  // subtle shadow
+  $toggle-switch-width-sm: 52px,
+  // 52px - slightly larger
+  $toggle-switch-height-sm: 28px,
+  // 28px
+  $toggle-switch-width-md: 40px,
+  // 40px
+  $toggle-switch-height-md: 24px,
+
+  // 24px
+  $toggle-switch-width: 40px,
+  // 40px
+  $toggle-switch-height: 24px,
+
+  // 24px
+  $toggle-switch-handle-bg: var(--atomix-primary-bg-subtle),
+  $toggle-switch-handle-border-radius: 800px,
+  // pill shape
+  $toggle-switch-handle-margin: 2px,
+
+  // 2px - tighter margin
+  $toggle-switch-handle-width-sm: 24px,
+  // 24px
+  $toggle-switch-handle-width-md: 20px,
+  // 20px
+  $toggle-switch-handle-height-sm: 24px,
+  // 24px
+  $toggle-switch-handle-height-md: 20px,
+
+  // 20px
+  $toggle-switch-handle-width: 20px,
+  // 20px
+  $toggle-switch-handle-height: 20px,
+
+  // 20px
+  $toggle-label-font-size: 16px,
+  // 16px
+  $toggle-label-color: var(--atomix-primary-text-emphasis)
+);

package/src/themes/shaj-default/01-settings/_settings.tooltip.scss

@@ -0,0 +1,26 @@
+/*!
+ * Shaj Default Theme Tooltip Settings
+ * Modern tooltip styling with clean aesthetics
+ * Overrides Atomix default tooltip settings
+ */
+
+@use '../../../styles/01-settings/settings.tooltip' with (
+  $tooltip-max-width: 280px,
+  // 280px - wider for better content
+  $tooltip-padding-x: 12px,
+  // 12px
+  $tooltip-padding-y: 8px,
+  // 8px
+  $tooltip-bg: var(--atomix-invert-bg-subtle),
+  $tooltip-font-size: 14px,
+  // 14px - better readability
+  $tooltip-font-weight: 400,
+  $tooltip-color: var(--atomix-invert-text-emphasis),
+  $tooltip-border-radius: 6px,
+  // 6px - softer corners
+  $tooltip-border-width: null,
+  $tooltip-border-color: null,
+  $tooltip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
+  // subtle shadow
+  $tooltip-arrow-size: 8px // 8px - smaller arrow
+);

package/src/themes/shaj-default/01-settings/_settings.typography.scss

@@ -0,0 +1,101 @@
+/*!
+ * Shaj Default Theme Typography Settings
+ * Modern typography with improved readability
+ * Overrides Atomix default typography settings
+ */
+
+@use '../../../styles/01-settings/settings.typography' with (
+  // Font families - using system fonts for better performance
+  $font-family-base: (
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    ),
+  $font-family-sans-serif: (
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  ),
+  $headings-font-family: (
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  ),
+  // Font weights
+  $font-weight-light: 300,
+  $font-weight-normal: 400,
+  $font-weight-medium: 500,
+  $font-weight-semibold: 600,
+  $font-weight-bold: 700,
+  $font-weight-heavy: 800,
+  $font-weight-black: 900,
+  $font-weight-base: 400,
+
+  // Font sizes - slightly larger for better readability
+  $font-size-base: 1rem,
+  // 16px
+  $font-size-xs: 0.75rem,
+  // 12px
+  $font-size-sm: 0.875rem,
+  // 14px
+  $font-size-md: 1.125rem,
+  // 18px
+  $font-size-lg: 1.25rem,
+
+  // 20px
+  // Heading sizes - more pronounced scale
+  $h1-font-size: 2.75rem,
+  // 44px
+  $h2-font-size: 2.25rem,
+  // 36px
+  $h3-font-size: 1.75rem,
+  // 28px
+  $h4-font-size: 1.375rem,
+  // 22px
+  $h5-font-size: 1.125rem,
+  // 18px
+  $h6-font-size: 1rem,
+
+  // 16px
+  $display-1: 4.5rem,
+
+  // 72px - larger display text
+  // Line heights - improved readability
+  $line-height-base: 1.6,
+  // better for body text
+  $line-height-sm: 1.4,
+  $line-height-lg: 1.8,
+
+  // Heading styles
+  $headings-margin-bottom: 0,
+  $headings-font-weight: 600,
+  // slightly lighter than bold
+  $headings-line-height: 1.2,
+
+  // tighter for headings
+  // Letter spacing for better typography
+  $h1-letter-spaceing: -1.5px,
+  $h2-letter-spaceing: -1px,
+  $h3-letter-spaceing: -0.75px,
+  $h4-letter-spaceing: -0.5px,
+  $h5-letter-spaceing: -0.25px,
+  $h6-letter-spaceing: 0px,
+
+  $paragraph-margin-bottom: 0,
+  $body-text-align: null
+);

package/src/themes/shaj-default/01-settings/_settings.upload.scss

@@ -0,0 +1,102 @@
+/*!
+ * Shaj Default Theme Upload Settings
+ * Modern file upload styling with clean aesthetics
+ * Overrides Atomix default upload settings
+ */
+
+@use '../../../styles/01-settings/settings.upload' with (
+  $upload-width: 600px,
+  // 600px - wider for modern screens
+  $upload-width-sm: 480px,
+  // 480px
+  $upload-width-large: 800px,
+
+  // 800px
+  $upload-padding-x: 0px,
+  $upload-padding-y: 0px,
+
+  $upload-inner-padding-x: 24px,
+  // 24px - more generous padding
+  $upload-inner-padding-y: 32px,
+
+  // 32px
+  $upload-large-inner-padding-x: 32px,
+  // 32px
+  $upload-large-inner-padding-y: 40px,
+
+  // 40px
+  $upload-border-radius: 8px,
+  // 8px - softer corners
+  $upload-border-width: 2px,
+  // 2px - more prominent border
+  $upload-border-color: var(--atomix-primary-border-subtle),
+  $upload-bg: var(--atomix-body-bg),
+  $upload-hover-bg: var(--atomix-secondary-bg-subtle),
+  // hover state
+  $upload-icon-size: 48px,
+  // 48px - larger icon
+  $upload-icon-padding: 0px,
+  $upload-icon-bg: var(--atomix-body-bg),
+  $upload-title-font-size: 20px,
+  // 20px - larger title
+  $upload-title-font-weight: 600,
+  $upload-title-color: var(--atomix-body-color),
+  $upload-title-margin-top: 16px,
+
+  // 16px
+  $upload-text-font-size: 16px,
+  // 16px - better readability
+  $upload-text-font-weight: 400,
+  $upload-text-color: var(--atomix-body-color),
+  $upload-text-margin-top: 8px,
+
+  // 8px
+  $upload-btn-margin-top: 24px,
+  // 24px
+  $upload-btn-margin-left: 16px,
+
+  // 16px
+  $upload-content-margin-left: 20px,
+
+  // 20px
+  $upload-helper-text-font-size: 14px,
+  // 14px
+  $upload-helper-text-font-weight: 400,
+  $upload-helper-text-color: var(--atomix-body-color),
+  $upload-helper-text-margin-top: 12px,
+
+  // 12px
+  $upload-disabled-opacity: 0.6,
+
+  // slightly more visible when disabled
+  $upload-loader-padding-x: 16px,
+  // 16px
+  $upload-loader-padding-y: 16px,
+  // 16px
+  $upload-loader-bg-opacity: 1,
+  $upload-loader-border-radius: 8px,
+  // 8px
+  $upload-loader-border-width: 1px,
+  $upload-loader-border-color: var(--atomix-primary-border-subtle),
+  $upload-loader-margin-top: 16px,
+  // 16px
+  $upload-loader-title-color: var(--atomix-body-color),
+  $upload-loader-title-font-size: 16px,
+  // 16px
+  $upload-loader-title-font-weight: 500,
+  $upload-loader-text-color: var(--atomix-tertiary-text-emphasis),
+  $upload-loader-text-font-size: 14px,
+  // 14px
+  $upload-loader-text-margin-top: 6px,
+  // 6px
+  $upload-loader-bar-height: 8px,
+  // 8px - thinner progress bar
+  $upload-loader-bar-margin-top: 12px,
+  // 12px
+  $upload-loader-control-icon-size: 18px,
+  // 18px
+  $upload-loader-contorl-color: var(--atomix-body-color),
+  $upload-loader-progress-color: var(--atomix-primary),
+  $upload-loader-success-color: var(--atomix-success),
+  $upload-loader-error-color: var(--atomix-error)
+);

package/src/themes/shaj-default/01-settings/_settings.z-layers.scss

@@ -0,0 +1,25 @@
+/*!
+ * Shaj Default Theme Z-Index Layers
+ * Standard z-index values for UI component layering
+ * Ensures proper stacking order for overlays and modals
+ */
+
+// Z-index layer definitions
+$z-index-dropdown: 1000 !default;
+$z-index-sticky: 1020 !default;
+$z-index-fixed: 1030 !default;
+$z-index-modal: 1040 !default;
+$z-index-popover: 1050 !default;
+$z-index-tooltip: 1060 !default;
+$z-index-toast: 1070 !default;
+
+// Z-index map for utilities
+$z-index-layers: (
+  dropdown: $z-index-dropdown,
+  sticky: $z-index-sticky,
+  fixed: $z-index-fixed,
+  modal: $z-index-modal,
+  popover: $z-index-popover,
+  tooltip: $z-index-tooltip,
+  toast: $z-index-toast,
+) !default;

package/src/themes/shaj-default/03-generic/_index.scss

@@ -0,0 +1,2 @@
+// Forward all generic files
+@forward 'generic.root';

package/src/themes/shaj-default/06-components/_components.button.scss

@@ -0,0 +1,55 @@
+/*!
+ * Shaj Default Theme Button Component Overrides
+ * Additional styling for modern button aesthetics
+ */
+@use '../01-settings/settings.config' as *;
+
+.c-btn {
+  // Enhanced shadow and hover effects
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 200ms ease-in-out;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  // Primary button enhancements
+  &.c-btn-primary {
+    background: linear-gradient(135deg, var(--#{$prefix}primary-6), var(--#{$prefix}primary-7));
+    border-color: var(--#{$prefix}primary-6);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--#{$prefix}primary-7), var(--#{$prefix}primary-8));
+      border-color: var(--#{$prefix}primary-7);
+    }
+  }
+
+  // Secondary button with subtle styling
+  &.c-btn-secondary {
+    background: var(--#{$prefix}gray-1);
+    border-color: var(--#{$prefix}gray-3);
+    color: var(--#{$prefix}gray-8);
+
+    &:hover {
+      background: var(--#{$prefix}gray-2);
+      border-color: var(--#{$prefix}gray-4);
+    }
+  }
+
+  // Outline buttons with modern styling
+  &.c-btn-outline-primary {
+    border-width: 1px;
+    background: transparent;
+
+    &:hover {
+      background: var(--#{$prefix}primary-1);
+      border-color: var(--#{$prefix}primary-6);
+    }
+  }
+}

package/src/themes/shaj-default/06-components/_components.card.scss

@@ -0,0 +1,57 @@
+/*!
+ * Shaj Default Theme Card Component Overrides
+ * Additional styling for modern card aesthetics
+ */
+
+@use '../01-settings/settings.config' as *;
+
+.c-card {
+  // Enhanced shadow and hover effects
+  transition: all 300ms ease-in-out;
+  border: 1px solid var(--#{$prefix}gray-2);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    border-color: var(--#{$prefix}gray-3);
+  }
+
+  // Card header styling
+  .c-card-header {
+    background: var(--#{$prefix}gray-1);
+    border-bottom: 1px solid var(--#{$prefix}gray-2);
+    font-weight: 600;
+  }
+
+  // Card title enhancements
+  .c-card-title {
+    font-weight: 600;
+    color: var(--#{$prefix}gray-9);
+    line-height: 1.3;
+  }
+
+  // Card text styling
+  .c-card-text {
+    color: var(--#{$prefix}gray-7);
+    line-height: 1.6;
+  }
+
+  // Card footer styling
+  .c-card-footer {
+    background: var(--#{$prefix}gray-1);
+    border-top: 1px solid var(--#{$prefix}gray-2);
+  }
+
+  // Image cards
+  &.c-card-image {
+    overflow: hidden;
+
+    img {
+      transition: transform 300ms ease-in-out;
+    }
+
+    &:hover img {
+      transform: scale(1.02);
+    }
+  }
+}

package/src/themes/shaj-default/06-components/_components.input.scss

@@ -0,0 +1,58 @@
+/*!
+ * Shaj Default Theme Input Component Overrides
+ * Additional styling for modern input aesthetics
+ */
+@use '../01-settings/settings.config' as *;
+
+.c-form-control {
+  // Enhanced focus states
+  transition: all 200ms ease-in-out;
+  border: 1px solid var(--#{$prefix}gray-3);
+
+  &:focus {
+    border-color: var(--#{$prefix}primary-6);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+    outline: none;
+  }
+
+  &:hover:not(:focus) {
+    border-color: var(--#{$prefix}gray-4);
+  }
+
+  // Placeholder styling
+  &::placeholder {
+    color: var(--#{$prefix}gray-5);
+    font-style: italic;
+  }
+
+  // Error state
+  &.c-is-invalid {
+    border-color: var(--#{$prefix}red-6);
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  // Success state
+  &.c-is-valid {
+    border-color: var(--#{$prefix}green-6);
+    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+  }
+}
+
+// Input group styling
+.c-input-group {
+  .c-input-group-text {
+    background: var(--#{$prefix}gray-1);
+    border-color: var(--#{$prefix}gray-3);
+    color: var(--#{$prefix}gray-6);
+    font-weight: 500;
+  }
+}
+
+// Floating labels
+.c-form-floating {
+  .c-form-control:focus ~ label,
+  .c-form-control:not(:placeholder-shown) ~ label {
+    color: var(--#{$prefix}primary-6);
+    font-weight: 500;
+  }
+}