@helpwave/hightide/dist/css/uncompiled/theme/colors-basic.css

helpwave's component and theming library

@import './variants.css';

/*
 * default light-theme basic colors
 */
@theme {
  /* Basic */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-25: #F8F8F8;
  --color-gray-50: #F2F2F2;
  --color-gray-75: #EEEEEE;
  --color-gray-100: #E6E6E6;
  --color-gray-150: #D8D8D8;
  --color-gray-200: #CCCCCC;
  --color-gray-300: #B3B3B3;
  --color-gray-400: #999999;
  --color-gray-500: #888888;
  --color-gray-550: #777777;
  --color-gray-600: #666666;
  --color-gray-650: #555555;
  --color-gray-700: #4D4D4D;
  --color-gray-750: #3F3F3F;
  --color-gray-800: #333333;
  --color-gray-850: #222222;
  --color-gray-900: #1A1A1A;
  --color-gray-950: #0D0D0D;

  /* Green */
  --color-green-100: #D1EFD8;
  --color-green-500: #69CB81;
  --color-green-700: #53a567;
  --color-green-900: #2C5536;

  /* Orange */
  --color-orange-100: #FBECD9;
  --color-orange-200: #F7D8B3;
  --color-orange-500: #EA9E40;

  /* Purple */
  --color-purple-50: #EFE6FD;
  --color-purple-100: #CEB0FA;
  --color-purple-200: #B892F3;
  --color-purple-300: #9B7CDD;
  --color-purple-400: #8470C5;
  --color-purple-500: #694BB4;
  --color-purple-600: #56389B;
  --color-purple-700: #462C83;
  --color-purple-800: #362165;
  --color-purple-900: #27144A;
  --color-purple-950: #1B0D33;

  /* Blue */
  --color-blue-50: #F6FAFF;
  --color-blue-100: #D6E3F9;
  --color-blue-200: #99B9EF;
  --color-blue-500: #3272DF;
  --color-blue-600: #285BB2;
  --color-blue-800: #1A4080;
  --color-blue-900: #11243E;

  /* Red */
  --color-red-50: #FFF9F9;
  --color-red-100: #FBE0E2;
  --color-red-200: #F7C2C5;
  --color-red-300: #F4A3A7;
  --color-red-400: #E3798A;
  --color-red-500: #DC576D;
  --color-red-600: #D53550;
  --color-red-700: #BB273F;
  --color-red-900: #5C252E;
}

/* non light-theme overrides */
@layer base {
  /* dark theme */
  @variant dark {

  }
}