How to use the @instructure/ui-color-utils.alpha function in @instructure/ui-color-utils
To help you get started, we’ve selected a few @instructure/ui-color-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
instructure / instructure-ui / packages / ui-buttons / src / components / Button / theme.js View on Github 
lightBackground: colors.backgroundLightest,
lightBorderColor: darken(colors.borderLight, 10),
lightBorderStyle: borders.style,
lightColor: colors.textDarkest,
lightHoverBackground: darken(colors.backgroundLightest, 5),
lightActiveBackground: colors.backgroundLightest,
lightActiveBoxShadow: `${activeShadow} ${darken(colors.borderLightest, 25)}`,
ghostBackground: 'transparent',
ghostBorderColor: colors.borderBrand,
ghostBorderStyle: borders.style,
ghostColor: colors.textBrand,
ghostHoverBackground: alpha(colors.backgroundBrand, 10),
ghostActiveBackground: 'transparent',
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderBrand, 20)}`,
ghostInverseBackground: 'transparent',
ghostInverseBorderColor: colors.borderLightest,
ghostInverseBorderStyle: borders.style,
ghostInverseColor: colors.textLightest,
ghostInverseHoverBackground: alpha(colors.backgroundLightest, 10),
ghostInverseActiveBackground: 'transparent',
ghostInverseActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderLightest, 20)}`,
linkColor: colors.textLink,
linkBorderColor: 'transparent',
linkFocusBorderColor: 'transparent',
linkHoverColor: darken(colors.textLink, 10),
linkTextDecoration: 'none',
linkInverseColor: colors.textLight,generator.canvas = function (variables) {
return {
handleBackground: variables['ic-brand-primary'],
handleShadowColor: darken(variables['ic-brand-primary'], 15),
handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40),
handleHoverBackground: variables['ic-brand-primary'],
handleFocusBackground: variables['ic-brand-primary'],
valueBackground: variables['ic-brand-font-color-dark']
}
}generator['canvas'] = function (variables) {
return {
focusBorder: `${focusOutline} ${variables['ic-brand-primary']}`,
ghostBorderColor: variables['ic-brand-button--primary-bgd'],
ghostColor: variables['ic-brand-button--primary-bgd'],
ghostHoverBackground: alpha(variables['ic-brand-button--primary-bgd'], 10),
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(variables['ic-brand-button--primary-bgd'], 20)}`,
linkColor: variables['ic-link-color'],
linkHoverColor: darken(variables['ic-link-color'], 10),
iconHoverColor: variables['ic-brand-primary'],
iconFocusBoxShadow: `${focusShadow} ${variables['ic-brand-primary']}`,
...buttonVariant(
'primary',
variables['ic-brand-button--primary-bgd'],
variables['ic-brand-button--primary-text']
),
...buttonVariant(
'circlePrimary',export default function generator ({ borders, colors }) {
return {
backgroundColor: colors.backgroundLightest,
borderRadius: borders.radiusLarge,
borderWidth: borders.widthMedium,
borderStyle: 'dashed',
borderColor: colors.borderMedium,
hoverBorderColor: colors.borderBrand,
focusBorderWidth: borders.widthMedium,
focusBorderStyle: 'solid',
focusBorderColor: colors.borderBrand,
acceptedColor: colors.textBrand,
rejectedColor: colors.textDanger,
disabledColor: alpha(colors.borderMedium, 50)
}
}focusBorder: `${focusOutline} ${colors.borderBrand}`,
focusShadow: 'none',
lightBackground: colors.backgroundLightest,
lightBorderColor: darken(colors.borderLight, 10),
lightBorderStyle: borders.style,
lightColor: colors.textDarkest,
lightHoverBackground: darken(colors.backgroundLightest, 5),
lightActiveBackground: colors.backgroundLightest,
lightActiveBoxShadow: `${activeShadow} ${darken(colors.borderLightest, 25)}`,
ghostBackground: 'transparent',
ghostBorderColor: colors.borderBrand,
ghostBorderStyle: borders.style,
ghostColor: colors.textBrand,
ghostHoverBackground: alpha(colors.backgroundBrand, 10),
ghostActiveBackground: 'transparent',
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderBrand, 20)}`,
ghostInverseBackground: 'transparent',
ghostInverseBorderColor: colors.borderLightest,
ghostInverseBorderStyle: borders.style,
ghostInverseColor: colors.textLightest,
ghostInverseHoverBackground: alpha(colors.backgroundLightest, 10),
ghostInverseActiveBackground: 'transparent',
ghostInverseActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderLightest, 20)}`,
linkColor: colors.textLink,
linkBorderColor: 'transparent',
linkFocusBorderColor: 'transparent',
linkHoverColor: darken(colors.textLink, 10),
linkTextDecoration: 'none',generator['canvas'] = function (variables) {
return {
focusBorder: `${focusOutline} ${variables['ic-brand-primary']}`,
ghostBorderColor: variables['ic-brand-button--primary-bgd'],
ghostColor: variables['ic-brand-button--primary-bgd'],
ghostHoverBackground: alpha(variables['ic-brand-button--primary-bgd'], 10),
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(variables['ic-brand-button--primary-bgd'], 20)}`,
linkColor: variables['ic-link-color'],
linkHoverColor: darken(variables['ic-link-color'], 10),
iconHoverColor: variables['ic-brand-primary'],
iconFocusBoxShadow: `${focusShadow} ${variables['ic-brand-primary']}`,
...buttonVariant(
'primary',
variables['ic-brand-button--primary-bgd'],
variables['ic-brand-button--primary-text']
),
...buttonVariant(
'circlePrimary',
variables['ic-brand-button--primary-bgd'],ghostBackground: 'transparent',
ghostBorderColor: colors.borderBrand,
ghostBorderStyle: borders.style,
ghostColor: colors.textBrand,
ghostHoverBackground: alpha(colors.backgroundBrand, 10),
ghostActiveBackground: 'transparent',
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderBrand, 20)}`,
ghostInverseBackground: 'transparent',
ghostInverseBorderColor: colors.borderLightest,
ghostInverseBorderStyle: borders.style,
ghostInverseColor: colors.textLightest,
ghostInverseHoverBackground: alpha(colors.backgroundLightest, 10),
ghostInverseActiveBackground: 'transparent',
ghostInverseActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderLightest, 20)}`,
linkColor: colors.textLink,
linkBorderColor: 'transparent',
linkFocusBorderColor: 'transparent',
linkHoverColor: darken(colors.textLink, 10),
linkTextDecoration: 'none',
linkInverseColor: colors.textLight,
inverseFocusBorder: `${focusOutline} ${colors.borderLightest}`,
iconBorderColor: 'transparent',
iconPadding: `0 ${spacing.xxSmall}`,
iconColor: colors.textDarkest,
iconHoverColor: colors.textBrand,
iconActiveColor: darken(colors.textDarkest, 10),lightActiveBackground: colors.backgroundLightest,
lightActiveBoxShadow: `${activeShadow} ${darken(colors.borderLightest, 25)}`,
ghostBackground: 'transparent',
ghostBorderColor: colors.borderBrand,
ghostBorderStyle: borders.style,
ghostColor: colors.textBrand,
ghostHoverBackground: alpha(colors.backgroundBrand, 10),
ghostActiveBackground: 'transparent',
ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderBrand, 20)}`,
ghostInverseBackground: 'transparent',
ghostInverseBorderColor: colors.borderLightest,
ghostInverseBorderStyle: borders.style,
ghostInverseColor: colors.textLightest,
ghostInverseHoverBackground: alpha(colors.backgroundLightest, 10),
ghostInverseActiveBackground: 'transparent',
ghostInverseActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderLightest, 20)}`,
linkColor: colors.textLink,
linkBorderColor: 'transparent',
linkFocusBorderColor: 'transparent',
linkHoverColor: darken(colors.textLink, 10),
linkTextDecoration: 'none',
linkInverseColor: colors.textLight,
inverseFocusBorder: `${focusOutline} ${colors.borderLightest}`,
iconBorderColor: 'transparent',
iconPadding: `0 ${spacing.xxSmall}`,
iconColor: colors.textDarkest,export default function generator ({ colors, typography, spacing, forms }) {
return {
minWidth: '12.5rem',
handleSize: '1.5rem',
handleBackground: colors.backgroundBrand,
handleShadowColor: darken(colors.borderBrand, 15),
handleHoverBackground: colors.backgroundBrand,
handleFocusBackground: colors.backgroundBrand,
handleFocusOutlineColor: alpha(colors.borderBrand, 40),
handleFocusOutlineWidth: '0.75em',
trackBackground: colors.backgroundDark,
valueBackground: colors.backgroundDarkest,
valueColor: colors.textLightest,
valueFontFamily: typography.fontFamily,
valueFontWeight: typography.fontWeightNormal,
valueSmallFontSize: typography.fontSizeSmall,
valueSmallPadding: `0 ${spacing.xSmall}`,
valueSmallLineHeight: forms.inputHeightSmall,
valueMediumFontSize: typography.fontSizeMedium,
valueMediumPadding: `0 ${spacing.small}`,
valueMediumLineHeight: forms.inputHeightMedium,@instructure/ui-color-utils
A color utility library made by Instructure Inc.
