@geoffcox/sterling-svelte 0.0.25 → 0.0.27

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 (86) hide show
  1. package/Button.svelte +79 -24
  2. package/Button.svelte.d.ts +1 -0
  3. package/Checkbox.svelte +44 -19
  4. package/Checkbox.svelte.d.ts +1 -0
  5. package/ColorPicker.constants.d.ts +1 -0
  6. package/ColorPicker.constants.js +1 -0
  7. package/ColorPicker.svelte +226 -0
  8. package/ColorPicker.svelte.d.ts +22 -0
  9. package/ColorPicker.types.d.ts +4 -0
  10. package/ColorPicker.types.js +1 -0
  11. package/Dialog.svelte +10 -10
  12. package/Dropdown.svelte +88 -47
  13. package/Dropdown.svelte.d.ts +4 -0
  14. package/Field.svelte +34 -46
  15. package/HexColorSliders.svelte +150 -0
  16. package/HexColorSliders.svelte.d.ts +22 -0
  17. package/HslColorSliders.svelte +187 -0
  18. package/HslColorSliders.svelte.d.ts +22 -0
  19. package/Input.svelte +49 -21
  20. package/Input.svelte.d.ts +2 -1
  21. package/Label.svelte +3 -3
  22. package/Link.svelte +63 -17
  23. package/Link.svelte.d.ts +1 -0
  24. package/List.svelte +31 -30
  25. package/List.svelte.d.ts +1 -0
  26. package/List.types.d.ts +4 -3
  27. package/ListItem.svelte +29 -10
  28. package/ListItem.svelte.d.ts +1 -1
  29. package/Menu.svelte +92 -121
  30. package/Menu.svelte.d.ts +8 -2
  31. package/MenuBar.svelte +77 -32
  32. package/MenuBar.types.d.ts +2 -2
  33. package/MenuButton.svelte +48 -28
  34. package/MenuItem.constants.d.ts +1 -0
  35. package/MenuItem.constants.js +1 -0
  36. package/MenuItem.svelte +202 -139
  37. package/MenuItem.svelte.d.ts +7 -3
  38. package/MenuItem.types.d.ts +14 -5
  39. package/MenuItem.utils.d.ts +2 -0
  40. package/MenuItem.utils.js +16 -0
  41. package/MenuItemDisplay.svelte +9 -2
  42. package/MenuItemDisplay.svelte.d.ts +1 -0
  43. package/MenuSeparator.svelte +3 -3
  44. package/Popover.svelte +68 -64
  45. package/Popover.svelte.d.ts +4 -2
  46. package/Progress.svelte +14 -14
  47. package/Radio.svelte +42 -16
  48. package/Radio.svelte.d.ts +1 -0
  49. package/RgbColorSliders.svelte +161 -0
  50. package/RgbColorSliders.svelte.d.ts +22 -0
  51. package/Select.svelte +50 -32
  52. package/Slider.svelte +108 -118
  53. package/Slider.svelte.d.ts +1 -0
  54. package/Switch.svelte +97 -34
  55. package/Switch.svelte.d.ts +1 -0
  56. package/Tab.svelte +53 -30
  57. package/TabList.svelte +23 -28
  58. package/TabList.svelte.d.ts +1 -0
  59. package/TabList.types.d.ts +1 -1
  60. package/TextArea.svelte +45 -20
  61. package/TextArea.svelte.d.ts +3 -2
  62. package/Tooltip.svelte +12 -11
  63. package/Tree.svelte +37 -35
  64. package/Tree.svelte.d.ts +2 -0
  65. package/Tree.types.d.ts +1 -0
  66. package/TreeChevron.svelte +1 -1
  67. package/TreeItem.svelte +47 -10
  68. package/TreeItem.svelte.d.ts +2 -0
  69. package/TreeItemDisplay.svelte +26 -8
  70. package/TreeItemDisplay.svelte.d.ts +2 -0
  71. package/actions/clickOutside.js +1 -1
  72. package/actions/trapKeyboardFocus.d.ts +3 -0
  73. package/actions/trapKeyboardFocus.js +52 -0
  74. package/floating-ui.types.d.ts +2 -0
  75. package/index.d.ts +10 -5
  76. package/index.js +8 -3
  77. package/package.json +12 -1
  78. package/stores/prefersReducedMotion.d.ts +1 -0
  79. package/stores/prefersReducedMotion.js +10 -0
  80. package/stores/usingKeyboard.d.ts +1 -0
  81. package/stores/usingKeyboard.js +13 -0
  82. package/theme/applyTheme.js +3 -2
  83. package/theme/colors.d.ts +1 -0
  84. package/theme/colors.js +28 -13
  85. package/theme/darkTheme.js +130 -87
  86. package/theme/lightTheme.js +107 -87
