Skip to content

Commit 66ac937

Browse files
ahmadfajarahmadfajar
committed
- Decrease color.adjust() and color.scale() precision to reduce css filesize.
- Bump to version 2.0.13
1 parent c6a444b commit 66ac937

File tree

18 files changed

+129
-120
lines changed

18 files changed

+129
-120
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
## v2.0.13
77

8-
Released: September XX, 2024
8+
Released: September 27, 2024
99

1010
### Features & Improvements
1111

‎scss/_colors.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:color";
2+
@use "functions" as Func;
23

34
// Gray Colors
45
$gray-100: #f8f9fa;
@@ -646,9 +647,9 @@ $special-color: #37474f !default;
646647
$special-color-dark: #263238 !default;
647648
$blue-green-color: #064e40 !default;
648649
$blue-green-color-dark: #022f27 !default;
649-
$mdb-default-color: #5f4a97 !default; // #5f4a97 #6750a4 #6200ee
650-
$mdb-default-color-dark: #44307a !default; // #44307a #4600ab
651-
$mdb-default-color-light: #b99ce1 !default; // #d0bcff
650+
$mdb-default-color: #5f4a97 !default;
651+
$mdb-default-color-dark: #44307a !default;
652+
$mdb-default-color-light: #b99ce1 !default;
652653
$mdb-unique-color: #880e4f !default;
653654
$mdb-light-color: #f8f9fa !default;
654655
$white: $white-base;
@@ -707,7 +708,7 @@ $theme-colors: (
707708
"brown": $brown-base,
708709
"cyan": $cyan-base,
709710
"dark-blue": $blue-darken-4,
710-
"dark-green": color.adjust($green-darken-4, $lightness: 2%),
711+
"dark-green": Func.round-color-rgb(color.adjust($green-darken-4, $lightness: 2%)),
711712
"deep-orange": $deep-orange-base,
712713
"deep-purple": $deep-purple-base,
713714
"green": $green-base,

‎scss/_functions.scss‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,36 @@
1111
@return color.mix($color-base, $color, $level * $theme-color-interval);
1212
}
1313

14+
@function brightness($color) {
15+
$red: color.channel($color, "red") * 299;
16+
$green: color.channel($color, "green") * 587;
17+
$blue: color.channel($color, "blue") * 114;
18+
19+
@return math.div(($red + $green + $blue), 1000);
20+
}
21+
22+
@function round($value, $fractionDigits: 0) {
23+
$power: math.pow(10, $fractionDigits);
24+
@return math.div(math.round($power * $value), $power);
25+
}
26+
27+
@function round-color-rgb($color, $precision: 2) {
28+
$red: round(color.channel($color, "red"), $precision);
29+
$green: round(color.channel($color, "green"), $precision);
30+
$blue: round(color.channel($color, "blue"), $precision);
31+
32+
@return rgb($red, $green, $blue);
33+
}
34+
35+
@function round-color-rgba($color, $precision: 2) {
36+
$red: round(color.channel($color, "red"), $precision);
37+
$green: round(color.channel($color, "green"), $precision);
38+
$blue: round(color.channel($color, "blue"), $precision);
39+
$alpha: round(color.channel($color, "alpha"), $precision);
40+
41+
@return rgba($red, $green, $blue, $alpha);
42+
}
43+
1444
@function set-color-contrast($bgColor, $textOnLightBg, $textOnDarkBg, $brightnessLevel: 165) {
1545
@if (brightness($bgColor) > $brightnessLevel) {
1646
@return $textOnLightBg;
@@ -28,27 +58,20 @@
2858
}
2959
} @else if (brightness($color) > $brightnessLevel) {
3060
@if ($transparency > 0) {
31-
@return rgba(color.adjust($color, $lightness: -35%), $transparency + 0.1);
61+
@return rgba(round-color-rgb(color.adjust($color, $lightness: -35%)), $transparency + 0.1);
3262
} @else {
33-
@return rgba(color.adjust($color, $lightness: -25%), .2);
63+
@return rgba(round-color-rgb(color.adjust($color, $lightness: -25%)), .2);
3464
}
3565
} @else {
3666
@if ($transparency > 0) {
37-
@return rgba(color.adjust($color, $lightness: 30%), $transparency + 0.1);
67+
@return rgba(round-color-rgb(color.adjust($color, $lightness: 30%)), $transparency + 0.1);
3868
} @else {
39-
@return rgba(color.adjust($color, $lightness: 25%), .2);
69+
@return rgba(round-color-rgb(color.adjust($color, $lightness: 25%)), .2);
4070
}
4171
}
4272
}
4373

