@primer/primitives 8.1.0 → 8.1.1-rc.29cfc4ea

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 (64) hide show
  1. package/dist/css/base/size/size.css +2 -0
  2. package/dist/css/functional/themes/dark-colorblind.css +28 -18
  3. package/dist/css/functional/themes/dark-dimmed.css +28 -18
  4. package/dist/css/functional/themes/dark-high-contrast.css +10 -0
  5. package/dist/css/functional/themes/dark-tritanopia.css +28 -18
  6. package/dist/css/functional/themes/dark.css +28 -18
  7. package/dist/css/functional/themes/light-colorblind.css +10 -0
  8. package/dist/css/functional/themes/light-high-contrast.css +10 -0
  9. package/dist/css/functional/themes/light-tritanopia.css +10 -0
  10. package/dist/css/functional/themes/light.css +10 -0
  11. package/dist/deprecated/size.json +8 -0
  12. package/dist/docs/base/size/size.json +50 -0
  13. package/dist/docs/functional/size/size.json +12 -0
  14. package/dist/docs/functional/themes/dark-colorblind.json +159 -14
  15. package/dist/docs/functional/themes/dark-dimmed.json +159 -14
  16. package/dist/docs/functional/themes/dark-high-contrast.json +145 -0
  17. package/dist/docs/functional/themes/dark-tritanopia.json +159 -14
  18. package/dist/docs/functional/themes/dark.json +159 -14
  19. package/dist/docs/functional/themes/light-colorblind.json +145 -0
  20. package/dist/docs/functional/themes/light-high-contrast.json +145 -0
  21. package/dist/docs/functional/themes/light-tritanopia.json +145 -0
  22. package/dist/docs/functional/themes/light.json +145 -0
  23. package/dist/docs/functional/typography/typography.json +19 -1
  24. package/dist/fallbacks/base/size/size.json +2 -0
  25. package/dist/figma/dimension/dimension.json +20 -0
  26. package/dist/figma/themes/dark-colorblind.json +108 -28
  27. package/dist/figma/themes/dark-dimmed.json +108 -28
  28. package/dist/figma/themes/dark-high-contrast.json +80 -0
  29. package/dist/figma/themes/dark-tritanopia.json +108 -28
  30. package/dist/figma/themes/dark.json +108 -28
  31. package/dist/figma/themes/light-colorblind.json +80 -0
  32. package/dist/figma/themes/light-high-contrast.json +80 -0
  33. package/dist/figma/themes/light-tritanopia.json +80 -0
  34. package/dist/figma/themes/light.json +80 -0
  35. package/dist/figma/typography/typography.json +12 -1
  36. package/dist/internalCss/dark-colorblind.css +28 -18
  37. package/dist/internalCss/dark-dimmed.css +28 -18
  38. package/dist/internalCss/dark-high-contrast.css +10 -0
  39. package/dist/internalCss/dark-tritanopia.css +28 -18
  40. package/dist/internalCss/dark.css +28 -18
  41. package/dist/internalCss/light-colorblind.css +10 -0
  42. package/dist/internalCss/light-high-contrast.css +10 -0
  43. package/dist/internalCss/light-tritanopia.css +10 -0
  44. package/dist/internalCss/light.css +10 -0
  45. package/dist/styleLint/base/size/size.json +50 -0
  46. package/dist/styleLint/functional/size/size.json +12 -0
  47. package/dist/styleLint/functional/themes/dark-colorblind.json +159 -14
  48. package/dist/styleLint/functional/themes/dark-dimmed.json +159 -14
  49. package/dist/styleLint/functional/themes/dark-high-contrast.json +145 -0
  50. package/dist/styleLint/functional/themes/dark-tritanopia.json +159 -14
  51. package/dist/styleLint/functional/themes/dark.json +159 -14
  52. package/dist/styleLint/functional/themes/light-colorblind.json +145 -0
  53. package/dist/styleLint/functional/themes/light-high-contrast.json +145 -0
  54. package/dist/styleLint/functional/themes/light-tritanopia.json +145 -0
  55. package/dist/styleLint/functional/themes/light.json +145 -0
  56. package/dist/styleLint/functional/typography/typography.json +19 -1
  57. package/package.json +1 -1
  58. package/src/schemas/baseToken.ts +1 -0
  59. package/src/tokens/base/size/size.json +20 -0
  60. package/src/tokens/functional/color/dark/display-dark.json5 +66 -0
  61. package/src/tokens/functional/color/dark/primitives-dark.json5 +3 -3
  62. package/src/tokens/functional/color/light/display-light.json5 +66 -0
  63. package/src/tokens/functional/size/size.json +6 -0
  64. package/src/tokens/functional/typography/typography.json +10 -1
