@moises.ai/design-system 2.0.11 → 2.0.12

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.
@@ -6,10 +6,10 @@
6
6
  --aqua-4: #c5f3f7;
7
7
  --aqua-5: #adf0f5;
8
8
  --aqua-6: #95edf3;
9
- --aqua-7: #7deaf1;
10
- --aqua-8: #65e7ef;
11
- --aqua-9: #00d0de;
12
- --aqua-10: #00c4d2;
9
+ --aqua-7: #009AA5;
10
+ --aqua-8: #00BAC6;
11
+ --aqua-9: #00DAE8;
12
+ --aqua-10: #19E4F1;
13
13
  --aqua-11: #00a9b6;
14
14
  --aqua-12: #004348;
15
15
  --aqua-alpha-1: rgba(0, 219, 219, 0.03);
@@ -100,25 +100,39 @@
100
100
  --mint-dark-alpha-11: rgba(120, 255, 190, 1);
101
101
  --mint-dark-alpha-12: rgba(166, 254, 205, 1);
102
102
 
103
- --neutral-1: #fff;
104
- --neutral-2: #474747;
105
- --neutral-3: #E8EAEC;
106
- --neutral-4: #43484E;
107
- --neutral-5: #18191B;
108
- --neutral-6: rgba(216, 244, 246, 0.04);
103
+
104
+ --panel-solid: #18191B;
105
+
106
+ --white: rgba(255, 255, 255, 1);
107
+ --black: rgba(28, 32, 36, 1);
108
+
109
+ /* Neutral */
110
+
111
+ --neutral-1: rgba(17, 17, 19, 1);
112
+ --neutral-2: rgba(24, 25, 27, 1);
113
+ --neutral-3: rgba(33, 34, 37, 1);
114
+ --neutral-4: rgba(39, 42, 45, 1);
115
+ --neutral-5: rgba(46, 49, 53, 1);
116
+ --neutral-6: rgba(54, 58, 63, 1);
117
+ --neutral-7: rgba(67, 72, 78, 1);
118
+ --neutral-8: rgba(90, 97, 105, 1);
119
+ --neutral-9: rgba(105, 110, 119, 1);
109
120
  --neutral-10: rgba(119, 123, 132, 1);
110
121
  --neutral-11: rgba(176, 180, 186, 1);
111
- --neutral-12: rgba(237, 238, 240, 1);
122
+ --neutral-12:rgba(237, 238, 240, 1);
112
123
 
113
- --neutral-alpha-1: rgba(255, 255, 255, 0.00);
124
+ --neutral-alpha-1: rgba(0, 0, 0, 0);
125
+ --neutral-alpha-2: rgba(216, 244, 246, 0.04);
114
126
  --neutral-alpha-3: rgba(221, 234, 248, 0.08);
127
+ --neutral-alpha-4: rgba(211, 237, 248, 0.11);
115
128
  --neutral-alpha-5: rgba(217, 237, 254, 0.15);
129
+ --neutral-alpha-6: rgba(214, 235, 253, 0.19);
130
+ --neutral-alpha-7: rgba(217, 237, 255, 0.25);
131
+ --neutral-alpha-8: rgba(217, 237, 255, 0.36);
116
132
  --neutral-alpha-9: rgba(223, 235, 253, 0.43);
117
133
  --neutral-alpha-10: rgba(229, 237, 253, 0.48);
118
- --neutral-alpha-11: rgba(176, 180, 186, 1);
119
-
120
- /* Panel */
121
- --panel-solid: #18191B;
134
+ --neutral-alpha-11: rgba(241, 247, 254, 0.71);
135
+ --neutral-alpha-12: rgba(252, 253, 255, 0.94);
122
136
 
123
137
  .radix-themes {
124
138
  --cursor-button: pointer;
@@ -130,6 +144,10 @@
130
144
  --cursor-slider-thumb: grab;
131
145
  --cursor-slider-thumb-active: grabbing;
132
146
  --cursor-switch: pointer;
147
+
148
+ /* custom cyan color*/
149
+
150
+ --cyan-track : var(--aqua-dark-9);
133
151
 
134
152
  /* custom mint color*/
135
153
  --mint-1 : var(--mint-1);
@@ -183,78 +201,63 @@
183
201
  --mint-d-a10: var(--mint-dark-alpha-10);
184
202
  --mint-d-a11: var(--mint-dark-alpha-11);
185
203
  --mint-d-a12: var(--mint-dark-alpha-12);
186
- }
187
- [data-accent-color='mint']:where(.rt-variant-ghost) {
188
- background-color: transparent;
189
- color: rgba(10, 255, 167, 1) !important;
190
- }
191
-
192
- [data-accent-color='mint']:where(.rt-variant-ghost):hover:not([data-disabled]) {
193
- background-color: transparent;
194
- color: rgba(166, 254, 205, 1) !important;
195
- }
196
204
 
197
- [data-accent-color='mint']:where(.rt-variant-ghost):where([data-disabled]){
198
- color: rgba(10, 255, 167, 0.5) !important;
199
- }
200
-
201
- [data-accent-color='red']:where(.rt-variant-ghost) {
202
- background-color: transparent;
203
- color: rgba(255, 149, 146, 1) !important;
204
- }
205
205
 
