@pantheon-systems/pds-design-tokens 1.0.0-dev.24 → 1.0.0-dev.25

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 (8) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +4 -0
  2. package/build/css/pds-design-tokens-light-mode.css +5 -1
  3. package/build/figma/pds-design-tokens-figma.json +230 -2
  4. package/build/json/pds-design-tokens-dark-mode.json +114 -0
  5. package/build/json/pds-design-tokens-light-mode.json +116 -2
  6. package/build/scss/_pds-design-tokens-dark-mode.scss +4 -0
  7. package/build/scss/_pds-design-tokens-light-mode.scss +5 -1
  8. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -86,6 +86,10 @@
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: #504e62;
90
+ --pds-color-input-toggle-background-on: var(--pds-color-interactive-focus);
91
+ --pds-color-input-toggle-border-off: #a6a3b4;
92
+ --pds-color-input-toggle-border-on: var(--pds-color-interactive-focus);
89
93
  --pds-color-interactive-focus: #36a3ff;
90
94
  --pds-color-link-active: #6f54e8;
91
95
  --pds-color-link-default: #36a3ff;
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --pds-color-input-background-default: #ffffff;
78
78
  --pds-color-input-background-hover: #f0ecff;
79
79
  --pds-color-input-border-critical: #d61f1f;
80
- --pds-color-input-border-default: #94949e;
80
+ --pds-color-input-border-default: #cfcfd3;
81
81
  --pds-color-input-border-hover: #5f41e5;
82
82
  --pds-color-input-border-success: #1f845a;
83
83
  --pds-color-input-checked-background: var(--pds-color-interactive-focus);
@@ -86,6 +86,10 @@
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: #f8f8f8;
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
93
  --pds-color-interactive-focus: #0f62fe;
90
94
  --pds-color-link-active: #6f54e8;
91
95
  --pds-color-link-default: #0f62fe;
package/build/figma/pds-design-tokens-figma.json CHANGED
@@ -3735,6 +3735,120 @@
3735
3735
  ]
3736
3736
  }
3737
3737
  },
