asma-ui-core 3.4.2 → 3.5.0

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 (23) hide show
  1. package/dist/asma-ui-core.es.js +1 -1
  2. package/dist/src/hooks/useWindowWidthSize.hook.d.ts +9 -3
  3. package/package.json +5 -3
  4. package/src/styles/_breakpoints.scss +60 -0
  5. package/src/styles/color-variables/defaultTokens.css +193 -0
  6. package/src/styles/color-variables/fretexTokens.css +194 -0
  7. package/src/styles/color-variables/jadeTokens.css +174 -0
  8. package/src/styles/color-variables/rootVariables.css +115 -0
  9. package/src/styles/components-colors/inputVariables.css +122 -0
  10. package/src/styles/fonts/roboto/LICENSE.txt +202 -0
  11. package/src/styles/fonts/roboto/Roboto-Black.ttf +0 -0
  12. package/src/styles/fonts/roboto/Roboto-BlackItalic.ttf +0 -0
  13. package/src/styles/fonts/roboto/Roboto-Bold.ttf +0 -0
  14. package/src/styles/fonts/roboto/Roboto-BoldItalic.ttf +0 -0
  15. package/src/styles/fonts/roboto/Roboto-Italic.ttf +0 -0
  16. package/src/styles/fonts/roboto/Roboto-Light.ttf +0 -0
  17. package/src/styles/fonts/roboto/Roboto-LightItalic.ttf +0 -0
  18. package/src/styles/fonts/roboto/Roboto-Medium.ttf +0 -0
  19. package/src/styles/fonts/roboto/Roboto-MediumItalic.ttf +0 -0
  20. package/src/styles/fonts/roboto/Roboto-Regular.ttf +0 -0
  21. package/src/styles/fonts/roboto/Roboto-Thin.ttf +0 -0
  22. package/src/styles/fonts/roboto/Roboto-ThinItalic.ttf +0 -0
  23. package/src/styles/index.css +164 -0
package/dist/src/hooks/useWindowWidthSize.hook.d.ts CHANGED
@@ -1,5 +1,11 @@
1
- export declare function useWindowWidthSize(): number;
2
- export declare const mobileView: (windowWidth: number | undefined) => boolean;
1
+ export declare function useMediaQuery(query: string): boolean;
2
+ export declare function useBreakpoints(): {
3
+ isMobile: boolean;
4
+ isTablet: boolean;
5
+ isTabletDesktop: boolean;
6
+ isDesktop: boolean;
7
+ isMobileOrTablet: boolean;
8
+ isCompact: boolean;
9
+ };
3
10
  export declare function useIsMobileView(): boolean;
4
11
  export declare function useIsTabletView(): boolean;
5
- export declare const tabletView: (windowWidth: number | undefined) => boolean;
package/package.json CHANGED
@@ -3,12 +3,13 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "3.4.2",
6
+ "version": "3.5.0",
7
7
  "type": "module",
8
8
  "files": [
9
9
  "dist/**/*",
10
10
  "dist/style.css",
11
- "tw-configs/**/*"
11
+ "tw-configs/**/*",
12
+ "src/styles/**/*"
12
13
  ],
13
14
  "keywords": [],
14
15
  "author": "asma-team",
@@ -23,7 +24,8 @@
23
24
  }
24
25
  },
25
26
  "./dist/style.css": "./dist/style.css",
26
- "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json"
27
+ "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json",
28
+ "./src/styles/breakpoints": "./src/styles/_breakpoints.scss"
27
29
  },
