@necrolab/dashboard 0.5.14 → 0.5.16

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

@@ -8,6 +8,6 @@
 }
 
 .component-modal {
-    background-color: oklch(0.15 0 0);
-    border: 1px solid oklch(0.26 0 0);
+    background-color: var(--color-bg-modal);
+    border: 1px solid var(--color-border);
 }

package/src/assets/css/components/search-groups.scss

@@ -5,43 +5,41 @@
    ========================================================================== */
 
 .unified-search-group {
-    border: 2px solid oklch(0.2809 0 0);
+    border: 2px solid var(--color-border);
     border-radius: 0.5rem;
     overflow: hidden;
-    background: oklch(0.2603 0 0);
+    background: var(--color-bg-input);
     transition: all 0.15s ease;
     display: flex;
 
     .tag-toggle,
     .dropdown,
-    input {
-        border: none !important;
-        border-width: 0 !important;
+    input,
+    > button {
+        border: 0 !important;
         border-radius: 0 !important;
         height: 40px !important;
         background: transparent !important;
         box-shadow: none !important;
+        outline: 0 !important;
+    }
+
+    .tag-toggle,
+    .dropdown,
+    input {
         min-width: fit-content !important;
     }
 
     .tag-toggle {
         padding: 0;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
+        border: 0 !important;
     }
 
     .tag-toggle button {
         font-size: 0.875rem;
         padding: 0.5rem 0.75rem;
         min-width: fit-content;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
+        border: 0 !important;
     }
 
     .dropdown {
@@ -49,6 +47,17 @@
         min-width: 120px !important;
     }
 
+    .dropdown:not(.transparent):focus-within,
+    .dropdown:not(.transparent).opened,
+    .dropdown:not(.transparent):hover,
+    .dropdown:focus-within,
+    .dropdown.opened,
+    .dropdown:hover {
+        border: 0 !important;
+        outline: 0 !important;
+        box-shadow: none !important;
+    }
+
     .dropdown-display {
         padding: 0 0.75rem;
         font-size: 0.875rem;
@@ -60,7 +69,7 @@
         flex: 1;
 
         &::placeholder {
-            color: oklch(0.50 0 0);
+            @apply text-light-600;
         }
 
         &:focus {
@@ -69,12 +78,12 @@
     }
 
     &:hover {
-        border-color: oklch(0.30 0 0);
+        @apply border-dark-650;
     }
 
     &:focus-within {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
+        border-color: var(--color-primary);
+        outline: 1px solid var(--color-primary);
         outline-offset: 0;
     }
 }

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

@@ -3,17 +3,15 @@
    ========================================================================== */
 
 .table-row-even {
-    background-color: oklch(0.1822 0 0);
+    @apply bg-dark-300;
 }
 
 .table-row-odd {
-    background-color: oklch(0.2046 0 0);
+    @apply bg-dark-400;
 }
 
 .table-component {
-    @apply w-full rounded-lg;
-    border: 1px solid oklch(0.26 0 0);
-    overflow: visible !important;
-    background-color: oklch(0.2046 0 0);
-    box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
+    @apply w-full rounded-lg bg-dark-500;
+    border: 1px solid var(--color-border);
+    @apply shadow-sm;
 }

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

@@ -4,9 +4,9 @@
 
 .Toastify__toast-theme--colored.Toastify__toast--default,
 .Toastify__toast-theme--light {
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    color: oklch(0.90 0 0);
+    background: var(--color-bg-card);
+    @apply border-2 border-dark-550;
+    color: var(--color-text-primary);
 }
 
 .Toastify__toast-icon {
@@ -24,11 +24,11 @@
     margin-top: 1px;
     padding-left: 0.1rem;
     @apply flex border-solid w-6 h-6 items-center justify-center rounded-full;
-    border: 2px solid oklch(0.90 0 0);
+    border: 2px solid var(--color-text-primary);
 }
 
 .Toastify__close-button.Toastify__close-button--light svg {
-    color: oklch(0.90 0 0);
+    color: var(--color-text-primary);
 }
 
 .Toastify__close-button.Toastify__close-button--light svg path {
@@ -92,7 +92,7 @@
 }
 
 .Toastify__toast--error svg {
-    color: oklch(0.68 0.18 25);
+    @apply text-red-300;
 }
 
 .Toastify__toast--error svg path {
@@ -100,7 +100,7 @@
 }
 
 .Toastify__toast--success .Toastify__progress-bar {
-    background: oklch(0.72 0.15 145);
+    background: var(--color-primary);
 }
 
 .Toastify__progress-bar {

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

@@ -0,0 +1,220 @@
+/* ==========================================================================
+   UTILITY CLASSES - Complex reusable patterns
+   Extracted from inline classes to improve maintainability
+   ========================================================================== */
+
+@use "../base/mixins" as *;
+
+/* Minimal form input - transparent background for use within labeled containers */
+.form-input-minimal {
+    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1;
+    @apply transition-colors duration-150;
+
+    &:focus {
+        @apply outline-none border-0 shadow-none;
+    }
+
+    &::placeholder {
+        @apply text-light-500;
+    }
+}
+
+/* Form field with label - LoginForm, QuickSettings pattern */
+.form-field-labeled {
+    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-11 transition-[border-color] duration-150;
+
+    &:hover {
+        @apply border-dark-650;
+    }
+
+    &:focus-within {
+        @apply border-accent-green !important;
+        @include focus-ring-accent;
+    }
+}
+
+/* Smaller variant (h-10) for QuickSettings */
+.form-field-labeled-sm {
+    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-10 transition-colors duration-150;
+
+    &:hover {
+        @apply border-dark-650;
+    }
+
+    &:focus-within {
+        @apply border-accent-green !important;
+        @include focus-ring-accent;
+    }
+
+    /* Dropdown opened state */
+    &:has(.dropdown.opened) {
+        @apply border-accent-green !important;
+        @include focus-ring-accent;
+    }
+}
+
+/* Action button with responsive sizing */
+.btn-action-responsive {
+    @apply h-10 rounded-md text-xs flex items-center justify-center font-medium px-4;
+    @apply transition-all duration-150 btn-focus-ring;
+    @include dark-button-base;
+    @include scale-hover;
+}
+
+.btn-action-responsive:not(.bg-green-400):not(.bg-red-400):not(.bg-blue-400):hover {
+    @apply border-dark-700;
+}
+
+/* Console scroll button */
+.console-scroll-btn {
+    @apply flex h-10 w-10 items-center justify-center rounded border-2 border-dark-550 bg-dark-400 shadow-sm transition-all duration-150 btn-focus-ring;
+
+    &:hover {
+        @apply border-accent-green;
+        @include focus-ring-accent;
+    }
+}
+
+/* Console main container with responsive heights */
+.console-main {
+    @apply relative overflow-x-auto overflow-y-auto rounded border-2 border-dark-550 bg-dark-400 p-2 font-mono text-white;
+    height: calc(100vh - 18rem);
+    scroll-padding: 0.5rem;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    min-height: 12rem !important;
+    touch-action: pan-y pan-up pan-down;
+
+    @screen md {
+        height: calc(100vh - 16rem);
+    }
+
+    @screen lg {
+        height: calc(100vh - 14rem);
+        padding: 1.25rem;
+    }
+
+    @screen mobile-portrait {
+        height: calc(100vh - 19.5rem);
+        max-height: 50vh;
+        overflow: auto;
+        padding: 0.25rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
+    @media (orientation: landscape) and (max-width: 1023px) {
+        height: calc(100vh - 10.5rem);
+    }
+
+    @media (max-width: 767px) and (orientation: landscape) {
+        height: auto;
+        max-height: 60vh;
+    }
+}
+
+/* FilterBuilder action button */
+.filter-action-btn {
+    @apply flex h-8 items-center justify-center gap-1 rounded-md border border-dark-650 bg-dark-400 px-3 text-xs font-medium text-white transition-all duration-150 hover:border-dark-700 btn-focus-ring;
+    @include scale-hover;
+
+    svg {
+        @apply mr-1;
+    }
+}
+
+/* Checkbox base - atomic/Checkbox.vue pattern */
+.checkbox-base {
+    @apply relative flex items-center justify-center cursor-pointer shrink-0 rounded-full border-2 bg-transparent transition-all duration-200 ease-out;
+    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-green focus-visible:outline-offset-2;
+
+    @media (hover: hover) {
+        &:hover {
+            @apply scale-105;
+        }
+    }
+}
+
+/* Task status badge */
+.task-status-badge {
+    @apply mx-auto flex w-fit items-center justify-center rounded-lg border-2 border-dark-750 bg-dark-400 px-3 py-1.5 gap-1.5 max-w-full pointer-events-none;
+
+    @screen md {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+        gap: 0.25rem;
+    }
+
+    @screen sm {
+        border-width: 2px;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+        padding-top: 0.125rem;
+        padding-bottom: 0.125rem;
+    }
+}
+
+/* Stats/Queue badge pattern */
+.stat-badge {
+    @apply flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm bg-dark-400 border-2 border-dark-550;
+}
+
+/* Mobile control buttons */
+.btn-control-mobile {
+    @apply flex h-10 w-20 items-center justify-center gap-x-1 rounded-md border border-dark-650 bg-dark-400 px-3 text-xs+ font-medium text-white transition-all duration-150 hover:border-dark-700 btn-focus-ring;
+}
+
+/* Desktop control button variants */
+.btn-control-success {
+    @apply bg-green-400 disabled:opacity-70 border-none min-w-20 max-w-30 flex-grow xl:flex-initial flex text-white text-xs font-medium justify-center items-center rounded-md h-10 transition-all duration-200;
+    @include scale-hover-safe;
+}
+
+.btn-control-danger {
+    @apply bg-red-400 disabled:opacity-70 border-none min-w-20 max-w-30 flex-grow xl:flex-initial flex text-white text-xs font-medium justify-center items-center rounded-md h-10 transition-all duration-200;
+    @include scale-hover-safe;
+}
+
+/* Stat header with icon - Stats component badges */
+.stat-header {
+    @apply flex items-center gap-1 whitespace-nowrap text-sm font-semibold text-light-300;
+}
+
+/* Empty state icon - EmptyState component, TaskView, FilterBuilder, Console */
+.empty-state-icon {
+    @apply mb-3 h-12 w-12 text-dark-400 opacity-50;
+}
+
+/* Stat value display - Stats component badge values */
+.stat-value {
+    @apply flex items-center justify-center whitespace-nowrap text-xs font-bold text-light-300;
+}
+
+/* Grid cell center - Profile/Account editor icon cells */
+.grid-cell-center {
+    @apply col-span-1 flex items-center justify-center;
+}
+
+/* Transparent input - Console and Tasks search inputs */
+.transparent-input {
+    @apply h-full w-full bg-transparent text-sm text-white outline-none;
+}
+
+/* High-frequency Tailwind pattern utilities */
+.flex-center {
+    @apply flex items-center justify-center;
+}
+
+.text-secondary {
+    @apply text-xs text-light-500;
+}
+
+.text-tertiary {
+    @apply text-xs text-light-300;
+}
+
+.icon-md {
+    @apply h-4 w-4;
+}

package/src/assets/css/main.scss

@@ -3,73 +3,56 @@
    Modular SCSS architecture with @use imports
    ========================================================================== */
 
-/* Module imports */
 @use "base/reset";
 @use "base/scroll";
 @use "base/typography";
+@use "base/variables";
+@use "base/mixins" as *;
 @use "components/buttons";
 @use "components/forms";
 @use "components/toasts";
 @use "components/modals";
 @use "components/tables";
 @use "components/search-groups";
+@use "components/headers";
+@use "components/utilities";
+@use "components/accessibility";
 
 /* ==========================================================================
    BODY LAYOUT & BACKGROUND
    ========================================================================== */
 
+html {
+    @apply bg-dark-300;
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
 body {
-    background-color: oklch(0.1822 0 0);
+    @apply bg-dark-300;
     position: relative;
     min-height: 100vh;
     min-height: 100dvh;
-
-    &::before {
-        content: "";
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-image: url("@/assets/img/background.svg");
-        background-position: center center;
-        background-size: cover;
-        background-repeat: no-repeat;
-        -webkit-background-size: cover;
-        z-index: -1;
-        pointer-events: none;
-        will-change: transform;
-        -webkit-transform: translateZ(0);
-        transform: translateZ(0);
-
-        // Extend into safe areas only in PWA mode
-        @media (display-mode: standalone) {
-            top: -50px;
-            left: -50px;
-            right: -50px;
-            bottom: -50px;
-        }
-    }
 }
 
 /* Global icon color consistency */
 svg {
-    color: oklch(0.9 0 0) !important;
+    color: var(--color-text-primary) !important;
 }
 
-/* For stroke icons (Eye, etc) - stroke on svg element */
+/* For stroke-based icons */
 svg[stroke] path,
 svg[stroke] circle,
 svg[stroke] line {
-    stroke: oklch(0.9 0 0) !important;
+    stroke: var(--color-text-primary) !important;
 }
 
-/* For filled icons with explicit fill */
+/* For fill-based icons */
 svg path[fill]:not([fill="none"]),
 svg circle[fill]:not([fill="none"]),
 svg rect[fill]:not([fill="none"]),
 svg polygon[fill]:not([fill="none"]) {
-    fill: oklch(0.9 0 0) !important;
+    fill: var(--color-text-primary) !important;
 }
 
 /* For filled icons without explicit fill attribute */
@@ -77,46 +60,42 @@ svg:not([stroke]):not([fill="none"]) path:not([fill]),
 svg:not([stroke]):not([fill="none"]) circle:not([fill]),
 svg:not([stroke]):not([fill="none"]) rect:not([fill]),
 svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
-    fill: oklch(0.9 0 0) !important;
+    fill: var(--color-text-primary) !important;
 }
 
-/* Badge icon color exceptions - override ALL global white rules */
 .enabled-badge svg,
 .enabled-badge-large svg {
-    color: oklch(0.72 0.15 145) !important;
-    fill: oklch(0.72 0.15 145) !important;
+    color: var(--color-primary) !important;
+    fill: var(--color-primary) !important;
 }
 
 .disabled-badge svg,
 .disabled-badge-large svg {
-    color: oklch(0.60 0.20 25) !important;
-    fill: oklch(0.60 0.20 25) !important;
+    color: var(--color-disabled) !important;
+    fill: var(--color-disabled) !important;
 }
 
 .enabled-badge svg *,
 .enabled-badge-large svg * {
-    fill: oklch(0.72 0.15 145) !important;
-    stroke: oklch(0.72 0.15 145) !important;
+    fill: var(--color-primary) !important;
+    stroke: var(--color-primary) !important;
 }
 
 .disabled-badge svg *,
 .disabled-badge-large svg * {
-    fill: oklch(0.60 0.20 25) !important;
-    stroke: oklch(0.60 0.20 25) !important;
+    fill: var(--color-disabled) !important;
+    stroke: var(--color-disabled) !important;
 }
 
 /* ==========================================================================
    PWA MODE FIXES
    ========================================================================== */
 
-// Add padding to all page headers in PWA mode to prevent hiding under navbar
 @media (display-mode: standalone) {
-    // Accounts page header
     .flex.items-center.justify-between.pt-5.pb-2 {
         padding-top: 3.5rem !important;
     }
 
-    // Console page header
     h4.mb-2.flex.items-center.gap-2.pt-5 {
         padding-top: 3.5rem !important;
     }
@@ -128,6 +107,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 .smooth-hover {
     @apply transition-all duration-200;
+    @include scale-hover;
 }
 
 .status-indicator {
@@ -140,17 +120,16 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     @apply ml-auto flex items-center gap-x-2 lg:hidden;
 
     button {
-        @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150;
-        background-color: oklch(0.2046 0 0);
-        border: 2px solid oklch(0.2809 0 0);
-        color: oklch(0.82 0 0);
+        @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150 bg-dark-400;
+        border: 2px solid var(--color-border-light);
+        color: var(--color-text-secondary);
 
         &:hover,
         &:active {
-            border-color: oklch(0.72 0.15 145);
-            outline: 1px solid oklch(0.72 0.15 145);
+            border-color: var(--color-primary);
+            outline: 1px solid var(--color-primary);
             outline-offset: 0;
-            color: oklch(0.9 0 0);
+            color: var(--color-text-primary);
         }
     }
 }
@@ -159,26 +138,39 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
 }
 
+/* Page button focus states - used in view files */
+button.bg-dark-400,
+button.bg-green-400,
+button.bg-red-400 {
+    &:active,
+    &:focus {
+        @apply outline outline-1 outline-accent-green;
+        outline-offset: 0;
+        @apply border-accent-green !important;
+    }
+}
+
 /* ==========================================================================
    LABEL & ICON STYLING
    ========================================================================== */
 
 .label-override {
     @apply mb-2 flex items-center text-xs;
-    color: oklch(0.65 0 0);
+    color: var(--color-text-muted);
+    margin-top: 1rem;
 
     svg {
         @apply ml-2;
-        color: oklch(0.65 0 0) !important;
+        color: var(--color-text-muted) !important;
         width: 16px;
         height: 16px;
-        fill: oklch(0.65 0 0) !important;
+        fill: var(--color-text-muted) !important;
     }
 }
 
 .task-switches {
     h4 {
-        color: oklch(0.9 0 0);
+        color: var(--color-text-primary);
         font-size: 0.8125rem;
         font-weight: 500;
         @apply mx-auto mb-2 flex items-center gap-x-2 text-center;
@@ -191,7 +183,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     svg {
         width: 15px !important;
         height: 15px !important;
-        color: oklch(0.9 0 0) !important;
+        color: var(--color-text-primary) !important;
         margin-left: 0.25rem !important;
     }
 }
@@ -204,33 +196,38 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     max-height: calc(100vh - 12rem);
     min-height: 8rem;
     overflow: hidden;
-}
 
-@screen xl {
-    .max-h-big {
+    @screen xl {
         max-height: calc(100vh - 11rem);
     }
 }
 
-@screen h-sm {
-    .max-h-big {
-        max-height: calc(100vh - 12rem);
-        min-height: 8rem;
-    }
-}
-
 /* ==========================================================================
    TRANSITIONS & ANIMATIONS
    ========================================================================== */
 
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.15s ease;
+.dropdown-fade-enter-active {
+    @apply transition-all duration-300;
+}
+
+.dropdown-fade-leave-active {
+    @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from {
+    @apply opacity-0;
+    transform: translateY(-8px) scale(0.95);
+}
+
+.dropdown-fade-leave-to {
+    @apply opacity-0;
+    transform: translateY(-4px) scale(0.98);
 }
 
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
+.dropdown-fade-enter-to,
+.dropdown-fade-leave-from {
+    @apply opacity-100;
+    transform: translateY(0) scale(1);
 }
 
 .will-change-auto {