3738
+ "toggle": {
3739
+ "background": {
3740
+ "off": {
3741
+ "value": "#504e62",
3742
+ "public": true,
3743
+ "isReferenceToInternal": true,
3744
+ "filePath": "tokens/color/alias/form.dark.json",
3745
+ "isSource": true,
3746
+ "original": {
3747
+ "value": "{color.dark-mode.neutral.400.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
+ ]
3767
+ },
3768
+ "on": {
3769
+ "value": "#36a3ff",
3770
+ "public": true,
3771
+ "filePath": "tokens/color/alias/form.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
+ }
3794
+ },
3795
+ "border": {
3796
+ "off": {
3797
+ "value": "#a6a3b4",
3798
+ "public": true,
3799
+ "isReferenceToInternal": true,
3800
+ "filePath": "tokens/color/alias/form.dark.json",
3801
+ "isSource": true,
3802
+ "original": {
3803
+ "value": "{color.dark-mode.neutral.200.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
+ ]
3823
+ },
3824
+ "on": {
3825
+ "value": "#36a3ff",
3826
+ "public": true,
3827
+ "filePath": "tokens/color/alias/form.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
+ }
3850
+ }
3851
+ },
3738
3852
  "action": {
3739
3853
  "background": {
3740
3854
  "hover": {
@@ -7761,13 +7875,13 @@
7761
7875
  },
7762
7876
  "border": {
7763
7877
  "default": {
7764
- "value": "#94949e",
7878
+ "value": "#cfcfd3",
7765
7879
  "public": true,
7766
7880
  "isReferenceToInternal": true,
7767
7881
  "filePath": "tokens/color/alias/form.light.json",
7768
7882
  "isSource": true,
7769
7883
  "original": {
7770
- "value": "{color.light-mode.neutral.300.value}",
7884
+ "value": "{color.light-mode.neutral.200.value}",
7771
7885
  "public": true,
7772
7886
  "isReferenceToInternal": true
7773
7887
  },
@@ -8031,6 +8145,120 @@
8031
8145
  ]
8032
8146
  }
8033
8147
  },
8148
+ "toggle": {
8149
+ "background": {
8150
+ "off": {
8151
+ "value": "#f8f8f8",
8152
+ "public": true,
8153
+ "isReferenceToInternal": true,
8154
+ "filePath": "tokens/color/alias/form.light.json",
8155
+ "isSource": true,
8156
+ "original": {
8157
+ "value": "{color.light-mode.neutral.100.value}",
8158
+ "public": true,
8159
+ "isReferenceToInternal": true
8160
+ },
8161
+ "name": "color-light-mode-input-toggle-background-off",
8162
+ "attributes": {
8163
+ "category": "color",
8164
+ "type": "light-mode",
8165
+ "item": "input",
8166
+ "subitem": "toggle",
8167
+ "state": "background"
8168
+ },
8169
+ "path": [
8170
+ "color",
8171
+ "light-mode",
8172
+ "input",
8173
+ "toggle",
8174
+ "background",
8175
+ "off"
8176
+ ]
8177
+ },
8178
+ "on": {
8179
+ "value": "#0f62fe",
8180
+ "public": true,
8181
+ "filePath": "tokens/color/alias/form.light.json",
8182
+ "isSource": true,
8183
+ "original": {
8184
+ "value": "{color.light-mode.interactive.focus.value}",
8185
+ "public": true
8186
+ },
8187
+ "name": "color-light-mode-input-toggle-background-on",
8188
+ "attributes": {
8189
+ "category": "color",
8190
+ "type": "light-mode",
8191
+ "item": "input",
8192
+ "subitem": "toggle",
8193
+ "state": "background"
8194
+ },
8195
+ "path": [
8196
+ "color",
8197
+ "light-mode",
8198
+ "input",
8199
+ "toggle",
8200
+ "background",
8201
+ "on"
8202
+ ]
8203
+ }
8204
+ },
8205
+ "border": {
8206
+ "off": {
8207
+ "value": "#71717c",
8208
+ "public": true,
8209
+ "isReferenceToInternal": true,
8210
+ "filePath": "tokens/color/alias/form.light.json",
8211
+ "isSource": true,
8212
+ "original": {
8213
+ "value": "{color.light-mode.neutral.400.value}",
8214
+ "public": true,
8215
+ "isReferenceToInternal": true
8216
+ },
8217
+ "name": "color-light-mode-input-toggle-border-off",
8218
+ "attributes": {
8219
+ "category": "color",
8220
+ "type": "light-mode",
8221
+ "item": "input",
8222
+ "subitem": "toggle",
8223
+ "state": "border"
8224
+ },
8225
+ "path": [
8226
+ "color",
8227
+ "light-mode",
8228
+ "input",
8229
+ "toggle",
8230
+ "border",
8231
+ "off"
8232
+ ]
8233
+ },
8234
+ "on": {
8235
+ "value": "#0f62fe",
8236
+ "public": true,
8237
+ "filePath": "tokens/color/alias/form.light.json",
8238
+ "isSource": true,
8239
+ "original": {
8240
+ "value": "{color.light-mode.interactive.focus.value}",
8241
+ "public": true
8242
+ },
8243
+ "name": "color-light-mode-input-toggle-border-on",
8244
+ "attributes": {
8245
+ "category": "color",
8246
+ "type": "light-mode",
8247
+ "item": "input",
8248
+ "subitem": "toggle",
8249
+ "state": "border"
8250
+ },
8251
+ "path": [
8252
+ "color",
8253
+ "light-mode",
8254
+ "input",
8255
+ "toggle",
8256
+ "border",
8257
+ "on"
8258
+ ]
8259
+ }
8260
+ }
8261
+ },
8034
8262
  "action": {
8035
8263
  "background": {
8036
8264
  "hover": {
package/build/json/pds-design-tokens-dark-mode.json CHANGED
@@ -1936,6 +1936,120 @@
1936
1936
  ]
1937
1937
  }
1938
1938
  },
1939
+ "toggle": {
1940
+ "background": {
1941
+ "off": {
1942
+ "value": "#504e62",
1943
+ "public": true,
1944
+ "isReferenceToInternal": true,
1945
+ "filePath": "tokens/color/alias/form.dark.json",
1946
+ "isSource": true,
1947
+ "original": {
1948
+ "value": "{color.dark-mode.neutral.400.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
+ ]
1968
+ },
1969
+ "on": {
1970
+ "value": "#36a3ff",
1971
+ "public": true,
1972
+ "filePath": "tokens/color/alias/form.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
+ }
1995
+ },
1996
+ "border": {
1997
+ "off": {
1998
+ "value": "#a6a3b4",
1999
+ "public": true,
2000
+ "isReferenceToInternal": true,
2001
+ "filePath": "tokens/color/alias/form.dark.json",
2002
+ "isSource": true,
2003
+ "original": {
2004
+ "value": "{color.dark-mode.neutral.200.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
+ ]
2024
+ },
2025
+ "on": {
2026
+ "value": "#36a3ff",
2027
+ "public": true,
2028
+ "filePath": "tokens/color/alias/form.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
+ }
2051
+ }
2052
+ },
1939
2053
  "action": {
1940
2054
  "background": {
1941
2055
  "hover": {
package/build/json/pds-design-tokens-light-mode.json CHANGED
@@ -1666,13 +1666,13 @@
1666
1666
  },
1667
1667
  "border": {
1668
1668
  "default": {
1669
- "value": "#94949e",
1669
+ "value": "#cfcfd3",
1670
1670
  "public": true,
1671
1671
  "isReferenceToInternal": true,
1672
1672
  "filePath": "tokens/color/alias/form.light.json",
1673
1673
  "isSource": true,
1674
1674
  "original": {
1675
- "value": "{color.light-mode.neutral.300.value}",
1675
+ "value": "{color.light-mode.neutral.200.value}",
1676
1676
  "public": true,
1677
1677
  "isReferenceToInternal": true
1678
1678
  },
@@ -1936,6 +1936,120 @@
1936
1936
  ]
1937
1937
  }
1938
1938
  },
1939
+ "toggle": {
1940
+ "background": {
1941
+ "off": {
1942
+ "value": "#f8f8f8",
1943
+ "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
+ ]
1968
+ },
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
+ }
1995
+ },
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
+ ]
2024
+ },
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
+ }
2051
+ }
2052
+ },
1939
2053
  "action": {
1940
2054
  "background": {
1941
2055
  "hover": {
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -84,6 +84,10 @@ $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: #504e62;
88
+ $pds-color-input-toggle-background-on: $pds-color-interactive-focus;
89
+ $pds-color-input-toggle-border-off: #a6a3b4;
90
+ $pds-color-input-toggle-border-on: $pds-color-interactive-focus;
87
91
  $pds-color-interactive-focus: #36a3ff;
88
92
  $pds-color-link-active: #6f54e8;
89
93
  $pds-color-link-default: #36a3ff;
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -75,7 +75,7 @@ $pds-color-input-background-critical: #ffebeb;
75
75
  $pds-color-input-background-default: #ffffff;
76
76
  $pds-color-input-background-hover: #f0ecff;
77
77
  $pds-color-input-border-critical: #d61f1f;
78
- $pds-color-input-border-default: #94949e;
78
+ $pds-color-input-border-default: #cfcfd3;
79
79
  $pds-color-input-border-hover: #5f41e5;
80
80
  $pds-color-input-border-success: #1f845a;
81
81
  $pds-color-input-checked-background: $pds-color-interactive-focus;
@@ -84,6 +84,10 @@ $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
91
  $pds-color-interactive-focus: #0f62fe;
88
92
  $pds-color-link-active: #6f54e8;
89
93
  $pds-color-link-default: #0f62fe;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.24",
3
+ "version": "1.0.0-dev.25",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [