@ryanhelsing/ry-ui/dist/themes/ocean.css

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

/**
 * ry-ui Ocean Theme
 *
 * Deep blue oceanic vibes.
 */

[data-ry-theme="ocean"] {
  /* Primary - ocean blues */
  --ry-color-primary: light-dark(oklch(0.685 0.148 237.3), oklch(0.835 0.148 237.3));
  --ry-color-primary-hover: light-dark(oklch(0.588 0.139 242), oklch(0.738 0.139 242.0));
  --ry-color-primary-active: light-dark(oklch(0.5 0.119 242.8), oklch(0.650 0.119 242.8));

  /* Secondary - teal */
  --ry-color-secondary: light-dark(oklch(0.715 0.126 215.2), oklch(0.286 0.063 215.2));
  --ry-color-secondary-hover: light-dark(oklch(0.609 0.111 221.7), oklch(0.317 0.056 221.7));
  --ry-color-secondary-active: light-dark(oklch(0.52 0.094 223.1), oklch(0.344 0.047 223.1));

  /* Text */
  --ry-color-text: light-dark(oklch(0.391 0.085 240.9), oklch(0.911 0.085 240.9));
  --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.684 0.029 257.4));
  --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.16 0.04 240));

  /* Background - light blues / dark deep blues */
  --ry-color-bg: light-dark(oklch(0.977 0.013 236.8), oklch(0.16 0.04 240));
  --ry-color-bg-subtle: light-dark(oklch(0.951 0.025 236.9), oklch(0.19 0.05 238));
  --ry-color-bg-muted: light-dark(oklch(0.901 0.056 230.9), oklch(0.23 0.06 235));

  /* Border */
  --ry-color-border: light-dark(oklch(0.828 0.101 230.3), oklch(0.203 0.061 230.3));
  --ry-color-border-strong: light-dark(oklch(0.753 0.139 232.7), oklch(0.248 0.083 232.7));

  /* Shadows with blue tint */
  --ry-shadow-sm: light-dark(0 1px 2px 0 oklch(0.685 0.148 237.3 / 0.1), 0 1px 2px 0 oklch(0.352 0.148 237.3 / 0.1));
  --ry-shadow-md: light-dark(0 4px 6px -1px oklch(0.685 0.148 237.3 / 0.15), 0 4px 6px -1px oklch(0.352 0.148 237.3 / 0.15));
  --ry-shadow-lg: light-dark(0 10px 15px -3px oklch(0.685 0.148 237.3 / 0.15), 0 10px 15px -3px oklch(0.352 0.148 237.3 / 0.15));
  --ry-shadow-xl: light-dark(0 20px 25px -5px oklch(0.685 0.148 237.3 / 0.2), 0 20px 25px -5px oklch(0.352 0.148 237.3 / 0.2));

  /* Focus */
  --ry-focus-ring: light-dark(0 0 0 3px oklch(0.685 0.148 237.3 / 0.5), 0 0 0 3px oklch(0.352 0.148 237.3 / 0.5));

  /* Alerts */
  --ry-color-info-bg: light-dark(oklch(0.951 0.025 236.9), oklch(0.175 0.010 236.9));
  --ry-color-info-text: light-dark(oklch(0.5 0.119 242.8), oklch(0.900 0.119 242.8));
}