@pantheon-systems/pds-design-tokens 2.0.0-alpha.15 → 2.0.0-alpha.17

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.
@@ -61,15 +61,18 @@
61
61
  --pds-color-panel-overlay-background: oklch(0.2046 0 0);
62
62
  --pds-color-expansion-panel-hover: oklch(0.2929 0.0039 264.51);
63
63
  --pds-color-expansion-panel-open: oklch(0.2929 0.0039 264.51);
64
- --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
65
- --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
66
- --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
67
- --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
64
+ --pds-color-spinner-full-1: #7600D9;
65
+ --pds-color-spinner-full-2: #A69000;
66
+ --pds-color-spinner-full-3: transparent;
67
+ --pds-color-spinner-mono-1: #FFFFFF;
68
68
  --pds-color-spinner-mono-2: #ffffff80;
69
- --pds-color-spinner-mono-3: oklch(1.0000 0 0);
70
- --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
69
+ --pds-color-spinner-mono-3: transparent;
70
+ --pds-color-spinner-mono-reverse-1: #171717;
71
71
  --pds-color-spinner-mono-reverse-2: #66666680;
72
- --pds-color-spinner-mono-reverse-3: oklch(0.2046 0 0);
72
+ --pds-color-spinner-mono-reverse-3: transparent;
73
+ --pds-color-spinner-critical-secondary-1: #e86b61;
74
+ --pds-color-spinner-critical-secondary-2: #de2e21;
75
+ --pds-color-spinner-critical-secondary-3: transparent;
73
76
  --pds-color-tag-1-background: #DED8FA;
74
77
  --pds-color-tag-1-foreground: #5C4FAC;
75
78
  --pds-color-tag-2-background: #F8D7D3;
@@ -73,7 +73,10 @@
73
73
  --pds-spacing-button-padding-inline-s: var(--pds-spacing-m);
74
74
  --pds-spacing-button-padding-inline-m: var(--pds-spacing-l);
75
75
  --pds-spacing-button-padding-inline-l: var(--pds-spacing-xl);
76
- --pds-spacing-button-gap-inline-default: var(--pds-spacing-2xs);
76
+ --pds-spacing-button-gap-inline-xs: var(--pds-spacing-2xs);
77
+ --pds-spacing-button-gap-inline-s: var(--pds-spacing-2xs);
78
+ --pds-spacing-button-gap-inline-m: var(--pds-spacing-xs);
79
+ --pds-spacing-button-gap-inline-l: var(--pds-spacing-xs);
77
80
  --pds-spacing-input-height-s: var(--pds-spacing-2xl);
78
81
  --pds-spacing-input-height-m: var(--pds-spacing-3xl);
79
82
  --pds-z-index-navigation: 100;
@@ -61,15 +61,18 @@
61
61
  --pds-color-panel-overlay-background: oklch(0.9851 0 0);
62
62
  --pds-color-expansion-panel-hover: oklch(0.9702 0 0);
63
63
  --pds-color-expansion-panel-open: oklch(0.9702 0 0);
64
- --pds-color-spinner-full-1: rgba(255, 255, 255, 0.00);
65
- --pds-color-spinner-full-2: oklch(0.8975 0.1774 96.79);
66
- --pds-color-spinner-full-3: oklch(0.542 0.2895 299.91);
67
- --pds-color-spinner-mono-1: rgba(255, 255, 255, 0.00);
64
+ --pds-color-spinner-full-1: #8f00f9;
65
+ --pds-color-spinner-full-2: #ffdc28;
66
+ --pds-color-spinner-full-3: transparent;
67
+ --pds-color-spinner-mono-1: #171717;
68
68
  --pds-color-spinner-mono-2: #66666680;
69
- --pds-color-spinner-mono-3: oklch(0.2046 0 0);
70
- --pds-color-spinner-mono-reverse-1: rgba(255, 255, 255, 0.00);
69
+ --pds-color-spinner-mono-3: transparent;
70
+ --pds-color-spinner-mono-reverse-1: #FFFFFF;
71
71
  --pds-color-spinner-mono-reverse-2: #ffffff80;
