@pantheon-systems/pds-design-tokens 2.0.0-alpha.1 → 2.0.0-alpha.10

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 (14) hide show
  1. package/README.md +111 -12
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.compact.css +14 -14
  4. package/build/css/variables.expanded.css +7 -7
  5. package/build/css/variables.global.css +39 -12
  6. package/build/figma/tokens.json +1062 -105
  7. package/build/js/variables.compact.d.ts +34 -0
  8. package/build/js/variables.compact.js +34 -0
  9. package/build/js/variables.expanded.d.ts +34 -0
  10. package/build/js/variables.expanded.js +34 -0
  11. package/build/js/variables.global.d.ts +138 -0
  12. package/build/js/{variables.js → variables.global.js} +60 -31
  13. package/build/json/tokens.json +684 -144
  14. package/package.json +22 -2
package/README.md CHANGED
@@ -41,31 +41,130 @@ Use tokens in your styles:
41
41
  .my-component {
42
42
  color: var(--pds-color-fg-default);
43
43
  background: var(--pds-color-bg-default);
44
- padding: var(--pds-spacing-M);
44
+ padding: var(--pds-spacing-m);
45
45
  font-family: var(--pds-typography-ff-sans);
46
46
  }
47
47
  ```
48
48
 
49
+ #### Using Breakpoints
50
+
51
+ Breakpoint custom media queries require PostCSS configuration and a CSS import.
52
+
53
+ **Step 1: Install required plugins**
54
+
55
+ ```bash
56
+ npm install postcss-custom-media @csstools/postcss-global-data --save-dev
57
+ ```
58
+
59
+ **Step 2: Import breakpoints in your global CSS file**
60
+
61
+ ```css
62
+ /* In your main/global CSS file */
63
+ @import '@pantheon-systems/pds-design-tokens/build/css/breakpoints.css';
64
+ ```
65
+
66
+ **Step 3: Configure PostCSS**
67
+
68
+ ```javascript
69
+ // postcss.config.js
70
+ import postcssGlobalData from '@csstools/postcss-global-data';
71
+ import postcssCustomMedia from 'postcss-custom-media';
72
+
73
+ export default {
74
+ plugins: [
75
+ postcssGlobalData({
76
+ files: [
77
+ 'node_modules/@pantheon-systems/pds-design-tokens/build/css/breakpoints.css',
78
+ ],
79
+ }),
80
+ postcssCustomMedia,
81
+ // ... other plugins
82
+ ],
83
+ };
84
+ ```
85
+
86
+ **Step 4: Use breakpoints in your CSS**
87
+
88
+ ```css
89
+ .my-component {
90
+ padding: var(--pds-spacing-s);
91
+ }
92
+
93
+ @media (--pds-bp-md) {
94
+ .my-component {
95
+ padding: var(--pds-spacing-l);
96
+ }
97
+ }
98
+ ```
99
+
49
100
  ### JavaScript Constants
50
101
 
51
- Import tokens as JavaScript constants:
102
+ Import tokens as JavaScript constants from the appropriate file:
52
103
 
53
104
  ```javascript
105
+ // Import global tokens (colors, borders, typography primitives, etc.)
54
106
  import {
55
- COLOR_FG_DEFAULT,
56
- SPACING_M,
107
+ BORDER_RADIUS_DEFAULT,
57
108
  TYPOGRAPHY_FF_SANS,
109
+ TYPOGRAPHY_FW_BOLD,
110
+ Z_INDEX_MODAL,
111
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
112
+
113
+ // Import compact scale tokens (default spacing/typography scale)
114
+ import {
115
+ SPACING_M,
58
116
  TYPOGRAPHY_SIZE_XL,
59
- } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
117
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.compact.js';
118
+
119
+ // Import expanded scale tokens (larger spacing/typography scale)
120
+ import {
121
+ SPACING_M as SPACING_M_EXPANDED,
122
+ TYPOGRAPHY_SIZE_XL as TYPOGRAPHY_SIZE_XL_EXPANDED,
123
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.expanded.js';
60
124
 
61
125
  const styles = {
62
- color: COLOR_FG_DEFAULT,
63
126
  padding: SPACING_M,
64
127
  fontFamily: TYPOGRAPHY_FF_SANS,
65
128
  fontSize: TYPOGRAPHY_SIZE_XL,
129
+ borderRadius: BORDER_RADIUS_DEFAULT,
66
130
  };
67
131
  ```
68
132
 
133
+ **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`).
134
+
135
+ **File organization:**
136
+
137
+ - `variables.global.js` - Global tokens (colors, borders, spacing scale, typography primitives, z-index, etc.)
138
+ - `variables.compact.js` - Compact typography scale (default - smaller type sizes)
139
+ - `variables.expanded.js` - Expanded typography scale (larger type sizes for more spacious layouts)
140
+
141
+ #### Spacing Scale Object
142
+
143
+ For convenience, spacing scale tokens (8XS → 8XL) are available as a grouped object in the global file:
144
+
145
+ ```javascript
146
+ import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
147
+
148
+ const padding = SPACING.SPACING_M; // "1rem"
149
+ const margin = SPACING.SPACING_2XL; // "1.728rem"
150
+ ```
151
+
152
+ #### Typography Scale Object
153
+
154
+ Typography size tokens are available as a grouped object in compact and expanded files:
155
+
156
+ ```javascript
157
+ // Compact scale (default)
158
+ import { TYPOGRAPHY_SIZE } from '@pantheon-systems/pds-design-tokens/build/js/variables.compact.js';
159
+
160
+ const fontSize = TYPOGRAPHY_SIZE.TYPOGRAPHY_SIZE_XL; // "1.44rem"
161
+
162
+ // Expanded scale
163
+ import { TYPOGRAPHY_SIZE as TYPOGRAPHY_SIZE_EXPANDED } from '@pantheon-systems/pds-design-tokens/build/js/variables.expanded.js';
164
+
165
+ const fontSizeExpanded = TYPOGRAPHY_SIZE_EXPANDED.TYPOGRAPHY_SIZE_XL; // "1.777rem"
166
+ ```
167
+
69
168
  ### JSON
70
169
 
71
170
  Access token metadata programmatically:
@@ -76,12 +175,12 @@ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
76
175
 
77
176
  ## Available Formats
78
177
 
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 |
178
+ | Format | Location | Use Case |
179
+ | ------------------------- | -------------- | -------------------------------------- |
180
+ | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
181
+ | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
182
+ | **JSON** | `build/json/` | Programmatic access, build tools |
183
+ | **Figma** | `build/figma/` | Design tool integration |
85
184
 
86
185
  ## Theming
87
186
 
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-md (min-width: 768px);
7
+ @custom-media --pds-bp-lg (min-width: 1280px);
8
+ @custom-media --pds-bp-xl (min-width: 1440px);
9
+
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);
package/build/css/variables.compact.css CHANGED
@@ -1,17 +1,17 @@
1
1
  :root, [data-scale="compact"] {
2
2
  --pds-typography-size-code-block: 0.9rem;
3
- --pds-typography-size-7xl: 4.3rem;
4
- --pds-typography-size-6xl: 3.583rem;
5
- --pds-typography-size-5xl: 2.986rem;
6
- --pds-typography-size-4xl: 2.488rem;
7
- --pds-typography-size-3xl: 2.074rem;
8
- --pds-typography-size-2xl: 1.728rem;
9
- --pds-typography-size-xl: 1.44rem;
10
- --pds-typography-size-l: 1.2rem;
11
- --pds-typography-size-m: 1rem;
12
- --pds-typography-size-s: 0.833rem;
13
- --pds-typography-size-xs: 0.694rem;
14
- --pds-typography-size-2xs: 0.578rem;
15
- --pds-typography-size-default: 1rem;
16
- --pds-typography-size-input-label: 1rem;
3
+ --pds-typography-size-7xl: clamp(4.172rem, 3.7rem + 1.9vw, 5.215rem);
4
+ --pds-typography-size-6xl: clamp(3.338rem, 2.96rem + 1.52vw, 4.172rem);
5
+ --pds-typography-size-5xl: clamp(2.67rem, 2.37rem + 1.21vw, 3.338rem);
6
+ --pds-typography-size-4xl: clamp(2.136rem, 1.89rem + 0.97vw, 2.67rem);
7
+ --pds-typography-size-3xl: clamp(1.709rem, 1.51rem + 0.78vw, 2.136rem);
8
+ --pds-typography-size-2xl: clamp(1.367rem, 1.21rem + 0.62vw, 1.709rem);
9
+ --pds-typography-size-xl: clamp(1.094rem, 0.97rem + 0.5vw, 1.367rem);
10
+ --pds-typography-size-l: 1.094rem;
11
+ --pds-typography-size-m: 0.875rem;
12
+ --pds-typography-size-s: 0.7rem;
13
+ --pds-typography-size-xs: 0.56rem;
14
+ --pds-typography-size-2xs: 0.448rem;
15
+ --pds-typography-size-default: 0.875rem;
16
+ --pds-typography-size-input-label: 0.875rem;
17
17
  }
