This package is deprecated and won't get updated in future. If you still have a need for it upgrade to hTWOo
CSS Variables in SPFx
Getting started
To use CSS variable in your next project simply install this package as a dependency.
npm install spfx-uifabric-themes --save
On your project in the web part code or extension code import the dependency.
import styles from './HelloWorldWebPart.module.scss';
import * as strings from 'HelloWorldWebPartStrings';
/* ⌄⌄⌄⌄ import dependency here ⌄⌄⌄⌄ */
import uiFabricCSS from '@n8d/htwoo-core/legacy';
Somewhere in the render method call the uiFabricCSSVariable() methode.
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
uiFabricCSS();
this.domElement.innerHTML = `
<div class="${ styles.helloWorld}">
<div class="${ styles.container}">
<div class="${ styles.row}">
<div class="${ styles.column}">
...
`
The call of the function will convert all theme slots into native CSS Variable and are available for the use in your CSS. If multiple web parts are registered on the page this conversion will be only made once to optimise the performance.
In CSS simply reference to the theme slot variables.
.row {
@include ms-Grid-row;
color: var(--ouif-white); /* use theme color set to white */
background-color: var(--ouif-themeDark); /* use color defined for themeDark. */
padding: 20px;
}
The result on the web part is exactly the same as using the SASS variables.
Further reading on CSS Variables support for SPFx projects through spfx-uifabric-themes
CSS Variables and case-sensitivity
In general CSS Variables are case sensitive and should be written in the correct case in order to get applied properly. The code register these theme CSS variables make sure that CAML case as well as lowercase variantes of the CSS variable exist.
For example when the background overlay should get applied.
.myClass{
background-color: var(--ouif-BackgroundOverlay);
}
The same color will be applied when written like this.
.myClass{
background-color: var(--ouif-backgroundoverlay);
}
Available CSS Variables
All color values shown here are based on the default theme and automatically adjust to your theme settings.
Reference of all registered theme slots
:root {
--ouif-AccentLines: #2b88d8;
--ouif-AccentText: #0078d4;
--ouif-BackgroundOverlay: rgba(255, 255, 255, 0.85);
--ouif-BodyText: #333333;
--ouif-ButtonBackground: #f8f8f8;
--ouif-ButtonBorder: #a6a6a6;
--ouif-ButtonDisabledBackground: #f8f8f8;
--ouif-ButtonDisabledBorder: #eaeaea;
--ouif-ButtonDisabledText: #a6a6a6;
--ouif-ButtonGlyph: #666666;
--ouif-ButtonGlyphActive: #333333;
--ouif-ButtonGlyphDisabled: #c8c8c8;
--ouif-ButtonHoverBackground: #deecf9;
--ouif-ButtonHoverBorder: #c7e0f4;
--ouif-ButtonPressedBackground: #c7e0f4;
--ouif-ButtonPressedBorder: #2b88d8;
--ouif-ButtonText: #333333;
--ouif-CommandLinks: #666666;
--ouif-CommandLinksDisabled: #a6a6a6;
--ouif-CommandLinksHover: #0078d4;
--ouif-CommandLinksPressed: #004578;
--ouif-CommandLinksSecondary: #212121;
--ouif-ContentAccent1: #0078d4;
--ouif-ContentAccent2: #00485b;
--ouif-ContentAccent3: #288054;
--ouif-ContentAccent4: #767956;
--ouif-ContentAccent5: #ed0033;
--ouif-ContentAccent6: #682a7a;
--ouif-DialogBorder: #f4f4f4;
--ouif-DisabledBackground: #f8f8f8;
--ouif-DisabledLines: #eaeaea;
--ouif-DisabledText: #a6a6a6;
--ouif-EmphasisBackground: #0078d4;
--ouif-EmphasisBorder: #005a9e;
--ouif-EmphasisHoverBackground: #005a9e;
--ouif-EmphasisHoverBorder: #004578;
--ouif-EmphasisText: #ffffff;
--ouif-FooterBackground: rgba(255, 255, 255, 0.85);
--ouif-HeaderAccentLines: #2b88d8;
--ouif-HeaderBackground: rgba(255, 255, 255, 0.85);
--ouif-HeaderDisableText: #a6a6a6;
--ouif-HeaderDisabledBackground: #f8f8f8;
--ouif-HeaderDisabledLines: #eaeaea;
--ouif-HeaderLines: #a6a6a6;
--ouif-HeaderNavigationHoverText: #0078d4;
--ouif-HeaderNavigationPressedText: #004578;
--ouif-HeaderNavigationSelectedText: #0078d4;
--ouif-HeaderNavigationText: #666666;
--ouif-HeaderSiteTitle: #212121;
--ouif-HeaderStrongLines: #c7e0f4;
--ouif-HeaderSubtleLines: #c8c8c8;
--ouif-HeaderText: #333333;
--ouif-HoverBackground: rgba(222, 236, 249, 0.50);
--ouif-Hyperlink: #0078d4;
--ouif-HyperlinkActive: #004578;
--ouif-Hyperlinkfollowed: #004578;
--ouif-Lines: #a6a6a6;
--ouif-Navigation: #666666;
--ouif-NavigationAccent: #0078d4;
--ouif-NavigationHover: #0078d4;
--ouif-NavigationHoverBackground: rgba(222, 236, 249, 0.50);
--ouif-NavigationPressed: #004578;
--ouif-NavigationSelectedBackground: rgba(234, 234, 234, 0.78);
--ouif-PageBackground: #ffffff;
--ouif-RowAccent: #0078d4;
--ouif-SelectionBackground: rgba(199, 224, 244, 0.50);
--ouif-SiteTitle: #212121;
--ouif-StrongBodyText: #212121;
--ouif-StrongLines: #c7e0f4;
--ouif-SubtleEmphasisBackground: #f4f4f4;
--ouif-SubtleEmphasisCommandLinks: #212121;
--ouif-SubtleEmphasisText: #666666;
--ouif-SubtleLines: #c8c8c8;
--ouif-SuiteBarBackground: #0078d4;
--ouif-SuiteBarDisabledText: #eaeaea;
--ouif-SuiteBarHoverBackground: #71afe5;
--ouif-SuiteBarHoverText: #c7e0f4;
--ouif-SuiteBarText: #ffffff;
--ouif-TileBackgroundOverlay: rgba(0, 0, 0, 0.50);
--ouif-TileText: #ffffff;
--ouif-TopBarBackground: rgba(234, 234, 234, 0.78);
--ouif-TopBarHoverText: #333333;
--ouif-TopBarPressedText: #004578;
--ouif-TopBarText: #666666;
--ouif-WebPartHeading: #333333;
--ouif-accent: #8764b8;
--ouif-accentButtonBackground: #8764b8;
--ouif-accentButtonText: #ffffff;
--ouif-actionLink: #333333;
--ouif-actionLinkHovered: #212121;
--ouif-backgroundOverlay: rgba(255, 255, 255, 0.85);
--ouif-black: #000000;
--ouif-blackTranslucent40: rgba(0,0,0,.4);
--ouif-blockingBackground: rgba(234, 67, 0, .2);
--ouif-blue: #0078d4;
--ouif-blueDark: #002050;
--ouif-blueLight: #00bcf2;
--ouif-blueMid: #00188f;
--ouif-bodyBackground: #ffffff;
--ouif-bodyDivider: #eaeaea;
--ouif-bodyFrameBackground: #ffffff;
--ouif-bodyFrameDivider: #eaeaea;
--ouif-bodyStandoutBackground: #f8f8f8;
--ouif-bodySubtext: #666666;
--ouif-bodyText: #333333;
--ouif-bodyTextChecked: #000000;
--ouif-buttonBackground: #f4f4f4;
--ouif-buttonBackgroundChecked: #c8c8c8;
--ouif-buttonBackgroundCheckedHovered: #eaeaea;
--ouif-buttonBackgroundDisabled: #f4f4f4;
--ouif-buttonBackgroundHovered: #eaeaea;
--ouif-buttonBackgroundPressed: #eaeaea;
--ouif-buttonBorder: transparent;
--ouif-buttonBorderDisabled: transparent;
--ouif-buttonText: #333333;
--ouif-buttonTextChecked: #212121;
--ouif-buttonTextCheckedHovered: #000000;
--ouif-buttonTextDisabled: #a6a6a6;
--ouif-buttonTextHovered: #212121;
--ouif-buttonTextPressed: #212121;
--ouif-defaultStateBackground: #f8f8f8;
--ouif-dialogBorder: #f4f4f4;
--ouif-disabledBackground: #f4f4f4;
--ouif-disabledBodySubtext: #c8c8c8;
--ouif-disabledBodyText: #a6a6a6;
--ouif-disabledSubtext: #d0d0d0;
--ouif-disabledText: #a6a6a6;
--ouif-elevation16: 0 0 5px 0 rgba(0,0,0,.4);
--ouif-elevation4: 0 0 5px 0 rgba(0,0,0,.4);
--ouif-elevation64: 0 0 5px 0 rgba(0,0,0,.4);
--ouif-elevation8: 0 0 5px 0 rgba(0,0,0,.4);
--ouif-errorBackground: rgba(232, 17, 35, .2);
--ouif-errorText: #a80000;
--ouif-focusBorder: #666666;
--ouif-green: #107c10;
--ouif-greenDark: #004b1c;
--ouif-greenLight: #bad80a;
--ouif-inputBackground: #ffffff;
--ouif-inputBackgroundChecked: #0078d4;
--ouif-inputBackgroundCheckedHovered: #106ebe;
--ouif-inputBorder: #a6a6a6;
--ouif-inputBorderHovered: #333333;
--ouif-inputFocusBorderAlt: #0078d4;
--ouif-inputForegroundChecked: #ffffff;
--ouif-inputPlaceholderText: #666666;
--ouif-inputText: #333333;
--ouif-inputTextHovered: #212121;
--ouif-link: #0078d4;
--ouif-linkHovered: #004578;
--ouif-listBackground: #ffffff;
--ouif-listHeaderBackgroundHovered: #f4f4f4;
--ouif-listHeaderBackgroundPressed: #eaeaea;
--ouif-listItemBackgroundChecked: #eaeaea;
--ouif-listItemBackgroundCheckedHovered: #dadada;
--ouif-listItemBackgroundHovered: #f4f4f4;
--ouif-listText: #333333;
--ouif-listTextColor: #333333;
--ouif-magenta: #b4009e;
--ouif-magentaDark: #5c005c;
--ouif-magentaLight: #e3008c;
--ouif-menuBackground: #ffffff;
--ouif-menuDivider: #c8c8c8;
--ouif-menuHeader: #0078d4;
--ouif-menuIcon: #0078d4;
--ouif-menuItemBackgroundChecked: #eaeaea;
--ouif-menuItemBackgroundHovered: #f4f4f4;
--ouif-menuItemBackgroundPressed: #eaeaea;
--ouif-menuItemText: #333333;
--ouif-menuItemTextHovered: #212121;
--ouif-ms-font-large-MozOsxFontSmoothing: "[theme:ms-font-large-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-large-WebkitFontSmoothing: "[theme:ms-font-large-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-large-fontFamily: "[theme:ms-font-large-fontFamily, default: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-large-fontSize: "[theme:ms-font-large-fontSize, default: 17px]";
--ouif-ms-font-large-fontWeight: "[theme:ms-font-large-fontWeight, default: 300]";
--ouif-ms-font-medium-MozOsxFontSmoothing: "[theme:ms-font-medium-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-medium-WebkitFontSmoothing: "[theme:ms-font-medium-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-medium-fontFamily: "[theme:ms-font-medium-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-medium-fontSize: "[theme:ms-font-medium-fontSize, default: 14px]";
--ouif-ms-font-medium-fontWeight: "[theme:ms-font-medium-fontWeight, default: 400]";
--ouif-ms-font-mediumPlus-MozOsxFontSmoothing: "[theme:ms-font-mediumPlus-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-mediumPlus-WebkitFontSmoothing: "[theme:ms-font-mediumPlus-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-mediumPlus-fontFamily: "[theme:ms-font-mediumPlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-mediumPlus-fontSize: "[theme:ms-font-mediumPlus-fontSize, default: 15px]";
--ouif-ms-font-mediumPlus-fontWeight: "[theme:ms-font-mediumPlus-fontWeight, default: 400]";
--ouif-ms-font-mega-MozOsxFontSmoothing: "[theme:ms-font-mega-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-mega-WebkitFontSmoothing: "[theme:ms-font-mega-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-mega-fontFamily: "[theme:ms-font-mega-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-mega-fontSize: "[theme:ms-font-mega-fontSize, default: 72px]";
--ouif-ms-font-mega-fontWeight: "[theme:ms-font-mega-fontWeight, default: 100]";
--ouif-ms-font-small-MozOsxFontSmoothing: "[theme:ms-font-small-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-small-WebkitFontSmoothing: "[theme:ms-font-small-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-small-fontFamily: "[theme:ms-font-small-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-small-fontSize: "[theme:ms-font-small-fontSize, default: 12px]";
--ouif-ms-font-small-fontWeight: "[theme:ms-font-small-fontWeight, default: 400]";
--ouif-ms-font-smallPlus-MozOsxFontSmoothing: "[theme:ms-font-smallPlus-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-smallPlus-WebkitFontSmoothing: "[theme:ms-font-smallPlus-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-smallPlus-fontFamily: "[theme:ms-font-smallPlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-smallPlus-fontSize: "[theme:ms-font-smallPlus-fontSize, default: 13px]";
--ouif-ms-font-smallPlus-fontWeight: "[theme:ms-font-smallPlus-fontWeight, default: 400]";
--ouif-ms-font-superLarge-MozOsxFontSmoothing: "[theme:ms-font-superLarge-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-superLarge-WebkitFontSmoothing: "[theme:ms-font-superLarge-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-superLarge-fontFamily: "[theme:ms-font-superLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-superLarge-fontSize: "[theme:ms-font-superLarge-fontSize, default: 42px]";
--ouif-ms-font-superLarge-fontWeight: "[theme:ms-font-superLarge-fontWeight, default: 100]";
--ouif-ms-font-tiny-MozOsxFontSmoothing: "[theme:ms-font-tiny-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-tiny-WebkitFontSmoothing: "[theme:ms-font-tiny-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-tiny-fontFamily: "[theme:ms-font-tiny-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-tiny-fontSize: "[theme:ms-font-tiny-fontSize, default: 10px]";
--ouif-ms-font-tiny-fontWeight: "[theme:ms-font-tiny-fontWeight, default: 600]";
--ouif-ms-font-xLarge-MozOsxFontSmoothing: "[theme:ms-font-xLarge-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-xLarge-WebkitFontSmoothing: "[theme:ms-font-xLarge-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-xLarge-fontFamily: "[theme:ms-font-xLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-xLarge-fontSize: "[theme:ms-font-xLarge-fontSize, default: 21px]";
--ouif-ms-font-xLarge-fontWeight: "[theme:ms-font-xLarge-fontWeight, default: 100]";
--ouif-ms-font-xLargePlus-MozOsxFontSmoothing: "[theme:ms-font-xLargePlus-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-xLargePlus-WebkitFontSmoothing: "[theme:ms-font-xLargePlus-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-xLargePlus-fontFamily: "[theme:ms-font-xLargePlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-xLargePlus-fontSize: "[theme:ms-font-xLargePlus-fontSize, default: 21px]";
--ouif-ms-font-xLargePlus-fontWeight: "[theme:ms-font-xLargePlus-fontWeight, default: 100]";
--ouif-ms-font-xSmall-MozOsxFontSmoothing: "[theme:ms-font-xSmall-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-xSmall-WebkitFontSmoothing: "[theme:ms-font-xSmall-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-xSmall-fontFamily: "[theme:ms-font-xSmall-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-xSmall-fontSize: "[theme:ms-font-xSmall-fontSize, default: 11px]";
--ouif-ms-font-xSmall-fontWeight: "[theme:ms-font-xSmall-fontWeight, default: 400]";
--ouif-ms-font-xxLarge-MozOsxFontSmoothing: "[theme:ms-font-xxLarge-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-xxLarge-WebkitFontSmoothing: "[theme:ms-font-xxLarge-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-xxLarge-fontFamily: "[theme:ms-font-xxLarge-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-xxLarge-fontSize: "[theme:ms-font-xxLarge-fontSize, default: 28px]";
--ouif-ms-font-xxLarge-fontWeight: "[theme:ms-font-xxLarge-fontWeight, default: 100]";
--ouif-ms-font-xxLargePlus-MozOsxFontSmoothing: "[theme:ms-font-xxLargePlus-MozOsxFontSmoothing, default: grayscale]";
--ouif-ms-font-xxLargePlus-WebkitFontSmoothing: "[theme:ms-font-xxLargePlus-WebkitFontSmoothing, default: antialiased]";
--ouif-ms-font-xxLargePlus-fontFamily: "[theme:ms-font-xxLargePlus-fontFamily, default: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif]";
--ouif-ms-font-xxLargePlus-fontSize: "[theme:ms-font-xxLargePlus-fontSize, default: 28px]";
--ouif-ms-font-xxLargePlus-fontWeight: "[theme:ms-font-xxLargePlus-fontWeight, default: 100]";
--ouif-neutralDark: #212121;
--ouif-neutralLight: #eaeaea;
--ouif-neutralLighter: #f4f4f4;
--ouif-neutralLighterAlt: #f8f8f8;
--ouif-neutralPrimary: #333333;
--ouif-neutralPrimaryAlt: #3c3c3c;
--ouif-neutralQuaternary: #d0d0d0;
--ouif-neutralQuaternaryAlt: #dadada;
--ouif-neutralSecondary: #666666;
--ouif-neutralSecondaryAlt: #767676;
--ouif-neutralTertiary: #a6a6a6;
--ouif-neutralTertiaryAlt: #c8c8c8;
--ouif-orange: #d83b01;
--ouif-orangeLight: #ea4300;
--ouif-orangeLighter: #ff8c00;
--ouif-primaryBackground: #ffffff;
--ouif-primaryButtonBackground: #0078d4;
--ouif-primaryButtonBackgroundDisabled: #f4f4f4;
--ouif-primaryButtonBackgroundHovered: #106ebe;
--ouif-primaryButtonBackgroundPressed: #005a9e;
--ouif-primaryButtonBorder: transparent;
--ouif-primaryButtonText: #ffffff;
--ouif-primaryButtonTextDisabled: #d0d0d0;
--ouif-primaryButtonTextHovered: #ffffff;
--ouif-primaryButtonTextPressed: #ffffff;
--ouif-primaryText: #333333;
--ouif-purple: #5c2d91;
--ouif-purpleDark: #32145a;
--ouif-purpleLight: #b4a0ff;
--ouif-red: #e81123;
--ouif-redDark: #a80000;
--ouif-roundedCorner2: 0px;
--ouif-smallInputBorder: #666666;
--ouif-successBackground: rgba(186, 216, 10, .2);
--ouif-successText: #107C10;
--ouif-suiteBarBackground: #0078d4;
--ouif-suiteBarDisabledText: #eaeaea;
--ouif-suiteBarText: #ffffff;
--ouif-teal: #008272;
--ouif-tealDark: #004b50;
--ouif-tealLight: #00b294;
--ouif-themeAccent: #0078d4;
--ouif-themeAccentTranslucent10: rgba(0, 120, 212, 0.10);
--ouif-themeDark: #005a9e;
--ouif-themeDarkAlt: #106ebe;
--ouif-themeDarker: #004578;
--ouif-themeLight: #c7e0f4;
--ouif-themeLighter: #deecf9;
--ouif-themeLighterAlt: #eff6fc;
--ouif-themePrimary: #0078d4;
--ouif-themeSecondary: #2b88d8;
--ouif-themeTertiary: #71afe5;
--ouif-topBarBackground: rgba(234, 234, 234, 0.78);
--ouif-topBarHoverText: #333333;
--ouif-topBarText: #666666;
--ouif-variantBorder: #eaeaea;
--ouif-variantBorderHovered: #a6a6a6;
--ouif-warningBackground: rgba(255, 185, 0, .2);
--ouif-warningHighlight: #ffb900;
--ouif-warningText: #333333;
--ouif-white: #ffffff;
--ouif-whiteTranslucent40: rgba(255, 255, 255, 0.40);
--ouif-yellow: #ffb900;
--ouif-yellowDark: #d29200;
--ouif-yellowLight: #fff100;
}