@pantheon-systems/pds-design-tokens 2.0.0-alpha.6 → 2.0.0-alpha.7

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 (8) hide show
  1. package/README.md +60 -20
  2. package/build/js/variables.compact.d.ts +34 -0
  3. package/build/js/variables.compact.js +34 -0
  4. package/build/js/variables.expanded.d.ts +34 -0
  5. package/build/js/variables.expanded.js +34 -0
  6. package/build/js/{variables.d.ts → variables.global.d.ts} +0 -15
  7. package/build/js/{variables.js → variables.global.js} +0 -15
  8. package/package.json +22 -3
package/README.md CHANGED
@@ -46,15 +46,24 @@ Use tokens in your styles:
46
46
  }
47
47
  ```
48
48
 
49
- #### Using Breakpoints (Optional)
49
+ #### Using Breakpoints
50
50
 
51
- Breakpoint custom media queries require PostCSS configuration. Install the required plugins:
51
+ Breakpoint custom media queries require PostCSS configuration and a CSS import.
52
+
53
+ **Step 1: Install required plugins**
52
54
 
53
55
  ```bash
54
56
  npm install postcss-custom-media @csstools/postcss-global-data --save-dev
55
57
  ```
56
58
 
57
- Configure PostCSS to load breakpoints globally:
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**
58
67
 
59
68
  ```javascript
60
69
  // postcss.config.js
@@ -74,7 +83,7 @@ export default {
74
83
  };
75
84
  ```
76
85
 
77
- Use breakpoints in your CSS without imports:
86
+ **Step 4: Use breakpoints in your CSS**
78
87
 
79
88
  ```css
