Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| 1 | /* Tailwind with Coline's design tokens: bg-card, text-muted-foreground, |
| 2 | border-border, rounded-xl and dark: all match the components. The token |
| 3 | values and the components' own styles come from @colineapp/ui/styles.css, |
| 4 | imported in main.tsx. Use complete class names. */ |
| 5 | @import "tailwindcss"; |
| 6 | @import "@colineapp/ui/theme.css" |
| 7 |
| 8 | /* Workaround, until @colineapp/ui ships the fix: in ui 2.1.3, Switch, Slider |
| 9 | and Separator are styled with data-checked / data-unchecked / |
| 10 | data-horizontal variants, but their Radix primitives set data-state and |
| 11 | data-orientation, so the switch track, the slider track and range, and |
| 12 | separators render invisible. These rules give them the styles their |
| 13 | classes intend, keyed on the attributes Radix does set. */ |
| 14 | [data-slot="switch"][data-state="checked"] { |
| 15 | background-color: var(--primary); |
| 16 | } |
| 17 | [data-slot="switch"][data-state="unchecked"] { |
| 18 | background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); |
| 19 | } |
| 20 | [data-slot="switch-thumb"][data-state="checked"] { |
| 21 | translate: calc(100% - 2px) 0; |
| 22 | } |
| 23 | .dark [data-slot="switch-thumb"][data-state="checked"] { |
| 24 | background-color: var(--primary-foreground); |
| 25 | } |
| 26 | .dark [data-slot="switch-thumb"][data-state="unchecked"] { |
| 27 | background-color: var(--foreground); |
| 28 | } |
| 29 | [data-slot="slider-track"][data-orientation="horizontal"] { |
| 30 | height: calc(var(--spacing) * 3); |
| 31 | width: 100%; |
| 32 | } |
| 33 | [data-slot="slider-range"][data-orientation="horizontal"] { |
| 34 | height: 100%; |
| 35 | } |
| 36 | [data-slot="separator"][data-orientation="horizontal"] { |
| 37 | height: 1px; |
| 38 | width: 100%; |
| 39 | } |
| 40 |