@luna-park/design 1.0.0

package/src/style/colors.scss

@@ -0,0 +1,152 @@
+@layer defaults {
+    :root, :host, ::part(luna-park) {
+        --color-hue: 260deg;
+        --color-chroma: 3%;
+
+        --primary-hue: 260deg;
+        --primary-chroma: 60%;
+
+        --color-content: white;
+        --color-content-lite: color-mix(in oklab, var(--color-content) 80%, transparent);
+        --color-content-liter: color-mix(in oklab, var(--color-content) 50%, transparent);
+        --color-content-litest: color-mix(in oklab, var(--color-content) 20%, transparent);
+
+        --color-soft: color-mix(in oklab, var(--color-content) 10%, transparent);
+        --color-soft-lite: color-mix(in oklab, var(--color-content) 5%, transparent);
+        --color-soft-liter: color-mix(in oklab, var(--color-content) 2%, transparent);
+        --color-soft-litest: color-mix(in oklab, var(--color-content) 1%, transparent);
+
+
+        --color-primary-content-lite: oklch(75% var(--primary-chroma) var(--primary-hue) / 80%);
+
+        --color-primary: oklch(60% var(--primary-chroma) var(--primary-hue));
+        --color-primary-lite: color-mix(in oklab, var(--color-primary) 80%, transparent);
+        --color-primary-liter: color-mix(in oklab, var(--color-primary) 50%, transparent);
+        --color-primary-litest: color-mix(in oklab, var(--color-primary) 25%, transparent);
+        --color-primary-soft: color-mix(in oklab, var(--color-primary) 10%, transparent);
+        --color-primary-dark-lite: hsl(207, 70%, 30%, 80%);
+
+        --color-primary-dark: oklch(45% var(--primary-chroma) var(--primary-hue));
+        --color-primary-darker: oklch(40% var(--primary-chroma) var(--primary-hue));
+
+        --color-background: black;
+        --color-background-lite: color-mix(in oklab, var(--color-background) 50%, transparent);
+        --color-background-liter: color-mix(in oklab, var(--color-background) 25%, transparent);
+        --color-background-litest: color-mix(in oklab, var(--color-background) 10%, transparent);
+
+        --color-background-dark: oklch(22.5% var(--color-chroma) var(--color-hue));
+        --color-background-darker: oklch(20% var(--color-chroma) var(--color-hue));
+        --color-background-darkest: oklch(17.5% var(--color-chroma) var(--color-hue));
+
+        --color-background-0-backdrop: color-mix(in oklab, var(--color-background) 20%, transparent);
+
+        --color-background-0: oklch(25% var(--color-chroma) var(--color-hue));
+        --color-background-0-lite: color-mix(in oklab, var(--color-background-0) 80%, transparent);
+        --color-background-0-liter: color-mix(in oklab, var(--color-background-0) 50%, transparent);
+        --color-background-0-litest: color-mix(in oklab, var(--color-background-0) 20%, transparent);
+
+        --color-background-1: oklch(27.5% var(--color-chroma) var(--color-hue));
+
+        --color-background-2: oklch(30% var(--color-chroma) var(--color-hue));
+        --color-background-2-lite: color-mix(in oklab, var(--color-background-2) 80%, transparent);
+        --color-background-2-liter: color-mix(in oklab, var(--color-background-2) 50%, transparent);
+        --color-background-2-litest: color-mix(in oklab, var(--color-background-2) 20%, transparent);
+
+        --color-background-3: oklch(32.5% var(--color-chroma) var(--color-hue));
+
+
+        --color-canvas-grid-color: oklch(90% var(--color-chroma) var(--color-hue) / 8%);
+        --color-canvas-rule-color: oklch(90% var(--color-chroma) var(--color-hue) / 16%);
+
+
+        --color-success: hsl(96, 60%, 28%);
+        --color-success-content: hsl(96, 60%, 38%);
+        --color-success-background: hsl(96, 20%, 20%);
+
+        --color-error: hsl(0, 60%, 38%);
+        --color-error-content: hsl(0, 60%, 50%);
+        --color-error-background: hsl(0, 20%, 20%);
+
+        --color-warning: hsl(55, 69%, 47%);
+        --color-warning-lite: color-mix(in oklab, var(--color-warning) 80%, transparent);
+        --color-warning-liter: color-mix(in oklab, var(--color-warning) 50%, transparent);
+        --color-warning-litest: color-mix(in oklab, var(--color-warning) 25%, transparent);
+        --color-warning-soft: color-mix(in oklab, var(--color-warning) 10%, transparent);
+
+        --color-warning-content: hsl(55, 69%, 50%);
+        --color-warning-background: hsl(55, 50%, 20%);
+
+        --color-info: hsl(200, 60%, 38%);
+        --color-info-content: hsl(200, 60%, 50%);
+        --color-info-background: hsl(200, 60%, 20%);
+
+
+        --color-type-boolean: #bb2222;
+        --color-type-number: #16b716;
+        --color-type-object: #0088ff;
+        --color-type-string: #bbbb00;
+        --color-type-void: #5e5e5e;
+        --color-type-array: var(--color-content);
+        --color-type-interface: #d24bff;
+        --color-type-type: #d24bff;
+        --color-type-exec: var(--color-content);
+
+        --color-file-text: var(--color-type-string);
+        --color-file-cron: var(--color-type-string);
+        --color-file-script: var(--color-type-string);
+
+        --color-file-route: var(--color-type-number);
+        --color-file-component: var(--color-type-number);
+
+        --color-file-database: var(--color-type-object);
+        --color-file-store: var(--color-type-object);
+        --color-file-config: var(--color-type-object);
+
+        --color-file-type: var(--color-type-interface);
+
+        color-scheme: only dark;
+    }
+
+    :root, :host, button {
+        color: var(--color-content);
+    }
+
+    a {
+        color: inherit;
+    }
+}
+
+.lp-light {
+    --color-content: black;
+    --color-content-lite: color-mix(in oklab, var(--color-content) 80%, transparent);
+    --color-content-liter: color-mix(in oklab, var(--color-content) 60%, transparent);
+    --color-content-litest: color-mix(in oklab, var(--color-content) 40%, transparent);
+
+    --color-soft: color-mix(in oklab, var(--color-content) 20%, transparent);
+    --color-soft-lite: color-mix(in oklab, var(--color-content) 10%, transparent);
+    --color-soft-liter: color-mix(in oklab, var(--color-content) 5%, transparent);
+    --color-soft-litest: color-mix(in oklab, var(--color-content) 2%, transparent);
+
+    --color-background: white;
+    --color-background-lite: color-mix(in oklab, var(--color-background) 50%, transparent);
+    --color-background-liter: color-mix(in oklab, var(--color-background) 25%, transparent);
+    --color-background-litest: color-mix(in oklab, var(--color-background) 10%, transparent);
+
+    --color-background-dark: oklch(78.5% var(--color-chroma) var(--color-hue));
+
+    --color-background-0-backdrop: color-mix(in oklab, var(--color-background) 20%, transparent);
+
+    --color-background-0: oklch(75% var(--color-chroma) var(--color-hue));
+    --color-background-0-lite: color-mix(in oklab, var(--color-background-0) 80%, transparent);
+    --color-background-0-liter: color-mix(in oklab, var(--color-background-0) 50%, transparent);
+    --color-background-0-litest: color-mix(in oklab, var(--color-background-0) 20%, transparent);
+
+    --color-background-1: oklch(72.5% var(--color-chroma) var(--color-hue));
+
+    --color-background-2: oklch(70% var(--color-chroma) var(--color-hue));
+    --color-background-2-lite: color-mix(in oklab, var(--color-background-2) 80%, transparent);
+    --color-background-2-liter: color-mix(in oklab, var(--color-background-2) 50%, transparent);
+    --color-background-2-litest: color-mix(in oklab, var(--color-background-2) 20%, transparent);
+
+    --color-background-3: oklch(67.5% var(--color-chroma) var(--color-hue));
+}

