@pantheon-systems/pds-design-tokens 1.0.0-dev.75 → 1.0.0-dev.77

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.
@@ -69,6 +69,9 @@
69
69
  --pds-color-button-critical-foreground-active: #ffffff;
70
70
  --pds-color-button-critical-foreground-default: #ffffff;
71
71
  --pds-color-button-critical-foreground-hover: #ffffff;
72
+ --pds-color-button-navbar-foreground-active: #8a70ff;
73
+ --pds-color-button-navbar-foreground-default: #ffffff;
74
+ --pds-color-button-navbar-foreground-hover: #8a70ff;
72
75
  --pds-color-button-primary-background-active: #4e39a8;
73
76
  --pds-color-button-primary-background-default: #8a70ff;
74
77
  --pds-color-button-primary-background-hover: #ad9bff;
@@ -69,6 +69,9 @@
69
69
  --pds-color-button-critical-foreground-active: #ffffff;
70
70
  --pds-color-button-critical-foreground-default: #ffffff;
71
71
  --pds-color-button-critical-foreground-hover: #ffffff;
72
+ --pds-color-button-navbar-foreground-active: #5f41e5;
73
+ --pds-color-button-navbar-foreground-default: #23232d;
74
+ --pds-color-button-navbar-foreground-hover: #5f41e5;
72
75
  --pds-color-button-primary-background-active: #11005d;
73
76
  --pds-color-button-primary-background-default: #3017a1;
74
77
  --pds-color-button-primary-background-hover: #5f41e5;
@@ -10,15 +10,17 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-animation-button-transition: background-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), border-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
13
+ --pds-animation-button-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
14
14
  --pds-animation-focus-transition: outline var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
15
15
  --pds-animation-input-transition: background-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), border-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
16
- --pds-animation-link-transition: background-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
16
+ --pds-animation-link-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
17
+ --pds-animation-reveal-transition: all var(--pds-animation-transition-reveal-duration) var(--pds-animation-transition-default-timing-function);
17
18
  --pds-animation-rotation-transition: transform var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
18
19
  --pds-animation-transition-default-delay: 0s;
19
20
  --pds-animation-transition-default-duration: 200ms;
20
21
  --pds-animation-transition-default-timing-function: ease-in-out;
21
22
  --pds-animation-transition-dropdown-duration: 300ms;
23
+ --pds-animation-transition-reveal-duration: 300ms;
22
24
  --pds-border-radius-container: 0.375rem;
23
25
  --pds-border-radius-default: 0.1875rem;
24
26
  --pds-border-width-default: 1px;
@@ -51,14 +51,39 @@
51
51
  ]
52
52
  }
53
53
  },
54
+ "reveal": {
55
+ "transition": {
56
+ "value": "all 300ms ease-in-out",
57
+ "public": true,
58
+ "filePath": "tokens/animation/alias.json",
59
+ "isSource": true,
60
+ "original": {
61
+ "value": "all {animation.transition.reveal.duration.value} {animation.transition.default.timing-function.value}",
62
+ "public": true,
63
+ "filePath": "build/json/pds-design-tokens.json",
64
+ "isSource": false
65
+ },
66
+ "name": "animation-reveal-transition",
67
+ "attributes": {
68
+ "category": "animation",
69
+ "type": "reveal",
70
+ "item": "transition"
71
+ },
72
+ "path": [
73
+ "animation",
74
+ "reveal",
75
+ "transition"
76
+ ]
77
+ }
78
+ },
54
79
  "button": {
55
80
  "transition": {
56
- "value": "background-color 200ms ease-in-out 0s, border-color 200ms ease-in-out 0s, color 200ms ease-in-out 0s",
81
+ "value": "all 200ms ease-in-out 0s",
57
82
  "public": true,
58
83
  "filePath": "tokens/animation/alias.json",
59
84
  "isSource": true,
60
85
  "original": {
61
- "value": "background-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, border-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
86
+ "value": "all {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
62
87
  "public": true,
63
88
  "filePath": "build/json/pds-design-tokens.json",
64
89
  "isSource": false
@@ -103,12 +128,12 @@
103
128
  },
104
129
  "link": {
105
130
  "transition": {
106
- "value": "background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0s",
131
+ "value": "all 200ms ease-in-out 0s",
107
132
  "public": true,
108
133
  "filePath": "tokens/animation/alias.json",
109
134
  "isSource": true,
110
135
  "original": {
111
- "value": "background-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
136
+ "value": "all {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
112
137
  "public": true,
113
138
  "filePath": "build/json/pds-design-tokens.json",
114
139
  "isSource": false
@@ -230,6 +255,33 @@
230
255
  "duration"
231
256
  ]
232
257
  }
258
+ },
259
+ "reveal": {
260
+ "duration": {
261
+ "value": "300ms",
262
+ "public": true,
263
+ "filePath": "tokens/animation/base.json",
264
+ "isSource": true,
265
+ "original": {
266
+ "value": "300ms",
267
+ "public": true,
268
+ "filePath": "build/json/pds-design-tokens.json",
269
+ "isSource": false
270
+ },
271
+ "name": "animation-transition-reveal-duration",
272
+ "attributes": {
273
+ "category": "animation",
274
+ "type": "transition",
275
+ "item": "reveal",
276
+ "subitem": "duration"
277
+ },
278
+ "path": [
279
+ "animation",
280
+ "transition",
281
+ "reveal",
282
+ "duration"
283
+ ]
284
+ }
233
285
  }
234
286
  }
235
287
  },
