@rdna/radiants 0.1.3 → 0.1.5

package/components/core/Button/Button.test.tsx

@@ -35,4 +35,22 @@ describe('Button', () => {
     expect(btn).not.toBeDisabled();
     expect(btn).toHaveAttribute('aria-disabled', 'true');
   });
+
+  test('forwards anchor props when rendered as a link', () => {
+    render(
+      <Button
+        href="https://example.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Open docs"
+      >
+        Docs
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Open docs' });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
 });

package/components/core/Button/Button.tsx

@@ -39,19 +39,27 @@ interface ButtonOwnProps {
   compact?: boolean;
   /** Icon — RDNA icon name (string) or custom ReactNode */
   icon?: string | React.ReactNode;
-  /** URL for navigation — renders as anchor element */
-  href?: string;
-  /** Target for link navigation */
-  target?: string;
   /** Additional className applied to the face element */
   className?: string;
+  /** Applies disabled styling and disables button-mode interaction */
+  disabled?: boolean;
   /** Keep button focusable while disabled — use for loading states */
   focusableWhenDisabled?: boolean;
   children?: React.ReactNode;
 }
 
-type ButtonProps = ButtonOwnProps &
-  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps>;
+type ButtonButtonProps = ButtonOwnProps &
+  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps | 'href' | 'target'> & {
+    href?: undefined;
+    target?: never;
+  };
+
+type ButtonAnchorProps = ButtonOwnProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonOwnProps> & {
+    href: string;
+  };
+
+type ButtonProps = ButtonButtonProps | ButtonAnchorProps;
 
 // ============================================================================
 // CVA Variants
@@ -159,13 +167,11 @@ export function Button({
   flush = false,
   quiet = false,
   icon,
-  href,
-  target,
   children,
   className = '',
-  disabled,
+  disabled = false,
   focusableWhenDisabled,
-  ...props
+  ...elementProps
 }: ButtonProps) {
   const dataState = active ? 'selected' : 'default';
 
@@ -221,11 +227,14 @@ export function Button({
     </span>
   );
 
-  if (href) {
+  if ('href' in elementProps && typeof elementProps.href === 'string') {
+    const { href, target, ...anchorProps } = elementProps;
+
     return (
       <a
         href={href}
         target={target}
+        {...anchorProps}
         className={rootClasses}
         data-rdna="button"
         data-slot="button-root"
@@ -252,7 +261,7 @@ export function Button({
       {...(quiet ? { 'data-quiet': '' } : {})}
       disabled={isDisabled}
       focusableWhenDisabled={focusableWhenDisabled}
-      {...props}
+      {...elementProps}
     >
       {face}
     </BaseButton>
@@ -270,10 +279,11 @@ interface IconButtonOwnProps extends Omit<ButtonOwnProps, 'children' | 'icon' |
   'aria-label': string;
 }
 
-type IconButtonProps = IconButtonOwnProps &
-  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof IconButtonOwnProps> & {
-    focusableWhenDisabled?: boolean;
-  };
+type IconButtonProps = Omit<
+  ButtonButtonProps,
+  'children' | 'icon' | 'iconOnly' | 'textOnly' | 'fullWidth' | 'href' | 'target'
+> &
+  IconButtonOwnProps;
 
 /**
  * A square button that shows only an icon.

package/components/core/DialPanel/DialPanel.tsx

@@ -74,8 +74,8 @@ export function DialPanel({
 }: DialPanelProps) {
   return (
     <div className={`${width} shrink-0 border-r border-rule flex flex-col overflow-hidden ${className}`}>
-      {header}
       <div className="flex-1 min-h-0 overflow-y-auto [&_.dialkit-panel]:!bg-transparent [&_.dialkit-panel]:!border-0 [&_.dialkit-panel]:!shadow-none">
+        {header}
         <DialRoot
           mode={mode}
           {...(position ? { position } : {})}

package/components/core/Separator/Separator.tsx

@@ -30,7 +30,7 @@ const separatorVariants = cva('shrink-0', {
       vertical: 'h-full',
     },
     variant: {
-      solid: 'bg-line',
+      solid: 'bg-rule',
       dashed: 'border-rule border-dashed',
       decorated: '',
     },

package/components/core/Tabs/Tabs.tsx

@@ -283,7 +283,19 @@ function Trigger({ value, children, icon, settings, compact, className = '' }: T
   if (layout === 'accordion') {
     const isActive = activeTab === value;
     return (
-      <div data-slot="tab-trigger" data-mode="accordion" data-state={isActive ? 'selected' : 'default'}>
+      <div
+        data-slot="tab-trigger"
+        data-mode="accordion"
+        data-state={isActive ? 'selected' : 'default'}
+        className={isActive
+          ? 'bg-card border-r border-r-card relative z-10'
+          : ''
+        }
+        style={isActive
+          ? { transform: 'translateY(-1px)', filter: 'drop-shadow(0 1px 0 var(--color-ink))' }
+          : { transform: 'translateY(1px)', filter: 'drop-shadow(0 -1px 0 var(--color-ink))' }
+        }
+      >
         <div className="flex items-center">
           <Button
             mode={compact ? 'pattern' : 'flat'}
@@ -315,7 +327,7 @@ function Trigger({ value, children, icon, settings, compact, className = '' }: T
             <BaseCollapsible.Panel
               className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
             >
-              <div className="p-2 space-y-2 bg-page">
+              <div className="p-2 space-y-2 bg-card">
                 {settings}
               </div>
             </BaseCollapsible.Panel>

package/components/core/__tests__/smoke.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import {
+  AppWindow,
   Button,
   Select,
   Dialog,
@@ -26,6 +27,7 @@ import {
 test('core exports render', () => {
   render(<Button>Test</Button>);
   expect(screen.getByRole('button', { name: 'Test' })).toBeInTheDocument();
+  expect(AppWindow).toBeTruthy();
   expect(Select).toBeTruthy();
   expect(Dialog).toBeTruthy();
 });

package/components/core/index.ts

@@ -1,5 +1,6 @@
 // Core component exports
 export { Alert, alertVariants } from './Alert/Alert';
+export { AppWindow, AppWindowBody, AppWindowSplitView, AppWindowPane } from './AppWindow/AppWindow';
 export { Badge, badgeVariants } from './Badge/Badge';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export { Button, IconButton, buttonRootVariants, buttonFaceVariants } from './Button/Button';

package/contract/system.ts

@@ -20,7 +20,7 @@ export const radiantsSystemContract = {
       "#fcc383": "sunset-fuzz",
       "#ff6b63": "sun-red",
       "#cef5ca": "mint",
-      "#ffffff": "pure-white",
+      "#fffcf3": "pure-white",
       "#22c55e": "success-mint",
     },
     hexToSemantic: {
@@ -29,7 +29,7 @@ export const radiantsSystemContract = {
       "#95bad2": { text: "link" },
       "#ff6b63": { bg: "danger", text: "danger" },
       "#cef5ca": { bg: "success", text: "success" },
-      "#ffffff": { bg: "card" },
+      "#fffcf3": { bg: "card" },
       "#22c55e": { text: "success" },
     },
     oklchToSemantic: {
@@ -40,7 +40,7 @@ export const radiantsSystemContract = {
       "oklch(0.8546 0.1039 68.93)": { bg: "action-accent" },
       "oklch(0.7102 0.1823 25.87)": { bg: "action-destructive", text: "status-error" },
       "oklch(0.9312 0.0702 142.51)": { bg: "status-success", text: "status-success" },
-      "oklch(1.0000 0.0000 0)": { bg: "card" },
+      "oklch(0.9909 0.0123 91.51)": { bg: "card" },
       "oklch(0.7227 0.1920 149.58)": { text: "status-success" },
     },
     removedAliases: [
@@ -134,11 +134,25 @@ export const radiantsSystemContract = {
   typography: {
     validSizes: [
       "text-xs", "text-sm", "text-base", "text-lg",
-      "text-xl", "text-2xl", "text-3xl",
+      "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl",
+      "text-fluid-sm", "text-fluid-base", "text-fluid-lg",
+      "text-fluid-xl", "text-fluid-2xl", "text-fluid-3xl", "text-fluid-4xl",
     ],
     validWeights: [
       "font-normal", "font-medium", "font-semibold", "font-bold",
     ],
+    validLeading: [
+      "leading-tight", "leading-heading", "leading-snug",
+      "leading-normal", "leading-relaxed", "leading-none",
+    ],
+    validTracking: [
+      "tracking-tight", "tracking-normal", "tracking-wide",
+    ],
+    validFontFamilies: [
+      "font-sans", "font-heading", "font-mono",
+      "font-display", "font-caption",
+      "font-mondwest", "font-joystix",
+    ],
   },
 
   textLikeInputTypes: ["text", "email", "password", "search", "url", "tel", "number"],

package/dark.css

@@ -38,7 +38,7 @@
   --color-content-secondary: oklch(0.9780 0.0295 94.34 / 0.85);          /* was rgba(254, 248, 226, 0.85) */
   --color-content-inverted: var(--color-ink);
   --color-content-muted: oklch(0.9780 0.0295 94.34 / 0.6);              /* was rgba(254, 248, 226, 0.6) — cream at 60% */
-  --color-content-link: var(--color-sky-blue);       /* Links stay sky-blue for contrast */
+  --color-content-link: var(--color-sky-blue);       /* Links: lighter sky-blue has good contrast on dark bg */
 
   /* ============================================
      EDGE TOKENS - Adjusted for dark backgrounds
@@ -94,6 +94,16 @@
   --color-success: var(--color-mint);
   --color-warning: var(--color-sun-yellow);
 
+  /* ============================================
+     DARK MODE — Typography Adjustments
+     Text appears heavier on dark backgrounds.
+     Antialiased rendering + lighter code weight.
+     ============================================ */
+
+  code, pre {
+    font-weight: 300;  /* PixelCode Light — compensates for perceived weight gain on dark bg */
+  }
+
   /* ============================================
      TEXT GLOW - Warm phosphor halo on all text
      Inherits down the tree via text-shadow

package/eslint/contract.mjs

@@ -16,7 +16,7 @@ export const EMPTY_CONTRACT = Object.freeze({
   themeVariants: [],
   motion: { maxDurationMs: 0, allowedEasings: [], durationTokens: [], easingTokens: [] },
   shadows: { validStandard: [], validPixel: [], validGlow: [] },
-  typography: { validSizes: [], validWeights: [] },
+  typography: { validSizes: [], validWeights: [], validLeading: [], validFontFamilies: [] },
   textLikeInputTypes: [],
 });
 

package/eslint/index.mjs

@@ -21,6 +21,8 @@ import noMixedStyleAuthority from './rules/no-mixed-style-authority.mjs';
 import noBroadRdnaDisables from './rules/no-broad-rdna-disables.mjs';
 import noClippedShadow from './rules/no-clipped-shadow.mjs';
 import noPixelBorder from './rules/no-pixel-border.mjs';
+import noRawLineHeight from './rules/no-raw-line-height.mjs';
+import noRawFontFamily from './rules/no-raw-font-family.mjs';
 
 const plugin = {
   meta: {
@@ -42,6 +44,8 @@ const plugin = {
     'no-broad-rdna-disables': noBroadRdnaDisables,
     'no-clipped-shadow': noClippedShadow,
     'no-pixel-border': noPixelBorder,
+    'no-raw-line-height': noRawLineHeight,
+    'no-raw-font-family': noRawFontFamily,
   },
   configs: {},
 };
@@ -62,6 +66,8 @@ plugin.configs.recommended = {
     'rdna/no-hardcoded-motion': 'warn',
     'rdna/no-clipped-shadow': 'warn',
     'rdna/no-pixel-border': 'warn',
+    'rdna/no-raw-line-height': 'warn',
+    'rdna/no-raw-font-family': 'warn',
   },
 };
 
@@ -78,6 +84,8 @@ plugin.configs.internals = {
     'rdna/no-hardcoded-motion': 'warn',
     'rdna/no-clipped-shadow': 'warn',
     'rdna/no-pixel-border': 'warn',
+    'rdna/no-raw-line-height': 'warn',
+    'rdna/no-raw-font-family': 'warn',
   },
 };
 
@@ -95,6 +103,8 @@ plugin.configs['recommended-strict'] = {
     'rdna/no-hardcoded-motion': 'error',
     'rdna/no-clipped-shadow': 'error',
     'rdna/no-pixel-border': 'error',
+    'rdna/no-raw-line-height': 'error',
+    'rdna/no-raw-font-family': 'error',
     // no-viewport-breakpoints-in-window-layout is intentionally excluded —
     // it is RadOS-specific and must be scoped via eslint.rdna.config.mjs
   },

package/eslint/rules/no-raw-font-family.mjs

@@ -0,0 +1,91 @@
+/**
+ * rdna/no-raw-font-family
+ * Bans hardcoded font-family values in style props.
+ * Allows CSS variable references (var(--font-*)) and Tailwind font classes.
+ * Exempts files that import from @chenglou/pretext (canvas measurement needs literal names).
+ */
+import {
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+} from '../utils.mjs';
+
+// Valid Tailwind font-family utility classes (not checked here —
+// className font-* classes are already semantic aliases and always valid).
+// This rule focuses on style={{ fontFamily: ... }} enforcement.
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban hardcoded font-family in style props; require RDNA font tokens',
+    },
+    messages: {
+      hardcodedFontFamily:
+        'Hardcoded font-family in style prop. Use a CSS variable: var(--font-sans), var(--font-heading), var(--font-mono), var(--font-blackletter), var(--font-pixeloid).',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    // Check if this file imports from @chenglou/pretext — if so, exempt it entirely.
+    // Pretext needs literal font names for canvas measurement.
+    let hasPretextImport = false;
+
+    return {
+      ImportDeclaration(node) {
+        if (
+          node.source &&
+          typeof node.source.value === 'string' &&
+          node.source.value.startsWith('@chenglou/pretext')
+        ) {
+          hasPretextImport = true;
+        }
+      },
+      CallExpression(node) {
+        // Also check dynamic require('@chenglou/pretext')
+        if (
+          node.callee.name === 'require' &&
+          node.arguments.length > 0 &&
+          node.arguments[0].type === 'Literal' &&
+          typeof node.arguments[0].value === 'string' &&
+          node.arguments[0].value.startsWith('@chenglou/pretext')
+        ) {
+          hasPretextImport = true;
+        }
+      },
+      JSXAttribute(node) {
+        if (hasPretextImport) return;
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+    };
+  },
+};
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (key !== 'fontFamily') continue;
+
+    const val = prop.value;
+
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      // Allow any var(--font-*) reference
+      if (isAllowedCssVar(staticString, 'font-')) continue;
+      context.report({ node: val, messageId: 'hardcodedFontFamily' });
+      continue;
+    }
+
+    if (isDynamicTemplateLiteral(val)) {
+      context.report({ node: val, messageId: 'hardcodedFontFamily' });
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/no-raw-line-height.mjs

@@ -0,0 +1,119 @@
+/**
+ * rdna/no-raw-line-height
+ * Bans arbitrary line-height values in className and style props.
+ * Allows only RDNA token-mapped leading-* classes and CSS variable references.
+ */
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+} from '../utils.mjs';
+
+// Optional Tailwind modifier prefix: hover:, dark:, md:, focus:, etc. (stackable)
+const MOD = '(?:[\\w-]+:)*';
+
+// Matches arbitrary leading values: leading-[24px], leading-[1.4], leading-[1.4rem], etc.
+const ARBITRARY_LEADING_CLASS = new RegExp(`${MOD}leading-\\[[^\\]]+\\]`, 'g');
+
+// Token-mapped leading classes that are allowed
+const VALID_LEADING_CLASSES = new Set([
+  'leading-tight',
+  'leading-heading',
+  'leading-snug',
+  'leading-normal',
+  'leading-relaxed',
+  'leading-none',
+]);
+
+const validSuggestion = [...VALID_LEADING_CLASSES].join(', ');
+
+/**
+ * Strip all Tailwind modifier prefixes (hover:, dark:, md:, etc.) from a class.
+ */
+function stripModifiers(cls) {
+  return cls.replace(/^(?:[\w-]+:)+/, '');
+}
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary line-height values; require RDNA leading tokens',
+    },
+    messages: {
+      arbitraryLeading:
+        `Arbitrary line-height "{{raw}}" in className. Use an RDNA leading token: ${validSuggestion}.`,
+      hardcodedLineHeightStyle:
+        `Hardcoded line-height in style prop. Use a CSS variable: var(--leading-*).`,
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    ARBITRARY_LEADING_CLASS.lastIndex = 0;
+    let match;
+    while ((match = ARBITRARY_LEADING_CLASS.exec(value)) !== null) {
+      const bare = stripModifiers(match[0]);
+      // Allow if it's a valid token-mapped class (shouldn't match the regex, but defensive)
+      if (VALID_LEADING_CLASSES.has(bare)) continue;
+      context.report({
+        node,
+        messageId: 'arbitraryLeading',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (key !== 'lineHeight') continue;
+
+    const val = prop.value;
+
+    // Allow numeric literals that are unitless (CSS lineHeight as number)
+    // — still flag them; RDNA wants token usage
+    if (val.type === 'Literal' && typeof val.value === 'number') {
+      context.report({ node: val, messageId: 'hardcodedLineHeightStyle' });
+      continue;
+    }
+
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      if (isAllowedCssVar(staticString, 'leading-')) continue;
+      context.report({ node: val, messageId: 'hardcodedLineHeightStyle' });
+      continue;
+    }
+
+    if (isDynamicTemplateLiteral(val)) {
+      context.report({ node: val, messageId: 'hardcodedLineHeightStyle' });
+    }
+  }
+}
+
+export default rule;

package/fonts-core.css

@@ -0,0 +1,70 @@
+/* =============================================================================
+   fonts-core.css - Core token-system fonts (initial load)
+   Mondwest (body), Joystix (heading), PixelCode (mono)
+   ============================================================================= */
+
+/* Mondwest - Body font (must be downloaded separately)
+   Get it at: https://pangrampangram.com/products/bitmap-mondwest
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('./fonts/Mondwest.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('./fonts/Mondwest-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Joystix - Heading font
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Joystix Monospace';
+  src: url('./fonts/Joystix.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* PixelCode - Monospace font
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Bold-Italic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}

package/fonts-editorial.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   fonts-editorial.css - Display/editorial fonts (lazy load on app-window open)
+   Waves Blackletter CPC, Waves Tiny CPC, Pixeloid Sans
+   ============================================================================= */
+
+/* Waves Blackletter CPC - Decorative blackletter
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Waves Blackletter CPC';
+  src: url('./fonts/WavesBlackletterCPC-Base.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: optional;
+}
+
+/* Waves Tiny CPC - Decorative pixel caption
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Waves Tiny CPC';
+  src: url('./fonts/WavesTinyCPC-Extended.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: optional;
+}
+
+/* Pixeloid Sans - Informational pixel text (bylines, labels)
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Pixeloid Sans';
+  src: url('./fonts/PixeloidSans.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pixeloid Sans';
+  src: url('./fonts/PixeloidSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}