@heliux-org/ui-style 1.0.65 → 1.0.67

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 (19) hide show
  1. package/dist/colors.json +1 -1
  2. package/dist/index.css +560 -400
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.min.css +1 -1
  5. package/package.json +2 -2
  6. package/src/Themes/basic/_content-colors.scss +40 -40
  7. package/src/Themes/black/_black-theme-content-colors.scss +121 -122
  8. package/src/Themes/dark/_dark-theme-content-colors.scss +121 -122
  9. package/src/Themes/hacker/_hacker-theme-content-colors.scss +121 -122
  10. package/src/config/maps/themes/basic/keys/_keys.scss +45 -1
  11. package/src/config/maps/themes/black/keys/_black-theme-keys.scss +43 -1
  12. package/src/config/maps/themes/dark/keys/_dark-theme-keys.scss +43 -1
  13. package/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss +43 -1
  14. package/src/config/tokens/themes/basic/keys/_keys.scss +42 -0
  15. package/src/config/tokens/themes/basic/palette/_palette.scss +1 -1
  16. package/src/config/tokens/themes/black/keys/_black-theme-keys.scss +43 -0
  17. package/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss +44 -0
  18. package/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss +44 -0
  19. package/src/files/colors.json +1 -1
package/src/Themes/dark/_dark-theme-content-colors.scss CHANGED
@@ -1,240 +1,239 @@
1
1
  @mixin define-dark-theme-content-colors() {
2
2
  // Green
3
- --color-green-dark: var(--color-green-900);
4
- --color-green-dark-hover: var(--color-green-900);
5
- --color-green-dark-selected: var(--color-green-700);
3
+ --color-green-dark: var(--color-green-200);
4
+ --color-green-dark-hover: var(--color-green-300);
5
+ --color-green-dark-selected: var(--color-green-300);
6
6
 
7
7
  // Green
8
- --color-green-med: var(--color-green-700);
9
- --color-green-med-hover: var(--color-green-800);
8
+ --color-green-med: var(--color-green-500);
9
+ --color-green-med-hover: var(--color-green-600);
10
10
  --color-green-med-selected: var(--color-green-600);
11
11
  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
12
12
 
13
13
  // Green
14
- --color-green-light: var(--color-green-600);
15
- --color-green-light-hover: var(--color-green-700);
16
- --color-green-light-selected: var(--color-green-600);
14
+ --color-green-light: var(--color-green-700);
15
+ --color-green-light-hover: var(--color-green-800);
16
+ --color-green-light-selected: var(--color-green-800);
17
17
 
18
18
  // Yellow
19
- --color-yellow-dark: var(--color-yellow-900);
20
- --color-yellow-dark-hover: var(--color-yellow-900);
21
- --color-yellow-dark-selected: var(--color-yellow-700);
19
+ --color-yellow-dark: var(--color-yellow-200);
20
+ --color-yellow-dark-hover: var(--color-yellow-300);
21
+ --color-yellow-dark-selected: var(--color-yellow-300);
22
22
  --color-yellow-dark-rgb: 255, 213, 51;
23
23
 
24
24
  // Yellow
25
- --color-yellow-med: var(--color-yellow-700);
26
- --color-yellow-med-hover: var(--color-yellow-800);
25
+ --color-yellow-med: var(--color-yellow-500);
26
+ --color-yellow-med-hover: var(--color-yellow-600);
27
27
  --color-yellow-med-selected: var(--color-yellow-600);
28
28
 
29
29
  // Yellow
30
- --color-yellow-light: var(--color-yellow-600);
31
- --color-yellow-light-hover: var(--color-yellow-700);
32
- --color-yellow-light-selected: var(--color-yellow-600);
30
+ --color-yellow-light: var(--color-yellow-700);
31
+ --color-yellow-light-hover: var(--color-yellow-800);
32
+ --color-yellow-light-selected: var(--color-yellow-800);
33
33
 
34
34
  // Red
35
- --color-red-dark: var(--color-red-900);
36
- --color-red-dark-hover: var(--color-red-900);
37
- --color-red-dark-selected: var(--color-red-700);
35
+ --color-red-dark: var(--color-red-200);
36
+ --color-red-dark-hover: var(--color-red-300);
37
+ --color-red-dark-selected: var(--color-red-300);
38
38
 
39
39
  // Red
40
- --color-red-med: var(--color-red-700);
41
- --color-red-med-hover: var(--color-red-800);
40
+ --color-red-med: var(--color-red-500);
41
+ --color-red-med-hover: var(--color-red-600);
42
42
  --color-red-med-selected: var(--color-red-600);
43
43
  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
44
44
 
45
45
  // Red
46
- --color-red-light: var(--color-red-600);
47
- --color-red-light-hover: var(--color-red-700);
48
- --color-red-light-selected: var(--color-red-600);
46
+ --color-red-light: var(--color-red-700);
47
+ --color-red-light-hover: var(--color-red-800);
48
+ --color-red-light-selected: var(--color-red-800);
49
49
 
50
50
  // Solar Flare
51
- --color-solar-flare-dark: var(--color-solar-flare-900);
52
- --color-solar-flare-dark-hover: var(--color-solar-flare-900);
53
- --color-solar-flare-dark-selected: var(--color-solar-flare-700);
51
+ --color-solar-flare-dark: var(--color-solar-flare-200);
52
+ --color-solar-flare-dark-hover: var(--color-solar-flare-300);
53
+ --color-solar-flare-dark-selected: var(--color-solar-flare-300);
54
54
 
55
55
  // Solar Flare
56
- --color-solar-flare-med: var(--color-solar-flare-700);
57
- --color-solar-flare-med-hover: var(--color-solar-flare-800);
56
+ --color-solar-flare-med: var(--color-solar-flare-500);
57
+ --color-solar-flare-med-hover: var(--color-solar-flare-600);
58
58
  --color-solar-flare-med-selected: var(--color-solar-flare-600);
59
59
 
60
60
  // Solar Flare
61
- --color-solar-flare-light: var(--color-solar-flare-600);
62
- --color-solar-flare-light-hover: var(--color-solar-flare-700);
63
- --color-solar-flare-light-selected: var(--color-solar-flare-600);
61
+ --color-solar-flare-light: var(--color-solar-flare-700);
62
+ --color-solar-flare-light-hover: var(--color-solar-flare-800);
63
+ --color-solar-flare-light-selected: var(--color-solar-flare-800);
64
64
 
65
65
  // Purple
66
- --color-purple-dark: var(--color-purple-900);
67
- --color-purple-dark-hover: var(--color-purple-900);
68
- --color-purple-dark-selected: var(--color-purple-700);
66
+ --color-purple-dark: var(--color-purple-200);
67
+ --color-purple-dark-hover: var(--color-purple-300);
68
+ --color-purple-dark-selected: var(--color-purple-300);
69
69
 
70
70
  // Purple
71
- --color-purple-med: var(--color-purple-700);
72
- --color-purple-med-hover: var(--color-purple-800);
71
+ --color-purple-med: var(--color-purple-500);
72
+ --color-purple-med-hover: var(--color-purple-600);
73
73
  --color-purple-med-selected: var(--color-purple-600);
74
74
 
75
75
  // Purple
76
- --color-purple-light: var(--color-purple-600);
77
- --color-purple-light-hover: var(--color-purple-700);
78
- --color-purple-light-selected: var(--color-purple-600);
76
+ --color-purple-light: var(--color-purple-700);
77
+ --color-purple-light-hover: var(--color-purple-800);
78
+ --color-purple-light-selected: var(--color-purple-800);
79
79
 
80
80
  // Pink
81
- --color-pink-dark: var(--color-pink-900);
82
- --color-pink-dark-hover: var(--color-pink-900);
83
- --color-pink-dark-selected: var(--color-pink-700);
81
+ --color-pink-dark: var(--color-pink-200);
82
+ --color-pink-dark-hover: var(--color-pink-300);
83
+ --color-pink-dark-selected: var(--color-pink-300);
84
84
 
85
85
  // Pink
86
- --color-pink-med: var(--color-pink-700);
87
- --color-pink-med-hover: var(--color-pink-800);
86
+ --color-pink-med: var(--color-pink-500);
87
+ --color-pink-med-hover: var(--color-pink-600);
88
88
  --color-pink-med-selected: var(--color-pink-600);
89
89
 
90
90
  // Pink
91
- --color-pink-light: var(--color-pink-600);
92
- --color-pink-light-hover: var(--color-pink-700);
93
- --color-pink-light-selected: var(--color-pink-600);
91
+ --color-pink-light: var(--color-pink-700);
92
+ --color-pink-light-hover: var(--color-pink-800);
93
+ --color-pink-light-selected: var(--color-pink-800);
94
94
 
95
95
  // Steel
96
- --color-steel-dark: var(--color-steel-900);
97
- --color-steel-dark-hover: var(--color-steel-900);
98
- --color-steel-dark-selected: var(--color-steel-700);
96
+ --color-steel-dark: var(--color-steel-200);
97
+ --color-steel-dark-hover: var(--color-steel-300);
98
+ --color-steel-dark-selected: var(--color-steel-300);
99
99
 
100
100
  // Steel
101
- --color-steel-med: var(--color-steel-700);
102
- --color-steel-med-hover: var(--color-steel-800);
101
+ --color-steel-med: var(--color-steel-500);
102
+ --color-steel-med-hover: var(--color-steel-600);
103
103
  --color-steel-med-selected: var(--color-steel-600);
104
104
 
105
105
  // Steel
106
- --color-steel-light: var(--color-steel-600);
107
- --color-steel-light-hover: var(--color-steel-700);
108
- --color-steel-light-selected: var(--color-steel-600);
106
+ --color-steel-light: var(--color-steel-700);
107
+ --color-steel-light-hover: var(--color-steel-800);
108
+ --color-steel-light-selected: var(--color-steel-800);
109
109
 
110
110
  // Aquamarine
111
- --color-teal-dark: var(--color-teal-900);
112
- --color-teal-dark-hover: var(--color-teal-900);
113
- --color-teal-dark-selected: var(--color-teal-700);
111
+ --color-teal-dark: var(--color-teal-200);
112
+ --color-teal-dark-hover: var(--color-teal-300);
113
+ --color-teal-dark-selected: var(--color-teal-300);
114
114
 
115
115
  // Chili Blue
116
- --color-teal-med: var(--color-teal-700);
117
- --color-teal-med-hover: var(--color-teal-800);
116
+ --color-teal-med: var(--color-teal-500);
117
+ --color-teal-med-hover: var(--color-teal-600);
118
118
  --color-teal-med-selected: var(--color-teal-600);
119
119
 
120
120
  // River
121
- --color-teal-light: var(--color-teal-600);
122
- --color-teal-light-hover: var(--color-teal-700);
123
- --color-teal-light-selected: var(--color-teal-600);
121
+ --color-teal-light: var(--color-teal-700);
122
+ --color-teal-light-hover: var(--color-teal-800);
123
+ --color-teal-light-selected: var(--color-teal-800);
124
124
 
125
125
  // Lime
126
- --color-lime-dark: var(--color-lime-900);
127
- --color-lime-dark-hover: var(--color-lime-900);
128
- --color-lime-dark-selected: var(--color-lime-700);
126
+ --color-lime-dark: var(--color-lime-200);
127
+ --color-lime-dark-hover: var(--color-lime-300);
128
+ --color-lime-dark-selected: var(--color-lime-300);
129
129
 
130
130
  // Lime
131
- --color-lime-med: var(--color-lime-700);
132
- --color-lime-med-hover: var(--color-lime-800);
131
+ --color-lime-med: var(--color-lime-500);
132
+ --color-lime-med-hover: var(--color-lime-600);
133
133
  --color-lime-med-selected: var(--color-lime-600);
134
134
 
135
135
  // Lime
136
- --color-lime-light: var(--color-lime-600);
137
- --color-lime-light-hover: var(--color-lime-700);
138
- --color-lime-light-selected: var(--color-lime-600);
136
+ --color-lime-light: var(--color-lime-700);
137
+ --color-lime-light-hover: var(--color-lime-800);
138
+ --color-lime-light-selected: var(--color-lime-800);
139
139
 
140
140
  // Blackish
141
- --color-orange-dark: var(--color-orange-900);
142
- --color-orange-dark-hover: var(--color-orange-900);
143
- --color-orange-dark-selected: var(--color-orange-700);
141
+ --color-orange-dark: var(--color-orange-200);
142
+ --color-orange-dark-hover: var(--color-orange-300);
143
+ --color-orange-dark-selected: var(--color-orange-300);
144
144
 
145
145
  // Brown
146
- --color-orange-med: var(--color-orange-700);
147
- --color-orange-med-hover: var(--color-orange-800);
146
+ --color-orange-med: var(--color-orange-500);
147
+ --color-orange-med-hover: var(--color-orange-600);
148
148
  --color-orange-med-selected: var(--color-orange-600);
149
149
 
150
150
  // Orchid
151
- --color-orange-light: var(--color-orange-600);
152
- --color-orange-light-hover: var(--color-orange-700);
153
- --color-orange-light-selected: var(--color-orange-600);
151
+ --color-orange-light: var(--color-orange-700);
152
+ --color-orange-light-hover: var(--color-orange-800);
153
+ --color-orange-light-selected: var(--color-orange-800);
154
154
 
155
155
  // Gray
156
- --color-gray-dark: var(--color-gray-900);
157
- --color-gray-dark-hover: var(--color-gray-900);
158
- --color-gray-dark-selected: var(--color-gray-700);
156
+ --color-gray-dark: var(--color-gray-200);
157
+ --color-gray-dark-hover: var(--color-gray-300);
158
+ --color-gray-dark-selected: var(--color-gray-300);
159
159
 
160
160
  // Gray
161
- --color-gray-med: var(--color-gray-700);
162
- --color-gray-med-hover: var(--color-gray-800);
161
+ --color-gray-med: var(--color-gray-500);
162
+ --color-gray-med-hover: var(--color-gray-600);
163
163
  --color-gray-med-selected: var(--color-gray-600);
164
164
 
165
165
  // Gray
166
- --color-gray-light: var(--color-gray-600);
167
- --color-gray-light-hover: var(--color-gray-700);
168
- --color-gray-light-selected: var(--color-gray-600);
166
+ --color-gray-light: var(--color-gray-700);
167
+ --color-gray-light-hover: var(--color-gray-800);
168
+ --color-gray-light-selected: var(--color-gray-800);
169
169
 
170
170
  // obsidian
171
- --color-obsidian-dark: var(--color-obsidian-900);
172
- --color-obsidian-dark-hover: var(--color-obsidian-900);
173
- --color-obsidian-dark-selected: var(--color-obsidian-700);
171
+ --color-obsidian-dark: var(--color-obsidian-200);
172
+ --color-obsidian-dark-hover: var(--color-obsidian-300);
173
+ --color-obsidian-dark-selected: var(--color-obsidian-300);
174
174
 
175
175
  // obsidian
176
- --color-obsidian-med: var(--color-obsidian-700);
177
- --color-obsidian-med-hover: var(--color-obsidian-800);
176
+ --color-obsidian-med: var(--color-obsidian-500);
177
+ --color-obsidian-med-hover: var(--color-obsidian-600);
178
178
  --color-obsidian-med-selected: var(--color-obsidian-600);
179
179
 
180
180
  // obsidian
181
- --color-obsidian-light: var(--color-obsidian-600);
182
- --color-obsidian-light-hover: var(--color-obsidian-700);
183
- --color-obsidian-light-selected: var(--color-obsidian-600);
181
+ --color-obsidian-light: var(--color-obsidian-700);
182
+ --color-obsidian-light-hover: var(--color-obsidian-800);
183
+ --color-obsidian-light-selected: var(--color-obsidian-800);
184
184
 
185
185
  // Sand
186
- --color-sand-dark: var(--color-sand-900);
187
- --color-sand-dark-hover: var(--color-sand-900);
188
- --color-sand-dark-selected: var(--color-sand-700);
186
+ --color-sand-dark: var(--color-sand-200);
187
+ --color-sand-dark-hover: var(--color-sand-300);
188
+ --color-sand-dark-selected: var(--color-sand-300);
189
189
 
190
190
  // Sand
191
- --color-sand-med: var(--color-sand-700);
192
- --color-sand-med-hover: var(--color-sand-800);
191
+ --color-sand-med: var(--color-sand-500);
192
+ --color-sand-med-hover: var(--color-sand-600);
193
193
  --color-sand-med-selected: var(--color-sand-600);
194
194
 
195
195
  // Sand
196
- --color-sand-light: var(--color-sand-600);
197
- --color-sand-light-hover: var(--color-sand-700);
198
- --color-sand-light-selected: var(--color-sand-600);
199
-
196
+ --color-sand-light: var(--color-sand-700);
197
+ --color-sand-light-hover: var(--color-sand-800);
198
+ --color-sand-light-selected: var(--color-sand-800);
200
199
 
201
200
  // obsidian
202
- --color-sky: var(--color-steel-700);
203
- --color-sky-hover: var(--color-red-900);
201
+ --color-sky: var(--color-steel-500);
202
+ --color-sky-hover: var(--color-red-300);
204
203
  --color-sky-selected: var(--color-red-600);
205
204
 
206
205
  // Coffee
207
- --color-coffee: var(--color-red-700);
208
- --color-coffee-hover: var(--color-red-800);
206
+ --color-coffee: var(--color-red-500);
207
+ --color-coffee-hover: var(--color-red-600);
209
208
  --color-coffee-selected: var(--color-red-600);
210
209
 
211
210
  // Royal
212
- --color-royal: var(--color-teal-600);
213
- --color-royal-hover: var(--color-red-800);
211
+ --color-royal: var(--color-teal-700);
212
+ --color-royal-hover: var(--color-red-600);
214
213
  --color-royal-selected: var(--color-red-600);
215
214
 
216
215
  // Teal
217
- --color-teal: var(--color-red-700);
218
- --color-teal-hover: var(--color-red-800);
216
+ --color-teal: var(--color-red-500);
217
+ --color-teal-hover: var(--color-red-600);
219
218
  --color-teal-selected: var(--color-red-600);
220
219
 
221
220
  // Lavender
222
- --color-lavender: var(--color-red-700);
223
- --color-lavender-hover: var(--color-red-800);
221
+ --color-lavender: var(--color-red-500);
222
+ --color-lavender-hover: var(--color-red-600);
224
223
  --color-lavender-selected: var(--color-red-600);
225
224
 
226
225
  // Steel
227
- --color-steel: var(--color-red-600);
228
- --color-steel-hover: var(--color-red-800);
226
+ --color-steel: var(--color-red-700);
227
+ --color-steel-hover: var(--color-red-600);
229
228
  --color-steel-selected: var(--color-red-600);
230
229
 
231
230
  // Lilac
232
- --color-lilac: var(--color-red-700);
233
- --color-lilac-hover: var(--color-red-800);
231
+ --color-lilac: var(--color-red-500);
232
+ --color-lilac-hover: var(--color-red-600);
234
233
  --color-lilac-selected: var(--color-red-600);
235
234
 
236
235
  // Pecan
237
- --color-pecan: var(--color-red-700);
238
- --color-pecan-hover: var(--color-red-800);
236
+ --color-pecan: var(--color-red-500);
237
+ --color-pecan-hover: var(--color-red-600);
239
238
  --color-pecan-selected: var(--color-red-600);
240
- }
239
+ }