@via-profit/ui-kit 0.1.0-rc.5 → 0.1.0-rc.7

package/Button/ButtonAccent.js

@@ -18,18 +18,18 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ButtonBase_1 = __importDefault(require("./ButtonBase"));
 const Button = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme }) => theme.colors.accentPrimaryContrast().toString()};
-  background-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+  color: ${({ theme }) => theme.colors.accentPrimaryContrast.toString()};
+  background-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
   box-shadow: 0 2px 12px
-    ${({ theme }) => theme.colors.accentPrimary().darken(0.6).alpha(0.3).toString()};
+    ${({ theme }) => theme.colors.accentPrimary.darken(0.6).alpha(0.3).toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.accentPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.accentPrimary.darken(0.1).toString()};
   }
   &:active {
-    background-color: ${({ theme }) => theme.colors.accentPrimary().darken(0.2).toString()};
+    background-color: ${({ theme }) => theme.colors.accentPrimary.darken(0.2).toString()};
   }
   &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().darken(0.3).toString()};
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.darken(0.3).toString()};
   }
 `;
 const StartIconWrapper = styled_1.default.span `

package/Button/ButtonBase.js

@@ -19,6 +19,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Button = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
+  font-size: 0.8rem;
   cursor: pointer;
   font-size: 1em;
   border: 0;

package/Button/ButtonStandard.js

@@ -18,20 +18,20 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ButtonBase_1 = __importDefault(require("./ButtonBase"));
 const Button = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   background-color: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().lighten(20).toString()
-    : theme.colors.backgroundPrimary().toString()};
+    ? theme.colors.backgroundPrimary.lighten(20).toString()
+    : theme.colors.backgroundPrimary.toString()};
   box-shadow: 0 2px 12px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(40).alpha(0.6).toString()};
+    ${({ theme }) => theme.colors.backgroundPrimary.darken(40).alpha(0.6).toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(20).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(20).toString()};
   }
   &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(40).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(40).toString()};
   }
   &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().toString()};
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const StartIconWrapper = styled_1.default.span `

package/Calendar/CalendarCell.js

@@ -29,28 +29,28 @@ const Btn = styled_1.default.button `
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
   border: 1px solid transparent;
   background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary().toString()
-    : theme.colors.backgroundPrimary().toString()};
+    ? theme.colors.accentPrimary.toString()
+    : theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
     if ($isDisabled) {
-        return theme.colors.textSecondary().toString();
+        return theme.colors.textSecondary.toString();
     }
     if ($isSelected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     if ($isToday) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
-    return theme.colors.textPrimary().toString();
+    return theme.colors.textPrimary.toString();
 }};
   &:hover {
     background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.1).toString()};
+    ? theme.colors.accentPrimary.darken(0.1).toString()
+    : theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
 `;

package/Calendar/CalendarMonthControl.js

@@ -31,14 +31,14 @@ const Btn = styled_1.default.button `
   outline: none;
   cursor: pointer;
   border: 1px solid transparent;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    border-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    border-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
 `;

package/Calendar/CalendarPaper.js

@@ -9,12 +9,12 @@ const CalendarPaper = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   padding: 0.4em;
   max-width: 17.6em;
   max-height: 20.4em;
   box-shadow: 0 4px 24px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+    ${({ theme }) => theme.colors.backgroundPrimary.darken(0.5).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/Calendar/CalendarWeekDayLabel.js

@@ -12,6 +12,6 @@ const CalendarWeekDayLabel = styled_1.default.div `
   user-select: none;
   width: 3em;
   height: 3em;
