mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat(chroma): use cascade layer to allow override via custom.css
This allows users to customize Chroma CSS without building the TailwindCSS manually.
For example, add this to `custom.css`:
```
.chroma,
.chroma,
.chroma:is(.dark *),
.chroma:is(.dark *) * {
color: unset;
background-color: unset;
font-weight: unset;
}
```
Then use:
```
hugo gen chromastyles --style=github | sed 's/\./html.dark ./' >> assets/css/custom.css
hugo gen chromastyles --style=github | sed 's/\./html:not(.dark) ./' >> exampleSite/assets/css/custom.css
```
This commit is contained in:
ZhenShuo Leo
@@ -1,242 +1,6 @@
|
||||
/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
|
||||
/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
|
||||
@layer properties;
|
||||
#zen-mode-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.zen-mode {
|
||||
position: relative;
|
||||
}
|
||||
body.zen-mode-enable {
|
||||
#bmc-wbtn, .author {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.prose .chroma {
|
||||
position: static;
|
||||
border-radius: var(--radius-md);
|
||||
background-color: rgba(var(--color-neutral-50), 1);
|
||||
color: rgba(var(--color-neutral-700), 1);
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-200), 1);
|
||||
}
|
||||
}
|
||||
.chroma .lntd, .chroma .lntd pre {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
--tw-border-style: none;
|
||||
border-style: none;
|
||||
padding: calc(var(--spacing) * 0);
|
||||
vertical-align: top;
|
||||
}
|
||||
.chroma .lntable {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
border-spacing: 0;
|
||||
}
|
||||
.chroma .hl {
|
||||
margin-inline: calc(var(--spacing) * -4);
|
||||
display: block;
|
||||
width: auto;
|
||||
background-color: rgba(var(--color-primary-100), 1);
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-primary-900), 1);
|
||||
}
|
||||
}
|
||||
.chroma .lntd .hl {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.chroma .lnt, .chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding-inline: 0.4em;
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
color: rgba(var(--color-neutral-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .kc {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-600), 1);
|
||||
}
|
||||
}
|
||||
.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
|
||||
color: rgba(var(--color-secondary-900), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-200), 1);
|
||||
}
|
||||
}
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
|
||||
color: rgba(var(--color-secondary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .no, .chroma .ne, .chroma .vg {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .nf {
|
||||
color: rgba(var(--color-secondary-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
|
||||
color: rgba(var(--color-primary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .se {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .sr, .chroma .ss {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-primary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ow {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
font-style: italic;
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ch {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
font-style: italic;
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
.chroma .gh {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
}
|
||||
.chroma .gs {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.chroma .gu, .chroma .gt {
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
}
|
||||
.chroma .gl {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.a11y-panel-enter-active {
|
||||
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.a11y-panel-leave-active {
|
||||
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.ios-toggle {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: #e5e5e5;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ios-toggle input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.ios-toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: 0;
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle input:checked ~ .ios-toggle-ball {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle.is-checked {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked) {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked)::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.dark .ios-toggle {
|
||||
background: #404040;
|
||||
}
|
||||
.dark .ios-toggle::after {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
@@ -3516,6 +3280,244 @@ body.zen-mode-enable {
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.prose .chroma {
|
||||
position: static;
|
||||
border-radius: var(--radius-md);
|
||||
background-color: rgba(var(--color-neutral-50), 1);
|
||||
color: rgba(var(--color-neutral-700), 1);
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-200), 1);
|
||||
}
|
||||
}
|
||||
.chroma .lntd, .chroma .lntd pre {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
--tw-border-style: none;
|
||||
border-style: none;
|
||||
padding: calc(var(--spacing) * 0);
|
||||
vertical-align: top;
|
||||
}
|
||||
.chroma .lntable {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
border-spacing: 0;
|
||||
}
|
||||
.chroma .hl {
|
||||
margin-inline: calc(var(--spacing) * -4);
|
||||
display: block;
|
||||
width: auto;
|
||||
background-color: rgba(var(--color-primary-100), 1);
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-primary-900), 1);
|
||||
}
|
||||
}
|
||||
.chroma .lntd .hl {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.chroma .lnt, .chroma .ln {
|
||||
margin-right: 0.4em;
|
||||
padding-inline: 0.4em;
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
color: rgba(var(--color-neutral-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .kc {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-600), 1);
|
||||
}
|
||||
}
|
||||
.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
|
||||
color: rgba(var(--color-secondary-900), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-200), 1);
|
||||
}
|
||||
}
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
|
||||
color: rgba(var(--color-secondary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-300), 1);
|
||||
}
|
||||
}
|
||||
.chroma .no, .chroma .ne, .chroma .vg {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .nf {
|
||||
color: rgba(var(--color-secondary-600), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
|
||||
color: rgba(var(--color-primary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .se {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-secondary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-secondary-500), 1);
|
||||
}
|
||||
}
|
||||
.chroma .sr, .chroma .ss {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-primary-800), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ow {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
font-style: italic;
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ch {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
font-style: italic;
|
||||
&:is(.dark *) {
|
||||
color: rgba(var(--color-neutral-400), 1);
|
||||
}
|
||||
}
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
.chroma .gh {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
}
|
||||
.chroma .gs {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.chroma .gu, .chroma .gt {
|
||||
color: rgba(var(--color-neutral-500), 1);
|
||||
}
|
||||
.chroma .gl {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
#zen-mode-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.zen-mode {
|
||||
position: relative;
|
||||
}
|
||||
body.zen-mode-enable {
|
||||
#bmc-wbtn, .author {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.a11y-panel-enter-active {
|
||||
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.a11y-panel-leave-active {
|
||||
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.ios-toggle {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: #e5e5e5;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ios-toggle input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.ios-toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: 0;
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle input:checked ~ .ios-toggle-ball {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle.is-checked {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked) {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked)::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.dark .ios-toggle {
|
||||
background: #404040;
|
||||
}
|
||||
.dark .ios-toggle::after {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
body a, body button {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -3921,10 +3923,6 @@ pre {
|
||||
}
|
||||
}
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -4048,6 +4046,10 @@ pre {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-tracking {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -4252,7 +4254,6 @@ pre {
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-font-weight: initial;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-translate-z: 0;
|
||||
@@ -4280,6 +4281,7 @@ pre {
|
||||
--tw-gradient-via-position: 50%;
|
||||
--tw-gradient-to-position: 100%;
|
||||
--tw-leading: initial;
|
||||
--tw-font-weight: initial;
|
||||
--tw-tracking: initial;
|
||||
--tw-ordinal: initial;
|
||||
--tw-slashed-zero: initial;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
|
||||
|
||||
@import "./components/zen-mode.css";
|
||||
@import "./components/chroma.css";
|
||||
@import "./components/a11y.css";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
@import "./components/chroma.css" layer(utilities);
|
||||
@import "./components/zen-mode.css";
|
||||
@import "./components/a11y.css";
|
||||
|
||||
body a,
|
||||
body button {
|
||||
|
||||
Reference in New Issue
Block a user