@pantheon-systems/pds-design-tokens 2.0.0-alpha.2 → 2.0.0-alpha.20

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 (16) hide show
  1. package/README.md +102 -30
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.dark.css +57 -46
  4. package/build/css/variables.global.css +52 -52
  5. package/build/css/variables.light.css +55 -44
  6. package/build/css/variables.typography.css +34 -0
  7. package/build/figma/tokens.json +3967 -4407
  8. package/build/js/variables.global.d.ts +115 -0
  9. package/build/js/variables.global.js +115 -0
  10. package/build/js/variables.typography.d.ts +65 -0
  11. package/build/js/variables.typography.js +52 -0
  12. package/build/json/tokens.json +972 -317
  13. package/package.json +22 -2
  14. package/build/css/variables.compact.css +0 -17
  15. package/build/css/variables.expanded.css +0 -17
  16. package/build/js/variables.js +0 -121
package/README.md CHANGED
@@ -30,9 +30,8 @@ Import the token files you need:
30
30
  @import '@pantheon-systems/pds-design-tokens/build/css/variables.light.css';
31
31
  @import '@pantheon-systems/pds-design-tokens/build/css/variables.dark.css';
32
32
 
33
- /* Required: Typography scale (both files) */
34
- @import '@pantheon-systems/pds-design-tokens/build/css/variables.compact.css';
35
- @import '@pantheon-systems/pds-design-tokens/build/css/variables.expanded.css';
33
+ /* Required: Typography sizes */
34
+ @import '@pantheon-systems/pds-design-tokens/build/css/variables.typography.css';
36
35
  ```
37
36
 
38
37
  Use tokens in your styles:
@@ -41,31 +40,120 @@ Use tokens in your styles:
41
40
  .my-component {
42
41
  color: var(--pds-color-fg-default);
43
42
  background: var(--pds-color-bg-default);
44
- padding: var(--pds-spacing-M);
43
+ padding: var(--pds-spacing-m);
45
44
  font-family: var(--pds-typography-ff-sans);
46
45
  }
47
46
  ```
48
47
 
48
+ #### Using Breakpoints
49
+
50
+ Breakpoint custom media queries require PostCSS configuration and a CSS import.
51
+
52
+ **Step 1: Install required plugins**
53
+
54
+ ```bash
55
+ npm install postcss-custom-media @csstools/postcss-global-data --save-dev
56
+ ```
57
+
58
+ **Step 2: Import breakpoints in your global CSS file**
59
+
60
+ ```css
61
+ /* In your main/global CSS file */
62
+ @import '@pantheon-systems/pds-design-tokens/build/css/breakpoints.css';
63
+ ```
64
+
65
+ **Step 3: Configure PostCSS**
66
+
67
+ ```javascript
68
+ // postcss.config.js
69
+ import postcssGlobalData from '@csstools/postcss-global-data';
70
+ import postcssCustomMedia from 'postcss-custom-media';
71
+
72
+ export default {
73
+ plugins: [
74
+ postcssGlobalData({
75
+ files: [
76
+ 'node_modules/@pantheon-systems/pds-design-tokens/build/css/breakpoints.css',
77
+ ],
78
+ }),
79
+ postcssCustomMedia,
80
+ // ... other plugins
81
+ ],
82
+ };
83
+ ```
84
+
85
+ **Step 4: Use breakpoints in your CSS**
86
+
87
+ ```css
88
+ .my-component {
89
+ padding: var(--pds-spacing-s);
90
+ }
91
+
92
+ @media (--pds-bp-md) {
93
+ .my-component {
94
+ padding: var(--pds-spacing-l);
95
+ }
96
+ }
97
+ ```
98
+
49
99
  ### JavaScript Constants
50
100
 
51
- Import tokens as JavaScript constants:
101
+ Import tokens as JavaScript constants from the appropriate file:
52
102
 
53
103
  ```javascript
104
+ // Import global tokens (colors, borders, spacing, z-index, etc.)
54
105
  import {
55
- COLOR_FG_DEFAULT,
106
+ BORDER_RADIUS_DEFAULT,
56
107
  SPACING_M,
108
+ Z_INDEX_MODAL,
109
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
110
+
111
+ // Import typography tokens (font families, weights, sizes, line heights, letter spacing)
112
+ import {
57
113
  TYPOGRAPHY_FF_SANS,
114
+ TYPOGRAPHY_FW_BOLD,
58
115
  TYPOGRAPHY_SIZE_XL,
59
- } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
116
+ TYPOGRAPHY_LH_M,
117
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
60
118
 
61
119
  const styles = {
62
- color: COLOR_FG_DEFAULT,
63
120
  padding: SPACING_M,
64
121
  fontFamily: TYPOGRAPHY_FF_SANS,
122
+ fontWeight: TYPOGRAPHY_FW_BOLD,
65
123
  fontSize: TYPOGRAPHY_SIZE_XL,
124
+ lineHeight: TYPOGRAPHY_LH_M,
125
+ borderRadius: BORDER_RADIUS_DEFAULT,
66
126
  };
67
127
  ```
