azion-theme 1.3.5

package/src/primevue-sass-theme/themes/luna/_variables.scss

@@ -0,0 +1,875 @@
+$colors: (
+    "blue": #106EBE,
+    "green": #56A641,
+    "yellow": #F6BD30,
+    "cyan": #2CACD5,
+    "pink": #D8297D,
+    "indigo": #2C47D5,
+    "teal": #41A694,
+    "orange": #F68F30,
+    "bluegray": #657C8A,
+    "purple": #8378DE,
+    "red": #D82A13,
+    "primary": $primaryColor
+);
+
+//global
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$fontSize: 1rem !default;
+$fontWeight: normal !default;
+$textColor: #dedede !default;
+$textSecondaryColor: #888888 !default;
+$borderRadius: 3px !default;
+$transitionDuration: .2s !default;
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid #4b4b4b !default;
+$inlineSpacing: .5rem !default; //spacing between inline elements
+$disabledOpacity: .5 !default; //opacity of a disabled item
+$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
+$loadingIconFontSize: 2rem !default;
+$errorColor: #e57373 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:lighten($primaryColor, 35%) !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$focusShadow: 0 0 0 0.1rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: #888888 !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: #dedede !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.429rem 0.429rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: #191919 !default;
+$inputTextColor: $textColor !default;
+$inputIconColor: $textSecondaryColor !default;
+$inputBorder: 1px solid #4b4b4b !default;
+$inputHoverBorderColor: $primaryColor !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: #9b9b9b !default;
+$inputFilledBg:#4b4b4b !default;
+$inputFilledHoverBg:#4b4b4b !default;
+$inputFilledFocusBg:#4b4b4b !default;
+
+//input groups
+$inputGroupBg: #252525 !default;
+$inputGroupTextColor: $textSecondaryColor !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: #323232 !default;
+$inputListTextColor: $textColor !default;
+$inputListBorder: 1px solid #4b4b4b !default;
+$inputListPadding: 0 !default;
+$inputListItemPadding: 0.429rem 0.857rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $textColor !default;
+$inputListItemHoverBg: #4c4c4c !default;
+$inputListItemTextHoverColor: $textColor !default;
+$inputListItemFocusBg: #3c3c3c !default;
+$inputListItemTextFocusColor:$textColor !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 0 !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: inset 0 0 0 0.15rem lighten($primaryColor, 35%) !default;
+$inputListHeaderPadding: 0.429rem 0.857rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: #252525 !default;
+$inputListHeaderTextColor: $textColor !default;
+$inputListHeaderBorder: 1px solid #191919 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder: 1px solid #191919 !default;
+$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//password
+$passwordMeterBg:#eaeaea !default;
+$passwordWeakBg:#E57373 !default;
+$passwordMediumBg:#FFB74D !default;
+$passwordStrongBg:#AED581 !default;
+
+//button
+$buttonPadding: .429rem 1rem !default;
+$buttonIconOnlyWidth: 2.357rem !default;
+$buttonIconOnlyPadding: .429rem 0 !default;
+$buttonBg: $primaryColor !default;
+$buttonTextColor: $primaryTextColor !default;
+$buttonBorder: 1px solid $primaryColor !default;
+$buttonHoverBg: $primaryDarkColor !default;
+$buttonTextHoverColor: $primaryTextColor !default;
+$buttonHoverBorderColor: $primaryDarkColor !default;
+$buttonActiveBg: $primaryDarkerColor !default;
+$buttonTextActiveColor: $primaryTextColor !default;
+$buttonActiveBorderColor: $primaryDarkerColor !default;
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:#4c4c4c !default;
+$plainButtonActiveBgColor:#3c3c3c !default;
+
+$secondaryButtonBg:#B0BEC5 !default;
+$secondaryButtonTextColor:#121212 !default;
+$secondaryButtonBorder:1px solid #B0BEC5 !default;
+$secondaryButtonHoverBg:#90A4AE !default;
+$secondaryButtonTextHoverColor:#121212 !default;
+$secondaryButtonHoverBorderColor:#90A4AE !default;
+$secondaryButtonActiveBg:#78909C !default;
+$secondaryButtonTextActiveColor:#121212 !default;
+$secondaryButtonActiveBorderColor:#78909C !default;
+$secondaryButtonFocusShadow:0 0 0 0.1rem #CFD8DC !default;
+
+$infoButtonBg: #4FC3F7 !default;
+$infoButtonTextColor: #212529 !default;
+$infoButtonBorder: 1px solid #4FC3F7 !default;
+$infoButtonHoverBg: #29B6F6 !default;
+$infoButtonTextHoverColor: #212529 !default;
+$infoButtonHoverBorderColor: #29B6F6 !default;
+$infoButtonActiveBg: #03A9F4 !default;
+$infoButtonTextActiveColor: #212529 !default;
+$infoButtonActiveBorderColor: #03A9F4 !default;
+$infoButtonFocusShadow: 0 0 0 0.1rem #E1F5FE !default;
+
+$successButtonBg: #AED581 !default;
+$successButtonTextColor: #212529 !default;
+$successButtonBorder: 1px solid #AED581 !default;
+$successButtonHoverBg:#9CCC65 !default;
+$successButtonTextHoverColor: #212529 !default;
+$successButtonHoverBorderColor: #9CCC65 !default;
+$successButtonActiveBg: #8BC34A !default;
+$successButtonTextActiveColor: #212529 !default;
+$successButtonActiveBorderColor: #8BC34A !default;
+$successButtonFocusShadow: 0 0 0 0.1rem #F1F8E9 !default;
+
+$warningButtonBg: #FFB74D !default;
+$warningButtonTextColor: #212529 !default;
+$warningButtonBorder: 1px solid #FFB74D !default;
+$warningButtonHoverBg: #FFA726 !default;
+$warningButtonTextHoverColor: #212529 !default;
+$warningButtonHoverBorderColor: #FFA726 !default;
+$warningButtonActiveBg: #FF9800 !default;
+$warningButtonTextActiveColor: #212529 !default;
+$warningButtonActiveBorderColor: #FF9800 !default;
+$warningButtonFocusShadow: 0 0 0 0.1rem #FFFDE7 !default;
+
+$helpButtonBg:#CE93D8 !default;
+$helpButtonTextColor:#121212 !default;
+$helpButtonBorder:1px solid #CE93D8 !default;
+$helpButtonHoverBg:#BA68C8 !default;
+$helpButtonTextHoverColor:#121212 !default;
+$helpButtonHoverBorderColor:#BA68C8 !default;
+$helpButtonActiveBg:#AB47BC !default;
+$helpButtonTextActiveColor:#121212 !default;
+$helpButtonActiveBorderColor:#AB47BC !default;
+$helpButtonFocusShadow:0 0 0 1px #CE93D8 !default;
+
+$dangerButtonBg: #E57373 !default;
+$dangerButtonTextColor: #212529 !default;
+$dangerButtonBorder: 1px solid #E57373 !default;
+$dangerButtonHoverBg: #EF5350 !default;
+$dangerButtonTextHoverColor: #212529 !default;
+$dangerButtonHoverBorderColor: #EF5350 !default;
+$dangerButtonActiveBg: #F44336 !default;
+$dangerButtonTextActiveColor: #212529 !default;
+$dangerButtonActiveBorderColor: #F44336 !default;
+$dangerButtonFocusShadow: 0 0 0 0.1rem #FFEBEE !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder: $inputBorder !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor: $primaryColor !default;
+$checkboxActiveBg: $primaryColor !default;
+$checkboxIconActiveColor: $primaryTextColor !default;
+$checkboxActiveHoverBg: $primaryDarkerColor !default;
+$checkboxIconActiveHoverColor: $primaryTextColor !default;
+$checkboxActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder: $inputBorder !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor: $primaryColor !default;
+$radiobuttonActiveBg: $primaryColor !default;
+$radiobuttonIconActiveColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBg: $primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth: 2rem !default;
+$colorPickerPreviewHeight: 2rem !default;
+$colorPickerBg: #323232 !default;
+$colorPickerBorder:1px solid  #191919 !default;
+$colorPickerHandleColor: #ffffff !default;
+
+//togglebutton
+$toggleButtonBg: #252525 !default;
+$toggleButtonBorder: 1px solid #252525 !default;
+$toggleButtonTextColor: #dedede !default;
+$toggleButtonIconColor: #888888 !default;
+$toggleButtonHoverBg: #4c4c4c !default;
+$toggleButtonHoverBorderColor: #4c4c4c !default;
+$toggleButtonTextHoverColor: #dedede !default;
+$toggleButtonIconHoverColor: #dedede !default;
+$toggleButtonActiveBg: $primaryColor !default;
+$toggleButtonActiveBorderColor: $primaryColor !default;
+$toggleButtonTextActiveColor: $primaryTextColor !default;
+$toggleButtonIconActiveColor: $primaryTextColor !default;
+$toggleButtonActiveHoverBg: $primaryDarkColor !default;
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor !default;
+$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
+$toggleButtonIconActiveHoverColor: $primaryTextColor !default;
+
+//inplace
+$inplacePadding: $inputPadding !default;
+$inplaceHoverBg: #4c4c4c !default;
+$inplaceTextHoverColor: $textColor !default;
+
+//rating
+$ratingIconFontSize: 1.143rem !default;
+$ratingCancelIconColor: #e4018d !default;
+$ratingCancelIconHoverColor: #b5019f !default;
+$ratingStarIconOffColor: $textColor !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: #4b4b4b !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: .286rem !default;
+$sliderVerticalWidth: 0.286rem !default;
+$sliderHandleWidth: 1.143rem !default;
+$sliderHandleHeight: 1.143rem !default;
+$sliderHandleBg: #4c4c4c !default;
+$sliderHandleBorder: 2px solid $primaryColor !default;
+$sliderHandleBorderRadius: 100% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: $primaryColor !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.857rem 0 !default;
+$calendarPadding: 0.857rem !default;
+$calendarBg: $inputListBg !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor: $inputListTextColor !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: .5rem !default;
+$calendarHeaderBg: $inputListHeaderBg !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder: 0 none !default;
+$calendarHeaderTextColor: $inputListHeaderTextColor !default;
+$calendarHeaderFontWeight: 700 !default;
+$calendarHeaderCellPadding: .5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding: .5rem !default;
+$calendarCellDateWidth: 2.5rem !default;
+$calendarCellDateHeight: 2.5rem !default;
+$calendarCellDateBorderRadius: $borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg: #4c4c4c !default;
+$calendarCellDateTodayBg: $primaryDarkerColor !default;
+$calendarCellDateTodayBorderColor: transparent !default;
+$calendarCellDateTodayTextColor: $primaryTextColor !default;
+
+$calendarButtonBarPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerPadding: 0.857rem 0 .429rem 0 !default;
+$calendarTimePickerElementPadding: 0 .429rem !default;
+$calendarTimePickerTimeFontSize: 1.286rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: 0 !default;
+
+//input switch
+$inputSwitchWidth: 3rem !default;
+$inputSwitchHeight: 1.75rem !default;
+$inputSwitchBorderRadius: 30px !default;
+$inputSwitchHandleWidth: 1.250rem !default;
+$inputSwitchHandleHeight: 1.250rem !default;
+$inputSwitchHandleBorderRadius: 50% !default;
+$inputSwitchSliderPadding: .25rem !default;
+$inputSwitchSliderOffBg: #4b4b4b !default;
+$inputSwitchHandleOffBg: #323232 !default;
+$inputSwitchSliderOffHoverBg: #4b4b4b !default;
+$inputSwitchSliderOnBg: $primaryColor !default;
+$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
+$inputSwitchHandleOnBg: #323232 !default;
+
+//panel
+$panelHeaderBorderColor: #191919 !default;
+$panelHeaderBorder: 1px solid #191919 !default;
+$panelHeaderBg: #191919 !default;
+$panelHeaderTextColor: #dedede !default;
+$panelHeaderFontWeight: 700 !default;
+$panelHeaderPadding: 0.857rem 1rem !default;
+$panelToggleableHeaderPadding: 0.857rem 1rem !default;
+
+$panelHeaderHoverBg: #191919 !default;
+$panelHeaderHoverBorderColor: #191919 !default;
+$panelHeaderTextHoverColor: $primaryColor !default;
+
+$panelContentBorderColor: #191919 !default;
+$panelContentBorder: 1px solid #191919 !default;
+$panelContentBg: #323232 !default;
+$panelContentEvenRowBg:#323232 !default;
+$panelContentTextColor: #dedede !default;
+$panelContentPadding: 0.571rem 1rem !default;
+
+$panelFooterBorder: 1px solid #191919 !default;
+$panelFooterBg: #323232 !default;
+$panelFooterTextColor: #dedede !default;
+$panelFooterPadding: 0.571rem 1rem !default;
+
+//accordion
+$accordionSpacing: 2px !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: #191919 !default;
+$accordionHeaderHoverBorderColor:#191919 !default;
+$accordionHeaderTextHoverColor: $primaryColor !default;
+
+$accordionHeaderActiveBg: $primaryColor !default;
+$accordionHeaderActiveBorderColor: $primaryColor !default;
+$accordionHeaderTextActiveColor: $primaryTextColor !default;
+
+$accordionHeaderActiveHoverBg: $primaryDarkerColor !default;
+$accordionHeaderActiveHoverBorderColor: $primaryDarkerColor !default;
+$accordionHeaderTextActiveHoverColor: $primaryTextColor !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 0 none !default;
+$tabviewNavBorderWidth: 1px !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 2px !default;
+$tabviewHeaderBorder: $panelHeaderBorder !default;
+$tabviewHeaderBorderWidth: 1px !default;
+$tabviewHeaderBorderColor: #191919 !default;
+$tabviewHeaderBg:$panelHeaderBg !default;
+$tabviewHeaderTextColor: $panelHeaderTextColor !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: $panelHeaderPadding !default;
+$tabviewHeaderMargin: 0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg: #191919 !default;
+$tabviewHeaderHoverBorderColor: #191919 !default;
+$tabviewHeaderTextHoverColor: $primaryColor !default;
+
+$tabviewHeaderActiveBg: $primaryColor !default;
+$tabviewHeaderActiveBorderColor: $primaryColor !default;
+$tabviewHeaderTextActiveColor: $primaryTextColor !default;
+
+$tabviewContentBorder: $panelContentBorder !default;
+$tabviewContentBg: $panelContentBg !default;
+$tabviewContentTextColor: $panelContentTextColor !default;
+$tabviewContentPadding: $panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight: .25rem !default;
+$fileUploadContentPadding: $panelContentPadding !default;
+$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
+$fileUploadFileBorder: 1px solid #4b4b4b!default;
+$fileUploadFilePadding: 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: #3f3f3f !default;
+
+//card
+$cardBodyPadding: 1rem !default;
+$cardTitleFontSize: 1.5rem !default;
+$cardTitleFontWeight: 700 !default;
+$cardSubTitleFontWeight: 700 !default;
+$cardSubTitleColor: $textSecondaryColor !default;
+$cardContentPadding: 1rem 0 !default;
+$cardFooterPadding: 1rem 0 0 0 !default;
+$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 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;
+
+//paginator
+$paginatorBg: #252525 !default;
+$paginatorTextColor: $textColor !default;
+$paginatorBorder: solid #191919 !default;
+$paginatorBorderWidth: 1px !default;
+$paginatorPadding: 0 !default;
+$paginatorElementWidth: $buttonIconOnlyWidth !default;
+$paginatorElementHeight: $buttonIconOnlyWidth !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: #dedede !default;
+$paginatorElementHoverBg: #e0e0e0 !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: #4c4c4c !default;
+$paginatorElementBorderRadius: 0 !default;
+$paginatorElementMargin: 0 !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: $panelHeaderBorder !default;
+$tableHeaderBorderWidth: 1px 1px 0 1px !default;
+$tableHeaderBg: $panelHeaderBg !default;
+$tableHeaderTextColor: $panelHeaderTextColor !default;
+$tableHeaderFontWeight: $panelHeaderFontWeight !default;
+$tableHeaderPadding: $panelHeaderPadding !default;
+
+$tableHeaderCellPadding: 0.571rem 0.857rem !default;
+$tableHeaderCellBg: #252525 !default;
+$tableHeaderCellTextColor: $textColor !default;
+$tableHeaderCellFontWeight: 700 !default;
+$tableHeaderCellBorder: 1px solid #191919 !default;
+$tableHeaderCellBorderWidth: 1px 1px 1px 1px !default;
+$tableHeaderCellHoverBg: #4c4c4c !default;
+$tableHeaderCellTextHoverColor: #dedede !default;
+$tableHeaderCellIconColor: $textSecondaryColor !default;
+$tableHeaderCellIconHoverColor: #dedede !default;
+$tableHeaderCellHighlightBg:$highlightBg !default;
+$tableHeaderCellHighlightTextColor:$highlightTextColor !default;
+$tableHeaderCellHighlightHoverBg:$highlightBg !default;
+$tableHeaderCellHighlightTextHoverColor:$highlightTextColor !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: #323232 !default;
+$tableBodyRowTextColor: $textColor !default;
+$tableBodyRowEvenBg: #323232 !default;
+$tableBodyRowHoverBg: #4c4c4c !default;
+$tableBodyRowTextHoverColor: $textColor !default;
+$tableBodyCellBorder: 1px solid #191919 !default;
+$tableBodyCellBorderWidth: 1px !default;
+$tableBodyCellPadding: 0.571rem 0.857rem !default;
+
+$tableFooterCellPadding: 0.571rem 0.857rem !default;
+$tableFooterCellBg: #252525 !default;
+$tableFooterCellTextColor: $textColor !default;
+$tableFooterCellFontWeight: 700 !default;
+$tableFooterCellBorder: 1px solid #191919 !default;
+$tableFooterCellBorderWidth: 1px !default;
+$tableResizerHelperBg: $primaryColor !default;
+
+$tableFooterBorder: $panelFooterBorder !default;
+$tableFooterBorderWidth: 0 1px 1px 1px !default;
+$tableFooterBg: $panelFooterBg !default;
+$tableFooterTextColor: $panelFooterTextColor !default;
+$tableFooterFontWeight: normal !default;
+$tableFooterPadding: $panelFooterPadding !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 1px 0 1px !default;
+$tableBottomPaginatorBorderWidth: 0 1px 1px 1px !default;
+
+$tableScaleSM: 0.85 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+$dataViewListItemBorder: $divider !default;
+$dataViewListItemBorderWidth: 1px !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0 !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $textSecondaryColor !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$highlightBg !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:#191919 !default;
+
+//org chart
+$organizationChartConnectorColor: #191919 !default;
+
+//messages
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1rem !default;
+$messageBorderWidth: 0 !default;
+$messageIconFontSize: 1.5rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: normal !default;
+
+//message
+$inlineMessagePadding: .5rem !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 0 !default;
+
+//toast
+$toastIconFontSize: 2rem !default;
+$toastMessageTextMargin: 0 0 0 $inlineSpacing !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1rem !default;
+$toastBorderWidth: 0 !default;
+$toastShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$toastOpacity: .9 !default;
+$toastTitleFontWeight: 700 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: #7fbcec !default;
+$infoMessageBorder: 0 none !default;
+$infoMessageTextColor: #212121 !default;
+$infoMessageIconColor: #212121 !default;
+$successMessageBg: #b7d8b7 !default;
+$successMessageBorder: 0 none !default;
+$successMessageTextColor: #212121 !default;
+$successMessageIconColor: #212121 !default;
+$warningMessageBg: #ffe399 !default;
+$warningMessageBorder: 0 none !default;
+$warningMessageTextColor: #212121 !default;
+$warningMessageIconColor: #212121 !default;
+$errorMessageBg: #f8b7bd !default;
+$errorMessageBorder: 0 none !default;
+$errorMessageTextColor: #212121 !default;
+$errorMessageIconColor: #212121 !default;
+
+//overlays
+$overlayContentBorder: 1px solid #191919 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16) !default;
+
+//dialog
+$dialogHeaderBg: $panelHeaderBg !default;
+$dialogHeaderBorder: $panelHeaderBorder !default;
+$dialogHeaderTextColor: $panelHeaderTextColor !default;
+$dialogHeaderFontWeight: $panelHeaderFontWeight !default;
+$dialogHeaderFontSize: 1rem !default;
+$dialogHeaderPadding: 1rem !default;
+$dialogContentPadding: 1rem !default;
+$dialogFooterBorder: $panelFooterBorder !default;
+$dialogFooterPadding: $panelFooterPadding !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1rem .571rem 1rem !default;
+
+//tooltip
+$tooltipBg: #4c4c4c !default;
+$tooltipTextColor: #dedede !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: #191919 !default;
+$stepsItemBorder: 1px solid #191919 !default;
+$stepsItemTextColor: $textSecondaryColor !default;
+$stepsItemNumberWidth: 2rem !default;
+$stepsItemNumberHeight: 2rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $textColor !default;
+$stepsItemNumberBorderRadius: 50% !default;
+$stepsItemActiveFontWeight: 700 !default;
+
+//progressbar, progressspinner
+$progressBarHeight: 24px !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: #eaeaea !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+$progressSpinnerStrokeColor:$errorMessageTextColor !default;
+$progressSpinnerColorOne:$errorMessageTextColor !default;
+$progressSpinnerColorTwo:$infoMessageTextColor !default;
+$progressSpinnerColorThree:$successMessageTextColor !default;
+$progressSpinnerColorFour:$warningMessageTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: #252525 !default;
+$menuBorder: 1px solid #191919 !default;
+$menuTextColor: $textColor !default;
+$menuitemPadding: 0.857rem !default;
+$menuitemBorderRadius: 0 !default;
+$menuitemTextColor: #dedede !default;
+$menuitemIconColor: #dedede !default;
+$menuitemTextHoverColor: #dedede !default;
+$menuitemIconHoverColor: #dedede !default;
+$menuitemHoverBg: #4c4c4c !default;
+$menuitemTextFocusColor: $textColor !default;
+$menuitemIconFocusColor: $textColor !default;
+$menuitemFocusBg:#3c3c3c !default;
+$menuitemTextActiveColor: $primaryTextColor !default;
+$menuitemIconActiveColor: $primaryTextColor !default;
+$menuitemActiveBg: $primaryColor !default;
+$menuitemActiveFocusBg: $primaryColor !default;
+$menuitemSubmenuIconFontSize: .875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.857rem !default;
+$submenuHeaderBg: #191919 !default;
+$submenuHeaderTextColor: $textColor !default;
+$submenuHeaderBorderRadius: $borderRadius !default;
+$submenuHeaderFontWeight: 700 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder: 1px solid #191919 !default;
+$overlayMenuShadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16) !default;
+$verticalMenuPadding: 0 !default;
+$menuSeparatorMargin: 0 !default;
+
+$breadcrumbPadding: 0.571rem 1rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: .5rem !default;
+$horizontalMenuBg: $menuBg !default;
+$horizontalMenuBorder: $menuBorder !default;
+$horizontalMenuTextColor: $menuTextColor !default;
+$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
+$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !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;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: #4b4b4b !default;
+$carouselIndicatorHoverBg: #4c4c4c !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: #ebedef !default;
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor: #ebedef !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: rgba(0,0,0,.2) !default;
+$galleriaItemNavigatorColor: #aeb6bf !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3) !default;
+$galleriaItemNavigatorHoverColor: #ebedef !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor: #ebedef !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: #4b4b4b !default;
+$galleriaIndicatorHoverBg: #4c4c4c !default;
+$galleriaIndicatorBorderRadius: 50% !default;
+$galleriaIndicatorWidth: 1rem !default;
+$galleriaIndicatorHeight: 1rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding: 1rem .25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf !default;
+$galleriaThumbnailNavigatorBorderRadius: 50% !default;
+$galleriaThumbnailNavigatorWidth: 2rem !default;
+$galleriaThumbnailNavigatorHeight: 2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:#4b4b4b !default;
+
+//avatar
+$avatarBg:#4b4b4b !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:#4b4b4b !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius:16px !default;
+$chipFocusBg:#464646 !default;
+$chipFocusTextColor:$textColor !default;
+
+//scrollTop
+$scrollTopBg:$primaryColor !default;
+$scrollTopHoverBg:$primaryDarkColor !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:50% !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$primaryTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:#191919 !default;
+$splitterGutterHandleBg:#4b4b4b !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: #474747 !default;
+$speedDialActionHoverBg: #4d4d4d !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockItemBorderRadius:$borderRadius !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --surface-a: #191919;
+    --surface-b: #191919;
+    --surface-c: #4c4c4c;
+    --surface-d: #4b4b4b;
+    --surface-e: #323232;
+    --surface-f: #323232;
+    --text-color: #dedede;
+    --text-color-secondary: #888888;
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --surface-0: #191919;
+    --surface-50: #303030;
+    --surface-100: #474747;
+    --surface-200: #5e5e5e;
+    --surface-300: #757575;
+    --surface-400: #8c8c8c;
+    --surface-500: #a3a3a3;
+    --surface-600: #bababa;
+    --surface-700: #d1d1d1;
+    --surface-800: #e8e8e8;
+    --surface-900: #ffffff;
+    --gray-50: #e8e8e8;
+    --gray-100: #d1d1d1;
+    --gray-200: #bababa;
+    --gray-300: #a3a3a3;
+    --gray-400: #8c8c8c;
+    --gray-500: #757575;
+    --gray-600: #5e5e5e;
+    --gray-700: #474747;
+    --gray-800: #303030;
+    --gray-900: #191919;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#191919;
+    --surface-section:#191919;
+    --surface-card:#323232;
+    --surface-overlay:#323232;
+    --surface-border:#4b4b4b;
+    --surface-hover:#4c4c4c;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light dark;
+}