@uzum-tech/ui 0.1.2 → 1.0.1

package/es/date-picker/src/styles/index.cssr.js

@@ -20,9 +20,7 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --u-calendar-title-font-weight
 // --u-calendar-title-grid-template-columns
 // --u-calendar-days-height
-// --u-calendar-days-divider-color
 // --u-calendar-days-font-size
-// --u-calendar-days-text-color
 // --u-calendar-divider-color
 // panel action
 // --u-panel-action-padding
@@ -103,8 +101,9 @@ export default c([cB('date-picker', `
  color .3s var(--u-bezier),
  background-color .3s var(--u-bezier);
  background: #0000;
+ font-weight: var(--u-item-font-weight);
  color: var(--u-calendar-item-text-color);
- `, [c('&:before', `
+ `, [c('&:after', `
  z-index: -1;
  content: "";
  display: block;
@@ -119,18 +118,18 @@ export default c([cB('date-picker', `
  background-color .3s var(--u-bezier);
  `), cNotM('disabled', [c('&:hover', `
  color: var(--u-calendar-item-text-color-hover);
- `, [c('&:before', `
+ `, [c('&:after', `
  background-color: var(--u-calendar-item-color-hover);
  `)]), cM('selected', `
  color: var(--u-calendar-item-text-color-active);
- `, [c('&:before', `
+ `, [c('&:after', `
  background-color: var(--u-calendar-item-color-active);
- `)]), c('&:active:before', `
+ `)]), c('&:active:after', `
  background-color: var(--u-calendar-item-color-active);
  `)]), cM('disabled', `
  color: var(--u-item-text-color-disabled);
  cursor: not-allowed;
- `, [cM('selected', [c('&::before', `
+ `, [cM('selected', [c('&::after', `
  background-color: var(--u-item-color-disabled);
  `)])])])]), cM('date', {
   gridTemplateAreas: `
@@ -182,7 +181,6 @@ export default c([cB('date-picker', `
  padding: var(--u-panel-header-padding);
  display: flex;
  justify-content: space-between;
- // border-bottom: 1px solid var(--u-panel-header-divider-color);
  `, [c('>', [c('*:not(:last-child)', {
   marginRight: '10px'
 }), c('*', {
@@ -190,7 +188,7 @@ export default c([cB('date-picker', `
   width: 0
 }), cB('time-picker', {
   zIndex: 1
-})]), c('+ .u-date-panel-calendar', {
+})]), c('~ .u-date-panel-calendar', {
   paddingTop: '16px'
 })]), cB('date-panel-month', {
   boxSizing: 'border-box',
@@ -199,7 +197,9 @@ export default c([cB('date-picker', `
   justifyContent: 'space-between',
   padding: 'var(--u-calendar-title-padding)',
   height: 'var(--u-calendar-title-height)'
-}, [cE('prev, next, fast-prev, fast-next', `
+}, [cE('icon', `
+ font-size: var(--u-arrow-size);
+ `), cE('prev, next, fast-prev, fast-next', `
  line-height: 0;
  cursor: pointer;
  width: var(--u-arrow-size);
@@ -263,11 +263,15 @@ export default c([cB('date-picker', `
  line-height: var(--u-item-height);
  text-align: center;
  font-size: var(--u-item-font-size);
+ font-weight: 500;
  border-radius: var(--u-item-border-radius);
  z-index: 0;
  cursor: pointer;
+ background-color: var(--u-item-color);
+ color: var(--u-item-text-color);
  transition:
  background-color .2s var(--u-bezier),
+ border-radius .2s var(--u-bezier),
  color .2s var(--u-bezier);
  `, [cE('trigger', `
  position: absolute;
@@ -275,60 +279,67 @@ export default c([cB('date-picker', `
  top: calc(var(--u-item-height) / 2 - var(--u-item-cell-height) / 2);
  width: var(--u-item-cell-width);
  height: var(--u-item-cell-height);
- `), cNotM('disabled', [cNotM('selected', [c('&:hover', {
-  backgroundColor: 'var(--u-item-color-hover)'
-})])]), cM('current', {
-  fontWeight: 700,
-  color: 'var(--u-item-current-color)'
-}), c('&::after', `
- content: "";
- z-index: -1;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- border-radius: inherit;
- transition: background-color .3s var(--u-bezier);
- `), cM('covered, start, end', [cNotM('excluded', [c('&::before', `
- content: "";
- z-index: -2;
- position: absolute;
- left: calc((var(--u-item-width) - var(--u-item-cell-width)) / 2);
- right: calc((var(--u-item-width) - var(--u-item-cell-width)) / 2);
- top: 0;
- bottom: 0;
+ `), cM('excluded', `
+ color: var(--u-item-text-color-excluded);
+ background-color: var(--u-item-color-excluded);
+ `), c('&:hover', `
+ color: var(--u-item-text-color-hover);
+ background-color: var(--u-item-color-hover);
+ `), c('&:active', `
+ color: var(--u-item-text-color-pressed);
+ background-color: var(--u-item-color-pressed);
+ `), cM('disabled', `
+ color: var(--u-item-text-color-disabled);
+ background-color: var(--u-item-color-disabled);
+ `), cM('current', `
+ font-weight: 700;
+ color: var(--u-item-text-color-current);
+ background-color: var(--u-item-color-current);
+ color: var(--u-item-text-color-current);
+ `, [c('&:hover', `
+ background-color: var(--u-item-color-current-hover);
+ color: var(--u-item-text-color-current-hover);
+ `), c('&:active', `
+ background-color: var(--u-item-color-current-pressed);
+ color: var(--u-item-text-color-current-pressed);
+ `), cM('disabled', `
+ background-color: var(--u-item-color-current-disabled);
+ color: var(--u-item-text-color-current-disabled);
+ `)]), cM('covered, start, end', `
+ color: var(--u-item-text-color-included);
  background-color: var(--u-item-color-included);
- `)])]), cM('selected', {
-  color: 'var(--u-item-text-color-active)'
-}, [c('&::after', {
-  backgroundColor: 'var(--u-item-color-active)'
-}), cM('start', [c('&::before', {
-  left: '50%'
-}), c('&::after', {
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0
-})]), cM('end', [c('&::before', {
-  right: '50%'
-}), c('&::after', {
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0
-})]), cE('sup', {
-  backgroundColor: 'var(--u-panel-color)'
-})]), cM('excluded', {
-  color: 'var(--u-item-text-color-disabled)'
-}, [cM('selected', [c('&::after', {
-  backgroundColor: 'transparent'
-})])]), cM('disabled', {
-  cursor: 'not-allowed',
-  color: 'var(--u-item-text-color-disabled)'
-}, [cM('covered', [c('&::before', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-})]), cM('selected', [c('&::before', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-}), c('&::after', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-})])])])]), cE('vertical-divider', `
+ `, [c('&:hover', `
+ background-color: var(--u-item-color-included-hover);
+ color: var(--u-item-text-color-included-hover);
+ `), c('&:active', `
+ background-color: var(--u-item-color-included-pressed);
+ color: var(--u-item-text-color-included-pressed);
+ `), cM('disabled', `
+ background-color: var(--u-item-color-included-disabled);
+ color: var(--u-item-text-color-included-disabled);
+ `)]), cM('covered', [cNotM('end, start', `
+ border-radius: 0;
+ `)]), cM('selected', `
+ color: var(--u-item-text-color-active);
+ background-color: var(--u-item-color-active);
+ `, [cNotM('end', [cM('start', `
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ `)]), cNotM('start', [cM('end', `
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ `)]), cE('sup', `
+ background-color: var(--u-panel-color);
+ `), c('&:hover', `
+ color: var(--u-item-text-color-active-hover);
+ background-color: var(--u-item-color-active-hover);
+ `), c('&:active', `
+ color: var(--u-item-text-color-active-pressed);
+ background-color: var(--u-item-color-active-pressed);
+ `), cM('disabled', `
+ background-color: var(--u-item-color-active-disabled);
+ color: var(--u-item-text-color-active-disabled);
+ `)])])]), cE('vertical-divider', `
  grid-area: divider;
  height: 100%;
  width: 1px;
@@ -359,6 +370,6 @@ export default c([cB('date-picker', `
   marginRight: '12px'
 })])])])]), c('[data-u-date].transition-disabled', {
   transition: 'none !important'
-}, [c('&::before, &::after', {
+}, [c('&::after', {
   transition: 'none !important'
 })])]);

package/es/date-picker/styles/_common.d.ts

@@ -13,7 +13,6 @@ declare const _default: {
     panelActionPadding: string;
     calendarTitlePadding: string;
     calendarTitleHeight: string;
-    arrowSize: string;
     panelHeaderPadding: string;
     calendarDaysHeight: string;
     calendarTitleGridTempateColumns: string;

package/es/date-picker/styles/_common.js

@@ -15,7 +15,6 @@ export default {
     panelActionPadding: '16px 24px 24px 16px',
     calendarTitlePadding: '0',
     calendarTitleHeight: '28px',
-    arrowSize: '14px',
     panelHeaderPadding: '8px 12px',
     calendarDaysHeight: '32px',
     calendarTitleGridTempateColumns: '28px 28px 1fr 28px 28px',

package/es/date-picker/styles/dark.js

@@ -1,4 +1,3 @@
-import { changeColor, composite } from 'seemly';
 import { inputDark } from '../../input/styles';
 import { commonDark } from '../../_styles/common';
 import { buttonDark } from '../../button/styles';
@@ -14,13 +13,6 @@ const datePickerDark = {
         TimePicker: timePickerDark,
         Scrollbar: scrollbarDark
     },
-    self(vars) {
-        const { popoverColor, hoverColor, primaryColor } = vars;
-        const commonSelf = self(vars);
-        commonSelf.itemColorDisabled = composite(popoverColor, hoverColor);
-        commonSelf.itemColorIncluded = changeColor(primaryColor, { alpha: 0.15 });
-        commonSelf.itemColorHover = composite(popoverColor, hoverColor);
-        return commonSelf;
-    }
+    self
 };
 export default datePickerDark;

package/es/date-picker/styles/light.d.ts

@@ -1,17 +1,46 @@
 import { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
-    itemFontSize: string;
-    calendarDaysFontSize: string;
-    calendarTitleFontSize: string;
+    itemColor: string;
+    itemColorHover: string;
+    itemColorPressed: string;
+    itemColorDisabled: string;
     itemTextColor: string;
+    itemTextColorHover: string;
+    itemTextColorPressed: string;
     itemTextColorDisabled: string;
+    itemColorActive: string;
+    itemColorActiveHover: string;
+    itemColorActivePressed: string;
+    itemColorActiveDisabled: string;
     itemTextColorActive: string;
+    itemTextColorActiveHover: string;
+    itemTextColorActivePressed: string;
+    itemTextColorActiveDisabled: string;
+    itemColorCurrent: string;
+    itemColorCurrentHover: string;
+    itemColorCurrentPressed: string;
+    itemColorCurrentDisabled: string;
     itemTextColorCurrent: string;
-    itemCurrentColor: string;
+    itemTextColorCurrentHover: string;
+    itemTextColorCurrentPressed: string;
+    itemTextColorCurrentDisabled: string;
     itemColorIncluded: string;
-    itemColorHover: string;
-    itemColorDisabled: string;
-    itemColorActive: string;
+    itemColorIncludedHover: string;
+    itemColorIncludedPressed: string;
+    itemColorIncludedDisabled: string;
+    itemTextColorIncluded: string;
+    itemTextColorIncludedHover: string;
+    itemTextColorIncludedPressed: string;
+    itemTextColorIncludedDisabled: string;
+    itemColorExcluded: string;
+    itemTextColorExcluded: string;
+    arrowSize: string;
+    arrowColor: string;
+    itemFontSize: string;
+    itemFontWeight: string;
+    itemBorderRadius: string;
+    calendarDaysFontSize: string;
+    calendarTitleFontSize: string;
     monthItemTextColorActive: string;
     monthItemColorActive: string;
     monthItemColor: string;
@@ -19,15 +48,10 @@ export declare const self: (vars: ThemeCommonVars) => {
     monthItemColorHover: string;
     monthItemTextColorHover: string;
     titleColorActive: string;
-    itemBorderRadius: string;
     panelColor: string;
     panelTextColor: string;
-    arrowColor: string;
     calendarTitleTextColor: string;
     calendarTitleColorHover: string;
-    calendarDaysTextColor: string;
-    panelHeaderDividerColor: string;
-    calendarDaysDividerColor: string;
     calendarDividerColor: string;
     panelActionDividerColor: string;
     panelBoxShadow: string;
@@ -50,7 +74,6 @@ export declare const self: (vars: ThemeCommonVars) => {
     panelActionPadding: string;
     calendarTitlePadding: string;
     calendarTitleHeight: string;
-    arrowSize: string;
     panelHeaderPadding: string;
     calendarDaysHeight: string;
     calendarTitleGridTempateColumns: string;
@@ -77,18 +100,47 @@ export declare const self: (vars: ThemeCommonVars) => {
 };
 export type DatePickerThemeVars = ReturnType<typeof self>;
 declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
-    itemFontSize: string;
-    calendarDaysFontSize: string;
-    calendarTitleFontSize: string;
+    itemColor: string;
+    itemColorHover: string;
+    itemColorPressed: string;
+    itemColorDisabled: string;
     itemTextColor: string;
+    itemTextColorHover: string;
+    itemTextColorPressed: string;
     itemTextColorDisabled: string;
+    itemColorActive: string;
+    itemColorActiveHover: string;
+    itemColorActivePressed: string;
+    itemColorActiveDisabled: string;
     itemTextColorActive: string;
+    itemTextColorActiveHover: string;
+    itemTextColorActivePressed: string;
+    itemTextColorActiveDisabled: string;
+    itemColorCurrent: string;
+    itemColorCurrentHover: string;
+    itemColorCurrentPressed: string;
+    itemColorCurrentDisabled: string;
     itemTextColorCurrent: string;
-    itemCurrentColor: string;
+    itemTextColorCurrentHover: string;
+    itemTextColorCurrentPressed: string;
+    itemTextColorCurrentDisabled: string;
     itemColorIncluded: string;
-    itemColorHover: string;
-    itemColorDisabled: string;
-    itemColorActive: string;
+    itemColorIncludedHover: string;
+    itemColorIncludedPressed: string;
+    itemColorIncludedDisabled: string;
+    itemTextColorIncluded: string;
+    itemTextColorIncludedHover: string;
+    itemTextColorIncludedPressed: string;
+    itemTextColorIncludedDisabled: string;
+    itemColorExcluded: string;
+    itemTextColorExcluded: string;
+    arrowSize: string;
+    arrowColor: string;
+    itemFontSize: string;
+    itemFontWeight: string;
+    itemBorderRadius: string;
+    calendarDaysFontSize: string;
+    calendarTitleFontSize: string;
     monthItemTextColorActive: string;
     monthItemColorActive: string;
     monthItemColor: string;
@@ -96,15 +148,10 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     monthItemColorHover: string;
     monthItemTextColorHover: string;
     titleColorActive: string;
-    itemBorderRadius: string;
     panelColor: string;
     panelTextColor: string;
-    arrowColor: string;
     calendarTitleTextColor: string;
     calendarTitleColorHover: string;
-    calendarDaysTextColor: string;
-    panelHeaderDividerColor: string;
-    calendarDaysDividerColor: string;
     calendarDividerColor: string;
     panelActionDividerColor: string;
     panelBoxShadow: string;
@@ -127,7 +174,6 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     panelActionPadding: string;
     calendarTitlePadding: string;
     calendarTitleHeight: string;
-    arrowSize: string;
     panelHeaderPadding: string;
     calendarDaysHeight: string;
     calendarTitleGridTempateColumns: string;
@@ -153,21 +199,28 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarRightPaddingYearrange: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -207,11 +260,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>;
     Button: import("../../_mixins").Theme<"Button", {
         heightTiny: string;
@@ -239,7 +288,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -425,6 +474,11 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
         rippleDuration: string;
     }, any>;
     TimePicker: import("../../_mixins").Theme<"TimePicker", {
+        itemFontSize: string;
+        itemFontWeight: string;
+        itemHeight: string;
+        itemWidth: string;
+        panelActionPadding: string;
         panelColor: string;
         panelBoxShadow: string;
         panelDividerColor: string;
@@ -436,10 +490,6 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
         borderRadius: string;
         iconColor: string;
         iconColorDisabled: string;
-        itemFontSize: string;
-        itemHeight: string;
-        itemWidth: string;
-        panelActionPadding: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
             color: string;
@@ -471,7 +521,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -657,21 +707,28 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
             rippleDuration: string;
         }, any>;
         Input: import("../../_mixins").Theme<"Input", {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSize: string;
             countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
+            heightHuge: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
+            fontSizeHuge: string;
             lineHeight: string;
             lineHeightTextarea: string;
             borderRadius: string;
             iconSize: string;
-            groupLabelColor: string;
             groupLabelTextColor: string;
             textColor: string;
             textColorDisabled: string;
@@ -711,11 +768,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
     }>;
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {

package/es/date-picker/styles/light.js

@@ -6,9 +6,18 @@ import { scrollbarLight } from '../../_internal/scrollbar/styles';
 import commonVars from './_common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { hoverColor, fontSize, textColor2, popoverColor, primaryColor, iconColor, iconColorDisabled, textColor1, dividerColor, boxShadow2, fontWeightStrong, textTertiary, fontSizeLarge, tertiaryElements, tertiaryColor, baseColor, tertiaryColorHover } = vars;
-    return Object.assign(Object.assign({}, commonVars), { itemFontSize: fontSize, calendarDaysFontSize: fontSize, calendarTitleFontSize: fontSizeLarge, itemTextColor: textTertiary, itemTextColorDisabled: textTertiary, itemTextColorActive: popoverColor, itemTextColorCurrent: primaryColor, itemCurrentColor: primaryColor, itemColorIncluded: tertiaryElements, itemColorHover: hoverColor, itemColorDisabled: hoverColor, itemColorActive: tertiaryColor, monthItemTextColorActive: baseColor, monthItemColorActive: tertiaryColor, monthItemColor: tertiaryElements, monthItemTextColor: tertiaryColor, monthItemColorHover: tertiaryColorHover, monthItemTextColorHover: baseColor, titleColorActive: textTertiary, itemBorderRadius: '8px', panelColor: popoverColor, panelTextColor: textColor2, arrowColor: iconColor, calendarTitleTextColor: textColor1, calendarTitleColorHover: hoverColor, calendarDaysTextColor: textColor2, panelHeaderDividerColor: dividerColor, calendarDaysDividerColor: dividerColor, calendarDividerColor: dividerColor, panelActionDividerColor: dividerColor, panelBoxShadow: boxShadow2, panelBorderRadius: '16px', calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: '16px', iconColor,
-        iconColorDisabled });
+    const { iconMedium, fontWeightStrong, fontWeight, fontBodyMedium, fontBodyLarge, brandPrimary500, brandPrimary300, transparencySecondary, elementsSenary, textQuaternary, textSecondary, borderRadiusSmall, containerPrimary, elementsPrimary, textPrimary, elementsTertiary, elementsQuaternary, shadowDepth2, borderRadiusLarge } = vars;
+    return Object.assign(Object.assign({}, commonVars), { 
+        // Item
+        itemColor: 'transparent', itemColorHover: elementsTertiary, itemColorPressed: elementsPrimary, itemColorDisabled: 'transparent', itemTextColor: textPrimary, itemTextColorHover: textPrimary, itemTextColorPressed: textQuaternary, itemTextColorDisabled: transparencySecondary, 
+        // Selected
+        itemColorActive: elementsPrimary, itemColorActiveHover: elementsSenary, itemColorActivePressed: elementsPrimary, itemColorActiveDisabled: transparencySecondary, itemTextColorActive: textQuaternary, itemTextColorActiveHover: textQuaternary, itemTextColorActivePressed: textQuaternary, itemTextColorActiveDisabled: transparencySecondary, 
+        // Current
+        itemColorCurrent: 'transparent', itemColorCurrentHover: elementsTertiary, itemColorCurrentPressed: elementsPrimary, itemColorCurrentDisabled: 'transparent', itemTextColorCurrent: brandPrimary500, itemTextColorCurrentHover: brandPrimary500, itemTextColorCurrentPressed: textQuaternary, itemTextColorCurrentDisabled: brandPrimary300, 
+        // Covered
+        itemColorIncluded: elementsTertiary, itemColorIncludedHover: elementsQuaternary, itemColorIncludedPressed: elementsPrimary, itemColorIncludedDisabled: transparencySecondary, itemTextColorIncluded: textPrimary, itemTextColorIncludedHover: textPrimary, itemTextColorIncludedPressed: textQuaternary, itemTextColorIncludedDisabled: transparencySecondary, 
+        // Excluded
+        itemColorExcluded: 'transparent', itemTextColorExcluded: textSecondary, arrowSize: iconMedium, arrowColor: elementsPrimary, itemFontSize: fontBodyMedium, itemFontWeight: fontWeight, itemBorderRadius: borderRadiusSmall, calendarDaysFontSize: fontBodyMedium, calendarTitleFontSize: fontBodyLarge, monthItemTextColorActive: textQuaternary, monthItemColorActive: elementsPrimary, monthItemColor: elementsTertiary, monthItemTextColor: textPrimary, monthItemColorHover: elementsSenary, monthItemTextColorHover: textQuaternary, titleColorActive: textSecondary, panelColor: containerPrimary, panelTextColor: textPrimary, calendarTitleTextColor: textPrimary, calendarTitleColorHover: elementsTertiary, calendarDividerColor: elementsQuaternary, panelActionDividerColor: elementsQuaternary, panelBoxShadow: shadowDepth2, panelBorderRadius: borderRadiusLarge, calendarTitleFontWeight: fontWeightStrong, scrollItemBorderRadius: borderRadiusLarge, iconColor: elementsPrimary, iconColorDisabled: transparencySecondary });
 };
 const datePickerLight = createTheme({
     name: 'DatePicker',