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;
|