@dss-kit/ui-kit 0.2.19 → 0.2.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -21
- package/dist/components/controls/Input/Input.d.ts +2 -1
- package/dist/components/controls/Input/Input.d.ts.map +1 -1
- package/dist/components/controls/Select/Select.d.ts +4 -1
- package/dist/components/controls/Select/Select.d.ts.map +1 -1
- package/dist/styles/utils/breakpoints/base.scss +11 -11
- package/dist/styles/utils/breakpoints/index.scss +3 -3
- package/dist/styles/utils/breakpoints/screen.scss +61 -61
- package/dist/styles/utils/breakpoints/semantic.scss +31 -31
- package/dist/styles/utils/fonts/font-family.scss +3 -3
- package/dist/styles/utils/fonts/index.scss +1 -1
- package/dist/styles/utils/index.scss +5 -5
- package/dist/styles/utils/size/index.scss +1 -1
- package/dist/styles/utils/size/modifiers.scss +40 -40
- package/dist/styles/utils/style/index.scss +1 -1
- package/dist/styles/utils/style/variants.scss +34 -34
- package/dist/styles/utils/typography/_font-weight.scss +33 -33
- package/dist/styles/utils/typography/_variants.scss +85 -85
- package/dist/styles/utils/typography/index.scss +2 -2
- package/dist/ui-kit.cjs.js +19 -19
- package/dist/ui-kit.cjs.js.map +1 -1
- package/dist/ui-kit.css +1 -1
- package/dist/ui-kit.es.js +1669 -1661
- package/dist/ui-kit.es.js.map +1 -1
- package/package.json +92 -92
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
# UI Kit
|
|
2
|
-
|
|
3
|
-
Библиотека React компонентов с дизайн-системой для внутренних проектов.
|
|
4
|
-
|
|
5
|
-
## Включает:
|
|
6
|
-
|
|
7
|
-
- React компоненты
|
|
8
|
-
- CSS переменные и токены дизайна
|
|
9
|
-
- SCSS утилиты и миксины
|
|
10
|
-
- TypeScript типы
|
|
11
|
-
- SVG иконки
|
|
12
|
-
- Провайдеры тем (ThemeProviderScoped)
|
|
13
|
-
|
|
14
|
-
## Документация
|
|
15
|
-
|
|
16
|
-
Ссылки на более подробную документацию по разделам
|
|
17
|
-
|
|
18
|
-
- **[Сборка](./docs/build/index.md)** - команды сборки, публикация в npm, конфигурации Vite и т.д.
|
|
19
|
-
- **[Использование](./docs/usage/index.md)** - как использовать UI Kit в проектах, подключение стилей, примеры компонентов
|
|
20
|
-
- **[Стили](./docs/styles/index.md)** - подключение шрифтов, CSS переменных, базовые стили и миксины
|
|
21
|
-
- **[Утилиты](./docs/utils/index.md)** - функции хелперы
|
|
1
|
+
# UI Kit
|
|
2
|
+
|
|
3
|
+
Библиотека React компонентов с дизайн-системой для внутренних проектов.
|
|
4
|
+
|
|
5
|
+
## Включает:
|
|
6
|
+
|
|
7
|
+
- React компоненты
|
|
8
|
+
- CSS переменные и токены дизайна
|
|
9
|
+
- SCSS утилиты и миксины
|
|
10
|
+
- TypeScript типы
|
|
11
|
+
- SVG иконки
|
|
12
|
+
- Провайдеры тем (ThemeProviderScoped)
|
|
13
|
+
|
|
14
|
+
## Документация
|
|
15
|
+
|
|
16
|
+
Ссылки на более подробную документацию по разделам
|
|
17
|
+
|
|
18
|
+
- **[Сборка](./docs/build/index.md)** - команды сборки, публикация в npm, конфигурации Vite и т.д.
|
|
19
|
+
- **[Использование](./docs/usage/index.md)** - как использовать UI Kit в проектах, подключение стилей, примеры компонентов
|
|
20
|
+
- **[Стили](./docs/styles/index.md)** - подключение шрифтов, CSS переменных, базовые стили и миксины
|
|
21
|
+
- **[Утилиты](./docs/utils/index.md)** - функции хелперы
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { PrimaryType, SecondaryType } from '../../../types';
|
|
2
3
|
/**
|
|
3
4
|
* Императивный интерфейс для работы с Input через ref.
|
|
4
5
|
*/
|
|
@@ -29,7 +30,7 @@ type CommonProps = {
|
|
|
29
30
|
/** Суффикс (элемент после поля) */
|
|
30
31
|
suffix?: React.ReactNode;
|
|
31
32
|
/** Цвет фона */
|
|
32
|
-
background?:
|
|
33
|
+
background?: PrimaryType | SecondaryType;
|
|
33
34
|
/** Кнопка очистки значения */
|
|
34
35
|
showClearButton?: boolean;
|
|
35
36
|
/** Заблокированное состояние */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA2B1D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oBAAoB;IACpB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,KAAK,WAAW,GAAG;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mCAAmC;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB;IAChB,UAAU,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC;IACzC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAClC,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACrC,CAAC;AAEJ;;GAEG;AACH,KAAK,oBAAoB,GAAG,WAAW,GACrC,IAAI,CACF,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC1D,GAAG;IACF,SAAS,EAAE,IAAI,CAAC;IAChB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAChE,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAElE;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,6EAsPhB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { PrimaryType, SecondaryType } from '../../../types';
|
|
2
3
|
export type SelectSize = "xs" | "sm" | "md";
|
|
3
4
|
type RenderInputContext<I> = {
|
|
4
5
|
mode: "single";
|
|
@@ -120,6 +121,8 @@ export type SelectProps<I, V> = {
|
|
|
120
121
|
dropdownMaxWidth?: number;
|
|
121
122
|
/** Минимальная ширина дропдауна в пикселях. */
|
|
122
123
|
dropdownMinWidth?: number;
|
|
124
|
+
/** Цвет фона */
|
|
125
|
+
background?: PrimaryType | SecondaryType;
|
|
123
126
|
} & (I extends string | number ? {
|
|
124
127
|
/**
|
|
125
128
|
* Функция, которая из элемента `I` возвращает значение `V`.
|
|
@@ -192,6 +195,6 @@ export type SelectProps<I, V> = {
|
|
|
192
195
|
* =========================================================================
|
|
193
196
|
* - useControlled: управляет состоянием значения в controlled/uncontrolled режиме
|
|
194
197
|
*/
|
|
195
|
-
export declare function Select<I, V extends string | number>({ value, onChange, multiple, returnedValue, renderItem, renderInputItem, renderSingleInputItem, renderMultipleInputItem, renderDropdownItem, placeholder, items, fullWidth, size, showDefaultItem, disabled, label, firstItem, lastItem, observer, emptyText, onBlur, prompt, error, errorText, dropdownMaxWidth, dropdownMinWidth, minWidth, width, }: SelectProps<I, V>): import("react/jsx-runtime").JSX.Element;
|
|
198
|
+
export declare function Select<I, V extends string | number>({ value, onChange, multiple, returnedValue, renderItem, renderInputItem, renderSingleInputItem, renderMultipleInputItem, renderDropdownItem, placeholder, items, fullWidth, size, showDefaultItem, disabled, label, firstItem, lastItem, observer, emptyText, onBlur, prompt, error, errorText, dropdownMaxWidth, dropdownMinWidth, minWidth, width, background, }: SelectProps<I, V>): import("react/jsx-runtime").JSX.Element;
|
|
196
199
|
export {};
|
|
197
200
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/controls/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
@mixin breakpoint($breakpoint, $direction: max) {
|
|
2
|
-
@if $direction == min {
|
|
3
|
-
@media (min-width: $breakpoint) {
|
|
4
|
-
@content;
|
|
5
|
-
}
|
|
6
|
-
} @else if $direction == max {
|
|
7
|
-
@media (max-width: ($breakpoint - 1px)) {
|
|
8
|
-
@content;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
}
|
|
1
|
+
@mixin breakpoint($breakpoint, $direction: max) {
|
|
2
|
+
@if $direction == min {
|
|
3
|
+
@media (min-width: $breakpoint) {
|
|
4
|
+
@content;
|
|
5
|
+
}
|
|
6
|
+
} @else if $direction == max {
|
|
7
|
+
@media (max-width: ($breakpoint - 1px)) {
|
|
8
|
+
@content;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@forward "base";
|
|
2
|
-
@forward "screen";
|
|
3
|
-
@forward "semantic";
|
|
1
|
+
@forward "base";
|
|
2
|
+
@forward "screen";
|
|
3
|
+
@forward "semantic";
|
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
@use "./base.scss";
|
|
2
|
-
|
|
3
|
-
@mixin bp-1920($direction: max) {
|
|
4
|
-
@include base.breakpoint(1920px, $direction) {
|
|
5
|
-
@content;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@mixin bp-1440($direction: max) {
|
|
10
|
-
@include base.breakpoint(1440px, $direction) {
|
|
11
|
-
@content;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@mixin bp-1280($direction: max) {
|
|
16
|
-
@include base.breakpoint(1280px, $direction) {
|
|
17
|
-
@content;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@mixin bp-1200($direction: max) {
|
|
22
|
-
@include base.breakpoint(1200px, $direction) {
|
|
23
|
-
@content;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@mixin bp-1024($direction: max) {
|
|
28
|
-
@include base.breakpoint(1024px, $direction) {
|
|
29
|
-
@content;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@mixin bp-992($direction: max) {
|
|
34
|
-
@include base.breakpoint(992px, $direction) {
|
|
35
|
-
@content;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@mixin bp-768($direction: max) {
|
|
40
|
-
@include base.breakpoint(768px, $direction) {
|
|
41
|
-
@content;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@mixin bp-576($direction: max) {
|
|
46
|
-
@include base.breakpoint(576px, $direction) {
|
|
47
|
-
@content;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
@mixin bp-480($direction: max) {
|
|
52
|
-
@include base.breakpoint(480px, $direction) {
|
|
53
|
-
@content;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@mixin bp-375($direction: max) {
|
|
58
|
-
@include base.breakpoint(375px, $direction) {
|
|
59
|
-
@content;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
1
|
+
@use "./base.scss";
|
|
2
|
+
|
|
3
|
+
@mixin bp-1920($direction: max) {
|
|
4
|
+
@include base.breakpoint(1920px, $direction) {
|
|
5
|
+
@content;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin bp-1440($direction: max) {
|
|
10
|
+
@include base.breakpoint(1440px, $direction) {
|
|
11
|
+
@content;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin bp-1280($direction: max) {
|
|
16
|
+
@include base.breakpoint(1280px, $direction) {
|
|
17
|
+
@content;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin bp-1200($direction: max) {
|
|
22
|
+
@include base.breakpoint(1200px, $direction) {
|
|
23
|
+
@content;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin bp-1024($direction: max) {
|
|
28
|
+
@include base.breakpoint(1024px, $direction) {
|
|
29
|
+
@content;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin bp-992($direction: max) {
|
|
34
|
+
@include base.breakpoint(992px, $direction) {
|
|
35
|
+
@content;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@mixin bp-768($direction: max) {
|
|
40
|
+
@include base.breakpoint(768px, $direction) {
|
|
41
|
+
@content;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@mixin bp-576($direction: max) {
|
|
46
|
+
@include base.breakpoint(576px, $direction) {
|
|
47
|
+
@content;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@mixin bp-480($direction: max) {
|
|
52
|
+
@include base.breakpoint(480px, $direction) {
|
|
53
|
+
@content;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin bp-375($direction: max) {
|
|
58
|
+
@include base.breakpoint(375px, $direction) {
|
|
59
|
+
@content;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
@use "./screen.scss";
|
|
2
|
-
|
|
3
|
-
@mixin bp-xs($direction: max) {
|
|
4
|
-
@include screen.bp-480($direction) {
|
|
5
|
-
@content;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@mixin bp-sm($direction: max) {
|
|
10
|
-
@include screen.bp-576($direction) {
|
|
11
|
-
@content;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@mixin bp-md($direction: max) {
|
|
16
|
-
@include screen.bp-768($direction) {
|
|
17
|
-
@content;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@mixin bp-lg($direction: max) {
|
|
22
|
-
@include screen.bp-992($direction) {
|
|
23
|
-
@content;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@mixin bp-xl($direction: max) {
|
|
28
|
-
@include screen.bp-1200($direction) {
|
|
29
|
-
@content;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
1
|
+
@use "./screen.scss";
|
|
2
|
+
|
|
3
|
+
@mixin bp-xs($direction: max) {
|
|
4
|
+
@include screen.bp-480($direction) {
|
|
5
|
+
@content;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin bp-sm($direction: max) {
|
|
10
|
+
@include screen.bp-576($direction) {
|
|
11
|
+
@content;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin bp-md($direction: max) {
|
|
16
|
+
@include screen.bp-768($direction) {
|
|
17
|
+
@content;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin bp-lg($direction: max) {
|
|
22
|
+
@include screen.bp-992($direction) {
|
|
23
|
+
@content;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin bp-xl($direction: max) {
|
|
28
|
+
@include screen.bp-1200($direction) {
|
|
29
|
+
@content;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@mixin Inter {
|
|
2
|
-
font-family: Inter, sans-serif;
|
|
3
|
-
}
|
|
1
|
+
@mixin Inter {
|
|
2
|
+
font-family: Inter, sans-serif;
|
|
3
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward "font-family";
|
|
1
|
+
@forward "font-family";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@forward "breakpoints";
|
|
2
|
-
@forward "fonts";
|
|
3
|
-
@forward "size";
|
|
4
|
-
@forward "typography";
|
|
5
|
-
@forward "style";
|
|
1
|
+
@forward "breakpoints";
|
|
2
|
+
@forward "fonts";
|
|
3
|
+
@forward "size";
|
|
4
|
+
@forward "typography";
|
|
5
|
+
@forward "style";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward "modifiers";
|
|
1
|
+
@forward "modifiers";
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
@mixin xxs-modifier {
|
|
2
|
-
&_2xsSize {
|
|
3
|
-
@content;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
@mixin xs-modifier {
|
|
8
|
-
&_xsSize {
|
|
9
|
-
@content;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@mixin sm-modifier {
|
|
14
|
-
&_smSize {
|
|
15
|
-
@content;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@mixin md-modifier {
|
|
20
|
-
&_mdSize {
|
|
21
|
-
@content;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@mixin lg-modifier {
|
|
26
|
-
&_lgSize {
|
|
27
|
-
@content;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin xl-modifier {
|
|
32
|
-
&_xlSize {
|
|
33
|
-
@content;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@mixin xxl-modifier {
|
|
38
|
-
&_2xlSize {
|
|
39
|
-
@content;
|
|
40
|
-
}
|
|
1
|
+
@mixin xxs-modifier {
|
|
2
|
+
&_2xsSize {
|
|
3
|
+
@content;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@mixin xs-modifier {
|
|
8
|
+
&_xsSize {
|
|
9
|
+
@content;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin sm-modifier {
|
|
14
|
+
&_smSize {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin md-modifier {
|
|
20
|
+
&_mdSize {
|
|
21
|
+
@content;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin lg-modifier {
|
|
26
|
+
&_lgSize {
|
|
27
|
+
@content;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin xl-modifier {
|
|
32
|
+
&_xlSize {
|
|
33
|
+
@content;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin xxl-modifier {
|
|
38
|
+
&_2xlSize {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward "variants";
|
|
1
|
+
@forward "variants";
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
|
|
2
|
-
@each $style, $color in $map {
|
|
3
|
-
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
4
|
-
color: $color;
|
|
5
|
-
}
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
|
|
10
|
-
border: $width solid transparent;
|
|
11
|
-
@each $style, $color in $map {
|
|
12
|
-
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
13
|
-
border-color: $color;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
|
|
19
|
-
@each $style, $color in $map {
|
|
20
|
-
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
21
|
-
background-color: $color;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
|
|
27
|
-
@each $style, $color in $map {
|
|
28
|
-
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
29
|
-
svg {
|
|
30
|
-
color: $color;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
1
|
+
@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
|
|
2
|
+
@each $style, $color in $map {
|
|
3
|
+
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
4
|
+
color: $color;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
|
|
10
|
+
border: $width solid transparent;
|
|
11
|
+
@each $style, $color in $map {
|
|
12
|
+
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
13
|
+
border-color: $color;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
|
|
19
|
+
@each $style, $color in $map {
|
|
20
|
+
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
21
|
+
background-color: $color;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
|
|
27
|
+
@each $style, $color in $map {
|
|
28
|
+
&_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
|
|
29
|
+
svg {
|
|
30
|
+
color: $color;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
|
|
3
|
-
$font-weight: (
|
|
4
|
-
regular: 400,
|
|
5
|
-
medium: 500,
|
|
6
|
-
semibold: 600,
|
|
7
|
-
bold: 700,
|
|
8
|
-
) !default;
|
|
9
|
-
|
|
10
|
-
@function font-weight-token($name) {
|
|
11
|
-
@if not map.has-key($font-weight, $name) {
|
|
12
|
-
@error "Unknown font-weight token `#{$name}`";
|
|
13
|
-
}
|
|
14
|
-
@return map.get($font-weight, $name);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@mixin font-weight($name) {
|
|
18
|
-
font-weight: font-weight-token($name);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// опциональные алиасы ради DX/совместимости
|
|
22
|
-
@mixin font-regular {
|
|
23
|
-
@include font-weight(regular);
|
|
24
|
-
}
|
|
25
|
-
@mixin font-medium {
|
|
26
|
-
@include font-weight(medium);
|
|
27
|
-
}
|
|
28
|
-
@mixin font-semibold {
|
|
29
|
-
@include font-weight(semibold);
|
|
30
|
-
}
|
|
31
|
-
@mixin font-bold {
|
|
32
|
-
@include font-weight(bold);
|
|
33
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
$font-weight: (
|
|
4
|
+
regular: 400,
|
|
5
|
+
medium: 500,
|
|
6
|
+
semibold: 600,
|
|
7
|
+
bold: 700,
|
|
8
|
+
) !default;
|
|
9
|
+
|
|
10
|
+
@function font-weight-token($name) {
|
|
11
|
+
@if not map.has-key($font-weight, $name) {
|
|
12
|
+
@error "Unknown font-weight token `#{$name}`";
|
|
13
|
+
}
|
|
14
|
+
@return map.get($font-weight, $name);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin font-weight($name) {
|
|
18
|
+
font-weight: font-weight-token($name);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// опциональные алиасы ради DX/совместимости
|
|
22
|
+
@mixin font-regular {
|
|
23
|
+
@include font-weight(regular);
|
|
24
|
+
}
|
|
25
|
+
@mixin font-medium {
|
|
26
|
+
@include font-weight(medium);
|
|
27
|
+
}
|
|
28
|
+
@mixin font-semibold {
|
|
29
|
+
@include font-weight(semibold);
|
|
30
|
+
}
|
|
31
|
+
@mixin font-bold {
|
|
32
|
+
@include font-weight(bold);
|
|
33
|
+
}
|