@aziontech/theme 0.1.0

package/src/azion/variables/_misc.scss

@@ -0,0 +1,143 @@
+/// Padding of an inplace element
+/// @group misc
+$inplacePadding: $inputPadding;
+
+/// Background of an inplace element in hover state
+/// @group misc
+$inplaceHoverBg: #e9ecef;
+
+/// Text color of an inplace element in hover state
+/// @group misc
+$inplaceTextHoverColor: $textColor;
+
+/// Background of a badge
+/// @group misc
+$badgeBg: var(--surface-section);
+
+/// Text color of a badge
+/// @group misc
+$badgeTextColor: $textColor;
+
+/// Minimum width of a badge
+/// @group misc
+$badgeMinWidth: 1.5rem;
+
+/// Height of a badge
+/// @group misc
+$badgeHeight: 1.25rem;
+
+/// Font weight of a badge
+/// @group misc
+$badgeFontWeight: 500;
+
+/// Font size of a badge
+/// @group misc
+$badgeFontSize: 0.75rem;
+
+/// Padding of a badge
+/// @group misc
+$tagPadding: 0.25rem 0.4rem;
+
+/// Height of a progress bar
+/// @group misc
+$progressBarHeight: 1.5rem;
+
+/// Border of a progress bar
+/// @group misc
+$progressBarBorder: 0 none;
+
+/// Background of a progress bar
+/// @group misc
+$progressBarBg: var(--surface-600);
+
+/// Background of a progress bar value
+/// @group misc
+$progressBarValueBg: var(--progress-bar-value-bg);
+
+/// Text color of a progress bar value
+/// @group misc
+$progressBarValueTextColor: var(--primary-text-color);
+
+/// Stroke color of a progress spinner
+/// @group misc
+$progressSpinnerStrokeColor: var(--progress-spinner-stroke-color);
+
+/// First spinner color of a progress spinner
+/// @group misc
+$progressSpinnerColorOne: $errorMessageTextColor !default;
+
+/// Second spinner color of a progress spinner
+/// @group misc
+$progressSpinnerColorTwo: $infoMessageTextColor !default;
+
+/// Third spinner color of a progress spinner
+/// @group misc
+$progressSpinnerColorThree: $successMessageTextColor !default;
+
+/// Fourth spinner color of a progress spinner
+/// @group misc
+$progressSpinnerColorFour: $warningMessageTextColor !default;
+
+/// Background of an avatar
+/// @group misc
+$avatarBg: var(--avatar-bg);
+
+/// Text color of an avatar
+/// @group misc
+$avatarTextColor: $textColor;
+
+/// Background of a chip
+/// @group misc
+$chipBg: var(--chip-bg);
+
+/// Text color of a chip
+/// @group misc
+$chipTextColor: $textColor;
+
+/// Border radius of a chip
+/// @group misc
+$chipBorderRadius: $borderRadius;
+
+/// Background of a chip in focus state
+/// @group misc
+$chipFocusBg: var(--chip-focus-bg);
+
+/// Color of a chip in focus state
+/// @group misc
+$chipFocusTextColor: $textColor !default;
+
+/// Background of a scrollTop
+/// @group misc
+$scrollTopBg: rgba(0, 0, 0, 0.7);
+
+/// Background of a scrollTop in hover state
+/// @group misc
+$scrollTopHoverBg: rgba(0, 0, 0, 0.8);
+
+/// Width of a scrollTop
+/// @group misc
+$scrollTopWidth: 3rem;
+
+/// Height of a scrollTop
+/// @group misc
+$scrollTopHeight: 3rem;
+
+/// Border radius of a scrollTop
+/// @group misc
+$scrollTopBorderRadius: 50%;
+
+/// Font size of a scrollTop
+/// @group misc
+$scrollTopFontSize: 1.5rem;
+
+/// Text color of a scrollTop
+/// @group misc
+$scrollTopTextColor: #f8f9fa;
+
+/// Background of a skeleton
+/// @group misc
+$skeletonBg: var(--skeleton-bg);
+
+/// Background of a skeleton animation
+/// @group misc
+$skeletonAnimationBg: var(--skeleton-animation-bg);

package/src/azion/variables/_overlay.scss

