From 34aa9136dba6b0e1d54f657e24ea4ae77f6c406e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 18:48:49 +0200
Subject: refactored most of the CSS stuff into separate file, refactored color
 functions and added shadow functions, replaced JS functions in button with
 PISS functions

---
 src/services/theme_data/css_utils.js | 43 ++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/services/theme_data/css_utils.js

(limited to 'src/services/theme_data/css_utils.js')

diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
new file mode 100644
index 00000000..8b061f8f
--- /dev/null
+++ b/src/services/theme_data/css_utils.js
@@ -0,0 +1,43 @@
+import { convert } from 'chromatism'
+
+import { rgba2css } from '../color_convert/color_convert.js'
+
+export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
+
+export const getCssShadow = (input, usesDropShadow) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px ').concat([
+      getCssColorString(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
+}
+
+export const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColorString(shad.color, shad.alpha)
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
+}
-- 
cgit v1.2.3-70-g09d2