elementdrawing 1.0.0

package/src/css/base.css

@@ -0,0 +1,615 @@
+/*
+ * ElementDrawing Framework - Base CSS
+ * CSS reset, custom properties, typography base, form element reset,
+ * scrollbar styles, animation base, selection styles, focus styles,
+ * and print styles.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* ─── CSS Reset ────────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+  tab-size: 4;
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  line-height: 1.5;
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
+}
+
+/* Remove default margins */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+dl, dd, ol, ul,
+figure, hr, fieldset, legend {
+  margin: 0;
+}
+
+/* Remove default list styles */
+ol, ul, menu {
+  list-style: none;
+  padding: 0;
+}
+
+/* Remove default heading styles - reset to normal */
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* Reset links */
+a {
+  color: inherit;
+  text-decoration: inherit;
+  background-color: transparent;
+}
+
+/* Reset images */
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  max-width: 100%;
+}
+
+img, video {
+  height: auto;
+}
+
+/* Reset form elements */
+button, input, optgroup, select, textarea {
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  border: 0;
+  background: none;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+  appearance: button;
+}
+
+button:not(:disabled), [type="button"]:not(:disabled),
+[type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+input::placeholder, textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+/* Reset table */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Reset hr */
+hr {
+  border: 0;
+  border-top: 1px solid #e5e7eb;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/* Remove animations for people who prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ─── Custom Properties ────────────────────────────────────────────────────── */
+
+:root {
+  /* ── Color Palette ── */
+  --ed-primary-50: #eff6ff;
+  --ed-primary-100: #dbeafe;
+  --ed-primary-200: #bfdbfe;
+  --ed-primary-300: #93c5fd;
+  --ed-primary-400: #60a5fa;
+  --ed-primary-500: #3b82f6;
+  --ed-primary-600: #2563eb;
+  --ed-primary-700: #1d4ed8;
+  --ed-primary-800: #1e40af;
+  --ed-primary-900: #1e3a8a;
+
+  --ed-success-50: #f0fdf4;
+  --ed-success-500: #22c55e;
+  --ed-success-600: #16a34a;
+
+  --ed-warning-50: #fffbeb;
+  --ed-warning-500: #f59e0b;
+  --ed-warning-600: #d97706;
+
+  --ed-danger-50: #fef2f2;
+  --ed-danger-500: #ef4444;
+  --ed-danger-600: #dc2626;
+
+  --ed-info-50: #f0f9ff;
+  --ed-info-500: #0ea5e9;
+  --ed-info-600: #0284c7;
+
+  /* ── Neutral Palette ── */
+  --ed-gray-50: #f9fafb;
+  --ed-gray-100: #f3f4f6;
+  --ed-gray-200: #e5e7eb;
+  --ed-gray-300: #d1d5db;
+  --ed-gray-400: #9ca3af;
+  --ed-gray-500: #6b7280;
+  --ed-gray-600: #4b5563;
+  --ed-gray-700: #374151;
+  --ed-gray-800: #1f2937;
+  --ed-gray-900: #111827;
+
+  /* ── Semantic Colors ── */
+  --ed-bg-primary: #ffffff;
+  --ed-bg-secondary: #f9fafb;
+  --ed-bg-tertiary: #f3f4f6;
+  --ed-text-primary: #111827;
+  --ed-text-secondary: #4b5563;
+  --ed-text-tertiary: #9ca3af;
+  --ed-text-inverse: #ffffff;
+  --ed-border-primary: #e5e7eb;
+  --ed-border-secondary: #d1d5db;
+
+  /* ── Layout ── */
+  --ed-container-sm: 640px;
+  --ed-container-md: 768px;
+  --ed-container-lg: 1024px;
+  --ed-container-xl: 1280px;
+  --ed-container-2xl: 1536px;
+  --ed-sidebar-width: 260px;
+  --ed-navbar-height: 64px;
+
+  /* ── Timing ── */
+  --ed-duration-instant: 75ms;
+  --ed-duration-fast: 150ms;
+  --ed-duration-normal: 250ms;
+  --ed-duration-slow: 350ms;
+  --ed-duration-slower: 500ms;
+  --ed-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ed-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --ed-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --ed-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ed-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ed-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* ─── Typography Base ──────────────────────────────────────────────────────── */
+
+body {
+  font-family: var(--ed-font-family, "ElementDrawing", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--ed-text-primary);
+}
+
+h1, .ed-h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+h2, .ed-h2 {
+  font-size: 1.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.025em;
+}
+
+h3, .ed-h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+h4, .ed-h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+h5, .ed-h5 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+h6, .ed-h6 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+small, .ed-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--ed-font-mono, "JetBrains Mono", monospace);
+  font-size: 0.875em;
+}
+
+code {
+  padding: 0.125rem 0.375rem;
+  background-color: var(--ed-gray-100);
+  border-radius: 0.25rem;
+  color: var(--ed-danger-600);
+}
+
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  background-color: var(--ed-gray-900);
+  color: var(--ed-gray-100);
+  border-radius: 0.5rem;
+  line-height: 1.6;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+
+kbd {
+  padding: 0.125rem 0.375rem;
+  background-color: var(--ed-gray-100);
+  border: 1px solid var(--ed-gray-300);
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 0 var(--ed-gray-300);
+  font-size: 0.75rem;
+}
+
+blockquote {
+  padding: 0.75rem 1.5rem;
+  border-left: 4px solid var(--ed-primary-500);
+  background-color: var(--ed-primary-50);
+  color: var(--ed-text-secondary);
+  margin-bottom: 1rem;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* ─── Form Element Reset ───────────────────────────────────────────────────── */
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -2px;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="file"] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--ed-gray-300);
+  background-color: #fff;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+[type="checkbox"] {
+  border-radius: 0.25rem;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+
+[type="checkbox"]:checked, [type="radio"]:checked {
+  border-color: var(--ed-primary-500);
+  background-color: var(--ed-primary-500);
+}
+
+select {
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+progress {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+progress::-webkit-progress-bar {
+  background-color: var(--ed-gray-200);
+  border-radius: 9999px;
+}
+
+progress::-webkit-progress-value {
+  background-color: var(--ed-primary-500);
+  border-radius: 9999px;
+  transition: width var(--ed-duration-normal) var(--ed-easing-default);
+}
+
+/* ─── Scrollbar Styles ─────────────────────────────────────────────────────── */
+
+:root {
+  --ed-scrollbar-size: 8px;
+  --ed-scrollbar-track: #f1f1f1;
+  --ed-scrollbar-thumb: #c1c1c1;
+  --ed-scrollbar-thumb-hover: #a0a0a0;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ed-scrollbar-thumb) var(--ed-scrollbar-track);
+}
+
+::-webkit-scrollbar {
+  width: var(--ed-scrollbar-size);
+  height: var(--ed-scrollbar-size);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--ed-scrollbar-track);
+  border-radius: calc(var(--ed-scrollbar-size) / 2);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ed-scrollbar-thumb);
+  border-radius: calc(var(--ed-scrollbar-size) / 2);
+  border: 2px solid var(--ed-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ed-scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--ed-scrollbar-track);
+}
+
+/* ─── Animation Base ───────────────────────────────────────────────────────── */
+
+:root {
+  --ed-anim-duration: 300ms;
+  --ed-anim-easing: var(--ed-easing-default);
+}
+
+.animate-base {
+  transition-property: color, background-color, border-color, outline-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+    filter, backdrop-filter;
+  transition-timing-function: var(--ed-anim-easing);
+  transition-duration: var(--ed-anim-duration);
+}
+
+.will-change-transform {
+  will-change: transform;
+}
+
+.will-change-opacity {
+  will-change: opacity;
+}
+
+.backface-hidden {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.perspective-1000 {
+  perspective: 1000px;
+}
+
+.preserve-3d {
+  transform-style: preserve-3d;
+}
+
+/* ─── Selection Styles ─────────────────────────────────────────────────────── */
+
+::selection {
+  background-color: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+::-moz-selection {
+  background-color: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+.select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.select-text {
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.select-all {
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+.select-auto {
+  user-select: auto;
+  -webkit-user-select: auto;
+}
+
+/* ─── Focus Styles ─────────────────────────────────────────────────────────── */
+
+:root {
+  --ed-focus-ring-color: rgba(59, 130, 246, 0.4);
+  --ed-focus-ring-width: 3px;
+  --ed-focus-ring-offset: 2px;
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ed-focus-ring-width) var(--ed-focus-ring-offset) var(--ed-focus-ring-color);
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.focus-ring {
+  outline: none;
+}
+
+.focus-ring:focus-visible {
+  box-shadow: 0 0 0 var(--ed-focus-ring-width) var(--ed-focus-ring-offset) var(--ed-focus-ring-color);
+}
+
+.focus-ring-inset:focus-visible {
+  box-shadow: inset 0 0 0 var(--ed-focus-ring-width) var(--ed-focus-ring-color);
+}
+
+/* ─── Print Styles ─────────────────────────────────────────────────────────── */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a, a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.875rem;
+  }
+
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr, img {
+    page-break-inside: avoid;
+  }
+
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2, h3 {
+    page-break-after: avoid;
+  }
+
+  pre, blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  .ed-no-print,
+  .ed-navbar,
+  .ed-sidebar,
+  .ed-modal-overlay,
+  .ed-toast-container {
+    display: none !important;
+  }
+
+  .ed-main-content {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  @page {
+    margin: 0.5cm;
+    size: A4;
+  }
+}