@jakeseanp/socrates-ui 0.1.0 → 0.3.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.
- package/base.css +91 -0
- package/dist/index.css +0 -70
- package/package.json +10 -4
- package/tailwind-preset.cjs +80 -0
- package/theme.css +41 -0
package/base.css
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
:root {
|
|
3
|
+
--background: 1 0 0;
|
|
4
|
+
--foreground: 0.145 0 0;
|
|
5
|
+
--card: 1 0 0;
|
|
6
|
+
--card-foreground: 0.145 0 0;
|
|
7
|
+
--popover: 1 0 0;
|
|
8
|
+
--popover-foreground: 0.145 0 0;
|
|
9
|
+
--primary: 0.5 0.134 242.749;
|
|
10
|
+
--primary-foreground: 0.977 0.013 236.62;
|
|
11
|
+
--secondary: 0.967 0.001 286.375;
|
|
12
|
+
--secondary-foreground: 0.21 0.006 285.885;
|
|
13
|
+
--muted: 0.97 0 0;
|
|
14
|
+
--muted-foreground: 0.556 0 0;
|
|
15
|
+
--accent: 0.97 0 0;
|
|
16
|
+
--accent-foreground: 0.205 0 0;
|
|
17
|
+
--destructive: 0.577 0.245 27.325;
|
|
18
|
+
--destructive-foreground: 0.985 0 0;
|
|
19
|
+
--border: 0.922 0 0;
|
|
20
|
+
--input: 0.922 0 0;
|
|
21
|
+
--ring: 0.708 0 0;
|
|
22
|
+
--chart-1: 0.87 0 0;
|
|
23
|
+
--chart-2: 0.556 0 0;
|
|
24
|
+
--chart-3: 0.439 0 0;
|
|
25
|
+
--chart-4: 0.371 0 0;
|
|
26
|
+
--chart-5: 0.269 0 0;
|
|
27
|
+
--radius: 0.625rem;
|
|
28
|
+
--sidebar: 0.985 0 0;
|
|
29
|
+
--sidebar-foreground: 0.145 0 0;
|
|
30
|
+
--sidebar-primary: 0.588 0.158 241.966;
|
|
31
|
+
--sidebar-primary-foreground: 0.977 0.013 236.62;
|
|
32
|
+
--sidebar-accent: 0.97 0 0;
|
|
33
|
+
--sidebar-accent-foreground: 0.205 0 0;
|
|
34
|
+
--sidebar-border: 0.922 0 0;
|
|
35
|
+
--sidebar-ring: 0.708 0 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dark {
|
|
39
|
+
--background: 0.145 0 0;
|
|
40
|
+
--foreground: 0.985 0 0;
|
|
41
|
+
--card: 0.205 0 0;
|
|
42
|
+
--card-foreground: 0.985 0 0;
|
|
43
|
+
--popover: 0.205 0 0;
|
|
44
|
+
--popover-foreground: 0.985 0 0;
|
|
45
|
+
--primary: 0.443 0.11 240.79;
|
|
46
|
+
--primary-foreground: 0.977 0.013 236.62;
|
|
47
|
+
--secondary: 0.274 0.006 286.033;
|
|
48
|
+
--secondary-foreground: 0.985 0 0;
|
|
49
|
+
--muted: 0.269 0 0;
|
|
50
|
+
--muted-foreground: 0.708 0 0;
|
|
51
|
+
--accent: 0.269 0 0;
|
|
52
|
+
--accent-foreground: 0.985 0 0;
|
|
53
|
+
--destructive: 0.704 0.191 22.216;
|
|
54
|
+
--destructive-foreground: 0.985 0 0;
|
|
55
|
+
--border: 0.23 0 0;
|
|
56
|
+
--input: 0.273 0 0;
|
|
57
|
+
--ring: 0.556 0 0;
|
|
58
|
+
--chart-1: 0.87 0 0;
|
|
59
|
+
--chart-2: 0.556 0 0;
|
|
60
|
+
--chart-3: 0.439 0 0;
|
|
61
|
+
--chart-4: 0.371 0 0;
|
|
62
|
+
--chart-5: 0.269 0 0;
|
|
63
|
+
--sidebar: 0.205 0 0;
|
|
64
|
+
--sidebar-foreground: 0.985 0 0;
|
|
65
|
+
--sidebar-primary: 0.685 0.169 237.323;
|
|
66
|
+
--sidebar-primary-foreground: 0.293 0.066 243.157;
|
|
67
|
+
--sidebar-accent: 0.269 0 0;
|
|
68
|
+
--sidebar-accent-foreground: 0.985 0 0;
|
|
69
|
+
--sidebar-border: 0.23 0 0;
|
|
70
|
+
--sidebar-ring: 0.556 0 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
* {
|
|
74
|
+
border-color: oklch(var(--border));
|
|
75
|
+
outline-color: color-mix(in oklch, oklch(var(--ring)) 50%, transparent);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
html {
|
|
79
|
+
font-family: var(--font-sans);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
body {
|
|
83
|
+
background-color: oklch(var(--background));
|
|
84
|
+
color: oklch(var(--foreground));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
button:not(:disabled),
|
|
88
|
+
[role="button"]:not(:disabled) {
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
}
|
package/dist/index.css
CHANGED
|
@@ -592,41 +592,6 @@ video {
|
|
|
592
592
|
--sidebar-ring: 0.708 0 0;
|
|
593
593
|
}
|
|
594
594
|
|
|
595
|
-
.dark {
|
|
596
|
-
--background: 0.145 0 0;
|
|
597
|
-
--foreground: 0.985 0 0;
|
|
598
|
-
--card: 0.205 0 0;
|
|
599
|
-
--card-foreground: 0.985 0 0;
|
|
600
|
-
--popover: 0.205 0 0;
|
|
601
|
-
--popover-foreground: 0.985 0 0;
|
|
602
|
-
--primary: 0.443 0.11 240.79;
|
|
603
|
-
--primary-foreground: 0.977 0.013 236.62;
|
|
604
|
-
--secondary: 0.274 0.006 286.033;
|
|
605
|
-
--secondary-foreground: 0.985 0 0;
|
|
606
|
-
--muted: 0.269 0 0;
|
|
607
|
-
--muted-foreground: 0.708 0 0;
|
|
608
|
-
--accent: 0.269 0 0;
|
|
609
|
-
--accent-foreground: 0.985 0 0;
|
|
610
|
-
--destructive: 0.704 0.191 22.216;
|
|
611
|
-
--destructive-foreground: 0.985 0 0;
|
|
612
|
-
--border: 0.23 0 0;
|
|
613
|
-
--input: 0.273 0 0;
|
|
614
|
-
--ring: 0.556 0 0;
|
|
615
|
-
--chart-1: 0.87 0 0;
|
|
616
|
-
--chart-2: 0.556 0 0;
|
|
617
|
-
--chart-3: 0.439 0 0;
|
|
618
|
-
--chart-4: 0.371 0 0;
|
|
619
|
-
--chart-5: 0.269 0 0;
|
|
620
|
-
--sidebar: 0.205 0 0;
|
|
621
|
-
--sidebar-foreground: 0.985 0 0;
|
|
622
|
-
--sidebar-primary: 0.685 0.169 237.323;
|
|
623
|
-
--sidebar-primary-foreground: 0.293 0.066 243.157;
|
|
624
|
-
--sidebar-accent: 0.269 0 0;
|
|
625
|
-
--sidebar-accent-foreground: 0.985 0 0;
|
|
626
|
-
--sidebar-border: 0.23 0 0;
|
|
627
|
-
--sidebar-ring: 0.556 0 0;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
595
|
* {
|
|
631
596
|
--tw-border-opacity: 1;
|
|
632
597
|
border-color: oklch(var(--border) / var(--tw-border-opacity, 1));
|
|
@@ -791,11 +756,6 @@ html {
|
|
|
791
756
|
background-color: oklch(var(--background) / var(--tw-bg-opacity, 1));
|
|
792
757
|
}
|
|
793
758
|
|
|
794
|
-
.bg-card {
|
|
795
|
-
--tw-bg-opacity: 1;
|
|
796
|
-
background-color: oklch(var(--card) / var(--tw-bg-opacity, 1));
|
|
797
|
-
}
|
|
798
|
-
|
|
799
759
|
.bg-destructive {
|
|
800
760
|
--tw-bg-opacity: 1;
|
|
801
761
|
background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
|
|
@@ -831,11 +791,6 @@ html {
|
|
|
831
791
|
padding-bottom: 0.5rem;
|
|
832
792
|
}
|
|
833
793
|
|
|
834
|
-
.py-3 {
|
|
835
|
-
padding-top: 0.75rem;
|
|
836
|
-
padding-bottom: 0.75rem;
|
|
837
|
-
}
|
|
838
|
-
|
|
839
794
|
.text-sm {
|
|
840
795
|
font-size: 0.875rem;
|
|
841
796
|
line-height: 1.25rem;
|
|
@@ -845,11 +800,6 @@ html {
|
|
|
845
800
|
font-weight: 500;
|
|
846
801
|
}
|
|
847
802
|
|
|
848
|
-
.text-card-foreground {
|
|
849
|
-
--tw-text-opacity: 1;
|
|
850
|
-
color: oklch(var(--card-foreground) / var(--tw-text-opacity, 1));
|
|
851
|
-
}
|
|
852
|
-
|
|
853
803
|
.text-destructive-foreground {
|
|
854
804
|
--tw-text-opacity: 1;
|
|
855
805
|
color: oklch(var(--destructive-foreground) / var(--tw-text-opacity, 1));
|
|
@@ -874,12 +824,6 @@ html {
|
|
|
874
824
|
text-underline-offset: 4px;
|
|
875
825
|
}
|
|
876
826
|
|
|
877
|
-
.shadow-sm {
|
|
878
|
-
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
879
|
-
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
880
|
-
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
881
|
-
}
|
|
882
|
-
|
|
883
827
|
.outline {
|
|
884
828
|
outline-style: solid;
|
|
885
829
|
}
|
|
@@ -894,20 +838,6 @@ html {
|
|
|
894
838
|
transition-duration: 150ms;
|
|
895
839
|
}
|
|
896
840
|
|
|
897
|
-
@keyframes enter {
|
|
898
|
-
from {
|
|
899
|
-
opacity: var(--tw-enter-opacity, 1);
|
|
900
|
-
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
|
|
904
|
-
@keyframes exit {
|
|
905
|
-
to {
|
|
906
|
-
opacity: var(--tw-exit-opacity, 1);
|
|
907
|
-
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
|
|
911
841
|
.hover\:bg-accent:hover {
|
|
912
842
|
--tw-bg-opacity: 1;
|
|
913
843
|
background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jakeseanp/socrates-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Socrates component library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -12,10 +12,16 @@
|
|
|
12
12
|
"import": "./dist/index.js",
|
|
13
13
|
"require": "./dist/index.cjs"
|
|
14
14
|
},
|
|
15
|
-
"./styles.css": "./dist/index.css"
|
|
15
|
+
"./styles.css": "./dist/index.css",
|
|
16
|
+
"./theme.css": "./theme.css",
|
|
17
|
+
"./base.css": "./base.css",
|
|
18
|
+
"./tailwind-preset": "./tailwind-preset.cjs"
|
|
16
19
|
},
|
|
17
20
|
"files": [
|
|
18
|
-
"dist"
|
|
21
|
+
"dist",
|
|
22
|
+
"theme.css",
|
|
23
|
+
"base.css",
|
|
24
|
+
"tailwind-preset.cjs"
|
|
19
25
|
],
|
|
20
26
|
"sideEffects": [
|
|
21
27
|
"**/*.css"
|
|
@@ -42,6 +48,6 @@
|
|
|
42
48
|
"tailwind-merge": "2.6.0"
|
|
43
49
|
},
|
|
44
50
|
"scripts": {
|
|
45
|
-
"build": "tsup src/index.ts --format esm,cjs --dts --external react --external react-dom && tailwindcss -c
|
|
51
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --external react --external react-dom && tailwindcss -c tailwind.config.cjs -i src/styles.css -o dist/index.css"
|
|
46
52
|
}
|
|
47
53
|
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
const { fontFamily } = require("tailwindcss/defaultTheme");
|
|
2
|
+
|
|
3
|
+
const oklch = (name) => `oklch(var(${name}) / <alpha-value>)`;
|
|
4
|
+
|
|
5
|
+
/** @type {import('tailwindcss').Config} */
|
|
6
|
+
module.exports = {
|
|
7
|
+
darkMode: ["class"],
|
|
8
|
+
theme: {
|
|
9
|
+
container: {
|
|
10
|
+
center: true,
|
|
11
|
+
padding: "2rem",
|
|
12
|
+
screens: {
|
|
13
|
+
"2xl": "1400px",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
extend: {
|
|
17
|
+
colors: {
|
|
18
|
+
border: oklch("--border"),
|
|
19
|
+
input: oklch("--input"),
|
|
20
|
+
ring: oklch("--ring"),
|
|
21
|
+
background: oklch("--background"),
|
|
22
|
+
foreground: oklch("--foreground"),
|
|
23
|
+
primary: {
|
|
24
|
+
DEFAULT: oklch("--primary"),
|
|
25
|
+
foreground: oklch("--primary-foreground"),
|
|
26
|
+
},
|
|
27
|
+
secondary: {
|
|
28
|
+
DEFAULT: oklch("--secondary"),
|
|
29
|
+
foreground: oklch("--secondary-foreground"),
|
|
30
|
+
},
|
|
31
|
+
destructive: {
|
|
32
|
+
DEFAULT: oklch("--destructive"),
|
|
33
|
+
foreground: oklch("--destructive-foreground"),
|
|
34
|
+
},
|
|
35
|
+
muted: {
|
|
36
|
+
DEFAULT: oklch("--muted"),
|
|
37
|
+
foreground: oklch("--muted-foreground"),
|
|
38
|
+
},
|
|
39
|
+
accent: {
|
|
40
|
+
DEFAULT: oklch("--accent"),
|
|
41
|
+
foreground: oklch("--accent-foreground"),
|
|
42
|
+
},
|
|
43
|
+
popover: {
|
|
44
|
+
DEFAULT: oklch("--popover"),
|
|
45
|
+
foreground: oklch("--popover-foreground"),
|
|
46
|
+
},
|
|
47
|
+
card: {
|
|
48
|
+
DEFAULT: oklch("--card"),
|
|
49
|
+
foreground: oklch("--card-foreground"),
|
|
50
|
+
},
|
|
51
|
+
chart: {
|
|
52
|
+
1: oklch("--chart-1"),
|
|
53
|
+
2: oklch("--chart-2"),
|
|
54
|
+
3: oklch("--chart-3"),
|
|
55
|
+
4: oklch("--chart-4"),
|
|
56
|
+
5: oklch("--chart-5"),
|
|
57
|
+
},
|
|
58
|
+
sidebar: {
|
|
59
|
+
DEFAULT: oklch("--sidebar"),
|
|
60
|
+
foreground: oklch("--sidebar-foreground"),
|
|
61
|
+
primary: oklch("--sidebar-primary"),
|
|
62
|
+
"primary-foreground": oklch("--sidebar-primary-foreground"),
|
|
63
|
+
accent: oklch("--sidebar-accent"),
|
|
64
|
+
"accent-foreground": oklch("--sidebar-accent-foreground"),
|
|
65
|
+
border: oklch("--sidebar-border"),
|
|
66
|
+
ring: oklch("--sidebar-ring"),
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
borderRadius: {
|
|
70
|
+
lg: "var(--radius)",
|
|
71
|
+
md: "calc(var(--radius) - 2px)",
|
|
72
|
+
sm: "calc(var(--radius) - 4px)",
|
|
73
|
+
},
|
|
74
|
+
fontFamily: {
|
|
75
|
+
sans: ["var(--font-sans)", ...fontFamily.sans],
|
|
76
|
+
mono: ["var(--font-mono)", ...fontFamily.mono],
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
};
|
package/theme.css
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
@theme inline {
|
|
2
|
+
--font-sans: "Geist", "Geist Fallback", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
3
|
+
--font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
4
|
+
|
|
5
|
+
--color-background: oklch(var(--background));
|
|
6
|
+
--color-foreground: oklch(var(--foreground));
|
|
7
|
+
--color-card: oklch(var(--card));
|
|
8
|
+
--color-card-foreground: oklch(var(--card-foreground));
|
|
9
|
+
--color-popover: oklch(var(--popover));
|
|
10
|
+
--color-popover-foreground: oklch(var(--popover-foreground));
|
|
11
|
+
--color-primary: oklch(var(--primary));
|
|
12
|
+
--color-primary-foreground: oklch(var(--primary-foreground));
|
|
13
|
+
--color-secondary: oklch(var(--secondary));
|
|
14
|
+
--color-secondary-foreground: oklch(var(--secondary-foreground));
|
|
15
|
+
--color-muted: oklch(var(--muted));
|
|
16
|
+
--color-muted-foreground: oklch(var(--muted-foreground));
|
|
17
|
+
--color-accent: oklch(var(--accent));
|
|
18
|
+
--color-accent-foreground: oklch(var(--accent-foreground));
|
|
19
|
+
--color-destructive: oklch(var(--destructive));
|
|
20
|
+
--color-destructive-foreground: oklch(var(--destructive-foreground));
|
|
21
|
+
--color-border: oklch(var(--border));
|
|
22
|
+
--color-input: oklch(var(--input));
|
|
23
|
+
--color-ring: oklch(var(--ring));
|
|
24
|
+
--color-chart-1: oklch(var(--chart-1));
|
|
25
|
+
--color-chart-2: oklch(var(--chart-2));
|
|
26
|
+
--color-chart-3: oklch(var(--chart-3));
|
|
27
|
+
--color-chart-4: oklch(var(--chart-4));
|
|
28
|
+
--color-chart-5: oklch(var(--chart-5));
|
|
29
|
+
--color-sidebar: oklch(var(--sidebar));
|
|
30
|
+
--color-sidebar-foreground: oklch(var(--sidebar-foreground));
|
|
31
|
+
--color-sidebar-primary: oklch(var(--sidebar-primary));
|
|
32
|
+
--color-sidebar-primary-foreground: oklch(var(--sidebar-primary-foreground));
|
|
33
|
+
--color-sidebar-accent: oklch(var(--sidebar-accent));
|
|
34
|
+
--color-sidebar-accent-foreground: oklch(var(--sidebar-accent-foreground));
|
|
35
|
+
--color-sidebar-border: oklch(var(--sidebar-border));
|
|
36
|
+
--color-sidebar-ring: oklch(var(--sidebar-ring));
|
|
37
|
+
|
|
38
|
+
--radius-lg: var(--radius);
|
|
39
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
40
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
41
|
+
}
|