68
128
 
129
+ **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`, `TYPOGRAPHY_SIZE_XL = "1.25rem"`).
130
+
131
+ **File organization:**
132
+
133
+ - `variables.global.js` - Global tokens (colors, borders, spacing scale, z-index, animations, etc.)
134
+ - `variables.typography.js` - Typography tokens (font families, weights, sizes, line heights, letter spacing)
135
+
136
+ #### Spacing Scale Object
137
+
138
+ For convenience, spacing scale tokens (8XS → 8XL) are available as a grouped object in the global file:
139
+
140
+ ```javascript
141
+ import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
142
+
143
+ const padding = SPACING.SPACING_M; // "1rem"
144
+ const margin = SPACING.SPACING_2XL; // "1.728rem"
145
+ ```
146
+
147
+ #### Typography Scale Object
148
+
149
+ Typography size tokens are available as a grouped object:
150
+
151
+ ```javascript
152
+ import { TYPOGRAPHY_SIZE } from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
153
+
154
+ const fontSize = TYPOGRAPHY_SIZE.TYPOGRAPHY_SIZE_XL; // "1.25rem"
155
+ ```
156
+
69
157
  ### JSON
70
158
 
71
159
  Access token metadata programmatically:
@@ -76,12 +164,12 @@ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
76
164
 
77
165
  ## Available Formats
78
166
 
79
- | Format | Location | Use Case |
80
- | ------------------------- | -------------- | --------------------------------------- |
81
- | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
82
- | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
83
- | **JSON** | `build/json/` | Programmatic access, build tools |
84
- | **Figma** | `build/figma/` | Design tool integration |
167
+ | Format | Location | Use Case |
168
+ | ------------------------- | -------------- | -------------------------------------- |
169
+ | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
170
+ | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
171
+ | **JSON** | `build/json/` | Programmatic access, build tools |
172
+ | **Figma** | `build/figma/` | Design tool integration |
85
173
 
86
174
  ## Theming
87
175
 
@@ -101,22 +189,6 @@ Control color themes with the `data-theme` attribute:
101
189
  </body>
102
190
  ```
103
191
 
104
- ### Type Scale (Compact/Expanded)
105
-
106
- Control typography scale with the `data-scale` attribute:
107
-
108
- ```html
109
- <!-- Compact scale (default) -->
110
- <body data-scale="compact">
111
- <h1 style="font-size: var(--pds-typography-size-xl);">Compact</h1>
112
- </body>
113
-
114
- <!-- Expanded scale -->
115
- <body data-scale="expanded">
116
- <h1 style="font-size: var(--pds-typography-size-xl);">Expanded</h1>
117
- </body>
118
- ```
119
-
120
192
  ## Token Categories
121
193
 
122
194
  - **Animation** - Durations, delays, timing functions
package/build/css/breakpoints.css ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ /* Standard min-width queries (mobile-first) */
6
+ @custom-media --pds-bp-m (min-width: 768px);
7
+ @custom-media --pds-bp-l (min-width: 1280px);
8
+ @custom-media --pds-bp-xl (min-width: 1440px);
9
+
10
+ /* Range queries (specific breakpoint only) */
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);
@@ -98,15 +61,18 @@
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;
73
+ --pds-color-spinner-critical-secondary-1: #e86b61;
74
+ --pds-color-spinner-critical-secondary-2: #de2e21;
75
+ --pds-color-spinner-critical-secondary-3: transparent;
110
76
  --pds-color-tag-1-background: #DED8FA;
111
77
  --pds-color-tag-1-foreground: #5C4FAC;
112
78
  --pds-color-tag-2-background: #F8D7D3;
@@ -155,6 +121,51 @@
155
121
  --pds-color-border-brand: #9786E2;
156
122
  --pds-color-border-input: oklch(0.4235 0.0071 264.49);
157
123
  --pds-color-border-separator: oklch(0.4235 0.0071 264.49);
124
+ --pds-color-button-primary-background-default: oklch(1.0000 0 0);
125
+ --pds-color-button-primary-background-hover: oklch(0.8388 0.003 264.54);
126
+ --pds-color-button-primary-foreground: oklch(0.1489 0.0027 248.08);
127
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
128
+ --pds-color-button-secondary-background-hover: oklch(0.2929 0.0039 264.51);
129
+ --pds-color-button-secondary-border: oklch(0.4235 0.0071 264.49);
130
+ --pds-color-button-secondary-foreground: oklch(1.0000 0 0);
131
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
132
+ --pds-color-button-subtle-background-hover: oklch(0.2929 0.0039 264.51);
133
+ --pds-color-button-subtle-foreground: oklch(1.0000 0 0);
134
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
135
+ --pds-color-button-brand-background-hover: oklch(0.6533 0.1351 98.32);
136
+ --pds-color-button-brand-foreground: oklch(0.1489 0.0027 248.08);
137
+ --pds-color-button-critical-background-default: oklch(0.5856 0.2126 29.44);
138
+ --pds-color-button-critical-background-hover: oklch(0.5103 0.1942 29.6);
139
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
140
+ --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
141
+ --pds-color-button-critical-secondary-background-hover: #80120866;
142
+ --pds-color-button-critical-secondary-border-default: oklch(0.3866 0.145 30.09);
143
+ --pds-color-button-critical-secondary-border-hover: oklch(0.3866 0.145 30.09);
144
+ --pds-color-button-critical-secondary-foreground: oklch(0.6766 0.1572 26.68);
145
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
146
+ --pds-color-button-navbar-background-hover: oklch(0.2433 0.0041 264.49);
147
+ --pds-color-button-navbar-foreground: oklch(0.8388 0.003 264.54);
148
+ --pds-color-icon-button-standard-background-default: rgba(255, 255, 255, 0.00);
149
+ --pds-color-icon-button-standard-background-hover: #ffffff1a;
150
+ --pds-color-icon-button-standard-border-default: #ffffff1a;
151
+ --pds-color-icon-button-standard-border-hover: #ffffff26;
152
+ --pds-color-icon-button-standard-foreground: oklch(1.0000 0 0);
153
+ --pds-color-icon-button-critical-background-default: oklch(0.5856 0.2126 29.44);
154
+ --pds-color-icon-button-critical-background-hover: oklch(0.5103 0.1942 29.6);
155
+ --pds-color-icon-button-critical-border-default: oklch(0.5856 0.2126 29.44);
156
+ --pds-color-icon-button-critical-border-hover: oklch(0.5103 0.1942 29.6);
157
+ --pds-color-icon-button-critical-foreground: oklch(1.0000 0 0);
158
+ --pds-color-icon-button-reverse-background-default: rgba(255, 255, 255, 0.00);
159
+ --pds-color-icon-button-reverse-background-hover: #1717170d;
160
+ --pds-color-icon-button-reverse-border-default: #1717171f;
161
+ --pds-color-icon-button-reverse-border-hover: #17171726;
162
+ --pds-color-icon-button-reverse-foreground: oklch(0.2046 0 0);
163
+ --pds-color-split-button-primary-separator: oklch(0.8388 0.003 264.54);
164
+ --pds-color-split-button-secondary-separator: oklch(0.4235 0.0071 264.49);
165
+ --pds-color-segmented-button-background-inactive: oklch(0.2929 0.0039 264.51);
166
+ --pds-color-segmented-button-background-active: oklch(0.1489 0.0027 248.08);
167
+ --pds-color-segmented-button-foreground-inactive: var(--pds-color-fg-default-secondary);
168
+ --pds-color-segmented-button-foreground-active: var(--pds-color-fg-default);
158
169
  --pds-color-code-inline-background: oklch(0.2433 0.0041 264.49);
159
170
  --pds-color-code-inline-border: oklch(0.2929 0.0039 264.51);
160
171
  --pds-color-code-inline-text: #ffffff;
@@ -181,8 +192,8 @@
181
192
  --pds-color-interactive-background-hover: oklch(0.2929 0.0039 264.51);
182
193
  --pds-color-interactive-background-active: oklch(0.3554 0.0058 258.35);
183
194
  --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
184
- --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
185
- --pds-color-interactive-link-hover: oklch(0.542 0.2895 299.91);
195
+ --pds-color-interactive-link-default: oklch(0.6575 0.177 272.74);
196
+ --pds-color-interactive-link-hover: oklch(0.6311 0.2503 304.99);
186
197
  --pds-color-interactive-link-active: oklch(0.6311 0.2503 304.99);
