1. Advisor
  2. @instructure/ui-themeable
  3. functions
  4. @instructure/ui-themeable.makeThemeVars
View all @instructure/ui-themeable analysis

How to use the @instructure/ui-themeable.makeThemeVars 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 / ui-view / src / View / theme.js View on Github external
focusOutlineStyle: borders.style,
    focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-layout / src / View / theme.js View on Github external
focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-view / src / View / theme.js View on Github external
focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-layout / src / View / theme.js View on Github external
focusOutlineStyle: borders.style,
    focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-layout / src / View / theme.js View on Github external
focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-view / src / View / theme.js View on Github external
focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-layout / src / View / theme.js View on Github external
focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-view / src / View / theme.js View on Github external
focusOutlineWidth: borders.widthMedium,
    focusOutlineOffset: '0.3125rem',
    focusOutlineInset: '0rem', // do not use unitless zero (for CSS calc())

    focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-view / src / View / theme.js View on Github external
focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}
github instructure / instructure-ui / packages / ui-layout / src / View / theme.js View on Github external
focusColorInfo: colors.borderInfo,
    focusColorDanger: colors.borderDanger,
    focusColorSuccess: colors.borderSuccess,
    focusColorInverse: colors.borderLightest,

    xSmallMaxWidth: breakpoints.xSmall,
    smallMaxWidth: breakpoints.small,
    mediumMaxWidth: breakpoints.medium,
    largeMaxWidth: breakpoints.large,

    ...makeThemeVars('margin', spacing),
    ...makeThemeVars('padding', spacing),
    ...makeThemeVars('shadow', shadows),
    ...makeThemeVars('stacking', stacking),
    ...makeThemeVars('border', borders)
  }
}

@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