Skip to content

Commit a5a0e1b

Browse files
danhollickdanhollick
committed
WIP
1 parent eafdf82 commit a5a0e1b

File tree

1 file changed

+74
-24
lines changed

1 file changed

+74
-24
lines changed

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

Lines changed: 74 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -953,12 +953,12 @@ We've added utilities for the new `field-sizing` property that lets you create a
953953

954954
```html {{example: true}}
955955
<div class="py-8 grid">
956-
<form action="#" class="relative w-full max-w-xl justify-self-center bg-white">
957-
<div class="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 p-4 pb-0">
956+
<form action="#" class="relative w-full max-w-xl justify-self-center">
957+
<div class="overflow-hidden rounded-lg border bg-white border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 p-4 pb-0">
958958
<label for="title" class="sr-only">Title</label>
959-
<input value='Replace all uniforms with cotton' type="text" name="title" id="title" class="block w-full border-0 pt-2.5 text-lg font-medium placeholder:text-gray-400 focus:ring-0" placeholder="Title">
959+
<input value='Replace all uniforms with cotton' type="text" name="title" id="title" class="bg-white block w-full border-0 pt-2.5 text-lg font-medium placeholder:text-gray-400 focus:ring-0" placeholder="Title">
960960
<label for="description" class="sr-only">Description</label>
961-
<textarea rows="2" name="description" id="description" class="block w-full resize-none border-0 py-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm/6 [field-sizing:content]" placeholder="Write a description..."></textarea>
961+
<textarea rows="2" name="description" id="description" class="bg-white block w-full resize-none border-0 py-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm/6 [field-sizing:content]" placeholder="Write a description..."></textarea>
962962
<div aria-hidden="true">
963963
<div class="py-2">
964964
<div class="h-9"></div>
@@ -1026,35 +1026,85 @@ Use `field-sizing-content` to make the control resize to fit its contents, or `f
10261026

10271027
### \`color-scheme\` utilities
10281028

1029+
```html {{example: true}}
1030+
<div class="py-4 pb-64 grid [color-scheme:dark] dark:[color-scheme:light]">
1031+
<div class="relative w-full max-w-96 justify-self-center">
1032+
<label for="combobox" class="block text-sm/6 font-medium text-gray-900">Assigned to</label>
1033+
<div class="relative mt-2">
1034+
<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">
1035+
<button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
1036+
<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>
1037+
</button>
1038+
<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">
1039+
<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">
1040+
<span class="block truncate">Michael Foster</span>
1041+
</li>
1042+
<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">
1043+
<span class="block truncate">Dries Vincent</span>
1044+
</li>
1045+
<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">
1046+
<span class="block truncate">Leslie Alexander</span>
1047+
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-400 dark:text-indigo-600">
1048+
<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>
1049+
</span>
1050+
</li>
1051+
<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">
1052+
<span class="block truncate">Lindsay Walton</span>
1053+
</li>
1054+
<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">
1055+
<span class="block truncate">Courtney Henry</span>
1056+
</li>
1057+
<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">
1058+
<span class="block truncate">Tom Cook</span>
1059+
</li>
1060+
<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">
1061+
<span class="block truncate">Whitney Francis</span>
1062+
</li>
1063+
</ul>
1064+
</div>
1065+
</div>
1066+
</div>
1067+
```
1068+
10291069
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:
10301070

1031-
```html
1032-
<div class="scheme-normal">…</div>
1033-
<div class="scheme-dark">…</div>
1034-
<div class="scheme-light">…</div>
1035-
<div class="scheme-light-dark">…</div>
1036-
<div class="scheme-only-dark">…</div>
1037-
<div class="scheme-only-light">…</div>
1038-
```
1071+
<ClassTable showHeading={false} utilities={{
1072+
'scheme-normal': {'color-scheme': 'normal'},
1073+
'scheme-dark': {'color-scheme': 'dark'},
1074+
'scheme-light': {'color-scheme': 'light'},
1075+
'scheme-light-dark': {'color-scheme': 'light dark'},
1076+
'scheme-only-dark': {'color-scheme': 'only dark'},
1077+
'scheme-only-light': {'color-scheme': 'only light'},
1078+
}}/>
10391079

10401080
Throw `scheme-light dark:scheme-dark` on your `html` or `body` element and your scrollbars will always look good, no matter which dark mode strategy you use.
10411081

10421082
### \`font-stretch\` utilities
10431083

10441084
We've added utilities for the new-ish `font-stretch` property, which helps you style variable fonts that support different widths:
10451085

1046-
```html
1047-
<div class="font-stretch-normal">...</div>
1048-
<div class="font-stretch-ultra-condensed">...</div>
1049-
<div class="font-stretch-extra-condensed">...</div>
1050-
<div class="font-stretch-condensed">...</div>
1051-
<div class="font-stretch-semi-condensed">...</div>
1052-
<div class="font-stretch-semi-expanded">...</div>
1053-
<div class="font-stretch-expanded">...</div>
1054-
<div class="font-stretch-extra-expanded">...</div>
1055-
<div class="font-stretch-ultra-expanded">...</div>
1056-
<div class="font-stretch-75%">...</div>
1057-
```
1086+
<ClassTable showHeading={false} utilities={{
1087+
'font-stretch-normal': {'font-stretch': 'normal'},
1088+
'font-stretch-ultra-condensed': {'font-stretch': 'ultra-condensed'},
1089+
'font-stretch-extra-condensed': {'font-stretch': 'extra-condensed'},
1090+
'font-stretch-condensed': {'font-stretch': 'condensed'},
1091+
'font-stretch-semi-condensed': {'font-stretch': 'semi-condensed'},
1092+
'font-stretch-semi-expanded': {'font-stretch': 'semi-expanded'},
1093+
'font-stretch-expanded': {'font-stretch': 'expanded'},
1094+
'font-stretch-extra-expanded': {'font-stretch': 'extra-expanded'},
1095+
'font-stretch-ultra-expanded': {'font-stretch': 'ultra-expanded'},
1096+
'font-stretch-0%': {'font-stretch': '0%'},
1097+
'font-stretch-50%': {'font-stretch': '50%'},
1098+
'font-stretch-75%': {'font-stretch': '75%'},
1099+
'font-stretch-90%': {'font-stretch': '90%'},
1100+
'font-stretch-95%': {'font-stretch': '95%'},
1101+
'font-stretch-100%': {'font-stretch': '100%'},
1102+
'font-stretch-105%': {'font-stretch': '105%'},
1103+
'font-stretch-110%': {'font-stretch': '110%'},
1104+
'font-stretch-125%': {'font-stretch': '125%'},
1105+
'font-stretch-150%': {'font-stretch': '150%'},
1106+
'font-stretch-200%': {'font-stretch': '200%'},
1107+
}}/>
10581108

10591109
Looks like the name of this is changing to `font-width` at some point but no browsers actually support it yet, looking forward to dealing with that.
10601110

0 commit comments

Comments
 (0)