Custom CSS configuration, utilizing Bootstrap Sass loops to compile a list of custom “design tokens” used to manage CoBank’s visual design language within the front-end framework.
Style guides and component libraries are intended to provide consistency to a product’s visual design language and enable UX and Development teams the ability to make design decisions more quickly and efficiently. This works best if they share, understand, and use the same visual design systems within their Figma component libraries as well as in their production codebase.
<aside> 💡 Figma developer advocate, Jake A. explains the struggle that UX & Development teams have when building and managing a design system
https://www.linkedin.com/posts/jak-e_as-an-advocate-at-figma-i-hear-the-phrase-activity-7188235992661688321-tSf7?utm_source=share&utm_medium=member_desktop
Figma developer advocate, Jake A. explains the struggle that UX & Development teams have when building and managing a design system
</aside>
CoBank’s branded custom variables (also known as CSS variables or cascading variables) are used to define and control specific values across the style sheet. They are set using custom property notation—e.g., --bs-blue: #005288; and implemented in our stylesheet via CSS selector properties—e.g., background: var(—bs-blue);
/* application scss */
:root {
--bs-body-color: #272c2f;
--bs-border-radius: .375rem;
--bs-primary-rgb: 0, 82, 136;
}
body {
color: var(--bs-body-color);
}
.alert {
--bs-alert-border-radius: var(--bs-border-radius);
border-radius: var(--bs-alert-border-radius);
}
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
/* production */
body {
color: #272c2f;
}
.alert {
border-radius: .375rem;
}
.bg-primary {
background-color: rgba(0, 82, 136, 1) !important;
}
CoBank’s custom variables are created during the application build process when _cobank.scss primitive “design token” values are mapped to _bootstrap-overrides.scss sass variables and compiled using a custom Bootstrap sass loop _root.scss.
cca-ui-lib/
├── src/
├── styles/
│ ├── config/
│ │ ├── _index.scss
[1. │ │ ├── _bootstrap-config.scss](<https://ethayer.notion.site/CoBank-Theme-8115fa5c3167446f956d5bde6b572a6e>) // Bootstrap configuration
[2. │ │ └── _root.scss](<https://ethayer.notion.site/CoBank-Theme-8115fa5c3167446f956d5bde6b572a6e>) // sass loops
│ │
│ ├── variables/
[3. │ │ ├── _cobank.scss](<https://ethayer.notion.site/CoBank-Theme-8115fa5c3167446f956d5bde6b572a6e>) // primitive tokens
[4. │ │ ├── _bootstrap-overrides.scss](<https://ethayer.notion.site/CoBank-Theme-8115fa5c3167446f956d5bde6b572a6e>) // mapped tokens
│ │
│ ├── mixins/
│
└── _index.scss
During the build process, Bootstrap compiles the new set of variables into the base stylesheet and applies the compiled values targeted by: HTML element, component, and utility selectors.
These variables are used throughout our style sheets and markup classes to change the theme at a granular level. This makes it easier to manage and modify the visual design style.
// _button.scss
.btn-custom {
--bs-btn-bg: var(--bs-blue-grey-dark);
--bs-btn-color: var(--bs-primary-800);
/* or */
background: var(--bs-blue-grey-dark);
color: var(--bs-primary-800);
}
<!-- Button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Alert -->
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
cobank-theme-v1.0We recommend using CSS custom variables (also known as CSS variables or cascading variables) to define and control specific values across our styling layer. They are set using custom property notation, e.g., --bs-blue: #005288; and implemented in our stylesheet via CSS selector properties, e.g., background: var(—bs-blue); or via utility classes in the markup, e.g., class=”bg-success-subtle border-success”.