@pantheon-systems/pds-design-tokens 2.0.0-alpha.10 → 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 (16) hide show
  1. package/README.md +17 -44
  2. package/build/css/variables.global.css +24 -49
  3. package/build/css/variables.typography.css +34 -0
  4. package/build/figma/tokens.json +2798 -4621
  5. package/build/js/variables.global.d.ts +3 -28
  6. package/build/js/variables.global.js +35 -60
  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 +389 -242
  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/build/js/variables.global.d.ts CHANGED
@@ -55,6 +55,7 @@ export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT: string;
55
55
  export const SPACING_DASHBOARD_NAV_ITEM_PADDING: string;
56
56
  export const SPACING_STEPPER_INDICATOR_SIZE: string;
57
57
  export const SPACING_STEPPER_STEP_CONTENT_WIDTH: string;
58
+ export const SPACING_9XL: string;
58
59
  export const SPACING_8XL: string;
59
60
  export const SPACING_7XL: string;
60
61
  export const SPACING_6XL: string;
@@ -71,42 +72,16 @@ export const SPACING_2XS: string;
71
72
  export const SPACING_3XS: string;
72
73
  export const SPACING_4XS: string;
73
74
  export const SPACING_5XS: string;
74
- export const SPACING_6XS: string;
75
- export const SPACING_7XS: string;
76
- export const SPACING_8XS: string;
77
- export const SPACING_INPUT_HEIGHT: string;
78
75
  export const SPACING_BUTTON_HEIGHT_XS: string;
79
76
  export const SPACING_BUTTON_HEIGHT_SM: string;
80
77
  export const SPACING_BUTTON_HEIGHT_MD: string;
81
78
  export const SPACING_BUTTON_HEIGHT_LG: string;
82
- export const SPACING_BUTTON_PADDING_BLOCK_XS: string;
83
- export const SPACING_BUTTON_PADDING_BLOCK_SM: string;
84
- export const SPACING_BUTTON_PADDING_BLOCK_MD: string;
85
- export const SPACING_BUTTON_PADDING_BLOCK_LG: string;
86
79
  export const SPACING_BUTTON_PADDING_INLINE_XS: string;
87
80
  export const SPACING_BUTTON_PADDING_INLINE_SM: string;
88
81
  export const SPACING_BUTTON_PADDING_INLINE_MD: string;
89
82
  export const SPACING_BUTTON_PADDING_INLINE_LG: string;
90
- export const TYPOGRAPHY_FF_SANS: string;
91
- export const TYPOGRAPHY_FF_SERIF: string;
92
- export const TYPOGRAPHY_FF_MONO: string;
93
- export const TYPOGRAPHY_FW_LIGHT: number;
94
- export const TYPOGRAPHY_FW_REGULAR: number;
95
- export const TYPOGRAPHY_FW_MEDIUM: number;
96
- export const TYPOGRAPHY_FW_SEMIBOLD: number;
97
- export const TYPOGRAPHY_FW_BOLD: number;
98
- export const TYPOGRAPHY_FONT_CSS_IMPORT: string;
99
- export const TYPOGRAPHY_LS_XL: string;
100
- export const TYPOGRAPHY_LS_L: string;
101
- export const TYPOGRAPHY_LS_M: string;
102
- export const TYPOGRAPHY_LS_S: string;
103
- export const TYPOGRAPHY_LH_XL: string;
104
- export const TYPOGRAPHY_LH_L: string;
105
- export const TYPOGRAPHY_LH_M: string;
106
- export const TYPOGRAPHY_LH_S: string;
107
- export const TYPOGRAPHY_LH_CODE: string;
108
- export const TYPOGRAPHY_MULTIPLIER_SMALL: string;
109
- export const TYPOGRAPHY_MULTIPLIER_MEDIUM: string;
83
+ export const SPACING_INPUT_HEIGHT_SM: string;
84
+ export const SPACING_INPUT_HEIGHT_MD: string;
110
85
  export const Z_INDEX_NAVIGATION: number;
111
86
  export const Z_INDEX_DROPDOWN: number;
112
87
  export const Z_INDEX_NOTIFICATIONS: number;
