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

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 (4) hide show
  1. package/README.md +17 -0
  2. package/build/js/variables.d.ts +22 -0
  3. package/build/js/variables.js +42 -28
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -108,6 +108,23 @@ const styles = {
108
108
  };
109
109
  ```
110
110
 
111
+ **Note:** All values are exported as strings with units (e.g., `SPACING_M = "1rem"`).
112
+
113
+ #### Spacing Scale Object
114
+
115
+ For convenience, spacing scale tokens (8XS → 8XL) are also available as a grouped object:
116
+
117
+ ```javascript
118
+ import { SPACING } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
119
+
120
+ // Access scale tokens via the object
121
+ const padding = SPACING.SPACING_M; // "1rem"
122
+ const margin = SPACING.SPACING_2XL; // "1.728rem"
123
+
124
+ // Or use individual imports
125
+ import { SPACING_M, SPACING_2XL } from '@pantheon-systems/pds-design-tokens/build/js/variables.js';
126
+ ```
127
+
111
128
  ### JSON
112
129
 
113
130
  Access token metadata programmatically:
package/build/js/variables.d.ts CHANGED
@@ -129,3 +129,25 @@ export const Z_INDEX_OVERLAY: number;
129
129
  export const Z_INDEX_MODAL: number;
130
130
  export const Z_INDEX_MAX: number;
131
131
  export const Z_INDEX_RESET: number;
132
+
133
+ export const SPACING : {
134
+ SPACING_8XS: string;
135
+ SPACING_7XS: string;
136
+ SPACING_6XS: string;
137
+ SPACING_5XS: string;
138
+ SPACING_4XS: string;
139
+ SPACING_3XS: string;
140
+ SPACING_2XS: string;
141
+ SPACING_XS: string;
142
+ SPACING_S: string;
143
+ SPACING_M: string;
144
+ SPACING_L: string;
145
+ SPACING_XL: string;
146
+ SPACING_2XL: string;
147
+ SPACING_3XL: string;
148
+ SPACING_4XL: string;
149
+ SPACING_5XL: string;
150
+ SPACING_6XL: string;
151
+ SPACING_7XL: string;
152
+ SPACING_8XL: string;
153
+ };
package/build/js/variables.js CHANGED
@@ -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";
@@ -95,10 +88,10 @@ 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
90
  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";
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";
102
95
  export const TYPOGRAPHY_SIZE_3XL = "2.074rem";
103
96
  export const TYPOGRAPHY_SIZE_2XL = "1.728rem";
104
97
  export const TYPOGRAPHY_SIZE_XL = "1.44rem";
@@ -117,8 +110,7 @@ export const TYPOGRAPHY_FW_REGULAR = 400;
117
110
  export const TYPOGRAPHY_FW_MEDIUM = 500;
118
111
  export const TYPOGRAPHY_FW_SEMIBOLD = 600;
119
112
  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'";
113
+ 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
114
  export const TYPOGRAPHY_LS_XL = "6%";
123
115
  export const TYPOGRAPHY_LS_L = "4%";
124
116
  export const TYPOGRAPHY_LS_M = "2%";
@@ -137,3 +129,25 @@ export const Z_INDEX_OVERLAY = 700;
137
129
  export const Z_INDEX_MODAL = 900;
138
130
  export const Z_INDEX_MAX = 9999;
139
131
  export const Z_INDEX_RESET = 0;
132
+
133
+ export const SPACING = {
134
+ SPACING_8XS,
135
+ SPACING_7XS,
136
+ SPACING_6XS,
137
+ SPACING_5XS,
138
+ SPACING_4XS,
139
+ SPACING_3XS,
140
+ SPACING_2XS,
141
+ SPACING_XS,
142
+ SPACING_S,
143
+ SPACING_M,
144
+ SPACING_L,
145
+ SPACING_XL,
146
+ SPACING_2XL,
147
+ SPACING_3XL,
148
+ SPACING_4XL,
149
+ SPACING_5XL,
150
+ SPACING_6XL,
151
+ SPACING_7XL,
152
+ SPACING_8XL,
153
+ };
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.6",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",
@@ -20,7 +20,7 @@
20
20
  "build"
21
21
  ],
22
22
  "scripts": {
23
- "build:tokens": "style-dictionary build && node scripts/prepare-for-figma.js",
23
+ "build:tokens": "style-dictionary build && node scripts/prepare-for-figma.js && node scripts/add-spacing-object.js",
24
24
  "build:tokens:watch": "nodemon --watch tokens --exec 'npm run build:tokens'",
25
25
  "clean": "rm -rf build/",
26
26
  "prebuild:tokens": "npm run clean",