[6.x] Make more colors themeable

resources/css/components/assets.css

@@ -33,16 +33,16 @@
     background: rgba(255, 255, 255, 0.9);
 
     .dark & {
-        @apply bg-dark-900/90;
-        border-color: var(--color-dark-600);
+        @apply bg-gray-900/90;
+        border-color: var(--color-gray-700);
     }
 }
 
 /* Table Listing
    ========================================================================== */
 
 .asset-table-listing {
-    @apply relative overflow-hidden rounded-sm border dark:border-dark-900;
+    @apply relative overflow-hidden rounded-sm border dark:border-gray-900;
 
     table {
         @apply m-0 w-full select-none rounded-b border-none;
@@ -52,7 +52,7 @@
     }
 
     tbody tr:not(:last-child) {
-        @apply border-b dark:border-dark-900;
+        @apply border-b dark:border-gray-900;
     }
 
     tbody tr td {

resources/css/components/blueprints.css

@@ -28,10 +28,10 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-dark-200 dark:text-dark-150;
+    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-gray-500 dark:text-gray-300;
 
     &:hover {
-        @apply border-gray text-gray-925 dark:border-dark-175 dark:text-dark-100;
+        @apply border-gray text-gray-925 dark:border-gray-400 dark:text-gray-200;
     }
 
     .blueprint-section-draggable-zone {

resources/css/components/fieldtypes/assets.css

@@ -7,7 +7,7 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex flex-wrap items-center rounded-sm border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-650;
+    @apply flex flex-wrap items-center rounded-sm border bg-gray-200 px-4 py-2 dark:border-gray-900 dark:bg-gray-800;
 
     &.is-expanded {
         @apply rounded-b-none border-b-0;

resources/css/components/fieldtypes/bard.css

@@ -471,7 +471,7 @@
             .tableWrapper &,
             blockquote > .tableWrapper &,
             :is(ol, ul) li > .tableWrapper & {
-                @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-dark-500 border-collapse table-fixed;
+                @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-gray-600 border-collapse table-fixed;
 
                 th {
                     @apply bg-gray-200 font-bold dark:bg-gray-600 text-start;

resources/css/components/fieldtypes/grid.css

@@ -2,7 +2,7 @@
 =================================================== */
 @layer ui {
     .grid-table {
-        @apply bg-white dark:bg-gray-900 relative w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
+        @apply bg-white dark:bg-gray-900 relative w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-gray-300 text-start;
         border-collapse: separate;
         border-spacing: 0;
         table-layout: auto;

resources/css/components/fieldtypes/markdown.css

@@ -19,7 +19,7 @@
   ========================================================================== */
 
 .markdown-fieldtype .cm-header {
-    @apply text-gray-900 dark:text-dark-150;
+    @apply text-gray-900 dark:text-gray-300;
 
     &.cm-header-1 {
         @apply text-lg;
@@ -35,11 +35,11 @@
 }
 
 .markdown-fieldtype .cm-quote {
-    @apply text-sm italic text-gray-900 dark:text-dark-150;
+    @apply text-sm italic text-gray-900 dark:text-gray-300;
 }
 
 .markdown-fieldtype .cm-variable-2 {
-    @apply text-gray-900 dark:text-dark-150;
+    @apply text-gray-900 dark:text-gray-300;
 }
 
 .markdown-fieldtype .CodeMirror {

resources/css/components/fieldtypes/width.css

@@ -5,18 +5,18 @@
     @apply relative flex h-5 w-12 cursor-pointer;
 
     .field-width-label {
-        @apply pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center text-4xs font-bold text-gray-700 dark:text-dark-150;
+        @apply pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center text-4xs font-bold text-gray-700 dark:text-gray-300;
     }
 
     .field-width-notch {
-        @apply relative flex-1 border border-gray-400 dark:border-dark-300 ltr:border-l-0 rtl:border-r-0;
+        @apply relative flex-1 border border-gray-400 dark:border-gray-600 ltr:border-l-0 rtl:border-r-0;
 
         &:first-of-type {
             @apply ltr:rounded-l-sm ltr:border-l rtl:rounded-r-sm rtl:border-r;
         }
 
         &.filled {
-            @apply -my-px border-gray-400 bg-white dark:border-dark-400 dark:bg-dark-575 ltr:border-r-0 ltr:pr-px rtl:border-l-0 rtl:pl-px;
+            @apply -my-px border-gray-400 bg-white dark:border-gray-600 dark:bg-gray-700 ltr:border-r-0 ltr:pr-px rtl:border-l-0 rtl:pl-px;
         }
 
         &.selected {
@@ -32,13 +32,13 @@
     @apply mt-px h-9 w-16;
 
     .field-width-notch {
-        @apply border-y-gray-500 border-r-gray-400 bg-gray-200 dark:border-dark-700 dark:border-y-dark-750 dark:bg-dark-550;
+        @apply border-y-gray-500 border-r-gray-400 bg-gray-200 dark:border-gray-800 dark:border-y-gray-800 dark:bg-gray-700;
         &:last-child {
-            @apply border-r-gray-500 dark:border-dark-750 ltr:rounded-r-sm rtl:rounded-l-sm;
+            @apply border-r-gray-500 dark:border-gray-800 ltr:rounded-r-sm rtl:rounded-l-sm;
         }
 
         &.filled {
-            @apply border-gray-500 bg-linear-to-b from-white to-gray-100 dark:border-dark-750 dark:from-dark-300 dark:to-dark-400;
+            @apply border-gray-500 bg-linear-to-b from-white to-gray-100 dark:border-gray-800 dark:from-gray-600 dark:to-gray-600;
         }
     }
 

resources/css/components/index-fields.css

@@ -23,7 +23,7 @@
 }
 
 .status-index-field {
-    @apply inline-block shrink justify-center rounded-full bg-gray-200/55 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-dark-150;
+    @apply inline-block shrink justify-center rounded-full bg-gray-200/55 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-gray-300;
 
     &.status-published:not(.status-private) {
         @apply bg-green-200 text-green-900 dark:bg-green-300/6 dark:text-green-300;
@@ -40,6 +40,6 @@
 
     .role-index-field-item,
     .groups-index-field-item {
-        @apply mb-1 line-clamp-1 inline-block rounded-sm border bg-gray-100 px-1 text-2xs dark:border-dark-900 dark:bg-gray-700;
+        @apply mb-1 line-clamp-1 inline-block rounded-sm border bg-gray-100 px-1 text-2xs dark:border-gray-900 dark:bg-gray-700;
     }
 }

resources/css/components/notifications.css

@@ -13,7 +13,7 @@
 }
 
 .toasted-container .toasted.statamic {
-    @apply mt-4 rounded-xl bg-white p-0 text-base text-gray-900 shadow dark:bg-dark-900 dark:text-dark-100;
+    @apply mt-4 rounded-xl bg-white p-0 text-base text-gray-900 shadow dark:bg-gray-900 dark:text-gray-200;
     height: 45px;
 
     i {
@@ -29,15 +29,15 @@
     }
 
     &.default i {
-        @apply bg-gray-800 dark:bg-dark-900;
+        @apply bg-gray-800 dark:bg-gray-900;
     }
 
     .action {
-        @apply m-0 flex h-full items-center px-4 text-xl font-normal text-gray-600 dark:text-dark-150 ms-2 opacity-50;
+        @apply m-0 flex h-full items-center px-4 text-xl font-normal text-gray-600 dark:text-gray-300 ms-2 opacity-50;
         /* Compensate for the "x" button being a slightly bigger font-size */
         transform: translateY(-1.5px);
         &:hover {
-            @apply text-gray-900 no-underline dark:text-dark-100;
+            @apply text-gray-900 no-underline dark:text-gray-200;
         }
     }
 }

resources/css/components/pagination.css

@@ -6,15 +6,15 @@
     @apply flex list-none items-center justify-center overflow-hidden rounded-sm p-0 shadow dark:shadow-lg;
 
     li a {
-        @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;
+        @apply block h-full bg-white px-3 py-2 text-gray-900 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-300 ltr:border-r rtl:border-l;
 
         &:hover {
-            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-dark-100;
+            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-gray-200;
         }
     }
 
     li > .unclickable {
-        @apply block h-full bg-white px-3 py-2 text-gray-500 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-200 ltr:border-r rtl:border-l;
+        @apply block h-full bg-white px-3 py-2 text-gray-500 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-500 ltr:border-r rtl:border-l;
 
         &:hover {
             cursor: text;

resources/css/components/popover.css

@@ -55,12 +55,12 @@
 }
 
 .rotating-dots-button {
-    @apply flex items-center justify-center rounded-full text-gray-700 dark:text-dark-150;
+    @apply flex items-center justify-center rounded-full text-gray-700 dark:text-gray-300;
     height: 20px;
     width: 20px;
 
     &:hover {
-        @apply text-gray-925 dark:text-dark-100;
+        @apply text-gray-925 dark:text-gray-200;
     }
 
     &:focus {

resources/css/components/preview.css

@@ -5,7 +5,7 @@
 .live-preview-header {
     @apply 
         relative flex h-13 items-center justify-between py-2 shadow-md ps-7 pe-4
-        bg-white dark:bg-dark-800 border-b border-gray-300 dark:border-gray-700
+        bg-white dark:bg-gray-850 border-b border-gray-300 dark:border-gray-700
     ;
     z-index: 2;
 }
@@ -16,7 +16,7 @@
 }
 
 .live-preview-editor {
-    @apply relative flex h-full bg-white dark:bg-dark-800;
+    @apply relative flex h-full bg-white dark:bg-gray-850;
     z-index: 3;
 }
 
@@ -35,7 +35,7 @@
 }
 
 .live-preview .tabs-container {
-    @apply mb-0 bg-gray-300 dark:bg-dark-550;
+    @apply mb-0 bg-gray-300 dark:bg-gray-700;
     @apply @4xl/live-preview:mb-6;
 }
 

resources/css/components/publish.css

@@ -120,7 +120,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-gray-850;
+    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-gray-900 dark:bg-gray-850;
 }
 
 .publish-section-header-inner {

resources/css/components/tabs.css

@@ -3,11 +3,11 @@
    ========================================================================== */
 
 .tabs-container {
-    @apply relative mb-6 flex w-full border-b text-sm dark:border-dark-500;
+    @apply relative mb-6 flex w-full border-b text-sm dark:border-gray-600;
 
     .fade-left,
     .fade-right {
-        @apply pointer-events-none absolute inset-y-0 z-2 w-4 from-gray-300 dark:from-dark-800;
+        @apply pointer-events-none absolute inset-y-0 z-2 w-4 from-gray-300 dark:from-gray-850;
     }
 
     .fade-left {
@@ -21,7 +21,7 @@
 
 .card .tabs-container .fade-left,
 .card .tabs-container .fade-right {
-    @apply from-white dark:from-dark-600;
+    @apply from-white dark:from-gray-700;
 }
 
 .tabs {
@@ -32,9 +32,9 @@
 }
 
 .tab-button {
-    @apply flex shrink-0 select-none items-center whitespace-nowrap border-b-2 border-transparent px-2 py-2 text-gray-700 dark:text-dark-150;
+    @apply flex shrink-0 select-none items-center whitespace-nowrap border-b-2 border-transparent px-2 py-2 text-gray-700 dark:text-gray-300;
     &:hover {
-        @apply text-gray-900 dark:text-dark-100;
+        @apply text-gray-900 dark:text-gray-200;
     }
     &:focus-visible {
         @apply rounded-t outline-hidden ring-2 ring-inset ring-blue-500 dark:ring-dark-blue-100;
@@ -57,14 +57,14 @@
   ========================================================================== */
 
 .pill-tab {
-    @apply flex items-center rounded-sm px-2 py-1 text-gray-700 focus:outline-hidden dark:text-dark-175;
+    @apply flex items-center rounded-sm px-2 py-1 text-gray-700 focus:outline-hidden dark:text-gray-400;
 
     &:hover {
-        @apply text-gray-900 dark:text-dark-100;
+        @apply text-gray-900 dark:text-gray-200;
     }
 
     &.active {
-        @apply bg-blue-100 text-blue-900 dark:bg-dark-400 dark:text-dark-150;
+        @apply bg-blue-100 text-blue-900 dark:bg-gray-600 dark:text-gray-300;
     }
 }
 

resources/css/core/typography.css

@@ -77,7 +77,7 @@
 }
 
 body {
-    @apply font-sans text-base tracking-normal text-gray-900 dark:text-white;
+    @apply font-sans text-base tracking-normal text-gray-900 dark:text-gray-50;
     font-variant: common-ligatures tabular-nums;
     font-feature-settings:
         'zero',

resources/css/core/utilities.css

@@ -170,7 +170,7 @@
     background: rgba(255, 255, 255, 0.9);
 
     .dark & {
-        @apply bg-dark-600/90;
+        @apply bg-gray-700/90;
     }
 
     .inner {

resources/css/dark.css

@@ -2,13 +2,13 @@
 
 .dark {
     input:-webkit-autofill {
-        -webkit-box-shadow: inset 0 0 0 50px var(--color-dark-250);
-        -webkit-text-fill-color: var(--color-dark-150);
+        -webkit-box-shadow: inset 0 0 0 50px var(--color-gray-500);
+        -webkit-text-fill-color: var(--color-gray-300);
 
         &:focus,
         &:active {
-            -webkit-box-shadow: inset 0 0 0 50px var(--color-dark-200) !important;
-            -webkit-text-fill-color: var(--color-dark-100);
+            -webkit-box-shadow: inset 0 0 0 50px var(--color-gray-500) !important;
+            -webkit-text-fill-color: var(--color-gray-200);
         }
     }
 

resources/css/ui.css

@@ -96,28 +96,6 @@
     --color-rose-850: oklch(0.433 0.174 11.985);
     --color-rose-925: oklch(0.3862 0.1498 10.413);
 
-    /* Temp */
-    --color-dark-100: #dfe1e5;
-    --color-dark-150: #bbbdc0;
-    --color-dark-175: #93979a;
-    --color-dark-200: #5f6163;
-    --color-dark-250: #555759;
-    --color-dark-275: #515356;
-    --color-dark-300: #4e5157;
-    --color-dark-350: #43454a;
-    --color-dark-400: #414245;
-    --color-dark-500: #404143;
-    --color-dark-550: #3b3f41;
-    --color-dark-575: #393b40;
-    --color-dark-600: #2b2d30;
-    --color-dark-650: #242628;
-    --color-dark-700: #212223;
-    --color-dark-750: #22242a;
-    --color-dark-800: #1e1f22;
-    --color-dark-900: #171717;
-    --color-dark-950: #161616;
-    --color-dark-975: #131314;
-
     --color-dark-blue-100: #2870F5;
     --color-dark-blue-125: #1e68f1;
     --color-dark-blue-150: #1f67ec;

resources/js/components/assets/Editor/Editor.vue

@@ -1,7 +1,7 @@
 <template>
     <Stack size="full" open inset ref="stack" :before-close="shouldClose" @update:open="$emit('closed')" :show-close-button="false">
         <div
-            class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
+            class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-gray-850"
             :class="isImage ? 'is-image' : 'is-file'"
         >
             <div v-if="loading" class="loading">

resources/js/components/assets/Editor/FocalPointEditor.vue

@@ -45,7 +45,7 @@
                         <Button variant="primary" :text="__('Finish')" @click="select" />
                     </div>
                 </div>
-                <h6 class="rounded-b bg-gray-100  p-4 text-center  dark:bg-dark-800">
+                <h6 class="rounded-b bg-gray-100  p-4 text-center  dark:bg-gray-850">
                     {{ __('messages.focal_point_previews_are_examples') }}
                 </h6>
             </Card>