@@ -4054,6 +4106,94 @@
4054
4106
  ]
4055
4107
  }
4056
4108
  }
4109
+ },
4110
+ "navbar": {
4111
+ "foreground": {
4112
+ "default": {
4113
+ "value": "#ffffff",
4114
+ "public": true,
4115
+ "isReferenceToInternal": true,
4116
+ "filePath": "tokens/color/alias/button.dark.json",
4117
+ "isSource": true,
4118
+ "original": {
4119
+ "value": "{color.dark-mode.foreground.default.value}",
4120
+ "public": true,
4121
+ "isReferenceToInternal": true
4122
+ },
4123
+ "name": "color-dark-mode-button-navbar-foreground-default",
4124
+ "attributes": {
4125
+ "category": "color",
4126
+ "type": "dark-mode",
4127
+ "item": "button",
4128
+ "subitem": "navbar",
4129
+ "state": "foreground"
4130
+ },
4131
+ "path": [
4132
+ "color",
4133
+ "dark-mode",
4134
+ "button",
4135
+ "navbar",
4136
+ "foreground",
4137
+ "default"
4138
+ ]
4139
+ },
4140
+ "hover": {
4141
+ "value": "#8a70ff",
4142
+ "public": true,
4143
+ "isReferenceToInternal": true,
4144
+ "filePath": "tokens/color/alias/button.dark.json",
4145
+ "isSource": true,
4146
+ "original": {
4147
+ "value": "{color.dark-mode.link.hover.value}",
4148
+ "public": true,
4149
+ "isReferenceToInternal": true
4150
+ },
4151
+ "name": "color-dark-mode-button-navbar-foreground-hover",
4152
+ "attributes": {
4153
+ "category": "color",
4154
+ "type": "dark-mode",
4155
+ "item": "button",
4156
+ "subitem": "navbar",
4157
+ "state": "foreground"
4158
+ },
4159
+ "path": [
4160
+ "color",
4161
+ "dark-mode",
4162
+ "button",
4163
+ "navbar",
4164
+ "foreground",
4165
+ "hover"
4166
+ ]
4167
+ },
4168
+ "active": {
4169
+ "value": "#8a70ff",
4170
+ "public": true,
4171
+ "isReferenceToInternal": true,
4172
+ "filePath": "tokens/color/alias/button.dark.json",
4173
+ "isSource": true,
4174
+ "original": {
4175
+ "value": "{color.dark-mode.link.active.value}",
4176
+ "public": true,
4177
+ "isReferenceToInternal": true
4178
+ },
4179
+ "name": "color-dark-mode-button-navbar-foreground-active",
4180
+ "attributes": {
4181
+ "category": "color",
4182
+ "type": "dark-mode",
4183
+ "item": "button",
4184
+ "subitem": "navbar",
4185
+ "state": "foreground"
4186
+ },
4187
+ "path": [
4188
+ "color",
4189
+ "dark-mode",
4190
+ "button",
4191
+ "navbar",
4192
+ "foreground",
4193
+ "active"
4194
+ ]
4195
+ }
4196
+ }
4057
4197
  }
