@jakeseanp/socrates-ui 0.1.0 → 0.2.0

package/dist/index.css

@@ -592,41 +592,6 @@ video {
   --sidebar-ring: 0.708 0 0;
 }
 
-.dark {
-  --background: 0.145 0 0;
-  --foreground: 0.985 0 0;
-  --card: 0.205 0 0;
-  --card-foreground: 0.985 0 0;
-  --popover: 0.205 0 0;
-  --popover-foreground: 0.985 0 0;
-  --primary: 0.443 0.11 240.79;
-  --primary-foreground: 0.977 0.013 236.62;
-  --secondary: 0.274 0.006 286.033;
-  --secondary-foreground: 0.985 0 0;
-  --muted: 0.269 0 0;
-  --muted-foreground: 0.708 0 0;
-  --accent: 0.269 0 0;
-  --accent-foreground: 0.985 0 0;
-  --destructive: 0.704 0.191 22.216;
-  --destructive-foreground: 0.985 0 0;
-  --border: 0.23 0 0;
-  --input: 0.273 0 0;
-  --ring: 0.556 0 0;
-  --chart-1: 0.87 0 0;
-  --chart-2: 0.556 0 0;
-  --chart-3: 0.439 0 0;
-  --chart-4: 0.371 0 0;
-  --chart-5: 0.269 0 0;
-  --sidebar: 0.205 0 0;
-  --sidebar-foreground: 0.985 0 0;
-  --sidebar-primary: 0.685 0.169 237.323;
-  --sidebar-primary-foreground: 0.293 0.066 243.157;
-  --sidebar-accent: 0.269 0 0;
-  --sidebar-accent-foreground: 0.985 0 0;
-  --sidebar-border: 0.23 0 0;
-  --sidebar-ring: 0.556 0 0;
-}
-
 * {
   --tw-border-opacity: 1;
   border-color: oklch(var(--border) / var(--tw-border-opacity, 1));
@@ -791,11 +756,6 @@ html {
   background-color: oklch(var(--background) / var(--tw-bg-opacity, 1));
 }
 
-.bg-card {
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--card) / var(--tw-bg-opacity, 1));
-}
-
 .bg-destructive {
   --tw-bg-opacity: 1;
   background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -831,11 +791,6 @@ html {
   padding-bottom: 0.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -845,11 +800,6 @@ html {
   font-weight: 500;
 }
 
-.text-card-foreground {
-  --tw-text-opacity: 1;
-  color: oklch(var(--card-foreground) / var(--tw-text-opacity, 1));
-}
-
 .text-destructive-foreground {
   --tw-text-opacity: 1;
   color: oklch(var(--destructive-foreground) / var(--tw-text-opacity, 1));
@@ -874,12 +824,6 @@ html {
   text-underline-offset: 4px;
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .outline {
   outline-style: solid;
 }
@@ -894,20 +838,6 @@ html {
   transition-duration: 150ms;
 }
 
-@keyframes enter {
-  from {
-    opacity: var(--tw-enter-opacity, 1);
-    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));
-  }
-}
-
-@keyframes exit {
-  to {
-    opacity: var(--tw-exit-opacity, 1);
-    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));
-  }
-}
-
 .hover\:bg-accent:hover {
   --tw-bg-opacity: 1;
   background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakeseanp/socrates-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Socrates component library.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,10 +12,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./tailwind-preset": "./tailwind-preset.cjs"
   },
   "files": [
-    "dist"
+    "dist",
+    "tailwind-preset.cjs"
   ],
   "sideEffects": [
     "**/*.css"
@@ -42,6 +44,6 @@
     "tailwind-merge": "2.6.0"
   },
   "scripts": {
-    "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"
+    "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"
   }
 }

package/tailwind-preset.cjs

@@ -0,0 +1,80 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+const oklch = (name) => `oklch(var(${name}) / <alpha-value>)`;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: oklch("--border"),
+        input: oklch("--input"),
+        ring: oklch("--ring"),
+        background: oklch("--background"),
+        foreground: oklch("--foreground"),
+        primary: {
+          DEFAULT: oklch("--primary"),
+          foreground: oklch("--primary-foreground"),
+        },
+        secondary: {
+          DEFAULT: oklch("--secondary"),
+          foreground: oklch("--secondary-foreground"),
+        },
+        destructive: {
+          DEFAULT: oklch("--destructive"),
+          foreground: oklch("--destructive-foreground"),
+        },
+        muted: {
+          DEFAULT: oklch("--muted"),
+          foreground: oklch("--muted-foreground"),
+        },
+        accent: {
+          DEFAULT: oklch("--accent"),
+          foreground: oklch("--accent-foreground"),
+        },
+        popover: {
+          DEFAULT: oklch("--popover"),
+          foreground: oklch("--popover-foreground"),
+        },
+        card: {
+          DEFAULT: oklch("--card"),
+          foreground: oklch("--card-foreground"),
+        },
+        chart: {
+          1: oklch("--chart-1"),
+          2: oklch("--chart-2"),
+          3: oklch("--chart-3"),
+          4: oklch("--chart-4"),
+          5: oklch("--chart-5"),
+        },
+        sidebar: {
+          DEFAULT: oklch("--sidebar"),
+          foreground: oklch("--sidebar-foreground"),
+          primary: oklch("--sidebar-primary"),
+          "primary-foreground": oklch("--sidebar-primary-foreground"),
+          accent: oklch("--sidebar-accent"),
+          "accent-foreground": oklch("--sidebar-accent-foreground"),
+          border: oklch("--sidebar-border"),
+          ring: oklch("--sidebar-ring"),
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
+      },
+    },
+  },
+};