Update button example styles (#2764)

ariakit · Aug 25, 2023 · e78ed91 · e78ed91 · vercel · Aug 25, 2023
1 parent 9938ee1
commit e78ed91
Show file tree

Hide file tree

Showing 34 changed files with 100 additions and 61 deletions.
diff --git a/examples/button/style.css b/examples/button/style.css
@@ -15,13 +15,39 @@
     whitespace-nowrap
     aria-disabled:opacity-50
     sm:gap-2
-    bg-blue-600
-    text-white
-    hover:bg-blue-800
+    bg-white
+    dark:bg-white/5
+    text-black
+    dark:text-white
+    hover:bg-gray-100
+    dark:hover:bg-white/10
+    aria-expanded:bg-gray-100
+    aria-expanded:dark:bg-white/10
+    data-[focus-visible]:outline
+    active:[transform:scale(0.98)]
+    aria-expanded:active:[transform:scale(1)]
+    [box-shadow:inset_0_0_0_1px_rgba(0,0,0,0.1),inset_0_-1px_0_rgba(0,0,0,0.1),0_1px_1px_rgba(0,0,0,0.1)]
+    dark:[box-shadow:inset_0_0_0_1px_rgba(255,255,255,0.1),inset_0_-1px_0_1px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.05)]
     outline-2
     outline-offset-2
     outline-blue-600
-    data-[focus-visible]:outline
+  ;
+}
+
+.flat {
+  @apply
+    [box-shadow:none]
+    dark:[box-shadow:none]
+  ;
+}
+
+.primary {
+  @apply
+    text-white
+    bg-blue-600
+    dark:bg-blue-800
+    hover:bg-blue-800
+    dark:hover:bg-blue-600
   ;
 }
 
@@ -32,12 +58,17 @@
     dark:bg-transparent
     hover:bg-black/5
     dark:hover:bg-white/5
+    [box-shadow:none]
+    dark:[box-shadow:none]
   ;
 }
 
 .danger {
   @apply
+    text-white
     bg-red-600
+    dark:bg-red-700
     hover:bg-red-700
+    dark:hover:bg-red-600
   ;
 }
