@dss-kit/ui-kit 0.0.20 → 0.0.22

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.
Files changed (33) hide show
  1. package/README.md +21 -21
  2. package/dist/components/index.d.ts +1 -0
  3. package/dist/components/index.d.ts.map +1 -1
  4. package/dist/components/shared/Hint/Hint.d.ts +31 -0
  5. package/dist/components/shared/Hint/Hint.d.ts.map +1 -0
  6. package/dist/components/shared/Hint/Hint.stories.d.ts +28 -0
  7. package/dist/components/shared/Hint/Hint.stories.d.ts.map +1 -0
  8. package/dist/components/shared/Hint/index.d.ts +2 -0
  9. package/dist/components/shared/Hint/index.d.ts.map +1 -0
  10. package/dist/components/shared/index.d.ts +3 -0
  11. package/dist/components/shared/index.d.ts.map +1 -0
  12. package/dist/root.css +1 -346
  13. package/dist/styles/utils/breakpoints/base.scss +11 -11
  14. package/dist/styles/utils/breakpoints/index.scss +3 -3
  15. package/dist/styles/utils/breakpoints/screen.scss +67 -67
  16. package/dist/styles/utils/breakpoints/semantic.scss +31 -31
  17. package/dist/styles/utils/fonts/font-family.scss +3 -3
  18. package/dist/styles/utils/fonts/font-weight.scss +59 -59
  19. package/dist/styles/utils/fonts/index.scss +2 -2
  20. package/dist/styles/utils/index.scss +5 -5
  21. package/dist/styles/utils/size/index.scss +1 -1
  22. package/dist/styles/utils/size/modifiers.scss +29 -29
  23. package/dist/styles/utils/style/index.scss +1 -1
  24. package/dist/styles/utils/style/variants.scss +34 -34
  25. package/dist/styles/utils/typography/index.scss +2 -2
  26. package/dist/styles/utils/typography/text.scss +52 -52
  27. package/dist/styles/utils/typography/title.scss +42 -42
  28. package/dist/ui-kit.cjs.js +11 -11
  29. package/dist/ui-kit.cjs.js.map +1 -1
  30. package/dist/ui-kit.css +1 -1
  31. package/dist/ui-kit.es.js +507 -391
  32. package/dist/ui-kit.es.js.map +1 -1
  33. package/package.json +75 -75
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)** - функции хелперы
package/dist/components/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './controls';
2
+ export * from './shared';
2
3
  export * from './typography';
3
4
  //# sourceMappingURL=index.d.ts.map
