Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hta393939

[n番煎じ] デジタル庁公開のデザインシステムを色だけcssに落とし込んでみた。

Posted at

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

先人様方の取り組み↓

注意事項

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

参照

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?