Welcome to TalkGraphics.com
Results 1 to 2 of 2

Thread: CSS Variables

  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,458

    Lightbulb CSS Variables

    Dear Xara...

    ...a time back I suggested the use of CSS Variables for inclusion in your HTML Filter export such that all elements that used a Theme Colour had their in-line style code reflect the set Theme Colour at that point instead of an absolute value.
    Since then, SVGs have been incorporated and as in-line SVGs are not strictly part of the DOM, they cannot be manipulated with CSS.

    That said the original ask is still valid for <span>s, overlays, gradients and elements that use in-line CSS style="...color: #value;...".

    What you seem to have delivered in the external stylesheet, xr_main.css, is a list of ClassNames that match to the Theme labels (blanks replaced with underscores). One of my designs:

    • .xr_c_Menu {color:#FF6300;}
    • .xr_c_MenuHover {color:#6666D0;}
    • .xr_c_Background_Grey_1 {color:#F8F9FA;}
    • .xr_c_Light_Text {color:#FFFFFF;}
    • .xr_c_Background_Grey_2 {color:#F1F3F5;}
    • .xr_c_Black {color:#000000;}
    • .xr_c_Theme_Color_1 {color:#0184FF;}
    • .xr_c_T1_Darker {color:#01427F;}
    • .xr_c_Theme_Color_2 {color:#FF2B2B;}
    • .xr_c_T2_Darker {color:#7F1515;}
    • .xr_c_Theme_Color_3 {color:#BF01FE;}
    • .xr_c_T3_Darker {color:#60017F;}
    • .xr_c_Theme_Color_4 {color:#C4FF01;}
    • .xr_c_T4_Darker {color:#627F01;}
    • .xr_c_Theme_Color_5 {color:#01FF41;}
    • .xr_c_T5_Darker {color:#017F20;}
    • .xr_c_Xara_Grey {color:#74787C;}
    • .xr_c_XG_Darker {color:#3A3C3E;}
    • .xr_c_XG_Lighter {color:#CFD1D3;}
    • .xr_c_XG_Light {color:#A0A4A8;}
    • .xr_c_XG_Dark {color:#575A5D;}
    • .xr_c_T5_Lighter {color:#AAFFC0;}
    • .xr_c_T5_Light {color:#56FF80;}
    • .xr_c_T5_Dark {color:#01BF30;}
    • .xr_c_T4_Lighter {color:#EBFFAB;}
    • .xr_c_T4_Light {color:#D7FF56;}
    • .xr_c_T4_Dark {color:#93BF01;}
    • .xr_c_T3_Lighter {color:#EAAAFF;}
    • .xr_c_T3_Light {color:#D456FF;}
    • .xr_c_T3_Dark {color:#8F01BF;}
    • .xr_c_T2_Lighter {color:#FFB8B8;}
    • .xr_c_T2_Light {color:#FF7272;}
    • .xr_c_T2_Dark {color:#BF2020;}
    • .xr_c_T1_Dark {color:#0163BF;}
    • .xr_c_T1_Light {color:#56ADFF;}
    • .xr_c_T1_Lighter {color:#AAD6FF;}
    • .xr_c_Text {color:#0F2F4C;}
    • .xr_c_Contrasting_text {color:#E5F3FF;}
    • .xr_c_Dark_Text {color:#343A40;}

    For example, what I had expected would be:
    :root {
    --xr_c_Theme_Color_4:#C4FF01;
    ...
    }
    and for any instances of that colour value in in-line CSS to be replaced with var(--xr_c_Theme_Color_4).
    That way, after publish, JS code could allow the value(s) to be changed, either as an overall 'skin' change (day to night mode, etc), or high contrast, or individual colour tweaks.

    As now delivered, I have no clear vision on how access to the ClassNames will actually achieve anything.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,653

    Default Re: CSS Variables

    As now delivered, I have no clear vision on how access to the ClassNames will actually achieve anything.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •