@pantheon-systems/pds-design-tokens 2.0.0-alpha.13 → 2.0.0-alpha.14

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 (7) hide show
  1. package/build/css/breakpoints.css +5 -5
  2. package/build/css/variables.global.css +23 -23
  3. package/build/figma/tokens.json +28 -28
  4. package/build/js/variables.global.d.ts +26 -26
  5. package/build/js/variables.global.js +26 -26
  6. package/build/json/tokens.json +100 -100
  7. package/package.json +1 -1
package/build/css/breakpoints.css CHANGED
@@ -3,11 +3,11 @@
3
3
  */
4
4
 
5
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);
6
+ @custom-media --pds-bp-m (min-width: 768px);
7
+ @custom-media --pds-bp-l (min-width: 1280px);
8
8
  @custom-media --pds-bp-xl (min-width: 1440px);
9
9
 
10
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);
11
+ @custom-media --pds-bp-s-only (max-width: 767px);
12
+ @custom-media --pds-bp-m-only (min-width: 768px) and (max-width: 1279px);
13
+ @custom-media --pds-bp-l-only (min-width: 1280px) and (max-width: 1439px);
package/build/css/variables.global.css CHANGED
@@ -20,30 +20,30 @@
20
20
  --pds-border-radius-button: 3.5rem;
21
21
  --pds-border-radius-container: 0.375rem;
22
22
  --pds-border-radius-input: 0.25rem;
23
- --pds-container-modal-width-sm: 25rem;
24
- --pds-container-modal-width-md: 37.5rem;
25
- --pds-container-modal-width-lg: 47.5rem;
23
+ --pds-container-modal-width-s: 25rem;
24
+ --pds-container-modal-width-m: 37.5rem;
25
+ --pds-container-modal-width-l: 47.5rem;
26
26
  --pds-container-modal-width-xl: 67.5rem;
27
27
  --pds-container-tooltip-max-width: 12.5rem;
28
28
  --pds-container-dashboard-navbar-max-width: 1440px;
29
29
  --pds-container-padding-base: var(--pds-spacing-xl);
30
- --pds-container-padding-narrow-bp-md: 12%;
31
- --pds-container-padding-narrow-bp-lg: 20%;
32
- --pds-container-padding-standard-bp-md: 6%;
33
- --pds-container-padding-standard-bp-lg: 8%;
34
- --pds-container-padding-wide-bp-md: 5%;
35
- --pds-container-padding-wide-bp-lg: 4%;
30
+ --pds-container-padding-narrow-bp-m: 12%;
31
+ --pds-container-padding-narrow-bp-l: 20%;
32
+ --pds-container-padding-standard-bp-m: 6%;
33
+ --pds-container-padding-standard-bp-l: 8%;
34
+ --pds-container-padding-wide-bp-m: 5%;
35
+ --pds-container-padding-wide-bp-l: 4%;
36
36
  --pds-container-max-width-narrow: 1024px;
37
37
  --pds-container-max-width-standard: 1200px;
38
38
  --pds-container-max-width-wide: 1440px;
39
39
  --pds-container-max-width-x-wide: 1600px;
40
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);
41
+ --pds-grid-columns-12-bp-m-gap-narrow: var(--pds-spacing-l);
42
+ --pds-grid-columns-12-bp-m-gap-standard: var(--pds-spacing-xl);
43
+ --pds-grid-columns-12-bp-m-gap-wide: var(--pds-spacing-2xl);
44
+ --pds-grid-columns-12-bp-l-gap-narrow: var(--pds-spacing-xl);
45
+ --pds-grid-columns-12-bp-l-gap-standard: var(--pds-spacing-2xl);
46
+ --pds-grid-columns-12-bp-l-gap-wide: var(--pds-spacing-3xl);
47
47
  --pds-spacing-dashboard-nav-item-height: 2.25rem;
48
48
  --pds-spacing-dashboard-nav-item-padding: 0.625rem;
49
49
  --pds-spacing-stepper-indicator-size: var(--pds-spacing-l);
@@ -66,16 +66,16 @@
66
66
  --pds-spacing-4xs: 0.25rem;
67
67
  --pds-spacing-5xs: 0.125rem;
68
68
  --pds-spacing-button-height-xs: var(--pds-spacing-xl);
69
- --pds-spacing-button-height-sm: var(--pds-spacing-2xl);
70
- --pds-spacing-button-height-md: var(--pds-spacing-3xl);
71
- --pds-spacing-button-height-lg: var(--pds-spacing-4xl);
69
+ --pds-spacing-button-height-s: var(--pds-spacing-2xl);
70
+ --pds-spacing-button-height-m: var(--pds-spacing-3xl);
71
+ --pds-spacing-button-height-l: var(--pds-spacing-4xl);
72
72
  --pds-spacing-button-padding-inline-xs: var(--pds-spacing-s);
73
- --pds-spacing-button-padding-inline-sm: var(--pds-spacing-m);
74
- --pds-spacing-button-padding-inline-md: var(--pds-spacing-l);
75
- --pds-spacing-button-padding-inline-lg: var(--pds-spacing-xl);
73
+ --pds-spacing-button-padding-inline-s: var(--pds-spacing-m);
74
+ --pds-spacing-button-padding-inline-m: var(--pds-spacing-l);
75
+ --pds-spacing-button-padding-inline-l: var(--pds-spacing-xl);
76
76
  --pds-spacing-button-gap-inline-default: var(--pds-spacing-2xs);
77
- --pds-spacing-input-height-sm: var(--pds-spacing-2xl);
78
- --pds-spacing-input-height-md: var(--pds-spacing-3xl);
77
+ --pds-spacing-input-height-s: var(--pds-spacing-2xl);
78
+ --pds-spacing-input-height-m: var(--pds-spacing-3xl);
79
79
  --pds-z-index-navigation: 100;
