History: CSS Variables in Tiki
Source of version: 6
Copy to clipboard
{HTML()}<style>.tab-pane { padding: 0.5rem; }</style>{HTML}
!! Background info on CSS variables
{QUOTE()}
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., -+ ~np~--~/np~main-color: black;)+- and are accessed using the -+var()+- function (e.g., -+color: var(~np~--~/np~main-color);+- ).
-- [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]
{QUOTE}
See also: [https://css-tricks.com/a-complete-guide-to-custom-properties/]
!! CSS variables in Bootstrap
There were just 28 CSS variables in Bootstrap 4 ([https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables]). As of Bootstrap 5.2, this number, for root CSS variables, is up to approximately 70 ([https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables]). Root CSS variables have global scope. There are also component variables, with narrow scope, such as those used for [https://getbootstrap.com/docs/5.2/content/tables/#how-do-the-variants-and-accented-tables-work|tables] and [https://getbootstrap.com/docs/5.2/components/navbar/#css|navbars], and as shown below in the examples of the top and topbar zone CSS variables.
!! The Tiki CSS variable syntax
To distinguish SCSS variables created specifically for Tiki from Bootstrap or other SCSS variables, they have a -+$tiki-+- prefix (implementation of this is a work in progress). The same pattern is used for Tiki's CSS variables, with -+ --tiki- +-. (The prepended two hyphens are the standard notation for CSS variables.)
!! CSS variables currently used by Tiki
{TABS(name="user_tabset_01" tabs="Tiki 26|Tiki 25" toggle="y" panelbgcolor="#dbd8e5")} For Tiki 26, the CSS variables used for the top and topbar module zones (navbars) are reorganized. Instead of having separate CSS variables with specific color ("light" or "dark") names, in Tiki 26 the variable names don't mention color themselves Instead, they are used in each combination of color and location -- ''light / top'', ''light / topbar'', ''dark / top'', and ''dark / topbar''. This will facilitate using them with whole-website color mode switching in a Tiki release following the upcoming Bootstrap 5.3.
|| __Selector and Variable Name__ | __Notes__
__.tiki-top-nav-light {__ | Notes coming soon.
--tiki-top-bg |
--tiki-top-color |
--tiki-top-link-color |
--tiki-top-link-hover-color |
--tiki-top-link-active-color |
--tiki-top-link-hover-bg |
--tiki-top-link-active-bg |
--tiki-top-border |
--tiki-top-light-box-shadow |
__}__ |
|
__.tiki-topbar-nav-light {__ |
--tiki-topbar-bg |
--tiki-topbar-color |
--tiki-topbar-link-color |
--tiki-topbar-link-hover-color |
--tiki-topbar-link-active-color |
--tiki-topbar-link-hover-bg |
--tiki-topbar-link-active-bg |
--tiki-topbar-border |
--tiki-topbar-box-shadow |
__}__ |
|
__.tiki-top-nav-dark {__ |
--tiki-top-bg |
--tiki-top-color |
--tiki-top-link-color |
--tiki-top-link-hover-color |
--tiki-top-link-hover-bg |
--tiki-top-border |
--tiki-top-box-shadow |
__}__ |
|
__.tiki-topbar-nav-dark {__ |
--tiki-topbar-bg |
--tiki-topbar-color |
--tiki-topbar-link-color |
--tiki-topbar-link-hover-color |
--tiki-topbar-link-hover-bg |
--tiki-topbar-border |
--tiki-topbar-box-shadow |
__}__ |
|
__:root {__ |
--tiki-top-border-width |
--tiki-topbar-border-width |
__}__ |
| The variables below are used on the new (Unified Admin Backend) admin pages. These names will soon also be updated following the same pattern as the variable names above.
__.tiki-admin {__ |
--tiki-admin-navbar-dark-bg |
--tiki-admin-dropdown-dark-color |
--tiki-admin-dropdown-dark-hover-bg |
--tiki-admin-dropdown-dark-bg |
--tiki-admin-navbar-light-bg |
--tiki-admin-dropdown-light-color |
--tiki-admin-dropdown-light-hover-color |
--tiki-admin-dropdown-light-bg |
--tiki-admin-toggle-light-bg |
--tiki-admin-navbar-dark-highlight-bg |
--tiki-admin-navbar-dark-highlight-color |
--tiki-admin-navbar-light-highlight-bg |
--tiki-admin-navbar-light-highlight-color |
__}__ |
|
__:root {__ |
~np~--tiki-page-content-top-margin~/np~ | To create white space at the top of the content area, below the site header, input an array just like this (with the one item) in the Look & Feel admin CSS Customization form, with a pixel, em, or rem size. Example: '':root { --tiki-page-content-top-margin: 15px; }''. Other global CSS variables can also be placed in this array, of course.
__}__ | ||
/////
|| __Selector and Variable Name__ | __Notes__
__:root {__ |
--tiki-top-bg-light |
--tiki-top-light-color |
--tiki-top-light-link-color |
--tiki-top-light-link-hover-color |
--tiki-top-light-link-hover-bg |
--tiki-top-light-box-shadow |
|
--tiki-topbar-bg-light |
--tiki-topbar-light-color |
--tiki-topbar-light-link-color |
--tiki-topbar-light-link-hover-color |
--tiki-topbar-light-link-hover-bg |
--tiki-topbar-light-box-shadow |
|
--tiki-topbar-light-border |
--tiki-topbar-border-width | for light and dark topbars
|
--tiki-top-bg-dark |
--tiki-top-dark-color |
--tiki-top-dark-link-color |
--tiki-top-dark-link-hover-color |
--tiki-top-dark-link-hover-bg |
--tiki-top-dark-box-shadow |
|
--tiki-top-dark-border |
--tiki-top-border-width |
|
--tiki-topbar-bg-dark |
--tiki-topbar-dark-color |
--tiki-topbar-dark-link-color |
--tiki-topbar-dark-link-hover-color |
--tiki-topbar-dark-link-hover-bg |
--tiki-topbar-dark-box-shadow |
|
--tiki-topbar-dark-border |
|
--tiki-static-top-light-border | this and the following, for Classic Tiki and Single Container layouts
--tiki-static-top-dark-border |
__}__ |
|
__header.navbar.fixed-top {__ | These are very explicit because they are used in the calculation of the site logo image; their scope is limited to header.fixed-top.
--tiki-fixed-top-border-top-width |
--tiki-fixed-top-border-right-width |
--tiki-fixed-top-border-bottom-width |
--tiki-fixed-top-border-left-width |
--tiki-top-light-border-color |
--tiki-top-dark-border-color |
__}__ | ||
Related, there are also these CSS variables for the site title and subtitle, in fixed-top position (Basic Bootstrap layout) and static position (Classic Tiki and Single Container layouts) and their default values:
~pp~
--tiki-fixed-top-site-title-font-size: 1.8rem; // Fixed-top position (Basic Bootstrap layout)
--tiki-fixed-top-site-title-font-weight: 700;
--tiki-fixed-top-site-subtitle-font-size: 1.4rem;
--tiki-fixed-top-site-subtitle-font-weight: 400;
--tiki-site-title-font-size: 2rem; // Static position (Classic Tiki and Single Container layouts)
--tiki-site-title-font-weight: 700;
--tiki-site-subtitle-font-size: 1.5rem;
--tiki-site-subtitle-font-weight: 400;
~/pp~
{TABS}
----
As the docs on CSS variables show, they are placed in one or more arrays, each headed by a selector. These arrays, in a theme's files, are usually in the theme's _css-selectors.scss file, or they can be placed at the end of the theme's variables file. This positions the arrays after the SCSS variables are defined, which CSS variables may require. This example is from the Tiki 25 FiveAlive/Orange:
{CODE(style="css")}
// CSS variables / custom properties for base_files/scss/_tiki-pagetop_colors.scss -- Interpolation info from https://developersink.com/css/css-custom-properties-sass-variables/
// Background images (actual images or CSS gradients, etc.), can be assigned as well as background colors.
:root {
--tiki-top-bg-light: linear-gradient(to right, #c44a23 0%,#c64b23 10%,#dc5823 34%,#e96023 58%,#f06423 87%,#f06423 100%);
--tiki-top-light-color: #{$navbar-light-color};
--tiki-top-light-link-color: #{$navbar-light-link-color};
--tiki-top-light-link-hover-color: #{$navbar-light-link-hover-color};
--tiki-topbar-bg-light: #{$topbar-light-color};
--tiki-topbar-light-color: #{$topbar-light-color};
--tiki-topbar-light-link-color: #{$navbar-light-link-color};
--tiki-topbar-light-link-hover-color: #{$navbar-dark-link-hover-color};
--tiki-top-bg-dark: linear-gradient(to right, #c44a23 0%,#c64b23 10%,#dc5823 34%,#e96023 58%,#f06423 87%,#f06423 100%);
--tiki-top-dark-color: #{$top-dark-color};
--tiki-top-dark-link-color: #{$navbar-dark-link-color};
--tiki-top-dark-link-hover-color: #{$navbar-dark-link-hover-color};
--tiki-topbar-bg-dark:#{$topbar-dark-bg};
--tiki-topbar-dark-color: #{$navbar-dark-color};
--tiki-topbar-dark-link-color: #{$navbar-dark-link-color};
--tiki-topbar-dark-link-hover-color: #{$navbar-dark-link-hover-color};
}
{CODE}
!! Look & Feel customization
To redefine one or more of the CSS variables, currently it works to input the variable name and the new value in the Look & Feel admin customization text area, inside the -+:root +- array.
This could also be in a custom.css file.
!! Future possibilities
* A dedicated Look & Feel "CSS Variables" text area provided so that just the variables could be entered and the root array syntax would be added on the backend.
* New Tiki CSS variables in addition to those for pagetop colors -- what other Tiki page elements should easy customization be enabled for?
* Site color controls (or other controls) available to site users on the public side, such as for dark mode, like switching themes but not needed a page refresh -- [https://pedromarquez.dev/blog/2022/7/dark-mode-css]
!! References:
* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
* https://css-tricks.com/a-complete-guide-to-custom-properties/
* https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/
* https://getbootstrap.com/docs/5.3/customize/color-modes/ (This is already in development for Tiki.)
* https://getbootstrap.com/docs/5.2/customize/css-variables/
* https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
* https://pedromarquez.dev/blog/2022/7/dark-mode-css