azion-theme 1.5.0 → 1.5.2

package/src/azion/variables/_button.scss

@@ -16,7 +16,7 @@ $buttonBg: #f3652b;
 
 /// Text color of a button
 /// @group button
-$buttonTextColor: $primaryTextColor;
+$buttonTextColor: var(--primary-text-color);
 
 /// Border of a button
 /// @group button
@@ -28,7 +28,7 @@ $buttonHoverBg: #f5793f;
 
 /// Text color of a button in hover state
 /// @group button
-$buttonTextHoverColor: $primaryTextColor;
+$buttonTextHoverColor: var(--primary-text-color);
 
 /// Border color of a button in hover state
 /// @group button
@@ -40,7 +40,7 @@ $buttonActiveBg: #eb6f3f;
 
 /// Color of a button in pressed state
 /// @group button
-$buttonTextActiveColor: $primaryTextColor;
+$buttonTextActiveColor: var(--primary-text-color);
 
 /// Border color of a button in pressed state
 /// @group button
@@ -95,7 +95,7 @@ $secondaryButtonBorder: 1px solid var(--secondary-button-bg);
 
 /// Background of a secondary button in hover state
 /// @group button
-$secondaryButtonHoverBg: var(--secondary-button-text-hover-bg);
+$secondaryButtonHoverBg: var(--secondary-button-hover-bg);
 
 /// Text color of a secondary button in hover state
 /// @group button
@@ -371,35 +371,35 @@ $toggleButtonIconHoverColor: $textSecondaryColor;
 
 /// Background of a toggle button in selected state
 /// @group button
-$toggleButtonActiveBg: $primaryColor;
+$toggleButtonActiveBg: var(--primary-color);
 
 /// Border color of a toggle button in selected state
 /// @group button
-$toggleButtonActiveBorderColor: $primaryColor;
+$toggleButtonActiveBorderColor: var(--primary-color);
 
 /// Text color of a toggle button in selected state
 /// @group button
-$toggleButtonTextActiveColor: $primaryTextColor;
+$toggleButtonTextActiveColor: var(--primary-text-color);
 
 /// Icon color of a toggle button in selected state
 /// @group button
-$toggleButtonIconActiveColor: $primaryTextColor;
+$toggleButtonIconActiveColor: var(--primary-text-color);
 
 /// Hover background of a toggle button in selected state
 /// @group button
-$toggleButtonActiveHoverBg: $primaryDarkColor;
+$toggleButtonActiveHoverBg: var(--primary-dark-color);
 
 /// Hover border color of a toggle button in selected state
 /// @group button
-$toggleButtonActiveHoverBorderColor: $primaryDarkColor;
+$toggleButtonActiveHoverBorderColor: var(--primary-dark-color);
 
 /// Hover text color of a toggle button in selected state
 /// @group button
-$toggleButtonTextActiveHoverColor: $primaryTextColor;
+$toggleButtonTextActiveHoverColor: var(--primary-text-color);
 
 /// Hover icon of a toggle button in selected state
 /// @group button
-$toggleButtonIconActiveHoverColor: $primaryTextColor;
+$toggleButtonIconActiveHoverColor: var(--primary-text-color);
 
 /// Width of the speed dial button
 /// @group button

package/src/azion/variables/_data.scss

@@ -132,7 +132,7 @@ $tableHeaderCellHighlightBg: var(--table-header-cell-highlight-bg);
 
 /// Text color of a table header cell in sorted state
 /// @group data
-$tableHeaderCellHighlightTextColor: $primaryColor;
+$tableHeaderCellHighlightTextColor: var(--primary-color);
 
 /// Hover background of a table header cell in sorted state
 /// @group data
@@ -140,7 +140,7 @@ $tableHeaderCellHighlightHoverBg: var(--table-cell-highlight-hover-bg);
 
 /// Hover text color of a table header cell in sorted state
 /// @group data
-$tableHeaderCellHighlightTextHoverColor: $primaryColor;
+$tableHeaderCellHighlightTextHoverColor: var(--primary-color);
 
 /// Size of a multiple column sorting order indicator
 /// @group data
@@ -207,7 +207,7 @@ $tableFooterCellBorderWidth: 0 0 1px 0;
 
 /// Backgground of a table column resize indicator bar
 /// @group data
-$tableResizerHelperBg: $primaryColor;
+$tableResizerHelperBg: var(--primary-color);
 
 /// Border of a table footer
 /// @group data
@@ -271,19 +271,19 @@ $dataViewListItemBorderWidth: 0 0 1px 0;
 
 /// Background of a full calendar event
 /// @group data
-$fullCalendarEventBg: $primaryDarkColor;
+$fullCalendarEventBg: var(--primary-dark-color);
 
 /// Border color of a full calendar event
 /// @group data
-$fullCalendarEventBorderColor: $primaryDarkColor;
+$fullCalendarEventBorderColor: var(--primary-dark-color);
 
 /// Border of a full calendar event
 /// @group data
-$fullCalendarEventBorder: 1px solid $primaryDarkColor;
+$fullCalendarEventBorder: 1px solid var(--primary-dark-color);
 
 /// Text color of a full calendar event
 /// @group data
-$fullCalendarEventTextColor: $primaryTextColor;
+$fullCalendarEventTextColor: var(--primary-text-color);
 
 /// Padding of a tree
 /// @group data

package/src/azion/variables/_form.scss

@@ -92,7 +92,7 @@ $inputListItemTextColor: $textColor;
 
 /// Hover state background for an individual itrem of an input list
 /// @group form
-$inputListItemHoverBg: rgba($primaryColor, 0.06);
+$inputListItemHoverBg: var(--dropdown-hover-bg);
 
 /// Hover state text color for an individual itrem of an input list
 /// @group form
@@ -100,7 +100,7 @@ $inputListItemTextHoverColor: $textColor;
 
 /// Focus state background for an individual itrem of an input list
 /// @group form
-$inputListItemFocusBg: rgba($primaryColor, 0.06);
+$inputListItemFocusBg: var(--highlight-focus-bg);
 
 /// Focus state text color for an individual itrem of an input list
 /// @group form
@@ -176,27 +176,27 @@ $checkboxIconFontSize: 14px;
 
 /// Border color of a selected checkbox
 /// @group form
-$checkboxActiveBorderColor: $primaryColor;
+$checkboxActiveBorderColor: var(--primary-color);
 
 /// Background of a selected checkbox
 /// @group form
-$checkboxActiveBg: $primaryColor;
+$checkboxActiveBg: var(--primary-color);
 
 /// Icon color of a selected checkbox
 /// @group form
-$checkboxIconActiveColor: $primaryTextColor;
+$checkboxIconActiveColor: var(--primary-text-color);
 
 /// Background of a selected checkbox in hover state
 /// @group form
-$checkboxActiveHoverBg: $primaryDarkerColor;
+$checkboxActiveHoverBg: var(--primary-darker-color);
 
 /// Icon color of a selected checkbox in hover state
 /// @group form
-$checkboxIconActiveHoverColor: $primaryTextColor;
+$checkboxIconActiveHoverColor: var(--primary-text-color);
 
 /// Border color of a selected checkbox in hover state
 /// @group form
-$checkboxActiveHoverBorderColor: $primaryDarkerColor;
+$checkboxActiveHoverBorderColor: var(--primary-darker-color);
 
 /// Width of a radiobutton
 /// @group form
@@ -224,19 +224,19 @@ $radiobuttonActiveBg: #f3652b;
 
 /// Icon color of a selected radiobutton
 /// @group form
-$radiobuttonIconActiveColor: $primaryTextColor;
+$radiobuttonIconActiveColor: var(--primary-text-color);
 
 /// Background of a selected radiobutton in hover state
 /// @group form
-$radiobuttonActiveHoverBg: $primaryDarkerColor;
+$radiobuttonActiveHoverBg: var(--primary-darker-color);
 
 /// Icon color of a selected radiobutton in hover state
 /// @group form
-$radiobuttonIconActiveHoverColor: $primaryTextColor;
+$radiobuttonIconActiveHoverColor: var(--primary-text-color);
 
 /// Border color of a selected radiobutton in hover state
 /// @group form
-$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;
+$radiobuttonActiveHoverBorderColor: var(--primary-darker-color);
 
 /// Width of a color picker preview element
 /// @group form
@@ -276,11 +276,11 @@ $ratingStarIconOffColor: $textColor;
 
 /// Icon color for the star icon of a rating in selected state
 /// @group form
-$ratingStarIconOnColor: $primaryColor;
+$ratingStarIconOnColor: var(--primary-color);
 
 /// Icon color for the star icon of a rating in hover state
 /// @group form
-$ratingStarIconHoverColor: $primaryColor;
+$ratingStarIconHoverColor: var(--primary-color);
 
 /// Background of a slider
 /// @group form
@@ -312,7 +312,7 @@ $sliderHandleBg: #ffffff;
 
 /// Border of a slider handle
 /// @group form
-$sliderHandleBorder: 2px solid $primaryColor;
+$sliderHandleBorder: 2px solid var(--primary-color);
 
 /// Border radius of a slider handle
 /// @group form
@@ -320,15 +320,15 @@ $sliderHandleBorderRadius: 50%;
 
 /// Border of a slider handle in hover state
 /// @group form
-$sliderHandleHoverBorderColor: $primaryColor;
+$sliderHandleHoverBorderColor: var(--primary-color);
 
 /// Background of a slider handle in hover state
 /// @group form
-$sliderHandleHoverBg: $primaryColor;
+$sliderHandleHoverBg: var(--primary-color);
 
 /// Background color of a range slider
 /// @group form
-$sliderRangeBg: $primaryColor;
+$sliderRangeBg: var(--primary-color);
 
 /// Margin of a calendar table
 /// @group form
@@ -388,7 +388,7 @@ $calendarHeaderCellPadding: 0.5rem;
 
 /// Text color of current month and year text in hover state
 /// @group form
