igniteui-webcomponents 4.2.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/CHANGELOG.md +25 -8
  2. package/README.md +12 -2
  3. package/components/avatar/themes/avatar.base.css.js +10 -2
  4. package/components/avatar/themes/avatar.base.css.js.map +1 -1
  5. package/components/badge/themes/light/badge.base.css.js +6 -0
  6. package/components/badge/themes/light/badge.base.css.js.map +1 -1
  7. package/components/button/button.js +2 -6
  8. package/components/button/button.js.map +1 -1
  9. package/components/button/themes/button/light/button.base.css.js +22 -49
  10. package/components/button/themes/button/light/button.base.css.js.map +1 -1
  11. package/components/button/themes/button/light/button.bootstrap.css.js +31 -61
  12. package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
  13. package/components/button/themes/button/light/button.fluent.css.js +15 -41
  14. package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
  15. package/components/button/themes/button/light/button.indigo.css.js +15 -26
  16. package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
  17. package/components/button/themes/button/light/button.material.css.js +28 -57
  18. package/components/button/themes/button/light/button.material.css.js.map +1 -1
  19. package/components/button/themes/icon-button/light/icon-button.base.css.js +9 -3
  20. package/components/button/themes/icon-button/light/icon-button.base.css.js.map +1 -1
  21. package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js +2 -2
  22. package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js.map +1 -1
  23. package/components/button/themes/icon-button/light/icon-button.fluent.css.js +2 -2
  24. package/components/button/themes/icon-button/light/icon-button.fluent.css.js.map +1 -1
  25. package/components/button/themes/icon-button/light/icon-button.indigo.css.js +2 -2
  26. package/components/button/themes/icon-button/light/icon-button.indigo.css.js.map +1 -1
  27. package/components/button/themes/icon-button/light/icon-button.material.css.js +2 -2
  28. package/components/button/themes/icon-button/light/icon-button.material.css.js.map +1 -1
  29. package/components/calendar/calendar.d.ts +5 -0
  30. package/components/calendar/calendar.js +10 -2
  31. package/components/calendar/calendar.js.map +1 -1
  32. package/components/calendar/common/calendar.model.js.map +1 -1
  33. package/components/calendar/themes/bootstrap/calendar.bootstrap.css.js +1 -1
  34. package/components/calendar/themes/bootstrap/calendar.bootstrap.css.js.map +1 -1
  35. package/components/calendar/themes/calendar.base.css.js +4 -7
  36. package/components/calendar/themes/calendar.base.css.js.map +1 -1
  37. package/components/calendar/themes/fluent/calendar.fluent.css.js +43 -16
  38. package/components/calendar/themes/fluent/calendar.fluent.css.js.map +1 -1
  39. package/components/calendar/themes/fluent/days-view.fluent.css.js +39 -27
  40. package/components/calendar/themes/fluent/days-view.fluent.css.js.map +1 -1
  41. package/components/calendar/themes/fluent/year-month-view.fluent.css.js +15 -9
  42. package/components/calendar/themes/fluent/year-month-view.fluent.css.js.map +1 -1
  43. package/components/card/themes/light/card.content.bootstrap.css.js +3 -3
  44. package/components/card/themes/light/card.content.bootstrap.css.js.map +1 -1
  45. package/components/card/themes/light/card.content.indigo.css.js +1 -1
  46. package/components/card/themes/light/card.content.indigo.css.js.map +1 -1
  47. package/components/card/themes/light/card.content.material.css.js +1 -1
  48. package/components/card/themes/light/card.content.material.css.js.map +1 -1
  49. package/components/card/themes/light/card.header.bootstrap.css.js +4 -4
  50. package/components/card/themes/light/card.header.bootstrap.css.js.map +1 -1
  51. package/components/card/themes/light/card.header.fluent.css.js +4 -4
  52. package/components/card/themes/light/card.header.fluent.css.js.map +1 -1
  53. package/components/card/themes/light/card.header.indigo.css.js +2 -2
  54. package/components/card/themes/light/card.header.indigo.css.js.map +1 -1
  55. package/components/card/themes/light/card.header.material.css.js +2 -2
  56. package/components/card/themes/light/card.header.material.css.js.map +1 -1
  57. package/components/checkbox/themes/light/checkbox.bootstrap.css.js +1 -1
  58. package/components/checkbox/themes/light/checkbox.bootstrap.css.js.map +1 -1
  59. package/components/checkbox/themes/light/checkbox.fluent.css.js +1 -1
  60. package/components/checkbox/themes/light/checkbox.fluent.css.js.map +1 -1
  61. package/components/checkbox/themes/light/checkbox.indigo.css.js +1 -1
  62. package/components/checkbox/themes/light/checkbox.indigo.css.js.map +1 -1
  63. package/components/checkbox/themes/light/checkbox.material.css.js +1 -1
  64. package/components/checkbox/themes/light/checkbox.material.css.js.map +1 -1
  65. package/components/checkbox/themes/light/switch.base.css.js +1 -1
  66. package/components/checkbox/themes/light/switch.base.css.js.map +1 -1
  67. package/components/checkbox/themes/light/switch.fluent.css.js +1 -1
  68. package/components/checkbox/themes/light/switch.fluent.css.js.map +1 -1
  69. package/components/chip/themes/chip.base.css.js +3 -3
  70. package/components/chip/themes/chip.base.css.js.map +1 -1
  71. package/components/chip/themes/chip.bootstrap.css.js +3 -3
  72. package/components/chip/themes/chip.bootstrap.css.js.map +1 -1
  73. package/components/chip/themes/chip.fluent.css.js +4 -4
  74. package/components/chip/themes/chip.fluent.css.js.map +1 -1
  75. package/components/chip/themes/chip.indigo.css.js +3 -3
  76. package/components/chip/themes/chip.indigo.css.js.map +1 -1
  77. package/components/chip/themes/chip.material.css.js +3 -3
  78. package/components/chip/themes/chip.material.css.js.map +1 -1
  79. package/components/combo/combo-header.js.map +1 -1
  80. package/components/combo/combo-item.js.map +1 -1
  81. package/components/combo/combo-list.js.map +1 -1
  82. package/components/combo/combo.js +10 -6
  83. package/components/combo/combo.js.map +1 -1
  84. package/components/combo/controllers/data.d.ts +1 -0
  85. package/components/combo/controllers/data.js +4 -0
  86. package/components/combo/controllers/data.js.map +1 -1
  87. package/components/combo/controllers/selection.d.ts +2 -2
  88. package/components/combo/controllers/selection.js +7 -9
  89. package/components/combo/controllers/selection.js.map +1 -1
  90. package/components/combo/themes/light/combo.base.css.js +3 -3
  91. package/components/combo/themes/light/combo.base.css.js.map +1 -1
  92. package/components/combo/themes/light/combo.bootstrap.css.js +1 -1
  93. package/components/combo/themes/light/combo.bootstrap.css.js.map +1 -1
  94. package/components/combo/themes/light/combo.fluent.css.js +3 -3
  95. package/components/combo/themes/light/combo.fluent.css.js.map +1 -1
  96. package/components/combo/themes/light/combo.indigo.css.js +2 -2
  97. package/components/combo/themes/light/combo.indigo.css.js.map +1 -1
  98. package/components/combo/themes/light/combo.material.css.js +3 -3
  99. package/components/combo/themes/light/combo.material.css.js.map +1 -1
  100. package/components/combo/themes/light/header/combo-header.base.css.js +3 -3
  101. package/components/combo/themes/light/header/combo-header.base.css.js.map +1 -1
  102. package/components/combo/themes/light/item/combo-item.base.css.js +7 -7
  103. package/components/combo/themes/light/item/combo-item.base.css.js.map +1 -1
  104. package/components/combo/types.d.ts +1 -0
  105. package/components/combo/types.js.map +1 -1
  106. package/components/common/definitions/defineAllComponents.js +10 -0
  107. package/components/common/definitions/defineAllComponents.js.map +1 -1
  108. package/components/dialog/themes/light/dialog.base.css.js +2 -2
  109. package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
  110. package/components/dialog/themes/light/dialog.bootstrap.css.js +1 -1
  111. package/components/dialog/themes/light/dialog.bootstrap.css.js.map +1 -1
  112. package/components/dialog/themes/light/dialog.fluent.css.js +1 -1
  113. package/components/dialog/themes/light/dialog.fluent.css.js.map +1 -1
  114. package/components/dropdown/themes/light/dropdown-group.base.css.js +3 -3
  115. package/components/dropdown/themes/light/dropdown-group.base.css.js.map +1 -1
  116. package/components/dropdown/themes/light/dropdown-group.fluent.css.js +1 -1
  117. package/components/dropdown/themes/light/dropdown-group.fluent.css.js.map +1 -1
  118. package/components/dropdown/themes/light/dropdown-header.base.css.js +3 -3
  119. package/components/dropdown/themes/light/dropdown-header.base.css.js.map +1 -1
  120. package/components/dropdown/themes/light/dropdown-header.fluent.css.js +1 -1
  121. package/components/dropdown/themes/light/dropdown-header.fluent.css.js.map +1 -1
  122. package/components/dropdown/themes/light/dropdown-item.base.css.js +7 -7
  123. package/components/dropdown/themes/light/dropdown-item.base.css.js.map +1 -1
  124. package/components/dropdown/themes/light/dropdown-item.fluent.css.js +1 -1
  125. package/components/dropdown/themes/light/dropdown-item.fluent.css.js.map +1 -1
  126. package/components/expansion-panel/themes/light/expansion-panel.base.css.js +11 -11
  127. package/components/expansion-panel/themes/light/expansion-panel.base.css.js.map +1 -1
  128. package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.js +2 -2
  129. package/components/expansion-panel/themes/light/expansion-panel.bootstrap.css.js.map +1 -1
  130. package/components/expansion-panel/themes/light/expansion-panel.fluent.css.js +3 -3
  131. package/components/expansion-panel/themes/light/expansion-panel.fluent.css.js.map +1 -1
  132. package/components/expansion-panel/themes/light/expansion-panel.indigo.css.js +1 -1
  133. package/components/expansion-panel/themes/light/expansion-panel.indigo.css.js.map +1 -1
  134. package/components/icon/icon.material.css.js +1 -1
  135. package/components/icon/icon.material.css.js.map +1 -1
  136. package/components/icon/icon.registry.js +2 -0
  137. package/components/icon/icon.registry.js.map +1 -1
  138. package/components/input/themes/light/input.base.css.js +2 -2
  139. package/components/input/themes/light/input.base.css.js.map +1 -1
  140. package/components/input/themes/light/input.bootstrap.css.js +8 -7
  141. package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
  142. package/components/input/themes/light/input.fluent.css.js +3 -3
  143. package/components/input/themes/light/input.fluent.css.js.map +1 -1
  144. package/components/input/themes/light/input.indigo.css.js +3 -3
  145. package/components/input/themes/light/input.indigo.css.js.map +1 -1
  146. package/components/input/themes/light/input.material.css.js +8 -8
  147. package/components/input/themes/light/input.material.css.js.map +1 -1
  148. package/components/list/themes/light/list-header.base.css.js +3 -3
  149. package/components/list/themes/light/list-header.base.css.js.map +1 -1
  150. package/components/list/themes/light/list-item.base.css.js +8 -8
  151. package/components/list/themes/light/list-item.base.css.js.map +1 -1
  152. package/components/list/themes/light/list-item.bootstrap.css.js +2 -2
  153. package/components/list/themes/light/list-item.bootstrap.css.js.map +1 -1
  154. package/components/list/themes/light/list-item.fluent.css.js +1 -1
  155. package/components/list/themes/light/list-item.fluent.css.js.map +1 -1
  156. package/components/list/themes/light/list-item.indigo.css.js +1 -1
  157. package/components/list/themes/light/list-item.indigo.css.js.map +1 -1
  158. package/components/mask-input/mask-input.js.map +1 -1
  159. package/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.css.js +1 -1
  160. package/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.css.js.map +1 -1
  161. package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js +1 -1
  162. package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js.map +1 -1
  163. package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js +1 -1
  164. package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js.map +1 -1
  165. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js +1 -1
  166. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js.map +1 -1
  167. package/components/navbar/themes/light/navbar.base.css.js +1 -1
  168. package/components/navbar/themes/light/navbar.base.css.js.map +1 -1
  169. package/components/navbar/themes/light/navbar.bootstrap.css.js +1 -1
  170. package/components/navbar/themes/light/navbar.bootstrap.css.js.map +1 -1
  171. package/components/navbar/themes/light/navbar.fluent.css.js +1 -1
  172. package/components/navbar/themes/light/navbar.fluent.css.js.map +1 -1
  173. package/components/radio/themes/light/radio.base.css.js +1 -1
  174. package/components/radio/themes/light/radio.base.css.js.map +1 -1
  175. package/components/radio/themes/light/radio.fluent.css.js +1 -1
  176. package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
  177. package/components/rating/rating-symbol.base.css.js +1 -1
  178. package/components/rating/rating-symbol.base.css.js.map +1 -1
  179. package/components/rating/rating.base.css.js +2 -2
  180. package/components/rating/rating.base.css.js.map +1 -1
  181. package/components/rating/rating.bootstrap.css.js +2 -2
  182. package/components/rating/rating.bootstrap.css.js.map +1 -1
  183. package/components/rating/rating.fluent.css.js +2 -2
  184. package/components/rating/rating.fluent.css.js.map +1 -1
  185. package/components/rating/rating.indigo.css.js +2 -2
  186. package/components/rating/rating.indigo.css.js.map +1 -1
  187. package/components/select/select.js +7 -0
  188. package/components/select/select.js.map +1 -1
  189. package/components/select/themes/light/select.base.css.js +1 -1
  190. package/components/select/themes/light/select.base.css.js.map +1 -1
  191. package/components/select/themes/light/select.bootstrap.css.js +1 -1
  192. package/components/select/themes/light/select.bootstrap.css.js.map +1 -1
  193. package/components/select/themes/light/select.fluent.css.js +1 -1
  194. package/components/select/themes/light/select.fluent.css.js.map +1 -1
  195. package/components/select/themes/light/select.indigo.css.js +1 -1
  196. package/components/select/themes/light/select.indigo.css.js.map +1 -1
  197. package/components/select/themes/light/select.material.css.js +1 -1
  198. package/components/select/themes/light/select.material.css.js.map +1 -1
  199. package/components/slider/slider-base.js.map +1 -1
  200. package/components/slider/themes/light/slider.base.css.js +2 -2
  201. package/components/slider/themes/light/slider.base.css.js.map +1 -1
  202. package/components/snackbar/themes/light/snackbar.base.css.js +1 -1
  203. package/components/snackbar/themes/light/snackbar.base.css.js.map +1 -1
  204. package/components/snackbar/themes/light/snackbar.fluent.css.js +1 -1
  205. package/components/snackbar/themes/light/snackbar.fluent.css.js.map +1 -1
  206. package/components/stepper/step.js.map +1 -1
  207. package/components/stepper/themes/step/light/step.base.css.js +3 -3
  208. package/components/stepper/themes/step/light/step.base.css.js.map +1 -1
  209. package/components/tabs/themes/light/tab.base.css.js +1 -1
  210. package/components/tabs/themes/light/tab.base.css.js.map +1 -1
  211. package/components/toast/themes/toast.base.css.js +4 -4
  212. package/components/toast/themes/toast.base.css.js.map +1 -1
  213. package/components/toast/themes/toast.fluent.css.js +9 -0
  214. package/components/toast/themes/toast.fluent.css.js.map +1 -1
  215. package/components/tree/themes/light/tree-item.base.css.js +3 -3
  216. package/components/tree/themes/light/tree-item.base.css.js.map +1 -1
  217. package/package.json +2 -2
  218. package/themes/dark/bootstrap.css +20 -34
  219. package/themes/dark/fluent.css +38 -33
  220. package/themes/dark/indigo.css +0 -13
  221. package/themes/dark/material.css +20 -33
  222. package/themes/light/bootstrap.css +20 -34
  223. package/themes/light/fluent.css +20 -33
  224. package/themes/light/indigo.css +0 -13
  225. package/themes/light/material.css +20 -33
  226. package/vscode-html-custom-data.json +1 -1
