fix(frontend): update foreground-mid and bar colors

adfinis · Nov 13, 2024 · d2b42b9 · d2b42b9
1 parent 1161379
commit d2b42b9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/frontend/app/components/loading-icon/template.hbs b/frontend/app/components/loading-icon/template.hbs
@@ -1,7 +1,7 @@
-<div class="loading-icon grid grid-cols-3 gap-0.5 w-60 h-60">
+<div class="loading-icon grid grid-cols-3 gap-0.5 w-40 h-40">
   {{#each (range 0 9)}}
     <div
-      class="loading-dot odd:bg-primary odd:animate-[loading_2s_ease-in-out_infinite] even:bg-secondary even:animate-[loading_1.5s_ease-in-out_infinite] rounded-3xl"
+      class="loading-dot odd:bg-primary odd:animate-[loading_2s_ease-in-out_infinite] even:bg-secondary even:animate-[loading_1.5s_ease-in-out_infinite] rounded-xl"
     />
   {{/each}}
 </div>
diff --git a/frontend/app/components/weekly-overview-day/template.hbs b/frontend/app/components/weekly-overview-day/template.hbs
@@ -3,20 +3,20 @@
   type="button"
   {{on "click" this.click}}
   {{style this.style}}
-  class="weekly-overview-day h-0 w-4 relative cursor-pointer z-10 [&>*]:transition-colors
+  class="weekly-overview-day h-0 w-4 relative cursor-pointer z-10 [&>*]:transition-colors hover:[--percent:--hf-percent] [&.active]:[--percent:--active-percent] focus:[--percent:--hf-percent]
     {{if @active 'active'}}
     {{if @absence 'absence'}}
     {{if @holiday 'holiday'}}
     {{unless @workday 'weekend'}}
     {{if
       @absence
-      'text-[color-mix(in_srgb,rgb(var(--warning))_var(--percent),rgb(var(--white)))] hover:[--percent:80%] focus:[--percent:80%] [--percent:60%] [&.active]:[--percent:100%]'
+      'text-[color-mix(in_srgb,rgb(var(--warning))_var(--percent),rgb(var(--white)))] [--hf-percent:90%] [--percent:65%] [--active-percent:100%]'
       (or
         (if
           @workday
-          'text-[color-mix(in_srgb,rgb(var(--primary))_var(--percent),rgb(var(--background)))] hover:[--percent:90%] focus:[--percent:90%] [--percent:50%] [&.active]:[--percent:100%]'
+          'text-[color-mix(in_srgb,rgb(var(--primary))_var(--percent),rgb(var(--background)))] [--hf-percent:80%] [--percent:50%] [--active-percent:100%]'
         )
-        'text-[color-mix(in_srgb,rgb(var(--background))_var(--percent),color-mix(in_srgb,rgb(var(--foreground)),rgb(var(--foreground-muted))))] [--percent:70%] focus:[--percent:50%] hover:[--percent:50%] [&.active]:[--percent:20%]'
+        'text-[color-mix(in_srgb,rgb(var(--background))_var(--percent),color-mix(in_srgb,rgb(var(--foreground)),rgb(var(--foreground-muted))))] [--percent:65%] [--hf-percent:50%] [--active-percent:30%]'
       )
     }}
     "

diff --git a/frontend/app/components/worktime-balance-chart/component.js b/frontend/app/components/worktime-balance-chart/component.js
@@ -87,18 +87,20 @@ export default class WorktimeBalanceChart extends Component {
         ],
       },
       tooltips: {
-        // TODO: dry this so foreground-mid doesn't need to be hardcoded
-        backgroundColor: `color-mix(in oklab, rgb(${cssvar(
+        backgroundColor: `color-mix(in srgb, rgb(${cssvar(
+          "--background"
+        )}) 20%, color-mix(in srgb, rgb(${cssvar(
           "--foreground"
-        )}), rgb(${cssvar("--foreground-muted")}))`, // foreground-mid
+        )}), rgb(${cssvar("--foreground-muted")})))`, // foreground-mid
         titleFontColor: `rgb(${cssvar("--background")})`,
         bodyFontColor: `rgb(${cssvar("--background-muted")})`,
         displayColors: false,
         cornerRadius: 2,
-        bodyFontFamily: FONT_MONO,
+        bodyFontFamily: FONT_SANS,
         bodyFontSize: 16,
         titleFontFamily: FONT_SANS,
         titleFontSize: 18,
+        titleFontStyle: "normal",
         titleMarginBottom: 10,
         xPadding: 10,
         yPadding: 10,

diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js
@@ -71,7 +71,7 @@ module.exports = {
         black: "rgb(var(--black) / <alpha-value>)",
         // hacky, rethink
         "foreground-mid":
-          "color-mix(in oklab, rgb(var(--foreground)), rgb(var(--foreground-muted)))",
+          "color-mix(in srgb, rgb(var(--background)) 20%, color-mix(in oklab, rgb(var(--foreground)), rgb(var(--foreground-muted))))",
 
         // override border colour used by @tailwindcss/forms
         gray: {