-  color: ${({ theme }) => theme.colors.textSecondary().toString()};
+  color: ${({ theme }) => theme.colors.textSecondary.toString()};
 `;
 exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/Menu/MenuItemInner.js

@@ -24,19 +24,19 @@ const InnerContainer = styled_1.default.div `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
   background-color: ${({ theme, selected, hovered }) => {
     if (selected && hovered) {
-        return theme.colors.accentPrimary().darken(0.1).toString();
+        return theme.colors.accentPrimary.darken(0.1).toString();
     }
     if (selected) {
-        return theme.colors.accentPrimary().toString();
+        return theme.colors.accentPrimary.toString();
     }
     if (hovered) {
-        return theme.colors.backgroundGrey().darken(0.04).toString();
+        return theme.colors.backgroundGrey.darken(0.04).toString();
     }
     return 'inherit';
 }};
   color: ${({ theme, selected }) => {
     if (selected) {
-        return theme.colors.accentPrimaryContrast().toString();
+        return theme.colors.accentPrimaryContrast.toString();
     }
     return 'inherit';
 }};

package/Menu/MenuWrapper.js

@@ -25,10 +25,10 @@ const StyledMenuWrapper = styled_1.default.div `
   transition: visibility 120ms ease-out, opacity 120ms ease-out;
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   box-shadow: 0 4px 24px
-    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+    ${({ theme }) => theme.colors.backgroundPrimary.darken(0.5).alpha(0.6).toString()};
   &:focus {
     outline: none;
   }
@@ -43,20 +43,20 @@ const StyledMenuWrapper = styled_1.default.div `
 
   & ::-webkit-scrollbar-track {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().darken(0.1).toString()
-    : theme.colors.backgroundPrimary().darken(0.05).toString()};
+    ? theme.colors.backgroundPrimary.darken(0.1).toString()
+    : theme.colors.backgroundPrimary.darken(0.05).toString()};
   }
 
   & ::-webkit-scrollbar-thumb {
     background: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundSecondary().lighten(0.3).toString()
-    : theme.colors.backgroundSecondary().darken(0.3).toString()};
+    ? theme.colors.backgroundSecondary.lighten(0.3).toString()
+    : theme.colors.backgroundSecondary.darken(0.3).toString()};
     border-radius: 0.3rem;
   }
 
   & ::-webkit-scrollbar-thumb:horizontal:hover,
   & ::-webkit-scrollbar-thumb:vertical:hover {
-    background: ${({ theme }) => theme.colors.accentPrimary().toString()};
+    background: ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const MenuWrapperInner = styled_1.default.div `

package/Modal/ModalConfirmBox.js

@@ -127,7 +127,7 @@ const ModalConfirmBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/Modal/ModalDialog.js

@@ -78,7 +78,7 @@ const ModalDialog = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/Modal/ModalDrawer.js

@@ -76,7 +76,7 @@ const Inner = styled_1.default.div `
 `;
 const CloseButton = (0, styled_1.default)(Button_1.default) `
   margin-left: ${props => (props.$withToolbar ? '1em' : 0)};
-  color: ${props => props.theme.colors.textPrimary().toString()};
+  color: ${props => props.theme.colors.textPrimary.toString()};
   background: none;
   width: auto;
   height: auto;
@@ -131,7 +131,7 @@ const ModalDrawer = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em 1em 0 0;
             transform: translate(0, 100%);
             transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

package/Modal/ModalMessageBox.js

@@ -126,7 +126,7 @@ const ModalMessageBox = (props, ref) => {
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             outline: none;
-            background: ${theme.colors.backgroundPrimary().toString()};
+            background: ${theme.colors.backgroundPrimary.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/PhoneField/CountryFlag.js

@@ -32,7 +32,7 @@ const CountryFlagContainer = styled_1.default.span `
   overflow: hidden;
   margin-left: 0.5em;
   margin-right: 0.5em;
-  border: 1px solid ${({ theme }) => theme.colors.textPrimary().alpha(0.8).toString()};
+  border: 1px solid ${({ theme }) => theme.colors.textPrimary.alpha(0.8).toString()};
 `;
 const CountryFlag = props => {
     const { countryCode } = props, otherProps = __rest(props, ["countryCode"]);

package/PhoneField/flags/UnknownFlag.js

@@ -28,7 +28,7 @@ const react_1 = require("@emotion/react");
 const UnknownFlag = (props, ref) => {
     const { colors } = (0, react_1.useTheme)();
     return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 512 512", ref: ref }, props),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.backgroundPrimary().toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
-        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary().toString(), strokeWidth: ".72279" })));
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m-78.682-31.951h512v512h-512z", fill: colors.backgroundPrimary.toString(), strokeLinejoin: "round", strokeWidth: "2.176" }),
+        React.createElement("path", { transform: "translate(78.682 31.951)", d: "m177.32 288.09q-4.915 0-8.0953-3.1803-3.1803-3.4694-3.1803-8.3844 0-11.854 5.7824-25.153 5.7823-13.299 15.612-22.551l7.2279-6.6497q9.83-9.2518 15.323-15.323 5.4932-6.3606 8.9626-15.034 3.7585-8.9626 3.7585-20.527 0-11.276-5.4932-20.527-5.4932-9.5409-15.612-15.034-10.119-5.4932-23.129-5.4932-21.395 0-34.116 13.01-12.432 12.721-12.432 33.248 0 4.915-3.1803 8.0953-2.8912 2.8912-7.8062 2.8912t-8.0953-2.8912q-3.1803-3.1803-3.1803-8.0953 0-19.66 8.6735-34.983 8.6735-15.323 24.286-23.997 15.612-8.6735 35.851-8.6735 19.082 0 34.116 8.3844 15.323 8.0953 23.708 22.551 8.6735 14.456 8.6735 32.67 0 14.167-4.6259 24.864-4.6259 10.408-11.854 18.503-6.9388 8.0953-19.949 19.949l-5.2041 4.6259q-8.0953 7.2279-11.565 17.058-3.1803 9.5409-3.1803 19.082 0 4.915-3.1803 8.3844-3.1803 3.1803-8.0953 3.1803zm0 51.174q-7.2279 0-12.143-4.915-4.6259-4.915-4.6259-11.854 0-7.2279 4.915-12.143 4.915-4.915 11.854-4.915t11.854 4.915q5.2041 4.915 5.2041 12.143 0 6.9388-5.2041 11.854-4.915 4.915-11.854 4.915z", fill: colors.textPrimary.toString(), strokeWidth: ".72279" })));
 };
 exports.default = React.forwardRef(UnknownFlag);

