commons-shared-web-ui 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/filter/filter.theme.scss

@@ -0,0 +1,92 @@
+@use 'sass:map';
+
+// Default configuration for the filter theme
+$default-filter-config: (
+    // Button Trigger
+    btn-bg: #ffffff,
+    btn-border: 1px solid #e0e0e0,
+    btn-radius: 4px,
+    btn-text-color: #333,
+    btn-hover-bg: #f5f5f5,
+    btn-active-bg: #e3f2fd,
+    btn-active-text: #1976d2,
+    btn-badge-bg: #f44336,
+    btn-badge-text: #fff,
+
+    // Panel / Sidebar
+    panel-bg: #ffffff,
+    panel-border: 1px solid #e0e0e0,
+    panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
+    panel-width: 320px,
+    panel-min-width: 480px,
+    panel-header-bg: #fafafa,
+    panel-header-text: #333,
+    panel-padding: 1rem,
+    panel-radius: 8px,
+    panel-header-height: 48px,
+
+    // Tabs
+    tab-bg: transparent,
+    tab-text: #666,
+    tab-active-bg: #fff,
+    tab-active-text: #1976d2,
+    tab-border-bottom: 2px solid #1976d2,
+
+    // Content
+    section-title: #333,
+    option-text: #555,
+    option-hover-bg: #f9f9f9,
+
+    // Footer actions
+    footer-bg: #fff,
+    footer-border-top: 1px solid #e0e0e0,
+    action-primary-bg: #1976d2,
+    action-primary-text: #fff,
+    action-secondary-text: #666
+);
+
+@mixin filter-theme($user-config: ()) {
+    $config: map.merge($default-filter-config, $user-config);
+
+    // Button Trigger
+    --cc-filter-btn-bg: #{map.get($config, btn-bg)};
+    --cc-filter-btn-border: #{map.get($config, btn-border)};
+    --cc-filter-btn-radius: #{map.get($config, btn-radius)};
+    --cc-filter-btn-text-color: #{map.get($config, btn-text-color)};
+    --cc-filter-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+    --cc-filter-btn-active-bg: #{map.get($config, btn-active-bg)};
+    --cc-filter-btn-active-text: #{map.get($config, btn-active-text)};
+    --cc-filter-btn-badge-bg: #{map.get($config, btn-badge-bg)};
+    --cc-filter-btn-badge-text: #{map.get($config, btn-badge-text)};
+
+    // Panel
+    --cc-filter-panel-bg: #{map.get($config, panel-bg)};
+    --cc-filter-panel-border: #{map.get($config, panel-border)};
+    --cc-filter-panel-shadow: #{map.get($config, panel-shadow)};
+    --cc-filter-panel-width: #{map.get($config, panel-width)};
+    --cc-filter-panel-min-width: #{map.get($config, panel-min-width)};
+    --cc-filter-panel-padding: #{map.get($config, panel-padding)};
+    --cc-filter-panel-header-bg: #{map.get($config, panel-header-bg)};
+    --cc-filter-panel-header-text: #{map.get($config, panel-header-text)};
+    --cc-filter-panel-radius: #{map.get($config, panel-radius)};
+    --cc-filter-panel-header-height: #{map.get($config, panel-header-height)};
+
+    // Tabs
+    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
+    --cc-filter-tab-text: #{map.get($config, tab-text)};
+    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
+    --cc-filter-tab-active-text: #{map.get($config, tab-active-text)};
+    --cc-filter-tab-border-bottom: #{map.get($config, tab-border-bottom)};
+
+    // Content
+    --cc-filter-section-title: #{map.get($config, section-title)};
+    --cc-filter-option-text: #{map.get($config, option-text)};
+    --cc-filter-option-hover-bg: #{map.get($config, option-hover-bg)};
+
+    // Footer
+    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
+    --cc-filter-footer-border-top: #{map.get($config, footer-border-top)};
+    --cc-filter-action-primary-bg: #{map.get($config, action-primary-bg)};
+    --cc-filter-action-primary-text: #{map.get($config, action-primary-text)};
+    --cc-filter-action-secondary-text: #{map.get($config, action-secondary-text)};
+}

package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss

@@ -1,50 +1,38 @@
 @use 'sass:map';
 
