@snabcentr/client-ui 0.2.3 → 0.2.6
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.
Potentially problematic release.
This version of @snabcentr/client-ui might be problematic. Click here for more details.
- package/README.md +0 -6
- package/package.json +1 -1
- package/styles/taiga/variables.less +3 -150
package/README.md
CHANGED
|
@@ -7,9 +7,3 @@
|
|
|
7
7
|
## License
|
|
8
8
|
|
|
9
9
|
Commercial (Коммерческая)
|
|
10
|
-
|
|
11
|
-
## Запуск приложения
|
|
12
|
-
|
|
13
|
-
* Сборка тестового приложения `ng build client-ui-example`.
|
|
14
|
-
* Перед запуском приложения нужно выполнить сборку библиотеки `ng build @snabcentr/client-ui`. Собранная библиотека будет находиться в папке `dist/`.
|
|
15
|
-
* Запуск `npm start`.
|
package/package.json
CHANGED
|
@@ -1,70 +1,11 @@
|
|
|
1
|
-
// TODO: TASK:[6824]: Доработать файл стилей.
|
|
2
|
-
@font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
3
|
-
|
|
4
1
|
:root {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--tui-font-heading: var(--tui-heading-font);
|
|
9
|
-
--tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading);
|
|
10
|
-
--tui-font-heading-2: bold 2.75rem/3rem var(--tui-font-heading);
|
|
11
|
-
--tui-font-heading-3: bold 2.25rem/2.5rem var(--tui-font-heading);
|
|
12
|
-
--tui-font-heading-4: bold 1.75rem/2rem var(--tui-font-heading);
|
|
13
|
-
--tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading);
|
|
14
|
-
--tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading);
|
|
15
|
-
--tui-font-text: var(--tui-text-font);
|
|
16
|
-
--tui-font-text-xl: normal 1.25rem/1.75rem var(--tui-font-text);
|
|
17
|
-
--tui-font-text-l: normal 1.125rem/1.75rem var(--tui-font-text);
|
|
18
|
-
--tui-font-text-l-2: normal 1.125rem/1.5rem var(--tui-font-text);
|
|
19
|
-
--tui-font-text-m: normal 1rem/1.5rem var(--tui-font-text);
|
|
20
|
-
--tui-font-text-m-2: normal 1rem/1.25rem var(--tui-font-text);
|
|
21
|
-
--tui-font-text-s: normal 0.875rem/1.25rem var(--tui-font-text);
|
|
22
|
-
--tui-font-text-s-2: normal 0.875rem/1rem var(--tui-font-text);
|
|
23
|
-
--tui-font-text-xs: normal 0.75rem/1rem var(--tui-font-text);
|
|
24
|
-
// Sizes
|
|
25
|
-
--tui-radius-xs: 0.25rem;
|
|
26
|
-
--tui-radius-s: 0.5rem;
|
|
27
|
-
--tui-radius-m: 0.75rem;
|
|
28
|
-
--tui-radius-l: 0.75rem;
|
|
29
|
-
--tui-radius-xl: 1.5rem;
|
|
30
|
-
--tui-skeleton-radius: var(--tui-radius-m);
|
|
31
|
-
--tui-height-xs: 1.5rem;
|
|
32
|
-
--tui-height-s: 2rem;
|
|
33
|
-
--tui-height-m: 2.75rem;
|
|
34
|
-
--tui-height-l: 3.5rem;
|
|
35
|
-
// Input padding
|
|
36
|
-
--tui-padding-s: 0.75rem;
|
|
37
|
-
--tui-padding-m: 0.75rem;
|
|
38
|
-
--tui-padding-l: 1rem;
|
|
39
|
-
// Misc
|
|
40
|
-
--tui-duration: 0.3s;
|
|
41
|
-
--tui-backdrop: none;
|
|
42
|
-
// Special colors
|
|
43
|
-
--tui-disabled-opacity: 0.56;
|
|
44
|
-
--tui-autofill: #fff5c0;
|
|
45
|
-
// Base colors
|
|
46
|
-
--tui-base-01: #fff; // background and icons on inverted background
|
|
47
|
-
--tui-base-02: #f6f6f6; // secondary background, marker icons background
|
|
48
|
-
--tui-base-03: #eeefef; // basic border
|
|
49
|
-
--tui-base-04: #e0dfe0; // hovered borders
|
|
50
|
-
--tui-base-05: #cbcbcb; // interface icons
|
|
51
|
-
--tui-base-06: #b8b8b8; // hovered interface icons
|
|
52
|
-
--tui-base-07: #888888; // inverted background
|
|
53
|
-
--tui-base-08: #666666; // dark interface icons
|
|
54
|
-
--tui-base-09: #000; // icons on inverted background
|
|
2
|
+
// Sizes
|
|
3
|
+
--tui-skeleton-radius: var(--tui-radius-m);
|
|
4
|
+
// Base colors
|
|
55
5
|
--tui-primary: #ffcc40; // primary buttons, background
|
|
56
6
|
--tui-primary-hover: #ffe49b; // primary buttons hover
|
|
57
7
|
--tui-primary-active: #ffbb00; // primary buttons pressed
|
|
58
8
|
--tui-primary-text: #000; // text on primary background
|
|
59
|
-
--tui-secondary: var(--tui-base-01); // inputs and secondary buttons
|
|
60
|
-
--tui-secondary-hover: var(--tui-base-04); // inputs and secondary buttons hover
|
|
61
|
-
--tui-secondary-active: var(--tui-base-02); // inputs and secondary buttons pressed
|
|
62
|
-
--tui-accent: #ff7043; // fill and outline of accent elements
|
|
63
|
-
--tui-accent-hover: #ff9a94; // accent elements hover
|
|
64
|
-
--tui-accent-active: #e7716a; // accent elements pressed
|
|
65
|
-
--tui-accent-text: #fff; // text on accent background
|
|
66
|
-
--tui-selection: rgba(112, 182, 246, 0.12); // selected text background
|
|
67
|
-
--tui-focus: rgba(51, 51, 51, 0.64); // focus ring color
|
|
68
9
|
--tui-clear: rgba(246, 246, 246, 1); // translucent dark fill
|
|
69
10
|
--tui-clear-disabled: rgb(230, 229, 229); // translucent dark fill disabled
|
|
70
11
|
--tui-clear-hover: rgba(238, 239, 239, 1); // translucent dark fill hover
|
|
@@ -72,88 +13,6 @@
|
|
|
72
13
|
--tui-clear-inverse: rgba(255, 255, 255, 0.16); // translucent light fill
|
|
73
14
|
--tui-clear-inverse-hover: rgba(255, 255, 255, 0.24); // translucent light fill hover
|
|
74
15
|
--tui-clear-inverse-active: rgba(255, 255, 255, 0.4); // translucent light fill pressed
|
|
75
|
-
--tui-elevation-01: #fff; // background of elevated elements
|
|
76
|
-
--tui-elevation-02: #fff; // background of elevated elements
|
|
77
|
-
// Statuses
|
|
78
|
-
--tui-error-fill: rgba(226, 56, 56, 1); // icons and decorative elements with error status
|
|
79
|
-
--tui-error-bg: rgba(252, 230, 230, 1); // translucent error background
|
|
80
|
-
--tui-error-bg-hover: rgba(252, 209, 209, 1); // translucent hover error background
|
|
81
|
-
--tui-success-fill: rgba(67, 146, 39, 1); // icon and decorative elements with success status
|
|
82
|
-
--tui-success-bg: rgba(228, 242, 224, 1); // translucent success background
|
|
83
|
-
--tui-success-bg-hover: rgba(194, 220, 185, 1); // translucent success hover
|
|
84
|
-
--tui-warning-fill: var(--tui-primary); // icon and decorative elements with warning status
|
|
85
|
-
--tui-warning-bg: rgba(255, 246, 223, 1); // translucent warning background
|
|
86
|
-
--tui-warning-bg-hover: var(--tui-primary-hover); // translucent warning background
|
|
87
|
-
--tui-info-fill: rgba(119, 174, 237, 1); // icon and decorative elements with info status
|
|
88
|
-
--tui-info-bg: rgba(235, 245, 255, 1); // translucent info background
|
|
89
|
-
--tui-info-bg-hover: rgba(212, 231, 255, 1); // translucent info background
|
|
90
|
-
--tui-neutral-fill: var(--tui-base-07); // icon and decorative elements with neutral status
|
|
91
|
-
--tui-neutral-bg: var(--tui-base-02); // translucent info background
|
|
92
|
-
--tui-neutral-bg-hover: var(--tui-base-04); // translucent info background
|
|
93
|
-
// Text
|
|
94
|
-
--tui-text-01: var(--tui-base-09);
|
|
95
|
-
--tui-text-02: var(--tui-base-07);
|
|
96
|
-
--tui-text-03: var(--tui-base-05);
|
|
97
|
-
--tui-link: #1e50c8;
|
|
98
|
-
--tui-link-hover: #4c91ed;
|
|
99
|
-
--tui-positive: var(--tui-success-fill);
|
|
100
|
-
--tui-positive-hover: var(--tui-success-bg);
|
|
101
|
-
--tui-negative: var(--tui-error-fill);
|
|
102
|
-
--tui-negative-hover: var(--tui-error-bg-hover);
|
|
103
|
-
// Modifiers for dark background
|
|
104
|
-
--tui-error-fill-night: rgba(255, 140, 103, 1);
|
|
105
|
-
--tui-error-bg-night: rgba(244, 87, 37, 0.32);
|
|
106
|
-
--tui-error-bg-night-hover: rgba(244, 87, 37, 0.4);
|
|
107
|
-
--tui-success-fill-night: rgb(74, 201, 155);
|
|
108
|
-
--tui-success-bg-night: rgba(74, 201, 155, 0.32);
|
|
109
|
-
--tui-success-bg-night-hover: rgba(74, 201, 155, 0.4);
|
|
110
|
-
--tui-warning-fill-night: rgb(255, 199, 0);
|
|
111
|
-
--tui-warning-bg-night: rgba(255, 199, 0, 0.32);
|
|
112
|
-
--tui-warning-bg-night-hover: rgba(255, 199, 0, 0.4);
|
|
113
|
-
--tui-info-fill-night: rgb(112, 182, 246);
|
|
114
|
-
--tui-info-bg-night: rgba(112, 182, 246, 0.32);
|
|
115
|
-
--tui-info-bg-night-hover: rgba(112, 182, 246, 0.4);
|
|
116
|
-
--tui-neutral-fill-night: rgb(149, 155, 164);
|
|
117
|
-
--tui-neutral-bg-night: rgba(149, 155, 164, 0.32);
|
|
118
|
-
--tui-neutral-bg-night-hover: rgba(149, 155, 164, 0.48);
|
|
119
|
-
--tui-autofill-night: rgb(85, 74, 42);
|
|
120
|
-
//
|
|
121
|
-
--tui-text-01-night: rgba(255, 255, 255, 1);
|
|
122
|
-
--tui-text-02-night: rgba(255, 255, 255, 0.72);
|
|
123
|
-
--tui-text-03-night: rgba(255, 255, 255, 0.6);
|
|
124
|
-
--tui-link-night: #6788ff;
|
|
125
|
-
--tui-link-night-hover: #526ed3;
|
|
126
|
-
--tui-positive-night: #44c596;
|
|
127
|
-
--tui-positive-night-hover: #3aa981;
|
|
128
|
-
--tui-negative-night: #ff8c67;
|
|
129
|
-
--tui-negative-night-hover: #bb593a;
|
|
130
|
-
//
|
|
131
|
-
--tui-support-01: #a8cef1;
|
|
132
|
-
--tui-support-02: #3682db;
|
|
133
|
-
--tui-support-03: #8dda71;
|
|
134
|
-
--tui-support-04: #34b41f;
|
|
135
|
-
--tui-support-05: #e29398;
|
|
136
|
-
--tui-support-06: #b8474e;
|
|
137
|
-
--tui-support-07: #fcc068;
|
|
138
|
-
--tui-support-08: #ff8a00;
|
|
139
|
-
--tui-support-09: #dab3f9;
|
|
140
|
-
--tui-support-10: #7b439e;
|
|
141
|
-
--tui-support-11: #fee797;
|
|
142
|
-
--tui-support-12: #fcbb14;
|
|
143
|
-
--tui-support-13: #ea97c4;
|
|
144
|
-
--tui-support-14: #bd65a4;
|
|
145
|
-
--tui-support-15: #7fd7cc;
|
|
146
|
-
--tui-support-16: #2fad96;
|
|
147
|
-
--tui-support-17: #d4aca2;
|
|
148
|
-
--tui-support-18: #9d6f64;
|
|
149
|
-
--tui-support-19: #d2e9a2;
|
|
150
|
-
--tui-support-20: #aadc42;
|
|
151
|
-
--tui-support-21: #a0c5df;
|
|
152
|
-
--tui-chart-0: var(--tui-primary);
|
|
153
|
-
--tui-chart-1: var(--tui-support-13);
|
|
154
|
-
--tui-chart-2: var(--tui-support-21);
|
|
155
|
-
--tui-chart-3: var(--tui-support-11);
|
|
156
|
-
--tui-chart-4: var(--tui-base-05);
|
|
157
16
|
}
|
|
158
17
|
|
|
159
18
|
sc-input-quantity {
|
|
@@ -183,9 +42,3 @@ sc-input-quantity {
|
|
|
183
42
|
display: none !important;
|
|
184
43
|
}
|
|
185
44
|
}
|
|
186
|
-
|
|
187
|
-
tui-hint {
|
|
188
|
-
background-color: #526ed3 !important;
|
|
189
|
-
color: white !important;
|
|
190
|
-
font: var(--tui-font-text-s) !important;
|
|
191
|
-
}
|