80
80
  --pds-z-index-dropdown: 300;
81
81
  --pds-z-index-notifications: 500;
package/build/figma/tokens.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "global-primitive": {
3
3
  "primitive": {
4
4
  "bp": {
5
- "sm": {
5
+ "s": {
6
6
  "value": 0,
7
7
  "type": "dimension",
8
8
  "$extensions": {
@@ -14,12 +14,12 @@
14
14
  ],
15
15
  "exportAs": "variable",
16
16
  "codeSyntax": {
17
- "WEB": "--pds-bp-sm"
17
+ "WEB": "--pds-bp-s"
18
18
  }
19
19
  }
20
20
  }
21
21
  },
22
- "md": {
22
+ "m": {
23
23
  "value": 768,
24
24
  "type": "dimension",
25
25
  "$extensions": {
@@ -31,12 +31,12 @@
31
31
  ],
32
32
  "exportAs": "variable",
33
33
  "codeSyntax": {
34
- "WEB": "--pds-bp-md"
34
+ "WEB": "--pds-bp-m"
35
35
  }
36
36
  }
37
37
  }
38
38
  },
39
- "lg": {
39
+ "l": {
40
40
  "value": 1280,
41
41
  "type": "dimension",
42
42
  "$extensions": {
@@ -48,7 +48,7 @@
48
48
  ],
49
49
  "exportAs": "variable",
50
50
  "codeSyntax": {
51
- "WEB": "--pds-bp-lg"
51
+ "WEB": "--pds-bp-l"
52
52
  }
53
53
  }
54
54
  }
@@ -617,7 +617,7 @@
617
617
  }
618
618
  }
619
619
  },
620
- "sm": {
620
+ "s": {
621
621
  "value": "{spacing.2XL}",
622
622
  "type": "dimension",
623
623
  "$extensions": {
@@ -629,12 +629,12 @@
629
629
  ],
630
630
  "exportAs": "variable",
631
631
  "codeSyntax": {
632
- "WEB": "--pds-spacing-button-height-sm"
632
+ "WEB": "--pds-spacing-button-height-s"
633
633
  }
634
634
  }
635
635
  }
636
636
  },
637
- "md": {
637
+ "m": {
638
638
  "value": "{spacing.3XL}",
639
639
  "type": "dimension",
640
640
  "$extensions": {
@@ -646,12 +646,12 @@
646
646
  ],
647
647
  "exportAs": "variable",
648
648
  "codeSyntax": {
649
- "WEB": "--pds-spacing-button-height-md"
649
+ "WEB": "--pds-spacing-button-height-m"
650
650
  }
651
651
  }
652
652
  }
653
653
  },
654
- "lg": {
654
+ "l": {
655
655
  "value": "{spacing.4XL}",
656
656
  "type": "dimension",
657
657
  "$extensions": {
@@ -663,7 +663,7 @@
663
663
  ],
664
664
  "exportAs": "variable",
665
665
  "codeSyntax": {
666
- "WEB": "--pds-spacing-button-height-lg"
666
+ "WEB": "--pds-spacing-button-height-l"
667
667
  }
668
668
  }
669
669
  }
@@ -687,7 +687,7 @@
687
687
  }
688
688
  }
689
689
  },
690
- "sm": {
690
+ "s": {
691
691
  "value": "{spacing.M}",
692
692
  "type": "dimension",
693
693
  "$extensions": {
@@ -699,12 +699,12 @@
699
699
  ],
700
700
  "exportAs": "variable",
701
701
  "codeSyntax": {
702
- "WEB": "--pds-spacing-button-padding-inline-sm"
702
+ "WEB": "--pds-spacing-button-padding-inline-s"
703
703
  }
704
704
  }
705
705
  }
706
706
  },
707
- "md": {
707
+ "m": {
708
708
  "value": "{spacing.L}",
709
709
  "type": "dimension",
710
710
  "$extensions": {
@@ -716,12 +716,12 @@
716
716
  ],
717
717
  "exportAs": "variable",
718
718
  "codeSyntax": {
719
- "WEB": "--pds-spacing-button-padding-inline-md"
719
+ "WEB": "--pds-spacing-button-padding-inline-m"
720
720
  }
721
721
  }
722
722
  }
723
723
  },
724
- "lg": {
724
+ "l": {
725
725
  "value": "{spacing.XL}",
726
726
  "type": "dimension",
727
727
  "$extensions": {
@@ -733,7 +733,7 @@
733
733
  ],
734
734
  "exportAs": "variable",
735
735
  "codeSyntax": {
736
- "WEB": "--pds-spacing-button-padding-inline-lg"
736
+ "WEB": "--pds-spacing-button-padding-inline-l"
737
737
  }
738
738
  }
739
739
  }
@@ -761,7 +761,7 @@
761
761
  },
762
762
  "input": {
763
763
  "height": {
764
- "sm": {
764
+ "s": {
765
765
  "value": "{spacing.2XL}",
766
766
  "type": "dimension",
767
767
  "$extensions": {
@@ -773,12 +773,12 @@
773
773
  ],
774
774
  "exportAs": "variable",
775
775
  "codeSyntax": {
776
- "WEB": "--pds-spacing-input-height-sm"
776
+ "WEB": "--pds-spacing-input-height-s"
777
777
  }
778
778
  }
779
779
  }
780
780
  },
781
- "md": {
781
+ "m": {
782
782
  "value": "{spacing.3XL}",
783
783
  "type": "dimension",
784
784
  "$extensions": {
@@ -790,7 +790,7 @@
790
790
  ],
791
791
  "exportAs": "variable",
792
792
  "codeSyntax": {
793
- "WEB": "--pds-spacing-input-height-md"
793
+ "WEB": "--pds-spacing-input-height-m"
794
794
  }
795
795
  }
796
796
  }
@@ -826,7 +826,7 @@
826
826
  "container": {
827
827
  "modal": {
828
828
  "width": {
829
- "sm": {
829
+ "s": {
830
830
  "value": 400,
831
831
  "type": "dimension",
832
832
  "$extensions": {
@@ -838,12 +838,12 @@
838
838
  ],
839
839
  "exportAs": "variable",
840
840
  "codeSyntax": {
841
- "WEB": "--pds-container-modal-width-sm"
841
+ "WEB": "--pds-container-modal-width-s"
842
842
  }
843
843
  }
844
844
  }
845
845
  },
846
- "md": {
846
+ "m": {
847
847
  "value": 600,
848
848
  "type": "dimension",
849
849
  "$extensions": {
@@ -855,12 +855,12 @@
855
855
  ],
856
856
  "exportAs": "variable",
857
857
  "codeSyntax": {
858
- "WEB": "--pds-container-modal-width-md"
858
+ "WEB": "--pds-container-modal-width-m"
859
859
  }
860
860
  }
861
861
  }
862
862
  },
863
- "lg": {
863
+ "l": {
864
864
  "value": 760,
865
865
  "type": "dimension",
866
866
  "$extensions": {
@@ -872,7 +872,7 @@
872
872
  ],
873
873
  "exportAs": "variable",
874
874
  "codeSyntax": {
875
- "WEB": "--pds-container-modal-width-lg"
875
+ "WEB": "--pds-container-modal-width-l"
876
876
  }
877
877
  }
878
878
  }
package/build/js/variables.global.d.ts CHANGED
@@ -23,34 +23,34 @@ 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;
26
+ export const BP_S: number;
27
+ export const BP_M: number;
28
+ export const BP_L: number;
29
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;
30
+ export const CONTAINER_MODAL_WIDTH_S: string;
31
+ export const CONTAINER_MODAL_WIDTH_M: string;
32
+ export const CONTAINER_MODAL_WIDTH_L: string;
33
33
  export const CONTAINER_MODAL_WIDTH_XL: string;
34
34
  export const CONTAINER_TOOLTIP_MAX_WIDTH: string;
35
35
  export const CONTAINER_DASHBOARD_NAVBAR_MAX_WIDTH: string;
36
36
  export const CONTAINER_PADDING_BASE: string;
37
- export const CONTAINER_PADDING_NARROW_BP_MD: string;
38
- export const CONTAINER_PADDING_NARROW_BP_LG: string;
39
- export const CONTAINER_PADDING_STANDARD_BP_MD: string;
40
- export const CONTAINER_PADDING_STANDARD_BP_LG: string;
41
- export const CONTAINER_PADDING_WIDE_BP_MD: string;
42
- export const CONTAINER_PADDING_WIDE_BP_LG: string;
37
+ export const CONTAINER_PADDING_NARROW_BP_M: string;
38
+ export const CONTAINER_PADDING_NARROW_BP_L: string;
39
+ export const CONTAINER_PADDING_STANDARD_BP_M: string;
40
+ export const CONTAINER_PADDING_STANDARD_BP_L: string;
41
+ export const CONTAINER_PADDING_WIDE_BP_M: string;
42
+ export const CONTAINER_PADDING_WIDE_BP_L: string;
43
43
  export const CONTAINER_MAX_WIDTH_NARROW: string;
44
44
  export const CONTAINER_MAX_WIDTH_STANDARD: string;
45
45
  export const CONTAINER_MAX_WIDTH_WIDE: string;
46
46
  export const CONTAINER_MAX_WIDTH_X_WIDE: string;
47
47
  export const GRID_COLUMNS_4_GAP: string;
48
- export const GRID_COLUMNS_12_BP_MD_GAP_NARROW: string;
49
- export const GRID_COLUMNS_12_BP_MD_GAP_STANDARD: string;
50
- export const GRID_COLUMNS_12_BP_MD_GAP_WIDE: string;
51
- export const GRID_COLUMNS_12_BP_LG_GAP_NARROW: string;
52
- export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD: string;
53
- export const GRID_COLUMNS_12_BP_LG_GAP_WIDE: string;
48
+ export const GRID_COLUMNS_12_BP_M_GAP_NARROW: string;
49
+ export const GRID_COLUMNS_12_BP_M_GAP_STANDARD: string;
50
+ export const GRID_COLUMNS_12_BP_M_GAP_WIDE: string;
51
+ export const GRID_COLUMNS_12_BP_L_GAP_NARROW: string;
52
+ export const GRID_COLUMNS_12_BP_L_GAP_STANDARD: string;
53
+ export const GRID_COLUMNS_12_BP_L_GAP_WIDE: string;
54
54
  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;
@@ -73,16 +73,16 @@ export const SPACING_3XS: string;
73
73
  export const SPACING_4XS: string;
74
74
  export const SPACING_5XS: string;
75
75
  export const SPACING_BUTTON_HEIGHT_XS: string;
76
- export const SPACING_BUTTON_HEIGHT_SM: string;
77
- export const SPACING_BUTTON_HEIGHT_MD: string;
78
- export const SPACING_BUTTON_HEIGHT_LG: string;
76
+ export const SPACING_BUTTON_HEIGHT_S: string;
77
+ export const SPACING_BUTTON_HEIGHT_M: string;
78
+ export const SPACING_BUTTON_HEIGHT_L: string;
79
79
  export const SPACING_BUTTON_PADDING_INLINE_XS: string;
80
- export const SPACING_BUTTON_PADDING_INLINE_SM: string;
81
- export const SPACING_BUTTON_PADDING_INLINE_MD: string;
82
- export const SPACING_BUTTON_PADDING_INLINE_LG: string;
80
+ export const SPACING_BUTTON_PADDING_INLINE_S: string;
81
+ export const SPACING_BUTTON_PADDING_INLINE_M: string;
82
+ export const SPACING_BUTTON_PADDING_INLINE_L: string;
83
83
  export const SPACING_BUTTON_GAP_INLINE_DEFAULT: string;
84
- export const SPACING_INPUT_HEIGHT_SM: string;
85
- export const SPACING_INPUT_HEIGHT_MD: string;
84
+ export const SPACING_INPUT_HEIGHT_S: string;
85
+ export const SPACING_INPUT_HEIGHT_M: string;
86
86
  export const Z_INDEX_NAVIGATION: number;
87
87
  export const Z_INDEX_DROPDOWN: number;
88
88
  export const Z_INDEX_NOTIFICATIONS: number;
package/build/js/variables.global.js CHANGED
@@ -23,34 +23,34 @@ export const BORDER_RADIUS_BAR = "3.5rem";
23
23
  export const BORDER_RADIUS_BUTTON = "3.5rem";
24
24
  export const BORDER_RADIUS_CONTAINER = "0.375rem";
25
25
  export const BORDER_RADIUS_INPUT = "0.25rem";
26
- export const BP_SM = 0;
27
- export const BP_MD = 768;
28
- export const BP_LG = 1280;
26
+ export const BP_S = 0;
27
+ export const BP_M = 768;
28
+ export const BP_L = 1280;
29
29
  export const BP_XL = 1440;
30
- export const CONTAINER_MODAL_WIDTH_SM = "25rem";
31
- export const CONTAINER_MODAL_WIDTH_MD = "37.5rem";
32
- export const CONTAINER_MODAL_WIDTH_LG = "47.5rem";
30
+ export const CONTAINER_MODAL_WIDTH_S = "25rem";
31
+ export const CONTAINER_MODAL_WIDTH_M = "37.5rem";
32
+ export const CONTAINER_MODAL_WIDTH_L = "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
36
  export const CONTAINER_PADDING_BASE = "1.5rem";
37
- export const CONTAINER_PADDING_NARROW_BP_MD = "12%";
38
- export const CONTAINER_PADDING_NARROW_BP_LG = "20%";
39
- export const CONTAINER_PADDING_STANDARD_BP_MD = "6%";
40
- export const CONTAINER_PADDING_STANDARD_BP_LG = "8%";
41
- export const CONTAINER_PADDING_WIDE_BP_MD = "5%";
42
- export const CONTAINER_PADDING_WIDE_BP_LG = "4%";
37
+ export const CONTAINER_PADDING_NARROW_BP_M = "12%";
38
+ export const CONTAINER_PADDING_NARROW_BP_L = "20%";
39
+ export const CONTAINER_PADDING_STANDARD_BP_M = "6%";
40
+ export const CONTAINER_PADDING_STANDARD_BP_L = "8%";
41
+ export const CONTAINER_PADDING_WIDE_BP_M = "5%";
42
+ export const CONTAINER_PADDING_WIDE_BP_L = "4%";
43
43
  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
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";
48
+ export const GRID_COLUMNS_12_BP_M_GAP_NARROW = "1.25rem";
49
+ export const GRID_COLUMNS_12_BP_M_GAP_STANDARD = "1.5rem";
50
+ export const GRID_COLUMNS_12_BP_M_GAP_WIDE = "2rem";
51
+ export const GRID_COLUMNS_12_BP_L_GAP_NARROW = "1.5rem";
52
+ export const GRID_COLUMNS_12_BP_L_GAP_STANDARD = "2rem";
53
+ export const GRID_COLUMNS_12_BP_L_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
56
  export const SPACING_STEPPER_INDICATOR_SIZE = "1.25rem";
@@ -73,16 +73,16 @@ export const SPACING_3XS = "0.375rem";
73
73
  export const SPACING_4XS = "0.25rem";
74
74
  export const SPACING_5XS = "0.125rem";
75
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";
76
+ export const SPACING_BUTTON_HEIGHT_S = "2rem";
77
+ export const SPACING_BUTTON_HEIGHT_M = "2.5rem";
78
+ export const SPACING_BUTTON_HEIGHT_L = "3rem";
79
79
  export const SPACING_BUTTON_PADDING_INLINE_XS = "0.75rem";
80
- export const SPACING_BUTTON_PADDING_INLINE_SM = "1rem";
81
- export const SPACING_BUTTON_PADDING_INLINE_MD = "1.25rem";
82
- export const SPACING_BUTTON_PADDING_INLINE_LG = "1.5rem";
80
+ export const SPACING_BUTTON_PADDING_INLINE_S = "1rem";
81
+ export const SPACING_BUTTON_PADDING_INLINE_M = "1.25rem";
82
+ export const SPACING_BUTTON_PADDING_INLINE_L = "1.5rem";
83
83
  export const SPACING_BUTTON_GAP_INLINE_DEFAULT = "0.5rem";
84
- export const SPACING_INPUT_HEIGHT_SM = "2rem";
85
- export const SPACING_INPUT_HEIGHT_MD = "2.5rem";
84
+ export const SPACING_INPUT_HEIGHT_S = "2rem";
85
+ export const SPACING_INPUT_HEIGHT_M = "2.5rem";
86
86
  export const Z_INDEX_NAVIGATION = 100;
87
87
  export const Z_INDEX_DROPDOWN = 300;
88
88
  export const Z_INDEX_NOTIFICATIONS = 500;
package/build/json/tokens.json CHANGED
@@ -457,7 +457,7 @@
457
457
  }
458
458
  },
