svelte-comp 1.0.9 → 1.1.2

package/dist/lib/types/index.d.ts

@@ -83,6 +83,7 @@ export type SelectOption = {
     label: string;
     value: string;
     disabled?: boolean;
+    swatch?: string;
 };
 export type Position = "top" | "bottom" | "left" | "right";
 export type ToastVariant = "success" | "danger" | "warning" | "info";
@@ -102,3 +103,9 @@ export type FieldType = {
     invalid?: boolean;
     describedBy?: string;
 };
+export type PrimaryKey = "default" | "cyan" | "red" | "green" | "yellow" | "pink" | "orange" | "purple";
+export type PaletteOption = {
+    value: PrimaryKey;
+    label: string;
+    swatch: string;
+};

package/dist/main.d.ts

@@ -0,0 +1,4 @@
+import "./app.css";
+import "./styles.css";
+declare const app: {};
+export default app;

package/dist/main.js

@@ -0,0 +1,8 @@
+import { mount } from "svelte";
+import "./app.css";
+import "./styles.css";
+import App from "./App.svelte";
+var app = mount(App, {
+    target: document.getElementById("app"),
+});
+export default app;

package/dist/styles.css

@@ -1,5 +1,6 @@
-/* src/app.css */
+/* src/styles.css */
 @source "../node_modules/svelte-comp/**/*";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
@@ -16,6 +17,7 @@
   --color-bg-page: oklch(98% 0 0deg);
   --color-bg-surface: oklch(100% 0 0deg);
   --color-bg-primary: oklch(62.3% 0.214 259.8deg);
+  --color-primary: var(--color-bg-primary);
   --color-bg-secondary: oklch(80% 0 0deg);
   --color-bg-danger: oklch(60% 0.25 30deg);
   --color-bg-success: oklch(55% 0.2 150deg);
@@ -108,6 +110,7 @@
   --color-bg-page: oklch(15% 0 0deg);
   --color-bg-surface: oklch(26% 0 0deg);
   --color-bg-primary: oklch(42% 0.19 259.8deg);
+  --color-primary: var(--color-bg-primary);
   --color-bg-secondary: oklch(45% 0 0deg);
   --color-bg-danger: oklch(50% 0.25 30deg);
   --color-bg-success: oklch(45% 0.2 150deg);
@@ -167,3 +170,63 @@
 .dark ::-webkit-scrollbar-thumb {
   background: oklch(from var(--color-bg-secondary) l c h / 0.7);
 }
+
+/* ----------------------------- */
+/* 🎨 Primary color palettes     */
+/* ----------------------------- */
+
+[data-primary="default"] {
+  --color-primary: oklch(62.3% 0.214 259.8deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="cyan"] {
+  --color-primary: oklch(86.5% 0.127 207.078);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="red"] {
+  --color-primary: oklch(58% 0.24 30deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="green"] {
+  --color-primary: oklch(65% 0.22 140deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="yellow"] {
+  --color-primary: oklch(75% 0.18 90deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="pink"] {
+  --color-primary: oklch(70% 0.25 350deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="orange"] {
+  --color-primary: oklch(72% 0.22 60deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="purple"] {
+  --color-primary: oklch(55% 0.22 290deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}

package/package.json

@@ -1,14 +1,18 @@
 {
-  "dependencies": {
-    "prismjs": "^1.30.0"
-  },
   "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^24.5.2",
+    "@types/prismjs": "^1.26.5",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prismjs": "^1.30.0",
     "svelte": "^5.39.6",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vite": "^7.2.1"
   },
@@ -38,10 +42,10 @@
   "scripts": {
     "build": "svelte-package --input src",
     "dev": "vite",
-    "prepare": "npm run build"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
   },
   "svelte": "./dist/lib/index.js",
   "type": "module",
   "types": "./dist/lib/index.d.ts",
-  "version": "1.0.9"
+  "version": "1.1.2"
 }