187
198
  --pds-color-interactive-link-visited: oklch(0.6311 0.2503 304.99);
188
199
  --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
package/build/css/variables.global.css CHANGED
@@ -9,76 +9,76 @@
9
9
  --pds-animation-transition-focus: outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
10
10
  --pds-animation-transition-input: border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
11
11
  --pds-animation-transition-link: color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
- --pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
13
- --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
+ --pds-animation-transition-reveal: height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1);
13
+ --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1);
14
14
  --pds-border-width-stepper: 3px;
15
15
  --pds-border-width-default: 1px;
16
+ --pds-border-width-thicker: 2px;
16
17
  --pds-border-width-outline: 1px;
17
18
  --pds-border-radius-default: 0.188rem;
18
19
  --pds-border-radius-bar: 3.5rem;
19
20
  --pds-border-radius-button: 3.5rem;
20
21
  --pds-border-radius-container: 0.375rem;
21
22
  --pds-border-radius-input: 0.25rem;
22
- --pds-container-modal-width-small: 25rem;
23
- --pds-container-modal-width-medium: 37.5rem;
24
- --pds-container-modal-width-large: 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;
25
26
  --pds-container-modal-width-xl: 67.5rem;
26
27
  --pds-container-tooltip-max-width: 12.5rem;
28
+ --pds-container-dashboard-navbar-max-width: 1440px;
27
29
  --pds-container-padding-base: var(--pds-spacing-xl);
28
- --pds-container-padding-narrow-bp-md: 12%;
29
- --pds-container-padding-narrow-bp-lg: 20%;
30
- --pds-container-padding-standard-bp-md: 6%;
31
- --pds-container-padding-standard-bp-lg: 8%;
32
- --pds-container-padding-wide-bp-md: 5%;
33
- --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%;
34
36
  --pds-container-max-width-narrow: 1024px;
35
37
  --pds-container-max-width-standard: 1200px;
36
38
  --pds-container-max-width-wide: 1440px;
37
39
  --pds-container-max-width-x-wide: 1600px;
38
- --pds-grid-marketing-column-small: 21.34375%;
39
- --pds-grid-marketing-column-medium-large: 4.36875%;
40
- --pds-grid-marketing-gap-small: 4.875%;
41
- --pds-grid-marketing-gap-medium-large: 4.325%;
40
+ --pds-grid-columns-4-gap: var(--pds-spacing-l);
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);
42
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
43
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
44
- --pds-spacing-8xl: 5.16rem;
45
- --pds-spacing-7xl: 4.3rem;
46
- --pds-spacing-6xl: 3.583rem;
47
- --pds-spacing-5xl: 2.986rem;
48
- --pds-spacing-4xl: 2.488rem;
49
- --pds-spacing-3xl: 2.074rem;
50
- --pds-spacing-2xl: 1.728rem;
51
- --pds-spacing-xl: 1.44rem;
52
- --pds-spacing-l: 1.2rem;
49
+ --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
50
+ --pds-spacing-stepper-step-content-width: 7rem;
51
+ --pds-spacing-9xl: 10rem;
52
+ --pds-spacing-8xl: 8rem;
53
+ --pds-spacing-7xl: 6rem;
54
+ --pds-spacing-6xl: 5rem;
55
+ --pds-spacing-5xl: 4rem;
56
+ --pds-spacing-4xl: 3rem;
57
+ --pds-spacing-3xl: 2.5rem;
58
+ --pds-spacing-2xl: 2rem;
59
+ --pds-spacing-xl: 1.5rem;
60
+ --pds-spacing-l: 1.25rem;
53
61
  --pds-spacing-m: 1rem;
