@shohojdhara/atomix 0.3.2 → 0.3.3

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

@@ -0,0 +1,47 @@
+/*!
+ * Shaj Default Theme Modal Settings
+ * Modern modal styling with clean aesthetics
+ * Overrides Atomix default modal settings
+ */
+
+@forward '../../../styles/01-settings/settings.modal' with (
+  $modal-inner-padding: 24px,
+
+  // 24px - more spacious
+  $modal-content-color: null,
+  $modal-content-bg: var(--atomix-body-bg),
+  $modal-content-border-radius: 12px,
+  // 12px - softer corners
+  $modal-content-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
+  // deeper shadow
+  $modal-header-padding-bottom: 16px,
+  // 16px
+  $modal-title-font-size: 20px,
+  // 20px - larger titles
+  $modal-sub-margin-top: 6px,
+  // 6px
+  $modal-sub-color: var(--atomix-tertiary-text-emphasis),
+  $modal-footer-items-gap: 12px,
+
+  // 12px
+  $modal-backdrop-bg: var(--atomix-invert-bg-subtle),
+  $modal-backdrop-opacity: 0.6,
+  // slightly more opaque
+  $modal-backdrop-blur: 12px,
+
+  // 12px - more blur
+  $modal-close-icon-color: #000000,
+  $modal-close-icon-size: 24px,
+
+  // 24px - smaller close button
+  $modal-sm: 480px,
+  // 480px
+  $modal-md: 720px,
+  // 720px
+  $modal-lg: 960px,
+  // 960px
+  $modal-xl: 1200px // 1200px
+);
+
+// Override variables that don't have !default in the original
+$modal-sub-font-size: 14px; // 14px

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

@@ -0,0 +1,26 @@
+/*!
+ * Shaj Default Theme Nav Settings
+ * Modern navigation styling with clean aesthetics
+ * Overrides Atomix default nav settings
+ */
+
+@use '../../../styles/01-settings/settings.nav' with (
+  $nav-item-gap-x: 12px,
+
+  // 12px - more spacing between items
+  $nav-link-padding-x: 16px,
+  // 16px - more generous padding
+  $nav-link-padding-y: 10px,
+  // 10px
+  $nav-link-font-size: 16px,
+  // 16px
+  $nav-link-font-weight: 500,
+  $nav-link-color: var(--atomix-body-color),
+  $nav-link-hover-color: var(--atomix-body-color),
+  $nav-link-bg: var(--atomix-body-bg),
+  $nav-link-hover-bg: var(--atomix-secondary-bg-subtle),
+  $nav-link-inner-gap: 8px,
+
+  // 8px
+  $nav-icon-size: 18px // 18px - slightly smaller icons
+);

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

@@ -0,0 +1,60 @@
+/*!
+ * Shaj Default Theme Navbar Settings
+ * Modern navbar styling with clean aesthetics
+ * Overrides Atomix default navbar settings
+ */
+
+@use '../../../styles/01-settings/settings.navbar' with (
+  // Navbar container and layout
+  $navbar-padding-x: 32px,
+  // 32px - more breathing room
+  $navbar-padding-y: 12px,
+  // 12px
+  $navbar-container-max-width: 1440px,
+  // 1440px
+  $navbar-height: 72px,
+
+  // 72px - taller for modern feel
+  // Navbar appearance
+  $navbar-bg: var(--atomix-body-bg),
+  $navbar-border-width: 1px,
+  $navbar-border-color: var(--atomix-primary-border-subtle),
+  $navbar-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
+  // Even softer, larger shadow for depth
+  // Brand/logo
+  $navbar-brand-margin-end: 32px,
+  // 32px
+  $navbar-brand-font-size: 20px,
+  // 20px - slightly larger
+  $navbar-brand-font-weight: 600,
+  $navbar-brand-color: var(--atomix-body-color),
+  // Mobile toggler
+  $navbar-toggler-size: 36px,
+  // 36px
+  $navbar-toggler-color: var(--atomix-body-color),
+  $navbar-toggler-bg: transparent,
+  $navbar-toggler-border: 0,
+  $navbar-toggler-border-radius: 6px,
+  // 6px
+  $navbar-toggler-focus-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3),
+  // larger focus
+  // Collapse/mobile menu
+  $navbar-collapse-padding-top: 12px,
+  // 12px
+  $navbar-collapse-transition: all 300ms ease-in-out,
+
+  // smoother transition
+  // Backdrop (for mobile overlay)
+  $navbar-backdrop-bg: rgba(0, 0, 0, 0.5),
+  $navbar-backdrop-z-index: 1029,
+
+  // Z-index values
+  $navbar-z-index: 1030,
+  $navbar-fixed-z-index: 1030,
+
+  // Dark mode variants
+  $navbar-bg-dark: var(--atomix-gray-9),
+  $navbar-border-color-dark: var(--atomix-gray-7),
+  $navbar-brand-color-dark: var(--atomix-gray-1),
+  $navbar-toggler-color-dark: var(--atomix-gray-1)
+);

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

@@ -0,0 +1,36 @@
+/*!
+ * Shaj Default Theme Pagination Settings
+ * Modern pagination styling with clean aesthetics
+ * Overrides Atomix default pagination settings
+ */
+
+@use '../../../styles/01-settings/settings.pagination' with (
+  $pagination-size: 36px,
+  // 36px - larger touch targets
+  $pagination-size-sm: 28px,
+  // 28px
+  $pagination-size-lg: 44px,
+
+  // 44px
+  $pagination-padding-x: 12px,
+  // 12px
+  $pagination-padding-y: 8px,
+
+  // 8px
+  $pagination-font-size: 14px,
+
+  // 14px
+  $pagination-color: var(--atomix-secondary-text-emphasis),
+  $pagination-bg: var(--atomix-body-bg),
+  $pagination-border-radius: 6px,
+
+  // 6px - softer corners instead of pill
+  $pagination-focus-border-width: 2px,
+  $pagination-focus-border-color: var(--atomix-brand-border-subtle),
+  $pagination-hover-color: var(--atomix-body-color),
+  $pagination-hover-bg: var(--atomix-secondary-bg-subtle),
+  $pagination-active-color: var(--atomix-body-color),
+  $pagination-active-bg: var(--atomix-brand-bg-subtle),
+  $pagination-disabled-color: var(--atomix-tertiary-text-emphasis),
+  $pagination-disabled-bg: var(--atomix-body-bg)
+);

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

@@ -0,0 +1,51 @@
+/*!
+ * Shaj Default Theme Photo Viewer Settings
+ * Modern photo viewer/lightbox styling with clean aesthetics
+ * Overrides Atomix default photo viewer settings
+ */
+
+@use '../../../styles/01-settings/settings.photoviewer' with (
+  // Modal/backdrop variables
+  $photoviewer-modal-background-color: rgba(17, 24, 39, 0.9),
+  // darker backdrop
+  $photoviewer-modal-backdrop-blur: 16px,
+  // more blur
+  $photoviewer-modal-close-button-color: var(--atomix-body-color),
+  // Panel variables
+  $photoviewer-info-panel-width: 360px,
+  // wider panel
+  $photoviewer-info-panel-background: var(--atomix-body-bg),
+  $photoviewer-info-panel-border-color: var(--atomix-primary-border-subtle),
+  // Thumbnail variables
+  $photoviewer-thumbnail-active-border-color: var(--atomix-primary),
+  $photoviewer-thumbnail-size: 72px,
+  // larger thumbnails
+  $photoviewer-thumbnail-size-large: 96px,
+  // larger thumbnails
+  $photoviewer-thumbnail-gap: 1rem,
+  // more spacing
+  $photoviewer-thumbnail-border-radius: 8px,
+
+  // softer corners
+  // Animation variables
+  $photoviewer-transition-duration: 0.25s,
+  // faster transitions
+  $photoviewer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1),
+  $photoviewer-fast-transition: 0.1s,
+
+  // Control variables
+  $photoviewer-control-size: 3rem,
+  // larger controls
+  $photoviewer-control-size-small: 2.5rem,
+  $photoviewer-control-background: var(--atomix-body-bg),
+  $photoviewer-control-background-hover: var(--atomix-secondary-bg-subtle),
+  $photoviewer-control-color: var(--atomix-body-color),
+  $photoviewer-control-color-hover: var(--atomix-primary),
+  // Navigation variables
+  $photoviewer-nav-button-size: 3.5rem,
+  // larger nav buttons
+  $photoviewer-nav-button-background: var(--atomix-body-bg),
+  $photoviewer-nav-button-color: var(--atomix-body-color),
+  $photoviewer-nav-button-hover-background: var(--atomix-secondary-bg-subtle),
+  $photoviewer-nav-button-hover-color: var(--atomix-primary)
+);

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

