1. Advisor
  2. @instructure/ui-themeable
  3. functions
  4. @instructure/ui-themeable/lib/utils/color.alpha
View all @instructure/ui-themeable analysis

How to use the @instructure/ui-themeable/lib/utils/color.alpha function in @instructure/ui-themeable

To help you get started, we’ve selected a few @instructure/ui-themeable 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.

github instructure / instructure-ui / packages / media-capture / src / components / VideoPlayer / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
github instructure / instructure-ui / packages / ui-core / src / components / Select / theme.js View on Github external
generator.canvas = function (variables) {
  return {
    color: variables['ic-brand-font-color-dark'],
    arrowColor: variables['ic-brand-font-color-dark'],
    focusBorderColor: variables['ic-brand-primary'],
    focusOutlineColor: alpha(variables['ic-brand-primary'], 50)
  }
}
github instructure / instructure-ui / packages / ui-media-player / src / components / VideoPlayerControls / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
  }
github instructure / instructure-ui / packages / media-capture / src / components / VideoPlayer / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
  }
}
github instructure / instructure-ui / packages / ui-core / src / components / Select / theme.js View on Github external
smallFontSize: typography.fontSizeSmall,
    smallArrowWidth: '0.75rem',

    mediumHeight: forms.inputHeightMedium,
    mediumFontSize: typography.fontSizeMedium,
    mediumArrowWidth: '0.875rem',

    largeHeight: forms.inputHeightLarge,
    largeFontSize: typography.fontSizeLarge,
    largeArrowWidth: '1rem',

    focusBorderColor: colors.borderBrand,
    focusOutlineColor: alpha(colors.borderBrand, 50),

    errorBorderColor: colors.crimson,
    errorOutlineColor: alpha(colors.crimson, 50)
  }
}
github instructure / instructure-ui / packages / ui-core / src / components / Select / theme.js View on Github external
arrowColor: colors.textDarkest,

    smallHeight: forms.inputHeightSmall,
    smallFontSize: typography.fontSizeSmall,
    smallArrowWidth: '0.75rem',

    mediumHeight: forms.inputHeightMedium,
    mediumFontSize: typography.fontSizeMedium,
    mediumArrowWidth: '0.875rem',

    largeHeight: forms.inputHeightLarge,
    largeFontSize: typography.fontSizeLarge,
    largeArrowWidth: '1rem',

    focusBorderColor: colors.borderBrand,
    focusOutlineColor: alpha(colors.borderBrand, 50),

    errorBorderColor: colors.crimson,
    errorOutlineColor: alpha(colors.crimson, 50)
  }
}
github instructure / instructure-ui / packages / ui-media-player / src / components / VideoPlayerControls / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
github instructure / instructure-ui / packages / ui-media-player / src / components / VideoPlayerControls / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
  }
}
github instructure / instructure-ui / packages / media-capture / src / components / MediaCapture / CountdownTimer / theme.js View on Github external
export default function generator ({ colors }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 70),
    fontColor: colors.textLightest,
    fontSize: '10rem'
  }
}
github instructure / instructure-ui / packages / media-capture / src / components / VideoPlayer / Timebar / theme.js View on Github external
export default function generator ({ colors, borders, spacing, typography }) {
  return {
    backgroundColor: alpha(colors.backgroundDarkest, 80),
    bufferedBackgroundColor: alpha(colors.backgroundDarkest, 80),
    progressBackgroundColor: alpha(colors.backgroundBrand, 90),
    focusOutlineColor: colors.borderBrand,
    focusOutlineWeight: borders.widthMedium,
    timestampFontWeight: typography.fontWeightLight,
    timestampColor: colors.textLightest,
    timestampFontSize: typography.fontSizeXSmall,
    timestampPadding: `0 ${spacing.xSmall}`,
    tooltipTop: '-1.65rem',
    tooltipPadding: `${spacing.xxxSmall} ${spacing.xxSmall}`,
    tooltipFontWeight: typography.fontWeightLight,
    tooltipBackgroundColor: colors.backgroundBrand,
    tooltipColor: colors.textLightest,
    tooltipCaretSize: spacing.xxSmall,
    tooltipFontSize: typography.fontSizeXSmall,
    tooltipLineWidth: borders.widthMedium
  }

@instructure/ui-themeable

A UI component library made by Instructure Inc.

GitHub
MIT
Latest version published 3 years ago

Package Health Score

61 / 100
Full package analysis

Popular @instructure/ui-themeable functions

Similar packages