@primer/primitives 8.2.0 → 8.2.1-rc.8f283c7d
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/README.md +2 -3
- package/dist/css/primitives.css +177 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
This repo contains values for color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
+
|
|
8
9
|
|
|
9
10
|
## Install
|
|
10
11
|
|
|
@@ -32,8 +33,6 @@ All available imports:
|
|
|
32
33
|
@import '@primer/primitives/dist/css/base/typography/typography.css';
|
|
33
34
|
@import '@primer/primitives/dist/css/functional/size/border.css';
|
|
34
35
|
@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
|
|
35
|
-
@import '@primer/primitives/dist/css/functional/size/size-coarse.css';
|
|
36
|
-
@import '@primer/primitives/dist/css/functional/size/size-fine.css';
|
|
37
36
|
@import '@primer/primitives/dist/css/functional/size/size.css';
|
|
38
37
|
@import '@primer/primitives/dist/css/functional/size/viewport.css';
|
|
39
38
|
@import '@primer/primitives/dist/css/functional/typography/typography.css';
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--base-size-2: 0.125rem;
|
|
3
|
+
--base-size-4: 0.25rem;
|
|
4
|
+
--base-size-6: 0.375rem;
|
|
5
|
+
--base-size-8: 0.5rem;
|
|
6
|
+
--base-size-12: 0.75rem;
|
|
7
|
+
--base-size-16: 1rem;
|
|
8
|
+
--base-size-20: 1.25rem;
|
|
9
|
+
--base-size-24: 1.5rem;
|
|
10
|
+
--base-size-28: 1.75rem;
|
|
11
|
+
--base-size-32: 2rem;
|
|
12
|
+
--base-size-36: 2.25rem;
|
|
13
|
+
--base-size-40: 2.5rem;
|
|
14
|
+
--base-size-44: 2.75rem;
|
|
15
|
+
--base-size-48: 3rem;
|
|
16
|
+
--base-size-64: 4rem;
|
|
17
|
+
--base-size-80: 5rem;
|
|
18
|
+
--base-size-96: 6rem;
|
|
19
|
+
--base-size-112: 7rem;
|
|
20
|
+
--base-size-128: 8rem;
|
|
21
|
+
}
|
|
22
|
+
:root {
|
|
23
|
+
--base-text-weight-light: 300;
|
|
24
|
+
--base-text-weight-normal: 400;
|
|
25
|
+
--base-text-weight-medium: 500;
|
|
26
|
+
--base-text-weight-semibold: 600;
|
|
27
|
+
}
|
|
28
|
+
:root {
|
|
29
|
+
--motion-skeletonLoader-shimmer-duration-scale: 1s;
|
|
30
|
+
--motion-spinner-duration-rotation: 1s;
|
|
31
|
+
--motion-loading-delay-default: 1s;
|
|
32
|
+
}
|
|
33
|
+
:root {
|
|
34
|
+
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
|
|
35
|
+
--boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
|
|
36
|
+
--boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
|
|
37
|
+
--borderWidth-thin: max(1px, 0.0625rem);
|
|
38
|
+
--borderWidth-thick: max(2px, 0.125rem);
|
|
39
|
+
--borderWidth-thicker: max(4px, 0.25rem);
|
|
40
|
+
--borderRadius-small: 0.1875rem;
|
|
41
|
+
--borderRadius-medium: 0.375rem;
|
|
42
|
+
--borderRadius-large: 0.75rem;
|
|
43
|
+
--borderRadius-full: 624.9375rem;
|
|
44
|
+
--outline-focus-offset: -0.125rem;
|
|
45
|
+
--outline-focus-width: 0.125rem;
|
|
46
|
+
}
|
|
47
|
+
:root {
|
|
48
|
+
--breakpoint-xsmall: 20rem;
|
|
49
|
+
--breakpoint-small: 34rem;
|
|
50
|
+
--breakpoint-medium: 48rem;
|
|
51
|
+
--breakpoint-large: 63.25rem;
|
|
52
|
+
--breakpoint-xlarge: 80rem;
|
|
53
|
+
--breakpoint-xxlarge: 87.5rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
:root {
|
|
58
|
+
--control-minTarget-fine: 1rem;
|
|
59
|
+
--control-minTarget-coarse: 2.75rem;
|
|
60
|
+
--control-xsmall-size: 1.5rem;
|
|
61
|
+
--control-xsmall-lineBoxHeight: 1.25rem;
|
|
62
|
+
--control-xsmall-paddingBlock: 0.125rem;
|
|
63
|
+
--control-xsmall-paddingInline-condensed: 0.25rem;
|
|
64
|
+
--control-xsmall-paddingInline-normal: 0.5rem;
|
|
65
|
+
--control-xsmall-paddingInline-spacious: 0.75rem;
|
|
66
|
+
--control-xsmall-gap: 0.25rem;
|
|
67
|
+
--control-small-size: 1.75rem;
|
|
68
|
+
--control-small-lineBoxHeight: 1.25rem;
|
|
69
|
+
--control-small-paddingBlock: 0.25rem;
|
|
70
|
+
--control-small-paddingInline-condensed: 0.5rem;
|
|
71
|
+
--control-small-paddingInline-normal: 0.75rem;
|
|
72
|
+
--control-small-gap: 0.25rem;
|
|
73
|
+
--control-medium-size: 2rem;
|
|
74
|
+
--control-medium-lineBoxHeight: 1.25rem;
|
|
75
|
+
--control-medium-paddingBlock: 0.375rem;
|
|
76
|
+
--control-medium-paddingInline-condensed: 0.5rem;
|
|
77
|
+
--control-medium-paddingInline-normal: 0.75rem;
|
|
78
|
+
--control-medium-paddingInline-spacious: 1rem;
|
|
79
|
+
--control-medium-gap: 0.5rem;
|
|
80
|
+
--control-large-size: 2.5rem;
|
|
81
|
+
--control-large-lineBoxHeight: 1.25rem;
|
|
82
|
+
--control-large-paddingBlock: 0.625rem;
|
|
83
|
+
--control-large-paddingInline-normal: 0.75rem;
|
|
84
|
+
--control-large-paddingInline-spacious: 1rem;
|
|
85
|
+
--control-large-gap: 0.5rem;
|
|
86
|
+
--control-xlarge-size: 3rem;
|
|
87
|
+
--control-xlarge-lineBoxHeight: 1.25rem;
|
|
88
|
+
--control-xlarge-paddingBlock: 0.875rem;
|
|
89
|
+
--control-xlarge-paddingInline-normal: 0.75rem;
|
|
90
|
+
--control-xlarge-paddingInline-spacious: 1rem;
|
|
91
|
+
--control-xlarge-gap: 0.5rem;
|
|
92
|
+
--controlStack-small-gap-condensed: 0.5rem;
|
|
93
|
+
--controlStack-small-gap-spacious: 1rem;
|
|
94
|
+
--controlStack-medium-gap-condensed: 0.5rem;
|
|
95
|
+
--controlStack-medium-gap-spacious: 0.75rem;
|
|
96
|
+
--controlStack-large-gap-auto: 0.5rem;
|
|
97
|
+
--controlStack-large-gap-condensed: 0.5rem;
|
|
98
|
+
--controlStack-large-gap-spacious: 0.75rem;
|
|
99
|
+
--space-xxsmall: 0.125rem;
|
|
100
|
+
--space-xsmall: 0.25rem;
|
|
101
|
+
--space-small: 0.375rem;
|
|
102
|
+
--space-medium: 0.5rem;
|
|
103
|
+
--space-large: 0.75rem;
|
|
104
|
+
--space-xlarge: 1rem;
|
|
105
|
+
--spinner-strokeWidth-default: 0.125rem;
|
|
106
|
+
--spinner-size-small: 1rem;
|
|
107
|
+
--spinner-size-medium: 2rem;
|
|
108
|
+
--spinner-size-large: 4rem;
|
|
109
|
+
--stack-padding-condensed: 0.5rem;
|
|
110
|
+
--stack-padding-normal: 1rem;
|
|
111
|
+
--stack-padding-spacious: 1.5rem;
|
|
112
|
+
--stack-gap-condensed: 0.5rem;
|
|
113
|
+
--stack-gap-normal: 1rem;
|
|
114
|
+
--stack-gap-spacious: 1.5rem;
|
|
115
|
+
--overlay-width-xsmall: 12rem;
|
|
116
|
+
--overlay-width-small: 20rem;
|
|
117
|
+
--overlay-width-medium: 30rem;
|
|
118
|
+
--overlay-width-large: 40rem;
|
|
119
|
+
--overlay-width-xlarge: 60rem;
|
|
120
|
+
--overlay-height-small: 16rem;
|
|
121
|
+
--overlay-height-medium: 20rem;
|
|
122
|
+
--overlay-height-large: 27rem;
|
|
123
|
+
--overlay-height-xlarge: 37.5rem;
|
|
124
|
+
--overlay-padding-normal: 1rem;
|
|
125
|
+
--overlay-padding-condensed: 0.5rem;
|
|
126
|
+
--overlay-paddingBlock-condensed: 0.25rem;
|
|
127
|
+
--overlay-paddingBlock-normal: 0.75rem;
|
|
128
|
+
--overlay-borderRadius: 0.375rem;
|
|
129
|
+
--overlay-offset: 0.25rem;
|
|
130
|
+
}
|
|
131
|
+
:root {
|
|
132
|
+
--text-codeInline-size: 0.9285em;
|
|
133
|
+
--text-codeBlock-lineHeight: 1.5385;
|
|
134
|
+
--text-codeBlock-size: 0.8125rem;
|
|
135
|
+
--text-caption-lineHeight: 1.3333;
|
|
136
|
+
--text-caption-size: 0.75rem;
|
|
137
|
+
--text-body-lineHeight-small: 1.6666;
|
|
138
|
+
--text-body-lineHeight-medium: 1.4285;
|
|
139
|
+
--text-body-lineHeight-large: 1.5;
|
|
140
|
+
--text-body-size-small: 0.75rem;
|
|
141
|
+
--text-body-size-medium: 0.875rem;
|
|
142
|
+
--text-body-size-large: 1rem;
|
|
143
|
+
--text-subtitle-lineHeight: 1.6;
|
|
144
|
+
--text-subtitle-size: 1.25rem;
|
|
145
|
+
--text-title-lineHeight-small: 1.5;
|
|
146
|
+
--text-title-lineHeight-medium: 1.6;
|
|
147
|
+
--text-title-lineHeight-large: 1.5;
|
|
148
|
+
--text-title-size-small: 1rem;
|
|
149
|
+
--text-title-size-medium: 1.25rem;
|
|
150
|
+
--text-title-size-large: 2rem;
|
|
151
|
+
--text-display-lineHeight: 1.4;
|
|
152
|
+
--text-display-size: 2.5rem;
|
|
153
|
+
--text-display-lineBoxHeight: 1.4;
|
|
154
|
+
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
155
|
+
--fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
156
|
+
--fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
157
|
+
--text-codeInline-weight: var(--base-text-weight-normal);
|
|
158
|
+
--text-codeBlock-weight: var(--base-text-weight-normal);
|
|
159
|
+
--text-caption-weight: var(--base-text-weight-normal);
|
|
160
|
+
--text-body-weight: var(--base-text-weight-normal);
|
|
161
|
+
--text-subtitle-weight: var(--base-text-weight-normal);
|
|
162
|
+
--text-title-weight-small: var(--base-text-weight-semibold);
|
|
163
|
+
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
164
|
+
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
165
|
+
--text-display-weight: var(--base-text-weight-medium);
|
|
166
|
+
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
|
|
167
|
+
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
|
|
168
|
+
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
|
|
169
|
+
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
|
|
170
|
+
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
|
|
171
|
+
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
|
|
172
|
+
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
|
|
173
|
+
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
|
|
174
|
+
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
|
|
175
|
+
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
|
|
176
|
+
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
|
|
177
|
+
}
|