@uzum-tech/ui 0.1.1 → 1.0.0

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

@@ -25,9 +25,7 @@ const fade_in_scale_up_cssr_1 = require("../../../_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
@@ -108,8 +106,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
- `, [(0, cssr_1.c)('&:before', `
+ `, [(0, cssr_1.c)('&:after', `
  z-index: -1;
  content: "";
  display: block;
@@ -124,18 +123,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
  background-color .3s var(--u-bezier);
  `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', `
  color: var(--u-calendar-item-text-color-hover);
- `, [(0, cssr_1.c)('&:before', `
+ `, [(0, cssr_1.c)('&:after', `
  background-color: var(--u-calendar-item-color-hover);
  `)]), (0, cssr_1.cM)('selected', `
  color: var(--u-calendar-item-text-color-active);
- `, [(0, cssr_1.c)('&:before', `
+ `, [(0, cssr_1.c)('&:after', `
  background-color: var(--u-calendar-item-color-active);
- `)]), (0, cssr_1.c)('&:active:before', `
+ `)]), (0, cssr_1.c)('&:active:after', `
  background-color: var(--u-calendar-item-color-active);
  `)]), (0, cssr_1.cM)('disabled', `
  color: var(--u-item-text-color-disabled);
  cursor: not-allowed;
- `, [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
+ `, [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::after', `
  background-color: var(--u-item-color-disabled);
  `)])])])]), (0, cssr_1.cM)('date', {
   gridTemplateAreas: `
@@ -187,7 +186,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.c)('*:not(:last-child)', {
   marginRight: '10px'
 }), (0, cssr_1.c)('*', {
@@ -195,7 +193,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
   width: 0
 }), (0, cssr_1.cB)('time-picker', {
   zIndex: 1
-})]), (0, cssr_1.c)('+ .u-date-panel-calendar', {
+})]), (0, cssr_1.c)('~ .u-date-panel-calendar', {
   paddingTop: '16px'
 })]), (0, cssr_1.cB)('date-panel-month', {
   boxSizing: 'border-box',
@@ -204,7 +202,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
   justifyContent: 'space-between',
   padding: 'var(--u-calendar-title-padding)',
   height: 'var(--u-calendar-title-height)'
-}, [(0, cssr_1.cE)('prev, next, fast-prev, fast-next', `
+}, [(0, cssr_1.cE)('icon', `
+ font-size: var(--u-arrow-size);
+ `), (0, cssr_1.cE)('prev, next, fast-prev, fast-next', `
  line-height: 0;
  cursor: pointer;
  width: var(--u-arrow-size);
@@ -268,11 +268,15 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
  `, [(0, cssr_1.cE)('trigger', `
  position: absolute;
@@ -280,60 +284,67 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
- `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('selected', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--u-item-color-hover)'
-})])]), (0, cssr_1.cM)('current', {
-  fontWeight: 700,
-  color: 'var(--u-item-current-color)'
-}), (0, cssr_1.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);
- `), (0, cssr_1.cM)('covered, start, end', [(0, cssr_1.cNotM)('excluded', [(0, cssr_1.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;
+ `), (0, cssr_1.cM)('excluded', `
+ color: var(--u-item-text-color-excluded);
+ background-color: var(--u-item-color-excluded);
+ `), (0, cssr_1.c)('&:hover', `
+ color: var(--u-item-text-color-hover);
+ background-color: var(--u-item-color-hover);
+ `), (0, cssr_1.c)('&:active', `
+ color: var(--u-item-text-color-pressed);
+ background-color: var(--u-item-color-pressed);
+ `), (0, cssr_1.cM)('disabled', `
+ color: var(--u-item-text-color-disabled);
+ background-color: var(--u-item-color-disabled);
+ `), (0, cssr_1.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);
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-item-color-current-hover);
+ color: var(--u-item-text-color-current-hover);
+ `), (0, cssr_1.c)('&:active', `
+ background-color: var(--u-item-color-current-pressed);
+ color: var(--u-item-text-color-current-pressed);
+ `), (0, cssr_1.cM)('disabled', `
+ background-color: var(--u-item-color-current-disabled);
+ color: var(--u-item-text-color-current-disabled);
+ `)]), (0, cssr_1.cM)('covered, start, end', `
+ color: var(--u-item-text-color-included);
  background-color: var(--u-item-color-included);
- `)])]), (0, cssr_1.cM)('selected', {
-  color: 'var(--u-item-text-color-active)'
-}, [(0, cssr_1.c)('&::after', {
-  backgroundColor: 'var(--u-item-color-active)'
-}), (0, cssr_1.cM)('start', [(0, cssr_1.c)('&::before', {
-  left: '50%'
-}), (0, cssr_1.c)('&::after', {
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0
-})]), (0, cssr_1.cM)('end', [(0, cssr_1.c)('&::before', {
-  right: '50%'
-}), (0, cssr_1.c)('&::after', {
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0
-})]), (0, cssr_1.cE)('sup', {
-  backgroundColor: 'var(--u-panel-color)'
-})]), (0, cssr_1.cM)('excluded', {
-  color: 'var(--u-item-text-color-disabled)'
-}, [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::after', {
-  backgroundColor: 'transparent'
-})])]), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed',
-  color: 'var(--u-item-text-color-disabled)'
-}, [(0, cssr_1.cM)('covered', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-})]), (0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-}), (0, cssr_1.c)('&::after', {
-  backgroundColor: 'var(--u-item-color-disabled)'
-})])])])]), (0, cssr_1.cE)('vertical-divider', `
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-item-color-included-hover);
+ color: var(--u-item-text-color-included-hover);
+ `), (0, cssr_1.c)('&:active', `
+ background-color: var(--u-item-color-included-pressed);
+ color: var(--u-item-text-color-included-pressed);
+ `), (0, cssr_1.cM)('disabled', `
+ background-color: var(--u-item-color-included-disabled);
+ color: var(--u-item-text-color-included-disabled);
+ `)]), (0, cssr_1.cM)('covered', [(0, cssr_1.cNotM)('end, start', `
+ border-radius: 0;
+ `)]), (0, cssr_1.cM)('selected', `
+ color: var(--u-item-text-color-active);
+ background-color: var(--u-item-color-active);
+ `, [(0, cssr_1.cNotM)('end', [(0, cssr_1.cM)('start', `
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ `)]), (0, cssr_1.cNotM)('start', [(0, cssr_1.cM)('end', `
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ `)]), (0, cssr_1.cE)('sup', `
+ background-color: var(--u-panel-color);
+ `), (0, cssr_1.c)('&:hover', `
+ color: var(--u-item-text-color-active-hover);
+ background-color: var(--u-item-color-active-hover);
+ `), (0, cssr_1.c)('&:active', `
+ color: var(--u-item-text-color-active-pressed);
+ background-color: var(--u-item-color-active-pressed);
+ `), (0, cssr_1.cM)('disabled', `
+ background-color: var(--u-item-color-active-disabled);
+ color: var(--u-item-text-color-active-disabled);
+ `)])])]), (0, cssr_1.cE)('vertical-divider', `
  grid-area: divider;
  height: 100%;
  width: 1px;
@@ -364,6 +375,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('date-picker', `
   marginRight: '12px'
 })])])])]), (0, cssr_1.c)('[data-u-date].transition-disabled', {
   transition: 'none !important'
-}, [(0, cssr_1.c)('&::before, &::after', {
+}, [(0, cssr_1.c)('&::after', {
   transition: 'none !important'
 })])]);

