From 669893079f4f43a04a6a9518a074240b0a30c9eb Mon Sep 17 00:00:00 2001
From: Leonardo Matos <leomp120894@gmail.com>
Date: Thu, 15 Sep 2022 01:19:38 -0300
Subject: [PATCH] feat(storefront): Add brand colors and variations to UnoCSS
 config (utils)

---
 packages/storefront/uno.config.ts | 35 +++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/storefront/uno.config.ts b/packages/storefront/uno.config.ts
index bb697af85..65041a337 100644
--- a/packages/storefront/uno.config.ts
+++ b/packages/storefront/uno.config.ts
@@ -7,6 +7,26 @@ import {
 import presetAttributify from '@unocss/preset-attributify';
 import presetIcons from '@unocss/preset-icons';
 
+const brandColorVariations = [
+  'whiter',
+  'white',
+  'lightest',
+  'lighter',
+  'light',
+  'lighten',
+  'base',
+  'darken',
+  'dark',
+  'darker',
+  'darkest',
+  'black',
+];
+if (global.storefront_color_variations) {
+  Object.keys(global.storefront_color_variations).forEach((variation) => {
+    brandColorVariations.push(variation);
+  });
+}
+
 const genUnoCSSConfig = ({
   brandIcons = 'logos',
   generalIcons = 'heroicons',
@@ -41,6 +61,21 @@ const genUnoCSSConfig = ({
     { 'i-shopping-cart': `i-${generalIcons}:${shoppingCartIcon}` },
     [/^i-([^:]+)$/, ([, icon]) => `i-${generalIcons}:${icon}`],
   ],
+  theme: {
+    colors: ['primary', 'secondary', 'contrast'].reduce((colors, color) => {
+      const colorVariations = ['hover', 'focus', 'inverse'];
+      if (color !== 'contrast') {
+        colorVariations.push(...brandColorVariations);
+      }
+      colors[color] = colorVariations.reduce((colorPalette, variation) => {
+        colorPalette[variation] = `var(--${color}-${variation})`;
+        return colorPalette;
+      }, {
+        DEFAULT: `var(--${color})`,
+      });
+      return colors;
+    }, {}),
+  },
   transformers: [
     transformerDirectives(),
   ],