creo-ui (Rust)

Creo UI Design System tokens for Rust consumers.

単一の W3C Design Tokens (DTCG) から生成された pub const 定義 (色 / 余白 / typography / radius / shadow) を creo_ui::tokens モジュールとして提供する。

インストール

まだ crates.io に publish していない。Phase 2 で公開予定。現時点では path dependency または git dependency で参照する:

# Cargo.toml (path 参照の例)
[dependencies]
creo-ui = { path = "../creo-ui/packages/rust" }

# Cargo.toml (git 参照の例)
[dependencies]
creo-ui = { git = "https://github.com/chronista-club/creo-ui.git" }

使い方

use creo_ui::tokens;

fn main() {
    // Color は Rgb { r: u8, g: u8, b: u8 } 構造体
    let brand = tokens::COLOR_BRAND_PRIMARY;
    println!("brand primary = rgb({}, {}, {})", brand.r, brand.g, brand.b);

    // Dimension は f32 (px 単位)
    let md = tokens::SPACING_MD;
    assert_eq!(md, 16.0_f32);

    // Typography の family 等は &'static str
    let font = tokens::TYPOGRAPHY_FAMILY_SANS;
    println!("sans = {}", font);
}

ratatui / image 等との連携

Rgb 構造体に as_array() が生えているので [u8; 3] 経由で他ライブラリの色型に渡せる:

use creo_ui::tokens::COLOR_BRAND_PRIMARY;

// ratatui
let bg = ratatui::style::Color::Rgb(
    COLOR_BRAND_PRIMARY.r,
    COLOR_BRAND_PRIMARY.g,
    COLOR_BRAND_PRIMARY.b,
);

// image crate
let pixel = image::Rgb(COLOR_BRAND_PRIMARY.as_array());

ratatui interop (`features = ["ratatui"]`)

creo_ui::ratatui 下に Color 変換と palette helper、character cell padding が生えている:

use creo_ui::ratatui as creo_rat;
use creo_ui::tokens;

let title_style = ratatui::style::Style::default()
    .fg(creo_rat::color(tokens::COLOR_BRAND_PRIMARY))
    .bg(creo_rat::palette::bg_base())
    .add_modifier(ratatui::style::Modifier::BOLD);

// spacing token を character cell 数 (8px/cell 仮定) で扱う
let left_pad = creo_rat::pad::md(); // 18px → 2 cells

egui interop (`features = ["egui"]`)

creo_ui::egui で mint-dark baseline の Visuals を egui Context にワンショット適用できる。Rgb → Color32 変換も const fn として生えている:

use creo_ui::egui as creo_eg;
use creo_ui::tokens;

fn setup(ctx: &egui::Context) {
    // Creo mint-dark theme を Visuals に一括反映 (surface / widgets / selection
    // / hyperlink / error・warning tint まで)
    creo_eg::apply_creo_theme(ctx);
}

// Visuals を直接取得して部分 override したい場合
let mut v = creo_eg::creo_visuals();
v.window_rounding = 8.0.into();

// 単発の Color32 変換 (const 文脈でも OK)
const BRAND: egui::Color32 = creo_eg::to_color32(tokens::COLOR_BRAND_PRIMARY);
let info: egui::Color32 = tokens::COLOR_SEMANTIC_INFO.into();

提供するトークン

Category	命名	型
`color.*`	`COLOR_BRAND_PRIMARY`, `COLOR_SEMANTIC_ERROR` 等	`Rgb { r, g, b }` (u8)
`spacing.*`	`SPACING_XS`, `SPACING_MD` 等 (5 step)	`f32` (px)
`margin.*`	`MARGIN_XS`, `MARGIN_MD` 等 (5 step)	`f32` (px)
`radius.*`	`RADIUS_NONE`, `RADIUS_XS` ... `RADIUS_FULL` (5 step + special)	`f32`
`typography.size.*`	`TYPOGRAPHY_SIZE_MD` 等 (body text, 5 step)	`f32` (px)
`typography.display.*`	`TYPOGRAPHY_DISPLAY_MD` 等 (heading, 5 step)	`f32` (px)
`layout.gap.*`	`LAYOUT_GAP_SIBLING` 等 (semantic between-ness)	`f32` (px)
`layout.target.*`	`LAYOUT_TARGET_TAP` (=44) / `FOCUS` / `HIT` (Apple HIG accessibility)	`f32` (px)
`typography.title.*`	`TYPOGRAPHY_TITLE_PAGE` 等 (role-based headings, hero/page/section/subsection/card)	`f32` (px)
`typography.body.*`	`TYPOGRAPHY_BODY_DEFAULT` 等 (role-based body, lead/default/emphasis/helper/caption)	`f32` (px)
`typography.weight.*`	`TYPOGRAPHY_WEIGHT_REGULAR` 等	`f32`
`typography.family.` / `shadow.`	`TYPOGRAPHY_FAMILY_SANS`, `SHADOW_MD` 等	`&'static str`

全定数は packages/rust/src/generated/tokens.rs で確認できる (Style Dictionary が bun run build:rust で自動生成)。

Build 要件

Rust edition 2024 (rust-version = "1.95" を mise と揃えている)
#![forbid(unsafe_code)]
creo_ui::tokens は include!() で外部 module に取り込まれる設計 (src/lib.rs:21)

License

Apache-2.0 — LICENSE

creo-ui 0.3.0