@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,252 @@
+@use 'sass:color';
+
+@use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.color-functions' as *;
+
+// Basic Colors
+$white: #ffffff !default;
+$black: #000000 !default;
+
+// Color contrast variables
+$color-contrast-dark: #000000 !default;
+$color-contrast-light: #ffffff !default;
+
+// Primitives Primary Colors
+$primary-1: #f2e8fd !default;
+$primary-2: #e4d0fa !default;
+$primary-3: #d0b2f5 !default;
+$primary-4: #b88cef !default;
+$primary-5: #9c63e9 !default;
+$primary-6: #7c3aed !default; // Balanced primary purple
+$primary-7: #6425ca !default;
+$primary-8: #501ba6 !default;
+$primary-9: #3c1583 !default;
+$primary-10: #2a0e60 !default;
+
+// Primitives Red Colors
+$red-1: #fef2f2 !default;
+$red-2: #fee2e2 !default;
+$red-3: #fecaca !default;
+$red-4: #fca5a5 !default;
+$red-5: #f87171 !default;
+$red-6: #ef4444 !default; // Vibrant, accessible red
+$red-7: #dc2626 !default;
+$red-8: #b91c1c !default;
+$red-9: #991b1b !default;
+$red-10: #7f1d1d !default;
+
+// Primitives Green Colors
+$green-1: #f0fdf4 !default;
+$green-2: #dcfce7 !default;
+$green-3: #bbf7d0 !default;
+$green-4: #86efac !default;
+$green-5: #4ade80 !default;
+$green-6: #22c55e !default; // Balanced, accessible green
+$green-7: #16a34a !default;
+$green-8: #15803d !default;
+$green-9: #166534 !default;
+$green-10: #14532d !default;
+
+// Primitives Yellow Colors
+$yellow-1: #fefce8 !default;
+$yellow-2: #fef9c3 !default;
+$yellow-3: #fef08a !default;
+$yellow-4: #fde047 !default;
+$yellow-5: #facc15 !default;
+$yellow-6: #eab308 !default; // Accessible, high-visibility yellow
+$yellow-7: #ca8a04 !default;
+$yellow-8: #a16207 !default;
+$yellow-9: #854d0e !default;
+$yellow-10: #713f12 !default;
+
+// Primitives Blue Colors
+$blue-1: #eff6ff !default;
+$blue-2: #dbeafe !default;
+$blue-3: #bfdbfe !default;
+$blue-4: #93c5fd !default;
+$blue-5: #60a5fa !default;
+$blue-6: #3b82f6 !default; // Balanced, accessible blue
+$blue-7: #2563eb !default;
+$blue-8: #1d4ed8 !default;
+$blue-9: #1e40af !default;
+$blue-10: #1e3a8a !default;
+
+// Primitives Gray Colors
+$gray-1: #f9fafb !default;
+$gray-2: #f3f4f6 !default;
+$gray-3: #e5e7eb !default;
+$gray-4: #d1d5db !default;
+$gray-5: #9ca3af !default;
+$gray-6: #6b7280 !default;
+$gray-7: #4b5563 !default;
+$gray-8: #374151 !default;
+$gray-9: #1f2937 !default;
+$gray-10: #111827 !default;
+
+// Primitives Overlay
+$overlay-1: rgba(20, 20, 20, 0.302) !default;
+$overlay-2: rgba($gray-6, 0.6) !default;
+
+//Text colors emphasis
+$primary-text: $gray-10 !default;
+$secondary-text: $gray-8 !default;
+$tertiary-text: $gray-6 !default;
+$disabled-text: $gray-5 !default;
+$invert-text: $gray-10 !default;
+$brand-text: $primary-6 !default;
+$error-text: $red-6 !default;
+$success-text: $green-6 !default;
+$warning-text: $yellow-6 !default;
+$info-text: $blue-6 !default;
+$light-text: $gray-1 !default;
+$dark-text: $gray-9 !default;
+
+// Text colors dark emphasis
+$primary-text-dark: $white !default;
+$secondary-text-dark: $gray-3 !default;
+$tertiary-text-dark: $gray-4 !default;
+$disabled-text-dark: $gray-5 !default;
+$invert-text-dark: $gray-1 !default;
+$brand-text-dark: $primary-2 !default;
+$error-text-dark: $red-3 !default;
+$success-text-dark: $green-3 !default;
+$warning-text-dark: $yellow-3 !default;
+$info-text-dark: $blue-3 !default;
+$light-text-dark: $gray-1 !default;
+$dark-text-dark: $gray-8 !default;
+
+// Background colors subtle
+$primary-bg: $white !default;
+$secondary-bg: $gray-3 !default;
+$tertiary-bg: $gray-4 !default;
+$invert-bg: $gray-10 !default;
+$brand-bg: $primary-2 !default;
+$error-bg: $red-2 !default;
+$success-bg: $green-2 !default;
+$warning-bg: $yellow-2 !default;
+$info-bg: $blue-2 !default;
+$light-bg: $gray-2 !default;
+$dark-bg: $gray-9 !default;
+
+// Background colors dark subtle
+$primary-bg-dark: $gray-9 !default;
+$secondary-bg-dark: $gray-7 !default;
+$tertiary-bg-dark: $gray-6 !default;
+$invert-bg-dark: $white !default;
+$brand-bg-dark: $primary-8 !default;
+$error-bg-dark: $red-10 !default;
+$success-bg-dark: $green-9 !default;
+$warning-bg-dark: $yellow-10 !default;
+$info-bg-dark: $blue-10 !default;
+$light-bg-dark: $gray-1 !default;
+$dark-bg-dark: $gray-8 !default;
+
+// Border color
+$primary-border: $gray-3 !default;
+$secondary-border: $gray-10 !default;
+$brand-border: $primary-6 !default;
+$error-border: $red-6 !default;
+$success-border: $green-6 !default;
+$warning-border: $yellow-6 !default;
+$info-border: $blue-6 !default;
+$light-border: $gray-1 !default;
+$dark-border: $gray-9 !default;
+
+// Border color dark
+$primary-border-dark: $gray-8 !default;
+$secondary-border-dark: $white !default;
+$brand-border-dark: $primary-6 !default;
+$error-border-dark: $red-6 !default;
+$success-border-dark: $green-6 !default;
+$warning-border-dark: $yellow-6 !default;
+$info-border-dark: $blue-6 !default;
+$light-border-dark: $gray-1 !default;
+$dark-border-dark: $gray-8 !default;
+
+// theme colors
+$primary: $primary-6 !default;
+$secondary: $gray-2 !default;
+$light: $gray-1 !default;
+$dark: $gray-9 !default;
+$success: $green-6 !default;
+$info: $blue-6 !default;
+$warning: $yellow-6 !default;
+$error: $red-6 !default;
+
+// Theme colors Dark
+$primary-dark: $primary-6 !default;
+$secondary-dark: $gray-7 !default;
+$light-dark: $gray-1 !default;
+$dark-dark: $gray-8 !default;
+$success-dark: $green-6 !default;
+$info-dark: $blue-6 !default;
+$warning-dark: $yellow-6 !default;
+$error-dark: $red-6 !default;
+
+// Theme hover background
+$primary-hover: $primary-6 !default;
+$secondary-hover: $gray-3 !default;
+$light-hover: $gray-2 !default;
+$dark-hover: $gray-7 !default;
+$success-hover: $green-8 !default;
+$info-hover: $blue-8 !default;
+$warning-hover: $yellow-8 !default;
+$error-hover: $red-8 !default;
+
+// Theme hover background for dark theme
+$primary-hover-dark: $primary-6 !default;
+$secondary-hover-dark: $gray-6 !default;
+$light-hover-dark: $gray-5 !default;
+$dark-hover-dark: $gray-7 !default;
+$info-hover-dark: $blue-4 !default;
+$success-hover-dark: $green-4 !default;
+$warning-hover-dark: $yellow-5 !default;
+$error-hover-dark: $red-4 !default;
+
+//  Mischelleneous Colors
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+$body-color: $primary-text !default;
+$body-bg: $primary-bg !default;
+$headings-color: $primary-text !default;
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: color.adjust($link-color, $lightness: -15%) !default;
+$link-hover-decoration: null !default;
+$code-color: $red-6 !default;
+$mark-bg: $yellow-3 !default;
+
+// Form validation colors
+$form-valid-color: $green-6 !default;
+$form-valid-border-color: $green-6 !default;
+$form-invalid-color: $red-6 !default;
+$form-invalid-border-color: $red-6 !default;
+
+$body-color-dark: $primary-text-dark !default;
+$body-bg-dark: $primary-bg-dark !default;
+
+// Border colors for use with components
+$primary-border: $gray-6 !default;
+$primary-border-dark: $gray-7 !default;
+
+// Dark mode colors
+$headings-color-dark: $gray-3 !default;
+$link-color-dark: $primary-4 !default;
+$link-hover-color-dark: color.adjust($link-color-dark, $lightness: -15%) !default;
+$code-color-dark: $red-5 !default;
+$border-color-translucent-dark: rgba($white, 0.15) !default;
+
+// Form validation dark mode colors
+$form-valid-color-dark: $green-5 !default;
+$form-valid-border-color-dark: $green-5 !default;
+$form-invalid-color-dark: $red-5 !default;
+$form-invalid-border-color-dark: $red-5 !default;
+
+$focus-border-color: $primary-5 !default;
+$focus-border-color-dark: $primary-4 !default;
+
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
+
+// All variables are automatically exported when using @use

