@ryanhelsing/ry-ui 1.0.8 → 1.0.10

package/dist/css/ry-tokens.css

@@ -9,33 +9,11 @@
 
 /* ═══════════════════════════════════════════════════════════════
    @property — typed custom properties for animation & type safety
+   Note: color tokens are NOT registered here because @property
+   prevents light-dark() from re-resolving on dynamic color-scheme
+   changes in Firefox. Colors use unregistered custom properties.
    ═══════════════════════════════════════════════════════════════ */
 
-@property --ry-color-primary { syntax: "<color>"; inherits: true; initial-value: oklch(0.623 0.188 259.8); }
-@property --ry-color-primary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.546 0.215 262.9); }
-@property --ry-color-primary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.488 0.217 264.4); }
-@property --ry-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
-@property --ry-color-secondary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.446 0.037 257.3); }
-@property --ry-color-secondary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.372 0.039 257.3); }
-@property --ry-color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(0.627 0.213 303.9); }
-@property --ry-color-accent-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.557 0.213 303.9); }
-@property --ry-color-accent-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.497 0.213 303.9); }
-@property --ry-color-success { syntax: "<color>"; inherits: true; initial-value: oklch(0.723 0.192 149.6); }
-@property --ry-color-warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.769 0.165 70.1); }
-@property --ry-color-danger { syntax: "<color>"; inherits: true; initial-value: oklch(0.637 0.208 25.3); }
-@property --ry-color-info { syntax: "<color>"; inherits: true; initial-value: oklch(0.715 0.126 215.2); }
-@property --ry-color-text { syntax: "<color>"; inherits: true; initial-value: oklch(0.279 0.037 260); }
-@property --ry-color-text-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
-@property --ry-color-text-inverse { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
-@property --ry-color-bg { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
-@property --ry-color-bg-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.984 0.003 248.2); }
-@property --ry-color-bg-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.968 0.007 248.1); }
-@property --ry-color-border { syntax: "<color>"; inherits: true; initial-value: oklch(0.929 0.013 255.6); }
-@property --ry-color-border-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.869 0.02 252.9); }
-@property --ry-color-overlay { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.5); }
-@property --ry-shadow-color { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.1); }
-@property --ry-shadow-color-sm { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.05); }
-
 @property --ry-duration-fast { syntax: "<time>"; inherits: true; initial-value: 100ms; }
 @property --ry-duration-normal { syntax: "<time>"; inherits: true; initial-value: 200ms; }
 @property --ry-duration-slow { syntax: "<time>"; inherits: true; initial-value: 300ms; }
@@ -234,7 +212,7 @@
   --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
 }
 
-/* Force light or dark mode */
+/* Force light or dark mode (legacy — theme used to conflate theme + mode) */
 [data-ry-theme="light"] { color-scheme: light; }
 [data-ry-theme="dark"]  { color-scheme: dark; }
 

package/dist/css/ry-ui.css

@@ -9,33 +9,11 @@
 
 /* ═══════════════════════════════════════════════════════════════
    @property — typed custom properties for animation & type safety
+   Note: color tokens are NOT registered here because @property
+   prevents light-dark() from re-resolving on dynamic color-scheme
+   changes in Firefox. Colors use unregistered custom properties.
    ═══════════════════════════════════════════════════════════════ */
 
-@property --ry-color-primary { syntax: "<color>"; inherits: true; initial-value: oklch(0.623 0.188 259.8); }
-@property --ry-color-primary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.546 0.215 262.9); }
-@property --ry-color-primary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.488 0.217 264.4); }
-@property --ry-color-secondary { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
-@property --ry-color-secondary-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.446 0.037 257.3); }
-@property --ry-color-secondary-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.372 0.039 257.3); }
-@property --ry-color-accent { syntax: "<color>"; inherits: true; initial-value: oklch(0.627 0.213 303.9); }
-@property --ry-color-accent-hover { syntax: "<color>"; inherits: true; initial-value: oklch(0.557 0.213 303.9); }
-@property --ry-color-accent-active { syntax: "<color>"; inherits: true; initial-value: oklch(0.497 0.213 303.9); }
-@property --ry-color-success { syntax: "<color>"; inherits: true; initial-value: oklch(0.723 0.192 149.6); }
-@property --ry-color-warning { syntax: "<color>"; inherits: true; initial-value: oklch(0.769 0.165 70.1); }
-@property --ry-color-danger { syntax: "<color>"; inherits: true; initial-value: oklch(0.637 0.208 25.3); }
-@property --ry-color-info { syntax: "<color>"; inherits: true; initial-value: oklch(0.715 0.126 215.2); }
-@property --ry-color-text { syntax: "<color>"; inherits: true; initial-value: oklch(0.279 0.037 260); }
-@property --ry-color-text-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.554 0.041 257.4); }
-@property --ry-color-text-inverse { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
-@property --ry-color-bg { syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0); }
-@property --ry-color-bg-subtle { syntax: "<color>"; inherits: true; initial-value: oklch(0.984 0.003 248.2); }
-@property --ry-color-bg-muted { syntax: "<color>"; inherits: true; initial-value: oklch(0.968 0.007 248.1); }
-@property --ry-color-border { syntax: "<color>"; inherits: true; initial-value: oklch(0.929 0.013 255.6); }
-@property --ry-color-border-strong { syntax: "<color>"; inherits: true; initial-value: oklch(0.869 0.02 252.9); }
-@property --ry-color-overlay { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.5); }
-@property --ry-shadow-color { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.1); }
-@property --ry-shadow-color-sm { syntax: "<color>"; inherits: true; initial-value: oklch(0 0 0 / 0.05); }
-
 @property --ry-duration-fast { syntax: "<time>"; inherits: true; initial-value: 100ms; }
 @property --ry-duration-normal { syntax: "<time>"; inherits: true; initial-value: 200ms; }
 @property --ry-duration-slow { syntax: "<time>"; inherits: true; initial-value: 300ms; }
