<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;

  }

}

​