@galvyn-io/design 0.1.0

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.
@@ -0,0 +1,160 @@
1
+ 'use strict';
2
+
3
+ // src/tailwind/preset.ts
4
+ var galvynPreset = {
5
+ // Preset doesn't specify content — consuming project does
6
+ content: [],
7
+ darkMode: "class",
8
+ theme: {
9
+ extend: {
10
+ /* ── Colors (all reference CSS variables) ── */
11
+ colors: {
12
+ galvyn: {
13
+ bg: {
14
+ "000": "var(--galvyn-bg-000)",
15
+ "100": "var(--galvyn-bg-100)",
16
+ "200": "var(--galvyn-bg-200)",
17
+ "300": "var(--galvyn-bg-300)"
18
+ },
19
+ surface: {
20
+ "100": "var(--galvyn-surface-100)",
21
+ "200": "var(--galvyn-surface-200)",
22
+ "300": "var(--galvyn-surface-300)",
23
+ hover: "var(--galvyn-surface-hover)",
24
+ active: "var(--galvyn-surface-active)"
25
+ },
26
+ border: {
27
+ "100": "var(--galvyn-border-100)",
28
+ "200": "var(--galvyn-border-200)",
29
+ "300": "var(--galvyn-border-300)",
30
+ "400": "var(--galvyn-border-400)",
31
+ focus: "var(--galvyn-border-focus)"
32
+ },
33
+ text: {
34
+ "000": "var(--galvyn-text-000)",
35
+ "100": "var(--galvyn-text-100)",
36
+ "200": "var(--galvyn-text-200)",
37
+ "300": "var(--galvyn-text-300)",
38
+ "400": "var(--galvyn-text-400)",
39
+ "500": "var(--galvyn-text-500)"
40
+ },
41
+ accent: {
42
+ "50": "var(--galvyn-accent-50)",
43
+ "100": "var(--galvyn-accent-100)",
44
+ "200": "var(--galvyn-accent-200)",
45
+ "300": "var(--galvyn-accent-300)",
46
+ "400": "var(--galvyn-accent-400)",
47
+ "500": "var(--galvyn-accent-500)",
48
+ text: "var(--galvyn-accent-text)"
49
+ },
50
+ success: {
51
+ DEFAULT: "var(--galvyn-success)",
52
+ muted: "var(--galvyn-success-muted)"
53
+ },
54
+ warning: {
55
+ DEFAULT: "var(--galvyn-warning)",
56
+ muted: "var(--galvyn-warning-muted)"
57
+ },
58
+ error: {
59
+ DEFAULT: "var(--galvyn-error)",
60
+ muted: "var(--galvyn-error-muted)"
61
+ },
62
+ info: {
63
+ DEFAULT: "var(--galvyn-info)",
64
+ muted: "var(--galvyn-info-muted)"
65
+ }
66
+ }
67
+ },
68
+ /* ── Typography ──────────────────────── */
69
+ fontFamily: {
70
+ "galvyn-sans": ["var(--galvyn-font-sans)"],
71
+ "galvyn-mono": ["var(--galvyn-font-mono)"],
72
+ "galvyn-display": ["var(--galvyn-font-display)"]
73
+ },
74
+ fontSize: {
75
+ "galvyn-2xs": ["0.625rem", { lineHeight: "0.875rem", letterSpacing: "0.04em" }],
76
+ "galvyn-xs": ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.02em" }],
77
+ "galvyn-sm": ["0.8125rem", { lineHeight: "1.25rem", letterSpacing: "0.01em" }],
78
+ "galvyn-base": ["0.875rem", { lineHeight: "1.375rem", letterSpacing: "0" }],
79
+ "galvyn-lg": ["1rem", { lineHeight: "1.5rem", letterSpacing: "-0.01em" }],
80
+ "galvyn-xl": ["1.125rem", { lineHeight: "1.625rem", letterSpacing: "-0.015em" }],
81
+ "galvyn-2xl": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
82
+ "galvyn-3xl": ["1.875rem", { lineHeight: "2.25rem", letterSpacing: "-0.025em" }],
83
+ "galvyn-4xl": ["2.5rem", { lineHeight: "3rem", letterSpacing: "-0.03em" }]
84
+ },
85
+ /* ── Border Radius ───────────────────── */
86
+ borderRadius: {
87
+ "galvyn-sm": "4px",
88
+ "galvyn-md": "6px",
89
+ "galvyn-lg": "8px",
90
+ "galvyn-xl": "12px",
91
+ "galvyn-2xl": "16px"
92
+ },
93
+ /* ── Shadows ─────────────────────────── */
94
+ boxShadow: {
95
+ "galvyn-xs": "var(--galvyn-shadow-xs)",
96
+ "galvyn-sm": "var(--galvyn-shadow-sm)",
97
+ "galvyn-md": "var(--galvyn-shadow-md)",
98
+ "galvyn-lg": "var(--galvyn-shadow-lg)",
99
+ "galvyn-glow": "var(--galvyn-shadow-glow)",
100
+ "galvyn-glow-lg": "var(--galvyn-shadow-glow-lg)",
101
+ "galvyn-focus": "0 0 0 2px var(--galvyn-bg-000), 0 0 0 4px var(--galvyn-border-focus)"
102
+ },
103
+ /* ── Motion ──────────────────────────── */
104
+ transitionDuration: {
105
+ "galvyn-instant": "50ms",
106
+ "galvyn-fast": "100ms",
107
+ "galvyn-normal": "200ms",
108
+ "galvyn-slow": "300ms",
109
+ "galvyn-slower": "500ms"
110
+ },
111
+ transitionTimingFunction: {
112
+ "galvyn": "cubic-bezier(0.16, 1, 0.3, 1)",
113
+ "galvyn-in": "cubic-bezier(0.55, 0, 1, 0.45)",
114
+ "galvyn-out": "cubic-bezier(0, 0.55, 0.45, 1)",
115
+ "galvyn-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
116
+ "galvyn-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
117
+ },
118
+ /* ── Z-Index ─────────────────────────── */
119
+ zIndex: {
120
+ "galvyn-dropdown": "50",
121
+ "galvyn-sticky": "100",
122
+ "galvyn-overlay": "200",
123
+ "galvyn-modal": "300",
124
+ "galvyn-popover": "400",
125
+ "galvyn-toast": "500",
126
+ "galvyn-tooltip": "600",
127
+ "galvyn-command": "700"
128
+ },
129
+ /* ── Animations ──────────────────────── */
130
+ keyframes: {
131
+ "galvyn-fade-in": {
132
+ "0%": { opacity: "0", transform: "translateY(4px)" },
133
+ "100%": { opacity: "1", transform: "translateY(0)" }
134
+ },
135
+ "galvyn-fade-out": {
136
+ "0%": { opacity: "1", transform: "translateY(0)" },
137
+ "100%": { opacity: "0", transform: "translateY(4px)" }
138
+ },
139
+ "galvyn-scale-in": {
140
+ "0%": { opacity: "0", transform: "scale(0.95)" },
141
+ "100%": { opacity: "1", transform: "scale(1)" }
142
+ },
143
+ "galvyn-slide-up": {
144
+ "0%": { opacity: "0", transform: "translateY(8px)" },
145
+ "100%": { opacity: "1", transform: "translateY(0)" }
146
+ }
147
+ },
148
+ animation: {
149
+ "galvyn-fade-in": "galvyn-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
150
+ "galvyn-fade-out": "galvyn-fade-out 150ms cubic-bezier(0.55, 0, 1, 0.45)",
151
+ "galvyn-scale-in": "galvyn-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
152
+ "galvyn-slide-up": "galvyn-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1)"
153
+ }
154
+ }
155
+ },
156
+ plugins: []
157
+ };
158
+ var preset_default = galvynPreset;
159
+
160
+ module.exports = preset_default;
@@ -0,0 +1,21 @@
1
+ import { Config } from 'tailwindcss';
2
+
3
+ /**
4
+ * GALVYN DESIGN SYSTEM — Tailwind Preset
5
+ *
6
+ * Usage in your tailwind.config.ts:
7
+ *
8
+ * import galvynPreset from '@galvyn-io/design/preset';
9
+ *
10
+ * export default {
11
+ * presets: [galvynPreset],
12
+ * // ... your project config
13
+ * } satisfies Config;
14
+ *
15
+ * This EXTENDS your existing config (including shadcn).
16
+ * It does NOT override — all galvyn utilities are namespaced
17
+ * under `galvyn-*` to avoid collisions.
18
+ */
19
+ declare const galvynPreset: Config;
20
+
21
+ export { galvynPreset as default };
@@ -0,0 +1,21 @@
1
+ import { Config } from 'tailwindcss';
2
+
3
+ /**
4
+ * GALVYN DESIGN SYSTEM — Tailwind Preset
5
+ *
6
+ * Usage in your tailwind.config.ts:
7
+ *
8
+ * import galvynPreset from '@galvyn-io/design/preset';
9
+ *
10
+ * export default {
11
+ * presets: [galvynPreset],
12
+ * // ... your project config
13
+ * } satisfies Config;
14
+ *
15
+ * This EXTENDS your existing config (including shadcn).
16
+ * It does NOT override — all galvyn utilities are namespaced
17
+ * under `galvyn-*` to avoid collisions.
18
+ */
19
+ declare const galvynPreset: Config;
20
+
21
+ export { galvynPreset as default };
package/dist/preset.js ADDED
@@ -0,0 +1,158 @@
1
+ // src/tailwind/preset.ts
2
+ var galvynPreset = {
3
+ // Preset doesn't specify content — consuming project does
4
+ content: [],
5
+ darkMode: "class",
6
+ theme: {
7
+ extend: {
8
+ /* ── Colors (all reference CSS variables) ── */
9
+ colors: {
10
+ galvyn: {
11
+ bg: {
12
+ "000": "var(--galvyn-bg-000)",
13
+ "100": "var(--galvyn-bg-100)",
14
+ "200": "var(--galvyn-bg-200)",
15
+ "300": "var(--galvyn-bg-300)"
16
+ },
17
+ surface: {
18
+ "100": "var(--galvyn-surface-100)",
19
+ "200": "var(--galvyn-surface-200)",
20
+ "300": "var(--galvyn-surface-300)",
21
+ hover: "var(--galvyn-surface-hover)",
22
+ active: "var(--galvyn-surface-active)"
23
+ },
24
+ border: {
25
+ "100": "var(--galvyn-border-100)",
26
+ "200": "var(--galvyn-border-200)",
27
+ "300": "var(--galvyn-border-300)",
28
+ "400": "var(--galvyn-border-400)",
29
+ focus: "var(--galvyn-border-focus)"
30
+ },
31
+ text: {
32
+ "000": "var(--galvyn-text-000)",
33
+ "100": "var(--galvyn-text-100)",
34
+ "200": "var(--galvyn-text-200)",
35
+ "300": "var(--galvyn-text-300)",
36
+ "400": "var(--galvyn-text-400)",
37
+ "500": "var(--galvyn-text-500)"
38
+ },
39
+ accent: {
40
+ "50": "var(--galvyn-accent-50)",
41
+ "100": "var(--galvyn-accent-100)",
42
+ "200": "var(--galvyn-accent-200)",
43
+ "300": "var(--galvyn-accent-300)",
44
+ "400": "var(--galvyn-accent-400)",
45
+ "500": "var(--galvyn-accent-500)",
46
+ text: "var(--galvyn-accent-text)"
47
+ },
48
+ success: {
49
+ DEFAULT: "var(--galvyn-success)",
50
+ muted: "var(--galvyn-success-muted)"
51
+ },
52
+ warning: {
53
+ DEFAULT: "var(--galvyn-warning)",
54
+ muted: "var(--galvyn-warning-muted)"
55
+ },
56
+ error: {
57
+ DEFAULT: "var(--galvyn-error)",
58
+ muted: "var(--galvyn-error-muted)"
59
+ },
60
+ info: {
61
+ DEFAULT: "var(--galvyn-info)",
62
+ muted: "var(--galvyn-info-muted)"
63
+ }
64
+ }
65
+ },
66
+ /* ── Typography ──────────────────────── */
67
+ fontFamily: {
68
+ "galvyn-sans": ["var(--galvyn-font-sans)"],
69
+ "galvyn-mono": ["var(--galvyn-font-mono)"],
70
+ "galvyn-display": ["var(--galvyn-font-display)"]
71
+ },
72
+ fontSize: {
73
+ "galvyn-2xs": ["0.625rem", { lineHeight: "0.875rem", letterSpacing: "0.04em" }],
74
+ "galvyn-xs": ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.02em" }],
75
+ "galvyn-sm": ["0.8125rem", { lineHeight: "1.25rem", letterSpacing: "0.01em" }],
76
+ "galvyn-base": ["0.875rem", { lineHeight: "1.375rem", letterSpacing: "0" }],
77
+ "galvyn-lg": ["1rem", { lineHeight: "1.5rem", letterSpacing: "-0.01em" }],
78
+ "galvyn-xl": ["1.125rem", { lineHeight: "1.625rem", letterSpacing: "-0.015em" }],
79
+ "galvyn-2xl": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
80
+ "galvyn-3xl": ["1.875rem", { lineHeight: "2.25rem", letterSpacing: "-0.025em" }],
81
+ "galvyn-4xl": ["2.5rem", { lineHeight: "3rem", letterSpacing: "-0.03em" }]
82
+ },
83
+ /* ── Border Radius ───────────────────── */
84
+ borderRadius: {
85
+ "galvyn-sm": "4px",
86
+ "galvyn-md": "6px",
87
+ "galvyn-lg": "8px",
88
+ "galvyn-xl": "12px",
89
+ "galvyn-2xl": "16px"
90
+ },
91
+ /* ── Shadows ─────────────────────────── */
92
+ boxShadow: {
93
+ "galvyn-xs": "var(--galvyn-shadow-xs)",
94
+ "galvyn-sm": "var(--galvyn-shadow-sm)",
95
+ "galvyn-md": "var(--galvyn-shadow-md)",
96
+ "galvyn-lg": "var(--galvyn-shadow-lg)",
97
+ "galvyn-glow": "var(--galvyn-shadow-glow)",
98
+ "galvyn-glow-lg": "var(--galvyn-shadow-glow-lg)",
99
+ "galvyn-focus": "0 0 0 2px var(--galvyn-bg-000), 0 0 0 4px var(--galvyn-border-focus)"
100
+ },
101
+ /* ── Motion ──────────────────────────── */
102
+ transitionDuration: {
103
+ "galvyn-instant": "50ms",
104
+ "galvyn-fast": "100ms",
105
+ "galvyn-normal": "200ms",
106
+ "galvyn-slow": "300ms",
107
+ "galvyn-slower": "500ms"
108
+ },
109
+ transitionTimingFunction: {
110
+ "galvyn": "cubic-bezier(0.16, 1, 0.3, 1)",
111
+ "galvyn-in": "cubic-bezier(0.55, 0, 1, 0.45)",
112
+ "galvyn-out": "cubic-bezier(0, 0.55, 0.45, 1)",
113
+ "galvyn-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
114
+ "galvyn-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
115
+ },
116
+ /* ── Z-Index ─────────────────────────── */
117
+ zIndex: {
118
+ "galvyn-dropdown": "50",
119
+ "galvyn-sticky": "100",
120
+ "galvyn-overlay": "200",
121
+ "galvyn-modal": "300",
122
+ "galvyn-popover": "400",
123
+ "galvyn-toast": "500",
124
+ "galvyn-tooltip": "600",
125
+ "galvyn-command": "700"
126
+ },
127
+ /* ── Animations ──────────────────────── */
128
+ keyframes: {
129
+ "galvyn-fade-in": {
130
+ "0%": { opacity: "0", transform: "translateY(4px)" },
131
+ "100%": { opacity: "1", transform: "translateY(0)" }
132
+ },
133
+ "galvyn-fade-out": {
134
+ "0%": { opacity: "1", transform: "translateY(0)" },
135
+ "100%": { opacity: "0", transform: "translateY(4px)" }
136
+ },
137
+ "galvyn-scale-in": {
138
+ "0%": { opacity: "0", transform: "scale(0.95)" },
139
+ "100%": { opacity: "1", transform: "scale(1)" }
140
+ },
141
+ "galvyn-slide-up": {
142
+ "0%": { opacity: "0", transform: "translateY(8px)" },
143
+ "100%": { opacity: "1", transform: "translateY(0)" }
144
+ }
145
+ },
146
+ animation: {
147
+ "galvyn-fade-in": "galvyn-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
148
+ "galvyn-fade-out": "galvyn-fade-out 150ms cubic-bezier(0.55, 0, 1, 0.45)",
149
+ "galvyn-scale-in": "galvyn-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
150
+ "galvyn-slide-up": "galvyn-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1)"
151
+ }
152
+ }
153
+ },
154
+ plugins: []
155
+ };
156
+ var preset_default = galvynPreset;
157
+
158
+ export { preset_default as default };
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@galvyn-io/design",
3
+ "version": "0.1.0",
4
+ "description": "Galvyn Design System — dark-first, monotone with surgical accent color. Tailwind preset + CSS variables + React components.",
5
+ "author": "Yatharth Gupta",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/galvyn-io/galvyn-design.git"
10
+ },
11
+ "type": "module",
12
+ "main": "./dist/index.cjs",
13
+ "module": "./dist/index.js",
14
+ "types": "./dist/index.d.ts",
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/index.d.ts",
18
+ "import": "./dist/index.js",
19
+ "require": "./dist/index.cjs"
20
+ },
21
+ "./css": "./dist/galvyn.css",
22
+ "./preset": {
23
+ "types": "./dist/preset.d.ts",
24
+ "import": "./dist/preset.js",
25
+ "require": "./dist/preset.cjs"
26
+ },
27
+ "./components": {
28
+ "types": "./dist/components/index.d.ts",
29
+ "import": "./dist/components/index.js",
30
+ "require": "./dist/components/index.cjs"
31
+ },
32
+ "./tokens": "./dist/tokens.json"
33
+ },
34
+ "files": [
35
+ "dist",
36
+ "README.md"
37
+ ],
38
+ "scripts": {
39
+ "build": "tsup && npm run build:css",
40
+ "build:css": "cp src/css/galvyn.css dist/galvyn.css",
41
+ "dev": "tsup --watch",
42
+ "lint": "tsc --noEmit",
43
+ "prepublishOnly": "npm run build",
44
+ "release": "npm run build && npm publish --access public"
45
+ },
46
+ "devDependencies": {
47
+ "@types/react": "^18.2.0",
48
+ "react": "^18.2.0",
49
+ "react-dom": "^18.2.0",
50
+ "tailwindcss": "^3.4.0",
51
+ "tsup": "^8.0.0",
52
+ "typescript": "^5.3.0"
53
+ },
54
+ "peerDependencies": {
55
+ "react": ">=18.0.0",
56
+ "react-dom": ">=18.0.0",
57
+ "tailwindcss": ">=3.4.0"
58
+ },
59
+ "peerDependenciesMeta": {
60
+ "react": { "optional": true },
61
+ "react-dom": { "optional": true }
62
+ },
63
+ "keywords": [
64
+ "design-system",
65
+ "tailwind",
66
+ "tailwind-preset",
67
+ "react",
68
+ "nextjs",
69
+ "shadcn",
70
+ "dark-mode",
71
+ "css-variables"
72
+ ]
73
+ }