@pantheon-systems/pds-design-tokens 1.0.0-dev.56 → 1.0.0-dev.58

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 (8) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +9 -3
  2. package/build/css/pds-design-tokens-light-mode.css +15 -3
  3. package/build/css/pds-design-tokens.css +2 -8
  4. package/build/figma/pds-design-tokens-figma.json +590 -24
  5. package/build/json/pds-design-tokens-dark-mode.json +258 -9
  6. package/build/json/pds-design-tokens-light-mode.json +276 -15
  7. package/build/json/pds-design-tokens.json +60 -24
  8. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -11,6 +11,12 @@
11
11
 
12
12
  :root {
13
13
  --pds-color-background-default: #1d1d29;
14
+ --pds-color-banner-danger-background: #f87462;
15
+ --pds-color-banner-danger-foreground: #121219;
16
+ --pds-color-banner-info-background: #9fadbc;
17
+ --pds-color-banner-info-foreground: #121219;
18
+ --pds-color-banner-warning-background: #e2b203;
19
+ --pds-color-banner-warning-foreground: #121219;
14
20
  --pds-color-border-default: #504e62;
15
21
  --pds-color-brand-accent-default: #de0093;
16
22
  --pds-color-brand-primary-default: #ffdc28;
@@ -113,6 +119,9 @@
113
119
  --pds-color-panel-raised-background: #282839;
114
120
  --pds-color-panel-raised-border: var(--pds-color-border-default);
115
121
  --pds-color-panel-sunken-background: #121219;
122
+ --pds-color-table-sort-arrow-active: #6f54e8;
123
+ --pds-color-table-sort-arrow-inactive: #a6a3b4;
124
+ --pds-color-tabs-accent: #ad9bff;
116
125
  --pds-color-tag-1-background: #705e00;
117
126
  --pds-color-tag-1-foreground: #fffbe9;
118
127
  --pds-color-tag-2-background: #4e39a8;
@@ -140,9 +149,6 @@
140
149
  --pds-color-tooltip-text: #121219;
141
150
  --pds-color-tooltip-trigger-icon-critical: #ca3521;
142
151
  --pds-color-tooltip-trigger-icon-default: #c7c5d0;
143
- --pds-color-utility-announcement: #9fadbc;
144
- --pds-color-utility-critical: #f87462;
145
- --pds-color-utility-warning: #e2b203;
146
152
  --pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
147
153
  --pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
148
154
  }
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -11,6 +11,12 @@
11
11
 
12
12
  :root {
13
13
  --pds-color-background-default: #ffffff;
14
+ --pds-color-banner-danger-background: #ca3521;
15
+ --pds-color-banner-danger-foreground: #ffffff;
16
+ --pds-color-banner-info-background: #44546f;
17
+ --pds-color-banner-info-foreground: #ffffff;
18
+ --pds-color-banner-warning-background: #e2b203;
19
+ --pds-color-banner-warning-foreground: #23232d;
14
20
  --pds-color-border-default: #cfcfd3;
15
21
  --pds-color-brand-accent-default: #de0093;
16
22
  --pds-color-brand-primary-default: #ffdc28;
@@ -107,6 +113,12 @@
107
113
  --pds-color-menu-item-description-text: #6d6d78;
108
114
  --pds-color-menu-item-foreground: #23232d;
109
115
  --pds-color-menu-item-heading-text: #6d6d78;
116
+ --pds-color-neutral-000: #ffffff;
117
+ --pds-color-neutral-100: #f8f8f8;
118
+ --pds-color-neutral-200: #f1f1f1;
119
+ --pds-color-neutral-300: #cfcfd3;
120
+ --pds-color-neutral-400: #6d6d78;
121
+ --pds-color-neutral-500: #23232d;
110
122
  --pds-color-pager-background-active: #f0ecff;
111
123
  --pds-color-pager-background-hover: #f1f1f1;
112
124
  --pds-color-pager-foreground-active: #5f41e5;
@@ -116,6 +128,9 @@
116
128
  --pds-color-panel-raised-background: var(--pds-color-background-default);
117
129
  --pds-color-panel-raised-border: #f1f1f1;
118
130
  --pds-color-panel-sunken-background: #f1f1f1;
131
+ --pds-color-table-sort-arrow-active: #6f54e8;
132
+ --pds-color-table-sort-arrow-inactive: #cfcfd3;
133
+ --pds-color-tabs-accent: #5f41e5;
119
134
  --pds-color-tag-1-background: #fffbe9;
120
135
  --pds-color-tag-1-foreground: #705e00;
121
136
  --pds-color-tag-2-background: #f0ecff;
@@ -143,9 +158,6 @@
143
158
  --pds-color-tooltip-text: #ffffff;
144
159
  --pds-color-tooltip-trigger-icon-critical: #ca3521;
145
160
  --pds-color-tooltip-trigger-icon-default: #23232d;
146
- --pds-color-utility-announcement: #44546f;
147
- --pds-color-utility-critical: #ca3521;
148
- --pds-color-utility-warning: #e2b203;
149
161
  --pds-elevation-overlay: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px 0px rgba(0, 0, 0, 0.15);
150
162
  --pds-elevation-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
151
163
  }
package/build/css/pds-design-tokens.css CHANGED
@@ -17,6 +17,8 @@
17
17
  --pds-border-radius-container: 0.375rem;
18
18
  --pds-border-radius-default: 0.1875rem;
19
19
  --pds-border-width-default: 1px;
20
+ --pds-container-marketing-padding-medium-large: 5%;
21
+ --pds-container-marketing-padding-small: 4%;
20
22
  --pds-grid-marketing-column-medium-large: 5.125%;
21
23
  --pds-grid-marketing-column-small: 21.34375%;
22
24
  --pds-grid-marketing-gap-medium-large: 3.5%;
@@ -55,12 +57,4 @@
55
57
  --pds-typography-line-height-xl: 195%;
56
58
  --pds-typography-multiplier-medium: 0.85;
57
59
  --pds-typography-multiplier-small: 0.75;
58
- --pds-typography-size-2xl: 1.953em;
59
- --pds-typography-size-3xl: 2.441em;
60
- --pds-typography-size-4xl: 3.052em;
61
- --pds-typography-size-l: 1.25em;
62
- --pds-typography-size-m: 1em;
63
- --pds-typography-size-s: 0.875em;
64
- --pds-typography-size-xl: 1.563em;
65
- --pds-typography-size-xs: 0.75em;
66
60
  }