@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,32 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as border-radius;
+
+$select-width: 300px !default;
+$select-padding-x: 12px !default;
+$select-padding-y: $select-padding-x !default;
+$select-color: var(--#{config.$prefix}body-color) !default;
+$select-font-size: typography.$font-size-sm !default;
+$select-font-size-lg: typography.$font-size-base !default;
+$select-icon-toggle-size: 20px !default;
+$select-icon-toggle-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$select-placeholder-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$select-bg: var(--#{config.$prefix}body-bg) !default;
+$select-expanded-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$select-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$select-border-color-hover: var(--#{config.$prefix}secondary-border-subtle) !default;
+$select-border-radius: border-radius.$border-radius-xl !default;
+$select-inner-spacer: 8px !default;
+$select-dropdown-icon-size: 24px !default;
+$select-panel-padding-x: 8px !default;
+$select-panel-padding-y: $select-panel-padding-x !default;
+$select-panel-spacer-y: $select-panel-padding-y !default;
+$select-panel-bg: var(--#{config.$prefix}body-bg) !default;
+$select-panel-box-shadow: var(--#{config.$prefix}box-shadow) !default;
+$select-panel-border-radius: $select-border-radius !default;
+$select-item-padding-x: $select-panel-padding-x !default;
+$select-item-padding-y: $select-panel-padding-y !default;
+$select-item-color: var(--#{config.$prefix}body-color) !default;
+$select-item-bg: var(--#{config.$prefix}body-bg) !default;
+$select-item-border-radius: border-radius.$border-radius !default;
+$select-item-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;

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

@@ -0,0 +1,64 @@
+@use 'settings.config' as config;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.typography' as typography;
+@use 'settings.colors' as *;
+
+// Side menu container
+$side-menu-padding-x: 20px !default;
+$side-menu-padding-y: 24px !default;
+$side-menu-bg: var(--#{config.$prefix}body-bg) !default;
+$side-menu-border-radius: border-radius.$border-radius-xl !default;
+$side-menu-border-width: 1px !default;
+$side-menu-border-color: var(--#{config.$prefix}border-color) !default;
+$side-menu-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
+
+// Side menu title
+$side-menu-title-font-size: typography.$font-size-base !default;
+$side-menu-title-font-weight: typography.$font-weight-medium !default;
+$side-menu-title-color: var(--#{config.$prefix}body-color) !default;
+$side-menu-title-spacer-y: 8px !default;
+
+// Side menu toggler
+$side-menu-toggler-padding-x: 12px !default;
+$side-menu-toggler-padding-y: 8px !default;
+$side-menu-toggler-bg: transparent !default;
+$side-menu-toggler-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$side-menu-toggler-border-radius: border-radius.$border-radius-md !default;
+$side-menu-toggler-transition: all 0.2s ease-in-out !default;
+
+// Side menu items
+$side-menu-item-padding-x: 12px !default;
+$side-menu-item-padding-y: 8px !default;
+$side-menu-item-font-size: typography.$font-size-sm !default;
+$side-menu-item-font-weight: typography.$font-weight-normal !default;
+$side-menu-item-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$side-menu-item-hover-color: var(--#{config.$prefix}body-color) !default;
+$side-menu-item-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
+$side-menu-item-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
+$side-menu-item-bg: transparent !default;
+$side-menu-item-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$side-menu-item-active-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
+$side-menu-item-disabled-bg: transparent !default;
+$side-menu-item-border-radius: border-radius.$border-radius-md !default;
+$side-menu-item-transition: all 0.2s ease-in-out !default;
+$side-menu-item-gap: 8px !default;
+
+// Side menu list
+$side-menu-list-margin-bottom: 12px !default;
+$side-menu-list-gap: 2px !default;
+
+// Side menu wrapper (for mobile animation)
+$side-menu-wrapper-transition: height 0.3s ease-in-out !default;
+$side-menu-inner-padding-top: 20px !default;
+
+// Mobile responsive
+$side-menu-mobile-padding-x: 16px !default;
+$side-menu-mobile-padding-y: 12px !default;
+
+// Dark mode variants
+$side-menu-bg-dark: var(--#{config.$prefix}gray-9) !default;
+$side-menu-border-color-dark: var(--#{config.$prefix}gray-7) !default;
+$side-menu-title-color-dark: var(--#{config.$prefix}gray-1) !default;
+$side-menu-item-color-dark: var(--#{config.$prefix}gray-3) !default;
+$side-menu-item-hover-color-dark: var(--#{config.$prefix}gray-1) !default;
+$side-menu-item-active-color-dark: var(--#{config.$prefix}brand-text-emphasis) !default;

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

@@ -0,0 +1,14 @@
+$skeleton-sizes: (
+  sm: 14px,
+  md: 16px,
+  lg: 24px,
+  xl: 32px,
+  xxl: 36px,
+  3xl: 40px,
+  4xl: 44px,
+) !default;
+
+$skeleton-color: rgba(0, 0, 0, 0.06) !default;
+$skeleton-color-gradient-end: rgba(0, 0, 0, 0.15) !default;
+$skeleton-gradient-from-color: rgba(0, 0, 0, 0.06) !default;
+$skeleton-gradient-to-color: rgba(0, 0, 0, 0.15) !default;

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

@@ -0,0 +1,68 @@
+$spacer: 1rem !default;
+
+$spacing-sizes: (
+  0: 0rem,
+  //00px
+  1: 0.25rem,
+  //04px
+  2: 0.5rem,
+  //08px
+  3: 0.75rem,
+  //12px
+  4: 1rem,
+  //16px
+  5: 1.25rem,
+  //20px
+  6: 1.5rem,
+  //24px
+  7: 1.75rem,
+  //28px
+  8: 2rem,
+  //32px
+  9: 2.25rem,
+  //36px
+  10: 2.5rem,
+  //40px
+  11: 2.75rem,
+  //44px
+  12: 3rem,
+  //48px
+  14: 3.5rem,
+  //56px
+  16: 4rem,
+  //64px
+  20: 5rem,
+  //80px
+  24: 6rem,
+  //96px
+  28: 7rem,
+  //112px
+  32: 8rem,
+  //128px
+  36: 9rem,
+  //144px
+  40: 10rem,
+  //160px
+  44: 11rem,
+  //176px
+  48: 12rem,
+  //192px
+  52: 13rem,
+  //208px
+  56: 14rem,
+  //224px
+  60: 15rem,
+  //240px
+  64: 16rem,
+  //256px
+  72: 18rem,
+  //288px
+  80: 20rem,
+  //320px
+  90: 22.5rem, //360px
+) !default;
+
+$spacing-important: true !default;
+$enable-negative-margins: false;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

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

@@ -0,0 +1,13 @@
+@use 'settings.config' as config;
+
+$spinner-sizes: (
+  sm: 16px,
+  md: 24px,
+  lg: 32px,
+) !default;
+
+$spinner-background-color: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$spinner-color: var(--#{config.$prefix}body-color) !default;
+$spinner-border-width: 3px !default;
+$spinner-border-width-sm: 2px !default;
+$spinner-animation-speed: 0.75s !default;

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

@@ -0,0 +1,26 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as border-radius;
+
+$steps-padding-x: 0px !default;
+$steps-padding-y: 0px !default;
+
+$steps-item-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$steps-item-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$steps-item-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
+$steps-item-active-bg: var(--#{config.$prefix}primary) !default;
+$steps-item-number-bg: $steps-item-bg !default;
+$steps-item-number-color: $steps-item-color !default;
+$steps-item-number-active-color: var(--#{config.$prefix}gray-1) !default;
+$steps-item-number-size: 28px !default;
+$steps-item-number-font-size: typography.$font-size-sm !default;
+$steps-item-number-border-radius: border-radius.$border-radius-pill;
+$steps-item-font-size: typography.$font-size-sm !default;
+$steps-item-content-gap: 8px !default;
+
+$steps-line-height: 1px !default;
+$steps-line-width: 40px !default;
+$steps-gap: 12px !default;
+
+$steps-line-height-vertical: 40px !default;
+$steps-line-width-vertical: 1px !default;

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

@@ -0,0 +1,28 @@
+@use 'sass:math';
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.grid' as grid;
+
+$tabs-width: 100% !default;
+$tabs-nav-btn-padding-x: 8px !default;
+$tabs-nav-btn-padding-y: 12px !default;
+$tabs-nav-btn-font-size: typography.$font-size-base !default;
+$tabs-nav-btn-font-weight: typography.$font-weight-medium !default;
+$tabs-nav-btn-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$tabs-nav-btn-active-color: var(--#{config.$prefix}body-color) !default;
+$tabs-nav-btn-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
+$tabs-nav-btn-bg: var(--#{config.$prefix}body-bg);
+$tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle);
+$tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg);
+$tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg);
+$tabs-nav-btn-border-radius: 0px !default;
+$tabs-nav-btn-border-width: 2px !default;
+$tabs-nav-btn-border-color: transparent !default;
+$tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
+$tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$tabs-nav-btns-gap: 0px !default;
+$tabs-nav-btn-inner-gap: 8px !default;
+$tab-nav-btn-icon-size: 20px !default;
+
+$tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;
+$tabs-panel-padding-y: $tabs-panel-padding-x !default;

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

@@ -0,0 +1,18 @@
+@use 'settings.typography' as typography;
+@use 'settings.config' as config;
+
+$testimonial-width: 100% !default;
+$testimonial-padding-x: 0px !default;
+$testimonial-padding-y: 0px !default;
+$testimonial-inner-spacer: 20px !default;
+$testimonial-bg: null !default;
+$testimonial-quote-font-size: typography.$h3-font-size !default;
+$testimonial-quote-font-size-sm: typography.$font-size-md !default;
+$testimonial-quote-font-size-lg: typography.$h2-font-size !default;
+$testimonial-quote-font-weight: typography.$font-weight-medium !default;
+$testimonial-quote-color: var(--#{config.$prefix}body-color) !default;
+$testimonial-author-font-size: typography.$font-size-base !default;
+$testimonial-author-color: var(--#{config.$prefix}body-color) !default;
+$testimonial-author-role-font-size: typography.$font-size-xs !default;
+$testimonial-author-role-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$testimonial-author-inner-spacer: 12px !default;

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

@@ -0,0 +1,50 @@
+@use 'settings.colors' as colors;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.typography' as typography;
+
+// Todo component variables
+
+// Base styles
+$todo-bg: colors.$white !default;
+$todo-color: colors.$gray-9 !default;
+$todo-border-color: colors.$gray-3 !default;
+$todo-border-radius: border-radius.$border-radius !default;
+$todo-padding: 1.25rem !default;
+$todo-margin-bottom: 1.5rem !default;
+
+// Title
+$todo-title-font-size: 1.25rem !default;
+$todo-title-font-weight: typography.$font-weight-bold !default;
+$todo-title-margin-bottom: 1rem !default;
+
+// Form
+$todo-form-margin-bottom: 1rem !default;
+$todo-form-gap: 0.5rem !default;
+
+// Item
+$todo-item-padding: 0.75rem !default;
+$todo-item-border-color: colors.$gray-3 !default;
+$todo-item-hover-bg: colors.$gray-2 !default;
+
+// Completed item
+$todo-completed-color: colors.$gray-6 !default;
+$todo-completed-text-decoration: line-through !default;
+
+// Empty state
+$todo-empty-color: colors.$gray-6 !default;
+
+// Small size
+$todo-padding-sm: 0.75rem !default;
+$todo-font-size-sm: 0.875rem !default;
+$todo-title-font-size-sm: 1.1rem !default;
+$todo-title-margin-bottom-sm: 0.75rem !default;
+$todo-item-padding-sm: 0.5rem !default;
+
+// Large size
+$todo-padding-lg: 1.5rem !default;
+$todo-title-font-size-lg: 1.5rem !default;
+$todo-title-margin-bottom-lg: 1.25rem !default;
+$todo-item-padding-lg: 1rem !default;
+
+// Disabled state
+$todo-disabled-opacity: 0.6 !default;

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

@@ -0,0 +1,34 @@
+@use 'settings.config' as config;
+@use 'settings.border-radius' as borderRadius;
+@use 'settings.typography' as typography;
+
+$toggle-gap: 12px !default;
+
+$toggle-switch-on-bg: var(--#{config.$prefix}primary) !default;
+$toggle-switch-off-bg: var(--#{config.$prefix}tertiary-bg-subtle) !default;
+$toggle-switch-disabled-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$toggle-switch-border-radius: borderRadius.$border-radius-lg !default;
+$toggle-switch-box-shadow: null !default;
+
+$toggle-switch-width-sm: 48px !default;
+$toggle-switch-height-sm: 24px !default;
+$toggle-switch-width-md: 36px !default;
+$toggle-switch-height-md: 20px !default;
+
+$toggle-switch-width: $toggle-switch-width-md !default;
+$toggle-switch-height: $toggle-switch-height-md !default;
+
+$toggle-switch-handle-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
+$toggle-switch-handle-border-radius: borderRadius.$border-radius-pill !default;
+$toggle-switch-handle-margin: 3px !default;
+
+$toggle-switch-handle-width-sm: 20px !default;
+$toggle-switch-handle-width-md: 14px !default;
+$toggle-switch-handle-height-sm: 20px !default;
+$toggle-switch-handle-height-md: 14px !default;
+
+$toggle-switch-handle-width: $toggle-switch-handle-width-md !default;
+$toggle-switch-handle-height: $toggle-switch-handle-height-md !default;
+
+$toggle-label-font-size: typography.$font-size-base !default;
+$toggle-label-color: var(--#{config.$prefix}primary-text-emphasis);

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

@@ -0,0 +1,19 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as borderRadius;
+
+$tooltip-max-width: 240px !default;
+$tooltip-padding-x: 12px !default;
+$tooltip-padding-y: 8px !default;
+$tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
+
+$tooltip-font-size: typography.$font-size-xs !default;
+$tooltip-font-weight: typography.$font-weight-normal !default;
+$tooltip-color: var(--#{config.$prefix}invert-text-emphasis) !default;
+
+$tooltip-border-radius: borderRadius.$border-radius !default;
+$tooltip-border-width: null !default;
+$tooltip-border-color: null !default;
+$tooltip-box-shadow: null !default;
+
+$tooltip-arrow-size: 12px !default;

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

@@ -0,0 +1,93 @@
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// Font stacks with appropriate fallbacks
+$Roboto: 'Roboto', sans-serif;
+
+$helvetica-neue:
+  'Helvetica Neue',
+  'Helvetica',
+  'Arial',
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  sans-serif !default;
+$system-font-stack:
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  Oxygen-Sans,
+  Ubuntu,
+  Cantarell,
+  'Helvetica Neue',
+  Arial,
+  sans-serif !default;
+
+$font-family-base: $Roboto !default;
+$font-family-sans-serif: $Roboto !default;
+$font-family-monospace:
+  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+$headings-font-family: $Roboto !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-heavy: 800 !default;
+$font-weight-black: 900 !default;
+$font-weight-base: $font-weight-normal !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem; //16px
+$font-size-xs: $font-size-base * 0.75 !default; //12px
+$font-size-sm: $font-size-base * 0.875 !default; //14px
+$font-size-md: $font-size-base * 1.125 !default; //18px
+$font-size-lg: $font-size-base * 1.25 !default; //20px
+
+$h1-font-size: $font-size-base * 2.5 !default; //40px
+$h2-font-size: $font-size-base * 2 !default; //32px
+$h3-font-size: $font-size-base * 1.5 !default; //24px
+$h4-font-size: $font-size-base * 1.25 !default; //20px
+$h5-font-size: $font-size-base * 1.125 !default; //18px
+$h6-font-size: $font-size-base !default; //16px
+
+// Font sizes map for utilities
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+  'xs': $font-size-xs,
+  'sm': $font-size-sm,
+  'md': $font-size-md,
+  'lg': $font-size-lg,
+  'base': $font-size-base,
+) !default;
+
+$display-1: $font-size-base * 4 !default; //64px
+
+$line-height-base: 1.2 !default;
+$line-height-sm: 1.43 !default;
+$line-height-lg: 1.56 !default;
+
+$headings-margin-bottom: 0 !default;
+$headings-font-weight: $font-weight-bold !default;
+$headings-line-height: 1.3 !default;
+
+$h1-letter-spaceing: -1px !default;
+$h2-letter-spaceing: -1px !default;
+$h3-letter-spaceing: -1px !default;
+$h4-letter-spaceing: -0.5px !default;
+$h5-letter-spaceing: -0.5px !default;
+$h6-letter-spaceing: -0.5px !default;
+
+$paragraph-margin-bottom: 0 !default;
+$body-text-align: null !default;

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

@@ -0,0 +1,70 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as borderRadius;
+
+$upload-width: 500px !default;
+$upload-width-sm: 400px !default;
+$upload-width-large: 700px !default;
+
+$upload-padding-x: 0px !default;
+$upload-padding-y: 0px !default;
+
+$upload-inner-padding-x: 12px !default;
+$upload-inner-padding-y: 12px !default;
+
+$upload-large-inner-padding-x: 20px !default;
+$upload-large-inner-padding-y: 22px !default;
+
+$upload-border-radius: borderRadius.$border-radius !default;
+$upload-border-width: 1px !default;
+$upload-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$upload-bg: var(--#{config.$prefix}body-bg) !default;
+$upload-hover-bg: null !default;
+
+$upload-icon-size: 32px !default;
+$upload-icon-padding: 0px !default;
+$upload-icon-bg: var(--#{config.$prefix}body-bg) !default;
+
+$upload-title-font-size: typography.$font-size-lg !default;
+$upload-title-font-weight: typography.$headings-font-weight !default;
+$upload-title-color: var(--#{config.$prefix}body-color) !default;
+$upload-title-margin-top: 8px !default;
+
+$upload-text-font-size: typography.$font-size-sm !default;
+$upload-text-font-weight: typography.$font-weight-normal !default;
+$upload-text-color: var(--#{config.$prefix}body-color) !default;
+$upload-text-margin-top: 4px !default;
+
+$upload-btn-margin-top: 20px !default;
+$upload-btn-margin-left: 16px !default;
+
+$upload-content-margin-left: 16px !default;
+
+$upload-helper-text-font-size: typography.$font-size-sm !default;
+$upload-helper-text-font-weight: typography.$font-weight-normal !default;
+$upload-helper-text-color: var(--#{config.$prefix}body-color) !default;
+$upload-helper-text-margin-top: 8px !default;
+
+$upload-disabled-opacity: 0.5 !default;
+
+$upload-loader-padding-x: 12px !default;
+$upload-loader-padding-y: 12px !default;
+$upload-loader-bg-opacity: 1 !default;
+$upload-loader-border-radius: $upload-border-radius !default;
+$upload-loader-border-width: $upload-border-width !default;
+$upload-loader-border-color: $upload-border-color !default;
+$upload-loader-margin-top: 20px !default;
+$upload-loader-title-color: var(--#{config.$prefix}body-color) !default;
+$upload-loader-title-font-size: typography.$font-size-sm !default;
+$upload-loader-title-font-weight: typography.$font-weight-normal !default;
+$upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$upload-loader-text-font-size: typography.$font-size-sm !default;
+$upload-loader-text-margin-top: 5px !default;
+$upload-loader-bar-height: 10px !default;
+$upload-loader-bar-margin-top: 10px !default;
+$upload-loader-control-icon-size: 20px !default;
+$upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
+
+$upload-loader-progress-color: var(--#{config.$prefix}primary) !default;
+$upload-loader-success-color: var(--#{config.$prefix}success) !default;
+$upload-loader-error-color: var(--#{config.$prefix}error) !default;

package/src/styles/01-settings/_settings.z-layers.scss

@@ -0,0 +1,9 @@
+$z-layers: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+);

package/src/styles/02-tools/_index.scss

@@ -0,0 +1,20 @@
+// Forward all tool files
+@forward 'tools.animations';
+@forward 'tools.border-radius';
+@forward 'tools.button';
+@forward 'tools.breakpoints';
+@forward 'tools.clearfix';
+@forward 'tools.color-mode';
+@forward 'tools.event';
+@forward 'tools.grid';
+@forward 'tools.hidden-visually';
+@forward 'tools.object-fit';
+@forward 'tools.placeholder';
+@forward 'tools.rem';
+@forward 'tools.size';
+@forward 'tools.spacing';
+@forward 'tools.to-rgb';
+@forward 'tools.transition' as transition-*;
+@forward 'tools.map-loop';
+@forward 'tools.utility-api';
+@forward 'tools.utilities';

package/src/styles/02-tools/_tools.animations.scss

@@ -0,0 +1,19 @@
+@use '../01-settings/settings.animations' as animations;
+@use 'sass:list';
+@use 'tools.transition' as transition;
+@use '../01-settings/settings.config' as config;
+
+// Forward basic-transition mixin for backwards compatibility
+@mixin basic-transition($property: all, $duration: 0.2s, $timing: ease-in-out, $delay: 0s) {
+  @include transition.basic-transition($property, $duration, $timing, $delay);
+}
+
+@keyframes #{config.$prefix}-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

package/src/styles/02-tools/_tools.border-radius.scss

@@ -0,0 +1,78 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.border-radius' as *;
+@use 'sass:meta';
+@use 'sass:list';
+
+@function valid-radius($radius) {
+  $return: null;
+  @each $value in $radius {
+    @if meta.type-of($value) == number {
+      @if $return == null {
+        $return: max($value, 0);
+      } @else {
+        $return: $return max($value, 0);
+      }
+    }
+  }
+  @return if($return == null, 0, $return);
+}
+
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+  @if $enable-rounded {
+    border-radius: valid-radius($radius);
+  } @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
+}
+
+@mixin border-top-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-end-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-start-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-start-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-end-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-end-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-start-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}