ルートカラー生成の変更

manuel · 2022 年 3 月 3 日午後 1:00

これに関するアナウンスが見つかりませんでした。新しいルートカラー宣言（primary-900、primary-800など）があるのを見ました。

テーマに取り組んでおり、これらの計算（primaryは同じ）が、どうやらDiscourseのバージョンによって異なるようです。

シェードとティントがどのように生成されるかについての詳細情報はありますか？また、数値システムは、記述的な用語（low、medium、highなど）を完全に置き換える予定ですか？

Don · 2022 年 3 月 3 日午後 1:42

こんにちは。

これはカラー変換ファイルであり、これらの変数がどのように作成されたかのパーセンテージを確認できると思います。

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

manuel · 2022 年 3 月 3 日午後 2:38

@Donさん、ありがとうございます！色の宣言場所はわかっています。それらの背後にある考慮事項や今後の計画について興味がありました。

例えば、現在プライマリとターシャリには数値があります。カラースキームのすべての値に数値がないのはなぜですか？それは計画されていますか？

また、現在、数値は明るいティントのみを生成しています。500にメインカラーを割り当て、500未満をティント、500を超えるものをシェードとする、より標準的なシステムを使用しないのはなぜですか？

別のトピックですが、ティントはより線形的な方法ではなく、カラースキームの別のメインカラーとのブレンドとして生成されるのはなぜですか？

現在、クライアントが包括的なデザインシステムを持っている場合、Discourse のカラーシステムを使用してカラー宣言を実装することはできません。事実上、すべての値を最初から宣言する必要があります。Discourse で生成されたカラーが数値で定義されている場合、なぜ一貫性があり、一般的なデザインシステムでのカラー生成により一致したシステムを実装しないのですか？

Falco · 2022 年 3 月 3 日午後 3:35

はい、コンテキストについては UX: Styleguide changes & color variable additions by jordanvidrine · Pull Request #15984 · discourse/discourse · GitHub を参照してください。

計算は8日前に変更されました。最新バージョンにアップデートしてください。

トピック		返信	表示
How do colors work and how to change them? Support ux	5	119	2025 年 3 月 20 日
Colors changed in beta7? Support	6	963	2019 年 2 月 4 日
Reference for full color customization Dev	4	1315	2023 年 2 月 14 日
Challenges creating a custom color palette Dev	8	152	2025 年 1 月 29 日
Cleaning up our color palette 🎨 Dev	24	4591	2018 年 4 月 20 日

ルートカラー生成の変更

関連トピック