package/SelectBox/SelectButton.js

@@ -36,16 +36,16 @@ const StyledButton = styled_1.default.button `
   border: 1px solid;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-color: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary().lighten(1.4).toString()
-    : theme.colors.backgroundPrimary().darken(0.4).toString()};
+    ? theme.colors.backgroundPrimary.lighten(1.4).toString()
+    : theme.colors.backgroundPrimary.darken(0.4).toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.05).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.05).toString()};
   }
   &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
   }
   &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary().toString()};
+    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.toString()};
   }
 `;
 const ValueWrapper = styled_1.default.span `

package/TextField/TextFieldErrorText.js

@@ -47,7 +47,7 @@ const ErrorTextContainer = styled_1.default.div `
   overflow: hidden;
 `;
 const ErrorTextInner = styled_1.default.div `
-  color: ${({ theme }) => theme.colors.error().toString()};
+  color: ${({ theme }) => theme.colors.error.toString()};
   font-size: 0.8em;
   transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
   opacity: ${({ $error }) => ($error ? 1 : 0)};

package/TextField/TextFieldLabelAsterisk.js

@@ -42,7 +42,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Asterisk = styled_1.default.span `
   font-size: 0.8em;
   margin-left: 0.2em;
-  color: ${({ theme }) => theme.colors.error().toString()};
+  color: ${({ theme }) => theme.colors.error.toString()};
 `;
 const TextFieldLabelAsterisk = (props, ref) => {
     const { children, error, focused } = props, otherProps = __rest(props, ["children", "error", "focused"]);

package/TextField/TextFieldWrapper.js

@@ -47,25 +47,25 @@ const Wrapper = styled_1.default.div `
   border: 1px solid;
   outline: 1px solid transparent;
   border-color: ${({ theme }) => theme.isDark
-    ? theme.colors.textPrimary().darken(100).toString()
-    : theme.colors.textPrimary().lighten(150).toString()};
+    ? theme.colors.textPrimary.darken(100).toString()
+    : theme.colors.textPrimary.lighten(150).toString()};
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
   font-size: 0.9em;
-  background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.02).toString()};
-  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.02).toString()};
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   transition: all 180ms ease-out 0s;
 
   ${props => props.$focused &&
     (0, react_1.css) `
-      border-color: ${props.theme.colors.accentPrimary().lighten(0.5).toString()};
-      outline-color: ${props.theme.colors.accentPrimary().lighten(0.5).toString()};
+      border-color: ${props.theme.colors.accentPrimary.lighten(0.5).toString()};
+      outline-color: ${props.theme.colors.accentPrimary.lighten(0.5).toString()};
     `};
   ${props => props.$error &&
     (0, react_1.css) `
-      border-color: ${props.theme.colors.error().toString()};
-      color: ${props.theme.colors.error().toString()};
+      border-color: ${props.theme.colors.error.toString()};
+      color: ${props.theme.colors.error.toString()};
       &:focus {
-        border-color: ${props.theme.colors.error().lighten(0.6).toString()};
+        border-color: ${props.theme.colors.error.lighten(0.6).toString()};
       }
     `}
 `;

package/ThemeProvider/createTheme.d.ts

@@ -1,6 +1,5 @@
 import { ColorInterface } from '../color';
 export type CreateTheme = (overrides?: UIThemeOverrides) => UITheme;
-export type ColorManipulator = () => ColorInterface;
 export interface UITheme {
     readonly isDark: boolean;
     readonly fontSize: Record<'small' | 'normal' | 'medium' | 'large', number>;
@@ -10,16 +9,16 @@ export interface UITheme {
         readonly modal: number;
     };
     readonly colors: {
-        readonly backgroundPrimary: ColorManipulator;
-        readonly backgroundSecondary: ColorManipulator;
-        readonly backgroundGrey: ColorManipulator;
-        readonly textPrimary: ColorManipulator;
-        readonly textSecondary: ColorManipulator;
-        readonly accentPrimary: ColorManipulator;
-        readonly accentPrimaryContrast: ColorManipulator;
-        readonly accentSecondary: ColorManipulator;
-        readonly accentSecondaryContrast: ColorManipulator;
-        readonly error: ColorManipulator;
+        readonly backgroundPrimary: ColorInterface;
+        readonly backgroundSecondary: ColorInterface;
+        readonly backgroundGrey: ColorInterface;
+        readonly textPrimary: ColorInterface;
+        readonly textSecondary: ColorInterface;
+        readonly accentPrimary: ColorInterface;
+        readonly accentPrimaryContrast: ColorInterface;
+        readonly accentSecondary: ColorInterface;
+        readonly accentSecondaryContrast: ColorInterface;
+        readonly error: ColorInterface;
     };
     readonly shape: {
         readonly radiusFactor: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;

package/ThemeProvider/createTheme.js

@@ -17,18 +17,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const color_1 = __importDefault(require("../color"));
 const createTheme = (overrides) => {
     const _a = overrides || {}, { isDark, fontSize, zIndex, colors, shape } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "colors", "shape"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, mainDrawer: 9, modal: 10 }, zIndex), colors: {
-            backgroundPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary) || '#fff'),
-            backgroundSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundSecondary) || '#F9F9F9'),
-            backgroundGrey: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.backgroundGrey) || '#F4F6FA'),
-            textPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.textPrimary) || '#212121'),
-            textSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.textSecondary) || '#343434'),
-            accentPrimary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentPrimary) || '#FFA800'),
-            accentPrimaryContrast: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentPrimaryContrast) || '#FFFFFF'),
-            accentSecondary: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentSecondary) || '#bd00ff'),
-            accentSecondaryContrast: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.accentSecondaryContrast) || '#FFFFFF'),
-            error: () => new color_1.default((colors === null || colors === void 0 ? void 0 : colors.error) || '#ff2b2b'),
-        }, shape: Object.assign({ radiusFactor: 0.5 }, shape) });
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, mainDrawer: 9, modal: 10 }, zIndex), colors: {}, shape: Object.assign({ radiusFactor: 0.5 }, shape) });
+    const defaultColors = {
+        backgroundPrimary: '#FFFFFF',
+        backgroundSecondary: '#F9F9F9',
+        backgroundGrey: '#F4F6FA',
+        textPrimary: '#212121',
+        textSecondary: '#343434',
+        accentPrimary: '#FFA800',
+        accentPrimaryContrast: '#FFFFFF',
+        accentSecondary: '#bd00ff',
+        accentSecondaryContrast: '#FFFFFF',
+        error: '#ff2b2b',
+    };
+    Object.entries(Object.assign(Object.assign({}, defaultColors), colors)).forEach(([colorName, colorValue]) => {
+        theme.colors[colorName] = new color_1.default(colorValue);
+    });
+    theme.colors.test = new color_1.default('red');
     return theme;
 };
 exports.default = createTheme;

