@pantheon-systems/pds-design-tokens 1.0.0-dev.8 → 1.0.0-dev.81

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 (12) hide show
  1. package/README.md +2 -3
  2. package/build/css/pds-design-tokens-dark-mode.css +127 -31
  3. package/build/css/pds-design-tokens-light-mode.css +143 -38
  4. package/build/css/pds-design-tokens.css +64 -3
  5. package/build/figma/pds-design-tokens-figma.json +8637 -3959
  6. package/build/json/pds-design-tokens-dark-mode.json +3444 -1315
  7. package/build/json/pds-design-tokens-light-mode.json +3607 -1312
  8. package/build/json/pds-design-tokens.json +803 -226
  9. package/package.json +1 -1
  10. package/build/scss/_pds-design-tokens-dark-mode.scss +0 -95
  11. package/build/scss/_pds-design-tokens-light-mode.scss +0 -95
  12. package/build/scss/_pds-design-tokens.scss +0 -16
package/README.md CHANGED
@@ -11,7 +11,6 @@ Compiled tokens can be found in the `build` directory.
11
11
  PDS Design Tokens are provided in the following formats:
12
12
 
13
13
  - CSS Custom Properties
14
- - SASS Variables
15
14
  - JSON
16
15
  - Figma (formatted to sync to Figma styles)
17
16
 
@@ -21,11 +20,11 @@ Design tokens are specifically intended for the purpose of design and will be tr
21
20
 
22
21
  By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.
23
22
 
24
- For example, CSS and SCSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
23
+ For example, CSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
25
24
 
26
25
  ## Public and Private Tokens
27
26
 
28
- All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS and SCSS stylesheets.
27
+ All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS stylesheets.
29
28
 
30
29
  We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.
31
30
 
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -10,11 +10,39 @@
10
10
  */
11
11
 
