diff --git a/src/colors/amber.js b/src/colors/amber.js
new file mode 100644
index 00000000..27289366
--- /dev/null
+++ b/src/colors/amber.js
@@ -0,0 +1,36 @@
+const amber = {
+    light: {
+
+        50: '#fefdfb',
+        100: '#fefbe9',
+        200: '#fff7c2',
+        300: '#ffee9c',
+        400: '#fbe577',
+        500: '#f3d673',
+        600: '#e9c162',
+        700: '#e2a336',
+        800: '#ffc53d',
+        900: '#ffba18',
+        950: '#ab6400',
+        1000: '#4f3422',
+
+    },
+    dark: {
+
+        50: '#16120c',
+        100: '#1d180f',
+        200: '#302008',
+        300: '#3f2700',
+        400: '#4d3000',
+        500: '#5c3d05',
+        600: '#714f19',
+        700: '#8f6424',
+        800: '#ffc53d',
+        900: '#ffd60a',
+        950: '#ffca16',
+        1000: '#ffe7b3',
+
+    },
+};
+
+export default amber;
diff --git a/src/colors/blue.js b/src/colors/blue.js
new file mode 100644
index 00000000..202049c2
--- /dev/null
+++ b/src/colors/blue.js
@@ -0,0 +1,35 @@
+const blue = {
+    light: {
+
+        50: '#fbfdff',
+        100: '#f4faff',
+        200: '#e6f4fe',
+        300: '#d5efff',
+        400: '#c2e5ff',
+        500: '#acd8fc',
+        600: '#8ec8f6',
+        700: '#5eb1ef',
+        800: '#0090ff',
+        900: '#0588f0',
+        950: '#0d74ce',
+        1000: '#113264',
+
+    },
+    dark: {
+
+        50: '#0d1520',
+        100: '#111927',
+        200: '#0d2847',
+        300: '#003362',
+        400: '#004074',
+        500: '#104d87',
+        600: '#205d9e',
+        700: '#2870bd',
+        800: '#0090ff',
+        900: '#3b9eff',
+        950: '#70b8ff',
+        1000: '#c2e6ff',
+    },
+};
+
+export default blue;
diff --git a/src/colors/bronze.js b/src/colors/bronze.js
new file mode 100644
index 00000000..f87b1056
--- /dev/null
+++ b/src/colors/bronze.js
@@ -0,0 +1,37 @@
+
+const bronze = {
+    light: {
+
+        50: '#fdfcfc',
+        100: '#fcf9f6',
+        200: '#f6eee7',
+        300: '#f0e4d9',
+        400: '#ebdaca',
+        500: '#e4cdb7',
+        600: '#dcbc9f',
+        700: '#cea37e',
+        800: '#ad7f58',
+        900: '#a07553',
+        950: '#815e46',
+        1000: '#3e332e',
+
+    },
+    dark: {
+
+        50: '#141110',
+        100: '#1a1715',
+        200: '#26221e',
+        300: '#2f2a24',
+        400: '#3b3330',
+        500: '#493e3a',
+        600: '#5a4c47',
+        700: '#6f5f58',
+        800: '#a18072',
+        900: '#ae8c7e',
+        950: '#d4b3a5',
+        1000: '#ede0d9',
+
+    },
+};
+
+export default bronze;
diff --git a/src/colors/brown.js b/src/colors/brown.js
new file mode 100644
index 00000000..f15f9ef3
--- /dev/null
+++ b/src/colors/brown.js
@@ -0,0 +1,36 @@
+
+const brown = {
+    light: {
+
+        50: '#fefdfc',
+        100: '#fcf9f6',
+        200: '#f6eee7',
+        300: '#f0e4d9',
+        400: '#ebdaca',
+        500: '#e4cdb7',
+        600: '#dcbc9f',
+        700: '#cea37e',
+        800: '#ad7f58',
+        900: '#a07553',
+        950: '#815e46',
+        1000: '#3e332e',
+
+    },
+    dark: {
+
+        50: '#12110f',
+        100: '#1c1816',
+        200: '#28211d',
+        300: '#322922',
+        400: '#3e3128',
+        500: '#4d3c2f',
+        600: '#614a39',
+        700: '#7c5f46',
+        800: '#ad7f58',
+        900: '#b88c67',
+        950: '#dbb594',
+        1000: '#f2e1ca',
+    },
+};
+
+export default brown;
diff --git a/src/colors/cyan.js b/src/colors/cyan.js
new file mode 100644
index 00000000..3f3147f7
--- /dev/null
+++ b/src/colors/cyan.js
@@ -0,0 +1,33 @@
+const cyan = {
+    light: {
+        50: '#fafdfe',
+        100: '#f2fafb',
+        200: '#def7f9',
+        300: '#caf1f6',
+        400: '#b5e9f0',
+        500: '#9ddde7',
+        600: '#7dcedc',
+        700: '#3db9cf',
+        800: '#00a2c7',
+        900: '#0797b9',
+        950: '#107d98',
+        1000: '#0d3c48',
+    },
+    dark: {
+
+        50: '#0b161a',
+        100: '#101b20',
+        200: '#082c36',
+        300: '#003848',
+        400: '#004558',
+        500: '#045468',
+        600: '#12677e',
+        700: '#11809c',
+        800: '#00a2c7',
+        900: '#23afd0',
+        950: '#4ccce6',
+        1000: '#b6ecf7',
+    },
+};
+
+export default cyan;
diff --git a/src/colors/gold.js b/src/colors/gold.js
new file mode 100644
index 00000000..baef62e0
--- /dev/null
+++ b/src/colors/gold.js
@@ -0,0 +1,34 @@
+const gold = {
+    light: {
+
+        50: '#fdfdfc',
+        100: '#faf9f2',
+        200: '#f2f0e7',
+        300: '#eae6db',
+        400: '#e1dccf',
+        500: '#d8d0bf',
+        600: '#cbc0aa',
+        700: '#b9a88d',
+        800: '#978365',
+        900: '#8c7a5e',
+        950: '#71624b',
+        1000: '#3b352b',
+    },
+    dark: {
+
+        50: '#121211',
+        100: '#1b1a17',
+        200: '#24231f',
+        300: '#2d2b26',
+        400: '#38352e',
+        500: '#444039',
+        600: '#544f46',
+        700: '#696256',
+        800: '#978365',
+        900: '#a39073',
+        950: '#cbb99f',
+        1000: '#e8e2d9',
+    },
+};
+
+export default gold;
diff --git a/src/colors/grass.js b/src/colors/grass.js
new file mode 100644
index 00000000..587896c8
--- /dev/null
+++ b/src/colors/grass.js
@@ -0,0 +1,36 @@
+
+const grass = {
+    light: {
+        50: '#fbfefb',
+        100: '#f5fbf5',
+        200: '#e9f6e9',
+        300: '#daf1db',
+        400: '#c9e8ca',
+        500: '#b2ddb5',
+        600: '#94ce9a',
+        700: '#65ba74',
+        800: '#46a758',
+        900: '#3e9b4f',
+        950: '#2a7e3b',
+        1000: '#203c25',
+
+    },
+    dark: {
+
+        50: '#0e1511',
+        100: '#141a15',
+        200: '#1b2a1e',
+        300: '#1d3a24',
+        400: '#25482d',
+        500: '#2d5736',
+        600: '#366740',
+        700: '#3e7949',
+        800: '#46a758',
+        900: '#53b365',
+        950: '#71d083',
+        1000: '#c2f0c2',
+
+    },
+};
+
+export default grass;
diff --git a/src/colors/green.js b/src/colors/green.js
new file mode 100644
index 00000000..382e9109
--- /dev/null
+++ b/src/colors/green.js
@@ -0,0 +1,34 @@
+const green = {
+    light: {
+        50: '#fbfefc',
+        100: '#f4fbf6',
+        200: '#e6f6eb',
+        300: '#d6f1df',
+        400: '#c4e8d1',
+        500: '#adddc0',
+        600: '#8eceaa',
+        700: '#5bb98b',
+        800: '#30a46c',
+        900: '#2b9a66',
+        950: '#218358',
+        1000: '#193b2d',
+
+    },
+    dark: {
+
+        50: '#0e1512',
+        100: '#121b17',
+        200: '#132d21',
+        300: '#113b29',
+        400: '#174933',
+        500: '#20573e',
+        600: '#28684a',
+        700: '#2f7c57',
+        800: '#30a46c',
+        900: '#33b074',
+        950: '#3dd68c',
+        1000: '#b1f1cb',
+    },
+};
+
+export default green;
diff --git a/src/colors/index.js b/src/colors/index.js
index 43882db9..1bccc68f 100644
--- a/src/colors/index.js
+++ b/src/colors/index.js
@@ -15,6 +15,25 @@ import crimson from './crimson.js';
 import pink from './pink.js';
 import plum from './plum.js';
 import purple from './purple.js';
