diff --git a/docs/STYLE.md b/docs/STYLE.md new file mode 100644 index 0000000..cc17466 --- /dev/null +++ b/docs/STYLE.md @@ -0,0 +1,515 @@ +# Silo Style Guide + +> Living reference for the Silo web UI. All modules must follow these conventions to maintain visual consistency across the platform. + +--- + +## Color System + +Silo uses the [Catppuccin Mocha](https://github.com/catppuccin/catppuccin) palette exclusively. All colors are referenced via CSS custom properties defined at `:root`. + +### Palette + +``` +--ctp-rosewater: #f5e0dc +--ctp-flamingo: #f2cdcd +--ctp-pink: #f5c2e7 +--ctp-mauve: #cba6f7 +--ctp-red: #f38ba8 +--ctp-maroon: #eba0ac +--ctp-peach: #fab387 +--ctp-yellow: #f9e2af +--ctp-green: #a6e3a1 +--ctp-teal: #94e2d5 +--ctp-sky: #89dceb +--ctp-sapphire: #74c7ec +--ctp-blue: #89b4fa +--ctp-lavender: #b4befe +--ctp-text: #cdd6f4 +--ctp-subtext1: #bac2de +--ctp-subtext0: #a6adc8 +--ctp-overlay2: #9399b2 +--ctp-overlay1: #7f849c +--ctp-overlay0: #6c7086 +--ctp-surface2: #585b70 +--ctp-surface1: #45475a +--ctp-surface0: #313244 +--ctp-base: #1e1e2e +--ctp-mantle: #181825 +--ctp-crust: #11111b +``` + +### Semantic Roles + +| Role | Token | Usage | +|------|-------|-------| +| Page background | `--ctp-base` | Main content area | +| Panel background | `--ctp-mantle` | Sidebars, detail panes, headers | +| Inset/input background | `--ctp-crust` | Form inputs, code blocks, drop zones | +| Primary accent | `--ctp-mauve` | Primary buttons, active states, links, selection highlights | +| Secondary accent | `--ctp-blue` | Informational highlights, secondary actions | +| Success | `--ctp-green` | Confirmations, positive status | +| Warning | `--ctp-yellow` | Caution states, pending actions | +| Danger | `--ctp-red` | Destructive actions, errors, required indicators | +| Informational | `--ctp-teal` | Auto-generated metadata, system-assigned values | +| Body text | `--ctp-text` | Primary content | +| Secondary text | `--ctp-subtext1` | Descriptions, timestamps | +| Muted text | `--ctp-overlay1` | Placeholders, disabled states | +| Borders | `--ctp-surface0` | Dividers, panel edges | +| Hover borders | `--ctp-surface1` | Interactive element borders, row separators | +| Focus ring | `rgba(203, 166, 247, 0.25)` | `box-shadow` on focused inputs (mauve at 25%) | + +### Accent Usage for Data Types + +| Data type | Color | Token | +|-----------|-------|-------| +| Assembly | `--ctp-mauve` | Badge, icon tint | +| Part | `--ctp-green` | Badge, icon tint | +| Document | `--ctp-blue` | Badge, icon tint | +| Purchased | `--ctp-peach` | Badge, icon tint | +| Phantom | `--ctp-overlay1` | Badge, icon tint | + +These mappings are used anywhere item types appear: list badges, detail pane headers, BOM entries, tree views. + +--- + +## Typography + +### Scale + +| Role | Size | Weight | Token/Color | Transform | +|------|------|--------|-------------|-----------| +| Page title | 1.1rem | 600 | `--ctp-text` | None | +| Section header | 11px | 600 | `--ctp-overlay0` | Uppercase, `letter-spacing: 0.06em` | +| Form label | 11px | 600 | `--ctp-overlay1` | Uppercase, `letter-spacing: 0.05em` | +| Body text | 13px | 400 | `--ctp-text` | None | +| Table cell | 12px | 400 | `--ctp-text` | None | +| Caption / metadata | 11px | 400 | `--ctp-subtext0` | None | +| Badge text | 10px | 600 | Varies | Uppercase | +| Breadcrumb segment | 13px | 500 | `--ctp-subtext1` | None | +| Breadcrumb active | 13px | 600 | `--ctp-text` | None | + +### Font Stack + +```css +font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; +``` + +No external font dependencies. System fonts ensure fast rendering and native feel across platforms. + +### Rules + +- Never use font sizes below 10px. +- Use `font-weight: 600` for emphasis instead of bold (700). Reserve 700 for page titles only when extra weight is needed. +- `text-transform: uppercase` is reserved for section headers, form labels, and badges. Never uppercase body text or descriptions. + +--- + +## Spacing + +Base unit: **4px**. All spacing values are multiples of 4. + +| Token | Value | Usage | +|-------|-------|-------| +| `xs` | 4px (0.25rem) | Tight gaps: icon-to-label, tag internal padding | +| `sm` | 8px (0.5rem) | Compact spacing: between related fields, badge padding | +| `md` | 12px (0.75rem) | Standard: form group gaps, sidebar section padding | +| `lg` | 16px (1rem) | Section separation, card padding | +| `xl` | 24px (1.5rem) | Page-level padding, major section breaks | +| `2xl` | 32px (2rem) | Page horizontal padding | + +### Application + +- **Page padding:** `1.5rem 2rem` (24px vertical, 32px horizontal) +- **Sidebar section padding:** `1rem 1.25rem` +- **Form grid gap:** `1.25rem 1.5rem` (row gap × column gap) +- **Table row height:** 36px minimum (padding included) +- **Table cell padding:** `0.4rem 0.75rem` + +--- + +## Layout + +### Page Structure + +Every module page follows the same shell: + +``` +┌─────────────────────────────────────────────────┐ +│ Top Nav (52px) │ +├──────────┬──────────────────────────────────────┤ +│ App Menu │ Page Header (58px) │ +│ (icons) ├──────────────────────┬───────────────┤ +│ │ Content Area │ Detail Pane │ +│ │ │ (360px) │ +│ │ │ │ +│ │ │ │ +└──────────┴──────────────────────┴───────────────┘ +``` + +- **Top nav:** `52px` height, `--ctp-mantle` background, `1px solid --ctp-surface0` bottom border. +- **App menu sidebar:** Icon strip on the left. Module icons, tooltips on hover. Active module highlighted with `--ctp-mauve` indicator. +- **Page header:** `58px` height, `--ctp-mantle` background. Contains page title (with module icon), action buttons right-aligned. +- **Content area:** `--ctp-base` background. Scrollable. Contains list views, kanban boards, or other primary content. +- **Detail pane:** `360px` fixed width, `--ctp-mantle` background, `1px solid --ctp-surface0` left border. Appears on record selection. + +### Grid Patterns + +**Two-column form:** +```css +display: grid; +grid-template-columns: 1fr 1fr; +gap: 1.25rem 1.5rem; +max-width: 800px; +``` + +**List + detail:** +```css +display: grid; +grid-template-columns: 1fr 360px; +min-height: calc(100vh - 52px - 58px); +``` + +### Breakpoints + +Not currently required. Silo targets desktop browsers on engineering workstations. If mobile support is added later, breakpoints will be defined at `768px` and `1024px`. + +--- + +## Components + +### Buttons + +Four tiers. All buttons share a base style: + +```css +display: inline-flex; +align-items: center; +gap: 0.35rem; +padding: 0.4rem 0.85rem; +border-radius: 6px; +font-size: 12px; +font-weight: 500; +cursor: pointer; +transition: all 0.15s; +``` + +| Tier | Name | Background | Border | Text | Hover | +|------|------|-----------|--------|------|-------| +| Primary | `.btn-primary` | `--ctp-mauve` | `--ctp-mauve` | `--ctp-crust` | `--ctp-lavender` bg + border | +| Secondary | `.btn` (default) | `--ctp-surface0` | `--ctp-surface1` | `--ctp-text` | `--ctp-surface1` bg, `--ctp-overlay0` border | +| Ghost | `.btn-ghost` | transparent | transparent | `--ctp-subtext0` | `--ctp-surface0` bg, `--ctp-text` text | +| Danger | `.btn-danger` | transparent | `--ctp-surface1` | `--ctp-red` | `rgba(243, 139, 168, 0.1)` bg, `--ctp-red` border | + +Primary is used once per visible context (the main action). All other actions use secondary or ghost. Danger is only for destructive actions and always requires confirmation. + +### Badges + +Used for type indicators, status labels, and tags. + +```css +display: inline-flex; +align-items: center; +padding: 0.15rem 0.5rem; +border-radius: 4px; +font-size: 10px; +font-weight: 600; +text-transform: uppercase; +letter-spacing: 0.03em; +``` + +Badges use a translucent background derived from their accent color: + +```css +/* Example: assembly badge */ +background: rgba(203, 166, 247, 0.15); /* --ctp-mauve at 15% */ +color: var(--ctp-mauve); +``` + +Standard badge colors follow the [accent usage table](#accent-usage-for-data-types). Status badges: + +| Status | Color | +|--------|-------| +| Active / Released | `--ctp-green` | +| Draft / In Progress | `--ctp-blue` | +| Review / Pending | `--ctp-yellow` | +| Obsolete / Rejected | `--ctp-red` | +| Locked | `--ctp-overlay1` | + +### Form Inputs + +All inputs share a base style: + +```css +background: var(--ctp-crust); +border: 1px solid var(--ctp-surface1); +border-radius: 6px; +padding: 0.45rem 0.65rem; +font-size: 12px; +color: var(--ctp-text); +transition: border-color 0.15s; +``` + +| State | Border | Shadow | +|-------|--------|--------| +| Default | `--ctp-surface1` | None | +| Hover | `--ctp-overlay0` | None | +| Focus | `--ctp-mauve` | `0 0 0 0.2rem rgba(203, 166, 247, 0.25)` | +| Error | `--ctp-red` | `0 0 0 0.2rem rgba(243, 139, 168, 0.15)` | +| Disabled | `--ctp-surface0` | None, `opacity: 0.5` | + +Placeholder text: `--ctp-overlay0`. Labels sit above inputs (never inline or floating). + +### Tag Input + +Used for multi-value fields (projects, tags): + +```css +display: flex; +flex-wrap: wrap; +gap: 0.3rem; +padding: 0.35rem 0.5rem; +background: var(--ctp-crust); +border: 1px solid var(--ctp-surface1); +border-radius: 6px; +min-height: 36px; +``` + +Individual tags use the badge pattern: `rgba(accent, 0.15)` background with accent text. Remove button (×) at `opacity: 0.6`, `1.0` on hover. + +### Tables + +```css +width: 100%; +border-collapse: collapse; +font-size: 12px; +``` + +| Element | Style | +|---------|-------| +| Header row | `background: --ctp-mantle`, `font-size: 11px`, uppercase, `--ctp-overlay1` text | +| Body row | `border-bottom: 1px solid --ctp-surface0` | +| Row hover | `background: --ctp-surface0` | +| Row selected | `background: rgba(203, 166, 247, 0.08)` | +| Cell padding | `0.4rem 0.75rem` | +| Text columns | Left-aligned | +| Number columns | Right-aligned | +| Date columns | Right-aligned | +| Action columns | Center-aligned | + +Row actions use icon buttons (not text links). Icons at 14px, `--ctp-overlay1` default, `--ctp-text` on hover. + +### Tabs + +Used in detail panes and module sub-views: + +```css +display: flex; +gap: 0; +border-bottom: 2px solid var(--ctp-surface0); +``` + +| State | Style | +|-------|-------| +| Default | `padding: 0.5rem 1rem`, `--ctp-subtext0` text, no border | +| Hover | `--ctp-text` text | +| Active | `--ctp-text` text, `font-weight: 600`, `border-bottom: 2px solid --ctp-mauve` (overlaps container border) | + +### Section Dividers + +Used to visually group form fields: + +```css +display: flex; +align-items: center; +gap: 0.75rem; +grid-column: 1 / -1; /* span full form grid */ +margin-top: 0.75rem; +``` + +Contains a label (`11px`, uppercase, `--ctp-overlay0`) and a horizontal line (`flex: 1`, `1px solid --ctp-surface0`). + +### Sidebar Sections + +Stacked vertically within detail panes: + +```css +padding: 1rem 1.25rem; +border-bottom: 1px solid var(--ctp-surface0); +``` + +Last section has no bottom border. Section titles follow the section header typography (11px, uppercase, `--ctp-overlay0`). + +### Tooltips + +Appear on hover after a 300ms delay. Position: above the target element by default, flip below if insufficient space. + +```css +background: var(--ctp-surface0); +border: 1px solid var(--ctp-surface1); +border-radius: 4px; +padding: 0.3rem 0.6rem; +font-size: 11px; +color: var(--ctp-text); +box-shadow: 0 4px 12px rgba(17, 17, 27, 0.4); +``` + +### Breadcrumbs + +Module navigation breadcrumbs: + +``` +Module Name > List View > Record Name > Sub-view +``` + +Separator: `>` character in `--ctp-overlay0`. Segments are clickable links in `--ctp-subtext1`. Active (final) segment is `--ctp-text` at `font-weight: 600`. + +### Dropdowns / Selects + +Follow the input base style. The dropdown menu: + +```css +background: var(--ctp-surface0); +border: 1px solid var(--ctp-surface1); +border-radius: 6px; +box-shadow: 0 8px 24px rgba(17, 17, 27, 0.5); +padding: 0.25rem; +max-height: 240px; +overflow-y: auto; +``` + +Menu items: + +```css +padding: 0.4rem 0.65rem; +border-radius: 4px; +font-size: 12px; +color: var(--ctp-text); +cursor: pointer; +``` + +Hover: `background: --ctp-surface1`. Selected: `background: rgba(203, 166, 247, 0.12)`, `color: --ctp-mauve`, `font-weight: 600`. + +--- + +## Icons + +Use [Lucide](https://lucide.dev) icons. Size: 14px for inline/table contexts, 16px for buttons and navigation, 20px for page headers and empty states. + +Stroke width: 1.5px (Lucide default). Color inherits from parent text color unless explicitly set. + +Do not mix icon libraries. If Lucide does not have a suitable icon, request one be added or create a custom SVG following Lucide's 24×24 grid and stroke conventions. + +--- + +## Transitions & Animation + +All interactive state changes use `transition: all 0.15s ease`. This applies to hover, focus, active, and open/close states. + +No entrance animations on page load. Content renders immediately. Skeleton loaders are acceptable for async data using a pulsing `--ctp-surface0` → `--ctp-surface1` gradient. + +Dropdown menus and tooltips appear instantly (no slide/fade). Collapse/expand panels (if used) transition `max-height` at `0.2s ease`. + +--- + +## Styling Implementation + +Silo's React frontend uses **inline `React.CSSProperties` objects** with `var(--ctp-*)` token references. This is the project convention and must not be changed. + +### Rules + +- No CSS modules, no Tailwind, no external CSS-in-JS libraries. +- Styles are defined as `const` objects at the top of each component file. +- Shared style patterns (button base, input base) can be extracted to a `styles/` directory as exported `CSSProperties` objects. +- Use `as const` or `as React.CSSProperties` for type safety. +- Pseudo-classes (`:hover`, `:focus`) require state-driven inline styles or a thin CSS file for the base pseudo-class rules. + +### Example + +```typescript +const styles = { + container: { + display: 'grid', + gridTemplateColumns: '1fr 360px', + height: '100%', + overflow: 'hidden', + } as React.CSSProperties, + + sidebar: { + background: 'var(--ctp-mantle)', + borderLeft: '1px solid var(--ctp-surface0)', + display: 'flex', + flexDirection: 'column' as const, + overflowY: 'auto' as const, + } as React.CSSProperties, +}; +``` + +### Pseudo-class CSS + +A single `silo-base.css` file provides pseudo-class rules that cannot be expressed inline: + +```css +/* Hover, focus, and active states for core interactive elements */ +.silo-input:hover { border-color: var(--ctp-overlay0); } +.silo-input:focus { border-color: var(--ctp-mauve); box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25); } +.silo-btn:hover { /* per-tier overrides */ } +.silo-row:hover { background: var(--ctp-surface0); } +``` + +Components apply the corresponding class names alongside their inline styles. This is the only place class-based styling is used. + +--- + +## Do / Don't + +| Do | Don't | +|----|-------| +| Use `var(--ctp-*)` for every color | Hardcode hex values | +| Use the 4px spacing scale | Use arbitrary padding/margins | +| Use Lucide icons at standard sizes | Mix icon libraries | +| Use inline `CSSProperties` | Use CSS modules or Tailwind | +| One primary button per visible context | Multiple competing primary buttons | +| Use translucent accent backgrounds for badges | Use solid bright backgrounds for badges | +| Use icon buttons for row-level table actions | Use text links in table rows | +| Define styles as `const` at file top | Inline style objects in JSX | +| Show tooltips on icon-only buttons | Leave icon buttons unlabeled | +| Use section dividers to group form fields | Use cards or borders around field groups | +| Follow the breadcrumb pattern for navigation | Use nested tab bars | + +--- + +## Appendix: CSS Custom Properties Block + +Paste this at the root of the application stylesheet: + +```css +:root { + --ctp-rosewater: #f5e0dc; + --ctp-flamingo: #f2cdcd; + --ctp-pink: #f5c2e7; + --ctp-mauve: #cba6f7; + --ctp-red: #f38ba8; + --ctp-maroon: #eba0ac; + --ctp-peach: #fab387; + --ctp-yellow: #f9e2af; + --ctp-green: #a6e3a1; + --ctp-teal: #94e2d5; + --ctp-sky: #89dceb; + --ctp-sapphire: #74c7ec; + --ctp-blue: #89b4fa; + --ctp-lavender: #b4befe; + --ctp-text: #cdd6f4; + --ctp-subtext1: #bac2de; + --ctp-subtext0: #a6adc8; + --ctp-overlay2: #9399b2; + --ctp-overlay1: #7f849c; + --ctp-overlay0: #6c7086; + --ctp-surface2: #585b70; + --ctp-surface1: #45475a; + --ctp-surface0: #313244; + --ctp-base: #1e1e2e; + --ctp-mantle: #181825; + --ctp-crust: #11111b; +} +``` diff --git a/web/src/components/items/BOMTab.tsx b/web/src/components/items/BOMTab.tsx index b9f6352..f6a5b73 100644 --- a/web/src/components/items/BOMTab.tsx +++ b/web/src/components/items/BOMTab.tsx @@ -422,9 +422,10 @@ const tdStyle: React.CSSProperties = { const toolBtnStyle: React.CSSProperties = { padding: "0.25rem 0.5rem", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-text)", cursor: "pointer", @@ -436,14 +437,17 @@ const actionBtnStyle: React.CSSProperties = { color: "var(--ctp-subtext1)", cursor: "pointer", fontSize: "0.75rem", + fontWeight: 500, padding: "0.1rem 0.3rem", + borderRadius: "0.375rem", }; const saveBtnStyle: React.CSSProperties = { padding: "0.2rem 0.4rem", fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.25rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-green)", color: "var(--ctp-crust)", cursor: "pointer", @@ -472,8 +476,9 @@ const manualBadge: React.CSSProperties = { const cancelBtnStyle: React.CSSProperties = { padding: "0.2rem 0.4rem", fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.25rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-subtext1)", cursor: "pointer", diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx index 07b1910..48858c7 100644 --- a/web/src/components/items/CategoryPicker.tsx +++ b/web/src/components/items/CategoryPicker.tsx @@ -96,10 +96,10 @@ export function CategoryPicker({ }} style={{ padding: "0.2rem 0.5rem", - fontSize: "0.7rem", - fontWeight: isActive ? 600 : 400, + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.25rem", + borderRadius: "0.375rem", cursor: "pointer", backgroundColor: isActive ? "rgba(203,166,247,0.2)" diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx index 226f74e..800a8ac 100644 --- a/web/src/components/items/CreateItemPane.tsx +++ b/web/src/components/items/CreateItemPane.tsx @@ -671,9 +671,10 @@ const headerStyle: React.CSSProperties = { const actionBtnStyle: React.CSSProperties = { padding: "0.3rem 0.75rem", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", color: "var(--ctp-crust)", cursor: "pointer", }; @@ -683,8 +684,10 @@ const cancelBtnStyle: React.CSSProperties = { border: "none", cursor: "pointer", color: "var(--ctp-subtext1)", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, padding: "0.2rem 0.4rem", + borderRadius: "0.375rem", }; const inputStyle: React.CSSProperties = { diff --git a/web/src/components/items/DeleteItemPane.tsx b/web/src/components/items/DeleteItemPane.tsx index c52e232..9b0026a 100644 --- a/web/src/components/items/DeleteItemPane.tsx +++ b/web/src/components/items/DeleteItemPane.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; -import { del } from '../../api/client'; +import { useState } from "react"; +import { del } from "../../api/client"; interface DeleteItemPaneProps { partNumber: string; @@ -7,7 +7,11 @@ interface DeleteItemPaneProps { onCancel: () => void; } -export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPaneProps) { +export function DeleteItemPane({ + partNumber, + onDeleted, + onCancel, +}: DeleteItemPaneProps) { const [deleting, setDeleting] = useState(false); const [error, setError] = useState(null); @@ -18,59 +22,133 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa await del(`/api/items/${encodeURIComponent(partNumber)}`); onDeleted(); } catch (e) { - setError(e instanceof Error ? e.message : 'Failed to delete item'); + setError(e instanceof Error ? e.message : "Failed to delete item"); } finally { setDeleting(false); } }; return ( -
-
- Delete Item +
+
+ + Delete Item + - +
-
+
{error && ( -
+
{error}
)} -
-