@@ -357,6 +357,11 @@
357
357
  --display-purple-fgColor: #783ae4;
358
358
  --display-purple-borderColor-muted: #e6d2fe;
359
359
  --display-purple-borderColor-emphasis: #894ceb;
360
+ --display-plum-bgColor-muted: #f8e5ff;
361
+ --display-plum-bgColor-emphasis: #a830e8;
362
+ --display-plum-fgColor: #961edc;
363
+ --display-plum-borderColor-muted: #f0cdfe;
364
+ --display-plum-borderColor-emphasis: #a830e8;
360
365
  --display-red-bgColor-muted: #ffe2e0;
361
366
  --display-red-bgColor-emphasis: #df0c24;
362
367
  --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
1190
1195
  --display-purple-fgColor: #783ae4;
1191
1196
  --display-purple-borderColor-muted: #e6d2fe;
1192
1197
  --display-purple-borderColor-emphasis: #894ceb;
1198
+ --display-plum-bgColor-muted: #f8e5ff;
1199
+ --display-plum-bgColor-emphasis: #a830e8;
1200
+ --display-plum-fgColor: #961edc;
1201
+ --display-plum-borderColor-muted: #f0cdfe;
1202
+ --display-plum-borderColor-emphasis: #a830e8;
1193
1203
  --display-red-bgColor-muted: #ffe2e0;
1194
1204
  --display-red-bgColor-emphasis: #df0c24;
1195
1205
  --display-red-fgColor: #c50d28;
@@ -357,6 +357,11 @@
357
357
  --display-purple-fgColor: #783ae4;
358
358
  --display-purple-borderColor-muted: #e6d2fe;
359
359
  --display-purple-borderColor-emphasis: #894ceb;
360
+ --display-plum-bgColor-muted: #f8e5ff;
361
+ --display-plum-bgColor-emphasis: #a830e8;
362
+ --display-plum-fgColor: #961edc;
363
+ --display-plum-borderColor-muted: #f0cdfe;
364
+ --display-plum-borderColor-emphasis: #a830e8;
360
365
  --display-red-bgColor-muted: #ffe2e0;
361
366
  --display-red-bgColor-emphasis: #df0c24;
362
367
  --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
1190
1195
  --display-purple-fgColor: #783ae4;
1191
1196
  --display-purple-borderColor-muted: #e6d2fe;
1192
1197
  --display-purple-borderColor-emphasis: #894ceb;
1198
+ --display-plum-bgColor-muted: #f8e5ff;
1199
+ --display-plum-bgColor-emphasis: #a830e8;
1200
+ --display-plum-fgColor: #961edc;
1201
+ --display-plum-borderColor-muted: #f0cdfe;
1202
+ --display-plum-borderColor-emphasis: #a830e8;
1193
1203
  --display-red-bgColor-muted: #ffe2e0;
1194
1204
  --display-red-bgColor-emphasis: #df0c24;
1195
1205
  --display-red-fgColor: #c50d28;
