@rovula/ui 0.0.80 → 0.0.81

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.
@@ -1114,248 +1114,1324 @@
1114
1114
  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
1115
1115
  --switch-thumb-disabled-color: var(--state-color-disable-solid)
1116
1116
  ;
1117
- }
1118
-
1119
- :root[data-theme="xspector"]{
1120
- --primary-ramps-primary-5: #fdfcf2;
1121
- --primary-ramps-primary-10: #fcfae5;
1122
- --primary-ramps-primary-20: #f8f5cc;
1123
- --primary-ramps-primary-30: #f5f0b2;
1124
- --primary-ramps-primary-40: #f1eb99;
1125
- --primary-ramps-primary-50: #eee680;
1126
- --primary-ramps-primary-60: #ebe166;
1127
- --primary-ramps-primary-70: #e7dc4d;
1128
- --primary-ramps-primary-80: #e4d733;
1129
- --primary-ramps-primary-90: #e0d21a;
1130
- --primary-ramps-primary-100: #ddcd00;
1131
- --primary-ramps-primary-110: #c7b800;
1132
- --primary-ramps-primary-120: #b1a400;
1133
- --primary-ramps-primary-130: #9b8f00;
1134
- --primary-ramps-primary-140: #857b00;
1135
- --primary-ramps-primary-150: #6f6700;
1136
- --secondary-ramps-secondary-5: #fafafa;
1137
- --secondary-ramps-secondary-10: #f5f5f5;
1138
- --secondary-ramps-secondary-20: #ececec;
1139
- --secondary-ramps-secondary-30: #e2e2e2;
1140
- --secondary-ramps-secondary-40: #d8d8d8;
1141
- --secondary-ramps-secondary-50: #cfcfcf;
1142
- --secondary-ramps-secondary-60: #c5c5c5;
1143
- --secondary-ramps-secondary-70: #bbbbbb;
1144
- --secondary-ramps-secondary-80: #b1b1b1;
1145
- --secondary-ramps-secondary-90: #a8a8a8;
1146
- --secondary-ramps-secondary-100: #9e9e9e;
1147
- --secondary-ramps-secondary-110: #8e8e8e;
1148
- --secondary-ramps-secondary-120: #7e7e7e;
1149
- --secondary-ramps-secondary-130: #6f6f6f;
1150
- --secondary-ramps-secondary-140: #5f5f5f;
1151
- --secondary-ramps-secondary-150: #4f4f4f;
1152
- --tertiary-ramps-tertiary-5: #fbfcfd;
1153
- --tertiary-ramps-tertiary-10: #f7fafb;
1154
- --tertiary-ramps-tertiary-20: #eff4f7;
1155
- --tertiary-ramps-tertiary-30: #e6eff3;
1156
- --tertiary-ramps-tertiary-40: #deeaef;
1157
- --tertiary-ramps-tertiary-50: #d6e5eb;
1158
- --tertiary-ramps-tertiary-60: #cedfe6;
1159
- --tertiary-ramps-tertiary-70: #c6dae2;
1160
- --tertiary-ramps-tertiary-80: #bdd5de;
1161
- --tertiary-ramps-tertiary-90: #b5cfda;
1162
- --tertiary-ramps-tertiary-100: #adcad6;
1163
- --tertiary-ramps-tertiary-110: #9cb6c1;
1164
- --tertiary-ramps-tertiary-120: #8aa2ab;
1165
- --tertiary-ramps-tertiary-130: #798d96;
1166
- --tertiary-ramps-tertiary-140: #687980;
1167
- --tertiary-ramps-tertiary-150: #57656b;
1168
- --grey-grey-5: #fafafa;
1169
- --grey-grey-10: #f5f5f5;
1170
- --grey-grey-20: #ececec;
1171
- --grey-grey-30: #e2e2e2;
1172
- --grey-grey-40: #d8d8d8;
1173
- --grey-grey-50: #cfcfcf;
1174
- --grey-grey-60: #c5c5c5;
1175
- --grey-grey-70: #bbbbbb;
1176
- --grey-grey-80: #b1b1b1;
1177
- --grey-grey-90: #a8a8a8;
1178
- --grey-grey-100: #9e9e9e;
1179
- --grey-grey-110: #8e8e8e;
1180
- --grey-grey-120: #7e7e7e;
1181
- --grey-grey-130: #6f6f6f;
1182
- --grey-grey-140: #5f5f5f;
1183
- --grey-grey-150: #4f4f4f;
1184
- --grey2-grey2-50: #f8fafa;
1185
- --grey2-grey2-100: #f2f5f5;
1186
- --grey2-grey2-200: #e7ebed;
1187
- --grey2-grey2-300: #d3dadf;
1188
- --grey2-grey2-400: #bac5cb;
1189
- --grey2-grey2-500: #9dabb5;
1190
- --grey2-grey2-600: #919eab;
1191
- --grey2-grey2-700: #72808f;
1192
- --grey2-grey2-800: #606b77;
1193
- --grey2-grey2-900: #4f5863;
1194
- --grey2-grey2-950: #343b41;
1195
- --info-info-50: #eef8ff;
1196
- --info-info-100: #d9efff;
1197
- --info-info-200: #bce4ff;
1198
- --info-info-300: #8ed5ff;
1199
- --info-info-400: #59bbff;
1200
- --info-info-500: #2998ff;
1201
- --info-info-600: #1b7df5;
1202
- --info-info-700: #1466e1;
1203
- --info-info-800: #1752b6;
1204
- --info-info-900: #19478f;
1205
- --info-info-950: #142c57;
1206
- --success-success-50: #effce9;
1207
- --success-success-100: #daf9ce;
1208
- --success-success-200: #b8f3a3;
1209
- --success-success-300: #8ce86e;
1210
- --success-success-400: #54d62c;
1211
- --success-success-500: #44c022;
1212
- --success-success-600: #319917;
1213
- --success-success-700: #277516;
1214
- --success-success-800: #235d17;
1215
- --success-success-900: #214f18;
1216
- --success-success-950: #0c2b08;
1217
- --warning-warning-50: #ffffea;
1218
- --warning-warning-100: #fffbc5;
1219
- --warning-warning-200: #fff885;
1220
- --warning-warning-300: #ffee46;
1221
- --warning-warning-400: #ffdf1b;
1222
- --warning-warning-500: #ffc107;
1223
- --warning-warning-600: #e29400;
1224
- --warning-warning-700: #bb6902;
1225
- --warning-warning-800: #985108;
1226
- --warning-warning-900: #7c420b;
1227
- --warning-warning-950: #482200;
1228
- --error-error-50: #fff3f1;
1229
- --error-error-100: #ffe3df;
1230
- --error-error-200: #ffccc5;
1231
- --error-error-300: #ffa99d;
1232
- --error-error-400: #ff7664;
1233
- --error-error-500: #ff4d35;
1234
- --error-error-600: #ed2f15;
1235
- --error-error-700: #c8230d;
1236
- --error-error-800: #a5210f;
1237
- --error-error-900: #882214;
1238
- --error-error-950: #4b0c04;
1117
+ /* COLOR PROJECT */
1118
+ --main-primary-xspector: #ddcd00;
1119
+ --main-primary-report-xspector-light-mode: #1e3249;
1120
+ --main-primary-skyller: #2563eb;
1121
+ --main-secondary-xspector: #9e9e9e;
1122
+ --main-secondary-report-xspector-light-mode: #ddcd00;
1123
+ --main-secondary-skyller: #60a5fa;
1124
+ --main-tertiary-xspector: #adcad6;
1125
+ --main-tertiary-report-xspector-light-mode: #9e9e9e;
1126
+ --main-tertiary-skyller: #0891b2;
1127
+ --brand-midnight-blue-xspector: #002038;
1128
+ --brand-midnight-blue-report-xspector-light-mode: #002038;
1129
+ --brand-midnight-blue-skyller: #2563eb;
1130
+ --brand-columbia-blue-xspector: #adcad6;
1131
+ --brand-columbia-blue-report-xspector-light-mode: #adcad6;
1132
+ --brand-columbia-blue-skyller: #0891b2;
1133
+ --brand-backgroud-xspector: #1e3249;
1134
+ --brand-backgroud-report-xspector-light-mode: #1e3249;
1135
+ --brand-backgroud-skyller: #60a5fa;
1136
+ --brand-lemon-glacier-xspector: #f5ff00;
1137
+ --brand-lemon-glacier-report-xspector-light-mode: #f5ff00;
1138
+ --brand-lemon-glacier-skyller: #fde68a;
1139
+ --text-black-xspector: #000000;
1140
+ --text-black-report-xspector-light-mode: #000000;
1141
+ --text-black-skyller: #000000;
1142
+ --text-dark-xspector: #212b36;
1143
+ --text-dark-report-xspector-light-mode: #18283a;
1144
+ --text-dark-skyller: #a3a3a3;
1145
+ --text-medium-xspector: #637381;
1146
+ --text-medium-report-xspector-light-mode: #4b5b6d;
1147
+ --text-medium-skyller: #737373;
1148
+ --text-light-xspector: #919eab;
1149
+ --text-light-report-xspector-light-mode: #8e98a4;
1150
+ --text-light-skyller: #171717;
1151
+ --text-grey-dark-xspector: #7e7e7e;
1152
+ --text-grey-dark-report-xspector-light-mode: #4f4f4f;
1153
+ --text-grey-dark-skyller: #a3a3a3;
1154
+ --text-grey-medium-xspector: #aaaaaa;
1155
+ --text-grey-medium-report-xspector-light-mode: #7e7e7e;
1156
+ --text-grey-medium-skyller: #737373;
1157
+ --text-grey-light-xspector: #dfe3e8;
1158
+ --text-grey-light-report-xspector-light-mode: #9e9e9e;
1159
+ --text-grey-light-skyller: #171717;
1160
+ --text-white-xspector: #ffffff;
1161
+ --text-white-report-xspector-light-mode: #7e7e7e;
1162
+ --text-white-skyller: #171717;
1163
+ --state-primary-default-xspector: #b1a400;
1164
+ --state-primary-default-report-xspector-light-mode: #1e3249;
1165
+ --state-primary-default-skyller: #2563eb;
1166
+ --state-primary-hover-xspector: #ddcd00;
1167
+ --state-primary-hover-report-xspector-light-mode: #35475b;
1168
+ --state-primary-hover-skyller: #6692f1;
1169
+ --state-primary-stroke-xspector: rgba(177 164 0 / 0.48);
1170
+ --state-primary-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.64);
1171
+ --state-primary-stroke-skyller: rgba(189 189 189 / 0.64);
1172
+ --state-primary-hover-bg-xspector: rgba(221 205 0 / 0.08);
1173
+ --state-primary-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
1174
+ --state-primary-hover-bg-skyller: rgba(102 146 241 / 0.08);
1175
+ --state-primary-pressed-xspector: #6f6700;
1176
+ --state-primary-pressed-report-xspector-light-mode: #152333;
1177
+ --state-primary-pressed-skyller: #1e40af;
1178
+ --state-primary-active-xspector: #ddcd00;
1179
+ --state-primary-active-report-xspector-light-mode: #35475b;
1180
+ --state-primary-active-skyller: #1e3a8a;
1181
+ --state-primary-text-solid-xspector: #212b36;
1182
+ --state-primary-text-solid-report-xspector-light-mode: #ffffff;
1183
+ --state-primary-text-solid-skyller: #ffffff;
1184
+ --state-primary-text-outline-xspector: #b1a400;
1185
+ --state-primary-text-outline-report-xspector-light-mode: #1e3249;
1186
+ --state-primary-text-outline-skyller: #2563eb;
1187
+ --state-primary-text-hover-xspector: #ddcd00;
1188
+ --state-primary-text-hover-report-xspector-light-mode: #35475b;
1189
+ --state-primary-text-hover-skyller: #6692f1;
1190
+ --state-primary-text-pressed-xspector: #6f6700;
1191
+ --state-primary-text-pressed-report-xspector-light-mode: #152333;
1192
+ --state-primary-text-pressed-skyller: #1e40af;
1193
+ --state-secondary-default-xspector: #ececec;
1194
+ --state-secondary-default-report-xspector-light-mode: #9b8f00;
1195
+ --state-secondary-default-skyller: #60a5fa;
1196
+ --state-secondary-hover-xspector: #fafafa;
1197
+ --state-secondary-hover-report-xspector-light-mode: #b1a400;
1198
+ --state-secondary-hover-skyller: #90c0fc;
1199
+ --state-secondary-stroke-xspector: rgba(236 236 236 / 0.48);
1200
+ --state-secondary-stroke-report-xspector-light-mode: rgba(155 143 0 / 0.64);
1201
+ --state-secondary-stroke-skyller: rgba(189 189 189 / 0.64);
1202
+ --state-secondary-hover-bg-xspector: rgba(250 250 250 / 0.08);
1203
+ --state-secondary-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
1204
+ --state-secondary-hover-bg-skyller: rgba(144 192 252 / 0.08);
1205
+ --state-secondary-pressed-xspector: #bbbbbb;
1206
+ --state-secondary-pressed-report-xspector-light-mode: #6f6700;
1207
+ --state-secondary-pressed-skyller: #1e40af;
1208
+ --state-secondary-active-xspector: #fafafa;
1209
+ --state-secondary-active-report-xspector-light-mode: #b1a400;
1210
+ --state-secondary-active-skyller: #1e3a8a;
1211
+ --state-secondary-text-solid-xspector: #212b36;
1212
+ --state-secondary-text-solid-report-xspector-light-mode: #ffffff;
1213
+ --state-secondary-text-solid-skyller: #ffffff;
1214
+ --state-secondary-text-outline-xspector: #ececec;
1215
+ --state-secondary-text-outline-report-xspector-light-mode: #9b8f00;
1216
+ --state-secondary-text-outline-skyller: #60a5fa;
1217
+ --state-secondary-text-hover-xspector: #fafafa;
1218
+ --state-secondary-text-hover-report-xspector-light-mode: #b1a400;
1219
+ --state-secondary-text-hover-skyller: #90c0fc;
1220
+ --state-secondary-text-pressed-xspector: #c5c5c5;
1221
+ --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
1222
+ --state-secondary-text-pressed-skyller: #1e40af;
1223
+ --state-tertiery-default-xspector: #8aa2ab;
1224
+ --state-tertiery-default-report-xspector-light-mode: #4f4f4f;
1225
+ --state-tertiery-default-skyller: #0891b2;
1226
+ --state-tertiery-hover-xspector: #adcad6;
1227
+ --state-tertiery-hover-report-xspector-light-mode: #6f6f6f;
1228
+ --state-tertiery-hover-skyller: #52b2c9;
1229
+ --state-tertiery-stroke-xspector: rgba(138 162 171 / 0.48);
1230
+ --state-tertiery-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
1231
+ --state-tertiery-stroke-skyller: rgba(8 145 178 / 0.48);
1232
+ --state-tertiery-hover-bg-xspector: rgba(173 202 214 / 0.08);
1233
+ --state-tertiery-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
1234
+ --state-tertiery-hover-bg-skyller: rgba(82 178 201 / 0.08);
1235
+ --state-tertiery-pressed-xspector: #57656b;
1236
+ --state-tertiery-pressed-report-xspector-light-mode: #b1b1b1;
1237
+ --state-tertiery-pressed-skyller: #06667d;
1238
+ --state-tertiery-active-xspector: #adcad6;
1239
+ --state-tertiery-active-report-xspector-light-mode: #6f6f6f;
1240
+ --state-tertiery-active-skyller: #044959;
1241
+ --state-tertiery-text-solid-xspector: #212b36;
1242
+ --state-tertiery-text-solid-report-xspector-light-mode: #ffffff;
1243
+ --state-tertiery-text-solid-skyller: #ffffff;
1244
+ --state-tertiery-text-outline-xspector: #8aa2ab;
1245
+ --state-tertiery-text-outline-report-xspector-light-mode: #4f4f4f;
1246
+ --state-tertiery-text-outline-skyller: #0891b2;
1247
+ --state-tertiery-text-hover-xspector: #adcad6;
1248
+ --state-tertiery-text-hover-report-xspector-light-mode: #6f6f6f;
1249
+ --state-tertiery-text-hover-skyller: #52b2c9;
1250
+ --state-tertiery-text-pressed-xspector: #57656b;
1251
+ --state-tertiery-text-pressed-report-xspector-light-mode: #b1b1b1;
1252
+ --state-tertiery-text-pressed-skyller: #06667d;
1253
+ --state-info-default-xspector: #1b7df5;
1254
+ --state-info-default-report-xspector-light-mode: #1b7df5;
1255
+ --state-info-default-skyller: #2563eb;
1256
+ --state-info-hover-xspector: #2998ff;
1257
+ --state-info-hover-report-xspector-light-mode: #2998ff;
1258
+ --state-info-hover-skyller: #6692f1;
1259
+ --state-info-stroke-xspector: rgba(27 125 245 / 0.48);
1260
+ --state-info-stroke-report-xspector-light-mode: rgba(41 152 255 / 0.48);
1261
+ --state-info-stroke-skyller: rgba(37 99 235 / 0.48);
1262
+ --state-info-hover-bg-xspector: rgba(41 152 255 / 0.08);
1263
+ --state-info-hover-bg-report-xspector-light-mode: rgba(41 152 255 / 0.08);
1264
+ --state-info-hover-bg-skyller: rgba(102 146 241 / 0.08);
1265
+ --state-info-pressed-xspector: #1752b6;
1266
+ --state-info-pressed-report-xspector-light-mode: #1752b6;
1267
+ --state-info-pressed-skyller: #1e40af;
1268
+ --state-info-active-xspector: #2998ff;
1269
+ --state-info-active-report-xspector-light-mode: #2998ff;
1270
+ --state-info-active-skyller: #1e3a8a;
1271
+ --state-info-text-solid-xspector: #ffffff;
1272
+ --state-info-text-solid-report-xspector-light-mode: #ffffff;
1273
+ --state-info-text-solid-skyller: #ffffff;
1274
+ --state-info-text-outline-xspector: #1b7df5;
1275
+ --state-info-text-outline-report-xspector-light-mode: #1b7df5;
1276
+ --state-info-text-outline-skyller: #2563eb;
1277
+ --state-info-text-hover-xspector: #2998ff;
1278
+ --state-info-text-hover-report-xspector-light-mode: #2998ff;
1279
+ --state-info-text-hover-skyller: #6692f1;
1280
+ --state-info-text-pressed-xspector: #1752b6;
1281
+ --state-info-text-pressed-report-xspector-light-mode: #1752b6;
1282
+ --state-info-text-pressed-skyller: #1e40af;
1283
+ --state-success-default-xspector: #44c022;
1284
+ --state-success-default-report-xspector-light-mode: #44c022;
1285
+ --state-success-default-skyller: #16a34a;
1286
+ --state-success-hover-xspector: #54d62c;
1287
+ --state-success-hover-report-xspector-light-mode: #54d62c;
1288
+ --state-success-hover-skyller: #4ade80;
1289
+ --state-success-stroke-xspector: rgba(49 153 23 / 0.48);
1290
+ --state-success-stroke-report-xspector-light-mode: rgba(68 192 34 / 0.48);
1291
+ --state-success-stroke-skyller: rgba(22 163 74 / 0.48);
1292
+ --state-success-hover-bg-xspector: rgba(84 214 44 / 0.08);
1293
+ --state-success-hover-bg-report-xspector-light-mode: rgba(84 214 44 / 0.08);
1294
+ --state-success-hover-bg-skyller: rgba(74 222 128 / 0.08);
1295
+ --state-success-pressed-xspector: #235d17;
1296
+ --state-success-pressed-report-xspector-light-mode: #235d17;
1297
+ --state-success-pressed-skyller: #166534;
1298
+ --state-success-active-xspector: #44c022;
1299
+ --state-success-active-report-xspector-light-mode: #44c022;
1300
+ --state-success-active-skyller: #14532d;
1301
+ --state-success-text-solid-xspector: #ffffff;
1302
+ --state-success-text-solid-report-xspector-light-mode: #ffffff;
1303
+ --state-success-text-solid-skyller: #ffffff;
1304
+ --state-success-text-outline-xspector: #44c022;
1305
+ --state-success-text-outline-report-xspector-light-mode: #44c022;
1306
+ --state-success-text-outline-skyller: #16a34a;
1307
+ --state-success-text-hover-xspector: #54d62c;
1308
+ --state-success-text-hover-report-xspector-light-mode: #54d62c;
1309
+ --state-success-text-hover-skyller: #4ade80;
1310
+ --state-success-text-pressed-xspector: #235d17;
1311
+ --state-success-text-pressed-report-xspector-light-mode: #235d17;
1312
+ --state-success-text-pressed-skyller: #166534;
1313
+ --state-warning-default-xspector: #ffc107;
1314
+ --state-warning-default-report-xspector-light-mode: #ffc107;
1315
+ --state-warning-default-skyller: #fbbf24;
1316
+ --state-warning-hover-xspector: #ffdf1b;
1317
+ --state-warning-hover-report-xspector-light-mode: #ffdf1b;
1318
+ --state-warning-hover-skyller: #fde68a;
1319
+ --state-warning-stroke-xspector: rgba(255 193 7 / 0.48);
1320
+ --state-warning-stroke-report-xspector-light-mode: rgba(255 223 27 / 0.48);
1321
+ --state-warning-stroke-skyller: rgba(251 191 36 / 0.48);
1322
+ --state-warning-hover-bg-xspector: rgba(255 193 7 / 0.08);
1323
+ --state-warning-hover-bg-report-xspector-light-mode: rgba(255 193 7 / 0.08);
1324
+ --state-warning-hover-bg-skyller: rgba(253 230 138 / 0.08);
1325
+ --state-warning-pressed-xspector: #985108;
1326
+ --state-warning-pressed-report-xspector-light-mode: #985108;
1327
+ --state-warning-pressed-skyller: #f59e0b;
1328
+ --state-warning-active-xspector: #ffc107;
1329
+ --state-warning-active-report-xspector-light-mode: #ffc107;
1330
+ --state-warning-active-skyller: #d97706;
1331
+ --state-warning-text-solid-xspector: #212b36;
1332
+ --state-warning-text-solid-report-xspector-light-mode: #ffffff;
1333
+ --state-warning-text-solid-skyller: #ffffff;
1334
+ --state-warning-text-outline-xspector: #ffc107;
1335
+ --state-warning-text-outline-report-xspector-light-mode: #ffc107;
1336
+ --state-warning-text-outline-skyller: #fbbf24;
1337
+ --state-warning-text-hover-xspector: #ffdf1b;
1338
+ --state-warning-text-hover-report-xspector-light-mode: #ffdf1b;
1339
+ --state-warning-text-hover-skyller: #fde68a;
1340
+ --state-warning-text-pressed-xspector: #985108;
1341
+ --state-warning-text-pressed-report-xspector-light-mode: #985108;
1342
+ --state-warning-text-pressed-skyller: #f59e0b;
1343
+ --state-error-default-xspector: #ff4d35;
1344
+ --state-error-default-report-xspector-light-mode: #ed2f15;
1345
+ --state-error-default-skyller: #ef4444;
1346
+ --state-error-hover-xspector: #f87171;
1347
+ --state-error-hover-report-xspector-light-mode: #ff4d35;
1348
+ --state-error-hover-skyller: #f87171;
1349
+ --state-error-stroke-xspector: rgba(255 77 53 / 0.48);
1350
+ --state-error-stroke-report-xspector-light-mode: rgba(237 47 21 / 0.64);
1351
+ --state-error-stroke-skyller: rgba(220 38 38 / 0.64);
1352
+ --state-error-hover-bg-xspector: rgba(248 113 113 / 0.08);
1353
+ --state-error-hover-bg-report-xspector-light-mode: rgba(255 77 53 / 0.08);
1354
+ --state-error-hover-bg-skyller: rgba(248 113 113 / 0.08);
1355
+ --state-error-pressed-xspector: #a5210f;
1356
+ --state-error-pressed-report-xspector-light-mode: #a5210f;
1357
+ --state-error-pressed-skyller: #991b1b;
1358
+ --state-error-active-xspector: #ff4d35;
1359
+ --state-error-active-report-xspector-light-mode: #ff4d35;
1360
+ --state-error-active-skyller: #7f1d1d;
1361
+ --state-error-text-solid-xspector: #ffffff;
1362
+ --state-error-text-solid-report-xspector-light-mode: #ffffff;
1363
+ --state-error-text-solid-skyller: #ffffff;
1364
+ --state-error-text-outline-xspector: #ff4d35;
1365
+ --state-error-text-outline-report-xspector-light-mode: #ed2f15;
1366
+ --state-error-text-outline-skyller: #dc2626;
1367
+ --state-error-text-hover-xspector: #f87171;
1368
+ --state-error-text-hover-report-xspector-light-mode: #ff4d35;
1369
+ --state-error-text-hover-skyller: #f87171;
1370
+ --state-error-text-pressed-xspector: #a5210f;
1371
+ --state-error-text-pressed-report-xspector-light-mode: #a5210f;
1372
+ --state-error-text-pressed-skyller: #991b1b;
1373
+ --state-disable-solid-xspector: #454f5b;
1374
+ --state-disable-solid-report-xspector-light-mode: #d3dadf;
1375
+ --state-disable-solid-skyller: #d4d4d4;
1376
+ --state-disable-outline-xspector: #637381;
1377
+ --state-disable-outline-report-xspector-light-mode: #9dabb5;
1378
+ --state-disable-outline-skyller: #a3a3a3;
1379
+ --ramps-primary-5-xspector: #fdfcf2;
1380
+ --ramps-primary-5-report-xspector-light-mode: #f4f5f6;
1381
+ --ramps-primary-5-skyller: #f4f7fe;
1382
+ --ramps-primary-10-xspector: #fcfae5;
1383
+ --ramps-primary-10-report-xspector-light-mode: #e8eaed;
1384
+ --ramps-primary-10-skyller: #e9effd;
1385
+ --ramps-primary-20-xspector: #f8f5cc;
1386
+ --ramps-primary-20-report-xspector-light-mode: #d2d6db;
1387
+ --ramps-primary-20-skyller: #d3e0fb;
1388
+ --ramps-primary-30-xspector: #f5f0b2;
1389
+ --ramps-primary-30-report-xspector-light-mode: #bbc1c8;
1390
+ --ramps-primary-30-skyller: #bed0f9;
1391
+ --ramps-primary-40-xspector: #f1eb99;
1392
+ --ramps-primary-40-report-xspector-light-mode: #a5adb6;
1393
+ --ramps-primary-40-skyller: #a8c1f7;
1394
+ --ramps-primary-50-xspector: #eee680;
1395
+ --ramps-primary-50-report-xspector-light-mode: #8e98a4;
1396
+ --ramps-primary-50-skyller: #92b1f5;
1397
+ --ramps-primary-60-xspector: #ebe166;
1398
+ --ramps-primary-60-report-xspector-light-mode: #788492;
1399
+ --ramps-primary-60-skyller: #7ca1f3;
1400
+ --ramps-primary-70-xspector: #e7dc4d;
1401
+ --ramps-primary-70-report-xspector-light-mode: #627080;
1402
+ --ramps-primary-70-skyller: #6692f1;
1403
+ --ramps-primary-80-xspector: #e4d733;
1404
+ --ramps-primary-80-report-xspector-light-mode: #4b5b6d;
1405
+ --ramps-primary-80-skyller: #5182ef;
1406
+ --ramps-primary-90-xspector: #e0d21a;
1407
+ --ramps-primary-90-report-xspector-light-mode: #35475b;
1408
+ --ramps-primary-90-skyller: #3b73ed;
1409
+ --ramps-primary-100-xspector: #ddcd00;
1410
+ --ramps-primary-100-report-xspector-light-mode: #1e3249;
1411
+ --ramps-primary-100-skyller: #2563eb;
1412
+ --ramps-primary-110-xspector: #c7b800;
1413
+ --ramps-primary-110-report-xspector-light-mode: #1b2d42;
1414
+ --ramps-primary-110-skyller: #2159d3;
1415
+ --ramps-primary-120-xspector: #b1a400;
1416
+ --ramps-primary-120-report-xspector-light-mode: #18283a;
1417
+ --ramps-primary-120-skyller: #1e4fbc;
1418
+ --ramps-primary-130-xspector: #9b8f00;
1419
+ --ramps-primary-130-report-xspector-light-mode: #152333;
1420
+ --ramps-primary-130-skyller: #1a45a4;
1421
+ --ramps-primary-140-xspector: #857b00;
1422
+ --ramps-primary-140-report-xspector-light-mode: #121e2c;
1423
+ --ramps-primary-140-skyller: #163b8d;
1424
+ --ramps-primary-150-xspector: #6f6700;
1425
+ --ramps-primary-150-report-xspector-light-mode: #0f1925;
1426
+ --ramps-primary-150-skyller: #133276;
1427
+ --ramps-secondary-5-xspector: #fafafa;
1428
+ --ramps-secondary-5-report-xspector-light-mode: #fdfcf2;
1429
+ --ramps-secondary-5-skyller: #f7faff;
1430
+ --ramps-secondary-10-xspector: #f5f5f5;
1431
+ --ramps-secondary-10-report-xspector-light-mode: #fcfae5;
1432
+ --ramps-secondary-10-skyller: #eff6fe;
1433
+ --ramps-secondary-20-xspector: #ececec;
1434
+ --ramps-secondary-20-report-xspector-light-mode: #f8f5cc;
1435
+ --ramps-secondary-20-skyller: #dfedfe;
1436
+ --ramps-secondary-30-xspector: #e2e2e2;
1437
+ --ramps-secondary-30-report-xspector-light-mode: #f5f0b2;
1438
+ --ramps-secondary-30-skyller: #cfe4fd;
1439
+ --ramps-secondary-40-xspector: #d8d8d8;
1440
+ --ramps-secondary-40-report-xspector-light-mode: #f1eb99;
1441
+ --ramps-secondary-40-skyller: #bfdbfd;
1442
+ --ramps-secondary-50-xspector: #cfcfcf;
1443
+ --ramps-secondary-50-report-xspector-light-mode: #eee680;
1444
+ --ramps-secondary-50-skyller: #afd2fd;
1445
+ --ramps-secondary-60-xspector: #c5c5c5;
1446
+ --ramps-secondary-60-report-xspector-light-mode: #ebe166;
1447
+ --ramps-secondary-60-skyller: #a0c9fc;
1448
+ --ramps-secondary-70-xspector: #bbbbbb;
1449
+ --ramps-secondary-70-report-xspector-light-mode: #e7dc4d;
1450
+ --ramps-secondary-70-skyller: #90c0fc;
1451
+ --ramps-secondary-80-xspector: #b1b1b1;
1452
+ --ramps-secondary-80-report-xspector-light-mode: #e4d733;
1453
+ --ramps-secondary-80-skyller: #80b7fb;
1454
+ --ramps-secondary-90-xspector: #a8a8a8;
1455
+ --ramps-secondary-90-report-xspector-light-mode: #e0d21a;
1456
+ --ramps-secondary-90-skyller: #70aefb;
1457
+ --ramps-secondary-100-xspector: #9e9e9e;
1458
+ --ramps-secondary-100-report-xspector-light-mode: #ddcd00;
1459
+ --ramps-secondary-100-skyller: #60a5fa;
1460
+ --ramps-secondary-110-xspector: #8e8e8e;
1461
+ --ramps-secondary-110-report-xspector-light-mode: #c7b800;
1462
+ --ramps-secondary-110-skyller: #5694e1;
1463
+ --ramps-secondary-120-xspector: #7e7e7e;
1464
+ --ramps-secondary-120-report-xspector-light-mode: #b1a400;
1465
+ --ramps-secondary-120-skyller: #4d84c8;
1466
+ --ramps-secondary-130-xspector: #6f6f6f;
1467
+ --ramps-secondary-130-report-xspector-light-mode: #9b8f00;
1468
+ --ramps-secondary-130-skyller: #4374af;
1469
+ --ramps-secondary-140-xspector: #5f5f5f;
1470
+ --ramps-secondary-140-report-xspector-light-mode: #857b00;
1471
+ --ramps-secondary-140-skyller: #3a6396;
1472
+ --ramps-secondary-150-xspector: #4f4f4f;
1473
+ --ramps-secondary-150-report-xspector-light-mode: #6f6700;
1474
+ --ramps-secondary-150-skyller: #30537d;
1475
+ --ramps-tertiary-5-xspector: #fbfcfd;
1476
+ --ramps-tertiary-5-report-xspector-light-mode: #fafafa;
1477
+ --ramps-tertiary-5-skyller: #f3f9fb;
1478
+ --ramps-tertiary-10-xspector: #f7fafb;
1479
+ --ramps-tertiary-10-report-xspector-light-mode: #f5f5f5;
1480
+ --ramps-tertiary-10-skyller: #e6f4f7;
1481
+ --ramps-tertiary-20-xspector: #eff4f7;
1482
+ --ramps-tertiary-20-report-xspector-light-mode: #ececec;
1483
+ --ramps-tertiary-20-skyller: #cee9f0;
1484
+ --ramps-tertiary-30-xspector: #e6eff3;
1485
+ --ramps-tertiary-30-report-xspector-light-mode: #e2e2e2;
1486
+ --ramps-tertiary-30-skyller: #b5dee8;
1487
+ --ramps-tertiary-40-xspector: #deeaef;
1488
+ --ramps-tertiary-40-report-xspector-light-mode: #d8d8d8;
1489
+ --ramps-tertiary-40-skyller: #9cd3e0;
1490
+ --ramps-tertiary-50-xspector: #d6e5eb;
1491
+ --ramps-tertiary-50-report-xspector-light-mode: #cfcfcf;
1492
+ --ramps-tertiary-50-skyller: #83c8d9;
1493
+ --ramps-tertiary-60-xspector: #cedfe6;
1494
+ --ramps-tertiary-60-report-xspector-light-mode: #c5c5c5;
1495
+ --ramps-tertiary-60-skyller: #6bbdd1;
1496
+ --ramps-tertiary-70-xspector: #c6dae2;
1497
+ --ramps-tertiary-70-report-xspector-light-mode: #bbbbbb;
1498
+ --ramps-tertiary-70-skyller: #52b2c9;
1499
+ --ramps-tertiary-80-xspector: #bdd5de;
1500
+ --ramps-tertiary-80-report-xspector-light-mode: #b1b1b1;
1501
+ --ramps-tertiary-80-skyller: #39a7c1;
1502
+ --ramps-tertiary-90-xspector: #b5cfda;
1503
+ --ramps-tertiary-90-report-xspector-light-mode: #a8a8a8;
1504
+ --ramps-tertiary-90-skyller: #219cba;
1505
+ --ramps-tertiary-100-xspector: #adcad6;
1506
+ --ramps-tertiary-100-report-xspector-light-mode: #9e9e9e;
1507
+ --ramps-tertiary-100-skyller: #0891b2;
1508
+ --ramps-tertiary-110-xspector: #9cb6c1;
1509
+ --ramps-tertiary-110-report-xspector-light-mode: #8e8e8e;
1510
+ --ramps-tertiary-110-skyller: #0782a0;
1511
+ --ramps-tertiary-120-xspector: #8aa2ab;
1512
+ --ramps-tertiary-120-report-xspector-light-mode: #7e7e7e;
1513
+ --ramps-tertiary-120-skyller: #06748e;
1514
+ --ramps-tertiary-130-xspector: #798d96;
1515
+ --ramps-tertiary-130-report-xspector-light-mode: #6f6f6f;
1516
+ --ramps-tertiary-130-skyller: #06667d;
1517
+ --ramps-tertiary-140-xspector: #687980;
1518
+ --ramps-tertiary-140-report-xspector-light-mode: #5f5f5f;
1519
+ --ramps-tertiary-140-skyller: #05576b;
1520
+ --ramps-tertiary-150-xspector: #57656b;
1521
+ --ramps-tertiary-150-report-xspector-light-mode: #4f4f4f;
1522
+ --ramps-tertiary-150-skyller: #044959;
1523
+ --ramps-grey-5-xspector: #fafafa;
1524
+ --ramps-grey-5-report-xspector-light-mode: #fafafa;
1525
+ --ramps-grey-5-skyller: #fafafa;
1526
+ --ramps-grey-10-xspector: #f5f5f5;
1527
+ --ramps-grey-10-report-xspector-light-mode: #f5f5f5;
1528
+ --ramps-grey-10-skyller: #f5f5f5;
1529
+ --ramps-grey-20-xspector: #ececec;
1530
+ --ramps-grey-20-report-xspector-light-mode: #ececec;
1531
+ --ramps-grey-20-skyller: #ececec;
1532
+ --ramps-grey-30-xspector: #e2e2e2;
1533
+ --ramps-grey-30-report-xspector-light-mode: #e2e2e2;
1534
+ --ramps-grey-30-skyller: #e2e2e2;
1535
+ --ramps-grey-40-xspector: #d8d8d8;
1536
+ --ramps-grey-40-report-xspector-light-mode: #d8d8d8;
1537
+ --ramps-grey-40-skyller: #d8d8d8;
1538
+ --ramps-grey-50-xspector: #cfcfcf;
1539
+ --ramps-grey-50-report-xspector-light-mode: #cfcfcf;
1540
+ --ramps-grey-50-skyller: #cfcfcf;
1541
+ --ramps-grey-60-xspector: #c5c5c5;
1542
+ --ramps-grey-60-report-xspector-light-mode: #c5c5c5;
1543
+ --ramps-grey-60-skyller: #c5c5c5;
1544
+ --ramps-grey-70-xspector: #bbbbbb;
1545
+ --ramps-grey-70-report-xspector-light-mode: #bbbbbb;
1546
+ --ramps-grey-70-skyller: #bbbbbb;
1547
+ --ramps-grey-80-xspector: #b1b1b1;
1548
+ --ramps-grey-80-report-xspector-light-mode: #b1b1b1;
1549
+ --ramps-grey-80-skyller: #b1b1b1;
1550
+ --ramps-grey-90-xspector: #a8a8a8;
1551
+ --ramps-grey-90-report-xspector-light-mode: #a8a8a8;
1552
+ --ramps-grey-90-skyller: #a8a8a8;
1553
+ --ramps-grey-100-xspector: #9e9e9e;
1554
+ --ramps-grey-100-report-xspector-light-mode: #9e9e9e;
1555
+ --ramps-grey-100-skyller: #9e9e9e;
1556
+ --ramps-grey-110-xspector: #8e8e8e;
1557
+ --ramps-grey-110-report-xspector-light-mode: #8e8e8e;
1558
+ --ramps-grey-110-skyller: #8e8e8e;
1559
+ --ramps-grey-120-xspector: #7e7e7e;
1560
+ --ramps-grey-120-report-xspector-light-mode: #7e7e7e;
1561
+ --ramps-grey-120-skyller: #7e7e7e;
1562
+ --ramps-grey-130-xspector: #6f6f6f;
1563
+ --ramps-grey-130-report-xspector-light-mode: #6f6f6f;
1564
+ --ramps-grey-130-skyller: #6f6f6f;
1565
+ --ramps-grey-140-xspector: #5f5f5f;
1566
+ --ramps-grey-140-report-xspector-light-mode: #5f5f5f;
1567
+ --ramps-grey-140-skyller: #5f5f5f;
1568
+ --ramps-grey-150-xspector: #4f4f4f;
1569
+ --ramps-grey-150-report-xspector-light-mode: #4f4f4f;
1570
+ --ramps-grey-150-skyller: #4f4f4f;
1571
+ --ramps-grey2-50-xspector: #f8fafa;
1572
+ --ramps-grey2-50-report-xspector-light-mode: #f8fafa;
1573
+ --ramps-grey2-50-skyller: #fafafa;
1574
+ --ramps-grey2-100-xspector: #f2f5f5;
1575
+ --ramps-grey2-100-report-xspector-light-mode: #f2f5f5;
1576
+ --ramps-grey2-100-skyller: #f5f5f5;
1577
+ --ramps-grey2-200-xspector: #e7ebed;
1578
+ --ramps-grey2-200-report-xspector-light-mode: #e7ebed;
1579
+ --ramps-grey2-200-skyller: #e5e5e5;
1580
+ --ramps-grey2-300-xspector: #d3dadf;
1581
+ --ramps-grey2-300-report-xspector-light-mode: #d3dadf;
1582
+ --ramps-grey2-300-skyller: #d4d4d4;
1583
+ --ramps-grey2-400-xspector: #bac5cb;
1584
+ --ramps-grey2-400-report-xspector-light-mode: #bac5cb;
1585
+ --ramps-grey2-400-skyller: #a3a3a3;
1586
+ --ramps-grey2-500-xspector: #9dabb5;
1587
+ --ramps-grey2-500-report-xspector-light-mode: #9dabb5;
1588
+ --ramps-grey2-500-skyller: #737373;
1589
+ --ramps-grey2-600-xspector: #919eab;
1590
+ --ramps-grey2-600-report-xspector-light-mode: #919eab;
1591
+ --ramps-grey2-600-skyller: #525252;
1592
+ --ramps-grey2-700-xspector: #72808f;
1593
+ --ramps-grey2-700-report-xspector-light-mode: #72808f;
1594
+ --ramps-grey2-700-skyller: #404040;
1595
+ --ramps-grey2-800-xspector: #606b77;
1596
+ --ramps-grey2-800-report-xspector-light-mode: #606b77;
1597
+ --ramps-grey2-800-skyller: #262626;
1598
+ --ramps-grey2-900-xspector: #4f5863;
1599
+ --ramps-grey2-900-report-xspector-light-mode: #4f5863;
1600
+ --ramps-grey2-900-skyller: #171717;
1601
+ --ramps-grey2-950-xspector: #343b41;
1602
+ --ramps-grey2-950-report-xspector-light-mode: #343b41;
1603
+ --ramps-grey2-950-skyller: #1b1f22;
1604
+ --ramps-info-50-xspector: #eef8ff;
1605
+ --ramps-info-50-report-xspector-light-mode: #eef8ff;
1606
+ --ramps-info-50-skyller: #eff6ff;
1607
+ --ramps-info-100-xspector: #d9efff;
1608
+ --ramps-info-100-report-xspector-light-mode: #d9efff;
1609
+ --ramps-info-100-skyller: #dbeafe;
1610
+ --ramps-info-200-xspector: #bce4ff;
1611
+ --ramps-info-200-report-xspector-light-mode: #bce4ff;
1612
+ --ramps-info-200-skyller: #bfdbfe;
1613
+ --ramps-info-300-xspector: #8ed5ff;
1614
+ --ramps-info-300-report-xspector-light-mode: #8ed5ff;
1615
+ --ramps-info-300-skyller: #93c5fd;
1616
+ --ramps-info-400-xspector: #59bbff;
1617
+ --ramps-info-400-report-xspector-light-mode: #59bbff;
1618
+ --ramps-info-400-skyller: #60a5fa;
1619
+ --ramps-info-500-xspector: #2998ff;
1620
+ --ramps-info-500-report-xspector-light-mode: #2998ff;
1621
+ --ramps-info-500-skyller: #3b82f6;
1622
+ --ramps-info-600-xspector: #1b7df5;
1623
+ --ramps-info-600-report-xspector-light-mode: #1b7df5;
1624
+ --ramps-info-600-skyller: #2563eb;
1625
+ --ramps-info-700-xspector: #1466e1;
1626
+ --ramps-info-700-report-xspector-light-mode: #1466e1;
1627
+ --ramps-info-700-skyller: #1d4ed8;
1628
+ --ramps-info-800-xspector: #1752b6;
1629
+ --ramps-info-800-report-xspector-light-mode: #1752b6;
1630
+ --ramps-info-800-skyller: #1e40af;
1631
+ --ramps-info-900-xspector: #19478f;
1632
+ --ramps-info-900-report-xspector-light-mode: #19478f;
1633
+ --ramps-info-900-skyller: #1e3a8a;
1634
+ --ramps-info-950-xspector: #142c57;
1635
+ --ramps-info-950-report-xspector-light-mode: #142c57;
1636
+ --ramps-info-950-skyller: #162a63;
1637
+ --ramps-success-50-xspector: #effce9;
1638
+ --ramps-success-50-report-xspector-light-mode: #effce9;
1639
+ --ramps-success-50-skyller: #f0fdf4;
1640
+ --ramps-success-100-xspector: #daf9ce;
1641
+ --ramps-success-100-report-xspector-light-mode: #daf9ce;
1642
+ --ramps-success-100-skyller: #dcfce7;
1643
+ --ramps-success-200-xspector: #b8f3a3;
1644
+ --ramps-success-200-report-xspector-light-mode: #b8f3a3;
1645
+ --ramps-success-200-skyller: #bbf7d0;
1646
+ --ramps-success-300-xspector: #8ce86e;
1647
+ --ramps-success-300-report-xspector-light-mode: #8ce86e;
1648
+ --ramps-success-300-skyller: #86efac;
1649
+ --ramps-success-400-xspector: #54d62c;
1650
+ --ramps-success-400-report-xspector-light-mode: #54d62c;
1651
+ --ramps-success-400-skyller: #4ade80;
1652
+ --ramps-success-500-xspector: #44c022;
1653
+ --ramps-success-500-report-xspector-light-mode: #44c022;
1654
+ --ramps-success-500-skyller: #22c55e;
1655
+ --ramps-success-600-xspector: #319917;
1656
+ --ramps-success-600-report-xspector-light-mode: #319917;
1657
+ --ramps-success-600-skyller: #16a34a;
1658
+ --ramps-success-700-xspector: #277516;
1659
+ --ramps-success-700-report-xspector-light-mode: #277516;
1660
+ --ramps-success-700-skyller: #15803d;
1661
+ --ramps-success-800-xspector: #235d17;
1662
+ --ramps-success-800-report-xspector-light-mode: #235d17;
1663
+ --ramps-success-800-skyller: #166534;
1664
+ --ramps-success-900-xspector: #214f18;
1665
+ --ramps-success-900-report-xspector-light-mode: #214f18;
1666
+ --ramps-success-900-skyller: #14532d;
1667
+ --ramps-success-950-xspector: #0c2b08;
1668
+ --ramps-success-950-report-xspector-light-mode: #0c2b08;
1669
+ --ramps-success-950-skyller: #0a2e18;
1670
+ --ramps-warning-50-xspector: #ffffea;
1671
+ --ramps-warning-50-report-xspector-light-mode: #ffffea;
1672
+ --ramps-warning-50-skyller: #fffbeb;
1673
+ --ramps-warning-100-xspector: #fffbc5;
1674
+ --ramps-warning-100-report-xspector-light-mode: #fffbc5;
1675
+ --ramps-warning-100-skyller: #fef3c7;
1676
+ --ramps-warning-200-xspector: #fff885;
1677
+ --ramps-warning-200-report-xspector-light-mode: #fff885;
1678
+ --ramps-warning-200-skyller: #fde68a;
1679
+ --ramps-warning-300-xspector: #ffee46;
1680
+ --ramps-warning-300-report-xspector-light-mode: #ffee46;
1681
+ --ramps-warning-300-skyller: #fcd34d;
1682
+ --ramps-warning-400-xspector: #ffdf1b;
1683
+ --ramps-warning-400-report-xspector-light-mode: #ffdf1b;
1684
+ --ramps-warning-400-skyller: #fbbf24;
1685
+ --ramps-warning-500-xspector: #ffc107;
1686
+ --ramps-warning-500-report-xspector-light-mode: #ffc107;
1687
+ --ramps-warning-500-skyller: #f59e0b;
1688
+ --ramps-warning-600-xspector: #e29400;
1689
+ --ramps-warning-600-report-xspector-light-mode: #e29400;
1690
+ --ramps-warning-600-skyller: #d97706;
1691
+ --ramps-warning-700-xspector: #bb6902;
1692
+ --ramps-warning-700-report-xspector-light-mode: #bb6902;
1693
+ --ramps-warning-700-skyller: #b45309;
1694
+ --ramps-warning-800-xspector: #985108;
1695
+ --ramps-warning-800-report-xspector-light-mode: #985108;
1696
+ --ramps-warning-800-skyller: #92400e;
1697
+ --ramps-warning-900-xspector: #7c420b;
1698
+ --ramps-warning-900-report-xspector-light-mode: #7c420b;
1699
+ --ramps-warning-900-skyller: #7c420b;
1700
+ --ramps-warning-950-xspector: #482200;
1701
+ --ramps-warning-950-report-xspector-light-mode: #482200;
1702
+ --ramps-warning-950-skyller: #472505;
1703
+ --ramps-error-50-xspector: #fff3f1;
1704
+ --ramps-error-50-report-xspector-light-mode: #fff3f1;
1705
+ --ramps-error-50-skyller: #fef2f2;
1706
+ --ramps-error-100-xspector: #ffe3df;
1707
+ --ramps-error-100-report-xspector-light-mode: #ffe3df;
1708
+ --ramps-error-100-skyller: #ffdfdf;
1709
+ --ramps-error-200-xspector: #ffccc5;
1710
+ --ramps-error-200-report-xspector-light-mode: #ffccc5;
1711
+ --ramps-error-200-skyller: #fecaca;
1712
+ --ramps-error-300-xspector: #ffa99d;
1713
+ --ramps-error-300-report-xspector-light-mode: #ffa99d;
1714
+ --ramps-error-300-skyller: #fca5a5;
1715
+ --ramps-error-400-xspector: #ff7664;
1716
+ --ramps-error-400-report-xspector-light-mode: #ff7664;
1717
+ --ramps-error-400-skyller: #f87171;
1718
+ --ramps-error-500-xspector: #ff4d35;
1719
+ --ramps-error-500-report-xspector-light-mode: #ff4d35;
1720
+ --ramps-error-500-skyller: #ef4444;
1721
+ --ramps-error-600-xspector: #ed2f15;
1722
+ --ramps-error-600-report-xspector-light-mode: #ed2f15;
1723
+ --ramps-error-600-skyller: #dc2626;
1724
+ --ramps-error-700-xspector: #c8230d;
1725
+ --ramps-error-700-report-xspector-light-mode: #c8230d;
1726
+ --ramps-error-700-skyller: #b91c1c;
1727
+ --ramps-error-800-xspector: #a5210f;
1728
+ --ramps-error-800-report-xspector-light-mode: #a5210f;
1729
+ --ramps-error-800-skyller: #991b1b;
1730
+ --ramps-error-900-xspector: #882214;
1731
+ --ramps-error-900-report-xspector-light-mode: #882214;
1732
+ --ramps-error-900-skyller: #7f1d1d;
1733
+ --ramps-error-950-xspector: #4b0c04;
1734
+ --ramps-error-950-report-xspector-light-mode: #4b0c04;
1735
+ --ramps-error-950-skyller: #410a0a;
1736
+ --transparency-primary-8-xspector: rgba(221 205 0 / 0.08);
1737
+ --transparency-primary-8-report-xspector-light-mode: rgba(30 50 73 / 0.08);
1738
+ --transparency-primary-8-skyller: rgba(37 99 235 / 0.08);
1739
+ --transparency-primary-12-xspector: rgba(221 205 0 / 0.12);
1740
+ --transparency-primary-12-report-xspector-light-mode: rgba(30 50 73 / 0.12);
1741
+ --transparency-primary-12-skyller: rgba(37 99 235 / 0.12);
1742
+ --transparency-primary-16-xspector: rgba(221 205 0 / 0.16);
1743
+ --transparency-primary-16-report-xspector-light-mode: rgba(30 50 73 / 0.16);
1744
+ --transparency-primary-16-skyller: rgba(37 99 235 / 0.16);
1745
+ --transparency-primary-24-xspector: rgba(221 205 0 / 0.24);
1746
+ --transparency-primary-24-report-xspector-light-mode: rgba(30 50 73 / 0.24);
1747
+ --transparency-primary-24-skyller: rgba(37 99 235 / 0.24);
1748
+ --transparency-primary-32-xspector: rgba(221 205 0 / 0.32);
1749
+ --transparency-primary-32-report-xspector-light-mode: rgba(30 50 73 / 0.32);
1750
+ --transparency-primary-32-skyller: rgba(37 99 235 / 0.32);
1751
+ --transparency-primary-48-xspector: rgba(221 205 0 / 0.48);
1752
+ --transparency-primary-48-report-xspector-light-mode: rgba(30 50 73 / 0.48);
1753
+ --transparency-primary-48-skyller: rgba(37 99 235 / 0.48);
1754
+ --transparency-secondary-8-xspector: rgba(158 158 158 / 0.08);
1755
+ --transparency-secondary-8-report-xspector-light-mode: rgba(221 205 0 / 0.08);
1756
+ --transparency-secondary-8-skyller: rgba(96 165 250 / 0.08);
1757
+ --transparency-secondary-12-xspector: rgba(158 158 158 / 0.12);
1758
+ --transparency-secondary-12-report-xspector-light-mode: rgba(221 205 0 / 0.12);
1759
+ --transparency-secondary-12-skyller: rgba(96 165 250 / 0.12);
1760
+ --transparency-secondary-16-xspector: rgba(158 158 158 / 0.16);
1761
+ --transparency-secondary-16-report-xspector-light-mode: rgba(221 205 0 / 0.16);
1762
+ --transparency-secondary-16-skyller: rgba(96 165 250 / 0.16);
1763
+ --transparency-secondary-24-xspector: rgba(158 158 158 / 0.24);
1764
+ --transparency-secondary-24-report-xspector-light-mode: rgba(221 205 0 / 0.24);
1765
+ --transparency-secondary-24-skyller: rgba(96 165 250 / 0.24);
1766
+ --transparency-secondary-32-xspector: rgba(158 158 158 / 0.32);
1767
+ --transparency-secondary-32-report-xspector-light-mode: rgba(221 205 0 / 0.32);
1768
+ --transparency-secondary-32-skyller: rgba(96 165 250 / 0.32);
1769
+ --transparency-secondary-48-xspector: rgba(158 158 158 / 0.48);
1770
+ --transparency-secondary-48-report-xspector-light-mode: rgba(221 205 0 / 0.48);
1771
+ --transparency-secondary-48-skyller: rgba(96 165 250 / 0.48);
1772
+ --transparency-tertiary-8-xspector: rgba(173 202 214 / 0.08);
1773
+ --transparency-tertiary-8-report-xspector-light-mode: rgba(158 158 158 / 0.08);
1774
+ --transparency-tertiary-8-skyller: rgba(8 145 178 / 0.08);
1775
+ --transparency-tertiary-12-xspector: rgba(173 202 214 / 0.12);
1776
+ --transparency-tertiary-12-report-xspector-light-mode: rgba(158 158 158 / 0.12);
1777
+ --transparency-tertiary-12-skyller: rgba(8 145 178 / 0.12);
1778
+ --transparency-tertiary-16-xspector: rgba(173 202 214 / 0.16);
1779
+ --transparency-tertiary-16-report-xspector-light-mode: rgba(158 158 158 / 0.16);
1780
+ --transparency-tertiary-16-skyller: rgba(8 145 178 / 0.16);
1781
+ --transparency-tertiary-24-xspector: rgba(173 202 214 / 0.24);
1782
+ --transparency-tertiary-24-report-xspector-light-mode: rgba(158 158 158 / 0.24);
1783
+ --transparency-tertiary-24-skyller: rgba(8 145 178 / 0.24);
1784
+ --transparency-tertiary-32-xspector: rgba(173 202 214 / 0.32);
1785
+ --transparency-tertiary-32-report-xspector-light-mode: rgba(158 158 158 / 0.32);
1786
+ --transparency-tertiary-32-skyller: rgba(8 145 178 / 0.32);
1787
+ --transparency-tertiary-48-xspector: rgba(173 202 214 / 0.48);
1788
+ --transparency-tertiary-48-report-xspector-light-mode: rgba(158 158 158 / 0.48);
1789
+ --transparency-tertiary-48-skyller: rgba(8 145 178 / 0.48);
1790
+ --transparency-info-8-xspector: rgba(41 152 255 / 0.08);
1791
+ --transparency-info-8-report-xspector-light-mode: rgba(41 152 255 / 0.08);
1792
+ --transparency-info-8-skyller: rgba(37 99 235 / 0.08);
1793
+ --transparency-info-12-xspector: rgba(41 152 255 / 0.12);
1794
+ --transparency-info-12-report-xspector-light-mode: rgba(41 152 255 / 0.12);
1795
+ --transparency-info-12-skyller: rgba(37 99 235 / 0.12);
1796
+ --transparency-info-16-xspector: rgba(41 152 255 / 0.16);
1797
+ --transparency-info-16-report-xspector-light-mode: rgba(41 152 255 / 0.16);
1798
+ --transparency-info-16-skyller: rgba(37 99 235 / 0.16);
1799
+ --transparency-info-24-xspector: rgba(41 152 255 / 0.24);
1800
+ --transparency-info-24-report-xspector-light-mode: rgba(41 152 255 / 0.24);
1801
+ --transparency-info-24-skyller: rgba(37 99 235 / 0.24);
1802
+ --transparency-info-32-xspector: rgba(41 152 255 / 0.32);
1803
+ --transparency-info-32-report-xspector-light-mode: rgba(41 152 255 / 0.32);
1804
+ --transparency-info-32-skyller: rgba(37 99 235 / 0.32);
1805
+ --transparency-info-48-xspector: rgba(41 152 255 / 0.48);
1806
+ --transparency-info-48-report-xspector-light-mode: rgba(41 152 255 / 0.48);
1807
+ --transparency-info-48-skyller: rgba(37 99 235 / 0.48);
1808
+ --transparency-success-8-xspector: rgba(84 214 44 / 0.08);
1809
+ --transparency-success-8-report-xspector-light-mode: rgba(84 214 44 / 0.08);
1810
+ --transparency-success-8-skyller: rgba(22 163 74 / 0.08);
1811
+ --transparency-success-12-xspector: rgba(84 214 44 / 0.12);
1812
+ --transparency-success-12-report-xspector-light-mode: rgba(84 214 44 / 0.12);
1813
+ --transparency-success-12-skyller: rgba(22 163 74 / 0.12);
1814
+ --transparency-success-16-xspector: rgba(84 214 44 / 0.16);
1815
+ --transparency-success-16-report-xspector-light-mode: rgba(84 214 44 / 0.16);
1816
+ --transparency-success-16-skyller: rgba(22 163 74 / 0.16);
1817
+ --transparency-success-24-xspector: rgba(84 214 44 / 0.24);
1818
+ --transparency-success-24-report-xspector-light-mode: rgba(84 214 44 / 0.24);
1819
+ --transparency-success-24-skyller: rgba(22 163 74 / 0.24);
1820
+ --transparency-success-32-xspector: rgba(84 214 44 / 0.32);
1821
+ --transparency-success-32-report-xspector-light-mode: rgba(84 214 44 / 0.32);
1822
+ --transparency-success-32-skyller: rgba(22 163 74 / 0.32);
1823
+ --transparency-success-48-xspector: rgba(84 214 44 / 0.48);
1824
+ --transparency-success-48-report-xspector-light-mode: rgba(84 214 44 / 0.48);
1825
+ --transparency-success-48-skyller: rgba(22 163 74 / 0.48);
1826
+ --transparency-warning-8-xspector: rgba(255 193 7 / 0.08);
1827
+ --transparency-warning-8-report-xspector-light-mode: rgba(255 193 7 / 0.08);
1828
+ --transparency-warning-8-skyller: rgba(251 191 36 / 0.08);
1829
+ --transparency-warning-12-xspector: rgba(255 193 7 / 0.12);
1830
+ --transparency-warning-12-report-xspector-light-mode: rgba(255 193 7 / 0.12);
1831
+ --transparency-warning-12-skyller: rgba(251 191 36 / 0.12);
1832
+ --transparency-warning-16-xspector: rgba(255 193 7 / 0.16);
1833
+ --transparency-warning-16-report-xspector-light-mode: rgba(255 193 7 / 0.16);
1834
+ --transparency-warning-16-skyller: rgba(251 191 36 / 0.16);
1835
+ --transparency-warning-24-xspector: rgba(255 193 7 / 0.24);
1836
+ --transparency-warning-24-report-xspector-light-mode: rgba(255 193 7 / 0.24);
1837
+ --transparency-warning-24-skyller: rgba(251 191 36 / 0.24);
1838
+ --transparency-warning-32-xspector: rgba(255 193 7 / 0.32);
1839
+ --transparency-warning-32-report-xspector-light-mode: rgba(255 193 7 / 0.32);
1840
+ --transparency-warning-32-skyller: rgba(251 191 36 / 0.32);
1841
+ --transparency-warning-48-xspector: rgba(255 193 7 / 0.48);
1842
+ --transparency-warning-48-report-xspector-light-mode: rgba(255 193 7 / 0.48);
1843
+ --transparency-warning-48-skyller: rgba(251 191 36 / 0.48);
1844
+ --transparency-error-8-xspector: rgba(255 72 66 / 0.08);
1845
+ --transparency-error-8-report-xspector-light-mode: rgba(255 72 66 / 0.08);
1846
+ --transparency-error-8-skyller: rgba(220 38 38 / 0.08);
1847
+ --transparency-error-12-xspector: rgba(255 72 66 / 0.12);
1848
+ --transparency-error-12-report-xspector-light-mode: rgba(255 72 66 / 0.12);
1849
+ --transparency-error-12-skyller: rgba(220 38 38 / 0.12);
1850
+ --transparency-error-16-xspector: rgba(255 72 66 / 0.16);
1851
+ --transparency-error-16-report-xspector-light-mode: rgba(255 72 66 / 0.16);
1852
+ --transparency-error-16-skyller: rgba(220 38 38 / 0.16);
1853
+ --transparency-error-24-xspector: rgba(255 72 66 / 0.24);
1854
+ --transparency-error-24-report-xspector-light-mode: rgba(255 72 66 / 0.24);
1855
+ --transparency-error-24-skyller: rgba(220 38 38 / 0.24);
1856
+ --transparency-error-32-xspector: rgba(255 72 66 / 0.32);
1857
+ --transparency-error-32-report-xspector-light-mode: rgba(255 72 66 / 0.32);
1858
+ --transparency-error-32-skyller: rgba(220 38 38 / 0.32);
1859
+ --transparency-error-48-xspector: rgba(255 72 66 / 0.48);
1860
+ --transparency-error-48-report-xspector-light-mode: rgba(255 72 66 / 0.48);
1861
+ --transparency-error-48-skyller: rgba(220 38 38 / 0.48);
1862
+ --transparency-grey-8-xspector: rgba(158 158 158 / 0.08);
1863
+ --transparency-grey-8-report-xspector-light-mode: rgba(158 158 158 / 0.08);
1864
+ --transparency-grey-8-skyller: rgba(115 115 115 / 0.08);
1865
+ --transparency-grey-12-xspector: rgba(158 158 158 / 0.12);
1866
+ --transparency-grey-12-report-xspector-light-mode: rgba(158 158 158 / 0.12);
1867
+ --transparency-grey-12-skyller: rgba(115 115 115 / 0.12);
1868
+ --transparency-grey-16-xspector: rgba(158 158 158 / 0.16);
1869
+ --transparency-grey-16-report-xspector-light-mode: rgba(158 158 158 / 0.16);
1870
+ --transparency-grey-16-skyller: rgba(115 115 115 / 0.16);
1871
+ --transparency-grey-24-xspector: rgba(158 158 158 / 0.24);
1872
+ --transparency-grey-24-report-xspector-light-mode: rgba(158 158 158 / 0.24);
1873
+ --transparency-grey-24-skyller: rgba(115 115 115 / 0.24);
1874
+ --transparency-grey-32-xspector: rgba(158 158 158 / 0.32);
1875
+ --transparency-grey-32-report-xspector-light-mode: rgba(158 158 158 / 0.32);
1876
+ --transparency-grey-32-skyller: rgba(115 115 115 / 0.32);
1877
+ --transparency-grey-48-xspector: rgba(158 158 158 / 0.48);
1878
+ --transparency-grey-48-report-xspector-light-mode: rgba(158 158 158 / 0.48);
1879
+ --transparency-grey-48-skyller: rgba(115 115 115 / 0.48);
1880
+ --transparency-grey2-8-xspector: rgba(145 158 171 / 0.08);
1881
+ --transparency-grey2-8-report-xspector-light-mode: rgba(145 158 171 / 0.08);
1882
+ --transparency-grey2-8-skyller: rgba(163 163 163 / 0.08);
1883
+ --transparency-grey2-12-xspector: rgba(145 158 171 / 0.12);
1884
+ --transparency-grey2-12-report-xspector-light-mode: rgba(145 158 171 / 0.12);
1885
+ --transparency-grey2-12-skyller: rgba(163 163 163 / 0.12);
1886
+ --transparency-grey2-16-xspector: rgba(145 158 171 / 0.16);
1887
+ --transparency-grey2-16-report-xspector-light-mode: rgba(145 158 171 / 0.16);
1888
+ --transparency-grey2-16-skyller: rgba(163 163 163 / 0.16);
1889
+ --transparency-grey2-24-xspector: rgba(145 158 171 / 0.24);
1890
+ --transparency-grey2-24-report-xspector-light-mode: rgba(145 158 171 / 0.24);
1891
+ --transparency-grey2-24-skyller: rgba(163 163 163 / 0.24);
1892
+ --transparency-grey2-32-xspector: rgba(145 158 171 / 0.32);
1893
+ --transparency-grey2-32-report-xspector-light-mode: rgba(145 158 171 / 0.32);
1894
+ --transparency-grey2-32-skyller: rgba(163 163 163 / 0.32);
1895
+ --transparency-grey2-48-xspector: rgba(145 158 171 / 0.48);
1896
+ --transparency-grey2-48-report-xspector-light-mode: rgba(145 158 171 / 0.48);
1897
+ --transparency-grey2-48-skyller: rgba(163 163 163 / 0.48);
1898
+ --transparency-white-8-xspector: rgba(255 255 255 / 0.08);
1899
+ --transparency-white-8-report-xspector-light-mode: rgba(255 255 255 / 0.08);
1900
+ --transparency-white-8-skyller: rgba(255 255 255 / 0.08);
1901
+ --transparency-white-12-xspector: rgba(255 255 255 / 0.12);
1902
+ --transparency-white-12-report-xspector-light-mode: rgba(255 255 255 / 0.12);
1903
+ --transparency-white-12-skyller: rgba(255 255 255 / 0.12);
1904
+ --transparency-white-16-xspector: rgba(255 255 255 / 0.16);
1905
+ --transparency-white-16-report-xspector-light-mode: rgba(255 255 255 / 0.16);
1906
+ --transparency-white-16-skyller: rgba(255 255 255 / 0.16);
1907
+ --transparency-white-24-xspector: rgba(255 255 255 / 0.24);
1908
+ --transparency-white-24-report-xspector-light-mode: rgba(255 255 255 / 0.24);
1909
+ --transparency-white-24-skyller: rgba(255 255 255 / 0.24);
1910
+ --transparency-white-32-xspector: rgba(255 255 255 / 0.32);
1911
+ --transparency-white-32-report-xspector-light-mode: rgba(255 255 255 / 0.32);
1912
+ --transparency-white-32-skyller: rgba(255 255 255 / 0.32);
1913
+ --transparency-white-48-xspector: rgba(255 255 255 / 0.48);
1914
+ --transparency-white-48-report-xspector-light-mode: rgba(255 255 255 / 0.48);
1915
+ --transparency-white-48-skyller: rgba(255 255 255 / 0.48);
1916
+ --transparency-black-8-xspector: rgba(0 0 0 / 0.08);
1917
+ --transparency-black-8-report-xspector-light-mode: rgba(0 0 0 / 0.08);
1918
+ --transparency-black-8-skyller: rgba(0 0 0 / 0.08);
1919
+ --transparency-black-12-xspector: rgba(0 0 0 / 0.12);
1920
+ --transparency-black-12-report-xspector-light-mode: rgba(0 0 0 / 0.12);
1921
+ --transparency-black-12-skyller: rgba(0 0 0 / 0.12);
1922
+ --transparency-black-16-xspector: rgba(0 0 0 / 0.16);
1923
+ --transparency-black-16-report-xspector-light-mode: rgba(0 0 0 / 0.16);
1924
+ --transparency-black-16-skyller: rgba(0 0 0 / 0.16);
1925
+ --transparency-black-24-xspector: rgba(0 0 0 / 0.24);
1926
+ --transparency-black-24-report-xspector-light-mode: rgba(0 0 0 / 0.24);
1927
+ --transparency-black-24-skyller: rgba(0 0 0 / 0.24);
1928
+ --transparency-black-32-xspector: rgba(0 0 0 / 0.32);
1929
+ --transparency-black-32-report-xspector-light-mode: rgba(0 0 0 / 0.32);
1930
+ --transparency-black-32-skyller: rgba(0 0 0 / 0.32);
1931
+ --transparency-black-48-xspector: rgba(0 0 0 / 0.48);
1932
+ --transparency-black-48-report-xspector-light-mode: rgba(0 0 0 / 0.48);
1933
+ --transparency-black-48-skyller: rgba(0 0 0 / 0.48);
1934
+ --base-modal-modal-xspector: #2d2e30;
1935
+ --base-modal-modal-report-xspector-light-mode: #ffffff;
1936
+ --base-modal-modal-skyller: #ffffff;
1937
+ --base-modal-modal-hightlight-xspector: #343638;
1938
+ --base-modal-modal-hightlight-report-xspector-light-mode: #f5f5f5;
1939
+ --base-modal-modal-hightlight-skyller: #f5f5f5;
1940
+ --base-modal-modal-curtain-xspector: rgba(11 10 10 / 0.64);
1941
+ --base-modal-modal-curtain-report-xspector-light-mode: rgba(0 0 0 / 0.64);
1942
+ --base-modal-modal-curtain-skyller: rgba(0 0 0 / 0.64);
1943
+ --base-bg-bg1-xspector: #202427;
1944
+ --base-bg-bg1-report-xspector-light-mode: #ffffff;
1945
+ --base-bg-bg1-skyller: #ffffff;
1946
+ --base-bg-bg2-xspector: #282c31;
1947
+ --base-bg-bg2-report-xspector-light-mode: #f5f5f5;
1948
+ --base-bg-bg2-skyller: #fafafa;
1949
+ --base-bg-bg3-xspector: #000000;
1950
+ --base-bg-bg3-report-xspector-light-mode: #d8d8d8;
1951
+ --base-bg-bg3-skyller: #f5f5f5;
1952
+ --base-bg-stroke1-xspector: #000000;
1953
+ --base-bg-stroke1-report-xspector-light-mode: #e2e2e2;
1954
+ --base-bg-stroke1-skyller: #e5e5e5;
1955
+ --base-bg-stroke2-xspector: #000000;
1956
+ --base-bg-stroke2-report-xspector-light-mode: #c5c5c5;
1957
+ --base-bg-stroke2-skyller: #d4d4d4;
1958
+ --input-default-text-xspector: #9e9e9e;
1959
+ --input-default-text-report-xspector-light-mode: #9e9e9e;
1960
+ --input-default-text-skyller: #737373;
1961
+ --input-default-stroke-xspector: rgba(158 158 158 / 0.24);
1962
+ --input-default-stroke-report-xspector-light-mode: #cfcfcf;
1963
+ --input-default-stroke-skyller: #d4d4d4;
1964
+ --input-filled-text-xspector: #dfe3e8;
1965
+ --input-filled-text-report-xspector-light-mode: #18283a;
1966
+ --input-filled-text-skyller: #171717;
1967
+ --input-active-stroke-xspector: rgba(158 158 158 / 0.48);
1968
+ --input-active-stroke-report-xspector-light-mode: #9e9e9e;
1969
+ --input-active-stroke-skyller: #2563eb;
1970
+ --input-disable-text-xspector: rgba(145 158 171 / 0.52);
1971
+ --input-disable-text-report-xspector-light-mode: #919eab;
1972
+ --input-disable-text-skyller: #a3a3a3;
1973
+ --input-disable-stroke-xspector: rgba(145 158 171 / 0.08);
1974
+ --input-disable-stroke-report-xspector-light-mode: #e7ebed;
1975
+ --input-disable-stroke-skyller: #d4d4d4;
1976
+ --input-disable-bg-xspector: rgba(145 158 171 / 0.04);
1977
+ --input-disable-bg-report-xspector-light-mode: #f2f5f5;
1978
+ --input-disable-bg-skyller: #f5f5f5;
1979
+ --input-label-bg-xspector: #2d2e30;
1980
+ --input-label-bg-report-xspector-light-mode: #ffffff;
1981
+ --input-label-bg-skyller: #ffffff;
1982
+ --input-error-xspector: #ff4d35;
1983
+ --input-error-report-xspector-light-mode: #ed2f15;
1984
+ --input-error-skyller: #dc2626;
1985
+ --function-default-solid-xspector: #ececec;
1986
+ --function-default-solid-report-xspector-light-mode: #1e3249;
1987
+ --function-default-solid-skyller: #2563eb;
1988
+ --function-default-hover-xspector: #fafafa;
1989
+ --function-default-hover-report-xspector-light-mode: #35475b;
1990
+ --function-default-hover-skyller: #90c0fc;
1991
+ --function-default-hover-bg-xspector: rgba(250 250 250 / 0.08);
1992
+ --function-default-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
1993
+ --function-default-hover-bg-skyller: rgba(144 192 252 / 0.08);
1994
+ --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
1995
+ --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
1996
+ --function-default-stroke-skyller: rgba(189 189 189 / 0.48);
1997
+ --function-default-icon-xspector: #212b36;
1998
+ --function-default-icon-report-xspector-light-mode: #ffffff;
1999
+ --function-default-icon-skyller: #ffffff;
2000
+ --function-default-outline-icon-xspector: #9e9e9e;
2001
+ --function-default-outline-icon-report-xspector-light-mode: #1e3249;
2002
+ --function-default-outline-icon-skyller: #2563eb;
2003
+ --function-active-solid-xspector: #b1a400;
2004
+ --function-active-solid-report-xspector-light-mode: #9b8f00;
2005
+ --function-active-solid-skyller: #2563eb;
2006
+ --function-active-hover-xspector: #ddcd00;
2007
+ --function-active-hover-report-xspector-light-mode: #b1a400;
2008
+ --function-active-hover-skyller: #90c0fc;
2009
+ --function-active-hover-bg-xspector: rgba(221 205 0 / 0.08);
2010
+ --function-active-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
2011
+ --function-active-hover-bg-skyller: rgba(144 192 252 / 0.08);
2012
+ --function-active-stroke-xspector: rgba(177 164 0 / 0.48);
2013
+ --function-active-stroke-report-xspector-light-mode: rgba(177 164 0 / 0.48);
2014
+ --function-active-stroke-skyller: rgba(37 99 235 / 0.48);
2015
+ --function-active-icon-xspector: #212b36;
2016
+ --function-active-icon-report-xspector-light-mode: #ffffff;
2017
+ --function-active-icon-skyller: #ffffff;
2018
+ --common-white-xspector: #ffffff;
2019
+ --common-white-report-xspector-light-mode: #ffffff;
2020
+ --common-white-skyller: #ffffff;
2021
+ --common-black-xspector: #000000;
2022
+ --common-black-report-xspector-light-mode: #000000;
2023
+ --common-black-skyller: #000000;
2024
+ --brand-rvl-yellow-xspector: #ddcd00;
2025
+ --brand-rvl-yellow-report-xspector-light-mode: #ddcd00;
2026
+ --brand-rvl-yellow-skyller: #fbbf24;
2027
+ --brand-rvl-grey-xspector: #9e9e9e;
2028
+ --brand-rvl-grey-report-xspector-light-mode: #9e9e9e;
2029
+ --brand-rvl-grey-skyller: #d4d4d4;
2030
+ --others-1-xspector: #1158c7;
2031
+ --others-1-report-xspector-light-mode: #1158c7;
2032
+ --others-1-skyller: #1158c7;
2033
+ --others-2-xspector: #206feb;
2034
+ --others-2-report-xspector-light-mode: #206feb;
2035
+ --others-2-skyller: #206feb;
2036
+ --others-3-xspector: #388bfd;
2037
+ --others-3-report-xspector-light-mode: #388bfd;
2038
+ --others-3-skyller: #388bfd;
2039
+ --others-4-xspector: #58a6ff;
2040
+ --others-4-report-xspector-light-mode: #58a6ff;
2041
+ --others-4-skyller: #58a6ff;
2042
+ --others-5-xspector: #79c0ff;
2043
+ --others-5-report-xspector-light-mode: #79c0ff;
2044
+ --others-5-skyller: #79c0ff;
2045
+ --others-6-xspector: #6e40c9;
2046
+ --others-6-report-xspector-light-mode: #6e40c9;
2047
+ --others-6-skyller: #6e40c9;
2048
+ --others-7-xspector: #8957e5;
2049
+ --others-7-report-xspector-light-mode: #8957e5;
2050
+ --others-7-skyller: #8957e5;
2051
+ --others-8-xspector: #a371f7;
2052
+ --others-8-report-xspector-light-mode: #a371f7;
2053
+ --others-8-skyller: #a371f7;
2054
+ --others-9-xspector: #bc8cff;
2055
+ --others-9-report-xspector-light-mode: #bc8cff;
2056
+ --others-9-skyller: #bc8cff;
2057
+ --others-10-xspector: #d2a8ff;
2058
+ --others-10-report-xspector-light-mode: #d2a8ff;
2059
+ --others-10-skyller: #d2a8ff;
2060
+ --others-11-xspector: #7d2457;
2061
+ --others-11-report-xspector-light-mode: #7d2457;
2062
+ --others-11-skyller: #7d2457;
2063
+ --others-12-xspector: #9e3670;
2064
+ --others-12-report-xspector-light-mode: #9e3670;
2065
+ --others-12-skyller: #9e3670;
2066
+ --others-13-xspector: #bf4b8a;
2067
+ --others-13-report-xspector-light-mode: #bf4b8a;
2068
+ --others-13-skyller: #bf4b8a;
2069
+ --others-14-xspector: #db61a2;
2070
+ --others-14-report-xspector-light-mode: #db61a2;
2071
+ --others-14-skyller: #db61a2;
2072
+ --others-15-xspector: #f778ba;
2073
+ --others-15-report-xspector-light-mode: #f778ba;
2074
+ --others-15-skyller: #f778ba;
2075
+ --others-16-xspector: #8e1619;
2076
+ --others-16-report-xspector-light-mode: #8e1619;
2077
+ --others-16-skyller: #8e1619;
2078
+ --others-17-xspector: #b62324;
2079
+ --others-17-report-xspector-light-mode: #b62324;
2080
+ --others-17-skyller: #b62324;
2081
+ --others-18-xspector: #da3633;
2082
+ --others-18-report-xspector-light-mode: #da3633;
2083
+ --others-18-skyller: #da3633;
2084
+ --others-19-xspector: #f85149;
2085
+ --others-19-report-xspector-light-mode: #f85149;
2086
+ --others-19-skyller: #f85149;
2087
+ --others-20-xspector: #ff7b72;
2088
+ --others-20-report-xspector-light-mode: #ff7b72;
2089
+ --others-20-skyller: #ff7b72;
2090
+ --others-21-xspector: #9b4216;
2091
+ --others-21-report-xspector-light-mode: #9b4216;
2092
+ --others-21-skyller: #9b4216;
2093
+ --others-22-xspector: #bd561d;
2094
+ --others-22-report-xspector-light-mode: #bd561d;
2095
+ --others-22-skyller: #bd561d;
2096
+ --others-23-xspector: #db6d28;
2097
+ --others-23-report-xspector-light-mode: #db6d28;
2098
+ --others-23-skyller: #db6d28;
2099
+ --others-24-xspector: #f0883e;
2100
+ --others-24-report-xspector-light-mode: #f0883e;
2101
+ --others-24-skyller: #f0883e;
2102
+ --others-25-xspector: #ffa657;
2103
+ --others-25-report-xspector-light-mode: #ffa657;
2104
+ --others-25-skyller: #ffa657;
2105
+ --others-26-xspector: #825303;
2106
+ --others-26-report-xspector-light-mode: #825303;
2107
+ --others-26-skyller: #825303;
2108
+ --others-27-xspector: #9e6a03;
2109
+ --others-27-report-xspector-light-mode: #9e6a03;
2110
+ --others-27-skyller: #9e6a03;
2111
+ --others-28-xspector: #bb800a;
2112
+ --others-28-report-xspector-light-mode: #bb800a;
2113
+ --others-28-skyller: #bb800a;
2114
+ --others-29-xspector: #d29922;
2115
+ --others-29-report-xspector-light-mode: #d29922;
2116
+ --others-29-skyller: #d29922;
2117
+ --others-30-xspector: #e3b341;
2118
+ --others-30-report-xspector-light-mode: #e3b341;
2119
+ --others-30-skyller: #e3b341;
2120
+ --others-31-xspector: #186c2e;
2121
+ --others-31-report-xspector-light-mode: #186c2e;
2122
+ --others-31-skyller: #186c2e;
2123
+ --others-32-xspector: #228636;
2124
+ --others-32-report-xspector-light-mode: #228636;
2125
+ --others-32-skyller: #228636;
2126
+ --others-33-xspector: #2ea043;
2127
+ --others-33-report-xspector-light-mode: #2ea043;
2128
+ --others-33-skyller: #2ea043;
2129
+ --others-34-xspector: #3fb950;
2130
+ --others-34-report-xspector-light-mode: #3fb950;
2131
+ --others-34-skyller: #3fb950;
2132
+ --others-35-xspector: #56d364;
2133
+ --others-35-report-xspector-light-mode: #56d364;
2134
+ --others-35-skyller: #56d364;
2135
+ --brand-new-blue-bg-xspector: #091d33;
2136
+ --brand-new-blue-bg-report-xspector-light-mode: #091d33;
2137
+ --brand-new-blue-bg-skyller: #dbeafe;
2138
+ /* BUTTON RADIUS */
2139
+ --button-l-round: 8px;
2140
+ --button-l-rem-round: 0.5rem;
2141
+ --button-l-capsule: 56px;
2142
+ --button-l-rem-capsule: 3.5rem;
2143
+ --button-m-round: 8px;
2144
+ --button-m-rem-round: 0.5rem;
2145
+ --button-m-capsule: 38px;
2146
+ --button-m-rem-capsule: 2.375rem;
2147
+ --button-s-round: 6px;
2148
+ --button-s-rem-round: 0.375rem;
2149
+ --button-s-capsule: 30px;
2150
+ --button-s-rem-capsule: 1.875rem;
2151
+ --function-button-l-round: 8px;
2152
+ --function-button-l-rem-round: 0.5rem;
2153
+ --function-button-l-capsule: 56px;
2154
+ --function-button-l-rem-capsule: 3.5rem;
2155
+ --function-button-m-round: 8px;
2156
+ --function-button-m-rem-round: 0.5rem;
2157
+ --function-button-m-capsule: 38px;
2158
+ --function-button-m-rem-capsule: 2.375rem;
2159
+ --function-button-s-round: 6px;
2160
+ --function-button-s-rem-round: 0.375rem;
2161
+ --function-button-s-capsule: 30px;
2162
+ --function-button-s-rem-capsule: 1.875rem;
2163
+ --function-button-xs-round: 4px;
2164
+ --function-button-xs-rem-round: 0.25rem;
2165
+ --function-button-xs-capsule: 18px;
2166
+ --function-button-xs-rem-capsule: 1.125rem;
2167
+ --function-button-xxs-round: 2px;
2168
+ --function-button-xxs-rem-round: 0.125rem;
2169
+ --function-button-xxs-capsule: 12px;
2170
+ --function-button-xxs-rem-capsule: 0.75rem;
2171
+ }
2172
+
2173
+ :root[data-theme="xspector"] {
1239
2174
  /* ------------------------------------------------------------------ */
1240
- /* State Tokens */
2175
+ /* Color Ramps — from variable_lasted.css */
1241
2176
  /* ------------------------------------------------------------------ */
1242
- /* Naming Convention: --state-color-[theme]-[element?]-[state] */
1243
- /* States: [default, hover, pressed, disabled] */
1244
- --state-color-primary-default: #b1a400;
1245
- --state-color-primary-hover: #ddcd00;
1246
- --state-color-primary-stroke: rgba(177 164 0 / 0.48);
1247
- --state-color-primary-hover-bg: rgba(221 205 0 / 0.08);
1248
- --state-color-primary-pressed: #6f6700;
1249
- --state-color-primary-active: #ddcd00;
1250
- --state-color-primary-text-solid: #212B36;
1251
- --state-color-primary-text-outline: #b1a400;
1252
- --state-color-primary-text-hover: #ddcd00;
1253
- --state-color-primary-text-pressed: #6f6700;
1254
- --state-color-secondary-default: #ececec;
1255
- --state-color-secondary-hover: #fafafa;
1256
- --state-color-secondary-stroke: rgba(236 236 236 / 0.48);
1257
- --state-color-secondary-hover-bg: rgba(250 250 250 / 0.08);
1258
- --state-color-secondary-pressed: #bbbbbb;
1259
- --state-color-secondary-active: #fafafa;
1260
- --state-color-secondary-text-solid: #212B36;
1261
- --state-color-secondary-text-outline: #ececec;
1262
- --state-color-secondary-text-hover: #fafafa;
1263
- --state-color-secondary-text-pressed: #bbbbbb;
1264
- --state-color-tertiary-default: #8aa2ab;
1265
- --state-color-tertiary-hover: #adcad6;
1266
- --state-color-tertiary-stroke: rgba(138 162 171 / 0.48);
1267
- --state-color-tertiary-hover-bg: rgba(173 202 214 / 0.08);
1268
- --state-color-tertiary-pressed: #57656b;
1269
- --state-color-tertiary-active: #adcad6;
1270
- --state-color-tertiary-text-solid: #212B36;
1271
- --state-color-tertiary-text-outline: #8aa2ab;
1272
- --state-color-tertiary-text-hover: #adcad6;
1273
- --state-color-tertiary-text-pressed: #57656b;
1274
- --state-color-info-default: #1b7df5;
1275
- --state-color-info-hover: #2998ff;
1276
- --state-color-info-stroke: rgba(27 125 245 / 0.48);
1277
- --state-color-info-hover-bg: rgba(41 152 255 / 0.08);
1278
- --state-color-info-pressed: #1752b6;
1279
- --state-color-info-active: #2998ff;
1280
- --state-color-info-text-solid: #ffffff;
1281
- --state-color-info-text-outline: #1b7df5;
1282
- --state-color-info-text-hover: #2998ff;
1283
- --state-color-info-text-pressed: #1752b6;
1284
- --state-color-success-default: #319917;
1285
- --state-color-success-hover: #44c022;
1286
- --state-color-success-stroke: rgba(49 153 23 / 0.48);
1287
- --state-color-success-hover-bg: rgba(84 214 44 / 0.08);
1288
- --state-color-success-pressed: #235d17;
1289
- --state-color-success-active: #44c022;
1290
- --state-color-success-text-solid: #ffffff;
1291
- --state-color-success-text-outline: #319917;
1292
- --state-color-success-text-hover: #44c022;
1293
- --state-color-success-text-pressed: #235d17;
1294
- --state-color-warning-default: #ffc107;
1295
- --state-color-warning-hover: #ffdf1b;
1296
- --state-color-warning-stroke: rgba(255 193 7 / 0.48);
1297
- --state-color-warning-hover-bg: rgba(255 193 7 / 0.08);
1298
- --state-color-warning-pressed: #985108;
1299
- --state-color-warning-active: #ffc107;
1300
- --state-color-warning-text-solid: #ffffff;
1301
- --state-color-warning-text-outline: #ffc107;
1302
- --state-color-warning-text-hover: #ffdf1b;
1303
- --state-color-warning-text-pressed: #985108;
1304
- --state-color-error-default: #ed2f15;
1305
- --state-color-error-hover: #ff4d35;
1306
- --state-color-error-stroke: rgba(237 47 21 / 0.48);
1307
- --state-color-error-hover-bg: rgba(255 77 53 / 0.08);
1308
- --state-color-error-pressed: #a5210f;
1309
- --state-color-error-active: #ff4d35;
1310
- --state-color-error-text-solid: #ffffff;
1311
- --state-color-error-text-outline: #ed2f15;
1312
- --state-color-error-text-hover: #ff4d35;
1313
- --state-color-error-text-pressed: #a5210f;
1314
- --state-color-disable-solid: #454f5b;
1315
- --state-color-disable-outline: #637381;
1316
- /* Base from design */
1317
- --input-color-default-text: #9e9e9e;
1318
- --input-color-default-stroke: rgba(158 158 158 / 0.24);
1319
- --input-color-filled-text: #dfe3e8;
1320
- --input-color-active-stroke: rgba(158 158 158 / 0.48);
1321
- --input-color-disable-text: rgba(145 158 171 / 0.52);
1322
- --input-color-disable-stroke: rgba(145 158 171 / 0.08);
1323
- --input-color-disable-bg: rgba(145 158 171 / 0.04);
1324
- --input-color-label-bg: #2d2e30;
1325
- --input-color-error: #ff4d35;
2177
+ /* Primary */
2178
+ --primary-ramps-primary-5: var(--ramps-primary-5-xspector);
2179
+ --primary-ramps-primary-10: var(--ramps-primary-10-xspector);
2180
+ --primary-ramps-primary-20: var(--ramps-primary-20-xspector);
2181
+ --primary-ramps-primary-30: var(--ramps-primary-30-xspector);
2182
+ --primary-ramps-primary-40: var(--ramps-primary-40-xspector);
2183
+ --primary-ramps-primary-50: var(--ramps-primary-50-xspector);
2184
+ --primary-ramps-primary-60: var(--ramps-primary-60-xspector);
2185
+ --primary-ramps-primary-70: var(--ramps-primary-70-xspector);
2186
+ --primary-ramps-primary-80: var(--ramps-primary-80-xspector);
2187
+ --primary-ramps-primary-90: var(--ramps-primary-90-xspector);
2188
+ --primary-ramps-primary-100: var(--ramps-primary-100-xspector);
2189
+ --primary-ramps-primary-110: var(--ramps-primary-110-xspector);
2190
+ --primary-ramps-primary-120: var(--ramps-primary-120-xspector);
2191
+ --primary-ramps-primary-130: var(--ramps-primary-130-xspector);
2192
+ --primary-ramps-primary-140: var(--ramps-primary-140-xspector);
2193
+ --primary-ramps-primary-150: var(--ramps-primary-150-xspector);
2194
+ /* Secondary */
2195
+ --secondary-ramps-secondary-5: var(--ramps-secondary-5-xspector);
2196
+ --secondary-ramps-secondary-10: var(--ramps-secondary-10-xspector);
2197
+ --secondary-ramps-secondary-20: var(--ramps-secondary-20-xspector);
2198
+ --secondary-ramps-secondary-30: var(--ramps-secondary-30-xspector);
2199
+ --secondary-ramps-secondary-40: var(--ramps-secondary-40-xspector);
2200
+ --secondary-ramps-secondary-50: var(--ramps-secondary-50-xspector);
2201
+ --secondary-ramps-secondary-60: var(--ramps-secondary-60-xspector);
2202
+ --secondary-ramps-secondary-70: var(--ramps-secondary-70-xspector);
2203
+ --secondary-ramps-secondary-80: var(--ramps-secondary-80-xspector);
2204
+ --secondary-ramps-secondary-90: var(--ramps-secondary-90-xspector);
2205
+ --secondary-ramps-secondary-100: var(--ramps-secondary-100-xspector);
2206
+ --secondary-ramps-secondary-110: var(--ramps-secondary-110-xspector);
2207
+ --secondary-ramps-secondary-120: var(--ramps-secondary-120-xspector);
2208
+ --secondary-ramps-secondary-130: var(--ramps-secondary-130-xspector);
2209
+ --secondary-ramps-secondary-140: var(--ramps-secondary-140-xspector);
2210
+ --secondary-ramps-secondary-150: var(--ramps-secondary-150-xspector);
2211
+ /* Tertiary */
2212
+ --tertiary-ramps-tertiary-5: var(--ramps-tertiary-5-xspector);
2213
+ --tertiary-ramps-tertiary-10: var(--ramps-tertiary-10-xspector);
2214
+ --tertiary-ramps-tertiary-20: var(--ramps-tertiary-20-xspector);
2215
+ --tertiary-ramps-tertiary-30: var(--ramps-tertiary-30-xspector);
2216
+ --tertiary-ramps-tertiary-40: var(--ramps-tertiary-40-xspector);
2217
+ --tertiary-ramps-tertiary-50: var(--ramps-tertiary-50-xspector);
2218
+ --tertiary-ramps-tertiary-60: var(--ramps-tertiary-60-xspector);
2219
+ --tertiary-ramps-tertiary-70: var(--ramps-tertiary-70-xspector);
2220
+ --tertiary-ramps-tertiary-80: var(--ramps-tertiary-80-xspector);
2221
+ --tertiary-ramps-tertiary-90: var(--ramps-tertiary-90-xspector);
2222
+ --tertiary-ramps-tertiary-100: var(--ramps-tertiary-100-xspector);
2223
+ --tertiary-ramps-tertiary-110: var(--ramps-tertiary-110-xspector);
2224
+ --tertiary-ramps-tertiary-120: var(--ramps-tertiary-120-xspector);
2225
+ --tertiary-ramps-tertiary-130: var(--ramps-tertiary-130-xspector);
2226
+ --tertiary-ramps-tertiary-140: var(--ramps-tertiary-140-xspector);
2227
+ --tertiary-ramps-tertiary-150: var(--ramps-tertiary-150-xspector);
2228
+ /* Grey */
2229
+ --grey-grey-5: var(--ramps-grey-5-xspector);
2230
+ --grey-grey-10: var(--ramps-grey-10-xspector);
2231
+ --grey-grey-20: var(--ramps-grey-20-xspector);
2232
+ --grey-grey-30: var(--ramps-grey-30-xspector);
2233
+ --grey-grey-40: var(--ramps-grey-40-xspector);
2234
+ --grey-grey-50: var(--ramps-grey-50-xspector);
2235
+ --grey-grey-60: var(--ramps-grey-60-xspector);
2236
+ --grey-grey-70: var(--ramps-grey-70-xspector);
2237
+ --grey-grey-80: var(--ramps-grey-80-xspector);
2238
+ --grey-grey-90: var(--ramps-grey-90-xspector);
2239
+ --grey-grey-100: var(--ramps-grey-100-xspector);
2240
+ --grey-grey-110: var(--ramps-grey-110-xspector);
2241
+ --grey-grey-120: var(--ramps-grey-120-xspector);
2242
+ --grey-grey-130: var(--ramps-grey-130-xspector);
2243
+ --grey-grey-140: var(--ramps-grey-140-xspector);
2244
+ --grey-grey-150: var(--ramps-grey-150-xspector);
2245
+ /* Grey2 */
2246
+ --grey2-grey2-50: var(--ramps-grey2-50-xspector);
2247
+ --grey2-grey2-100: var(--ramps-grey2-100-xspector);
2248
+ --grey2-grey2-200: var(--ramps-grey2-200-xspector);
2249
+ --grey2-grey2-300: var(--ramps-grey2-300-xspector);
2250
+ --grey2-grey2-400: var(--ramps-grey2-400-xspector);
2251
+ --grey2-grey2-500: var(--ramps-grey2-500-xspector);
2252
+ --grey2-grey2-600: var(--ramps-grey2-600-xspector);
2253
+ --grey2-grey2-700: var(--ramps-grey2-700-xspector);
2254
+ --grey2-grey2-800: var(--ramps-grey2-800-xspector);
2255
+ --grey2-grey2-900: var(--ramps-grey2-900-xspector);
2256
+ --grey2-grey2-950: var(--ramps-grey2-950-xspector);
2257
+ /* Info */
2258
+ --info-info-50: var(--ramps-info-50-xspector);
2259
+ --info-info-100: var(--ramps-info-100-xspector);
2260
+ --info-info-200: var(--ramps-info-200-xspector);
2261
+ --info-info-300: var(--ramps-info-300-xspector);
2262
+ --info-info-400: var(--ramps-info-400-xspector);
2263
+ --info-info-500: var(--ramps-info-500-xspector);
2264
+ --info-info-600: var(--ramps-info-600-xspector);
2265
+ --info-info-700: var(--ramps-info-700-xspector);
2266
+ --info-info-800: var(--ramps-info-800-xspector);
2267
+ --info-info-900: var(--ramps-info-900-xspector);
2268
+ --info-info-950: var(--ramps-info-950-xspector);
2269
+ /* Success */
2270
+ --success-success-50: var(--ramps-success-50-xspector);
2271
+ --success-success-100: var(--ramps-success-100-xspector);
2272
+ --success-success-200: var(--ramps-success-200-xspector);
2273
+ --success-success-300: var(--ramps-success-300-xspector);
2274
+ --success-success-400: var(--ramps-success-400-xspector);
2275
+ --success-success-500: var(--ramps-success-500-xspector);
2276
+ --success-success-600: var(--ramps-success-600-xspector);
2277
+ --success-success-700: var(--ramps-success-700-xspector);
2278
+ --success-success-800: var(--ramps-success-800-xspector);
2279
+ --success-success-900: var(--ramps-success-900-xspector);
2280
+ --success-success-950: var(--ramps-success-950-xspector);
2281
+ /* Warning */
2282
+ --warning-warning-50: var(--ramps-warning-50-xspector);
2283
+ --warning-warning-100: var(--ramps-warning-100-xspector);
2284
+ --warning-warning-200: var(--ramps-warning-200-xspector);
2285
+ --warning-warning-300: var(--ramps-warning-300-xspector);
2286
+ --warning-warning-400: var(--ramps-warning-400-xspector);
2287
+ --warning-warning-500: var(--ramps-warning-500-xspector);
2288
+ --warning-warning-600: var(--ramps-warning-600-xspector);
2289
+ --warning-warning-700: var(--ramps-warning-700-xspector);
2290
+ --warning-warning-800: var(--ramps-warning-800-xspector);
2291
+ --warning-warning-900: var(--ramps-warning-900-xspector);
2292
+ --warning-warning-950: var(--ramps-warning-950-xspector);
2293
+ /* Error */
2294
+ --error-error-50: var(--ramps-error-50-xspector);
2295
+ --error-error-100: var(--ramps-error-100-xspector);
2296
+ --error-error-200: var(--ramps-error-200-xspector);
2297
+ --error-error-300: var(--ramps-error-300-xspector);
2298
+ --error-error-400: var(--ramps-error-400-xspector);
2299
+ --error-error-500: var(--ramps-error-500-xspector);
2300
+ --error-error-600: var(--ramps-error-600-xspector);
2301
+ --error-error-700: var(--ramps-error-700-xspector);
2302
+ --error-error-800: var(--ramps-error-800-xspector);
2303
+ --error-error-900: var(--ramps-error-900-xspector);
2304
+ --error-error-950: var(--ramps-error-950-xspector);
2305
+ /* ------------------------------------------------------------------ */
2306
+ /* State Tokens — from variable_lasted.css */
2307
+ /* ------------------------------------------------------------------ */
2308
+ /* Maps --state-color-* (code) → --state-*-xspector (Figma export) */
2309
+ /* Primary */
2310
+ --state-color-primary-default: var(--state-primary-default-xspector);
2311
+ --state-color-primary-hover: var(--state-primary-hover-xspector);
2312
+ --state-color-primary-stroke: var(--state-primary-stroke-xspector);
2313
+ --state-color-primary-hover-bg: var(--state-primary-hover-bg-xspector);
2314
+ --state-color-primary-pressed: var(--state-primary-pressed-xspector);
2315
+ --state-color-primary-active: var(--state-primary-active-xspector);
2316
+ --state-color-primary-text-solid: var(--state-primary-text-solid-xspector);
2317
+ --state-color-primary-text-outline: var(--state-primary-text-outline-xspector);
2318
+ --state-color-primary-text-hover: var(--state-primary-text-hover-xspector);
2319
+ --state-color-primary-text-pressed: var(--state-primary-text-pressed-xspector);
2320
+ /* Secondary */
2321
+ --state-color-secondary-default: var(--state-secondary-default-xspector);
2322
+ --state-color-secondary-hover: var(--state-secondary-hover-xspector);
2323
+ --state-color-secondary-stroke: var(--state-secondary-stroke-xspector);
2324
+ --state-color-secondary-hover-bg: var(--state-secondary-hover-bg-xspector);
2325
+ --state-color-secondary-pressed: var(--state-secondary-pressed-xspector);
2326
+ --state-color-secondary-active: var(--state-secondary-active-xspector);
2327
+ --state-color-secondary-text-solid: var(--state-secondary-text-solid-xspector);
2328
+ --state-color-secondary-text-outline: var(--state-secondary-text-outline-xspector);
2329
+ --state-color-secondary-text-hover: var(--state-secondary-text-hover-xspector);
2330
+ --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-xspector);
2331
+ /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
2332
+ --state-color-tertiary-default: var(--state-tertiery-default-xspector);
2333
+ --state-color-tertiary-hover: var(--state-tertiery-hover-xspector);
2334
+ --state-color-tertiary-stroke: var(--state-tertiery-stroke-xspector);
2335
+ --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-xspector);
2336
+ --state-color-tertiary-pressed: var(--state-tertiery-pressed-xspector);
2337
+ --state-color-tertiary-active: var(--state-tertiery-active-xspector);
2338
+ --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-xspector);
2339
+ --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-xspector);
2340
+ --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-xspector);
2341
+ --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-xspector);
2342
+ /* Info */
2343
+ --state-color-info-default: var(--state-info-default-xspector);
2344
+ --state-color-info-hover: var(--state-info-hover-xspector);
2345
+ --state-color-info-stroke: var(--state-info-stroke-xspector);
2346
+ --state-color-info-hover-bg: var(--state-info-hover-bg-xspector);
2347
+ --state-color-info-pressed: var(--state-info-pressed-xspector);
2348
+ --state-color-info-active: var(--state-info-active-xspector);
2349
+ --state-color-info-text-solid: var(--state-info-text-solid-xspector);
2350
+ --state-color-info-text-outline: var(--state-info-text-outline-xspector);
2351
+ --state-color-info-text-hover: var(--state-info-text-hover-xspector);
2352
+ --state-color-info-text-pressed: var(--state-info-text-pressed-xspector);
2353
+ /* Success */
2354
+ --state-color-success-default: var(--state-success-default-xspector);
2355
+ --state-color-success-hover: var(--state-success-hover-xspector);
2356
+ --state-color-success-stroke: var(--state-success-stroke-xspector);
2357
+ --state-color-success-hover-bg: var(--state-success-hover-bg-xspector);
2358
+ --state-color-success-pressed: var(--state-success-pressed-xspector);
2359
+ --state-color-success-active: var(--state-success-active-xspector);
2360
+ --state-color-success-text-solid: var(--state-success-text-solid-xspector);
2361
+ --state-color-success-text-outline: var(--state-success-text-outline-xspector);
2362
+ --state-color-success-text-hover: var(--state-success-text-hover-xspector);
2363
+ --state-color-success-text-pressed: var(--state-success-text-pressed-xspector);
2364
+ /* Warning */
2365
+ --state-color-warning-default: var(--state-warning-default-xspector);
2366
+ --state-color-warning-hover: var(--state-warning-hover-xspector);
2367
+ --state-color-warning-stroke: var(--state-warning-stroke-xspector);
2368
+ --state-color-warning-hover-bg: var(--state-warning-hover-bg-xspector);
2369
+ --state-color-warning-pressed: var(--state-warning-pressed-xspector);
2370
+ --state-color-warning-active: var(--state-warning-active-xspector);
2371
+ --state-color-warning-text-solid: var(--state-warning-text-solid-xspector);
2372
+ --state-color-warning-text-outline: var(--state-warning-text-outline-xspector);
2373
+ --state-color-warning-text-hover: var(--state-warning-text-hover-xspector);
2374
+ --state-color-warning-text-pressed: var(--state-warning-text-pressed-xspector);
2375
+ /* Error */
2376
+ --state-color-error-default: var(--state-error-default-xspector);
2377
+ --state-color-error-hover: var(--state-error-hover-xspector);
2378
+ --state-color-error-stroke: var(--state-error-stroke-xspector);
2379
+ --state-color-error-hover-bg: var(--state-error-hover-bg-xspector);
2380
+ --state-color-error-pressed: var(--state-error-pressed-xspector);
2381
+ --state-color-error-active: var(--state-error-active-xspector);
2382
+ --state-color-error-text-solid: var(--state-error-text-solid-xspector);
2383
+ --state-color-error-text-outline: var(--state-error-text-outline-xspector);
2384
+ --state-color-error-text-hover: var(--state-error-text-hover-xspector);
2385
+ --state-color-error-text-pressed: var(--state-error-text-pressed-xspector);
2386
+ /* Disable */
2387
+ --state-color-disable-solid: var(--state-disable-solid-xspector);
2388
+ --state-color-disable-outline: var(--state-disable-outline-xspector);
2389
+ /* ------------------------------------------------------------------ */
2390
+ /* Semantic Colors — from variable_lasted.css */
2391
+ /* ------------------------------------------------------------------ */
2392
+ /* Input */
2393
+ --input-color-default-text: var(--input-default-text-xspector);
2394
+ --input-color-default-stroke: var(--input-default-stroke-xspector);
2395
+ --input-color-filled-text: var(--input-filled-text-xspector);
2396
+ --input-color-active-stroke: var(--input-active-stroke-xspector);
2397
+ --input-color-disable-text: var(--input-disable-text-xspector);
2398
+ --input-color-disable-stroke: var(--input-disable-stroke-xspector);
2399
+ --input-color-disable-bg: var(--input-disable-bg-xspector);
2400
+ --input-color-label-bg: var(--input-label-bg-xspector);
2401
+ --input-color-error: var(--input-error-xspector);
1326
2402
  /* Function button */
