Better accent color overwrite handling

packages/nobel/components/ui/Button/Button.vue

@@ -27,30 +27,9 @@ const {
 
 const ButtonVariant = computed(() => (disabled ? components.base : components[variant]))
 
-const buttonColors = {
-  default: '--accent',
-  success: '--success',
-  warning: '--warning',
-}
-
-const genericColors = computed(() => {
-  if (color === 'default') return
-  return {
-    '--color': `var(${buttonColors[color]}, --accent)`,
-    '--color-10': `var(${buttonColors[color]}-10)`,
-    '--color-20': `var(${buttonColors[color]}-20)`,
-    '--color-30': `var(${buttonColors[color]}-30)`,
-    '--color-40': `var(${buttonColors[color]}-40)`,
-    '--color-50': `var(${buttonColors[color]}-50)`,
-    '--color-60': `var(${buttonColors[color]}-60)`,
-    '--color-70': `var(${buttonColors[color]}-70)`,
-    '--color-80': `var(${buttonColors[color]}-80)`,
-    '--color-90': `var(${buttonColors[color]}-90)`,
-    '--color-100': `var(${buttonColors[color]}-100)`,
-    '--color-110': `var(${buttonColors[color]}-110)`,
-    '--color-120': `var(${buttonColors[color]}-120)`,
-    '--color-contrast': `var(${buttonColors[color]}-contrast)`,
-  }
+const getColorScheme = computed(() => {
+  if (color === 'default') return undefined
+  return `base-${color}`
 })
 </script>
 
@@ -59,9 +38,8 @@ const genericColors = computed(() => {
     :is="ButtonVariant"
     tabindex="1"
     class="button buttonText buttonHover buttonActive buttonFocus focus"
-    :class="size"
+    :class="`${size} ${getColorScheme}`"
     :disabled="disabled"
-    :style="genericColors"
     :type="type"
   >
     <slot></slot>
@@ -105,26 +83,26 @@ const genericColors = computed(() => {
 }
 
 @mixin button-hover {
-  color: var(--color-100);
-  background: var(--color-40);
-  border-color: var(--color-100);
+  color: var(--base-100);
+  background: var(--base-40);
+  border-color: var(--base-100);
 }
 
 @mixin button-active {
-  color: var(--color-100);
-  background: var(--color-70);
-  border-color: var(--color-100);
+  color: var(--base-100);
+  background: var(--base-70);
+  border-color: var(--base-100);
 }
 
 @mixin button-focus {
-  color: var(--color-100);
-  background: var(--color-70);
+  color: var(--base-100);
+  background: var(--base-70);
   border-color: var(--base-10);
 }
 
 /* Base */
 .button {
-  --focus-color: var(--color-100);
+  --focus-color: var(--base-100);
   border-radius: var(--radius);
   transition: all var(--time);
   @include button-base-theme;
@@ -159,7 +137,7 @@ const genericColors = computed(() => {
 
 .buttonFocus:focus {
   position: relative;
-  --focus-color: var(--color-100);
+  --focus-color: var(--base-100);
   outline: solid 0px var(--focus-color);
 }
 
@@ -171,7 +149,7 @@ const genericColors = computed(() => {
 
 .buttonFocus:active,
 .buttonFocus:has(*:active) {
-  outline: solid var(--border-size) var(--color-10);
+  outline: solid var(--border-size) var(--base-10);
 }
 
 /* Disabled */

packages/nobel/components/ui/Button/variants/ButtonPrimary.vue

@@ -1,13 +1,13 @@
 <template>
-  <button class="primary">
+  <button class="primary base-accent">
     <slot></slot>
   </button>
 </template>
 
 <style lang="scss">
 .button.primary {
-  background: var(--color-100);
-  color: var(--color-10);
-  border: solid var(--border-size) var(--color-100);
+  background: var(--base-100);
+  color: var(--base-10);
+  border: solid var(--border-size) var(--base-100);
 }
 </style>

packages/nobel/styles/main.scss

@@ -121,3 +121,54 @@ $desktop: 1200px;
   --color-120: var(--accent-120);
   --color-contrast: var(--accent-contrast);
 }
+
+.base-accent {
+  --base: var(--accent);
+  --base-10: var(--accent-10);
+  --base-20: var(--accent-20);
+  --base-30: var(--accent-30);
+  --base-40: var(--accent-40);
+  --base-50: var(--accent-50);
+  --base-60: var(--accent-60);
+  --base-70: var(--accent-70);
+  --base-80: var(--accent-80);
+  --base-90: var(--accent-90);
+  --base-100: var(--accent-100);
+  --base-110: var(--accent-110);
+  --base-120: var(--accent-120);
+  --base-contrast: var(--accent-contrast);
+}
+
+.base-warning {
+  --base: var(--warning);
+  --base-10: var(--warning-10);
+  --base-20: var(--warning-20);
+  --base-30: var(--warning-30);
+  --base-40: var(--warning-40);
+  --base-50: var(--warning-50);
+  --base-60: var(--warning-60);
+  --base-70: var(--warning-70);
+  --base-80: var(--warning-80);
+  --base-90: var(--warning-90);
+  --base-100: var(--warning-100);
+  --base-110: var(--warning-110);
+  --base-120: var(--warning-120);
+  --base-contrast: var(--warning-contrast);
+}
+
+.base-success {
+  --base: var(--success);
+  --base-10: var(--success-10);
+  --base-20: var(--success-20);
+  --base-30: var(--success-30);
+  --base-40: var(--success-40);
+  --base-50: var(--success-50);
+  --base-60: var(--success-60);
+  --base-70: var(--success-70);
+  --base-80: var(--success-80);
+  --base-90: var(--success-90);
+  --base-100: var(--success-100);
+  --base-110: var(--success-110);
+  --base-120: var(--success-120);
+  --base-contrast: var(--success-contrast);
+}