Auro color swatch compare sheet

SassMeister-input-HTML.html

<div class="flex-outer">
  
<div class="flex-inner">
  <div class="box blackType">These are current colors being used under legacy names</div>
  <div class="box blackType gray-100">gray-100 / cloud</div>
  <div class="box blackType gray-200">gray-200 / disabled</div>
  <div class="box gray-500">gray-500 / orca</div>
</div>

<div class="flex-inner">
  <div class="box blackType">For comparison display, nothing changed</div>
  <div class="box blackType midnight-100">midnight-100</div>
  <div class="box blackType midnight-200">midnight-200</div>
  <div class="box midnight-300">midnight-300</div>
  <div class="box midnight-400">midnight-400</div>
  <div class="box midnight-500">midnight-500</div>
</div>

<div class="flex-inner">
  <div class="box blackType">These colors need a new home, they are a blue/gray color</div>
  <div class="box manatee">manatee</div>
  <div class="box unionblue">unionblue</div>
</div>

<div class="flex-inner">
  <div class="box blackType">For comparison display, nothing changed</div>
  <div class="box blackType atlas-100">atlas-100</div>
  <div class="box blackType atlas-200">atlas-200</div>
  <div class="box atlas-300">atlas-300</div>
  <div class="box blackType">Why do we need two different colors for this?</div>
  <div class="box atlas-400">atlas-400 (#0074ca)</div>
  <div class="box ui">UI (#0074c8)</div>
  <div class="box blackType">-----------------</div>
  <div class="box atlas-500">atlas-500</div>
</div>

</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

.flex-outer {
  display: flex;
  justify-content: flex-start;
  font-family: sans-serif;
  text-align: center;
}

.flex-inner {
  display: flex;
  flex-direction: column;
  margin-right: 100px;
}

.box {
  display: flex;
  width: 200px;
  height: 100px;
  color: white;
  align-items: center;
  justify-content: center;
}

.blackType {
  color: black;
}

.ui {
  background: #0074c8;
}
.atlas-400 {
  background: #0074ca;
}

.manatee {
  background: #9fabbb;
}

.unionblue {
  background: #626b79;
}

.gray-100 {
  background: #f7f7f7;
}

.gray-200 {
  background: #dbdbdb;
}

.gray-500 {
  background: #222222;
}

.midnight-100 {
  background: #c1daf0;
}

.midnight-200 {
  background: #569ed7;
}

.midnight-300 {
  background: #156fad;
}

.midnight-400 {
  background: #01426a;
}

.midnight-500 {
  background: #00274a;
}




.atlas-100 {
  background: #cde6ff;
}

.atlas-200 {
  background: #6bb7fb;
}

.atlas-300 {
  background: #2492eb;
}

.atlas-400 {
  background: #0074ca;
}

.atlas-500 {
  background: #054687;
}

SassMeister-output.css

.flex-outer {
  display: flex;
  justify-content: flex-start;
  font-family: sans-serif;
  text-align: center;
}

.flex-inner {
  display: flex;
  flex-direction: column;
  margin-right: 100px;
}

.box {
  display: flex;
  width: 200px;
  height: 100px;
  color: white;
  align-items: center;
  justify-content: center;
}

.blackType {
  color: black;
}

.ui {
  background: #0074c8;
}

.atlas-400 {
  background: #0074ca;
}

.manatee {
  background: #9fabbb;
}

.unionblue {
  background: #626b79;
}

.gray-100 {
  background: #f7f7f7;
}

.gray-200 {
  background: #dbdbdb;
}

.gray-500 {
  background: #222222;
}

.midnight-100 {
  background: #c1daf0;
}

.midnight-200 {
  background: #569ed7;
}

.midnight-300 {
  background: #156fad;
}

.midnight-400 {
  background: #01426a;
}

.midnight-500 {
  background: #00274a;
}

.atlas-100 {
  background: #cde6ff;
}

.atlas-200 {
  background: #6bb7fb;
}

.atlas-300 {
  background: #2492eb;
}

.atlas-400 {
  background: #0074ca;
}

.atlas-500 {
  background: #054687;
}

SassMeister-rendered.html

<div class="flex-outer">
  
<div class="flex-inner">
  <div class="box blackType">These are current colors being used under legacy names</div>
  <div class="box blackType gray-100">gray-100 / cloud</div>
  <div class="box blackType gray-200">gray-200 / disabled</div>
  <div class="box gray-500">gray-500 / orca</div>
</div>

<div class="flex-inner">
  <div class="box blackType">For comparison display, nothing changed</div>
  <div class="box blackType midnight-100">midnight-100</div>
  <div class="box blackType midnight-200">midnight-200</div>
  <div class="box midnight-300">midnight-300</div>
  <div class="box midnight-400">midnight-400</div>
  <div class="box midnight-500">midnight-500</div>
</div>

<div class="flex-inner">
  <div class="box blackType">These colors need a new home, they are a blue/gray color</div>
  <div class="box manatee">manatee</div>
  <div class="box unionblue">unionblue</div>
</div>

<div class="flex-inner">
  <div class="box blackType">For comparison display, nothing changed</div>
  <div class="box blackType atlas-100">atlas-100</div>
  <div class="box blackType atlas-200">atlas-200</div>
  <div class="box atlas-300">atlas-300</div>
  <div class="box blackType">Why do we need two different colors for this?</div>
  <div class="box atlas-400">atlas-400 (#0074ca)</div>
  <div class="box ui">UI (#0074c8)</div>
  <div class="box blackType">-----------------</div>
  <div class="box atlas-500">atlas-500</div>
</div>

</div>