4058
4198
  },
4059
4199
  "toggle-button": {
@@ -9689,6 +9829,94 @@
9689
9829
  ]
9690
9830
  }
9691
9831
  }
9832
+ },
9833
+ "navbar": {
9834
+ "foreground": {
9835
+ "default": {
9836
+ "value": "#23232d",
9837
+ "public": true,
9838
+ "isReferenceToInternal": true,
9839
+ "filePath": "tokens/color/alias/button.light.json",
9840
+ "isSource": true,
9841
+ "original": {
9842
+ "value": "{color.light-mode.foreground.default.value}",
9843
+ "public": true,
9844
+ "isReferenceToInternal": true
9845
+ },
9846
+ "name": "color-light-mode-button-navbar-foreground-default",
9847
+ "attributes": {
9848
+ "category": "color",
9849
+ "type": "light-mode",
9850
+ "item": "button",
9851
+ "subitem": "navbar",
9852
+ "state": "foreground"
9853
+ },
9854
+ "path": [
9855
+ "color",
9856
+ "light-mode",
9857
+ "button",
9858
+ "navbar",
9859
+ "foreground",
9860
+ "default"
9861
+ ]
9862
+ },
9863
+ "hover": {
9864
+ "value": "#5f41e5",
9865
+ "public": true,
9866
+ "isReferenceToInternal": true,
9867
+ "filePath": "tokens/color/alias/button.light.json",
9868
+ "isSource": true,
9869
+ "original": {
9870
+ "value": "{color.light-mode.link.hover.value}",
9871
+ "public": true,
9872
+ "isReferenceToInternal": true
9873
+ },
9874
+ "name": "color-light-mode-button-navbar-foreground-hover",
9875
+ "attributes": {
9876
+ "category": "color",
9877
+ "type": "light-mode",
9878
+ "item": "button",
9879
+ "subitem": "navbar",
9880
+ "state": "foreground"
9881
+ },
9882
+ "path": [
9883
+ "color",
9884
+ "light-mode",
9885
+ "button",
9886
+ "navbar",
9887
+ "foreground",
9888
+ "hover"
9889
+ ]
9890
+ },
9891
+ "active": {
9892
+ "value": "#5f41e5",
9893
+ "public": true,
9894
+ "isReferenceToInternal": true,
9895
+ "filePath": "tokens/color/alias/button.light.json",
9896
+ "isSource": true,
9897
+ "original": {
9898
+ "value": "{color.light-mode.link.active.value}",
9899
+ "public": true,
9900
+ "isReferenceToInternal": true
9901
+ },
9902
+ "name": "color-light-mode-button-navbar-foreground-active",
9903
+ "attributes": {
9904
+ "category": "color",
9905
+ "type": "light-mode",
9906
+ "item": "button",
9907
+ "subitem": "navbar",
9908
+ "state": "foreground"
9909
+ },
9910
+ "path": [
9911
+ "color",
9912
+ "light-mode",
9913
+ "button",
9914
+ "navbar",
9915
+ "foreground",
9916
+ "active"
9917
+ ]
9918
+ }
9919
+ }
9692
9920
  }
9693
9921
  },
9694
9922
  "toggle-button": {
@@ -2174,6 +2174,94 @@
2174
2174
  ]
2175
2175
  }
2176
2176
  }