@@ -0,0 +1,67 @@
+/// Border of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContentBorder: 0 none;
+
+/// Background of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContentBg: var(--overlay-content-bg);
+
+/// Box shadow of an overlay container element such as dialog or overlaypanel
+/// @group overlay
+$overlayContainerShadow: var(--overlay-container-shadow);
+
+/// Background of a dialog header
+/// @group overlay
+$dialogHeaderBg: var(--dialog-header-bg);
+
+/// Border of a dialog header
+/// @group overlay
+$dialogHeaderBorder: 1px solid var(--surface-border);
+
+/// Text color of a dialog header
+/// @group overlay
+$dialogHeaderTextColor: $panelHeaderTextColor;
+
+/// Font weight of a dialog header
+/// @group overlay
+$dialogHeaderFontWeight: 500;
+
+/// Font size of a dialog header
+/// @group overlay
+$dialogHeaderFontSize: 1.125rem;
+
+/// Padding of a dialog header
+/// @group overlay
+$dialogHeaderPadding: 0 2rem;
+
+/// Padding of a dialog content
+/// @group overlay
+$dialogContentPadding: 1.25rem 2rem;
+
+/// Border of a dialog footer
+/// @group overlay
+$dialogFooterBorder: 1px solid var(--surface-border);
+
+/// Padding of a dialog footer
+/// @group overlay
+$dialogFooterPadding: 0 2rem;
+
+/// Padding of a confirmpopup content
+/// @group overlay
+$confirmPopupContentPadding: $panelContentPadding;
+
+/// Padding of a confirmpopup footer
+/// @group overlay
+$confirmPopupFooterPadding: 0 1rem 1rem 1rem;
+
+/// Background of a tooltip
+/// @group overlay
+$tooltipBg: $textColor;
+
+/// Text color of a tooltip
+/// @group overlay
+$tooltipTextColor: var(--tooltip-text-color);
+
+/// Padding of a tooltip
+/// @group overlay
+$tooltipPadding: $inputPadding;

package/src/azion/variables/_panel.scss

