@bettercms-ai/kit 0.1.1 → 2.0.0

package/src/core/styles/input/textInputStyle.ts

@@ -1,263 +0,0 @@
-import {CSSObject, getTheme_v2, ThemeColorSchemeKey, ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
-import {css} from 'styled-components'
-
-import {CardTone} from '../../types'
-import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
-import {_responsive, rem} from '../helpers'
-import {ThemeProps} from '../types'
-
-/**
- * @internal
- */
-export interface TextInputInputStyleProps {
-  $fontSize: number[]
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
-  $weight?: ThemeFontWeightKey
-}
-
-/**
- * @internal
- */
-export interface TextInputRepresentationStyleProps {
-  $hasPrefix?: boolean
-  $hasSuffix?: boolean
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
-  $unstableDisableFocusRing?: boolean
-}
-
-const ROOT_STYLE = css`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  align-items: center;
-`
-
-export function textInputRootStyle(): ReturnType<typeof css> {
-  return ROOT_STYLE
-}
-
-export function textInputBaseStyle(
-  props: TextInputInputStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$scheme, $tone, $weight} = props
-  const {color, font} = getTheme_v2(props.theme)
-
-  return css`
-    appearance: none;
-    background: none;
-    border: 0;
-    border-radius: 0;
-    outline: none;
-    width: 100%;
-    box-sizing: border-box;
-    font-family: ${font.text.family};
-    font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular};
-    margin: 0;
-    position: relative;
-    z-index: 1;
-    display: block;
-
-    /* NOTE: This is a hack to disable Chrome’s autofill styles */
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--input-fg-color) !important;
-      transition: background-color 5000s;
-      transition-delay: 86400s /* 24h */;
-    }
-
-    /* &:is(textarea) */
-    &[data-as='textarea'] {
-      resize: none;
-    }
-
-    color: var(--input-fg-color);
-
-    &::placeholder {
-      color: var(--input-placeholder-color);
-    }
-
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --input-fg-color: ${color.input.default.enabled.fg};
-      --input-placeholder-color: ${color.input.default.enabled.placeholder};
-
-      /* enabled */
-      &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.input.default.enabled.fg};
-        --input-placeholder-color: ${color.input.default.enabled.placeholder};
-      }
-
-      /* disabled */
-      &:not(:invalid):disabled {
-        --input-fg-color: ${color.input.default.disabled.fg};
-        --input-placeholder-color: ${color.input.default.disabled.placeholder};
-      }
-
-      /* invalid */
-      &:invalid {
-        --input-fg-color: ${color.input.invalid.enabled.fg};
-        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
-      }
-
-      /* readOnly */
-      &:read-only {
-        --input-fg-color: ${color.input.default.readOnly.fg};
-        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
-      }
-    }
-  `
-}
-
-export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
-  const {font, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$fontSize, (sizeIndex) => {
-    const size = font.text.sizes[sizeIndex] || font.text.sizes[2]
-
-    return {
-      fontSize: rem(size.fontSize),
-      lineHeight: `${size.lineHeight / size.fontSize}`,
-    }
-  })
-}
-
-export function textInputRepresentationStyle(
-  props: TextInputRepresentationStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    --input-box-shadow: none;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: block;
-    pointer-events: none;
-    z-index: 0;
-
-    background-color: var(--card-bg-color);
-    box-shadow: var(--input-box-shadow);
-
-    border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.input.default.enabled.bg};
-      --card-fg-color: ${color.input.default.enabled.fg};
-
-      /* enabled */
-      *:not(:disabled) + &[data-border] {
-        --input-box-shadow: ${focusRingBorderStyle({
-          color: color.input.default.enabled.border,
-          width: input.border.width,
-        })};
-      }
-
-      /* invalid */
-      *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.input.invalid.enabled.bg};
-        --card-fg-color: ${color.input.invalid.enabled.fg};
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.input.invalid.enabled.border,
-            width: input.border.width,
-          })};
-        }
-      }
-
-      /* focused */
-      *:not(:disabled):focus + & {
-        &[data-border] {
-          --input-box-shadow: ${$unstableDisableFocusRing
-            ? undefined
-            : focusRingStyle({
-                border: {color: color.input.default.enabled.border, width: input.border.width},
-                focusRing: input.text.focusRing,
-              })};
-        }
-
-        &:not([data-border]) {
-          --input-box-shadow: ${$unstableDisableFocusRing
-            ? undefined
-            : focusRingStyle({focusRing: input.text.focusRing})};
-        }
-      }
-
-      /* disabled */
-      *:not(:invalid):disabled + & {
-        --card-bg-color: ${color.input.default.disabled.bg} !important;
-        --card-fg-color: ${color.input.default.disabled.fg} !important;
-        --card-icon-color: ${color.input.default.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.input.default.disabled.border,
-            width: input.border.width,
-          })};
-        }
-      }
-
-      *:invalid:disabled + & {
-        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.input.invalid.disabled.border,
-            width: input.border.width,
-          })};
-        }
-      }
-
-      /* readOnly */
-      *:not(:invalid):read-only + & {
-        --card-bg-color: ${color.input.default.readOnly.bg} !important;
-        --card-fg-color: ${color.input.default.readOnly.fg} !important;
-      }
-
-      *:invalid:read-only + & {
-        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-      }
-
-      /* hovered */
-      @media (hover: hover) {
-        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.input.default.hovered.bg};
-          --card-fg-color: ${color.input.default.hovered.fg};
-        }
-
-        *:invalid:not(:disabled):not(:read-only):hover + & {
-          --card-bg-color: ${color.input.invalid.hovered.bg};
-          --card-fg-color: ${color.input.invalid.hovered.fg};
-        }
-
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.input.default.hovered.border,
-            width: input.border.width,
-          })};
-        }
-
-        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.input.invalid.hovered.border,
-            width: input.border.width,
-          })};
-        }
-      }
-    }
-  `
-}

package/src/core/styles/internal.ts

@@ -1,12 +0,0 @@
-// Not yet ready to be exposed
-export * from './border'
-export * from './box'
-export * from './flex'
-export * from './focusRing'
-export * from './font'
-export * from './grid'
-export * from './input'
-export * from './margin'
-export * from './padding'
-export * from './radius'
-export * from './shadow'

package/src/core/styles/margin/index.ts

@@ -1,2 +0,0 @@
-export * from './marginStyle'
-export * from './types'

package/src/core/styles/margin/marginStyle.ts

@@ -1,21 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-import {_getResponsiveSpace} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveMarginStyleProps} from './types'
-
-export function responsiveMarginStyle(
-  props: ResponsiveMarginStyleProps & ThemeProps,
-): CSSObject[][] {
-  const {theme} = props
-
-  return [
-    _getResponsiveSpace(theme, ['margin'], props.$margin),
-    _getResponsiveSpace(theme, ['marginLeft', 'marginRight'], props.$marginX),
-    _getResponsiveSpace(theme, ['marginTop', 'marginBottom'], props.$marginY),
-    _getResponsiveSpace(theme, ['marginTop'], props.$marginTop),
-    _getResponsiveSpace(theme, ['marginRight'], props.$marginRight),
-    _getResponsiveSpace(theme, ['marginBottom'], props.$marginBottom),
-    _getResponsiveSpace(theme, ['marginLeft'], props.$marginLeft),
-  ].filter(Boolean) as CSSObject[][]
-}

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,33 +0,0 @@
-/** @jest-environment jsdom */
-
-import {buildTheme, getScopedTheme} from '@bettercms-ai/kit/theme'
-
-import {responsiveMarginStyle} from './marginStyle'
-
-const theme = getScopedTheme(buildTheme(), 'light', 'default')
-
-describe('styles/margin', () => {
-  it('should 1', () => {
-    const styles = responsiveMarginStyle({$margin: [0], theme})
-
-    expect(styles).toEqual([[{margin: 0}]])
-  })
-
-  it('should 2', () => {
-    const styles = responsiveMarginStyle({$margin: [0, 1, 2], theme})
-
-    expect(styles).toEqual([
-      [
-        {
-          margin: 0,
-        },
-        {
-          '@media screen and (min-width: 360px)': {margin: '0.25rem'},
-        },
-        {
-          '@media screen and (min-width: 600px)': {margin: '0.5rem'},
-        },
-      ],
-    ])
-  })
-})

package/src/core/styles/margin/types.ts

@@ -1,9 +0,0 @@
-export interface ResponsiveMarginStyleProps {
-  $margin?: number[]
-  $marginX?: number[]
-  $marginY?: number[]
-  $marginTop?: number[]
-  $marginRight?: number[]
-  $marginBottom?: number[]
-  $marginLeft?: number[]
-}

package/src/core/styles/padding/index.ts

@@ -1,2 +0,0 @@
-export * from './paddingStyle'
-export * from './types'

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,33 +0,0 @@
-/** @jest-environment jsdom */
-
-import {buildTheme, getScopedTheme} from '@bettercms-ai/kit/theme'
-
-import {responsivePaddingStyle} from './paddingStyle'
-
-const theme = getScopedTheme(buildTheme(), 'light', 'default')
-
-describe('styles/padding', () => {
-  it('should 1', () => {
-    const styles = responsivePaddingStyle({$padding: [0], theme})
-
-    expect(styles).toEqual([[{padding: 0}]])
-  })
-
-  it('should 2', () => {
-    const styles = responsivePaddingStyle({$padding: [0, 1, 2], theme})
-
-    expect(styles).toEqual([
-      [
-        {
-          padding: 0,
-        },
-        {
-          '@media screen and (min-width: 360px)': {padding: '0.25rem'},
-        },
-        {
-          '@media screen and (min-width: 600px)': {padding: '0.5rem'},
-        },
-      ],
-    ])
-  })
-})

package/src/core/styles/padding/paddingStyle.ts

@@ -1,21 +0,0 @@
-import {CSSObject} from '@bettercms-ai/kit/theme'
-
-import {_getResponsiveSpace} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsivePaddingStyleProps} from './types'
-
-export function responsivePaddingStyle(
-  props: ResponsivePaddingStyleProps & ThemeProps,
-): CSSObject[][] {
-  const {theme} = props
-
-  return [
-    _getResponsiveSpace(theme, ['padding'], props.$padding),
-    _getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
-    _getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
-    _getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
-    _getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
-    _getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
-    _getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
-  ].filter(Boolean) as CSSObject[][]
-}

package/src/core/styles/padding/types.ts

@@ -1,12 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsivePaddingStyleProps {
-  $padding?: number[]
-  $paddingX?: number[]
-  $paddingY?: number[]
-  $paddingTop?: number[]
-  $paddingRight?: number[]
-  $paddingBottom?: number[]
-  $paddingLeft?: number[]
-}

package/src/core/styles/radius/index.ts

@@ -1,2 +0,0 @@
-export * from './radiusStyle'
-export * from './types'

package/src/core/styles/radius/radiusStyle.ts

@@ -1,23 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveRadiusStyleProps} from './types'
-
-export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {media, radius} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$radius, (value) => {
-    let borderRadius: string | 0 = 0
-
-    if (typeof value === 'number') {
-      borderRadius = rem(radius[value])
-    }
-
-    if (value === 'full') {
-      borderRadius = '9999px'
-    }
-
-    return {borderRadius}
-  })
-}

package/src/core/styles/radius/types.ts

@@ -1,8 +0,0 @@
-import {Radius} from '../../types'
-
-/**
- * @internal
- */
-export interface ResponsiveRadiusStyleProps {
-  $radius: Radius[]
-}

package/src/core/styles/shadow/index.ts

@@ -1,2 +0,0 @@
-export * from './shadowStyle'
-export * from './types'

package/src/core/styles/shadow/shadowStyle.ts

@@ -1,29 +0,0 @@
-import {CSSObject, getTheme_v2, ThemeBoxShadow, ThemeShadow} from '@bettercms-ai/kit/theme'
-
-import {EMPTY_RECORD} from '../../constants'
-import {_responsive, rem} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveShadowStyleProps} from './types'
-
-function toBoxShadow(shadow: ThemeBoxShadow, color: string) {
-  return `${shadow.map(rem).join(' ')} ${color}`
-}
-
-function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSObject {
-  if (!shadow) return EMPTY_RECORD
-
-  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`
-  const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)')
-  const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)')
-  const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)')
-
-  return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
-}
-
-export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
-  const {card, media, shadow} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$shadow, (index) =>
-    shadowStyle(shadow[index], card.shadow.outline),
-  )
-}

package/src/core/styles/shadow/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveShadowStyleProps {
-  $shadow: number[]
-}

package/src/core/styles/types.ts

@@ -1,8 +0,0 @@
-import {Theme} from '@bettercms-ai/kit/theme'
-
-/**
- * @internal
- */
-export interface ThemeProps {
-  theme: Theme
-}