72
- --pds-color-spinner-mono-reverse-3: oklch(1.0000 0 0);
72
+ --pds-color-spinner-mono-reverse-3: transparent;
73
+ --pds-color-spinner-critical-secondary-1: #DE2E21;
74
+ --pds-color-spinner-critical-secondary-2: #F5B6B0;
75
+ --pds-color-spinner-critical-secondary-3: transparent;
73
76
  --pds-color-tag-1-background: #DED8FA;
74
77
  --pds-color-tag-1-foreground: #5C4FAC;
75
78
  --pds-color-tag-2-background: #F8D7D3;
@@ -740,7 +740,7 @@
740
740
  }
741
741
  },
742
742
  "gap-inline": {
743
- "default": {
743
+ "xs": {
744
744
  "value": "{spacing.2XS}",
745
745
  "type": "dimension",
746
746
  "$extensions": {
@@ -752,7 +752,58 @@
752
752
  ],
753
753
  "exportAs": "variable",
754
754
  "codeSyntax": {
755
- "WEB": "--pds-spacing-button-gap-inline-default"
755
+ "WEB": "--pds-spacing-button-gap-inline-xs"
756
+ }
757
+ }
758
+ }
759
+ },
760
+ "s": {
761
+ "value": "{spacing.2XS}",
762
+ "type": "dimension",
763
+ "$extensions": {
764
+ "public": true,
765
+ "defaultUnit": "rem",
766
+ "com.figma": {
767
+ "scopes": [
768
+ "GAP"
769
+ ],
770
+ "exportAs": "variable",
771
+ "codeSyntax": {
772
+ "WEB": "--pds-spacing-button-gap-inline-s"
773
+ }
774
+ }
775
+ }
776
+ },
777
+ "m": {
778
+ "value": "{spacing.XS}",
779
+ "type": "dimension",
780
+ "$extensions": {
781
+ "public": true,
782
+ "defaultUnit": "rem",
783
+ "com.figma": {
784
+ "scopes": [
785
+ "GAP"
786
+ ],
787
+ "exportAs": "variable",
788
+ "codeSyntax": {
789
+ "WEB": "--pds-spacing-button-gap-inline-m"
790
+ }
791
+ }
792
+ }
793
+ },
794
+ "l": {
795
+ "value": "{spacing.XS}",
796
+ "type": "dimension",
797
+ "$extensions": {
798
+ "public": true,
799
+ "defaultUnit": "rem",
800
+ "com.figma": {
801
+ "scopes": [
802
+ "GAP"
803
+ ],
804
+ "exportAs": "variable",
805
+ "codeSyntax": {
806
+ "WEB": "--pds-spacing-button-gap-inline-l"
756
807
  }
757
808
  }
758
809
  }
@@ -4631,10 +4682,11 @@
4631
4682
  "spinner": {
4632
4683
  "full": {
4633
4684
  "1": {
4634
- "value": "rgba(255, 255, 255, 0.00)",
4685
+ "value": "#8f00f9",
4635
4686
  "type": "color",
4636
4687
  "$extensions": {
4637
4688
  "public": true,
4689
+ "resolveValue": true,
4638
4690
  "com.figma": {
4639
4691
  "exportAs": "variable",
4640
4692
  "codeSyntax": {
@@ -4644,7 +4696,7 @@
4644
4696
  }
4645
4697
  },
4646
4698
  "2": {
4647
- "value": "{color.light-mode.apollo.500}",
4699
+ "value": "#ffdc28",
4648
4700
  "type": "color",
4649
4701
  "$extensions": {
4650
4702
  "public": true,
@@ -4658,11 +4710,10 @@
4658
4710
  }
4659
4711
  },
4660
4712
  "3": {
4661
- "value": "{color.light-mode.hypnos.500}",
4713
+ "value": "transparent",
4662
4714
  "type": "color",
4663
4715
  "$extensions": {
4664
4716
  "public": true,
4665
- "resolveValue": true,
4666
4717
  "com.figma": {
4667
4718
  "exportAs": "variable",
4668
4719
  "codeSyntax": {
@@ -4674,7 +4725,7 @@
4674
4725
  },
4675
4726
  "mono": {
4676
4727
  "1": {
4677
- "value": "rgba(255, 255, 255, 0.00)",
4728
+ "value": "#171717",
4678
4729
  "type": "color",
4679
4730
  "$extensions": {
4680
4731
  "public": true,
@@ -4700,7 +4751,7 @@
4700
4751
  }
4701
4752
  },
4702
4753
  "3": {
4703
- "value": "{color.light-mode.aether.800}",
4754
+ "value": "transparent",
4704
4755
  "type": "color",
4705
4756
  "$extensions": {
4706
4757
  "public": true,
@@ -4716,7 +4767,7 @@
4716
4767
  },
4717
4768
  "mono-reverse": {
4718
4769
  "1": {
4719
- "value": "rgba(255, 255, 255, 0.00)",
4770
+ "value": "#FFFFFF",
4720
4771
  "type": "color",
4721
4772
  "$extensions": {
4722
4773
  "public": true,
@@ -4743,7 +4794,7 @@
4743
4794
  }
4744
4795
  },
4745
4796
  "3": {
4746
- "value": "{color.light-mode.white}",
4797
+ "value": "transparent",
4747
4798
  "type": "color",
4748
4799
  "$extensions": {
4749
4800
  "public": true,
@@ -4756,6 +4807,50 @@
4756
4807
  }
4757
4808
  }
4758
4809
  }
4810
+ },
4811
+ "critical-secondary": {
4812
+ "1": {
4813
+ "value": "#DE2E21",
4814
+ "type": "color",
4815
+ "$extensions": {
4816
+ "public": true,
4817
+ "resolveValue": true,
4818
+ "com.figma": {
4819
+ "exportAs": "variable",
4820
+ "codeSyntax": {
4821
+ "WEB": "--pds-color-spinner-critical-secondary-1"
4822
+ }
4823
+ }
4824
+ }
4825
+ },
4826
+ "2": {
4827
+ "value": "#F5B6B0",
4828
+ "type": "color",
4829
+ "$extensions": {
4830
+ "public": true,
4831
+ "resolveValue": true,
4832
+ "com.figma": {
4833
+ "exportAs": "variable",
4834
+ "codeSyntax": {
4835
+ "WEB": "--pds-color-spinner-critical-secondary-2"
4836
+ }
4837
+ }
4838
+ }
4839
+ },
4840
+ "3": {
4841
+ "value": "transparent",
4842
+ "type": "color",
4843
+ "$extensions": {
4844
+ "public": true,
4845
+ "resolveValue": true,
4846
+ "com.figma": {
4847
+ "exportAs": "variable",
4848
+ "codeSyntax": {
4849
+ "WEB": "--pds-color-spinner-critical-secondary-3"
4850
+ }
4851
+ }
4852
+ }
4853
+ }
4759
4854
  }
4760
4855
  },
4761
4856
  "tag": {
@@ -9169,7 +9264,7 @@
9169
9264
  "spinner": {
9170
9265
  "full": {
9171
9266
  "1": {
9172
- "value": "rgba(255, 255, 255, 0.00)",
9267
+ "value": "#7600D9",
9173
9268
  "type": "color",
9174
9269
  "$extensions": {
9175
9270
  "public": true,
@@ -9182,7 +9277,7 @@
9182
9277
  }
9183
9278
  },
9184
9279
  "2": {
9185
- "value": "{color.dark-mode.apollo.400}",
9280
+ "value": "#A69000",
9186
9281
  "type": "color",
9187
9282
  "$extensions": {
9188
9283
  "public": true,
@@ -9196,7 +9291,7 @@
9196
9291
  }
9197
9292
  },
9198
9293
  "3": {
9199
- "value": "{color.dark-mode.hypnos.400}",
9294
+ "value": "transparent",
9200
9295
  "type": "color",
9201
9296
  "$extensions": {
9202
9297
  "public": true,
@@ -9212,7 +9307,7 @@
9212
9307
  },
9213
9308
  "mono": {
9214
9309
  "1": {
9215
- "value": "rgba(255, 255, 255, 0.00)",
9310
+ "value": "#FFFFFF",
9216
9311
  "type": "color",
9217
9312
  "$extensions": {
9218
9313
  "public": true,
@@ -9239,7 +9334,7 @@
9239
9334
  }
9240
9335
  },
9241
9336
  "3": {
9242
- "value": "{color.dark-mode.white}",
9337
+ "value": "transparent",
9243
9338
  "type": "color",
9244
9339
  "$extensions": {
9245
9340
  "public": true,
@@ -9255,7 +9350,7 @@
9255
9350
  },
9256
9351
  "mono-reverse": {
9257
9352
  "1": {
9258
- "value": "rgba(255, 255, 255, 0.00)",
9353
+ "value": "#171717",
9259
9354
  "type": "color",
9260
9355
  "$extensions": {
9261
9356
  "public": true,
@@ -9281,7 +9376,7 @@
9281
9376
  }
9282
9377
  },
9283
9378
  "3": {
9284
- "value": "{color.dark-mode.aether.700}",
9379
+ "value": "transparent",
9285
9380
  "type": "color",
9286
9381
  "$extensions": {
9287
9382
  "public": true,
@@ -9294,6 +9389,50 @@
9294
9389
  }
9295
9390
  }
9296
9391
  }
9392
+ },
9393
+ "critical-secondary": {
9394
+ "1": {
9395
+ "value": "#e86b61",
9396
+ "type": "color",
9397
+ "$extensions": {
9398
+ "public": true,
9399
+ "resolveValue": true,
9400
+ "com.figma": {
9401
+ "exportAs": "variable",
9402
+ "codeSyntax": {
9403
+ "WEB": "--pds-color-spinner-critical-secondary-1"
9404
+ }
9405
+ }
9406
+ }
9407
+ },
9408
+ "2": {
9409
+ "value": "#de2e21",
9410
+ "type": "color",
9411
+ "$extensions": {
9412
+ "public": true,
9413
+ "resolveValue": true,
9414
+ "com.figma": {
9415
+ "exportAs": "variable",
9416
+ "codeSyntax": {
9417
+ "WEB": "--pds-color-spinner-critical-secondary-2"
9418
+ }
9419
+ }
9420
+ }
9421
+ },
9422
+ "3": {
9423
+ "value": "transparent",
9424
+ "type": "color",
9425
+ "$extensions": {
9426
+ "public": true,
9427
+ "resolveValue": true,
9428
+ "com.figma": {
9429
+ "exportAs": "variable",
9430
+ "codeSyntax": {
9431
+ "WEB": "--pds-color-spinner-critical-secondary-3"
9432
+ }
9433
+ }
9434
+ }
9435
+ }
9297
9436
  }
9298
9437
  },
9299
9438
  "tag": {
@@ -80,7 +80,10 @@ export const SPACING_BUTTON_PADDING_INLINE_XS: string;
80
80
  export const SPACING_BUTTON_PADDING_INLINE_S: string;
81
81
  export const SPACING_BUTTON_PADDING_INLINE_M: string;
82
82
  export const SPACING_BUTTON_PADDING_INLINE_L: string;
83
- export const SPACING_BUTTON_GAP_INLINE_DEFAULT: string;
83
+ export const SPACING_BUTTON_GAP_INLINE_XS: string;
84
+ export const SPACING_BUTTON_GAP_INLINE_S: string;
85
+ export const SPACING_BUTTON_GAP_INLINE_M: string;
86
+ export const SPACING_BUTTON_GAP_INLINE_L: string;
84
87
  export const SPACING_INPUT_HEIGHT_S: string;
85
88
  export const SPACING_INPUT_HEIGHT_M: string;
86
89
  export const Z_INDEX_NAVIGATION: number;
@@ -80,7 +80,10 @@ export const SPACING_BUTTON_PADDING_INLINE_XS = "0.75rem";
80
80
  export const SPACING_BUTTON_PADDING_INLINE_S = "1rem";
81
81
  export const SPACING_BUTTON_PADDING_INLINE_M = "1.25rem";
82
82
  export const SPACING_BUTTON_PADDING_INLINE_L = "1.5rem";
83
- export const SPACING_BUTTON_GAP_INLINE_DEFAULT = "0.5rem";
83
+ export const SPACING_BUTTON_GAP_INLINE_XS = "0.5rem";
84
+ export const SPACING_BUTTON_GAP_INLINE_S = "0.5rem";
85
+ export const SPACING_BUTTON_GAP_INLINE_M = "0.625rem";
86
+ export const SPACING_BUTTON_GAP_INLINE_L = "0.625rem";
84
87
  export const SPACING_INPUT_HEIGHT_S = "2rem";
85
88
  export const SPACING_INPUT_HEIGHT_M = "2.5rem";
86
89
  export const Z_INDEX_NAVIGATION = 100;
@@ -1704,7 +1704,30 @@
1704
1704
  }
1705
1705
  },
1706
1706
  "gap-inline": {
1707
- "default": {
1707
+ "xs": {
1708
+ "value": "0.5",
1709
+ "filePath": "tokens/spacing/semantic/button.json",
1710
+ "isSource": true,
1711
+ "original": {
1712
+ "value": "{spacing.2XS}",
1713
+ "public": true
1714
+ },
1715
+ "name": "SpacingButtonGapInlineXs",
1716
+ "attributes": {
1717
+ "category": "spacing",
1718
+ "type": "button",
1719
+ "item": "gap-inline",
1720
+ "subitem": "xs"
1721
+ },
1722
+ "path": [
1723
+ "spacing",
1724
+ "button",
1725
+ "gap-inline",
1726
+ "xs"
1727
+ ],
1728
+ "public": true
1729
+ },
1730
+ "s": {
1708
1731
  "value": "0.5",
1709
1732
  "filePath": "tokens/spacing/semantic/button.json",
1710
1733
  "isSource": true,
@@ -1712,18 +1735,64 @@
1712
1735
  "value": "{spacing.2XS}",
1713
1736
  "public": true
1714
1737
  },
1715
- "name": "SpacingButtonGapInlineDefault",
1738
+ "name": "SpacingButtonGapInlineS",
1716
1739
  "attributes": {
1717
1740
  "category": "spacing",
1718
1741
  "type": "button",
1719
1742
  "item": "gap-inline",
1720
- "subitem": "default"
1743
+ "subitem": "s"
1721
1744
  },
1722
1745
  "path": [
1723
1746
  "spacing",
1724
1747
  "button",
1725
1748
  "gap-inline",
1726
- "default"
1749
+ "s"
1750
+ ],
1751
+ "public": true
1752
+ },
1753
+ "m": {
1754
+ "value": "0.625",
1755
+ "filePath": "tokens/spacing/semantic/button.json",
1756
+ "isSource": true,
1757
+ "original": {
1758
+ "value": "{spacing.XS}",
1759
+ "public": true
1760
+ },
1761
+ "name": "SpacingButtonGapInlineM",
1762
+ "attributes": {
1763
+ "category": "spacing",
1764
+ "type": "button",
1765
+ "item": "gap-inline",
1766
+ "subitem": "m"
1767
+ },
1768
+ "path": [
1769
+ "spacing",
1770
+ "button",
1771
+ "gap-inline",
1772
+ "m"
1773
+ ],
1774
+ "public": true
1775
+ },
1776
+ "l": {
1777
+ "value": "0.625",
1778
+ "filePath": "tokens/spacing/semantic/button.json",
1779
+ "isSource": true,
1780
+ "original": {
1781
+ "value": "{spacing.XS}",
1782
+ "public": true
1783
+ },
1784
+ "name": "SpacingButtonGapInlineL",
1785
+ "attributes": {
1786
+ "category": "spacing",
1787
+ "type": "button",
1788
+ "item": "gap-inline",
1789
+ "subitem": "l"
1790
+ },
1791
+ "path": [
1792
+ "spacing",
1793
+ "button",
1794
+ "gap-inline",
1795
+ "l"
1727
1796
  ],
1728
1797
  "public": true
1729
1798
  }
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.15",
4
+ "version": "2.0.0-alpha.17",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",