Surface

#surface {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-items: center;
  align-items: center;
  padding: var(--rh-space-xl);
}

import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
import '@rhds/elements/rh-spinner/rh-spinner.js';
import '@rhds/elements/rh-tag/rh-tag.js';

<rh-surface id="surface" color-palette="darkest">
  <rh-blockquote align="inline-start" size="default">
    <p>Surface is used to provide a theme to children</p>
  </rh-blockquote>
  <rh-spinner size="lg">Loading...</rh-spinner>
  <rh-tag color="green">Sold</rh-tag>
</rh-surface>

import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-cta/rh-cta.js';

<rh-surface id="surface" color-palette="darkest">
  <h2>Darkest</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

<rh-surface color-palette="darker">
  <h2>Darker</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

<rh-surface color-palette="dark">
  <h2>Dark</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

<rh-surface color-palette="light">
  <h2>Light</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

<rh-surface color-palette="lighter">
  <h2>Lighter</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

<rh-surface color-palette="lightest">
  <h2>Lightest</h2>
  <rh-cta><a href="#">Call to Action</a></rh-cta>
</rh-surface>

import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';

a {
  color: var(--rh-color-interactive-primary-default);
  &:hover { color: var(--rh-color-interactive-primary-hover); }
  &:active { color: var(--rh-color-interactive-primary-active); }

  &:focus-within {
    color: var(--rh-color-interactive-primary-focus);
    &:hover { color: var(--rh-color-interactive-primary-focus); }
  }

  &:visited { /* stylelint-disable-line no-descending-specificity */
    color: var(--rh-color-interactive-primary-visited-default);
    &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
  }
}

<rh-surface color-palette="darkest">
  <rh-card>
    <p>The card has no color-palette. It's nested CTA should therefore inherit
       context from the grandparent, rh-surface.</p>
    <rh-surface color-palette="light">
      <p>The nested surface should have lighter color <a href="#">even for links</a></p>
      <rh-card color-palette="dark">
        <p>and the nested card should likewise set it's own <a href="#">scheme</a></p>
      </rh-card>
      <rh-cta href="#">light</rh-cta>
    </rh-surface>
    <rh-cta href="#">Should be on dark</rh-cta>
  </rh-card>
</rh-surface>