@firecms/ui 3.3.0-canary.d3242eb → 3.4.0-canary.63041d0

package/src/index.css

@@ -19,26 +19,26 @@
     --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);
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
     --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);
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
 
     /* 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;
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #2e2e33;
+    --color-surface-800: #1f1f23;
+    --color-surface-900: #131316;
+    --color-surface-950: #0d0d0f;
 
     /* Surface Accent Colors */
     --color-surface-accent-50: #f8fafc;
@@ -50,8 +50,18 @@
     --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;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}
+
+/* Native UI (scrollbars, form controls) must follow the active theme,
+   otherwise Chrome renders light scrollbars in dark mode */
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
 }
 
 /* Chrome, Safari and Opera */
@@ -65,50 +75,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-medium;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -116,10 +127,10 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold uppercase;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 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 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 fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-90 dark:bg-surface-800/90";
 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 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ";
 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";