@rovula/ui 0.0.82 → 0.1.1

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