設計システムを作成する、パート3:色

この記事では、CSSでカラーシステムを設定する方法と、システムを使いやすく、保守しやすくするためのベストプラクティスについて説明します。

この記事は、Webコンポーネントのライブラリに触発された設計システムに関するシリーズの一部です。ライブラリは、CSSグローバルの堅牢なシステムに依存しています。これが、私たちが学んだことを共有して、図書館のグローバルスタイルを設定することです!

記事シリーズ:
-パート1:タイポグラフィ
-パート2:グリッドとレイアウト
-パート3:色
-パート4:間隔
-パート5:アイコン
-パート6:ボタン

Color Color Editorを開始しました! CodyHouse Frameworkと互換性のあるカラーパレットとテーマを生成するWebデザインツール。

色変数101

他のCSSグローバルとは異なり、カラーシステムの作成はコーディングが10%、セマンティクスが90%です。 _colors.scssファイルでの作業中、次の目標に留意してください。

  1. 色の変数は覚えやすいものにする必要があります→色を選択する必要があるときはいつでもグローバルファイルをチェックする必要はありません。
  2. システムは簡単に更新できる必要があります→色を追加、削除、および名前変更します。そうすることは複雑ではないことを確認してください。
  3. システムには必須の色のみが含まれている必要があります。この色は何度も聞いていますが、必要な色よりも多くの色が常に残っています。設計システムの本当の成功の鍵は、不要なものをすべて取り除くことです(色が含まれています)。

セマンティック色と宣言色

色変数の設定に関しては、主に2つのアプローチがあります。意味色と宣言色です。

セマンティックアプローチは次のようになります。

宣言的アプローチの例は次のとおりです。

どちらも間違っていません。ニーズに合ったものを選択することは、非常に多くの要因(プロジェクトのサイズ、ブランドの色の関連性など)に依存します。

フレームワークの_colors.scssファイルで作業している間、ユーザーがそれを編集することを考慮しなければなりませんでした(100%)。つまり、宣言型アプローチが最も使いやすい場合でも、それをセマンティックアプローチと組み合わせて、メンテナンスが容易なシステムを取得する必要がありました。

不可欠なカラーパレット

ステップ1は、Webコンポーネントの作成に必要な色の最小数を宣言していました。一般に、基本的なカラーパレットは次のもので構成されます。

  1. メイン/プライマリの色→リンクに使用されるボタンの背景色など。一般に、それはメインの行動を促す色です。
  2. アクセントカラー→ページ上で重要なものを強調するために使用されます。原色のバリエーションではなく、補色である必要があります。
  3. 中間色のスケール→通常、テキスト要素、微妙な要素、境界線などに使用されるグレースケールトーンのスケールです。
  4. フィードバックの色→成功、エラー、警告。

これらの色の一部には、インタラクティブ性を強調するためによく使用されるバリエーション(暗いバージョン/明るいバージョン)が必要です(例::hover /:active状態)。

CSSでは、これは次のように変換されます。

*注:postcss-color-mod-functionプラグインを使用して、色関数をすべてのブラウザーと互換性のあるRGBAコードに変換しています。

上記のスニペットは、カラーパレット(プロジェクト全体で使用されるすべての色)を表しています。

原色とアクセント色のバリエーションは、色関数を使用して生成されます。このアプローチは、demo.htmlファイルがある場合(およびフレームワークで行う場合)に便利です。取得した色に満足するまで、関数の値を微調整できます。シェード(またはニュートラル)色は、chroma.jsを使用して生成されます。この場合、一般に2つの反対の色(黒と白)があり、これら2つの色に基づいて値のスケールを生成する必要があるため、関数の使用は理想的ではありませんでした。

ミックスにセマンティックカラーを追加する

カラーパレットの準備ができたら、セマンティックカラーを追加できます。セマンティックカラーの作成とは、カラーの数を増やすことではなく、セマンティックリファレンスを使用してカラーを分散することです。

これが良いアプローチだと思う理由

まず、このシステムは2つの基本色、つまり原色とアクセント色に依存しています。つまり、色変数を使用する必要がある場合、それらの変数が何を表すのかを覚えるのは難しくありません(「青」や「赤」などの宣言的な名前を使用していない場合でも)。

システムには、より多くの色(2次色など)を含める必要がある場合があります。まだ3色しか扱っていません。 10色以上のメインカラーに基づくシステムの管理は、使用しているアプローチに関係なく困難になるため、単純化を検討することをお勧めします。

グレースケールの色は異なる命名規則を使用します。変数の最後の数字が大きいほど、色は濃くなります。
このアプローチは、どのニュートラルカラーを適用するかわからない場合に便利です。グレー2が微妙に見える場合は、グレー3を試してください。いくつかの色合いが欠落していることに気付いているかもしれません(例:グレー-5)。私たちの場合、これらは必須ではありませんでした(Webコンポーネントの作成中に使用したことはありません)ので、カラーパレットから削除しました。

3つの主な理由により、セマンティックカラーがミックスに追加されます。

  1. _colors.scssファイルは、色を変更する必要があるときはいつでも真実のソースになります。テキストの見出し要素を暗くする必要があると思いますか? _colors.scssファイルを開き、color-text-heading変数を編集します。
  2. たとえば、色の境界線を定義する場合、次に境界要素を作成するときに、他のコンポーネントで使用しているグレーの色を調べる必要はありません。同じ概念が、境界線だけでなく、多くの要素に適用されます。
  3. さまざまなテーマを作成および維持するための簡単な手段になります。

テーマ

プラグインやポリフィルに依存せずにCSS変数を使用できるようになり次第、カラーテーマの作成は非常に簡単になります*!今日はテーマを作成できないということですか?いいえ、できます。 2つのオプションがあります。

*フレームワークでは、postcss-css-variablesプラグインを使用してCSS変数をコンパイルします。現在、CSSクラスの変数の更新はサポートしていません。

とにかくオプション1はCSS変数を更新しています。変数をサポートしていないブラウザには、「デフォルト」のカラーテーマが表示されます。コンテンツにアクセスできる限り、これは問題ではありません。

たとえば、デフォルトの色テーマ→白の背景と黒のテキスト色、および.theme-dark→黒の背景と白のテキスト色があります。次に、2つのコンポーネントを作成します。1つはデフォルトテーマを使用し、もう1つは.dark-themeを使用します。両方のコンポーネントにデフォルトテーマが含まれていてもユーザーエクスペリエンスに影響しない場合は、.dark-themeを拡張機能と見なすことができます(オプション)。この場合、どこでもサポートされていなくても、変数を更新して異なるテーマを作成することは理にかなっています。

これは、いくつかの主要なCSS変数を更新する新しいテーマを作成する方法です。

このソリューションは、色補正を抽象化し、単一のファイルに色のテーマを保持できるため、気に入っています。そうすることで、CSSクラスを適用するだけで各コンポーネントの状態を(テーマ-aからテーマ-bに)潜在的に変更できます。

オプション2は、外観がテーマの影響を受けるすべての要素をターゲットにします。この方法の利点は、すべてのブラウザでサポートされていることです。ただし、CSS変数のみに基づいたものに比べて、維持するのは簡単ではありません。

次に、オプション2の実際の例を示します。

これで、フレームワークで色を処理する方法を理解できました!フィードバック/提案がある場合は、コメントでお知らせください!

記事を楽しんでいただけたでしょうか。より多くのWebデザインナゲットについては、MediumまたはTwitterでこちらをフォローしてください。