package/src/style/fonts.scss

@@ -0,0 +1,45 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik:wght@400&family=Fira+Code:wght@400;600&display=swap");
+
+@layer defaults {
+    :root, :host {
+        --font-content: "Inter";
+        --font-monospace: "Fira Code";
+        --font-round: "Rubik";
+    }
+
+    :root, :host, button, input, textarea, #app {
+        font-family: var(--font-content), sans-serif;
+    }
+
+    code {
+        font-family: var(--font-monospace), monospace;
+    }
+
+    h1, h2, h3, h4 {
+        font-weight: 600;
+        padding: 0;
+        margin: 0;
+    }
+
+    b, strong {
+        font-weight: 600;
+    }
+}
+
+:root, :host {
+    --font-icon-xxxs: 8px;
+    --font-icon-xxs: 10px;
+    --font-icon-xs: 12px;
+    --font-icon-s: 16px;
+    --font-icon-m: 20px;
+    --font-icon-l: 24px;
+    --font-icon-xl: 32px;
+
+    --font-size-xxs: 0.6rem;
+    --font-size-xs: 0.7rem;
+    --font-size-s: 0.8rem;
+    --font-size-m: 0.9rem;
+    --font-size-l: 1rem;
+    --font-size-xl: 1.1rem;
+    --font-size-xxl: 1.2rem;
+}

package/src/style/index.scss

