@leta-io/design-tokens 0.4.1 → 0.5.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.
package/dist/index.d.ts CHANGED
@@ -311,8 +311,8 @@ declare const tokens: {
311
311
  readonly scale1700: "--scale-1700";
312
312
  /** Scale/1800 */
313
313
  readonly scale1800: "--scale-1800";
314
- /** Scale/1850 */
315
- readonly scale1850: "--scale-1850";
314
+ /** Scale/1825 */
315
+ readonly scale1825: "--scale-1825";
316
316
  /** Scale/2500 */
317
317
  readonly scale2500: "--scale-2500";
318
318
  /** Scale/1250 */
@@ -425,6 +425,8 @@ declare const tokens: {
425
425
  readonly scale1450: "--scale-1450";
426
426
  /** Scale/1150 */
427
427
  readonly scale1150: "--scale-1150";
428
+ /** Scale/1850 */
429
+ readonly scale1850: "--scale-1850";
428
430
  /** Colors/Primary/50 */
429
431
  readonly colorsPrimary50: "--colors-primary-50";
430
432
  /** Colors/Primary/100 */
@@ -1421,8 +1423,6 @@ declare const tokens: {
1421
1423
  readonly surfaceNeutralTopFilterTabHover: "--surface-neutral-top-filter-tab-hover";
1422
1424
  /** Surface/neutral/top-filter-tab-pressed */
1423
1425
  readonly surfaceNeutralTopFilterTabPressed: "--surface-neutral-top-filter-tab-pressed";
1424
- /** Surface/neutral/top-filter-tab-active */
1425
- readonly surfaceNeutralTopFilterTabActive: "--surface-neutral-top-filter-tab-active";
1426
1426
  /** Border/neutral/sub-filter-tab-idle */
1427
1427
  readonly borderNeutralSubFilterTabIdle: "--border-neutral-sub-filter-tab-idle";
1428
1428
  /** Border/neutral/sub-filter-tab-hover */
package/dist/index.js CHANGED
@@ -328,8 +328,8 @@ var tokens = {
328
328
  scale1700: "--scale-1700",
329
329
  /** Scale/1800 */
330
330
  scale1800: "--scale-1800",
331
- /** Scale/1850 */
332
- scale1850: "--scale-1850",
331
+ /** Scale/1825 */
332
+ scale1825: "--scale-1825",
333
333
  /** Scale/2500 */
334
334
  scale2500: "--scale-2500",
335
335
  /** Scale/1250 */
@@ -442,6 +442,8 @@ var tokens = {
442
442
  scale1450: "--scale-1450",
443
443
  /** Scale/1150 */
444
444
  scale1150: "--scale-1150",
445
+ /** Scale/1850 */
446
+ scale1850: "--scale-1850",
445
447
  /** Colors/Primary/50 */
446
448
  colorsPrimary50: "--colors-primary-50",
447
449
  /** Colors/Primary/100 */
@@ -1438,8 +1440,6 @@ var tokens = {
1438
1440
  surfaceNeutralTopFilterTabHover: "--surface-neutral-top-filter-tab-hover",
1439
1441
  /** Surface/neutral/top-filter-tab-pressed */
1440
1442
  surfaceNeutralTopFilterTabPressed: "--surface-neutral-top-filter-tab-pressed",
1441
- /** Surface/neutral/top-filter-tab-active */
1442
- surfaceNeutralTopFilterTabActive: "--surface-neutral-top-filter-tab-active",
1443
1443
  /** Border/neutral/sub-filter-tab-idle */
1444
1444
  borderNeutralSubFilterTabIdle: "--border-neutral-sub-filter-tab-idle",
1445
1445
  /** Border/neutral/sub-filter-tab-hover */
@@ -558,7 +558,6 @@ module.exports = {
558
558
  "surface-neutral-top-filter-tab-idle": "var(--surface-neutral-top-filter-tab-idle)",
559
559
  "surface-neutral-top-filter-tab-hover": "var(--surface-neutral-top-filter-tab-hover)",
560
560
  "surface-neutral-top-filter-tab-pressed": "var(--surface-neutral-top-filter-tab-pressed)",
561
- "surface-neutral-top-filter-tab-active": "var(--surface-neutral-top-filter-tab-active)",
562
561
  "border-neutral-sub-filter-tab-idle": "var(--border-neutral-sub-filter-tab-idle)",
563
562
  "border-neutral-sub-filter-tab-hover": "var(--border-neutral-sub-filter-tab-hover)",
564
563
  "border-neutral-sub-filter-tab-pressed": "var(--border-neutral-sub-filter-tab-pressed)",
package/dist/tokens.css CHANGED
@@ -143,7 +143,7 @@
143
143
  --scale-1600: 128px;
144
144
  --scale-1700: 256px;
145
145
  --scale-1800: 480px;
146
- --scale-1850: 512px;
146
+ --scale-1825: 512px;
147
147
  --scale-2500: 896px;
148
148
  --scale-1250: 60px;
149
149
  --scale-150: 6px;
@@ -200,6 +200,7 @@
200
200
  --scale-1725: 328px;
201
201
  --scale-1450: 80px;
202
202
  --scale-1150: 52px;
203
+ --scale-1850: 620px;
203
204
 
204
205
  /* Alias (semantic) — Product mode (only) */
205
206
  --colors-primary-50: var(--primitive-colors-coral-red-50);
@@ -378,7 +379,7 @@
378
379
  --padding-1px: var(--scale-25);
379
380
  --rounding-xxxl: var(--scale-600);
380
381
 
381
- /* Mapped Colors — Light Mode (default) */
382
+ /* Mapped Colors — Light Theme (default) */
382
383
  --text-default-sub-heading: var(--colors-neutral-default);
383
384
  --text-primary-default: var(--colors-primary-default);
384
385
  --text-primary-label: var(--colors-primary-default);
@@ -702,13 +703,12 @@
702
703
  --surface-neutral-top-filter-tab-idle: var(--colors-neutral-white);
703
704
  --surface-neutral-top-filter-tab-hover: var(--colors-neutral-50);
704
705
  --surface-neutral-top-filter-tab-pressed: var(--colors-neutral-100);
705
- --surface-neutral-top-filter-tab-active: var(--colors-neutral-white);
706
706
  --border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-white) 80%, transparent);
707
707
  --border-neutral-sub-filter-tab-hover: var(--colors-neutral-100);
708
708
  --border-neutral-sub-filter-tab-pressed: var(--colors-neutral-150);
709
709
  --border-neutral-top-filter-tab-pressed: var(--colors-neutral-300);
710
710
  --border-neutral-sub-filter-tab-active: var(--colors-neutral-white);
711
- --border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
711
+ --border-neutral-top-filter-tab-idle: var(--colors-neutral-200);
712
712
  --border-neutral-top-filter-tab-hover: var(--colors-neutral-200);
713
713
  --border-secondary-top-filter-tab-active: var(--colors-secondary-900);
714
714
  --border-secondary-slider-track-idle: var(--colors-secondary-200);
@@ -1060,6 +1060,475 @@
1060
1060
  --shadow-neutral-3: 0px 5px 8px -4px rgb(37 37 37 / 0.25), 4px 0px 8px -6px rgb(37 37 37 / 0.2), 0px -1px 8px -8px rgb(37 37 37 / 0.04);
1061
1061
  }
1062
1062
 
1063
+ [data-theme="light"] {
1064
+ --text-default-sub-heading: var(--colors-neutral-default);
1065
+ --text-primary-default: var(--colors-primary-default);
1066
+ --text-primary-label: var(--colors-primary-default);
1067
+ --text-information-default: var(--colors-information-default);
1068
+ --text-information-label: var(--colors-information-600);
1069
+ --text-error-default: var(--colors-error-default);
1070
+ --text-error-label: var(--colors-error-default);
1071
+ --text-warning-default: var(--colors-warning-default);
1072
+ --text-warning-label: var(--colors-warning-default);
1073
+ --text-caution-default: var(--colors-caution-default);
1074
+ --text-caution-label: var(--colors-caution-700);
1075
+ --text-notice-default: var(--colors-notice-default);
1076
+ --text-notice-label: var(--colors-notice-700);
1077
+ --text-success-default: var(--colors-success-default);
1078
+ --text-success-label: var(--colors-success-600);
1079
+ --text-default-placeholder: var(--colors-neutral-400);
1080
+ --text-disabled-default: var(--colors-neutral-400);
1081
+ --icons-neutral-default: var(--colors-neutral-700);
1082
+ --icons-on-color-default: var(--colors-neutral-50);
1083
+ --icons-neutral-idle: var(--colors-neutral-400);
1084
+ --icons-notice-default: var(--colors-notice-600);
1085
+ --icons-notice-badge: var(--colors-notice-600);
1086
+ --icons-primary-default: var(--colors-primary-default);
1087
+ --icons-success-default: var(--colors-success-default);
1088
+ --icons-success-badge: var(--colors-success-default);
1089
+ --icons-primary-badge: var(--colors-primary-600);
1090
+ --icons-information-default: var(--colors-information-default);
1091
+ --icons-information-badge: var(--colors-information-600);
1092
+ --icons-error-default: var(--colors-error-default);
1093
+ --icons-error-badge: var(--colors-error-default);
1094
+ --icons-warning-default: var(--colors-warning-default);
1095
+ --icons-warning-badge: var(--colors-warning-default);
1096
+ --icons-caution-default: var(--colors-caution-default);
1097
+ --icons-caution-badge: var(--colors-caution-700);
1098
+ --icons-disabled-default: var(--colors-neutral-400);
1099
+ --surface-neutral-bg-default: var(--colors-neutral-white);
1100
+ --surface-neutral-page-primary: var(--colors-neutral-white);
1101
+ --surface-notice-bg: var(--colors-notice-default);
1102
+ --surface-notice-bg-hover: var(--colors-notice-600);
1103
+ --surface-primary-bg: var(--colors-primary-default);
1104
+ --surface-success-bg: var(--colors-success-default);
1105
+ --surface-success-bg-hover: var(--colors-success-600);
1106
+ --surface-primary-bg-hover: var(--colors-primary-600);
1107
+ --surface-information-bg: var(--colors-information-default);
1108
+ --surface-information-bg-hover: var(--colors-information-600);
1109
+ --surface-error-bg: var(--colors-error-default);
1110
+ --surface-error-bg-hover: var(--colors-error-600);
1111
+ --surface-warning-bg: var(--colors-warning-default);
1112
+ --surface-warning-bg-hover: var(--colors-warning-600);
1113
+ --surface-caution-bg: var(--colors-caution-default);
1114
+ --surface-caution-bg-hover: var(--colors-caution-600);
1115
+ --surface-disabled-bg: var(--colors-neutral-white);
1116
+ --surface-neutral-bg-subtle: var(--colors-neutral-50);
1117
+ --surface-neutral-bg-muted: var(--colors-neutral-150);
1118
+ --surface-information-bg-subtle: var(--colors-information-50);
1119
+ --surface-error-bg-subtle: var(--colors-error-50);
1120
+ --text-default-sub-body: var(--colors-neutral-default);
1121
+ --text-default-helper: var(--colors-neutral-400);
1122
+ --text-default-label: var(--colors-neutral-900);
1123
+ --text-default-label-idle: var(--colors-neutral-default);
1124
+ --text-on-color-heading: var(--colors-neutral-50);
1125
+ --text-on-color-body: var(--colors-neutral-100);
1126
+ --text-on-color-label: var(--colors-neutral-50);
1127
+ --text-on-color-label-idle: var(--colors-neutral-300);
1128
+ --text-on-color-placeholder: var(--colors-neutral-200);
1129
+ --text-on-color-helper: var(--colors-neutral-200);
1130
+ --surface-warning-bg-subtle: var(--colors-warning-50);
1131
+ --surface-caution-bg-subtle: var(--colors-caution-50);
1132
+ --surface-success-bg-subtle: var(--colors-success-50);
1133
+ --surface-primary-bg-subtle: var(--colors-primary-50);
1134
+ --surface-notice-bg-subtle: var(--colors-notice-50);
1135
+ --surface-disabled-filled-button: var(--colors-neutral-200);
1136
+ --surface-neutral-page-secondary: var(--colors-neutral-50);
1137
+ --surface-secondary-primary-button-idle: var(--colors-secondary-900);
1138
+ --surface-secondary-primary-button-hover: var(--colors-secondary-700);
1139
+ --surface-neutral-secondary-button-idle: var(--colors-neutral-white);
1140
+ --surface-neutral-secondary-button-hover: var(--colors-neutral-100);
1141
+ --surface-success-mobile-button-idle: var(--colors-success-default);
1142
+ --surface-success-button-hover: var(--colors-success-600);
1143
+ --surface-error-ghost-button-hover: var(--colors-error-50);
1144
+ --border-neutral-default: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1145
+ --border-neutral-card-hover: var(--colors-neutral-200);
1146
+ --border-secondary-primary-button: var(--colors-secondary-900);
1147
+ --border-secondary-primary-button-hover: var(--colors-secondary-700);
1148
+ --border-neutral-secondary-button-idle: var(--colors-neutral-200);
1149
+ --border-neutral-secondary-button-hover: var(--colors-neutral-200);
1150
+ --border-disabled-default: color-mix(in srgb, var(--colors-neutral-200) 60%, transparent);
1151
+ --border-disabled-button: var(--colors-neutral-200);
1152
+ --surface-primary-default: var(--colors-primary-default);
1153
+ --surface-primary-default-hover: var(--colors-primary-600);
1154
+ --surface-primary-subtle: var(--colors-primary-50);
1155
+ --border-notice-default: var(--colors-notice-200);
1156
+ --border-notice-hover: var(--colors-notice-600);
1157
+ --border-notice-subtle: var(--colors-notice-50);
1158
+ --border-success-default: var(--colors-success-default);
1159
+ --border-success-default-hover: var(--colors-success-600);
1160
+ --border-success-subtle: var(--colors-success-50);
1161
+ --border-success-mobile-button: var(--colors-success-default);
1162
+ --border-success-mobile-button-pressed: var(--colors-success-700);
1163
+ --border-information-default: var(--colors-information-default);
1164
+ --border-information-hover: var(--colors-information-600);
1165
+ --border-information-subtle: var(--colors-information-50);
1166
+ --border-error-default: var(--colors-error-default);
1167
+ --border-error-hover: var(--colors-error-600);
1168
+ --border-error-subtle: var(--colors-error-50);
1169
+ --border-error-ghost-button-hover: var(--colors-error-50);
1170
+ --border-warning-default: var(--colors-warning-default);
1171
+ --border-warning-hover: var(--colors-warning-600);
1172
+ --border-warning-subtle: var(--colors-warning-50);
1173
+ --border-caution-default: var(--colors-caution-default);
1174
+ --border-caution-hover: var(--colors-caution-600);
1175
+ --border-caution-subtle: var(--colors-caution-50);
1176
+ --surface-neutral-toggle: var(--colors-neutral-default);
1177
+ --surface-neutral-toggle-hover: var(--colors-neutral-600);
1178
+ --surface-neutral-segment-selected: var(--colors-neutral-white);
1179
+ --surface-neutral-segment-hover: var(--colors-neutral-200);
1180
+ --text-disabled-label: var(--colors-neutral-400);
1181
+ --surface-secondary-primary-button-pressed: var(--colors-secondary-default);
1182
+ --border-secondary-primary-button-pressed: var(--colors-secondary-default);
1183
+ --border-neutral-secondary-button-pressed: var(--colors-neutral-300);
1184
+ --surface-neutral-secondary-button-pressed: var(--colors-neutral-100);
1185
+ --border-caution-desktop-badge: var(--colors-caution-300);
1186
+ --border-warning-desktop-badge: var(--colors-warning-300);
1187
+ --border-error-desktop-badge: var(--colors-error-200);
1188
+ --border-information-desktop-badge: var(--colors-information-200);
1189
+ --border-success-desktop-badge: var(--colors-success-200);
1190
+ --border-notice-desktop-badge: var(--colors-notice-300);
1191
+ --border-primary-desktop-badge: var(--colors-primary-300);
1192
+ --border-neutral-desktop-badge: var(--colors-neutral-200);
1193
+ --surface-caution-desktop-badge: var(--colors-caution-100);
1194
+ --surface-warning-desktop-badge: var(--colors-warning-50);
1195
+ --surface-error-desktop-badge: var(--colors-error-50);
1196
+ --surface-information-desktop-badge: var(--colors-information-50);
1197
+ --surface-success-desktop-badge: var(--colors-success-50);
1198
+ --surface-notice-desktop-badge: var(--colors-notice-50);
1199
+ --surface-primary-desktop-badge: var(--colors-primary-100);
1200
+ --surface-neutral-desktop-badge: var(--colors-neutral-100);
1201
+ --surface-neutral-desktop-badge-pressed: var(--colors-neutral-150);
1202
+ --border-neutral-desktop-badge-hover: var(--colors-neutral-300);
1203
+ --border-secondary-card-active: var(--colors-secondary-900);
1204
+ --text-highlight-default: var(--colors-highlight-default);
1205
+ --text-highlight-label: var(--colors-highlight-600);
1206
+ --icons-highlight-default: var(--colors-highlight-default);
1207
+ --icons-highlight-badge: var(--colors-highlight-600);
1208
+ --surface-highlight-bg: var(--colors-highlight-default);
1209
+ --surface-highlight-bg-hover: var(--colors-highlight-600);
1210
+ --surface-highlight-bg-subtle: var(--colors-highlight-50);
1211
+ --surface-highlight-desktop-badge: var(--colors-highlight-50);
1212
+ --border-highlight-default: var(--colors-highlight-default);
1213
+ --border-highlight-hover: var(--colors-highlight-600);
1214
+ --border-highlight-subtle: var(--colors-highlight-50);
1215
+ --border-highlight-desktop-badge: var(--colors-highlight-200);
1216
+ --text-secondary-default: var(--colors-secondary-default);
1217
+ --text-secondary-label: var(--colors-secondary-default);
1218
+ --icons-secondary-default: var(--colors-secondary-default);
1219
+ --icons-secondary-badge: var(--colors-secondary-600);
1220
+ --surface-secondary-bg: var(--colors-secondary-default);
1221
+ --surface-secondary-mobile-top-section-bg: var(--colors-secondary-default);
1222
+ --surface-secondary-bg-subtle: var(--colors-secondary-50);
1223
+ --surface-secondary-desktop-badge: var(--colors-secondary-50);
1224
+ --border-secondary-default: var(--colors-secondary-default);
1225
+ --border-secondary-hover: var(--colors-secondary-600);
1226
+ --border-secondary-subtle: var(--colors-secondary-50);
1227
+ --border-secondary-desktop-badge: var(--colors-secondary-200);
1228
+ --surface-neutral-table-header-idle: var(--colors-neutral-150);
1229
+ --surface-neutral-table-cell-idle: var(--colors-neutral-white);
1230
+ --surface-neutral-table-cell-hover: var(--colors-neutral-50);
1231
+ --surface-neutral-table-cell-pressed: var(--colors-neutral-100);
1232
+ --text-default-heading: var(--colors-neutral-900);
1233
+ --surface-success-button-pressed: var(--colors-success-700);
1234
+ --surface-error-ghost-button-pressed: var(--colors-error-100);
1235
+ --border-secondary-component-focus: var(--primitive-colors-yankees-blue-900);
1236
+ --border-error-ghost-button-pressed: var(--colors-error-100);
1237
+ --surface-error-destructive-button-idle: var(--colors-error-default);
1238
+ --surface-error-destructive-button-hover: var(--colors-error-600);
1239
+ --surface-error-destructive-button-pressed: var(--colors-error-700);
1240
+ --border-error-destructive-button-idle: var(--colors-error-default);
1241
+ --border-error-destructive-button-hover: var(--colors-error-600);
1242
+ --border-error-destructive-button-pressed: var(--colors-error-700);
1243
+ --icons-secondary-plain-button-hover: var(--colors-secondary-400);
1244
+ --text-secondary-plain-button-pressed: var(--colors-secondary-default);
1245
+ --icons-secondary-plain-button-pressed: var(--colors-secondary-default);
1246
+ --text-secondary-plain-button-hover: var(--colors-secondary-400);
1247
+ --surface-success-toggle-active: var(--colors-success-default);
1248
+ --border-secondary-underline-idle: var(--colors-neutral-900);
1249
+ --border-secondary-underline-hover: var(--colors-secondary-400);
1250
+ --border-secondary-underline-pressed: var(--colors-secondary-default);
1251
+ --border-disabled-underline: var(--colors-neutral-400);
1252
+ --border-neutral-ghost-button-hover: var(--colors-neutral-100);
1253
+ --border-neutral-ghost-button-pressed: var(--colors-neutral-150);
1254
+ --surface-neutral-ghost-button-hover: var(--colors-neutral-100);
1255
+ --surface-neutral-ghost-button-pressed: var(--colors-neutral-150);
1256
+ --surface-secondary-day-cell-active: var(--colors-secondary-900);
1257
+ --text-default-display: var(--colors-neutral-900);
1258
+ --surface-neutral-segment-idle: var(--colors-neutral-150);
1259
+ --surface-neutral-segment-track: var(--colors-neutral-150);
1260
+ --text-default-body: var(--colors-neutral-900);
1261
+ --surface-neutral-card-idle: var(--colors-neutral-white);
1262
+ --surface-neutral-card-hover: var(--colors-neutral-white);
1263
+ --surface-neutral-card-pressed: var(--colors-neutral-white);
1264
+ --text-secondary-plain-button-idle: var(--colors-secondary-900);
1265
+ --icons-secondary-plain-button-idle: var(--colors-secondary-900);
1266
+ --border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1267
+ --border-neutral-card-pressed: var(--colors-neutral-300);
1268
+ --surface-neutral-card-active: var(--colors-neutral-white);
1269
+ --surface-neutral-sidebar-main-navigation-hover: var(--colors-neutral-150);
1270
+ --surface-neutral-sidebar-main-navigation-pressed: var(--colors-neutral-150);
1271
+ --surface-neutral-sidebar-sub-navigation-hover: var(--colors-neutral-150);
1272
+ --surface-neutral-sidebar-sub-navigation-pressed: var(--colors-neutral-150);
1273
+ --surface-neutral-sidebar-sub-navigation-active: var(--colors-neutral-150);
1274
+ --surface-neutral-sidebar: var(--colors-neutral-white);
1275
+ --border-neutral-sidebar: var(--colors-neutral-200);
1276
+ --surface-neutral-sidebar-main-navigation-active: var(--colors-neutral-150);
1277
+ --surface-disabled-input-field: var(--colors-neutral-50);
1278
+ --surface-disabled-toggle-disabled: var(--colors-neutral-400);
1279
+ --text-disabled-placeholder-disabled: var(--colors-neutral-300);
1280
+ --surface-neutral-selector-field: var(--colors-neutral-white);
1281
+ --surface-neutral-input-field: var(--colors-neutral-white);
1282
+ --surface-disabled-secondary-button: var(--colors-neutral-white);
1283
+ --text-disabled-helper-disabled: var(--colors-neutral-300);
1284
+ --surface-neutral-chip-idle: var(--colors-neutral-white);
1285
+ --surface-neutral-chip-hover: var(--colors-neutral-100);
1286
+ --surface-neutral-chip-pressed: var(--colors-neutral-100);
1287
+ --surface-neutral-chip-active: var(--colors-neutral-white);
1288
+ --border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1289
+ --border-neutral-chip-hover: var(--colors-neutral-200);
1290
+ --border-neutral-chip-pressed: var(--colors-neutral-300);
1291
+ --border-secondary-chip-active: var(--colors-secondary-900);
1292
+ --border-neutral-sidebar-main-navigation-hover: var(--colors-neutral-150);
1293
+ --border-neutral-sidebar-main-navigation-pressed: var(--colors-neutral-200);
1294
+ --border-neutral-sidebar-sub-navigation-hover: var(--colors-neutral-150);
1295
+ --border-neutral-sidebar-main-navigation-active: var(--colors-neutral-150);
1296
+ --border-neutral-sidebar-sub-navigation-pressed: var(--colors-neutral-200);
1297
+ --border-neutral-sidebar-sub-navigation-active: var(--colors-neutral-150);
1298
+ --surface-disabled-selector-field: var(--colors-neutral-50);
1299
+ --surface-neutral-combobox-hover: var(--colors-neutral-100);
1300
+ --surface-neutral-combobox-pressed: var(--colors-neutral-150);
1301
+ --surface-neutral-combobox-active: var(--colors-neutral-100);
1302
+ --surface-neutral-dropdown-basic-hover: var(--colors-neutral-100);
1303
+ --surface-neutral-dropdown-basic-pressed: var(--colors-neutral-150);
1304
+ --surface-neutral-selection-hover: var(--colors-neutral-100);
1305
+ --surface-neutral-selection-pressed: var(--colors-neutral-150);
1306
+ --surface-neutral-day-cell-hover: var(--colors-neutral-100);
1307
+ --surface-neutral-combobox-idle: var(--colors-neutral-white);
1308
+ --surface-neutral-dropdown-basic-idle: var(--colors-neutral-white);
1309
+ --surface-neutral-day-cell-idle: var(--colors-neutral-white);
1310
+ --surface-neutral-selection-idle: var(--colors-neutral-white);
1311
+ --surface-neutral-selection-active: var(--colors-neutral-white);
1312
+ --surface-neutral-day-cell-pressed: var(--colors-neutral-150);
1313
+ --surface-secondary-time-picker-active: var(--colors-secondary-900);
1314
+ --surface-neutral-time-picker-idle: var(--colors-neutral-white);
1315
+ --surface-neutral-time-picker-hover: var(--colors-neutral-100);
1316
+ --surface-neutral-time-picker-pressed: var(--colors-neutral-150);
1317
+ --surface-neutral-dropdown-destructive-idle: var(--colors-neutral-white);
1318
+ --surface-error-dropdown-destructive-hover: var(--colors-error-50);
1319
+ --surface-error-dropdown-destructive-pressed: var(--colors-error-100);
1320
+ --border-error-dropdown-destructive-pressed: var(--colors-error-100);
1321
+ --border-neutral-combobox-hover: var(--colors-neutral-100);
1322
+ --border-neutral-combobox-pressed: var(--colors-neutral-150);
1323
+ --border-neutral-combobox-active: var(--colors-neutral-100);
1324
+ --border-neutral-dropdown-basic-hover: var(--colors-neutral-100);
1325
+ --border-neutral-dropdown-basic-pressed: var(--colors-neutral-150);
1326
+ --border-neutral-selection-hover: var(--colors-neutral-100);
1327
+ --border-neutral-selection-pressed: var(--colors-neutral-150);
1328
+ --border-neutral-day-cell-hover: var(--colors-neutral-100);
1329
+ --border-neutral-day-cell-pressed: var(--colors-neutral-150);
1330
+ --border-secondary-day-cell-active: var(--colors-secondary-900);
1331
+ --border-secondary-time-picker-active: var(--colors-secondary-900);
1332
+ --border-neutral-time-picker-hover: var(--colors-neutral-100);
1333
+ --border-neutral-time-picker-pressed: var(--colors-neutral-150);
1334
+ --surface-neutral-filter-group-idle: var(--colors-neutral-white);
1335
+ --border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1336
+ --surface-neutral-filter-group-hover: var(--colors-neutral-100);
1337
+ --border-neutral-filter-group-hover: var(--colors-neutral-200);
1338
+ --border-secondary-filter-group-active: var(--colors-secondary-900);
1339
+ --surface-neutral-filter-group-active: var(--colors-neutral-white);
1340
+ --surface-neutral-pagination-idle: var(--colors-neutral-white);
1341
+ --surface-neutral-pagination-hover: var(--colors-neutral-100);
1342
+ --surface-neutral-pagination-pressed: var(--colors-neutral-150);
1343
+ --surface-secondary-pagination-active: var(--colors-secondary-100);
1344
+ --border-neutral-pagination-hover: var(--colors-neutral-100);
1345
+ --border-neutral-pagination-pressed: var(--colors-neutral-150);
1346
+ --border-secondary-pagination-active: var(--colors-secondary-200);
1347
+ --surface-neutral-dropdown-advanced-hover: var(--colors-neutral-100);
1348
+ --surface-neutral-dropdown-advanced-pressed: var(--colors-neutral-150);
1349
+ --surface-neutral-dropdown-advanced-idle: var(--colors-neutral-white);
1350
+ --border-neutral-dropdown-advanced-hover: var(--colors-neutral-100);
1351
+ --border-neutral-dropdown-advanced-pressed: var(--colors-neutral-150);
1352
+ --surface-neutral-progress-bar-track: var(--colors-neutral-200);
1353
+ --surface-success-task-progress-bar: var(--colors-success-default);
1354
+ --surface-information-progress-bar: var(--colors-information-default);
1355
+ --surface-notice-avatar-bg: var(--colors-notice-300);
1356
+ --surface-warning-avatar-bg: var(--colors-warning-300);
1357
+ --surface-neutral-user-menu-idle: var(--colors-neutral-white);
1358
+ --surface-neutral-user-menu-hover: var(--colors-neutral-100);
1359
+ --surface-neutral-user-menu-pressed: var(--colors-neutral-150);
1360
+ --border-neutral-user-menu-hover: var(--colors-neutral-100);
1361
+ --border-neutral-user-menu-pressed: var(--colors-neutral-150);
1362
+ --border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-white) 80%, transparent);
1363
+ --surface-neutral-ghost-button-idle: var(--colors-neutral-white);
1364
+ --border-neutral-ghost-button-idle: var(--colors-neutral-white);
1365
+ --surface-success-bg-raised: var(--colors-success-100);
1366
+ --surface-error-bg-raised: var(--colors-error-100);
1367
+ --surface-warning-bg-raised: var(--colors-warning-100);
1368
+ --surface-neutral-sidetab-navigation-hover: var(--colors-neutral-150);
1369
+ --surface-neutral-sidetab-navigation-pressed: var(--colors-neutral-150);
1370
+ --surface-neutral-sidetab-navigation-active: var(--colors-neutral-150);
1371
+ --surface-neutral-sidetab: var(--colors-neutral-white);
1372
+ --border-neutral-sidetab: var(--colors-neutral-200);
1373
+ --border-neutral-sidetab-navigation-hover: var(--colors-neutral-150);
1374
+ --border-neutral-sidetab-navigation-pressed: var(--colors-neutral-200);
1375
+ --border-neutral-sidetab-navigation-active: var(--colors-neutral-150);
1376
+ --border-information-desktop-badge-hover: var(--colors-information-300);
1377
+ --border-information-desktop-badge-pressed: var(--colors-information-400);
1378
+ --surface-information-desktop-badge-hover: var(--colors-information-50);
1379
+ --surface-information-desktop-badge-pressed: var(--colors-information-100);
1380
+ --surface-neutral-sub-filter-tab-idle: var(--colors-neutral-white);
1381
+ --surface-neutral-sub-filter-tab-hover: var(--colors-neutral-100);
1382
+ --surface-neutral-sub-filter-tab-pressed: var(--colors-neutral-150);
1383
+ --surface-neutral-sub-filter-tab-active: var(--colors-neutral-white);
1384
+ --surface-neutral-top-filter-tab-idle: var(--colors-neutral-white);
1385
+ --surface-neutral-top-filter-tab-hover: var(--colors-neutral-50);
1386
+ --surface-neutral-top-filter-tab-pressed: var(--colors-neutral-100);
1387
+ --border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-white) 80%, transparent);
1388
+ --border-neutral-sub-filter-tab-hover: var(--colors-neutral-100);
1389
+ --border-neutral-sub-filter-tab-pressed: var(--colors-neutral-150);
1390
+ --border-neutral-top-filter-tab-pressed: var(--colors-neutral-300);
1391
+ --border-neutral-sub-filter-tab-active: var(--colors-neutral-white);
1392
+ --border-neutral-top-filter-tab-idle: var(--colors-neutral-200);
1393
+ --border-neutral-top-filter-tab-hover: var(--colors-neutral-200);
1394
+ --border-secondary-top-filter-tab-active: var(--colors-secondary-900);
1395
+ --border-secondary-slider-track-idle: var(--colors-secondary-200);
1396
+ --border-secondary-slider-control: var(--colors-secondary-default);
1397
+ --surface-secondary-slider-track-idle: var(--colors-secondary-200);
1398
+ --surface-secondary-slider-control: var(--colors-secondary-default);
1399
+ --surface-neutral-table-header-hover: var(--colors-neutral-200);
1400
+ --surface-neutral-table-header-pressed: var(--colors-neutral-300);
1401
+ --border-information-banner: var(--colors-information-200);
1402
+ --border-success-banner: var(--colors-success-200);
1403
+ --border-error-banner: var(--colors-error-200);
1404
+ --border-warning-banner: var(--colors-warning-200);
1405
+ --border-highlight-banner: var(--colors-highlight-200);
1406
+ --surface-secondary-table-cell-selected: var(--colors-secondary-50);
1407
+ --border-success-mobile-badge: var(--colors-success-200);
1408
+ --border-secondary-mobile-badge: var(--colors-secondary-200);
1409
+ --border-information-mobile-badge: var(--colors-information-200);
1410
+ --border-error-mobile-badge: var(--colors-error-200);
1411
+ --border-warning-mobile-badge: var(--colors-warning-200);
1412
+ --border-caution-mobile-badge: var(--colors-caution-300);
1413
+ --border-highlight-mobile-badge: var(--colors-highlight-200);
1414
+ --surface-neutral-mobile-badge: var(--colors-neutral-100);
1415
+ --border-neutral-mobile-badge: var(--colors-neutral-200);
1416
+ --surface-success-mobile-badge: var(--colors-success-50);
1417
+ --surface-information-mobile-badge: var(--colors-information-50);
1418
+ --border-primary-mobile-badge: var(--colors-primary-300);
1419
+ --surface-primary-mobile-badge: var(--colors-primary-100);
1420
+ --surface-error-mobile-badge: var(--colors-error-100);
1421
+ --surface-warning-mobile-badge: var(--colors-warning-50);
1422
+ --surface-caution-mobile-badge: var(--colors-caution-100);
1423
+ --surface-highlight-mobile-badge: var(--colors-highlight-50);
1424
+ --surface-secondary-mobile-badge: var(--colors-secondary-50);
1425
+ --surface-error-mobile-ghost-button-idle: var(--colors-error-50);
1426
+ --border-error-mobile-ghost-button-idle: var(--colors-error-50);
1427
+ --surface-neutral-mobile-ghost-button-idle: var(--colors-neutral-150);
1428
+ --surface-neutral-mobile-ghost-button-pressed: var(--colors-neutral-200);
1429
+ --surface-secondary-mobile-primary-button-idle: var(--colors-secondary-900);
1430
+ --surface-secondary-mobile-primary-button-pressed: var(--colors-secondary-default);
1431
+ --surface-success-mobile-button-pressed: var(--colors-success-700);
1432
+ --surface-error-mobile-ghost-button-pressed: var(--colors-error-100);
1433
+ --surface-error-mobile-destructive-button-idle: var(--colors-error-default);
1434
+ --surface-error-mobile-destructive-button-pressed: var(--colors-error-700);
1435
+ --border-neutral-mobile-ghost-button-idle: var(--colors-neutral-150);
1436
+ --border-neutral-mobile-ghost-button-pressed: var(--colors-neutral-200);
1437
+ --border-secondary-mobile-primary-button: var(--colors-secondary-900);
1438
+ --border-secondary-mobile-primary-button-pressed: var(--colors-secondary-default);
1439
+ --border-error-mobile-ghost-button-pressed: var(--colors-error-100);
1440
+ --border-error-mobile-destructive-button-idle: var(--colors-error-default);
1441
+ --border-error-mobile-destructive-button-pressed: var(--colors-error-700);
1442
+ --surface-neutral-mobile-secondary-button-idle: var(--colors-neutral-white);
1443
+ --surface-neutral-mobile-secondary-button-pressed: var(--colors-neutral-100);
1444
+ --border-neutral-mobile-secondary-button-idle: var(--colors-neutral-200);
1445
+ --border-neutral-mobile-secondary-button-pressed: var(--colors-neutral-300);
1446
+ --icons-primary-status-indicator: var(--colors-primary-default);
1447
+ --surface-neutral-mobile-metric-card-subtle: var(--colors-neutral-150);
1448
+ --border-neutral-mobile-metric-card-subtle: var(--colors-neutral-150);
1449
+ --surface-neutral-avatar-bg: var(--colors-neutral-200);
1450
+ --surface-neutral-mobile-chip-idle: var(--colors-neutral-white);
1451
+ --surface-neutral-mobile-chip-pressed: var(--colors-neutral-100);
1452
+ --border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1453
+ --border-neutral-mobile-chip-pressed: var(--colors-neutral-300);
1454
+ --border-secondary-mobile-chip-active: var(--colors-secondary-900);
1455
+ --surface-neutral-mobile-metric-card: var(--colors-neutral-white);
1456
+ --border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-150) 80%, transparent);
1457
+ --surface-neutral-mobile-day-cell-idle: var(--colors-neutral-white);
1458
+ --surface-neutral-mobile-day-cell-pressed: var(--colors-neutral-150);
1459
+ --surface-secondary-mobile-day-cell-active: var(--colors-secondary-900);
1460
+ --border-neutral-mobile-day-cell-pressed: var(--colors-neutral-150);
1461
+ --border-secondary-mobile-day-cell-active: var(--colors-secondary-900);
1462
+ --text-on-color-sub-heading: var(--colors-neutral-300);
1463
+ --icons-on-color-idle: var(--colors-neutral-200);
1464
+ --surface-neutral-mobile-list-card-title-section: var(--colors-neutral-50);
1465
+ --border-neutral-white: var(--colors-neutral-white);
1466
+ --surface-neutral-inactive-carousel-pagination: var(--colors-neutral-300);
1467
+ --surface-primary-active-carousel-pagination: var(--colors-primary-default);
1468
+ --surface-neutral-search-field: var(--colors-neutral-white);
1469
+ --surface-caution-rating-progress-bar: var(--colors-caution-default);
1470
+ --surface-neutral-mobile-chip-active: var(--colors-neutral-white);
1471
+ --surface-neutral-filter-group-pressed: var(--colors-neutral-150);
1472
+ --border-neutral-filter-group-pressed: var(--colors-neutral-300);
1473
+ --surface-secondary-bg-raised: var(--colors-secondary-100);
1474
+ --text-default-eyebrow-text: var(--colors-neutral-default);
1475
+ --icons-neutral-button: var(--colors-neutral-900);
1476
+ --icons-on-color-button: var(--colors-neutral-50);
1477
+ --surface-success-toggle-hover: var(--colors-success-600);
1478
+ --surface-neutral-accordion: var(--colors-neutral-white);
1479
+ --border-neutral-accordion: var(--colors-neutral-200);
1480
+ --border-neutral-banner: var(--colors-neutral-200);
1481
+ --surface-secondary-monogram: var(--colors-secondary-100);
1482
+ --border-secondary-monogram: var(--colors-secondary-200);
1483
+ --surface-secondary-avatar-bg: var(--colors-secondary-150);
1484
+ --surface-notice-mobile-badge: var(--colors-notice-50);
1485
+ --border-notice-mobile-badge: var(--colors-notice-300);
1486
+ --surface-neutral-bg-raised: var(--colors-neutral-100);
1487
+ --surface-neutral-popover: var(--colors-neutral-white);
1488
+ --surface-neutral-flyout: var(--colors-neutral-white);
1489
+ --surface-neutral-coachmark: var(--colors-neutral-white);
1490
+ --surface-secondary-tooltip: var(--colors-secondary-900);
1491
+ --surface-primary-alt-desktop-badge: var(--colors-primary-default);
1492
+ --border-primary-alt-desktop-badge: var(--colors-primary-default);
1493
+ --border-primary-default: var(--colors-primary-default);
1494
+ --border-neutral-toggle-button-idle: var(--colors-neutral-white);
1495
+ --border-neutral-toggle-button-hover: var(--colors-neutral-100);
1496
+ --border-neutral-toggle-button-pressed: var(--colors-neutral-150);
1497
+ --border-secondary-toggle-button-selected: var(--colors-secondary-200);
1498
+ --surface-neutral-toggle-button-idle: var(--colors-neutral-white);
1499
+ --surface-neutral-toggle-button-hover: var(--colors-neutral-100);
1500
+ --surface-neutral-toggle-button-pressed: var(--colors-neutral-150);
1501
+ --surface-secondary-toggle-button-selected: var(--colors-secondary-100);
1502
+ --surface-neutral-banner: var(--colors-neutral-100);
1503
+ --surface-primary-banner: var(--colors-primary-50);
1504
+ --surface-success-banner: var(--colors-success-50);
1505
+ --surface-information-banner: var(--colors-information-50);
1506
+ --surface-error-banner: var(--colors-error-50);
1507
+ --surface-warning-banner: var(--colors-warning-50);
1508
+ --surface-highlight-banner: var(--colors-highlight-50);
1509
+ --surface-notice-bg-alt: var(--colors-notice-900);
1510
+ --surface-highlight-bg-alt: var(--colors-highlight-900);
1511
+ --surface-caution-bg-alt: var(--colors-caution-900);
1512
+ --surface-warning-bg-alt: var(--colors-warning-900);
1513
+ --surface-error-bg-alt: var(--colors-error-900);
1514
+ --surface-information-bg-alt: var(--colors-information-900);
1515
+ --surface-success-bg-alt: var(--colors-success-900);
1516
+ --surface-secondary-bg-alt: var(--colors-secondary-900);
1517
+ --surface-primary-bg-alt: var(--colors-primary-900);
1518
+ --surface-neutral-bg-alt: var(--colors-neutral-black);
1519
+ --surface-secondary-table-cell-selected-pressed: var(--colors-secondary-50);
1520
+ --border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1521
+ --border-neutral-table-cell-pressed: var(--colors-neutral-300);
1522
+ --border-neutral-table-cell-hover: var(--colors-neutral-200);
1523
+ --border-secondary-table-cell-selected-pressed: var(--colors-secondary-200);
1524
+ --border-neutral-table-cell-selected: var(--colors-neutral-300);
1525
+ --border-neutral-input-field: var(--colors-neutral-200);
1526
+ --border-disabled-input-field: var(--colors-neutral-200);
1527
+ --border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
1528
+ --surface-neutral-desktop-badge-hover: var(--colors-neutral-100);
1529
+ --border-neutral-desktop-badge-pressed: var(--colors-neutral-400);
1530
+ }
1531
+
1063
1532
  [data-theme="dark"] {
1064
1533
  --text-default-sub-heading: var(--colors-neutral-300);
1065
1534
  --text-primary-default: var(--colors-primary-400);
@@ -1384,13 +1853,12 @@
1384
1853
  --surface-neutral-top-filter-tab-idle: var(--colors-neutral-black);
1385
1854
  --surface-neutral-top-filter-tab-hover: var(--colors-neutral-900);
1386
1855
  --surface-neutral-top-filter-tab-pressed: var(--colors-neutral-800);
1387
- --surface-neutral-top-filter-tab-active: var(--colors-neutral-black);
1388
1856
  --border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-black) 80%, transparent);
1389
1857
  --border-neutral-sub-filter-tab-hover: var(--colors-neutral-800);
1390
1858
  --border-neutral-sub-filter-tab-pressed: var(--colors-neutral-700);
1391
1859
  --border-neutral-top-filter-tab-pressed: var(--colors-neutral-700);
1392
1860
  --border-neutral-sub-filter-tab-active: var(--colors-neutral-black);
1393
- --border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
1861
+ --border-neutral-top-filter-tab-idle: var(--colors-neutral-600);
1394
1862
  --border-neutral-top-filter-tab-hover: var(--colors-neutral-600);
1395
1863
  --border-secondary-top-filter-tab-active: var(--colors-secondary-50);
1396
1864
  --border-secondary-slider-track-idle: var(--colors-secondary-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leta-io/design-tokens",
3
- "version": "0.4.1",
3
+ "version": "0.5.1",
4
4
  "description": "LETA design tokens — generated from Figma. Do not hand-edit dist/.",
5
5
  "repository": {
6
6
  "type": "git",