@primer/primitives 8.1.0-rc.313f1fc7 → 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 (68) hide show
  1. package/dist/css/base/size/size.css +2 -0
  2. package/dist/css/functional/themes/dark-colorblind.css +38 -18
  3. package/dist/css/functional/themes/dark-dimmed.css +38 -18
  4. package/dist/css/functional/themes/dark-high-contrast.css +20 -0
  5. package/dist/css/functional/themes/dark-tritanopia.css +38 -18
  6. package/dist/css/functional/themes/dark.css +38 -18
  7. package/dist/css/functional/themes/light-colorblind.css +20 -0
  8. package/dist/css/functional/themes/light-high-contrast.css +20 -0
  9. package/dist/css/functional/themes/light-tritanopia.css +20 -0
  10. package/dist/css/functional/themes/light.css +20 -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 +304 -14
  15. package/dist/docs/functional/themes/dark-dimmed.json +304 -14
  16. package/dist/docs/functional/themes/dark-high-contrast.json +290 -0
  17. package/dist/docs/functional/themes/dark-tritanopia.json +304 -14
  18. package/dist/docs/functional/themes/dark.json +304 -14
  19. package/dist/docs/functional/themes/light-colorblind.json +290 -0
  20. package/dist/docs/functional/themes/light-high-contrast.json +290 -0
  21. package/dist/docs/functional/themes/light-tritanopia.json +290 -0
  22. package/dist/docs/functional/themes/light.json +290 -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 +188 -28
  27. package/dist/figma/themes/dark-dimmed.json +188 -28
  28. package/dist/figma/themes/dark-high-contrast.json +160 -0
  29. package/dist/figma/themes/dark-tritanopia.json +188 -28
  30. package/dist/figma/themes/dark.json +188 -28
  31. package/dist/figma/themes/light-colorblind.json +160 -0
  32. package/dist/figma/themes/light-high-contrast.json +160 -0
  33. package/dist/figma/themes/light-tritanopia.json +160 -0
  34. package/dist/figma/themes/light.json +160 -0
  35. package/dist/figma/typography/typography.json +22 -11
  36. package/dist/internalCss/dark-colorblind.css +38 -18
  37. package/dist/internalCss/dark-dimmed.css +38 -18
  38. package/dist/internalCss/dark-high-contrast.css +20 -0
  39. package/dist/internalCss/dark-tritanopia.css +38 -18
  40. package/dist/internalCss/dark.css +38 -18
  41. package/dist/internalCss/light-colorblind.css +20 -0
  42. package/dist/internalCss/light-high-contrast.css +20 -0
  43. package/dist/internalCss/light-tritanopia.css +20 -0
  44. package/dist/internalCss/light.css +20 -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 +304 -14
  48. package/dist/styleLint/functional/themes/dark-dimmed.json +304 -14
  49. package/dist/styleLint/functional/themes/dark-high-contrast.json +290 -0
  50. package/dist/styleLint/functional/themes/dark-tritanopia.json +304 -14
  51. package/dist/styleLint/functional/themes/dark.json +304 -14
  52. package/dist/styleLint/functional/themes/light-colorblind.json +290 -0
  53. package/dist/styleLint/functional/themes/light-high-contrast.json +290 -0
  54. package/dist/styleLint/functional/themes/light-tritanopia.json +290 -0
  55. package/dist/styleLint/functional/themes/light.json +290 -0
  56. package/dist/styleLint/functional/typography/typography.json +19 -1
  57. package/package.json +1 -1
  58. package/src/PrimerStyleDictionary.ts +6 -0
  59. package/src/platforms/figma.ts +1 -1
  60. package/src/schemas/baseToken.ts +1 -0
  61. package/src/tokens/base/size/size.json +20 -0
  62. package/src/tokens/functional/color/dark/display-dark.json5 +132 -0
  63. package/src/tokens/functional/color/dark/primitives-dark.json5 +3 -3
  64. package/src/tokens/functional/color/light/display-light.json5 +132 -0
  65. package/src/tokens/functional/size/size.json +6 -0
  66. package/src/tokens/functional/typography/typography.json +10 -1
  67. package/src/transformers/floatToPixel.ts +9 -2
  68. package/src/transformers/index.ts +1 -0
@@ -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",
@@ -2196,6 +2341,151 @@
2196
2341
  "attributes": {},
