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

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 +31 -10
  2. package/build/css/pds-design-tokens-light-mode.css +16 -13
  3. package/build/figma/pds-design-tokens-figma.json +1344 -1284
  4. package/build/json/pds-design-tokens-dark-mode.json +885 -652
  5. package/build/json/pds-design-tokens-light-mode.json +241 -414
  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: #ca3521;
38
+ --pds-color-button-critical-background-hover: #bf4939;
39
+ --pds-color-button-critical-border-active: #a74032;
40
+ --pds-color-button-critical-border-default: #ca3521;
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: #ca3521;
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: #ca3521;
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;
@@ -111,6 +113,22 @@
111
113
  --pds-color-panel-raised-background: #282839;
112
114
  --pds-color-panel-raised-border: var(--pds-color-border-default);
113
115
  --pds-color-panel-sunken-background: #121219;
116
+ --pds-color-tag-1-background: #705e00;
117
+ --pds-color-tag-1-foreground: #fffbe9;
118
+ --pds-color-tag-2-background: #4e39a8;
119
+ --pds-color-tag-2-foreground: #f3f0ff;
120
+ --pds-color-tag-3-background: #560039;
121
+ --pds-color-tag-3-foreground: #ffe5f6;
122
+ --pds-color-tag-4-background: #504e62;
123
+ --pds-color-tag-4-foreground: #c7c5d0;
124
+ --pds-color-tag-5-background: #700000;
125
+ --pds-color-tag-5-foreground: #ffebeb;
126
+ --pds-color-tag-6-background: #b15902;
127
+ --pds-color-tag-6-foreground: #fffae6;
128
+ --pds-color-tag-7-background: #164b35;
129
+ --pds-color-tag-7-foreground: #dffcf0;
130
+ --pds-color-tag-8-background: #0f5f6a;
131
+ --pds-color-tag-8-foreground: #f0fdff;
114
132
  --pds-color-text-default: #ffffff;
115
133
  --pds-color-text-default-secondary: #a6a3b4;
116
134
  --pds-color-tile-background-active: #858299;
@@ -118,6 +136,9 @@
118
136
  --pds-color-tile-separator: #504e62;
119
137
  --pds-color-toggle-button-background-off: #504e62;
120
138
  --pds-color-toggle-button-foreground-off: #c7c5d0;
139
+ --pds-color-utility-announcement: #9fadbc;
140
+ --pds-color-utility-critical: #f87462;
141
+ --pds-color-utility-warning: #e2b203;
121
142
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
122
143
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
123
144
  }
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: #ca3521;
38
+ --pds-color-button-critical-background-hover: #e86d5d;
39
+ --pds-color-button-critical-border-active: #b53a2a;
40
+ --pds-color-button-critical-border-default: #ca3521;
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: #ca3521;
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: #ca3521;
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;
@@ -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
  }