@primer/primitives 9.1.0-rc.73606a1a → 9.1.0-rc.93e94f6d
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.
|
@@ -16,10 +16,10 @@ const wrapWithSelector = (css, selector) => {
|
|
|
16
16
|
};
|
|
17
17
|
const cssAdvanced = ({ dictionary: originalDictionary, options = {
|
|
18
18
|
queries: [],
|
|
19
|
-
}, file,
|
|
19
|
+
}, file, }) => {
|
|
20
20
|
var _a, _b, _c, _d;
|
|
21
21
|
// get options
|
|
22
|
-
const { outputReferences,
|
|
22
|
+
const { outputReferences, formatting } = options;
|
|
23
23
|
// selector
|
|
24
24
|
const selector = ((_a = file.options) === null || _a === void 0 ? void 0 : _a.selector) !== undefined ? file.options.selector : ':root';
|
|
25
25
|
// query extension property
|
|
@@ -32,15 +32,9 @@ const cssAdvanced = ({ dictionary: originalDictionary, options = {
|
|
|
32
32
|
},
|
|
33
33
|
];
|
|
34
34
|
// set formatting
|
|
35
|
-
const
|
|
36
|
-
commentStyle: descriptions ? 'long' : 'none',
|
|
37
|
-
};
|
|
35
|
+
const mergedFormatting = Object.assign({ commentStyle: 'long' }, formatting);
|
|
38
36
|
// clone dictionary
|
|
39
37
|
const dictionary = Object.assign({}, originalDictionary);
|
|
40
|
-
// add prefix to tokens
|
|
41
|
-
if (platform.prefix) {
|
|
42
|
-
dictionary.allTokens = dictionary.allTokens.map(token => (Object.assign(Object.assign({}, token), { name: `${platform.prefix}-${token.name}`, path: [platform.prefix, ...token.path] })));
|
|
43
|
-
}
|
|
44
38
|
// get queries from tokens
|
|
45
39
|
for (const designToken of dictionary.allTokens) {
|
|
46
40
|
const query = (_d = designToken.$extensions) === null || _d === void 0 ? void 0 : _d[queryExtProp];
|
|
@@ -73,7 +67,12 @@ const cssAdvanced = ({ dictionary: originalDictionary, options = {
|
|
|
73
67
|
if (!filteredDictionary.allTokens.length)
|
|
74
68
|
continue;
|
|
75
69
|
// add tokens into root
|
|
76
|
-
const css = formattedVariables({
|
|
70
|
+
const css = formattedVariables({
|
|
71
|
+
format: 'css',
|
|
72
|
+
dictionary: filteredDictionary,
|
|
73
|
+
outputReferences,
|
|
74
|
+
formatting: mergedFormatting,
|
|
75
|
+
});
|
|
77
76
|
// wrap css
|
|
78
77
|
const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector);
|
|
79
78
|
// add css with or without query
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--motion-skeletonLoader-shimmer-duration-scale: 1s;
|
|
3
|
-
--motion-spinner-duration-rotation: 1s;
|
|
4
|
-
--motion-loading-delay-default: 1s;
|
|
2
|
+
--motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
|
|
3
|
+
--motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
|
|
4
|
+
--motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
|
|
5
5
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
|
|
2
|
+
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
|
|
3
3
|
--boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
|
|
4
4
|
--boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
|
|
5
5
|
--borderWidth-thin: max(1px, 0.0625rem);
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--borderRadius-small: 0.1875rem;
|
|
9
9
|
--borderRadius-medium: 0.375rem;
|
|
10
10
|
--borderRadius-large: 0.75rem;
|
|
11
|
-
--borderRadius-full: 624.9375rem;
|
|
11
|
+
--borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
|
|
12
12
|
--borderRadius-default: 0.375rem;
|
|
13
13
|
--outline-focus-offset: -0.125rem;
|
|
14
14
|
--outline-focus-width: 0.125rem;
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
35
35
|
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
36
36
|
--text-display-weight: var(--base-text-weight-medium);
|
|
37
|
-
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
|
|
38
|
-
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
|
|
39
|
-
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
|
|
40
|
-
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
|
|
41
|
-
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
|
|
42
|
-
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
|
|
43
|
-
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
44
|
-
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
|
|
45
|
-
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
|
|
46
|
-
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
|
|
47
|
-
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
37
|
+
--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. */
|
|
38
|
+
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
|
|
39
|
+
--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. */
|
|
40
|
+
--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. */
|
|
41
|
+
--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. */
|
|
42
|
+
--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. */
|
|
43
|
+
--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). */
|
|
44
|
+
--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). */
|
|
45
|
+
--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. */
|
|
46
|
+
--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. */
|
|
47
|
+
--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. */
|
|
48
48
|
}
|
package/dist/css/primitives.css
CHANGED
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
--base-text-weight-semibold: 600;
|
|
27
27
|
}
|
|
28
28
|
:root {
|
|
29
|
-
--motion-skeletonLoader-shimmer-duration-scale: 1s;
|
|
30
|
-
--motion-spinner-duration-rotation: 1s;
|
|
31
|
-
--motion-loading-delay-default: 1s;
|
|
29
|
+
--motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
|
|
30
|
+
--motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
|
|
31
|
+
--motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
|
|
32
32
|
}
|
|
33
33
|
:root {
|
|
34
|
-
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
|
|
34
|
+
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
|
|
35
35
|
--boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
|
|
36
36
|
--boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
|
|
37
37
|
--borderWidth-thin: max(1px, 0.0625rem);
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
--borderRadius-small: 0.1875rem;
|
|
41
41
|
--borderRadius-medium: 0.375rem;
|
|
42
42
|
--borderRadius-large: 0.75rem;
|
|
43
|
-
--borderRadius-full: 624.9375rem;
|
|
43
|
+
--borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
|
|
44
44
|
--borderRadius-default: 0.375rem;
|
|
45
45
|
--outline-focus-offset: -0.125rem;
|
|
46
46
|
--outline-focus-width: 0.125rem;
|
|
@@ -171,15 +171,15 @@
|
|
|
171
171
|
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
172
172
|
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
173
173
|
--text-display-weight: var(--base-text-weight-medium);
|
|
174
|
-
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
|
|
175
|
-
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
|
|
176
|
-
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
|
|
177
|
-
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
|
|
178
|
-
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
|
|
179
|
-
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
|
|
180
|
-
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
181
|
-
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
|
|
182
|
-
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
|
|
183
|
-
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
|
|
184
|
-
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
174
|
+
--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. */
|
|
175
|
+
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
|
|
176
|
+
--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. */
|
|
177
|
+
--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. */
|
|
178
|
+
--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. */
|
|
179
|
+
--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. */
|
|
180
|
+
--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). */
|
|
181
|
+
--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). */
|
|
182
|
+
--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. */
|
|
183
|
+
--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. */
|
|
184
|
+
--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. */
|
|
185
185
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/primitives",
|
|
3
|
-
"version": "9.1.0-rc.
|
|
3
|
+
"version": "9.1.0-rc.93e94f6d",
|
|
4
4
|
"description": "Typography, spacing, and color primitives for Primer design system",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
"prepack": "npm run build",
|
|
41
41
|
"release": "changeset publish",
|
|
42
42
|
"start:storybook": "npm run build && cd docs/storybook && npm run storybook",
|
|
43
|
-
"test": "vitest run --coverage"
|
|
43
|
+
"test": "vitest run --coverage",
|
|
44
|
+
"test:integration": "vitest run -r integration"
|
|
44
45
|
},
|
|
45
46
|
"prettier": "@github/prettier-config",
|
|
46
47
|
"devDependencies": {
|