Use colors from frontend configuration
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
83946653d6
commit
64d515df28
5 changed files with 155 additions and 1 deletions
|
|
@ -5,11 +5,23 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
|
||||
<title><%= Pleroma.Config.get([:instance, :name]) %></title>
|
||||
<link rel="stylesheet" href="/instance/static.css">
|
||||
<style>
|
||||
:root {
|
||||
<%= Pleroma.Web.Utils.Colors.shades_to_css(
|
||||
"primary",
|
||||
Pleroma.Config.get([:frontend_configurations, :soapbox_fe, "brandColor"], "#0482d8")
|
||||
) %>
|
||||
<%= Pleroma.Web.Utils.Colors.shades_to_css(
|
||||
"accent",
|
||||
Pleroma.Config.get([:frontend_configurations, :soapbox_fe, "accentColor"], "#2bd110")
|
||||
) %>
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="instance-header">
|
||||
<a class="instance-header__content" href="/">
|
||||
<img class="instance-header__thumbnail" src="<%= Pleroma.Config.get([:instance, :instance_thumbnail]) %>">
|
||||
<img class="instance-header__thumbnail" src="<%= Pleroma.Config.get([:frontend_configurations, :soapbox_fe, "logo"], Pleroma.Config.get([:instance, :instance_thumbnail])) %>">
|
||||
<h1 class="instance-header__title"><%= Pleroma.Config.get([:instance, :name]) %></h1>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
90
lib/pleroma/web/utils/colors.ex
Normal file
90
lib/pleroma/web/utils/colors.ex
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
# Pleroma: A lightweight social networking server
|
||||
# Copyright © 2017-2022 Pleroma Authors <https://pleroma.social/>
|
||||
# SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
defmodule Pleroma.Web.Utils.Colors do
|
||||
alias Pleroma.Web.Utils.Colors.RGB
|
||||
|
||||
# Adapted from:
|
||||
# https://gitlab.com/soapbox-pub/soapbox-fe/-/blob/develop/app/soapbox/utils/colors.ts
|
||||
@intensity_map %{
|
||||
50 => 0.95,
|
||||
100 => 0.9,
|
||||
200 => 0.75,
|
||||
300 => 0.3,
|
||||
400 => 0.2,
|
||||
600 => 0.9,
|
||||
700 => 0.75,
|
||||
800 => 0.3,
|
||||
900 => 0.19
|
||||
}
|
||||
|
||||
def get_shades("#" <> base_color) do
|
||||
base_color = base_color |> hex_to_rgb()
|
||||
|
||||
shades = %{
|
||||
500 => base_color |> rgb_to_string()
|
||||
}
|
||||
|
||||
shades =
|
||||
[50, 100, 200, 300, 400]
|
||||
|> Enum.reduce(shades, fn level, map ->
|
||||
Map.put(map, level, lighten(base_color, Map.get(@intensity_map, level)))
|
||||
end)
|
||||
|
||||
shades =
|
||||
[600, 700, 800, 900]
|
||||
|> Enum.reduce(shades, fn level, map ->
|
||||
Map.put(map, level, darken(base_color, Map.get(@intensity_map, level)))
|
||||
end)
|
||||
|
||||
shades
|
||||
end
|
||||
|
||||
def get_shades(_) do
|
||||
get_shades("#0482d8")
|
||||
end
|
||||
|
||||
defp lighten(%RGB{red: red, green: green, blue: blue}, intensity) do
|
||||
%RGB{
|
||||
red: round(red + (255 - red) * intensity),
|
||||
green: round(green + (255 - green) * intensity),
|
||||
blue: round(blue + (255 - blue) * intensity)
|
||||
}
|
||||
|> rgb_to_string()
|
||||
end
|
||||
|
||||
defp darken(%RGB{red: red, green: green, blue: blue}, intensity) do
|
||||
%RGB{
|
||||
red: round(red * intensity),
|
||||
green: round(green * intensity),
|
||||
blue: round(blue * intensity)
|
||||
}
|
||||
|> rgb_to_string()
|
||||
end
|
||||
|
||||
defp rgb_to_string(%RGB{red: red, green: green, blue: blue}) do
|
||||
"#{red}, #{green}, #{blue}"
|
||||
end
|
||||
|
||||
defp hex_to_rgb(<<red::binary-size(2), green::binary-size(2), blue::binary-size(2)>>) do
|
||||
%RGB{
|
||||
red: hex_to_decimal(red),
|
||||
green: hex_to_decimal(green),
|
||||
blue: hex_to_decimal(blue)
|
||||
}
|
||||
end
|
||||
|
||||
defp hex_to_decimal(hex) do
|
||||
{decimal, ""} = Integer.parse(hex, 16)
|
||||
|
||||
decimal
|
||||
end
|
||||
|
||||
def shades_to_css(name, base_color \\ nil) do
|
||||
get_shades(base_color)
|
||||
|> Map.to_list()
|
||||
|> Enum.reduce([], fn {key, shade}, list -> list ++ ["--color-#{name}-#{key}: #{shade};"] end)
|
||||
|> Enum.join("\n")
|
||||
end
|
||||
end
|
||||
13
lib/pleroma/web/utils/colors/rgb.ex
Normal file
13
lib/pleroma/web/utils/colors/rgb.ex
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# Pleroma: A lightweight social networking server
|
||||
# Copyright © 2017-2022 Pleroma Authors <https://pleroma.social/>
|
||||
# SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
defmodule Pleroma.Web.Utils.Colors.RGB do
|
||||
defstruct red: 0, green: 0, blue: 0
|
||||
|
||||
@type t :: %__MODULE__{
|
||||
red: non_neg_integer(),
|
||||
green: non_neg_integer(),
|
||||
blue: non_neg_integer()
|
||||
}
|
||||
end
|
||||
Binary file not shown.
39
test/pleroma/web/utils/colors_test.exs
Normal file
39
test/pleroma/web/utils/colors_test.exs
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# Pleroma: A lightweight social networking server
|
||||
# Copyright © 2017-2022 Pleroma Authors <https://pleroma.social/>
|
||||
# SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
defmodule Pleroma.Web.Utils.ColorsTest do
|
||||
use Pleroma.DataCase
|
||||
|
||||
alias Pleroma.Web.Utils.Colors
|
||||
|
||||
@base_color "#457d7b"
|
||||
|
||||
describe "get_shades/1" do
|
||||
test "generates tints from a base color" do
|
||||
assert %{
|
||||
50 => "246, 249, 248",
|
||||
100 => "236, 242, 242",
|
||||
200 => "209, 223, 222",
|
||||
300 => "125, 164, 163",
|
||||
400 => "106, 151, 149",
|
||||
500 => "69, 125, 123",
|
||||
600 => "62, 113, 111",
|
||||
700 => "52, 94, 92",
|
||||
800 => "21, 38, 37",
|
||||
900 => "13, 24, 23"
|
||||
} == Colors.get_shades(@base_color)
|
||||
end
|
||||
|
||||
test "uses soapbox blue if invalid color provided" do
|
||||
assert %{
|
||||
500 => "4, 130, 216"
|
||||
} = Colors.get_shades("255, 255, 127")
|
||||
end
|
||||
end
|
||||
|
||||
test "shades_to_css/2" do
|
||||
result = Colors.shades_to_css("primary")
|
||||
assert String.contains?(result, "--color-primary-500: 4, 130, 216;")
|
||||
end
|
||||
end
|
||||
Loading…
Reference in a new issue