EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add syntax-highlighting

Browse source
This commit is contained in:
lilith 2025-03-04 22:13:25 +01:00
commit 8d4b51f99e
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
5 changed files with 196 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

48
styleguide/assets/style/base.scss
View file

@ -137,6 +137,10 @@ $mobile-navigation-height: 4rem;
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-text-1: var(--color-dark-text-1);
--color-text-2: var(--color-dark-text-2);
--color-text-3: var(--color-dark-text-3);
--color-text-4: var(--color-dark-text-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
@ -179,6 +183,10 @@ $mobile-navigation-height: 4rem;
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-text-1: var(--color-light-text-1);
--color-text-2: var(--color-light-text-2);
--color-text-3: var(--color-light-text-3);
--color-text-4: var(--color-light-text-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
@ -402,10 +410,11 @@ pre {
display: block;
padding: 1rem;
border-radius: 1rem;
background-color: var(--color-shade-1);
border: solid 0.3em var(--color-shade-2);
code {
background-color: initial;
border: initial;
border-radius: initial;
padding: initial;
font-size: inherit;
@ -416,11 +425,46 @@ code,
.code {
font-family: "Departure Mono", ui-monospace, monospace;
font-size: 0.8em;
background-color: var(--color-shade-2);
border: solid 0.15em var(--color-shade-2);
border-radius: 0.2em;
padding: 0 0.2em;
}
pre span,
code span,
.code span {
&.comment {
color: var(--color-text-4);
font-style: italic;
}
&.neutral {
color: var(--color-text-2);
}
&.identifier {
color: var(--color-primary);
}
&.function {
color: var(--color-accent-1);
font-style: italic;
}
&.keyword {
color: var(--color-accent-2);
}
&.number {
color: var(--color-accent-3);
}
&.string {
color: var(--color-accent-3);
font-style: italic;
}
}
table {
width: fit-content;
border-collapse: collapse;

68
styleguide/assets/style/styleguide.css
View file

@ -122,6 +122,10 @@
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-text-1: var(--color-dark-text-1);
--color-text-2: var(--color-dark-text-2);
--color-text-3: var(--color-dark-text-3);
--color-text-4: var(--color-dark-text-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
@ -160,6 +164,10 @@
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-text-1: var(--color-light-text-1);
--color-text-2: var(--color-light-text-2);
--color-text-3: var(--color-light-text-3);
--color-text-4: var(--color-light-text-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
@ -191,6 +199,10 @@
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-text-1: var(--color-dark-text-1);
--color-text-2: var(--color-dark-text-2);
--color-text-3: var(--color-dark-text-3);
--color-text-4: var(--color-dark-text-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
@ -228,6 +240,10 @@
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-text-1: var(--color-light-text-1);
--color-text-2: var(--color-light-text-2);
--color-text-3: var(--color-light-text-3);
--color-text-4: var(--color-light-text-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
@ -263,6 +279,10 @@
--color-shade-2: var(--color-light-shade-2);
--color-shade-3: var(--color-light-shade-3);
--color-shade-4: var(--color-light-shade-4);
--color-text-1: var(--color-light-text-1);
--color-text-2: var(--color-light-text-2);
--color-text-3: var(--color-light-text-3);
--color-text-4: var(--color-light-text-4);
--color-primary: var(--color-light-primary);
--color-secondary: var(--color-light-secondary);
--color-error: var(--color-light-error);
@ -292,6 +312,10 @@
--color-shade-2: var(--color-dark-shade-2);
--color-shade-3: var(--color-dark-shade-3);
--color-shade-4: var(--color-dark-shade-4);
--color-text-1: var(--color-dark-text-1);
--color-text-2: var(--color-dark-text-2);
--color-text-3: var(--color-dark-text-3);
--color-text-4: var(--color-dark-text-4);
--color-primary: var(--color-dark-primary);
--color-secondary: var(--color-dark-secondary);
--color-error: var(--color-dark-error);
@ -470,10 +494,11 @@ pre {
display: block;
padding: 1rem;
border-radius: 1rem;
background-color: var(--color-shade-1);
border: solid 0.3em var(--color-shade-2);
}
pre code {
background-color: initial;
border: initial;
border-radius: initial;
padding: initial;
font-size: inherit;
@ -483,11 +508,50 @@ code,
.code {
font-family: "Departure Mono", ui-monospace, monospace;
font-size: 0.8em;
background-color: var(--color-shade-2);
border: solid 0.15em var(--color-shade-2);
border-radius: 0.2em;
padding: 0 0.2em;
}
pre span.comment,
code span.comment,
.code span.comment {
color: var(--color-text-4);
font-style: italic;
}
pre span.neutral,
code span.neutral,
.code span.neutral {
color: var(--color-text-2);
}
pre span.identifier,
code span.identifier,
.code span.identifier {
color: var(--color-primary);
}
pre span.function,
code span.function,
.code span.function {
color: var(--color-accent-1);
font-style: italic;
}
pre span.keyword,
code span.keyword,
.code span.keyword {
color: var(--color-accent-2);
}
pre span.number,
code span.number,
.code span.number {
color: var(--color-accent-3);
}
pre span.string,
code span.string,
.code span.string {
color: var(--color-accent-3);
font-style: italic;
}
table {
width: fit-content;
border-collapse: collapse;

2
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long