package/theme/darkTheme.js CHANGED
@@ -1,100 +1,143 @@
1
- import { darkStatusColors, neutralColors } from './colors';
1
+ import { blueColors, darkStatusColors, neutralColors } from './colors';
2
2
  export const darkTheme = {
3
3
  // ----- Common ---- //
4
- '--stsv-Common__background-color': neutralColors.neutral15,
5
- '--stsv-Common__border-color': neutralColors.neutral92,
6
- '--stsv-Common__border-radius': '0',
7
- '--stsv-Common__border-style': 'solid',
8
- '--stsv-Common__border-width': '2px',
9
- '--stsv-Common__color': neutralColors.neutral100,
10
- // hover
11
- '--stsv-Common__background-color--hover': neutralColors.neutral15,
12
- '--stsv-Common__border-color--hover': neutralColors.neutral96,
13
- '--stsv-Common__color--hover': neutralColors.neutral100,
14
- // focus
15
- '--stsv-Common__background-color--focus': neutralColors.neutral45,
16
- '--stsv-Common__border-color--focus': neutralColors.neutral100,
17
- '--stsv-Common__color--focus': neutralColors.neutral100,
4
+ 'stsv-common__background-color': neutralColors.color2,
5
+ 'stsv-common__border-color': neutralColors.color9,
6
+ 'stsv-common__border-radius': '0',
7
+ 'stsv-common__border-style': 'solid',
8
+ 'stsv-common__border-width': '2px',
9
+ 'stsv-common__color': neutralColors.color12,
10
+ 'stsv-common__background-color--secondary': neutralColors.color3,
11
+ 'stsv-common__color--secondary': neutralColors.color6,
12
+ 'stsv-common__background-color--subtle': neutralColors.color2,
13
+ 'stsv-common__color--subtle': neutralColors.color5,
14
+ 'stsv-common__background-color--faint': neutralColors.color1,
15
+ 'stsv-common__color--faint': neutralColors.color4,
18
16
  // outline
19
- '--stsv-Common__outline-color': neutralColors.neutral100,
20
- '--stsv-Common__outline-offset': '0',
21
- '--stsv-Common__outline-style': 'solid',
22
- '--stsv-Common__outline-width': '2px',
17
+ 'stsv-common__outline-color': neutralColors.color12,
18
+ 'stsv-common__outline-offset': '0',
19
+ 'stsv-common__outline-style': 'solid',
20
+ 'stsv-common__outline-width': '2px',
23
21
  // disabled
24
- '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
25
- '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
26
- '--stsv-Disabled__background': 'repeating-linear-gradient(' +
27
- '45deg,' +
28
- 'var(--stsv-Common__background-color1--disabled),' +
29
- 'var(--stsv-Common__background-color1--disabled) 3px,' +
30
- 'var(--stsv-Common__background-color2--disabled) 3px,' +
31
- 'var(--stsv-Common__background-color2--disabled) 6px' +
32
- ')',
33
- '--stsv-Common__background-color--disabled': neutralColors.neutral45,
34
- '--stsv-Common__border-color--disabled': neutralColors.neutral92,
35
- '--stsv-Common__color--disabled': neutralColors.neutral60,
36
- // ----- Layer ---- //
37
- '--stsv-Layer__background-color--1': neutralColors.neutral20,
38
- '--stsv-Layer__color--1': neutralColors.neutral100,
39
- '--stsv-Layer__background-color--2': neutralColors.neutral10,
40
- '--stsv-Layer__color--2': neutralColors.neutral100,
41
- '--stsv-Layer__background-color--3': neutralColors.neutral45,
42
- '--stsv-Layer__color--3': neutralColors.neutral100,
22
+ 'stsv-common__background-color--disabled': neutralColors.color5,
23
+ 'stsv-common__border-color--disabled': neutralColors.color9,
24
+ 'stsv-common__color--disabled': neutralColors.color6,
25
+ 'stsv-common__background-color1--disabled': 'hsla(0, 0%, 0%, 0.2)',
26
+ 'stsv-common__background-color2--disabled': `hsla(0, 0%, 100%, 0.2)`,
27
+ // ----- Common--colorful (15) ---- //
28
+ 'stsv-common--colorful__background-color': blueColors.color1,
29
+ 'stsv-common--colorful__border-color': blueColors.color8,
30
+ 'stsv-common--colorful__color': blueColors.color9,
31
+ 'stsv-common--colorful__background-color--secondary': blueColors.color3,
32
+ 'stsv-common--colorful__color--secondary': blueColors.color7,
33
+ 'stsv-common--colorful__background-color--subtle': blueColors.color2,
34
+ 'stsv-common--colorful__color--subtle': blueColors.color5,
35
+ 'stsv-common--colorful__background-color--faint': blueColors.color1,
36
+ 'stsv-common--colorful__color--faint': blueColors.color3,
43
37
  // ----- Button ----- //
44
- '--stsv-Button__background-color': neutralColors.neutral30,
45
- '--stsv-Button__border-color': neutralColors.neutral92,
46
- '--stsv-Button__border-radius': '8px',
47
- '--stsv-Button__border-style': 'solid',
48
- '--stsv-Button__border-width': '2px',
49
- '--stsv-Button__color': neutralColors.neutral100,
38
+ 'stsv-button__background-color': neutralColors.color4,
39
+ 'stsv-button__border-color': neutralColors.color9,
40
+ 'stsv-button__border-radius': '8px',
41
+ 'stsv-button__border-style': 'solid',
42
+ 'stsv-button__border-width': '2px',
43
+ 'stsv-button__color': neutralColors.color12,
50
44
  // hover
51
- '--stsv-Button__background-color--hover': neutralColors.neutral45,
52
- '--stsv-Button__border-color--hover': neutralColors.neutral96,
53
- '--stsv-Button__color--hover': neutralColors.neutral100,
45
+ 'stsv-button__background-color--hover': neutralColors.color5,
46
+ 'stsv-button__border-color--hover': neutralColors.color10,
47
+ 'stsv-button__color--hover': neutralColors.color12,
54
48
  // active
55
- '--stsv-Button__background-color--active': neutralColors.neutral60,
56
- '--stsv-Button__border-color--active': neutralColors.neutral98,
57
- '--stsv-Button__color--active': neutralColors.neutral98,
49
+ 'stsv-button__background-color--active': neutralColors.color6,
50
+ 'stsv-button__border-color--active': neutralColors.color11,
51
+ 'stsv-button__color--active': neutralColors.color11,
52
+ // focus
53
+ 'stsv-button__background-color--focus': neutralColors.color5,
54
+ 'stsv-button__border-color--focus': neutralColors.color12,
55
+ 'stsv-button__color--focus': neutralColors.color12,
56
+ // ----- Button--colorful (12) ---- //
57
+ 'stsv-button--colorful__background-color': blueColors.color5,
58
+ 'stsv-button--colorful__border-color': blueColors.color3,
59
+ 'stsv-button--colorful__color': blueColors.color11,
60
+ // hover
61
+ 'stsv-button--colorful__background-color--hover': blueColors.color6,
62
+ 'stsv-button--colorful__border-color--hover': blueColors.color4,
63
+ 'stsv-button--colorful__color--hover': blueColors.color11,
58
64
  // focus
59
- '--stsv-Button__background-color--focus': neutralColors.neutral45,
60
- '--stsv-Button__border-color--focus': neutralColors.neutral100,
61
- '--stsv-Button__color--focus': neutralColors.neutral100,
65
+ 'stsv-button--colorful__background-color--focus': blueColors.color6,
66
+ 'stsv-button--colorful__border-color--focus': blueColors.color4,
67
+ 'stsv-button--colorful__color--focus': blueColors.color11,
68
+ // active
69
+ 'stsv-button--colorful__background-color--active': blueColors.color7,
70
+ 'stsv-button--colorful__border-color--active': blueColors.color5,
71
+ 'stsv-button--colorful__color--active': blueColors.color12,
62
72
  // ----- Input ----- //
63
- '--stsv-Input__background-color': neutralColors.neutral30,
64
- '--stsv-Input__border-color': neutralColors.neutral92,
65
- '--stsv-Input__border-radius': '3px',
66
- '--stsv-Input__border-style': 'solid',
67
- '--stsv-Input__border-width': '2px',
68
- '--stsv-Input__color': neutralColors.neutral100,
73
+ 'stsv-input__background-color': neutralColors.color4,
74
+ 'stsv-input__border-color': neutralColors.color9,
75
+ 'stsv-input__border-radius': '3px',
76
+ 'stsv-input__border-style': 'solid',
77
+ 'stsv-input__border-width': '2px',
78
+ 'stsv-input__color': neutralColors.color12,
79
+ // hover
80
+ 'stsv-input__background-color--hover': neutralColors.color2,
81
+ 'stsv-input__border-color--hover': neutralColors.color10,
82
+ 'stsv-input__color--hover': neutralColors.color12,
83
+ // focus
84
+ 'stsv-input__background-color--focus': neutralColors.color2,
85
+ 'stsv-input__border-color--focus': neutralColors.color12,
86
+ 'stsv-input__color--focus': neutralColors.color12,
87
+ // selected
88
+ 'stsv-input__background-color--selected': neutralColors.color6,
89
+ 'stsv-input__border-color--selected': neutralColors.color11,
90
+ 'stsv-input__color--selected': neutralColors.color12,
91
+ // ----- Input--colorful (12) ---- //
92
+ 'stsv-input--colorful__background-color': blueColors.color4,
93
+ 'stsv-input--colorful__border-color': blueColors.color9,
94
+ 'stsv-input--colorful__color': blueColors.color12,
95
+ // hover
96
+ 'stsv-input--colorful__background-color--hover': blueColors.color2,
97
+ 'stsv-input--colorful__border-color--hover': blueColors.color10,
98
+ 'stsv-input--colorful__color--hover': blueColors.color12,
99
+ // focus
100
+ 'stsv-input--colorful__background-color--focus': blueColors.color2,
101
+ 'stsv-input--colorful__border-color--focus': blueColors.color10,
102
+ 'stsv-input--colorful__color--focus': blueColors.color12,
103
+ // selected
104
+ 'stsv-input--colorful__background-color--selected': blueColors.color6,
105
+ 'stsv-input--colorful__border-color--selected': blueColors.color11,
106
+ 'stsv-input--colorful__color--selected': blueColors.color12,
107
+ // ----- Status ----- //
108
+ 'stsv-status--info__background-color': darkStatusColors.info.backgroundColor,
109
+ 'stsv-status--info__border-color': darkStatusColors.info.borderColor,
110
+ 'stsv-status--info__color': darkStatusColors.info.color,
111
+ 'stsv-status--success__background-color': darkStatusColors.success.backgroundColor,
112
+ 'stsv-status--success__border-color': darkStatusColors.success.borderColor,
113
+ 'stsv-status--success__color': darkStatusColors.success.color,
114
+ 'stsv-status--warning__background-color': darkStatusColors.warning.backgroundColor,
115
+ 'stsv-status--warning__border-color': darkStatusColors.warning.borderColor,
116
+ 'stsv-status--warning__color': darkStatusColors.warning.color,
117
+ 'stsv-status--error__background-color': darkStatusColors.error.backgroundColor,
118
+ 'stsv-status--error__border-color': darkStatusColors.error.borderColor,
119
+ 'stsv-status--error__color': darkStatusColors.error.color,
120
+ // ----- Colorful (18) ---- //
121
+ 'stsv-Colorful__background-color': blueColors.color4,
122
+ 'stsv-Colorful__border-color': blueColors.color8,
123
+ 'stsv-Colorful__border-radius': '0',
124
+ 'stsv-Colorful__border-style': 'solid',
125
+ 'stsv-Colorful__border-width': '2px',
126
+ 'stsv-Colorful__color': blueColors.color11,
69
127
  // hover
70
- '--stsv-Input__background-color--hover': neutralColors.neutral15,
71
- '--stsv-Input__border-color--hover': neutralColors.neutral96,
72
- '--stsv-Input__color--hover': neutralColors.neutral100,
128
+ 'stsv-Colorful__background-color--hover': blueColors.color5,
129
+ 'stsv-Colorful__border-color--hover': blueColors.color8,
130
+ 'stsv-Colorful__color--hover': blueColors.color11,
73
131
  // focus
74
- '--stsv-Input__background-color--focus': neutralColors.neutral15,
75
- '--stsv-Input__border-color--focus': neutralColors.neutral100,
76
- '--stsv-Input__color--focus': neutralColors.neutral100,
132
+ 'stsv-Colorful__background-color--focus': blueColors.color5,
133
+ 'stsv-Colorful__border-color--focus': blueColors.color8,
134
+ 'stsv-Colorful__color--focus': blueColors.color11,
135
+ // active
136
+ 'stsv-Colorful__background-color--active': blueColors.color7,
137
+ 'stsv-Colorful__border-color--active': blueColors.color9,
138
+ 'stsv-Colorful__color--active': blueColors.color12,
77
139
  // selected
78
- '--stsv-Input__background-color--selected': neutralColors.neutral60,
79
- '--stsv-Input__border-color--selected': neutralColors.neutral98,
80
- '--stsv-Input__color--selected': neutralColors.neutral100,
81
- // ----- Display ----- //
82
- '--stsv-Display__background-color': neutralColors.neutral20,
83
- '--stsv-Display__border-color': neutralColors.neutral92,
84
- '--stsv-Display__color': neutralColors.neutral80,
85
- '--stsv-Display__color--subtle': neutralColors.neutral96,
86
- '--stsv-Display__color--faint': neutralColors.neutral45,
87
- '--stsv-Display__color--disabled': neutralColors.neutral45,
88
- '--stsv-Info__background-color': darkStatusColors.info.backgroundColor,
89
- '--stsv-Info__border-color': darkStatusColors.info.borderColor,
90
- '--stsv-Info__color': darkStatusColors.info.color,
91
- '--stsv-Success__background-color': darkStatusColors.success.backgroundColor,
92
- '--stsv-Success__border-color': darkStatusColors.success.borderColor,
93
- '--stsv-Success__color': darkStatusColors.success.color,
94
- '--stsv-Warning__background-color': darkStatusColors.warning.backgroundColor,
95
- '--stsv-Warning__border-color': darkStatusColors.warning.borderColor,
96
- '--stsv-Warning__color': darkStatusColors.warning.color,
97
- '--stsv-Error__background-color': darkStatusColors.error.backgroundColor,
98
- '--stsv-Error__border-color': darkStatusColors.error.borderColor,
99
- '--stsv-Error__color': darkStatusColors.error.color
140
+ 'stsv-Colorful__background-color--selected': neutralColors.color7,
141
+ 'stsv-Colorful__border-color--selected': neutralColors.color9,
142
+ 'stsv-Colorful__color--selected': neutralColors.color12
100
143
  };
