@firecms/ui 3.0.0-alpha.72 → 3.0.0-alpha.74

package/src/components/Tabs.tsx

@@ -19,7 +19,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
         <TabsPrimitive.List className={cn(
-            "flex text-sm font-medium text-center text-gray-800 dark:text-gray-200",
+            "flex text-sm font-medium text-center text-slate-800 dark:text-slate-200",
             className)
         }>
             {children}
@@ -46,15 +46,15 @@ export function Tab({
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
-                                          ? "text-gray-400 dark:text-gray-500"
-                                          : cn("text-gray-700 dark:text-gray-300",
-                                              "data-[state=active]:text-gray-900 data-[state=active]:dark:text-gray-100",
-                                              "hover:text-gray-800 dark:hover:text-gray-200"),
-                                      // disabled ? "text-gray-400 dark:text-gray-500" : "data-[state=active]:text-primary",
-                                      // "data-[state=active]:bg-gray-50 data-[state=active]:dark:bg-gray-800",
+                                          ? "text-slate-400 dark:text-slate-500"
+                                          : cn("text-slate-700 dark:text-slate-300",
+                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-slate-100",
+                                              "hover:text-slate-800 dark:hover:text-slate-200"),
+                                      // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
+                                      // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
         <div className={cn("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-gray-100 dark:hover:bg-gray-800")}>
+            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

package/src/components/TextField.tsx

@@ -100,7 +100,7 @@ export function TextField<T extends string | number>({
             className={cn(
                 invisible ? focusedInvisibleMixin : focusedMixin,
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
-                disabled && "border border-transparent outline-none opacity-50 text-gray-600 dark:text-gray-500"
+                disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
         />
         : <input
@@ -118,7 +118,7 @@ export function TextField<T extends string | number>({
                 label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
-                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-gray-800 dark:text-gray-200",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-slate-200",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}

package/src/components/Tooltip.tsx

@@ -44,12 +44,12 @@ export const Tooltip = ({
                     <TooltipPrimitive.Content
                         className={cn("TooltipContent",
                             "max-w-lg leading-relaxed",
-                            "z-50 rounded px-3 py-2 text-xs leading-none bg-gray-700 dark:bg-gray-800 bg-opacity-90 font-medium text-gray-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                            "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
                         side={side}>
                         {title}
-                        {/*<TooltipPrimitive.Arrow className="fill-gray-600"/>*/}
+                        {/*<TooltipPrimitive.Arrow className="fill-slate-600"/>*/}
                     </TooltipPrimitive.Content>
                 </TooltipPrimitive.Portal>
             </TooltipPrimitive.Root>

package/src/components/Typography.tsx

@@ -54,7 +54,7 @@ const variantToClasses = {
     subtitle2: "text-base font-headers font-medium",
     body1: "text-base",
     body2: "text-sm",
-    label: "text-sm font-medium text-gray-500",
+    label: "text-sm font-medium text-slate-500",
     inherit: "text-inherit",
     caption: "text-xs",
     button: "text-sm font-medium"

package/src/components/common/SelectInputLabel.tsx

@@ -3,7 +3,7 @@ import { cn } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
     return <div className={cn("text-sm  font-medium ml-3.5 mb-1",
-        error ? "text-red-500 dark:text-red-600" : "text-gray-500 dark:text-gray-300",)}>
+        error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
         {children}
     </div>;
 }

package/src/scripts/saveIconFiles.ts

@@ -7,8 +7,10 @@ import fs from "fs";
 import path from "path";
 
 import { fileURLToPath } from "url";
+import { keyToIconComponent } from "../util/key_to_icon_component.ts";
 // import { iconKeys } from "../icons/icon_keys.ts";
 
+
 export function saveIconFiles(iconKeys: string[]) {
     const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -19,15 +21,7 @@ export function saveIconFiles(iconKeys: string[]) {
 
 // for each key, generate a file with an Icon ts component
     iconKeys.forEach((key: string) => {
-
-        const startsWithNumber = key.match(/^\d/);
-
-        // convert key to came case
-        const componentName = (startsWithNumber ? "_" : "") +
-            key.split("_").map((word: string) => {
-                return word.charAt(0).toUpperCase() + word.slice(1);
-            }).join("") +
-            "Icon";
+        const componentName = keyToIconComponent(key);
 
         const iconComponent = `import React from "react";
 import { Icon, IconProps } from "../Icon";

package/src/styles.ts

@@ -1,10 +1,10 @@
 export const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-gray-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
+export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
-export const fieldBackgroundDisabledMixin = "bg-opacity-100 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-90 dark:hover:bg-opacity-90";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
+export const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
 export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
 export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 border-gray-100";
 export const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1 border border-transparent";

package/src/util/chip_colors.ts

@@ -1,4 +1,5 @@
 import { ChipColorKey, ChipColorScheme } from "../components";
+import { hashString } from "./hash";
 
 export const CHIP_COLORS: Record<string, ChipColorScheme> = {
     blueLighter: { color: "#cfdfff", text: "#102046" },
@@ -49,3 +50,10 @@ export const CHIP_COLORS: Record<string, ChipColorScheme> = {
 export function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme {
     return CHIP_COLORS[key];
 }
+
+export function getColorSchemeForSeed(seed: string): ChipColorScheme {
+    const hash: number = hashString(seed);
+    const colorKeys = Object.keys(CHIP_COLORS);
+    const index = hash % colorKeys.length;
+    return CHIP_COLORS[colorKeys[index]];
+}

package/src/util/hash.ts

@@ -0,0 +1,11 @@
+export function hashString(str: string): number {
+    let hash = 0;
+    let i;
+    let chr;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+}

package/src/util/index.ts

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

package/src/util/key_to_icon_component.ts

@@ -0,0 +1,11 @@
+export function keyToIconComponent(key: string) {
+    const startsWithNumber = key.match(/^\d/);
+
+    // convert key to came case
+    const componentName = (startsWithNumber ? "_" : "") +
+        key.split("_").map((word: string) => {
+            return word.charAt(0).toUpperCase() + word.slice(1);
+        }).join("") +
+        "Icon";
+    return componentName;
+}