fix: breakpoint creation

Author: codebender828

packages/theme-tools/src/component.ts

@@ -29,13 +29,9 @@ export type GlobalStyles = {
   global?: SystemStyleObject | ((props: GlobalStyleProps) => SystemStyleObject)
 }
 
-export type JSXElementStyles = {
-  [K in keyof JSX.IntrinsicElements]?: SystemStyleObject
-}
-
 export { runIfFn }
 
-export type Styles = GlobalStyles & JSXElementStyles
+export type Styles = GlobalStyles
 
 export function mode(light: any, dark: any) {
   return (props: Dict) => (props.colorMode === 'dark' ? dark : light)

packages/theme-tools/src/index.ts

@@ -1,247 +1,3 @@
-import Color from 'tinycolor2'
-import {
-  memoizedGet as get,
-  fromEntries,
-  Dict,
-  isEmptyObject,
-} from '@chakra-ui/vue-utils'
-
-// TODO: rEMove this
-export function orient(options: {
-  orientation?: 'vertical' | 'horizontal'
-  vertical: any
-  horizontal: any
-}) {
-  const { orientation, vertical, horizontal } = options
-  if (!orientation) return {}
-  return orientation === 'vertical' ? vertical : horizontal
-}
-
-// TODO: rEMove this
-export type GlobalStyles = {
-  global?: any
-}
-
-// TODO: rEMove this
-export type Styles = GlobalStyles
-
-export interface BaseBreakpointConfig extends Record<string, string> {
-  sm: string
-  md: string
-  lg: string
-  xl: string
-}
-
-export type Breakpoints<T = BaseBreakpointConfig> = string[] & WithBase<T>
-export type WithBase<T> = T & { base: '0em' }
-
-export const createBreakpoints = <T extends BaseBreakpointConfig>(
-  config: T
-): Breakpoints<T> => {
-  const sorted = fromEntries<WithBase<T>>(
-    Object.entries({ base: '0em', ...config }).sort((a, b) =>
-      parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1
-    )
-  )
-
-  return Object.assign(Object.values(sorted), sorted)
-}
-
-export function mode(light: any, dark: any) {
-  return (props: Dict) => (props.colorMode === 'dark' ? dark : light)
-}
-
-/**
- * Get the color raw value from theme
- * @param theme - the theme object
- * @param color - the color path ("green.200")
- * @param fallback - the fallback color
- */
-export const getColor = (theme: Dict, color: string, fallback?: string) => {
-  const hex = get(theme, `colors.${color}`, color)
-  const isValid = Color(hex).isValid()
-  return isValid ? hex : fallback
-}
-
-/**
- * Determines if the tone of given color is "light" or "dark"
- * @param color - the color in hex, rgb, or hsl
- */
-export const tone = (color: string) => (theme: Dict) => {
-  const hex = getColor(theme, color)
-  const isDark = Color(hex).isDark()
-  return isDark ? 'dark' : 'light'
-}
-
-/**
- * Determines if a color tone is "dark"
- * @param color - the color in hex, rgb, or hsl
- */
-export const isDark = (color: string) => (theme: Dict) =>
-  tone(color)(theme) === 'dark'
-
-/**
- * Determines if a color tone is "light"
- * @param color - the color in hex, rgb, or hsl
- */
-export const isLight = (color: string) => (theme: Dict) =>
-  tone(color)(theme) === 'light'
-
-/**
- * Make a color transparent
- * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add
- */
-export const transparentize = (color: string, opacity: number) => (
-  theme: Dict
-) => {
-  const raw = getColor(theme, color)
-  return Color(raw).setAlpha(opacity).toRgbString()
-}
-
-/**
- * Add white to a color
- * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
- */
-export const whiten = (color: string, amount: number) => (theme: Dict) => {
-  const raw = getColor(theme, color)
-  return Color.mix(raw, '#fff', amount).toHexString()
-}
-
-/**
- * Add black to a color
- * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
- */
-export const blacken = (color: string, amount: number) => (theme: Dict) => {
-  const raw = getColor(theme, color)
-  return Color.mix(raw, '#000', amount).toHexString()
-}
-
-/**
- * Darken a specified color
- * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
- */
-export const darken = (color: string, amount: number) => (theme: Dict) => {
-  const raw = getColor(theme, color)
-  return Color(raw).darken(amount).toHexString()
-}
-
-export const lighten = (color: string, amount: number) => (theme: Dict) =>
-  Color(getColor(theme, color)).lighten(amount).toHexString()
-
-/**
- * Checks the contract ratio of between 2 colors,
- * based on the Web Content Accessibility Guidelines (Version 2.0).
- *
- * @param fg - the foreground or text color
- * @param bg - the background color
- */
-export const contrast = (fg: string, bg: string) => (theme: Dict) =>
-  Color.readability(getColor(theme, bg), getColor(theme, fg))
-
-/**
- * Checks if a color meets the Web Content Accessibility
- * Guidelines (Version 2.0) for constract ratio.
- *
- * @param fg - the foreground or text color
- * @param bg - the background color
- */
-export const isAccessible = (
-  textColor: string,
-  bgColor: string,
-  options?: Color.WCAG2Options
-) => (theme: Dict) =>
-  Color.isReadable(
-    getColor(theme, bgColor),
-    getColor(theme, textColor),
-    options
-  )
-
-export const complementary = (color: string) => (theme: Dict) =>
-  Color(getColor(theme, color)).complement().toHexString()
-
-export function generateStripe(
-  size = '1rem',
-  color = 'rgba(255, 255, 255, 0.15)'
-) {
-  return {
-    backgroundImage: `linear-gradient(
-    45deg,
-    ${color} 25%,
-    transparent 25%,
-    transparent 50%,
-    ${color} 50%,
-    ${color} 75%,
-    transparent 75%,
-    transparent
-  )`,
-    backgroundSize: `${size} ${size}`,
-  }
-}
-
-interface RandomColorOptions {
-  /**
-   * If passed, string will be used to generate
-   * random color
-   */
-  string?: string
-  /**
-   * List of colors to pick from at random
-   */
-  colors?: string[]
-}
-
-export function randomColor(opts?: RandomColorOptions) {
-  const fallback = Color.random().toHexString()
-
-  if (!opts || isEmptyObject(opts)) {
-    return fallback
-  }
-
-  if (opts.string && opts.colors) {
-    return randomColorFromList(opts.string, opts.colors)
-  }
-
-  if (opts.string && !opts.colors) {
-    return randomColorFromString(opts.string)
-  }
-
-  if (opts.colors && !opts.string) {
-    return randomFromList(opts.colors)
-  }
-
-  return fallback
-}
-
-function randomColorFromString(str: string) {
-  let hash = 0
-  if (str.length === 0) return hash.toString()
-  for (let i = 0; i < str.length; i += 1) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-    hash = hash & hash
-  }
-  let color = '#'
-  for (let j = 0; j < 3; j += 1) {
-    const value = (hash >> (j * 8)) & 255
-    color += `00${value.toString(16)}`.substr(-2)
-  }
-  return color
-}
-
-function randomColorFromList(str: string, list: string[]) {
-  let index = 0
-  if (str.length === 0) return list[0]
-  for (let i = 0; i < str.length; i += 1) {
-    index = str.charCodeAt(i) + ((index << 5) - index)
-    index = index & index
-  }
-  index = ((index % list.length) + list.length) % list.length
-  return list[index]
-}
-
-function randomFromList(list: string[]) {
-  return list[Math.floor(Math.random() * list.length)]
-}
+export * from './color'
+export * from './component'
+export * from './create-breakpoints'

website/src/components/home/Hero.vue

@@ -1,13 +1,13 @@
 <template>
   <chakra.header
     pos="relative"
-    :min-h="['auto', '100vh']"
-    :pt="['3rem', '150px']"
+    :min-h="{ base: 'auto', sm: '100vh' }"
+    :pt="{ base: '3rem', sm: '150px' }"
   >
     <chakra.div>
       <chakra.h1
         maxW="16ch"
-        :fontSize="['2.25rem', '3rem', '4rem']"
+        :fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
         fontFamily="heading"
         letterSpacing="tighter"
         fontWeight="extrabold"
@@ -21,7 +21,7 @@
     <chakra.p
       maxW="560px"
       opacity="0.7"
-      :fontSize="['lg', 'xl']"
+      :fontSize="{ base: 'lg', lg: 'xl' }"
       mt="6"
       mb="10"
     >