459
459
  "bp": {
460
- "sm": {
460
+ "s": {
461
461
  "value": 0,
462
462
  "filePath": "tokens/breakpoint/primitive/primitive.json",
463
463
  "isSource": true,
@@ -465,18 +465,18 @@
465
465
  "value": 0,
466
466
  "public": true
467
467
  },
468
- "name": "BpSm",
468
+ "name": "BpS",
469
469
  "attributes": {
470
470
  "category": "bp",
471
- "type": "sm"
471
+ "type": "s"
472
472
  },
473
473
  "path": [
474
474
  "bp",
475
- "sm"
475
+ "s"
476
476
  ],
477
477
  "public": true
478
478
  },
479
- "md": {
479
+ "m": {
480
480
  "value": 768,
481
481
  "filePath": "tokens/breakpoint/primitive/primitive.json",
482
482
  "isSource": true,
@@ -484,18 +484,18 @@
484
484
  "value": 768,
485
485
  "public": true
486
486
  },
487
- "name": "BpMd",
487
+ "name": "BpM",
488
488
  "attributes": {
489
489
  "category": "bp",
490
- "type": "md"
490
+ "type": "m"
491
491
  },
492
492
  "path": [
493
493
  "bp",
494
- "md"
494
+ "m"
495
495
  ],
496
496
  "public": true
497
497
  },
498
- "lg": {
498
+ "l": {
499
499
  "value": 1280,
500
500
  "filePath": "tokens/breakpoint/primitive/primitive.json",
501
501
  "isSource": true,
@@ -503,14 +503,14 @@
503
503
  "value": 1280,
504
504
  "public": true
505
505
  },
506
- "name": "BpLg",
506
+ "name": "BpL",
507
507
  "attributes": {
508
508
  "category": "bp",
509
- "type": "lg"
509
+ "type": "l"
510
510
  },
511
511
  "path": [
512
512
  "bp",
513
- "lg"
513
+ "l"
514
514
  ],
515
515
  "public": true
516
516
  },
@@ -537,7 +537,7 @@
537
537
  "container": {
538
538
  "modal": {
539
539
  "width": {
540
- "sm": {
540
+ "s": {
541
541
  "value": "25",
542
542
  "filePath": "tokens/container/component/component.json",
543
543
  "isSource": true,
@@ -545,22 +545,22 @@
545
545
  "value": "25",
546
546
  "public": true
547
547
  },
548
- "name": "ContainerModalWidthSm",
548
+ "name": "ContainerModalWidthS",
549
549
  "attributes": {
550
550
  "category": "container",
551
551
  "type": "modal",
552
552
  "item": "width",
553
- "subitem": "sm"
553
+ "subitem": "s"
554
554
  },
555
555
  "path": [
556
556
  "container",
557
557
  "modal",
558
558
  "width",
559
- "sm"
559
+ "s"
560
560
  ],
561
561
  "public": true
562
562
  },
563
- "md": {
563
+ "m": {
564
564
  "value": "37.5",
565
565
  "filePath": "tokens/container/component/component.json",
566
566
  "isSource": true,
@@ -568,22 +568,22 @@
568
568
  "value": "37.5",
569
569
  "public": true
570
570
  },
571
- "name": "ContainerModalWidthMd",
571
+ "name": "ContainerModalWidthM",
572
572
  "attributes": {
573
573
  "category": "container",
574
574
  "type": "modal",
575
575
  "item": "width",
576
- "subitem": "md"
576
+ "subitem": "m"
577
577
  },
578
578
  "path": [
579
579
  "container",
580
580
  "modal",
581
581
  "width",
582
- "md"
582
+ "m"
583
583
  ],
584
584
  "public": true
585
585
  },
586
- "lg": {
586
+ "l": {
587
587
  "value": "47.5",
588
588
  "filePath": "tokens/container/component/component.json",
589
589
  "isSource": true,
@@ -591,18 +591,18 @@
591
591
  "value": "47.5",
592
592
  "public": true
593
593
  },
594
- "name": "ContainerModalWidthLg",
594
+ "name": "ContainerModalWidthL",
595
595
  "attributes": {
596
596
  "category": "container",
597
597
  "type": "modal",
598
598
  "item": "width",
599
- "subitem": "lg"
599
+ "subitem": "l"
600
600
  },
601
601
  "path": [
602
602
  "container",
603
603
  "modal",
604
604
  "width",
605
- "lg"
605
+ "l"
606
606
  ],
607
607
  "public": true
608
608
  },
@@ -703,7 +703,7 @@
703
703
  ],
704
704
  "public": true
705
705
  },
706
- "narrow-bp-md": {
706
+ "narrow-bp-m": {
707
707
  "value": "12%",
708
708
  "filePath": "tokens/container/semantic/padding.json",
709
709
  "isSource": true,
@@ -711,20 +711,20 @@
711
711
  "value": "12%",
712
712
  "public": true
713
713
  },
714
- "name": "ContainerPaddingNarrowBpMd",
714
+ "name": "ContainerPaddingNarrowBpM",
715
715
  "attributes": {
716
716
  "category": "container",
717
717
  "type": "padding",
718
- "item": "narrow-bp-md"
718
+ "item": "narrow-bp-m"
719
719
  },
720
720
  "path": [
721
721
  "container",
722
722
  "padding",
723
- "narrow-bp-md"
723
+ "narrow-bp-m"
724
724
  ],
725
725
  "public": true
726
726
  },
727
- "narrow-bp-lg": {
727
+ "narrow-bp-l": {
728
728
  "value": "20%",
729
729
  "filePath": "tokens/container/semantic/padding.json",
730
730
  "isSource": true,
@@ -732,20 +732,20 @@
732
732
  "value": "20%",
733
733
  "public": true
734
734
  },
735
- "name": "ContainerPaddingNarrowBpLg",
735
+ "name": "ContainerPaddingNarrowBpL",
736
736
  "attributes": {
737
737
  "category": "container",
738
738
  "type": "padding",
739
- "item": "narrow-bp-lg"
739
+ "item": "narrow-bp-l"
740
740
  },
741
741
  "path": [
742
742
  "container",
743
743
  "padding",
744
- "narrow-bp-lg"
744
+ "narrow-bp-l"
745
745
  ],
746
746
  "public": true
747
747
  },
748
- "standard-bp-md": {
748
+ "standard-bp-m": {
749
749
  "value": "6%",
750
750
  "filePath": "tokens/container/semantic/padding.json",
751
751
  "isSource": true,
@@ -753,20 +753,20 @@
753
753
  "value": "6%",
754
754
  "public": true
755
755
  },
756
- "name": "ContainerPaddingStandardBpMd",
756
+ "name": "ContainerPaddingStandardBpM",
757
757
  "attributes": {
758
758
  "category": "container",
759
759
  "type": "padding",
760
- "item": "standard-bp-md"
760
+ "item": "standard-bp-m"
761
761
  },
762
762
  "path": [
763
763
  "container",
764
764
  "padding",
765
- "standard-bp-md"
765
+ "standard-bp-m"
766
766
  ],
767
767
  "public": true
768
768
  },
769
- "standard-bp-lg": {
769
+ "standard-bp-l": {
770
770
  "value": "8%",
771
771
  "filePath": "tokens/container/semantic/padding.json",
772
772
  "isSource": true,
@@ -774,20 +774,20 @@
774
774
  "value": "8%",
775
775
  "public": true
776
776
  },
777
- "name": "ContainerPaddingStandardBpLg",
777
+ "name": "ContainerPaddingStandardBpL",
778
778
  "attributes": {
779
779
  "category": "container",
780
780
  "type": "padding",
781
- "item": "standard-bp-lg"
781
+ "item": "standard-bp-l"
782
782
  },
783
783
  "path": [
784
784
  "container",
785
785
  "padding",
786
- "standard-bp-lg"
786
+ "standard-bp-l"
787
787
  ],
788
788
  "public": true
789
789
  },
790
- "wide-bp-md": {
790
+ "wide-bp-m": {
791
791
  "value": "5%",
792
792
  "filePath": "tokens/container/semantic/padding.json",
793
793
  "isSource": true,
@@ -795,20 +795,20 @@
795
795
  "value": "5%",
796
796
  "public": true
797
797
  },
798
- "name": "ContainerPaddingWideBpMd",
798
+ "name": "ContainerPaddingWideBpM",
799
799
  "attributes": {
800
800
  "category": "container",
801
801
  "type": "padding",
802
- "item": "wide-bp-md"
802
+ "item": "wide-bp-m"
803
803
  },
804
804
  "path": [
805
805
  "container",
806
806
  "padding",
807
- "wide-bp-md"
807
+ "wide-bp-m"
808
808
  ],
809
809
  "public": true
810
810
  },
811
- "wide-bp-lg": {
811
+ "wide-bp-l": {
812
812
  "value": "4%",
813
813
  "filePath": "tokens/container/semantic/padding.json",
814
814
  "isSource": true,
@@ -816,16 +816,16 @@
816
816
  "value": "4%",
817
817
  "public": true
818
818
  },
819
- "name": "ContainerPaddingWideBpLg",
819
+ "name": "ContainerPaddingWideBpL",
820
820
  "attributes": {
821
821
  "category": "container",
822
822
  "type": "padding",
823
- "item": "wide-bp-lg"
823
+ "item": "wide-bp-l"
824
824
  },
825
825
  "path": [
826
826
  "container",
827
827
  "padding",
828
- "wide-bp-lg"
828
+ "wide-bp-l"
829
829
  ],
830
830
  "public": true
831
831
  }
@@ -942,7 +942,7 @@
942
942
  }
943
943
  },
