@necrolab/dashboard 0.5.14 → 0.5.16

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,7 +2,8 @@
    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;
@@ -15,11 +16,10 @@
 
     &: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;
@@ -32,11 +32,10 @@
 
     &:active {
         @apply bg-green-400 border-accent-green;
-        @apply outline outline-1 outline-accent-green outline-offset-0;
+        @include focus-ring-accent;
     }
 }
 
-/* Ghost Button - No border, muted text, subtle hover */
 .btn-ghost {
     @apply font-medium transition-all duration-150;
     @apply bg-transparent text-light-400;
@@ -52,7 +51,6 @@
     }
 }
 
-/* Destructive Button - Red with clean shadow */
 .btn-danger,
 .btn-destructive {
     @apply font-medium transition-all duration-150;
@@ -69,7 +67,6 @@
     }
 }
 
-/* Icon Button - Clean hover states */
 .btn-icon {
     @apply flex items-center justify-center transition-all duration-150;
     @apply p-1 rounded-md;
@@ -85,7 +82,6 @@
     }
 }
 
-/* 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;
@@ -99,20 +95,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 h-14 rounded-lg text-white border-2 border-dark-550 text-sm px-6 w-48;
 
     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 +115,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 +129,42 @@
 
     &: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;
+    @apply h-12 rounded-lg font-semibold tracking-wider uppercase;
+    @apply bg-accent-green border-2 border-accent-green text-white;
+    @apply transition-all duration-150;
+    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 +192,16 @@
         border-radius: 8px;
     }
 }
+
+/* ==========================================================================
+   MODAL/ACTION BUTTON UTILITIES
+   ========================================================================== */
+
+.btn-modal {
+    @apply h-10 rounded-md text-xs flex items-center justify-center;
+    @apply font-medium px-4;
+    @apply hover:border-dark-700 transition-all duration-150 btn-focus-ring;
+    @include dark-button-base;
+    @include scale-hover;
+}
+

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

@@ -4,33 +4,32 @@
 
 .input-default {
     @apply relative box-border flex h-10 items-center border-2 bg-clip-padding px-3 py-2;
-    background: oklch(0.19 0 0);
-    border-color: oklch(0.26 0 0);
+    background: var(--color-bg-input);
+    border-color: var(--color-border);
     border-radius: 0.5rem;
     transition: border-color 0.15s ease;
 
     &:hover {
-        border-color: oklch(0.3 0 0);
+        @apply border-dark-650;
     }
 
     &:focus-within {
-        border-color: oklch(0.72 0.15 145);
+        border-color: var(--color-primary);
     }
 
     input {
         @apply h-full w-full text-sm;
         background: transparent;
-        color: oklch(0.95 0 0);
+        color: var(--color-text-vivid);
 
         &:focus {
             outline: none;
         }
 
         &::placeholder {
-            color: oklch(0.5 0 0);
+            color: var(--color-text-muted);
         }
 
-        // Hide default number input spinners - use custom .input-incrementer instead
         &[type="number"]::-webkit-inner-spin-button,
         &[type="number"]::-webkit-outer-spin-button {
             -webkit-appearance: none;
@@ -48,21 +47,21 @@
 
         button {
             @apply w-6 h-4 flex items-center justify-center text-white transition-all duration-200 rounded-sm;
-            background: linear-gradient(135deg, oklch(0.19 0 0) 0%, oklch(0.20 0 0) 100%);
-            border: 1px solid oklch(0.22 0 0);
-            box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
+            background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-bg-darker-alt) 100%);
+            border: 1px solid var(--color-gradient-start);
+            @apply shadow-button;
 
             &:hover {
-                background: linear-gradient(135deg, oklch(0.20 0 0) 0%, oklch(0.23 0 0) 100%);
-                border-color: oklch(0.28 0 0);
-                box-shadow: 0 2px 4px oklch(0 0 0 / 0.3);
+                background: linear-gradient(135deg, var(--color-bg-darker-alt) 0%, var(--color-gradient-mid) 100%);
+                border-color: var(--color-border-light);
+                @apply shadow-md;
                 transform: translateY(-0.5px);
             }
 
             &:active {
-                background: linear-gradient(135deg, oklch(0.15 0 0) 0%, oklch(0.19 0.02 264) 100%);
-                border-color: oklch(0.26 0 0);
-                box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.3);
+                background: linear-gradient(135deg, var(--color-bg-modal) 0%, var(--color-gradient-blue-tint) 100%);
+                border-color: var(--color-border);
+                @apply shadow-input-inset;
                 transform: translateY(0);
             }
 
@@ -87,27 +86,27 @@
    ========================================================================== */
 
 .ant-select-dropdown {
-    z-index: 10000 !important;
+    z-index: var(--z-modal) !important;
     position: relative;
-    background: oklch(0.15 0 0) !important; /* Card backgrounds */
+    background: var(--color-bg-modal) !important;
     border-radius: 0.5rem !important;
 }
 
 .ant-select {
     @apply relative box-border flex h-10 items-center border-2 bg-clip-padding px-1 py-1 !important;
-    background: oklch(0.19 0 0); /* Input background */
-    border-color: oklch(0.26 0 0); /* Default border */
-    border-radius: 0.375rem; /* Consistent with buttons */
+    background: var(--color-bg-input);
+    border-color: var(--color-border);
+    border-radius: 0.375rem;
     height: fit-content;
     transition: border-color 0.15s ease;
 
     &:hover {
-        border-color: oklch(0.3 0 0); /* Hover border */
+        @apply border-dark-650;
     }
 
     &.ant-select-focused {
-        border-color: oklch(0.72 0.15 145) !important; /* Focus border - cyan */
-        outline: 1px solid oklch(0.72 0.15 145) !important; /* Cyan outline, no offset */
+        border-color: var(--color-primary) !important;
+        outline: 1px solid var(--color-primary) !important;
         outline-offset: 0 !important;
     }
 
@@ -125,7 +124,7 @@
         &:before {
             content: "";
             position: absolute;
-            background: oklch(0.82 0 0);
+            background: var(--color-text-secondary);
             height: 0.25rem;
             width: 0.25rem;
             right: 0.25rem;
@@ -136,13 +135,13 @@
 
 .ant-select-multiple .ant-select-selection-item {
     @apply items-center gap-x-4 !important;
-    background: oklch(0.15 0 0); /* Card backgrounds */
+    background: var(--color-bg-modal);
     padding-inline-end: 15px;
     padding-inline-start: 15px;
     border-radius: 10px;
     height: 40px;
     border: 0;
-    color: oklch(0.98 0 0); /* White text */
+    color: var(--color-text-almost-white);
 
     &-remove > .anticon {
         vertical-align: 0.05rem;
@@ -150,7 +149,7 @@
 }
 
 .ant-select-selection-item-remove > .anticon svg {
-    color: oklch(0.98 0 0); /* White */
+    color: var(--color-text-almost-white);
 
     path {
         fill: currentColor;
@@ -160,10 +159,10 @@
 .ant-select-item-option {
     &-selected:not(.ant-select-item-option-disabled) {
         @apply text-white !important;
-        background: oklch(0.72 0.15 145 / 0.15) !important; /* Cyan accent with transparency */
+        background: oklch(from var(--color-primary) l c h / 0.15) !important;
 
         .ant-select-item-option-state {
-            color: oklch(0.72 0.15 145) !important; /* Cyan accent for checkmark */
+            color: var(--color-primary) !important;
 
             svg {
                 margin-top: -1.5px;
@@ -172,11 +171,11 @@
     }
 
     &-active:not(.ant-select-item-option-disabled) {
-        background: oklch(0.19 0 0); /* Input background on hover */
+        background: var(--color-bg-input);
     }
 
     &-content {
-        color: oklch(0.98 0 0) !important; /* White text */
+        color: var(--color-text-almost-white) !important;
     }
 }
 

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

@@ -0,0 +1,119 @@
+/* ==========================================================================
+   PAGE HEADERS
+   Ultra-clean, consistent styling for all page headers
+   ========================================================================== */
+
+.page-header {
+    @apply flex items-center justify-between;
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+
+    .page-header-card {
+        @apply flex items-center gap-2.5 rounded-lg;
+        padding: 0.375rem 0.75rem;
+        background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
+        border: 1px solid var(--color-border-light);
+
+        svg, img {
+            width: 17px;
+            height: 17px;
+            color: var(--color-text-bright);
+            flex-shrink: 0;
+        }
+
+        .icon-button {
+            @apply flex items-center justify-center rounded;
+            cursor: pointer;
+            margin: -0.125rem 0;
+            padding: 0.125rem;
+            transition: background 0.2s ease;
+
+            svg, img {
+                width: 17px;
+                height: 17px;
+                color: var(--color-text-bright);
+                transition: transform 0.4s ease, color 0.2s ease;
+            }
+
+            &:hover {
+                background: var(--color-border);
+
+                svg, img {
+                    color: var(--color-text-primary);
+                    transform: rotate(90deg);
+                }
+            }
+
+            &:active {
+                background: var(--color-bg-darker-alt);
+
+                svg, img {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        h4 {
+            @apply font-semibold;
+            font-size: 1rem;
+            line-height: 1.2;
+            color: var(--color-text-primary);
+            letter-spacing: -0.01em;
+        }
+
+        .page-header-count {
+            @apply inline-flex items-center justify-center rounded px-1.5 py-0.5 ml-1.5;
+            font-size: 0.6875rem;
+            font-weight: 600;
+            min-width: 20px;
+            background: var(--color-bg-darker-alt);
+            border: 1px solid var(--color-border);
+            color: var(--color-text-dim);
+            letter-spacing: 0.01em;
+        }
+    }
+
+    @screen sm {
+        padding-top: 1rem;
+
+        .page-header-card {
+            gap: 2.5;
+            padding: 0.5rem 0.875rem;
+
+            svg, img {
+                width: 18px;
+                height: 18px;
+            }
+
+            h4 {
+                font-size: 1rem;
+            }
+
+            .page-header-count {
+                font-size: 0.6875rem;
+                padding: 0.125rem 0.375rem;
+                min-width: 20px;
+                margin-left: 0.375rem;
+            }
+        }
+    }
+
+    @media (min-width: 641px) and (max-width: 1024px) {
+        .page-header-card {
+            svg, img {
+                width: 19px;
+                height: 19px;
+            }
+
+            h4 {
+                font-size: 1.0625rem;
+            }
+        }
+    }
+}
+
+@media (display-mode: standalone) {
+    .page-header {
+        padding-top: 3.5rem !important;
+    }
+}