Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances event color styling with flexible metadata system

Browse source 
Introduces a new color customization approach for calendar events using CSS custom properties and metadata

- Adds support for dynamic color assignment via event metadata
- Implements a flexible color utility class system
- Replaces hardcoded event type colors with a more generic color-mix() approach
- Provides broader color palette for event styling
This commit is contained in:
Janus C. H. Knudsen 2025-11-25 23:48:30 +01:00
parent d8b9f6dabd
commit be551f88e5
7 changed files with 269 additions and 4135 deletions
Download patch file Download diff file Expand all files Collapse all files

147
.workbench/event-colors.txt Normal file
View file

@ -0,0 +1,147 @@
<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8" />
<title>Event Farvesystem Demo</title>
<style>
:root {
/* Palette */
--b-color-red: #e53935;
--b-color-pink: #d81b60;
--b-color-magenta: #c200c2;
--b-color-purple: #8e24aa;
--b-color-violet: #5e35b1;
--b-color-deep-purple: #4527a0;
--b-color-indigo: #3949ab;
--b-color-blue: #1e88e5;
--b-color-light-blue: #03a9f4;
--b-color-cyan: #3bc9db;
--b-color-teal: #00897b;
--b-color-green: #43a047;
--b-color-light-green: #8bc34a;
--b-color-lime: #c0ca33;
--b-color-yellow: #fdd835;
--b-color-amber: #ffb300;
--b-color-orange: #fb8c00;
--b-color-deep-orange: #f4511e;
/* Basismix (lysning). Kan skiftes til #000 for mørkning */
--b-mix: #fff;
}
body {
font-family: system-ui, sans-serif;
background: #f3f3f3;
margin: 0;
padding: 2rem;
}
h1 { margin-top: 0; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
/* -----------------------------------------------------------
EVENT KOMPONENT
----------------------------------------------------------- */
.event {
--b-text: var(--b-primary);
display: flex;
border-radius: .5rem;
overflow: hidden;
cursor: pointer;
padding: 1rem 1rem 1rem .75rem;
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
color: var(--b-text);
border-left: 6px solid var(--b-primary);
transition:
background-color .2s ease,
border-color .2s ease;
}
.event:hover {
background-color: color-mix(in srgb, var(--b-primary) 25%, var(--b-mix));
}
.event-title {
font-weight: 600;
margin-bottom: .25rem;
}
.event-meta {
font-size: .85rem;
opacity: .8;
}
/* -----------------------------------------------------------
eksempel på UTILITY-KLASSER
----------------------------------------------------------- */
.is-red { --b-primary: var(--b-color-red); }
.is-blue { --b-primary: var(--b-color-blue); }
.is-green { --b-primary: var(--b-color-green); }
.is-magenta { --b-primary: var(--b-color-magenta); }
.is-amber { --b-primary: var(--b-color-amber); }
.is-orange { --b-primary: var(--b-color-orange); }
</style>
</head>
<body>
<h1>Event Farvesystem Demo</h1>
<p>Baggrunden er dæmpet primærfarve, hover gør den mørkere, venstre kant og tekst bruger den rene farve.</p>
<div class="grid">
<div class="event is-blue">
<div>
<div class="event-title">Blå event</div>
<div class="event-meta">.is-blue</div>
</div>
</div>
<div class="event is-red">
<div>
<div class="event-title">Rød event</div>
<div class="event-meta">.is-red</div>
</div>
</div>
<div class="event is-green">
<div>
<div class="event-title">Grøn event</div>
<div class="event-meta">.is-green</div>
</div>
</div>
<div class="event is-magenta">
<div>
<div class="event-title">Magenta event</div>
<div class="event-meta">.is-magenta</div>
</div>
</div>
<div class="event is-amber">
<div>
<div class="event-title">Amber event</div>
<div class="event-meta">.is-amber</div>
</div>
</div>
<div class="event is-orange">
<div>
<div class="event-title">Orange event</div>
<div class="event-meta">.is-orange</div>
</div>
</div>
</div>
</body>
</html>