@primer/primitives 7.6.0 → 7.8.0-rc.b3d89b6

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 (58) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/README.md +2 -2
  3. package/dist/js/colors/dark_tritanopia.d.ts +479 -0
  4. package/dist/js/colors/dark_tritanopia.js +579 -0
  5. package/dist/js/colors/index.d.ts +959 -3
  6. package/dist/js/colors/index.js +3 -1
  7. package/dist/js/colors/light_tritanopia.d.ts +479 -0
  8. package/dist/js/colors/light_tritanopia.js +579 -0
  9. package/dist/js/index.d.ts +959 -3
  10. package/dist/json/colors/dark_tritanopia.json +577 -0
  11. package/dist/json/colors/light_tritanopia.json +577 -0
  12. package/dist/scss/colors/_dark_tritanopia.scss +437 -0
  13. package/dist/scss/colors/_light_tritanopia.scss +437 -0
  14. package/dist/ts/colors/dark_tritanopia.ts +577 -0
  15. package/dist/ts/colors/index.ts +3 -1
  16. package/dist/ts/colors/light_tritanopia.ts +577 -0
  17. package/package.json +14 -8
  18. package/tokens-v2-private/css/tokens/base/size/size.css +24 -0
  19. package/tokens-v2-private/css/tokens/base/typography/typography.css +11 -0
  20. package/tokens-v2-private/css/tokens/functional/size/border.css +17 -0
  21. package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +13 -0
  22. package/tokens-v2-private/css/tokens/functional/size/size-fine.css +10 -0
  23. package/tokens-v2-private/css/tokens/functional/size/size.css +54 -0
  24. package/tokens-v2-private/css/tokens/functional/size/viewport.css +6 -0
  25. package/tokens-v2-private/css/tokens/functional/typography/typography.css +47 -0
  26. package/tokens-v2-private/docs/docValues.json +2210 -0
  27. package/tokens-v2-private/js/module/tokens/base/size/size.js +266 -0
  28. package/tokens-v2-private/js/module/tokens/base/typography/typography.js +77 -0
  29. package/tokens-v2-private/js/module/tokens/functional/size/border.js +165 -0
  30. package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +101 -0
  31. package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +73 -0
  32. package/tokens-v2-private/js/module/tokens/functional/size/size.js +824 -0
  33. package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +101 -0
  34. package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +811 -0
  35. package/tokens-v2-private/js/tokens/base/size/size.js +22 -0
  36. package/tokens-v2-private/js/tokens/base/typography/typography.js +9 -0
  37. package/tokens-v2-private/js/tokens/functional/size/border.js +15 -0
  38. package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +11 -0
  39. package/tokens-v2-private/js/tokens/functional/size/size-fine.js +8 -0
  40. package/tokens-v2-private/js/tokens/functional/size/size.js +52 -0
  41. package/tokens-v2-private/js/tokens/functional/size/viewport.js +11 -0
  42. package/tokens-v2-private/js/tokens/functional/typography/typography.js +45 -0
  43. package/tokens-v2-private/ts/tokens/base/size/size.d.ts +29 -0
  44. package/tokens-v2-private/ts/tokens/base/size/size.js +28 -0
  45. package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +18 -0
  46. package/tokens-v2-private/ts/tokens/base/typography/typography.js +17 -0
  47. package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +26 -0
  48. package/tokens-v2-private/ts/tokens/functional/size/border.js +25 -0
  49. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +18 -0
  50. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +17 -0
  51. package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +27 -0
  52. package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +26 -0
  53. package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +101 -0
  54. package/tokens-v2-private/ts/tokens/functional/size/size.js +100 -0
  55. package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +18 -0
  56. package/tokens-v2-private/ts/tokens/functional/size/viewport.js +17 -0
  57. package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +130 -0
  58. package/tokens-v2-private/ts/tokens/functional/typography/typography.js +129 -0
