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 and appended single hyphen are the standard format 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; 

{DIV}{DIV}

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:

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

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