package/theme/lightTheme.js CHANGED
@@ -1,100 +1,120 @@
1
- import { lightStatusColors, neutralColors } from './colors';
1
+ import { blueColors, lightStatusColors, neutralColors } from './colors';
2
2
  export const lightTheme = {
3
3
  // ----- Common (18) ---- //
4
- '--stsv-Common__background-color': neutralColors.neutral100,
5
- '--stsv-Common__border-color': neutralColors.neutral60,
6
- '--stsv-Common__border-radius': '0',
7
- '--stsv-Common__border-style': 'solid',
8
- '--stsv-Common__border-width': '2px',
9
- '--stsv-Common__color': neutralColors.neutral15,
10
- // hover
11
- '--stsv-Common__background-color--hover': neutralColors.neutral100,
12
- '--stsv-Common__border-color--hover': neutralColors.neutral45,
13
- '--stsv-Common__color--hover': neutralColors.neutral15,
14
- // focus
15
- '--stsv-Common__background-color--focus': neutralColors.neutral96,
16
- '--stsv-Common__border-color--focus': neutralColors.neutral0,
17
- '--stsv-Common__color--focus': neutralColors.neutral15,
4
+ 'stsv-common__background-color': neutralColors.color12,
5
+ 'stsv-common__border-color': neutralColors.color5,
6
+ 'stsv-common__border-radius': '0',
7
+ 'stsv-common__border-style': 'solid',
8
+ 'stsv-common__border-width': '2px',
9
+ 'stsv-common__color': neutralColors.color2,
10
+ 'stsv-common__background-color--secondary': neutralColors.color9,
11
+ 'stsv-common__color--secondary': neutralColors.color5,
12
+ 'stsv-common__background-color--subtle': neutralColors.color10,
13
+ 'stsv-common__color--subtle': neutralColors.color7,
14
+ 'stsv-common__background-color--faint': neutralColors.color11,
15
+ 'stsv-common__color--faint': neutralColors.color9,
18
16
  // outline
19
- '--stsv-Common__outline-color': neutralColors.neutral15,
20
- '--stsv-Common__outline-offset': '0',
21
- '--stsv-Common__outline-style': 'solid',
22
- '--stsv-Common__outline-width': '2px',
17
+ 'stsv-common__outline-color': neutralColors.color2,
18
+ 'stsv-common__outline-offset': '0',
19
+ 'stsv-common__outline-style': 'solid',
20
+ 'stsv-common__outline-width': '2px',
23
21
  // disabled
24
- '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
25
- '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
26
- '--stsv-Disabled__background': 'repeating-linear-gradient(' +
27
- '45deg,' +
28
- 'var(--stsv-Common__background-color1--disabled),' +
29
- 'var(--stsv-Common__background-color1--disabled) 3px,' +
30
- 'var(--stsv-Common__background-color2--disabled) 3px,' +
31
- 'var(--stsv-Common__background-color2--disabled) 6px' +
32
- ')',
33
- '--stsv-Common__background-color--disabled': neutralColors.neutral96,
34
- '--stsv-Common__border-color--disabled': neutralColors.neutral75,
35
- '--stsv-Common__color--disabled': neutralColors.neutral75,
36
- // ----- Layer ---- //
37
- '--stsv-Layer__background-color--1': neutralColors.neutral98,
38
- '--stsv-Layer__color--1': neutralColors.neutral15,
39
- '--stsv-Layer__background-color--2': neutralColors.neutral96,
40
- '--stsv-Layer__color--2': neutralColors.neutral15,
41
- '--stsv-Layer__background-color--3': neutralColors.neutral92,
42
- '--stsv-Layer__color--3': neutralColors.neutral15,
22
+ 'stsv-common__background-color--disabled': neutralColors.color10,
23
+ 'stsv-common__border-color--disabled': neutralColors.color7,
24
+ 'stsv-common__color--disabled': neutralColors.color7,
25
+ 'stsv-common__background-color1--disabled': 'hsla(0, 0%, 0%, 0.2)',
26
+ 'stsv-common__background-color2--disabled': `hsla(0, 0%, 100%, 0.2)`,
27
+ // ----- Common--colorful (15) ---- //
28
+ 'stsv-common--colorful__background-color': blueColors.color12,
29
+ 'stsv-common--colorful__border-color': blueColors.color4,
30
+ 'stsv-common--colorful__color': blueColors.color3,
31
+ 'stsv-common--colorful__background-color--secondary': blueColors.color9,
32
+ 'stsv-common--colorful__color--secondary': blueColors.color5,
33
+ 'stsv-common--colorful__background-color--subtle': blueColors.color10,
34
+ 'stsv-common--colorful__color--subtle': blueColors.color7,
35
+ 'stsv-common--colorful__background-color--faint': blueColors.color11,
36
+ 'stsv-common--colorful__color--faint': blueColors.color9,
43
37
  // ----- Button (15) ----- //
44
- '--stsv-Button__background-color': neutralColors.neutral96,
45
- '--stsv-Button__border-color': neutralColors.neutral60,
46
- '--stsv-Button__border-radius': '8px',
47
- '--stsv-Button__border-style': 'solid',
48
- '--stsv-Button__border-width': '2px',
49
- '--stsv-Button__color': neutralColors.neutral15,
38
+ 'stsv-button__background-color': neutralColors.color10,
39
+ 'stsv-button__border-color': neutralColors.color5,
40
+ 'stsv-button__border-radius': '8px',
41
+ 'stsv-button__border-style': 'solid',
42
+ 'stsv-button__border-width': '2px',
43
+ 'stsv-button__color': neutralColors.color2,
50
44
  // hover
51
- '--stsv-Button__background-color--hover': neutralColors.neutral96,
52
- '--stsv-Button__border-color--hover': neutralColors.neutral45,
53
- '--stsv-Button__color--hover': neutralColors.neutral15,
45
+ 'stsv-button__background-color--hover': neutralColors.color9,
46
+ 'stsv-button__border-color--hover': neutralColors.color4,
47
+ 'stsv-button__color--hover': neutralColors.color2,
48
+ // focus
49
+ 'stsv-button__background-color--focus': neutralColors.color9,
50
+ 'stsv-button__border-color--focus': neutralColors.color4,
51
+ 'stsv-button__color--focus': neutralColors.color2,
54
52
  // active
55
- '--stsv-Button__background-color--active': neutralColors.neutral92,
56
- '--stsv-Button__border-color--active': neutralColors.neutral30,
57
- '--stsv-Button__color--active': neutralColors.neutral30,
53
+ 'stsv-button__background-color--active': neutralColors.color8,
54
+ 'stsv-button__border-color--active': neutralColors.color3,
55
+ 'stsv-button__color--active': neutralColors.color1,
56
+ // ----- Button--colorful (12) ---- //
57
+ 'stsv-button--colorful__background-color': blueColors.color6,
58
+ 'stsv-button--colorful__border-color': blueColors.color4,
59
+ 'stsv-button--colorful__color': blueColors.color11,
60
+ // hover
61
+ 'stsv-button--colorful__background-color--hover': blueColors.color7,
62
+ 'stsv-button--colorful__border-color--hover': blueColors.color5,
63
+ 'stsv-button--colorful__color--hover': blueColors.color11,
58
64
  // focus
59
- '--stsv-Button__background-color--focus': neutralColors.neutral96,
60
- '--stsv-Button__border-color--focus': neutralColors.neutral0,
61
- '--stsv-Button__color--focus': neutralColors.neutral15,
65
+ 'stsv-button--colorful__background-color--focus': blueColors.color7,
66
+ 'stsv-button--colorful__border-color--focus': blueColors.color5,
67
+ 'stsv-button--colorful__color--focus': blueColors.color11,
68
+ // active
69
+ 'stsv-button--colorful__background-color--active': blueColors.color5,
70
+ 'stsv-button--colorful__border-color--active': blueColors.color3,
71
+ 'stsv-button--colorful__color--active': blueColors.color12,
62
72
  // ----- Input (15) ----- //
63
- '--stsv-Input__background-color': neutralColors.neutral98,
64
- '--stsv-Input__border-color': neutralColors.neutral60,
65
- '--stsv-Input__border-radius': '3px',
66
- '--stsv-Input__border-style': 'solid',
67
- '--stsv-Input__border-width': '2px',
68
- '--stsv-Input__color': neutralColors.neutral15,
73
+ 'stsv-input__background-color': neutralColors.color11,
74
+ 'stsv-input__border-color': neutralColors.color5,
75
+ 'stsv-input__border-radius': '3px',
76
+ 'stsv-input__border-style': 'solid',
77
+ 'stsv-input__border-width': '2px',
78
+ 'stsv-input__color': neutralColors.color2,
79
+ // hover
80
+ 'stsv-input__background-color--hover': neutralColors.color12,
81
+ 'stsv-input__border-color--hover': neutralColors.color4,
82
+ 'stsv-input__color--hover': neutralColors.color2,
83
+ // focus
84
+ 'stsv-input__background-color--focus': neutralColors.color12,
85
+ 'stsv-input__border-color--focus': neutralColors.color4,
86
+ 'stsv-input__color--focus': neutralColors.color2,
87
+ // selected
88
+ 'stsv-input__background-color--selected': neutralColors.color9,
89
+ 'stsv-input__border-color--selected': neutralColors.color3,
90
+ 'stsv-input__color--selected': neutralColors.color2,
91
+ // ----- Input--colorful (12) ---- //
92
+ 'stsv-input--colorful__background-color': blueColors.color11,
93
+ 'stsv-input--colorful__border-color': blueColors.color4,
94
+ 'stsv-input--colorful__color': blueColors.color2,
69
95
  // hover
70
- '--stsv-Input__background-color--hover': neutralColors.neutral100,
71
- '--stsv-Input__border-color--hover': neutralColors.neutral45,
72
- '--stsv-Input__color--hover': neutralColors.neutral15,
96
+ 'stsv-input--colorful__background-color--hover': blueColors.color12,
97
+ 'stsv-input--colorful__border-color--hover': blueColors.color5,
98
+ 'stsv-input--colorful__color--hover': blueColors.color2,
73
99
  // focus
74
- '--stsv-Input__background-color--focus': neutralColors.neutral100,
75
- '--stsv-Input__border-color--focus': neutralColors.neutral15,
76
- '--stsv-Input__color--focus': neutralColors.neutral15,
100
+ 'stsv-input--colorful__background-color--focus': blueColors.color12,
101
+ 'stsv-input--colorful__border-color--focus': blueColors.color5,
102
+ 'stsv-input--colorful__color--focus': blueColors.color2,
77
103
  // selected
78
- '--stsv-Input__background-color--selected': neutralColors.neutral92,
79
- '--stsv-Input__border-color--selected': neutralColors.neutral30,
80
- '--stsv-Input__color--selected': neutralColors.neutral15,
81
- // ----- Display ----- //
82
- '--stsv-Display__background-color': neutralColors.neutral92,
83
- '--stsv-Display__border-color': neutralColors.neutral30,
84
- '--stsv-Display__color': neutralColors.neutral15,
85
- '--stsv-Display__color--subtle': neutralColors.neutral45,
86
- '--stsv-Display__color--faint': neutralColors.neutral85,
87
- '--stsv-Display__color--disabled': neutralColors.neutral85,
88
- '--stsv-Info__background-color': lightStatusColors.info.backgroundColor,
89
- '--stsv-Info__border-color': lightStatusColors.info.borderColor,
90
- '--stsv-Info__color': lightStatusColors.info.color,
91
- '--stsv-Success__background-color': lightStatusColors.success.backgroundColor,
92
- '--stsv-Success__border-color': lightStatusColors.success.borderColor,
93
- '--stsv-Success__color': lightStatusColors.success.color,
94
- '--stsv-Warning__background-color': lightStatusColors.warning.backgroundColor,
95
- '--stsv-Warning__border-color': lightStatusColors.warning.borderColor,
96
- '--stsv-Warning__color': lightStatusColors.warning.color,
97
- '--stsv-Error__background-color': lightStatusColors.error.backgroundColor,
98
- '--stsv-Error__border-color': lightStatusColors.error.borderColor,
99
- '--stsv-Error__color': lightStatusColors.error.color
104
+ 'stsv-input--colorful__background-color--selected': blueColors.color9,
105
+ 'stsv-input--colorful__border-color--selected': blueColors.color3,
106
+ 'stsv-input--colorful__color--selected': blueColors.color2,
107
+ // ----- Status (12) ----- //
108
+ 'stsv-status--info__background-color': lightStatusColors.info.backgroundColor,
109
+ 'stsv-status--info__border-color': lightStatusColors.info.borderColor,
110
+ 'stsv-status--info__color': lightStatusColors.info.color,
111
+ 'stsv-status--success__background-color': lightStatusColors.success.backgroundColor,
112
+ 'stsv-status--success__border-color': lightStatusColors.success.borderColor,
113
+ 'stsv-status--success__color': lightStatusColors.success.color,
114
+ 'stsv-status--warning__background-color': lightStatusColors.warning.backgroundColor,
115
+ 'stsv-status--warning__border-color': lightStatusColors.warning.borderColor,
116
+ 'stsv-status--warning__color': lightStatusColors.warning.color,
117
+ 'stsv-status--error__background-color': lightStatusColors.error.backgroundColor,
118
+ 'stsv-status--error__border-color': lightStatusColors.error.borderColor,
119
+ 'stsv-status--error__color': lightStatusColors.error.color
100
120
  };