@pantheon-systems/pds-design-tokens 2.0.0-alpha.13 → 2.0.0-alpha.15

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 (9) hide show
  1. package/build/css/breakpoints.css +5 -5
  2. package/build/css/variables.dark.css +37 -37
  3. package/build/css/variables.global.css +23 -23
  4. package/build/css/variables.light.css +37 -37
  5. package/build/figma/tokens.json +2340 -2338
  6. package/build/js/variables.global.d.ts +26 -26
  7. package/build/js/variables.global.js +26 -26
  8. package/build/json/tokens.json +100 -100
  9. package/package.json +1 -1
package/build/css/breakpoints.css CHANGED
@@ -3,11 +3,11 @@
3
3
  */
4
4
 
5
5
  /* Standard min-width queries (mobile-first) */
6
- @custom-media --pds-bp-md (min-width: 768px);
7
- @custom-media --pds-bp-lg (min-width: 1280px);
6
+ @custom-media --pds-bp-m (min-width: 768px);
7
+ @custom-media --pds-bp-l (min-width: 1280px);
8
8
  @custom-media --pds-bp-xl (min-width: 1440px);
9
9
 
10
10
  /* Range queries (specific breakpoint only) */
11
- @custom-media --pds-bp-sm-only (max-width: 767px);
12
- @custom-media --pds-bp-md-only (min-width: 768px) and (max-width: 1279px);
13
- @custom-media --pds-bp-lg-only (min-width: 1280px) and (max-width: 1439px);
11
+ @custom-media --pds-bp-s-only (max-width: 767px);
12
+ @custom-media --pds-bp-m-only (min-width: 768px) and (max-width: 1279px);
13
+ @custom-media --pds-bp-l-only (min-width: 1280px) and (max-width: 1439px);
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);
@@ -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.global.css CHANGED
@@ -20,30 +20,30 @@
20
20
  --pds-border-radius-button: 3.5rem;
21
21
  --pds-border-radius-container: 0.375rem;
22
22
  --pds-border-radius-input: 0.25rem;
23
- --pds-container-modal-width-sm: 25rem;
24
- --pds-container-modal-width-md: 37.5rem;
25
- --pds-container-modal-width-lg: 47.5rem;
23
+ --pds-container-modal-width-s: 25rem;
24
+ --pds-container-modal-width-m: 37.5rem;
25
+ --pds-container-modal-width-l: 47.5rem;
26
26
  --pds-container-modal-width-xl: 67.5rem;
27
27
  --pds-container-tooltip-max-width: 12.5rem;
28
28
  --pds-container-dashboard-navbar-max-width: 1440px;
29
29
  --pds-container-padding-base: var(--pds-spacing-xl);
30
- --pds-container-padding-narrow-bp-md: 12%;
31
- --pds-container-padding-narrow-bp-lg: 20%;
32
- --pds-container-padding-standard-bp-md: 6%;
33
- --pds-container-padding-standard-bp-lg: 8%;
34
- --pds-container-padding-wide-bp-md: 5%;
35
- --pds-container-padding-wide-bp-lg: 4%;
30
+ --pds-container-padding-narrow-bp-m: 12%;
31
+ --pds-container-padding-narrow-bp-l: 20%;
32
+ --pds-container-padding-standard-bp-m: 6%;
33
+ --pds-container-padding-standard-bp-l: 8%;
34
+ --pds-container-padding-wide-bp-m: 5%;
35
+ --pds-container-padding-wide-bp-l: 4%;
36
36
  --pds-container-max-width-narrow: 1024px;
37
37
  --pds-container-max-width-standard: 1200px;
38
38
  --pds-container-max-width-wide: 1440px;
39
39
  --pds-container-max-width-x-wide: 1600px;
40
40
  --pds-grid-columns-4-gap: var(--pds-spacing-l);
41
- --pds-grid-columns-12-bp-md-gap-narrow: var(--pds-spacing-l);
42
- --pds-grid-columns-12-bp-md-gap-standard: var(--pds-spacing-xl);
43
- --pds-grid-columns-12-bp-md-gap-wide: var(--pds-spacing-2xl);
44
- --pds-grid-columns-12-bp-lg-gap-narrow: var(--pds-spacing-xl);
45
- --pds-grid-columns-12-bp-lg-gap-standard: var(--pds-spacing-2xl);
46
- --pds-grid-columns-12-bp-lg-gap-wide: var(--pds-spacing-3xl);
41
+ --pds-grid-columns-12-bp-m-gap-narrow: var(--pds-spacing-l);
42
+ --pds-grid-columns-12-bp-m-gap-standard: var(--pds-spacing-xl);
43
+ --pds-grid-columns-12-bp-m-gap-wide: var(--pds-spacing-2xl);
44
+ --pds-grid-columns-12-bp-l-gap-narrow: var(--pds-spacing-xl);
45
+ --pds-grid-columns-12-bp-l-gap-standard: var(--pds-spacing-2xl);
46
+ --pds-grid-columns-12-bp-l-gap-wide: var(--pds-spacing-3xl);
47
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
48
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
49
49
  --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
@@ -66,16 +66,16 @@
66
66
  --pds-spacing-4xs: 0.25rem;
67
67
  --pds-spacing-5xs: 0.125rem;
68
68
  --pds-spacing-button-height-xs: var(--pds-spacing-xl);
69
- --pds-spacing-button-height-sm: var(--pds-spacing-2xl);
70
- --pds-spacing-button-height-md: var(--pds-spacing-3xl);
71
- --pds-spacing-button-height-lg: var(--pds-spacing-4xl);
69
+ --pds-spacing-button-height-s: var(--pds-spacing-2xl);
70
+ --pds-spacing-button-height-m: var(--pds-spacing-3xl);
71
+ --pds-spacing-button-height-l: var(--pds-spacing-4xl);
72
72
  --pds-spacing-button-padding-inline-xs: var(--pds-spacing-s);
73
- --pds-spacing-button-padding-inline-sm: var(--pds-spacing-m);
74
- --pds-spacing-button-padding-inline-md: var(--pds-spacing-l);
75
- --pds-spacing-button-padding-inline-lg: var(--pds-spacing-xl);
73
+ --pds-spacing-button-padding-inline-s: var(--pds-spacing-m);
74
+ --pds-spacing-button-padding-inline-m: var(--pds-spacing-l);
75
+ --pds-spacing-button-padding-inline-l: var(--pds-spacing-xl);
76
76
  --pds-spacing-button-gap-inline-default: var(--pds-spacing-2xs);
77
- --pds-spacing-input-height-sm: var(--pds-spacing-2xl);
78
- --pds-spacing-input-height-md: var(--pds-spacing-3xl);
77
+ --pds-spacing-input-height-s: var(--pds-spacing-2xl);
78
+ --pds-spacing-input-height-m: var(--pds-spacing-3xl);
79
79
  --pds-z-index-navigation: 100;
80
80
  --pds-z-index-dropdown: 300;
81
81
  --pds-z-index-notifications: 500;
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);
@@ -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);