@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,180 @@
+@use 'sass:color';
+
+@use '../../../styles/02-tools/tools.to-rgb' as *;
+@use '../../../styles/02-tools/tools.color-functions' as *;
+$white: #ffffff;
+$black: #000000;
+
+$purple-1: #f8f0ff;
+$purple-2: #f0d8ff;
+$purple-3: #e2b0ff;
+$purple-4: #d080ff;
+$purple-5: #b94dff;
+$purple-6: #9d00ff;
+// Deep psychedelic purple
+$purple-7: #7d00cc;
+$purple-8: #5e0099;
+$purple-9: #400066;
+$purple-10: #26003d;
+
+$primary-1: $purple-1;
+$primary-2: $purple-2;
+$primary-3: $purple-3;
+$primary-4: $purple-4;
+$primary-5: $purple-5;
+$primary-6: $purple-6;
+// Deep psychedelic purple
+$primary-7: $purple-7;
+$primary-8: $purple-8;
+$primary-9: $purple-9;
+$primary-10: $purple-10;
+
+// Primitives Blue Colors - Psychedelic blues and cyans
+$blue-1: #f0ffff;
+$blue-2: #d0f8ff;
+$blue-3: #90e8ff;
+$blue-4: #40d0ff;
+$blue-5: #00b4ff;
+$blue-6: #008cff;
+// Electric blue
+$blue-7: #0066cc;
+$blue-8: #004499;
+$blue-9: #003366;
+
+$blue-10: #001f3d;
+
+// Primitives Gray Colors - Keeping neutral grays for balance
+$gray-1: #f9fafb;
+$gray-2: #f3f4f6;
+$gray-3: #e5e7eb;
+$gray-4: #d1d5db;
+$gray-5: #9ca3af;
+$gray-6: #6b7280;
+$gray-7: #4b5563;
+$gray-8: #374151;
+$gray-9: #1f2937;
+$gray-10: #111827;
+
+$green-1: #f0fff8;
+$green-2: #d0ffeb;
+$green-3: #a0ffd4;
+$green-4: #50ffbb;
+$green-5: #00ff9d;
+$green-6: #00d984;
+// Electric green
+$green-7: #00b36b;
+$green-8: #008c52;
+$green-9: #006638;
+$green-10: #004020;
+
+$yellow-1: #fffff0;
+$yellow-2: #ffffd8;
+$yellow-3: #ffffb0;
+$yellow-4: #ffff6a;
+$yellow-5: #ffdd20;
+$yellow-6: #ffbb00;
+// Vibrant psychedelic yellow
+$yellow-7: #cc9900;
+$yellow-8: #997700;
+$yellow-9: #665500;
+$yellow-10: #332c00;
+
+// Primitives Red Colors - Vibrant magenta/red
+$red-1: #fff0f5;
+$red-2: #ffe0eb;
+$red-3: #ffc0d5;
+$red-4: #ff90ba;
+$red-5: #ff609f;
+$red-6: #ff2085;
+// Psychedelic magenta
+$red-7: #d9006f;
+$red-8: #b3005b;
+$red-9: #8c0047;
+$red-10: #660033;
+
+@use '../../../styles/01-settings/settings.colors' with (
+  // Basic Colors
+  $white: #ffffff,
+  $black: #000000,
+
+  // Color contrast variables
+  $color-contrast-dark: #000000,
+  $color-contrast-light: #ffffff,
+
+  // Primitives Primary Colors - Psychedelic purples and magentas
+  $primary-1: #f8f0ff,
+  $primary-2: #f0d8ff,
+  $primary-3: #e2b0ff,
+  $primary-4: #d080ff,
+  $primary-5: #b94dff,
+  $primary-6: #9d00ff,
+  // Deep psychedelic purple
+  $primary-7: #7d00cc,
+  $primary-8: #5e0099,
+  $primary-9: #400066,
+  $primary-10: #26003d,
+
+  // Primitives Red Colors - Vibrant magenta/red
+  $red-1: #fff0f5,
+  $red-2: #ffe0eb,
+  $red-3: #ffc0d5,
+  $red-4: #ff90ba,
+  $red-5: #ff609f,
+  $red-6: #ff2085,
+  // Psychedelic magenta
+  $red-7: #d9006f,
+  $red-8: #b3005b,
+  $red-9: #8c0047,
+  $red-10: #660033,
+
+  // Primitives Green Colors - Electric greens and limes
+  $green-1: #f0fff8,
+  $green-2: #d0ffeb,
+  $green-3: #a0ffd4,
+  $green-4: #50ffbb,
+  $green-5: #00ff9d,
+  $green-6: #00d984,
+  // Electric green
+  $green-7: #00b36b,
+  $green-8: #008c52,
+  $green-9: #006638,
+  $green-10: #004020,
+
+  // Primitives Yellow Colors - Psychedelic yellows and oranges
+  $yellow-1: #fffff0,
+  $yellow-2: #ffffd8,
+  $yellow-3: #ffffb0,
+  $yellow-4: #ffff6a,
+  $yellow-5: #ffdd20,
+  $yellow-6: #ffbb00,
+  // Vibrant psychedelic yellow
+  $yellow-7: #cc9900,
+  $yellow-8: #997700,
+  $yellow-9: #665500,
+  $yellow-10: #332c00,
+
+  // Primitives Blue Colors - Psychedelic blues and cyans
+  $blue-1: #f0ffff,
+  $blue-2: #d0f8ff,
+  $blue-3: #90e8ff,
+  $blue-4: #40d0ff,
+  $blue-5: #00b4ff,
+  $blue-6: #008cff,
+  // Electric blue
+  $blue-7: #0066cc,
+  $blue-8: #004499,
+  $blue-9: #003366,
+  $blue-10: #001f3d,
+
+  // Primitives Gray Colors - Keeping neutral grays for balance
+  $gray-1: #f9fafb,
+  $gray-2: #f3f4f6,
+  $gray-3: #e5e7eb,
+  $gray-4: #d1d5db,
+  $gray-5: #9ca3af,
+  $gray-6: #6b7280,
+  $gray-7: #4b5563,
+  $gray-8: #374151,
+  $gray-9: #1f2937,
+  $gray-10: #111827
+);

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

