@pantheon-systems/pds-design-tokens 1.0.0-dev.3 → 1.0.0-dev.32

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.
@@ -1,89 +1,164 @@
1
1
  {
2
2
  "animation": {
3
- "button": {
3
+ "focus": {
4
4
  "transition": {
5
- "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
5
+ "value": "outline: 200ms ease-in-out 0s",
6
6
  "filePath": "tokens/animation/alias.json",
7
7
  "isSource": true,
8
8
  "original": {
9
- "value": "background-color: {animation.transition.duration.value} {animation.transition.timing-function.value} {animation.transition.delay.value}, border-color: {animation.transition.duration.value} {animation.transition.timing-function.value} {animation.transition.delay.value}"
9
+ "value": "outline: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}"
10
10
  },
11
- "name": "animation-button-transition",
11
+ "name": "animation-focus-transition",
12
12
  "attributes": {
13
13
  "category": "animation",
14
- "type": "button",
14
+ "type": "focus",
15
15
  "item": "transition"
16
16
  },
17
17
  "path": [
18
18
  "animation",
19
- "button",
19
+ "focus",
20
20
  "transition"
21
21
  ]
22
22
  }
23
23
  },
24
- "transition": {
25
- "delay": {
26
- "value": "0s",
27
- "public": true,
28
- "filePath": "tokens/animation/base.json",
24
+ "button": {
25
+ "transition": {
26
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
27
+ "filePath": "tokens/animation/alias.json",
29
28
  "isSource": true,
30
29
  "original": {
31
- "value": "0s",
32
- "public": true
30
+ "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}"
33
31
  },
34
- "name": "animation-transition-delay",
32
+ "name": "animation-button-transition",
35
33
  "attributes": {
36
34
  "category": "animation",
37
- "type": "transition",
38
- "item": "delay"
35
+ "type": "button",
36
+ "item": "transition"
39
37
  },
40
38
  "path": [
41
39
  "animation",
42
- "transition",
43
- "delay"
40
+ "button",
41
+ "transition"
44
42
  ]
45
- },
46
- "duration": {
47
- "value": "200ms",
48
- "public": true,
49
- "filePath": "tokens/animation/base.json",
43
+ }
44
+ },
45
+ "input": {
46
+ "transition": {
47
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
48
+ "filePath": "tokens/animation/alias.json",
50
49
  "isSource": true,
51
50
  "original": {
52
- "value": "200ms",
53
- "public": true
51
+ "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}"
54
52
  },
55
- "name": "animation-transition-duration",
53
+ "name": "animation-input-transition",
56
54
  "attributes": {
57
55
  "category": "animation",
58
- "type": "transition",
59
- "item": "duration"
56
+ "type": "input",
57
+ "item": "transition"
60
58
  },
61
59
  "path": [
62
60
  "animation",
63
- "transition",
64
- "duration"
61
+ "input",
62
+ "transition"
65
63
  ]
66
- },
67
- "timing-function": {
68
- "value": "ease-in-out",
69
- "public": true,
70
- "filePath": "tokens/animation/base.json",
71
- "isSource": true,
72
- "original": {
64
+ }
65
+ },
66
+ "transition": {
67
+ "default": {
68
+ "delay": {
69
+ "value": "0s",
70
+ "public": true,
71
+ "filePath": "tokens/animation/base.json",
72
+ "isSource": true,
73
+ "original": {
74
+ "value": "0s",
75
+ "public": true
76
+ },
77
+ "name": "animation-transition-default-delay",
78
+ "attributes": {
79
+ "category": "animation",
80
+ "type": "transition",
81
+ "item": "default",
82
+ "subitem": "delay"
83
+ },
84
+ "path": [
85
+ "animation",
86
+ "transition",
87
+ "default",
88
+ "delay"
89
+ ]
90
+ },
91
+ "duration": {
92
+ "value": "200ms",
93
+ "public": true,
94
+ "filePath": "tokens/animation/base.json",
95
+ "isSource": true,
96
+ "original": {
97
+ "value": "200ms",
98
+ "public": true
99
+ },
100
+ "name": "animation-transition-default-duration",
101
+ "attributes": {
102
+ "category": "animation",
103
+ "type": "transition",
104
+ "item": "default",
105
+ "subitem": "duration"
106
+ },
107
+ "path": [
108
+ "animation",
109
+ "transition",
110
+ "default",
111
+ "duration"
112
+ ]
113
+ },
114
+ "timing-function": {
73
115
  "value": "ease-in-out",
74
- "public": true
75
- },
76
- "name": "animation-transition-timing-function",
77
- "attributes": {
78
- "category": "animation",
79
- "type": "transition",
80
- "item": "timing-function"
81
- },
82
- "path": [
83
- "animation",
84
- "transition",
85
- "timing-function"
86
- ]
116
+ "public": true,
117
+ "filePath": "tokens/animation/base.json",
118
+ "isSource": true,
119
+ "original": {
120
+ "value": "ease-in-out",
121
+ "public": true
122
+ },
123
+ "name": "animation-transition-default-timing-function",
124
+ "attributes": {
125
+ "category": "animation",
126
+ "type": "transition",
127
+ "item": "default",
128
+ "subitem": "timing-function"
129
+ },
130
+ "path": [
131
+ "animation",
132
+ "transition",
133
+ "default",
134
+ "timing-function"
135
+ ]
136
+ }
137
+ },
138
+ "dropdown": {
139
+ "duration": {
140
+ "value": "300ms",
141
+ "public": true,
142
+ "filePath": "tokens/animation/base.json",
143
+ "isSource": true,
144
+ "original": {
145
+ "value": "300ms",
146
+ "public": true
147
+ },
148
+ "name": "animation-transition-dropdown-duration",
149
+ "attributes": {
150
+ "category": "animation",
151
+ "type": "transition",
152
+ "item": "dropdown",
153
+ "subitem": "duration"
154
+ },
155
+ "path": [
156
+ "animation",
157
+ "transition",
158
+ "dropdown",
159
+ "duration"
160
+ ]
161
+ }
87
162
  }
88
163
  }
89
164
  },
@@ -111,6 +186,29 @@
111
186
  "radius",
112
187
  "default"
113
188
  ]
189
+ },
190
+ "container": {
191
+ "value": 0.375,
192
+ "defaultUnit": "rem",
193
+ "public": true,
194
+ "filePath": "tokens/border/alias.json",
195
+ "isSource": true,
196
+ "original": {
197
+ "value": 0.375,
198
+ "defaultUnit": "rem",
199
+ "public": true
200
+ },
201
+ "name": "border-radius-container",
202
+ "attributes": {
203
+ "category": "border",
204
+ "type": "radius",
205
+ "item": "container"
206
+ },
207
+ "path": [
208
+ "border",
209
+ "radius",
210
+ "container"
211
+ ]
114
212
  }
115
213
  },
116
214
  "width": {
@@ -551,6 +649,44 @@
551
649
  "spacing",
552
650
  "4XS"
553
651
  ]
652
+ },
653
+ "5XS": {
654
+ "value": "0.25",
655
+ "defaultUnit": "rem",
656
+ "filePath": "tokens/spacing/base.json",
657
+ "isSource": true,
658
+ "original": {
659
+ "value": "0.25",
660
+ "defaultUnit": "rem"
661
+ },
662
+ "name": "spacing-5-xs",
663
+ "attributes": {
664
+ "category": "spacing",
665
+ "type": "5XS"
666
+ },
667
+ "path": [
668
+ "spacing",
669
+ "5XS"
670
+ ]
671
+ },
672
+ "6XS": {
673
+ "value": "0.125",
674
+ "defaultUnit": "rem",
675
+ "filePath": "tokens/spacing/base.json",
676
+ "isSource": true,
677
+ "original": {
678
+ "value": "0.125",
679
+ "defaultUnit": "rem"
680
+ },
681
+ "name": "spacing-6-xs",
682
+ "attributes": {
683
+ "category": "spacing",
684
+ "type": "6XS"
685
+ },
686
+ "path": [
687
+ "spacing",
688
+ "6XS"
689
+ ]
554
690
  }