944
944
  "columns-12": {
945
- "bp-md": {
945
+ "bp-m": {
946
946
  "gap": {
947
947
  "narrow": {
948
948
  "value": "1.25",
@@ -952,18 +952,18 @@
952
952
  "value": "{spacing.L}",
953
953
  "public": true
954
954
  },
955
- "name": "GridColumns12BpMdGapNarrow",
955
+ "name": "GridColumns12BpMGapNarrow",
956
956
  "attributes": {
957
957
  "category": "grid",
958
958
  "type": "columns-12",
959
- "item": "bp-md",
959
+ "item": "bp-m",
960
960
  "subitem": "gap",
961
961
  "state": "narrow"
962
962
  },
963
963
  "path": [
964
964
  "grid",
965
965
  "columns-12",
966
- "bp-md",
966
+ "bp-m",
967
967
  "gap",
968
968
  "narrow"
969
969
  ],
@@ -977,18 +977,18 @@
977
977
  "value": "{spacing.XL}",
978
978
  "public": true
979
979
  },
980
- "name": "GridColumns12BpMdGapStandard",
980
+ "name": "GridColumns12BpMGapStandard",
981
981
  "attributes": {
982
982
  "category": "grid",
983
983
  "type": "columns-12",
984
- "item": "bp-md",
984
+ "item": "bp-m",
985
985
  "subitem": "gap",
986
986
  "state": "standard"
987
987
  },
988
988
  "path": [
989
989
  "grid",
990
990
  "columns-12",
991
- "bp-md",
991
+ "bp-m",
992
992
  "gap",
993
993
  "standard"
994
994
  ],
@@ -1002,18 +1002,18 @@
1002
1002
  "value": "{spacing.2XL}",
1003
1003
  "public": true
1004
1004
  },
1005
- "name": "GridColumns12BpMdGapWide",
1005
+ "name": "GridColumns12BpMGapWide",
1006
1006
  "attributes": {
1007
1007
  "category": "grid",
1008
1008
  "type": "columns-12",
1009
- "item": "bp-md",
1009
+ "item": "bp-m",
1010
1010
  "subitem": "gap",
1011
1011
  "state": "wide"
1012
1012
  },
1013
1013
  "path": [
1014
1014
  "grid",
1015
1015
  "columns-12",
1016
- "bp-md",
1016
+ "bp-m",
1017
1017
  "gap",
1018
1018
  "wide"
1019
1019
  ],
@@ -1021,7 +1021,7 @@
1021
1021
  }
1022
1022
  }
