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

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 +43 -1
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.global.css +30 -9
  4. package/build/figma/tokens.json +403 -6
  5. package/build/js/variables.d.ts +25 -7
  6. package/build/js/variables.js +27 -9
  7. package/build/json/tokens.json +542 -128
  8. package/package.json +1 -1
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:
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
@@ -9,21 +9,23 @@
9
9
  --pds-animation-transition-focus: outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
10
10
  --pds-animation-transition-input: border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
11
11
  --pds-animation-transition-link: color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
- --pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
13
- --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
+ --pds-animation-transition-reveal: height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1);
13
+ --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1);
14
14
  --pds-border-width-stepper: 3px;
15
15
  --pds-border-width-default: 1px;
16
+ --pds-border-width-thicker: 2px;
16
17
  --pds-border-width-outline: 1px;
17
18
  --pds-border-radius-default: 0.188rem;
18
19
  --pds-border-radius-bar: 3.5rem;
19
20
  --pds-border-radius-button: 3.5rem;
20
21
  --pds-border-radius-container: 0.375rem;
21
22
  --pds-border-radius-input: 0.25rem;
22
- --pds-container-modal-width-small: 25rem;
23
- --pds-container-modal-width-medium: 37.5rem;
24
- --pds-container-modal-width-large: 47.5rem;
23
+ --pds-container-modal-width-sm: 25rem;
24
+ --pds-container-modal-width-md: 37.5rem;
25
+ --pds-container-modal-width-lg: 47.5rem;
25
26
  --pds-container-modal-width-xl: 67.5rem;
26
27
  --pds-container-tooltip-max-width: 12.5rem;
28
+ --pds-container-dashboard-navbar-max-width: 1440px;
27
29
  --pds-container-padding-base: var(--pds-spacing-xl);
28
30
  --pds-container-padding-narrow-bp-md: 12%;
29
31
  --pds-container-padding-narrow-bp-lg: 20%;
@@ -35,12 +37,17 @@
35
37
  --pds-container-max-width-standard: 1200px;
36
38
  --pds-container-max-width-wide: 1440px;
37
39
  --pds-container-max-width-x-wide: 1600px;
38
- --pds-grid-marketing-column-small: 21.34375%;
39
- --pds-grid-marketing-column-medium-large: 4.36875%;
40
- --pds-grid-marketing-gap-small: 4.875%;
41
- --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);
42
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
43
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;
44
51
  --pds-spacing-8xl: 5.16rem;
45
52
  --pds-spacing-7xl: 4.3rem;
46
53
  --pds-spacing-6xl: 3.583rem;
@@ -60,6 +67,19 @@
60
67
  --pds-spacing-6xs: 0.278rem;
61
68
  --pds-spacing-7xs: 0.232rem;
62
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);
63
83
  --pds-typography-ff-sans: 'Mona Sans', sans-serif;
64
84
  --pds-typography-ff-serif: 'Instrument Serif', serif;
65
85
  --pds-typography-ff-mono: 'Source Code Pro', monospace;
@@ -77,6 +97,7 @@
77
97
  --pds-typography-lh-l: 165%;
78
98
  --pds-typography-lh-m: 140%;
79
99
  --pds-typography-lh-s: 120%;
100
+ --pds-typography-lh-code: 180%;
80
101
  --pds-typography-multiplier-small: 0.84;
81
102
  --pds-typography-multiplier-medium: 0.88;
82
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,
@@ -638,6 +708,23 @@
638
708
  }
639
709
  }
640
710
  },
711
+ "thicker": {
712
+ "value": 2,
713
+ "type": "dimension",
714
+ "$extensions": {
715
+ "public": true,
716
+ "defaultUnit": "px",
717
+ "com.figma": {
718
+ "scopes": [
719
+ "STROKE_FLOAT"
720
+ ],
721
+ "exportAs": "variable",
722
+ "codeSyntax": {
723
+ "WEB": "--pds-border-width-thicker"
724
+ }
725
+ }
726
+ }
727
+ },
641
728
  "outline": {
642
729
  "value": 1,
643
730
  "type": "dimension",
@@ -815,6 +902,259 @@
815
902
  }
816
903
  }
817
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
+ }
818
1158
  }
819
1159
  }
820
1160
  },