package/dist/components/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}
package/dist/components/shared/Hint/Hint.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { default as React } from 'react';
2
+ import { AccentType, NegativeType, NeutralType, PositiveType, Size, WarningType } from '../../../types/tokens.types';
3
+ type HintColor = WarningType | NegativeType | PositiveType | AccentType | NeutralType;
4
+ type HintVariant = 'solid' | 'soft';
5
+ type HintSize = Extract<Size, 'md' | 'sm'>;
6
+ /**
7
+ * Props for the Hint component.
8
+ */
9
+ export interface HintProps {
10
+ /** Main title text */
11
+ title: React.ReactNode;
12
+ /** Optional subtitle text */
13
+ subtitle?: React.ReactNode;
14
+ /** Color of the hint (status) */
15
+ color?: HintColor;
16
+ /** Visual variant */
17
+ variant?: HintVariant;
18
+ /** Size of the hint */
19
+ size?: HintSize;
20
+ /** Custom icon node (overrides default) */
21
+ icon?: React.ReactNode;
22
+ /** Disabled state */
23
+ disabled?: boolean;
24
+ /** Additional className for root */
25
+ className?: string;
26
+ /** Inline styles for root */
27
+ style?: React.CSSProperties;
28
+ }
29
+ export declare const Hint: React.FC<HintProps>;
30
+ export {};
31
+ //# sourceMappingURL=Hint.d.ts.map
package/dist/components/shared/Hint/Hint.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Hint/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAa9G,KAAK,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AACtF,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AACpC,KAAK,QAAQ,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6CpC,CAAC"}
package/dist/components/shared/Hint/Hint.stories.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { Hint } from './Hint';
3
+ declare const meta: Meta<typeof Hint>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const WarningSoftM: Story;
7
+ export declare const WarningSoftS: Story;
8
+ export declare const ErrorSoftM: Story;
9
+ export declare const ErrorSoftS: Story;
10
+ export declare const SuccessSoftM: Story;
11
+ export declare const SuccessSoftS: Story;
12
+ export declare const InfoSoftM: Story;
13
+ export declare const InfoSoftS: Story;
14
+ export declare const NeutralSoftM: Story;
15
+ export declare const NeutralSoftS: Story;
16
+ export declare const WarningSolidM: Story;
17
+ export declare const WarningSolidS: Story;
18
+ export declare const ErrorSolidM: Story;
19
+ export declare const ErrorSolidS: Story;
20
+ export declare const SuccessSolidM: Story;
21
+ export declare const SuccessSolidS: Story;
22
+ export declare const InfoSolidM: Story;
23
+ export declare const InfoSolidS: Story;
24
+ export declare const NeutralSolidM: Story;
25
+ export declare const NeutralSolidS: Story;
26
+ export declare const Disabled: Story;
27
+ export declare const CustomIcon: Story;
28
+ //# sourceMappingURL=Hint.stories.d.ts.map
package/dist/components/shared/Hint/Hint.stories.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Hint.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Hint/Hint.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA4B3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,YAAY,EAAE,KAAmE,CAAC;AAC/F,eAAO,MAAM,YAAY,EAAE,KAAmE,CAAC;AAC/F,eAAO,MAAM,UAAU,EAAE,KAAoE,CAAC;AAC9F,eAAO,MAAM,UAAU,EAAE,KAAoE,CAAC;AAC9F,eAAO,MAAM,YAAY,EAAE,KAAoE,CAAC;AAChG,eAAO,MAAM,YAAY,EAAE,KAAoE,CAAC;AAChG,eAAO,MAAM,SAAS,EAAE,KAAkE,CAAC;AAC3F,eAAO,MAAM,SAAS,EAAE,KAAkE,CAAC;AAC3F,eAAO,MAAM,YAAY,EAAE,KAAmE,CAAC;AAC/F,eAAO,MAAM,YAAY,EAAE,KAAmE,CAAC;AAG/F,eAAO,MAAM,aAAa,EAAE,KAAoE,CAAC;AACjG,eAAO,MAAM,aAAa,EAAE,KAAoE,CAAC;AACjG,eAAO,MAAM,WAAW,EAAE,KAAqE,CAAC;AAChG,eAAO,MAAM,WAAW,EAAE,KAAqE,CAAC;AAChG,eAAO,MAAM,aAAa,EAAE,KAAqE,CAAC;AAClG,eAAO,MAAM,aAAa,EAAE,KAAqE,CAAC;AAClG,eAAO,MAAM,UAAU,EAAE,KAAmE,CAAC;AAC7F,eAAO,MAAM,UAAU,EAAE,KAAmE,CAAC;AAC7F,eAAO,MAAM,aAAa,EAAE,KAAoE,CAAC;AACjG,eAAO,MAAM,aAAa,EAAE,KAAoE,CAAC;AAEjG,eAAO,MAAM,QAAQ,EAAE,KAAoC,CAAC;AAE5D,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC"}
package/dist/components/shared/Hint/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './Hint';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/shared/Hint/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/Hint/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
package/dist/components/shared/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './Avatar';
2
+ export * from './Hint';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/shared/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
package/dist/root.css CHANGED
@@ -1,346 +1 @@
1
- @charset "UTF-8";
2
- :root {
3
- --accent-10: #001033;
4
- --accent-20: #002166;
5
- --accent-30: #003199;
6
- --accent-40: #0042cc;
7
- --accent-50: #0052ff;
8
- --accent-50-8: rgba(0, 82, 255, .08);
9
- --accent-50-12: rgba(0, 82, 255, .12);
10
- --accent-60: #3375ff;
11
- --accent-70: #6697ff;
12
- --accent-80: #99baff;
13
- --accent-90: #ccdcff;
14
- --accent-96: #ebf1ff;
15
- --accent-98: #f5f8ff;
16
- --neutral-10: #131720;
17
- --neutral-15: #1c2230;
18
- --neutral-20: #262e40;
19
- --neutral-30: #394560;
20
- --neutral-40: #4c5c80;
21
- --neutral-50: #5f73a0;
22
- --neutral-60: #7f8fb3;
23
- --neutral-60-8: rgba(127, 143, 179, .08);
24
- --neutral-60-12: rgba(127, 143, 179, .12);
25
- --neutral-60-16: rgba(127, 143, 179, .16);
26
- --neutral-70: #9fabc6;
27
- --neutral-80: #bfc7d9;
28
- --neutral-86: #d2d8e4;
29
- --neutral-90: #dfe3ec;
30
- --neutral-90-10: rgba(223, 227, 236, .1);
31
- --neutral-90-15: rgba(223, 227, 236, .15);
32
- --neutral-90-20: rgba(223, 227, 236, .2);
33
- --neutral-92: #e5e9f0;
34
- --neutral-96: #f2f4f7;
35
- --neutral-98: #f9f9fb;
36
- --neutral-100: #ffffff;
37
- --negative-10: #320101;
38
- --negative-20: #640202;
39
- --negative-30: #950404;
40
- --negative-40: #c70505;
41
- --negative-50: #f90606;
42
- --negative-60: #fa3838;
43
- --negative-60-8: rgba(250, 56, 56, .08);
44
- --negative-60-12: rgba(250, 56, 56, .12);
45
- --negative-70: #fb6a6a;
46
- --negative-80: #fd9b9b;
47
- --negative-90: #fecdcd;
48
- --negative-92: #fed7d7;
49
- --negative-96: #ffebeb;
50
- --negative-98: #fff5f5;
51
- --positive-10: #11270c;
52
- --positive-20: #234e18;
53
- --positive-30: #347425;
54
- --positive-40: #469b31;
55
- --positive-50: #57c23d;
56
- --positive-50-8: rgba(87, 194, 61, .08);
57
- --positive-50-12: rgba(87, 194, 61, .12);
58
- --positive-60: #79ce64;
59
- --positive-70: #9ada8b;
60
- --positive-80: #bce7b1;
61
- --positive-90: #ddf3d8;
62
- --positive-92: #e4f5e0;
63
- --positive-96: #f2faef;
64
- --warning-10: #663d00;
65
- --warning-20: #663d00;
66
- --warning-30: #985b01;
67
- --warning-40: #cb7a01;
68
- --warning-50: #fe9801;
69
- --warning-60: #fead34;
70
- --warning-60-8: rgba(254, 173, 52, .08);
71
- --warning-60-12: rgba(254, 173, 52, .12);
72
- --warning-70: #fec167;
73
- --warning-80: #ffd699;
74
- --warning-90: #ffeacc;
75
- --warning-92: #ffefd6;
76
- --warning-96: #fff7eb;
77
- --border-accent-primary: var(--accent-60);
78
- --border-accent-primary-hover: var(--accent-50);
79
- --border-accent-secondary: var(--accent-90);
80
- --border-accent-secondary-hover: var(--accent-80);
81
- --border-negative-primary: var(--negative-60);
82
- --border-negative-primary-hover: var(--negative-50);
83
- --border-negative-secondary: var(--negative-90);
84
- --border-negative-secondary-hover: var(--negative-80);
85
- --border-positive-primary: var(--positive-60);
86
- --border-positive-primary-hover: var(--positive-50);
87
- --border-positive-secondary: var(--positive-90);
88
- --border-positive-secondary-hover: var(--positive-80);
89
- --border-warning-primary: var(--warning-60);
90
- --border-warning-primary-hover: var(--warning-50);
91
- --border-warning-secondary: var(--warning-90);
92
- --border-warning-secondary-hover: var(--warning-80);
93
- --border-neutral-primary: var(--neutral-60);
94
- --border-neutral-primary-hover: var(--neutral-50);
95
- --border-neutral-alpha-basic: var(--neutral-60-12);
96
- --border-neutral-alpha-low: var(--neutral-60-8);
97
- --border-neutral-alpha-high: var(--neutral-60-16);
98
- --text-primary: var(--neutral-20);
99
- --text-primary-hover: var(--neutral-15);
100
- --text-secondary: var(--neutral-40);
101
- --text-secondary-hover: var(--neutral-30);
102
- --text-tertiary: var(--neutral-60);
103
- --text-tertiary-hover: var(--neutral-50);
104
- --text-positive: var(--positive-50);
105
- --text-positive-hover: var(--positive-40);
106
- --text-negative: var(--negative-60);
107
- --text-negative-hover: var(--negative-50);
108
- --text-warning: var(--warning-60);
109
- --text-warning-hover: var(--warning-50);
110
- --text-accent: var(--accent-60);
111
- --text-accent-hover: var(--accent-50);
112
- --text-inverse: var(--neutral-100);
113
- --icon-primary: var(--neutral-20);
114
- --icon-primary-hover: var(--neutral-15);
115
- --icon-secondary: var(--neutral-40);
116
- --icon-secondary-hover: var(--neutral-30);
117
- --icon-tertiary: var(--neutral-60);
118
- --icon-tertiary-hover: var(--neutral-50);
119
- --icon-positive: var(--positive-50);
120
- --icon-positive-hover: var(--positive-40);
121
- --icon-negative: var(--negative-60);
122
- --icon-negative-hover: var(--negative-50);
123
- --icon-warning: var(--warning-60);
124
- --icon-warning-hover: var(--warning-50);
125
- --icon-accent: var(--accent-60);
126
- --icon-accent-hover: var(--accent-50);
127
- --icon-inverse: var(--neutral-100);
128
- --fill-accent-primary: var(--accent-60);
129
- --fill-accent-primary-hover: var(--accent-50);
130
- --fill-accent-secondary: var(--accent-96);
131
- --fill-accent-secondary-hover: var(--accent-90);
132
- --fill-accent-tint: var(--accent-50-12);
133
- --fill-accent-tint-low: var(--accent-50-8);
134
- --fill-positive-primary: var(--positive-60);
135
- --fill-positive-primary-hover: var(--positive-50);
136
- --fill-positive-secondary: var(--positive-96);
137
- --fill-positive-secondary-hover: var(--positive-90);
138
- --fill-positive-tint: var(--positive-50-12);
139
- --fill-positive-tint-low: var(--positive-50-8);
140
- --fill-negative-primary: var(--negative-60);
141
- --fill-negative-primary-hover: var(--negative-50);
142
- --fill-negative-secondary: var(--negative-96);
143
- --fill-negative-secondary-hover: var(--negative-92);
144
- --fill-negative-tint: var(--negative-60-12);
145
- --fill-negative-tint-low: var(--negative-60-8);
146
- --fill-warning-primary: var(--warning-60);
147
- --fill-warning-primary-hover: var(--warning-50);
148
- --fill-warning-secondary: var(--warning-96);
149
- --fill-warning-secondary-hover: var(--warning-90);
150
- --fill-warning-tint: var(--warning-60-12);
151
- --fill-warning-tint-low: var(--warning-60-8);
152
- --fill-neutral-secondary: var(--neutral-96);
153
- --fill-neutral-secondary-hover: var(--neutral-90);
154
- --fill-bg-primary: var(--neutral-100);
155
- --fill-bg-secondary: var(--neutral-98);
156
- --fill-bg-tertiary: var(--neutral-96);
157
- --fill-bg-elevation-primary: var(--neutral-90-20);
158
- --fill-bg-elevation-secondary: var(--neutral-90-15);
159
- --fill-bg-elevation-tertiary: var(--neutral-90-10);
160
- --status-accent: var(--accent-50);
161
- --status-accent-tint: var(--accent-50-12);
162
- --status-accent-tint-low: var(--accent-50-8);
163
- --status-negative: var(--negative-60);
164
- --status-negative-tint: var(--negative-60-12);
165
- --status-negative-tint-low: var(--negative-60-8);
166
- --status-positive: var(--positive-50);
167
- --status-positive-tint: var(--positive-50-12);
168
- --status-positive-tint-low: var(--positive-50-8);
169
- --status-warning: var(--warning-60);
170
- --status-warning-tint: var(--warning-60-12);
171
- --status-warning-tint-low: var(--warning-60-8);
172
- --status-neutral: var(--neutral-60);
173
- --status-neutral-tint: var(--neutral-60-12);
174
- --status-neutral-tint-low: var(--neutral-60-8);
175
- --corner-zero: 0;
176
- --corner-xs: 4px;
177
- --corner-sm: 8px;
178
- --corner-md: 12px;
179
- --corner-lg: 16px;
180
- --corner-xl: 20px;
181
- --corner-2xl: 24px;
182
- --corner-3xl: 32px;
183
- --corner-4xl: 40px;
184
- --corner-5xl: 48px;
185
- --corner-6xl: 56px;
186
- --corner-full-round: 1000px;
187
- --height-button-xs: 32px;
188
- --height-button-sm: 40px;
189
- --height-button-md: 48px;
190
- --height-button-lg: 56px;
191
- --height-avatar-sm: 32px;
192
- --height-avatar-md: 40px;
193
- --height-avatar-lg: 48px;
194
- --height-icon-xs: 16px;
195
- --height-icon-sm: 20px;
196
- --height-icon-md: 24px;
197
- --height-icon-lg: 32px;
198
- --height-icon-xl: 64px;
199
- --opacity-primary: 100;
200
- --opacity-secondary: 80;
201
- --opacity-tertiary: 60;
202
- --spacing-zero: 0;
203
- --spacing-xs: 4px;
204
- --spacing-sm: 8px;
205
- --spacing-md: 12px;
206
- --spacing-lg: 16px;
207
- --spacing-xl: 20px;
208
- --spacing-2xl: 24px;
209
- --spacing-3xl: 32px;
210
- --spacing-4xl: 40px;
211
- --spacing-5xl: 48px;
212
- --spacing-6xl: 56px;
213
- --spacing-7xl: 64px;
214
- --spacing-8xl: 72px;
215
- --spacing-9xl: 80px;
216
- --spacing-10xl: 96px;
217
- --transition-general: all .3s ease-in-out;
218
- font-family: Inter, sans-serif;
219
- word-break: break-word;
220
- font-size: 16px;
221
- line-height: 24px;
222
- font-weight: 400;
223
- color: var(--text-primary)
224
- }
225
-
226
- @layer reset {
227
- :root *, :root *:before, :root *:after {
228
- box-sizing: border-box;
229
- margin: 0;
230
- color: unset
231
- }
232
-
233
- :root ul[class], :root ol[class] {
234
- padding: 0
235
- }
236
-
237
- :root body, :root h1, :root h2, :root h3, :root h4, :root p, :root label, :root ul[class], :root ol[class], :root li, :root figure, :root figcaption, :root blockquote, :root dl, :root dd {
238
- margin: 0
239
- }
240
-
241
- :root label {
242
- display: block
243
- }
244
-
245
- :root html {
246
- scroll-behavior: smooth
247
- }
248
-
249
- :root body {
250
- min-height: 100dvh;
251
- text-rendering: optimizeSpeed;
252
- line-height: 1.5;
253
- margin: 0 !important
254
- }
255
-
256
- :root ul[class], :root ol[class] {
257
- list-style: none
258
- }
259
-
260
- :root a:not([class]) {
261
- text-decoration-skip-ink: auto
262
- }
263
-
264
- :root a, :root a:hover, :root a:checked {
265
- text-decoration: none;
266
- color: inherit
267
- }
268
-
269
- :root img {
270
- max-width: 100%;
271
- display: block
272
- }
273
-
274
- :root input, :root button, :root textarea, :root select, :root pre {
275
- font: inherit
276
- }
277
-
278
- :root input, :root textarea {
279
- outline: none;
280
- border: none;
281
- padding: 0
282
- }
283
-
284
- @media (prefers-reduced-motion: reduce) {
285
- :root * {
286
- animation-duration: .01ms !important;
287
- animation-iteration-count: 1 !important;
288
- transition-duration: .01ms !important;
289
- scroll-behavior: auto !important
290
- }
291
- }:root input::-webkit-outer-spin-button, :root input::-webkit-inner-spin-button {
292
- -webkit-appearance: none;
293
- margin: 0
294
- }
295
-
296
- :root input[type=number] {
297
- -moz-appearance: textfield
298
- }
299
-
300
- :root html {
301
- overflow-x: hidden;
302
- margin-right: calc(-1 * (100vw - 100%))
303
- }
304
-
305
- :root a:focus, :root button:focus, :root input:focus, :root textarea:focus {
306
- outline: none
307
- }
308
-
309
- :root button {
310
- cursor: pointer;
311
- padding: 0;
312
- background: transparent
313
- }
314
-
315
- :root button {
316
- border: none;
317
- outline: none
318
- }
319
-
320
- :root fieldset {
321
- border: 0;
322
- padding: 0;
323
- margin: 0;
324
- min-width: 0
325
- }
326
-
327
- :root div {
328
- outline: none
329
- }
330
-
331
- :root input[type=search]::-ms-clear {
332
- display: none;
333
- width: 0;
334
- height: 0
335
- }
336
-
337
- :root input[type=search]::-ms-reveal {
338
- display: none;
339
- width: 0;
340
- height: 0
341
- }
342
-
343
- :root input[type=search]::-webkit-search-decoration, :root input[type=search]::-webkit-search-cancel-button, :root input[type=search]::-webkit-search-results-button, :root input[type=search]::-webkit-search-results-decoration {
344
- display: none
345
- }
346
- }
1
+ @charset "UTF-8";:root{--accent-10: #001033;--accent-20: #002166;--accent-30: #003199;--accent-40: #0042cc;--accent-50: #0052ff;--accent-50-8: rgba(0, 82, 255, .08);--accent-50-12: rgba(0, 82, 255, .12);--accent-60: #3375ff;--accent-70: #6697ff;--accent-80: #99baff;--accent-90: #ccdcff;--accent-96: #ebf1ff;--accent-98: #f5f8ff;--neutral-10: #131720;--neutral-15: #1c2230;--neutral-20: #262e40;--neutral-30: #394560;--neutral-40: #4c5c80;--neutral-50: #5f73a0;--neutral-60: #7f8fb3;--neutral-60-8: rgba(127, 143, 179, .08);--neutral-60-12: rgba(127, 143, 179, .12);--neutral-60-16: rgba(127, 143, 179, .16);--neutral-70: #9fabc6;--neutral-80: #bfc7d9;--neutral-86: #d2d8e4;--neutral-90: #dfe3ec;--neutral-90-10: rgba(223, 227, 236, .1);--neutral-90-15: rgba(223, 227, 236, .15);--neutral-90-20: rgba(223, 227, 236, .2);--neutral-92: #e5e9f0;--neutral-96: #f2f4f7;--neutral-98: #f9f9fb;--neutral-100: #ffffff;--negative-10: #320101;--negative-20: #640202;--negative-30: #950404;--negative-40: #c70505;--negative-50: #f90606;--negative-60: #fa3838;--negative-60-8: rgba(250, 56, 56, .08);--negative-60-12: rgba(250, 56, 56, .12);--negative-70: #fb6a6a;--negative-80: #fd9b9b;--negative-90: #fecdcd;--negative-92: #fed7d7;--negative-96: #ffebeb;--negative-98: #fff5f5;--positive-10: #11270c;--positive-20: #234e18;--positive-30: #347425;--positive-40: #469b31;--positive-50: #57c23d;--positive-50-8: rgba(87, 194, 61, .08);--positive-50-12: rgba(87, 194, 61, .12);--positive-60: #79ce64;--positive-70: #9ada8b;--positive-80: #bce7b1;--positive-90: #ddf3d8;--positive-92: #e4f5e0;--positive-96: #f2faef;--warning-10: #663d00;--warning-20: #663d00;--warning-30: #985b01;--warning-40: #cb7a01;--warning-50: #fe9801;--warning-60: #fead34;--warning-60-8: rgba(254, 173, 52, .08);--warning-60-12: rgba(254, 173, 52, .12);--warning-70: #fec167;--warning-80: #ffd699;--warning-90: #ffeacc;--warning-92: #ffefd6;--warning-96: #fff7eb;--border-accent-primary: var(--accent-60);--border-accent-primary-hover: var(--accent-50);--border-accent-secondary: var(--accent-90);--border-accent-secondary-hover: var(--accent-80);--border-negative-primary: var(--negative-60);--border-negative-primary-hover: var(--negative-50);--border-negative-secondary: var(--negative-90);--border-negative-secondary-hover: var(--negative-80);--border-positive-primary: var(--positive-60);--border-positive-primary-hover: var(--positive-50);--border-positive-secondary: var(--positive-90);--border-positive-secondary-hover: var(--positive-80);--border-warning-primary: var(--warning-60);--border-warning-primary-hover: var(--warning-50);--border-warning-secondary: var(--warning-90);--border-warning-secondary-hover: var(--warning-80);--border-neutral-primary: var(--neutral-60);--border-neutral-primary-hover: var(--neutral-50);--border-neutral-alpha-basic: var(--neutral-60-12);--border-neutral-alpha-low: var(--neutral-60-8);--border-neutral-alpha-high: var(--neutral-60-16);--text-primary: var(--neutral-20);--text-primary-hover: var(--neutral-15);--text-secondary: var(--neutral-40);--text-secondary-hover: var(--neutral-30);--text-tertiary: var(--neutral-60);--text-tertiary-hover: var(--neutral-50);--text-positive: var(--positive-50);--text-positive-hover: var(--positive-40);--text-negative: var(--negative-60);--text-negative-hover: var(--negative-50);--text-warning: var(--warning-60);--text-warning-hover: var(--warning-50);--text-accent: var(--accent-60);--text-accent-hover: var(--accent-50);--text-inverse: var(--neutral-100);--icon-primary: var(--neutral-20);--icon-primary-hover: var(--neutral-15);--icon-secondary: var(--neutral-40);--icon-secondary-hover: var(--neutral-30);--icon-tertiary: var(--neutral-60);--icon-tertiary-hover: var(--neutral-50);--icon-positive: var(--positive-50);--icon-positive-hover: var(--positive-40);--icon-negative: var(--negative-60);--icon-negative-hover: var(--negative-50);--icon-warning: var(--warning-60);--icon-warning-hover: var(--warning-50);--icon-accent: var(--accent-60);--icon-accent-hover: var(--accent-50);--icon-inverse: var(--neutral-100);--fill-accent-primary: var(--accent-60);--fill-accent-primary-hover: var(--accent-50);--fill-accent-secondary: var(--accent-96);--fill-accent-secondary-hover: var(--accent-90);--fill-accent-tint: var(--accent-50-12);--fill-accent-tint-low: var(--accent-50-8);--fill-positive-primary: var(--positive-60);--fill-positive-primary-hover: var(--positive-50);--fill-positive-secondary: var(--positive-96);--fill-positive-secondary-hover: var(--positive-90);--fill-positive-tint: var(--positive-50-12);--fill-positive-tint-low: var(--positive-50-8);--fill-negative-primary: var(--negative-60);--fill-negative-primary-hover: var(--negative-50);--fill-negative-secondary: var(--negative-96);--fill-negative-secondary-hover: var(--negative-92);--fill-negative-tint: var(--negative-60-12);--fill-negative-tint-low: var(--negative-60-8);--fill-warning-primary: var(--warning-60);--fill-warning-primary-hover: var(--warning-50);--fill-warning-secondary: var(--warning-96);--fill-warning-secondary-hover: var(--warning-90);--fill-warning-tint: var(--warning-60-12);--fill-warning-tint-low: var(--warning-60-8);--fill-neutral-secondary: var(--neutral-96);--fill-neutral-secondary-hover: var(--neutral-90);--fill-bg-primary: var(--neutral-100);--fill-bg-secondary: var(--neutral-98);--fill-bg-tertiary: var(--neutral-96);--fill-bg-elevation-primary: var(--neutral-90-20);--fill-bg-elevation-secondary: var(--neutral-90-15);--fill-bg-elevation-tertiary: var(--neutral-90-10);--status-accent: var(--accent-50);--status-accent-tint: var(--accent-50-12);--status-accent-tint-low: var(--accent-50-8);--status-negative: var(--negative-60);--status-negative-tint: var(--negative-60-12);--status-negative-tint-low: var(--negative-60-8);--status-positive: var(--positive-50);--status-positive-tint: var(--positive-50-12);--status-positive-tint-low: var(--positive-50-8);--status-warning: var(--warning-60);--status-warning-tint: var(--warning-60-12);--status-warning-tint-low: var(--warning-60-8);--status-neutral: var(--neutral-60);--status-neutral-tint: var(--neutral-60-12);--status-neutral-tint-low: var(--neutral-60-8);--corner-zero: 0;--corner-xs: 4px;--corner-sm: 8px;--corner-md: 12px;--corner-lg: 16px;--corner-xl: 20px;--corner-2xl: 24px;--corner-3xl: 32px;--corner-4xl: 40px;--corner-5xl: 48px;--corner-6xl: 56px;--corner-full-round: 1000px;--height-button-xs: 32px;--height-button-sm: 40px;--height-button-md: 48px;--height-button-lg: 56px;--height-avatar-sm: 32px;--height-avatar-md: 40px;--height-avatar-lg: 48px;--height-icon-xs: 16px;--height-icon-sm: 20px;--height-icon-md: 24px;--height-icon-lg: 32px;--height-icon-xl: 64px;--opacity-primary: 100;--opacity-secondary: 80;--opacity-tertiary: 60;--spacing-zero: 0;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--spacing-4xl: 40px;--spacing-5xl: 48px;--spacing-6xl: 56px;--spacing-7xl: 64px;--spacing-8xl: 72px;--spacing-9xl: 80px;--spacing-10xl: 96px;--transition-general: all .3s ease-in-out;font-family:Inter,sans-serif;word-break:break-word;font-size:16px;line-height:24px;font-weight:400;color:var(--text-primary)}@layer reset{:root *,:root *:before,:root *:after{box-sizing:border-box;margin:0;color:unset}:root ul[class],:root ol[class]{padding:0}:root body,:root h1,:root h2,:root h3,:root h4,:root p,:root label,:root ul[class],:root ol[class],:root li,:root figure,:root figcaption,:root blockquote,:root dl,:root dd{margin:0}:root label{display:block}:root html{scroll-behavior:smooth}:root body{min-height:100dvh;text-rendering:optimizeSpeed;line-height:1.5;margin:0!important}:root ul[class],:root ol[class]{list-style:none}:root a:not([class]){text-decoration-skip-ink:auto}:root a,:root a:hover,:root a:checked{text-decoration:none;color:inherit}:root img{max-width:100%;display:block}:root input,:root button,:root textarea,:root select,:root pre{font:inherit}:root input,:root textarea{outline:none;border:none;padding:0}@media (prefers-reduced-motion: reduce){:root *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root input::-webkit-outer-spin-button,:root input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:root input[type=number]{-moz-appearance:textfield}:root html{overflow-x:hidden;margin-right:calc(-1*(100vw - 100%))}:root a:focus,:root button:focus,:root input:focus,:root textarea:focus{outline:none}:root button{cursor:pointer;padding:0;background:transparent}:root button{border:none;outline:none}:root fieldset{border:0;padding:0;margin:0;min-width:0}:root div{outline:none}:root input[type=search]::-ms-clear{display:none;width:0;height:0}:root input[type=search]::-ms-reveal{display:none;width:0;height:0}:root input[type=search]::-webkit-search-decoration,:root input[type=search]::-webkit-search-cancel-button,:root input[type=search]::-webkit-search-results-button,:root input[type=search]::-webkit-search-results-decoration{display:none}}
package/dist/styles/utils/breakpoints/base.scss CHANGED
@@ -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
+ }
package/dist/styles/utils/breakpoints/index.scss CHANGED
@@ -1,3 +1,3 @@
1
- @forward 'base';
2
- @forward 'screen';
3
- @forward 'semantic';
1
+ @forward 'base';
2
+ @forward 'screen';
3
+ @forward 'semantic';
package/dist/styles/utils/breakpoints/screen.scss CHANGED
@@ -1,67 +1,67 @@
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-1400($direction: max) {
16
- @include base.breakpoint(1440px, $direction) {
17
- @content;
18
- }
19
- }
20
-
21
- @mixin bp-1280($direction: max) {
22
- @include base.breakpoint(1280px, $direction) {
23
- @content;
24
- }
25
- }
26
-
27
- @mixin bp-1200($direction: max) {
28
- @include base.breakpoint(1200px, $direction) {
29
- @content;
30
- }
31
- }
32
-
33
- @mixin bp-1024($direction: max) {
34
- @include base.breakpoint(1024px, $direction) {
35
- @content;
36
- }
37
- }
38
-
39
- @mixin bp-992($direction: max) {
40
- @include base.breakpoint(992px, $direction) {
41
- @content;
42
- }
43
- }
44
-
45
- @mixin bp-768($direction: max) {
46
- @include base.breakpoint(768px, $direction) {
47
- @content;
48
- }
49
- }
50
-
51
- @mixin bp-576($direction: max) {
52
- @include base.breakpoint(576px, $direction) {
53
- @content;
54
- }
55
- }
56
-
57
- @mixin bp-480($direction: max) {
58
- @include base.breakpoint(480px, $direction) {
59
- @content;
60
- }
61
- }
62
-
63
- @mixin bp-375($direction: max) {
64
- @include base.breakpoint(375px, $direction) {
65
- @content;
66
- }
67
- }
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-1400($direction: max) {
16
+ @include base.breakpoint(1440px, $direction) {
17
+ @content;
18
+ }
19
+ }
20
+
21
+ @mixin bp-1280($direction: max) {
22
+ @include base.breakpoint(1280px, $direction) {
23
+ @content;
24
+ }
25
+ }
26
+
27
+ @mixin bp-1200($direction: max) {
28
+ @include base.breakpoint(1200px, $direction) {
29
+ @content;
30
+ }
31
+ }
32
+
33
+ @mixin bp-1024($direction: max) {
34
+ @include base.breakpoint(1024px, $direction) {
35
+ @content;
36
+ }
37
+ }
38
+
39
+ @mixin bp-992($direction: max) {
40
+ @include base.breakpoint(992px, $direction) {
41
+ @content;
42
+ }
43
+ }
44
+
45
+ @mixin bp-768($direction: max) {
46
+ @include base.breakpoint(768px, $direction) {
47
+ @content;
48
+ }
49
+ }
50
+
51
+ @mixin bp-576($direction: max) {
52
+ @include base.breakpoint(576px, $direction) {
53
+ @content;
54
+ }
55
+ }
56
+
57
+ @mixin bp-480($direction: max) {
58
+ @include base.breakpoint(480px, $direction) {
59
+ @content;
60
+ }
61
+ }
62
+
63
+ @mixin bp-375($direction: max) {
64
+ @include base.breakpoint(375px, $direction) {
65
+ @content;
66
+ }
67
+ }