54
- --pds-spacing-s: 0.833rem;
55
- --pds-spacing-xs: 0.694rem;
56
- --pds-spacing-2xs: 0.578rem;
57
- --pds-spacing-3xs: 0.481rem;
58
- --pds-spacing-4xs: 0.401rem;
59
- --pds-spacing-5xs: 0.334rem;
60
- --pds-spacing-6xs: 0.278rem;
61
- --pds-spacing-7xs: 0.232rem;
62
- --pds-spacing-8xs: 0.193rem;
63
- --pds-typography-ff-sans: 'Mona Sans', sans-serif;
64
- --pds-typography-ff-serif: 'Instrument Serif', serif;
65
- --pds-typography-ff-mono: 'Source Code Pro', monospace;
66
- --pds-typography-fw-light: 300;
67
- --pds-typography-fw-regular: 400;
68
- --pds-typography-fw-medium: 500;
69
- --pds-typography-fw-semibold: 600;
70
- --pds-typography-fw-bold: 700;
71
- --pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
72
- --pds-typography-ls-xl: 6%;
73
- --pds-typography-ls-l: 4%;
74
- --pds-typography-ls-m: 2%;
75
- --pds-typography-ls-s: 1%;
76
- --pds-typography-lh-xl: 195%;
77
- --pds-typography-lh-l: 165%;
78
- --pds-typography-lh-m: 140%;
79
- --pds-typography-lh-s: 120%;
80
- --pds-typography-multiplier-small: 0.84;
81
- --pds-typography-multiplier-medium: 0.88;
62
+ --pds-spacing-s: 0.75rem;
63
+ --pds-spacing-xs: 0.625rem;
64
+ --pds-spacing-2xs: 0.5rem;
65
+ --pds-spacing-3xs: 0.375rem;
66
+ --pds-spacing-4xs: 0.25rem;
67
+ --pds-spacing-5xs: 0.125rem;
68
+ --pds-spacing-button-height-xs: var(--pds-spacing-xl);
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
+ --pds-spacing-button-padding-inline-xs: var(--pds-spacing-s);
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
+ --pds-spacing-button-gap-inline-xs: var(--pds-spacing-2xs);
77
+ --pds-spacing-button-gap-inline-s: var(--pds-spacing-2xs);
78
+ --pds-spacing-button-gap-inline-m: var(--pds-spacing-xs);
79
+ --pds-spacing-button-gap-inline-l: var(--pds-spacing-xs);
80
+ --pds-spacing-input-height-s: var(--pds-spacing-2xl);
81
+ --pds-spacing-input-height-m: var(--pds-spacing-3xl);
82
82
  --pds-z-index-navigation: 100;
83
83
  --pds-z-index-dropdown: 300;
84
84
  --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.5103 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,18 @@
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;
73
+ --pds-color-spinner-critical-secondary-1: #DE2E21;
74
+ --pds-color-spinner-critical-secondary-2: #F5B6B0;
75
+ --pds-color-spinner-critical-secondary-3: transparent;
110
76
  --pds-color-tag-1-background: #DED8FA;
111
77
  --pds-color-tag-1-foreground: #5C4FAC;
112
78
  --pds-color-tag-2-background: #F8D7D3;
@@ -155,6 +121,51 @@
155
121
  --pds-color-border-brand: #E5E0F8;
156
122
  --pds-color-border-input: oklch(0.8853 0 0);
157
123
  --pds-color-border-separator: oklch(0.8853 0 0);
