@import './script/colorPalette.scss';
$component-background: #4f5259;

$blue-base: #1890ff;
$blue-1: mix(colorpalette($blue-base, 8), $component-background, 15%);
$blue-2: mix(colorpalette($blue-base, 7), $component-background, 25%);
$blue-3: mix($blue-base, $component-background, 30%);
$blue-4: mix($blue-base, $component-background, 45%);
$blue-5: mix($blue-base, $component-background, 65%);
$blue-6: mix($blue-base, $component-background, 85%);
$blue-7: mix(colorpalette($blue-base, 5), $component-background, 90%);
$blue-8: mix(colorpalette($blue-base, 4), $component-background, 95%);
$blue-9: mix(colorpalette($blue-base, 3), $component-background, 97%);
$blue-10: mix(colorpalette($blue-base, 2), $component-background, 98%);

$purple-base: #722ed1;
$purple-1: mix(colorpalette($purple-base, 8), $component-background, 15%);
$purple-2: mix(colorpalette($purple-base, 7), $component-background, 25%);
$purple-3: mix($purple-base, $component-background, 30%);
$purple-4: mix($purple-base, $component-background, 45%);
$purple-5: mix($purple-base, $component-background, 65%);
$purple-6: mix($purple-base, $component-background, 85%);
$purple-7: mix(colorpalette($purple-base, 5), $component-background, 90%);
$purple-8: mix(colorpalette($purple-base, 4), $component-background, 95%);
$purple-9: mix(colorpalette($purple-base, 3), $component-background, 97%);
$purple-10: mix(colorpalette($purple-base, 2), $component-background, 98%);

$cyan-base: #13c2c2;
$cyan-1: mix(colorpalette($cyan-base, 8), $component-background, 15%);
$cyan-2: mix(colorpalette($cyan-base, 7), $component-background, 25%);
$cyan-3: mix($cyan-base, $component-background, 30%);
$cyan-4: mix($cyan-base, $component-background, 45%);
$cyan-5: mix($cyan-base, $component-background, 65%);
$cyan-6: mix($cyan-base, $component-background, 85%);
$cyan-7: mix(colorpalette($cyan-base, 5), $component-background, 90%);
$cyan-8: mix(colorpalette($cyan-base, 4), $component-background, 95%);
$cyan-9: mix(colorpalette($cyan-base, 3), $component-background, 97%);
$cyan-10: mix(colorpalette($cyan-base, 2), $component-background, 98%);

$green-base: #52c41a;
$green-1: mix(colorpalette($green-base, 8), $component-background, 15%);
$green-2: mix(colorpalette($green-base, 7), $component-background, 25%);
$green-3: mix($green-base, $component-background, 30%);
$green-4: mix($green-base, $component-background, 45%);
$green-5: mix($green-base, $component-background, 65%);
$green-6: mix($green-base, $component-background, 85%);
$green-7: mix(colorpalette($green-base, 5), $component-background, 90%);
$green-8: mix(colorpalette($green-base, 4), $component-background, 95%);
$green-9: mix(colorpalette($green-base, 3), $component-background, 97%);
$green-10: mix(colorpalette($green-base, 2), $component-background, 98%);

$magenta-base: #eb2f96;
$magenta-1: mix(colorpalette($magenta-base, 8), $component-background, 15%);
$magenta-2: mix(colorpalette($magenta-base, 7), $component-background, 25%);
$magenta-3: mix($magenta-base, $component-background, 30%);
$magenta-4: mix($magenta-base, $component-background, 45%);
$magenta-5: mix($magenta-base, $component-background, 65%);
$magenta-6: mix($magenta-base, $component-background, 85%);
$magenta-7: mix(colorpalette($magenta-base, 5), $component-background, 90%);
$magenta-8: mix(colorpalette($magenta-base, 4), $component-background, 95%);
$magenta-9: mix(colorpalette($magenta-base, 3), $component-background, 97%);
$magenta-10: mix(colorpalette($magenta-base, 2), $component-background, 98%);

$pink-base: #eb2f96;
$pink-1: mix(colorpalette($pink-base, 8), $component-background, 15%);
$pink-2: mix(colorpalette($pink-base, 7), $component-background, 25%);
$pink-3: mix($pink-base, $component-background, 30%);
$pink-4: mix($pink-base, $component-background, 45%);
$pink-5: mix($pink-base, $component-background, 65%);
$pink-6: mix($pink-base, $component-background, 85%);
$pink-7: mix(colorpalette($pink-base, 5), $component-background, 90%);
$pink-8: mix(colorpalette($pink-base, 4), $component-background, 95%);
$pink-9: mix(colorpalette($pink-base, 3), $component-background, 97%);
$pink-10: mix(colorpalette($pink-base, 2), $component-background, 98%);

$red-base: #f5222d;
$red-1: mix(colorpalette($red-base, 8), $component-background, 15%);
$red-2: mix(colorpalette($red-base, 7), $component-background, 25%);
$red-3: mix($red-base, $component-background, 30%);
$red-4: mix($red-base, $component-background, 45%);
$red-5: mix($red-base, $component-background, 65%);
$red-6: mix($red-base, $component-background, 85%);
$red-7: mix(colorpalette($red-base, 5), $component-background, 90%);
$red-8: mix(colorpalette($red-base, 4), $component-background, 95%);
$red-9: mix(colorpalette($red-base, 3), $component-background, 97%);
$red-10: mix(colorpalette($red-base, 2), $component-background, 98%);

$orange-base: #fa8c16;
$orange-1: mix(colorpalette($orange-base, 8), $component-background, 15%);
$orange-2: mix(colorpalette($orange-base, 7), $component-background, 25%);
$orange-3: mix($orange-base, $component-background, 30%);
$orange-4: mix($orange-base, $component-background, 45%);
$orange-5: mix($orange-base, $component-background, 65%);
$orange-6: mix($orange-base, $component-background, 85%);
$orange-7: mix(colorpalette($orange-base, 5), $component-background, 90%);
$orange-8: mix(colorpalette($orange-base, 4), $component-background, 95%);
$orange-9: mix(colorpalette($orange-base, 3), $component-background, 97%);
$orange-10: mix(colorpalette($orange-base, 2), $component-background, 98%);

$yellow-base: #fadb14;
$yellow-1: mix(colorpalette($yellow-base, 8), $component-background, 15%);
$yellow-2: mix(colorpalette($yellow-base, 7), $component-background, 25%);
$yellow-3: mix($yellow-base, $component-background, 30%);
$yellow-4: mix($yellow-base, $component-background, 45%);
$yellow-5: mix($yellow-base, $component-background, 65%);
$yellow-6: mix($yellow-base, $component-background, 85%);
$yellow-7: mix(colorpalette($yellow-base, 5), $component-background, 90%);
$yellow-8: mix(colorpalette($yellow-base, 4), $component-background, 95%);
$yellow-9: mix(colorpalette($yellow-base, 3), $component-background, 97%);
$yellow-10: mix(colorpalette($yellow-base, 2), $component-background, 98%);

$volcano-base: #fa541c;
$volcano-1: mix(colorpalette($volcano-base, 8), $component-background, 15%);
$volcano-2: mix(colorpalette($volcano-base, 7), $component-background, 25%);
$volcano-3: mix($volcano-base, $component-background, 30%);
$volcano-4: mix($volcano-base, $component-background, 45%);
$volcano-5: mix($volcano-base, $component-background, 65%);
$volcano-6: mix($volcano-base, $component-background, 85%);
$volcano-7: mix(colorpalette($volcano-base, 5), $component-background, 90%);
$volcano-8: mix(colorpalette($volcano-base, 4), $component-background, 95%);
$volcano-9: mix(colorpalette($volcano-base, 3), $component-background, 97%);
$volcano-10: mix(colorpalette($volcano-base, 2), $component-background, 98%);

