From 821c7c87129df1b81dd9ef8b0a6945b26386e742 Mon Sep 17 00:00:00 2001 From: tristen Date: Thu, 15 Oct 2026 15:28:29 -0400 Subject: [PATCH 1/2] [STUDIO-4142] Change the visual appearance of toggle groups --- CHANGELOG.md | 2 + docs/documentation/forms.md | 18 +++- src/preset/base.css | 4 +- src/preset/colors.js | 19 +++- src/preset/utilities.js | 38 +++++-- test/__snapshots__/build-css.jest.js.snap | 124 +++++++++++++--------- 6 files changed, 141 insertions(+), 64 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f347ba1a..3845fd7b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ - [breaking] Rebuild Assembly's CSS pipeline on [UnoCSS](https://unocss.dev/). Class names and `buildUserAssets` stay compatible; the generated stylesheet's formatting, comments, and source maps may differ. Node.js 24+ is required. - [add] Export `presetAssembly()` for on-demand UnoCSS builds that keep Assembly class names. Pass `{ safelist: true }` only when you want the full prebuilt utility set. - [add] `examples/jit` — a sample app that generates only the utilities used in its markup (no reset or component preflight). +- [style change] Toggle groups are restyled as segmented controls. `toggle` is now 24px tall. +- [add] `toggle--l` (36px). - [internal] Assembly utilities are UnoCSS rules in `src/preset/`. Reset and component CSS live in `src/preset/base.css`. The package build is `src/build-*.js`. The documentation site is VitePress under `docs/`. ## 1.16.0 diff --git a/docs/documentation/forms.md b/docs/documentation/forms.md index 49f802a7..4b6c5797 100644 --- a/docs/documentation/forms.md +++ b/docs/documentation/forms.md @@ -393,10 +393,9 @@ The toggle group component styles a set of `` elements. The m .toggle ``` -Style a toggle group. +Style a toggle group. Toggles within a group share an equal width, set by the widest toggle. Change the inactive toggle text color and the active toggle background color with a `toggle--{color}` modifier (`*-dark` colors are not available). Change the active label color with a `toggle--active-{color}` modifier (`*-dark` colors are not available). -Change the border radiuses of toggle groups inside small text with `toggle-group--s` on the `toggle-container` element. ```example
@@ -413,12 +412,13 @@ Change the border radiuses of toggle groups inside small text with `toggle-group ```selectors .toggle--s +.toggle--l ``` -Make a toggle small. +Change the toggle height. `toggle--s` is 18px tall, the default `toggle` is 24px to match `input--s`, and `toggle--l` is 36px to match `input`. ```example -
+
+
+ + +
``` ```selectors diff --git a/src/preset/base.css b/src/preset/base.css index a8149fa7..83faa560 100644 --- a/src/preset/base.css +++ b/src/preset/base.css @@ -800,17 +800,15 @@ input:checked + .switch { background-color: var(--gray); } input:checked + .toggle { - background: var(--gray); + background: var(--gray-deep); color: var(--white); } input:disabled + .toggle { pointer-events: none; color: var(--darken25); - border-color: var(--transparent); } input:checked:disabled + .toggle { background-color: var(--disabled25); - color: var(--darken25); } body, input, diff --git a/src/preset/colors.js b/src/preset/colors.js index a505500b..5d43d43c 100644 --- a/src/preset/colors.js +++ b/src/preset/colors.js @@ -110,12 +110,29 @@ function colorRules(config) { [s => s, { color: `var(--${color})` }], [s => `input:checked + ${s}`, { background: `var(--${color})` }] ]); + if (color === 'white' || color.startsWith('lighten')) { + append(`toggle--${color}`, [ + [ + s => `.toggle-group:has(${s})`, + { 'background-color': 'var(--lighten10)' } + ], + [s => `input:checked + ${s}`, { color: 'var(--gray-dark)' }], + [s => `input:disabled + .toggle${s}`, { color: 'var(--lighten25)' }] + ]); + } else if (isSemitransparent(color)) { + append(`toggle--${color}`, [ + [ + s => `.toggle-group:has(${s})`, + { 'background-color': 'var(--darken5)' } + ] + ]); + } }); colorsFor(resolved, 'toggleActive').forEach(color => { if (isNotAccessibleForForms(color)) return; append(`toggle--active-${color}`, [ - [s => `input:checked + ${s}`, { color: `var(--${color})` }] + [s => `input:checked + .toggle${s}`, { color: `var(--${color})` }] ]); }); diff --git a/src/preset/utilities.js b/src/preset/utilities.js index 8368a0e3..f9b6da36 100644 --- a/src/preset/utilities.js +++ b/src/preset/utilities.js @@ -149,18 +149,30 @@ const UTILITY_RULES = [ ['switch--l', { width: '40px', height: '24px', top: '0' }], [ 'toggle-group', - { display: 'inline-flex', 'text-align': 'center', 'border-radius': '18px' } + { + display: 'inline-grid', + 'grid-auto-flow': 'column', + 'grid-auto-columns': '1fr', + 'background-color': 'var(--gray-faint)', + 'border-radius': 'var(--border-radius)' + } ], - ['toggle-container', { 'max-width': '100%' }], + ['toggle-container', { display: 'flex', 'max-width': '100%' }], [ 'toggle', { - 'flex-shrink': '0', + display: 'flex', + 'align-items': 'center', + 'justify-content': 'center', + flex: '1', + height: '24px', + padding: '0 18px', cursor: 'pointer', - color: 'var(--gray)', + color: 'var(--gray-deep)', 'font-size': 'var(--font-size-s)', - padding: '3px 18px', - 'border-radius': '15px', + 'line-height': 'var(--line-height-s)', + 'white-space': 'nowrap', + 'border-radius': 'var(--border-radius)', 'background-color': 'var(--transparent)', transition: 'color var(--transition),\n background-color var(--transition)' @@ -169,9 +181,19 @@ const UTILITY_RULES = [ [ 'toggle--s', { + height: '18px', + padding: '0 12px', 'font-size': 'var(--font-size-xs)', - 'line-height': 'var(--line-height-s)', - padding: '0 12px' + 'line-height': 'var(--line-height-xs)' + } + ], + [ + 'toggle--l', + { + height: '36px', + padding: '0 24px', + 'font-size': 'var(--font-size-m)', + 'line-height': 'var(--line-height-m)' } ], ['txt-mono', { 'font-family': 'var(--font-stack-mono)', 'font-size': '90%' }], diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap index ad4808d1..bcdbbe2d 100644 --- a/test/__snapshots__/build-css.jest.js.snap +++ b/test/__snapshots__/build-css.jest.js.snap @@ -792,17 +792,15 @@ input:checked + .switch{ background-color:#757D82; } input:checked + .toggle{ - background:#757D82; + background:#4D5255; color:#fff; } input:disabled + .toggle{ pointer-events:none; color:rgba(26, 34, 36, 0.25); - border-color:transparent; } input:checked:disabled + .toggle{ background-color:rgba(158, 163, 167, 0.25); - color:rgba(26, 34, 36, 0.25); } body, input, @@ -1179,10 +1177,11 @@ textarea{ .radio{border-radius:50%;color:#757D82;border-color:currentColor;} .switch{cursor:pointer;top:3px;flex-shrink:0;position:relative;width:30px;height:18px;border-radius:9999px;border-width:1px;border-style:solid;border-color:currentColor;color:#757D82;transition:color 0.125s, background-color 0.125s, border-color 0.125s;} .switch--l{width:40px;height:24px;top:0;} -.toggle-group{display:inline-flex;text-align:center;border-radius:18px;} -.toggle-container{max-width:100%;} -.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;} -.toggle--s{font-size:10px;line-height:18px;padding:0 12px;} +.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;} +.toggle-container{display:flex;max-width:100%;} +.toggle{display:flex;align-items:center;justify-content:center;flex:1;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;} +.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;} +.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;} .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;} .txt-bold{font-weight:bold !important;} .txt-h1{font-size:36px;line-height:45px;} @@ -3469,7 +3468,7 @@ input:checked + .switch--gray{background-color:#757D82;} .select--gray, .switch--gray, .toggle--gray, -input:checked + .toggle--active-gray{color:#757D82;} +input:checked + .toggle.toggle--active-gray{color:#757D82;} .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active, .link--gray:hover, .link--gray.is-active, .select--gray:focus, @@ -3487,7 +3486,7 @@ input:checked + .switch--pink{background-color:#FA428F;} .select--pink, .switch--pink, .toggle--pink, -input:checked + .toggle--active-pink{color:#FA428F;} +input:checked + .toggle.toggle--active-pink{color:#FA428F;} .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active, .link--pink:hover, .link--pink.is-active, .select--pink:focus, @@ -3505,7 +3504,7 @@ input:checked + .switch--red{background-color:#EB3814;} .select--red, .switch--red, .toggle--red, -input:checked + .toggle--active-red{color:#EB3814;} +input:checked + .toggle.toggle--active-red{color:#EB3814;} .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active, .link--red:hover, .link--red.is-active, .select--red:focus, @@ -3523,7 +3522,7 @@ input:checked + .switch--orange{background-color:#E46707;} .select--orange, .switch--orange, .toggle--orange, -input:checked + .toggle--active-orange{color:#E46707;} +input:checked + .toggle.toggle--active-orange{color:#E46707;} .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active, .link--orange:hover, .link--orange.is-active, .select--orange:focus, @@ -3535,7 +3534,7 @@ input:checked + .toggle--active-orange{color:#E46707;} .select--yellow, .switch--yellow, .toggle--yellow, -input:checked + .toggle--active-yellow{color:#F3E444;} +input:checked + .toggle.toggle--active-yellow{color:#F3E444;} .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active, .link--yellow:hover, .link--yellow.is-active, .select--yellow:focus, @@ -3559,7 +3558,7 @@ input:checked + .switch--green{background-color:#2AA75C;} .select--green, .switch--green, .toggle--green, -input:checked + .toggle--active-green{color:#2AA75C;} +input:checked + .toggle.toggle--active-green{color:#2AA75C;} .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active, .link--green:hover, .link--green.is-active, .select--green:focus, @@ -3577,7 +3576,7 @@ input:checked + .switch--dot-blue::after{background-color:#3887BE;} .select--blue, .switch--blue, .toggle--blue, -input:checked + .toggle--active-blue{color:#3887BE;} +input:checked + .toggle.toggle--active-blue{color:#3887BE;} .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active, .link--blue:hover, .link--blue.is-active, .select--blue:focus, @@ -3595,7 +3594,7 @@ input:checked + .switch--purple{background-color:#9669D5;} .select--purple, .switch--purple, .toggle--purple, -input:checked + .toggle--active-purple{color:#9669D5;} +input:checked + .toggle.toggle--active-purple{color:#9669D5;} .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active, .link--purple:hover, .link--purple.is-active, .select--purple:focus, @@ -3619,7 +3618,7 @@ input:checked + .switch--dot-darken50::after{background-color:rgba(26, 34, 36, 0 .select--darken25, .switch--darken25, .toggle--darken25, -input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} +input:checked + .toggle.toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active, .btn--stroke.btn--darken50, .link--darken25:hover, .link--darken25.is-active, @@ -3630,7 +3629,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} .select--darken50, .switch--darken50, .toggle--darken50, -input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);} +input:checked + .toggle.toggle--active-darken50{color:rgba(26, 34, 36, 0.5);} .btn--darken50:hover, .btn--darken50.is-active, .btn--darken75, input:checked + .checkbox--darken75, @@ -3646,13 +3645,17 @@ input:checked + .switch--dot-darken75::after{background-color:rgba(26, 34, 36, 0 .select--darken75, .switch--darken75, .toggle--darken75, -input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);} +input:checked + .toggle.toggle--active-darken75{color:rgba(26, 34, 36, 0.75);} .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;} .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active, .link--darken75:hover, .link--darken75.is-active, .select--darken75:focus, .select--darken75:hover{color:#000;} -.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);} +.btn--lighten10, +.toggle-group:has(.toggle--lighten25), +.toggle-group:has(.toggle--lighten50), +.toggle-group:has(.toggle--lighten75), +.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);} .btn--lighten10:hover, .btn--lighten10.is-active, .btn--lighten25, input:checked + .checkbox--lighten25, @@ -3669,7 +3672,11 @@ input:checked + .switch--lighten50{background-color:rgba(255, 255, 255, 0.5);} .select--lighten25, .switch--lighten25, .toggle--lighten25, -input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);} +input:checked + .toggle.toggle--active-lighten25, +input:disabled + .toggle.toggle--lighten25, +input:disabled + .toggle.toggle--lighten50, +input:disabled + .toggle.toggle--lighten75, +input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);} .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active, .btn--stroke.btn--lighten50, .link--lighten25:hover, .link--lighten25.is-active, @@ -3680,7 +3687,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);} .select--lighten50, .switch--lighten50, .toggle--lighten50, -input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);} +input:checked + .toggle.toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);} .btn--lighten50:hover, .btn--lighten50.is-active, .btn--lighten75, .btn--white:hover, .btn--white.is-active, @@ -3701,7 +3708,7 @@ input:checked + .switch--lighten75{background-color:rgba(255, 255, 255, 0.75);} .select--white:hover, .switch--lighten75, .toggle--lighten75, -input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);} +input:checked + .toggle.toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);} .btn--lighten75:hover, .btn--lighten75.is-active, .btn--white, input:checked + .checkbox--white, @@ -3717,14 +3724,14 @@ input:checked + .switch--white{background-color:#fff;} .select--white, .switch--white, .toggle--white, -input:checked + .toggle--active-white{color:#fff;} +input:checked + .toggle.toggle--active-white{color:#fff;} .btn--stroke.btn--transparent, .link--transparent, .radio--transparent, input:checked + .radio--transparent, .select--transparent, .switch--transparent, .toggle--transparent, -input:checked + .toggle--active-transparent{color:transparent;} +input:checked + .toggle.toggle--active-transparent{color:transparent;} .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active, .link--transparent:hover, .link--transparent.is-active, .select--transparent:focus, @@ -3885,10 +3892,17 @@ input:checked + .toggle--yellow{background:#F3E444;} input:checked + .toggle--green{background:#2AA75C;} input:checked + .toggle--blue{background:#3887BE;} input:checked + .toggle--purple{background:#9669D5;} +.toggle-group:has(.toggle--darken25), +.toggle-group:has(.toggle--darken50), +.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);} input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);} input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);} input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);} input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);} +input:checked + .toggle--lighten25, +input:checked + .toggle--lighten50, +input:checked + .toggle--lighten75, +input:checked + .toggle--white{color:#1a2224;} input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);} input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);} input:checked + .toggle--white{background:#fff;} @@ -5286,17 +5300,15 @@ input:checked + .switch{ background-color:#757D82; } input:checked + .toggle{ - background:#757D82; + background:#4D5255; color:#fff; } input:disabled + .toggle{ pointer-events:none; color:rgba(26, 34, 36, 0.25); - border-color:transparent; } input:checked:disabled + .toggle{ background-color:rgba(158, 163, 167, 0.25); - color:rgba(26, 34, 36, 0.25); } body, input, @@ -5673,10 +5685,11 @@ textarea{ .radio{border-radius:50%;color:#757D82;border-color:currentColor;} .switch{cursor:pointer;top:3px;flex-shrink:0;position:relative;width:30px;height:18px;border-radius:9999px;border-width:1px;border-style:solid;border-color:currentColor;color:#757D82;transition:color 0.125s, background-color 0.125s, border-color 0.125s;} .switch--l{width:40px;height:24px;top:0;} -.toggle-group{display:inline-flex;text-align:center;border-radius:18px;} -.toggle-container{max-width:100%;} -.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;} -.toggle--s{font-size:10px;line-height:18px;padding:0 12px;} +.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;} +.toggle-container{display:flex;max-width:100%;} +.toggle{display:flex;align-items:center;justify-content:center;flex:1;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;} +.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;} +.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;} .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;} .txt-bold{font-weight:bold !important;} .txt-h1{font-size:36px;line-height:45px;} @@ -7964,7 +7977,7 @@ input:checked + .switch--gray{background-color:#757D82;} .select--gray, .switch--gray, .toggle--gray, -input:checked + .toggle--active-gray{color:#757D82;} +input:checked + .toggle.toggle--active-gray{color:#757D82;} .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active, .link--gray:hover, .link--gray.is-active, .select--gray:focus, @@ -7983,7 +7996,7 @@ input:checked + .switch--pink{background-color:#FA428F;} .select--pink, .switch--pink, .toggle--pink, -input:checked + .toggle--active-pink{color:#FA428F;} +input:checked + .toggle.toggle--active-pink{color:#FA428F;} .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active, .link--pink:hover, .link--pink.is-active, .select--pink:focus, @@ -8002,7 +8015,7 @@ input:checked + .switch--red{background-color:#EB3814;} .select--red, .switch--red, .toggle--red, -input:checked + .toggle--active-red{color:#EB3814;} +input:checked + .toggle.toggle--active-red{color:#EB3814;} .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active, .link--red:hover, .link--red.is-active, .select--red:focus, @@ -8021,7 +8034,7 @@ input:checked + .switch--orange{background-color:#E46707;} .select--orange, .switch--orange, .toggle--orange, -input:checked + .toggle--active-orange{color:#E46707;} +input:checked + .toggle.toggle--active-orange{color:#E46707;} .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active, .link--orange:hover, .link--orange.is-active, .select--orange:focus, @@ -8034,7 +8047,7 @@ input:checked + .toggle--active-orange{color:#E46707;} .select--yellow, .switch--yellow, .toggle--yellow, -input:checked + .toggle--active-yellow{color:#F3E444;} +input:checked + .toggle.toggle--active-yellow{color:#F3E444;} .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active, .link--yellow:hover, .link--yellow.is-active, .select--yellow:focus, @@ -8059,7 +8072,7 @@ input:checked + .switch--green{background-color:#2AA75C;} .select--green, .switch--green, .toggle--green, -input:checked + .toggle--active-green{color:#2AA75C;} +input:checked + .toggle.toggle--active-green{color:#2AA75C;} .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active, .link--green:hover, .link--green.is-active, .select--green:focus, @@ -8078,7 +8091,7 @@ input:checked + .switch--dot-blue::after{background-color:#0F71FA;} .select--blue, .switch--blue, .toggle--blue, -input:checked + .toggle--active-blue{color:#0F71FA;} +input:checked + .toggle.toggle--active-blue{color:#0F71FA;} .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active, .link--blue:hover, .link--blue.is-active, .select--blue:focus, @@ -8097,7 +8110,7 @@ input:checked + .switch--purple{background-color:#9669D5;} .select--purple, .switch--purple, .toggle--purple, -input:checked + .toggle--active-purple{color:#9669D5;} +input:checked + .toggle.toggle--active-purple{color:#9669D5;} .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active, .link--purple:hover, .link--purple.is-active, .select--purple:focus, @@ -8122,7 +8135,7 @@ input:checked + .switch--dot-darken50::after{background-color:rgba(26, 34, 36, 0 .select--darken25, .switch--darken25, .toggle--darken25, -input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} +input:checked + .toggle.toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active, .btn--stroke.btn--darken50, .link--darken25:hover, .link--darken25.is-active, @@ -8134,7 +8147,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);} .select--darken50, .switch--darken50, .toggle--darken50, -input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);} +input:checked + .toggle.toggle--active-darken50{color:rgba(26, 34, 36, 0.5);} .btn--darken50:hover, .btn--darken50.is-active, .btn--darken75, input:checked + .checkbox--darken75, @@ -8151,13 +8164,17 @@ input:checked + .switch--dot-darken75::after{background-color:rgba(26, 34, 36, 0 .select--darken75, .switch--darken75, .toggle--darken75, -input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);} +input:checked + .toggle.toggle--active-darken75{color:rgba(26, 34, 36, 0.75);} .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;} .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active, .link--darken75:hover, .link--darken75.is-active, .select--darken75:focus, .select--darken75:hover{color:#000;} -.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);} +.btn--lighten10, +.toggle-group:has(.toggle--lighten25), +.toggle-group:has(.toggle--lighten50), +.toggle-group:has(.toggle--lighten75), +.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);} .btn--lighten10:hover, .btn--lighten10.is-active, .btn--lighten25, input:checked + .checkbox--lighten25, @@ -8175,7 +8192,11 @@ input:checked + .switch--lighten50{background-color:rgba(255, 255, 255, 0.5);} .select--lighten25, .switch--lighten25, .toggle--lighten25, -input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);} +input:checked + .toggle.toggle--active-lighten25, +input:disabled + .toggle.toggle--lighten25, +input:disabled + .toggle.toggle--lighten50, +input:disabled + .toggle.toggle--lighten75, +input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);} .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active, .btn--stroke.btn--lighten50, .link--lighten25:hover, .link--lighten25.is-active, @@ -8187,7 +8208,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);} .select--lighten50, .switch--lighten50, .toggle--lighten50, -input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);} +input:checked + .toggle.toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);} .btn--lighten50:hover, .btn--lighten50.is-active, .btn--lighten75, .btn--white:hover, .btn--white.is-active, @@ -8209,7 +8230,7 @@ input:checked + .switch--lighten75{background-color:rgba(255, 255, 255, 0.75);} .select--white:hover, .switch--lighten75, .toggle--lighten75, -input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);} +input:checked + .toggle.toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);} .btn--lighten75:hover, .btn--lighten75.is-active, .btn--white, input:checked + .checkbox--white, @@ -8226,7 +8247,7 @@ input:checked + .switch--white{background-color:#fff;} .select--white, .switch--white, .toggle--white, -input:checked + .toggle--active-white{color:#fff;} +input:checked + .toggle.toggle--active-white{color:#fff;} .btn--stroke.btn--transparent, .link--transparent, .radio--transparent, input:checked + .radio--transparent, @@ -8234,7 +8255,7 @@ input:checked + .toggle--active-white{color:#fff;} .select--transparent, .switch--transparent, .toggle--transparent, -input:checked + .toggle--active-transparent{color:transparent;} +input:checked + .toggle.toggle--active-transparent{color:transparent;} .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active, .link--transparent:hover, .link--transparent.is-active, .select--transparent:focus, @@ -8395,10 +8416,17 @@ input:checked + .toggle--yellow{background:#F3E444;} input:checked + .toggle--green{background:#2AA75C;} input:checked + .toggle--blue{background:#0F71FA;} input:checked + .toggle--purple{background:#9669D5;} +.toggle-group:has(.toggle--darken25), +.toggle-group:has(.toggle--darken50), +.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);} input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);} input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);} input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);} input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);} +input:checked + .toggle--lighten25, +input:checked + .toggle--lighten50, +input:checked + .toggle--lighten75, +input:checked + .toggle--white{color:#1a2224;} input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);} input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);} input:checked + .toggle--white{background:#fff;} From e73034c1225facfa5904c881dc42c306d39511eb Mon Sep 17 00:00:00 2001 From: tristen Date: Thu, 15 Oct 2026 16:14:49 -0400 Subject: [PATCH 2/2] Simplifications --- docs/.vitepress/theme/catalog/Toggles.vue | 47 +++++++++++---- src/preset/colors.js | 5 +- src/preset/utilities.js | 2 - test/__snapshots__/build-css.jest.js.snap | 70 +++++++++++------------ 4 files changed, 73 insertions(+), 51 deletions(-) diff --git a/docs/.vitepress/theme/catalog/Toggles.vue b/docs/.vitepress/theme/catalog/Toggles.vue index 61ad2038..451656da 100644 --- a/docs/.vitepress/theme/catalog/Toggles.vue +++ b/docs/.vitepress/theme/catalog/Toggles.vue @@ -9,19 +9,18 @@ const colors = [null].concat(formColors.filter(color => !isLight(color))); const lightenColors = formColors.filter(isLight); const animals = ['cow', 'horse', 'pig']; -function toggleClass(color, activeColor) { +function toggleClass(color, activeColor, size) { return [ 'toggle', color ? `toggle--${color}` : '', - activeColor ? `toggle--active-${activeColor}` : '' + activeColor ? `toggle--active-${activeColor}` : '', + size ? `toggle--${size}` : '' ] .filter(Boolean) .join(' '); } -function groupClass(small) { - return small ? 'mb12 mr12 toggle-group toggle-group--s txt-s' : 'mb12 mr12 toggle-group'; -} +const groupClass = 'mb12 mr12 toggle-group'; function groupName(prefix, color, extra) { return `${prefix}-${color || 'default'}-${extra || 'on'}`; @@ -41,7 +40,7 @@ function groupName(prefix, color, extra) {