124
+ --pds-color-button-primary-background-default: oklch(0.2046 0 0);
125
+ --pds-color-button-primary-background-hover: oklch(0.3715 0 0);
126
+ --pds-color-button-primary-foreground: var(--pds-color-fg-reverse);
127
+ --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
128
+ --pds-color-button-secondary-background-hover: oklch(0.9401 0 0);
129
+ --pds-color-button-secondary-border: oklch(0.8853 0 0);
130
+ --pds-color-button-secondary-foreground: oklch(0.2046 0 0);
131
+ --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
132
+ --pds-color-button-subtle-background-hover: oklch(0.9401 0 0);
133
+ --pds-color-button-subtle-foreground: oklch(0.2046 0 0);
134
+ --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
135
+ --pds-color-button-brand-background-hover: oklch(0.9101 0.1759 98.94);
136
+ --pds-color-button-brand-foreground: oklch(0.2046 0 0);
137
+ --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
138
+ --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
139
+ --pds-color-button-critical-foreground: oklch(1.0000 0 0);
140
+ --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
141
+ --pds-color-button-critical-secondary-background-hover: oklch(0.9645 0.0174 21.81);
142
+ --pds-color-button-critical-secondary-border-default: var(--pds-color-status-critical-foreground);
143
+ --pds-color-button-critical-secondary-border-hover: var(--pds-color-status-critical-foreground);
144
+ --pds-color-button-critical-secondary-foreground: oklch(0.5856 0.2126 29.44);
145
+ --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
146
+ --pds-color-button-navbar-background-hover: oklch(1.0000 0 0);
147
+ --pds-color-button-navbar-foreground: oklch(0.2046 0 0);
148
+ --pds-color-icon-button-standard-background-default: rgba(255, 255, 255, 0.00);
149
+ --pds-color-icon-button-standard-background-hover: #1717170d;
150
+ --pds-color-icon-button-standard-border-default: #1717171f;
151
+ --pds-color-icon-button-standard-border-hover: #17171726;
152
+ --pds-color-icon-button-standard-foreground: oklch(0.2046 0 0);
153
+ --pds-color-icon-button-critical-background-default: rgba(255, 255, 255, 0.00);
154
+ --pds-color-icon-button-critical-background-hover: oklch(0.9645 0.0174 21.81);
155
+ --pds-color-icon-button-critical-border-default: oklch(0.8326 0.0742 24.95);
156
+ --pds-color-icon-button-critical-border-hover: oklch(0.8326 0.0742 24.95);
157
+ --pds-color-icon-button-critical-foreground: oklch(0.5103 0.1942 29.6);
158
+ --pds-color-icon-button-reverse-background-default: rgba(255, 255, 255, 0.00);
159
+ --pds-color-icon-button-reverse-background-hover: #ffffff1a;
160
+ --pds-color-icon-button-reverse-border-default: #ffffff1a;
161
+ --pds-color-icon-button-reverse-border-hover: #ffffff26;
162
+ --pds-color-icon-button-reverse-foreground: oklch(1.0000 0 0);
163
+ --pds-color-split-button-primary-separator: oklch(0.5103 0 0);
164
+ --pds-color-split-button-secondary-separator: oklch(0.8853 0 0);
165
+ --pds-color-segmented-button-background-inactive: oklch(0.9702 0 0);
166
+ --pds-color-segmented-button-background-active: oklch(1.0000 0 0);
167
+ --pds-color-segmented-button-foreground-inactive: var(--pds-color-fg-default-secondary);
168
+ --pds-color-segmented-button-foreground-active: var(--pds-color-fg-default);
158
169
  --pds-color-code-inline-background: #F4F3FC;
159
170
  --pds-color-code-inline-border: #E5E0F8;
160
171
  --pds-color-code-inline-text: oklch(0.2046 0 0);
package/build/css/variables.typography.css ADDED
@@ -0,0 +1,34 @@
1
+ :root {
2
+ --pds-typography-ff-sans: 'Mona Sans', sans-serif;
3
+ --pds-typography-ff-serif: 'Instrument Serif', serif;
4
+ --pds-typography-ff-mono: 'Source Code Pro', monospace;
5
+ --pds-typography-fw-light: 300;
6
+ --pds-typography-fw-regular: 400;
7
+ --pds-typography-fw-medium: 500;
8
+ --pds-typography-fw-semibold: 600;
9
+ --pds-typography-fw-bold: 700;
10
+ --pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
11
+ --pds-typography-ls-xl: 0.06em;
12
+ --pds-typography-ls-l: 0.04em;
13
+ --pds-typography-ls-m: 0.02em;
14
+ --pds-typography-ls-s: 0.01em;
15
+ --pds-typography-lh-xl: 195%;
16
+ --pds-typography-lh-l: 165%;
17
+ --pds-typography-lh-m: 150%;
18
+ --pds-typography-lh-s: 130%;
19
+ --pds-typography-lh-xs: 120%;
20
+ --pds-typography-lh-code: 180%;
21
+ --pds-typography-size-2xs: 0.625rem;
22
+ --pds-typography-size-xs: 0.75rem;
23
+ --pds-typography-size-s: 0.875rem;
24
+ --pds-typography-size-m: 1rem;
25
+ --pds-typography-size-l: 1.125rem;
26
+ --pds-typography-size-xl: clamp(1rem, 0.89rem + 0.45vw, 1.25rem);
27
+ --pds-typography-size-2xl: clamp(1.2rem, 1.06rem + 0.55vw, 1.5rem);
28
+ --pds-typography-size-3xl: clamp(1.4rem, 1.24rem + 0.64vw, 1.75rem);
29
+ --pds-typography-size-4xl: clamp(1.6rem, 1.42rem + 0.73vw, 2rem);
30
+ --pds-typography-size-5xl: clamp(1.8rem, 1.6rem + 0.82vw, 2.25rem);
31
+ --pds-typography-size-6xl: clamp(2.4rem, 2.13rem + 1.09vw, 3rem);
32
+ --pds-typography-size-7xl: clamp(3rem, 2.66rem + 1.36vw, 3.75rem);
33
+ --pds-typography-size-8xl: clamp(3.6rem, 3.19rem + 1.64vw, 4.5rem);
34
+ }