@celar-ui/svelte 0.3.1 → 0.3.3

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 (6) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.js +1 -0
  3. package/dist/utils.d.ts +1 -0
  4. package/dist/utils.js +6 -0
  5. package/package.json +1 -1
  6. package/src/styles/colors.scss +5 -11
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export * from './utils.js';
1
2
  export { default as TextButton } from './buttons/TextButton.svelte';
2
3
  export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
3
4
  export { default as FilledButton } from './buttons/FilledButton.svelte';
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  // Reexport your entry components here
2
+ export * from './utils.js';
2
3
  export { default as TextButton } from './buttons/TextButton.svelte';
3
4
  export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
4
5
  export { default as FilledButton } from './buttons/FilledButton.svelte';
package/dist/utils.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function applyPreferredColorScheme(scheme: 'light' | 'dark' | 'auto'): void;
package/dist/utils.js ADDED
@@ -0,0 +1,6 @@
1
+ export function applyPreferredColorScheme(scheme) {
2
+ if (scheme === 'auto') {
3
+ scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
4
+ }
5
+ document.documentElement.setAttribute('data-theme', scheme);
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@celar-ui/svelte",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "cuikho210",
package/src/styles/colors.scss CHANGED
@@ -51,7 +51,7 @@ $colors-theme-dark: (
51
51
  color-text-warning: #bfa060,
52
52
  color-text-danger: #b36a6a,
53
53
 
54
- color-bg: #0a0a0a,
54
+ color-bg: #1a1a1a,
55
55
  color-bg-info: #101a3b,
56
56
  color-bg-success: #184d3a,
57
57
  color-bg-warning: #4a3700,
@@ -59,10 +59,10 @@ $colors-theme-dark: (
59
59
  ) !default;
60
60
 
61
61
  $colors-misc: (
62
- color-shadow--soft: rgba(0, 0, 0, 0.05),
63
- color-shadow--md: rgba(0, 0, 0, 0.075),
64
- color-shadow: rgba(0, 0, 0, 0.1),
65
- color-shadow--strong: rgba(0, 0, 0, 0.16),
62
+ color-shadow--soft: rgba(var(--color-text--rgb), 0.05),
63
+ color-shadow--md: rgba(var(--color-text--rgb), 0.075),
64
+ color-shadow: rgba(var(--color-text--rgb), 0.1),
65
+ color-shadow--strong: rgba(var(--color-text--rgb), 0.16),
66
66
  color-border: rgba(var(--color-text--rgb), 0.07),
67
67
  color-border--strong: rgba(var(--color-text--rgb), 0.1),
68
68
  color-wrapper: rgba(var(--color-text--rgb), 0.024)
@@ -76,9 +76,3 @@ $colors-misc: (
76
76
  :root[data-theme='dark'] {
77
77
  @include utils.generate_colors(config.$prefix, $colors-theme-dark);
78
78
  }
79
-
80
- @media (prefers-color-scheme: dark) {
81
- :root[data-theme='auto'] {
82
- @include utils.generate_colors(config.$prefix, $colors-theme-dark);
83
- }
84
- }