@pantheon-systems/pds-design-tokens 2.0.0-alpha.4 → 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 (8) hide show
  1. package/README.md +60 -1
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.global.css +24 -4
  4. package/build/figma/tokens.json +380 -0
  5. package/build/js/variables.d.ts +43 -4
  6. package/build/js/variables.js +60 -29
  7. package/build/json/tokens.json +505 -112
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -41,11 +41,53 @@ Use tokens in your styles:
41
41
  .my-component {
42
42
  color: var(--pds-color-fg-default);
43
43
  background: var(--pds-color-bg-default);
44
- padding: var(--pds-spacing-M);
44
+ padding: var(--pds-spacing-m);
45
45
  font-family: var(--pds-typography-ff-sans);
46
46
  }
47
47
  ```
48
48
 
49
+ #### Using Breakpoints (Optional)
50
+
51
+ Breakpoint custom media queries require PostCSS configuration. Install the required plugins:
52
+
53
+ ```bash
54
+ npm install postcss-custom-media @csstools/postcss-global-data --save-dev
55
+ ```
56
+
57
+ Configure PostCSS to load breakpoints globally:
58
+
59
+ ```javascript
60
+ // postcss.config.js
61
+ import postcssGlobalData from '@csstools/postcss-global-data';
62
+ import postcssCustomMedia from 'postcss-custom-media';
63
+
64
+ export default {
65
+ plugins: [
66
+ postcssGlobalData({
67
+ files: [
68
+ 'node_modules/@pantheon-systems/pds-design-tokens/build/css/breakpoints.css',
69
+ ],
70
+ }),
71
+ postcssCustomMedia,
72
+ // ... other plugins
73
+ ],
74
+ };
75
+ ```
76
+
77
+ Use breakpoints in your CSS without imports:
78
+
79
+ ```css
80
+ .my-component {
81
+ padding: var(--pds-spacing-s);
82
+ }
83
+
84
+ @media (--pds-bp-md) {
85
+ .my-component {
86
+ padding: var(--pds-spacing-l);
87
+ }
88
+ }
89
+ ```
90
+
49
91
  ### JavaScript Constants
50
92
 
51
93
  Import tokens as JavaScript constants:
@@ -66,6 +108,23 @@ const styles = {
66
108
  };
67
109
  ```
68
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
+
69
128
  ### JSON
70
129
 
71
130
  Access token metadata programmatically:
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
@@ -25,6 +25,7 @@
25
25
  --pds-container-modal-width-lg: 47.5rem;
26
26
  --pds-container-modal-width-xl: 67.5rem;
27
27
  --pds-container-tooltip-max-width: 12.5rem;
28
+ --pds-container-dashboard-navbar-max-width: 1440px;
28
29
  --pds-container-padding-base: var(--pds-spacing-xl);
29
30
  --pds-container-padding-narrow-bp-md: 12%;
30
31
  --pds-container-padding-narrow-bp-lg: 20%;
@@ -36,12 +37,17 @@
36
37
  --pds-container-max-width-standard: 1200px;
37
38
  --pds-container-max-width-wide: 1440px;
38
39
  --pds-container-max-width-x-wide: 1600px;
39
- --pds-grid-marketing-column-small: 21.34375%;
40
- --pds-grid-marketing-column-medium-large: 4.36875%;
41
- --pds-grid-marketing-gap-small: 4.875%;
42
- --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);
43
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
44
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
49
+ --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
50
+ --pds-spacing-stepper-step-content-width: 7rem;
45
51
  --pds-spacing-8xl: 5.16rem;
46
52
  --pds-spacing-7xl: 4.3rem;
47
53
  --pds-spacing-6xl: 3.583rem;
@@ -61,6 +67,19 @@
61
67
  --pds-spacing-6xs: 0.278rem;
62
68
  --pds-spacing-7xs: 0.232rem;
63
69
  --pds-spacing-8xs: 0.193rem;
