Colors

1:root {
2  /*
3   * main colors
4   * ※ 利用しないカラーはコメントアウトする
5   */
6  /** primary */
7  --color-primary: #B5984D;
8  --color-primary-dark: #A38639;
9  --color-primary-light: #E7CB84;
10
11  /** secondary */
12  --color-secondary: #5C9BDB;
13  --color-secondary-dark: #4E8CCB;
14  --color-secondary-light: #8BC2FA;
15
16  /** tertiary */
17  --color-tertiary: #9CD9FF;
18  --color-tertiary-light: #77C1EF;
19  --color-tertiary-dark: #D2EEFF;
20
21  /** quaternary */
22  --color-quaternary: #CE9276;
23  --color-quaternary-light: #F4B59A;
24  --color-quaternary-dark: #C381;
25
26  /*
27   * neutral colors
28   * ※ 利用しないカラーはコメントアウトする
29   */
30  --color-900: #000;
31  --color-800: #1C1C1C;
32  --color-700: #2C2C2C;
33  --color-600: #444;
34  --color-500: #555;
35  --color-400: #777;
36  --color-300: #999;
37  --color-200: #BBB;
38  --color-100: #F0F0F0;
39  --color-000: #fff;
40
41  /*
42   * other colors
43   * ※ 利用しないカラーはコメントアウトする
44   */
45  /* red */
46  --color-red: #BC3737;
47  /* --color-red-light: #; */
48  /* --color-red-dark: #; */
49
50  /* green */
51  --color-green: #5EC54E;
52  /* --color-green-light: #; */
53  /* --color-green-dark: #; */
54
55  /* blue */
56  --color-blue: #2174BE;
57  /* --color-blue-light: #; */
58  /* --color-blue-dark: #; */
59
60  /*
61   * extra colors
62   * 上記のデフォルトカラーに加え、サイト独自に利用したいカラーを設定
63   * --color-ex-yellow: #D9CA47; のように -ex- をつけ追加色であることを明示的にする
64   */
65   --color-ex-background: #21282C;
66}