milk-lib 0.0.3 → 0.0.5

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.
@@ -9,9 +9,9 @@
9
9
 
10
10
  <style>
11
11
  .MenuContent {
12
- border: 1px solid #ddd;
12
+ border: 1px solid var(--line-base);
13
13
  padding: .25rem;
14
- background-color: white;
14
+ background-color: var(--bg-base);
15
15
  border-radius: 12px;
16
16
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.09);
17
17
  }
@@ -17,6 +17,6 @@
17
17
  }
18
18
 
19
19
  .MenuItem:hover {
20
- background: #ccc;
20
+ background: var(--bg-base-100);
21
21
  }
22
22
  </style>
@@ -16,6 +16,6 @@
16
16
  text-transform: uppercase;
17
17
  letter-spacing: 0.5px;
18
18
  font-weight: 500;
19
- color: #777;
19
+ color: var(--text-base-muted);
20
20
  }
21
21
  </style>
@@ -0,0 +1,16 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ let { children }: { children: Snippet } = $props();
4
+ </script>
5
+
6
+ <li class="SidebarGroupTitle">{@render children()}</li>
7
+
8
+ <style>
9
+ .SidebarGroupTitle {
10
+ font-size: 14px;
11
+ color: var(--text-base-main);
12
+ font-weight: 500;
13
+ margin-top: 1.5rem;
14
+ list-style: none;
15
+ }
16
+ </style>
@@ -0,0 +1,7 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ children: Snippet;
4
+ };
5
+ declare const SidebarGroupTitle: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type SidebarGroupTitle = ReturnType<typeof SidebarGroupTitle>;
7
+ export default SidebarGroupTitle;
@@ -0,0 +1,26 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ let { children, link }: { children: Snippet; link: string } = $props();
4
+ </script>
5
+
6
+ <li class="SidebarLinkEl">
7
+ <a href={link} class="SidebarLink">
8
+ {@render children()}
9
+ </a>
10
+ </li>
11
+
12
+ <style>
13
+
14
+ .SidebarLinkEl {
15
+ list-style: none;
16
+ }
17
+
18
+ .SidebarLink {
19
+ font-size: 14px;
20
+ color: var(--text-base-muted);
21
+ }
22
+
23
+ .SidebarLink:hover {
24
+ text-decoration: underline;
25
+ }
26
+ </style>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ children: Snippet;
4
+ link: string;
5
+ };
6
+ declare const SidebarLink: import("svelte").Component<$$ComponentProps, {}, "">;
7
+ type SidebarLink = ReturnType<typeof SidebarLink>;
8
+ export default SidebarLink;
@@ -0,0 +1,2 @@
1
+ export { default as SidebarGroupTitle } from './SidebarGroupTitle.svelte';
2
+ export { default as SidebarLink } from './SidebarLink.svelte';
@@ -0,0 +1,2 @@
1
+ export { default as SidebarGroupTitle } from './SidebarGroupTitle.svelte';
2
+ export { default as SidebarLink } from './SidebarLink.svelte';
@@ -36,6 +36,7 @@
36
36
  });
37
37
 