80
89
  .my-component {
@@ -90,39 +99,70 @@ Use breakpoints in your CSS without imports:
90
99
 
91
100
  ### JavaScript Constants
92
101
 
93
- Import tokens as JavaScript constants:
102
+ Import tokens as JavaScript constants from the appropriate file:
94
103
 
95
104
  ```javascript
105
+ // Import global tokens (colors, borders, typography primitives, etc.)
96
106
  import {
97
- COLOR_FG_DEFAULT,
98
- SPACING_M,
107
+ BORDER_RADIUS_DEFAULT,
99
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,
100
116
  TYPOGRAPHY_SIZE_XL,
101
- } 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';
102
124
 
103
125
  const styles = {
104
- color: COLOR_FG_DEFAULT,
105
126
  padding: SPACING_M,
106
127
  fontFamily: TYPOGRAPHY_FF_SANS,
107
128
  fontSize: TYPOGRAPHY_SIZE_XL,
129
+ borderRadius: BORDER_RADIUS_DEFAULT,
108
130
  };
109
131
  ```
110
132
 
111
133
  **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`).
112
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
+
113
141
  #### Spacing Scale Object
114
142
 
115
- For convenience, spacing scale tokens (8XS → 8XL) are also available as a grouped object:
143
+ For convenience, spacing scale tokens (8XS → 8XL) are available as a grouped object in the global file:
116
144
 
117
145
  ```javascript
118
- import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
146
+ import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.global.js';
119
147
 
120
- // Access scale tokens via the object
121
148
  const padding = SPACING.SPACING_M; // "1rem"
122
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';
123
164
 
124
- // Or use individual imports
125
- import { SPACING_M, SPACING_2XL } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
165
+ const fontSizeExpanded = TYPOGRAPHY_SIZE_EXPANDED.TYPOGRAPHY_SIZE_XL; // "1.777rem"
126
166
  ```
127
167
 
128
168
  ### JSON
@@ -135,12 +175,12 @@ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
135
175
 
136
176
  ## Available Formats
137
177
 
138
- | Format | Location | Use Case |
139
- | ------------------------- | -------------- | --------------------------------------- |
140
- | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
141
- | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
142
- | **JSON** | `build/json/` | Programmatic access, build tools |
143
- | **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 |
144
184
 
145
185
  ## Theming
146
186
 
package/build/js/variables.compact.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
6
+ export const TYPOGRAPHY_SIZE_7XL: string;
7
+ export const TYPOGRAPHY_SIZE_6XL: string;
8
+ export const TYPOGRAPHY_SIZE_5XL: string;
9
+ export const TYPOGRAPHY_SIZE_4XL: string;
10
+ export const TYPOGRAPHY_SIZE_3XL: string;
11
+ export const TYPOGRAPHY_SIZE_2XL: string;
12
+ export const TYPOGRAPHY_SIZE_XL: string;
13
+ export const TYPOGRAPHY_SIZE_L: string;
14
+ export const TYPOGRAPHY_SIZE_M: string;
15
+ export const TYPOGRAPHY_SIZE_S: string;
16
+ export const TYPOGRAPHY_SIZE_XS: string;
17
+ export const TYPOGRAPHY_SIZE_2XS: string;
18
+ export const TYPOGRAPHY_SIZE_DEFAULT: string;
19
+ export const TYPOGRAPHY_SIZE_INPUT_LABEL: string;
20
+
21
+ export const TYPOGRAPHY_SIZE : {
22
+ TYPOGRAPHY_SIZE_2XS: string;
23
+ TYPOGRAPHY_SIZE_XS: string;
24
+ TYPOGRAPHY_SIZE_S: string;
25
+ TYPOGRAPHY_SIZE_M: string;
26
+ TYPOGRAPHY_SIZE_L: string;
27
+ TYPOGRAPHY_SIZE_XL: string;
28
+ TYPOGRAPHY_SIZE_2XL: string;
29
+ TYPOGRAPHY_SIZE_3XL: string;
30
+ TYPOGRAPHY_SIZE_4XL: string;
31
+ TYPOGRAPHY_SIZE_5XL: string;
32
+ TYPOGRAPHY_SIZE_6XL: string;
33
+ TYPOGRAPHY_SIZE_7XL: string;
34
+ };
package/build/js/variables.compact.js ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_SIZE_CODE_BLOCK = "0.9rem";
6
+ export const TYPOGRAPHY_SIZE_7XL = "4.3rem";
7
+ export const TYPOGRAPHY_SIZE_6XL = "3.583rem";
8
+ export const TYPOGRAPHY_SIZE_5XL = "2.986rem";
9
+ export const TYPOGRAPHY_SIZE_4XL = "2.488rem";
10
+ export const TYPOGRAPHY_SIZE_3XL = "2.074rem";
11
+ export const TYPOGRAPHY_SIZE_2XL = "1.728rem";
12
+ export const TYPOGRAPHY_SIZE_XL = "1.44rem";
13
+ export const TYPOGRAPHY_SIZE_L = "1.2rem";
14
+ export const TYPOGRAPHY_SIZE_M = "1rem";
15
+ export const TYPOGRAPHY_SIZE_S = "0.833rem";
16
+ export const TYPOGRAPHY_SIZE_XS = "0.694rem";
17
+ export const TYPOGRAPHY_SIZE_2XS = "0.578rem";
18
+ export const TYPOGRAPHY_SIZE_DEFAULT = "1rem";
19
+ export const TYPOGRAPHY_SIZE_INPUT_LABEL = "1rem";
20
+
21
+ export const TYPOGRAPHY_SIZE = {
22
+ TYPOGRAPHY_SIZE_2XS,
23
+ TYPOGRAPHY_SIZE_XS,
24
+ TYPOGRAPHY_SIZE_S,
25
+ TYPOGRAPHY_SIZE_M,
26
+ TYPOGRAPHY_SIZE_L,
27
+ TYPOGRAPHY_SIZE_XL,
28
+ TYPOGRAPHY_SIZE_2XL,
29
+ TYPOGRAPHY_SIZE_3XL,
30
+ TYPOGRAPHY_SIZE_4XL,
31
+ TYPOGRAPHY_SIZE_5XL,
32
+ TYPOGRAPHY_SIZE_6XL,
33
+ TYPOGRAPHY_SIZE_7XL,
34
+ };
package/build/js/variables.expanded.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
6
+ export const TYPOGRAPHY_SIZE_7XL: string;
7
+ export const TYPOGRAPHY_SIZE_6XL: string;
8
+ export const TYPOGRAPHY_SIZE_5XL: string;
9
+ export const TYPOGRAPHY_SIZE_4XL: string;
10
+ export const TYPOGRAPHY_SIZE_3XL: string;
11
+ export const TYPOGRAPHY_SIZE_2XL: string;
12
+ export const TYPOGRAPHY_SIZE_XL: string;
13
+ export const TYPOGRAPHY_SIZE_L: string;
14
+ export const TYPOGRAPHY_SIZE_M: string;
15
+ export const TYPOGRAPHY_SIZE_S: string;
16
+ export const TYPOGRAPHY_SIZE_XS: string;
17
+ export const TYPOGRAPHY_SIZE_2XS: string;
18
+ export const TYPOGRAPHY_SIZE_DEFAULT: string;
19
+ export const TYPOGRAPHY_SIZE_INPUT_LABEL: string;
20
+
21
+ export const TYPOGRAPHY_SIZE : {
22
+ TYPOGRAPHY_SIZE_2XS: string;
23
+ TYPOGRAPHY_SIZE_XS: string;
24
+ TYPOGRAPHY_SIZE_S: string;
25
+ TYPOGRAPHY_SIZE_M: string;
26
+ TYPOGRAPHY_SIZE_L: string;
27
+ TYPOGRAPHY_SIZE_XL: string;
28
+ TYPOGRAPHY_SIZE_2XL: string;
29
+ TYPOGRAPHY_SIZE_3XL: string;
30
+ TYPOGRAPHY_SIZE_4XL: string;
31
+ TYPOGRAPHY_SIZE_5XL: string;
32
+ TYPOGRAPHY_SIZE_6XL: string;
33
+ TYPOGRAPHY_SIZE_7XL: string;
34
+ };
package/build/js/variables.expanded.js ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_SIZE_CODE_BLOCK = "0.9rem";
6
+ export const TYPOGRAPHY_SIZE_7XL = "9.969rem";
7
+ export const TYPOGRAPHY_SIZE_6XL = "7.478rem";
8
+ export const TYPOGRAPHY_SIZE_5XL = "5.61rem";
9
+ export const TYPOGRAPHY_SIZE_4XL = "4.209rem";
10
+ export const TYPOGRAPHY_SIZE_3XL = "3.157rem";
11
+ export const TYPOGRAPHY_SIZE_2XL = "2.369rem";
12
+ export const TYPOGRAPHY_SIZE_XL = "1.777rem";
13
+ export const TYPOGRAPHY_SIZE_L = "1.333rem";
14
+ export const TYPOGRAPHY_SIZE_M = "1rem";
15
+ export const TYPOGRAPHY_SIZE_S = "0.75rem";
16
+ export const TYPOGRAPHY_SIZE_XS = "0.563rem";
17
+ export const TYPOGRAPHY_SIZE_2XS = "0.422rem";
18
+ export const TYPOGRAPHY_SIZE_DEFAULT = "1rem";
19
+ export const TYPOGRAPHY_SIZE_INPUT_LABEL = "1rem";
20
+
21
+ export const TYPOGRAPHY_SIZE = {
22
+ TYPOGRAPHY_SIZE_2XS,
23
+ TYPOGRAPHY_SIZE_XS,
24
+ TYPOGRAPHY_SIZE_S,
25
+ TYPOGRAPHY_SIZE_M,
26
+ TYPOGRAPHY_SIZE_L,
27
+ TYPOGRAPHY_SIZE_XL,
28
+ TYPOGRAPHY_SIZE_2XL,
29
+ TYPOGRAPHY_SIZE_3XL,
30
+ TYPOGRAPHY_SIZE_4XL,
31
+ TYPOGRAPHY_SIZE_5XL,
32
+ TYPOGRAPHY_SIZE_6XL,
33
+ TYPOGRAPHY_SIZE_7XL,
34
+ };
package/build/js/{variables.d.ts → variables.global.d.ts} RENAMED
@@ -87,21 +87,6 @@ export const SPACING_BUTTON_PADDING_INLINE_XS: string;
87
87
  export const SPACING_BUTTON_PADDING_INLINE_SM: string;
88
88
  export const SPACING_BUTTON_PADDING_INLINE_MD: string;
89
89
  export const SPACING_BUTTON_PADDING_INLINE_LG: string;
90
- export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
91
- export const TYPOGRAPHY_SIZE_7XL: string;
92
- export const TYPOGRAPHY_SIZE_6XL: string;
93
- export const TYPOGRAPHY_SIZE_5XL: string;
94
- export const TYPOGRAPHY_SIZE_4XL: string;
95
- export const TYPOGRAPHY_SIZE_3XL: string;
96
- export const TYPOGRAPHY_SIZE_2XL: string;
97
- export const TYPOGRAPHY_SIZE_XL: string;
98
- export const TYPOGRAPHY_SIZE_L: string;
99
- export const TYPOGRAPHY_SIZE_M: string;
100
- export const TYPOGRAPHY_SIZE_S: string;
101
- export const TYPOGRAPHY_SIZE_XS: string;
102
- export const TYPOGRAPHY_SIZE_2XS: string;
103
- export const TYPOGRAPHY_SIZE_DEFAULT: string;
104
- export const TYPOGRAPHY_SIZE_INPUT_LABEL: string;
105
90
  export const TYPOGRAPHY_FF_SANS: string;
106
91
  export const TYPOGRAPHY_FF_SERIF: string;
107
92
  export const TYPOGRAPHY_FF_MONO: string;
package/build/js/{variables.js → variables.global.js} RENAMED
@@ -87,21 +87,6 @@ export const SPACING_BUTTON_PADDING_INLINE_XS = "0.694rem";
87
87
  export const SPACING_BUTTON_PADDING_INLINE_SM = "0.833rem";
88
88
  export const SPACING_BUTTON_PADDING_INLINE_MD = "1.2rem";
89
89
  export const SPACING_BUTTON_PADDING_INLINE_LG = "1.728rem";
90
- export const TYPOGRAPHY_SIZE_CODE_BLOCK = "0.9rem";
91
- export const TYPOGRAPHY_SIZE_7XL = "4.3rem";
92
- export const TYPOGRAPHY_SIZE_6XL = "3.583rem";
93
- export const TYPOGRAPHY_SIZE_5XL = "2.986rem";
94
- export const TYPOGRAPHY_SIZE_4XL = "2.488rem";
95
- export const TYPOGRAPHY_SIZE_3XL = "2.074rem";
96
- export const TYPOGRAPHY_SIZE_2XL = "1.728rem";
97
- export const TYPOGRAPHY_SIZE_XL = "1.44rem";
98
- export const TYPOGRAPHY_SIZE_L = "1.2rem";
99
- export const TYPOGRAPHY_SIZE_M = "1rem";
100
- export const TYPOGRAPHY_SIZE_S = "0.833rem";
101
- export const TYPOGRAPHY_SIZE_XS = "0.694rem";
102
- export const TYPOGRAPHY_SIZE_2XS = "0.578rem";
103
- export const TYPOGRAPHY_SIZE_DEFAULT = "1rem";
104
- export const TYPOGRAPHY_SIZE_INPUT_LABEL = "1rem";
105
90
  export const TYPOGRAPHY_FF_SANS = "'Mona Sans', sans-serif";
106
91
  export const TYPOGRAPHY_FF_SERIF = "'Instrument Serif', serif";
107
92
  export const TYPOGRAPHY_FF_MONO = "'Source Code Pro', monospace";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
3
  "description": "Design Tokens for the Pantheon Design System",
4
- "version": "2.0.0-alpha.6",
4
+ "version": "2.0.0-alpha.7",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",
@@ -15,12 +15,31 @@
15
15
  "Design Tokens"
16
16
  ],
17
17
  "main": "index.js",
18
- "types": "build/js/variables.d.ts",
18
+ "types": "build/js/variables.global.d.ts",
19
+ "exports": {
20
+ ".": {
21
+ "types": "./build/js/variables.global.d.ts",
22
+ "default": "./index.js"
23
+ },
24
+ "./build/js/variables.global.js": {
25
+ "types": "./build/js/variables.global.d.ts",
26
+ "default": "./build/js/variables.global.js"
27
+ },
28
+ "./build/js/variables.compact.js": {
29
+ "types": "./build/js/variables.compact.d.ts",
30
+ "default": "./build/js/variables.compact.js"
31
+ },
32
+ "./build/js/variables.expanded.js": {
33
+ "types": "./build/js/variables.expanded.d.ts",
34
+ "default": "./build/js/variables.expanded.js"
35
+ },
36
+ "./build/*": "./build/*"
37
+ },
19
38
  "files": [
20
39
  "build"
21
40
  ],
22
41
  "scripts": {
23
- "build:tokens": "style-dictionary build && node scripts/prepare-for-figma.js && node scripts/add-spacing-object.js",
42
+ "build:tokens": "style-dictionary build && node scripts/prepare-for-figma.js && node scripts/add-convenience-objects.js",
24
43
  "build:tokens:watch": "nodemon --watch tokens --exec 'npm run build:tokens'",
25
44
  "clean": "rm -rf build/",
26
45
  "prebuild:tokens": "npm run clean",