Joomla! Issue Tracker | Joomla! CMS #41105 - Hard coded colors instead of css variables

No Code Attached Yet

hans2103
3 Jul 2023

Media/templates/site/cassiopeia/scss/vendor/bootstrap/_buttons.scss

what is the use of hard coded colors when we work with css variables instead?

joomla-cms/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_buttons.scss

Lines 17 to 39 in 3a44db8

    
             color: $gray-800; 
        
             background-color: $white; 
        
             border-color: $gray-400; 
        
             &:hover, 
        
             &:focus { 
        
               color: $gray-800; 
        
               background-color: $gray-100; 
        
             } 
        
           } 
        
           .article-info .association, 
        
           .cat-list-association { 
        
             .btn-secondary { 
        
               font-weight: 700; 
        
               color: $white; 
        
               background-color: $gray-600; 
        
               border-color: $gray-400; 
        
               &:hover, 
        
               &:focus { 
        
                 color: $white; 
        
                 background-color: $gray-800;

hans2103 - open - 3 Jul 2023

joomla-cms-bot - change - 3 Jul 2023

Labels

Added: No Code Attached Yet

joomla-cms-bot - labeled - 3 Jul 2023

brianteeman - comment - 3 Jul 2023

are you referring to using $white instead of var(--something) ??

hans2103 - comment - 3 Jul 2023

See screenshot below where .btn-secondary has both css variables as scss variables.

Joomla! Issue Tracker - CMS

[#41105] - Hard coded colors instead of css variables

Add a Comment

	color: $gray-800;
	background-color: $white;
	border-color: $gray-400;

	&:hover,
	&:focus {
	color: $gray-800;
	background-color: $gray-100;
	}
	}

	.article-info .association,
	.cat-list-association {
	.btn-secondary {
	font-weight: 700;
	color: $white;
	background-color: $gray-600;
	border-color: $gray-400;

	&:hover,
	&:focus {
	color: $white;
	background-color: $gray-800;