@@ -0,0 +1,26 @@
+/*!
+ * Shaj Default Theme Popover Settings
+ * Modern popover styling with clean aesthetics
+ * Overrides Atomix default popover settings
+ */
+
+@use '../../../styles/01-settings/settings.popover' with (
+  $popover-max-width: 320px,
+  // 320px - wider for better content
+  $popover-padding-x: 20px,
+  // 20px
+  $popover-padding-y: 16px,
+  // 16px
+  $popover-inner-gap-x: 12px,
+  // 12px
+  $popover-inner-gap-y: 16px,
+  // 16px
+  $popover-bg: var(--atomix-body-bg),
+  $popover-border-radius: 8px,
+  // 8px - softer corners
+  $popover-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
+  // enhanced shadow
+  $popover-arrow-size: 10px,
+  // 10px - smaller arrow
+  $popover-arrow-offset: 6px // 6px
+);

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

@@ -0,0 +1,15 @@
+/*!
+ * Shaj Default Theme Position Settings
+ * Modern positioning utilities with clean aesthetics
+ * Overrides Atomix default position settings
+ */
+
+@use '../../../styles/01-settings/settings.position' with (
+  $position-values: (
+    0: 0,
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+  )
+);

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

@@ -0,0 +1,23 @@
+/*!
+ * Shaj Default Theme Progress Settings
+ * Modern progress bar styling with clean aesthetics
+ * Overrides Atomix default progress settings
+ */
+
+@use '../../../styles/01-settings/settings.progress' with (
+  $progress-width: 100%,
+  $progress-height: 8px,
+  // 8px - slightly thicker
+  $progress-font-size: 12px,
+  // 12px
+  $progress-bg: var(--atomix-secondary-bg-subtle),
+  $progress-border-radius: 800px,
+  // pill shape
+  $progress-bar-height: 8px,
+  // 8px
+  $progress-bar-color: var(--atomix-primary-text-emphasis),
+  $progress-bar-bg: var(--atomix-primary),
+  $progress-bar-transition: 0.3s,
+  // smoother transition
+  $progress-bar-easing: ease-in-out
+);

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

@@ -0,0 +1,17 @@
+/*!
+ * Shaj Default Theme Rating Settings
+ * Modern rating/star styling with clean aesthetics
+ * Overrides Atomix default rating settings
+ */
+
+@use '../../../styles/01-settings/settings.rating' with (
+  $rating-star-size: 24px,
+  // 24px - more reasonable default size
+  $rating-star-size-sm: 16px,
+  // 16px
+  $rating-star-size-lg: 32px,
+  // 32px
+  $rating-star-bg: var(--atomix-primary),
+  $rating-star-half-bg: var(--atomix-primary),
+  $rating-stars-gap: 4px // 4px - better spacing between stars
+);

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

