@primer/primitives 11.2.0-rc.1012e204 → 11.2.0
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/dist/css/primitives.css +9 -199
- package/package.json +1 -1
package/dist/css/primitives.css
CHANGED
|
@@ -1,199 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--base-duration-600: 600ms;
|
|
11
|
-
--base-duration-700: 700ms;
|
|
12
|
-
--base-duration-800: 800ms;
|
|
13
|
-
--base-duration-900: 900ms;
|
|
14
|
-
--base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9); /** Ideal for movement that starts on the page and ends off the page. */
|
|
15
|
-
--base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1); /** Ideal for movement that starts and ends on the page. */
|
|
16
|
-
--base-easing-easeOut: cubic-bezier(0.3, 0.8, 0.6, 1); /** Ideal for movement that starts off the page and ends on the page. */
|
|
17
|
-
--base-easing-linear: cubic-bezier(0, 0, 1, 1); /** Ideal for non-movement properties, like opacity or background color. */
|
|
18
|
-
}
|
|
19
|
-
:root {
|
|
20
|
-
--base-size-112: 7rem;
|
|
21
|
-
--base-size-12: 0.75rem;
|
|
22
|
-
--base-size-128: 8rem;
|
|
23
|
-
--base-size-16: 1rem;
|
|
24
|
-
--base-size-2: 0.125rem;
|
|
25
|
-
--base-size-20: 1.25rem;
|
|
26
|
-
--base-size-24: 1.5rem;
|
|
27
|
-
--base-size-28: 1.75rem;
|
|
28
|
-
--base-size-32: 2rem;
|
|
29
|
-
--base-size-36: 2.25rem;
|
|
30
|
-
--base-size-4: 0.25rem;
|
|
31
|
-
--base-size-40: 2.5rem;
|
|
32
|
-
--base-size-44: 2.75rem;
|
|
33
|
-
--base-size-48: 3rem;
|
|
34
|
-
--base-size-6: 0.375rem;
|
|
35
|
-
--base-size-64: 4rem;
|
|
36
|
-
--base-size-8: 0.5rem;
|
|
37
|
-
--base-size-80: 5rem;
|
|
38
|
-
--base-size-96: 6rem;
|
|
39
|
-
}
|
|
40
|
-
:root {
|
|
41
|
-
--base-text-weight-light: 300;
|
|
42
|
-
--base-text-weight-medium: 500;
|
|
43
|
-
--base-text-weight-normal: 400;
|
|
44
|
-
--base-text-weight-semibold: 600;
|
|
45
|
-
}
|
|
46
|
-
:root {
|
|
47
|
-
--borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
|
|
48
|
-
--borderRadius-large: 0.75rem;
|
|
49
|
-
--borderRadius-medium: 0.375rem;
|
|
50
|
-
--borderRadius-small: 0.1875rem;
|
|
51
|
-
--borderWidth-thick: 0.125rem;
|
|
52
|
-
--borderWidth-thicker: 0.25rem;
|
|
53
|
-
--borderWidth-thin: 0.0625rem;
|
|
54
|
-
--outline-focus-offset: -0.125rem;
|
|
55
|
-
--outline-focus-width: 0.125rem;
|
|
56
|
-
--borderRadius-default: var(--borderRadius-medium);
|
|
57
|
-
--borderWidth-default: var(--borderWidth-thin);
|
|
58
|
-
--boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
|
|
59
|
-
--boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
|
|
60
|
-
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
|
|
61
|
-
}
|
|
62
|
-
:root {
|
|
63
|
-
--breakpoint-large: 63.25rem;
|
|
64
|
-
--breakpoint-medium: 48rem;
|
|
65
|
-
--breakpoint-small: 34rem;
|
|
66
|
-
--breakpoint-xlarge: 80rem;
|
|
67
|
-
--breakpoint-xsmall: 20rem;
|
|
68
|
-
--breakpoint-xxlarge: 87.5rem;
|
|
69
|
-
}
|
|
70
|
-
@media (pointer: coarse) {
|
|
71
|
-
:root {
|
|
72
|
-
--control-minTarget-auto: 2.75rem;
|
|
73
|
-
--controlStack-medium-gap-auto: 0.75rem;
|
|
74
|
-
--controlStack-small-gap-auto: 1rem;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
@media (pointer: fine) {
|
|
78
|
-
:root {
|
|
79
|
-
--control-minTarget-auto: 1rem;
|
|
80
|
-
--controlStack-medium-gap-auto: 0.5rem;
|
|
81
|
-
--controlStack-small-gap-auto: 0.5rem;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
:root {
|
|
85
|
-
--control-large-paddingBlock: 0.625rem;
|
|
86
|
-
--control-medium-paddingBlock: 0.375rem;
|
|
87
|
-
--control-xlarge-paddingBlock: 0.875rem;
|
|
88
|
-
--control-xsmall-paddingBlock: 0.125rem;
|
|
89
|
-
--overlay-height-large: 27rem;
|
|
90
|
-
--overlay-height-medium: 20rem;
|
|
91
|
-
--overlay-height-small: 16rem;
|
|
92
|
-
--overlay-height-xlarge: 37.5rem;
|
|
93
|
-
--overlay-offset: 0.25rem;
|
|
94
|
-
--overlay-width-large: 40rem;
|
|
95
|
-
--overlay-width-medium: 30rem;
|
|
96
|
-
--overlay-width-small: 20rem;
|
|
97
|
-
--overlay-width-xlarge: 60rem;
|
|
98
|
-
--overlay-width-xsmall: 12rem;
|
|
99
|
-
--spinner-strokeWidth-default: 0.125rem;
|
|
100
|
-
--control-large-gap: 0.5rem;
|
|
101
|
-
--control-large-lineBoxHeight: 1.25rem;
|
|
102
|
-
--control-large-paddingInline-normal: 0.75rem;
|
|
103
|
-
--control-large-paddingInline-spacious: 1rem;
|
|
104
|
-
--control-large-size: 2.5rem;
|
|
105
|
-
--control-medium-gap: 0.5rem;
|
|
106
|
-
--control-medium-lineBoxHeight: 1.25rem;
|
|
107
|
-
--control-medium-paddingInline-condensed: 0.5rem;
|
|
108
|
-
--control-medium-paddingInline-normal: 0.75rem;
|
|
109
|
-
--control-medium-paddingInline-spacious: 1rem;
|
|
110
|
-
--control-medium-size: 2rem;
|
|
111
|
-
--control-minTarget-coarse: 2.75rem;
|
|
112
|
-
--control-minTarget-fine: 1rem;
|
|
113
|
-
--control-small-gap: 0.25rem;
|
|
114
|
-
--control-small-lineBoxHeight: 1.25rem;
|
|
115
|
-
--control-small-paddingBlock: 0.25rem;
|
|
116
|
-
--control-small-paddingInline-condensed: 0.5rem;
|
|
117
|
-
--control-small-paddingInline-normal: 0.75rem;
|
|
118
|
-
--control-small-size: 1.75rem;
|
|
119
|
-
--control-xlarge-gap: 0.5rem;
|
|
120
|
-
--control-xlarge-lineBoxHeight: 1.25rem;
|
|
121
|
-
--control-xlarge-paddingInline-normal: 0.75rem;
|
|
122
|
-
--control-xlarge-paddingInline-spacious: 1rem;
|
|
123
|
-
--control-xlarge-size: 3rem;
|
|
124
|
-
--control-xsmall-gap: 0.25rem;
|
|
125
|
-
--control-xsmall-lineBoxHeight: 1.25rem;
|
|
126
|
-
--control-xsmall-paddingInline-condensed: 0.25rem;
|
|
127
|
-
--control-xsmall-paddingInline-normal: 0.5rem;
|
|
128
|
-
--control-xsmall-paddingInline-spacious: 0.75rem;
|
|
129
|
-
--control-xsmall-size: 1.5rem;
|
|
130
|
-
--controlStack-large-gap-auto: 0.5rem;
|
|
131
|
-
--controlStack-large-gap-condensed: 0.5rem;
|
|
132
|
-
--controlStack-large-gap-spacious: 0.75rem;
|
|
133
|
-
--controlStack-medium-gap-condensed: 0.5rem;
|
|
134
|
-
--controlStack-medium-gap-spacious: 0.75rem;
|
|
135
|
-
--controlStack-small-gap-condensed: 0.5rem;
|
|
136
|
-
--controlStack-small-gap-spacious: 1rem;
|
|
137
|
-
--overlay-borderRadius: 0.375rem;
|
|
138
|
-
--overlay-padding-condensed: 0.5rem;
|
|
139
|
-
--overlay-padding-normal: 1rem;
|
|
140
|
-
--overlay-paddingBlock-condensed: 0.25rem;
|
|
141
|
-
--overlay-paddingBlock-normal: 0.75rem;
|
|
142
|
-
--spinner-size-large: 4rem;
|
|
143
|
-
--spinner-size-medium: 2rem;
|
|
144
|
-
--spinner-size-small: 1rem;
|
|
145
|
-
--stack-gap-condensed: 0.5rem;
|
|
146
|
-
--stack-gap-normal: 1rem;
|
|
147
|
-
--stack-gap-spacious: 1.5rem;
|
|
148
|
-
--stack-padding-condensed: 0.5rem;
|
|
149
|
-
--stack-padding-normal: 1rem;
|
|
150
|
-
--stack-padding-spacious: 1.5rem;
|
|
151
|
-
}
|
|
152
|
-
:root {
|
|
153
|
-
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
154
|
-
--fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
155
|
-
--fontStack-sansSerifDisplay: -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-body-lineHeight-large: 1.5;
|
|
158
|
-
--text-body-lineHeight-medium: 1.4285;
|
|
159
|
-
--text-body-lineHeight-small: 1.6666;
|
|
160
|
-
--text-body-size-large: 1rem;
|
|
161
|
-
--text-body-size-medium: 0.875rem;
|
|
162
|
-
--text-body-size-small: 0.75rem;
|
|
163
|
-
--text-caption-lineHeight: 1.3333;
|
|
164
|
-
--text-caption-size: 0.75rem;
|
|
165
|
-
--text-codeBlock-lineHeight: 1.5385;
|
|
166
|
-
--text-codeBlock-size: 0.8125rem;
|
|
167
|
-
--text-codeInline-size: 0.9285em;
|
|
168
|
-
--text-display-lineBoxHeight: 1.4;
|
|
169
|
-
--text-display-lineHeight: 1.4;
|
|
170
|
-
--text-display-size: 2.5rem;
|
|
171
|
-
--text-subtitle-lineHeight: 1.6;
|
|
172
|
-
--text-subtitle-size: 1.25rem;
|
|
173
|
-
--text-title-lineHeight-large: 1.5;
|
|
174
|
-
--text-title-lineHeight-medium: 1.6;
|
|
175
|
-
--text-title-lineHeight-small: 1.5;
|
|
176
|
-
--text-title-size-large: 2rem;
|
|
177
|
-
--text-title-size-medium: 1.25rem;
|
|
178
|
-
--text-title-size-small: 1rem;
|
|
179
|
-
--text-body-weight: var(--base-text-weight-normal);
|
|
180
|
-
--text-caption-weight: var(--base-text-weight-normal);
|
|
181
|
-
--text-codeBlock-weight: var(--base-text-weight-normal);
|
|
182
|
-
--text-codeInline-weight: var(--base-text-weight-normal);
|
|
183
|
-
--text-display-weight: var(--base-text-weight-medium);
|
|
184
|
-
--text-subtitle-weight: var(--base-text-weight-normal);
|
|
185
|
-
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
186
|
-
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
187
|
-
--text-title-weight-small: var(--base-text-weight-semibold);
|
|
188
|
-
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /** User-generated content, markdown rendering. */
|
|
189
|
-
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /** Default UI font. Most commonly used for body text. */
|
|
190
|
-
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /** Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
|
|
191
|
-
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /** Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
|
|
192
|
-
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /** Default style for rendering code blocks. */
|
|
193
|
-
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /** Inline code blocks using em units to inherit size from its parent. */
|
|
194
|
-
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /** Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
|
|
195
|
-
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /** Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
|
|
196
|
-
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /** Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
|
|
197
|
-
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /** Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
|
|
198
|
-
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /** Uses the same size as body (large) with a heavier weight of semibold (600). */
|
|
199
|
-
}
|
|
1
|
+
@import './base/motion/motion.css';
|
|
2
|
+
@import './base/size/size.css';
|
|
3
|
+
@import './base/typography/typography.css';
|
|
4
|
+
@import './functional/size/border.css';
|
|
5
|
+
@import './functional/size/breakpoints.css';
|
|
6
|
+
@import './functional/size/size-coarse.css';
|
|
7
|
+
@import './functional/size/size-fine.css';
|
|
8
|
+
@import './functional/size/size.css';
|
|
9
|
+
@import './functional/typography/typography.css';
|