History: CSS Variables in Tiki

Background info on CSS variables

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 tables and 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

    --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; 

As the docs on CSS variables show, they are placed in one or more arrays, each headed by a selector. These arrays, for a theme, are usually in the theme's _css-variables.scss file, or they can be placed at the end of the theme's _variables.scss file. This positions the arrays after the SCSS variables are defined, which CSS variables may require.

Look & Feel customization

To redefine one or more of the CSS variables, the variable name and the new value for it can be input in the Look & Feel admin customization text area, inside the :root array or under another appropriate selector, as indicated in the tables above. 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 listed above — 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. — This is implemented in the pre-release Bootstrap 5.3 and will be in an upcoming Tiki release.

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