@putdotio/design 1.4.0 → 1.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.
@@ -247,35 +247,106 @@
247
247
  "type": "color",
248
248
  "mode": "light",
249
249
  "value": "hsl(0, 0%, 100%)",
250
- "originalValue": "{surface.light.appBg}"
250
+ "originalValue": "{component.field.background}"
251
251
  },
252
252
  "component.input.backgroundDark": {
253
253
  "cssName": "--input-bg",
254
254
  "type": "color",
255
255
  "mode": "dark",
256
256
  "value": "hsl(0, 0%, 8.5%)",
257
- "originalValue": "{surface.dark.appBg}"
257
+ "originalValue": "{component.field.backgroundDark}"
258
258
  },
259
259
  "component.input.border": {
260
260
  "cssName": "--input-border",
261
261
  "type": "color",
262
262
  "mode": "light",
263
263
  "value": "hsl(0, 0%, 85.8%)",
264
- "originalValue": "{color.neutral.light.border}"
264
+ "originalValue": "{component.field.border}"
265
265
  },
266
266
  "component.input.borderDark": {
267
267
  "cssName": "--input-border",
268
268
  "type": "color",
269
269
  "mode": "dark",
270
270
  "value": "hsl(0, 0%, 24.3%)",
271
- "originalValue": "{color.neutral.dark.border}"
271
+ "originalValue": "{component.field.borderDark}"
272
272
  },
273
273
  "component.input.radius": {
274
274
  "cssName": "--input-radius",
275
275
  "type": "dimension",
276
276
  "mode": "global",
277
277
  "value": "6px",
278
- "originalValue": "{radius.default}"
278
+ "originalValue": "{component.field.radius}"
279
+ },
280
+ "component.input.borderHover": {
281
+ "cssName": "--input-border-hover",
282
+ "type": "color",
283
+ "mode": "light",
284
+ "value": "hsl(0, 0%, 78.0%)",
285
+ "originalValue": "{component.field.borderHover}",
286
+ "description": "shadcn-friendly alias of --field-border-hover. Always aliases the field token so the two name systems cannot drift."
287
+ },
288
+ "component.input.borderHoverDark": {
289
+ "cssName": "--input-border-hover",
290
+ "type": "color",
291
+ "mode": "dark",
292
+ "value": "hsl(0, 0%, 31.2%)",
293
+ "originalValue": "{component.field.borderHoverDark}"
294
+ },
295
+ "component.input.borderFocus": {
296
+ "cssName": "--input-border-focus",
297
+ "type": "color",
298
+ "mode": "light",
299
+ "value": "hsl(0, 0%, 78.0%)",
300
+ "originalValue": "{component.field.borderFocus}"
301
+ },
302
+ "component.input.borderFocusDark": {
303
+ "cssName": "--input-border-focus",
304
+ "type": "color",
305
+ "mode": "dark",
306
+ "value": "hsl(0, 0%, 31.2%)",
307
+ "originalValue": "{component.field.borderFocusDark}"
308
+ },
309
+ "component.input.ring": {
310
+ "cssName": "--input-ring",
311
+ "type": "string",
312
+ "mode": "light",
313
+ "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
314
+ "originalValue": "{component.field.ring}"
315
+ },
316
+ "component.input.ringDark": {
317
+ "cssName": "--input-ring",
318
+ "type": "string",
319
+ "mode": "dark",
320
+ "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
321
+ "originalValue": "{component.field.ringDark}"
322
+ },
323
+ "component.input.text": {
324
+ "cssName": "--input-text",
325
+ "type": "color",
326
+ "mode": "light",
327
+ "value": "hsl(0, 0%, 9.0%)",
328
+ "originalValue": "{component.field.text}"
329
+ },
330
+ "component.input.textDark": {
331
+ "cssName": "--input-text",
332
+ "type": "color",
333
+ "mode": "dark",
334
+ "value": "hsl(0, 0%, 93.0%)",
335
+ "originalValue": "{component.field.textDark}"
336
+ },
337
+ "component.input.placeholder": {
338
+ "cssName": "--input-placeholder",
339
+ "type": "color",
340
+ "mode": "light",
341
+ "value": "hsl(0, 0%, 43.5%)",
342
+ "originalValue": "{component.field.placeholder}"
343
+ },
344
+ "component.input.placeholderDark": {
345
+ "cssName": "--input-placeholder",
346
+ "type": "color",
347
+ "mode": "dark",
348
+ "value": "hsl(0, 0%, 62.8%)",
349
+ "originalValue": "{component.field.placeholderDark}"
279
350
  },
280
351
  "component.field.background": {
281
352
  "cssName": "--field-bg",
@@ -389,6 +460,14 @@
389
460
  "originalValue": "{color.neutral.dark.textSecondary}",
390
461
  "description": "Dark-mode form-control placeholder color."
391
462
  },
463
+ "component.field.radius": {
464
+ "cssName": "--field-radius",
465
+ "type": "dimension",
466
+ "mode": "global",
467
+ "value": "6px",
468
+ "originalValue": "{radius.default}",
469
+ "description": "Shared form-control radius."
470
+ },
392
471
  "component.field.ring": {
393
472
  "cssName": "--field-ring",
394
473
  "type": "string",
@@ -750,12 +829,42 @@
750
829
  "value": "hsl(0, 0%, 11.0%)",
751
830
  "originalValue": "{surface.dark.listItemBgHover}"
752
831
  },
