T4 framework - setting 'theme-colors-rgb'

ccsupport

Setting basic Theme Colors via T4 Template settings in Joomla works.
Setting T4 'theme-colors' via SCSS by editing '/scss/_variables.scss' also works.
Neither sets RGB versions of Theme Colors e.g. '--t4-primary-rgb' or '--t4-info-rgb' which are Boostrap 5 defaults.

So we are trying to set our own 'theme-colors-rgb' via SCSS by adding to '/scss/_variables.scss' the following around line 104:

// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb

and then compile SCSS but RGB versions of '$theme-colors' are not created.

How do we neatly add our own RBG colors?

saguaros

Hi ccsupport

Correct me if I'm wrong, by default, there is set of rgb:

--t4-primary-rgb: 13,110,253;
--t4-secondary-rgb: 108,117,125;
.....

You want to have a new set:
--theme-primary-rgb: your_color_here;
--theme-secondary-rgb: your_color_here;
.....

Is that correct?

If not, kindly share your site's URL + super admin account and clarify of how you want to achieve so I can help.

Regards

ccsupport

saguaros

Yes, we want to have a new set. One can use custom.css and put e.g.

:root {
  --t4-primary-rgb: 0, 129, 194;
  --t4-secondary-rgb: 86, 92, 116;
  --t4-success-rgb: 56, 158, 120;
}

but this is not a 'neat' solution. It's an override of default BS5 values, which should be overriden by T4 framework and should be set by SCSS (like defaults are in BS5) without a need to use custom.css to override them. The T4 framework in 'scss/variables.scss' overrides the BS5 default 'theme-colors' and sets T4 prefix:

// Prefix for :root CSS variables
$variable-prefix:             t4-;

So we are trying to set our own 'theme-colors-rgb' via SCSS by adding to '/scss/variables.scss' the following around line 104:

// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb

and then compile SCSS but RGB versions of '$theme-colors' are not created.

The code above is copied from T4 plugin 'themes/base/vendors/bootstrap5/scss/variables.scss', lines 93-95 and it's missing from T4 template in 'scss/variables.scss'.

saguaros

ccsupport

You can define this in custom SCSS in template:

$my-theme-colors: (
  "primary":    $orange,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

$theme-colors-rgb: map-loop($my-theme-colors, to-rgb, "$value");

and change the color as you wish.