Update callout stylings

Author: webstackdev

_TODO.md

@@ -142,6 +142,12 @@ Need a tooltip component for consistency. List to add tooltips to:
 - /tags/[tag]
 - Bug reporter modal
 
+## Text on Images
+
+A scrim is an elliptical gradient from translucent black (center) to transparent black (edges), strategically placed behind white text. The scrim is probably the most subtle way of reliably overlaying text on images out there, and very few designs use this technique.
+
+To overlay an article title and published date on a cover image, use CSS positioning, specifically position: relative on the container and position: absolute on the text elements, combined with design techniques to ensure readability such as a semi-transparent overlay or text shadows.
+
 ## Image generation models
 
 - dall-e (OpenAI)

src/components/Callout/index.astro

@@ -23,29 +23,29 @@ const iconMap = {
   action: 'warning',
   info: 'info',
   tip: 'lightbulb',
-  note: 'question',
+  note: 'info',
   success: 'check',
   danger: 'warning',
 } as const
 
 // Map callout types to their background color CSS custom properties
 const backgroundColorMap = {
-  warning: 'var(--color-danger-inverse)',
-  action: 'var(--color-danger-inverse)',
+  warning: 'var(--color-warning-inverse)',
+  action: 'var(--color-warning-inverse)',
   info: 'var(--color-info-inverse)',
-  tip: 'var(--color-page-base-offset)',
-  note: 'var(--color-page-base-offset)',
+  tip: 'var(--color-success-inverse)',
+  note: 'var(--color-note-inverse)',
   success: 'var(--color-success-inverse)',
   danger: 'var(--color-danger-inverse)',
 } as const
 
 // Map callout types to their border/icon color CSS custom properties
 const borderColorMap = {
-  warning: 'var(--color-danger)',
-  action: 'var(--color-danger)',
+  warning: 'var(--color-warning)',
+  action: 'var(--color-warning)',
   info: 'var(--color-info)',
-  tip: 'var(--color-content)',
-  note: 'var(--color-content)',
+  tip: 'var(--color-success)',
+  note: 'var(--color-note)',
   success: 'var(--color-success)',
   danger: 'var(--color-danger)',
 } as const
@@ -54,33 +54,59 @@ const icon = iconMap[type] ?? iconMap.info
 const backgroundColor = backgroundColorMap[type] ?? backgroundColorMap.info
 const borderColor = borderColorMap[type] ?? borderColorMap.info
 const typeLabel = typeLabelMap[type] ?? typeLabelMap.info
+const typeLabelUpper = typeLabel.toUpperCase()
 ---
 
 <style define:vars={{ backgroundColor, borderColor }}>
   .callout {
     background-color: var(--backgroundColor);
-    border-left-color: var(--borderColor);
+    border: 0;
+    border-left: 6px solid var(--borderColor);
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  .callout__header {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
   }
 
   .callout__icon {
     color: var(--borderColor);
+    transform: translateY(-2px);
+  }
+
+  .callout__icon :global(svg) {
+    fill: currentcolor;
+  }
+
+  .callout__label {
+    color: var(--borderColor);
+    font-size: 1rem;
+    font-weight: bold;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
 
   /* Spacing for nested elements */
-  /* stylelint-disable-next-line selector-max-universal */
-  .callout__content > * + * {
+  .callout__content > :not(.sr-only) + :not(.sr-only) {
     margin-top: 2rem;
   }
 </style>
 
-<div class="callout border border--border border-l-0 rounded-r-lg relative pl-6" role="note">
-  <div
-    class="callout__icon bg-bg rounded-full absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2"
-  >
-    <Icon name={icon} size={20} />
+<div class="callout" role="note">
+  <div class="callout__header">
+    <div class="callout__icon">
+      <Icon name={icon} size={20} variant="custom" />
+    </div>
+    <div class="callout__label" aria-hidden="true">{typeLabelUpper}</div>
   </div>
 
-  <div class="callout__content border-l-4 p-4 md:pl-8">
+  <div class="callout__content">
     <span class="sr-only">{typeLabel} callout:</span>
     <slot />
   </div>

src/content/articles/demo/index.mdx

@@ -87,6 +87,17 @@ This is a danger callout. Use it for critical warnings or errors that need immed
 This is a danger callout. Use it for critical warnings or errors that need immediate attention.
 </Callout>
 
+
+```markdown
+<Callout type="note">
+This is a note callout.
+</Callout>
+```
+
+<Callout type="note">
+This is a note callout.
+</Callout>
+
 ### Carousel Component
 
 Showcase related articles using the production carousel component:

src/lib/config/markdown.ts

@@ -198,6 +198,7 @@ export const rehypeAutolinkHeadingsConfig: RehypeAutolinkHeadingsOptions = {
       'focus-visible:no-underline',
       'transition-colors',
     ],
+    ariaLabel: 'Link to this section',
   },
   content: {
     type: 'element',

src/lib/markdown/__tests__/e2e/full-pipeline.spec.tsx

@@ -36,7 +36,7 @@ describe('Layer 4: E2E - Full Pipeline Integration', () => {
       expect(html).toContain('class="c-blockquote') // Attribution
       expect(html).toContain('❤️') // Emoji
       expect(html).toContain('href="https://www.webstackbuilders.com"') // Auto-linking
-      expect(html).toContain('class="anchor-link"') // Anchor headings
+      expect(html).toContain('class="anchor-link') // Anchor headings
 
       // Check accessibility
       const results = await axe(container)

src/lib/markdown/__tests__/e2e/rehype-autolink-headings.spec.tsx

@@ -102,10 +102,12 @@ describe('Layer 3: E2E - rehypeAutolinkHeadings', () => {
   it('should add accessible attributes to anchor links', () => {
     const { container } = render(<MarkdownOutput html={html} />)
 
-    // Anchor links should have aria-hidden or similar for accessibility
-    expect(html).toMatch(/aria-hidden=["']true["']/)
+    // Heading anchor links should have an accessible name (axe: link-name)
+    const headingAnchor = container.querySelector('h1 a,h2 a,h3 a,h4 a,h5 a,h6 a')
+    expect(headingAnchor).toBeTruthy()
+    expect(headingAnchor?.getAttribute('aria-label')).toBeTruthy()
 
-    const ariaHiddenLink = container.querySelector('a[aria-hidden="true"]')
-    expect(ariaHiddenLink).toBeTruthy()
+    // The icon itself should remain hidden from screen readers
+    expect(html).toMatch(/class=["'][^"']*anchor-link[^"']*["'][^>]*aria-hidden=["']true["']/)
   })
 })

src/lib/markdown/__tests__/integration/rehype-tailwind-simple-elements-astro.spec.ts

@@ -31,7 +31,7 @@ describe('rehype-tailwind: Simple HTML Elements (Astro Pipeline)', () => {
       const markdown = 'This is a test paragraph.'
       const html = await processMarkdown(markdown)
 
-      expect(html).toContain('<p class="mb-8 text-lg leading-relaxed">')
+      expect(html).toContain('<p class="mb-8 leading-relaxed">')
       expect(html).toContain('This is a test paragraph.')
     })
 
@@ -41,7 +41,7 @@ describe('rehype-tailwind: Simple HTML Elements (Astro Pipeline)', () => {
 Second paragraph.`
       const html = await processMarkdown(markdown)
 
-      const paragraphMatches = html.match(/<p class="mb-8 text-lg leading-relaxed">/g)
+  const paragraphMatches = html.match(/<p class="mb-8 leading-relaxed">/g)
       expect(paragraphMatches).toHaveLength(2)
     })
   })
@@ -179,7 +179,7 @@ This is a paragraph with **bold** text.
       const html = await processMarkdown(markdown)
 
       // Verify paragraph classes
-      expect(html).toContain('class="mb-8 text-lg leading-relaxed"')
+      expect(html).toContain('class="mb-8 leading-relaxed"')
 
       // Verify list classes
       expect(html).toContain('class="list-disc list-outside pl-4 mb-8"')
@@ -209,7 +209,7 @@ This paragraph has *italic* and **bold** text.
       expect(html).toContain('<strong>')
       // @TODO: there is work to improve this entire approach away from string-based in a branch
       //expect(html).toContain('<code>')
-      expect(html).toContain('class="mb-8 text-lg leading-relaxed"')
+      expect(html).toContain('class="mb-8 leading-relaxed"')
       expect(html).toContain('class="list-disc list-outside pl-4 mb-8"')
     })
   })

src/lib/markdown/plugins/rehype-tailwind/__tests__/index.spec.ts

@@ -191,7 +191,6 @@ describe('Paragraph (p) element', () => {
   test('has spacing and typography classes', () => {
     const config = getElementConfig('p')
     expect(config?.classes).toContain('mb-8')
-    expect(config?.classes).toContain('text-lg')
     expect(config?.classes).toContain('leading-relaxed')
   })
 })

src/styles/print.css

@@ -2,8 +2,10 @@
   html {
     --theme-color-primary: var(--a11y-theme-color-primary);
     --theme-color-primary-offset: var(--a11y-theme-color-primary-offset);
+    --theme-color-primary-inverse: var(--a11y-theme-color-primary-inverse);
     --theme-color-secondary: var(--a11y-theme-color-secondary);
     --theme-color-secondary-offset: var(--a11y-theme-color-secondary-offset);
+    --theme-color-secondary-inverse: var(--a11y-theme-color-secondary-inverse);
     --theme-color-accent: var(--a11y-theme-color-accent);
     --theme-color-accent-offset: var(--a11y-theme-color-accent-offset);
     --theme-color-page-base: var(--a11y-theme-color-page-base);
@@ -23,6 +25,9 @@
     --theme-color-info: var(--a11y-theme-color-info);
     --theme-color-info-offset: var(--a11y-theme-color-info-offset);
     --theme-color-info-inverse: var(--a11y-theme-color-info-inverse);
+    --theme-color-note: var(--a11y-theme-color-note);
+    --theme-color-note-offset: var(--a11y-theme-color-note-offset);
+    --theme-color-note-inverse: var(--a11y-theme-color-note-inverse);
     --theme-color-warning: var(--a11y-theme-color-warning);
     --theme-color-warning-offset: var(--a11y-theme-color-warning-offset);
     --theme-color-warning-inverse: var(--a11y-theme-color-warning-inverse);

src/styles/theme-inline.css

@@ -103,6 +103,16 @@
   --color-info-offset: var(--theme-color-info-offset); /* Light theme: #38bdf8 */
   --color-info-inverse: var(--theme-color-info-inverse); /* Light theme: #cffafe */
 
+  /**
+   * =============================================================================
+   *  Note colors
+   * =============================================================================
+   */
+
+  --color-note: var(--theme-color-note); /* Light theme: #374151 */
+  --color-note-offset: var(--theme-color-note-offset); /* Light theme: #6b7280 */
+  --color-note-inverse: var(--theme-color-note-inverse); /* Light theme: #d1d5db */
+
   /**
    * =============================================================================
    *  Warning colors
@@ -140,8 +150,6 @@
    *  Palette colors
    * =============================================================================
    */
-  --color-black: var(--theme-color-black); /* Light theme: #000 */
-  --color-white: var(--theme-color-white); /* Light theme: #fff */
 
   /** Blues */
   --color-blue-50: var(--theme-color-blue-50); /* Light theme: #eff6ff */