@fibery/ui-kit 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "index.ts",
   "private": false,
   "files": [

package/src/create-inline-theme.ts

@@ -1,3 +1,6 @@
+declare const VAR_THEME_PREFIX: string | undefined;
+export const varPrefix = typeof VAR_THEME_PREFIX === "string" ? VAR_THEME_PREFIX : "fibery";
+
 export function createInlineTheme<T extends Record<string, unknown>>(
   themes: T,
   rejectKeys: Array<string>
@@ -9,54 +12,54 @@ export function createInlineTheme<T extends Record<string, unknown>>(
 
     if (key === "opacity") {
       Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
-        inlineTheme[`--fibery-opacity-${opacityKey}`] = opacityValue;
+        inlineTheme[`--${varPrefix}-opacity-${opacityKey}`] = opacityValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "stateColors") {
       Object.entries(themes.stateColors as Record<string, string>).forEach(([stateColorKey, stateColorValue]) => {
-        inlineTheme[`--fibery-state-colors-${stateColorKey}`] = stateColorValue;
+        inlineTheme[`--${varPrefix}-state-colors-${stateColorKey}`] = stateColorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "brandColors") {
       Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
-        inlineTheme[`--fibery-brand-colors-${brandColorKey}`] = brandColorValue;
+        inlineTheme[`--${varPrefix}-brand-colors-${brandColorKey}`] = brandColorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "shades") {
       Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
-        inlineTheme[`--fibery-shades-${shadeKey}`] = shadeValue;
+        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "lights") {
       Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
-        inlineTheme[`--fibery-lights-${lightKey}`] = lightValue;
+        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "separators") {
       Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--fibery-separator-${separatorKey}`] = separatorValue;
+        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "inversedSeparators") {
       Object.entries(themes.inversedSeparators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--fibery-inversed-separators-${separatorKey}`] = separatorValue;
+        inlineTheme[`--${varPrefix}-inversed-separators-${separatorKey}`] = separatorValue;
       }, "");
 
       return inlineTheme;
     }
-    inlineTheme[`--fibery-color-${key}`] = value as string;
+    inlineTheme[`--${varPrefix}-color-${key}`] = value as string;
     return inlineTheme;
   }, {});
 }

package/src/designSystem.ts

@@ -18,7 +18,7 @@ import {
   yellowDark,
 } from "./Pallete";
 import _ from "lodash";
-import {createInlineTheme as createInlineStyles} from "./create-inline-theme";
+import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 
 export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
 
@@ -688,37 +688,43 @@ export const getObjectColorMemoized = _.memoize((name) => {
 export const themeVars = Object.keys(getThemeColors(brandColors.green, "light")).reduce((vars, key) => {
   if (key === "opacity") {
     vars[key] = Object.fromEntries(
-      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--fibery-opacity-${opacityKey})`])
+      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
     );
   } else if (key === "stateColors") {
     vars[key] = Object.fromEntries(
-      Object.keys(stateColors).map((stateColorKey) => [stateColorKey, `var(--fibery-state-colors-${stateColorKey})`])
+      Object.keys(stateColors).map((stateColorKey) => [
+        stateColorKey,
+        `var(--${varPrefix}-state-colors-${stateColorKey})`,
+      ])
     );
   } else if (key === "brandColors") {
     vars[key] = Object.fromEntries(
-      Object.keys(brandColors).map((brandColorKey) => [brandColorKey, `var(--fibery-brand-colors-${brandColorKey})`])
+      Object.keys(brandColors).map((brandColorKey) => [
+        brandColorKey,
+        `var(--${varPrefix}-brand-colors-${brandColorKey})`,
+      ])
     );
   } else if (key === "shades") {
     vars[key] = Object.fromEntries(
-      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--fibery-shades-${shadeKey})`])
+      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
     );
   } else if (key === "lights") {
     vars[key] = Object.fromEntries(
-      Object.keys(lights).map((lightKey) => [lightKey, `var(--fibery-lights-${lightKey})`])
+      Object.keys(lights).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
     );
   } else if (key === "separators") {
     vars[key] = Object.fromEntries(
-      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--fibery-separator-${separatorKey})`])
+      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
     );
   } else if (key === "inversedSeparators") {
     vars[key] = Object.fromEntries(
       Object.keys(inversedSeparators).map((separatorKey) => [
         separatorKey,
-        `var(--fibery-inversed-separator-${separatorKey})`,
+        `var(--${varPrefix}-inversed-separator-${separatorKey})`,
       ])
     );
   } else {
-    vars[key] = `var(--fibery-color-${key})`;
+    vars[key] = `var(--${varPrefix}-color-${key})`;
   }
   return vars;
 }, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;