/* =========================================================================== Trustoo UI — Design System Source: ❖ Foundations.fig + ❖ Dashboard components (new).fig USAGE ───── 1. Copy this file + the fonts/ folder to your project (keep them together) 2. HTML: 3. React: import 'path/to/trustoo-ui.css' TOKEN NAMING ──────────── Primitives: --gray-*, --brand-*, --error-*, --warning-*, --success-*, --green-* (Trustoo brand), --orange-* (quality indicator) Semantics: --text-*, --bg-*, --fg-*, --border-* Effects: --shadow-*, --ring-* Type: --font-*, --fw-*, --text-*-size/lh, --display-*-size/lh Spacing: --space-*, --radius-* DARK MODE: Add class="dark" to or any wrapper element LEGACY: All --color-*, --sp-*, --focus-ring aliases preserved for backward compatibility with existing projects =========================================================================== */ /* ── Font ───────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Aspekta'; src: url('./fonts/AspektaVF.woff2') format('woff2-variations'), url('./fonts/AspektaVF.woff2') format('woff2'), url('./fonts/AspektaVF.ttf') format('truetype-variations'), url('./fonts/AspektaVF.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* ── PRIMITIVES: Gray (light) ── */ --gray-25: #fdfdfd; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e9eaeb; --gray-300: #d5d7da; --gray-400: #a4a7ae; --gray-500: #717680; --gray-600: #535862; --gray-700: #414651; --gray-800: #252b37; --gray-900: #181d27; --gray-950: #0a0d12; /* ── PRIMITIVES: Gray (dark) ── */ --graydark-25: #fafafa; --graydark-50: #f7f7f7; --graydark-100: #f0f1f1; --graydark-200: #ececed; --graydark-300: #cecfd2; --graydark-400: #94979c; --graydark-500: #85888e; --graydark-600: #61656c; --graydark-700: #373a41; --graydark-800: #22262f; --graydark-900: #13161b; --graydark-950: #0c0e12; /* ── PRIMITIVES: Brand (blue) ── */ --brand-25: #f5f9ff; --brand-50: #eaf2ff; --brand-100: #bfd6ff; --brand-200: #a0c2ff; --brand-300: #75a7ff; --brand-400: #5a95ff; --brand-500: #317bff; --brand-600: #2d70e8; --brand-700: #2357b5; --brand-800: #1b448c; --brand-900: #15346b; --brand-950: #0f254d; /* ── PRIMITIVES: Error (red) ── */ --error-25: #fffbfa; --error-50: #fef3f2; --error-100: #fee4e2; --error-200: #fecdca; --error-300: #fda29b; --error-400: #f97066; --error-500: #f04438; --error-600: #d92d20; --error-700: #b42318; --error-800: #912018; --error-900: #7a271a; --error-950: #55160c; /* ── PRIMITIVES: Warning (amber) ── */ --warning-25: #fffcf5; --warning-50: #fffaeb; --warning-100: #fef0c7; --warning-200: #fedf89; --warning-300: #fec84b; --warning-400: #fdb022; --warning-500: #f79009; --warning-600: #dc6803; --warning-700: #b54708; --warning-800: #93370d; --warning-900: #7a2e0e; --warning-950: #4e1d09; /* ── PRIMITIVES: Success ── */ --success-25: #f6fef9; --success-50: #ecfdf3; --success-100: #dcfae6; --success-200: #abefc6; --success-300: #75e0a7; --success-400: #47cd89; --success-500: #17b26a; --success-600: #079455; --success-700: #067647; --success-800: #085d3a; --success-900: #074d31; --success-950: #053321; /* ── PRIMITIVES: Green (Trustoo brand green) ── */ --green-25: #f2fbf6; --green-50: #e6f8f2; --green-100: #b0ebd6; --green-200: #8ae1c3; --green-300: #54d3a7; --green-400: #33ca96; --green-500: #00bd7c; --green-600: #00ac71; --green-700: #008658; --green-800: #006844; --green-900: #004f34; --green-950: #021b10; /* ── PRIMITIVES: Orange (quality / average indicator) ── */ --orange-25: #fffbf8; --orange-50: #fff7f1; --orange-100: #ffe5d5; --orange-200: #ffd8c0; --orange-300: #ffc6a4; --orange-400: #ffbb92; --orange-500: #ffaa77; --orange-600: #e89b6c; --orange-700: #b57954; --orange-800: #8c5e41; --orange-900: #6b4732; --orange-950: #3a2416; /* ── --color-* ALIASES (backward compatibility) ── */ --color-gray-25: var(--gray-25); --color-gray-50: var(--gray-50); --color-gray-100: var(--gray-100); --color-gray-200: var(--gray-200); --color-gray-300: var(--gray-300); --color-gray-400: var(--gray-400); --color-gray-500: var(--gray-500); --color-gray-600: var(--gray-600); --color-gray-700: var(--gray-700); --color-gray-800: var(--gray-800); --color-gray-900: var(--gray-900); --color-gray-950: var(--gray-950); --color-brand-25: var(--brand-25); --color-brand-50: var(--brand-50); --color-brand-100: var(--brand-100); --color-brand-200: var(--brand-200); --color-brand-300: var(--brand-300); --color-brand-400: var(--brand-400); --color-brand-500: var(--brand-500); --color-brand-600: var(--brand-600); --color-brand-700: var(--brand-700); --color-brand-800: var(--brand-800); --color-brand-900: var(--brand-900); --color-brand-950: var(--brand-950); --color-error-25: var(--error-25); --color-error-50: var(--error-50); --color-error-100: var(--error-100); --color-error-200: var(--error-200); --color-error-300: var(--error-300); --color-error-400: var(--error-400); --color-error-500: var(--error-500); --color-error-600: var(--error-600); --color-error-700: var(--error-700); --color-error-800: var(--error-800); --color-warning-50: var(--warning-50); --color-warning-200: var(--warning-200); --color-warning-300: var(--warning-300); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-success-50: var(--success-50); --color-success-100: var(--success-100); --color-success-300: var(--success-300); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-green-50: var(--green-50); --color-green-100: var(--green-100); --color-green-500: var(--green-500); --color-green-600: var(--green-600); --color-green-700: var(--green-700); --color-orange-50: var(--orange-50); --color-orange-500: var(--orange-500); --color-orange-600: var(--orange-600); /* ── SEMANTIC: Text ── */ --text-primary: var(--gray-900); /* #181d27 */ --text-secondary: var(--gray-700); /* #414651 */ --text-tertiary: var(--gray-500); /* #717680 */ --text-quaternary: var(--gray-400); --text-white: #ffffff; --text-disabled: var(--gray-400); --text-placeholder: var(--gray-500); --text-brand-primary: var(--brand-900); --text-brand-secondary: var(--brand-700); --text-brand-tertiary: var(--brand-600); --text-error-primary: var(--error-600); --text-warning-primary: var(--warning-600); --text-success-primary: var(--success-600); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-text-white: var(--text-white); --color-text-disabled: var(--text-disabled); --color-text-brand: var(--brand-500); /* ── SEMANTIC: Background ── */ --bg-primary: #ffffff; --bg-primary_hover: var(--brand-50); --bg-secondary: var(--gray-50); --bg-secondary_hover: var(--gray-100); --bg-tertiary: var(--gray-100); --bg-quaternary: var(--gray-200); --bg-disabled: var(--gray-100); --bg-active: var(--gray-50); --bg-brand-primary: var(--brand-25); --bg-brand-secondary: var(--brand-50); --bg-brand-solid: var(--brand-500); --bg-brand-solid_hover: var(--brand-600); --bg-brand-section: var(--brand-800); --bg-error-primary: var(--error-50); --bg-error-secondary: var(--error-100); --bg-error-solid: var(--error-600); --bg-warning-primary: var(--warning-300); --bg-warning-secondary: var(--warning-50); --bg-warning-solid: var(--warning-600); --bg-success-primary: var(--success-50); --bg-success-secondary: var(--success-100); --bg-success-solid: var(--success-600); --color-bg-primary: var(--bg-primary); --color-bg-secondary: var(--bg-secondary); --color-bg-page: var(--gray-100); --color-bg-disabled: var(--bg-disabled); --color-bg-brand: var(--brand-500); --color-bg-brand-hover: var(--brand-700); --color-bg-brand-solid: var(--brand-500); --color-bg-error-solid: var(--error-600); --color-bg-error-solid-hover: var(--error-700); /* ── SEMANTIC: Foreground (icons) ── */ --fg-primary: var(--gray-900); --fg-secondary: var(--gray-700); --fg-secondary_hover: var(--gray-800); --fg-tertiary: var(--gray-600); --fg-quaternary: var(--gray-500); --fg-disabled: var(--gray-400); --fg-white: #ffffff; --fg-brand-primary: var(--brand-600); --fg-brand-secondary: var(--brand-500); --fg-error-primary: var(--error-600); --fg-warning-primary: var(--warning-600); --fg-success-primary: var(--success-600); --color-fg-primary: var(--fg-primary); --color-fg-disabled: var(--fg-disabled); /* ── SEMANTIC: Border ── */ --border-primary: var(--gray-300); /* #d5d7da */ --border-secondary: var(--gray-200); /* #e9eaeb */ --border-tertiary: var(--gray-100); --border-disabled: var(--gray-300); --border-brand: var(--brand-500); --border-brand-solid: var(--brand-600); --border-error: var(--error-500); --border-error_subtle: var(--error-300); --color-border-primary: var(--border-primary); --color-border-secondary: var(--border-secondary); --color-border-disabled-subtle: var(--border-secondary); /* ── SPACING ── */ --space-none: 0px; --space-xxs: 2px; --space-xs: 4px; --space-sm: 6px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 20px; --space-3xl: 24px; --space-4xl: 32px; --space-5xl: 40px; --space-6xl: 48px; --space-7xl: 64px; --space-8xl: 80px; --space-9xl: 96px; --space-10xl: 128px; --space-11xl: 160px; --sp-xxs: var(--space-xxs); --sp-xs: var(--space-xs); --sp-1: var(--space-xs); --sp-2: var(--space-md); --sp-3: var(--space-lg); --sp-4: var(--space-xl); --sp-5: var(--space-2xl); --sp-6: var(--space-3xl); --sp-8: var(--space-4xl); --sp-10: var(--space-5xl); --sp-12: var(--space-6xl); --sp-16: var(--space-7xl); --sp-20: var(--space-8xl); --sp-32: var(--space-10xl); /* ── BORDER RADIUS ── */ --radius-none: 0px; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 9999px; /* ── SHADOWS ── */ --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05); --shadow-sm: 0 1px 3px 0 rgba(10,13,18,.10), 0 1px 2px -1px rgba(10,13,18,.10); --shadow-md: 0 4px 6px -1px rgba(10,13,18,.10), 0 2px 4px -2px rgba(10,13,18,.06); --shadow-lg: 0 12px 16px -4px rgba(10,13,18,.08), 0 4px 6px -2px rgba(10,13,18,.03); --shadow-xl: 0 20px 24px -4px rgba(10,13,18,.08), 0 8px 8px -4px rgba(10,13,18,.03); --shadow-2xl: 0 24px 48px -12px rgba(10,13,18,.18); --shadow-3xl: 0 32px 64px -12px rgba(10,13,18,.14); /* ── FOCUS RINGS ── */ --ring-brand: 0 0 0 4px rgba(49,123,255,.24); --ring-gray: 0 0 0 4px rgba(152,162,179,.14); --ring-error: 0 0 0 4px rgba(240,68,56,.24); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--brand-500); --focus-ring-error: 0 0 0 2px #ffffff, 0 0 0 4px var(--error-500); /* ── TYPOGRAPHY: Families ── */ --font-display: "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-italic: "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --font-family-body: var(--font-body); /* ── TYPOGRAPHY: Weights ── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --font-weight-regular: var(--fw-regular); --font-weight-medium: var(--fw-medium); --font-weight-semibold: var(--fw-semibold); --font-weight-bold: var(--fw-bold); /* ── TYPOGRAPHY: Text scale (Figma: Font size/xs..2xl) ── */ --text-xs-size: 10px; --text-xs-lh: 16px; --text-s-size: 12px; --text-s-lh: 18px; --text-m-size: 14px; --text-m-lh: 20px; --text-l-size: 16px; --text-l-lh: 24px; --text-xl-size: 18px; --text-xl-lh: 28px; --text-2xl-size: 20px; --text-2xl-lh: 30px; /* Legacy sm/md/lg aliases */ --text-sm-size: var(--text-s-size); --text-sm-lh: var(--text-s-lh); --text-md-size: var(--text-m-size); --text-md-lh: var(--text-m-lh); --text-lg-size: var(--text-l-size); --text-lg-lh: var(--text-l-lh); --font-size-text-sm: var(--text-sm-size); --line-height-text-sm: var(--text-sm-lh); --font-size-text-md: var(--text-md-size); --line-height-text-md: var(--text-md-lh); --font-size-text-lg: var(--text-lg-size); --line-height-text-lg: var(--text-lg-lh); --font-size-text-xl: var(--text-xl-size); --line-height-text-xl: var(--text-xl-lh); --font-size-display-xs: 20px; --line-height-display-xs: 30px; --font-size-display-xl: 52px; --line-height-display-xl: 60px; /* ── TYPOGRAPHY: Display scale ── */ --display-xs-size: 24px; --display-xs-lh: 30px; --display-xs-tracking: -0.01em; --display-sm-size: 24px; --display-sm-lh: 32px; --display-sm-tracking: -0.01em; --display-md-size: 30px; --display-md-lh: 38px; --display-md-tracking: -0.02em; --display-lg-size: 38px; --display-lg-lh: 44px; --display-lg-tracking: -0.02em; --display-xl-size: 52px; --display-xl-lh: 60px; --display-xl-tracking: -0.02em; --display-2xl-size: 68px; --display-2xl-lh: 72px; --display-2xl-tracking: -0.02em; /* ── LAYOUT ── */ --width-sm: 480px; --width-2xl: 1024px; --paragraph-max-width: 720px; } /* ── Dark mode ──────────────────────────────────────────────────────────── */ .dark, :root.dark { --text-primary: #f7f7f7; --text-secondary: var(--graydark-300); --text-tertiary: var(--graydark-400); --text-quaternary: var(--graydark-500); --text-disabled: var(--graydark-500); --text-placeholder: var(--graydark-500); --bg-primary: var(--graydark-950); /* #0c0e12 */ --bg-primary_hover: var(--graydark-800); --bg-secondary: var(--graydark-900); --bg-secondary_hover: var(--graydark-800); --bg-tertiary: var(--graydark-800); --bg-quaternary: var(--graydark-700); --bg-disabled: var(--graydark-800); --bg-active: var(--graydark-800); --bg-brand-primary: #317bff; --bg-brand-secondary: var(--brand-700); --bg-brand-solid: var(--brand-600); --fg-primary: #ffffff; --fg-secondary: var(--graydark-300); --fg-tertiary: var(--graydark-400); --fg-disabled: var(--graydark-500); --border-primary: var(--graydark-700); --border-secondary: var(--graydark-800); --border-tertiary: var(--graydark-800); --border-brand: var(--brand-400); /* Cascade legacy aliases */ --color-bg-primary: var(--bg-primary); --color-bg-secondary: var(--bg-secondary); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-border-secondary: var(--border-secondary); --color-fg-primary: var(--fg-primary); --color-fg-disabled: var(--fg-disabled); } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { font-family: var(--font-body); font-size: var(--text-l-size); line-height: var(--text-l-lh); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font: var(--fw-semibold) var(--display-md-size)/var(--display-md-lh) var(--font-display); letter-spacing: var(--display-md-tracking); color: var(--text-primary); margin: 0; } h2 { font: var(--fw-semibold) var(--display-sm-size)/var(--display-sm-lh) var(--font-display); letter-spacing: var(--display-sm-tracking); color: var(--text-primary); margin: 0; } h3 { font: var(--fw-semibold) var(--display-xs-size)/var(--display-xs-lh) var(--font-display); letter-spacing: var(--display-xs-tracking); color: var(--text-primary); margin: 0; } h4 { font: var(--fw-semibold) var(--text-xl-size)/var(--text-xl-lh) var(--font-display); color: var(--text-primary); margin: 0; } p { font-size: var(--text-md-size); line-height: var(--text-md-lh); color: var(--text-secondary); margin: 0; } small { font-size: var(--text-sm-size); line-height: var(--text-sm-lh); color: var(--text-tertiary); } code, pre { font-family: var(--font-mono); font-size: 13px; } /* ── Typography utilities ───────────────────────────────────────────────── */ .display-2xl { font: var(--fw-semibold) var(--display-2xl-size)/var(--display-2xl-lh) var(--font-display); letter-spacing: var(--display-2xl-tracking); } .display-xl { font: var(--fw-semibold) var(--display-xl-size)/var(--display-xl-lh) var(--font-display); letter-spacing: var(--display-xl-tracking); } .display-lg { font: var(--fw-semibold) var(--display-lg-size)/var(--display-lg-lh) var(--font-display); letter-spacing: var(--display-lg-tracking); } .display-md { font: var(--fw-semibold) var(--display-md-size)/var(--display-md-lh) var(--font-display); letter-spacing: var(--display-md-tracking); } .display-sm { font: var(--fw-semibold) var(--display-sm-size)/var(--display-sm-lh) var(--font-display); letter-spacing: var(--display-sm-tracking); } .display-xs { font: var(--fw-semibold) var(--display-xs-size)/var(--display-xs-lh) var(--font-display); letter-spacing: var(--display-xs-tracking); } .text-2xl { font-size: var(--text-2xl-size); line-height: var(--text-2xl-lh); } .text-xl { font-size: var(--text-xl-size); line-height: var(--text-xl-lh); } .text-lg { font-size: var(--text-lg-size); line-height: var(--text-lg-lh); } .text-md { font-size: var(--text-md-size); line-height: var(--text-md-lh); } .text-sm { font-size: var(--text-sm-size); line-height: var(--text-sm-lh); } .text-xs { font-size: var(--text-xs-size); line-height: var(--text-xs-lh); } .fw-regular { font-weight: var(--fw-regular); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } /* tui- prefixed aliases */ .tui-body { font-family: var(--font-body); font-size: var(--text-lg-size); line-height: var(--text-lg-lh); color: var(--text-primary); } .tui-text-sm { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); } .tui-text-md { font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); } .tui-text-lg { font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); } .tui-text-xl { font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); } .tui-display-xs { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); } .tui-display-xl { font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); letter-spacing: -2px; } .tui-regular { font-weight: var(--font-weight-regular); } .tui-medium { font-weight: var(--font-weight-medium); } .tui-semibold { font-weight: var(--font-weight-semibold); } .tui-bold { font-weight: var(--font-weight-bold); } .tui-text-primary { color: var(--color-text-primary); } .tui-text-secondary { color: var(--color-text-secondary); } .tui-text-tertiary { color: var(--color-text-tertiary); } .tui-text-brand { color: var(--color-text-brand); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── Buttons ─────────────────────────────────────────────────────────────── */ /* Source: Buttons/Button — qEzzmJ0Ywhfp5FGPcII0PP 6:1451 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-bold); white-space: nowrap; border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; overflow: hidden; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } /* Sizes: sm 34px md 40px lg 44px xl 48px */ .btn--sm { height: 34px; padding: 0 12px; gap: 4px; } .btn--sm .btn__icon { width: 16px; height: 16px; } .btn--md { height: 40px; padding: 0 14px; gap: 4px; } .btn--md .btn__icon { width: 20px; height: 20px; } .btn--lg { height: 44px; padding: 0 16px; gap: 6px; } .btn--lg .btn__icon { width: 20px; height: 20px; } .btn--xl { height: 48px; padding: 0 20px; gap: 6px; } .btn--xl .btn__icon { width: 20px; height: 20px; } /* Default = md */ .btn:not(.btn--sm):not(.btn--lg):not(.btn--xl) { height: 40px; padding: 0 14px; } .btn:not(.btn--sm):not(.btn--lg):not(.btn--xl) .btn__icon { width: 20px; height: 20px; } /* Icon only */ .btn--icon-only.btn--sm { width: 34px; padding: 0; } .btn--icon-only.btn--md { width: 40px; padding: 0; } .btn--icon-only { width: 40px; padding: 0; } .btn--icon-only.btn--lg { width: 44px; padding: 0; } .btn--icon-only.btn--xl { width: 48px; padding: 0; } .btn__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; pointer-events: none; } .btn__icon svg, .btn__icon img { display: block; width: 100%; height: 100%; } .btn__label { padding: 0 var(--sp-xxs); } /* Primary: brand-500, white text */ .btn--primary { background: var(--color-brand-500); color: var(--color-text-white); box-shadow: var(--shadow-xs); } .btn--primary:hover, .btn--primary.is-hover { background: var(--color-brand-700); } .btn--primary:focus-visible, .btn--primary.is-focused { background: var(--color-brand-500); box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } /* Secondary: white, gray border */ .btn--secondary { background: var(--color-bg-primary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); box-shadow: var(--shadow-xs); } .btn--secondary:hover, .btn--secondary.is-hover { background: var(--color-gray-50); border-color: var(--color-gray-400); } .btn--secondary:focus-visible, .btn--secondary.is-focused { background: var(--color-bg-primary); border-color: var(--color-border-primary); box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } /* Tertiary: transparent, gray text */ .btn--tertiary { background: transparent; color: var(--color-text-tertiary); box-shadow: none; } .btn--tertiary:hover, .btn--tertiary.is-hover { background: var(--color-gray-100); color: var(--color-text-secondary); } .btn--tertiary:focus-visible, .btn--tertiary.is-focused { background: transparent; box-shadow: var(--focus-ring); outline: none; } /* Link color: brand-500 */ .btn--link-color { background: transparent; color: var(--color-brand-500); text-decoration: underline; font-weight: var(--font-weight-regular); box-shadow: none; height: auto; padding: 0; border-radius: 0; gap: var(--sp-xs); } .btn--link-color:hover, .btn--link-color.is-hover { color: var(--color-brand-600); } .btn--link-color:focus-visible, .btn--link-color.is-focused { outline: 2px solid var(--color-brand-500); outline-offset: 2px; border-radius: 2px; } /* Link gray */ .btn--link-gray { background: transparent; color: var(--color-text-tertiary); text-decoration: underline; font-weight: var(--font-weight-regular); box-shadow: none; height: auto; padding: 0; border-radius: 0; } .btn--link-gray:hover, .btn--link-gray.is-hover { color: var(--color-text-secondary); } .btn--link-gray:focus-visible, .btn--link-gray.is-focused { outline: 2px solid var(--color-gray-400); outline-offset: 2px; border-radius: 2px; } /* Disabled — all hierarchies */ .btn:disabled, .btn[aria-disabled="true"], .btn--disabled { background: var(--color-bg-disabled); color: var(--color-fg-disabled); border-color: var(--color-border-disabled-subtle); border-width: 1px; border-style: solid; box-shadow: var(--shadow-xs); cursor: not-allowed; pointer-events: none; } .btn--link-color:disabled, .btn--link-gray:disabled, .btn--link-color[aria-disabled="true"], .btn--link-gray[aria-disabled="true"] { background: transparent; border: none; box-shadow: none; color: var(--color-fg-disabled); } /* Loading */ .btn--loading { cursor: wait; pointer-events: none; position: relative; } .btn--loading .btn__label, .btn--loading .btn__icon { opacity: 0; } .btn--loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-full); animation: tui-spin 0.65s linear infinite; } @keyframes tui-spin { to { transform: rotate(360deg); } } /* ── Button destructive ───────────────────────────────────────────────────── */ /* Source: Buttons/Button destructive — 6:2520 */ .btn--destructive { background: var(--color-bg-error-solid); color: var(--color-text-white); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .btn--destructive:hover, .btn--destructive.is-hover { background: var(--color-bg-error-solid-hover); } .btn--destructive:focus-visible, .btn--destructive.is-focused { box-shadow: var(--shadow-xs), var(--focus-ring-error); outline: none; } .btn--destructive:disabled, .btn--destructive[aria-disabled="true"], .btn--destructive.btn--disabled { background: var(--color-bg-disabled); color: var(--color-fg-disabled); border: 1px solid var(--color-border-disabled-subtle); box-shadow: var(--shadow-xs); } .btn--destructive.btn--secondary { background: var(--color-bg-primary); color: var(--color-error-600); border: 1px solid var(--color-error-300); } .btn--destructive.btn--secondary:hover { background: var(--color-error-50); border-color: var(--color-error-500); } .btn--destructive.btn--tertiary { background: transparent; color: var(--color-error-600); box-shadow: none; } .btn--destructive.btn--tertiary:hover { background: var(--color-error-50); } .btn--destructive.btn--link-color { color: var(--color-error-600); } /* ── Button close X ───────────────────────────────────────────────────────── */ /* Source: Buttons/Button close X — 6:2483 */ .btn-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease; } .btn-close:hover { background: var(--color-gray-100); color: var(--color-text-secondary); } .btn-close:focus-visible { box-shadow: var(--focus-ring); outline: none; } .btn-close svg { display: block; width: 16px; height: 16px; pointer-events: none; } /* ── Button utility ───────────────────────────────────────────────────────── */ /* Source: Buttons/Button utility — 6:3005 */ .btn-utility { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-sm); background: var(--color-bg-primary); color: var(--color-text-secondary); cursor: pointer; box-shadow: var(--shadow-xs); transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .btn-utility--sm { width: 32px; height: 32px; } .btn-utility--xs { width: 28px; height: 28px; } .btn-utility:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); } .btn-utility:focus-visible { box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } .btn-utility:disabled, .btn-utility[aria-disabled="true"] { background: var(--color-bg-disabled); color: var(--color-fg-disabled); border-color: var(--color-border-disabled-subtle); cursor: not-allowed; pointer-events: none; } .btn-utility svg { display: block; width: 16px; height: 16px; pointer-events: none; } /* ── Form inputs ──────────────────────────────────────────────────────────── */ .input-group { display: flex; flex-direction: column; gap: 6px; } .input-label { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); line-height: var(--line-height-text-sm); } .input-hint { font-family: var(--font-family-body); font-size: var(--font-size-text-sm); color: var(--color-text-tertiary); line-height: var(--line-height-text-sm); } .input-hint--error { color: var(--color-error-600); } .input { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-regular); color: var(--color-text-primary); background: var(--color-bg-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); height: 44px; padding: 0 14px; width: 100%; box-shadow: var(--shadow-xs); transition: border-color 0.12s ease, box-shadow 0.12s ease; -webkit-appearance: none; appearance: none; } .input::placeholder { color: var(--color-text-tertiary); } .input:hover { border-color: var(--color-gray-300); } .input:focus, .input:focus-visible { border-color: var(--color-brand-500); box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } .input:disabled { background: var(--color-bg-disabled); color: var(--color-fg-disabled); border-color: var(--color-border-disabled-subtle); cursor: not-allowed; } .input--error { border-color: var(--color-error-500); } .input--error:focus { border-color: var(--color-error-500); box-shadow: var(--shadow-xs), var(--focus-ring-error); } /* Textarea */ .textarea { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--color-text-primary); background: var(--color-bg-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); padding: 10px 14px; width: 100%; min-height: 96px; resize: vertical; box-shadow: var(--shadow-xs); transition: border-color 0.12s ease, box-shadow 0.12s ease; -webkit-appearance: none; appearance: none; } .textarea::placeholder { color: var(--color-text-tertiary); } .textarea:focus, .textarea:focus-visible { border-color: var(--color-brand-500); box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } /* Input with leading/trailing icon */ .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .input { padding-left: 42px; } .input-wrap .input-icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--color-text-tertiary); pointer-events: none; flex-shrink: 0; } .input-wrap .input-icon--trailing { left: auto; right: 14px; } .input-wrap .input-icon--trailing ~ .input { padding-right: 42px; padding-left: 14px; } /* ── Checkbox & Radio ─────────────────────────────────────────────────────── */ .checkbox-wrap { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; } .checkbox-wrap input[type="checkbox"] { display: none; } .checkbox { width: 18px; height: 18px; border: 1.5px solid var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-bg-primary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s ease, background 0.12s ease; box-shadow: var(--shadow-xs); margin-top: 1px; } .checkbox-wrap:has(input:checked) .checkbox { background: var(--color-brand-500); border-color: var(--color-brand-500); } .checkbox-wrap:has(input:checked) .checkbox::after { content: ''; display: block; width: 10px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); } .checkbox-wrap:has(input:focus-visible) .checkbox { box-shadow: var(--shadow-xs), var(--focus-ring); } .checkbox-label { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); user-select: none; } /* Radio */ .radio-wrap { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; } .radio-wrap input[type="radio"] { display: none; } .radio { width: 18px; height: 18px; border: 1.5px solid var(--color-gray-300); border-radius: var(--radius-full); background: var(--color-bg-primary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s ease; margin-top: 1px; } .radio::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-brand-500); opacity: 0; transform: scale(0); transition: opacity 0.14s ease, transform 0.14s ease; } .radio-wrap:has(input:checked) .radio { border-color: var(--color-brand-500); } .radio-wrap:has(input:checked) .radio::after { opacity: 1; transform: scale(1); } .radio-wrap:has(input:focus-visible) .radio { box-shadow: var(--focus-ring); } .radio-label { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); user-select: none; } /* Toggle / Switch */ .toggle-wrap { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .toggle-wrap input[type="checkbox"] { display: none; } .toggle { width: 44px; height: 24px; border-radius: var(--radius-full); background: var(--color-gray-200); position: relative; flex-shrink: 0; transition: background 0.18s ease; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--radius-full); background: #fff; box-shadow: 0 1px 3px rgba(10,13,18,0.15); transition: transform 0.18s ease; } .toggle-wrap:has(input:checked) .toggle { background: var(--color-brand-500); } .toggle-wrap:has(input:checked) .toggle::after { transform: translateX(20px); } .toggle-wrap:has(input:focus-visible) .toggle { box-shadow: var(--focus-ring); } .toggle-label { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); user-select: none; } /* ── Select ───────────────────────────────────────────────────────────────── */ .select-wrap { position: relative; width: 100%; } .select { font-family: var(--font-family-body); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--color-text-primary); background: var(--color-bg-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); height: 44px; padding: 0 40px 0 14px; width: 100%; box-shadow: var(--shadow-xs); cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .select:focus { border-color: var(--color-brand-500); box-shadow: var(--shadow-xs), var(--focus-ring); outline: none; } .select-wrap::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: var(--color-text-tertiary); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23717680' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23717680' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* ── Badges ───────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; } .badge--brand { background: var(--color-brand-50); color: var(--color-brand-600); } .badge--gray { background: var(--color-gray-100); color: var(--color-gray-600); } .badge--success { background: var(--color-success-50); color: var(--color-success-600); } .badge--error { background: var(--color-error-50); color: var(--color-error-600); } .badge--warning { background: var(--color-warning-50); color: var(--color-warning-600); } .badge--green { background: var(--color-green-50); color: var(--color-green-600); } .badge--orange { background: var(--color-orange-50); color: var(--color-orange-600); } .badge--lg { height: 28px; padding: 0 10px; font-size: var(--font-size-text-md); } .badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; } /* ── Avatar ───────────────────────────────────────────────────────────────── */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); overflow: hidden; background: var(--color-gray-100); color: var(--color-text-tertiary); font-family: var(--font-family-body); font-weight: var(--font-weight-semibold); flex-shrink: 0; position: relative; } .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .avatar--xs { width: 24px; height: 24px; font-size: 10px; } .avatar--sm { width: 32px; height: 32px; font-size: 12px; } .avatar--md { width: 40px; height: 40px; font-size: 14px; } .avatar--lg { width: 48px; height: 48px; font-size: 16px; } .avatar--xl { width: 64px; height: 64px; font-size: 20px; } .avatar--2xl { width: 80px; height: 80px; font-size: 24px; } /* Online indicator */ .avatar__indicator { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--color-success-500); border: 2px solid #fff; } /* Avatar group (stacked) */ .avatar-group { display: flex; flex-direction: row-reverse; width: max-content; } .avatar-group .avatar { border: 2px solid var(--color-bg-primary); margin-right: -8px; } .avatar-group .avatar:last-child { margin-right: 0; } /* ── Card ─────────────────────────────────────────────────────────────────── */ .card { background: var(--color-bg-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .card--elevated { box-shadow: var(--shadow-md); border: none; } .card--flat { box-shadow: none; } .card__body { padding: 24px; } .card__header { padding: 20px 24px; border-bottom: 1px solid var(--color-border-secondary); } .card__footer { padding: 16px 24px; border-top: 1px solid var(--color-border-secondary); } /* ── Divider ──────────────────────────────────────────────────────────────── */ .divider { width: 100%; height: 1px; background: var(--color-border-secondary); border: none; margin: 0; } .divider--vertical { width: 1px; height: 100%; background: var(--color-border-secondary); } .divider-label { display: flex; align-items: center; gap: 12px; color: var(--color-text-tertiary); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-body); } .divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border-secondary); } /* ── Alert / Notice ───────────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); } .alert__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; } .alert__body { flex: 1; } .alert__title { font-weight: var(--font-weight-semibold); margin-bottom: 2px; font-size: var(--font-size-text-sm); } .alert__desc { color: inherit; opacity: 0.85; } .alert--info { background: var(--color-brand-50); color: var(--color-brand-700); border: 1px solid var(--color-brand-100); } .alert--success { background: var(--color-green-50); color: var(--color-green-700); border: 1px solid var(--color-green-100); } .alert--warning { background: var(--color-warning-50); color: var(--color-warning-600); border: 1px solid var(--color-warning-200); } .alert--error { background: var(--color-error-50); color: var(--color-error-700); border: 1px solid var(--color-error-100); } /* ── Tooltip ──────────────────────────────────────────────────────────────── */ .tooltip-wrap { position: relative; display: inline-flex; } .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-gray-900); color: #fff; font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-text-sm); padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; z-index: 100; } .tooltip-wrap:hover .tooltip { opacity: 1; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-gray-900); } /* ── Modal / Dialog ───────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(10, 13, 18, 0.48); display: flex; align-items: center; justify-content: center; padding: 24px 16px; z-index: 400; animation: tui-overlay-in 0.18s ease; } @keyframes tui-overlay-in { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--color-bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; max-width: var(--width-sm); max-height: calc(100vh - 48px); overflow-y: auto; animation: tui-modal-in 0.22s ease; } @keyframes tui-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 0; } .modal__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal__icon--brand { background: var(--color-brand-50); color: var(--color-brand-500); } .modal__icon--success { background: var(--color-green-50); color: var(--color-green-500); } .modal__icon--warning { background: #fff7ed; color: #ea580c; } .modal__icon--error { background: var(--color-error-50); color: var(--color-error-500); } .modal__icon--neutral { background: var(--color-gray-100); color: var(--color-gray-500); } .modal__title { font-family: var(--font-family-body); font-size: var(--font-size-display-xs); font-weight: var(--font-weight-bold); line-height: var(--line-height-display-xs); color: var(--color-text-primary); letter-spacing: -0.01em; } .modal__desc { font-family: var(--font-family-body); font-size: var(--font-size-text-md); color: var(--color-text-secondary); line-height: var(--line-height-text-md); } .modal__body { padding: 16px 24px; } .modal__footer { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 10px; } /* ── Spinner ──────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-full); animation: tui-spin 0.65s linear infinite; } .spinner--sm { width: 14px; height: 14px; } .spinner--lg { width: 28px; height: 28px; border-width: 3px; } /* ── Progress bar ─────────────────────────────────────────────────────────── */ .progress { height: 8px; border-radius: var(--radius-full); background: var(--color-gray-200); overflow: hidden; } .progress__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-brand-500); transition: width 0.3s ease; } .progress--success .progress__fill { background: var(--color-green-500); } .progress--error .progress__fill { background: var(--color-error-500); } .progress--warning .progress__fill { background: var(--color-warning-500); } .progress--sm { height: 4px; } .progress--lg { height: 12px; } /* ── Tag ──────────────────────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font-family: var(--font-family-body); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); white-space: nowrap; background: var(--color-gray-50); color: var(--color-gray-700); border: 1px solid var(--color-gray-200); } .tag--brand { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-200); } .tag--success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-200); } .tag--error { background: var(--color-error-50); color: var(--color-error-700); border-color: var(--color-error-200); } .tag--green { background: var(--color-green-50); color: var(--color-green-700); border-color: var(--color-green-100); } .tag--orange { background: var(--color-orange-50); color: var(--color-orange-700); border-color: var(--color-orange-100); } .tag__close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 2px; cursor: pointer; color: currentColor; opacity: 0.6; flex-shrink: 0; } .tag__close:hover { opacity: 1; } .tag__close svg { width: 10px; height: 10px; display: block; }