44-
@function brightness($color) {
45-
$red: color.channel($color, "red") * 299;
46-
$green: color.channel($color, "green") * 587;
47-
$blue: color.channel($color, "blue") * 114;
48-
49-
@return math.div(($red + $green + $blue), 1000);
50-
}
51-
5274
@function to-rgb($color) {
53-
@return color.channel($color, "red"), color.channel($color, "green"), color.channel($color, "blue");
75+
$roundColor: round-color-rgb($color);
76+
@return color.channel($roundColor, "red"), color.channel($roundColor, "green"), color.channel($roundColor, "blue");
5477
}

‎scss/_mixins.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@import "./mixins/button";
33
@import "./mixins/checkbox";
44
@import "./mixins/chip";
5-
@import "./mixins/grid";
65
@import "./mixins/listview";
76
@import "./mixins/placeholder";
87
@import "./mixins/progressbar";

‎scss/_shared.scss‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎scss/mixins/_alert.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:color";
2+
@use "../functions" as Func;
23

34
/* BsAlert variants mixins -- sass variables */
45

@@ -8,7 +9,7 @@
89
--#{$bs-prefix}alert-border-color: #{$border};
910
--#{$bs-prefix}alert-color: #{$color};
1011

11-
$hr-border-color: color.adjust($border, $lightness: -10%);
12+
$hr-border-color: Func.round-color-rgb(color.adjust($border, $lightness: -10%));
1213
--#{$bs-prefix}alert-hr-color: #{$hr-border-color};
1314

1415
$link-color: mix(black, $color, 20%);
@@ -18,10 +19,10 @@
1819

1920
@mixin make-outline-alert-variant($name, $color) {
2021
.#{$prefix}alert-outline-#{$name} {
21-
$border-color: color.adjust($color, $lightness: 15%);
22-
$hr-border-color: color.adjust($color, $lightness: -5%);
23-
$link-color: color.adjust($color, $lightness: -10%);
24-
$text-color: color.adjust($color, $lightness: -5%);
22+
$border-color: Func.round-color-rgb(color.adjust($color, $lightness: 15%));
23+
$hr-border-color: Func.round-color-rgb(color.adjust($color, $lightness: -5%));
24+
$link-color: Func.round-color-rgb(color.adjust($color, $lightness: -10%));
25+
$text-color: Func.round-color-rgb(color.adjust($color, $lightness: -5%));
2526

2627
--#{$bs-prefix}alert-color: #{$text-color};
2728
--#{$bs-prefix}alert-border-color: #{$border-color};
@@ -38,6 +39,6 @@
3839
--#{$bs-prefix}alert-bg: #{$color};
3940
--#{$bs-prefix}alert-color: #{$text-color};
4041
--#{$bs-prefix}alert-link-color: #{$text-color};
41-
--#{$bs-prefix}alert-hr-color: #{$hr-border-color};
42+
--#{$bs-prefix}alert-hr-color: #{Func.round-color-rgb($hr-border-color)};
4243
}
4344
}

‎scss/mixins/_button.scss‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
.btn-#{$name} {
77
$active-box-shadow-color-rgb: to-rgb(color.scale($color, $lightness: 5%));
88
$text-color: set-color-contrast($color, $black, $white);
9-
$hover-color: color.scale($color, $lightness: -15%);
10-
$active-color: color.scale($color, $lightness: -35%);
9+
$hover-color: round-color-rgb(color.scale($color, $lightness: -15%));
10+
$active-color: round-color-rgb(color.scale($color, $lightness: -35%));
1111

1212
--#{$bs-prefix}btn-bg: #{$color};
1313
--#{$bs-prefix}btn-color: #{$text-color};
@@ -40,12 +40,12 @@
4040
--#{$bs-prefix}btn-hover-color: #{$hover-color};
4141
--#{$bs-prefix}btn-hover-border-color: #{$hover-bg};
4242
} @else {
43-
$text-color: color.scale($color, $lightness: -10%);
44-
$bg-color: color.scale($color, $lightness: 80%);
45-
$hover-bg: color.scale($color, $lightness: 70%);
46-
$hover-color: color.scale($color, $lightness: -30%);
47-
$active-bg: color.scale($color, $lightness: 60%);
48-
$active-color: color.scale($color, $lightness: -50%);
43+
$text-color: round-color-rgb(color.scale($color, $lightness: -10%));
44+
$bg-color: round-color-rgb(color.scale($color, $lightness: 80%));
45+
$hover-bg: round-color-rgb(color.scale($color, $lightness: 70%));
46+
$hover-color: round-color-rgb(color.scale($color, $lightness: -30%));
47+
$active-bg: round-color-rgb(color.scale($color, $lightness: 60%));
48+
$active-color: round-color-rgb(color.scale($color, $lightness: -50%));
4949

5050
--#{$bs-prefix}btn-bg: #{$bg-color};
5151
--#{$bs-prefix}btn-color: #{$text-color};
@@ -66,13 +66,13 @@
6666
$active-box-shadow-color-rgb: to-rgb(color.adjust($color, $lightness: 5%));
6767
$border-color: color.adjust($gray-600, $lightness: 25%);
6868
--#{$bs-prefix}btn-bg: transparent;
69-
--#{$bs-prefix}btn-border-color: #{$border-color};
69+
--#{$bs-prefix}btn-border-color: #{round-color-rgb($border-color)};
7070
--#{$bs-prefix}btn-border-width: thin;
7171
--#{$bs-prefix}btn-focus-shadow-rgb: #{$active-box-shadow-color-rgb};
7272

7373
@if ($name == 'light' or $name == 'light-grey') {
74-
$active-bg-rgba: rgba($border-color, .2);
75-
$active-border-color-rgba: color.adjust($border-color, $lightness: -8%);
74+
$active-bg-rgba: rgba(round-color-rgb($border-color), .2);
75+
$active-border-color-rgba: round-color-rgb(color.adjust($border-color, $lightness: -8%));
7676
--#{$bs-prefix}btn-color: #{$gray-600};
7777
--#{$bs-prefix}btn-active-bg: #{$active-bg-rgba};
7878
--#{$bs-prefix}btn-active-color: #{$gray-800};
@@ -81,18 +81,18 @@
8181
--#{$bs-prefix}btn-hover-color: #{$gray-800};
8282
--#{$bs-prefix}btn-hover-border-color: #{$active-border-color-rgba};
8383
} @else {
84-
$active-bg-rgba: rgba(color.scale($color, $lightness: 5%), .4);
84+
$active-bg-rgba: rgba(round-color-rgb(color.scale($color, $lightness: 5%)), .4);
8585
$active-color: set-color-contrast($active-bg-rgba, color.scale($color, $lightness: -70%), $white, 100);
8686
$hover-bg-rgba: rgba(color.scale($color, $lightness: 45%), .35);
8787
$hover-color-rgba: set-color-contrast($active-bg-rgba, $white, color.scale($color, $lightness: -30%), 220);
8888
$hover-border-color: color.adjust($color, $lightness: 10%);
8989
--#{$bs-prefix}btn-color: #{$color};
9090
--#{$bs-prefix}btn-active-bg: #{$active-bg-rgba};
91-
--#{$bs-prefix}btn-active-color: #{$active-color};
91+
--#{$bs-prefix}btn-active-color: #{round-color-rgb($active-color)};
9292
--#{$bs-prefix}btn-active-border-color: #{$color};
93-
--#{$bs-prefix}btn-hover-bg: #{$hover-bg-rgba};
94-
--#{$bs-prefix}btn-hover-color: #{$hover-color-rgba};
95-
--#{$bs-prefix}btn-hover-border-color: #{$hover-border-color};
93+
--#{$bs-prefix}btn-hover-bg: #{round-color-rgba($hover-bg-rgba)};
94+
--#{$bs-prefix}btn-hover-color: #{round-color-rgba($hover-color-rgba)};
95+
--#{$bs-prefix}btn-hover-border-color: #{round-color-rgb($hover-border-color)};
9696
}
9797
}
9898
}
@@ -105,21 +105,21 @@
105105
@if ($name == 'light' or $name == 'light-grey') {
106106
$active-bg-rgba: rgba($gray-500, .2);
107107
--#{$bs-prefix}btn-active-bg: #{$active-bg-rgba};
108-
--#{$bs-prefix}btn-color: #{color.scale($color, $lightness: 10%)};
108+
--#{$bs-prefix}btn-color: #{round-color-rgb(color.scale($color, $lightness: 10%))};
109109
--#{$bs-prefix}btn-active-color: #{$white};
110110
--#{$bs-prefix}btn-hover-bg: #{$active-bg-rgba};
111111
--#{$bs-prefix}btn-hover-color: #{$white};
112112
} @else {
113-
$active-bg-color: rgba(color.scale($color, $lightness: 10%), .3);
114-
$active-color: set-color-contrast($active-bg-color, color.scale($color, $lightness: -70%), $white, 100);
113+
$active-bg-color-rgba: rgba(round-color-rgb(color.scale($color, $lightness: 10%)), .3);
114+
$active-color-rgba: set-color-contrast($active-bg-color-rgba, color.scale($color, $lightness: -70%), $white, 100);
115115
$hover-bg-rgba: set-color-contrast($color, rgba(color.scale($color, $lightness: 15%), .3), rgba(color.scale($color, $lightness: 20%), .2));
116-
$hover-color-rgba: set-color-contrast($active-bg-color, $white, color.scale($color, $lightness: -30%), 220);
116+
$hover-color-rgba: set-color-contrast($active-bg-color-rgba, $white, color.scale($color, $lightness: -30%), 220);
117117

118118
--#{$bs-prefix}btn-color: #{$color};
119-
--#{$bs-prefix}btn-active-bg: #{$active-bg-color};
120-
--#{$bs-prefix}btn-active-color: #{$active-color};
121-
--#{$bs-prefix}btn-hover-bg: #{$hover-bg-rgba};
122-
--#{$bs-prefix}btn-hover-color: #{$hover-color-rgba};
119+
--#{$bs-prefix}btn-active-bg: #{$active-bg-color-rgba};
120+
--#{$bs-prefix}btn-active-color: #{round-color-rgba($active-color-rgba)};
121+
--#{$bs-prefix}btn-hover-bg: #{round-color-rgba($hover-bg-rgba)};
122+
--#{$bs-prefix}btn-hover-color: #{round-color-rgba($hover-color-rgba)};
123123
}
124124
}
125125
}

