• Home
• org.primefaces
• primefaces-themes
• 15.0.0-RC2
• source code
• _variables.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

themes.primefaces-material-dark-common._variables.scss Maven / Gradle / Ivy

@use 'sass:color';

$colors: (
    "blue": #2196F3,
    "green": #689F38,
    "yellow": #FBC02D,
    "cyan": #00BCD4,
    "pink": #E91E63,
    "indigo": #4E5FBB,
    "teal": #009688,
    "orange": #FF9800,
    "bluegray": #607D8B,
    "purple": #9C27B0,
    "red": #F44336,
    "primary": $primaryColor
) !default;

$emphasis-high: rgba(255, 255, 255, .87) !default;
$emphasis-medium: rgba(255, 255, 255, .60) !default;
$emphasis-low: rgba(255, 255, 255, .38) !default;
$emphasis-lower: rgba(255, 255, 255, .12) !default;
$overlayColor: #ffffff !default;

//global
$fontFamily: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !default;
$fontSize: 1rem !default;
$textColor: $emphasis-high !default;
$textSecondaryColor: $emphasis-medium !default;
$borderRadius: 4px !default;
$transitionDuration: .2s !default;
$transition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration, opacity $transitionDuration !default;
$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, opacity $transitionDuration ease-in-out !default;
$listItemTransition:none !default;
$animationDuration: .4s !default;
$animationTimingFunction: cubic-bezier(.05, .74, .2, .99) !default;
$letterSpacing: normal !default;
$tabletBreakpoint: 991px !default;
$phoneBreakpoint: 576px !default;
$iconSize: 1rem !default;
$divider: 1px solid hsla(0, 0%, 100%, .12) !default;
$inlineSpacing: .5rem !default;
$disabledOpacity: .38 !default;
$maskBg: rgba(0, 0, 0, 0.32) !default;
$errorColor: #f44435 !default;

//selected state
$highlightBg: rgba($primaryColor, .16) !default;
$highlightTextColor: $primaryColor !default;

//focus
$focusOutlineColor: transparent !default;
$focusOutline: 0 none !default;
$focusOutlineOffset: 0 !default;
$focusShadow: none !default;

//action icons
$actionIconWidth: 2.5rem !default;
$actionIconHeight: 2.5rem !default;
$actionIconBg: transparent !default;
$actionIconBorder: 0 none !default;
$actionIconColor: $textSecondaryColor !default;
$actionIconHoverBg: rgba($overlayColor, .04) !default;
$actionIconHoverBorderColor: transparent !default;
$actionIconHoverColor: $textSecondaryColor !default;
$actionIconBorderRadius: 50% !default;

//input field
$inputPadding: 1rem 1rem !default;
$inputTextFontSize: 1rem !default;
$inputBg: #1e1e1e !default;
$inputTextColor: $emphasis-high !default;
$inputIconColor: $emphasis-medium !default;
$inputBorder: 1px solid hsla(0, 0%, 100%, .3) !default;
$inputHoverBorderColor: $emphasis-medium !default;
$inputFocusBorderColor: $primaryColor !default;
$inputErrorBorderColor: $errorColor !default;
$inputPlaceholderTextColor: $emphasis-medium !default;
$inputFocusShadow: none !default;
$inputFilledBg: hsla(0, 0%, 100%, .06) !default;
$inputFilledHoverBg: hsla(0, 0%, 100%, .08) !default;
$inputFilledFocusBg: hsla(0, 0%, 100%, .1) !default;

//input groups
$inputGroupBorderColor: hsla(0, 0%, 100%, .3) !default;
$inputGroupBg: $inputBg !default;
$inputGroupTextColor: $emphasis-medium !default;
$inputGroupIconColor: $emphasis-medium !default;
$inputGroupAddonMinWidth: 2.357rem !default;

//input lists
$inputListMinWidth: 12rem !default;
$inputListBg: #1e1e1e !default;
$inputListBorder: 1px solid hsla(0, 0%, 100%, .3) !default;
$inputListPadding: 0 !default;
$inputListItemPadding: 1rem 1rem !default;
$inputListItemBg: transparent !default;
$inputListItemTextColor: $textColor !default;
$inputListItemHoverBg: hsla(0, 0%, 100%, .04) !default;
$inputListItemTextHoverColor: $textColor !default;
$inputListItemHighlightBg: $highlightBg !default;
$inputListItemHighlightTextColor: $highlightTextColor !default;
$inputListItemBorder: 0 none !default;
$inputListItemBorderRadius: 0 !default;
$inputListItemMargin: 0 !default;
$inputListItemFocusShadow:none !default;
$inputListHeaderPadding: 1rem 1rem !default;
$inputListHeaderBg: #1e1e1e !default;
$inputListHeaderTextColor: $textColor !default;
$inputListHeaderBorder: 1px solid hsla(0, 0%, 100%, .12) !default;