package/components/calendar/themes/calendar.base.css.js CHANGED
@@ -34,7 +34,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
34
34
  }
35
35
 
36
36
  :host(igc-calendar) {
37
- --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);
37
+ --size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));
38
38
  display: -webkit-box;
39
39
  display: -ms-flexbox;
40
40
  display: flex;
@@ -147,10 +147,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
147
147
  outline: none;
148
148
  }
149
149
 
150
- [part~=navigation-button] {
151
- -webkit-margin-start: 1.5rem;
152
- margin-inline-start: 1.5rem;
153
- }
154
150
  [part~=navigation-button][part~=vertical] {
155
151
  -webkit-transform: rotate(90deg);
156
152
  -ms-transform: rotate(90deg);
@@ -164,6 +160,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
164
160
  -webkit-box-align: center;
165
161
  -ms-flex-align: center;
166
162
  align-items: center;
163
+ gap: 1.5rem;
167
164
  }
168
165
 
169
166
  :host(igc-calendar[header-orientation=vertical]) {
@@ -213,7 +210,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
213
210
  }
214
211
 
215
212
  [part=header-date] {
216
- font-family: var(--ig-h4-font-family);
213
+ font-family: var(--ig-h4-font-family, var(--ig-font-family));
217
214
  font-size: var(--ig-h4-font-size);
218
215
  font-weight: var(--ig-h4-font-weight);
219
216
  font-style: var(--ig-h4-font-style);
@@ -229,7 +226,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
229
226
  }
