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

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 +17 -44
  2. package/build/css/variables.global.css +24 -48
  3. package/build/css/variables.typography.css +34 -0
  4. package/build/figma/tokens.json +2820 -4624
  5. package/build/js/variables.global.d.ts +5 -31
  6. package/build/js/variables.global.js +37 -63
  7. package/build/js/variables.typography.d.ts +65 -0
  8. package/build/js/variables.typography.js +52 -0
  9. package/build/json/tokens.json +400 -228
  10. package/package.json +1 -1
  11. package/build/css/variables.compact.css +0 -17
  12. package/build/css/variables.expanded.css +0 -17
  13. package/build/js/variables.compact.d.ts +0 -34
  14. package/build/js/variables.compact.js +0 -34
  15. package/build/js/variables.expanded.d.ts +0 -34
  16. package/build/js/variables.expanded.js +0 -34
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:
@@ -102,41 +101,37 @@ export default {
102
101
  Import tokens as JavaScript constants from the appropriate file:
103
102
 
104
103
  ```javascript
105
- // Import global tokens (colors, borders, typography primitives, etc.)
104
+ // Import global tokens (colors, borders, spacing, z-index, etc.)
106
105
  import {
107
106
  BORDER_RADIUS_DEFAULT,
108
- TYPOGRAPHY_FF_SANS,
109
- TYPOGRAPHY_FW_BOLD,
107
+ SPACING_M,
110
108
  Z_INDEX_MODAL,
111
109
  } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
112
110
 
113
- // Import compact scale tokens (default spacing/typography scale)
111
+ // Import typography tokens (font families, weights, sizes, line heights, letter spacing)
114
112
  import {
115
- SPACING_M,
113
+ TYPOGRAPHY_FF_SANS,
114
+ TYPOGRAPHY_FW_BOLD,
116
115
  TYPOGRAPHY_SIZE_XL,
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';
116
+ TYPOGRAPHY_LH_M,
117
+ } from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
124
118
 
125
119
  const styles = {
126
120
  padding: SPACING_M,
127
121
  fontFamily: TYPOGRAPHY_FF_SANS,
122
+ fontWeight: TYPOGRAPHY_FW_BOLD,
128
123
  fontSize: TYPOGRAPHY_SIZE_XL,
124
+ lineHeight: TYPOGRAPHY_LH_M,
129
125
  borderRadius: BORDER_RADIUS_DEFAULT,
130
126
  };
131
127
  ```
132
128
 
133
- **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`).
129
+ **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`, `TYPOGRAPHY_SIZE_XL = "1.25rem"`).
134
130
 
135
131
  **File organization:**
136
132
 
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)
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)
140
135
 
141
136
  #### Spacing Scale Object
142
137
 
@@ -151,18 +146,12 @@ const margin = SPACING.SPACING_2XL; // "1.728rem"
151
146
 
152
147
  #### Typography Scale Object
153
148
 
154
- Typography size tokens are available as a grouped object in compact and expanded files:
149
+ Typography size tokens are available as a grouped object:
155
150
 
156
151
  ```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"
152
+ import { TYPOGRAPHY_SIZE } from '@pantheon-systems/pds-design-tokens/build/js/variables.typography.js';
161
153
 
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"
154
+ const fontSize = TYPOGRAPHY_SIZE.TYPOGRAPHY_SIZE_XL; // "1.25rem"
166
155
  ```
167
156
 
168
157
  ### JSON
@@ -200,22 +189,6 @@ Control color themes with the `data-theme` attribute:
200
189
  </body>
201
190
  ```
202
191
 
203
- ### Type Scale (Compact/Expanded)
204
-
205
- Control typography scale with the `data-scale` attribute:
206
-
207
- ```html
208
- <!-- Compact scale (default) -->
209
- <body data-scale="compact">
210
- <h1 style="font-size: var(--pds-typography-size-xl);">Compact</h1>
211
- </body>
212
-
213
- <!-- Expanded scale -->
214
- <body data-scale="expanded">
215
- <h1 style="font-size: var(--pds-typography-size-xl);">Expanded</h1>
216
- </body>
217
- ```
218
-
219
192
  ## Token Categories
220
193
 
221
194
  - **Animation** - Durations, delays, timing functions
package/build/css/variables.global.css CHANGED
@@ -48,58 +48,34 @@
48
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
49
49
  --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
50
50
  --pds-spacing-stepper-step-content-width: 7rem;
51
- --pds-spacing-8xl: 5.16rem;
52
- --pds-spacing-7xl: 4.3rem;
53
- --pds-spacing-6xl: 3.583rem;
54
- --pds-spacing-5xl: 2.986rem;
55
- --pds-spacing-4xl: 2.488rem;
56
- --pds-spacing-3xl: 2.074rem;
57
- --pds-spacing-2xl: 1.728rem;
58
- --pds-spacing-xl: 1.44rem;
59
- --pds-spacing-l: 1.2rem;
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;
60
61
  --pds-spacing-m: 1rem;
61
- --pds-spacing-s: 0.833rem;
62
- --pds-spacing-xs: 0.694rem;
63
- --pds-spacing-2xs: 0.578rem;
64
- --pds-spacing-3xs: 0.481rem;
65
- --pds-spacing-4xs: 0.401rem;
66
- --pds-spacing-5xs: 0.334rem;
67
- --pds-spacing-6xs: 0.278rem;
68
- --pds-spacing-7xs: 0.232rem;
69
- --pds-spacing-8xs: 0.193rem;
70
- --pds-spacing-input-height: var(--pds-spacing-4xl);
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;
71
68
  --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);
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);
79
72
  --pds-spacing-button-padding-inline-xs: var(--pds-spacing-xs);
80
- --pds-spacing-button-padding-inline-sm: var(--pds-spacing-s);
73
+ --pds-spacing-button-padding-inline-sm: var(--pds-spacing-m);
81
74
  --pds-spacing-button-padding-inline-md: var(--pds-spacing-l);
82
- --pds-spacing-button-padding-inline-lg: var(--pds-spacing-2xl);
83
- --pds-typography-ff-sans: 'Mona Sans', sans-serif;
84
- --pds-typography-ff-serif: 'Instrument Serif', serif;
85
- --pds-typography-ff-mono: 'Source Code Pro', monospace;
86
- --pds-typography-fw-light: 300;
87
- --pds-typography-fw-regular: 400;
88
- --pds-typography-fw-medium: 500;
89
- --pds-typography-fw-semibold: 600;
90
- --pds-typography-fw-bold: 700;
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';
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;
96
- --pds-typography-lh-xl: 195%;
97
- --pds-typography-lh-l: 165%;
98
- --pds-typography-lh-m: 140%;
99
- --pds-typography-lh-s: 120%;
100
- --pds-typography-lh-code: 180%;
101
- --pds-typography-multiplier-small: 0.84;
102
- --pds-typography-multiplier-medium: 0.88;
75
+ --pds-spacing-button-padding-inline-lg: var(--pds-spacing-xl);
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);
103
79
  --pds-z-index-navigation: 100;
104
80
  --pds-z-index-dropdown: 300;
105
81
  --pds-z-index-notifications: 500;
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
+ }