package/Typography/Base.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Base = styled_1.default.span `
   font-size: 1rem;
   font-weight: 300;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Base;

package/Typography/Blockquote.js

@@ -9,8 +9,8 @@ const Blockquote = styled_1.default.blockquote `
   font-weight: 400;
   font-style: italic;
   position: relative;
-  border-left: 4px solid ${({ theme }) => theme.colors.textSecondary().toString()};
-  color: ${({ theme }) => theme.colors.textSecondary().toString()};
+  border-left: 4px solid ${({ theme }) => theme.colors.textSecondary.toString()};
+  color: ${({ theme }) => theme.colors.textSecondary.toString()};
   margin: 0;
   padding: 1em 0 1em 2em;
   & > p:first-of-type {

package/Typography/Del.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Del = styled_1.default.del `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Del;

package/Typography/Em.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Em = styled_1.default.em `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Em;

package/Typography/H1.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const H1 = styled_1.default.h1 `
   font-size: 2rem;
   font-weight: 700;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = H1;

package/Typography/H2.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const H2 = styled_1.default.h2 `
   font-size: 1.5rem;
   font-weight: 500;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = H2;

package/Typography/H3.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const H3 = styled_1.default.h3 `
   font-size: 1.25rem;
   font-weight: 500;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = H3;

package/Typography/H4.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const H4 = styled_1.default.h4 `
   font-size: 1.2rem;
   font-weight: 500;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = H4;

package/Typography/H5.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const H5 = styled_1.default.h5 `
   font-size: 1.2rem;
   font-weight: 300;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = H5;

package/Typography/List.js

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Li = exports.Ol = exports.Ul = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 exports.Ul = styled_1.default.ul `
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   font-size: 1em;
 `;
 exports.Ol = styled_1.default.ul `
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   font-size: 1em;
 `;
 exports.Li = styled_1.default.li `
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
   font-size: 1em;
 `;
 exports.default = exports.Ul;

package/Typography/Paragraph.js

@@ -7,5 +7,6 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Paragraph = styled_1.default.p `
   font-size: 1rem;
   font-weight: 300;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Paragraph;

package/Typography/Span.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Span = styled_1.default.span `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Span;

package/Typography/Strong.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Strong = styled_1.default.strong `
   font-size: 1em;
+  color: ${({ theme }) => theme.colors.textPrimary.toString()};
 `;
 exports.default = Strong;

package/Typography/index.d.ts

@@ -0,0 +1,3 @@
+import Paragraph from './Paragraph';
+export * from './Paragraph';
+export default Paragraph;

package/Typography/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Paragraph_1 = __importDefault(require("./Paragraph"));
+__exportStar(require("./Paragraph"), exports);
+exports.default = Paragraph_1.default;

package/color/Color.d.ts

@@ -1,10 +1,11 @@
 export interface ColorInterface {
-    parseColor(value: string): ParsedColor;
+    parseColor(value: string | Color): ParsedColor;
     shade(decimal: number): this;
     alpha(decimal: number): this;
     lighten(decimal: number): this;
     darken(decimal: number): this;
     getHextByWebColor(value: string): string;
+    rgb(): ParsedColor;
     rgbString(): string;
     hexString(): string;
     toString(): string;
@@ -19,7 +20,7 @@ export type ParsedColor = {
 };
 declare class Color implements ColorInterface {
     #private;
-    constructor(value: string);
+    constructor(value: string | Color);
     lighten(decimal: number): this;
     darken(decimal: number): this;
     alpha(decimal: number): this;
@@ -33,7 +34,12 @@ declare class Color implements ColorInterface {
      * lum - 0-25
      */
     shade(lum: number): this;
-    rgb(): ParsedColor;
+    rgb(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
     toString(): string;
     rgbString(): string;
     hexString(): string;

package/color/Color.js

@@ -10,12 +10,19 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Color_color;
+var _Color_color, _Color_cache;
 Object.defineProperty(exports, "__esModule", { value: true });
 class Color {
     constructor(value) {
         _Color_color.set(this, void 0);
-        __classPrivateFieldSet(this, _Color_color, this.parseColor(value), "f");
+        _Color_cache.set(this, void 0);
+        if (value instanceof Color) {
+            __classPrivateFieldSet(this, _Color_color, Object.assign({}, value.rgb()), "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _Color_color, this.parseColor(value), "f");
+        }
+        __classPrivateFieldSet(this, _Color_cache, Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f")), "f");
         return this;
     }
     lighten(decimal) {
@@ -61,20 +68,28 @@ class Color {
         return this;
     }
     rgb() {
-        return __classPrivateFieldGet(this, _Color_color, "f");
+        const result = Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f"));
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     toString() {
-        return this.rgbString();
+        const result = this.rgbString();
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     rgbString() {
-        return `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
+        const result = `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     hexString() {
         const colorToHex = (color) => {
             const hexadecimal = color.toString(16);
             return hexadecimal.length === 1 ? `0${hexadecimal}` : hexadecimal;
         };
-        return '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
+        const result = '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
+        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
+        return result;
     }
     parseColor(value) {
         const inputColor = value.trim().toLowerCase();
@@ -131,7 +146,7 @@ class Color {
         if (webHex) {
             return this.parseColor(webHex);
         }
-        throw new Error('Failed to parse color');
+        throw new Error(`Failed to parse color value «${value}»`);
     }
     hslToRgb(value) {
         const hsl = value.match(/(\d+(\.\d+)?)/g);
@@ -342,5 +357,31 @@ class Color {
         return webColors[v];
     }
 }
-_Color_color = new WeakMap();
+_Color_color = new WeakMap(), _Color_cache = new WeakMap();
+// class Color {
+//   #c: _Color;
+//   #cache: _Color;
+//   constructor(value: string) {
+//     this.#c = new _Color(value);
+//     this.#cache = new _Color(value);
+//     return this;
+//   }
+//   lighten(decimal: number): this {
+//     this.#c.lighten(decimal);
+//     return this;
+//   }
+//   darken(decimal: number): this {
+//     this.#c.darken(decimal);
+//     return this;
+//   }
+//   alpha(decimal: number): this {
+//     this.#c.alpha(decimal);
+//     return this;
+//   }
+//   toString() {
+//     const s = this.#c.toString();
+//     this.#c = new _Color(this.#cache.toString());
+//     return s;
+//   }
+// }
 exports.default = Color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.5",
+  "version": "0.1.0-rc.7",
   "description": "UI Kit",
   "main": "index.js",
   "repository": {