[6.x] Themeable global header (#12214)

* wip

* Support same button variants on Select/Combobox, override just the Global Site Selector style for theming

* Support a dark global header color option too

* yeet this css

Author: jackmcdade

resources/css/components/global-header.css

@@ -16,7 +16,6 @@
 @import './components/blueprints.css';
 @import './components/configure.css';
 @import './components/focal-point.css';
-@import './components/global-header.css';
 @import './components/index-fields.css';
 @import './components/notifications.css';
 @import './components/page-tree.css';

resources/css/cp.css

@@ -25,7 +25,8 @@
     --color-content-border: var(--theme-color-content-border);
     --color-dark-content-bg: var(--theme-color-dark-content-bg);
     --color-dark-content-border: var(--theme-color-dark-content-border);
-    --color-global-header-bg: var(--theme-color-gray-800);
+    --color-global-header-bg: var(--theme-color-global-header-bg);
+    --color-dark-global-header-bg: var(--theme-color-dark-global-header-bg);
     --color-progress-bar: var(--theme-color-progress-bar);
     --color-ui-accent: var(--theme-color-ui-accent);
     --color-dark-ui-accent: var(--theme-color-dark-ui-accent);

resources/css/ui.css

@@ -1,24 +1,15 @@
 <template>
-    <div class="site-selector flex h-full items-center dark:border-dark-900">
+    <div class="flex h-full items-center" data-ui-global-site-selector>
         <Select
+            :model-value="active"
             :options="sites"
-            option-label="name"
-            option-value="handle"
             :searchable="false"
-            :model-value="active"
-            :button-appearance="false"
             @update:model-value="selected"
-        >
-            <template #selected-option="{ option }">
-                <div class="flex items-center gap-2 text-sm font-medium text-[0.8125rem] text-gray-300 hover:text-white">
-                    <ui-icon name="globe-arrow" class="size-4" />
-                    <div class="whitespace-nowrap">{{ __(option.name) }}</div>
-                </div>
-            </template>
-            <template #option="option">
-                <div class="whitespace-nowrap" :class="{ 'text-gray-500': handle === active }">{{ __(option.name) }}</div>
-            </template>
-        </Select>
+            option-label="name"
+            option-value="handle"
+            size="sm"
+            icon="globe-arrow"
+        />
     </div>
 </template>
 
@@ -51,3 +42,10 @@ export default {
     },
 };
 </script>
+
+<style>
+[data-ui-global-site-selector] [data-ui-combobox-trigger] {
+    background: rgba(0,0,0,.5) !important;
+    border: transparent !important;
+}
+</style>

resources/js/components/GlobalSiteSelector.vue

@@ -238,10 +238,16 @@ const modalClasses = cva({
 <template>
     <DialogRoot v-model:open="open" :modal="true">
         <DialogTrigger>
-            <div class="data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-2 rounded-md [button:has(>&)]:rounded-md bg-gray-900 text-xs text-gray-400 shadow-[0_-1px_rgba(255,255,255,0.06),0_4px_8px_rgba(0,0,0,0.05),0_1px_6px_-4px_#000] ring-1 ring-gray-900/10 outline-none hover:ring-white/10 md:w-32 md:py-[calc(5/16*1rem)] md:ps-2 md:pe-1.5 md:shadow-[0_1px_5px_-4px_rgba(19,19,22,0.4),0_2px_5px_rgba(32,42,54,0.06)]">
-                <Icon name="magnifying-glass" class="size-5 flex-none text-gray-600" />
+            <div class="
+                data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-1.5 group h-8
+                rounded-lg [button:has(>&)]:rounded-md bg-black/40 text-xs text-white/60 outline-none
+                border-b border-b-white/20 inset-shadow-sm inset-shadow-black/20
+                md:w-32 md:py-[calc(5/16*1rem)] md:px-2
+                hover:bg-black/45 hover:text-white/70
+            ">
+                <Icon name="magnifying-glass" class="size-5 flex-none text-white/50 group-hover:text-white/70" />
                 <span class="sr-only leading-none md:not-sr-only st-text-trim-cap">Search</span>
-                <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-gray-400 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
+                <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-white/60 group-hover:text-white/70 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
                     <kbd class="font-sans">⌘ </kbd><kbd class="font-sans">K</kbd>
                 </kbd>
             </div>

resources/js/components/command-palette/CommandPalette.vue

@@ -26,7 +26,7 @@ const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) |
 
 const buttonClasses = computed(() => {
     const classes = cva({
-        base: 'inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-600 dark:[&_svg]:text-gray-500',
+        base: 'inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white',
         variants: {
             variant: {
                 default: [
@@ -37,9 +37,9 @@ const buttonClasses = computed(() => {
                     'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 [&_svg]:text-white [&_svg]:opacity-60',
                 ],
                 danger: 'bg-linear-to-b from-red-600/90 to-red-600 hover:bg-red-600/90 text-white border border-red-600 inset-shadow-2xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-red-200',
-                filled: 'bg-gray-100 hover:bg-gray-200 hover:text-gray-900 dark:hover:text-white dark:bg-gray-700/80 dark:hover:bg-gray-700 [&_svg]:text-gray-700 dark:[&_svg]:text-gray-300',
-                ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800/50 dark:hover:text-gray-200',
-                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-700/80 dark:hover:text-gray-200 [&_svg]:text-gray-400',
+                filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
+                ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200',
+                subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 [&_svg]:opacity-40',
             },
             size: {
                 lg: 'px-6 h-12 text-base gap-2 rounded-lg text-base',