230
227
 
231
228
  [part=header-title] {
232
- font-family: var(--ig-overline-font-family);
229
+ font-family: var(--ig-overline-font-family, var(--ig-font-family));
233
230
  font-size: var(--ig-overline-font-size);
234
231
  font-weight: var(--ig-overline-font-weight);
235
232
  font-style: var(--ig-overline-font-style);
package/components/calendar/themes/calendar.base.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"calendar.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/calendar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8PvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host(igc-calendar) {\n --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > * {\n font-family: var(--ig-font-family);\n}\n:host(igc-calendar) igc-days-view::part(date),\n:host(igc-calendar) igc-days-view::part(week-number),\n:host(igc-calendar) igc-days-view::part(label),\n:host(igc-calendar) igc-days-view::part(days-row) {\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(week-number-inner),\n:host(igc-calendar) igc-days-view::part(date-inner) {\n width: calc(var(--size) - 0.125rem);\n min-width: calc(var(--size) - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar) igc-days-view::part(label) {\n min-width: var(--size);\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-months-view {\n grid-template-rows: repeat(4, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-months-view::part(month-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-years-view {\n grid-template-rows: repeat(5, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-years-view::part(year-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n\n:host(igc-calendar[size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host(igc-calendar[size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host(igc-calendar[size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button] {\n -webkit-margin-start: 1.5rem;\n margin-inline-start: 1.5rem;\n}\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family);\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family);\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}`;\n"]}
1
+ {"version":3,"file":"calendar.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/calendar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2PvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host(igc-calendar) {\n --size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > * {\n font-family: var(--ig-font-family);\n}\n:host(igc-calendar) igc-days-view::part(date),\n:host(igc-calendar) igc-days-view::part(week-number),\n:host(igc-calendar) igc-days-view::part(label),\n:host(igc-calendar) igc-days-view::part(days-row) {\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(week-number-inner),\n:host(igc-calendar) igc-days-view::part(date-inner) {\n width: calc(var(--size) - 0.125rem);\n min-width: calc(var(--size) - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar) igc-days-view::part(label) {\n min-width: var(--size);\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-months-view {\n grid-template-rows: repeat(4, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-months-view::part(month-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-years-view {\n grid-template-rows: repeat(5, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-years-view::part(year-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n\n:host(igc-calendar[size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host(igc-calendar[size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host(igc-calendar[size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n gap: 1.5rem;\n}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family, var(--ig-font-family));\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family, var(--ig-font-family));\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}`;\n"]}
package/components/calendar/themes/fluent/calendar.fluent.css.js CHANGED
@@ -34,7 +34,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
34
34
  }
35
35
 
36
36
  :host(igc-calendar) {
37
- --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);
37
+ --size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));
38
38
  display: -webkit-box;
39
39
  display: -ms-flexbox;
40
40
  display: flex;
@@ -147,10 +147,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
147
147
  outline: none;
148
148
  }
149
149
 
150
- [part~=navigation-button] {
151
- -webkit-margin-start: 1.5rem;
152
- margin-inline-start: 1.5rem;
153
- }
154
150
  [part~=navigation-button][part~=vertical] {
155
151
  -webkit-transform: rotate(90deg);
156
152
  -ms-transform: rotate(90deg);
@@ -164,6 +160,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
164
160
  -webkit-box-align: center;
165
161
  -ms-flex-align: center;
166
162
  align-items: center;
163
+ gap: 1.5rem;
167
164
  }
168
165
 
169
166
  :host(igc-calendar[header-orientation=vertical]) {
@@ -213,7 +210,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
213
210
  }
214
211
 
215
212
  [part=header-date] {
216
- font-family: var(--ig-h4-font-family);
213
+ font-family: var(--ig-h4-font-family, var(--ig-font-family));
217
214
  font-size: var(--ig-h4-font-size);
218
215
  font-weight: var(--ig-h4-font-weight);
219
216
  font-style: var(--ig-h4-font-style);
@@ -229,7 +226,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
229
226
  }
230
227
 
231
228
  [part=header-title] {
232
- font-family: var(--ig-overline-font-family);
229
+ font-family: var(--ig-overline-font-family, var(--ig-font-family));
233
230
  font-size: var(--ig-overline-font-size);
234
231
  font-weight: var(--ig-overline-font-weight);
235
232
  font-style: var(--ig-overline-font-style);
@@ -255,15 +252,45 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
255
252
  appearance: none;
256
253
  }
257
254
 
