@sekiui/elements 0.0.13 → 0.0.15

package/dist/collection/components/button/seki-button.css

@@ -0,0 +1,380 @@
+/**
+ * SekiUI Design Tokens - Index
+ * Aggregates all design token files into a single entry point
+ *
+ * Import this file to get access to all design tokens:
+ * @import '../tokens/index.css';
+ */
+
+/**
+ * SekiUI Design Tokens - Colors
+ * Hierarchical color system: Primitive → Semantic → Component
+ */
+
+/* =============================================================================
+   PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
+   ============================================================================= */
+
+:root {
+  /* Neutral Scale (50-950) */
+  --seki-neutral-50: hsl(0, 0%, 98%);
+  --seki-neutral-100: hsl(0, 0%, 96%);
+  --seki-neutral-200: hsl(0, 0%, 90%);
+  --seki-neutral-300: hsl(0, 0%, 83%);
+  --seki-neutral-400: hsl(0, 0%, 64%);
+  --seki-neutral-500: hsl(0, 0%, 45%);
+  --seki-neutral-600: hsl(0, 0%, 32%);
+  --seki-neutral-700: hsl(0, 0%, 25%);
+  --seki-neutral-800: hsl(0, 0%, 15%);
+  --seki-neutral-900: hsl(0, 0%, 9%);
+  --seki-neutral-950: hsl(0, 0%, 4%);
+
+  /* Primary/Accent Scale (50-950) */
+  --seki-primary-50: hsl(210, 100%, 97%);
+  --seki-primary-100: hsl(210, 95%, 93%);
+  --seki-primary-200: hsl(210, 95%, 85%);
+  --seki-primary-300: hsl(210, 90%, 73%);
+  --seki-primary-400: hsl(210, 85%, 58%);
+  --seki-primary-500: hsl(210, 80%, 48%);
+  --seki-primary-600: hsl(210, 75%, 40%);
+  --seki-primary-700: hsl(210, 70%, 32%);
+  --seki-primary-800: hsl(210, 65%, 25%);
+  --seki-primary-900: hsl(210, 60%, 18%);
+  --seki-primary-950: hsl(210, 55%, 10%);
+
+  /* Semantic Color Primitives */
+  --seki-success-500: hsl(142, 71%, 45%);
+  --seki-success-600: hsl(142, 71%, 35%);
+  --seki-warning-500: hsl(38, 92%, 50%);
+  --seki-warning-600: hsl(38, 92%, 40%);
+  --seki-destructive-500: hsl(0, 72%, 51%);
+  --seki-destructive-600: hsl(0, 72%, 41%);
+}
+
+/* =============================================================================
+   SEMANTIC TOKENS (Layer 2: Purpose-Based)
+   ============================================================================= */
+
+:root {
+  /* Backgrounds */
+  --seki-bg-primary: var(--seki-neutral-50);
+  --seki-bg-secondary: var(--seki-neutral-100);
+  --seki-bg-tertiary: var(--seki-neutral-200);
+
+  /* Text */
+  --seki-text-primary: var(--seki-neutral-900);
+  --seki-text-secondary: var(--seki-neutral-600);
+  --seki-text-tertiary: var(--seki-neutral-400);
+
+  /* Borders */
+  --seki-border-default: var(--seki-neutral-200);
+  --seki-border-emphasis: var(--seki-neutral-300);
+
+  /* Accent */
+  --seki-accent: var(--seki-primary-500);
+  --seki-accent-emphasis: var(--seki-primary-600);
+
+  /* States */
+  --seki-success: var(--seki-success-500);
+  --seki-warning: var(--seki-warning-500);
+  --seki-destructive: var(--seki-destructive-500);
+}
+
+/* Dark Mode Semantic Tokens */
+:root[data-theme='dark'] {
+  /* Backgrounds */
+  --seki-bg-primary: var(--seki-neutral-950);
+  --seki-bg-secondary: var(--seki-neutral-900);
+  --seki-bg-tertiary: var(--seki-neutral-800);
+
+  /* Text */
+  --seki-text-primary: var(--seki-neutral-50);
+  --seki-text-secondary: var(--seki-neutral-400);
+  --seki-text-tertiary: var(--seki-neutral-600);
+
+  /* Borders */
+  --seki-border-default: var(--seki-neutral-800);
+  --seki-border-emphasis: var(--seki-neutral-700);
+
+  /* Accent */
+  --seki-accent: var(--seki-primary-400);
+  --seki-accent-emphasis: var(--seki-primary-300);
+
+  /* States remain the same */
+}
+
+/* =============================================================================
+   COMPONENT TOKENS (Layer 3: Button-Specific)
+   ============================================================================= */
+
+:root {
+  /* Button Variant: Primary */
+  --seki-button-primary-bg: var(--seki-accent);
+  --seki-button-primary-text: var(--seki-neutral-50);
+  --seki-button-primary-border: transparent;
+  --seki-button-primary-hover-bg: var(--seki-accent-emphasis);
+  --seki-button-primary-hover-border: transparent;
+
+  /* Button Variant: Secondary */
+  --seki-button-secondary-bg: var(--seki-bg-secondary);
+  --seki-button-secondary-text: var(--seki-text-primary);
+  --seki-button-secondary-border: var(--seki-border-default);
+  --seki-button-secondary-hover-bg: var(--seki-bg-tertiary);
+  --seki-button-secondary-hover-border: var(--seki-border-emphasis);
+
+  /* Button Variant: Outline */
+  --seki-button-outline-bg: transparent;
+  --seki-button-outline-text: var(--seki-accent);
+  --seki-button-outline-border: var(--seki-accent);
+  --seki-button-outline-hover-bg: var(--seki-accent);
+  --seki-button-outline-hover-text: var(--seki-neutral-50);
+  --seki-button-outline-hover-border: var(--seki-accent);
+
+  /* Button Variant: Ghost */
+  --seki-button-ghost-bg: transparent;
+  --seki-button-ghost-text: var(--seki-text-primary);
+  --seki-button-ghost-border: transparent;
+  --seki-button-ghost-hover-bg: var(--seki-bg-secondary);
+  --seki-button-ghost-hover-border: transparent;
+
+  /* Button Variant: Destructive */
+  --seki-button-destructive-bg: var(--seki-destructive);
+  --seki-button-destructive-text: var(--seki-neutral-50);
+  --seki-button-destructive-border: transparent;
+  --seki-button-destructive-hover-bg: var(--seki-destructive-600);
+  --seki-button-destructive-hover-border: transparent;
+
+  /* Button Sizing: Small */
+  --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);
+  --seki-button-sm-padding-y: var(--seki-spacing-1-5, 0.375rem);
+  --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);
+  --seki-button-sm-height: 2rem;
+
+  /* Button Sizing: Medium (default) */
+  --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);
+  --seki-button-md-padding-y: var(--seki-spacing-2, 0.5rem);
+  --seki-button-md-font-size: var(--seki-text-base, 1rem);
+  --seki-button-md-height: 2.5rem;
+
+  /* Button Sizing: Large */
+  --seki-button-lg-padding-x: var(--seki-spacing-5, 1.25rem);
+  --seki-button-lg-padding-y: var(--seki-spacing-2-5, 0.625rem);
+  --seki-button-lg-font-size: var(--seki-text-lg, 1.125rem);
+  --seki-button-lg-height: 3rem;
+
+  /* Button Common */
+  --seki-button-radius: var(--seki-radius-md, 0.375rem);
+  --seki-button-font-weight: var(--seki-font-medium, 500);
+  --seki-button-transition-duration: 150ms;
+  --seki-button-transition-timing: ease-in-out;
+  --seki-button-shadow: var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --seki-button-shadow-hover: var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --seki-button-disabled-opacity: 0.5;
+}
+
+/**
+ * SekiUI Design Tokens - Spacing
+ * 4px base unit, rem-based scale
+ */
+
+:root {
+  /* Spacing Scale (4px base unit) */
+  --seki-spacing-0: 0;
+  --seki-spacing-0-5: 0.125rem;  /* 2px */
+  --seki-spacing-1: 0.25rem;     /* 4px */
+  --seki-spacing-1-5: 0.375rem;  /* 6px */
+  --seki-spacing-2: 0.5rem;      /* 8px */
+  --seki-spacing-2-5: 0.625rem;  /* 10px */
+  --seki-spacing-3: 0.75rem;     /* 12px */
+  --seki-spacing-3-5: 0.875rem;  /* 14px */
+  --seki-spacing-4: 1rem;        /* 16px */
+  --seki-spacing-5: 1.25rem;     /* 20px */
+  --seki-spacing-6: 1.5rem;      /* 24px */
+  --seki-spacing-8: 2rem;        /* 32px */
+  --seki-spacing-10: 2.5rem;     /* 40px */
+  --seki-spacing-12: 3rem;       /* 48px */
+  --seki-spacing-16: 4rem;       /* 64px */
+  --seki-spacing-20: 5rem;       /* 80px */
+  --seki-spacing-24: 6rem;       /* 96px */
+}
+
+/**
+ * SekiUI Design Tokens - Shadows
+ * Subtle elevation system
+ */
+
+:root {
+  /* Shadow Levels */
+  --seki-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --seki-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --seki-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/**
+ * SekiUI Design Tokens - Typography
+ * System font stacks, sizes, weights, line heights
+ */
+
+:root {
+  /* Font Families */
+  --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --seki-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Font Sizes (rem-based) */
+  --seki-text-xs: 0.75rem;    /* 12px */
+  --seki-text-sm: 0.875rem;   /* 14px */
+  --seki-text-base: 1rem;     /* 16px */
+  --seki-text-lg: 1.125rem;   /* 18px */
+  --seki-text-xl: 1.25rem;    /* 20px */
+  --seki-text-2xl: 1.5rem;    /* 24px */
+  --seki-text-3xl: 1.875rem;  /* 30px */
+  --seki-text-4xl: 2.25rem;   /* 36px */
+
+  /* Font Weights */
+  --seki-font-normal: 400;
+  --seki-font-medium: 500;
+  --seki-font-semibold: 600;
+  --seki-font-bold: 700;
+
+  /* Line Heights */
+  --seki-leading-tight: 1.25;
+  --seki-leading-normal: 1.5;
+  --seki-leading-relaxed: 1.75;
+}
+
+/**
+ * SekiUI Design Tokens - Border Radius
+ * Four-level radius system
+ */
+
+:root {
+  /* Border Radius Levels */
+  --seki-radius-sm: 0.25rem;   /* 4px */
+  --seki-radius-md: 0.375rem;  /* 6px */
+  --seki-radius-lg: 0.5rem;    /* 8px */
+  --seki-radius-xl: 1rem;      /* 16px */
+}
+
+
+
+:host {
+  display: inline-block;
+}
+
+.button {
+  /* Base styles */
+  font-family: var(--seki-font-sans);
+  font-weight: var(--seki-button-font-weight);
+  border-radius: var(--seki-button-radius);
+  cursor: pointer;
+  border: 1px solid;
+  transition: background-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
+              border-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
+              color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
+              box-shadow var(--seki-button-transition-duration) var(--seki-button-transition-timing);
+  box-shadow: var(--seki-button-shadow);
+}
+
+.button:hover:not(:disabled) {
+  box-shadow: var(--seki-button-shadow-hover);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--seki-accent);
+  outline-offset: 2px;
+}
+
+.button:disabled {
+  opacity: var(--seki-button-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Variant: Primary */
+.button--primary {
+  background: var(--seki-button-primary-bg);
+  color: var(--seki-button-primary-text);
+  border-color: var(--seki-button-primary-border);
+}
+
+.button--primary:hover:not(:disabled) {
+  background: var(--seki-button-primary-hover-bg);
+  border-color: var(--seki-button-primary-hover-border);
+}
+
+/* Variant: Secondary */
+.button--secondary {
+  background: var(--seki-button-secondary-bg);
+  color: var(--seki-button-secondary-text);
+  border-color: var(--seki-button-secondary-border);
+}
+
+.button--secondary:hover:not(:disabled) {
+  background: var(--seki-button-secondary-hover-bg);
+  border-color: var(--seki-button-secondary-hover-border);
+}
+
+/* Variant: Outline */
+.button--outline {
+  background: var(--seki-button-outline-bg);
+  color: var(--seki-button-outline-text);
+  border-color: var(--seki-button-outline-border);
+}
+
+.button--outline:hover:not(:disabled) {
+  background: var(--seki-button-outline-hover-bg);
+  color: var(--seki-button-outline-hover-text);
+  border-color: var(--seki-button-outline-hover-border);
+}
+
+/* Variant: Ghost */
+.button--ghost {
+  background: var(--seki-button-ghost-bg);
+  color: var(--seki-button-ghost-text);
+  border-color: var(--seki-button-ghost-border);
+}
+
+.button--ghost:hover:not(:disabled) {
+  background: var(--seki-button-ghost-hover-bg);
+  border-color: var(--seki-button-ghost-hover-border);
+}
+
+/* Variant: Destructive */
+.button--destructive {
+  background: var(--seki-button-destructive-bg);
+  color: var(--seki-button-destructive-text);
+  border-color: var(--seki-button-destructive-border);
+}
+
+.button--destructive:hover:not(:disabled) {
+  background: var(--seki-button-destructive-hover-bg);
+  border-color: var(--seki-button-destructive-hover-border);
+}
+
+/* Size: Small */
+.button--sm {
+  padding: var(--seki-button-sm-padding-y) var(--seki-button-sm-padding-x);
+  font-size: var(--seki-button-sm-font-size);
+  height: var(--seki-button-sm-height);
+}
+
+/* Size: Medium (default) */
+.button--md {
+  padding: var(--seki-button-md-padding-y) var(--seki-button-md-padding-x);
+  font-size: var(--seki-button-md-font-size);
+  height: var(--seki-button-md-height);
+}
+
+/* Size: Large */
+.button--lg {
+  padding: var(--seki-button-lg-padding-y) var(--seki-button-lg-padding-x);
+  font-size: var(--seki-button-lg-font-size);
+  height: var(--seki-button-lg-height);
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+}

package/dist/collection/components/button/seki-button.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+export class SekiButton {
+    constructor() {
+        this.variant = 'primary';
+        this.size = 'md';
+        this.disabled = false;
+        this.type = 'button';
+    }
+    render() {
+        return (h("button", { key: '0a0740566a19505743488924d3971f75cf086ab8', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '6c715e7b707efb6dffc4b88773d7ea63c510f305' })));
+    }
+    static get is() { return "seki-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+}

package/dist/collection/index.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.js.map