commons-shared-web-ui 0.0.39 → 0.0.40

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

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

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

package/src/lib/modules/form-components/form-components.theme.scss

@@ -1,25 +1,25 @@
-@use './components/input/_theme' as input;
-@use './components/dropdown/_theme' as dropdown;
-@use './components/checkbox/_theme' as checkbox;
-@use './components/radio/_theme' as radio;
-@use './components/toggle/_theme' as toggle;
-@use './components/datepicker/_theme' as datepicker;
-@use './components/search/_theme' as search;
-
-@forward './components/input/_theme';
-@forward './components/dropdown/_theme';
-@forward './components/checkbox/_theme';
-@forward './components/radio/_theme';
-@forward './components/toggle/_theme';
-@forward './components/datepicker/_theme';
-@forward './components/search/_theme';
-
-@mixin form-components-theme() {
-    @include input.input-theme();
-    @include dropdown.dropdown-theme();
-    @include checkbox.checkbox-theme();
-    @include radio.radio-theme();
-    @include toggle.toggle-theme();
-    @include datepicker.datepicker-theme();
-    @include search.search-theme();
+@use './components/input/_theme' as input;
+@use './components/dropdown/_theme' as dropdown;
+@use './components/checkbox/_theme' as checkbox;
+@use './components/radio/_theme' as radio;
+@use './components/toggle/_theme' as toggle;
+@use './components/datepicker/_theme' as datepicker;
+@use './components/search/_theme' as search;
+
+@forward './components/input/_theme';
+@forward './components/dropdown/_theme';
+@forward './components/checkbox/_theme';
+@forward './components/radio/_theme';
+@forward './components/toggle/_theme';
+@forward './components/datepicker/_theme';
+@forward './components/search/_theme';
+
+@mixin form-components-theme() {
+    @include input.input-theme();
+    @include dropdown.dropdown-theme();
+    @include checkbox.checkbox-theme();
+    @include radio.radio-theme();
+    @include toggle.toggle-theme();
+    @include datepicker.datepicker-theme();
+    @include search.search-theme();
 }

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

@@ -1,86 +1,86 @@
-@use 'sass:map';
-
-// Default configuration for the nav theme
-$default-nav-config: (
-  // Container
-  container-bg: #f5f5f5,
-  container-padding: 4px,
-  container-radius: 6px,
-  container-border: none,
-  container-gap: 4px,
-
-  // Item - Font & Text
-  font-family: ('Roboto', sans-serif),
-  font-size: 14px,
-  font-weight: 500,
-  item-color: #666666,
-  item-bg: transparent,
-  item-padding: 8px 16px,
-  item-radius: 4px,
-  item-border: none,
-
-  // Item - Active State
-  item-active-bg: #ffffff,
-  item-active-color: #1a1a1a,
-  item-active-font-weight: 600,
-  item-active-border-color: transparent,
-  item-active-border-width: 2px,
-  item-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
-
-  // Item - Hover State
-  item-hover-bg: #eeeeee,
-  item-hover-color: #333333,
-
-  // Item - Disabled State
-  disabled-opacity: 0.5,
-
-  // Badge
-  badge-bg: #e74c3c,
-  badge-color: #ffffff,
-  badge-size: 18px,
-  badge-font-size: 10px
-);
-
-// Mixin to generate CSS variables for the nav component
-@mixin nav-theme($user-config: ()) {
-  // Merge user config with defaults
-  $config: map.merge($default-nav-config, $user-config);
-
-  // Container
-  --cc-nav-container-bg: #{map.get($config, container-bg)};
-  --cc-nav-container-padding: #{map.get($config, container-padding)};
-  --cc-nav-container-radius: #{map.get($config, container-radius)};
-  --cc-nav-container-border: #{map.get($config, container-border)};
-  --cc-nav-container-gap: #{map.get($config, container-gap)};
-
-  // Item - Font & Text
-  --cc-nav-font-family: #{map.get($config, font-family)};
-  --cc-nav-font-size: #{map.get($config, font-size)};
-  --cc-nav-font-weight: #{map.get($config, font-weight)};
-  --cc-nav-item-color: #{map.get($config, item-color)};
-  --cc-nav-item-bg: #{map.get($config, item-bg)};
-  --cc-nav-item-padding: #{map.get($config, item-padding)};
-  --cc-nav-item-radius: #{map.get($config, item-radius)};
-  --cc-nav-item-border: #{map.get($config, item-border)};
-
-  // Item - Active State
-  --cc-nav-item-active-bg: #{map.get($config, item-active-bg)};
-  --cc-nav-item-active-color: #{map.get($config, item-active-color)};
-  --cc-nav-item-active-font-weight: #{map.get($config, item-active-font-weight)};
-  --cc-nav-item-active-border-color: #{map.get($config, item-active-border-color)};
-  --cc-nav-item-active-border-width: #{map.get($config, item-active-border-width)};
-  --cc-nav-item-active-shadow: #{map.get($config, item-active-shadow)};
-
-  // Item - Hover State
-  --cc-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
-  --cc-nav-item-hover-color: #{map.get($config, item-hover-color)};
-
-  // Item - Disabled State
-  --cc-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
-
-  // Badge
-  --cc-nav-badge-bg: #{map.get($config, badge-bg)};
-  --cc-nav-badge-color: #{map.get($config, badge-color)};
-  --cc-nav-badge-size: #{map.get($config, badge-size)};
-  --cc-nav-badge-font-size: #{map.get($config, badge-font-size)};
-}
+@use 'sass:map';
+
+// Default configuration for the nav theme
+$default-nav-config: (
+  // Container
+  container-bg: #f5f5f5,
+  container-padding: 4px,
+  container-radius: 6px,
+  container-border: none,
+  container-gap: 4px,
+
+  // Item - Font & Text
+  font-family: ('Roboto', sans-serif),
+  font-size: 14px,
+  font-weight: 500,
+  item-color: #666666,
+  item-bg: transparent,
+  item-padding: 8px 16px,
+  item-radius: 4px,
+  item-border: none,
+
+  // Item - Active State
+  item-active-bg: #ffffff,
+  item-active-color: #1a1a1a,
+  item-active-font-weight: 600,
+  item-active-border-color: transparent,
+  item-active-border-width: 2px,
+  item-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
+
+  // Item - Hover State
+  item-hover-bg: #eeeeee,
+  item-hover-color: #333333,
+
+  // Item - Disabled State
+  disabled-opacity: 0.5,
+
+  // Badge
+  badge-bg: #e74c3c,
+  badge-color: #ffffff,
+  badge-size: 18px,
+  badge-font-size: 10px
+);
+
+// Mixin to generate CSS variables for the nav component
+@mixin nav-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-nav-config, $user-config);
+
+  // Container
+  --cc-nav-container-bg: #{map.get($config, container-bg)};
+  --cc-nav-container-padding: #{map.get($config, container-padding)};
+  --cc-nav-container-radius: #{map.get($config, container-radius)};
+  --cc-nav-container-border: #{map.get($config, container-border)};
+  --cc-nav-container-gap: #{map.get($config, container-gap)};
+
+  // Item - Font & Text
+  --cc-nav-font-family: #{map.get($config, font-family)};
+  --cc-nav-font-size: #{map.get($config, font-size)};
+  --cc-nav-font-weight: #{map.get($config, font-weight)};
+  --cc-nav-item-color: #{map.get($config, item-color)};
+  --cc-nav-item-bg: #{map.get($config, item-bg)};
+  --cc-nav-item-padding: #{map.get($config, item-padding)};
+  --cc-nav-item-radius: #{map.get($config, item-radius)};
+  --cc-nav-item-border: #{map.get($config, item-border)};
+
+  // Item - Active State
+  --cc-nav-item-active-bg: #{map.get($config, item-active-bg)};
+  --cc-nav-item-active-color: #{map.get($config, item-active-color)};
+  --cc-nav-item-active-font-weight: #{map.get($config, item-active-font-weight)};
+  --cc-nav-item-active-border-color: #{map.get($config, item-active-border-color)};
+  --cc-nav-item-active-border-width: #{map.get($config, item-active-border-width)};
+  --cc-nav-item-active-shadow: #{map.get($config, item-active-shadow)};
+
+  // Item - Hover State
+  --cc-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
+  --cc-nav-item-hover-color: #{map.get($config, item-hover-color)};
+
+  // Item - Disabled State
+  --cc-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+  // Badge
+  --cc-nav-badge-bg: #{map.get($config, badge-bg)};
+  --cc-nav-badge-color: #{map.get($config, badge-color)};
+  --cc-nav-badge-size: #{map.get($config, badge-size)};
+  --cc-nav-badge-font-size: #{map.get($config, badge-font-size)};
+}

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

