@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/styles/Theme.kt

@@ -0,0 +1,246 @@
+// Generated by ui-theme from "Barbershop default". Do not edit.
+package com.jcsoftdev.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+
+class ThemeColors(
+    val bg: Color,
+    val surface: Color,
+    val surface2: Color,
+    val sunken: Color,
+    val float: Color,
+    val line: Color,
+    val lineStrong: Color,
+    val lineControl: Color,
+    val hair: Color,
+    val track: Color,
+    val segTrack: Color,
+    val segOn: Color,
+    val ink: Color,
+    val ink2: Color,
+    val ink3: Color,
+    val accent: Color,
+    val onAccent: Color,
+    val accentInk: Color,
+    val accentWord: Color,
+    val accentSoft: Color,
+    val accentLine: Color,
+    val accent2: Color,
+    val danger: Color,
+    val dangerSoft: Color,
+    val warning: Color,
+    val warningSoft: Color,
+    val success: Color,
+    val successSoft: Color,
+    val hatch: Color,
+    val scrim: Color,
+    val toastBg: Color,
+    val toastInk: Color,
+    val chartCat1: Color,
+    val chartCat2: Color,
+    val chartCat3: Color,
+    val chartCat4: Color,
+    val chartCat5: Color,
+    val chartCat6: Color,
+    val chartCat7: Color,
+    val chartCatReserve: Color,
+    val chartGrid: Color,
+    val chartCrosshair: Color,
+    val chartUp: Color,
+    val chartDown: Color,
+    val chartTotal: Color,
+)
+
+object UiColors {
+    val Light = ThemeColors(
+        bg = Color(0xFFF4F4F8),
+        surface = Color(0xFFFFFFFF),
+        surface2 = Color(0xFFEEEEF1),
+        sunken = Color(0xFFE7E7ED),
+        float = Color(0xFFFFFFFF),
+        line = Color(0xFFE3E3E6),
+        lineStrong = Color(0xFFD2D2DC),
+        lineControl = Color(0xFF85858F),
+        hair = Color(0x1C000000),
+        track = Color(0xFFDEDEE2),
+        segTrack = Color(0xFFE7E7ED),
+        segOn = Color(0xFFFFFFFF),
+        ink = Color(0xFF000000),
+        ink2 = Color(0xFF4B4B57),
+        ink3 = Color(0xFF6D6D7A),
+        accent = Color(0xFFFAA2A2),
+        onAccent = Color(0xFF3F191A),
+        accentInk = Color(0xFFA43A41),
+        accentWord = Color(0xFFDC5D63),
+        accentSoft = Color(0xFFFFEBEA),
+        accentLine = Color(0xFFF6C2C1),
+        accent2 = Color(0xFFFEC79E),
+        danger = Color(0xFFC51F1C),
+        dangerSoft = Color(0xFFFFEBE8),
+        warning = Color(0xFF865900),
+        warningSoft = Color(0xFFFEEFCF),
+        success = Color(0xFF0B7643),
+        successSoft = Color(0xFFDFF8E6),
+        hatch = Color(0xFFE6E6EC),
+        scrim = Color(0x33000000),
+        toastBg = Color(0xFF000000),
+        toastInk = Color(0xFFFFFFFF),
+        chartCat1 = Color(0xFF2F7FC1),
+        chartCat2 = Color(0xFF12936F),
+        chartCat3 = Color(0xFFC7820F),
+        chartCat4 = Color(0xFF6D5BD8),
+        chartCat5 = Color(0xFFBD4B95),
+        chartCat6 = Color(0xFF5F6B7D),
+        chartCat7 = Color(0xFF788F22),
+        chartCatReserve = Color(0xFFDC5D63),
+        chartGrid = Color(0x0F000000),
+        chartCrosshair = Color(0x4D000000),
+        chartUp = Color(0xFF0F8A55),
+        chartDown = Color(0xFFD23B35),
+        chartTotal = Color(0xFF3E4656),
+    )
+    val Dark = ThemeColors(
+        bg = Color(0xFF000000),
+        surface = Color(0xFF0E0E10),
+        surface2 = Color(0xFF1A1A1D),
+        sunken = Color(0xFF232327),
+        float = Color(0xFF141417),
+        line = Color(0xFF1F1F23),
+        lineStrong = Color(0xFF303036),
+        lineControl = Color(0xFF6E6E7A),
+        hair = Color(0x1AFFFFFF),
+        track = Color(0xFF232327),
+        segTrack = Color(0xFF151518),
+        segOn = Color(0xFF2B2B30),
+        ink = Color(0xFFF2F2F5),
+        ink2 = Color(0xFFB6B6C1),
+        ink3 = Color(0xFF8C8C98),
+        accent = Color(0xFFFAA2A2),
+        onAccent = Color(0xFF3F191A),
+        accentInk = Color(0xFFFFB4B3),
+        accentWord = Color(0xFFFAA2A2),
+        accentSoft = Color(0xFF261112),
+        accentLine = Color(0xFF5B2E2F),
+        accent2 = Color(0xFFFEC79E),
+        danger = Color(0xFFFF9689),
+        dangerSoft = Color(0xFF300F0B),
+        warning = Color(0xFFEBC166),
+        warningSoft = Color(0xFF241900),
+        success = Color(0xFF80DBA2),
+        successSoft = Color(0xFF062111),
+        hatch = Color(0xFF1B1B1F),
+        scrim = Color(0xB8000000),
+        toastBg = Color(0xFF222226),
+        toastInk = Color(0xFFF2F2F5),
+        chartCat1 = Color(0xFF6DB8F2),
+        chartCat2 = Color(0xFF5FD0A6),
+        chartCat3 = Color(0xFFF0B85A),
+        chartCat4 = Color(0xFFAEA3FB),
+        chartCat5 = Color(0xFFEE9BD2),
+        chartCat6 = Color(0xFFA5AEBB),
+        chartCat7 = Color(0xFFBCD56B),
+        chartCatReserve = Color(0xFFF48F93),
+        chartGrid = Color(0x12FFFFFF),
+        chartCrosshair = Color(0x57FFFFFF),
+        chartUp = Color(0xFF5FD69B),
+        chartDown = Color(0xFFFF8F82),
+        chartTotal = Color(0xFFC3CAD6),
+    )
+}
+
+class AccentPalette(
+    val accent2: Color,
+    val accent: Color,
+    val onAccent: Color,
+    val accentInk: Color,
+    val accentWord: Color,
+    val accentSoft: Color,
+    val accentLine: Color,
+)
+
+object UiPalettes {
+    val Light: Map<String, AccentPalette> = mapOf(
+        "durazno" to AccentPalette(Color(0xFFE1D695), Color(0xFFEFAE75), Color(0xFF3B1F02), Color(0xFF905203), Color(0xFFC97405), Color(0xFFFFECDE), Color(0xFFEEC9A9)),
+        "menta" to AccentPalette(Color(0xFF8EE5ED), Color(0xFF77D3AD), Color(0xFF002F1F), Color(0xFF047554), Color(0xFF03A578), Color(0xFFE0F7EB), Color(0xFFADDEC7)),
+        "cielo" to AccentPalette(Color(0xFFC6D2FF), Color(0xFF76C9F8), Color(0xFF002A3E), Color(0xFF006C97), Color(0xFF0097D2), Color(0xFFE1F3FE), Color(0xFFABD8F3)),
+        "lavanda" to AccentPalette(Color(0xFFF2C1F3), Color(0xFFBAB3FE), Color(0xFF252142), Color(0xFF6152AD), Color(0xFF8979E6), Color(0xFFEFEEFF), Color(0xFFCECBF7)),
+        "orquidea" to AccentPalette(Color(0xFFFEC2C5), Color(0xFFEAA3D5), Color(0xFF391A31), Color(0xFF933E7F), Color(0xFFC861AD), Color(0xFFFEE9F7), Color(0xFFECC2DF)),
+        "grafito" to AccentPalette(Color(0xFFB9B9C6), Color(0xFF26262B), Color(0xFFFFFFFF), Color(0xFF26262B), Color(0xFF8A8A94), Color(0xFFECECF0), Color(0xFFC6C6CF)),
+    )
+    val Dark: Map<String, AccentPalette> = mapOf(
+        "durazno" to AccentPalette(Color(0xFFE1D695), Color(0xFFEFAE75), Color(0xFF3B1F02), Color(0xFFF6BE8E), Color(0xFFEFAE75), Color(0xFF241406), Color(0xFF553515)),
+        "menta" to AccentPalette(Color(0xFF8EE5ED), Color(0xFF77D3AD), Color(0xFF002F1F), Color(0xFF91DEBC), Color(0xFF77D3AD), Color(0xFF061D14), Color(0xFF134834)),
+        "cielo" to AccentPalette(Color(0xFFC6D2FF), Color(0xFF76C9F8), Color(0xFF002A3E), Color(0xFF8FD5FD), Color(0xFF76C9F8), Color(0xFF061B26), Color(0xFF12425A)),
+        "lavanda" to AccentPalette(Color(0xFFF2C1F3), Color(0xFFBAB3FE), Color(0xFF252142), Color(0xFFC7C2FF), Color(0xFFBAB3FE), Color(0xFF171627), Color(0xFF3C375D)),
+        "orquidea" to AccentPalette(Color(0xFFFEC2C5), Color(0xFFEAA3D5), Color(0xFF391A31), Color(0xFFF2B4DF), Color(0xFFEAA3D5), Color(0xFF23121E), Color(0xFF532F49)),
+        "grafito" to AccentPalette(Color(0xFF5A5A66), Color(0xFFECECF0), Color(0xFF1A1A1E), Color(0xFFECECF0), Color(0xFFA3A3AD), Color(0xFF1D1D21), Color(0xFF3A3A42)),
+    )
+}
+
+object UiShapes {
+    val xs = RoundedCornerShape(4.dp)
+    val chip = RoundedCornerShape(6.dp)
+    val event = RoundedCornerShape(10.dp)
+    val control = RoundedCornerShape(12.dp)
+    val tile = RoundedCornerShape(12.dp)
+    val banner = RoundedCornerShape(14.dp)
+    val card = RoundedCornerShape(16.dp)
+    val dialog = RoundedCornerShape(20.dp)
+    val sheet = RoundedCornerShape(36.dp)
+    val pill = RoundedCornerShape(50)
+}
+
+object UiSizes {
+    val space2 = 2.dp
+    val space4 = 4.dp
+    val space6 = 6.dp
+    val space8 = 8.dp
+    val space10 = 10.dp
+    val space12 = 12.dp
+    val space14 = 14.dp
+    val space16 = 16.dp
+    val space18 = 18.dp
+    val space28 = 28.dp
+    val sideWidth = 244.dp
+    val topHeight = 58.dp
+    val controlHeight = 36.dp
+    val controlHeightSm = 30.dp
+    val inputHeight = 38.dp
+    val agendaHour = 48.dp
+    val agendaCol = 148.dp
+    val mButton = 54.dp
+    val mTray = 52.dp
+    val mChip = 60.dp
+    val mHour = 78.dp
+}
+
+const val UiFontFamilyName = "Figtree"
+
+object UiTypography {
+    val kpiNumber = TextStyle(fontSize = 30.sp, fontWeight = FontWeight(800), lineHeight = 34.5.sp, letterSpacing = (-0.03).em)
+    val pageTitle = TextStyle(fontSize = 26.sp, fontWeight = FontWeight(800), lineHeight = 30.68.sp, letterSpacing = (-0.025).em)
+    val dialogTitle = TextStyle(fontSize = 16.sp, fontWeight = FontWeight(750), lineHeight = 22.4.sp)
+    val cardTitle = TextStyle(fontSize = 14.sp, fontWeight = FontWeight(700), lineHeight = 21.sp, letterSpacing = (-0.01).em)
+    val lede = TextStyle(fontSize = 14.5.sp, fontWeight = FontWeight(400), lineHeight = 21.75.sp)
+    val body = TextStyle(fontSize = 14.sp, fontWeight = FontWeight(400), lineHeight = 21.sp)
+    val rowTitle = TextStyle(fontSize = 13.5.sp, fontWeight = FontWeight(650), lineHeight = 20.25.sp)
+    val control = TextStyle(fontSize = 13.sp, fontWeight = FontWeight(650), lineHeight = 19.5.sp)
+    val meta = TextStyle(fontSize = 12.5.sp, fontWeight = FontWeight(400), lineHeight = 18.75.sp)
+    val chipText = TextStyle(fontSize = 12.sp, fontWeight = FontWeight(650), lineHeight = 12.sp)
+    val overline = TextStyle(fontSize = 11.sp, fontWeight = FontWeight(700), lineHeight = 16.5.sp, letterSpacing = (0.08).em)
+    val clock = TextStyle(fontSize = 17.sp, fontWeight = FontWeight(700), lineHeight = 17.sp)
+    val data = TextStyle(fontSize = 12.5.sp, fontWeight = FontWeight(600), lineHeight = 20.sp)
+    val count = TextStyle(fontSize = 11.sp, fontWeight = FontWeight(700), lineHeight = 11.sp)
+    val mTitle = TextStyle(fontSize = 34.sp, fontWeight = FontWeight(800), lineHeight = 41.sp, letterSpacing = (-0.025).em)
+    val mCardTitle = TextStyle(fontSize = 26.sp, fontWeight = FontWeight(800), lineHeight = 28.6.sp, letterSpacing = (-0.02).em)
+    val mRowTitle = TextStyle(fontSize = 15.5.sp, fontWeight = FontWeight(700), lineHeight = 20.15.sp)
+    val mBody = TextStyle(fontSize = 15.sp, fontWeight = FontWeight(400), lineHeight = 21.75.sp)
+    val mButton = TextStyle(fontSize = 15.5.sp, fontWeight = FontWeight(700), lineHeight = 15.5.sp)
+    val mMeta = TextStyle(fontSize = 13.sp, fontWeight = FontWeight(400), lineHeight = 18.2.sp)
+}

