@you-agent-factory/components 0.0.0

package/src/recipes/widget-frame-content.tsx

@@ -0,0 +1,114 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+
+import {
+  WIDGET_FRAME_BODY_TEXT_CLASS,
+  WIDGET_FRAME_SECTION_HEADING_CLASS,
+  WIDGET_FRAME_SUBTITLE_CLASS,
+} from "./widget-frame-typography";
+
+const WIDGET_SUBTITLE_CLASS = cn("mt-0", WIDGET_FRAME_SUBTITLE_CLASS);
+const DETAIL_COPY_CLASS = cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS);
+const EMPTY_STATE_CLASS =
+  "grid min-h-60 items-start gap-1.5 rounded-2xl border border-dashed border-outline-variant bg-surface-container-low p-5 [&_h3]:m-0";
+const EMPTY_STATE_COMPACT_CLASS = "min-h-0";
+
+export interface WidgetSubtitleProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  children: ReactNode;
+}
+
+export function WidgetSubtitle({
+  as: Component = "p",
+  children,
+  className,
+  ...props
+}: WidgetSubtitleProps) {
+  return (
+    <Component className={cn(WIDGET_SUBTITLE_CLASS, className)} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export interface WidgetDetailCopyProps
+  extends HTMLAttributes<HTMLParagraphElement> {
+  children: ReactNode;
+}
+
+export function WidgetDetailCopy({
+  children,
+  className,
+  ...props
+}: WidgetDetailCopyProps) {
+  return (
+    <p className={cn(DETAIL_COPY_CLASS, className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export interface WidgetEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  compact?: boolean;
+}
+
+export function WidgetEmptyState({
+  children,
+  className,
+  compact = false,
+  ...props
+}: WidgetEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        EMPTY_STATE_CLASS,
+        compact && EMPTY_STATE_COMPACT_CLASS,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface WidgetEmptyStateTitleProps
+  extends HTMLAttributes<HTMLElement> {
+  as?: ElementType;
+  children: ReactNode;
+}
+
+export function WidgetEmptyStateTitle({
+  as: Component = "h3",
+  children,
+  className,
+  ...props
+}: WidgetEmptyStateTitleProps) {
+  return (
+    <Component
+      className={cn(WIDGET_FRAME_SECTION_HEADING_CLASS, className)}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export interface WidgetEmptyStateTextProps
+  extends HTMLAttributes<HTMLParagraphElement> {
+  children: ReactNode;
+}
+
+export function WidgetEmptyStateText({
+  children,
+  className,
+  ...props
+}: WidgetEmptyStateTextProps) {
+  return (
+    <p className={cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS, className)} {...props}>
+      {children}
+    </p>
+  );
+}

package/src/recipes/widget-frame-disclosure.tsx

@@ -0,0 +1,161 @@
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../utilities/cn";
+
+import { WIDGET_FRAME_BODY_TEXT_CLASS } from "./widget-frame-typography";
+
+const WIDGET_FRAME_DISCLOSURE_CLASS = "grid min-w-0 gap-2.5";
+const WIDGET_FRAME_DISCLOSURE_TRIGGER_CLASS = cn(
+  "inline-flex min-h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-outline bg-surface-container-high px-2.5 py-2 text-on-surface-variant transition hover:border-outline-variant hover:bg-af-overlay hover:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-af-accent disabled:cursor-not-allowed disabled:border-outline disabled:bg-surface-container-low disabled:text-on-surface-disabled",
+  WIDGET_FRAME_BODY_TEXT_CLASS,
+);
+const WIDGET_FRAME_DISCLOSURE_ICON_CLASS =
+  "h-3.5 w-3.5 shrink-0 text-current transition-transform duration-150";
+
+export interface WidgetFrameDisclosureProps
+  extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function WidgetFrameDisclosure({
+  children,
+  className,
+  ...props
+}: WidgetFrameDisclosureProps) {
+  return (
+    <div className={cn(WIDGET_FRAME_DISCLOSURE_CLASS, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export interface WidgetFrameDisclosureIconProps {
+  expanded: boolean;
+  className?: string;
+}
+
+export function WidgetFrameDisclosureIcon({
+  className,
+  expanded,
+}: WidgetFrameDisclosureIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        WIDGET_FRAME_DISCLOSURE_ICON_CLASS,
+        expanded ? "rotate-180" : "rotate-0",
+        className,
+      )}
+      fill="none"
+      focusable="false"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 6l4 4 4-4"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.8"
+      />
+    </svg>
+  );
+}
+
+type WidgetFrameDisclosureTriggerBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "aria-expanded" | "aria-controls" | "children" | "type"
+> & {
+  controlsID: string;
+  expanded: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  type?: "button";
+};
+
+type WidgetFrameDisclosureTriggerWithLabelProps =
+  WidgetFrameDisclosureTriggerBaseProps & {
+    children: ReactNode;
+    "aria-label"?: string;
+  };
+
+type WidgetFrameDisclosureTriggerIconOnlyProps =
+  WidgetFrameDisclosureTriggerBaseProps & {
+    children?: never;
+    "aria-label": string;
+  };
+
+export type WidgetFrameDisclosureTriggerProps =
+  | WidgetFrameDisclosureTriggerWithLabelProps
+  | WidgetFrameDisclosureTriggerIconOnlyProps;
+
+export const WidgetFrameDisclosureTrigger = forwardRef<
+  HTMLButtonElement,
+  WidgetFrameDisclosureTriggerProps
+>(function WidgetFrameDisclosureTrigger(
+  {
+    children,
+    className,
+    controlsID,
+    expanded,
+    onClick,
+    onExpandedChange,
+    type = "button",
+    ...props
+  },
+  ref,
+) {
+  const handleClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"] = (
+    event,
+  ) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      onExpandedChange?.(!expanded);
+    }
+  };
+
+  return (
+    <button
+      aria-controls={controlsID}
+      aria-expanded={expanded}
+      className={cn(WIDGET_FRAME_DISCLOSURE_TRIGGER_CLASS, className)}
+      onClick={handleClick}
+      ref={ref}
+      type={type}
+      {...props}
+    >
+      <WidgetFrameDisclosureIcon expanded={expanded} />
+      {children}
+    </button>
+  );
+});
+
+export interface WidgetFrameDisclosurePanelProps
+  extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  expanded: boolean;
+  id: string;
+}
+
+export function WidgetFrameDisclosurePanel({
+  children,
+  className,
+  expanded,
+  id,
+  ...props
+}: WidgetFrameDisclosurePanelProps) {
+  return (
+    <div
+      className={cn("min-w-0", className)}
+      hidden={!expanded}
+      id={id}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/recipes/widget-frame-layout.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from "react";
+
+import { cn } from "../utilities/cn";
+
+import { WIDGET_FRAME_SUPPORTING_LABELS_CLASS } from "./widget-frame-typography";
+
+export const WIDGET_FRAME_MIN_WIDTH_CLASS = "min-w-0";
+
+export const WIDGET_FRAME_WIDE_BODY_CLASS = "min-h-72";
+
+export const WIDGET_FRAME_RESPONSIVE_SHELL_CLASS = "min-w-0 w-full";
+
+export const WIDGET_FRAME_STORY_SHELL_DATA_ATTR = "data-widget-frame-story-shell";
+
+export const WIDGET_FRAME_OVERFLOW_TOLERANCE_PX = 1;
+
+/** Detail-card layout recipe for description lists inside widget frames. */
+export const widgetFrameDetailCardClass = cn(
+  "[&_dd]:m-0 [&_dl]:m-0 [&_dl]:grid [&_dl]:gap-3 [&_dl_div:first-child]:border-t-0 [&_dl_div:first-child]:pt-0 [&_dl_div]:border-t [&_dl_div]:border-outline [&_dl_div]:pt-3 [&_dt]:mb-1 [&_h3]:mt-0",
+  WIDGET_FRAME_SUPPORTING_LABELS_CLASS,
+);
+
+export function widgetFrameStoryShellStyle(maxWidth: string): {
+  style: CSSProperties;
+} {
+  return {
+    style: {
+      maxWidth,
+      padding: "1rem",
+      width: "100%",
+    },
+  };
+}
+
+export function widgetFrameHasNoHorizontalOverflow(
+  element: HTMLElement,
+  tolerancePx = WIDGET_FRAME_OVERFLOW_TOLERANCE_PX,
+): boolean {
+  return element.scrollWidth <= element.clientWidth + tolerancePx;
+}

package/src/recipes/widget-frame-skeleton.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+export function WidgetFrameSkeleton({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("animate-pulse rounded-xl bg-af-overlay", className)}
+      {...props}
+    />
+  );
+}

package/src/recipes/widget-frame-states.tsx

@@ -0,0 +1,99 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+
+import { WidgetFrameSkeleton } from "./widget-frame-skeleton";
+
+const WIDGET_STATE_PANEL_CLASS = "grid gap-2";
+const WIDGET_ERROR_STATE_CLASS =
+  "rounded-2xl border border-af-danger-border bg-error-container p-5 text-on-error-container";
+const WIDGET_SUCCESS_STATE_CLASS =
+  "rounded-2xl border border-af-success-border bg-success-container p-5 text-on-success-container";
+const WIDGET_LOADING_PLACEHOLDER_CLASS = "grid gap-2 pt-2";
+
+export interface WidgetLoadingStateProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  placeholder?: ReactNode;
+  showDefaultPlaceholder?: boolean;
+}
+
+export function WidgetLoadingState({
+  children,
+  className,
+  placeholder,
+  showDefaultPlaceholder = true,
+  ...props
+}: WidgetLoadingStateProps) {
+  const resolvedPlaceholder =
+    placeholder ??
+    (showDefaultPlaceholder ? (
+      <>
+        <WidgetFrameSkeleton className="h-4 w-full max-w-48" />
+        <WidgetFrameSkeleton className="h-24 w-full" />
+        <WidgetFrameSkeleton className="h-4 w-full max-w-48" />
+      </>
+    ) : null);
+
+  return (
+    <div
+      aria-busy="true"
+      className={cn(WIDGET_STATE_PANEL_CLASS, className)}
+      role="status"
+      {...props}
+    >
+      {children}
+      {resolvedPlaceholder ? (
+        <div
+          aria-hidden="true"
+          className={WIDGET_LOADING_PLACEHOLDER_CLASS}
+        >
+          {resolvedPlaceholder}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export interface WidgetErrorStateProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function WidgetErrorState({
+  children,
+  className,
+  ...props
+}: WidgetErrorStateProps) {
+  return (
+    <div
+      className={cn(WIDGET_ERROR_STATE_CLASS, WIDGET_STATE_PANEL_CLASS, className)}
+      role="alert"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface WidgetSuccessStateProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function WidgetSuccessState({
+  children,
+  className,
+  ...props
+}: WidgetSuccessStateProps) {
+  return (
+    <div
+      className={cn(
+        WIDGET_SUCCESS_STATE_CLASS,
+        WIDGET_STATE_PANEL_CLASS,
+        className,
+      )}
+      role="status"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/recipes/widget-frame-typography.ts

@@ -0,0 +1,19 @@
+/** Section heading typography for widget frame titles and empty-state headings. */
+export const WIDGET_FRAME_SECTION_HEADING_CLASS =
+  "text-title-large uppercase text-on-surface";
+
+/** Body copy typography for widget frame detail regions. */
+export const WIDGET_FRAME_BODY_TEXT_CLASS =
+  "text-body-medium text-on-surface-variant";
+
+/** Monospace subtitle typography for metric and metadata values. */
+export const WIDGET_FRAME_SUBTITLE_CLASS =
+  "font-mono text-display-small text-on-surface-variant [overflow-wrap:anywhere]";
+
+/** Supporting label typography for description-list terms. */
+export const WIDGET_FRAME_SUPPORTING_LABEL_CLASS =
+  "text-label-medium uppercase text-on-surface-subtle";
+
+/** Description-list label styling for widget detail cards. */
+export const WIDGET_FRAME_SUPPORTING_LABELS_CLASS =
+  "[&_dt]:text-label-medium [&_dt]:uppercase [&_dt]:text-on-surface-subtle";

package/src/recipes/widget-frame.tsx

@@ -0,0 +1,84 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+
+import { WIDGET_FRAME_BODY_TEXT_CLASS } from "./widget-frame-typography";
+import {
+  WIDGET_FRAME_MIN_WIDTH_CLASS,
+  WIDGET_FRAME_WIDE_BODY_CLASS,
+  widgetFrameDetailCardClass,
+} from "./widget-frame-layout";
+
+const WIDGET_FRAME_SHELL_CLASS =
+  "flex min-w-0 flex-col rounded-lg border border-outline bg-surface-container-high text-on-surface shadow-af-card";
+const WIDGET_FRAME_SCROLL_CLASS = "overflow-hidden";
+const WIDGET_FRAME_HEADER_CLASS =
+  "relative z-10 flex min-h-13 shrink-0 items-center justify-between gap-3 border-b border-outline bg-surface-container-high px-3.5 py-3";
+const WIDGET_FRAME_HEADER_TOOLS_CLASS =
+  "flex min-w-0 shrink-0 items-center gap-2";
+const WIDGET_FRAME_BODY_SCROLL_CLASS = "min-h-0 flex-1 overflow-auto";
+const WIDGET_FRAME_BODY_CLASS = cn(
+  "grid min-h-0 gap-2.5 px-3.5 pt-3.5 pb-4 [&>*]:pb-1 [&_p]:m-0",
+  WIDGET_FRAME_BODY_TEXT_CLASS,
+);
+
+export interface WidgetFrameProps {
+  bodyClassName?: string;
+  bodyProps?: HTMLAttributes<HTMLDivElement>;
+  bodyScroll?: boolean;
+  children: ReactNode;
+  className?: string;
+  headerAction?: ReactNode;
+  title: string;
+  wide?: boolean;
+}
+
+export function WidgetFrame({
+  bodyClassName,
+  bodyProps,
+  bodyScroll = true,
+  children,
+  className,
+  headerAction,
+  title,
+  wide = false,
+}: WidgetFrameProps) {
+  const cardClassName = cn(
+    WIDGET_FRAME_SHELL_CLASS,
+    WIDGET_FRAME_MIN_WIDTH_CLASS,
+    widgetFrameDetailCardClass,
+    wide && WIDGET_FRAME_WIDE_BODY_CLASS,
+    bodyScroll && WIDGET_FRAME_SCROLL_CLASS,
+    className,
+  );
+  const cardBodyClassName = cn(WIDGET_FRAME_BODY_CLASS, bodyClassName);
+  const bodyClassNames = cn(
+    "min-h-0 flex-1",
+    bodyScroll && WIDGET_FRAME_BODY_SCROLL_CLASS,
+    cardBodyClassName,
+  );
+
+  return (
+    <article aria-label={title} className={cardClassName}>
+      <header className={WIDGET_FRAME_HEADER_CLASS}>
+        <div className="min-w-0 flex-1">
+          <h3 className="m-0 min-w-0 flex-1 text-title-large uppercase text-on-surface [overflow-wrap:anywhere]">
+            {title}
+          </h3>
+        </div>
+        <div className={WIDGET_FRAME_HEADER_TOOLS_CLASS}>
+          {headerAction ?? (
+            <span
+              aria-hidden="true"
+              className="block h-10 w-10 shrink-0"
+              data-widget-frame-header-action-spacer="true"
+            />
+          )}
+        </div>
+      </header>
+      <div className={bodyClassNames} {...bodyProps}>
+        {children}
+      </div>
+    </article>
+  );
+}

package/src/styles/color-palette-presets.css

@@ -0,0 +1,167 @@
+/*
+ * Predefined Material-style palette presets (US-008).
+ *
+ * Each preset overrides af-foundation-* keys on :root via data-color-palette.
+ * Role tokens in color-role-tokens.css and aliases cascade from these keys.
+ */
+
+:root,
+[data-color-palette="factory-dark"] {
+  --color-af-foundation-background: #050b10;
+  --color-af-foundation-background-start: #090f15;
+  --color-af-foundation-background-mid: #0c151d;
+  --color-af-foundation-canvas: #050b10;
+  --color-af-foundation-surface: #181f2b;
+  --color-af-foundation-ink: #f7f2e8;
+  --color-af-foundation-code-ink: #d5fbff;
+  --color-af-foundation-overlay: #ffffff;
+  --color-af-foundation-accent: #f5c76f;
+  --color-af-foundation-accent-strong: #ecbf58;
+  --color-af-foundation-accent-ink: #1a2228;
+  --color-af-foundation-info: #5ccadd;
+  --color-af-foundation-info-strong: #5097be;
+  --color-af-foundation-info-bright: #7dd3fc;
+  --color-af-foundation-info-ink: #b5edf4;
+  --color-af-foundation-secondary-accent: #507f8c;
+  --color-af-foundation-secondary-accent-ink: #8aaeb8;
+  --color-af-foundation-tertiary-accent: #6d6290;
+  --color-af-foundation-tertiary-accent-ink: #a89ec4;
+  --color-af-foundation-success: #57c18b;
+  --color-af-foundation-success-ink: #a7f0c4;
+  --color-af-foundation-warning: #f0b15a;
+  --color-af-foundation-warning-ink: #ffd8a3;
+  --color-af-foundation-danger: #f05f5f;
+  --color-af-foundation-danger-bright: #ff8a8a;
+  --color-af-foundation-danger-ink: #ffb2b2;
+  --color-af-foundation-worker: #b68cff;
+  --color-af-foundation-worker-ink: #dfccff;
+  --color-af-shadow: #000000;
+}
+
+[data-color-palette="factory-light"] {
+  --color-af-foundation-background: #f4f1e8;
+  --color-af-foundation-background-start: #ece8dc;
+  --color-af-foundation-background-mid: #e4ded0;
+  --color-af-foundation-canvas: #faf8f3;
+  --color-af-foundation-surface: #ffffff;
+  --color-af-foundation-ink: #1a2228;
+  --color-af-foundation-code-ink: #0f4c5c;
+  --color-af-foundation-overlay: #000000;
+  --color-af-foundation-accent: #f5c76f;
+  --color-af-foundation-accent-strong: #c9972e;
+  --color-af-foundation-accent-ink: #1a2228;
+  --color-af-foundation-info: #2f8fad;
+  --color-af-foundation-info-strong: #256f89;
+  --color-af-foundation-info-bright: #4aa9c9;
+  --color-af-foundation-info-ink: #1f6178;
+  --color-af-foundation-secondary-accent: #4a7a87;
+  --color-af-foundation-secondary-accent-ink: #355962;
+  --color-af-foundation-tertiary-accent: #5c5280;
+  --color-af-foundation-tertiary-accent-ink: #433b61;
+  --color-af-foundation-success: #2f9a66;
+  --color-af-foundation-success-ink: #1f6f49;
+  --color-af-foundation-warning: #c9852d;
+  --color-af-foundation-warning-ink: #8f5d16;
+  --color-af-foundation-danger: #d94848;
+  --color-af-foundation-danger-bright: #ef6b6b;
+  --color-af-foundation-danger-ink: #9f2f2f;
+  --color-af-foundation-worker: #7f63b8;
+  --color-af-foundation-worker-ink: #5d4788;
+  --color-af-shadow: #1a2228;
+}
+
+[data-color-palette="material-baseline"] {
+  --color-af-foundation-background: #141218;
+  --color-af-foundation-background-start: #17151b;
+  --color-af-foundation-background-mid: #1b1920;
+  --color-af-foundation-canvas: #0f0d12;
+  --color-af-foundation-surface: #1d1b20;
+  --color-af-foundation-ink: #e6e0e9;
+  --color-af-foundation-code-ink: #c8f0ff;
+  --color-af-foundation-overlay: #ffffff;
+  --color-af-foundation-accent: #f5c76f;
+  --color-af-foundation-accent-strong: #ecbf58;
+  --color-af-foundation-accent-ink: #1a2228;
+  --color-af-foundation-info: #67cbe0;
+  --color-af-foundation-info-strong: #4f9db8;
+  --color-af-foundation-info-bright: #8adcf0;
+  --color-af-foundation-info-ink: #b8edf8;
+  --color-af-foundation-secondary-accent: #5a8894;
+  --color-af-foundation-secondary-accent-ink: #94b4bd;
+  --color-af-foundation-tertiary-accent: #7a7198;
+  --color-af-foundation-tertiary-accent-ink: #b0a8c8;
+  --color-af-foundation-success: #63c995;
+  --color-af-foundation-success-ink: #a8f0c8;
+  --color-af-foundation-warning: #efb865;
+  --color-af-foundation-warning-ink: #ffddb0;
+  --color-af-foundation-danger: #ef6a6a;
+  --color-af-foundation-danger-bright: #ff9494;
+  --color-af-foundation-danger-ink: #ffb8b8;
+  --color-af-foundation-worker: #c0a8f0;
+  --color-af-foundation-worker-ink: #e4d8ff;
+  --color-af-shadow: #000000;
+}
+
+[data-color-palette="slate"] {
+  --color-af-foundation-background: #0d1117;
+  --color-af-foundation-background-start: #101620;
+  --color-af-foundation-background-mid: #131b28;
+  --color-af-foundation-canvas: #070b10;
+  --color-af-foundation-surface: #161b22;
+  --color-af-foundation-ink: #e6edf3;
+  --color-af-foundation-code-ink: #c7e7ff;
+  --color-af-foundation-overlay: #ffffff;
+  --color-af-foundation-accent: #f5c76f;
+  --color-af-foundation-accent-strong: #ecbf58;
+  --color-af-foundation-accent-ink: #1a2228;
+  --color-af-foundation-info: #58b8d8;
+  --color-af-foundation-info-strong: #468ea8;
+  --color-af-foundation-info-bright: #7ecbf0;
+  --color-af-foundation-info-ink: #b0e0f2;
+  --color-af-foundation-secondary-accent: #6e9bae;
+  --color-af-foundation-secondary-accent-ink: #9bb8c8;
+  --color-af-foundation-tertiary-accent: #7b8cde;
+  --color-af-foundation-tertiary-accent-ink: #adb6e8;
+  --color-af-foundation-success: #56b888;
+  --color-af-foundation-success-ink: #a4e8c4;
+  --color-af-foundation-warning: #e8ad58;
+  --color-af-foundation-warning-ink: #ffd49a;
+  --color-af-foundation-danger: #e86262;
+  --color-af-foundation-danger-bright: #ff8e8e;
+  --color-af-foundation-danger-ink: #ffb0b0;
+  --color-af-foundation-worker: #a898f0;
+  --color-af-foundation-worker-ink: #d8d0ff;
+  --color-af-shadow: #000000;
+}
+
+[data-color-palette="olive"] {
+  --color-af-foundation-background: #13150f;
+  --color-af-foundation-background-start: #171912;
+  --color-af-foundation-background-mid: #1b1e15;
+  --color-af-foundation-canvas: #0a0c08;
+  --color-af-foundation-surface: #1a1d15;
+  --color-af-foundation-ink: #eef2e4;
+  --color-af-foundation-code-ink: #d0f5e8;
+  --color-af-foundation-overlay: #ffffff;
+  --color-af-foundation-accent: #f5c76f;
+  --color-af-foundation-accent-strong: #ecbf58;
+  --color-af-foundation-accent-ink: #1a2228;
+  --color-af-foundation-info: #58b0a0;
+  --color-af-foundation-info-strong: #458a7d;
+  --color-af-foundation-info-bright: #7ecfb8;
+  --color-af-foundation-info-ink: #b0e8d8;
+  --color-af-foundation-secondary-accent: #6a8f72;
+  --color-af-foundation-secondary-accent-ink: #98b8a0;
+  --color-af-foundation-tertiary-accent: #8a7d5c;
+  --color-af-foundation-tertiary-accent-ink: #b8aa88;
+  --color-af-foundation-success: #62b878;
+  --color-af-foundation-success-ink: #a8e8bc;
+  --color-af-foundation-warning: #e8b058;
+  --color-af-foundation-warning-ink: #ffd898;
+  --color-af-foundation-danger: #e06868;
+  --color-af-foundation-danger-ink: #ffb0b0;
+  --color-af-foundation-danger-bright: #ff9090;
+  --color-af-foundation-worker: #b0a070;
+  --color-af-foundation-worker-ink: #e0d4b0;
+  --color-af-shadow: #000000;
+}