1327
- --function-default-solid: #ececec;
1328
- --function-default-hover: #fafafa;
1329
- --function-default-hover-bg: rgba(250 250 250 / 0.08);
1330
- --function-default-stroke: rgba(158 158 158 / 0.24);
1331
- --function-default-icon: #212b36;
1332
- --function-default-outline-icon: #9e9e9e;
1333
- --function-active-solid: #b1a400;
1334
- --function-active-hover: #ddcd00;
1335
- --function-active-hover-bg: rgba(221 205 0 / 0.08);
1336
- --function-active-stroke: rgba(177 164 0 / 0.48);
1337
- --function-active-icon: #212b36;
1338
- --text-dark: #212b36;
1339
- --text-medium: #637381;
1340
- --text-light: #919eab;
1341
- --text-grey-dark: #7e7e7e;
1342
- --text-grey-medium: #aaaaaa;
1343
- --text-grey-light: #dfe3e8;
1344
- --text-white: #ffffff;
1345
- --base-color-bg: #202427;
1346
- --base-color-bg2: #282c31;
1347
- --base-color-bg3: #d8d8d8;
1348
- --base-color-workspace-stroke: #e2e2e2;
1349
- --base-color-guideline-stroke: #c5c5c5;
1350
- --base-color-popup: #2d2e30;
1351
- --base-color-popup-hightlight: #343638;
1352
- --base-color-popup-curtain: rgba(0 0 0 / 0.6);
1353
- --common-white: #ffffff;
1354
- --common-black: #000000;
1355
- --dashboard-panel-bg-grey: rgba(145 158 171 / 0.08);
1356
- --dashboard-panel-bg-white: rgba(255 255 255 / 0.08);
1357
- --dashboard-panel-border: rgba(168 162 168 / 0.24);
1358
- /* ------- Addon base ---------- */
2403
+ --function-default-solid: var(--function-default-solid-xspector);
2404
+ --function-default-hover: var(--function-default-hover-xspector);
2405
+ --function-default-hover-bg: var(--function-default-hover-bg-xspector);
2406
+ --function-default-stroke: var(--function-default-stroke-xspector);
2407
+ --function-default-icon: var(--function-default-icon-xspector);
2408
+ --function-default-outline-icon: var(--function-default-outline-icon-xspector);
2409
+ --function-active-solid: var(--function-active-solid-xspector);
2410
+ --function-active-hover: var(--function-active-hover-xspector);
2411
+ --function-active-hover-bg: var(--function-active-hover-bg-xspector);
2412
+ --function-active-stroke: var(--function-active-stroke-xspector);
2413
+ --function-active-icon: var(--function-active-icon-xspector);
2414
+ /* Text */
2415
+ --text-black: var(--text-black-xspector);
2416
+ --text-dark: var(--text-dark-xspector);
2417
+ --text-medium: var(--text-medium-xspector);
2418
+ --text-light: var(--text-light-xspector);
2419
+ --text-grey-dark: var(--text-grey-dark-xspector);
2420
+ --text-grey-medium: var(--text-grey-medium-xspector);
2421
+ --text-grey-light: var(--text-grey-light-xspector);
2422
+ --text-white: var(--text-white-xspector);
2423
+ /* Base */
2424
+ --base-color-bg: var(--base-bg-bg1-xspector);
2425
+ --base-color-bg2: var(--base-bg-bg2-xspector);
2426
+ --base-color-bg3: var(--base-bg-bg3-xspector);
2427
+ --base-color-workspace-stroke: var(--base-bg-stroke1-xspector);
2428
+ --base-color-guideline-stroke: var(--base-bg-stroke2-xspector);
2429
+ --base-color-popup: var(--base-modal-modal-xspector);
2430
+ --base-color-popup-hightlight: var(--base-modal-modal-hightlight-xspector);
2431
+ --base-color-popup-curtain: var(--base-modal-modal-curtain-xspector);
2432
+ --common-white: var(--common-white-xspector);
2433
+ --common-black: var(--common-black-xspector);
2434
+ /* Addon */
1359
2435
  --background: var(--base-color-bg);
