Skip to content

Commit

Permalink
refactor(*): style and chart themes optimization changes (#358)
Browse files Browse the repository at this point in the history 
* style(*): replace CSS style comments with Sass style comments

This reduces the amount of produced CSS by quite a few lines.

* refactor(chart-themes): replace repeating brushes styles with a CSS variable

This reduces the amount of generated CSS by quite a few lines.

* style(*): replace percentage values with floating point numbers
  • Loading branch information
@simeonoff
simeonoff authored Nov 22, 2024
1 parent 3e2b0ae commit 270f8fa
Show file tree
Hide file tree
Showing 61 changed files with 229 additions and 219 deletions.
2 changes: 1 addition & 1 deletion sass/animations/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* stylelint-disable keyframes-name-pattern */
// stylelint-disable keyframes-name-pattern
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
Expand Down
74 changes: 37 additions & 37 deletions sass/animations/entrances/_flicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@

20.1% {
opacity: 1;
box-shadow: 0 0 30px rgb(255 255 255 / 25%);
box-shadow: 0 0 30px rgb(255 255 255 / 0.25);
}

20.6% {
Expand All @@ -181,15 +181,15 @@
30.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

30.5% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

30.6% {
Expand All @@ -205,22 +205,22 @@
45.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

50% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

55% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

55.1% {
Expand All @@ -236,15 +236,15 @@
57.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 30%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.3);
}

60% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 30%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.3);
}

60.1% {
Expand All @@ -260,17 +260,17 @@
65.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 30%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.3),
0 0 100px rgb(255 255 255 / 0.1);
}

75% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 30%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.3),
0 0 100px rgb(255 255 255 / 0.1);
}

75.1% {
Expand All @@ -286,19 +286,19 @@
77.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 40%),
0 0 110px rgb(255 255 255 / 20%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.4),
0 0 110px rgb(255 255 255 / 0.2),
0 0 100px rgb(255 255 255 / 0.1);
}

85% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 40%),
0 0 110px rgb(255 255 255 / 20%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.4),
0 0 110px rgb(255 255 255 / 0.2),
0 0 100px rgb(255 255 255 / 0.1);
}

85.1% {
Expand All @@ -314,19 +314,19 @@
86.1% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 45%),
0 0 110px rgb(255 255 255 / 25%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.45),
0 0 110px rgb(255 255 255 / 0.25),
0 0 100px rgb(255 255 255 / 0.1);
}

100% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 45%),
0 0 110px rgb(255 255 255 / 25%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.45),
0 0 110px rgb(255 255 255 / 0.25),
0 0 100px rgb(255 255 255 / 0.1);
}
}
}
74 changes: 37 additions & 37 deletions sass/animations/exits/_flicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,19 +158,19 @@
0% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 45%),
0 0 110px rgb(255 255 255 / 25%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.45),
0 0 110px rgb(255 255 255 / 0.25),
0 0 100px rgb(255 255 255 / 0.1);
}

13.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 60%),
0 0 60px rgb(255 255 255 / 45%),
0 0 110px rgb(255 255 255 / 25%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.6),
0 0 60px rgb(255 255 255 / 0.45),
0 0 110px rgb(255 255 255 / 0.25),
0 0 100px rgb(255 255 255 / 0.1);
}

14% {
Expand All @@ -186,19 +186,19 @@
15% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 40%),
0 0 110px rgb(255 255 255 / 20%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.4),
0 0 110px rgb(255 255 255 / 0.2),
0 0 100px rgb(255 255 255 / 0.1);
}

22.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 40%),
0 0 110px rgb(255 255 255 / 20%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.4),
0 0 110px rgb(255 255 255 / 0.2),
0 0 100px rgb(255 255 255 / 0.1);
}

23% {
Expand All @@ -214,17 +214,17 @@
25% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 35%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.35),
0 0 100px rgb(255 255 255 / 0.1);
}

34.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 35%),
0 0 100px rgb(255 255 255 / 10%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.35),
0 0 100px rgb(255 255 255 / 0.1);
}

35% {
Expand All @@ -240,15 +240,15 @@
40% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 35%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.35);
}

42.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 55%),
0 0 60px rgb(255 255 255 / 35%);
0 0 30px rgb(255 255 255 / 0.55),
0 0 60px rgb(255 255 255 / 0.35);
}

43% {
Expand All @@ -264,22 +264,22 @@
45% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

50% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

54.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

55% {
Expand All @@ -295,15 +295,15 @@
69.5% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

69.9% {
opacity: 1;
box-shadow:
0 0 30px rgb(255 255 255 / 45%),
0 0 60px rgb(255 255 255 / 25%);
0 0 30px rgb(255 255 255 / 0.45),
0 0 60px rgb(255 255 255 / 0.25);
}

70% {
Expand All @@ -318,7 +318,7 @@

79.9% {
opacity: 1;
box-shadow: 0 0 30px rgb(255 255 255 / 25%);
box-shadow: 0 0 30px rgb(255 255 255 / 0.25);
}

80% {
Expand Down
Loading

0 comments on commit 270f8fa

Please sign in to comment.