app

commit 55f80f2b70d5152388205d64e943e1fba0d064fb
parent 8868a5d96acf0e8e31bca2bd3db08105456c06bc
Author: triesap <triesap@radroots.dev>
Date:   Wed, 21 Jan 2026 19:47:04 +0000

ui: add ios design tokens css

- add token stylesheet with color type spacing and motion

- include dark mode and reduced motion variants

- export tokens css in ui-tokens crate

- add unit test for non-empty tokens payload

Diffstat:
A
crates/ui-tokens/assets/tokens.css
 | 
96
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
crates/ui-tokens/src/lib.rs
 | 
20
++++++++++++++++++++

2 files changed, 116 insertions(+), 0 deletions(-)
diff --git a/crates/ui-tokens/assets/tokens.css b/crates/ui-tokens/assets/tokens.css
@@ -0,0 +1,96 @@
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  --bg-app: #f2f2f7;
+  --bg-grouped: #f2f2f7;
+  --bg-elevated: #ffffff;
+
+  --text-primary: #111111;
+  --text-secondary: #3c3c43;
+  --text-tertiary: #6e6e73;
+
+  --separator: rgba(60, 60, 67, 0.29);
+  --stroke: rgba(60, 60, 67, 0.18);
+
+  --accent: #007aff;
+  --accent-contrast: #ffffff;
+
+  --destructive: #ff3b30;
+  --warning: #ff9500;
+  --success: #34c759;
+
+  --type-largeTitle: 34px/41px;
+  --type-title1: 28px/34px;
+  --type-title2: 22px/28px;
+  --type-title3: 20px/25px;
+  --type-headline: 17px/22px;
+  --type-body: 17px/22px;
+  --type-callout: 16px/21px;
+  --type-subheadline: 15px/20px;
+  --type-footnote: 13px/18px;
+  --type-caption1: 12px/16px;
+  --type-caption2: 11px/13px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.08);
+  --shadow-2: 0 8px 20px rgba(0, 0, 0, 0.12);
+  --shadow-popover: 0 12px 30px rgba(0, 0, 0, 0.18);
+  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, 0.18);
+
+  --material-thin: rgba(255, 255, 255, 0.55);
+  --material-regular: rgba(255, 255, 255, 0.72);
+  --material-thick: rgba(255, 255, 255, 0.85);
+  --material-chrome: rgba(242, 242, 247, 0.9);
+
+  --dur-1: 120ms;
+  --dur-2: 180ms;
+  --dur-3: 240ms;
+  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
+
+  --safe-b: env(safe-area-inset-bottom);
+  --safe-t: env(safe-area-inset-top);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-app: #000000;
+    --bg-grouped: #1c1c1e;
+    --bg-elevated: #2c2c2e;
+
+    --text-primary: #f5f5f7;
+    --text-secondary: #a1a1a6;
+    --text-tertiary: #6e6e73;
+
+    --separator: rgba(84, 84, 88, 0.65);
+    --stroke: rgba(84, 84, 88, 0.35);
+
+    --accent: #0a84ff;
+    --accent-contrast: #ffffff;
+
+    --material-thin: rgba(44, 44, 46, 0.5);
+    --material-regular: rgba(44, 44, 46, 0.72);
+    --material-thick: rgba(44, 44, 46, 0.85);
+    --material-chrome: rgba(28, 28, 30, 0.9);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-1: 1ms;
+    --dur-2: 1ms;
+    --dur-3: 1ms;
+  }
+}
diff --git a/crates/ui-tokens/src/lib.rs b/crates/ui-tokens/src/lib.rs
@@ -1 +1,21 @@
 #![forbid(unsafe_code)]
+
+pub const RADROOTS_APP_UI_TOKENS_CSS: &str = include_str!("../assets/tokens.css");
+
+pub struct RadrootsAppUiTokens;
+
+impl RadrootsAppUiTokens {
+    pub const fn css() -> &'static str {
+        RADROOTS_APP_UI_TOKENS_CSS
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::RADROOTS_APP_UI_TOKENS_CSS;
+
+    #[test]
+    fn tokens_css_is_not_empty() {
+        assert!(!RADROOTS_APP_UI_TOKENS_CSS.trim().is_empty());
+    }
+}