@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/styles/01-settings/_settings.maps.scss

@@ -0,0 +1,278 @@
+@use 'sass:map';
+@use 'settings.colors' as *;
+@use 'settings.typography' as *;
+@use 'settings.config' as config;
+
+// Color maps
+
+$theme-colors-text: (
+  'primary': $primary-text,
+  'secondary': $secondary-text,
+  'tertiary': $tertiary-text,
+  'disabled': $disabled-text,
+  'invert': $invert-text,
+  'brand': $brand-text,
+  'error': $error-text,
+  'success': $success-text,
+  'warning': $warning-text,
+  'info': $info-text,
+  'light': $light-text,
+  'dark': $dark-text,
+) !default;
+
+$theme-colors-text-dark: (
+  'primary': $primary-text-dark,
+  'secondary': $secondary-text-dark,
+  'tertiary': $tertiary-text-dark,
+  'disabled': $disabled-text-dark,
+  'invert': $invert-text-dark,
+  'brand': $brand-text-dark,
+  'error': $error-text-dark,
+  'success': $success-text-dark,
+  'warning': $warning-text-dark,
+  'info': $info-text-dark,
+  'light': $light-text-dark,
+  'dark': $dark-text-dark,
+) !default;
+
+$theme-colors-bg-subtle: (
+  'primary': $primary-bg,
+  'secondary': $secondary-bg,
+  'tertiary': $tertiary-bg,
+  'invert': $invert-bg,
+  'brand': $brand-bg,
+  'error': $error-bg,
+  'success': $success-bg,
+  'warning': $warning-bg,
+  'info': $info-bg,
+  'light': $light-bg,
+  'dark': $dark-bg,
+) !default;
+
+$theme-colors-bg-subtle-dark: (
+  'primary': $primary-bg-dark,
+  'secondary': $secondary-bg-dark,
+  'tertiary': $tertiary-bg-dark,
+  'invert': $invert-bg-dark,
+  'brand': $brand-bg-dark,
+  'error': $error-bg-dark,
+  'success': $success-bg-dark,
+  'warning': $warning-bg-dark,
+  'info': $info-bg-dark,
+  'light': $light-bg-dark,
+  'dark': $dark-bg-dark,
+) !default;
+
+$theme-colors-border-subtle: (
+  'primary': $primary-border,
+  'secondary': $secondary-border,
+  'success': $success-border,
+  'error': $error-border,
+  'warning': $warning-border,
+  'info': $info-border,
+  'brand': $brand-border,
+  'light': $light-border,
+  'dark': $dark-border,
+) !default;
+
+$theme-colors-border-subtle-dark: (
+  'primary': $primary-border-dark,
+  'secondary': $secondary-border-dark,
+  'success': $success-border-dark,
+  'error': $error-border-dark,
+  'warning': $warning-border-dark,
+  'info': $info-border-dark,
+  'brand': $brand-border-dark,
+  'light': $light-border-dark,
+  'dark': $dark-border-dark,
+) !default;
+
+// Main theme colors map
+$theme-colors: (
+  'primary': $primary-6,
+  'secondary': $gray-6,
+  'success': $green-6,
+  'info': $blue-6,
+  'warning': $yellow-6,
+  'error': $red-6,
+  'light': $gray-1,
+  'dark': $gray-7,
+) !default;
+
+$theme-colors-dark: (
+  'primary': $primary-dark,
+  'secondary': $secondary-dark,
+  'light': $light-dark,
+  'dark': $dark-dark,
+  'error': $error-dark,
+  'success': $success-dark,
+  'warning': $warning-dark,
+  'info': $info-dark,
+) !default;
+
+$theme-colors-hover: (
+  'primary': $primary-hover,
+  'secondary': $secondary-hover,
+  'light': $light-hover,
+  'dark': $dark-hover,
+  'error': $error-hover,
+  'success': $success-hover,
+  'warning': $warning-hover,
+  'info': $info-hover,
+) !default;
+
+$theme-colors-hover-dark: (
+  'primary': $primary-hover-dark,
+  'secondary': $secondary-hover-dark,
+  'light': $light-hover-dark,
+  'dark': $dark-hover-dark,
+  'error': $error-hover-dark,
+  'success': $success-hover-dark,
+  'warning': $warning-hover-dark,
+  'info': $info-hover-dark,
+) !default;
+
+$grays: (
+  '1': $gray-1,
+  '2': $gray-2,
+  '3': $gray-3,
+  '4': $gray-4,
+  '5': $gray-5,
+  '6': $gray-6,
+  '7': $gray-7,
+  '8': $gray-8,
+  '9': $gray-9,
+  '10': $gray-10,
+) !default;
+
+// Typography Maps
+
+$theme-font-size: (
+  'base': $font-size-base,
+  'xs': $font-size-xs,
+  'sm': $font-size-sm,
+  'md': $font-size-md,
+  'lg': $font-size-lg,
+  'h1': $h1-font-size,
+  'h2': $h2-font-size,
+  'h3': $h3-font-size,
+  'h4': $h4-font-size,
+  'h5': $h5-font-size,
+  'h6': $h6-font-size,
+) !default;
+
+$theme-font-weight: (
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'semibold': $font-weight-semibold,
+  'bold': $font-weight-bold,
+  'heavy': $font-weight-heavy,
+  'black': $font-weight-black,
+) !default;
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// scss-docs-start utilities-colors
+
+// @TODO: Replace $theme-colors with css var
+
+$utilities-colors: $theme-colors !default;
+
+$utilities-text-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': $body-color,
+  )
+) !default;
+
+$utilities-text-emphasis-colors: (
+  'primary-emphasis': var(--#{config.$prefix}primary-text-emphasis),
+  'secondary-emphasis': var(--#{config.$prefix}secondary-text-emphasis),
+  'tertiary-emphasis': var(--#{config.$prefix}tertiary-text-emphasis),
+  'disabled-emphasis': var(--#{config.$prefix}disabled-text-emphasis),
+  'invert-emphasis': var(--#{config.$prefix}invert-text-emphasis),
+  'brand-emphasis': var(--#{config.$prefix}brand-text-emphasis),
+  'success-emphasis': var(--#{config.$prefix}success-text-emphasis),
+  'info-emphasis': var(--#{config.$prefix}info-text-emphasis),
+  'warning-emphasis': var(--#{config.$prefix}warning-text-emphasis),
+  'error-emphasis': var(--#{config.$prefix}error-text-emphasis),
+  'light-emphasis': var(--#{config.$prefix}light-text-emphasis),
+  'dark-emphasis': var(--#{config.$prefix}dark-text-emphasis),
+) !default;
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+    'body': var(--#{config.$prefix}body-bg),
+  )
+) !default;
+
+$utilities-bg-subtle: (
+  'primary-subtle': var(--#{config.$prefix}primary-bg-subtle),
+  'secondary-subtle': var(--#{config.$prefix}secondary-bg-subtle),
+  'tertiary-subtle': var(--#{config.$prefix}tertiary-bg-subtle),
+  'invert-subtle': var(--#{config.$prefix}invert-bg-subtle),
+  'brand-subtle': var(--#{config.$prefix}brand-bg-subtle),
+  'success-subtle': var(--#{config.$prefix}success-bg-subtle),
+  'info-subtle': var(--#{config.$prefix}info-bg-subtle),
+  'warning-subtle': var(--#{config.$prefix}warning-bg-subtle),
+  'error-subtle': var(--#{config.$prefix}error-bg-subtle),
+  'light-subtle': var(--#{config.$prefix}light-bg-subtle),
+  'dark-subtle': var(--#{config.$prefix}dark-bg-subtle),
+) !default;
+
+// scss-docs-start utilities-border-colors
+$utilities-border-colors: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
+
+$utilities-border-subtle: (
+  'primary-subtle': var(--#{config.$prefix}primary-border-subtle),
+  'secondary-subtle': var(--#{config.$prefix}secondary-border-subtle),
+  'success-subtle': var(--#{config.$prefix}success-border-subtle),
+  'info-subtle': var(--#{config.$prefix}info-border-subtle),
+  'warning-subtle': var(--#{config.$prefix}warning-border-subtle),
+  'error-subtle': var(--#{config.$prefix}error-border-subtle),
+  'brand-subtle': var(--#{config.$prefix}brand-border-subtle),
+  'light-subtle': var(--#{config.$prefix}light-border-subtle),
+  'dark-subtle': var(--#{config.$prefix}dark-border-subtle),
+) !default;
+
+// scss-docs-start utilities-links-underline
+$utilities-links-underline: map.merge(
+  $utilities-colors,
+  (
+    'black': $black,
+    'white': $white,
+  )
+) !default;
+
+$shadows: (
+  'shadow': var(--#{config.$prefix}box-shadow),
+  'shadow-xs': var(--#{config.$prefix}box-shadow-xs),
+  'shadow-sm': var(--#{config.$prefix}box-shadow-sm),
+  'shadow-lg': var(--#{config.$prefix}box-shadow-lg),
+  'shadow-xl': var(--#{config.$prefix}box-shadow-xl),
+  'shadow-inset': var(--#{config.$prefix}box-shadow-inset),
+) !default;
+
+$shadows-dark: (
+  'shadow': var(--#{config.$prefix}box-shadow-dark),
+  'shadow-xs': var(--#{config.$prefix}box-shadow-xs-dark),
+  'shadow-sm': var(--#{config.$prefix}box-shadow-sm-dark),
+  'shadow-lg': var(--#{config.$prefix}box-shadow-lg-dark),
+  'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
+  'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
+) !default;

package/src/styles/01-settings/_settings.masonry-grid.scss

@@ -0,0 +1,17 @@
+@use 'settings.config' as config;
+@use 'settings.breakpoints' as breakpoints;
+
+// Define all masonry grid variables with !default flag for overriding
+$masonry-grid-gap: 16px !default;
+$masonry-grid-gap-sm: 8px !default;
+$masonry-grid-gap-lg: 24px !default;
+$masonry-grid-columns-xs: 1 !default;
+$masonry-grid-columns-sm: 2 !default;
+$masonry-grid-columns-md: 3 !default;
+$masonry-grid-columns-lg: 4 !default;
+$masonry-grid-columns-xl: 4 !default;
+$masonry-grid-columns-xxl: 5 !default;
+$masonry-grid-item-transition: all 0.3s ease-in-out !default;
+
+// Define dark mode variables if needed
+$masonry-grid-item-bg-dark: var(--#{config.$prefix}gray-9) !default;

package/src/styles/01-settings/_settings.menu.scss

@@ -0,0 +1,35 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.border-radius' as *;
+
+$menu-min-width: 160px !default;
+$menu-container-width: 1600px !default;
+$menu-padding-x: 8px !default;
+$menu-padding-y: $menu-padding-x !default;
+
+$menu-bg: var(--#{$prefix}body-bg) !default;
+$menu-border-radius: $border-radius-xxl !default;
+$menu-box-shadow: var(--#{$prefix}box-shadow) !default;
+$menu-items-gap: 4px !default;
+
+$menu-item-padding-x: 8px !default;
+$menu-item-padding-y: $menu-item-padding-x !default;
+$menu-item-inner-gap: 8px !default;
+$menu-item-color: var(--#{$prefix}primary-text-emphasis) !default;
+$menu-item-font-size: $font-size-base !default;
+$menu-item-font-weight: $font-weight-bold !default;
+$menu-item-bg: var(--#{$prefix}body-bg) !default;
+$menu-item-bg-hover: var(--#{$prefix}secondary-bg-subtle) !default;
+$menu-item-bg-active: var(--#{$prefix}brand-bg-subtle) !default;
+$menu-item-icon-size: 20px !default;
+
+$menu-subitem-color: var(--#{$prefix}secondary-text-emphasis) !default;
+$menu-subitem-color-active: var(--#{$prefix}brand-text-emphasis) !default;
+$menu-subitem-font-weight: $font-weight-normal !default;
+$menu-subitem-font-weight-active: $font-weight-medium !default;
+
+$menu-mega-padding-x: 64px !default;
+$menu-mega-padding-y: 28px !default;
+$menu-mega-grid-gap: 40px !default;
+$menu-mega-header-title-font-size: $font-size-lg !default;
+$menu-mega-header-title-font-weight: $font-weight-medium !default;

package/src/styles/01-settings/_settings.messages.scss

@@ -0,0 +1,71 @@
+@use './settings.border-radius' as *;
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.colors' as *;
+
+$messages-width: 100%;
+
+$messages-padding-x: 32px !default;
+$messages-padding-y: $messages-padding-x !default;
+$messages-border-radius: $border-radius-xl !default;
+$messages-border-width: 0px !default;
+$messages-border-color: null !default;
+$messages-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+
+$messages-content-margin-top: 32px !default;
+
+$messages-avatar-margin: 12px !default;
+
+$messages-items-padding-x: 0px !default;
+$messages-items-padding-y: 0px !default;
+$messages-items-width: 479px !default;
+$messages-items-border-width: 0px !default;
+$messages-items-border-color: transparent !default;
+$messages-items-border-radius: null !default;
+$messages-items-gap: 4px !default;
+
+$messages-text-padding-x: 12px !default;
+$messages-text-padding-y: 12px !default;
+$messages-text-font-size: $font-size-sm !default;
+$messages-text-primary-color: var(--#{$prefix}body-color) !default;
+$messages-text-secondary-color: var(--#{$prefix}body-color) !default;
+$messages-text-primary-bg: var(--#{$prefix}brand-bg-subtle) !default;
+$messages-text-secondary-bg: var(--#{$prefix}tertiary-bg-subtle) !default;
+$messages-text-border-radius: $border-radius-xxl !default;
+
+$messages-file-padding-x: $messages-text-padding-x !default;
+$messages-file-padding-y: $messages-text-padding-y !default;
+$messages-file-text-font-size: $messages-text-font-size !default;
+$messages-file-text-primary-color: $messages-text-primary-color !default;
+$messages-file-text-secondary-color: $messages-text-secondary-color !default;
+$messages-file-icon-size: 40px !default;
+$messages-file-icon-bg: $primary-2 !default;
+$messages-file-icon-bg-dark: $primary-7 !default;
+$messages-file-icon-margin-right: 8px !default;
+$messages-file-info-font-size: $font-size-xs !default;
+$messages-file-info-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$messages-file-primary-bg: $messages-text-primary-bg !default;
+$messages-file-secondary-bg: $messages-text-secondary-bg !default;
+$messages-file-border-radius: $border-radius-xxl !default;
+
+$messages-image-width: 400px !default;
+$messages-image-height: 260px !default;
+$messages-image-border-radius: $border-radius-xxl !default;
+
+$messages-form-margin-top: 32px !default;
+$messages-form-row-gap: 8px !default;
+$messages-form-submit-icon-size: 24px !default;
+
+$messages-input-padding-x: 12px !default;
+$messages-input-padding-y: 12px !default;
+$messages-input-font-size: $font-size-base !default;
+$messages-input-color: var(--#{$prefix}body-color) !default;
+$messages-input-placeholder-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$messages-input-border-width: 1px !default;
+$messages-input-border-color: var(--#{$prefix}secondary-border-subtle) !default;
+$messages-input-border-radius: $border-radius-xl !default;
+
+$messages-input-options-icons-size: 24px !default;
+$messages-input-options-row-gap: 8px !default;
+
+$messages-body-height: calc(100vh - 600px) !default;

package/src/styles/01-settings/_settings.modal.scss

@@ -0,0 +1,31 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.border-radius' as *;
+@use './settings.colors' as *;
+
+$modal-inner-padding: 16px !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: var(--#{$prefix}body-bg) !default;
+$modal-content-border-radius: $border-radius-xl !default;
+$modal-content-box-shadow: var(--#{$prefix}box-shadow) !default;
+
+$modal-header-padding-bottom: 12px !default;
+$modal-title-font-size: $font-size-lg !default;
+$modal-sub-margin-top: 4px !default;
+$modal-sub-font-size: $font-size-sm;
+$modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+
+$modal-footer-items-gap: 8px !default;
+
+$modal-backdrop-bg: var(--#{$prefix}invert-bg-subtle) !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-backdrop-blur: 10px !default;
+
+$modal-close-icon-color: $black !default;
+$modal-close-icon-size: 30px !default;
+
+$modal-sm: 400px !default;
+$modal-md: 800px !default;
+$modal-lg: 1000px !default;
+$modal-xl: 1140px !default;

package/src/styles/01-settings/_settings.nav.scss

@@ -0,0 +1,18 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.border-radius' as *;
+@use './settings.colors' as *;
+
+$nav-item-gap-x: 8px !default;
+
+$nav-link-padding-x: 12px !default;
+$nav-link-padding-y: 8px !default;
+$nav-link-font-size: $font-size-base !default;
+$nav-link-font-weight: $font-weight-medium !default;
+$nav-link-color: var(--#{$prefix}body-color) !default;
+$nav-link-hover-color: $nav-link-color !default;
+$nav-link-bg: var(--#{$prefix}body-bg) !default;
+$nav-link-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+$nav-link-inner-gap: 8px !default;
+
+$nav-icon-size: 20px !default;

package/src/styles/01-settings/_settings.navbar.scss

@@ -0,0 +1,46 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.colors' as *;
+
+// Navbar container and layout
+$navbar-padding-x: 64px !default;
+$navbar-padding-y: 8px !default;
+$navbar-container-max-width: 1600px !default;
+
+// Navbar appearance
+$navbar-bg: var(--#{$prefix}body-bg) !default;
+$navbar-border-width: 1px !default;
+$navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
+$navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
+
+// Brand/logo
+$navbar-brand-margin-end: 30px !default;
+$navbar-brand-font-size: $font-size-lg !default;
+$navbar-brand-font-weight: $font-weight-bold !default;
+$navbar-brand-color: var(--#{$prefix}body-color) !default;
+
+// Mobile toggler
+$navbar-toggler-size: 30px !default;
+$navbar-toggler-color: var(--#{$prefix}body-color) !default;
+$navbar-toggler-bg: transparent !default;
+$navbar-toggler-border: 0 !default;
+$navbar-toggler-border-radius: 4px !default;
+$navbar-toggler-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !default;
+
+// Collapse/mobile menu
+$navbar-collapse-padding-top: 0.5rem !default;
+$navbar-collapse-transition: all 0.3s ease-in-out !default;
+
+// Backdrop (for mobile overlay)
+$navbar-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
+$navbar-backdrop-z-index: 1029 !default;
+
+// Z-index values
+$navbar-z-index: 1030 !default;
+$navbar-fixed-z-index: 1030 !default;
+
+// Dark mode variants
+$navbar-bg-dark: var(--#{$prefix}gray-9) !default;
+$navbar-border-color-dark: var(--#{$prefix}gray-7) !default;
+$navbar-brand-color-dark: var(--#{$prefix}gray-1) !default;
+$navbar-toggler-color-dark: var(--#{$prefix}gray-1) !default;

package/src/styles/01-settings/_settings.pagination.scss

@@ -0,0 +1,29 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.colors' as *;
+@use './settings.border-radius' as *;
+
+$pagination-size: 32px !default;
+$pagination-size-sm: 24px !default;
+$pagination-size-lg: 40px !default;
+
+$pagination-padding-x: 8px !default;
+$pagination-padding-y: 8px !default;
+
+$pagination-font-size: $font-size-sm !default;
+
+$pagination-color: var(--#{$prefix}secondary-text-emphasis) !default;
+$pagination-bg: var(--#{$prefix}body-bg) !default;
+$pagination-border-radius: $border-radius-pill !default;
+
+$pagination-focus-border-width: 2px !default;
+$pagination-focus-border-color: var(--#{$prefix}brand-border-subtle) !default;
+
+$pagination-hover-color: var(--#{$prefix}body-color) !default;
+$pagination-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+
+$pagination-active-color: var(--#{$prefix}body-color) !default;
+$pagination-active-bg: var(--#{$prefix}brand-bg-subtle) !default;
+
+$pagination-disabled-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$pagination-disabled-bg: var(--#{$prefix}body-bg) !default;

package/src/styles/01-settings/_settings.photoviewer.scss

@@ -0,0 +1,35 @@
+// src/styles/01-settings/_settings.photoviewer.scss
+
+@use 'settings.config' as config;
+
+// Spacing variables
+$component-spacing: 1.25rem !default;
+$component-border-color: var(--#{config.$prefix}gray-3) !default;
+$component-background-color: transparent !default;
+
+// Modal specific variables
+$modal-background-color: var(--#{config.$prefix}gradient) !default;
+$modal-close-button-color: #fff !default;
+
+// Panel variables
+$info-panel-width: 320px !default;
+$info-panel-background: var(--#{config.$prefix}gray-1) !default;
+
+// Thumbnail variables
+$thumbnail-active-border-color: var(--#{config.$prefix}brand-border-subtle) !default;
+$thumbnail-size: 56px !default;
+$thumbnail-size-large: 72px !default;
+$thumbnail-gap: 0.5rem !default;
+
+// Animation variables
+$photoviewer-transition-duration: 0.3s !default;
+$photoviewer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Control variables
+$control-size: 2.75rem !default;
+$control-size-small: 2.25rem !default;
+$control-border-radius: 50% !default;
+$control-background: rgba(255, 255, 255, 0.7) !default;
+$control-background-hover: var(--#{config.$prefix}primary-2) !default;
+$control-color: var(--#{config.$prefix}brand-text-emphasis) !default;
+$control-color-hover: var(--#{config.$prefix}link-hover-color) !default;

package/src/styles/01-settings/_settings.popover.scss

@@ -0,0 +1,13 @@
+@use 'settings.config' as config;
+@use 'settings.border-radius' as border-radius;
+
+$popover-max-width: 300px !default;
+$popover-padding-x: 16px !default;
+$popover-padding-y: $popover-padding-x !default;
+$popover-inner-gap-x: 12px !default;
+$popover-inner-gap-y: 16px !default;
+$popover-bg: var(--#{config.$prefix}body-bg) !default;
+$popover-border-radius: border-radius.$border-radius-xl !default;
+$popover-box-shadow: var(--#{config.$prefix}box-shadow) !default;
+$popover-arrow-size: 12px !default;
+$popover-arrow-offset: 6px !default;

package/src/styles/01-settings/_settings.position.scss

@@ -0,0 +1,7 @@
+$position-values: (
+  0: 0,
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%,
+) !default;

package/src/styles/01-settings/_settings.progress.scss

@@ -0,0 +1,15 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.animations' as animations;
+
+$progress-width: 100% !default;
+$progress-height: 6px !default;
+$progress-font-size: typography.$font-size-xs !default;
+$progress-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$progress-border-radius: border-radius.$border-radius-pill !default;
+$progress-bar-height: $progress-height !default;
+$progress-bar-color: var(--#{config.$prefix}primary-text-emphasis) !default;
+$progress-bar-bg: var(--#{config.$prefix}primary) !default;
+$progress-bar-transition: animations.$transition-duration !default;
+$progress-bar-easing: animations.$easing !default;

package/src/styles/01-settings/_settings.rating.scss

@@ -0,0 +1,8 @@
+@use 'settings.config' as config;
+
+$rating-star-size: 32px !default;
+$rating-star-size-sm: 16px !default;
+$rating-star-size-lg: 48px !default;
+$rating-star-bg: var(--#{config.$prefix}primary) !default;
+$rating-star-half-bg: $rating-star-bg !default;
+$rating-stars-gap: 2px !default;

package/src/styles/01-settings/_settings.river.scss

@@ -0,0 +1,34 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.colors' as colors;
+
+$river-width: 100% !default;
+$river-padding-x: 0px !default;
+$river-padding-y: 40px !default;
+$river-border-radius: 0px;
+$river-bg: var(--#{config.$prefix}body-bg) !default;
+$river-overlay: colors.$dark !default;
+$river-overlay-opacity: 0.6 !default;
+
+$river-title-font-size: typography.$h1-font-size !default;
+$river-text-font-size: typography.$font-size-base !default;
+
+$river-title-font-weight: typography.$font-weight-medium !default;
+$river-text-font-weight: typography.$font-weight-normal !default;
+
+$river-title-color: var(--#{config.$prefix}body-color) !default;
+$river-text-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+
+$river-text-margin-top: 12px !default;
+$river-actions-margin-top: 12px !default;
+$river-actions-spacing-x: 12px !default;
+
+$river-image-border-radius: 0px !default;
+$river-image-box-shadow: null !default;
+
+$river-spacing-inner: 64px !default;
+
+$river-content-max-width: 536px !default;
+
+$river-breakout-title-width: $river-content-max-width !default;
+$river-breakout-text-width: 427px !default;

package/src/styles/01-settings/_settings.sectionintro.scss

@@ -0,0 +1,21 @@
+@use 'settings.typography' as typography;
+@use 'settings.config' as config;
+
+$sectionintro-padding-x: 0px !default;
+$sectionintro-padding-y: 40px !default;
+
+$sectionintro-title-font-size: typography.$h1-font-size !default;
+$sectionintro-text-font-size: typography.$font-size-base !default;
+
+$sectionintro-title-color: var(--#{config.$prefix}body-color) !default;
+$sectionintro-text-color: var(--#{config.$prefix}body-color) !default;
+
+$sectionintro-title-font-weight: typography.$font-weight-bold !default;
+$sectionintro-text-font-weight: typography.$font-weight-normal !default;
+
+$sectionintro-label-margin-bottom: 12px !default;
+$sectionintro-text-margin-top: 12px !default;
+$sectionintro-actions-margin-top: 23px !default;
+$sectionintro-actions-inner-gap: 12px !default;
+
+$sectionintro-width: 648px !default;