1023
1023
  },
1024
- "bp-lg": {
1024
+ "bp-l": {
1025
1025
  "gap": {
1026
1026
  "narrow": {
1027
1027
  "value": "1.5",
@@ -1031,18 +1031,18 @@
1031
1031
  "value": "{spacing.XL}",
1032
1032
  "public": true
1033
1033
  },
1034
- "name": "GridColumns12BpLgGapNarrow",
1034
+ "name": "GridColumns12BpLGapNarrow",
1035
1035
  "attributes": {
1036
1036
  "category": "grid",
1037
1037
  "type": "columns-12",
1038
- "item": "bp-lg",
1038
+ "item": "bp-l",
1039
1039
  "subitem": "gap",
1040
1040
  "state": "narrow"
1041
1041
  },
1042
1042
  "path": [
1043
1043
  "grid",
1044
1044
  "columns-12",
1045
- "bp-lg",
1045
+ "bp-l",
1046
1046
  "gap",
1047
1047
  "narrow"
1048
1048
  ],
@@ -1056,18 +1056,18 @@
1056
1056
  "value": "{spacing.2XL}",
1057
1057
  "public": true
1058
1058
  },
1059
- "name": "GridColumns12BpLgGapStandard",
1059
+ "name": "GridColumns12BpLGapStandard",
1060
1060
  "attributes": {
1061
1061
  "category": "grid",
1062
1062
  "type": "columns-12",
1063
- "item": "bp-lg",
1063
+ "item": "bp-l",
1064
1064
  "subitem": "gap",
1065
1065
  "state": "standard"
1066
1066
  },
1067
1067
  "path": [
1068
1068
  "grid",
1069
1069
  "columns-12",
1070
- "bp-lg",
1070
+ "bp-l",
1071
1071
  "gap",
1072
1072
  "standard"
1073
1073
  ],
@@ -1081,18 +1081,18 @@
1081
1081
  "value": "{spacing.3XL}",
1082
1082
  "public": true
1083
1083
  },
1084
- "name": "GridColumns12BpLgGapWide",
1084
+ "name": "GridColumns12BpLGapWide",
1085
1085
  "attributes": {
1086
1086
  "category": "grid",
1087
1087
  "type": "columns-12",
1088
- "item": "bp-lg",
1088
+ "item": "bp-l",
1089
1089
  "subitem": "gap",
1090
1090
  "state": "wide"
1091
1091
  },
1092
1092
  "path": [
1093
1093
  "grid",
1094
1094
  "columns-12",
1095
- "bp-lg",
1095
+ "bp-l",
1096
1096
  "gap",
1097
1097
  "wide"
1098
1098
  ],
@@ -1539,7 +1539,7 @@
1539
1539
  ],