258
- :host(igc-calendar[size=large]) igc-days-view::part(date-inner),
259
- :host(igc-calendar[size=large]) igc-months-view::part(month-inner),
260
- :host(igc-calendar[size=large]) igc-years-view::part(year-inner),
261
- :host(igc-calendar[size=medium]) igc-days-view::part(date-inner),
262
- :host(igc-calendar[size=medium]) igc-months-view::part(month-inner),
263
- :host(igc-calendar[size=medium]) igc-years-view::part(year-inner),
264
- :host(igc-calendar[size=small]) igc-days-view::part(date-inner),
265
- :host(igc-calendar[size=small]) igc-months-view::part(month-inner),
266
- :host(igc-calendar[size=small]) igc-years-view::part(year-inner) {
255
+ :host([size=large]) igc-days-view::part(date-inner),
256
+ :host([size=large]) igc-months-view::part(month-inner),
257
+ :host([size=large]) igc-years-view::part(year-inner),
258
+ :host([size=medium]) igc-days-view::part(date-inner),
259
+ :host([size=medium]) igc-months-view::part(month-inner),
260
+ :host([size=medium]) igc-years-view::part(year-inner),
261
+ :host([size=small]) igc-days-view::part(date-inner),
262
+ :host([size=small]) igc-months-view::part(month-inner),
263
+ :host([size=small]) igc-years-view::part(year-inner) {
267
264
  border-radius: 0;
265
+ }
266
+
267
+ [part=header] {
268
+ background: var(--header-bg, hsla(var(--ig-primary-500), var(--ig-primary-a)));
269
+ color: var(--header-color, var(--ig-primary-600-contrast));
270
+ }
271
+
272
+ [part~=navigation-buttons] {
273
+ gap: 0.5rem;
274
+ }
275
+
276
+ [part~=navigation-button][part~=vertical] {
277
+ -webkit-transform: none;
278
+ -ms-transform: none;
279
+ transform: none;
280
+ }
281
+
282
+ [part=months-navigation],
283
+ [part=years-navigation],
284
+ [part=years-range] {
285
+ font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
286
+ font-size: var(--ig-subtitle-2-font-size);
287
+ font-weight: var(--ig-subtitle-2-font-weight);
288
+ font-style: var(--ig-subtitle-2-font-style);
289
+ line-height: var(--ig-subtitle-2-line-height);
290
+ letter-spacing: var(--ig-subtitle-2-letter-spacing);
291
+ text-transform: var(--ig-subtitle-2-text-transform);
292
+ margin-top: var(--ig-subtitle-2-margin-top);
293
+ margin-bottom: var(--ig-subtitle-2-margin-bottom);
294
+ color: hsla(var(--ig-gray-900), var(--ig-gray-a));
268
295
  }`;
269
296
  //# sourceMappingURL=calendar.fluent.css.js.map
package/components/calendar/themes/fluent/calendar.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"calendar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/calendar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0QvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host(igc-calendar) {\n --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > * {\n font-family: var(--ig-font-family);\n}\n:host(igc-calendar) igc-days-view::part(date),\n:host(igc-calendar) igc-days-view::part(week-number),\n:host(igc-calendar) igc-days-view::part(label),\n:host(igc-calendar) igc-days-view::part(days-row) {\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(week-number-inner),\n:host(igc-calendar) igc-days-view::part(date-inner) {\n width: calc(var(--size) - 0.125rem);\n min-width: calc(var(--size) - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar) igc-days-view::part(label) {\n min-width: var(--size);\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-months-view {\n grid-template-rows: repeat(4, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-months-view::part(month-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-years-view {\n grid-template-rows: repeat(5, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-years-view::part(year-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n\n:host(igc-calendar[size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host(igc-calendar[size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host(igc-calendar[size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button] {\n -webkit-margin-start: 1.5rem;\n margin-inline-start: 1.5rem;\n}\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family);\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family);\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=large]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=large]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=medium]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=medium]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=small]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {\n border-radius: 0;\n}`;\n"]}
1
+ {"version":3,"file":"calendar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/calendar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqSvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host(igc-calendar) {\n --size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > * {\n font-family: var(--ig-font-family);\n}\n:host(igc-calendar) igc-days-view::part(date),\n:host(igc-calendar) igc-days-view::part(week-number),\n:host(igc-calendar) igc-days-view::part(label),\n:host(igc-calendar) igc-days-view::part(days-row) {\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(week-number-inner),\n:host(igc-calendar) igc-days-view::part(date-inner) {\n width: calc(var(--size) - 0.125rem);\n min-width: calc(var(--size) - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar) igc-days-view::part(label) {\n min-width: var(--size);\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-months-view {\n grid-template-rows: repeat(4, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-months-view::part(month-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-years-view {\n grid-template-rows: repeat(5, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-years-view::part(year-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n\n:host(igc-calendar[size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host(igc-calendar[size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host(igc-calendar[size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n gap: 1.5rem;\n}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family, var(--ig-font-family));\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family, var(--ig-font-family));\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n:host([size=large]) igc-days-view::part(date-inner),\n:host([size=large]) igc-months-view::part(month-inner),\n:host([size=large]) igc-years-view::part(year-inner),\n:host([size=medium]) igc-days-view::part(date-inner),\n:host([size=medium]) igc-months-view::part(month-inner),\n:host([size=medium]) igc-years-view::part(year-inner),\n:host([size=small]) igc-days-view::part(date-inner),\n:host([size=small]) igc-months-view::part(month-inner),\n:host([size=small]) igc-years-view::part(year-inner) {\n border-radius: 0;\n}\n\n[part=header] {\n background: var(--header-bg, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n color: var(--header-color, var(--ig-primary-600-contrast));\n}\n\n[part~=navigation-buttons] {\n gap: 0.5rem;\n}\n\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part=years-range] {\n font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}`;\n"]}
package/components/calendar/themes/fluent/days-view.fluent.css.js CHANGED
@@ -3,12 +3,17 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
3
3
  [part~=date-inner]:focus, [part~=date-inner]:hover {
4
4
  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
5
5
  border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
6
+ color: var(--date-color-hover, var(--ig-gray-300-contrast));
6
7
  }
7
8
 
8
- [part~=date-inner][part~=selected][part~=single]:focus, [part~=date-inner][part~=selected][part~=single]:hover {
9
+ [part~=date-inner][part~=weekend]:focus, [part~=date-inner][part~=weekend]:hover,
10
+ [part~=date-inner][part~=inactive]:focus,
11
+ [part~=date-inner][part~=inactive]:hover,
12
+ [part~=date-inner][part~=selected][part~=single]:focus,
13
+ [part~=date-inner][part~=selected][part~=single]:hover {
9
14
  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
10
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
11
- color: var(--ig-gray-300-contrast);
15
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
16
+ color: var(--date-color-hover, var(--ig-gray-300-contrast));
12
17
  }
13
18
 
14
19
  [part~=current][part~=date-inner][part~=current],
@@ -18,7 +23,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
18
23
  box-shadow: none;
19
24
  position: relative;
20
25
  overflow: hidden;
21
- color: var(--ig-secondary-600-contrast);
26
+ color: var(--date-current-color, var(--ig-secondary-700-contrast));
22
27
  }
23
28
  [part~=current][part~=date-inner][part~=current]::after,
24
29
  [part~=current][part~=date-inner]::after,
@@ -38,7 +43,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
38
43
  [part~=current][part~=date-inner]:hover,
39
44
  [part~=current][part~=single][part~=date-inner]:focus,
40
45
  [part~=current][part~=single][part~=date-inner]:hover {
41
- color: var(--ig-secondary-600-contrast);
46
+ color: var(--date-current-color, var(--ig-secondary-700-contrast));
42
47
  }
43
48
  [part~=current][part~=date-inner][part~=current]:focus::after, [part~=current][part~=date-inner][part~=current]:hover::after,
44
49
  [part~=current][part~=date-inner]:focus::after,
@@ -48,22 +53,23 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
48
53
  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
49
54
  }
50
55
 
51
- [part~=selected][part~=date-inner][part~=single] {
52
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
56
+ [part~=selected][part~=date-inner][part~=single],
57
+ [part~=selected][part~=date-inner][part~=single][part~=weekend] {
58
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
53
59
  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
54
60
  color: var(--ig-gray-200-contrast);
55
61
  border-radius: 0;
56
62
  }
57
63
 
58
64
  [part~=date-inner][part~=selected][part~=current][part~=single] {
59
- color: var(--ig-secondary-600-contrast);
65
+ color: var(--date-current-color, var(--ig-secondary-700-contrast));
60
66
  }
61
67
 
62
68
  [part~=week-number-inner] {
63
- border-inline-end-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
69
+ border-inline-end-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
64
70
  }
65
71
  [part~=week-number-inner]::after {
66
- border-inline-end-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
72
+ border-inline-end-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
67
73
  }
68
74
 
69
75
  [part="week-number-inner last"],
@@ -74,16 +80,16 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
74
80
  [part~=date-inner][part~=selected][part~=range][part~=first],
75
81
  [part~=date-inner][part~=selected][part~=range][part~=last],
76
82
  [part~=date-inner][part~=selected]:not([part~=range]) {
77
- border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
78
- border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
79
- border-inline-start-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
83
+ border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
84
+ border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
85
+ border-inline-start-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
80
86
  }
81
87
  [part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,
82
88
  [part~=date-inner][part~=selected][part~=range][part~=last]:hover,
83
89
  [part~=date-inner][part~=selected][part~=range][part~=last]:focus,
84
90
  [part~=date-inner][part~=selected]:not([part~=range]):hover,
85
91
  [part~=date-inner][part~=selected]:not([part~=range]):focus {
86
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
92
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
87
93
  }
88
94
  [part~=date-inner][part~=selected][part~=range][part~=first]:hover,
89
95
  [part~=date-inner][part~=selected][part~=range][part~=last]:hover,
@@ -108,12 +114,16 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
108
114
  border-inline-start: 0;
109
115
  }
110
116
 
117
+ [part~=date-inner][part~=selected][part~=range][part~=weekend],
118
+ [part~=date-inner][part~=selected][part~=range][part~=inactive] {
119
+ color: var(--ig-gray-200-contrast);
120
+ }
111
121
  [part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,
112
122
  [part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,
113
123
  [part~=date-inner][part~=selected][part~=range][part~=inactive]:focus {
114
124
  color: var(--ig-gray-300-contrast);
115
125
  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
116
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
126
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
117
127
  }
118
128
 
119
129
  [part~=date-inner][part~=last][part~=range] {
@@ -126,12 +136,14 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
126
136
  color: var(--ig-gray-200-contrast);
127
137
  }
128
138
  [part~=date-inner][part~=selected][part~=range]:hover {
139
+ color: var(--date-color-hover, var(--ig-gray-300-contrast));
129
140
  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
130
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
141
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
131
142
  }
132
143
  [part~=date-inner][part~=selected][part~=range]:focus {
144
+ color: var(--date-color-hover, var(--ig-gray-300-contrast));
133
145
  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
134
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
146
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
135
147
  }
136
148
 
137
149
  [part~=date-inner][part~=selected][part~=range][part~=preview]:focus {
@@ -141,8 +153,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
141
153
 
142
154
  [part~=date][part~=selected][part~=range] {
143
155
  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
144
- border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
145
- border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
156
+ border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
157
+ border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
146
158
  }
147
159
 
148
160
  [part~=date][part~=first][part~=selected][part~=range],
@@ -153,17 +165,17 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
153
165
  [part~=date][part~=first][part~=selected][part~=range]::after,
154
166
  [part~=date][part~=last][part~=selected][part~=range]::after {
155
167
  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
156
- border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
157
- border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
168
+ border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
169
+ border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
158
170
  }
159
171
  [part~=date][part~=first][part~=selected][part~=range]::before,
160
172
  [part~=date][part~=last][part~=selected][part~=range]::before {
161
173
  content: "";
162
174
  position: absolute;
163
175
  top: -0.0625rem;
164
- width: 50%;
176
+ width: var(--size);
165
177
  height: 100%;
166
- border: 0.0625rem solid hsla(var(--ig-gray-500), var(--ig-gray-a));
178
+ border: 0.0625rem solid hsla(var(--ig-gray-700), var(--ig-gray-a));
167
179
  z-index: 3;
168
180
  pointer-events: none;
169
181
  }
@@ -208,7 +220,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
208
220
  [part~=date-inner][part~=first][part~=last][part~=selected][part~=current],
209
221
  [part~=date-inner][part~=first][part~=selected][part~=current][part~=range],
210
222
  [part~=date-inner][part~=last][part~=selected][part~=current][part~=range] {
211
- color: var(--ig-secondary-600-contrast) !important;
223
+ color: var(--date-current-color, var(--ig-secondary-700-contrast)) !important;
212
224
  }
213
225
  [part~=date-inner][part~=selected][part~=current][part~=range]:focus, [part~=date-inner][part~=selected][part~=current][part~=range]:hover,
214
226
  [part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range]:focus,
@@ -219,7 +231,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
219
231
  [part~=date-inner][part~=first][part~=selected][part~=current][part~=range]:hover,
220
232
  [part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:focus,
221
233
  [part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:hover {
222
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
234
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
223
235
  }
224
236
 
225
237
  [part~=date-inner][part~=first][part~=range][part~=preview],
@@ -303,7 +315,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
303
315
  }
304
316
 
305
317
  [part~=date-inner][part~=first][part~=last][part~=selected] {
306
- border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
318
+ border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
307
319
  }
308
320
 
309
321
  [part~=date-inner][part~=first][part~=last][part~=selected],
@@ -320,7 +332,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
320
332
  }
321
333
 
322
334
  [part~=date-inner][part~=first][part~=last][part~=selected][part~=current] {
323
- color: var(--ig-secondary-600-contrast) !important;
335
+ color: var(--date-current-color, var(--ig-secondary-700-contrast)) !important;
324
336
  }
325
337
 
326
338
  [part~=date-inner][part~=first][part~=selected][part~=current][part~=range][part~=preview]:focus,
package/components/calendar/themes/fluent/days-view.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"days-view.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/days-view.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=date-inner]:focus, [part~=date-inner]:hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=selected][part~=single]:focus, [part~=date-inner][part~=selected][part~=single]:hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n color: var(--ig-gray-300-contrast);\n}\n\n[part~=current][part~=date-inner][part~=current],\n[part~=current][part~=date-inner],\n[part~=current][part~=single][part~=date-inner] {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n overflow: hidden;\n color: var(--ig-secondary-600-contrast);\n}\n[part~=current][part~=date-inner][part~=current]::after,\n[part~=current][part~=date-inner]::after,\n[part~=current][part~=single][part~=date-inner]::after {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n content: \"\";\n position: absolute;\n top: 0.0625rem;\n inset-inline-start: 0.0625rem;\n width: calc(100% - 0.125rem);\n height: calc(100% - 0.125rem);\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n z-index: -1;\n}\n[part~=current][part~=date-inner][part~=current]:focus, [part~=current][part~=date-inner][part~=current]:hover,\n[part~=current][part~=date-inner]:focus,\n[part~=current][part~=date-inner]:hover,\n[part~=current][part~=single][part~=date-inner]:focus,\n[part~=current][part~=single][part~=date-inner]:hover {\n color: var(--ig-secondary-600-contrast);\n}\n[part~=current][part~=date-inner][part~=current]:focus::after, [part~=current][part~=date-inner][part~=current]:hover::after,\n[part~=current][part~=date-inner]:focus::after,\n[part~=current][part~=date-inner]:hover::after,\n[part~=current][part~=single][part~=date-inner]:focus::after,\n[part~=current][part~=single][part~=date-inner]:hover::after {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=selected][part~=date-inner][part~=single] {\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n color: var(--ig-gray-200-contrast);\n border-radius: 0;\n}\n\n[part~=date-inner][part~=selected][part~=current][part~=single] {\n color: var(--ig-secondary-600-contrast);\n}\n\n[part~=week-number-inner] {\n border-inline-end-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part~=week-number-inner]::after {\n border-inline-end-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part=\"week-number-inner last\"],\n[part=\"week-number-inner first\"] {\n border-radius: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected]:not([part~=range]) {\n border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-inline-start-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):hover,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected]:not([part~=range]):hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=last] {\n border-inline-start-color: transparent;\n -webkit-border-end: 0;\n border-inline-end: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first] {\n border-inline-end-color: transparent;\n -webkit-border-start: 0;\n border-inline-start: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus {\n color: var(--ig-gray-300-contrast);\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=last][part~=range] {\n border-color: transparent;\n}\n\n[part~=date-inner][part~=selected][part~=range] {\n border-top: 0;\n border-bottom: 0;\n color: var(--ig-gray-200-contrast);\n}\n[part~=date-inner][part~=selected][part~=range]:hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=preview]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date][part~=selected][part~=range] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date][part~=first][part~=selected][part~=range],\n[part~=date][part~=last][part~=selected][part~=range] {\n background: transparent;\n border-color: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range]::after,\n[part~=date][part~=last][part~=selected][part~=range]::after {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-top-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part~=date][part~=first][part~=selected][part~=range]::before,\n[part~=date][part~=last][part~=selected][part~=range]::before {\n content: \"\";\n position: absolute;\n top: -0.0625rem;\n width: 50%;\n height: 100%;\n border: 0.0625rem solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n z-index: 3;\n pointer-events: none;\n}\n\n[part~=date][part~=first][part~=selected][part~=range]::before {\n border-inline-end-color: transparent;\n}\n\n[part~=date][part~=last][part~=selected][part~=range]::before {\n border-inline-start-color: transparent;\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date first selected range)::before {\n margin: 0;\n inset-inline-start: calc(50% - 1rem);\n}\n:host(igc-calendar[size=large]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 1rem);\n}\n\n:host(igc-calendar[size=medium]) igc-days-view::part(date first selected range)::before {\n inset-inline-start: calc(50% - 0.875rem);\n}\n:host(igc-calendar[size=medium]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 0.875rem);\n}\n\n:host(igc-calendar[size=small]) igc-days-view::part(date first selected range)::before {\n inset-inline-start: calc(50% - 0.75rem);\n}\n:host(igc-calendar[size=small]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 0.75rem);\n}\n\n[part~=date][part~=first][part~=last][part~=selected][part~=range]::before {\n border-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n}\n\n[part~=date-inner][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current],\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range] {\n color: var(--ig-secondary-600-contrast) !important;\n}\n[part~=date-inner][part~=selected][part~=current][part~=range]:focus, [part~=date-inner][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current]:focus,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current]:hover,\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:hover {\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=first][part~=range][part~=preview],\n[part~=date-inner][part~=first][part~=selected][part~=range][part~=preview] {\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n background: transparent;\n}\n\n[part~=date-inner][part~=last][part~=range][part~=preview],\n[part~=date-inner][part~=last][part~=selected][part~=range][part~=preview] {\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: transparent;\n background: transparent;\n}\n\n[part~=date][part~=range][part~=preview] {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=date][part~=range][part~=preview]::after {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n background: transparent;\n}\n\n[part~=date][part~=range][part~=preview][part~=first],\n[part~=date][part~=range][part~=preview][part~=last] {\n border-top-color: transparent;\n border-bottom-color: transparent;\n}\n[part~=date][part~=range][part~=preview][part~=first]::after,\n[part~=date][part~=range][part~=preview][part~=last]::after {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date][part~=first][part~=selected][part~=range][part~=preview],\n[part~=date][part~=last][part~=selected][part~=range][part~=preview] {\n background: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::before,\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::before {\n border-block-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-block-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::after,\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::after {\n border-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n background: transparent;\n}\n\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::before {\n border-inline-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::after {\n -webkit-border-end: 0;\n border-inline-end: 0;\n}\n\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::before {\n border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: transparent;\n}\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::after {\n -webkit-border-start: 0;\n border-inline-start: 0;\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected] {\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected],\n[part~=date-inner][part~=first][part~=selected],\n[part~=date-inner][part~=last][part~=selected] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a)) !important;\n color: var(--ig-gray-200-contrast) !important;\n}\n[part~=date-inner][part~=first][part~=last][part~=selected]:focus,\n[part~=date-inner][part~=first][part~=selected]:focus,\n[part~=date-inner][part~=last][part~=selected]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a)) !important;\n color: var(--ig-gray-200-contrast) !important;\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current] {\n color: var(--ig-secondary-600-contrast) !important;\n}\n\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range][part~=preview]:focus,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range][part~=preview]:focus {\n border-color: transparent;\n}`;\n"]}
1
+ {"version":3,"file":"days-view.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/days-view.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmVvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=date-inner]:focus, [part~=date-inner]:hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n color: var(--date-color-hover, var(--ig-gray-300-contrast));\n}\n\n[part~=date-inner][part~=weekend]:focus, [part~=date-inner][part~=weekend]:hover,\n[part~=date-inner][part~=inactive]:focus,\n[part~=date-inner][part~=inactive]:hover,\n[part~=date-inner][part~=selected][part~=single]:focus,\n[part~=date-inner][part~=selected][part~=single]:hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n color: var(--date-color-hover, var(--ig-gray-300-contrast));\n}\n\n[part~=current][part~=date-inner][part~=current],\n[part~=current][part~=date-inner],\n[part~=current][part~=single][part~=date-inner] {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n overflow: hidden;\n color: var(--date-current-color, var(--ig-secondary-700-contrast));\n}\n[part~=current][part~=date-inner][part~=current]::after,\n[part~=current][part~=date-inner]::after,\n[part~=current][part~=single][part~=date-inner]::after {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n content: \"\";\n position: absolute;\n top: 0.0625rem;\n inset-inline-start: 0.0625rem;\n width: calc(100% - 0.125rem);\n height: calc(100% - 0.125rem);\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n z-index: -1;\n}\n[part~=current][part~=date-inner][part~=current]:focus, [part~=current][part~=date-inner][part~=current]:hover,\n[part~=current][part~=date-inner]:focus,\n[part~=current][part~=date-inner]:hover,\n[part~=current][part~=single][part~=date-inner]:focus,\n[part~=current][part~=single][part~=date-inner]:hover {\n color: var(--date-current-color, var(--ig-secondary-700-contrast));\n}\n[part~=current][part~=date-inner][part~=current]:focus::after, [part~=current][part~=date-inner][part~=current]:hover::after,\n[part~=current][part~=date-inner]:focus::after,\n[part~=current][part~=date-inner]:hover::after,\n[part~=current][part~=single][part~=date-inner]:focus::after,\n[part~=current][part~=single][part~=date-inner]:hover::after {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=selected][part~=date-inner][part~=single],\n[part~=selected][part~=date-inner][part~=single][part~=weekend] {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n color: var(--ig-gray-200-contrast);\n border-radius: 0;\n}\n\n[part~=date-inner][part~=selected][part~=current][part~=single] {\n color: var(--date-current-color, var(--ig-secondary-700-contrast));\n}\n\n[part~=week-number-inner] {\n border-inline-end-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part~=week-number-inner]::after {\n border-inline-end-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part=\"week-number-inner last\"],\n[part=\"week-number-inner first\"] {\n border-radius: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected]:not([part~=range]) {\n border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n border-inline-start-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):hover,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected]:not([part~=range]):hover {\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=last] {\n border-inline-start-color: transparent;\n -webkit-border-end: 0;\n border-inline-end: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first] {\n border-inline-end-color: transparent;\n -webkit-border-start: 0;\n border-inline-start: 0;\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=weekend],\n[part~=date-inner][part~=selected][part~=range][part~=inactive] {\n color: var(--ig-gray-200-contrast);\n}\n[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus {\n color: var(--ig-gray-300-contrast);\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=last][part~=range] {\n border-color: transparent;\n}\n\n[part~=date-inner][part~=selected][part~=range] {\n border-top: 0;\n border-bottom: 0;\n color: var(--ig-gray-200-contrast);\n}\n[part~=date-inner][part~=selected][part~=range]:hover {\n color: var(--date-color-hover, var(--ig-gray-300-contrast));\n background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part~=date-inner][part~=selected][part~=range]:focus {\n color: var(--date-color-hover, var(--ig-gray-300-contrast));\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=preview]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date][part~=selected][part~=range] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=date][part~=first][part~=selected][part~=range],\n[part~=date][part~=last][part~=selected][part~=range] {\n background: transparent;\n border-color: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range]::after,\n[part~=date][part~=last][part~=selected][part~=range]::after {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-top-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part~=date][part~=first][part~=selected][part~=range]::before,\n[part~=date][part~=last][part~=selected][part~=range]::before {\n content: \"\";\n position: absolute;\n top: -0.0625rem;\n width: var(--size);\n height: 100%;\n border: 0.0625rem solid hsla(var(--ig-gray-700), var(--ig-gray-a));\n z-index: 3;\n pointer-events: none;\n}\n\n[part~=date][part~=first][part~=selected][part~=range]::before {\n border-inline-end-color: transparent;\n}\n\n[part~=date][part~=last][part~=selected][part~=range]::before {\n border-inline-start-color: transparent;\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date first selected range)::before {\n margin: 0;\n inset-inline-start: calc(50% - 1rem);\n}\n:host(igc-calendar[size=large]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 1rem);\n}\n\n:host(igc-calendar[size=medium]) igc-days-view::part(date first selected range)::before {\n inset-inline-start: calc(50% - 0.875rem);\n}\n:host(igc-calendar[size=medium]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 0.875rem);\n}\n\n:host(igc-calendar[size=small]) igc-days-view::part(date first selected range)::before {\n inset-inline-start: calc(50% - 0.75rem);\n}\n:host(igc-calendar[size=small]) igc-days-view::part(date last selected range)::before {\n inset-inline-end: calc(50% - 0.75rem);\n}\n\n[part~=date][part~=first][part~=last][part~=selected][part~=range]::before {\n border-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n}\n\n[part~=date-inner][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current],\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range],\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range] {\n color: var(--date-current-color, var(--ig-secondary-700-contrast)) !important;\n}\n[part~=date-inner][part~=selected][part~=current][part~=range]:focus, [part~=date-inner][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current]:focus,\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current]:hover,\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range]:hover,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:focus,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range]:hover {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=first][part~=range][part~=preview],\n[part~=date-inner][part~=first][part~=selected][part~=range][part~=preview] {\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n background: transparent;\n}\n\n[part~=date-inner][part~=last][part~=range][part~=preview],\n[part~=date-inner][part~=last][part~=selected][part~=range][part~=preview] {\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: transparent;\n background: transparent;\n}\n\n[part~=date][part~=range][part~=preview] {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=date][part~=range][part~=preview]::after {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n background: transparent;\n}\n\n[part~=date][part~=range][part~=preview][part~=first],\n[part~=date][part~=range][part~=preview][part~=last] {\n border-top-color: transparent;\n border-bottom-color: transparent;\n}\n[part~=date][part~=range][part~=preview][part~=first]::after,\n[part~=date][part~=range][part~=preview][part~=last]::after {\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date][part~=first][part~=selected][part~=range][part~=preview],\n[part~=date][part~=last][part~=selected][part~=range][part~=preview] {\n background: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::before,\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::before {\n border-block-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-block-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::after,\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::after {\n border-style: solid;\n border-top-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n background: transparent;\n}\n\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::before {\n border-inline-start-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-end-color: transparent;\n}\n[part~=date][part~=first][part~=selected][part~=range][part~=preview]::after {\n -webkit-border-end: 0;\n border-inline-end: 0;\n}\n\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::before {\n border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-inline-start-color: transparent;\n}\n[part~=date][part~=last][part~=selected][part~=range][part~=preview]::after {\n -webkit-border-start: 0;\n border-inline-start: 0;\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected] {\n border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected],\n[part~=date-inner][part~=first][part~=selected],\n[part~=date-inner][part~=last][part~=selected] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a)) !important;\n color: var(--ig-gray-200-contrast) !important;\n}\n[part~=date-inner][part~=first][part~=last][part~=selected]:focus,\n[part~=date-inner][part~=first][part~=selected]:focus,\n[part~=date-inner][part~=last][part~=selected]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a)) !important;\n color: var(--ig-gray-200-contrast) !important;\n}\n\n[part~=date-inner][part~=first][part~=last][part~=selected][part~=current] {\n color: var(--date-current-color, var(--ig-secondary-700-contrast)) !important;\n}\n\n[part~=date-inner][part~=first][part~=selected][part~=current][part~=range][part~=preview]:focus,\n[part~=date-inner][part~=last][part~=selected][part~=current][part~=range][part~=preview]:focus {\n border-color: transparent;\n}`;\n"]}
package/components/calendar/themes/fluent/year-month-view.fluent.css.js CHANGED
@@ -98,27 +98,33 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
98
98
  [part~=year-inner][part~=current] {
99
99
  -webkit-box-shadow: none;
100
100
  box-shadow: none;
101
- background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
102
- color: var(--ig-secondary-600-contrast);
101
+ background: var(--current-month-year-bg, hsla(var(--ig-gray-200), var(--ig-gray-a)));
102
+ color: var(--current-month-year-color, var(--ig-gray-200-contrast));
103
103
  }
104
104
  [part~=month-inner][part~=current]:hover, [part~=month-inner][part~=current]:focus,
105
105
  [part~=year-inner][part~=current]:hover,
106
106
  [part~=year-inner][part~=current]:focus {
107
- background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
108
- color: var(--ig-secondary-600-contrast);
107
+ background: var(--current-month-year-bg-hover, hsla(var(--ig-gray-300), var(--ig-gray-a)));
108
+ color: var(--current-month-year-color-hover, var(--ig-gray-300-contrast));
109
109
  }
110
110
 
111
+ [part~=month-inner][part~=selected],
112
+ [part~=year-inner][part~=selected],
111
113
  [part~=month-inner][part~=selected][part~=current],
112
114
  [part~=year-inner][part~=selected][part~=current] {
113
115
  -webkit-box-shadow: none;
114
116
  box-shadow: none;
115
- background: hsla(var(--ig-gray-200), var(--ig-gray-a));
116
- color: var(--ig-gray-200-contrast);
117
+ background: var(--selected-month-year-bg, hsla(var(--ig-primary-50), var(--ig-primary-a)));
118
+ color: var(--selected-month-year-color, var(--ig-primary-50-contrast));
117
119
  }
118
- [part~=month-inner][part~=selected][part~=current]:hover, [part~=month-inner][part~=selected][part~=current]:focus,
120
+ [part~=month-inner][part~=selected]:hover, [part~=month-inner][part~=selected]:focus,
121
+ [part~=year-inner][part~=selected]:hover,
122
+ [part~=year-inner][part~=selected]:focus,
123
+ [part~=month-inner][part~=selected][part~=current]:hover,
124
+ [part~=month-inner][part~=selected][part~=current]:focus,
119
125
  [part~=year-inner][part~=selected][part~=current]:hover,
120
126
  [part~=year-inner][part~=selected][part~=current]:focus {
121
- background: hsla(var(--ig-gray-200), var(--ig-gray-a));
122
- color: var(--ig-gray-200-contrast);
127
+ background: var(--selected-month-year-bg-hover, hsla(var(--ig-primary-100), var(--ig-primary-a)));
128
+ color: var(--selected-month-year-color-hover, var(--ig-primary-100-contrast));
123
129
  }`;
124
130
  //# sourceMappingURL=year-month-view.fluent.css.js.map
package/components/calendar/themes/fluent/year-month-view.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"year-month-view.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/year-month-view.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 18.125rem;\n outline: none;\n padding: 0 0.75rem 1rem 0.75rem;\n overflow: hidden;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n gap: 0.25rem;\n}\n\n[part=months-row],\n[part=years-row] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n[part~=month],\n[part~=year] {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n[part~=month],\n[part~=year],\n[part~=month-inner],\n[part~=year-inner] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n[part~=month-inner],\n[part~=year-inner] {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n padding: 0 0.75rem;\n}\n[part~=month-inner]:hover, [part~=month-inner]:focus,\n[part~=year-inner]:hover,\n[part~=year-inner]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=month-inner]:hover,\n[part~=year-inner]:hover {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected],\n[part~=year-inner][part~=selected] {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:hover,\n[part~=year-inner][part~=selected]:hover {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:focus,\n[part~=year-inner][part~=selected]:focus {\n outline: none;\n background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n color: var(--ig-secondary-700-contrast);\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=current]:hover, [part~=month-inner][part~=current]:focus,\n[part~=year-inner][part~=current]:hover,\n[part~=year-inner][part~=current]:focus {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n color: var(--ig-gray-200-contrast);\n}\n[part~=month-inner][part~=selected][part~=current]:hover, [part~=month-inner][part~=selected][part~=current]:focus,\n[part~=year-inner][part~=selected][part~=current]:hover,\n[part~=year-inner][part~=selected][part~=current]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n color: var(--ig-gray-200-contrast);\n}`;\n"]}
1
+ {"version":3,"file":"year-month-view.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/year-month-view.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+HvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 18.125rem;\n outline: none;\n padding: 0 0.75rem 1rem 0.75rem;\n overflow: hidden;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n gap: 0.25rem;\n}\n\n[part=months-row],\n[part=years-row] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n[part~=month],\n[part~=year] {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n[part~=month],\n[part~=year],\n[part~=month-inner],\n[part~=year-inner] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n[part~=month-inner],\n[part~=year-inner] {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n padding: 0 0.75rem;\n}\n[part~=month-inner]:hover, [part~=month-inner]:focus,\n[part~=year-inner]:hover,\n[part~=year-inner]:focus {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=month-inner]:hover,\n[part~=year-inner]:hover {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected],\n[part~=year-inner][part~=selected] {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:hover,\n[part~=year-inner][part~=selected]:hover {\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:focus,\n[part~=year-inner][part~=selected]:focus {\n outline: none;\n background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n color: var(--ig-secondary-700-contrast);\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: var(--current-month-year-bg, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n color: var(--current-month-year-color, var(--ig-gray-200-contrast));\n}\n[part~=month-inner][part~=current]:hover, [part~=month-inner][part~=current]:focus,\n[part~=year-inner][part~=current]:hover,\n[part~=year-inner][part~=current]:focus {\n background: var(--current-month-year-bg-hover, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n color: var(--current-month-year-color-hover, var(--ig-gray-300-contrast));\n}\n\n[part~=month-inner][part~=selected],\n[part~=year-inner][part~=selected],\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background: var(--selected-month-year-bg, hsla(var(--ig-primary-50), var(--ig-primary-a)));\n color: var(--selected-month-year-color, var(--ig-primary-50-contrast));\n}\n[part~=month-inner][part~=selected]:hover, [part~=month-inner][part~=selected]:focus,\n[part~=year-inner][part~=selected]:hover,\n[part~=year-inner][part~=selected]:focus,\n[part~=month-inner][part~=selected][part~=current]:hover,\n[part~=month-inner][part~=selected][part~=current]:focus,\n[part~=year-inner][part~=selected][part~=current]:hover,\n[part~=year-inner][part~=selected][part~=current]:focus {\n background: var(--selected-month-year-bg-hover, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n color: var(--selected-month-year-color-hover, var(--ig-primary-100-contrast));\n}`;\n"]}
package/components/card/themes/light/card.content.bootstrap.css.js CHANGED
@@ -44,7 +44,7 @@ export const styles = css `:host {
44
44
  }
45
45
 
46
46
  ::slotted(*) {
47
- font-family: var(--ig-body-2-font-family);
47
+ font-family: var(--ig-body-2-font-family, var(--ig-font-family));
48
48
  font-size: var(--ig-body-2-font-size);
49
49
  font-weight: var(--ig-body-2-font-weight);
50
50
  font-style: var(--ig-body-2-font-style);
@@ -57,7 +57,7 @@ export const styles = css `:host {
57
57
  }
58
58
 
59
59
  :host {
60
- font-family: var(--ig-body-1-font-family);
60
+ font-family: var(--ig-body-1-font-family, var(--ig-font-family));
61
61
  font-size: var(--ig-body-1-font-size);
62
62
  font-weight: var(--ig-body-1-font-weight);
63
63
  font-style: var(--ig-body-1-font-style);
@@ -70,7 +70,7 @@ export const styles = css `:host {
70
70
  }
71
71
 
72
72
  ::slotted(*) {
73
- font-family: var(--ig-body-1-font-family);
73
+ font-family: var(--ig-body-1-font-family, var(--ig-font-family));
74
74
  font-size: var(--ig-body-1-font-size);
75
75
  font-weight: var(--ig-body-1-font-weight);
76
76
  font-style: var(--ig-body-1-font-style);