@firecms/ui 3.0.0-alpha.51 → 3.0.0-alpha.52

package/dist/util/chip_colors.d.ts

@@ -0,0 +1,3 @@
+import { ChipColorKey, ChipColorScheme } from "../components";
+export declare const CHIP_COLORS: Record<string, ChipColorScheme>;
+export declare function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme;

package/dist/util/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./cn";
 export * from "./debounce";
+export * from "./chip_colors";
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@firecms/ui",
-    "version": "3.0.0-alpha.51",
+    "version": "3.0.0-alpha.52",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -115,7 +115,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "d47d8dad9356b48398b65559b7a59926f3d50373",
+    "gitHead": "347fb05aab3d2c4399ba9370f10c6d142c4721f6",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { CHIP_COLORS, cn, getColorSchemeForKey } from "../util";
 
 export type ChipColorScheme = {
     color: string;
@@ -25,52 +25,6 @@ const sizeClassNames = {
     medium: "px-4 py-1.5 text-sm"
 }
 
-export const CHIP_COLORS: Record<string, ChipColorScheme> = {
-    blueLighter: { color: "#cfdfff", text: "#102046" },
-    cyanLighter: { color: "#d0f0fd", text: "#04283f" },
-    tealLighter: { color: "#c2f5e9", text: "#012524" },
-    greenLighter: { color: "#d1f7c4", text: "#0b1d05" },
-    yellowLighter: { color: "#ffeab6", text: "#3b2501" },
-    orangeLighter: { color: "#fee2d5", text: "#6b2613" },
-    redLighter: { color: "#ffdce5", text: "#4c0c1c" },
-    pinkLighter: { color: "#ffdaf6", text: "#400832" },
-    purpleLighter: { color: "#ede2fe", text: "#280b42" },
-    grayLighter: { color: "#eee", text: "#040404" },
-
-    blueLight: { color: "#9cc7ff", text: "#102046" },
-    cyanLight: { color: "#77d1f3", text: "#04283f" },
-    tealLight: { color: "#72ddc3", text: "#012524" },
-    greenLight: { color: "#93e088", text: "#0b1d05" },
-    yellowLight: { color: "#ffd66e", text: "#3b2501" },
-    orangeLight: { color: "#ffa981", text: "#6b2613" },
-    redLight: { color: "#ff9eb7", text: "#4c0c1c" },
-    pinkLight: { color: "#f99de2", text: "#400832" },
-    purpleLight: { color: "#cdb0ff", text: "#280b42" },
-    grayLight: { color: "#ccc", text: "#040404" },
-
-    blueDark: { color: "#2d7ff9", text: "#fff" },
-    cyanDark: { color: "#18bfff", text: "#fff" },
-    tealDark: { color: "#20d9d2", text: "#fff" },
-    greenDark: { color: "#20c933", text: "#fff" },
-    yellowDark: { color: "#fcb400", text: "#fff" },
-    orangeDark: { color: "#ff6f2c", text: "#fff" },
-    redDark: { color: "#f82b60", text: "#fff" },
-    pinkDark: { color: "#ff08c2", text: "#fff" },
-    purpleDark: { color: "#8b46ff", text: "#fff" },
-    grayDark: { color: "#666", text: "#fff" },
-
-    blueDarker: { color: "#2750ae", text: "#cfdfff" },
-    cyanDarker: { color: "#0b76b7", text: "#d0f0fd" },
-    tealDarker: { color: "#06a09b", text: "#daf3e9" },
-    greenDarker: { color: "#338a17", text: "#d1f7c4" },
-    yellowDarker: { color: "#b87503", text: "#ffeab6" },
-    orangeDarker: { color: "#d74d26", text: "#fee2d5" },
-    redDarker: { color: "#ba1e45", text: "#ffdce5" },
-    pinkDarker: { color: "#b2158b", text: "#ffdaf6" },
-    purpleDarker: { color: "#6b1cb0", text: "#ede2fe" },
-    grayDarker: { color: "#444", text: "#eee" }
-};
-
 /**
  * @group Preview components
  */
@@ -106,7 +60,3 @@ export function Chip({
         </div>
     );
 }
-
-export function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme {
-    return CHIP_COLORS[key];
-}

package/src/util/chip_colors.ts

@@ -0,0 +1,51 @@
+import { ChipColorKey, ChipColorScheme } from "../components";
+
+export const CHIP_COLORS: Record<string, ChipColorScheme> = {
+    blueLighter: { color: "#cfdfff", text: "#102046" },
+    cyanLighter: { color: "#d0f0fd", text: "#04283f" },
+    tealLighter: { color: "#c2f5e9", text: "#012524" },
+    greenLighter: { color: "#d1f7c4", text: "#0b1d05" },
+    yellowLighter: { color: "#ffeab6", text: "#3b2501" },
+    orangeLighter: { color: "#fee2d5", text: "#6b2613" },
+    redLighter: { color: "#ffdce5", text: "#4c0c1c" },
+    pinkLighter: { color: "#ffdaf6", text: "#400832" },
+    purpleLighter: { color: "#ede2fe", text: "#280b42" },
+    grayLighter: { color: "#eee", text: "#040404" },
+
+    blueLight: { color: "#9cc7ff", text: "#102046" },
+    cyanLight: { color: "#77d1f3", text: "#04283f" },
+    tealLight: { color: "#72ddc3", text: "#012524" },
+    greenLight: { color: "#93e088", text: "#0b1d05" },
+    yellowLight: { color: "#ffd66e", text: "#3b2501" },
+    orangeLight: { color: "#ffa981", text: "#6b2613" },
+    redLight: { color: "#ff9eb7", text: "#4c0c1c" },
+    pinkLight: { color: "#f99de2", text: "#400832" },
+    purpleLight: { color: "#cdb0ff", text: "#280b42" },
+    grayLight: { color: "#ccc", text: "#040404" },
+
+    blueDark: { color: "#2d7ff9", text: "#fff" },
+    cyanDark: { color: "#18bfff", text: "#fff" },
+    tealDark: { color: "#20d9d2", text: "#fff" },
+    greenDark: { color: "#20c933", text: "#fff" },
+    yellowDark: { color: "#fcb400", text: "#fff" },
+    orangeDark: { color: "#ff6f2c", text: "#fff" },
+    redDark: { color: "#f82b60", text: "#fff" },
+    pinkDark: { color: "#ff08c2", text: "#fff" },
+    purpleDark: { color: "#8b46ff", text: "#fff" },
+    grayDark: { color: "#666", text: "#fff" },
+
+    blueDarker: { color: "#2750ae", text: "#cfdfff" },
+    cyanDarker: { color: "#0b76b7", text: "#d0f0fd" },
+    tealDarker: { color: "#06a09b", text: "#daf3e9" },
+    greenDarker: { color: "#338a17", text: "#d1f7c4" },
+    yellowDarker: { color: "#b87503", text: "#ffeab6" },
+    orangeDarker: { color: "#d74d26", text: "#fee2d5" },
+    redDarker: { color: "#ba1e45", text: "#ffdce5" },
+    pinkDarker: { color: "#b2158b", text: "#ffdaf6" },
+    purpleDarker: { color: "#6b1cb0", text: "#ede2fe" },
+    grayDarker: { color: "#444", text: "#eee" }
+};
+
+export function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme {
+    return CHIP_COLORS[key];
+}

package/src/util/index.ts

@@ -1,4 +1,5 @@
 export * from "./cn";
 export * from "./debounce";
+export * from "./chip_colors";
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";