Fix: Beer Sale Report

bookie/src/square-buttons.sass

@@ -0,0 +1,63 @@
+// square-buttons.sass
+
+@use 'sass:color'
+@use 'sass:math'
+@use 'sass:map'
+@use '@angular/material' as mat
+
+@function get-on-color($background)
+  $r: math.div(color.channel($background, "red", $space: rgb), 255)
+  $g: math.div(color.channel($background, "green", $space: rgb), 255)
+  $b: math.div(color.channel($background, "blue", $space: rgb), 255)
+  $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b
+
+  @if ($l > 0.5)
+    @return #000
+  @else
+    @return #fff
+
+.square-button
+  min-width: 150px
+  max-width: 150px
+  min-height: 150px
+  max-height: 150px
+  cursor: pointer
+  h3
+    text-align: center
+    padding: 0.5rem
+  span
+    text-align: center
+
+.square-button.primary
+  $sbp: map.get(mat.$violet-palette, 70)
+  color: get-on-color($sbp) !important
+  background: $sbp !important
+
+.square-button.strong-primary
+  $sbsp: map.get(mat.$violet-palette, 20)
+  color: get-on-color($sbsp) !important
+  background: $sbsp !important
+
+.accent
+  $a: map.get(mat.$orange-palette, 70)
+  color: get-on-color($a) !important
+  background: $a !important
+
+.strong-accent
+  $sa: map.get(mat.$orange-palette, 20)
+  color: get-on-color($sa) !important
+  background: $sa !important
+
+.square-button.warn
+  $sbw: map.get(mat.$red-palette, 70)
+  color: get-on-color($sbw) !important
+  background: $sbw !important
+
+.square-button.strong-warn
+  $sbsw: map.get(mat.$red-palette, 20)
+  color: get-on-color($sbsw) !important
+  background: $sbsw !important
+
+.square-button.disabled
+  color: var(--mat-sys-on-outline) !important
+  background: var(--mat-sys-outline) !important