@celar-ui/svelte 2.0.0 → 2.0.1

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 (19) hide show
  1. package/dist/buttons/TextBaseButton.svelte +2 -1
  2. package/dist/buttons/styles/expanded_text_button.css +1 -1
  3. package/dist/containment/styles/container.css +2 -2
  4. package/dist/inputs/Checkbox.svelte +5 -3
  5. package/dist/inputs/ColorInput.svelte +1 -3
  6. package/dist/inputs/RadioItem.svelte +1 -3
  7. package/dist/inputs/Slider.svelte +1 -2
  8. package/dist/inputs/Switch.svelte +1 -3
  9. package/dist/inputs/TagInput.svelte +0 -5
  10. package/dist/inputs/TextInput.svelte +0 -11
  11. package/dist/misc/DuckSpinner.svelte +33 -33
  12. package/dist/misc/LinearProgressIndicator.svelte +9 -9
  13. package/dist/navigation/AdaptiveSidebar.svelte +1 -1
  14. package/dist/navigation/AppBar.svelte +1 -1
  15. package/dist/navigation/NavigationBar.svelte +0 -1
  16. package/dist/overlay/styles/command.css +1 -2
  17. package/dist/overlay/styles/dialog.css +4 -3
  18. package/package.json +5 -7
  19. package/src/styles/theme.css +84 -84
package/dist/buttons/TextBaseButton.svelte CHANGED
@@ -13,6 +13,7 @@
13
13
  children,
14
14
  loading,
15
15
  icon,
16
+ style,
16
17
  active = false,
17
18
  gap = 'calc(var(--spacing) * 2)',
18
19
  ...rest
@@ -20,7 +21,7 @@
20
21
  let visibility = $derived(loading ? 'hidden' : 'initial');
21
22
  </script>
22
23
 
23
- <BaseButton {...rest} {loading} {active} data-button-base-text style="--body-gap: {gap}">
24
+ <BaseButton {...rest} {loading} {active} data-button-base-text style="--body-gap: {gap}; {style}">
24
25
  {#if icon}
25
26
  <span class="button-icon" style:visibility>
26
27
  {@render icon()}
package/dist/buttons/styles/expanded_text_button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @reference './button_utils.css';
2
2
 
3
- @layer component {
3
+ @layer components {
4
4
  [data-button-text-expanded] {
5
5
  @apply button-text-base;
6
6
  background-color: transparent;
package/dist/containment/styles/container.css CHANGED
@@ -12,11 +12,11 @@
12
12
  }
13
13
 
14
14
  &[data-sm='true'] {
15
- max-width: var(--breakpoint--sm);
15
+ max-width: var(--breakpoint-sm);
16
16
  }
17
17
 
18
18
  &[data-md='true'] {
19
- max-width: var(--breakpoint--md);
19
+ max-width: var(--breakpoint-md);
20
20
  }
21
21
 
22
22
  &[data-fluid='true'] {
package/dist/inputs/Checkbox.svelte CHANGED
@@ -67,9 +67,7 @@
67
67
  padding: --spacing(1) 0;
68
68
  padding-right: --spacing(4);
69
69
  width: 100%;
70
- -webkit-user-select: none;
71
- -moz-user-select: none;
72
- user-select: none;
70
+ user-select: none;
73
71
 
74
72
  [data-checkbox-icon] {
75
73
  display: flex;
@@ -97,5 +95,9 @@
97
95
  :global([data-checkbox-root]:not([data-state='unchecked'])) {
98
96
  background-color: var(--color-primary);
99
97
  }
98
+
99
+ :global([data-checkbox-root]:focus-visible) {
100
+ @apply outline-primary outline outline-solid;
101
+ }
100
102
  }
101
103
  </style>
package/dist/inputs/ColorInput.svelte CHANGED
@@ -36,9 +36,7 @@
36
36
  position: absolute;
37
37
  top: 0;
38
38
  right: 0;
39
- -webkit-appearance: none;
40
- -moz-appearance: none;
41
- appearance: none;
39
+ appearance: none;
42
40
  outline: none;
43
41
  border: none;
44
42
  border-radius: var(--radius-2xl);
package/dist/inputs/RadioItem.svelte CHANGED
@@ -28,9 +28,7 @@
28
28
  padding: --spacing(1) 0;
29
29
  padding-right: --spacing(4);
30
30
  width: 100%;
31
- -webkit-user-select: none;
32
- -moz-user-select: none;
33
- user-select: none;
31
+ user-select: none;
34
32
 
35
33
  [data-radio-item-icon] {
36
34
  width: --spacing(14);
package/dist/inputs/Slider.svelte CHANGED
@@ -56,8 +56,7 @@
56
56
 
57
57
  &,
58
58
  &::-webkit-slider-thumb {
59
- -webkit-appearance: none;
60
- appearance: none;
59
+ appearance: none;
61
60
  }
62
61
 
63
62
  &::-webkit-slider-runnable-track {
package/dist/inputs/Switch.svelte CHANGED
@@ -29,9 +29,7 @@
29
29
  justify-content: flex-start;
30
30
  align-items: center;
31
31
  width: 100%;
32
- -webkit-user-select: none;
33
- -moz-user-select: none;
34
- user-select: none;
32
+ user-select: none;
35
33
  }
36
34
 
37
35
  :global([data-switch-root]) {
package/dist/inputs/TagInput.svelte CHANGED
@@ -137,11 +137,6 @@
137
137
  font-family: inherit;
138
138
  color: inherit;
139
139
 
140
- &::-moz-placeholder {
141
- @apply text-onBackground/70;
142
- opacity: 1;
143
- }
144
-
145
140
  &::placeholder {
146
141
  @apply text-onBackground/70;
147
142
  opacity: 1;
package/dist/inputs/TextInput.svelte CHANGED
@@ -52,23 +52,12 @@
52
52
  }
53
53
  }
54
54
 
55
- &:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
56
- transform: translateY(50%);
57
- visibility: hidden;
58
- opacity: 0;
59
- }
60
-
61
55
  &:is(:placeholder-shown) ~ [data-text-input-placeholder] {
62
56
  transform: translateY(50%);
63
57
  visibility: hidden;
64
58
  opacity: 0;
65
59
  }
66
60
 
67
- &::-moz-placeholder {
68
- @apply text-onBackground/70;
69
- opacity: 1;
70
- }
71
-
72
61
  &::placeholder {
73
62
  @apply text-onBackground/70;
74
63
  opacity: 1;
package/dist/misc/DuckSpinner.svelte CHANGED
@@ -149,7 +149,7 @@
149
149
  stroke-linecap: round;
150
150
  stroke-linejoin: round;
151
151
  stroke-dasharray: none;
152
- transition-duration: var(--tw-duration, 150ms);
152
+ transition-duration: var(--default-transition-duration, 150ms);
153
153
  transition-property: stroke;
154
154
  }
155
155
 
@@ -171,15 +171,6 @@
171
171
  opacity: 0.32;
172
172
  animation-direction: reverse;
173
173
  }
174
-
175
- @keyframes spin {
176
- from {
177
- rotate: 0;
178
- }
179
- to {
180
- rotate: 359deg;
181
- }
182
- }
183
174
  }
184
175
 
185
176
  .duck {
@@ -190,18 +181,6 @@
190
181
  animation-iteration-count: infinite;
191
182
  animation-name: slay;
192
183
 
193
- @keyframes slay {
194
- 0% {
195
- rotate: -24deg;
196
- }
197
- 50% {
198
- rotate: 24deg;
199
- }
200
- 100% {
201
- rotate: -24deg;
202
- }
203
- }
204
-
205
184
  .body {
206
185
  stroke-width: 1.5;
207
186
  }
@@ -210,22 +189,43 @@
210
189
  stroke-width: 1;
211
190
  }
212
191
  }
213
- }
214
192
 
215
- [data-thin='true'] {
216
- .line {
217
- stroke-width: 0.5;
218
- }
219
-
220
- .duck {
221
- .body {
222
- stroke-width: 1;
193
+ &[data-thin='true'] {
194
+ .line {
195
+ stroke-width: 0.5;
223
196
  }
224
197
 
225
- .eye {
226
- stroke-width: 0.8;
198
+ .duck {
199
+ .body {
200
+ stroke-width: 1;
201
+ }
202
+
203
+ .eye {
204
+ stroke-width: 0.8;
205
+ }
227
206
  }
228
207
  }
229
208
  }
209
+
210
+ @keyframes slay {
211
+ 0% {
212
+ rotate: -24deg;
213
+ }
214
+ 50% {
215
+ rotate: 24deg;
216
+ }
217
+ 100% {
218
+ rotate: -24deg;
219
+ }
220
+ }
221
+
222
+ @keyframes spin {
223
+ from {
224
+ rotate: 0;
225
+ }
226
+ to {
227
+ rotate: 359deg;
228
+ }
229
+ }
230
230
  }
231
231
  </style>
package/dist/misc/LinearProgressIndicator.svelte CHANGED
@@ -31,16 +31,16 @@
31
31
  width: 0;
32
32
  height: 100%;
33
33
  }
34
+ }
34
35
 