@@ -0,0 +1,56 @@
+/*!
+ * Shaj Default Theme River Settings
+ * Modern river component styling with clean aesthetics
+ * Overrides Atomix default river settings
+ */
+
+@forward '../../../styles/01-settings/settings.river' with (
+  // River container
+  $river-width: 100%,
+  $river-padding-x: 0px,
+  $river-padding-y: 64px,
+  // 64px - more vertical space for elegance
+  $river-bg: var(--atomix-body-bg),
+  $river-overlay: #000000,
+  // black
+  $river-overlay-opacity: 0.6,
+
+  // slightly more opaque for depth
+  // Typography
+  $river-title-font-size: 40px,
+  // 40px - bolder titles
+  $river-text-font-size: 18px,
+  // 18px - improved readability
+  $river-title-font-weight: 700,
+  // bolder weight
+  $river-text-font-weight: 400,
+
+  $river-title-color: var(--atomix-body-color),
+  $river-text-color: var(--atomix-secondary-text-emphasis),
+  // Spacing
+  $river-text-margin-top: 12px,
+  // 12px
+  $river-actions-margin-top: 24px,
+  // 24px
+  $river-actions-spacing-x: 16px,
+
+  // 16px
+  // Image
+  $river-image-border-radius: 8px,
+  // 8px - soft rounded images
+  $river-image-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
+  // subtle shadow for depth
+  // Inner spacing
+  $river-spacing-inner: 64px,
+
+  // 64px - more generous spacing
+  // Content widths
+  $river-content-max-width: 720px,
+  // 720px - wider content area
+  $river-breakout-title-width: 720px,
+  // 720px
+  $river-breakout-text-width: 600px // 600px
+);
+
+// Override variables that don't have !default in the original
+$river-border-radius: 0px;

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

@@ -0,0 +1,37 @@
+/*!
+ * Shaj Default Theme Section Intro Settings
+ * Modern section intro styling with clean aesthetics
+ * Overrides Atomix default section intro settings
+ */
+
+@use '../../../styles/01-settings/settings.sectionintro' with (
+  // Padding
+  $sectionintro-padding-x: 0px,
+  $sectionintro-padding-y: 48px,
+
+  // 48px - more vertical space
+  // Typography
+  $sectionintro-title-font-size: 36px,
+  // 36px - larger for impact
+  $sectionintro-text-font-size: 18px,
+
+  // 18px
+  $sectionintro-title-color: var(--atomix-body-color),
+  $sectionintro-text-color: var(--atomix-body-color),
+  $sectionintro-title-font-weight: 700,
+  // bolder
+  $sectionintro-text-font-weight: 400,
+
+  // Spacing
+  $sectionintro-label-margin-bottom: 12px,
+  // 12px
+  $sectionintro-text-margin-top: 12px,
+  // 12px
+  $sectionintro-actions-margin-top: 24px,
+  // 24px
+  $sectionintro-actions-inner-gap: 12px,
+
+  // 12px
+  // Width
+  $sectionintro-width: 800px // 800px - wider for modern layouts
+);

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

@@ -0,0 +1,53 @@
+/*!
+ * Shaj Default Theme Select Settings
+ * Modern select styling with clean aesthetics
+ * Overrides Atomix default select settings
+ */
+
+@use '../../../styles/01-settings/settings.select' with (
+  $select-width: 320px,
+  // 320px - wider for better content
+  $select-padding-x: 16px,
+  // 16px
+  $select-padding-y: 12px,
+  // 12px
+  $select-color: var(--atomix-body-color),
+  $select-font-size: 16px,
+  // 16px
+  $select-font-size-lg: 18px,
+  // 18px
+  $select-icon-toggle-size: 20px,
+  // 20px
+  $select-icon-toggle-color: var(--atomix-secondary-text-emphasis),
+  $select-placeholder-color: var(--atomix-tertiary-text-emphasis),
+  $select-bg: var(--atomix-body-bg),
+  $select-expanded-bg: var(--atomix-secondary-bg-subtle),
+  $select-border-color: var(--atomix-primary-border-subtle),
+  $select-border-color-hover: var(--atomix-secondary-border-subtle),
+  $select-border-radius: 8px,
+  // 8px
+  $select-inner-spacer: 8px,
+  // 8px
+  $select-dropdown-icon-size: 20px,
+  // 20px
+  $select-panel-padding-x: 8px,
+  // 8px
+  $select-panel-padding-y: 8px,
+  // 8px
+  $select-panel-spacer-y: 8px,
+  // 8px
+  $select-panel-bg: var(--atomix-body-bg),
+  $select-panel-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
+  // enhanced shadow
+  $select-panel-border-radius: 8px,
+  // 8px
+  $select-item-padding-x: 12px,
+  // 12px
+  $select-item-padding-y: 10px,
+  // 10px
+  $select-item-color: var(--atomix-body-color),
+  $select-item-bg: var(--atomix-body-bg),
+  $select-item-border-radius: 6px,
+  // 6px
+  $select-item-bg-hover: var(--atomix-secondary-bg-subtle)
+);

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