12
12
  :root {
13
+ --pds-color-background-brand-secondary: #4e39a8;
13
14
  --pds-color-background-default: #1d1d29;
15
+ --pds-color-background-default-secondary: #282839;
16
+ --pds-color-background-reverse: #e7e7eb;
17
+ --pds-color-badge-border: #a6a3b4;
18
+ --pds-color-badge-label: #e7e7eb;
19
+ --pds-color-badge-status-critical: var(--pds-color-semantic-critical-foreground);
20
+ --pds-color-badge-status-default: #858299;
21
+ --pds-color-badge-status-discovery: var(--pds-color-semantic-discovery-foreground);
22
+ --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
23
+ --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
24
+ --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
25
+ --pds-color-badge-tier-diamond-background: #f0fdff;
26
+ --pds-color-badge-tier-diamond-foreground: #8a70ff;
27
+ --pds-color-badge-tier-gold-background: #fff1a9;
28
+ --pds-color-badge-tier-gold-foreground: #705e00;
29
+ --pds-color-badge-tier-platinum-background: #d0c6ff;
30
+ --pds-color-badge-tier-platinum-foreground: #4e39a8;
31
+ --pds-color-badge-tier-silver-background: #e7e7eb;
32
+ --pds-color-badge-tier-silver-foreground: #504e62;
33
+ --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
34
+ --pds-color-banner-critical-foreground: #ffffff;
35
+ --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
36
+ --pds-color-banner-info-foreground: #ffffff;
37
+ --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
38
+ --pds-color-banner-warning-foreground: #121219;
14
39
  --pds-color-border-default: #504e62;
15
40
  --pds-color-brand-accent-default: #de0093;
16
41
  --pds-color-brand-primary-default: #ffdc28;
17
- --pds-color-brand-secondary-default: #6947ff;
42
+ --pds-color-brand-secondary-default: #8a70ff;
43
+ --pds-color-breadcrumb-link: var(--pds-color-link-default);
44
+ --pds-color-breadcrumb-separator: #858299;
45
+ --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
18
46
  --pds-color-button-brand-background-active: #ddbd16;
19
47
  --pds-color-button-brand-background-default: #ffdc28;
20
48
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,21 +52,33 @@
24
52
  --pds-color-button-brand-foreground-active: #121219;
25
53
  --pds-color-button-brand-foreground-default: #121219;
26
54
  --pds-color-button-brand-foreground-hover: #121219;
27
- --pds-color-button-critical-background-active: #9c2f2f;
28
- --pds-color-button-critical-background-default: #e05757;
29
- --pds-color-button-critical-background-hover: #be4242;
30
- --pds-color-button-critical-border-active: #9c2f2f;
31
- --pds-color-button-critical-border-default: #e05757;
32
- --pds-color-button-critical-border-hover: #be4242;
55
+ --pds-color-button-brand-secondary-background-active: #282839;
56
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
57
+ --pds-color-button-brand-secondary-background-hover: #504e62;
58
+ --pds-color-button-brand-secondary-border-active: #504e62;
59
+ --pds-color-button-brand-secondary-border-default: #a6a3b4;
60
+ --pds-color-button-brand-secondary-border-hover: #ffffff;
61
+ --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
62
+ --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
63
+ --pds-color-button-brand-secondary-foreground-hover: #ffffff;
64
+ --pds-color-button-critical-background-active: #a22a1a;
65
+ --pds-color-button-critical-background-default: #ca3521;
66
+ --pds-color-button-critical-background-hover: #b6301e;
67
+ --pds-color-button-critical-border-active: #a22a1a;
68
+ --pds-color-button-critical-border-default: #ca3521;
69
+ --pds-color-button-critical-border-hover: #b6301e;
33
70
  --pds-color-button-critical-foreground-active: #ffffff;
34
71
  --pds-color-button-critical-foreground-default: #ffffff;
35
72
  --pds-color-button-critical-foreground-hover: #ffffff;
36
- --pds-color-button-primary-background-active: #4b32bb;
37
- --pds-color-button-primary-background-default: #6947ff;
38
- --pds-color-button-primary-background-hover: #7657ff;
39
- --pds-color-button-primary-border-active: #4b32bb;
40
- --pds-color-button-primary-border-default: #6947ff;
41
- --pds-color-button-primary-border-hover: #7657ff;
73
+ --pds-color-button-navbar-foreground-active: #8a70ff;
74
+ --pds-color-button-navbar-foreground-default: #ffffff;
75
+ --pds-color-button-navbar-foreground-hover: #8a70ff;
76
+ --pds-color-button-primary-background-active: #4e39a8;
77
+ --pds-color-button-primary-background-default: #8a70ff;
78
+ --pds-color-button-primary-background-hover: #ad9bff;
79
+ --pds-color-button-primary-border-active: #4e39a8;
80
+ --pds-color-button-primary-border-default: #8a70ff;
81
+ --pds-color-button-primary-border-hover: #ad9bff;
42
82
  --pds-color-button-primary-foreground-active: #ffffff;
43
83
  --pds-color-button-primary-foreground-default: #ffffff;
44
84
  --pds-color-button-primary-foreground-hover: #ffffff;
@@ -58,20 +98,43 @@
58
98
  --pds-color-button-subtle-foreground-active: #e7e7eb;
59
99
  --pds-color-button-subtle-foreground-default: #e7e7eb;
60
100
  --pds-color-button-subtle-foreground-hover: #ffffff;
101
+ --pds-color-card-border: #504e62;
102
+ --pds-color-expansion-panel-hover: #282839;
103
+ --pds-color-expansion-panel-open: #282839;
61
104
  --pds-color-foreground-default: #ffffff;
62
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
105
+ --pds-color-foreground-reverse: #1d1d29;
106
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
107
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
108
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
109
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
110
+ --pds-color-input-action-background-hover: #504e62;
111
+ --pds-color-input-background-critical: #1d1d29;
66
112
  --pds-color-input-background-default: #1d1d29;
67
- --pds-color-input-background-disabled: #504e62;
68
- --pds-color-input-border-default: var(--pds-color-border-default);
69
- --pds-color-input-border-disabled: #858299;
113
+ --pds-color-input-background-hover: #282839;
114
+ --pds-color-input-border-critical: #ca3521;
115
+ --pds-color-input-border-default: #858299;
116
+ --pds-color-input-border-hover: #ad9bff;
117
+ --pds-color-input-border-success: #2abb7f;
118
+ --pds-color-input-checked-background: var(--pds-color-interactive-focus);
119
+ --pds-color-input-checked-foreground: #ffffff;
120
+ --pds-color-input-foreground-critical: #ca3521;
121
+ --pds-color-input-foreground-default: #ffffff;
122
+ --pds-color-input-foreground-success: #2abb7f;
123
+ --pds-color-input-placeholder-text: #a6a3b4;
124
+ --pds-color-input-toggle-switch-icon: #ffffff;
125
+ --pds-color-input-toggle-switch-off: #504e62;
126
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
70
127
  --pds-color-interactive-focus: #36a3ff;
71
- --pds-color-link-active: #2776b9;
128
+ --pds-color-interactive-link: #36a3ff;
129
+ --pds-color-interactive-reverse-focus: #36a3ff;
130
+ --pds-color-interactive-reverse-link: #36a3ff;
131
+ --pds-color-link-active: #8a70ff;
132
+ --pds-color-link-cta-active: #d0c6ff;
133
+ --pds-color-link-cta-default: #8a70ff;
134
+ --pds-color-link-cta-hover: #ad9bff;
72
135
  --pds-color-link-default: #36a3ff;
73
- --pds-color-link-hover: #2776b9;
74
- --pds-color-link-visited: #967fff;
136
+ --pds-color-link-hover: #8a70ff;
137
+ --pds-color-link-visited: #8a70ff;
75
138
  --pds-color-menu-background: #282839;
76
139
  --pds-color-menu-item-background-active: #858299;
77
140
  --pds-color-menu-item-background-default: #282839;
@@ -82,17 +145,50 @@
82
145
  --pds-color-panel-default-background: var(--pds-color-background-default);
83
146
  --pds-color-panel-default-border: var(--pds-color-border-default);
84
147
  --pds-color-panel-overlay-background: #282839;
85
- --pds-color-panel-overlay-border: #282839;
86
148
  --pds-color-panel-raised-background: #282839;
87
149
  --pds-color-panel-raised-border: var(--pds-color-border-default);
88
150
  --pds-color-panel-sunken-background: #121219;
89
- --pds-color-panel-sunken-border: #121219;
90
- --pds-color-text-default: #ffffff;
91
- --pds-color-text-headings: var(--pds-color-text-default);
92
- --pds-color-text-lead: #a6a3b4;
93
- --pds-color-text-overline: #a6a3b4;
94
- --pds-color-text-paragraph: var(--pds-color-text-default);
95
- --pds-color-text-quote: #a6a3b4;
151
+ --pds-color-semantic-critical-background: #391813;
152
+ --pds-color-semantic-critical-foreground: #ca3521;
153
+ --pds-color-semantic-discovery-background: #231c3f;
154
+ --pds-color-semantic-discovery-foreground: #8f7ee7;
155
+ --pds-color-semantic-info-background: #082145;
156
+ --pds-color-semantic-info-foreground: #388bff;
157
+ --pds-color-semantic-success-background: #133527;
158
+ --pds-color-semantic-success-foreground: #2abb7f;
159
+ --pds-color-semantic-warning-background: #3d2e00;
160
+ --pds-color-semantic-warning-foreground: #cf9f02;
161
+ --pds-color-table-sort-arrow-active: #8a70ff;
162
+ --pds-color-table-sort-arrow-inactive: #a6a3b4;
163
+ --pds-color-tabs-accent: #ad9bff;
164
+ --pds-color-tag-1-background: #705e00;
165
+ --pds-color-tag-1-foreground: #fffbe9;
166
+ --pds-color-tag-2-background: #4e39a8;
167
+ --pds-color-tag-2-foreground: #f3f0ff;
168
+ --pds-color-tag-3-background: #560039;
169
+ --pds-color-tag-3-foreground: #ffe5f6;
170
+ --pds-color-tag-4-background: #504e62;
171
+ --pds-color-tag-4-foreground: #e7e7eb;
172
+ --pds-color-tag-5-background: #700000;
173
+ --pds-color-tag-5-foreground: #ffebeb;
174
+ --pds-color-tag-6-background: #b15902;
175
+ --pds-color-tag-6-foreground: #fffae6;
176
+ --pds-color-tag-7-background: #164b35;
177
+ --pds-color-tag-7-foreground: #dffcf0;
178
+ --pds-color-tag-8-background: #0f5f6a;
179
+ --pds-color-tag-8-foreground: #f0fdff;
180
+ --pds-color-text-default: var(--pds-color-foreground-default);
181
+ --pds-color-text-default-secondary: #a6a3b4;
182
+ --pds-color-text-reverse: var(--pds-color-foreground-reverse);
183
+ --pds-color-tile-background-active: #858299;
184
+ --pds-color-tile-background-hover: #504e62;
185
+ --pds-color-tile-separator: #504e62;
186
+ --pds-color-toggle-button-background-off: #504e62;
187
+ --pds-color-toggle-button-foreground-off: #e7e7eb;
188
+ --pds-color-tooltip-background: #a6a3b4;
189
+ --pds-color-tooltip-text: #121219;
190
+ --pds-color-tooltip-trigger-icon-critical: #ca3521;
191
+ --pds-color-tooltip-trigger-icon-default: #e7e7eb;
96
192
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
97
193
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
98
194
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -10,11 +10,39 @@
10
10
  */
11
11
 
12
12
  :root {
13
+ --pds-color-background-brand-secondary: #e5dbff;
13
14
  --pds-color-background-default: #ffffff;
15
+ --pds-color-background-default-secondary: #f8f8f8;
16
+ --pds-color-background-reverse: #23232d;
17
+ --pds-color-badge-border: var(--pds-color-border-default);
18
+ --pds-color-badge-label: var(--pds-color-text-default-secondary);
19
+ --pds-color-badge-status-critical: var(--pds-color-semantic-critical-foreground);
20
+ --pds-color-badge-status-default: #cfcfd3;
21
+ --pds-color-badge-status-discovery: var(--pds-color-semantic-discovery-foreground);
22
+ --pds-color-badge-status-info: var(--pds-color-semantic-info-foreground);
23
+ --pds-color-badge-status-success: var(--pds-color-semantic-success-foreground);
24
+ --pds-color-badge-status-warning: var(--pds-color-semantic-warning-foreground);
25
+ --pds-color-badge-tier-diamond-background: #f0fdff;
26
+ --pds-color-badge-tier-diamond-foreground: #5f41e5;
27
+ --pds-color-badge-tier-gold-background: #fff1a9;
28
+ --pds-color-badge-tier-gold-foreground: #705e00;
29
+ --pds-color-badge-tier-platinum-background: #f0ecff;
30
+ --pds-color-badge-tier-platinum-foreground: #3017a1;
31
+ --pds-color-badge-tier-silver-background: #f1f1f1;
32
+ --pds-color-badge-tier-silver-foreground: var(--pds-color-text-default-secondary);
33
+ --pds-color-banner-critical-background: linear-gradient(135deg, #CA3521 0%, #B95898 100%);
34
+ --pds-color-banner-critical-foreground: #ffffff;
35
+ --pds-color-banner-info-background: linear-gradient(315deg, #1265DA 0%, #5F41E5 100%);
36
+ --pds-color-banner-info-foreground: #ffffff;
37
+ --pds-color-banner-warning-background: linear-gradient(135deg, #DDBD16 0%, #DB7612 100%);
38
+ --pds-color-banner-warning-foreground: #23232d;
14
39
  --pds-color-border-default: #cfcfd3;
15
40
  --pds-color-brand-accent-default: #de0093;
16
41
  --pds-color-brand-primary-default: #ffdc28;
17
42
  --pds-color-brand-secondary-default: #3017a1;
43
+ --pds-color-breadcrumb-link: var(--pds-color-link-default);
44
+ --pds-color-breadcrumb-separator: #cfcfd3;
45
+ --pds-color-breadcrumb-text: var(--pds-color-text-default-secondary);
18
46
  --pds-color-button-brand-background-active: #ddbd16;
19
47
  --pds-color-button-brand-background-default: #ffdc28;
20
48
  --pds-color-button-brand-background-hover: #ffe668;
@@ -24,75 +52,152 @@
24
52
  --pds-color-button-brand-foreground-active: #23232d;
25
53
  --pds-color-button-brand-foreground-default: #23232d;
26
54
  --pds-color-button-brand-foreground-hover: #23232d;
27
- --pds-color-button-critical-background-active: #700000;
28
- --pds-color-button-critical-background-default: #d61f1f;
29
- --pds-color-button-critical-background-hover: #f83333;
30
- --pds-color-button-critical-border-active: #700000;
31
- --pds-color-button-critical-border-default: #d61f1f;
32
- --pds-color-button-critical-border-hover: #f83333;
55
+ --pds-color-button-brand-secondary-background-active: #f1f1f1;
56
+ --pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
57
+ --pds-color-button-brand-secondary-background-hover: #f8f8f8;
58
+ --pds-color-button-brand-secondary-border-active: #23232d;
59
+ --pds-color-button-brand-secondary-border-default: #6d6d78;
60
+ --pds-color-button-brand-secondary-border-hover: #23232d;
61
+ --pds-color-button-brand-secondary-foreground-active: #23232d;
62
+ --pds-color-button-brand-secondary-foreground-default: #23232d;
63
+ --pds-color-button-brand-secondary-foreground-hover: #23232d;
64
+ --pds-color-button-critical-background-active: #b6301e;
65
+ --pds-color-button-critical-background-default: #ca3521;
66
+ --pds-color-button-critical-background-hover: #cf4937;
67
+ --pds-color-button-critical-border-active: #b6301e;
68
+ --pds-color-button-critical-border-default: #ca3521;
69
+ --pds-color-button-critical-border-hover: #cf4937;
33
70
  --pds-color-button-critical-foreground-active: #ffffff;
34
71
  --pds-color-button-critical-foreground-default: #ffffff;
35
72
  --pds-color-button-critical-foreground-hover: #ffffff;
73
+ --pds-color-button-navbar-foreground-active: #5f41e5;
74
+ --pds-color-button-navbar-foreground-default: #23232d;
75
+ --pds-color-button-navbar-foreground-hover: #5f41e5;
36
76
  --pds-color-button-primary-background-active: #11005d;
37
77
  --pds-color-button-primary-background-default: #3017a1;
38
- --pds-color-button-primary-background-hover: #785aff;
78
+ --pds-color-button-primary-background-hover: #5f41e5;
39
79
  --pds-color-button-primary-border-active: #11005d;
40
80
  --pds-color-button-primary-border-default: #3017a1;
41
- --pds-color-button-primary-border-hover: #785aff;
81
+ --pds-color-button-primary-border-hover: #5f41e5;
42
82
  --pds-color-button-primary-foreground-active: #ffffff;
43
83
  --pds-color-button-primary-foreground-default: #ffffff;
44
84
  --pds-color-button-primary-foreground-hover: #ffffff;
45
- --pds-color-button-secondary-background-active: #cfcfd3;
85
+ --pds-color-button-secondary-background-active: #e5dbff;
46
86
  --pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
47
87
  --pds-color-button-secondary-background-hover: #f0ecff;
48
88
  --pds-color-button-secondary-border-active: #11005d;
49
89
  --pds-color-button-secondary-border-default: #3017a1;
50
- --pds-color-button-secondary-border-hover: #785aff;
90
+ --pds-color-button-secondary-border-hover: #5f41e5;
51
91
  --pds-color-button-secondary-foreground-active: #11005d;
52
92
  --pds-color-button-secondary-foreground-default: #3017a1;
53
93
  --pds-color-button-secondary-foreground-hover: #3017a1;
54
94
  --pds-color-button-subtle-background-active: #cfcfd3;
55
95
  --pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
56
- --pds-color-button-subtle-background-hover: #f0ecff;
96
+ --pds-color-button-subtle-background-hover: #f1f1f1;
57
97
  --pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
58
- --pds-color-button-subtle-foreground-active: #11005d;
59
- --pds-color-button-subtle-foreground-default: #3017a1;
60
- --pds-color-button-subtle-foreground-hover: #3017a1;
98
+ --pds-color-button-subtle-foreground-active: #23232d;
99
+ --pds-color-button-subtle-foreground-default: #23232d;
100
+ --pds-color-button-subtle-foreground-hover: #23232d;
101
+ --pds-color-card-border: var(--pds-color-border-default);
102
+ --pds-color-expansion-panel-hover: #f1f1f1;
103
+ --pds-color-expansion-panel-open: #f1f1f1;
61
104
  --pds-color-foreground-default: #23232d;
62
- --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
63
- --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
64
- --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
65
- --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
105
+ --pds-color-foreground-reverse: #ffffff;
106
+ --pds-color-gradient-after-hours: linear-gradient(228.64deg, #1B0874 41.87%, #29B2FF 100%);
107
+ --pds-color-gradient-midnight: linear-gradient(228.64deg, #1B0874 46.34%, #00E0C3 100%);
108
+ --pds-color-gradient-sunrise: linear-gradient(227.79deg, #1B0874 38.28%, #E65F35 100%);
109
+ --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #1B0874 66.25%);
110
+ --pds-color-input-action-background-hover: #f8f8f8;
111
+ --pds-color-input-background-critical: #ffedeb;
66
112
  --pds-color-input-background-default: #ffffff;
67
- --pds-color-input-background-disabled: #cfcfd3;
68
- --pds-color-input-border-default: var(--pds-color-border-default);
69
- --pds-color-input-border-disabled: #aeaeb6;
113
+ --pds-color-input-background-hover: #f0ecff;
114
+ --pds-color-input-border-critical: #ca3521;
115
+ --pds-color-input-border-default: #cfcfd3;
116
+ --pds-color-input-border-hover: #5f41e5;
117
+ --pds-color-input-border-success: #218c5f;
118
+ --pds-color-input-checked-background: var(--pds-color-interactive-focus);
119
+ --pds-color-input-checked-foreground: #ffffff;
120
+ --pds-color-input-foreground-critical: #ca3521;
121
+ --pds-color-input-foreground-default: #23232d;
122
+ --pds-color-input-foreground-success: #218c5f;
123
+ --pds-color-input-placeholder-text: #6d6d78;
124
+ --pds-color-input-toggle-switch-icon: #ffffff;
125
+ --pds-color-input-toggle-switch-off: #6d6d78;
126
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
70
127
  --pds-color-interactive-focus: #0f62fe;
71
- --pds-color-link-active: #003cac;
128
+ --pds-color-interactive-link: #0f62fe;
129
+ --pds-color-interactive-reverse-focus: #36a3ff;
130
+ --pds-color-interactive-reverse-link: #36a3ff;
131
+ --pds-color-link-active: #5f41e5;
132
+ --pds-color-link-cta-active: #11005d;
133
+ --pds-color-link-cta-default: #3017a1;
134
+ --pds-color-link-cta-hover: #5f41e5;
72
135
  --pds-color-link-default: #0f62fe;
73
- --pds-color-link-hover: #003cac;
74
- --pds-color-link-visited: #967fff;
136
+ --pds-color-link-hover: #5f41e5;
137
+ --pds-color-link-visited: #5f41e5;
75
138
  --pds-color-menu-background: #ffffff;
76
- --pds-color-menu-item-background-active: #cfcfd3;
139
+ --pds-color-menu-item-background-active: #f1f1f1;
77
140
  --pds-color-menu-item-background-default: #ffffff;
78
141
  --pds-color-menu-item-background-hover: #f1f1f1;
79
- --pds-color-menu-item-description-text: #71717c;
142
+ --pds-color-menu-item-description-text: #6d6d78;
80
143
  --pds-color-menu-item-foreground: #23232d;
81
- --pds-color-menu-item-heading-text: #71717c;
144
+ --pds-color-menu-item-heading-text: #6d6d78;
145
+ --pds-color-neutral-000: #ffffff;
146
+ --pds-color-neutral-100: #f8f8f8;
147
+ --pds-color-neutral-200: #f1f1f1;
148
+ --pds-color-neutral-300: #cfcfd3;
149
+ --pds-color-neutral-400: #6d6d78;
150
+ --pds-color-neutral-500: #23232d;
151
+ --pds-color-pager-background-active: #f0ecff;
152
+ --pds-color-pager-background-hover: #f1f1f1;
153
+ --pds-color-pager-foreground-active: #5f41e5;
82
154
  --pds-color-panel-default-background: var(--pds-color-background-default);
83
155
  --pds-color-panel-default-border: var(--pds-color-border-default);
84
156
  --pds-color-panel-overlay-background: var(--pds-color-background-default);
85
- --pds-color-panel-overlay-border: var(--pds-color-border-default);
86
157
  --pds-color-panel-raised-background: var(--pds-color-background-default);
87
- --pds-color-panel-raised-border: var(--pds-color-border-default);
158
+ --pds-color-panel-raised-border: #f1f1f1;
88
159
  --pds-color-panel-sunken-background: #f1f1f1;
89
- --pds-color-panel-sunken-border: #f1f1f1;
90
- --pds-color-text-default: #23232d;
91
- --pds-color-text-headings: var(--pds-color-text-default);
92
- --pds-color-text-lead: #71717c;
93
- --pds-color-text-overline: #71717c;
94
- --pds-color-text-paragraph: #23232d;
95
- --pds-color-text-quote: #71717c;
96
- --pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
97
- --pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
160
+ --pds-color-semantic-critical-background: #ffedeb;
161
+ --pds-color-semantic-critical-foreground: #ca3521;
162
+ --pds-color-semantic-discovery-background: #eae6ff;
163
+ --pds-color-semantic-discovery-foreground: #8270db;
164
+ --pds-color-semantic-info-background: #e9f2ff;
165
+ --pds-color-semantic-info-foreground: #1d7afc;
166
+ --pds-color-semantic-success-background: #e3fcef;
167
+ --pds-color-semantic-success-foreground: #218c5f;
168
+ --pds-color-semantic-warning-background: #fff7d6;
169
+ --pds-color-semantic-warning-foreground: #d97008;
170
+ --pds-color-table-sort-arrow-active: #5f41e5;
171
+ --pds-color-table-sort-arrow-inactive: #cfcfd3;
172
+ --pds-color-tabs-accent: #5f41e5;
173
+ --pds-color-tag-1-background: #fffbe9;
174
+ --pds-color-tag-1-foreground: #705e00;
175
+ --pds-color-tag-2-background: #f0ecff;
176
+ --pds-color-tag-2-foreground: #3017a1;
177
+ --pds-color-tag-3-background: #ffe5f6;
178
+ --pds-color-tag-3-foreground: #9a0066;
179
+ --pds-color-tag-4-background: #f1f1f1;
180
+ --pds-color-tag-4-foreground: #6d6d78;
181
+ --pds-color-tag-5-background: #ffebeb;
182
+ --pds-color-tag-5-foreground: #700000;
183
+ --pds-color-tag-6-background: #fffae6;
184
+ --pds-color-tag-6-foreground: #b15902;
185
+ --pds-color-tag-7-background: #dffcf0;
186
+ --pds-color-tag-7-foreground: #164b35;
187
+ --pds-color-tag-8-background: #f0fdff;
188
+ --pds-color-tag-8-foreground: #0f5f6a;
189
+ --pds-color-text-default: var(--pds-color-foreground-default);
190
+ --pds-color-text-default-secondary: #6d6d78;
191
+ --pds-color-text-reverse: var(--pds-color-foreground-reverse);
192
+ --pds-color-tile-background-active: #f1f1f1;
193
+ --pds-color-tile-background-hover: #f8f8f8;
194
+ --pds-color-tile-separator: #cfcfd3;
195
+ --pds-color-toggle-button-background-off: #f1f1f1;
196
+ --pds-color-toggle-button-foreground-off: #6d6d78;
197
+ --pds-color-tooltip-background: #23232d;
198
+ --pds-color-tooltip-text: #ffffff;
199
+ --pds-color-tooltip-trigger-icon-critical: #ca3521;
200
+ --pds-color-tooltip-trigger-icon-default: #23232d;
201
+ --pds-elevation-overlay: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
202
+ --pds-elevation-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
98
203
  }
package/build/css/pds-design-tokens.css CHANGED
@@ -10,10 +10,71 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-animation-transition-delay: 0s;
14
- --pds-animation-transition-duration: 200ms;
15
- --pds-animation-transition-timing-function: ease-in-out;
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
+ --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
+ --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: 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);
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);
19
+ --pds-animation-transition-default-delay: 0s;
20
+ --pds-animation-transition-default-duration: 200ms;
21
+ --pds-animation-transition-default-timing-function: ease-in-out;
22
+ --pds-animation-transition-dropdown-duration: 300ms;
23
+ --pds-animation-transition-reveal-duration: 300ms;
24
+ --pds-border-radius-container: 0.375rem;
16
25
  --pds-border-radius-default: 0.1875rem;
17
26
  --pds-border-width-default: 1px;
27
+ --pds-container-max-width-narrow: 1024px;
28
+ --pds-container-max-width-standard: 1200px;
29
+ --pds-container-max-width-wide: 1440px;
30
+ --pds-container-max-width-x-wide: 1600px;
31
+ --pds-container-padding-large: 4%;
32
+ --pds-container-padding-medium: 4%;
33
+ --pds-container-padding-small: 5%;
34
+ --pds-grid-marketing-column-medium-large: 5.125%;
35
+ --pds-grid-marketing-column-small: 21.34375%;
36
+ --pds-grid-marketing-gap-medium-large: 3.5%;
37
+ --pds-grid-marketing-gap-small: 4.875%;
38
+ --pds-spacing-2xl: 1.953rem;
39
+ --pds-spacing-2xs: 0.512rem;
40
+ --pds-spacing-3xl: 2.441rem;
41
+ --pds-spacing-3xs: 0.41rem;
42
+ --pds-spacing-4xl: 3.052rem;
43
+ --pds-spacing-4xs: 0.328rem;
44
+ --pds-spacing-5xl: 3.815rem;
45
+ --pds-spacing-5xs: 0.25rem;
46
+ --pds-spacing-6xl: 4.678rem;
47
+ --pds-spacing-6xs: 0.125rem;
48
+ --pds-spacing-7xl: 5.96rem;
49
+ --pds-spacing-8xl: 7.451rem;
50
+ --pds-spacing-l: 1.25rem;
51
+ --pds-spacing-m: 1rem;
52
+ --pds-spacing-s: 0.8rem;
53
+ --pds-spacing-xl: 1.563rem;
54
+ --pds-spacing-xs: 0.64rem;
18
55
  --pds-typography-font-default: 'Poppins', sans-serif;
56
+ --pds-typography-font-secondary: 'Aleo', serif;
57
+ --pds-typography-font-weight-bold: 700;
58
+ --pds-typography-font-weight-extrabold: 800;
59
+ --pds-typography-font-weight-medium: 500;
60
+ --pds-typography-font-weight-regular: 400;
61
+ --pds-typography-font-weight-semibold: 600;
62
+ --pds-typography-letter-spacing-l: 0.04rem;
63
+ --pds-typography-letter-spacing-m: 0.02rem;
64
+ --pds-typography-letter-spacing-s: 0.01rem;
65
+ --pds-typography-letter-spacing-xl: 0.06rem;
66
+ --pds-typography-line-height-l: 170%;
67
+ --pds-typography-line-height-m: 140%;
68
+ --pds-typography-line-height-s: 120%;
69
+ --pds-typography-line-height-xl: 195%;
70
+ --pds-typography-multiplier-medium: 0.85;
71
+ --pds-typography-multiplier-small: 0.75;
72
+ --pds-typography-size-2xl: 1.728rem;
73
+ --pds-typography-size-3xl: 2.074rem;
74
+ --pds-typography-size-4xl: 3.052rem;
75
+ --pds-typography-size-l: 1.2rem;
76
+ --pds-typography-size-m: 1rem;
77
+ --pds-typography-size-s: 0.875rem;
78
+ --pds-typography-size-xl: 1.44rem;
79
+ --pds-typography-size-xs: 0.75rem;
19
80
  }