@incursa/ui-kit 1.5.0 → 1.7.0

package/src/inc-design-language.scss

@@ -23,20 +23,24 @@
     --inc-control-surface-border: var(--inc-border-default);
     --inc-surface-contrast: var(--bs-secondary);
     --inc-surface-contrast-rgb: var(--bs-secondary-rgb);
-    --inc-surface-contrast-hover: #31384a;
-    --inc-surface-contrast-hover-rgb: 49, 56, 74;
-    --inc-surface-contrast-active: #2e3542;
-    --inc-surface-contrast-active-rgb: 46, 53, 66;
+    --inc-surface-contrast-hover: #273042;
+    --inc-surface-contrast-hover-rgb: 39, 48, 66;
+    --inc-surface-contrast-active: #1f2737;
+    --inc-surface-contrast-active-rgb: 31, 39, 55;
     --inc-surface-contrast-text: var(--inc-text-inverse);
     --inc-surface-contrast-text-rgb: var(--inc-text-inverse-rgb);
     --inc-surface-contrast-border: var(--bs-secondary);
     --inc-surface-primary-rgb: var(--bs-body-bg-rgb);
     --inc-surface-secondary-rgb: var(--bs-secondary-bg-rgb);
     --inc-surface-muted-rgb: var(--bs-tertiary-bg-rgb);
+    --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.56);
+    --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.86);
     --inc-text-primary-rgb: var(--bs-body-color-rgb);
     --inc-text-secondary-rgb: var(--bs-secondary-color-rgb);
     --inc-text-muted-rgb: var(--bs-tertiary-color-rgb);
     --inc-shadow-rgb: var(--bs-black-rgb);
+    --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.05), 0 0.5rem 1.5rem rgba(var(--inc-shadow-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.58);
+    --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 
 [data-bs-theme="dark"] {
@@ -45,13 +49,17 @@
     --inc-control-surface-border: var(--inc-border-default);
     --inc-surface-contrast: var(--bs-gray-100);
     --inc-surface-contrast-rgb: 253, 253, 253;
-    --inc-surface-contrast-hover: var(--bs-gray-200);
-    --inc-surface-contrast-hover-rgb: 246, 246, 246;
-    --inc-surface-contrast-active: var(--bs-gray-300);
-    --inc-surface-contrast-active-rgb: 241, 241, 241;
+    --inc-surface-contrast-hover: #dfe3e8;
+    --inc-surface-contrast-hover-rgb: 223, 227, 232;
+    --inc-surface-contrast-active: #c8d0d9;
+    --inc-surface-contrast-active-rgb: 200, 208, 217;
     --inc-surface-contrast-text: var(--bs-dark);
     --inc-surface-contrast-text-rgb: 18, 19, 22;
     --inc-surface-contrast-border: var(--bs-gray-400);
+    --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.72);
+    --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.9);
+    --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.22), 0 0.75rem 1.75rem rgba(var(--inc-shadow-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.28), 0 1rem 2.25rem rgba(var(--inc-shadow-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
     --bs-success-bg-subtle: rgba(0, 151, 67, 0.18);
     --bs-success-border-subtle: rgb(72, 171, 109);
     --bs-form-valid-color: rgb(122, 214, 154);
@@ -447,6 +455,7 @@
     justify-content: center;
     gap: 0.375rem;
     vertical-align: middle;
+    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
 
     &--primary {
         @extend .btn-primary;
@@ -459,7 +468,7 @@
         --bs-btn-border-color: var(--inc-surface-contrast-border);
         --bs-btn-hover-color: var(--inc-surface-contrast-text);
         --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
-        --bs-btn-hover-border-color: var(--inc-surface-contrast-border);
+        --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
         --bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
         --bs-btn-active-color: var(--inc-surface-contrast-text);
         --bs-btn-active-bg: var(--inc-surface-contrast-active);
@@ -467,6 +476,20 @@
         --bs-btn-disabled-color: var(--inc-surface-contrast-text);
         --bs-btn-disabled-bg: var(--inc-surface-contrast);
         --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+
+        &:hover,
+        &:focus-visible {
+            --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
+            --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+        }
+
+        &:active,
+        &.active,
+        &:focus:active {
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+        }
     }
 
     &--success {
@@ -510,14 +533,14 @@
     &--outline-secondary {
         @extend .btn-outline-secondary;
         --bs-btn-color: var(--inc-text-primary);
-        --bs-btn-border-color: var(--inc-border-default);
+        --bs-btn-border-color: var(--inc-border-subtle);
         --bs-btn-hover-color: var(--inc-text-primary);
-        --bs-btn-hover-bg: var(--inc-surface-secondary);
-        --bs-btn-hover-border-color: var(--inc-border-default);
+        --bs-btn-hover-bg: rgba(var(--inc-surface-strong-rgb), 0.12);
+        --bs-btn-hover-border-color: rgba(var(--inc-surface-strong-rgb), 0.32);
         --bs-btn-focus-shadow-rgb: var(--inc-surface-strong-rgb);
         --bs-btn-active-color: var(--inc-text-primary);
-        --bs-btn-active-bg: var(--inc-surface-muted);
-        --bs-btn-active-border-color: var(--inc-border-default);
+        --bs-btn-active-bg: rgba(var(--inc-surface-strong-rgb), 0.18);
+        --bs-btn-active-border-color: rgba(var(--inc-surface-strong-rgb), 0.4);
         --bs-btn-disabled-color: var(--inc-text-muted);
         --bs-btn-disabled-border-color: var(--inc-border-subtle);
     }
@@ -538,6 +561,28 @@
         @extend .btn-outline-info;
     }
 
+    &--outline-primary,
+    &--outline-secondary,
+    &--outline-success,
+    &--outline-danger,
+    &--outline-warning,
+    &--outline-info {
+        --bs-btn-bg: rgba(var(--inc-surface-secondary-rgb), 0.74);
+        --bs-btn-disabled-bg: rgba(var(--inc-surface-secondary-rgb), 0.54);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+
+        &:hover,
+        &:focus-visible {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+        }
+
+        &:active,
+        &.active,
+        &:focus:active {
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+        }
+    }
+
     &--sm {
         @extend .btn-sm;
     }
@@ -603,6 +648,15 @@
 
 .inc-badge {
     @extend .badge;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: rgba(var(--inc-surface-secondary-rgb), 0.88);
+    color: var(--inc-text-secondary);
+    border: 1px solid var(--inc-border-subtle);
+    border-radius: 0.5rem;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+    font-weight: 600;
 
     &--primary {
         @extend .bg-primary;
@@ -625,9 +679,10 @@
     }
 
     &--warning {
-        background-color: $inc-warning-50;
-        color: $inc-warning-700;
-        border: 1px solid $inc-warning-700;
+        background-color: #fff8df;
+        color: #765000;
+        border: 1px solid #b67b00;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 1px 2px rgba(182, 123, 0, 0.12);
     }
 
     &--info {
@@ -643,6 +698,11 @@
 
 .inc-alert {
     @extend .alert;
+    position: relative;
+    overflow: hidden;
+    border-radius: $inc-radius-md;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
+    background-clip: padding-box;
 
     &:empty {
         display: none;
@@ -679,6 +739,18 @@
     &__heading {
         @extend .alert-heading;
     }
+
+    &__progress {
+        position: absolute;
+        inset-inline: 0;
+        inset-block-end: 0;
+        height: 0.1875rem;
+        background: currentColor;
+        opacity: 0.2;
+        transform-origin: left center;
+        transform: scaleX(1);
+        pointer-events: none;
+    }
 }
 
 .alert:empty {
@@ -791,15 +863,19 @@
         padding: 1rem 1rem 0.875rem;
         border: 1px solid var(--inc-border-subtle);
         border-radius: $inc-radius-md;
-        background: var(--inc-surface-secondary);
+        background: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow);
     }
 
     &__legend {
         float: none;
         width: auto;
         margin: 0;
-        padding: 0 0.375rem;
-        background-color: var(--inc-surface-secondary);
+        padding: 0.125rem 0.625rem;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: 999px;
+        background-color: var(--inc-surface-panel-cap);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
         color: var(--inc-text-primary);
         font-size: 0.8125rem;
         font-weight: 600;
@@ -823,6 +899,10 @@
         align-items: center;
         gap: 0.5rem;
         min-width: 0;
+        padding: 0.875rem 1rem;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: $inc-radius-md;
+        background: var(--inc-surface-secondary);
 
         > .inc-form__label {
             margin-bottom: 0;
@@ -898,6 +978,10 @@
 
         .inc-form__field {
             flex: 0 1 auto;
+            padding: 0;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
         }
 
         .inc-form__field--grow,
@@ -1024,12 +1108,37 @@
 
 .inc-readonly-field {
     @extend .form-control;
-    background-color: $gray-200;
-    cursor: default;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--inc-border-subtle);
+    border-radius: $inc-radius-md;
+    background: var(--inc-surface-secondary);
+    color: var(--inc-text-primary);
+    cursor: default;
     -webkit-user-select: none;
     user-select: none;
+
+    > [part~="label"] {
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--inc-text-muted);
+    }
+
+    > [part~="value"] {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--inc-text-primary);
+    }
+
+    > [part~="meta"] {
+        font-size: 0.75rem;
+        color: var(--inc-text-muted);
+    }
 }
 
 .inc-empty-state {
@@ -1041,19 +1150,31 @@
     padding: $spacer * 2 $spacer * 1.5;
     border: $border-width solid var(--inc-border-subtle);
     border-radius: $inc-radius-panel;
-    background-color: var(--inc-surface-secondary);
+    background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.96));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
     color: var(--inc-text-primary);
     min-height: 21.875rem;
 
     &__content {
         max-width: 32.5rem;
         width: 100%;
+        padding: 1rem;
+        border-radius: $inc-radius-md;
     }
 
     &__icon {
+        width: 4.5rem;
+        height: 4.5rem;
+        margin: 0 auto $spacer * 1.5;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: 1.25rem;
+        background: rgba(var(--inc-surface-secondary-rgb), 0.82);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.04);
         font-size: $font-size-base * 3.5;
-        margin-bottom: $spacer * 1.5;
         color: var(--inc-text-muted);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
 
     &__form {
@@ -1132,13 +1253,16 @@
 .inc-card {
     @extend .card;
 
-    --bs-card-bg: var(--inc-surface-primary);
+    --bs-card-bg: var(--inc-surface-panel);
     --bs-card-color: var(--inc-text-primary);
     --bs-card-title-color: var(--inc-text-primary);
     --bs-card-subtitle-color: var(--inc-text-muted);
     --bs-card-border-color: var(--inc-border-subtle);
-    --bs-card-cap-bg: var(--inc-surface-secondary);
+    --bs-card-cap-bg: var(--inc-surface-panel-cap);
     --bs-card-cap-color: var(--inc-text-primary);
+    background: var(--bs-card-bg);
+    box-shadow: var(--inc-surface-panel-shadow);
+    transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
 
     &__header {
         @extend .card-header;
@@ -1191,6 +1315,10 @@
     &__img-overlay {
         @extend .card-img-overlay;
     }
+
+    &--elevated {
+        box-shadow: var(--inc-surface-panel-shadow-raised);
+    }
 }
 
 .inc-grid {
@@ -1507,16 +1635,19 @@
         border: 1px solid var(--bs-border-color);
         border-radius: var(--bs-border-radius);
         overflow: hidden;
+        background-color: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow);
 
         .inc-header-body__header {
             border-top-left-radius: var(--bs-border-radius);
             border-top-right-radius: var(--bs-border-radius);
+            background-color: var(--inc-surface-panel-cap);
         }
     }
 
     &--panel {
-        background-color: var(--inc-surface-primary);
-        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
+        background-color: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow-raised);
         border-radius: var(--bs-border-radius);
 
         .inc-header-body__header {
@@ -1618,14 +1749,15 @@
 }
 
 .inc-summary-block {
-    background-color: var(--inc-surface-primary);
+    background-color: var(--inc-surface-panel);
     border: $border-width solid var(--inc-border-default);
     border-radius: $border-radius;
     padding: $spacer * 1.25;
-    transition: box-shadow 0.2s ease-in-out;
+    box-shadow: var(--inc-surface-panel-shadow);
+    transition: box-shadow 0.18s ease-in-out, background-color 0.18s ease-in-out;
 
     &:hover {
-        box-shadow: $box-shadow-sm;
+        box-shadow: var(--inc-surface-panel-shadow-raised);
     }
 
     &__header {
@@ -2309,6 +2441,8 @@
         list-style: none;
         padding-left: 0;
         margin-bottom: 0;
+        position: relative;
+        z-index: 1;
 
         > li + li {
             margin-left: 0.125rem;
@@ -2323,12 +2457,14 @@
             color: var(--inc-text-secondary);
             border-top-left-radius: $inc-radius-panel;
             border-top-right-radius: $inc-radius-panel;
-            background-color: var(--inc-surface-secondary);
+            background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-secondary-rgb), 0.82));
             height: 2.5rem;
             text-decoration: none;
             border: 1px solid var(--inc-border-subtle);
             cursor: pointer;
             appearance: none;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+            transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 
             .inc-tab-icon {
                 color: var(--bs-primary);
@@ -2336,8 +2472,9 @@
 
             &:not(.active):hover {
                 color: var(--inc-text-primary);
-                background-color: var(--inc-surface-muted);
+                background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 1), rgba(var(--inc-surface-muted-rgb), 0.9));
                 border-color: var(--inc-border-default);
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
 
                 .inc-tab-icon {
                     color: var(--bs-primary);
@@ -2346,24 +2483,27 @@
 
             &.active {
                 color: var(--bs-primary-text-emphasis);
-                background-color: var(--inc-surface-primary);
+                background-color: var(--inc-surface-panel);
                 font-weight: 600;
                 border-color: var(--inc-border-subtle);
-                border-bottom-color: var(--inc-surface-primary);
+                border-bottom-color: var(--inc-surface-panel);
                 position: relative;
                 z-index: 1;
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+                transform: translateY(-1px);
             }
         }
     }
 
     .inc-tab-content {
-        background-color: var(--inc-surface-primary);
+        background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.98));
         border: 1px solid var(--inc-border-subtle);
         padding: 1.5rem;
         border-radius: $inc-radius-panel;
         border-top-left-radius: 0;
         border-top-right-radius: $inc-radius-panel;
         margin-top: -1px;
+        box-shadow: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06);
     }
 }
 