@@ -0,0 +1,64 @@
+@use "colors";
+@use "fonts";
+@use "lengths";
+@use "scrollbar";
+@use "layout";
+
+:root, :host {
+    --duration-fastest: 0.05s ease-in-out;
+    --duration-faster: 0.1s ease-in-out;
+    --duration-fast: 0.2s ease-in-out;
+    --duration-medium: 0.4s ease-in-out;
+    --duration-slow: 0.8s ease-in-out;
+
+    --transition-fast: color var(--duration-fast),
+    border-color var(--duration-fast),
+    border var(--duration-fast),
+    transform var(--duration-fast),
+    opacity var(--duration-fast),
+    margin var(--duration-fast),
+    box-shadow var(--duration-fast),
+    background var(--duration-fast),
+    text-shadow var(--duration-fast);
+}
+
+@layer defaults {
+    button, input, textarea {
+        font-family: inherit;
+        font-size: inherit;
+        color: inherit;
+        border: none;
+        background: none;
+        outline: none;
+    }
+
+    *:focus-visible {
+        outline: none;
+    }
+
+    *::placeholder {
+        color: inherit;
+        opacity: 0.25;
+    }
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ::selection {
+        color: var(--color-content);
+        background: var(--color-primary);
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+}

package/src/style/layout.scss

@@ -0,0 +1,3 @@
+:root, :host {
+    --layout-width-column: 240px
+}

package/src/style/lengths.scss

@@ -0,0 +1,21 @@
+:root, :host {
+    --length-radius-xxs: 2px;
+    --length-radius-xs: 4px;
+    --length-radius-s: 8px;
+    --length-radius-m: 16px;
+    --length-radius-l: 24px;
+
+    --length-xxxxs: 1px;
+    --length-xxxs: 2px;
+    --length-xxs: 4px;
+    --length-xs: 8px;
+    --length-s: 12px;
+    --length-m: 16px;
+    --length-l: 24px;
+    --length-xl: 32px;
+    --length-xxl: 48px;
+    --length-xxxl: 64px;
+    --length-xxxxl: 96px;
+
+    --length-content: min(1248px, calc(100vw - var(--length-xl)));
+}

package/src/style/scrollbar.scss

@@ -0,0 +1,27 @@
+:root, :host {
+    --scrollbar-width: 8px;
+    scrollbar-color: var(--color-soft) var(--color-background-0);
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+
+    &:horizontal {
+        height: var(--scrollbar-width);
+    }
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-background-0);
+    border-radius: var(--length-radius-m);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-soft);
+    border-radius: 10px;
+
+    &:hover {
+        background: var(--color-content-litest);
+    }
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        },
+        "target": "esnext",
+        "useDefineForClassFields": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "jsx": "preserve",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "lib": [
+            "esnext",
+            "dom"
+        ],
+        "types": [
+            "vitest/globals",
+            "vite/client",
+            "node"
+        ]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
+    ]
+}

package/vite.config.ts

@@ -0,0 +1,68 @@
+/// <reference types="histoire" />
+
+import libAssets from "@laynezh/vite-plugin-lib-assets";
+import vue from "@vitejs/plugin-vue";
+import * as path from "path";
+import { visualizer } from "rollup-plugin-visualizer";
+import { defineConfig, UserConfigExport } from "vite";
+import dts from "vite-plugin-dts";
+
+import packageDefinition from "./package.json";
+
+const alias = {
+    "@": path.resolve(__dirname, "src")
+};
+
+export default defineConfig(() => {
+    const externals = Object.keys(packageDefinition.peerDependencies || {});
+
+    externals.forEach((dependency) => {
+        if (dependency.startsWith("@luna-park")) {
+            externals.push(dependency.replace("@luna-park/", "packages/"));
+        }
+    });
+
+    const config: UserConfigExport = {
+        build: {
+            lib: {
+                entry: "src/index.ts",
+                fileName: "index",
+                name: "@luna-park/design"
+            },
+            rolldownOptions: {
+                external(id: string) {
+                    return externals.some((external) => (
+                        id === external ||
+                        id.includes(`/${ external }`) ||
+                        id.startsWith(`${ external }/`)
+                    ));
+                },
+                output: {
+                    globals(id: string) {
+                        id = id.replaceAll("\\", "/");
+
+                        for (const external of externals) {
+                            if (id === external || id.includes(`/${ external }`) || id.startsWith(`${ external }/`)) {
+                                return external;
+                            }
+                        }
+
+                        return id;
+                    }
+                }
+            }
+        },
+        plugins: [
+            libAssets({ }),
+            vue(),
+            dts({}),
+            visualizer()
+        ],
+        resolve: {
+            alias,
+            dedupe: ["vue", "pinia"]
+        }
+    };
+
+    return config;
+});