@shohojdhara/atomix 0.3.3 → 0.3.5

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

@@ -1,180 +0,0 @@
-@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

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

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

@@ -1,20 +0,0 @@
-@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

@@ -1,56 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-@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

@@ -1,3 +0,0 @@
-// 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

@@ -1,45 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-@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

@@ -1,6 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-@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

@@ -1,51 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-@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

@@ -1,50 +0,0 @@
-@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
-);