2197
2342
  "path": ["display", "red", "borderColor", "emphasis"]
2198
2343
  },
2344
+ "display-coral-bgColor-muted": {
2345
+ "value": "#3c0614",
2346
+ "$type": "color",
2347
+ "$extensions": {
2348
+ "org.primer.figma": {
2349
+ "collection": "mode",
2350
+ "mode": "light",
2351
+ "group": "component (internal)",
2352
+ "scopes": ["bgColor"]
2353
+ }
2354
+ },
2355
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2356
+ "isSource": true,
2357
+ "original": {
2358
+ "value": "{base.display.color.red.0}",
2359
+ "$type": "color",
2360
+ "$extensions": {
2361
+ "org.primer.figma": {
2362
+ "collection": "mode",
2363
+ "mode": "light",
2364
+ "group": "component (internal)",
2365
+ "scopes": ["bgColor"]
2366
+ }
2367
+ }
2368
+ },
2369
+ "name": "display-coral-bgColor-muted",
2370
+ "attributes": {},
2371
+ "path": ["display", "coral", "bgColor", "muted"]
2372
+ },
2373
+ "display-coral-bgColor-emphasis": {
2374
+ "value": "#eb3342",
2375
+ "$type": "color",
2376
+ "$extensions": {
2377
+ "org.primer.figma": {
2378
+ "collection": "mode",
2379
+ "mode": "light",
2380
+ "group": "component (internal)",
2381
+ "scopes": ["bgColor"]
2382
+ }
2383
+ },
2384
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2385
+ "isSource": true,
2386
+ "original": {
2387
+ "value": "{base.display.color.red.5}",
2388
+ "$type": "color",
2389
+ "$extensions": {
2390
+ "org.primer.figma": {
2391
+ "collection": "mode",
2392
+ "mode": "light",
2393
+ "group": "component (internal)",
2394
+ "scopes": ["bgColor"]
2395
+ }
2396
+ }
2397
+ },
2398
+ "name": "display-coral-bgColor-emphasis",
2399
+ "attributes": {},
2400
+ "path": ["display", "coral", "bgColor", "emphasis"]
2401
+ },
2402
+ "display-coral-fgColor": {
2403
+ "value": "#f27d83",
2404
+ "$type": "color",
2405
+ "$extensions": {
2406
+ "org.primer.figma": {
2407
+ "collection": "mode",
2408
+ "mode": "light",
2409
+ "group": "component (internal)",
2410
+ "scopes": ["fgColor"]
2411
+ }
2412
+ },
2413
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2414
+ "isSource": true,
2415
+ "original": {
2416
+ "value": "{base.display.color.red.6}",
2417
+ "$type": "color",
2418
+ "$extensions": {
2419
+ "org.primer.figma": {
2420
+ "collection": "mode",
2421
+ "mode": "light",
2422
+ "group": "component (internal)",
2423
+ "scopes": ["fgColor"]
2424
+ }
2425
+ }
2426
+ },
2427
+ "name": "display-coral-fgColor",
2428
+ "attributes": {},
2429
+ "path": ["display", "coral", "fgColor"]
2430
+ },
2431
+ "display-coral-borderColor-muted": {
2432
+ "value": "#58091a",
2433
+ "$type": "color",
2434
+ "$extensions": {
2435
+ "org.primer.figma": {
2436
+ "collection": "mode",
2437
+ "mode": "light",
2438
+ "group": "component (internal)",
2439
+ "scopes": ["borderColor"]
2440
+ }
2441
+ },
2442
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2443
+ "isSource": true,
2444
+ "original": {
2445
+ "value": "{base.display.color.red.1}",
2446
+ "$type": "color",
2447
+ "$extensions": {
2448
+ "org.primer.figma": {
2449
+ "collection": "mode",
2450
+ "mode": "light",
2451
+ "group": "component (internal)",
2452
+ "scopes": ["borderColor"]
2453
+ }
2454
+ }
2455
+ },
2456
+ "name": "display-coral-borderColor-muted",
2457
+ "attributes": {},
2458
+ "path": ["display", "coral", "borderColor", "muted"]
2459
+ },
2460
+ "display-coral-borderColor-emphasis": {
2461
+ "value": "#eb3342",
2462
+ "$type": "color",
2463
+ "$extensions": {
2464
+ "org.primer.figma": {
2465
+ "collection": "mode",
2466
+ "mode": "light",
2467
+ "group": "component (internal)",
2468
+ "scopes": ["borderColor"]
2469
+ }
2470
+ },
2471
+ "filePath": "src/tokens/functional/color/dark/display-dark.json5",
2472
+ "isSource": true,
2473
+ "original": {
2474
+ "value": "{base.display.color.red.5}",
2475
+ "$type": "color",
2476
+ "$extensions": {
2477
+ "org.primer.figma": {
2478
+ "collection": "mode",
2479
+ "mode": "light",
2480
+ "group": "component (internal)",
2481
+ "scopes": ["borderColor"]
2482
+ }
2483
+ }
2484
+ },
2485
+ "name": "display-coral-borderColor-emphasis",
2486
+ "attributes": {},
2487
+ "path": ["display", "coral", "borderColor", "emphasis"]
2488
+ },
2199
2489
  "display-yellow-bgColor-muted": {
2200
2490
  "value": "#2e1a00",
2201
2491
  "$type": "color",
@@ -4552,7 +4842,7 @@
4552
4842
  "path": ["control", "borderColor", "warning"]
4553
4843
  },
