@mediusinc/mng-commons 3.5.0 → 3.6.0-rc.1

package/scss/v2/theme/theme-light/_variables.scss

@@ -0,0 +1,937 @@
+$colors: (
+    'blue': #2196f3,
+    'green': #4caf50,
+    'yellow': #fbc02d,
+    'cyan': #00bcd4,
+    'pink': #e91e63,
+    'indigo': #3f51b5,
+    'teal': #009688,
+    'orange': #f57c00,
+    'bluegray': #607d8b,
+    'purple': #9c27b0,
+    'primary': $primaryColor,
+    'red': #ff3d32
+);
+
+//reused color variables
+$shade000: transparent !default; //surface
+$shade100: rgba(68, 72, 109, 0.07) !default; //Alpha - 01
+$shade200: rgba(68, 72, 109, 0.12) !default; //Alpha - 02
+$shade300: rgba(68, 72, 109, 0.17) !default; //Alpha - 03
+$shade400: rgba(255, 255, 255, 0.9) !default; //CardBg
+$shade500: #8a8ea6 !default; //text third color
+$shade600: #676b89 !default; //text secondary color
+$shade700: #44486d !default; //text color
+
+$solidSurfaceColor: #ececf9 !default;
+
+//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: $shade700 !default;
+$textSecondaryColor: $shade600 !default;
+$borderRadius: 6px !default;
+$transitionDuration: 0.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: box-shadow $transitionDuration !default;
+$primeIconFontSize: 1rem !default;
+$divider: 1px solid $shade300 !default;
+$inlineSpacing: 0.5rem !default;
+$disabledOpacity: 0.6 !default;
+$maskBg: rgba(0, 0, 0, 0.2) !default;
+$loadingIconFontSize: 2rem !default;
+$errorColor: #fc6161 !default;
+
+//scale
+$scaleSM: 0.875 !default;
+$scaleLG: 1.25 !default;
+
+//focus
+$focusOutlineColor: $primaryColor !default;
+$focusOutline: 0 none !default;
+$focusOutlineOffset: 0 !default;
+$focusShadow: 0 none !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade600 !default;
+$actionIconHoverBg: $shade100 !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade700 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding: 0.429rem 0.571rem !default;
+$inputTextFontSize: 1rem !default;
+$inputBg: $shade100 !default;
+$inputTextColor: $shade700 !default;
+$inputIconColor: $shade600 !default;
+$inputBorder: 1px solid transparent !default;
+$inputHoverBorderColor: transparent !default;
+$inputFocusBorderColor: $primaryColor !default;
+$inputErrorBorderColor: $errorColor !default;
+$inputPlaceholderTextColor: $shade500 !default;
+$inputFilledBg: $shade000 !default;
+$inputFilledHoverBg: $inputFilledBg !default;
+$inputFilledFocusBg: $shade100 !default;
+
+//input groups
+$inputGroupBg: $shade100 !default;
+$inputGroupTextColor: $shade600 !default;
+$inputGroupAddOnMinWidth: 2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg: $shade100 !default;
+$inputListTextColor: $shade700 !default;
+$inputListBorder: $inputBorder !default;
+$inputListPadding: 0.286rem !default;
+$inputListItemPadding: 0.429rem 0.286rem !default;
+$inputListItemBg: transparent !default;
+$inputListItemTextColor: $shade700 !default;
+$inputListItemHoverBg: $shade100 !default;
+$inputListItemTextHoverColor: $shade700 !default;
+$inputListItemBorder: 0 none !default;
+$inputListItemBorderRadius: 4px !default;
+$inputListItemMargin: 0 !default;
+$inputListItemFocusShadow: 0 none !default;
+$inputListHeaderPadding: 0.429rem 0.286rem !default;
+$inputListHeaderMargin: 0 !default;
+$inputListHeaderBg: $shade000 !default;
+$inputListHeaderTextColor: $shade700 !default;
+$inputListHeaderBorder: 0 none !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg: white !default;
+$inputOverlayHeaderBg: $inputListHeaderBg !default;
+$inputOverlayBorder: 0 none !default;
+$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
+
+//password
+$passwordPanelBg: white !default;
+$passwordMeterBg: $shade200 !default;
+$passwordWeakBg: #d32f2f !default;
+$passwordMediumBg: #fbc02d !default;
+$passwordStrongBg: #689f38 !default;
+
+//button
+$buttonPadding: 0.429rem 0.571rem !default;
+$buttonIconOnlyWidth: 2.286rem !default;
+$buttonIconOnlyPadding: 0.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;
+$buttonShadow: 0px 0px 10px rgba($primaryColor, 0.25);
+
+$selectbuttonShadow: none !default;
+$raisedButtonShadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
+$roundedButtonBorderRadius: 2rem !default;
+
+$textButtonHoverBgOpacity: 0.04 !default;
+$textButtonActiveBgOpacity: 0.16 !default;
+$outlinedButtonBorder: 1px solid !default;
+$plainButtonTextColor: $textSecondaryColor !default;
+$plainButtonHoverBgColor: $shade100 !default;
+$plainButtonActiveBgColor: $shade300 !default;
+
+$secondaryButtonBg: $shade100 !default;
+$secondaryButtonTextColor: #44486d !default;
+$secondaryButtonBorder: 1px solid transparent !default;
+$secondaryButtonHoverBg: $shade200 !default;
+$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
+$secondaryButtonHoverBorderColor: transparent !default;
+$secondaryButtonActiveBg: $shade300 !default;
+$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
+$secondaryButtonActiveBorderColor: transparent !default;
+$secondaryButtonShadow: none !default;
+$secondaryButtonFocusShadow: none !default;
+
+$infoButtonBg: #873efe !default;
+$infoButtonTextColor: #ffffff !default;
+$infoButtonBorder: 1px solid transparent !default;
+$infoButtonHoverBg: #6c1af2 !default;
+$infoButtonTextHoverColor: $infoButtonTextColor !default;
+$infoButtonHoverBorderColor: transparent !default;
+$infoButtonActiveBg: #5310c1 !default;
+$infoButtonTextActiveColor: $infoButtonTextColor !default;
+$infoButtonActiveBorderColor: transparent !default;
+$infoButtonShadow: 0px 0px 10px rgba(135, 62, 254, 0.25) !default;
+$infoButtonFocusShadow: none !default;
+
+$successButtonBg: #0bd18a !default;
+$successButtonTextColor: #ffffff !default;
+$successButtonBorder: 1px solid transparent !default;
+$successButtonHoverBg: #049b65 !default;
+$successButtonTextHoverColor: $successButtonTextColor !default;
+$successButtonHoverBorderColor: transparent !default;
+$successButtonActiveBg: #017e52 !default;
+$successButtonTextActiveColor: $successButtonTextColor !default;
+$successButtonActiveBorderColor: transparent !default;
+$successButtonShadow: 0px 0px 10px rgba(11, 209, 138, 0.25) !default;
+$successButtonFocusShadow: none !default;
+
+$warningButtonBg: #eee500 !default;
+$warningButtonTextColor: #44486d !default;
+$warningButtonBorder: 1px solid transparent !default;
+$warningButtonHoverBg: #d1c901 !default;
+$warningButtonTextHoverColor: $warningButtonTextColor !default;
+$warningButtonHoverBorderColor: transparent !default;
+$warningButtonActiveBg: #bab302 !default;
+$warningButtonTextActiveColor: $warningButtonTextColor !default;
+$warningButtonActiveBorderColor: transparent !default;
+$warningButtonShadow: 0px 0px 10px rgba(238, 229, 0, 0.25) !default;
+$warningButtonFocusShadow: none !default;
+
+$helpButtonBg: #ec4dbc !default;
+$helpButtonTextColor: #ffffff !default;
+$helpButtonBorder: 1px solid transparent !default;
+$helpButtonHoverBg: #e80ea6 !default;
+$helpButtonTextHoverColor: $helpButtonTextColor !default;
+$helpButtonHoverBorderColor: transparent !default;
+$helpButtonActiveBg: #b30c81 !default;
+$helpButtonTextActiveColor: $helpButtonTextColor !default;
+$helpButtonActiveBorderColor: transparent !default;
+$helpButtonShadow: 0px 0px 10px rgba(236, 77, 188, 0.25) !default;
+$helpButtonFocusShadow: none !default;
+
+$dangerButtonBg: #fc6161 !default;
+$dangerButtonTextColor: #ffffff !default;
+$dangerButtonBorder: 1px solid transparent !default;
+$dangerButtonHoverBg: #e73a3a !default;
+$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
+$dangerButtonHoverBorderColor: transparent !default;
+$dangerButtonActiveBg: #c42424 !default;
+$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
+$dangerButtonActiveBorderColor: transparent !default;
+$dangerButtonShadow: 0px 0px 10px rgba(252, 97, 97, 0.25) !default;
+$dangerButtonFocusShadow: none !default;
+
+$linkButtonColor: $primaryColor !default;
+$linkButtonHoverColor: $primaryColor !default;
+$linkButtonTextHoverDecoration: underline !default;
+$linkButtonFocusShadow: none !default;
+
+//checkbox
+$checkboxWidth: 20px !default;
+$checkboxHeight: 20px !default;
+$checkboxBorder: 2px solid #8a8ea6 !default;
+$checkboxIconFontSize: 14px !default;
+$checkboxHoverBorderColor: #676b89 !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: 2px solid #8a8ea6 !default;
+$radiobuttonIconSize: 12px !default;
+$radiobuttonHoverBorderColor: #676b89 !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: $shade100 !default;
+$colorPickerBorderColor: #191919 !default;
+$colorPickerBorder: 1px solid #191919 !default;
+$colorPickerHandleColor: #191919 !default;
+
+//togglebutton
+$toggleButtonBg: $inputBg !default;
+$toggleButtonBorder: 1px solid transparent !default;
+$toggleButtonTextColor: $shade700 !default;
+$toggleButtonIconColor: $shade600 !default;
+$toggleButtonHoverBg: $shade200 !default;
+$toggleButtonHoverBorderColor: transparent !default;
+$toggleButtonTextHoverColor: $shade700 !default;
+$toggleButtonIconHoverColor: $shade600 !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: $shade100 !default;
+$inplaceTextHoverColor: $shade700 !default;
+
+//rating
+$ratingIconFontSize: 1.286rem !default;
+$ratingCancelIconColor: #fc6161 !default;
+$ratingCancelIconHoverColor: #fc6161 !default;
+$ratingStarIconOffColor: $shade700 !default;
+$ratingStarIconOnColor: $primaryColor !default;
+$ratingStarIconHoverColor: $primaryColor !default;
+
+//slider
+$sliderBg: $shade200 !default;
+$sliderBorder: 0 none !default;
+$sliderHorizontalHeight: 0.429rem !default;
+$sliderVerticalWidth: 0.429rem !default;
+$sliderHandleWidth: 1.143rem !default;
+$sliderHandleHeight: 1.143rem !default;
+$sliderHandleBg: #ffffff !default;
+$sliderHandleBorder: 4px solid $primaryColor !default;
+$sliderHandleBorderRadius: 50% !default;
+$sliderHandleHoverBorderColor: $primaryColor !default;
+$sliderHandleHoverBg: $primaryColor !default;
+$sliderRangeBg: $primaryColor !default;
+
+//calendar
+$calendarTableMargin: 0.5rem 0 !default;
+$calendarPadding: 0.857rem !default;
+$calendarBg: white !default;
+$calendarInlineBg: transparent !default;
+$calendarTextColor: $shade700 !default;
+$calendarBorder: $inputListBorder !default;
+$calendarOverlayBorder: $inputOverlayBorder !default;
+
+$calendarHeaderPadding: 0 0 0.75rem 0 !default;
+$calendarHeaderBg: transparent !default;
+$calendarInlineHeaderBg: $calendarInlineBg !default;
+$calendarHeaderBorder: 0 none !default;
+$calendarHeaderTextColor: $shade700 !default;
+$calendarHeaderFontWeight: 400 !default;
+$calendarHeaderCellPadding: 0.357rem !default;
+$calendarHeaderCellFontWeight: 500 !default;
+$calendarHeaderCellFontSize: 12px !default;
+$calendarHeaderCellTextColor: $shade500 !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDateBg: $shade100 !default;
+$calendarCellDatePadding: 0.357rem !default;
+$calendarCellDateWidth: 2.571rem !default;
+$calendarCellDateHeight: 2.571rem !default;
+$calendarCellDateBorderRadius: $borderRadius !default;
+$calendarCellDateBorder: 2px solid transparent !default;
+$calendarCellDateHoverBg: $shade200 !default;
+$calendarCellDateTodayBg: $shade100 !default;
+$calendarCellDateTodayBorderColor: $shade200 !default;
+$calendarCellDateTodayTextColor: $shade700 !default;
+
+$calendarButtonBarPadding: 1rem 0 !default;
+$calendarTimePickerPadding: 0.5rem !default;
+$calendarTimePickerElementPadding: 0 0.5rem !default;
+$calendarTimePickerTimeFontSize: 1.25rem !default;
+
+$calendarBreakpoint: 769px !default;
+$calendarCellDatePaddingSM: 0 !default;
+
+//input switch
+$inputSwitchWidth: 2.714rem !default;
+$inputSwitchHeight: 1.429rem !default;
+$inputSwitchBorderRadius: 12px !default;
+$inputSwitchHandleWidth: 1.143rem !default;
+$inputSwitchHandleHeight: 1.143rem !default;
+$inputSwitchHandleBorderRadius: 8px !default;
+$inputSwitchSliderPadding: 0.25rem !default;
+$inputSwitchSliderOffBg: $shade100 !default;
+$inputSwitchHandleOffBg: $shade600 !default;
+$inputSwitchSliderOffHoverBg: $shade200 !default;
+$inputSwitchSliderOnBg: $primaryColor !default;
+$inputSwitchSliderOnHoverBg: $primaryDarkColor !default;
+$inputSwitchHandleOnBg: #ffffff !default;
+
+//panel
+$panelHeaderBorderColor: $shade300 !default;
+$panelHeaderBorder: 1px solid $shade300 !default;
+$panelHeaderBg: transparent !default;
+$panelHeaderTextColor: $shade700 !default;
+$panelHeaderFontWeight: 500 !default;
+$panelHeaderPadding: 0.714rem 1.143rem !default;
+$panelToggleableHeaderPadding: 0.429rem 0.571rem !default;
+
+$panelHeaderHoverBg: $shade100 !default;
+$panelHeaderHoverBorderColor: $shade300 !default;
+$panelHeaderTextHoverColor: $shade700 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder: 1px solid $shade300 !default;
+$panelContentBg: transparent !default;
+$panelContentEvenRowBg: scale-color($panelContentBg, $lightness: -1%) !default;
+$panelContentTextColor: $shade700 !default;
+$panelContentPadding: 1.143rem !default;
+
+$panelFooterBorder: 1px solid $shade300 !default;
+$panelFooterBg: transparent !default;
+$panelFooterTextColor: $shade700 !default;
+$panelFooterPadding: 0.714rem 1.143rem !default;
+
+$fieldsetContentPadding: 0.429rem !default;
+
+//accordion
+$accordionSpacing: 0 !default;
+$accordionHeaderBorder: $panelHeaderBorder !default;
+$accordionHeaderBg: $panelHeaderBg !default;
+$accordionHeaderTextColor: $panelHeaderTextColor !default;
+$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
+$accordionHeaderPadding: $panelHeaderPadding !default;
+
+$accordionHeaderHoverBg: $shade100 !default;
+$accordionHeaderHoverBorderColor: $shade300 !default;
+$accordionHeaderTextHoverColor: $shade700 !default;
+
+$accordionHeaderActiveBg: $shade200 !default;
+$accordionHeaderActiveBorderColor: $shade300 !default;
+$accordionHeaderTextActiveColor: $shade700 !default;
+
+$accordionHeaderActiveHoverBg: $shade200 !default;
+$accordionHeaderActiveHoverBorderColor: $shade300 !default;
+$accordionHeaderTextActiveHoverColor: $shade700 !default;
+
+$accordionContentBorder: $panelContentBorder !default;
+$accordionContentBg: $panelContentBg !default;
+$accordionContentTextColor: $panelContentTextColor !default;
+$accordionContentPadding: $panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder: 1px solid $shade300 !default;
+$tabviewNavBorderWidth: 0 0 2px 0 !default;
+$tabviewNavBg: transparent !default;
+
+$tabviewHeaderSpacing: 0.857rem !default;
+$tabviewHeaderBorder: solid transparent !default;
+$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
+$tabviewHeaderBorderColor: transparent transparent transparent transparent !default;
+$tabviewHeaderBg: transparent !default;
+$tabviewHeaderTextColor: $shade500 !default;
+$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
+$tabviewHeaderPadding: 0.571rem 0.429rem !default;
+$tabviewHeaderMargin: 0 0 -2px 0 !default;
+
+$tabviewHeaderHoverBg: transparent !default;
+$tabviewHeaderHoverBorderColor: $shade700 !default;
+$tabviewHeaderTextHoverColor: $shade700 !default;
+
+$tabviewHeaderActiveBg: transparent !default;
+$tabviewHeaderActiveBorderColor: $primaryColor !default;
+$tabviewHeaderTextActiveColor: $primaryColor !default;
+
+$tabviewContentBorder: 0 none !default;
+$tabviewContentBg: transparent !default;
+$tabviewContentTextColor: $panelContentTextColor !default;
+$tabviewContentPadding: 1.143rem 0 !default;
+
+//upload
+$fileUploadProgressBarHeight: 0.25rem !default;
+$fileUploadContentPadding: 2rem 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder: 0 none !default;
+$scrollPanelTrackBg: $shade000 !default;
+
+//card
+$cardBodyPadding: 0.857rem 1.143rem !default;
+$cardTitleFontSize: 1.143rem !default;
+$cardTitleFontWeight: 500 !default;
+$cardSubTitleFontSize: 12px !default;
+$cardSubTitleFontWeight: 500 !default;
+$cardSubTitleColor: $shade500 !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: transparent !default;
+$paginatorTextColor: $shade700 !default;
+$paginatorBorder: solid $shade300 !default;
+$paginatorBorderWidth: 0 !default;
+$paginatorPadding: 0.571rem 0.571rem !default;
+$paginatorElementWidth: 1.429rem !default;
+$paginatorElementHeight: 1.429rem !default;
+$paginatorElementBg: transparent !default;
+$paginatorElementBorder: 0 none !default;
+$paginatorElementIconColor: $shade700 !default;
+$paginatorElementHoverBg: $shade100 !default;
+$paginatorElementHoverBorderColor: transparent !default;
+$paginatorElementIconHoverColor: $shade700 !default;
+$paginatorElementActiveBg: $shade200 !default;
+$paginatorElementActiveBorderColor: transparent !default;
+$paginatorElementIconActiveColor: $shade700 !default;
+$paginatorElementBorderRadius: 4px !default;
+$paginatorElementMargin: 0.143rem !default;
+$paginatorElementPadding: 0 !default;
+
+//table
+$tableHeaderBorder: 1px solid $shade300 !default;
+$tableHeaderBorderWidth: 1px 0 1px 0 !default;
+$tableHeaderBg: transparent !default;
+$tableHeaderTextColor: $shade500 !default;
+$tableHeaderFontWeight: 500 !default;
+$tableHeaderPadding: 0.571rem 0.571rem !default;
+
+$tableHeaderCellPadding: 0.571rem 0.571rem !default;
+$tableHeaderCellBg: transparent !default;
+$tableHeaderCellTextColor: $shade500 !default;
+$tableHeaderCellFontWeight: 500 !default;
+$tableHeaderCellBorder: 1px solid $shade300 !default;
+$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
+$tableHeaderCellHoverBg: $shade100 !default;
+$tableHeaderCellTextHoverColor: $shade500 !default;
+$tableHeaderCellIconColor: $shade500 !default;
+$tableHeaderCellIconHoverColor: $shade500 !default;
+$tableHeaderCellHighlightBg: $shade200 !default;
+$tableHeaderCellHighlightTextColor: $shade500 !default;
+$tableHeaderCellHighlightHoverBg: $shade200 !default;
+$tableHeaderCellHighlightTextHoverColor: $shade500 !default;
+$tableSortableColumnBadgeSize: 1.143rem !default;
+
+$tableBodyRowBg: transparent !default;
+$tableBodyRowTextColor: $shade700 !default;
+$tableBodyRowEvenBg: transparent !default;
+$tableBodyRowHoverBg: $shade100 !default;
+$tableBodyRowTextHoverColor: $shade700 !default;
+$tableBodyRowHighlightBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff;
+$tableBodyRowHighlightTextColor: $shade700;
+$tableBodyCellBorder: 1px solid $shade300 !default;
+$tableBodyCellBorderWidth: 0 0 0 0 !default;
+$tableBodyCellPadding: 0.429rem 0.571rem !default;
+
+$tableFooterCellPadding: 0.571rem 0.571rem !default;
+$tableFooterCellBg: transparent !default;
+$tableFooterCellTextColor: $shade500 !default;
+$tableFooterCellFontWeight: 500 !default;
+$tableFooterCellBorder: 1px solid $shade300 !default;
+$tableFooterCellBorderWidth: 0 0 1px 0 !default;
+$tableResizerHelperBg: $primaryColor !default;
+
+$tableFooterBorder: 1px solid $shade300 !default;
+$tableFooterBorderWidth: 0 0 1px 0 !default;
+$tableFooterBg: transparent !default;
+$tableFooterTextColor: $shade500 !default;
+$tableFooterFontWeight: 500 !default;
+$tableFooterPadding: 1rem 1rem !default;
+
+$tableCellContentAlignment: left !default;
+$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
+$tableBottomPaginatorBorderWidth: 1px 0 1px 0 !default;
+
+$tableScaleSM: 0.5 !default;
+$tableScaleLG: 1.25 !default;
+
+//dataview
+$dataViewContentPadding: 0 !default;
+$dataViewContentBorder: 0 none !default;
+$dataViewListItemBorder: solid $shade100 !default;
+$dataViewListItemBorderWidth: 0 0 0 0 !default;
+
+//orderlist
+$orderlistBg: $shade400 !default;
+$orderlistShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
+$orderlistBorderRadius: 8px !default;
+$orderlistBorder: 0 none !default;
+$orderlistBorderWidth: 0 0 0 0 !default;
+$orderlistHeaderPadding: 1.143rem !default;
+$orderlistListPadding: 0.571rem !default;
+$orderlistListItemPadding: 0.714rem 0.571rem !default;
+$orderlistListItemBorder: 1px solid transparent !default;
+$orderlistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff !default;
+$orderlistListItemActiveBorderColor: $highlightBg !default;
+
+//picklist
+$picklistBg: $shade400 !default;
+$picklistShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
+$picklistBorderRadius: 8px !default;
+$picklistBorder: 0 none !default;
+$picklistBorderWidth: 0 0 0 0 !default;
+$picklistHeaderPadding: 1.143rem !default;
+$picklistListPadding: 0.571rem !default;
+$picklistListItemPadding: 0.714rem 0.571rem !default;
+$picklistListItemBorder: 1px solid transparent !default;
+$picklistListItemActiveBg: linear-gradient(0deg, rgba($highlightBg, 0.1), rgba($highlightBg, 0.1)), #ffffff !default;
+$picklistListItemActiveBorderColor: $highlightBg !default;
+
+//schedule
+$fullCalendarEventBg: $primaryDarkColor !default;
+$fullCalendarEventBorderColor: $primaryDarkColor !default;
+$fullCalendarEventBorder: 1px solid $primaryDarkColor !default;
+$fullCalendarEventTextColor: $primaryTextColor !default;
+
+//tree
+$treeContainerPadding: 0.286rem !default;
+$treeNodePadding: 0.143rem !default;
+$treeNodeContentPadding: 0.429rem 0.571rem !default;
+$treeNodeChildrenPadding: 0 0 0 1rem !default;
+$treeNodeIconColor: $shade700 !default;
+
+//timeline
+$timelineVerticalEventContentPadding: 0 1rem !default;
+$timelineHorizontalEventContentPadding: 1rem 0 !default;
+$timelineEventMarkerWidth: 1rem !default;
+$timelineEventMarkerHeight: 1rem !default;
+$timelineEventMarkerBorderRadius: 50% !default;
+$timelineEventMarkerBorder: 2px solid $primaryColor !default;
+$timelineEventMarkerBackground: $shade100 !default;
+$timelineEventConnectorSize: 2px !default;
+$timelineEventColor: $shade300 !default;
+
+//org chart
+$organizationChartConnectorColor: $shade300 !default;
+
+//message
+$messageMargin: 1rem 0 !default;
+$messagePadding: 1.143rem 1.357rem !default;
+$messageBorderWidth: 0 0 0 20px !default;
+$messageIconFontSize: 1.286rem !default;
+$messageTextFontSize: 1rem !default;
+$messageTextFontWeight: 400 !default;
+
+//inline message
+$inlineMessagePadding: $inputPadding !default;
+$inlineMessageMargin: 0 !default;
+$inlineMessageIconFontSize: 1.286rem !default;
+$inlineMessageTextFontSize: 1rem !default;
+$inlineMessageBorderWidth: 0 0 0 20px !default;
+
+//toast
+$toastIconFontSize: 1.286rem !default;
+$toastMessageTextMargin: 0 0 0 1rem !default;
+$toastMargin: 0 0 1rem 0 !default;
+$toastPadding: 1.143rem 1.357rem !default;
+$toastBorderWidth: 0 0 0 20px !default;
+$toastShadow: none !default;
+$toastOpacity: 0.9 !default;
+$toastTitleFontWeight: 400 !default;
+$toastDetailMargin: $inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg: $shade100 !default;
+$infoMessageBorder: solid #873efe !default;
+$infoMessageTextColor: $shade700 !default;
+$infoMessageIconColor: $shade700 !default;
+$successMessageBg: $shade100 !default;
+$successMessageBorder: solid #0bd18a !default;
+$successMessageTextColor: $shade700 !default;
+$successMessageIconColor: $shade700 !default;
+$warningMessageBg: $shade100 !default;
+$warningMessageBorder: solid #eee500 !default;
+$warningMessageTextColor: $shade700 !default;
+$warningMessageIconColor: $shade700 !default;
+$errorMessageBg: $shade100 !default;
+$errorMessageBorder: solid #fc6161 !default;
+$errorMessageTextColor: $shade700 !default;
+$errorMessageIconColor: $shade700 !default;
+
+//overlays
+$overlayContentBorder: 0 none !default;
+$overlayContentBg: white !default;
+$overlayContainerShadow: 0px 18px 50px -4px rgba(68, 72, 109, 0.1) !default;
+
+//dialog
+$dialogBorderRadius: 20px;
+$dialogHeaderBg: white !default;
+$dialogHeaderBorder: 0 none !default;
+$dialogHeaderTextColor: $shade700 !default;
+$dialogHeaderFontWeight: 500 !default;
+$dialogHeaderFontSize: 1.143rem !default;
+$dialogHeaderPadding: 1.286rem 1.714rem !default;
+$dialogContentPadding: 0 1.714rem 1.714rem 1.714rem !default;
+$dialogFooterBorder: 0 none !default;
+$dialogFooterPadding: 0 1.714rem 1.714rem 1.714rem !default;
+
+//tooltip
+$tooltipBg: white !default;
+$tooltipTextColor: $shade700 !default;
+$tooltipPadding: $inputPadding !default;
+
+//steps
+$stepsItemBg: transparent !default;
+$stepsItemBorder: 0 none !default;
+$stepsItemTextColor: $shade500 !default;
+$stepsItemNumberBg: $shade200 !default;
+$stepsItemNumberWidth: 1.714rem !default;
+$stepsItemNumberHeight: 1.714rem !default;
+$stepsItemNumberFontSize: 1.143rem !default;
+$stepsItemNumberColor: $shade500 !default;
+$stepsItemNumberBorderRadius: 12px !default;
+$stepsItemActiveFontWeight: 400 !default;
+$stepsItemHoverBg: $shade300 !default;
+$stepsItemHoverTextColor: $shade700 !default;
+$stepsItemActiveFontWeight: 400 !default;
+$stepsItemActiveBg: $highlightBg !default;
+$stepsItemNumberActiveTextColor: $highlightTextColor !default;
+$stepsItemActiveTextColor: $shade700 !default;
+$stepsItemActiveShadow: 0px 0px 10px rgba($highlightBg, 0.25) !default;
+
+//progressbar
+$progressBarHeight: 0.571rem !default;
+$progressBarBorder: 0 none !default;
+$progressBarBg: $shade200 !default;
+$progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor: $primaryTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth: 12.5rem !default;
+$menuBg: transparent !default;
+$menuBorder: 1px solid $shade300 !default;
+$menuTextColor: $shade600 !default;
+$menuitemPadding: 0.571rem 0.429rem !default;
+$menuitemBorderRadius: $borderRadius !default;
+$menuitemBorder: 1px solid transparent !default;
+$menuitemTextColor: $shade600 !default;
+$menuitemIconColor: $shade600 !default;
+$menuitemTextHoverColor: $shade700 !default;
+$menuitemIconHoverColor: $shade700 !default;
+$menuitemHoverBg: $shade100 !default;
+$menuitemFocusBorderColor: $shade500 !default;
+$menuitemTextActiveColor: $shade700 !default;
+$menuitemIconActiveColor: $shade700 !default;
+$menuitemActiveBg: $shade100 !default;
+$menuitemSubmenuIconFontSize: 0.875rem !default;
+$submenuHeaderMargin: 0 !default;
+$submenuHeaderPadding: 0.571rem 0.429rem !default;
+$submenuHeaderBg: transparent !default;
+$submenuHeaderTextColor: $shade500 !default;
+$submenuHeaderBorderRadius: $borderRadius !default;
+$submenuHeaderFontWeight: 500 !default;
+$submenuHeaderFontSize: 0.857rem !default;
+$overlayMenuBg: white !default;
+$overlayMenuBorder: 1px solid transparent !default;
+$overlayMenuShadow: 0px 9px 30px rgba(68, 72, 109, 0.06) !default;
+$verticalMenuPadding: 0.429rem !default;
+$verticalMenuitemMargin: 0 !default;
+$menuSeparatorMargin: 0.25rem 0 !default;
+
+$panelmenuHeaderTextColor: $shade500;
+
+$breadcrumbPadding: 0.857rem !default;
+$breadcrumbBg: $menuBg !default;
+$breadcrumbBorder: $menuBorder !default;
+$breadcrumbItemTextColor: $menuitemTextColor !default;
+$breadcrumbItemIconColor: $menuitemIconColor !default;
+$breadcrumbLastItemTextColor: $menuitemTextColor !default;
+$breadcrumbLastItemIconColor: $menuitemIconColor !default;
+$breadcrumbSeparatorColor: $menuitemTextColor !default;
+
+$horizontalMenuPadding: 0.857rem !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.429rem !default;
+$badgeHeight: 1.429rem !default;
+$badgeFontWeight: 500 !default;
+$badgeFontSize: 1rem !default;
+
+$tagPadding: 0 0.429rem !default;
+
+//carousel
+$carouselIndicatorsPadding: 1rem !default;
+$carouselIndicatorBg: $shade200 !default;
+$carouselIndicatorHoverBg: rgba(68, 72, 109, 0.15) !default;
+$carouselIndicatorBorderRadius: 3px !default;
+$carouselIndicatorWidth: 1.429rem !default;
+$carouselIndicatorHeight: 0.572rem !default;
+$carouselIndicatorActiveBg: $shade600 !default;
+$carouselIndicatorActiveTextColor: $shade700 !default;
+
+//galleria
+$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
+$galleriaCloseIconMargin: 0.5rem !default;
+$galleriaCloseIconFontSize: 2rem !default;
+$galleriaCloseIconBg: transparent !default;
+$galleriaCloseIconColor: $shade700 !default;
+$galleriaCloseIconHoverBg: rgba(68, 72, 109, 0.15) !default;
+$galleriaCloseIconHoverColor: $shade700 !default;
+$galleriaCloseIconWidth: 4rem !default;
+$galleriaCloseIconHeight: 4rem !default;
+$galleriaCloseIconBorderRadius: 50% !default;
+
+$galleriaItemNavigatorBg: transparent !default;
+$galleriaItemNavigatorColor: $shade700 !default;
+$galleriaItemNavigatorMargin: 0 0.5rem !default;
+$galleriaItemNavigatorFontSize: 2rem !default;
+$galleriaItemNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
+$galleriaItemNavigatorHoverColor: $shade700 !default;
+$galleriaItemNavigatorWidth: 4rem !default;
+$galleriaItemNavigatorHeight: 4rem !default;
+$galleriaItemNavigatorBorderRadius: $borderRadius !default;
+
+$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
+$galleriaCaptionTextColor: $shade000 !default;
+$galleriaCaptionPadding: 1rem !default;
+
+$galleriaIndicatorsPadding: 1rem !default;
+$galleriaIndicatorBg: $shade200 !default;
+$galleriaIndicatorHoverBg: rgba(68, 72, 109, 0.15) !default;
+$galleriaIndicatorBorderRadius: 3px !default;
+$galleriaIndicatorWidth: 1.429rem !default;
+$galleriaIndicatorHeight: 0.286rem !default;
+$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
+$galleriaIndicatorBgOnItem: $shade600 !default;
+$galleriaIndicatorHoverBgOnItem: $shade700 !default;
+$galleriaIndicatorActiveBg: $shade500 !default;
+$galleriaIndicatorActiveTextColor: $shade600 !default;
+
+$galleriaThumbnailContainerBg: $solidSurfaceColor !default;
+$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
+$galleriaThumbnailNavigatorBg: transparent !default;
+$galleriaThumbnailNavigatorColor: $shade700 !default;
+$galleriaThumbnailNavigatorHoverBg: rgba(68, 72, 109, 0.15) !default;
+$galleriaThumbnailNavigatorHoverColor: $shade700 !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: $shade300 !default;
+
+//avatar
+$avatarBg: $shade300 !default;
+$avatarTextColor: $textColor !default;
+
+//chip
+$chipBg: $shade300 !default;
+$chipTextColor: $textColor !default;
+$chipBorderRadius: 16px !default;
+
+//scrollTop
+$scrollTopBg: rgba(0, 0, 0, 0.7) !default;
+$scrollTopHoverBg: rgba(0, 0, 0, 0.8) !default;
+$scrollTopWidth: 3rem !default;
+$scrollTopHeight: 3rem !default;
+$scrollTopBorderRadius: 50% !default;
+$scrollTopFontSize: 1.5rem !default;
+$scrollTopTextColor: $shade000 !default;
+
+//skeleton
+$skeletonBg: $shade100 !default;
+$skeletonAnimationBg: rgba(255, 255, 255, 0.4) !default;
+
+//splitter
+$splitterGutterBg: $shade300 !default;
+$splitterGutterHandleBg: $shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade600 !default;
+$speedDialActionHoverBg: $shade700 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: 0.5rem !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255, 255, 255, 0.1) !default;
+$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
+$dockPadding: 0.5rem 0.5rem !default;
+$dockBorderRadius: 0.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 {
+    --surface-a: #{$shade000};
+    --surface-b: #{$shade100};
+    --surface-c: #{$shade200};
+    --surface-d: #{$shade300};
+    --surface-e: #{$shade000};
+    --surface-f: #{$shade000};
+    --text-color: #{$shade700};
+    --text-color-secondary: #{$shade600};
+    --primary-color: #{$primaryColor};
+    --primary-color-text: #{$primaryTextColor};
+    --font-family: #{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #e1e2e8;
+    --surface-100: #cbccd6;
+    --surface-200: #b4b6c5;
+    --surface-300: #9ea0b3;
+    --surface-400: #878aa2;
+    --surface-500: #717490;
+    --surface-600: #5a5e7f;
+    --surface-700: #44486d;
+    --surface-800: #3c3f60;
+    --surface-900: #343753;
+    --gray-50: #e1e2e8;
+    --gray-100: #cbccd6;
+    --gray-200: #b4b6c5;
+    --gray-300: #9ea0b3;
+    --gray-400: #878aa2;
+    --gray-500: #717490;
+    --gray-600: #5a5e7f;
+    --gray-700: #44486d;
+    --gray-800: #3c3f60;
+    --gray-900: #343753;
+    --content-padding: #{$panelContentPadding};
+    --inline-spacing: #{$inlineSpacing};
+    --border-radius: #{$borderRadius};
+    --surface-ground: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%);
+    --surface-section: #ffffff;
+    --surface-card: rgba(255, 255, 255, 0.9);
+    --surface-overlay: #ececf9;
+    --surface-border: rgba(68, 72, 109, 0.2);
+    --surface-hover: rgba(68, 72, 109, 0.07);
+    --maskbg: #{$maskBg};
+    --focus-ring: #{$focusShadow};
+}