@@ -3000,12 +3140,14 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     display: inline-flex;
     align-items: center;
     gap: 0.625rem;
+    width: max-content;
+    max-width: calc(100vw - 2rem);
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: 999px;
-    background: rgba(var(--inc-surface-primary-rgb), 0.96);
+    background: rgba(var(--inc-surface-primary-rgb), 0.92);
     color: var(--inc-text-primary);
-    box-shadow: 0 0.75rem 1.5rem rgba(var(--inc-surface-strong-rgb), 0.12);
+    box-shadow: var(--inc-surface-panel-shadow-raised);
     font-size: 0.75rem;
     line-height: 1.2;
     white-space: nowrap;
@@ -3017,6 +3159,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
         bottom: auto;
         z-index: auto;
         vertical-align: middle;
+        max-width: 100%;
     }
 
     &__countdown,
@@ -3047,30 +3190,97 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     }
 
     &__toggle {
+        --bs-btn-color: var(--inc-text-primary);
+        --bs-btn-hover-color: var(--inc-text-primary);
+        --bs-btn-active-color: var(--inc-text-primary);
+        order: -1;
         flex: 0 0 auto;
+        width: 1.875rem;
+        height: 1.875rem;
+        padding: 0;
+        border-radius: 999px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--inc-text-primary);
+        border-color: var(--inc-border-default);
+        background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-primary-rgb), 0.94));
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.08);
 
         &.inc-btn {
-            min-height: 1.625rem;
-            padding: 0.2rem 0.55rem;
+            min-height: 1.875rem;
             font-size: 0.6875rem;
             line-height: 1;
         }
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+            color: var(--inc-text-primary);
+        }
+    }
+
+    &__toggle-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+        color: var(--inc-text-primary);
+
+        .inc-auto-refresh__toggle:hover &,
+        .inc-auto-refresh__toggle:focus-visible &,
+        .inc-auto-refresh__toggle:active & {
+            color: var(--inc-text-primary);
+        }
+
+        svg {
+            display: block;
+            width: 1rem;
+            height: 1rem;
+            fill: currentColor;
+        }
     }
 
     &__toggle-text {
-        display: inline-block;
-        min-width: 3.25rem;
-        text-align: center;
+        @include visually-hidden();
     }
 
     &.is-paused {
         border-color: var(--bs-warning-border-subtle);
         box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-warning-rgb), 0.1);
