@necrolab/dashboard 0.5.15 → 0.5.17

package/src/assets/css/base/mixins.scss

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   MIXINS - Reusable SCSS patterns
+   ========================================================================== */
+
+/**
+ * Scale hover effect - subtle zoom on hover/active
+ * Used across buttons and interactive elements
+ */
+@mixin scale-hover {
+    &:hover {
+        transform: scale(1.03);
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
+/**
+ * Scale hover for elements with disabled state
+ * Only applies transform when not disabled
+ */
+@mixin scale-hover-safe {
+    &:hover:not(:disabled) {
+        transform: scale(1.03);
+    }
+
+    &:active:not(:disabled) {
+        transform: scale(0.98);
+    }
+}
+
+/**
+ * Focus ring with accent green color
+ * Replaces repeated outline pattern across components
+ */
+@mixin focus-ring-accent {
+    @apply outline outline-1 outline-accent-green outline-offset-0;
+}
+
+/**
+ * User select control with vendor prefixes
+ * @param {string} $value - none, text, auto, all
+ */
+@mixin user-select($value) {
+    -webkit-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}
+
+/**
+ * Touch scroll reset for dropdowns and scrollable areas
+ * Enables smooth touch scrolling on mobile devices
+ */
+@mixin touch-scroll-reset {
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+/**
+ * Dark button base styling
+ * Common pattern for action buttons and modal controls
+ */
+@mixin dark-button-base {
+    @apply bg-dark-400 border border-dark-650 text-white;
+}
+
+@mixin transition-standard {
+    @apply transition-all duration-150;
+}

package/src/assets/css/base/reset.scss

@@ -17,7 +17,6 @@ button {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     outline: none;
-    /* Prevent zoom on input focus (mobile) */
     font-size: 16px;
 }
 
@@ -37,7 +36,6 @@ select:focus {
     box-shadow: none !important;
 }
 
-/* Remove number input spinners */
 input[type="number"] {
     -moz-appearance: textfield;
 }

package/src/assets/css/base/scroll.scss

@@ -2,12 +2,13 @@
    SCROLL BEHAVIOR & TOUCH HANDLING
    ========================================================================== */
 
+@use "mixins" as *;
+
 html {
     overflow: hidden !important;
     overscroll-behavior: none !important;
     height: 100% !important;
     width: 100% !important;
-    /* Additional zoom prevention at CSS level */
     -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
@@ -16,22 +17,15 @@ html {
 
 * {
     @apply hidden-scrollbars;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    @include user-select(none);
     overscroll-behavior: none !important;
 }
 
 textarea,
 .code-editor,
 .proxy-editor {
-    -webkit-user-select: text !important;
-    -moz-user-select: text !important;
-    -ms-user-select: text !important;
-    user-select: text !important;
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
+    @include user-select(text);
+    @include touch-scroll-reset;
 }
 
 .dropdown-menu,
@@ -42,60 +36,42 @@ textarea,
 .option-list *,
 .console,
 .console * {
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    @include touch-scroll-reset;
 }
 
-/* Specific overrides for dropdown content portals */
 .dropdown-content-portal {
     overflow: auto !important;
     overflow-y: auto !important;
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    @include touch-scroll-reset;
     scroll-behavior: smooth !important;
 }
 
 .dropdown-content-portal * {
     overflow: auto !important;
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    user-select: auto !important;
-    -webkit-user-select: auto !important;
-    -moz-user-select: auto !important;
-    -ms-user-select: auto !important;
+    @include touch-scroll-reset;
+    @include user-select(auto);
 }
 
-/* Ultra-specific overrides to beat the global * selector */
 body .dropdown-content-portal,
 html .dropdown-content-portal,
 div .dropdown-content-portal {
     overflow: auto !important;
     overflow-y: auto !important;
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    @include touch-scroll-reset;
 }
 
-/* Force scrolling on teleported dropdown content */
 body > .dropdown-content-portal,
 [data-v-app] .dropdown-content-portal {
     overflow: auto !important;
     overflow-y: auto !important;
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    @include touch-scroll-reset;
 }
 
 .code-editor,
 .proxy-editor,
 .editor-container,
 .proxy-editor-container {
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    @include touch-scroll-reset;
 }
 
 /* ==========================================================================
@@ -117,3 +93,34 @@ body > .dropdown-content-portal,
     touch-action: auto !important;
     overscroll-behavior: auto !important;
 }
+
+/* ==========================================================================
+   CUSTOM SCROLLBAR CLASSES - DRY Principle
+   Base properties for smooth scrolling with hidden scrollbars
+   ========================================================================== */
+
+.custom-scrollbar {
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.custom-scrollbar-y {
+    @extend .custom-scrollbar;
+    touch-action: pan-y;
+}
+
+.custom-scrollbar-x {
+    @extend .custom-scrollbar;
+    touch-action: pan-x;
+}
+
+.custom-scrollbar-xy {
+    @extend .custom-scrollbar;
+    touch-action: pan-x pan-y;
+}

package/src/assets/css/base/typography.scss

@@ -13,16 +13,15 @@ body {
     height: 100%;
     --toastify-toast-width: 520px;
 
-    /* OKLCH Color System - Supabase-inspired */
-    --bg-base: oklch(0.1822 0 0);
-    --bg-elevated: oklch(0.2046 0 0);
-    --bg-input: oklch(0.2603 0 0);
-    --bg-hover: oklch(0.2809 0 0);
-    --accent-green: oklch(0.72 0.15 145);
-    --border-base: oklch(0.2809 0 0);
-    --text-primary: oklch(0.9851 0 0);
-    --text-secondary: oklch(0.7122 0 0);
-    --text-muted: oklch(0.55 0 0);
+    --bg-base: var(--color-bg-base);
+    --bg-elevated: var(--color-bg-card);
+    --bg-input: var(--color-bg-input);
+    --bg-hover: var(--color-border);
+    --accent-green: var(--color-primary);
+    --border-base: var(--color-border);
+    --text-primary: var(--color-text-primary);
+    --text-secondary: var(--color-text-secondary);
+    --text-muted: var(--color-text-muted);
 }
 
 .editor-base {

package/src/assets/css/base/variables.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   CSS VARIABLES
+   Shared color tokens to reduce duplication across SCSS files
+   ========================================================================== */
+
+:root {
+    // Color scheme
+    color-scheme: dark;
+
+    // Most common colors (for use in SCSS files)
+    --color-primary: oklch(0.72 0.15 145); // accent green - appears 60+ times
+    --color-border: oklch(0.26 0 0); // default border - appears 16+ times
+    --color-bg-base: oklch(0.1822 0 0); // dark-300 base background
+    --color-bg-card: oklch(0.2046 0 0); // dark-400 card backgrounds
+    --color-bg-input: oklch(0.2603 0 0); // dark-500 input backgrounds
+    --color-text-primary: oklch(0.9 0 0); // primary white text
+    --color-bg-darker: oklch(0.19 0 0); // appears 11× (dark-350)
+    --color-border-light: oklch(0.28 0 0); // appears 12× (dark-550)
+    --color-text-muted: oklch(0.65 0 0); // appears 7× (light-500)
+    --color-disabled: oklch(0.60 0.20 25); // appears 5× (disabled orange)
+    --color-text-secondary: oklch(0.82 0 0); // secondary text - light-400
+    --color-text-bright: oklch(0.85 0 0); // bright icon color
+    --color-text-dim: oklch(0.70 0 0); // dimmed text
+    --color-text-vivid: oklch(0.95 0 0); // very bright text
+    --color-text-almost-white: oklch(0.98 0 0); // almost white text
+    --color-bg-darker-alt: oklch(0.20 0 0); // slightly lighter than dark-350
+    --color-bg-modal: oklch(0.15 0 0); // modal/dropdown backgrounds
+
+    // Gradient colors
+    --color-gradient-start: oklch(0.22 0 0); // header card gradient start
+    --color-gradient-mid: oklch(0.23 0 0); // button hover gradient
+    --color-gradient-end: oklch(0.24 0 0); // header card gradient end
+    --color-gradient-blue-tint: oklch(0.19 0.02 264); // button active state blue tint
+
+    // Z-index scale (matches tailwind.config.js)
+    // dropdown: 100, dropdown-high: 200, tooltip: 2000, modal: 1000, modal-mask: 25000, max: 9999
+    --z-dropdown: 100;
+    --z-dropdown-high: 200;
+    --z-tooltip: 2000;
+    --z-modal: 1000;
+    --z-modal-mask: 25000;
+    --z-max: 9999;
+}

package/src/assets/css/components/accessibility.scss

@@ -0,0 +1,37 @@
+/* ==========================================================================
+   ACCESSIBILITY - Focus Visible & Keyboard Navigation
+   ========================================================================== */
+
+/* Global focus-visible styles for keyboard navigation */
+*:focus-visible {
+    @apply outline outline-2 outline-primary outline-offset-2;
+}
+
+/* Remove default focus outline for mouse users */
+*:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* Input-like elements need inline outline (offset-0) */
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+.dropdown:focus-visible {
+    @apply border-primary outline outline-1 outline-primary;
+    outline-offset: 0;
+}
+
+/* Modal content focus trap */
+[role="dialog"]:focus {
+    outline: none;
+}
+
+/* Skip to main content link (for screen readers) */
+.skip-to-main {
+    @apply absolute -top-full left-0 bg-primary text-white px-4 py-2 rounded z-max;
+    transition: top 0.2s;
+
+    &:focus {
+        @apply top-0;
+    }
+}

package/src/assets/css/components/buttons.scss

@@ -2,12 +2,11 @@
    BUTTON COMPONENTS - Shadcn-Inspired Design
    ========================================================================== */
 
-/* Primary Button - Solid green with clean shadow */
+@use "../base/mixins" as *;
+
 .btn-primary {
-    @apply font-medium transition-all duration-150;
-    @apply bg-accent-green text-white;
-    @apply px-4 py-2 rounded-md;
-    @apply shadow-sm border-2 border-accent-green;
+    @apply font-medium bg-accent-green text-white px-4 py-2 rounded-md shadow-sm border-2 border-accent-green;
+    @include transition-standard;
 
     &:hover {
         @apply bg-green-400 border-green-400;
@@ -15,66 +14,14 @@
 
     &:active {
         @apply bg-green-500 border-accent-green;
-        @apply outline outline-1 outline-accent-green outline-offset-0;
+        @include focus-ring-accent;
     }
 }
 
-/* Secondary Button - Transparent with green border, fills on hover */
-.btn-secondary {
-    @apply font-medium transition-all duration-150;
-    @apply bg-transparent text-accent-green;
-    @apply px-4 py-2 rounded-md;
-    @apply border-2 border-accent-green;
 
-    &:hover {
-        @apply bg-accent-green text-white border-accent-green;
-    }
-
-    &:active {
-        @apply bg-green-400 border-accent-green;
-        @apply outline outline-1 outline-accent-green outline-offset-0;
-    }
-}
-
-/* Ghost Button - No border, muted text, subtle hover */
-.btn-ghost {
-    @apply font-medium transition-all duration-150;
-    @apply bg-transparent text-light-400;
-    @apply px-4 py-2 rounded-md;
-    @apply border-none;
-
-    &:hover {
-        @apply bg-dark-450 text-light-300;
-    }
-
-    &:active {
-        @apply bg-dark-350;
-    }
-}
-
-/* Destructive Button - Red with clean shadow */
-.btn-danger,
-.btn-destructive {
-    @apply font-medium transition-all duration-150;
-    @apply bg-error-500 text-white;
-    @apply px-4 py-2 rounded-md;
-    @apply shadow-sm border-none;
-
-    &:hover {
-        @apply bg-error-400;
-    }
-
-    &:active {
-        @apply bg-red-500;
-    }
-}
-
-/* Icon Button - Clean hover states */
 .btn-icon {
-    @apply flex items-center justify-center transition-all duration-150;
-    @apply p-1 rounded-md;
-    @apply bg-transparent text-light-400;
-    @apply border-none;
+    @apply flex items-center justify-center p-1 rounded-md bg-transparent text-light-400 border-none;
+    @include transition-standard;
 
     &:hover {
         @apply bg-dark-450 text-white;
@@ -85,13 +32,9 @@
     }
 }
 
-/* Action Button - Similar to secondary but with specific sizing */
 .btn-action {
-    @apply font-medium flex items-center justify-center gap-x-2 transition-all duration-150;
-    @apply bg-transparent text-accent-green;
-    @apply px-4 h-10 rounded-md;
-    @apply border-2 border-accent-green;
-    @apply text-xs;
+    @apply font-medium flex items-center justify-center gap-x-2 bg-transparent text-accent-green px-4 h-10 rounded-md border-2 border-accent-green text-xs;
+    @include transition-standard;
 
     &:hover {
         @apply bg-accent-green text-white border-accent-green;
@@ -99,20 +42,19 @@
 
     &:active {
         @apply bg-green-400 border-accent-green;
-        @apply outline outline-1 outline-accent-green outline-offset-0;
+        @include focus-ring-accent;
     }
 }
 
-/* Default Button - Base styling */
 .button-default {
-    @apply font-medium transition-all duration-150 flex items-center justify-center gap-x-2;
-    @apply h-14 rounded-lg text-white border-2 border-dark-600 text-sm px-6 w-48;
+    @apply font-medium flex items-center justify-center gap-x-2 h-14 rounded-lg text-white border-2 border-dark-550 text-sm px-6 w-48;
+    @include transition-standard;
 
     svg {
         @apply w-4 h-4 flex-shrink-0;
     }
 
-    @media (max-width: 768px) {
+    @screen md {
         @apply h-12 text-sm font-medium w-full max-w-full;
 
         svg {
@@ -120,8 +62,8 @@
         }
     }
 
-    @media (max-width: 480px) {
-        @apply h-[3.25rem] text-[0.9375rem];
+    @screen mobile-portrait {
+        @apply h-13;
 
         svg {
             @apply w-4 h-4;
@@ -134,7 +76,40 @@
 
     &:active, &:focus {
         @apply border-accent-green;
-        @apply outline outline-1 outline-accent-green outline-offset-0;
+        @include focus-ring-accent;
+    }
+}
+
+.btn-focus-ring {
+    &:active {
+        @apply border-accent-green;
+        @include focus-ring-accent;
+    }
+
+    &:focus {
+        @apply border-accent-green;
+        @include focus-ring-accent;
+    }
+}
+
+.login-btn {
+    @apply flex items-center justify-center gap-2 h-12 rounded-lg font-semibold tracking-wider uppercase bg-accent-green border-2 border-accent-green text-white;
+    @include transition-standard;
+    font-size: theme('fontSize.base-');
+
+    &:hover:enabled {
+        @apply bg-green-500 border-green-500;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgb(from theme('colors.accent.green') r g b / 0.3);
+    }
+
+    &:active:enabled {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px rgb(from theme('colors.accent.green') r g b / 0.2);
+    }
+
+    &:disabled {
+        @apply opacity-70 cursor-not-allowed;
     }
 }
 
@@ -162,3 +137,15 @@
         border-radius: 8px;
     }
 }
+
+/* ==========================================================================
+   MODAL/ACTION BUTTON UTILITIES
+   ========================================================================== */
+
+.btn-modal {
+    @apply h-10 rounded-md text-xs flex items-center justify-center font-medium px-4 hover:border-dark-700 btn-focus-ring;
+    @include transition-standard;
+    @include dark-button-base;
+    @include scale-hover;
+}
+