@geoffcox/sterling-svelte 0.0.16 → 0.0.17

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 (111) hide show
  1. package/{buttons/Button.svelte → Button.svelte} +27 -27
  2. package/{inputs/Checkbox.svelte → Checkbox.svelte} +15 -15
  3. package/{surfaces/Dialog.svelte → Dialog.svelte} +34 -21
  4. package/{inputs/Input.svelte → Input.svelte} +22 -22
  5. package/Label.svelte +52 -0
  6. package/Label.svelte.d.ts +42 -0
  7. package/List.constants.d.ts +1 -0
  8. package/List.constants.js +1 -0
  9. package/List.svelte +324 -0
  10. package/List.svelte.d.ts +69 -0
  11. package/List.types.d.ts +6 -0
  12. package/ListItem.svelte +90 -0
  13. package/ListItem.svelte.d.ts +51 -0
  14. package/{containers/Menu.svelte → Menu.svelte} +42 -27
  15. package/{containers/MenuBar.svelte → MenuBar.svelte} +13 -13
  16. package/{buttons/MenuButton.svelte → MenuButton.svelte} +17 -17
  17. package/{buttons/MenuButton.svelte.d.ts → MenuButton.svelte.d.ts} +1 -1
  18. package/{containers/MenuItem.svelte → MenuItem.svelte} +42 -54
  19. package/{containers/MenuItem.svelte.d.ts → MenuItem.svelte.d.ts} +2 -2
  20. package/{containers/MenuSeparator.svelte → MenuSeparator.svelte} +2 -2
  21. package/Menus.types.d.ts +22 -0
  22. package/{containers/Menus.utils.d.ts → Menus.utils.d.ts} +2 -2
  23. package/{containers/Menus.utils.js → Menus.utils.js} +6 -6
  24. package/{surfaces/Portal.svelte → Portal.svelte} +1 -1
  25. package/{display/Progress.svelte → Progress.svelte} +14 -14
  26. package/{inputs/Radio.svelte → Radio.svelte} +15 -15
  27. package/{inputs/Select.svelte → Select.svelte} +92 -98
  28. package/{inputs/Select.svelte.d.ts → Select.svelte.d.ts} +20 -25
  29. package/{inputs/Slider.svelte → Slider.svelte} +49 -24
  30. package/Slider.svelte.d.ts +53 -0
  31. package/{inputs/Switch.svelte → Switch.svelte} +38 -38
  32. package/Tab.svelte +181 -0
  33. package/{containers/Tab.svelte.d.ts → Tab.svelte.d.ts} +12 -15
  34. package/TabList.svelte +247 -0
  35. package/{containers/TabList.svelte.d.ts → TabList.svelte.d.ts} +21 -21
  36. package/TabList.types.d.ts +7 -0
  37. package/{inputs/TextArea.svelte → TextArea.svelte} +22 -22
  38. package/Tooltip.svelte +182 -0
  39. package/Tooltip.svelte.d.ts +24 -0
  40. package/Tooltip.types.d.ts +3 -0
  41. package/Tooltip.types.js +1 -0
  42. package/Tree.constants.d.ts +2 -0
  43. package/Tree.constants.js +2 -0
  44. package/Tree.svelte +142 -0
  45. package/Tree.svelte.d.ts +25 -0
  46. package/Tree.types.d.ts +28 -0
  47. package/Tree.types.js +1 -0
  48. package/{containers/TreeChevron.svelte → TreeChevron.svelte} +3 -3
  49. package/TreeItem.svelte +276 -0
  50. package/TreeItem.svelte.d.ts +65 -0
  51. package/{containers/TreeItem.svelte → TreeItemDisplay.svelte} +18 -18
  52. package/{containers/TreeItem.svelte.d.ts → TreeItemDisplay.svelte.d.ts} +11 -14
  53. package/{forwardEvents.js → actions/forwardEvents.js} +0 -2
  54. package/index.d.ts +42 -31
  55. package/index.js +39 -25
  56. package/package.json +44 -41
  57. package/theme/darkTheme.js +66 -74
  58. package/theme/lightTheme.js +66 -74
  59. package/containers/List.svelte +0 -249
  60. package/containers/List.svelte.d.ts +0 -68
  61. package/containers/ListItem.svelte +0 -48
  62. package/containers/ListItem.svelte.d.ts +0 -26
  63. package/containers/Menus.types.d.ts +0 -22
  64. package/containers/Tab.svelte +0 -327
  65. package/containers/TabList.svelte +0 -126
  66. package/containers/Tabs.types.d.ts +0 -12
  67. package/containers/Tree.constants.d.ts +0 -2
  68. package/containers/Tree.constants.js +0 -2
  69. package/containers/Tree.svelte +0 -222
  70. package/containers/Tree.svelte.d.ts +0 -50
  71. package/containers/Tree.types.d.ts +0 -47
  72. package/containers/TreeNode.svelte +0 -266
  73. package/containers/TreeNode.svelte.d.ts +0 -43
  74. package/display/Label.svelte +0 -27
  75. package/display/Label.svelte.d.ts +0 -20
  76. package/inputs/Slider.svelte.d.ts +0 -28
  77. package/surfaces/CloseX.svelte +0 -5
  78. package/surfaces/CloseX.svelte.d.ts +0 -23
  79. /package/{buttons/Button.svelte.d.ts → Button.svelte.d.ts} +0 -0
  80. /package/{buttons/Button.types.d.ts → Button.types.d.ts} +0 -0
  81. /package/{buttons/Button.types.js → Button.types.js} +0 -0
  82. /package/{inputs/Checkbox.svelte.d.ts → Checkbox.svelte.d.ts} +0 -0
  83. /package/{surfaces/Dialog.svelte.d.ts → Dialog.svelte.d.ts} +0 -0
  84. /package/{inputs/Input.svelte.d.ts → Input.svelte.d.ts} +0 -0
  85. /package/{containers/Menus.types.js → List.types.js} +0 -0
  86. /package/{containers/Menu.svelte.d.ts → Menu.svelte.d.ts} +0 -0
  87. /package/{containers/MenuBar.svelte.d.ts → MenuBar.svelte.d.ts} +0 -0
  88. /package/{containers/MenuItemDisplay.svelte → MenuItemDisplay.svelte} +0 -0
  89. /package/{containers/MenuItemDisplay.svelte.d.ts → MenuItemDisplay.svelte.d.ts} +0 -0
  90. /package/{containers/MenuSeparator.svelte.d.ts → MenuSeparator.svelte.d.ts} +0 -0
  91. /package/{containers/Menus.constants.d.ts → Menus.constants.d.ts} +0 -0
  92. /package/{containers/Menus.constants.js → Menus.constants.js} +0 -0
  93. /package/{containers/Tabs.types.js → Menus.types.js} +0 -0
  94. /package/{surfaces/Portal.svelte.d.ts → Portal.svelte.d.ts} +0 -0
  95. /package/{display/Progress.svelte.d.ts → Progress.svelte.d.ts} +0 -0
  96. /package/{display/Progress.types.d.ts → Progress.types.d.ts} +0 -0
  97. /package/{display/Progress.types.js → Progress.types.js} +0 -0
  98. /package/{inputs/Radio.svelte.d.ts → Radio.svelte.d.ts} +0 -0
  99. /package/{inputs/Switch.svelte.d.ts → Switch.svelte.d.ts} +0 -0
  100. /package/{containers/Tabs.constants.d.ts → TabList.constants.d.ts} +0 -0
  101. /package/{containers/Tabs.constants.js → TabList.constants.js} +0 -0
  102. /package/{containers/Tree.types.js → TabList.types.js} +0 -0
  103. /package/{inputs/TextArea.svelte.d.ts → TextArea.svelte.d.ts} +0 -0
  104. /package/{inputs/TextArea.types.d.ts → TextArea.types.d.ts} +0 -0
  105. /package/{inputs/TextArea.types.js → TextArea.types.js} +0 -0
  106. /package/{containers/TreeChevron.svelte.d.ts → TreeChevron.svelte.d.ts} +0 -0
  107. /package/{clickOutside.d.ts → actions/clickOutside.d.ts} +0 -0
  108. /package/{clickOutside.js → actions/clickOutside.js} +0 -0
  109. /package/{forwardEvents.d.ts → actions/forwardEvents.d.ts} +0 -0
  110. /package/{portal.d.ts → actions/portal.d.ts} +0 -0
  111. /package/{portal.js → actions/portal.js} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern, accessible, and lightweight component library for Svelte.",
