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

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 +102 -30
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.global.css +47 -45
  4. package/build/css/variables.typography.css +34 -0
  5. package/build/figma/tokens.json +865 -1731
  6. package/build/js/variables.global.d.ts +113 -0
  7. package/build/js/variables.global.js +113 -0
  8. package/build/js/variables.typography.d.ts +65 -0
  9. package/build/js/variables.typography.js +52 -0
  10. package/build/json/tokens.json +933 -246
  11. package/package.json +22 -2
  12. package/build/css/variables.compact.css +0 -17
  13. package/build/css/variables.expanded.css +0 -17
  14. package/build/js/variables.js +0 -109
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-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.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,50 +37,44 @@
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;
38
- --pds-spacing-8xl: 5.16rem;
39
- --pds-spacing-7xl: 4.3rem;
40
- --pds-spacing-6xl: 3.583rem;
41
- --pds-spacing-5xl: 2.986rem;
42
- --pds-spacing-4xl: 2.488rem;
43
- --pds-spacing-3xl: 2.074rem;
44
- --pds-spacing-2xl: 1.728rem;
45
- --pds-spacing-xl: 1.44rem;
46
- --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;
47
61
  --pds-spacing-m: 1rem;
48
- --pds-spacing-s: 0.833rem;
49
- --pds-spacing-xs: 0.694rem;
50
- --pds-spacing-2xs: 0.578rem;
51
- --pds-spacing-3xs: 0.481rem;
52
- --pds-spacing-4xs: 0.401rem;
53
- --pds-spacing-5xs: 0.334rem;
54
- --pds-spacing-6xs: 0.278rem;
55
- --pds-spacing-7xs: 0.232rem;
56
- --pds-spacing-8xs: 0.193rem;
57
- --pds-typography-ff-sans: 'Mona Sans', sans-serif;
58
- --pds-typography-ff-serif: 'Instrument Serif', serif;
59
- --pds-typography-ff-mono: 'Source Code Pro', monospace;
60
- --pds-typography-fw-light: 300;
61
- --pds-typography-fw-regular: 400;
62
- --pds-typography-fw-medium: 500;
63
- --pds-typography-fw-semibold: 600;
64
- --pds-typography-fw-bold: 700;
65
- --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%;
70
- --pds-typography-lh-xl: 195%;
71
- --pds-typography-lh-l: 165%;
72
- --pds-typography-lh-m: 140%;
73
- --pds-typography-lh-s: 120%;
74
- --pds-typography-multiplier-small: 0.84;
75
- --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-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);
72
+ --pds-spacing-button-padding-inline-xs: var(--pds-spacing-2xs);
73
+ --pds-spacing-button-padding-inline-sm: var(--pds-spacing-s);
74
+ --pds-spacing-button-padding-inline-md: var(--pds-spacing-m);
75
+ --pds-spacing-button-padding-inline-lg: var(--pds-spacing-xl);
76
+ --pds-spacing-input-height-sm: var(--pds-spacing-2xl);
77
+ --pds-spacing-input-height-md: var(--pds-spacing-3xl);
76
78
  --pds-z-index-navigation: 100;
77
79
  --pds-z-index-dropdown: 300;
78
80
  --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
+ }