4554
4844
  "control-iconColor-rest": {
4555
- "value": "#848d97",
4845
+ "value": "#8d96a0",
4556
4846
  "$type": "color",
4557
4847
  "$extensions": {
4558
4848
  "org.primer.figma": {
@@ -5391,7 +5681,7 @@
5391
5681
  "path": ["controlTrack", "bgColor", "disabled"]
5392
5682
  },
5393
5683
  "controlTrack-fgColor-rest": {
5394
- "value": "#848d97",
5684
+ "value": "#8d96a0",
5395
5685
  "$type": "color",
5396
5686
  "$extensions": {
5397
5687
  "org.primer.figma": {
@@ -6508,7 +6798,7 @@
6508
6798
  "path": ["button", "invisible", "fgColor", "disabled"]
6509
6799
  },
6510
6800
  "button-invisible-iconColor-rest": {
6511
- "value": "#848d97",
6801
+ "value": "#8d96a0",
6512
6802
  "$type": "color",
6513
6803
  "$extensions": {
6514
6804
  "org.primer.figma": {
@@ -8499,7 +8789,7 @@
8499
8789
  "path": ["timelineBadge", "bgColor"]
8500
8790
  },
8501
8791
  "treeViewItem-leadingVisual-iconColor-rest": {
8502
- "value": "#848d97",
8792
+ "value": "#8d96a0",
8503
8793
  "$type": "color",
8504
8794
  "$extensions": {
8505
8795
  "org.primer.figma": {
@@ -8586,7 +8876,7 @@
8586
8876
  "path": ["underlineNav", "borderColor", "hover"]
8587
8877
  },
8588
8878
  "underlineNav-iconColor-rest": {
8589
- "value": "#848d97",
8879
+ "value": "#8d96a0",
8590
8880
  "$type": "color",
8591
8881
  "$extensions": {
8592
8882
  "org.primer.figma": {
@@ -12024,7 +12314,7 @@
12024
12314
  "path": ["fgColor", "default"]
12025
12315
  },
12026
12316
  "fgColor-muted": {
12027
- "value": "#848d97",
12317
+ "value": "#8d96a0",
12028
12318
  "$type": "color",
12029
12319
  "$extensions": {
12030
12320
  "org.primer.figma": {
@@ -12038,13 +12328,13 @@
12038
12328
  }
12039
12329
  },
12040
12330
  "mix": {
12041
- "color": "#6e7681",
12042
- "weight": 0.25
12331
+ "color": "#8b949e",
12332
+ "weight": 0.95
12043
12333
  },
12044
12334
  "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
12045
12335
  "isSource": true,
12046
12336
  "original": {
12047
- "value": "{base.color.neutral.3}",
12337
+ "value": "{base.color.neutral.2}",
12048
12338
  "$type": "color",
12049
12339
  "$extensions": {
12050
12340
  "org.primer.figma": {
@@ -12058,8 +12348,8 @@
12058
12348
  }
12059
12349
  },
12060
12350
  "mix": {
12061
- "color": "{base.color.neutral.4}",
12062
- "weight": 0.25
12351
+ "color": "{base.color.neutral.3}",
12352
+ "weight": 0.95
12063
12353
  }
12064
12354
  },
12065
12355
  "name": "fgColor-muted",