2177
+ },
2178
+ "navbar": {
2179
+ "foreground": {
2180
+ "default": {
2181
+ "value": "#ffffff",
2182
+ "public": true,
2183
+ "isReferenceToInternal": true,
2184
+ "filePath": "tokens/color/alias/button.dark.json",
2185
+ "isSource": true,
2186
+ "original": {
2187
+ "value": "{color.dark-mode.foreground.default.value}",
2188
+ "public": true,
2189
+ "isReferenceToInternal": true
2190
+ },
2191
+ "name": "color-dark-mode-button-navbar-foreground-default",
2192
+ "attributes": {
2193
+ "category": "color",
2194
+ "type": "dark-mode",
2195
+ "item": "button",
2196
+ "subitem": "navbar",
2197
+ "state": "foreground"
2198
+ },
2199
+ "path": [
2200
+ "color",
2201
+ "dark-mode",
2202
+ "button",
2203
+ "navbar",
2204
+ "foreground",
2205
+ "default"
2206
+ ]
2207
+ },
2208
+ "hover": {
2209
+ "value": "#8a70ff",
2210
+ "public": true,
2211
+ "isReferenceToInternal": true,
2212
+ "filePath": "tokens/color/alias/button.dark.json",
2213
+ "isSource": true,
2214
+ "original": {
2215
+ "value": "{color.dark-mode.link.hover.value}",
2216
+ "public": true,
2217
+ "isReferenceToInternal": true
2218
+ },
2219
+ "name": "color-dark-mode-button-navbar-foreground-hover",
2220
+ "attributes": {
2221
+ "category": "color",
2222
+ "type": "dark-mode",
2223
+ "item": "button",
2224
+ "subitem": "navbar",
2225
+ "state": "foreground"
2226
+ },
2227
+ "path": [
2228
+ "color",
2229
+ "dark-mode",
2230
+ "button",
2231
+ "navbar",
2232
+ "foreground",
2233
+ "hover"
2234
+ ]
2235
+ },
2236
+ "active": {
2237
+ "value": "#8a70ff",
2238
+ "public": true,
2239
+ "isReferenceToInternal": true,
2240
+ "filePath": "tokens/color/alias/button.dark.json",
2241
+ "isSource": true,
2242
+ "original": {
2243
+ "value": "{color.dark-mode.link.active.value}",
2244
+ "public": true,
2245
+ "isReferenceToInternal": true
2246
+ },
2247
+ "name": "color-dark-mode-button-navbar-foreground-active",
2248
+ "attributes": {
2249
+ "category": "color",
2250
+ "type": "dark-mode",
2251
+ "item": "button",
2252
+ "subitem": "navbar",
2253
+ "state": "foreground"
2254
+ },
2255
+ "path": [
2256
+ "color",
2257
+ "dark-mode",
2258
+ "button",
2259
+ "navbar",
2260
+ "foreground",
2261
+ "active"
2262
+ ]
2263
+ }
2264
+ }
2177
2265
  }
2178
2266
  },
2179
2267
  "toggle-button": {
@@ -2168,6 +2168,94 @@
2168
2168
  ]
2169
2169
  }
2170
2170
  }
2171
+ },
2172
+ "navbar": {
2173
+ "foreground": {
2174
+ "default": {
2175
+ "value": "#23232d",
2176
+ "public": true,
2177
+ "isReferenceToInternal": true,
2178
+ "filePath": "tokens/color/alias/button.light.json",
2179
+ "isSource": true,
2180
+ "original": {
2181
+ "value": "{color.light-mode.foreground.default.value}",
2182
+ "public": true,
2183
+ "isReferenceToInternal": true
2184
+ },
2185
+ "name": "color-light-mode-button-navbar-foreground-default",
2186
+ "attributes": {
2187
+ "category": "color",
2188
+ "type": "light-mode",
2189
+ "item": "button",
2190
+ "subitem": "navbar",
2191
+ "state": "foreground"
2192
+ },
2193
+ "path": [
2194
+ "color",
2195
+ "light-mode",
2196
+ "button",
2197
+ "navbar",
2198
+ "foreground",
2199
+ "default"
2200
+ ]
2201
+ },
2202
+ "hover": {
2203
+ "value": "#5f41e5",
2204
+ "public": true,
2205
+ "isReferenceToInternal": true,
2206
+ "filePath": "tokens/color/alias/button.light.json",
2207
+ "isSource": true,
2208
+ "original": {
2209
+ "value": "{color.light-mode.link.hover.value}",
2210
+ "public": true,
2211
+ "isReferenceToInternal": true
2212
+ },
2213
+ "name": "color-light-mode-button-navbar-foreground-hover",
2214
+ "attributes": {
2215
+ "category": "color",
2216
+ "type": "light-mode",
2217
+ "item": "button",
2218
+ "subitem": "navbar",
2219
+ "state": "foreground"
2220
+ },
2221
+ "path": [
2222
+ "color",
2223
+ "light-mode",
2224
+ "button",
2225
+ "navbar",
2226
+ "foreground",
2227
+ "hover"
2228
+ ]
2229
+ },
2230
+ "active": {
2231
+ "value": "#5f41e5",
2232
+ "public": true,
2233
+ "isReferenceToInternal": true,
2234
+ "filePath": "tokens/color/alias/button.light.json",
2235
+ "isSource": true,
2236
+ "original": {
2237
+ "value": "{color.light-mode.link.active.value}",
2238
+ "public": true,
2239
+ "isReferenceToInternal": true
2240
+ },
2241
+ "name": "color-light-mode-button-navbar-foreground-active",
2242
+ "attributes": {
2243
+ "category": "color",
2244
+ "type": "light-mode",
2245
+ "item": "button",
2246
+ "subitem": "navbar",
2247
+ "state": "foreground"
2248
+ },
2249
+ "path": [
2250
+ "color",
2251
+ "light-mode",
2252
+ "button",
2253
+ "navbar",
2254
+ "foreground",
2255
+ "active"
2256
+ ]
2257
+ }
2258
+ }
2171
2259
  }
