Update color utility naming

#10
savageserif · Jun 21, 2024 · 303c32e · 303c32e
1 parent ba2ac58
commit 303c32e
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -34,9 +34,9 @@
 }
 
 :root {
-  --color-bg-base: var(--light-0);
   --color-bg-hover: var(--light-50);
   --color-bg-controls: var(--light-100);
+  --color-bg-blank: var(--light-0);
   --color-bg-selection: var(--accent-200);
 
   --color-text-primary: var(--light-950);

diff --git a/src/components/PageColumnBody.vue b/src/components/PageColumnBody.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 overflow-y-auto bg-base-color">
+  <div class="flex-1 overflow-y-auto bg-blank-color">
     <slot />
   </div>
 </template>
diff --git a/src/components/TheCategorySelect.vue b/src/components/TheCategorySelect.vue
@@ -12,7 +12,7 @@
       />
     </ListboxButton>
     <ListboxOptions
-      class="absolute top-[2.4375rem] -translate-x-[1.375rem] rounded bg-base-color py-1.5 shadow-menu focus:outline-none"
+      class="absolute top-[2.4375rem] -translate-x-[1.375rem] rounded bg-blank-color py-1.5 shadow-menu focus:outline-none"
     >
       <ListboxOption
         v-for="(categoryName, category) in content.categoryNames"

diff --git a/src/components/TheCommentsView.vue b/src/components/TheCommentsView.vue
@@ -9,7 +9,7 @@
     </Suspense>
     <div
       v-show="hasComments && someThreadInstancesVisible"
-      class="sticky top-0 z-10 mx-auto max-w-150 bg-gradient-to-b from-base-color from-20% to-base-color/0 px-2 pt-2"
+      class="sticky top-0 z-10 mx-auto max-w-150 bg-gradient-to-b from-blank-color from-20% to-blank-color/0 px-2 pt-2"
     >
       <div class="flex rounded-outline border border-separator-color bg-controls-color px-2 py-1">
         <div class="flex flex-1 items-center gap-1"></div>

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
@@ -7,7 +7,7 @@
       title="Settings"
     />
     <MenuItems
-      class="absolute bottom-[2.1875rem] right-1 w-max divide-y divide-separator-color rounded bg-base-color shadow-menu focus:outline-none"
+      class="absolute bottom-[2.1875rem] right-1 w-max divide-y divide-separator-color rounded bg-blank-color shadow-menu focus:outline-none"
     >
       <div
         v-for="(group, index) in menuContents"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -20,7 +20,7 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      'base-color': 'hsl(var(--color-bg-base) / <alpha-value>)',
+      'blank-color': 'hsl(var(--color-bg-blank) / <alpha-value>)',
       'hover-color': 'hsl(var(--color-bg-hover) / <alpha-value>)',
       'controls-color': 'hsl(var(--color-bg-controls) / <alpha-value>)',
       'selection-color': 'hsl(var(--color-bg-selection) / <alpha-value>)',