先人の方々の記事で興味を持ちました。私も参加してみたいと思います。
つよつよ民のみなさまが、その他の環境用に関しても、おって公開してくださるということでよろしいでしょうか(他力本願)。
先人様方の取り組み↓
注意事項
- 私は web コンテンツ生成に関しては素人です。今時のフレームワークとか sass とかはわかりません。
- 色だけです。ボーダー太さやフォントウェイトは含んでいません。
- ライセンスは @kage1020 氏にならって、CC-BY-4.0 です。
darken
darken Sea-800 13%, darken Sea-300 10%, については
2023/7/17 現在の資料画像をカラーピックするとそれぞれ Sea-900, Sea-400 と一致するんですよね。
単なる説明文字の変更忘れなのかそれとも本当は darken の方の色にしたかったのか、わからないです。
ソース
プリミティブトークンとセマンティックトークンにファイルを分けました。
primitivecolors.css
@charset "UTF-8";
/*! Licensed by CC-BY-4.0 (c) 2023 internet authors */
:root {
--white: #ffffff;
--sea-1200: #00004f;
--sea-1100: #000060;
--sea-1000: #000071;
--sea-900: #000082;
--sea-800: #0017c1;
--sea-700: #0031db;
--sea-600: #1a3ee8;
--sea-500: #264af4;
--sea-400: #4979f5;
--sea-300: #7096f8;
--sea-200: #9db7f9;
--sea-100: #c5d7fb;
--sea-50: #e8f1fe;
--sea-800-d13p: #000082;
--sea-300-d10p: #4979f5;
--sumi-1200: #000000;
--sumi-1100: #080808;
--sumi-1000: #111111;
--sumi-900: #1a1a1c;
--sumi-800: #414143;
--sumi-700: #626264;
--sumi-600: #7f7f78;
--sumi-500: #949497;
--sumi-400: #b4b4b7;
--sumi-300: #d8d8db;
--sumi-200: #e8e8eb;
--sumi-100: #f1f1f4;
--sumi-50: #f8f8fb;
--forest-1200: #032213;
--forest-1100: #08351f;
--forest-1000: #0c472a;
--forest-900: #115a36;
--forest-800: #197a4b;
--forest-700: #1d8b56;
--forest-600: #259d63;
--forest-500: #2cac6e;
--forest-400: #51b883;
--forest-300: #71c598;
--forest-200: #9bd4b5;
--forest-100: #c2e5d1;
--forest-50: #e6f5ec;
--wood-1200: #662e00;
--wood-1100: #8e3b00;
--wood-1000: #9c4600;
--wood-900: #b65200;
--wood-800: #c16800;
--wood-700: #c87504;
--wood-600: #cd820a;
--wood-500: #d18d0f;
--wood-400: #d69c2b;
--wood-300: #dcac4d;
--wood-200: #e1c383;
--wood-100: #e7d8b9;
--wood-50: #f3eee5;
--sun-1200: #640101;
--sun-1100: #890101;
--sun-1000: #af0000;
--sun-900: #d50000;
--sun-800: #ec0000;
--sun-700: #fa1606;
--sun-600: #ff220d;
--sun-500: #ff4b36;
--sun-400: #ff5838;
--sun-300: #ff7b5c;
--sun-200: #ffa28b;
--sun-100: #ffc8b8;
--sun-50: #ffe7e6;
}
semanticcolors.css
@charset "UTF-8";
/*! Licensed by CC-BY-4.0 (c) 2023 internet authors */
:root {
--text-light-body: var(--sumi-900);
--text-light-description: var(--sumi-700);
--text-light-place-holder: var(--sumi-600);
--text-light-on-fill: var(--white);
--text-light-link: var(--sea-800);
--text-light-hover: var(--sea-900);
--text-light-active: var(--sea-900);
--text-light-visited: var(--sea-900);
--text-light-alert: var(--sun-800);
--text-light-disabled: var(--sumi-500);
--text-dark-body: var(--white);
--text-dark-description: var(--sumi-400);
--text-dark-place-holder: var(--sumi-500);
--text-dark-on-fill: var(--white);
--text-dark-link: var(--sea-300);
--text-dark-hover: var(--sea-200);
--text-dark-active: var(--sea-200);
--text-dark-visited: var(--sea-200);
--text-dark-alert: var(--sun-500);
--text-dark-disabled: var(--sumi-600);
--background-light-primary: var(--white);
--background-light-secondary: var(--sumi-100);
--background-light-tertiary: var(--sumi-50);
--background-dark-primary: var(--sumi-900);
--background-dark-secondary: var(--sumi-700);
--background-dark-tertiary: var(--sumi-800);
--border-light-field: var(--sumi-900);
--border-light-divider: var(--sumi-300);
--border-light-focused: var(--wood-600);
--border-light-selected: var(--sea-800);
--border-light-alert: var(--sun-800);
--border-light-disabled: var(--sumi-300);
--border-dark-field: var(--white);
--border-dark-divider: var(--sumi-700);
--border-dark-focused: var(--wood-600);
--border-dark-selected: var(--sea-300);
--border-dark-alert: var(--sun-500);
--border-dark-disabled: var(--sumi-300);
--icon-light-label: var(--sumi-900);
--icon-light-active: var(--sea-800);
--icon-light-alert: var(--sun-800);
--icon-light-disabled: var(--sumi-500);
--icon-dark-label: var(--white);
--icon-dark-active: var(--sea-300);
--icon-dark-alert: var(--sun-500);
--icon-dark-disabled: var(--sumi-600);
--status-light-success: var(--forest-600);
--status-light-alert: var(--sun-800);
--status-light-warning: var(--wood-800);
--status-dark-sucess: var(--forest-600);
--status-dark-alert: var(--sun-500);
--status-dark-warning: var(--wood-500);
--button-light-normal: var(--sea-800);
--button-light-hover: var(--sea-800-d13p);
--button-light-active: var(--sea-800-d13p);
--button-light-disabled-bg: var(--sumi-500);
--button-dark-normal: var(--sea-300);
--button-dark-hover: var(--sea-300-d10p);
--button-dark-active: var(--sea-300-d10p);
--button-dark-disabled: var(--sumi-500);
--chart-light-primary: var(--sea-800);
--chart-light-secondary: var(--sea-400);
--chart-dark-primary: var(--sea-100);
--chart-dark-secondary: var(--sea-300);
}
使用方法は以下のようになります。
example.css
@charset "UTF-8";
/*! Licensed by CC-BY-4.0 (c) 2023 internet users */
html {
background-color: var(--background-light-primary);
}
body {
color: var(--text-light-body);
letter-spacing: 0.04em;
}
a {
color: var(--text-light-link);
}
a:hover {
color: var(--text-light-hover);
}
a:active {
color: var(--text-light-active);
}
a:visited {
color: var(--text-light-visited);
}
h1 {
margin-top: 64px;
margin-bottom: 24px;
}
h2 {
margin-top: 64px;
margin-bottom: 24px;
}
h3 {
margin-top: 40px;
margin-bottom: 24px;
}
h4 {
margin-top: 40px;
margin-bottom: 16px;
}
h5 {
margin-top: 40px;
margin-bottom: 16px;
}
h6 {
margin-top: 24px;
margin-bottom: 16px;
}
body {
margin: 40px;
}
@media screen and (max-width: 960px) {
body {
margin: 40px;
}
}
@media screen and (max-width: 520px) {
body {
margin: 16px;
}
}
example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>使用例</title>
<link rel="stylesheet" href="primitivecolors.css" />
<link rel="stylesheet" href="semanticcolors.css" />
<link rel="stylesheet" href="example.css" />
</head>
<body>
<h1>ヘッドライン</h1>
<div>ぴよ。</div>
<h2>リンク</h2>
<div><a href="https://www.digital.go.jp/">https://www.digital.go.jp/</a></div>
</body>
</html>
参照