@pantheon-systems/pds-design-tokens 1.0.0-dev.1 → 1.0.0-dev.11

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 (11) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +22 -6
  2. package/build/css/pds-design-tokens-light-mode.css +24 -8
  3. package/build/css/pds-design-tokens.css +4 -3
  4. package/build/figma/pds-design-tokens-figma.json +2163 -1049
  5. package/build/json/pds-design-tokens-dark-mode.json +726 -287
  6. package/build/json/pds-design-tokens-light-mode.json +729 -290
  7. package/build/json/pds-design-tokens.json +132 -36
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +22 -6
  9. package/build/scss/_pds-design-tokens-light-mode.scss +24 -8
  10. package/build/scss/_pds-design-tokens.scss +4 -3
  11. package/package.json +1 -1
package/build/json/pds-design-tokens.json CHANGED
@@ -1,69 +1,165 @@
1
1
  {
2
2
  "animation": {
3
- "transition": {
4
- "delay": {
5
- "value": "0s",
6
- "public": true,
7
- "filePath": "tokens/animation/base.json",
3
+ "button": {
4
+ "transition": {
5
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
6
+ "filePath": "tokens/animation/alias.json",
8
7
  "isSource": true,
9
8
  "original": {
10
- "value": "0s",
11
- "public": true
9
+ "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}"
12
10
  },
13
- "name": "animation-transition-delay",
11
+ "name": "animation-button-transition",
14
12
  "attributes": {
15
13
  "category": "animation",
16
- "type": "transition",
17
- "item": "delay"
14
+ "type": "button",
15
+ "item": "transition"
18
16
  },
19
17
  "path": [
20
18
  "animation",
21
- "transition",
22
- "delay"
19
+ "button",
20
+ "transition"
23
21
  ]
24
- },
25
- "duration": {
26
- "value": "200ms",
27
- "public": true,
28
- "filePath": "tokens/animation/base.json",
22
+ }
23
+ },
24
+ "input": {
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": "200ms",
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-duration",
32
+ "name": "animation-input-transition",
35
33
  "attributes": {
36
34
  "category": "animation",
37
- "type": "transition",
38
- "item": "duration"
35
+ "type": "input",
36
+ "item": "transition"
39
37
  },
40
38
  "path": [
41
39
  "animation",
42
- "transition",
43
- "duration"
40
+ "input",
41
+ "transition"
44
42
  ]
45
- },
46
- "timing-function": {
47
- "value": "ease-in-out",
48
- "public": true,
49
- "filePath": "tokens/animation/base.json",
43
+ }
44
+ },
45
+ "input-label": {
46
+ "transition": {
47
+ "value": "color: 200ms ease-in-out 0s",
48
+ "filePath": "tokens/animation/alias.json",
50
49
  "isSource": true,
51
50
  "original": {
52
- "value": "ease-in-out",
53
- "public": true
51
+ "value": "color: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}"
54
52
  },
55
- "name": "animation-transition-timing-function",
53
+ "name": "animation-input-label-transition",
56
54
  "attributes": {
57
55
  "category": "animation",
58
- "type": "transition",
59
- "item": "timing-function"
56
+ "type": "input-label",
57
+ "item": "transition"
60
58
  },
61
59
  "path": [
62
60
  "animation",
63
- "transition",
64
- "timing-function"
61
+ "input-label",
62
+ "transition"
65
63
  ]
66
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": {
115
+ "value": "ease-in-out",
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
+ }
162
+ }
67
163
  }
68
164
  },
69
165
  "border": {
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -61,15 +61,31 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
61
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
62
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
63
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
64
+ $pds-color-input-background-critical: #1d1d29;
64
65
  $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;
66
+ $pds-color-input-background-hover: #282839;
67
+ $pds-color-input-border-critical: #e05757;
68
+ $pds-color-input-border-default: #a6a3b4;
69
+ $pds-color-input-border-hover: $pds-color-interactive-focus;
70
+ $pds-color-input-border-success: #22a06b;
71
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
72
+ $pds-color-input-checked-foreground: #ffffff;
73
+ $pds-color-input-foreground-critical: #e05757;
74
+ $pds-color-input-foreground-default: #ffffff;
75
+ $pds-color-input-foreground-success: #22a06b;
76
+ $pds-color-input-placeholder-text: #a6a3b4;
68
77
  $pds-color-interactive-focus: #36a3ff;
69
78
  $pds-color-link-active: #2776b9;
70
79
  $pds-color-link-default: #36a3ff;
71
80
  $pds-color-link-hover: #2776b9;
72
81
  $pds-color-link-visited: #967fff;
82
+ $pds-color-menu-background: #282839;
83
+ $pds-color-menu-item-background-active: #858299;
84
+ $pds-color-menu-item-background-default: #282839;
85
+ $pds-color-menu-item-background-hover: #504e62;
86
+ $pds-color-menu-item-description-text: #a6a3b4;
87
+ $pds-color-menu-item-foreground: #ffffff;
88
+ $pds-color-menu-item-heading-text: #a6a3b4;
73
89
  $pds-color-panel-default-background: $pds-color-background-default;
74
90
  $pds-color-panel-default-border: $pds-color-border-default;
75
91
  $pds-color-panel-overlay-background: #282839;
@@ -80,9 +96,9 @@ $pds-color-panel-sunken-background: #121219;
80
96
  $pds-color-panel-sunken-border: #121219;
81
97
  $pds-color-text-default: #ffffff;
82
98
  $pds-color-text-headings: $pds-color-text-default;
83
- $pds-color-text-lead: #858299;
84
- $pds-color-text-overline: #858299;
99
+ $pds-color-text-lead: #a6a3b4;
100
+ $pds-color-text-overline: #a6a3b4;
85
101
  $pds-color-text-paragraph: $pds-color-text-default;
86
- $pds-color-text-quote: #858299;
102
+ $pds-color-text-quote: #a6a3b4;
87
103
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
88
104
  $pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -33,23 +33,23 @@ $pds-color-button-critical-foreground-default: #ffffff;
33
33
  $pds-color-button-critical-foreground-hover: #ffffff;
34
34
  $pds-color-button-primary-background-active: #11005d;
35
35
  $pds-color-button-primary-background-default: #3017a1;
36
- $pds-color-button-primary-background-hover: #785aff;
36
+ $pds-color-button-primary-background-hover: #5f41e5;
37
37
  $pds-color-button-primary-border-active: #11005d;
38
38
  $pds-color-button-primary-border-default: #3017a1;
39
- $pds-color-button-primary-border-hover: #785aff;
39
+ $pds-color-button-primary-border-hover: #5f41e5;
40
40
  $pds-color-button-primary-foreground-active: #ffffff;
41
41
  $pds-color-button-primary-foreground-default: #ffffff;
42
42
  $pds-color-button-primary-foreground-hover: #ffffff;
43
- $pds-color-button-secondary-background-active: #cfcfd3;
43
+ $pds-color-button-secondary-background-active: #e5dbff;
44
44
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
45
45
  $pds-color-button-secondary-background-hover: #f0ecff;
46
46
  $pds-color-button-secondary-border-active: #11005d;
47
47
  $pds-color-button-secondary-border-default: #3017a1;
48
- $pds-color-button-secondary-border-hover: #785aff;
48
+ $pds-color-button-secondary-border-hover: #5f41e5;
49
49
  $pds-color-button-secondary-foreground-active: #11005d;
50
50
  $pds-color-button-secondary-foreground-default: #3017a1;
51
51
  $pds-color-button-secondary-foreground-hover: #3017a1;
52
- $pds-color-button-subtle-background-active: #cfcfd3;
52
+ $pds-color-button-subtle-background-active: #e5dbff;
53
53
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
54
  $pds-color-button-subtle-background-hover: #f0ecff;
55
55
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
@@ -61,15 +61,31 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
61
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
62
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
63
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
64
+ $pds-color-input-background-critical: #ffebeb;
64
65
  $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;
66
+ $pds-color-input-background-hover: #f0ecff;
67
+ $pds-color-input-border-critical: #d61f1f;
68
+ $pds-color-input-border-default: #8f8f99;
69
+ $pds-color-input-border-hover: $pds-color-interactive-focus;
70
+ $pds-color-input-border-success: #1f845a;
71
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
72
+ $pds-color-input-checked-foreground: #ffffff;
73
+ $pds-color-input-foreground-critical: #d61f1f;
74
+ $pds-color-input-foreground-default: #23232d;
75
+ $pds-color-input-foreground-success: #1f845a;
76
+ $pds-color-input-placeholder-text: #71717c;
68
77
  $pds-color-interactive-focus: #0f62fe;
69
78
  $pds-color-link-active: #003cac;
70
79
  $pds-color-link-default: #0f62fe;
71
80
  $pds-color-link-hover: #003cac;
72
81
  $pds-color-link-visited: #967fff;
82
+ $pds-color-menu-background: #ffffff;
83
+ $pds-color-menu-item-background-active: #cfcfd3;
84
+ $pds-color-menu-item-background-default: #ffffff;
85
+ $pds-color-menu-item-background-hover: #f1f1f1;
86
+ $pds-color-menu-item-description-text: #71717c;
87
+ $pds-color-menu-item-foreground: #23232d;
88
+ $pds-color-menu-item-heading-text: #71717c;
73
89
  $pds-color-panel-default-background: $pds-color-background-default;
74
90
  $pds-color-panel-default-border: $pds-color-border-default;
75
91
  $pds-color-panel-overlay-background: $pds-color-background-default;
package/build/scss/_pds-design-tokens.scss CHANGED
@@ -8,9 +8,10 @@
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;
14
15
  $pds-border-radius-default: 0.1875rem;
15
16
  $pds-border-width-default: 1px;
16
17
  $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.1",
3
+ "version": "1.0.0-dev.11",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [