src/ApplicationBundle/Resources/views/framework/_cp_tokens.html.twig line 1

Open in your IDE?
  1. {#
  2.   framework/_cp_tokens.html.twig
  3.   ══════════════════════════════════════════════════════════════════════════════
  4.   SINGLE SOURCE of cp-shell design tokens + shared component primitives.
  5.   Change the whole system's look HERE — every cp-shell module inherits it.
  7.   Per-module ACCENT: a module layout sets `--cp-accent` (+ hover/dim) on its
  8.   `.cp-shell` wrapper via inline style; every primitive below reads var(--cp-accent),
  9.   so one variable re-accents an entire module without touching this file.
  11.   Namespacing: component classes live under `.cp-scope` so they never leak into
  12.   legacy pages. `--cp-primary*` are kept as aliases of `--cp-accent*` for back-compat.
  13.   ══════════════════════════════════════════════════════════════════════════════
  14. #}
  15. <link rel="preconnect" href="https://fonts.googleapis.com">
  16. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  17. <style>
  18. :root{
  19.   /* ── ACCENT (default; a module overrides --cp-accent on its .cp-shell) ── */
  20.   --cp-accent:#1f5673; --cp-accent-hover:#16465f; --cp-on-accent:#fff; --cp-accent-dim:rgba(31,86,115,.10);
  21.   /* back-compat aliases */
  22.   --cp-primary:var(--cp-accent); --cp-primary-hover:var(--cp-accent-hover); --cp-on-primary:var(--cp-on-accent);
  23.   /* ── neutrals / surfaces ── */
  24.   --cp-surface:#f7f9fb; --cp-surface-low:#eef3f6; --cp-surface-container:#e7eef2; --cp-surface-white:#fff;
  25.   --cp-text:#15242c; --cp-text-muted:#3f5560; --cp-text-faint:#76899a;
  26.   --cp-outline:#e2e9ee; --cp-outline-variant:#e2e9ee;
  27.   /* ── semantic ── */
  28.   --cp-success:#2e7d32; --cp-error:#ba1a1a; --cp-warn:#ef6c00; --cp-info:#2c6e9b;
  29.   --cp-success-dim:rgba(46,125,50,.10); --cp-error-dim:rgba(186,26,26,.10); --cp-warn-dim:rgba(239,108,0,.12);
  30.   /* ── shape / depth ── */
  31.   --cp-radius:8px; --cp-radius-lg:13px; --cp-radius-pill:99px;
  32.   --cp-shadow-card:0 1px 6px rgba(21,36,44,.06),0 0 0 1px rgba(31,86,115,.05);
  33.   --cp-shadow-pop:0 8px 28px rgba(21,36,44,.16);
  34.   /* ── type ── */
  35.   --cp-font-head:'Montserrat','DM Sans',system-ui,sans-serif;
  36.   --cp-font-body:'DM Sans',system-ui,sans-serif;
  37.   --cp-font-mono:'JetBrains Mono','Courier New',monospace;
  38. }
  40. /* ── scope base ── */
  41. .cp-scope{ font-family:var(--cp-font-body); color:var(--cp-text); }
  42. .cp-scope h1,.cp-scope h2,.cp-scope h3,.cp-scope h4{ font-family:var(--cp-font-head); color:var(--cp-text); letter-spacing:-.01em; }
  43. /* Accent colour is for LINKS. The :not() list has to exclude anchors that are really
  44.    buttons, or they get the module accent painted on top of their own background.
  45.    It already skipped the cp-native button classes but not the legacy ones, so
  46.    <a class="btn erp-btn erp-btn-primary">Save Proposal</a> on the proposal page
  47.    rendered #2b5fb8 text on its #854f00 background — a contrast ratio of 1.1:1
  48.    against the 4.5:1 AA floor, i.e. an all but invisible primary action. */
  49. .cp-scope a:not(.cp-btn):not(.cp-nav-link):not(.btn):not(.erp-btn){ color:var(--cp-accent); }
  50. /* buttons keep their own text colour regardless of the link rule above */
  51. .cp-scope a.cp-btn-primary,.cp-scope a.cp-btn-success,.cp-scope a.cp-btn-danger{ color:var(--cp-on-accent); }
  52. .cp-scope a.cp-btn-ghost{ color:var(--cp-text-muted); }
  54. /* ── Phase 4: converge button SHAPE, never button COLOUR ──────────────────────
  55.    Measured across 14 rendered pages, `.btn.btn-primary` came back in 5 colours
  56.    and 2 radii. The colours are DELIBERATE — amber #854f00, indigo #4f46e5 etc.
  57.    are module accents from the token system, and flattening them would delete a
  58.    feature. The radii are not: the legacy `style.css` carries
  59.    `.btn:not(.btn-link):not(.btn-circle){ border-radius:2px }` at (0,3,0), so a
  60.    page that does not load a newer button skin falls through to 2px while its
  61.    neighbours render 8px. Same class, same product, different shape.
  63.    This wins on specificity (0,4,0) and only inside a cp scope, so legacy pages
  64.    are untouched. It sets radius alone — colour, padding and font stay with
  65.    whatever owns them. */
  66. .cp-scope .btn:not(.btn-link):not(.btn-circle),
  67. .cp-content .btn:not(.btn-link):not(.btn-circle){ border-radius:var(--cp-radius); }
  69. /* ── card ── */
  70. .cp-card{ background:var(--cp-surface-white); border:1px solid var(--cp-outline); border-radius:var(--cp-radius-lg); box-shadow:var(--cp-shadow-card); padding:18px 20px; margin-bottom:16px; }
  71. .cp-card-t{ font-family:var(--cp-font-head); font-size:var(--cp-fs-base, 13px); font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
  72. .cp-card-t .mi{ font-size:var(--cp-fs-lg, 16px); color:var(--cp-accent); }
  73. .cp-card-sub{ font-size:12px; color:var(--cp-text-faint); font-weight:400; margin-left:auto; }
  75. /* ── metric strip ── */
  76. .cp-metrics{ display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:13px; margin-bottom:18px; }
  77. .cp-metric{ background:var(--cp-surface-white); border:1px solid var(--cp-outline); border-radius:var(--cp-radius-lg); box-shadow:var(--cp-shadow-card); padding:15px 17px; min-width:0; }
  78. /* A metric card may render as <a> when its figure is traceable to a list/report.
  79.    An anchor is inline and inherits link colour, which would collapse the card and
  80.    tint the number, so undo both. Shared here so every dashboard gets it for free. */
  81. a.cp-metric{ display:block; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
  82. a.cp-metric:hover, a.cp-metric:focus{ color:inherit; text-decoration:none; border-color:var(--cp-accent, var(--cp-primary)); box-shadow:var(--cp-shadow-card-hover, var(--cp-shadow-card)); transform:translateY(-2px); }
  83. /* Where a metric has no list route to open, it jumps to the card on this page that
  84.    breaks it down. Flash that card so the landing is not silent. scroll-margin keeps
  85.    it clear of the sticky topbar. */
  86. .cp-card[id]{ scroll-margin-top:78px; }
  87. .cp-card:target{ border-color:var(--cp-accent, var(--cp-primary)); box-shadow:0 0 0 3px var(--cp-accent-dim, rgba(31,86,115,.14)); }
  88. .cp-metric .mi{ font-size:18px; color:var(--cp-accent); }
  89. .cp-metric-val{ font-family:var(--cp-font-head); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:6px; line-height:1.15; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
  90. .cp-metric-lbl{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); margin-top:2px; }
  92. /* ── table ── */
  93. .cp-table{ width:100%; border-collapse:collapse; font-size:var(--cp-fs-sm, 12.5px); }
  94. .cp-table th{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); text-align:left; padding:9px 11px; border-bottom:1px solid var(--cp-outline); background:var(--cp-surface-low); white-space:nowrap; }
  95. .cp-table td{ padding:10px 11px; border-bottom:1px solid var(--cp-surface-container); color:var(--cp-text-muted); vertical-align:middle; }
  96. .cp-table tbody tr:hover td{ background:var(--cp-accent-dim); }
  97. .cp-table td.num,.cp-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
  98. .cp-table td.strong{ color:var(--cp-text); font-weight:600; }
  100. /* ── definition grid (document detail) ── */
  101. .cp-dl{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px 22px; }
  102. .cp-dl .cp-dl-i{ margin-bottom:10px; }
  103. .cp-dl dt{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); margin-bottom:2px; }
  104. .cp-dl dd{ font-size:var(--cp-fs-base, 13px); color:var(--cp-text); margin:0; font-weight:500; }
  106. /* ── buttons ── */
  107. .cp-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:var(--cp-radius); font-family:var(--cp-font-body); font-size:var(--cp-fs-sm, 12.5px); font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .12s,border-color .12s; line-height:1.2; }
  108. .cp-btn .mi{ font-size:var(--cp-fs-md, 15px); }
  109. .cp-btn-primary{ background:var(--cp-accent); color:var(--cp-on-accent); }
  110. .cp-btn-primary:hover{ background:var(--cp-accent-hover); color:var(--cp-on-accent); text-decoration:none; }
  111. .cp-btn-ghost{ background:var(--cp-surface-white); color:var(--cp-text-muted); border-color:var(--cp-outline); }
  112. .cp-btn-ghost:hover{ background:var(--cp-surface-low); color:var(--cp-text); text-decoration:none; }
  113. .cp-btn-success{ background:var(--cp-success); color:var(--cp-on-accent, #fff); }
  114. .cp-btn-danger{ background:var(--cp-error); color:var(--cp-on-accent, #fff); }
  115. .cp-btn-sm{ padding:5px 10px; font-size:12px; }
  117. /* ── pill / status ── */
  118. .cp-pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--cp-font-mono); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:var(--cp-radius-pill); }
  119. .cp-pill-accent{ background:var(--cp-accent-dim); color:var(--cp-accent); }
  120. .cp-pill-success{ background:var(--cp-success-dim); color:var(--cp-success); }
  121. .cp-pill-warn{ background:var(--cp-warn-dim); color:var(--cp-warn); }
  122. .cp-pill-danger{ background:var(--cp-error-dim); color:var(--cp-error); }
  123. .cp-pill-muted{ background:var(--cp-surface-container); color:var(--cp-text-muted); }
  125. /* ── filter bar / fields ── */
  126. .cp-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
  127. .cp-field{ display:flex; flex-direction:column; gap:4px; }
  128. .cp-field label{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); }
  129. .cp-field input,.cp-field select{ padding:7px 10px; border:1px solid var(--cp-outline); border-radius:var(--cp-radius); font-size:var(--cp-fs-sm, 12.5px); background:var(--cp-surface-white); color:var(--cp-text); font-family:var(--cp-font-body); min-width:150px; }
  131. /* ── empty / note ── */
  132. .cp-empty{ padding:34px 20px; text-align:center; color:var(--cp-text-faint); font-size:var(--cp-fs-base, 13px); }
  133. .cp-empty .mi{ font-size:34px; opacity:.5; display:block; margin-bottom:8px; }
  134. .cp-empty-act{ margin-top:10px; }
  136. /* Loading + error. A list had no shared way to say "working" or "this failed", so pages
  137.    either showed nothing or invented their own — one more vocabulary each time. Same
  138.    footprint as .cp-empty so a list can swap between the three states without reflowing. */
  139. .cp-loading{ padding:34px 20px; text-align:center; color:var(--cp-text-faint); font-size:var(--cp-fs-base, 13px); }
  140. .cp-loading::before{ content:''; display:inline-block; width:18px; height:18px; margin-bottom:8px;
  141.   border:2px solid var(--cp-outline); border-top-color:var(--cp-accent); border-radius:50%;
  142.   animation:cp-spin .7s linear infinite; }
  143. @keyframes cp-spin{ to{ transform:rotate(360deg); } }
  144. @media (prefers-reduced-motion: reduce){ .cp-loading::before{ animation:none; } }
  145. .cp-error{ padding:14px 16px; border-radius:var(--cp-radius); font-size:var(--cp-fs-base, 13px); line-height:1.5;
  146.   background:var(--cp-error-dim); color:var(--cp-error); border:1px solid var(--cp-error); }
  147. .cp-error .mi{ vertical-align:-4px; margin-right:6px; }
  149. /* Form controls. 138 form-control uses on the proposal page alone had no cp equivalent, so
  150.    every form reached for Bootstrap 3 defaults. 32px min-height is the density floor from the
  151.    contract — the audit found controls rendering at 30px and smaller. */
  152. .cp-field{ margin-bottom:12px; }
  153. .cp-label{ display:block; font-size:12px; font-weight:600; color:var(--cp-text-muted); margin-bottom:4px; }
  154. .cp-label .req{ color:var(--cp-error); margin-left:2px; }
  155. .cp-input,.cp-select,.cp-textarea{ width:100%; min-height:32px; padding:6px 10px; font-family:inherit;
  156.   font-size:var(--cp-fs-base, 13px); color:var(--cp-text); background:var(--cp-surface-white);
  157.   border:1px solid var(--cp-outline); border-radius:var(--cp-radius); }
  158. .cp-input:focus,.cp-select:focus,.cp-textarea:focus{ outline:none; border-color:var(--cp-accent);
  159.   box-shadow:0 0 0 3px var(--cp-accent-dim); }
  160. .cp-input[disabled],.cp-select[disabled]{ background:var(--cp-surface-low); color:var(--cp-text-faint); }
  161. .cp-textarea{ min-height:74px; resize:vertical; }
  162. .cp-hint{ font-size:var(--cp-fs-xs, 11.5px); color:var(--cp-text-faint); margin-top:3px; }
  163. .cp-field.is-invalid .cp-input,.cp-field.is-invalid .cp-select{ border-color:var(--cp-error); }
  164. .cp-field.is-invalid .cp-hint{ color:var(--cp-error); }
  165. .cp-note{ font-size:12px; color:var(--cp-text-faint); line-height:1.5; }
  166. </style>