Skip to content

Commit

Permalink
Working with Sass 1.79.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Oct 9, 2024
1 parent fee9dc2 commit 7e70ff7
Show file tree
Hide file tree
Showing 4 changed files with 328 additions and 10 deletions.
38 changes: 33 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
"rollup": "^4.23.0",
"rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.3.0",
"sass": "1.78.0",
"sass": "1.79.4",
"sass-true": "^8.0.0",
"shelljs": "^0.8.5",
"stylelint": "^16.9.0",
Expand Down
294 changes: 292 additions & 2 deletions scss/_functions.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,296 @@
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
$named-colors: (
"aliceblue": #f0f8ff,
"antiquewhite": #faebd7,
"aqua": #00ffff,
"aquamarine": #7fffd4,
"azure": #f0ffff,
"beige": #f5f5dc,
"bisque": #ffe4c4,
"black": #000000,
"blanchedalmond": #ffebcd,
"blue": #0000ff,
"blueviolet": #8a2be2,
"brown": #a52a2a,
"burlywood": #deb887,
"cadetblue": #5f9ea0,
"chartreuse": #7fff00,
"chocolate": #d2691e,
"coral": #ff7f50,
"cornflowerblue": #6495ed,
"cornsilk": #fff8dc,
"crimson": #dc143c,
"cyan": #00ffff,
"darkblue": #00008b,
"darkcyan": #008b8b,
"darkgoldenrod": #b8860b,
"darkgray": #a9a9a9,
"darkgreen": #006400,
"darkgrey": #a9a9a9,
"darkkhaki": #bdb76b,
"darkmagenta": #8b008b,
"darkolivegreen": #556b2f,
"darkorange": #ff8c00,
"darkorchid": #9932cc,
"darkred": #8b0000,
"darksalmon": #e9967a,
"darkseagreen": #8fbc8f,
"darkslateblue": #483d8b,
"darkslategray": #2f4f4f,
"darkturquoise": #00ced1,
"darkviolet": #9400d3,
"deeppink": #ff1493,
"deepskyblue": #00bfff,
"dimgray": #696969,
"dodgerblue": #1e90ff,
"firebrick": #b22222,
"floralwhite": #fffaf0,
"forestgreen": #228b22,
"fuchsia": #ff00ff,
"gainsboro": #dcdcdc,
"ghostwhite": #f8f8ff,
"gold": #ffd700,
"goldenrod": #daa520,
"gray": #808080,
"green": #008000,
"greenyellow": #adff2f,
"grey": #808080,
"honeydew": #f0fff0,
"hotpink": #ff69b4,
"indianred": #cd5c5c,
"indigo": #4b0082,
"ivory": #fffff0,
"khaki": #f0e68c,
"lavender": #e6e6fa,
"lavenderblush": #fff0f5,
"lawngreen": #7cfc00,
"lemonchiffon": #fffacd,
"lightblue": #add8e6,
"lightcoral": #f08080,
"lightcyan": #e0ffff,
"lightgoldenrodyellow": #fafad2,
"lightgray": #d3d3d3,
"lightgreen": #90ee90,
"lightgrey": #d3d3d3,
"lightpink": #ffb6c1,
"lightsalmon": #ffa07a,
"lightseagreen": #20b2aa,
"lightskyblue": #87cefa,
"lightslategray": #778899,
"lightsteelblue": #b0c4de,
"lightyellow": #ffffe0,
"lime": #00ff00,
"limegreen": #32cd32,
"linen": #faf0e6,
"magenta": #ff00ff,
"maroon": #800000,
"mediumaquamarine": #66cdaa,
"mediumblue": #0000cd,
"mediumorchid": #ba55d3,
"mediumpurple": #9370db,
"mediumseagreen": #3cb371,
"mediumslateblue": #7b68ee,
"mediumspringgreen": #00fa9a,
"mediumturquoise": #48d1cc,
"mediumvioletred": #c71585,
"midnightblue": #191970,
"mintcream": #f5fffa,
"mistyrose": #ffe4e1,
"moccasin": #ffe4b5,
"navajowhite": #ffdead,
"navy": #000080,
"oldlace": #fdf5e6,
"olive": #808000,
"olivedrab": #6b8e23,
"orange": #ffa500,
"orangered": #ff4500,
"orchid": #da70d6,
"palegoldenrod": #eee8aa,
"palegreen": #98fb98,
"paleturquoise": #afeeee,
"palevioletred": #db7093,
"papayawhip": #ffefd5,
"peachpuff": #ffdab9,
"peru": #cd853f,
"pink": #ffc0cb,
"plum": #dda0dd,
"powderblue": #b0e0e6,
"purple": #800080,
"red": #ff0000,
"rosybrown": #bc8f8f,
"royalblue": #4169e1,
"saddlebrown": #8b4513,
"salmon": #fa8072,
"sandybrown": #f4a460,
"seagreen": #2e8b57,
"seashell": #fff5ee,
"sienna": #a0522d,
"silver": #c0c0c0,
"skyblue": #87ceeb,
"slateblue": #6a5acd,
"slategray": #708090,
"snow": #fffafa,
"springgreen": #00ff7f,
"steelblue": #4682b4,
"tan": #d2b48c,
"teal": #008080,
"thistle": #d8bfd8,
"tomato": #ff6347,
"turquoise": #40e0d0,
"violet": #ee82ee,
"wheat": #f5deb3,
"white": #ffffff,
"whitesmoke": #f5f5f5,
"yellow": #ffff00,
"yellowgreen": #9acd32
) !default;

@function to-number($value, $base: 10) {
@if type-of($value) == "number" {
@return $value;
} @else if type-of($value) != "string" {
@error "Value for `to-number` should be a number or a string.";
}

$result: 0;
$digits: 0;
$minus: str-slice($value, 1, 1) == "-";
$numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "a": 10, "b": 11, "c": 12, "d": 13, "e": 14, "f": 15);