28
30
  "scripts": {
29
31
  "dev": "vite",
package/src/styles/_breakpoints.scss ADDED
@@ -0,0 +1,60 @@
1
+ ///
2
+ /// Breakpoint mixins — single source of truth for SCSS consumers.
3
+ ///
4
+ /// @remarks
5
+ /// These values mirror `breakpoints` in `asma-types/src/interfaces/breakpoints.ts`.
6
+ /// If you change values here, update that file too.
7
+ ///
8
+ /// Layout ranges:
9
+ /// mobile: <= 743px
10
+ /// tablet: 744px – 1023px
11
+ /// tablet-desktop: 1024px – 1279px
12
+ /// desktop: >= 1280px
13
+ /// compact: <= 1279px (mobile + tablet + tablet-desktop)
14
+ ///
15
+
16
+ // ── Breakpoint values (must stay in sync with asma-types breakpoints.ts) ────
17
+
18
+ $mobile-max: 743px;
19
+ $tablet-min: 744px;
20
+ $tablet-max: 1023px;
21
+ $tablet-desktop-min: 1024px;
22
+ $tablet-desktop-max: 1279px;
23
+ $desktop-min: 1280px;
24
+
25
+ // ── Mixins ───────────────────────────────────────────────────────────────────
26
+
27
+ /// Targets mobile viewports only (max-width: 743px).
28
+ @mixin mobile {
29
+ @media (max-width: #{$mobile-max}) {
30
+ @content;
31
+ }
32
+ }
33
+
34
+ /// Targets tablet viewports only (744px – 1023px).
35
+ @mixin tablet {
36
+ @media (min-width: #{$tablet-min}) and (max-width: #{$tablet-max}) {
37
+ @content;
38
+ }
39
+ }
40
+
41
+ /// Targets tablet-desktop viewports only (1024px – 1279px).
42
+ @mixin tablet-desktop {
43
+ @media (min-width: #{$tablet-desktop-min}) and (max-width: #{$tablet-desktop-max}) {
44
+ @content;
45
+ }
46
+ }
47
+
48
+ /// Targets desktop viewports only (min-width: 1280px).
49
+ @mixin desktop {
50
+ @media (min-width: #{$desktop-min}) {
51
+ @content;
52
+ }
53
+ }
54
+
55
+ /// Targets all non-desktop viewports (max-width: 1279px).
56
+ @mixin compact {
57
+ @media (max-width: #{$tablet-desktop-max}) {
58
+ @content;
59
+ }
60
+ }
package/src/styles/color-variables/defaultTokens.css ADDED
@@ -0,0 +1,193 @@
1
+ :root {
2
+ --colors-text-component: #ffffff;
3
+ --colors-active-component: var(--colors-blue-500);
4
+ --colors-alpha-100: var(--colors-blue-100);
5
+ --colors-alpha-500: var(--colors-blue-500);
6
+ --colors-alpha-600: var(--colors-blue-600);
7
+ --colors-alpha-700: var(--colors-blue-700);
8
+ --colors-beta-100: var(--colors-red-100);
9
+ --colors-beta-500: var(--colors-red-500);
10
+ --colors-beta-600: var(--colors-red-600);
11
+ --colors-beta-700: var(--colors-red-700);
12
+ --colors-gama-25: var(--colors-blue-25);
13
+ --colors-gama-50: var(--colors-blue-50);
14
+ --colors-gama-100: var(--colors-blue-100);
15
+ --colors-gama-200: var(--colors-blue-200);
16
+ --colors-gama-300: var(--colors-blue-300);
17
+ --colors-gama-400: var(--colors-blue-400);
18
+ --colors-gama-500: var(--colors-blue-500);
19
+ --colors-gama-600: var(--colors-blue-600);
20
+ --colors-gama-700: var(--colors-blue-700);
21
+ --colors-gama-800: var(--colors-blue-800);
22
+ --colors-gama-900: var(--colors-blue-900);
23
+ --colors-delta-10: var(--colors-gray-10);
24
+ --colors-delta-50: var(--colors-gray-50);
25
+ --colors-delta-100: var(--colors-gray-100);
26
+ --colors-delta-200: var(--colors-gray-200);
27
+ --colors-delta-300: var(--colors-gray-300);
28
+ --colors-delta-400: var(--colors-gray-400);
29
+ --colors-delta-500: var(--colors-gray-500);
30
+ --colors-delta-600: var(--colors-gray-600);
31
+ --colors-delta-700: var(--colors-gray-700);
32
+ --colors-delta-800: var(--colors-gray-800);
33
+ --colors-delta-900: var(--colors-gray-900);
34
+ --colors-delta-9000: var(--colors-gray-9000);
35
+ --colors-delta-10000: var(--colors-gray-10000);
36
+ --colors-sigma-700: var(--colors-magic-blue-700);
37
+ --colors-theta-100: #ffffff;
38
+ --colors-theta-200: var(--colors-slate-200);
39
+ --colors-theta-300: var(--colors-slate-500);
40
+ --colors-theta-400: #ffffff;
41
+ --colors-theta-500: var(--colors-blue-300);
42
+ --colors-theta-600: var(--colors-blue-700);
43
+ --colors-theta-700: var(--colors-blue-600);
44
+ --colors-theta-800: #ffffff;
45
+ --colors-theta-hover: var(--colors-blue-700);
46
+ --colors-btn-bg-hover: var(--colors-slate-300);
47
+ --colors-btn-bg-standart: var(--colors-slate-600);
48
+ --colors-btn-bg-active: var(--colors-slate-800);
49
+ --colors-btn-bg-disabled: var(--colors-green-800);
50
+ --colors-btn-bg-danger: var(--colors-salmon-700);
51
+ --colors-btn-bg-danger-active: var(--colors-salmon-500);
52
+
53
+ --colors-button-contained-common-text-color: #ffffff;
54
+ --colors-button-contained-common-bg-color: var(--colors-gama-500);
55
+ --colors-button-contained-common-border-color: var(--colors-gama-500);
56
+ --colors-button-contained-common-focused-text-color: #ffffff;
57
+ --colors-button-contained-common-focused-bg-color: var(--colors-gama-500);
58
+ --colors-button-contained-common-focused-border-color: var(--colors-gama-400);
59
+ --colors-button-contained-common-active-text-color: #ffffff;
60
+ --colors-button-contained-common-active-bg-color: var(--colors-gama-700);
61
+ --colors-button-contained-common-active-border-color: var(--colors-gama-700);
62
+ --colors-button-contained-common-hover-text-color: #ffffff;
63
+ --colors-button-contained-common-hover-bg-color: var(--colors-gama-600);
64
+ --colors-button-contained-common-hover-border-color: var(--colors-gama-600);
65
+ --colors-button-contained-common-disabled-text-color: #ffffff;
66
+ --colors-button-contained-common-disabled-bg-color: var(--colors-delta-300);
67
+ --colors-button-contained-common-disabled-border-color: var(--colors-delta-300);
68
+
69
+ --colors-button-contained-error-text-color: #ffffff;
70
+ --colors-button-contained-error-bg-color: var(--colors-beta-500);
71
+ --colors-button-contained-error-border-color: var(--colors-beta-500);
72
+ --colors-button-contained-error-focused-text-color: #ffffff;
73
+ --colors-button-contained-error-focused-bg-color: var(--colors-beta-500);
74
+ --colors-button-contained-error-focused-border-color: var(--colors-beta-400);
75
+ --colors-button-contained-error-active-text-color: #ffffff;
76
+ --colors-button-contained-error-active-bg-color: var(--colors-beta-700);
77
+ --colors-button-contained-error-active-border-color: var(--colors-beta-700);
78
+ --colors-button-contained-error-hover-text-color: #ffffff;
79
+ --colors-button-contained-error-hover-bg-color: var(--colors-beta-600);
80
+ --colors-button-contained-error-hover-border-color: var(--colors-beta-600);
81
+ --colors-button-contained-error-disabled-text-color: #ffffff;
82
+ --colors-button-contained-error-disabled-bg-color: var(--colors-delta-300);
83
+ --colors-button-contained-error-disabled-border-color: transparent;
84
+
85
+ --colors-button-outlined-common-text-color: var(--colors-delta-700);
86
+ --colors-button-outlined-common-bg-color: transparent;
87
+ --colors-button-outlined-common-border-color: var(--colors-delta-500);
88
+ --colors-button-outlined-common-focused-text-color: var(--colors-gama-500);
89
+ --colors-button-outlined-common-focused-bg-color: var(--colors-gama-50);
90
+ --colors-button-outlined-common-focused-border-color: var(--colors-gama-400);
91
+ --colors-button-outlined-common-active-text-color: var(--colors-gama-500);
92
+ --colors-button-outlined-common-active-bg-color: var(--colors-gama-50);
93
+ --colors-button-outlined-common-active-border-color: var(--colors-gama-300);
94
+ --colors-button-outlined-common-hover-text-color: var(--colors-gama-500);
95
+ --colors-button-outlined-common-hover-bg-color: var(--colors-gama-100);
96
+ --colors-button-outlined-common-hover-border-color: var(--colors-gama-300);
97
+ --colors-button-outlined-common-disabled-text-color: var(--colors-delta-300);
98
+ --colors-button-outlined-common-disabled-bg-color: transparent;
99
+ --colors-button-outlined-common-disabled-border-color: var(--colors-delta-300);
100
+
101
+ --colors-button-outlined-error-text-color: var(--colors-beta-500);
102
+ --colors-button-outlined-error-bg-color: transparent;
103
+ --colors-button-outlined-error-border-color: var(--colors-beta-500);
104
+ --colors-button-outlined-error-focused-text-color: #ffffff;
105
+ --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
106
+ --colors-button-outlined-error-focused-border-color: var(--colors-beta-400);
107
+ --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
108
+ --colors-button-outlined-error-active-bg-color: var(--colors-beta-100);
109
+ --colors-button-outlined-error-active-border-color: var(--colors-beta-700);
110
+ --colors-button-outlined-error-hover-text-color: var(--colors-beta-600);
111
+ --colors-button-outlined-error-hover-bg-color: var(--colors-beta-100);
112
+ --colors-button-outlined-error-hover-border-color: var(--colors-beta-600);
113
+ --colors-button-outlined-error-disabled-text-color: var(--colors-delta-300);
114
+ --colors-button-outlined-error-disabled-bg-color: transparent;
115
+ --colors-button-outlined-error-disabled-border-color: var(--colors-delta-300);
116
+
117
+ --colors-button-text-common-text-color: var(--colors-gama-500);
118
+ --colors-button-text-common-bg-color: transparent;
119
+ --colors-button-text-common-border-color: transparent;
120
+ --colors-button-text-common-focused-text-color: var(--colors-gama-500);
121
+ --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
122
+ --colors-button-text-common-focused-border-color: var(--colors-gama-400);
123
+ --colors-button-text-common-active-text-color: var(--colors-gama-500);
124
+ --colors-button-text-common-active-bg-color: var(--colors-gama-100);
125
+ --colors-button-text-common-active-border-color: var(--colors-gama-100);
126
+ --colors-button-text-common-hover-text-color: var(--colors-gama-500);
127
+ --colors-button-text-common-hover-bg-color: var(--colors-gama-50);
128
+ --colors-button-text-common-hover-border-color: var(--colors-gama-50);
129
+ --colors-button-text-common-disabled-text-color: var(--colors-delta-300);
130
+ --colors-button-text-common-disabled-bg-color: transparent;
131
+ --colors-button-text-common-disabled-border-color: transparent;
132
+
133
+ --colors-button-text-error-text-color: var(--colors-beta-500);
134
+ --colors-button-text-error-bg-color: transparent;
135
+ --colors-button-text-error-border-color: transparent;
136
+ --colors-button-text-error-focused-text-color: var(--colors-beta-600);
137
+ --colors-button-text-error-focused-bg-color: var(--colors-beta-100);
138
+ --colors-button-text-error-focused-border-color: var(--colors-beta-400);
139
+ --colors-button-text-error-active-text-color: var(--colors-beta-600);
140
+ --colors-button-text-error-active-bg-color: var(--colors-beta-100);
141
+ --colors-button-text-error-active-border-color: var(--colors-beta-100);
142
+ --colors-button-text-error-hover-text-color: var(--colors-beta-600);
143
+ --colors-button-text-error-hover-bg-color: var(--colors-beta-100);
144
+ --colors-button-text-error-hover-border-color: var(--colors-beta-100);
145
+ --colors-button-text-error-disabled-text-color: var(--colors-delta-300);
146
+ --colors-button-text-error-disabled-bg-color: transparent;
147
+ --colors-button-text-error-disabled-border-color: transparent;
148
+
149
+ --colors-button-textGray-common-text-color: var(--colors-delta-700);
150
+ --colors-button-textGray-common-bg-color: transparent;
151
+ --colors-button-textGray-common-border-color: transparent;
152
+ --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
153
+ --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
154
+ --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
155
+ --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
156
+ --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
157
+ --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
158
+ --colors-button-textGray-common-hover-text-color: var(--colors-gama-500);
159
+ --colors-button-textGray-common-hover-bg-color: var(--colors-gama-50);
160
+ --colors-button-textGray-common-hover-border-color: var(--colors-gama-50);
161
+ --colors-button-textGray-common-disabled-text-color: var(--colors-delta-300);
162
+ --colors-button-textGray-common-disabled-bg-color: transparent;
163
+ --colors-button-textGray-common-disabled-border-color: transparent;
164
+
165
+ --colors-button-textWhite-common-text-color: white;
166
+ --colors-button-textWhite-common-bg-color: transparent;
167
+ --colors-button-textWhite-common-border-color: transparent;
168
+ --colors-button-textWhite-common-focused-text-color: white;
169
+ --colors-button-textWhite-common-focused-bg-color: transparent;
170
+ --colors-button-textWhite-common-focused-border-color: transparent;
171
+ --colors-button-textWhite-common-active-text-color: white;
172
+ --colors-button-textWhite-common-active-bg-color: transparent;
173
+ --colors-button-textWhite-common-active-border-color: transparent;
174
+ --colors-button-textWhite-common-hover-text-color: white;
175
+ --colors-button-textWhite-common-hover-bg-color: transparent;
176
+ --colors-button-textWhite-common-hover-border-color: transparent;
177
+ --colors-button-textWhite-common-disabled-text-color: white;
178
+ --colors-button-textWhite-common-disabled-bg-color: transparent;
179
+ --colors-button-textWhite-common-disabled-border-color: transparent;
180
+
181
+ --colors-btn-bg-mini-action: var(--colors-slate-600);
182
+ --colors-btn-bg-mini-action-hover: var(--colors-slate-300);
183
+ --colors-link-text-hover: #ffffff;
184
+ --colors-link-text-standart: #ffffff;
185
+ --colors-link-text-active: var(--colors-blue-800);
186
+ --colors-link-text-disabled: var(--colors-green-800);
187
+
188
+ --colors-app-directory-button-select-recipient-bg: var(--colors-blue-200);
189
+ --colors-btn-task-status-bg: var(--colors-slate-600);
190
+ --colors-chat-ticket-message-bg: var(--colors-blue-200);
191
+ --colors-topbar-text: var(--colors-zinc-500);
192
+ --colors-menu-text-active: var(--colors-slate-700);
193
+ }
package/src/styles/color-variables/fretexTokens.css ADDED
@@ -0,0 +1,194 @@
1
+ [data-theme='fretex'] {
2
+ --colors-text-component: var(--colors-gray-9000);
3
+ --colors-active-component: var(--colors-gama-700);
4
+ --colors-alpha-100: var(--colors-slate-100);
5
+ --colors-alpha-500: var(--colors-slate-500);
6
+ --colors-alpha-600: var(--colors-slate-600);
7
+ --colors-alpha-700: var(--colors-slate-700);
8
+ --colors-beta-100: var(--colors-red-100);
9
+ --colors-beta-500: var(--colors-red-500);
10
+ --colors-beta-600: var(--colors-red-600);
11
+ --colors-beta-700: var(--colors-red-700);
12
+ --colors-gama-25: var(--colors-green-25);
13
+ --colors-gama-50: var(--colors-green-50);
14
+ --colors-gama-100: var(--colors-green-100);
15
+ --colors-gama-200: var(--colors-green-200);
16
+ --colors-gama-300: var(--colors-green-300);
17
+ --colors-gama-400: var(--colors-green-400);
18
+ --colors-gama-500: var(--colors-green-500);
19
+ --colors-gama-600: var(--colors-green-600);
20
+ --colors-gama-700: var(--colors-green-700);
21
+ --colors-gama-800: var(--colors-green-700);
22
+ --colors-gama-900: var(--colors-green-900);
23
+ --colors-delta-10: var(--colors-gray-10);
24
+ --colors-delta-50: var(--colors-gray-50);
25
+ --colors-delta-100: var(--colors-zinc-100);
26
+ --colors-delta-200: var(--colors-zinc-200);
27
+ --colors-delta-300: var(--colors-zinc-300);
28
+ --colors-delta-400: var(--colors-zinc-400);
29
+ --colors-delta-500: var(--colors-zinc-500);
30
+ --colors-delta-600: var(--colors-zinc-600);
31
+ --colors-delta-700: var(--colors-zinc-700);
32
+ --colors-delta-800: var(--colors-zinc-800);
33
+ --colors-delta-900: var(--colors-zinc-900);
34
+ --colors-delta-9000: var(--colors-gray-9000);
35
+ --colors-delta-10000: var(--colors-gray-10000);
36
+ --colors-sigma-700: var(--colors-zinc-500);
37
+ --colors-theta-100: #ffffff;
38
+ --colors-theta-200: var(--colors-green-200);
39
+ --colors-theta-300: var(--colors-green-500);
40
+ --colors-theta-400: #ffffff;
41
+ --colors-theta-500: #ffffff;
42
+ --colors-theta-600: #ffffff;
43
+ --colors-theta-700: #ffffff;
44
+ --colors-theta-800: #ffffff;
45
+ --colors-theta-hover: #ffffff;
46
+ --colors-btn-bg-hover: var(--colors-gama-600);
47
+ --colors-btn-bg-standart: var(--colors-gama-500);
48
+ --colors-btn-bg-active: var(--colors-gama-600);
49
+ --colors-btn-bg-disabled: var(--colors-gray-200);
50
+ --colors-btn-bg-danger: var(--colors-red-700);
51
+ --colors-btn-bg-danger-active: var(--colors-red-500);
52
+
53
+ --colors-button-contained-common-text-color: #ffffff;
54
+ --colors-button-contained-common-bg-color: var(--colors-gama-500);
55
+ --colors-button-contained-common-border-color: var(--colors-gama-500);
56
+ --colors-button-contained-common-focused-text-color: #ffffff;
57
+ --colors-button-contained-common-focused-bg-color: var(--colors-gama-500);
58
+ --colors-button-contained-common-focused-border-color: var(--colors-gama-400);
59
+ --colors-button-contained-common-active-text-color: #ffffff;
60
+ --colors-button-contained-common-active-bg-color: var(--colors-gama-700);
61
+ --colors-button-contained-common-active-border-color: var(--colors-gama-700);
62
+ --colors-button-contained-common-hover-text-color: #ffffff;
63
+ --colors-button-contained-common-hover-bg-color: var(--colors-gama-600);
64
+ --colors-button-contained-common-hover-border-color: var(--colors-gama-600);
65
+ --colors-button-contained-common-disabled-text-color: #ffffff;
66
+ --colors-button-contained-common-disabled-bg-color: var(--colors-delta-200);
67
+ --colors-button-contained-common-disabled-border-color: var(--colors-delta-200);
68
+
69
+ --colors-button-contained-error-text-color: #ffffff;
70
+ --colors-button-contained-error-bg-color: var(--colors-beta-500);
71
+ --colors-button-contained-error-border-color: var(--colors-beta-500);
72
+ --colors-button-contained-error-focused-text-color: #ffffff;
73
+ --colors-button-contained-error-focused-bg-color: var(--colors-beta-500);
74
+ --colors-button-contained-error-focused-border-color: var(--colors-gama-400);
75
+ --colors-button-contained-error-active-text-color: #ffffff;
76
+ --colors-button-contained-error-active-bg-color: var(--colors-beta-700);
77
+ --colors-button-contained-error-active-border-color: var(--colors-beta-700);
78
+ --colors-button-contained-error-hover-text-color: #ffffff;
79
+ --colors-button-contained-error-hover-bg-color: var(--colors-beta-600);
80
+ --colors-button-contained-error-hover-border-color: var(--colors-beta-600);
81
+ --colors-button-contained-error-disabled-text-color: #ffffff;
82
+ --colors-button-contained-error-disabled-bg-color: var(--colors-delta-200);
83
+ --colors-button-contained-error-disabled-border-color: transparent;
84
+
85
+ --colors-button-outlined-common-text-color: var(--colors-delta-700);
86
+ --colors-button-outlined-common-bg-color: transparent;
87
+ --colors-button-outlined-common-border-color: var(--colors-delta-400);
88
+ --colors-button-outlined-common-focused-text-color: var(--colors-gama-500);
89
+ --colors-button-outlined-common-focused-bg-color: var(--colors-gama-50);
90
+ --colors-button-outlined-common-focused-border-color: var(--colors-gama-400);
91
+ --colors-button-outlined-common-active-text-color: var(--colors-gama-500);
92
+ --colors-button-outlined-common-active-bg-color: var(--colors-gama-50);
93
+ --colors-button-outlined-common-active-border-color: var(--colors-gama-300);
94
+ --colors-button-outlined-common-hover-text-color: var(--colors-gama-500);
95
+ --colors-button-outlined-common-hover-bg-color: var(--colors-gama-100);
96
+ --colors-button-outlined-common-hover-border-color: var(--colors-gama-300);
97
+ --colors-button-outlined-common-disabled-text-color: var(--colors-delta-200);
98
+ --colors-button-outlined-common-disabled-bg-color: transparent;
99
+ --colors-button-outlined-common-disabled-border-color: var(--colors-delta-200);
100
+
101
+ --colors-button-outlined-error-text-color: var(--colors-beta-500);
102
+ --colors-button-outlined-error-bg-color: transparent;
103
+ --colors-button-outlined-error-border-color: var(--colors-beta-500);
104
+ --colors-button-outlined-error-focused-text-color: #ffffff;
105
+ --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
106
+ --colors-button-outlined-error-focused-border-color: var(--colors-gama-400);
107
+ --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
108
+ --colors-button-outlined-error-active-bg-color: var(--colors-beta-100);
109
+ --colors-button-outlined-error-active-border-color: var(--colors-beta-700);
110
+ --colors-button-outlined-error-hover-text-color: var(--colors-beta-600);
111
+ --colors-button-outlined-error-hover-bg-color: var(--colors-beta-100);
112
+ --colors-button-outlined-error-hover-border-color: var(--colors-beta-600);
113
+ --colors-button-outlined-error-disabled-text-color: var(--colors-delta-200);
114
+ --colors-button-outlined-error-disabled-bg-color: transparent;
115
+ --colors-button-outlined-error-disabled-border-color: var(--colors-delta-200);
116
+
117
+ --colors-button-text-common-text-color: var(--colors-gama-500);
118
+ --colors-button-text-common-bg-color: transparent;
119
+ --colors-button-text-common-border-color: transparent;
120
+ --colors-button-text-common-focused-text-color: var(--colors-gama-500);
121
+ --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
122
+ --colors-button-text-common-focused-border-color: var(--colors-gama-400);
123
+ --colors-button-text-common-active-text-color: var(--colors-gama-500);
124
+ --colors-button-text-common-active-bg-color: var(--colors-gama-100);
125
+ --colors-button-text-common-active-border-color: var(--colors-gama-100);
126
+ --colors-button-text-common-hover-text-color: var(--colors-gama-500);
127
+ --colors-button-text-common-hover-bg-color: var(--colors-gama-50);
128
+ --colors-button-text-common-hover-border-color: var(--colors-gama-50);
129
+ --colors-button-text-common-disabled-text-color: var(--colors-delta-200);
130
+ --colors-button-text-common-disabled-bg-color: transparent;
131
+ --colors-button-text-common-disabled-border-color: transparent;
132
+
133
+ --colors-button-text-error-text-color: var(--colors-beta-500);
134
+ --colors-button-text-error-bg-color: transparent;
135
+ --colors-button-text-error-border-color: transparent;
136
+ --colors-button-text-error-focused-text-color: var(--colors-beta-600);
137
+ --colors-button-text-error-focused-bg-color: var(--colors-beta-100);
138
+ --colors-button-text-error-focused-border-color: var(--colors-gama-400);
139
+ --colors-button-text-error-active-text-color: var(--colors-beta-600);
140
+ --colors-button-text-error-active-bg-color: var(--colors-beta-100);
141
+ --colors-button-text-error-active-border-color: var(--colors-beta-100);
142
+ --colors-button-text-error-hover-text-color: var(--colors-beta-600);
143
+ --colors-button-text-error-hover-bg-color: var(--colors-beta-100);
144
+ --colors-button-text-error-hover-border-color: var(--colors-beta-100);
145
+ --colors-button-text-error-disabled-text-color: var(--colors-delta-200);
146
+ --colors-button-text-error-disabled-bg-color: transparent;
147
+ --colors-button-text-error-disabled-border-color: transparent;
148
+
149
+ --colors-button-textGray-common-text-color: var(--colors-delta-700);
150
+ --colors-button-textGray-common-bg-color: transparent;
151
+ --colors-button-textGray-common-border-color: transparent;
152
+ --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
153
+ --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
154
+ --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
155
+ --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
156
+ --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
157
+ --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
158
+ --colors-button-textGray-common-hover-text-color: var(--colors-gama-500);
159
+ --colors-button-textGray-common-hover-bg-color: var(--colors-gama-50);
160
+ --colors-button-textGray-common-hover-border-color: var(--colors-gama-50);
161
+ --colors-button-textGray-common-disabled-text-color: var(--colors-delta-200);
162
+ --colors-button-textGray-common-disabled-bg-color: transparent;
163
+ --colors-button-textGray-common-disabled-border-color: transparent;
164
+
165
+ --colors-button-textWhite-common-text-color: white;
166
+ --colors-button-textWhite-common-bg-color: transparent;
167
+ --colors-button-textWhite-common-border-color: transparent;
168
+ --colors-button-textWhite-common-focused-text-color: white;
169
+ --colors-button-textWhite-common-focused-bg-color: transparent;
170
+ --colors-button-textWhite-common-focused-border-color: transparent;
171
+ --colors-button-textWhite-common-active-text-color: white;
172
+ --colors-button-textWhite-common-active-bg-color: transparent;
173
+ --colors-button-textWhite-common-active-border-color: transparent;
174
+ --colors-button-textWhite-common-hover-text-color: white;
175
+ --colors-button-textWhite-common-hover-bg-color: transparent;
176
+ --colors-button-textWhite-common-hover-border-color: transparent;
177
+ --colors-button-textWhite-common-disabled-text-color: white;
178
+ --colors-button-textWhite-common-disabled-bg-color: transparent;
179
+ --colors-button-textWhite-common-disabled-border-color: transparent;
180
+
181
+ --colors-colors-btn-bg-mini-action: var(--colors-zinc-100);
182
+ --colors-colors-btn-bg-mini-action-hover: var(--colors-gama-700);
183
+ --colors-link-text-hover: var(--colors-red-700);
184
+ --colors-link-text-standart: var(--colors-gray-500);
185
+ --colors-link-text-active: var(--colors-red-700);
186
+ --colors-link-text-disabled: var(--colors-gray-200);
187
+
188
+ --colors-app-directory-button-select-recipient-bg: var(--colors-slate-500);
189
+ --colors-btn-task-status-bg: var(--colors-green-100);
190
+ --colors-chat-ticket-message-bg: var(--colors-alpha-500);
191
+ --colors-colors-topbar-text: #ffffff;
192
+
193
+ --colors-menu-text-active: var(--colors-beta-700);
194
+ }
package/src/styles/color-variables/jadeTokens.css ADDED
@@ -0,0 +1,174 @@
1
+ [data-theme='greenish'] {
2
+ --colors-beta-100: var(--colors-red-100);
3
+ --colors-beta-500: var(--colors-red-500);
4
+ --colors-beta-600: var(--colors-red-600);
5
+ --colors-beta-700: var(--colors-red-700);
6
+ --colors-gama-25: var(--colors-jade-25);
7
+ --colors-gama-50: var(--colors-jade-50);
8
+ --colors-gama-100: var(--colors-jade-100);
9
+ --colors-gama-200: var(--colors-jade-200);
10
+ --colors-gama-300: var(--colors-jade-300);
11
+ --colors-gama-400: var(--colors-jade-400);
12
+ --colors-gama-500: var(--colors-jade-500);
13
+ --colors-gama-600: var(--colors-jade-600);
14
+ --colors-gama-700: var(--colors-jade-700);
15
+ --colors-gama-800: var(--colors-jade-800);
16
+ --colors-gama-900: var(--colors-jade-900);
17
+ --colors-delta-10: var(--colors-gray-10);
18
+ --colors-delta-50: var(--colors-gray-50);
19
+ --colors-delta-100: var(--colors-gray-100);
20
+ --colors-delta-200: var(--colors-gray-200);
21
+ --colors-delta-300: var(--colors-gray-300);
22
+ --colors-delta-400: var(--colors-gray-400);
23
+ --colors-delta-500: var(--colors-gray-500);
24
+ --colors-delta-600: var(--colors-gray-600);
25
+ --colors-delta-700: var(--colors-gray-700);
26
+ --colors-delta-800: var(--colors-gray-800);
27
+ --colors-delta-900: var(--colors-gray-900);
28
+ --colors-delta-9000: var(--colors-gray-9000);
29
+ --colors-delta-10000: var(--colors-gray-10000);
30
+ --colors-theta-100: var(--colors-jade-100);
31
+ --colors-theta-200: var(--colors-jade-200);
32
+ --colors-theta-300: var(--colors-jade-300);
33
+ --colors-theta-400: var(--colors-jade-400);
34
+ --colors-theta-500: var(--colors-jade-500);
35
+ --colors-theta-600: var(--colors-jade-600);
36
+ --colors-theta-700: var(--colors-jade-700);
37
+ --colors-theta-800: var(--colors-jade-800);
38
+ --colors-theta-hover: var(--colors-jade-500);
39
+ --colors-sigma-700: var(--colors-jade-600);
40
+ --colors-link-text-hover: #ffffff;
41
+ --colors-link-text-standart: #ffffff;
42
+ --colors-link-text-active: #ffffff;
43
+ --colors-link-text-disabled: var(--colors-gray-200);
44
+
45
+ --colors-button-contained-common-text-color: #ffffff;
46
+ --colors-button-contained-common-bg-color: var(--colors-gama-500);
47
+ --colors-button-contained-common-border-color: var(--colors-gama-500);
48
+ --colors-button-contained-common-focused-text-color: #ffffff;
49
+ --colors-button-contained-common-focused-bg-color: var(--colors-gama-500);
50
+ --colors-button-contained-common-focused-border-color: var(--colors-gama-400);
51
+ --colors-button-contained-common-active-text-color: #ffffff;
52
+ --colors-button-contained-common-active-bg-color: var(--colors-gama-700);
53
+ --colors-button-contained-common-active-border-color: var(--colors-gama-700);
54
+ --colors-button-contained-common-hover-text-color: #ffffff;
55
+ --colors-button-contained-common-hover-bg-color: var(--colors-gama-600);
56
+ --colors-button-contained-common-hover-border-color: var(--colors-gama-600);
57
+ --colors-button-contained-common-disabled-text-color: #ffffff;
58
+ --colors-button-contained-common-disabled-bg-color: var(--colors-delta-300);
59
+ --colors-button-contained-common-disabled-border-color: var(--colors-delta-300);
60
+
61
+ --colors-button-contained-error-text-color: #ffffff;
62
+ --colors-button-contained-error-bg-color: var(--colors-beta-500);
63
+ --colors-button-contained-error-border-color: var(--colors-beta-500);
64
+ --colors-button-contained-error-focused-text-color: #ffffff;
65
+ --colors-button-contained-error-focused-bg-color: var(--colors-beta-500);
66
+ --colors-button-contained-error-focused-border-color: var(--colors-beta-400);
67
+ --colors-button-contained-error-active-text-color: #ffffff;
68
+ --colors-button-contained-error-active-bg-color: var(--colors-beta-700);
69
+ --colors-button-contained-error-active-border-color: var(--colors-beta-700);
70
+ --colors-button-contained-error-hover-text-color: #ffffff;
71
+ --colors-button-contained-error-hover-bg-color: var(--colors-beta-600);
72
+ --colors-button-contained-error-hover-border-color: var(--colors-beta-600);
73
+ --colors-button-contained-error-disabled-text-color: #ffffff;
74
+ --colors-button-contained-error-disabled-bg-color: var(--colors-delta-300);
75
+ --colors-button-contained-error-disabled-border-color: transparent;
76
+
77
+ --colors-button-outlined-common-text-color: var(--colors-delta-700);
78
+ --colors-button-outlined-common-bg-color: transparent;
79
+ --colors-button-outlined-common-border-color: var(--colors-delta-500);
80
+ --colors-button-outlined-common-focused-text-color: var(--colors-gama-500);
81
+ --colors-button-outlined-common-focused-bg-color: var(--colors-gama-50);
82
+ --colors-button-outlined-common-focused-border-color: var(--colors-gama-400);
83
+ --colors-button-outlined-common-active-text-color: var(--colors-gama-500);
84
+ --colors-button-outlined-common-active-bg-color: var(--colors-gama-100);
85
+ --colors-button-outlined-common-active-border-color: var(--colors-gama-300);
86
+ --colors-button-outlined-common-hover-text-color: var(--colors-gama-500);
87
+ --colors-button-outlined-common-hover-bg-color: var(--colors-gama-50);
88
+ --colors-button-outlined-common-hover-border-color: var(--colors-gama-300);
89
+ --colors-button-outlined-common-disabled-text-color: var(--colors-delta-300);
90
+ --colors-button-outlined-common-disabled-bg-color: transparent;
91
+ --colors-button-outlined-common-disabled-border-color: var(--colors-delta-300);
92
+
93
+ --colors-button-outlined-error-text-color: var(--colors-beta-500);
94
+ --colors-button-outlined-error-bg-color: transparent;
95
+ --colors-button-outlined-error-border-color: var(--colors-beta-500);
96
+ --colors-button-outlined-error-focused-text-color: #ffffff;
97
+ --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
98
+ --colors-button-outlined-error-focused-border-color: var(--colors-beta-400);
99
+ --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
100
+ --colors-button-outlined-error-active-bg-color: var(--colors-beta-100);
101
+ --colors-button-outlined-error-active-border-color: var(--colors-beta-700);
102
+ --colors-button-outlined-error-hover-text-color: var(--colors-beta-600);
103
+ --colors-button-outlined-error-hover-bg-color: var(--colors-beta-100);
104
+ --colors-button-outlined-error-hover-border-color: var(--colors-beta-600);
105
+ --colors-button-outlined-error-disabled-text-color: var(--colors-delta-300);
106
+ --colors-button-outlined-error-disabled-bg-color: transparent;
107
+ --colors-button-outlined-error-disabled-border-color: var(--colors-delta-300);
108
+
109
+ --colors-button-text-common-text-color: var(--colors-gama-500);
110
+ --colors-button-text-common-bg-color: transparent;
111
+ --colors-button-text-common-border-color: transparent;
112
+ --colors-button-text-common-focused-text-color: var(--colors-gama-500);
113
+ --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
114
+ --colors-button-text-common-focused-border-color: var(--colors-gama-400);
115
+ --colors-button-text-common-active-text-color: var(--colors-gama-500);
116
+ --colors-button-text-common-active-bg-color: var(--colors-gama-100);
117
+ --colors-button-text-common-active-border-color: var(--colors-gama-100);
118
+ --colors-button-text-common-hover-text-color: var(--colors-gama-500);
119
+ --colors-button-text-common-hover-bg-color: var(--colors-gama-50);
120
+ --colors-button-text-common-hover-border-color: var(--colors-gama-50);
121
+ --colors-button-text-common-disabled-text-color: var(--colors-delta-300);
122
+ --colors-button-text-common-disabled-bg-color: transparent;
123
+ --colors-button-text-common-disabled-border-color: transparent;
124
+
125
+ --colors-button-text-error-text-color: var(--colors-beta-500);
126
+ --colors-button-text-error-bg-color: transparent;
127
+ --colors-button-text-error-border-color: transparent;
128
+ --colors-button-text-error-focused-text-color: var(--colors-beta-600);
129
+ --colors-button-text-error-focused-bg-color: var(--colors-beta-100);
130
+ --colors-button-text-error-focused-border-color: var(--colors-beta-400);
131
+ --colors-button-text-error-active-text-color: var(--colors-beta-600);
132
+ --colors-button-text-error-active-bg-color: var(--colors-beta-100);
133
+ --colors-button-text-error-active-border-color: var(--colors-beta-100);
134
+ --colors-button-text-error-hover-text-color: var(--colors-beta-600);
135
+ --colors-button-text-error-hover-bg-color: var(--colors-beta-100);
136
+ --colors-button-text-error-hover-border-color: var(--colors-beta-100);
137
+ --colors-button-text-error-disabled-text-color: var(--colors-delta-300);
138
+ --colors-button-text-error-disabled-bg-color: transparent;
139
+ --colors-button-text-error-disabled-border-color: transparent;
140
+
141
+ --colors-button-textGray-common-text-color: var(--colors-delta-700);
142
+ --colors-button-textGray-common-bg-color: transparent;
143
+ --colors-button-textGray-common-border-color: transparent;
144
+ --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
145
+ --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
146
+ --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
147
+ --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
148
+ --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
149
+ --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
150
+ --colors-button-textGray-common-hover-text-color: var(--colors-gama-500);
151
+ --colors-button-textGray-common-hover-bg-color: var(--colors-gama-50);
152
+ --colors-button-textGray-common-hover-border-color: var(--colors-gama-50);
153
+ --colors-button-textGray-common-disabled-text-color: var(--colors-delta-300);
154
+ --colors-button-textGray-common-disabled-bg-color: transparent;
155
+ --colors-button-textGray-common-disabled-border-color: transparent;
156
+
157
+ --colors-button-textWhite-common-text-color: white;
158
+ --colors-button-textWhite-common-bg-color: transparent;
159
+ --colors-button-textWhite-common-border-color: transparent;
160
+ --colors-button-textWhite-common-focused-text-color: white;
161
+ --colors-button-textWhite-common-focused-bg-color: transparent;
162
+ --colors-button-textWhite-common-focused-border-color: transparent;
163
+ --colors-button-textWhite-common-active-text-color: white;
164
+ --colors-button-textWhite-common-active-bg-color: transparent;
165
+ --colors-button-textWhite-common-active-border-color: transparent;
166
+ --colors-button-textWhite-common-hover-text-color: white;
167
+ --colors-button-textWhite-common-hover-bg-color: transparent;
168
+ --colors-button-textWhite-common-hover-border-color: transparent;
169
+ --colors-button-textWhite-common-disabled-text-color: white;
170
+ --colors-button-textWhite-common-disabled-bg-color: transparent;
171
+ --colors-button-textWhite-common-disabled-border-color: transparent;
172
+
173
+ --colors-menu-text-active: var(--colors-jade-700);
174
+ }