@firecms/ui 3.0.0-beta.8 → 3.0.0-beta.9

package/src/index.css

@@ -0,0 +1,77 @@
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.typography-h1 {
+    @apply text-6xl font-headers font-light;
+}
+
+.typography-h2 {
+    @apply text-5xl font-headers font-light;
+}
+
+.typography-h3 {
+    @apply text-4xl font-headers font-normal;
+}
+
+.typography-h4 {
+    @apply text-3xl font-headers font-normal;
+}
+
+.typography-h5 {
+    @apply text-2xl font-headers font-normal;
+}
+
+.typography-h6 {
+    @apply text-xl font-headers font-medium;
+}
+
+.typography-subtitle1 {
+    @apply text-lg font-headers font-medium;
+}
+
+.typography-subtitle2 {
+    @apply text-base font-headers font-medium;
+}
+
+.typography-body1 {
+}
+
+.typography-body2 {
+    @apply text-sm;
+}
+
+.typography-caption {
+    @apply text-xs;
+}
+
+.typography-label {
+    @apply text-sm font-medium;
+}
+
+.typography-inherit {
+    @apply text-inherit;
+}
+
+.typography-button {
+    @apply text-sm font-medium;
+}
+
+
+: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
+}
+
+body {
+    @apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
+}

package/src/scripts/generateIconKeys.ts

@@ -2,17 +2,27 @@ import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 
+const extractIconKeys = (cssData: string): string[] => {
+    const iconKeys: string[] = [];
+    console.log("cssData", cssData);
+    const regex = /\.mi-(.*?)::before/g;
+    let match;
+
+    while ((match = regex.exec(cssData)) !== null) {
+        if (match[1]) {
+            iconKeys.push(match[1].replaceAll("-", "_"));
+        }
+    }
+
+    return iconKeys;
+};
+
 //https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints
-export function generateIconKeys() {
-    return fetch("https://raw.githubusercontent.com/google/material-design-icons/master/variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints")
-        .then((response) => response.text())
-        .then((text) => {
-            const lines = text.split("\n");
-            const words = lines.map((line) => line.split(" ")[0]);
-            const keys = words.filter(Boolean).filter((word) => word !== "addchart");
-            saveIconKeys(keys);
-            return keys;
-        });
+export async function generateIconKeys() {
+    const cssData = await fs.promises.readFile("../../node_modules/material-icons/css/material-icons.css", 'utf-8');
+    const keys = extractIconKeys(cssData);
+    saveIconKeys(keys);
+    return keys;
 }
 
 function saveIconKeys(keys: string[]) {

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 focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 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-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
 export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
-export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
+export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
 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-80 border-gray-100";
 export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";

package/tailwind.config.js

@@ -58,9 +58,9 @@ export default {
                     300: "#B7B7BF",
                     400: "#A0A0A9",
                     500: "#87878F",
-                    600: "#6C6C75",
-                    700: "#505058",
-                    800: "#35353A",
+                    600: "#6B6B74",
+                    700: "#454552",
+                    800: "#292934",
                     900: "#18181C",
                     950: "#101013"
                 }