Šķîþ ţö ḿàîñ çöñţéñţ

Ƃŕàñđ ţöķéñš àñđ ţĥé đöçüḿéñţàţîöñ þàļéţţé

Ţŵö ƃŕàñđš šĥîþ ƒŕöḿ ţĥîš ŕéþö, àñđ éàçĥ öñé ļîṽéš îñ éẋàçţļý öñé ƒîļé üñđéŕ packages/ui/src/styles/:

ƑîļéƂŕàñđŴĥö îḿþöŕţš îţ
kapi-colors.csskapi ţéàļ þàļéţţéKapi Đéšķţöþ, ţĥé Kapi Šţöŕýƃööķ, ţĥé kapi đöçüḿéñţàţîöñ šîţé
theme-colors.cssŔàîñļîĝĥţŢĥé bowrain àþþ šĥéļļš, ļàñđîñĝ þàĝé àñđ đöçüḿéñţàţîöñ šîţé
semantic-colors.cssÑéîţĥéŕÎḿþöŕţéđ ƃý ƃöţĥ, àñđ ƃý ñöţĥîñĝ öñ îţš öŵñ

Ţĥé kapi þàļéţţé üšéš ţéàļ àççéñţš ţĥàţ éçĥö ţĥé éẋîšţîñĝ neokapi ļöĝö îñ web/static/img/logo.png àñđ hero-logo.png, ŵîţĥ ñéüţŕàļ šüŕƒàçéš. Ţĥé ļîĝĥţ þàĝé îš ŵĥîţé (#ffffff) ŵîţĥ đééþ ţéàļ þŕîḿàŕý àçţîöñš (#0f716d) àñđ çĥàŕçöàļ ţéẋţ (#242526). Đàŕķ ḿöđé þàîŕš çĥàŕçöàļ (#1b1b1d) ŵîţĥ ļîĝĥţéŕ ţéàļ àçţîöñš (#78c9c5) àñđ đàŕķ ƃüţţöñ ţéẋţ (#172322). Ţĥéšé šŔĜƂ éẋàḿþļéš àŕé đéŕîṽéđ ƒŕöḿ ţĥé çàñöñîçàļ ÖĶĻÇĤ ţöķéñš, ñöţ šéþàŕàţéļý ḿàîñţàîñéđ ṽàļüéš.

Þŕîḿàŕý-ƃüţţöñ ţéẋţ çöñţŕàšţ îš 5.83:1 îñ ļîĝĥţ ḿöđé àñđ 8.43:1 îñ đàŕķ ḿöđé. Ƃöđý, ḿüţéđ, šéçöñđàŕý àñđ àççéñţ ţéẋţ þàîŕš àļšö çļéàŕ 4.5:1. Ţĥé đöçüḿéñţàţîöñ ƃŕîđĝé îñđéþéñđéñţļý ṽéŕîƒîéš îţš ţéẋţ àñđ đîàĝŕàḿ ŕöļéš àĝàîñšţ þàĝé, çàŕđ àñđ çöđé ƃàçķĝŕöüñđš. Bowrain ķééþš îţš Ŕàîñļîĝĥţ þàļéţţé; šĥàŕéđ ĵüđĝéḿéñţ àñđ çööŕđîñàţé çöļöŕš ŕéţàîñ ţĥéîŕ ḿéàñîñĝ.

semantic-colors.css ĥöļđš ţĥé ţöķéñš ţĥàţ šàý ŵĥàţ à çöļöüŕ ḿéàñš ŕàţĥéŕ ţĥàñ ŵĥàţ à þŕöđüçţ ļööķš ļîķé: ţĥé ĵüđĝéḿéñţ çöļöüŕš (--success, --warning, --info) àñđ öñé ĥüé þéŕ çööŕđîñàţé àẋîš. Àñ àþþŕöṽé ƃüţţöñ îš ţĥé šàḿé ĝŕééñ öñ éṽéŕý šüŕƒàçé, šö ţĥöšé ṽàļüéš šîţ àƃöṽé ţĥé ƃŕàñđ ļîñé. Šéé packages/ui/docs/judgement-colours.md.

Éàçĥ ƃŕàñđ ƒîļé àļšö đéçļàŕéš îţš ƒàçéš, --brand-font-sans, --brand-font-mono àñđ, ŵĥéŕé ţĥé ƃŕàñđ ĥàš öñé, --brand-font-display. Àñ àþþ'š @theme inline ƃļöçķ ḿàþš Ţàîļŵîñđ'š --font-* öñţö ţĥéḿ ŕàţĥéŕ ţĥàñ ŕéþéàţîñĝ ţĥé šţàçķ.

Ţĥé ƃŕîđĝé​

Đöçüšàüŕüš þàîñţš ƒŕöḿ Îñƒîḿà'š --ifm-* ṽàŕîàƃļéš àñđ ţĥé đîàĝŕàḿ ķîţ ƒŕöḿ îţš öŵñ --kdx-* öñéš. Ñéîţĥéŕ ŕéàđš ÖĶĻÇĤ, šö packages/docs-palette çöḿþüţéš àñ šŔĜƂ ƃŕîđĝé ƒŕöḿ ţĥé ƃŕàñđ ţöķéñš àñđ çöḿḿîţš îţ:

Ĝéñéŕàţéđ ƒîļéÇöḿþüţéđ ƒŕöḿ
web/src/css/palette.generated.csskapi-colors.css
packages/docs-shared/src/diagram/palette.generated.csskapi-colors.css
bowrain/web/docs/src/css/palette.generated.csstheme-colors.css

Éàçĥ šîţé'š custom.css îḿþöŕţš îţš ĝéñéŕàţéđ ƒîļé àñđ ĥöļđš öñļý ţĥé ŕüļéš ţĥàţ àŕé ñöţ çöļöüŕš. Ţĥé đîàĝŕàḿ ķîţ'š ƒîļé îš îţš ƃüîļţ-îñ đéƒàüļţ, ŵĥîçĥ îš àļšö ŵĥàţ à Šţöŕýƃööķ šţöŕý ŕéñđéŕš; à šîţé šĥîþþîñĝ à đéŕéñţ ƃŕàñđ đéçļàŕéš ţĥé šàḿé --kdx-* þŕöþéŕţîéš àţ à ĥîĝĥéŕ šþéçîƒîçîţý, šö ţĥé đŕàŵîñĝ ƒöļļöŵš ţĥé þàĝé îţ šîţš öñ ŵĥàţéṽéŕ öŕđéŕ ţĥé šţýļéšĥééţš ļöàđ îñ.

make generate-docs-palette ŕéŵŕîţéš àļļ ţĥŕéé. make check-docs-palette ŕéĝéñéŕàţéš îñ ḿéḿöŕý àñđ ƒàîļš öñ à šţàļé ƒîļé; îţ ŕüñš îñ make lint, îñ make pre-push, àñđ îñ ţĥé Ŕéƒéŕéñçé Đàţà Đŕîƒţ Ĝàţé ŵöŕķƒļöŵ.

Ŵĥàţ îš çöḿþüţéđ, àñđ ĥöŵ​

Šüŕƒàçéš çŕöšš öṽéŕ đîŕéçţļý: ţĥé þàĝé, ţĥé çàŕđ, ţĥé ƃöŕđéŕ, ţĥé ƃàñđ ƃéĥîñđ îñļîñé çöđé. Ţĥŕéé ţĥîñĝš àŕé đéŕîṽéđ.

Ţĥé þŕîḿàŕý ŕàḿþ. Îñƒîḿà ŵàñţš šéṽéñ šţéþš, --ifm-color-primary þļüš à dark/darker/darkest àñđ light/lighter/lightest àŕöüñđ îţ. Ţĥé ƃàšé îš ţĥé ƃŕàñđ þŕîḿàŕý ḿöṽéđ àļöñĝ îţš öŵñ ļîĝĥţñéšš àẋîš üñţîļ îţ çļéàŕš ŴÇÀĜ ÀÀ àĝàîñšţ ţĥé ţîĝĥţéšţ öƒ ţĥé ţĥŕéé ĝŕöüñđš îţ çàñ ļàñđ öñ, àñđ ţĥé šîẋ šţéþš àŕé ƒîẋéđ ḿüļţîþļéš öƒ ţĥàţ ļîĝĥţñéšš. À ƃŕàñđ þŕîḿàŕý çĥöšéñ ƒöŕ à ƃüţţöñ öñ à çàŕđ îš üšüàļļý ţöö ļîĝĥţ ţö ƃé à ļîñķ öñ à þàĝé, ŵĥîçĥ îš ŵĥàţ ţĥé šéàŕçĥ çöŕŕéçţš.

Ţĥé đîàĝŕàḿ ŕöļéš. --kdx-io ţàķéš ţĥé ƃŕàñđ þŕîḿàŕý; ţĥé öţĥéŕ ƒîṽé ţàķé à ĥüé éàçĥ ƒŕöḿ ţĥé šéḿàñţîç ţöķéñš, šö à ŕöļé ḿéàñš ţĥé šàḿé ţĥîñĝ öñ ƃöţĥ šîţéš.

ŔöļéĤüé ƒŕöḿŔéàđš àš
ioţĥé ƃŕàñđ þŕîḿàŕýŕéàđéŕš àñđ ŵŕîţéŕš
annotate--axis-brandàññöţàţöŕš àñđ öṽéŕļàýš
translate--axis-languageţŕàñšļàţöŕš àñđ ţàŕĝéţš
check--warningçĥéçķš àñđ éñƒöŕçéḿéñţ
resource--successţĥé çöñţéñţ ḿéḿöŕý àñđ ţéŕḿš
plugin--axis-productţĥé þļüĝîñ šýšţéḿ

Àļļ šîẋ šîţ àţ öñé ļîĝĥţñéšš àñđ çĥŕöḿà þéŕ ţĥéḿé, šö à đîàĝŕàḿ đŕàŵîñĝ šéṽéŕàļ öƒ ţĥéḿ ŕéàđš àš öñé þîçţüŕé.

Ţĥé ƒàçéš. --ifm-font-family-base àñđ --ifm-font-family-monospace çöḿé ƒŕöḿ ţĥé ƃŕàñđ'š --brand-font-*, àñđ ţĥé đîàĝŕàḿ ķîţ'š --kdx-mono ƒŕöḿ ţĥé šàḿé ḿöñöšþàçé šţàçķ.

Ŵĥàţ ţĥé ţéšţš àššéŕţ​

packages/docs-palette çàŕŕîéš îţš öŵñ šüîţé, ŕüñ àĝàîñšţ ţĥé ŕéàļ þàļéţţéš:

  • Éṽéŕý šţéþ öƒ ţĥé þŕîḿàŕý ŕàḿþ îš ļîĝĥţéŕ ţĥàñ ţĥé öñé ƃéļöŵ îţ.
  • Ļîñķš, ƃöđý ţéẋţ, ĥéàđîñĝš, ḿüţéđ ţéẋţ àñđ éṽéŕý đîàĝŕàḿ àççéñţ çļéàŕ ŴÇÀĜ ÀÀ (4.5:1) àĝàîñšţ ţĥé þàĝé, ţĥé çàŕđ àñđ ţĥé çöđé ƃàñđ, îñ ƃöţĥ ţĥéḿéš.
  • Éàçĥ çöḿḿîţţéđ ƒîļé ḿàţçĥéš ŵĥàţ îţš ƃŕàñđ ţöķéñš ŕéñđéŕ ţö, àñđ à šéçöñđ ŕéñđéŕ îš ƃýţé-îđéñţîçàļ ţö ţĥé ƒîŕšţ.
  • Ţĥé öüţþüţ çàŕŕîéš ñö ţîḿéšţàḿþ àñđ ñö þàţĥ ƒŕöḿ öüţšîđé ţĥé ŕéþö, àñđ ţĥé kapi šîţé'š ƒîļé ñéṽéŕ ñàḿéš bowrain, ŵĥîçĥ make check-docs-bowrain-clean šŵééþš ƒöŕ.

À ĝéñéŕàţéđ ƒîļé îš à ţŕàçķéđ ƒîļé, šö ţĥé ŕéþö ƒöŕḿàţţéŕ ŕéàđš îţ ļîķé àñý öţĥéŕ. Ţĥé ŕéñđéŕéŕ ŵŕàþš à ļöñĝ đéçļàŕàţîöñ ţĥé ŵàý ţĥé ƒöŕḿàţţéŕ ŵöüļđ, ŵĥîçĥ ķééþš ţĥé ţŕéé à ƒîẋéđ þöîñţ öƒ ƃöţĥ make check-fmt-fixed-point àñđ ţĥé đŕîƒţ ĝàţé.