//inputs with panels (password, keyboard)
$inputContentPanelPadding: 1rem !default;
$inputContentPanelBg: #2b2b2b !default;
$inputContentPanelTextColor: $textColor !default;

//inputs with overlays
$inputOverlayBorder: 0 none !default;
$inputOverlayHeaderBg: #2b2b2b !default;
$inputOverlayShadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;

//inputs with buttons
$inputButtonWidth: 3rem !default;

//button
$buttonTextOnlyPadding: 0.714rem 1rem !default;
$buttonWithLeftIconPadding: 0.714rem 1rem 0.714rem 2.5rem !default;
$buttonWithRightIconPadding: 0.714rem 2.5rem 0.714rem 1rem !default;
$buttonIconOnlyWidth: 3rem !default;
$buttonIconOnlyPadding: 0.714rem !default;
$buttonBg: $primaryColor !default;
$buttonTextColor: $primaryTextColor !default;
$buttonBorder: 0 none !default;
$buttonHoverBg: rgba($primaryColor, .92) !default;
$buttonTextHoverColor: $primaryTextColor !default;
$buttonHoverBorderColor: transparent !default;
$buttonActiveBg: rgba($primaryColor, .68) !default;
$buttonTextActiveColor: $primaryTextColor !default;
$buttonActiveBorderColor: transparent !default;

$buttonFocusOutline: 0 none !default;
$buttonFocusOutlineOffset: 0 !default;
$buttonFocusShadow: none !default;
$raisedButtonShadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
$roundedButtonBorderRadius: 2rem !default;

$textButtonHoverBgOpacity: .04 !default;
$textButtonActiveBgOpacity: .16 !default;
$outlinedButtonBorder: 1px solid !default;
$plainButtonTextColor: $textSecondaryColor !default;
$plainButtonHoverBgColor: rgba(255, 255, 255, .04) !default;
$plainButtonActiveBgColor: rgba(255, 255, 255, .16) !default;

$secondaryButtonBg: $accentColor !default;
$secondaryButtonTextColor: $accentTextColor !default;
$secondaryButtonBorder: 0 none !default;
$secondaryButtonHoverBg: rgba($accentColor, .92) !default;
$secondaryButtonTextHoverColor: $accentTextColor !default;
$secondaryButtonHoverBorderColor: transparent !default;
$secondaryButtonActiveBg: rgba($accentColor, .68) !default;
$secondaryButtonTextActiveColor: $accentTextColor !default;
$secondaryButtonActiveBorderColor: transparent !default;
$secondaryButtonFocusShadow: none !default;

