Commit e6f148b8 authored by HJ's avatar HJ 🐼

removed base16-related code

parent b4278ee5
Pipeline #22710 passed with stages
in 8 minutes and 58 seconds
import { times } from 'lodash'
import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
// styles as well as set their own colors in the future.
export const setStyle = (href) => {
/***
What's going on here?
I want to make it easy for admins to style this application. To have
a good set of default themes, I chose the system from base16
(https://chriskempson.github.io/base16/) to style all elements. They
all have the base00..0F classes. So the only thing an admin needs to
do to style Pleroma is to change these colors in that one css file.
Some default things (body text color, link color) need to be set dy-
namically, so this is done here by waiting for the stylesheet to be
loaded and then creating an element with the respective classes.
It is a bit weird, but should make life for admins somewhat easier.
***/
const head = document.head
const body = document.body
body.classList.add('hidden')
const cssEl = document.createElement('link')
cssEl.setAttribute('rel', 'stylesheet')
cssEl.setAttribute('href', href)
head.appendChild(cssEl)
const setDynamic = () => {
const baseEl = document.createElement('div')
body.appendChild(baseEl)
let colors = {}
times(16, (n) => {
const name = `base0${n.toString(16).toUpperCase()}`
baseEl.setAttribute('class', name)
const color = window.getComputedStyle(baseEl).getPropertyValue('color')
colors[name] = color
})
body.removeChild(baseEl)
const styleEl = document.createElement('style')
head.appendChild(styleEl)
// const styleSheet = styleEl.sheet
body.classList.remove('hidden')
}
cssEl.addEventListener('load', setDynamic)
}
export const applyTheme = (input) => {
const { rules } = generatePreset(input)
const head = document.head
......
.base00-background { background-color: #090300; }
.base01-background { background-color: #3a3432; }
.base02-background { background-color: #4a4543; }
.base03-background { background-color: #5c5855; }
.base04-background { background-color: #807d7c; }
.base05-background { background-color: #a5a2a2; }
.base06-background { background-color: #d6d5d4; }
.base07-background { background-color: #f7f7f7; }
.base08-background { background-color: #db2d20; }
.base09-background { background-color: #e8bbd0; }
.base0A-background { background-color: #fded02; }
.base0B-background { background-color: #01a252; }
.base0C-background { background-color: #b5e4f4; }
.base0D-background { background-color: #01a0e4; }
.base0E-background { background-color: #a16a94; }
.base0F-background { background-color: #cdab53; }
.base00 { color: #090300; }
.base01 { color: #3a3432; }
.base02 { color: #4a4543; }
.base03 { color: #5c5855; }
.base04 { color: #807d7c; }
.base05 { color: #a5a2a2; }
.base06 { color: #d6d5d4; }
.base07 { color: #f7f7f7; }
.base08 { color: #db2d20; }
.base09 { color: #e8bbd0; }
.base0A { color: #fded02; }
.base0B { color: #01a252; }
.base0C { color: #b5e4f4; }
.base0D { color: #01a0e4; }
.base0E { color: #a16a94; }
.base0F { color: #cdab53; }
.base00-background { background-color: #031A16; }
.base01-background { background-color: #0B342D; }
.base02-background { background-color: #184E45; }
.base03-background { background-color: #2B685E; }
.base04-background { background-color: #5F9C92; }
.base05-background { background-color: #81B5AC; }
.base06-background { background-color: #A7CEC8; }
.base07-background { background-color: #D2E7E4; }
.base08-background { background-color: #3E9688; }
.base09-background { background-color: #3E7996; }
.base0A-background { background-color: #3E4C96; }
.base0B-background { background-color: #883E96; }
.base0C-background { background-color: #963E4C; }
.base0D-background { background-color: #96883E; }
.base0E-background { background-color: #4C963E; }
.base0F-background { background-color: #3E965B; }
.base00 { color: #031A16; }
.base01 { color: #0B342D; }
.base02 { color: #184E45; }
.base03 { color: #2B685E; }
.base04 { color: #5F9C92; }
.base05 { color: #81B5AC; }
.base06 { color: #A7CEC8; }
.base07 { color: #D2E7E4; }
.base08 { color: #3E9688; }
.base09 { color: #3E7996; }
.base0A { color: #3E4C96; }
.base0B { color: #883E96; }
.base0C { color: #963E4C; }
.base0D { color: #96883E; }
.base0E { color: #4C963E; }
.base0F { color: #3E965B; }
.base00-background { background-color: #1C2023; }
.base01-background { background-color: #393F45; }
.base02-background { background-color: #565E65; }
.base03-background { background-color: #747C84; }
.base04-background { background-color: #ADB3BA; }
.base05-background { background-color: #C7CCD1; }
.base06-background { background-color: #DFE2E5; }
.base07-background { background-color: #F3F4F5; }
.base08-background { background-color: #C7AE95; }
.base09-background { background-color: #C7C795; }
.base0A-background { background-color: #AEC795; }
.base0B-background { background-color: #95C7AE; }
.base0C-background { background-color: #95AEC7; }
.base0D-background { background-color: #AE95C7; }
.base0E-background { background-color: #C795AE; }
.base0F-background { background-color: #C79595; }
.base00 { color: #1C2023; }
.base01 { color: #393F45; }
.base02 { color: #565E65; }
.base03 { color: #747C84; }
.base04 { color: #ADB3BA; }
.base05 { color: #C7CCD1; }
.base06 { color: #DFE2E5; }
.base07 { color: #F3F4F5; }
.base08 { color: #C7AE95; }
.base09 { color: #C7C795; }
.base0A { color: #AEC795; }
.base0B { color: #95C7AE; }
.base0C { color: #95AEC7; }
.base0D { color: #AE95C7; }
.base0E { color: #C795AE; }
.base0F { color: #C79595; }
.base00-background { background-color: #19171c; }
.base01-background { background-color: #26232a; }
.base02-background { background-color: #585260; }
.base03-background { background-color: #655f6d; }
.base04-background { background-color: #7e7887; }
.base05-background { background-color: #8b8792; }
.base06-background { background-color: #e2dfe7; }
.base07-background { background-color: #efecf4; }
.base08-background { background-color: #be4678; }
.base09-background { background-color: #aa573c; }
.base0A-background { background-color: #a06e3b; }
.base0B-background { background-color: #2a9292; }
.base0C-background { background-color: #398bc6; }
.base0D-background { background-color: #576ddb; }
.base0E-background { background-color: #955ae7; }
.base0F-background { background-color: #bf40bf; }
.base00 { color: #19171c; }
.base01 { color: #26232a; }
.base02 { color: #585260; }
.base03 { color: #655f6d; }
.base04 { color: #7e7887; }
.base05 { color: #8b8792; }
.base06 { color: #e2dfe7; }
.base07 { color: #efecf4; }
.base08 { color: #be4678; }
.base09 { color: #aa573c; }
.base0A { color: #a06e3b; }
.base0B { color: #2a9292; }
.base0C { color: #398bc6; }
.base0D { color: #576ddb; }
.base0E { color: #955ae7; }
.base0F { color: #bf40bf; }
.base00-background { background-color: #20201d; }
.base01-background { background-color: #292824; }
.base02-background { background-color: #6e6b5e; }
.base03-background { background-color: #7d7a68; }
.base04-background { background-color: #999580; }
.base05-background { background-color: #a6a28c; }
.base06-background { background-color: #e8e4cf; }
.base07-background { background-color: #fefbec; }
.base08-background { background-color: #d73737; }
.base09-background { background-color: #b65611; }
.base0A-background { background-color: #ae9513; }
.base0B-background { background-color: #60ac39; }
.base0C-background { background-color: #1fad83; }
.base0D-background { background-color: #6684e1; }
.base0E-background { background-color: #b854d4; }
.base0F-background { background-color: #d43552; }
.base00 { color: #20201d; }
.base01 { color: #292824; }
.base02 { color: #6e6b5e; }
.base03 { color: #7d7a68; }
.base04 { color: #999580; }
.base05 { color: #a6a28c; }
.base06 { color: #e8e4cf; }
.base07 { color: #fefbec; }
.base08 { color: #d73737; }
.base09 { color: #b65611; }
.base0A { color: #ae9513; }
.base0B { color: #60ac39; }
.base0C { color: #1fad83; }
.base0D { color: #6684e1; }
.base0E { color: #b854d4; }
.base0F { color: #d43552; }
.base00-background { background-color: #22221b; }
.base01-background { background-color: #302f27; }
.base02-background { background-color: #5f5e4e; }
.base03-background { background-color: #6c6b5a; }
.base04-background { background-color: #878573; }
.base05-background { background-color: #929181; }
.base06-background { background-color: #e7e6df; }
.base07-background { background-color: #f4f3ec; }
.base08-background { background-color: #ba6236; }
.base09-background { background-color: #ae7313; }
.base0A-background { background-color: #a5980d; }
.base0B-background { background-color: #7d9726; }
.base0C-background { background-color: #5b9d48; }
.base0D-background { background-color: #36a166; }
.base0E-background { background-color: #5f9182; }
.base0F-background { background-color: #9d6c7c; }
.base00 { color: #22221b; }
.base01 { color: #302f27; }
.base02 { color: #5f5e4e; }
.base03 { color: #6c6b5a; }
.base04 { color: #878573; }
.base05 { color: #929181; }
.base06 { color: #e7e6df; }
.base07 { color: #f4f3ec; }
.base08 { color: #ba6236; }
.base09 { color: #ae7313; }
.base0A { color: #a5980d; }
.base0B { color: #7d9726; }
.base0C { color: #5b9d48; }
.base0D { color: #36a166; }
.base0E { color: #5f9182; }
.base0F { color: #9d6c7c; }
.base00-background { background-color: #1b1918; }
.base01-background { background-color: #2c2421; }
.base02-background { background-color: #68615e; }
.base03-background { background-color: #766e6b; }
.base04-background { background-color: #9c9491; }
.base05-background { background-color: #a8a19f; }
.base06-background { background-color: #e6e2e0; }
.base07-background { background-color: #f1efee; }
.base08-background { background-color: #f22c40; }
.base09-background { background-color: #df5320; }
.base0A-background { background-color: #c38418; }
.base0B-background { background-color: #7b9726; }
.base0C-background { background-color: #3d97b8; }
.base0D-background { background-color: #407ee7; }
.base0E-background { background-color: #6666ea; }
.base0F-background { background-color: #c33ff3; }
.base00 { color: #1b1918; }
.base01 { color: #2c2421; }
.base02 { color: #68615e; }
.base03 { color: #766e6b; }
.base04 { color: #9c9491; }
.base05 { color: #a8a19f; }
.base06 { color: #e6e2e0; }
.base07 { color: #f1efee; }
.base08 { color: #f22c40; }
.base09 { color: #df5320; }
.base0A { color: #c38418; }
.base0B { color: #7b9726; }
.base0C { color: #3d97b8; }
.base0D { color: #407ee7; }
.base0E { color: #6666ea; }
.base0F { color: #c33ff3; }
.base00-background { background-color: #1b181b; }
.base01-background { background-color: #292329; }
.base02-background { background-color: #695d69; }
.base03-background { background-color: #776977; }
.base04-background { background-color: #9e8f9e; }
.base05-background { background-color: #ab9bab; }
.base06-background { background-color: #d8cad8; }
.base07-background { background-color: #f7f3f7; }
.base08-background { background-color: #ca402b; }
.base09-background { background-color: #a65926; }
.base0A-background { background-color: #bb8a35; }
.base0B-background { background-color: #918b3b; }
.base0C-background { background-color: #159393; }
.base0D-background { background-color: #516aec; }
.base0E-background { background-color: #7b59c0; }
.base0F-background { background-color: #cc33cc; }
.base00 { color: #1b181b; }
.base01 { color: #292329; }
.base02 { color: #695d69; }
.base03 { color: #776977; }
.base04 { color: #9e8f9e; }
.base05 { color: #ab9bab; }
.base06 { color: #d8cad8; }
.base07 { color: #f7f3f7; }
.base08 { color: #ca402b; }
.base09 { color: #a65926; }
.base0A { color: #bb8a35; }
.base0B { color: #918b3b; }
.base0C { color: #159393; }
.base0D { color: #516aec; }
.base0E { color: #7b59c0; }
.base0F { color: #cc33cc; }
.base00-background { background-color: #161b1d; }
.base01-background { background-color: #1f292e; }
.base02-background { background-color: #516d7b; }
.base03-background { background-color: #5a7b8c; }
.base04-background { background-color: #7195a8; }
.base05-background { background-color: #7ea2b4; }
.base06-background { background-color: #c1e4f6; }
.base07-background { background-color: #ebf8ff; }
.base08-background { background-color: #d22d72; }
.base09-background { background-color: #935c25; }
.base0A-background { background-color: #8a8a0f; }
.base0B-background { background-color: #568c3b; }
.base0C-background { background-color: #2d8f6f; }
.base0D-background { background-color: #257fad; }
.base0E-background { background-color: #6b6bb8; }
.base0F-background { background-color: #b72dd2; }
.base00 { color: #161b1d; }
.base01 { color: #1f292e; }
.base02 { color: #516d7b; }
.base03 { color: #5a7b8c; }
.base04 { color: #7195a8; }
.base05 { color: #7ea2b4; }
.base06 { color: #c1e4f6; }
.base07 { color: #ebf8ff; }
.base08 { color: #d22d72; }
.base09 { color: #935c25; }
.base0A { color: #8a8a0f; }
.base0B { color: #568c3b; }
.base0C { color: #2d8f6f; }
.base0D { color: #257fad; }
.base0E { color: #6b6bb8; }
.base0F { color: #b72dd2; }
.base00-background { background-color: #1b1818; }
.base01-background { background-color: #292424; }
.base02-background { background-color: #585050; }
.base03-background { background-color: #655d5d; }
.base04-background { background-color: #7e7777; }
.base05-background { background-color: #8a8585; }
.base06-background { background-color: #e7dfdf; }
.base07-background { background-color: #f4ecec; }
.base08-background { background-color: #ca4949; }
.base09-background { background-color: #b45a3c; }
.base0A-background { background-color: #a06e3b; }
.base0B-background { background-color: #4b8b8b; }
.base0C-background { background-color: #5485b6; }
.base0D-background { background-color: #7272ca; }
.base0E-background { background-color: #8464c4; }
.base0F-background { background-color: #bd5187; }
.base00 { color: #1b1818; }
.base01 { color: #292424; }
.base02 { color: #585050; }
.base03 { color: #655d5d; }
.base04 { color: #7e7777; }
.base05 { color: #8a8585; }
.base06 { color: #e7dfdf; }
.base07 { color: #f4ecec; }
.base08 { color: #ca4949; }
.base09 { color: #b45a3c; }
.base0A { color: #a06e3b; }
.base0B { color: #4b8b8b; }
.base0C { color: #5485b6; }
.base0D { color: #7272ca; }
.base0E { color: #8464c4; }
.base0F { color: #bd5187; }
.base00-background { background-color: #171c19; }
.base01-background { background-color: #232a25; }
.base02-background { background-color: #526057; }
.base03-background { background-color: #5f6d64; }
.base04-background { background-color: #78877d; }
.base05-background { background-color: #87928a; }
.base06-background { background-color: #dfe7e2; }
.base07-background { background-color: #ecf4ee; }
.base08-background { background-color: #b16139; }
.base09-background { background-color: #9f713c; }
.base0A-background { background-color: #a07e3b; }
.base0B-background { background-color: #489963; }
.base0C-background { background-color: #1c9aa0; }
.base0D-background { background-color: #478c90; }
.base0E-background { background-color: #55859b; }
.base0F-background { background-color: #867469; }
.base00 { color: #171c19; }
.base01 { color: #232a25; }
.base02 { color: #526057; }
.base03 { color: #5f6d64; }
.base04 { color: #78877d; }
.base05 { color: #87928a; }
.base06 { color: #dfe7e2; }
.base07 { color: #ecf4ee; }
.base08 { color: #b16139; }
.base09 { color: #9f713c; }
.base0A { color: #a07e3b; }
.base0B { color: #489963; }
.base0C { color: #1c9aa0; }
.base0D { color: #478c90; }
.base0E { color: #55859b; }
.base0F { color: #867469; }
.base00-background { background-color: #131513; }
.base01-background { background-color: #242924; }
.base02-background { background-color: #5e6e5e; }
.base03-background { background-color: #687d68; }
.base04-background { background-color: #809980; }
.base05-background { background-color: #8ca68c; }
.base06-background { background-color: #cfe8cf; }
.base07-background { background-color: #f4fbf4; }
.base08-background { background-color: #e6193c; }
.base09-background { background-color: #87711d; }
.base0A-background { background-color: #98981b; }
.base0B-background { background-color: #29a329; }
.base0C-background { background-color: #1999b3; }
.base0D-background { background-color: #3d62f5; }
.base0E-background { background-color: #ad2bee; }
.base0F-background { background-color: #e619c3; }
.base00 { color: #131513; }
.base01 { color: #242924; }
.base02 { color: #5e6e5e; }
.base03 { color: #687d68; }
.base04 { color: #809980; }
.base05 { color: #8ca68c; }
.base06 { color: #cfe8cf; }
.base07 { color: #f4fbf4; }
.base08 { color: #e6193c; }
.base09 { color: #87711d; }
.base0A { color: #98981b; }
.base0B { color: #29a329; }
.base0C { color: #1999b3; }
.base0D { color: #3d62f5; }
.base0E { color: #ad2bee; }
.base0F { color: #e619c3; }
.base00-background { background-color: #202746; }
.base01-background { background-color: #293256; }
.base02-background { background-color: #5e6687; }
.base03-background { background-color: #6b7394; }
.base04-background { background-color: #898ea4; }
.base05-background { background-color: #979db4; }
.base06-background { background-color: #dfe2f1; }
.base07-background { background-color: #f5f7ff; }
.base08-background { background-color: #c94922; }
.base09-background { background-color: #c76b29; }
.base0A-background { background-color: #c08b30; }
.base0B-background { background-color: #ac9739; }
.base0C-background { background-color: #22a2c9; }
.base0D-background { background-color: #3d8fd1; }
.base0E-background { background-color: #6679cc; }
.base0F-background { background-color: #9c637a; }
.base00 { color: #202746; }
.base01 { color: #293256; }
.base02 { color: #5e6687; }
.base03 { color: #6b7394; }
.base04 { color: #898ea4; }
.base05 { color: #979db4; }
.base06 { color: #dfe2f1; }
.base07 { color: #f5f7ff; }
.base08 { color: #c94922; }
.base09 { color: #c76b29; }
.base0A { color: #c08b30; }
.base0B { color: #ac9739; }
.base0C { color: #22a2c9; }
.base0D { color: #3d8fd1; }
.base0E { color: #6679cc; }
.base0F { color: #9c637a; }
.base00-background { background-color: #28211c; }
.base01-background { background-color: #36312e; }
.base02-background { background-color: #5e5d5c; }
.base03-background { background-color: #666666; }
.base04-background { background-color: #797977; }
.base05-background { background-color: #8a8986; }
.base06-background { background-color: #9d9b97; }
.base07-background { background-color: #baae9e; }
.base08-background { background-color: #cf6a4c; }
.base09-background { background-color: #cf7d34; }
.base0A-background { background-color: #f9ee98; }
.base0B-background { background-color: #54be0d; }
.base0C-background { background-color: #afc4db; }
.base0D-background { background-color: #5ea6ea; }
.base0E-background { background-color: #9b859d; }
.base0F-background { background-color: #937121; }
.base00 { color: #28211c; }
.base01 { color: #36312e; }
.base02 { color: #5e5d5c; }
.base03 { color: #666666; }
.base04 { color: #797977; }
.base05 { color: #8a8986; }
.base06 { color: #9d9b97; }
.base07 { color: #baae9e; }
.base08 { color: #cf6a4c; }
.base09 { color: #cf7d34; }
.base0A { color: #f9ee98; }
.base0B { color: #54be0d; }
.base0C { color: #afc4db; }
.base0D { color: #5ea6ea; }
.base0E { color: #9b859d; }
.base0F { color: #937121; }
.base00-background { background-color: #0c0d0e; }
.base01-background { background-color: #2e2f30; }
.base02-background { background-color: #515253; }
.base03-background { background-color: #737475; }
.base04-background { background-color: #959697; }
.base05-background { background-color: #b7b8b9; }
.base06-background { background-color: #dadbdc; }
.base07-background { background-color: #fcfdfe; }
.base08-background { background-color: #e31a1c; }
.base09-background { background-color: #e6550d; }
.base0A-background { background-color: #dca060; }
.base0B-background { background-color: #31a354; }
.base0C-background { background-color: #80b1d3; }
.base0D-background { background-color: #3182bd; }
.base0E-background { background-color: #756bb1; }
.base0F-background { background-color: #b15928; }
.base00 { color: #0c0d0e; }
.base01 { color: #2e2f30; }
.base02 { color: #515253; }
.base03 { color: #737475; }
.base04 { color: #959697; }
.base05 { color: #b7b8b9; }
.base06 { color: #dadbdc; }
.base07 { color: #fcfdfe; }
.base08 { color: #e31a1c; }
.base09 { color: #e6550d; }
.base0A { color: #dca060; }
.base0B { color: #31a354; }
.base0C { color: #80b1d3; }
.base0D { color: #3182bd; }
.base0E { color: #756bb1; }
.base0F { color: #b15928; }
.base00-background { background-color: #000000; }
.base01-background { background-color: #303030; }
.base02-background { background-color: #505050; }
.base03-background { background-color: #b0b0b0; }
.base04-background { background-color: #d0d0d0; }
.base05-background { background-color: #e0e0e0; }
.base06-background { background-color: #f5f5f5; }
.base07-background { background-color: #ffffff; }
.base08-background { background-color: #fb0120; }
.base09-background { background-color: #fc6d24; }
.base0A-background { background-color: #fda331; }
.base0B-background { background-color: #a1c659; }
.base0C-background { background-color: #76c7b7; }
.base0D-background { background-color: #6fb3d2; }