@geoffcox/sterling-svelte 0.0.17 → 0.0.19

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 (39) hide show
  1. package/Checkbox.svelte +11 -6
  2. package/Checkbox.svelte.d.ts +2 -1
  3. package/Dropdown.svelte +241 -0
  4. package/Dropdown.svelte.d.ts +58 -0
  5. package/Field.svelte +257 -0
  6. package/Field.svelte.d.ts +63 -0
  7. package/Field.types.d.ts +1 -0
  8. package/Field.types.js +1 -0
  9. package/Input.svelte +58 -72
  10. package/Input.svelte.d.ts +8 -3
  11. package/Label.svelte +5 -6
  12. package/Label.svelte.d.ts +0 -1
  13. package/List.svelte +47 -78
  14. package/List.svelte.d.ts +0 -6
  15. package/ListItem.svelte +0 -1
  16. package/Progress.svelte +20 -44
  17. package/Progress.svelte.d.ts +1 -3
  18. package/Progress.types.d.ts +1 -1
  19. package/Radio.svelte +19 -14
  20. package/Radio.svelte.d.ts +7 -2
  21. package/Select.svelte +30 -42
  22. package/Select.svelte.d.ts +1 -5
  23. package/Slider.svelte +83 -92
  24. package/Slider.svelte.d.ts +5 -6
  25. package/Switch.svelte +30 -22
  26. package/Switch.svelte.d.ts +4 -4
  27. package/TextArea.svelte +49 -90
  28. package/TextArea.svelte.d.ts +3 -6
  29. package/Tree.svelte +12 -40
  30. package/Tree.svelte.d.ts +0 -1
  31. package/index.d.ts +5 -2
  32. package/index.js +4 -2
  33. package/package.json +4 -2
  34. package/theme/colors.d.ts +53 -1
  35. package/theme/colors.js +53 -1
  36. package/theme/darkTheme.js +62 -55
  37. package/theme/lightTheme.js +65 -58
  38. package/Portal.svelte +0 -14
  39. package/Portal.svelte.d.ts +0 -21
