Added natural colors presets

src/myfasthtml/assets/core/dsleditor.css

@@ -213,41 +213,117 @@
 /* *********************************************** */
 
 .mf-formatting-primary {
-    background-color: var(--color-primary);
+    background-color: color-mix(in oklab, var(--color-primary) 65%, #0000);
-    color: var(--color-primary-content)
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-accent {
     background-color: var(--color-accent);
     color: var(--color-accent-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-neutral {
     background-color: var(--color-neutral);
     color: var(--color-neutral-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-info {
     background-color: var(--color-info);
     color: var(--color-info-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-success {
     background-color: var(--color-success);
     color: var(--color-success-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-content);
+    border-radius: 0.375rem;
 }
 
 .mf-formatting-error {
     background-color: var(--color-error);
     color: var(--color-error-content);
+    border-radius: 0.375rem;
+}
+
+
+.mf-formatting-red {
+    background-color: color-mix(in oklab, red 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+
+.mf-formatting-red {
+    background-color: color-mix(in oklab, red 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-blue {
+    background-color: color-mix(in oklab, blue 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-green {
+    background-color: color-mix(in oklab, green 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-yellow {
+    background-color: color-mix(in oklab, yellow 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-orange {
+    background-color: color-mix(in oklab, orange 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-purple {
+    background-color: color-mix(in oklab, purple 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-pink {
+    background-color: color-mix(in oklab, pink 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-gray {
+    background-color: color-mix(in oklab, gray 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-black {
+    background-color: black;
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-white {
+    background-color: white;
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
 }

src/myfasthtml/assets/datagrid/datagrid.css

@@ -46,6 +46,7 @@
     text-align: inherit;
     width: 100%;
     padding-right: 10px;
+    padding-left: 10px;
 }
 
 .dt2-cell-content-checkbox {

src/myfasthtml/core/formatting/presets.py

@@ -2,30 +2,24 @@
 # Keys use CSS property names (with hyphens)
 
 DEFAULT_STYLE_PRESETS = {
-    "primary": {
+    "primary": {"__class__": "mf-formatting-primary", },
-        "__class__": "mf-formatting-primary",
+    "secondary": {"__class__": "mf-formatting-secondary", },
-    },
+    "accent": {"__class__": "mf-formatting-accent", },
-    "secondary": {
+    "neutral": {"__class__": "mf-formatting-neutral", },
-        "__class__": "mf-formatting-secondary",
+    "info": {"__class__": "mf-formatting-info", },
-    },
+    "success": {"__class__": "mf-formatting-success", },
-    "accent": {
+    "warning": {"__class__": "mf-formatting-warning", },
-        "__class__": "mf-formatting-accent",
+    "error": {"__class__": "mf-formatting-error", },
-    },
+    "red": {"__class__": "mf-formatting-red", },
-    "neutral": {
+    "blue": {"__class__": "mf-formatting-blue", },
-        "__class__": "mf-formatting-neutral",
+    "green": {"__class__": "mf-formatting-green", },
-    },
+    "yellow": {"__class__": "mf-formatting-yellow", },
-    "info": {
+    "orange": {"__class__": "mf-formatting-orange", },
-        "__class__": "mf-formatting-info",
+    "purple": {"__class__": "mf-formatting-purple", },
-    },
+    "pink": {"__class__": "mf-formatting-pink", },
-    "success": {
+    "gray": {"__class__": "mf-formatting-gray", },
-        "__class__": "mf-formatting-success",
+    "black": {"__class__": "mf-formatting-black", },
-    },
+    "white": {"__class__": "mf-formatting-white", },
-    "warning": {
-        "__class__": "mf-formatting-warning",
-    },
-    "error": {
-        "__class__": "mf-formatting-error",
-    },
 }
 
 # === Formatter Presets ===