@dskripchenko/ui 1.0.1 → 1.0.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 (9) hide show
  1. package/README.md +12 -2
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.mjs +3 -1
  4. package/dist/styles/all.css +261 -0
  5. package/dist/styles/global.css +8 -0
  6. package/dist/styles/reset.css +12 -0
  7. package/dist/styles/themes.css +112 -0
  8. package/dist/styles/tokens.css +127 -0
  9. package/package.json +19 -16
package/dist/styles/themes.css ADDED
@@ -0,0 +1,112 @@
1
+ /* @dskripchenko/ui — themes.css. Auto-generated by scripts/build-styles.mjs. Do not edit. */
2
+ :root[data-theme='light'] {
3
+ --uid-surface-base: var(--uid-color-zinc-50);
4
+ --uid-surface-raised: var(--uid-color-white);
5
+ --uid-surface-overlay: var(--uid-color-white);
6
+
7
+ --uid-text-primary: var(--uid-color-zinc-900);
8
+ --uid-text-secondary: var(--uid-color-zinc-500);
9
+ --uid-text-tertiary: var(--uid-color-zinc-400);
10
+ --uid-text-on-accent: var(--uid-color-white);
11
+
12
+ --uid-border-subtle: var(--uid-color-zinc-200);
13
+ --uid-border-default: var(--uid-color-zinc-300);
14
+ --uid-border-hover: var(--uid-color-zinc-400);
15
+
16
+ --uid-accent: var(--uid-color-teal-500);
17
+ --uid-accent-hover: var(--uid-color-teal-600);
18
+ --uid-accent-subtle: var(--uid-color-teal-50);
19
+ --uid-accent-text: var(--uid-color-teal-700);
20
+
21
+ --uid-danger: var(--uid-color-rose-600);
22
+ --uid-danger-hover: var(--uid-color-rose-700);
23
+ --uid-danger-subtle: var(--uid-color-rose-50);
24
+
25
+ --uid-success: var(--uid-color-emerald-600);
26
+ --uid-success-subtle: var(--uid-color-emerald-50);
27
+
28
+ --uid-warning: var(--uid-color-amber-600);
29
+ --uid-warning-subtle: var(--uid-color-amber-50);
30
+
31
+ --uid-info: var(--uid-color-blue-600);
32
+ --uid-info-subtle: var(--uid-color-blue-50);
33
+
34
+ --uid-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
35
+ --uid-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
36
+ --uid-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);
37
+ }
38
+
39
+ :root[data-theme='dark'] {
40
+ --uid-surface-base: #1c1c1e;
41
+ --uid-surface-raised: #2c2c2e;
42
+ --uid-surface-overlay: #3a3a3c;
43
+
44
+ --uid-text-primary: var(--uid-color-zinc-100);
45
+ --uid-text-secondary: var(--uid-color-zinc-400);
46
+ --uid-text-tertiary: var(--uid-color-zinc-600);
47
+ --uid-text-on-accent: var(--uid-color-white);
48
+
49
+ --uid-border-subtle: var(--uid-color-zinc-700);
50
+ --uid-border-default: var(--uid-color-zinc-600);
51
+ --uid-border-hover: var(--uid-color-zinc-400);
52
+
53
+ --uid-accent: var(--uid-color-teal-400);
54
+ --uid-accent-hover: var(--uid-color-teal-300);
55
+ --uid-accent-subtle: var(--uid-color-teal-900);
56
+ --uid-accent-text: var(--uid-color-teal-300);
57
+
58
+ --uid-danger: var(--uid-color-rose-400);
59
+ --uid-danger-hover: var(--uid-color-rose-500);
60
+ --uid-danger-subtle: var(--uid-color-rose-950);
61
+
62
+ --uid-success: var(--uid-color-emerald-400);
63
+ --uid-success-subtle: var(--uid-color-emerald-950);
64
+
65
+ --uid-warning: var(--uid-color-amber-400);
66
+ --uid-warning-subtle: var(--uid-color-amber-950);
67
+
68
+ --uid-info: var(--uid-color-blue-400);
69
+ --uid-info-subtle: var(--uid-color-blue-950);
70
+
71
+ --uid-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
72
+ --uid-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
73
+ --uid-shadow-lg: 0 8px 24px rgb(0 0 0 / 0.6);
74
+ }
75
+
76
+ /* Aliases: компоненты используют --uid-color-* → маппинг на семантические токены */
77
+ :root {
78
+ --uid-color-bg: var(--uid-surface-raised);
79
+ --uid-color-bg-subtle: var(--uid-surface-base);
80
+ --uid-color-overlay: var(--uid-surface-overlay);
81
+ --uid-color-surface: var(--uid-surface-raised);
82
+ --uid-color-surface-raised: var(--uid-surface-raised);
83
+ --uid-color-surface-hover: var(--uid-surface-base);
84
+
85
+ --uid-color-text: var(--uid-text-primary);
86
+ --uid-color-text-primary: var(--uid-text-primary);
87
+ --uid-color-text-secondary: var(--uid-text-secondary);
88
+ --uid-color-text-tertiary: var(--uid-text-tertiary);
89
+ --uid-color-text-disabled: var(--uid-text-tertiary);
90
+ --uid-color-text-on-primary: var(--uid-text-on-accent);
91
+
92
+ --uid-color-border: var(--uid-border-default);
93
+ --uid-color-border-hover: var(--uid-border-hover);
94
+
95
+ --uid-color-primary: var(--uid-accent);
96
+ --uid-color-primary-hover: var(--uid-accent-hover);
97
+ --uid-color-primary-subtle: var(--uid-accent-subtle);
98
+ --uid-color-focus-ring: var(--uid-accent);
99
+
100
+ --uid-color-danger: var(--uid-danger);
101
+ --uid-color-danger-subtle: var(--uid-danger-subtle);
102
+
103
+ --uid-color-success: var(--uid-success);
104
+ --uid-color-success-subtle: var(--uid-success-subtle);
105
+
106
+ --uid-color-warning: var(--uid-warning);
107
+ --uid-color-warning-subtle: var(--uid-warning-subtle);
108
+ --uid-color-warning-dark: var(--uid-warning);
109
+
110
+ --uid-color-info: var(--uid-info);
111
+ --uid-color-info-subtle: var(--uid-info-subtle);
112
+ }
package/dist/styles/tokens.css ADDED
@@ -0,0 +1,127 @@
1
+ /* @dskripchenko/ui — tokens.css. Auto-generated by scripts/build-styles.mjs. Do not edit. */
2
+ :root {
3
+ --uid-color-zinc-50: #fafafa;
4
+ --uid-color-zinc-100: #f4f4f5;
5
+ --uid-color-zinc-200: #e4e4e7;
6
+ --uid-color-zinc-300: #d4d4d8;
7
+ --uid-color-zinc-400: #a1a1aa;
8
+ --uid-color-zinc-500: #71717a;
9
+ --uid-color-zinc-600: #52525b;
10
+ --uid-color-zinc-700: #3f3f46;
11
+ --uid-color-zinc-800: #27272a;
12
+ --uid-color-zinc-900: #18181b;
13
+ --uid-color-zinc-950: #09090b;
14
+
15
+ --uid-color-teal-50: #f0fdfa;
16
+ --uid-color-teal-100: #ccfbf1;
17
+ --uid-color-teal-300: #5eead4;
18
+ --uid-color-teal-400: #2dd4bf;
19
+ --uid-color-teal-500: #14b8a6;
20
+ --uid-color-teal-600: #0d9488;
21
+ --uid-color-teal-700: #0f766e;
22
+ --uid-color-teal-900: #134e4a;
23
+
24
+ --uid-color-rose-50: #fff1f2;
25
+ --uid-color-rose-400: #fb7185;
26
+ --uid-color-rose-500: #f43f5e;
27
+ --uid-color-rose-600: #e11d48;
28
+ --uid-color-rose-700: #be123c;
29
+ --uid-color-rose-950: #4c0519;
30
+
31
+ --uid-color-emerald-50: #ecfdf5;
32
+ --uid-color-emerald-400: #34d399;
33
+ --uid-color-emerald-600: #059669;
34
+ --uid-color-emerald-950: #022c22;
35
+
36
+ --uid-color-amber-50: #fffbeb;
37
+ --uid-color-amber-400: #fbbf24;
38
+ --uid-color-amber-600: #d97706;
39
+ --uid-color-amber-950: #451a03;
40
+
41
+ --uid-color-blue-50: #eff6ff;
42
+ --uid-color-blue-400: #60a5fa;
43
+ --uid-color-blue-600: #2563eb;
44
+ --uid-color-blue-950: #172554;
45
+
46
+ --uid-color-white: #ffffff;
47
+ }
48
+
49
+ :root {
50
+ --uid-font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
51
+ --uid-font-family-mono: 'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;
52
+
53
+ --uid-font-size-xs: 12px;
54
+ --uid-font-size-sm: 14px;
55
+ --uid-font-size-md: 16px;
56
+ --uid-font-size-lg: 18px;
57
+ --uid-font-size-xl: 20px;
58
+ --uid-font-size-2xl: 24px;
59
+ --uid-font-size-3xl: 30px;
60
+ --uid-font-size-4xl: 36px;
61
+
62
+ --uid-font-weight-regular: 400;
63
+ --uid-font-weight-medium: 500;
64
+ --uid-font-weight-semibold: 600;
65
+ --uid-font-weight-bold: 700;
66
+
67
+ --uid-line-height-tight: 1.25;
68
+ --uid-line-height-snug: 1.375;
69
+ --uid-line-height-normal: 1.5;
70
+ --uid-line-height-relaxed: 1.625;
71
+ }
72
+
73
+ :root {
74
+ --uid-space-0: 0;
75
+ --uid-space-2xs: 2px;
76
+ --uid-space-xs: 4px;
77
+ --uid-space-sm: 8px;
78
+ --uid-space-md: 16px;
79
+ --uid-space-lg: 24px;
80
+ --uid-space-xl: 32px;
81
+ --uid-space-2xl: 48px;
82
+ --uid-space-3xl: 64px;
83
+ }
84
+
85
+ :root {
86
+ --uid-size-sm: 32px;
87
+ --uid-size-md: 40px;
88
+ --uid-size-lg: 48px;
89
+ }
90
+
91
+ :root {
92
+ --uid-radius-none: 0;
93
+ --uid-radius-sm: 3px;
94
+ --uid-radius-md: 6px;
95
+ --uid-radius-lg: 10px;
96
+ --uid-radius-full: 9999px;
97
+ }
98
+
99
+ :root {
100
+ --uid-duration-fast: 100ms;
101
+ --uid-duration-base: 200ms;
102
+ --uid-duration-slow: 350ms;
103
+
104
+ --uid-ease-out: cubic-bezier(0, 0, 0.2, 1);
105
+ --uid-ease-in: cubic-bezier(0.4, 0, 1, 1);
106
+ --uid-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
107
+ }
108
+
109
+ :root {
110
+ --uid-z-base: 0;
111
+ --uid-z-raised: 1;
112
+ --uid-z-dropdown: 100;
113
+ --uid-z-sticky: 200;
114
+ --uid-z-overlay: 300;
115
+ --uid-z-modal: 400;
116
+ --uid-z-toast: 500;
117
+ --uid-z-tooltip: 600;
118
+ }
119
+
120
+ /* Значения только для документации — нельзя использовать в @media */
121
+ :root {
122
+ --uid-bp-sm: 480px;
123
+ --uid-bp-md: 768px;
124
+ --uid-bp-lg: 1024px;
125
+ --uid-bp-xl: 1280px;
126
+ --uid-bp-2xl: 1536px;
127
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dskripchenko/ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Vue 3 component, token, and theme library on CSS custom properties",
5
5
  "keywords": [
6
6
  "vue",
@@ -31,6 +31,7 @@
31
31
  "engines": {
32
32
  "node": ">=20"
33
33
  },
34
+ "packageManager": "pnpm@10.28.0",
34
35
  "publishConfig": {
35
36
  "access": "public"
36
37
  },
@@ -52,7 +53,9 @@
52
53
  "./styles/tokens.css": "./dist/styles/tokens.css",
53
54
  "./styles/themes.css": "./dist/styles/themes.css",
54
55
  "./styles/reset.css": "./dist/styles/reset.css",
55
- "./styles/global.css": "./dist/styles/global.css"
56
+ "./styles/global.css": "./dist/styles/global.css",
57
+ "./styles/all.css": "./dist/styles/all.css",
58
+ "./styles/index.css": "./dist/styles/index.css"
56
59
  },
57
60
  "sideEffects": [
58
61
  "**/*.css"
@@ -60,6 +63,19 @@
60
63
  "files": [
61
64
  "dist"
62
65
  ],
66
+ "scripts": {
67
+ "dev": "storybook dev -p 6006",
68
+ "build-storybook": "storybook build",
69
+ "build": "vue-tsc --noEmit -p tsconfig.build.json && vite build && node scripts/build-styles.mjs",
70
+ "build:lib": "vite build && node scripts/build-styles.mjs",
71
+ "build:analyze": "ANALYZE=true vite build && node scripts/build-styles.mjs",
72
+ "test": "vitest run",
73
+ "test:watch": "vitest",
74
+ "lint": "eslint src",
75
+ "typecheck": "vue-tsc --noEmit",
76
+ "changeset": "changeset",
77
+ "release": "pnpm build && changeset publish"
78
+ },
63
79
  "peerDependencies": {
64
80
  "vue": "^3.4.0"
65
81
  },
@@ -89,18 +105,5 @@
89
105
  "vitest": "^4.1.5",
90
106
  "vue": "^3.5.33",
91
107
  "vue-tsc": "^3.2.7"
92
- },
93
- "scripts": {
94
- "dev": "storybook dev -p 6006",
95
- "build-storybook": "storybook build",
96
- "build": "vue-tsc --noEmit -p tsconfig.build.json && vite build",
97
- "build:lib": "vite build",
98
- "build:analyze": "ANALYZE=true vite build",
99
- "test": "vitest run",
100
- "test:watch": "vitest",
101
- "lint": "eslint src",
102
- "typecheck": "vue-tsc --noEmit",
103
- "changeset": "changeset",
104
- "release": "pnpm build && changeset publish"
105
108
  }
106
- }
109
+ }