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 4px #F15A22;font-weight:700;font-size:1.5rem;">Color (Standardized, new naming)</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:#0C2340;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Blue
<strong>CSS Class:</strong> .blue
<strong>Hex:</strong> #0C2340</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:#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:#025EFC;"></div>
<div class="color p-3 border">
<pre><strong>Name:</strong> Blue Highlight (UI)
<strong>CSS Class:</strong> .blue-highlight
<strong>Hex:</strong> #025EFC</pre>
</div>
</div>
</div>
/* components/01-visual-styling/01-branding-standards/01-background/background.scss */
/* BEGIN background.scss */
// $blue: #0C2340;
// $blue-b: #495970;
// $blue-c: #344c6b;
// $orange: #F15A22; UTSA Orange
// $orange-a11y: #D3430D; UTSA Orange (Web Accessible)
// $white: #FFFFFF;
// $white-b: #F6F6F6;
// $grey: #DBDEE3; Very light grey
// $grey-b: #B4B8BC; Light grey
// $grey-c: #949494; Mid Grey
// $grey-d #606060; Dark Grey
// $grey-e: #232323; Very Dark Grey
// $blue-highlight: #025EFC; Highlight Blue (UI)
// Old Vendor supplied definitions
/*
.navy-bg {
background-color: #0C2340;
}
.color-darkblue {
color: #0c2340;
}
.cool-orange {
color: #F15A22;
}
.color-orange {
color: #d3430d;
}
.color-white {
color: #fff !important;
}
.bg-cool-grey {
background-color: #dbdee3;
}
.bg-cool-grey-stripe {
background-color: #b4b8bc;
}
.color-blue {
color: $blue-highlight;
}
.light-black {
color: #232323;
}
.light-grey {
color: #949494;
}
.color-black {
color: #000;
}
.bg-orange {
background-color: #F15B22;
}
.grey-bg {
background-color: #dbdee3;
}
.darkblue-bg {
background-color: #0c2340;
}
.dark-grey-bg {
background-color: #606060;
}
.white-bg {
background-color: #fff;
}
*/
// New Design Token definitions
.blue {
color: $blue;
}
.blue-b {
color: $blue-b;
}
.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;
}
/* Dark Mode - Global Styles */
@include color-mode(dark) {
.blue {
color:$white;
}
.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 */
{{!-- <h3>Legacy Colors (Vendor Supplied)</h3>
<div class="row">
{{#each foreground-legacy }}
<div class="col-3 p-0 border">
<div class="color" style="color: {{ hex }}">
<pre>{{ name }} {{ class }}
<span>{{ hex }}</span></pre>
</div>
</div>
{{/each}}
</div> --}}
<div class="p-3"><h3 class="py-2" style="border-bottom:solid 4px #F15A22;font-weight:700;font-size:1.5rem;">Color (Standardized, new naming)</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>