$infoButtonBg: #90CAF9 !default;
$infoButtonTextColor: #212121 !default;
$infoButtonBorder: 0 none !default;
$infoButtonHoverBg: rgba(#90CAF9, .92) !default;
$infoButtonTextHoverColor: #212121 !default;
$infoButtonHoverBorderColor: transparent !default;
$infoButtonActiveBg: rgba(#90CAF9, .68) !default;
$infoButtonTextActiveColor: #212121 !default;
$infoButtonActiveBorderColor: transparent !default;
$infoButtonFocusShadow: none !default;

$successButtonBg: #C5E1A5 !default;
$successButtonTextColor: #212121 !default;
$successButtonBorder: 0 none !default;
$successButtonHoverBg: rgba(#C5E1A5, .92) !default;
$successButtonTextHoverColor: #212121 !default;
$successButtonHoverBorderColor: transparent !default;
$successButtonActiveBg: rgba(#C5E1A5, .68) !default;
$successButtonTextActiveColor: #212121 !default;
$successButtonActiveBorderColor: transparent !default;
$successButtonFocusShadow: none !default;

$warningButtonBg: #FFF59D !default;
$warningButtonTextColor: #212121 !default;
$warningButtonBorder: 0 none !default;
$warningButtonHoverBg: rgba(#FFF59D, .92) !default;
$warningButtonTextHoverColor: #212121 !default;
$warningButtonHoverBorderColor: transparent !default;
$warningButtonActiveBg: rgba(#FFF59D, .68) !default;
$warningButtonTextActiveColor: #212121 !default;
$warningButtonActiveBorderColor: transparent !default;
$warningButtonFocusShadow: none !default;

$helpButtonBg: #CE93D8 !default;
$helpButtonTextColor: #212121 !default;
$helpButtonBorder: 0 none !default;
$helpButtonHoverBg: rgba(#CE93D8, .92) !default;
$helpButtonTextHoverColor: #212121 !default;
$helpButtonHoverBorderColor: transparent !default;
$helpButtonActiveBg: rgba(#CE93D8, .68) !default;
$helpButtonTextActiveColor: #212121 !default;
$helpButtonActiveBorderColor: transparent !default;
$helpButtonFocusShadow: none !default;

$dangerButtonBg: #EF9A9A !default;
$dangerButtonTextColor: #212121 !default;
$dangerButtonBorder: 0 none !default;
$dangerButtonHoverBg: rgba(#EF9A9A, .92) !default;
$dangerButtonTextHoverColor: #212121 !default;
$dangerButtonHoverBorderColor: transparent !default;
$dangerButtonActiveBg: rgba(#EF9A9A, .68) !default;
$dangerButtonTextActiveColor: #212121 !default;
$dangerButtonActiveBorderColor: transparent !default;
$dangerButtonFocusShadow: none !default;

//checkbox
$checkboxBorderWidth: 2px !default;
$checkboxBorder: 2px solid #757575 !default;
$checkboxWidth: 18px !default;
$checkboxHeight: 18px !default;
$checkboxActiveBorderColor: $primaryColor !default;
$checkboxActiveBg: $primaryColor !default;
$checkboxActiveHoverBg: $primaryColor !default;
$checkboxTextActiveColor: $primaryTextColor !default;
$checkboxFocusShadow: none !default;

//radiobutton
$radiobuttonBorderWidth: 2px !default;
$radiobuttonBorder: 2px solid hsla(0, 0%, 100%, .7) !default;
$radiobuttonWidth: 20px !default;
$radiobuttonHeight: 20px !default;
$radiobuttonIconSize: 10px !default;
$radiobuttonActiveBorderColor: $primaryColor !default;
$radiobuttonActiveBg: $primaryTextColor !default;
$radiobuttonActiveHoverBg: $primaryTextColor !default;
$radiobuttonTextActiveColor: $primaryColor !default;
$radiobuttonFocusShadow: none !default;

//togglebutton
$toggleButtonBg: #2f2f2f !default;
$toggleButtonBorder: 1px solid rgba(255, 255, 255, .12) !default;
$toggleButtonTextColor: $textColor !default;
$toggleButtonIconColor: $textSecondaryColor !default;
$toggleButtonHoverBg: #373737 !default;
$toggleButtonHoverBorderColor: rgba(255, 255, 255, .12) !default;
$toggleButtonTextHoverColor: $textColor !default;
$toggleButtonHoverIconColor: $textSecondaryColor !default;
$toggleButtonActiveBg: #1c1c1c !default;
$toggleButtonActiveBorderColor: rgba(255, 255, 255, .12) !default;
$toggleButtonTextActiveColor: $textColor !default;
$toggleButtonActiveIconColor: $textSecondaryColor !default;
$toggleButtonActiveHoverBg: #262626 !default;
$toggleButtonActiveHoverBorderColor: rgba(255, 255, 255, .12) !default;
$toggleButtonActiveTextHoverColor: $textColor !default;
$toggleButtonActiveHoverIconColor: $textSecondaryColor !default;

//inplace
$inplacePadding: $inputPadding !default;
$inplaceHoverBg: rgba(255, 255, 255, .04) !default;
$inplaceTextHoverColor: $textColor !default;

//rating
$ratingIconFontSize: 1.143rem !default;
$ratingIconWidth: 1.25rem !default;
$ratingIconHeight: 1.25rem !default;
$ratingCancelIconColor: #f44435 !default;
$ratingCancelHoverIconColor: #f44435 !default;
$ratingStarIconColor: $primaryColor !default;
$ratingStarIconHoverColor: $primaryColor !default;
$ratingStarActiveIconColor: $primaryColor !default;

//slider
$sliderBg: hsla(0, 0%, 100%, .3) !default;
$sliderHeight: 2px !default;
$sliderWidth: 2px !default;
$sliderHandleWidth: 20px !default;
$sliderHandleHeight: 20px !default;
$sliderHandleBg: $primaryColor !default;
$sliderHandleBorder: 0 none !default;
$sliderHandleBorderRadius: 50% !default;
$sliderHandleHoverBorderColor: 0 none !default;
$sliderHandleHoverBg: $primaryColor !default;
$sliderRangeBg: $primaryColor !default;

//calendar
$calendarTableMargin: .5rem 0 !default;
$calendarPadding: .5rem !default;
$calendarTitlePadding: .5rem !default;
$calendarTitleBg: $inputOverlayHeaderBg !default;
$calendarTitleTextColor: $textColor !default;
$calendarTitleBorder: $divider !default;
$calendarTitleBorderWidth: 1px !default;

$calendarCellPadding: .5rem !default;
$calendarCellDateTextColor: $textColor !default;
$calendarCellDateWidth: 2.5rem !default;
$calendarCellDateHeight: 2.5rem !default;
$calendarCellDateHoverBorderColor: transparent !default;
$calendarCellDateBorderRadius: 50% !default;
$calendarCellDateBorder: 1px solid transparent !default;
$calendarCellDateHoverBg: rgba(255, 255, 255, .04) !default;
$calendarCellDateTodayBg: transparent !default;
$calendarCellDateTodayBorder: 1px solid rgba(255, 255, 255, .5) !default;
$calendarCellDateTodayTextColor: $textColor !default;
$calendarCellDateSelectedBg: $highlightBg !default;
$calendarCellDateSelectedTextColor: $highlightTextColor !default;
$calendarCellDateSelectedBorder: 0 none !default;

$calendarButtonBarPadding: 1rem 0 !default;
$calendarTimePickerMargin: 0 !default;
$calendarTimePickerLabelPadding: .5rem !default;
$calendarTimePickerInputPadding: 0 .5rem !default;
$calendarTimePickerInputMargin: 0 .714em .714em 40% !default;

//keyboard
$keyboardButtonPadding: .5rem !default;
$keyboardButtonMargin: 2px !default;
$keyboardButtonBorder: 1px solid $emphasis-low !default;
$keyboardButtonBg: #1e1e1e !default;
$keyboardButtonTextColor: $textColor !default;
$keyboardButtonHoverBorderColor: $emphasis-high !default;
$keyboardButtonHoverBg: #1e1e1e !default;
$keyboardButtonTextHoverColor: $textColor !default;
$keyboardButtonActiveBorderColor: transparent !default;
$keyboardButtonActiveBg: rgba($primaryColor, .68) !default;
$keyboardButtonTextActiveColor: $primaryTextColor !default;

//input switch
$inputSwitchOffBg: hsla(0, 0%, 100%, .3) !default;
$inputSwitchHandleOffBg: #bdbdbd !default;
$inputSwitchHandleOffTextColor: $textColor !default;
$inputSwitchHandleOffBorder: none !default;
$inputSwitchOnBg: rgba($primaryColor, .5) !default;
$inputSwitchHandleOnBg: $primaryColor !default;
$inputSwitchHandleOnTextColor: $primaryTextColor !default;
$inputSwitchHandleOnBorderColor: none !default;
$inputSwitchHandleBorderRadius: 50% !default;
$inputSwitchHandleShadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;
$inputSwitchBorder:solid transparent !default;
$inputSwitchBorderWidth:2px !default;
$inputSwitchBorderRadius: .5rem !default;

//panel
$panelHeaderBorder: 1px solid rgba(255, 255, 255, .12) !default;
$panelHeaderBg: #1e1e1e !default;
$panelHeaderTextColor: $textColor !default;
$panelHeaderFontWeight: 500 !default;
$panelHeaderPadding: 1rem !default;

$panelHeaderHoverBg: rgba($overlayColor, .04) !default;
$panelHeaderHoverBorderColor: rgba(255, 255, 255, .12) !default;
$panelHeaderTextHoverColor: $textColor !default;
$panelHeaderHoverIconColor: $textColor !default;

$panelContentBorder: 1px solid rgba(255, 255, 255, .12) !default;
$panelContentBg: #1e1e1e !default;
$panelContentTextColor: $textColor !default;
$panelContentPadding: 1rem !default;

$panelFooterBorder: 1px solid rgba(255, 255, 255, .12) !default;
$panelFooterBg: #1e1e1e !default;
$panelFooterTextColor: $textColor !default;
$panelFooterPadding: 1rem 1rem !default;

//accordion
$accordionSpacing: 0 !default;
$accordionHeaderBorder: 0 none !default;
$accordionHeaderBg: #1e1e1e !default;
$accordionHeaderTextColor: $textColor !default;
$accordionHeaderFontWeight: 400 !default;
$accordionHeaderPadding: 1.5rem !default;

$accordionHeaderHoverBg: rgba(255, 255, 255, .04) !default;
$accordionHeaderHoverBorderColor: transparent !default;
$accordionHeaderTextHoverColor: $textColor !default;

$accordionHeaderActiveBg: #1e1e1e !default;
$accordionHeaderActiveBorderColor: transparent !default;
$accordionHeaderTextActiveColor: $textColor !default;

$accordionHeaderActiveHoverBg: rgba(255, 255, 255, .04) !default;
$accordionHeaderActiveHoverBorderColor: transparent !default;
$accordionHeaderActiveTextHoverColor: $textColor !default;

$accordionContentBorder: 0 none !default;
$accordionContentBg: #1e1e1e !default;
$accordionContentTextColor: $textColor !default;
$accordionContentPadding: 1rem 1.5rem !default;

//tabview
$tabsHeaderSpacing: 0 !default;
$tabsNavBorderWidth: 2px !default;
$tabsNavBorder: $tabsNavBorderWidth solid rgba(255, 255, 255, .12) !default;
$tabsNavBg: transparent !default;

$tabsHeaderBg: transparent !default;
$tabsHeaderTextColor: $textSecondaryColor !default;
$tabsHeaderFontWeight: 500 !default;
$tabsHeaderPadding: 1rem 1.5rem !default;

$tabsHeaderHoverBg: rgba($primaryColor, .04) !default;
$tabsHeaderHoverBorderColor: transparent !default;
$tabsHeaderTextHoverColor: $textSecondaryColor !default;

$tabsHeaderActiveBg: transparent !default;
$tabsHeaderActiveBorderColor: $primaryColor !default;
$tabsHeaderTextActiveColor: $primaryColor !default;

$tabsContentBorder: 0 none !default;
$tabsContentBg: transparent !default;
$tabsContentTextColor: $textColor !default;
$tabsContentPadding: $panelContentPadding !default;

//action icon
$tabsScrollerButtonBg: transparent !default;
$tabsScrollerButtonIconColor: $textSecondaryColor !default;
$tabsScrollerButtonHoverBg: rgba(255, 255, 255, .04) !default;
$tabsScrollerButtonIconHoverColor: $textSecondaryColor !default;

//scrollpanel
$scrollPanelHandleBg: $primaryColor !default;
$scrollPanelTrackBorder: 0 none !default;
$scrollPanelTrackBg: rgba(255, 255, 255, .12) !default;

//paginator
$paginatorBg: #1e1e1e !default;
$paginatorBorder: solid #404040 !default;
$paginatorBorderWidth: 0 !default;
$paginatorIconColor: $textSecondaryColor !default;
$paginatorPadding: .5rem 1rem !default;
$paginatorElementWidth: $buttonIconOnlyWidth !default;
$paginatorElementHeight: $buttonIconOnlyWidth !default;
$paginatorElementHoverBg: rgba(255, 255, 255, .04) !default;
$paginatorElementHoverIconColor: $textSecondaryColor !default;
$paginatorElementMargin: .143rem !default;
$paginatorElementBorder: 0 none !default;
$paginatorElementHoverBorderColor: transparent !default;
$paginatorElementBorderRadius: 50% !default;

//datatable
$datatableHeaderBorder: 1px solid rgba(255, 255, 255, .12) !default;
$datatableHeaderBorderWidth: 0 0 1px 0 !default;
$datatableHeaderBg: #1e1e1e !default;
$datatableHeaderTextColor: $textColor !default;
$datatableHeaderFontWeight: 500 !default;
$datatableHeaderPadding: 1rem 1rem !default;

$datatableHeaderCellPadding: 1rem 1rem !default;
$datatableHeaderCellBg: #1e1e1e !default;
$datatableHeaderCellTextColor: $textColor !default;
$datatableHeaderCellIconColor: $textSecondaryColor !default;
$datatableHeaderCellFontWeight: 500 !default;
$datatableHeaderCellBorder: 1px solid #404040 !default;
$datatableHeaderCellBorderWidth: 0 0 1px 0 !default;
$datatableHeaderCellHoverBg: rgba(255, 255, 255, .04) !default;
$datatableHeaderCellTextHoverColor: $textColor !default;
$datatableHeaderCellHighlightBg: #1e1e1e !default;
$datatableHeaderCellHighlightTextColor: $textColor !default;
$datatableHeaderCellHighlightHoverBg: rgba(255, 255, 255, .04) !default;
$datatableHeaderCellHighlightTextHoverColor: $textColor !default;
$datatableSortableColumnBadgeSize: 1.143rem !default;

$datatableBodyRowBg: #1e1e1e !default;
$datatableBodyRowTextColor: $textColor !default;
$datatableBodyRowOddBg: rgba(255, 255, 255, .02) !default;
$datatableBodyRowHoverBg: rgba(255, 255, 255, .04) !default;
$datatableBodyRowTextHoverColor: $textColor !default;
$datatableBodyRowBorder: 1px solid #404040 !default;
$datatableBodyCellBorderWidth: 0 0 1px 0 !default;
$datatableBodyCellPadding: 1rem 1rem !default;

$datatableFooterBorderWidth: 0 0 1px 0 !default;
$datatableFooterCellPadding: 1rem 1rem !default;
$datatableFooterCellBg: #1e1e1e !default;
$datatableFooterCellTextColor: $textColor !default;
$datatableFooterCellFontWeight: 500 !default;
$datatableFooterCellBorder: 1px solid #404040 !default;
$datatableFooterCellBorderWidth: 0 0 1px 0 !default;
$datatableResizerHelperBg: $primaryColor !default;

$datatableFooterBorder: 1px solid #404040 !default;
$datatableFooterBorderWidth: 0 0 1px 0 !default;
$datatableFooterBg: #1e1e1e !default;
$datatableFooterTextColor: $textColor !default;
$datatableFooterFontWeight: 500 !default;
$datatableFooterPadding: 1rem 1rem !default;

$datatableTopPaginatorBorderWidth: 0 0 1px 0 !default;
$datatableBottomPaginatorBorderWidth: 0 0 1px 0 !default;

$datatableScaleSm: 0.5 !default;
$datatableScaleLg: 1.25 !default;

//dataview
$dataViewContentPadding: 1rem 0 !default;
$dataViewContentBorder: 0 none !default;
$dataViewListItemBorder: solid rgba(255, 255, 255, .12) !default;
$dataViewListItemBorderWidth: 0 0 1px 0 !default;

//orderlist, picklist
$orderListDropPlaceholderBg:color.scale($highlightBg, $lightness: -20%) !default;
$pickListDropPlaceholderBg:color.scale($highlightBg, $lightness: -20%) !default;

//schedule
$scheduleCellBorderColor: rgba(255, 255, 255, .12) !default;
$scheduleTodayBg: color.scale($highlightBg, $lightness: 10%) !default;
$scheduleEventBg: $highlightBg !default;
$scheduleEventBorder: 1px solid $highlightBg !default;
$scheduleEventTextColor: $highlightTextColor !default;

//tree
$treeNodePadding: .25rem !default;
$treeNodeLabelPadding: .25rem !default;

//messages
$messagesMargin: 1rem 0 !default;
$messagesPadding: 1.25rem 1.5rem !default;
$messagesIconFontSize: 1.5rem !default;
$messagesBorderWidth: 0 0 0 0 !default;
$messagesFontWeight: 500 !default;
$successMessageBg: #c8e6c9 !default;
$successMessageBorder: solid transparent !default;
$successMessageTextColor: #1b5e20 !default;
$successMessageIconColor: #1b5e20 !default;
$infoMessageBg: #B3E5FC !default;
$infoMessageBorder: solid transparent !default;
$infoMessageTextColor: #01579B !default;
$infoMessageIconColor: #01579B !default;
$warnMessageBg: #FFECB3 !default;
$warnMessageBorder: solid transparent !default;
$warnMessageTextColor: #7f6003 !default;
$warnMessageIconColor: #7f6003 !default;
$errorMessageBg: #FFCDD2 !default;
$errorMessageBorder: solid transparent !default;
$errorMessageTextColor: #B71C1C !default;
$errorMessageIconColor: #B71C1C !default;
$growlIconFontSize: 2rem !default;
$growlMargin: 0 0 1rem 0 !default;
$growlPadding: 1rem !default;
$messageBorderWidth: 0 0 0 3px !default;

//overlays
$overlayContentBorder: 0 none !default;
$overlayContentBg: #262626 !default;
$overlayContainerShadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;

//dialog
$dialogHeaderBg: $overlayContentBg !default;
$dialogHeaderBorder: 0 none !default;
$dialogHeaderTextColor: $textColor !default;
$dialogHeaderFontWeight: 500 !default;
$dialogHeaderFontSize: 1.25rem !default;
$dialogHeaderPadding: 1.5rem !default;
$dialogContentBorder: 0 none !default;
$dialogContentBg: #262626 !default;
$dialogContentTextColor: $textColor !default;
$dialogContentPadding: 0.2rem 1.5rem 1.5rem 1.5rem !default;
$dialogFooterBorder: 0 none !default;
$dialogFooterBg: #262626 !default;
$dialogFooterTextColor: $textColor !default;
$dialogFooterPadding: 1rem 1.5rem !default;

$confirmDialogContentPadding: 0.2rem 1.5rem 1.5rem 1.5rem !default;
$confirmDialogIconFontSize: 2rem !default;

//overlay panel
$overlayPanelCloseIconBg: $primaryColor !default;
$overlayPanelCloseIconColor: $primaryTextColor !default;
$overlayPanelCloseIconHoverBg: rgba($primaryColor, .92) !default;
$overlayPanelCloseIconHoverColor: $primaryTextColor !default;

//tooltip
$tooltipBg: #444444 !default;
$tooltipTextColor: $emphasis-high !default;

//steps
$stepsItemTextColor: $textColor !default;
$stepsItemNumberBorder: 1px solid transparent !default;
$stepsItemNumberColor: $textColor !default;
$stepsItemNumberBg: transparent !default;
$stepsItemNumberFontSize: 1.143rem !default;
$stepsItemNumberWidth: 2rem !default;
$stepsItemNumberHeight: 2rem !default;
$stepsItemNumberBorderRadius: 50% !default;

//progressbar
$progressBarHeight: 4px !default;
$progressBarBorder: 0 none !default;
$progressBarBg: rgba($primaryColor, .32) !default;
$progressBarValueBg: $primaryColor !default;

//menu
$menuBg: #1e1e1e !default;
$menuBorder: 1px solid rgba(255, 255, 255, .12) !default;
$menuitemTextColor: $textColor !default;
$menuitemIconColor: $textSecondaryColor !default;
$menuitemHoverBg: rgba(255, 255, 255, .04) !default;
$menuitemTextHoverColor: $textColor !default;
$menuitemHoverIconColor: $textSecondaryColor !default;
$menuitemPadding: 1rem 1rem !default;
$menuitemMargin: 0 !default;
$menuitemBorderRadius: 0 !default;
$menuSeparatorMargin: .5rem 0 !default;

$breadcrumbPadding: 1rem !default;
$breadcrumbBg: #1e1e1e !default;
$breadcrumbBorder: 1px solid rgba(255, 255, 255, .12) !default;
$breadcrumbItemTextColor: $textColor !default;
$breadcrumbItemIconColor: $textSecondaryColor !default;
$breadcrumbLastItemTextColor: $textColor !default;
$breadcrumbLastItemIconColor: $textSecondaryColor !default;
$breadcrumbSeparatorColor: $textSecondaryColor !default;

$submenuHeaderMargin: 0 !default;
$submenuHeaderPadding: 1rem !default;
$submenuHeaderBg: transparent !default;
$submenuHeaderBorder: 0 none !default;
$submenuHeaderTextColor: $textSecondaryColor !default;
$submenuHeaderFontWeight: 400 !default;
$submenuHeaderFontSize: 1rem !default;

$verticalMenuPadding: .5rem 0 !default;

$horizontalMenuPadding: 1rem !default;
$horizontalMenuBg: #1e1e1e !default;

$overlayMenuBg: #2b2b2b !default;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !default;

//upload
$fileItemPadding: 1rem !default;

//badge and tag
$badgeBg: $primaryColor !default;
$badgeTextColor: $primaryTextColor !default;
$badgeMinWidth: 1.5rem !default;
$badgeHeight: 1.5rem !default;
$badgeFontWeight: 700 !default;
$badgeFontSize: .75rem !default;

$tagPadding: .25rem .4rem !default;

//card
$cardBodyPadding: 1rem !default;
$cardTitleFontSize: 1.5rem !default;
$cardTitleFontWeight: 700 !default;
$cardSubTitleFontWeight: 400 !default;
$cardSubTitleColor: $textSecondaryColor !default;
$cardContentPadding: 1rem 0 !default;
$cardFooterPadding: 1rem 0 0 0 !default;
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !default;

//editor
$editorToolbarBg:$panelHeaderBg !default;
$editorToolbarBorder:$panelHeaderBorder !default;
$editorToolbarPadding:$panelHeaderPadding !default;
$editorToolbarIconColor:$textSecondaryColor !default;
$editorToolbarIconHoverColor:$textColor !default;
$editorIconActiveColor:$primaryColor !default;
$editorContentBorder:$panelContentBorder !default;
$editorContentBg:$panelContentBg !default;

//divider
$dividerHorizontalMargin: 1.25rem 0 !default;
$dividerHorizontalPadding: 0 1.25rem !default;
$dividerVerticalMargin: 0 1.25rem !default;
$dividerVerticalPadding: 1.25rem 0 !default;
$dividerSize: 1px !default;
$dividerColor: hsla(0, 0%, 100%, .12) !default;

//avatar
$avatarBg: hsla(0, 0%, 100%, .12) !default;
$avatarTextColor: $textColor !default;

//chip
$chipBg:$highlightBg !default;
$chipTextColor:$highlightTextColor !default;
$chipBorderRadius: 16px !default;

//scrollTop
$scrollTopBg: $accentColor !default;
$scrollTopHoverBg: rgba($accentColor, .92) !default;
$scrollTopWidth: 3rem !default;
$scrollTopHeight: 3rem !default;
$scrollTopBorderRadius: 50% !default;
$scrollTopFontSize: 1.5rem !default;
$scrollTopTextColor: $accentTextColor !default;

//skeleton
$skeletonBg: rgba(255, 255, 255, .06) !default;
$skeletonAnimationBg: rgba(255, 255, 255, .04) !default;

//splitter
$splitterGutterBg: hsla(0, 0%, 100%, .04) !default;
$splitterGutterHandleBg: hsla(0, 0%, 100%, .12) !default;

//chronoline
$chronolineVerticalEventContentPadding: 0 1rem !default;
$chronolineHorizontalEventContentPadding: 1rem 0 !default;
$chronolineEventMarkerWidth: 1rem !default;
$chronolineEventMarkerHeight: 1rem !default;
$chronolineEventMarkerBorderRadius: 50% !default;
$chronolineEventMarkerBorder: 0 none !default;
$chronolineEventMarkerBackground: #bdbdbd !default;
$chronolineEventConnectorSize: 2px !default;
$chronolineEventColor: #bdbdbd !default;

//confirmpopup
$confirmPopupContentPadding: 1.5rem !default;
$confirmPopupFooterPadding: 0 1.5rem 1rem 1.5rem !default;

//speeddial
$speedDialButtonWidth: 4rem !default;
$speedDialButtonHeight: 4rem !default;
$speedDialButtonIconFontSize: 2rem !default;
$speedDialActionWidth: 3rem !default;
$speedDialActionHeight: 3rem !default;
$speedDialActionBg: $accentColor !default;
$speedDialActionHoverBg: rgba($accentColor, .92) !default;
$speedDialActionTextColor: #212121 !default;
$speedDialActionTextHoverColor: #212121 !default;

//carousel
$carouselIndicatorsPadding:1rem !default;
$carouselIndicatorBg:rgba(255,255,255,.3) !default;
$carouselIndicatorHoverBg:rgba(255,255,255,.6) !default;
$carouselIndicatorBorderRadius:0 !default;
$carouselIndicatorWidth:2rem !default;
$carouselIndicatorHeight:.5rem !default;

//galleria
$galleriaMaskBg:rgba(0,0,0,0.9) !default;
$galleriaCloseIconMargin:.5rem !default;
$galleriaCloseIconFontSize:2rem !default;
$galleriaCloseIconBg:transparent !default;
$galleriaCloseIconColor:rgba(255,255,255,.87) !default;
$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
$galleriaCloseIconHoverColor:rgba(255,255,255,.87) !default;
$galleriaCloseIconWidth:4rem !default;
$galleriaCloseIconHeight:4rem !default;
$galleriaCloseIconBorderRadius:50% !default;

$galleriaItemNavigatorBg:transparent !default;
$galleriaItemNavigatorColor:rgba(255,255,255,.87) !default;
$galleriaItemNavigatorMargin:0 .5rem !default;
$galleriaItemNavigatorFontSize:2rem !default;
$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
$galleriaItemNavigatorHoverColor:rgba(255,255,255,.87) !default;
$galleriaItemNavigatorWidth:4rem !default;
$galleriaItemNavigatorHeight:4rem !default;
$galleriaItemNavigatorBorderRadius:50% !default;

$galleriaCaptionBg:rgba(0,0,0,.5) !default;
$galleriaCaptionTextColor:rgba(255,255,255,.87) !default;
$galleriaCaptionPadding:1rem !default;

$galleriaIndicatorsPadding:1rem !default;
$galleriaIndicatorBg:rgba(255,255,255,.3) !default;
$galleriaIndicatorHoverBg:rgba(255,255,255,.6) !default;
$galleriaIndicatorBorderRadius:50% !default;
$galleriaIndicatorWidth:1.25rem !default;
$galleriaIndicatorHeight:1.25rem !default;
$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
$galleriaIndicatorBgOnItem:rgba(255,255,255,.3) !default;
$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;

$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
$galleriaThumbnailContainerPadding:.8rem .25rem !default;
$galleriaThumbnailContentMargin:.2rem !default;
$galleriaThumbnailNavigatorBg:transparent !default;
$galleriaThumbnailNavigatorColor:rgba(255,255,255,.87) !default;
$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
$galleriaThumbnailNavigatorHoverColor:rgba(255,255,255,.87) !default;
$galleriaThumbnailNavigatorBorderRadius:50% !default;
$galleriaThumbnailNavigatorWidth:2rem !default;
$galleriaThumbnailNavigatorHeight:2rem !default;

:root {
    --surface-a:#1e1e1e;
    --surface-b:#121212;
    --surface-c:hsla(0,0%,100%,.04);
    --surface-d:hsla(0,0%,100%,.12);
    --surface-e:#1e1e1e;
    --surface-f:#262626;
    --text-color:#{$textColor};
    --text-color-secondary:#{$textSecondaryColor};
    --primary-color:#{$primaryColor};
    --primary-color-text:#{$primaryTextColor};
    --font-family:#{$fontFamily};
    --surface-0: #121212;
    --surface-50: #2a2a2a;
    --surface-100: #414141;
    --surface-200: #595959;
    --surface-300: #717171;
    --surface-400: #898989;
    --surface-500: #a0a0a0;
    --surface-600: #b8b8b8;
    --surface-700: #d0d0d0;
    --surface-800: #e7e7e7;
    --surface-900: #ffffff;
    --gray-50: #e7e7e7;
    --gray-100: #d0d0d0;
    --gray-200: #b8b8b8;
    --gray-300: #a0a0a0;
    --gray-400: #898989;
    --gray-500: #717171;
    --gray-600: #595959;
    --gray-700: #414141;
    --gray-800: #2a2a2a;
    --gray-900: #121212;
    --content-padding:#{$panelContentPadding};
    --inline-spacing:#{$inlineSpacing};
    --border-radius:#{$borderRadius};
    --surface-ground:#121212;
    --surface-section:#121212;
    --surface-card:#1e1e1e;
    --surface-overlay:#262626;
    --surface-border:hsla(0,0%,100%,.12);
    --surface-hover:hsla(0,0%,100%,.04);
    --maskbg: #{$maskBg};
    --focus-ring: #{$focusShadow};
    color-scheme: dark;
}