@aziontech/theme 0.1.0

package/src/azion/variables/_form.scss

@@ -0,0 +1,570 @@
+/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group form
+$inputPadding: 0.344rem 0.5rem;
+
+/// Background of an input field
+/// @group form
+$inputBg: var(--input-bg);
+
+/// Font size of an input field
+/// @group form
+$inputTextFontSize: 0.875rem;
+
+/// Text color of an input field
+/// @group form
+$inputTextColor: $textColor;
+
+/// Color of an icon inside an input field
+/// @group form
+$inputIconColor: $textColor;
+
+/// Border of an input field
+/// @group form
+$inputBorder: 1px solid var(--input-border);
+
+/// Border of an input field in hover state
+/// @group form
+$inputHoverBorderColor: #f3652b;
+
+/// Border of an input field in focus state
+/// @group form
+$inputFocusBorderColor: #f3652b;
+
+/// Color of an input field in invalid state
+/// @group form
+$inputErrorBorderColor: $errorColor;
+
+/// Text color of a placeholder
+/// @group form
+$inputPlaceholderTextColor: var(--input-placeholder-text-color);
+
+/// Background of a filled input
+/// @group form
+$inputFilledBg: var(--input-filled-bg);
+
+/// Background of a filled input in hover state
+/// @group form
+$inputFilledHoverBg: var(--input-filled-hover-bg);
+
+/// Background of a filled input in focus state
+/// @group form
+$inputFilledFocusBg: var(--input-filled-focus-bg);
+
+/// Backgroud color of an input group addon
+/// @group form
+$inputGroupBg: var(--input-group-bg);
+
+/// Text color of an input group addon
+/// @group form
+$inputGroupTextColor: $textSecondaryColor;
+
+/// Minimum width of an input group addon
+/// @group form
+$inputGroupAddOnMinWidth: 2.357rem;
+
+/// Background of an input list such as dropdown, listbox, multiselect
+/// @group form
+$inputListBg: var(--input-list-bg);
+
+/// Text color of an input list
+/// @group form
+$inputListTextColor: $textColor;
+
+/// Border of an input list
+/// @group form
+$inputListBorder: $inputBorder;
+
+/// Padding of an input list
+/// @group form
+$inputListPadding: 0.5rem;
+
+/// Padding for an individual itrem of an input list
+/// @group form
+$inputListItemPadding: 0.75rem 0.5rem;
+
+/// Background for an individual itrem of an input list
+/// @group form
+$inputListItemBg: transparent;
+
+/// Text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextColor: $textColor;
+
+/// Hover state background for an individual itrem of an input list
+/// @group form
+$inputListItemHoverBg: var(--dropdown-hover-bg);
+
+/// Hover state text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextHoverColor: $textColor;
+
+/// Focus state background for an individual itrem of an input list
+/// @group form
+$inputListItemFocusBg: var(--highlight-focus-bg);
+
+/// Focus state text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextFocusColor: $textColor;
+
+/// Border for an individual itrem of an input list
+/// @group form
+$inputListItemBorder: 0 none;
+
+/// Border radius for an individual itrem of an input list
+/// @group form
+$inputListItemBorderRadius: $borderRadius;
+
+/// Margin for an individual itrem of an input list
+/// @group form
+$inputListItemMargin: 0;
+
+/// Box shadow for an individual itrem of an input list in focused state
+/// @group form
+$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;
+
+/// Padding for a header of an input list
+/// @group form
+$inputListHeaderPadding: 0.5rem 1rem;
+
+/// Margin for a header of an input list
+/// @group form
+$inputListHeaderMargin: 0;
+
+/// Background for a header of an input list
+/// @group form
+$inputListHeaderBg: var(--input-list-header-bg);
+
+/// Text color for a header of an input list
+/// @group form
+$inputListHeaderTextColor: $textColor;
+
+/// Border for a header of an input list
+/// @group form
+$inputListHeaderBorder: 0 none;
+
+/// Background for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayBg: $inputListBg;
+
+/// Background for an overlay header of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayHeaderBg: $inputListHeaderBg;
+
+/// Border for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayBorder: 0 none;
+
+/// Shadow for an overlay of an input such as autocomplete or dropdown
+/// @group form
+$inputOverlayShadow: var(--input-overlay-shadow);
+
+/// Width of a checkbox
+/// @group form
+$checkboxWidth: 20px;
+
+/// Height of a checkbox
+/// @group form
+$checkboxHeight: 20px;
+
+/// Border of a checkbox
+/// @group form
+$checkboxBorder: 2px solid var(--checkbox-border);
+
+/// Size of a checkbox icon
+/// @group form
+$checkboxIconFontSize: 14px;
+
+/// Border color of a selected checkbox
+/// @group form
+$checkboxActiveBorderColor: var(--primary-color);
+
+/// Background of a selected checkbox
+/// @group form
+$checkboxActiveBg: var(--primary-color);
+
+/// Icon color of a selected checkbox
+/// @group form
+$checkboxIconActiveColor: var(--primary-text-color);
+
+/// Background of a selected checkbox in hover state
+/// @group form
+$checkboxActiveHoverBg: var(--primary-darker-color);
+
+/// Icon color of a selected checkbox in hover state
+/// @group form
+$checkboxIconActiveHoverColor: var(--primary-text-color);
+
+/// Border color of a selected checkbox in hover state
+/// @group form
+$checkboxActiveHoverBorderColor: var(--primary-darker-color);
+
+/// Width of a radiobutton
+/// @group form
+$radiobuttonWidth: 20px;
+
+/// Height of a radiobutton
+/// @group form
+$radiobuttonHeight: 20px;
+
+/// Border of a radiobutton
+/// @group form
+$radiobuttonBorder: 2px solid var(--surface-border);
+
+/// Font size of a radiobutton icon
+/// @group form
+$radiobuttonIconSize: 10px;
+
+/// Border color of a selected radiobutton
+/// @group form
+$radiobuttonActiveBorderColor: #f3652b;
+
+/// Background of a selected radiobutton
+/// @group form
+$radiobuttonActiveBg: #f3652b;
+
+/// Icon color of a selected radiobutton
+/// @group form
+$radiobuttonIconActiveColor: var(--primary-text-color);
+
+/// Background of a selected radiobutton in hover state
+/// @group form
+$radiobuttonActiveHoverBg: var(--primary-darker-color);
+
+/// Icon color of a selected radiobutton in hover state
+/// @group form
+$radiobuttonIconActiveHoverColor: var(--primary-text-color);
+
+/// Border color of a selected radiobutton in hover state
+/// @group form
+$radiobuttonActiveHoverBorderColor: var(--primary-darker-color);
+
+/// Width of a color picker preview element
+/// @group form
+$colorPickerPreviewWidth: 2rem;
+
+/// Height of a color picker preview element
+/// @group form
+$colorPickerPreviewHeight: 2rem;
+
+/// Background of a color picker
+/// @group form
+$colorPickerBg: #323232;
+
+/// Border color of a color picker
+/// @group form
+$colorPickerBorder: 1px solid #191919;
+
+/// Handle color of a color picker
+/// @group form
+$colorPickerHandleColor: #ffffff;
+
+/// Font size of a rating icon
+/// @group form
+$ratingIconFontSize: 1.143rem;
+
+/// Icon color for the cancel icon of a rating
+/// @group form
+$ratingCancelIconColor: #e74c3c;
+
+/// Hover icon color for the cancel icon of a rating
+/// @group form
+$ratingCancelIconHoverColor: #c0392b;
+
+/// Icon color for the star icon of a rating in unselected state
+/// @group form
+$ratingStarIconOffColor: $textColor;
+
+/// Icon color for the star icon of a rating in selected state
+/// @group form
+$ratingStarIconOnColor: var(--primary-color);
+
+/// Icon color for the star icon of a rating in hover state
+/// @group form
+$ratingStarIconHoverColor: var(--primary-color);
+
+/// Background of a slider
+/// @group form
+$sliderBg: #dee2e6;
+
+/// Border of a slider
+/// @group form
+$sliderBorder: 0 none;
+
+/// Height of a horizontal slider
+/// @group form
+$sliderHorizontalHeight: 0.286rem;
+
+/// Width of a vertical slider
+/// @group form
+$sliderVerticalWidth: 0.286rem;
+
+/// Width of a slider handle
+/// @group form
+$sliderHandleWidth: 1.143rem;
+
+/// Height of a slider handle
+/// @group form
+$sliderHandleHeight: 1.143rem;
+
+/// Background of a slider handle
+/// @group form
+$sliderHandleBg: #ffffff;
+
+/// Border of a slider handle
+/// @group form
+$sliderHandleBorder: 2px solid var(--primary-color);
+
+/// Border radius of a slider handle
+/// @group form
+$sliderHandleBorderRadius: 50%;
+
+/// Border of a slider handle in hover state
+/// @group form
+$sliderHandleHoverBorderColor: var(--primary-color);
+
+/// Background of a slider handle in hover state
+/// @group form
+$sliderHandleHoverBg: var(--primary-color);
+
+/// Background color of a range slider
+/// @group form
+$sliderRangeBg: var(--primary-color);
+
+/// Margin of a calendar table
+/// @group form
+$calendarTableMargin: 0.5rem 0;
+
+/// Margin of a calendar
+/// @group form
+$calendarPadding: 0.5rem;
+
+/// Background of a calendar
+/// @group form
+$calendarBg: var(--calendar-bg);
+
+/// Background of an inlime calendar
+/// @group form
+$calendarInlineBg: $calendarBg;
+
+/// Text color of a calendar
+/// @group form
+$calendarTextColor: $textColor;
+
+/// Border of an inline calendar
+/// @group form
+$calendarBorder: $inputListBorder;
+
+/// Border of an overlay calendar
+/// @group form
+$calendarOverlayBorder: $inputOverlayBorder;
+
+/// Padding of a calendar header
+/// @group form
+$calendarHeaderPadding: 0.5rem;
+
+/// Background of a calendar header
+/// @group form
+$calendarHeaderBg: var(--calendar-bg);
+
+/// Background of an inline calendar header
+/// @group form
+$calendarInlineHeaderBg: $calendarBg;
+
+/// Border of a calendar header
+/// @group form
+$calendarHeaderBorder: 1px solid var(--surface-border);
+
+/// Text color of a calendar header
+/// @group form
+$calendarHeaderTextColor: $textColor;
+
+/// Font weight of a calendar header
+/// @group form
+$calendarHeaderFontWeight: 600;
+
+/// Padding of a calendar weekday cell
+/// @group form
+$calendarHeaderCellPadding: 0.5rem;
+
+/// Text color of current month and year text in hover state
+/// @group form
+$calendarMonthYearHeaderHoverTextColor: var(--primary-color) !default;
+
+/// Padding of a calendar date cell
+/// @group form
+$calendarCellDatePadding: 0.5rem;
+
+/// Width of a calendar date cell
+/// @group form
+$calendarCellDateWidth: 2.5rem;
+
+/// Height of a calendar date cell
+/// @group form
+$calendarCellDateHeight: 2.5rem;
+
+/// Border radius of a calendar date cell
+/// @group form
+$calendarCellDateBorderRadius: 50%;
+
+/// Border of a calendar date cell
+/// @group form
+$calendarCellDateBorder: 1px solid transparent;
+
+/// Background of a calendar date cell in hover state
+/// @group form
+$calendarCellDateHoverBg: var(--surface-hover);
+
+/// Background of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayBg: var(--calendar-cell-date-today-bg);
+
+/// Border color of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayBorderColor: transparent;
+
+/// Text color of a calendar date cell indicating today
+/// @group form
+$calendarCellDateTodayTextColor: var(--calendar-cell-date-today-text-color);
+
+/// Padding of the calendar button bar
+/// @group form
+$calendarButtonBarPadding: 1rem 0;
+
+/// Padding of a time picker container of a calendar
+/// @group form
+$calendarTimePickerPadding: 0.5rem;
+
+/// Padding of a time picker element of a calendar
+/// @group form
+$calendarTimePickerElementPadding: 0 0.429rem;
+
+/// Font size of a time picker element of a calendar
+/// @group form
+$calendarTimePickerTimeFontSize: 1.286rem;
+
+/// Breakpoint of calendar to apply styles for small screens like phones
+/// @group form
+$calendarBreakpoint: 769px;
+
+/// Padding of a calendar date cell on small screens like phones
+/// @group form
+$calendarCellDatePaddingSM: 0;
+
+/// Width of an inputswitch
+/// @group form
+$inputSwitchWidth: 2.25rem;
+
+/// Height of an inputswitch
+/// @group form
+$inputSwitchHeight: 1.25rem;
+
+/// Border radius of an inputswitch
+/// @group form
+$inputSwitchBorderRadius: 30px;
+
+/// Width of an inputswitch handle
+/// @group form
+$inputSwitchHandleWidth: 1rem;
+
+/// Height of an inputswitch handle
+/// @group form
+$inputSwitchHandleHeight: 1rem;
+
+/// Border radius of an inputswitch handle
+/// @group form
+$inputSwitchHandleBorderRadius: 50%;
+
+/// Padding of an inputswitch slider
+/// @group form
+$inputSwitchSliderPadding: 0.063rem;
+
+/// Background color of an inputswitch slider when unselected
+/// @group form
+$inputSwitchSliderOffBg: var(--input-switch-slider-off-bg);
+
+/// Background color of an inputswitch handle when unselected
+/// @group form
+$inputSwitchHandleOffBg: #ffffff;
+
+/// Hover background color of an inputswitch slider when unselected
+/// @group form
+$inputSwitchSliderOffHoverBg: var(--input-switch-slider-off-hover-bg);
+
+/// Background color of an inputswitch slider when selected
+/// @group form
+$inputSwitchSliderOnBg: var(--primary-color);
+
+/// Hover background color of an inputswitch slider when selected
+/// @group form
+$inputSwitchSliderOnHoverBg: var(--primary-dark-color);
+
+/// Background color of an inputswitch handle when selected
+/// @group form
+$inputSwitchHandleOnBg: var(--input-switch-handle-on-bg);
+
+/// Height for the progress bar of a fileupload
+/// @group form
+$fileUploadProgressBarHeight: 0.25rem;
+
+/// Padding of the fileupload content section
+/// @group form
+$fileUploadContentPadding: 2rem 1rem;
+
+/// Border of the fileupload content section
+$fileUploadContentHoverBorder: 1px dashed var(--primary-color) !default;
+
+/// Border of the fileupload content item section
+/// @group form
+$fileUploadFileBorder: 1px solid var(--file-upload-file-border);
+
+/// Padding of the fileupload content item section
+/// @group form
+$fileUploadFilePadding: 1rem;
+
+/// Background of an editor toolbar
+/// @group form
+$editorToolbarBg: #f8f9fa;
+
+/// Border of an editor toolbar
+/// @group form
+$editorToolbarBorder: 1px solid var(--editor-toolbar-border);
+
+/// Padding of an editor toolbar
+/// @group form
+$editorToolbarPadding: 1rem;
+
+/// Icon color of an editor toolbar
+/// @group form
+$editorToolbarIconColor: #6c757d;
+
+/// Icon color of an editor toolbar in hover state
+/// @group form
+$editorToolbarIconHoverColor: #495057;
+
+/// Icon color of an editor toolbar in active state
+/// @group form
+$editorIconActiveColor: var(--primary-color);
+
+/// Border of an editor content
+/// @group form
+$editorContentBorder: 1px solid #dee2e6;
+
+/// Background of an editor content
+/// @group form
+$editorContentBg: #ffffff;
+
+/// Background of a password meter
+/// @group form
+$passwordMeterBg: #dee2e6;
+
+/// Background of a week password
+/// @group form
+$passwordWeakBg: #e53935;
+
+/// Background of a medium password
+/// @group form
+$passwordMediumBg: #ffb300;
+
+/// Background of a strong password
+/// @group form
+$passwordStrongBg: #43a047;

package/src/azion/variables/_general.scss

@@ -0,0 +1,149 @@
+/// Font of the theme
+/// @group general
+$fontFamily: 'Roboto', sans-serif;
+
+/// Size of the font
+/// @group general
+$fontSize: 1rem;
+
+/// Thickness of the texts
+/// @group general
+$fontWeight: normal;
+
+/// Primary text color
+/// @group general
+$textColor: var(--text-color);
+
+/// Secondary text color
+/// @group general
+$textSecondaryColor: var(--text-color-secondary);
+
+/// Background of a highlighted item
+/// @group general
+$highlightBg: var(--highlight-bg);
+
+/// Text color of a highlighted item
+/// @group general
+$highlightTextColor: none;
+
+/// Background of a highlighted item in focus state
+/// @group general
+$highlightFocusBg: var(--highlight-focus-bg);
+
+/// Radius of the corners
+/// @group general
+$borderRadius: 6px;
+
+/// Duration of the property transitions
+/// @group general
+$transitionDuration: 0.2s;
+
+/// Properties of a form element transition
+/// @group general
+$formElementTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  border-color $transitionDuration,
+  box-shadow $transitionDuration;
+
+/// Properties of a action icon transition
+/// @group general
+$actionIconTransition:
+  background-color $transitionDuration,
+  color $transitionDuration,
+  box-shadow $transitionDuration;
+
+/// Properties of a list item transition
+/// @group general
+$listItemTransition:
+  background-color $transitionDuration,
+  border-color $transitionDuration,
+  box-shadow $transitionDuration;
+
+/// Size of the Icons
+/// @group general
+$primeIconFontSize: 1rem;
+
+/// Separator border
+/// @group general
+$divider: 1px solid var(--surface-border);
+
+/// Space between two inline items
+/// @group general
+$inlineSpacing: 0.5rem;
+
+/// Opacity of the disabled elements
+/// @group general
+$disabledOpacity: var(--disabled-opacity);
+
+/// Background of the modal layer
+/// @group general
+$maskBg: var(--mask-bg);
+
+/// Font size of the loading icons
+/// @group general
+$loadingIconFontSize: 2rem;
+
+/// Color to use on an invalid element e.g. invalid input
+/// @group general
+$errorColor: var(--error-color);
+
+/// Outline color of a focused element
+/// @group general
+$focusOutlineColor: #f3642b9f;
+
+/// Outline of a focused element
+/// @group general
+$focusOutline: 0 none;
+
+/// Outline offset of a focused element
+/// @group general
+$focusOutlineOffset: 0;
+
+/// Box shadow of a focused element
+/// @group general
+$focusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+/// Width of an action icon
+/// @group general
+$actionIconWidth: 2rem;
+
+/// Height of an action icon
+/// @group general
+$actionIconHeight: 2rem;
+
+/// Background of an action icon
+/// @group general
+$actionIconBg: transparent;
+
+/// Border of an action icon
+/// @group general
+$actionIconBorder: var(--section-icon-border);
+
+/// Color of an action icon
+/// @group general
+$actionIconColor: var(--section-icon-color);
+
+/// Backgroun of an action icon in hover state
+/// @group general
+$actionIconHoverBg: var(--section-icon-hover-bg);
+
+/// Border of an action icon in hover state
+/// @group general
+$actionIconHoverBorderColor: 1px solid var(--section-icon-hover-border-color);
+
+/// Color of an action icon in hover state
+/// @group general
+$actionIconHoverColor: $textColor;
+
+/// Border radius of an action icon
+/// @group general
+$actionIconBorderRadius: 6px;
+
+/// Scale factor of small component size
+/// @group general
+$scaleSM: 0.875;
+
+/// Scale factor of small large size
+/// @group general
+$scaleLG: 1.25;