@northlight/ui 2.41.0 → 2.41.1

package/lib/theme/components/tabs/index.ts

@@ -0,0 +1,115 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Tabs: ComponentMultiStyleConfig = {
+  parts: [ 'tab' ],
+  baseStyle: ({ theme: { fontWeights: coreFontWeight } }) => ({
+    tab: {
+      fontWeight: coreFontWeight.semiBold,
+    },
+  }),
+  variants: {
+    'soft-rounded': ({ theme: { colors: color } }) => ({
+      tab: {
+        borderRadius: 999,
+        color: color.text.subdued,
+        _selected: {
+          bg: color.background.tabs['soft-rounded-active'],
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _hover: {
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _focusVisible: {
+          ring: '2px',
+          ringColor: color.border.wcag,
+          ringOffset: '1px',
+        },
+      },
+    }),
+    rounded: ({ theme: { colors: color, radii: borderRadius } }) => ({
+      tab: {
+        color: color.text.subdued,
+        borderRadius: borderRadius.button.default,
+        _selected: {
+          bg: color.background.tabs['soft-rounded-active'],
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _hover: {
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _focusVisible: {
+          ring: '2px',
+          ringColor: color.border.wcag,
+          ringOffset: '1px',
+        },
+      },
+    }),
+    ai: ({ theme: { colors: color } }) => ({
+      tab: {
+        borderRadius: 999,
+        _selected: {
+          bgColor: color.bg.ai.default,
+          color: color.text.inverted,
+        },
+        _focusVisible: {
+          ring: '2px',
+          ringColor: color.border.wcag,
+          ringOffset: '1px',
+        },
+      },
+    }),
+    line: ({ theme: { colors: color } }) => ({
+      tab: {
+        color: color.text.subdued,
+        _selected: {
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _hover: {
+          color: color.text.tabs['soft-rounded-active'],
+        },
+        _active: {
+          bg: color.mono.transparent,
+        },
+        _focusVisible: {
+          ring: '2px',
+          ringColor: color.border.wcag,
+          ringOffset: '1px',
+        },
+      },
+    }),
+    piped: ({ theme: { colors: color } }) => ({
+      tab: {
+        position: 'relative',
+        color: color.text.default,
+        paddingLeft: 4,
+        opacity: 0.5,
+        transition: 'opacity 0.2s ease-in-out',
+        _before: {
+          content: "''",
+          position: 'absolute',
+          left: 0,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          width: '7px',
+          height: '70%',
+          borderRadius: 999,
+          bgColor: 'brand',
+        },
+        _selected: {
+          opacity: 1,
+          _hover: {
+            opacity: 1,
+          },
+        },
+        _hover: {
+          opacity: 0.7,
+        },
+        _focusVisible: {
+          ring: '2px',
+          ringColor: color.border.wcag,
+          ringOffset: '1px',
+        },
+      },
+    }),
+  },
+}

package/lib/theme/components/tag/index.ts

@@ -0,0 +1,81 @@
+import { ComponentMultiStyleConfig, useToken } from '@chakra-ui/react'
+import { getContrastColor } from '../../../utils'
+import { processColorSchemeBasedOnTheme } from '../../process-color-scheme-based-on-theme'
+
+export const Tag: ComponentMultiStyleConfig = {
+  parts: [ 'container' ],
+  baseStyle: {
+    container: {
+      fontWeight: 'semibold',
+    },
+  },
+  sizes: {
+    sm: {
+      container: {
+        borderRadius: 'tag.default',
+      },
+    },
+    md: {
+      container: {
+        borderRadius: 'tag.default',
+      },
+    },
+    lg: {
+      container: {
+        borderRadius: 'tag.default',
+      },
+    },
+  },
+  variants: {
+    solid: ({ theme: { colors }, bgColor, colorScheme, currentTheme }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+      const tagBgColorRaw =
+        bgColor ??
+        (colors[processedColorScheme] && colors[processedColorScheme][500]
+          ? colors[processedColorScheme][500]
+          : processedColorScheme)
+
+      const tagBgColor = typeof tagBgColorRaw === 'string' ? tagBgColorRaw.trim() : tagBgColorRaw
+
+      const tagColor = getContrastColor(useToken('colors', tagBgColor))
+
+      return {
+        container: {
+          bgColor: tagBgColor,
+          color: tagColor,
+        },
+      }
+    },
+    subtle: ({ theme: { colors }, colorScheme, bgColor, currentTheme }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+      const tagBgColorRaw =
+        bgColor ??
+        (colors[processedColorScheme] && colors[processedColorScheme][100]
+          ? colors[processedColorScheme][100]
+          : processedColorScheme)
+
+      const tagBgColor = typeof tagBgColorRaw === 'string' ? tagBgColorRaw.trim() : tagBgColorRaw
+
+      const tagColor = getContrastColor(useToken('colors', tagBgColor))
+
+      return {
+        container: {
+          bgColor: tagBgColor,
+          color: tagColor,
+        },
+      }
+    },
+    ai: {
+      container: {
+        bgColor: 'bg.ai.default',
+        color: 'text.inverted',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'md',
+    colorScheme: 'background.tag.default',
+  },
+}

package/lib/theme/components/textarea/index.ts

@@ -0,0 +1,62 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const Textarea: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: {
+    space: spacing,
+    colors: color,
+    borders: borderWidth,
+    radii: borderRadius,
+  } }) => ({
+    paddingInlineStart: spacing['padding-inline'].textarea.default,
+    paddingInlineEnd: spacing['padding-inline'].textarea.default,
+    borderRadius: borderRadius.textarea.default,
+    borderWidth: borderWidth.textarea.default,
+    borderColor: color.border.textarea.default,
+    color: color.text.default,
+    bgColor: color.background.textarea.default,
+    _hover: {
+      borderColor: color.border.textarea['default-hover'],
+      bgColor: color.background.textarea.hover,
+    },
+    _focusVisible: {
+      borderColor: color.border.textarea.focus,
+      boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
+      bgColor: color.background.textarea.active,
+    },
+    _invalid: {
+      boxShadow: 'none',
+      borderColor: color.border.textarea.error,
+      bgColor: color.background.textarea.error,
+    },
+    _readOnly: {
+      _focusVisible: {
+        borderColor: color.border.textarea.readonly,
+        bgColor: color.background.textarea.default,
+      },
+      _hover: {
+        borderColor: color.border.textarea.readonly,
+      },
+    },
+    _disabled: {
+      bgColor: color.background.textarea.disabled,
+      _hover: {
+        borderColor: color.border.textarea.default,
+      },
+    },
+    _placeholder: {
+      color: color.text.textarea.placeholder,
+    },
+  }),
+  variants: {
+    outline: {},
+    ai: ({ theme: { colors: color } }) => ({
+      _focusVisible: {
+        _hover: {
+          boxShadow: `0 0 0 1px ${color.border.ai}`,
+          borderColor: color.border.ai,
+        },
+      },
+    }),
+
+  },
+}

package/lib/theme/components/toolbox/index.ts

@@ -0,0 +1,64 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Toolbox: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'header', 'body', 'footer' ],
+  baseStyle: ({ theme: {
+    colors: color,
+    sizes: sizing,
+    borders: borderWidth,
+  } }) => ({
+    container: {
+      position: 'relative',
+      bg: 'text.inverted',
+      h: '100vh',
+      borderLeftWidth: borderWidth.xs,
+      borderLeftStyle: 'solid',
+      borderLeftColor: color.border.default,
+    },
+    header: {
+      alignItems: 'center',
+      height: '16',
+      borderBottomWidth: borderWidth.xs,
+      borderBottomStyle: 'solid',
+      borderBottomColor: color.border.default,
+      pl: '4',
+      pr: '16',
+    },
+    footer: {
+      position: 'absolute',
+      bottom: '0',
+      w: 'full',
+      p: '4',
+      alignItems: 'center',
+      height: '16',
+      borderTopWidth: borderWidth.xs,
+      borderTopStyle: 'solid',
+      borderTopColor: color.border.default,
+    },
+    body: {
+      p: sizing['4'],
+      flexDirection: 'column',
+      w: '100%',
+      h: '100%',
+      maxH: `calc(100vh - ${sizing['16']} * 2)`,
+      overflowY: 'scroll',
+    },
+  }),
+  sizes: {
+    sm: {
+      container: {
+        w: 'xs',
+      },
+    },
+    md: {
+      container: {
+        w: 'md',
+      },
+    },
+    lg: {
+      container: {
+        w: 'xl',
+      },
+    },
+  },
+}

package/lib/theme/components/tooltip/index.ts

@@ -0,0 +1,68 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { cssVar } from '@chakra-ui/theme-tools'
+
+const $arrowBg = cssVar('popper-arrow-bg')
+const $arrowBorder = cssVar('popper-arrow-shadow-color')
+
+export const Tooltip: ComponentSingleStyleConfig = {
+  baseStyle: ({
+    theme: { colors: color, space: spacing, radii: borderRadius },
+  }) => ({
+    color: color.text.inverted,
+    paddingInline: spacing['padding-inline'].tooltip.default,
+    paddingY: spacing.paddingY.tooltip.default,
+    borderRadius: borderRadius.tooltip.default,
+    backgroundColor: color.background.tooltip.default,
+    [$arrowBg.variable]: color.background.tooltip.default,
+  }),
+  variants: {
+    default: ({ theme: { colors: color } }) => ({
+      color: color.text.default,
+      bgColor: color.bg.base,
+      borderWidth: 'xs',
+      borderColor: color.border.default,
+      borderStyle: 'solid',
+      [$arrowBg.variable]: color.bg.base,
+      [$arrowBorder.variable]: color.border.default,
+    }),
+    success: ({ theme: { colors: color } }) => ({
+      color: 'text.over.success',
+      bgColor: 'success-alt',
+      [$arrowBg.variable]: color['success-alt'],
+    }),
+    info: ({ theme: { colors: color } }) => ({
+      color: 'text.over.brand',
+      bgColor: 'brand-alt',
+      [$arrowBg.variable]: color['brand-alt'],
+    }),
+    ghost: ({ theme: { colors: color } }) => ({
+      color: 'text.default',
+      bgColor: color.bg.base,
+      borderWidth: 'xs',
+      borderColor: color.border.default,
+      [$arrowBorder.variable]: color.border.default,
+      borderStyle: 'solid',
+      [$arrowBg.variable]: color.bg.base,
+    }),
+    warning: ({ theme: { colors: color } }) => ({
+      color: 'text.over.warning',
+      bgColor: color['info-alt'],
+      [$arrowBg.variable]: color['info-alt'],
+    }),
+    danger: ({ theme: { colors: color } }) => ({
+      color: 'text.over.error',
+      bgColor: color['destructive-alt'],
+      [$arrowBg.variable]: color['destructive-alt'],
+    }),
+    error: ({ theme: { colors: color } }) => ({
+      color: 'text.over.error',
+      bgColor: color['destructive-alt'],
+      [$arrowBg.variable]: color['destructive-alt'],
+    }),
+    ai: ({ theme: { colors: color } }) => ({
+      bgColor: color.bg.ai.default,
+      [$arrowBg.variable]: color.bg.ai.default,
+
+    }),
+  },
+}

package/lib/theme/components/typography/body/index.ts

@@ -0,0 +1 @@
+export * from './p'

package/lib/theme/components/typography/body/p.ts

@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const P: ComponentSingleStyleConfig = {
+  variants: {
+    14: ({ theme, sx }) => {
+      const { body14 } = theme.typography.body
+      return merge({
+        fontFamily: body14.fontFamily,
+        fontWeight: body14.fontWeight,
+        lineHeight: body14.lineHeight,
+        fontSize: body14.fontSize,
+        letterSpacing: body14.letterSpacing,
+        textTransform: body14.textCase,
+      }, sx)
+    },
+    16: ({ theme, sx }) => {
+      const { body16 } = theme.typography.body
+      return merge({
+        fontFamily: body16.fontFamily,
+        fontWeight: body16.fontWeight,
+        lineHeight: body16.lineHeight,
+        fontSize: body16.fontSize,
+        letterSpacing: body16.letterSpacing,
+        textTransform: body16.textCase,
+      }, sx)
+    },
+  },
+  baseStyle: {
+    color: 'text.default',
+  },
+}

package/lib/theme/components/typography/headings/h1.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H1: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h1 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h1.fontFamily,
+      fontWeight: h1.fontWeight,
+      lineHeight: h1.lineHeight,
+      fontSize: h1.fontSize,
+      letterSpacing: h1.letterSpacing,
+      textTransform: h1.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/h2.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H2: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h2 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h2.fontFamily,
+      fontWeight: h2.fontWeight,
+      lineHeight: h2.lineHeight,
+      fontSize: h2.fontSize,
+      letterSpacing: h2.letterSpacing,
+      textTransform: h2.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/h3.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H3: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h3 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h3.fontFamily,
+      fontWeight: h3.fontWeight,
+      lineHeight: h3.lineHeight,
+      fontSize: h3.fontSize,
+      letterSpacing: h3.letterSpacing,
+      textTransform: h3.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/h4.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H4: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h4 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h4.fontFamily,
+      fontWeight: h4.fontWeight,
+      lineHeight: h4.lineHeight,
+      fontSize: h4.fontSize,
+      letterSpacing: h4.letterSpacing,
+      textTransform: h4.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/h5.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H5: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h5 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h5.fontFamily,
+      fontWeight: h5.fontWeight,
+      lineHeight: h5.lineHeight,
+      fontSize: h5.fontSize,
+      letterSpacing: h5.letterSpacing,
+      textTransform: h5.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/h6.ts

@@ -0,0 +1,20 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const H6: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const {
+      colors: color,
+      typography: { headings: { h6 } },
+    } = theme
+    return merge({
+      color: color.text.default,
+      fontFamily: h6.fontFamily,
+      fontWeight: h6.fontWeight,
+      lineHeight: h6.lineHeight,
+      fontSize: h6.fontSize,
+      letterSpacing: h6.letterSpacing,
+      textTransform: h6.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/headings/index.ts

@@ -0,0 +1,6 @@
+export * from './h1'
+export * from './h2'
+export * from './h3'
+export * from './h4'
+export * from './h5'
+export * from './h6'

package/lib/theme/components/typography/index.ts

@@ -0,0 +1,5 @@
+export * from './headings'
+export * from './stylized'
+export * from './body'
+export * from './labels'
+export * from './numvals'

package/lib/theme/components/typography/labels/index.ts

@@ -0,0 +1 @@
+export * from './label'

package/lib/theme/components/typography/labels/label.ts

@@ -0,0 +1,71 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Label: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { sizes: sizing }, sx }) => merge({
+    color: 'inherit',
+    width: '100%',
+    maxWidth: '100%',
+    marginBottom: sizing[0],
+    marginInlineStart: sizing[0],
+    marginEnd: sizing[0],
+    marginInlineEnd: sizing[0],
+  }, sx),
+  sizes: {
+    '2xs': ({ theme, sx }) => {
+      const { tinyLabel } = theme.typography.labels
+      return merge({
+        fontFamily: tinyLabel.fontFamily,
+        fontWeight: tinyLabel.fontWeight,
+        lineHeight: tinyLabel.lineHeight,
+        fontSize: tinyLabel.fontSize,
+        letterSpacing: tinyLabel.letterSpacing,
+        textTransform: tinyLabel.textCase,
+      }, sx)
+    },
+    xs: ({ theme, sx }) => {
+      const { xsLabel } = theme.typography.labels
+      return merge({
+        fontFamily: xsLabel.fontFamily,
+        fontWeight: xsLabel.fontWeight,
+        lineHeight: xsLabel.lineHeight,
+        fontSize: xsLabel.fontSize,
+        letterSpacing: xsLabel.letterSpacing,
+        textTransform: xsLabel.textCase,
+      }, sx)
+    },
+    sm: ({ theme, sx }) => {
+      const { smLabel } = theme.typography.labels
+      return merge({
+        fontFamily: smLabel.fontFamily,
+        fontWeight: smLabel.fontWeight,
+        lineHeight: smLabel.lineHeight,
+        fontSize: smLabel.fontSize,
+        letterSpacing: smLabel.letterSpacing,
+        textTransform: smLabel.textCase,
+      }, sx)
+    },
+    md: ({ theme, sx }) => {
+      const { mdLabel } = theme.typography.labels
+      return merge({
+        fontFamily: mdLabel.fontFamily,
+        fontWeight: mdLabel.fontWeight,
+        lineHeight: mdLabel.lineHeight,
+        fontSize: mdLabel.fontSize,
+        letterSpacing: mdLabel.letterSpacing,
+        textTransform: mdLabel.textCase,
+      }, sx)
+    },
+    lg: ({ theme, sx }) => {
+      const { lgLabel } = theme.typography.labels
+      return merge({
+        fontFamily: lgLabel.fontFamily,
+        fontWeight: lgLabel.fontWeight,
+        lineHeight: lgLabel.lineHeight,
+        fontSize: lgLabel.fontSize,
+        letterSpacing: lgLabel.letterSpacing,
+        textTransform: lgLabel.textCase,
+      }, sx)
+    },
+  },
+}

package/lib/theme/components/typography/numvals/index.ts

@@ -0,0 +1 @@
+export * from './numval'