@pantheon-systems/pds-design-tokens 1.0.0-dev.27 → 1.0.0-dev.29

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 +3 -4
  2. package/build/css/pds-design-tokens-light-mode.css +3 -4
  3. package/build/css/pds-design-tokens.css +1 -0
  4. package/build/figma/pds-design-tokens-figma.json +173 -214
  5. package/build/json/pds-design-tokens-dark-mode.json +74 -107
  6. package/build/json/pds-design-tokens-light-mode.json +74 -107
  7. package/build/json/pds-design-tokens.json +23 -0
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +3 -4
  9. package/build/scss/_pds-design-tokens-light-mode.scss +3 -4
  10. package/build/scss/_pds-design-tokens.scss +1 -0
  11. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -86,10 +86,9 @@
86
86
  --pds-color-input-foreground-default: #ffffff;
87
87
  --pds-color-input-foreground-success: #3cb683;
88
88
  --pds-color-input-placeholder-text: #a6a3b4;
89
- --pds-color-input-toggle-background-off: #858299;
90
- --pds-color-input-toggle-background-on: var(--pds-color-interactive-focus);
91
- --pds-color-input-toggle-border-off: #c7c5d0;
92
- --pds-color-input-toggle-border-on: var(--pds-color-interactive-focus);
89
+ --pds-color-input-toggle-switch-icon: #ffffff;
90
+ --pds-color-input-toggle-switch-off: #504e62;
91
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
93
92
  --pds-color-interactive-focus: #36a3ff;
94
93
  --pds-color-link-active: #6f54e8;
95
94
  --pds-color-link-default: #36a3ff;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -86,10 +86,9 @@
86
86
  --pds-color-input-foreground-default: #23232d;
87
87
  --pds-color-input-foreground-success: #1f845a;
88
88
  --pds-color-input-placeholder-text: #71717c;
89
- --pds-color-input-toggle-background-off: #cfcfd3;
90
- --pds-color-input-toggle-background-on: var(--pds-color-interactive-focus);
91
- --pds-color-input-toggle-border-off: #71717c;
92
- --pds-color-input-toggle-border-on: var(--pds-color-interactive-focus);
89
+ --pds-color-input-toggle-switch-icon: #ffffff;
90
+ --pds-color-input-toggle-switch-off: #94949e;
91
+ --pds-color-input-toggle-switch-on: var(--pds-color-interactive-focus);
93
92
  --pds-color-interactive-focus: #0f62fe;
94
93
  --pds-color-link-active: #6f54e8;
95
94
  --pds-color-link-default: #0f62fe;
package/build/css/pds-design-tokens.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --pds-animation-transition-default-duration: 200ms;
15
15
  --pds-animation-transition-default-timing-function: ease-in-out;
16
16
  --pds-animation-transition-dropdown-duration: 300ms;
17
+ --pds-border-radius-container: 0.375rem;
17
18
  --pds-border-radius-default: 0.1875rem;
18
19
  --pds-border-width-default: 1px;
19
20
  --pds-typography-font-default: 'Poppins', sans-serif;
package/build/figma/pds-design-tokens-figma.json CHANGED
@@ -203,6 +203,31 @@
203
203
  "radius",
204
204
  "default"
205
205
  ]
206
+ },
207
+ "container": {
208
+ "value": 0.375,
209
+ "defaultUnit": "rem",
210
+ "public": true,
211
+ "filePath": "tokens/border/alias.json",
212
+ "isSource": true,
213
+ "original": {
214
+ "value": 0.375,
215
+ "defaultUnit": "rem",
216
+ "public": true,
217
+ "filePath": "build/json/pds-design-tokens.json",
218
+ "isSource": false
219
+ },
220
+ "name": "border-radius-container",
221
+ "attributes": {
222
+ "category": "border",
223
+ "type": "radius",
224
+ "item": "container"
225
+ },
226
+ "path": [
227
+ "border",
228
+ "radius",
229
+ "container"
230
+ ]
206
231
  }
207
232
  },
208
233
  "width": {
@@ -3735,118 +3760,85 @@
3735
3760
  ]
3736
3761
  }
3737
3762
  },
3738
- "toggle": {
3739
- "background": {
3740
- "off": {
3741
- "value": "#858299",
3763
+ "toggle-switch": {
3764
+ "off": {
3765
+ "value": "#504e62",
3766
+ "public": true,
3767
+ "isReferenceToInternal": true,
3768
+ "filePath": "tokens/color/alias/input.dark.json",
3769
+ "isSource": true,
3770
+ "original": {
3771
+ "value": "{color.dark-mode.neutral.400.value}",
3742
3772
  "public": true,
3743
- "isReferenceToInternal": true,
3744
- "filePath": "tokens/color/alias/input.dark.json",
3745
- "isSource": true,
3746
- "original": {
3747
- "value": "{color.dark-mode.neutral.300.value}",
3748
- "public": true,
3749
- "isReferenceToInternal": true
3750
- },
3751
- "name": "color-dark-mode-input-toggle-background-off",
3752
- "attributes": {
3753
- "category": "color",
3754
- "type": "dark-mode",
3755
- "item": "input",
3756
- "subitem": "toggle",
3757
- "state": "background"
3758
- },
3759
- "path": [
3760
- "color",
3761
- "dark-mode",
3762
- "input",
3763
- "toggle",
3764
- "background",
3765
- "off"
3766
- ]
3773
+ "isReferenceToInternal": true
3767
3774
  },
3768
- "on": {
3769
- "value": "#36a3ff",
3770
- "public": true,
3771
- "filePath": "tokens/color/alias/input.dark.json",
3772
- "isSource": true,
3773
- "original": {
3774
- "value": "{color.dark-mode.interactive.focus.value}",
3775
- "public": true
3776
- },
3777
- "name": "color-dark-mode-input-toggle-background-on",
3778
- "attributes": {
3779
- "category": "color",
3780
- "type": "dark-mode",
3781
- "item": "input",
3782
- "subitem": "toggle",
3783
- "state": "background"
3784
- },
3785
- "path": [
3786
- "color",
3787
- "dark-mode",
3788
- "input",
3789
- "toggle",
3790
- "background",
3791
- "on"
3792
- ]
3793
- }
3775
+ "name": "color-dark-mode-input-toggle-switch-off",
3776
+ "attributes": {
3777
+ "category": "color",
3778
+ "type": "dark-mode",
3779
+ "item": "input",
3780
+ "subitem": "toggle-switch",
3781
+ "state": "off"
3782
+ },
3783
+ "path": [
3784
+ "color",
3785
+ "dark-mode",
3786
+ "input",
3787
+ "toggle-switch",
3788
+ "off"
3789
+ ]
3794
3790
  },
3795
- "border": {
3796
- "off": {
3797
- "value": "#c7c5d0",
3798
- "public": true,
3799
- "isReferenceToInternal": true,
3800
- "filePath": "tokens/color/alias/input.dark.json",
3801
- "isSource": true,
3802
- "original": {
3803
- "value": "{color.dark-mode.neutral.100.value}",
3804
- "public": true,
3805
- "isReferenceToInternal": true
3806
- },
3807
- "name": "color-dark-mode-input-toggle-border-off",
3808
- "attributes": {
3809
- "category": "color",
3810
- "type": "dark-mode",
3811
- "item": "input",
3812
- "subitem": "toggle",
3813
- "state": "border"
3814
- },
3815
- "path": [
3816
- "color",
3817
- "dark-mode",
3818
- "input",
3819
- "toggle",
3820
- "border",
3821
- "off"
3822
- ]
3791
+ "on": {
3792
+ "value": "#36a3ff",
3793
+ "public": true,
3794
+ "filePath": "tokens/color/alias/input.dark.json",
3795
+ "isSource": true,
3796
+ "original": {
3797
+ "value": "{color.dark-mode.interactive.focus.value}",
3798
+ "public": true
3799
+ },
3800
+ "name": "color-dark-mode-input-toggle-switch-on",
3801
+ "attributes": {
3802
+ "category": "color",
3803
+ "type": "dark-mode",
3804
+ "item": "input",
3805
+ "subitem": "toggle-switch",
3806
+ "state": "on"
3823
3807
  },
3824
- "on": {
3825
- "value": "#36a3ff",
3808
+ "path": [
3809
+ "color",
3810
+ "dark-mode",
3811
+ "input",
3812
+ "toggle-switch",
3813
+ "on"
3814
+ ]
3815
+ },
3816
+ "icon": {
3817
+ "value": "#ffffff",
3818
+ "public": true,
3819
+ "isReferenceToInternal": true,
3820
+ "filePath": "tokens/color/alias/input.dark.json",
3821
+ "isSource": true,
3822
+ "original": {
3823
+ "value": "{color.dark-mode.neutral.000.value}",
3826
3824
  "public": true,
3827
- "filePath": "tokens/color/alias/input.dark.json",
3828
- "isSource": true,
3829
- "original": {
3830
- "value": "{color.dark-mode.interactive.focus.value}",
3831
- "public": true
3832
- },
3833
- "name": "color-dark-mode-input-toggle-border-on",
3834
- "attributes": {
3835
- "category": "color",
3836
- "type": "dark-mode",
3837
- "item": "input",
3838
- "subitem": "toggle",
3839
- "state": "border"
3840
- },
3841
- "path": [
3842
- "color",
3843
- "dark-mode",
3844
- "input",
3845
- "toggle",
3846
- "border",
3847
- "on"
3848
- ]
3849
- }
3825
+ "isReferenceToInternal": true
3826
+ },
3827
+ "name": "color-dark-mode-input-toggle-switch-icon",
3828
+ "attributes": {
3829
+ "category": "color",
3830
+ "type": "dark-mode",
3831
+ "item": "input",
3832
+ "subitem": "toggle-switch",
3833
+ "state": "icon"
3834
+ },
3835
+ "path": [
3836
+ "color",
3837
+ "dark-mode",
3838
+ "input",
3839
+ "toggle-switch",
3840
+ "icon"
3841
+ ]
3850
3842
  }
3851
3843
  },
3852
3844
  "action": {
@@ -8030,118 +8022,85 @@
8030
8022
  ]
8031
8023
  }
8032
8024
  },
8033
- "toggle": {
8034
- "background": {
8035
- "off": {
8036
- "value": "#cfcfd3",
8025
+ "toggle-switch": {
8026
+ "off": {
8027
+ "value": "#94949e",
8028
+ "public": true,
8029
+ "isReferenceToInternal": true,
8030
+ "filePath": "tokens/color/alias/input.light.json",
8031
+ "isSource": true,
8032
+ "original": {
8033
+ "value": "{color.light-mode.neutral.300.value}",
8037
8034
  "public": true,
8038
- "isReferenceToInternal": true,
8039
- "filePath": "tokens/color/alias/input.light.json",
8040
- "isSource": true,
8041
- "original": {
8042
- "value": "{color.light-mode.neutral.200.value}",
8043
- "public": true,
8044
- "isReferenceToInternal": true
8045
- },
8046
- "name": "color-light-mode-input-toggle-background-off",
8047
- "attributes": {
8048
- "category": "color",
8049
- "type": "light-mode",
8050
- "item": "input",
8051
- "subitem": "toggle",
8052
- "state": "background"
8053
- },
8054
- "path": [
8055
- "color",
8056
- "light-mode",
8057
- "input",
8058
- "toggle",
8059
- "background",
8060
- "off"
8061
- ]
8035
+ "isReferenceToInternal": true
8062
8036
  },
8063
- "on": {
8064
- "value": "#0f62fe",
8065
- "public": true,
8066
- "filePath": "tokens/color/alias/input.light.json",
8067
- "isSource": true,
8068
- "original": {
8069
- "value": "{color.light-mode.interactive.focus.value}",
8070
- "public": true
8071
- },
8072
- "name": "color-light-mode-input-toggle-background-on",
8073
- "attributes": {
8074
- "category": "color",
8075
- "type": "light-mode",
8076
- "item": "input",
8077
- "subitem": "toggle",
8078
- "state": "background"
8079
- },
8080
- "path": [
8081
- "color",
8082
- "light-mode",
8083
- "input",
8084
- "toggle",
8085
- "background",
8086
- "on"
8087
- ]
8088
- }
8037
+ "name": "color-light-mode-input-toggle-switch-off",
8038
+ "attributes": {
8039
+ "category": "color",
8040
+ "type": "light-mode",
8041
+ "item": "input",
8042
+ "subitem": "toggle-switch",
8043
+ "state": "off"
8044
+ },
8045
+ "path": [
8046
+ "color",
8047
+ "light-mode",
8048
+ "input",
8049
+ "toggle-switch",
8050
+ "off"
8051
+ ]
8089
8052
  },
8090
- "border": {
8091
- "off": {
8092
- "value": "#71717c",
8093
- "public": true,
8094
- "isReferenceToInternal": true,
8095
- "filePath": "tokens/color/alias/input.light.json",
8096
- "isSource": true,
8097
- "original": {
8098
- "value": "{color.light-mode.neutral.400.value}",
8099
- "public": true,
8100
- "isReferenceToInternal": true
8101
- },
8102
- "name": "color-light-mode-input-toggle-border-off",
8103
- "attributes": {
8104
- "category": "color",
8105
- "type": "light-mode",
8106
- "item": "input",
8107
- "subitem": "toggle",
8108
- "state": "border"
8109
- },
8110
- "path": [
8111
- "color",
8112
- "light-mode",
8113
- "input",
8114
- "toggle",
8115
- "border",
8116
- "off"
8117
- ]
8053
+ "on": {
8054
+ "value": "#0f62fe",
8055
+ "public": true,
8056
+ "filePath": "tokens/color/alias/input.light.json",
8057
+ "isSource": true,
8058
+ "original": {
8059
+ "value": "{color.light-mode.interactive.focus.value}",
8060
+ "public": true
8061
+ },
8062
+ "name": "color-light-mode-input-toggle-switch-on",
8063
+ "attributes": {
8064
+ "category": "color",
8065
+ "type": "light-mode",
8066
+ "item": "input",
8067
+ "subitem": "toggle-switch",
8068
+ "state": "on"
8118
8069
  },
8119
- "on": {
8120
- "value": "#0f62fe",
8070
+ "path": [
8071
+ "color",
8072
+ "light-mode",
8073
+ "input",
8074
+ "toggle-switch",
8075
+ "on"
8076
+ ]
8077
+ },
8078
+ "icon": {
8079
+ "value": "#ffffff",
8080
+ "public": true,
8081
+ "isReferenceToInternal": true,
8082
+ "filePath": "tokens/color/alias/input.light.json",
8083
+ "isSource": true,
8084
+ "original": {
8085
+ "value": "{color.light-mode.neutral.000.value}",
8121
8086
  "public": true,
8122
- "filePath": "tokens/color/alias/input.light.json",
8123
- "isSource": true,
8124
- "original": {
8125
- "value": "{color.light-mode.interactive.focus.value}",
8126
- "public": true
8127
- },
8128
- "name": "color-light-mode-input-toggle-border-on",
8129
- "attributes": {
8130
- "category": "color",
8131
- "type": "light-mode",
8132
- "item": "input",
8133
- "subitem": "toggle",
8134
- "state": "border"
8135
- },
8136
- "path": [
8137
- "color",
8138
- "light-mode",
8139
- "input",
8140
- "toggle",
8141
- "border",
8142
- "on"
8143
- ]
8144
- }
8087
+ "isReferenceToInternal": true
8088
+ },
8089
+ "name": "color-light-mode-input-toggle-switch-icon",
8090
+ "attributes": {
8091
+ "category": "color",
8092
+ "type": "light-mode",
8093
+ "item": "input",
8094
+ "subitem": "toggle-switch",
8095
+ "state": "icon"
8096
+ },
8097
+ "path": [
8098
+ "color",
8099
+ "light-mode",
8100
+ "input",
8101
+ "toggle-switch",
8102
+ "icon"
8103
+ ]
8145
8104
  }
8146
8105
  },
8147
8106
  "action": {
package/build/json/pds-design-tokens-dark-mode.json CHANGED
@@ -1936,118 +1936,85 @@
1936
1936
  ]
1937
1937
  }
1938
1938
  },
1939
- "toggle": {
1940
- "background": {
1941
- "off": {
1942
- "value": "#858299",
1939
+ "toggle-switch": {
1940
+ "off": {
1941
+ "value": "#504e62",
1942
+ "public": true,
1943
+ "isReferenceToInternal": true,
1944
+ "filePath": "tokens/color/alias/input.dark.json",
1945
+ "isSource": true,
1946
+ "original": {
1947
+ "value": "{color.dark-mode.neutral.400.value}",
1943
1948
  "public": true,
1944
- "isReferenceToInternal": true,
1945
- "filePath": "tokens/color/alias/input.dark.json",
1946
- "isSource": true,
1947
- "original": {
1948
- "value": "{color.dark-mode.neutral.300.value}",
1949
- "public": true,
1950
- "isReferenceToInternal": true
1951
- },
1952
- "name": "color-dark-mode-input-toggle-background-off",
1953
- "attributes": {
1954
- "category": "color",
1955
- "type": "dark-mode",
1956
- "item": "input",
1957
- "subitem": "toggle",
1958
- "state": "background"
1959
- },
1960
- "path": [
1961
- "color",
1962
- "dark-mode",
1963
- "input",
1964
- "toggle",
1965
- "background",
1966
- "off"
1967
- ]
1949
+ "isReferenceToInternal": true
1968
1950
  },
1969
- "on": {
1970
- "value": "#36a3ff",
1971
- "public": true,
1972
- "filePath": "tokens/color/alias/input.dark.json",
1973
- "isSource": true,
1974
- "original": {
1975
- "value": "{color.dark-mode.interactive.focus.value}",
1976
- "public": true
1977
- },
1978
- "name": "color-dark-mode-input-toggle-background-on",
1979
- "attributes": {
1980
- "category": "color",
1981
- "type": "dark-mode",
1982
- "item": "input",
1983
- "subitem": "toggle",
1984
- "state": "background"
1985
- },
1986
- "path": [
1987
- "color",
1988
- "dark-mode",
1989
- "input",
1990
- "toggle",
1991
- "background",
1992
- "on"
1993
- ]
1994
- }
1951
+ "name": "color-dark-mode-input-toggle-switch-off",
1952
+ "attributes": {
1953
+ "category": "color",
1954
+ "type": "dark-mode",
1955
+ "item": "input",
1956
+ "subitem": "toggle-switch",
1957
+ "state": "off"
1958
+ },
1959
+ "path": [
1960
+ "color",
1961
+ "dark-mode",
1962
+ "input",
1963
+ "toggle-switch",
1964
+ "off"
1965
+ ]
1995
1966
  },
1996
- "border": {
1997
- "off": {
1998
- "value": "#c7c5d0",
1999
- "public": true,
2000
- "isReferenceToInternal": true,
2001
- "filePath": "tokens/color/alias/input.dark.json",
2002
- "isSource": true,
2003
- "original": {
2004
- "value": "{color.dark-mode.neutral.100.value}",
2005
- "public": true,
2006
- "isReferenceToInternal": true
2007
- },
2008
- "name": "color-dark-mode-input-toggle-border-off",
2009
- "attributes": {
2010
- "category": "color",
2011
- "type": "dark-mode",
2012
- "item": "input",
2013
- "subitem": "toggle",
2014
- "state": "border"
2015
- },
2016
- "path": [
2017
- "color",
2018
- "dark-mode",
2019
- "input",
2020
- "toggle",
2021
- "border",
2022
- "off"
2023
- ]
1967
+ "on": {
1968
+ "value": "#36a3ff",
1969
+ "public": true,
1970
+ "filePath": "tokens/color/alias/input.dark.json",
1971
+ "isSource": true,
1972
+ "original": {
1973
+ "value": "{color.dark-mode.interactive.focus.value}",
1974
+ "public": true
2024
1975
  },
2025
- "on": {
2026
- "value": "#36a3ff",
1976
+ "name": "color-dark-mode-input-toggle-switch-on",
1977
+ "attributes": {
1978
+ "category": "color",
1979
+ "type": "dark-mode",
1980
+ "item": "input",
1981
+ "subitem": "toggle-switch",
1982
+ "state": "on"
1983
+ },
1984
+ "path": [
1985
+ "color",
1986
+ "dark-mode",
1987
+ "input",
1988
+ "toggle-switch",
1989
+ "on"
1990
+ ]
1991
+ },
1992
+ "icon": {
1993
+ "value": "#ffffff",
1994
+ "public": true,
1995
+ "isReferenceToInternal": true,
1996
+ "filePath": "tokens/color/alias/input.dark.json",
1997
+ "isSource": true,
1998
+ "original": {
1999
+ "value": "{color.dark-mode.neutral.000.value}",
2027
2000
  "public": true,
2028
- "filePath": "tokens/color/alias/input.dark.json",
2029
- "isSource": true,
2030
- "original": {
2031
- "value": "{color.dark-mode.interactive.focus.value}",
2032
- "public": true
2033
- },
2034
- "name": "color-dark-mode-input-toggle-border-on",
2035
- "attributes": {
2036
- "category": "color",
2037
- "type": "dark-mode",
2038
- "item": "input",
2039
- "subitem": "toggle",
2040
- "state": "border"
2041
- },
2042
- "path": [
2043
- "color",
2044
- "dark-mode",
2045
- "input",
2046
- "toggle",
2047
- "border",
2048
- "on"
2049
- ]
2050
- }
2001
+ "isReferenceToInternal": true
2002
+ },
2003
+ "name": "color-dark-mode-input-toggle-switch-icon",
2004
+ "attributes": {
2005
+ "category": "color",
2006
+ "type": "dark-mode",
2007
+ "item": "input",
2008
+ "subitem": "toggle-switch",
2009
+ "state": "icon"
2010
+ },
2011
+ "path": [
2012
+ "color",
2013
+ "dark-mode",
2014
+ "input",
2015
+ "toggle-switch",
2016
+ "icon"
2017
+ ]
2051
2018
  }
2052
2019
  },
2053
2020
  "action": {
package/build/json/pds-design-tokens-light-mode.json CHANGED
@@ -1936,118 +1936,85 @@
1936
1936
  ]
1937
1937
  }
1938
1938
  },
1939
- "toggle": {
1940
- "background": {
1941
- "off": {
1942
- "value": "#cfcfd3",
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/input.light.json",
1946
- "isSource": true,
1947
- "original": {
1948
- "value": "{color.light-mode.neutral.200.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/input.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/input.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",
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
+ ]
1991
+ },
1992
+ "icon": {
1993
+ "value": "#ffffff",
1994
+ "public": true,
1995
+ "isReferenceToInternal": true,
1996
+ "filePath": "tokens/color/alias/input.light.json",
1997
+ "isSource": true,
1998
+ "original": {
1999
+ "value": "{color.light-mode.neutral.000.value}",
2027
2000
  "public": true,
2028
- "filePath": "tokens/color/alias/input.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
- }
2001
+ "isReferenceToInternal": true
2002
+ },
2003
+ "name": "color-light-mode-input-toggle-switch-icon",
2004
+ "attributes": {
2005
+ "category": "color",
2006
+ "type": "light-mode",
2007
+ "item": "input",
2008
+ "subitem": "toggle-switch",
2009
+ "state": "icon"
2010
+ },
2011
+ "path": [
2012
+ "color",
2013
+ "light-mode",
2014
+ "input",
2015
+ "toggle-switch",
2016
+ "icon"
2017
+ ]
2051
2018
  }
2052
2019
  },
2053
2020
  "action": {
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,9 @@ $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-icon: #ffffff;
88
+ $pds-color-input-toggle-switch-off: #504e62;
89
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
91
90
  $pds-color-interactive-focus: #36a3ff;
92
91
  $pds-color-link-active: #6f54e8;
93
92
  $pds-color-link-default: #36a3ff;
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -84,10 +84,9 @@ $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: #cfcfd3;
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-icon: #ffffff;
88
+ $pds-color-input-toggle-switch-off: #94949e;
89
+ $pds-color-input-toggle-switch-on: $pds-color-interactive-focus;
91
90
  $pds-color-interactive-focus: #0f62fe;
92
91
  $pds-color-link-active: #6f54e8;
93
92
  $pds-color-link-default: #0f62fe;
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.27",
3
+ "version": "1.0.0-dev.29",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [