Commit a746a781 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat(themes): set generic css variables for colors to enable instance themes

- set new colors using the css variables for theming in tailwind.config.js
- replace admin and
public colors with new variable enabled colors
parent f611a16c
......@@ -119,7 +119,7 @@ class EpisodeComment extends UuidEntity
public function getHasReplies(): bool
{
return $this->getReplies() !== null;
return $this->getReplies() !== [];
}
public function getReplyToComment(): ?self
......
......@@ -24,9 +24,9 @@ if (! function_exists('hint_tooltip')) {
function hint_tooltip(string $hintText = '', string $class = ''): string
{
$tooltip =
'<span data-toggle="tooltip" data-placement="bottom" tabindex="0" title="' .
'<span data-tooltip="bottom" tabindex="0" title="' .
$hintText .
'" class="inline-block text-gray-500 align-middle focus:ring-castopod';
'" class="inline-block align-middle text-skin-muted focus:ring-accent';
if ($class !== '') {
$tooltip .= ' ' . $class;
......@@ -56,14 +56,14 @@ if (! function_exists('data_table')) {
'table_open' => '<table class="w-full whitespace-no-wrap">',
'thead_open' =>
'<thead class="text-xs font-semibold text-left text-gray-500 uppercase">',
'<thead class="text-xs font-semibold text-left uppercase text-skin-muted">',
'heading_cell_start' => '<th class="px-4 py-2">',
'cell_start' => '<td class="px-4 py-2">',
'cell_alt_start' => '<td class="px-4 py-2">',
'row_start' => '<tr class="border-t hover:bg-pine-50">',
'row_alt_start' => '<tr class="border-t hover:bg-pine-50">',
'row_start' => '<tr class="border-t border-subtle hover:bg-base">',
'row_alt_start' => '<tr class="border-t border-subtle hover:bg-base">',
];
$table->setTemplate($template);
......@@ -88,7 +88,7 @@ if (! function_exists('data_table')) {
return lang('Common.no_data');
}
return '<div class="overflow-x-auto bg-white rounded-lg border-3 border-pine-100 ' . $class . '" >' .
return '<div class="overflow-x-auto rounded-lg bg-elevated border-3 border-subtle ' . $class . '" >' .
$table->generate() .
'</div>';
}
......@@ -105,7 +105,7 @@ if (! function_exists('publication_pill')) {
function publication_pill(?Time $publicationDate, string $publicationStatus, string $customClass = ''): string
{
$class = match ($publicationStatus) {
'published' => 'text-pine-600 border-pine-600 bg-pine-50',
'published' => 'text-pine-500 border-pine-500 bg-pine-50',
'scheduled' => 'text-red-600 border-red-600 bg-red-50',
'not_published' => 'text-gray-600 border-gray-600 bg-gray-50',
default => 'text-gray-600 border-gray-600 bg-gray-50',
......@@ -208,7 +208,7 @@ if (! function_exists('episode_numbering')) {
$class .
'" title="' .
lang($transKey, $args) .
'">' .
'" data-tooltip="bottom">' .
lang($transKey . '_abbr', $args) .
'</abbr>';
}
......@@ -238,7 +238,7 @@ if (! function_exists('location_link')) {
icon('map-pin', 'mr-2') . $location->name,
[
'class' =>
'inline-flex items-baseline hover:underline focus:ring-castopod' .
'inline-flex items-baseline hover:underline focus:ring-accent' .
($class === '' ? '' : " {$class}"),
'target' => '_blank',
'rel' => 'noreferrer noopener',
......@@ -264,8 +264,8 @@ if (! function_exists('audio_player')) {
theme="light"
language="{$language}"
icons="castopod-icons"
class="{$class}"
style="--vm-player-box-shadow:0; --vm-player-theme: #009486; --vm-control-spacing: 4px;"
class="{$class} relative z-0"
style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-control-spacing: 4px; --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"
>
<vm-audio preload="none">
<source src="{$source}" type="{$mediaType}" />
......
......@@ -20,17 +20,17 @@ if (! function_exists('render_page_links')) {
{
$pages = (new PageModel())->findAll();
$links = anchor(route_to('home'), lang('Common.home'), [
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',
]);
$links .= anchor(route_to('credits'), lang('Person.credits'), [
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',
]);
$links .= anchor(route_to('map'), lang('Page.map'), [
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',
]);
foreach ($pages as $page) {
$links .= anchor($page->link, $page->title, [
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-castopod',
'class' => 'px-2 py-1 underline hover:no-underline focus:ring-accent',
]);
}
......
......@@ -39,14 +39,18 @@ import "./modules/play-episode-button";
const player = html`<div
id="castopod-audio-player"
class="fixed bottom-0 left-0 flex flex-col w-full bg-white border-t sm:flex-row z-50"
class="fixed bottom-0 left-0 flex flex-col w-full bg-elevated border-t border-subtle sm:flex-row z-50"
data-episode="-1"
style="display: none;"
>
<div class="flex items-center">
<img src="" alt="" class="h-[52px] w-[52px]" />
<div class="flex flex-col px-2">
<p class="text-sm w-48 truncate" title="" id="castopod-player-title"></p>
<p
class="text-sm w-48 truncate font-semibold"
title=""
id="castopod-player-title"
></p>
<p
class="text-xs w-48 truncate"
title=""
......@@ -60,7 +64,7 @@ const player = html`<div
language="en"
icons="castopod-icons"
class="flex-1"
style="--vm-player-box-shadow:0; --vm-player-theme: #009486;"
style="--vm-player-box-shadow:0; --vm-player-theme: hsl(var(--color-accent-base)); --vm-control-focus-color: hsl(var(--color-accent-contrast)); --vm-menu-item-focus-bg: hsl(var(--color-background-highlight));"
>
<vm-audio preload="none" id="testing-audio">
<source src="" type="" />
......
......@@ -46,13 +46,13 @@ const drawEpisodesMap = async (mapDivId: string, dataUrl: string) => {
data[i].latitude,
data[i].longitude,
]).bindPopup(
'<div class="flex min-w-max"><img src="' +
'<div class="flex min-w-max w-full gap-x-2"><img src="' +
data[i].cover_path +
'" alt="' +
data[i].episode_title +
'" class="mr-2 rounded w-16 h-16" /><div class="flex flex-col"><h2 class="lg:text-base text-sm ! font-bold"><a href="' +
'" class="rounded w-16 h-16" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +
data[i].episode_link +
'" class="hover:underline !text-pine-800">' +
'" class="hover:underline font-semibold !text-accent-base">' +
data[i].episode_title +
'</a></h2><a href="' +
data[i].podcast_link +
......
import { createPopper, Placement } from "@popperjs/core";
const Tooltip = (): void => {
const tooltipContainers: NodeListOf<HTMLElement> = document.querySelectorAll(
"[data-toggle='tooltip']"
);
const tooltipContainers: NodeListOf<HTMLElement> =
document.querySelectorAll("[data-tooltip]");
for (let i = 0; i < tooltipContainers.length; i++) {
const tooltipReference = tooltipContainers[i];
......@@ -18,7 +17,7 @@ const Tooltip = (): void => {
tooltip.innerHTML = tooltipContent;
const popper = createPopper(tooltipReference, tooltip, {
placement: tooltipReference.dataset.placement as Placement,
placement: tooltipReference.dataset.tooltip as Placement,
modifiers: [
{
name: "offset",
......
import MarkdownToolbarElement from "@github/markdown-toolbar-element";
import { html, LitElement, TemplateResult } from "lit";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import marked from "marked";
......@@ -52,9 +52,21 @@ export class MarkdownPreview extends LitElement {
});
}
static styles = css`
* {
max-width: 65ch;
}
a {
font-weight: 600;
color: hsl(var(--color-accent-base));
text-decoration: none;
}
`;
render(): TemplateResult<1> {
return html`${this._show
? html`${unsafeHTML(this.markdownToHtml())}`
? html`${unsafeHTML(this.markdownToHtml())}</div>`
: html``}`;
}
}
......@@ -63,7 +63,7 @@ export class MarkdownWritePreview extends LitElement {
width: 80%;
height: 4px;
margin: 0 auto;
background-color: #009486;
background-color: hsl(var(--color-accent-base));
border-radius: 9999px;
}
`;
......
......@@ -156,6 +156,7 @@ export class PermalinkEdit extends LitElement {
button svg,
clipboard-copy svg {
fill: hsl(var(--color-text-base));
opacity: 0.6;
font-size: 1.25rem;
}
......
......@@ -189,7 +189,7 @@ export class PlayEpisodeButton extends LitElement {
static styles = css`
button {
background-color: #009486;
background-color: hsl(var(--color-accent-base));
cursor: pointer;
display: inline-flex;
align-items: center;
......@@ -203,30 +203,31 @@ export class PlayEpisodeButton extends LitElement {
}
button:hover {
background-color: #00564a;
background-color: hsl(var(--color-accent-hover));
}
button:focus {
outline: none;
box-shadow: 0 0 0 2px #e7f9e4, 0 0 0 4px #009486;
box-shadow: 0 0 0 2px hsl(var(--color-background-base)),
0 0 0 4px hsl(var(--color-accent-base));
}
button.playing {
background-color: #f2faf9;
border: 2px solid #009486;
background-color: hsl(var(--color-background-base));
border: 2px solid hsl(var(--color-accent-base));
}
button.playing:hover {
background-color: #e7f9e4;
background-color: hsl(var(--color-background-elevated));
}
button.playing svg {
color: #009486;
color: hsl(var(--color-accent-base));
}
svg {
font-size: 1.5rem;
color: #ffffff;
color: hsl(var(--color-accent-contrast));
}
@keyframes spin {
......
......@@ -59,15 +59,32 @@ export class XMLEditor extends LitElement {
.cm-editor {
border-radius: 0.5rem;
overflow: hidden;
border: 3px solid #000000;
background-color: #ffffff;
border: 3px solid hsl(var(--color-border-contrast));
background-color: hsl(var(--color-background-elevated));
}
.cm-editor.cm-focused {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px #e7f9e4, 0 0 0 calc(4px) #009486;
box-shadow: 0 0 0 2px hsl(var(--color-background-elevated)),
0 0 0 calc(4px) hsl(var(--color-accent-base));
}
.cm-gutters {
background-color: #ffffff !important;
background-color: hsl(var(--color-background-elevated)) !important;
}
.cm-activeLine {
background-color: hsl(var(--color-background-highlight)) !important;
}
.cm-activeLineGutter {
background-color: hsl(var(--color-background-highlight)) !important;
}
.ͼ4 .cm-line {
caret-color: hsl(var(--color-text-base)) !important;
}
.ͼ1 .cm-cursor {
border: none;
}
`;
......
......@@ -3,7 +3,8 @@
}
.breadcrumb-item + .breadcrumb-item::before {
@apply inline-block px-1 text-gray-500;
@apply inline-block px-1;
color: hsl(var(--color-text-muted));
content: "/";
}
......@@ -15,7 +16,7 @@
}
&:focus {
@apply ring-castopod;
@apply ring-accent;
}
}
......
.chart-map {
height: 600px;
border: solid 10px #eee;
}
.chart-pie {
height: 450px;
width: 100%;
border: solid 1px #eee;
}
.chart-xy {
height: 500px;
width: 100%;
border: solid 1px #eee;
border: solid 3px #eee;
}
......@@ -19,7 +19,7 @@
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
opacity: 0.5;
cursor: not-allowed;
-webkit-user-select: none;
-ms-user-select: none;
......@@ -46,8 +46,8 @@
display: block;
width: 100%;
padding: 10px;
border-bottom: 1px solid #dddddd;
background-color: #ffffff;
border-bottom: 1px solid hsl(var(--color-border-subtle));
background-color: hsl(var(--color-background-elevated));
margin: 0;
}
......@@ -85,7 +85,8 @@
height: 0;
width: 0;
border-style: solid;
border-color: #333333 transparent transparent transparent;
border-color: hsl(var(--color-text-muted)) transparent transparent
transparent;
border-width: 5px;
position: absolute;
right: 11.5px;
......@@ -95,7 +96,8 @@
}
.choices[data-type*="select-one"].is-open:after {
border-color: transparent transparent #333333 transparent;
border-color: transparent transparent hsl(var(--color-text-muted))
transparent;
margin-top: -7.5px;
}
......@@ -138,9 +140,9 @@
}
.choices__inner {
@apply p-2 bg-white border-black rounded-lg border-3;
@apply p-2 rounded-lg border-contrast bg-elevated border-3;
box-shadow: 2px 2px 0 black;
box-shadow: 2px 2px 0 hsl(var(--color-border-contrast));
display: inline-block;
vertical-align: top;
width: 100%;
......@@ -155,7 +157,7 @@
.is-focused .choices__inner,
.is-open .choices__inner {
@apply ring-castopod ring-inset;
@apply ring-accent ring-inset;
}
.is-open .choices__inner {
......@@ -190,7 +192,7 @@
}
.choices__list--multiple .choices__item {
@apply inline-block px-2 py-1 mb-1 mr-1 text-sm text-white align-middle rounded bg-pine-500;
@apply inline-block px-2 py-1 mb-1 mr-1 text-sm align-middle rounded text-accent-contrast bg-accent-base;
word-break: break-all;
box-sizing: border-box;
......@@ -206,7 +208,7 @@
}
.choices__list--multiple .choices__item.is-highlighted {
@apply bg-pine-500;
@apply bg-accent-base;
}
.is-disabled .choices__list--multiple .choices__item {
......@@ -215,11 +217,11 @@
}
.choices__list--dropdown {
@apply z-50 border-2 border-black shadow-lg;
@apply z-50 border-2 shadow-lg border-contrast;
visibility: hidden;
position: absolute;
width: 100%;
background-color: #ffffff;
background-color: hsl(var(--color-background-elevated));
top: 100%;
margin-top: -1px;
overflow: hidden;
......@@ -286,7 +288,7 @@
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
background-color: #f2f2f2;
background-color: hsl(var(--color-background-highlight));
}
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
......@@ -334,7 +336,7 @@
}
.choices__input {
@apply mb-1 align-middle bg-white;
@apply mb-1 align-middle bg-elevated;
display: inline-block;
font-size: 14px;
......
/*
--color-brand-lighter: hsl(173 44% 96%);
--color-brand-light: hsl(111 64% 94%);
--color-brand-base: hsl(174 100% 29%);
--color-brand-dark: hsl(172 100% 17%);
--color-brand-darker: hsl(131 100% 12%);
--color-background-elevated: hsl(0 0% 100%);
--color-background-base: hsl(173 44% 96%);
--color-text-base: hsl(240 17% 2%);
--color-text-muted: hsl(240 8% 63%);
--color-text-inverted: hsl(0 0% 100%);
--color-brand-lighter: 173 44% 96%;
--color-brand-light: 111 64% 94%;
--color-brand-base: 174 100% 29%;
--color-brand-dark: 172 100% 17%;
--color-brand-darker: 131 100% 12%;
--color-background-elevated: 0 0% 100%;
--color-background-base: 173 44% 96%;
--color-text-base: 240 17% 2%;
--color-text-muted: 240 8% 63%;
--color-text-inverted: 0 0% 100%;
*/
/*
--color-accent-base: 0 100% 38%;
--color-accent-hover: 0 100% 48%;
--color-accent-muted: 0 8% 63%;
--color-heading-foreground: 0 64% 94%;
--color-heading-background: 0 100% 17%;
--color-background-elevated: 209 35% 15%;
--color-background-base: 210 34% 13%;
--color-background-navigation: 210 34% 11%;
--color-background-header: 200 38% 15%;
--color-background-highlight: 200 38% 25%;
--color-background-backdrop: 0 0% 50%;
--color-border-subtle: 240 8% 27%;
--color-border-contrast: 240 8% 78%;
--color-border-navigation: 210 34% 4%;
--color-text-base: 240 17% 100%;
--color-text-muted: 240 8% 63%;
*/
@layer base {
:root {
--color-accent-base: 174 100% 29%;
--color-accent-hover: 172 100% 17%;
--color-accent-muted: 131 100% 12%;
--color-accent-contrast: 0 0% 100%;
--color-heading-foreground: 172 100% 17%;
--color-heading-background: 111 64% 94%;
--color-background-elevated: 0 0% 100%;
--color-background-base: 173 44% 96%;
--color-background-navigation: 172 100% 17%;
--color-background-header: 172 100% 17%;
--color-background-highlight: 111 64% 94%;
--color-background-backdrop: 0 0% 50%;
--color-border-subtle: 111 42% 86%;
--color-border-contrast: 0 0% 0%;
--color-border-navigation: 131 100% 12%;
--color-text-base: 158 8% 3%;
--color-text-muted: 172 8% 38%;
}
body {
color: hsl(var(--color-text-base));
}
}
@layer components {
.post-content {
& a {
@apply text-sm font-semibold text-pine-600 hover:underline;
@apply text-sm font-semibold text-accent-base hover:text-accent-hover;
}
}
.ring-castopod {
@apply outline-none ring-2 ring-pine-500 ring-offset-2 ring-offset-pine-100;
.ring-accent {
@apply outline-none ring-2 ring-offset-2;
/* FIXME: why doesn't ring-accent-base work? */
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--color-accent-base) / var(--tw-ring-opacity));
--tw-ring-offset-color: hsl(var(--color-background-base));
}
.rounded-conditional-b-xl {
......@@ -27,30 +31,15 @@
.backdrop-gradient {
background-image: linear-gradient(
180deg,
hsla(0, 0%, 35.29%, 0) 0%,
hsla(0, 0%, 34.53%, 0.034375) 16.36%,
hsla(0, 0%, 32.42%, 0.125) 33.34%,
hsla(0, 0%, 29.18%, 0.253125) 50.1%,
hsla(0, 0%, 24.96%, 0.4) 65.75%,
hsla(0, 0%, 19.85%, 0.546875) 79.43%,
hsla(0, 0%, 13.95%, 0.675) 90.28%,
hsla(0, 0%, 7.32%, 0.765625) 97.43%,
hsla(0, 0%, 0%, 0.8) 100%
);
}
.backdrop-gradient-pine {
background-image: linear-gradient(
180deg,
hsla(172, 100%, 17%, 0) 0%,
hsla(172, 100%, 17%, 0.034375) 16.36%,
hsla(172, 100%, 17%, 0.125) 33.34%,
hsla(172, 100%, 17%, 0.253125) 50.1%,
hsla(172, 100%, 17%, 0.4) 65.75%,
hsla(172, 100%, 17%, 0.546875) 79.43%,
hsla(172, 100%, 17%, 0.675) 90.28%,
hsla(172, 100%, 17%, 0.765625) 97.43%,
hsla(172, 100%, 17%, 0.8) 100%
hsla(0 0% 35.29% / 0) 0%,
hsla(0 0% 34.53% / 0.034375) 16.36%,
hsla(0 0% 32.42% / 0.125) 33.34%,
hsla(0 0% 29.18% / 0.253125) 50.1%,
hsla(0 0% 24.96% / 0.4) 65.75%,
hsla(0 0% 19.85% / 0.546875) 79.43%,
hsla(0 0% 13.95% / 0.675) 90.28%,
hsla(0 0% 7.32% / 0.765625) 97.43%,
hsla(0 0% 0% / 0.8) 100%
);
}
}
......@@ -24,13 +24,17 @@
@apply relative inline-block px-1 py-2 text-xs text-center cursor-pointer opacity-70 hover:opacity-100;
}
.form-input-tabs > input:focus + label {
@apply ring-accent;
}
.form-input-tabs > input:checked + label::after {
@apply absolute inset-x-0 bottom-0 w-full mx-auto bg-pine-500;
@apply absolute inset-x-0 bottom-0 w-full mx-auto bg-accent-base;
content: "";
height: 0.2rem;
}
.form-input-tabs > input:checked + label {
@apply font-semibold opacity-100 text-pine-500;
@apply font-semibold opacity-100 text-accent-base;
}
}