@pantheon-systems/pds-design-tokens 1.0.0-dev.47 → 1.0.0-dev.48

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 (6) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +15 -10
  2. package/build/css/pds-design-tokens-light-mode.css +24 -21
  3. package/build/figma/pds-design-tokens-figma.json +464 -822
  4. package/build/json/pds-design-tokens-dark-mode.json +223 -424
  5. package/build/json/pds-design-tokens-light-mode.json +241 -398
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -33,12 +33,12 @@
33
33
  --pds-color-button-brand-secondary-foreground-active: #e7e7eb;
34
34
  --pds-color-button-brand-secondary-foreground-default: #e7e7eb;
35
35
  --pds-color-button-brand-secondary-foreground-hover: #ffffff;
36
- --pds-color-button-critical-background-active: #9c2f2f;
37
- --pds-color-button-critical-background-default: #e05757;
38
- --pds-color-button-critical-background-hover: #be4242;
39
- --pds-color-button-critical-border-active: #9c2f2f;
40
- --pds-color-button-critical-border-default: #e05757;
41
- --pds-color-button-critical-border-hover: #be4242;
36
+ --pds-color-button-critical-background-active: #a74032;
37
+ --pds-color-button-critical-background-default: #ef5c48;
38
+ --pds-color-button-critical-background-hover: #bf4939;
39
+ --pds-color-button-critical-border-active: #a74032;
40
+ --pds-color-button-critical-border-default: #ef5c48;
41
+ --pds-color-button-critical-border-hover: #bf4939;
42
42
  --pds-color-button-critical-foreground-active: #ffffff;
43
43
  --pds-color-button-critical-foreground-default: #ffffff;
44
44
  --pds-color-button-critical-foreground-hover: #ffffff;
@@ -68,6 +68,8 @@
68
68
  --pds-color-button-subtle-foreground-default: #e7e7eb;
69
69
  --pds-color-button-subtle-foreground-hover: #ffffff;
70
70
  --pds-color-card-border: #504e62;
71
+ --pds-color-expansion-panel-hover: #282839;
72
+ --pds-color-expansion-panel-open: #282839;
71
73
  --pds-color-foreground-default: #ffffff;
72
74
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
73
75
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
@@ -77,15 +79,15 @@
77
79
  --pds-color-input-background-critical: #1d1d29;
78
80
  --pds-color-input-background-default: #1d1d29;
79
81
  --pds-color-input-background-hover: #282839;
80
- --pds-color-input-border-critical: #e05757;
82
+ --pds-color-input-border-critical: #ef5c48;
81
83
  --pds-color-input-border-default: #858299;
82
84
  --pds-color-input-border-hover: #ad9bff;
83
- --pds-color-input-border-success: #3cb683;
85
+ --pds-color-input-border-success: #2abb7f;
84
86
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
85
87
  --pds-color-input-checked-foreground: #ffffff;
86
- --pds-color-input-foreground-critical: #e05757;
88
+ --pds-color-input-foreground-critical: #ef5c48;
87
89
  --pds-color-input-foreground-default: #ffffff;
88
- --pds-color-input-foreground-success: #3cb683;
90
+ --pds-color-input-foreground-success: #2abb7f;
89
91
  --pds-color-input-placeholder-text: #a6a3b4;
90
92
  --pds-color-input-toggle-switch-icon: #ffffff;
91
93
  --pds-color-input-toggle-switch-off: #504e62;
@@ -118,6 +120,9 @@
118
120
  --pds-color-tile-separator: #504e62;
119
121
  --pds-color-toggle-button-background-off: #504e62;
120
122
  --pds-color-toggle-button-foreground-off: #c7c5d0;
123
+ --pds-color-utility-announcement: #9fadbc;
124
+ --pds-color-utility-critical: #f87462;
125
+ --pds-color-utility-warning: #e2b203;
121
126
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
122
127
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
123
128
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -10,8 +10,6 @@
10
10
  */
11
11
 