832
+ "component.fileRow.activeBackground": {
833
+ "cssName": "--file-row-bg-active",
834
+ "type": "color",
835
+ "mode": "light",
836
+ "value": "hsl(0, 0%, 97.3%)",
837
+ "originalValue": "{surface.light.listItemBgActive}"
838
+ },
839
+ "component.fileRow.activeBackgroundDark": {
840
+ "cssName": "--file-row-bg-active",
841
+ "type": "color",
842
+ "mode": "dark",
843
+ "value": "hsl(0, 0%, 11.0%)",
844
+ "originalValue": "{surface.dark.listItemBgActive}"
845
+ },
846
+ "component.fileRow.border": {
847
+ "cssName": "--file-row-border",
848
+ "type": "color",
849
+ "mode": "light",
850
+ "value": "hsl(0, 0%, 90.9%)",
851
+ "originalValue": "{surface.light.listItemBorder}",
852
+ "description": "Row divider. File lists divide with a hairline, never zebra stripes or per-row cards."
853
+ },
854
+ "component.fileRow.borderDark": {
855
+ "cssName": "--file-row-border",
856
+ "type": "color",
857
+ "mode": "dark",
858
+ "value": "hsl(0, 0%, 17.9%)",
859
+ "originalValue": "{surface.dark.listItemBorder}"
860
+ },
753
861
  "component.fileRow.icon": {
754
862
  "cssName": "--file-row-icon",
755
863
  "type": "color",
756
864
  "mode": "global",
757
865
  "value": "hsl(44.7, 97.9%, 63.1%)",
758
- "originalValue": "{color.brand.yellow}"
866
+ "originalValue": "{color.brand.yellow}",
867
+ "description": "Every file kind takes this, not just the folder — folder, video, audio, image, archive, generic file alike. Utility and chrome icons stay neutral."
759
868
  },
760
869
  "component.notification.infoBackground": {
761
870
  "cssName": "--notification-info-bg",
@@ -785,103 +894,511 @@
785
894
  "value": "hsl(0, 55%, 15%)",
786
895
  "originalValue": "{color.red.dark.componentBg}"
787
896
  },
