@rovula/ui 0.0.19 → 0.0.21

package/src/_theme/global copy.css

@@ -0,0 +1,761 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :roots {
+    --white: 255 255 255; /* #ffffff */
+    --black: 28 28 28; /* #1c1c1c */
+
+    --theme-50: 232 242 255; /* #E8F2FF -> 232 242 255 */
+    --theme-100: 213 230 255; /* #D5E6FF -> 213 230 255 */
+    --theme-200: 179 207 255; /* #B3CFFF -> 179 207 255 */
+    --theme-300: 136 174 255; /* #85AEFF -> 136 174 255 */
+    --theme-400: 86 126 255; /* #567EFF -> 86 126 255 */
+    --theme-500: 47 78 255; /* #2F4EFF -> 47 78 255 */
+    --theme-600: 12 26 255; /* #0C1AFF -> 12 26 255 */
+    --theme-700: 0 12 255; /* #000CFF -> 0 12 255 */
+    --theme-800: 6 18 205; /* #0612CD -> 6 18 205 */
+    --theme-900: 16 29 159; /* #101D9F -> 16 29 159 */
+    --theme-default: var(--theme-100);
+    --theme-foreground: var(--white);
+
+    --primary-5: 242 242 246; /* #F2F2F6 */
+    --primary-10: 230 230 236; /* #E6E6EC */
+    --primary-20: 204 204 218; /* #CCCCDA */
+    --primary-30: 179 179 199; /* #B3B3C7 */
+    --primary-40: 153 153 180; /* #9999B4 */
+    --primary-50: 128 128 161; /* #8080A1 */
+    --primary-60: 103 103 143; /* #67678F */
+    --primary-70: 77 77 124; /* #4D4D7C */
+    --primary-80: 52 52 105; /* #343469 */
+    --primary-90: 26 26 87; /* #1A1A57 */
+    --primary-100: 1 1 68; /* #010144 */
+    --primary-110: 1 1 61; /* #01013D */
+    --primary-120: 1 1 54; /* #010136 */
+    --primary-130: 1 1 48; /* #010130 */
+    --primary-140: 1 1 41; /* #010129 */
+    --primary-150: 1 1 34; /* #010122 */
+    --primary-default: var(--primary-100);
+    --primary-foreground: var(--white);
+
+    --secondary-5: 254 254 255; /* #FEFEFF */
+    --secondary-10: 253 254 255; /* #FDFEFF */
+    --secondary-20: 251 252 255; /* #FBFCFF */
+    --secondary-30: 249 251 255; /* #F9FBFF */
+    --secondary-40: 247 249 255; /* #F7F9FF */
+    --secondary-50: 245 248 255; /* #F5F8FF */
+    --secondary-60: 242 247 255; /* #F2F7FF */
+    --secondary-70: 240 245 255; /* #F0F5FF */
+    --secondary-80: 238 244 255; /* #EEF4FF */
+    --secondary-90: 236 242 255; /* #ECF2FF */
+    --secondary-100: 234 241 255; /* #EAF1FF */
+    --secondary-110: 211 217 229; /* #D3D9E5 */
+    --secondary-120: 187 193 204; /* #BBC1CC */
+    --secondary-130: 164 169 178; /* #A4A9B2 */
+    --secondary-140: 140 145 153; /* #8C9199 */
+    --secondary-150: 117 121 128; /* #757980 */
+    --secondary-default: var(--secondary-100);
+    --secondary-foreground: 1 1 68;
+
+    --tertiary-5: 245 246 255; /* #F5F6FF */
+    --tertiary-10: 234 237 255; /* #EAEDFF */
+    --tertiary-20: 213 220 255; /* #D5DCFF */
+    --tertiary-30: 193 202 255; /* #C1CAFF */
+    --tertiary-40: 172 184 255; /* #ACB8FF */
+    --tertiary-50: 151 166 255; /* #97A6FF */
+    --tertiary-60: 132 149 255; /* #8295FF */
+    --tertiary-70: 109 131 255; /* #6D83FF */
+    --tertiary-80: 89 113 255; /* #5971FF */
+    --tertiary-90: 68 96 255; /* #4460FF */
+    --tertiary-100: 47 78 255; /* #2F4EFF */
+    --tertiary-110: 42 70 229; /* #2A46E5 */
+    --tertiary-120: 38 62 204; /* #263ECC */
+    --tertiary-130: 33 55 178; /* #2137B2 */
+    --tertiary-140: 28 47 153; /* #1C2F99 */
+    --tertiary-150: 24 39 128; /* #182780 */
+    --tertiary-default: var(--tertiary-100);
+    --tertiary-foreground: var(--white);
+
+    --grey-5: 250 250 250; /* #FAFAFA */
+    --grey-10: 245 245 245; /* #F5F5F5 */
+    --grey-20: 236 236 236; /* #ECECEC */
+    --grey-30: 226 226 226; /* #E2E2E2 */
+    --grey-40: 216 216 216; /* #D8D8D8 */
+    --grey-50: 207 207 207; /* #CFCFCF */
+    --grey-60: 197 197 197; /* #C5C5C5 */
+    --grey-70: 187 187 187; /* #BBBBBB */
+    --grey-80: 177 177 177; /* #B1B1B1 */
+    --grey-90: 168 168 168; /* #A8A8A8 */
+    --grey-100: 158 158 158; /* #9E9E9E */
+    --grey-110: 142 142 142; /* #8E8E8E */
+    --grey-120: 126 126 126; /* #7E7E7E */
+    --grey-130: 111 111 111; /* #6F6F6F */
+    --grey-140: 95 95 95; /* #5F5F5F */
+    --grey-150: 79 79 79; /* #4F4F4F */
+    --grey-default: var(--grey-100);
+    --grey-foreground: 1 1 68;
+  
+    --grey2-100: 249 250 251; /* #F9FAFB */
+    --grey2-200: 244 246 248; /* #F4F6F8 */
+    --grey2-300: 223 227 232; /* #DFE3E8 */
+    --grey2-400: 196 205 213; /* #C4CDD5 */
+    --grey2-500: 145 158 171; /* #919EAB */
+    --grey2-600: 99 115 129; /* #637381 */
+    --grey2-700: 69 79 91; /* #454F5B */
+    --grey2-800: 33 43 54; /* #212B36 */
+    --grey2-900: 22 28 36; /* #161C24 */
+    --grey-default: var(--grey-100);
+    --grey-foreground: var(--white);
+  
+    --info-lighter: 208 242 255;
+    --info-light: 116 202 255;
+    --info-100: 41 152 255; /* #2998FF */
+    --info-120: 33 122 204; /* #217ACC */
+    --info-dark: 12 83 183;
+    --info-darker: 4 41 122;
+    --info-default: var(--info-100);
+    --info-foreground: var(--white);
+    
+    --success-lighter: 233 252 212;
+    --success-light: 170 242 127;
+    --success-100: 84 214 44; /* #54D62C */
+    --success-120: 67 171 35; /* #43AB23 */
+    --success-dark: 34 154 22;
+    --success-darker:8 102 13;
+    --success-default: var(--success-100);
+    --success-foreground: var(--white);
+    
+    --warning-lighter: 255 247 205;
+    --warning-light:255 225 106;
+    --warning-100: 255 193 7; /* #FFC107 */
+    --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-dark: 183 129 3;
+    --warning-darker: 122 79 1;
+    --warning-default: var(--warning-100);
+    --warning-foreground: var(--white);
+    
+    --error-lighter: 255 231 217;
+    --error-light: 255 164 141;
+    --error-100: 255 77 53; /* #FF4D35 */
+    --error-120: 204 62 42; /* #CC3E2A */
+    --error-dark: 183 33 54;
+    --error-darker: 122 12 46;
+    --error-default: var(--error-100);
+    --error-foreground: var(--white);
+
+    --main-transparent-primary: 1 1 68;
+    --main-transparent-secondary: 234 241 255;
+    --main-transparent-tertiary: 47 78 255;
+
+    /* Button */
+    --btn-rounded-sm: 10px;
+    --btn-rounded-md: 12px;
+    --btn-rounded-lg: 16px;
+
+    /* Input */
+    --input-default-text-color: 164 169 178;
+    --input-default-stroke-color: 231 231 231;
+
+    --input-active-text-color: 29 30 39;
+    --input-active-stroke-color: 208 208 208;
+  
+    --input-disabled-text-color: 196 199 205;
+    --input-disabled-stroke-color: 239 239 239;
+    --input-disabled-background-color: 247 247 247;
+    
+    --input-label-background-color: 249 251 255;
+
+    /* Text */
+    --text-default-dark: 1 1 68;
+    --text-default-medium: 47 78 255;
+    --text-default-light: 213 230 255;
+
+    --text-grey-dark: 29 30 39;
+    --text-grey-medium: 117 121 128;
+    --text-grey-light: 164 169 178;
+    --text-white: 255 255 255;
+
+    /* Other */
+    --other-bg: var(--white);
+    --other-bg-2: var(--white);
+
+    /* Other/Popup */
+    --popup-background: 249 251 255;
+    /* Other/Popup Curtain */
+    --popup-overlay: 0 0 0;
+    --popup-overlay-alpha: 0.48;
+    --popup-rounded: 24px;
+
+    /* Navbar */
+    --navbar-height: 58px;
+    --navbar-bg-color: var(--primary-default);
+    --navbar-text-color: var(--primary-foreground);
+    --navbar-border-color: var(--primary-foreground);
+    --navbar-gap: 16px;
+  
+    /* TODO for shadcn, wait for refactor */
+    /* --background: 0 0% 100%; */
+    --background: var(--brand-background);
+    --foreground: var(--text-white:);
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --card: var(--white);
+    --card-foreground: var(--primary);
+ 
+    --primary: var(--primary-default);
+ 
+    --secondary: var(--secondary-default);
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 215 20.2% 65.1%;
+ 
+    --radius: 0.5rem;
+  }
+
+  :rootss {
+    --white: 255 255 255; /* #ffffff */
+    --black: 28 28 28; /* #1c1c1c */
+
+    /* Text */
+    --text-default-dark: 33 43 54;
+    --text-default-medium: 99 115 129;
+    --text-default-light: 145 158 171;
+
+    --text-grey-dark: 126 126 126;
+    --text-grey-medium: 170 170 170;
+    --text-grey-light: 223 227 232;
+    --text-white: 255 255 255;
+
+    /* Main Colors */
+    --brand-midmight-blue: 0 32 56;
+    --brand-columbia-blue: 173 202 214;
+    --brand-background: 30 50 73;
+    --brand-lemon-glacier: 245 255 0;
+  
+    --theme-50: 232 242 255; /* #E8F2FF -> 232 242 255 */
+    --theme-100: 213 230 255; /* #D5E6FF -> 213 230 255 */
+    --theme-200: 179 207 255; /* #B3CFFF -> 179 207 255 */
+    --theme-300: 136 174 255; /* #85AEFF -> 136 174 255 */
+    --theme-400: 86 126 255; /* #567EFF -> 86 126 255 */
+    --theme-500: 47 78 255; /* #2F4EFF -> 47 78 255 */
+    --theme-600: 12 26 255; /* #0C1AFF -> 12 26 255 */
+    --theme-700: 0 12 255; /* #000CFF -> 0 12 255 */
+    --theme-800: 6 18 205; /* #0612CD -> 6 18 205 */
+    --theme-900: 16 29 159; /* #101D9F -> 16 29 159 */
+    --theme-default: var(--theme-100);
+    --theme-foreground: var(--white);
+
+    --primary-5: 253 252 242; /* #F2F2F6 */
+    --primary-10: 252 250 229; /* #E6E6EC */
+    --primary-20: 248 245 204; /* #CCCCDA */
+    --primary-30: 245 240 178; /* #B3B3C7 */
+    --primary-40: 241 235 153; /* #9999B4 */
+    --primary-50: 238 230 128; /* #8080A1 */
+    --primary-60: 235 225 102; /* #67678F */
+    --primary-70: 231 220 77; /* #4D4D7C */
+    --primary-80: 228 215 51; /* #343469 */
+    --primary-90: 224 210 26; /* #1A1A57 */
+    --primary-100: 221 205 0; /* #010144 */
+    --primary-110: 199 184 0; /* #01013D */
+    --primary-120: 177 164 0; /* #010136 */
+    --primary-130: 155 143 0; /* #010130 */
+    --primary-140: 133 123 0; /* #010129 */
+    --primary-150: 111 103 0; /* #010122 */
+    --primary-default: var(--primary-100);
+    --primary-foreground: var(--text-default-dark);
+
+    --secondary-5: 250 250 250; /* #FEFEFF */
+    --secondary-10: 245 245 245; /* #FDFEFF */
+    --secondary-20: 236 236 236; /* #FBFCFF */
+    --secondary-30: 226 226 226; /* #F9FBFF */
+    --secondary-40: 216 216 216; /* #F7F9FF */
+    --secondary-50: 207 207 207;/* #F5F8FF */
+    --secondary-60: 197 197 197; /* #F2F7FF */
+    --secondary-70: 187 187 187; /* #F0F5FF */
+    --secondary-80: 177 177 177; /* #EEF4FF */
+    --secondary-90: 168 168 168; /* #ECF2FF */
+    --secondary-100: 158 158 158; /* #EAF1FF */
+    --secondary-110: 142 142 142; /* #D3D9E5 */
+    --secondary-120: 126 126 126; /* #BBC1CC */
+    --secondary-130: 111 111 111; /* #A4A9B2 */
+    --secondary-140: 95 95 95; /* #8C9199 */
+    --secondary-150: 79 79 79; /* #757980 */
+    --secondary-default: var(--secondary-100);
+    --secondary-foreground: var(--white);
+
+    --tertiary-5: 251 252 253; /* #F5F6FF */
+    --tertiary-10: 247 250 251;/* #EAEDFF */
+    --tertiary-20: 239 244 247; /* #D5DCFF */
+    --tertiary-30: 230 239 243; /* #C1CAFF */
+    --tertiary-40: 222 234 239; /* #ACB8FF */
+    --tertiary-50: 214 229 235; /* #97A6FF */
+    --tertiary-60: 206 223 230; /* #8295FF */
+    --tertiary-70: 198 218 226; /* #6D83FF */
+    --tertiary-80: 189 213 222; /* #5971FF */
+    --tertiary-90: 181 207 218; /* #4460FF */
+    --tertiary-100: 173 202 214; /* #2F4EFF */
+    --tertiary-110: 156 182 193; /* #2A46E5 */
+    --tertiary-120: 138 162 171; /* #263ECC */
+    --tertiary-130: 121 141 150; /* #2137B2 */
+    --tertiary-140: 104 121 128; /* #1C2F99 */
+    --tertiary-150: 87 101 107; /* #182780 */
+    --tertiary-default: var(--tertiary-100);
+    --tertiary-foreground: var(--white);
+
+    --grey-5: 250 250 250; /* #FAFAFA */
+    --grey-10: 245 245 245; /* #F5F5F5 */
+    --grey-20: 236 236 236; /* #ECECEC */
+    --grey-30: 226 226 226; /* #E2E2E2 */
+    --grey-40: 216 216 216; /* #D8D8D8 */
+    --grey-50: 207 207 207; /* #CFCFCF */
+    --grey-60: 197 197 197; /* #C5C5C5 */
+    --grey-70: 187 187 187; /* #BBBBBB */
+    --grey-80: 177 177 177; /* #B1B1B1 */
+    --grey-90: 168 168 168; /* #A8A8A8 */
+    --grey-100: 158 158 158; /* #9E9E9E */
+    --grey-110: 142 142 142; /* #8E8E8E */
+    --grey-120: 126 126 126; /* #7E7E7E */
+    --grey-130: 111 111 111; /* #6F6F6F */
+    --grey-140: 95 95 95; /* #5F5F5F */
+    --grey-150: 79 79 79; /* #4F4F4F */
+    --grey-default: var(--grey-100);
+    --grey-foreground: var(--white);
+  
+    --grey2-100: 249 250 251; /* #F9FAFB */
+    --grey2-200: 244 246 248;/* #F4F6F8 */
+    --grey2-300: 223 227 232; /* #DFE3E8 */
+    --grey2-400: 196 205 213; /* #C4CDD5 */
+    --grey2-500: 145 158 171; /* #919EAB */
+    --grey2-600: 99 115 129; /* #637381 */
+    --grey2-700: 69 79 91; /* #454F5B */
+    --grey2-800: 33 43 54; /* #212B36 */
+    --grey2-900: 22 28 36; /* #161C24 */
+    --grey-default: var(--grey-100);
+    --grey-foreground: var(--white);
+
+    --info-lighter: 208 242 255;
+    --info-light: 116 202 255;
+    --info-100: 41 152 255; /* #2998FF */
+    --info-120: 33 122 204; /* #217ACC */
+    --info-dark: 12 83 183;
+    --info-darker: 4 41 122;
+    --info-default: var(--info-100);
+    --info-foreground: var(--white);
+    
+    --success-lighter: 233 252 212;
+    --success-light: 170 242 127;
+    --success-100: 84 214 44; /* #54D62C */
+    --success-120: 67 171 35; /* #43AB23 */
+    --success-dark: 34 154 22;
+    --success-darker: 8 102 13;
+    --success-default: var(--success-100);
+    --success-foreground: var(--white);
+    
+    --warning-lighter: 255 247 205;
+    --warning-light:255 225 106;
+    --warning-100: 255 193 7; /* #FFC107 */
+    --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-dark: 183 129 3;
+    --warning-darker: 122 79 1;
+    --warning-default: var(--warning-100);
+    --warning-foreground: var(--white);
+    
+    --error-lighter: 255 231 217;
+    --error-light: 255 164 141;
+    --error-100: 255 77 53; /* #FF4D35 */
+    --error-120: 204 62 42; /* #CC3E2A */
+    --error-dark: 183 33 54;
+    --error-darker: 122 12 46;
+    --error-default: var(--error-100);
+    --error-foreground: var(--white);
+
+    --main-transparent-primary: 221 205 0;
+    --main-transparent-secondary: 158 158 158;
+    --main-transparent-tertiary: 173 202 214;
+    --main-transparent-tertiary: 173 202 214;
+
+    --other-transparent-grey: 158 158 158;
+    --other-transparent-grey2: 145 158 171;
+    --other-transparent-white: 230 230 236;
+    --other-transparent-black: 0 0 0;
+    --other-transparent-info: 24 144 255;
+    --other-transparent-success: 84 214 44;
+    --other-transparent-warning: 255 193 7;
+    --other-transparent-error: 255 72 66;
+
+    /* Button */
+    --btn-rounded-sm: 10px;
+    --btn-rounded-md: 12px;
+    --btn-rounded-lg: 16px;
+
+    /* Dashboard */
+    --dashboard-panel-bg-grey: 145 158 171;  /* 0.08) */
+    --dashboard-panel-bg-white: 255 255 255;  /* 0.08) */
+    --dashboard-panel-border: 168 162 168;  /* 0.24) */
+
+    /* Input */
+    --input-default-text-color: 158 158 158;
+    --input-default-stroke-color: 231 231 231;
+
+    --input-active-text-color: 223 227 232;
+    --input-active-stroke-color: 208 208 208;
+  
+    --input-disabled-text-color: 197 204 211;
+    --input-disabled-stroke-color: 246 247 248;
+    --input-disabled-background-color: 250 251 251;
+    
+    --input-label-background-color: 45 46 48;
+
+    /* Other */
+    --other-bg: 32 36 39;
+    --other-bg-2: 40 44 49;
+    /* Other/Popup */
+    --popup-background: 45 46 48;
+    /* Other/Popup Curtain */
+    --popup-overlay: 0 0 0;
+    --popup-overlay-alpha: 0.48;
+    --popup-rounded: 24px;
+
+    /* Navbar */
+    --navbar-height: 58px;
+    --navbar-bg-color: var(--primary-default);
+    --navbar-text-color: var(--primary-foreground);
+    --navbar-border-color: var(--primary-foreground);
+    --navbar-gap: 16px;
+
+    /* TODO for shadcn, wait for refactor */
+    /* --background: 0 0% 100%; */
+    --background: var(--brand-background);
+    --foreground: var(--text-white:);
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --card: var(--popup-background);
+    --card-foreground: var(--text-white);
+ 
+    --primary: var(--primary-default);
+ 
+    --secondary: var(--secondary-default);
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 215 20.2% 65.1%;
+ 
+    --radius: 0.5rem;
+  }
+
+  :root {
+    /* COLORS */
+    --main-color-primary: #ddcd00;
+    --main-color-secondary: #9e9e9e;
+    --main-color-tertiary: #adcad6;
+    --brand-colors-midnight-blue: #002038;
+    --brand-colors-columbia-blue: #adcad6;
+    /* word wrong */
+    --brand-colors-backgroud: #1e3249;
+    --brand-colors-lemon-glacier: #f5ff00;
+    --text-dark: #212b36;
+    --text-medium: #637381;
+    --text-light: #919eab;
+    --text-grey-dark: #7e7e7e;
+    --text-grey-medium: #aaaaaa;
+    --text-grey-light: #dfe3e8;
+    --text-white: #ffffff;
+    --state-color-primary-primary-default: #b1a400;
+    --state-color-primary-primary-hover: #ddcd00;
+    --state-color-primary-primary-stroke: rgba(177 164 0 / 0.48);
+    --state-color-primary-primary-hover-bg: rgba(221 205 0 / 0.08);
+    --state-color-primary-primary-pressed: #6f6700;
+    --state-color-primary-primary-active: #ddcd00;
+    --state-color-secondary-secondary-default: #ececec;
+    --state-color-secondary-secondary-hover: #fafafa;
+    --state-color-secondary-secondary-stroke: rgba(236 236 236 / 0.48);
+    --state-color-secondary-secondary-hover-bg: rgba(250 250 250 / 0.08);
+    --state-color-secondary-secondary-pressed: #bbbbbb;
+    --state-color-secondary-secondary-active: #fafafa;
+    --state-color-tertiery-tertiary-default: #8aa2ab;
+    --state-color-tertiery-tertiary-hover: #adcad6;
+    --state-color-tertiery-tertiary-stroke: rgba(138 162 171 / 0.48);
+    --state-color-tertiery-tertiary-hover-bg: rgba(173 202 214 / 0.08);
+    --state-color-tertiery-tertiary-pressed: #57656b;
+    --state-color-tertiery-tertiery-active: #adcad6;
+    --state-color-info-info-default: #1b7df5;
+    --state-color-info-info-hover: #2998ff;
+    --state-color-info-info-stroke: rgba(27 125 245 / 0.48);
+    --state-color-info-info-hover-bg: rgba(41 152 255 / 0.08);
+    --state-color-info-info-pressed: #1752b6;
+    --state-color-info-info-active: #2998ff;
+    --state-color-success-success-default: #319917;
+    --state-color-success-success-hover: #44c022;
+    --state-color-success-success-stroke: rgba(49 153 23 / 0.48);
+    --state-color-success-success-hover-bg: rgba(84 214 44 / 0.08);
+    --state-color-success-success-pressed: #235d17;
+    --state-color-success-success-active: #44c022;
+    --state-color-warning-warning-default: #ffc107;
+    --state-color-warning-warning-hover: #ffdf1b;
+    --state-color-warning-warning-stroke: rgba(255 193 7 / 0.48);
+    --state-color-warning-warning-hover-bg: rgba(255 193 7 / 0.08);
+    --state-color-warning-warning-pressed: #985108;
+    --state-color-warning-warning-active: #ffc107;
+    --state-color-error-error-default: #ed2f15;
+    --state-color-error-error-hover: #ff4d35;
+    --state-color-error-error-stroke: rgba(237 47 21 / 0.48);
+    --state-color-error-error-hover-bg: rgba(255 77 53 / 0.08);
+    --state-color-error-error-pressed: #a5210f;
+    --state-color-error-error-active: #ff4d35;
+    --state-color-disable-disable-solid: #454f5b;
+    --state-color-disable-disable-outline: #637381;
+    --primary-ramps-primary-5: #fdfcf2;
+    --primary-ramps-primary-10: #fcfae5;
+    --primary-ramps-primary-20: #f8f5cc;
+    --primary-ramps-primary-30: #f5f0b2;
+    --primary-ramps-primary-40: #f1eb99;
+    --primary-ramps-primary-50: #eee680;
+    --primary-ramps-primary-60: #ebe166;
+    --primary-ramps-primary-70: #e7dc4d;
+    --primary-ramps-primary-80: #e4d733;
+    --primary-ramps-primary-90: #e0d21a;
+    --primary-ramps-primary-100: #ddcd00;
+    --primary-ramps-primary-110: #c7b800;
+    --primary-ramps-primary-120: #b1a400;
+    --primary-ramps-primary-130: #9b8f00;
+    --primary-ramps-primary-140: #857b00;
+    --primary-ramps-primary-150: #6f6700;
+    --secondary-ramps-secondary-5: #fafafa;
+    --secondary-ramps-secondary-10: #f5f5f5;
+    --secondary-ramps-secondary-20: #ececec;
+    --secondary-ramps-secondary-30: #e2e2e2;
+    --secondary-ramps-secondary-40: #d8d8d8;
+    --secondary-ramps-secondary-50: #cfcfcf;
+    --secondary-ramps-secondary-60: #c5c5c5;
+    --secondary-ramps-secondary-70: #bbbbbb;
+    --secondary-ramps-secondary-80: #b1b1b1;
+    --secondary-ramps-secondary-90: #a8a8a8;
+    --secondary-ramps-secondary-100: #9e9e9e;
+    --secondary-ramps-secondary-110: #8e8e8e;
+    --secondary-ramps-secondary-120: #7e7e7e;
+    --secondary-ramps-secondary-130: #6f6f6f;
+    --secondary-ramps-secondary-140: #5f5f5f;
+    --secondary-ramps-secondary-150: #4f4f4f;
+    --tertiary-ramps-tertiary-5: #fbfcfd;
+    --tertiary-ramps-tertiary-10: #f7fafb;
+    --tertiary-ramps-tertiary-20: #eff4f7;
+    --tertiary-ramps-tertiary-30: #e6eff3;
+    --tertiary-ramps-tertiary-40: #deeaef;
+    --tertiary-ramps-tertiary-50: #d6e5eb;
+    --tertiary-ramps-tertiary-60: #cedfe6;
+    --tertiary-ramps-tertiary-70: #c6dae2;
+    --tertiary-ramps-tertiary-80: #bdd5de;
+    --tertiary-ramps-tertiary-90: #b5cfda;
+    --tertiary-ramps-tertiary-100: #adcad6;
+    --tertiary-ramps-tertiary-110: #9cb6c1;
+    --tertiary-ramps-tertiary-120: #8aa2ab;
+    --tertiary-ramps-tertiary-130: #798d96;
+    --tertiary-ramps-tertiary-140: #687980;
+    --tertiary-ramps-tertiary-150: #57656b;
+    --grey-grey-5: #fafafa;
+    --grey-grey-10: #f5f5f5;
+    --grey-grey-20: #ececec;
+    --grey-grey-30: #e2e2e2;
+    --grey-grey-40: #d8d8d8;
+    --grey-grey-50: #cfcfcf;
+    --grey-grey-60: #c5c5c5;
+    --grey-grey-70: #bbbbbb;
+    --grey-grey-80: #b1b1b1;
+    --grey-grey-90: #a8a8a8;
+    --grey-grey-100: #9e9e9e;
+    --grey-grey-110: #8e8e8e;
+    --grey-grey-120: #7e7e7e;
+    --grey-grey-130: #6f6f6f;
+    --grey-grey-140: #5f5f5f;
+    --grey-grey-150: #4f4f4f;
+    --grey2-grey2-50: #f8fafa;
+    --grey2-grey2-100: #f2f5f5;
+    --grey2-grey2-200: #e7ebed;
+    --grey2-grey2-300: #d3dadf;
+    --grey2-grey2-400: #bac5cb;
+    --grey2-grey2-500: #9dabb5;
+    --grey2-grey2-600: #919eab;
+    --grey2-grey2-700: #72808f;
+    --grey2-grey2-800: #606b77;
+    --grey2-grey2-900: #4f5863;
+    --grey2-grey2-950: #343b41;
+    --info-info-50: #eef8ff;
+    --info-info-100: #d9efff;
+    --info-info-200: #bce4ff;
+    --info-info-300: #8ed5ff;
+    --info-info-400: #59bbff;
+    --info-info-500: #2998ff;
+    --info-info-600: #1b7df5;
+    --info-info-700: #1466e1;
+    --info-info-800: #1752b6;
+    --info-info-900: #19478f;
+    --info-info-950: #142c57;
+    --success-success-50: #effce9;
+    --success-success-100: #daf9ce;
+    --success-success-200: #b8f3a3;
+    --success-success-300: #8ce86e;
+    --success-success-400: #54d62c;
+    --success-success-500: #44c022;
+    --success-success-600: #319917;
+    --success-success-700: #277516;
+    --success-success-800: #235d17;
+    --success-success-900: #214f18;
+    --success-success-950: #0c2b08;
+    --warning-warning-50: #ffffea;
+    --warning-warning-100: #fffbc5;
+    --warning-warning-200: #fff885;
+    --warning-warning-300: #ffee46;
+    --warning-warning-400: #ffdf1b;
+    --warning-warning-500: #ffc107;
+    --warning-warning-600: #e29400;
+    --warning-warning-700: #bb6902;
+    --warning-warning-800: #985108;
+    --warning-warning-900: #7c420b;
+    --warning-warning-950: #482200;
+    --error-error-50: #fff3f1;
+    --error-error-100: #ffe3df;
+    --error-error-200: #ffccc5;
+    --error-error-300: #ffa99d;
+    --error-error-400: #ff7664;
+    --error-error-500: #ff4d35;
+    --error-error-600: #ed2f15;
+    --error-error-700: #c8230d;
+    --error-error-800: #a5210f;
+    --error-error-900: #882214;
+    --error-error-950: #4b0c04;
+    --input-color-default-text: #9e9e9e;
+    --input-color-default-stroke: rgba(158 158 158 / 0.24);
+    --input-color-filled-text: #dfe3e8;
+    --input-color-active-stroke: rgba(158 158 158 / 0.48);
+    --input-color-disable-text: rgba(145 158 171 / 0.52);
+    --input-color-disable-stroke: rgba(145 158 171 / 0.08);
+    --input-color-disable-bg: rgba(145 158 171 / 0.04);
+    --input-color-label-bg: #2d2e30;
+    --input-color-error: #ff4d35;
+    --main-transparency-primary-8: rgba(221 205 0 / 0.08);
+    --main-transparency-primary-12: rgba(221 205 0 / 0.12);
+    --main-transparency-primary-16: rgba(221 205 0 / 0.16);
+    --main-transparency-primary-24: rgba(221 205 0 / 0.24);
+    --main-transparency-primary-32: rgba(221 205 0 / 0.32);
+    --main-transparency-primary-48: rgba(221 205 0 / 0.48);
+    --main-transparency-secondary-8: rgba(158 158 158 / 0.08);
+    --main-transparency-secondary-12: rgba(158 158 158 / 0.12);
+    --main-transparency-secondary-16: rgba(158 158 158 / 0.16);
+    --main-transparency-secondary-24: rgba(158 158 158 / 0.24);
+    --main-transparency-secondary-32: rgba(158 158 158 / 0.32);
+    --main-transparency-secondary-48: rgba(158 158 158 / 0.48);
+    --main-transparency-tertiary-8: rgba(173 202 214 / 0.08);
+    --main-transparency-tertiary-12: rgba(173 202 214 / 0.12);
+    --main-transparency-tertiary-16: rgba(173 202 214 / 0.16);
+    --main-transparency-tertiary-24: rgba(173 202 214 / 0.24);
+    --main-transparency-tertiary-32: rgba(173 202 214 / 0.32);
+    --main-transparency-tertiary-48: rgba(173 202 214 / 0.48);
+    --other-transparency-info-8: rgba(41 152 255 / 0.08);
+    --other-transparency-info-12: rgba(41 152 255 / 0.12);
+    --other-transparency-info-16: rgba(41 152 255 / 0.16);
+    --other-transparency-info-24: rgba(41 152 255 / 0.24);
+    --other-transparency-info-32: rgba(41 152 255 / 0.32);
+    --other-transparency-info-48: rgba(41 152 255 / 0.48);
+    --other-transparency-success-8: rgba(84 214 44 / 0.08);
+    --other-transparency-success-12: rgba(84 214 44 / 0.12);
+    --other-transparency-success-16: rgba(84 214 44 / 0.16);
+    --other-transparency-success-24: rgba(84 214 44 / 0.24);
+    --other-transparency-success-32: rgba(84 214 44 / 0.32);
+    --other-transparency-success-48: rgba(84 214 44 / 0.48);
+    --other-transparency-warning-8: rgba(255 193 7 / 0.08);
+    --other-transparency-warning-12: rgba(255 193 7 / 0.12);
+    --other-transparency-warning-16: rgba(255 193 7 / 0.16);
+    --other-transparency-warning-24: rgba(255 193 7 / 0.24);
+    --other-transparency-warning-32: rgba(255 193 7 / 0.32);
+    --other-transparency-warning-48: rgba(255 193 7 / 0.48);
+    --other-transparency-error-8: rgba(255 72 66 / 0.08);
+    --other-transparency-error-12: rgba(255 72 66 / 0.12);
+    --other-transparency-error-16: rgba(255 72 66 / 0.16);
+    --other-transparency-error-24: rgba(255 72 66 / 0.24);
+    --other-transparency-error-32: rgba(255 72 66 / 0.32);
+    --other-transparency-error-48: rgba(255 72 66 / 0.48);
+    --other-transparency-grey-8: rgba(158 158 158 / 0.08);
+    --other-transparency-grey-12: rgba(158 158 158 / 0.12);
+    --other-transparency-grey-16: rgba(158 158 158 / 0.16);
+    --other-transparency-grey-24: rgba(158 158 158 / 0.24);
+    --other-transparency-grey-32: rgba(158 158 158 / 0.32);
+    --other-transparency-grey-48: rgba(158 158 158 / 0.48);
+    --other-transparency-grey2-8: rgba(145 158 171 / 0.08);
+    --other-transparency-grey2-12: rgba(145 158 171 / 0.12);
+    --other-transparency-grey2-16: rgba(145 158 171 / 0.16);
+    --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
+    --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
+    --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
+    --other-transparency-white-08: rgba(255 255 255 / 0.08);
+    --other-transparency-white-12: rgba(255 255 255 / 0.12);
+    --other-transparency-white-16: rgba(255 255 255 / 0.16);
+    --other-transparency-white-24: rgba(255 255 255 / 0.24);
+    --other-transparency-white-32: rgba(255 255 255 / 0.32);
+    --other-transparency-white-48: rgba(255 255 255 / 0.48);
+    --other-transparency-black-08: rgba(0 0 0 / 0.08);
+    --other-transparency-black-12: rgba(0 0 0 / 0.12);
+    --other-transparency-black-16: rgba(0 0 0 / 0.16);
+    --other-transparency-black-24: rgba(0 0 0 / 0.24);
+    --other-transparency-black-32: rgba(0 0 0 / 0.32);
+    --other-transparency-black-48: rgba(0 0 0 / 0.48);
+    --other-bg: #202427;
+    --other-bg2: #282c31;
+    --other-popup: #2d2e30;
+    --other-popup-hightlight: #343638;
+    --other-popup-curtain: rgba(0 0 0 / 0.6);
+    --common-white: #ffffff;
+    --common-black: #000000;
+    --dashboard-panel-bg-grey: rgba(145 158 171 / 0.08);
+    --dashboard-panel-bg-white: rgba(255 255 255 / 0.08);
+    --dashboard-panel-border: rgba(168 162 168 / 0.24);
+
+    --primary-foreground: var(--text-dark);
+    --secondary-foreground: var(--text-dark);
+    --tertiary-foreground: var(--text-dark);
+    --info-foreground: var(--text-white);
+    --success-foreground: var(--text-white);
+    --warning-foreground: var(--text-dark);
+    --error-foreground: var(--text-white);
+
+    --surface: var(--other-bg2);
+    --surface-foreground: var(--text-white);
+    --radius: 0.5rem;
+
+  }
+}
+
+@layer base {
+  * {
+    /* @apply border-border; */
+  }
+  body {
+    /* @apply bg-background text-foreground; */
+    @apply bg-[var(--brand-colors-backgroud)] text-white;
+  }
+}