70
+ --pds-spacing-input-height: var(--pds-spacing-4xl);
71
+ --pds-spacing-button-height-xs: var(--pds-spacing-xl);
72
+ --pds-spacing-button-height-sm: var(--pds-spacing-3xl);
73
+ --pds-spacing-button-height-md: var(--pds-spacing-4xl);
74
+ --pds-spacing-button-height-lg: var(--pds-spacing-5xl);
75
+ --pds-spacing-button-padding-block-xs: 0.25rem;
76
+ --pds-spacing-button-padding-block-sm: var(--pds-spacing-3xs);
77
+ --pds-spacing-button-padding-block-md: var(--pds-spacing-2xs);
78
+ --pds-spacing-button-padding-block-lg: var(--pds-spacing-s);
79
+ --pds-spacing-button-padding-inline-xs: var(--pds-spacing-xs);
80
+ --pds-spacing-button-padding-inline-sm: var(--pds-spacing-s);
81
+ --pds-spacing-button-padding-inline-md: var(--pds-spacing-l);
82
+ --pds-spacing-button-padding-inline-lg: var(--pds-spacing-2xl);
64
83
  --pds-typography-ff-sans: 'Mona Sans', sans-serif;
65
84
  --pds-typography-ff-serif: 'Instrument Serif', serif;
66
85
  --pds-typography-ff-mono: 'Source Code Pro', monospace;
@@ -78,6 +97,7 @@
78
97
  --pds-typography-lh-l: 165%;
79
98
  --pds-typography-lh-m: 140%;
80
99
  --pds-typography-lh-s: 120%;
100
+ --pds-typography-lh-code: 180%;
81
101
  --pds-typography-multiplier-small: 0.84;
82
102
  --pds-typography-multiplier-medium: 0.88;
83
103
  --pds-z-index-navigation: 100;
