@via-profit/ui-kit 0.1.0-rc.10 → 0.1.0-rc.11

package/Button/ButtonAccent.js

@@ -22,9 +22,7 @@ const Button = (0, styled_1.default)(ButtonBase_1.default) `
   color: ${({ theme, disabled }) => disabled
     ? theme.colors.textPrimary.alpha(0.4).toString()
     : theme.colors.accentPrimaryContrast.toString()};
-  background-color: ${({ theme, disabled }) => disabled
-    ? theme.colors.backgroundGrey.darken(30).toString()
-    : theme.colors.accentPrimary.toString()};
+  background-color: ${({ theme, disabled }) => disabled ? theme.colors.surface.darken(30).toString() : theme.colors.accentPrimary.toString()};
 
   ${({ disabled, theme }) => !disabled &&
     (0, react_2.css) `

package/Button/ButtonBase.d.ts

@@ -5,4 +5,8 @@ declare module '@via-profit/ui-kit/Button/ButtonBase' {
     readonly startIcon?: JSX.Element;
     readonly endIcon?: JSX.Element;
   }
+
+  const ButtonBase: React.FC<ButtonBaseProps>;
+
+  export default ButtonBase;
 }

package/Button/ButtonStandard.js

@@ -26,19 +26,19 @@ const StyledButtonBase = (0, styled_1.default)(ButtonBase_1.default) `
     ? theme.colors.textPrimary.alpha(0.4).toString()
     : theme.colors.textPrimary.toString()};
   background-color: ${({ theme, disabled }) => disabled
-    ? theme.colors.backgroundGrey.darken(10).toString()
+    ? theme.colors.surface.darken(10).toString()
     : theme.isDark
-        ? theme.colors.backgroundPrimary.lighten(20).toString()
-        : theme.colors.backgroundPrimary.toString()};
+        ? theme.colors.surface.toString()
+        : theme.colors.surface.toString()};
 
   ${({ disabled, theme }) => !disabled &&
     (0, react_2.css) `
-      box-shadow: 0 2px 12px ${theme.colors.backgroundPrimary.darken(40).alpha(0.6).toString()};
+      box-shadow: 0 2px 12px ${theme.colors.surface.darken(40).alpha(0.6).toString()};
       &:hover {
-        background-color: ${theme.colors.backgroundPrimary.darken(20).toString()};
+        background-color: ${theme.colors.surface.darken(20).toString()};
       }
       &:active {
-        background-color: ${theme.colors.backgroundPrimary.darken(40).toString()};
+        background-color: ${theme.colors.surface.darken(40).toString()};
       }
       &:focus-visible {
         outline: 2px solid ${theme.colors.accentPrimary.toString()};

package/Button/index.d.ts

@@ -7,4 +7,8 @@ declare module '@via-profit/ui-kit/Button' {
   }
 
   export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
+
+  const Button: React.FC<ButtonProps>;
+
+  export default Button;
 }

package/Calendar/CalendarCell.js

@@ -28,9 +28,7 @@ const Btn = styled_1.default.button `
   outline: none;
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
   border: 1px solid transparent;
-  background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary.toString()
-    : theme.colors.backgroundPrimary.toString()};
+  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.colors.accentPrimary.toString() : theme.colors.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
     if ($isDisabled) {
@@ -46,8 +44,8 @@ const Btn = styled_1.default.button `
 }};
   &:hover {
     background-color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.colors.accentPrimary.darken(0.1).toString()
-    : theme.colors.backgroundPrimary.darken(0.1).toString()};
+    ? theme.colors.accentPrimary.darken(10).toString()
+    : theme.colors.surface.darken(10).toString()};
   }
   &:focus-visible {
     border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.colors.accentPrimary.toString()};

package/Calendar/CalendarMonthControl.js

@@ -31,11 +31,11 @@ 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.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   color: ${({ theme }) => theme.colors.textPrimary.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.surface.darken(0.1).toString()};
   }
   &:focus-visible {
     border-color: ${({ theme }) => theme.colors.accentPrimary.toString()};

package/Calendar/CalendarPaper.js

@@ -9,12 +9,11 @@ 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.surface.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()};
+  box-shadow: 0 4px 24px ${({ theme }) => theme.colors.surface.darken(50).alpha(0.6).toString()};
 `;
 exports.default = CalendarPaper;

package/{color → Color}/index.d.ts

@@ -1,4 +1,4 @@
-declare module '@via-profit/ui-kit/color' {
+declare module '@via-profit/ui-kit/Color' {
   export type ParsedColor = {
     r: number;
     g: number;

package/Menu/MenuItemInner.js

@@ -30,7 +30,7 @@ const InnerContainer = styled_1.default.div `
         return theme.colors.accentPrimary.toString();
     }
     if (hovered) {
-        return theme.colors.backgroundGrey.darken(0.04).toString();
+        return theme.colors.surface.darken(40).toString();
     }
     return 'inherit';
 }};

package/Menu/MenuWrapper.js

