@pantheon-systems/pds-design-tokens 2.0.0-alpha.14 → 2.0.0-alpha.16

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 (4) hide show
  1. package/build/css/variables.dark.css +44 -44
  2. package/build/css/variables.light.css +44 -44
  3. package/build/figma/tokens.json +2314 -2312
  4. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -27,43 +27,6 @@
27
27
  --pds-color-banner-warning-foreground: oklch(0.8388 0.003 264.54);
28
28
  --pds-color-banner-critical-background: oklch(0.8326 0.0742 24.95);
29
29
  --pds-color-banner-critical-foreground: oklch(0.8388 0.003 264.54);
30
- --pds-color-button-primary-background-default: oklch(0.8388 0.003 264.54);
31
- --pds-color-button-primary-background-hover: oklch(0.5991 0.0051 258.33);
32
- --pds-color-button-primary-foreground: oklch(0.1489 0.0027 248.08);
33
- --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
34
- --pds-color-button-secondary-background-hover: oklch(0.2433 0.0041 264.49);
35
- --pds-color-button-secondary-border: oklch(0.4235 0.0071 264.49);
36
- --pds-color-button-secondary-foreground: oklch(0.8388 0.003 264.54);
37
- --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
38
- --pds-color-button-subtle-background-hover: oklch(0.2433 0.0041 264.49);
39
- --pds-color-button-subtle-foreground: oklch(0.8388 0.003 264.54);
40
- --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
41
- --pds-color-button-brand-background-hover: oklch(0.6533 0.1351 98.32);
42
- --pds-color-button-brand-foreground: oklch(0.1489 0.0027 248.08);
43
- --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
44
- --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
45
- --pds-color-button-critical-foreground: oklch(1.0000 0 0);
46
- --pds-color-button-critical-secondary-background-default: oklch(0.3866 0.145 30.09);
47
- --pds-color-button-critical-secondary-background-hover: oklch(0.5103 0.1942 29.6);
48
- --pds-color-button-critical-secondary-border-default: oklch(0.3866 0.145 30.09);
49
- --pds-color-button-critical-secondary-border-hover: oklch(0.5103 0.1942 29.6);
50
- --pds-color-button-critical-secondary-foreground: oklch(0.8326 0.0742 24.95);
51
- --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
52
- --pds-color-button-navbar-background-hover: oklch(0.2433 0.0041 264.49);
53
- --pds-color-button-navbar-foreground: oklch(0.8388 0.003 264.54);
54
- --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
55
- --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
56
- --pds-color-icon-button-reverse-background-hover: #474954;
57
- --pds-color-icon-button-reverse-background-active: #6a6e7a;
58
- --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
59
- --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-foreground);
60
- --pds-color-segmented-button-background-default: oklch(0.2433 0.0041 264.49);
61
- --pds-color-segmented-button-background-active: oklch(0.2046 0 0);
62
- --pds-color-segmented-button-background-hover: oklch(0.2046 0 0);
63
- --pds-color-segmented-button-border-active: #9786E2;
64
- --pds-color-segmented-button-foreground-default: oklch(0.5991 0.0051 258.33);
65
- --pds-color-segmented-button-foreground-active: #9786E2;
66
- --pds-color-segmented-button-foreground-hover: #9786E2;
67
30
  --pds-color-card-background: oklch(0.2046 0 0);
68
31
  --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
69
32
  --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
@@ -98,15 +61,15 @@
98
61
  --pds-color-panel-overlay-background: oklch(0.2046 0 0);
99
62
  --pds-color-expansion-panel-hover: oklch(0.2929 0.0039 264.51);
100
63
  --pds-color-expansion-panel-open: oklch(0.2929 0.0039 264.51);
101
- --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
102
- --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
103
- --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
104
- --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
64
+ --pds-color-spinner-full-1: #7600D9;
65
+ --pds-color-spinner-full-2: #A69000;
66
+ --pds-color-spinner-full-3: transparent;
67
+ --pds-color-spinner-mono-1: #FFFFFF;
105
68
  --pds-color-spinner-mono-2: #ffffff80;
106
- --pds-color-spinner-mono-3: oklch(1.0000 0 0);
107
- --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
69
+ --pds-color-spinner-mono-3: transparent;
70
+ --pds-color-spinner-mono-reverse-1: #171717;
108
71
  --pds-color-spinner-mono-reverse-2: #66666680;
109
- --pds-color-spinner-mono-reverse-3: oklch(0.2046 0 0);
72
+ --pds-color-spinner-mono-reverse-3: transparent;
110
73
  --pds-color-tag-1-background: #DED8FA;
111
74
  --pds-color-tag-1-foreground: #5C4FAC;
112
75
  --pds-color-tag-2-background: #F8D7D3;
@@ -155,6 +118,43 @@
155
118
  --pds-color-border-brand: #9786E2;
156
119
  --pds-color-border-input: oklch(0.4235 0.0071 264.49);