package/styles/base.css

@@ -0,0 +1,45 @@
+/* Minimal global rules driven by tokens. Import after tokens.css. */
+html,
+body {
+  margin: 0;
+}
+
+body {
+  background: var(--bg);
+  background-image: var(--page-backdrop, none);
+  color: var(--ink);
+  font: 400 14px/1.5 var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Layered so utilities such as `text-on-accent` on a <button> still win. */
+@layer base {
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent-ink));
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/styles/fonts.css

@@ -0,0 +1,2 @@
+/* Generated by ui-theme. Optional: skip it when the app loads fonts itself (e.g. next/font). */
+@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap");

package/styles/theme.css

@@ -0,0 +1,272 @@
+/* Generated by ui-theme from "Barbershop default". Do not edit. */
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+  --color-sunken: var(--sunken);
+  --color-float: var(--float);
+  --color-line: var(--line);
+  --color-line-strong: var(--line-strong);
+  --color-line-control: var(--line-control);
+  --color-hair: var(--hair);
+  --color-track: var(--track);
+  --color-seg-track: var(--seg-track);
+  --color-seg-on: var(--seg-on);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--ink-3);
+  --color-accent: var(--accent);
+  --color-on-accent: var(--on-accent);
+  --color-accent-ink: var(--accent-ink);
+  --color-accent-word: var(--accent-word);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-line: var(--accent-line);
+  --color-accent-2: var(--accent-2);
+  --color-pal-durazno-fill: var(--pal-durazno-fill);
+  --color-pal-durazno-deep: var(--pal-durazno-deep);
+  --color-pal-durazno-ink: var(--pal-durazno-ink);
+  --color-pal-durazno-word: var(--pal-durazno-word);
+  --color-pal-durazno-soft: var(--pal-durazno-soft);
+  --color-pal-durazno-line: var(--pal-durazno-line);
+  --color-pal-durazno-2: var(--pal-durazno-2);
+  --color-pal-menta-fill: var(--pal-menta-fill);
+  --color-pal-menta-deep: var(--pal-menta-deep);
+  --color-pal-menta-ink: var(--pal-menta-ink);
+  --color-pal-menta-word: var(--pal-menta-word);
+  --color-pal-menta-soft: var(--pal-menta-soft);
+  --color-pal-menta-line: var(--pal-menta-line);
+  --color-pal-menta-2: var(--pal-menta-2);
+  --color-pal-cielo-fill: var(--pal-cielo-fill);
+  --color-pal-cielo-deep: var(--pal-cielo-deep);
+  --color-pal-cielo-ink: var(--pal-cielo-ink);
+  --color-pal-cielo-word: var(--pal-cielo-word);
+  --color-pal-cielo-soft: var(--pal-cielo-soft);
+  --color-pal-cielo-line: var(--pal-cielo-line);
+  --color-pal-cielo-2: var(--pal-cielo-2);
+  --color-pal-lavanda-fill: var(--pal-lavanda-fill);
+  --color-pal-lavanda-deep: var(--pal-lavanda-deep);
+  --color-pal-lavanda-ink: var(--pal-lavanda-ink);
+  --color-pal-lavanda-word: var(--pal-lavanda-word);
+  --color-pal-lavanda-soft: var(--pal-lavanda-soft);
+  --color-pal-lavanda-line: var(--pal-lavanda-line);
+  --color-pal-lavanda-2: var(--pal-lavanda-2);
+  --color-pal-orquidea-fill: var(--pal-orquidea-fill);
+  --color-pal-orquidea-deep: var(--pal-orquidea-deep);
+  --color-pal-orquidea-ink: var(--pal-orquidea-ink);
+  --color-pal-orquidea-word: var(--pal-orquidea-word);
+  --color-pal-orquidea-soft: var(--pal-orquidea-soft);
+  --color-pal-orquidea-line: var(--pal-orquidea-line);
+  --color-pal-orquidea-2: var(--pal-orquidea-2);
+  --color-pal-grafito-fill: var(--pal-grafito-fill);
+  --color-pal-grafito-deep: var(--pal-grafito-deep);
+  --color-pal-grafito-ink: var(--pal-grafito-ink);
+  --color-pal-grafito-word: var(--pal-grafito-word);
+  --color-pal-grafito-soft: var(--pal-grafito-soft);
+  --color-pal-grafito-line: var(--pal-grafito-line);
+  --color-pal-grafito-2: var(--pal-grafito-2);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-hatch: var(--hatch);
+  --color-scrim: var(--scrim);
+  --color-toast-bg: var(--toast-bg);
+  --color-toast-ink: var(--toast-ink);
+  --color-chart-cat-1: var(--chart-cat-1);
+  --color-chart-cat-2: var(--chart-cat-2);
+  --color-chart-cat-3: var(--chart-cat-3);
+  --color-chart-cat-4: var(--chart-cat-4);
+  --color-chart-cat-5: var(--chart-cat-5);
+  --color-chart-cat-6: var(--chart-cat-6);
+  --color-chart-cat-7: var(--chart-cat-7);
+  --color-chart-cat-reserve: var(--chart-cat-reserve);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-crosshair: var(--chart-crosshair);
+  --color-chart-up: var(--chart-up);
+  --color-chart-down: var(--chart-down);
+  --color-chart-total: var(--chart-total);
+  --radius-xs: var(--radius-xs);
+  --radius-chip: var(--radius-chip);
+  --radius-event: var(--radius-event);
+  --radius-control: var(--radius-control);
+  --radius-tile: var(--radius-tile);
+  --radius-banner: var(--radius-banner);
+  --radius-card: var(--radius-card);
+  --radius-dialog: var(--radius-dialog);
+  --radius-sheet: var(--radius-sheet);
+  --radius-pill: var(--radius-pill);
+  --shadow-flat: var(--shadow-flat);
+  --shadow-hero: var(--shadow-hero);
+  --shadow-cta: var(--shadow-cta);
+  --shadow-sel: var(--shadow-sel);
+  --shadow-pop: var(--shadow-pop);
+  --spacing-side-width: var(--side-width);
+  --spacing-top-height: var(--top-height);
+  --spacing-control-height: var(--control-height);
+  --spacing-control-height-sm: var(--control-height-sm);
+  --spacing-input-height: var(--input-height);
+  --spacing-agenda-hour: var(--agenda-hour);
+  --spacing-agenda-col: var(--agenda-col);
+  --spacing-m-button: var(--m-button);
+  --spacing-m-tray: var(--m-tray);
+  --spacing-m-chip: var(--m-chip);
+  --spacing-m-hour: var(--m-hour);
+  --font-sans: var(--font-sans);
+  --text-kpi-number: 30px;
+  --text-kpi-number--line-height: 1.15;
+  --text-kpi-number--font-weight: 800;
+  --text-kpi-number--letter-spacing: -0.03em;
+  --text-page-title: 26px;
+  --text-page-title--line-height: 1.18;
+  --text-page-title--font-weight: 800;
+  --text-page-title--letter-spacing: -0.025em;
+  --text-dialog-title: 16px;
+  --text-dialog-title--line-height: 1.4;
+  --text-dialog-title--font-weight: 750;
+  --text-card-title: 14px;
+  --text-card-title--line-height: 1.5;
+  --text-card-title--font-weight: 700;
+  --text-card-title--letter-spacing: -0.01em;
+  --text-lede: 14.5px;
+  --text-lede--line-height: 1.5;
+  --text-lede--font-weight: 400;
+  --text-body: 14px;
+  --text-body--line-height: 1.5;
+  --text-body--font-weight: 400;
+  --text-row-title: 13.5px;
+  --text-row-title--line-height: 1.5;
+  --text-row-title--font-weight: 650;
+  --text-control: 13px;
+  --text-control--line-height: 1.5;
+  --text-control--font-weight: 650;
+  --text-meta: 12.5px;
+  --text-meta--line-height: 1.5;
+  --text-meta--font-weight: 400;
+  --text-chip-text: 12px;
+  --text-chip-text--line-height: 1;
+  --text-chip-text--font-weight: 650;
+  --text-overline: 11px;
+  --text-overline--line-height: 1.5;
+  --text-overline--font-weight: 700;
+  --text-overline--letter-spacing: 0.08em;
+  --text-clock: 17px;
+  --text-clock--line-height: 1;
+  --text-clock--font-weight: 700;
+  --text-data: 12.5px;
+  --text-data--line-height: 1.6;
+  --text-data--font-weight: 600;
+  --text-count: 11px;
+  --text-count--line-height: 1;
+  --text-count--font-weight: 700;
+  --text-m-title: 34px;
+  --text-m-title--line-height: 41px;
+  --text-m-title--font-weight: 800;
+  --text-m-title--letter-spacing: -0.025em;
+  --text-m-card-title: 26px;
+  --text-m-card-title--line-height: 1.1;
+  --text-m-card-title--font-weight: 800;
+  --text-m-card-title--letter-spacing: -0.02em;
+  --text-m-row-title: 15.5px;
+  --text-m-row-title--line-height: 1.3;
+  --text-m-row-title--font-weight: 700;
+  --text-m-body: 15px;
+  --text-m-body--line-height: 1.45;
+  --text-m-body--font-weight: 400;
+  --text-m-button: 15.5px;
+  --text-m-button--line-height: 1;
+  --text-m-button--font-weight: 700;
+  --text-m-meta: 13px;
+  --text-m-meta--line-height: 1.4;
+  --text-m-meta--font-weight: 400;
+  --radius-button: var(--radius-button);
+  --radius-input: var(--radius-input);
+  --radius-badge: var(--radius-badge);
+  --radius-avatar: var(--radius-avatar);
+  --radius-popover: var(--radius-popover);
+  --shadow-card: var(--shadow-card);
+  --shadow-raised: var(--shadow-raised);
+  --shadow-overlay: var(--shadow-overlay);
+  --shadow-control: var(--shadow-control);
+  --shadow-selected: var(--shadow-selected);
+  --shadow-inset: var(--shadow-inset);
+  --shadow-inset-accent: var(--shadow-inset-accent);
+  --shadow-pinned-start: var(--shadow-pinned-start);
+  --shadow-pinned-end: var(--shadow-pinned-end);
+  --color-surface-card: var(--surface-card);
+  --color-surface-control: var(--surface-control);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-backdrop: var(--surface-backdrop);
+  --color-divider: var(--border-color-divider);
+  --color-focus-ring: var(--focus-ring-color);
+  --blur-surface: var(--surface-blur);
+  --ease-style: var(--motion-ease);
+  --spacing-control: var(--control-height);
+  --spacing-control-sm: var(--control-height-sm);
+  --spacing-input: var(--input-height);
+  --spacing-control-x: var(--pad-control-x);
+  --spacing-card: var(--pad-card);
+  --spacing-density-sm: var(--gap-density-sm);
+  --spacing-density: var(--gap-density);
+  --spacing-density-lg: var(--gap-density-lg);
+}
+
+@utility border-card {
+  border-width: var(--border-width-card);
+  border-style: solid;
+  border-color: var(--border-color-card);
+}
+
+@utility border-control {
+  border-width: var(--border-width-control);
+  border-style: solid;
+  border-color: var(--border-color-control);
+}
+
+@utility border-divider {
+  border-width: var(--border-width-divider);
+  border-style: solid;
+  border-color: var(--border-color-divider);
+}
+
+@utility border-l-divider {
+  border-left: var(--border-width-divider) solid var(--border-color-divider);
+}
+
+@utility border-r-divider {
+  border-right: var(--border-width-divider) solid var(--border-color-divider);
+}
+
+@utility border-t-divider {
+  border-top: var(--border-width-divider) solid var(--border-color-divider);
+}
+
+@utility border-b-divider {
+  border-bottom: var(--border-width-divider) solid var(--border-color-divider);
+}
+
+@utility surface-card {
+  background-color: var(--surface-card);
+  -webkit-backdrop-filter: var(--surface-filter);
+  backdrop-filter: var(--surface-filter);
+}
+
+@utility surface-overlay {
+  background-color: var(--surface-overlay);
+  -webkit-backdrop-filter: var(--surface-filter);
+  backdrop-filter: var(--surface-filter);
+}
+
+@utility focus-ring {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+@utility pressable {
+  transition: scale var(--motion-duration) var(--motion-ease);
+  &:active:not(:disabled) {
+    scale: var(--press-scale);
+  }
+}