@novie/ui 0.1.13 → 0.1.14

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 (3) hide show
  1. package/package.json +3 -1
  2. package/tailwind.config.ts +2 -169
  3. package/tailwind.preset.ts +176 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@novie/ui",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "description": "Novie design system component library built on shadcn/ui conventions",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,10 +22,12 @@
22
22
  }
23
23
  },
24
24
  "./styles.css": "./dist/index.css",
25
+ "./tailwind-preset": "./tailwind.preset.ts",
25
26
  "./tailwind.config": "./tailwind.config.ts"
26
27
  },
27
28
  "files": [
28
29
  "dist",
30
+ "tailwind.preset.ts",
29
31
  "tailwind.config.ts",
30
32
  "src/index.css"
31
33
  ],
package/tailwind.config.ts CHANGED
@@ -1,181 +1,14 @@
1
1
  import type { Config } from "tailwindcss"
2
+ import noviePreset from "./tailwind.preset"
2
3
 
3
4
  const config: Config = {
4
- darkMode: "class",
5
+ presets: [noviePreset],
5
6
  content: ["./src/**/*.{ts,tsx}"],
6
7
  safelist: [
7
8
  { pattern: /^bg-(success|warning|error|info|foreground|destructive)/ },
8
9
  { pattern: /^text-(success|warning|error|info)-foreground/ },
9
10
  { pattern: /^border-(success|warning|error|info)/ },
10
11
  ],
11
- theme: {
12
- extend: {
13
- colors: {
14
- border: "hsl(var(--border))",
15
- input: "hsl(var(--input))",
16
- ring: "hsl(var(--ring))",
17
- background: "hsl(var(--background))",
18
- foreground: "hsl(var(--foreground))",
19
- primary: {
20
- DEFAULT: "hsl(var(--primary))",
21
- foreground: "hsl(var(--primary-foreground))",
22
- },
23
- secondary: {
24
- DEFAULT: "hsl(var(--secondary))",
25
- foreground: "hsl(var(--secondary-foreground))",
26
- },
27
- destructive: {
28
- DEFAULT: "hsl(var(--destructive))",
29
- foreground: "hsl(var(--destructive-foreground))",
30
- },
31
- muted: {
32
- DEFAULT: "hsl(var(--muted))",
33
- foreground: "hsl(var(--muted-foreground))",
34
- },
35
- accent: {
36
- DEFAULT: "hsl(var(--accent))",
37
- foreground: "hsl(var(--accent-foreground))",
38
- },
39
- popover: {
40
- DEFAULT: "hsl(var(--popover))",
41
- foreground: "hsl(var(--popover-foreground))",
42
- },
43
- card: {
44
- DEFAULT: "hsl(var(--card))",
45
- foreground: "hsl(var(--card-foreground))",
46
- },
47
- success: {
48
- DEFAULT: "hsl(var(--success))",
49
- foreground: "hsl(var(--success-foreground))",
50
- secondary: "hsl(var(--success-secondary))",
51
- tertiary: "hsl(var(--success-tertiary))",
52
- },
53
- warning: {
54
- DEFAULT: "hsl(var(--warning))",
55
- foreground: "hsl(var(--warning-foreground))",
56
- secondary: "hsl(var(--warning-secondary))",
57
- tertiary: "hsl(var(--warning-tertiary))",
58
- },
59
- info: {
60
- DEFAULT: "hsl(var(--info))",
61
- foreground: "hsl(var(--info-foreground))",
62
- secondary: "hsl(var(--info-secondary))",
63
- tertiary: "hsl(var(--info-tertiary))",
64
- },
65
- error: {
66
- DEFAULT: "hsl(var(--error))",
67
- foreground: "hsl(var(--error-foreground))",
68
- secondary: "hsl(var(--error-secondary))",
69
- tertiary: "hsl(var(--error-tertiary))",
70
- },
71
- page: {
72
- DEFAULT: "hsl(var(--page))",
73
- secondary: "hsl(var(--page-secondary))",
74
- tertiary: "hsl(var(--page-tertiary))",
75
- },
76
- "surface-inset": "hsl(var(--surface-inset))",
77
- "surface-elevated": "hsl(var(--surface-elevated))",
78
- interactive: {
79
- DEFAULT: "hsl(var(--interactive))",
80
- disabled: "hsl(var(--interactive-disabled))",
81
- secondary: "hsl(var(--interactive-secondary))",
82
- tertiary: "hsl(var(--interactive-tertiary))",
83
- active: "hsl(var(--interactive-active))",
84
- },
85
- scenario: {
86
- fern: "hsl(var(--scenario-fern))",
87
- orange: "hsl(var(--scenario-orange))",
88
- red: "hsl(var(--scenario-red))",
89
- slate: "hsl(var(--scenario-slate))",
90
- },
91
- },
92
- keyframes: {
93
- "progress-indeterminate": {
94
- "0%": { transform: "translateX(-100%)" },
95
- "100%": { transform: "translateX(200%)" },
96
- },
97
- },
98
- animation: {
99
- "progress-indeterminate":
100
- "progress-indeterminate 1.5s ease-in-out infinite",
101
- },
102
- spacing: {
103
- "13": "3.25rem", // 52px
104
- "15": "3.75rem", // 60px
105
- "17": "4.25rem", // 68px
106
- "18": "4.5rem", // 72px
107
- "19": "4.75rem", // 76px
108
- },
109
- fontFamily: {
110
- sans: [
111
- "var(--font-sans, 'Google Sans Flex Variable')",
112
- "ui-sans-serif",
113
- "system-ui",
114
- "-apple-system",
115
- "sans-serif",
116
- ],
117
- },
118
- fontSize: {
119
- /* Headings */
120
- display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
121
- oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
122
- h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
123
- h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
124
- h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
125
- h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
126
- /* Body */
127
- "body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
128
- "body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
129
- body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
130
- "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
131
- caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
132
- overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
133
- /* UI — Navigation & Links */
134
- "main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
135
- "link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
136
- "link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
137
- /* UI — Buttons */
138
- "button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
139
- button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
140
- "button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
141
- /* UI — Form & Data */
142
- "select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
143
- "search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
144
- "notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
145
- "report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
146
- label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
147
- "label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
148
- "input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
149
- "input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
150
- "help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
151
- tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
152
- "table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
153
- },
154
- borderRadius: {
155
- lg: "var(--radius)",
156
- md: "calc(var(--radius) - 2px)",
157
- sm: "calc(var(--radius) - 4px)",
158
- },
159
- width: {
160
- "sidebar-mini": "var(--sidebar-width-mini)",
161
- "sidebar-full": "var(--sidebar-width-full)",
162
- },
163
- maxWidth: {
164
- "container-full": "1136px",
165
- "container-chat": "800px",
166
- "container-narrow": "640px",
167
- },
168
- gap: {
169
- "panel": "var(--panel-gap)",
170
- "card": "var(--card-gap)",
171
- },
172
- padding: {
173
- "card": "var(--card-padding)",
174
- "content-gutter": "var(--content-gutter)",
175
- },
176
- },
177
- },
178
- plugins: [],
179
12
  }
