@pantheon-systems/pds-design-tokens 2.0.0-alpha.16 → 2.0.0-alpha.18

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.
@@ -70,6 +70,9 @@
70
70
  --pds-color-spinner-mono-reverse-1: #171717;
71
71
  --pds-color-spinner-mono-reverse-2: #66666680;
72
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;
@@ -118,27 +121,27 @@
118
121
  --pds-color-border-brand: #9786E2;
119
122
  --pds-color-border-input: oklch(0.4235 0.0071 264.49);
120
123
  --pds-color-border-separator: oklch(0.4235 0.0071 264.49);
121
- --pds-color-button-primary-background-default: oklch(0.8388 0.003 264.54);
122
- --pds-color-button-primary-background-hover: oklch(0.5991 0.0051 258.33);
124
+ --pds-color-button-primary-background-default: oklch(1.0000 0 0);
125
+ --pds-color-button-primary-background-hover: oklch(0.8388 0.003 264.54);
123
126
  --pds-color-button-primary-foreground: oklch(0.1489 0.0027 248.08);
124
127
  --pds-color-button-secondary-background-default: rgba(255, 255, 255, 0.00);
125
- --pds-color-button-secondary-background-hover: oklch(0.2433 0.0041 264.49);
128
+ --pds-color-button-secondary-background-hover: oklch(0.2929 0.0039 264.51);
126
129
  --pds-color-button-secondary-border: oklch(0.4235 0.0071 264.49);
127
- --pds-color-button-secondary-foreground: oklch(0.8388 0.003 264.54);
130
+ --pds-color-button-secondary-foreground: oklch(1.0000 0 0);
128
131
  --pds-color-button-subtle-background-default: rgba(255, 255, 255, 0.00);
129
- --pds-color-button-subtle-background-hover: oklch(0.2433 0.0041 264.49);
130
- --pds-color-button-subtle-foreground: oklch(0.8388 0.003 264.54);
132
+ --pds-color-button-subtle-background-hover: oklch(0.2929 0.0039 264.51);
133
+ --pds-color-button-subtle-foreground: oklch(1.0000 0 0);
131
134
  --pds-color-button-brand-background-default: oklch(0.8975 0.1774 96.79);
132
135
  --pds-color-button-brand-background-hover: oklch(0.6533 0.1351 98.32);
133
136
  --pds-color-button-brand-foreground: oklch(0.1489 0.0027 248.08);
134
- --pds-color-button-critical-background-default: oklch(0.5103 0.1942 29.6);
135
- --pds-color-button-critical-background-hover: oklch(0.5856 0.2126 29.44);
137
+ --pds-color-button-critical-background-default: oklch(0.5856 0.2126 29.44);
138
+ --pds-color-button-critical-background-hover: oklch(0.5103 0.1942 29.6);
136
139
  --pds-color-button-critical-foreground: oklch(1.0000 0 0);
137
- --pds-color-button-critical-secondary-background-default: oklch(0.3866 0.145 30.09);
138
- --pds-color-button-critical-secondary-background-hover: oklch(0.5103 0.1942 29.6);
140
+ --pds-color-button-critical-secondary-background-default: rgba(255, 255, 255, 0.00);
141
+ --pds-color-button-critical-secondary-background-hover: #80120866;
139
142
  --pds-color-button-critical-secondary-border-default: oklch(0.3866 0.145 30.09);
140
- --pds-color-button-critical-secondary-border-hover: oklch(0.5103 0.1942 29.6);
141
- --pds-color-button-critical-secondary-foreground: oklch(0.8326 0.0742 24.95);
143
+ --pds-color-button-critical-secondary-border-hover: oklch(0.3866 0.145 30.09);
144
+ --pds-color-button-critical-secondary-foreground: oklch(0.6766 0.1572 26.68);
142
145
  --pds-color-button-navbar-background-default: rgba(255, 255, 255, 0.00);
143
146
  --pds-color-button-navbar-background-hover: oklch(0.2433 0.0041 264.49);
144
147
  --pds-color-button-navbar-foreground: oklch(0.8388 0.003 264.54);
@@ -181,8 +184,8 @@
181
184
  --pds-color-interactive-background-hover: oklch(0.2929 0.0039 264.51);
182
185
  --pds-color-interactive-background-active: oklch(0.3554 0.0058 258.35);
183
186
  --pds-color-interactive-focus: oklch(0.5558 0.2372 267.79);
184
- --pds-color-interactive-link-default: oklch(0.5558 0.2372 267.79);
185
- --pds-color-interactive-link-hover: oklch(0.542 0.2895 299.91);
187
+ --pds-color-interactive-link-default: oklch(0.6575 0.177 272.74);
188
+ --pds-color-interactive-link-hover: oklch(0.6311 0.2503 304.99);
186
189
  --pds-color-interactive-link-active: oklch(0.6311 0.2503 304.99);
187
190
  --pds-color-interactive-link-visited: oklch(0.6311 0.2503 304.99);
188
191
  --pds-color-interactive-reverse-focus: oklch(0.5558 0.2372 267.79);
@@ -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;
@@ -70,6 +70,9 @@
70
70
  --pds-color-spinner-mono-reverse-1: #FFFFFF;
71
71
  --pds-color-spinner-mono-reverse-2: #ffffff80;
72
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
  }
