kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added natural colors presets

Browse Source
This commit is contained in:
Kodjo Sossouvi
2026-02-08 23:19:47 +01:00
parent 0119f54f11
commit b0d565589a
3 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/myfasthtml/assets/core/dsleditor.css
View File

@@ -213,41 +213,117 @@
/* *********************************************** */
.mf-formatting-primary {
background-color: var(--color-primary);
color: var(--color-primary-content)
background-color: color-mix(in oklab, var(--color-primary) 65%, #0000);
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;
}

1
src/myfasthtml/assets/datagrid/datagrid.css
View File

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

42
src/myfasthtml/core/formatting/presets.py
View File

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