+

+

Permanently delete item

-

+

{partNumber}

-

- This will permanently remove this item, all its revisions, BOM entries, and file attachments. This action cannot be undone. +

+ This will permanently remove this item, all its revisions, BOM + entries, and file attachments. This action cannot be undone.

-
- -
@@ -79,6 +157,12 @@ export function DeleteItemPane({ partNumber, onDeleted, onCancel }: DeleteItemPa } const headerBtnStyle: React.CSSProperties = { - background: 'none', border: 'none', cursor: 'pointer', - color: 'var(--ctp-subtext1)', fontSize: '0.8rem', padding: '0.2rem 0.4rem', + background: "none", + border: "none", + cursor: "pointer", + color: "var(--ctp-subtext1)", + fontSize: "0.75rem", + fontWeight: 500, + padding: "0.2rem 0.4rem", + borderRadius: "0.375rem", }; diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx index 19d5d4e..5bc6709 100644 --- a/web/src/components/items/EditItemPane.tsx +++ b/web/src/components/items/EditItemPane.tsx @@ -90,9 +90,10 @@ export function EditItemPane({ disabled={saving} style={{ padding: "0.3rem 0.75rem", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-blue)", color: "var(--ctp-crust)", cursor: "pointer", @@ -215,6 +216,8 @@ const headerBtnStyle: React.CSSProperties = { border: "none", cursor: "pointer", color: "var(--ctp-subtext1)", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, padding: "0.2rem 0.4rem", + borderRadius: "0.375rem", }; diff --git a/web/src/components/items/ImportItemsPane.tsx b/web/src/components/items/ImportItemsPane.tsx index 057a429..b55a42b 100644 --- a/web/src/components/items/ImportItemsPane.tsx +++ b/web/src/components/items/ImportItemsPane.tsx @@ -185,9 +185,10 @@ export function ImportItemsPane({ disabled={!file || importing} style={{ padding: "0.4rem 0.75rem", - fontSize: "0.85rem", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-yellow)", color: "var(--ctp-crust)", cursor: "pointer", @@ -202,9 +203,10 @@ export function ImportItemsPane({ disabled={importing || (result?.error_count ?? 0) > 0} style={{ padding: "0.4rem 0.75rem", - fontSize: "0.85rem", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", backgroundColor: "var(--ctp-green)", color: "var(--ctp-crust)", cursor: "pointer", @@ -289,6 +291,8 @@ const headerBtnStyle: React.CSSProperties = { border: "none", cursor: "pointer", color: "var(--ctp-subtext1)", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, padding: "0.2rem 0.4rem", + borderRadius: "0.375rem", }; diff --git a/web/src/components/items/ItemTable.tsx b/web/src/components/items/ItemTable.tsx index a8941a4..9b3e44a 100644 --- a/web/src/components/items/ItemTable.tsx +++ b/web/src/components/items/ItemTable.tsx @@ -385,7 +385,8 @@ const actionBtnStyle: React.CSSProperties = { border: "none", color: "var(--ctp-subtext1)", cursor: "pointer", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, padding: "0.15rem 0.4rem", - borderRadius: "0.25rem", + borderRadius: "0.375rem", }; diff --git a/web/src/components/items/ItemsToolbar.tsx b/web/src/components/items/ItemsToolbar.tsx index d385339..fdfd238 100644 --- a/web/src/components/items/ItemsToolbar.tsx +++ b/web/src/components/items/ItemsToolbar.tsx @@ -37,9 +37,10 @@ export function ItemsToolbar({ onClick={() => onFilterChange({ searchScope: scope })} style={{ padding: "var(--d-input-py) var(--d-input-px)", - fontSize: "var(--d-input-font)", + fontSize: "0.75rem", + fontWeight: 500, border: "none", - borderRadius: "0.3rem", + borderRadius: "0.375rem", cursor: "pointer", backgroundColor: filters.searchScope === scope @@ -173,8 +174,9 @@ const toolBtnStyle: React.CSSProperties = { padding: "var(--d-input-py) var(--d-input-px)", backgroundColor: "var(--ctp-surface1)", border: "none", - borderRadius: "0.4rem", + borderRadius: "0.375rem", color: "var(--ctp-text)", - fontSize: "var(--d-input-font)", + fontSize: "0.75rem", + fontWeight: 500, cursor: "pointer", }; diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx index 1974b55..4e10359 100644 --- a/web/src/pages/LoginPage.tsx +++ b/web/src/pages/LoginPage.tsx @@ -162,9 +162,9 @@ const btnPrimaryStyle: React.CSSProperties = { display: "block", width: "100%", padding: "0.75rem 1.5rem", - borderRadius: "0.5rem", - fontWeight: 600, - fontSize: "1rem", + borderRadius: "0.375rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", border: "none", backgroundColor: "var(--ctp-mauve)", @@ -187,9 +187,9 @@ const btnOidcStyle: React.CSSProperties = { display: "block", width: "100%", padding: "0.75rem 1.5rem", - borderRadius: "0.5rem", - fontWeight: 600, - fontSize: "1rem", + borderRadius: "0.375rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", border: "none", backgroundColor: "var(--ctp-blue)", diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx index 80ce67f..e07069e 100644 --- a/web/src/pages/ProjectsPage.tsx +++ b/web/src/pages/ProjectsPage.tsx @@ -443,43 +443,45 @@ export function ProjectsPage() { // Styles const btnPrimaryStyle: React.CSSProperties = { padding: "0.5rem 1rem", - borderRadius: "0.4rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-mauve)", color: "var(--ctp-crust)", - fontWeight: 600, - fontSize: "0.85rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", }; const btnSecondaryStyle: React.CSSProperties = { padding: "0.5rem 1rem", - borderRadius: "0.4rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-text)", - fontSize: "0.85rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", }; const btnDangerStyle: React.CSSProperties = { padding: "0.5rem 1rem", - borderRadius: "0.4rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-red)", color: "var(--ctp-crust)", - fontWeight: 600, - fontSize: "0.85rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", }; const btnSmallStyle: React.CSSProperties = { padding: "0.3rem 0.6rem", - borderRadius: "0.3rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-text)", - fontSize: "0.8rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", }; @@ -504,8 +506,9 @@ const formCloseStyle: React.CSSProperties = { border: "none", color: "inherit", cursor: "pointer", - fontSize: "0.85rem", - fontWeight: 600, + fontSize: "0.75rem", + fontWeight: 500, + borderRadius: "0.375rem", }; const errorBannerStyle: React.CSSProperties = { diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx index 0c8d6d1..07e0b55 100644 --- a/web/src/pages/SchemasPage.tsx +++ b/web/src/pages/SchemasPage.tsx @@ -706,22 +706,23 @@ const tdStyle: React.CSSProperties = { const btnTinyStyle: React.CSSProperties = { padding: "0.2rem 0.5rem", - borderRadius: "0.25rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-text)", fontSize: "0.75rem", + fontWeight: 500, cursor: "pointer", }; const btnTinyPrimaryStyle: React.CSSProperties = { padding: "0.2rem 0.5rem", - borderRadius: "0.25rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-mauve)", color: "var(--ctp-crust)", fontSize: "0.75rem", - fontWeight: 600, + fontWeight: 500, cursor: "pointer", }; diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx index 7d429c0..811e4b6 100644 --- a/web/src/pages/SettingsPage.tsx +++ b/web/src/pages/SettingsPage.tsx @@ -404,12 +404,12 @@ const inputStyle: React.CSSProperties = { const btnPrimaryStyle: React.CSSProperties = { padding: "0.5rem 1rem", - borderRadius: "0.4rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-mauve)", color: "var(--ctp-crust)", - fontWeight: 600, - fontSize: "0.85rem", + fontWeight: 500, + fontSize: "0.75rem", cursor: "pointer", whiteSpace: "nowrap", }; @@ -418,19 +418,22 @@ const btnCopyStyle: React.CSSProperties = { padding: "0.4rem 0.75rem", background: "var(--ctp-surface1)", border: "none", - borderRadius: "0.4rem", + borderRadius: "0.375rem", color: "var(--ctp-text)", cursor: "pointer", - fontSize: "0.85rem", + fontSize: "0.75rem", + fontWeight: 500, }; const btnDismissStyle: React.CSSProperties = { padding: "0.4rem 0.75rem", background: "none", border: "none", + borderRadius: "0.375rem", color: "var(--ctp-subtext0)", cursor: "pointer", - fontSize: "0.85rem", + fontSize: "0.75rem", + fontWeight: 500, }; const btnDangerStyle: React.CSSProperties = { @@ -438,9 +441,10 @@ const btnDangerStyle: React.CSSProperties = { color: "var(--ctp-red)", border: "none", padding: "0.3rem 0.6rem", - borderRadius: "0.3rem", + borderRadius: "0.375rem", cursor: "pointer", - fontSize: "0.8rem", + fontSize: "0.75rem", + fontWeight: 500, }; const btnRevokeConfirmStyle: React.CSSProperties = { @@ -448,19 +452,20 @@ const btnRevokeConfirmStyle: React.CSSProperties = { color: "var(--ctp-crust)", border: "none", padding: "0.2rem 0.5rem", - borderRadius: "0.25rem", + borderRadius: "0.375rem", cursor: "pointer", fontSize: "0.75rem", - fontWeight: 600, + fontWeight: 500, }; const btnTinyStyle: React.CSSProperties = { padding: "0.2rem 0.5rem", - borderRadius: "0.25rem", + borderRadius: "0.375rem", border: "none", backgroundColor: "var(--ctp-surface1)", color: "var(--ctp-text)", fontSize: "0.75rem", + fontWeight: 500, cursor: "pointer", };