-$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+$calendarMonthYearHeaderHoverTextColor: var(--primary-color) !default;
 
 /// Padding of a calendar date cell
 /// @group form
@@ -412,7 +412,7 @@ $calendarCellDateBorder: 1px solid transparent;
 
 /// Background of a calendar date cell in hover state
 /// @group form
-$calendarCellDateHoverBg: rgba($primaryColor, 0.06);
+$calendarCellDateHoverBg: var(--surface-hover);
 
 /// Background of a calendar date cell indicating today
 /// @group form
@@ -492,11 +492,11 @@ $inputSwitchSliderOffHoverBg: var(--input-switch-slider-off-hover-bg);
 
 /// Background color of an inputswitch slider when selected
 /// @group form
-$inputSwitchSliderOnBg: $primaryColor;
+$inputSwitchSliderOnBg: var(--primary-color);
 
 /// Hover background color of an inputswitch slider when selected
 /// @group form
-$inputSwitchSliderOnHoverBg: $primaryDarkColor;
+$inputSwitchSliderOnHoverBg: var(--primary-dark-color);
 
 /// Background color of an inputswitch handle when selected
 /// @group form
@@ -511,7 +511,7 @@ $fileUploadProgressBarHeight: 0.25rem;
 $fileUploadContentPadding: 2rem 1rem;
 
 /// Border of the fileupload content section
-$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
+$fileUploadContentHoverBorder: 1px dashed var(--primary-color) !default;
 
 /// Border of the fileupload content item section
 /// @group form
@@ -543,7 +543,7 @@ $editorToolbarIconHoverColor: #495057;
 
 /// Icon color of an editor toolbar in active state
 /// @group form
-$editorIconActiveColor: $primaryColor;
+$editorIconActiveColor: var(--primary-color);
 
 /// Border of an editor content
 /// @group form

package/src/azion/variables/_general.scss

@@ -20,7 +20,7 @@ $textSecondaryColor: var(--text-color-secondary);
 
 /// Background of a highlighted item
 /// @group general
-$highlightBg: $highlightBg;
+$highlightBg: var(--highlight-bg);
 
 /// Text color of a highlighted item
 /// @group general

package/src/azion/variables/_menu.scss

@@ -76,7 +76,7 @@ $menuitemIconHoverColor: $textColor;
 
 /// Background of a menuitem in hover state
 /// @group menu
-$menuitemHoverBg: rgba($primaryColor, 0.06);
+$menuitemHoverBg: var(--surface-hover);
 
 /// Text color of a menuitem in focus state
 /// @group menu
@@ -88,7 +88,7 @@ $menuitemIconFocusColor: $textColor;
 
 /// Background of a menuitem in focus state
 /// @group menu
-$menuitemFocusBg: rgba($primaryColor, 0.06);
+$menuitemFocusBg: var(--surface-hover);
 
 /// Text color of a menuitem in active state
 /// @group menu
@@ -100,11 +100,11 @@ $menuitemIconActiveColor: $textSecondaryColor;
 
 /// Background of a menuitem in active state
 /// @group menu
-$menuitemActiveBg: rgba($primaryColor, 0.08);
+$menuitemActiveBg: var(--surface-hover);
 
 /// Background of a menuitem in active and focus states
 /// @group menu
-$menuitemActiveFocusBg: rgba($primaryColor, 0.06);
+$menuitemActiveFocusBg: var(--surface-hover);
 
 /// Font size of an icon indicating the item has a submenu
 /// @group menu

package/src/azion/variables/_misc.scss

@@ -56,7 +56,7 @@ $progressBarValueBg: var(--progress-bar-value-bg);
 
 /// Text color of a progress bar value
 /// @group misc
-$progressBarValueTextColor: $primaryTextColor;
+$progressBarValueTextColor: var(--primary-text-color);
 
 /// Stroke color of a progress spinner
 /// @group misc

package/src/azion/variables/_overlay.scss

@@ -4,7 +4,7 @@ $overlayContentBorder: 0 none;
 
 /// Background of an overlay container element such as dialog or overlaypanel
 /// @group overlay
-$overlayContentBg: $overlayContentBg;
+$overlayContentBg: var(--overlay-content-bg);
 
 /// Box shadow of an overlay container element such as dialog or overlaypanel
 /// @group overlay

package/src/azion/variables/_panel.scss

@@ -216,15 +216,15 @@ $tabviewHeaderTextHoverColor: $textColor;
 
 /// Background of a tabview header in selected state
 /// @group panel
-$tabviewHeaderActiveBg: $primaryColor;
+$tabviewHeaderActiveBg: var(--tabview-header-active-bg);
 
 /// Border of a tabview header in selected state
 /// @group panel
-$tabviewHeaderActiveBorderColor: $primaryColor;
+$tabviewHeaderActiveBorderColor: var(--primary-color);
 
 /// Text color of a tabview header in selected state
 /// @group panel
-$tabviewHeaderTextActiveColor: $primaryTextColor;
+$tabviewHeaderTextActiveColor: var(--primary-text-color);
 
 /// Border for content section of a tabview tab
 /// @group panel