@misoto22/kioku-ui 0.0.0

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,139 @@
+import * as stylex from '@stylexjs/stylex';
+import {useState, type ButtonHTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    borderRadius: semanticTokens.radiusFull,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    display: 'inline-flex',
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    gap: semanticTokens.spacingSm,
+    justifyContent: 'center',
+    minHeight: semanticTokens.sizeHitTarget,
+    minWidth: semanticTokens.sizeHitTarget,
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingXs,
+    ':active:not(:disabled)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayActive}, ${semanticTokens.colorOverlayActive})`,
+    },
+    ':disabled': {color: semanticTokens.colorDisabledText},
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':hover:not(:disabled)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayHover}, ${semanticTokens.colorOverlayHover})`,
+    },
+  },
+  track: {
+    alignItems: 'center',
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    borderColor: semanticTokens.borderDefault,
+    borderRadius: semanticTokens.radiusFull,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: semanticTokens.spacingLg,
+    justifyContent: 'flex-start',
+    width: semanticTokens.sizeControlLg,
+  },
+  trackOn: {
+    backgroundColor: semanticTokens.colorAccent,
+    borderColor: semanticTokens.colorAccent,
+    justifyContent: 'flex-end',
+  },
+  trackDisabled: {
+    backgroundColor: semanticTokens.colorDisabledSurface,
+    borderColor: semanticTokens.borderDisabled,
+  },
+  thumb: {
+    backgroundColor: semanticTokens.colorSurfaceRaised,
+    borderRadius: semanticTokens.radiusFull,
+    boxShadow: semanticTokens.elevationLow,
+    height: semanticTokens.spacingMd,
+    width: semanticTokens.spacingMd,
+  },
+  thumbDisabled: {backgroundColor: semanticTokens.colorDisabledText},
+});
+
+type SharedToggleProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-checked' | 'aria-pressed' | 'className' | 'onChange' | 'role'
+> & {
+  readonly onPressedChange?: (pressed: boolean) => void;
+};
+
+type ControlledToggleProps = SharedToggleProps & {
+  readonly defaultPressed?: never;
+  readonly onPressedChange: (pressed: boolean) => void;
+  readonly pressed: boolean;
+};
+
+type UncontrolledToggleProps = SharedToggleProps & {
+  readonly defaultPressed?: boolean;
+  readonly pressed?: never;
+};
+
+export type ToggleProps = ControlledToggleProps | UncontrolledToggleProps;
+
+export function Toggle({
+  children,
+  defaultPressed = false,
+  disabled,
+  onClick,
+  onPressedChange,
+  pressed,
+  type = 'button',
+  ...props
+}: ToggleProps) {
+  const [internalPressed, setInternalPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+
+  return (
+    <button
+      {...props}
+      aria-checked={isPressed}
+      disabled={disabled}
+      onClick={(event) => {
+        const nextPressed = !isPressed;
+        if (pressed === undefined) {
+          setInternalPressed(nextPressed);
+        }
+        onPressedChange?.(nextPressed);
+        onClick?.(event);
+      }}
+      role="switch"
+      {...stylex.props(styles.base)}
+      type={type}
+    >
+      <span
+        aria-hidden="true"
+        {...stylex.props(
+          styles.track,
+          isPressed ? styles.trackOn : undefined,
+          disabled ? styles.trackDisabled : undefined,
+        )}
+      >
+        <span
+          aria-hidden="true"
+          {...stylex.props(
+            styles.thumb,
+            disabled ? styles.thumbDisabled : undefined,
+          )}
+        />
+      </span>
+      {children}
+    </button>
+  );
+}

package/src/Toggle/index.ts

@@ -0,0 +1 @@
+export {Toggle, type ToggleProps} from './Toggle.js';

package/src/VisuallyHidden/VisuallyHidden.doc.ts

@@ -0,0 +1,18 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const visuallyHiddenDoc = {
+  name: 'VisuallyHidden',
+  description:
+    'Keeps text available to assistive technology while hiding it visually.',
+  props: [
+    {
+      name: 'children',
+      description: 'Accessible text to hide visually.',
+    },
+  ],
+  inheritedProps: [
+    'HTMLAttributes<HTMLSpanElement> except className and children',
+  ],
+  example: '<button><VisuallyHidden>Open navigation</VisuallyHidden></button>',
+  storyId: 'core-visually-hidden--default',
+} satisfies ComponentDoc;

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,28 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+const styles = stylex.create({
+  base: {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: 1,
+  },
+});
+
+export type VisuallyHiddenProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'className'
+>;
+
+export function VisuallyHidden({children, ...props}: VisuallyHiddenProps) {
+  return (
+    <span {...props} {...stylex.props(styles.base)}>
+      {children}
+    </span>
+  );
+}

package/src/VisuallyHidden/index.ts

@@ -0,0 +1 @@
+export {VisuallyHidden, type VisuallyHiddenProps} from './VisuallyHidden.js';

package/src/authoring.stylex.ts

@@ -0,0 +1,76 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const semanticTokens = stylex.defineVars({
+  colorCanvas: 'var(--kioku-ui-color-canvas)',
+  colorSurface: 'var(--kioku-ui-color-surface)',
+  colorSurfaceRaised: 'var(--kioku-ui-color-surface-raised)',
+  colorSurfaceMuted: 'var(--kioku-ui-color-surface-muted)',
+  colorText: 'var(--kioku-ui-color-text)',
+  colorTextSecondary: 'var(--kioku-ui-color-text-secondary)',
+  colorTextMuted: 'var(--kioku-ui-color-text-muted)',
+  colorTextOnAccent: 'var(--kioku-ui-color-text-on-accent)',
+  colorAccent: 'var(--kioku-ui-color-accent)',
+  colorAccentHover: 'var(--kioku-ui-color-accent-hover)',
+  colorAccentActive: 'var(--kioku-ui-color-accent-active)',
+  colorOverlayHover: 'var(--kioku-ui-color-overlay-hover)',
+  colorOverlayActive: 'var(--kioku-ui-color-overlay-active)',
+  colorDisabledSurface: 'var(--kioku-ui-color-disabled-surface)',
+  colorDisabledText: 'var(--kioku-ui-color-disabled-text)',
+  colorFocus: 'var(--kioku-ui-color-focus)',
+  borderDefault: 'var(--kioku-ui-border-default)',
+  borderStrong: 'var(--kioku-ui-border-strong)',
+  borderInteractive: 'var(--kioku-ui-border-interactive)',
+  borderDisabled: 'var(--kioku-ui-border-disabled)',
+  borderWidth: 'var(--kioku-ui-border-width)',
+  borderStyle: 'var(--kioku-ui-border-style)',
+  statusInfoSurface: 'var(--kioku-ui-status-info-surface)',
+  statusInfoText: 'var(--kioku-ui-status-info-text)',
+  statusSuccessSurface: 'var(--kioku-ui-status-success-surface)',
+  statusSuccessText: 'var(--kioku-ui-status-success-text)',
+  statusWarningSurface: 'var(--kioku-ui-status-warning-surface)',
+  statusWarningText: 'var(--kioku-ui-status-warning-text)',
+  statusDangerSurface: 'var(--kioku-ui-status-danger-surface)',
+  statusDangerText: 'var(--kioku-ui-status-danger-text)',
+  focusWidth: 'var(--kioku-ui-focus-width)',
+  focusOffset: 'var(--kioku-ui-focus-offset)',
+  fontFamilyBody: 'var(--kioku-ui-typography-font-family-body)',
+  fontFamilyHeading: 'var(--kioku-ui-typography-font-family-heading)',
+  fontFamilyDisplay: 'var(--kioku-ui-typography-font-family-display)',
+  fontFamilyMono: 'var(--kioku-ui-typography-font-family-mono)',
+  fontFeatureSettings: 'var(--kioku-ui-typography-font-feature-settings)',
+  fontSizeXs: 'var(--kioku-ui-typography-font-size-xs)',
+  fontSizeSm: 'var(--kioku-ui-typography-font-size-sm)',
+  fontSizeMd: 'var(--kioku-ui-typography-font-size-md)',
+  fontSizeLg: 'var(--kioku-ui-typography-font-size-lg)',
+  fontSizeXl: 'var(--kioku-ui-typography-font-size-xl)',
+  fontSize2xl: 'var(--kioku-ui-typography-font-size2xl)',
+  fontWeightRegular: 'var(--kioku-ui-typography-font-weight-regular)',
+  fontWeightMedium: 'var(--kioku-ui-typography-font-weight-medium)',
+  fontWeightStrong: 'var(--kioku-ui-typography-font-weight-strong)',
+  lineHeightBody: 'var(--kioku-ui-typography-line-height-body)',
+  lineHeightHeading: 'var(--kioku-ui-typography-line-height-heading)',
+  spacingXs: 'var(--kioku-ui-spacing-xs)',
+  spacingSm: 'var(--kioku-ui-spacing-sm)',
+  spacingMd: 'var(--kioku-ui-spacing-md)',
+  spacingLg: 'var(--kioku-ui-spacing-lg)',
+  spacingXl: 'var(--kioku-ui-spacing-xl)',
+  spacing2xl: 'var(--kioku-ui-spacing-2xl)',
+  radiusInner: 'var(--kioku-ui-radius-inner)',
+  radiusElement: 'var(--kioku-ui-radius-element)',
+  radiusContainer: 'var(--kioku-ui-radius-container)',
+  radiusPage: 'var(--kioku-ui-radius-page)',
+  radiusFull: 'var(--kioku-ui-radius-full)',
+  sizeControlSm: 'var(--kioku-ui-size-control-sm)',
+  sizeControlMd: 'var(--kioku-ui-size-control-md)',
+  sizeControlLg: 'var(--kioku-ui-size-control-lg)',
+  sizeHitTarget: 'var(--kioku-ui-size-hit-target)',
+  elevationLow: 'var(--kioku-ui-elevation-low)',
+  elevationMedium: 'var(--kioku-ui-elevation-medium)',
+  elevationHigh: 'var(--kioku-ui-elevation-high)',
+  textureGrain: 'var(--kioku-ui-texture-grain)',
+  durationFast: 'var(--kioku-ui-motion-duration-fast)',
+  durationModerate: 'var(--kioku-ui-motion-duration-moderate)',
+  durationSlow: 'var(--kioku-ui-motion-duration-slow)',
+  easingStandard: 'var(--kioku-ui-motion-easing-standard)',
+  easingEmphasized: 'var(--kioku-ui-motion-easing-emphasized)',
+});

package/src/docs/index.ts

@@ -0,0 +1,122 @@
+import {alertDoc} from '../Alert/Alert.doc.js';
+import {asyncStateDoc} from '../AsyncState/AsyncState.doc.js';
+import {badgeDoc} from '../Badge/Badge.doc.js';
+import {buttonDoc} from '../Button/Button.doc.js';
+import {cardDoc} from '../Card/Card.doc.js';
+import {cardFooterDoc} from '../CardFooter/CardFooter.doc.js';
+import {cardHeaderDoc} from '../CardHeader/CardHeader.doc.js';
+import {centerDoc} from '../Center/Center.doc.js';
+import {dividerDoc} from '../Divider/Divider.doc.js';
+import {emptyStateDoc} from '../EmptyState/EmptyState.doc.js';
+import {fieldDoc} from '../Field/Field.doc.js';
+import {gridDoc} from '../Grid/Grid.doc.js';
+import {headingDoc} from '../Heading/Heading.doc.js';
+import {iconButtonDoc} from '../IconButton/IconButton.doc.js';
+import {metricGridDoc} from '../MetricGrid/MetricGrid.doc.js';
+import {sectionDoc} from '../Section/Section.doc.js';
+import {segmentedControlDoc} from '../SegmentedControl/SegmentedControl.doc.js';
+import {skeletonDoc} from '../Skeleton/Skeleton.doc.js';
+import {spinnerDoc} from '../Spinner/Spinner.doc.js';
+import {stackDoc} from '../Stack/Stack.doc.js';
+import {statusDotDoc} from '../StatusDot/StatusDot.doc.js';
+import {
+  tableBodyDoc,
+  tableCaptionDoc,
+  tableCellDoc,
+  tableDoc,
+  tableHeadDoc,
+  tableHeaderCellDoc,
+  tableRowDoc,
+} from '../Table/Table.doc.js';
+import {textAreaDoc} from '../TextArea/TextArea.doc.js';
+import {textDoc} from '../Text/Text.doc.js';
+import {textInputDoc} from '../TextInput/TextInput.doc.js';
+import {toggleDoc} from '../Toggle/Toggle.doc.js';
+import {visuallyHiddenDoc} from '../VisuallyHidden/VisuallyHidden.doc.js';
+import {linkDoc, linkProviderDoc} from '../navigation/LinkProvider.doc.js';
+import {themeProviderDoc} from '../theme/Theme.doc.js';
+import type {ComponentDoc} from './types.js';
+
+export {
+  cardDoc,
+  cardFooterDoc,
+  cardHeaderDoc,
+  centerDoc,
+  dividerDoc,
+  gridDoc,
+  headingDoc,
+  sectionDoc,
+  stackDoc,
+  textDoc,
+  visuallyHiddenDoc,
+  alertDoc,
+  asyncStateDoc,
+  badgeDoc,
+  buttonDoc,
+  emptyStateDoc,
+  fieldDoc,
+  iconButtonDoc,
+  metricGridDoc,
+  segmentedControlDoc,
+  skeletonDoc,
+  spinnerDoc,
+  statusDotDoc,
+  tableDoc,
+  tableCaptionDoc,
+  tableHeadDoc,
+  tableBodyDoc,
+  tableRowDoc,
+  tableHeaderCellDoc,
+  tableCellDoc,
+  textAreaDoc,
+  textInputDoc,
+  toggleDoc,
+  linkDoc,
+  linkProviderDoc,
+  themeProviderDoc,
+};
+export {
+  validateComponentDoc,
+  type ComponentDoc,
+  type ComponentDocField,
+  type ComponentDocProp,
+} from './types.js';
+
+export const componentDocs: readonly ComponentDoc[] = Object.freeze([
+  textDoc,
+  headingDoc,
+  stackDoc,
+  gridDoc,
+  sectionDoc,
+  cardDoc,
+  cardHeaderDoc,
+  cardFooterDoc,
+  dividerDoc,
+  centerDoc,
+  visuallyHiddenDoc,
+  buttonDoc,
+  iconButtonDoc,
+  badgeDoc,
+  statusDotDoc,
+  fieldDoc,
+  textInputDoc,
+  textAreaDoc,
+  toggleDoc,
+  segmentedControlDoc,
+  emptyStateDoc,
+  asyncStateDoc,
+  spinnerDoc,
+  skeletonDoc,
+  alertDoc,
+  tableDoc,
+  tableCaptionDoc,
+  tableHeadDoc,
+  tableBodyDoc,
+  tableRowDoc,
+  tableHeaderCellDoc,
+  tableCellDoc,
+  metricGridDoc,
+  linkDoc,
+  linkProviderDoc,
+  themeProviderDoc,
+]);

package/src/docs/types.ts

@@ -0,0 +1,51 @@
+export interface ComponentDocProp {
+  readonly name: string;
+  readonly description: string;
+  readonly required?: boolean;
+}
+
+export interface ComponentDoc {
+  readonly name: string;
+  readonly description: string;
+  readonly props: readonly ComponentDocProp[];
+  readonly inheritedProps: readonly string[];
+  readonly example: string;
+  readonly storyId: string;
+}
+
+export type ComponentDocField = keyof ComponentDoc;
+
+export function validateComponentDoc(
+  doc: Partial<ComponentDoc>,
+): ComponentDocField[] {
+  const fields: ComponentDocField[] = [];
+
+  if (!doc.name?.trim()) {
+    fields.push('name');
+  }
+  if (!doc.description?.trim()) {
+    fields.push('description');
+  }
+  const propNames = doc.props?.map((prop) => prop.name.trim()) ?? [];
+  const hasInvalidProps =
+    !doc.props?.length ||
+    doc.props.some((prop) => !prop.name.trim() || !prop.description.trim()) ||
+    new Set(propNames).size !== propNames.length;
+  if (hasInvalidProps) {
+    fields.push('props');
+  }
+  if (
+    !doc.inheritedProps?.length ||
+    doc.inheritedProps.some((contract) => !contract.trim())
+  ) {
+    fields.push('inheritedProps');
+  }
+  if (!doc.example?.trim()) {
+    fields.push('example');
+  }
+  if (!doc.storyId?.trim()) {
+    fields.push('storyId');
+  }
+
+  return fields;
+}

package/src/index.ts

@@ -0,0 +1,102 @@
+export {
+  tokenContract,
+  tokenCustomProperties,
+  tokenNames,
+  validateThemeDefinition,
+  type ThemeDefinition,
+  type ThemeDefinitionCandidate,
+  type TokenContract,
+  type TokenName,
+} from './tokens/contracts.js';
+export {globalStyles} from './styles/global.stylex.js';
+export {Alert, type AlertProps} from './Alert/index.js';
+export {
+  AsyncState,
+  type AsyncStateProps,
+  type AsyncStateValue,
+} from './AsyncState/index.js';
+export {
+  Badge,
+  type BadgeProps,
+  type BadgeTone,
+  type StatusTone,
+} from './Badge/index.js';
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ControlSize,
+} from './Button/index.js';
+export {Card, type CardElevation, type CardProps} from './Card/index.js';
+export {CardFooter, type CardFooterProps} from './CardFooter/index.js';
+export {CardHeader, type CardHeaderProps} from './CardHeader/index.js';
+export {Center, type CenterProps} from './Center/index.js';
+export {Divider, type DividerProps} from './Divider/index.js';
+export {
+  EmptyState,
+  type EmptyStateProps,
+  type EmptyStateSize,
+} from './EmptyState/index.js';
+export {Field, type FieldNecessity, type FieldProps} from './Field/index.js';
+export {Grid, type GridProps} from './Grid/index.js';
+export {
+  Heading,
+  type HeadingFamily,
+  type HeadingProps,
+} from './Heading/index.js';
+export {IconButton, type IconButtonProps} from './IconButton/index.js';
+export {
+  MetricGrid,
+  type MetricGridItem,
+  type MetricGridProps,
+} from './MetricGrid/index.js';
+export {Section, type SectionProps} from './Section/index.js';
+export {
+  SegmentedControl,
+  type SegmentedControlOption,
+  type SegmentedControlProps,
+} from './SegmentedControl/index.js';
+export {Skeleton, type SkeletonProps} from './Skeleton/index.js';
+export {Spinner, type SpinnerProps} from './Spinner/index.js';
+export {Stack, type Space, type StackProps} from './Stack/index.js';
+export {StatusDot, type StatusDotProps} from './StatusDot/index.js';
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  type TableBodyProps,
+  type TableCaptionProps,
+  type TableCellProps,
+  type TableDensity,
+  type TableDividers,
+  type TableHeadProps,
+  type TableHeaderCellProps,
+  type TableProps,
+  type TableRowProps,
+} from './Table/index.js';
+export {Text, type TextProps, type TextTone} from './Text/index.js';
+export {TextArea, type TextAreaProps} from './TextArea/index.js';
+export {TextInput, type TextInputProps} from './TextInput/index.js';
+export {Toggle, type ToggleProps} from './Toggle/index.js';
+export {
+  VisuallyHidden,
+  type VisuallyHiddenProps,
+} from './VisuallyHidden/index.js';
+export {
+  ThemeProvider,
+  useTheme,
+  type ThemeContextValue,
+  type ThemePersistence,
+  type ThemeProviderProps,
+} from './theme/index.js';
+export {
+  Link,
+  LinkProvider,
+  type LinkProps,
+  type LinkProviderProps,
+  type LinkRenderer,
+} from './navigation/index.js';