206
- [data-accent-color='red']:where(.rt-variant-ghost):where([data-disabled]){
207
- color: rgba(255, 100, 101, 0.92) !important;
208
- }
209
-
210
- [data-accent-color='red']:where(.rt-variant-ghost):hover:not([data-disabled]) {
211
- background-color: transparent;
212
- color: rgba(255, 209, 217, 1) !important;
213
- }
206
+ /* Custom Aqua */
214
207
 
215
- [data-accent-color='gray']:where(.rt-variant-ghost) {
216
- background-color: transparent;
217
- color: rgba(176, 180, 186, 1) !important;
218
- }
208
+ --accent-1: var(--aqua-1);
209
+ --accent-2: var(--aqua-2);
210
+ --accent-3: var(--aqua-3);
211
+ --accent-4: var(--aqua-4);
212
+ --accent-5: var(--aqua-5);
213
+ --accent-6: var(--aqua-6);
214
+ --accent-7: var(--aqua-7);
215
+ --accent-8: var(--aqua-8);
216
+ --accent-9: var(--aqua-9);
217
+ --accent-10: var(--aqua-10);
218
+ --accent-11: var(--aqua-11);
219
+ --accent-12: var(--aqua-12);
219
220
 
220
- [data-accent-color='gray']:where(.rt-variant-ghost):where([data-disabled]){
221
- color: rgba(119, 123, 132, 1) !important;
222
- }
221
+ --accent-a1: var(--aqua-alpha-1);
222
+ --accent-a2: var(--aqua-alpha-2);
223
+ --accent-a3: var(--aqua-alpha-3);
224
+ --accent-a4: var(--aqua-alpha-4);
225
+ --accent-a5: var(--aqua-alpha-5);
226
+ --accent-a6: var(--aqua-alpha-6);
227
+ --accent-a7: var(--aqua-alpha-7);
228
+ --accent-a8: var(--aqua-alpha-8);
229
+ --accent-a9: var(--aqua-alpha-9);
230
+ --accent-a10: var(--aqua-alpha-10);
231
+ --accent-a11: var(--aqua-alpha-11);
232
+ --accent-a12: var(--aqua-alpha-12);
223
233
 
224
- [data-accent-color='gray']:where(.rt-variant-ghost):hover:not([data-disabled]) {
225
- background-color: transparent;
226
- color: rgba(237, 238, 240, 1) !important;
227
- }
234
+ --accent-d1: var(--aqua-dark-1);
235
+ --accent-d2: var(--aqua-dark-2);
236
+ --accent-d3: var(--aqua-dark-3);
237
+ --accent-d4: var(--aqua-dark-4);
238
+ --accent-d5: var(--aqua-dark-5);
239
+ --accent-d6: var(--aqua-dark-6);
240
+ --accent-d7: var(--aqua-dark-7);
241
+ --accent-d8: var(--aqua-dark-8);
242
+ --accent-d9: var(--aqua-dark-9);
243
+ --accent-d10: var(--aqua-dark-10);
244
+ --accent-d11: var(--aqua-dark-11);
245
+ --accent-d12: var(--aqua-dark-12);
228
246
 
229
- /* size 1 → 24×24px */
230
- .rt-IconButton.rt-variant-ghost.rt-r-size-1 {
231
- margin: 0 !important;
232
- width: 24px !important;
233
- height: 24px !important;
234
- padding: 0 !important;
235
- }
247
+ --accent-d-a1: var(--aqua-dark-alpha-1);
248
+ --accent-d-a2: var(--aqua-dark-alpha-2);
249
+ --accent-d-a3: var(--aqua-dark-alpha-3);
250
+ --accent-d-a4: var(--aqua-dark-alpha-4);
251
+ --accent-d-a5: var(--aqua-dark-alpha-5);
252
+ --accent-d-a6: var(--aqua-dark-alpha-6);
253
+ --accent-d-a7: var(--aqua-dark-alpha-7);
254
+ --accent-d-a8: var(--aqua-dark-alpha-8);
255
+ --accent-d-a9: var(--aqua-dark-alpha-9);
256
+ --accent-d-a10: var(--aqua-dark-alpha-10);
257
+ --accent-d-a11: var(--aqua-dark-alpha-11);
258
+ --accent-d-a12: var(--aqua-dark-alpha-12);
236
259
 
237
- /* size 2 → 32×32px */
238
- .rt-IconButton.rt-variant-ghost.rt-r-size-2 {
239
- margin: 0 !important;
240
- width: 32px !important;
241
- height: 32px !important;
242
- padding: 0 !important;
243
- }
244
260
 
245
- /* size 3 → 40×40px */
246
- .rt-IconButton.rt-variant-ghost.rt-r-size-3 {
247
- margin: 0 !important;
248
- width: 40px !important;
249
- height: 40px !important;
250
- padding: 0 !important;
251
261
  }
252
262
 
253
- /* size 4 → 48×48px */
254
- .rt-IconButton.rt-variant-ghost.rt-r-size-4 {
255
- margin: 0 !important;
256
- width: 48px !important;
257
- height: 48px !important;
258
- padding: 0 !important;
259
- }
260
263
  }