Files
sure/app/assets/tailwind/sure-design-system/base.css
Guillem Arias f7adcac2eb fix(DS::Pill): readable contrast in light mode + drop pill from Goal detail
- Bind CSS `color-scheme` to Sure's `data-theme` attribute so the pill's
  `light-dark()` resolves to the side that matches the active theme. In
  the dark theme it was previously falling back to the light branch.
- Darken light-mode pill text 30% with black on top of the 700 stop so
  the 10–11px uppercase label reads against the violet-50 background.
- Drop the Beta pill from the Goal detail page header. A single goal is
  not the feature; the pill belongs on the feature index, not on each
  record.
2026-05-18 20:27:35 +02:00

45 lines
1015 B
CSS

@layer base {
/* Bind CSS color-scheme to Sure's data-theme attribute so the CSS
`light-dark()` function resolves to the side that matches the active
theme (used by DS::Pill and any future tokens that opt in). */
:root {
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
button {
@apply cursor-pointer focus-visible:outline-gray-900;
}
hr {
@apply text-gray-200;
}
/* We control the sizing through DialogComponent, so reset this value */
dialog:modal {
max-width: 100dvw;
max-height: 100dvh;
}
details>summary::-webkit-details-marker {
@apply hidden;
}
details>summary {
@apply list-none;
}
input[type='radio'] {
@apply border-gray-300 text-indigo-600 focus:ring-indigo-600;
/* Default light mode */
@variant theme-dark {
/* Dark mode radio button base and checked styles */
@apply border-gray-600 bg-gray-700 checked:bg-blue-500 focus:ring-blue-500 focus:ring-offset-gray-800;
}
}
}