@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -8,22 +8,19 @@
     padding-top: 1.5rem;
     padding-bottom: 0.5rem;
 
-    /* Header card container */
     .page-header-card {
         @apply flex items-center gap-2.5 rounded-lg;
         padding: 0.375rem 0.75rem;
-        background: linear-gradient(135deg, oklch(0.22 0 0) 0%, oklch(0.24 0 0) 100%);
-        border: 1px solid oklch(0.28 0 0);
+        background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
+        border: 1px solid var(--color-border-light);
 
-        /* Icon - static by default */
         svg, img {
             width: 17px;
             height: 17px;
-            color: oklch(0.85 0 0);
+            color: var(--color-text-bright);
             flex-shrink: 0;
         }
 
-        /* Clickable icon wrapper - only for Tasks page */
         .icon-button {
             @apply flex items-center justify-center rounded;
             cursor: pointer;
@@ -34,21 +31,21 @@
             svg, img {
                 width: 17px;
                 height: 17px;
-                color: oklch(0.85 0 0);
+                color: var(--color-text-bright);
                 transition: transform 0.4s ease, color 0.2s ease;
             }
 
             &:hover {
-                background: oklch(0.26 0 0);
+                background: var(--color-border);
 
                 svg, img {
-                    color: oklch(0.95 0 0);
+                    color: var(--color-text-primary);
                     transform: rotate(90deg);
                 }
             }
 
             &:active {
-                background: oklch(0.20 0 0);
+                background: var(--color-bg-darker-alt);
 
                 svg, img {
                     transform: rotate(180deg);
@@ -56,34 +53,31 @@
             }
         }
 
-        /* Title text */
         h4 {
             @apply font-semibold;
             font-size: 1rem;
             line-height: 1.2;
-            color: oklch(0.95 0 0);
+            color: var(--color-text-primary);
             letter-spacing: -0.01em;
         }
 
-        /* Count badge - only for Tasks page */
         .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: oklch(0.20 0 0);
-            border: 1px solid oklch(0.26 0 0);
-            color: oklch(0.70 0 0);
+            background: var(--color-bg-darker-alt);
+            border: 1px solid var(--color-border);
+            color: var(--color-text-dim);
             letter-spacing: 0.01em;
         }
     }
 
-    /* Mobile responsive */
-    @media (max-width: 640px) {
+    @screen sm {
         padding-top: 1rem;
 
         .page-header-card {
-            gap: 2.5;
+            gap: 0.625rem;
             padding: 0.5rem 0.875rem;
 
             svg, img {
@@ -104,7 +98,6 @@
         }
     }
 
-    /* Tablet responsive */
     @media (min-width: 641px) and (max-width: 1024px) {
         .page-header-card {
             svg, img {
@@ -119,7 +112,6 @@
     }
 }
 
-/* PWA mode adjustments */
 @media (display-mode: standalone) {
     .page-header {
         padding-top: 3.5rem !important;

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,46 +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;
-        outline: none !important;
-        outline-width: 0 !important;
-        outline-offset: 0 !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 {
@@ -52,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;
@@ -63,7 +69,7 @@
         flex: 1;
 
         &::placeholder {
-            color: oklch(0.50 0 0);
+            @apply text-light-600;
         }
 
         &:focus {
@@ -72,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 {