elementdrawing 1.0.0

package/src/css/tailwind.css

@@ -0,0 +1,370 @@
+/*
+ * ElementDrawing Framework - Tailwind CSS Entry Point
+ * Main stylesheet with Tailwind directives, custom layers,
+ * and ElementDrawing base styles.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* ─── Tailwind Directives ──────────────────────────────────────────────────── */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Tailwind Config Import ───────────────────────────────────────────────── */
+
+@config "../../tailwind.config.js";
+
+/* ─── Custom Base Layer ────────────────────────────────────────────────────── */
+
+@layer base {
+  /* ── Font Face Declarations ── */
+  @font-face {
+    font-family: "ElementDrawing";
+    src: url("../assets/fonts/elementdrawing-regular.woff2") format("woff2"),
+         url("../assets/fonts/elementdrawing-regular.woff") format("woff");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "ElementDrawing";
+    src: url("../assets/fonts/elementdrawing-medium.woff2") format("woff2"),
+         url("../assets/fonts/elementdrawing-medium.woff") format("woff");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "ElementDrawing";
+    src: url("../assets/fonts/elementdrawing-semibold.woff2") format("woff2"),
+         url("../assets/fonts/elementdrawing-semibold.woff") format("woff");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "ElementDrawing";
+    src: url("../assets/fonts/elementdrawing-bold.woff2") format("woff2"),
+         url("../assets/fonts/elementdrawing-bold.woff") format("woff");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  /* ── CSS Custom Properties ── */
+  :root {
+    --ed-font-family: "ElementDrawing", -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --ed-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code",
+      "Consolas", monospace;
+    --ed-font-size-xs: 0.75rem;
+    --ed-font-size-sm: 0.875rem;
+    --ed-font-size-base: 1rem;
+    --ed-font-size-lg: 1.125rem;
+    --ed-font-size-xl: 1.25rem;
+    --ed-font-size-2xl: 1.5rem;
+    --ed-font-size-3xl: 1.875rem;
+    --ed-font-size-4xl: 2.25rem;
+    --ed-line-height-tight: 1.25;
+    --ed-line-height-normal: 1.5;
+    --ed-line-height-relaxed: 1.75;
+    --ed-spacing-unit: 0.25rem;
+    --ed-border-radius-sm: 0.25rem;
+    --ed-border-radius: 0.375rem;
+    --ed-border-radius-md: 0.5rem;
+    --ed-border-radius-lg: 0.75rem;
+    --ed-border-radius-xl: 1rem;
+    --ed-border-radius-full: 9999px;
+    --ed-transition-fast: 150ms ease;
+    --ed-transition-base: 250ms ease;
+    --ed-transition-slow: 350ms ease;
+    --ed-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --ed-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    --ed-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    --ed-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --ed-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --ed-z-dropdown: 1000;
+    --ed-z-sticky: 1020;
+    --ed-z-fixed: 1030;
+    --ed-z-modal-backdrop: 1040;
+    --ed-z-modal: 1050;
+    --ed-z-popover: 1060;
+    --ed-z-tooltip: 1070;
+    --ed-z-toast: 1080;
+  }
+
+  /* ── Base HTML Styles ── */
+  html {
+    font-family: var(--ed-font-family);
+    font-size: var(--ed-font-size-base);
+    line-height: var(--ed-line-height-normal);
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+    tab-size: 4;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    color: var(--ed-text-primary, #1a1a2e);
+    background-color: var(--ed-bg-primary, #ffffff);
+  }
+
+  /* ── Scrollbar Styles ── */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--ed-scrollbar-thumb, #c1c1c1) var(--ed-scrollbar-track, #f1f1f1);
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--ed-scrollbar-track, #f1f1f1);
+    border-radius: var(--ed-border-radius);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--ed-scrollbar-thumb, #c1c1c1);
+    border-radius: var(--ed-border-radius);
+    border: 2px solid var(--ed-scrollbar-track, #f1f1f1);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--ed-scrollbar-thumb-hover, #a0a0a0);
+  }
+
+  /* ── Selection Styles ── */
+  ::selection {
+    background-color: var(--ed-selection-bg, rgba(59, 130, 246, 0.3));
+    color: var(--ed-selection-color, inherit);
+  }
+
+  ::-moz-selection {
+    background-color: var(--ed-selection-bg, rgba(59, 130, 246, 0.3));
+    color: var(--ed-selection-color, inherit);
+  }
+
+  /* ── Focus Styles ── */
+  :focus-visible {
+    outline: 2px solid var(--ed-focus-ring, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+/* ─── Custom Components Layer ──────────────────────────────────────────────── */
+
+@layer components {
+  /* ── Button Base ── */
+  .ed-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-family: var(--ed-font-family);
+    font-size: var(--ed-font-size-sm);
+    font-weight: 500;
+    line-height: var(--ed-line-height-tight);
+    border: 1px solid transparent;
+    border-radius: var(--ed-border-radius);
+    cursor: pointer;
+    transition: all var(--ed-transition-fast);
+    user-select: none;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
+  .ed-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Card Base ── */
+  .ed-card {
+    background-color: var(--ed-card-bg, #ffffff);
+    border: 1px solid var(--ed-card-border, #e5e7eb);
+    border-radius: var(--ed-border-radius-lg);
+    box-shadow: var(--ed-shadow-sm);
+    overflow: hidden;
+  }
+
+  .ed-card-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--ed-card-border, #e5e7eb);
+  }
+
+  .ed-card-body {
+    padding: 1.5rem;
+  }
+
+  .ed-card-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--ed-card-border, #e5e7eb);
+  }
+
+  /* ── Modal Base ── */
+  .ed-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--ed-z-modal);
+    padding: 1rem;
+  }
+
+  .ed-modal {
+    background-color: var(--ed-modal-bg, #ffffff);
+    border-radius: var(--ed-border-radius-lg);
+    box-shadow: var(--ed-shadow-xl);
+    width: 100%;
+    max-width: 32rem;
+    max-height: 90vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ── Input Base ── */
+  .ed-input {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--ed-font-family);
+    font-size: var(--ed-font-size-sm);
+    line-height: var(--ed-line-height-normal);
+    color: var(--ed-input-color, #1a1a2e);
+    background-color: var(--ed-input-bg, #ffffff);
+    border: 1px solid var(--ed-input-border, #d1d5db);
+    border-radius: var(--ed-border-radius);
+    transition: border-color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
+  }
+
+  .ed-input:focus {
+    outline: none;
+    border-color: var(--ed-input-focus-border, #3b82f6);
+    box-shadow: 0 0 0 3px var(--ed-input-focus-ring, rgba(59, 130, 246, 0.15));
+  }
+
+  .ed-input::placeholder {
+    color: var(--ed-input-placeholder, #9ca3af);
+  }
+
+  .ed-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--ed-input-disabled-bg, #f3f4f6);
+  }
+}
+
+/* ─── Custom Utilities Layer ───────────────────────────────────────────────── */
+
+@layer utilities {
+  /* ── Scrollbar Utilities ── */
+  .ed-scrollbar-thin {
+    scrollbar-width: thin;
+  }
+
+  .ed-scrollbar-none {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .ed-scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ── Selection Utilities ── */
+  .ed-selection-none {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .ed-selection-all {
+    user-select: all;
+    -webkit-user-select: all;
+  }
+
+  .ed-selection-auto {
+    user-select: auto;
+    -webkit-user-select: auto;
+  }
+
+  /* ── Glass Morphism Utilities ── */
+  .ed-glass {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .ed-glass-dark {
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .ed-glass-strong {
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  /* ── Gradient Text Utilities ── */
+  .ed-gradient-text {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .ed-gradient-text-primary {
+    background-image: linear-gradient(135deg, var(--ed-primary, #3b82f6), var(--ed-secondary, #8b5cf6));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  /* ── Truncate Utilities ── */
+  .ed-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ed-line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ed-line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}