$geekblue-base: #2f54eb;
$geekblue-1: mix(colorpalette($geekblue-base, 8), $component-background, 15%);
$geekblue-2: mix(colorpalette($geekblue-base, 7), $component-background, 25%);
$geekblue-3: mix($geekblue-base, $component-background, 30%);
$geekblue-4: mix($geekblue-base, $component-background, 45%);
$geekblue-5: mix($geekblue-base, $component-background, 65%);
$geekblue-6: mix($geekblue-base, $component-background, 85%);
$geekblue-7: mix(colorpalette($geekblue-base, 5), $component-background, 90%);
$geekblue-8: mix(colorpalette($geekblue-base, 4), $component-background, 95%);
$geekblue-9: mix(colorpalette($geekblue-base, 3), $component-background, 97%);
$geekblue-10: mix(colorpalette($geekblue-base, 2), $component-background, 98%);

$lime-base: #a0d911;
$lime-1: mix(colorpalette($lime-base, 8), $component-background, 15%);
$lime-2: mix(colorpalette($lime-base, 7), $component-background, 25%);
$lime-3: mix($lime-base, $component-background, 30%);
$lime-4: mix($lime-base, $component-background, 45%);
$lime-5: mix($lime-base, $component-background, 65%);
$lime-6: mix($lime-base, $component-background, 85%);
$lime-7: mix(colorpalette($lime-base, 5), $component-background, 90%);
$lime-8: mix(colorpalette($lime-base, 4), $component-background, 95%);
$lime-9: mix(colorpalette($lime-base, 3), $component-background, 97%);
$lime-10: mix(colorpalette($lime-base, 2), $component-background, 98%);

$gold-base: #faad14;
$gold-1: mix(colorpalette($gold-base, 8), $component-background, 15%);
$gold-2: mix(colorpalette($gold-base, 7), $component-background, 25%);
$gold-3: mix($gold-base, $component-background, 30%);
$gold-4: mix($gold-base, $component-background, 45%);
$gold-5: mix($gold-base, $component-background, 65%);
$gold-6: mix($gold-base, $component-background, 85%);
$gold-7: mix(colorpalette($gold-base, 5), $component-background, 90%);
$gold-8: mix(colorpalette($gold-base, 4), $component-background, 95%);
$gold-9: mix(colorpalette($gold-base, 3), $component-background, 97%);
$gold-10: mix(colorpalette($gold-base, 2), $component-background, 98%);

$royalbule-base: #4169e1;
$royalbule-1: mix(colorpalette($royalbule-base, 8), $component-background, 15%);
$royalbule-2: mix(colorpalette($royalbule-base, 7), $component-background, 25%);
$royalbule-3: mix($royalbule-base, $component-background, 30%);
$royalbule-4: mix($royalbule-base, $component-background, 45%);
$royalbule-5: mix($royalbule-base, $component-background, 65%);
$royalbule-6: mix($royalbule-base, $component-background, 85%);
$royalbule-7: mix(colorpalette($royalbule-base, 5), $component-background, 90%);
$royalbule-8: mix(colorpalette($royalbule-base, 4), $component-background, 95%);
$royalbule-9: mix(colorpalette($royalbule-base, 3), $component-background, 97%);
$royalbule-10: mix(colorpalette($royalbule-base, 2), $component-background, 98%);

$gray-1: rgba(255, 255, 255, .02);
$gray-2: rgba(255, 255, 255, .04);
$gray-3: rgba(255, 255, 255, .08);
$gray-4: rgba(255, 255, 255, .15);
$gray-5: rgba(255, 255, 255, .25);
$gray-6: rgba(255, 255, 255, .45);
$gray-7: rgba(255, 255, 255, .65);
$gray-8: rgba(255, 255, 255, .75);
$gray-9: rgba(255, 255, 255, .85);
$gray-10: rgba(255, 255, 255, 1);

$blueGray-1: rgba(255, 255, 255, .02);
$blueGray-2: rgba(255, 255, 255, .04);
$blueGray-3: rgba(255, 255, 255, .08);
$blueGray-4: rgba(255, 255, 255, .15);
$blueGray-5: rgba(255, 255, 255, .25);
$blueGray-6: rgba(255, 255, 255, .45);
$blueGray-7: rgba(255, 255, 255, .65);
$blueGray-8: rgba(255, 255, 255, .75);
$blueGray-9: rgba(255, 255, 255, .85);
$blueGray-10: rgba(255, 255, 255, 1);