diff --git a/examples/dialog-nested/index.tsx b/examples/dialog-nested/index.tsx
@@ -50,7 +50,7 @@ export default function Example() {
           </tbody>
         </table>
 
-        <Ariakit.DialogDismiss className="button">
+        <Ariakit.DialogDismiss className="button primary">
           Checkout
         </Ariakit.DialogDismiss>
 

diff --git a/examples/dialog-react-router/index.tsx b/examples/dialog-react-router/index.tsx
@@ -39,7 +39,7 @@ function Tweet() {
             render={<textarea placeholder="What's happening?" rows={5} />}
           />
         </label>
-        <Ariakit.Button type="submit" className="button">
+        <Ariakit.Button type="submit" className="button primary">
           Tweet
         </Ariakit.Button>
       </form>
@@ -50,7 +50,7 @@ function Tweet() {
 function Home() {
   return (
     <>
-      <Link to="/tweet" className="button">
+      <Link to="/tweet" className="button primary">
         Tweet
       </Link>
       <Outlet />

diff --git a/examples/dialog/style.css b/examples/dialog/style.css
@@ -1,5 +1,11 @@
 @import url("../button/style.css");
 
+.button {
+  @apply
+    font-medium
+  ;
+}
+
 .backdrop {
   @apply
     [backdrop-filter:blur(4px)]

diff --git a/examples/form-select/index.tsx b/examples/form-select/index.tsx
@@ -46,7 +46,9 @@ export default function Example() {
         <Ariakit.FormError name={form.names.fruit} className="error" />
       </div>
       <div className="buttons">
-        <Ariakit.FormSubmit className="button">Submit</Ariakit.FormSubmit>
+        <Ariakit.FormSubmit className="button primary">
+          Submit
+        </Ariakit.FormSubmit>
       </div>
     </Ariakit.Form>
   );

diff --git a/examples/form-select/select.tsx b/examples/form-select/select.tsx
@@ -26,7 +26,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
         <Ariakit.Select
           store={select}
           ref={ref}
-          className="select"
+          className="button"
           {...props}
           onBlur={(event) => {
             props.onBlur?.(event);

diff --git a/examples/form-select/style.css b/examples/form-select/style.css
@@ -1,8 +1,9 @@
 @import url("../select/style.css");
 @import url("../form/style.css");
 
-.select {
+.primary {
   @apply
-    w-full
+    justify-center
   ;
 }
+
diff --git a/examples/hovercard-disclosure/index.tsx b/examples/hovercard-disclosure/index.tsx
@@ -43,7 +43,7 @@ export default function Example() {
           Ariakit
         </Ariakit.HovercardHeading>
         <p>Toolkit for building accessible web apps with React.</p>
-        <a href="https://twitter.com/ariakitjs" className="button">
+        <a href="https://twitter.com/ariakitjs" className="button primary flat">
           Follow
         </a>
       </Ariakit.Hovercard>

diff --git a/examples/hovercard/index.tsx b/examples/hovercard/index.tsx
@@ -22,7 +22,7 @@ export default function Example() {
           Ariakit
         </Ariakit.HovercardHeading>
         <p>Toolkit for building accessible web apps with React.</p>
-        <a href="https://twitter.com/ariakitjs" className="button">
+        <a href="https://twitter.com/ariakitjs" className="button primary flat">
           Follow
         </a>
       </Ariakit.Hovercard>

diff --git a/examples/menu/style.css b/examples/menu/style.css
@@ -1,6 +1,12 @@
 @import url("../button/style.css");
 @import url("../separator/style.css");
 
+.button {
+  @apply
+    font-medium
+  ;
+}
+
 .menu {
   @apply
     max-h-[var(--popover-available-height)]

diff --git a/...les/popover-responsive/test-chrome.ts-snapshots/popover-responsive-1-chrome.png b/...les/popover-responsive/test-chrome.ts-snapshots/popover-responsive-1-chrome.png
diff --git a/...les/popover-responsive/test-chrome.ts-snapshots/popover-responsive-2-chrome.png b/...les/popover-responsive/test-chrome.ts-snapshots/popover-responsive-2-chrome.png
diff --git a/examples/popover/style.css b/examples/popover/style.css
@@ -1,5 +1,11 @@
 @import url("../button/style.css");
 
+.button {
+  @apply
+    font-medium
+  ;
+}
+
 .popover {
   @apply
     z-50

diff --git a/examples/select-animated/index.tsx b/examples/select-animated/index.tsx
@@ -10,7 +10,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Favorite fruit</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select" />
+      <Ariakit.Select store={select} className="button" />
       {mounted && (
         <Ariakit.SelectPopover
           store={select}

diff --git a/examples/select-autofill/index.tsx b/examples/select-autofill/index.tsx
@@ -8,7 +8,7 @@ export default function Example() {
       <label htmlFor="email">Email</label>
       <input type="email" id="email" name="email" className="input" />
       <Ariakit.SelectLabel store={select}>Role</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} name="role" className="select" />
+      <Ariakit.Select store={select} name="role" className="button" />
       <Ariakit.SelectPopover store={select} sameWidth className="popover">
         <Ariakit.SelectItem className="select-item" value="Student" />
         <Ariakit.SelectItem className="select-item" value="Tutor" />

diff --git a/examples/select-autofill/style.css b/examples/select-autofill/style.css
@@ -22,7 +22,7 @@
   ;
 }
 
-.select {
+.button {
   @apply
     [&[data-autofill]]:bg-[rgb(219_237_255)]
     [&[data-autofill]]:dark:bg-[rgb(36_107_179)]

diff --git a/examples/select-combobox-focus-within/select-combobox.tsx b/examples/select-combobox-focus-within/select-combobox.tsx
@@ -66,7 +66,7 @@ export const SelectCombobox = React.forwardRef<
         <Ariakit.Select
           ref={ref}
           store={select}
-          className="select"
+          className="button"
           {...props}
         />
         {mounted && (

diff --git a/examples/select-combobox-virtualized/index.tsx b/examples/select-combobox-virtualized/index.tsx
@@ -61,7 +61,7 @@ export default function Example() {
     <>
       <div className="wrapper">
         <Ariakit.SelectLabel store={select}>Country</Ariakit.SelectLabel>
-        <Ariakit.Select store={select} className="select">
+        <Ariakit.Select store={select} className="button">
           <span className="select-value">
             {selectValue || "Select a country"}
           </span>

diff --git a/examples/select-combobox-virtualized/style.css b/examples/select-combobox-virtualized/style.css
@@ -1,6 +1,6 @@
 @import url("../select-combobox/style.css");
 
-.select {
+.button {
   @apply
     w-[260px]
   ;

diff --git a/examples/select-combobox/index.tsx b/examples/select-combobox/index.tsx
@@ -20,7 +20,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Favorite fruit</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select" />
+      <Ariakit.Select store={select} className="button" />
       <Ariakit.SelectPopover
         store={select}
         gutter={4}

diff --git a/examples/select-grid/index.tsx b/examples/select-grid/index.tsx
@@ -32,7 +32,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Position</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} showOnKeyDown={false} className="select">
+      <Ariakit.Select store={select} showOnKeyDown={false} className="button">
         <Square value={value} />
         {value}
         <Ariakit.SelectArrow />

diff --git a/examples/select-group/index.tsx b/examples/select-group/index.tsx
@@ -6,7 +6,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Favorite food</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select" />
+      <Ariakit.Select store={select} className="button" />
       <Ariakit.SelectPopover
         store={select}
         gutter={4}

diff --git a/examples/select-item-custom/index.tsx b/examples/select-item-custom/index.tsx
@@ -33,7 +33,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Account</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select">
+      <Ariakit.Select store={select} className="button">
         {renderValue(value)}
         <Ariakit.SelectArrow />
       </Ariakit.Select>

diff --git a/examples/select-item-custom/style.css b/examples/select-item-custom/style.css
@@ -8,7 +8,7 @@
   ;
 }
 
-.select {
+.button {
   @apply
     w-80
     justify-start

diff --git a/examples/select-menu-default-open/filter-select.tsx b/examples/select-menu-default-open/filter-select.tsx
@@ -50,7 +50,7 @@ export const FilterSelect = React.forwardRef<
     <div className="filter">
       <Ariakit.Select
         ref={ref}
-        className="select"
+        className="button select"
         {...props}
         store={select}
         aria-labelledby={labelId}
@@ -72,7 +72,7 @@ export const FilterSelect = React.forwardRef<
       </Ariakit.SelectPopover>
       {onRemove && (
         <Ariakit.Button
-          className="select"
+          className="button select"
           aria-label={`Remove ${label} filter`}
           onClick={() => onRemove()}
         >

diff --git a/examples/select-menu-default-open/style.css b/examples/select-menu-default-open/style.css
@@ -40,6 +40,8 @@
 
 .button {
   @apply
+    w-auto
+    justify-center
     rounded-md
     aria-expanded:bg-black/10
     aria-expanded:dark:bg-white/10

diff --git a/examples/select-multiple/index.tsx b/examples/select-multiple/index.tsx
@@ -15,7 +15,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Favorite food</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select">
+      <Ariakit.Select store={select} className="button">
         {renderValue(value)}
         <Ariakit.SelectArrow />
       </Ariakit.Select>

diff --git a/examples/select/index.tsx b/examples/select/index.tsx
@@ -6,7 +6,7 @@ export default function Example() {
   return (
     <div className="wrapper">
       <Ariakit.SelectLabel store={select}>Favorite fruit</Ariakit.SelectLabel>
-      <Ariakit.Select store={select} className="select" />
+      <Ariakit.Select store={select} className="button" />
       <Ariakit.SelectPopover
         store={select}
         gutter={4}

diff --git a/examples/select/style.css b/examples/select/style.css
@@ -1,3 +1,5 @@
+@import url("../button/style.css");
+
 .wrapper {
   @apply
     flex
@@ -12,29 +14,10 @@
   ;
 }
 
-.select {
+.button {
   @apply
-    flex
     w-[200px]
-    h-10
-    cursor-default
-    items-center
     justify-between
-    gap-1
-    rounded-md
-    px-4
-    text-base
-    whitespace-nowrap
-    bg-black/[7.5%]
-    hover:bg-black/[11.25%]
-    aria-expanded:bg-black/[11.25%]
-    dark:bg-white/[7.5%]
-    dark:hover:bg-white/[11.25%]
-    dark:aria-expanded:bg-white/[11.25%]
-    shadow-button
-    dark:shadow-button-dark
-    focus-visible:ariakit-outline-input
-    aria-disabled:opacity-50
   ;
 }
 

diff --git a/examples/toolbar-select/style.css b/examples/toolbar-select/style.css
@@ -4,3 +4,9 @@
 .select-item {
   @apply pr-8;
 }
+
+.button {
+  @apply
+    w-auto
+  ;
+}
diff --git a/examples/toolbar-select/toolbar.tsx b/examples/toolbar-select/toolbar.tsx
@@ -15,7 +15,9 @@ export const ToolbarButton = React.forwardRef<
   HTMLButtonElement,
   Ariakit.ToolbarItemProps
 >(function ToolbarButton(props, ref) {
-  return <Ariakit.ToolbarItem ref={ref} className="button" {...props} />;
+  return (
+    <Ariakit.ToolbarItem ref={ref} className="button secondary" {...props} />
+  );
 });
 
 export const ToolbarSeparator = React.forwardRef<