38
38
  $effect(() => {
39
+
39
40
  const delta = scrollY - lastY;
40
41
 
41
42
  // всегда показываем у самого верха
@@ -0,0 +1,2 @@
1
+ import type { IThemeVars } from "./ThemeProvider.types";
2
+ export declare let vars: IThemeVars;
@@ -0,0 +1,88 @@
1
+ export let vars = {
2
+ '--panel-base': '#f3f5f6',
3
+ '--panel-primary': '#FFF9E5',
4
+ '--panel-success': '#DDF9E6',
5
+ '--panel-danger': '#FFEDEB',
6
+ '--panel-secondary': '#F6F5FF',
7
+ '--line-base': '#D3D5DC',
8
+ '--line-control-100': '#ABABB0',
9
+ '--line-base-emp': '#151617',
10
+ '--line-primary': '#FFE27B',
11
+ '--line-success': '#B6F7CB',
12
+ '--line-danger': '#FBC4BF',
13
+ '--line-secondary': '#BEB6F9',
14
+ // Add line-emp
15
+ '--bg-base': '#fff',
16
+ '--bg-base-100': '#EDEEF0',
17
+ '--bg-base-200': '#E2E4E8',
18
+ '--bg-base-300': '#D3D5DC',
19
+ '--bg-base-emp-100': '#28282B',
20
+ '--bg-base-emp-200': '#1E1F21',
21
+ '--bg-base-emp-300': '#151617',
22
+ '--bg-primary-100': '#FFF6D6',
23
+ '--bg-primary-200': '#FCF0C5',
24
+ '--bg-primary-300': '#FAEBB4',
25
+ '--bg-primary-emp-100': '#FFCC14',
26
+ '--bg-primary-emp-200': '#F7C614',
27
+ '--bg-primary-emp-300': '#F0C013',
28
+ '--bg-success-100': '#C3F6D4',
29
+ '--bg-success-200': '#B1F0C6',
30
+ '--bg-success-300': '#9FEBB9',
31
+ '--bg-success-emp-100': '#1BB44C',
32
+ '--bg-success-emp-200': '#12AA43',
33
+ '--bg-success-emp-300': '#0DA13C',
34
+ '--bg-danger-100': '#FCDFDC',
35
+ '--bg-danger-200': '#FAD4CF',
36
+ '--bg-danger-300': '#F7C7C1',
37
+ '--bg-danger-emp-100': '#F35749',
38
+ '--bg-danger-emp-200': '#ED4637',
39
+ '--bg-danger-emp-300': '#EB3A2A',
40
+ '--bg-secondary-100': '#E8E6FC',
41
+ '--bg-secondary-200': '#DCD9F9',
42
+ '--bg-secondary-300': '#D1CCF9',
43
+ '--bg-secondary-emp-100': '#5A49F3',
44
+ '--bg-secondary-emp-200': '#4F3DF2',
45
+ '--bg-secondary-emp-300': '#4431F5',
46
+ '--text-base-main': '#26272B',
47
+ '--text-base-inv': '#fff',
48
+ '--text-base-muted': '#515256',
49
+ '--text-base-inv-muted': '#C1C3CA',
50
+ '--text-base-placeholder': '#9C9EA3',
51
+ '--text-base-link': '#6846E1',
52
+ '--text-secondary-main': '#2F19FB',
53
+ '--text-primary-main': '#C29B09',
54
+ '--text-success-main': '#077129',
55
+ '--text-danger-main': '#C42A1A',
56
+ '--icon-base-main': '#26272B',
57
+ '--icon-base-inv': '#fff',
58
+ '--icon-base-muted': '#515256',
59
+ '--icon-base-inv-muted': '#C1C3CA',
60
+ '--icon-base-placeholder': '#9C9EA3',
61
+ '--icon-base-link': '#6846E1',
62
+ '--icon-secondary-main': '#2F19FB',
63
+ '--icon-primary-main': '#C29B09',
64
+ '--icon-success-main': '#077129',
65
+ '--icon-danger-main': '#C42A1A',
66
+ '--border-radius-button-sm': '5',
67
+ '--border-radius-button': '8',
68
+ '--border-radius-panel': '12',
69
+ '--border-radius-window': '20',
70
+ '--stroke-button': '1',
71
+ '--spacing-xs-1': '4',
72
+ '--spacing-xs-1-5': '6',
73
+ '--spacing-sm-2': '8',
74
+ '--spacing-md-3': '12',
75
+ '--spacing-lg-5': '20',
76
+ '--spacing-xl-10': '40',
77
+ '--zindex-dropdown': '1060',
78
+ '--zindex-sticky': '1020',
79
+ '--zindex-fixed': '1030',
80
+ '--zindex-sheet': '1035',
81
+ '--zindex-offcanvas-backdrop': '1040',
82
+ '--zindex-offcanvas': '1045',
83
+ '--zindex-modal-backdrop': '1050',
84
+ '--zindex-modal': '1055',
85
+ '--zindex-popover': '1070',
86
+ '--zindex-tooltip': '1080',
87
+ '--zindex-toast': '1090'
88
+ };
@@ -0,0 +1,19 @@
1
+ <script lang="ts">
2
+
3
+ import { vars } from './ThemeDefault';
4
+ import type { Snippet } from 'svelte';
5
+
6
+ let cssVars = $derived.by(() => {
7
+ return Object.entries(vars)
8
+ .map((([k,v]) => `${k}:${v}`))
9
+ .join(';');
10
+ });
11
+
12
+ let { children } : { children: Snippet } = $props();
13
+
14
+ </script>
15
+
16
+ <div style={cssVars} class="ThemeProvider">
17
+ {@render children()}
18
+ </div>
19
+
@@ -0,0 +1,7 @@
1
+ import type { Snippet } from 'svelte';
2
+ type $$ComponentProps = {
3
+ children: Snippet;
4
+ };
5
+ declare const ThemeProvider: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type ThemeProvider = ReturnType<typeof ThemeProvider>;
7
+ export default ThemeProvider;
@@ -0,0 +1,88 @@
1
+ export type ThemeVars = Record<string, string | number>;
2
+ export interface IThemeVars {
3
+ '--panel-base': string;
4
+ '--panel-primary': string;
5
+ '--panel-success': string;
6
+ '--panel-danger': string;
7
+ '--panel-secondary': string;
8
+ '--line-base': string;
9
+ '--line-control-100': string;
10
+ '--line-base-emp': string;
11
+ '--line-primary': string;
12
+ '--line-success': string;
13
+ '--line-danger': string;
14
+ '--line-secondary': string;
15
+ '--bg-base': string;
16
+ '--bg-base-100': string;
17
+ '--bg-base-200': string;
18
+ '--bg-base-300': string;
19
+ '--bg-base-emp-100': string;
20
+ '--bg-base-emp-200': string;
21
+ '--bg-base-emp-300': string;
22
+ '--bg-primary-100': string;
23
+ '--bg-primary-200': string;
24
+ '--bg-primary-300': string;
25
+ '--bg-primary-emp-100': string;
26
+ '--bg-primary-emp-200': string;
27
+ '--bg-primary-emp-300': string;
28
+ '--bg-success-100': string;
29
+ '--bg-success-200': string;
30
+ '--bg-success-300': string;
31
+ '--bg-success-emp-100': string;
32
+ '--bg-success-emp-200': string;
33
+ '--bg-success-emp-300': string;
34
+ '--bg-danger-100': string;
35
+ '--bg-danger-200': string;
36
+ '--bg-danger-300': string;
37
+ '--bg-danger-emp-100': string;
38
+ '--bg-danger-emp-200': string;
39
+ '--bg-danger-emp-300': string;
40
+ '--bg-secondary-100': string;
41
+ '--bg-secondary-200': string;
42
+ '--bg-secondary-300': string;
43
+ '--bg-secondary-emp-100': string;
44
+ '--bg-secondary-emp-200': string;
45
+ '--bg-secondary-emp-300': string;
46
+ '--text-base-main': string;
47
+ '--text-base-inv': string;
48
+ '--text-base-muted': string;
49
+ '--text-base-inv-muted': string;
50
+ '--text-base-placeholder': string;
51
+ '--text-base-link': string;
52
+ '--text-secondary-main': string;
53
+ '--text-primary-main': string;
54
+ '--text-success-main': string;
55
+ '--text-danger-main': string;
56
+ '--icon-base-main': string;
57
+ '--icon-base-inv': string;
58
+ '--icon-base-muted': string;
59
+ '--icon-base-inv-muted': string;
60
+ '--icon-base-placeholder': string;
61
+ '--icon-base-link': string;
62
+ '--icon-secondary-main': string;
63
+ '--icon-primary-main': string;
64
+ '--icon-success-main': string;
65
+ '--icon-danger-main': string;
66
+ '--border-radius-button-sm': string;
67
+ '--border-radius-button': string;
68
+ '--border-radius-panel': string;
69
+ '--border-radius-window': string;
70
+ '--stroke-button': string;
71
+ '--spacing-xs-1': string;
72
+ '--spacing-xs-1-5': string;
73
+ '--spacing-sm-2': string;
74
+ '--spacing-md-3': string;
75
+ '--spacing-lg-5': string;
76
+ '--spacing-xl-10': string;
77
+ '--zindex-dropdown': string;
78
+ '--zindex-sticky': string;
79
+ '--zindex-fixed': string;
80
+ '--zindex-sheet': string;
81
+ '--zindex-offcanvas-backdrop': string;
82
+ '--zindex-offcanvas': string;
83
+ '--zindex-modal-backdrop': string;
84
+ '--zindex-modal': string;
85
+ '--zindex-popover': string;
86
+ '--zindex-tooltip': string;
87
+ '--zindex-toast': string;
88
+ }
@@ -0,0 +1,2 @@
1
+ ;
2
+ export {};
@@ -0,0 +1 @@
1
+ export { default as ThemeProvider } from './ThemeProvider.svelte';
@@ -0,0 +1 @@
1
+ export { default as ThemeProvider } from './ThemeProvider.svelte';
@@ -1,3 +1,5 @@
1
1
  export * from './TestComponent';
2
2
  export * from './Menu';
3
3
  export * from './StickyHeader';
4
+ export * from './Sidebar';
5
+ export * from './ThemeProvider';
@@ -1,3 +1,5 @@
1
1
  export * from './TestComponent';
2
2
  export * from './Menu';
3
3
  export * from './StickyHeader';
4
+ export * from './Sidebar';
5
+ export * from './ThemeProvider';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "milk-lib",
3
3
  "license": "MIT",
4
- "version": "0.0.3",
4
+ "version": "0.0.5",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && npm run prepack",