@primer/primitives 10.8.0-rc.2155b901 → 10.8.0-rc.4b626bdd
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/base/motion/motion.css +4 -4
- package/dist/css/functional/size/border.css +2 -2
- package/dist/css/functional/typography/typography.css +11 -11
- package/dist/css/primitives.css +17 -17
- package/dist/docs/base/motion/motion.json +48 -32
- package/dist/docs/base/size/size.json +57 -38
- package/dist/docs/base/typography/typography.json +12 -8
- package/dist/docs/functional/size/border.json +42 -28
- package/dist/docs/functional/size/breakpoints.json +18 -12
- package/dist/docs/functional/size/size-coarse.json +9 -6
- package/dist/docs/functional/size/size-fine.json +9 -6
- package/dist/docs/functional/size/size.json +198 -132
- package/dist/docs/functional/size/viewport.json +18 -12
- package/dist/docs/functional/themes/dark-colorblind.json +2472 -1648
- package/dist/docs/functional/themes/dark-dimmed.json +2472 -1648
- package/dist/docs/functional/themes/dark-high-contrast.json +2472 -1648
- package/dist/docs/functional/themes/dark-tritanopia.json +2472 -1648
- package/dist/docs/functional/themes/dark.json +2472 -1648
- package/dist/docs/functional/themes/light-colorblind.json +2472 -1648
- package/dist/docs/functional/themes/light-high-contrast.json +2472 -1648
- package/dist/docs/functional/themes/light-tritanopia.json +2472 -1648
- package/dist/docs/functional/themes/light.json +2472 -1648
- package/dist/docs/functional/typography/typography.json +138 -92
- package/dist/internalCss/dark-colorblind.css +4 -4
- package/dist/internalCss/dark-dimmed.css +4 -4
- package/dist/internalCss/dark-high-contrast.css +4 -4
- package/dist/internalCss/dark-tritanopia.css +4 -4
- package/dist/internalCss/dark.css +4 -4
- package/dist/internalCss/light-colorblind.css +4 -4
- package/dist/internalCss/light-high-contrast.css +4 -4
- package/dist/internalCss/light-tritanopia.css +4 -4
- package/dist/internalCss/light.css +4 -4
- package/dist/styleLint/base/motion/motion.json +64 -48
- package/dist/styleLint/base/size/size.json +76 -57
- package/dist/styleLint/base/typography/typography.json +16 -12
- package/dist/styleLint/functional/size/border.json +59 -45
- package/dist/styleLint/functional/size/breakpoints.json +24 -18
- package/dist/styleLint/functional/size/size-coarse.json +12 -9
- package/dist/styleLint/functional/size/size-fine.json +12 -9
- package/dist/styleLint/functional/size/size.json +264 -198
- package/dist/styleLint/functional/size/viewport.json +28 -22
- package/dist/styleLint/functional/themes/dark-colorblind.json +3296 -2472
- package/dist/styleLint/functional/themes/dark-dimmed.json +3296 -2472
- package/dist/styleLint/functional/themes/dark-high-contrast.json +3296 -2472
- package/dist/styleLint/functional/themes/dark-tritanopia.json +3296 -2472
- package/dist/styleLint/functional/themes/dark.json +3296 -2472
- package/dist/styleLint/functional/themes/light-colorblind.json +3296 -2472
- package/dist/styleLint/functional/themes/light-high-contrast.json +3296 -2472
- package/dist/styleLint/functional/themes/light-tritanopia.json +3296 -2472
- package/dist/styleLint/functional/themes/light.json +3296 -2472
- package/dist/styleLint/functional/typography/typography.json +184 -138
- package/package.json +2 -2
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
--base-duration-700: 700ms;
|
|
12
12
|
--base-duration-800: 800ms;
|
|
13
13
|
--base-duration-900: 900ms;
|
|
14
|
-
--base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9);
|
|
15
|
-
--base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1);
|
|
16
|
-
--base-easing-easeOut: cubic-bezier(0.3, 0.8, 0.6, 1);
|
|
17
|
-
--base-easing-linear: cubic-bezier(0, 0, 1, 1);
|
|
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
18
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--borderRadius-full: 624.9375rem;
|
|
2
|
+
--borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
|
|
3
3
|
--borderRadius-large: 0.75rem;
|
|
4
4
|
--borderRadius-medium: 0.375rem;
|
|
5
5
|
--borderRadius-small: 0.1875rem;
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
--borderWidth-default: var(--borderWidth-thin);
|
|
13
13
|
--boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
|
|
14
14
|
--boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
|
|
15
|
-
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin);
|
|
15
|
+
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
|
|
16
16
|
}
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
35
35
|
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
36
36
|
--text-title-weight-small: var(--base-text-weight-semibold);
|
|
37
|
-
--text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
|
|
38
|
-
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
|
|
39
|
-
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
|
|
40
|
-
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
|
|
41
|
-
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
|
|
42
|
-
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
|
|
43
|
-
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
44
|
-
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
45
|
-
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
|
|
46
|
-
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
|
|
47
|
-
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
|
|
37
|
+
--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. */
|
|
38
|
+
--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. */
|
|
39
|
+
--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. */
|
|
40
|
+
--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. */
|
|
41
|
+
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /** Default style for rendering code blocks. */
|
|
42
|
+
--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. */
|
|
43
|
+
--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. */
|
|
44
|
+
--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). */
|
|
45
|
+
--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. */
|
|
46
|
+
--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. */
|
|
47
|
+
--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). */
|
|
48
48
|
}
|
package/dist/css/primitives.css
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
--base-duration-700: 700ms;
|
|
12
12
|
--base-duration-800: 800ms;
|
|
13
13
|
--base-duration-900: 900ms;
|
|
14
|
-
--base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9);
|
|
15
|
-
--base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1);
|
|
16
|
-
--base-easing-easeOut: cubic-bezier(0.3, 0.8, 0.6, 1);
|
|
17
|
-
--base-easing-linear: cubic-bezier(0, 0, 1, 1);
|
|
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
18
|
}
|
|
19
19
|
:root {
|
|
20
20
|
--base-size-112: 7rem;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--base-text-weight-semibold: 600;
|
|
45
45
|
}
|
|
46
46
|
:root {
|
|
47
|
-
--borderRadius-full: 624.9375rem;
|
|
47
|
+
--borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
|
|
48
48
|
--borderRadius-large: 0.75rem;
|
|
49
49
|
--borderRadius-medium: 0.375rem;
|
|
50
50
|
--borderRadius-small: 0.1875rem;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
--borderWidth-default: var(--borderWidth-thin);
|
|
58
58
|
--boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
|
|
59
59
|
--boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
|
|
60
|
-
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin);
|
|
60
|
+
--boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow for borders */
|
|
61
61
|
}
|
|
62
62
|
:root {
|
|
63
63
|
--breakpoint-large: 63.25rem;
|
|
@@ -185,15 +185,15 @@
|
|
|
185
185
|
--text-title-weight-large: var(--base-text-weight-semibold);
|
|
186
186
|
--text-title-weight-medium: var(--base-text-weight-semibold);
|
|
187
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);
|
|
189
|
-
--text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
|
|
190
|
-
--text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
|
|
191
|
-
--text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
|
|
192
|
-
--text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
|
|
193
|
-
--text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
|
|
194
|
-
--text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
195
|
-
--text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
|
|
196
|
-
--text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
|
|
197
|
-
--text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
|
|
198
|
-
--text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
|
|
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
199
|
}
|
|
@@ -1,232 +1,248 @@
|
|
|
1
1
|
{
|
|
2
2
|
"base-duration-0": {
|
|
3
|
+
"key": "{base.duration.0}",
|
|
3
4
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
4
5
|
"isSource": true,
|
|
5
6
|
"original": {
|
|
6
7
|
"$value": "0ms",
|
|
7
|
-
"$type": "duration"
|
|
8
|
+
"$type": "duration",
|
|
9
|
+
"key": "{base.duration.0}"
|
|
8
10
|
},
|
|
9
11
|
"name": "base-duration-0",
|
|
10
12
|
"attributes": {},
|
|
11
13
|
"path": ["base", "duration", "0"],
|
|
12
|
-
"key": "{base.duration.0}",
|
|
13
14
|
"value": "0ms",
|
|
14
15
|
"type": "duration"
|
|
15
16
|
},
|
|
16
17
|
"base-duration-100": {
|
|
18
|
+
"key": "{base.duration.100}",
|
|
17
19
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
18
20
|
"isSource": true,
|
|
19
21
|
"original": {
|
|
20
22
|
"$value": "100ms",
|
|
21
|
-
"$type": "duration"
|
|
23
|
+
"$type": "duration",
|
|
24
|
+
"key": "{base.duration.100}"
|
|
22
25
|
},
|
|
23
26
|
"name": "base-duration-100",
|
|
24
27
|
"attributes": {},
|
|
25
28
|
"path": ["base", "duration", "100"],
|
|
26
|
-
"key": "{base.duration.100}",
|
|
27
29
|
"value": "100ms",
|
|
28
30
|
"type": "duration"
|
|
29
31
|
},
|
|
30
32
|
"base-duration-1000": {
|
|
33
|
+
"key": "{base.duration.1000}",
|
|
31
34
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
32
35
|
"isSource": true,
|
|
33
36
|
"original": {
|
|
34
37
|
"$value": "1000ms",
|
|
35
|
-
"$type": "duration"
|
|
38
|
+
"$type": "duration",
|
|
39
|
+
"key": "{base.duration.1000}"
|
|
36
40
|
},
|
|
37
41
|
"name": "base-duration-1000",
|
|
38
42
|
"attributes": {},
|
|
39
43
|
"path": ["base", "duration", "1000"],
|
|
40
|
-
"key": "{base.duration.1000}",
|
|
41
44
|
"value": "1000ms",
|
|
42
45
|
"type": "duration"
|
|
43
46
|
},
|
|
44
47
|
"base-duration-200": {
|
|
48
|
+
"key": "{base.duration.200}",
|
|
45
49
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
46
50
|
"isSource": true,
|
|
47
51
|
"original": {
|
|
48
52
|
"$value": "200ms",
|
|
49
|
-
"$type": "duration"
|
|
53
|
+
"$type": "duration",
|
|
54
|
+
"key": "{base.duration.200}"
|
|
50
55
|
},
|
|
51
56
|
"name": "base-duration-200",
|
|
52
57
|
"attributes": {},
|
|
53
58
|
"path": ["base", "duration", "200"],
|
|
54
|
-
"key": "{base.duration.200}",
|
|
55
59
|
"value": "200ms",
|
|
56
60
|
"type": "duration"
|
|
57
61
|
},
|
|
58
62
|
"base-duration-300": {
|
|
63
|
+
"key": "{base.duration.300}",
|
|
59
64
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
60
65
|
"isSource": true,
|
|
61
66
|
"original": {
|
|
62
67
|
"$value": "300ms",
|
|
63
|
-
"$type": "duration"
|
|
68
|
+
"$type": "duration",
|
|
69
|
+
"key": "{base.duration.300}"
|
|
64
70
|
},
|
|
65
71
|
"name": "base-duration-300",
|
|
66
72
|
"attributes": {},
|
|
67
73
|
"path": ["base", "duration", "300"],
|
|
68
|
-
"key": "{base.duration.300}",
|
|
69
74
|
"value": "300ms",
|
|
70
75
|
"type": "duration"
|
|
71
76
|
},
|
|
72
77
|
"base-duration-400": {
|
|
78
|
+
"key": "{base.duration.400}",
|
|
73
79
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
74
80
|
"isSource": true,
|
|
75
81
|
"original": {
|
|
76
82
|
"$value": "400ms",
|
|
77
|
-
"$type": "duration"
|
|
83
|
+
"$type": "duration",
|
|
84
|
+
"key": "{base.duration.400}"
|
|
78
85
|
},
|
|
79
86
|
"name": "base-duration-400",
|
|
80
87
|
"attributes": {},
|
|
81
88
|
"path": ["base", "duration", "400"],
|
|
82
|
-
"key": "{base.duration.400}",
|
|
83
89
|
"value": "400ms",
|
|
84
90
|
"type": "duration"
|
|
85
91
|
},
|
|
86
92
|
"base-duration-50": {
|
|
93
|
+
"key": "{base.duration.50}",
|
|
87
94
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
88
95
|
"isSource": true,
|
|
89
96
|
"original": {
|
|
90
97
|
"$value": "50ms",
|
|
91
|
-
"$type": "duration"
|
|
98
|
+
"$type": "duration",
|
|
99
|
+
"key": "{base.duration.50}"
|
|
92
100
|
},
|
|
93
101
|
"name": "base-duration-50",
|
|
94
102
|
"attributes": {},
|
|
95
103
|
"path": ["base", "duration", "50"],
|
|
96
|
-
"key": "{base.duration.50}",
|
|
97
104
|
"value": "50ms",
|
|
98
105
|
"type": "duration"
|
|
99
106
|
},
|
|
100
107
|
"base-duration-500": {
|
|
108
|
+
"key": "{base.duration.500}",
|
|
101
109
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
102
110
|
"isSource": true,
|
|
103
111
|
"original": {
|
|
104
112
|
"$value": "500ms",
|
|
105
|
-
"$type": "duration"
|
|
113
|
+
"$type": "duration",
|
|
114
|
+
"key": "{base.duration.500}"
|
|
106
115
|
},
|
|
107
116
|
"name": "base-duration-500",
|
|
108
117
|
"attributes": {},
|
|
109
118
|
"path": ["base", "duration", "500"],
|
|
110
|
-
"key": "{base.duration.500}",
|
|
111
119
|
"value": "500ms",
|
|
112
120
|
"type": "duration"
|
|
113
121
|
},
|
|
114
122
|
"base-duration-600": {
|
|
123
|
+
"key": "{base.duration.600}",
|
|
115
124
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
116
125
|
"isSource": true,
|
|
117
126
|
"original": {
|
|
118
127
|
"$value": "600ms",
|
|
119
|
-
"$type": "duration"
|
|
128
|
+
"$type": "duration",
|
|
129
|
+
"key": "{base.duration.600}"
|
|
120
130
|
},
|
|
121
131
|
"name": "base-duration-600",
|
|
122
132
|
"attributes": {},
|
|
123
133
|
"path": ["base", "duration", "600"],
|
|
124
|
-
"key": "{base.duration.600}",
|
|
125
134
|
"value": "600ms",
|
|
126
135
|
"type": "duration"
|
|
127
136
|
},
|
|
128
137
|
"base-duration-700": {
|
|
138
|
+
"key": "{base.duration.700}",
|
|
129
139
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
130
140
|
"isSource": true,
|
|
131
141
|
"original": {
|
|
132
142
|
"$value": "700ms",
|
|
133
|
-
"$type": "duration"
|
|
143
|
+
"$type": "duration",
|
|
144
|
+
"key": "{base.duration.700}"
|
|
134
145
|
},
|
|
135
146
|
"name": "base-duration-700",
|
|
136
147
|
"attributes": {},
|
|
137
148
|
"path": ["base", "duration", "700"],
|
|
138
|
-
"key": "{base.duration.700}",
|
|
139
149
|
"value": "700ms",
|
|
140
150
|
"type": "duration"
|
|
141
151
|
},
|
|
142
152
|
"base-duration-800": {
|
|
153
|
+
"key": "{base.duration.800}",
|
|
143
154
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
144
155
|
"isSource": true,
|
|
145
156
|
"original": {
|
|
146
157
|
"$value": "800ms",
|
|
147
|
-
"$type": "duration"
|
|
158
|
+
"$type": "duration",
|
|
159
|
+
"key": "{base.duration.800}"
|
|
148
160
|
},
|
|
149
161
|
"name": "base-duration-800",
|
|
150
162
|
"attributes": {},
|
|
151
163
|
"path": ["base", "duration", "800"],
|
|
152
|
-
"key": "{base.duration.800}",
|
|
153
164
|
"value": "800ms",
|
|
154
165
|
"type": "duration"
|
|
155
166
|
},
|
|
156
167
|
"base-duration-900": {
|
|
168
|
+
"key": "{base.duration.900}",
|
|
157
169
|
"filePath": "src/tokens/base/motion/timing.json5",
|
|
158
170
|
"isSource": true,
|
|
159
171
|
"original": {
|
|
160
172
|
"$value": "900ms",
|
|
161
|
-
"$type": "duration"
|
|
173
|
+
"$type": "duration",
|
|
174
|
+
"key": "{base.duration.900}"
|
|
162
175
|
},
|
|
163
176
|
"name": "base-duration-900",
|
|
164
177
|
"attributes": {},
|
|
165
178
|
"path": ["base", "duration", "900"],
|
|
166
|
-
"key": "{base.duration.900}",
|
|
167
179
|
"value": "900ms",
|
|
168
180
|
"type": "duration"
|
|
169
181
|
},
|
|
170
182
|
"base-easing-easeIn": {
|
|
183
|
+
"key": "{base.easing.easeIn}",
|
|
171
184
|
"filePath": "src/tokens/base/motion/easing.json5",
|
|
172
185
|
"isSource": true,
|
|
173
186
|
"original": {
|
|
174
187
|
"$value": [0.7, 0.1, 0.75, 0.9],
|
|
175
188
|
"$type": "cubicBezier",
|
|
176
|
-
"$description": "Ideal for movement that starts on the page and ends off the page."
|
|
189
|
+
"$description": "Ideal for movement that starts on the page and ends off the page.",
|
|
190
|
+
"key": "{base.easing.easeIn}"
|
|
177
191
|
},
|
|
178
192
|
"name": "base-easing-easeIn",
|
|
179
193
|
"attributes": {},
|
|
180
194
|
"path": ["base", "easing", "easeIn"],
|
|
181
|
-
"key": "{base.easing.easeIn}",
|
|
182
195
|
"value": [0.7, 0.1, 0.75, 0.9],
|
|
183
196
|
"type": "cubicBezier",
|
|
184
197
|
"description": "Ideal for movement that starts on the page and ends off the page."
|
|
185
198
|
},
|
|
186
199
|
"base-easing-easeInOut": {
|
|
200
|
+
"key": "{base.easing.easeInOut}",
|
|
187
201
|
"filePath": "src/tokens/base/motion/easing.json5",
|
|
188
202
|
"isSource": true,
|
|
189
203
|
"original": {
|
|
190
204
|
"$value": [0.6, 0, 0.2, 1],
|
|
191
205
|
"$type": "cubicBezier",
|
|
192
|
-
"$description": "Ideal for movement that starts and ends on the page."
|
|
206
|
+
"$description": "Ideal for movement that starts and ends on the page.",
|
|
207
|
+
"key": "{base.easing.easeInOut}"
|
|
193
208
|
},
|
|
194
209
|
"name": "base-easing-easeInOut",
|
|
195
210
|
"attributes": {},
|
|
196
211
|
"path": ["base", "easing", "easeInOut"],
|
|
197
|
-
"key": "{base.easing.easeInOut}",
|
|
198
212
|
"value": [0.6, 0, 0.2, 1],
|
|
199
213
|
"type": "cubicBezier",
|
|
200
214
|
"description": "Ideal for movement that starts and ends on the page."
|
|
201
215
|
},
|
|
202
216
|
"base-easing-easeOut": {
|
|
217
|
+
"key": "{base.easing.easeOut}",
|
|
203
218
|
"filePath": "src/tokens/base/motion/easing.json5",
|
|
204
219
|
"isSource": true,
|
|
205
220
|
"original": {
|
|
206
221
|
"$value": [0.3, 0.8, 0.6, 1],
|
|
207
222
|
"$type": "cubicBezier",
|
|
208
|
-
"$description": "Ideal for movement that starts off the page and ends on the page."
|
|
223
|
+
"$description": "Ideal for movement that starts off the page and ends on the page.",
|
|
224
|
+
"key": "{base.easing.easeOut}"
|
|
209
225
|
},
|
|
210
226
|
"name": "base-easing-easeOut",
|
|
211
227
|
"attributes": {},
|
|
212
228
|
"path": ["base", "easing", "easeOut"],
|
|
213
|
-
"key": "{base.easing.easeOut}",
|
|
214
229
|
"value": [0.3, 0.8, 0.6, 1],
|
|
215
230
|
"type": "cubicBezier",
|
|
216
231
|
"description": "Ideal for movement that starts off the page and ends on the page."
|
|
217
232
|
},
|
|
218
233
|
"base-easing-linear": {
|
|
234
|
+
"key": "{base.easing.linear}",
|
|
219
235
|
"filePath": "src/tokens/base/motion/easing.json5",
|
|
220
236
|
"isSource": true,
|
|
221
237
|
"original": {
|
|
222
238
|
"$value": [0, 0, 1, 1],
|
|
223
239
|
"$type": "cubicBezier",
|
|
224
|
-
"$description": "Ideal for non-movement properties, like opacity or background color."
|
|
240
|
+
"$description": "Ideal for non-movement properties, like opacity or background color.",
|
|
241
|
+
"key": "{base.easing.linear}"
|
|
225
242
|
},
|
|
226
243
|
"name": "base-easing-linear",
|
|
227
244
|
"attributes": {},
|
|
228
245
|
"path": ["base", "easing", "linear"],
|
|
229
|
-
"key": "{base.easing.linear}",
|
|
230
246
|
"value": [0, 0, 1, 1],
|
|
231
247
|
"type": "cubicBezier",
|
|
232
248
|
"description": "Ideal for non-movement properties, like opacity or background color."
|