@sanvika/ui 0.1.0

package/src/styles/tokens/light.css

@@ -0,0 +1,158 @@
+/* src/styles/tokens/light.css */
+
+/* ========================================== */
+/* LIGHT THEME VARIABLES (DESIGN TOKENS)     */
+/* ========================================== */
+:root {
+  /* ===== PRIMARY BACKGROUND COLORS ===== */
+  --bg-color: #fafafa;
+  --card-bg: #fafafa;
+  --input-bg: #dddddd;
+  --light-bg: #dddddd;
+  --section-bg: #f5f5f5;
+  --form-card-bg: #fafafa;
+  --hover-color: #f2ecec;
+  --table-stripe-bg: #dddddd;
+  --muted-bg: #f2f2f2;
+  --disabled-bg: #e9ecef;
+
+  /* ===== TEXT & CONTENT COLORS ===== */
+  --text-color: #000000;
+  --heading-color: #101010;
+  --label-color: #000000;
+  --placeholder-color: #242222;
+  --secondary-text-color: #121111;
+
+  /* ===== INTERACTIVE ELEMENTS ===== */
+  --link-color: #0066cc;
+  --link-hover-color: #004c99;
+  --focus-border-color: #007bff;
+  --focus-shadow-color: rgba(0, 123, 255, 0.25);
+
+  /* ===== BORDERS & ACCENTS ===== */
+  --border-color: #fa7d08;
+  --border-color-light: #e0e0e0;
+  --muted-border: #dcdcdc;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+
+  /* ===== BRAND & PRIMARY COLORS ===== */
+  --primary-color: #0984e3;
+  --secondary-color: #6c757d;
+  --accent-color: #007bff;
+  --accent-btn-bg: #007bff;
+  --accent-btn-hover-bg: #0056b3;
+
+  /* ===== NAVIGATION SPECIFIC COLORS ===== */
+  --nav-bg: #000000;
+  --nav-text: #ffffff;
+  --nav-primary-color: #0984e3;
+  --nav-accent-color: #007bff;
+  --nav-link-color: #0066cc;
+  --nav-link-hover: #004c99;
+  --nav-highlight: #4ade80;
+  --nav-highlight-bg: rgba(74, 222, 128, 0.1);
+  --error-bg-light: rgba(239, 68, 68, 0.1);
+  --error-hover-color: #ef4444;
+
+  /* ===== STATUS & FEEDBACK COLORS ===== */
+  --success-color: #28a745;
+  --error-color: #dc3545;
+  --warning-color: #ffc107;
+  --info-color: #17a2b8;
+
+  /* Status Background Colors */
+  --success-bg: #d1e7dd;
+  --success-border: #badbcc;
+  --error-bg: #f8d7da;
+  --error-border: #f5c2c7;
+  --warning-bg: #fff3cd;
+  --warning-border: #ffecb5;
+  --info-bg: #cff4fc;
+  --info-border: #b6effb;
+
+  /* ===== ALIASES (BACKWARD COMPATIBILITY) ===== */
+  --danger-color: var(--error-color);
+  --danger-color-hover: var(--error-color);
+  --muted-color: var(--secondary-text-color);
+
+  /* ===== FORM & TABLE ELEMENTS ===== */
+  --tag-bg: #e9ecef;
+  --table-header-bg: #007bff;
+  --table-header-text: #ffffff;
+
+  /* ===== FORM THEME SPECIFICS ===== */
+  --form-bg: linear-gradient(135deg, #f3f4f6 0%, #e6e7ea 100%);
+  --form-header-border: #e6e7ea;
+  --form-title: #2c3e50;
+  --form-subtitle: #6c757d;
+
+  /* ===== BUTTON VARIABLES ===== */
+  --btn-primary-bg: #0077cc;
+  --btn-primary-hover-bg: #0a6ed1;
+  --btn-primary-text: #ffffff;
+  --btn-primary-hover-text: #ffffff;
+
+  --btn-secondary-bg: #6c757d;
+  --btn-secondary-hover-bg: #495057;
+  --btn-secondary-text: #ffffff;
+  --btn-secondary-hover-text: #ffffff;
+
+  --btn-danger-bg: #dc3545;
+  --btn-danger-hover-bg: #b02a37;
+  --btn-danger-text: #ffffff;
+  --btn-danger-hover-text: #ffffff;
+
+  --btn-success-bg: #28a745;
+  --btn-success-hover-bg: #1e7a34;
+  --btn-success-text: #ffffff;
+  --btn-success-hover-text: #ffffff;
+
+  /* ===== LAYOUT ===== */
+  --container-max-width: 1280px;
+  --section-padding-y: clamp(2rem, 5vw, 5rem);
+  --section-padding-x: clamp(1rem, 4vw, 2rem);
+
+  /* ===== RADIUS & SPACING ===== */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* ===== TYPOGRAPHY ===== */
+  --font-sans:
+    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
+    sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", monospace;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+
+  /* ===== LOADING/SKELETON ===== */
+  --skeleton-base-color: #a0c1e4;
+  --skeleton-highlight-color: #e6f2ff;
+
+  /* ===== SHADOWS (use var(--shadow-color) — theme-aware) ===== */
+  --shadow-sm: 0 1px 3px var(--shadow-color);
+  --shadow-md: 0 4px 12px var(--shadow-color);
+  --shadow-lg: 0 8px 24px var(--shadow-color);
+
+  /* ===== TRANSITIONS ===== */
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.25s ease;
+  --transition-slow: 0.4s ease;
+}

package/src/styles/utilities/colors.css

@@ -0,0 +1,59 @@
+/* src/styles/utilities/colors.css */
+
+/* ========================================== */
+/* UTILITY CLASSES FOR THEME COLORS          */
+/* ========================================== */
+
+/* Text colors */
+.text-primary {
+  color: var(--primary-color);
+}
+.text-secondary {
+  color: var(--secondary-text-color);
+}
+.text-muted {
+  color: var(--secondary-text-color);
+}
+.text-success {
+  color: var(--success-color);
+}
+.text-error {
+  color: var(--error-color);
+}
+.text-warning {
+  color: var(--warning-color);
+}
+.text-info {
+  color: var(--info-color);
+}
+
+/* Background colors */
+.bg-primary {
+  background-color: var(--bg-color);
+}
+.bg-card {
+  background-color: var(--card-bg);
+}
+.bg-section {
+  background-color: var(--section-bg);
+}
+.bg-success {
+  background-color: var(--success-bg);
+}
+.bg-error {
+  background-color: var(--error-bg);
+}
+.bg-warning {
+  background-color: var(--warning-bg);
+}
+.bg-info {
+  background-color: var(--info-bg);
+}
+
+/* Border utilities */
+.border {
+  border: 1px solid var(--border-color-light);
+}
+.border-accent {
+  border: 1px solid var(--border-color);
+}

package/src/styles/utilities/transitions.css

@@ -0,0 +1,40 @@
+/* src/styles/utilities/transitions.css */
+
+/* ========================================== */
+/* THEME TRANSITION & ANIMATION SYSTEM       */
+/* ========================================== */
+
+:root[data-theme] * {
+  transition:
+    background-color var(--transition-base),
+    color var(--transition-base),
+    border-color var(--transition-base),
+    box-shadow var(--transition-base);
+}
+
+/* Theme change transition helper */
+.theme-transitioning * {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease !important;
+}
+
+/* Preserve button hover transitions separately */
+.theme-transitioning button {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    transform 0.15s ease !important;
+}
+
+/* Disable transitions during theme switch for inputs (prevent double-flash) */
+.theme-transitioning input,
+.theme-transitioning select,
+.theme-transitioning textarea {
+  transition: none !important;
+}
+
+html[data-theme] {
+  visibility: visible;
+}