@@ -844,7 +1184,7 @@
844
1184
  "container": {
845
1185
  "modal": {
846
1186
  "width": {
847
- "small": {
1187
+ "sm": {
848
1188
  "value": 400,
849
1189
  "type": "dimension",
850
1190
  "$extensions": {
@@ -856,12 +1196,12 @@
856
1196
  ],
857
1197
  "exportAs": "variable",
858
1198
  "codeSyntax": {
859
- "WEB": "--pds-container-modal-width-small"
1199
+ "WEB": "--pds-container-modal-width-sm"
860
1200
  }
861
1201
  }
862
1202
  }
863
1203
  },
864
- "medium": {
1204
+ "md": {
865
1205
  "value": 600,
866
1206
  "type": "dimension",
867
1207
  "$extensions": {
@@ -873,12 +1213,12 @@
873
1213
  ],
874
1214
  "exportAs": "variable",
875
1215
  "codeSyntax": {
876
- "WEB": "--pds-container-modal-width-medium"
1216
+ "WEB": "--pds-container-modal-width-md"
877
1217
  }
878
1218
  }
879
1219
  }
880
1220
  },
881
- "large": {
1221
+ "lg": {
882
1222
  "value": 760,
883
1223
  "type": "dimension",
884
1224
  "$extensions": {
@@ -890,7 +1230,7 @@
890
1230
  ],
891
1231
  "exportAs": "variable",
892
1232
  "codeSyntax": {
893
- "WEB": "--pds-container-modal-width-large"
1233
+ "WEB": "--pds-container-modal-width-lg"
894
1234
  }
895
1235
  }
896
1236
  }
@@ -932,6 +1272,27 @@
932
1272
  }
933
1273
  }
934
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
+ }
935
1296
  }
936
1297
  },
937
1298
  "spacing": {
@@ -971,6 +1332,42 @@
971
1332
  }
972
1333
  }
973
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
+ }
974
1371
  }
975
1372
  }
976
1373
  }
package/build/js/variables.d.ts CHANGED
@@ -16,17 +16,23 @@ export const ANIMATION_TRANSITION_REVEAL: string;
16
16
  export const ANIMATION_TRANSITION_ROTATION: string;
17
17
  export const BORDER_WIDTH_STEPPER: string;
18
18
  export const BORDER_WIDTH_DEFAULT: string;
19
+ export const BORDER_WIDTH_THICKER: string;
19
20
  export const BORDER_WIDTH_OUTLINE: string;
20
21
  export const BORDER_RADIUS_DEFAULT: string;
21
22
  export const BORDER_RADIUS_BAR: string;
22
23
  export const BORDER_RADIUS_BUTTON: string;
23
24
  export const BORDER_RADIUS_CONTAINER: string;
24
25
  export const BORDER_RADIUS_INPUT: string;
25
- export const CONTAINER_MODAL_WIDTH_SMALL: string;
26
- export const CONTAINER_MODAL_WIDTH_MEDIUM: string;
27
- export const CONTAINER_MODAL_WIDTH_LARGE: 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;
30
+ export const CONTAINER_MODAL_WIDTH_SM: string;
31
+ export const CONTAINER_MODAL_WIDTH_MD: string;
32
+ export const CONTAINER_MODAL_WIDTH_LG: string;
28
33
  export const CONTAINER_MODAL_WIDTH_XL: string;
29
34
  export const CONTAINER_TOOLTIP_MAX_WIDTH: string;
35
+ export const CONTAINER_DASHBOARD_NAVBAR_MAX_WIDTH: string;
30
36
  export const CONTAINER_PADDING_BASE: string;
31
37
  export const CONTAINER_PADDING_NARROW_BP_MD: string;
32
38
  export const CONTAINER_PADDING_NARROW_BP_LG: string;
@@ -45,12 +51,10 @@ export const GRID_COLUMNS_12_BP_MD_GAP_WIDE: string;
45
51
  export const GRID_COLUMNS_12_BP_LG_GAP_NARROW: string;
46
52
  export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD: string;
47
53
  export const GRID_COLUMNS_12_BP_LG_GAP_WIDE: string;
48
- export const GRID_MARKETING_COLUMN_SMALL: string;
49
- export const GRID_MARKETING_COLUMN_MEDIUM_LARGE: string;
50
- export const GRID_MARKETING_GAP_SMALL: string;
51
- export const GRID_MARKETING_GAP_MEDIUM_LARGE: string;
52
54
  export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT: string;
53
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;
54
58
  export const SPACING_8XL: string;
55
59
  export const SPACING_7XL: string;
56
60
  export const SPACING_6XL: string;
@@ -70,6 +74,19 @@ export const SPACING_5XS: string;
70
74
  export const SPACING_6XS: string;
71
75
  export const SPACING_7XS: string;
72
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;
73
90
  export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
74
91
  export const TYPOGRAPHY_SIZE_7XL: string;
75
92
  export const TYPOGRAPHY_SIZE_6XL: string;
@@ -102,6 +119,7 @@ export const TYPOGRAPHY_LH_XL: string;
102
119
  export const TYPOGRAPHY_LH_L: string;
103
120
  export const TYPOGRAPHY_LH_M: string;
104
121
  export const TYPOGRAPHY_LH_S: string;
122
+ export const TYPOGRAPHY_LH_CODE: string;
105
123
  export const TYPOGRAPHY_MULTIPLIER_SMALL: string;
106
124
  export const TYPOGRAPHY_MULTIPLIER_MEDIUM: string;
107
125
  export const Z_INDEX_NAVIGATION: number;