@pantheon-systems/pds-design-tokens 2.0.0-alpha.5 → 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 +72 -15
  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} +22 -15
  7. package/build/js/{variables.js → variables.global.js} +38 -39
  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,24 +99,72 @@ 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
 
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
+
111
168
  ### JSON
112
169
 
113
170
  Access token metadata programmatically:
@@ -118,12 +175,12 @@ import tokens from '@pantheon-systems/pds-design-tokens/build/json/tokens.json';
118
175
 
119
176
  ## Available Formats
120
177
 
121
- | Format | Location | Use Case |
122
- | ------------------------- | -------------- | --------------------------------------- |
123
- | **CSS Custom Properties** | `build/css/` | Styling (recommended) |
124
- | **JavaScript Constants** | `build/js/` | JS/TS when CSS variables can't be used |
125
- | **JSON** | `build/json/` | Programmatic access, build tools |
126
- | **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 |
127
184
 
128
185
  ## Theming
129
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;
@@ -129,3 +114,25 @@ export const Z_INDEX_OVERLAY: number;
129
114
  export const Z_INDEX_MODAL: number;
130
115
  export const Z_INDEX_MAX: number;
131
116
  export const Z_INDEX_RESET: number;
117
+
118
+ export const SPACING : {
119
+ SPACING_8XS: string;
120
+ SPACING_7XS: string;
121
+ SPACING_6XS: string;
122
+ SPACING_5XS: string;
123
+ SPACING_4XS: string;
124
+ SPACING_3XS: string;
125
+ SPACING_2XS: string;
126
+ SPACING_XS: string;
127
+ SPACING_S: string;
128
+ SPACING_M: string;
129
+ SPACING_L: string;
130
+ SPACING_XL: string;
131
+ SPACING_2XL: string;
132
+ SPACING_3XL: string;
133
+ SPACING_4XL: string;
134
+ SPACING_5XL: string;
135
+ SPACING_6XL: string;
136
+ SPACING_7XL: string;
137
+ SPACING_8XL: string;
138
+ };
package/build/js/{variables.js → variables.global.js} RENAMED
@@ -7,20 +7,13 @@ export const ANIMATION_DURATION_DEFAULT = "200ms";
7
7
  export const ANIMATION_DURATION_DROPDOWN = "300ms";
8
8
  export const ANIMATION_DURATION_REVEAL = "300ms";
9
9
  export const ANIMATION_TIMING_FUNCTION_DEFAULT = "cubic-bezier(.2, 0, 0, 1)";
10
- export const ANIMATION_TRANSITION_BUTTON =
11
- "background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
12
- export const ANIMATION_TRANSITION_DEFAULT =
13
- "all 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
14
- export const ANIMATION_TRANSITION_FOCUS =
15
- "outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
16
- export const ANIMATION_TRANSITION_INPUT =
17
- "border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
18
- export const ANIMATION_TRANSITION_LINK =
19
- "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
20
- export const ANIMATION_TRANSITION_REVEAL =
21
- "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)";
22
- export const ANIMATION_TRANSITION_ROTATION =
23
- "transform 200ms cubic-bezier(.2, 0, 0, 1)";
10
+ export const ANIMATION_TRANSITION_BUTTON = "background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
11
+ export const ANIMATION_TRANSITION_DEFAULT = "all 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
12
+ export const ANIMATION_TRANSITION_FOCUS = "outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
13
+ export const ANIMATION_TRANSITION_INPUT = "border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
14
+ export const ANIMATION_TRANSITION_LINK = "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
15
+ export const ANIMATION_TRANSITION_REVEAL = "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)";
16
+ export const ANIMATION_TRANSITION_ROTATION = "transform 200ms cubic-bezier(.2, 0, 0, 1)";
24
17
  export const BORDER_WIDTH_STEPPER = "3px";
25
18
  export const BORDER_WIDTH_DEFAULT = "1px";
26
19
  export const BORDER_WIDTH_THICKER = "2px";
@@ -62,11 +55,11 @@ export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT = "2.25rem";
62
55
  export const SPACING_DASHBOARD_NAV_ITEM_PADDING = "0.625rem";
63
56
  export const SPACING_STEPPER_INDICATOR_SIZE = "1.2rem";
64
57
  export const SPACING_STEPPER_STEP_CONTENT_WIDTH = "7rem";
65
- export const SPACING_8XL = "5.161rem";
66
- export const SPACING_7XL = "4.301rem";
67
- export const SPACING_6XL = "3.584rem";
68
- export const SPACING_5XL = "2.987rem";
69
- export const SPACING_4XL = "2.489rem";
58
+ export const SPACING_8XL = "5.16rem";
59
+ export const SPACING_7XL = "4.3rem";
60
+ export const SPACING_6XL = "3.583rem";
61
+ export const SPACING_5XL = "2.986rem";
62
+ export const SPACING_4XL = "2.488rem";
70
63
  export const SPACING_3XL = "2.074rem";
71
64
  export const SPACING_2XL = "1.728rem";