+import violet from './violet.js';
+
+import iris from './iris.js';
+import indigo from './indigo.js';
+import blue from './blue.js';
+import cyan from './cyan.js';
+import teal from './teal.js';
+import jade from './jade.js';
+import green from './green.js';
+import grass from './grass.js';
+import brown from './brown.js';
+import bronze from './bronze.js';
+import gold from './gold.js';
+import sky from './sky.js';
+import mint from './mint.js';
+import lime from './lime.js';
+import yellow from './yellow.js';
+import amber from './amber.js';
+import orange from './orange.js';
 
 const colors = {
     gray: gray,
@@ -30,6 +49,25 @@ const colors = {
     pink: pink,
     plum: plum,
     purple: purple,
+    violet: violet,
+    iris: iris,
+    indigo: indigo,
+    blue: blue,
+    cyan: cyan,
+    teal: teal,
+    jade: jade,
+    green: green,
+    grass: grass,
+    brown: brown,
+    bronze: bronze,
+    gold: gold,
+    sky: sky,
+    mint: mint,
+    lime: lime,
+    yellow: yellow,
+    amber: amber,
+    orange: orange,
+
 };
 
 export default colors;
diff --git a/src/colors/indigo.js b/src/colors/indigo.js
new file mode 100644
index 00000000..2174bd2c
--- /dev/null
+++ b/src/colors/indigo.js
@@ -0,0 +1,32 @@
+const indigo = {
+    light: {
+        50: '#fdfdfe',
+        100: '#f7f9ff',
+        200: '#edf2fe',
+        300: '#e1e9ff',
+        400: '#d2deff',
+        500: '#c1d0ff',
+        600: '#abbdf9',
+        700: '#8da4ef',
+        800: '#3e63dd',
+        900: '#3358d4',
+        950: '#3a5bc7',
+        1000: '#1f2d5c',
+    },
+    dark: {
+        50: '#11131f',
+        100: '#141726',
+        200: '#182449',
+        300: '#1d2e62',
+        400: '#253974',
+        500: '#304384',
+        600: '#3a4f97',
+        700: '#435db1',
+        800: '#3e63dd',
+        900: '#5472e4',
+        950: '#9eb1ff',
+        1000: '#d6e1ff',
+    },
+};
+
+export default indigo;
diff --git a/src/colors/iris.js b/src/colors/iris.js
new file mode 100644
index 00000000..4b189454
--- /dev/null
+++ b/src/colors/iris.js
@@ -0,0 +1,33 @@
+const iris = {
+    light: {
+        50: '#fdfdff',
+        100: '#f8f8ff',
+        200: '#f0f1fe',
+        300: '#e6e7ff',
+        400: '#dadcff',
+        500: '#cbcdff',
+        600: '#b8baf8',
+        700: '#9b9ef0',
+        800: '#5b5bd6',
+        900: '#5151cd',
+        950: '#5753c6',
+        1000: '#272962',
+    },
+    dark: {
+
+        50: '#13131e',
+        100: '#171625',
+        200: '#202248',
+        300: '#262a65',
+        400: '#303374',
+        500: '#3d3e82',
+        600: '#4a4a95',
+        700: '#5958b1',
+        800: '#5b5bd6',
+        900: '#6e6ade',
+        950: '#b1a9ff',
+        1000: '#e0dffe',
+    },
+};
+
+export default iris;
diff --git a/src/colors/jade.js b/src/colors/jade.js
new file mode 100644
index 00000000..d0d8f3d7
--- /dev/null
+++ b/src/colors/jade.js
@@ -0,0 +1,34 @@
+const jade = {
+    light: {
+
+        50: '#fbfefd',
+        100: '#f4fbf7',
+        200: '#e6f7ed',
+        300: '#d6f1e3',
+        400: '#c3e9d7',
+        500: '#acdec8',
+        600: '#8bceb6',
+        700: '#56ba9f',
+        800: '#29a383',
+        900: '#26997b',
+        950: '#208368',
+        1000: '#1d3b31',
+    },
+    dark: {
+
+        50: '#0d1512',
+        100: '#121c18',
+        200: '#0f2e22',
+        300: '#0b3b2c',
+        400: '#114837',
+        500: '#1b5745',
+        600: '#246854',
+        700: '#2a7e68',
+        800: '#29a383',
+        900: '#27b08b',
+        950: '#1fd8a4',
+        1000: '#adf0d4',
+    },
+};
+
+export default jade;
diff --git a/src/colors/lime.js b/src/colors/lime.js
new file mode 100644
index 00000000..0595c517
--- /dev/null
+++ b/src/colors/lime.js
@@ -0,0 +1,35 @@
+const lime = {
+    light: {
+
+        50: '#fcfdfa',
+        100: '#f8faf3',
+        200: '#eef6d6',
+        300: '#e2f0bd',
+        400: '#d3e7a6',
+        500: '#c2da91',
+        600: '#abc978',
+        700: '#8db654',
+        800: '#bdee63',
+        900: '#b0e64c',
+        950: '#5c7c2f',
+        1000: '#37401c',
+
+    },
+    dark: {
+
+        50: '#11130c',
+        100: '#151a10',
+        200: '#1f2917',
+        300: '#29371d',
+        400: '#334423',
+        500: '#3d522a',
+        600: '#496231',
+        700: '#577538',
+        800: '#bdee63',
+        900: '#d4ff70',
+        950: '#bde56c',
+        1000: '#e3f7ba',
+    },
+};
+
+export default lime;
diff --git a/src/colors/mint.js b/src/colors/mint.js
new file mode 100644
index 00000000..7e42b932
--- /dev/null
+++ b/src/colors/mint.js
@@ -0,0 +1,35 @@
+const mint = {
+    light: {
+
+        50: '#f9fefd',
+        100: '#f2fbf9',
+        200: '#ddf9f2',
+        300: '#c8f4e9',
+        400: '#b3ecde',
+        500: '#9ce0d0',
+        600: '#7ecfbd',
+        700: '#4cbba5',
+        800: '#86ead4',
+        900: '#7de0cb',
+        950: '#027864',
+        1000: '#16433c',
+
+    },
+    dark: {
+
+        50: '#0e1515',
+        100: '#0f1b1b',
+        200: '#092c2b',
+        300: '#003a38',
+        400: '#004744',
+        500: '#105650',
+        600: '#1e685f',
+        700: '#277f70',
+        800: '#86ead4',
+        900: '#a8f5e5',
+        950: '#58d5ba',
+        1000: '#c4f5e1',
+    },
+};
+
+export default mint;
diff --git a/src/colors/orange.js b/src/colors/orange.js
new file mode 100644
index 00000000..c8df5741
--- /dev/null
+++ b/src/colors/orange.js
@@ -0,0 +1,35 @@
+const orange = {
+    light: {
+
+        50: '#fefcfb',
+        100: '#fff7ed',
+        200: '#ffefd6',
+        300: '#ffdfb5',
+        400: '#ffd19a',
+        500: '#ffc182',
+        600: '#f5ae73',
+        700: '#ec9455',
+        800: '#f76b15',
+        900: '#ef5f00',
+        950: '#cc4e00',
+        1000: '#582d1d',
+    },
+    dark: {
+
+        50: '#17120e',
+        100: '#1e160f',
+
+        200: '#331e0b',
+        300: '#462100',
+        400: '#562800',
+        500: '#66350c',
+        600: '#7e451d',
+        700: '#a35829',
+        800: '#f76b15',
+        900: '#ff801f',
+        950: '#ffa057',
+        1000: '#ffe0c2',
+    },
+};
+
+export default orange;
diff --git a/src/colors/sky.js b/src/colors/sky.js
new file mode 100644
index 00000000..8b997a45
--- /dev/null
+++ b/src/colors/sky.js
@@ -0,0 +1,34 @@
+const sky = {
+    light: {
+
+        50: '#f9feff',
+        100: '#f1fafd',
+        200: '#e1f6fd',
+        300: '#d1f0fa',
+        400: '#bee7f5',
+        500: '#a9daed',
+        600: '#8dcae3',
+        700: '#60b3d7',
+        800: '#7ce2fe',
+        900: '#74daf8',
+        950: '#00749e',
+        1000: '#1d3e56',
+    },
+    dark: {
+
+        50: '#0d141f',
+        100: '#111a27',
+        200: '#112840',
+        300: '#113555',
+        400: '#154467',
+        500: '#1b537b',
+        600: '#1f6692',
+        700: '#197cae',
+        800: '#7ce2fe',
+        900: '#a8eeff',
+        950: '#75c7f0',
+        1000: '#c2f3ff',
+    },
+};
+
+export default sky;
diff --git a/src/colors/teal.js b/src/colors/teal.js
new file mode 100644
index 00000000..5618244e
--- /dev/null
+++ b/src/colors/teal.js
@@ -0,0 +1,33 @@
+const jade = {
+    light: {
+        50: '#fbfefd',
+        100: '#f4fbf7',
+        200: '#e6f7ed',
+        300: '#d6f1e3',
+        400: '#c3e9d7',
+        500: '#acdec8',
+        600: '#8bceb6',
+        700: '#56ba9f',
+        800: '#29a383',
+        900: '#26997b',
+        950: '#208368',
+        1000: '#1d3b31',
+
+    },
+    dark: {
+        50: '#0d1512',
+        100: '#121c18',
+        200: '#0f2e22',
+        300: '#0b3b2c',
+        400: '#114837',
+        500: '#1b5745',
+        600: '#246854',
+        700: '#2a7e68',
+        800: '#29a383',
+        900: '#27b08b',
+        950: '#1fd8a4',
+        1000: '#adf0d4',
+    },
+};
+
+export default jade;
diff --git a/src/colors/violet.js b/src/colors/violet.js
new file mode 100644
index 00000000..c8a37fb7
--- /dev/null
+++ b/src/colors/violet.js
@@ -0,0 +1,35 @@
+const violet = {
+    light: {
+
+        50: '#fdfcfe',
+        100: '#faf8ff',
+        200: '#f4f0fe',
+        300: '#ebe4ff',
+        400: '#e1d9ff',
+        500: '#d4cafe',
+        600: '#c2b5f5',
+        700: '#aa99ec',
+        800: '#6e56cf',
+        900: '#654dc4',
+        950: '#6550b9',
+        1000: '#2f265f',
+
+    },
+    dark: {
+
+        50: '#14121f',
+        100: '#1b1525',
+        200: '#291f43',
+        300: '#33255b',
+        400: '#3c2e69',
+        500: '#473876',
+        600: '#56468b',
+        700: '#6958ad',
+        800: '#6e56cf',
+        900: '#7d66d9',
+        950: '#baa7ff',
+        1000: '#e2ddfe',
+    },
+};
+
+export default violet;
diff --git a/src/colors/yellow.js b/src/colors/yellow.js
new file mode 100644
index 00000000..2337b5cd
--- /dev/null
+++ b/src/colors/yellow.js
@@ -0,0 +1,34 @@
+const yellow = {
+    light: {
+
+        50: '#fdfdf9',
+        100: '#fefce9',
+        200: '#fffab8',
+        300: '#fff394',
+        400: '#ffe770',
+        500: '#f3d768',
+        600: '#e4c767',
+        700: '#d5ae39',
+        800: '#ffe629',
+        900: '#ffdc00',
+        950: '#9e6c00',
+        1000: '#473b1f',
+
+    },
+    dark: {
+        50: '#14120b',
+        100: '#1b180f',
+        200: '#2d2305',
+        300: '#362b00',
+        400: '#433500',
+        500: '#524202',
+        600: '#665417',
+        700: '#836a21',
+        800: '#ffe629',
+        900: '#ffff57',
+        950: '#f5e147',
+        1000: '#f6eeb4',
+    },
+};
+
+export default yellow;
diff --git a/src/examples/Colors/ColorsTemplate.js b/src/examples/Colors/ColorsTemplate.js
index 5f0188bf..d1d8649c 100644
--- a/src/examples/Colors/ColorsTemplate.js
+++ b/src/examples/Colors/ColorsTemplate.js
@@ -196,6 +196,249 @@ const ColorsTemplate = () => {
                 <ColorBubble colorClass='bg-purple-950' />
                 <ColorBubble colorClass='bg-purple-1000' />
             </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-indigo-50' />
+                <ColorBubble colorClass='bg-indigo-100' />
+                <ColorBubble colorClass='bg-indigo-200' />
+                <ColorBubble colorClass='bg-indigo-300' />
+                <ColorBubble colorClass='bg-indigo-400' />
+                <ColorBubble colorClass='bg-indigo-500' />
+                <ColorBubble colorClass='bg-indigo-600' />
+                <ColorBubble colorClass='bg-indigo-700' />
+                <ColorBubble colorClass='bg-indigo-800' />
+                <ColorBubble colorClass='bg-indigo-900' />
+                <ColorBubble colorClass='bg-indigo-950' />
+                <ColorBubble colorClass='bg-indigo-1000' />
+
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-blue-50' />
+                <ColorBubble colorClass='bg-blue-100' />
+                <ColorBubble colorClass='bg-blue-200' />
+                <ColorBubble colorClass='bg-blue-300' />
+                <ColorBubble colorClass='bg-blue-400' />
+                <ColorBubble colorClass='bg-blue-500' />
+                <ColorBubble colorClass='bg-blue-600' />
+                <ColorBubble colorClass='bg-blue-700' />
+                <ColorBubble colorClass='bg-blue-800' />
+                <ColorBubble colorClass='bg-blue-900' />
+                <ColorBubble colorClass='bg-blue-950' />
+                <ColorBubble colorClass='bg-blue-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-cyan-50' />
+                <ColorBubble colorClass='bg-cyan-100' />
+                <ColorBubble colorClass='bg-cyan-200' />
+                <ColorBubble colorClass='bg-cyan-300' />
+                <ColorBubble colorClass='bg-cyan-400' />
+                <ColorBubble colorClass='bg-cyan-500' />
+                <ColorBubble colorClass='bg-cyan-600' />
+                <ColorBubble colorClass='bg-cyan-700' />
+                <ColorBubble colorClass='bg-cyan-800' />
+                <ColorBubble colorClass='bg-cyan-900' />
+                <ColorBubble colorClass='bg-cyan-950' />
+                <ColorBubble colorClass='bg-cyan-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-teal-50' />
+                <ColorBubble colorClass='bg-teal-100' />
+                <ColorBubble colorClass='bg-teal-200' />
+                <ColorBubble colorClass='bg-teal-300' />
+                <ColorBubble colorClass='bg-teal-400' />
+                <ColorBubble colorClass='bg-teal-500' />
+                <ColorBubble colorClass='bg-teal-600' />
+                <ColorBubble colorClass='bg-teal-700' />
+                <ColorBubble colorClass='bg-teal-800' />
+                <ColorBubble colorClass='bg-teal-900' />
+                <ColorBubble colorClass='bg-teal-950' />
+                <ColorBubble colorClass='bg-teal-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-jade-50' />
+                <ColorBubble colorClass='bg-jade-100' />
+                <ColorBubble colorClass='bg-jade-200' />
+                <ColorBubble colorClass='bg-jade-300' />
+                <ColorBubble colorClass='bg-jade-400' />
+                <ColorBubble colorClass='bg-jade-500' />
+                <ColorBubble colorClass='bg-jade-600' />
+                <ColorBubble colorClass='bg-jade-700' />
+                <ColorBubble colorClass='bg-jade-800' />
+                <ColorBubble colorClass='bg-jade-900' />
+                <ColorBubble colorClass='bg-jade-950' />
+                <ColorBubble colorClass='bg-jade-1000' />
+
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-green-50' />
+                <ColorBubble colorClass='bg-green-100' />
+                <ColorBubble colorClass='bg-green-200' />
+                <ColorBubble colorClass='bg-green-300' />
+                <ColorBubble colorClass='bg-green-400' />
+                <ColorBubble colorClass='bg-green-500' />
+                <ColorBubble colorClass='bg-green-600' />
+                <ColorBubble colorClass='bg-green-700' />
+                <ColorBubble colorClass='bg-green-800' />
+                <ColorBubble colorClass='bg-green-900' />
+                <ColorBubble colorClass='bg-green-950' />
+                <ColorBubble colorClass='bg-green-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-grass-50' />
+                <ColorBubble colorClass='bg-grass-100' />
+                <ColorBubble colorClass='bg-grass-200' />
+                <ColorBubble colorClass='bg-grass-300' />
+                <ColorBubble colorClass='bg-grass-400' />
+                <ColorBubble colorClass='bg-grass-500' />
+                <ColorBubble colorClass='bg-grass-600' />
+                <ColorBubble colorClass='bg-grass-700' />
+                <ColorBubble colorClass='bg-grass-800' />
+                <ColorBubble colorClass='bg-grass-900' />
+                <ColorBubble colorClass='bg-grass-950' />
+                <ColorBubble colorClass='bg-grass-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-bronze-50' />
+                <ColorBubble colorClass='bg-bronze-100' />
+                <ColorBubble colorClass='bg-bronze-200' />
+                <ColorBubble colorClass='bg-bronze-300' />
+                <ColorBubble colorClass='bg-bronze-400' />
+                <ColorBubble colorClass='bg-bronze-500' />
+                <ColorBubble colorClass='bg-bronze-600' />
+                <ColorBubble colorClass='bg-bronze-700' />
+                <ColorBubble colorClass='bg-bronze-800' />
+                <ColorBubble colorClass='bg-bronze-900' />
+                <ColorBubble colorClass='bg-bronze-950' />
+                <ColorBubble colorClass='bg-bronze-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-gold-50' />
+                <ColorBubble colorClass='bg-gold-100' />
+                <ColorBubble colorClass='bg-gold-200' />
+                <ColorBubble colorClass='bg-gold-300' />
+                <ColorBubble colorClass='bg-gold-400' />
+                <ColorBubble colorClass='bg-gold-500' />
+                <ColorBubble colorClass='bg-gold-600' />
+                <ColorBubble colorClass='bg-gold-700' />
+                <ColorBubble colorClass='bg-gold-800' />
+                <ColorBubble colorClass='bg-gold-900' />
+                <ColorBubble colorClass='bg-gold-950' />
+                <ColorBubble colorClass='bg-gold-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-brown-50' />
+                <ColorBubble colorClass='bg-brown-100' />
+                <ColorBubble colorClass='bg-brown-200' />
+                <ColorBubble colorClass='bg-brown-300' />
+                <ColorBubble colorClass='bg-brown-400' />
+                <ColorBubble colorClass='bg-brown-500' />
+                <ColorBubble colorClass='bg-brown-600' />
+                <ColorBubble colorClass='bg-brown-700' />
+                <ColorBubble colorClass='bg-brown-800' />
+                <ColorBubble colorClass='bg-brown-900' />
+                <ColorBubble colorClass='bg-brown-950' />
+                <ColorBubble colorClass='bg-brown-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-orange-50' />
+                <ColorBubble colorClass='bg-orange-100' />
+                <ColorBubble colorClass='bg-orange-200' />
+                <ColorBubble colorClass='bg-orange-300' />
+                <ColorBubble colorClass='bg-orange-400' />
+                <ColorBubble colorClass='bg-orange-500' />
+                <ColorBubble colorClass='bg-orange-600' />
+                <ColorBubble colorClass='bg-orange-700' />
+                <ColorBubble colorClass='bg-orange-800' />
+                <ColorBubble colorClass='bg-orange-900' />
+                <ColorBubble colorClass='bg-orange-950' />
+                <ColorBubble colorClass='bg-orange-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-amber-50' />
+                <ColorBubble colorClass='bg-amber-100' />
+                <ColorBubble colorClass='bg-amber-200' />
+                <ColorBubble colorClass='bg-amber-300' />
+                <ColorBubble colorClass='bg-amber-400' />
+                <ColorBubble colorClass='bg-amber-500' />
+                <ColorBubble colorClass='bg-amber-600' />
+                <ColorBubble colorClass='bg-amber-700' />
+                <ColorBubble colorClass='bg-amber-800' />
+                <ColorBubble colorClass='bg-amber-900' />
+                <ColorBubble colorClass='bg-amber-950' />
+                <ColorBubble colorClass='bg-amber-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-yellow-50' />
+                <ColorBubble colorClass='bg-yellow-100' />
+                <ColorBubble colorClass='bg-yellow-200' />
+                <ColorBubble colorClass='bg-yellow-300' />
+                <ColorBubble colorClass='bg-yellow-400' />
+                <ColorBubble colorClass='bg-yellow-500' />
+                <ColorBubble colorClass='bg-yellow-600' />
+                <ColorBubble colorClass='bg-yellow-700' />
+                <ColorBubble colorClass='bg-yellow-800' />
+                <ColorBubble colorClass='bg-yellow-900' />
+                <ColorBubble colorClass='bg-yellow-950' />
+                <ColorBubble colorClass='bg-yellow-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-lime-50' />
+                <ColorBubble colorClass='bg-lime-100' />
+                <ColorBubble colorClass='bg-lime-200' />
+                <ColorBubble colorClass='bg-lime-300' />
+                <ColorBubble colorClass='bg-lime-400' />
+                <ColorBubble colorClass='bg-lime-500' />
+                <ColorBubble colorClass='bg-lime-600' />
+                <ColorBubble colorClass='bg-lime-700' />
+                <ColorBubble colorClass='bg-lime-800' />
+                <ColorBubble colorClass='bg-lime-900' />
+                <ColorBubble colorClass='bg-lime-950' />
+                <ColorBubble colorClass='bg-lime-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-mint-50' />
+                <ColorBubble colorClass='bg-mint-100' />
+                <ColorBubble colorClass='bg-mint-200' />
+                <ColorBubble colorClass='bg-mint-300' />
+                <ColorBubble colorClass='bg-mint-400' />
+                <ColorBubble colorClass='bg-mint-500' />
+                <ColorBubble colorClass='bg-mint-600' />
+                <ColorBubble colorClass='bg-mint-700' />
+                <ColorBubble colorClass='bg-mint-800' />
+                <ColorBubble colorClass='bg-mint-900' />
+                <ColorBubble colorClass='bg-mint-950' />
+                <ColorBubble colorClass='bg-mint-1000' />
+            </div>
+
+            <div className='flex'>
+                <ColorBubble colorClass='bg-sky-50' />
+                <ColorBubble colorClass='bg-sky-100' />
+                <ColorBubble colorClass='bg-sky-200' />
+                <ColorBubble colorClass='bg-sky-300' />
+                <ColorBubble colorClass='bg-sky-400' />
+                <ColorBubble colorClass='bg-sky-500' />
+                <ColorBubble colorClass='bg-sky-600' />
+                <ColorBubble colorClass='bg-sky-700' />
+                <ColorBubble colorClass='bg-sky-800' />
+                <ColorBubble colorClass='bg-sky-900' />
+                <ColorBubble colorClass='bg-sky-950' />
+                <ColorBubble colorClass='bg-sky-1000' />
+            </div>
+
         </div>
     </div>;
 };
diff --git a/styles/cssTokens/base.tokens.css b/styles/cssTokens/base.tokens.css
index 2914a4a9..49fa2cb7 100644
--- a/styles/cssTokens/base.tokens.css
+++ b/styles/cssTokens/base.tokens.css
@@ -156,6 +156,222 @@
 --rad-ui-color-purple-900: hsl(272, 46.8%, 50.3%);
 --rad-ui-color-purple-950: hsl(272, 50.0%, 45.8%);
 --rad-ui-color-purple-1000: hsl(270, 50.0%, 25.0%);
+--rad-ui-color-violet-50: #fdfcfe;
+--rad-ui-color-violet-100: #faf8ff;
+--rad-ui-color-violet-200: #f4f0fe;
+--rad-ui-color-violet-300: #ebe4ff;
+--rad-ui-color-violet-400: #e1d9ff;
+--rad-ui-color-violet-500: #d4cafe;
+--rad-ui-color-violet-600: #c2b5f5;
+--rad-ui-color-violet-700: #aa99ec;
+--rad-ui-color-violet-800: #6e56cf;
+--rad-ui-color-violet-900: #654dc4;
+--rad-ui-color-violet-950: #6550b9;
+--rad-ui-color-violet-1000: #2f265f;
+--rad-ui-color-iris-50: #fdfdff;
+--rad-ui-color-iris-100: #f8f8ff;
+--rad-ui-color-iris-200: #f0f1fe;
+--rad-ui-color-iris-300: #e6e7ff;
+--rad-ui-color-iris-400: #dadcff;
+--rad-ui-color-iris-500: #cbcdff;
+--rad-ui-color-iris-600: #b8baf8;
+--rad-ui-color-iris-700: #9b9ef0;
+--rad-ui-color-iris-800: #5b5bd6;
+--rad-ui-color-iris-900: #5151cd;
+--rad-ui-color-iris-950: #5753c6;
+--rad-ui-color-iris-1000: #272962;
+--rad-ui-color-indigo-50: #fdfdfe;
+--rad-ui-color-indigo-100: #f7f9ff;
+--rad-ui-color-indigo-200: #edf2fe;
+--rad-ui-color-indigo-300: #e1e9ff;
+--rad-ui-color-indigo-400: #d2deff;
+--rad-ui-color-indigo-500: #c1d0ff;
+--rad-ui-color-indigo-600: #abbdf9;
+--rad-ui-color-indigo-700: #8da4ef;
+--rad-ui-color-indigo-800: #3e63dd;
+--rad-ui-color-indigo-900: #3358d4;
+--rad-ui-color-indigo-950: #3a5bc7;
+--rad-ui-color-indigo-1000: #1f2d5c;
+--rad-ui-color-blue-50: #fbfdff;
+--rad-ui-color-blue-100: #f4faff;
+--rad-ui-color-blue-200: #e6f4fe;
+--rad-ui-color-blue-300: #d5efff;
+--rad-ui-color-blue-400: #c2e5ff;
+--rad-ui-color-blue-500: #acd8fc;
+--rad-ui-color-blue-600: #8ec8f6;
+--rad-ui-color-blue-700: #5eb1ef;
+--rad-ui-color-blue-800: #0090ff;
+--rad-ui-color-blue-900: #0588f0;
+--rad-ui-color-blue-950: #0d74ce;
+--rad-ui-color-blue-1000: #113264;
+--rad-ui-color-cyan-50: #fafdfe;
+--rad-ui-color-cyan-100: #f2fafb;
+--rad-ui-color-cyan-200: #def7f9;
+--rad-ui-color-cyan-300: #caf1f6;
+--rad-ui-color-cyan-400: #b5e9f0;
+--rad-ui-color-cyan-500: #9ddde7;
+--rad-ui-color-cyan-600: #7dcedc;
+--rad-ui-color-cyan-700: #3db9cf;
+--rad-ui-color-cyan-800: #00a2c7;
+--rad-ui-color-cyan-900: #0797b9;
+--rad-ui-color-cyan-950: #107d98;
+--rad-ui-color-cyan-1000: #0d3c48;
+--rad-ui-color-teal-50: #fbfefd;
+--rad-ui-color-teal-100: #f4fbf7;
+--rad-ui-color-teal-200: #e6f7ed;
+--rad-ui-color-teal-300: #d6f1e3;
+--rad-ui-color-teal-400: #c3e9d7;
+--rad-ui-color-teal-500: #acdec8;
+--rad-ui-color-teal-600: #8bceb6;
+--rad-ui-color-teal-700: #56ba9f;
+--rad-ui-color-teal-800: #29a383;
+--rad-ui-color-teal-900: #26997b;
+--rad-ui-color-teal-950: #208368;
+--rad-ui-color-teal-1000: #1d3b31;
+--rad-ui-color-jade-50: #fbfefd;
+--rad-ui-color-jade-100: #f4fbf7;
+--rad-ui-color-jade-200: #e6f7ed;
+--rad-ui-color-jade-300: #d6f1e3;
+--rad-ui-color-jade-400: #c3e9d7;
+--rad-ui-color-jade-500: #acdec8;
+--rad-ui-color-jade-600: #8bceb6;
+--rad-ui-color-jade-700: #56ba9f;
+--rad-ui-color-jade-800: #29a383;
+--rad-ui-color-jade-900: #26997b;
+--rad-ui-color-jade-950: #208368;
+--rad-ui-color-jade-1000: #1d3b31;
+--rad-ui-color-green-50: #fbfefc;
+--rad-ui-color-green-100: #f4fbf6;
+--rad-ui-color-green-200: #e6f6eb;
+--rad-ui-color-green-300: #d6f1df;
+--rad-ui-color-green-400: #c4e8d1;
+--rad-ui-color-green-500: #adddc0;
+--rad-ui-color-green-600: #8eceaa;
+--rad-ui-color-green-700: #5bb98b;
+--rad-ui-color-green-800: #30a46c;
+--rad-ui-color-green-900: #2b9a66;
+--rad-ui-color-green-950: #218358;
+--rad-ui-color-green-1000: #193b2d;
+--rad-ui-color-grass-50: #fbfefb;
+--rad-ui-color-grass-100: #f5fbf5;
+--rad-ui-color-grass-200: #e9f6e9;
+--rad-ui-color-grass-300: #daf1db;
+--rad-ui-color-grass-400: #c9e8ca;
+--rad-ui-color-grass-500: #b2ddb5;
+--rad-ui-color-grass-600: #94ce9a;
+--rad-ui-color-grass-700: #65ba74;
+--rad-ui-color-grass-800: #46a758;
+--rad-ui-color-grass-900: #3e9b4f;
+--rad-ui-color-grass-950: #2a7e3b;
+--rad-ui-color-grass-1000: #203c25;
+--rad-ui-color-brown-50: #fefdfc;
+--rad-ui-color-brown-100: #fcf9f6;
+--rad-ui-color-brown-200: #f6eee7;
+--rad-ui-color-brown-300: #f0e4d9;
+--rad-ui-color-brown-400: #ebdaca;
+--rad-ui-color-brown-500: #e4cdb7;
+--rad-ui-color-brown-600: #dcbc9f;
+--rad-ui-color-brown-700: #cea37e;
+--rad-ui-color-brown-800: #ad7f58;
+--rad-ui-color-brown-900: #a07553;
+--rad-ui-color-brown-950: #815e46;
+--rad-ui-color-brown-1000: #3e332e;
+--rad-ui-color-bronze-50: #fdfcfc;
+--rad-ui-color-bronze-100: #fcf9f6;
+--rad-ui-color-bronze-200: #f6eee7;
+--rad-ui-color-bronze-300: #f0e4d9;
+--rad-ui-color-bronze-400: #ebdaca;
+--rad-ui-color-bronze-500: #e4cdb7;
+--rad-ui-color-bronze-600: #dcbc9f;
+--rad-ui-color-bronze-700: #cea37e;
+--rad-ui-color-bronze-800: #ad7f58;
+--rad-ui-color-bronze-900: #a07553;
+--rad-ui-color-bronze-950: #815e46;
+--rad-ui-color-bronze-1000: #3e332e;
+--rad-ui-color-gold-50: #fdfdfc;
+--rad-ui-color-gold-100: #faf9f2;
+--rad-ui-color-gold-200: #f2f0e7;
+--rad-ui-color-gold-300: #eae6db;
+--rad-ui-color-gold-400: #e1dccf;
+--rad-ui-color-gold-500: #d8d0bf;
+--rad-ui-color-gold-600: #cbc0aa;
+--rad-ui-color-gold-700: #b9a88d;
+--rad-ui-color-gold-800: #978365;
+--rad-ui-color-gold-900: #8c7a5e;
+--rad-ui-color-gold-950: #71624b;
+--rad-ui-color-gold-1000: #3b352b;
+--rad-ui-color-sky-50: #f9feff;
+--rad-ui-color-sky-100: #f1fafd;
+--rad-ui-color-sky-200: #e1f6fd;
+--rad-ui-color-sky-300: #d1f0fa;
+--rad-ui-color-sky-400: #bee7f5;
+--rad-ui-color-sky-500: #a9daed;
+--rad-ui-color-sky-600: #8dcae3;
+--rad-ui-color-sky-700: #60b3d7;
+--rad-ui-color-sky-800: #7ce2fe;
+--rad-ui-color-sky-900: #74daf8;
+--rad-ui-color-sky-950: #00749e;
+--rad-ui-color-sky-1000: #1d3e56;
+--rad-ui-color-mint-50: #f9fefd;
+--rad-ui-color-mint-100: #f2fbf9;
+--rad-ui-color-mint-200: #ddf9f2;
+--rad-ui-color-mint-300: #c8f4e9;
+--rad-ui-color-mint-400: #b3ecde;
+--rad-ui-color-mint-500: #9ce0d0;
+--rad-ui-color-mint-600: #7ecfbd;
+--rad-ui-color-mint-700: #4cbba5;
+--rad-ui-color-mint-800: #86ead4;
+--rad-ui-color-mint-900: #7de0cb;
+--rad-ui-color-mint-950: #027864;
+--rad-ui-color-mint-1000: #16433c;
+--rad-ui-color-lime-50: #fcfdfa;
+--rad-ui-color-lime-100: #f8faf3;
+--rad-ui-color-lime-200: #eef6d6;
+--rad-ui-color-lime-300: #e2f0bd;
+--rad-ui-color-lime-400: #d3e7a6;
+--rad-ui-color-lime-500: #c2da91;
+--rad-ui-color-lime-600: #abc978;
+--rad-ui-color-lime-700: #8db654;
+--rad-ui-color-lime-800: #bdee63;
+--rad-ui-color-lime-900: #b0e64c;
+--rad-ui-color-lime-950: #5c7c2f;
+--rad-ui-color-lime-1000: #37401c;
+--rad-ui-color-yellow-50: #fdfdf9;
+--rad-ui-color-yellow-100: #fefce9;
+--rad-ui-color-yellow-200: #fffab8;
+--rad-ui-color-yellow-300: #fff394;
+--rad-ui-color-yellow-400: #ffe770;
+--rad-ui-color-yellow-500: #f3d768;
+--rad-ui-color-yellow-600: #e4c767;
+--rad-ui-color-yellow-700: #d5ae39;
+--rad-ui-color-yellow-800: #ffe629;
+--rad-ui-color-yellow-900: #ffdc00;
+--rad-ui-color-yellow-950: #9e6c00;
+--rad-ui-color-yellow-1000: #473b1f;
+--rad-ui-color-amber-50: #fefdfb;
+--rad-ui-color-amber-100: #fefbe9;
+--rad-ui-color-amber-200: #fff7c2;
+--rad-ui-color-amber-300: #ffee9c;
+--rad-ui-color-amber-400: #fbe577;
+--rad-ui-color-amber-500: #f3d673;
+--rad-ui-color-amber-600: #e9c162;
+--rad-ui-color-amber-700: #e2a336;
+--rad-ui-color-amber-800: #ffc53d;
+--rad-ui-color-amber-900: #ffba18;
+--rad-ui-color-amber-950: #ab6400;
+--rad-ui-color-amber-1000: #4f3422;
+--rad-ui-color-orange-50: #fefcfb;
+--rad-ui-color-orange-100: #fff7ed;
+--rad-ui-color-orange-200: #ffefd6;
+--rad-ui-color-orange-300: #ffdfb5;
+--rad-ui-color-orange-400: #ffd19a;
+--rad-ui-color-orange-500: #ffc182;
+--rad-ui-color-orange-600: #f5ae73;
+--rad-ui-color-orange-700: #ec9455;
+--rad-ui-color-orange-800: #f76b15;
+--rad-ui-color-orange-900: #ef5f00;
+--rad-ui-color-orange-950: #cc4e00;
+--rad-ui-color-orange-1000: #582d1d;
    
   }
 
@@ -340,6 +556,258 @@
 --rad-ui-color-accent-900: var(--rad-ui-color-purple-900);
 --rad-ui-color-accent-950: var(--rad-ui-color-purple-950);
 --rad-ui-color-accent-1000: var(--rad-ui-color-purple-1000);
+}
+[data-accent-color=violet]{
+--rad-ui-color-accent-50: var(--rad-ui-color-violet-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-violet-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-violet-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-violet-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-violet-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-violet-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-violet-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-violet-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-violet-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-violet-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-violet-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-violet-1000);
+}
+[data-accent-color=iris]{
+--rad-ui-color-accent-50: var(--rad-ui-color-iris-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-iris-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-iris-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-iris-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-iris-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-iris-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-iris-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-iris-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-iris-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-iris-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-iris-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-iris-1000);
+}
+[data-accent-color=indigo]{
+--rad-ui-color-accent-50: var(--rad-ui-color-indigo-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-indigo-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-indigo-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-indigo-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-indigo-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-indigo-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-indigo-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-indigo-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-indigo-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-indigo-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-indigo-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-indigo-1000);
+}
+[data-accent-color=blue]{
+--rad-ui-color-accent-50: var(--rad-ui-color-blue-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-blue-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-blue-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-blue-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-blue-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-blue-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-blue-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-blue-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-blue-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-blue-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-blue-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-blue-1000);
+}
+[data-accent-color=cyan]{
+--rad-ui-color-accent-50: var(--rad-ui-color-cyan-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-cyan-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-cyan-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-cyan-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-cyan-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-cyan-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-cyan-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-cyan-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-cyan-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-cyan-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-cyan-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-cyan-1000);
+}
+[data-accent-color=teal]{
+--rad-ui-color-accent-50: var(--rad-ui-color-teal-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-teal-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-teal-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-teal-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-teal-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-teal-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-teal-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-teal-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-teal-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-teal-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-teal-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-teal-1000);
+}
+[data-accent-color=jade]{
+--rad-ui-color-accent-50: var(--rad-ui-color-jade-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-jade-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-jade-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-jade-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-jade-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-jade-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-jade-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-jade-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-jade-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-jade-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-jade-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-jade-1000);
+}
+[data-accent-color=green]{
+--rad-ui-color-accent-50: var(--rad-ui-color-green-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-green-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-green-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-green-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-green-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-green-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-green-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-green-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-green-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-green-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-green-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-green-1000);
+}
+[data-accent-color=grass]{
+--rad-ui-color-accent-50: var(--rad-ui-color-grass-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-grass-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-grass-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-grass-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-grass-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-grass-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-grass-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-grass-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-grass-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-grass-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-grass-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-grass-1000);
+}
+[data-accent-color=brown]{
+--rad-ui-color-accent-50: var(--rad-ui-color-brown-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-brown-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-brown-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-brown-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-brown-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-brown-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-brown-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-brown-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-brown-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-brown-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-brown-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-brown-1000);
+}
+[data-accent-color=bronze]{
+--rad-ui-color-accent-50: var(--rad-ui-color-bronze-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-bronze-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-bronze-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-bronze-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-bronze-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-bronze-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-bronze-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-bronze-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-bronze-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-bronze-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-bronze-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-bronze-1000);
+}
+[data-accent-color=gold]{
+--rad-ui-color-accent-50: var(--rad-ui-color-gold-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-gold-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-gold-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-gold-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-gold-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-gold-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-gold-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-gold-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-gold-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-gold-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-gold-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-gold-1000);
+}
+[data-accent-color=sky]{
+--rad-ui-color-accent-50: var(--rad-ui-color-sky-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-sky-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-sky-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-sky-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-sky-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-sky-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-sky-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-sky-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-sky-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-sky-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-sky-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-sky-1000);
+}
+[data-accent-color=mint]{
+--rad-ui-color-accent-50: var(--rad-ui-color-mint-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-mint-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-mint-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-mint-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-mint-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-mint-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-mint-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-mint-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-mint-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-mint-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-mint-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-mint-1000);
+}
+[data-accent-color=lime]{
+--rad-ui-color-accent-50: var(--rad-ui-color-lime-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-lime-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-lime-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-lime-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-lime-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-lime-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-lime-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-lime-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-lime-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-lime-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-lime-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-lime-1000);
+}
+[data-accent-color=yellow]{
+--rad-ui-color-accent-50: var(--rad-ui-color-yellow-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-yellow-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-yellow-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-yellow-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-yellow-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-yellow-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-yellow-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-yellow-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-yellow-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-yellow-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-yellow-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-yellow-1000);
+}
+[data-accent-color=amber]{
+--rad-ui-color-accent-50: var(--rad-ui-color-amber-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-amber-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-amber-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-amber-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-amber-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-amber-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-amber-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-amber-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-amber-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-amber-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-amber-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-amber-1000);
+}
+[data-accent-color=orange]{
+--rad-ui-color-accent-50: var(--rad-ui-color-orange-50);
+--rad-ui-color-accent-100: var(--rad-ui-color-orange-100);
+--rad-ui-color-accent-200: var(--rad-ui-color-orange-200);
+--rad-ui-color-accent-300: var(--rad-ui-color-orange-300);
+--rad-ui-color-accent-400: var(--rad-ui-color-orange-400);
+--rad-ui-color-accent-500: var(--rad-ui-color-orange-500);
+--rad-ui-color-accent-600: var(--rad-ui-color-orange-600);
+--rad-ui-color-accent-700: var(--rad-ui-color-orange-700);
+--rad-ui-color-accent-800: var(--rad-ui-color-orange-800);
+--rad-ui-color-accent-900: var(--rad-ui-color-orange-900);
+--rad-ui-color-accent-950: var(--rad-ui-color-orange-950);
+--rad-ui-color-accent-1000: var(--rad-ui-color-orange-1000);
 }
 
 
@@ -500,4 +968,220 @@
 --rad-ui-color-purple-900: hsl(271, 57.8%, 61.2%);
 --rad-ui-color-purple-950: hsl(270, 90.0%, 78.0%);
 --rad-ui-color-purple-1000: hsl(275, 75.0%, 91.5%);
+--rad-ui-color-violet-50: #14121f;
+--rad-ui-color-violet-100: #1b1525;
+--rad-ui-color-violet-200: #291f43;
+--rad-ui-color-violet-300: #33255b;
+--rad-ui-color-violet-400: #3c2e69;
+--rad-ui-color-violet-500: #473876;
+--rad-ui-color-violet-600: #56468b;
+--rad-ui-color-violet-700: #6958ad;
+--rad-ui-color-violet-800: #6e56cf;
+--rad-ui-color-violet-900: #7d66d9;
+--rad-ui-color-violet-950: #baa7ff;
+--rad-ui-color-violet-1000: #e2ddfe;
+--rad-ui-color-iris-50: #13131e;
+--rad-ui-color-iris-100: #171625;
+--rad-ui-color-iris-200: #202248;
+--rad-ui-color-iris-300: #262a65;
+--rad-ui-color-iris-400: #303374;
+--rad-ui-color-iris-500: #3d3e82;
+--rad-ui-color-iris-600: #4a4a95;
+--rad-ui-color-iris-700: #5958b1;
+--rad-ui-color-iris-800: #5b5bd6;
+--rad-ui-color-iris-900: #6e6ade;
+--rad-ui-color-iris-950: #b1a9ff;
+--rad-ui-color-iris-1000: #e0dffe;
+--rad-ui-color-indigo-50: #11131f;
+--rad-ui-color-indigo-100: #141726;
+--rad-ui-color-indigo-200: #182449;
+--rad-ui-color-indigo-300: #1d2e62;
+--rad-ui-color-indigo-400: #253974;
+--rad-ui-color-indigo-500: #304384;
+--rad-ui-color-indigo-600: #3a4f97;
+--rad-ui-color-indigo-700: #435db1;
+--rad-ui-color-indigo-800: #3e63dd;
+--rad-ui-color-indigo-900: #5472e4;
+--rad-ui-color-indigo-950: #9eb1ff;
+--rad-ui-color-indigo-1000: #d6e1ff;
+--rad-ui-color-blue-50: #0d1520;
+--rad-ui-color-blue-100: #111927;
+--rad-ui-color-blue-200: #0d2847;
+--rad-ui-color-blue-300: #003362;
+--rad-ui-color-blue-400: #004074;
+--rad-ui-color-blue-500: #104d87;
+--rad-ui-color-blue-600: #205d9e;
+--rad-ui-color-blue-700: #2870bd;
+--rad-ui-color-blue-800: #0090ff;
+--rad-ui-color-blue-900: #3b9eff;
+--rad-ui-color-blue-950: #70b8ff;
+--rad-ui-color-blue-1000: #c2e6ff;
+--rad-ui-color-cyan-50: #0b161a;
+--rad-ui-color-cyan-100: #101b20;
+--rad-ui-color-cyan-200: #082c36;
+--rad-ui-color-cyan-300: #003848;
+--rad-ui-color-cyan-400: #004558;
+--rad-ui-color-cyan-500: #045468;
+--rad-ui-color-cyan-600: #12677e;
+--rad-ui-color-cyan-700: #11809c;
+--rad-ui-color-cyan-800: #00a2c7;
+--rad-ui-color-cyan-900: #23afd0;
+--rad-ui-color-cyan-950: #4ccce6;
+--rad-ui-color-cyan-1000: #b6ecf7;
+--rad-ui-color-teal-50: #0d1512;
+--rad-ui-color-teal-100: #121c18;
+--rad-ui-color-teal-200: #0f2e22;
+--rad-ui-color-teal-300: #0b3b2c;
+--rad-ui-color-teal-400: #114837;
+--rad-ui-color-teal-500: #1b5745;
+--rad-ui-color-teal-600: #246854;
+--rad-ui-color-teal-700: #2a7e68;
+--rad-ui-color-teal-800: #29a383;
+--rad-ui-color-teal-900: #27b08b;
+--rad-ui-color-teal-950: #1fd8a4;
+--rad-ui-color-teal-1000: #adf0d4;
+--rad-ui-color-jade-50: #0d1512;
+--rad-ui-color-jade-100: #121c18;
+--rad-ui-color-jade-200: #0f2e22;
+--rad-ui-color-jade-300: #0b3b2c;
+--rad-ui-color-jade-400: #114837;
+--rad-ui-color-jade-500: #1b5745;
+--rad-ui-color-jade-600: #246854;
+--rad-ui-color-jade-700: #2a7e68;
+--rad-ui-color-jade-800: #29a383;
+--rad-ui-color-jade-900: #27b08b;
+--rad-ui-color-jade-950: #1fd8a4;
+--rad-ui-color-jade-1000: #adf0d4;
+--rad-ui-color-green-50: #0e1512;
+--rad-ui-color-green-100: #121b17;
+--rad-ui-color-green-200: #132d21;
+--rad-ui-color-green-300: #113b29;
+--rad-ui-color-green-400: #174933;
+--rad-ui-color-green-500: #20573e;
+--rad-ui-color-green-600: #28684a;
+--rad-ui-color-green-700: #2f7c57;
+--rad-ui-color-green-800: #30a46c;
+--rad-ui-color-green-900: #33b074;
+--rad-ui-color-green-950: #3dd68c;
+--rad-ui-color-green-1000: #b1f1cb;
+--rad-ui-color-grass-50: #0e1511;
+--rad-ui-color-grass-100: #141a15;
+--rad-ui-color-grass-200: #1b2a1e;
+--rad-ui-color-grass-300: #1d3a24;
+--rad-ui-color-grass-400: #25482d;
+--rad-ui-color-grass-500: #2d5736;
+--rad-ui-color-grass-600: #366740;
+--rad-ui-color-grass-700: #3e7949;
+--rad-ui-color-grass-800: #46a758;
+--rad-ui-color-grass-900: #53b365;
+--rad-ui-color-grass-950: #71d083;
+--rad-ui-color-grass-1000: #c2f0c2;
+--rad-ui-color-brown-50: #12110f;
+--rad-ui-color-brown-100: #1c1816;
+--rad-ui-color-brown-200: #28211d;
+--rad-ui-color-brown-300: #322922;
+--rad-ui-color-brown-400: #3e3128;
+--rad-ui-color-brown-500: #4d3c2f;
+--rad-ui-color-brown-600: #614a39;
+--rad-ui-color-brown-700: #7c5f46;
+--rad-ui-color-brown-800: #ad7f58;
+--rad-ui-color-brown-900: #b88c67;
+--rad-ui-color-brown-950: #dbb594;
+--rad-ui-color-brown-1000: #f2e1ca;
+--rad-ui-color-bronze-50: #141110;
+--rad-ui-color-bronze-100: #1a1715;
+--rad-ui-color-bronze-200: #26221e;
+--rad-ui-color-bronze-300: #2f2a24;
+--rad-ui-color-bronze-400: #3b3330;
+--rad-ui-color-bronze-500: #493e3a;
+--rad-ui-color-bronze-600: #5a4c47;
+--rad-ui-color-bronze-700: #6f5f58;
+--rad-ui-color-bronze-800: #a18072;
+--rad-ui-color-bronze-900: #ae8c7e;
+--rad-ui-color-bronze-950: #d4b3a5;
+--rad-ui-color-bronze-1000: #ede0d9;
+--rad-ui-color-gold-50: #121211;
+--rad-ui-color-gold-100: #1b1a17;
+--rad-ui-color-gold-200: #24231f;
+--rad-ui-color-gold-300: #2d2b26;
+--rad-ui-color-gold-400: #38352e;
+--rad-ui-color-gold-500: #444039;
+--rad-ui-color-gold-600: #544f46;
+--rad-ui-color-gold-700: #696256;
+--rad-ui-color-gold-800: #978365;
+--rad-ui-color-gold-900: #a39073;
+--rad-ui-color-gold-950: #cbb99f;
+--rad-ui-color-gold-1000: #e8e2d9;
+--rad-ui-color-sky-50: #0d141f;
+--rad-ui-color-sky-100: #111a27;
+--rad-ui-color-sky-200: #112840;
+--rad-ui-color-sky-300: #113555;
+--rad-ui-color-sky-400: #154467;
+--rad-ui-color-sky-500: #1b537b;
+--rad-ui-color-sky-600: #1f6692;
+--rad-ui-color-sky-700: #197cae;
+--rad-ui-color-sky-800: #7ce2fe;
+--rad-ui-color-sky-900: #a8eeff;
+--rad-ui-color-sky-950: #75c7f0;
+--rad-ui-color-sky-1000: #c2f3ff;
+--rad-ui-color-mint-50: #0e1515;
+--rad-ui-color-mint-100: #0f1b1b;
+--rad-ui-color-mint-200: #092c2b;
+--rad-ui-color-mint-300: #003a38;
+--rad-ui-color-mint-400: #004744;
+--rad-ui-color-mint-500: #105650;
+--rad-ui-color-mint-600: #1e685f;
+--rad-ui-color-mint-700: #277f70;
+--rad-ui-color-mint-800: #86ead4;
+--rad-ui-color-mint-900: #a8f5e5;
+--rad-ui-color-mint-950: #58d5ba;
+--rad-ui-color-mint-1000: #c4f5e1;
+--rad-ui-color-lime-50: #11130c;
+--rad-ui-color-lime-100: #151a10;
+--rad-ui-color-lime-200: #1f2917;
+--rad-ui-color-lime-300: #29371d;
+--rad-ui-color-lime-400: #334423;
+--rad-ui-color-lime-500: #3d522a;
+--rad-ui-color-lime-600: #496231;
+--rad-ui-color-lime-700: #577538;
+--rad-ui-color-lime-800: #bdee63;
+--rad-ui-color-lime-900: #d4ff70;
+--rad-ui-color-lime-950: #bde56c;
+--rad-ui-color-lime-1000: #e3f7ba;
+--rad-ui-color-yellow-50: #14120b;
+--rad-ui-color-yellow-100: #1b180f;
+--rad-ui-color-yellow-200: #2d2305;
+--rad-ui-color-yellow-300: #362b00;
+--rad-ui-color-yellow-400: #433500;
+--rad-ui-color-yellow-500: #524202;
+--rad-ui-color-yellow-600: #665417;
+--rad-ui-color-yellow-700: #836a21;
+--rad-ui-color-yellow-800: #ffe629;
+--rad-ui-color-yellow-900: #ffff57;
+--rad-ui-color-yellow-950: #f5e147;
+--rad-ui-color-yellow-1000: #f6eeb4;
+--rad-ui-color-amber-50: #16120c;
+--rad-ui-color-amber-100: #1d180f;
+--rad-ui-color-amber-200: #302008;
+--rad-ui-color-amber-300: #3f2700;
+--rad-ui-color-amber-400: #4d3000;
+--rad-ui-color-amber-500: #5c3d05;
+--rad-ui-color-amber-600: #714f19;
+--rad-ui-color-amber-700: #8f6424;
+--rad-ui-color-amber-800: #ffc53d;
+--rad-ui-color-amber-900: #ffd60a;
+--rad-ui-color-amber-950: #ffca16;
+--rad-ui-color-amber-1000: #ffe7b3;
+--rad-ui-color-orange-50: #17120e;
+--rad-ui-color-orange-100: #1e160f;
+--rad-ui-color-orange-200: #331e0b;
+--rad-ui-color-orange-300: #462100;
+--rad-ui-color-orange-400: #562800;
+--rad-ui-color-orange-500: #66350c;
+--rad-ui-color-orange-600: #7e451d;
+--rad-ui-color-orange-700: #a35829;
+--rad-ui-color-orange-800: #f76b15;
+--rad-ui-color-orange-900: #ff801f;
+--rad-ui-color-orange-950: #ffa057;
+--rad-ui-color-orange-1000: #ffe0c2;
   }
diff --git a/styles/jsTokens/base.tokens.js b/styles/jsTokens/base.tokens.js
index ae700848..785b6cbb 100644
--- a/styles/jsTokens/base.tokens.js
+++ b/styles/jsTokens/base.tokens.js
@@ -1 +1 @@
-export default {'gray': {'50': 'var(--rad-ui-color-gray-50)', '100': 'var(--rad-ui-color-gray-100)', '200': 'var(--rad-ui-color-gray-200)', '300': 'var(--rad-ui-color-gray-300)', '400': 'var(--rad-ui-color-gray-400)', '500': 'var(--rad-ui-color-gray-500)', '600': 'var(--rad-ui-color-gray-600)', '700': 'var(--rad-ui-color-gray-700)', '800': 'var(--rad-ui-color-gray-800)', '900': 'var(--rad-ui-color-gray-900)', '950': 'var(--rad-ui-color-gray-950)', '1000': 'var(--rad-ui-color-gray-1000)'}, 'mauve': {'50': 'var(--rad-ui-color-mauve-50)', '100': 'var(--rad-ui-color-mauve-100)', '200': 'var(--rad-ui-color-mauve-200)', '300': 'var(--rad-ui-color-mauve-300)', '400': 'var(--rad-ui-color-mauve-400)', '500': 'var(--rad-ui-color-mauve-500)', '600': 'var(--rad-ui-color-mauve-600)', '700': 'var(--rad-ui-color-mauve-700)', '800': 'var(--rad-ui-color-mauve-800)', '900': 'var(--rad-ui-color-mauve-900)', '950': 'var(--rad-ui-color-mauve-950)', '1000': 'var(--rad-ui-color-mauve-1000)'}, 'slate': {'50': 'var(--rad-ui-color-slate-50)', '100': 'var(--rad-ui-color-slate-100)', '200': 'var(--rad-ui-color-slate-200)', '300': 'var(--rad-ui-color-slate-300)', '400': 'var(--rad-ui-color-slate-400)', '500': 'var(--rad-ui-color-slate-500)', '600': 'var(--rad-ui-color-slate-600)', '700': 'var(--rad-ui-color-slate-700)', '800': 'var(--rad-ui-color-slate-800)', '900': 'var(--rad-ui-color-slate-900)', '950': 'var(--rad-ui-color-slate-950)', '1000': 'var(--rad-ui-color-slate-1000)'}, 'sage': {'50': 'var(--rad-ui-color-sage-50)', '100': 'var(--rad-ui-color-sage-100)', '200': 'var(--rad-ui-color-sage-200)', '300': 'var(--rad-ui-color-sage-300)', '400': 'var(--rad-ui-color-sage-400)', '500': 'var(--rad-ui-color-sage-500)', '600': 'var(--rad-ui-color-sage-600)', '700': 'var(--rad-ui-color-sage-700)', '800': 'var(--rad-ui-color-sage-800)', '900': 'var(--rad-ui-color-sage-900)', '950': 'var(--rad-ui-color-sage-950)', '1000': 'var(--rad-ui-color-sage-1000)'}, 'olive': {'50': 'var(--rad-ui-color-olive-50)', '100': 'var(--rad-ui-color-olive-100)', '200': 'var(--rad-ui-color-olive-200)', '300': 'var(--rad-ui-color-olive-300)', '400': 'var(--rad-ui-color-olive-400)', '500': 'var(--rad-ui-color-olive-500)', '600': 'var(--rad-ui-color-olive-600)', '700': 'var(--rad-ui-color-olive-700)', '800': 'var(--rad-ui-color-olive-800)', '900': 'var(--rad-ui-color-olive-900)', '950': 'var(--rad-ui-color-olive-950)', '1000': 'var(--rad-ui-color-olive-1000)'}, 'sand': {'50': 'var(--rad-ui-color-sand-50)', '100': 'var(--rad-ui-color-sand-100)', '200': 'var(--rad-ui-color-sand-200)', '300': 'var(--rad-ui-color-sand-300)', '400': 'var(--rad-ui-color-sand-400)', '500': 'var(--rad-ui-color-sand-500)', '600': 'var(--rad-ui-color-sand-600)', '700': 'var(--rad-ui-color-sand-700)', '800': 'var(--rad-ui-color-sand-800)', '900': 'var(--rad-ui-color-sand-900)', '950': 'var(--rad-ui-color-sand-950)', '1000': 'var(--rad-ui-color-sand-1000)'}, 'tomato': {'50': 'var(--rad-ui-color-tomato-50)', '100': 'var(--rad-ui-color-tomato-100)', '200': 'var(--rad-ui-color-tomato-200)', '300': 'var(--rad-ui-color-tomato-300)', '400': 'var(--rad-ui-color-tomato-400)', '500': 'var(--rad-ui-color-tomato-500)', '600': 'var(--rad-ui-color-tomato-600)', '700': 'var(--rad-ui-color-tomato-700)', '800': 'var(--rad-ui-color-tomato-800)', '900': 'var(--rad-ui-color-tomato-900)', '950': 'var(--rad-ui-color-tomato-950)', '1000': 'var(--rad-ui-color-tomato-1000)'}, 'red': {'50': 'var(--rad-ui-color-red-50)', '100': 'var(--rad-ui-color-red-100)', '200': 'var(--rad-ui-color-red-200)', '300': 'var(--rad-ui-color-red-300)', '400': 'var(--rad-ui-color-red-400)', '500': 'var(--rad-ui-color-red-500)', '600': 'var(--rad-ui-color-red-600)', '700': 'var(--rad-ui-color-red-700)', '800': 'var(--rad-ui-color-red-800)', '900': 'var(--rad-ui-color-red-900)', '950': 'var(--rad-ui-color-red-950)', '1000': 'var(--rad-ui-color-red-1000)'}, 'ruby': {'50': 'var(--rad-ui-color-ruby-50)', '100': 'var(--rad-ui-color-ruby-100)', '200': 'var(--rad-ui-color-ruby-200)', '300': 'var(--rad-ui-color-ruby-300)', '400': 'var(--rad-ui-color-ruby-400)', '500': 'var(--rad-ui-color-ruby-500)', '600': 'var(--rad-ui-color-ruby-600)', '700': 'var(--rad-ui-color-ruby-700)', '800': 'var(--rad-ui-color-ruby-800)', '900': 'var(--rad-ui-color-ruby-900)', '950': 'var(--rad-ui-color-ruby-950)', '1000': 'var(--rad-ui-color-ruby-1000)'}, 'crimson': {'50': 'var(--rad-ui-color-crimson-50)', '100': 'var(--rad-ui-color-crimson-100)', '200': 'var(--rad-ui-color-crimson-200)', '300': 'var(--rad-ui-color-crimson-300)', '400': 'var(--rad-ui-color-crimson-400)', '500': 'var(--rad-ui-color-crimson-500)', '600': 'var(--rad-ui-color-crimson-600)', '700': 'var(--rad-ui-color-crimson-700)', '800': 'var(--rad-ui-color-crimson-800)', '900': 'var(--rad-ui-color-crimson-900)', '950': 'var(--rad-ui-color-crimson-950)', '1000': 'var(--rad-ui-color-crimson-1000)'}, 'pink': {'50': 'var(--rad-ui-color-pink-50)', '100': 'var(--rad-ui-color-pink-100)', '200': 'var(--rad-ui-color-pink-200)', '300': 'var(--rad-ui-color-pink-300)', '400': 'var(--rad-ui-color-pink-400)', '500': 'var(--rad-ui-color-pink-500)', '600': 'var(--rad-ui-color-pink-600)', '700': 'var(--rad-ui-color-pink-700)', '800': 'var(--rad-ui-color-pink-800)', '900': 'var(--rad-ui-color-pink-900)', '950': 'var(--rad-ui-color-pink-950)', '1000': 'var(--rad-ui-color-pink-1000)'}, 'plum': {'50': 'var(--rad-ui-color-plum-50)', '100': 'var(--rad-ui-color-plum-100)', '200': 'var(--rad-ui-color-plum-200)', '300': 'var(--rad-ui-color-plum-300)', '400': 'var(--rad-ui-color-plum-400)', '500': 'var(--rad-ui-color-plum-500)', '600': 'var(--rad-ui-color-plum-600)', '700': 'var(--rad-ui-color-plum-700)', '800': 'var(--rad-ui-color-plum-800)', '900': 'var(--rad-ui-color-plum-900)', '950': 'var(--rad-ui-color-plum-950)', '1000': 'var(--rad-ui-color-plum-1000)'}, 'purple': {'50': 'var(--rad-ui-color-purple-50)', '100': 'var(--rad-ui-color-purple-100)', '200': 'var(--rad-ui-color-purple-200)', '300': 'var(--rad-ui-color-purple-300)', '400': 'var(--rad-ui-color-purple-400)', '500': 'var(--rad-ui-color-purple-500)', '600': 'var(--rad-ui-color-purple-600)', '700': 'var(--rad-ui-color-purple-700)', '800': 'var(--rad-ui-color-purple-800)', '900': 'var(--rad-ui-color-purple-900)', '950': 'var(--rad-ui-color-purple-950)', '1000': 'var(--rad-ui-color-purple-1000)'}};
+export default {'gray': {'50': 'var(--rad-ui-color-gray-50)', '100': 'var(--rad-ui-color-gray-100)', '200': 'var(--rad-ui-color-gray-200)', '300': 'var(--rad-ui-color-gray-300)', '400': 'var(--rad-ui-color-gray-400)', '500': 'var(--rad-ui-color-gray-500)', '600': 'var(--rad-ui-color-gray-600)', '700': 'var(--rad-ui-color-gray-700)', '800': 'var(--rad-ui-color-gray-800)', '900': 'var(--rad-ui-color-gray-900)', '950': 'var(--rad-ui-color-gray-950)', '1000': 'var(--rad-ui-color-gray-1000)'}, 'mauve': {'50': 'var(--rad-ui-color-mauve-50)', '100': 'var(--rad-ui-color-mauve-100)', '200': 'var(--rad-ui-color-mauve-200)', '300': 'var(--rad-ui-color-mauve-300)', '400': 'var(--rad-ui-color-mauve-400)', '500': 'var(--rad-ui-color-mauve-500)', '600': 'var(--rad-ui-color-mauve-600)', '700': 'var(--rad-ui-color-mauve-700)', '800': 'var(--rad-ui-color-mauve-800)', '900': 'var(--rad-ui-color-mauve-900)', '950': 'var(--rad-ui-color-mauve-950)', '1000': 'var(--rad-ui-color-mauve-1000)'}, 'slate': {'50': 'var(--rad-ui-color-slate-50)', '100': 'var(--rad-ui-color-slate-100)', '200': 'var(--rad-ui-color-slate-200)', '300': 'var(--rad-ui-color-slate-300)', '400': 'var(--rad-ui-color-slate-400)', '500': 'var(--rad-ui-color-slate-500)', '600': 'var(--rad-ui-color-slate-600)', '700': 'var(--rad-ui-color-slate-700)', '800': 'var(--rad-ui-color-slate-800)', '900': 'var(--rad-ui-color-slate-900)', '950': 'var(--rad-ui-color-slate-950)', '1000': 'var(--rad-ui-color-slate-1000)'}, 'sage': {'50': 'var(--rad-ui-color-sage-50)', '100': 'var(--rad-ui-color-sage-100)', '200': 'var(--rad-ui-color-sage-200)', '300': 'var(--rad-ui-color-sage-300)', '400': 'var(--rad-ui-color-sage-400)', '500': 'var(--rad-ui-color-sage-500)', '600': 'var(--rad-ui-color-sage-600)', '700': 'var(--rad-ui-color-sage-700)', '800': 'var(--rad-ui-color-sage-800)', '900': 'var(--rad-ui-color-sage-900)', '950': 'var(--rad-ui-color-sage-950)', '1000': 'var(--rad-ui-color-sage-1000)'}, 'olive': {'50': 'var(--rad-ui-color-olive-50)', '100': 'var(--rad-ui-color-olive-100)', '200': 'var(--rad-ui-color-olive-200)', '300': 'var(--rad-ui-color-olive-300)', '400': 'var(--rad-ui-color-olive-400)', '500': 'var(--rad-ui-color-olive-500)', '600': 'var(--rad-ui-color-olive-600)', '700': 'var(--rad-ui-color-olive-700)', '800': 'var(--rad-ui-color-olive-800)', '900': 'var(--rad-ui-color-olive-900)', '950': 'var(--rad-ui-color-olive-950)', '1000': 'var(--rad-ui-color-olive-1000)'}, 'sand': {'50': 'var(--rad-ui-color-sand-50)', '100': 'var(--rad-ui-color-sand-100)', '200': 'var(--rad-ui-color-sand-200)', '300': 'var(--rad-ui-color-sand-300)', '400': 'var(--rad-ui-color-sand-400)', '500': 'var(--rad-ui-color-sand-500)', '600': 'var(--rad-ui-color-sand-600)', '700': 'var(--rad-ui-color-sand-700)', '800': 'var(--rad-ui-color-sand-800)', '900': 'var(--rad-ui-color-sand-900)', '950': 'var(--rad-ui-color-sand-950)', '1000': 'var(--rad-ui-color-sand-1000)'}, 'tomato': {'50': 'var(--rad-ui-color-tomato-50)', '100': 'var(--rad-ui-color-tomato-100)', '200': 'var(--rad-ui-color-tomato-200)', '300': 'var(--rad-ui-color-tomato-300)', '400': 'var(--rad-ui-color-tomato-400)', '500': 'var(--rad-ui-color-tomato-500)', '600': 'var(--rad-ui-color-tomato-600)', '700': 'var(--rad-ui-color-tomato-700)', '800': 'var(--rad-ui-color-tomato-800)', '900': 'var(--rad-ui-color-tomato-900)', '950': 'var(--rad-ui-color-tomato-950)', '1000': 'var(--rad-ui-color-tomato-1000)'}, 'red': {'50': 'var(--rad-ui-color-red-50)', '100': 'var(--rad-ui-color-red-100)', '200': 'var(--rad-ui-color-red-200)', '300': 'var(--rad-ui-color-red-300)', '400': 'var(--rad-ui-color-red-400)', '500': 'var(--rad-ui-color-red-500)', '600': 'var(--rad-ui-color-red-600)', '700': 'var(--rad-ui-color-red-700)', '800': 'var(--rad-ui-color-red-800)', '900': 'var(--rad-ui-color-red-900)', '950': 'var(--rad-ui-color-red-950)', '1000': 'var(--rad-ui-color-red-1000)'}, 'ruby': {'50': 'var(--rad-ui-color-ruby-50)', '100': 'var(--rad-ui-color-ruby-100)', '200': 'var(--rad-ui-color-ruby-200)', '300': 'var(--rad-ui-color-ruby-300)', '400': 'var(--rad-ui-color-ruby-400)', '500': 'var(--rad-ui-color-ruby-500)', '600': 'var(--rad-ui-color-ruby-600)', '700': 'var(--rad-ui-color-ruby-700)', '800': 'var(--rad-ui-color-ruby-800)', '900': 'var(--rad-ui-color-ruby-900)', '950': 'var(--rad-ui-color-ruby-950)', '1000': 'var(--rad-ui-color-ruby-1000)'}, 'crimson': {'50': 'var(--rad-ui-color-crimson-50)', '100': 'var(--rad-ui-color-crimson-100)', '200': 'var(--rad-ui-color-crimson-200)', '300': 'var(--rad-ui-color-crimson-300)', '400': 'var(--rad-ui-color-crimson-400)', '500': 'var(--rad-ui-color-crimson-500)', '600': 'var(--rad-ui-color-crimson-600)', '700': 'var(--rad-ui-color-crimson-700)', '800': 'var(--rad-ui-color-crimson-800)', '900': 'var(--rad-ui-color-crimson-900)', '950': 'var(--rad-ui-color-crimson-950)', '1000': 'var(--rad-ui-color-crimson-1000)'}, 'pink': {'50': 'var(--rad-ui-color-pink-50)', '100': 'var(--rad-ui-color-pink-100)', '200': 'var(--rad-ui-color-pink-200)', '300': 'var(--rad-ui-color-pink-300)', '400': 'var(--rad-ui-color-pink-400)', '500': 'var(--rad-ui-color-pink-500)', '600': 'var(--rad-ui-color-pink-600)', '700': 'var(--rad-ui-color-pink-700)', '800': 'var(--rad-ui-color-pink-800)', '900': 'var(--rad-ui-color-pink-900)', '950': 'var(--rad-ui-color-pink-950)', '1000': 'var(--rad-ui-color-pink-1000)'}, 'plum': {'50': 'var(--rad-ui-color-plum-50)', '100': 'var(--rad-ui-color-plum-100)', '200': 'var(--rad-ui-color-plum-200)', '300': 'var(--rad-ui-color-plum-300)', '400': 'var(--rad-ui-color-plum-400)', '500': 'var(--rad-ui-color-plum-500)', '600': 'var(--rad-ui-color-plum-600)', '700': 'var(--rad-ui-color-plum-700)', '800': 'var(--rad-ui-color-plum-800)', '900': 'var(--rad-ui-color-plum-900)', '950': 'var(--rad-ui-color-plum-950)', '1000': 'var(--rad-ui-color-plum-1000)'}, 'purple': {'50': 'var(--rad-ui-color-purple-50)', '100': 'var(--rad-ui-color-purple-100)', '200': 'var(--rad-ui-color-purple-200)', '300': 'var(--rad-ui-color-purple-300)', '400': 'var(--rad-ui-color-purple-400)', '500': 'var(--rad-ui-color-purple-500)', '600': 'var(--rad-ui-color-purple-600)', '700': 'var(--rad-ui-color-purple-700)', '800': 'var(--rad-ui-color-purple-800)', '900': 'var(--rad-ui-color-purple-900)', '950': 'var(--rad-ui-color-purple-950)', '1000': 'var(--rad-ui-color-purple-1000)'}, 'violet': {'50': 'var(--rad-ui-color-violet-50)', '100': 'var(--rad-ui-color-violet-100)', '200': 'var(--rad-ui-color-violet-200)', '300': 'var(--rad-ui-color-violet-300)', '400': 'var(--rad-ui-color-violet-400)', '500': 'var(--rad-ui-color-violet-500)', '600': 'var(--rad-ui-color-violet-600)', '700': 'var(--rad-ui-color-violet-700)', '800': 'var(--rad-ui-color-violet-800)', '900': 'var(--rad-ui-color-violet-900)', '950': 'var(--rad-ui-color-violet-950)', '1000': 'var(--rad-ui-color-violet-1000)'}, 'iris': {'50': 'var(--rad-ui-color-iris-50)', '100': 'var(--rad-ui-color-iris-100)', '200': 'var(--rad-ui-color-iris-200)', '300': 'var(--rad-ui-color-iris-300)', '400': 'var(--rad-ui-color-iris-400)', '500': 'var(--rad-ui-color-iris-500)', '600': 'var(--rad-ui-color-iris-600)', '700': 'var(--rad-ui-color-iris-700)', '800': 'var(--rad-ui-color-iris-800)', '900': 'var(--rad-ui-color-iris-900)', '950': 'var(--rad-ui-color-iris-950)', '1000': 'var(--rad-ui-color-iris-1000)'}, 'indigo': {'50': 'var(--rad-ui-color-indigo-50)', '100': 'var(--rad-ui-color-indigo-100)', '200': 'var(--rad-ui-color-indigo-200)', '300': 'var(--rad-ui-color-indigo-300)', '400': 'var(--rad-ui-color-indigo-400)', '500': 'var(--rad-ui-color-indigo-500)', '600': 'var(--rad-ui-color-indigo-600)', '700': 'var(--rad-ui-color-indigo-700)', '800': 'var(--rad-ui-color-indigo-800)', '900': 'var(--rad-ui-color-indigo-900)', '950': 'var(--rad-ui-color-indigo-950)', '1000': 'var(--rad-ui-color-indigo-1000)'}, 'blue': {'50': 'var(--rad-ui-color-blue-50)', '100': 'var(--rad-ui-color-blue-100)', '200': 'var(--rad-ui-color-blue-200)', '300': 'var(--rad-ui-color-blue-300)', '400': 'var(--rad-ui-color-blue-400)', '500': 'var(--rad-ui-color-blue-500)', '600': 'var(--rad-ui-color-blue-600)', '700': 'var(--rad-ui-color-blue-700)', '800': 'var(--rad-ui-color-blue-800)', '900': 'var(--rad-ui-color-blue-900)', '950': 'var(--rad-ui-color-blue-950)', '1000': 'var(--rad-ui-color-blue-1000)'}, 'cyan': {'50': 'var(--rad-ui-color-cyan-50)', '100': 'var(--rad-ui-color-cyan-100)', '200': 'var(--rad-ui-color-cyan-200)', '300': 'var(--rad-ui-color-cyan-300)', '400': 'var(--rad-ui-color-cyan-400)', '500': 'var(--rad-ui-color-cyan-500)', '600': 'var(--rad-ui-color-cyan-600)', '700': 'var(--rad-ui-color-cyan-700)', '800': 'var(--rad-ui-color-cyan-800)', '900': 'var(--rad-ui-color-cyan-900)', '950': 'var(--rad-ui-color-cyan-950)', '1000': 'var(--rad-ui-color-cyan-1000)'}, 'teal': {'50': 'var(--rad-ui-color-teal-50)', '100': 'var(--rad-ui-color-teal-100)', '200': 'var(--rad-ui-color-teal-200)', '300': 'var(--rad-ui-color-teal-300)', '400': 'var(--rad-ui-color-teal-400)', '500': 'var(--rad-ui-color-teal-500)', '600': 'var(--rad-ui-color-teal-600)', '700': 'var(--rad-ui-color-teal-700)', '800': 'var(--rad-ui-color-teal-800)', '900': 'var(--rad-ui-color-teal-900)', '950': 'var(--rad-ui-color-teal-950)', '1000': 'var(--rad-ui-color-teal-1000)'}, 'jade': {'50': 'var(--rad-ui-color-jade-50)', '100': 'var(--rad-ui-color-jade-100)', '200': 'var(--rad-ui-color-jade-200)', '300': 'var(--rad-ui-color-jade-300)', '400': 'var(--rad-ui-color-jade-400)', '500': 'var(--rad-ui-color-jade-500)', '600': 'var(--rad-ui-color-jade-600)', '700': 'var(--rad-ui-color-jade-700)', '800': 'var(--rad-ui-color-jade-800)', '900': 'var(--rad-ui-color-jade-900)', '950': 'var(--rad-ui-color-jade-950)', '1000': 'var(--rad-ui-color-jade-1000)'}, 'green': {'50': 'var(--rad-ui-color-green-50)', '100': 'var(--rad-ui-color-green-100)', '200': 'var(--rad-ui-color-green-200)', '300': 'var(--rad-ui-color-green-300)', '400': 'var(--rad-ui-color-green-400)', '500': 'var(--rad-ui-color-green-500)', '600': 'var(--rad-ui-color-green-600)', '700': 'var(--rad-ui-color-green-700)', '800': 'var(--rad-ui-color-green-800)', '900': 'var(--rad-ui-color-green-900)', '950': 'var(--rad-ui-color-green-950)', '1000': 'var(--rad-ui-color-green-1000)'}, 'grass': {'50': 'var(--rad-ui-color-grass-50)', '100': 'var(--rad-ui-color-grass-100)', '200': 'var(--rad-ui-color-grass-200)', '300': 'var(--rad-ui-color-grass-300)', '400': 'var(--rad-ui-color-grass-400)', '500': 'var(--rad-ui-color-grass-500)', '600': 'var(--rad-ui-color-grass-600)', '700': 'var(--rad-ui-color-grass-700)', '800': 'var(--rad-ui-color-grass-800)', '900': 'var(--rad-ui-color-grass-900)', '950': 'var(--rad-ui-color-grass-950)', '1000': 'var(--rad-ui-color-grass-1000)'}, 'brown': {'50': 'var(--rad-ui-color-brown-50)', '100': 'var(--rad-ui-color-brown-100)', '200': 'var(--rad-ui-color-brown-200)', '300': 'var(--rad-ui-color-brown-300)', '400': 'var(--rad-ui-color-brown-400)', '500': 'var(--rad-ui-color-brown-500)', '600': 'var(--rad-ui-color-brown-600)', '700': 'var(--rad-ui-color-brown-700)', '800': 'var(--rad-ui-color-brown-800)', '900': 'var(--rad-ui-color-brown-900)', '950': 'var(--rad-ui-color-brown-950)', '1000': 'var(--rad-ui-color-brown-1000)'}, 'bronze': {'50': 'var(--rad-ui-color-bronze-50)', '100': 'var(--rad-ui-color-bronze-100)', '200': 'var(--rad-ui-color-bronze-200)', '300': 'var(--rad-ui-color-bronze-300)', '400': 'var(--rad-ui-color-bronze-400)', '500': 'var(--rad-ui-color-bronze-500)', '600': 'var(--rad-ui-color-bronze-600)', '700': 'var(--rad-ui-color-bronze-700)', '800': 'var(--rad-ui-color-bronze-800)', '900': 'var(--rad-ui-color-bronze-900)', '950': 'var(--rad-ui-color-bronze-950)', '1000': 'var(--rad-ui-color-bronze-1000)'}, 'gold': {'50': 'var(--rad-ui-color-gold-50)', '100': 'var(--rad-ui-color-gold-100)', '200': 'var(--rad-ui-color-gold-200)', '300': 'var(--rad-ui-color-gold-300)', '400': 'var(--rad-ui-color-gold-400)', '500': 'var(--rad-ui-color-gold-500)', '600': 'var(--rad-ui-color-gold-600)', '700': 'var(--rad-ui-color-gold-700)', '800': 'var(--rad-ui-color-gold-800)', '900': 'var(--rad-ui-color-gold-900)', '950': 'var(--rad-ui-color-gold-950)', '1000': 'var(--rad-ui-color-gold-1000)'}, 'sky': {'50': 'var(--rad-ui-color-sky-50)', '100': 'var(--rad-ui-color-sky-100)', '200': 'var(--rad-ui-color-sky-200)', '300': 'var(--rad-ui-color-sky-300)', '400': 'var(--rad-ui-color-sky-400)', '500': 'var(--rad-ui-color-sky-500)', '600': 'var(--rad-ui-color-sky-600)', '700': 'var(--rad-ui-color-sky-700)', '800': 'var(--rad-ui-color-sky-800)', '900': 'var(--rad-ui-color-sky-900)', '950': 'var(--rad-ui-color-sky-950)', '1000': 'var(--rad-ui-color-sky-1000)'}, 'mint': {'50': 'var(--rad-ui-color-mint-50)', '100': 'var(--rad-ui-color-mint-100)', '200': 'var(--rad-ui-color-mint-200)', '300': 'var(--rad-ui-color-mint-300)', '400': 'var(--rad-ui-color-mint-400)', '500': 'var(--rad-ui-color-mint-500)', '600': 'var(--rad-ui-color-mint-600)', '700': 'var(--rad-ui-color-mint-700)', '800': 'var(--rad-ui-color-mint-800)', '900': 'var(--rad-ui-color-mint-900)', '950': 'var(--rad-ui-color-mint-950)', '1000': 'var(--rad-ui-color-mint-1000)'}, 'lime': {'50': 'var(--rad-ui-color-lime-50)', '100': 'var(--rad-ui-color-lime-100)', '200': 'var(--rad-ui-color-lime-200)', '300': 'var(--rad-ui-color-lime-300)', '400': 'var(--rad-ui-color-lime-400)', '500': 'var(--rad-ui-color-lime-500)', '600': 'var(--rad-ui-color-lime-600)', '700': 'var(--rad-ui-color-lime-700)', '800': 'var(--rad-ui-color-lime-800)', '900': 'var(--rad-ui-color-lime-900)', '950': 'var(--rad-ui-color-lime-950)', '1000': 'var(--rad-ui-color-lime-1000)'}, 'yellow': {'50': 'var(--rad-ui-color-yellow-50)', '100': 'var(--rad-ui-color-yellow-100)', '200': 'var(--rad-ui-color-yellow-200)', '300': 'var(--rad-ui-color-yellow-300)', '400': 'var(--rad-ui-color-yellow-400)', '500': 'var(--rad-ui-color-yellow-500)', '600': 'var(--rad-ui-color-yellow-600)', '700': 'var(--rad-ui-color-yellow-700)', '800': 'var(--rad-ui-color-yellow-800)', '900': 'var(--rad-ui-color-yellow-900)', '950': 'var(--rad-ui-color-yellow-950)', '1000': 'var(--rad-ui-color-yellow-1000)'}, 'amber': {'50': 'var(--rad-ui-color-amber-50)', '100': 'var(--rad-ui-color-amber-100)', '200': 'var(--rad-ui-color-amber-200)', '300': 'var(--rad-ui-color-amber-300)', '400': 'var(--rad-ui-color-amber-400)', '500': 'var(--rad-ui-color-amber-500)', '600': 'var(--rad-ui-color-amber-600)', '700': 'var(--rad-ui-color-amber-700)', '800': 'var(--rad-ui-color-amber-800)', '900': 'var(--rad-ui-color-amber-900)', '950': 'var(--rad-ui-color-amber-950)', '1000': 'var(--rad-ui-color-amber-1000)'}, 'orange': {'50': 'var(--rad-ui-color-orange-50)', '100': 'var(--rad-ui-color-orange-100)', '200': 'var(--rad-ui-color-orange-200)', '300': 'var(--rad-ui-color-orange-300)', '400': 'var(--rad-ui-color-orange-400)', '500': 'var(--rad-ui-color-orange-500)', '600': 'var(--rad-ui-color-orange-600)', '700': 'var(--rad-ui-color-orange-700)', '800': 'var(--rad-ui-color-orange-800)', '900': 'var(--rad-ui-color-orange-900)', '950': 'var(--rad-ui-color-orange-950)', '1000': 'var(--rad-ui-color-orange-1000)'}};