package/lib/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/lib/date-picker/styles/_common.js

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

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const styles_1 = require("../../input/styles");
 const common_1 = require("../../_styles/common");
 const styles_2 = require("../../button/styles");
@@ -16,13 +15,6 @@ const datePickerDark = {
         TimePicker: styles_3.timePickerDark,
         Scrollbar: styles_4.scrollbarDark
     },
-    self(vars) {
-        const { popoverColor, hoverColor, primaryColor } = vars;
-        const commonSelf = (0, light_1.self)(vars);
-        commonSelf.itemColorDisabled = (0, seemly_1.composite)(popoverColor, hoverColor);
-        commonSelf.itemColorIncluded = (0, seemly_1.changeColor)(primaryColor, { alpha: 0.15 });
-        commonSelf.itemColorHover = (0, seemly_1.composite)(popoverColor, hoverColor);
-        return commonSelf;
-    }
+    self: light_1.self
 };
 exports.default = datePickerDark;

package/lib/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/lib/date-picker/styles/light.js

@@ -12,9 +12,18 @@ const styles_4 = require("../../_internal/scrollbar/styles");
 const _common_1 = __importDefault(require("./_common"));
 const _mixins_1 = require("../../_mixins");
 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({}, _common_1.default), { 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({}, _common_1.default), { 
+        // 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 });
 };
 exports.self = self;
 const datePickerLight = (0, _mixins_1.createTheme)({