72
65
  export const SPACING_XL = "1.44rem";
@@ -81,11 +74,11 @@ export const SPACING_5XS = "0.334rem";
81
74
  export const SPACING_6XS = "0.278rem";
82
75
  export const SPACING_7XS = "0.232rem";
83
76
  export const SPACING_8XS = "0.193rem";
84
- export const SPACING_INPUT_HEIGHT = "2.489rem";
77
+ export const SPACING_INPUT_HEIGHT = "2.488rem";
85
78
  export const SPACING_BUTTON_HEIGHT_XS = "1.44rem";
86
79
  export const SPACING_BUTTON_HEIGHT_SM = "2.074rem";
87
- export const SPACING_BUTTON_HEIGHT_MD = "2.489rem";
88
- export const SPACING_BUTTON_HEIGHT_LG = "2.987rem";
80
+ export const SPACING_BUTTON_HEIGHT_MD = "2.488rem";
81
+ export const SPACING_BUTTON_HEIGHT_LG = "2.986rem";
89
82
  export const SPACING_BUTTON_PADDING_BLOCK_XS = "0.25rem";
90
83
  export const SPACING_BUTTON_PADDING_BLOCK_SM = "0.481rem";
91
84
  export const SPACING_BUTTON_PADDING_BLOCK_MD = "0.578rem";
@@ -94,21 +87,6 @@ export const SPACING_BUTTON_PADDING_INLINE_XS = "0.694rem";
94
87
  export const SPACING_BUTTON_PADDING_INLINE_SM = "0.833rem";
95
88
  export const SPACING_BUTTON_PADDING_INLINE_MD = "1.2rem";
96
89
  export const SPACING_BUTTON_PADDING_INLINE_LG = "1.728rem";
97
- export const TYPOGRAPHY_SIZE_CODE_BLOCK = "0.9rem";
98
- export const TYPOGRAPHY_SIZE_7XL = "4.301rem";
99
- export const TYPOGRAPHY_SIZE_6XL = "3.584rem";
100
- export const TYPOGRAPHY_SIZE_5XL = "2.987rem";
101
- export const TYPOGRAPHY_SIZE_4XL = "2.489rem";
102
- export const TYPOGRAPHY_SIZE_3XL = "2.074rem";
103
- export const TYPOGRAPHY_SIZE_2XL = "1.728rem";
104
- export const TYPOGRAPHY_SIZE_XL = "1.44rem";
105
- export const TYPOGRAPHY_SIZE_L = "1.2rem";
106
- export const TYPOGRAPHY_SIZE_M = "1rem";
107
- export const TYPOGRAPHY_SIZE_S = "0.833rem";
108
- export const TYPOGRAPHY_SIZE_XS = "0.694rem";
109
- export const TYPOGRAPHY_SIZE_2XS = "0.578rem";
110
- export const TYPOGRAPHY_SIZE_DEFAULT = "1rem";
111
- export const TYPOGRAPHY_SIZE_INPUT_LABEL = "1rem";
112
90
  export const TYPOGRAPHY_FF_SANS = "'Mona Sans', sans-serif";
113
91
  export const TYPOGRAPHY_FF_SERIF = "'Instrument Serif', serif";
114
92
  export const TYPOGRAPHY_FF_MONO = "'Source Code Pro', monospace";
@@ -117,8 +95,7 @@ export const TYPOGRAPHY_FW_REGULAR = 400;
117
95
  export const TYPOGRAPHY_FW_MEDIUM = 500;
118
96
  export const TYPOGRAPHY_FW_SEMIBOLD = 600;
119
97
  export const TYPOGRAPHY_FW_BOLD = 700;
120
- export const TYPOGRAPHY_FONT_CSS_IMPORT =
121
- "'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'";
98
+ export const 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'";
122
99
  export const TYPOGRAPHY_LS_XL = "6%";
123
100
  export const TYPOGRAPHY_LS_L = "4%";
124
101
  export const TYPOGRAPHY_LS_M = "2%";
@@ -137,3 +114,25 @@ export const Z_INDEX_OVERLAY = 700;
137
114
  export const Z_INDEX_MODAL = 900;
138
115
  export const Z_INDEX_MAX = 9999;
139
116
  export const Z_INDEX_RESET = 0;
117
+
118
+ export const SPACING = {
119
+ SPACING_8XS,
120
+ SPACING_7XS,
121
+ SPACING_6XS,
122
+ SPACING_5XS,
123
+ SPACING_4XS,
124
+ SPACING_3XS,
125
+ SPACING_2XS,
126
+ SPACING_XS,
127
+ SPACING_S,
128
+ SPACING_M,
129
+ SPACING_L,
130
+ SPACING_XL,
131
+ SPACING_2XL,
132
+ SPACING_3XL,
133
+ SPACING_4XL,
134
+ SPACING_5XL,
135
+ SPACING_6XL,
136
+ SPACING_7XL,
137
+ SPACING_8XL,
138
+ };
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.5",
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",
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",