180
13
 
181
14
  export default config
package/tailwind.preset.ts ADDED
@@ -0,0 +1,176 @@
1
+ import type { Config } from "tailwindcss"
2
+
3
+ const noviePreset: Config = {
4
+ darkMode: "class",
5
+ content: [],
6
+ theme: {
7
+ extend: {
8
+ colors: {
9
+ border: "hsl(var(--border))",
10
+ input: "hsl(var(--input))",
11
+ ring: "hsl(var(--ring))",
12
+ background: "hsl(var(--background))",
13
+ foreground: "hsl(var(--foreground))",
14
+ primary: {
15
+ DEFAULT: "hsl(var(--primary))",
16
+ foreground: "hsl(var(--primary-foreground))",
17
+ },
18
+ secondary: {
19
+ DEFAULT: "hsl(var(--secondary))",
20
+ foreground: "hsl(var(--secondary-foreground))",
21
+ },
22
+ destructive: {
23
+ DEFAULT: "hsl(var(--destructive))",
24
+ foreground: "hsl(var(--destructive-foreground))",
25
+ },
26
+ muted: {
27
+ DEFAULT: "hsl(var(--muted))",
28
+ foreground: "hsl(var(--muted-foreground))",
29
+ },
30
+ accent: {
31
+ DEFAULT: "hsl(var(--accent))",
32
+ foreground: "hsl(var(--accent-foreground))",
33
+ },
34
+ popover: {
35
+ DEFAULT: "hsl(var(--popover))",
36
+ foreground: "hsl(var(--popover-foreground))",
37
+ },
38
+ card: {
39
+ DEFAULT: "hsl(var(--card))",
40
+ foreground: "hsl(var(--card-foreground))",
41
+ },
42
+ success: {
43
+ DEFAULT: "hsl(var(--success))",
44
+ foreground: "hsl(var(--success-foreground))",
45
+ secondary: "hsl(var(--success-secondary))",
46
+ tertiary: "hsl(var(--success-tertiary))",
47
+ },
48
+ warning: {
49
+ DEFAULT: "hsl(var(--warning))",
50
+ foreground: "hsl(var(--warning-foreground))",
51
+ secondary: "hsl(var(--warning-secondary))",
52
+ tertiary: "hsl(var(--warning-tertiary))",
53
+ },
54
+ info: {
55
+ DEFAULT: "hsl(var(--info))",
56
+ foreground: "hsl(var(--info-foreground))",
57
+ secondary: "hsl(var(--info-secondary))",
58
+ tertiary: "hsl(var(--info-tertiary))",
59
+ },
60
+ error: {
61
+ DEFAULT: "hsl(var(--error))",
62
+ foreground: "hsl(var(--error-foreground))",
63
+ secondary: "hsl(var(--error-secondary))",
64
+ tertiary: "hsl(var(--error-tertiary))",
65
+ },
66
+ page: {
67
+ DEFAULT: "hsl(var(--page))",
68
+ secondary: "hsl(var(--page-secondary))",
69
+ tertiary: "hsl(var(--page-tertiary))",
70
+ },
71
+ "surface-inset": "hsl(var(--surface-inset))",
72
+ "surface-elevated": "hsl(var(--surface-elevated))",
73
+ interactive: {
74
+ DEFAULT: "hsl(var(--interactive))",
75
+ disabled: "hsl(var(--interactive-disabled))",
76
+ secondary: "hsl(var(--interactive-secondary))",
77
+ tertiary: "hsl(var(--interactive-tertiary))",
78
+ active: "hsl(var(--interactive-active))",
79
+ },
80
+ scenario: {
81
+ fern: "hsl(var(--scenario-fern))",
82
+ orange: "hsl(var(--scenario-orange))",
83
+ red: "hsl(var(--scenario-red))",
84
+ slate: "hsl(var(--scenario-slate))",
85
+ },
86
+ },
87
+ spacing: {
88
+ "13": "3.25rem",
89
+ "15": "3.75rem",
90
+ "17": "4.25rem",
91
+ "18": "4.5rem",
92
+ "19": "4.75rem",
93
+ },
94
+ fontFamily: {
95
+ sans: [
96
+ "var(--font-sans, 'Google Sans Flex Variable')",
97
+ "ui-sans-serif",
98
+ "system-ui",
99
+ "-apple-system",
100
+ "sans-serif",
101
+ ],
102
+ },
103
+ fontSize: {
104
+ /* Headings */
105
+ display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
106
+ oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
107
+ h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
108
+ h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
109
+ h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
110
+ h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
111
+ /* Body */
112
+ "body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
113
+ "body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
114
+ body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
115
+ "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
116
+ caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
117
+ overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
118
+ /* UI — Navigation & Links */
119
+ "main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
120
+ "link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
121
+ "link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
122
+ /* UI — Buttons */
123
+ "button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
124
+ button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
125
+ "button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
126
+ /* UI — Form & Data */
127
+ "select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
128
+ "search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
129
+ "notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
130
+ "report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
131
+ label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
132
+ "label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
133
+ "input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
134
+ "input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
135
+ "help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
136
+ tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
137
+ "table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
138
+ },
139
+ borderRadius: {
140
+ lg: "var(--radius)",
141
+ md: "calc(var(--radius) - 2px)",
142
+ sm: "calc(var(--radius) - 4px)",
143
+ },
144
+ width: {
145
+ "sidebar-mini": "var(--sidebar-width-mini)",
146
+ "sidebar-full": "var(--sidebar-width-full)",
147
+ },
148
+ maxWidth: {
149
+ "container-full": "1136px",
150
+ "container-chat": "800px",
151
+ "container-narrow": "640px",
152
+ },
153
+ gap: {
154
+ "panel": "var(--panel-gap)",
155
+ "card": "var(--card-gap)",
156
+ },
157
+ padding: {
158
+ "card": "var(--card-padding)",
159
+ "content-gutter": "var(--content-gutter)",
160
+ },
161
+ keyframes: {
162
+ "progress-indeterminate": {
163
+ "0%": { transform: "translateX(-100%)" },
164
+ "100%": { transform: "translateX(200%)" },
165
+ },
166
+ },
167
+ animation: {
168
+ "progress-indeterminate":
169
+ "progress-indeterminate 1.5s ease-in-out infinite",
170
+ },
171
+ },
172
+ },
173
+ plugins: [],
174
+ }
175
+
176
+ export default noviePreset