1360
2436
  --foreground: var(--common-white);
1361
2437
  --primary: var(--primary-ramps-primary-100);
@@ -1368,12 +2444,12 @@
1368
2444
  --grey: var(--grey-grey-100);
1369
2445
  --grey2: var(--grey2-grey2-100);
1370
2446
  --primary-foreground: var(--state-color-primary-text-solid);
1371
- --secondary-foreground: var(--state-color-secondary-text-solid);
2447
+ --secondary-foreground: var(--state-color-secondary-text-solid);
1372
2448
  --tertiary-foreground: var(--state-color-tertiary-text-solid);
1373
2449
  --info-foreground: var(--state-color-info-text-solid);
1374
- --success-foreground: var(--state-color-success-text-solid);
1375
- --warning-foreground: var(--state-color-warning-text-solid);
1376
- --error-foreground: var(--state-color-error-text-solid);
2450
+ --success-foreground: var(--state-color-success-text-solid);
2451
+ --warning-foreground: var(--state-color-warning-text-solid);
2452
+ --error-foreground: var(--state-color-error-text-solid);
1377
2453
  --grey-foreground: var(--common-black);
1378
2454
  --grey2-foreground: var(--common-black);
1379
2455
  --surface: var(--base-color-bg);
@@ -1381,72 +2457,86 @@
1381
2457
  --primary-foreground: var(--common-white);
