Moved bgc colors to relevant file

assets/_colors.css

@@ -9,7 +9,7 @@
   --event-amber-background: var(--color-amber-500);
 
   --event-yellow-foreground: var(--color-slate-900);
-  --event-yellow-background: var(--color-yellow-600);
+  --event-yellow-background: var(--color-yellow-500);
 
   --event-lime-foreground: var(--color-slate-900);
   --event-lime-background: var(--color-lime-500);
@@ -54,7 +54,7 @@
   --event-black-background: var(--color-stone-500);
 
   --event-white-foreground: var(--color-slate-900);
-  --event-white-background: var(--color-yellow-200);
+  --event-white-background: var(--color-lime-100);
 }
 
 @theme inline {
@@ -206,6 +206,23 @@
   background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background));
 }
 
+.bgc {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.bgc::before {
+  content: "";
+  display: inline-block;
+  width: .75rem;
+  aspect-ratio: 1;
+  margin-right: 0.5em;
+  border-radius: .25rem;
+  background-color: var(--bg-color);
+  border: 1px solid transparent;
+}
+
 .element-red {
   --fg-color: var(--color-event-red-foreground);
   --bg-color: var(--color-event-red-background);

assets/main.css

@@ -3,8 +3,8 @@
 @config '../tailwind.config.js';
 
 @import "./theme.css" layer(theme);
-@import "./_events.css" layer(theme);
-@import "./_events.css" layer(utilities);
+@import "./_colors.css" layer(theme);
+@import "./_colors.css" layer(utilities);
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -29,81 +29,6 @@ body {
   background-color: var(--color-background);
 }
 
-.bgc {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
-.bgc::before {
-  content: "";
-  display: inline-block;
-  width: .75rem;
-  aspect-ratio: 1;
-  margin-right: 0.5em;
-  border-radius: .25rem;
-  background-color: red;
-  border: 1px solid transparent;
-}
-
-.bgc-red::before {
-  @apply bg-red-500;
-}
-.bgc-orange::before {
-  @apply bg-orange-500;
-}
-.bgc-amber::before {
-  @apply bg-amber-500;
-}
-.bgc-yellow::before {
-  @apply bg-yellow-500;
-}
-.bgc-lime::before {
-  @apply bg-lime-500;
-}
-.bgc-green::before {
-  @apply bg-green-500;
-}
-.bgc-emerald::before {
-  @apply bg-emerald-600;
-}
-.bgc-teal::before {
-  @apply bg-teal-600;
-}
-.bgc-cyan::before {
-  @apply bg-cyan-600;
-}
-.bgc-sky::before {
-  @apply bg-sky-600;
-}
-.bgc-blue::before {
-  @apply bg-blue-600;
-}
-.bgc-indigo::before {
-  @apply bg-indigo-600;
-}
-.bgc-violet::before {
-  @apply bg-violet-600;
-}
-.bgc-purple::before {
-  @apply bg-purple-600;
-}
-.bgc-fuchsia::before {
-  @apply bg-fuchsia-600;
-}
-.bgc-pink::before {
-  @apply bg-pink-600;
-}
-.bgc-rose::before {
-  @apply bg-rose-600;
-}
-.bgc-black::before {
-  @apply bg-black dark:border-[1px] dark:border-slate-300;
-}
-.bgc-white::before {
-  @apply bg-white border-[1px] border-slate-700;
-}
-
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;

components/calendar/category/TableRow.vue

@@ -139,7 +139,7 @@ function handleQueryDelete() {
           >
             <span
               class="bgc"
-              :class="cn(`bgc-${category.color}`)"
+              :class="cn(`element-${category.color}`)"
             >
               {{ $t(`ui.colors.${category.color}`) }}
             </span>

components/global/input/Color.vue

@@ -17,7 +17,7 @@ const model = defineModel<RPGColor>({ default: "white" });
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="bgc"
-        :class="cn(`bgc-${model}`)"
+        :class="cn(`element-${model}`)"
       />
     </UiSelectTrigger>
     <UiSelectContent :position>
@@ -29,7 +29,7 @@ const model = defineModel<RPGColor>({ default: "white" });
           class="bgc"
           :class="
             cn(
-              `bgc-${color}`,
+              `element-${color}`,
             )
           "
         >

pnpm-workspace.yaml

@@ -1,4 +1,6 @@
 onlyBuiltDependencies:
+  - '@parcel/watcher'
   - esbuild
+  - sharp
   - vue-demi
   - workerd