@patternfly/design-tokens 1.10.0 → 1.11.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.
Files changed (14) hide show
  1. package/build/css/tokens-charts-dark.scss +153 -153
  2. package/build/css/tokens-charts.scss +153 -153
  3. package/build/css/tokens-dark.scss +300 -300
  4. package/build/css/tokens-default.scss +565 -546
  5. package/build/css/tokens-palette.scss +65 -65
  6. package/build.js +4 -4
  7. package/package.json +1 -1
  8. package/tokens/dark/base.dark.json +2 -2
  9. package/tokens/dark/semantic.dark.json +325 -64
  10. package/tokens/default/base.dimension.json +16 -54
  11. package/tokens/default/base.json +3 -3
  12. package/tokens/default/semantic.dimension.json +191 -83
  13. package/tokens/default/semantic.json +325 -64
  14. package/tokens/default/semantic.motion.json +26 -0
package/tokens/default/semantic.motion.json CHANGED
@@ -4,85 +4,104 @@
4
4
  "motion": {
5
5
  "duration": {
6
6
  "xs": {
7
+ "description": "Use for the quickest possible duration of an animation.",
7
8
  "type": "number",
8
9
  "value": "{global.duration.50}"
9
10
  },
10
11
  "sm": {
12
+ "description": "Use for a short animation duration. Use for simple and/or small animations.",
11
13
  "type": "number",
12
14
  "value": "{global.duration.100}"
13
15
  },
14
16
  "md": {
17
+ "description": "Use for a medium animation duration.",
15
18
  "type": "number",
16
19
  "value": "{global.duration.200}"
17
20
  },
18
21
  "lg": {
22
+ "description": "Use for long animation duration. Use for larger, more expressive animations.",
19
23
  "type": "number",
20
24
  "value": "{global.duration.300}"
21
25
  },
22
26
  "xl": {
27
+ "description": "Use for extra long animation duration.",
23
28
  "type": "number",
24
29
  "value": "{global.duration.400}"
25
30
  },
26
31
  "2xl": {
32
+ "description": "Use for significantly long animation duration.",
27
33
  "type": "number",
28
34
  "value": "{global.duration.500}"
29
35
  },
30
36
  "3xl": {
37
+ "description": "Use for the longest possible duration of an animation.",
31
38
  "type": "number",
32
39
  "value": "{global.duration.600}"
33
40
  },
34
41
  "fade": {
35
42
  "short": {
43
+ "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
36
44
  "type": "number",
37
45
  "value": "{global.motion.duration.sm}"
38
46
  },
39
47
  "default": {
48
+ "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
40
49
  "type": "number",
41
50
  "value": "{global.motion.duration.md}"
42
51
  },
43
52
  "long": {
53
+ "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
44
54
  "type": "number",
45
55
  "value": "{global.motion.duration.lg}"
46
56
  }
47
57
  },
48
58
  "slide-out": {
49
59
  "short": {
60
+ "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
50
61
  "type": "number",
51
62
  "value": "{global.motion.duration.lg}"
52
63
  },
53
64
  "default": {
65
+ "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
54
66
  "type": "number",
55
67
  "value": "{global.motion.duration.xl}"
56
68
  },
57
69
  "long": {
70
+ "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
58
71
  "type": "number",
59
72
  "value": "{global.motion.duration.2xl}"
60
73
  }
61
74
  },
62
75
  "slide-in": {
63
76
  "short": {
77
+ "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
64
78
  "type": "number",
65
79
  "value": "{global.motion.duration.lg}"
66
80
  },
67
81
  "default": {
82
+ "description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
68
83
  "type": "number",
69
84
  "value": "{global.motion.duration.xl}"
70
85
  },
71
86
  "long": {
87
+ "description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
72
88
  "type": "number",
73
89
  "value": "{global.motion.duration.2xl}"
74
90
  }
75
91
  },
76
92
  "icon": {
77
93
  "short": {
94
+ "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).",
78
95
  "type": "number",
79
96
  "value": "{global.motion.duration.xs}"
80
97
  },
81
98
  "default": {
99
+ "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).",
82
100
  "type": "number",
83
101
  "value": "{global.motion.duration.sm}"
84
102
  },
85
103
  "long": {
104
+ "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).",
86
105
  "type": "number",
87
106
  "value": "{global.motion.duration.md}"
88
107
  }
@@ -90,32 +109,39 @@
90
109
  },
91
110
  "delay": {
92
111
  "none": {
112
+ "description": "Use when there should be no delay before an animation plays.",
93
113
  "type": "number",
94
114
  "value": "{global.delay.100}"
95
115
  },
96
116
  "short": {
117
+ "description": "Use when there should be a short delay before an animation plays.",
97
118
  "type": "number",
98
119
  "value": "{global.delay.200}"
99
120
  },
100
121
  "default": {
122
+ "description": "Use when there should be the default delay length before an animation plays.",
101
123
  "type": "number",
102
124
  "value": "{global.delay.300}"
103
125
  },
104
126
  "long": {
127
+ "description": "Use when there should be a long delay before an animation plays.",
105
128
  "type": "number",
106
129
  "value": "{global.delay.400}"
107
130
  }
108
131
  },
109
132
  "timing-function": {
110
133
  "accelerate": {
134
+ "description": "Use accelerate to specify that the animation starts slowly and accelerates gradually until the end. Timing function controls the pace of an animation transition. Acceleration is our equivalent to an ease-in.",
111
135
  "type": "number",
112
136
  "value": "{global.timing-function.100}"
113
137
  },
114
138
  "default": {
139
+ "description": "Use default to specify that the animation starts slow, speeds up and slows down at the end. Timing function controls the pace of an animation transition. Default is our equivalent to an ease-in-out.",
115
140
  "type": "number",
116
141
  "value": "{global.timing-function.200}"
117
142
  },
118
143
  "decelerate": {
144
+ "description": "Use decelerate to specify that the animation starts quickly and decelerates gradually until the end. Timing function controls the pace of an animation transition. Deceleration is our equivalent to an ease-out.",
119
145
  "type": "number",
120
146
  "value": "{global.timing-function.300}"
121
147
  }