package/src/styles/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/styles/01-settings/_settings.countdown.scss

@@ -0,0 +1,15 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as border-radius;
+
+$countdown-color: var(--#{config.$prefix}body-color) !default;
+$countdown-font-size: typography.$font-size-base !default;
+$countdown-font-weight: typography.$font-weight-medium !default;
+$countdown-focused-time-font-size: typography.$font-size-lg !default;
+$countdown-focused-label-font-size: typography.$font-size-xs !default;
+$countdown-focused-border-radius: border-radius.$border-radius !default;
+$countdown-focused-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$countdown-item-padding-x: 12px !default;
+$countdown-item-padding-y: 8px !default;
+$countdown-items-gap: 4px !default;
+$countdown-focused-items-gap: 8px !default;

package/src/styles/01-settings/_settings.data-table.scss

@@ -0,0 +1,52 @@
+@use 'settings.config' as config;
+@use 'settings.colors' as colors;
+@use 'settings.border' as border;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.typography' as typography;
+@use 'settings.spacing' as spacing;
+
+// DataTable Variables
+$data-table-bg: var(--#{config.$prefix}white) !default;
+$data-table-color: var(--#{config.$prefix}body-color) !default;
+$data-table-border-color: var(--#{config.$prefix}border-color) !default;
+$data-table-border-width: var(--#{config.$prefix}border-width) !default;
+$data-table-border-style: var(--#{config.$prefix}border-style) !default;
+$data-table-border-radius: var(--#{config.$prefix}border-radius) !default;
+
+// Header
+$data-table-header-bg: var(--#{config.$prefix}gray-100) !default;
+$data-table-header-color: var(--#{config.$prefix}body-color) !default;
+$data-table-header-font-weight: typography.$font-weight-medium !default;
+
+// Cell padding
+$data-table-cell-padding-y: 0.75rem !default;
+$data-table-cell-padding-x: 1rem !default;
+$data-table-cell-padding-y-sm: 0.5rem !default;
+$data-table-cell-padding-x-sm: 0.75rem !default;
+
+// Striped rows
+$data-table-striped-bg: rgba(0, 0, 0, 0.03) !default;
+$data-table-hover-bg: rgba(0, 0, 0, 0.06) !default;
+
+// Pagination
+$data-table-pagination-padding-y: 0.5rem !default;
+$data-table-pagination-padding-x: 0.75rem !default;
+$data-table-pagination-bg: var(--#{config.$prefix}white) !default;
+$data-table-pagination-border-color: var(--#{config.$prefix}border-color) !default;
+$data-table-pagination-hover-bg: var(--#{config.$prefix}gray-100) !default;
+$data-table-pagination-active-bg: var(--#{config.$prefix}primary) !default;
+$data-table-pagination-active-color: var(--#{config.$prefix}white) !default;
+$data-table-pagination-disabled-color: var(--#{config.$prefix}gray-400) !default;
+
+// Search input
+$data-table-search-bg: var(--#{config.$prefix}white) !default;
+$data-table-search-border-color: var(--#{config.$prefix}border-color) !default;
+$data-table-search-focus-border-color: var(--#{config.$prefix}primary) !default;
+$data-table-search-padding-y: 0.5rem !default;
+$data-table-search-padding-x: 0.75rem !default;
+$data-table-search-border-radius: var(--#{config.$prefix}border-radius) !default;
+
+// Sort icon
+$data-table-sort-icon-size: 0.75rem !default;
+$data-table-sort-icon-color: var(--#{config.$prefix}gray-500) !default;
+$data-table-sort-icon-active-color: var(--#{config.$prefix}primary) !default;

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

@@ -0,0 +1,44 @@
+@use 'settings.config' as config;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.typography' as typography;
+
+$datepicker-padding-x: 8px !default;
+$datepicker-padding-y: 12px !default;
+
+$datepicker-bg: var(--#{config.$prefix}body-bg);
+$datepicker-color: var(--#{config.$prefix}body-color);
+$datepicker-deactivate-color: var(--#{config.$prefix}tertiary-text-emphasis);
+$datepicker-border-radius: border-radius.$border-radius-xl !default;
+$datepicker-border-width: null !default;
+$datepicker-border-color: null !default;
+$datepicker-box-shadow: var(--#{config.$prefix}box-shadow);
+
+$datepicker-body-padding-x: 4px !default;
+$datepicker-body-padding-y: 4px !default;
+
+$datepicker-month-font-size: typography.$font-size-sm !default;
+$datepicker-month-font-weight: typography.$font-weight-bold !default;
+
+$datepicker-year-font-size: $datepicker-month-font-size !default;
+$datepicker-year-font-weight: typography.$font-weight-bold !default;
+
+$datepicker-week-font-size: typography.$font-size-sm !default;
+$datepicker-week-font-weight: typography.$font-weight-normal !default;
+$datepicker-week-width: 40px !default;
+$datepicker-week-height: 40px !default;
+
+$datepicker-day-font-size: typography.$font-size-sm !default;
+$datepicker-day-font-weight: typography.$font-weight-normal !default;
+$datepicker-day-width: $datepicker-week-width !default;
+$datepicker-day-height: $datepicker-week-height !default;
+$datepicker-day-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$datepicker-day-border-radius: border-radius.$border-radius-pill !default;
+
+$datepicker-today-color: var(--#{config.$prefix}brand-text-emphasis);
+
+$datepicker-day-in-range-bg: var(--#{config.$prefix}brand-bg-subtle);
+$datepicker-day-selected-color: var(--#{config.$prefix}gray-1);
+$datepicker-day-selected-bg: var(--#{config.$prefix}primary);
+
+$datepicker-width: ($datepicker-week-width * 7) + ($datepicker-padding-x * 2) +
+  ($datepicker-body-padding-x + $datepicker-body-padding-y) !default;

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

@@ -0,0 +1,38 @@
+@use 'settings.typography' as typography;
+@use 'settings.config' as config;
+@use 'settings.border-radius' as border-radius;
+
+$dropdown-min-width: 180px !default;
+$dropdown-font-size: typography.$font-size-base !default;
+$dropdown-color: var(--#{config.$prefix}body-color) !default;
+$dropdown-bg: var(--#{config.$prefix}body-bg) !default;
+$dropdown-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$dropdown-border-radius: border-radius.$border-radius !default;
+$dropdown-border-width: 1px !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 8px !default;
+$dropdown-spacer: 4px !default;
+$dropdown-box-shadow: var(--#{config.$prefix}box-shadow) !default;
+
+$dropdown-item-padding-x: 16px !default;
+$dropdown-item-padding-y: 8px !default;
+$dropdown-item-hover-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$dropdown-item-hover-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
+
+// Animation settings
+$dropdown-animation-duration: 0.25s !default;
+$dropdown-animation-timing: cubic-bezier(0.16, 1, 0.3, 1) !default;
+
+// Link variables
+$dropdown-link-color: var(--#{config.$prefix}body-color) !default;
+$dropdown-link-hover-color: var(--#{config.$prefix}brand-text-emphasis) !default;
+$dropdown-link-hover-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
+$dropdown-link-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
+$dropdown-link-active-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
+$dropdown-link-border-radius: border-radius.$border-radius !default;
+
+$dropdown-header-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$dropdown-header-padding: $dropdown-item-padding-y $dropdown-item-padding-x !default;
+
+$dropdown-divider-margin-y: 8px !default;
+$dropdown-divider-bg: var(--#{config.$prefix}primary-border-subtle) !default;

package/src/styles/01-settings/_settings.edge-panel.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use 'settings.z-layers' as z-layers;
+@use 'settings.config' as config;
+
+$edge-panel-zindex: map.get(z-layers.$z-layers, 5) !default;
+$edge-panel-width: 240px !default;
+$edge-panel-height: 30vh !default;
+$edge-panel-padding-x: 16px !default;
+$edge-panel-padding-y: 16px !default;
+$edge-panel-bg: var(--#{config.$prefix}body-bg) !default;
+$edge-panel-color: var(--#{config.$prefix}body-color) !default;
+$edge-panel-shadow: var(--#{config.$prefix}box-shadow) !default;
+$edge-panel-backdrop-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
+$edge-panel-backdrop-opacity: 0.5 !default;
+$edge-panel-backdrop-blur: 10px !default;
+$edge-panel-animation-duration: 300 !default;
+$edge-panel-border-color: var(--#{config.$prefix}border-color) !default;

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

@@ -0,0 +1,17 @@
+$assets-fonts-path: '../assets/fonts/';
+
+@mixin font-face($name, $foldername, $filename, $weight: normal, $style: normal) {
+  @font-face {
+    font-family: $name;
+    src: url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot');
+    src:
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot?#iefix')
+        format('embedded-opentype'),
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff2') format('woff2'),
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff') format('woff'),
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.ttf') format('truetype');
+    font-weight: $weight;
+    font-style: $style;
+    text-rendering: optimizeLegibility;
+  }
+}

package/src/styles/01-settings/_settings.form-group.scss

@@ -0,0 +1,11 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+
+$input-group-width: 100% !default;
+$input-group-label-color: var(--#{$prefix}secondary-text-emphasis) !default;
+$input-group-label-font-size: $font-size-sm !default;
+$input-group-label-font-size-sm: $font-size-xs !default;
+$input-group-label-margin-bottom: 8px !default;
+$input-group-helper-text-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$input-group-helper-text-font-size: $font-size-xs !default;
+$input-group-helper-text-margin-top: $input-group-label-margin-bottom !default;

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

@@ -0,0 +1,3 @@
+$form-width: 100% !default;
+$form-items-spacer-y: 32px !default;
+$form-items-spacer-x: 12px !default;

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

@@ -0,0 +1,15 @@
+@use 'settings.breakpoints' as breakpoints;
+
+$enable-grid-classes: true;
+$grid-columns: 12;
+$grid-gutter-width: 16px;
+
+// Use breakpoints from the breakpoints module
+$container-max-widths: (
+  xs: 340px,
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+) !default;

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

@@ -0,0 +1,30 @@
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+
+$hero-padding-x: 0px !default;
+$hero-padding-y: 40px !default;
+$hero-spacer-y: 64px !default;
+
+$hero-bg: var(--#{config.$prefix}body-bg) !default;
+$hero-overlay: var(--#{config.$prefix}brand-bg-subtle) !default;
+$hero-overlay-opacity: 0.5 !default;
+
+$hero-subtitle-font-size: typography.$font-size-sm !default;
+$hero-title-font-size: typography.$display-1 !default;
+$hero-text-font-size: typography.$font-size-base !default;
+
+$hero-subtitle-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$hero-title-color: var(--#{config.$prefix}body-color) !default;
+$hero-text-color: var(--#{config.$prefix}secondary-color-text-emphasis) !default;
+
+$hero-subtitle-font-weight: typography.$font-weight-normal !default;
+$hero-title-font-weight: typography.$font-weight-bold !default;
+$hero-text-font-weight: typography.$font-weight-normal !default;
+
+$hero-subtitle-margin-bottom: 12px !default;
+$hero-text-margin-top: 12px !default;
+$hero-actions-margin-top: 24px !default;
+$hero-actions-inner-gap: 12px !default;
+
+$hero-grid-gutter: 64px !default;
+$hero-content-width: 536px !default;

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

@@ -0,0 +1,38 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+@use './settings.border-radius' as *;
+
+$input-width: 100% !default;
+$input-color: var(--#{$prefix}body-color) !default;
+$input-bg: var(--#{$prefix}body-bg) !default;
+$input-bg-disabled: var(--#{$prefix}secondary-bg-subtle) !default;
+$input-font-size: $font-size-sm !default;
+$input-font-size-sm: $font-size-sm !default;
+$input-font-size-lg: $font-size-base !default;
+$input-line-height-md: 20px !default;
+$input-line-height-sm: 20px !default;
+$input-line-height-lg: 24px !default;
+
+$input-padding-x: 12px !default;
+$input-padding-y: 10px !default;
+$input-padding-x-sm: 12px !default;
+$input-padding-y-sm: 6px !default;
+$input-padding-x-lg: 12px !default;
+$input-padding-y-lg: 12px !default;
+
+$input-border-width: 1px;
+$input-border-color: var(--#{$prefix}primary-border-subtle) !default;
+$input-hover-border-color: var(--#{$prefix}secondary-border-subtle) !default;
+$input-focus-border-color: $input-hover-border-color !default;
+
+$input-invalid-border-color: var(--#{$prefix}error) !default;
+$input-success-border-color: var(--#{$prefix}success) !default;
+$input-border-radius: $border-radius-xl !default;
+
+$input-placeholder-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$input-disabled-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$input-disabled-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+
+$input-textarea-height: 100px !default;
+$input-textarea-height-sm: 80px !default;
+$input-textarea-height-lg: 120px !default;

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

@@ -0,0 +1,12 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './settings.colors' as *;
+@use './settings.typography' as *;
+@use './settings.spacing' as *;
+
+$link-color: $primary !default;
+$link-color-dark: $primary-dark !default;
+$link-hover-color: darken($link-color, 20) !default;
+$link-font-size: $font-size-base !default;
+$link-font-weight: $font-weight-normal !default;
+$link-icon-spacer: map.get($spacing-sizes, 1) !default;

package/src/styles/01-settings/_settings.list-group.scss

@@ -0,0 +1,14 @@
+@use './settings.typography' as *;
+@use './settings.config' as *;
+
+$list-group-width: 100% !default;
+$list-group-bg: null !default;
+
+$list-group-item-padding-y: 12px !default;
+$list-group-item-padding-x: $list-group-item-padding-y !default;
+$list-group-item-font-size: $font-size-base !default;
+$list-group-item-color: var(--#{$prefix}body-color) !default;
+$list-group-item-disabled-color: var(--#{$prefix}disabled-text-emphasis) !default;
+$list-group-item-border-color: var(--#{$prefix}primary-border-subtle) !default;
+$list-group-item-border-width: 1px !default;
+$list-group-item-bg: var(--#{$prefix}body-bg) !default;

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

@@ -0,0 +1,10 @@
+@use './settings.config' as *;
+@use './settings.typography' as *;
+
+$list-color: var(--#{$prefix}body-color) !default;
+$list-font-size: $font-size-base !default;
+$list-font-weight: $font-weight-normal !default;
+$list-item-gap: 4px !default;
+$list-padding-left: 20px !default;
+$list-item-dash-width: 12px !default;
+$list-item-dash-height: 2px !default;