package/build/figma/tokens.json CHANGED
@@ -1,6 +1,76 @@
1
1
  {
2
2
  "global-primitive": {
3
3
  "primitive": {
4
+ "bp": {
5
+ "sm": {
6
+ "value": 0,
7
+ "type": "dimension",
8
+ "$extensions": {
9
+ "public": true,
10
+ "defaultUnit": "px",
11
+ "com.figma": {
12
+ "scopes": [
13
+ "WIDTH_HEIGHT"
14
+ ],
15
+ "exportAs": "variable",
16
+ "codeSyntax": {
17
+ "WEB": "--pds-bp-sm"
18
+ }
19
+ }
20
+ }
21
+ },
22
+ "md": {
23
+ "value": 768,
24
+ "type": "dimension",
25
+ "$extensions": {
26
+ "public": true,
27
+ "defaultUnit": "px",
28
+ "com.figma": {
29
+ "scopes": [
30
+ "WIDTH_HEIGHT"
31
+ ],
32
+ "exportAs": "variable",
33
+ "codeSyntax": {
34
+ "WEB": "--pds-bp-md"
35
+ }
36
+ }
37
+ }
38
+ },
39
+ "lg": {
40
+ "value": 1280,
41
+ "type": "dimension",
42
+ "$extensions": {
43
+ "public": true,
44
+ "defaultUnit": "px",
45
+ "com.figma": {
46
+ "scopes": [
47
+ "WIDTH_HEIGHT"
48
+ ],
49
+ "exportAs": "variable",
50
+ "codeSyntax": {
51
+ "WEB": "--pds-bp-lg"
52
+ }
53
+ }
54
+ }
55
+ },
56
+ "xl": {
57
+ "value": 1440,
58
+ "type": "dimension",
59
+ "$extensions": {
60
+ "public": true,
61
+ "defaultUnit": "px",
62
+ "com.figma": {
63
+ "scopes": [
64
+ "WIDTH_HEIGHT"
65
+ ],
66
+ "exportAs": "variable",
67
+ "codeSyntax": {
68
+ "WEB": "--pds-bp-xl"
69
+ }
70
+ }
71
+ }
72
+ }
73
+ },
4
74
  "spacing": {
5
75
  "8XL": {
6
76
  "value": 82.56,
@@ -832,6 +902,259 @@
832
902
  }
833
903
  }
834
904
  }
905
+ },
906
+ "spacing": {
907
+ "input": {
908
+ "height": {
909
+ "value": "{spacing.4XL}",
910
+ "type": "dimension",
911
+ "$extensions": {
912
+ "public": true,
913
+ "defaultUnit": "rem",
914
+ "com.figma": {
915
+ "scopes": [
916
+ "WIDTH_HEIGHT"
917
+ ],
918
+ "exportAs": "variable",
919
+ "codeSyntax": {
920
+ "WEB": "--pds-spacing-input-height"
921
+ }
922
+ }
923
+ }
924
+ }
925
+ },
926
+ "button": {
927
+ "height": {
928
+ "xs": {
929
+ "value": "{spacing.XL}",
930
+ "type": "dimension",
931
+ "$extensions": {
932
+ "public": true,
933
+ "defaultUnit": "rem",
934
+ "com.figma": {
935
+ "scopes": [
936
+ "WIDTH_HEIGHT"
937
+ ],
938
+ "exportAs": "variable",
939
+ "codeSyntax": {
940
+ "WEB": "--pds-spacing-button-height-xs"
941
+ }
942
+ }
943
+ }
944
+ },
945
+ "sm": {
946
+ "value": "{spacing.3XL}",
947
+ "type": "dimension",
948
+ "$extensions": {
949
+ "public": true,
950
+ "defaultUnit": "rem",
951
+ "com.figma": {
952
+ "scopes": [
953
+ "WIDTH_HEIGHT"
954
+ ],
955
+ "exportAs": "variable",
956
+ "codeSyntax": {
957
+ "WEB": "--pds-spacing-button-height-sm"
958
+ }
959
+ }
960
+ }
961
+ },
962
+ "md": {
963
+ "value": "{spacing.4XL}",
964
+ "type": "dimension",
965
+ "$extensions": {
966
+ "public": true,
967
+ "defaultUnit": "rem",
968
+ "com.figma": {
969
+ "scopes": [
970
+ "WIDTH_HEIGHT"
971
+ ],
972
+ "exportAs": "variable",
973
+ "codeSyntax": {
974
+ "WEB": "--pds-spacing-button-height-md"
975
+ }
976
+ }
977
+ }
978
+ },
979
+ "lg": {
980
+ "value": "{spacing.5XL}",
981
+ "type": "dimension",
982
+ "$extensions": {
983
+ "public": true,
984
+ "defaultUnit": "rem",
985
+ "com.figma": {
986
+ "scopes": [
987
+ "WIDTH_HEIGHT"
988
+ ],
989
+ "exportAs": "variable",
990
+ "codeSyntax": {
991
+ "WEB": "--pds-spacing-button-height-lg"
992
+ }
993
+ }
994
+ }
995
+ }
996
+ },
997
+ "padding-block": {
998
+ "xs": {
999
+ "value": 4,
1000
+ "type": "dimension",
1001
+ "$extensions": {
1002
+ "public": true,
1003
+ "defaultUnit": "rem",
1004
+ "com.figma": {
1005
+ "scopes": [
1006
+ "GAP"
1007
+ ],
1008
+ "exportAs": "variable",
1009
+ "codeSyntax": {
1010
+ "WEB": "--pds-spacing-button-padding-block-xs"
1011
+ }
1012
+ }
1013
+ }
1014
+ },
1015
+ "sm": {
1016
+ "value": "{spacing.3XS}",
1017
+ "type": "dimension",
1018
+ "$extensions": {
1019
+ "public": true,
1020
+ "defaultUnit": "rem",
1021
+ "com.figma": {
1022
+ "scopes": [
1023
+ "GAP"
1024
+ ],
1025
+ "exportAs": "variable",
1026
+ "codeSyntax": {
1027
+ "WEB": "--pds-spacing-button-padding-block-sm"
1028
+ }
1029
+ }
1030
+ }
1031
+ },
1032
+ "md": {
1033
+ "value": "{spacing.2XS}",
1034
+ "type": "dimension",
1035
+ "$extensions": {
1036
+ "public": true,
1037
+ "defaultUnit": "rem",
1038
+ "com.figma": {
1039
+ "scopes": [
1040
+ "GAP"
1041
+ ],
1042
+ "exportAs": "variable",
1043
+ "codeSyntax": {
1044
+ "WEB": "--pds-spacing-button-padding-block-md"
1045
+ }
1046
+ }
1047
+ }
1048
+ },
1049
+ "lg": {
1050
+ "value": "{spacing.S}",
1051
+ "type": "dimension",
1052
+ "$extensions": {
1053
+ "public": true,
1054
+ "defaultUnit": "rem",
1055
+ "com.figma": {
1056
+ "scopes": [
1057
+ "GAP"
1058
+ ],
1059
+ "exportAs": "variable",
1060
+ "codeSyntax": {
1061
+ "WEB": "--pds-spacing-button-padding-block-lg"
1062
+ }
1063
+ }
1064
+ }
1065
+ }
1066
+ },
1067
+ "padding-inline": {
1068
+ "xs": {
1069
+ "value": "{spacing.XS}",
1070
+ "type": "dimension",
1071
+ "$extensions": {
1072
+ "public": true,
1073
+ "defaultUnit": "rem",
1074
+ "com.figma": {
1075
+ "scopes": [
1076
+ "GAP"
1077
+ ],
1078
+ "exportAs": "variable",
1079
+ "codeSyntax": {
1080
+ "WEB": "--pds-spacing-button-padding-inline-xs"
1081
+ }
1082
+ }
1083
+ }
1084
+ },
1085
+ "sm": {
1086
+ "value": "{spacing.S}",
1087
+ "type": "dimension",
1088
+ "$extensions": {
1089
+ "public": true,
1090
+ "defaultUnit": "rem",
1091
+ "com.figma": {
1092
+ "scopes": [
1093
+ "GAP"
1094
+ ],
1095
+ "exportAs": "variable",
1096
+ "codeSyntax": {
1097
+ "WEB": "--pds-spacing-button-padding-inline-sm"
1098
+ }
1099
+ }
1100
+ }
1101
+ },
1102
+ "md": {
1103
+ "value": "{spacing.L}",
1104
+ "type": "dimension",
1105
+ "$extensions": {
1106
+ "public": true,
1107
+ "defaultUnit": "rem",
1108
+ "com.figma": {
1109
+ "scopes": [
1110
+ "GAP"
1111
+ ],
1112
+ "exportAs": "variable",
1113
+ "codeSyntax": {
1114
+ "WEB": "--pds-spacing-button-padding-inline-md"
1115
+ }
1116
+ }
1117
+ }
1118
+ },
1119
+ "lg": {
1120
+ "value": "{spacing.2XL}",
1121
+ "type": "dimension",
1122
+ "$extensions": {
1123
+ "public": true,
1124
+ "defaultUnit": "rem",
1125
+ "com.figma": {
1126
+ "scopes": [
1127
+ "GAP"
1128
+ ],
1129
+ "exportAs": "variable",
1130
+ "codeSyntax": {
1131
+ "WEB": "--pds-spacing-button-padding-inline-lg"
1132
+ }
1133
+ }
1134
+ }
1135
+ }
1136
+ }
1137
+ }
1138
+ },
1139
+ "typography": {
1140
+ "line-height (lh)": {
1141
+ "code": {
1142
+ "value": "180%",
1143
+ "type": "lineHeight",
1144
+ "$extensions": {
1145
+ "public": true,
1146
+ "com.figma": {
1147
+ "scopes": [
1148
+ "LINE_HEIGHT"
1149
+ ],
1150
+ "exportAs": "skip",
1151
+ "codeSyntax": {
1152
+ "WEB": "--pds-typography-lh-code"
1153
+ }
1154
+ }
1155
+ }
1156
+ }
1157
+ }
835
1158
  }
836
1159
  }
