<h1>CSS Custom Properties</h1>
<p>These callouts need styles. We'll work on adding styles for each variation by using custom properties to build a meaninful, maintainable system.</p>
<main>
  <div class="callout">
    <h2>I am a default callout</h2>
    <p>Each callout has two buttons, a default one and an outline button.</p>
    <div class="btn-group">
      <button>Button</button>
      <button class="outline">Outline Button</button>
    </div>
  </div>

  <div class="callout warning">
    <h2>I am a warning callout</h2>
    <p>For each variation of the callout, adjust the callout background color, border color, and button backgrounds and text color for their respective states.</p>
    <div class="btn-group">
      <button>Button</button>
      <button class="outline">Outline Button</button>
    </div>
  </div>

  <div class="callout info">
    <h2>I am an info callout</h2>
    <p>For each variation of the callout, adjust the callout background color, border color, and button backgrounds and text color for their respective states.</p>
    <div class="btn-group">
      <button>Button</button>
      <button class="outline">Outline Button</button>
    </div>
  </div>
</main>
.callout {
  background-color: white;
  color: black;
}

.warning {
}

.info {
}

/* Some custom property names to help get started */

/*   
  --btn-background: ;
  --btn-color: ;
  --btn-background-hover: ;
  --btn-background-outline: ;
  --btn-color-hover: ;
  --btn-border-color: ;
  --btn-border-color-hover: ;
  --btn-border-color-outline: ;
  --btn-border-radius: ;
  --btn-color-outline: ;
  --btn-background-outline-hover: ;
  --btn-border-color-outline-hover: ;
  --btn-color-outline-hover: ; 
  --callout-background: ;
  --callout-border-color: ;
  --callout-border-radius: ;
  --callout-color: ;
  --btn-background-outline: ;
  */

/* Base Button Styles */
button {
  background-color: #444;
  border: thin solid;
  color: white;

  &:hover,
  &:focus {
    background-color: black;
    color: white;
  }
}

/* Outline Button variation */
.outline {
  background-color: unset;
  color: unset;

  &:hover,
  &:focus {
    background-color: black;
    color: white;
  }
}

/* All Styles that aren't part of workshop, but help with the styling of the demo. */
@layer reset, base, default;

@layer default {
  body {
    background: hsl(213 20% 20%);
    color: white;
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--text-small);
    line-height: 1.4;
    padding: 0 2rem;
  }

  /* Layout Styles
   ------------- */
  main {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(auto, 80ch);
    justify-content: center;
    padding-block-end: 3rem;
  }

  aside {
    margin-block: 2rem;
  }

  /* Button Styles 
     ------------- */
  button {
    appearance: none;
    cursor: pointer;
    font-weight: 700;
    padding: 0.5rem 1rem;

    &:focus {
      outline: 2px solid hsl(338 85% 60%);
      outline-offset: 1px;
    }
  }

  /* Callout Styles 
     --------------*/
  .callout {
    border-style: solid;
    border-width: 0 0 0 1rem;
    font-weight: bold;
    padding: 2rem;
  }

  /* Typography Styles
     ----------------- */
  h1 {
    font-size: var(--text-xlarge);
    font-weight: normal;
    margin-block-end: 1rem;
    text-align: center;
  }

  h2 {
    font-size: var(--text-normal);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
  }

  p:not(.callout p) {
    margin-block-end: 2rem;
    text-align: center;
  }
}

@layer base {
  body {
    --text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem);
    --text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem);
    --text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem);
    --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem);
    --gap: clamp(2cqi, 0.5lh, 5cqi);
    font-size: var(--text-normal);
    padding: var(--gap);
  }
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  html {
    block-size: 100%;
  }

  body {
    margin: unset;
    min-block-size: 100%;
  }

  picture {
    display: contents;
  }

  img {
    display: block;
  }

  img,
  svg {
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}
Run Pen

External CSS

  1. https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css

External JavaScript

This Pen doesn't use any external JavaScript resources.