designFlonCSSv1.0.1

Utilities

Colors

/path/to/floncss/trumps/colors/colors.css

テキストカラー、背景カラーを制御するためのutility classです。

ClassPropertiesDescription
main colors
color:primary bg-color:primarycolor: var(--color-primary); background-color: var(--color-primary);--color-primary に定義したカラーが適用されます。
color:primary-dark bg-color:primary-darkcolor: var(--color-primary-dark); background-color: var(--color-primary-dark);--color-primary-dark に定義したカラーが適用されます。
color:primary-light bg-color:primary-lightcolor: var(--color-primary-light); background-color: var(--color-primary-light);--color-primary-light に定義したカラーが適用されます。
color:secondary bg-color:secondarycolor: var(--color-secondary); background-color: var(--color-secondary);--color-secondary に定義したカラーが適用されます。
color:secondary-dark bg-color:secondary-darkcolor: var(--color-secondary-dark); background-color: var(--color-secondary-dark);--color-secondary-dark に定義したカラーが適用されます。
color:secondary-light bg-color:secondary-lightcolor: var(--color-secondary-light); background-color: var(--color-secondary-light);--color-secondary-light に定義したカラーが適用されます。
color:tertiary bg-color:tertiarycolor: var(--color-tertiary); background-color: var(--color-tertiary);--color-tertiary に定義したカラーが適用されます。
color:tertiary-dark bg-color:tertiary-darkcolor: var(--color-tertiary-dark); background-color: var(--color-tertiary-dark);--color-tertiary-dark に定義したカラーが適用されます。
color:tertiary-light bg-color:tertiary-lightcolor: var(--color-tertiary-light); background-color: var(--color-tertiary-light);--color-tertiary-light に定義したカラーが適用されます。
color:quaternary bg-color:quaternarycolor: var(--color-quaternary); background-color: var(--color-quaternary);--color-quaternary に定義したカラーが適用されます。
color:quaternary-dark bg-color:quaternary-darkcolor: var(--color-quaternary-dark); background-color: var(--color-quaternary-dark);--color-quaternary-dark に定義したカラーが適用されます。
color:quaternary-light bg-color:quaternary-lightcolor: var(--color-quaternary-light); background-color: var(--color-quaternary-light);--color-quaternary-light に定義したカラーが適用されます。
neutral colors
color:900 bg-color:900color: var(--color-900); background-color: var(--color-900);--color-900 に定義したカラーが適用されます。
color:800 bg-color:800color: var(--color-800); background-color: var(--color-800);--color-800 に定義したカラーが適用されます。
color:700 bg-color:700color: var(--color-700); background-color: var(--color-700);--color-700 に定義したカラーが適用されます。
color:600 bg-color:600color: var(--color-600); background-color: var(--color-600);--color-600 に定義したカラーが適用されます。
color:500 bg-color:500color: var(--color-500); background-color: var(--color-500);--color-500 に定義したカラーが適用されます。
color:400 bg-color:400color: var(--color-400); background-color: var(--color-400);--color-400 に定義したカラーが適用されます。
color:300 bg-color:300color: var(--color-300); background-color: var(--color-300);--color-300 に定義したカラーが適用されます。
color:200 bg-color:200color: var(--color-200); background-color: var(--color-200);--color-200 に定義したカラーが適用されます。
color:100 bg-color:100color: var(--color-100); background-color: var(--color-100);--color-100 に定義したカラーが適用されます。
color:000 bg-color:000color: var(--color-000); background-color: var(--color-000);--color-000 に定義したカラーが適用されます。
other colors
color:red bg-color:redcolor: var(--color-red); background-color: var(--color-red);--color-red に定義したカラーが適用されます。
color:red-dark bg-color:red-darkcolor: var(--color-red-dark); background-color: var(--color-red-dark);--color-red-dark に定義したカラーが適用されます。
color:red-light bg-color:red-lightcolor: var(--color-red-light); background-color: var(--color-red-light);--color-red-light に定義したカラーが適用されます。
color:green bg-color:greencolor: var(--color-green); background-color: var(--color-green);--color-green に定義したカラーが適用されます。
color:green-dark bg-color:green-darkcolor: var(--color-green-dark); background-color: var(--color-green-dark);--color-green-dark に定義したカラーが適用されます。
color:green-light bg-color:green-lightcolor: var(--color-green-light); background-color: var(--color-green-light);--color-green-light に定義したカラーが適用されます。
color:blue bg-color:bluecolor: var(--color-blue); background-color: var(--color-blue);--color-blue に定義したカラーが適用されます。
color:blue-dark bg-color:blue-darkcolor: var(--color-blue-dark); background-color: var(--color-blue-dark);--color-blue-dark に定義したカラーが適用されます。
color:blue-light bg-color:blue-lightcolor: var(--color-blue-light); background-color: var(--color-blue-light);--color-blue-light に定義したカラーが適用されます。

Useage

  • color:primary
  • color:primary-dark
  • color:primary-light
  • color:secondary
  • color:secondary-dark
  • color:secondary-light
  • color:tertiary
  • color:tertiary-dark
  • color:tertiary-light
  • color:quaternary
  • color:quaternary-dark
  • color:quaternary-light
  • color:900
  • color:800
  • color:700
  • color:600
  • color:500
  • color:400
  • color:300
  • color:200
  • color:100
  • color:000
  • color:red
  • color:red-dark
  • color:red-light
  • color:green
  • color:green-dark
  • color:green-light
  • color:blue
  • color:blue-dark
  • color:blue-light
1<div class="color:primary"><span class="bg-color:primary"></span>color:primary</div>
2<div class="color:primary-dark"><span class="bg-color:primary-dark"></span>color:primary</div>
3<div class="color:primary-light"><span class="bg-color:primary-light"></span>color:primary</div>
4...

Settings

各種値については "settings/colors.css" で定義します。

Learn more