package/theme/lightTheme.js CHANGED
@@ -1,84 +1,91 @@
1
- import { neutrals } from './colors';
1
+ import { lightStatusColors, neutralColors } from './colors';
2
2
  export const lightTheme = {
3
- // ----- Common ---- //
4
- '--stsv-Common__background-color': neutrals.neutral100,
5
- '--stsv-Common__border-color': neutrals.neutral60,
3
+ // ----- Common (18) ---- //
4
+ '--stsv-Common__background-color': neutralColors.neutral100,
5
+ '--stsv-Common__border-color': neutralColors.neutral60,
6
6
  '--stsv-Common__border-radius': '0',
7
7
  '--stsv-Common__border-style': 'solid',
8
8
  '--stsv-Common__border-width': '2px',
9
- '--stsv-Common__color': neutrals.neutral15,
9
+ '--stsv-Common__color': neutralColors.neutral15,
10
10
  // hover
11
- '--stsv-Common__background-color--hover': neutrals.neutral100,
12
- '--stsv-Common__border-color--hover': neutrals.neutral45,
13
- '--stsv-Common__color--hover': neutrals.neutral15,
11
+ '--stsv-Common__background-color--hover': neutralColors.neutral100,
12
+ '--stsv-Common__border-color--hover': neutralColors.neutral45,
13
+ '--stsv-Common__color--hover': neutralColors.neutral15,
14
14
  // focus
15
- '--stsv-Common__background-color--focus': neutrals.neutral96,
16
- '--stsv-Common__border-color--focus': neutrals.neutral0,
17
- '--stsv-Common__color--focus': neutrals.neutral15,
15
+ '--stsv-Common__background-color--focus': neutralColors.neutral96,
16
+ '--stsv-Common__border-color--focus': neutralColors.neutral0,
17
+ '--stsv-Common__color--focus': neutralColors.neutral15,
18
18
  // outline
19
- '--stsv-Common__outline-color': neutrals.neutral15,
19
+ '--stsv-Common__outline-color': neutralColors.neutral15,
20
20
  '--stsv-Common__outline-offset': '0',
21
21
  '--stsv-Common__outline-style': 'solid',
22
22
  '--stsv-Common__outline-width': '2px',
23
23
  // disabled
24
- '--stsv-Common__background-color--disabled': neutrals.neutral96,
25
- '--stsv-Common__border-color--disabled': neutrals.neutral75,
26
- '--stsv-Common__color--disabled': neutrals.neutral75,
24
+ '--stsv-Common__background-color--disabled': neutralColors.neutral96,
25
+ '--stsv-Common__border-color--disabled': neutralColors.neutral75,
26
+ '--stsv-Common__color--disabled': neutralColors.neutral75,
27
27
  // ----- Layer ---- //
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
- // ----- Button ----- //
35
- '--stsv-Button__background-color': neutrals.neutral96,
36
- '--stsv-Button__border-color': neutrals.neutral60,
28
+ '--stsv-Layer__background-color--1': neutralColors.neutral98,
29
+ '--stsv-Layer__color--1': neutralColors.neutral15,
30
+ '--stsv-Layer__background-color--2': neutralColors.neutral96,
31
+ '--stsv-Layer__color--2': neutralColors.neutral15,
32
+ '--stsv-Layer__background-color--3': neutralColors.neutral92,
33
+ '--stsv-Layer__color--3': neutralColors.neutral15,
34
+ // ----- Button (15) ----- //
35
+ '--stsv-Button__background-color': neutralColors.neutral96,
36
+ '--stsv-Button__border-color': neutralColors.neutral60,
37
37
  '--stsv-Button__border-radius': '8px',
38
38
  '--stsv-Button__border-style': 'solid',
39
39
  '--stsv-Button__border-width': '2px',
40
- '--stsv-Button__color': neutrals.neutral15,
40
+ '--stsv-Button__color': neutralColors.neutral15,
41
41
  // hover
42
- '--stsv-Button__background-color--hover': neutrals.neutral96,
43
- '--stsv-Button__border-color--hover': neutrals.neutral45,
44
- '--stsv-Button__color--hover': neutrals.neutral15,
42
+ '--stsv-Button__background-color--hover': neutralColors.neutral96,
43
+ '--stsv-Button__border-color--hover': neutralColors.neutral45,
44
+ '--stsv-Button__color--hover': neutralColors.neutral15,
45
45
  // active
46
- '--stsv-Button__background-color--active': neutrals.neutral92,
47
- '--stsv-Button__border-color--active': neutrals.neutral30,
48
- '--stsv-Button__color--active': neutrals.neutral30,
46
+ '--stsv-Button__background-color--active': neutralColors.neutral92,
47
+ '--stsv-Button__border-color--active': neutralColors.neutral30,
48
+ '--stsv-Button__color--active': neutralColors.neutral30,
49
49
  // focus
50
- '--stsv-Button__background-color--focus': neutrals.neutral96,
51
- '--stsv-Button__border-color--focus': neutrals.neutral0,
52
- '--stsv-Button__color--focus': neutrals.neutral15,
53
- // ----- Input ----- //
54
- '--stsv-Input__background-color': neutrals.neutral98,
55
- '--stsv-Input__border-color': neutrals.neutral60,
50
+ '--stsv-Button__background-color--focus': neutralColors.neutral96,
51
+ '--stsv-Button__border-color--focus': neutralColors.neutral0,
52
+ '--stsv-Button__color--focus': neutralColors.neutral15,
53
+ // ----- Input (15) ----- //
54
+ '--stsv-Input__background-color': neutralColors.neutral98,
55
+ '--stsv-Input__border-color': neutralColors.neutral60,
56
56
  '--stsv-Input__border-radius': '3px',
57
57
  '--stsv-Input__border-style': 'solid',
58
58
  '--stsv-Input__border-width': '2px',
59
- '--stsv-Input__color': neutrals.neutral15,
59
+ '--stsv-Input__color': neutralColors.neutral15,
60
60
  // hover
61
- '--stsv-Input__background-color--hover': neutrals.neutral100,
62
- '--stsv-Input__border-color--hover': neutrals.neutral45,
63
- '--stsv-Input__color--hover': neutrals.neutral15,
61
+ '--stsv-Input__background-color--hover': neutralColors.neutral100,
62
+ '--stsv-Input__border-color--hover': neutralColors.neutral45,
63
+ '--stsv-Input__color--hover': neutralColors.neutral15,
64
64
  // focus
65
- '--stsv-Input__background-color--focus': neutrals.neutral100,
66
- '--stsv-Input__border-color--focus': neutrals.neutral15,
67
- '--stsv-Input__color--focus': neutrals.neutral15,
65
+ '--stsv-Input__background-color--focus': neutralColors.neutral100,
66
+ '--stsv-Input__border-color--focus': neutralColors.neutral15,
67
+ '--stsv-Input__color--focus': neutralColors.neutral15,
68
68
  // selected
69
- '--stsv-Input__background-color--selected': neutrals.neutral92,
70
- '--stsv-Input__border-color--selected': neutrals.neutral30,
71
- '--stsv-Input__color--selected': neutrals.neutral15,
69
+ '--stsv-Input__background-color--selected': neutralColors.neutral92,
70
+ '--stsv-Input__border-color--selected': neutralColors.neutral30,
71
+ '--stsv-Input__color--selected': neutralColors.neutral15,
72
72
  // ----- Display ----- //
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'
73
+ '--stsv-Display__background-color': neutralColors.neutral92,
74
+ '--stsv-Display__border-color': neutralColors.neutral30,
75
+ '--stsv-Display__color': neutralColors.neutral15,
76
+ '--stsv-Display__color--subtle': neutralColors.neutral45,
77
+ '--stsv-Display__color--faint': neutralColors.neutral85,
78
+ '--stsv-Display__color--disabled': neutralColors.neutral85,
79
+ '--stsv-Info__background-color': lightStatusColors.info.backgroundColor,
80
+ '--stsv-Info__border-color': lightStatusColors.info.borderColor,
81
+ '--stsv-Info__color': lightStatusColors.info.color,
82
+ '--stsv-Success__background-color': lightStatusColors.success.backgroundColor,
83
+ '--stsv-Success__border-color': lightStatusColors.success.borderColor,
84
+ '--stsv-Success__color': lightStatusColors.success.color,
85
+ '--stsv-Warning__background-color': lightStatusColors.warning.backgroundColor,
86
+ '--stsv-Warning__border-color': lightStatusColors.warning.borderColor,
87
+ '--stsv-Warning__color': lightStatusColors.warning.color,
88
+ '--stsv-Error__background-color': lightStatusColors.error.backgroundColor,
89
+ '--stsv-Error__border-color': lightStatusColors.error.borderColor,
90
+ '--stsv-Error__color': lightStatusColors.error.color
84
91
  };
package/Portal.svelte DELETED
@@ -1,14 +0,0 @@
1
- <script>import { portal } from "./actions/portal";
2
- export let target = document.body;
3
- </script>
4
-
5
- <div class="portal" use:portal={{ target }}>
6
- <slot {...$$restProps} />
7
- </div>
8
-
9
- <style>
10
- .portal {
11
- position: relative;
12
- overflow: visible;
13
- }
14
- </style>
package/Portal.svelte.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- [x: string]: any;
5
- target?: HTMLElement | undefined;
6
- };
7
- events: {
8
- [evt: string]: CustomEvent<any>;
9
- };
10
- slots: {
11
- default: {
12
- [x: string]: any;
13
- };
14
- };
15
- };
16
- export type PortalProps = typeof __propDef.props;
17
- export type PortalEvents = typeof __propDef.events;
18
- export type PortalSlots = typeof __propDef.slots;
19
- export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
20
- }
21
- export {};