@aziontech/theme 0.1.0

package/src/azion/variables/_button.scss

@@ -0,0 +1,438 @@
+/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
+/// @group button
+$buttonPadding: 0.344rem 0.75rem;
+
+/// Width of a button having an icon with no label
+/// @group button
+$buttonIconOnlyWidth: 2.313rem;
+
+/// Padding of a button having an icon with no label
+/// @group button
+$buttonIconOnlyPadding: 0.1875rem 0;
+
+/// Background of a button
+/// @group button
+$buttonBg: #f3652b;
+
+/// Text color of a button
+/// @group button
+$buttonTextColor: var(--primary-text-color);
+
+/// Border of a button
+/// @group button
+$buttonBorder: 1px solid #f3652b;
+
+/// Background of a button in hover state
+/// @group button
+$buttonHoverBg: #f5793f;
+
+/// Text color of a button in hover state
+/// @group button
+$buttonTextHoverColor: var(--primary-text-color);
+
+/// Border color of a button in hover state
+/// @group button
+$buttonHoverBorderColor: #f5793f;
+
+/// Background of a button in pressed state
+/// @group button
+$buttonActiveBg: #eb6f3f;
+
+/// Color of a button in pressed state
+/// @group button
+$buttonTextActiveColor: var(--primary-text-color);
+
+/// Border color of a button in pressed state
+/// @group button
+$buttonActiveBorderColor: #eb6f3f;
+
+/// Shadow of a raised button
+/// @group button
+$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);
+
+/// Border radius of a rounded button
+/// @group button
+$roundedButtonBorderRadius: 2rem;
+
+/// Alpha level of a text button background in hover state
+/// @group button
+$textButtonHoverBgOpacity: 0.04;
+
+/// Alpha level of a text button background in active state
+/// @group button
+$textButtonActiveBgOpacity: 0.16;
+
+/// Border style of a outlined button
+/// @group button
+$outlinedButtonBorder: 1px solid var(--surface-border);
+
+/// Text color of a plain text button
+/// @group button
+$plainButtonTextColor: $textColor;
+
+/// Background color of a plain text button in hover state
+/// @group button
+$plainButtonHoverBgColor: #1e1e1e;
+
+/// Background color of a plain text button in active state
+/// @group button
+$plainButtonActiveBgColor: var(--plain-button-active-bg-color);
+
+/// Background of a secondary button
+/// @group button
+$secondaryButtonBg: var(--secondary-button-bg);
+
+/// Text color of a secondary button
+/// @group button
+$secondaryButtonTextColor: var(--secondary-button-text-color) !important;
+
+/// Border of a secondary button
+/// @group button
+$secondaryButtonBorder: 1px solid var(--secondary-button-bg);
+
+/// Background of a secondary button in hover state
+/// @group button
+$secondaryButtonHoverBg: var(--secondary-button-hover-bg);
+
+/// Text color of a secondary button in hover state
+/// @group button
+$secondaryButtonTextHoverColor: var(--secondary-button-text-hover-color);
+
+/// Border color of a secondary button in hover state
+/// @group button
+$secondaryButtonHoverBorderColor: var(--secondary-button-hover-border-color);
+
+/// Background of a secondary button in pressed state
+/// @group button
+$secondaryButtonActiveBg: var(--secondary-button-active-bg);
+
+/// Text color of a secondary button in pressed state
+/// @group button
+$secondaryButtonTextActiveColor: var(--secondary-button-text-active-color);
+
+/// Border color of a secondary button in pressed state
+/// @group button
+$secondaryButtonActiveBorderColor: var(--secondary-button-active-border-color);
+
+/// Box shadow of a secondary button in focused state
+/// @group button
+$secondaryButtonFocusShadow: 0 0 0 0.2rem $focusOutline;
+
+/// Background of an info button
+/// @group button
+$infoButtonBg: #0b61c4;
+
+/// Text color of an info button
+/// @group button
+$infoButtonTextColor: #ffffff;
+
+/// Border of an info button
+/// @group button
+$infoButtonBorder: 1px solid #0b61c4;
+
+/// Background of an info button in hover state
+/// @group button
+$infoButtonHoverBg: #0953a6;
+
+/// Text color of an info button in hover state
+/// @group button
+$infoButtonTextHoverColor: #ffffff;
+
+/// Border color of an info button in hover state
+/// @group button
+$infoButtonHoverBorderColor: #0953a6;
+
+/// Background of an info button in pressed state
+/// @group button
+$infoButtonActiveBg: #0953a6;
+
+/// Text color of an info button in pressed state
+/// @group button
+$infoButtonTextActiveColor: #ffffff;
+
+/// Border color of an info button in pressed state
+/// @group button
+$infoButtonActiveBorderColor: #0953a6;
+
+/// Box shadow of an info button in focused state
+/// @group button
+$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);
+
+/// Background of a success button
+/// @group button
+$successButtonBg: #198236;
+
+/// Text color of a success button
+/// @group button
+$successButtonTextColor: #ffffff;
+
+/// Border of a success button
+/// @group button
+$successButtonBorder: 1px solid #198236;
+
+/// Background of a success button in hover state
+/// @group button
+$successButtonHoverBg: #156f2e;
+
+/// Text color of a success button in hover state
+/// @group button
+$successButtonTextHoverColor: #ffffff;
+
+/// Border color of a success button in hover state
+/// @group button
+$successButtonHoverBorderColor: #156f2e;
+
+/// Background of a success button in pressed state
+/// @group button
+$successButtonActiveBg: #156f2e;
+
+/// Text Color of a success button in pressed state
+/// @group button
+$successButtonTextActiveColor: #ffffff;
+
+/// Border color of a success button in pressed state
+/// @group button
+$successButtonActiveBorderColor: #156f2e;
+
+/// Box shadow of a success button in focused state
+/// @group button
+$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
+
+/// Background of a warning button
+/// @group button
+$warningButtonBg: #e9ae18;
+
+/// Text color of a warning button
+/// @group button
+$warningButtonTextColor: var(--warning-button-text-color);
+
+/// Border of a warning button
+/// @group button
+$warningButtonBorder: 1px solid #e9ae18;
+
+/// Background of a warning button in hover state
+/// @group button
+$warningButtonHoverBg: #c79413;
+
+/// Text color of a warning button in hover state
+/// @group button
+$warningButtonTextHoverColor: var(--warning-button-text-color);
+
+/// Border color of a warning button in hover state
+/// @group button
+$warningButtonHoverBorderColor: #c79413;
+
+/// Background of a warning button in pressed state
+/// @group button
+$warningButtonActiveBg: #c79413;
+
+/// Text color of a warning button in pressed state
+/// @group button
+$warningButtonTextActiveColor: var(--warning-button-text-color);
+
+/// Border color of a warning button in pressed state
+/// @group button
+$warningButtonActiveBorderColor: #c79413;
+
+/// Box shadow of a warning button in focused state
+/// @group button
+$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);
+
+/// Background of a help button
+/// @group button
+$helpButtonBg: #9c27b0;
+
+/// Text color of a help button
+/// @group button
+$helpButtonTextColor: #ffffff;
+
+/// Border of a help button
+/// @group button
+$helpButtonBorder: 1px solid #9c27b0;
+
+/// Background of a help help in hover state
+/// @group button
+$helpButtonHoverBg: #8e24aa;
+
+/// Text color of a help button in hover state
+/// @group button
+$helpButtonTextHoverColor: #ffffff;
+
+/// Border color of a help button in hover state
+/// @group button
+$helpButtonHoverBorderColor: var(--help-button-hover-border-color);
+
+/// Background of a help button in pressed state
+/// @group button
+$helpButtonActiveBg: var(--help-button-active);
+
+/// Text color of a help button in pressed state
+/// @group button
+$helpButtonTextActiveColor: #ffffff;
+
+/// Border color of a help button in pressed state
+/// @group button
+$helpButtonActiveBorderColor: var(--help-button-active);
+
+/// Box shadow of a help button in focused state
+/// @group button
+$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8;
+
+/// Background of a danger button
+/// @group button
+$dangerButtonBg: #c4170b;
+
+/// Text color of a danger button
+/// @group button
+$dangerButtonTextColor: #ffffff;
+
+/// Border of a danger button
+/// @group button
+$dangerButtonBorder: 1px solid #c4170b;
+
+/// Background of a danger button in hover state
+/// @group button
+$dangerButtonHoverBg: #a61409;
+
+/// Text color of a danger button in hover state
+/// @group button
+$dangerButtonTextHoverColor: #ffffff;
+
+/// Border color of a danger button in hover state
+/// @group button
+$dangerButtonHoverBorderColor: #a61409;
+
+/// Background of a danger button in pressed state
+/// @group button
+$dangerButtonActiveBg: #a61409;
+
+/// Text color of a danger button in pressed state
+/// @group button
+$dangerButtonTextActiveColor: #ffffff;
+
+/// Border color of a danger button in pressed state
+/// @group button
+$dangerButtonActiveBorderColor: #a61409;
+
+/// Box shadow of a danger button in focused state
+/// @group button
+$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);
+
+/// Text color of a link button
+/// @group button
+$linkButtonColor: var(--text-color-link);
+
+/// Text color of a link button in hover state
+/// @group button
+$linkButtonHoverColor: var(--text-color-link-hover);
+
+/// Text decoration of a link button in hover state
+/// @group button
+$linkButtonTextHoverDecoration: underline;
+
+/// Box shadow of a link button in focused state
+/// @group button
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+/// Background of a toggle button
+/// @group button
+$toggleButtonBg: var(--toggle-button-bg);
+
+/// Border of a toggle button
+/// @group button
+$toggleButtonBorder: 1px solid var(--toggle-button-border);
+
+/// Text color of a toggle button
+/// @group button
+$toggleButtonTextColor: $textColor;
+
+/// Icon color of a toggle button
+/// @group button
+$toggleButtonIconColor: $textSecondaryColor;
+
+/// Background of a toggle button in hover state
+/// @group button
+$toggleButtonHoverBg: var(--toggle-button-hover-bg);
+
+/// Border color of a toggle button in hover state
+/// @group button
+$toggleButtonHoverBorderColor: var(--toggle-button-border);
+
+/// Text color of a toggle button in hover state
+/// @group button
+$toggleButtonTextHoverColor: $textColor;
+
+/// Icon color of a toggle button in hover state
+/// @group button
+$toggleButtonIconHoverColor: $textSecondaryColor;
+
+/// Background of a toggle button in selected state
+/// @group button
+$toggleButtonActiveBg: var(--primary-color);
+
+/// Border color of a toggle button in selected state
+/// @group button
+$toggleButtonActiveBorderColor: var(--primary-color);
+
+/// Text color of a toggle button in selected state
+/// @group button
+$toggleButtonTextActiveColor: var(--primary-text-color);
+
+/// Icon color of a toggle button in selected state
+/// @group button
+$toggleButtonIconActiveColor: var(--primary-text-color);
+
+/// Hover background of a toggle button in selected state
+/// @group button
+$toggleButtonActiveHoverBg: var(--primary-dark-color);
+
+/// Hover border color of a toggle button in selected state
+/// @group button
+$toggleButtonActiveHoverBorderColor: var(--primary-dark-color);
+
+/// Hover text color of a toggle button in selected state
+/// @group button
+$toggleButtonTextActiveHoverColor: var(--primary-text-color);
+
+/// Hover icon of a toggle button in selected state
+/// @group button
+$toggleButtonIconActiveHoverColor: var(--primary-text-color);
+
+/// Width of the speed dial button
+/// @group button
+$speedDialButtonWidth: 4rem;
+
+/// Height of the speed dial button
+/// @group button
+$speedDialButtonHeight: 4rem;
+
+/// Icon size of the speed dial button
+/// @group button
+$speedDialButtonIconFontSize: 1.3rem;
+
+/// Width of a speed dial item
+/// @group button
+$speedDialActionWidth: 3rem;
+
+/// Height of a speed dial item
+/// @group button
+$speedDialActionHeight: 3rem;
+
+/// Background color of a speed dial item
+/// @group button
+$speedDialActionBg: #ffffff;
+
+/// Background color of a speed dial item in hover state
+/// @group button
+$speedDialActionHoverBg: #f5f5f5;
+
+/// Text color of a speed dial item
+/// @group button
+$speedDialActionTextColor: #212121;
+
+/// Text color of a speed dial item in hover state
+/// @group button
+$speedDialActionTextHoverColor: #212121;