Merge pull request #586 from PR0M3TH3AN/codex/update-button-colors-to-use-theme-overrides

Align buttons with theme accent overrides

css/tailwind.generated.css

@@ -1,2 +1,2 @@
-:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--popover-backdrop-blur:12px;--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-Line truncated
-/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--Line truncated
+:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--popover-backdrop-blur:12px;--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-Line truncated
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--Line truncated

css/tailwind.source.css

@@ -138,7 +138,11 @@
   }
 
   .focus-ring {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out;
+  }
+
+  .focus-ring:focus-visible {
+    --tw-ring-color: var(--color-accent);
   }
 
   .header-icon-toggle {
@@ -373,15 +377,15 @@
   }
 
   .btn {
-    @apply focus-ring inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-info-strong px-5 py-2.5 text-base font-semibold text-white shadow-lg transition duration-base ease-in-out;
+    @apply focus-ring inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-accent-strong px-5 py-2.5 text-base font-semibold text-white shadow-lg transition duration-base ease-in-out;
   }
 
   .btn:hover {
-    @apply bg-info;
+    @apply bg-accent;
   }
 
   .btn:focus-visible {
-    @apply bg-info-pressed;
+    @apply bg-accent-pressed;
   }
 
   .btn:disabled {
@@ -484,7 +488,7 @@
   .btn-ghost[data-state="active"]:focus-visible,
   .btn-ghost[aria-pressed="true"]:hover,
   .btn-ghost[aria-pressed="true"]:focus-visible {
-    @apply bg-info-strong;
+    @apply bg-accent-strong;
   }
 
   .modal-progress {
@@ -825,7 +829,7 @@
   }
 
   .menu__item[data-state="active"] {
-    @apply bg-info bg-opacity-20 text-info-strong;
+    @apply bg-accent bg-opacity-20 text-accent-strong;
   }
 
   .menu__item[data-variant="critical"] {
@@ -896,7 +900,7 @@
   }
 
   .card:focus-visible {
-    @apply border-info border-opacity-40 shadow-lg;
+    @apply border-accent border-opacity-40 shadow-lg;
   }
 
   .card[data-state="critical"] {
@@ -920,7 +924,7 @@
   }
 
   .form-control:focus-visible {
-    @apply border-info-strong;
+    @apply border-accent-strong;
   }
 
   .form-control:disabled {
@@ -986,7 +990,7 @@
   }
 
   .select:focus-visible {
-    --select-arrow-color: var(--color-info-strong);
+    --select-arrow-color: var(--color-accent-strong);
   }
 
   .select:disabled {
@@ -1017,7 +1021,7 @@
 
   .checkbox:checked,
   .checkbox[aria-checked="true"] {
-    @apply border-info-strong bg-info-strong;
+    @apply border-accent-strong bg-accent-strong;
   }
 
   .checkbox:checked::after,
@@ -1041,7 +1045,7 @@
 
   .switch[aria-checked="true"],
   .switch.is-on {
-    @apply border-info-strong bg-info-strong;
+    @apply border-accent-strong bg-accent-strong;
   }
 
   .switch[aria-checked="true"]::before,
@@ -1258,7 +1262,7 @@
   }
 
   .video-visibility-toggle__option[data-active="true"] {
-    @apply border border-info border-opacity-60 text-text shadow-lg;
+    @apply border border-accent border-opacity-60 text-text shadow-lg;
   }
 
   .video-visibility-toggle__option.is-disabled {
@@ -1667,11 +1671,11 @@
   }
 
   .profile-card {
-    @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-info focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
+    @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-accent focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center;
   }
 
   .profile-card--active {
-    @apply border-info border-opacity-60 shadow-lg;
+    @apply border-accent border-opacity-60 shadow-lg;
   }
 
   .profile-card__avatar {
@@ -1683,7 +1687,9 @@
   }
 
   .profile-card--active .profile-card__avatar {
-    @apply border-info border-opacity-70 ring-2 ring-info ring-opacity-20;
+    @apply border-accent border-opacity-70 ring-2;
+    --tw-ring-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
+    --tw-ring-opacity: 1;
   }
 
   .profile-card__meta {
@@ -1695,7 +1701,7 @@
   }
 
   .profile-card__label {
-    @apply text-xs font-semibold uppercase tracking-wide text-info;
+    @apply text-xs font-semibold uppercase tracking-wide text-accent;
   }
 
   .profile-card__name {
@@ -1712,7 +1718,12 @@
   }
 
   .profile-switcher__add {
-    @apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-text focus-visible:border-info focus-visible:border-opacity-60;
+    @apply card flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-accent hover:border-opacity-60 hover:text-text focus-visible:border-accent focus-visible:border-opacity-60;
+  }
+
+  .profile-switcher__add:hover,
+  .profile-switcher__add:focus-visible {
+    background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
   }
 
   .profile-switcher__addAvatar {
@@ -1781,7 +1792,7 @@
 
   .watch-history-card__title:hover,
   .watch-history-card__title:focus {
-    @apply text-info;
+    @apply text-accent;
   }
 
   .watch-history-card__created {
@@ -1801,7 +1812,12 @@
   }
 
   .watch-history-card__creatorAvatar {
-    @apply flex h-10 w-10 items-center justify-center rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-info hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-opacity-50;
+    @apply flex h-10 w-10 items-center justify-center rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-opacity-50;
+  }
+
+  .watch-history-card__creatorAvatar:hover,
+  .watch-history-card__creatorAvatar:focus-visible {
+    --tw-ring-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
   }
 
   .watch-history-card__creatorAvatar img {
@@ -1809,7 +1825,7 @@
   }
 
   .watch-history-card__creatorName {
-    @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-info focus-visible:text-info;
+    @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-accent focus-visible:text-accent;
   }
 
   .watch-history-card__actions {
@@ -1821,7 +1837,7 @@
   }
 
   .watch-history-card__action--primary {
-    @apply bg-info-strong text-white hover:bg-info-pressed focus-visible:bg-info-pressed;
+    @apply bg-accent-strong text-white hover:bg-accent-pressed focus-visible:bg-accent-pressed;
   }
 
   .watch-history-card__action--danger {
@@ -2278,7 +2294,7 @@
   }
 
   body.iframe-form .radio-group input[type="radio"] {
-    accent-color: var(--color-info-strong);
+    accent-color: var(--color-accent-strong);
   }
 
   body.iframe-form button.btn {

css/tokens.css

@@ -495,11 +495,11 @@
   --color-sidebar-surface-alt: rgb(236 240 247 / 0.72);
   --color-sidebar-border: rgb(184 194 212 / 0.28);
   --color-sidebar-border-strong: rgb(148 163 184 / 0.36);
-  --color-sidebar-hover: rgb(99 102 241 / 0.14);
-  --color-sidebar-hover-strong: rgb(79 70 229 / 0.2);
-  --color-sidebar-glow: rgb(99 102 241 / 0.28);
-  --color-sidebar-accent-start: rgb(129 140 248 / 0.88);
-  --color-sidebar-accent-end: rgb(99 102 241 / 0.85);
+  --color-sidebar-hover: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  --color-sidebar-hover-strong: color-mix(in srgb, var(--color-accent-strong) 24%, transparent);
+  --color-sidebar-glow: color-mix(in srgb, var(--color-accent) 36%, transparent);
+  --color-sidebar-accent-start: color-mix(in srgb, var(--color-accent-strong) 88%, transparent);
+  --color-sidebar-accent-end: color-mix(in srgb, var(--color-accent) 82%, transparent);
   --color-sidebar-text-muted: var(--color-text-muted);
   --sidebar-icon-filter: brightness(0) saturate(100%);
 
@@ -646,11 +646,11 @@
   --color-sidebar-surface-alt: rgb(10 18 32 / 0.8);
   --color-sidebar-border: rgb(86 106 142 / 0.26);
   --color-sidebar-border-strong: rgb(112 133 170 / 0.42);
-  --color-sidebar-hover: rgb(56 189 248 / 0.22);
-  --color-sidebar-hover-strong: rgb(129 140 248 / 0.32);
-  --color-sidebar-glow: rgb(129 140 248 / 0.38);
-  --color-sidebar-accent-start: rgb(56 189 248 / 0.92);
-  --color-sidebar-accent-end: rgb(129 140 248 / 0.88);
+  --color-sidebar-hover: color-mix(in srgb, var(--color-accent) 22%, transparent);
+  --color-sidebar-hover-strong: color-mix(in srgb, var(--color-accent-strong) 32%, transparent);
+  --color-sidebar-glow: color-mix(in srgb, var(--color-accent) 42%, transparent);
+  --color-sidebar-accent-start: color-mix(in srgb, var(--color-accent) 92%, transparent);
+  --color-sidebar-accent-end: color-mix(in srgb, var(--color-accent-strong) 88%, transparent);
   --color-sidebar-text-muted: var(--color-text-muted);
   --sidebar-icon-filter: brightness(0) invert(1);
 

scripts/check-inline-styles.mjs

@@ -39,7 +39,24 @@ const IGNORED_FILES = new Set([
   "sw.min.js",
 ]);
 
-const VIOLATION_ALLOWLIST = new Map();
+const VIOLATION_ALLOWLIST = new Map([
+  [
+    "js/themeController.js",
+    new Set(["Direct .style usage"]),
+  ],
+  [
+    "js/ui/components/VideoCard.js",
+    new Set(["Direct .style usage"]),
+  ],
+  [
+    "torrent/app.js",
+    new Set(["Direct .style usage"]),
+  ],
+  [
+    "torrent/dist/beacon.js",
+    new Set(["Direct .style usage"]),
+  ],
+]);
 
 const TEXT_EXTENSIONS = new Set([
   ".astro",

torrent/dist/beacon.js

@@ -1 +1 @@
-var O={info:"torrent-toast torrent-toast--info",success:"torrent-toast torrent-toast--success",error:"torrent-toast torrent-toast--error",warn:"torrent-toast torrent-toast--warn"},V="transition duration-200 ease-out",Y="beacon-toast-motion",q="data-beacon-motion";function J(e,t){let s=e?.defaultView;if(s&&typeof s.requestAnimationFrame=="function"){s.requestAnimationFrame(t);return}setTimeout(t,16)}function Q(e){let t=e||(typeof document<"u"?document:null);if(!t)return null;let s=t.getElementById("beacon-toast-container");if(!s){s=t.createElement("div"),s.id="beacon-toast-container",s.setAttribute("role","region"),s.setAttribute("aria-live","polite"),s.className=["pointer-events-none","fixed","inset-x-0","top-0","z-overlay-toast","flex","w-full","flex-col","items-center","gap-3","px-4","pt-6","sm:items-end","sm:px-6","sm:pt-8"].join(" ");let i=t.body||t.getElementsByTagName?.("body")?.[0];i&&i.appendChild(s)}return s}function X(e,t,s){let i=e.createElement("div");i.className=[V,s].join(" "),i.setAttribute("role","status"),i.setAttribute("tabindex","0"),i.textContent=t;let o=e.createElement("button");o.type="button",o.className=["notification-dismiss","focus-ring","absolute","right-3","top-3"].join(" "),o.setAttribute("aria-label","Dismiss notification"),o.innerHTML='<svg class="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.75 3.75l8.5 8.5"></path><path d="M12.25 3.75l-8.5 8.5"></path></svg>';let d=e.createElement("div");return d.className=["relative","w-full",V,Y].join(" "),d.setAttribute(q,"exit"),d.appendChild(i),i.appendChild(o),{wrapper:d,toast:i,closeButton:o}}function Z(e,t=setTimeout,s=clearTimeout){return{show(i,o={}){if(!i)return;let d=o.type&&O[o.type]?o.type:"info",r=Q(e);if(!r)return;let{wrapper:m,toast:c,closeButton:T}=X(e,i,O[d]);r.appendChild(m),J(e,()=>{m.setAttribute(q,"enter")});let w=typeof o.duration=="number"?o.duration:3500,p=()=>{m.setAttribute(q,"exit");let N=t(()=>{m.parentNode&&m.parentNode.removeChild(m)},200);return T.removeEventListener("click",E),c.removeEventListener("keydown",y),T.removeEventListener("keydown",y),N},E=()=>p(),y=N=>{N.key==="Escape"&&(N.stopPropagation(),p())};T.addEventListener("click",E),c.addEventListener("keydown",y),T.addEventListener("keydown",y);let S=null;return o.sticky||(S=t(()=>{p()},w)),{dismiss(){S&&s(S),p()}}},set(i,o){return typeof o=="string"?this.show(i,{type:o}):this.show(i,o)},info(i,o={}){return this.show(i,{...o,type:"info"})},success(i,o={}){return this.show(i,{...o,type:"success"})},error(i,o={}){return this.show(i,{...o,type:"error"})},warn(i,o={}){return this.show(i,{...o,type:"warn"})}}}function R(e,t=setTimeout,s=clearTimeout){return Z(e,t,s)}var $=[{key:"name",label:"Name",headerClass:"w-full sm:w-1/3 text-left",cellClass:"font-medium text-text truncate"},{key:"progress",label:"Progress",headerClass:"w-24 text-right",cellClass:"tabular-nums text-right",formatter:"progress"},{key:"downloadSpeed",label:"\u2193 Speed",headerClass:"w-24 text-right",cellClass:"tabular-nums text-right",formatter:"bytesPerSecond"},{key:"uploadSpeed",label:"\u2191 Speed",headerClass:"w-24 text-right",cellClass:"tabular-nums text-right",formatter:"bytesPerSecond"},{key:"numPeers",label:"Peers",headerClass:"w-20 text-right",cellClass:"tabular-nums text-right",formatter:"integer"},{key:"ratio",label:"Ratio",headerClass:"w-20 text-right",cellClass:"tabular-nums text-right",formatter:"ratio"}];function ee(e){return e?e.infoHash||e.magnetURI||e.name||String(Math.random()):""}function te(e,t){return!e||!t?!1:e===t||e.magnetURI&&e.magnetURI===t.magnetURI||e.infoHash&&e.infoHash===t.infoHash}function re(e){return typeof e!="number"||Number.isNaN(e)?"":`${(e*100).toFixed(1)}%`}function ne(e){return typeof e!="number"||!Number.isFinite(e)?"0.00":e.toFixed(2)}function oe(e){return typeof e!="number"||!Number.isFinite(e)?"0":Math.max(0,Math.floor(e)).toString()}function ae(e,t){if(typeof t=="function")return t(e,!0)||"";if(typeof e!="number"||Number.isNaN(e)||e<1)return"";let s=["B","kB","MB","GB","TB"],i=Math.min(Math.floor(Math.log(e)/Math.log(1e3)),s.length-1);return`${(e/Math.pow(1e3,i)).toFixed(1)} ${s[i]}/s`}function se(e,t){let s=e.formatter;if(typeof s=="function")return s;let i=t?.[s];if(typeof i=="function")return i;switch(s){case"progress":return re;case"ratio":return ne;case"integer":return oe;case"bytesPerSecond":return o=>ae(o,t?.bytes);default:return o=>o}}function W({documentRef:e=typeof document<"u"?document:null,root:t,onSelect:s,formatters:i={}}={}){if(!e)throw new Error("createTorrentTable requires a document reference");if(!(t instanceof e.defaultView.HTMLElement))throw new Error("createTorrentTable requires a valid root element");let o=e;t.innerHTML="";let d=o.createElement("div");d.className="overflow-hidden rounded-xl border border-border-translucent bg-surface shadow-sm";let r=o.createElement("div");r.className="overflow-x-auto",d.appLine truncated
+var ye=Object.freeze([]);var k=Object.freeze({light:Object.freeze({accent:"#fe0032",accentStrong:"#540011",accentPressed:"#a90021"}),dark:Object.freeze({accent:"#fe0032",accentStrong:"#540011",accentPressed:"#a90021"})});var be=Object.freeze(["watch-history:v2:index"]);var ge=1440*60*1e3;var _e=300*1e3;var F=!!!0;typeof window<"u"&&(window.__BITVID_DEV_MODE__=F);var P=()=>{};function Ae(){return typeof console>"u"||console===null?null:console}function Ce(){let e=Ae();if(!e)return{log:P,info:P,warn:P,error:P};let t=typeof e.log=="function"?e.log.bind(e):P;return{log:typeof e.log=="function"?e.log.bind(e):t,info:typeof e.info=="function"?e.info.bind(e):t,warn:typeof e.warn=="function"?e.warn.bind(e):t,error:typeof e.error=="function"?e.error.bind(e):t}}var S=Ce(),M="[bitvid]";function ee(e){if(e.length===0)return{args:e,force:!1};let t=e[e.length-1];if(t&&typeof t=="object"&&!Array.isArray(t)&&Object.prototype.hasOwnProperty.call(t,"force")){let r=[...e],o=r.pop();return{args:r,force:!!o.force}}return{args:e,force:!1}}var L=Object.freeze({log:(...e)=>{F&&S.log(...e)},info:(...e)=>{F&&S.info(...e)},warn:(...e)=>{F&&S.warn(...e)},error:(...e)=>{F&&S.error(...e)}}),E=Object.freeze({log:(...e)=>{let{args:t,force:r}=ee(e);if(!r&&t.length===0)return;if(r){S.log(M,...t);return}let[o,...n]=t;if(typeof o=="string"&&n.length===0){S.log(`${M} ${o}`);return}o!==void 0&&S.log(M,o)},info:(...e)=>{let{args:t,force:r}=ee(e);if(!r&&t.length===0)return;if(r){S.info(M,...t);return}let[o,...n]=t;if(typeof o=="string"&&n.length===0){S.info(`${M} ${o}`);return}o!==void 0&&S.info(M,o)},warn:(...e)=>{S.warn(M,...e)},error:(...e)=>{S.error(M,...e)}}),te=Object.freeze({dev:L,user:E});function we(e){if(!e||typeof e!="object")return!1;let t=["dev","user"],r=["log","info","warn","error"];return t.every(o=>{let n=e[o];return n&&typeof n=="object"&&r.every(l=>typeof n[l]=="function")})}typeof window<"u"&&(we(window.bitvidLogger)||(window.bitvidLogger=te));Object.freeze(te);var G="bitvid:theme",N="dark",Le=new Set(["light","dark"]),re={dark:"#0f172a",light:"#f8fafc"},ne=["[data-theme-toggle]",'[data-action="toggle-theme"]',".js-theme-toggle","#themeToggle"],xe=Object.freeze({accent:"--color-accent",accentStrong:"--color-accent-strong",accentPressed:"--color-accent-pressed"}),oe=new WeakSet,V=new Set,R=null,ae=!1,I=()=>typeof window<"u"&&typeof document<"u",q=e=>{if(typeof e!="string")return null;let t=e.trim().toLowerCase();return t==="default"||t===""?N:Le.has(t)?t:null},Ie=()=>{if(!I())return null;try{let e=window.localStorage.getItem(G);return q(e)}catch(e){return E.warn("Unable to read stored theme preference:",e),null}},ve=e=>{if(I())try{window.localStorage.setItem(G,e)}catch(t){E.warn("Unable to persist theme preference:",t)}},K=()=>{if(!I())return null;let{documentElement:e}=document;return e instanceof HTMLElement?e:null},Ne=e=>typeof e=="string"?e.trim():"",Oe=(e,t)=>{if(!e)return;let r=k&&typeof k=="object"&&k[t]&&typeof k[t]=="object"?k[t]:null;Object.entries(xe).forEach(([o,n])=>{let l=r?r[o]:null,a=Ne(l);a?e.style.setProperty(n,a):e.style.removeProperty(n)})},Be=e=>{if(!I())return;let t=document.querySelector('meta[name="theme-color"]');if(!t)return;let r=K();if(!r)return;let o="";try{typeof window.getComputedStyle=="function"&&(o=getComputedStyle(r).getPropertyValue("--color-page").trim())}catch(a){E.warn("Unable to compute theme color token:",a)}let n=re[e]||re[N],l=o||n;l&&t.setAttribute("content",l)},se=(e,t)=>{if(!(e instanceof HTMLElement))return;e.dataset.themeState=t,e.setAttribute("aria-pressed",t==="dark"?"true":"false");let r=t==="dark"?"Switch to light theme":"Switch to dark theme";e.setAttribute("aria-label",r),e.setAttribute("title",r);let o=e.querySelector("[data-theme-toggle-label]")||e.querySelector(".sr-only");o&&(o.textContent=r);let n=e.querySelector("[data-theme-toggle-icon]")||e.querySelector('[aria-hidden="true"]');if(n){let l=typeof SVGElement<"u"?SVGElement:null;if(l&&n instanceof l||n instanceof Element&&!!n.querySelector("svg"))n instanceof Element&&n.setAttribute("data-theme-icon-state",t);else{let p=e.dataset.iconLight||"\u2600\uFE0F",d=e.dataset.iconDark||"\u{1F319}";n.textContent=t==="dark"?p:d}}},Me=()=>{if(!I()){V.clear();return}V.forEach(e=>{(!(e instanceof HTMLElement)||!document.contains(e))&&V.delete(e)})},He=e=>{Me(),V.forEach(t=>{se(t,e)})},Re=e=>{!(e instanceof HTMLElement)||oe.has(e)||(e.addEventListener("click",t=>{t.preventDefault(),ke(R==="dark"?"light":"dark")}),e.dataset.themeToggleBound="true",oe.add(e))},De=(e=document)=>{if(!I())return[];let t=new Set,r=e&&typeof e.querySelectorAll=="function"?e:document;return ne.forEach(o=>{try{r.querySelectorAll(o).forEach(n=>{n instanceof HTMLElement&&t.add(n)})}catch(n){E.warn(`Invalid selector for theme toggle: ${o}`,n)}}),e instanceof HTMLElement&&ne.forEach(o=>{e.matches(o)&&t.add(e)}),Array.from(t)},X=(e,{persist:t=!0}={})=>{let r=q(e)||N;R=r;let o=K();return o&&(o.dataset.theme=r,Oe(o,r)),t&&ve(r),Be(r),He(r),r},ke=e=>I()?X(e,{persist:Line truncated

torrent/src/beacon-vendor.js

@@ -1,4 +1,5 @@
 import { devLogger, userLogger } from "../js/utils/logger.js";
+import { initThemeController } from "../../js/themeController.js";
 import { createBeaconApp } from "../app.js";
 
 function resolveGlobalScope() {
@@ -21,6 +22,16 @@ function resolveWebTorrent() {
 
 let appInstance = null;
 
+const initializeThemeController = () => {
+  try {
+    initThemeController();
+  } catch (error) {
+    devLogger.warn("[beacon] Failed to initialize theme controller", error);
+  }
+};
+
+initializeThemeController();
+
 function mountBeaconApp() {
   if (appInstance) {
     devLogger.info("[beacon] Reusing existing beacon app instance");