@northlight/ui 2.41.0 → 2.41.1

package/lib/theme/components/flip-button/index.ts

@@ -0,0 +1,167 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const FlipButton: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'button', 'buttonIcon' ],
+  sizes: {
+    xs: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      button: {
+        height: sizing['flip-button'].xs,
+        minWidth: sizing['flip-button'].xs,
+        paddingInlineStart: spacing['padding-inline']['flip-button'].xs,
+        paddingInlineEnd: spacing['padding-inline']['flip-button'].xs,
+        fontSize: 'xs',
+      },
+      buttonIcon: {
+        boxSize: sizing.icon.xs,
+      },
+    }),
+    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      button: {
+        height: sizing['flip-button'].sm,
+        minWidth: sizing['flip-button'].sm,
+        paddingInlineStart: spacing['padding-inline']['flip-button'].md,
+        paddingInlineEnd: spacing['padding-inline']['flip-button'].md,
+        fontSize: 'sm',
+        buttonIcon: {
+          boxSize: sizing.icon.sm,
+        },
+      },
+    }),
+    md: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      button: {
+        height: sizing['flip-button'].md,
+        minWidth: sizing['flip-button'].md,
+        paddingInlineStart: spacing['padding-inline']['flip-button'].md,
+        paddingInlineEnd: spacing['padding-inline']['flip-button'].md,
+        fontSize: 'md',
+        buttonIcon: {
+          boxSize: sizing.icon.md,
+        },
+      },
+    }),
+    lg: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      button: {
+        height: sizing['flip-button'].lg,
+        minWidth: sizing['flip-button'].lg,
+        paddingInlineStart: spacing['padding-inline']['flip-button'].lg,
+        paddingInlineEnd: spacing['padding-inline']['flip-button'].lg,
+        fontSize: 'lg',
+        buttonIcon: {
+          boxSize: sizing.icon.lg,
+        },
+      },
+    }),
+  },
+  baseStyle: ({ theme: {
+    space: spacing,
+    sizes: sizing,
+    colors: color,
+    opacity,
+    radii: borderRadius,
+    fontWeights: coreFontWeight,
+  }, numberOfButtons }) => ({
+    container: {
+      borderRadius: borderRadius['flip-button'].default,
+      paddingInlineStart: spacing['padding-inline']['flip-button-group'].default,
+      paddingInlineEnd: spacing['padding-inline']['flip-button-group'].default,
+      paddingY: spacing.paddingY['flip-button-group'].default,
+      disply: 'grid',
+      width: '100%',
+      gap: spacing['padding-inline']['flip-button'].gap,
+      gridTemplateColumns: `repeat(${numberOfButtons}, minmax(${sizing[32]}, 1fr))`,
+      gridTemplateRows: '1fr',
+      overflowX: 'auto',
+    },
+    button: {
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: color.text['flip-button'].default,
+      cursor: 'pointer',
+      borderRadius: borderRadius['flip-button'].default,
+      fontWeight: coreFontWeight.semiBold,
+      _disabled: {
+        opacity: opacity['flip-button'].disabled,
+      },
+      _checked: {
+        color: color.text['flip-button'].inverted,
+      },
+    },
+  }),
+  variants: {
+    default: ({ theme: { colors: color }, sx }) => ({
+      container: merge({
+        bgColor: color.background['flip-button']['default-deselected-blue'],
+      }, sx),
+      button: {
+        bgColor: color.background['flip-button']['default-deselected-blue'],
+        _hover: {
+          bgColor: color.background['flip-button']['hover-deselected-blue'],
+        },
+        _checked: {
+          bgColor: color.background['flip-button']['default-selected-blue'],
+          _hover: {
+            bgColor: color.background['flip-button']['default-selected-blue'],
+          },
+        },
+      },
+    }),
+    brand: ({ theme: { colors: color }, sx }) => ({
+      container: merge({
+        bgColor: color.background['flip-button']['default-deselected-brand'],
+      }, sx),
+      button: {
+        bgColor: color.background['flip-button']['default-deselected-brand'],
+        _hover: {
+          bgColor: color.background['flip-button']['hover-deselected-brand'],
+        },
+        _checked: {
+          bgColor: color.background['flip-button']['default-selected-brand'],
+          _hover: {
+            bgColor: color.background['flip-button']['default-selected-brand'],
+          },
+        },
+      },
+    }),
+    light: ({ theme: { colors: color }, sx }) => ({
+      container: merge({
+        bgColor: color['base-alt'],
+      }, sx),
+      button: {
+        bgColor: 'mono.transparent',
+        _hover: {
+          bgColor: color.background.button['ghost-hover'],
+        },
+        _checked: {
+          color: color.text['flip-button'].default,
+          bgColor: 'bg.base',
+          _hover: {
+            bgColor: 'bg.base',
+          },
+        },
+      },
+    }),
+    ai: ({ theme: { colors: color }, sx }) => ({
+      container: merge({
+        bgColor: color.background['flip-button']['default-deselected-brand'],
+      }, sx),
+      button: {
+        bgColor: 'transparent',
+        _hover: {
+          bgColor: 'transparent',
+        },
+        _checked: {
+          bgColor: color.bg.ai.default,
+          _hover: {
+            bgColor: color.bg.ai.default,
+          },
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    size: 'md',
+    variant: 'default',
+  },
+}

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

@@ -0,0 +1,22 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const Icon: ComponentSingleStyleConfig = {
+  sizes: {
+    xs: {
+      boxSize: 'icon.xs',
+    },
+    sm: {
+      boxSize: 'icon.sm',
+    },
+    md: {
+      boxSize: 'icon.md',
+    },
+    lg: {
+      boxSize: 'icon.lg',
+    },
+  },
+  baseStyle: ({ boxSize, color }) => ({
+    boxSize: boxSize || 'icon.default',
+    color: color || 'inherit',
+  }),
+}

package/lib/theme/components/index.ts

@@ -0,0 +1,40 @@
+export * from './breadcrumb'
+export * from './button'
+export * from './blinker'
+export * from './checkbox'
+export * from './input'
+export * from './pin-input'
+export * from './select'
+export * from './radio'
+export * from './tabs'
+export * from './textarea'
+export * from './link'
+export * from './switch'
+export * from './tag'
+export * from './alert'
+export * from './number-input'
+export * from './notification-icon-button'
+export * from './calendar'
+export * from './drag-and-drop'
+export * from './date-picker'
+export * from './flip-button'
+export * from './spinner'
+export * from './avatar'
+export * from './close-button'
+export * from './modal'
+export * from './tooltip'
+export * from './icon'
+export * from './clipboard-input'
+export * from './color-picker'
+export * from './steps'
+export * from './typography'
+export * from './split-pane'
+export * from './carousel'
+export * from './editable-text'
+export * from './toolbox'
+export * from './file-picker'
+export * from './table'
+export * from './menu'
+export * from './badge'
+export * from './popover'
+export * from './progress-bar'

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

@@ -0,0 +1,223 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Input: ComponentMultiStyleConfig = {
+  parts: [ 'field', 'addon' ],
+  baseStyle: ({ theme: { colors: color } }) => ({
+    field: {
+      color: color.text.default,
+      _placeholder: {
+        color: color.text.input.placeholder,
+        opacity: 1,
+      },
+    },
+  }),
+  variants: {
+    outline: ({ theme: {
+      colors: color,
+      space: spacing,
+      radii: borderRadius,
+      borders: borderWidth,
+      opacity,
+    } }) => ({
+      field: {
+        paddingInlineStart: spacing['padding-inline'].input.default,
+        paddingInlineEnd: spacing['padding-inline'].input.default,
+        bgColor: color.background.input['outline-default'],
+        borderRadius: borderRadius.input.outline,
+        borderWidth: borderWidth.input.default,
+        borderColor: color.border.input.default,
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+          },
+          _hover: {
+            borderColor: color.border.input.readonly,
+          },
+        },
+        _focusVisible: {
+          bgColor: color.background.input['outline-focus'],
+          borderColor: color.border.input.focus,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
+          _invalid: {
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+            bgColor: color.background.input['outline-error'],
+            borderColor: color.border.input.error,
+          },
+        },
+        _hover: {
+          bgColor: color.background.input['outline-hover'],
+          borderColor: color.border.input['default-hover'],
+        },
+        _invalid: {
+          bgColor: color.background.input['outline-error'],
+          borderColor: color.border.input.error,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+        },
+        _disabled: {
+          bgColor: color.background.input['outline-disabled'],
+          borderColor: color.border.input.disabled,
+          opacity: opacity.input.disabled,
+        },
+      },
+      addon: {
+        border: 'none',
+        background: 'none',
+        color: color.text.default,
+      },
+    }),
+    filled: ({ theme: {
+      colors: color,
+      space: spacing,
+      radii: borderRadius,
+      borders: borderWidth,
+      opacity,
+    } }) => ({
+      field: {
+        paddingInlineStart: spacing['padding-inline'].input.default,
+        paddingInlineEnd: spacing['padding-inline'].input.default,
+        borderRadius: borderRadius.input.filled,
+        borderWidth: borderWidth.input.default,
+        bgColor: color.background.input['filled-default'],
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+          },
+          _hover: {
+            bgColor: color.background.input['filled-default'],
+          },
+        },
+        _hover: {
+          bgColor: color.background.input['filled-hover'],
+        },
+        _focusVisible: {
+          boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
+          borderColor: color.border.input.focus,
+          bgColor: color.background.input['filled-focus'],
+          _readOnly: {
+            bgColor: color.background.input['filled-default'],
+          },
+          _invalid: {
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+            bgColor: color.background.input['outline-error'],
+            borderColor: color.border.input.error,
+          },
+        },
+        _invalid: {
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+          bgColor: color.background.input['filled-error'],
+          borderColor: color.border.input.error,
+        },
+        _disabled: {
+          bgColor: color.background.input['filled-disabled'],
+          borderColor: color.border.input.disabled,
+          opacity: opacity.input.disabled,
+        },
+      },
+    }),
+    flushed: ({ theme: {
+      colors: color,
+      space: spacing,
+      radii: borderRadius,
+      borders: borderWidth,
+      opacity,
+    } }) => ({
+      field: {
+        paddingInlineStart: spacing['padding-inline'].input.flushed,
+        paddingInlineEnd: spacing['padding-inline'].input.flushed,
+        bgColor: color.background.input['flushed-default'],
+        borderRadius: borderRadius.input.flushed,
+        borderBottomWidth: borderWidth.input.default,
+        borderBottomColor: color.border.input.default,
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+          },
+          _hover: {
+            borderColor: color.border.input.readonly,
+          },
+        },
+        _hover: {
+          bgColor: color.background.input['flushed-hover'],
+          borderColor: color.border.input['default-hover'],
+        },
+        _focusVisible: {
+          _hover: {
+            boxShadow: `0 1px 0 0 ${color.border.input.focus}`,
+            borderColor: color.border.input.focus,
+          },
+          _invalid: {
+            boxShadow: `0 1px 0 0 ${color.border.input.error}`,
+            borderColor: color.border.input.error,
+            bgColor: color.background.input['flushed-error'],
+          },
+        },
+        _invalid: {
+          _hover: {
+            boxShadow: `0 1px 0 0 ${color.border.input.error}`,
+            borderColor: color.border.input.error,
+          },
+          bgColor: color.background.input['flushed-error'],
+        },
+        _disabled: {
+          bgColor: color.background.input['flushed-disabled'],
+          borderColor: color.border.input.disabled,
+          opacity: opacity.input.disabled,
+        },
+      },
+    }),
+    ai: ({ theme: {
+      colors: color,
+      space: spacing,
+      radii: borderRadius,
+      borders: borderWidth,
+      opacity,
+    } }) => ({
+      field: {
+        paddingInlineStart: spacing['padding-inline'].input.default,
+        paddingInlineEnd: spacing['padding-inline'].input.default,
+        bgColor: color.background.input['outline-default'],
+        borderRadius: borderRadius.input.outline,
+        borderWidth: borderWidth.input.default,
+        borderColor: color.border.input.default,
+        _readOnly: {
+          _focusVisible: {
+            borderColor: color.border.input.readonly,
+          },
+          _hover: {
+            borderColor: color.border.input.readonly,
+          },
+        },
+        _focusVisible: {
+          bgColor: color.background.input['outline-focus'],
+          _hover: {
+            boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
+            borderColor: color.border.ai,
+          },
+          _invalid: {
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+            bgColor: color.background.input['outline-error'],
+            borderColor: color.border.input.error,
+          },
+        },
+        _hover: {
+          bgColor: color.background.input['outline-hover'],
+          borderColor: color.border.input['default-hover'],
+        },
+        _invalid: {
+          bgColor: color.background.input['outline-error'],
+          borderColor: color.border.input.error,
+        },
+        _disabled: {
+          bgColor: color.background.input['outline-disabled'],
+          borderColor: color.border.input.disabled,
+          opacity: opacity.input.disabled,
+        },
+      },
+      addon: {
+        border: 'none',
+        background: 'none',
+        color: color.text.default,
+      },
+    }),
+  },
+}

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