@@ -1,66 +1,66 @@
-@use 'sass:map';
-
-// Default configuration for the pagination theme
-$default-pagination-config: (
-  // Font & Text
-  font-family: ('Roboto', sans-serif),
-  text-color: #757575,
-  font-size: 14px,
-
-  // Select Dropdown
-  select-bg: #f5f5f5,
-  select-border: none,
-  select-radius: 4px,
-  select-padding: 6px 12px,
-  select-text-color: #333,
-  select-arrow-color: #f44336, // Red arrow
-
-  // Buttons
-  btn-size: 32px,
-  btn-bg: #ffffff,
-  btn-border: 1px solid #e0e0e0,
-  btn-radius: 4px,
-  btn-text-color: #333,
-  
-  // States
-  btn-hover-bg: #f5f5f5,
-  btn-active-bg: #fff,
-  btn-active-border: 1px solid #ff4081, // Pinkish red
-  btn-active-text: #ff4081,
-  
-  // Disabled
-  disabled-opacity: 0.5,
-  disabled-bg: #f9f9f9
-);
-
-// Mixin to generate CSS variables for the pagination component
-@mixin pagination-theme($user-config: ()) {
-  // Merge user config with defaults
-  $config: map.merge($default-pagination-config, $user-config);
-
-  // Generate CSS Variables
-  --cc-pagination-font-family: #{map.get($config, font-family)};
-  --cc-pagination-text-color: #{map.get($config, text-color)};
-  --cc-pagination-font-size: #{map.get($config, font-size)};
-
-  --cc-pagination-select-bg: #{map.get($config, select-bg)};
-  --cc-pagination-select-border: #{map.get($config, select-border)};
-  --cc-pagination-select-radius: #{map.get($config, select-radius)};
-  --cc-pagination-select-padding: #{map.get($config, select-padding)};
-  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
-  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
-
-  --cc-pagination-btn-size: #{map.get($config, btn-size)};
-  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
-  --cc-pagination-btn-border: #{map.get($config, btn-border)};
-  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
-  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
-  
-  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
-  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
-  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
-  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
-  
-  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
-  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
-}
+@use 'sass:map';
+
+// Default configuration for the pagination theme
+$default-pagination-config: (
+  // Font & Text
+  font-family: ('Roboto', sans-serif),
+  text-color: #757575,
+  font-size: 14px,
+
+  // Select Dropdown
+  select-bg: #f5f5f5,
+  select-border: none,
+  select-radius: 4px,
+  select-padding: 6px 12px,
+  select-text-color: #333,
+  select-arrow-color: #f44336, // Red arrow
+
+  // Buttons
+  btn-size: 32px,
+  btn-bg: #ffffff,
+  btn-border: 1px solid #e0e0e0,
+  btn-radius: 4px,
+  btn-text-color: #333,
+  
+  // States
+  btn-hover-bg: #f5f5f5,
+  btn-active-bg: #fff,
+  btn-active-border: 1px solid #ff4081, // Pinkish red
+  btn-active-text: #ff4081,
+  
+  // Disabled
+  disabled-opacity: 0.5,
+  disabled-bg: #f9f9f9
+);
+
+// Mixin to generate CSS variables for the pagination component
+@mixin pagination-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-pagination-config, $user-config);
+
+  // Generate CSS Variables
+  --cc-pagination-font-family: #{map.get($config, font-family)};
+  --cc-pagination-text-color: #{map.get($config, text-color)};
+  --cc-pagination-font-size: #{map.get($config, font-size)};
+
+  --cc-pagination-select-bg: #{map.get($config, select-bg)};
+  --cc-pagination-select-border: #{map.get($config, select-border)};
+  --cc-pagination-select-radius: #{map.get($config, select-radius)};
+  --cc-pagination-select-padding: #{map.get($config, select-padding)};
+  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
+  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
+
+  --cc-pagination-btn-size: #{map.get($config, btn-size)};
+  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
+  --cc-pagination-btn-border: #{map.get($config, btn-border)};
+  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
+  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
+  
+  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
+  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
+  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
+  
+  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
+  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
+}