@@ -0,0 +1,327 @@
+/// Border color of a panel header
+/// @group panel
+$panelHeaderBorderColor: var(--surface-border);
+
+/// Border of a panel header
+/// @group panel
+$panelHeaderBorder: 1px solid var(--surface-border);
+
+/// Background of a panel header
+/// @group panel
+$panelHeaderBg: var(--surface-section);
+
+/// Text color of a panel header
+/// @group panel
+$panelHeaderTextColor: $textColor;
+
+/// Font weight of a panel header
+/// @group panel
+$panelHeaderFontWeight: 500;
+
+/// Padding of a panel header
+/// @group panel
+$panelHeaderPadding: 1rem;
+
+/// Font weight of a toggleable panel header
+/// @group panel
+$panelToggleableHeaderPadding: 0.5rem 1rem;
+
+/// Background of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderHoverBg: var(--surface-hover);
+
+/// Border color of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderHoverBorderColor: var(--surface-border);
+
+/// Text color of a panel header in hover state e.g. toggleable state
+/// @group panel
+$panelHeaderTextHoverColor: $textColor;
+
+/// Border color for the content section of a panel
+/// @group panel
+$panelContentBorderColor: var(--surface-border);
+
+/// Border for the content section of a panel
+/// @group panel
+$panelContentBorder: 1px solid var(--surface-border);
+
+/// Background for the content section of a panel
+/// @group panel
+$panelContentBg: var(--panel-content-bg);
+
+/// Background for the striped row.
+/// @group panel
+$panelContentEvenRowBg: #e9ecef;
+
+/// Text color for the content section of a panel
+/// @group panel
+$panelContentTextColor: $textColor;
+
+/// Padding for the content section of a panel
+/// @group panel
+$panelContentPadding: 1.25rem;
+
+/// Border for the footer section of a panel
+/// @group panel
+$panelFooterBorder: 1px solid var(--surface-border);
+
+/// Background for the footer section of a panel
+/// @group panel
+$panelFooterBg: var(--surface-section);
+
+/// Text color for the footer section of a panel
+/// @group panel
+$panelFooterTextColor: $textColor;
+
+/// Padding for the footer section of a panel
+/// @group panel
+$panelFooterPadding: 0.5rem 1rem;
+
+/// Spacing between to accordion panels
+/// @group panel
+$accordionSpacing: 0.5rem;
+
+/// Border of an accordion panel header
+/// @group panel
+$accordionHeaderBorder: $panelHeaderBorder;
+
+/// Background of an accordion panel header
+/// @group panel
+$accordionHeaderBg: $panelHeaderBg;
+
+/// Text color of an accordion panel header
+/// @group panel
+$accordionHeaderTextColor: $panelHeaderTextColor;
+
+/// Font weight of an accordion panel header
+/// @group panel
+$accordionHeaderFontWeight: $panelHeaderFontWeight;
+
+/// Padding of an accordion panel header
+/// @group panel
+$accordionHeaderPadding: $panelHeaderPadding;
+
+/// Background of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderHoverBg: var(--surface-hover);
+
+/// Border of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderHoverBorderColor: var(--surface-border);
+
+/// Text color of an accordion panel header in hover state
+/// @group panel
+$accordionHeaderTextHoverColor: $textColor;
+
+/// Background of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveBg: $panelHeaderBg;
+
+/// Border of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveBorderColor: var(--surface-border);
+
+/// Text color of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderTextActiveColor: $textColor;
+
+/// Hover background of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveHoverBg: var(--surface-hover);
+
+/// Hover border of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderActiveHoverBorderColor: var(--surface-border);
+
+/// Text color of an accordion panel header in expanded state
+/// @group panel
+$accordionHeaderTextActiveHoverColor: $textColor;
+
+/// Border for a content section of an accordion panel
+/// @group panel
+$accordionContentBorder: $panelContentBorder;
+
+/// Background for a content section of an accordion panel
+/// @group panel
+$accordionContentBg: $panelContentBg;
+
+/// Text color for a content section of an accordion panel
+/// @group panel
+$accordionContentTextColor: $panelContentTextColor;
+
+/// Padding for a content section of an accordion panel
+/// @group panel
+$accordionContentPadding: $panelContentPadding;
+
+/// Border for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBorder: none;
+
+/// Border width for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBorderWidth: none;
+
+/// Background for a parent element containing all the headers of a tabview
+/// @group panel
+$tabviewNavBg: none;
+
+/// Spacing between tabview headers
+/// @group panel
+$tabviewHeaderSpacing: 0;
+
+/// Border of a tabview header
+/// @group panel
+$tabviewHeaderBorder: none;
+
+/// Border width of a tabview header
+/// @group panel
+$tabviewHeaderBorderWidth: none;
+
+/// Border color of a tabview header
+/// @group panel
+$tabviewHeaderBorderColor: none;
+
+/// Background of a tabview header
+/// @group panel
+$tabviewHeaderBg: none;
+
+/// Text color of a tabview header
+/// @group panel
+$tabviewHeaderTextColor: $textSecondaryColor;
+
+/// Font weight of a tabview header
+/// @group panel
+$tabviewHeaderFontWeight: 600;
+
+/// Padding of a tabview header
+/// @group panel
+$tabviewHeaderPadding: 0.375px 0.75rem;
+
+/// Margin of a tabview header
+/// @group panel
+$tabviewHeaderMargin: 0;
+
+/// Background of a tabview header in hover state
+/// @group panel
+$tabviewHeaderHoverBg: var(--surface-hover);
+
+/// Border of a tabview header in hover state
+/// @group panel
+$tabviewHeaderHoverBorderColor: none;
+
+/// Text color of a tabview header in hover state
+/// @group panel
+$tabviewHeaderTextHoverColor: $textColor;
+
+/// Background of a tabview header in selected state
+/// @group panel
+$tabviewHeaderActiveBg: var(--tabview-header-active-bg);
+
+/// Border of a tabview header in selected state
+/// @group panel
+$tabviewHeaderActiveBorderColor: var(--primary-color);
+
+/// Text color of a tabview header in selected state
+/// @group panel
+$tabviewHeaderTextActiveColor: var(--primary-text-color);
+
+/// Border for content section of a tabview tab
+/// @group panel
+$tabviewContentBorder: 0 none;
+
+/// Background for content section of a tabview tab
+/// @group panel
+$tabviewContentBg: $panelContentBg;
+
+/// Text color for a content section of a tabview tab
+/// @group panel
+$tabviewContentTextColor: $panelContentTextColor;
+
+/// Padding for a content section of a tabview tab
+/// @group panel
+$tabviewContentPadding: $panelContentPadding;
+
+/// Background of a fieldset header in hover state
+/// @group panel
+$panelHeaderHoverBg: #e9ecef;
+
+/// Border of a fieldset header in hover state
+/// @group panel
+$panelHeaderHoverBorderColor: var(--panel-header-hover-border-color);
+
+/// Text color of a fieldset header in hover state
+/// @group panel
+$panelHeaderTextHoverColor: var(--panel-header-text-hover-color);
+
+/// Border for a track bar of a scroll panel
+/// @group panel
+$scrollPanelTrackBorder: 0 none;
+
+/// Background for a track bar of a scroll panel
+/// @group panel
+$scrollPanelTrackBg: #f8f9fa;
+
+/// Padding of a card body
+/// @group panel
+$cardBodyPadding: none;
+
+/// Font size of a card title
+/// @group panel
+$cardTitleFontSize: 1.5rem;
+
+/// Font weight of a card title
+/// @group panel
+$cardTitleFontWeight: 700;
+
+/// Font size of a card subtitle
+/// @group panel
+$cardSubTitleFontWeight: 700;
+
+/// Text color of a card subtitle
+/// @group panel
+$cardSubTitleColor: $textSecondaryColor;
+
+/// Padding of a card content
+/// @group panel
+$cardContentPadding: none;
+
+/// Padding of a card footer
+/// @group panel
+$cardFooterPadding: 0 0 0 0;
+
+/// Box shadow of a card
+/// @group panel
+$cardShadow: var(--card-shadow);
+
+/// Margin of divider in horizontal layout
+/// @group panel
+$dividerHorizontalMargin: 0;
+
+/// Padding of divider in horizontal layout
+/// @group panel
+$dividerHorizontalPadding: 0;
+
+/// Margin of divider in vertical layout
+/// @group panel
+$dividerVerticalMargin: 0;
+
+/// Padding of divider in vertical layout
+/// @group panel
+$dividerVerticalPadding: 0;
+
+/// Border width of the divider
+/// @group panel
+$dividerSize: 1px;
+
+/// Color of the divider border
+/// @group panel
+$dividerColor: var(--surface-border);
+
+/// Background of the splitter gutter
+/// @group panel
+$splitterGutterBg: #f8f9fa;
+
+/// Background of the splitter gutter handle
+/// @group panel
+$splitterGutterHandleBg: var(--splitter-gutter-handle-bg);