837
1160
  },
@@ -949,6 +1272,27 @@
949
1272
  }
950
1273
  }
951
1274
  }
1275
+ },
1276
+ "dashboard": {
1277
+ "navbar": {
1278
+ "max-width": {
1279
+ "value": 1440,
1280
+ "type": "dimension",
1281
+ "$extensions": {
1282
+ "public": true,
1283
+ "defaultUnit": "px",
1284
+ "com.figma": {
1285
+ "scopes": [
1286
+ "WIDTH_HEIGHT"
1287
+ ],
1288
+ "exportAs": "variable",
1289
+ "codeSyntax": {
1290
+ "WEB": "--pds-container-dashboard-navbar-max-width"
1291
+ }
1292
+ }
1293
+ }
1294
+ }
1295
+ }
952
1296
  }
953
1297
  },
954
1298
  "spacing": {
@@ -988,6 +1332,42 @@
988
1332
  }
989
1333
  }
990
1334
  }
1335
+ },
1336
+ "stepper": {
1337
+ "indicator-size": {
1338
+ "value": "{spacing.L}",
1339
+ "type": "dimension",
1340
+ "$extensions": {
1341
+ "public": true,
1342
+ "defaultUnit": "rem",
1343
+ "com.figma": {
1344
+ "scopes": [
1345
+ "WIDTH_HEIGHT"
1346
+ ],
1347
+ "exportAs": "variable",
1348
+ "codeSyntax": {
1349
+ "WEB": "--pds-spacing-stepper-indicator-size"
1350
+ }
1351
+ }
1352
+ }
1353
+ },
1354
+ "step-content-width": {
1355
+ "value": 112,
1356
+ "type": "dimension",
1357
+ "$extensions": {
1358
+ "public": true,
1359
+ "defaultUnit": "rem",
1360
+ "com.figma": {
1361
+ "scopes": [
1362
+ "WIDTH_HEIGHT"
1363
+ ],
1364
+ "exportAs": "variable",
1365
+ "codeSyntax": {
1366
+ "WEB": "--pds-spacing-stepper-step-content-width"
1367
+ }
1368
+ }
1369
+ }
1370
+ }
991
1371
  }
