Most of these color declarations were originally done by the web subcontractor on this project. As such, knowledge of UTSA colors and naming was minimal. Items to cover in future updates:
<div class="p-3">
<h3 class="py-2" style="border-bottom:solid 3px #F15A22;">Colors</h3>
</div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
<div class="col p-4">
<div class="border" style="height:150px; background-color:#032044;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Blue
<strong>CSS Class:</strong> .blue
<strong>Hex:</strong> #032044</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#F15A22;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Orange
<strong>CSS Class:</strong> .orange
<strong>Hex:</strong> #F15A22</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#D3430D;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Orange (Accessible)
<strong>CSS Class:</strong> .orange-a11y
<strong>Hex:</strong> #D3430D</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#C8DCFF;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Light Blue
<strong>CSS Class:</strong> .light-blue
<strong>Hex:</strong> #C8DCFF</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#FFFFFF;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> White
<strong>CSS Class:</strong> .white
<strong>Hex:</strong> #FFFFFF</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#F6F6F6;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> White B
<strong>CSS Class:</strong> .white-b
<strong>Hex:</strong> #F6F6F6</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#DBDEE3;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Grey #01
<strong>CSS Class:</strong> .grey
<strong>Hex:</strong> #DBDEE3</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#B4B8BC;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Grey #02
<strong>CSS Class:</strong> .grey-b
<strong>Hex:</strong> #B4B8BC</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#949494;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Grey #03
<strong>CSS Class:</strong> .grey-c
<strong>Hex:</strong> #949494</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#606060;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Grey #04
<strong>CSS Class:</strong> .grey-d
<strong>Hex:</strong> #606060</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#151515;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Grey #05
<strong>CSS Class:</strong> .grey-e
<strong>Hex:</strong> #151515</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#000000;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Black
<strong>CSS Class:</strong> .black
<strong>Hex:</strong> #000000</pre>
</div>
</div>
<div class="col p-4">
<div class="border" style="height:150px; background-color:#265BF7;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Blue Highlight (UI)
<strong>CSS Class:</strong> .blue-highlight
<strong>Hex:</strong> #265BF7</pre>
</div>
</div>
</div>
/* components/01-visual-styling/01-branding-standards/01-background/background.scss */
/* BEGIN background.scss */
.blue {
color: $blue;
}
.blue-b {
color: $blue-b;
}
.light-blue {
color: $light-blue;
}
.orange {
color: $orange;
}
.orange-a11y {
color: $orange-a11y;
}
.white {
color: $white;
}
.white-b {
color: $white-b;
}
.grey {
color: $grey;
}
.grey-b {
color: $grey-b;
}
.grey-c {
color: $grey-c;
}
.grey-d {
color: $grey-d;
}
.grey-e {
color: $grey-e;
}
.blue-highlight {
color: $blue-highlight;
}
.blue-bg {
background-color: $blue;
}
.blue-b-bg {
background-color: $blue-b;
}
.blue-c-bg {
background-color: $blue-c;
}
.grey-bg {
background-color: $grey;
}
.orange-bg {
background-color: $orange;
}
.white-bg {
background-color: $white;
}
.white-b-bg {
background-color: $white-b;
}
.orange-a11y-bg {
background-color: $orange-a11y;
}
.grey-b-bg {
background-color: $grey-b;
}
.grey-c-bg {
background-color: $grey-c;
}
.grey-d-bg {
background-color: $grey-d;
}
.grey-e-bg {
background-color: $grey-e;
}
/* BEGIN rebrand stuff */
// + Brand Colors
$midnight: #032044;
$utsa-orange: #F15A22;
$utsa-orange-a11y: #d3430d;
$talavera-blue: #265bf7;
$river-mist: #c8dcff;
$anti-flash: #edeff2;
$platinum: #dce0e6;
$french-gray: #b4bdc7;
// + Colors
$utsa-blue: $midnight;
$orange-a11y: $utsa-orange-a11y;
$white: #fff;
$black: #000;
// + Blues
$blue-highlight: $talavera-blue;
$blue-02: $french-gray;
// + Grays
$gray-00: $anti-flash;
$gray-01: $platinum;
$gray-03: $french-gray;
$gray-05: #232323;
$gray-f6: #f6f6f6;
/* Dark Mode - Global Styles */
@include color-mode(dark) {
.blue {
color:$white;
}
.light-blue {
color: $light-blue;
}
.white {
color:$white;
}
.orange {
color:$orange;
}
.orange-a11y {
color:$orange;
}
.grey {
color: $grey;
}
.grey-c, .grey-d {
color: $grey-b;
}
.grey-bg {
.blue {
color:$blue;
}
.white {
color:$blue;
}
.orange {
color:$orange-a11y;
}
.orange-a11y {
color:$orange-a11y;
}
.grey {
color: $grey-d;
}
}
.blue-bg {
.blue {
color:$white;
}
.white {
color:$white;
}
.orange {
color:$orange;
}
.orange-a11y {
color:$orange;
}
.grey {
color: $grey;
}
}
.orange-bg {
.blue {
color:$blue;
}
.white {
color:$white;
}
.orange {
color:$white;
}
.orange-a11y {
color:$grey;
}
.grey {
color: $grey;
}
}
.orange-a11y-bg {
.blue {
color:$blue;
}
.white {
color:$white;
}
.orange {
color:$white;
}
.orange-a11y {
color:$grey;
}
.grey {
color: $grey;
}
}
}
/* Dark Mode - Global Styles END */
/* END background.scss */
<div class="p-3"><h3 class="py-2" style="border-bottom:solid 3px #F15A22;">Colors</h3></div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
{{#each foreground }}
<div class="col p-4">
<div class="border" style="height:150px; background-color:{{ hex }};"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> {{ name }}
<strong>CSS Class:</strong> {{ class }}
<strong>Hex:</strong> {{ hex }}</pre>
</div>
</div>
{{/each}}
</div>