[6.x] Refactor CSS color variables (#13008)

andjsch · JayGeorge · jasonvarga · web-flow · commit 971b35b45b00 · 2025-11-14T11:25:40.000-05:00
Co-authored-by: Jay George &lt;contact@jaygeorge.co.uk&gt;
Co-authored-by: Jason Varga &lt;jason@pixelfear.com&gt;
diff --git a/packages/ui/src/Checkbox/Item.vue b/packages/ui/src/Checkbox/Item.vue
@@ -35,8 +35,8 @@ const checkboxClasses = computed(() => {
             'shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 bg-white',
             'dark:bg-gray-500 dark:border-gray-900',
             'data-[state=checked]:border-ui-accent-bg data-[state=checked]:bg-ui-accent-bg',
-            'dark:border-none dark:data-[state=checked]:bg-dark-ui-accent-bg dark:data-[state=checked]:border-dark-ui-accent-bg',
-            'dark:data-[disabled]:bg-dark-ui-accent-bg/60 dark:data-[disabled]:border-dark-ui-accent-bg/70',
+            'dark:border-none',
+            'dark:data-[disabled]:bg-ui-accent-bg/60 dark:data-[disabled]:border-ui-accent-bg/70',
             'dark:data-[disabled]:text-gray-400 dark:data-[disabled]:cursor-not-allowed',
             'shrink-0'
         ],
diff --git a/packages/ui/src/Radio/Item.vue b/packages/ui/src/Radio/Item.vue
@@ -28,7 +28,7 @@ const id = useId();
                 class="
                     relative flex h-full w-full items-center justify-center rounded-[50%]
                     border border-ui-accent-bg after:block after:h-[0.5rem] after:w-[0.5rem] after:rounded-[50%]
-                    after:bg-ui-accent-bg after:content-[''] dark:border-none dark:after:bg-dark-ui-accent-bg
+                    after:bg-ui-accent-bg after:content-[''] dark:border-none
                 "
             />
         </RadioGroupItem>
diff --git a/packages/ui/src/Switch.vue b/packages/ui/src/Switch.vue
@@ -17,8 +17,7 @@ const switchRootClasses = cva({
         'relative flex rounded-full shrink-0 border-2',
         'transition-colors cursor-pointer',
         'data-[state=checked]:shadow-inner data-[state=checked]:border-switch-bg data-[state=checked]:bg-switch-bg',
-        'dark:data-[state=checked]:border-dark-switch-bg dark:data-[state=checked]:bg-dark-switch-bg',
-        'data-[state=unchecked]:border-transparent dark:data-[state=checked]:border-dark-switch-bg dark:[.publish-fields_&]:data-[state=checked]:border-gray-800',
+        'data-[state=unchecked]:border-transparent dark:[.publish-fields_&]:data-[state=checked]:border-gray-800',
         'data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700'
     ],
     variants: {
diff --git a/packages/ui/src/ui.css b/packages/ui/src/ui.css
@@ -21,21 +21,13 @@
 
     --color-body-bg: var(--theme-color-body-bg);
     --color-body-border: var(--theme-color-body-border);
-    --color-dark-body-bg: var(--theme-color-dark-body-bg);
-    --color-dark-body-border: var(--theme-color-dark-body-border);
     --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-global-header-bg);
-    --color-dark-global-header-bg: var(--theme-color-dark-global-header-bg);
     --color-progress-bar: var(--theme-color-progress-bar);
     --color-focus-outline: var(--theme-color-focus-outline);
     --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
-    --color-dark-ui-accent-bg: var(--theme-color-dark-ui-accent-bg);
-    --color-dark-ui-accent-text: var(--theme-color-dark-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
-    --color-dark-switch-bg: var(--theme-color-dark-switch-bg);
 
     /* Temp */
     --color-dark-100: #dfe1e5;
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -63,7 +63,7 @@
 
 @layer components {
     .content-card {
-        @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:bg-dark-content-bg dark:border-y-0 dark:border-r-0 border-content-border dark:border-dark-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;
+        @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:border-y-0 dark:border-r-0 border-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;
         background: var(--theme-color-content-bg);
         .nav-closed & {
             @apply sm:rounded-xl;
@@ -72,7 +72,4 @@
             }
         }
     }
-    .dark .content-card {
-        background: var(--theme-color-dark-content-bg);
-    }
 }
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
@@ -207,7 +207,7 @@
     }
 
     .bard-footer-toolbar {
-        @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-800 dark:text-dark-175;
+        @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400;
         padding: 8px 12px;
 
         .bard-fullscreen & {
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
@@ -64,7 +64,7 @@ Table Fieldtype
         @apply outline-hidden dark:bg-gray-900;
 
         th {
-            @apply bg-gray-50 p-2 text-sm font-medium text-gray-700 text-start border-r border-b border-gray-300 dark:border-dark-600 dark:bg-gray-925 dark:text-gray-100 overflow-hidden;
+            @apply bg-gray-50 p-2 text-sm font-medium text-gray-700 text-start border-r border-b border-gray-300 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100 overflow-hidden;
 
             tr:first-child & {
                 @apply rounded-tl-lg;
@@ -101,7 +101,7 @@ Table Fieldtype
         }
 
         td {
-            @apply border-b p-0 dark:border-dark-600 border-e;
+            @apply border-b p-0 dark:border-gray-700 border-e;
 
             &:first-child.grid-cell {
                 @apply ps-4;
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
@@ -9,7 +9,7 @@
         @apply block h-full bg-white px-3 py-2 text-gray-900 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-150 ltr:border-r rtl:border-l;
 
         &:hover {
-            @apply bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-dark-100;
+            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-dark-100;
         }
     }
 
@@ -26,7 +26,7 @@
     }
 
     li.current a {
-        @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-dark-700 dark:text-dark-blue-100;
+        @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-gray-850 dark:text-dark-blue-100;
     }
 }
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
@@ -111,7 +111,7 @@ Here flexbox is much better suited to create a layout that grows to fill space.
 }
 
 .publish-section-header {
-    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-dark-700;
+    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-gray-850;
 }
 
 .publish-section-header-inner {
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
@@ -115,7 +115,7 @@ code:not(pre *) {
     color: hsl(from var(--theme-color-ui-accent-bg) h s 30);
     background: hsl(from var(--theme-color-ui-accent-bg) h s l / 0.08);
     &:where(.dark, .dark *) {
-        color: hsl(from var(--theme-color-dark-ui-accent-bg) h s 90);
-        background: hsl(from var(--theme-color-dark-ui-accent-bg) h s 10 / 0.5);
+        color: hsl(from var(--theme-color-ui-accent-bg) h s 90);
+        background: hsl(from var(--theme-color-ui-accent-bg) h s 10 / 0.5);
     }
 }
diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
@@ -101,7 +101,7 @@
                         @click.native.stop="$emit('edit-asset', asset)"
                     />
                     <button
-                        class="cursor-pointer normal-nums select-none group-hover:text-ui-accent-text/80 dark:group-hover:text-dark-ui-accent-text text-start"
+                        class="cursor-pointer normal-nums select-none group-hover:text-ui-accent-text/80 dark:group-hover:text-ui-accent-text text-start"
                         @click="$emit('edit-asset', asset)"
                     >
                         {{ isSearching ? asset.path : asset.basename }}
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
@@ -17,7 +17,7 @@
                         v-tooltip.right="__('Open in a new window')"
                         :aria-label="__('Open in a new window')"
                     >
-                        <ui-icon name="folder-photos" class="size-5 group-hover:text-ui-accent-text/80 dark:group-hover:text-dark-ui-accent-text/80" />
+                        <ui-icon name="folder-photos" class="size-5 group-hover:text-ui-accent-text/80" />
                         <span class="text-sm group-hover:text-ui-accent-text/80 dark:text-gray-400 dark:group-hover:text-gray-200">
                             {{ asset.path }}
                         </span>
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
@@ -44,7 +44,7 @@
                 </AssetBrowser>
             </div>
 
-            <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-dark-700 dark:border-dark-600 px-4 py-2 sm:p-4">
+            <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-gray-850 dark:border-gray-700 px-4 py-2 sm:p-4">
                 <div
                     class="dark:text-gray-200 text-sm text-gray-700"
                     v-text="
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
@@ -6,10 +6,10 @@
                     <ui-icon name="handles" class="blueprint-drag-handle size-4 cursor-grab text-gray-300 dark:text-gray-600" />
                     <div class="flex flex-1 items-center justify-between">
                         <div class="flex flex-1 items-center py-2">
-                            <ui-icon class="size-4 me-2 text-ui-accent-text/80 dark:text-dark-ui-accent-text/80" name="fieldsets" />
+                            <ui-icon class="size-4 me-2 text-ui-accent-text/80" name="fieldsets" />
                             <div class="flex items-center gap-2">
                             <!-- @TODO: Show fieldset.title -->
-                                <button class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80" v-text="field.fieldset" @click="$emit('edit')" />
+                                <button class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80" v-text="field.fieldset" @click="$emit('edit')" />
                                 <ui-icon name="link" class="text-gray-400" />
                                 <span class="text-gray-500 font-mono text-2xs" v-text="__('Fieldset')" />
                             </div>
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
@@ -10,7 +10,7 @@
                         v-tooltip="tooltipText"
                     />
                     <div class="flex items-center gap-2">
-                        <button class="cursor-pointer overflow-hidden text-ellipsis text-sm hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
+                        <button class="cursor-pointer overflow-hidden text-ellipsis text-sm hover:text-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
                         <ui-icon v-if="isReferenceField" name="link" class="text-gray-400" />
                         <span v-if="isReferenceField" class="text-gray-500 font-mono text-2xs cursor-help" v-text="__('Field')" v-tooltip="__('Imported from: :reference', { reference: field.field_reference })" />
                     </div>
diff --git a/resources/js/components/entries/calendar/Month.vue b/resources/js/components/entries/calendar/Month.vue
@@ -50,7 +50,7 @@ const dateNumberClasses = (weekDate, selected, today, outsideView) => ({
     'text-gray-400 dark:text-gray-600': outsideView,
     'text-gray-900 dark:text-white': !outsideView,
     'text-white bg-blue-600': props.selectedDate && props.selectedDate.toString() === weekDate.toString(),
-    'text-ui-accent-text dark:text-dark-ui-accent-text': today
+    'text-ui-accent-text': today
 });
 
 const entryStatusClasses = (status) => ({
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
@@ -22,7 +22,7 @@
                 <a :href="laravelDocsLink" target="_blank">{{ __('Learn more') }}</a>
                 <span v-if="helpBlock" class="italic text-gray-500 ltr:float-right rtl:float-left">
                     {{ __('Example') }}:
-                    <span class="italic text-ui-accent-text dark:text-dark-ui-accent-text">{{ helpBlock }}</span>
+                    <span class="italic text-ui-accent-text">{{ helpBlock }}</span>
                 </span>
             </Description>
 
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -102,7 +102,7 @@
                         @dragstart="$emit('focus')"
                     >
                         <div
-                            class="bg-white relative grid gap-4 2xl:gap-10 p-3 relative rounded-xl border border-gray-300 border-t-0 rounded-t-none dark:bg-gray-850 dark:border-dark-500"
+                            class="bg-white relative grid gap-4 2xl:gap-10 p-3 relative rounded-xl border border-gray-300 border-t-0 rounded-t-none dark:bg-gray-850 dark:border-gray-700"
                             :class="{ 'rounded-t-none': !isReadOnly && (showPicker || uploads.length) }"
                             ref="assets"
                             style="grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));"
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -2,7 +2,7 @@
     <set-picker :enabled="enabled" :sets="groups" :align="variant === 'between' ? 'center' : 'start'" @added="addSet">
         <template #trigger>
             <div class="flex relative pt-2" :class="{ 'pt-6': showConnector }" v-if="variant === 'button'">
-                <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-dark-700" />
+                <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
                 <Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative z-2" />
             </div>
             <div
@@ -12,7 +12,7 @@
             >
                 <div
                     v-if="showConnector"
-                    class="absolute group-hover:opacity-0 transition-opacity delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-dark-700"
+                    class="absolute group-hover:opacity-0 transition-opacity delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
                     :class="isFirst ? 'h-[50%] top-[50%] opacity-50' : 'h-full opacity-100'"
                 />
                 <button class="w-full absolute inset-0 h-full opacity-0 group-hover:opacity-100 transition-opacity delay-10 duration-250 cursor-pointer">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -16,7 +16,7 @@
                         @close="toggleFullscreen"
                     />
 
-                    <section :class="{ 'dark:bg-dark-700 mt-14 bg-gray-200 p-4': fullScreenMode }">
+                    <section :class="{ 'dark:bg-gray-850 mt-14 bg-gray-200 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
                             :vertical="true"
diff --git a/resources/js/components/global-header/Header.vue b/resources/js/components/global-header/Header.vue
@@ -8,7 +8,7 @@ import UserDropdown from './UserDropdown.vue';
 </script>
 
 <template>
-    <header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-global-header)">
+    <header class="h-14 bg-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-global-header)">
         <a class="c-skip-link z-(--z-index-global-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
             {{ __('Skip to sidebar') }}
         </a>
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
@@ -66,7 +66,7 @@ function submit() {
     <Modal ref="modal" :title="__(title)" :open="modalOpen" @update:open="updateModalOpen">
         <div
             v-if="busy"
-            class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-dark-700"
+            class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-gray-850"
         >
             <Icon name="loading" />
         </div>
diff --git a/resources/js/components/revision-history/Revision.vue b/resources/js/components/revision-history/Revision.vue
@@ -4,7 +4,7 @@
         :class="{
             'status-working-copy': revision.action === 'working',
             'status-published': revision.attributes.published,
-            'border border-ui-accent-bg dark:border-dark-ui-accent-bg/90 rounded-lg py-2.5 bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_s_97)] dark:bg-[hsl(from_var(--theme-color-dark-ui-accent-bg)_h_40_20)]': revision.attributes.current,
+            'border border-ui-accent-bg dark:border-ui-accent-bg/90 rounded-lg py-2.5 bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_s_97)] dark:bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_40_20)]': revision.attributes.current,
             'bg-gradient-to-b from-transparent from-60% to-white dark:to-gray-800 -mt-1': isLast,
         }"
         v-tooltip="revision.attributes.current ? __('Current Revision') : null"
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
@@ -37,9 +37,9 @@
                 <div v-if="page.collection && editable" class="flex items-center gap-2">
                     <Icon name="navigation" class="size-3.5 text-gray-500" />
                     <div>
-                        <Link :href="page.collection.create_url" v-text="__('Add')" class="hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text" />
+                        <Link :href="page.collection.create_url" v-text="__('Add')" class="hover:text-ui-accent-text" />
                         <span class="mx-1 text-gray-400 dark:text-gray-500">/</span>
-                        <Link :href="page.collection.edit_url" v-text="__('Edit')" class="hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text" />
+                        <Link :href="page.collection.edit_url" v-text="__('Edit')" class="hover:text-ui-accent-text" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
@@ -1,6 +1,6 @@
 <template>
     <stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="flex h-full flex-col bg-gray-100 dark:bg-dark-700">
+        <div class="flex h-full flex-col bg-gray-100 dark:bg-gray-850">
             <header
                 class="flex items-center justify-between border-b bg-white py-2 text-lg font-medium shadow-md dark:border-dark-950 dark:bg-dark-600 ltr:pl-6 ltr:pr-3 rtl:pl-3 rtl:pr-6"
             >
@@ -10,7 +10,7 @@
 
             <div v-if="loading" class="relative flex-1 overflow-auto">
                 <div
-                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 text-center dark:bg-dark-700"
+                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 text-center dark:bg-gray-850"
                 >
                     <Icon name="loading" />
                 </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
@@ -105,7 +105,7 @@ onMounted(() => {
                     <template #actions>
                         <Link
                             :href="forgotPasswordUrl"
-                            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+                            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
                             tabindex="6"
                             v-text="__('Forgot password?')"
                         />
diff --git a/resources/js/pages/auth/passwords/Email.vue b/resources/js/pages/auth/passwords/Email.vue
@@ -47,7 +47,7 @@ defineProps(['action', 'loginUrl']);
     <div class="mt-4 w-full text-center dark:mt-6">
         <Link
             :href="loginUrl"
-            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
             v-text="__('I remember my password')"
         />
     </div>
diff --git a/resources/js/pages/auth/passwords/Reset.vue b/resources/js/pages/auth/passwords/Reset.vue
@@ -68,7 +68,7 @@ const submit = () => {
     <div class="mt-4 w-full text-center dark:mt-6">
         <Link
             :href="loginUrl"
-            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
             v-text="__('Back to login')"
         />
     </div>
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
diff --git a/src/CP/Color.php b/src/CP/Color.php
diff --git a/tests/CP/ColorTest.php b/tests/CP/ColorTest.php

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ const id = useId();`
`28`	`28`	`class="`
`29`	`29`	`relative flex h-full w-full items-center justify-center rounded-[50%]`
`30`	`30`	`border border-ui-accent-bg after:block after:h-[0.5rem] after:w-[0.5rem] after:rounded-[50%]`
`31`		`- after:bg-ui-accent-bg after:content-[''] dark:border-none dark:after:bg-dark-ui-accent-bg`
	`31`	`+ after:bg-ui-accent-bg after:content-[''] dark:border-none`
`32`	`32`	`"`
`33`	`33`	`/>`
`34`	`34`	`</RadioGroupItem>`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`
`64`	`64`	`@layer components {`
`65`	`65`	`.content-card {`
`66`		`- @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:bg-dark-content-bg dark:border-y-0 dark:border-r-0 border-content-border dark:border-dark-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;`
	`66`	`+ @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:border-y-0 dark:border-r-0 border-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;`
`67`	`67`	`background: var(--theme-color-content-bg);`
`68`	`68`	`.nav-closed & {`
`69`	`69`	`@apply sm:rounded-xl;`
`@@ -72,7 +72,4 @@`
`72`	`72`	`}`
`73`	`73`	`}`
`74`	`74`	`}`
`75`		`- .dark .content-card {`
`76`		`- background: var(--theme-color-dark-content-bg);`
`77`		`- }`
`78`	`75`	`}`
Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@`
`207`	`207`	`}`
`208`	`208`
`209`	`209`	`.bard-footer-toolbar {`
`210`		`- @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-800 dark:text-dark-175;`
	`210`	`+ @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400;`
`211`	`211`	`padding: 8px 12px;`
`212`	`212`
`213`	`213`	`.bard-fullscreen & {`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`@apply block h-full bg-white px-3 py-2 text-gray-900 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-150 ltr:border-r rtl:border-l;`
`10`	`10`
`11`	`11`	`&:hover {`
`12`		`- @apply bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-dark-100;`
	`12`	`+ @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-dark-100;`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`li.current a {`
`29`		`- @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-dark-700 dark:text-dark-blue-100;`
	`29`	`+ @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-gray-850 dark:text-dark-blue-100;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,7 @@ Here flexbox is much better suited to create a layout that grows to fill space.`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`.publish-section-header {`
`114`		`- @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-dark-700;`
	`114`	`+ @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-gray-850;`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`.publish-section-header-inner {`
Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@ code:not(pre *) {`
`115`	`115`	`color: hsl(from var(--theme-color-ui-accent-bg) h s 30);`
`116`	`116`	`background: hsl(from var(--theme-color-ui-accent-bg) h s l / 0.08);`
`117`	`117`	`&:where(.dark, .dark *) {`
`118`		`- color: hsl(from var(--theme-color-dark-ui-accent-bg) h s 90);`
`119`		`- background: hsl(from var(--theme-color-dark-ui-accent-bg) h s 10 / 0.5);`
	`118`	`+ color: hsl(from var(--theme-color-ui-accent-bg) h s 90);`
	`119`	`+ background: hsl(from var(--theme-color-ui-accent-bg) h s 10 / 0.5);`
`120`	`120`	`}`
`121`	`121`	`}`