788
- "context.tv.surface.0": {
789
- "cssName": "--surf-0",
897
+ "component.notification.background": {
898
+ "cssName": "--notification-bg",
790
899
  "type": "color",
791
- "mode": "tv",
792
- "value": "hsl(0, 0%, 0%)",
793
- "originalValue": "hsl(0, 0%, 0%)"
900
+ "mode": "light",
901
+ "value": "hsl(0, 0%, 95.1%)",
902
+ "originalValue": "{color.neutral.light.componentBg}",
903
+ "description": "Default toast / inline notification surface."
794
904
  },
795
- "context.tv.surface.1": {
796
- "cssName": "--surf-1",
905
+ "component.notification.backgroundDark": {
906
+ "cssName": "--notification-bg",
797
907
  "type": "color",
798
- "mode": "tv",
799
- "value": "hsl(0, 0%, 3.9%)",
800
- "originalValue": "hsl(0, 0%, 3.9%)"
908
+ "mode": "dark",
909
+ "value": "hsl(0, 0%, 13.6%)",
910
+ "originalValue": "{color.neutral.dark.componentBg}"
801
911
  },
802
- "context.tv.surface.2": {
803
- "cssName": "--surf-2",
912
+ "component.notification.border": {
913
+ "cssName": "--notification-border",
804
914
  "type": "color",
805
- "mode": "tv",
806
- "value": "hsl(0, 0%, 8.6%)",
807
- "originalValue": "hsl(0, 0%, 8.6%)"
915
+ "mode": "light",
916
+ "value": "hsl(0, 0%, 88.7%)",
917
+ "originalValue": "{color.neutral.light.line}"
808
918
  },
809
- "context.tv.surface.3": {
810
- "cssName": "--surf-3",
919
+ "component.notification.borderDark": {
920
+ "cssName": "--notification-border",
811
921
  "type": "color",
812
- "mode": "tv",
813
- "value": "hsl(0, 0%, 12.2%)",
814
- "originalValue": "hsl(0, 0%, 12.2%)"
922
+ "mode": "dark",
923
+ "value": "hsl(0, 0%, 20.5%)",
924
+ "originalValue": "{color.neutral.dark.line}"
815
925
  },
816
- "context.tv.text.primary": {
817
- "cssName": "--text-1",
926
+ "component.notification.foreground": {
927
+ "cssName": "--notification-fg",
818
928
  "type": "color",
819
- "mode": "tv",
820
- "value": "hsl(0, 0%, 95.7%)",
821
- "originalValue": "hsl(0, 0%, 95.7%)"
929
+ "mode": "light",
930
+ "value": "hsl(0, 0%, 9.0%)",
931
+ "originalValue": "{color.neutral.light.text}"
822
932
  },
823
- "context.tv.text.secondary": {
824
- "cssName": "--text-2",
933
+ "component.notification.foregroundDark": {
934
+ "cssName": "--notification-fg",
825
935
  "type": "color",
826
- "mode": "tv",
827
- "value": "hsla(0, 0%, 95.7%, 0.62)",
828
- "originalValue": "hsla(0, 0%, 95.7%, 0.62)"
936
+ "mode": "dark",
937
+ "value": "hsl(0, 0%, 93.0%)",
938
+ "originalValue": "{color.neutral.dark.text}"
829
939
  },
830
- "context.tv.text.tertiary": {
831
- "cssName": "--text-3",
940
+ "component.notification.icon": {
941
+ "cssName": "--notification-icon",
832
942
  "type": "color",
833
- "mode": "tv",
834
- "value": "hsla(0, 0%, 95.7%, 0.38)",
835
- "originalValue": "hsla(0, 0%, 95.7%, 0.38)"
943
+ "mode": "light",
944
+ "value": "hsl(0, 0%, 43.5%)",
945
+ "originalValue": "{color.neutral.light.textSecondary}"
836
946
  },
837
- "context.tv.glass.1": {
838
- "cssName": "--glass-1-bg",
947
+ "component.notification.iconDark": {
948
+ "cssName": "--notification-icon",
839
949
  "type": "color",
840
- "mode": "tv",
841
- "value": "hsla(0, 0%, 100%, 0.06)",
842
- "originalValue": "hsla(0, 0%, 100%, 0.06)"
950
+ "mode": "dark",
951
+ "value": "hsl(0, 0%, 62.8%)",
952
+ "originalValue": "{color.neutral.dark.textSecondary}"
843
953
  },
844
- "context.tv.glass.2": {
845
- "cssName": "--glass-2-bg",
954
+ "component.notification.successBackground": {
955
+ "cssName": "--notification-success-bg",
846
956
  "type": "color",
847
- "mode": "tv",
848
- "value": "hsla(0, 0%, 100%, 0.10)",
849
- "originalValue": "hsla(0, 0%, 100%, 0.10)"
957
+ "mode": "light",
958
+ "value": "hsl(140, 41%, 97%)",
959
+ "originalValue": "{color.green.light.bgSecondary}"
850
960
  },
851
- "context.tv.glass.3": {
852
- "cssName": "--glass-3-bg",
961
+ "component.notification.successBackgroundDark": {
962
+ "cssName": "--notification-success-bg",
853
963
  "type": "color",
854
- "mode": "tv",
855
- "value": "hsla(0, 0%, 100%, 0.14)",
856
- "originalValue": "hsla(0, 0%, 100%, 0.14)"
964
+ "mode": "dark",
965
+ "value": "hsl(149, 21%, 9%)",
966
+ "originalValue": "{color.green.dark.bgSecondary}"
857
967
  },
858
- "context.tv.glass.border": {
859
- "cssName": "--glass-border",
968
+ "component.notification.successBorder": {
969
+ "cssName": "--notification-success-border",
860
970
  "type": "color",
861
- "mode": "tv",
862
- "value": "hsla(0, 0%, 100%, 0.12)",
863
- "originalValue": "hsla(0, 0%, 100%, 0.12)"
971
+ "mode": "light",
972
+ "value": "hsl(140, 39%, 68%)",
973
+ "originalValue": "{color.green.light.border}"
974
+ },
975
+ "component.notification.successBorderDark": {
976
+ "cssName": "--notification-success-border",
977
+ "type": "color",
978
+ "mode": "dark",
979
+ "value": "hsl(146, 41%, 29%)",
980
+ "originalValue": "{color.green.dark.border}"
981
+ },
982
+ "component.notification.successForeground": {
983
+ "cssName": "--notification-success-fg",
984
+ "type": "color",
985
+ "mode": "light",
986
+ "value": "hsl(146, 35%, 17%)",
987
+ "originalValue": "{color.green.light.text}"
988
+ },
989
+ "component.notification.successForegroundDark": {
990
+ "cssName": "--notification-success-fg",
991
+ "type": "color",
992
+ "mode": "dark",
993
+ "value": "hsl(142, 71%, 82%)",
994
+ "originalValue": "{color.green.dark.text}"
995
+ },
996
+ "component.notification.dangerBorder": {
997
+ "cssName": "--notification-danger-border",
998
+ "type": "color",
999
+ "mode": "light",
1000
+ "value": "hsl(2, 81%, 80%)",
1001
+ "originalValue": "{color.red.light.border}"
1002
+ },
1003
+ "component.notification.dangerBorderDark": {
1004
+ "cssName": "--notification-danger-border",
1005
+ "type": "color",
1006
+ "mode": "dark",
1007
+ "value": "hsl(0, 46%, 38%)",
1008
+ "originalValue": "{color.red.dark.border}"
1009
+ },
1010
+ "component.notification.dangerForeground": {
1011
+ "cssName": "--notification-danger-fg",
1012
+ "type": "color",
1013
+ "mode": "light",
1014
+ "value": "hsl(358, 62%, 24%)",
1015
+ "originalValue": "{color.red.light.text}"
1016
+ },
1017
+ "component.notification.dangerForegroundDark": {
1018
+ "cssName": "--notification-danger-fg",
1019
+ "type": "color",
1020
+ "mode": "dark",
1021
+ "value": "hsl(5, 100%, 91%)",
1022
+ "originalValue": "{color.red.dark.text}"
1023
+ },
1024
+ "component.menu.background": {
1025
+ "cssName": "--menu-bg",
1026
+ "type": "color",
1027
+ "mode": "light",
1028
+ "value": "hsl(0, 0%, 95.1%)",
1029
+ "originalValue": "{color.neutral.light.componentBg}",
1030
+ "description": "Floating menu surface."
1031
+ },
1032
+ "component.menu.backgroundDark": {
1033
+ "cssName": "--menu-bg",
1034
+ "type": "color",
1035
+ "mode": "dark",
1036
+ "value": "hsl(0, 0%, 13.6%)",
1037
+ "originalValue": "{color.neutral.dark.componentBg}"
1038
+ },
1039
+ "component.menu.border": {
1040
+ "cssName": "--menu-border",
1041
+ "type": "color",
1042
+ "mode": "light",
1043
+ "value": "hsl(0, 0%, 88.7%)",
1044
+ "originalValue": "{color.neutral.light.line}"
1045
+ },
1046
+ "component.menu.borderDark": {
1047
+ "cssName": "--menu-border",
1048
+ "type": "color",
1049
+ "mode": "dark",
1050
+ "value": "hsl(0, 0%, 20.5%)",
1051
+ "originalValue": "{color.neutral.dark.line}"
1052
+ },
1053
+ "component.menu.radius": {
1054
+ "cssName": "--menu-radius",
1055
+ "type": "dimension",
1056
+ "mode": "global",
1057
+ "value": "8px",
1058
+ "originalValue": "{radius.md}"
1059
+ },
1060
+ "component.menu.shadow": {
1061
+ "cssName": "--menu-shadow",
1062
+ "type": "string",
1063
+ "mode": "light",
1064
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
1065
+ "originalValue": "{elevation.lg}"
1066
+ },
1067
+ "component.menu.shadowDark": {
1068
+ "cssName": "--menu-shadow",
1069
+ "type": "string",
1070
+ "mode": "dark",
1071
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
1072
+ "originalValue": "{surface.dark.shadowLg}"
1073
+ },
1074
+ "component.menu.itemBackgroundHover": {
1075
+ "cssName": "--menu-item-bg-hover",
1076
+ "type": "color",
1077
+ "mode": "light",
1078
+ "value": "hsl(0, 0%, 93.0%)",
1079
+ "originalValue": "{color.neutral.light.componentBgHover}"
1080
+ },
1081
+ "component.menu.itemBackgroundHoverDark": {
1082
+ "cssName": "--menu-item-bg-hover",
1083
+ "type": "color",
1084
+ "mode": "dark",
1085
+ "value": "hsl(0, 0%, 15.8%)",
1086
+ "originalValue": "{color.neutral.dark.componentBgHover}"
1087
+ },
1088
+ "component.menu.itemText": {
1089
+ "cssName": "--menu-item-text",
1090
+ "type": "color",
1091
+ "mode": "light",
1092
+ "value": "hsl(0, 0%, 9.0%)",
1093
+ "originalValue": "{color.neutral.light.text}"
1094
+ },
1095
+ "component.menu.itemTextDark": {
1096
+ "cssName": "--menu-item-text",
1097
+ "type": "color",
1098
+ "mode": "dark",
1099
+ "value": "hsl(0, 0%, 93.0%)",
1100
+ "originalValue": "{color.neutral.dark.text}"
1101
+ },
1102
+ "component.menu.itemIcon": {
1103
+ "cssName": "--menu-item-icon",
1104
+ "type": "color",
1105
+ "mode": "light",
1106
+ "value": "hsl(0, 0%, 43.5%)",
1107
+ "originalValue": "{color.neutral.light.textSecondary}"
1108
+ },
1109
+ "component.menu.itemIconDark": {
1110
+ "cssName": "--menu-item-icon",
1111
+ "type": "color",
1112
+ "mode": "dark",
1113
+ "value": "hsl(0, 0%, 62.8%)",
1114
+ "originalValue": "{color.neutral.dark.textSecondary}"
1115
+ },
1116
+ "component.menu.itemShortcut": {
1117
+ "cssName": "--menu-item-shortcut",
1118
+ "type": "color",
1119
+ "mode": "light",
1120
+ "value": "hsl(0, 0%, 43.5%)",
1121
+ "originalValue": "{color.neutral.light.textSecondary}"
1122
+ },
1123
+ "component.menu.itemShortcutDark": {
1124
+ "cssName": "--menu-item-shortcut",
1125
+ "type": "color",
1126
+ "mode": "dark",
1127
+ "value": "hsl(0, 0%, 62.8%)",
1128
+ "originalValue": "{color.neutral.dark.textSecondary}"
1129
+ },
1130
+ "component.menu.itemDangerText": {
1131
+ "cssName": "--menu-item-danger-text",
1132
+ "type": "color",
1133
+ "mode": "light",
1134
+ "value": "hsl(355, 64%, 49%)",
1135
+ "originalValue": "{color.red.light.textSecondary}"
1136
+ },
1137
+ "component.menu.itemDangerTextDark": {
1138
+ "cssName": "--menu-item-danger-text",
1139
+ "type": "color",
1140
+ "mode": "dark",
1141
+ "value": "hsl(2, 100%, 77%)",
1142
+ "originalValue": "{color.red.dark.textSecondary}"
1143
+ },
1144
+ "component.menu.itemDangerBackgroundHover": {
1145
+ "cssName": "--menu-item-danger-bg-hover",
1146
+ "type": "color",
1147
+ "mode": "light",
1148
+ "value": "hsl(2, 100%, 96%)",
1149
+ "originalValue": "{color.red.light.componentBg}"
1150
+ },
1151
+ "component.menu.itemDangerBackgroundHoverDark": {
1152
+ "cssName": "--menu-item-danger-bg-hover",
1153
+ "type": "color",
1154
+ "mode": "dark",
1155
+ "value": "hsl(0, 55%, 15%)",
1156
+ "originalValue": "{color.red.dark.componentBg}"
1157
+ },
1158
+ "component.menu.itemHeight": {
1159
+ "cssName": "--menu-item-height",
1160
+ "type": "dimension",
1161
+ "mode": "global",
1162
+ "value": "32px",
1163
+ "originalValue": "32px"
1164
+ },
1165
+ "component.menu.separator": {
1166
+ "cssName": "--menu-separator",
1167
+ "type": "color",
1168
+ "mode": "light",
1169
+ "value": "hsl(0, 0%, 88.7%)",
1170
+ "originalValue": "{color.neutral.light.line}"
1171
+ },
1172
+ "component.menu.separatorDark": {
1173
+ "cssName": "--menu-separator",
1174
+ "type": "color",
1175
+ "mode": "dark",
1176
+ "value": "hsl(0, 0%, 20.5%)",
1177
+ "originalValue": "{color.neutral.dark.line}"
1178
+ },
1179
+ "component.menu.label": {
1180
+ "cssName": "--menu-label",
1181
+ "type": "color",
1182
+ "mode": "light",
1183
+ "value": "hsl(0, 0%, 43.5%)",
1184
+ "originalValue": "{color.neutral.light.textSecondary}"
1185
+ },
1186
+ "component.menu.labelDark": {
1187
+ "cssName": "--menu-label",
1188
+ "type": "color",
1189
+ "mode": "dark",
1190
+ "value": "hsl(0, 0%, 62.8%)",
1191
+ "originalValue": "{color.neutral.dark.textSecondary}"
1192
+ },
1193
+ "component.palette.background": {
1194
+ "cssName": "--palette-bg",
1195
+ "type": "color",
1196
+ "mode": "light",
1197
+ "value": "hsl(0, 0%, 95.1%)",
1198
+ "originalValue": "{color.neutral.light.componentBg}",
1199
+ "description": "Command palette surface."
1200
+ },
1201
+ "component.palette.backgroundDark": {
1202
+ "cssName": "--palette-bg",
1203
+ "type": "color",
1204
+ "mode": "dark",
1205
+ "value": "hsl(0, 0%, 13.6%)",
1206
+ "originalValue": "{color.neutral.dark.componentBg}"
1207
+ },
1208
+ "component.palette.border": {
1209
+ "cssName": "--palette-border",
1210
+ "type": "color",
1211
+ "mode": "light",
1212
+ "value": "hsl(0, 0%, 88.7%)",
1213
+ "originalValue": "{color.neutral.light.line}"
864
1214
  },
865
- "context.tv.glass.borderStrong": {
866
- "cssName": "--glass-border-strong",
1215
+ "component.palette.borderDark": {
1216
+ "cssName": "--palette-border",
1217
+ "type": "color",
1218
+ "mode": "dark",
1219
+ "value": "hsl(0, 0%, 20.5%)",
1220
+ "originalValue": "{color.neutral.dark.line}"
1221
+ },
1222
+ "component.palette.shadow": {
1223
+ "cssName": "--palette-shadow",
1224
+ "type": "string",
1225
+ "mode": "light",
1226
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
1227
+ "originalValue": "{elevation.lg}"
1228
+ },
1229
+ "component.palette.shadowDark": {
1230
+ "cssName": "--palette-shadow",
1231
+ "type": "string",
1232
+ "mode": "dark",
1233
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
1234
+ "originalValue": "{surface.dark.shadowLg}"
1235
+ },
1236
+ "component.palette.scrim": {
1237
+ "cssName": "--palette-scrim",
1238
+ "type": "color",
1239
+ "mode": "light",
1240
+ "value": "hsla(0, 0%, 0%, 0.439)",
1241
+ "originalValue": "{surface.light.overlayFull}"
1242
+ },
1243
+ "component.palette.scrimDark": {
1244
+ "cssName": "--palette-scrim",
1245
+ "type": "color",
1246
+ "mode": "dark",
1247
+ "value": "hsla(0, 0%, 0%, 0.565)",
1248
+ "originalValue": "{surface.dark.overlayFull}"
1249
+ },
1250
+ "component.palette.width": {
1251
+ "cssName": "--palette-width",
1252
+ "type": "dimension",
1253
+ "mode": "global",
1254
+ "value": "560px",
1255
+ "originalValue": "560px"
1256
+ },
1257
+ "component.palette.inputHeight": {
1258
+ "cssName": "--palette-input-height",
1259
+ "type": "dimension",
1260
+ "mode": "global",
1261
+ "value": "48px",
1262
+ "originalValue": "48px"
1263
+ },
1264
+ "component.palette.itemHeight": {
1265
+ "cssName": "--palette-item-height",
1266
+ "type": "dimension",
1267
+ "mode": "global",
1268
+ "value": "36px",
1269
+ "originalValue": "36px"
1270
+ },
1271
+ "component.palette.itemBackgroundActive": {
1272
+ "cssName": "--palette-item-bg-active",
1273
+ "type": "color",
1274
+ "mode": "light",
1275
+ "value": "hsl(0, 0%, 93.0%)",
1276
+ "originalValue": "{color.neutral.light.componentBgHover}"
1277
+ },
1278
+ "component.palette.itemBackgroundActiveDark": {
1279
+ "cssName": "--palette-item-bg-active",
1280
+ "type": "color",
1281
+ "mode": "dark",
1282
+ "value": "hsl(0, 0%, 15.8%)",
1283
+ "originalValue": "{color.neutral.dark.componentBgHover}"
1284
+ },
1285
+ "component.palette.groupLabel": {
1286
+ "cssName": "--palette-group-label",
1287
+ "type": "color",
1288
+ "mode": "light",
1289
+ "value": "hsl(0, 0%, 43.5%)",
1290
+ "originalValue": "{color.neutral.light.textSecondary}"
1291
+ },
1292
+ "component.palette.groupLabelDark": {
1293
+ "cssName": "--palette-group-label",
1294
+ "type": "color",
1295
+ "mode": "dark",
1296
+ "value": "hsl(0, 0%, 62.8%)",
1297
+ "originalValue": "{color.neutral.dark.textSecondary}"
1298
+ },
1299
+ "component.palette.itemMeta": {
1300
+ "cssName": "--palette-item-meta",
1301
+ "type": "color",
1302
+ "mode": "light",
1303
+ "value": "hsl(0, 0%, 43.5%)",
1304
+ "originalValue": "{color.neutral.light.textSecondary}"
1305
+ },
1306
+ "component.palette.itemMetaDark": {
1307
+ "cssName": "--palette-item-meta",
1308
+ "type": "color",
1309
+ "mode": "dark",
1310
+ "value": "hsl(0, 0%, 62.8%)",
1311
+ "originalValue": "{color.neutral.dark.textSecondary}"
1312
+ },
1313
+ "component.sheet.background": {
1314
+ "cssName": "--sheet-bg",
1315
+ "type": "color",
1316
+ "mode": "light",
1317
+ "value": "hsl(0, 0%, 95.1%)",
1318
+ "originalValue": "{color.neutral.light.componentBg}",
1319
+ "description": "Right-side detail panel surface."
1320
+ },
1321
+ "component.sheet.backgroundDark": {
1322
+ "cssName": "--sheet-bg",
1323
+ "type": "color",
1324
+ "mode": "dark",
1325
+ "value": "hsl(0, 0%, 13.6%)",
1326
+ "originalValue": "{color.neutral.dark.componentBg}"
1327
+ },
1328
+ "component.sheet.border": {
1329
+ "cssName": "--sheet-border",
1330
+ "type": "color",
1331
+ "mode": "light",
1332
+ "value": "hsl(0, 0%, 88.7%)",
1333
+ "originalValue": "{color.neutral.light.line}"
1334
+ },
1335
+ "component.sheet.borderDark": {
1336
+ "cssName": "--sheet-border",
1337
+ "type": "color",
1338
+ "mode": "dark",
1339
+ "value": "hsl(0, 0%, 20.5%)",
1340
+ "originalValue": "{color.neutral.dark.line}"
1341
+ },
1342
+ "component.sheet.shadow": {
1343
+ "cssName": "--sheet-shadow",
1344
+ "type": "string",
1345
+ "mode": "light",
1346
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
1347
+ "originalValue": "{elevation.lg}"
1348
+ },
1349
+ "component.sheet.shadowDark": {
1350
+ "cssName": "--sheet-shadow",
1351
+ "type": "string",
1352
+ "mode": "dark",
1353
+ "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
1354
+ "originalValue": "{surface.dark.shadowLg}"
1355
+ },
1356
+ "component.sheet.scrim": {
1357
+ "cssName": "--sheet-scrim",
1358
+ "type": "color",
1359
+ "mode": "light",
1360
+ "value": "hsla(0, 0%, 0%, 0.439)",
1361
+ "originalValue": "{surface.light.overlayFull}"
1362
+ },
1363
+ "component.sheet.scrimDark": {
1364
+ "cssName": "--sheet-scrim",
1365
+ "type": "color",
1366
+ "mode": "dark",
1367
+ "value": "hsla(0, 0%, 0%, 0.565)",
1368
+ "originalValue": "{surface.dark.overlayFull}"
1369
+ },
1370
+ "component.sheet.width": {
1371
+ "cssName": "--sheet-width",
1372
+ "type": "dimension",
1373
+ "mode": "global",
1374
+ "value": "380px",
1375
+ "originalValue": "380px",
1376
+ "description": "Fixed on web. Touch surfaces use a bottom sheet instead."
1377
+ },
1378
+ "context.tv.text.primary": {
1379
+ "cssName": "--text-1",
867
1380
  "type": "color",
868
1381
  "mode": "tv",
869
- "value": "hsla(0, 0%, 100%, 0.22)",
870
- "originalValue": "hsla(0, 0%, 100%, 0.22)"
1382
+ "value": "hsl(0, 0%, 93.0%)",
1383
+ "originalValue": "{color.neutral.dark.text}",
1384
+ "description": "Row titles, modal option labels, and button labels."
871
1385
  },
872
- "context.tv.focus.ring": {
873
- "cssName": "--focus-ring",
1386
+ "context.tv.text.secondary": {
1387
+ "cssName": "--text-2",
874
1388
  "type": "color",
875
1389
  "mode": "tv",
876
- "value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
877
- "originalValue": "hsla(44.7, 97.9%, 63.1%, 0.18)"
1390
+ "value": "hsl(0, 0%, 62.8%)",
1391
+ "originalValue": "{color.neutral.dark.textSecondary}",
1392
+ "description": "Row sublines, modal titles, section headers, and accessories."
878
1393
  },
879
- "context.tv.focus.liftShadow": {
880
- "cssName": "--focus-shadow",
881
- "type": "string",
1394
+ "context.tv.text.tertiary": {
1395
+ "cssName": "--text-3",
1396
+ "type": "color",
882
1397
  "mode": "tv",
883
- "value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
884
- "originalValue": "0 14px 30px hsla(0, 0%, 0%, 0.45)"
1398
+ "value": "hsl(0, 0%, 62.8%)",
1399
+ "originalValue": "{context.tv.text.secondary}",
1400
+ "description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
1401
+ "deprecated": true
885
1402
  },
886
1403
  "context.tv.channelArt.production.posterBackground": {
887
1404
  "cssName": "--tv-channel-art-production-poster-bg",
@@ -939,6 +1456,161 @@
939
1456
  "value": "hsl(110.6, 100%, 53.9%)",
940
1457
  "originalValue": "hsl(110.6, 100%, 53.9%)"
941
1458
  },
1459
+ "tv.text.heading": {
1460
+ "cssName": "--tv-text-heading",
1461
+ "type": "dimension",
1462
+ "mode": "tv",
1463
+ "value": "64px",
1464
+ "originalValue": "64px",
1465
+ "description": "text.heading · GTAmerica-Md."
1466
+ },
1467
+ "tv.text.label": {
1468
+ "cssName": "--tv-text-label",
1469
+ "type": "dimension",
1470
+ "mode": "tv",
1471
+ "value": "48px",
1472
+ "originalValue": "48px",
1473
+ "description": "text.label · GTAmerica-Md. Screen titles, and the file-row icon size."
1474
+ },
1475
+ "tv.text.body": {
1476
+ "cssName": "--tv-text-body",
1477
+ "type": "dimension",
1478
+ "mode": "tv",
1479
+ "value": "36px",
1480
+ "originalValue": "36px",
1481
+ "description": "text.body · GTAmerica-Rg. The file-row title."
1482
+ },
1483
+ "tv.text.caption": {
1484
+ "cssName": "--tv-text-caption",
1485
+ "type": "dimension",
1486
+ "mode": "tv",
1487
+ "value": "32px",
1488
+ "originalValue": "32px",
1489
+ "description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face, so the Berkeley Mono numeric rule is web and mobile only: the size subline renders in GT America, asking for its tnum tabular figures where the platform can select OpenType features and accepting proportional figures where it cannot."
1490
+ },
1491
+ "tv.text.smol": {
1492
+ "cssName": "--tv-text-smol",
1493
+ "type": "dimension",
1494
+ "mode": "tv",
1495
+ "value": "24px",
1496
+ "originalValue": "24px",
1497
+ "description": "text.smol · GTAmerica-Rg. Button labels, rendered uppercase."
1498
+ },
1499
+ "tv.fontWeight.regular": {
1500
+ "cssName": "--tv-fw-regular",
1501
+ "type": "fontWeight",
1502
+ "mode": "tv",
1503
+ "value": "400",
1504
+ "originalValue": "400",
1505
+ "description": "GTAmerica-Rg."
1506
+ },
1507
+ "tv.fontWeight.medium": {
1508
+ "cssName": "--tv-fw-medium",
1509
+ "type": "fontWeight",
1510
+ "mode": "tv",
1511
+ "value": "500",
1512
+ "originalValue": "500",
1513
+ "description": "GTAmerica-Md."
1514
+ },
1515
+ "tv.space.xxs": {
1516
+ "cssName": "--tv-space-xxs",
1517
+ "type": "dimension",
1518
+ "mode": "tv",
1519
+ "value": "4px",
1520
+ "originalValue": "4px"
1521
+ },
1522
+ "tv.space.xs": {
1523
+ "cssName": "--tv-space-xs",
1524
+ "type": "dimension",
1525
+ "mode": "tv",
1526
+ "value": "8px",
1527
+ "originalValue": "8px"
1528
+ },
1529
+ "tv.space.sm": {
1530
+ "cssName": "--tv-space-sm",
1531
+ "type": "dimension",
1532
+ "mode": "tv",
1533
+ "value": "16px",
1534
+ "originalValue": "16px",
1535
+ "description": "Button padding at size=\"sm\"."
1536
+ },
1537
+ "tv.space.md": {
1538
+ "cssName": "--tv-space-md",
1539
+ "type": "dimension",
1540
+ "mode": "tv",
1541
+ "value": "32px",
1542
+ "originalValue": "32px",
1543
+ "description": "The workhorse step: uniform list-row padding, row gap, and header padding-bottom."
1544
+ },
1545
+ "tv.space.lg": {
1546
+ "cssName": "--tv-space-lg",
1547
+ "type": "dimension",
1548
+ "mode": "tv",
1549
+ "value": "64px",
1550
+ "originalValue": "64px"
1551
+ },
1552
+ "tv.space.xl": {
1553
+ "cssName": "--tv-space-xl",
1554
+ "type": "dimension",
1555
+ "mode": "tv",
1556
+ "value": "128px",
1557
+ "originalValue": "128px"
1558
+ },
1559
+ "tv.space.xxl": {
1560
+ "cssName": "--tv-space-xxl",
1561
+ "type": "dimension",
1562
+ "mode": "tv",
1563
+ "value": "256px",
1564
+ "originalValue": "256px"
1565
+ },
1566
+ "tv.overscan.x": {
1567
+ "cssName": "--tv-overscan-x",
1568
+ "type": "number",
1569
+ "mode": "tv",
1570
+ "value": 0.04,
1571
+ "originalValue": 0.04,
1572
+ "description": "Horizontal safe-area ratio. Platform adapters multiply this value by viewport width.",
1573
+ "basis": "viewport-width"
1574
+ },
1575
+ "tv.overscan.y": {
1576
+ "cssName": "--tv-overscan-y",
1577
+ "type": "number",
1578
+ "mode": "tv",
1579
+ "value": 0.02,
1580
+ "originalValue": 0.02,
1581
+ "description": "Vertical safe-area ratio. Platform adapters multiply this value by viewport height.",
1582
+ "basis": "viewport-height"
1583
+ },
1584
+ "tv.radius": {
1585
+ "cssName": "--tv-radius",
1586
+ "type": "dimension",
1587
+ "mode": "tv",
1588
+ "value": "12px",
1589
+ "originalValue": "{radius.tv}",
1590
+ "description": "radii.default — one radius for every 10-foot surface."
1591
+ },
1592
+ "tv.z.modal": {
1593
+ "cssName": "--tv-z-modal",
1594
+ "type": "number",
1595
+ "mode": "tv",
1596
+ "value": 100,
1597
+ "originalValue": 100
1598
+ },
1599
+ "tv.z.toast": {
1600
+ "cssName": "--tv-z-toast",
1601
+ "type": "number",
1602
+ "mode": "tv",
1603
+ "value": 200,
1604
+ "originalValue": 200
1605
+ },
1606
+ "tv.z.overlay": {
1607
+ "cssName": "--tv-z-overlay",
1608
+ "type": "number",
1609
+ "mode": "tv",
1610
+ "value": 300,
1611
+ "originalValue": 300,
1612
+ "description": "Above toast — the opposite of the web scale, where --z-notification (1400) sits above --z-modal (1300)."
1613
+ },
942
1614
  "color.brand.yellow": {
943
1615
  "cssName": "--yellow-solid",
944
1616
  "type": "color",
@@ -1685,19 +2357,13 @@
1685
2357
  "value": "\"GT America\", sans-serif",
1686
2358
  "originalValue": "{typography.fontFamily.sans}"
1687
2359
  },
1688
- "typography.fontFamily.uiMono": {
1689
- "cssName": "--font-ui-mono",
1690
- "type": "fontFamily",
1691
- "mode": "global",
1692
- "value": "\"GT America Mono\", monospace",
1693
- "originalValue": "\"GT America Mono\", monospace"
1694
- },
1695
2360
  "typography.fontFamily.mono": {
1696
2361
  "cssName": "--font-mono",
1697
2362
  "type": "fontFamily",
1698
2363
  "mode": "global",
1699
- "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
1700
- "originalValue": "\"Berkeley Mono\", {typography.fontFamily.uiMono}"
2364
+ "value": "\"Berkeley Mono\", monospace",
2365
+ "originalValue": "\"Berkeley Mono\", monospace",
2366
+ "description": "The single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, magnet URIs, identifiers, and filenames. Web and mobile only — TV has no mono face."
1701
2367
  },
1702
2368
  "typography.fontSize.xs": {
1703
2369
  "cssName": "--fs-xs",
@@ -1960,6 +2626,14 @@
1960
2626
  "value": "999px",
1961
2627
  "originalValue": "999px"
1962
2628
  },
2629
+ "radius.tv": {
2630
+ "cssName": "--radius-tv",
2631
+ "type": "dimension",
2632
+ "mode": "global",
2633
+ "value": "12px",
2634
+ "originalValue": "12px",
2635
+ "description": "The corner radius for every 10-foot surface — list rows, buttons, sheets, cards, code tiles, and keys. TV uses one radius, not a scale; the only other radii on TV are intentional pills and circles."
2636
+ },
1963
2637
  "border.width": {
1964
2638
  "cssName": "--border-width",
1965
2639
  "type": "dimension",