@stack-spot/citric-react 0.36.0 → 0.37.1-beta.1

package/dist/theme.css

@@ -1,419 +1,419 @@
-[data-theme] {
-  /* border-radius */
-  --radius-full: 600rem;
-  --radius-xxl: 8rem;
-  --radius-xl: 4rem;
-  --radius-lg: 2rem;
-  --radius-md: 1rem;
-  --radius-sm: 0.5rem;
-  --radius-xs: 0.25rem;
-  --radius-xxs: 0.125rem;
-
-  /* spacings */
-  --spacing-0: 0;
-  --spacing-1: 0.125rem;
-  --spacing-2: 0.25rem;
-  --spacing-3: 0.5rem;
-  --spacing-4: 0.75rem;
-  --spacing-5: 1rem;
-  --spacing-6: 1.25rem;
-  --spacing-7: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-13: 3.25rem;
-  --spacing-14: 3.5rem;
-  --spacing-15: 3.75rem;
-  --spacing-16: 4rem;
-  --spacing-17: 4.25rem;
-  --spacing-18: 4.5rem;
-  --spacing-19: 4.75;
-}
-
-[data-theme] {
-  --font-body1: 400 1rem/1.5 Roboto, sans-serif;
-  --font-body2: 400 0.875rem/1.714 Roboto, sans-serif;
-  --font-code1: 400 1rem/1.5 Roboto Mono, monospace;
-  --font-code2: 400 0.875rem/1.714 Roboto Mono, monospace;
-  --font-display1: 600 clamp(2.25rem,4vw + 1rem,4rem)/1.125 Inter;
-  --font-h1: 600 clamp(2.25rem,4vw + 1rem,2.5rem)/1.2 Inter;
-  --font-h2: 600 clamp(1.5rem,4vw + 1rem,2rem)/1.25 Inter;
-  --font-h3: 600 clamp(1.75rem,4vw + 1rem,1.375rem)/1.333 Inter;
-  --font-h4: 600 clamp(1.125rem,4vw + 1rem,1.25rem)/1.2 Inter;
-  --font-h5: 600 1rem/1.25 Inter;
-  --font-h6: 600 1rem/1.429 Inter;
-  --font-microtext1: 400 0.75rem/1.333 Roboto, sans-serif;
-  --font-subtitle1: 400 1.5rem/1.333 Inter;
-  --font-subtitle2: 400 1.25rem/1.6 Inter;
-  --font-subtitle3: 400 1rem/1.5 Inter;
-  --font-subtitle4: 400 0.875rem/1.714 Inter;
-  --font-overheader1: 600 0.875rem/1.5 Inter;
-  --font-overheader2: 600 0.75rem/1.5 Inter;
+[data-theme] {
+  /* border-radius */
+  --radius-full: 600rem;
+  --radius-xxl: 8rem;
+  --radius-xl: 4rem;
+  --radius-lg: 2rem;
+  --radius-md: 1rem;
+  --radius-sm: 0.5rem;
+  --radius-xs: 0.25rem;
+  --radius-xxs: 0.125rem;
+
+  /* spacings */
+  --spacing-0: 0;
+  --spacing-1: 0.125rem;
+  --spacing-2: 0.25rem;
+  --spacing-3: 0.5rem;
+  --spacing-4: 0.75rem;
+  --spacing-5: 1rem;
+  --spacing-6: 1.25rem;
+  --spacing-7: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-13: 3.25rem;
+  --spacing-14: 3.5rem;
+  --spacing-15: 3.75rem;
+  --spacing-16: 4rem;
+  --spacing-17: 4.25rem;
+  --spacing-18: 4.5rem;
+  --spacing-19: 4.75;
 }
 
+[data-theme] {
+  --font-body1: 400 1rem/1.5 Roboto, sans-serif;
+  --font-body2: 400 0.875rem/1.714 Roboto, sans-serif;
+  --font-code1: 400 1rem/1.5 Roboto Mono, monospace;
+  --font-code2: 400 0.875rem/1.714 Roboto Mono, monospace;
+  --font-display1: 600 clamp(2.25rem,4vw + 1rem,4rem)/1.125 Inter;
+  --font-h1: 600 clamp(2.25rem,4vw + 1rem,2.5rem)/1.2 Inter;
+  --font-h2: 600 clamp(1.5rem,4vw + 1rem,2rem)/1.25 Inter;
+  --font-h3: 600 clamp(1.75rem,4vw + 1rem,1.375rem)/1.333 Inter;
+  --font-h4: 600 clamp(1.125rem,4vw + 1rem,1.25rem)/1.2 Inter;
+  --font-h5: 600 1rem/1.25 Inter;
+  --font-h6: 600 1rem/1.429 Inter;
+  --font-microtext1: 400 0.75rem/1.333 Roboto, sans-serif;
+  --font-subtitle1: 400 1.5rem/1.333 Inter;
+  --font-subtitle2: 400 1.25rem/1.6 Inter;
+  --font-subtitle3: 400 1rem/1.5 Inter;
+  --font-subtitle4: 400 0.875rem/1.714 Inter;
+  --font-overheader1: 600 0.875rem/1.5 Inter;
+  --font-overheader2: 600 0.75rem/1.5 Inter;
+}
 
-[data-theme] {
-  --primary-700: #5C2512;
-  --primary-600: #AD4523;
-  --primary-500: #FF6900;
-  --primary-400: #FF9775;
-  --primary-300: #FFC8B5;
-  --primary-contrastText: #000000;
-  --secondary-700: #14135C;
-  --secondary-600: #2623AD;
-  --secondary-500: #3834FF;
-  --secondary-400: #7875FF;
-  --secondary-300: #B7B6FF;
-  --secondary-contrastText: #FFFFFF;
-  --tertiary-700: #25124A;
-  --tertiary-600: #45238A;
-  --tertiary-500: #6633CC;
-  --tertiary-400: #9775DC;
-  --tertiary-300: #C8B5ED;
-  --tertiary-contrastText: #FFFFFF;
-  --highlight-700: #5C3700;
-  --highlight-600: #AD6800;
-  --highlight-500: #FF9900;
-  --highlight-400: #FFBA52;
-  --highlight-300: #FFDAA3;
-  --highlight-contrastText: #000000;
-  --danger-700: #5C3232;
-  --danger-600: #AD5E5E;
-  --danger-500: #FF8A8A;
-  --danger-400: #FFB0B0;
-  --danger-300: #FFD5D5;
-  --danger-contrastText: #000000;
-  --warning-700: #59512E;
-  --warning-600: #A89857;
-  --warning-500: #F8E080;
-  --warning-400: #FAEAA9;
-  --warning-300: #FCF4D1;
-  --warning-contrastText: #000000;
-  --success-700: #344B34;
-  --success-600: #628E62;
-  --success-500: #91D191;
-  --success-400: #B4E0B4;
-  --success-300: #D7EED7;
-  --success-contrastText: #000000;
-  --light-700: #BCBCCF;
-  --light-600: #2F2F3C;
-  --light-500: #262631;
-  --light-400: #1D1D25;
-  --light-300: #14141A;
-  --light-contrastText: #FAFAFB;
-  --inverse-700: #707075;
-  --inverse-600: #BCBCCF;
-  --inverse-500: #D1D1DE;
-  --inverse-400: #E5E5ED;
-  --inverse-300: #F7F7F8;
-  --inverse-contrastText: #0B0B0E;
-  --blue-50: #D6F5FF;
-  --blue-100: #B5EDFF;
-  --blue-200: #95E4FF;
-  --blue-300: #75DCFF;
-  --blue-400: #54D4FF;
-  --blue-500: #33CCFF;
-  --blue-600: #2BABD6;
-  --blue-700: #238AAD;
-  --blue-800: #1B6A85;
-  --blue-900: #124A5C;
-  --cyan-50: #E0FFFF;
-  --cyan-100: #B3FFFF;
-  --cyan-200: #80FFFF;
-  --cyan-300: #4DFFFF;
-  --cyan-400: #1AFFFF;
-  --cyan-500: #00E5FF;
-  --cyan-600: #00B2E5;
-  --cyan-700: #0080B2;
-  --cyan-800: #004D80;
-  --cyan-900: #001A4D;
-  --gray-50: #EAEAEC;
-  --gray-100: #C1C1C5;
-  --gray-200: #97979E;
-  --gray-300: #6D6D77;
-  --gray-400: #444450;
-  --gray-500: #444450;
-  --gray-600: #2F2F3C;
-  --gray-700: #1C1C24;
-  --gray-800: #09090E;
-  --gray-900: #000002;
-  --indigo-50: #D7D6FF;
-  --indigo-100: #B7B6FF;
-  --indigo-200: #9795FF;
-  --indigo-300: #7875FF;
-  --indigo-400: #5855FF;
-  --indigo-500: #3834FF;
-  --indigo-600: #2F2CD6;
-  --indigo-700: #2623AD;
-  --indigo-800: #1D1B85;
-  --indigo-900: #14135C;
-  --moss-50: #F0F3CC;
-  --moss-100: #E3E9A3;
-  --moss-200: #D7DF7A;
-  --moss-300: #CBD652;
-  --moss-400: #BECC29;
-  --moss-500: #B2C200;
-  --moss-600: #95A300;
-  --moss-700: #798400;
-  --moss-800: #5D6500;
-  --moss-900: #404600;
-  --orange-50: #FFE7D6;
-  --orange-100: #FFD4B5;
-  --orange-200: #FFC195;
-  --orange-300: #FFAE75;
-  --orange-400: #FF9B54;
-  --orange-500: #FF8833;
-  --orange-600: #D6722B;
-  --orange-700: #AD5C23;
-  --orange-800: #85471B;
-  --orange-900: #5C3112;
-  --pink-50: #FFE0F5;
-  --pink-100: #FFC8ED;
-  --pink-200: #FFAFE4;
-  --pink-300: #FF97DC;
-  --pink-400: #FF7FD4;
-  --pink-500: #FF66CC;
-  --pink-600: #D656AB;
-  --pink-700: #AD458A;
-  --pink-800: #85356A;
-  --pink-900: #5C254A;
-  --purple-50: #E2D8F6;
-  --purple-100: #CAB8EF;
-  --purple-200: #B298E8;
-  --purple-300: #9B79E0;
-  --purple-400: #845AD9;
-  --purple-500: #6C3AD2;
-  --purple-600: #5B31B0;
-  --purple-700: #49278E;
-  --purple-800: #381E6E;
-  --purple-900: #27154C;
-  --red-50: #FFCCCC;
-  --red-100: #FFA3A3;
-  --red-200: #FF7A7A;
-  --red-300: #FF5252;
-  --red-400: #FF2929;
-  --red-500: #FF0000;
-  --red-600: #D60000;
-  --red-700: #AD0000;
-  --red-800: #850000;
-  --red-900: #5C0000;
-  --teal-50: #CCF5EB;
-  --teal-100: #A3EDDA;
-  --teal-200: #7AE4CA;
-  --teal-300: #52DCBA;
-  --teal-400: #29D4A9;
-  --teal-500: #00CC99;
-  --teal-600: #00AB80;
-  --teal-700: #008A68;
-  --teal-800: #006A50;
-  --teal-900: #004A37;
-  --yellow-50: #FFF5CC;
-  --yellow-100: #FFEDA3;
-  --yellow-200: #FFE47A;
-  --yellow-300: #FFDC52;
-  --yellow-400: #FFD429;
-  --yellow-500: #FFCC00;
-  --yellow-600: #D6AB00;
-  --yellow-700: #AD8A00;
-  --yellow-800: #856A00;
-  --yellow-900: #5C4A00;
-  --backdrop-color: rgba(0, 0, 0, 0.5)
-}
-
-[data-theme="light"] {
-  color-scheme: light;
-  --primary-700: #5C2512;
-  --primary-600: #AD4523;
-  --primary-500: #FF6900;
-  --primary-400: #FF9775;
-  --primary-300: #FFC8B5;
-  --primary-contrastText: #000000;
-  --secondary-700: #14135C;
-  --secondary-600: #2623AD;
-  --secondary-500: #3834FF;
-  --secondary-400: #7875FF;
-  --secondary-300: #B7B6FF;
-  --secondary-contrastText: #FFFFFF;
-  --tertiary-700: #25124A;
-  --tertiary-600: #45238A;
-  --tertiary-500: #6633CC;
-  --tertiary-400: #9775DC;
-  --tertiary-300: #C8B5ED;
-  --tertiary-contrastText: #FFFFFF;
-  --highlight-700: #054C91;
-  --highlight-600: #0660B5;
-  --highlight-500: #0867DA;
-  --highlight-400: #4A8EF1;
-  --highlight-300: #8CB2F8;
-  --highlight-contrastText: #FFFFFF;
-  --danger-700: #7A2929;
-  --danger-600: #922C2C;
-  --danger-500: #B03B3B;
-  --danger-400: #C76666;
-  --danger-300: #DD9191;
-  --danger-contrastText: #FFFFFF;
-  --warning-700: #C79300;
-  --warning-600: #D4A100;
-  --warning-500: #E6B800;
-  --warning-400: #F7D055;
-  --warning-300: #FFF4CC;
-  --warning-contrastText: #000000;
-  --success-700: #1A4721;
-  --success-600: #25632A;
-  --success-500: #317131;
-  --success-400: #4D8B4D;
-  --success-300: #75B175;
-  --success-contrastText: #FFFFFF;
-  --light-700: #636366;
-  --light-600: #E0E0E3;
-  --light-500: #EDEDEF;
-  --light-400: #F3F3F3;
-  --light-300: #FCFCFD;
-  --light-contrastText: #000000;
-  --inverse-700: #BCBCCF;
-  --inverse-600: #2F2F3C;
-  --inverse-500: #262631;
-  --inverse-400: #1D1D25;
-  --inverse-300: #14141A;
-  --inverse-contrastText: #FAFAFB;
 
-  --indigo-900: #F0E6FF;
-  --indigo-800: #DBCCEF;
-  --indigo-700: #C6B3DF;
-  --indigo-600: #B199CF;
-  --indigo-500: #9C80BF;
-  --indigo-400: #874699;
-  --indigo-300: #723C7A;
-  --indigo-200: #5D235A;
-  --indigo-100: #490D40;
-  --indigo-50: #340026;
-  --blue-900: #E6F4FF;
-  --blue-800: #CCE8FF;
-  --blue-700: #99CCFF;
-  --blue-600: #66B2FF;
-  --blue-500: #3399FF;
-  --blue-400: #007FFF;
-  --blue-300: #0066CC;
-  --blue-200: #004C99;
-  --blue-100: #003366;
-  --blue-50: #001A33;
-  --moss-900: #F3F7EA;
-  --moss-800: #E1EAD6;
-  --moss-700: #CFDDC1;
-  --moss-600: #BDD1AD;
-  --moss-500: #ABC499;
-  --moss-400: #99B784;
-  --moss-300: #879A70;
-  --moss-200: #758D5B;
-  --moss-100: #647F47;
-  --moss-50:  #536B32;
-  --orange-900: #FFF3E0;
-  --orange-800: #FFE9CE;
-  --orange-700: #FFD3A1;
-  --orange-600: #FFBC74;
-  --orange-500: #FFA447;
-  --orange-400: #FF8C1A;
-  --orange-300: #E6731D;
-  --orange-200: #B35816;
-  --orange-100: #803C0F;
-  --orange-50: #4A2008;
-  --cyan-900: #E0FFFF;
-  --cyan-800: #B3FFFF;
-  --cyan-700: #80FFFF;
-  --cyan-600: #4DFFFF;
-  --cyan-500: #1AFFFF;
-  --cyan-400: #00E5FF;
-  --cyan-300: #00B2E5;
-  --cyan-200: #0080B2;
-  --cyan-100: #004D80;
-  --cyan-50: #001A4D;
-  --gray-900: #F2F2F2;
-  --gray-800: #E5E5E5;
-  --gray-700: #CCCCCC;
-  --gray-600: #B3B3B3;
-  --gray-500: #999999;
-  --gray-400: #808080;
-  --gray-300: #666666;
-  --gray-200: #4D4D4D;
-  --gray-100: #333333;
-  --gray-50: #1C1C1C;
-  --purple-900: #F2E6FF;
-  --purple-800: #E0CCFF;
-  --purple-700: #CEB3FF;
-  --purple-600: #BB99FF;
-  --purple-500: #A980FF;
-  --purple-400: #9666FF;
-  --purple-300: #834DFF;
-  --purple-200: #7024FF;
-  --purple-100: #5D00EB;
-  --purple-50: #4A00D1;
-  --pink-900: #FFE6F9;
-  --pink-800: #FFCCF2;
-  --pink-700: #FFB3EC;
-  --pink-600: #FF99E6;
-  --pink-500: #FF80E0;
-  --pink-400: #FF66DA;
-  --pink-300: #FF4CD4;
-  --pink-200: #443692;
-  --pink-100: #E100AA;
-  --pink-50: #B9007C;
-  --yellow-900: #FFF9E6;
-  --yellow-800: #FFF2CC;
-  --yellow-700: #FFEBB3;
-  --yellow-600: #FFE499;
-  --yellow-500: #FFDD80;
-  --yellow-400: #FFD666;
-  --yellow-300: #FFCF4D;
-  --yellow-200: #FFC833;
-  --yellow-100: #FFC11A;
-  --yellow-50: #B38F00;
-  --red-900: #FFE6E6;
-  --red-800: #FFCCCC;
-  --red-700: #FFB3B3;
-  --red-600: #FF9999;
-  --red-500: #FF8080;
-  --red-400: #FF6666;
-  --red-300: #FF4D4D;
-  --red-200: #FF3333;
-  --red-100: #FF1A1A;
-  --red-50: #CC0000
-}
-
-  
-[data-theme="dark"] {
-  color-scheme: dark;
-  --light-300: #14141A;
-  --light-400: #1D1D25;
-  --light-500: #262631;
-  --light-600: #2F2F3C;
-  --light-700: #BCBCCF;
-  --light-contrastText: #FAFAFB;
-  --inverse-300: #F7F7F8;
-  --inverse-400: #E5E5ED;
-  --inverse-500: #D1D1DE;
-  --inverse-600: #BCBCCF;
-  --inverse-700: #707075;
-  --inverse-contrastText: #0B0B0E;
-}
-  
-[data-theme="stackspot"] {
-  color-scheme: dark;
-  --light-300: #0E1222;
-  --light-400: #131726;
-  --light-500: #171B2B;
-  --light-600: #212533;
-  --light-700: #CFD0D3;
-  --light-contrastText: #FAFAFB;
-  --inverse-300: #F5F7FF;
-  --inverse-400: #EBEDF6;
-  --inverse-500: #D8D9E4;
-  --inverse-600: #CDCDDA;
-  --inverse-700: #171B2B;
-  --inverse-contrastText: #0E1222;
-}
-
-[data-theme-kind="light"] {
-  --backdrop-color: rgba(0, 0, 0, 0.5)
-}
+[data-theme] {
+  --primary-700: #5C2512;
+  --primary-600: #AD4523;
+  --primary-500: #FF6900;
+  --primary-400: #FF9775;
+  --primary-300: #FFC8B5;
+  --primary-contrastText: #000000;
+  --secondary-700: #14135C;
+  --secondary-600: #2623AD;
+  --secondary-500: #3834FF;
+  --secondary-400: #7875FF;
+  --secondary-300: #B7B6FF;
+  --secondary-contrastText: #FFFFFF;
+  --tertiary-700: #25124A;
+  --tertiary-600: #45238A;
+  --tertiary-500: #6633CC;
+  --tertiary-400: #9775DC;
+  --tertiary-300: #C8B5ED;
+  --tertiary-contrastText: #FFFFFF;
+  --highlight-700: #5C3700;
+  --highlight-600: #AD6800;
+  --highlight-500: #FF9900;
+  --highlight-400: #FFBA52;
+  --highlight-300: #FFDAA3;
+  --highlight-contrastText: #000000;
+  --danger-700: #5C3232;
+  --danger-600: #AD5E5E;
+  --danger-500: #FF8A8A;
+  --danger-400: #FFB0B0;
+  --danger-300: #FFD5D5;
+  --danger-contrastText: #000000;
+  --warning-700: #59512E;
+  --warning-600: #A89857;
+  --warning-500: #F8E080;
+  --warning-400: #FAEAA9;
+  --warning-300: #FCF4D1;
+  --warning-contrastText: #000000;
+  --success-700: #344B34;
+  --success-600: #628E62;
+  --success-500: #91D191;
+  --success-400: #B4E0B4;
+  --success-300: #D7EED7;
+  --success-contrastText: #000000;
+  --light-700: #BCBCCF;
+  --light-600: #2F2F3C;
+  --light-500: #262631;
+  --light-400: #1D1D25;
+  --light-300: #14141A;
+  --light-contrastText: #FAFAFB;
+  --inverse-700: #707075;
+  --inverse-600: #BCBCCF;
+  --inverse-500: #D1D1DE;
+  --inverse-400: #E5E5ED;
+  --inverse-300: #F7F7F8;
+  --inverse-contrastText: #0B0B0E;
+  --blue-50: #D6F5FF;
+  --blue-100: #B5EDFF;
+  --blue-200: #95E4FF;
+  --blue-300: #75DCFF;
+  --blue-400: #54D4FF;
+  --blue-500: #33CCFF;
+  --blue-600: #2BABD6;
+  --blue-700: #238AAD;
+  --blue-800: #1B6A85;
+  --blue-900: #124A5C;
+  --cyan-50: #E0FFFF;
+  --cyan-100: #B3FFFF;
+  --cyan-200: #80FFFF;
+  --cyan-300: #4DFFFF;
+  --cyan-400: #1AFFFF;
+  --cyan-500: #00E5FF;
+  --cyan-600: #00B2E5;
+  --cyan-700: #0080B2;
+  --cyan-800: #004D80;
+  --cyan-900: #001A4D;
+  --gray-50: #EAEAEC;
+  --gray-100: #C1C1C5;
+  --gray-200: #97979E;
+  --gray-300: #6D6D77;
+  --gray-400: #444450;
+  --gray-500: #444450;
+  --gray-600: #2F2F3C;
+  --gray-700: #1C1C24;
+  --gray-800: #09090E;
+  --gray-900: #000002;
+  --indigo-50: #D7D6FF;
+  --indigo-100: #B7B6FF;
+  --indigo-200: #9795FF;
+  --indigo-300: #7875FF;
+  --indigo-400: #5855FF;
+  --indigo-500: #3834FF;
+  --indigo-600: #2F2CD6;
+  --indigo-700: #2623AD;
+  --indigo-800: #1D1B85;
+  --indigo-900: #14135C;
+  --moss-50: #F0F3CC;
+  --moss-100: #E3E9A3;
+  --moss-200: #D7DF7A;
+  --moss-300: #CBD652;
+  --moss-400: #BECC29;
+  --moss-500: #B2C200;
+  --moss-600: #95A300;
+  --moss-700: #798400;
+  --moss-800: #5D6500;
+  --moss-900: #404600;
+  --orange-50: #FFE7D6;
+  --orange-100: #FFD4B5;
+  --orange-200: #FFC195;
+  --orange-300: #FFAE75;
+  --orange-400: #FF9B54;
+  --orange-500: #FF8833;
+  --orange-600: #D6722B;
+  --orange-700: #AD5C23;
+  --orange-800: #85471B;
+  --orange-900: #5C3112;
+  --pink-50: #FFE0F5;
+  --pink-100: #FFC8ED;
+  --pink-200: #FFAFE4;
+  --pink-300: #FF97DC;
+  --pink-400: #FF7FD4;
+  --pink-500: #FF66CC;
+  --pink-600: #D656AB;
+  --pink-700: #AD458A;
+  --pink-800: #85356A;
+  --pink-900: #5C254A;
+  --purple-50: #E2D8F6;
+  --purple-100: #CAB8EF;
+  --purple-200: #B298E8;
+  --purple-300: #9B79E0;
+  --purple-400: #845AD9;
+  --purple-500: #6C3AD2;
+  --purple-600: #5B31B0;
+  --purple-700: #49278E;
+  --purple-800: #381E6E;
+  --purple-900: #27154C;
+  --red-50: #FFCCCC;
+  --red-100: #FFA3A3;
+  --red-200: #FF7A7A;
+  --red-300: #FF5252;
+  --red-400: #FF2929;
+  --red-500: #FF0000;
+  --red-600: #D60000;
+  --red-700: #AD0000;
+  --red-800: #850000;
+  --red-900: #5C0000;
+  --teal-50: #CCF5EB;
+  --teal-100: #A3EDDA;
+  --teal-200: #7AE4CA;
+  --teal-300: #52DCBA;
+  --teal-400: #29D4A9;
+  --teal-500: #00CC99;
+  --teal-600: #00AB80;
+  --teal-700: #008A68;
+  --teal-800: #006A50;
+  --teal-900: #004A37;
+  --yellow-50: #FFF5CC;
+  --yellow-100: #FFEDA3;
+  --yellow-200: #FFE47A;
+  --yellow-300: #FFDC52;
+  --yellow-400: #FFD429;
+  --yellow-500: #FFCC00;
+  --yellow-600: #D6AB00;
+  --yellow-700: #AD8A00;
+  --yellow-800: #856A00;
+  --yellow-900: #5C4A00;
+  --backdrop-color: rgba(0, 0, 0, 0.5)
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --primary-700: #5C2512;
+  --primary-600: #AD4523;
+  --primary-500: #FF6900;
+  --primary-400: #FF9775;
+  --primary-300: #FFC8B5;
+  --primary-contrastText: #000000;
+  --secondary-700: #14135C;
+  --secondary-600: #2623AD;
+  --secondary-500: #3834FF;
+  --secondary-400: #7875FF;
+  --secondary-300: #B7B6FF;
+  --secondary-contrastText: #FFFFFF;
+  --tertiary-700: #25124A;
+  --tertiary-600: #45238A;
+  --tertiary-500: #6633CC;
+  --tertiary-400: #9775DC;
+  --tertiary-300: #C8B5ED;
+  --tertiary-contrastText: #FFFFFF;
+  --highlight-700: #054C91;
+  --highlight-600: #0660B5;
+  --highlight-500: #0867DA;
+  --highlight-400: #4A8EF1;
+  --highlight-300: #8CB2F8;
+  --highlight-contrastText: #FFFFFF;
+  --danger-700: #7A2929;
+  --danger-600: #922C2C;
+  --danger-500: #B03B3B;
+  --danger-400: #C76666;
+  --danger-300: #DD9191;
+  --danger-contrastText: #FFFFFF;
+  --warning-700: #C79300;
+  --warning-600: #D4A100;
+  --warning-500: #E6B800;
+  --warning-400: #F7D055;
+  --warning-300: #FFF4CC;
+  --warning-contrastText: #000000;
+  --success-700: #1A4721;
+  --success-600: #25632A;
+  --success-500: #317131;
+  --success-400: #4D8B4D;
+  --success-300: #75B175;
+  --success-contrastText: #FFFFFF;
+  --light-700: #636366;
+  --light-600: #E0E0E3;
+  --light-500: #EDEDEF;
+  --light-400: #F3F3F3;
+  --light-300: #FCFCFD;
+  --light-contrastText: #000000;
+  --inverse-700: #BCBCCF;
+  --inverse-600: #2F2F3C;
+  --inverse-500: #262631;
+  --inverse-400: #1D1D25;
+  --inverse-300: #14141A;
+  --inverse-contrastText: #FAFAFB;
+
+  --indigo-900: #F0E6FF;
+  --indigo-800: #DBCCEF;
+  --indigo-700: #C6B3DF;
+  --indigo-600: #B199CF;
+  --indigo-500: #9C80BF;
+  --indigo-400: #874699;
+  --indigo-300: #723C7A;
+  --indigo-200: #5D235A;
+  --indigo-100: #490D40;
+  --indigo-50: #340026;
+  --blue-900: #E6F4FF;
+  --blue-800: #CCE8FF;
+  --blue-700: #99CCFF;
+  --blue-600: #66B2FF;
+  --blue-500: #3399FF;
+  --blue-400: #007FFF;
+  --blue-300: #0066CC;
+  --blue-200: #004C99;
+  --blue-100: #003366;
+  --blue-50: #001A33;
+  --moss-900: #F3F7EA;
+  --moss-800: #E1EAD6;
+  --moss-700: #CFDDC1;
+  --moss-600: #BDD1AD;
+  --moss-500: #ABC499;
+  --moss-400: #99B784;
+  --moss-300: #879A70;
+  --moss-200: #758D5B;
+  --moss-100: #647F47;
+  --moss-50:  #536B32;
+  --orange-900: #FFF3E0;
+  --orange-800: #FFE9CE;
+  --orange-700: #FFD3A1;
+  --orange-600: #FFBC74;
+  --orange-500: #FFA447;
+  --orange-400: #FF8C1A;
+  --orange-300: #E6731D;
+  --orange-200: #B35816;
+  --orange-100: #803C0F;
+  --orange-50: #4A2008;
+  --cyan-900: #E0FFFF;
+  --cyan-800: #B3FFFF;
+  --cyan-700: #80FFFF;
+  --cyan-600: #4DFFFF;
+  --cyan-500: #1AFFFF;
+  --cyan-400: #00E5FF;
+  --cyan-300: #00B2E5;
+  --cyan-200: #0080B2;
+  --cyan-100: #004D80;
+  --cyan-50: #001A4D;
+  --gray-900: #F2F2F2;
+  --gray-800: #E5E5E5;
+  --gray-700: #CCCCCC;
+  --gray-600: #B3B3B3;
+  --gray-500: #999999;
+  --gray-400: #808080;
+  --gray-300: #666666;
+  --gray-200: #4D4D4D;
+  --gray-100: #333333;
+  --gray-50: #1C1C1C;
+  --purple-900: #F2E6FF;
+  --purple-800: #E0CCFF;
+  --purple-700: #CEB3FF;
+  --purple-600: #BB99FF;
+  --purple-500: #A980FF;
+  --purple-400: #9666FF;
+  --purple-300: #834DFF;
+  --purple-200: #7024FF;
+  --purple-100: #5D00EB;
+  --purple-50: #4A00D1;
+  --pink-900: #FFE6F9;
+  --pink-800: #FFCCF2;
+  --pink-700: #FFB3EC;
+  --pink-600: #FF99E6;
+  --pink-500: #FF80E0;
+  --pink-400: #FF66DA;
+  --pink-300: #FF4CD4;
+  --pink-200: #443692;
+  --pink-100: #E100AA;
+  --pink-50: #B9007C;
+  --yellow-900: #FFF9E6;
+  --yellow-800: #FFF2CC;
+  --yellow-700: #FFEBB3;
+  --yellow-600: #FFE499;
+  --yellow-500: #FFDD80;
+  --yellow-400: #FFD666;
+  --yellow-300: #FFCF4D;
+  --yellow-200: #FFC833;
+  --yellow-100: #FFC11A;
+  --yellow-50: #B38F00;
+  --red-900: #FFE6E6;
+  --red-800: #FFCCCC;
+  --red-700: #FFB3B3;
+  --red-600: #FF9999;
+  --red-500: #FF8080;
+  --red-400: #FF6666;
+  --red-300: #FF4D4D;
+  --red-200: #FF3333;
+  --red-100: #FF1A1A;
+  --red-50: #CC0000
+}
+
+  
+[data-theme="dark"] {
+  color-scheme: dark;
+  --light-300: #14141A;
+  --light-400: #1D1D25;
+  --light-500: #262631;
+  --light-600: #2F2F3C;
+  --light-700: #BCBCCF;
+  --light-contrastText: #FAFAFB;
+  --inverse-300: #F7F7F8;
+  --inverse-400: #E5E5ED;
+  --inverse-500: #D1D1DE;
+  --inverse-600: #BCBCCF;
+  --inverse-700: #707075;
+  --inverse-contrastText: #0B0B0E;
+}
+  
+[data-theme="stackspot"] {
+  color-scheme: dark;
+  --light-300: #0E1222;
+  --light-400: #131726;
+  --light-500: #171B2B;
+  --light-600: #212533;
+  --light-700: #CFD0D3;
+  --light-contrastText: #FAFAFB;
+  --inverse-300: #F5F7FF;
+  --inverse-400: #EBEDF6;
+  --inverse-500: #D8D9E4;
+  --inverse-600: #CDCDDA;
+  --inverse-700: #171B2B;
+  --inverse-contrastText: #0E1222;
+}
+
+[data-theme-kind="light"] {
+  --backdrop-color: rgba(0, 0, 0, 0.5)
+}