@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/src/icons/components/DatabaseIcon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Icon, IconProps } from "../Icon";
+/**
+ * @group Icons
+ */
+export const DatabaseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+    return <Icon {...props} iconKey={"database"} ref={ref}/>
+});
+
+DatabaseIcon.displayName = "DatabaseIcon";

package/src/icons/index.ts

@@ -3,6 +3,7 @@ export * from "./cool_icon_keys";
 export * from "./Icon";
 export * from "./GitHubIcon";
 export * from "./HandleIcon";
+export * from "./FirestoreIcon";
 export * from "./components/_10kIcon";
 export * from "./components/_10mpIcon";
 export * from "./components/_11mpIcon";
@@ -522,6 +523,7 @@ export * from "./components/DataThresholdingIcon";
 export * from "./components/DataUsageIcon";
 export * from "./components/DatasetIcon";
 export * from "./components/DatasetLinkedIcon";
+export * from "./components/DatabaseIcon";
 export * from "./components/DateRangeIcon";
 export * from "./components/DeblurIcon";
 export * from "./components/DeckIcon";

package/src/index.css

@@ -1,3 +1,59 @@
+@theme {
+    /* Font Families */
+    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
+
+    /* Colors */
+    --color-primary: #0070F4;
+    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
+    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    --color-secondary: #FF5B79;
+    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
+    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+
+    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
+    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
+
+    /* Field Colors */
+    --color-field-disabled: rgb(224 224 226);
+    --color-field-disabled-dark: rgb(35 35 37);
+
+    /* Text Colors */
+    --color-text-primary: rgba(0, 0, 0, 0.87);
+    --color-text-secondary: rgba(0, 0, 0, 0.52);
+    --color-text-disabled: rgba(0, 0, 0, 0.38);
+    --color-text-primary-dark: #ffffff;
+    --color-text-secondary-dark: rgba(255, 255, 255, 0.6);
+    --color-text-disabled-dark: rgba(255, 255, 255, 0.48);
+
+    /* Surface Colors */
+    --color-surface-50: #f8f8fc;
+    --color-surface-100: #e7e7eb;
+    --color-surface-200: #cfcfd6;
+    --color-surface-300: #b7b7bf;
+    --color-surface-400: #a0a0a9;
+    --color-surface-500: #87878f;
+    --color-surface-600: #6b6b74;
+    --color-surface-700: #454552;
+    --color-surface-800: #292934;
+    --color-surface-900: #18181c;
+    --color-surface-950: #101013;
+
+    /* Surface Accent Colors */
+    --color-surface-accent-50: #f8fafc;
+    --color-surface-accent-100: #f1f5f9;
+    --color-surface-accent-200: #e2e8f0;
+    --color-surface-accent-300: #cbd5e1;
+    --color-surface-accent-400: #94a3b8;
+    --color-surface-accent-500: #64748b;
+    --color-surface-accent-600: #475569;
+    --color-surface-accent-700: #334155;
+    --color-surface-accent-800: #1e293b;
+    --color-surface-accent-900: #0f172a;
+    --color-surface-accent-950: #020617;
+}
+
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -63,12 +119,7 @@
     @apply text-sm font-semibold uppercase;
 }
 
-
 :focus-visible {
-    @apply 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
-}
-
-a {
-    @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
 }
 

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-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-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
-export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
+export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
+export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
+export const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";

package/src/util/cls.ts

@@ -2,7 +2,7 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cls(...classes: ClassValue[]) {
-    return twMerge(clsx(classes))
+    return twMerge(clsx(classes));
 }
 
 /**

package/tailwind.config.js

@@ -36,9 +36,8 @@ export default {
                 ]
             },
             colors: {
-                "primary": "var(--fcms-primary)",
-                "primary-bg": "var(--fcms-primary-bg)",
-                "secondary": "var(--fcms-secondary)",
+                "primary": "var(--color-primary)",
+                "secondary": "var(--color-secondary)",
                 "field": {
                     "disabled": "rgb(224 224 226)",
                     "disabled-dark": "rgb(35 35 37)"