/* ============================================================================= ds-theme — generic, token-driven design system layer ----------------------------------------------------------------------------- Brand-agnostic. Every rule is scoped under `.ds-theme`, which is applied to only when the active brand declares a `theme` block in config/brands/{key}.php. Portals that do not opt in never load this file and never receive the class, so their rendering is untouched. This file defines BEHAVIOUR (which element gets which token). It must not contain brand values — those live in public/{brand}/css/theme.css, which loads after this file and sets the --ds-* custom properties. To adopt for another portal: 1. add a `theme` block to config/brands/{brand}.php 2. create public/{brand}/css/theme.css setting the --ds-* values ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Token contract + neutral defaults Brands override these on their own `.theme-{brand}` class. -------------------------------------------------------------------------- */ .ds-theme { /* Colour */ --ds-color-text: #000000; --ds-color-text-secondary: #303030; --ds-color-text-muted: #777777; --ds-color-surface: #ffffff; --ds-color-surface-alt: #f0f0f0; --ds-color-border-field: #999999; --ds-color-divider: #f0f0f0; --ds-color-action: #ed1b24; --ds-color-action-dark: #c5002c; --ds-color-on-action: #ffffff; /* Shape */ --ds-radius: 0px; --ds-shadow: none; --ds-divider: 1px solid var(--ds-color-divider); --ds-border-field: 1px solid var(--ds-color-border-field); /* Metrics */ --ds-control-height: 48px; --ds-space: 24px; --ds-header-height: 84px; /* Typography --ds-font-display carries the licensed display face when a brand ships one; it falls back to the body font otherwise. */ --ds-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ds-font-display: var(--ds-font-body); --ds-page-title-size: 28px; --ds-page-title-line: 40px; --ds-section-title-size: 22px; --ds-section-title-line: 32px; --ds-nav-item-size: 18px; --ds-nav-item-line: 24px; --ds-label-size: 13px; --ds-label-line: 16px; --ds-body-size: 13px; --ds-body-line: 16px; --ds-header-nav-size: 11px; --ds-header-nav-line: 16px; /* The global stylesheet drives pagination off this variable. */ --pagination-color: var(--ds-color-action); } /* ----------------------------------------------------------------------------- 2. Global rules from the guidelines: 0px radius everywhere, no shadows, Inter throughout. -------------------------------------------------------------------------- */ .ds-theme, .ds-theme p, .ds-theme td, .ds-theme th, .ds-theme label, .ds-theme input, .ds-theme select, .ds-theme textarea, .ds-theme button, .ds-theme .btn, .ds-theme .form-control, .ds-theme .form-select { font-family: var(--ds-font-body); } .ds-theme { background-color: var(--ds-color-surface); color: var(--ds-color-text); font-size: var(--ds-body-size); line-height: var(--ds-body-line); } .ds-theme.bg-light, .ds-theme .bg-light { background-color: var(--ds-color-surface) !important; } .ds-theme .btn, .ds-theme .form-control, .ds-theme .form-select, .ds-theme .form-check-input, .ds-theme textarea, .ds-theme .input-group-text, .ds-theme .card, .ds-theme .content-card, .ds-theme .alert, .ds-theme .dropdown-menu, .ds-theme .modal-content, .ds-theme .nav-link, .ds-theme .tab-item, .ds-theme .card-item, .ds-theme .price-box, .ds-theme .customer-type-wrapper, .ds-theme .tags-status-box, .ds-theme .total-card, .ds-theme .payment-status, .ds-theme .page-link, .ds-theme .select2-container--default .select2-selection--single, .ds-theme .select2-dropdown { border-radius: var(--ds-radius); } .ds-theme .btn, .ds-theme .card, .ds-theme .content-card, .ds-theme .dropdown-menu, .ds-theme .modal-content, .ds-theme .box-shadow, .ds-theme .shadow, .ds-theme .shadow-sm, .ds-theme .sidebar, .ds-theme .navbar-brand, .ds-theme header, .ds-theme .form-signin { box-shadow: var(--ds-shadow); } /* ----------------------------------------------------------------------------- 3. Typography roles -------------------------------------------------------------------------- */ /* Page title — the layout renders it as `h1.h2` in the content header strip. */ .ds-theme main h1, .ds-theme main h1.h2 { font-family: var(--ds-font-body); font-weight: 800; font-size: var(--ds-page-title-size); line-height: var(--ds-page-title-line); color: var(--ds-color-text); margin: 0; } /* Section title / field-group heading */ .ds-theme .content-card h4, .ds-theme .card h4, .ds-theme h4, .ds-theme legend, .ds-theme .modal-title { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-section-title-size); line-height: var(--ds-section-title-line); color: var(--ds-color-text); } /* Field label — stacked above its control */ .ds-theme .form-label, .ds-theme label:not(.form-check-label) { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); color: var(--ds-color-text); display: block; float: none; text-align: left; padding-left: 0; margin-bottom: 8px; } /* Checkbox / radio labels sit inline next to their control — type only, no display or spacing changes, or the .form-check row layout breaks. */ .ds-theme .form-check-label { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); color: var(--ds-color-text); } /* Body + auxiliary text */ .ds-theme p, .ds-theme td, .ds-theme li { font-size: var(--ds-body-size); line-height: var(--ds-body-line); color: var(--ds-color-text); } .ds-theme .text-muted, .ds-theme .grey-text, .ds-theme small, .ds-theme .form-text { color: var(--ds-color-text-muted) !important; } .ds-theme a { color: var(--ds-color-action); } .ds-theme a:hover { color: var(--ds-color-action-dark); } /* ----------------------------------------------------------------------------- 4. Buttons — UPPERCASE, 48px, 0 radius, red only for action -------------------------------------------------------------------------- */ .ds-theme .btn { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); letter-spacing: 0.06em; text-transform: uppercase; min-height: var(--ds-control-height); padding: 14px 24px; display: inline-flex; align-items: center; justify-content: center; transition: none; } .ds-theme .btn:focus, .ds-theme .btn:focus-visible { box-shadow: none; outline: 2px solid var(--ds-color-action); outline-offset: 2px; } /* Primary — gradient fill. Deliberately no :not(:disabled):not(.disabled) here — those pseudo-classes inflate specificity and would beat the more specific contextual overrides below (e.g. the language switcher). Disabled states are declared explicitly. */ .ds-theme .btn-primary { background: linear-gradient(90deg, var(--ds-color-action-dark) 0%, var(--ds-color-action) 100%); background-color: var(--ds-color-action); border: 0; color: var(--ds-color-on-action); } .ds-theme .btn-primary:hover, .ds-theme .btn-primary:active, .ds-theme .btn-primary:focus { background: linear-gradient(90deg, var(--ds-color-action-dark) 0%, var(--ds-color-action-dark) 100%); background-color: var(--ds-color-action-dark); border: 0; color: var(--ds-color-on-action); } .ds-theme .btn-primary:disabled, .ds-theme .btn-primary.disabled { background: var(--ds-color-border-field); border: 0; color: var(--ds-color-on-action); opacity: 1; } /* Secondary — outlined */ .ds-theme .btn-secondary, .ds-theme .btn-light, .ds-theme .btn-outline-primary { background: transparent; background-color: transparent; border: 2px solid var(--ds-color-action); color: var(--ds-color-action); } .ds-theme .btn-secondary:hover, .ds-theme .btn-secondary:active, .ds-theme .btn-secondary:focus, .ds-theme .btn-light:hover, .ds-theme .btn-outline-primary:hover { background-color: var(--ds-color-action); border-color: var(--ds-color-action); color: var(--ds-color-on-action); } .ds-theme .btn-secondary:disabled, .ds-theme .btn-secondary.disabled { background: transparent; border-color: var(--ds-color-border-field); color: var(--ds-color-border-field); opacity: 1; } /* ----------------------------------------------------------------------------- 5. Form controls -------------------------------------------------------------------------- */ .ds-theme .form-control, .ds-theme .form-select, .ds-theme .select2-container--default .select2-selection--single { border: var(--ds-border-field); border-radius: var(--ds-radius); background-color: var(--ds-color-surface); color: var(--ds-color-text); font-size: var(--ds-body-size); line-height: var(--ds-body-line); min-height: var(--ds-control-height); padding: 14px 16px; box-shadow: none; } .ds-theme textarea.form-control { min-height: calc(var(--ds-control-height) * 2); } .ds-theme .form-control::placeholder { color: var(--ds-color-text-muted); opacity: 1; } .ds-theme .form-control:focus, .ds-theme .form-select:focus, .ds-theme input:focus, .ds-theme textarea:focus { border-color: var(--ds-color-action); box-shadow: none; outline: none; } /* Read-only / disabled fields sit on the alt surface (per the profile mockup) */ .ds-theme .form-control[readonly], .ds-theme .form-control:disabled, .ds-theme .form-select:disabled { background-color: var(--ds-color-surface-alt); border-color: var(--ds-color-surface-alt); color: var(--ds-color-text-secondary); opacity: 1; } /* Password-visibility toggle and other input-group affixes */ .ds-theme .input-group-text { border: var(--ds-border-field); border-left: 0; border-radius: var(--ds-radius); background-color: var(--ds-color-surface); color: var(--ds-color-text); min-height: var(--ds-control-height); padding: 14px 16px; } .ds-theme .input-group > .form-control { border-right: 0; } /* Critical states — the only other place the action colour is allowed */ .ds-theme .form-control.is-invalid, .ds-theme .form-select.is-invalid, .ds-theme .form-control.error { border-color: var(--ds-color-action); background-image: none; } .ds-theme .invalid-feedback, .ds-theme .error-message, .ds-theme .text-danger { color: var(--ds-color-action) !important; font-size: var(--ds-body-size); line-height: var(--ds-body-line); } .ds-theme .form-check-input:checked { background-color: var(--ds-color-action); border-color: var(--ds-color-action); } /* Radios stay circular — the 0px-radius rule is about components, fields and buttons, not about turning radio buttons into squares. */ .ds-theme .form-check-input[type="radio"] { border-radius: 50%; } /* ----------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .ds-theme header, .ds-theme .dashboard-body header { min-height: var(--ds-header-height); height: var(--ds-header-height); background-color: var(--ds-color-surface); border-bottom: var(--ds-divider); } .ds-theme .navbar-brand { box-shadow: none; border-right: var(--ds-divider); height: var(--ds-header-height); display: flex; align-items: center; } /* The language switcher is chrome, not an action — it must never inherit the primary-button treatment, on either the header or the login card. */ .ds-theme .language-switcher .btn, .ds-theme .language-switcher-container .btn, .ds-theme .language-switcher-container .btn-primary, .ds-theme .language-switcher-container .btn-primary:hover, .ds-theme .language-switcher-container .btn-primary:focus, .ds-theme .language-switcher-container .btn-primary:active { background-color: transparent; border: 0; box-shadow: none; color: var(--ds-color-text); min-height: auto; padding: 0; letter-spacing: normal; text-transform: none; font-family: var(--ds-font-body); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); } /* Text-label switchers must drop the primary gradient. Icon-based ones (.language-switcher-icon) carry their glyph as a background-image, so the shorthand must never be reset for them. */ .ds-theme .language-switcher .btn:not(.language-switcher-icon), .ds-theme .language-switcher-container .btn:not(.language-switcher-icon) { background-image: none; } .ds-theme .language-switcher .btn, .ds-theme .language-switcher-icon { font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-header-nav-size); line-height: var(--ds-header-nav-line); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-color-text); border: 0; min-height: auto; padding: 0; } .ds-theme .dropdown-menu { border: var(--ds-divider); box-shadow: none; } .ds-theme .dropdown-item { font-size: var(--ds-body-size); line-height: var(--ds-body-line); color: var(--ds-color-text); } .ds-theme .dropdown-item:hover, .ds-theme .dropdown-item:focus { background-color: var(--ds-color-surface-alt); color: var(--ds-color-action); } /* ----------------------------------------------------------------------------- 7. Sidebar — 24px padding, 24px item spacing, Bold 18/24 -------------------------------------------------------------------------- */ .ds-theme .sidebar { background-color: var(--ds-color-surface); border-right: var(--ds-divider); box-shadow: none; padding: var(--ds-header-height) 0 0; } .ds-theme .sidebar-sticky { height: calc(100vh - var(--ds-header-height)); padding: var(--ds-space) !important; } .ds-theme .sidebar .nav-item { padding: 0; } .ds-theme .sidebar .nav-item + .nav-item { margin-top: var(--ds-space); } .ds-theme .sidebar .nav-link { font-family: var(--ds-font-body); font-weight: 700; font-size: var(--ds-nav-item-size); line-height: var(--ds-nav-item-line); color: var(--ds-color-text-secondary); display: flex; align-items: center; gap: 16px; padding: 0; } .ds-theme .sidebar .nav-link i { margin-right: 0; color: var(--ds-color-text-secondary); } .ds-theme .sidebar .nav-link:hover, .ds-theme .sidebar .nav-link:hover i, .ds-theme .sidebar .nav-link.active, .ds-theme .sidebar .nav-link.active i { color: var(--ds-color-action); } @media (max-width: 1280px) { .ds-theme .sidebar .nav-link { font-size: 16px; } } @media (max-width: 767.98px) { .ds-theme .sidebar { padding-top: 0; } .ds-theme .sidebar-sticky { height: auto; } } /* ----------------------------------------------------------------------------- 8. Surfaces, dividers, tables -------------------------------------------------------------------------- */ .ds-theme .content-card, .ds-theme .card { background-color: var(--ds-color-surface); border: var(--ds-divider); border-radius: var(--ds-radius); box-shadow: none; padding: var(--ds-space); } .ds-theme main > .d-flex.border-bottom, .ds-theme .border-bottom { border-bottom: var(--ds-divider) !important; } .ds-theme .border-top { border-top: var(--ds-divider) !important; } .ds-theme hr, .ds-theme .hr-divider { border-top: var(--ds-divider); border-color: var(--ds-color-divider); opacity: 1; color: var(--ds-color-divider); } .ds-theme .table, .ds-theme table { --bs-table-bg: transparent; color: var(--ds-color-text); font-size: var(--ds-body-size); line-height: var(--ds-body-line); } .ds-theme .table > :not(caption) > * > * { border-bottom-color: var(--ds-color-divider); box-shadow: none; } .ds-theme .table thead th, .ds-theme .table-header-text, .ds-theme thead th { background-color: var(--ds-color-surface-alt); border-bottom: var(--ds-divider); font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); color: var(--ds-color-text); } /* ----------------------------------------------------------------------------- 9. Alerts, modals, tabs, pagination -------------------------------------------------------------------------- */ .ds-theme .alert { border: var(--ds-divider); border-radius: var(--ds-radius); background-color: var(--ds-color-surface-alt); color: var(--ds-color-text); font-size: var(--ds-body-size); line-height: var(--ds-body-line); } .ds-theme .alert-danger { border: 1px solid var(--ds-color-action); background-color: var(--ds-color-surface); color: var(--ds-color-action); } .ds-theme .modal-content { border: var(--ds-divider); border-radius: var(--ds-radius); box-shadow: none; } .ds-theme .modal-header, .ds-theme .modal-footer { border-color: var(--ds-color-divider); } .ds-theme .tab-item, .ds-theme .custom-tabs .nav-link { border-radius: var(--ds-radius); font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-label-size); line-height: var(--ds-label-line); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-color-text-secondary); } .ds-theme .tab-item.active, .ds-theme .tab-item:hover, .ds-theme .custom-tabs .nav-link.active { color: var(--ds-color-action); border-color: var(--ds-color-action); } .ds-theme .page-link { border-color: var(--ds-color-divider); color: var(--ds-color-action); } .ds-theme .page-item.active .page-link { background-color: var(--ds-color-action); border-color: var(--ds-color-action); color: var(--ds-color-on-action); }