@primer/primitives 11.4.0 → 11.4.1-rc.4e2d1de5
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/DESIGN_TOKENS_GUIDE.md +185 -0
- package/DESIGN_TOKENS_SPEC.md +565 -0
- package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
- package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
- package/dist/build/schemas/borderToken.d.ts +16 -2
- package/dist/build/schemas/dimensionToken.d.ts +8 -1
- package/dist/build/schemas/dimensionValue.d.ts +24 -1
- package/dist/build/schemas/dimensionValue.js +20 -1
- package/dist/build/schemas/durationToken.d.ts +7 -1
- package/dist/build/schemas/durationValue.d.ts +11 -1
- package/dist/build/schemas/durationValue.js +13 -3
- package/dist/build/schemas/shadowToken.d.ts +672 -84
- package/dist/build/schemas/transitionToken.d.ts +14 -2
- package/dist/build/schemas/typographyToken.d.ts +32 -4
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
- package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
- package/dist/build/transformers/dimensionToRem.d.ts +2 -1
- package/dist/build/transformers/dimensionToRem.js +21 -22
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
- package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
- package/dist/build/transformers/durationToCss.d.ts +2 -1
- package/dist/build/transformers/durationToCss.js +18 -11
- package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
- package/dist/build/transformers/utilities/parseDimension.js +31 -0
- package/dist/build/types/dimensionTokenValue.d.ts +9 -0
- package/dist/css/functional/themes/dark-colorblind-high-contrast.css +18 -14
- package/dist/css/functional/themes/dark-colorblind.css +18 -14
- package/dist/css/functional/themes/dark-dimmed-high-contrast.css +18 -14
- package/dist/css/functional/themes/dark-dimmed.css +18 -14
- package/dist/css/functional/themes/dark-high-contrast.css +18 -14
- package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +18 -14
- package/dist/css/functional/themes/dark-tritanopia.css +18 -14
- package/dist/css/functional/themes/dark.css +18 -14
- package/dist/css/functional/themes/light-colorblind-high-contrast.css +18 -14
- package/dist/css/functional/themes/light-colorblind.css +18 -14
- package/dist/css/functional/themes/light-high-contrast.css +18 -14
- package/dist/css/functional/themes/light-tritanopia-high-contrast.css +18 -14
- package/dist/css/functional/themes/light-tritanopia.css +18 -14
- package/dist/css/functional/themes/light.css +18 -14
- package/dist/css/primitives.css +4 -0
- package/dist/docs/base/motion/motion.json +96 -24
- package/dist/docs/base/size/size.json +76 -19
- package/dist/docs/base/typography/typography.json +24 -6
- package/dist/docs/functional/size/border.json +20 -5
- package/dist/docs/functional/size/breakpoints.json +24 -6
- package/dist/docs/functional/size/radius.json +16 -4
- package/dist/docs/functional/size/size.json +60 -15
- package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +109 -7
- package/dist/docs/functional/themes/dark-colorblind.json +109 -7
- package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +109 -7
- package/dist/docs/functional/themes/dark-dimmed.json +109 -7
- package/dist/docs/functional/themes/dark-high-contrast.json +109 -7
- package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +109 -7
- package/dist/docs/functional/themes/dark-tritanopia.json +109 -7
- package/dist/docs/functional/themes/dark.json +109 -7
- package/dist/docs/functional/themes/light-colorblind-high-contrast.json +115 -13
- package/dist/docs/functional/themes/light-colorblind.json +115 -13
- package/dist/docs/functional/themes/light-high-contrast.json +115 -13
- package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +115 -13
- package/dist/docs/functional/themes/light-tritanopia.json +115 -13
- package/dist/docs/functional/themes/light.json +115 -13
- package/dist/docs/functional/typography/typography.json +8 -2
- package/dist/fallbacks/base/motion/motion.json +48 -12
- package/dist/figma/themes/light-colorblind.json +4 -4
- package/dist/figma/themes/light-high-contrast.json +4 -4
- package/dist/figma/themes/light-tritanopia.json +4 -4
- package/dist/figma/themes/light.json +4 -4
- package/dist/internalCss/dark-colorblind-high-contrast.css +14 -14
- package/dist/internalCss/dark-colorblind.css +14 -14
- package/dist/internalCss/dark-dimmed-high-contrast.css +14 -14
- package/dist/internalCss/dark-dimmed.css +14 -14
- package/dist/internalCss/dark-high-contrast.css +14 -14
- package/dist/internalCss/dark-tritanopia-high-contrast.css +14 -14
- package/dist/internalCss/dark-tritanopia.css +14 -14
- package/dist/internalCss/dark.css +14 -14
- package/dist/internalCss/light-colorblind-high-contrast.css +14 -14
- package/dist/internalCss/light-colorblind.css +14 -14
- package/dist/internalCss/light-high-contrast.css +14 -14
- package/dist/internalCss/light-tritanopia-high-contrast.css +14 -14
- package/dist/internalCss/light-tritanopia.css +14 -14
- package/dist/internalCss/light.css +14 -14
- package/dist/styleLint/base/motion/motion.json +96 -24
- package/dist/styleLint/base/size/size.json +76 -19
- package/dist/styleLint/base/typography/typography.json +30 -12
- package/dist/styleLint/functional/size/border.json +21 -6
- package/dist/styleLint/functional/size/breakpoints.json +24 -6
- package/dist/styleLint/functional/size/radius.json +17 -5
- package/dist/styleLint/functional/size/size-coarse.json +3 -3
- package/dist/styleLint/functional/size/size-fine.json +3 -3
- package/dist/styleLint/functional/size/size.json +111 -66
- package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +129 -27
- package/dist/styleLint/functional/themes/dark-colorblind.json +129 -27
- package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +129 -27
- package/dist/styleLint/functional/themes/dark-dimmed.json +129 -27
- package/dist/styleLint/functional/themes/dark-high-contrast.json +129 -27
- package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +129 -27
- package/dist/styleLint/functional/themes/dark-tritanopia.json +129 -27
- package/dist/styleLint/functional/themes/dark.json +129 -27
- package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +135 -33
- package/dist/styleLint/functional/themes/light-colorblind.json +135 -33
- package/dist/styleLint/functional/themes/light-high-contrast.json +135 -33
- package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +135 -33
- package/dist/styleLint/functional/themes/light-tritanopia.json +135 -33
- package/dist/styleLint/functional/themes/light.json +135 -33
- package/dist/styleLint/functional/typography/typography.json +28 -22
- package/package.json +6 -5
- package/src/tokens/base/motion/timing.json5 +12 -12
- package/src/tokens/base/size/size.json5 +19 -19
- package/src/tokens/base/typography/typography.json5 +6 -6
- package/src/tokens/functional/color/bgColor.json5 +8 -0
- package/src/tokens/functional/color/display.json5 +7 -0
- package/src/tokens/functional/color/fgColor.json5 +8 -0
- package/src/tokens/functional/color/syntax.json5 +14 -0
- package/src/tokens/functional/shadow/shadow.json5 +39 -4
- package/src/tokens/functional/size/border.json5 +5 -5
- package/src/tokens/functional/size/breakpoints.json5 +6 -6
- package/src/tokens/functional/size/radius.json5 +4 -4
- package/src/tokens/functional/size/size.json5 +15 -15
- package/src/tokens/functional/typography/typography.json5 +8 -4
- package/dist/build/parsers/index.d.ts +0 -1
- package/dist/build/parsers/index.js +0 -1
- package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
- package/dist/build/parsers/w3cJsonParser.js +0 -25
- package/dist/removed/testing.json5 +0 -4
- package/guidelines/color.llm.md +0 -16
- package/guidelines/guidelines.llm.md +0 -34
- package/guidelines/motion.llm.md +0 -41
- package/guidelines/spacing.llm.md +0 -20
- package/guidelines/typography.llm.md +0 -14
- package/src/tokens/removed/testing.json5 +0 -4
- package/token-guidelines.llm.md +0 -695
|
@@ -543,6 +543,10 @@
|
|
|
543
543
|
},
|
|
544
544
|
"org.primer.overrides": {
|
|
545
545
|
"dark": "#ffffff"
|
|
546
|
+
},
|
|
547
|
+
"org.primer.llm": {
|
|
548
|
+
"doNotUse": true,
|
|
549
|
+
"rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
546
550
|
}
|
|
547
551
|
},
|
|
548
552
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -559,6 +563,10 @@
|
|
|
559
563
|
},
|
|
560
564
|
"org.primer.overrides": {
|
|
561
565
|
"dark": "{base.color.neutral.0}"
|
|
566
|
+
},
|
|
567
|
+
"org.primer.llm": {
|
|
568
|
+
"doNotUse": true,
|
|
569
|
+
"rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
562
570
|
}
|
|
563
571
|
},
|
|
564
572
|
"key": "{bgColor.black}"
|
|
@@ -2435,6 +2443,10 @@
|
|
|
2435
2443
|
},
|
|
2436
2444
|
"org.primer.overrides": {
|
|
2437
2445
|
"dark": "#1f2328"
|
|
2446
|
+
},
|
|
2447
|
+
"org.primer.llm": {
|
|
2448
|
+
"doNotUse": true,
|
|
2449
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2438
2450
|
}
|
|
2439
2451
|
},
|
|
2440
2452
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2451,6 +2463,10 @@
|
|
|
2451
2463
|
},
|
|
2452
2464
|
"org.primer.overrides": {
|
|
2453
2465
|
"dark": "{base.color.neutral.13}"
|
|
2466
|
+
},
|
|
2467
|
+
"org.primer.llm": {
|
|
2468
|
+
"doNotUse": true,
|
|
2469
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2454
2470
|
}
|
|
2455
2471
|
},
|
|
2456
2472
|
"key": "{bgColor.white}"
|
|
@@ -37217,6 +37233,10 @@
|
|
|
37217
37233
|
},
|
|
37218
37234
|
"org.primer.overrides": {
|
|
37219
37235
|
"dark": "#ffffff"
|
|
37236
|
+
},
|
|
37237
|
+
"org.primer.llm": {
|
|
37238
|
+
"doNotUse": true,
|
|
37239
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
37220
37240
|
}
|
|
37221
37241
|
},
|
|
37222
37242
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37233,6 +37253,10 @@
|
|
|
37233
37253
|
},
|
|
37234
37254
|
"org.primer.overrides": {
|
|
37235
37255
|
"dark": "{base.color.neutral.0}"
|
|
37256
|
+
},
|
|
37257
|
+
"org.primer.llm": {
|
|
37258
|
+
"doNotUse": true,
|
|
37259
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
37236
37260
|
}
|
|
37237
37261
|
},
|
|
37238
37262
|
"key": "{fgColor.black}"
|
|
@@ -38206,6 +38230,10 @@
|
|
|
38206
38230
|
},
|
|
38207
38231
|
"org.primer.overrides": {
|
|
38208
38232
|
"dark": "#1f2328"
|
|
38233
|
+
},
|
|
38234
|
+
"org.primer.llm": {
|
|
38235
|
+
"doNotUse": true,
|
|
38236
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
38209
38237
|
}
|
|
38210
38238
|
},
|
|
38211
38239
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -38222,6 +38250,10 @@
|
|
|
38222
38250
|
},
|
|
38223
38251
|
"org.primer.overrides": {
|
|
38224
38252
|
"dark": "{base.color.neutral.13}"
|
|
38253
|
+
},
|
|
38254
|
+
"org.primer.llm": {
|
|
38255
|
+
"doNotUse": true,
|
|
38256
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
38225
38257
|
}
|
|
38226
38258
|
},
|
|
38227
38259
|
"key": "{fgColor.white}"
|
|
@@ -47531,6 +47563,10 @@
|
|
|
47531
47563
|
"isSource": true,
|
|
47532
47564
|
"$type": "shadow"
|
|
47533
47565
|
}
|
|
47566
|
+
},
|
|
47567
|
+
"org.primer.llm": {
|
|
47568
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47569
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
47534
47570
|
}
|
|
47535
47571
|
},
|
|
47536
47572
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47555,6 +47591,7 @@
|
|
|
47555
47591
|
}
|
|
47556
47592
|
],
|
|
47557
47593
|
"$type": "shadow",
|
|
47594
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
47558
47595
|
"$extensions": {
|
|
47559
47596
|
"org.primer.figma": {},
|
|
47560
47597
|
"org.primer.overrides": {
|
|
@@ -47581,6 +47618,10 @@
|
|
|
47581
47618
|
"isSource": true,
|
|
47582
47619
|
"$type": "shadow"
|
|
47583
47620
|
}
|
|
47621
|
+
},
|
|
47622
|
+
"org.primer.llm": {
|
|
47623
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47624
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
47584
47625
|
}
|
|
47585
47626
|
},
|
|
47586
47627
|
"key": "{shadow.floating.legacy}"
|
|
@@ -47589,7 +47630,8 @@
|
|
|
47589
47630
|
"attributes": {},
|
|
47590
47631
|
"path": ["shadow", "floating", "legacy"],
|
|
47591
47632
|
"value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
47592
|
-
"type": "shadow"
|
|
47633
|
+
"type": "shadow",
|
|
47634
|
+
"description": "Legacy floating shadow for backward compatibility"
|
|
47593
47635
|
},
|
|
47594
47636
|
"shadow-floating-medium": {
|
|
47595
47637
|
"key": "{shadow.floating.medium}",
|
|
@@ -47646,6 +47688,10 @@
|
|
|
47646
47688
|
"isSource": true,
|
|
47647
47689
|
"$type": "shadow"
|
|
47648
47690
|
}
|
|
47691
|
+
},
|
|
47692
|
+
"org.primer.llm": {
|
|
47693
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47694
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
47649
47695
|
}
|
|
47650
47696
|
},
|
|
47651
47697
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47694,6 +47740,7 @@
|
|
|
47694
47740
|
}
|
|
47695
47741
|
],
|
|
47696
47742
|
"$type": "shadow",
|
|
47743
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
47697
47744
|
"$extensions": {
|
|
47698
47745
|
"org.primer.figma": {
|
|
47699
47746
|
"collection": "mode",
|
|
@@ -47747,6 +47794,10 @@
|
|
|
47747
47794
|
"isSource": true,
|
|
47748
47795
|
"$type": "shadow"
|
|
47749
47796
|
}
|
|
47797
|
+
},
|
|
47798
|
+
"org.primer.llm": {
|
|
47799
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47800
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
47750
47801
|
}
|
|
47751
47802
|
},
|
|
47752
47803
|
"key": "{shadow.floating.medium}"
|
|
@@ -47755,7 +47806,8 @@
|
|
|
47755
47806
|
"attributes": {},
|
|
47756
47807
|
"path": ["shadow", "floating", "medium"],
|
|
47757
47808
|
"value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
|
|
47758
|
-
"type": "shadow"
|
|
47809
|
+
"type": "shadow",
|
|
47810
|
+
"description": "Medium floating shadow for popovers and action menus"
|
|
47759
47811
|
},
|
|
47760
47812
|
"shadow-floating-small": {
|
|
47761
47813
|
"key": "{shadow.floating.small}",
|
|
@@ -47916,6 +47968,10 @@
|
|
|
47916
47968
|
"isSource": true,
|
|
47917
47969
|
"$type": "shadow"
|
|
47918
47970
|
}
|
|
47971
|
+
},
|
|
47972
|
+
"org.primer.llm": {
|
|
47973
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47974
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47919
47975
|
}
|
|
47920
47976
|
},
|
|
47921
47977
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47940,6 +47996,7 @@
|
|
|
47940
47996
|
}
|
|
47941
47997
|
],
|
|
47942
47998
|
"$type": "shadow",
|
|
47999
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47943
48000
|
"$extensions": {
|
|
47944
48001
|
"org.primer.figma": {
|
|
47945
48002
|
"collection": "mode",
|
|
@@ -47969,6 +48026,10 @@
|
|
|
47969
48026
|
"isSource": true,
|
|
47970
48027
|
"$type": "shadow"
|
|
47971
48028
|
}
|
|
48029
|
+
},
|
|
48030
|
+
"org.primer.llm": {
|
|
48031
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48032
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47972
48033
|
}
|
|
47973
48034
|
},
|
|
47974
48035
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47977,7 +48038,8 @@
|
|
|
47977
48038
|
"attributes": {},
|
|
47978
48039
|
"path": ["shadow", "floating", "xlarge"],
|
|
47979
48040
|
"value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
|
|
47980
|
-
"type": "shadow"
|
|
48041
|
+
"type": "shadow",
|
|
48042
|
+
"description": "Extra large floating shadow for full-screen overlays and sheets"
|
|
47981
48043
|
},
|
|
47982
48044
|
"shadow-inset": {
|
|
47983
48045
|
"key": "{shadow.inset}",
|
|
@@ -48001,6 +48063,10 @@
|
|
|
48001
48063
|
"isSource": true,
|
|
48002
48064
|
"$type": "shadow"
|
|
48003
48065
|
}
|
|
48066
|
+
},
|
|
48067
|
+
"org.primer.llm": {
|
|
48068
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48069
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
48004
48070
|
}
|
|
48005
48071
|
},
|
|
48006
48072
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -48016,6 +48082,7 @@
|
|
|
48016
48082
|
"inset": true
|
|
48017
48083
|
},
|
|
48018
48084
|
"$type": "shadow",
|
|
48085
|
+
"$description": "Inset shadow for recessed elements",
|
|
48019
48086
|
"$extensions": {
|
|
48020
48087
|
"org.primer.figma": {
|
|
48021
48088
|
"collection": "mode",
|
|
@@ -48036,6 +48103,10 @@
|
|
|
48036
48103
|
"isSource": true,
|
|
48037
48104
|
"$type": "shadow"
|
|
48038
48105
|
}
|
|
48106
|
+
},
|
|
48107
|
+
"org.primer.llm": {
|
|
48108
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48109
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
48039
48110
|
}
|
|
48040
48111
|
},
|
|
48041
48112
|
"key": "{shadow.inset}"
|
|
@@ -48044,7 +48115,8 @@
|
|
|
48044
48115
|
"attributes": {},
|
|
48045
48116
|
"path": ["shadow", "inset"],
|
|
48046
48117
|
"value": "inset 0px 1px 0px 0px #1f23280a",
|
|
48047
|
-
"type": "shadow"
|
|
48118
|
+
"type": "shadow",
|
|
48119
|
+
"description": "Inset shadow for recessed elements"
|
|
48048
48120
|
},
|
|
48049
48121
|
"shadow-resting-medium": {
|
|
48050
48122
|
"key": "{shadow.resting.medium}",
|
|
@@ -48077,6 +48149,10 @@
|
|
|
48077
48149
|
"isSource": true,
|
|
48078
48150
|
"$type": "shadow"
|
|
48079
48151
|
}
|
|
48152
|
+
},
|
|
48153
|
+
"org.primer.llm": {
|
|
48154
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48155
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
48080
48156
|
}
|
|
48081
48157
|
},
|
|
48082
48158
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -48101,6 +48177,7 @@
|
|
|
48101
48177
|
}
|
|
48102
48178
|
],
|
|
48103
48179
|
"$type": "shadow",
|
|
48180
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
48104
48181
|
"$extensions": {
|
|
48105
48182
|
"org.primer.figma": {
|
|
48106
48183
|
"collection": "mode",
|
|
@@ -48130,6 +48207,10 @@
|
|
|
48130
48207
|
"isSource": true,
|
|
48131
48208
|
"$type": "shadow"
|
|
48132
48209
|
}
|
|
48210
|
+
},
|
|
48211
|
+
"org.primer.llm": {
|
|
48212
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48213
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
48133
48214
|
}
|
|
48134
48215
|
},
|
|
48135
48216
|
"key": "{shadow.resting.medium}"
|
|
@@ -48138,7 +48219,8 @@
|
|
|
48138
48219
|
"attributes": {},
|
|
48139
48220
|
"path": ["shadow", "resting", "medium"],
|
|
48140
48221
|
"value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
48141
|
-
"type": "shadow"
|
|
48222
|
+
"type": "shadow",
|
|
48223
|
+
"description": "Medium resting shadow for cards and elevated surfaces"
|
|
48142
48224
|
},
|
|
48143
48225
|
"shadow-resting-small": {
|
|
48144
48226
|
"key": "{shadow.resting.small}",
|
|
@@ -48173,6 +48255,10 @@
|
|
|
48173
48255
|
"isSource": true,
|
|
48174
48256
|
"$type": "shadow"
|
|
48175
48257
|
}
|
|
48258
|
+
},
|
|
48259
|
+
"org.primer.llm": {
|
|
48260
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48261
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
48176
48262
|
}
|
|
48177
48263
|
},
|
|
48178
48264
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -48181,7 +48267,7 @@
|
|
|
48181
48267
|
"$value": [
|
|
48182
48268
|
{
|
|
48183
48269
|
"color": "{base.color.neutral.13}",
|
|
48184
|
-
"alpha": 0.
|
|
48270
|
+
"alpha": 0.04,
|
|
48185
48271
|
"offsetX": "0px",
|
|
48186
48272
|
"offsetY": "1px",
|
|
48187
48273
|
"blur": "1px",
|
|
@@ -48190,15 +48276,16 @@
|
|
|
48190
48276
|
},
|
|
48191
48277
|
{
|
|
48192
48278
|
"color": "{base.color.neutral.13}",
|
|
48193
|
-
"alpha": 0.
|
|
48279
|
+
"alpha": 0.03,
|
|
48194
48280
|
"offsetX": "0px",
|
|
48195
48281
|
"offsetY": "1px",
|
|
48196
|
-
"blur": "
|
|
48282
|
+
"blur": "2px",
|
|
48197
48283
|
"spread": "0px",
|
|
48198
48284
|
"inset": false
|
|
48199
48285
|
}
|
|
48200
48286
|
],
|
|
48201
48287
|
"$type": "shadow",
|
|
48288
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
48202
48289
|
"$extensions": {
|
|
48203
48290
|
"org.primer.figma": {
|
|
48204
48291
|
"collection": "mode",
|
|
@@ -48230,6 +48317,10 @@
|
|
|
48230
48317
|
"isSource": true,
|
|
48231
48318
|
"$type": "shadow"
|
|
48232
48319
|
}
|
|
48320
|
+
},
|
|
48321
|
+
"org.primer.llm": {
|
|
48322
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48323
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
48233
48324
|
}
|
|
48234
48325
|
},
|
|
48235
48326
|
"key": "{shadow.resting.small}"
|
|
@@ -48237,8 +48328,9 @@
|
|
|
48237
48328
|
"name": "shadow-resting-small",
|
|
48238
48329
|
"attributes": {},
|
|
48239
48330
|
"path": ["shadow", "resting", "small"],
|
|
48240
|
-
"value": "0px 1px 1px 0px #
|
|
48241
|
-
"type": "shadow"
|
|
48331
|
+
"value": "0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808",
|
|
48332
|
+
"type": "shadow",
|
|
48333
|
+
"description": "Small resting shadow for buttons and interactive elements"
|
|
48242
48334
|
},
|
|
48243
48335
|
"shadow-resting-xsmall": {
|
|
48244
48336
|
"key": "{shadow.resting.xsmall}",
|
|
@@ -48262,6 +48354,10 @@
|
|
|
48262
48354
|
"isSource": true,
|
|
48263
48355
|
"$type": "shadow"
|
|
48264
48356
|
}
|
|
48357
|
+
},
|
|
48358
|
+
"org.primer.llm": {
|
|
48359
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48360
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
48265
48361
|
}
|
|
48266
48362
|
},
|
|
48267
48363
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -48269,7 +48365,7 @@
|
|
|
48269
48365
|
"original": {
|
|
48270
48366
|
"$value": {
|
|
48271
48367
|
"color": "{base.color.neutral.13}",
|
|
48272
|
-
"alpha": 0.
|
|
48368
|
+
"alpha": 0.05,
|
|
48273
48369
|
"offsetX": "0px",
|
|
48274
48370
|
"offsetY": "1px",
|
|
48275
48371
|
"blur": "1px",
|
|
@@ -48277,6 +48373,7 @@
|
|
|
48277
48373
|
"inset": false
|
|
48278
48374
|
},
|
|
48279
48375
|
"$type": "shadow",
|
|
48376
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
48280
48377
|
"$extensions": {
|
|
48281
48378
|
"org.primer.figma": {
|
|
48282
48379
|
"collection": "mode",
|
|
@@ -48297,6 +48394,10 @@
|
|
|
48297
48394
|
"isSource": true,
|
|
48298
48395
|
"$type": "shadow"
|
|
48299
48396
|
}
|
|
48397
|
+
},
|
|
48398
|
+
"org.primer.llm": {
|
|
48399
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48400
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
48300
48401
|
}
|
|
48301
48402
|
},
|
|
48302
48403
|
"key": "{shadow.resting.xsmall}"
|
|
@@ -48304,8 +48405,9 @@
|
|
|
48304
48405
|
"name": "shadow-resting-xsmall",
|
|
48305
48406
|
"attributes": {},
|
|
48306
48407
|
"path": ["shadow", "resting", "xsmall"],
|
|
48307
|
-
"value": "0px 1px 1px 0px #
|
|
48308
|
-
"type": "shadow"
|
|
48408
|
+
"value": "0px 1px 1px 0px #1f23280d",
|
|
48409
|
+
"type": "shadow",
|
|
48410
|
+
"description": "Extra small resting shadow for minimal elevation"
|
|
48309
48411
|
},
|
|
48310
48412
|
"sideNav-bgColor-selected": {
|
|
48311
48413
|
"key": "{sideNav.bgColor.selected}",
|