fomantic-ui/src/themes/default/globals/colors.less

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

/***********************************************************
  Central Color Mapping Base for all components to iterate
***********************************************************/

@colors: {
  @primary: {
    color          : @primaryColor;
    light          : @lightPrimaryColor;
    border         : @primaryBorderColor;
    background     : @primaryBackground;
    header         : @primaryHeaderColor;
    boxShadow      : @primaryBoxShadow;
    boxFloatShadow : @primaryBoxFloatingShadow;
    text           : @primaryTextColor;
    lightText      : @lightPrimaryTextColor;
    hoverText      : @primaryHoverTextColor;
    focus          : @primaryColorFocus;
    lightFocus     : @lightPrimaryColorFocus;
    down           : @primaryColorDown;
    lightDown      : @lightPrimaryColorDown;
    active         : @primaryColorActive;
    lightActive    : @lightPrimaryColorActive;
    shadow         : @primaryTextShadow;
    lightShadow    : @lightPrimaryTextShadow;
    hover          : @primaryColorHover;
    lightHover     : @lightPrimaryColorHover;
    ribbon         : @primaryRibbonShadow;
    invertedRibbon : @primaryInvertedRibbonShadow;
    tertiary       : @primaryTertiaryColor;
    tertiaryHover  : @primaryTertiaryColorHover;
    tertiaryFocus  : @primaryTertiaryColorFocus;
    tertiaryActive : @primaryTertiaryColorActive;
    bright         : @primaryBright;
    brightHover    : @primaryBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @secondary: {
    color          : @secondaryColor;
    light          : @lightSecondaryColor;
    border         : @secondaryBorderColor;
    background     : @secondaryBackground;
    header         : @secondaryHeaderColor;
    boxShadow      : @secondaryBoxShadow;
    boxFloatShadow : @secondaryBoxFloatingShadow;
    text           : @secondaryTextColor;
    lightText      : @lightSecondaryTextColor;
    hoverText      : @secondaryHoverTextColor;
    focus          : @secondaryColorFocus;
    lightFocus     : @lightSecondaryColorFocus;
    down           : @secondaryColorDown;
    lightDown      : @lightSecondaryColorDown;
    active         : @secondaryColorActive;
    lightActive    : @lightSecondaryColorActive;
    shadow         : @secondaryTextShadow;
    lightShadow    : @lightSecondaryTextShadow;
    hover          : @secondaryColorHover;
    lightHover     : @lightSecondaryColorHover;
    ribbon         : @secondaryRibbonShadow;
    invertedRibbon : @secondaryInvertedRibbonShadow;
    tertiary       : @secondaryTertiaryColor;
    tertiaryHover  : @secondaryTertiaryColorHover;
    tertiaryFocus  : @secondaryTertiaryColorFocus;
    tertiaryActive : @secondaryTertiaryColorActive;
    bright         : @secondaryBright;
    brightHover    : @secondaryBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @red: {
    color          : @red;
    light          : @lightRed;
    border         : @redBorderColor;
    background     : @redBackground;
    header         : @redHeaderColor;
    boxShadow      : @redBoxShadow;
    boxFloatShadow : @redBoxFloatingShadow;
    text           : @redTextColor;
    lightText      : @lightRedTextColor;
    hoverText      : @redHoverTextColor;
    focus          : @redFocus;
    lightFocus     : @lightRedFocus;
    down           : @redDown;
    lightDown      : @lightRedDown;
    active         : @redActive;
    lightActive    : @lightRedActive;
    shadow         : @redTextShadow;
    lightShadow    : @lightRedTextShadow;
    hover          : @redHover;
    lightHover     : @lightRedHover;
    ribbon         : @redRibbonShadow;
    invertedRibbon : @redInvertedRibbonShadow;
    tertiary       : @redTertiaryColor;
    tertiaryHover  : @redTertiaryColorHover;
    tertiaryFocus  : @redTertiaryColorFocus;
    tertiaryActive : @redTertiaryColorActive;
    bright         : @redBright;
    brightHover    : @redBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @orange: {
    color          : @orange;
    light          : @lightOrange;
    border         : @orangeBorderColor;
    background     : @orangeBackground;
    header         : @orangeHeaderColor;
    boxShadow      : @orangeBoxShadow;
    boxFloatShadow : @orangeBoxFloatingShadow;
    text           : @orangeTextColor;
    lightText      : @lightOrangeTextColor;
    hoverText      : @orangeHoverTextColor;
    focus          : @orangeFocus;
    lightFocus     : @lightOrangeFocus;
    down           : @orangeDown;
    lightDown      : @lightOrangeDown;
    active         : @orangeActive;
    lightActive    : @lightOrangeActive;
    shadow         : @orangeTextShadow;
    lightShadow    : @lightOrangeTextShadow;
    hover          : @orangeHover;
    lightHover     : @lightOrangeHover;
    ribbon         : @orangeRibbonShadow;
    invertedRibbon : @orangeInvertedRibbonShadow;
    tertiary       : @orangeTertiaryColor;
    tertiaryHover  : @orangeTertiaryColorHover;
    tertiaryFocus  : @orangeTertiaryColorFocus;
    tertiaryActive : @orangeTertiaryColorActive;
    bright         : @orangeBright;
    brightHover    : @orangeBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @yellow: {
    color          : @yellow;
    light          : @lightYellow;
    border         : @yellowBorderColor;
    background     : @yellowBackground;
    header         : @yellowHeaderColor;
    boxShadow      : @yellowBoxShadow;
    boxFloatShadow : @yellowBoxFloatingShadow;
    text           : @yellowTextColor;
    lightText      : @lightYellowTextColor;
    hoverText      : @yellowHoverTextColor;
    focus          : @yellowFocus;
    lightFocus     : @lightYellowFocus;
    down           : @yellowDown;
    lightDown      : @lightYellowDown;
    active         : @yellowActive;
    lightActive    : @lightYellowActive;
    shadow         : @yellowTextShadow;
    lightShadow    : @lightYellowTextShadow;
    hover          : @yellowHover;
    lightHover     : @lightYellowHover;
    ribbon         : @yellowRibbonShadow;
    invertedRibbon : @yellowInvertedRibbonShadow;
    tertiary       : @yellowTertiaryColor;
    tertiaryHover  : @yellowTertiaryColorHover;
    tertiaryFocus  : @yellowTertiaryColorFocus;
    tertiaryActive : @yellowTertiaryColorActive;
    bright         : @yellowBright;
    brightHover    : @yellowBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @olive: {
    color          : @olive;
    light          : @lightOlive;
    border         : @oliveBorderColor;
    background     : @oliveBackground;
    header         : @oliveHeaderColor;
    boxShadow      : @oliveBoxShadow;
    boxFloatShadow : @oliveBoxFloatingShadow;
    text           : @oliveTextColor;
    lightText      : @lightOliveTextColor;
    hoverText      : @oliveHoverTextColor;
    focus          : @oliveFocus;
    lightFocus     : @lightOliveFocus;
    down           : @oliveDown;
    lightDown      : @lightOliveDown;
    active         : @oliveActive;
    lightActive    : @lightOliveActive;
    shadow         : @oliveTextShadow;
    lightShadow    : @lightOliveTextShadow;
    hover          : @oliveHover;
    lightHover     : @lightOliveHover;
    ribbon         : @oliveRibbonShadow;
    invertedRibbon : @oliveInvertedRibbonShadow;
    tertiary       : @oliveTertiaryColor;
    tertiaryHover  : @oliveTertiaryColorHover;
    tertiaryFocus  : @oliveTertiaryColorFocus;
    tertiaryActive : @oliveTertiaryColorActive;
    bright         : @oliveBright;
    brightHover    : @oliveBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @green: {
    color          : @green;
    light          : @lightGreen;
    border         : @greenBorderColor;
    background     : @greenBackground;
    header         : @greenHeaderColor;
    boxShadow      : @greenBoxShadow;
    boxFloatShadow : @greenBoxFloatingShadow;
    text           : @greenTextColor;
    lightText      : @lightGreenTextColor;
    hoverText      : @greenHoverTextColor;
    focus          : @greenFocus;
    lightFocus     : @lightGreenFocus;
    down           : @greenDown;
    lightDown      : @lightGreenDown;
    active         : @greenActive;
    lightActive    : @lightGreenActive;
    shadow         : @greenTextShadow;
    lightShadow    : @lightGreenTextShadow;
    hover          : @greenHover;
    lightHover     : @lightGreenHover;
    ribbon         : @greenRibbonShadow;
    invertedRibbon : @greenInvertedRibbonShadow;
    tertiary       : @greenTertiaryColor;
    tertiaryHover  : @greenTertiaryColorHover;
    tertiaryFocus  : @greenTertiaryColorFocus;
    tertiaryActive : @greenTertiaryColorActive;
    bright         : @greenBright;
    brightHover    : @greenBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @teal: {
    color          : @teal;
    light          : @lightTeal;
    border         : @tealBorderColor;
    background     : @tealBackground;
    header         : @tealHeaderColor;
    boxShadow      : @tealBoxShadow;
    boxFloatShadow : @tealBoxFloatingShadow;
    text           : @tealTextColor;
    lightText      : @lightTealTextColor;
    hoverText      : @tealHoverTextColor;
    focus          : @tealFocus;
    lightFocus     : @lightTealFocus;
    down           : @tealDown;
    lightDown      : @lightTealDown;
    active         : @tealActive;
    lightActive    : @lightTealActive;
    shadow         : @tealTextShadow;
    lightShadow    : @lightTealTextShadow;
    hover          : @tealHover;
    lightHover     : @lightTealHover;
    ribbon         : @tealRibbonShadow;
    invertedRibbon : @tealInvertedRibbonShadow;
    tertiary       : @tealTertiaryColor;
    tertiaryHover  : @tealTertiaryColorHover;
    tertiaryFocus  : @tealTertiaryColorFocus;
    tertiaryActive : @tealTertiaryColorActive;
    bright         : @tealBright;
    brightHover    : @tealBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @blue: {
    color          : @blue;
    light          : @lightBlue;
    border         : @blueBorderColor;
    background     : @blueBackground;
    header         : @blueHeaderColor;
    boxShadow      : @blueBoxShadow;
    boxFloatShadow : @blueBoxFloatingShadow;
    text           : @blueTextColor;
    lightText      : @lightBlueTextColor;
    hoverText      : @blueHoverTextColor;
    focus          : @blueFocus;
    lightFocus     : @lightBlueFocus;
    down           : @blueDown;
    lightDown      : @lightBlueDown;
    active         : @blueActive;
    lightActive    : @lightBlueActive;
    shadow         : @blueTextShadow;
    lightShadow    : @lightBlueTextShadow;
    hover          : @blueHover;
    lightHover     : @lightBlueHover;
    ribbon         : @blueRibbonShadow;
    invertedRibbon : @blueInvertedRibbonShadow;
    tertiary       : @blueTertiaryColor;
    tertiaryHover  : @blueTertiaryColorHover;
    tertiaryFocus  : @blueTertiaryColorFocus;
    tertiaryActive : @blueTertiaryColorActive;
    bright         : @blueBright;
    brightHover    : @blueBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @violet: {
    color          : @violet;
    light          : @lightViolet;
    border         : @violetBorderColor;
    background     : @violetBackground;
    header         : @violetHeaderColor;
    boxShadow      : @violetBoxShadow;
    boxFloatShadow : @violetBoxFloatingShadow;
    text           : @violetTextColor;
    lightText      : @lightVioletTextColor;
    hoverText      : @violetHoverTextColor;
    focus          : @violetFocus;
    lightFocus     : @lightVioletFocus;
    down           : @violetDown;
    lightDown      : @lightVioletDown;
    active         : @violetActive;
    lightActive    : @lightVioletActive;
    shadow         : @violetTextShadow;
    lightShadow    : @lightVioletTextShadow;
    hover          : @violetHover;
    lightHover     : @lightVioletHover;
    ribbon         : @violetRibbonShadow;
    invertedRibbon : @violetInvertedRibbonShadow;
    tertiary       : @violetTertiaryColor;
    tertiaryHover  : @violetTertiaryColorHover;
    tertiaryFocus  : @violetTertiaryColorFocus;
    tertiaryActive : @violetTertiaryColorActive;
    bright         : @violetBright;
    brightHover    : @violetBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @purple: {
    color          : @purple;
    light          : @lightPurple;
    border         : @purpleBorderColor;
    background     : @purpleBackground;
    header         : @purpleHeaderColor;
    boxShadow      : @purpleBoxShadow;
    boxFloatShadow : @purpleBoxFloatingShadow;
    text           : @purpleTextColor;
    lightText      : @lightPurpleTextColor;
    hoverText      : @purpleHoverTextColor;
    focus          : @purpleFocus;
    lightFocus     : @lightPurpleFocus;
    down           : @purpleDown;
    lightDown      : @lightPurpleDown;
    active         : @purpleActive;
    lightActive    : @lightPurpleActive;
    shadow         : @purpleTextShadow;
    lightShadow    : @lightPurpleTextShadow;
    hover          : @purpleHover;
    lightHover     : @lightPurpleHover;
    ribbon         : @purpleRibbonShadow;
    invertedRibbon : @purpleInvertedRibbonShadow;
    tertiary       : @purpleTertiaryColor;
    tertiaryHover  : @purpleTertiaryColorHover;
    tertiaryFocus  : @purpleTertiaryColorFocus;
    tertiaryActive : @purpleTertiaryColorActive;
    bright         : @purpleBright;
    brightHover    : @purpleBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @pink: {
    color          : @pink;
    light          : @lightPink;
    border         : @pinkBorderColor;
    background     : @pinkBackground;
    header         : @pinkHeaderColor;
    boxShadow      : @pinkBoxShadow;
    boxFloatShadow : @pinkBoxFloatingShadow;
    text           : @pinkTextColor;
    lightText      : @lightPinkTextColor;
    hoverText      : @pinkHoverTextColor;
    focus          : @pinkFocus;
    lightFocus     : @lightPinkFocus;
    down           : @pinkDown;
    lightDown      : @lightPinkDown;
    active         : @pinkActive;
    lightActive    : @lightPinkActive;
    shadow         : @pinkTextShadow;
    lightShadow    : @lightPinkTextShadow;
    hover          : @pinkHover;
    lightHover     : @lightPinkHover;
    ribbon         : @pinkRibbonShadow;
    invertedRibbon : @pinkInvertedRibbonShadow;
    tertiary       : @pinkTertiaryColor;
    tertiaryHover  : @pinkTertiaryColorHover;
    tertiaryFocus  : @pinkTertiaryColorFocus;
    tertiaryActive : @pinkTertiaryColorActive;
    bright         : @pinkBright;
    brightHover    : @pinkBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @brown: {
    color          : @brown;
    light          : @lightBrown;
    border         : @brownBorderColor;
    background     : @brownBackground;
    header         : @brownHeaderColor;
    boxShadow      : @brownBoxShadow;
    boxFloatShadow : @brownBoxFloatingShadow;
    text           : @brownTextColor;
    lightText      : @lightBrownTextColor;
    hoverText      : @brownHoverTextColor;
    focus          : @brownFocus;
    lightFocus     : @lightBrownFocus;
    down           : @brownDown;
    lightDown      : @lightBrownDown;
    active         : @brownActive;
    lightActive    : @lightBrownActive;
    shadow         : @brownTextShadow;
    lightShadow    : @lightBrownTextShadow;
    hover          : @brownHover;
    lightHover     : @lightBrownHover;
    ribbon         : @brownRibbonShadow;
    invertedRibbon : @brownInvertedRibbonShadow;
    tertiary       : @brownTertiaryColor;
    tertiaryHover  : @brownTertiaryColorHover;
    tertiaryFocus  : @brownTertiaryColorFocus;
    tertiaryActive : @brownTertiaryColorActive;
    bright         : @brownBright;
    brightHover    : @brownBrightHover;
    isDark         : false;
    isVeryDark     : false;
  };
  @grey: {
    color          : @grey;
    light          : @lightGrey;
    border         : @greyBorderColor;
    background     : @greyBackground;
    header         : @greyHeaderColor;
    boxShadow      : @greyBoxShadow;
    boxFloatShadow : @greyBoxFloatingShadow;
    text           : @greyTextColor;
    lightText      : @lightGreyTextColor;
    hoverText      : @greyHoverTextColor;
    focus          : @greyFocus;
    lightFocus     : @lightGreyFocus;
    down           : @greyDown;
    lightDown      : @lightGreyDown;
    active         : @greyActive;
    lightActive    : @lightGreyActive;
    shadow         : @greyTextShadow;
    lightShadow    : @lightGreyTextShadow;
    hover          : @greyHover;
    lightHover     : @lightGreyHover;
    ribbon         : @greyRibbonShadow;
    invertedRibbon : @greyInvertedRibbonShadow;
    tertiary       : @greyTertiaryColor;
    tertiaryHover  : @greyTertiaryColorHover;
    tertiaryFocus  : @greyTertiaryColorFocus;
    tertiaryActive : @greyTertiaryColorActive;
    bright         : @greyBright;
    brightHover    : @greyBrightHover;
    isDark         : true;
    isVeryDark     : false;
  };
  @black: {
    color          : @black;
    light          : @lightBlack;
    border         : @blackBorderColor;
    background     : @blackBackground;
    header         : @blackHeaderColor;
    boxShadow      : @blackBoxShadow;
    boxFloatShadow : @blackBoxFloatingShadow;
    text           : @blackTextColor;
    lightText      : @lightBlackTextColor;
    hoverText      : @blackHoverTextColor;
    focus          : @blackFocus;
    lightFocus     : @lightBlackFocus;
    down           : @blackDown;
    lightDown      : @lightBlackDown;
    active         : @blackActive;
    lightActive    : @lightBlackActive;
    shadow         : @blackTextShadow;
    lightShadow    : @lightBlackTextShadow;
    hover          : @blackHover;
    lightHover     : @lightBlackHover;
    ribbon         : @blackRibbonShadow;
    invertedRibbon : @blackInvertedRibbonShadow;
    tertiary       : @blackTertiaryColor;
    tertiaryHover  : @blackTertiaryColorHover;
    tertiaryFocus  : @blackTertiaryColorFocus;
    tertiaryActive : @blackTertiaryColorActive;
    bright         : @blackBright;
    brightHover    : @blackBrightHover;
    isDark         : true;
    isVeryDark     : true;
  };
};

/***********************************************************
  Color Mapping Base for form components to iterate
***********************************************************/

@formStates: {
  @error: {
    color: @formErrorColor;
    background: @formErrorBackground;
    borderColor: @formErrorBorder;
    borderRadius: @inputErrorBorderRadius;
    boxShadow: @inputErrorBoxShadow;
    cornerLabelColor: @white;
    labelBackground: @formErrorLabelBackground;

    dropdownLabelColor: @dropdownErrorLabelColor;
    dropdownLabelBackground: @dropdownErrorLabelBackground;
    dropdownHoverBackground: @dropdownErrorHoverBackground;
    dropdownSelectedBackground: @dropdownErrorSelectedBackground;
    dropdownActiveBackground: @dropdownErrorActiveBackground;

    inputAutoFillBackground: @inputAutoFillErrorBackground;
    inputAutoFillBorderColor: @inputAutoFillErrorBorder;
    inputFocusBackground: @inputErrorFocusBackground;
    inputFocusColor: @inputErrorFocusColor;
    inputFocusBorderColor: @inputErrorFocusBorder;
    inputFocusBoxShadow: @inputErrorFocusBoxShadow;
    inputPlaceholderColor: @inputErrorPlaceholderColor;
    inputPlaceholderFocusColor: @inputErrorPlaceholderFocusColor;

    transparentBackground: @transparentFormErrorBackground;
    transparentColor: @transparentFormErrorColor;
  };

  @info: {
    color: @formInfoColor;
    background: @formInfoBackground;
    borderColor: @formInfoBorder;
    borderRadius: @inputInfoBorderRadius;
    boxShadow: @inputInfoBoxShadow;
    cornerLabelColor: @white;
    labelBackground: @formInfoLabelBackground;

    dropdownLabelColor: @dropdownInfoLabelColor;
    dropdownLabelBackground: @dropdownInfoLabelBackground;
    dropdownHoverBackground: @dropdownInfoHoverBackground;
    dropdownSelectedBackground: @dropdownInfoSelectedBackground;
    dropdownActiveBackground: @dropdownInfoActiveBackground;

    inputAutoFillBackground: @inputAutoFillInfoBackground;
    inputAutoFillBorderColor: @inputAutoFillInfoBorder;
    inputFocusBackground: @inputInfoFocusBackground;
    inputFocusColor: @inputInfoFocusColor;
    inputFocusBorderColor: @inputInfoFocusBorder;
    inputFocusBoxShadow: @inputInfoFocusBoxShadow;
    inputPlaceholderColor: @inputInfoPlaceholderColor;
    inputPlaceholderFocusColor: @inputInfoPlaceholderFocusColor;

    transparentBackground: @transparentFormInfoBackground;
    transparentColor: @transparentFormInfoColor;
  };

  @success: {
    color: @formSuccessColor;
    background: @formSuccessBackground;
    borderColor: @formSuccessBorder;
    borderRadius: @inputSuccessBorderRadius;
    boxShadow: @inputSuccessBoxShadow;
    cornerLabelColor: @white;
    labelBackground: @formSuccessLabelBackground;

    dropdownLabelColor: @dropdownSuccessLabelColor;
    dropdownLabelBackground: @dropdownSuccessLabelBackground;
    dropdownHoverBackground: @dropdownSuccessHoverBackground;
    dropdownSelectedBackground: @dropdownSuccessSelectedBackground;
    dropdownActiveBackground: @dropdownSuccessActiveBackground;

    inputAutoFillBackground: @inputAutoFillSuccessBackground;
    inputAutoFillBorderColor: @inputAutoFillSuccessBorder;
    inputFocusBackground: @inputSuccessFocusBackground;
    inputFocusColor: @inputSuccessFocusColor;
    inputFocusBorderColor: @inputSuccessFocusBorder;
    inputFocusBoxShadow: @inputSuccessFocusBoxShadow;
    inputPlaceholderColor: @inputSuccessPlaceholderColor;
    inputPlaceholderFocusColor: @inputSuccessPlaceholderFocusColor;

    transparentBackground: @transparentFormSuccessBackground;
    transparentColor: @transparentFormSuccessColor;
  };

  @warning: {
    color: @formWarningColor;
    background: @formWarningBackground;
    borderColor: @formWarningBorder;
    borderRadius: @inputWarningBorderRadius;
    boxShadow: @inputWarningBoxShadow;
    cornerLabelColor: @white;
    labelBackground: @formWarningLabelBackground;

    dropdownLabelColor: @dropdownWarningLabelColor;
    dropdownLabelBackground: @dropdownWarningLabelBackground;
    dropdownHoverBackground: @dropdownWarningHoverBackground;
    dropdownSelectedBackground: @dropdownWarningSelectedBackground;
    dropdownActiveBackground: @dropdownWarningActiveBackground;

    inputAutoFillBackground: @inputAutoFillWarningBackground;
    inputAutoFillBorderColor: @inputAutoFillWarningBorder;
    inputFocusBackground: @inputWarningFocusBackground;
    inputFocusColor: @inputWarningFocusColor;
    inputFocusBorderColor: @inputWarningFocusBorder;
    inputFocusBoxShadow: @inputWarningFocusBoxShadow;
    inputPlaceholderColor: @inputWarningPlaceholderColor;
    inputPlaceholderFocusColor: @inputWarningPlaceholderFocusColor;

    transparentBackground: @transparentFormWarningBackground;
    transparentColor: @transparentFormWarningColor;
  };
};

@textStates: {
  @error: {
    color: @negativeColor;
  };
  @info: {
    color: @infoColor;
  };
  @success: {
    color: @positiveColor;
  };
  @warning: {
    color: @warningColor;
  };
};