+
+        .inc-auto-refresh__toggle {
+            color: var(--bs-warning-text-emphasis);
+
+            &:hover,
+            &:focus-visible,
+            &:active {
+                color: var(--bs-warning-text-emphasis);
+            }
+        }
+
+        .inc-auto-refresh__toggle-icon {
+            color: var(--inc-text-primary);
+            svg {
+                transform: translateX(0.03125rem);
+            }
+        }
     }
 
     &.is-loading {
         border-color: var(--bs-primary-border-subtle);
         box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-primary-rgb), 0.14);
+
+        .inc-auto-refresh__toggle {
+            color: var(--inc-text-primary);
+
+            &:hover,
+            &:focus-visible,
+            &:active {
+                color: var(--inc-text-primary);
+            }
+        }
     }
 }
 
@@ -3163,7 +3373,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     .alert,
     .inc-alert {
         margin-bottom: 0.5rem;
-        box-shadow: $box-shadow-sm;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
         border-radius: $inc-radius-panel;
         border-width: $border-width;
         padding: 0.75rem 1rem;
@@ -4293,7 +4503,9 @@ body.inc-offcanvas-open {
         border: 1px solid var(--bs-danger-border-subtle);
         border-left: 0.25rem solid var(--bs-danger-text-emphasis);
         border-radius: $inc-radius-md;
-        background: var(--bs-danger-bg-subtle);
+        background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.14), rgba(var(--bs-danger-rgb), 0.1));
+        box-shadow: var(--inc-surface-panel-shadow);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
 
         &-title {
             margin: 0;
@@ -4318,7 +4530,8 @@ body.inc-offcanvas-open {
     padding: 1rem 1.125rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: $inc-radius-md;
-    background: var(--inc-surface-primary);
+    background: var(--inc-surface-panel);
+    box-shadow: var(--inc-surface-panel-shadow);
 
     &__main {
         display: flex;
@@ -4363,6 +4576,7 @@ body.inc-offcanvas-open {
     border: 1px solid var(--inc-border-subtle);
     border-radius: 999px;
     background: var(--inc-surface-secondary);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.05);
     color: var(--inc-text-primary);
     font-size: 0.75rem;
     font-weight: 600;
@@ -4386,6 +4600,22 @@ body.inc-offcanvas-open {
     }
 }
 
+[data-bs-theme="dark"] {
+    .inc-filter-chip {
+        &--accent {
+            border-color: rgba(var(--bs-primary-rgb), 0.5);
+            background: rgba(var(--bs-primary-rgb), 0.4);
+            color: var(--bs-white);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.12);
+        }
+
+        &--accent .inc-filter-chip__remove {
+            color: currentColor;
+            opacity: 0.88;
+        }
+    }
+}
+
 .inc-state-panel {
     display: flex;
     flex-direction: column;
@@ -4393,7 +4623,8 @@ body.inc-offcanvas-open {
     padding: 1.5rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: $inc-radius-md;
-    background: var(--inc-surface-primary);
+    background: var(--inc-surface-panel);
+    box-shadow: var(--inc-surface-panel-shadow);
 
     &__head {
         display: flex;
@@ -4440,11 +4671,11 @@ body.inc-offcanvas-open {
 
     &--results {
         border-style: dashed;
-        background: var(--inc-surface-secondary);
+        background: rgba(var(--inc-surface-secondary-rgb), 0.84);
     }
 
     &--loading {
-        background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04), var(--inc-surface-primary));
+        background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05), var(--inc-surface-panel));
     }
 
     &--error {
@@ -4736,11 +4967,11 @@ body.inc-offcanvas-open {
     }
 
     .inc-form__fieldset {
-        background: var(--inc-surface-secondary);
+        background: var(--inc-surface-panel);
     }
 
     .inc-form__legend {
-        background-color: var(--inc-surface-secondary);
+        background-color: var(--inc-surface-panel-cap);
     }
 
     .inc-form__control.is-invalid,
@@ -4811,20 +5042,20 @@ body.inc-offcanvas-open {
     .inc-table__row--selected > *,
     .inc-table__row--warning > *,
     .inc-table__row--danger > * {
-        background: rgba(var(--bs-primary-rgb), 0.14) !important;
+        background: rgba(var(--bs-primary-rgb), 0.26) !important;
         color: var(--inc-text-primary);
     }
 
     .inc-table__row--warning > * {
-        background: rgba(var(--bs-warning-rgb), 0.14) !important;
+        background: rgba(var(--bs-warning-rgb), 0.24) !important;
     }
 
     .inc-table__row--danger > * {
-        background: rgba(var(--bs-danger-rgb), 0.14) !important;
+        background: rgba(var(--bs-danger-rgb), 0.24) !important;
     }
 
     .inc-table__row--locked > * {
-        background: rgba(var(--bs-secondary-rgb), 0.22) !important;
+        background: rgba(var(--bs-secondary-rgb), 0.32) !important;
         color: var(--inc-text-secondary);
     }
 }
@@ -5017,6 +5248,11 @@ body.inc-offcanvas-open {
     border: 1.5px dashed $inc-border-strong;
     border-radius: $inc-radius-md;
     background: linear-gradient(180deg, var(--inc-surface-secondary), var(--inc-surface-primary));
+    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+
+    &[role="button"] {
+        cursor: pointer;
+    }
 
     &__content {
         display: flex;
@@ -5041,6 +5277,14 @@ body.inc-offcanvas-open {
         background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
     }
 
+    &.is-drag-over,
+    &:focus-visible {
+        border-color: var(--bs-primary);
+        background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
+        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.14);
+        outline: 0;
+    }
+
     @media (max-width: 767.98px) {
         flex-direction: column;
         align-items: stretch;