kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding heading colors

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 17:44:56 +02:00
parent 6031795a4b
commit 59e504957b
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/back/jdd-components/heading/heading.css
View File

@ -23,4 +23,16 @@
&.heading--font-size-extra_large > * {
font-size: 64px;
}
&.heading--color-normal {
color: var(--color-brand-text-fg);
}
&.heading--color-accent1 {
color: var(--color-brand-accent);
}
&.heading--color-accent2 {
color: var(--color-brand-accent2);
}
}

14
src/back/jdd-components/heading/heading.jdd.tsx
View File

@ -3,7 +3,6 @@ import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
const component_arguments = {
title: new ComponentArguments.ShortText(),
level: new ComponentArguments.Enum(["h1", "h2", "h3", "h4", "h5", "h6"]),
font_size: new ComponentArguments.Enum([
"tiny",
@ -12,6 +11,8 @@ const component_arguments = {
"large",
"extra_large",
]),
color: new ComponentArguments.Enum(["normal", "accent1", "accent2"]),
title: new ComponentArguments.ShortText(),
} as const;
export class Heading extends Component<typeof component_arguments> {
@ -20,11 +21,18 @@ export class Heading extends Component<typeof component_arguments> {
}
async toHTML({
args: { title, level, font_size },
args: { title, level, font_size, color },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return (
<div class={["heading", `heading--font-size-${font_size}`, ...classes]}>
<div
class={[
"heading",
`heading--font-size-${font_size}`,
`heading--color-${color}`,
...classes,
]}
>
{`<${level}>${insert_nbsp(title)}</${level}>`}
</div>
);