<div class="color-container black-theme">
  <div class="color-item bg-white-darktheme non-uniform double-size gray-border">
    <div class="details">
      <h4>$app-white-darktheme</h4>
      <span>#F3F2F1</span>
      <p>Primary text—used for headers and base text.</p>
    </div>
  </div>
  <div class="color-item bg-gray-02-darktheme non-uniform double-size">
    <div class="details">
      <h4>$app-gray-02-darktheme</h4>
      <span>$app-white-darktheme at 74% opacity (#BEBBB8)</span>
      <p>Secondary text—used for labels, subheads, attributions, and icon buttons.</p>
    </div>
  </div>
  <div class="color-item bg-gray-03-darktheme">
    <div class="details">
      <h4>$app-gray-03-darktheme</h4>
      <span>$app-white-darktheme at 64% opacity (#A19F9D)</span>
      <p>Tertiary text—used for message previews and help text.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-04-darktheme">
    <div class="details">
      <h4>$app-gray-04-darktheme</h4>
      <span>$app-white-darktheme at 52% opacity (#8A8886)</span>
      <p>Used for timestamps.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-06-darktheme">
    <div class="details white-text">
      <h4>$app-gray-06-darktheme</h4>
      <span>$app-white-darktheme at 36% opacity (#484644)</span>
      <p>Used for disabled text.</p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-08-darktheme">
    <div class="details white-text">
      <h4>$app-gray-08-darktheme</h4>
      <span>$app-white-darktheme at 14% opacity (#3B3A39)</span>
      <p>Used for separators, borders, channel dividers, and banner backgrounds. </p><br/>
    </div>
  </div>
  <div class="color-item bg-gray-12-darktheme">
    <div class="details white-text">
      <h4>$app-gray-12-darktheme</h4>
      <span>$app-white-darktheme at 5% opacity (#201F1E)</span>
      <p>Used for header, nav bar, chat bubbles, initial thread, and popups.</p><br/>
    </div>
  </div>
  <div class="color-item bg-black-darktheme non-uniform double-size">
    <div class="details white-text">
      <h4>$app-black-darktheme</h4>
      <span>#11100F</span>
      <p>Used for canvas background.</p><br/>
      <br/>
    </div>
  </div>
</div>
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

/*main selectors */
body {
    font-size: 1.4rem;
    padding: 0;
}

* {
    font-family: "Segoe UI","Courier New",Courier;
    box-sizing: border-box;
}

h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

/*parent container*/
.color-container {
    display: flex;
    flex-direction: column;
    width: 100%
}

.color-container.black-theme {
    background: #2b2b30;
}

/*$app-white-darktheme child container*/
.bg-white-darktheme {
    background: #fff;
}

.color-item {
    flex: 1 0 6rem;
    display: flex;
    align-items: center;
    padding: .05rem .1rem;
}

.color-item.non-uniform {
    flex-shrink: 1;
}

.color-item.double-size {
    flex-basis: 12rem;
}

.color-item.gray-border {
    border: .1rem solid #c8c8c9;
}

.color-item .details {
    padding-left: 1rem;
    font-size: 12px;
}

.color-item .details h4 {
    font-size: 14px;
    margin-bottom: 0;
}

/*$app-gray-02-darktheme child container*/
.bg-gray-02-darktheme {
    background: rgba(255,255,255,.74);
}

.color-item.double-size {
    flex-basis: 12rem;
}

/*$app-gray-03-darktheme child container*/
.bg-gray-03-darktheme {
    background: rgba(255,255,255,.64);
}
/*$app-gray-04-darktheme child container*/
.bg-gray-04-darktheme {
    background: rgba(255,255,255,.52);
}

/*$app-gray-06-darktheme child container*/
.bg-gray-06-darktheme {
    background: rgba(255,255,255,.36);
}

.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}

/*$app-gray-08-darktheme child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

.bg-gray-08-darktheme {
    background: rgba(255,255,255,.14);
}

/*$app-gray-12-darktheme child container*/
/*.color-item .details.white-text h4, 
.color-item .details.white-text p, 
.color-item .details.white-text span {
    color: #fff
}*/

.bg-gray-12-darktheme {
    background: rgba(255,255,255,.05);
}





External CSS

  1. https://statics.teams.microsoft.com/evergreen-assets/doc-assets/styles/main.css

External JavaScript

This Pen doesn't use any external JavaScript resources.