555
691
  },
556
692
  "typography": {
@@ -672,11 +808,11 @@
672
808
  ]
673
809
  },
674
810
  "css-import": {
675
- "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap'",
811
+ "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'",
676
812
  "filePath": "tokens/typography/base/font.json",
677
813
  "isSource": true,
678
814
  "original": {
679
- "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap'"
815
+ "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'"
680
816
  },
681
817
  "name": "typography-font-css-import",
682
818
  "attributes": {
@@ -22,6 +22,15 @@ $pds-color-button-brand-border-hover: #ffe668;
22
22
  $pds-color-button-brand-foreground-active: #121219;
23
23
  $pds-color-button-brand-foreground-default: #121219;
24
24
  $pds-color-button-brand-foreground-hover: #121219;
25
+ $pds-color-button-brand-secondary-background-active: #282839;
26
+ $pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
27
+ $pds-color-button-brand-secondary-background-hover: #504e62;
28
+ $pds-color-button-brand-secondary-border-active: #504e62;
29
+ $pds-color-button-brand-secondary-border-default: #a6a3b4;
30
+ $pds-color-button-brand-secondary-border-hover: #ffffff;
31
+ $pds-color-button-brand-secondary-foreground-active: #e7e7eb;
32
+ $pds-color-button-brand-secondary-foreground-default: #e7e7eb;
33
+ $pds-color-button-brand-secondary-foreground-hover: #ffffff;
25
34
  $pds-color-button-critical-background-active: #9c2f2f;
26
35
  $pds-color-button-critical-background-default: #e05757;
27
36
  $pds-color-button-critical-background-hover: #be4242;
@@ -61,20 +70,35 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
70
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
71
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
72
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
73
+ $pds-color-input-action-background-hover: #504e62;
74
+ $pds-color-input-background-critical: #1d1d29;
64
75
  $pds-color-input-background-default: #1d1d29;
65
- $pds-color-input-background-disabled: #504e62;
66
- $pds-color-input-border-default: $pds-color-border-default;
67
- $pds-color-input-border-disabled: #858299;
76
+ $pds-color-input-background-hover: #282839;
77
+ $pds-color-input-border-critical: #e05757;
78
+ $pds-color-input-border-default: #a6a3b4;
79
+ $pds-color-input-border-hover: #7657ff;
80
+ $pds-color-input-border-success: #3cb683;
81
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
82
+ $pds-color-input-checked-foreground: #ffffff;
83
+ $pds-color-input-foreground-critical: #e05757;
84
+ $pds-color-input-foreground-default: #ffffff;
85
+ $pds-color-input-foreground-success: #3cb683;
86
+ $pds-color-input-placeholder-text: #a6a3b4;
87
+ $pds-color-input-toggle-switch-icon: #ffffff;
88
+ $pds-color-input-toggle-switch-off: #504e62;
89
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
68
90
  $pds-color-interactive-focus: #36a3ff;
69
- $pds-color-link-active: #2776b9;
91
+ $pds-color-link-active: #6f54e8;
70
92
  $pds-color-link-default: #36a3ff;
71
- $pds-color-link-hover: #2776b9;
72
- $pds-color-link-visited: #967fff;
73
- $pds-color-menu-background: #121219;
74
- $pds-color-menu-item-background-active: #282839;
75
- $pds-color-menu-item-background-default: #121219;
76
- $pds-color-menu-item-background-hover: #1d1d29;
93
+ $pds-color-link-hover: #6f54e8;
94
+ $pds-color-link-visited: #6f54e8;
95
+ $pds-color-menu-background: #282839;
96
+ $pds-color-menu-item-background-active: #858299;
97
+ $pds-color-menu-item-background-default: #282839;
98
+ $pds-color-menu-item-background-hover: #504e62;
99
+ $pds-color-menu-item-description-text: #a6a3b4;
77
100
  $pds-color-menu-item-foreground: #ffffff;
101
+ $pds-color-menu-item-heading-text: #a6a3b4;
78
102
  $pds-color-panel-default-background: $pds-color-background-default;
79
103
  $pds-color-panel-default-border: $pds-color-border-default;
80
104
  $pds-color-panel-overlay-background: #282839;
@@ -84,10 +108,10 @@ $pds-color-panel-raised-border: $pds-color-border-default;
84
108
  $pds-color-panel-sunken-background: #121219;
85
109
  $pds-color-panel-sunken-border: #121219;
86
110
  $pds-color-text-default: #ffffff;
87
- $pds-color-text-headings: $pds-color-text-default;
88
- $pds-color-text-lead: #858299;
89
- $pds-color-text-overline: #858299;
90
- $pds-color-text-paragraph: $pds-color-text-default;
91
- $pds-color-text-quote: #858299;
111
+ $pds-color-text-default-secondary: #a6a3b4;
112
+ $pds-color-tile-background-active: #858299;
113
+ $pds-color-tile-background-hover: #504e62;
114
+ $pds-color-toggle-button-background-off: #504e62;
115
+ $pds-color-toggle-button-foreground-off: #c7c5d0;
92
116
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
93
117
  $pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
@@ -22,6 +22,15 @@ $pds-color-button-brand-border-hover: #ffe668;
22
22
  $pds-color-button-brand-foreground-active: #23232d;
23
23
  $pds-color-button-brand-foreground-default: #23232d;
24
24
  $pds-color-button-brand-foreground-hover: #23232d;
25
+ $pds-color-button-brand-secondary-background-active: #cfcfd3;
26
+ $pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
27
+ $pds-color-button-brand-secondary-background-hover: #f8f8f8;
28
+ $pds-color-button-brand-secondary-border-active: #23232d;
29
+ $pds-color-button-brand-secondary-border-default: #71717c;
30
+ $pds-color-button-brand-secondary-border-hover: #23232d;
31
+ $pds-color-button-brand-secondary-foreground-active: #23232d;
32
+ $pds-color-button-brand-secondary-foreground-default: #23232d;
33
+ $pds-color-button-brand-secondary-foreground-hover: #23232d;
25
34
  $pds-color-button-critical-background-active: #700000;
26
35
  $pds-color-button-critical-background-default: #d61f1f;
27
36
  $pds-color-button-critical-background-hover: #f83333;
@@ -33,23 +42,23 @@ $pds-color-button-critical-foreground-default: #ffffff;
33
42
  $pds-color-button-critical-foreground-hover: #ffffff;
34
43
  $pds-color-button-primary-background-active: #11005d;
35
44
  $pds-color-button-primary-background-default: #3017a1;
36
- $pds-color-button-primary-background-hover: #785aff;
45
+ $pds-color-button-primary-background-hover: #5f41e5;
37
46
  $pds-color-button-primary-border-active: #11005d;
38
47
  $pds-color-button-primary-border-default: #3017a1;
39
- $pds-color-button-primary-border-hover: #785aff;
48
+ $pds-color-button-primary-border-hover: #5f41e5;
40
49
  $pds-color-button-primary-foreground-active: #ffffff;
41
50
  $pds-color-button-primary-foreground-default: #ffffff;
42
51
  $pds-color-button-primary-foreground-hover: #ffffff;
43
- $pds-color-button-secondary-background-active: #cfcfd3;
52
+ $pds-color-button-secondary-background-active: #e5dbff;
44
53
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
45
54
  $pds-color-button-secondary-background-hover: #f0ecff;
46
55
  $pds-color-button-secondary-border-active: #11005d;
47
56
  $pds-color-button-secondary-border-default: #3017a1;
48
- $pds-color-button-secondary-border-hover: #785aff;
57
+ $pds-color-button-secondary-border-hover: #5f41e5;
49
58
  $pds-color-button-secondary-foreground-active: #11005d;
50
59
  $pds-color-button-secondary-foreground-default: #3017a1;
51
60
  $pds-color-button-secondary-foreground-hover: #3017a1;
52
- $pds-color-button-subtle-background-active: #cfcfd3;
61
+ $pds-color-button-subtle-background-active: #e5dbff;
53
62
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
63
  $pds-color-button-subtle-background-hover: #f0ecff;
55
64
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
@@ -61,33 +70,48 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
70
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
71
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
72
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
73
+ $pds-color-input-action-background-hover: #f8f8f8;
74
+ $pds-color-input-background-critical: #ffebeb;
64
75
  $pds-color-input-background-default: #ffffff;
65
- $pds-color-input-background-disabled: #cfcfd3;
66
- $pds-color-input-border-default: $pds-color-border-default;
67
- $pds-color-input-border-disabled: #aeaeb6;
76
+ $pds-color-input-background-hover: #f0ecff;
77
+ $pds-color-input-border-critical: #d61f1f;
78
+ $pds-color-input-border-default: #cfcfd3;
79
+ $pds-color-input-border-hover: #5f41e5;
80
+ $pds-color-input-border-success: #1f845a;
81
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
82
+ $pds-color-input-checked-foreground: #ffffff;
83
+ $pds-color-input-foreground-critical: #d61f1f;
84
+ $pds-color-input-foreground-default: #23232d;
85
+ $pds-color-input-foreground-success: #1f845a;
86
+ $pds-color-input-placeholder-text: #71717c;
87
+ $pds-color-input-toggle-switch-icon: #ffffff;
88
+ $pds-color-input-toggle-switch-off: #94949e;
89
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
68
90
  $pds-color-interactive-focus: #0f62fe;
69
- $pds-color-link-active: #003cac;
91
+ $pds-color-link-active: #6f54e8;
70
92
  $pds-color-link-default: #0f62fe;
71
- $pds-color-link-hover: #003cac;
72
- $pds-color-link-visited: #967fff;
93
+ $pds-color-link-hover: #6f54e8;
94
+ $pds-color-link-visited: #6f54e8;
95
+ $pds-color-menu-background: #ffffff;
73
96
  $pds-color-menu-item-background-active: #cfcfd3;
74
97
  $pds-color-menu-item-background-default: #ffffff;
75
- $pds-color-menu-item-background-hover: #f1f1f1;
98
+ $pds-color-menu-item-background-hover: #f8f8f8;
99
+ $pds-color-menu-item-description-text: #71717c;
76
100
  $pds-color-menu-item-foreground: #23232d;
77
- $pds-color-menu-item-menu-background: #ffffff;
101
+ $pds-color-menu-item-heading-text: #71717c;
78
102
  $pds-color-panel-default-background: $pds-color-background-default;
79
103
  $pds-color-panel-default-border: $pds-color-border-default;
80
104
  $pds-color-panel-overlay-background: $pds-color-background-default;
81
105
  $pds-color-panel-overlay-border: $pds-color-border-default;
82
106
  $pds-color-panel-raised-background: $pds-color-background-default;
83
107
  $pds-color-panel-raised-border: $pds-color-border-default;
84
- $pds-color-panel-sunken-background: #f1f1f1;
85
- $pds-color-panel-sunken-border: #f1f1f1;
108
+ $pds-color-panel-sunken-background: #f8f8f8;
109
+ $pds-color-panel-sunken-border: #f8f8f8;
86
110
  $pds-color-text-default: #23232d;
87
- $pds-color-text-headings: $pds-color-text-default;
88
- $pds-color-text-lead: #71717c;
89
- $pds-color-text-overline: #71717c;
90
- $pds-color-text-paragraph: #23232d;
91
- $pds-color-text-quote: #71717c;
111
+ $pds-color-text-default-secondary: #71717c;
112
+ $pds-color-tile-background-active: #cfcfd3;
113
+ $pds-color-tile-background-hover: #f8f8f8;
114
+ $pds-color-toggle-button-background-off: #cfcfd3;
115
+ $pds-color-toggle-button-foreground-off: #71717c;
92
116
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
93
117
  $pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
@@ -8,9 +8,11 @@
8
8
  //
9
9
  // This file has been generated automatically.
10
10
 
11
- $pds-animation-transition-delay: 0s;
12
- $pds-animation-transition-duration: 200ms;
13
- $pds-animation-transition-timing-function: ease-in-out;
11
+ $pds-animation-transition-default-delay: 0s;
12
+ $pds-animation-transition-default-duration: 200ms;
13
+ $pds-animation-transition-default-timing-function: ease-in-out;
14
+ $pds-animation-transition-dropdown-duration: 300ms;
15
+ $pds-border-radius-container: 0.375rem;
14
16
  $pds-border-radius-default: 0.1875rem;
15
17
  $pds-border-width-default: 1px;
16
18
  $pds-typography-font-default: 'Poppins', sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.3",
3
+ "version": "1.0.0-dev.32",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [