feat(*): new theme

BREAKING CHANGE: Feat/new theme (#1239)

* feat(theme): add new theme

* feat(theme): add theme to heading, link, plate

* feat(theme): add new theme type

* feat(theme): add some themed icons

* feat(theme): revert icons

* feat(theme): fix

* feat(client): add new themes for input component (#1240)

add input theme

* feat(*): add new themes for button (#1243)

* feat(*): add new themes for button

* fix(package.json): fix peerDependencies

Co-authored-by: Лукин Валерий Николаевич <[email protected]>

* feat(theme): fix lint

* feat(theme): fix input

* feat(client): fix import and hover for input theme (#1244)

fix input

* feat(theme): add paragraph and label

* feat(client): add new theme for tabs and tab-item (#1247)

add tabs

* feat(*): add new themes for label and notification (#1248)

add notification

* feat(*): add new themes for list, fix import styles heading (#1250)

add list

* Update src/input/input_theme_alfa-dark.css

Co-authored-by: Igor Maslov <[email protected]>

* Update src/input/input_theme_alfa-light.css

Co-authored-by: Igor Maslov <[email protected]>

* feat(theme): add special arui-demo version

* feat(theme): add body dark theme

* feat(theme): update css

* feat(theme): update Plate and Button

* feat(*): add themes for checkbox&checkbox-group&tag-button (#1261)

* feat(*): add themes for checkbox&checkbox-group&tag-button

* fix(*): fix code style

* fix(*): fix css for icons

* fix(*): update package-lock

Co-authored-by: Лукин Валерий Николаевич <[email protected]>

* feat(theme): fix test

* feat(theme): try fix lint

* feat(theme): fix mistake

* feat(theme): fix ts compile

* feat(theme): fix gemini

* Feat/new theme components (#1260)

* fix(client): add transparent and filled states

* feat(client): add new theme for select

* feat(client): add textarea and input-autocomplete

* feat(*): add new themes and fix button hover state

* feat(theme): fix lock-file

Co-authored-by: Alex Fenko <[email protected]>

* feat(*): add new themes for radio&radioGroup (#1263)

Co-authored-by: Лукин Валерий Николаевич <[email protected]>

* feat(*): add new themes for sidebar (#1264)

Co-authored-by: Лукин Валерий Николаевич <[email protected]>

* feat(client): add new theme for calendar (#1262)

* feat(client): add new theme for calendar

* feat(client): add new theme for calendar

Co-authored-by: Alex Fenko <[email protected]>

* feat(theme): fix gemini

* feat(theme): up version

* fix(client): padding for select and popup border (#1265)

* feat(select): update select

* feat(calendar): update calendar

* feat(attach): update attach

* fix(input): fix clear icon

* fix(popup): del shadow

* fix(link): fix link border color (#1271)

* fix(link): fix link border color

* fix(link): fix hovered & focus link color in alfa-white

* fix(calendar): fix selected calendar day style in dark theme (#1272)

* added box-shadow to popup elements in theme-dark (#1276)

* fix(*): fix input styles for dark and color theme (#1278)

* WIP: fix gemini tests (#1283)

* fix(*): fix attach and button component

* fix(*): fix components before sidebar

* feat(test): update gemini BREAKING CHANGE

Co-authored-by: Alex Fenko <[email protected]>
Co-authored-by: PoytaL <[email protected]>
Co-authored-by: Valeryi Lukin <[email protected]>
Co-authored-by: Лукин Валерий Николаевич <[email protected]>
Co-authored-by: Igor Maslov <[email protected]>
Co-authored-by: Nadezzdi <[email protected]>
Co-authored-by: Nadine <[email protected]>
Co-authored-by: SNosenko <[email protected]>
Co-authored-by: Aleksandr Dyuzhikov <[email protected]>

Author: 10 people

.gitignore

@@ -12,3 +12,4 @@ yarn-error.log
 coverage/
 gemini-coverage/
 gemini-report/
+gemini/

gemini-utils/ok-icon/index.tsx

@@ -0,0 +1,7 @@
+import OkIcon from './ok-icon';
+import OkColorIcon from './ok-icon-color';
+
+export {
+    OkIcon,
+    OkColorIcon,
+};

gemini-utils/ok-icon/ok-icon-color.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import {
+    OkLColorIcon, OkMColorIcon, OkSColorIcon, OkXlColorIcon,
+} from '@alfalab/icons-classic';
+
+const icons = {
+    s: <OkSColorIcon />,
+    l: <OkLColorIcon />,
+    xl: <OkXlColorIcon />,
+    m: <OkMColorIcon />,
+};
+
+type Props = {
+    size: string;
+}
+
+const OkColorIcon: FC<Props> = ({ size }) => icons[size] || <OkMColorIcon />;
+
+export default OkColorIcon;

gemini-utils/ok-icon/ok-icon.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import {
+    OkLIcon, OkMIcon, OkSIcon, OkXlIcon,
+} from '@alfalab/icons-classic';
+
+const icons = {
+    s: <OkSIcon />,
+    l: <OkLIcon />,
+    xl: <OkXlIcon />,
+    m: <OkMIcon />,
+};
+
+type Props = {
+    size: string;
+}
+
+const OkIcon: FC<Props> = ({ size }) => icons[size] || <OkMIcon />;
+
+export default OkIcon;

gemini/button.gemini.js

@@ -1,6 +1,7 @@
+import React from 'react';
 import Button from '../src/button';
-import IconOk from '../src/icon/ui/ok';
 import GeminiBox from '../gemini-utils/gemini-box/gemini-box';
+import { OkIcon } from '../gemini-utils/ok-icon';
 
 const NAME = 'button';
 const THEMES = ['alfa-on-color', 'alfa-on-white'];
@@ -22,7 +23,7 @@ geminiReact.suite(NAME, () => {
             const sizeSelector = `${NAME}_size_${size}`;
 
             PROP_SETS
-                .concat([{ icon: <IconOk size={ size } /> }])
+                .concat([{ icon: <OkIcon size={ size } /> }])
                 .forEach((set, index) => {
                     const selector = `${themeSelector}.${sizeSelector}.${NAME}_prop-set_${index + 1}`;
 

gemini/calendar-input.gemini.js

@@ -1,6 +1,6 @@
 import CalendarInput from '../src/calendar-input';
-import IconOk from '../src/icon/ui/ok';
 import GeminiBox from '../gemini-utils/gemini-box/gemini-box';
+import { OkColorIcon } from '../gemini-utils/ok-icon';
 
 const DATE = '12.04.2017';
 
@@ -19,7 +19,7 @@ function renderAddons(calendarInputSize) {
     }
 
     return (
-        <IconOk size={ iconSize } colored={ true } />
+        <OkColorIcon size={ iconSize } />
     );
 }
 

gemini/notification.gemini.js

@@ -1,5 +1,5 @@
-import IconOk from '../src/icon/ui/ok';
 import Notification from '../src/notification';
+import { OkColorIcon } from '../gemini-utils/ok-icon';
 
 const NAME = 'notification';
 
@@ -25,7 +25,7 @@ const PROP_SETS = [
     },
     {
         visible: true,
-        icon: <IconOk name="action-ok" colored={ true } size="m" />,
+        icon: <OkColorIcon size="m" />,
         status: 'ok',
         offset: 10,
         stickTo: 'left',