@@ -0,0 +1,4 @@
+// These variables must act as constants, hence the uppercase
+$ENV: 'dev';
+
+$prefix: atomix- !default;

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

@@ -0,0 +1,20 @@
+@use '../../../styles/01-settings/settings.countdown' with (
+  $countdown-color: var(--atomix-body-color),
+  $countdown-font-size: 16px,
+  // 16px
+  $countdown-font-weight: 500,
+  $countdown-focused-time-font-size: 20px,
+  // 20px - larger for emphasis
+  $countdown-focused-label-font-size: 12px,
+  // 12px
+  $countdown-focused-border-radius: 6px,
+  // 6px - softer corners
+  $countdown-focused-bg: var(--atomix-secondary-bg-subtle),
+  $countdown-item-padding-x: 16px,
+  // 16px - more padding
+  $countdown-item-padding-y: 12px,
+  // 12px
+  $countdown-items-gap: 8px,
+  // 8px
+  $countdown-focused-items-gap: 12px // 12px
+);

package/src/themes/mashroom/01-settings/_settings.data-table.scss

@@ -0,0 +1,56 @@
+@use '../../../styles/01-settings/settings.data-table' with (
+  // DataTable Variables
+  $data-table-bg: var(--atomix-white),
+  $data-table-color: var(--atomix-body-color),
+  $data-table-border-color: var(--atomix-border-color),
+  $data-table-border-width: var(--atomix-border-width),
+  $data-table-border-style: var(--atomix-border-style),
+  $data-table-border-radius: var(--atomix-border-radius),
+  // Header
+  $data-table-header-bg: var(--atomix-gray-1),
+  // lighter header
+  $data-table-header-color: var(--atomix-body-color),
+  $data-table-header-font-weight: 600,
+
+  // bolder headers
+  // Cell padding - more generous
+  $data-table-cell-padding-y: 1rem,
+  // 16px
+  $data-table-cell-padding-x: 1.25rem,
+  // 20px
+  $data-table-cell-padding-y-sm: 0.75rem,
+  // 12px
+  $data-table-cell-padding-x-sm: 1rem,
+
+  // 16px
+  // Striped rows
+  $data-table-striped-bg: rgba(0, 0, 0, 0.02),
+  // subtler stripes
+  $data-table-hover-bg: rgba(14, 165, 233, 0.05),
+  // primary color hover
+  // Pagination
+  $data-table-pagination-padding-y: 0.75rem,
+  // 12px
+  $data-table-pagination-padding-x: 1rem,
+  // 16px
+  $data-table-pagination-bg: var(--atomix-white),
+  $data-table-pagination-border-color: var(--atomix-border-color),
+  $data-table-pagination-hover-bg: var(--atomix-gray-1),
+  $data-table-pagination-active-bg: var(--atomix-primary),
+  $data-table-pagination-active-color: var(--atomix-white),
+  $data-table-pagination-disabled-color: var(--atomix-gray-5),
+  // Search input
+  $data-table-search-bg: var(--atomix-white),
+  $data-table-search-border-color: var(--atomix-border-color),
+  $data-table-search-focus-border-color: var(--atomix-primary),
+  $data-table-search-padding-y: 0.75rem,
+  // 12px
+  $data-table-search-padding-x: 1rem,
+  // 16px
+  $data-table-search-border-radius: var(--atomix-border-radius),
+  // Sort icon
+  $data-table-sort-icon-size: 0.875rem,
+  // 14px - slightly larger
+  $data-table-sort-icon-color: var(--atomix-gray-5),
+  $data-table-sort-icon-active-color: var(--atomix-primary)
+);

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