6
6
  "license": "MIT",
@@ -51,47 +51,50 @@
51
51
  },
52
52
  "exports": {
53
53
  "./package.json": "./package.json",
54
- "./buttons/Button.svelte": "./buttons/Button.svelte",
55
- "./buttons/Button.types": "./buttons/Button.types.js",
56
- "./buttons/MenuButton.svelte": "./buttons/MenuButton.svelte",
57
- "./clickOutside": "./clickOutside.js",
58
- "./containers/List.svelte": "./containers/List.svelte",
59
- "./containers/ListItem.svelte": "./containers/ListItem.svelte",
60
- "./containers/Menu.svelte": "./containers/Menu.svelte",
61
- "./containers/MenuBar.svelte": "./containers/MenuBar.svelte",
62
- "./containers/MenuItem.svelte": "./containers/MenuItem.svelte",
63
- "./containers/MenuItemDisplay.svelte": "./containers/MenuItemDisplay.svelte",
64
- "./containers/MenuSeparator.svelte": "./containers/MenuSeparator.svelte",
65
- "./containers/Menus.constants": "./containers/Menus.constants.js",
66
- "./containers/Menus.types": "./containers/Menus.types.js",
67
- "./containers/Menus.utils": "./containers/Menus.utils.js",
68
- "./containers/Tab.svelte": "./containers/Tab.svelte",
69
- "./containers/TabList.svelte": "./containers/TabList.svelte",
70
- "./containers/Tabs.constants": "./containers/Tabs.constants.js",
71
- "./containers/Tabs.types": "./containers/Tabs.types.js",
72
- "./containers/Tree.constants": "./containers/Tree.constants.js",
73
- "./containers/Tree.svelte": "./containers/Tree.svelte",
74
- "./containers/Tree.types": "./containers/Tree.types.js",
75
- "./containers/TreeChevron.svelte": "./containers/TreeChevron.svelte",
76
- "./containers/TreeItem.svelte": "./containers/TreeItem.svelte",
77
- "./containers/TreeNode.svelte": "./containers/TreeNode.svelte",
78
- "./display/Label.svelte": "./display/Label.svelte",
79
- "./display/Progress.svelte": "./display/Progress.svelte",
80
- "./display/Progress.types": "./display/Progress.types.js",
81
- "./forwardEvents": "./forwardEvents.js",
54
+ "./Button.svelte": "./Button.svelte",
55
+ "./Button.types": "./Button.types.js",
56
+ "./Checkbox.svelte": "./Checkbox.svelte",
57
+ "./Dialog.svelte": "./Dialog.svelte",
58
+ "./Input.svelte": "./Input.svelte",
59
+ "./Label.svelte": "./Label.svelte",
60
+ "./List.constants": "./List.constants.js",
61
+ "./List.svelte": "./List.svelte",
62
+ "./List.types": "./List.types.js",
63
+ "./ListItem.svelte": "./ListItem.svelte",
64
+ "./Menu.svelte": "./Menu.svelte",
65
+ "./MenuBar.svelte": "./MenuBar.svelte",
66
+ "./MenuButton.svelte": "./MenuButton.svelte",
67
+ "./MenuItem.svelte": "./MenuItem.svelte",
68
+ "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
69
+ "./MenuSeparator.svelte": "./MenuSeparator.svelte",
70
+ "./Menus.constants": "./Menus.constants.js",
71
+ "./Menus.types": "./Menus.types.js",
72
+ "./Menus.utils": "./Menus.utils.js",
73
+ "./Portal.svelte": "./Portal.svelte",
74
+ "./Progress.svelte": "./Progress.svelte",
75
+ "./Progress.types": "./Progress.types.js",
76
+ "./Radio.svelte": "./Radio.svelte",
77
+ "./Select.svelte": "./Select.svelte",
78
+ "./Slider.svelte": "./Slider.svelte",
79
+ "./Switch.svelte": "./Switch.svelte",
80
+ "./Tab.svelte": "./Tab.svelte",
81
+ "./TabList.constants": "./TabList.constants.js",
82
+ "./TabList.svelte": "./TabList.svelte",
83
+ "./TabList.types": "./TabList.types.js",
84
+ "./TextArea.svelte": "./TextArea.svelte",
85
+ "./TextArea.types": "./TextArea.types.js",
86
+ "./Tooltip.svelte": "./Tooltip.svelte",
87
+ "./Tooltip.types": "./Tooltip.types.js",
88
+ "./Tree.constants": "./Tree.constants.js",
89
+ "./Tree.svelte": "./Tree.svelte",
90
+ "./Tree.types": "./Tree.types.js",
91
+ "./TreeChevron.svelte": "./TreeChevron.svelte",
92
+ "./TreeItem.svelte": "./TreeItem.svelte",
93
+ "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
94
+ "./actions/clickOutside": "./actions/clickOutside.js",
95
+ "./actions/forwardEvents": "./actions/forwardEvents.js",
96
+ "./actions/portal": "./actions/portal.js",
82
97
  ".": "./index.js",
83
- "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
84
- "./inputs/Input.svelte": "./inputs/Input.svelte",
85
- "./inputs/Radio.svelte": "./inputs/Radio.svelte",
86
- "./inputs/Select.svelte": "./inputs/Select.svelte",
87
- "./inputs/Slider.svelte": "./inputs/Slider.svelte",
88
- "./inputs/Switch.svelte": "./inputs/Switch.svelte",
89
- "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
90
- "./inputs/TextArea.types": "./inputs/TextArea.types.js",
91
- "./portal": "./portal.js",
92
- "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
93
- "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
94
- "./surfaces/Portal.svelte": "./surfaces/Portal.svelte",
95
98
  "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
96
99
  "./theme/applyLightTheme": "./theme/applyLightTheme.js",
97
100
  "./theme/applyTheme": "./theme/applyTheme.js",
package/theme/darkTheme.js CHANGED
@@ -1,92 +1,84 @@
1
1
  import { neutrals } from './colors';
2
2
  export const darkTheme = {
3
3
  // ----- Common ---- //
4
- '--Common__background-color': neutrals.neutral15,
5
- '--Common__border-color': neutrals.neutral92,
6
- '--Common__border-radius': '0',
7
- '--Common__border-style': 'solid',
8
- '--Common__border-width': '2px',
9
- '--Common__color': neutrals.neutral100,
4
+ '--stsv-Common__background-color': neutrals.neutral15,
5
+ '--stsv-Common__border-color': neutrals.neutral92,
6
+ '--stsv-Common__border-radius': '0',
7
+ '--stsv-Common__border-style': 'solid',
8
+ '--stsv-Common__border-width': '2px',
9
+ '--stsv-Common__color': neutrals.neutral100,
10
10
  // hover
11
- '--Common__background-color--hover': neutrals.neutral15,
12
- '--Common__border-color--hover': neutrals.neutral96,
13
- '--Common__color--hover': neutrals.neutral100,
11
+ '--stsv-Common__background-color--hover': neutrals.neutral15,
12
+ '--stsv-Common__border-color--hover': neutrals.neutral96,
13
+ '--stsv-Common__color--hover': neutrals.neutral100,
14
14
  // focus
15
- '--Common__background-color--focus': neutrals.neutral45,
16
- '--Common__border-color--focus': neutrals.neutral100,
17
- '--Common__color--focus': neutrals.neutral100,
15
+ '--stsv-Common__background-color--focus': neutrals.neutral45,
16
+ '--stsv-Common__border-color--focus': neutrals.neutral100,
17
+ '--stsv-Common__color--focus': neutrals.neutral100,
18
18
  // outline
19
- '--Common__outline-color': neutrals.neutral100,
20
- '--Common__outline-offset': '0',
21
- '--Common__outline-style': 'solid',
22
- '--Common__outline-width': '2px',
19
+ '--stsv-Common__outline-color': neutrals.neutral100,
20
+ '--stsv-Common__outline-offset': '0',
21
+ '--stsv-Common__outline-style': 'solid',
22
+ '--stsv-Common__outline-width': '2px',
23
23
  // disabled
24
- '--Common__background-color--disabled': neutrals.neutral45,
25
- '--Common__border-color--disabled': neutrals.neutral92,
26
- '--Common__color--disabled': neutrals.neutral92,
24
+ '--stsv-Common__background-color--disabled': neutrals.neutral45,
25
+ '--stsv-Common__border-color--disabled': neutrals.neutral92,
26
+ '--stsv-Common__color--disabled': neutrals.neutral60,
27
27
  // ----- Layer ---- //
28
- '--Layer__background-color--1': neutrals.neutral20,
29
- '--Layer__color--1': neutrals.neutral100,
30
- '--Layer__background-color--2': neutrals.neutral10,
31
- '--Layer__color--2': neutrals.neutral100,
32
- '--Layer__background-color--3': neutrals.neutral45,
33
- '--Layer__color--3': neutrals.neutral100,
28
+ '--stsv-Layer__background-color--1': neutrals.neutral20,
29
+ '--stsv-Layer__color--1': neutrals.neutral100,
30
+ '--stsv-Layer__background-color--2': neutrals.neutral10,
31
+ '--stsv-Layer__color--2': neutrals.neutral100,
32
+ '--stsv-Layer__background-color--3': neutrals.neutral45,
33
+ '--stsv-Layer__color--3': neutrals.neutral100,
34
34
  // ----- Button ----- //
35
- '--Button__background-color': neutrals.neutral45,
36
- '--Button__border-color': neutrals.neutral92,
37
- '--Button__border-radius': '8px',
38
- '--Button__border-style': 'solid',
39
- '--Button__border-width': '2px',
40
- '--Button__color': neutrals.neutral100,
35
+ '--stsv-Button__background-color': neutrals.neutral30,
36
+ '--stsv-Button__border-color': neutrals.neutral92,
37
+ '--stsv-Button__border-radius': '8px',
38
+ '--stsv-Button__border-style': 'solid',
39
+ '--stsv-Button__border-width': '2px',
40
+ '--stsv-Button__color': neutrals.neutral100,
41
41
  // hover
42
- '--Button__background-color--hover': neutrals.neutral45,
43
- '--Button__border-color--hover': neutrals.neutral96,
44
- '--Button__color--hover': neutrals.neutral100,
42
+ '--stsv-Button__background-color--hover': neutrals.neutral45,
43
+ '--stsv-Button__border-color--hover': neutrals.neutral96,
44
+ '--stsv-Button__color--hover': neutrals.neutral100,
45
45
  // active
46
- '--Button__background-color--active': neutrals.neutral60,
47
- '--Button__border-color--active': neutrals.neutral98,
48
- '--Button__color--active': neutrals.neutral98,
46
+ '--stsv-Button__background-color--active': neutrals.neutral60,
47
+ '--stsv-Button__border-color--active': neutrals.neutral98,
48
+ '--stsv-Button__color--active': neutrals.neutral98,
49
49
  // focus
50
- '--Button__background-color--focus': neutrals.neutral45,
51
- '--Button__border-color--focus': neutrals.neutral100,
52
- '--Button__color--focus': neutrals.neutral100,
53
- // disabled
54
- '--Button__background-color--disabled': neutrals.neutral75,
55
- '--Button__border-color--disabled': neutrals.neutral92,
56
- '--Button__color--disabled': neutrals.neutral92,
50
+ '--stsv-Button__background-color--focus': neutrals.neutral45,
51
+ '--stsv-Button__border-color--focus': neutrals.neutral100,
52
+ '--stsv-Button__color--focus': neutrals.neutral100,
57
53
  // ----- Input ----- //
58
- '--Input__background-color': neutrals.neutral30,
59
- '--Input__border-color': neutrals.neutral92,
60
- '--Input__border-radius': '3px',
61
- '--Input__border-style': 'solid',
62
- '--Input__border-width': '2px',
63
- '--Input__color': neutrals.neutral100,
54
+ '--stsv-Input__background-color': neutrals.neutral30,
55
+ '--stsv-Input__border-color': neutrals.neutral92,
56
+ '--stsv-Input__border-radius': '3px',
57
+ '--stsv-Input__border-style': 'solid',
58
+ '--stsv-Input__border-width': '2px',
59
+ '--stsv-Input__color': neutrals.neutral100,
64
60
  // hover
65
- '--Input__background-color--hover': neutrals.neutral15,
66
- '--Input__border-color--hover': neutrals.neutral96,
67
- '--Input__color--hover': neutrals.neutral100,
61
+ '--stsv-Input__background-color--hover': neutrals.neutral15,
62
+ '--stsv-Input__border-color--hover': neutrals.neutral96,
63
+ '--stsv-Input__color--hover': neutrals.neutral100,
68
64
  // focus
69
- '--Input__background-color--focus': neutrals.neutral15,
70
- '--Input__border-color--focus': neutrals.neutral100,
71
- '--Input__color--focus': neutrals.neutral100,
65
+ '--stsv-Input__background-color--focus': neutrals.neutral15,
66
+ '--stsv-Input__border-color--focus': neutrals.neutral100,
67
+ '--stsv-Input__color--focus': neutrals.neutral100,
72
68
  // selected
73
- '--Input__background-color--selected': neutrals.neutral60,
74
- '--Input__border-color--selected': neutrals.neutral98,
75
- '--Input__color--selected': neutrals.neutral100,
76
- // disabled
77
- '--Input__background-color--disabled': neutrals.neutral45,
78
- '--Input__border-color--disabled': neutrals.neutral85,
79
- '--Input__color--disabled': neutrals.neutral85,
69
+ '--stsv-Input__background-color--selected': neutrals.neutral60,
70
+ '--stsv-Input__border-color--selected': neutrals.neutral98,
71
+ '--stsv-Input__color--selected': neutrals.neutral100,
80
72
  // ----- Display ----- //
81
- '--Display__background-color': neutrals.neutral30,
82
- '--Display__border-color': neutrals.neutral92,
83
- '--Display__color': neutrals.neutral100,
84
- '--Display__color--subtle': neutrals.neutral96,
85
- '--Display__color--faint': neutrals.neutral45,
86
- '--Display__color--disabled': neutrals.neutral45,
87
- '--Display__color--info': '#025E73',
88
- '--Display__color--progress': '#0099DD',
89
- '--Display__color--success': '#03A64A',
90
- '--Display__color--warning': '#F2A71B',
91
- '--Display__color--error': '#A62B1F'
73
+ '--stsv-Display__background-color': neutrals.neutral30,
74
+ '--stsv-Display__border-color': neutrals.neutral92,
75
+ '--stsv-Display__color': neutrals.neutral100,
76
+ '--stsv-Display__color--subtle': neutrals.neutral96,
77
+ '--stsv-Display__color--faint': neutrals.neutral45,
78
+ '--stsv-Display__color--disabled': neutrals.neutral45,
79
+ '--stsv-Display__color--info': '#025E73',
80
+ '--stsv-Display__color--progress': '#0099DD',
81
+ '--stsv-Display__color--success': '#03A64A',
82
+ '--stsv-Display__color--warning': '#F2A71B',
83
+ '--stsv-Display__color--error': '#A62B1F'
92
84
  };
package/theme/lightTheme.js CHANGED
@@ -1,92 +1,84 @@
1
1
  import { neutrals } from './colors';
2
2
  export const lightTheme = {
3
3
  // ----- Common ---- //
4
- '--Common__background-color': neutrals.neutral100,
5
- '--Common__border-color': neutrals.neutral60,
6
- '--Common__border-radius': '0',
7
- '--Common__border-style': 'solid',
8
- '--Common__border-width': '2px',
9
- '--Common__color': neutrals.neutral15,
4
+ '--stsv-Common__background-color': neutrals.neutral100,
5
+ '--stsv-Common__border-color': neutrals.neutral60,
6
+ '--stsv-Common__border-radius': '0',
7
+ '--stsv-Common__border-style': 'solid',
8
+ '--stsv-Common__border-width': '2px',
9
+ '--stsv-Common__color': neutrals.neutral15,
10
10
  // hover
11
- '--Common__background-color--hover': neutrals.neutral100,
12
- '--Common__border-color--hover': neutrals.neutral45,
13
- '--Common__color--hover': neutrals.neutral15,
11
+ '--stsv-Common__background-color--hover': neutrals.neutral100,
12
+ '--stsv-Common__border-color--hover': neutrals.neutral45,
13
+ '--stsv-Common__color--hover': neutrals.neutral15,
14
14
  // focus
15
- '--Common__background-color--focus': neutrals.neutral96,
16
- '--Common__border-color--focus': neutrals.neutral0,
17
- '--Common__color--focus': neutrals.neutral15,
15
+ '--stsv-Common__background-color--focus': neutrals.neutral96,
16
+ '--stsv-Common__border-color--focus': neutrals.neutral0,
17
+ '--stsv-Common__color--focus': neutrals.neutral15,
18
18
  // outline
19
- '--Common__outline-color': neutrals.neutral15,
20
- '--Common__outline-offset': '0',
21
- '--Common__outline-style': 'solid',
22
- '--Common__outline-width': '2px',
19
+ '--stsv-Common__outline-color': neutrals.neutral15,
20
+ '--stsv-Common__outline-offset': '0',
21
+ '--stsv-Common__outline-style': 'solid',
22
+ '--stsv-Common__outline-width': '2px',
23
23
  // disabled
24
- '--Common__background-color--disabled': neutrals.neutral96,
25
- '--Common__border-color--disabled': neutrals.neutral75,
26
- '--Common__color--disabled': neutrals.neutral75,
24
+ '--stsv-Common__background-color--disabled': neutrals.neutral96,
25
+ '--stsv-Common__border-color--disabled': neutrals.neutral75,
26
+ '--stsv-Common__color--disabled': neutrals.neutral75,
27
27
  // ----- Layer ---- //
28
- '--Layer__background-color--1': neutrals.neutral98,
29
- '--Layer__color--1': neutrals.neutral15,
30
- '--Layer__background-color--2': neutrals.neutral96,
31
- '--Layer__color--2': neutrals.neutral15,
32
- '--Layer__background-color--3': neutrals.neutral92,
33
- '--Layer__color--3': neutrals.neutral15,
28
+ '--stsv-Layer__background-color--1': neutrals.neutral98,
29
+ '--stsv-Layer__color--1': neutrals.neutral15,
30
+ '--stsv-Layer__background-color--2': neutrals.neutral96,
31
+ '--stsv-Layer__color--2': neutrals.neutral15,
32
+ '--stsv-Layer__background-color--3': neutrals.neutral92,
33
+ '--stsv-Layer__color--3': neutrals.neutral15,
34
34
  // ----- Button ----- //
35
- '--Button__background-color': neutrals.neutral96,
36
- '--Button__border-color': neutrals.neutral60,
37
- '--Button__border-radius': '8px',
38
- '--Button__border-style': 'solid',
39
- '--Button__border-width': '2px',
40
- '--Button__color': neutrals.neutral15,
35
+ '--stsv-Button__background-color': neutrals.neutral96,
36
+ '--stsv-Button__border-color': neutrals.neutral60,
37
+ '--stsv-Button__border-radius': '8px',
38
+ '--stsv-Button__border-style': 'solid',
39
+ '--stsv-Button__border-width': '2px',
40
+ '--stsv-Button__color': neutrals.neutral15,
41
41
  // hover
42
- '--Button__background-color--hover': neutrals.neutral96,
43
- '--Button__border-color--hover': neutrals.neutral45,
44
- '--Button__color--hover': neutrals.neutral15,
42
+ '--stsv-Button__background-color--hover': neutrals.neutral96,
43
+ '--stsv-Button__border-color--hover': neutrals.neutral45,
44
+ '--stsv-Button__color--hover': neutrals.neutral15,
45
45
  // active
46
- '--Button__background-color--active': neutrals.neutral92,
47
- '--Button__border-color--active': neutrals.neutral30,
48
- '--Button__color--active': neutrals.neutral30,
46
+ '--stsv-Button__background-color--active': neutrals.neutral92,
47
+ '--stsv-Button__border-color--active': neutrals.neutral30,
48
+ '--stsv-Button__color--active': neutrals.neutral30,
49
49
  // focus
50
- '--Button__background-color--focus': neutrals.neutral96,
51
- '--Button__border-color--focus': neutrals.neutral0,
52
- '--Button__color--focus': neutrals.neutral15,
53
- // disabled
54
- '--Button__background-color--disabled': neutrals.neutral85,
55
- '--Button__border-color--disabled': neutrals.neutral60,
56
- '--Button__color--disabled': neutrals.neutral60,
50
+ '--stsv-Button__background-color--focus': neutrals.neutral96,
51
+ '--stsv-Button__border-color--focus': neutrals.neutral0,
52
+ '--stsv-Button__color--focus': neutrals.neutral15,
57
53
  // ----- Input ----- //
58
- '--Input__background-color': neutrals.neutral98,
59
- '--Input__border-color': neutrals.neutral60,
60
- '--Input__border-radius': '3px',
61
- '--Input__border-style': 'solid',
62
- '--Input__border-width': '2px',
63
- '--Input__color': neutrals.neutral15,
54
+ '--stsv-Input__background-color': neutrals.neutral98,
55
+ '--stsv-Input__border-color': neutrals.neutral60,
56
+ '--stsv-Input__border-radius': '3px',
57
+ '--stsv-Input__border-style': 'solid',
58
+ '--stsv-Input__border-width': '2px',
59
+ '--stsv-Input__color': neutrals.neutral15,
64
60
  // hover
65
- '--Input__background-color--hover': neutrals.neutral100,
66
- '--Input__border-color--hover': neutrals.neutral45,
67
- '--Input__color--hover': neutrals.neutral15,
61
+ '--stsv-Input__background-color--hover': neutrals.neutral100,
62
+ '--stsv-Input__border-color--hover': neutrals.neutral45,
63
+ '--stsv-Input__color--hover': neutrals.neutral15,
68
64
  // focus
69
- '--Input__background-color--focus': neutrals.neutral100,
70
- '--Input__border-color--focus': neutrals.neutral15,
71
- '--Input__color--focus': neutrals.neutral15,
65
+ '--stsv-Input__background-color--focus': neutrals.neutral100,
66
+ '--stsv-Input__border-color--focus': neutrals.neutral15,
67
+ '--stsv-Input__color--focus': neutrals.neutral15,
72
68
  // selected
73
- '--Input__background-color--selected': neutrals.neutral92,
74
- '--Input__border-color--selected': neutrals.neutral30,
75
- '--Input__color--selected': neutrals.neutral15,
76
- // disabled
77
- '--Input__background-color--disabled': neutrals.neutral96,
78
- '--Input__border-color--disabled': neutrals.neutral75,
79
- '--Input__color--disabled': neutrals.neutral75,
69
+ '--stsv-Input__background-color--selected': neutrals.neutral92,
70
+ '--stsv-Input__border-color--selected': neutrals.neutral30,
71
+ '--stsv-Input__color--selected': neutrals.neutral15,
80
72
  // ----- Display ----- //
81
- '--Display__background-color': neutrals.neutral92,
82
- '--Display__border-color': neutrals.neutral60,
83
- '--Display__color': neutrals.neutral15,
84
- '--Display__color--subtle': neutrals.neutral30,
85
- '--Display__color--faint': neutrals.neutral85,
86
- '--Display__color--disabled': neutrals.neutral85,
87
- '--Display__color--info': '#025E73',
88
- '--Display__color--progress': '#0099DD',
89
- '--Display__color--success': '#03A64A',
90
- '--Display__color--warning': '#F2A71B',
91
- '--Display__color--error': '#A62B1F'
73
+ '--stsv-Display__background-color': neutrals.neutral92,
74
+ '--stsv-Display__border-color': neutrals.neutral60,
75
+ '--stsv-Display__color': neutrals.neutral15,
76
+ '--stsv-Display__color--subtle': neutrals.neutral30,
77
+ '--stsv-Display__color--faint': neutrals.neutral85,
78
+ '--stsv-Display__color--disabled': neutrals.neutral85,
79
+ '--stsv-Display__color--info': '#025E73',
80
+ '--stsv-Display__color--progress': '#0099DD',
81
+ '--stsv-Display__color--success': '#03A64A',
82
+ '--stsv-Display__color--warning': '#F2A71B',
83
+ '--stsv-Display__color--error': '#A62B1F'
92
84
  };