@function hex2rgb($hexColor) { @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}"; } :root { /* Theme Color Palette */ /* Neutrals */ --color-black: #{hex2rgb(#000000)}; --color-dark-gray: #{hex2rgb(#333333)}; //80% --color-gray: #{hex2rgb(#afafaf)}; //31.5% --color-light-gray: #{hex2rgb(#f3f3f3)}; //4.8% --color-white: #{hex2rgb(#ffffff)}; /* Forms */ --color-valid: #{hex2rgb(#089E00)}; /* Brand Colors */ --color-brick-red: #{hex2rgb(#9c1e14)}; --color-reddish-orange: #{hex2rgb(#de5e36)}; --color-banana-yellow: #{hex2rgb(#ffc400)}; --color-taxicab-yellow: #{hex2rgb(#e3d54a)}; --color-dusk-blue: #{hex2rgb(#244c84)}; --color-brown-grey: #{hex2rgb(#939393)}; --color-dirty-salmon: #{hex2rgb(#f0eeea)}; --color-purple: #{hex2rgb(#924db1)}; } @mixin color-group-light { --color-primary-1: var(--color-banana-yellow); --color-primary-2: var(--color-reddish-orange); --color-primary-3: var(--color-purple); --color-background: var(--color-white); --color-background-muted: var(--color-dirty-salmon); --color-background-highlight: var(--color-taxicab-yellow); --color-text: var(--color-dark-gray); --color-text-print: var(--color-black); --color-text-muted: var(--color-gray); --color-text-error: var(--color-brick-red); --color-text-valid: var(--color-valid); --color-text-inverse: var(--color-white); --color-text-metadata: var(--color-dark-gray); /* Black and white relative to the color group background */ --color-high-contrast: var(--color-black); --color-high-contrast-inverse: var(--color-white); /* Links */ --color-link: var(--color-brick-red); --text-decoration-link: underline; --color-link-hover: var(--color-white); --text-decoration-link-hover: underline; --opacity-link-hover: var(--opacity-hover); /* Navigation Links */ --color-navigation-link: var(--color-reddish-orange); --text-decoration-navigation-link: none; --color-navigation-link-hover: var(--color-white); --text-decoration-navigation-link-hover: none; --opacity-navigation-link-hover: var(--opacity-hover); /* Tags */ --color-tag-text: var(--color-dusk-blue); --color-tag-background: var(--color-banana-yellow); --color-tag-highlight: var(--color-dusk-blue); --color-tag-hover-text: var(--color-white); --color-tag-hover-background: var(--color-reddish-orange); --opacity-tag-hover: var(--opacity-hover); /* Buttons */ --color-button-text: var(--color-dark-gray); --color-button: var(--color-banana-yellow); --color-button-text-pressed: var(--color-dark-gray); --color-button-pressed: var(--color-banana-yellow); --transform-button-pressed: translate(10px, -10px); --color-button-text-hover: var(--color-dark-gray); --color-button-hover: var(--color-banana-yellow); --opacity-button-hover: var(--opacity-hover); --transform-button-hover: translate(10px, -10px); /* Borders */ --color-border-subtle: var(--color-gray); --color-border-standard: var(--color-dark-gray); --color-border-bold: var(--color-reddish-orange); } @mixin color-group-dark { --color-primary-1: var(--color-banana-yellow); --color-primary-2: var(--color-reddish-orange); --color-primary-3: var(--color-purple); --color-background: var(--color-dark-gray); --color-background-muted: rgb(var(--color-background)); --color-background-highlight: var(--color-taxicab-yellow); --color-text: var(--color-white); --color-text-print: var(--color-black); --color-text-muted: var(--color-brown-gray); --color-text-error: var(--color-brick-red); --color-text-valid: var(--color-valid); --color-text-inverse: var(--color-dark-gray); --color-text-metadata: var(--color-white); /* Black and white relative to the color group background */ --color-high-contrast: var(--color-white); --color-high-contrast-inverse: var(--color-black); /* Links */ --color-link: var(--color-white); --text-decoration-link: underline; --color-link-hover: var(--color-white); --text-decoration-link-hover: underline; --opacity-link-hover: var(--opacity-hover); /* Navigation Links */ --color-navigation-link: var(--color-white); --text-decoration-navigation-link: none; --color-navigation-link-hover: var(--color-white); --text-decoration-navigation-link-hover: none; --opacity-navigation-link-hover: var(--opacity-hover); /* Header */ --color-header-text: var(--color-white); --color-header-background: var(--color-dark-gray); --color-header-label-text: var(--color-light-gray); --color-header-button-background: var(--color-reddish-orange); --color-header-button-text: var(--color-white); --color-header-button-hover-text: var(--color-white); --color-header-icon: var(--color-white); --color-header-icon-hover: var(--color-reddish-orange); /* Tags */ --color-tag-text: var(--color-dusk-blue); --color-tag-background: var(--color-banana-yellow); --color-tag-highlight: var(--color-dusk-blue); --color-tag-hover-text: var(--color-white); --color-tag-hover-background: var(--color-reddish-orange); --opacity-tag-hover: var(--opacity-hover); /* Buttons */ --color-button-text: var(--color-dark-gray); --color-button: var(--color-banana-yellow); --color-button-text-pressed: var(--color-dark-gray); --color-button-pressed: var(--color-banana-yellow); --transform-button-pressed: translate(10px, -10px); --color-button-text-hover: var(--color-dark-gray); --color-button-hover: var(--color-banana-yellow); --opacity-button-hover: var(--opacity-hover); --transform-button-hover: translate(10px, -10px); /* Borders */ --color-border-bold: var(--color-border-bold); //none --color-border-standard: var(--color-border-standard); //none --color-border-subtle: var(--color-border-subtle); //none } :root { @include color-group-light; /* Borders */ --border-subtle: 2px dashed rgb(var(--color-border-subtle)); --border-standard: 3px solid rgb(var(--color-border-standard)); --border-bold: 5px dashed rgb(var(--color-border-bold)); } /*Dark and Light Groups */ .u-color-group-dark { @include color-group-dark; } .u-color-group-light { @include color-group-light; }