@@ -0,0 +1,45 @@
+@use '../../../styles/01-settings/settings.datepicker' with (
+  $datepicker-padding-x: 12px,
+  // 12px
+  $datepicker-padding-y: 16px,
+
+  // 16px
+  $datepicker-border-radius: 8px,
+  // 8px - softer corners
+  $datepicker-border-width: 1px,
+  $datepicker-border-color: var(--atomix-gray-3),
+  $datepicker-body-padding-x: 8px,
+  // 8px
+  $datepicker-body-padding-y: 8px,
+
+  // 8px
+  $datepicker-month-font-size: 16px,
+  // 16px - larger month text
+  $datepicker-month-font-weight: 600,
+
+  $datepicker-year-font-size: 16px,
+  // 16px
+  $datepicker-year-font-weight: 600,
+
+  $datepicker-week-font-size: 14px,
+  // 14px
+  $datepicker-week-font-weight: 500,
+  // medium weight for days
+  $datepicker-week-width: 44px,
+  // 44px - larger touch targets
+  $datepicker-week-height: 44px,
+
+  // 44px
+  $datepicker-day-font-size: 14px,
+  // 14px
+  $datepicker-day-font-weight: 400,
+  $datepicker-day-width: 44px,
+  // 44px
+  $datepicker-day-height: 44px,
+  // 44px
+  $datepicker-day-hover-bg: var(--atomix-secondary-bg-subtle),
+  $datepicker-day-border-radius: 6px,
+
+  // 6px - softer than pill
+  $datepicker-width: 352px // calculated width for larger touch targets
+);

package/src/themes/mashroom/01-settings/_settings.design-tokens.scss

@@ -0,0 +1,3 @@
+// Forward the maps settings as-is since they contain color and utility maps
+// that are already properly configured in our color settings
+@forward '../../../styles/01-settings/settings.design-tokens';

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

