@astronox/core 0.2.2 → 0.2.4

package/src/components/actions/ThemeToggle/themeToggleController.ts

@@ -0,0 +1,111 @@
+import type { ColorTheme } from '../../../theme/contracts';
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+const initializedToggles = new WeakSet<HTMLElement>();
+const systemThemeQuery = '(prefers-color-scheme: dark)';
+let globalListenersInitialized = false;
+
+function isColorTheme(value: string | null): value is ColorTheme {
+  return value === 'light' || value === 'dark';
+}
+
+function getStorageKey(): string {
+  return (
+    document.documentElement.dataset.themeStorageKey ??
+    defaultThemeStorageKey
+  );
+}
+
+function readStoredTheme(): ColorTheme | null {
+  try {
+    const value = window.localStorage.getItem(getStorageKey());
+    return isColorTheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function getSystemTheme(): ColorTheme {
+  return window.matchMedia(systemThemeQuery).matches ? 'dark' : 'light';
+}
+
+function getCurrentTheme(): ColorTheme {
+  const value = document.documentElement.dataset.theme ?? null;
+  return isColorTheme(value) ? value : readStoredTheme() ?? getSystemTheme();
+}
+
+function updateToggle(toggle: HTMLElement, theme: ColorTheme): void {
+  const label =
+    theme === 'light'
+      ? toggle.dataset.themeToggleDarkLabel
+      : toggle.dataset.themeToggleLightLabel;
+
+  if (label) {
+    toggle.setAttribute('aria-label', label);
+    toggle.setAttribute('title', label);
+  }
+}
+
+function updateToggles(theme: ColorTheme): void {
+  for (const toggle of document.querySelectorAll<HTMLElement>(
+    '[data-theme-toggle]',
+  )) {
+    updateToggle(toggle, theme);
+  }
+}
+
+function applyTheme(theme: ColorTheme, persist: boolean): void {
+  document.documentElement.dataset.theme = theme;
+
+  if (persist) {
+    try {
+      window.localStorage.setItem(getStorageKey(), theme);
+    } catch {
+      // The selected theme remains active for the current document.
+    }
+  }
+
+  updateToggles(theme);
+  document.dispatchEvent(
+    new CustomEvent('astronox:theme-change', { detail: { theme } }),
+  );
+}
+
+function initializeGlobalListeners(): void {
+  if (globalListenersInitialized) return;
+  globalListenersInitialized = true;
+
+  const media = window.matchMedia(systemThemeQuery);
+  media.addEventListener('change', (event) => {
+    if (readStoredTheme() === null) {
+      applyTheme(event.matches ? 'dark' : 'light', false);
+    }
+  });
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== getStorageKey()) return;
+
+    const theme = isColorTheme(event.newValue)
+      ? event.newValue
+      : getSystemTheme();
+    applyTheme(theme, false);
+  });
+}
+
+export function initThemeToggle(toggle: HTMLElement): () => void {
+  if (initializedToggles.has(toggle)) return () => {};
+  initializedToggles.add(toggle);
+  initializeGlobalListeners();
+  updateToggle(toggle, getCurrentTheme());
+
+  const handleClick = (): void => {
+    applyTheme(getCurrentTheme() === 'light' ? 'dark' : 'light', true);
+  };
+
+  toggle.addEventListener('click', handleClick);
+
+  return () => {
+    toggle.removeEventListener('click', handleClick);
+    initializedToggles.delete(toggle);
+  };
+}

package/src/components/content/CardBody/CardBody.css

@@ -56,8 +56,7 @@
 }
 
 .card-body a {
-  color: var(--nox-link);
-  text-underline-offset: 0.2em;
+  color: var(--nox-content-link-color);
 }
 
 .card-body strong {
@@ -65,6 +64,11 @@
   font-weight: var(--nox-font-weight-strong);
 }
 
+.card-body a strong {
+  color: inherit;
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
 @container (width < 32rem) {
   .card-body__content {
     --nox-content-padding: var(--nox-space-4);

package/src/components/content/CardFooter/CardFooter.astro

@@ -18,6 +18,7 @@ const {
 }: Props = Astro.props;
 const resolvedTone = tone ?? dataTone;
 const hasAction = Astro.slots.has('action');
+const hasLeadingAction = Astro.slots.has('leading-action');
 const hasMedia = Boolean(media);
 ---
 
@@ -28,10 +29,18 @@ const hasMedia = Boolean(media);
   data-surface
   data-surface-sizing="content"
   data-has-action={hasAction ? true : undefined}
+  data-has-leading-action={hasLeadingAction ? true : undefined}
   data-has-media={hasMedia ? true : undefined}
   data-tone={resolvedTone}
 >
   <div class="card-footer__layout">
+    {
+      hasLeadingAction ? (
+        <div class="card-footer__leading-action">
+          <slot name="leading-action" />
+        </div>
+      ) : null
+    }
     {
       media ? (
         <div class="card-footer__media" aria-hidden="true">

package/src/components/content/CardFooter/CardFooter.css

@@ -31,6 +31,10 @@
   grid-template-columns: minmax(0, 1fr) var(--card-footer-size);
 }
 
+.card-footer[data-has-leading-action] .card-footer__layout {
+  grid-template-columns: var(--card-footer-size) minmax(0, 1fr);
+}
+
 .card-footer[data-has-media][data-has-action] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
@@ -38,6 +42,31 @@
     var(--card-footer-size);
 }
 
+.card-footer[data-has-leading-action][data-has-action]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    minmax(0, 1fr)
+    var(--card-footer-size);
+}
+
+.card-footer[data-has-leading-action][data-has-media]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    var(--card-footer-size)
+    minmax(0, 1fr);
+}
+
+.card-footer[data-has-leading-action][data-has-media][data-has-action]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    var(--card-footer-size)
+    minmax(0, 1fr)
+    var(--card-footer-size);
+}
+
 .card-footer__media {
   display: grid;
   min-width: 0;
@@ -64,29 +93,42 @@
   align-items: center;
   padding: var(--nox-space-3) var(--nox-space-5);
   font-size: var(--nox-font-size-sm);
-  font-weight: var(--nox-font-weight-medium);
+  font-weight: var(--nox-font-weight-regular);
   line-height: var(--nox-line-height-tight);
   overflow-wrap: anywhere;
 }
 
 .card-footer__content a {
-  color: var(--nox-link);
-  text-underline-offset: 0.2em;
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
 }
 
 .card-footer__content strong {
   font-weight: var(--nox-font-weight-strong);
 }
 
+.card-footer__content a strong {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
+.card-footer__leading-action,
 .card-footer__action {
   display: grid;
   min-width: 0;
   min-height: var(--card-footer-size);
   place-items: stretch;
   overflow: hidden;
+}
+
+.card-footer__leading-action {
+  border-inline-end: var(--nox-border-width) solid var(--surface-border-color);
+}
+
+.card-footer__action {
   border-inline-start: var(--nox-border-width) solid var(--surface-border-color);
 }
 
+.card-footer__leading-action > .nox-button[data-button-borderless],
 .card-footer__action > .nox-button[data-button-borderless] {
   --nox-button-background: transparent;
 }

package/src/components/content/CardLink/CardLink.astro

@@ -20,6 +20,7 @@ const {
   compactContent,
   compactText,
   compactVisual = 'show',
+  density = 'default',
   disabled = false,
   direction,
   full = false,
@@ -32,11 +33,15 @@ const {
   mediaSize = 'default',
   meta,
   mode = 'link',
+  textLayout = 'inline',
+  textTreatment = 'default',
   tone,
   title,
   ...attrs
 }: Props = Astro.props;
-const accessibleLabel = `${label} : ${title}${meta !== undefined ? ` ${meta}` : ''}`;
+const accessibleLabel = [label, title, meta]
+  .filter((value) => value !== undefined && value !== '')
+  .join(' ');
 const isDisabled = disabled || (mode === 'link' && !href);
 const isInteractive = mode === 'link' && !isDisabled;
 const Root = isInteractive ? 'a' : 'span';
@@ -65,6 +70,7 @@ const resolvedTone = tone ?? dataTone;
   data-collapse={collapse}
   data-compact-content={resolvedCompactContent}
   data-compact-visual={compactVisual}
+  data-density={density}
   data-disabled={isDisabled ? 'true' : 'false'}
   data-direction={direction}
   data-full={full ? 'true' : 'false'}
@@ -74,6 +80,7 @@ const resolvedTone = tone ?? dataTone;
   data-media-position={hasVisual ? mediaPosition : undefined}
   data-media-size={hasVisual ? mediaSize : undefined}
   data-mode={mode}
+  data-text-treatment={textTreatment}
   data-tone={resolvedTone}
 >
   <span class="card-link__layout">
@@ -109,12 +116,14 @@ const resolvedTone = tone ?? dataTone;
         <span class="card-link__compact-text" aria-hidden="true">
           {compactText}
         </span>
-        <span class="card-link__label">{label}</span>
+        {label ? <span class="card-link__label">{label}</span> : null}
         <TextPair
           class="card-link__text"
-          layout="inline"
+          layout={textLayout}
           primary={title}
+          primaryWeight={isInteractive ? 'medium' : 'strong'}
           secondary={meta}
+          secondaryWeight={textTreatment === 'heading' ? 'regular' : 'medium'}
         />
       </span>
     </span>

package/src/components/content/CardLink/CardLink.css

@@ -202,6 +202,20 @@
   gap: var(--nox-space-1);
 }
 
+.card-link[data-density='relaxed'] .card-link__layout {
+  --card-link-size: calc(
+    var(--nox-navigation-block-size) + var(--nox-space-5)
+  );
+}
+
+.card-link[data-density='relaxed'] .card-link__content {
+  padding: var(--nox-space-5) var(--nox-space-6);
+}
+
+.card-link[data-density='relaxed'] .card-link__text {
+  gap: var(--nox-space-3);
+}
+
 .card-link__compact-text {
   display: none;
   min-width: 0;
@@ -233,6 +247,14 @@
   align-items: center;
 }
 
+.card-link[data-text-treatment='heading'] .card-link__text {
+  --text-pair-primary-font-size: var(--nox-font-size-lg);
+  --text-pair-primary-letter-spacing: var(--nox-letter-spacing-wide);
+  --text-pair-primary-text-transform: uppercase;
+  --text-pair-secondary-font-size: var(--nox-font-size-md);
+  line-height: var(--nox-line-height-tight);
+}
+
 .card-link[data-interactive='true']:active {
   background: var(--card-link-active-background);
 }
@@ -287,6 +309,16 @@
 }
 
 @media (width < 48rem) {
+  .card-link[data-density='relaxed'] .card-link__layout {
+    --card-link-size: calc(
+      var(--nox-navigation-block-size) + var(--nox-space-4)
+    );
+  }
+
+  .card-link[data-density='relaxed'] .card-link__content {
+    padding: var(--nox-space-4) var(--nox-space-5);
+  }
+
   .card-link[data-compact-content] .card-link__layout {
     --card-link-size: var(--nox-navigation-compact-block-size);
     --card-link-media-size: 2.125rem;

package/src/components/content/MarkdownContent/MarkdownContent.css

@@ -171,7 +171,7 @@
 
 .markdown-content__resource-title {
   font-size: var(--nox-font-size-md);
-  font-weight: var(--nox-font-weight-strong);
+  font-weight: var(--nox-font-weight-regular);
   line-height: var(--nox-line-height-tight);
 }
 
@@ -298,13 +298,23 @@
 }
 
 .markdown-content__link {
-  color: var(--nox-tone-color);
+  color: var(--nox-content-link-color);
   overflow-wrap: anywhere;
   text-decoration: none;
 }
 
-.markdown-content__link[data-markdown-link-treatment='reference'] {
-  font-weight: var(--nox-font-weight-strong);
+.markdown-content__link[data-markdown-link-treatment='primary'] {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
+.markdown-content .markdown-content__strong {
+  font-weight: var(--nox-font-weight-medium);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .markdown-content__link:hover {
+    text-decoration-line: underline;
+  }
 }
 
 .markdown-content [data-tone] {

package/src/components/content/MarkdownContent/MarkdownInline.astro

@@ -19,7 +19,7 @@ const { node }: Props = Astro.props;
   ) : node.type === 'symbol' ? (
     <MarkdownSymbol node={node} />
   ) : node.type === 'strong' ? (
-    <strong>
+    <strong class="markdown-content__strong">
       {node.children.map((child) => <Astro.self node={child} />)}
     </strong>
   ) : node.type === 'emphasis' ? (

package/src/components/content/MarkdownContent/contracts.ts

@@ -49,7 +49,7 @@ export type MarkdownLink = {
   external: boolean;
   href: string;
   lang?: string;
-  treatment?: 'reference';
+  treatment?: 'primary';
 };
 
 export type MarkdownBreak = {

package/src/components/content/MarkdownContent/markdownContentRenderer.ts

@@ -259,10 +259,13 @@ function renderInline(node: MarkdownInline): Node {
     return text;
   }
   if (node.type === 'symbol') return renderSymbol(node);
-  if (node.type === 'strong' || node.type === 'emphasis') {
-    const element = document.createElement(
-      node.type === 'strong' ? 'strong' : 'em',
-    );
+  if (node.type === 'strong') {
+    const element = createElement('strong', 'markdown-content__strong');
+    appendInline(element, node.children);
+    return element;
+  }
+  if (node.type === 'emphasis') {
+    const element = document.createElement('em');
     appendInline(element, node.children);
     return element;
   }

package/src/components/data-display/TextPair/TextPair.css

@@ -1,6 +1,10 @@
 .text-pair {
   --text-pair-primary-color: var(--nox-text);
+  --text-pair-primary-font-size: inherit;
+  --text-pair-primary-letter-spacing: inherit;
+  --text-pair-primary-text-transform: none;
   --text-pair-secondary-color: var(--nox-text-muted);
+  --text-pair-secondary-font-size: var(--nox-font-size-sm);
 
   display: grid;
   min-width: 0;
@@ -27,9 +31,11 @@
 .text-pair__primary {
   min-width: 0;
   color: var(--text-pair-primary-color);
-  font-size: inherit;
+  font-size: var(--text-pair-primary-font-size);
+  letter-spacing: var(--text-pair-primary-letter-spacing);
   line-height: inherit;
   overflow-wrap: anywhere;
+  text-transform: var(--text-pair-primary-text-transform);
 }
 
 .text-pair__primary[data-text-color='muted'] {
@@ -58,7 +64,7 @@
 .text-pair__secondary {
   min-width: 0;
   color: var(--text-pair-secondary-color);
-  font-size: var(--nox-font-size-sm);
+  font-size: var(--text-pair-secondary-font-size);
   line-height: 1.35;
   overflow-wrap: anywhere;
 }

package/src/components/feedback/ThemeBootstrap/ThemeBootstrap.astro

@@ -0,0 +1,31 @@
+---
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+type Props = {
+  storageKey?: string;
+};
+
+const { storageKey = defaultThemeStorageKey }: Props = Astro.props;
+---
+
+<script is:inline define:vars={{ storageKey }}>
+  (() => {
+    const root = document.documentElement;
+    let storedTheme = null;
+
+    try {
+      const value = window.localStorage.getItem(storageKey);
+      if (value === 'light' || value === 'dark') storedTheme = value;
+    } catch {
+      // The system preference remains available without local storage.
+    }
+
+    const systemTheme = window.matchMedia?.('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light';
+
+    root.dataset.theme = storedTheme ?? systemTheme;
+    root.dataset.themeStorageKey = storageKey;
+  })();
+</script>

package/src/components/forms/ChoiceGroup/ChoiceGroup.css

@@ -81,7 +81,7 @@
   background: color-mix(
     in srgb,
     var(--nox-tone-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   color: var(--nox-tone-text);
 }