先人の方々の記事で興味を持ちました。私も参加してみたいと思います。
つよつよ民のみなさまが、その他の環境用に関しても、おって公開してくださるということでよろしいでしょうか(他力本願)。

先人様方の取り組み↓

注意事項

私は 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>

参照