sveltacular 0.0.12 → 0.0.13

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 (13) hide show
  1. package/dist/forms/button/button.svelte +46 -39
  2. package/dist/forms/check-box/check-box.svelte +50 -22
  3. package/dist/forms/date-box/date-box.svelte +7 -4
  4. package/dist/forms/file-box/file-box.svelte +5 -5
  5. package/dist/forms/list-box/list-box.svelte +5 -5
  6. package/dist/forms/number-box/number-box.svelte +6 -6
  7. package/dist/forms/radio-group/radio-box.svelte +46 -9
  8. package/dist/forms/switch-box/switch-box.svelte +6 -3
  9. package/dist/forms/text-area/text-area.svelte +6 -3
  10. package/dist/forms/text-box/text-box.svelte +6 -6
  11. package/dist/navigation/side-bar/side-bar.svelte +6 -4
  12. package/dist/types/form.d.ts +1 -1
  13. package/package.json +1 -1
package/dist/forms/button/button.svelte CHANGED
@@ -26,8 +26,8 @@ const click = () => {
26
26
  cursor: pointer;
27
27
  margin-top: 0.5rem;
28
28
  margin-bottom: 0.5rem;
29
- background-color: #5c5c5c;
30
- border: 1px solid #b7b7b7;
29
+ border-width: 1px;
30
+ border-style: solid;
31
31
  border-radius: 0.25rem;
32
32
  color: #e2e2e2;
33
33
  cursor: pointer;
@@ -38,7 +38,7 @@ const click = () => {
38
38
  padding: 0.5rem 1rem;
39
39
  text-align: center;
40
40
  text-decoration: none;
41
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
41
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
42
42
  user-select: none;
43
43
  white-space: nowrap;
44
44
  }
@@ -75,59 +75,66 @@ button:hover {
75
75
  background-color: #4c4c4c;
76
76
  }
77
77
  button.primary {
78
- background-color: #1e88e5;
79
- border-color: #1e88e5;
80
- color: #fff;
78
+ background-color: var(--button-primary-bg, #1e88e5);
79
+ border-color: var(--button-primary-border, #1e88e5);
80
+ color: var(--button-primary-fg, #fff);
81
81
  }
82
82
  button.primary:hover {
83
- background-color: #1976d2;
84
- border-color: #1976d2;
83
+ background-color: var(--button-primary-hover-bg, #1976d2);
84
+ color: var(--button-primary-hover-fg, #fff);
85
85
  }
86
- button.link, button.ghost {
87
- background-color: transparent;
88
- border-color: transparent;
89
- color: var(--sv-color-link);
90
- text-decoration: underline;
86
+ button.secondary {
87
+ background-color: var(--button-secondary-bg, #e2e2e2);
88
+ border-color: var(--button-secondary-border, #e2e2e2);
89
+ color: var(--button-secondary-fg, #000);
91
90
  }
92
- button.link:hover, button.ghost:hover {
91
+ button.secondary:hover {
92
+ background-color: var(--button-secondary-hover-bg, #d5d5d5);
93
+ color: var(--button-secondary-hover-fg, #000);
94
+ }
95
+ button.ghost {
93
96
  background-color: transparent;
94
97
  border-color: transparent;
95
- color: var(--sv-color-link-hover);
98
+ color: var(--base-fg, #ccc);
99
+ text-decoration: none;
100
+ }
101
+ button.ghost:hover {
102
+ background-color: var(--button-ghost-hover-bg, #e0e0e0);
103
+ color: var(--button-ghost-hover-fg, #1e88e5);
96
104
  }
97
105
  button.positive {
98
- background-color: #43a047;
99
- border-color: #43a047;
100
- color: #fff;
106
+ background-color: var(--button-positive-bg, #43a047);
107
+ border-color: var(--button-positive-border, #43a047);
108
+ color: var(--button-positive-fg, #fff);
101
109
  }
102
110
  button.positive:hover {
103
- background-color: #388e3c;
104
- border-color: #388e3c;
111
+ background-color: var(--button-positive-hover-bg, #388e3c);
112
+ color: var(--button-positive-hover-fg, #388e3c);
105
113
  }
106
114
  button.danger {
107
- background-color: #8d0200;
108
- border-color: #8d0200;
109
- color: #fff;
115
+ background-color: var(--button-danger-bg, #e53935);
116
+ border-color: var(--button-danger-border, #e53935);
117
+ color: var(--button-danger-fg, #fff);
110
118
  }
111
119
  button.danger:hover {
112
- background-color: #c62828;
113
- border-color: #c62828;
120
+ background-color: var(--button-danger-hover-bg, #c62828);
121
+ color: var(--button-danger-hover-fg, #fff);
114
122
  }
115
- button.negative {
116
- background-color: #e53935;
117
- border-color: #e53935;
118
- color: #fff;
123
+ button.outline {
124
+ background-color: transparent;
125
+ border-color: var(--button-outline-border, #e2e2e2);
126
+ color: var(--button-outline-fg, #e2e2e2);
119
127
  }
120
- button.negative:hover {
121
- background-color: #c62828;
122
- border-color: #c62828;
128
+ button.outline:hover {
129
+ background-color: var(--button-outline-hover-bg, #e2e2e2);
130
+ color: var(--button-outline-hover-fg, #000);
123
131
  }
124
- button.tertiary {
132
+ button.link {
125
133
  background-color: transparent;
126
- border-color: var(--sv-color-fg);
127
- color: var(--sv-color-fg);
134
+ border-color: transparent;
135
+ color: var(--base-link-fg, #1e88e5);
136
+ text-decoration: underline;
128
137
  }
129
- button.tertiary:hover {
130
- background-color: var(--sv-color-fg);
131
- color: var(--sv-color-bg);
132
- border-color: var(--sv-color-bg);
138
+ button.link:hover {
139
+ color: var(--base-link-hover-fg, #1e88e5);
133
140
  }</style>
package/dist/forms/check-box/check-box.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>import { uniqueId } from "../../helpers/unique-id.js";
2
+ import CheckIcon from "../../icons/check-icon.svelte";
2
3
  import { createEventDispatcher } from "svelte";
3
4
  export let value = "";
4
5
  export let isChecked = false;
@@ -13,7 +14,7 @@ const onChecked = (event) => {
13
14
  };
14
15
  </script>
15
16
 
16
- <div>
17
+ <label>
17
18
  <input
18
19
  type="checkbox"
19
20
  {id}
@@ -23,34 +24,61 @@ const onChecked = (event) => {
23
24
  bind:checked={isChecked}
24
25
  on:change={onChecked}
25
26
  />
27
+ <span class="checkbox">
28
+ <span class="checkmark"><CheckIcon /></span>
29
+ </span>
26
30
  {#if $$slots.default}
27
- <label for={id}>
31
+ <div class="text">
28
32
  <slot />
29
- </label>
33
+ </div>
30
34
  {/if}
31
- </div>
35
+ </label>
32
36
 
33
- <style>div label {
34
- display: inline-block;
35
- vertical-align: middle;
36
- margin-left: 0.5em;
37
+ <style>label {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: flex-start;
37
41
  cursor: pointer;
42
+ }
43
+ label .text {
44
+ display: block;
45
+ margin-left: 0.5em;
38
46
  font-size: 1rem;
39
47
  line-height: 2rem;
40
48
  }
41
- div input {
42
- display: inline-block;
43
- vertical-align: middle;
44
- margin: 0;
45
- padding: 0;
46
- width: 1em;
47
- height: 1em;
48
- border: 0.1em solid #000;
49
- border-radius: 0.2em;
50
- background-color: #fff;
51
- cursor: pointer;
52
- transition: background-color 0.3s ease-in-out;
49
+ label .checkbox {
50
+ position: relative;
51
+ display: block;
52
+ width: 1rem;
53
+ height: 1rem;
54
+ border: 1px solid var(--form-input-border, black);
55
+ background-color: var(--form-input-bg, white);
56
+ color: var(--form-input-fg, black);
57
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
58
+ user-select: none;
59
+ }
60
+ label .checkbox .checkmark {
61
+ display: block;
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ width: 0;
66
+ height: 0;
67
+ background-color: var(--form-input-checked-bg, #3182ce);
68
+ color: var(--form-input-checked-fg, white);
69
+ fill: var(--form-input-checked-bg, #3182ce);
70
+ stroke: var(--form-input-checked-fg, white);
71
+ transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
72
+ }
73
+ label input {
74
+ width: 0;
75
+ height: 0;
76
+ }
77
+ label input:checked + .checkbox {
78
+ background-color: var(--form-input-bg, white);
79
+ border-color: var(--form-input-border, black);
53
80
  }
54
- div input:checked {
55
- background-color: #000;
81
+ label input:checked + .checkbox .checkmark {
82
+ width: 100%;
83
+ height: 100%;
56
84
  }</style>
package/dist/forms/date-box/date-box.svelte CHANGED
@@ -43,16 +43,19 @@ $:
43
43
  width: 100%;
44
44
  padding: 0.5rem 1rem;
45
45
  border-radius: 0.25rem;
46
- border: 1px solid #b7b7b7;
47
- background-color: #fff;
48
- color: #5c5c5c;
46
+ border: 1px solid var(--form-input-border, black);
47
+ background-color: var(--form-input-bg, white);
48
+ color: var(--form-input-fg, black);
49
49
  font-size: 0.875rem;
50
50
  font-weight: 500;
51
51
  line-height: 1.25rem;
52
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
52
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
53
53
  user-select: none;
54
54
  white-space: nowrap;
55
55
  }
56
+ input::placeholder {
57
+ color: var(--form-input-placeholder, #a0aec0);
58
+ }
56
59
 
57
60
  div {
58
61
  display: block;
package/dist/forms/file-box/file-box.svelte CHANGED
@@ -37,17 +37,17 @@ export let capture = void 0;
37
37
  width: 100%;
38
38
  padding: 0.5rem 1rem;
39
39
  border-radius: 0.25rem;
40
- border: 1px solid #b7b7b7;
41
- background-color: #fff;
42
- color: #5c5c5c;
40
+ border: 1px solid var(--form-input-border, black);
41
+ background-color: var(--form-input-bg, white);
42
+ color: var(--form-input-fg, black);
43
43
  font-size: 0.875rem;
44
44
  font-weight: 500;
45
45
  line-height: 1.25rem;
46
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
46
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
47
47
  user-select: none;
48
48
  white-space: nowrap;
49
49
  }
50
50
  input::placeholder {
51
- color: #b7b7b7;
51
+ color: var(--form-input-placeholder, #888);
52
52
  font-style: italic;
53
53
  }</style>
package/dist/forms/list-box/list-box.svelte CHANGED
@@ -106,13 +106,13 @@ div input {
106
106
  width: 100%;
107
107
  padding: 0.5rem 1rem;
108
108
  border-radius: 0.25rem;
109
- border: 1px solid #b7b7b7;
110
- background-color: #fff;
111
- color: #5c5c5c;
109
+ border: 1px solid var(--form-input-border, black);
110
+ background-color: var(--form-input-bg, white);
111
+ color: var(--form-input-fg, black);
112
112
  font-size: 0.875rem;
113
113
  font-weight: 500;
114
114
  line-height: 1.25rem;
115
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
115
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
116
116
  user-select: none;
117
117
  white-space: nowrap;
118
118
  }
@@ -129,7 +129,7 @@ div button.icon {
129
129
  height: 1rem;
130
130
  transition: transform 0.3s linear;
131
131
  z-index: 2;
132
- color: black;
132
+ color: var(--form-input-fg, black);
133
133
  transform: rotate(180deg);
134
134
  }
135
135
  div.open .icon {
package/dist/forms/number-box/number-box.svelte CHANGED
@@ -51,7 +51,7 @@ div .symbol {
51
51
  position: absolute;
52
52
  top: 0.32rem;
53
53
  left: 0.5rem;
54
- color: #000;
54
+ color: var(--form-input-fg, black);
55
55
  font-size: 1.125rem;
56
56
  line-height: 1.75rem;
57
57
  }
@@ -59,7 +59,7 @@ div .units {
59
59
  position: absolute;
60
60
  top: 0.32rem;
61
61
  right: 2.5rem;
62
- color: #888;
62
+ color: var(--form-input-fg, black);
63
63
  font-size: 1rem;
64
64
  line-height: 1.75rem;
65
65
  text-align: right;
@@ -68,13 +68,13 @@ div input {
68
68
  width: 100%;
69
69
  padding: 0.5rem 1rem;
70
70
  border-radius: 0.25rem;
71
- border: 1px solid #b7b7b7;
72
- background-color: #fff;
73
- color: #5c5c5c;
71
+ border: 1px solid var(--form-input-border, black);
72
+ background-color: var(--form-input-bg, white);
73
+ color: var(--form-input-fg, black);
74
74
  font-size: 0.875rem;
75
75
  font-weight: 500;
76
76
  line-height: 1.25rem;
77
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
77
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
78
78
  user-select: none;
79
79
  white-space: nowrap;
80
80
  }
package/dist/forms/radio-group/radio-box.svelte CHANGED
@@ -1,29 +1,66 @@
1
1
  <script>import { uniqueId } from "../../helpers/unique-id.js";
2
+ import CheckIcon from "../../icons/check-icon.svelte";
2
3
  export let value = void 0;
3
4
  export let group = void 0;
4
5
  export let disabled = false;
5
6
  const id = uniqueId();
6
7
  </script>
7
8
 
8
- <div>
9
+ <label>
9
10
  <input type="radio" bind:group {value} {disabled} {id} />
11
+ <span class="checkbox">
12
+ <span class="checkmark"><CheckIcon /></span>
13
+ </span>
10
14
  {#if $$slots.default}
11
- <label for={id}>
15
+ <div class="text">
12
16
  <slot />
13
- </label>
17
+ </div>
14
18
  {/if}
15
- </div>
19
+ </label>
16
20
 
17
- <style>div {
21
+ <style>label {
18
22
  display: flex;
19
23
  align-items: center;
20
24
  gap: 0.5rem;
21
25
  line-height: 2rem;
22
26
  font-size: 1rem;
23
- }
24
- div input {
25
27
  cursor: pointer;
26
28
  }
27
- div label {
28
- cursor: pointer;
29
+ label .checkbox {
30
+ position: relative;
31
+ width: 1.2rem;
32
+ height: 1.2rem;
33
+ border-radius: 0.6rem;
34
+ border: 1px solid var(--form-input-border, black);
35
+ background-color: var(--form-input-bg, white);
36
+ color: var(--form-input-fg, black);
37
+ font-size: 0.875rem;
38
+ font-weight: 500;
39
+ line-height: 1.25rem;
40
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
41
+ user-select: none;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ padding-top: 0.1rem;
46
+ }
47
+ label .checkbox .checkmark {
48
+ display: block;
49
+ width: 0;
50
+ height: 0;
51
+ color: var(--form-input-checked-fg, white);
52
+ fill: var(--form-input-checked-bg, #3182ce);
53
+ stroke: var(--form-input-checked-fg, white);
54
+ transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
55
+ }
56
+ label input {
57
+ width: 0;
58
+ height: 0;
59
+ }
60
+ label input:checked + .checkbox {
61
+ background-color: var(--form-input-checked-bg, #3182ce);
62
+ }
63
+ label input:checked + .checkbox .checkmark {
64
+ width: 100%;
65
+ height: 100%;
29
66
  }</style>
package/dist/forms/switch-box/switch-box.svelte CHANGED
@@ -35,7 +35,7 @@ label input {
35
35
  height: 0;
36
36
  }
37
37
  label .switch {
38
- background-color: var(--unchecked-color);
38
+ background-color: var(--form-input-bg, white);
39
39
  position: relative;
40
40
  cursor: pointer;
41
41
  transition: background-color 0.2s ease-in-out;
@@ -45,10 +45,13 @@ label .slider {
45
45
  border-radius: 50%;
46
46
  position: absolute;
47
47
  transition: left 0.2s ease-in-out;
48
- background: #fff;
48
+ background-color: var(--form-input-fg, black);
49
49
  }
50
50
  label.checked .switch {
51
- background-color: var(--checked-color);
51
+ background-color: var(--form-input-checked-bg, #3182ce);
52
+ }
53
+ label.checked .slider {
54
+ background-color: var(--form-input-checked-fg, white);
52
55
  }
53
56
  label.xl .switch {
54
57
  width: 4rem;
package/dist/forms/text-area/text-area.svelte CHANGED
@@ -22,13 +22,16 @@ export let readonly = false;
22
22
  width: 100%;
23
23
  padding: 0.5rem 1rem;
24
24
  border-radius: 0.25rem;
25
- border: 1px solid #b7b7b7;
26
- background-color: #fff;
27
- color: #5c5c5c;
25
+ border: 1px solid var(--form-input-border, black);
26
+ background-color: var(--form-input-bg, white);
27
+ color: var(--form-input-fg, black);
28
28
  font-size: 0.875rem;
29
29
  font-weight: 500;
30
30
  line-height: 1.25rem;
31
31
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
32
32
  user-select: none;
33
33
  white-space: nowrap;
34
+ }
35
+ textarea::placeholder {
36
+ color: var(--form-input-placeholder, #a0aec0);
34
37
  }</style>
package/dist/forms/text-box/text-box.svelte CHANGED
@@ -49,25 +49,25 @@ div input {
49
49
  width: 100%;
50
50
  padding: 0.5rem 1rem;
51
51
  border-radius: 0.25rem;
52
- border: 1px solid #b7b7b7;
53
- background-color: #fff;
54
- color: #5c5c5c;
52
+ border: 1px solid var(--form-input-border, black);
53
+ background-color: var(--form-input-bg, white);
54
+ color: var(--form-input-fg, black);
55
55
  font-size: 0.875rem;
56
56
  font-weight: 500;
57
57
  line-height: 1.25rem;
58
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
58
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
59
59
  user-select: none;
60
60
  white-space: nowrap;
61
61
  }
62
62
  div input::placeholder {
63
- color: #b7b7b7;
63
+ color: var(--form-input-placeholder, #888);
64
64
  font-style: italic;
65
65
  }
66
66
  div .units {
67
67
  position: absolute;
68
68
  top: 0.32rem;
69
69
  right: 1rem;
70
- color: #888;
70
+ color: var(--form-input-fg, black);
71
71
  font-size: 1rem;
72
72
  line-height: 1.75rem;
73
73
  text-align: right;
package/dist/navigation/side-bar/side-bar.svelte CHANGED
@@ -11,19 +11,21 @@ export let open = false;
11
11
 
12
12
  <style>div aside {
13
13
  width: 300px;
14
- padding: 0 1rem;
15
- margin: 0 auto;
14
+ padding: 0;
15
+ margin: 0;
16
16
  box-sizing: border-box;
17
17
  position: fixed;
18
18
  top: 0;
19
19
  left: -300px;
20
20
  bottom: 0;
21
- background: #fff;
22
- color: #000;
21
+ background: var(--nav-bg, white);
22
+ color: var(--nav-fg, black);
23
23
  z-index: 9999;
24
24
  transition: left 0.3s ease-in-out;
25
25
  border-right: solid 1px #e5e5e5;
26
26
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
27
+ display: flex;
28
+ flex-direction: column;
27
29
  }
28
30
  div.open {
29
31
  display: block;
package/dist/types/form.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type FormFieldSizeOptions = 'sm' | 'md' | 'lg' | 'xl' | 'full';
2
- export type ButtonStyle = 'positive' | 'primary' | 'secondary' | 'tertiary' | 'negative' | 'danger' | 'ghost' | 'link';
2
+ export type ButtonStyle = 'primary' | 'secondary' | 'positive' | 'negative' | 'danger' | 'ghost' | 'outline' | 'link';
3
3
  export type DropdownOption = {
4
4
  value: string;
5
5
  name: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltacular",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "scripts": {
5
5
  "watch": "npm run dev -- --open",
6
6
  "dev": "vite dev",