Skip to content

Commit 13beaf1

Browse files
rimi-itkrimi-itk
committed
LOOP-1227: Updated theme colors
1 parent e3d40ea commit 13beaf1

File tree

5 files changed

+211
-11
lines changed

5 files changed

+211
-11
lines changed

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,46 @@ img {
6666

6767
// moved to end to load correctly
6868
@import "search.scss";
69+
70+
// For testing and debugging, cf. ../test/colors.php.
71+
// $colors: (
72+
// loop-green: $loop-green,
73+
// loop-green-600: $loop-green-600,
74+
// loop-green-400: $loop-green-400,
75+
// loop-green-300: $loop-green-300,
76+
// loop-green-200: $loop-green-200,
77+
// loop-green-100: $loop-green-100,
78+
79+
// tag-blue: $tag-blue,
80+
// tag-purple: $tag-purple,
81+
// tag-green: $tag-green,
82+
// tag-orange: $tag-orange,
83+
84+
// taxonomy-color-1: $taxonomy-color-1,
85+
// taxonomy-color-2: $taxonomy-color-2,
86+
// taxonomy-color-3: $taxonomy-color-3,
87+
// taxonomy-color-4: $taxonomy-color-4,
88+
89+
// primary: $primary,
90+
// secondary: $secondary,
91+
// success: $success,
92+
// info: $info,
93+
// warning: $warning,
94+
// danger: $danger
95+
// );
96+
97+
// @each $name, $color in $colors {
98+
// .color-#{$name} {
99+
// display: block;
100+
// width: 20rem;
101+
// height: 2rem;
102+
// content: "#{$name}";
103+
// background-color: $color;
104+
105+
// &::before {
106+
// content: "#{$name}";
107+
// color: black;
108+
// background: white;
109+
// }
110+
// }
111+
// }

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/color-templates/blue.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
1+
$primary-color: hsl(230, 54%, 35%);
2+
$primary-color-base: #60a95b;
3+
4+
// Compute theme color from base color.
5+
@function loop-theme-color(
6+
$reference-color,
7+
$source-color: $primary-color,
8+
$base-color: $primary-color-base
9+
) {
10+
$delta-hue: hue($reference-color) - hue($base-color);
11+
$delta-saturation: saturation($reference-color) - saturation($base-color);
12+
$delta-lightness: lightness($reference-color) - lightness($base-color);
13+
14+
@return adjust-color(
15+
$source-color,
16+
$hue: $delta-hue,
17+
$saturation: $delta-saturation,
18+
$lightness: $delta-lightness
19+
);
20+
}
21+
22+
$loop-green: loop-theme-color(#60a95b);
23+
$loop-green-600: loop-theme-color(#448740);
24+
$loop-green-400: loop-theme-color(#76c076);
25+
$loop-green-300: loop-theme-color(#9bd89b);
26+
$loop-green-200: loop-theme-color(#d2ebd3);
27+
$loop-green-100: loop-theme-color(#e5f2e7);
28+
29+
// $tag-blue: loop-theme-color(#3d8bfd);
30+
// $tag-purple: loop-theme-color(#8540f5);
31+
// $tag-green: loop-theme-color(#38ab3d);
32+
// $tag-orange: loop-theme-color(#f28e3e);
33+
34+
// $taxonomy-color-1: loop-theme-color(#efbb00);
35+
// $taxonomy-color-2: loop-theme-color(#068711);
36+
// $taxonomy-color-3: loop-theme-color(#2a398b);
37+
// $taxonomy-color-4: loop-theme-color(#222222);
38+
39+
@import "../variables/colors.scss";
40+
141
$primary: hsl(230, 54%, 35%);
242
$secondary: hsl(208, 7%, 46%);
343
$success: lighten(hsl(110, 54%, 35%), 40%);

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/color-templates/lightblue.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
1+
$primary-color: #409cda;
2+
$primary-color-base: #60a95b;
3+
4+
// Compute theme color from base color.
5+
@function loop-theme-color(
6+
$reference-color,
7+
$source-color: $primary-color,
8+
$base-color: $primary-color-base
9+
) {
10+
$delta-hue: hue($reference-color) - hue($base-color);
11+
$delta-saturation: saturation($reference-color) - saturation($base-color);
12+
$delta-lightness: lightness($reference-color) - lightness($base-color);
13+
14+
@return adjust-color(
15+
$source-color,
16+
$hue: $delta-hue,
17+
$saturation: $delta-saturation,
18+
$lightness: $delta-lightness
19+
);
20+
}
21+
22+
$loop-green: loop-theme-color(#60a95b);
23+
$loop-green-600: loop-theme-color(#448740);
24+
$loop-green-400: loop-theme-color(#76c076);
25+
$loop-green-300: loop-theme-color(#9bd89b);
26+
$loop-green-200: loop-theme-color(#d2ebd3);
27+
$loop-green-100: loop-theme-color(#e5f2e7);
28+
29+
// $tag-blue: loop-theme-color(#3d8bfd);
30+
// $tag-purple: loop-theme-color(#8540f5);
31+
// $tag-green: loop-theme-color(#38ab3d);
32+
// $tag-orange: loop-theme-color(#f28e3e);
33+
34+
// $taxonomy-color-1: loop-theme-color(#efbb00);
35+
// $taxonomy-color-2: loop-theme-color(#068711);
36+
// $taxonomy-color-3: loop-theme-color(#2a398b);
37+
// $taxonomy-color-4: loop-theme-color(#222222);
38+
39+
@import "../variables/colors.scss";
40+
141
$primary: #409cda;
242
$secondary: hsl(208, 7%, 46%);
343
$success: lighten(hsl(110, 54%, 35%), 40%);

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/variables/colors.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
*/
55

66
// System green
7-
$loop-green: #60a95b;
8-
$loop-green-600: #448740;
9-
$loop-green-400: #76c076;
10-
$loop-green-300: #9bd89b;
11-
$loop-green-200: #d2ebd3;
12-
$loop-green-100: #e5f2e7;
7+
$loop-green: #60a95b !default;
8+
$loop-green-600: #448740 !default;
9+
$loop-green-400: #76c076 !default;
10+
$loop-green-300: #9bd89b !default;
11+
$loop-green-200: #d2ebd3 !default;
12+
$loop-green-100: #e5f2e7 !default;
1313

1414
// Tag colors
15-
$tag-blue: #3d8bfd;
16-
$tag-purple: #8540f5;
17-
$tag-green: #38ab3d;
18-
$tag-orange: #f28e3e;
15+
$tag-blue: #3d8bfd !default;
16+
$tag-purple: #8540f5 !default;
17+
$tag-green: #38ab3d !default;
18+
$tag-orange: #f28e3e !default;
1919

2020
// Gray tones
2121
$gray-900: #212529;
@@ -28,7 +28,7 @@ $gray-200: #e9ecef;
2828
$gray-100: #f8f9fa;
2929

3030
// Notification colors
31-
$loop-red: #dc3545;
31+
$loop-red: #dc3545 !default;
3232

3333
// System white
3434
$loop-white: #fff;

‎web/profiles/custom/os2loop/themes/os2loop_theme/test/colors.php‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<?php
3+
// phpcs:ignoreFile
4+
$color_names = [
5+
'loop-green',
6+
'loop-green-600',
7+
'loop-green-400',
8+
'loop-green-300',
9+
'loop-green-200',
10+
'loop-green-100',
11+
12+
'tag-blue',
13+
'tag-purple',
14+
'tag-green',
15+
'tag-orange',
16+
17+
'taxonomy-color-1',
18+
'taxonomy-color-2',
19+
'taxonomy-color-3',
20+
'taxonomy-color-4',
21+
22+
'primary',
23+
'secondary',
24+
'success',
25+
'info',
26+
'warning',
27+
'danger'
28+
];
29+
30+
$themes = [
31+
'default',
32+
'blue',
33+
'green',
34+
'red',
35+
'yellow',
36+
'lightblue',
37+
];
38+
39+
$active_theme = $_GET['theme'] ?? 'default';
40+
if (!in_array($active_theme, $themes, true)) {
41+
$active_theme = $themes[0];
42+
}
43+
?>
44+
<html lang="en">
45+
<head>
46+
<meta charset="utf-8">
47+
<meta name="viewport" content="width=device-width, initial-scale=1">
48+
<title>OS2Loop colors</title>
49+
<link rel="stylesheet" href="../build/<?php print $active_theme ?>.css" />
50+
</head>
51+
<body>
52+
<div class="container-fluid">
53+
<nav class="navbar navbar-expand-lg bg-light">
54+
<div class="container-fluid">
55+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
56+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
57+
<?php foreach ($themes as $theme): ?>
58+
<li class="nav-item">
59+
<a class="nav-link <?php print $theme == $active_theme ? 'active' : '' ?>" href="?theme=<?php print $theme ?>"><?php print $theme ?></a>
60+
</li>
61+
<?php endforeach ?>
62+
</ul>
63+
</div>
64+
</div>
65+
</nav>
66+
67+
<div class="os2loop-colors">
68+
<h1><?php print $active_theme ?></h1>
69+
<?php
70+
foreach ($color_names as $color_name) {
71+
printf('<div class="color-%s"></div>', $color_name);
72+
}
73+
?>
74+
</div>
75+
</div>
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)