@keenthemes/ktui 1.0.5 → 1.0.7
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.
- package/README.md +99 -99
- package/package.json +5 -1
- package/src/components/btn/btn.css +2 -2
- package/src/components/modal/modal.css +1 -1
package/README.md
CHANGED
|
@@ -25,99 +25,99 @@ Include KTUI variables in your Tailwind entry file `style.css`:
|
|
|
25
25
|
```css
|
|
26
26
|
/** Colors **/
|
|
27
27
|
:root {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
28
|
+
/** Base Colors **/
|
|
29
|
+
--background: oklch(1 0 0); /* --color-white */
|
|
30
|
+
--foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
31
|
+
--card: oklch(1 0 0); /* --color-white */
|
|
32
|
+
--card-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
33
|
+
--popover: oklch(1 0 0); /* --color-white */
|
|
34
|
+
--popover-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
35
|
+
--primary: oklch(62.3% 0.214 259.815); /* --color-blue-500 */
|
|
36
|
+
--primary-foreground: oklch(1 0 0); /* --color-white */
|
|
37
|
+
--secondary: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
|
|
38
|
+
--secondary-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
|
|
39
|
+
--muted: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
|
|
40
|
+
--muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
|
|
41
|
+
--accent: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
|
|
42
|
+
--accent-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
|
|
43
|
+
--destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
|
|
44
|
+
--destructive-foreground: oklch(1 0 0); /* --color-white */
|
|
45
|
+
--mono: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
46
|
+
--mono-foreground: oklch(1 0 0); /* --color-white */
|
|
47
|
+
|
|
48
|
+
/** Base Styles **/
|
|
49
|
+
--border: oklch(94% 0.004 286.32); /* between --color-zinc-100 and --color-zinc-200 */
|
|
50
|
+
--input: oklch(92% 0.004 286.32); /* --color-zinc-200 */
|
|
51
|
+
--ring: oklch(87.1% 0.006 286.286); /* --color-zinc-400 */
|
|
52
|
+
--radius: 0.5rem;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.dark {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
56
|
+
/** Base Colors **/
|
|
57
|
+
--background: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
58
|
+
--foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
|
|
59
|
+
--card: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
60
|
+
--card-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
|
|
61
|
+
--popover: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
|
|
62
|
+
--popover-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
|
|
63
|
+
--primary: oklch(54.6% 0.245 262.881); /* --color-blue-600 */
|
|
64
|
+
--primary-foreground: oklch(1 0 0); /* --color-white */
|
|
65
|
+
--secondary: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
|
|
66
|
+
--secondary-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
|
|
67
|
+
--muted: oklch(21% 0.006 285.885); /* --color-zinc-900 */
|
|
68
|
+
--muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
|
|
69
|
+
--accent: oklch(21% 0.006 285.885); /* --color-zinc-900 */
|
|
70
|
+
--accent-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
|
|
71
|
+
--destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
|
|
72
|
+
--destructive-foreground: oklch(1 0 0); /* --color-white */
|
|
73
|
+
--mono: oklch(87.1% 0.006 286.286); /* --color-zinc-300 */
|
|
74
|
+
--mono-foreground: oklch(0 0 0); /* --color-black */
|
|
75
|
+
|
|
76
|
+
/** Base Styles **/
|
|
77
|
+
--border: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
|
|
78
|
+
--input: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
|
|
79
|
+
--ring: oklch(27.4% 0.006 286.033); /* --color-zinc-600 */
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
/** Theme Setup **/
|
|
83
83
|
@theme inline {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
/** Base Colors **/
|
|
85
|
+
--color-background: var(--background);
|
|
86
|
+
--color-foreground: var(--foreground);
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
--color-card: var(--card);
|
|
89
|
+
--color-card-foreground: var(--card-foreground);
|
|
90
90
|
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
--color-popover: var(--popover);
|
|
92
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
--color-muted: var(--muted);
|
|
95
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
96
96
|
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
--color-accent: var(--accent);
|
|
98
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
99
99
|
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
--color-primary: var(--primary);
|
|
101
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
--color-secondary: var(--secondary);
|
|
104
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
105
105
|
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
--color-destructive: var(--destructive);
|
|
107
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
108
108
|
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
--color-mono: var(--mono);
|
|
110
|
+
--color-mono-foreground: var(--mono-foreground);
|
|
111
111
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
/** Base Styles **/
|
|
113
|
+
--color-border: var(--border);
|
|
114
|
+
--color-input: var(--input);
|
|
115
|
+
--color-ring: var(--ring);
|
|
116
116
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
118
|
+
--radius-lg: var(--radius);
|
|
119
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
120
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
121
121
|
}
|
|
122
122
|
```
|
|
123
123
|
|
|
@@ -149,7 +149,7 @@ Specify a font family of your choice in your Tailwind entry file `style.css`:
|
|
|
149
149
|
|
|
150
150
|
```css
|
|
151
151
|
@theme {
|
|
152
|
-
|
|
152
|
+
--default-font-family: Inter;
|
|
153
153
|
}
|
|
154
154
|
```
|
|
155
155
|
|
|
@@ -157,14 +157,14 @@ Include the font file:
|
|
|
157
157
|
|
|
158
158
|
```html
|
|
159
159
|
<html>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
160
|
+
<head>
|
|
161
|
+
...
|
|
162
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
163
|
+
...
|
|
164
|
+
</head>
|
|
165
|
+
<body className="antialiased">
|
|
166
|
+
....
|
|
167
|
+
</body>
|
|
168
168
|
</html>
|
|
169
169
|
```
|
|
170
170
|
|
|
@@ -176,17 +176,17 @@ Include KTUI JavaScript, Tailwind CSS, and fonts:
|
|
|
176
176
|
|
|
177
177
|
```html
|
|
178
178
|
<html>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
179
|
+
<head>
|
|
180
|
+
...
|
|
181
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
182
|
+
<link href="my_project_root/css/styles.css" rel="stylesheet"/>
|
|
183
|
+
...
|
|
184
|
+
</head>
|
|
185
|
+
<body className="antialiased">
|
|
186
|
+
....
|
|
187
|
+
</body>
|
|
188
|
+
<script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js">
|
|
189
|
+
</script>
|
|
190
190
|
</html>
|
|
191
191
|
```
|
|
192
192
|
|
|
@@ -199,7 +199,7 @@ To globally setup the RTL direction add a `dir="rtl"` attribute on the html as s
|
|
|
199
199
|
```html
|
|
200
200
|
<!-- Setup rtl mode -->
|
|
201
201
|
<html dir="rtl">
|
|
202
|
-
|
|
202
|
+
<!-- HTML markup -->
|
|
203
203
|
</html>
|
|
204
204
|
```
|
|
205
205
|
|
|
@@ -208,7 +208,7 @@ KTUI utilizes the logical CSS properties as the default method for handling RTL
|
|
|
208
208
|
```html
|
|
209
209
|
<!-- Using logical properties -->
|
|
210
210
|
<div class="text-start ps-5">
|
|
211
|
-
|
|
211
|
+
Example text
|
|
212
212
|
</div>
|
|
213
213
|
```
|
|
214
214
|
|
|
@@ -217,7 +217,7 @@ For specific cases, you can use the `rtl:*` Tailwind modifier to easily control
|
|
|
217
217
|
```html
|
|
218
218
|
<!-- Using rtl modifier -->
|
|
219
219
|
<div class="text-left pl-5 rtl:text-right rtl:pr-5">
|
|
220
|
-
|
|
220
|
+
Example text
|
|
221
221
|
</div>
|
|
222
222
|
```
|
|
223
223
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenthemes/ktui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Free & Open-Source Tailwind UI Components by Keenthemes",
|
|
5
5
|
"homepage": "https://ktui.io",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/keenthemes/ktui.git"
|
|
9
|
+
},
|
|
6
10
|
"keywords": [
|
|
7
11
|
"reui",
|
|
8
12
|
"keenthemes",
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
|
|
179
179
|
/* Size */
|
|
180
180
|
.kt-btn {
|
|
181
|
-
@apply h-8.5 rounded-md px-3 gap-1 text-[0.8125rem] leading-(--text-sm--line-height);
|
|
181
|
+
@apply h-8.5 rounded-md px-3 gap-1.5 text-[0.8125rem] leading-(--text-sm--line-height);
|
|
182
182
|
|
|
183
183
|
svg {
|
|
184
184
|
@apply size-4;
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
.kt-btn-sm {
|
|
213
|
-
@apply h-7 rounded-md px-2.5 gap-1 text-xs;
|
|
213
|
+
@apply h-7 rounded-md px-2.5 gap-1.25 text-xs;
|
|
214
214
|
|
|
215
215
|
svg {
|
|
216
216
|
@apply size-3.5;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.kt-modal-content {
|
|
40
|
-
@apply relative flex flex-col mx-auto rounded-lg shadow-md bg-popover text-popover-foreground;
|
|
40
|
+
@apply relative flex flex-col mx-auto rounded-lg shadow-md bg-popover text-popover-foreground border border-border;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.kt-modal-header {
|