/* ============================================================================= * WEG Design System — Standalone theme (native HTML/CSS/JS, no build, no CDN) * * Faithful port of the @weg-react-ui design tokens for rapid prototyping. * Just this file and write plain HTML using the classes documented in * reference/components.md. Toggle dark mode with (or set * data-theme; see the bottom "auto" block). * * Source of truth: packages/config/css/{colors,dimensions,globals,theme.core}.css * ========================================================================== */ /* ---------------------------------------------------------------------------- * 1. Fonts — Roboto. Loaded from Google Fonts when online; degrades to system * sans-serif offline. Remove this @import for fully offline/air-gapped use. * -------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&family=Roboto+Mono:wght@400;500&display=swap"); /* ---------------------------------------------------------------------------- * 2. Raw color palette (from colors.css) * -------------------------------------------------------------------------- */ :root { --colors-brand-blue: #00579d; --colors-transparent: transparent; --colors-common-white: #fafafa; --colors-common-black: #1a1b1f; --colors-common-gray-50: #f3f3f4; --colors-common-gray-100: #e5e5e6; --colors-common-gray-200: #cccccd; --colors-common-gray-300: #b3b3b6; --colors-common-gray-400: #9d9da1; --colors-common-gray-500: #86868a; --colors-common-gray-600: #6f6f74; --colors-common-gray-700: #59595e; --colors-common-gray-800: #444449; --colors-common-gray-900: #303034; --colors-common-gray-950: #27272a; --colors-common-blue-50: #dbefff; --colors-common-blue-100: #b8dfff; --colors-common-blue-200: #70bfff; --colors-common-blue-300: #299fff; --colors-common-blue-400: #007fe6; --colors-common-blue-500: #00579d; --colors-common-blue-600: #004780; --colors-common-blue-700: #00335c; --colors-common-blue-800: #00223d; --colors-common-blue-900: #00111f; --colors-common-blue-950: #00080f; --colors-common-dark-mode-blue-200: #a6d0ff; --colors-common-dark-mode-blue-400: #00a3f6; --colors-common-dark-mode-blue-500: #0089d0; --colors-common-purple-100: #e7e0ed; --colors-common-purple-200: #cebedb; --colors-common-purple-500: #8862a2; --colors-common-purple-700: #533a64; --colors-common-dark-mode-purple-200: #d4c7de; --colors-common-dark-mode-purple-500: #9776ae; --colors-common-dark-mode-purple-700: #5d446d; --colors-common-green-200: #00d37e; --colors-common-green-300: #00af67; --colors-common-green-500: #00693c; --colors-common-green-700: #004023; --colors-common-cyan-100: #d3f1f8; --colors-common-cyan-500: #28b9da; --colors-common-cyan-700: #166e83; --colors-common-dark-mode-cyan-200: #6edafd; --colors-common-dark-mode-cyan-400: #25abcd; --colors-common-dark-mode-cyan-500: #1e91ae; --colors-common-dark-mode-cyan-700: #0d5567; --colors-common-orange-100: #ffe6dc; --colors-common-orange-500: #ef8300; --colors-common-orange-600: #bc6600; --colors-common-orange-700: #8d4b00; --colors-common-dark-mode-orange-200: #f9dcb9; --colors-common-dark-mode-orange-600: #ec8a13; --colors-common-dark-mode-orange-700: #b3690f; --colors-common-dark-mode-orange-800: #774509; --colors-common-yellow-100: #fff7cc; --colors-common-yellow-500: #efc906; --colors-common-yellow-700: #998000; --colors-common-dark-mode-yellow-300: #ffd07a; --colors-common-dark-mode-yellow-400: #fbc009; --colors-common-dark-mode-yellow-500: #eab308; --colors-common-dark-mode-yellow-600: #b98d05; --colors-common-red-100: #fedada; --colors-common-red-400: #fb5151; --colors-common-red-500: #e71717; --colors-common-red-700: #8c0909; --colors-common-dark-mode-red-200: #f8b6b5; --colors-common-dark-mode-red-500: #e02e2a; --colors-common-dark-mode-red-600: #b62320; --colors-common-dark-mode-red-700: #8b1916; /* Spacing scale (dimensions.css) */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; /* Radius (default radius = medium = 8px) */ --radius-none: 0; --radius-sm: 0.125rem; --radius: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* Typography */ --font-sans: "Roboto", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; --text-xxs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Layout */ --topbar-height: 3.5rem; --sidebar-width: 16rem; --sidebar-width-collapsed: 3.375rem; --container-max: 1280px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------------------------------------------------------------------------- * 3. Semantic tokens — Light mode (globals.css) * -------------------------------------------------------------------------- */ :root, .light { --tw-shadow-color: color-mix(in srgb, var(--colors-common-black) 25%, transparent); --shadow-sm: 0 1px 2px 0 var(--tw-shadow-color); --shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); --shadow-md: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); --shadow-lg: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); --shadow-xl: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); --color-background: #fcfcfd; --color-foreground: #191b1f; --overlay-hover: 0.28; --overlay-active: 0.36; --color-placeholder: #98989a; --color-disabled: var(--colors-common-gray-400); --color-border: var(--colors-common-gray-200); --color-border-interactive: var(--colors-common-gray-400); --color-surface: #f7f7f8; --color-surface-2: #f1f2f4; --color-surface-3: #e8eaed; --color-surface-overlay: color-mix(in srgb, var(--colors-common-black) 25%, transparent); --color-neutral: var(--colors-common-gray-800); --color-neutral-muted: var(--colors-common-gray-600); --color-neutral-flat: color-mix(in srgb, var(--colors-common-gray-800) 15%, transparent); --color-neutral-soft: var(--colors-common-gray-100); --color-neutral-strong: var(--colors-common-gray-950); --color-neutral-solid: var(--colors-common-gray-950); --color-neutral-on: var(--colors-common-white); --color-primary: var(--colors-common-blue-500); --color-primary-flat: color-mix(in srgb, var(--colors-common-blue-500) 15%, transparent); --color-primary-soft: var(--colors-common-blue-100); --color-primary-strong: var(--colors-common-blue-700); --color-primary-solid: var(--colors-common-blue-500); --color-primary-on: var(--colors-common-white); --color-secondary: var(--colors-common-orange-500); --color-secondary-flat: color-mix(in srgb, var(--colors-common-orange-500) 15%, transparent); --color-secondary-soft: var(--colors-common-orange-100); --color-secondary-strong: var(--colors-common-orange-700); --color-secondary-solid: var(--colors-common-orange-500); --color-secondary-on: var(--colors-common-white); --color-tertiary: var(--colors-common-purple-500); --color-tertiary-flat: color-mix(in srgb, var(--colors-common-purple-500) 15%, transparent); --color-tertiary-soft: var(--colors-common-purple-100); --color-tertiary-strong: var(--colors-common-purple-700); --color-tertiary-solid: var(--colors-common-purple-500); --color-tertiary-on: var(--colors-common-white); --color-positive: var(--colors-common-green-500); --color-positive-flat: color-mix(in srgb, var(--colors-common-green-500) 15%, transparent); --color-positive-soft: var(--colors-common-green-300); --color-positive-strong: var(--colors-common-green-700); --color-positive-solid: var(--colors-common-green-500); --color-positive-on: var(--colors-common-white); --color-negative: var(--colors-common-red-500); --color-negative-flat: color-mix(in srgb, var(--colors-common-red-500) 15%, transparent); --color-negative-soft: var(--colors-common-red-100); --color-negative-strong: var(--colors-common-red-700); --color-negative-solid: var(--colors-common-red-500); --color-negative-on: var(--colors-common-white); --color-warning: var(--colors-common-yellow-500); --color-warning-flat: color-mix(in srgb, var(--colors-common-yellow-500) 18%, transparent); --color-warning-soft: var(--colors-common-yellow-100); --color-warning-strong: var(--colors-common-yellow-700); --color-warning-solid: var(--colors-common-yellow-500); --color-warning-on: #1a1b1f; --color-info: var(--colors-common-cyan-500); --color-info-flat: color-mix(in srgb, var(--colors-common-cyan-500) 15%, transparent); --color-info-soft: var(--colors-common-cyan-100); --color-info-strong: var(--colors-common-cyan-700); --color-info-solid: var(--colors-common-cyan-500); --color-info-on: var(--colors-common-white); --color-sidebar-bg: #0d273e; --color-sidebar-fg: #e5e5e6; } /* ---------------------------------------------------------------------------- * 4. Semantic tokens — Dark mode * -------------------------------------------------------------------------- */ .dark { --tw-shadow-color: rgb(2 4 13 / 60%); --color-background: #191b1f; --color-foreground: #fcfcfd; --overlay-hover: 0.21; --overlay-active: 0.32; --color-placeholder: #a0a0ab; --color-disabled: var(--colors-common-gray-400); --color-border: var(--colors-common-gray-800); --color-border-interactive: var(--colors-common-gray-600); --color-surface: #202327; --color-surface-2: #272a30; --color-surface-3: #30343b; --color-surface-overlay: color-mix(in srgb, var(--colors-common-black) 70%, transparent); --color-neutral: var(--colors-common-gray-200); --color-neutral-muted: var(--colors-common-gray-400); --color-neutral-flat: color-mix(in srgb, var(--colors-common-gray-200) 15%, transparent); --color-neutral-soft: var(--colors-common-gray-50); --color-neutral-strong: var(--colors-common-gray-800); --color-neutral-solid: var(--colors-common-gray-950); --color-neutral-on: var(--colors-common-gray-800); --color-primary: var(--colors-common-dark-mode-blue-500); --color-primary-flat: color-mix(in srgb, var(--colors-common-blue-400) 15%, transparent); --color-primary-soft: var(--colors-common-dark-mode-blue-200); --color-primary-strong: var(--colors-common-blue-700); --color-primary-solid: var(--colors-common-blue-500); --color-primary-on: var(--colors-common-white); --color-secondary: var(--colors-common-orange-500); --color-secondary-flat: color-mix(in srgb, var(--colors-common-dark-mode-orange-700) 25%, transparent); --color-secondary-soft: var(--colors-common-dark-mode-orange-200); --color-secondary-strong: var(--colors-common-dark-mode-orange-800); --color-secondary-solid: var(--colors-common-orange-600); --color-secondary-on: var(--colors-common-white); --color-tertiary: var(--colors-common-dark-mode-purple-500); --color-tertiary-flat: color-mix(in srgb, var(--colors-common-dark-mode-purple-500) 15%, transparent); --color-tertiary-soft: var(--colors-common-dark-mode-purple-200); --color-tertiary-strong: var(--colors-common-dark-mode-purple-700); --color-tertiary-solid: var(--colors-common-purple-500); --color-tertiary-on: var(--colors-common-white); --color-positive: var(--colors-common-green-300); --color-positive-flat: color-mix(in srgb, var(--colors-common-green-500) 20%, transparent); --color-positive-soft: var(--colors-common-green-200); --color-positive-strong: var(--colors-common-green-700); --color-positive-solid: var(--colors-common-green-500); --color-positive-on: var(--colors-common-white); --color-negative: var(--colors-common-red-400); --color-negative-flat: color-mix(in srgb, var(--colors-common-dark-mode-red-500) 20%, transparent); --color-negative-soft: var(--colors-common-dark-mode-red-200); --color-negative-strong: var(--colors-common-dark-mode-red-700); --color-negative-solid: var(--colors-common-dark-mode-red-600); --color-negative-on: var(--colors-common-white); --color-warning: var(--colors-common-dark-mode-yellow-400); --color-warning-flat: color-mix(in srgb, var(--colors-common-dark-mode-yellow-500) 20%, transparent); --color-warning-soft: var(--colors-common-dark-mode-yellow-300); --color-warning-strong: var(--colors-common-dark-mode-yellow-600); --color-warning-solid: var(--colors-common-dark-mode-yellow-500); --color-warning-on: #1a1b1f; --color-info: var(--colors-common-dark-mode-cyan-400); --color-info-flat: color-mix(in srgb, var(--colors-common-dark-mode-cyan-400) 15%, transparent); --color-info-soft: var(--colors-common-dark-mode-cyan-200); --color-info-strong: var(--colors-common-dark-mode-cyan-700); --color-info-solid: var(--colors-common-dark-mode-cyan-500); --color-info-on: var(--colors-common-white); --color-sidebar-bg: #0d273e; --color-sidebar-fg: #e5e5e6; } /* ---------------------------------------------------------------------------- * 5. Reset + base * -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.5; color: var(--color-foreground); background: var(--color-background); -webkit-font-smoothing: antialiased; min-height: 100vh; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--color-primary-soft); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* ---------------------------------------------------------------------------- * 6. Typography helpers * -------------------------------------------------------------------------- */ .weg-title { font-weight: var(--font-bold); line-height: 1.2; letter-spacing: -0.01em; } .weg-title-1 { font-size: var(--text-4xl); } .weg-title-2 { font-size: var(--text-3xl); } .weg-title-3 { font-size: var(--text-2xl); } .weg-title-4 { font-size: var(--text-xl); } .weg-text { font-size: var(--text-md); } .weg-text-sm { font-size: var(--text-sm); } .weg-text-xs { font-size: var(--text-xs); } .weg-muted { color: var(--color-neutral-muted); } .weg-link { color: var(--color-primary); font-weight: var(--font-medium); } .weg-link:hover { color: var(--color-primary-strong); text-decoration: underline; } .weg-kbd { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.1em 0.4em; } /* ---------------------------------------------------------------------------- * 6b. Brand / Logo — assets/weg-blue.svg (fundos claros) e weg-white.svg * (topbar azul / sidebar escura). Proporção ~1.35:1. * -------------------------------------------------------------------------- */ .weg-logo { display: block; height: 1.75rem; width: auto; } .weg-logo.is-sm { height: 1.25rem; } .weg-logo.is-lg { height: 2.25rem; } /* Troca automática de logo conforme o fundo: coloque os dois juntos com a classe .weg-logo e o modificador correspondente; só o certo aparece. */ .weg-logo--white { display: none; } .weg-topbar .weg-logo--blue, .weg-sidebar .weg-logo--blue { display: none; } .weg-topbar .weg-logo--white, .weg-sidebar .weg-logo--white { display: block; } .weg-topbar.is-outline .weg-logo--blue { display: block; } .weg-topbar.is-outline .weg-logo--white { display: none; } /* ---------------------------------------------------------------------------- * 7. Layout primitives * -------------------------------------------------------------------------- */ .weg-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--spacing-6); } .weg-stack { display: flex; flex-direction: column; gap: var(--spacing-4); } .weg-row { display: flex; align-items: center; gap: var(--spacing-3); } .weg-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); } .weg-wrap { flex-wrap: wrap; } .weg-grow { flex: 1 1 0; } .weg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-4); } /* Column spans (12-col grid, responsive-collapses below 768px) */ .weg-col-1 { grid-column: span 1; } .weg-col-2 { grid-column: span 2; } .weg-col-3 { grid-column: span 3; } .weg-col-4 { grid-column: span 4; } .weg-col-5 { grid-column: span 5; } .weg-col-6 { grid-column: span 6; } .weg-col-7 { grid-column: span 7; } .weg-col-8 { grid-column: span 8; } .weg-col-9 { grid-column: span 9; } .weg-col-10 { grid-column: span 10; } .weg-col-11 { grid-column: span 11; } .weg-col-12 { grid-column: span 12; } @media (max-width: 768px) { .weg-grid > [class*="weg-col-"] { grid-column: span 12; } } .weg-divider { border: none; border-top: 1px solid var(--color-border); margin: 0; } /* ---------------------------------------------------------------------------- * 8. Surface / Card / Panel * -------------------------------------------------------------------------- */ .weg-card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .weg-card-body { padding: var(--spacing-6); } .weg-card-header { padding: var(--spacing-4) var(--spacing-6); border-bottom: 1px solid var(--color-border); font-weight: var(--font-semibold); } .weg-card-footer { padding: var(--spacing-4) var(--spacing-6); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-3); } .weg-surface { background: var(--color-surface); border-radius: var(--radius-lg); } /* ---------------------------------------------------------------------------- * 9. Buttons — .weg-btn + color + variant + size * Defaults: color=primary, variant=solid, size=md, radius=medium(lg) * -------------------------------------------------------------------------- */ .weg-btn { --btn-color: var(--color-primary-solid); --btn-strong: var(--color-primary-strong); --btn-soft: var(--color-primary-flat); --btn-on: var(--color-primary-on); --btn-text: var(--color-primary); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1); min-height: 2.5rem; /* md */ padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-md); font-weight: var(--font-semibold); line-height: 1; border: 1px solid transparent; border-radius: var(--radius-lg); cursor: pointer; white-space: nowrap; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); user-select: none; } .weg-btn:hover { text-decoration: none; } .weg-btn:disabled, .weg-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; pointer-events: none; } .weg-btn svg { width: 1.2em; height: 1.2em; } /* Colors — remap the four --btn-* channels */ .weg-btn.is-secondary { --btn-color: var(--color-secondary-solid); --btn-strong: var(--color-secondary-strong); --btn-soft: var(--color-secondary-flat); --btn-on: var(--color-secondary-on); --btn-text: var(--color-secondary); } .weg-btn.is-tertiary { --btn-color: var(--color-tertiary-solid); --btn-strong: var(--color-tertiary-strong); --btn-soft: var(--color-tertiary-flat); --btn-on: var(--color-tertiary-on); --btn-text: var(--color-tertiary); } .weg-btn.is-neutral { --btn-color: var(--color-neutral-solid); --btn-strong: var(--color-neutral-strong); --btn-soft: var(--color-neutral-flat); --btn-on: var(--color-neutral-on); --btn-text: var(--color-neutral); } .weg-btn.is-positive { --btn-color: var(--color-positive-solid); --btn-strong: var(--color-positive-strong); --btn-soft: var(--color-positive-flat); --btn-on: var(--color-positive-on); --btn-text: var(--color-positive); } .weg-btn.is-negative { --btn-color: var(--color-negative-solid); --btn-strong: var(--color-negative-strong); --btn-soft: var(--color-negative-flat); --btn-on: var(--color-negative-on); --btn-text: var(--color-negative); } .weg-btn.is-warning { --btn-color: var(--color-warning-solid); --btn-strong: var(--color-warning-strong); --btn-soft: var(--color-warning-flat); --btn-on: var(--color-warning-on); --btn-text: var(--color-warning); } .weg-btn.is-info { --btn-color: var(--color-info-solid); --btn-strong: var(--color-info-strong); --btn-soft: var(--color-info-flat); --btn-on: var(--color-info-on); --btn-text: var(--color-info); } /* Variant: solid (default) */ .weg-btn { background: var(--btn-color); color: var(--btn-on); } .weg-btn:hover { background: var(--btn-strong); } /* Variant: outline */ .weg-btn.is-outline { background: transparent; color: var(--btn-text); border-color: var(--btn-color); } .weg-btn.is-outline:hover { background: var(--btn-color); color: var(--btn-on); } /* Variant: ghost */ .weg-btn.is-ghost { background: transparent; color: var(--btn-text); border-color: transparent; } .weg-btn.is-ghost:hover { background: var(--btn-soft); } /* Variant: basic (neutral bordered) */ .weg-btn.is-basic { background: transparent; color: var(--color-neutral); border-color: var(--color-border); } .weg-btn.is-basic:hover { background: var(--color-neutral-flat); } /* Variant: link */ .weg-btn.is-link { background: transparent; color: var(--btn-text); border-color: transparent; min-height: auto; padding: 0; } .weg-btn.is-link:hover { text-decoration: underline; background: transparent; } /* Sizes */ .weg-btn.is-xs { min-height: 2rem; font-size: var(--text-xs); padding-inline: var(--spacing-3); } .weg-btn.is-sm { min-height: 2.25rem; font-size: var(--text-sm); } .weg-btn.is-lg { min-height: 2.75rem; font-size: var(--text-lg); } .weg-btn.is-xl { min-height: 3rem; font-size: var(--text-2xl); } /* Radius overrides */ .weg-btn.is-radius-sm { border-radius: var(--radius); } .weg-btn.is-radius-none { border-radius: 0; } .weg-btn.is-radius-full { border-radius: var(--radius-full); } /* Icon-only */ .weg-btn.is-icon { padding: var(--spacing-2); aspect-ratio: 1; } /* Button group (segmented) */ .weg-btn-group { display: inline-flex; } .weg-btn-group .weg-btn { border-radius: 0; margin-left: -1px; } .weg-btn-group .weg-btn:first-child { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); margin-left: 0; } .weg-btn-group .weg-btn:last-child { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } /* ---------------------------------------------------------------------------- * 10. Form controls * -------------------------------------------------------------------------- */ .weg-field { display: flex; flex-direction: column; gap: var(--spacing-1_5, 0.375rem); } .weg-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-neutral); } .weg-label .req { color: var(--color-negative); margin-left: 2px; } .weg-hint { font-size: var(--text-xs); color: var(--color-neutral-muted); } .weg-error { font-size: var(--text-xs); color: var(--color-negative); } .weg-input, .weg-select, .weg-textarea { width: 100%; min-height: 2.5rem; padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-md); color: var(--color-foreground); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .weg-textarea { min-height: 6rem; resize: vertical; line-height: 1.5; } .weg-input::placeholder, .weg-textarea::placeholder { color: var(--color-placeholder); } .weg-input:hover, .weg-select:hover, .weg-textarea:hover { border-color: var(--color-border-interactive); } .weg-input:focus, .weg-select:focus, .weg-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-flat); } .weg-input:disabled, .weg-select:disabled, .weg-textarea:disabled { background: var(--color-surface-2); color: var(--color-disabled); cursor: not-allowed; } .weg-input.is-invalid, .weg-select.is-invalid, .weg-textarea.is-invalid { border-color: var(--color-negative); } .weg-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-negative-flat); } .weg-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-3) center; padding-right: var(--spacing-8); } /* Input with leading/trailing adornment */ .weg-input-group { position: relative; display: flex; align-items: center; } .weg-input-group .weg-input { padding-left: var(--spacing-8); } .weg-input-group .adornment { position: absolute; left: var(--spacing-3); display: flex; color: var(--color-neutral-muted); pointer-events: none; } .weg-input-group .adornment svg { width: 1.1rem; height: 1.1rem; } /* Checkbox & radio */ .weg-check { display: inline-flex; align-items: center; gap: var(--spacing-2); cursor: pointer; font-size: var(--text-md); } .weg-check input[type="checkbox"], .weg-check input[type="radio"] { appearance: none; width: 1.15rem; height: 1.15rem; margin: 0; border: 1.5px solid var(--color-border-interactive); background: var(--color-background); cursor: pointer; display: grid; place-content: center; transition: background 0.15s, border-color 0.15s; } .weg-check input[type="checkbox"] { border-radius: var(--radius-md); } .weg-check input[type="radio"] { border-radius: var(--radius-full); } .weg-check input:checked { background: var(--color-primary-solid); border-color: var(--color-primary-solid); } .weg-check input[type="checkbox"]:checked::after { content: ""; width: 0.35rem; height: 0.6rem; border: solid var(--color-primary-on); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .weg-check input[type="radio"]:checked::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-primary-on); } .weg-check input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Switch */ .weg-switch { display: inline-flex; align-items: center; gap: var(--spacing-2); cursor: pointer; } .weg-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .weg-switch .track { width: 2.5rem; height: 1.4rem; border-radius: var(--radius-full); background: var(--color-neutral-flat); position: relative; transition: background 0.2s var(--ease); } .weg-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease); } .weg-switch input:checked + .track { background: var(--color-primary-solid); } .weg-switch input:checked + .track::after { transform: translateX(1.1rem); } .weg-switch input:focus-visible + .track { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ---------------------------------------------------------------------------- * 11. Tags / Badges — .weg-tag + color * WEG Tag é TONAL por padrão (fundo -flat + texto colorido, semibold, * radius pequeno ~4px). Espelha packages/data tag: p-1 px-2 rounded text-sm * font-semibold, bg--flat + text-. Não existe Tag sólida no DS. * -------------------------------------------------------------------------- */ .weg-tag { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.25; border-radius: var(--radius); background: var(--color-primary-flat); color: var(--color-primary); white-space: nowrap; } .weg-tag.is-secondary { background: var(--color-secondary-flat); color: var(--color-secondary); } .weg-tag.is-tertiary { background: var(--color-tertiary-flat); color: var(--color-tertiary); } .weg-tag.is-neutral { background: var(--color-neutral-flat); color: var(--color-neutral); } .weg-tag.is-positive { background: var(--color-positive-flat); color: var(--color-positive); } .weg-tag.is-negative { background: var(--color-negative-flat); color: var(--color-negative); } .weg-tag.is-warning { background: var(--color-warning-flat); color: var(--color-warning-strong); } .weg-tag.is-info { background: var(--color-info-flat); color: var(--color-info); } /* Optional filled variant (not part of the DS — use sparingly) */ .weg-tag.is-solid { background: var(--color-primary-solid); color: var(--color-primary-on); } .weg-tag.is-solid.is-secondary { background: var(--color-secondary-solid); color: var(--color-secondary-on); } .weg-tag.is-solid.is-tertiary { background: var(--color-tertiary-solid); color: var(--color-tertiary-on); } .weg-tag.is-solid.is-neutral { background: var(--color-neutral-solid); color: var(--color-neutral-on); } .weg-tag.is-solid.is-positive { background: var(--color-positive-solid); color: var(--color-positive-on); } .weg-tag.is-solid.is-negative { background: var(--color-negative-solid); color: var(--color-negative-on); } .weg-tag.is-solid.is-warning { background: var(--color-warning-solid); color: var(--color-warning-on); } .weg-tag.is-solid.is-info { background: var(--color-info-solid); color: var(--color-info-on); } /* ---------------------------------------------------------------------------- * 12. Messages / Alerts — .weg-message + color * -------------------------------------------------------------------------- */ /* Espelha packages/feedback Message: bg--flat, border-l-4 border-, texto e ícone em text--strong. Padrão = info. */ .weg-message { display: flex; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-lg); border-left: 4px solid var(--color-info); background: var(--color-info-flat); color: var(--color-info-strong); font-size: var(--text-sm); } .weg-message .icon { color: var(--color-info-strong); flex-shrink: 0; } .weg-message.is-positive { border-color: var(--color-positive); background: var(--color-positive-flat); color: var(--color-positive-strong); } .weg-message.is-positive .icon { color: var(--color-positive-strong); } .weg-message.is-negative { border-color: var(--color-negative); background: var(--color-negative-flat); color: var(--color-negative-strong); } .weg-message.is-negative .icon { color: var(--color-negative-strong); } .weg-message.is-warning { border-color: var(--color-warning); background: var(--color-warning-flat); color: var(--color-warning-strong); } .weg-message.is-warning .icon { color: var(--color-warning-strong); } /* Optional bold title line inside a message */ .weg-message .title { font-weight: var(--font-bold); } /* ---------------------------------------------------------------------------- * 13. Table * -------------------------------------------------------------------------- */ /* Espelha packages/data Simple Table: grade com bordas, cabeçalho cinza (bg-neutral-solid/15) com texto bold escuro em caixa normal, listra sutil nas linhas pares, legenda itálica. */ .weg-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--color-neutral); } .weg-table th { text-align: left; font-weight: var(--font-bold); color: var(--color-neutral); padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-neutral-solid) 15%, var(--color-background)); } .weg-table td { padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-border); } .weg-table tbody tr:hover { background: color-mix(in srgb, var(--color-neutral-solid) 8%, transparent); } .weg-table.is-striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-neutral-solid) 5%, transparent); } .weg-table caption { caption-side: bottom; margin-top: var(--spacing-2); font-style: italic; font-weight: var(--font-light, 300); color: var(--color-neutral); } /* Right-align numeric columns with .num */ .weg-table .num { text-align: right; } /* ---------------------------------------------------------------------------- * 14. Navigation — Topbar, Sidebar, Breadcrumb, Tabs * -------------------------------------------------------------------------- */ /* Topbar padrão do WEG = azul primário sólido, conteúdo branco (variante solid do componente real). Use .is-outline para a versão clara (bg-surface). */ .weg-topbar { display: flex; align-items: center; gap: var(--spacing-4); height: var(--topbar-height); padding-inline: var(--spacing-5); background: var(--color-primary-solid); color: var(--color-primary-on); position: sticky; top: 0; z-index: 40; } .weg-topbar .brand { font-weight: var(--font-bold); font-size: var(--text-lg); color: inherit; } .weg-topbar .spacer { flex: 1; } /* Conteúdo interativo fica branco sobre o azul */ .weg-topbar .weg-breadcrumb, .weg-topbar .weg-breadcrumb a, .weg-topbar .weg-breadcrumb .current { color: inherit; } .weg-topbar .weg-breadcrumb .sep { color: color-mix(in srgb, currentColor 60%, transparent); } .weg-topbar .weg-btn.is-ghost { color: var(--color-primary-on); } .weg-topbar .weg-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.15); } .weg-topbar .weg-input { background: rgba(255, 255, 255, 0.15); border-color: transparent; color: #fff; } .weg-topbar .weg-input::placeholder { color: rgba(255, 255, 255, 0.75); } .weg-topbar .weg-input-group .adornment { color: rgba(255, 255, 255, 0.85); } /* Light / outline topbar */ .weg-topbar.is-outline { background: var(--color-background); color: var(--color-foreground); border-bottom: 1px solid var(--color-border); } .weg-topbar.is-outline .brand { color: var(--color-primary); } .weg-topbar.is-outline .weg-breadcrumb { color: var(--color-neutral); } .weg-topbar.is-outline .weg-breadcrumb .current { color: var(--color-primary); } .weg-topbar.is-outline .weg-breadcrumb .sep { color: var(--color-neutral-muted); } .weg-topbar.is-outline .weg-btn.is-ghost { color: var(--color-neutral); } .weg-topbar.is-outline .weg-btn.is-ghost:hover { background: var(--color-neutral-flat); } .weg-topbar.is-outline .weg-input { background: var(--color-background); border-color: var(--color-border); color: var(--color-foreground); } .weg-topbar.is-outline .weg-input::placeholder { color: var(--color-placeholder); } .weg-topbar.is-outline .weg-input-group .adornment { color: var(--color-neutral-muted); } .weg-sidebar { width: var(--sidebar-width); background: var(--color-sidebar-bg); color: var(--color-sidebar-fg); padding: var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-1); height: 100%; } .weg-sidebar .nav-item { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-lg); color: var(--color-sidebar-fg); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: background 0.15s; } .weg-sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; } .weg-sidebar .nav-item.is-active { background: var(--color-primary-solid); color: #fff; } .weg-sidebar .nav-item svg { width: 1.15rem; height: 1.15rem; } .weg-sidebar .nav-group-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); padding: var(--spacing-3) var(--spacing-3) var(--spacing-1); } .weg-breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-sm); color: var(--color-neutral); } .weg-breadcrumb a { color: var(--color-neutral); } .weg-breadcrumb a:hover { color: var(--color-foreground); } .weg-breadcrumb .sep { color: var(--color-neutral-muted); } .weg-breadcrumb .current { color: var(--color-primary); font-weight: var(--font-bold); } .weg-tabs { display: flex; gap: var(--spacing-1); border-bottom: 1px solid var(--color-border); } .weg-tab { padding: var(--spacing-3) var(--spacing-4); cursor: pointer; font-weight: var(--font-medium); color: var(--color-neutral); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; } .weg-tab:hover { color: var(--color-neutral-muted); } .weg-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* App shell helper: sidebar + content. Padrão WEG: a Topbar (azul) fica em CIMA, largura total; a Sidebar (escura) entra ABAIXO da topbar. Basta colocar
imediatamente antes de
— a sidebar desce sozinha. Sem topbar, a sidebar ocupa 100vh. */ .weg-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } .weg-shell > .weg-sidebar { height: 100vh; position: sticky; top: 0; } .weg-shell > main { min-width: 0; } .weg-topbar + .weg-shell { min-height: calc(100vh - var(--topbar-height)); } .weg-topbar + .weg-shell > .weg-sidebar { height: calc(100vh - var(--topbar-height)); top: var(--topbar-height); } @media (max-width: 768px) { .weg-shell { grid-template-columns: 1fr; } .weg-shell > .weg-sidebar { display: none; } } /* ---------------------------------------------------------------------------- * 15. Overlay — Modal / Dialog, Tooltip * -------------------------------------------------------------------------- */ .weg-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--color-surface-overlay); display: grid; place-items: center; padding: var(--spacing-4); } .weg-modal { background: var(--color-background); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 32rem; max-height: 90vh; overflow: auto; } .weg-modal-header { padding: var(--spacing-5) var(--spacing-6); border-bottom: 1px solid var(--color-border); font-size: var(--text-lg); font-weight: var(--font-semibold); } .weg-modal-body { padding: var(--spacing-6); } .weg-modal-footer { padding: var(--spacing-4) var(--spacing-6); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-3); } [hidden] { display: none !important; } .weg-tooltip { position: relative; display: inline-flex; } .weg-tooltip [data-tip] { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-neutral-strong); color: var(--color-background); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius); font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 60; } .weg-tooltip:hover [data-tip] { opacity: 1; } /* ---------------------------------------------------------------------------- * 16. Feedback — progress, spinner, skeleton, avatar * -------------------------------------------------------------------------- */ .weg-progress { height: 0.5rem; background: var(--color-surface-3); border-radius: var(--radius-full); overflow: hidden; } .weg-progress > .bar { height: 100%; background: var(--color-primary-solid); border-radius: inherit; transition: width 0.3s var(--ease); } .weg-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--color-primary-flat); border-top-color: var(--color-primary); animation: weg-spin 0.7s linear infinite; } @keyframes weg-spin { to { transform: rotate(360deg); } } .weg-skeleton { background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 37%, var(--color-surface-2) 63%); background-size: 400% 100%; border-radius: var(--radius); animation: weg-shimmer 1.4s ease infinite; } @keyframes weg-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .weg-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--font-semibold); font-size: var(--text-sm); overflow: hidden; } .weg-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------------------- * 17. Auto dark mode via prefers-color-scheme when has data-theme="auto" * -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --tw-shadow-color: rgb(2 4 13 / 60%); --color-background: #191b1f; --color-foreground: #fcfcfd; --color-placeholder: #a0a0ab; --color-border: var(--colors-common-gray-800); --color-border-interactive: var(--colors-common-gray-600); --color-surface: #202327; --color-surface-2: #272a30; --color-surface-3: #30343b; --color-neutral: var(--colors-common-gray-200); --color-neutral-muted: var(--colors-common-gray-400); --color-neutral-soft: var(--colors-common-gray-50); --color-neutral-strong: var(--colors-common-gray-800); --color-neutral-on: var(--colors-common-gray-800); --color-primary: var(--colors-common-dark-mode-blue-500); --color-positive: var(--colors-common-green-300); --color-negative: var(--colors-common-red-400); --color-warning: var(--colors-common-dark-mode-yellow-400); --color-info: var(--colors-common-dark-mode-cyan-400); } }