242 lines
8.6 KiB
JavaScript
242 lines
8.6 KiB
JavaScript
import commonVariables from "./_common.mjs";
|
|
import { commonLight } from "../../_styles/common/index.mjs";
|
|
export const self = vars => {
|
|
const {
|
|
heightTiny,
|
|
heightSmall,
|
|
heightMedium,
|
|
heightLarge,
|
|
borderRadius,
|
|
fontSizeTiny,
|
|
fontSizeSmall,
|
|
fontSizeMedium,
|
|
fontSizeLarge,
|
|
opacityDisabled,
|
|
textColor2,
|
|
textColor3,
|
|
primaryColorHover,
|
|
primaryColorPressed,
|
|
borderColor,
|
|
primaryColor,
|
|
baseColor,
|
|
infoColor,
|
|
infoColorHover,
|
|
infoColorPressed,
|
|
successColor,
|
|
successColorHover,
|
|
successColorPressed,
|
|
warningColor,
|
|
warningColorHover,
|
|
warningColorPressed,
|
|
errorColor,
|
|
errorColorHover,
|
|
errorColorPressed,
|
|
fontWeight,
|
|
buttonColor2,
|
|
buttonColor2Hover,
|
|
buttonColor2Pressed,
|
|
fontWeightStrong
|
|
} = vars;
|
|
return Object.assign(Object.assign({}, commonVariables), {
|
|
heightTiny,
|
|
heightSmall,
|
|
heightMedium,
|
|
heightLarge,
|
|
borderRadiusTiny: borderRadius,
|
|
borderRadiusSmall: borderRadius,
|
|
borderRadiusMedium: borderRadius,
|
|
borderRadiusLarge: borderRadius,
|
|
fontSizeTiny,
|
|
fontSizeSmall,
|
|
fontSizeMedium,
|
|
fontSizeLarge,
|
|
opacityDisabled,
|
|
// secondary
|
|
colorOpacitySecondary: '0.16',
|
|
colorOpacitySecondaryHover: '0.22',
|
|
colorOpacitySecondaryPressed: '0.28',
|
|
colorSecondary: buttonColor2,
|
|
colorSecondaryHover: buttonColor2Hover,
|
|
colorSecondaryPressed: buttonColor2Pressed,
|
|
// tertiary
|
|
colorTertiary: buttonColor2,
|
|
colorTertiaryHover: buttonColor2Hover,
|
|
colorTertiaryPressed: buttonColor2Pressed,
|
|
// quaternary
|
|
colorQuaternary: '#0000',
|
|
colorQuaternaryHover: buttonColor2Hover,
|
|
colorQuaternaryPressed: buttonColor2Pressed,
|
|
// default type
|
|
color: '#0000',
|
|
colorHover: '#0000',
|
|
colorPressed: '#0000',
|
|
colorFocus: '#0000',
|
|
colorDisabled: '#0000',
|
|
textColor: textColor2,
|
|
textColorTertiary: textColor3,
|
|
textColorHover: primaryColorHover,
|
|
textColorPressed: primaryColorPressed,
|
|
textColorFocus: primaryColorHover,
|
|
textColorDisabled: textColor2,
|
|
textColorText: textColor2,
|
|
textColorTextHover: primaryColorHover,
|
|
textColorTextPressed: primaryColorPressed,
|
|
textColorTextFocus: primaryColorHover,
|
|
textColorTextDisabled: textColor2,
|
|
textColorGhost: textColor2,
|
|
textColorGhostHover: primaryColorHover,
|
|
textColorGhostPressed: primaryColorPressed,
|
|
textColorGhostFocus: primaryColorHover,
|
|
textColorGhostDisabled: textColor2,
|
|
border: `1px solid ${borderColor}`,
|
|
borderHover: `1px solid ${primaryColorHover}`,
|
|
borderPressed: `1px solid ${primaryColorPressed}`,
|
|
borderFocus: `1px solid ${primaryColorHover}`,
|
|
borderDisabled: `1px solid ${borderColor}`,
|
|
rippleColor: primaryColor,
|
|
// primary
|
|
colorPrimary: primaryColor,
|
|
colorHoverPrimary: primaryColorHover,
|
|
colorPressedPrimary: primaryColorPressed,
|
|
colorFocusPrimary: primaryColorHover,
|
|
colorDisabledPrimary: primaryColor,
|
|
textColorPrimary: baseColor,
|
|
textColorHoverPrimary: baseColor,
|
|
textColorPressedPrimary: baseColor,
|
|
textColorFocusPrimary: baseColor,
|
|
textColorDisabledPrimary: baseColor,
|
|
textColorTextPrimary: primaryColor,
|
|
textColorTextHoverPrimary: primaryColorHover,
|
|
textColorTextPressedPrimary: primaryColorPressed,
|
|
textColorTextFocusPrimary: primaryColorHover,
|
|
textColorTextDisabledPrimary: textColor2,
|
|
textColorGhostPrimary: primaryColor,
|
|
textColorGhostHoverPrimary: primaryColorHover,
|
|
textColorGhostPressedPrimary: primaryColorPressed,
|
|
textColorGhostFocusPrimary: primaryColorHover,
|
|
textColorGhostDisabledPrimary: primaryColor,
|
|
borderPrimary: `1px solid ${primaryColor}`,
|
|
borderHoverPrimary: `1px solid ${primaryColorHover}`,
|
|
borderPressedPrimary: `1px solid ${primaryColorPressed}`,
|
|
borderFocusPrimary: `1px solid ${primaryColorHover}`,
|
|
borderDisabledPrimary: `1px solid ${primaryColor}`,
|
|
rippleColorPrimary: primaryColor,
|
|
// info
|
|
colorInfo: infoColor,
|
|
colorHoverInfo: infoColorHover,
|
|
colorPressedInfo: infoColorPressed,
|
|
colorFocusInfo: infoColorHover,
|
|
colorDisabledInfo: infoColor,
|
|
textColorInfo: baseColor,
|
|
textColorHoverInfo: baseColor,
|
|
textColorPressedInfo: baseColor,
|
|
textColorFocusInfo: baseColor,
|
|
textColorDisabledInfo: baseColor,
|
|
textColorTextInfo: infoColor,
|
|
textColorTextHoverInfo: infoColorHover,
|
|
textColorTextPressedInfo: infoColorPressed,
|
|
textColorTextFocusInfo: infoColorHover,
|
|
textColorTextDisabledInfo: textColor2,
|
|
textColorGhostInfo: infoColor,
|
|
textColorGhostHoverInfo: infoColorHover,
|
|
textColorGhostPressedInfo: infoColorPressed,
|
|
textColorGhostFocusInfo: infoColorHover,
|
|
textColorGhostDisabledInfo: infoColor,
|
|
borderInfo: `1px solid ${infoColor}`,
|
|
borderHoverInfo: `1px solid ${infoColorHover}`,
|
|
borderPressedInfo: `1px solid ${infoColorPressed}`,
|
|
borderFocusInfo: `1px solid ${infoColorHover}`,
|
|
borderDisabledInfo: `1px solid ${infoColor}`,
|
|
rippleColorInfo: infoColor,
|
|
// success
|
|
colorSuccess: successColor,
|
|
colorHoverSuccess: successColorHover,
|
|
colorPressedSuccess: successColorPressed,
|
|
colorFocusSuccess: successColorHover,
|
|
colorDisabledSuccess: successColor,
|
|
textColorSuccess: baseColor,
|
|
textColorHoverSuccess: baseColor,
|
|
textColorPressedSuccess: baseColor,
|
|
textColorFocusSuccess: baseColor,
|
|
textColorDisabledSuccess: baseColor,
|
|
textColorTextSuccess: successColor,
|
|
textColorTextHoverSuccess: successColorHover,
|
|
textColorTextPressedSuccess: successColorPressed,
|
|
textColorTextFocusSuccess: successColorHover,
|
|
textColorTextDisabledSuccess: textColor2,
|
|
textColorGhostSuccess: successColor,
|
|
textColorGhostHoverSuccess: successColorHover,
|
|
textColorGhostPressedSuccess: successColorPressed,
|
|
textColorGhostFocusSuccess: successColorHover,
|
|
textColorGhostDisabledSuccess: successColor,
|
|
borderSuccess: `1px solid ${successColor}`,
|
|
borderHoverSuccess: `1px solid ${successColorHover}`,
|
|
borderPressedSuccess: `1px solid ${successColorPressed}`,
|
|
borderFocusSuccess: `1px solid ${successColorHover}`,
|
|
borderDisabledSuccess: `1px solid ${successColor}`,
|
|
rippleColorSuccess: successColor,
|
|
// warning
|
|
colorWarning: warningColor,
|
|
colorHoverWarning: warningColorHover,
|
|
colorPressedWarning: warningColorPressed,
|
|
colorFocusWarning: warningColorHover,
|
|
colorDisabledWarning: warningColor,
|
|
textColorWarning: baseColor,
|
|
textColorHoverWarning: baseColor,
|
|
textColorPressedWarning: baseColor,
|
|
textColorFocusWarning: baseColor,
|
|
textColorDisabledWarning: baseColor,
|
|
textColorTextWarning: warningColor,
|
|
textColorTextHoverWarning: warningColorHover,
|
|
textColorTextPressedWarning: warningColorPressed,
|
|
textColorTextFocusWarning: warningColorHover,
|
|
textColorTextDisabledWarning: textColor2,
|
|
textColorGhostWarning: warningColor,
|
|
textColorGhostHoverWarning: warningColorHover,
|
|
textColorGhostPressedWarning: warningColorPressed,
|
|
textColorGhostFocusWarning: warningColorHover,
|
|
textColorGhostDisabledWarning: warningColor,
|
|
borderWarning: `1px solid ${warningColor}`,
|
|
borderHoverWarning: `1px solid ${warningColorHover}`,
|
|
borderPressedWarning: `1px solid ${warningColorPressed}`,
|
|
borderFocusWarning: `1px solid ${warningColorHover}`,
|
|
borderDisabledWarning: `1px solid ${warningColor}`,
|
|
rippleColorWarning: warningColor,
|
|
// error
|
|
colorError: errorColor,
|
|
colorHoverError: errorColorHover,
|
|
colorPressedError: errorColorPressed,
|
|
colorFocusError: errorColorHover,
|
|
colorDisabledError: errorColor,
|
|
textColorError: baseColor,
|
|
textColorHoverError: baseColor,
|
|
textColorPressedError: baseColor,
|
|
textColorFocusError: baseColor,
|
|
textColorDisabledError: baseColor,
|
|
textColorTextError: errorColor,
|
|
textColorTextHoverError: errorColorHover,
|
|
textColorTextPressedError: errorColorPressed,
|
|
textColorTextFocusError: errorColorHover,
|
|
textColorTextDisabledError: textColor2,
|
|
textColorGhostError: errorColor,
|
|
textColorGhostHoverError: errorColorHover,
|
|
textColorGhostPressedError: errorColorPressed,
|
|
textColorGhostFocusError: errorColorHover,
|
|
textColorGhostDisabledError: errorColor,
|
|
borderError: `1px solid ${errorColor}`,
|
|
borderHoverError: `1px solid ${errorColorHover}`,
|
|
borderPressedError: `1px solid ${errorColorPressed}`,
|
|
borderFocusError: `1px solid ${errorColorHover}`,
|
|
borderDisabledError: `1px solid ${errorColor}`,
|
|
rippleColorError: errorColor,
|
|
waveOpacity: '0.6',
|
|
fontWeight,
|
|
fontWeightStrong
|
|
});
|
|
};
|
|
const buttonLight = {
|
|
name: 'Button',
|
|
common: commonLight,
|
|
self
|
|
};
|
|
export default buttonLight; |