@evolve.ui/theme-system 1.0.1 → 1.2.0

package/css/EverydayHarbor.effects.css

@@ -0,0 +1,650 @@
+@layer hui-effects;
+
+.brand-harbor {
+    --effect-solid-fill: #12223a;
+    --effect-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.06) 35%, rgba(142, 197, 232, 0.1) 65%, rgba(142, 197, 232, 0.4));
+    --effect-surface-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 45%), rgba(14, 28, 48, 0.42);
+    --effect-surface-filter: blur(18px) saturate(180%);
+    --effect-surface-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.45);
+    --effect-surface-radius: 18px;
+    --effect-raised-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%), rgba(14, 28, 48, 0.58);
+    --effect-raised-filter: blur(26px) saturate(180%);
+    --effect-raised-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 40px rgba(142, 197, 232, 0.22), 0 30px 80px rgba(0, 0, 0, 0.55);
+    --effect-scrim-fill: rgba(11, 22, 38, 0.45);
+    --effect-scrim-filter: blur(10px) saturate(180%);
+    --effect-tooltip-text: rgb(var(--color-text-primary));
+    --effect-tooltip-text-inverse: rgb(var(--color-text-inverse));
+    --effect-overlay-text: rgb(var(--color-text-primary));
+    --effect-hover-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%), rgba(46, 107, 166, 0.3);
+    --effect-featured: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(227, 179, 65, 0.45), 0 0 36px rgba(227, 179, 65, 0.28), 0 20px 60px rgba(0, 0, 0, 0.45);
+    --effect-halo: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 28px rgba(46, 107, 166, 0.35), 0 20px 60px rgba(0, 0, 0, 0.45);
+    --effect-glow: 0 0 24px rgba(46, 107, 166, 0.55);
+    --effect-hover: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 28px rgba(46, 107, 166, 0.4), 0 20px 60px rgba(0, 0, 0, 0.4);
+    --effect-selected: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(227, 179, 65, 0.55), 0 0 32px rgba(227, 179, 65, 0.28), 0 20px 60px rgba(0, 0, 0, 0.4);
+    --effect-success: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(180, 193, 90, 0.35), 0 20px 60px rgba(0, 0, 0, 0.4);
+    --effect-error: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgb(var(--color-border-critical) / 45%), 0 20px 60px rgba(0, 0, 0, 0.4);
+    --effect-accept-glow: 0 0 36px rgba(227, 179, 65, 0.3), inset 0 0 36px rgba(227, 179, 65, 0.12);
+    --effect-reject-glow: 0 0 36px rgb(var(--color-border-critical) / 28%), inset 0 0 36px rgb(var(--color-border-critical) / 10%);
+    --effect-dash: rgba(142, 197, 232, 0.4);
+    --effect-dash-strong: rgba(142, 197, 232, 0.85);
+    --effect-dash-disabled: rgba(185, 197, 211, 0.35);
+    --effect-dash-accept: rgba(227, 179, 65, 0.9);
+    --effect-dash-reject: rgb(var(--color-border-critical) / 90%);
+    --effect-cta-fill: linear-gradient(90deg, #f2cf7a, #e3b341 55%, #d9963e);
+    --effect-cta-fill-hover: linear-gradient(180deg, #f2cf7a, #e3b341 40%, #d9963e);
+    --effect-cta-ink-rgb: 11 22 38;
+    --effect-text-muted-rgb: 185 197 211;
+    --effect-text-muted-solid-rgb: 169 182 198;
+    --effect-text-success-rgb: 180 193 90;
+    --effect-text-success-solid-rgb: 163 176 78;
+    --effect-text-critical-glass-rgb: 247 162 157;
+    --effect-text-critical-solid-rgb: 234 117 111;
+    --effect-font-accent: var(--font-family-primary);
+    --effect-font-serif: 'Source Serif 4', Georgia, serif;
+    --effect-backdrop: radial-gradient(circle at 18% 12%, rgba(91, 155, 216, 0.38), transparent 38%), radial-gradient(circle at 85% 80%, rgba(227, 179, 65, 0.3), transparent 42%), radial-gradient(circle at 70% 20%, rgba(163, 176, 78, 0.18), transparent 36%), #0b1626;
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+    .brand-harbor {
+        --effect-edge: none;
+        --effect-surface-fill: var(--effect-solid-fill);
+        --effect-surface-filter: none;
+        --effect-raised-fill: var(--effect-solid-fill);
+        --effect-raised-filter: none;
+        --effect-scrim-fill: var(--effect-solid-fill);
+        --effect-scrim-filter: none;
+        --effect-hover-fill: var(--effect-solid-fill);
+        --effect-text-muted-rgb: var(--effect-text-muted-solid-rgb);
+        --effect-text-success-rgb: var(--effect-text-success-solid-rgb);
+        --effect-text-critical-glass-rgb: var(--effect-text-critical-solid-rgb);
+    }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+    .brand-harbor {
+        --effect-edge: none;
+        --effect-surface-fill: var(--effect-solid-fill);
+        --effect-surface-filter: none;
+        --effect-raised-fill: var(--effect-solid-fill);
+        --effect-raised-filter: none;
+        --effect-scrim-fill: var(--effect-solid-fill);
+        --effect-scrim-filter: none;
+        --effect-hover-fill: var(--effect-solid-fill);
+        --effect-text-muted-rgb: var(--effect-text-muted-solid-rgb);
+        --effect-text-success-rgb: var(--effect-text-success-solid-rgb);
+        --effect-text-critical-glass-rgb: var(--effect-text-critical-solid-rgb);
+    }
+}
+
+@layer hui-effects {
+    :where(.brand-harbor .hui-fx-glass:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-surface-fill) !important;
+        -webkit-backdrop-filter: var(--effect-surface-filter) !important;
+        backdrop-filter: var(--effect-surface-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-surface-shadow) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-glass:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+        border-radius: var(--effect-surface-radius);
+        position: relative;
+    }
+
+    :where(.brand-harbor .hui-fx-glass:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor .hui-fx-glass-raised:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-glass-raised:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+        border-radius: var(--effect-surface-radius);
+        position: relative;
+    }
+
+    :where(.brand-harbor .hui-fx-glass-raised:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor .hui-fx-featured:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-featured) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-halo:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-halo) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-glow:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-glow) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-cta:not(:disabled, [aria-disabled="true"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-cta-fill) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-cta:not(:disabled, [aria-disabled="true"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-inverse: var(--effect-cta-ink-rgb);
+        --color-icon-inverse: var(--effect-cta-ink-rgb);
+    }
+
+    :where(.brand-harbor .hui-fx-cta:not(:disabled, [aria-disabled="true"]):hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-cta-fill-hover) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-accent-font:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        font-family: var(--effect-font-accent) !important;
+    }
+
+    :where(.brand-harbor .hui-fx-serif:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --effect-font-accent: var(--effect-font-serif);
+    }
+
+    :where(.brand-harbor .hui-fx-backdrop:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-backdrop) !important;
+    }
+
+    :where(.brand-harbor dialog[data-hui-id="Modal"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor dialog[data-hui-id="Modal"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor dialog[data-hui-id="Modal"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [data-hui-id="Drawer"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor [data-hui-id="Drawer"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [data-hui-id="Drawer"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [role="dialog"][aria-modal="true"].rounded-t-xl:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor [role="dialog"][aria-modal="true"].rounded-t-xl:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [role="dialog"][aria-modal="true"].rounded-t-xl:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor .Menu[role="menu"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor .Menu[role="menu"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor .Menu[role="menu"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [role="tooltip"].hui-text-body-secondary:not(.\!bg-background-inverse):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor [role="tooltip"].hui-text-body-secondary:not(.\!bg-background-inverse):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [role="tooltip"].hui-text-body-secondary:not(.\!bg-background-inverse):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [data-testid="date-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor [data-testid="date-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [data-testid="date-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [data-testid="time-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor [data-testid="time-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [data-testid="time-picker-popover"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [role="tooltip"].hui-text-body-secondary:not(.\!bg-background-inverse):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        color: var(--effect-tooltip-text) !important;
+    }
+
+    :where(.brand-harbor [role="tooltip"].hui-text-body-secondary.\!bg-background-inverse:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        color: var(--effect-tooltip-text-inverse) !important;
+    }
+
+    :where(.brand-harbor div:has(> [role="listbox"][id^="react-select-"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-raised-fill) !important;
+        -webkit-backdrop-filter: var(--effect-raised-filter) !important;
+        backdrop-filter: var(--effect-raised-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-raised-shadow) !important;
+    }
+
+    :where(.brand-harbor div:has(> [role="listbox"][id^="react-select-"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor div:has(> [role="listbox"][id^="react-select-"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor .Toastify__toast-container > *:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-surface-fill) !important;
+        -webkit-backdrop-filter: var(--effect-surface-filter) !important;
+        backdrop-filter: var(--effect-surface-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-surface-shadow) !important;
+    }
+
+    :where(.brand-harbor .Toastify__toast-container > *:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor .Toastify__toast-container > *:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-surface-fill) !important;
+        -webkit-backdrop-filter: var(--effect-surface-filter) !important;
+        backdrop-filter: var(--effect-surface-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-surface-shadow) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        inset: 6px !important;
+        border-radius: inherit !important;
+        border-width: 1px !important;
+        border-style: dashed !important;
+        border-color: var(--effect-dash) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not([aria-disabled="true"]):hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-hover-fill) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not([aria-disabled="true"]):hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-strong) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled]:not([aria-disabled="true"]):active:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-hover-fill) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"][aria-disabled="true"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-disabled) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"].outline-4:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-accept) !important;
+        box-shadow: var(--effect-accept-glow) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"].outline-4:hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-accept) !important;
+        box-shadow: var(--effect-accept-glow) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"].bg-background-critical-light:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-error) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"].bg-background-critical-light:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-reject) !important;
+        box-shadow: var(--effect-reject-glow) !important;
+    }
+
+    :where(.brand-harbor [role="region"] > [role="button"].bg-background-critical-light:hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        border-color: var(--effect-dash-reject) !important;
+        box-shadow: var(--effect-reject-glow) !important;
+    }
+
+    :where(.brand-harbor .group\/dropzone > div:last-child.outline-4:not(.outline-border-critical):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-scrim-fill) !important;
+        -webkit-backdrop-filter: var(--effect-scrim-filter) !important;
+        backdrop-filter: var(--effect-scrim-filter) !important;
+    }
+
+    :where(.brand-harbor .group\/dropzone > div:last-child.outline-4:not(.outline-border-critical):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        inset: 8px !important;
+        border-radius: inherit !important;
+        border-width: 2px !important;
+        border-style: dashed !important;
+        border-color: var(--effect-dash-accept) !important;
+        box-shadow: var(--effect-accept-glow) !important;
+    }
+
+    :where(.brand-harbor .group\/dropzone > div:last-child.outline-4.outline-border-critical:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-scrim-fill) !important;
+        -webkit-backdrop-filter: var(--effect-scrim-filter) !important;
+        backdrop-filter: var(--effect-scrim-filter) !important;
+    }
+
+    :where(.brand-harbor .group\/dropzone > div:last-child.outline-4.outline-border-critical:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::after {
+        content: '' !important;
+        position: absolute !important;
+        pointer-events: none !important;
+        inset: 8px !important;
+        border-radius: inherit !important;
+        border-width: 2px !important;
+        border-style: dashed !important;
+        border-color: var(--effect-dash-reject) !important;
+        box-shadow: var(--effect-reject-glow) !important;
+    }
+
+    :where(.brand-harbor .group\/dropzone > div:last-child .text-center > .text-xl.font-medium.text-blue-600:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        color: var(--effect-overlay-text) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-surface-fill) !important;
+        -webkit-backdrop-filter: var(--effect-surface-filter) !important;
+        backdrop-filter: var(--effect-surface-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-surface-shadow) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+        position: relative;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-hover-fill) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container[aria-busy="true"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-glow) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:has(svg[role="status"][aria-valuenow="100"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-success) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container:has(input[type="checkbox"]:checked):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-selected) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container.bg-background-critical-light:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-error) !important;
+    }
+
+    :where(.brand-harbor div.group\/list-file-card.rounded-container.bg-background-critical-light:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-critical: var(--effect-text-critical-glass-rgb);
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-surface-fill) !important;
+        -webkit-backdrop-filter: var(--effect-surface-filter) !important;
+        backdrop-filter: var(--effect-surface-filter) !important;
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-surface-shadow) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-secondary: var(--effect-text-muted-rgb);
+        --color-text-success: var(--effect-text-success-rgb);
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *))::before {
+        content: '' !important;
+        position: absolute !important;
+        inset: 0 !important;
+        border-radius: inherit !important;
+        padding: 1px !important;
+        background: var(--effect-edge) !important;
+        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
+        -webkit-mask-composite: xor !important;
+        mask-composite: exclude !important;
+        pointer-events: none !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:hover:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        background: var(--effect-hover-fill) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card[aria-busy="true"]:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-glow) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:has(svg[role="status"][aria-valuenow="100"]):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-success) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card:has(input[type="checkbox"]:checked):not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-selected) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card.ring-border-critical:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--effect-error) !important;
+    }
+
+    :where(.brand-harbor .group\/grid-file-card.ring-border-critical:not(.hui-fx-none):not(.brand-basketball):not(.brand-default):not(.brand-professional):not(.brand-harbor :is(.brand-basketball, .brand-default, .brand-professional) *)) {
+        --color-text-critical: var(--effect-text-critical-glass-rgb);
+    }
+}