package/build/js/variables.global.js CHANGED
@@ -33,7 +33,7 @@ export const CONTAINER_MODAL_WIDTH_LG = "47.5rem";
33
33
  export const CONTAINER_MODAL_WIDTH_XL = "67.5rem";
34
34
  export const CONTAINER_TOOLTIP_MAX_WIDTH = "12.5rem";
35
35
  export const CONTAINER_DASHBOARD_NAVBAR_MAX_WIDTH = "1440px";
36
- export const CONTAINER_PADDING_BASE = "1.44rem";
36
+ export const CONTAINER_PADDING_BASE = "1.5rem";
37
37
  export const CONTAINER_PADDING_NARROW_BP_MD = "12%";
38
38
  export const CONTAINER_PADDING_NARROW_BP_LG = "20%";
39
39
  export const CONTAINER_PADDING_STANDARD_BP_MD = "6%";
@@ -44,69 +44,44 @@ export const CONTAINER_MAX_WIDTH_NARROW = "1024px";
44
44
  export const CONTAINER_MAX_WIDTH_STANDARD = "1200px";
45
45
  export const CONTAINER_MAX_WIDTH_WIDE = "1440px";
46
46
  export const CONTAINER_MAX_WIDTH_X_WIDE = "1600px";
47
- export const GRID_COLUMNS_4_GAP = "1.2rem";
48
- export const GRID_COLUMNS_12_BP_MD_GAP_NARROW = "1.2rem";
49
- export const GRID_COLUMNS_12_BP_MD_GAP_STANDARD = "1.44rem";
50
- export const GRID_COLUMNS_12_BP_MD_GAP_WIDE = "1.728rem";
51
- export const GRID_COLUMNS_12_BP_LG_GAP_NARROW = "1.44rem";
52
- export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD = "1.728rem";
53
- export const GRID_COLUMNS_12_BP_LG_GAP_WIDE = "2.074rem";
47
+ export const GRID_COLUMNS_4_GAP = "1.25rem";
48
+ export const GRID_COLUMNS_12_BP_MD_GAP_NARROW = "1.25rem";
49
+ export const GRID_COLUMNS_12_BP_MD_GAP_STANDARD = "1.5rem";
50
+ export const GRID_COLUMNS_12_BP_MD_GAP_WIDE = "2rem";
51
+ export const GRID_COLUMNS_12_BP_LG_GAP_NARROW = "1.5rem";
52
+ export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD = "2rem";
53
+ export const GRID_COLUMNS_12_BP_LG_GAP_WIDE = "2.5rem";
54
54
  export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT = "2.25rem";
55
55
  export const SPACING_DASHBOARD_NAV_ITEM_PADDING = "0.625rem";
56
- export const SPACING_STEPPER_INDICATOR_SIZE = "1.2rem";
56
+ export const SPACING_STEPPER_INDICATOR_SIZE = "1.25rem";
57
57
  export const SPACING_STEPPER_STEP_CONTENT_WIDTH = "7rem";
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";
63
- export const SPACING_3XL = "2.074rem";
64
- export const SPACING_2XL = "1.728rem";
65
- export const SPACING_XL = "1.44rem";
66
- export const SPACING_L = "1.2rem";
58
+ export const SPACING_9XL = "10rem";
59
+ export const SPACING_8XL = "8rem";
60
+ export const SPACING_7XL = "6rem";
61
+ export const SPACING_6XL = "5rem";
62
+ export const SPACING_5XL = "4rem";
63
+ export const SPACING_4XL = "3rem";
64
+ export const SPACING_3XL = "2.5rem";
65
+ export const SPACING_2XL = "2rem";
66
+ export const SPACING_XL = "1.5rem";
67
+ export const SPACING_L = "1.25rem";
67
68
  export const SPACING_M = "1rem";