@@ -0,0 +1,45 @@
+@use '../../../styles/01-settings/settings.dropdown' with (
+  $dropdown-min-width: 200px,
+  // 200px - wider for better content
+  $dropdown-font-size: 16px,
+  // 16px
+  $dropdown-color: var(--atomix-body-color),
+  $dropdown-bg: var(--atomix-body-bg),
+  $dropdown-border-color: var(--atomix-primary-border-subtle),
+  $dropdown-border-radius: 8px,
+  // 8px - softer corners
+  $dropdown-border-width: 1px,
+  $dropdown-padding-x: 0,
+  $dropdown-padding-y: 8px,
+  // 8px
+  $dropdown-spacer: 6px,
+  // 6px
+  $dropdown-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
+  // deeper shadow
+  $dropdown-item-padding-x: 16px,
+  // 16px
+  $dropdown-item-padding-y: 10px,
+  // 10px - more padding
+  $dropdown-item-hover-color: var(--atomix-secondary-text-emphasis),
+  $dropdown-item-hover-bg: var(--atomix-brand-bg-subtle),
+  // Animation settings
+  $dropdown-animation-duration: 0.2s,
+  // faster
+  $dropdown-animation-timing: cubic-bezier(0.16, 1, 0.3, 1),
+  // Link variables
+  $dropdown-link-color: var(--atomix-body-color),
+  $dropdown-link-hover-color: var(--atomix-brand-text-emphasis),
+  $dropdown-link-hover-bg: var(--atomix-brand-bg-subtle),
+  $dropdown-link-active-color: var(--atomix-brand-text-emphasis),
+  $dropdown-link-active-bg: var(--atomix-brand-bg-subtle),
+  $dropdown-link-border-radius: 6px,
+
+  // 6px
+  $dropdown-header-color: var(--atomix-tertiary-text-emphasis),
+  $dropdown-header-padding: 10px 16px,
+
+  // consistent with items
+  $dropdown-divider-margin-y: 8px,
+  // 8px
+  $dropdown-divider-bg: var(--atomix-primary-border-subtle)
+);

package/src/themes/mashroom/01-settings/_settings.edge-panel.scss

@@ -0,0 +1,24 @@
+@use '../../../styles/01-settings/settings.edge-panel' with (
+  $edge-panel-zindex: 1050,
+  // high z-index for overlay
+  $edge-panel-width: 320px,
+  // 320px - wider for better content
+  $edge-panel-height: 40vh,
+  // 40vh
+  $edge-panel-padding-x: 24px,
+  // 24px - more generous padding
+  $edge-panel-padding-y: 24px,
+  // 24px
+  $edge-panel-bg: var(--atomix-body-bg),
+  $edge-panel-color: var(--atomix-body-color),
+  $edge-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
+  // enhanced shadow
+  $edge-panel-backdrop-bg: var(--atomix-invert-bg-subtle),
+  $edge-panel-backdrop-opacity: 0.6,
+  // more opaque backdrop
+  $edge-panel-backdrop-blur: 12px,
+  // 12px - more blur
+  $edge-panel-animation-duration: 250,
+  // faster animation
+  $edge-panel-border-color: var(--atomix-border-color)
+);

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

@@ -0,0 +1,8 @@
+// Google Fonts import for Inter
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+// Font display optimization
+$font-display: swap !default;
+
+// Font loading strategy
+$font-loading-strategy: 'swap' !default;

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

@@ -0,0 +1,14 @@
+@use '../../../styles/01-settings/settings.form-group' with (
+  $input-group-width: 100%,
+  $input-group-label-color: var(--atomix-secondary-text-emphasis),
+  $input-group-label-font-size: 14px,
+  // 14px
+  $input-group-label-font-size-sm: 12px,
+  // 12px
+  $input-group-label-margin-bottom: 8px,
+  // 8px
+  $input-group-helper-text-color: var(--atomix-tertiary-text-emphasis),
+  $input-group-helper-text-font-size: 12px,
+  // 12px
+  $input-group-helper-text-margin-top: 6px // 6px - tighter spacing
+);

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

@@ -0,0 +1,6 @@
+@use '../../../styles/01-settings/settings.form' with (
+  $form-width: 100%,
+  $form-items-spacer-y: 24px,
+  // 24px - better spacing between form items
+  $form-items-spacer-x: 16px // 16px
+);

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

@@ -0,0 +1,23 @@
+// Forward the grid settings and override only the variables that have !default
+@forward '../../../styles/01-settings/settings.grid' with (
+  // Container max widths - modern responsive breakpoints
+  $container-max-widths: (
+      xs: 360px,
+      // 360px
+      sm: 576px,
+      // 576px
+      md: 768px,
+      // 768px
+      lg: 1024px,
+      // 1024px
+      xl: 1280px,
+      // 1280px - wider for modern screens
+      xxl: 1440px,
+      // 1440px - even wider for large displays
+    )
+);
+
+// Override variables that don't have !default in the original
+$enable-grid-classes: true;
+$grid-columns: 12;
+$grid-gutter-width: 24px; // 24px - more generous gutters

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