‎scss/mixins/_chip.scss‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@
44

55
@mixin make-chip-variant($name, $color) {
66
.#{$prefix}chip-#{$name} {
7-
$chip-color: set-color-contrast($color, rgba(color.scale($color, $lightness: 20%), .55), rgba(color.scale($color, $lightness: 30%), .55));
8-
$icon-color: color.adjust($color, $lightness: -5%);
9-
$hover-bg: color.scale($chip-color, $lightness: -25%);
10-
$active-bg: color.scale($color, $lightness: 10%);
7+
$chip-color: round-color-rgba(set-color-contrast($color, rgba(color.scale($color, $lightness: 20%), .55), rgba(color.scale($color, $lightness: 30%), .55)));
8+
$icon-color: round-color-rgb(color.adjust($color, $lightness: -5%));
9+
$hover-bg: round-color-rgba(color.scale($chip-color, $lightness: -25%));
10+
$active-bg: round-color-rgb(color.scale($color, $lightness: 10%));
1111
$active-color: set-color-contrast($active-bg, $black, $white);
1212
$active-box-shadow-color-rgb: to-rgb($chip-color);
13-
$active-icon-color: set-color-contrast($active-bg, color.scale($chip-color, $lightness: -25%), $white);
13+
$active-icon-color: round-color-rgba(set-color-contrast($active-bg, color.scale($chip-color, $lightness: -25%), $white));
1414

1515
@if($name == 'light') {
16-
$light-bg-color: color.adjust($color, $lightness: -2.5%);
17-
$light-hover-bg: color.adjust($color, $lightness: -10%);
18-
$light-active-bg: color.adjust($color, $lightness: -15%);
16+
$light-bg-color: round-color-rgb(color.adjust($color, $lightness: -2.5%));
17+
$light-hover-bg: round-color-rgb(color.adjust($color, $lightness: -10%));
18+
$light-active-bg: round-color-rgb(color.adjust($color, $lightness: -15%));
1919
--#{$prefix}chip-bg: #{$light-bg-color};
2020
--#{$prefix}chip-active-bg: #{$light-active-bg};
2121
--#{$prefix}chip-hover-bg: #{$light-hover-bg};
2222
--#{$prefix}chip-border-color: #{$light-bg-color};
2323
} @else if($name == 'light-grey') {
24-
$light-bg-color: color.adjust($color, $lightness: 2.5%);
25-
$light-hover-bg: rgba(color.adjust($color, $lightness: -10%), .55);
24+
$light-bg-color: round-color-rgb(color.adjust($color, $lightness: 2.5%));
25+
$light-hover-bg: rgba(round-color-rgb(color.adjust($color, $lightness: -10%)), .55);
2626
--#{$prefix}chip-bg: #{$light-bg-color};
2727
--#{$prefix}chip-active-bg: #{$active-bg};
2828
--#{$prefix}chip-hover-bg: #{$light-hover-bg};
@@ -48,19 +48,19 @@
4848

4949
@mixin make-chip-outline-variant($name, $color) {
5050
.#{$prefix}chip-outline-#{$name} {
51-
$border-color: color.adjust($gray-600, $lightness: 25%);
52-
$hover-bg: set-color-contrast($color, rgba(color.adjust($color, $lightness: -10%), .4), rgba(color.adjust($color, $lightness: 20%), .2), 200);
53-
$hover-border: set-color-contrast($color, $border-color, color.adjust($color, $lightness: 12%));
54-
$hover-color: set-color-contrast($color, $white, color.scale($color, $lightness: -40%), 210);
55-
$active-bg: set-color-contrast($color, rgba(color.scale($color, $lightness: -10%), .4), rgba(color.scale($color, $lightness: 15%), .3), 200);
56-
$active-color: set-color-contrast($color, $white, color.scale($color, $lightness: -40%), 210);
57-
$focus-border: set-color-contrast($color, color.adjust($border-color, $lightness: -15%), $color);
51+
$border-color: round-color-rgb(color.adjust($gray-600, $lightness: 25%));
52+
$hover-bg: round-color-rgba(set-color-contrast($color, rgba(color.adjust($color, $lightness: -10%), .4), rgba(color.adjust($color, $lightness: 20%), .2), 200));
53+
$hover-border: round-color-rgb(set-color-contrast($color, $border-color, color.adjust($color, $lightness: 12%)));
54+
$hover-color: set-color-contrast($color, $white, round-color-rgb(color.scale($color, $lightness: -40%)), 210);
55+
$active-bg: round-color-rgba(set-color-contrast($color, rgba(color.scale($color, $lightness: -10%), .4), rgba(color.scale($color, $lightness: 15%), .3), 200));
56+
$active-color: set-color-contrast($color, $white, round-color-rgb(color.scale($color, $lightness: -40%)), 210);
57+
$focus-border: set-color-contrast($color, round-color-rgb(color.adjust($border-color, $lightness: -15%)), $color);
5858
$active-box-shadow-color-rgb: to-rgb(color.adjust($hover-bg, $lightness: 10%));
5959

6060
@if($name == 'grey' or $name == 'secondary') {
61-
$hover-bg-alt: rgba(color.adjust($color, $lightness: -2%), .3);
62-
$active-bg-alt: rgba(color.adjust($color, $lightness: -6%), .3);
63-
$active-border: set-color-contrast($color, $color, rgba(color.adjust($color, $lightness: 20%), .1));
61+
$hover-bg-alt: rgba(round-color-rgb(color.adjust($color, $lightness: -2%)), .3);
62+
$active-bg-alt: rgba(round-color-rgb(color.adjust($color, $lightness: -6%)), .3);
63+
$active-border: round-color-rgba(set-color-contrast($color, $color, rgba(color.adjust($color, $lightness: 20%), .1)));
6464
--#{$prefix}chip-color: #{$gray-800};
6565
--#{$prefix}chip-hover-bg: #{$hover-bg-alt};
6666
--#{$prefix}chip-hover-color: #{$gray-900};

‎scss/mixins/_grid.scss‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)