68
- export const SPACING_S = "0.833rem";
69
- export const SPACING_XS = "0.694rem";
70
- export const SPACING_2XS = "0.578rem";
71
- export const SPACING_3XS = "0.481rem";
72
- export const SPACING_4XS = "0.401rem";
73
- export const SPACING_5XS = "0.334rem";
74
- export const SPACING_6XS = "0.278rem";
75
- export const SPACING_7XS = "0.232rem";
76
- export const SPACING_8XS = "0.193rem";
77
- export const SPACING_INPUT_HEIGHT = "2.488rem";
78
- export const SPACING_BUTTON_HEIGHT_XS = "1.44rem";
79
- export const SPACING_BUTTON_HEIGHT_SM = "2.074rem";
80
- export const SPACING_BUTTON_HEIGHT_MD = "2.488rem";
81
- export const SPACING_BUTTON_HEIGHT_LG = "2.986rem";
82
- export const SPACING_BUTTON_PADDING_BLOCK_XS = "0.25rem";
83
- export const SPACING_BUTTON_PADDING_BLOCK_SM = "0.481rem";
84
- export const SPACING_BUTTON_PADDING_BLOCK_MD = "0.578rem";
85
- export const SPACING_BUTTON_PADDING_BLOCK_LG = "0.833rem";
86
- export const SPACING_BUTTON_PADDING_INLINE_XS = "0.694rem";
87
- export const SPACING_BUTTON_PADDING_INLINE_SM = "0.833rem";
88
- export const SPACING_BUTTON_PADDING_INLINE_MD = "1.2rem";
89
- export const SPACING_BUTTON_PADDING_INLINE_LG = "1.728rem";
90
- export const TYPOGRAPHY_FF_SANS = "'Mona Sans', sans-serif";
91
- export const TYPOGRAPHY_FF_SERIF = "'Instrument Serif', serif";
92
- export const TYPOGRAPHY_FF_MONO = "'Source Code Pro', monospace";
93
- export const TYPOGRAPHY_FW_LIGHT = 300;
94
- export const TYPOGRAPHY_FW_REGULAR = 400;
95
- export const TYPOGRAPHY_FW_MEDIUM = 500;
96
- export const TYPOGRAPHY_FW_SEMIBOLD = 600;
97
- export const TYPOGRAPHY_FW_BOLD = 700;
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'";
99
- export const TYPOGRAPHY_LS_XL = "6%";
100
- export const TYPOGRAPHY_LS_L = "4%";
101
- export const TYPOGRAPHY_LS_M = "2%";
102
- export const TYPOGRAPHY_LS_S = "1%";
103
- export const TYPOGRAPHY_LH_XL = "195%";
104
- export const TYPOGRAPHY_LH_L = "165%";
105
- export const TYPOGRAPHY_LH_M = "140%";
106
- export const TYPOGRAPHY_LH_S = "120%";
107
- export const TYPOGRAPHY_LH_CODE = "180%";
108
- export const TYPOGRAPHY_MULTIPLIER_SMALL = "0.84";
109
- export const TYPOGRAPHY_MULTIPLIER_MEDIUM = "0.88";
69
+ export const SPACING_S = "0.75rem";
70
+ export const SPACING_XS = "0.625rem";
71
+ export const SPACING_2XS = "0.5rem";
72
+ export const SPACING_3XS = "0.375rem";
73
+ export const SPACING_4XS = "0.25rem";
74
+ export const SPACING_5XS = "0.125rem";
75
+ export const SPACING_BUTTON_HEIGHT_XS = "1.5rem";
76
+ export const SPACING_BUTTON_HEIGHT_SM = "2rem";
77
+ export const SPACING_BUTTON_HEIGHT_MD = "2.5rem";
78
+ export const SPACING_BUTTON_HEIGHT_LG = "3rem";
79
+ export const SPACING_BUTTON_PADDING_INLINE_XS = "0.5rem";
80
+ export const SPACING_BUTTON_PADDING_INLINE_SM = "0.75rem";
81
+ export const SPACING_BUTTON_PADDING_INLINE_MD = "1rem";
82
+ export const SPACING_BUTTON_PADDING_INLINE_LG = "1.5rem";
83
+ export const SPACING_INPUT_HEIGHT_SM = "2rem";
84
+ export const SPACING_INPUT_HEIGHT_MD = "2.5rem";
110
85
  export const Z_INDEX_NAVIGATION = 100;
111
86
  export const Z_INDEX_DROPDOWN = 300;
