fix: accessible allocation calendar colours

City-of-Helsinki · May 6, 2024 · be549ea · be549ea
1 parent e02fbda
commit be549ea
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/.../src/spa/recurring-reservations/application-rounds/[id]/allocation/AllocationCalendar.tsx b/.../src/spa/recurring-reservations/application-rounds/[id]/allocation/AllocationCalendar.tsx
@@ -81,40 +81,52 @@ const CalendarSlot = styled.div<{
   ${({ $eventCount, $isAccepted, $isDeclined, $isRelated }) => {
     if ($isAccepted) {
       return css`
-        background-color: var(--color-success);
-        color: var(--color-white);
+        background-color: var(
+          --tilavaraus-allocation-calendar-colour-bg-allocated
+        );
+        color: var(--tilavaraus-allocation-calendar-colour-text-allocated);
       `;
     }
     if ($isRelated) {
       return css`
-        background-color: var(--color-black-70);
-        color: var(--color-white);
+        background-color: var(
+          --tilavaraus-allocation-calendar-colour-bg-allocated-elsewhere
+        );
+        color: var(
+          --tilavaraus-allocation-calendar-colour-text-allocated-elsewhere
+        );
       `;
     }
     if ($isDeclined) {
       return css`
-        background-color: var(--color-black-30);
-        color: var(--color-black);
+        background-color: var(
+          --tilavaraus-allocation-calendar-colour-bg-disabled
+        );
+        color: var(--tilavaraus-allocation-calendar-colour-text-disabled);
       `;
     }
     if ($eventCount && $eventCount > 10) {
       return css`
-        background-color: var(--color-gold-dark);
+        background-color: var(--tilavaraus-allocation-calendar-colour-bg-full);
+        color: var(--tilavaraus-allocation-calendar-colour-text-full);
       `;
     }
-    if ($eventCount && $eventCount > 3) {
+    if ($eventCount && $eventCount > 4) {
       return css`
-        background-color: var(--color-summer-medium-light);
+        background-color: var(--tilavaraus-allocation-calendar-colour-bg-many);
+        color: var(--tilavaraus-allocation-calendar-colour-text-many);
       `;
     }
     if ($eventCount && $eventCount > 1) {
       return css`
-        background-color: var(--color-summer-light);
+        background-color: var(--tilavaraus-allocation-calendar-colour-bg-few);
+        color: var(--tilavaraus-allocation-calendar-colour-text-few);
       `;
     }
     if ($eventCount && $eventCount > 0) {
       return css`
-        background-color: var(--color-tram-light);
+        background-color: var(--tilavaraus-allocation-calendar-colour-bg-one);
+        color: var(--tilavaraus-allocation-calendar-colour-text-one);
       `;
     }
   }}

diff --git a/apps/admin-ui/src/variables.css b/apps/admin-ui/src/variables.css
@@ -64,6 +64,23 @@
   --tilavaraus-event-booking-wish-border: var(--color-gold-dark);
   --tilavaraus-event-booking-internal-border: var(--color-bus-dark);
   --tilavaraus-event-booking-closed-border: var(--color-black);
+
+  /* Allocation calendar colours */
+  --tilavaraus-allocation-calendar-colour-bg-one: #DFF7EB;
+  --tilavaraus-allocation-calendar-colour-text-one: #1A1A1A;
+  --tilavaraus-allocation-calendar-colour-bg-few: #FFDD82;
+  --tilavaraus-allocation-calendar-colour-text-few: #1A1A1A;
+  --tilavaraus-allocation-calendar-colour-bg-many: #DE9621;
+  --tilavaraus-allocation-calendar-colour-text-many: #1A1A1A;
+  --tilavaraus-allocation-calendar-colour-bg-full: #C85029;
+  --tilavaraus-allocation-calendar-colour-text-full: #FFFFFF;
+  --tilavaraus-allocation-calendar-colour-bg-none: #E5E5E5;
+  --tilavaraus-allocation-calendar-colour-bg-disabled: #B2B2B2;
+  --tilavaraus-allocation-calendar-colour-text-disabled: #1A1A1A;
+  --tilavaraus-allocation-calendar-colour-bg-allocated: #006631;
+  --tilavaraus-allocation-calendar-colour-text-allocated: #FFFFFF;
+  --tilavaraus-allocation-calendar-colour-bg-allocated-elsewhere: #1A1A1A;
+  --tilavaraus-allocation-calendar-colour-text-allocated-elsewhere: #FFFFFF;
 }
 
 /* override HDS variables */