feat(spindle-tokens): generate CSS shadow tokens

[herablog]

shadowのtokenを @openameba/spindle-tokens から利用できるようにしました。

定義ファイルを元に以下のようなCSSが生成されます。アプリケーションでは box-shadow として --shadow-box-lv* or drop-shadow --shadow-drop-lv* を使います。

spindle-tokens-shadow.css

:root {
  --shadow-drop-shadow-lv2-normal-blur-radius: 3.875px;
  --shadow-drop-shadow-lv2-normal-color: rgba(8, 18, 26, 0.12);
  --shadow-drop-shadow-lv2-normal-inset: false;
  --shadow-drop-shadow-lv2-normal-offset-x: 0;
  --shadow-drop-shadow-lv2-normal-offset-y: 3.25px;
  --shadow-drop-shadow-lv2-normal-spread-radius: 0;
  --shadow-drop-shadow-lv2-strong-blur-radius: 3.875px;
  --shadow-drop-shadow-lv2-strong-color: rgba(8, 18, 26, 0.24);
  --shadow-drop-shadow-lv2-strong-inset: false;
  --shadow-drop-shadow-lv2-strong-offset-x: 0;
  --shadow-drop-shadow-lv2-strong-offset-y: 3.25px;
  --shadow-drop-shadow-lv2-strong-spread-radius: 0;
  --shadow-drop-shadow-lv2-weak-blur-radius: 3.875px;
  --shadow-drop-shadow-lv2-weak-color: rgba(8, 18, 26, 0.06);
  --shadow-drop-shadow-lv2-weak-inset: false;
  --shadow-drop-shadow-lv2-weak-offset-x: 0;
  --shadow-drop-shadow-lv2-weak-offset-y: 3.25px;
  --shadow-drop-shadow-lv2-weak-spread-radius: 0;
  --shadow-drop-shadow-lv4-normal-blur-radius: 7.125px;
  --shadow-drop-shadow-lv4-normal-color: rgba(8, 18, 26, 0.12);
  --shadow-drop-shadow-lv4-normal-inset: false;
  --shadow-drop-shadow-lv4-normal-offset-x: 0;
  --shadow-drop-shadow-lv4-normal-offset-y: 4.75px;
  --shadow-drop-shadow-lv4-normal-spread-radius: 0;
  --shadow-drop-shadow-lv4-strong-blur-radius: 7.125px;
  --shadow-drop-shadow-lv4-strong-color: rgba(8, 18, 26, 0.24);
  --shadow-drop-shadow-lv4-strong-inset: false;
  --shadow-drop-shadow-lv4-strong-offset-x: 0;
  --shadow-drop-shadow-lv4-strong-offset-y: 4.75px;
  --shadow-drop-shadow-lv4-strong-spread-radius: 0;
  --shadow-drop-shadow-lv4-weak-blur-radius: 7.125px;
  --shadow-drop-shadow-lv4-weak-color: rgba(8, 18, 26, 0.06);
  --shadow-drop-shadow-lv4-weak-inset: false;
  --shadow-drop-shadow-lv4-weak-offset-x: 0;
  --shadow-drop-shadow-lv4-weak-offset-y: 4.75px;
  --shadow-drop-shadow-lv4-weak-spread-radius: 0;
  --shadow-drop-shadow-lv6-normal-blur-radius: 14px;
  --shadow-drop-shadow-lv6-normal-color: rgba(8, 18, 26, 0.12);
  --shadow-drop-shadow-lv6-normal-inset: false;
  --shadow-drop-shadow-lv6-normal-offset-x: 0;
  --shadow-drop-shadow-lv6-normal-offset-y: 11px;
  --shadow-drop-shadow-lv6-normal-spread-radius: 0;
  --shadow-drop-shadow-lv6-strong-blur-radius: 14px;
  --shadow-drop-shadow-lv6-strong-color: rgba(8, 18, 26, 0.24);
  --shadow-drop-shadow-lv6-strong-inset: false;
  --shadow-drop-shadow-lv6-strong-offset-x: 0;
  --shadow-drop-shadow-lv6-strong-offset-y: 11px;
  --shadow-drop-shadow-lv6-strong-spread-radius: 0;
  --shadow-drop-shadow-lv6-weak-blur-radius: 14px;
  --shadow-drop-shadow-lv6-weak-color: rgba(8, 18, 26, 0.06);
  --shadow-drop-shadow-lv6-weak-inset: false;
  --shadow-drop-shadow-lv6-weak-offset-x: 0;
  --shadow-drop-shadow-lv6-weak-offset-y: 11px;
  --shadow-drop-shadow-lv6-weak-spread-radius: 0;
  --shadow-box-lv2: var(--shadow-drop-shadow-lv2-offset-x) var(--shadow-drop-shadow-lv2-offset-y) calc(var(--shadow-drop-shadow-lv2-blur-radius) * 2) var(--shadow-drop-shadow-lv2-color);
  --shadow-box-lv4: var(--shadow-drop-shadow-lv4-offset-x) var(--shadow-drop-shadow-lv4-offset-y) calc(var(--shadow-drop-shadow-lv4-blur-radius) * 2) var(--shadow-drop-shadow-lv4-color);
  --shadow-box-lv6: var(--shadow-drop-shadow-lv6-offset-x) var(--shadow-drop-shadow-lv6-offset-y) calc(var(--shadow-drop-shadow-lv6-blur-radius) * 2) var(--shadow-drop-shadow-lv6-color);
  --shadow-drop-lv2: var(--shadow-drop-shadow-lv2-offset-x) var(--shadow-drop-shadow-lv2-offset-y) var(--shadow-drop-shadow-lv2-blur-radius) var(--shadow-drop-shadow-lv2-color);
  --shadow-drop-lv4: var(--shadow-drop-shadow-lv4-offset-x) var(--shadow-drop-shadow-lv4-offset-y) var(--shadow-drop-shadow-lv4-blur-radius) var(--shadow-drop-shadow-lv4-color);
  --shadow-drop-lv6: var(--shadow-drop-shadow-lv6-offset-x) var(--shadow-drop-shadow-lv6-offset-y) var(--shadow-drop-shadow-lv6-blur-radius) var(--shadow-drop-shadow-lv6-color);
}

Spindle Tokenは必要なカテゴリのみimportして利用する想定です。

npm i @openameba/spindle-tokens

import '@openameba/spindle-tokens/dist/css/spindle-tokens-shadow.css';

[herablog]

#1067 忘れてたんで、そちらマージ後書き換えます

[kc7891]

LGTM