@for $i from if($minus, 2, 1) through str-length($value) {
$character: str-slice($value, $i, $i);

@if (index(map-keys($numbers), $character) or $character == ".") {
@if $character == "." {
$digits: 1;
} @else if $digits == 0 {
$result: $result * $base + map-get($numbers, $character);
} @else {
$digits: $digits * $base;
$result: $result + divide(map-get($numbers, $character), $digits);
}
}
}

@return if($minus, -$result, $result);
}

@function red($value) {
$str-value: "#{$value}";
@if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
$value-number: to-number(str-slice($str-value, 2, 2), 16);
// @debug $value "red-hex:" $value-number * 16 + $value-number;
@return $value-number * 16 + $value-number;
}
@if str-slice($str-value, 1, 1) == "#" {
$return-value: to-number(str-slice($str-value, 2, 3), 16);
// @debug $value "red-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
@return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
}
@if str-slice($str-value, 1, 4) == "rgba" {
$rgba-values: str-slice($str-value, str-index($str-value, "("));
$red-value: to-number(str-slice($rgba-values, 2, str-index($rgba-values, ",") - 1));
@while str-index($rgba-values, ",") != null {
$rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
}
$alpha-value: to-number(str-slice($rgba-values, 1, -2));
$return-value: round($red-value * $alpha-value);
// @debug $value "red-rgba:" $return-value;
@return $return-value;
}
@if str-slice($str-value, 1, 3) == "rgb" {
$rgb-values: str-slice($str-value, str-index($str-value, "("));
$return-value: round(to-number(str-slice($rgb-values, 2, str-index($rgb-values, ",") - 1)));
// @debug $value "red-rgb:" $return-value;
@return $return-value;
}
@if map-has-key($named-colors, $str-value) {
@return red(map-get($named-colors, $str-value));
}
@error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
}

@function green($value) {
$str-value: "#{$value}";
@if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
$value-number: to-number(str-slice($str-value, 3, 3), 16);
// @debug $value "green-hex:" $value-number * 16 + $value-number;
@return $value-number * 16 + $value-number;
}
@if str-slice($str-value, 1, 1) == "#" {
$return-value: to-number(str-slice($str-value, 4, 5), 16);
// @debug $value "green-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
@return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
}
@if str-slice($str-value, 1, 4) == "rgba" {
$rgba-values: str-slice($str-value, str-index($str-value, "("));
$gba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
$green-value: to-number(str-slice($gba-values, 1, str-index($gba-values, ",") - 1));
@while str-index($rgba-values, ",") != null {
$rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
}
$alpha-value: to-number(str-slice($rgba-values, 1, -2));
$return-value: round($green-value * $alpha-value);
// @debug $value "green-rgba:" $return-value;
@return $return-value;
}
@if str-slice($str-value, 1, 3) == "rgb" {
$rgb-values: str-slice($str-value, str-index($str-value, "("));
$gb-values: str-slice($rgb-values, str-index($rgb-values, ",") + 1);
$return-value: round(to-number(str-slice($gb-values, 1, str-index($gb-values, ",") - 1)));
// @debug $value "green-rgb:" $return-value;
@return $return-value;
}
@if map-has-key($named-colors, $str-value) {
@return green(map-get($named-colors, $str-value));
}
@error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
}

@function blue($value) {
$str-value: "#{$value}";
@if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
$value-number: to-number(str-slice($str-value, 4, 4), 16);
// @debug $value "blue-hex:" $value-number * 16 + $value-number;
@return $value-number * 16 + $value-number;
}
@if str-slice($str-value, 1, 1) == "#" {
$return-value: to-number(str-slice($str-value, 6, 7), 16);
// @debug $value "blue-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
@return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
}
@if str-slice($str-value, 1, 4) == "rgba" {
$rgba-values: str-slice($str-value, str-index($str-value, "("));
$gba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
$ba-values: str-slice($gba-values, str-index($gba-values, ",") + 1);
$blue-value: to-number(str-slice($ba-values, 1, str-index($ba-values, ",")));
@while str-index($rgba-values, ",") != null {
$rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
}
$alpha-value: to-number(str-slice($rgba-values, 1, -2));
$return-value: round($blue-value * $alpha-value);
// @debug $value "blue-rgba:" $return-value;
@return $return-value;
}
@if str-slice($str-value, 1, 3) == "rgb" {
$rgb-values: str-slice($str-value, str-index($str-value, "("));
$gb-values: str-slice($rgb-values, str-index($rgb-values, ",") + 1);
$b-values: str-slice($gb-values, str-index($gb-values, ",") + 1);
$return-value: round(to-number(str-slice($b-values, 2, str-index($b-values, ")") - 1)));
// @debug $value "blue-rgb:" $return-value;
@return to-number($return-value);
}
@if map-has-key($named-colors, $str-value) {
@return blue(map-get($named-colors, $str-value));
}
@error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
}

.test {
color: to-rgb(rgba(#ffffff, .5));
}

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
Expand Down Expand Up @@ -204,12 +494,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
@return mix($white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
@return mix($black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
Expand Down
4 changes: 2 additions & 2 deletions scss/tests/mixins/_color-modes.test.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] {
--custom-color: #3a3ff8;
--custom-color: rgb(57.5, 63, 247.5);
}
}
}
Expand Down Expand Up @@ -58,7 +58,7 @@
}
@media (prefers-color-scheme: dark) {
:root {
--custom-color: #3a3ff8;
--custom-color: rgb(57.5, 63, 247.5);
}
}
}
Expand Down

0 comments on commit 7e70ff7

Please sign in to comment.