35
- @keyframes linear-progress-animation {
36
- 0% {
37
- left: -8%;
38
- width: 8%;
39
- }
40
- 100% {
41
- left: 100%;
42
- width: 100%;
43
- }
36
+ @keyframes linear-progress-animation {
37
+ 0% {
38
+ left: -8%;
39
+ width: 8%;
40
+ }
41
+ 100% {
42
+ left: 100%;
43
+ width: 100%;
44
44
  }
45
45
  }
46
46
  }
package/dist/navigation/AdaptiveSidebar.svelte CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  @layer components {
53
53
  [data-adaptive-sidebar-backdrop] {
54
- @apply bg-onBackground/20 blur-md transition-all;
54
+ @apply bg-onBackground/20 backdrop-blur transition-all;
55
55
  position: fixed;
56
56
  top: 0;
57
57
  left: 0;
package/dist/navigation/AppBar.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  [data-app-bar-left] {
46
46
  display: flex;
47
47
  align-items: center;
48
- gap: var(--gap--half);
48
+ gap: --spacing(2);
49
49
  overflow: hidden;
50
50
 
51
51
  [data-app-bar-title] {
package/dist/navigation/NavigationBar.svelte CHANGED
@@ -29,7 +29,6 @@
29
29
  border-top-left-radius: 0;
30
30
  border-bottom-right-radius: var(--radius);
31
31
  padding: 0 --spacing(2);
32
- width: -moz-min-content;
33
32
  width: min-content;
34
33
  height: 100%;
35
34
  }
package/dist/overlay/styles/command.css CHANGED
@@ -8,7 +8,7 @@
8
8
  max-height: calc(75dvh - --spacing(8));
9
9
 
10
10
  [data-command-input] {
11
- @apply border-onBackground/20 border border-solid;
11
+ @apply border-onBackground/20 border border-solid transition-colors;
12
12
  background-color: var(--color-background);
13
13
  border-radius: var(--radius-lg);
14
14
  padding: --spacing(2);
@@ -17,7 +17,6 @@
17
17
  line-height: 1.5;
18
18
  color: var(--color-onSurface);
19
19
  outline: none;
20
- transition: border-color var(--tw-duration, 150ms) ease-in-out;
21
20
  width: 100%;
22
21
  box-sizing: border-box;
23
22
 
package/dist/overlay/styles/dialog.css CHANGED
@@ -12,7 +12,8 @@
12
12
  }
13
13
 
14
14
  [data-celar-dialog-content] {
15
- box-sizing: border-box shadow-xl;
15
+ @apply shadow-xl;
16
+ box-sizing: border-box;
16
17
  position: fixed;
17
18
  top: calc(50dvh - --spacing(4));
18
19
  left: calc(50lvw - --spacing(4));
@@ -29,10 +30,10 @@
29
30
  max-width: min(calc(100% - --spacing(8)), var(--breakpoint-xs));
30
31
  }
31
32
  &[data-sm='true'] {
32
- max-width: min(calc(100% - --spacing(8)), var(--breakpoint--sm));
33
+ max-width: min(calc(100% - --spacing(8)), var(--breakpoint-sm));
33
34
  }
34
35
  &[data-md='true'] {
35
- max-width: min(calc(100% - --spacing(8)), var(--breakpoint--md));
36
+ max-width: min(calc(100% - --spacing(8)), var(--breakpoint-md));
36
37
  }
37
38
  &[data-fluid='true'] {
38
39
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@celar-ui/svelte",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "cuikho210",
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "scripts": {
15
15
  "dev": "vite dev",
16
- "build": "vite build && npm run prepack",
16
+ "build": "bun run gen-theme && vite build && bun run prepack",
17
17
  "preview": "vite preview",
18
18
  "prepare": "svelte-kit sync || echo ''",
19
19
  "prepack": "svelte-kit sync && svelte-package && publint",
@@ -41,9 +41,9 @@
41
41
  "types": "./dist/index.d.ts",
42
42
  "svelte": "./dist/index.js"
43
43
  },
44
- "./src/styles/*.scss": {
45
- "import": "./src/styles/*.scss",
46
- "require": "./src/styles/*.scss"
44
+ "./src/styles/*.css": {
45
+ "import": "./src/styles/*.css",
46
+ "require": "./src/styles/*.css"
47
47
  }
48
48
  },
49
49
  "peerDependencies": {
@@ -59,7 +59,6 @@
59
59
  "@sveltejs/package": "^2.5.7",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.1.1",
61
61
  "@tailwindcss/vite": "^4.2.2",
62
- "autoprefixer": "^10.4.27",
63
62
  "bits-ui": "^2.17.3",
64
63
  "csstype": "^3.2.3",
65
64
  "eslint": "^9.39.4",
@@ -71,7 +70,6 @@
71
70
  "prettier-plugin-svelte": "^3.5.1",
72
71
  "prettier-plugin-tailwindcss": "^0.7.2",
73
72
  "publint": "^0.3.18",
74
- "sass": "^1.99.0",
75
73
  "svelte": "^5.55.3",
76
74
  "svelte-check": "^4.4.6",
77
75
  "tailwindcss": "^4.2.2",
package/src/styles/theme.css CHANGED
@@ -4,91 +4,91 @@
4
4
  @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
5
5
 
6
6
  @theme {
7
- --color-primary: #9c4235;
8
- --color-onPrimary: #ffffff;
9
- --color-primaryContainer: #ffdad4;
10
- --color-onPrimaryContainer: #410000;
11
- --color-secondary: #775651;
12
- --color-onSecondary: #ffffff;
13
- --color-secondaryContainer: #ffdad4;
14
- --color-onSecondaryContainer: #2c1512;
15
- --color-tertiary: #705c2e;
16
- --color-onTertiary: #ffffff;
17
- --color-tertiaryContainer: #fbdfa6;
18
- --color-onTertiaryContainer: #251a00;
19
- --color-error: #ba1a1a;
20
- --color-onError: #ffffff;
21
- --color-errorContainer: #ffdad6;
22
- --color-onErrorContainer: #410002;
23
- --color-background: #fffbff;
24
- --color-onBackground: #201a19;
25
- --color-surface: #fff8f6;
26
- --color-onSurface: #201a19;
27
- --color-surfaceVariant: #f5ddda;
28
- --color-onSurfaceVariant: #534341;
29
- --color-outline: #857370;
30
- --color-outlineVariant: #d8c2be;
31
- --color-shadow: #000000;
32
- --color-scrim: #000000;
33
- --color-inverseSurface: #362f2e;
34
- --color-inverseOnSurface: #fbeeec;
35
- --color-inversePrimary: #ffb4a8;
36
- --color-surfaceDim: #e4d7d5;
37
- --color-surfaceBright: #fff8f6;
38
- --color-surfaceContainerLowest: #ffffff;
39
- --color-surfaceContainerLow: #fef1ee;
40
- --color-surfaceContainer: #f8ebe9;
41
- --color-surfaceContainerHigh: #f3e5e3;
42
- --color-surfaceContainerHighest: #ede0dd;
43
- --color-info: #1a3baa;
44
- --color-onInfo: #e2ffff;
45
- --color-success: #2b5f50;
46
- --color-onSuccess: #e8fef5;
47
- --color-warning: #8a5a00;
48
- --color-onWarning: #fff8ec;
7
+ --color-primary: #9c4235;
8
+ --color-onPrimary: #ffffff;
9
+ --color-primaryContainer: #ffdad4;
10
+ --color-onPrimaryContainer: #410000;
11
+ --color-secondary: #775651;
12
+ --color-onSecondary: #ffffff;
13
+ --color-secondaryContainer: #ffdad4;
14
+ --color-onSecondaryContainer: #2c1512;
15
+ --color-tertiary: #705c2e;
16
+ --color-onTertiary: #ffffff;
17
+ --color-tertiaryContainer: #fbdfa6;
18
+ --color-onTertiaryContainer: #251a00;
19
+ --color-error: #ba1a1a;
20
+ --color-onError: #ffffff;
21
+ --color-errorContainer: #ffdad6;
22
+ --color-onErrorContainer: #410002;
23
+ --color-background: #fffbff;
24
+ --color-onBackground: #201a19;
25
+ --color-surface: #fff8f6;
26
+ --color-onSurface: #201a19;
27
+ --color-surfaceVariant: #f5ddda;
28
+ --color-onSurfaceVariant: #534341;
29
+ --color-outline: #857370;
30
+ --color-outlineVariant: #d8c2be;
31
+ --color-shadow: #000000;
32
+ --color-scrim: #000000;
33
+ --color-inverseSurface: #362f2e;
34
+ --color-inverseOnSurface: #fbeeec;
35
+ --color-inversePrimary: #ffb4a8;
36
+ --color-surfaceDim: #e4d7d5;
37
+ --color-surfaceBright: #fff8f6;
38
+ --color-surfaceContainerLowest: #ffffff;
39
+ --color-surfaceContainerLow: #fef1ee;
40
+ --color-surfaceContainer: #f8ebe9;
41
+ --color-surfaceContainerHigh: #f3e5e3;
42
+ --color-surfaceContainerHighest: #ede0dd;
43
+ --color-info: #1a3baa;
44
+ --color-onInfo: #e2ffff;
45
+ --color-success: #2b5f50;
46
+ --color-onSuccess: #e8fef5;
47
+ --color-warning: #8a5a00;
48
+ --color-onWarning: #fff8ec;
49
49
  }
50
50
 
51
51
  @variant dark {
52
- --color-primary: #ffb4a8;
53
- --color-onPrimary: #5f150d;
54
- --color-primaryContainer: #7d2b21;
55
- --color-onPrimaryContainer: #ffdad4;
56
- --color-secondary: #e7bdb6;
57
- --color-onSecondary: #442925;
58
- --color-secondaryContainer: #5d3f3b;
59
- --color-onSecondaryContainer: #ffdad4;
60
- --color-tertiary: #dec48c;
61
- --color-onTertiary: #3e2e04;
62
- --color-tertiaryContainer: #564419;
63
- --color-onTertiaryContainer: #fbdfa6;
64
- --color-error: #ffb4ab;
65
- --color-onError: #690005;
66
- --color-errorContainer: #93000a;
67
- --color-onErrorContainer: #ffb4ab;
68
- --color-background: #201a19;
69
- --color-onBackground: #ede0dd;
70
- --color-surface: #181211;
71
- --color-onSurface: #ede0dd;
72
- --color-surfaceVariant: #534341;
73
- --color-onSurfaceVariant: #d8c2be;
74
- --color-outline: #a08c89;
75
- --color-outlineVariant: #534341;
76
- --color-shadow: #000000;
77
- --color-scrim: #000000;
78
- --color-inverseSurface: #ede0dd;
79
- --color-inverseOnSurface: #362f2e;
80
- --color-inversePrimary: #9c4235;
81
- --color-surfaceDim: #181211;
82
- --color-surfaceBright: #3f3736;
83
- --color-surfaceContainerLowest: #120d0c;
84
- --color-surfaceContainerLow: #201a19;
85
- --color-surfaceContainer: #251e1d;
86
- --color-surfaceContainerHigh: #2f2827;
87
- --color-surfaceContainerHighest: #3b3332;
88
- --color-info: #008eff;
89
- --color-onInfo: #101a3b;
90
- --color-success: #9bdac7;
91
- --color-onSuccess: #184d3a;
92
- --color-warning: #bfa060;
93
- --color-onWarning: #4a3700;
52
+ --color-primary: #ffb4a8;
53
+ --color-onPrimary: #5f150d;
54
+ --color-primaryContainer: #7d2b21;
55
+ --color-onPrimaryContainer: #ffdad4;
56
+ --color-secondary: #e7bdb6;
57
+ --color-onSecondary: #442925;
58
+ --color-secondaryContainer: #5d3f3b;
59
+ --color-onSecondaryContainer: #ffdad4;
60
+ --color-tertiary: #dec48c;
61
+ --color-onTertiary: #3e2e04;
62
+ --color-tertiaryContainer: #564419;
63
+ --color-onTertiaryContainer: #fbdfa6;
64
+ --color-error: #ffb4ab;
65
+ --color-onError: #690005;
66
+ --color-errorContainer: #93000a;
67
+ --color-onErrorContainer: #ffb4ab;
68
+ --color-background: #201a19;
69
+ --color-onBackground: #ede0dd;
70
+ --color-surface: #181211;
71
+ --color-onSurface: #ede0dd;
72
+ --color-surfaceVariant: #534341;
73
+ --color-onSurfaceVariant: #d8c2be;
74
+ --color-outline: #a08c89;
75
+ --color-outlineVariant: #534341;
76
+ --color-shadow: #000000;
77
+ --color-scrim: #000000;
78
+ --color-inverseSurface: #ede0dd;
79
+ --color-inverseOnSurface: #362f2e;
80
+ --color-inversePrimary: #9c4235;
81
+ --color-surfaceDim: #181211;
82
+ --color-surfaceBright: #3f3736;
83
+ --color-surfaceContainerLowest: #120d0c;
84
+ --color-surfaceContainerLow: #201a19;
85
+ --color-surfaceContainer: #251e1d;
86
+ --color-surfaceContainerHigh: #2f2827;
87
+ --color-surfaceContainerHighest: #3b3332;
88
+ --color-info: #008eff;
89
+ --color-onInfo: #101a3b;
90
+ --color-success: #9bdac7;
91
+ --color-onSuccess: #184d3a;
92
+ --color-warning: #bfa060;
93
+ --color-onWarning: #4a3700;
94
94
  }