Tokens
`--tw-*` デザイントークン（v0.1.0）
Colors
-
--tw-bg-page
#efefef
-
--tw-bg-highlight
#ffffff
-
--tw-text-main
#494949
-
--tw-text-caption
#747474
-
--tw-text-highlight
#000000
-
--tw-bg-button-main
#3b3b3b
-
--tw-bg-button-optional
#e1e1e1
-
--tw-bg-button-hover
#000000
-
--tw-alert
#bc2f2f
Typography / spacing
| Token |
Value |
--tw-fz-root |
16 |
--tw-heading-lh |
1.04 |
--tw-body-text-lh |
1.7 |
--tw-caption-lh |
1.3 |
--tw-font-sans |
"Inter", "Noto Sans JP", sans-serif |
--tw-global-px |
100 |
--tw-global-radius |
5 |
--tw-global-radius-minor |
3 |
Breakpoints（unitless px）
| Token |
Value |
--tw-bp-sm-start … --tw-bp-sm-end |
320 … 480 |
--tw-bp-md-start … --tw-bp-md-end |
481 … 1279 |
--tw-bp-lg-start … --tw-bp-lg-end |
1280 … 1679 |
--tw-bp-xl-start … --tw-bp-xl-end |
1680 … 2560 |
サンプルコード
CSS
@import "@b4moss/the-wheels/style";
.card {
background: var(--tw-bg-highlight);
color: var(--tw-text-main);
border-radius: calc(var(--tw-global-radius) / 10 * 1rem);
padding: 1.6rem;
}
.card__caption {
color: var(--tw-text-caption);
line-height: var(--tw-caption-lh);
}