@celar-ui/svelte 0.2.2 → 0.2.4

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 (8) hide show
  1. package/dist/buttons/styles/elevated_button.scss +6 -1
  2. package/dist/buttons/styles/filled_button.scss +6 -2
  3. package/dist/buttons/styles/icon_button.scss +5 -1
  4. package/dist/buttons/styles/outlined_button.scss +6 -1
  5. package/dist/buttons/styles/text_button.scss +6 -1
  6. package/dist/navigation/NavigationDrawer.svelte +1 -1
  7. package/dist/overlay/CommandDialog.svelte +1 -1
  8. package/package.json +1 -1
package/dist/buttons/styles/elevated_button.scss CHANGED
@@ -1,12 +1,16 @@
1
1
  [data-button-elevated] {
2
+ --color-hover: var(--color-text);
3
+ --color-active: var(--color-text);
4
+
2
5
  transition-duration: var(--transition-dur);
3
- transition-property: background-color, box-shadow, opacity;
6
+ transition-property: background-color, box-shadow, opacity, color;
4
7
  box-shadow: 0 2px 2px var(--color-shadow);
5
8
  background-color: var(--color-primary--lighter);
6
9
 
7
10
  &:not(:disabled, [data-active='true']):hover {
8
11
  box-shadow: 0 2px 4px var(--color-shadow--strong);
9
12
  background-color: var(--color-primary--light);
13
+ color: var(--color-hover) !important;
10
14
  }
11
15
 
12
16
  &:not(:disabled):active {
@@ -16,5 +20,6 @@
16
20
  &[data-active='true'] {
17
21
  box-shadow: 0 2px 2px var(--color-shadow--strong);
18
22
  background-color: var(--color-alt);
23
+ color: var(--color-active) !important;
19
24
  }
20
25
  }
package/dist/buttons/styles/filled_button.scss CHANGED
@@ -1,11 +1,15 @@
1
1
  [data-button-filled] {
2
+ --color-hover: var(--color-text);
3
+ --color-active: var(--color-bg);
4
+
2
5
  transition-duration: var(--transition-dur);
3
- transition-property: background-color, box-shadow, opacity;
6
+ transition-property: background-color, box-shadow, opacity, color;
4
7
  background-color: var(--color-primary);
5
8
 
6
9
  &:not(:disabled, [data-active='true']):hover {
7
10
  background-color: var(--color-primary--dark);
8
11
  box-shadow: 0 2px 4px var(--color-shadow--strong);
12
+ color: var(--color-hover) !important;
9
13
  }
10
14
 
11
15
  &:not(:disabled):active {
@@ -15,6 +19,6 @@
15
19
  &[data-active='true'] {
16
20
  box-shadow: 0 2px 2px var(--color-shadow--strong);
17
21
  background-color: var(--color-alt--darker);
18
- color: var(--color-bg);
22
+ color: var(--color-active) !important;
19
23
  }
20
24
  }
package/dist/buttons/styles/icon_button.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  [data-button-icon] {
2
+ --color-hover: var(--color-text);
3
+ --color-active: var(--color-text);
4
+
2
5
  flex-grow: 0;
3
6
  flex-shrink: 0;
4
7
  transition-duration: var(--transition-dur);
@@ -26,10 +29,11 @@
26
29
 
27
30
  &:not(:disabled, [data-active='true']):hover {
28
31
  background-color: var(--color-primary--light);
32
+ color: var(--color-hover) !important;
29
33
  }
30
34
 
31
35
  &[data-active='true'] {
32
36
  background-color: var(--color-alt);
33
- color: var(--color-primary--text);
37
+ color: var(--color-active) !important;
34
38
  }
35
39
  }
package/dist/buttons/styles/outlined_button.scss CHANGED
@@ -1,16 +1,21 @@
1
1
  [data-button-outlined] {
2
+ --color-hover: var(--color-text);
3
+ --color-active: var(--color-text);
4
+
2
5
  transition-duration: var(--transition-dur);
3
- transition-property: background-color, border-color, opacity;
6
+ transition-property: background-color, border-color, opacity, color;
4
7
  background-color: transparent;
5
8
  border: 1px solid var(--color-primary--light);
6
9
 
7
10
  &:not(:disabled, [data-active='true']):hover {
8
11
  background-color: var(--color-primary--light);
9
12
  border-color: var(--color-primary);
13
+ color: var(--color-hover) !important;
10
14
  }
11
15
 
12
16
  &[data-active='true'] {
13
17
  background-color: var(--color-alt);
14
18
  border-color: var(--color-primary);
19
+ color: var(--color-active) !important;
15
20
  }
16
21
  }
package/dist/buttons/styles/text_button.scss CHANGED
@@ -1,13 +1,18 @@
1
1
  [data-button-text] {
2
+ --color-hover: var(--color-text);
3
+ --color-active: var(--color-text);
4
+
2
5
  transition-duration: var(--transition-dur);
3
- transition-property: background-color, opacity;
6
+ transition-property: background-color, opacity, color;
4
7
  background-color: transparent;
5
8
 
6
9
  &:not(:disabled, [data-active='true']):hover {
7
10
  background-color: var(--color-primary--light);
11
+ color: var(--color-hover) !important;
8
12
  }
9
13
 
10
14
  &[data-active='true'] {
11
15
  background-color: var(--color-alt);
16
+ color: var(--color-active) !important;
12
17
  }
13
18
  }
package/dist/navigation/NavigationDrawer.svelte CHANGED
@@ -100,7 +100,7 @@
100
100
  z-index: 100;
101
101
  flex-direction: column;
102
102
  background-color: var(--color-bg);
103
- height: 100vh;
103
+ height: 100dvh;
104
104
  overflow-y: auto;
105
105
  box-shadow: 0 4px 1rem var(--color-shadow);
106
106
  max-width: 85%;
package/dist/overlay/CommandDialog.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  loop = false,
34
34
  disablePointerSelection = false,
35
35
  vimBindings = true,
36
- open = $bindable(),
36
+ open = $bindable(false),
37
37
  ...rest
38
38
  }: CommandDialogProps = $props();
39
39
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@celar-ui/svelte",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "cuikho210",