-// Default Filter Sidebar Configuration
-$default-filter-config: (
-    // Sidebar Container
-    bg-color: #ffffff,
-    border-color: #E5E7EB,
-    width: 300px,
+$default-filter-sidebar-config: (
+    // Layout
+    width: 100%,
+    padding: 1.5rem,
+    gap: 1.5rem,
+    bg: #FEFEFE,
+    border-radius: 0,
+
+    // Header
+    header-height: 3rem,
+    header-title-size: 1.125rem,
+    header-title-weight: 500,
+    header-title-color: #202124,
 
-    // Tabs
-    tab-bg: transparent,
-    tab-color: #6B7280,
-    tab-active-bg: #FEF2F2,
-    tab-active-color: #EF4444,
-    tab-active-border: #FECACA,
-    tab-hover-bg: #F3F4F6,
-
-    // Sections
-    section-title-color: #374151,
-    accordion-title-color: #111827,
-
-    // Actions Footer
-    footer-bg: #ffffff,
-    footer-border-color: #E5E7EB
+    // Footer
+    footer-padding: 1rem 0 0 0,
+    footer-gap: 1rem,
 );
 
 @mixin filter-sidebar-theme($user-config: ()) {
-    $config: map.merge($default-filter-config, $user-config);
+    $config: map.merge($default-filter-sidebar-config, $user-config);
 
-    // Sidebar
-    --cc-filter-bg: #{map.get($config, bg-color)};
-    --cc-filter-border-color: #{map.get($config, border-color)};
-    --cc-filter-width: #{map.get($config, width)};
+    --cc-filter-sidebar-width: #{map.get($config, width)};
+    --cc-filter-sidebar-padding: #{map.get($config, padding)};
+    --cc-filter-sidebar-gap: #{map.get($config, gap)};
+    --cc-filter-sidebar-bg: #{map.get($config, bg)};
+    --cc-filter-sidebar-border-radius: #{map.get($config, border-radius)};
 
-    // Tabs
-    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
-    --cc-filter-tab-color: #{map.get($config, tab-color)};
-    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
-    --cc-filter-tab-active-color: #{map.get($config, tab-active-color)};
-    --cc-filter-tab-active-border: #{map.get($config, tab-active-border)};
-    --cc-filter-tab-hover-bg: #{map.get($config, tab-hover-bg)};
+    --cc-filter-header-height: #{map.get($config, header-height)};
+    --cc-filter-header-title-size: #{map.get($config, header-title-size)};
+    --cc-filter-header-title-weight: #{map.get($config, header-title-weight)};
+    --cc-filter-header-title-color: #{map.get($config, header-title-color)};
 
-    // Sections
-    --cc-filter-section-title-color: #{map.get($config, section-title-color)};
-    --cc-filter-accordion-title-color: #{map.get($config, accordion-title-color)};
-
-    // Footer
-    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
-    --cc-filter-footer-border-color: #{map.get($config, footer-border-color)};
+    --cc-filter-footer-padding: #{map.get($config, footer-padding)};
+    --cc-filter-footer-gap: #{map.get($config, footer-gap)};
 }

package/src/lib/modules/form-components/components/checkbox/_theme.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+
+$default-checkbox-config: (
+    // Layout
+    margin-bottom: 0.5rem,
+    group-gap: 0.75rem,
+
+    // Label
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+    label-color: #202124,
+
+    // Group label
+    group-label-font-size: 0.875rem,
+    group-label-font-weight: 500,
+    group-label-color: #202124,
+
+    // Size
+    size: 1.125rem,
+    border-radius: 2px,
+
+    // Colors
+    checked-color: #1A73E8,
+    unchecked-color: #BDC1C6,
+
+    // States
+    disabled-color: #80868B,
+    error-color: #D93025,
+    required-color: #D93025
+);
+
+@mixin checkbox-theme($user-config: ()) {
+    $config: map.merge($default-checkbox-config, $user-config);
+
+    // Layout
+    --cc-checkbox-margin-bottom: #{map.get($config, margin-bottom)};
+    --cc-checkbox-group-gap: #{map.get($config, group-gap)};
+
+    // Label
+    --cc-checkbox-font-size: #{map.get($config, font-size)};
+    --cc-checkbox-font-weight: #{map.get($config, font-weight)};
+    --cc-checkbox-font-family: #{map.get($config, font-family)};
+    --cc-checkbox-label-color: #{map.get($config, label-color)};
+
+    // Group label
+    --cc-checkbox-group-label-font-size: #{map.get($config, group-label-font-size)};
+    --cc-checkbox-group-label-font-weight: #{map.get($config, group-label-font-weight)};
+    --cc-checkbox-group-label-color: #{map.get($config, group-label-color)};
+
+    // Size
+    --cc-checkbox-size: #{map.get($config, size)};
+    --cc-checkbox-border-radius: #{map.get($config, border-radius)};
+
+    // Colors
+    --cc-checkbox-checked-color: #{map.get($config, checked-color)};
+    --cc-checkbox-unchecked-color: #{map.get($config, unchecked-color)};
+
+    // States
+    --cc-checkbox-disabled-color: #{map.get($config, disabled-color)};
+    --cc-checkbox-error-color: #{map.get($config, error-color)};
+    --cc-checkbox-required-color: #{map.get($config, required-color)};
+}

package/src/lib/modules/form-components/components/datepicker/_theme.scss

@@ -0,0 +1,82 @@
+@use 'sass:map';
+
+$default-datepicker-config: (
+    // Layout
+    height: 2.5rem,
+    padding: 0.375rem 1rem,
+    label-gap: 0.5rem,
+
+    // Borders
+    border-radius: 0.4375rem,
+    border-color: #BDC1C6,
+    border-width: 1px,
+
+    // Colors
+    bg: #FEFEFE,
+    color: #202124,
+    placeholder-color: #80868B,
+
+    // Typography
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+
+    // Label
+    label-font-size: 0.875rem,
+    label-font-weight: 500,
+    label-color: #202124,
+
+    // States
+    focus-border-color: #1A73E8,
+    error-color: #D93025,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+    required-color: #D93025,
+
+    // Icon
+    icon-color: #5F6368
+);
+
+@mixin datepicker-theme($user-config: ()) {
+    $config: map.merge($default-datepicker-config, $user-config);
+
+    // Layout
+    --cc-datepicker-height: #{map.get($config, height)};
+    --cc-datepicker-padding: #{map.get($config, padding)};
+    --cc-datepicker-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-datepicker-border-radius: #{map.get($config, border-radius)};
+    --cc-datepicker-border-color: #{map.get($config, border-color)};
+    --cc-datepicker-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-datepicker-bg: #{map.get($config, bg)};
+    --cc-datepicker-color: #{map.get($config, color)};
+    --cc-datepicker-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-datepicker-font-size: #{map.get($config, font-size)};
+    --cc-datepicker-font-weight: #{map.get($config, font-weight)};
+    --cc-datepicker-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-datepicker-label-font-size: #{map.get($config, label-font-size)};
+    --cc-datepicker-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-datepicker-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-datepicker-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-datepicker-error-color: #{map.get($config, error-color)};
+    --cc-datepicker-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-datepicker-disabled-color: #{map.get($config, disabled-color)};
+    --cc-datepicker-required-color: #{map.get($config, required-color)};
+
+    // Icon
+    --cc-datepicker-icon-color: #{map.get($config, icon-color)};
+
+    // MD3 Overrides or Missing Variables
+    --mat-datepicker-calendar-container-background-color: var(--cc-datepicker-bg, #FEFEFE);
+    --mat-datepicker-calendar-container-shape: var(--cc-datepicker-border-radius, 0.4375rem);
+    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}

package/src/lib/modules/form-components/components/dropdown/_theme.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+
+$default-dropdown-config: (
+    // Layout
+    height: 2.5rem,
+    padding: 0.375rem 1rem,
+    label-gap: 0.5rem,
+
+    // Borders
+    border-radius: 0.4375rem,
+    border-color: #BDC1C6,
+    border-width: 1px,
+
+    // Colors
+    bg: #FEFEFE,
+    color: #202124,
+    placeholder-color: #80868B,
+
+    // Typography
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+
+    // Label
+    label-font-size: 0.875rem,
+    label-font-weight: 500,
+    label-color: #202124,
+
+    // States
+    focus-border-color: #1A73E8,
+    error-color: #D93025,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+    required-color: #D93025,
+
+    // Search
+    divider-color: #E0E0E0,
+    search-border-color: #BDC1C6,
+    search-border-radius: 0.25rem,
+    search-font-size: 0.875rem,
+    search-focus-color: #1A73E8,
+
+    // Dropdown arrow
+    arrow-color: #5F6368
+);
+
+@mixin dropdown-theme($user-config: ()) {
+    $config: map.merge($default-dropdown-config, $user-config);
+
+    // Layout
+    --cc-dropdown-height: #{map.get($config, height)};
+    --cc-dropdown-padding: #{map.get($config, padding)};
+    --cc-dropdown-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-dropdown-border-radius: #{map.get($config, border-radius)};
+    --cc-dropdown-border-color: #{map.get($config, border-color)};
+    --cc-dropdown-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-dropdown-bg: #{map.get($config, bg)};
+    --cc-dropdown-color: #{map.get($config, color)};
+    --cc-dropdown-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-dropdown-font-size: #{map.get($config, font-size)};
+    --cc-dropdown-font-weight: #{map.get($config, font-weight)};
+    --cc-dropdown-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-dropdown-label-font-size: #{map.get($config, label-font-size)};
+    --cc-dropdown-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-dropdown-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-dropdown-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-dropdown-error-color: #{map.get($config, error-color)};
+    --cc-dropdown-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-dropdown-disabled-color: #{map.get($config, disabled-color)};
+    --cc-dropdown-required-color: #{map.get($config, required-color)};
+
+    // Search
+    --cc-dropdown-divider-color: #{map.get($config, divider-color)};
+    --cc-dropdown-search-border-color: #{map.get($config, search-border-color)};
+    --cc-dropdown-search-border-radius: #{map.get($config, search-border-radius)};
+    --cc-dropdown-search-font-size: #{map.get($config, search-font-size)};
+    --cc-dropdown-search-focus-color: #{map.get($config, search-focus-color)};
+
+    // Arrow
+    --cc-dropdown-arrow-color: #{map.get($config, arrow-color)};
+}

package/src/lib/modules/form-components/components/input/_theme.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+
+$default-input-config: (
+    // Layout
+    height: 2.5rem,
+    padding: 0.375rem 1rem,
+    label-gap: 0.5rem,
+
+    // Borders
+    border-radius: 0.4375rem,
+    border-color: #BDC1C6,
+    border-width: 1px,
+
+    // Colors
+    bg: #FEFEFE,
+    color: #202124,
+    placeholder-color: #80868B,
+
+    // Typography
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+
+    // Label
+    label-font-size: 0.875rem,
+    label-font-weight: 500,
+    label-color: #202124,
+
+    // States
+    focus-border-color: #1A73E8,
+    error-color: #D93025,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+    required-color: #D93025,
+
+    // Icon
+    icon-color: #5F6368
+);
+
+@mixin input-theme($user-config: ()) {
+    $config: map.merge($default-input-config, $user-config);
+
+    // Layout
+    --cc-input-height: #{map.get($config, height)};
+    --cc-input-padding: #{map.get($config, padding)};
+    --cc-input-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-input-border-radius: #{map.get($config, border-radius)};
+    --cc-input-border-color: #{map.get($config, border-color)};
+    --cc-input-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-input-bg: #{map.get($config, bg)};
+    --cc-input-color: #{map.get($config, color)};
+    --cc-input-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-input-font-size: #{map.get($config, font-size)};
+    --cc-input-font-weight: #{map.get($config, font-weight)};
+    --cc-input-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-input-label-font-size: #{map.get($config, label-font-size)};
+    --cc-input-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-input-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-input-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-input-error-color: #{map.get($config, error-color)};
+    --cc-input-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-input-disabled-color: #{map.get($config, disabled-color)};
+    --cc-input-required-color: #{map.get($config, required-color)};
+
+    // Icon
+    --cc-input-icon-color: #{map.get($config, icon-color)};
+}

package/src/lib/modules/form-components/components/radio/_theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+$default-radio-config: (
+    // Layout
+    label-gap: 0.5rem,
+    group-gap: 0.75rem,
+
+    // Label
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+    label-color: #202124,
+
+    // Group label
+    group-label-font-size: 0.875rem,
+    group-label-font-weight: 500,
+    group-label-color: #202124,
+
+    // Size
+    size: 1.25rem,
+
+    // Colors
+    checked-color: #1A73E8,
+    unchecked-color: #BDC1C6,
+
+    // States
+    disabled-color: #80868B,
+    error-color: #D93025,
+    required-color: #D93025
+);
+
+@mixin radio-theme($user-config: ()) {
+    $config: map.merge($default-radio-config, $user-config);
+
+    // Layout
+    --cc-radio-label-gap: #{map.get($config, label-gap)};
+    --cc-radio-group-gap: #{map.get($config, group-gap)};
+
+    // Label
+    --cc-radio-font-size: #{map.get($config, font-size)};
+    --cc-radio-font-weight: #{map.get($config, font-weight)};
+    --cc-radio-font-family: #{map.get($config, font-family)};
+    --cc-radio-label-color: #{map.get($config, label-color)};
+
+    // Group label
+    --cc-radio-group-label-font-size: #{map.get($config, group-label-font-size)};
+    --cc-radio-group-label-font-weight: #{map.get($config, group-label-font-weight)};
+    --cc-radio-group-label-color: #{map.get($config, group-label-color)};
+
+    // Size
+    --cc-radio-size: #{map.get($config, size)};
+
+    // Colors
+    --cc-radio-checked-color: #{map.get($config, checked-color)};
+    --cc-radio-unchecked-color: #{map.get($config, unchecked-color)};
+
+    // States
+    --cc-radio-disabled-color: #{map.get($config, disabled-color)};
+    --cc-radio-error-color: #{map.get($config, error-color)};
+    --cc-radio-required-color: #{map.get($config, required-color)};
+}

package/src/lib/modules/form-components/components/search/_theme.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+
+$default-search-config: (
+    // Layout
+    height: 2.5rem,
+    padding: 0.375rem 1rem,
+    label-gap: 0.5rem,
+
+    // Borders
+    border-radius: 0.4375rem,
+    border-color: #BDC1C6,
+    border-width: 1px,
+
+    // Colors
+    bg: #FEFEFE,
+    color: #202124,
+    placeholder-color: #80868B,
+
+    // Typography
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+
+    // Label
+    label-font-size: 0.875rem,
+    label-font-weight: 500,
+    label-color: #202124,
+
+    // States
+    focus-border-color: #1A73E8,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+
+    // Icon
+    icon-color: #5F6368
+);
+
+@mixin search-theme($user-config: ()) {
+    $config: map.merge($default-search-config, $user-config);
+
+    // Layout
+    --cc-search-height: #{map.get($config, height)};
+    --cc-search-padding: #{map.get($config, padding)};
+    --cc-search-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-search-border-radius: #{map.get($config, border-radius)};
+    --cc-search-border-color: #{map.get($config, border-color)};
+    --cc-search-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-search-bg: #{map.get($config, bg)};
+    --cc-search-color: #{map.get($config, color)};
+    --cc-search-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-search-font-size: #{map.get($config, font-size)};
+    --cc-search-font-weight: #{map.get($config, font-weight)};
+    --cc-search-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-search-label-font-size: #{map.get($config, label-font-size)};
+    --cc-search-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-search-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-search-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-search-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-search-disabled-color: #{map.get($config, disabled-color)};
+
+    // Icon
+    --cc-search-icon-color: #{map.get($config, icon-color)};
+}

package/src/lib/modules/form-components/components/toggle/_theme.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+$default-toggle-config: (
+    // Label
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+    label-color: #202124,
+
+    // Size
+    width: 2.25rem,
+    height: 1rem,
+
+    // Colors
+    track-color: #BDC1C6,
+    thumb-color: #FEFEFE,
+    checked-track-color: #1A73E8,
+    checked-thumb-color: #FEFEFE,
+
+    // States
+    disabled-color: #80868B
+);
+
+@mixin toggle-theme($user-config: ()) {
+    $config: map.merge($default-toggle-config, $user-config);
+
+    // Label
+    --cc-toggle-font-size: #{map.get($config, font-size)};
+    --cc-toggle-font-weight: #{map.get($config, font-weight)};
+    --cc-toggle-font-family: #{map.get($config, font-family)};
+    --cc-toggle-label-color: #{map.get($config, label-color)};
+
+    // Size
+    --cc-toggle-width: #{map.get($config, width)};
+    --cc-toggle-height: #{map.get($config, height)};
+
+    // Colors
+    --cc-toggle-track-color: #{map.get($config, track-color)};
+    --cc-toggle-thumb-color: #{map.get($config, thumb-color)};
+    --cc-toggle-checked-track-color: #{map.get($config, checked-track-color)};
+    --cc-toggle-checked-thumb-color: #{map.get($config, checked-thumb-color)};
+
+    // States
+    --cc-toggle-disabled-color: #{map.get($config, disabled-color)};
+}