Skip to content

Commit e22288c

Browse files
danhollickdanhollick
committed
WIP
1 parent 5b71554 commit e22288c

File tree

2 files changed

+30
-36
lines changed

2 files changed

+30
-36
lines changed

‎src/pages/docs/v4-beta.mdx

Lines changed: 29 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -959,46 +959,40 @@ Use `field-sizing-content` to make the control resize to fit its contents, or `f
959959

960960
### \`color-scheme\` utilities
961961

962-
```html {{example: true}}
963-
<div class="py-4 pb-64 grid [color-scheme:dark] dark:[color-scheme:light]">
964-
<div class="relative w-full max-w-96 justify-self-center">
965-
<label for="combobox" class="block text-sm/6 font-medium text-gray-900">Assigned to</label>
966-
<div class="relative mt-2">
967-
<input value="Leslie Alexander" id="combobox" type="text" class="w-full rounded-md border-0 bg-slate-800 dark:bg-white py-1.5 pl-3 pr-12 text-white dark:text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6" role="combobox" aria-controls="options" aria-expanded="false">
968-
<button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
969-
<svg class="size-5 text-gray-200 dark:text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"> <path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>
970-
</button>
971-
<ul class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-slate-800 dark:bg-white py-1 text-base shadow-lg ring-1 ring-white/5 dark:ring-black/5 focus:outline-none sm:text-sm" id="options" role="listbox">
972-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
973-
<span class="block truncate">Michael Foster</span>
974-
</li>
975-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
976-
<span class="block truncate">Dries Vincent</span>
977-
</li>
978-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-0" role="option" tabindex="-1">
979-
<span class="block truncate">Leslie Alexander</span>
980-
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-400 dark:text-indigo-600">
981-
<svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" /></svg>
982-
</span>
983-
</li>
984-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
985-
<span class="block truncate">Lindsay Walton</span>
986-
</li>
987-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
988-
<span class="block truncate">Courtney Henry</span>
989-
</li>
990-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
991-
<span class="block truncate">Tom Cook</span>
992-
</li>
993-
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-white dark:text-gray-900" id="option-1" role="option" tabindex="-1">
994-
<span class="block truncate">Whitney Francis</span>
995-
</li>
996-
</ul>
962+
```html {{example: { p: 'none' } }}
963+
<div class="grid grid-cols-1 sm:grid-cols-2 [color-scheme:light]">
964+
<div class="p-8 pt-7">
965+
<p class="mb-2 text-sm font-medium text-slate-500">Light mode</p>
966+
<div class="bg-white rounded-lg px-6 py-8 max-h-56 ring-1 ring-slate-900/5 shadow-xl overflow-y-scroll">
967+
<h3 class="text-base font-medium text-slate-900 tracking-tight">It's a Mammal</h3>
968+
<p class="mt-2 text-sm text-slate-500">
969+
Right now there are six-hundred Titleists that I got from the driving range in the trunk of my car. Why don't we drive out to Rock-a-Way… and hit `em into the ocean! Now picture this. we find a nice sweet spot between the dunes, we take out our drivers, we tee up and, that ball goes sailing up into the sky holds there for a moment and then.. gulp!
970+
</p>
997971
</div>
998972
</div>
973+
<div class="bg-slate-900 p-8 pt-7 [color-scheme:dark]">
974+
<p class="mb-2 text-sm font-medium text-slate-400">Dark mode</p>
975+
<div class="bg-slate-800 rounded-lg px-6 py-8 max-h-56 ring-1 ring-slate-900/5 shadow-xl overflow-y-scroll">
976+
<h3 class="text-base font-medium text-white tracking-tight">It's a Mammal</h3>
977+
<p class="mt-2 text-sm text-slate-200">
978+
Right now there are six-hundred Titleists that I got from the driving range in the trunk of my car. Why don't we drive out to Rock-a-Way… and hit `em into the ocean! Now picture this. we find a nice sweet spot between the dunes, we take out our drivers, we tee up and, that ball goes sailing up into the sky holds there for a moment and then.. gulp!
979+
</p>
980+
</div>
981+
</div>
982+
</div>
983+
```
984+
```html
985+
<div class="grid grid-cols-2">
986+
<div class="bg-white overflow-y-scroll **scheme-light**">
987+
...
988+
</div>
989+
<div class="bg-slate-800 overflow-y-scroll **scheme-dark**">
990+
...
991+
</div>
999992
</div>
1000993
```
1001994

995+
1002996
Ever been annoyed that your app was showing light scrollbars in dark mode? You want these new `color-scheme` utilities — here are all the new classes:
1003997

1004998
<ClassTable showHeading={false} utilities={{

‎src/pages/examples/v4-docs-starting-style-example.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function StartingStyleDemo() {
1111
<div
1212
popover="auto"
1313
id="my-popover"
14-
className="opacity-0 [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0 relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-lg sm:p-6"
14+
className="opacity-0 [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0 relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-96 sm:p-6"
1515
>
1616
<div>
1717
<div class="mx-auto flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-600/10">

0 commit comments

Comments
 (0)