@@ -1,4 +1,29 @@
1
1
  {
2
+ "base-size-2": {
3
+ "value": ["0.125rem", "2px"],
4
+ "$type": "dimension",
5
+ "$extensions": {
6
+ "org.primer.figma": {
7
+ "collection": "base/size",
8
+ "scopes": ["size"]
9
+ }
10
+ },
11
+ "filePath": "src/tokens/base/size/size.json",
12
+ "isSource": true,
13
+ "original": {
14
+ "value": "2px",
15
+ "$type": "dimension",
16
+ "$extensions": {
17
+ "org.primer.figma": {
18
+ "collection": "base/size",
19
+ "scopes": ["size"]
20
+ }
21
+ }
22
+ },
23
+ "name": "base-size-2",
24
+ "attributes": {},
25
+ "path": ["base", "size", "2"]
26
+ },
2
27
  "base-size-4": {
3
28
  "value": ["0.25rem", "4px"],
4
29
  "$type": "dimension",
@@ -24,6 +49,31 @@
24
49
  "attributes": {},
25
50
  "path": ["base", "size", "4"]
26
51
  },
52
+ "base-size-6": {
53
+ "value": ["0.375rem", "6px"],
54
+ "$type": "dimension",
55
+ "$extensions": {
56
+ "org.primer.figma": {
57
+ "collection": "base/size",
58
+ "scopes": ["size"]
59
+ }
60
+ },
61
+ "filePath": "src/tokens/base/size/size.json",
62
+ "isSource": true,
63
+ "original": {
64
+ "value": "6px",
65
+ "$type": "dimension",
66
+ "$extensions": {
67
+ "org.primer.figma": {
68
+ "collection": "base/size",
69
+ "scopes": ["size"]
70
+ }
71
+ }
72
+ },
73
+ "name": "base-size-6",
74
+ "attributes": {},
75
+ "path": ["base", "size", "6"]
76
+ },
27
77
  "base-size-8": {
28
78
  "value": ["0.5rem", "8px"],
29
79
  "$type": "dimension",
@@ -1027,6 +1027,7 @@
1027
1027
  "space-xxsmall": {
1028
1028
  "value": ["0.125rem", "2px"],
1029
1029
  "$type": "dimension",
1030
+ "deprecated": "Use --base-size-2 instead",
1030
1031
  "$extensions": {
1031
1032
  "org.primer.figma": {
1032
1033
  "collection": "functional/size",
@@ -1038,6 +1039,7 @@
1038
1039
  "original": {
1039
1040
  "value": "2px",
1040
1041
  "$type": "dimension",
1042
+ "deprecated": "Use --base-size-2 instead",
1041
1043
  "$extensions": {
1042
1044
  "org.primer.figma": {
1043
1045
  "collection": "functional/size",
@@ -1052,6 +1054,7 @@
1052
1054
  "space-xsmall": {
1053
1055
  "value": ["0.015625rem", "0.25px"],
1054
1056
  "$type": "dimension",
1057
+ "deprecated": "Use --base-size-4 instead",
1055
1058
  "$extensions": {
1056
1059
  "org.primer.figma": {
1057
1060
  "collection": "functional/size",
@@ -1063,6 +1066,7 @@
1063
1066
  "original": {
1064
1067
  "value": "{base.size.4}",
1065
1068
  "$type": "dimension",
1069
+ "deprecated": "Use --base-size-4 instead",
1066
1070
  "$extensions": {
1067
1071
  "org.primer.figma": {
1068
1072
  "collection": "functional/size",
@@ -1077,6 +1081,7 @@
1077
1081
  "space-small": {
1078
1082
  "value": ["0.375rem", "6px"],
1079
1083
  "$type": "dimension",
1084
+ "deprecated": "Use --base-size-6 instead",
1080
1085
  "$extensions": {
1081
1086
  "org.primer.figma": {
1082
1087
  "collection": "functional/size",
@@ -1088,6 +1093,7 @@
1088
1093
  "original": {
1089
1094
  "value": "6px",
1090
1095
  "$type": "dimension",
1096
+ "deprecated": "Use --base-size-6 instead",
1091
1097
  "$extensions": {
1092
1098
  "org.primer.figma": {
1093
1099
  "collection": "functional/size",
@@ -1102,6 +1108,7 @@
1102
1108
  "space-medium": {
1103
1109
  "value": ["0.03125rem", "0.5px"],
1104
1110
  "$type": "dimension",
1111
+ "deprecated": "Use --base-size-8 instead",
1105
1112
  "$extensions": {
1106
1113
  "org.primer.figma": {
1107
1114
  "collection": "functional/size",
@@ -1113,6 +1120,7 @@
1113
1120
  "original": {
1114
1121
  "value": "{base.size.8}",
1115
1122
  "$type": "dimension",
1123
+ "deprecated": "Use --base-size-8 instead",
1116
1124
  "$extensions": {
1117
1125
  "org.primer.figma": {
1118
1126
  "collection": "functional/size",
@@ -1127,6 +1135,7 @@
1127
1135
  "space-large": {
1128
1136
  "value": ["0.046875rem", "0.75px"],
1129
1137
  "$type": "dimension",
1138
+ "deprecated": "Use --base-size-12 instead",
1130
1139
  "$extensions": {
1131
1140
  "org.primer.figma": {
1132
1141
  "collection": "functional/size",
@@ -1138,6 +1147,7 @@
1138
1147
  "original": {
1139
1148
  "value": "{base.size.12}",
1140
1149
  "$type": "dimension",
1150
+ "deprecated": "Use --base-size-12 instead",
1141
1151
  "$extensions": {
1142
1152
  "org.primer.figma": {
1143
1153
  "collection": "functional/size",
@@ -1152,6 +1162,7 @@
1152
1162
  "space-xlarge": {
1153
1163
  "value": ["0.0625rem", "1px"],
1154
1164
  "$type": "dimension",
1165
+ "deprecated": "Use --base-size-16 instead",
1155
1166
  "$extensions": {
1156
1167
  "org.primer.figma": {
1157
1168
  "collection": "functional/size",
@@ -1163,6 +1174,7 @@
1163
1174
  "original": {
1164
1175
  "value": "{base.size.16}",
1165
1176
  "$type": "dimension",
1177
+ "deprecated": "Use --base-size-16 instead",
1166
1178
  "$extensions": {
1167
1179
  "org.primer.figma": {
1168
1180
  "collection": "functional/size",
@@ -424,7 +424,7 @@
424
424
  "path": ["diffBlob", "hunk", "bgColor", "num"]
425
425
  },
426
426
  "diffBlob-expander-iconColor": {
427
- "value": "#848d97",
427
+ "value": "#8d96a0",
428
428
  "$type": "color",
429
429
  "$extensions": {
430
430
  "org.primer.figma": {
@@ -569,7 +569,7 @@
569
569
  "path": ["codeMirror", "gutterMarker", "fgColor", "default"]
570
570
  },
571
571
  "codeMirror-gutterMarker-fgColor-muted": {
572
- "value": "#848d97",
572
+ "value": "#8d96a0",
573
573
  "$type": "color",
574
574
  "$extensions": {
575
575
  "org.primer.figma": {
@@ -598,7 +598,7 @@
598
598
  "path": ["codeMirror", "gutterMarker", "fgColor", "muted"]
599
599
  },
600
600
  "codeMirror-lineNumber-fgColor": {
601
- "value": "#848d97",
601
+ "value": "#8d96a0",
602
602
  "$type": "color",
603
603
  "$extensions": {
604
604
  "org.primer.figma": {
@@ -2051,6 +2051,151 @@
2051
2051
  "attributes": {},
2052
2052
  "path": ["display", "purple", "borderColor", "emphasis"]
2053
2053
  },
2054
+ "display-plum-bgColor-muted": {
2055
+ "value": "#2a0e3f",
2056
+ "$type": "color",
2057
+ "$extensions": {
2058
+ "org.primer.figma": {
2059
+ "collection": "mode",
2060
+ "mode": "light",
2061
+ "group": "component (internal)",
2062
+ "scopes": ["bgColor"]
2063
+ }
2064
+ },
2065
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2066
+ "isSource": true,
2067
+ "original": {
2068
+ "value": "{base.display.color.plum.0}",
2069
+ "$type": "color",
2070
+ "$extensions": {
2071
+ "org.primer.figma": {
2072
+ "collection": "mode",
2073
+ "mode": "light",
2074
+ "group": "component (internal)",
2075
+ "scopes": ["bgColor"]
2076
+ }
2077
+ }
2078
+ },
2079
+ "name": "display-plum-bgColor-muted",
2080
+ "attributes": {},
2081
+ "path": ["display", "plum", "bgColor", "muted"]
2082
+ },
2083
+ "display-plum-bgColor-emphasis": {
2084
+ "value": "#b643ef",
2085
+ "$type": "color",
2086
+ "$extensions": {
2087
+ "org.primer.figma": {
2088
+ "collection": "mode",
2089
+ "mode": "light",
2090
+ "group": "component (internal)",
2091
+ "scopes": ["bgColor"]
2092
+ }
2093
+ },
2094
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2095
+ "isSource": true,
2096
+ "original": {
2097
+ "value": "{base.display.color.plum.5}",
2098
+ "$type": "color",
2099
+ "$extensions": {
2100
+ "org.primer.figma": {
2101
+ "collection": "mode",
2102
+ "mode": "light",
2103
+ "group": "component (internal)",
2104
+ "scopes": ["bgColor"]
2105
+ }
2106
+ }
2107
+ },
2108
+ "name": "display-plum-bgColor-emphasis",
2109
+ "attributes": {},
2110
+ "path": ["display", "plum", "bgColor", "emphasis"]
2111
+ },
2112
+ "display-plum-fgColor": {
2113
+ "value": "#d07ef7",
2114
+ "$type": "color",
2115
+ "$extensions": {
2116
+ "org.primer.figma": {
2117
+ "collection": "mode",
2118
+ "mode": "light",
2119
+ "group": "component (internal)",
2120
+ "scopes": ["fgColor"]
2121
+ }
2122
+ },
2123
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2124
+ "isSource": true,
2125
+ "original": {
2126
+ "value": "{base.display.color.plum.6}",
2127
+ "$type": "color",
2128
+ "$extensions": {
2129
+ "org.primer.figma": {
2130
+ "collection": "mode",
2131
+ "mode": "light",
2132
+ "group": "component (internal)",
2133
+ "scopes": ["fgColor"]
2134
+ }
2135
+ }
2136
+ },
2137
+ "name": "display-plum-fgColor",
2138
+ "attributes": {},
2139
+ "path": ["display", "plum", "fgColor"]
2140
+ },
2141
+ "display-plum-borderColor-muted": {
2142
+ "value": "#40125e",
2143
+ "$type": "color",
2144
+ "$extensions": {
2145
+ "org.primer.figma": {
2146
+ "collection": "mode",
2147
+ "mode": "light",
2148
+ "group": "component (internal)",
2149
+ "scopes": ["borderColor"]
2150
+ }
2151
+ },
2152
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2153
+ "isSource": true,
2154
+ "original": {
2155
+ "value": "{base.display.color.plum.1}",
2156
+ "$type": "color",
2157
+ "$extensions": {
2158
+ "org.primer.figma": {
2159
+ "collection": "mode",
2160
+ "mode": "light",
2161
+ "group": "component (internal)",
2162
+ "scopes": ["borderColor"]
2163
+ }
2164
+ }
2165
+ },
2166
+ "name": "display-plum-borderColor-muted",
2167
+ "attributes": {},
2168
+ "path": ["display", "plum", "borderColor", "muted"]
2169
+ },
2170
+ "display-plum-borderColor-emphasis": {
2171
+ "value": "#b643ef",
2172
+ "$type": "color",
2173
+ "$extensions": {
2174
+ "org.primer.figma": {
2175
+ "collection": "mode",
2176
+ "mode": "light",
2177
+ "group": "component (internal)",
2178
+ "scopes": ["borderColor"]
2179
+ }
2180
+ },
2181
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2182
+ "isSource": true,
2183
+ "original": {
2184
+ "value": "{base.display.color.plum.5}",
2185
+ "$type": "color",
2186
+ "$extensions": {
2187
+ "org.primer.figma": {
2188
+ "collection": "mode",
2189
+ "mode": "light",
2190
+ "group": "component (internal)",
2191
+ "scopes": ["borderColor"]
2192
+ }
2193
+ }
2194
+ },
2195
+ "name": "display-plum-borderColor-emphasis",
2196
+ "attributes": {},
2197
+ "path": ["display", "plum", "borderColor", "emphasis"]
2198
+ },
2054
2199
  "display-red-bgColor-muted": {
2055
2200
  "value": "#3c0614",
2056
2201
  "$type": "color",
@@ -4697,7 +4842,7 @@
4697
4842
  "path": ["control", "borderColor", "warning"]
4698
4843
  },
4699
4844
  "control-iconColor-rest": {
4700
- "value": "#848d97",
4845
+ "value": "#8d96a0",
4701
4846
  "$type": "color",
4702
4847
  "$extensions": {
4703
4848
  "org.primer.figma": {
@@ -5536,7 +5681,7 @@
5536
5681
  "path": ["controlTrack", "bgColor", "disabled"]
5537
5682
  },
5538
5683
  "controlTrack-fgColor-rest": {
5539
- "value": "#848d97",
5684
+ "value": "#8d96a0",
5540
5685
  "$type": "color",
5541
5686
  "$extensions": {
5542
5687
  "org.primer.figma": {
@@ -6647,7 +6792,7 @@
6647
6792
  "path": ["button", "invisible", "fgColor", "disabled"]
6648
6793
  },
6649
6794
  "button-invisible-iconColor-rest": {
6650
- "value": "#848d97",
6795
+ "value": "#8d96a0",
6651
6796
  "$type": "color",
6652
6797
  "$extensions": {
6653
6798
  "org.primer.figma": {
@@ -8638,7 +8783,7 @@
8638
8783
  "path": ["timelineBadge", "bgColor"]
8639
8784
  },
8640
8785
  "treeViewItem-leadingVisual-iconColor-rest": {
8641
- "value": "#848d97",
8786
+ "value": "#8d96a0",
8642
8787
  "$type": "color",
8643
8788
  "$extensions": {
8644
8789
  "org.primer.figma": {
@@ -8725,7 +8870,7 @@
8725
8870
  "path": ["underlineNav", "borderColor", "hover"]
8726
8871
  },
8727
8872
  "underlineNav-iconColor-rest": {
8728
- "value": "#848d97",
8873
+ "value": "#8d96a0",
8729
8874
  "$type": "color",
8730
8875
  "$extensions": {
8731
8876
  "org.primer.figma": {
@@ -12163,7 +12308,7 @@
12163
12308
  "path": ["fgColor", "default"]
12164
12309
  },
12165
12310
  "fgColor-muted": {
12166
- "value": "#848d97",
12311
+ "value": "#8d96a0",
12167
12312
  "$type": "color",
12168
12313
  "$extensions": {
12169
12314
  "org.primer.figma": {
@@ -12177,13 +12322,13 @@
12177
12322
  }
12178
12323
  },
12179
12324
  "mix": {
12180
- "color": "#6e7681",
12181
- "weight": 0.25
12325
+ "color": "#8b949e",
12326
+ "weight": 0.95
12182
12327
  },
12183
12328
  "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
12184
12329
  "isSource": true,
12185
12330
  "original": {
12186
- "value": "{base.color.neutral.3}",
12331
+ "value": "{base.color.neutral.2}",
12187
12332
  "$type": "color",
12188
12333
  "$extensions": {
12189
12334
  "org.primer.figma": {
@@ -12197,8 +12342,8 @@
12197
12342
  }
12198
12343
  },
12199
12344
  "mix": {
12200
- "color": "{base.color.neutral.4}",
12201
- "weight": 0.25
12345
+ "color": "{base.color.neutral.3}",
12346
+ "weight": 0.95
12202
12347
  }
12203
12348
  },
12204
12349
  "name": "fgColor-muted",