@pantheon-systems/pds-design-tokens 1.0.0-dev.26 → 1.0.0-dev.28

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 (11) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +2 -9
  2. package/build/css/pds-design-tokens-light-mode.css +2 -9
  3. package/build/css/pds-design-tokens.css +1 -0
  4. package/build/figma/pds-design-tokens-figma.json +149 -476
  5. package/build/json/pds-design-tokens-dark-mode.json +62 -237
  6. package/build/json/pds-design-tokens-light-mode.json +62 -239
  7. package/build/json/pds-design-tokens.json +23 -0
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +2 -9
  9. package/build/scss/_pds-design-tokens-light-mode.scss +2 -9
  10. package/build/scss/_pds-design-tokens.scss +1 -0
  11. package/package.json +1 -1
package/build/json/pds-design-tokens-light-mode.json CHANGED
@@ -1586,7 +1586,7 @@
1586
1586
  "value": "#ffffff",
1587
1587
  "public": true,
1588
1588
  "isReferenceToInternal": true,
1589
- "filePath": "tokens/color/alias/form.light.json",
1589
+ "filePath": "tokens/color/alias/input.light.json",
1590
1590
  "isSource": true,
1591
1591
  "original": {
1592
1592
  "value": "{color.light-mode.neutral.000.value}",
@@ -1613,7 +1613,7 @@
1613
1613
  "value": "#f0ecff",
1614
1614
  "public": true,
1615
1615
  "isReferenceToInternal": true,
1616
- "filePath": "tokens/color/alias/form.light.json",
1616
+ "filePath": "tokens/color/alias/input.light.json",
1617
1617
  "isSource": true,
1618
1618
  "original": {
1619
1619
  "value": "{color.light-mode.brand.secondary.100.value}",
@@ -1640,7 +1640,7 @@
1640
1640
  "value": "#ffebeb",
1641
1641
  "public": true,
1642
1642
  "isReferenceToInternal": true,
1643
- "filePath": "tokens/color/alias/form.light.json",
1643
+ "filePath": "tokens/color/alias/input.light.json",
1644
1644
  "isSource": true,
1645
1645
  "original": {
1646
1646
  "value": "{color.light-mode.semantic.error.100.value}",
@@ -1669,7 +1669,7 @@
1669
1669
  "value": "#cfcfd3",
1670
1670
  "public": true,
1671
1671
  "isReferenceToInternal": true,
1672
- "filePath": "tokens/color/alias/form.light.json",
1672
+ "filePath": "tokens/color/alias/input.light.json",
1673
1673
  "isSource": true,
1674
1674
  "original": {
1675
1675
  "value": "{color.light-mode.neutral.200.value}",
@@ -1696,7 +1696,7 @@
1696
1696
  "value": "#5f41e5",
1697
1697
  "public": true,
1698
1698
  "isReferenceToInternal": true,
1699
- "filePath": "tokens/color/alias/form.light.json",
1699
+ "filePath": "tokens/color/alias/input.light.json",
1700
1700
  "isSource": true,
1701
1701
  "original": {
1702
1702
  "value": "{color.light-mode.brand.secondary.300.value}",
@@ -1723,7 +1723,7 @@
1723
1723
  "value": "#1f845a",
1724
1724
  "public": true,
1725
1725
  "isReferenceToInternal": true,
1726
- "filePath": "tokens/color/alias/form.light.json",
1726
+ "filePath": "tokens/color/alias/input.light.json",
1727
1727
  "isSource": true,
1728
1728
  "original": {
1729
1729
  "value": "{color.light-mode.semantic.success.400.value}",
@@ -1750,7 +1750,7 @@
1750
1750
  "value": "#d61f1f",
1751
1751
  "public": true,
1752
1752
  "isReferenceToInternal": true,
1753
- "filePath": "tokens/color/alias/form.light.json",
1753
+ "filePath": "tokens/color/alias/input.light.json",
1754
1754
  "isSource": true,
1755
1755
  "original": {
1756
1756
  "value": "{color.light-mode.semantic.error.400.value}",
@@ -1779,7 +1779,7 @@
1779
1779
  "value": "#23232d",
1780
1780
  "public": true,
1781
1781
  "isReferenceToInternal": true,
1782
- "filePath": "tokens/color/alias/form.light.json",
1782
+ "filePath": "tokens/color/alias/input.light.json",
1783
1783
  "isSource": true,
1784
1784
  "original": {
1785
1785
  "value": "{color.light-mode.neutral.500.value}",
@@ -1806,7 +1806,7 @@
1806
1806
  "value": "#1f845a",
1807
1807
  "public": true,
1808
1808
  "isReferenceToInternal": true,
1809
- "filePath": "tokens/color/alias/form.light.json",
1809
+ "filePath": "tokens/color/alias/input.light.json",
1810
1810
  "isSource": true,
1811
1811
  "original": {
1812
1812
  "value": "{color.light-mode.semantic.success.400.value}",
@@ -1833,7 +1833,7 @@
1833
1833
  "value": "#d61f1f",
1834
1834
  "public": true,
1835
1835
  "isReferenceToInternal": true,
1836
- "filePath": "tokens/color/alias/form.light.json",
1836
+ "filePath": "tokens/color/alias/input.light.json",
1837
1837
  "isSource": true,
1838
1838
  "original": {
1839
1839
  "value": "{color.light-mode.semantic.error.400.value}",
@@ -1861,7 +1861,7 @@
1861
1861
  "value": "#71717c",
1862
1862
  "public": true,
1863
1863
  "isReferenceToInternal": true,
1864
- "filePath": "tokens/color/alias/form.light.json",
1864
+ "filePath": "tokens/color/alias/input.light.json",
1865
1865
  "isSource": true,
1866
1866
  "original": {
1867
1867
  "value": "{color.light-mode.neutral.400.value}",
@@ -1886,7 +1886,7 @@
1886
1886
  "background": {
1887
1887
  "value": "#0f62fe",
1888
1888
  "public": true,
1889
- "filePath": "tokens/color/alias/form.light.json",
1889
+ "filePath": "tokens/color/alias/input.light.json",
1890
1890
  "isSource": true,
1891
1891
  "original": {
1892
1892
  "value": "{color.light-mode.interactive.focus.value}",
@@ -1912,7 +1912,7 @@
1912
1912
  "value": "#ffffff",
1913
1913
  "public": true,
1914
1914
  "isReferenceToInternal": true,
1915
- "filePath": "tokens/color/alias/form.light.json",
1915
+ "filePath": "tokens/color/alias/input.light.json",
1916
1916
  "isSource": true,
1917
1917
  "original": {
1918
1918
  "value": "{color.light-mode.neutral.000.value}",
@@ -1936,118 +1936,58 @@
1936
1936
  ]
1937
1937
  }
1938
1938
  },
1939
- "toggle": {
1940
- "background": {
1941
- "off": {
1942
- "value": "#f8f8f8",
1939
+ "toggle-switch": {
1940
+ "off": {
1941
+ "value": "#94949e",
1942
+ "public": true,
1943
+ "isReferenceToInternal": true,
1944
+ "filePath": "tokens/color/alias/input.light.json",
1945
+ "isSource": true,
1946
+ "original": {
1947
+ "value": "{color.light-mode.neutral.300.value}",
1943
1948
  "public": true,
1944
- "isReferenceToInternal": true,
1945
- "filePath": "tokens/color/alias/form.light.json",
1946
- "isSource": true,
1947
- "original": {
1948
- "value": "{color.light-mode.neutral.100.value}",
1949
- "public": true,
1950
- "isReferenceToInternal": true
1951
- },
1952
- "name": "color-light-mode-input-toggle-background-off",
1953
- "attributes": {
1954
- "category": "color",
1955
- "type": "light-mode",
1956
- "item": "input",
1957
- "subitem": "toggle",
1958
- "state": "background"
1959
- },
1960
- "path": [
1961
- "color",
1962
- "light-mode",
1963
- "input",
1964
- "toggle",
1965
- "background",
1966
- "off"
1967
- ]
1949
+ "isReferenceToInternal": true
1968
1950
  },
1969
- "on": {
1970
- "value": "#0f62fe",
1971
- "public": true,
1972
- "filePath": "tokens/color/alias/form.light.json",
1973
- "isSource": true,
1974
- "original": {
1975
- "value": "{color.light-mode.interactive.focus.value}",
1976
- "public": true
1977
- },
1978
- "name": "color-light-mode-input-toggle-background-on",
1979
- "attributes": {
1980
- "category": "color",
1981
- "type": "light-mode",
1982
- "item": "input",
1983
- "subitem": "toggle",
1984
- "state": "background"
1985
- },
1986
- "path": [
1987
- "color",
1988
- "light-mode",
1989
- "input",
1990
- "toggle",
1991
- "background",
1992
- "on"
1993
- ]
1994
- }
1951
+ "name": "color-light-mode-input-toggle-switch-off",
1952
+ "attributes": {
1953
+ "category": "color",
1954
+ "type": "light-mode",
1955
+ "item": "input",
1956
+ "subitem": "toggle-switch",
1957
+ "state": "off"
1958
+ },
1959
+ "path": [
1960
+ "color",
1961
+ "light-mode",
1962
+ "input",
1963
+ "toggle-switch",
1964
+ "off"
1965
+ ]
1995
1966
  },
1996
- "border": {
1997
- "off": {
1998
- "value": "#71717c",
1999
- "public": true,
2000
- "isReferenceToInternal": true,
2001
- "filePath": "tokens/color/alias/form.light.json",
2002
- "isSource": true,
2003
- "original": {
2004
- "value": "{color.light-mode.neutral.400.value}",
2005
- "public": true,
2006
- "isReferenceToInternal": true
2007
- },
2008
- "name": "color-light-mode-input-toggle-border-off",
2009
- "attributes": {
2010
- "category": "color",
2011
- "type": "light-mode",
2012
- "item": "input",
2013
- "subitem": "toggle",
2014
- "state": "border"
2015
- },
2016
- "path": [
2017
- "color",
2018
- "light-mode",
2019
- "input",
2020
- "toggle",
2021
- "border",
2022
- "off"
2023
- ]
1967
+ "on": {
1968
+ "value": "#0f62fe",
1969
+ "public": true,
1970
+ "filePath": "tokens/color/alias/input.light.json",
1971
+ "isSource": true,
1972
+ "original": {
1973
+ "value": "{color.light-mode.interactive.focus.value}",
1974
+ "public": true
2024
1975
  },
2025
- "on": {
2026
- "value": "#0f62fe",
2027
- "public": true,
2028
- "filePath": "tokens/color/alias/form.light.json",
2029
- "isSource": true,
2030
- "original": {
2031
- "value": "{color.light-mode.interactive.focus.value}",
2032
- "public": true
2033
- },
2034
- "name": "color-light-mode-input-toggle-border-on",
2035
- "attributes": {
2036
- "category": "color",
2037
- "type": "light-mode",
2038
- "item": "input",
2039
- "subitem": "toggle",
2040
- "state": "border"
2041
- },
2042
- "path": [
2043
- "color",
2044
- "light-mode",
2045
- "input",
2046
- "toggle",
2047
- "border",
2048
- "on"
2049
- ]
2050
- }
1976
+ "name": "color-light-mode-input-toggle-switch-on",
1977
+ "attributes": {
1978
+ "category": "color",
1979
+ "type": "light-mode",
1980
+ "item": "input",
1981
+ "subitem": "toggle-switch",
1982
+ "state": "on"
1983
+ },
1984
+ "path": [
1985
+ "color",
1986
+ "light-mode",
1987
+ "input",
1988
+ "toggle-switch",
1989
+ "on"
1990
+ ]
2051
1991
  }
2052
1992
  },
2053
1993
  "action": {
@@ -2056,7 +1996,7 @@
2056
1996
  "value": "#f8f8f8",
2057
1997
  "public": true,
2058
1998
  "isReferenceToInternal": true,
2059
- "filePath": "tokens/color/alias/form.light.json",
1999
+ "filePath": "tokens/color/alias/input.light.json",
2060
2000
  "isSource": true,
2061
2001
  "original": {
2062
2002
  "value": "{color.light-mode.neutral.100.value}",
@@ -2703,123 +2643,6 @@
2703
2643
  "text",
2704
2644
  "default-secondary"
2705
2645
  ]
2706
- },
2707
- "paragraph": {
2708
- "value": "#23232d",
2709
- "public": true,
2710
- "isReferenceToInternal": true,
2711
- "filePath": "tokens/color/alias/typography.light.json",
2712
- "isSource": true,
2713
- "original": {
2714
- "value": "{color.light-mode.text.default}",
2715
- "public": true,
2716
- "isReferenceToInternal": true
2717
- },
2718
- "name": "color-light-mode-text-paragraph",
2719
- "attributes": {
2720
- "category": "color",
2721
- "type": "light-mode",
2722
- "item": "text",
2723
- "subitem": "paragraph"
2724
- },
2725
- "path": [
2726
- "color",
2727
- "light-mode",
2728
- "text",
2729
- "paragraph"
2730
- ]
2731
- },
2732
- "headings": {
2733
- "value": "#23232d",
2734
- "public": true,
2735
- "filePath": "tokens/color/alias/typography.light.json",
2736
- "isSource": true,
2737
- "original": {
2738
- "value": "{color.light-mode.text.default}",
2739
- "public": true
2740
- },
2741
- "name": "color-light-mode-text-headings",
2742
- "attributes": {
2743
- "category": "color",
2744
- "type": "light-mode",
2745
- "item": "text",
2746
- "subitem": "headings"
2747
- },
2748
- "path": [
2749
- "color",
2750
- "light-mode",
2751
- "text",
2752
- "headings"
2753
- ]
2754
- },
2755
- "lead": {
2756
- "value": "#71717c",
2757
- "public": true,
2758
- "filePath": "tokens/color/alias/typography.light.json",
2759
- "isSource": true,
2760
- "original": {
2761
- "value": "{color.light-mode.text.default-secondary}",
2762
- "public": true
2763
- },
2764
- "name": "color-light-mode-text-lead",
2765
- "attributes": {
2766
- "category": "color",
2767
- "type": "light-mode",
2768
- "item": "text",
2769
- "subitem": "lead"
2770
- },
2771
- "path": [
2772
- "color",
2773
- "light-mode",
2774
- "text",
2775
- "lead"
2776
- ]
2777
- },
2778
- "overline": {
2779
- "value": "#71717c",
2780
- "public": true,
2781
- "filePath": "tokens/color/alias/typography.light.json",
2782
- "isSource": true,
2783
- "original": {
2784
- "value": "{color.light-mode.text.default-secondary}",
2785
- "public": true
2786
- },
2787
- "name": "color-light-mode-text-overline",
2788
- "attributes": {
2789
- "category": "color",
2790
- "type": "light-mode",
2791
- "item": "text",
2792
- "subitem": "overline"
2793
- },
2794
- "path": [
2795
- "color",
2796
- "light-mode",
2797
- "text",
2798
- "overline"
2799
- ]
2800
- },
2801
- "quote": {
2802
- "value": "#71717c",
2803
- "public": true,
2804
- "filePath": "tokens/color/alias/typography.light.json",
2805
- "isSource": true,
2806
- "original": {
2807
- "value": "{color.light-mode.text.default-secondary}",
2808
- "public": true
2809
- },
2810
- "name": "color-light-mode-text-quote",
2811
- "attributes": {
2812
- "category": "color",
2813
- "type": "light-mode",
2814
- "item": "text",
2815
- "subitem": "quote"
2816
- },
2817
- "path": [
2818
- "color",
2819
- "light-mode",
2820
- "text",
2821
- "quote"
2822
- ]
2823
2646
  }
2824
2647
  },
2825
2648
  "brand": {
package/build/json/pds-design-tokens.json CHANGED
@@ -186,6 +186,29 @@
186
186
  "radius",
187
187
  "default"
188
188
  ]
189
+ },
190
+ "container": {
191
+ "value": 0.375,
192
+ "defaultUnit": "rem",
193
+ "public": true,
194
+ "filePath": "tokens/border/alias.json",
195
+ "isSource": true,
196
+ "original": {
197
+ "value": 0.375,
198
+ "defaultUnit": "rem",
199
+ "public": true
200
+ },
201
+ "name": "border-radius-container",
202
+ "attributes": {
203
+ "category": "border",
204
+ "type": "radius",
205
+ "item": "container"
206
+ },
207
+ "path": [
208
+ "border",
209
+ "radius",
210
+ "container"
211
+ ]
189
212
  }
190
213
  },
191
214
  "width": {
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -84,10 +84,8 @@ $pds-color-input-foreground-critical: #e05757;
84
84
  $pds-color-input-foreground-default: #ffffff;
85
85
  $pds-color-input-foreground-success: #3cb683;
86
86
  $pds-color-input-placeholder-text: #a6a3b4;
87
- $pds-color-input-toggle-background-off: #858299;
88
- $pds-color-input-toggle-background-on: $pds-color-interactive-focus;
89
- $pds-color-input-toggle-border-off: #c7c5d0;
90
- $pds-color-input-toggle-border-on: $pds-color-interactive-focus;
87
+ $pds-color-input-toggle-switch-off: #504e62;
88
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
91
89
  $pds-color-interactive-focus: #36a3ff;
92
90
  $pds-color-link-active: #6f54e8;
93
91
  $pds-color-link-default: #36a3ff;
@@ -110,11 +108,6 @@ $pds-color-panel-sunken-background: #121219;
110
108
  $pds-color-panel-sunken-border: #121219;
111
109
  $pds-color-text-default: #ffffff;
112
110
  $pds-color-text-default-secondary: #a6a3b4;
113
- $pds-color-text-headings: $pds-color-text-default;
114
- $pds-color-text-lead: $pds-color-text-default-secondary;
115
- $pds-color-text-overline: $pds-color-text-default-secondary;
116
- $pds-color-text-paragraph: $pds-color-text-default;
117
- $pds-color-text-quote: $pds-color-text-default-secondary;
118
111
  $pds-color-tile-background-active: #858299;
119
112
  $pds-color-tile-background-hover: #504e62;
120
113
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -84,10 +84,8 @@ $pds-color-input-foreground-critical: #d61f1f;
84
84
  $pds-color-input-foreground-default: #23232d;
85
85
  $pds-color-input-foreground-success: #1f845a;
86
86
  $pds-color-input-placeholder-text: #71717c;
87
- $pds-color-input-toggle-background-off: #f8f8f8;
88
- $pds-color-input-toggle-background-on: $pds-color-interactive-focus;
89
- $pds-color-input-toggle-border-off: #71717c;
90
- $pds-color-input-toggle-border-on: $pds-color-interactive-focus;
87
+ $pds-color-input-toggle-switch-off: #94949e;
88
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
91
89
  $pds-color-interactive-focus: #0f62fe;
92
90
  $pds-color-link-active: #6f54e8;
93
91
  $pds-color-link-default: #0f62fe;
@@ -110,11 +108,6 @@ $pds-color-panel-sunken-background: #f8f8f8;
110
108
  $pds-color-panel-sunken-border: #f8f8f8;
111
109
  $pds-color-text-default: #23232d;
112
110
  $pds-color-text-default-secondary: #71717c;
113
- $pds-color-text-headings: $pds-color-text-default;
114
- $pds-color-text-lead: $pds-color-text-default-secondary;
115
- $pds-color-text-overline: $pds-color-text-default-secondary;
116
- $pds-color-text-paragraph: #23232d;
117
- $pds-color-text-quote: $pds-color-text-default-secondary;
118
111
  $pds-color-tile-background-active: #cfcfd3;
119
112
  $pds-color-tile-background-hover: #f8f8f8;
120
113
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
package/build/scss/_pds-design-tokens.scss CHANGED
@@ -12,6 +12,7 @@ $pds-animation-transition-default-delay: 0s;
12
12
  $pds-animation-transition-default-duration: 200ms;
13
13
  $pds-animation-transition-default-timing-function: ease-in-out;
14
14
  $pds-animation-transition-dropdown-duration: 300ms;
15
+ $pds-border-radius-container: 0.375rem;
15
16
  $pds-border-radius-default: 0.1875rem;
16
17
  $pds-border-width-default: 1px;
17
18
  $pds-typography-font-default: 'Poppins', sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.26",
3
+ "version": "1.0.0-dev.28",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [