@alignui/cli 0.0.1-alpha.6 → 0.0.1-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alignui/cli",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.8",
   "description": "A command line interface to setup AlignUI",
   "main": "dist/index.js",
   "type": "module",

package/src/utils/color-helpers.ts

@@ -15,9 +15,9 @@ export function formatHslColor(hex: string): string {
     .split(', ');
 
   if (color?.alpha) {
-    return `${h} ${s}% ${l}% / ${percentageFormat(color.alpha)}`;
+    return `${h} ${s} ${l} / ${percentageFormat(color.alpha)}`;
   }
-  return `${h} ${s}% ${l}%`;
+  return `${h} ${s} ${l}`;
 }
 
 export function formatRgbColor(hex: string): string {

package/src/utils/templates.ts

@@ -299,15 +299,15 @@ export const GLOBALS_CSS = `@tailwind base;
     --black-alpha-16: <%- black['alpha-16'] %>;
     --black-alpha-10: <%- black['alpha-10'] %>;
 
-    --overlay: 209 84% 5% / 24%;
+    --overlay: <%- overlay['default-light'] %>;
 
-    --social-apple: 0 0% 0%;
-    --social-twitter: 0 0% 0.4%;
-    --social-github: 210 10% 17%;
-    --social-notion: 210 10% 14%;
-    --social-tidal: 0 0% 0%;
-    --social-amazon: 209 14% 25%;
-    --social-zendesk: 38 15% 7%;
+    --social-apple: <%- social['apple-light'] %>;
+    --social-twitter: <%- social['twitter-light'] %>;
+    --social-github: <%- social['github-light'] %>;
+    --social-notion: <%- social['notion-light'] %>;
+    --social-tidal: <%- social['tidal-light'] %>;
+    --social-amazon: <%- social['amazon-light'] %>;
+    --social-zendesk: <%- social['zendesk-light'] %>;
 
     --primary-dark: var(--<%- primaryColor %>-800);
     --primary-darker: var(--<%- primaryColor %>-700);
@@ -466,6 +466,16 @@ export const GLOBALS_CSS = `@tailwind base;
     --stable-base: var(--teal-600);
     --stable-light: var(--teal-alpha-24);
     --stable-lighter: var(--teal-alpha-16);
+
+    --overlay: <%- overlay['default-dark'] %>;
+    
+    --social-apple: <%- social['apple-dark'] %>;
+    --social-twitter: <%- social['twitter-dark'] %>;
+    --social-github: <%- social['github-dark'] %>;
+    --social-notion: <%- social['notion-dark'] %>;
+    --social-tidal: <%- social['tidal-dark'] %>;
+    --social-amazon: <%- social['amazon-dark'] %>;
+    --social-zendesk: <%- social['zendesk-dark'] %>;
   }
   /*#endregion Colors */
 }

package/src/utils/tokens.ts

@@ -174,6 +174,26 @@ export const rawHexColors = {
     black: '#000',
     white: '#fff',
   },
+  social: {
+    'apple-light': '#000',
+    'apple-dark': '#fff',
+    'twitter-light': '#010101',
+    'twitter-dark': '#fff',
+    'github-light': '#24292f',
+    'github-dark': '#fff',
+    'notion-light': '#1e2226',
+    'notion-dark': '#fff',
+    'tidal-light': '#000',
+    'tidal-dark': '#fff',
+    'amazon-light': '#353e47',
+    'amazon-dark': '#fff',
+    'zendesk-light': '#16140d',
+    'zendesk-dark': '#fff',
+  },
+  overlay: {
+    'default-light': '#020d173d',
+    'default-dark': '#52586652',
+  },
 };
 
 export const tailwindColorsHex = {