@@ -0,0 +1,85 @@
+/*!
+ * Shaj Default Theme Side Menu Settings
+ * Modern side menu/navigation styling with clean aesthetics
+ * Overrides Atomix default side menu settings
+ */
+
+@use '../../../styles/01-settings/settings.side-menu' with (
+  // Side menu container
+  $side-menu-padding-x: 24px,
+  // 24px - more generous padding
+  $side-menu-padding-y: 32px,
+  // 32px
+  $side-menu-bg: var(--atomix-body-bg),
+  $side-menu-border-radius: 8px,
+  // 8px - softer corners
+  $side-menu-border-width: 1px,
+  $side-menu-border-color: var(--atomix-border-color),
+  $side-menu-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
+  // enhanced shadow
+  // Side menu title
+  $side-menu-title-font-size: 18px,
+  // 18px - larger title
+  $side-menu-title-font-weight: 600,
+  $side-menu-title-color: var(--atomix-body-color),
+  $side-menu-title-spacer-y: 12px,
+
+  // 12px
+  // Side menu toggler
+  $side-menu-toggler-padding-x: 12px,
+  // 12px
+  $side-menu-toggler-padding-y: 8px,
+  // 8px
+  $side-menu-toggler-bg: transparent,
+  $side-menu-toggler-hover-bg: var(--atomix-secondary-bg-subtle),
+  $side-menu-toggler-border-radius: 6px,
+  // 6px
+  $side-menu-toggler-transition: all 0.2s ease-in-out,
+
+  // Side menu items
+  $side-menu-item-padding-x: 16px,
+  // 16px - more padding
+  $side-menu-item-padding-y: 12px,
+  // 12px
+  $side-menu-item-font-size: 16px,
+  // 16px - better readability
+  $side-menu-item-font-weight: 400,
+  $side-menu-item-color: var(--atomix-secondary-text-emphasis),
+  $side-menu-item-hover-color: var(--atomix-body-color),
+  $side-menu-item-active-color: var(--atomix-brand-text-emphasis),
+  $side-menu-item-disabled-color: var(--atomix-disabled-text-emphasis),
+  $side-menu-item-bg: transparent,
+  $side-menu-item-hover-bg: var(--atomix-secondary-bg-subtle),
+  $side-menu-item-active-bg: var(--atomix-brand-bg-subtle),
+  $side-menu-item-disabled-bg: transparent,
+  $side-menu-item-border-radius: 6px,
+  // 6px
+  $side-menu-item-transition: all 0.2s ease-in-out,
+  $side-menu-item-gap: 12px,
+
+  // 12px
+  // Side menu list
+  $side-menu-list-margin-bottom: 16px,
+  // 16px
+  $side-menu-list-gap: 4px,
+
+  // 4px
+  // Side menu wrapper (for mobile animation)
+  $side-menu-wrapper-transition: height 0.3s ease-in-out,
+  $side-menu-inner-padding-top: 24px,
+
+  // 24px
+  // Mobile responsive
+  $side-menu-mobile-padding-x: 20px,
+  // 20px
+  $side-menu-mobile-padding-y: 16px,
+
+  // 16px
+  // Dark mode variants
+  $side-menu-bg-dark: var(--atomix-gray-9),
+  $side-menu-border-color-dark: var(--atomix-gray-7),
+  $side-menu-title-color-dark: var(--atomix-gray-1),
+  $side-menu-item-color-dark: var(--atomix-gray-3),
+  $side-menu-item-hover-color-dark: var(--atomix-gray-1),
+  $side-menu-item-active-color-dark: var(--atomix-brand-text-emphasis)
+);

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