@@ -0,0 +1,41 @@
+@use '../../../styles/01-settings/settings.hero' with (
+  $hero-padding-x: 0px,
+  $hero-padding-y: 64px,
+  // 64px - more dramatic spacing
+  $hero-spacer-y: 80px,
+
+  // 80px
+  $hero-bg: var(--atomix-body-bg),
+  $hero-overlay: var(--atomix-brand-bg-subtle),
+  $hero-overlay-opacity: 0.6,
+
+  // slightly more opaque
+  $hero-subtitle-font-size: 18px,
+  // 18px - larger subtitle
+  $hero-title-font-size: 56px,
+  // 56px - impactful title
+  $hero-text-font-size: 18px,
+
+  // 18px - better readability
+  $hero-subtitle-color: var(--atomix-secondary-text-emphasis),
+  $hero-title-color: var(--atomix-body-color),
+  $hero-text-color: var(--atomix-secondary-color-text-emphasis),
+  $hero-subtitle-font-weight: 500,
+  // medium weight
+  $hero-title-font-weight: 700,
+  // bold
+  $hero-text-font-weight: 400,
+
+  $hero-subtitle-margin-bottom: 16px,
+  // 16px
+  $hero-text-margin-top: 16px,
+  // 16px
+  $hero-actions-margin-top: 32px,
+  // 32px - more space for CTAs
+  $hero-actions-inner-gap: 16px,
+
+  // 16px
+  $hero-grid-gutter: 80px,
+  // 80px - more generous spacing
+  $hero-content-width: 640px // 640px - wider content area
+);

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

@@ -0,0 +1,51 @@
+@forward '../../../styles/01-settings/settings.input' with (
+  $input-width: 100%,
+  $input-color: var(--atomix-body-color),
+  $input-bg: var(--atomix-body-bg),
+  $input-bg-disabled: var(--atomix-secondary-bg-subtle),
+  $input-font-size: 16px,
+  // 16px - better mobile experience
+  $input-font-size-sm: 14px,
+  // 14px
+  $input-font-size-lg: 18px,
+  // 18px
+  $input-line-height-md: 24px,
+  // 24px
+  $input-line-height-sm: 20px,
+  // 20px
+  $input-line-height-lg: 28px,
+
+  // 28px
+  $input-padding-x: 16px,
+  // 16px - more spacious
+  $input-padding-y: 12px,
+  // 12px
+  $input-padding-x-sm: 12px,
+  // 12px
+  $input-padding-y-sm: 8px,
+  // 8px
+  $input-padding-x-lg: 20px,
+  // 20px
+  $input-padding-y-lg: 16px,
+
+  // 16px
+  $input-border-color: var(--atomix-primary-border-subtle),
+  $input-hover-border-color: var(--atomix-secondary-border-subtle),
+  $input-focus-border-color: var(--atomix-secondary-border-subtle),
+  $input-invalid-border-color: var(--atomix-error),
+  $input-success-border-color: var(--atomix-success),
+  $input-border-radius: 8px,
+
+  // 8px - softer corners
+  $input-placeholder-color: var(--atomix-tertiary-text-emphasis),
+  $input-disabled-color: var(--atomix-tertiary-text-emphasis),
+  $input-disabled-bg: var(--atomix-secondary-bg-subtle),
+  $input-textarea-height: 120px,
+  // 120px
+  $input-textarea-height-sm: 100px,
+  // 100px
+  $input-textarea-height-lg: 160px // 160px
+);
+
+// Override variables that don't have !default in the original
+$input-border-width: 1px;

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

@@ -0,0 +1,13 @@
+@use '../../../styles/01-settings/settings.link' with (
+  $link-color: var(--atomix-primary-6),
+  // primary blue
+  $link-color-dark: var(--atomix-primary-4),
+  // lighter for dark mode
+  $link-hover-color: var(--atomix-primary-7),
+  // darker on hover
+  $link-font-size: 1rem,
+  // 16px
+  $link-font-weight: 500,
+  // medium weight for better visibility
+  $link-icon-spacer: 4px // 4px
+);

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