@@ -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": {
@@ -6726,7 +6821,7 @@
6726
6821
  "primary": {
6727
6822
  "background": {
6728
6823
  "default": {
6729
- "value": "{color.dark-mode.aether.100}",
6824
+ "value": "{color.dark-mode.white}",
6730
6825
  "type": "color",
6731
6826
  "$extensions": {
6732
6827
  "public": true,
@@ -6740,7 +6835,7 @@
6740
6835
  }
6741
6836
  },
6742
6837
  "hover": {
6743
- "value": "{color.dark-mode.aether.200}",
6838
+ "value": "{color.dark-mode.aether.100}",
6744
6839
  "type": "color",
6745
6840
  "$extensions": {
6746
6841
  "public": true,
@@ -6785,7 +6880,7 @@
6785
6880
  }
6786
6881
  },
6787
6882
  "hover": {
6788
- "value": "{color.dark-mode.aether.600}",
6883
+ "value": "{color.dark-mode.aether.500}",
6789
6884
  "type": "color",
6790
6885
  "$extensions": {
6791
6886
  "public": true,
@@ -6814,7 +6909,7 @@
6814
6909
  }
6815
6910
  },
6816
6911
  "foreground": {
6817
- "value": "{color.dark-mode.aether.100}",
6912
+ "value": "{color.dark-mode.white}",
6818
6913
  "type": "color",
6819
6914
  "$extensions": {
6820
6915
  "public": true,
@@ -6844,7 +6939,7 @@
6844
6939
  }
6845
6940
  },
6846
6941
  "hover": {
6847
- "value": "{color.dark-mode.aether.600}",
6942
+ "value": "{color.dark-mode.aether.500}",
6848
6943
  "type": "color",
6849
6944
  "$extensions": {
6850
6945
  "public": true,
@@ -6859,7 +6954,7 @@
6859
6954
  }
6860
6955
  },
6861
6956
  "foreground": {
6862
- "value": "{color.dark-mode.aether.100}",
6957
+ "value": "{color.dark-mode.white}",
6863
6958
  "type": "color",
6864
6959
  "$extensions": {
6865
6960
  "public": true,
@@ -6922,7 +7017,7 @@
6922
7017
  "critical": {
6923
7018
  "background": {
6924
7019
  "default": {
6925
- "value": "{color.dark-mode.ares.400}",
7020
+ "value": "{color.dark-mode.ares.300}",
6926
7021
  "type": "color",
6927
7022
  "$extensions": {
6928
7023
  "public": true,
@@ -6936,7 +7031,7 @@
6936
7031
  }
6937
7032
  },
6938
7033
  "hover": {
6939
- "value": "{color.dark-mode.ares.300}",
7034
+ "value": "{color.dark-mode.ares.400}",
6940
7035
  "type": "color",
6941
7036
  "$extensions": {
6942
7037
  "public": true,
@@ -6968,7 +7063,7 @@
6968
7063
  "critical-secondary": {
6969
7064
  "background": {
6970
7065
  "default": {
6971
- "value": "{color.dark-mode.ares.500}",
7066
+ "value": "rgba(255, 255, 255, 0.00)",
6972
7067
  "type": "color",
6973
7068
  "$extensions": {
6974
7069
  "public": true,
@@ -6982,7 +7077,7 @@
6982
7077
  }
6983
7078
  },
6984
7079
  "hover": {
6985
- "value": "{color.dark-mode.ares.400}",
7080
+ "value": "#80120866",
6986
7081
  "type": "color",
6987
7082
  "$extensions": {
6988
7083
  "public": true,
@@ -6998,7 +7093,7 @@
6998
7093
  },
6999
7094
  "border": {
7000
7095
  "default": {
7001
- "value": "{color.dark-mode.button.critical-secondary.background.default}",
7096
+ "value": "{color.dark-mode.ares.500}",
7002
7097
  "type": "color",
7003
7098
  "$extensions": {
7004
7099
  "public": true,
@@ -7012,7 +7107,7 @@
7012
7107
  }
7013
7108
  },
7014
7109
  "hover": {
7015
- "value": "{color.dark-mode.ares.400}",
7110
+ "value": "{color.dark-mode.ares.500}",
7016
7111
  "type": "color",
7017
7112
  "$extensions": {
7018
7113
  "public": true,
@@ -7027,7 +7122,7 @@
7027
7122
  }
7028
7123
  },
7029
7124
  "foreground": {
7030
- "value": "{color.dark-mode.ares.100}",
7125
+ "value": "{color.dark-mode.ares.200}",
7031
7126
  "type": "color",
7032
7127
  "$extensions": {
7033
7128
  "public": true,
@@ -7666,7 +7761,7 @@
7666
7761
  },
7667
7762
  "link": {
7668
7763
  "default": {
7669
- "value": "{color.dark-mode.iris.400}",
7764
+ "value": "{color.dark-mode.iris.300}",
7670
7765
  "type": "color",
7671
7766
  "$extensions": {
7672
7767
  "public": true,
@@ -7680,7 +7775,7 @@
7680
7775
  }
7681
7776
  },
7682
7777
  "hover": {
7683
- "value": "{color.dark-mode.hypnos.400}",
7778
+ "value": "{color.dark-mode.hypnos.300}",
7684
7779
  "type": "color",
7685
7780
  "$extensions": {
7686
7781
  "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.16",
4
+ "version": "2.0.0-alpha.18",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",