bianic-ui 0.5.7 → 0.5.8

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 (3) hide show
  1. package/package.json +3 -2
  2. package/src/style/color.css +333 -0
  3. package/src/style/scrollbar.css +42 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
5
5
  },
6
- "version": "0.5.7",
6
+ "version": "0.5.8",
7
7
  "description": "Design Language System develop by BIAENERGI",
8
8
  "scripts": {
9
9
  "rollup": "rollup -c",
@@ -80,7 +80,8 @@
80
80
  "files": [
81
81
  "dist",
82
82
  "dist/*.css",
83
- "tailwind.config.js"
83
+ "tailwind.config.js",
84
+ "src/style/*.css"
84
85
  ],
85
86
  "peerDependencies": {
86
87
  "react": "^18.2.0",
package/src/style/color.css ADDED
@@ -0,0 +1,333 @@
1
+ :root {
2
+ --primary-black: #2f2f2f;
3
+ --primary-coolgrey: #8b8ba6;
4
+ --primary-grey: #dadeeb;
5
+ --primary-white: #ffffff;
6
+ --dark: #000000;
7
+ --transparent: transparent;
8
+
9
+ /* black */
10
+ --black-transparent-10: color-mix(in srgb, var(--primary-black), var(--transparent) 10%);
11
+ --black-transparent-20: color-mix(in srgb, var(--primary-black), var(--transparent) 20%);
12
+ --black-transparent-30: color-mix(in srgb, var(--primary-black), var(--transparent) 30%);
13
+ --black-transparent-40: color-mix(in srgb, var(--primary-black), var(--transparent) 40%);
14
+ --black-transparent-50: color-mix(in srgb, var(--primary-black), var(--transparent) 50%);
15
+ --black-transparent-60: color-mix(in srgb, var(--primary-black), var(--transparent) 60%);
16
+ --black-transparent-70: color-mix(in srgb, var(--primary-black), var(--transparent) 70%);
17
+ --black-transparent-75: color-mix(in srgb, var(--primary-black), var(--transparent) 75%);
18
+ --black-transparent-80: color-mix(in srgb, var(--primary-black), var(--transparent) 80%);
19
+ --black-transparent-90: color-mix(in srgb, var(--primary-black), var(--transparent) 90%);
20
+
21
+ /* red */
22
+ --secondary-red: #DB2828;
23
+
24
+ --red-light-10: color-mix(in srgb, var(--secondary-red), var(--primary-white) 10%);
25
+ --red-light-20: color-mix(in srgb, var(--secondary-red), var(--primary-white) 20%);
26
+ --red-light-30: color-mix(in srgb, var(--secondary-red), var(--primary-white) 30%);
27
+ --red-light-40: color-mix(in srgb, var(--secondary-red), var(--primary-white) 40%);
28
+ --red-light-50: color-mix(in srgb, var(--secondary-red), var(--primary-white) 50%);
29
+ --red-light-60: color-mix(in srgb, var(--secondary-red), var(--primary-white) 60%);
30
+ --red-light-70: color-mix(in srgb, var(--secondary-red), var(--primary-white) 70%);
31
+ --red-light-80: color-mix(in srgb, var(--secondary-red), var(--primary-white) 80%);
32
+ --red-light-90: color-mix(in srgb, var(--secondary-red), var(--primary-white) 90%);
33
+
34
+ --red-dark-10: color-mix(in srgb, var(--secondary-red), var(--dark) 10%);
35
+ --red-dark-20: color-mix(in srgb, var(--secondary-red), var(--dark) 20%);
36
+ --red-dark-30: color-mix(in srgb, var(--secondary-red), var(--dark) 30%);
37
+ --red-dark-40: color-mix(in srgb, var(--secondary-red), var(--dark) 40%);
38
+ --red-dark-50: color-mix(in srgb, var(--secondary-red), var(--dark) 50%);
39
+ --red-dark-60: color-mix(in srgb, var(--secondary-red), var(--dark) 60%);
40
+ --red-dark-70: color-mix(in srgb, var(--secondary-red), var(--dark) 70%);
41
+ --red-dark-80: color-mix(in srgb, var(--secondary-red), var(--dark) 80%);
42
+ --red-dark-90: color-mix(in srgb, var(--secondary-red), var(--dark) 90%);
43
+
44
+
45
+ /* yellow */
46
+ --secondary-yellow: #F6B100;
47
+
48
+ --yellow-light-10: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 10%);
49
+ --yellow-light-20: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 20%);
50
+ --yellow-light-30: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 30%);
51
+ --yellow-light-40: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 40%);
52
+ --yellow-light-50: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 50%);
53
+ --yellow-light-60: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 60%);
54
+ --yellow-light-70: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 70%);
55
+ --yellow-light-80: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 80%);
56
+ --yellow-light-90: color-mix(in srgb, var(--secondary-yellow), var(--primary-white) 90%);
57
+
58
+ --yellow-dark-10: color-mix(in srgb, var(--secondary-yellow), var(--dark) 10%);
59
+ --yellow-dark-20: color-mix(in srgb, var(--secondary-yellow), var(--dark) 20%);
60
+ --yellow-dark-30: color-mix(in srgb, var(--secondary-yellow), var(--dark) 30%);
61
+ --yellow-dark-40: color-mix(in srgb, var(--secondary-yellow), var(--dark) 40%);
62
+ --yellow-dark-50: color-mix(in srgb, var(--secondary-yellow), var(--dark) 50%);
63
+ --yellow-dark-60: color-mix(in srgb, var(--secondary-yellow), var(--dark) 60%);
64
+ --yellow-dark-70: color-mix(in srgb, var(--secondary-yellow), var(--dark) 70%);
65
+ --yellow-dark-80: color-mix(in srgb, var(--secondary-yellow), var(--dark) 80%);
66
+ --yellow-dark-90: color-mix(in srgb, var(--secondary-yellow), var(--dark) 90%);
67
+
68
+
69
+ /* green */
70
+ --secondary-green: #21BA4C;
71
+
72
+ --green-light-10: color-mix(in srgb, var(--secondary-green), var(--primary-white) 10%);
73
+ --green-light-20: color-mix(in srgb, var(--secondary-green), var(--primary-white) 20%);
74
+ --green-light-30: color-mix(in srgb, var(--secondary-green), var(--primary-white) 30%);
75
+ --green-light-40: color-mix(in srgb, var(--secondary-green), var(--primary-white) 40%);
76
+ --green-light-50: color-mix(in srgb, var(--secondary-green), var(--primary-white) 50%);
77
+ --green-light-60: color-mix(in srgb, var(--secondary-green), var(--primary-white) 60%);
78
+ --green-light-70: color-mix(in srgb, var(--secondary-green), var(--primary-white) 70%);
79
+ --green-light-80: color-mix(in srgb, var(--secondary-green), var(--primary-white) 80%);
80
+ --green-light-90: color-mix(in srgb, var(--secondary-green), var(--primary-white) 90%);
81
+
82
+ --green-dark-10: color-mix(in srgb, var(--secondary-green), var(--dark) 10%);
83
+ --green-dark-20: color-mix(in srgb, var(--secondary-green), var(--dark) 20%);
84
+ --green-dark-30: color-mix(in srgb, var(--secondary-green), var(--dark) 30%);
85
+ --green-dark-40: color-mix(in srgb, var(--secondary-green), var(--dark) 40%);
86
+ --green-dark-50: color-mix(in srgb, var(--secondary-green), var(--dark) 50%);
87
+ --green-dark-60: color-mix(in srgb, var(--secondary-green), var(--dark) 60%);
88
+ --green-dark-70: color-mix(in srgb, var(--secondary-green), var(--dark) 70%);
89
+ --green-dark-80: color-mix(in srgb, var(--secondary-green), var(--dark) 80%);
90
+ --green-dark-90: color-mix(in srgb, var(--secondary-green), var(--dark) 90%);
91
+
92
+
93
+ /* teal */
94
+ --secondary-teal: #00b5ad;
95
+
96
+ --teal-light-10: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 10%);
97
+ --teal-light-20: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 20%);
98
+ --teal-light-30: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 30%);
99
+ --teal-light-40: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 40%);
100
+ --teal-light-50: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 50%);
101
+ --teal-light-60: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 60%);
102
+ --teal-light-70: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 70%);
103
+ --teal-light-80: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 80%);
104
+ --teal-light-90: color-mix(in srgb, var(--secondary-teal), var(--primary-white) 90%);
105
+
106
+ --teal-dark-10: color-mix(in srgb, var(--secondary-teal), var(--dark) 10%);
107
+ --teal-dark-20: color-mix(in srgb, var(--secondary-teal), var(--dark) 20%);
108
+ --teal-dark-30: color-mix(in srgb, var(--secondary-teal), var(--dark) 30%);
109
+ --teal-dark-40: color-mix(in srgb, var(--secondary-teal), var(--dark) 40%);
110
+ --teal-dark-50: color-mix(in srgb, var(--secondary-teal), var(--dark) 50%);
111
+ --teal-dark-60: color-mix(in srgb, var(--secondary-teal), var(--dark) 60%);
112
+ --teal-dark-70: color-mix(in srgb, var(--secondary-teal), var(--dark) 70%);
113
+ --teal-dark-80: color-mix(in srgb, var(--secondary-teal), var(--dark) 80%);
114
+ --teal-dark-90: color-mix(in srgb, var(--secondary-teal), var(--dark) 90%);
115
+
116
+
117
+ /* blue */
118
+ --secondary-blue: #5E5EEA;
119
+
120
+ --blue-light-10: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 10%);
121
+ --blue-light-20: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 20%);
122
+ --blue-light-30: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 30%);
123
+ --blue-light-40: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 40%);
124
+ --blue-light-50: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 50%);
125
+ --blue-light-60: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 60%);
126
+ --blue-light-70: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 70%);
127
+ --blue-light-80: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 80%);
128
+ --blue-light-90: color-mix(in srgb, var(--secondary-blue), var(--primary-white) 90%);
129
+
130
+ --blue-dark-10: color-mix(in srgb, var(--secondary-blue), var(--dark) 10%);
131
+ --blue-dark-20: color-mix(in srgb, var(--secondary-blue), var(--dark) 20%);
132
+ --blue-dark-30: color-mix(in srgb, var(--secondary-blue), var(--dark) 30%);
133
+ --blue-dark-40: color-mix(in srgb, var(--secondary-blue), var(--dark) 40%);
134
+ --blue-dark-50: color-mix(in srgb, var(--secondary-blue), var(--dark) 50%);
135
+ --blue-dark-60: color-mix(in srgb, var(--secondary-blue), var(--dark) 60%);
136
+ --blue-dark-70: color-mix(in srgb, var(--secondary-blue), var(--dark) 70%);
137
+ --blue-dark-80: color-mix(in srgb, var(--secondary-blue), var(--dark) 80%);
138
+ --blue-dark-90: color-mix(in srgb, var(--secondary-blue), var(--dark) 90%);
139
+
140
+
141
+ /* pink */
142
+ --secondary-pink: #FF47CB;
143
+
144
+ --pink-light-10: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 10%);
145
+ --pink-light-20: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 20%);
146
+ --pink-light-30: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 30%);
147
+ --pink-light-40: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 40%);
148
+ --pink-light-50: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 50%);
149
+ --pink-light-60: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 60%);
150
+ --pink-light-70: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 70%);
151
+ --pink-light-80: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 80%);
152
+ --pink-light-90: color-mix(in srgb, var(--secondary-pink), var(--primary-white) 90%);
153
+
154
+ --pink-dark-10: color-mix(in srgb, var(--secondary-pink), var(--dark) 10%);
155
+ --pink-dark-20: color-mix(in srgb, var(--secondary-pink), var(--dark) 20%);
156
+ --pink-dark-30: color-mix(in srgb, var(--secondary-pink), var(--dark) 30%);
157
+ --pink-dark-40: color-mix(in srgb, var(--secondary-pink), var(--dark) 40%);
158
+ --pink-dark-50: color-mix(in srgb, var(--secondary-pink), var(--dark) 50%);
159
+ --pink-dark-60: color-mix(in srgb, var(--secondary-pink), var(--dark) 60%);
160
+ --pink-dark-70: color-mix(in srgb, var(--secondary-pink), var(--dark) 70%);
161
+ --pink-dark-80: color-mix(in srgb, var(--secondary-pink), var(--dark) 80%);
162
+ --pink-dark-90: color-mix(in srgb, var(--secondary-pink), var(--dark) 90%);
163
+
164
+
165
+ /* coolgrey */
166
+ --secondary-coolgrey: #8C8CA6;
167
+
168
+ --coolgrey-light-10: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 10%);
169
+ --coolgrey-light-20: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 20%);
170
+ --coolgrey-light-30: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 30%);
171
+ --coolgrey-light-40: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 40%);
172
+ --coolgrey-light-50: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 50%);
173
+ --coolgrey-light-60: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 60%);
174
+ --coolgrey-light-70: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 70%);
175
+ --coolgrey-light-80: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 80%);
176
+ --coolgrey-light-90: color-mix(in srgb, var(--secondary-coolgrey), var(--primary-white) 90%);
177
+
178
+ --coolgrey-dark-10: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 10%);
179
+ --coolgrey-dark-20: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 20%);
180
+ --coolgrey-dark-30: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 30%);
181
+ --coolgrey-dark-40: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 40%);
182
+ --coolgrey-dark-50: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 50%);
183
+ --coolgrey-dark-60: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 60%);
184
+ --coolgrey-dark-70: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 70%);
185
+ --coolgrey-dark-80: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 80%);
186
+ --coolgrey-dark-90: color-mix(in srgb, var(--secondary-coolgrey), var(--dark) 90%);
187
+
188
+
189
+ /* orange */
190
+ --secondary-orange: #FF7B00;
191
+
192
+ --orange-light-10: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 10%);
193
+ --orange-light-20: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 20%);
194
+ --orange-light-30: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 30%);
195
+ --orange-light-40: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 40%);
196
+ --orange-light-50: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 50%);
197
+ --orange-light-60: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 60%);
198
+ --orange-light-70: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 70%);
199
+ --orange-light-80: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 80%);
200
+ --orange-light-90: color-mix(in srgb, var(--secondary-orange), var(--primary-white) 90%);
201
+
202
+ --orange-dark-10: color-mix(in srgb, var(--secondary-orange), var(--dark) 10%);
203
+ --orange-dark-20: color-mix(in srgb, var(--secondary-orange), var(--dark) 20%);
204
+ --orange-dark-30: color-mix(in srgb, var(--secondary-orange), var(--dark) 30%);
205
+ --orange-dark-40: color-mix(in srgb, var(--secondary-orange), var(--dark) 40%);
206
+ --orange-dark-50: color-mix(in srgb, var(--secondary-orange), var(--dark) 50%);
207
+ --orange-dark-60: color-mix(in srgb, var(--secondary-orange), var(--dark) 60%);
208
+ --orange-dark-70: color-mix(in srgb, var(--secondary-orange), var(--dark) 70%);
209
+ --orange-dark-80: color-mix(in srgb, var(--secondary-orange), var(--dark) 80%);
210
+ --orange-dark-90: color-mix(in srgb, var(--secondary-orange), var(--dark) 90%);
211
+
212
+
213
+ /* sky */
214
+ --secondary-sky: #54A0F9;
215
+
216
+ --sky-light-10: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 10%);
217
+ --sky-light-20: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 20%);
218
+ --sky-light-30: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 30%);
219
+ --sky-light-40: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 40%);
220
+ --sky-light-50: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 50%);
221
+ --sky-light-60: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 60%);
222
+ --sky-light-70: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 70%);
223
+ --sky-light-80: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 80%);
224
+ --sky-light-90: color-mix(in srgb, var(--secondary-sky), var(--primary-white) 90%);
225
+
226
+ --sky-dark-10: color-mix(in srgb, var(--secondary-sky), var(--dark) 10%);
227
+ --sky-dark-20: color-mix(in srgb, var(--secondary-sky), var(--dark) 20%);
228
+ --sky-dark-30: color-mix(in srgb, var(--secondary-sky), var(--dark) 30%);
229
+ --sky-dark-40: color-mix(in srgb, var(--secondary-sky), var(--dark) 40%);
230
+ --sky-dark-50: color-mix(in srgb, var(--secondary-sky), var(--dark) 50%);
231
+ --sky-dark-60: color-mix(in srgb, var(--secondary-sky), var(--dark) 60%);
232
+ --sky-dark-70: color-mix(in srgb, var(--secondary-sky), var(--dark) 70%);
233
+ --sky-dark-80: color-mix(in srgb, var(--secondary-sky), var(--dark) 80%);
234
+ --sky-dark-90: color-mix(in srgb, var(--secondary-sky), var(--dark) 90%);
235
+
236
+
237
+ /* olymipic */
238
+ --secondary-olympic: #1661EA;
239
+
240
+ --olympic-light-10: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 10%);
241
+ --olympic-light-20: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 20%);
242
+ --olympic-light-30: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 30%);
243
+ --olympic-light-40: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 40%);
244
+ --olympic-light-50: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 50%);
245
+ --olympic-light-60: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 60%);
246
+ --olympic-light-70: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 70%);
247
+ --olympic-light-80: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 80%);
248
+ --olympic-light-90: color-mix(in srgb, var(--secondary-olympic), var(--primary-white) 90%);
249
+
250
+ --olympic-dark-10: color-mix(in srgb, var(--secondary-olympic), var(--dark) 10%);
251
+ --olympic-dark-20: color-mix(in srgb, var(--secondary-olympic), var(--dark) 20%);
252
+ --olympic-dark-30: color-mix(in srgb, var(--secondary-olympic), var(--dark) 30%);
253
+ --olympic-dark-40: color-mix(in srgb, var(--secondary-olympic), var(--dark) 40%);
254
+ --olympic-dark-50: color-mix(in srgb, var(--secondary-olympic), var(--dark) 50%);
255
+ --olympic-dark-60: color-mix(in srgb, var(--secondary-olympic), var(--dark) 60%);
256
+ --olympic-dark-70: color-mix(in srgb, var(--secondary-olympic), var(--dark) 70%);
257
+ --olympic-dark-80: color-mix(in srgb, var(--secondary-olympic), var(--dark) 80%);
258
+ --olympic-dark-90: color-mix(in srgb, var(--secondary-olympic), var(--dark) 90%);
259
+
260
+
261
+ /* verdant */
262
+ --secondary-verdant: #55CF45;
263
+
264
+ --verdant-light-10: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 10%);
265
+ --verdant-light-20: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 20%);
266
+ --verdant-light-30: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 30%);
267
+ --verdant-light-40: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 40%);
268
+ --verdant-light-50: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 50%);
269
+ --verdant-light-60: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 60%);
270
+ --verdant-light-70: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 70%);
271
+ --verdant-light-80: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 80%);
272
+ --verdant-light-90: color-mix(in srgb, var(--secondary-verdant), var(--primary-white) 90%);
273
+
274
+ --verdant-dark-10: color-mix(in srgb, var(--secondary-verdant), var(--dark) 10%);
275
+ --verdant-dark-20: color-mix(in srgb, var(--secondary-verdant), var(--dark) 20%);
276
+ --verdant-dark-30: color-mix(in srgb, var(--secondary-verdant), var(--dark) 30%);
277
+ --verdant-dark-40: color-mix(in srgb, var(--secondary-verdant), var(--dark) 40%);
278
+ --verdant-dark-50: color-mix(in srgb, var(--secondary-verdant), var(--dark) 50%);
279
+ --verdant-dark-60: color-mix(in srgb, var(--secondary-verdant), var(--dark) 60%);
280
+ --verdant-dark-70: color-mix(in srgb, var(--secondary-verdant), var(--dark) 70%);
281
+ --verdant-dark-80: color-mix(in srgb, var(--secondary-verdant), var(--dark) 80%);
282
+ --verdant-dark-90: color-mix(in srgb, var(--secondary-verdant), var(--dark) 90%);
283
+
284
+
285
+ /* marguerite */
286
+ --secondary-marguerite: #655AAF;
287
+
288
+ --marguerite-light-10: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 10%);
289
+ --marguerite-light-20: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 20%);
290
+ --marguerite-light-30: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 30%);
291
+ --marguerite-light-40: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 40%);
292
+ --marguerite-light-50: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 50%);
293
+ --marguerite-light-60: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 60%);
294
+ --marguerite-light-70: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 70%);
295
+ --marguerite-light-80: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 80%);
296
+ --marguerite-light-90: color-mix(in srgb, var(--secondary-marguerite), var(--primary-white) 90%);
297
+
298
+ --marguerite-dark-10: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 10%);
299
+ --marguerite-dark-20: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 20%);
300
+ --marguerite-dark-30: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 30%);
301
+ --marguerite-dark-40: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 40%);
302
+ --marguerite-dark-50: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 50%);
303
+ --marguerite-dark-60: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 60%);
304
+ --marguerite-dark-70: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 70%);
305
+ --marguerite-dark-80: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 80%);
306
+ --marguerite-dark-90: color-mix(in srgb, var(--secondary-marguerite), var(--dark) 90%);
307
+
308
+
309
+ /* grey */
310
+ --secondary-grey: #DADEEB;
311
+
312
+ --grey-light-10: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 10%);
313
+ --grey-light-20: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 20%);
314
+ --grey-light-30: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 30%);
315
+ --grey-light-40: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 40%);
316
+ --grey-light-50: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 50%);
317
+ --grey-light-60: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 60%);
318
+ --grey-light-70: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 70%);
319
+ --grey-light-80: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 80%);
320
+ --grey-light-90: color-mix(in srgb, var(--secondary-grey), var(--primary-white) 90%);
321
+
322
+ --grey-dark-10: color-mix(in srgb, var(--secondary-grey), var(--dark) 10%);
323
+ --grey-dark-20: color-mix(in srgb, var(--secondary-grey), var(--dark) 20%);
324
+ --grey-dark-30: color-mix(in srgb, var(--secondary-grey), var(--dark) 30%);
325
+ --grey-dark-40: color-mix(in srgb, var(--secondary-grey), var(--dark) 40%);
326
+ --grey-dark-50: color-mix(in srgb, var(--secondary-grey), var(--dark) 50%);
327
+ --grey-dark-60: color-mix(in srgb, var(--secondary-grey), var(--dark) 60%);
328
+ --grey-dark-70: color-mix(in srgb, var(--secondary-grey), var(--dark) 70%);
329
+ --grey-dark-80: color-mix(in srgb, var(--secondary-grey), var(--dark) 80%);
330
+ --grey-dark-90: color-mix(in srgb, var(--secondary-grey), var(--dark) 90%);
331
+
332
+
333
+ }
package/src/style/scrollbar.css ADDED
@@ -0,0 +1,42 @@
1
+ /* Original Scrollbar */
2
+ ::-webkit-scrollbar {
3
+ width: 11px;
4
+ background-color: var(--coolgrey-light-90);
5
+ }
6
+
7
+ ::-webkit-scrollbar-thumb {
8
+ width: 100%;
9
+ background-color: var(--coolgrey-light-70);
10
+ border-radius: 10px;
11
+ border: 2px solid transparent;
12
+ background-clip: content-box;
13
+ }
14
+
15
+ ::-webkit-scrollbar-thumb:hover {
16
+ background-color: var(--secondary-coolgrey);
17
+ border-radius: 10px;
18
+ border: 2px solid transparent;
19
+ background-clip: content-box;
20
+ }
21
+
22
+ /* Hidden Scrollbar */
23
+ .scrollbar-hidden::-webkit-scrollbar {
24
+ width: 7px;
25
+ background-color: transparent;
26
+ }
27
+
28
+ .scrollbar-hidden::-webkit-scrollbar-thumb {
29
+ background-color: transparent;
30
+ }
31
+
32
+ .scrollbar-hidden:hover::-webkit-scrollbar {
33
+ width: 7px;
34
+ background-color: var(--grey-light-80);
35
+ }
36
+
37
+ .scrollbar-hidden:hover::-webkit-scrollbar-thumb {
38
+ background-color: var(--coolgrey-light-30);
39
+ border-radius: 10px;
40
+ border: 2px solid transparent;
41
+ background-clip: content-box;
42
+ }