How to use the @instructure/ui-color-utils.lighten 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-elements / src / Progress / ProgressBar / theme.js View on Github 
xSmallHeight: spacing.xSmall,
xSmallValueFontSize: typography.fontSizeXSmall,
smallHeight: spacing.small,
smallValueFontSize: typography.fontSizeXSmall,
mediumHeight: spacing.medium,
mediumValueFontSize: typography.fontSizeSmall,
largeHeight: spacing.large,
largeValueFontSize: typography.fontSizeMedium,
valuePadding: `${spacing.xxSmall}`,
meterColorStart: colors.backgroundBrand,
meterColorEnd: lighten(colors.backgroundBrand, 12),
doneMeterColorStart: colors.backgroundSuccess,
doneMeterColorEnd: lighten(colors.backgroundSuccess, 12),
trackColor: colors.textLight,
inverseColor: colors.textLightest,
inverseTrackColor: 'rgba(0, 0, 0, 0.25)'
}
}smallHeight: spacing.small,
smallValueFontSize: typography.fontSizeXSmall,
mediumHeight: spacing.medium,
mediumValueFontSize: typography.fontSizeSmall,
largeHeight: spacing.large,
largeValueFontSize: typography.fontSizeMedium,
valuePadding: `${spacing.xxSmall}`,
meterColorStart: colors.backgroundBrand,
meterColorEnd: lighten(colors.backgroundBrand, 12),
doneMeterColorStart: colors.backgroundSuccess,
doneMeterColorEnd: lighten(colors.backgroundSuccess, 12),
trackColor: colors.textLight,
inverseColor: colors.textLightest,
inverseTrackColor: 'rgba(0, 0, 0, 0.25)'
}
}generator.canvas = function (variables) {
return {
color: variables['ic-brand-font-color-dark'],
meterColorStart: variables['ic-brand-primary'],
meterColorEnd: lighten(variables['ic-brand-primary'], 12)
}
}@instructure/ui-color-utils
A color utility library made by Instructure Inc.