package/src/navigation/LinkProvider.doc.ts

@@ -0,0 +1,32 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const linkDoc = {
+  name: 'Link',
+  description:
+    'Renders a native anchor or delegates navigation to the nearest LinkProvider.',
+  props: [{name: 'href', description: 'Sets the navigation destination.'}],
+  inheritedProps: ['AnchorHTMLAttributes<HTMLAnchorElement>'],
+  example: '<Link href="/records">Records</Link>',
+  storyId: 'core-link--default',
+} satisfies ComponentDoc;
+
+export const linkProviderDoc = {
+  name: 'LinkProvider',
+  description:
+    'Supplies an optional host-router renderer to descendant Link components.',
+  props: [
+    {
+      name: 'children',
+      description: 'Supplies links that share the host navigation adapter.',
+      required: true,
+    },
+    {
+      name: 'renderLink',
+      description: 'Renders links through the host application router.',
+    },
+  ],
+  inheritedProps: ['No inherited DOM attributes'],
+  example:
+    '<LinkProvider renderLink={renderLink}><Link href="/records">Records</Link></LinkProvider>',
+  storyId: 'core-link-provider--default',
+} satisfies ComponentDoc;

package/src/navigation/LinkProvider.tsx

@@ -0,0 +1,32 @@
+import {
+  createContext,
+  useContext,
+  type AnchorHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export type LinkRenderer = (props: LinkProps) => ReactElement | null;
+
+export interface LinkProviderProps {
+  readonly children: ReactNode;
+  readonly renderLink?: LinkRenderer;
+}
+
+const LinkContext = createContext<LinkRenderer | undefined>(undefined);
+
+export function LinkProvider({children, renderLink}: LinkProviderProps) {
+  return <LinkContext value={renderLink}>{children}</LinkContext>;
+}
+
+export function Link(props: LinkProps) {
+  const renderLink = useContext(LinkContext);
+
+  if (renderLink) {
+    return renderLink(props);
+  }
+
+  return <a {...props} />;
+}

package/src/navigation/index.ts

@@ -0,0 +1,7 @@
+export {
+  Link,
+  LinkProvider,
+  type LinkProps,
+  type LinkProviderProps,
+  type LinkRenderer,
+} from './LinkProvider.js';

package/src/styles/global.stylex.ts

@@ -0,0 +1,23 @@
+import * as stylex from '@stylexjs/stylex';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+export const globalStyles = stylex.create({
+  document: {
+    backgroundColor: semanticTokens.colorCanvas,
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontFeatureSettings: semanticTokens.fontFeatureSettings,
+    fontSize: semanticTokens.fontSizeMd,
+    fontWeight: semanticTokens.fontWeightRegular,
+    lineHeight: semanticTokens.lineHeightBody,
+  },
+  focusRing: {
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+  },
+});

package/src/styles/index.css

@@ -0,0 +1,14 @@
+/* Lowest to highest priority: browser normalization, StyleX rules, global accessibility. */
+@layer kioku-ui.reset, kioku-ui.stylex, kioku-ui.global;
+
+@import './reset.css' layer(kioku-ui.reset);
+@import './stylex.css' layer(kioku-ui.stylex);
+
+@layer kioku-ui.global {
+  :focus-visible {
+    outline-color: var(--kioku-ui-color-focus);
+    outline-offset: var(--kioku-ui-focus-offset);
+    outline-style: var(--kioku-ui-border-style);
+    outline-width: var(--kioku-ui-focus-width);
+  }
+}