Fix colors in tekst component

This commit is contained in:
Kuba Orlik 2025-02-24 16:31:05 +01:00
parent 1b7df6ee1e
commit f6ad9d5909
4 changed files with 26 additions and 8 deletions

8
package-lock.json generated
View File

@ -17,7 +17,7 @@
"@sealcode/file-manager": "^1.0.2", "@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.6.6", "@sealcode/jdd": "^0.6.6",
"@sealcode/jdd-editor": "^0.1.14", "@sealcode/jdd-editor": "^0.1.14",
"@sealcode/sealgen": "^0.17.23", "@sealcode/sealgen": "^0.17.24",
"@sealcode/simplemde": "^1.12.1", "@sealcode/simplemde": "^1.12.1",
"@sealcode/ts-predicates": "^0.6.2", "@sealcode/ts-predicates": "^0.6.2",
"@types/kill-port": "^2.0.0", "@types/kill-port": "^2.0.0",
@ -1003,9 +1003,9 @@
"integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg==" "integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg=="
}, },
"node_modules/@sealcode/sealgen": { "node_modules/@sealcode/sealgen": {
"version": "0.17.23", "version": "0.17.24",
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.23.tgz", "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.24.tgz",
"integrity": "sha512-zdJuITE/8t13X1TwwFKeV3AW7rwaCSkEW52KP4Hcoa73RYgsJ7tCstIM5v5X2YCVflb7udsE9Nd7wE7JEMU8rg==", "integrity": "sha512-xj3BTX2b3uFaO0Fj71inNY282Y96JiiCDFJF4dCmgWQu+yOLlzaVKF7p4bSi1CoNN9eHsvwXUEYKoRfvz8Q9GQ==",
"dependencies": { "dependencies": {
"@koa/router": "^12.0.1", "@koa/router": "^12.0.1",
"@sealcode/file-manager": "^1.0.2", "@sealcode/file-manager": "^1.0.2",

View File

@ -82,7 +82,7 @@
"@sealcode/file-manager": "^1.0.2", "@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.6.6", "@sealcode/jdd": "^0.6.6",
"@sealcode/jdd-editor": "^0.1.14", "@sealcode/jdd-editor": "^0.1.14",
"@sealcode/sealgen": "^0.17.23", "@sealcode/sealgen": "^0.17.24",
"@sealcode/simplemde": "^1.12.1", "@sealcode/simplemde": "^1.12.1",
"@sealcode/ts-predicates": "^0.6.2", "@sealcode/ts-predicates": "^0.6.2",
"@types/kill-port": "^2.0.0", "@types/kill-port": "^2.0.0",

View File

@ -2,5 +2,19 @@
font-family: var(--font-long-text); font-family: var(--font-long-text);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #0d4d69;
&.tekst--color-normal {
background-color: var(--color-brand-text-bg);
color: var(--color-brand-text-fg);
}
&.tekst--color-accent {
background-color: var(--color-brand-text-bg);
color: var(--color-brand-text-accent);
}
&.tekst--color-accent2 {
background-color: var(--color-brand-text-bg);
color: var(--color-brand-text-accent2);
}
} }

View File

@ -8,6 +8,7 @@ import type {
import { Component, ComponentArguments } from "@sealcode/jdd"; import { Component, ComponentArguments } from "@sealcode/jdd";
const component_arguments = { const component_arguments = {
color: new ComponentArguments.Enum(["normal", "accent", "accent2"]),
content: new ComponentArguments.Markdown(), content: new ComponentArguments.Markdown(),
} as const; } as const;
@ -24,13 +25,16 @@ export class Tekst extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { content }, args: { color, content },
classes, classes,
jdd_context: { render_markdown, language }, jdd_context: { render_markdown, language },
index, index,
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable { }: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
return ( return (
<div class={["tekst markdown", ...classes]} style={`--jdd-index: ${index}`}> <div
class={["tekst markdown", ...classes, `tekst--color-${color}`]}
style={`--jdd-index: ${index}`}
>
{render_markdown(language, content)} {render_markdown(language, content)}
</div> </div>
); );