Enhance: Color system (#6821)

* refactor: remove redundant utility classes

* chore: expose tailwind colors to css vars

* refactor: introduce error/warning/success colors

* fix: move tailwind utilities import

* fix: extend tailwind font sizes

* fix: exclude color classes from purge

* refactor: admonition component

* fix: admonition warning color

* fix: notification icon color

* fix: capitalize icon title

* chore: remove caution color

* feat: highlighting system

* chore: add color title and remove comment

* chore: add color translations

* chore: add missing bg classes

* refactor: highlight system

* fix: color id

* fix: bg color value

* fix: pdf highlight colors

* fix: resolve conflicts

* fix: class directive typo
This commit is contained in:
Konstantinos
2022-10-07 06:54:06 +03:00
committed by GitHub
parent 35763e75ce
commit 6007d6061f
19 changed files with 196 additions and 500 deletions

View File

@@ -1,11 +1,11 @@
@import "_viewer.css";
:root {
--ph-highlight-color-blue: #55b8fe;
--ph-highlight-color-green: #46da48;
--ph-highlight-color-red: #fd709a;
--ph-highlight-color-purple: #ac8cf1;
--ph-highlight-color-yellow: #fcd713;
--ph-highlight-color-blue: var(--color-blue-100);
--ph-highlight-color-green: var(--color-green-100);
--ph-highlight-color-red: var(--color-red-100);
--ph-highlight-color-purple: var(--color-purple-100);
--ph-highlight-color-yellow: var(--color-yellow-100);
--ph-highlight-scroll-into-color: rgba(255, 75, 93, 0.67);
@@ -385,23 +385,23 @@ input::-webkit-inner-spin-button {
}
&[data-color=yellow] {
background-color: var(--ph-highlight-color-yellow);
background-color: var(--color-yellow-500);
}
&[data-color=blue] {
background-color: var(--ph-highlight-color-blue);
background-color: var(--color-blue-500);
}
&[data-color=green] {
background-color: var(--ph-highlight-color-green);
background-color: var(--color-green-500);
}
&[data-color=red] {
background-color: var(--ph-highlight-color-red);
background-color: var(--color-red-500);
}
&[data-color=purple] {
background-color: var(--ph-highlight-color-purple);
background-color: var(--color-purple-500);
}
}
}