@valerius_petrini/corekit-ui 0.1.35 → 0.1.36
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/dist/styles/layout.css +40 -0
- package/package.json +2 -1
- package/src/lib/styles/color.ts +11 -0
- package/src/lib/styles/layout.css +40 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
@plugin '@tailwindcss/forms';
|
|
3
|
+
@plugin '@tailwindcss/typography';
|
|
4
|
+
|
|
5
|
+
@utility flex-center {
|
|
6
|
+
@apply flex items-center justify-center;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
|
+
|
|
11
|
+
@theme {
|
|
12
|
+
--color-main-background: var(--vpcui-color-main-background);
|
|
13
|
+
--color-sub-background: var(--vpcui-color-sub-background);
|
|
14
|
+
--color-main-text: var(--vpcui-color-main-text);
|
|
15
|
+
--color-sub-text: var(--vpcui-color-sub-text);
|
|
16
|
+
--color-form-input-background: var(--vpcui-color-form-input-background);
|
|
17
|
+
--color-navbar-element-hover-background: var(--vpcui-color-navbar-element-hover-background);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
--vpcui-color-main-background: var(--color-stone-50);
|
|
22
|
+
--vpcui-color-sub-background: var(--color-stone-300);
|
|
23
|
+
--vpcui-color-main-text: #000;
|
|
24
|
+
--vpcui-color-sub-text: #555;
|
|
25
|
+
--vpcui-color-form-input-background: var(--color-stone-100);
|
|
26
|
+
--vpcui-color-navbar-element-hover-background: var(--color-zinc-100);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html.dark {
|
|
30
|
+
--vpcui-color-main-background: var(--color-stone-950);
|
|
31
|
+
--vpcui-color-sub-background: var(--color-stone-700);
|
|
32
|
+
--vpcui-color-main-text: #fff;
|
|
33
|
+
--vpcui-color-sub-text: #aaa;
|
|
34
|
+
--vpcui-color-form-input-background: var(--color-stone-800);
|
|
35
|
+
--vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
html {
|
|
39
|
+
background-color: var(--color-main-background);
|
|
40
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@valerius_petrini/corekit-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.36",
|
|
4
4
|
"description": "Component Library used across all my projects",
|
|
5
5
|
"author": "Valerius Petrini Jr.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|
|
18
|
+
"src/lib/styles",
|
|
18
19
|
"!dist/**/*.test.*",
|
|
19
20
|
"!dist/**/*.spec.*"
|
|
20
21
|
],
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export const colorStyles = {
|
|
2
|
+
red: "bg-red-500 hover:bg-red-600",
|
|
3
|
+
yellow: "bg-yellow-500 hover:bg-yellow-600",
|
|
4
|
+
lightgreen: "bg-green-500 hover:bg-green-600",
|
|
5
|
+
blue: "bg-blue-500 hover:bg-blue-600",
|
|
6
|
+
pink: "bg-pink-500 hover:bg-pink-600",
|
|
7
|
+
purple: "bg-purple-500 hover:bg-purple-600",
|
|
8
|
+
gray: "bg-gray-500 hover:bg-gray-600",
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export type ColorStyle = keyof typeof colorStyles;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
@plugin '@tailwindcss/forms';
|
|
3
|
+
@plugin '@tailwindcss/typography';
|
|
4
|
+
|
|
5
|
+
@utility flex-center {
|
|
6
|
+
@apply flex items-center justify-center;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
|
+
|
|
11
|
+
@theme {
|
|
12
|
+
--color-main-background: var(--vpcui-color-main-background);
|
|
13
|
+
--color-sub-background: var(--vpcui-color-sub-background);
|
|
14
|
+
--color-main-text: var(--vpcui-color-main-text);
|
|
15
|
+
--color-sub-text: var(--vpcui-color-sub-text);
|
|
16
|
+
--color-form-input-background: var(--vpcui-color-form-input-background);
|
|
17
|
+
--color-navbar-element-hover-background: var(--vpcui-color-navbar-element-hover-background);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
--vpcui-color-main-background: var(--color-stone-50);
|
|
22
|
+
--vpcui-color-sub-background: var(--color-stone-300);
|
|
23
|
+
--vpcui-color-main-text: #000;
|
|
24
|
+
--vpcui-color-sub-text: #555;
|
|
25
|
+
--vpcui-color-form-input-background: var(--color-stone-100);
|
|
26
|
+
--vpcui-color-navbar-element-hover-background: var(--color-zinc-100);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html.dark {
|
|
30
|
+
--vpcui-color-main-background: var(--color-stone-950);
|
|
31
|
+
--vpcui-color-sub-background: var(--color-stone-700);
|
|
32
|
+
--vpcui-color-main-text: #fff;
|
|
33
|
+
--vpcui-color-sub-text: #aaa;
|
|
34
|
+
--vpcui-color-form-input-background: var(--color-stone-800);
|
|
35
|
+
--vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
html {
|
|
39
|
+
background-color: var(--color-main-background);
|
|
40
|
+
}
|