package/build/css/variables.expanded.css CHANGED
@@ -1,12 +1,12 @@
1
1
  [data-scale="expanded"] {
2
2
  --pds-typography-size-code-block: 0.9rem;
3
- --pds-typography-size-7xl: 9.969rem;
4
- --pds-typography-size-6xl: 7.478rem;
5
- --pds-typography-size-5xl: 5.61rem;
6
- --pds-typography-size-4xl: 4.209rem;
7
- --pds-typography-size-3xl: 3.157rem;
8
- --pds-typography-size-2xl: 2.369rem;
9
- --pds-typography-size-xl: 1.777rem;
3
+ --pds-typography-size-7xl: clamp(7.975rem, 7.07rem + 3.63vw, 9.969rem);
4
+ --pds-typography-size-6xl: clamp(5.983rem, 5.3rem + 2.72vw, 7.478rem);
5
+ --pds-typography-size-5xl: clamp(4.488rem, 3.98rem + 2.04vw, 5.61rem);
6
+ --pds-typography-size-4xl: clamp(3.367rem, 2.98rem + 1.53vw, 4.209rem);
7
+ --pds-typography-size-3xl: clamp(2.526rem, 2.24rem + 1.15vw, 3.157rem);
8
+ --pds-typography-size-2xl: clamp(1.895rem, 1.68rem + 0.86vw, 2.369rem);
9
+ --pds-typography-size-xl: clamp(1.422rem, 1.26rem + 0.65vw, 1.777rem);
10
10
  --pds-typography-size-l: 1.333rem;
11
11
  --pds-typography-size-m: 1rem;
12
12
  --pds-typography-size-s: 0.75rem;
package/build/css/variables.global.css CHANGED
@@ -4,20 +4,28 @@
4
4
  --pds-animation-duration-dropdown: 300ms;
5
5
  --pds-animation-duration-reveal: 300ms;
6
6
  --pds-animation-timing-function-default: cubic-bezier(.2, 0, 0, 1);
7
- --pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
7
+ --pds-animation-transition-button: background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
8
+ --pds-animation-transition-default: all 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
9
+ --pds-animation-transition-focus: outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
10
+ --pds-animation-transition-input: border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
11
+ --pds-animation-transition-link: color, text-decoration-color 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);
8
14
  --pds-border-width-stepper: 3px;
9
15
  --pds-border-width-default: 1px;
16
+ --pds-border-width-thicker: 2px;
10
17
  --pds-border-width-outline: 1px;
11
18
  --pds-border-radius-default: 0.188rem;
12
19
  --pds-border-radius-bar: 3.5rem;
13
20
  --pds-border-radius-button: 3.5rem;
14
21
  --pds-border-radius-container: 0.375rem;
15
22
  --pds-border-radius-input: 0.25rem;
16
- --pds-container-modal-width-small: 25rem;
17
- --pds-container-modal-width-medium: 37.5rem;
18
- --pds-container-modal-width-large: 47.5rem;
23
+ --pds-container-modal-width-sm: 25rem;
24
+ --pds-container-modal-width-md: 37.5rem;
25
+ --pds-container-modal-width-lg: 47.5rem;
19
26
  --pds-container-modal-width-xl: 67.5rem;
