Define base colors

[chrisdarke42]

A base set of colors needs to be defined, and this would be set as variables that can then be used to override Bootstrap5 variables, or to override custom theme css.

Next steps

1. Define what colors would be included, and how they would be used (backgrounds, etc)
2. Include the colours in a comment
3. Discuss with team
4. Implement in a colors scss file

[schwent]

@cjwetherington - This may give you a good start on defining colors: https://github.com/psu-libraries/ul-web/blob/main/vendor/custom/themes/f5_psul/scss/base/_global-variables.scss

[cjwetherington]

@schwent Thanks, Karen! Unfortunately I can't access that repo. I was going to start with the latest version of the PSU color guide and go from there.

[schwent]

These are the colors we use on the psul site currently:

// Theme Colors $warm-blue: #6888c2; // body anchors $navy-blue: #2c76c7; // darker blue for backgrounds $pale-blue: #b8d1ff; // used in the Ask page for rollover bg $off-white: #fafafa; // page background $valchar-white: #fefefe; // used on the homepage font color for Research Help and Tools $off-off-white: darken($off-white, 10%); // used in collection panes $attn-yellow: #ebc100; // attention grabbing yellow $midnight-blue: #0a0f15; // high alert links color $valchar-blue: #2b76c7; // used on the background color of buttons on the homepage for Research Help and Tools $subtle-gray: #b5b5b5; $valchar-grey: #363636; // used on the homepage background for Research Help and Tools $valchar-light-grey: #f2f2f2; // used on the homepage background for Expert Help

$light-blue: #356ed7; // top-bar buttons $psu-light-blue: rgb(150, 190, 230);

$primary-color: $navy-blue; $body-font-color: #000000; $topbar-bg: $navy-blue; $topbar-dropdown-bg: $navy-blue; $topbar-dropdown-link-bg: $navy-blue; $topbar-link-bg-hover: $navy-blue; $anchor-font-color-hover: scale-color($primary-color, $lightness: -50%);

[schwent]

I added the global variables file to psulib_base template, so this may be a good start for this issue.

[cjwetherington]

These are the values from the PSU Color Guide:

Primary

001e44 Nitanny Navy

1e407c Beaver Blue

ffffff White Out

Secondary

96bee6 Pugh Blue

Classic Accents

a2aaad PA Limestone

e4e5e7 PA Limestone (Light)

f2f2f4 PA Limestone (Max Light)

314d64 PA Slate

ccdae6 PA Slate (Light)

eef3f7 PA Slate (Max Light)

4a7729 Penn's Forest

262626 Old Coaly

6a3028 Land-Grant

bf8226 Lion's Roar

f9eddc Lion's Roar (Light)

fffaf2 Lion's Roar (Max Light)

b88965 Lion Shrine

f7f2ee Lion Shrine (Light)

fdfbf5 Lion Shrine (Max Light)

ac8dce Stately Atherton

bc204b Original '87

Vibrant Accents

009cde PA Sky

ccf0ff PA Sky (Light)

e6f7ff PA Sky (Max Light)

3ea39e PA Creek

cfeceb PA Creek (Light)

edf8f7 PA Creek (Max Light)

ffd100 Bright Keystone

e98300 Invent Orange

f2665e Dawn of Discovery

491d70 Perpetual Wonder

008755 Green Opportunity

99cc00 Future's Calling

000321 PA Potential

Links

005fa9 PA Link

cce9ff PA Link Light

[whereismyjetpack]

@schwent - add in any hex keys that aren't in the variables. // break into colors file.

[cjwetherington]

^ @cjwetherington will spearhead the above.

[chrisdarke42]

Merged in in https://github.com/psu-libraries/psulib_base/pull/20

[chrisdarke42]

Closing for now, any changes can be made in future commits