@@ -0,0 +1,16 @@
+@use '../../../styles/01-settings/settings.list-group' with (
+  $list-group-width: 100%,
+  $list-group-bg: null,
+
+  $list-group-item-padding-y: 16px,
+  // 16px - more generous padding
+  $list-group-item-padding-x: 16px,
+  // 16px
+  $list-group-item-font-size: 16px,
+  // 16px
+  $list-group-item-color: var(--atomix-body-color),
+  $list-group-item-disabled-color: var(--atomix-disabled-text-emphasis),
+  $list-group-item-border-color: var(--atomix-primary-border-subtle),
+  $list-group-item-border-width: 1px,
+  $list-group-item-bg: var(--atomix-body-bg)
+);

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

@@ -0,0 +1,13 @@
+@use '../../../styles/01-settings/settings.list' with (
+  $list-color: var(--atomix-body-color),
+  $list-font-size: 16px,
+  // 16px
+  $list-font-weight: 400,
+  $list-item-gap: 8px,
+  // 8px - better spacing between items
+  $list-padding-left: 24px,
+  // 24px - more indentation
+  $list-item-dash-width: 16px,
+  // 16px - larger dash
+  $list-item-dash-height: 2px // 2px
+);

package/src/themes/mashroom/01-settings/_settings.masonry-grid.scss

@@ -0,0 +1,23 @@
+@use '../../../styles/01-settings/settings.masonry-grid' with (
+  $masonry-grid-gap: 24px,
+  // 24px - generous spacing
+  $masonry-grid-gap-sm: 12px,
+  // 12px
+  $masonry-grid-gap-lg: 32px,
+  // 32px
+  $masonry-grid-columns-xs: 1,
+  // 1 column on mobile
+  $masonry-grid-columns-sm: 2,
+  // 2 columns on small screens
+  $masonry-grid-columns-md: 3,
+  // 3 columns on medium screens
+  $masonry-grid-columns-lg: 4,
+  // 4 columns on large screens
+  $masonry-grid-columns-xl: 4,
+  // 4 columns on xl screens
+  $masonry-grid-columns-xxl: 5,
+  // 5 columns on xxl screens
+  $masonry-grid-item-transition: all 0.3s ease-in-out,
+  // smooth transitions
+  $masonry-grid-item-bg-dark: var(--atomix-gray-9) // dark mode background
+);

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

@@ -0,0 +1,50 @@
+@use '../../../styles/01-settings/settings.menu' with (
+  $menu-min-width: 200px,
+  // 200px - wider for better content
+  $menu-container-width: 1440px,
+  // 1440px - modern container width
+  $menu-padding-x: 12px,
+  // 12px
+  $menu-padding-y: 12px,
+
+  // 12px
+  $menu-bg: var(--atomix-body-bg),
+  $menu-border-radius: 8px,
+  // 8px - softer corners
+  $menu-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
+  // enhanced shadow
+  $menu-items-gap: 4px,
+
+  // 4px
+  $menu-item-padding-x: 12px,
+  // 12px
+  $menu-item-padding-y: 10px,
+  // 10px
+  $menu-item-inner-gap: 8px,
+  // 8px
+  $menu-item-color: var(--atomix-primary-text-emphasis),
+  $menu-item-font-size: 16px,
+  // 16px
+  $menu-item-font-weight: 500,
+  // medium weight
+  $menu-item-bg: var(--atomix-body-bg),
+  $menu-item-bg-hover: var(--atomix-secondary-bg-subtle),
+  $menu-item-bg-active: var(--atomix-brand-bg-subtle),
+  $menu-item-icon-size: 18px,
+
+  // 18px
+  $menu-subitem-color: var(--atomix-secondary-text-emphasis),
+  $menu-subitem-color-active: var(--atomix-brand-text-emphasis),
+  $menu-subitem-font-weight: 400,
+  $menu-subitem-font-weight-active: 500,
+
+  $menu-mega-padding-x: 48px,
+  // 48px
+  $menu-mega-padding-y: 32px,
+  // 32px
+  $menu-mega-grid-gap: 48px,
+  // 48px
+  $menu-mega-header-title-font-size: 18px,
+  // 18px
+  $menu-mega-header-title-font-weight: 600 // bolder headers
+);