commons-shared-web-ui 0.0.44 → 0.0.45

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

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

@@ -1,91 +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)};
+@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

@@ -1,77 +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)};
+@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

@@ -1,61 +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)};
+@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)};
 }