1540
1540
  "public": true
1541
1541
  },
1542
- "sm": {
1542
+ "s": {
1543
1543
  "value": "2",
1544
1544
  "filePath": "tokens/spacing/semantic/button.json",
1545
1545
  "isSource": true,
@@ -1547,22 +1547,22 @@
1547
1547
  "value": "{spacing.2XL}",
1548
1548
  "public": true
1549
1549
  },
1550
- "name": "SpacingButtonHeightSm",
1550
+ "name": "SpacingButtonHeightS",
1551
1551
  "attributes": {
1552
1552
  "category": "spacing",
1553
1553
  "type": "button",
1554
1554
  "item": "height",
1555
- "subitem": "sm"
1555
+ "subitem": "s"
1556
1556
  },
1557
1557
  "path": [
1558
1558
  "spacing",
1559
1559
  "button",
1560
1560
  "height",
1561
- "sm"
1561
+ "s"
1562
1562
  ],
1563
1563
  "public": true
1564
1564
  },
1565
- "md": {
1565
+ "m": {
1566
1566
  "value": "2.5",
1567
1567
  "filePath": "tokens/spacing/semantic/button.json",
1568
1568
  "isSource": true,
@@ -1570,22 +1570,22 @@
1570
1570
  "value": "{spacing.3XL}",
1571
1571
  "public": true
1572
1572
  },
1573
- "name": "SpacingButtonHeightMd",
1573
+ "name": "SpacingButtonHeightM",
1574
1574
  "attributes": {
1575
1575
  "category": "spacing",
1576
1576
  "type": "button",
1577
1577
  "item": "height",
1578
- "subitem": "md"
1578
+ "subitem": "m"
1579
1579
  },
1580
1580
  "path": [
1581
1581
  "spacing",
1582
1582
  "button",
1583
1583
  "height",
1584
- "md"
1584
+ "m"
1585
1585
  ],
1586
1586
  "public": true
1587
1587
  },