112
87
  export const Z_INDEX_NOTIFICATIONS = 500;
package/build/js/variables.typography.d.ts ADDED
@@ -0,0 +1,65 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_FF_SANS: string;
6
+ export const TYPOGRAPHY_FF_SERIF: string;
7
+ export const TYPOGRAPHY_FF_MONO: string;
8
+ export const TYPOGRAPHY_FW_LIGHT: number;
9
+ export const TYPOGRAPHY_FW_REGULAR: number;
10
+ export const TYPOGRAPHY_FW_MEDIUM: number;
11
+ export const TYPOGRAPHY_FW_SEMIBOLD: number;
12
+ export const TYPOGRAPHY_FW_BOLD: number;
13
+ export const TYPOGRAPHY_FONT_CSS_IMPORT: string;
14
+ export const TYPOGRAPHY_LS_XL: string;
15
+ export const TYPOGRAPHY_LS_L: string;
16
+ export const TYPOGRAPHY_LS_M: string;
17
+ export const TYPOGRAPHY_LS_S: string;
18
+ export const TYPOGRAPHY_LH_XL: string;
19
+ export const TYPOGRAPHY_LH_L: string;
20
+ export const TYPOGRAPHY_LH_M: string;
21
+ export const TYPOGRAPHY_LH_S: string;
22
+ export const TYPOGRAPHY_LH_XS: string;
23
+ export const TYPOGRAPHY_LH_CODE: string;
24
+ /** 10px - Metadata, tiny labels */
25
+ export const TYPOGRAPHY_SIZE_2XS: string;
26
+ /** 12px - Small UI text, captions */
27
+ export const TYPOGRAPHY_SIZE_XS: string;
28
+ /** 14px - Product default body text, forms, navigation, labels */
29
+ export const TYPOGRAPHY_SIZE_S: string;
30
+ /** 16px - h5/h6 in product, default body in marketing, prose body */
31
+ export const TYPOGRAPHY_SIZE_M: string;
32
+ /** 18px - h4 in product, hero body/h6 in marketing, h5/blockquote in prose */
33
+ export const TYPOGRAPHY_SIZE_L: string;
34
+ /** 20px - h3 in product, h5/blog body in marketing, h4 in prose */
35
+ export const TYPOGRAPHY_SIZE_XL: string;
36
+ /** 24px - h2 in product, h4 in marketing, h3 in prose */
37
+ export const TYPOGRAPHY_SIZE_2XL: string;
38
+ /** 28px - h1 in product, h2 in prose */
39
+ export const TYPOGRAPHY_SIZE_3XL: string;
40
+ /** 32px - h3 in marketing, h1 in prose */
41
+ export const TYPOGRAPHY_SIZE_4XL: string;
42
+ /** 36px - h1 hero/empty states in product, h2 in marketing */
43
+ export const TYPOGRAPHY_SIZE_5XL: string;
44
+ /** 48px - Blog h1, large h2 in marketing */
45
+ export const TYPOGRAPHY_SIZE_6XL: string;
46
+ /** 60px - Hero h1 in marketing */
47
+ export const TYPOGRAPHY_SIZE_7XL: string;
48
+ /** 72px - Jumbo h1 in marketing */
49
+ export const TYPOGRAPHY_SIZE_8XL: string;
50
+
51
+ export const TYPOGRAPHY_SIZE : {
52
+ TYPOGRAPHY_SIZE_2XS: string;
53
+ TYPOGRAPHY_SIZE_XS: string;
54
+ TYPOGRAPHY_SIZE_S: string;
55
+ TYPOGRAPHY_SIZE_M: string;
56
+ TYPOGRAPHY_SIZE_L: string;
57
+ TYPOGRAPHY_SIZE_XL: string;
58
+ TYPOGRAPHY_SIZE_2XL: string;
59
+ TYPOGRAPHY_SIZE_3XL: string;
60
+ TYPOGRAPHY_SIZE_4XL: string;
61
+ TYPOGRAPHY_SIZE_5XL: string;
62
+ TYPOGRAPHY_SIZE_6XL: string;
63
+ TYPOGRAPHY_SIZE_7XL: string;
64
+ TYPOGRAPHY_SIZE_8XL: string;
65
+ };
package/build/js/variables.typography.js ADDED
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const TYPOGRAPHY_FF_SANS = "'Mona Sans', sans-serif";
6
+ export const TYPOGRAPHY_FF_SERIF = "'Instrument Serif', serif";
7
+ export const TYPOGRAPHY_FF_MONO = "'Source Code Pro', monospace";
8
+ export const TYPOGRAPHY_FW_LIGHT = 300;
9
+ export const TYPOGRAPHY_FW_REGULAR = 400;
10
+ export const TYPOGRAPHY_FW_MEDIUM = 500;
11
+ export const TYPOGRAPHY_FW_SEMIBOLD = 600;
12
+ export const TYPOGRAPHY_FW_BOLD = 700;
13
+ 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'";
14
+ export const TYPOGRAPHY_LS_XL = "6%";
15
+ export const TYPOGRAPHY_LS_L = "4%";
16
+ export const TYPOGRAPHY_LS_M = "2%";
17
+ export const TYPOGRAPHY_LS_S = "1%";
18
+ export const TYPOGRAPHY_LH_XL = "195%";
19
+ export const TYPOGRAPHY_LH_L = "165%";
20
+ export const TYPOGRAPHY_LH_M = "150%";
21
+ export const TYPOGRAPHY_LH_S = "130%";
22
+ export const TYPOGRAPHY_LH_XS = "120%";
23
+ export const TYPOGRAPHY_LH_CODE = "180%";
24
+ export const TYPOGRAPHY_SIZE_2XS = "0.625rem"; // 10px - Metadata, tiny labels
25
+ export const TYPOGRAPHY_SIZE_XS = "0.75rem"; // 12px - Small UI text, captions
26
+ export const TYPOGRAPHY_SIZE_S = "0.875rem"; // 14px - Product default body text, forms, navigation, labels
27
+ export const TYPOGRAPHY_SIZE_M = "1rem"; // 16px - h5/h6 in product, default body in marketing, prose body
28
+ export const TYPOGRAPHY_SIZE_L = "1.125rem"; // 18px - h4 in product, hero body/h6 in marketing, h5/blockquote in prose
29
+ export const TYPOGRAPHY_SIZE_XL = "1.25rem"; // 20px - h3 in product, h5/blog body in marketing, h4 in prose
30
+ export const TYPOGRAPHY_SIZE_2XL = "1.5rem"; // 24px - h2 in product, h4 in marketing, h3 in prose
31
+ export const TYPOGRAPHY_SIZE_3XL = "1.75rem"; // 28px - h1 in product, h2 in prose
32
+ export const TYPOGRAPHY_SIZE_4XL = "2rem"; // 32px - h3 in marketing, h1 in prose
33
+ export const TYPOGRAPHY_SIZE_5XL = "2.25rem"; // 36px - h1 hero/empty states in product, h2 in marketing
34
+ export const TYPOGRAPHY_SIZE_6XL = "3rem"; // 48px - Blog h1, large h2 in marketing
35
+ export const TYPOGRAPHY_SIZE_7XL = "3.75rem"; // 60px - Hero h1 in marketing
36
+ export const TYPOGRAPHY_SIZE_8XL = "4.5rem"; // 72px - Jumbo h1 in marketing
37
+
38
+ export const TYPOGRAPHY_SIZE = {
39
+ TYPOGRAPHY_SIZE_2XS,
40
+ TYPOGRAPHY_SIZE_XS,
41
+ TYPOGRAPHY_SIZE_S,
42
+ TYPOGRAPHY_SIZE_M,
43
+ TYPOGRAPHY_SIZE_L,
44
+ TYPOGRAPHY_SIZE_XL,
45
+ TYPOGRAPHY_SIZE_2XL,
46
+ TYPOGRAPHY_SIZE_3XL,
47
+ TYPOGRAPHY_SIZE_4XL,
48
+ TYPOGRAPHY_SIZE_5XL,
49
+ TYPOGRAPHY_SIZE_6XL,
50
+ TYPOGRAPHY_SIZE_7XL,
51
+ TYPOGRAPHY_SIZE_8XL,
52
+ };