1382
2458
  --secondary-foreground: var(--common-white);
1383
2459
  --base-color-popup-foreground: var(--text-grey-light);
1384
- --main-transparency-primary-8: rgba(221 205 0 / 0.08);
1385
- --main-transparency-primary-12: rgba(221 205 0 / 0.12);
1386
- --main-transparency-primary-16: rgba(221 205 0 / 0.16);
1387
- --main-transparency-primary-24: rgba(221 205 0 / 0.24);
1388
- --main-transparency-primary-32: rgba(221 205 0 / 0.32);
1389
- --main-transparency-primary-48: rgba(221 205 0 / 0.48);
1390
- --main-transparency-secondary-8: rgba(158 158 158 / 0.08);
1391
- --main-transparency-secondary-12: rgba(158 158 158 / 0.12);
1392
- --main-transparency-secondary-16: rgba(158 158 158 / 0.16);
1393
- --main-transparency-secondary-24: rgba(158 158 158 / 0.24);
1394
- --main-transparency-secondary-32: rgba(158 158 158 / 0.32);
1395
- --main-transparency-secondary-48: rgba(158 158 158 / 0.48);
1396
- --main-transparency-tertiary-8: rgba(173 202 214 / 0.08);
1397
- --main-transparency-tertiary-12: rgba(173 202 214 / 0.12);
1398
- --main-transparency-tertiary-16: rgba(173 202 214 / 0.16);
1399
- --main-transparency-tertiary-24: rgba(173 202 214 / 0.24);
1400
- --main-transparency-tertiary-32: rgba(173 202 214 / 0.32);
1401
- --main-transparency-tertiary-48: rgba(173 202 214 / 0.48);
1402
- --other-transparency-info-8: rgba(41 152 255 / 0.08);
1403
- --other-transparency-info-12: rgba(41 152 255 / 0.12);
1404
- --other-transparency-info-16: rgba(41 152 255 / 0.16);
1405
- --other-transparency-info-24: rgba(41 152 255 / 0.24);
1406
- --other-transparency-info-32: rgba(41 152 255 / 0.32);
1407
- --other-transparency-info-48: rgba(41 152 255 / 0.48);
1408
- --other-transparency-success-8: rgba(84 214 44 / 0.08);
1409
- --other-transparency-success-12: rgba(84 214 44 / 0.12);
1410
- --other-transparency-success-16: rgba(84 214 44 / 0.16);
1411
- --other-transparency-success-24: rgba(84 214 44 / 0.24);
1412
- --other-transparency-success-32: rgba(84 214 44 / 0.32);
1413
- --other-transparency-success-48: rgba(84 214 44 / 0.48);
1414
- --other-transparency-warning-8: rgba(255 193 7 / 0.08);
1415
- --other-transparency-warning-12: rgba(255 193 7 / 0.12);
1416
- --other-transparency-warning-16: rgba(255 193 7 / 0.16);
1417
- --other-transparency-warning-24: rgba(255 193 7 / 0.24);
1418
- --other-transparency-warning-32: rgba(255 193 7 / 0.32);
1419
- --other-transparency-warning-48: rgba(255 193 7 / 0.48);
1420
- --other-transparency-error-8: rgba(255 72 66 / 0.08);
1421
- --other-transparency-error-12: rgba(255 72 66 / 0.12);
1422
- --other-transparency-error-16: rgba(255 72 66 / 0.16);
1423
- --other-transparency-error-24: rgba(255 72 66 / 0.24);
1424
- --other-transparency-error-32: rgba(255 72 66 / 0.32);
1425
- --other-transparency-error-48: rgba(255 72 66 / 0.48);
1426
- --other-transparency-grey-8: rgba(158 158 158 / 0.08);
1427
- --other-transparency-grey-12: rgba(158 158 158 / 0.12);
1428
- --other-transparency-grey-16: rgba(158 158 158 / 0.16);
1429
- --other-transparency-grey-24: rgba(158 158 158 / 0.24);
1430
- --other-transparency-grey-32: rgba(158 158 158 / 0.32);
1431
- --other-transparency-grey-48: rgba(158 158 158 / 0.48);
1432
- --other-transparency-grey2-8: rgba(145 158 171 / 0.08);
1433
- --other-transparency-grey2-12: rgba(145 158 171 / 0.12);
1434
- --other-transparency-grey2-16: rgba(145 158 171 / 0.16);
1435
- --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
1436
- --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
1437
- --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
1438
- --other-transparency-white-08: rgba(255 255 255 / 0.08);
1439
- --other-transparency-white-12: rgba(255 255 255 / 0.12);
1440
- --other-transparency-white-16: rgba(255 255 255 / 0.16);
1441
- --other-transparency-white-24: rgba(255 255 255 / 0.24);
1442
- --other-transparency-white-32: rgba(255 255 255 / 0.32);
1443
- --other-transparency-white-48: rgba(255 255 255 / 0.48);
1444
- --other-transparency-black-08: rgba(0 0 0 / 0.08);
1445
- --other-transparency-black-12: rgba(0 0 0 / 0.12);
1446
- --other-transparency-black-16: rgba(0 0 0 / 0.16);
1447
- --other-transparency-black-24: rgba(0 0 0 / 0.24);
1448
- --other-transparency-black-32: rgba(0 0 0 / 0.32);
1449
- --other-transparency-black-48: rgba(0 0 0 / 0.48);
2460
+ /* ------------------------------------------------------------------ */
2461
+ /* Transparency Variants from variable_lasted.css */
2462
+ /* ------------------------------------------------------------------ */
2463
+ /* Primary (main) */
2464
+ --main-transparency-primary-8: var(--transparency-primary-8-xspector);
2465
+ --main-transparency-primary-12: var(--transparency-primary-12-xspector);
2466
+ --main-transparency-primary-16: var(--transparency-primary-16-xspector);
2467
+ --main-transparency-primary-24: var(--transparency-primary-24-xspector);
2468
+ --main-transparency-primary-32: var(--transparency-primary-32-xspector);
2469
+ --main-transparency-primary-48: var(--transparency-primary-48-xspector);
2470
+ /* Secondary (main) */
2471
+ --main-transparency-secondary-8: var(--transparency-secondary-8-xspector);
2472
+ --main-transparency-secondary-12: var(--transparency-secondary-12-xspector);
2473
+ --main-transparency-secondary-16: var(--transparency-secondary-16-xspector);
2474
+ --main-transparency-secondary-24: var(--transparency-secondary-24-xspector);
2475
+ --main-transparency-secondary-32: var(--transparency-secondary-32-xspector);
2476
+ --main-transparency-secondary-48: var(--transparency-secondary-48-xspector);
2477
+ /* Tertiary (main) */
2478
+ --main-transparency-tertiary-8: var(--transparency-tertiary-8-xspector);
2479
+ --main-transparency-tertiary-12: var(--transparency-tertiary-12-xspector);
2480
+ --main-transparency-tertiary-16: var(--transparency-tertiary-16-xspector);
2481
+ --main-transparency-tertiary-24: var(--transparency-tertiary-24-xspector);
2482
+ --main-transparency-tertiary-32: var(--transparency-tertiary-32-xspector);
2483
+ --main-transparency-tertiary-48: var(--transparency-tertiary-48-xspector);
2484
+ /* Info (other) */
2485
+ --other-transparency-info-8: var(--transparency-info-8-xspector);
2486
+ --other-transparency-info-12: var(--transparency-info-12-xspector);
2487
+ --other-transparency-info-16: var(--transparency-info-16-xspector);
2488
+ --other-transparency-info-24: var(--transparency-info-24-xspector);
2489
+ --other-transparency-info-32: var(--transparency-info-32-xspector);
2490
+ --other-transparency-info-48: var(--transparency-info-48-xspector);
2491
+ /* Success (other) */
2492
+ --other-transparency-success-8: var(--transparency-success-8-xspector);
2493
+ --other-transparency-success-12: var(--transparency-success-12-xspector);
2494
+ --other-transparency-success-16: var(--transparency-success-16-xspector);
2495
+ --other-transparency-success-24: var(--transparency-success-24-xspector);
2496
+ --other-transparency-success-32: var(--transparency-success-32-xspector);
2497
+ --other-transparency-success-48: var(--transparency-success-48-xspector);
2498
+ /* Warning (other) */
2499
+ --other-transparency-warning-8: var(--transparency-warning-8-xspector);
2500
+ --other-transparency-warning-12: var(--transparency-warning-12-xspector);
2501
+ --other-transparency-warning-16: var(--transparency-warning-16-xspector);
2502
+ --other-transparency-warning-24: var(--transparency-warning-24-xspector);
2503
+ --other-transparency-warning-32: var(--transparency-warning-32-xspector);
2504
+ --other-transparency-warning-48: var(--transparency-warning-48-xspector);
2505
+ /* Error (other) */
2506
+ --other-transparency-error-8: var(--transparency-error-8-xspector);
2507
+ --other-transparency-error-12: var(--transparency-error-12-xspector);
2508
+ --other-transparency-error-16: var(--transparency-error-16-xspector);
2509
+ --other-transparency-error-24: var(--transparency-error-24-xspector);
2510
+ --other-transparency-error-32: var(--transparency-error-32-xspector);
2511
+ --other-transparency-error-48: var(--transparency-error-48-xspector);
2512
+ /* Grey (other) */
2513
+ --other-transparency-grey-8: var(--transparency-grey-8-xspector);
2514
+ --other-transparency-grey-12: var(--transparency-grey-12-xspector);
2515
+ --other-transparency-grey-16: var(--transparency-grey-16-xspector);
2516
+ --other-transparency-grey-24: var(--transparency-grey-24-xspector);
2517
+ --other-transparency-grey-32: var(--transparency-grey-32-xspector);
2518
+ --other-transparency-grey-48: var(--transparency-grey-48-xspector);
2519
+ /* Grey2 (other) */
2520
+ --other-transparency-grey2-8: var(--transparency-grey2-8-xspector);
2521
+ --other-transparency-grey2-12: var(--transparency-grey2-12-xspector);
2522
+ --other-transparency-grey2-16: var(--transparency-grey2-16-xspector);
2523
+ --other-transparency-grey2-24: var(--transparency-grey2-24-xspector);
2524
+ --other-transparency-grey2-32: var(--transparency-grey2-32-xspector);
2525
+ --other-transparency-grey2-48: var(--transparency-grey2-48-xspector);
2526
+ /* White (other) */
2527
+ --other-transparency-white-08: var(--transparency-white-8-xspector);
2528
+ --other-transparency-white-12: var(--transparency-white-12-xspector);
2529
+ --other-transparency-white-16: var(--transparency-white-16-xspector);
2530
+ --other-transparency-white-24: var(--transparency-white-24-xspector);
2531
+ --other-transparency-white-32: var(--transparency-white-32-xspector);
2532
+ --other-transparency-white-48: var(--transparency-white-48-xspector);
2533
+ /* Black (other) */
2534
+ --other-transparency-black-08: var(--transparency-black-8-xspector);
2535
+ --other-transparency-black-12: var(--transparency-black-12-xspector);
2536
+ --other-transparency-black-16: var(--transparency-black-16-xspector);
2537
+ --other-transparency-black-24: var(--transparency-black-24-xspector);
2538
+ --other-transparency-black-32: var(--transparency-black-32-xspector);
2539
+ --other-transparency-black-48: var(--transparency-black-48-xspector);
1450
2540
  /* TYPE */
1451
2541
  --h1-family: "Poppins";
1452
2542
  --h2-family: "Poppins";
@@ -1602,6 +2692,460 @@
1602
2692
  ;
1603
2693
  }
1604
2694
 
2695
+ :root[data-theme="skyller"] {
2696
+ /* ------------------------------------------------------------------ */
2697
+ /* Color Ramps — from variable_lasted.css */
2698
+ /* ------------------------------------------------------------------ */
2699
+ /* Maps --{base}-ramps-{base}-{num} (code) → --ramps-{base}-{num}-skyller */
2700
+ /* Primary */
2701
+ --primary-ramps-primary-5: var(--ramps-primary-5-skyller);
2702
+ --primary-ramps-primary-10: var(--ramps-primary-10-skyller);
2703
+ --primary-ramps-primary-20: var(--ramps-primary-20-skyller);
2704
+ --primary-ramps-primary-30: var(--ramps-primary-30-skyller);
2705
+ --primary-ramps-primary-40: var(--ramps-primary-40-skyller);
2706
+ --primary-ramps-primary-50: var(--ramps-primary-50-skyller);
2707
+ --primary-ramps-primary-60: var(--ramps-primary-60-skyller);
2708
+ --primary-ramps-primary-70: var(--ramps-primary-70-skyller);
2709
+ --primary-ramps-primary-80: var(--ramps-primary-80-skyller);
2710
+ --primary-ramps-primary-90: var(--ramps-primary-90-skyller);
2711
+ --primary-ramps-primary-100: var(--ramps-primary-100-skyller);
2712
+ --primary-ramps-primary-110: var(--ramps-primary-110-skyller);
2713
+ --primary-ramps-primary-120: var(--ramps-primary-120-skyller);
2714
+ --primary-ramps-primary-130: var(--ramps-primary-130-skyller);
2715
+ --primary-ramps-primary-140: var(--ramps-primary-140-skyller);
2716
+ --primary-ramps-primary-150: var(--ramps-primary-150-skyller);
2717
+ /* Secondary */
2718
+ --secondary-ramps-secondary-5: var(--ramps-secondary-5-skyller);
2719
+ --secondary-ramps-secondary-10: var(--ramps-secondary-10-skyller);
2720
+ --secondary-ramps-secondary-20: var(--ramps-secondary-20-skyller);
2721
+ --secondary-ramps-secondary-30: var(--ramps-secondary-30-skyller);
2722
+ --secondary-ramps-secondary-40: var(--ramps-secondary-40-skyller);
2723
+ --secondary-ramps-secondary-50: var(--ramps-secondary-50-skyller);
2724
+ --secondary-ramps-secondary-60: var(--ramps-secondary-60-skyller);
2725
+ --secondary-ramps-secondary-70: var(--ramps-secondary-70-skyller);
2726
+ --secondary-ramps-secondary-80: var(--ramps-secondary-80-skyller);
2727
+ --secondary-ramps-secondary-90: var(--ramps-secondary-90-skyller);
2728
+ --secondary-ramps-secondary-100: var(--ramps-secondary-100-skyller);
2729
+ --secondary-ramps-secondary-110: var(--ramps-secondary-110-skyller);
2730
+ --secondary-ramps-secondary-120: var(--ramps-secondary-120-skyller);
2731
+ --secondary-ramps-secondary-130: var(--ramps-secondary-130-skyller);
2732
+ --secondary-ramps-secondary-140: var(--ramps-secondary-140-skyller);
2733
+ --secondary-ramps-secondary-150: var(--ramps-secondary-150-skyller);
2734
+ /* Tertiary */
2735
+ --tertiary-ramps-tertiary-5: var(--ramps-tertiary-5-skyller);
2736
+ --tertiary-ramps-tertiary-10: var(--ramps-tertiary-10-skyller);
2737
+ --tertiary-ramps-tertiary-20: var(--ramps-tertiary-20-skyller);
2738
+ --tertiary-ramps-tertiary-30: var(--ramps-tertiary-30-skyller);
2739
+ --tertiary-ramps-tertiary-40: var(--ramps-tertiary-40-skyller);
2740
+ --tertiary-ramps-tertiary-50: var(--ramps-tertiary-50-skyller);
2741
+ --tertiary-ramps-tertiary-60: var(--ramps-tertiary-60-skyller);
2742
+ --tertiary-ramps-tertiary-70: var(--ramps-tertiary-70-skyller);
2743
+ --tertiary-ramps-tertiary-80: var(--ramps-tertiary-80-skyller);
2744
+ --tertiary-ramps-tertiary-90: var(--ramps-tertiary-90-skyller);
2745
+ --tertiary-ramps-tertiary-100: var(--ramps-tertiary-100-skyller);
2746
+ --tertiary-ramps-tertiary-110: var(--ramps-tertiary-110-skyller);
2747
+ --tertiary-ramps-tertiary-120: var(--ramps-tertiary-120-skyller);
2748
+ --tertiary-ramps-tertiary-130: var(--ramps-tertiary-130-skyller);
2749
+ --tertiary-ramps-tertiary-140: var(--ramps-tertiary-140-skyller);
2750
+ --tertiary-ramps-tertiary-150: var(--ramps-tertiary-150-skyller);
2751
+ /* Grey */
2752
+ --grey-grey-5: var(--ramps-grey-5-skyller);
2753
+ --grey-grey-10: var(--ramps-grey-10-skyller);
2754
+ --grey-grey-20: var(--ramps-grey-20-skyller);
2755
+ --grey-grey-30: var(--ramps-grey-30-skyller);
2756
+ --grey-grey-40: var(--ramps-grey-40-skyller);
2757
+ --grey-grey-50: var(--ramps-grey-50-skyller);
2758
+ --grey-grey-60: var(--ramps-grey-60-skyller);
2759
+ --grey-grey-70: var(--ramps-grey-70-skyller);
2760
+ --grey-grey-80: var(--ramps-grey-80-skyller);
2761
+ --grey-grey-90: var(--ramps-grey-90-skyller);
2762
+ --grey-grey-100: var(--ramps-grey-100-skyller);
2763
+ --grey-grey-110: var(--ramps-grey-110-skyller);
2764
+ --grey-grey-120: var(--ramps-grey-120-skyller);
2765
+ --grey-grey-130: var(--ramps-grey-130-skyller);
2766
+ --grey-grey-140: var(--ramps-grey-140-skyller);
2767
+ --grey-grey-150: var(--ramps-grey-150-skyller);
2768
+ /* Grey2 */
2769
+ --grey2-grey2-50: var(--ramps-grey2-50-skyller);
2770
+ --grey2-grey2-100: var(--ramps-grey2-100-skyller);
2771
+ --grey2-grey2-200: var(--ramps-grey2-200-skyller);
2772
+ --grey2-grey2-300: var(--ramps-grey2-300-skyller);
2773
+ --grey2-grey2-400: var(--ramps-grey2-400-skyller);
2774
+ --grey2-grey2-500: var(--ramps-grey2-500-skyller);
2775
+ --grey2-grey2-600: var(--ramps-grey2-600-skyller);
2776
+ --grey2-grey2-700: var(--ramps-grey2-700-skyller);
2777
+ --grey2-grey2-800: var(--ramps-grey2-800-skyller);
2778
+ --grey2-grey2-900: var(--ramps-grey2-900-skyller);
2779
+ --grey2-grey2-950: var(--ramps-grey2-950-skyller);
2780
+ /* Info */
2781
+ --info-info-50: var(--ramps-info-50-skyller);
2782
+ --info-info-100: var(--ramps-info-100-skyller);
2783
+ --info-info-200: var(--ramps-info-200-skyller);
2784
+ --info-info-300: var(--ramps-info-300-skyller);
2785
+ --info-info-400: var(--ramps-info-400-skyller);
2786
+ --info-info-500: var(--ramps-info-500-skyller);
2787
+ --info-info-600: var(--ramps-info-600-skyller);
2788
+ --info-info-700: var(--ramps-info-700-skyller);
2789
+ --info-info-800: var(--ramps-info-800-skyller);
2790
+ --info-info-900: var(--ramps-info-900-skyller);
2791
+ --info-info-950: var(--ramps-info-950-skyller);
2792
+ /* Success */
2793
+ --success-success-50: var(--ramps-success-50-skyller);
2794
+ --success-success-100: var(--ramps-success-100-skyller);
2795
+ --success-success-200: var(--ramps-success-200-skyller);
2796
+ --success-success-300: var(--ramps-success-300-skyller);
2797
+ --success-success-400: var(--ramps-success-400-skyller);
2798
+ --success-success-500: var(--ramps-success-500-skyller);
2799
+ --success-success-600: var(--ramps-success-600-skyller);
2800
+ --success-success-700: var(--ramps-success-700-skyller);
2801
+ --success-success-800: var(--ramps-success-800-skyller);
2802
+ --success-success-900: var(--ramps-success-900-skyller);
2803
+ --success-success-950: var(--ramps-success-950-skyller);
2804
+ /* Warning */
2805
+ --warning-warning-50: var(--ramps-warning-50-skyller);
2806
+ --warning-warning-100: var(--ramps-warning-100-skyller);
2807
+ --warning-warning-200: var(--ramps-warning-200-skyller);
2808
+ --warning-warning-300: var(--ramps-warning-300-skyller);
2809
+ --warning-warning-400: var(--ramps-warning-400-skyller);
2810
+ --warning-warning-500: var(--ramps-warning-500-skyller);
2811
+ --warning-warning-600: var(--ramps-warning-600-skyller);
2812
+ --warning-warning-700: var(--ramps-warning-700-skyller);
2813
+ --warning-warning-800: var(--ramps-warning-800-skyller);
2814
+ --warning-warning-900: var(--ramps-warning-900-skyller);
2815
+ --warning-warning-950: var(--ramps-warning-950-skyller);
2816
+ /* Error */
2817
+ --error-error-50: var(--ramps-error-50-skyller);
2818
+ --error-error-100: var(--ramps-error-100-skyller);
2819
+ --error-error-200: var(--ramps-error-200-skyller);
2820
+ --error-error-300: var(--ramps-error-300-skyller);
2821
+ --error-error-400: var(--ramps-error-400-skyller);
2822
+ --error-error-500: var(--ramps-error-500-skyller);
2823
+ --error-error-600: var(--ramps-error-600-skyller);
2824
+ --error-error-700: var(--ramps-error-700-skyller);
2825
+ --error-error-800: var(--ramps-error-800-skyller);
2826
+ --error-error-900: var(--ramps-error-900-skyller);
2827
+ --error-error-950: var(--ramps-error-950-skyller);
2828
+ /* ------------------------------------------------------------------ */
2829
+ /* State Tokens — from variable_lasted.css */
2830
+ /* ------------------------------------------------------------------ */
2831
+ /* Maps --state-color-* (code) → --state-*-skyller (Figma export) */
2832
+ /* Primary */
2833
+ --state-color-primary-default: var(--state-primary-default-skyller);
2834
+ --state-color-primary-hover: var(--state-primary-hover-skyller);
2835
+ --state-color-primary-stroke: var(--state-primary-stroke-skyller);
2836
+ --state-color-primary-hover-bg: var(--state-primary-hover-bg-skyller);
2837
+ --state-color-primary-pressed: var(--state-primary-pressed-skyller);
2838
+ --state-color-primary-active: var(--state-primary-active-skyller);
2839
+ --state-color-primary-text-solid: var(--state-primary-text-solid-skyller);
2840
+ --state-color-primary-text-outline: var(--state-primary-text-outline-skyller);
2841
+ --state-color-primary-text-hover: var(--state-primary-text-hover-skyller);
2842
+ --state-color-primary-text-pressed: var(--state-primary-text-pressed-skyller);
2843
+ /* Secondary */
2844
+ --state-color-secondary-default: var(--state-secondary-default-skyller);
2845
+ --state-color-secondary-hover: var(--state-secondary-hover-skyller);
2846
+ --state-color-secondary-stroke: var(--state-secondary-stroke-skyller);
2847
+ --state-color-secondary-hover-bg: var(--state-secondary-hover-bg-skyller);
2848
+ --state-color-secondary-pressed: var(--state-secondary-pressed-skyller);
2849
+ --state-color-secondary-active: var(--state-secondary-active-skyller);
2850
+ --state-color-secondary-text-solid: var(--state-secondary-text-solid-skyller);
2851
+ --state-color-secondary-text-outline: var(--state-secondary-text-outline-skyller);
2852
+ --state-color-secondary-text-hover: var(--state-secondary-text-hover-skyller);
2853
+ --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-skyller);
2854
+ /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
2855
+ --state-color-tertiary-default: var(--state-tertiery-default-skyller);
2856
+ --state-color-tertiary-hover: var(--state-tertiery-hover-skyller);
2857
+ --state-color-tertiary-stroke: var(--state-tertiery-stroke-skyller);
2858
+ --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-skyller);
2859
+ --state-color-tertiary-pressed: var(--state-tertiery-pressed-skyller);
2860
+ --state-color-tertiary-active: var(--state-tertiery-active-skyller);
2861
+ --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-skyller);
2862
+ --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-skyller);
2863
+ --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-skyller);
2864
+ --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-skyller);
2865
+ /* Info */
2866
+ --state-color-info-default: var(--state-info-default-skyller);
2867
+ --state-color-info-hover: var(--state-info-hover-skyller);
2868
+ --state-color-info-stroke: var(--state-info-stroke-skyller);
2869
+ --state-color-info-hover-bg: var(--state-info-hover-bg-skyller);
2870
+ --state-color-info-pressed: var(--state-info-pressed-skyller);
2871
+ --state-color-info-active: var(--state-info-active-skyller);
2872
+ --state-color-info-text-solid: var(--state-info-text-solid-skyller);
2873
+ --state-color-info-text-outline: var(--state-info-text-outline-skyller);
2874
+ --state-color-info-text-hover: var(--state-info-text-hover-skyller);
2875
+ --state-color-info-text-pressed: var(--state-info-text-pressed-skyller);
2876
+ /* Success */
2877
+ --state-color-success-default: var(--state-success-default-skyller);
2878
+ --state-color-success-hover: var(--state-success-hover-skyller);
2879
+ --state-color-success-stroke: var(--state-success-stroke-skyller);
2880
+ --state-color-success-hover-bg: var(--state-success-hover-bg-skyller);
2881
+ --state-color-success-pressed: var(--state-success-pressed-skyller);
2882
+ --state-color-success-active: var(--state-success-active-skyller);
2883
+ --state-color-success-text-solid: var(--state-success-text-solid-skyller);
2884
+ --state-color-success-text-outline: var(--state-success-text-outline-skyller);
2885
+ --state-color-success-text-hover: var(--state-success-text-hover-skyller);
2886
+ --state-color-success-text-pressed: var(--state-success-text-pressed-skyller);
2887
+ /* Warning */
2888
+ --state-color-warning-default: var(--state-warning-default-skyller);
2889
+ --state-color-warning-hover: var(--state-warning-hover-skyller);
2890
+ --state-color-warning-stroke: var(--state-warning-stroke-skyller);
2891
+ --state-color-warning-hover-bg: var(--state-warning-hover-bg-skyller);
2892
+ --state-color-warning-pressed: var(--state-warning-pressed-skyller);
2893
+ --state-color-warning-active: var(--state-warning-active-skyller);
2894
+ --state-color-warning-text-solid: var(--state-warning-text-solid-skyller);
2895
+ --state-color-warning-text-outline: var(--state-warning-text-outline-skyller);
2896
+ --state-color-warning-text-hover: var(--state-warning-text-hover-skyller);
2897
+ --state-color-warning-text-pressed: var(--state-warning-text-pressed-skyller);
2898
+ /* Error */
2899
+ --state-color-error-default: var(--state-error-default-skyller);
2900
+ --state-color-error-hover: var(--state-error-hover-skyller);
2901
+ --state-color-error-stroke: var(--state-error-stroke-skyller);
2902
+ --state-color-error-hover-bg: var(--state-error-hover-bg-skyller);
2903
+ --state-color-error-pressed: var(--state-error-pressed-skyller);
2904
+ --state-color-error-active: var(--state-error-active-skyller);
2905
+ --state-color-error-text-solid: var(--state-error-text-solid-skyller);
2906
+ --state-color-error-text-outline: var(--state-error-text-outline-skyller);
2907
+ --state-color-error-text-hover: var(--state-error-text-hover-skyller);
2908
+ --state-color-error-text-pressed: var(--state-error-text-pressed-skyller);
2909
+ /* Disable */
2910
+ --state-color-disable-solid: var(--state-disable-solid-skyller);
2911
+ --state-color-disable-outline: var(--state-disable-outline-skyller);
2912
+ /* ------------------------------------------------------------------ */
2913
+ /* Semantic Colors — from variable_lasted.css */
2914
+ /* ------------------------------------------------------------------ */
2915
+ /* Input */
2916
+ --input-color-default-text: var(--input-default-text-skyller);
2917
+ --input-color-default-stroke: var(--input-default-stroke-skyller);
2918
+ --input-color-filled-text: var(--input-filled-text-skyller);
2919
+ --input-color-active-stroke: var(--input-active-stroke-skyller);
2920
+ --input-color-disable-text: var(--input-disable-text-skyller);
2921
+ --input-color-disable-stroke: var(--input-disable-stroke-skyller);
2922
+ --input-color-disable-bg: var(--input-disable-bg-skyller);
2923
+ --input-color-label-bg: var(--input-label-bg-skyller);
2924
+ --input-color-error: var(--input-error-skyller);
2925
+ /* Function button */
2926
+ --function-default-solid: var(--function-default-solid-skyller);
2927
+ --function-default-hover: var(--function-default-hover-skyller);
2928
+ --function-default-hover-bg: var(--function-default-hover-bg-skyller);
2929
+ --function-default-stroke: var(--function-default-stroke-skyller);
2930
+ --function-default-icon: var(--function-default-icon-skyller);
2931
+ --function-default-outline-icon: var(--function-default-outline-icon-skyller);
2932
+ --function-active-solid: var(--function-active-solid-skyller);
2933
+ --function-active-hover: var(--function-active-hover-skyller);
2934
+ --function-active-hover-bg: var(--function-active-hover-bg-skyller);
2935
+ --function-active-stroke: var(--function-active-stroke-skyller);
2936
+ --function-active-icon: var(--function-active-icon-skyller);
2937
+ /* Text */
2938
+ --text-black: var(--text-black-skyller);
2939
+ --text-dark: var(--text-dark-skyller);
2940
+ --text-medium: var(--text-medium-skyller);
2941
+ --text-light: var(--text-light-skyller);
2942
+ --text-grey-dark: var(--text-grey-dark-skyller);
2943
+ --text-grey-medium: var(--text-grey-medium-skyller);
2944
+ --text-grey-light: var(--text-grey-light-skyller);
2945
+ --text-white: var(--text-white-skyller);
2946
+ /* Base */
2947
+ --base-color-bg: var(--base-bg-bg1-skyller);
2948
+ --base-color-bg2: var(--base-bg-bg2-skyller);
2949
+ --base-color-bg3: var(--base-bg-bg3-skyller);
2950
+ --base-color-workspace-stroke: var(--base-bg-stroke1-skyller);
2951
+ --base-color-guideline-stroke: var(--base-bg-stroke2-skyller);
2952
+ --base-color-popup: var(--base-modal-modal-skyller);
2953
+ --base-color-popup-hightlight: var(--base-modal-modal-hightlight-skyller);
2954
+ --base-color-popup-curtain: var(--base-modal-modal-curtain-skyller);
2955
+ --common-white: var(--common-white-skyller);
2956
+ --common-black: var(--common-black-skyller);
2957
+ /* Addon */
2958
+ --background: var(--base-color-bg);
2959
+ --foreground: var(--common-black);
2960
+ --primary: var(--ramps-primary-100-skyller);
2961
+ --secondary: var(--ramps-secondary-100-skyller);
2962
+ --tertiary: var(--ramps-tertiary-100-skyller);
2963
+ --info: var(--info-info-100);
2964
+ --success: var(--success-success-100);
2965
+ --warning: var(--warning-warning-100);
2966
+ --error: var(--error-error-100);
2967
+ --grey: var(--grey-grey-100);
2968
+ --grey2: var(--grey2-grey2-100);
2969
+ --primary-foreground: var(--state-color-primary-text-solid);
2970
+ --secondary-foreground: var(--state-color-secondary-text-solid);
2971
+ --tertiary-foreground: var(--state-color-tertiary-text-solid);
2972
+ --info-foreground: var(--state-color-info-text-solid);
2973
+ --success-foreground: var(--state-color-success-text-solid);
2974
+ --warning-foreground: var(--state-color-warning-text-solid);
2975
+ --error-foreground: var(--state-color-error-text-solid);
2976
+ --grey-foreground: var(--common-black);
2977
+ --grey2-foreground: var(--common-black);
2978
+ --surface: var(--base-color-bg);
2979
+ --surface-foreground: var(--common-black);
2980
+ --base-color-popup-foreground: var(--text-dark);
2981
+ /* ------------------------------------------------------------------ */
2982
+ /* Transparency Variants — from variable_lasted.css */
2983
+ /* ------------------------------------------------------------------ */
2984
+ /* Maps --main/other-transparency-* (code) → --transparency-*-skyller */
2985
+ /* Primary (main) */
2986
+ --main-transparency-primary-8: var(--transparency-primary-8-skyller);
2987
+ --main-transparency-primary-12: var(--transparency-primary-12-skyller);
2988
+ --main-transparency-primary-16: var(--transparency-primary-16-skyller);
2989
+ --main-transparency-primary-24: var(--transparency-primary-24-skyller);
2990
+ --main-transparency-primary-32: var(--transparency-primary-32-skyller);
2991
+ --main-transparency-primary-48: var(--transparency-primary-48-skyller);
2992
+ /* Secondary (main) */
2993
+ --main-transparency-secondary-8: var(--transparency-secondary-8-skyller);
2994
+ --main-transparency-secondary-12: var(--transparency-secondary-12-skyller);
2995
+ --main-transparency-secondary-16: var(--transparency-secondary-16-skyller);
2996
+ --main-transparency-secondary-24: var(--transparency-secondary-24-skyller);
2997
+ --main-transparency-secondary-32: var(--transparency-secondary-32-skyller);
2998
+ --main-transparency-secondary-48: var(--transparency-secondary-48-skyller);
2999
+ /* Tertiary (main) */
3000
+ --main-transparency-tertiary-8: var(--transparency-tertiary-8-skyller);
3001
+ --main-transparency-tertiary-12: var(--transparency-tertiary-12-skyller);
3002
+ --main-transparency-tertiary-16: var(--transparency-tertiary-16-skyller);
3003
+ --main-transparency-tertiary-24: var(--transparency-tertiary-24-skyller);
3004
+ --main-transparency-tertiary-32: var(--transparency-tertiary-32-skyller);
3005
+ --main-transparency-tertiary-48: var(--transparency-tertiary-48-skyller);
3006
+ /* Info (other) */
3007
+ --other-transparency-info-8: var(--transparency-info-8-skyller);
3008
+ --other-transparency-info-12: var(--transparency-info-12-skyller);
3009
+ --other-transparency-info-16: var(--transparency-info-16-skyller);
3010
+ --other-transparency-info-24: var(--transparency-info-24-skyller);
3011
+ --other-transparency-info-32: var(--transparency-info-32-skyller);
3012
+ --other-transparency-info-48: var(--transparency-info-48-skyller);
3013
+ /* Success (other) */
3014
+ --other-transparency-success-8: var(--transparency-success-8-skyller);
3015
+ --other-transparency-success-12: var(--transparency-success-12-skyller);
3016
+ --other-transparency-success-16: var(--transparency-success-16-skyller);
3017
+ --other-transparency-success-24: var(--transparency-success-24-skyller);
3018
+ --other-transparency-success-32: var(--transparency-success-32-skyller);
3019
+ --other-transparency-success-48: var(--transparency-success-48-skyller);
3020
+ /* Warning (other) */
3021
+ --other-transparency-warning-8: var(--transparency-warning-8-skyller);
3022
+ --other-transparency-warning-12: var(--transparency-warning-12-skyller);
3023
+ --other-transparency-warning-16: var(--transparency-warning-16-skyller);
3024
+ --other-transparency-warning-24: var(--transparency-warning-24-skyller);
3025
+ --other-transparency-warning-32: var(--transparency-warning-32-skyller);
3026
+ --other-transparency-warning-48: var(--transparency-warning-48-skyller);
3027
+ /* Error (other) */
3028
+ --other-transparency-error-8: var(--transparency-error-8-skyller);
3029
+ --other-transparency-error-12: var(--transparency-error-12-skyller);
3030
+ --other-transparency-error-16: var(--transparency-error-16-skyller);
3031
+ --other-transparency-error-24: var(--transparency-error-24-skyller);
3032
+ --other-transparency-error-32: var(--transparency-error-32-skyller);
3033
+ --other-transparency-error-48: var(--transparency-error-48-skyller);
3034
+ /* Grey (other) */
3035
+ --other-transparency-grey-8: var(--transparency-grey-8-skyller);
3036
+ --other-transparency-grey-12: var(--transparency-grey-12-skyller);
3037
+ --other-transparency-grey-16: var(--transparency-grey-16-skyller);
3038
+ --other-transparency-grey-24: var(--transparency-grey-24-skyller);
3039
+ --other-transparency-grey-32: var(--transparency-grey-32-skyller);
3040
+ --other-transparency-grey-48: var(--transparency-grey-48-skyller);
3041
+ /* Grey2 (other) */
3042
+ --other-transparency-grey2-8: var(--transparency-grey2-8-skyller);
3043
+ --other-transparency-grey2-12: var(--transparency-grey2-12-skyller);
3044
+ --other-transparency-grey2-16: var(--transparency-grey2-16-skyller);
3045
+ --other-transparency-grey2-24: var(--transparency-grey2-24-skyller);
3046
+ --other-transparency-grey2-32: var(--transparency-grey2-32-skyller);
3047
+ --other-transparency-grey2-48: var(--transparency-grey2-48-skyller);
3048
+ /* White (other) — note: variable uses transparency-white-8 */
3049
+ --other-transparency-white-08: var(--transparency-white-8-skyller);
3050
+ --other-transparency-white-12: var(--transparency-white-12-skyller);
3051
+ --other-transparency-white-16: var(--transparency-white-16-skyller);
3052
+ --other-transparency-white-24: var(--transparency-white-24-skyller);
3053
+ --other-transparency-white-32: var(--transparency-white-32-skyller);
3054
+ --other-transparency-white-48: var(--transparency-white-48-skyller);
3055
+ /* Black (other) */
3056
+ --other-transparency-black-08: var(--transparency-black-8-skyller);
3057
+ --other-transparency-black-12: var(--transparency-black-12-skyller);
3058
+ --other-transparency-black-16: var(--transparency-black-16-skyller);
3059
+ --other-transparency-black-24: var(--transparency-black-24-skyller);
3060
+ --other-transparency-black-32: var(--transparency-black-32-skyller);
3061
+ --other-transparency-black-48: var(--transparency-black-48-skyller);
3062
+ /* ------------------------------------------------------------------ */
3063
+ /* Typography */
3064
+ /* ------------------------------------------------------------------ */
3065
+ --h1-family: "Poppins";
3066
+ --h2-family: "Poppins";
3067
+ --h3-family: "Poppins";
3068
+ --h4-family: "Poppins";
3069
+ --h5-family: "Poppins";
3070
+ --h6-family: "Poppins";
3071
+ --subtitle2-family: "Poppins";
3072
+ --subtitle3-family: "Poppins";
3073
+ --subtitle4-family: "Poppins";
3074
+ --subtitle5-family: "Poppins";
3075
+ --subtitle6-family: "Poppins";
3076
+ --body1-family: "Poppins";
3077
+ --body2-family: "Poppins";
3078
+ --body3-family: "Poppins";
3079
+ --body4-family: "Poppins";
3080
+ --small1-family: "Poppins";
3081
+ --small2-family: "Poppins";
3082
+ --small3-family: "Poppins";
3083
+ --small4-family: "Poppins";
3084
+ --small5-family: "Poppins";
3085
+ --label-label1-family: "Poppins";
3086
+ --label-label2-family: "Poppins";
3087
+ --button-button-l-family: "Poppins";
3088
+ --button-button-ms-family: "Poppins";
3089
+ /* --------------------------------------------------------------------------------- */
3090
+ /* Action Button Component Tokens */
3091
+ /* --------------------------------------------------------------------------------- */
3092
+ /* Naming Convention: --[component]-[mode]-[state]-[property] */
3093
+ /* Mode: [solid, outline, icon] */
3094
+ /* States: [default, hover, pressed, active, active-pressed active-hover disabled] */
3095
+ /* --------------------------------------------------------------------------------- */
3096
+ /* ------------------------------------------------------------------ */
3097
+ /* Solid Mode */
3098
+ /* ------------------------------------------------------------------ */
3099
+ --action-button-solid-default-bg: var(--function-default-solid);
3100
+ --action-button-solid-default-border: var(--function-default-solid);
3101
+ --action-button-solid-default-text: var(--function-default-icon);
3102
+ --action-button-solid-hover-bg: var(--function-default-hover);
3103
+ --action-button-solid-hover-border: var(--function-default-hover);
3104
+ --action-button-solid-hover-text: var(--function-default-icon);
3105
+ --action-button-solid-pressed-bg: var(--function-default-solid);
3106
+ --action-button-solid-pressed-border: var(--function-default-solid);
3107
+ --action-button-solid-pressed-text: var(--function-default-icon);
3108
+ --action-button-solid-active-bg: var(--function-active-solid);
3109
+ --action-button-solid-active-border: var(--function-active-solid);
3110
+ --action-button-solid-active-text: var(--function-active-icon);
3111
+ --action-button-solid-active-hover-bg: var(--function-active-hover);
3112
+ --action-button-solid-active-hover-border: var(--function-active-hover);
3113
+ --action-button-solid-active-hover-text: var(--function-active-icon);
3114
+ --action-button-solid-active-pressed-bg: var(--function-active-solid);
3115
+ --action-button-solid-active-pressed-border: var(--function-active-solid);
3116
+ --action-button-solid-active-pressed-text: var(--function-active-icon);
3117
+ /* ------------------------------------------------------------------ */
3118
+ /* Outline Mode */
3119
+ /* ------------------------------------------------------------------ */
3120
+ --action-button-outline-default-border: var(--function-default-stroke);
3121
+ --action-button-outline-default-text: var(--function-default-outline-icon);
3122
+ --action-button-outline-hover-bg: var(--function-default-hover-bg);
3123
+ --action-button-outline-hover-border: var(--function-default-hover);
3124
+ --action-button-outline-hover-text: var(--function-default-hover);
3125
+ --action-button-outline-pressed-bg: var(--function-default-hover-bg);
3126
+ --action-button-outline-pressed-border: var(--function-default-stroke);
3127
+ --action-button-outline-pressed-text: var(--function-default-outline-icon);
3128
+ --action-button-outline-active-border: var(--function-active-stroke);
3129
+ --action-button-outline-active-text: var(--function-active-solid);
3130
+ --action-button-outline-active-hover-bg: var(--function-active-hover-bg);
3131
+ --action-button-outline-active-hover-border: var(--function-active-hover);
3132
+ --action-button-outline-active-hover-text: var(--function-active-hover);
3133
+ --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);
3134
+ --action-button-outline-active-pressed-border: var(--function-active-stroke);
3135
+ --action-button-outline-active-pressed-text: var(--function-active-solid);
3136
+ /* ------------------------------------------------------------------ */
3137
+ /* Icon Mode */
3138
+ /* ------------------------------------------------------------------ */
3139
+ --action-button-icon-default-text: var(--function-default-outline-icon);
3140
+ --action-button-icon-hover-bg: var(--function-default-hover-bg);
3141
+ --action-button-icon-hover-text: var(--function-default-hover);
3142
+ --action-button-icon-pressed-text: var(--function-default-outline-icon);
3143
+ --action-button-icon-active-text: var(--function-active-solid);
3144
+ --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
3145
+ --action-button-icon-active-hover-text: var(--function-active-hover);
3146
+ --action-button-icon-active-pressed-text: var(--function-active-solid);
3147
+ }
3148
+
1605
3149
  *, ::before, ::after {
1606
3150
  --tw-border-spacing-x: 0;
1607
3151
  --tw-border-spacing-y: 0;