@charcoal-ui/styled 3.9.1 → 3.10.1-beta.0

package/src/utils/gap.ts

@@ -0,0 +1,28 @@
+import { Spacing } from '@charcoal-ui/theme'
+import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { pxIfNum } from './helpers/pxIfNum'
+
+export function gap(v1: keyof Spacing): FlattenSimpleInterpolation
+
+export function gap(
+  v1: keyof Spacing,
+  v2: keyof Spacing
+): FlattenSimpleInterpolation
+
+export function gap(v1: keyof Spacing, v2?: keyof Spacing) {
+  return css`
+    gap: ${v1}px ${pxIfNum(v2)};
+  `
+}
+
+export function rowGap(v: keyof Spacing) {
+  return css`
+    row-gap: ${v}px;
+  `
+}
+
+export function columnGap(v: keyof Spacing) {
+  return css`
+    column-gap: ${v}px;
+  `
+}

package/src/utils/helpers/SpacingType.ts

@@ -0,0 +1,3 @@
+import { Spacing } from '@charcoal-ui/theme'
+
+export type SpacingType = keyof Spacing | 'auto'

package/src/utils/helpers/pxIfNum.ts

@@ -0,0 +1,5 @@
+export function pxIfNum(v?: number | string) {
+  if (v === undefined) return ''
+  if (typeof v === 'number') return `${v}px`
+  return v
+}

package/src/utils/margin.ts

@@ -0,0 +1,58 @@
+import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { SpacingType } from './helpers/SpacingType'
+import { pxIfNum } from './helpers/pxIfNum'
+
+export function margin(arg1: SpacingType): FlattenSimpleInterpolation
+
+export function margin(
+  arg1: SpacingType,
+  arg2: SpacingType
+): FlattenSimpleInterpolation
+
+export function margin(
+  arg1: SpacingType,
+  arg2: SpacingType,
+  arg3: SpacingType
+): FlattenSimpleInterpolation
+
+export function margin(
+  arg1: SpacingType,
+  arg2: SpacingType,
+  arg3: SpacingType,
+  arg4: SpacingType
+): FlattenSimpleInterpolation
+
+export function margin(
+  arg1: SpacingType,
+  arg2?: SpacingType,
+  arg3?: SpacingType,
+  arg4?: SpacingType
+) {
+  return css`
+    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
+  `
+}
+
+export function marginTop(v: SpacingType) {
+  return css`
+    margin-top: ${pxIfNum(v)};
+  `
+}
+
+export function marginBottom(v: SpacingType) {
+  return css`
+    margin-bottom: ${pxIfNum(v)};
+  `
+}
+
+export function marginLeft(v: SpacingType) {
+  return css`
+    margin-left: ${pxIfNum(v)};
+  `
+}
+
+export function marginRight(v: SpacingType) {
+  return css`
+    margin-right: ${pxIfNum(v)};
+  `
+}

package/src/utils/padding.ts

@@ -0,0 +1,58 @@
+import { Spacing } from '@charcoal-ui/theme'
+import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { pxIfNum } from './helpers/pxIfNum'
+
+export function padding(arg1: keyof Spacing): FlattenSimpleInterpolation
+
+export function padding(
+  arg1: keyof Spacing,
+  arg2: keyof Spacing
+): FlattenSimpleInterpolation
+
+export function padding(
+  arg1: keyof Spacing,
+  arg2: keyof Spacing,
+  arg3: keyof Spacing
+): FlattenSimpleInterpolation
+
+export function padding(
+  arg1: keyof Spacing,
+  arg2: keyof Spacing,
+  arg3: keyof Spacing,
+  arg4: keyof Spacing
+): FlattenSimpleInterpolation
+
+export function padding(
+  arg1: keyof Spacing,
+  arg2?: keyof Spacing,
+  arg3?: keyof Spacing,
+  arg4?: keyof Spacing
+) {
+  return css`
+    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
+  `
+}
+
+export function paddingTop(v: keyof Spacing) {
+  return css`
+    padding-top: ${v}px;
+  `
+}
+
+export function paddingBottom(v: keyof Spacing) {
+  return css`
+    padding-bottom: ${v}px;
+  `
+}
+
+export function paddingLeft(v: keyof Spacing) {
+  return css`
+    padding-left: ${v}px;
+  `
+}
+
+export function paddingRight(v: keyof Spacing) {
+  return css`
+    padding-right: ${v}px;
+  `
+}

package/src/utils/typographyCss.ts

@@ -0,0 +1,39 @@
+import { css } from 'styled-components'
+
+const boldCss = css`
+  font-weight: bold;
+`
+
+const removeHalfLeadingCss = css`
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+`
+
+export function typography(
+  size: 12 | 14 | 16 | 20,
+  bold = false,
+  preserveHalfLeading = false
+) {
+  const cssObj = css`
+    font-size: ${size}px;
+    line-height: ${size + 8}px;
+    display: flow-root;
+    ${bold === true && boldCss}
+    ${preserveHalfLeading !== true && removeHalfLeadingCss}
+  `
+
+  return cssObj
+}