diff --git a/default-colors.js b/default-colors.js
index d8a37cfd..16352a83 100644
--- a/default-colors.js
+++ b/default-colors.js
@@ -45,7 +45,20 @@ module.exports = {
     scale11: 'var(--colors-slate11)',
     scale12: 'var(--colors-slate12)',
   },
-
+  scaleA: {
+    scaleA1: 'var(--colors-slatea1)',
+    scaleA2: 'var(--colors-slatea2)',
+    scaleA3: 'var(--colors-slatea3)',
+    scaleA4: 'var(--colors-slatea4)',
+    scaleA5: 'var(--colors-slatea5)',
+    scaleA6: 'var(--colors-slatea6)',
+    scaleA7: 'var(--colors-slatea7)',
+    scaleA8: 'var(--colors-slatea8)',
+    scaleA9: 'var(--colors-slatea9)',
+    scaleA10: 'var(--colors-slatea10)',
+    scaleA11: 'var(--colors-slatea11)',
+    scaleA12: 'var(--colors-slatea12)',
+  },
   scaleDark: {
     scale1: 'var(--colors-gray1)',
     scale2: 'var(--colors-gray2)',
@@ -60,4 +73,18 @@ module.exports = {
     scale11: 'var(--colors-gray11)',
     scale12: 'var(--colors-gray12)',
   },
+  scaleADark: {
+    scaleA1: 'var(--colors-graya1)',
+    scaleA2: 'var(--colors-graya2)',
+    scaleA3: 'var(--colors-graya3)',
+    scaleA4: 'var(--colors-graya4)',
+    scaleA5: 'var(--colors-graya5)',
+    scaleA6: 'var(--colors-graya6)',
+    scaleA7: 'var(--colors-graya7)',
+    scaleA8: 'var(--colors-graya8)',
+    scaleA9: 'var(--colors-graya9)',
+    scaleA10: 'var(--colors-graya10)',
+    scaleA11: 'var(--colors-graya11)',
+    scaleA12: 'var(--colors-graya12)',
+  },
 }
diff --git a/src/lib/theme/defaultTheme.ts b/src/lib/theme/defaultTheme.ts
index 698586ea..f9dee7f9 100644
--- a/src/lib/theme/defaultTheme.ts
+++ b/src/lib/theme/defaultTheme.ts
@@ -521,7 +521,7 @@ export default {
     `,
     variants: {
       standard: `
-        bg-scale-200 dark:bg-scale-200
+        bg-scaleA-200
         border border-scale-700
         `,
       error: `
@@ -569,7 +569,7 @@ export default {
     `,
     variants: {
       standard: `
-        bg-scale-200 dark:bg-scale-200
+        bg-scaleA-200
         border border-scale-700
         `,
       error: `
@@ -617,7 +617,7 @@ export default {
     `,
     variants: {
       standard: `
-        bg-scale-200 dark:bg-scale-200
+        bg-scaleA-200
         border border-scale-700
       `,
       error: `
@@ -1471,7 +1471,7 @@ export default {
     label: `truncate`,
     variants: {
       standard: `
-        bg-scale-200 dark:bg-scale-200
+        bg-scaleA-200
         border border-scale-700
 
         aria-expanded:border-scale-900
diff --git a/ui.config.js b/ui.config.js
index f8f33c20..f91cf6e6 100644
--- a/ui.config.js
+++ b/ui.config.js
@@ -8,7 +8,7 @@ const brandColors = require('./default-colors')
 
 // generates fixed scales
 // based on the root/light mode version
-const fixedOptions = ['scale', 'brand']
+const fixedOptions = ['scale', 'scaleA', 'brand']
 
 function radixColorKeys() {
   let keys = Object.keys(radixUiColors)
@@ -29,7 +29,7 @@ function radixColorKeys() {
 }
 
 function generateColorClasses() {
-  const brandColors = ['brand', 'scale']
+  const brandColors = ['brand', 'scale', 'scaleA']
   const colors = [...radixColorKeys(), ...brandColors]
 
   let mappedColors = {}
@@ -51,7 +51,7 @@ function generateColorClasses() {
   colors.map((x) => {
     for (let index = 0; index < 12; index++) {
       const step = index + 1
-      mappedColors[x][step * 100] = `var(--colors-${x}${step})`
+      mappedColors[x][step * 100] = `var(--colors-${x.toLowerCase()}${step})`
 
       if (
         fixedOptions.some(function (v) {
@@ -125,7 +125,7 @@ function generateCssVariables() {
 
 const variables = generateCssVariables()
 
-// console.log(variables)
+// console.log('variables', variables)
 
 const uiConfig = {
   theme: {