@skylab-kulubu/skylcn-ui 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,248 @@
+/*
+ * skylcn-ui design tokens. Plain CSS custom properties with no Tailwind in
+ * them, so surfaces without Tailwind (the Keycloak login theme) can use the
+ * same set. Dark is the default; `data-theme="light"` on any ancestor switches.
+ */
+
+:root,
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  /* Brand */
+  --skylab-300: #f3e8f5;
+  --skylab-400: #ebd5ee;
+  --skylab-500: #e0c8e5;
+  --skylab-600: #c8a4ce;
+  --skylab-700: #ae7eb6;
+  --skylab-800: #8f5e98;
+  --skylab-900: #6e4576;
+
+  /* Surfaces: the chrome behind the sidebar, the page panel, raised layers */
+  --sidebar: #0a0a0a;
+  --background: #171717;
+  --sheet: #121212;
+  --popover: #1a1a1a;
+  --card: rgb(255 255 255 / 3%);
+
+  /* Text. Down to subtle every step reads at 4.5:1 or more on every surface;
+     faint is for decoration and disabled states only, never for text to be read. */
+  --foreground: #f5f5f5;
+  --foreground-strong: #fafafa;
+  --secondary-foreground: #e5e5e5;
+  --muted-foreground: #a3a3a3;
+  --subtle-foreground: #8c8c8c;
+  --faint-foreground: #525252;
+
+  /* Washes and lines, drawn as foreground at low opacity so they sit on any surface */
+  --muted: rgb(255 255 255 / 5%);
+  --accent: rgb(255 255 255 / 5%);
+  --accent-strong: rgb(255 255 255 / 10%);
+  --border: rgb(255 255 255 / 10%);
+  --border-subtle: rgb(255 255 255 / 5%);
+  --border-strong: rgb(255 255 255 / 20%);
+  --input: rgb(255 255 255 / 10%);
+  --input-background: rgb(38 38 38 / 50%);
+
+  /* Brand roles */
+  --primary: var(--skylab-500);
+  --primary-foreground: #0a0a0a;
+  --ring: rgb(235 213 238 / 40%);
+
+  /* Status */
+  --destructive: #f87171;
+  --destructive-foreground: #fecaca;
+  --success: #34d399;
+  --warning: #fbbf24;
+  --info: #93c5fd;
+
+  /*
+   * Charts. Eight series colours in a fixed order, assigned in sequence and
+   * never cycled: brand lilac first, then orange, aqua, yellow, magenta, green,
+   * blue, red. Validated as a set for each theme (lightness band, chroma floor,
+   * neighbours told apart under protanopia and deuteranopia at ΔE 8.4 or more
+   * and under normal vision at 19.3 or more, 3:1 against the card). Change a
+   * value only by re-running that validation.
+   */
+  --chart-1: #a875b8;
+  --chart-2: #d95926;
+  --chart-3: #199e70;
+  --chart-4: #c98500;
+  --chart-5: #d55181;
+  --chart-6: #008300;
+  --chart-7: #3987e5;
+  --chart-8: #e66767;
+  --chart-grid: rgb(255 255 255 / 7%);
+  --chart-axis: rgb(255 255 255 / 16%);
+  /* The chart card, opaque: gaps between bars and rings around dots are drawn in it */
+  --chart-surface: #1e1e1e;
+
+  /* Shape */
+  --radius: 0.5rem;
+  --elevation-overlay: 0 20px 40px -12px rgb(0 0 0 / 60%);
+
+  /* Scrollbars */
+  --scrollbar-thumb: #3f3f46;
+  --scrollbar-thumb-hover: #52525b;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+
+  --skylab-300: #75447f;
+  --skylab-400: #8f5e98;
+  --skylab-500: #ae7eb6;
+  --skylab-600: #c8a4ce;
+  --skylab-700: #8f5e98;
+  --skylab-800: #75447f;
+  --skylab-900: #5b3363;
+
+  --sidebar: #ece8e3;
+  --background: #fdfcfa;
+  --sheet: #fdfcfa;
+  --popover: #ffffff;
+  --card: rgb(0 0 0 / 2%);
+
+  --foreground: #1c1a18;
+  --foreground-strong: #121014;
+  --secondary-foreground: #2b2825;
+  --muted-foreground: #57524c;
+  --subtle-foreground: #6b665f;
+  --faint-foreground: #8a847d;
+
+  --muted: rgb(0 0 0 / 4%);
+  --accent: rgb(0 0 0 / 5%);
+  --accent-strong: rgb(0 0 0 / 8%);
+  --border: rgb(0 0 0 / 10%);
+  --border-subtle: rgb(0 0 0 / 6%);
+  --border-strong: rgb(0 0 0 / 18%);
+  --input: rgb(0 0 0 / 12%);
+  --input-background: #ffffff;
+
+  --primary: #8f5e98;
+  --primary-foreground: #ffffff;
+  --ring: rgb(143 94 152 / 40%);
+
+  --destructive: #b91c1c;
+  --destructive-foreground: #7f1d1d;
+  --success: #047857;
+  --warning: #a44a07;
+  --info: #1d4ed8;
+
+  /* Four of these sit under 3:1 on the light card, so every chart carries a legend and a table view */
+  --chart-1: #8f5e98;
+  --chart-2: #eb6834;
+  --chart-3: #1baf7a;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --chart-6: #008300;
+  --chart-7: #2a78d6;
+  --chart-8: #e34948;
+  --chart-grid: rgb(0 0 0 / 8%);
+  --chart-axis: rgb(0 0 0 / 20%);
+  --chart-surface: #f8f7f5;
+
+  --elevation-overlay: 0 20px 40px -16px rgb(28 26 24 / 25%);
+
+  --scrollbar-thumb: #c9c3bc;
+  --scrollbar-thumb-hover: #a8a19a;
+}
+
+:root {
+  /* Type. Apps load the faces (next/font or @font-face) and may point these at their variables. */
+  --font-family-sans:
+    var(--skylcn-font-sans, 'Space Grotesk'), ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-family-mono:
+    var(--skylcn-font-mono, 'Space Mono'), ui-monospace, SFMono-Regular, monospace;
+
+  /* Micro type scale below Tailwind's xs: 2xs meta lines, 3xs chips and labels (the smallest text) */
+  --type-2xs: 0.6875rem;
+  --type-2xs-leading: 1rem;
+  --type-3xs: 0.625rem;
+  --type-3xs-leading: 0.875rem;
+  --letter-spacing-label: 0.18em;
+
+  /* Motion */
+  --motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
+  /* The drawer spring (stiffness 300, damping 30, mass 0.8), sampled for CSS */
+  --motion-ease-spring: linear(
+    0,
+    0.0577,
+    0.1801,
+    0.3211,
+    0.4567,
+    0.579,
+    0.6783,
+    0.7581,
+    0.8205,
+    0.8685,
+    0.9046,
+    0.9315,
+    0.9512,
+    0.9658,
+    0.9761,
+    0.9834,
+    0.9885,
+    0.9922,
+    0.9947,
+    0.9964,
+    0.9976,
+    0.9984,
+    0.999,
+    0.9993,
+    1
+  );
+  --motion-duration-instant: 100ms;
+  --motion-duration-fast: 150ms;
+  --motion-duration-base: 200ms;
+  --motion-duration-slow: 350ms;
+  --motion-duration-spring: 450ms;
+  --motion-stagger: 60ms;
+  /* How far things travel as they appear: popups and rows, then larger surfaces */
+  --motion-shift: 4px;
+  --motion-shift-lg: 8px;
+  --motion-scale-from: 0.98;
+}
+
+/*
+ * Reduced motion keeps short fades, so changes stay noticeable, and drops all
+ * travel and scaling. It follows the system setting, or data-motion="reduced"
+ * on <html> when the reader turns it on inside a product.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-slow: 200ms;
+    --motion-duration-spring: 200ms;
+    --motion-stagger: 0ms;
+    --motion-shift: 0px;
+    --motion-shift-lg: 0px;
+    --motion-scale-from: 1;
+  }
+}
+:root[data-motion='reduced'] {
+  --motion-duration-slow: 200ms;
+  --motion-duration-spring: 200ms;
+  --motion-stagger: 0ms;
+  --motion-shift: 0px;
+  --motion-shift-lg: 0px;
+  --motion-scale-from: 1;
+}
+
+/* A stronger contrast request lifts quiet text one step and firms up the lines */
+@media (prefers-contrast: more) {
+  :root,
+  [data-theme='dark'] {
+    --subtle-foreground: #a3a3a3;
+    --faint-foreground: #828282;
+    --border: rgb(255 255 255 / 22%);
+    --border-subtle: rgb(255 255 255 / 14%);
+    --input: rgb(255 255 255 / 30%);
+  }
+  [data-theme='light'] {
+    --subtle-foreground: #57524c;
+    --faint-foreground: #6b665f;
+    --border: rgb(0 0 0 / 25%);
+    --border-subtle: rgb(0 0 0 / 15%);
+    --input: rgb(0 0 0 / 35%);
+  }
+}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@skylab-kulubu/skylcn-ui",
+  "version": "0.1.0",
+  "description": "SKY LAB web ürünlerinin ortak tasarım sistemi: token'lar, tema ve bileşenler.",
+  "license": "MIT",
+  "author": "SKY LAB",
+  "contributors": [
+    "Kaan Necip Kalp",
+    "Fatih Naz"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/data-table/index.d.ts",
+      "import": "./dist/data-table/index.js"
+    },
+    "./theme.css": "./dist/styles/theme.css",
+    "./tokens.css": "./dist/styles/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "node -e \"require('node:fs').copyFileSync('../../README.md', 'README.md')\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@tanstack/react-table": "^9.2.4",
+    "@tanstack/react-virtual": "^3.14.13",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.4.0",
+    "lucide-react": "^1.48.0",
+    "motion": "^13.4.4",
+    "react-day-picker": "^10.0.1",
+    "react-is": "^19.3.0",
+    "recharts": "^3.10.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "5.9.3",
+    "vitest": "^5.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skylab-kulubu/skylcn-ui.git",
+    "directory": "packages/skylcn-ui"
+  },
+  "keywords": [
+    "skylab",
+    "design-system",
+    "base-ui",
+    "shadcn",
+    "tailwindcss"
+  ],
+  "homepage": "https://github.com/skylab-kulubu/skylcn-ui#readme",
+  "bugs": {
+    "url": "https://github.com/skylab-kulubu/skylcn-ui/issues"
+  }
+}