157
120
  --pds-color-border-separator: oklch(0.4235 0.0071 264.49);
121
+ --pds-color-button-primary-background-default: oklch(0.8388 0.003 264.54);
122
+ --pds-color-button-primary-background-hover: oklch(0.5991 0.0051 258.33);
123
+ --pds-color-button-primary-foreground: oklch(0.1489 0.0027 248.08);
124
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
125
+ --pds-color-button-secondary-background-hover: oklch(0.2433 0.0041 264.49);
126
+ --pds-color-button-secondary-border: oklch(0.4235 0.0071 264.49);
127
+ --pds-color-button-secondary-foreground: oklch(0.8388 0.003 264.54);
128
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
129
+ --pds-color-button-subtle-background-hover: oklch(0.2433 0.0041 264.49);
130
+ --pds-color-button-subtle-foreground: oklch(0.8388 0.003 264.54);
131
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
132
+ --pds-color-button-brand-background-hover: oklch(0.6533 0.1351 98.32);
133
+ --pds-color-button-brand-foreground: oklch(0.1489 0.0027 248.08);
134
+ --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
135
+ --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
136
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
137
+ --pds-color-button-critical-secondary-background-default: oklch(0.3866 0.145 30.09);
138
+ --pds-color-button-critical-secondary-background-hover: oklch(0.5103 0.1942 29.6);
139
+ --pds-color-button-critical-secondary-border-default: oklch(0.3866 0.145 30.09);
140
+ --pds-color-button-critical-secondary-border-hover: oklch(0.5103 0.1942 29.6);
141
+ --pds-color-button-critical-secondary-foreground: oklch(0.8326 0.0742 24.95);
142
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
143
+ --pds-color-button-navbar-background-hover: oklch(0.2433 0.0041 264.49);
144
+ --pds-color-button-navbar-foreground: oklch(0.8388 0.003 264.54);
145
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
146
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
147
+ --pds-color-icon-button-reverse-background-hover: #474954;
148
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
149
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
150
+ --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-foreground);
151
+ --pds-color-segmented-button-background-default: oklch(0.2433 0.0041 264.49);
152
+ --pds-color-segmented-button-background-active: oklch(0.2046 0 0);
153
+ --pds-color-segmented-button-background-hover: oklch(0.2046 0 0);
154
+ --pds-color-segmented-button-border-active: #9786E2;
155
+ --pds-color-segmented-button-foreground-default: oklch(0.5991 0.0051 258.33);
156
+ --pds-color-segmented-button-foreground-active: #9786E2;
157
+ --pds-color-segmented-button-foreground-hover: #9786E2;
158
158
  --pds-color-code-inline-background: oklch(0.2433 0.0041 264.49);
159
159
  --pds-color-code-inline-border: oklch(0.2929 0.0039 264.51);
160
160
  --pds-color-code-inline-text: #ffffff;
package/build/css/variables.light.css CHANGED
@@ -27,43 +27,6 @@
27
27
  --pds-color-banner-warning-foreground: oklch(0.2046 0 0);
28
28
  --pds-color-banner-critical-background: oklch(0.5103 0.1942 29.6);
29
29
  --pds-color-banner-critical-foreground: oklch(0.9851 0 0);
30
- --pds-color-button-primary-background-default: oklch(0.2046 0 0);
31
- --pds-color-button-primary-background-hover: oklch(0.3715 0 0);
32
- --pds-color-button-primary-foreground: var(--pds-color-fg-reverse);
33
- --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
34
- --pds-color-button-secondary-background-hover: oklch(0.9401 0 0);
35
- --pds-color-button-secondary-border: oklch(0.8853 0 0);
36
- --pds-color-button-secondary-foreground: oklch(0.2046 0 0);
37
- --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
38
- --pds-color-button-subtle-background-hover: oklch(0.9401 0 0);
39
- --pds-color-button-subtle-foreground: oklch(0.2046 0 0);
40
- --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
41
- --pds-color-button-brand-background-hover: oklch(0.9101 0.1759 98.94);
42
- --pds-color-button-brand-foreground: oklch(0.2046 0 0);
43
- --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
44
- --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
45
- --pds-color-button-critical-foreground: oklch(1.0000 0 0);
46
- --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
47
- --pds-color-button-critical-secondary-background-hover: var(--pds-color-ares-100);
48
- --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
49
- --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
50
- --pds-color-button-critical-secondary-foreground: var(--pds-color-ares-400);
51
- --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
52
- --pds-color-button-navbar-background-hover: oklch(1.0000 0 0);
53
- --pds-color-button-navbar-foreground: oklch(0.2046 0 0);
54
- --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
55
- --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
56
- --pds-color-icon-button-reverse-background-hover: #474954;
57
- --pds-color-icon-button-reverse-background-active: #6a6e7a;
58
- --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
59
- --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-border);
60
- --pds-color-segmented-button-background-default: oklch(0.9851 0 0);
61
- --pds-color-segmented-button-background-active: #F4F3FC;
62
- --pds-color-segmented-button-background-hover: #F4F3FC;
63
- --pds-color-segmented-button-border-active: #4F32CE;
64
- --pds-color-segmented-button-foreground-default: oklch(0.8047 0 0);
65
- --pds-color-segmented-button-foreground-active: #4F32CE;
66
- --pds-color-segmented-button-foreground-hover: #4F32CE;
67
30
  --pds-color-card-background: oklch(0.9851 0 0);
