@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,34 @@
+@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
+);
+
+$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;
+// 3p;
+$spinner-border-width-sm: 2px;
+// 2px
+$spinner-animation-speed: 0.8s;

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

@@ -0,0 +1,33 @@
+@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/mashroom/01-settings/_settings.tabs.scss

@@ -0,0 +1,33 @@
+@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/mashroom/01-settings/_settings.testimonials.scss

@@ -0,0 +1,24 @@
+@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/mashroom/01-settings/_settings.todo.scss

@@ -0,0 +1,52 @@
+@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/mashroom/01-settings/_settings.toggle.scss

@@ -0,0 +1,49 @@
+@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/mashroom/01-settings/_settings.tooltip.scss

@@ -0,0 +1,20 @@
+@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/mashroom/01-settings/_settings.typography.scss

@@ -0,0 +1,95 @@
+@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/mashroom/01-settings/_settings.upload.scss

@@ -0,0 +1,96 @@
+@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/mashroom/01-settings/_settings.z-layers.scss

@@ -0,0 +1,19 @@
+// 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/mashroom/02-tools/_index.scss

@@ -0,0 +1,8 @@
+/*!
+ * Mashroom Theme Tools Index
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Trippy mixins and functions specific to the mashroom theme
+@forward './tools.trippy-effects';
+@forward './tools.psychedelic-gradients';

package/src/themes/mashroom/02-tools/_tools.psychedelic-gradients.scss

@@ -0,0 +1,78 @@
+/*!
+ * Mashroom Theme Psychedelic Gradients Tools
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+/// Psychedelic radial gradient mixin
+/// @param {Color} $color1 [$purple-6] - First gradient color
+/// @param {Color} $color2 [$blue-6] - Second gradient color
+/// @param {Color} $color3 [$teal-5] - Third gradient color
+@mixin psychedelic-radial-gradient($color1: #9d00ff, $color2: #008cff, $color3: #00ff9d) {
+  background: radial-gradient(circle, $color1, $color2, $color3);
+}
+
+/// Psychedelic linear gradient mixin
+/// @param {Color} $color1 [$purple-6] - First gradient color
+/// @param {Color} $color2 [$pink-6] - Second gradient color
+@mixin psychedelic-linear-gradient($color1: #9d00ff, $color2: #ff2085) {
+  background: linear-gradient(135deg, $color1, $color2);
+}
+
+/// Trippy rainbow gradient mixin
+@mixin rainbow-gradient() {
+  background: linear-gradient(90deg, #9d00ff, #d080ff, #00ff9d, #ffbb00, #ff2085, #9d00ff);
+  background-size: 600% 600%;
+  animation: rainbow-shift 8s ease infinite;
+
+  @keyframes rainbow-shift {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+
+/// Mushroom cap gradient mixin
+@mixin mushroom-cap-gradient() {
+  background: radial-gradient(
+    ellipse at center,
+    #b94dff 0%,
+    #9d00ff 30%,
+    #7d00cc 60%,
+    #400066 100%
+  );
+}
+
+/// Mushroom stem gradient mixin
+@mixin mushroom-stem-gradient() {
+  background: linear-gradient(to bottom, #f8f0ff 0%, #f0d8ff 30%, #e2b0ff 70%, #d080ff 100%);
+}
+
+/// Magic mushroom spore gradient
+@mixin spore-gradient() {
+  background: radial-gradient(
+    circle at center,
+    #ffffff 0%,
+    #f0d8ff 20%,
+    #d080ff 40%,
+    #9d00ff 60%,
+    #400066 100%
+  );
+}
+
+/// Forest floor gradient
+@mixin forest-floor-gradient() {
+  background: linear-gradient(
+    160deg,
+    #004020 0%,
+    #006638 25%,
+    #00b36b 50%,
+    #00d984 75%,
+    #00ff9d 100%
+  );
+}

package/src/themes/mashroom/02-tools/_tools.trippy-effects.scss

@@ -0,0 +1,114 @@
+/*!
+ * Mashroom Theme Trippy Effects Tools
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+@use '../01-settings/settings.colors' as *;
+
+/// Trippy glow effect mixin
+/// @param {Color} $color [$primary-6] - Glow color
+/// @param {Number} $size [10px] - Glow size
+@mixin trippy-glow($color: #9d00ff, $size: 10px) {
+  box-shadow: 0 0 $size $color;
+  transition: all 0.3s ease;
+}
+
+/// Psychedelic pulse animation mixin
+/// @param {Color} $color [$primary-6] - Pulse color
+@mixin psychedelic-pulse($color) {
+  animation: pulse-glow 2s infinite;
+
+  @keyframes pulse-glow {
+    0% {
+      box-shadow: 0 0 5px $color;
+    }
+    50% {
+      box-shadow:
+        0 0 20px $color,
+        0 0 30px $color,
+        0 0 40px rgba($color, 0.7);
+    }
+    100% {
+      box-shadow: 0 0 5px $color;
+    }
+  }
+}
+
+/// Floating animation mixin
+@mixin float-animation() {
+  animation: float 6s ease-in-out infinite;
+
+  @keyframes float {
+    0% {
+      transform: translateY(0px) rotate(0deg);
+    }
+    33% {
+      transform: translateY(-20px) rotate(2deg);
+    }
+    66% {
+      transform: translateY(10px) rotate(-1deg);
+    }
+    100% {
+      transform: translateY(0px) rotate(0deg);
+    }
+  }
+}
+
+/// Psychedelic color shift mixin
+@mixin color-shift() {
+  animation: color-shift 10s infinite linear;
+
+  @keyframes color-shift {
+    0% {
+      filter: hue-rotate(0deg);
+    }
+    100% {
+      filter: hue-rotate(360deg);
+    }
+  }
+}
+
+/// Psychedelic breathing effect
+@mixin psychedelic-breathing() {
+  animation: breathe 4s ease-in-out infinite;
+
+  @keyframes breathe {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+  }
+}
+
+/// Twinkling stars effect
+@mixin twinkling-stars() {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      radial-gradient(2px 2px at 20px 30px, #fff, rgba(255, 255, 255, 0)),
+      radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
+      radial-gradient(1px 1px at 90px 40px, #fff, rgba(255, 255, 255, 0)),
+      radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    background-repeat: repeat;
+    background-size: 200px 100px;
+    animation: sparkle 4s linear infinite;
+    opacity: 0.5;
+  }
+
+  @keyframes sparkle {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 200px 100px;
+    }
+  }
+}

package/src/themes/mashroom/03-generic/_index.scss

@@ -0,0 +1,6 @@
+/*!
+ * Mashroom Theme Generic Index
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Generic styles for the mashroom theme

package/src/themes/mashroom/04-elements/_index.scss

@@ -0,0 +1,6 @@
+/*!
+ * Mashroom Theme Elements Index
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Element styles for the mashroom theme

package/src/themes/mashroom/05-objects/_index.scss

@@ -0,0 +1,6 @@
+/*!
+ * Mashroom Theme Objects Index
+ * Psychedelic mushroom-inspired theme with trippy visuals
+ */
+
+// Object styles for the mashroom theme