Dark theme updates to Button component

Author: webstackdev

_TODO.md

@@ -175,6 +175,8 @@ Generate cover images for the skills and technologies tags pages
 
 - add "cel" language to code blocks
 
+- The code language is in teh tab order and getting focus-visible
+
 ## Callout Issues
 
 - When adding backticks in a callout, it gets the standard grey background for a code block in light theme. But it should get an offset of the callout color, like "info-offset".

src/components/Button/server/__tests__/index.spec.ts

@@ -39,19 +39,6 @@ describe('Button server helpers', () => {
       expect(classList['custom']).toBe(true)
       expect(classList['extra-class']).toBe(true)
     })
-
-    it('supports the spotlight variant', () => {
-      const classList = buildButtonClassList({
-        variant: 'spotlight',
-      })
-
-      expect(classList).toMatchObject<ClassList>({
-        'bg-spotlight': true,
-        'hover:bg-spotlight-offset': true,
-        'focus-visible:bg-spotlight-offset': true,
-        'active:bg-spotlight-offset': true,
-      })
-    })
   })
 
   describe('resolveAriaLabel', () => {

src/components/Button/server/index.ts

@@ -1,11 +1,12 @@
 export type ButtonVariant =
+  | 'danger'
+  | 'note'
   | 'primary'
   | 'secondary'
   | 'twitter'
   | 'success'
-  | 'success-offset'
+  | 'info'
   | 'warning'
-  | 'spotlight'
   | 'icon'
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type ButtonType = 'button' | 'submit' | 'reset'
@@ -43,11 +44,13 @@ function addClassNames(classList: ClassList, classNames: string) {
 const baseButtonClasses =
   'inline-flex items-center justify-center text-center align-middle whitespace-nowrap select-none ' +
   'no-underline hover:no-underline focus:no-underline focus-visible:no-underline decoration-transparent ' +
-  'focus:outline-none focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none ' +
+  'relative focus-visible:outline-none ' +
+  "after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out " +
+  'focus-visible:after:opacity-100 focus-visible:after:[inset:-6px] focus-visible:after:border-spotlight ' +
   'border-2 border-solid border-transparent rounded-md ' +
   'font-bold uppercase tracking-[0.08em] ' +
   'text-sm leading-5 ' +
-  'transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-in-out ' +
+  'transition-[color,background-color,border-color] duration-200 ease-in-out ' +
   'disabled:cursor-not-allowed disabled:opacity-[0.65] disabled:pointer-events-none ' +
   'aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.65] aria-disabled:pointer-events-none'
 
@@ -61,43 +64,52 @@ const sizeClasses: Record<ButtonSize, string> = {
 }
 
 const variantClasses: Record<ButtonVariant, string> = {
+  danger:
+    'bg-danger text-white ' +
+    'hover:bg-danger-offset ' +
+    'focus-visible:bg-danger-offset ' +
+    'active:bg-danger-offset',
+  icon:
+    'aspect-square bg-transparent text-white p-2 ' +
+    'hover:bg-page-offset hover:text-primary ' +
+    'focus-visible:bg-page-offset focus-visible:text-primary ' +
+    'active:bg-page-offset',
+  info:
+    'bg-info text-white ' +
+    'hover:bg-info-offset ' +
+    'focus-visible:bg-info-offset ' +
+    'active:bg-info-offset',
+  note:
+    'bg-note text-white ' +
+    'hover:bg-note-offset ' +
+    'focus-visible:bg-note-offset ' +
+    'active:bg-note-offset',
   primary:
-    'bg-primary text-content ' +
-    'hover:bg-primary-offset hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-primary-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-primary-offset active:[box-shadow:var(--shadow-active)]',
+    'bg-primary text-primary-inverse ' +
+    'hover:bg-primary-offset ' +
+    'focus-visible:bg-primary-offset ' +
+    'active:bg-primary-offset',
   secondary:
-    'bg-secondary text-content ' +
-    'hover:bg-secondary-offset hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-secondary-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-secondary-offset active:[box-shadow:var(--shadow-active)]',
-  twitter: 'bg-x border-x text-content hover:bg-transparent hover:text-x focus-visible:bg-transparent focus-visible:text-x',
+    'bg-secondary text-secondary-inverse ' +
+    'hover:bg-secondary-offset ' +
+    'focus-visible:bg-secondary-offset ' +
+    'active:bg-secondary-offset',
   success:
     'bg-success text-white ' +
-    'hover:bg-success-offset hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-success-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-success-offset active:[box-shadow:var(--shadow-active)]',
-  'success-offset':
-    'bg-success-offset text-content-inverse ' +
-    'hover:bg-success hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-success focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-success active:[box-shadow:var(--shadow-active)]',
+    'hover:bg-success-offset ' +
+    'focus-visible:bg-success-offset ' +
+    'active:bg-success-offset',
+  twitter:
+    'bg-x border-x text-white ' +
+    'hover:bg-transparent hover:text-x ' +
+    'focus-visible:bg-transparent ' +
+    'focus-visible:text-x',
   warning:
-    'bg-warning text-content ' +
-    'hover:bg-warning-offset hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-warning-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-warning-offset active:[box-shadow:var(--shadow-active)]',
-  spotlight:
-    'bg-spotlight text-black ' +
-    'hover:bg-spotlight-offset hover:[box-shadow:var(--shadow-hover)] ' +
-    'focus-visible:bg-spotlight-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
-    'active:bg-spotlight-offset active:[box-shadow:var(--shadow-active)]',
-  icon:
-    'aspect-square bg-transparent text-content p-2 ![box-shadow:none] ' +
-    'hover:bg-page-offset hover:text-primary ' +
-    'focus-visible:bg-page-offset focus-visible:text-primary ' +
-    'active:bg-page-offset',
-}
+    'bg-warning-offset text-white ' +
+    'hover:bg-warning ' +
+    'focus-visible:bg-warning ' +
+    'active:bg-warning',
+  }
 
 export interface ButtonClassOptions {
   variant?: ButtonVariant
@@ -111,10 +123,15 @@ export function buildButtonClassList({
   additionalClasses,
 }: ButtonClassOptions) {
   const classList: ClassList = {}
+  const selectedVariant = variant as string
+
+  if (!(selectedVariant in variantClasses)) {
+    throw new Error(`Button: unsupported variant '${selectedVariant}'`)
+  }
 
   addClassNames(classList, baseButtonClasses)
   addClassNames(classList, sizeClasses[size])
-  addClassNames(classList, variantClasses[variant])
+  addClassNames(classList, variantClasses[selectedVariant as ButtonVariant])
 
   if (additionalClasses?.trim()) {
     addClassNames(classList, additionalClasses)

src/components/CallToAction/Download/index.astro

@@ -109,7 +109,7 @@ const downloadUrl = `/downloads/${normalizedResource}`
         <div class="space-y-3">
           <Button
             href={downloadUrl}
-            variant="success-offset"
+            variant="success"
             class="w-full gap-2 px-6 py-3 text-content-inverse"
           >
             <Icon

src/components/List/layouts/NumberedWithBackgroundList.astro

@@ -20,9 +20,9 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
 
 <ol class:list={olClass}>
   {
-    items.map((item) => (
+    items.map((item, index) => (
       <li class:list={liClass}>
-        <span class="mt-2 shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">1</span>
+        <span class="mt-2 shrink-0 w-8 h-8 bg-primary text-content-inverse rounded-full flex items-center justify-center text-sm font-bold">{index + 1}</span>
         <div class="pt-1">
           <em class:list={emClass}>{item.lead}</em>
           <div>{item.text}</div>

src/components/Pages/MyData/index.astro

@@ -1,4 +1,5 @@
 ---
+import Button from '@components/Button/index.astro'
 import Icon from '@components/Icon/index.astro'
 import List from '@components/List/index.astro'
 
@@ -101,12 +102,12 @@ const { content } = Astro.props
             />
           </div>
 
-          <button
+          <Button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight-offset hover:bg-spotlight text-white font-semibold transition-colors mt-8 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-          >
-            {content.accessData.buttonText}
-          </button>
+            variant="info"
+            class="mt-8 px-6 py-3"
+            text={content.accessData.buttonText}
+          />
 
           <div
             id="access-message"
@@ -163,12 +164,12 @@ const { content } = Astro.props
             <span class="mt-0.5">{content.deleteData.confirmText}</span>
           </label>
 
-          <button
+          <Button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger-offset text-white font-semibold hover:bg-danger transition-colors focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-          >
-            {content.deleteData.buttonText}
-          </button>
+            variant="warning"
+            class="px-6 py-3"
+            text={content.deleteData.buttonText}
+          />
 
           <div
             id="delete-message"
@@ -183,7 +184,9 @@ const { content } = Astro.props
     </div>
 
     <section class="border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
-      <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">{content.next.heading}</h2>
+      <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">
+        {content.next.heading}
+      </h2>
       <List variant="numbered-with-background-list" items={content.next.items} />
     </section>
   </div>

src/content/articles/demo/index.mdx

@@ -277,9 +277,127 @@ Should compile to the following HTML:
 
 **This text is _extremely_ important**
 
-## Calendar
+## Buttons
+
+Each color variant is shown in an example below. Sizes are 'small', 'medium', 'large' with 'medium' the default. Types are 'button', 'submit', and 'reset' and are passed directly to the `<button>` element as its type prop.
+
+```markdown
+<Button
+  type="submit"
+  variant="danger"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="danger"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="button"
+  variant="info"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
 
-import Calendar from '@components/Calendar/index.astro'
+<Button
+  type="button"
+  variant="info"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="reset"
+  variant="note"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="reset"
+  variant="note"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="primary"
+  size="small"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="primary"
+  size="small"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="secondary"
+  size="large"
+  class="px-6 py-3" mb-4
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="secondary"
+  size="large"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="success"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="success"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="warning"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="warning"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+## Calendar
 
 ```markdown
 <Calendar />

src/layouts/MarkdownLayout.astro

@@ -15,6 +15,8 @@ import Toc from '@components/Toc/index.astro'
 
 /** Components made available for use in MDX */
 import Avatar from '@components/Avatar/index.astro'
+import Button from '@components/Button/index.astro'
+import Calendar from '@components/Calendar/index.astro'
 import Callout from '@components/Callout/index.astro'
 import Carousel from '@components/Carousel/index.astro'
 import Contact from '@components/CallToAction/Contact/index.astro'
@@ -34,6 +36,8 @@ import CodeTabs from '@components/Code/CodeTabs/index.astro'
 /** Export components for use in MDX */
 const Components = {
   Avatar,
+  Button,
+  Calendar,
   Callout,
   Carousel,
   Contact,