@@ -25,10 +25,9 @@ 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.surface.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()};
+  box-shadow: 0 4px 24px ${({ theme }) => theme.colors.surface.darken(50).alpha(0.6).toString()};
   &:focus {
     outline: none;
   }
@@ -43,14 +42,14 @@ 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(10).toString()
+    : theme.colors.backgroundPrimary.darken(5).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(30).toString()
+    : theme.colors.backgroundSecondary.darken(30).toString()};
     border-radius: 0.3rem;
   }
 

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.surface.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.surface.toString()};
             border-radius: 1em;
             transform: translate(-50%, -40%);
             transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;

package/Modal/ModalDrawer.js

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

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: "m-78.682-31.951h512v512h-512z", fill: colors.surface.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/README.md

@@ -1,17 +1,50 @@
+## Установка.
 
+для работы требуются следующие модули:
+
+- react
+- react-dom
+- @emotion/styled - CSS In JS
+- @emotion/react - CSS In JS React
+- react-modal - Мобальные окна и дроверы
+- react-popper - Выпадающие меню
+- react-window - Виртуализированный список
 
 ```bash
 $ npm install @emotion/react @emotion/styled react react-dom react-modal react-popper react-window
 
 ```
 
-_@types/emotion.d.ts_
+## Темы
 
-```ts
-import { UITheme } from '@via-profit/ui-kit';
+Для переопределения темы оформления в пакете `@emotion/styled` создайте, например в директории `@types`, файл `emotion.d.ts` со следующим содержимым:
 
+```ts
 declare module '@emotion/react' {
+  import { UITheme } from '@via-profit/ui-kit';
+
   export interface Theme extends UITheme {}
 }
+```
+
+Для переопределения темы оформления в пакете `@via-profit/ui-kit` создайте, например в директории `@types`, файл `ui-kit.d.ts` со следующим содержимым:
 
-```
+_@types/emotion.d.ts_
+
+```ts
+declare module '@via-profit/ui-kit' {
+  import {
+    UIThemeOverrideColor as Colors,
+    UIThemeOverrideZIndex as ZIndexes,
+  } from '@via-profit/ui-kit';
+
+  export interface UIThemeOverrideColor extends Colors {
+    readonly drawer: string;
+    readonly drawerContrast: string;
+  }
+
+  export interface UIThemeOverrideZIndex extends ZIndexes {
+    readonly notifications: number;
+  }
+}
+```

package/SelectBox/SelectButton.js

@@ -35,14 +35,12 @@ const StyledButton = styled_1.default.button `
   max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
   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()};
+  border-color: ${({ theme }) => theme.colors.surface.toString()};
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.05).toString()};
+    background-color: ${({ theme }) => theme.colors.surface.darken(5).toString()};
   }
   &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(0.1).toString()};
+    background-color: ${({ theme }) => theme.colors.surface.darken(10).toString()};
   }
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.toString()};

package/TextField/TextFieldWrapper.js

@@ -51,14 +51,14 @@ const Wrapper = styled_1.default.div `
     : 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()};
+  background-color: ${({ theme }) => theme.colors.surface.darken(20).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(10).toString()};
+      outline-color: ${props.theme.colors.accentPrimary.lighten(10).toString()};
     `};
   ${props => props.$error &&
     (0, react_1.css) `

package/ThemeProvider/createTheme.js

@@ -14,15 +14,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const color_1 = __importDefault(require("../color"));
+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: {}, shape: Object.assign({ radiusFactor: 0.5 }, shape) });
     const defaultColors = {
         backgroundPrimary: '#FFFFFF',
         backgroundSecondary: '#F9F9F9',
-        backgroundGrey: '#F4F6FA',
         textPrimary: '#212121',
+        surface: '#FFFFFF',
         textSecondary: '#343434',
         accentPrimary: '#FFA800',
         accentPrimaryContrast: '#FFFFFF',
@@ -31,9 +31,9 @@ const createTheme = overrides => {
         error: '#ff2b2b',
     };
     Object.entries(Object.assign(Object.assign({}, defaultColors), colors)).forEach(([colorName, colorValue]) => {
-        theme.colors[colorName] = new color_1.default(colorValue);
+        theme.colors[colorName] = new Color_1.default(colorValue);
     });
-    theme.colors.test = new color_1.default('red');
+    theme.colors.test = new Color_1.default('red');
     return theme;
 };
 exports.default = createTheme;

package/index.d.ts

@@ -1,5 +1,5 @@
 declare module '@via-profit/ui-kit' {
-  import type { ColorInterface } from '@via-profit/ui-kit/color';
+  import { ColorInterface } from '@via-profit/ui-kit/color';
 
   export interface UITheme {
     readonly isDark: boolean;
@@ -12,7 +12,7 @@ declare module '@via-profit/ui-kit' {
   export interface UIThemeOverrideColor {
     readonly backgroundPrimary: string;
     readonly backgroundSecondary: string;
-    readonly backgroundGrey: string;
+    readonly surface: string;
     readonly textPrimary: string;
     readonly textSecondary: string;
     readonly accentPrimary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.10",
+  "version": "0.1.0-rc.11",
   "description": "UI Kit",
   "repository": {
     "type": "git",