2172
2260
  },
2173
2261
  "toggle-button": {
@@ -46,14 +46,37 @@
46
46
  ]
47
47
  }
48
48
  },
49
+ "reveal": {
50
+ "transition": {
51
+ "value": "all 300ms ease-in-out",
52
+ "public": true,
53
+ "filePath": "tokens/animation/alias.json",
54
+ "isSource": true,
55
+ "original": {
56
+ "value": "all {animation.transition.reveal.duration.value} {animation.transition.default.timing-function.value}",
57
+ "public": true
58
+ },
59
+ "name": "animation-reveal-transition",
60
+ "attributes": {
61
+ "category": "animation",
62
+ "type": "reveal",
63
+ "item": "transition"
64
+ },
65
+ "path": [
66
+ "animation",
67
+ "reveal",
68
+ "transition"
69
+ ]
70
+ }
71
+ },
49
72
  "button": {
50
73
  "transition": {
51
- "value": "background-color 200ms ease-in-out 0s, border-color 200ms ease-in-out 0s, color 200ms ease-in-out 0s",
74
+ "value": "all 200ms ease-in-out 0s",
52
75
  "public": true,
53
76
  "filePath": "tokens/animation/alias.json",
54
77
  "isSource": true,
55
78
  "original": {
56
- "value": "background-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, border-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
79
+ "value": "all {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
57
80
  "public": true
58
81
  },
59
82
  "name": "animation-button-transition",
@@ -94,12 +117,12 @@
94
117
  },
95
118
  "link": {
96
119
  "transition": {
97
- "value": "background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0s",
120
+ "value": "all 200ms ease-in-out 0s",
98
121
  "public": true,
99
122
  "filePath": "tokens/animation/alias.json",
100
123
  "isSource": true,
101
124
  "original": {
102
- "value": "background-color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, color {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
125
+ "value": "all {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}",
103
126
  "public": true
104
127
  },
105
128
  "name": "animation-link-transition",
@@ -211,6 +234,31 @@
211
234
  "duration"
212
235
  ]
213
236
  }
237
+ },
238
+ "reveal": {
239
+ "duration": {
240
+ "value": "300ms",
241
+ "public": true,
242
+ "filePath": "tokens/animation/base.json",
243
+ "isSource": true,
244
+ "original": {
245
+ "value": "300ms",
246
+ "public": true
247
+ },
248
+ "name": "animation-transition-reveal-duration",
249
+ "attributes": {
250
+ "category": "animation",
251
+ "type": "transition",
252
+ "item": "reveal",
253
+ "subitem": "duration"
254
+ },
255
+ "path": [
256
+ "animation",
257
+ "transition",
258
+ "reveal",
259
+ "duration"
260
+ ]
261
+ }
214
262
  }
215
263
  }
216
264
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.75",
3
+ "version": "1.0.0-dev.77",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [