untitled-ui

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-ring-brand: 158 119 237;
    --color-ring-gray: 158 162 179;
    --color-ring-gray-secondary: 158 162 179;
    --color-ring-error: 240 68 56;

    --border-radius-none: 0rem;
    --border-radius-xxs: 0.125rem;
    --border-radius-xs: 0.25rem;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.625rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-3xl: 1.25rem;
    --border-radius-4xl: 1.5rem;
    --border-radius-full: 999rem;

    --color-white: 255 255 255;
    --color-black: 0 0 0;

    --color-alpha-black: 0 0 0;
    --color-alpha-white: 255 255 255;

    --color-bg-active: 249 250 251;
    --color-bg-brand-primary: 249 245 255;
    --color-bg-brand-primary_alt: 249 245 255;
    --color-bg-brand-secondary: 244 235 255;
    --color-bg-brand-section: 83 56 158;
    --color-bg-brand-section_subtle: 105 65 198;
    --color-bg-brand-solid: 127 86 217;
    --color-bg-brand-solid_hover: 105 65 198;
    --color-bg-disabled: 242 244 247;
    --color-bg-disabled_subtle: 249 250 251;
    --color-bg-error-primary: 254 243 242;
    --color-bg-error-secondary: 254 228 226;
    --color-bg-error-solid: 217 45 32;
    --color-bg-overlay: 12 17 29;
    --color-bg-primary: 255 255 255;
    --color-bg-primary-solid: 12 17 29;
    --color-bg-primary_alt: 255 255 255;
    --color-bg-primary_hover: 249 250 251;
    --color-bg-quaternary: 234 236 240;
    --color-bg-secondary: 249 250 251;
    --color-bg-secondary-solid: 71 84 103;
    --color-bg-secondary_alt: 249 250 251;
    --color-bg-secondary_hover: 242 244 247;
    --color-bg-secondary_subtle: 252 252 253;
    --color-bg-success-primary: 236 253 243;
    --color-bg-success-secondary: 220 250 230;
    --color-bg-success-solid: 7 148 85;
    --color-bg-tertiary: 242 244 247;
    --color-bg-warning-primary: 255 250 235;
    --color-bg-warning-secondary: 254 240 199;
    --color-bg-warning-solid: 220 104 3;

    --color-border-brand: 214 187 251;
    --color-border-brand-solid: 127 86 217;
    --color-border-brand-solid_alt: 127 86 217;
    --color-border-disabled: 208 213 221;
    --color-border-disabled_subtle: 234 236 240;
    --color-border-error: 253 162 155;
    --color-border-error-solid: 217 45 32;
    --color-border-primary: 208 213 221;
    --color-border-secondary: 234 236 240;
    --color-border-tertiary: 242 244 247;

    --color-fg-brand-primary: 127 86 217;
    --color-fg-brand-primary_alt: 127 86 217;
    --color-fg-brand-secondary: 158 119 237;
    --color-fg-disabled: 152 162 179;
    --color-fg-disabled_subtle: 208 213 221;
    --color-fg-error-primary: 217 45 32;
    --color-fg-error-secondary: 240 68 56;
    --color-fg-primary: 16 24 40;
    --color-fg-quaternary: 102 112 133;
    --color-fg-quaternary_hover: 71 84 103;
    --color-fg-quinary: 152 162 179;
    --color-fg-quinary_hover: 102 112 133;
    --color-fg-secondary: 52 64 84;
    --color-fg-secondary_hover: 24 34 48;
    --color-fg-senary: 208 213 221;
    --color-fg-success-primary: 7 148 85;
    --color-fg-success-secondary: 23 178 106;
    --color-fg-tertiary: 71 84 103;
    --color-fg-tertiary_hover: 52 64 84;
    --color-fg-warning-primary: 220 104 3;
    --color-fg-warning-secondary: 247 144 9;

    --color-text-brand-primary: 66 48 125;
    --color-text-brand-secondary: 105 65 198;
    --color-text-brand-tertiary: 127 86 217;
    --color-text-brand-tertiary_alt: 127 86 217;
    --color-text-disabled: 102 112 133;
    --color-text-error-primary: 217 45 32;
    --color-text-placeholder: 102 112 133;
    --color-text-placeholder_subtle: 208 213 221;
    --color-text-primary: 16 24 40;
    --color-text-primary_on-brand: 255 255 255;
    --color-text-quaternary: 102 112 133;
    --color-text-quaternary_on-brand: 214 187 251;
    --color-text-secondary: 52 64 84;
    --color-text-secondary_hover: 24 34 48;
    --color-text-secondary_on-brand: 233 215 254;
    --color-text-success-primary: 7 148 85;
    --color-text-tertiary: 71 84 103;
    --color-text-tertiary_hover: 52 64 84;
    --color-text-tertiary_on-brand: 233 215 254;
    --color-text-warning-primary: 220 104 3;

    --color-utility-blue-50: 239 248 255;
    --color-utility-blue-100: 209 233 255;
    --color-utility-blue-200: 178 221 255;
    --color-utility-blue-300: 132 202 255;
    --color-utility-blue-400: 83 177 253;
    --color-utility-blue-500: 46 144 250;
    --color-utility-blue-600: 21 112 239;
    --color-utility-blue-700: 23 92 211;

    --color-utility-blue-dark-50: 239 244 255;
    --color-utility-blue-dark-100: 209 224 255;
    --color-utility-blue-dark-200: 178 204 255;
    --color-utility-blue-dark-300: 132 173 255;
    --color-utility-blue-dark-400: 82 139 255;
    --color-utility-blue-dark-500: 41 112 255;
    --color-utility-blue-dark-600: 21 94 239;
    --color-utility-blue-dark-700: 0 78 235;

    --color-utility-blue-light-50: 240 249 255;
    --color-utility-blue-light-100: 224 242 254;
    --color-utility-blue-light-200: 185 230 254;
    --color-utility-blue-light-300: 124 212 253;
    --color-utility-blue-light-400: 54 191 250;
    --color-utility-blue-light-500: 11 165 236;
    --color-utility-blue-light-600: 0 134 201;
    --color-utility-blue-light-700: 2 106 162;

    --color-utility-brand-50: 249 245 255;
    --color-utility-brand-50_alt: 249 245 255;
    --color-utility-brand-100: 244 235 255;
    --color-utility-brand-100_alt: 244 235 255;
    --color-utility-brand-200: 233 215 254;
    --color-utility-brand-200_alt: 233 215 254;
    --color-utility-brand-300: 214 187 251;
    --color-utility-brand-300_alt: 214 187 251;
    --color-utility-brand-400: 182 146 246;
    --color-utility-brand-400_alt: 182 146 246;
    --color-utility-brand-500: 158 119 237;
    --color-utility-brand-500_alt: 158 119 237;
    --color-utility-brand-600: 127 86 217;
    --color-utility-brand-600_alt: 127 86 217;
    --color-utility-brand-700: 105 65 198;
    --color-utility-brand-700_alt: 105 65 198;
    --color-utility-brand-800: 83 56 158;
    --color-utility-brand-800_alt: 83 56 158;
    --color-utility-brand-900: 66 48 125;
    --color-utility-brand-900_alt: 66 48 125;

    --color-utility-error-50: 254 243 242;
    --color-utility-error-100: 254 228 226;
    --color-utility-error-200: 254 205 202;
    --color-utility-error-300: 253 162 155;
    --color-utility-error-400: 249 112 102;
    --color-utility-error-500: 240 68 56;
    --color-utility-error-600: 217 45 32;
    --color-utility-error-700: 180 35 24;

    --color-utility-fuchsia-50: 253 244 255;
    --color-utility-fuchsia-100: 251 232 255;
    --color-utility-fuchsia-200: 246 208 254;
    --color-utility-fuchsia-300: 238 170 253;
    --color-utility-fuchsia-400: 228 120 250;
    --color-utility-fuchsia-500: 212 68 241;
    --color-utility-fuchsia-600: 186 36 213;
    --color-utility-fuchsia-700: 159 26 177;

    --color-utility-gray-50: 249 250 251;
    --color-utility-gray-100: 242 244 247;
    --color-utility-gray-200: 234 236 240;
    --color-utility-gray-300: 208 213 221;
    --color-utility-gray-400: 152 162 179;
    --color-utility-gray-500: 102 112 133;
    --color-utility-gray-600: 71 84 103;
    --color-utility-gray-700: 52 64 84;
    --color-utility-gray-800: 24 34 48;
    --color-utility-gray-900: 16 24 40;

    --color-utility-gray-blue-50: 248 249 252;
    --color-utility-gray-blue-100: 234 236 245;
    --color-utility-gray-blue-200: 213 217 235;
    --color-utility-gray-blue-300: 179 184 219;
    --color-utility-gray-blue-400: 113 123 188;
    --color-utility-gray-blue-500: 78 91 166;
    --color-utility-gray-blue-600: 62 71 132;
    --color-utility-gray-blue-700: 54 63 114;

    --color-utility-indigo-50: 238 244 255;
    --color-utility-indigo-100: 224 234 255;
    --color-utility-indigo-200: 199 215 254;
    --color-utility-indigo-300: 164 188 253;
    --color-utility-indigo-400: 128 152 249;
    --color-utility-indigo-500: 97 114 243;
    --color-utility-indigo-600: 68 76 231;
    --color-utility-indigo-700: 53 56 205;

    --color-utility-orange-50: 254 246 238;
    --color-utility-orange-100: 253 234 215;
    --color-utility-orange-200: 249 219 175;
    --color-utility-orange-300: 247 178 122;
    --color-utility-orange-400: 243 135 68;
    --color-utility-orange-500: 239 104 32;
    --color-utility-orange-600: 224 79 22;
    --color-utility-orange-700: 185 56 21;

    --color-utility-orange-dark-50: 255 244 237;
    --color-utility-orange-dark-100: 255 230 213;
    --color-utility-orange-dark-200: 255 214 174;
    --color-utility-orange-dark-300: 255 156 102;
    --color-utility-orange-dark-400: 255 105 46;
    --color-utility-orange-dark-500: 255 68 5;
    --color-utility-orange-dark-600: 230 46 5;
    --color-utility-orange-dark-700: 188 27 6;

    --color-utility-pink-50: 253 242 250;
    --color-utility-pink-100: 252 231 246;
    --color-utility-pink-200: 252 206 238;
    --color-utility-pink-300: 250 167 224;
    --color-utility-pink-400: 246 112 199;
    --color-utility-pink-500: 238 70 188;
    --color-utility-pink-600: 221 37 144;
    --color-utility-pink-700: 193 21 116;

    --color-utility-purple-50: 244 243 255;
    --color-utility-purple-100: 235 233 254;
    --color-utility-purple-200: 217 214 254;
    --color-utility-purple-300: 189 180 254;
    --color-utility-purple-400: 155 138 251;
    --color-utility-purple-500: 122 90 248;
    --color-utility-purple-600: 105 56 239;
    --color-utility-purple-700: 89 37 220;

    --color-utility-success-50: 236 253 243;
    --color-utility-success-100: 220 250 230;
    --color-utility-success-200: 171 239 198;
    --color-utility-success-300: 117 224 167;
    --color-utility-success-400: 71 205 137;
    --color-utility-success-500: 23 178 106;
    --color-utility-success-600: 7 148 85;
    --color-utility-success-700: 6 118 71;

    --color-utility-warning-50: 255 250 235;
    --color-utility-warning-100: 254 240 199;
    --color-utility-warning-200: 254 223 137;
    --color-utility-warning-300: 254 200 75;
    --color-utility-warning-400: 253 176 34;
    --color-utility-warning-500: 247 144 9;
    --color-utility-warning-600: 220 104 3;
    --color-utility-warning-700: 181 71 8;
  }
  .dark {
    --color-alpha-black: 255 255 255;
    --color-alpha-white: 12 17 29;

    --color-bg-active: 31 36 47;
    --color-bg-brand-primary: 158 119 237;
    --color-bg-brand-primary_alt: 249 250 251;
    --color-bg-brand-secondary: 127 86 217;
    --color-bg-brand-section: 249 250 251;
    --color-bg-brand-section_subtle: 255 255 255;
    --color-bg-brand-solid: 127 86 217;
    --color-bg-brand-solid_hover: 158 119 237;
    --color-bg-disabled: 31 36 47;
    --color-bg-disabled_subtle: 22 27 38;
    --color-bg-error-primary: 240 68 56;
    --color-bg-error-secondary: 217 45 32;
    --color-bg-error-solid: 217 45 32;
    --color-bg-overlay: 31 36 47;
    --color-bg-primary: 12 17 29;
    --color-bg-primary-solid: 249 250 251;
    --color-bg-primary_alt: 249 250 251;
    --color-bg-primary_hover: 31 36 47;
    --color-bg-quaternary: 51 55 65;
    --color-bg-secondary: 22 27 38;
    --color-bg-secondary-solid: 97 100 108;
    --color-bg-secondary_alt: 255 255 255;
    --color-bg-secondary_hover: 31 36 47;
    --color-bg-secondary_subtle: 22 27 38;
    --color-bg-success-primary: 23 178 106;
    --color-bg-success-secondary: 7 148 85;
    --color-bg-success-solid: 7 148 85;
    --color-bg-tertiary: 31 36 47;
    --color-bg-warning-primary: 247 144 9;
    --color-bg-warning-secondary: 220 104 3;
    --color-bg-warning-solid: 220 104 3;

    --color-border-brand: 182 146 246;
    --color-border-brand-solid: 158 119 237;
    --color-border-brand-solid_alt: 51 55 65;
    --color-border-disabled: 51 55 65;
    --color-border-disabled_subtle: 31 36 47;
    --color-border-error: 249 112 102;
    --color-border-error-solid: 240 68 56;
    --color-border-primary: 51 55 65;
    --color-border-secondary: 31 36 47;
    --color-border-tertiary: 31 36 47;

    --color-fg-brand-primary: 158 119 237;
    --color-fg-brand-primary_alt: 206 207 210;
    --color-fg-brand-secondary: 158 119 237;
    --color-fg-disabled: 133 136 142;
    --color-fg-disabled_subtle: 97 100 108;
    --color-fg-error-primary: 240 68 56;
    --color-fg-error-secondary: 249 112 102;
    --color-fg-primary: 255 255 255;
    --color-fg-quaternary: 148 150 156;
    --color-fg-quaternary_hover: 206 207 210;
    --color-fg-quinary: 133 136 142;
    --color-fg-quinary_hover: 148 150 156;
    --color-fg-secondary: 206 207 210;
    --color-fg-secondary_hover: 236 236 237;
    --color-fg-senary: 97 100 108;
    --color-fg-success-primary: 23 178 106;
    --color-fg-success-secondary: 71 205 137;
    --color-fg-tertiary: 148 150 156;
    --color-fg-tertiary_hover: 206 207 210;
    --color-fg-warning-primary: 247 144 9;
    --color-fg-warning-secondary: 253 176 34;

    --color-text-brand-primary: 245 245 246;
    --color-text-brand-secondary: 206 207 210;
    --color-text-brand-tertiary: 148 150 156;
    --color-text-brand-tertiary_alt: 245 245 246;
    --color-text-disabled: 133 136 142;
    --color-text-error-primary: 249 112 102;
    --color-text-placeholder: 133 136 142;
    --color-text-placeholder_subtle: 51 55 65;
    --color-text-primary: 245 245 246;
    --color-text-primary_on-brand: 245 245 246;
    --color-text-quaternary: 148 150 156;
    --color-text-quaternary_on-brand: 148 150 156;
    --color-text-secondary: 206 207 210;
    --color-text-secondary_hover: 236 236 237;
    --color-text-secondary_on-brand: 206 207 210;
    --color-text-success-primary: 71 205 137;
    --color-text-tertiary: 148 150 156;
    --color-text-tertiary_hover: 206 207 210;
    --color-text-tertiary_on-brand: 148 150 156;
    --color-text-warning-primary: 253 176 34;

    --color-utility-blue-50: 16 42 86;
    --color-utility-blue-100: 25 65 133;
    --color-utility-blue-200: 24 73 169;
    --color-utility-blue-300: 23 92 211;
    --color-utility-blue-400: 21 112 239;
    --color-utility-blue-500: 46 144 250;
    --color-utility-blue-600: 83 177 253;
    --color-utility-blue-700: 132 202 255;

    --color-utility-blue-dark-50: 0 34 102;
    --color-utility-blue-dark-100: 0 53 158;
    --color-utility-blue-dark-200: 0 64 193;
    --color-utility-blue-dark-300: 0 78 235;
    --color-utility-blue-dark-400: 21 94 239;
    --color-utility-blue-dark-500: 41 112 255;
    --color-utility-blue-dark-600: 82 139 255;
    --color-utility-blue-dark-700: 132 173 255;

    --color-utility-blue-light-50: 6 44 65;
    --color-utility-blue-light-100: 11 74 111;
    --color-utility-blue-light-200: 6 89 134;
    --color-utility-blue-light-300: 2 106 162;
    --color-utility-blue-light-400: 0 134 201;
    --color-utility-blue-light-500: 11 165 236;
    --color-utility-blue-light-600: 54 191 250;
    --color-utility-blue-light-700: 124 212 253;

    --color-utility-brand-50: 44 28 95;
    --color-utility-brand-50_alt: 249 250 251;
    --color-utility-brand-100: 66 48 125;
    --color-utility-brand-100_alt: 242 244 247;
    --color-utility-brand-200: 83 56 158;
    --color-utility-brand-200_alt: 234 236 240;
    --color-utility-brand-300: 105 65 198;
    --color-utility-brand-300_alt: 208 213 221;
    --color-utility-brand-400: 127 86 217;
    --color-utility-brand-400_alt: 152 162 179;
    --color-utility-brand-500: 158 119 237;
    --color-utility-brand-500_alt: 102 112 133;
    --color-utility-brand-600: 182 146 246;
    --color-utility-brand-600_alt: 71 84 103;
    --color-utility-brand-700: 214 187 251;
    --color-utility-brand-700_alt: 52 64 84;
    --color-utility-brand-800: 233 215 254;
    --color-utility-brand-800_alt: 24 34 48;
    --color-utility-brand-900: 244 235 255;
    --color-utility-brand-900_alt: 16 24 40;

    --color-utility-error-50: 85 22 12;
    --color-utility-error-100: 122 39 26;
    --color-utility-error-200: 145 32 24;
    --color-utility-error-300: 180 35 24;
    --color-utility-error-400: 217 45 32;
    --color-utility-error-500: 240 68 56;
    --color-utility-error-600: 249 112 102;
    --color-utility-error-700: 253 162 155;

    --color-utility-fuchsia-50: 71 16 76;
    --color-utility-fuchsia-100: 111 24 119;
    --color-utility-fuchsia-200: 130 24 144;
    --color-utility-fuchsia-300: 159 26 177;
    --color-utility-fuchsia-400: 186 36 213;
    --color-utility-fuchsia-500: 212 68 241;
    --color-utility-fuchsia-600: 228 120 250;
    --color-utility-fuchsia-700: 238 170 253;

    --color-utility-gray-50: 22 27 38;
    --color-utility-gray-100: 31 36 47;
    --color-utility-gray-200: 51 55 65;
    --color-utility-gray-300: 51 55 65;
    --color-utility-gray-400: 97 100 108;
    --color-utility-gray-500: 133 136 142;
    --color-utility-gray-600: 148 150 156;
    --color-utility-gray-700: 206 207 210;
    --color-utility-gray-800: 236 236 237;
    --color-utility-gray-900: 240 241 241;

    --color-utility-gray-blue-50: 16 19 35;
    --color-utility-gray-blue-100: 16 19 35;
    --color-utility-gray-blue-200: 41 48 86;
    --color-utility-gray-blue-300: 54 63 114;
    --color-utility-gray-blue-400: 62 71 132;
    --color-utility-gray-blue-500: 78 91 166;
    --color-utility-gray-blue-600: 113 123 188;
    --color-utility-gray-blue-700: 179 184 219;

    --color-utility-indigo-50: 31 35 91;
    --color-utility-indigo-100: 45 50 130;
    --color-utility-indigo-200: 45 49 166;
    --color-utility-indigo-300: 53 56 205;
    --color-utility-indigo-400: 68 76 231;
    --color-utility-indigo-500: 97 114 243;
    --color-utility-indigo-600: 128 152 249;
    --color-utility-indigo-700: 164 188 253;

    --color-utility-orange-50: 81 28 16;
    --color-utility-orange-100: 119 41 23;
    --color-utility-orange-200: 147 47 25;
    --color-utility-orange-300: 185 56 21;
    --color-utility-orange-400: 224 79 22;
    --color-utility-orange-500: 239 104 32;
    --color-utility-orange-600: 243 135 68;
    --color-utility-orange-700: 247 178 122;

    --color-utility-orange-dark-50: 87 19 10;
    --color-utility-orange-dark-100: 119 26 13;
    --color-utility-orange-dark-200: 151 24 12;
    --color-utility-orange-dark-300: 188 27 6;
    --color-utility-orange-dark-400: 230 46 5;
    --color-utility-orange-dark-500: 255 68 5;
    --color-utility-orange-dark-600: 255 105 46;
    --color-utility-orange-dark-700: 255 156 102;

    --color-utility-pink-50: 78 13 48;
    --color-utility-pink-100: 133 22 81;
    --color-utility-pink-200: 158 22 95;
    --color-utility-pink-300: 193 21 116;
    --color-utility-pink-400: 221 37 144;
    --color-utility-pink-500: 238 70 188;
    --color-utility-pink-600: 246 112 199;
    --color-utility-pink-700: 250 167 224;

    --color-utility-purple-50: 39 17 95;
    --color-utility-purple-100: 62 28 150;
    --color-utility-purple-200: 74 31 184;
    --color-utility-purple-300: 89 37 220;
    --color-utility-purple-400: 105 56 239;
    --color-utility-purple-500: 122 90 248;
    --color-utility-purple-600: 155 138 251;
    --color-utility-purple-700: 189 180 254;

    --color-utility-success-50: 5 51 33;
    --color-utility-success-100: 7 77 49;
    --color-utility-success-200: 8 93 58;
    --color-utility-success-300: 6 118 71;
    --color-utility-success-400: 7 148 85;
    --color-utility-success-500: 23 178 106;
    --color-utility-success-600: 71 205 137;
    --color-utility-success-700: 117 224 167;

    --color-utility-warning-50: 78 29 9;
    --color-utility-warning-100: 122 46 14;
    --color-utility-warning-200: 147 55 13;
    --color-utility-warning-300: 181 71 8;
    --color-utility-warning-400: 220 104 3;
    --color-utility-warning-500: 247 144 9;
    --color-utility-warning-600: 253 176 34;
    --color-utility-warning-700: 254 200 75;
  }
}

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        colors: {
            white: 'rgb(var(--color-white) / <alpha-value>)',
            black: 'rgb(var(--color-black) / <alpha-value>)',
            alpha: {
                white: 'rgb(var(--color-alpha-white) / <alpha-value>)',
                black: 'rgb(var(--color-alpha-black) / <alpha-value>)',
            },
            utility: {
                'gray-50': 'rgb(var(--color-utility-gray-50) / <alpha-value>)',
                'gray-100': 'rgb(var(--color-utility-gray-100) / <alpha-value>)',
                'gray-200': 'rgb(var(--color-utility-gray-200) / <alpha-value>)',
                'gray-300': 'rgb(var(--color-utility-gray-300) / <alpha-value>)',
                'gray-400': 'rgb(var(--color-utility-gray-400) / <alpha-value>)',
                'gray-500': 'rgb(var(--color-utility-gray-500) / <alpha-value>)',
                'gray-600': 'rgb(var(--color-utility-gray-600) / <alpha-value>)',
                'gray-700': 'rgb(var(--color-utility-gray-700) / <alpha-value>)',
                'gray-800': 'rgb(var(--color-utility-gray-800) / <alpha-value>)',
                'gray-900': 'rgb(var(--color-utility-gray-900) / <alpha-value>)',

                'brand-50': 'rgb(var(--color-utility-brand-50) / <alpha-value>)',
                'brand-50_alt': 'rgb(var(--color-utility-brand-50_alt) / <alpha-value>)',
                'brand-100': 'rgb(var(--color-utility-brand-100) / <alpha-value>)',
                'brand-100_alt': 'rgb(var(--color-utility-brand-100_alt) / <alpha-value>)',
                'brand-200': 'rgb(var(--color-utility-brand-200) / <alpha-value>)',
                'brand-200_alt': 'rgb(var(--color-utility-brand-200_alt) / <alpha-value>)',
                'brand-300': 'rgb(var(--color-utility-brand-300) / <alpha-value>)',
                'brand-300_alt': 'rgb(var(--color-utility-brand-300_alt) / <alpha-value>)',
                'brand-400': 'rgb(var(--color-utility-brand-400) / <alpha-value>)',
                'brand-400_alt': 'rgb(var(--color-utility-brand-400_alt) / <alpha-value>)',
                'brand-500': 'rgb(var(--color-utility-brand-500) / <alpha-value>)',
                'brand-500_alt': 'rgb(var(--color-utility-brand-500_alt) / <alpha-value>)',
                'brand-600': 'rgb(var(--color-utility-brand-600) / <alpha-value>)',
                'brand-600_alt': 'rgb(var(--color-utility-brand-600_alt) / <alpha-value>)',
                'brand-700': 'rgb(var(--color-utility-brand-700) / <alpha-value>)',
                'brand-700_alt': 'rgb(var(--color-utility-brand-700_alt) / <alpha-value>)',
                'brand-800': 'rgb(var(--color-utility-brand-800) / <alpha-value>)',
                'brand-800_alt': 'rgb(var(--color-utility-brand-800_alt) / <alpha-value>)',
                'brand-900': 'rgb(var(--color-utility-brand-900) / <alpha-value>)',
                'brand-900_alt': 'rgb(var(--color-utility-brand-900_alt) / <alpha-value>)',

                'error-50': 'rgb(var(--color-utility-error-50) / <alpha-value>)',
                'error-100': 'rgb(var(--color-utility-error-100) / <alpha-value>)',
                'error-200': 'rgb(var(--color-utility-error-200) / <alpha-value>)',
                'error-300': 'rgb(var(--color-utility-error-300) / <alpha-value>)',
                'error-400': 'rgb(var(--color-utility-error-400) / <alpha-value>)',
                'error-500': 'rgb(var(--color-utility-error-500) / <alpha-value>)',
                'error-600': 'rgb(var(--color-utility-error-600) / <alpha-value>)',
                'error-700': 'rgb(var(--color-utility-error-700) / <alpha-value>)',

                'warning-50': 'rgb(var(--color-utility-warning-50) / <alpha-value>)',
                'warning-100': 'rgb(var(--color-utility-warning-100) / <alpha-value>)',
                'warning-200': 'rgb(var(--color-utility-warning-200) / <alpha-value>)',
                'warning-300': 'rgb(var(--color-utility-warning-300) / <alpha-value>)',
                'warning-400': 'rgb(var(--color-utility-warning-400) / <alpha-value>)',
                'warning-500': 'rgb(var(--color-utility-warning-500) / <alpha-value>)',
                'warning-600': 'rgb(var(--color-utility-warning-600) / <alpha-value>)',
                'warning-700': 'rgb(var(--color-utility-warning-700) / <alpha-value>)',

                'success-50': 'rgb(var(--color-utility-success-50) / <alpha-value>)',
                'success-100': 'rgb(var(--color-utility-success-100) / <alpha-value>)',
                'success-200': 'rgb(var(--color-utility-success-200) / <alpha-value>)',
                'success-300': 'rgb(var(--color-utility-success-300) / <alpha-value>)',
                'success-400': 'rgb(var(--color-utility-success-400) / <alpha-value>)',
                'success-500': 'rgb(var(--color-utility-success-500) / <alpha-value>)',
                'success-600': 'rgb(var(--color-utility-success-600) / <alpha-value>)',
                'success-700': 'rgb(var(--color-utility-success-700) / <alpha-value>)',

                'blue-50': 'rgb(var(--color-utility-blue-50) / <alpha-value>)',
                'blue-100': 'rgb(var(--color-utility-blue-100) / <alpha-value>)',
                'blue-200': 'rgb(var(--color-utility-blue-200) / <alpha-value>)',
                'blue-300': 'rgb(var(--color-utility-blue-300) / <alpha-value>)',
                'blue-400': 'rgb(var(--color-utility-blue-400) / <alpha-value>)',
                'blue-500': 'rgb(var(--color-utility-blue-500) / <alpha-value>)',
                'blue-600': 'rgb(var(--color-utility-blue-600) / <alpha-value>)',
                'blue-700': 'rgb(var(--color-utility-blue-700) / <alpha-value>)',

                'blue-light-50': 'rgb(var(--color-utility-blue-light-50) / <alpha-value>)',
                'blue-light-100': 'rgb(var(--color-utility-blue-light-100) / <alpha-value>)',
                'blue-light-200': 'rgb(var(--color-utility-blue-light-200) / <alpha-value>)',
                'blue-light-300': 'rgb(var(--color-utility-blue-light-300) / <alpha-value>)',
                'blue-light-400': 'rgb(var(--color-utility-blue-light-400) / <alpha-value>)',
                'blue-light-500': 'rgb(var(--color-utility-blue-light-500) / <alpha-value>)',
                'blue-light-600': 'rgb(var(--color-utility-blue-light-600) / <alpha-value>)',
                'blue-light-700': 'rgb(var(--color-utility-blue-light-700) / <alpha-value>)',
            },
        },
        ringColor: {
            DEFAULT: 'rgb(var(--color-ring-brand) / 0.24)',
            brand: 'rgb(var(--color-ring-brand) / 0.24)',
            gray: 'rgb(var(--color-ring-gray) / 0.14)',
            'gray-secondary': 'rgb(var(--color-ring-gray-secondary) / 0.20)',
            error: 'rgb(var(--color-ring-error) / 0.24)',
        },
        ringWidth: {
            DEFAULT: '4px',
        },
        textColor: {
            primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
            'primary_on-brand': 'rgb(var(--color-text-primary_on-brand) / <alpha-value>)',
            secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
            secondary_hover: 'rgb(var(--color-text-secondary_hover) / <alpha-value>)',
            'secondary_on-brand': 'rgb(var(--color-text-secondary_on-brand) / <alpha-value>)',
            tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
            tertiary_hover: 'rgb(var(--color-text-tertiary_hover) / <alpha-value>)',
            'tertiary_on-brand': 'rgb(var(--color-text-tertiary_on-brand) / <alpha-value>)',
            quaternary: 'rgb(var(--color-text-quaternary) / <alpha-value>)',
            'quaternary_on-brand': 'rgb(var(--color-text-quaternary_on-brand) / <alpha-value>)',
            disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
            placeholder: 'rgb(var(--color-text-placeholder) / <alpha-value>)',
            placeholder_subtle: 'rgb(var(--color-text-placeholder_subtle) / <alpha-value>)',
            'brand-primary': 'rgb(var(--color-text-brand-primary) / <alpha-value>)',
            'brand-secondary': 'rgb(var(--color-text-brand-secondary) / <alpha-value>)',
            'brand-tertiary': 'rgb(var(--color-text-brand-tertiary) / <alpha-value>)',
            'brand-tertiary_alt': 'rgb(var(--color-text-brand-tertiary_alt) / <alpha-value>)',
            'error-primary': 'rgb(var(--color-text-error-primary) / <alpha-value>)',
            'warning-primary': 'rgb(var(--color-text-warning-primary) / <alpha-value>)',
            'success-primary': 'rgb(var(--color-text-success-primary) / <alpha-value>)',
            fg: {
                primary: 'rgb(var(--color-fg-primary) / <alpha-value>)',
                secondary: 'rgb(var(--color-fg-secondary) / <alpha-value>)',
                secondary_hover: 'rgb(var(--color-fg-secondary_hover) / <alpha-value>)',
                tertiary: 'rgb(var(--color-fg-tertiary) / <alpha-value>)',
                tertiary_hover: 'rgb(var(--color-fg-tertiary_hover) / <alpha-value>)',
                quaternary: 'rgb(var(--color-fg-quaternary) / <alpha-value>)',
                quaternary_hover: 'rgb(var(--color-fg-quaternary_hover) / <alpha-value>)',
                quinary: 'rgb(var(--color-fg-quinary) / <alpha-value>)',
                quinary_hover: 'rgb(var(--color-fg-quinary_hover) / <alpha-value>)',
                senary: 'rgb(var(--color-fg-senary) / <alpha-value>)',
                disabled: 'rgb(var(--color-fg-disabled) / <alpha-value>)',
                disabled_subtle: 'rgb(var(--color-fg-disabled_subtle) / <alpha-value>)',
                'brand-primary': 'rgb(var(--color-fg-brand-primary) / <alpha-value>)',
                'brand-primary_alt': 'rgb(var(--color-fg-brand-primary_alt) / <alpha-value>)',
                'brand-secondary': 'rgb(var(--color-fg-brand-secondary) / <alpha-value>)',
                'error-primary': 'rgb(var(--color-fg-error-primary) / <alpha-value>)',
                'error-secondary': 'rgb(var(--color-fg-error-secondary) / <alpha-value>)',
                'warning-primary': 'rgb(var(--color-fg-warning-primary) / <alpha-value>)',
                'warning-secondary': 'rgb(var(--color-fg-warning-secondary) / <alpha-value>)',
                'success-primary': 'rgb(var(--color-fg-success-primary) / <alpha-value>)',
                'success-secondary': 'rgb(var(--color-fg-success-secondary) / <alpha-value>)',
            },
        },
        backgroundColor: {
            primary: 'rgb(var(--color-bg-primary) / <alpha-value>)',
            primary_alt: 'rgb(var(--color-bg-primary_alt) / <alpha-value>)',
            primary_hover: 'rgb(var(--color-bg-primary_hover) / <alpha-value>)',
            'primary-solid': 'rgb(var(--color-bg-primary-solid) / <alpha-value>)',
            secondary: 'rgb(var(--color-bg-secondary) / <alpha-value>)',
            secondary_alt: 'rgb(var(--color-bg-secondary_alt) / <alpha-value>)',
            secondary_hover: 'rgb(var(--color-bg-secondary_hover) / <alpha-value>)',
            secondary_subtle: 'rgb(var(--color-bg-secondary_subtle) / <alpha-value>)',
            'secondary-solid': 'rgb(var(--color-bg-secondary-solid) / <alpha-value>)',
            tertiary: 'rgb(var(--color-bg-tertiary) / <alpha-value>)',
            quaternary: 'rgb(var(--color-bg-quaternary) / <alpha-value>)',
            active: 'rgb(var(--color-bg-active) / <alpha-value>)',
            disabled: 'rgb(var(--color-bg-disabled) / <alpha-value>)',
            disabled_subtle: 'rgb(var(--color-bg-disabled_subtle) / <alpha-value>)',
            overlay: 'rgb(var(--color-bg-overlay) / <alpha-value>)',
            'brand-primary': 'rgb(var(--color-bg-brand-primary) / <alpha-value>)',
            'brand-primary_alt': 'rgb(var(--color-bg-brand-primary_alt) / <alpha-value>)',
            'brand-secondary': 'rgb(var(--color-bg-brand-secondary) / <alpha-value>)',
            'brand-solid': 'rgb(var(--color-bg-brand-solid) / <alpha-value>)',
            'brand-solid_hover': 'rgb(var(--color-bg-brand-solid_hover) / <alpha-value>)',
            'brand-section': 'rgb(var(--color-bg-brand-section) / <alpha-value>)',
            'brand-section_subtle': 'rgb(var(--color-bg-brand-section_hover) / <alpha-value>)',
            'error-primary': 'rgb(var(--color-bg-error-primary) / <alpha-value>)',
            'error-secondary': 'rgb(var(--color-bg-error-secondary) / <alpha-value>)',
            'error-solid': 'rgb(var(--color-bg-error-solid) / <alpha-value>)',
            'warning-primary': 'rgb(var(--color-bg-warning-primary) / <alpha-value>)',
            'warning-secondary': 'rgb(var(--color-bg-warning-secondary) / <alpha-value>)',
            'warning-solid': 'rgb(var(--color-bg-warning-solid) / <alpha-value>)',
            'success-primary': 'rgb(var(--color-bg-success-primary) / <alpha-value>)',
            'success-secondary': 'rgb(var(--color-bg-success-secondary) / <alpha-value>)',
            'success-solid': 'rgb(var(--color-bg-success-solid) / <alpha-value>)',
        },
        borderRadius: {
            none: 'var(--border-radius-none)',
            xxs: 'var(--border-radius-xxs)',
            xs: 'var(--border-radius-xs)',
            sm: 'var(--border-radius-sm)',
            md: 'var(--border-radius-md)',
            lg: 'var(--border-radius-lg)',
            xl: 'var(--border-radius-xl)',
            '2xl': 'var(--border-radius-2xl)',
            '3xl': 'var(--border-radius-3xl)',
            '4xl': 'var(--border-radius-4xl)',
            full: 'var(--border-radius-full)',
        },
        borderColor: {
            primary: 'rgb(var(--color-border-primary) / <alpha-value>)',
            secondary: 'rgb(var(--color-border-secondary) / <alpha-value>)',
            tertiary: 'rgb(var(--color-border-tertiary) / <alpha-value>)',
            disabled: 'rgb(var(--color-border-disabled) / <alpha-value>)',
            disabled_subtle: 'rgb(var(--color-border-disabled_subtle) / <alpha-value>)',
            brand: 'rgb(var(--color-border-brand) / <alpha-value>)',
            'brand-solid': 'rgb(var(--color-border-brand-solid) / <alpha-value>)',
            'brand-solid_alt': 'rgb(var(--color-border-brand-solid_alt) / <alpha-value>)',
            error: 'rgb(var(--color-border-error) / <alpha-value>)',
            'error-solid': 'rgb(var(--color-border-error-solid) / <alpha-value>)',
        },
        fontSize: {
            xs: [
                '0.75rem',
                {
                    lineHeight: '1.125rem',
                },
            ],
            sm: [
                '0.875rem',
                {
                    lineHeight: '1.25rem',
                },
            ],
            md: [
                '1rem',
                {
                    lineHeight: '1.5rem',
                },
            ],
            lg: [
                '1.125rem',
                {
                    lineHeight: '1.75rem',
                },
            ],
            xl: [
                '1.25rem',
                {
                    lineHeight: '1.875rem',
                },
            ],
            'display-xs': [
                '1.5rem',
                {
                    lineHeight: '2rem',
                },
            ],
            'display-sm': [
                '1.875rem',
                {
                    lineHeight: '2.375rem',
                },
            ],
            'display-md': [
                '2.25rem',
                {
                    lineHeight: '2.275rem',
                    letterSpacing: '-0.02em',
                },
            ],
            'display-lg': [
                '3rem',
                {
                    lineHeight: '3.75rem',
                    letterSpacing: '-0.02em',
                },
            ],
            'display-xl': [
                '3.75rem',
                {
                    lineHeight: '4.5rem',
                    letterSpacing: '-0.02em',
                },
            ],
            'display-2xl': [
                '4.5rem',
                {
                    lineHeight: '5.625rem',
                    letterSpacing: '-0.02em',
                },
            ],
        },
        fontWeight: {
            regular: '400',
            medium: '500',
            semibold: '600',
            bold: '700',
        },
        extend: {
            maxWidth: {
                paragraph: '45rem',
            },
        },
    },
    plugins: [],
};
export default config;

tailwind2.config.ts

import type { Config } from 'tailwindcss';

function generateColors(opts: { names: string[]; postfix?: (string | number)[]; cssVarPrefix?: string }): {
    [key: string]: string;
} {
    const results: { [key: string]: string } = {};

    for (const name of opts.names) {
        const postfixes = opts.postfix || [];
        for (const postfix of postfixes) {
            const colorName = `${opts.cssVarPrefix ? '-' + opts.cssVarPrefix : ''}${name}-${postfix}`;
            results[colorName] = `rgb(var(--color-${colorName}) / <alpha-value>)`;
        }
    }

    return results;
}

export default {
    content: ['./layouts/**.tsx', './pages/**.tsx', './components/**.tsx', './examples/**.tsx'],
    theme: {
        colors: {
            ...generateColors({
                names: [
                    'utility-gray',
                    'utility-error',
                    'utility-warning',
                    'utility-success',
                    'utility-blue',
                    'utility-blue-light',
                    'utility-blue-dark',
                    'utility-blue-light',
                    'utility-fuchsia',
                    'utility-gray-blue',
                    'utility-indigo',
                    'utility-orange',
                    'utility-orange-dark',
                    'utility-pink',
                    'utility-purple',
                ],
                postfix: [50, 100, 200, 300, 400, 500, 600, 700],
            }),
            ...generateColors({
                names: ['white', 'black', 'alpha-white', 'alpha-black'],
            }),
            ...generateColors({
                names: ['utility-brand'],
                postfix: [
                    50,
                    '50_alt',
                    100,
                    '100_alt',
                    200,
                    '200_alt',
                    300,
                    '300_alt',
                    400,
                    '400_alt',
                    500,
                    '500_alt',
                    600,
                    '600_alt',
                    700,
                    '700_alt',
                    800,
                    '800_alt',
                    900,
                    '900_alt',
                ],
            }),
        },
        ringColor: {
            DEFAULT: 'rgb(var(--color-ring-brand) / 0.24)',
            brand: 'rgb(var(--color-ring-brand) / 0.24)',
            gray: 'rgb(var(--color-ring-gray) / 0.14)',
            'gray-secondary': 'rgb(var(--color-ring-gray-secondary) / 0.20)',
            error: 'rgb(var(--color-ring-error) / 0.24)',
        },
        textColor: {
            ...generateColors({
                names: [
                    'primary',
                    'primary_on-brand',
                    'secondary',
                    'secondary_hover',
                    'secondary_on-brand',
                    'tertiary',
                    'tertiary_hover',
                    'tertiary_on-brand',
                    'quaternary',
                    'quaternary_on-brand',
                    'disabled',
                    'placeholder',
                    'placeholder_subtle',
                    'brand-primary',
                    'brand-secondary',
                    'brand-tertiary',
                    'brand-tertiary_alt',
                    'error-primary',
                    'warning-primary',
                    'success-primary',
                ],
                cssVarPrefix: 'text',
            }),
            ...generateColors({
                names: [
                    'fg-primary',
                    'fg-secondary',
                    'fg-secondary_hover',
                    'fg-tertiary',
                    'fg-tertiary_hover',
                    'fg-quaternary',
                    'fg-quaternary_hover',
                    'fg-quinary',
                    'fg-quinary_hover',
                    'fg-senary',
                    'fg-disabled',
                    'fg-disabled_subtle',
                    'fg-brand-primary',
                    'fg-brand-primary_alt',
                    'fg-brand-secondary',
                    'fg-error-primary',
                    'fg-error-secondary',
                    'fg-warning-primary',
                    'fg-warning-secondary',
                    'fg-success-primary',
                    'fg-success-secondary',
                ],
            }),
        },
        backgroundColor: {
            ...generateColors({
                names: [
                    'primary',
                    'primary_alt',
                    'primary_hover',
                    'primary-solid',
                    'secondary',
                    'secondary_alt',
                    'secondary_hover',
                    'secondary_subtle',
                    'secondary-solid',
                    'tertiary',
                    'quaternary',
                    'active',
                    'disabled',
                    'disabled_subtle',
                    'overlay',
                    'brand-primary',
                    'brand-primary_alt',
                    'brand-secondary',
                    'brand-solid',
                    'brand-solid_hover',
                    'brand-section',
                    'brand-section_subtle',
                    'error-primary',
                    'error-secondary',
                    'error-solid',
                    'warning-primary',
                    'warning-secondary',
                    'warning-solid',
                    'success-primary',
                    'success-secondary',
                    'success-solid',
                ],
                cssVarPrefix: 'bg',
            }),
        },
        borderColor: {
            ...generateColors({
                names: [
                    'primary',
                    'secondary',
                    'tertiary',
                    'disabled',
                    'disabled_subtle',
                    'brand',
                    'brand-solid',
                    'brand-solid_alt',
                    'error',
                    'error-solid',
                ],
                cssVarPrefix: 'border',
            }),
        },
        extend: {
            maxWidth: {
                paragraph: '45rem',
            },
        },
    },
    plugins: [],
} satisfies Config;