@@ -0,0 +1,30 @@
+/*!
+ * Shaj Default Theme Skeleton Settings
+ * Modern skeleton loading styling with clean aesthetics
+ * Overrides Atomix default skeleton settings
+ */
+
+@use '../../../styles/01-settings/settings.skeleton' with (
+  $skeleton-sizes: (
+    sm: 14px,
+    // 14px
+    md: 16px,
+    // 16px
+    lg: 24px,
+    // 24px
+    xl: 32px,
+    // 32px
+    xxl: 36px,
+    // 36px
+    3xl: 40px,
+    // 40px
+    4xl: 44px,
+    // 44px
+  ),
+
+  $skeleton-color: rgba(0, 0, 0, 0.08),
+  // slightly more visible
+  $skeleton-color-gradient-end: rgba(0, 0, 0, 0.12),
+  $skeleton-gradient-from-color: rgba(0, 0, 0, 0.08),
+  $skeleton-gradient-to-color: rgba(0, 0, 0, 0.12)
+);

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

@@ -0,0 +1,72 @@
+/*!
+ * Shaj Default Theme Spacing
+ * Uses the same spacing scale as Atomix with consistent px units
+ * Maintains compatibility with Atomix spacing system
+ */
+
+// Spacing scale (matches Atomix)
+$spacer: 16px !default;
+
+$spacing-sizes: (
+  0: 0px,
+  1: 4px,
+  // 4px
+  2: 8px,
+  // 8px
+  3: 12px,
+  // 12px
+  4: 16px,
+  // 16px
+  5: 20px,
+  // 20px
+  6: 24px,
+  // 24px
+  7: 28px,
+  // 28px
+  8: 32px,
+  // 32px
+  9: 36px,
+  // 36px
+  10: 40px,
+  // 40px
+  11: 44px,
+  // 44px
+  12: 48px,
+  // 48px
+  14: 56px,
+  // 56px
+  16: 64px,
+  // 64px
+  20: 80px,
+  // 80px
+  24: 96px,
+  // 96px
+  28: 112px,
+  // 112px
+  32: 128px,
+  // 128px
+  36: 144px,
+  // 144px
+  40: 160px,
+  // 160px
+  44: 176px,
+  // 176px
+  48: 192px,
+  // 192px
+  52: 208px,
+  // 208px
+  56: 224px,
+  // 224px
+  60: 240px,
+  // 240px
+  64: 256px,
+  // 256px
+  72: 288px,
+  // 288px
+  80: 320px,
+  // 320px
+  90: 360px, // 360px
+) !default;
+
+$spacing-important: true !default;
+$enable-negative-margins: false !default;

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

@@ -0,0 +1,24 @@
+/*!
+ * Shaj Default Theme Spinner Settings
+ * Modern spinner/loading styling with clean aesthetics
+ * Overrides Atomix default spinner settings
+ */
+
+@use '../../../styles/01-settings/settings.spinner' with (
+  $spinner-sizes: (
+    sm: 16px,
+    // 16px
+    md: 24px,
+    // 24px
+    lg: 32px,
+    // 32px
+  ),
+
+  $spinner-background-color: var(--atomix-secondary-bg-subtle),
+  $spinner-color: var(--atomix-body-color),
+  $spinner-border-width: 3px,
+  // 3px
+  $spinner-border-width-sm: 2px,
+  // 2px
+  $spinner-animation-speed: 0.8s // slightly slower for smoother feel
+);