Skip to content

Instantly share code, notes, and snippets.

@Christopher2K
Last active October 6, 2022 03:32
Show Gist options
  • Save Christopher2K/8f74a3de4fd64f2b0a09a2c2f6848c4c to your computer and use it in GitHub Desktop.
Save Christopher2K/8f74a3de4fd64f2b0a09a2c2f6848c4c to your computer and use it in GitHub Desktop.
Tailwind sucks so I made a worse kit
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "theme";
@function generate_color_shades($base_color, $color_name) {
$colors: ();
$base_lightness: math.ceil(color.lightness($base_color));
// Generate light colors
@for $i from 0 to $lighter_shades_generated {
$shade_nb: $base_color_label - ($shade_nb_interval * ($lighter_shades_generated - $i));
$new_lightness: math.min(100%, $base_lightness + ($lighter_magic_number * ($lighter_shades_generated - $i)));
$new_color: color.change($base_color, $lightness: $new_lightness);
$colors: map.set($colors, #{$color_name}-#{$shade_nb}, $new_color);
}
$colors: map.set($colors, #{$color_name}-#{$base_color_label}, $base_color);
// Generate dark colors
@for $i from 0 to $darker_shades_generated {
$shade_nb: $base-color-label + ($shade_nb_interval * ($i + 1));
$new_lightness: math.max(0%, $base_lightness - ($darker_magic_number * ($i + 1)));
$new_color: color.change($base_color, $lightness: $new_lightness);
$colors: map.set($colors, #{$color_name}-#{u$shade_nb}, $new_color);
}
@return $colors;
}
$color_properties: (
"background-color": "bg",
"color": "color",
"border": "border",
);
$colors_map: (
"blue": #3d578f
);
@each $color_name, $color in $colors_map {
$shades_map: generate_color_shades($color, $color_name);
@each $shade_name, $shade in $shades_map {
@each $property, $short in $color_properties {
.#{$short}#{$shade_name} {
#{$property}: $shade;
}
}
}
}
@use "sass:string";
@use "theme";
$spacing_properties: padding, margin;
$side_properties: "", top, left, bottom, right;
$axis_properties: x, y;
@each $property in $spacing_properties {
$prop_short: string.slice($property, 1, 1);
@each $side in $side_properties {
$side_short: string.slice($side, 1, 1);
@for $i from 1 through $iteration {
$value: #{$i * $root_space_size};
$prop: $property;
@if $side != "" {
$prop: #{$property}-#{$side};
}
.#{$prop_short}#{$side_short}#{$i} {
#{$prop}: $value;
}
}
}
@each $axis in $axis_properties {
@for $i from 1 through $iteration {
$value: #{$i * $root_space_size};
.#{$prop_short}#{$axis}#{$i} {
@if $axis == x {
#{$property}-left: $value;
#{$property}-right: $value;
}
@if $axis == y {
#{$property}-top: $value;
#{$property}-bottom: $value;
}
}
}
}
}
$root_font_size: 16px;
// USED FOR SPACINGS
$spacing_ratio: 0.5;
$root_space_size: $root_font_size * $spacing_ratio;
$iteration: 10;
// USED FOR COLORS
$darker_shades_generated: 4;
$darker_magic_number: 11;
$lighter_shades_generated: 5;
$lighter_magic_number: 8%;
$start_shade_nb: 100;
$shade_nb_interval: 100;
$shades_per_color: 1 + $darker_shades_generated + $lighter_shades_generated;
$last_shade_nb: $start_shade_nb + (($shades_per_color - 1) * $shade_nb_interval);
$base_color_label: $start_shade_nb + ($shade_nb_interval * $lighter_shades_generated);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment