rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update rich editor style to be lighter and closer to printed doc

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-03 16:40:35 +04:00
parent 6d1a7c846d
commit 5359fe9931
13 changed files with 118 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
packages/ui/src/theme.css
View File

@@ -171,79 +171,112 @@
0px 2px 12px 0px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
:root {
--color-level-0: #151715;
--color-level-1: #1a1d19;
--color-level-2: #20241f;
--color-level-3: #3b3f3a;
@custom-variant document (&:where([data-theme=document] *));
--color-black: #ffffff;
@layer theme {
:root, :host {
@variant dark {
--color-level-0: #151715;
--color-level-1: #1a1d19;
--color-level-2: #20241f;
--color-level-3: #3b3f3a;
/* Text colors */
--color-txt-primary: #eceeec;
--color-invert: #151715;
--color-txt-invert: #fcfdfc;
--color-txt-secondary: #9aa299;
--color-txt-tertiary: #778175;
--color-txt-quaternary: #4c514b;
--color-txt-disabled: #3b3f3a;
--color-txt-accent: #c4f042;
--color-txt-danger: #ff6369;
--color-txt-success: rgba(181, 255, 44, 0.72);
--color-txt-info: #52a9ff;
--color-txt-warning: #f1a10d;
--color-black: #ffffff;
/* Backgrounds */
--color-primary: #c4f042;
--color-invert: #151715;
--color-secondary: rgba(214, 251, 196, 0.06);
--color-tertiary: rgba(255, 255, 255, 0);
--color-subtle: rgba(213, 254, 175, 0.03);
--color-highlight: rgba(214, 251, 196, 0.06);
--color-active: rgba(239, 254, 226, 0.08);
--color-accent: #c4f042;
--color-danger: rgba(254, 58, 61, 0.13);
--color-danger-plain: rgba(254, 58, 61, 0.13);
--color-danger-dark: rgba(255, 89, 95, 0.94);
--color-success: rgba(184, 253, 106, 0.06);
--color-info: rgba(22, 119, 254, 0.14);
--color-warning: rgba(254, 115, 0, 0.09);
--color-dialog: #151715;
/* Text colors */
--color-txt-primary: #eceeec;
--color-invert: #151715;
--color-txt-invert: #fcfdfc;
--color-txt-secondary: #9aa299;
--color-txt-tertiary: #778175;
--color-txt-quaternary: #4c514b;
--color-txt-disabled: #3b3f3a;
--color-txt-accent: #c4f042;
--color-txt-danger: #ff6369;
--color-txt-success: rgba(181, 255, 44, 0.72);
--color-txt-info: #52a9ff;
--color-txt-warning: #f1a10d;
/* Borders */
--color-border-solid: rgba(239, 254, 226, 0.08);
--color-border-low: rgba(239, 254, 226, 0.08);
--color-border-mid: rgba(233, 254, 223, 0.1);
--color-border-strong: rgba(241, 255, 237, 0.25);
--color-border-active: rgba(253, 255, 253, 0.93);
--color-border-accent: #c4f042;
--color-border-danger: #f2555a;
--color-border-success: #c4f042;
--color-border-warning: #ffcb47;
--color-border-info: #369eff;
/* Backgrounds */
--color-primary: #c4f042;
--color-invert: #151715;
--color-secondary: rgba(214, 251, 196, 0.06);
--color-tertiary: rgba(255, 255, 255, 0);
--color-subtle: rgba(213, 254, 175, 0.03);
--color-highlight: rgba(214, 251, 196, 0.06);
--color-active: rgba(239, 254, 226, 0.08);
--color-accent: #c4f042;
--color-danger: rgba(254, 58, 61, 0.13);
--color-danger-plain: rgba(254, 58, 61, 0.13);
--color-danger-dark: rgba(255, 89, 95, 0.94);
--color-success: rgba(184, 253, 106, 0.06);
--color-info: rgba(22, 119, 254, 0.14);
--color-warning: rgba(254, 115, 0, 0.09);
--color-dialog: #151715;
/* Hover */
--color-primary-hover: rgba(196, 240, 66, 0.88);
--color-invert-hover: #1a1d19;
--color-secondary-hover: rgba(214, 251, 196, 0.06);
--color-tertiary-hover: rgba(213, 254, 175, 0.03);
--color-subtle-hover: rgba(214, 251, 196, 0.06);
--color-highlight-hover: rgba(233, 254, 223, 0.1);
--color-accent-hover: rgba(183, 255, 50, 0.82);
--color-active-hover: rgba(233, 254, 223, 0.1);
--color-danger-hover: rgba(254, 58, 61, 0.7);
/* Borders */
--color-border-solid: rgba(239, 254, 226, 0.08);
--color-border-low: rgba(239, 254, 226, 0.08);
--color-border-mid: rgba(233, 254, 223, 0.1);
--color-border-strong: rgba(241, 255, 237, 0.25);
--color-border-active: rgba(253, 255, 253, 0.93);
--color-border-accent: #c4f042;
--color-border-danger: #f2555a;
--color-border-success: #c4f042;
--color-border-warning: #ffcb47;
--color-border-info: #369eff;
/* Pressed */
--color-primary-pressed: rgba(196, 240, 66, 0.84);
--color-invert-pressed: #20241f;
--color-secondary-pressed: rgba(239, 254, 226, 0.08);
--color-tertiary-pressed: rgba(214, 251, 196, 0.06);
--color-subtle-pressed: rgba(239, 254, 226, 0.08);
--color-highlight-pressed: rgba(236, 254, 229, 0.13);
--color-accent-pressed: rgba(209, 255, 70, 0.94);
--color-active-pressed: rgba(236, 254, 229, 0.13);
--color-danger-pressed: rgba(254, 58, 61, 0.5);
/* Hover */
--color-primary-hover: rgba(196, 240, 66, 0.88);
--color-invert-hover: #1a1d19;
--color-secondary-hover: rgba(214, 251, 196, 0.06);
--color-tertiary-hover: rgba(213, 254, 175, 0.03);
--color-subtle-hover: rgba(214, 251, 196, 0.06);
--color-highlight-hover: rgba(233, 254, 223, 0.1);
--color-accent-hover: rgba(183, 255, 50, 0.82);
--color-active-hover: rgba(233, 254, 223, 0.1);
--color-danger-hover: rgba(254, 58, 61, 0.7);
/* Pressed */
--color-primary-pressed: rgba(196, 240, 66, 0.84);
--color-invert-pressed: #20241f;
--color-secondary-pressed: rgba(239, 254, 226, 0.08);
--color-tertiary-pressed: rgba(214, 251, 196, 0.06);
--color-subtle-pressed: rgba(239, 254, 226, 0.08);
--color-highlight-pressed: rgba(236, 254, 229, 0.13);
--color-accent-pressed: rgba(209, 255, 70, 0.94);
--color-active-pressed: rgba(236, 254, 229, 0.13);
--color-danger-pressed: rgba(254, 58, 61, 0.5);
}
}
* {
@variant document {
--text-4xl: 16pt;
--text-4xl--line-height: 21pt;
--text-4xl--letter-spacing: -0.6px;
--text-3xl: 15pt;
--text-3xl--line-height: 21pt;
--text-3xl--letter-spacing: -0.4px;
--text-2xl: 14pt;
--text-2xl--line-height: 21pt;
--text-2xl--letter-spacing: 0;
--text-xl: 13pt;
--text-xl--line-height: 18pt;
--text-xl--letter-spacing: 0;
--text-lg: 12pt;
--text-lg--line-height: 18pt;
--text-lg--letter-spacing: 0;
--text-base: 11pt;
--text-base--line-height: 18pt;
--text-base--letter-spacing: 0;
--text-sm: 10pt;
--text-sm--line-height: 15pt;
--text-sm--letter-spacing: 0;
--text-xs: 9pt;
--text-xs--line-height: 15pt;
--text-xs--letter-spacing: 0;
}
}
}