@ryanhelsing/ry-ui/dist/css/ry-base.css

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * ry-ui Base Styles
 *
 * Reset and base element defaults.
 * Custom element display modes.
 */

/* ═══════════════════════════════════════════════════════════════
   TRANSFORM WRAPPER (FOUC prevention)
   The <ry> wrapper is hidden until JS transforms and removes it.
   CSS loads before JS, so content stays hidden until ready.
   ═══════════════════════════════════════════════════════════════ */

ry {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   MINIMAL RESET
   ═══════════════════════════════════════════════════════════════ */

html {
  background-color: var(--ry-color-bg);
}

body {
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BOX SIZING RESET (scoped to ry- elements)
   ═══════════════════════════════════════════════════════════════ */

[class^="ry-"],
[class*=" ry-"],
ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
ry-theme-toggle {
  box-sizing: border-box;
}

[class^="ry-"] *,
[class*=" ry-"] *,
ry-page *, ry-header *, ry-main *, ry-footer *, ry-section *,
ry-card *, ry-accordion *, ry-modal *, ry-tabs *, ry-dropdown * {
  box-sizing: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM ELEMENT DISPLAY DEFAULTS
   ═══════════════════════════════════════════════════════════════ */

/* Block elements */
ry-page,
ry-header,
ry-main,
ry-footer,
ry-section,
ry-aside,
ry-card,
ry-accordion,
ry-accordion-item,
ry-tabs,
ry-tab,
ry-alert,
ry-field {
  display: block;
}

/* Flex containers */
ry-grid,
ry-stack,
ry-cluster,
ry-split,
ry-center,
ry-nav,
ry-actions {
  display: flex;
}

/* Inline elements */
ry-badge,
ry-logo {
  display: inline-flex;
}

/* Contents (wrapper doesn't affect layout) */
ry-modal,
ry-dropdown {
  display: contents;
}

/* Button-like elements */
ry-button,
ry-menu-item {
  display: inline-flex;
}

/* Note: We don't use :not(:defined) because our layout
   primitives are CSS-only and never get registered as
   custom elements. They work without JavaScript. */

/* ═══════════════════════════════════════════════════════════════
   FOCUS STYLES
   ═══════════════════════════════════════════════════════════════ */

[class^="ry-"]:focus-visible,
[class*=" ry-"]:focus-visible,
ry-button:focus-visible,
.ry-btn:focus-visible,
.ry-input:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY (when inside ry-page)
   ═══════════════════════════════════════════════════════════════ */

ry-page {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg);
}

ry-page h1, ry-page h2, ry-page h3, ry-page h4, ry-page h5, ry-page h6 {
  margin: 0 0 var(--ry-space-4) 0;
  font-weight: var(--ry-font-semibold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

ry-page h1 { font-size: var(--ry-text-4xl); }
ry-page h2 { font-size: var(--ry-text-3xl); }
ry-page h3 { font-size: var(--ry-text-2xl); }
ry-page h4 { font-size: var(--ry-text-xl); }

ry-page p {
  margin: 0 0 var(--ry-space-4) 0;
}

ry-page a {
  color: var(--ry-color-primary);
  text-decoration: none;
}

ry-page a:hover {
  text-decoration: underline;
}