package/tokens-v2-private/css/tokens/functional/size/size-fine.css ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 20 Apr 2022 16:47:27 GMT
4
+ */
5
+
6
+ @media (pointer: fine) { :root {
7
+ --primer-control-minTarget-auto: 1rem;
8
+ --primer-controlStack-small-gap-auto: 0.5rem;
9
+ --primer-controlStack-medium-gap-auto: 0.5rem;
10
+ }}
package/tokens-v2-private/css/tokens/functional/size/size.css ADDED
@@ -0,0 +1,54 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 20 Apr 2022 16:47:26 GMT
4
+ */
5
+
6
+ :root {
7
+ --primer-stack-gap-spacious: var(--base-size-24);
8
+ --primer-stack-gap-normal: var(--base-size-16);
9
+ --primer-stack-gap-condensed: var(--base-size-8);
10
+ --primer-stack-padding-spacious: var(--base-size-24);
11
+ --primer-stack-padding-normal: var(--base-size-16);
12
+ --primer-stack-padding-condensed: var(--base-size-8);
13
+ --primer-controlStack-large-gap-spacious: var(--base-size-12);
14
+ --primer-controlStack-large-gap-condensed: var(--base-size-8);
15
+ --primer-controlStack-large-gap-auto: var(--base-size-8);
16
+ --primer-controlStack-medium-gap-spacious: var(--base-size-12);
17
+ --primer-controlStack-medium-gap-condensed: var(--base-size-8);
18
+ --primer-controlStack-small-gap-spacious: var(--base-size-16);
19
+ --primer-controlStack-small-gap-condensed: var(--base-size-8);
20
+ --primer-control-xlarge-gap: var(--base-size-8);
21
+ --primer-control-xlarge-paddingInline-spacious: var(--base-size-16);
22
+ --primer-control-xlarge-paddingInline-normal: var(--base-size-12);
23
+ --primer-control-xlarge-lineBoxHeight: var(--base-size-20);
24
+ --primer-control-xlarge-size: var(--base-size-48);
25
+ --primer-control-large-gap: var(--base-size-8);
26
+ --primer-control-large-paddingInline-spacious: var(--base-size-16);
27
+ --primer-control-large-paddingInline-normal: var(--base-size-12);
28
+ --primer-control-large-lineBoxHeight: var(--base-size-20);
29
+ --primer-control-large-size: var(--base-size-40);
30
+ --primer-control-medium-gap: var(--base-size-8);
31
+ --primer-control-medium-paddingInline-spacious: var(--base-size-16);
32
+ --primer-control-medium-paddingInline-normal: var(--base-size-12);
33
+ --primer-control-medium-paddingInline-condensed: var(--base-size-8);
34
+ --primer-control-medium-lineBoxHeight: var(--base-size-20);
35
+ --primer-control-medium-size: var(--base-size-32);
36
+ --primer-control-small-gap: var(--base-size-4);
37
+ --primer-control-small-paddingInline-normal: var(--base-size-12);
38
+ --primer-control-small-paddingInline-condensed: var(--base-size-8);
39
+ --primer-control-small-lineBoxHeight: var(--base-size-20);
40
+ --primer-control-small-size: var(--base-size-28);
41
+ --primer-control-xsmall-gap: var(--base-size-4);
42
+ --primer-control-xsmall-paddingInline-spacious: var(--base-size-12);
43
+ --primer-control-xsmall-paddingInline-normal: var(--base-size-8);
44
+ --primer-control-xsmall-paddingInline-condensed: var(--base-size-4);
45
+ --primer-control-xsmall-lineBoxHeight: var(--base-size-20);
46
+ --primer-control-xsmall-size: var(--base-size-24);
47
+ --primer-control-minTarget-coarse: var(--base-size-44);
48
+ --primer-control-minTarget-fine: var(--base-size-16);
49
+ --primer-control-xlarge-paddingBlock: calc((var(--primer-control-xlarge-size) - var(--primer-control-xlarge-lineBoxHeight)) / 2);
50
+ --primer-control-large-paddingBlock: calc((var(--primer-control-large-size) - var(--primer-control-large-lineBoxHeight)) / 2);
51
+ --primer-control-medium-paddingBlock: calc((var(--primer-control-medium-size) - var(--primer-control-medium-lineBoxHeight)) / 2);
52
+ --primer-control-small-paddingBlock: calc((var(--primer-control-small-size) - var(--primer-control-small-lineBoxHeight)) / 2);
53
+ --primer-control-xsmall-paddingBlock: calc((var(--primer-control-xsmall-size) - var(--primer-control-xsmall-lineBoxHeight)) / 2);
54
+ }
package/tokens-v2-private/css/tokens/functional/size/viewport.css ADDED
@@ -0,0 +1,6 @@
1
+ @custom-media --primer-viewportRange-narrow-viewport (max-width: calc(48rem - 0.02px));
2
+ @custom-media --primer-viewportRange-narrowLandscape-viewport (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
3
+ @custom-media --primer-viewportRange-regular-viewport (min-width: 48rem);
4
+ @custom-media --primer-viewportRange-wide-viewport (min-width: 90rem);
5
+ @custom-media --primer-viewportRange-portrait-viewport (orientation: portrait);
6
+ @custom-media --primer-viewportRange-landscape-viewport (orientation: landscape);
package/tokens-v2-private/css/tokens/functional/typography/typography.css ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 20 Apr 2022 16:47:26 GMT
4
+ */
5
+
6
+ :root {
7
+ --primer-text-codeInline-size: 0.9285em;
8
+ --primer-text-codeBlock-lineHeight: 1.25rem;
9
+ --primer-text-codeBlock-size: 0.8125rem;
10
+ --primer-text-caption-lineHeight: 1rem;
11
+ --primer-text-caption-size: 0.75rem;
12
+ --primer-text-body-lineHeight-small: 1.25rem;
13
+ --primer-text-body-lineHeight-medium: 1.25rem;
14
+ --primer-text-body-lineHeight-large: 1.5rem;
15
+ --primer-text-body-size-small: 0.75rem;
16
+ --primer-text-body-size-medium: 0.875rem;
17
+ --primer-text-body-size-large: 1rem;
18
+ --primer-text-subtitle-lineHeight: 2rem;
19
+ --primer-text-subtitle-size: 1.25rem;
20
+ --primer-text-title-lineHeight-medium: 2rem;
21
+ --primer-text-title-lineHeight-large: 3rem;
22
+ --primer-text-title-size-medium: 1.25rem;
23
+ --primer-text-title-size-large: 2rem;
24
+ --primer-text-display-lineHeight: 3.5rem;
25
+ --primer-text-display-size: 2.5rem;
26
+ --primer-text-display-lineBoxHeight: 3.5rem;
27
+ --primer-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
28
+ --primer-fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
29
+ --primer-fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
30
+ --primer-text-codeInline-weight: var(--base-text-weight-normal);
31
+ --primer-text-codeBlock-weight: var(--base-text-weight-normal);
32
+ --primer-text-caption-weight: var(--base-text-weight-normal);
33
+ --primer-text-body-weight: var(--base-text-weight-normal);
34
+ --primer-text-subtitle-weight: var(--base-text-weight-normal);
35
+ --primer-text-title-weight: var(--base-text-weight-semibold);
36
+ --primer-text-display-weight: var(--base-text-weight-medium);
37
+ --primer-text-codeInline-shorthand: var(--primer-text-codeInline-weight) var(--primer-text-codeInline-size)/inherit var(--primer-fontStack-monospace);
38
+ --primer-text-codeBlock-shorthand: var(--primer-text-codeBlock-weight) var(--primer-text-codeBlock-size)/var(--primer-text-codeBlock-lineHeight) var(--primer-fontStack-monospace);
39
+ --primer-text-caption-shorthand: var(--primer-text-caption-weight) var(--primer-text-caption-size)/var(--primer-text-caption-lineHeight) var(--primer-fontStack-sansSerif);
40
+ --primer-text-body-shorthand-small: var(--primer-text-body-weight) var(--primer-text-body-size-small)/var(--primer-text-body-lineHeight-small) var(--primer-fontStack-sansSerif);
41
+ --primer-text-body-shorthand-medium: var(--primer-text-body-weight) var(--primer-text-body-size-medium)/var(--primer-text-body-lineHeight-medium) var(--primer-fontStack-sansSerif);
42
+ --primer-text-body-shorthand-large: var(--primer-text-body-weight) var(--primer-text-body-size-large)/var(--primer-text-body-lineHeight-large) var(--primer-fontStack-sansSerif);
43
+ --primer-text-subtitle-shorthand: var(--primer-text-subtitle-weight) var(--primer-text-subtitle-size)/var(--primer-text-subtitle-lineHeight) var(--primer-fontStack-sansSerif);
44
+ --primer-text-title-shorthand-medium: var(--primer-text-title-weight) var(--primer-text-title-size-medium)/var(--primer-text-title-lineHeight-medium) var(--primer-fontStack-sansSerif);
45
+ --primer-text-title-shorthand-large: var(--primer-text-title-weight) var(--primer-text-title-size-large)/var(--primer-text-title-lineHeight-large) var(--primer-fontStack-sansSerif);
46
+ --primer-text-display-shorthand: var(--primer-text-display-weight) var(--primer-text-display-size)/var(--primer-text-display-lineHeight) var(--primer-fontStack-sansSerif);
47
+ }