@@ -0,0 +1,16 @@
+import {
+  ComponentSingleStyleConfig,
+} from '@chakra-ui/react'
+
+export const Link: ComponentSingleStyleConfig = {
+  baseStyle: ({ colorScheme }) => ({
+    _focus: {
+      ring: '2px',
+      ringColor: `${colorScheme}.100`,
+      ringOffset: '1px',
+    },
+  }),
+  defaultProps: {
+    colorScheme: 'mediatoolBlue',
+  },
+}

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

@@ -0,0 +1,50 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Menu: ComponentMultiStyleConfig = {
+  parts: [ 'list', 'item' ],
+  baseStyle: ({ theme: {
+    colors: color,
+    radii: borderRadius,
+  } }) => ({
+    menu: {
+      borderColor: color.border.default,
+    },
+    list: {
+      px: '2',
+      bgColor: color.bg.base,
+    },
+    item: {
+      py: '2',
+      color: color.text.default,
+      borderRadius: borderRadius.select.default,
+      bgColor: color.bg.base,
+      _hover: {
+        bgColor: color.background.button.default,
+      },
+      _active: {
+        bgColor: color.background.button.default,
+      },
+      _focus: {
+        bgColor: color.background.button.default,
+      },
+      _checked: {
+        fontWeight: 'bold',
+      },
+    },
+  }),
+  variants: {
+    compact: ({ theme: { colors: color } }) => ({
+      item: {
+        fontSize: 'sm',
+        color: color.text.default,
+      },
+    }),
+    relaxed: ({ theme: { colors: color } }) => ({
+      item: {
+        py: '2',
+        fontSize: 'md',
+        color: color.text.default,
+      },
+    }),
+  },
+}

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

