@policystudio/policy-studio-ui-vue 1.1.90-beta.66 → 1.1.90-ui-update.1
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/dist/css/psui_styles_output.css +521 -529
- package/doc/src/stories/Colors.mdx +224 -37
- package/package.json +2 -2
- package/src/assets/scss/components/PsButton.scss +36 -37
- package/tailwind.config.js +18 -22
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Meta } from
|
|
1
|
+
import { Meta } from "@storybook/addon-docs";
|
|
2
2
|
|
|
3
3
|
<Meta title="Colors" />
|
|
4
4
|
|
|
@@ -7,64 +7,251 @@ import {Meta } from '@storybook/addon-docs';
|
|
|
7
7
|
`}</style>
|
|
8
8
|
|
|
9
9
|
# Colors
|
|
10
|
+
|
|
10
11
|
Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
|
|
11
12
|
|
|
12
13
|
## Blue
|
|
14
|
+
|
|
13
15
|
<div class="psui-flex">
|
|
14
|
-
<div
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<div
|
|
21
|
-
|
|
16
|
+
<div
|
|
17
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy"
|
|
18
|
+
data-to-copy="psui-bg-blue"
|
|
19
|
+
>
|
|
20
|
+
Blue <div>#5094D3</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div
|
|
23
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy"
|
|
24
|
+
data-to-copy="psui-bg-blue-80"
|
|
25
|
+
>
|
|
26
|
+
Blue 80 <div>#002A3A</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div
|
|
29
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy"
|
|
30
|
+
data-to-copy="psui-bg-blue-70"
|
|
31
|
+
>
|
|
32
|
+
Blue 70 <div>#00465F</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div
|
|
35
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy"
|
|
36
|
+
data-to-copy="psui-bg-blue-60"
|
|
37
|
+
>
|
|
38
|
+
Blue 60 <div>#127999</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div
|
|
41
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy"
|
|
42
|
+
data-to-copy="psui-bg-blue-50"
|
|
43
|
+
>
|
|
44
|
+
Blue 50 <div>#64B5CE</div>
|
|
45
|
+
</div>
|
|
46
|
+
<div
|
|
47
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy"
|
|
48
|
+
data-to-copy="psui-bg-blue-20"
|
|
49
|
+
>
|
|
50
|
+
Blue 20 <div>#E0EFF6</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div
|
|
53
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy"
|
|
54
|
+
data-to-copy="psui-bg-blue-10"
|
|
55
|
+
>
|
|
56
|
+
Blue 10 <div>#ECF7FB</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div
|
|
59
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy"
|
|
60
|
+
data-to-copy="psui-bg-white"
|
|
61
|
+
>
|
|
62
|
+
White <div>#FFFFFF</div>
|
|
63
|
+
</div>
|
|
22
64
|
</div>
|
|
23
65
|
|
|
24
66
|
## Gray
|
|
67
|
+
|
|
25
68
|
<div class="psui-flex">
|
|
26
|
-
<div
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<div
|
|
33
|
-
|
|
69
|
+
<div
|
|
70
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy"
|
|
71
|
+
data-to-copy="psui-bg-gray-80"
|
|
72
|
+
>
|
|
73
|
+
Gray 80 <div>#28323B</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div
|
|
76
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy"
|
|
77
|
+
data-to-copy="psui-bg-gray-70"
|
|
78
|
+
>
|
|
79
|
+
Gray 70 <div>#34404A</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div
|
|
82
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy"
|
|
83
|
+
data-to-copy="psui-bg-gray-60"
|
|
84
|
+
>
|
|
85
|
+
Gray 60 <div>#515E6A</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div
|
|
88
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy"
|
|
89
|
+
data-to-copy="psui-bg-gray-50"
|
|
90
|
+
>
|
|
91
|
+
Gray 50 <div>#798490</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div
|
|
94
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy"
|
|
95
|
+
data-to-copy="psui-bg-gray-40"
|
|
96
|
+
>
|
|
97
|
+
Gray 40 <div>#A2ACB7</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div
|
|
100
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy"
|
|
101
|
+
data-to-copy="psui-bg-gray-30"
|
|
102
|
+
>
|
|
103
|
+
Gray 30 <div>#D6DDE5</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div
|
|
106
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy"
|
|
107
|
+
data-to-copy="psui-bg-gray-20"
|
|
108
|
+
>
|
|
109
|
+
Gray 20 <div>#E6ECF2</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div
|
|
112
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy"
|
|
113
|
+
data-to-copy="psui-bg-gray-10"
|
|
114
|
+
>
|
|
115
|
+
Gray 10 <div>#F3F6F9</div>
|
|
116
|
+
</div>
|
|
34
117
|
</div>
|
|
35
118
|
|
|
36
119
|
## Yellow
|
|
120
|
+
|
|
37
121
|
<div class="psui-flex">
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
122
|
+
<div
|
|
123
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy"
|
|
124
|
+
data-to-copy="psui-bg-yellow-80"
|
|
125
|
+
>
|
|
126
|
+
Yellow 80 <div>#834C0D</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div
|
|
129
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy"
|
|
130
|
+
data-to-copy="psui-bg-yellow-70"
|
|
131
|
+
>
|
|
132
|
+
Yellow 70 <div>#B87305</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div
|
|
135
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy"
|
|
136
|
+
data-to-copy="psui-bg-yellow-20"
|
|
137
|
+
>
|
|
138
|
+
Yellow 20 <div>#EDAB3E</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div
|
|
141
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy"
|
|
142
|
+
data-to-copy="psui-bg-yellow-10"
|
|
143
|
+
>
|
|
144
|
+
Yellow 10 <div>#FDF3E3</div>
|
|
145
|
+
</div>
|
|
42
146
|
</div>
|
|
43
147
|
|
|
44
148
|
## Green
|
|
149
|
+
|
|
45
150
|
<div class="psui-flex">
|
|
46
|
-
<div
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
151
|
+
<div
|
|
152
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy"
|
|
153
|
+
data-to-copy="psui-bg-green-80"
|
|
154
|
+
>
|
|
155
|
+
Green 80 <div>#286943</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div
|
|
158
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy"
|
|
159
|
+
data-to-copy="psui-bg-green-70"
|
|
160
|
+
>
|
|
161
|
+
Green 70 <div>#44A06A</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div
|
|
164
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy"
|
|
165
|
+
data-to-copy="psui-bg-green-20"
|
|
166
|
+
>
|
|
167
|
+
Green 20 <div>#5DB883</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div
|
|
170
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy"
|
|
171
|
+
data-to-copy="psui-bg-green-10"
|
|
172
|
+
>
|
|
173
|
+
Green 10 <div>#DEF8E8</div>
|
|
174
|
+
</div>
|
|
50
175
|
</div>
|
|
51
176
|
|
|
52
177
|
## Red
|
|
178
|
+
|
|
53
179
|
<div class="psui-flex">
|
|
54
|
-
<div
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
180
|
+
<div
|
|
181
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy"
|
|
182
|
+
data-to-copy="psui-bg-red-80"
|
|
183
|
+
>
|
|
184
|
+
Red 80 <div>#832F2E</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div
|
|
187
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy"
|
|
188
|
+
data-to-copy="psui-bg-red-70"
|
|
189
|
+
>
|
|
190
|
+
Red 70 <div>#AA3937</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div
|
|
193
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy"
|
|
194
|
+
data-to-copy="psui-bg-red-20"
|
|
195
|
+
>
|
|
196
|
+
Red 20 <div>#D65C5A</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div
|
|
199
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy"
|
|
200
|
+
data-to-copy="psui-bg-red-15"
|
|
201
|
+
>
|
|
202
|
+
Red 15 <div>#EAC5C5</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div
|
|
205
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy"
|
|
206
|
+
data-to-copy="psui-bg-red-10"
|
|
207
|
+
>
|
|
208
|
+
Red 10 <div>#FCEBEB</div>
|
|
209
|
+
</div>
|
|
59
210
|
</div>
|
|
60
211
|
|
|
61
212
|
## Chart colors
|
|
213
|
+
|
|
62
214
|
<div class="psui-flex">
|
|
63
|
-
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<div
|
|
215
|
+
<div
|
|
216
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy"
|
|
217
|
+
data-to-copy="psui-bg-sky"
|
|
218
|
+
>
|
|
219
|
+
Sky <div>#518BE2</div>
|
|
220
|
+
</div>
|
|
221
|
+
<div
|
|
222
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy"
|
|
223
|
+
data-to-copy="psui-bg-teal"
|
|
224
|
+
>
|
|
225
|
+
Teal <div>#57C0BA</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div
|
|
228
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy"
|
|
229
|
+
data-to-copy="psui-bg-emerald"
|
|
230
|
+
>
|
|
231
|
+
Emerald <div>#8CCA82</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div
|
|
234
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy"
|
|
235
|
+
data-to-copy="psui-bg-mustard"
|
|
236
|
+
>
|
|
237
|
+
Mustard <div>#E9CF74</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div
|
|
240
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy"
|
|
241
|
+
data-to-copy="psui-bg-orange"
|
|
242
|
+
>
|
|
243
|
+
Orange <div>#FF906D</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div
|
|
246
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy"
|
|
247
|
+
data-to-copy="psui-bg-pink"
|
|
248
|
+
>
|
|
249
|
+
Pink <div>#FF77B8</div>
|
|
250
|
+
</div>
|
|
251
|
+
<div
|
|
252
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy"
|
|
253
|
+
data-to-copy="psui-bg-purple"
|
|
254
|
+
>
|
|
255
|
+
Purple <div>#9278C9</div>
|
|
256
|
+
</div>
|
|
70
257
|
</div>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@policystudio/policy-studio-ui-vue",
|
|
3
|
-
"version": "1.1.90-
|
|
3
|
+
"version": "1.1.90-ui-update.1",
|
|
4
4
|
"description": "Policy Studio UI",
|
|
5
5
|
"author": "Policy Studio Team",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"lint": "vue-cli-service lint",
|
|
8
8
|
"build": "tsc -p tsconfig.json && npm run build:tailwind && npm run gulp",
|
|
9
|
-
"full-publish": "npm run lint && npm run build && npm publish --tag
|
|
9
|
+
"full-publish": "npm run lint && npm run build && npm publish --tag ui-update",
|
|
10
10
|
"kill-port": "sh ./scripts/kill-port.sh",
|
|
11
11
|
"build:tailwind": "tailwindcss build -i src/assets/scss/base.scss -o dist/css/psui_styles_output.css -c tailwind.config.js",
|
|
12
12
|
"watch:tailwind": "watch 'npm run build:tailwind' dist/css",
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
|
|
3
2
|
.psui-el-button {
|
|
4
|
-
|
|
5
3
|
@apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md psui-transition-all psui-ease-in-out;
|
|
6
4
|
transition-duration: 130ms;
|
|
7
5
|
|
|
@@ -19,26 +17,26 @@
|
|
|
19
17
|
&.icon-right {
|
|
20
18
|
@apply psui-flex-row-reverse;
|
|
21
19
|
}
|
|
22
|
-
|
|
20
|
+
|
|
23
21
|
&.size-big {
|
|
24
22
|
@apply psui-flex psui-items-center psui-content-center;
|
|
25
23
|
padding: 9.5px 16px;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
24
|
+
|
|
25
|
+
&.icon-left {
|
|
26
|
+
padding: 8px 16px;
|
|
27
|
+
i {
|
|
28
|
+
font-size: 24px;
|
|
29
|
+
margin-right: 8px;
|
|
33
30
|
}
|
|
31
|
+
}
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
33
|
+
&.icon-right {
|
|
34
|
+
padding: 8px 16px;
|
|
35
|
+
i {
|
|
36
|
+
font-size: 24px;
|
|
37
|
+
margin-left: 8px;
|
|
41
38
|
}
|
|
39
|
+
}
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
&.size-medium {
|
|
@@ -63,9 +61,9 @@
|
|
|
63
61
|
|
|
64
62
|
&.layout-onlytext {
|
|
65
63
|
&:active:not(.disabled) {
|
|
66
|
-
@apply psui-bg-blue-20 psui-text-blue-60;
|
|
67
|
-
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
|
|
68
|
-
}
|
|
64
|
+
@apply psui-bg-blue-20 psui-text-blue-60;
|
|
65
|
+
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
|
|
66
|
+
}
|
|
69
67
|
}
|
|
70
68
|
|
|
71
69
|
&.hover.layout-onlytext {
|
|
@@ -88,20 +86,21 @@
|
|
|
88
86
|
}
|
|
89
87
|
|
|
90
88
|
&.layout-solid {
|
|
91
|
-
@apply psui-bg-blue-60 psui-text-white;
|
|
89
|
+
@apply psui-bg-blue-60 psui-text-white;
|
|
92
90
|
|
|
93
91
|
&.hover {
|
|
94
|
-
|
|
92
|
+
background-color: #0c6885;
|
|
93
|
+
@apply psui-text-white;
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
&:active:not(.disabled) {
|
|
98
97
|
@apply psui-bg-blue-50 psui-text-white;
|
|
99
|
-
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
|
|
98
|
+
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
100
99
|
}
|
|
101
100
|
|
|
102
101
|
&.disabled {
|
|
103
|
-
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
|
|
104
|
-
}
|
|
102
|
+
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default;
|
|
103
|
+
}
|
|
105
104
|
}
|
|
106
105
|
|
|
107
106
|
&.layout-outline {
|
|
@@ -110,53 +109,53 @@
|
|
|
110
109
|
|
|
111
110
|
&.hover,
|
|
112
111
|
&:active {
|
|
113
|
-
@apply psui-border psui-border-blue-60
|
|
112
|
+
@apply psui-border psui-border-blue-60;
|
|
114
113
|
}
|
|
115
114
|
|
|
116
115
|
&.disabled {
|
|
117
116
|
@apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
|
|
118
|
-
}
|
|
117
|
+
}
|
|
119
118
|
}
|
|
120
119
|
|
|
121
120
|
&.layout-ghost {
|
|
122
121
|
@apply psui-bg-blue-20 psui-text-blue-60;
|
|
123
122
|
|
|
124
123
|
&.hover {
|
|
125
|
-
@apply psui-bg-blue-10
|
|
126
|
-
}
|
|
124
|
+
@apply psui-bg-blue-10;
|
|
125
|
+
}
|
|
127
126
|
|
|
128
127
|
&:active:not(.disabled) {
|
|
129
|
-
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
|
|
128
|
+
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
|
|
130
129
|
}
|
|
131
130
|
|
|
132
131
|
&.disabled {
|
|
133
|
-
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
|
|
132
|
+
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default;
|
|
134
133
|
}
|
|
135
134
|
}
|
|
136
135
|
|
|
137
136
|
&.layout-onlytext {
|
|
138
|
-
@apply
|
|
137
|
+
@apply psui-text-blue-60;
|
|
139
138
|
|
|
140
139
|
&.disabled {
|
|
141
|
-
@apply psui-text-gray-40 psui-cursor-default
|
|
140
|
+
@apply psui-text-gray-40 psui-cursor-default;
|
|
142
141
|
}
|
|
143
|
-
|
|
142
|
+
|
|
144
143
|
&.hover {
|
|
145
|
-
|
|
144
|
+
color: #0c6885;
|
|
146
145
|
}
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
&.layout-caution {
|
|
150
149
|
@apply psui-bg-red-10 psui-text-red-20;
|
|
151
150
|
|
|
152
|
-
&.hover,
|
|
151
|
+
&.hover,
|
|
153
152
|
&:active:not(.disabled) {
|
|
154
153
|
@apply psui-bg-red-10 psui-text-red-70;
|
|
155
154
|
}
|
|
156
155
|
|
|
157
156
|
&.disabled {
|
|
158
|
-
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
|
|
157
|
+
@apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default;
|
|
159
158
|
}
|
|
160
159
|
}
|
|
161
160
|
}
|
|
162
|
-
}
|
|
161
|
+
}
|
package/tailwind.config.js
CHANGED
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
darkMode: 'media', // or 'media' or 'class'
|
|
14
14
|
theme: {
|
|
15
15
|
colors: {
|
|
16
|
-
|
|
16
|
+
white: '#ffffff ',
|
|
17
17
|
'gray-10': '#F3F6F9',
|
|
18
18
|
'gray-20': '#E6ECF2',
|
|
19
19
|
'gray-30': '#D6DDE5',
|
|
@@ -23,11 +23,11 @@ export default {
|
|
|
23
23
|
'gray-70': '#34404A',
|
|
24
24
|
'gray-80': '#28323B',
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
blue: '#5094D3',
|
|
27
27
|
'blue-10': '#ECF7FB',
|
|
28
28
|
'blue-20': '#E0EFF6',
|
|
29
29
|
'blue-50': '#64B5CE',
|
|
30
|
-
'blue-60': '#
|
|
30
|
+
'blue-60': '#127999',
|
|
31
31
|
'blue-70': '#00465F',
|
|
32
32
|
'blue-80': '#002A3A',
|
|
33
33
|
|
|
@@ -109,33 +109,33 @@ export default {
|
|
|
109
109
|
95: '0.95',
|
|
110
110
|
},
|
|
111
111
|
cursor: {
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
grab: 'grab',
|
|
113
|
+
grabbing: 'grabbing',
|
|
114
114
|
},
|
|
115
115
|
zIndex: {
|
|
116
|
-
|
|
116
|
+
15: '15',
|
|
117
117
|
},
|
|
118
118
|
space: {
|
|
119
|
-
|
|
119
|
+
0.5: '0.125rem',
|
|
120
120
|
},
|
|
121
121
|
margin: {
|
|
122
|
-
|
|
122
|
+
0.5: '0.125rem',
|
|
123
123
|
},
|
|
124
124
|
padding: {
|
|
125
|
-
|
|
125
|
+
0.5: '0.125rem',
|
|
126
126
|
},
|
|
127
|
-
inset:{
|
|
127
|
+
inset: {
|
|
128
128
|
'-1': '-1rem',
|
|
129
|
-
'-2': '-0.5rem'
|
|
130
|
-
}
|
|
129
|
+
'-2': '-0.5rem',
|
|
130
|
+
},
|
|
131
131
|
},
|
|
132
132
|
screens: {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
sm: '640px',
|
|
134
|
+
md: '768px',
|
|
135
|
+
lg: '1024px',
|
|
136
|
+
xl: '1280px',
|
|
137
137
|
'2xl': '1536px',
|
|
138
|
-
}
|
|
138
|
+
},
|
|
139
139
|
},
|
|
140
140
|
variants: {
|
|
141
141
|
boxShadow: ['active'],
|
|
@@ -161,11 +161,7 @@ export default {
|
|
|
161
161
|
'disabled',
|
|
162
162
|
'checked',
|
|
163
163
|
],
|
|
164
|
-
borderColor: [
|
|
165
|
-
'disabled',
|
|
166
|
-
'hover',
|
|
167
|
-
'checked'
|
|
168
|
-
],
|
|
164
|
+
borderColor: ['disabled', 'hover', 'checked'],
|
|
169
165
|
space: ['responsive', 'hover', 'focus', 'first'],
|
|
170
166
|
padding: ['responsive', 'hover', 'focus', 'first'],
|
|
171
167
|
extend: {},
|