@ryanhelsing/ry-ui 1.0.14 → 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
    ═══════════════════════════════════════════════════════════════ */
@@ -176,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);
@@ -193,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);
 }
 
@@ -728,6 +763,10 @@ ry-card p {
   color: var(--ry-color-text-muted);
 }
 
+ry-card > img:first-child {
+  border-radius: var(--ry-radius-md);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    BADGES
    ═══════════════════════════════════════════════════════════════ */
@@ -805,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);
 }
 
@@ -2149,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);
@@ -2325,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;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -2487,4 +2542,95 @@ 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 */

package/dist/css/ry-tokens.css

@@ -106,13 +106,13 @@
   --ry-color-hover-overlay: color-mix(in oklch, var(--ry-color-text) 4%, transparent);
 
   /* Semantic backgrounds & text — derived from base semantic colors */
-  --ry-color-info-bg: color-mix(in oklch, var(--ry-color-info) 12%, var(--ry-color-bg));
+  --ry-color-info-bg: color-mix(in srgb, var(--ry-color-info) 12%, var(--ry-color-bg));
   --ry-color-info-text: color-mix(in oklch, var(--ry-color-info) 70%, var(--ry-color-text));
-  --ry-color-success-bg: color-mix(in oklch, var(--ry-color-success) 12%, var(--ry-color-bg));
+  --ry-color-success-bg: color-mix(in srgb, var(--ry-color-success) 12%, var(--ry-color-bg));
   --ry-color-success-text: color-mix(in oklch, var(--ry-color-success) 70%, var(--ry-color-text));
-  --ry-color-warning-bg: color-mix(in oklch, var(--ry-color-warning) 12%, var(--ry-color-bg));
+  --ry-color-warning-bg: color-mix(in srgb, var(--ry-color-warning) 12%, var(--ry-color-bg));
   --ry-color-warning-text: color-mix(in oklch, var(--ry-color-warning) 70%, var(--ry-color-text));
-  --ry-color-danger-bg: color-mix(in oklch, var(--ry-color-danger) 12%, var(--ry-color-bg));
+  --ry-color-danger-bg: color-mix(in srgb, var(--ry-color-danger) 12%, var(--ry-color-bg));
   --ry-color-danger-text: color-mix(in oklch, var(--ry-color-danger) 70%, var(--ry-color-text));
 
   /* ═══════════════════════════════════════════════════════════════