@@ -0,0 +1,49 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Modal: ComponentMultiStyleConfig = {
+  parts: [ 'overlay', 'closeButton', 'dialog' ],
+  sizes: {
+    huge: {
+      dialog: {
+        width: '90%',
+        maxW: '96rem',
+        aspectRatio: '16/9',
+      },
+    },
+  },
+  baseStyle: ({ theme }) => {
+    const {
+      typography: { headings: { h4 } },
+    } = theme
+    return ({
+      overlay: {
+        bgColor: 'background.modal.overlay',
+        backdropFilter: 'blur(8px)',
+      },
+      closeButton: {
+        top: 4,
+        right: 4,
+      },
+      dialog: {
+        bgColor: 'background.default',
+        borderRadius: 'modal.dialog',
+      },
+      header: {
+        fontSize: h4.fontSize,
+        paddingTop: 'paddingTop.modal.header',
+        paddingBottom: 'paddingBottom.modal.header',
+        border: 'modal.header',
+        borderBottomColor: 'border.modal.header',
+        borderBottomStyle: 'solid',
+      },
+      body: {
+        paddingTop: 'paddingTop.modal.body',
+        paddingBottom: 'paddingBottom.modal.body',
+      },
+      footer: {
+        paddingTop: 'paddingTop.modal.footer',
+        paddingBottom: 'paddingBottom.modal.footer',
+      },
+    })
+  },
+}

package/lib/theme/components/notification-icon-button/index.ts

@@ -0,0 +1,52 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const NotificationIconButton: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'notifier' ],
+  sizes: {
+    xs: {
+      notifier: {
+        top: '0.5',
+        right: '0.5',
+      },
+    },
+    sm: {
+      notifier: {
+        top: '0.5',
+        right: '0.5',
+      },
+    },
+    md: {
+      notifier: {
+        top: '1',
+        right: '1',
+      },
+    },
+    lg: {
+      notifier: {
+        top: '2',
+        right: '2',
+      },
+    },
+  },
+  variants: {
+    link: {
+      notifier: {
+        position: 'absolute',
+        top: '0',
+        right: '0',
+        zIndex: 'base',
+      },
+    },
+  },
+  baseStyle: () => ({
+    container: {
+      position: 'relative',
+    },
+    notifier: {
+      position: 'absolute',
+      top: '1',
+      right: '1',
+      zIndex: 'base',
+    },
+  }),
+}