12
12
  :root {
13
- --pds-color-expansion-panel-hover: #f1f1f1;
14
- --pds-color-expansion-panel-open: #f1f1f1;
15
13
  --pds-color-background-default: #ffffff;
16
14
  --pds-color-border-default: #cfcfd3;
17
15
  --pds-color-brand-accent-default: #de0093;
@@ -35,12 +33,12 @@
35
33
  --pds-color-button-brand-secondary-foreground-active: #23232d;
36
34
  --pds-color-button-brand-secondary-foreground-default: #23232d;
37
35
  --pds-color-button-brand-secondary-foreground-hover: #23232d;
38
- --pds-color-button-critical-background-active: #700000;
39
- --pds-color-button-critical-background-default: #d61f1f;
40
- --pds-color-button-critical-background-hover: #f83333;
41
- --pds-color-button-critical-border-active: #700000;
42
- --pds-color-button-critical-border-default: #d61f1f;
43
- --pds-color-button-critical-border-hover: #f83333;
36
+ --pds-color-button-critical-background-active: #b53a2a;
37
+ --pds-color-button-critical-background-default: #e34935;
38
+ --pds-color-button-critical-background-hover: #e86d5d;
39
+ --pds-color-button-critical-border-active: #b53a2a;
40
+ --pds-color-button-critical-border-default: #e34935;
41
+ --pds-color-button-critical-border-hover: #e86d5d;
44
42
  --pds-color-button-critical-foreground-active: #ffffff;
45
43
  --pds-color-button-critical-foreground-default: #ffffff;
46
44
  --pds-color-button-critical-foreground-hover: #ffffff;
@@ -70,24 +68,26 @@
70
68
  --pds-color-button-subtle-foreground-default: #23232d;
71
69
  --pds-color-button-subtle-foreground-hover: #23232d;
72
70
  --pds-color-card-border: var(--pds-color-border-default);
71
+ --pds-color-expansion-panel-hover: #f1f1f1;
72
+ --pds-color-expansion-panel-open: #f1f1f1;
73
73
  --pds-color-foreground-default: #23232d;
74
74
  --pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
75
75
  --pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
76
76
  --pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
77
77
  --pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
78
78
  --pds-color-input-action-background-hover: #f8f8f8;
79
- --pds-color-input-background-critical: #ffebeb;
79
+ --pds-color-input-background-critical: #ffedeb;
80
80
  --pds-color-input-background-default: #ffffff;
81
81
  --pds-color-input-background-hover: #f0ecff;
82
- --pds-color-input-border-critical: #d61f1f;
82
+ --pds-color-input-border-critical: #e34935;
83
83
  --pds-color-input-border-default: #cfcfd3;
84
84
  --pds-color-input-border-hover: #5f41e5;
85
- --pds-color-input-border-success: #1f845a;
85
+ --pds-color-input-border-success: #218c5f;
86
86
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
87
87
  --pds-color-input-checked-foreground: #ffffff;
88
- --pds-color-input-foreground-critical: #d61f1f;
88
+ --pds-color-input-foreground-critical: #e34935;
89
89
  --pds-color-input-foreground-default: #23232d;
90
- --pds-color-input-foreground-success: #1f845a;
90
+ --pds-color-input-foreground-success: #218c5f;
91
91
  --pds-color-input-placeholder-text: #6d6d78;
92
92
  --pds-color-input-toggle-switch-icon: #ffffff;
93
93
  --pds-color-input-toggle-switch-off: #6d6d78;
@@ -123,14 +123,14 @@
123
123
  --pds-color-tag-3-foreground: #9a0066;
124
124
  --pds-color-tag-4-background: #f1f1f1;
125
125
  --pds-color-tag-4-foreground: #6d6d78;
126
- --pds-color-tag-5-background: #ffebeb;
127
- --pds-color-tag-5-foreground: #700000;
128
- --pds-color-tag-6-background: #fffae6;
129
- --pds-color-tag-6-foreground: #b15902;
130
- --pds-color-tag-7-background: #dffcf0;
131
- --pds-color-tag-7-foreground: #164b35;
132
- --pds-color-tag-8-background: #f0fdff;
133
- --pds-color-tag-8-foreground: #0f5f6a;
126
+ --pds-color-tag-5-background: #ffedeb;
127
+ --pds-color-tag-5-foreground: #e34935;
128
+ --pds-color-tag-6-background: #fff7d6;
129
+ --pds-color-tag-6-foreground: #d97008;
130
+ --pds-color-tag-7-background: #e3fcef;
131
+ --pds-color-tag-7-foreground: #218c5f;
132
+ --pds-color-tag-8-background: #e9f2ff;
133
+ --pds-color-tag-8-foreground: #1d7afc;
134
134
  --pds-color-text-default: #23232d;
135
135
  --pds-color-text-default-secondary: #6d6d78;
136
136
  --pds-color-tile-background-active: #f1f1f1;
@@ -138,6 +138,9 @@
138
138
  --pds-color-tile-separator: #cfcfd3;
139
139
  --pds-color-toggle-button-background-off: #f1f1f1;
140
140
  --pds-color-toggle-button-foreground-off: #6d6d78;
141
+ --pds-color-utility-announcement: #44546f;
142
+ --pds-color-utility-critical: #ca3521;
143
+ --pds-color-utility-warning: #e2b203;
141
144
  --pds-elevation-overlay: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
142
145
  --pds-elevation-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
143
146
  }