@@ -234,7 +212,7 @@
   --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
 }
 
-/* Force light or dark mode */
+/* Force light or dark mode (legacy — theme used to conflate theme + mode) */
 [data-ry-theme="light"] { color-scheme: light; }
 [data-ry-theme="dark"]  { color-scheme: dark; }
 
@@ -406,6 +384,26 @@ ry-section:last-child {
   margin-block-end: 0;
 }
 
+ry-section[narrow] {
+  max-inline-size: 48rem;
+  margin-inline: auto;
+}
+
+/* Logo bar pattern */
+.ry-logo-bar {
+  text-align: center;
+}
+
+.ry-logo-bar p {
+  margin: 0 0 var(--ry-space-4, 1rem);
+}
+
+.ry-logo-bar ry-cluster {
+  justify-content: center;
+  gap: var(--ry-space-10, 2.5rem);
+  flex-wrap: wrap;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    GRID
    ═══════════════════════════════════════════════════════════════ */
@@ -2844,12 +2842,14 @@ ry-hero[full-bleed] {
 ry-stat {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  text-align: center;
   gap: var(--ry-space-1, 0.25rem);
 }
 
-ry-stat[align="center"] {
-  align-items: center;
-  text-align: center;
+ry-stat[align="left"] {
+  align-items: flex-start;
+  text-align: start;
 }
 
 ry-stat [data-ry-target="value"] {
@@ -2984,6 +2984,7 @@ ry-pricing-card ul li {
 
 ry-pricing-card :is(ry-button, .ry-btn) {
   margin-block-start: auto;
+  width: 100%;
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -3091,6 +3092,7 @@ ry-combobox [data-ry-target="arrow"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  margin-inline-end: var(--ry-space-2, 0.5rem);
   cursor: pointer;
   transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
 }
@@ -3177,6 +3179,102 @@ ry-combobox [data-ry-target="native"] {
   border: 0;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   TESTIMONIAL
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-testimonial {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-6, 1.5rem);
+}
+
+ry-testimonial [data-ry-target="avatar"] {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+ry-testimonial [data-ry-target="avatar"] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+ry-testimonial [data-ry-target="quote"] {
+  margin: 0;
+  max-inline-size: 36rem;
+}
+
+ry-testimonial [data-ry-target="stars"] {
+  display: flex;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+ry-testimonial [data-ry-target="stars"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+ry-testimonial [data-ry-target="attribution"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   THEME PANEL
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-theme-panel {
+  position: fixed;
+  inset-block-end: var(--ry-space-4, 1rem);
+  inset-inline-end: var(--ry-space-4, 1rem);
+  z-index: var(--ry-z-fixed, 1000);
+}
+
+ry-theme-panel [data-ry-target="panel"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-3, 0.75rem);
+}
+
+ry-theme-panel [data-ry-target="theme-row"],
+ry-theme-panel [data-ry-target="mode-row"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-3, 0.75rem);
+}
+
+ry-theme-panel [data-ry-target="theme-options"],
+ry-theme-panel [data-ry-target="mode-options"] {
+  display: flex;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+ry-theme-panel [data-ry-target="label"] {
+  min-inline-size: 3rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+ry-theme-panel [data-ry-target="theme-btn"],
+ry-theme-panel [data-ry-target="mode-btn"] {
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  font: inherit;
+  font-size: 0.6875rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  line-height: 1;
+}
+
 } /* @layer ry-structure */
 
 /**
@@ -3252,6 +3350,25 @@ ry-header {
   border-block-end: var(--ry-border-width) solid var(--ry-color-border);
 }
 
+ry-header strong {
+  font-size: var(--ry-text-xl);
+}
+
+ry-header span {
+  color: var(--ry-color-text-muted);
+}
+
+ry-header a:not(.ry-btn) {
+  color: var(--ry-color-text-muted);
+  text-decoration: none;
+  font-size: var(--ry-text-sm);
+  transition: color var(--ry-duration-fast);
+}
+
+ry-header a:not(.ry-btn):hover {
+  color: var(--ry-color-text);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    FOOTER
    ═══════════════════════════════════════════════════════════════ */
@@ -3262,6 +3379,16 @@ ry-footer {
   color: var(--ry-color-text-muted);
 }
 
+ry-footer a {
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--ry-duration-fast);
+}
+
+ry-footer a:hover {
+  color: var(--ry-color-text);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    NAV
    ═══════════════════════════════════════════════════════════════ */
@@ -3864,7 +3991,7 @@ ry-card {
 }
 
 :is(a, [interactive]):is(ry-card):hover {
-  border-color: var(--ry-color-border-strong);
+  border-color: var(--ry-color-primary);
   box-shadow: var(--ry-shadow-md);
 }
 
@@ -5407,7 +5534,7 @@ ry-combobox:hover .ry-combobox__input-wrapper {
 
 ry-combobox:focus-within .ry-combobox__input-wrapper {
   border-color: var(--ry-color-primary);
-  box-shadow: var(--ry-focus-ring);
+  box-shadow: 0 0 0 1px var(--ry-color-primary);
 }
 
 ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
@@ -5419,6 +5546,12 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
   color: var(--ry-color-text);
 }
 
+.ry-combobox__input:focus,
+.ry-combobox__input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .ry-combobox__input::placeholder {
   color: var(--ry-color-text-muted);
 }
@@ -5464,4 +5597,108 @@ ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
   color: var(--ry-color-text-muted);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   LOGO BAR
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-logo-bar p {
+  color: var(--ry-color-text-muted);
+  font-size: var(--ry-text-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.ry-logo-bar span {
+  font-size: var(--ry-text-2xl);
+  font-weight: var(--ry-font-bold);
+  color: var(--ry-color-text);
+  opacity: 0.5;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TESTIMONIAL
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-testimonial__quote {
+  font-size: var(--ry-text-lg);
+  font-style: italic;
+  line-height: var(--ry-leading-relaxed);
+  color: var(--ry-color-text);
+}
+
+.ry-testimonial__name {
+  font-weight: var(--ry-font-semibold);
+  color: var(--ry-color-text);
+}
+
+.ry-testimonial__role {
+  font-size: var(--ry-text-sm);
+  color: var(--ry-color-text-muted);
+}
+
+.ry-testimonial__star {
+  color: var(--ry-color-warning);
+}
+
+.ry-testimonial__star svg {
+  fill: var(--ry-color-warning);
+}
+
+.ry-testimonial__avatar {
+  background-color: var(--ry-color-bg-muted);
+  border: 2px solid var(--ry-color-border);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   "NONE" THEME — flat, no flourish
+   Default theme minus radii, shadows, and decorative extras.
+   Proves FORM/THEME separation: structure handles all layout.
+   ═══════════════════════════════════════════════════════════════ */
+
+[data-ry-theme="none"] {
+  --ry-radius-sm: 0;
+  --ry-radius-md: 0;
+  --ry-radius-lg: 0;
+  --ry-radius-xl: 0;
+  --ry-radius-2xl: 0;
+  --ry-radius-full: 0;
+  --ry-shadow-sm: none;
+  --ry-shadow-md: none;
+  --ry-shadow-lg: none;
+  --ry-shadow-xl: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   THEME PANEL
+   ═══════════════════════════════════════════════════════════════ */
+
+.ry-theme-panel {
+  font-family: var(--ry-font-sans);
+  background-color: var(--ry-color-bg);
+  border-radius: var(--ry-radius-lg);
+  box-shadow: var(--ry-shadow-lg);
+  border: 1px solid var(--ry-color-border);
+}
+
+.ry-theme-panel__label {
+  color: var(--ry-color-text-muted);
+  font-weight: 600;
+  font-size: 0.6875rem;
+}
+
+.ry-theme-panel__btn {
+  border-radius: var(--ry-radius-sm);
+  color: var(--ry-color-text-muted);
+  transition: background-color var(--ry-duration-fast);
+}
+
+.ry-theme-panel__btn:hover {
+  background-color: var(--ry-color-bg-muted);
+}
+
+.ry-theme-panel__btn[aria-pressed="true"] {
+  background-color: var(--ry-color-primary);
+  color: var(--ry-color-text-inverse);
+}
+
 } /* @layer ry-theme */