992
1372
  }
993
1373
  }
package/build/js/variables.d.ts CHANGED
@@ -23,11 +23,16 @@ export const BORDER_RADIUS_BAR: string;
23
23
  export const BORDER_RADIUS_BUTTON: string;
24
24
  export const BORDER_RADIUS_CONTAINER: string;
25
25
  export const BORDER_RADIUS_INPUT: string;
26
+ export const BP_SM: number;
27
+ export const BP_MD: number;
28
+ export const BP_LG: number;
29
+ export const BP_XL: number;
26
30
  export const CONTAINER_MODAL_WIDTH_SM: string;
27
31
  export const CONTAINER_MODAL_WIDTH_MD: string;
28
32
  export const CONTAINER_MODAL_WIDTH_LG: string;
29
33
  export const CONTAINER_MODAL_WIDTH_XL: string;
30
34
  export const CONTAINER_TOOLTIP_MAX_WIDTH: string;
35
+ export const CONTAINER_DASHBOARD_NAVBAR_MAX_WIDTH: string;
31
36
  export const CONTAINER_PADDING_BASE: string;
32
37
  export const CONTAINER_PADDING_NARROW_BP_MD: string;
33
38
  export const CONTAINER_PADDING_NARROW_BP_LG: string;
@@ -46,12 +51,10 @@ export const GRID_COLUMNS_12_BP_MD_GAP_WIDE: string;
46
51
  export const GRID_COLUMNS_12_BP_LG_GAP_NARROW: string;
47
52
  export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD: string;
48
53
  export const GRID_COLUMNS_12_BP_LG_GAP_WIDE: string;
49
- export const GRID_MARKETING_COLUMN_SMALL: string;
50
- export const GRID_MARKETING_COLUMN_MEDIUM_LARGE: string;
51
- export const GRID_MARKETING_GAP_SMALL: string;
52
- export const GRID_MARKETING_GAP_MEDIUM_LARGE: string;
53
54
  export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT: string;
54
55
  export const SPACING_DASHBOARD_NAV_ITEM_PADDING: string;
56
+ export const SPACING_STEPPER_INDICATOR_SIZE: string;
57
+ export const SPACING_STEPPER_STEP_CONTENT_WIDTH: string;
55
58
  export const SPACING_8XL: string;
56
59
  export const SPACING_7XL: string;
57
60
  export const SPACING_6XL: string;
@@ -71,6 +74,19 @@ export const SPACING_5XS: string;
71
74
  export const SPACING_6XS: string;
72
75
  export const SPACING_7XS: string;
73
76
  export const SPACING_8XS: string;
77
+ export const SPACING_INPUT_HEIGHT: string;
78
+ export const SPACING_BUTTON_HEIGHT_XS: string;
79
+ export const SPACING_BUTTON_HEIGHT_SM: string;
80
+ export const SPACING_BUTTON_HEIGHT_MD: string;
81
+ 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
+ export const SPACING_BUTTON_PADDING_INLINE_XS: string;
87
+ export const SPACING_BUTTON_PADDING_INLINE_SM: string;
88
+ export const SPACING_BUTTON_PADDING_INLINE_MD: string;
89
+ export const SPACING_BUTTON_PADDING_INLINE_LG: string;
74
90
  export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
75
91
  export const TYPOGRAPHY_SIZE_7XL: string;
76
92
  export const TYPOGRAPHY_SIZE_6XL: string;
@@ -103,6 +119,7 @@ export const TYPOGRAPHY_LH_XL: string;
103
119
  export const TYPOGRAPHY_LH_L: string;
104
120
  export const TYPOGRAPHY_LH_M: string;
105
121
  export const TYPOGRAPHY_LH_S: string;
122
+ export const TYPOGRAPHY_LH_CODE: string;
106
123
  export const TYPOGRAPHY_MULTIPLIER_SMALL: string;
107
124
  export const TYPOGRAPHY_MULTIPLIER_MEDIUM: string;
108
125
  export const Z_INDEX_NAVIGATION: number;
@@ -112,3 +129,25 @@ export const Z_INDEX_OVERLAY: number;
112
129
  export const Z_INDEX_MODAL: number;
113
130
  export const Z_INDEX_MAX: number;
114
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
+ };