20
27
  --pds-container-tooltip-max-width: 12.5rem;
28
+ --pds-container-dashboard-navbar-max-width: 1440px;
21
29
  --pds-container-padding-base: var(--pds-spacing-xl);
22
30
  --pds-container-padding-narrow-bp-md: 12%;
23
31
  --pds-container-padding-narrow-bp-lg: 20%;
@@ -29,12 +37,17 @@
29
37
  --pds-container-max-width-standard: 1200px;
30
38
  --pds-container-max-width-wide: 1440px;
31
39
  --pds-container-max-width-x-wide: 1600px;
32
- --pds-grid-marketing-column-small: 21.34375%;
33
- --pds-grid-marketing-column-medium-large: 4.36875%;
34
- --pds-grid-marketing-gap-small: 4.875%;
35
- --pds-grid-marketing-gap-medium-large: 4.325%;
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);
36
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
37
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
49
+ --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
50
+ --pds-spacing-stepper-step-content-width: 7rem;
38
51
  --pds-spacing-8xl: 5.16rem;
39
52
  --pds-spacing-7xl: 4.3rem;
40
53
  --pds-spacing-6xl: 3.583rem;
@@ -54,6 +67,19 @@
54
67
  --pds-spacing-6xs: 0.278rem;
55
68
  --pds-spacing-7xs: 0.232rem;
56
69
  --pds-spacing-8xs: 0.193rem;
70
+ --pds-spacing-input-height: var(--pds-spacing-4xl);
71
+ --pds-spacing-button-height-xs: var(--pds-spacing-xl);
72
+ --pds-spacing-button-height-sm: var(--pds-spacing-3xl);
73
+ --pds-spacing-button-height-md: var(--pds-spacing-4xl);
74
+ --pds-spacing-button-height-lg: var(--pds-spacing-5xl);
75
+ --pds-spacing-button-padding-block-xs: 0.25rem;
76
+ --pds-spacing-button-padding-block-sm: var(--pds-spacing-3xs);
77
+ --pds-spacing-button-padding-block-md: var(--pds-spacing-2xs);
78
+ --pds-spacing-button-padding-block-lg: var(--pds-spacing-s);
79
+ --pds-spacing-button-padding-inline-xs: var(--pds-spacing-xs);
80
+ --pds-spacing-button-padding-inline-sm: var(--pds-spacing-s);
81
+ --pds-spacing-button-padding-inline-md: var(--pds-spacing-l);
82
+ --pds-spacing-button-padding-inline-lg: var(--pds-spacing-2xl);
57
83
  --pds-typography-ff-sans: 'Mona Sans', sans-serif;
58
84
  --pds-typography-ff-serif: 'Instrument Serif', serif;
59
85
  --pds-typography-ff-mono: 'Source Code Pro', monospace;
@@ -63,14 +89,15 @@
63
89
  --pds-typography-fw-semibold: 600;
64
90
  --pds-typography-fw-bold: 700;
65
91
  --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';
66
- --pds-typography-ls-xl: 6%;
67
- --pds-typography-ls-l: 4%;
68
- --pds-typography-ls-m: 2%;
69
- --pds-typography-ls-s: 1%;
92
+ --pds-typography-ls-xl: 0.06em;
93
+ --pds-typography-ls-l: 0.04em;
94
+ --pds-typography-ls-m: 0.02em;
95
+ --pds-typography-ls-s: 0.01em;
70
96
  --pds-typography-lh-xl: 195%;
71
97
  --pds-typography-lh-l: 165%;
72
98
  --pds-typography-lh-m: 140%;
73
99
  --pds-typography-lh-s: 120%;
100
+ --pds-typography-lh-code: 180%;
74
101
  --pds-typography-multiplier-small: 0.84;
75
102
  --pds-typography-multiplier-medium: 0.88;
76
103
  --pds-z-index-navigation: 100;