Themes: Update Indigo Calendar, Select, and Combo

package.json

@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.6",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^11.0.0",
+    "igniteui-theming": "^12.2.1",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",

src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss

@@ -355,37 +355,53 @@ $border-size: rem(1px);
         color: var-get($theme, 'date-special-foreground');
         background: var-get($theme, 'date-special-background');
 
+        &::after {
+            border-color: var-get($theme, 'date-special-border-color');
+        }
+
         &:hover {
             color: var-get($theme, 'date-hover-foreground');
             background: var-get($theme, 'date-hover-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-special-hover-border-color');
+            }
         }
 
         &:focus {
             color: var-get($theme, 'date-focus-foreground');
             background: var-get($theme, 'date-focus-background');
-        }
 
-        &::after {
-            border-color: var-get($theme, 'date-special-border-color');
+            &::after {
+                border-color: var-get($theme, 'date-special-hover-border-color');
+            }
         }
     }
 
     &[part~='selected'][part~='special']:not([part~='range']) {
         color: var-get($theme, 'date-selected-foreground');
         background: var-get($theme, 'date-selected-background');
 
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
+
         &:hover {
             color: var-get($theme, 'date-selected-hover-foreground');
             background: var-get($theme, 'date-selected-hover-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
+            }
         }
 
         &:focus {
             color: var-get($theme, 'date-selected-focus-foreground');
             background: var-get($theme, 'date-selected-focus-background');
-        }
 
-        &::after {
-            border-color: var-get($theme, 'date-selected-foreground');
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+            }
         }
     }
 

src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss

@@ -7,7 +7,19 @@ $theme: $bootstrap;
     padding-block-start: rem(16px);
 }
 
-[part~='month-inner'] {
+[part~='month-inner'],
+[part~='year-inner'] {
+    height: var-get($theme, 'size');
+    border-radius: var-get($theme, 'ym-border-radius');
+
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        // Don't use outline color transparent here since :focus-visible will have transparent border around
+        // the element that will cover the outline of the box shadow.
+        outline: none;
+    }
+
     &:focus,
     &:hover {
         color: var-get($theme, 'ym-hover-foreground');
@@ -17,95 +29,61 @@ $theme: $bootstrap;
     &[part~='current'] {
         color: var-get($theme, 'ym-current-foreground');
         background: var-get($theme, 'ym-current-background');
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-color');
 
         &:focus,
         &:hover {
             color: var-get($theme, 'ym-current-hover-foreground');
             background: var-get($theme, 'ym-current-hover-background');
         }
 
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
+        }
+
         &:hover {
-           box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-hover-color');
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-hover-color');
         }
     }
 
     &[part~='selected'] {
         color: var-get($theme, 'ym-selected-foreground');
         background: var-get($theme, 'ym-selected-background');
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-outline-color');
 
         &:focus,
         &:hover {
             color: var-get($theme, 'ym-selected-hover-foreground');
             background: var-get($theme, 'ym-selected-hover-background');
         }
-    }
 
-    &[part~='selected'][part~='current'] {
-        color: var-get($theme, 'ym-selected-current-foreground');
-        background: var-get($theme, 'ym-selected-current-background');
-
-        &:focus,
-        &:hover {
-            color: var-get($theme, 'ym-selected-current-hover-foreground');
-            background: var-get($theme, 'ym-selected-current-hover-background');
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-focus-outline-color');
         }
-    }
-}
 
-[part~='year-inner'] {
-    &:focus,
-    &:hover {
-        color: var-get($theme, 'ym-hover-foreground');
-        background: var-get($theme, 'ym-hover-background');
-    }
-
-    &[part~='current'] {
-        color: var-get($theme, 'ym-current-foreground');
-        background: var-get($theme, 'ym-current-background');
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
-
-        &:focus,
         &:hover {
-            color: var-get($theme, 'ym-current-hover-foreground');
-            background: var-get($theme, 'ym-current-hover-background');
-        }
-    }
-
-    &[part~='selected'] {
-        color: var-get($theme, 'ym-selected-foreground');
-        background: var-get($theme, 'ym-selected-background');
-
-        &:focus,
-        &:hover {
-            color: var-get($theme, 'ym-selected-hover-foreground');
-            background: var-get($theme, 'ym-selected-hover-background');
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-hover-outline-color');
         }
     }
 
     &[part~='selected'][part~='current'] {
         color: var-get($theme, 'ym-selected-current-foreground');
         background: var-get($theme, 'ym-selected-current-background');
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
 
         &:focus,
         &:hover {
             color: var-get($theme, 'ym-selected-current-hover-foreground');
             background: var-get($theme, 'ym-selected-current-hover-background');
         }
-    }
-}
 
-[part~='month-inner'],
-[part~='year-inner'] {
-    height: var-get($theme, 'size');
-    border-radius: var-get($theme, 'ym-border-radius');
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-focus-color');
+        }
 
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        // Don't use outline color transparent here since :focus-visible will have transparent border around
-        // the element that will cover the outline of the box shadow.
-        outline: none;
+        &:hover {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-hover-color');
+        }
     }
 }
 

src/components/calendar/themes/shared/fluent/days-view.fluent.scss

@@ -273,11 +273,37 @@ $row-gap: rem(6px);
         &:hover {
             color: var-get($theme, 'date-hover-foreground');
             background: var-get($theme, 'date-hover-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-special-hover-border-color')
+            }
         }
 
         &:focus {
             color: var-get($theme, 'date-focus-foreground');
             background: var-get($theme, 'date-focus-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-special-hover-border-color')
+            }
+        }
+    }
+
+    &[part~='selected'][part~='special'] {
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
+
+        &:hover {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
+            }
+        }
+
+        &:focus {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+            }
         }
     }
 

src/components/calendar/themes/shared/fluent/year-month-view.fluent.scss

@@ -3,7 +3,19 @@
 
 $theme: $fluent;
 
-[part~='month-inner'] {
+[part~='month-inner'],
+[part~='year-inner'] {
+    height: var-get($theme, 'size');
+    border-radius: var-get($theme, 'ym-border-radius');
+
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        // Don't use outline color transparent here since :focus-visible will have transparent border around
+        // the element that will cover the outline of the box shadow.
+        outline: none;
+    }
+
     &:focus,
     &:hover {
         color: var-get($theme, 'ym-hover-foreground');
@@ -13,71 +25,41 @@ $theme: $fluent;
     &[part~='current'] {
         color: var-get($theme, 'ym-current-foreground');
         background: var-get($theme, 'ym-current-background');
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-color');
 
         &:focus,
         &:hover {
             color: var-get($theme, 'ym-current-hover-foreground');
             background: var-get($theme, 'ym-current-hover-background');
         }
-    }
-
-    &[part~='selected'] {
-        color: var-get($theme, 'ym-selected-foreground');
-        background: var-get($theme, 'ym-selected-background');
-
-        &:focus,
-        &:hover {
-            color: var-get($theme, 'ym-selected-hover-foreground');
-            background: var-get($theme, 'ym-selected-hover-background');
-        }
-    }
-
-    &[part~='selected'][part~='current'] {
-        color: var-get($theme, 'ym-selected-current-foreground');
-        background: var-get($theme, 'ym-selected-current-background');
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-color');
-
-        &:focus,
-        &:hover {
-            color: var-get($theme, 'ym-selected-current-hover-foreground');
-            background: var-get($theme, 'ym-selected-current-hover-background');
-            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-hover-color');
-        }
 
         &:hover {
-           box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-hover-color');
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-hover-color');
         }
-    }
-
-}
-
-[part~='year-inner'] {
-    &:focus,
-    &:hover {
-        color: var-get($theme, 'ym-hover-foreground');
-        background: var-get($theme, 'ym-hover-background');
-    }
 
-    &[part~='current'] {
-        color: var-get($theme, 'ym-current-foreground');
-        background: var-get($theme, 'ym-current-background');
-
-        &:focus,
-        &:hover {
-            color: var-get($theme, 'ym-current-hover-foreground');
-            background: var-get($theme, 'ym-current-hover-background');
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-current-outline-focus-color');
         }
     }
 
     &[part~='selected'] {
         color: var-get($theme, 'ym-selected-foreground');
         background: var-get($theme, 'ym-selected-background');
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-outline-color');
 
         &:focus,
         &:hover {
             color: var-get($theme, 'ym-selected-hover-foreground');
             background: var-get($theme, 'ym-selected-hover-background');
         }
+
+        &:hover {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-hover-outline-color');
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-focus-outline-color');
+        }
     }
 
     &[part~='selected'][part~='current'] {
@@ -94,19 +76,9 @@ $theme: $fluent;
         &:hover {
             box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-hover-color');
         }
-    }
-}
-
-[part~='month-inner'],
-[part~='year-inner'] {
-    height: var-get($theme, 'size');
-    border-radius: var-get($theme, 'ym-border-radius');
 
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        // Don't use outline color transparent here since :focus-visible will have transparent border around
-        // the element that will cover the outline of the box shadow.
-        outline: none;
+        &:focus {
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'ym-selected-current-outline-focus-color');
+        }
     }
 }