@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -0,0 +1,295 @@
+/* ==========================================================================
+   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 - 20rem);
+    max-height: calc(100vh - 20rem);
+    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 - 18rem);
+        max-height: calc(100vh - 18rem);
+    }
+
+    @screen lg {
+        height: calc(100vh - 16rem);
+        max-height: calc(100vh - 16rem);
+        padding: 1.25rem;
+    }
+
+    @screen mobile-portrait {
+        height: calc(100vh - 22rem);
+        max-height: calc(100vh - 22rem);
+        overflow: auto;
+        padding: 0.25rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
+    @media (orientation: landscape) and (max-width: 1023px) {
+        height: calc(100vh - 12rem);
+        max-height: calc(100vh - 12rem);
+    }
+
+    @media (max-width: 767px) and (orientation: landscape) {
+        height: auto;
+        max-height: 65vh;
+    }
+}
+
+/* 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;
+}
+
+.icon-md {
+    @apply h-4 w-4;
+}
+
+/* Flex with gap variants - consolidates 51+ repeated patterns */
+.flex-gap-1 {
+    @apply flex gap-1;
+}
+
+.flex-gap-2 {
+    @apply flex gap-2;
+}
+
+.flex-gap-3 {
+    @apply flex gap-3;
+}
+
+/* Standard transition - used throughout the app */
+.transition-standard {
+    @apply transition-all duration-150;
+}
+
+/* Badge pattern for version/stat chips - QuickSettings pattern */
+.badge-version {
+    @apply flex items-center gap-x-1.5 px-2.5 py-1.5 rounded-lg border bg-dark-400 border-dark-550;
+}
+
+/* Icon button container - 8x8 flex centered button pattern */
+.icon-button {
+    @apply flex h-8 w-8 flex-shrink-0 items-center justify-center rounded;
+}
+
+/* Icon size utilities for common patterns */
+.icon-sm {
+    @apply h-3 w-3;
+}
+
+.icon-lg {
+    @apply h-5 w-5;
+}
+
+.icon-xl {
+    @apply h-6 w-6;
+}
+
+/* Square size utilities */
+.size-8 {
+    @apply h-8 w-8;
+}
+
+.size-10 {
+    @apply h-10 w-10;
+}
+
+/* Common button pattern - dark with border */
+.btn-dark-bordered {
+    @apply rounded-md border border-dark-650 bg-dark-400;
+}
+
+/* Flex layout utilities */
+.flex-between {
+    @apply flex items-center justify-between;
+}
+
+/* Text utilities */
+.text-button {
+    @apply text-white text-xs font-medium;
+}
+
+/* Padding combinations */
+.pad-3-2 {
+    @apply px-3 py-2;
+}
+
+/* Square size utilities */
+.square-8 {
+    @apply h-8 w-8;
+}
+
+/* Border + rounded combinations */
+.dark-border-rounded {
+    @apply rounded border border-dark-650;
+}
+
+.dark-border-rounded-md {
+    @apply rounded-md border border-dark-650;
+}

package/src/assets/css/main.scss

@@ -3,11 +3,11 @@
    Modular SCSS architecture with @use imports
    ========================================================================== */
 
-/* Module imports */
 @use "base/reset";
 @use "base/scroll";
 @use "base/typography";
-@use "base/color-fallbacks";
+@use "base/variables";
+@use "base/mixins" as *;
 @use "components/buttons";
 @use "components/forms";
 @use "components/toasts";
@@ -15,69 +15,44 @@
 @use "components/tables";
 @use "components/search-groups";
 @use "components/headers";
+@use "components/utilities";
+@use "components/accessibility";
 
 /* ==========================================================================
    BODY LAYOUT & BACKGROUND
    ========================================================================== */
 
 html {
-    background-color: oklch(0.1822 0 0);
+    @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 */
@@ -85,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;
     }
@@ -134,117 +105,51 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
    COMPONENT UTILITIES
    ========================================================================== */
 
-.smooth-hover {
-    @apply transition-all duration-200;
-}
-
-.status-indicator {
-    @apply h-2 w-2 flex-shrink-0 rounded-full;
-    min-width: 4px;
-    min-height: 4px;
-}
-
 .mobile-icons {
     @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);
         }
     }
 }
 
-.loading-spinner {
-    @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
-}
-
-/* ==========================================================================
-   LABEL & ICON STYLING
-   ========================================================================== */
-
-.label-override {
-    @apply mb-2 flex items-center text-xs;
-    color: oklch(0.65 0 0);
-
-    svg {
-        @apply ml-2;
-        color: oklch(0.65 0 0) !important;
-        width: 16px;
-        height: 16px;
-        fill: oklch(0.65 0 0) !important;
-    }
-}
-
-.task-switches {
-    h4 {
-        color: oklch(0.9 0 0);
-        font-size: 0.8125rem;
-        font-weight: 500;
-        @apply mx-auto mb-2 flex items-center gap-x-2 text-center;
-    }
-
-    .switch-wrapper {
-        @apply gap-y-2;
-    }
-
-    svg {
-        width: 15px !important;
-        height: 15px !important;
-        color: oklch(0.9 0 0) !important;
-        margin-left: 0.25rem !important;
-    }
+.smooth-hover {
+    @apply transition-all duration-200;
+    @include scale-hover;
 }
 
-/* ==========================================================================
-   DYNAMIC HEIGHTS & RESPONSIVE DESIGN
-   ========================================================================== */
-
-.max-h-big {
-    max-height: calc(100vh - 12rem);
-    min-height: 8rem;
-    overflow: hidden;
+.status-indicator {
+    @apply h-2 w-2 flex-shrink-0 rounded-full;
+    min-width: 4px;
+    min-height: 4px;
 }
 
-@screen xl {
-    .max-h-big {
-        max-height: calc(100vh - 11rem);
-    }
+.loading-spinner {
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
 }
 
-@screen h-sm {
-    .max-h-big {
-        max-height: calc(100vh - 12rem);
-        min-height: 8rem;
+/* 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;
     }
 }
 
-/* ==========================================================================
-   TRANSITIONS & ANIMATIONS
-   ========================================================================== */
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.15s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.will-change-auto {
-    will-change: auto;
-}
-
 /* ==========================================================================
    iOS OPTIMIZATIONS
    ========================================================================== */
@@ -282,3 +187,14 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
         min-height: 5px;
     }
 }
+
+/* Fade transition for modals and components */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}