@ryanhelsing/ry-ui 1.0.13 → 1.0.15

package/dist/css/ry-theme.css

@@ -16,6 +16,46 @@ html {
   background-color: var(--ry-color-bg);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SECTION — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-section[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+  border-radius: var(--ry-radius-lg);
+}
+
+ry-section[inverted] :is(h1, h2, h3, h4, p, span, a) {
+  color: inherit;
+}
+
+ry-section[inverted] p {
+  opacity: 0.7;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FOOTER — INVERTED
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-footer[inverted] {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+ry-footer[inverted] :is(a, strong, p, span, nav) {
+  color: inherit;
+}
+
+ry-footer[inverted] a {
+  opacity: 0.7;
+  transition: opacity var(--ry-duration-fast);
+}
+
+ry-footer[inverted] a:hover {
+  opacity: 1;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    FOCUS STYLES
    ═══════════════════════════════════════════════════════════════ */
@@ -118,11 +158,14 @@ ry-nav a {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
-  transition: color var(--ry-duration-fast) var(--ry-ease);
+  border-radius: var(--ry-radius-md);
+  transition: color var(--ry-duration-fast) var(--ry-ease),
+              background-color var(--ry-duration-fast) var(--ry-ease);
 }
 
 ry-nav a:hover {
   color: var(--ry-color-text);
+  background-color: var(--ry-color-hover-overlay);
 }
 
 ry-nav a[aria-current="page"] {
@@ -173,7 +216,7 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
    BUTTONS
    ═══════════════════════════════════════════════════════════════ */
 
-:is(.ry-btn, ry-button) {
+:is(:where(.ry-btn), ry-button) {
   font-family: var(--ry-font-sans);
   font-size: var(--ry-text-sm);
   font-weight: var(--ry-font-medium);
@@ -190,93 +233,88 @@ ry-split [data-ry-target="handle"]:focus-visible::after {
   transition-timing-function: var(--ry-ease);
 }
 
-:is(.ry-btn, ry-button):hover {
+:is(:where(.ry-btn), ry-button):hover {
   background-color: var(--ry-color-primary-hover);
 }
 
-:is(.ry-btn, ry-button):active {
+:is(:where(.ry-btn), ry-button):active {
   background-color: var(--ry-color-primary-active);
 }
 
-:is(.ry-btn:disabled, .ry-btn[aria-disabled="true"], ry-button[disabled]) {
+:is(:where(.ry-btn:disabled, .ry-btn[aria-disabled="true"]), ry-button[disabled]) {
   opacity: 0.5;
 }
 
 /* Button variants */
-:is(.ry-btn--secondary, ry-button[variant="secondary"]) {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]) {
   background-color: var(--ry-color-secondary);
 }
-:is(.ry-btn--secondary, ry-button[variant="secondary"]):hover {
+:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]):hover {
   background-color: var(--ry-color-secondary-hover);
 }
 
-:is(.ry-btn--outline, ry-button[variant="outline"]) {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]) {
   background-color: transparent;
   color: var(--ry-color-primary);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn--outline, ry-button[variant="outline"]):hover {
+:is(:where(.ry-btn--outline), ry-button[variant="outline"]):hover {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
 }
 
-:is(.ry-btn--ghost, ry-button[variant="ghost"]) {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]) {
   background-color: transparent;
   color: var(--ry-color-text);
 }
-:is(.ry-btn--ghost, ry-button[variant="ghost"]):hover {
+:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]):hover {
   background-color: var(--ry-color-bg-muted);
 }
 
-:is(.ry-btn--danger, ry-button[variant="danger"]) {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]) {
   background-color: var(--ry-color-danger);
 }
-:is(.ry-btn--danger, ry-button[variant="danger"]):hover {
+:is(:where(.ry-btn--danger), ry-button[variant="danger"]):hover {
   background-color: var(--ry-color-danger-hover);
 }
 
-:is(.ry-btn--accent, ry-button[variant="accent"]) {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]) {
   background-color: var(--ry-color-accent);
 }
-:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
+:is(:where(.ry-btn--accent), ry-button[variant="accent"]):hover {
   background-color: var(--ry-color-accent-hover);
 }
 
+/* Link variant — inline text link */
+:is(:where(.ry-btn--link), ry-button[variant="link"]) {
+  background: none;
+  color: var(--ry-color-primary);
+  font-weight: var(--ry-font-semibold);
+  text-decoration: none;
+  border: none;
+}
+:is(:where(.ry-btn--link), ry-button[variant="link"]):hover {
+  text-decoration: underline;
+}
+
 /* Pressed/active toggle state */
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]) {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]) {
   background-color: var(--ry-color-primary);
   color: var(--ry-color-text-inverse);
   border-color: var(--ry-color-primary);
 }
-:is(.ry-btn[aria-pressed="true"], ry-button[pressed]):hover {
+:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]):hover {
   background-color: var(--ry-color-primary-hover);
   border-color: var(--ry-color-primary-hover);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   BUTTON GROUP
-   ═══════════════════════════════════════════════════════════════ */
-
-ry-button-group {
-  background-color: var(--ry-color-bg-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--ry-color-text-muted);
-}
-
-ry-button-group > :is(ry-button, ry-toggle-button):hover:not([pressed]) {
-  color: var(--ry-color-text);
-}
 
 /* Button sizes (typography only - padding is structural) */
-:is(.ry-btn--sm, ry-button[size="sm"]) {
+:is(:where(.ry-btn--sm), ry-button[size="sm"]) {
   font-size: var(--ry-text-xs);
 }
 
-:is(.ry-btn--lg, ry-button[size="lg"]) {
+:is(:where(.ry-btn--lg), ry-button[size="lg"]) {
   font-size: var(--ry-text-base);
 }
 
@@ -725,6 +763,10 @@ ry-card p {
   color: var(--ry-color-text-muted);
 }
 
+ry-card > img:first-child {
+  border-radius: var(--ry-radius-md);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -802,7 +844,7 @@ ry-badge[style*="--ry-badge-color"] {
   color: var(--ry-color-danger-text);
 }
 
-:is(.ry-alert__title, ry-alert [slot="title"]) {
+.ry-alert__title {
   font-weight: var(--ry-font-semibold);
 }
 
@@ -2146,13 +2188,13 @@ ry-pricing-card h3 {
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] {
+.ry-pricing-card__price {
   font-size: var(--ry-text-4xl);
   font-weight: var(--ry-font-bold);
   color: var(--ry-color-text);
 }
 
-ry-pricing-card [slot="price"] span {
+.ry-pricing-card__price span {
   font-size: var(--ry-text-base);
   font-weight: var(--ry-font-normal);
   color: var(--ry-color-text-muted);
@@ -2322,18 +2364,34 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    LOGO BAR
    ═══════════════════════════════════════════════════════════════ */
 
-.ry-logo-bar p {
+ry-logo-bar > p {
   color: var(--ry-color-text-muted);
   font-size: var(--ry-text-sm);
+  font-family: var(--ry-font-sans);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
-.ry-logo-bar span {
+ry-logo-bar span {
   font-size: var(--ry-text-2xl);
   font-weight: var(--ry-font-bold);
+  font-family: var(--ry-font-sans);
   color: var(--ry-color-text);
   opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar span:hover {
+  opacity: 0.8;
+}
+
+ry-logo-bar img {
+  opacity: 0.5;
+  transition: opacity var(--ry-duration-fast) var(--ry-ease);
+}
+
+ry-logo-bar img:hover {
+  opacity: 0.8;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -2377,6 +2435,28 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
    ═══════════════════════════════════════════════════════════════ */
 
 [data-ry-theme="none"] {
+  /* Strictly black and white */
+  --ry-color-primary: light-dark(#000000, #ffffff);
+  --ry-color-primary-hover: light-dark(#333333, #cccccc);
+  --ry-color-primary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-secondary: light-dark(#000000, #ffffff);
+  --ry-color-secondary-hover: light-dark(#333333, #cccccc);
+  --ry-color-secondary-active: light-dark(#555555, #aaaaaa);
+  --ry-color-accent: light-dark(#000000, #ffffff);
+  --ry-color-accent-hover: light-dark(#333333, #cccccc);
+  --ry-color-accent-active: light-dark(#555555, #aaaaaa);
+  --ry-color-text: light-dark(#000000, #ffffff);
+  --ry-color-text-muted: light-dark(#666666, #999999);
+  --ry-color-text-inverse: light-dark(#ffffff, #000000);
+  --ry-color-bg: light-dark(#ffffff, #000000);
+  --ry-color-bg-subtle: light-dark(#f5f5f5, #0a0a0a);
+  --ry-color-bg-muted: light-dark(#eeeeee, #111111);
+  --ry-color-border: light-dark(#dddddd, #333333);
+  --ry-color-border-strong: light-dark(#999999, #666666);
+  --ry-color-overlay: light-dark(rgba(255,255,255,0.95), rgba(0,0,0,0.95));
+  --ry-color-hover-overlay: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
+  --ry-focus-ring: light-dark(0 0 0 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.3));
+  /* No radii, no shadows */
   --ry-radius-sm: 0;
   --ry-radius-md: 0;
   --ry-radius-lg: 0;
@@ -2422,4 +2502,135 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
   color: var(--ry-color-text-inverse);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   HEADING
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-heading__title {
+  font-size: var(--ry-text-2xl);
+  font-weight: var(--ry-font-bold);
+  line-height: var(--ry-leading-tight);
+  color: var(--ry-color-text);
+}
+
+.ry-heading__sub {
+  font-size: var(--ry-text-base);
+  line-height: var(--ry-leading-normal);
+  color: var(--ry-color-text-muted);
+}
+
+/* Size: sm */
+ry-heading[size="sm"] .ry-heading__title {
+  font-size: var(--ry-text-lg);
+}
+
+ry-heading[size="sm"] .ry-heading__sub {
+  font-size: var(--ry-text-sm);
+}
+
+/* Size: lg */
+ry-heading[size="lg"] .ry-heading__title {
+  font-size: var(--ry-text-4xl);
+}
+
+ry-heading[size="lg"] .ry-heading__sub {
+  font-size: var(--ry-text-lg);
+}
+
+/* Divider variant */
+ry-heading[divider] {
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SEARCH LIST
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-search-list__search {
+  background-color: var(--ry-color-bg);
+  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
+}
+
+.ry-search-list__input {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+}
+
+.ry-search-list__input::placeholder {
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text);
+  border-radius: var(--ry-radius-md);
+  transition: background-color var(--ry-duration-fast) var(--ry-ease);
+}
+
+.ry-search-list__item[data-highlighted] {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-search-list__item[aria-selected="true"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
+.ry-search-list__item[aria-selected="true"][data-highlighted] {
+  background-color: var(--ry-color-primary-hover);
+}
+
+.ry-search-list__group-header {
+  font-family: var(--ry-font-sans);
+  font-weight: 600;
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__empty {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-search-list__item mark {
+  background-color: transparent;
+  color: var(--ry-color-primary);
+  font-weight: 600;
+}
+
+.ry-search-list__item[aria-selected="true"] mark {
+  color: inherit;
+  text-decoration: underline;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: var(--ry-font-semibold);
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-avatar {
+  border-radius: var(--ry-radius-full);
+  object-fit: cover;
+}
+
+.ry-bg-subtle {
+  background-color: var(--ry-color-bg-subtle);
+}
+
+.ry-bg-inverted {
+  background-color: var(--ry-color-text);
+  color: var(--ry-color-bg);
+}
+
+.ry-bg-inverted p {
+  opacity: 0.7;
+}
+
 } /* @layer ry-theme */