68
31
  --pds-color-code-block-dark-background: var(--pds-color-bg-reverse);
69
32
  --pds-color-code-block-dark-foreground: var(--pds-color-fg-reverse);
@@ -98,15 +61,15 @@
98
61
  --pds-color-panel-overlay-background: oklch(0.9851 0 0);
99
62
  --pds-color-expansion-panel-hover: oklch(0.9702 0 0);
100
63
  --pds-color-expansion-panel-open: oklch(0.9702 0 0);
101
- --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
102
- --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
103
- --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
104
- --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
64
+ --pds-color-spinner-full-1: #8f00f9;
65
+ --pds-color-spinner-full-2: #ffdc28;
66
+ --pds-color-spinner-full-3: transparent;
67
+ --pds-color-spinner-mono-1: #171717;
105
68
  --pds-color-spinner-mono-2: #66666680;
106
- --pds-color-spinner-mono-3: oklch(0.2046 0 0);
107
- --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
69
+ --pds-color-spinner-mono-3: transparent;
70
+ --pds-color-spinner-mono-reverse-1: #FFFFFF;
108
71
  --pds-color-spinner-mono-reverse-2: #ffffff80;
109
- --pds-color-spinner-mono-reverse-3: oklch(1.0000 0 0);
72
+ --pds-color-spinner-mono-reverse-3: transparent;
110
73
  --pds-color-tag-1-background: #DED8FA;
111
74
  --pds-color-tag-1-foreground: #5C4FAC;
112
75
  --pds-color-tag-2-background: #F8D7D3;
@@ -155,6 +118,43 @@
155
118
  --pds-color-border-brand: #E5E0F8;
156
119
  --pds-color-border-input: oklch(0.8853 0 0);
157
120
  --pds-color-border-separator: oklch(0.8853 0 0);
121
+ --pds-color-button-primary-background-default: oklch(0.2046 0 0);
122
+ --pds-color-button-primary-background-hover: oklch(0.3715 0 0);
123
+ --pds-color-button-primary-foreground: var(--pds-color-fg-reverse);
124
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
125
+ --pds-color-button-secondary-background-hover: oklch(0.9401 0 0);
126
+ --pds-color-button-secondary-border: oklch(0.8853 0 0);
127
+ --pds-color-button-secondary-foreground: oklch(0.2046 0 0);
128
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
129
+ --pds-color-button-subtle-background-hover: oklch(0.9401 0 0);
130
+ --pds-color-button-subtle-foreground: oklch(0.2046 0 0);
131
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
132
+ --pds-color-button-brand-background-hover: oklch(0.9101 0.1759 98.94);
133
+ --pds-color-button-brand-foreground: oklch(0.2046 0 0);
134
+ --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
135
+ --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
136
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
137
+ --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
138
+ --pds-color-button-critical-secondary-background-hover: oklch(0.9645 0.0174 21.81);
139
+ --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
140
+ --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
141
+ --pds-color-button-critical-secondary-foreground: oklch(0.5856 0.2126 29.44);
142
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
143
+ --pds-color-button-navbar-background-hover: oklch(1.0000 0 0);
144
+ --pds-color-button-navbar-foreground: oklch(0.2046 0 0);
145
+ --pds-color-icon-button-standard-background-hover: var(--pds-color-interactive-background-hover);
146
+ --pds-color-icon-button-standard-background-active: var(--pds-color-interactive-background-active);
147
+ --pds-color-icon-button-reverse-background-hover: #474954;
148
+ --pds-color-icon-button-reverse-background-active: #6a6e7a;
149
+ --pds-color-icon-button-critical-background-hover: var(--pds-color-status-critical-background);
150
+ --pds-color-icon-button-critical-background-active: var(--pds-color-status-critical-border);
151
+ --pds-color-segmented-button-background-default: oklch(0.9851 0 0);
152
+ --pds-color-segmented-button-background-active: #F4F3FC;
153
+ --pds-color-segmented-button-background-hover: #F4F3FC;
154
+ --pds-color-segmented-button-border-active: #4F32CE;
155
+ --pds-color-segmented-button-foreground-default: oklch(0.8047 0 0);
156
+ --pds-color-segmented-button-foreground-active: #4F32CE;
157
+ --pds-color-segmented-button-foreground-hover: #4F32CE;
158
158
  --pds-color-code-inline-background: #F4F3FC;
159
159
  --pds-color-code-inline-border: #E5E0F8;
160
160
  --pds-color-code-inline-text: oklch(0.2046 0 0);