/* ============================================================ Retro SAP GUI Design System — Tokens colors_and_type.css ============================================================ */ @font-face { font-family: "Microsoft Sans Serif"; src: url("fonts/MicrosoftSansSerif.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: block; } :root { /* ---- Color: Surfaces -------------------------------------- */ --surface: #D6E4F1; /* signature SAP desktop wash */ --surface-2: #EAF1F8; /* panel fill */ --surface-3: #F5F8FB; /* inset fields, hover bg */ --surface-inset: #FFFFFF; /* input field interior */ --surface-toolbar:#DCE6F2; /* toolbar gradient end */ /* ---- Color: Title bar / header --------------------------- */ --header-blue-1: #003D7A; --header-blue-2: #2A6FB8; --header-blue-3: #4A7FB8; --header-gloss: #6FA3D6; /* ---- Color: Accent (SAP amber/gold) ---------------------- */ --accent: #F0AB00; /* selection, primary highlight */ --accent-2: #E8A100; /* warning */ --accent-soft: #FFE8A8; /* hover surface */ --accent-pale: #FFF6D9; /* row hover */ /* ---- Color: Borders -------------------------------------- */ --border-light: #FFFFFF; /* top/left bevel */ --border-mid: #A6B4C5; /* flat 1px line */ --border-dark: #6E7A89; /* bottom/right bevel */ --border-darker: #4A5566; /* hairline outline */ --border-black: #000000; /* ---- Color: Text ----------------------------------------- */ --fg: #000000; --fg-muted: #4A5566; --fg-disabled: #8A95A5; --fg-on-accent: #000000; --fg-on-header: #FFFFFF; /* ---- Color: Links ---------------------------------------- */ --link: #1F6BB8; --link-visited: #6B3F8A; --link-hover: #C8281E; /* ---- Color: Status --------------------------------------- */ --status-error: #C8281E; --status-error-bg:#FBE5E2; --status-warning: #E8A100; --status-warning-bg:#FFF4D6; --status-info: #1F6BB8; --status-info-bg: #E0EDF8; --status-success: #2E8B3E; --status-success-bg:#E2F1E5; /* ---- Typography stacks ----------------------------------- */ --font-system: "Microsoft Sans Serif", "MS Sans Serif", Tahoma, "DejaVu Sans", sans-serif; --font-bold: "Microsoft Sans Serif", "SAP Sans Serif", Tahoma, Verdana, sans-serif; --font-mono: "Lucida Console", "Courier New", monospace; /* ---- Type scale (rendered to feel like 8/10/12 pt) ------- */ --type-xs: 10px; /* status bar, footnote */ --type-sm: 11px; /* body, fields */ --type-md: 12px; /* default UI text */ --type-lg: 13px; /* labels emphasized */ --type-xl: 14px; /* section title */ --type-2xl: 16px; /* page title */ --type-3xl: 20px; /* hero/dialog title */ --leading-tight: 1.15; --leading-normal: 1.3; /* ---- Spacing (4px grid, with sub-grid) ------------------- */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; /* ---- Borders / radius ------------------------------------ */ --radius: 0; /* always zero */ --radius-avatar: 9999px; /* the only round thing */ /* ---- Bevels (composed via box-shadow inset/outset) ------- */ --bevel-out: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark); --bevel-out-strong: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 0 0 0 1px var(--border-black); --bevel-in: inset 1px 1px 0 var(--border-dark), inset -1px -1px 0 var(--border-light); --bevel-in-strong: inset 1px 1px 0 var(--border-dark), inset -1px -1px 0 var(--border-light), 0 0 0 1px var(--border-black); --bevel-flat: inset 0 0 0 1px var(--border-mid); --bevel-fieldset: inset 0 0 0 1px var(--border-light), 0 0 0 1px var(--border-dark); /* ---- Title bar gradient ---------------------------------- */ --gradient-titlebar: linear-gradient(180deg, var(--header-blue-1) 0%, var(--header-blue-2) 35%, var(--header-gloss) 50%, var(--header-blue-2) 65%, var(--header-blue-1) 100%); --gradient-toolbar: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-toolbar) 100%); --gradient-button: linear-gradient(180deg, #FFFFFF 0%, #E2EAF3 100%); --gradient-button-hover: linear-gradient(180deg, #FFF6D9 0%, #FFD984 100%); --gradient-button-press: linear-gradient(180deg, #DDC575 0%, #FFE8A8 100%); } /* ============================================================ Semantic helpers (apply to any element) ============================================================ */ .sap-body { font-family: var(--font-system); font-size: var(--type-sm); color: var(--fg); } .sap-bold { font-family: var(--font-bold); font-weight: 700; } .sap-h1 { font-family: var(--font-bold); font-weight: 700; font-size: var(--type-3xl); color: var(--header-blue-1); margin: 0; letter-spacing: 0.02em; } .sap-h2 { font-family: var(--font-bold); font-weight: 700; font-size: var(--type-2xl); color: var(--header-blue-1); margin: 0; } .sap-h3 { font-family: var(--font-bold); font-weight: 700; font-size: var(--type-xl); color: var(--fg); margin: 0; } .sap-label { font-family: var(--font-system); font-size: var(--type-sm); color: var(--fg); } .sap-help { font-family: var(--font-system); font-size: var(--type-xs); color: var(--fg-muted); } .sap-mono { font-family: var(--font-mono); font-size: var(--type-sm); } .sap-link { color: var(--link); text-decoration: underline; cursor: pointer; } .sap-link:hover { color: var(--link-hover); } .sap-link.visited{ color: var(--link-visited); } /* ============================================================ Reset for SAP-styled regions ============================================================ */ .sap-root { font-family: var(--font-system); font-size: var(--type-sm); color: var(--fg); background: var(--surface); line-height: var(--leading-normal); -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never; } .sap-root *, .sap-root *::before, .sap-root *::after { box-sizing: border-box; }