1588
- "lg": {
1588
+ "l": {
1589
1589
  "value": "3",
1590
1590
  "filePath": "tokens/spacing/semantic/button.json",
1591
1591
  "isSource": true,
@@ -1593,18 +1593,18 @@
1593
1593
  "value": "{spacing.4XL}",
1594
1594
  "public": true
1595
1595
  },
1596
- "name": "SpacingButtonHeightLg",
1596
+ "name": "SpacingButtonHeightL",
1597
1597
  "attributes": {
1598
1598
  "category": "spacing",
1599
1599
  "type": "button",
1600
1600
  "item": "height",
1601
- "subitem": "lg"
1601
+ "subitem": "l"
1602
1602
  },
1603
1603
  "path": [
1604
1604
  "spacing",
1605
1605
  "button",
1606
1606
  "height",
1607
- "lg"
1607
+ "l"
1608
1608
  ],
1609
1609
  "public": true
1610
1610
  }
@@ -1633,7 +1633,7 @@
1633
1633
  ],
1634
1634
  "public": true
1635
1635
  },
1636
- "sm": {
1636
+ "s": {
1637
1637
  "value": "1",
1638
1638
  "filePath": "tokens/spacing/semantic/button.json",
1639
1639
  "isSource": true,
@@ -1641,22 +1641,22 @@
1641
1641
  "value": "{spacing.M}",
1642
1642
  "public": true
1643
1643
  },
1644
- "name": "SpacingButtonPaddingInlineSm",
1644
+ "name": "SpacingButtonPaddingInlineS",
1645
1645
  "attributes": {
1646
1646
  "category": "spacing",
1647
1647
  "type": "button",
1648
1648
  "item": "padding-inline",
1649
- "subitem": "sm"
1649
+ "subitem": "s"
1650
1650
  },
1651
1651
  "path": [
1652
1652
  "spacing",
1653
1653
  "button",
1654
1654
  "padding-inline",
1655
- "sm"
1655
+ "s"
1656
1656
  ],
1657
1657
  "public": true
1658
1658
  },
1659
- "md": {
1659
+ "m": {
1660
1660
  "value": "1.25",
1661
1661
  "filePath": "tokens/spacing/semantic/button.json",
1662
1662
  "isSource": true,
@@ -1664,22 +1664,22 @@
1664
1664
  "value": "{spacing.L}",
1665
1665
  "public": true
1666
1666
  },
1667
- "name": "SpacingButtonPaddingInlineMd",
1667
+ "name": "SpacingButtonPaddingInlineM",
1668
1668
  "attributes": {
1669
1669
  "category": "spacing",
1670
1670
  "type": "button",
1671
1671
  "item": "padding-inline",
1672
- "subitem": "md"
1672
+ "subitem": "m"
1673
1673
  },
1674
1674
  "path": [
1675
1675
  "spacing",
1676
1676
  "button",
1677
1677
  "padding-inline",
1678
- "md"
1678
+ "m"
1679
1679
  ],
1680
1680
  "public": true
1681
1681
  },
1682
- "lg": {
1682
+ "l": {
1683
1683
  "value": "1.5",
1684
1684
  "filePath": "tokens/spacing/semantic/button.json",
1685
1685
  "isSource": true,
@@ -1687,18 +1687,18 @@
1687
1687
  "value": "{spacing.XL}",
1688
1688
  "public": true
1689
1689
  },
1690
- "name": "SpacingButtonPaddingInlineLg",
1690
+ "name": "SpacingButtonPaddingInlineL",
1691
1691
  "attributes": {
1692
1692
  "category": "spacing",
1693
1693
  "type": "button",
1694
1694
  "item": "padding-inline",
1695
- "subitem": "lg"
1695
+ "subitem": "l"
1696
1696
  },
1697
1697
  "path": [
1698
1698
  "spacing",
1699
1699
  "button",
1700
1700
  "padding-inline",
1701
- "lg"
1701
+ "l"
1702
1702
  ],
1703
1703
  "public": true
1704
1704
  }
@@ -1731,7 +1731,7 @@
1731
1731
  },
1732
1732
  "input": {
1733
1733
  "height": {
1734
- "sm": {
1734
+ "s": {
1735
1735
  "value": "2",
1736
1736
  "filePath": "tokens/spacing/semantic/input.json",
1737
1737
  "isSource": true,
@@ -1739,22 +1739,22 @@
1739
1739
  "value": "{spacing.2XL}",
1740
1740
  "public": true
1741
1741
  },
1742
- "name": "SpacingInputHeightSm",
1742
+ "name": "SpacingInputHeightS",
1743
1743
  "attributes": {
1744
1744
  "category": "spacing",
1745
1745
  "type": "input",
1746
1746
  "item": "height",
1747
- "subitem": "sm"
1747
+ "subitem": "s"
1748
1748
  },
1749
1749
  "path": [
1750
1750
  "spacing",
1751
1751
  "input",
1752
1752
  "height",
1753
- "sm"
1753
+ "s"
1754
1754
  ],
1755
1755
  "public": true
1756
1756
  },
1757
- "md": {
1757
+ "m": {
1758
1758
  "value": "2.5",
1759
1759
  "filePath": "tokens/spacing/semantic/input.json",
1760
1760
  "isSource": true,
@@ -1762,18 +1762,18 @@
1762
1762
  "value": "{spacing.3XL}",
1763
1763
  "public": true
1764
1764
  },
1765
- "name": "SpacingInputHeightMd",
1765
+ "name": "SpacingInputHeightM",
1766
1766
  "attributes": {
1767
1767
  "category": "spacing",
1768
1768
  "type": "input",
1769
1769
  "item": "height",
1770
- "subitem": "md"
1770
+ "subitem": "m"
1771
1771
  },
1772
1772
  "path": [
1773
1773
  "spacing",
1774
1774
  "input",
1775
1775
  "height",
1776
- "md"
1776
+ "m"
1777
1777
  ],
1778
1778
  "public": true
1779
1779
  }
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.13",
4
+ "version": "2.0.0-alpha.14",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",