@katlux/preset-dark 0.1.0-beta.2

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 (10) hide show
  1. package/README.md +25 -0
  2. package/dist/module.d.mts +3 -0
  3. package/dist/module.json +9 -0
  4. package/dist/module.mjs +53 -0
  5. package/dist/runtime/assets/scss/css-variables.css +166 -0
  6. package/dist/runtime/assets/scss/index.css +166 -0
  7. package/dist/runtime/plugin.d.ts +2 -0
  8. package/dist/runtime/plugin.js +7 -0
  9. package/dist/types.d.mts +7 -0
  10. package/package.json +29 -0
package/README.md ADDED
@@ -0,0 +1,25 @@
1
+ # @katlux/preset-dark
2
+
3
+ Dark mode design preset and CSS variables for the Katlux UI toolkit.
4
+
5
+ ## Usage
6
+
7
+ In your `nuxt.config.ts`:
8
+
9
+ ```ts
10
+ export default defineNuxtConfig({
11
+ modules: [
12
+ '@katlux/preset-dark'
13
+ ]
14
+ })
15
+ ```
16
+
17
+ And set active preset in `app.config.ts`:
18
+
19
+ ```ts
20
+ export default defineAppConfig({
21
+ katluxToolkit: {
22
+ activePreset: 'dark'
23
+ }
24
+ })
25
+ ```
package/dist/module.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ declare const _default: any;
2
+
3
+ export { _default as default };
package/dist/module.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "name": "@katlux/preset-dark",
3
+ "configKey": "katluxTemplateDark",
4
+ "version": "0.1.0-beta.2",
5
+ "builder": {
6
+ "@nuxt/module-builder": "1.0.2",
7
+ "unbuild": "3.6.1"
8
+ }
9
+ }
package/dist/module.mjs ADDED
@@ -0,0 +1,53 @@
1
+ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir } from '@nuxt/kit';
2
+ import { createRequire } from 'node:module';
3
+ import { existsSync } from 'node:fs';
4
+
5
+ const module$1 = defineNuxtModule({
6
+ meta: {
7
+ name: "@katlux/preset-dark",
8
+ configKey: "katluxTemplateDark"
9
+ },
10
+ async setup(options, nuxt) {
11
+ const { resolve } = createResolver(import.meta.url);
12
+ const _require = createRequire(import.meta.url);
13
+ await installModule("@katlux/toolkit");
14
+ addPlugin(resolve("./runtime/plugin"));
15
+ const componentsPath = resolve("./runtime/components");
16
+ if (existsSync(componentsPath)) {
17
+ addComponentsDir({
18
+ path: componentsPath,
19
+ prefix: "PresetDark",
20
+ pathPrefix: false,
21
+ extensions: ["vue"],
22
+ global: true
23
+ });
24
+ }
25
+ nuxt.options.vite.css = nuxt.options.vite.css || {};
26
+ nuxt.options.vite.css.preprocessorOptions = nuxt.options.vite.css.preprocessorOptions || {};
27
+ nuxt.options.vite.css.preprocessorOptions.scss = nuxt.options.vite.css.preprocessorOptions.scss || {};
28
+ const currentAdditionalData = nuxt.options.vite.css.preprocessorOptions.scss.additionalData || "";
29
+ const toolkitPkgJson = _require.resolve("@katlux/toolkit/package.json");
30
+ const toolkitPkgDir = toolkitPkgJson.replace(/[\\/]package\.json$/, "");
31
+ const toolkitRuntimeDir = nuxt.options.dev && existsSync(toolkitPkgDir + "/src/runtime") ? toolkitPkgDir + "/src/runtime" : toolkitPkgDir + "/dist/runtime";
32
+ const mixinsScssPath = toolkitRuntimeDir + "/presets/default/assets/scss/mixins.scss";
33
+ const mixinsCssPath = toolkitRuntimeDir + "/presets/default/assets/scss/mixins.css";
34
+ const toolkitMixinsPath = existsSync(mixinsScssPath) ? mixinsScssPath : mixinsCssPath;
35
+ const toolkitScss = `@use "${toolkitMixinsPath}" as *;`;
36
+ nuxt.hook("vite:extendConfig", (config) => {
37
+ const server = config.server || (config.server = {});
38
+ const fs = server.fs || (server.fs = {});
39
+ const allow = fs.allow || (fs.allow = []);
40
+ if (!allow.includes(toolkitRuntimeDir)) {
41
+ allow.push(toolkitRuntimeDir);
42
+ }
43
+ });
44
+ const presetScssPath = resolve("./runtime/assets/scss/index.scss");
45
+ const presetCssPath = resolve("./runtime/assets/scss/index.css");
46
+ const actualPresetPath = existsSync(presetScssPath) ? presetScssPath : presetCssPath;
47
+ nuxt.options.css.push(actualPresetPath);
48
+ nuxt.options.vite.css.preprocessorOptions.scss.additionalData = `${toolkitScss}
49
+ ${currentAdditionalData}`;
50
+ }
51
+ });
52
+
53
+ export { module$1 as default };
package/dist/runtime/assets/scss/css-variables.css ADDED
@@ -0,0 +1,166 @@
1
+ [data-preset~=dark] {
2
+ --primary-100: #312e81;
3
+ --primary-300: #4338ca;
4
+ --primary-500: #6366f1;
5
+ --primary-700: #818cf8;
6
+ --primary-900: #c7d2fe;
7
+ --accent-100: #164e63;
8
+ --accent-300: #0e7490;
9
+ --accent-500: #06b6d4;
10
+ --accent-700: #22d3ee;
11
+ --accent-900: #a5f3fc;
12
+ --neutral-50: #090d16;
13
+ --neutral-100: #0f172a;
14
+ --neutral-200: #1e293b;
15
+ --neutral-300: #334155;
16
+ --neutral-400: #475569;
17
+ --neutral-500: #64748b;
18
+ --neutral-600: #94a3b8;
19
+ --neutral-700: #cbd5e1;
20
+ --neutral-800: #e2e8f0;
21
+ --neutral-900: #f8fafc;
22
+ --yellow-100: #422006;
23
+ --yellow-300: #854d0e;
24
+ --yellow-500: #eab308;
25
+ --yellow-700: #fde047;
26
+ --yellow-900: #fef9c3;
27
+ --red-100: #450a0a;
28
+ --red-300: #991b1b;
29
+ --red-500: #f43f5e;
30
+ --red-700: #fb7185;
31
+ --red-900: #ffe4e6;
32
+ --blue-100: #172554;
33
+ --blue-300: #1e40af;
34
+ --blue-500: #3b82f6;
35
+ --blue-700: #60a5fa;
36
+ --blue-900: #dbeafe;
37
+ --pink-100: #500724;
38
+ --pink-300: #9f1239;
39
+ --pink-500: #ec4899;
40
+ --pink-700: #f472b6;
41
+ --pink-900: #fce7f3;
42
+ --cyan-100: #083344;
43
+ --cyan-300: #155e75;
44
+ --cyan-500: #06b6d4;
45
+ --cyan-700: #38bdf8;
46
+ --cyan-900: #cffafe;
47
+ --green-100: #052e16;
48
+ --green-300: #166534;
49
+ --green-500: #10b981;
50
+ --green-700: #34d399;
51
+ --green-900: #dcfce7;
52
+ --success-color: #10b981;
53
+ --success-color-light: #064e3b;
54
+ --warning-color: #f59e0b;
55
+ --warning-color-light: #78350f;
56
+ --error-color: #f43f5e;
57
+ --error-color-light: #881337;
58
+ --info-color: #0ea5e9;
59
+ --info-color-light: #075985;
60
+ --font-color-primary: #f8fafc;
61
+ --font-color-secondary: #94a3b8;
62
+ --font-color-heading: #ffffff;
63
+ --font-color-light: #ffffff;
64
+ --background-color: #0b0f19;
65
+ --background-color-light: #0f172a;
66
+ --background-color-medium: #1e293b;
67
+ --background-color-dark: #020617;
68
+ --border-color-light: #1e293b;
69
+ --border-color-medium: #334155;
70
+ --border-color-dark: #475569;
71
+ --gap-sm: 8px;
72
+ --gap-md: 16px;
73
+ --gap-lg: 24px;
74
+ --gap-xl: 32px;
75
+ --border-radius-sm: 6px;
76
+ --border-radius-md: 10px;
77
+ --border-radius-lg: 14px;
78
+ --border-radius-xl: 20px;
79
+ --border-radius-full: 9999px;
80
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
81
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
82
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
83
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
84
+ --font-size-xs: 12px;
85
+ --font-size-sm: 14px;
86
+ --font-size-md: 16px;
87
+ --font-size-lg: 18px;
88
+ --font-size-xl: 20px;
89
+ --font-weight-normal: 400;
90
+ --font-weight-medium: 500;
91
+ --font-weight-semibold: 600;
92
+ --font-weight-bold: 700;
93
+ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
94
+ --font-family-mono: 'Fira Code', monospace;
95
+ --text-color: var(--font-color-primary);
96
+ --header-color: var(--font-color-heading);
97
+ --link-color: var(--primary-700);
98
+ --link-hover-color: var(--primary-900);
99
+ --transition-fast: 0.15s ease;
100
+ --transition-normal: 0.3s ease;
101
+ --transition-slow: 0.5s ease;
102
+ --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
103
+ --button-border-radius: var(--border-radius-md);
104
+ --button-font-size-sm: var(--font-size-sm);
105
+ --button-font-size-md: var(--font-size-md);
106
+ --button-font-size-lg: var(--font-size-lg);
107
+ --button-bg-default: #334155;
108
+ --button-text-default: #ffffff;
109
+ --button-hover-bg-default: #475569;
110
+ --button-hover-text-default: #ffffff;
111
+ --button-bg-primary: #6366f1;
112
+ --button-text-primary: #ffffff;
113
+ --button-hover-bg-primary: #4f46e5;
114
+ --button-hover-text-primary: #ffffff;
115
+ --button-bg-success: #10b981;
116
+ --button-text-success: #ffffff;
117
+ --button-hover-bg-success: #059669;
118
+ --button-hover-text-success: #ffffff;
119
+ --button-bg-warning: #f59e0b;
120
+ --button-text-warning: #0f172a;
121
+ --button-hover-bg-warning: #d97706;
122
+ --button-hover-text-warning: #0f172a;
123
+ --button-bg-danger: #f43f5e;
124
+ --button-text-danger: #ffffff;
125
+ --button-hover-bg-danger: #e11d48;
126
+ --button-hover-text-danger: #ffffff;
127
+ --button-bg-info: #0ea5e9;
128
+ --button-text-info: #ffffff;
129
+ --button-hover-bg-info: #0284c7;
130
+ --button-hover-text-info: #ffffff;
131
+ --button-bg-light: #1e293b;
132
+ --button-text-light: #f8fafc;
133
+ --button-hover-bg-light: #334155;
134
+ --button-hover-text-light: #ffffff;
135
+ --button-bg-dark: #0f172a;
136
+ --button-text-dark: #ffffff;
137
+ --button-hover-bg-dark: #1e293b;
138
+ --button-hover-text-dark: #ffffff;
139
+ --input-bg: #0f172a;
140
+ --input-border-radius: var(--border-radius-sm);
141
+ --input-border-color: #334155;
142
+ --input-border: 1px solid var(--input-border-color);
143
+ --input-hover-border-color: #475569;
144
+ --input-focus-border-color: #6366f1;
145
+ --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
146
+ --input-height: 44px;
147
+ --table-border-color: #334155;
148
+ --table-header-bg: #1e293b;
149
+ --table-header-color: #f8fafc;
150
+ --table-row-bg: #0b0f19;
151
+ --table-row-alt-bg: #0f172a;
152
+ --table-row-hover-bg: #1e293b;
153
+ --table-row-selected-bg: #312e81;
154
+ --table-row-text-color: #f8fafc;
155
+ --panel-bg-default: #0f172a;
156
+ --panel-header-bg-default: #1e293b;
157
+ --panel-footer-bg-default: #0f172a;
158
+ --checkbox-bg: #0f172a;
159
+ --checkbox-checked-bg: #6366f1;
160
+ --checkbox-border-color: #475569;
161
+ --layout-header-height: 60px;
162
+ --layout-header-bg: #0f172a;
163
+ --layout-sidebar-width: 240px;
164
+ --layout-sidebar-bg: #090d16;
165
+ --layout-content-bg: #0b0f19;
166
+ }
package/dist/runtime/assets/scss/index.css ADDED
@@ -0,0 +1,166 @@
1
+ [data-preset~=dark] {
2
+ --primary-100: #312e81;
3
+ --primary-300: #4338ca;
4
+ --primary-500: #6366f1;
5
+ --primary-700: #818cf8;
6
+ --primary-900: #c7d2fe;
7
+ --accent-100: #164e63;
8
+ --accent-300: #0e7490;
9
+ --accent-500: #06b6d4;
10
+ --accent-700: #22d3ee;
11
+ --accent-900: #a5f3fc;
12
+ --neutral-50: #090d16;
13
+ --neutral-100: #0f172a;
14
+ --neutral-200: #1e293b;
15
+ --neutral-300: #334155;
16
+ --neutral-400: #475569;
17
+ --neutral-500: #64748b;
18
+ --neutral-600: #94a3b8;
19
+ --neutral-700: #cbd5e1;
20
+ --neutral-800: #e2e8f0;
21
+ --neutral-900: #f8fafc;
22
+ --yellow-100: #422006;
23
+ --yellow-300: #854d0e;
24
+ --yellow-500: #eab308;
25
+ --yellow-700: #fde047;
26
+ --yellow-900: #fef9c3;
27
+ --red-100: #450a0a;
28
+ --red-300: #991b1b;
29
+ --red-500: #f43f5e;
30
+ --red-700: #fb7185;
31
+ --red-900: #ffe4e6;
32
+ --blue-100: #172554;
33
+ --blue-300: #1e40af;
34
+ --blue-500: #3b82f6;
35
+ --blue-700: #60a5fa;
36
+ --blue-900: #dbeafe;
37
+ --pink-100: #500724;
38
+ --pink-300: #9f1239;
39
+ --pink-500: #ec4899;
40
+ --pink-700: #f472b6;
41
+ --pink-900: #fce7f3;
42
+ --cyan-100: #083344;
43
+ --cyan-300: #155e75;
44
+ --cyan-500: #06b6d4;
45
+ --cyan-700: #38bdf8;
46
+ --cyan-900: #cffafe;
47
+ --green-100: #052e16;
48
+ --green-300: #166534;
49
+ --green-500: #10b981;
50
+ --green-700: #34d399;
51
+ --green-900: #dcfce7;
52
+ --success-color: #10b981;
53
+ --success-color-light: #064e3b;
54
+ --warning-color: #f59e0b;
55
+ --warning-color-light: #78350f;
56
+ --error-color: #f43f5e;
57
+ --error-color-light: #881337;
58
+ --info-color: #0ea5e9;
59
+ --info-color-light: #075985;
60
+ --font-color-primary: #f8fafc;
61
+ --font-color-secondary: #94a3b8;
62
+ --font-color-heading: #ffffff;
63
+ --font-color-light: #ffffff;
64
+ --background-color: #0b0f19;
65
+ --background-color-light: #0f172a;
66
+ --background-color-medium: #1e293b;
67
+ --background-color-dark: #020617;
68
+ --border-color-light: #1e293b;
69
+ --border-color-medium: #334155;
70
+ --border-color-dark: #475569;
71
+ --gap-sm: 8px;
72
+ --gap-md: 16px;
73
+ --gap-lg: 24px;
74
+ --gap-xl: 32px;
75
+ --border-radius-sm: 6px;
76
+ --border-radius-md: 10px;
77
+ --border-radius-lg: 14px;
78
+ --border-radius-xl: 20px;
79
+ --border-radius-full: 9999px;
80
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
81
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
82
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
83
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
84
+ --font-size-xs: 12px;
85
+ --font-size-sm: 14px;
86
+ --font-size-md: 16px;
87
+ --font-size-lg: 18px;
88
+ --font-size-xl: 20px;
89
+ --font-weight-normal: 400;
90
+ --font-weight-medium: 500;
91
+ --font-weight-semibold: 600;
92
+ --font-weight-bold: 700;
93
+ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
94
+ --font-family-mono: 'Fira Code', monospace;
95
+ --text-color: var(--font-color-primary);
96
+ --header-color: var(--font-color-heading);
97
+ --link-color: var(--primary-700);
98
+ --link-hover-color: var(--primary-900);
99
+ --transition-fast: 0.15s ease;
100
+ --transition-normal: 0.3s ease;
101
+ --transition-slow: 0.5s ease;
102
+ --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
103
+ --button-border-radius: var(--border-radius-md);
104
+ --button-font-size-sm: var(--font-size-sm);
105
+ --button-font-size-md: var(--font-size-md);
106
+ --button-font-size-lg: var(--font-size-lg);
107
+ --button-bg-default: #334155;
108
+ --button-text-default: #ffffff;
109
+ --button-hover-bg-default: #475569;
110
+ --button-hover-text-default: #ffffff;
111
+ --button-bg-primary: #6366f1;
112
+ --button-text-primary: #ffffff;
113
+ --button-hover-bg-primary: #4f46e5;
114
+ --button-hover-text-primary: #ffffff;
115
+ --button-bg-success: #10b981;
116
+ --button-text-success: #ffffff;
117
+ --button-hover-bg-success: #059669;
118
+ --button-hover-text-success: #ffffff;
119
+ --button-bg-warning: #f59e0b;
120
+ --button-text-warning: #0f172a;
121
+ --button-hover-bg-warning: #d97706;
122
+ --button-hover-text-warning: #0f172a;
123
+ --button-bg-danger: #f43f5e;
124
+ --button-text-danger: #ffffff;
125
+ --button-hover-bg-danger: #e11d48;
126
+ --button-hover-text-danger: #ffffff;
127
+ --button-bg-info: #0ea5e9;
128
+ --button-text-info: #ffffff;
129
+ --button-hover-bg-info: #0284c7;
130
+ --button-hover-text-info: #ffffff;
131
+ --button-bg-light: #1e293b;
132
+ --button-text-light: #f8fafc;
133
+ --button-hover-bg-light: #334155;
134
+ --button-hover-text-light: #ffffff;
135
+ --button-bg-dark: #0f172a;
136
+ --button-text-dark: #ffffff;
137
+ --button-hover-bg-dark: #1e293b;
138
+ --button-hover-text-dark: #ffffff;
139
+ --input-bg: #0f172a;
140
+ --input-border-radius: var(--border-radius-sm);
141
+ --input-border-color: #334155;
142
+ --input-border: 1px solid var(--input-border-color);
143
+ --input-hover-border-color: #475569;
144
+ --input-focus-border-color: #6366f1;
145
+ --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
146
+ --input-height: 44px;
147
+ --table-border-color: #334155;
148
+ --table-header-bg: #1e293b;
149
+ --table-header-color: #f8fafc;
150
+ --table-row-bg: #0b0f19;
151
+ --table-row-alt-bg: #0f172a;
152
+ --table-row-hover-bg: #1e293b;
153
+ --table-row-selected-bg: #312e81;
154
+ --table-row-text-color: #f8fafc;
155
+ --panel-bg-default: #0f172a;
156
+ --panel-header-bg-default: #1e293b;
157
+ --panel-footer-bg-default: #0f172a;
158
+ --checkbox-bg: #0f172a;
159
+ --checkbox-checked-bg: #6366f1;
160
+ --checkbox-border-color: #475569;
161
+ --layout-header-height: 60px;
162
+ --layout-header-bg: #0f172a;
163
+ --layout-sidebar-width: 240px;
164
+ --layout-sidebar-bg: #090d16;
165
+ --layout-content-bg: #0b0f19;
166
+ }
package/dist/runtime/plugin.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: any;
2
+ export default _default;
package/dist/runtime/plugin.js ADDED
@@ -0,0 +1,7 @@
1
+ import { defineNuxtPlugin } from "#app";
2
+ import { registerPresetComponents } from "#imports";
3
+ export default defineNuxtPlugin(() => {
4
+ if (typeof registerPresetComponents === "function") {
5
+ registerPresetComponents("dark", {});
6
+ }
7
+ });
package/dist/types.d.mts ADDED
@@ -0,0 +1,7 @@
1
+ import type { NuxtModule } from '@nuxt/schema'
2
+
3
+ import type { default as Module } from './module.mjs'
4
+
5
+ export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
6
+
7
+ export { default } from './module.mjs'
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "@katlux/preset-dark",
3
+ "version": "0.1.0-beta.2",
4
+ "description": "Sleek Dark Mode design preset and styling variables for Katlux components",
5
+ "author": "Katlux",
6
+ "license": "Apache-2.0",
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "main": "./dist/module.mjs",
11
+ "scripts": {
12
+ "build": "nuxt-module-build build",
13
+ "dev": "nuxt-module-build build --stub",
14
+ "prepublishOnly": "npm run build"
15
+ },
16
+ "exports": {
17
+ ".": {
18
+ "import": "./dist/module.mjs"
19
+ },
20
+ "./dist/runtime/assets/*": "./dist/runtime/assets/*"
21
+ },
22
+ "dependencies": {
23
+ "@katlux/toolkit": "*",
24
+ "@nuxt/kit": "^3.12.0"
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ]
29
+ }