@uxf/styles

Color

shade and tint

  • extend features of color2k library
  • returns HEX string with mix of provided color and specified amount of black (shade) or white (tint)
import { shade } from "@uxf/styles/colors/shade";

const darker = shade("#f00", 0.1);

import { tint } from "@uxf/styles/colors/tint";

const lighter = tint("#f00", 0.1);

Mixins

srOnly

  • returns js object with CSS to hide an element to all devices except screen readers
import { srOnly } from "@uxf/styles/mixins/sr-only";

const example = <div style={srOnly} />;

Properties

columnsToPercent

  • returns css calc() value with relative width of provided number of columns in provided total columns (defaults is 12) compensated by optionally provided gutter in pixels
import { columnsToPercent } from "@uxf/styles/properties/columns-to-percent";

const example = columnsToPercent(4, 12, 24);
/* returns "calc((100% + 1.5rem) / 12 * 4)" */

encodedSvgUrl

  • returns css url() value of an encoded version of provided svg
import { encodedSvgUrl } from "@uxf/styles/properties/encoded-svg-url";

const example = encodedSvgUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="0 20 20 0" /></svg>`);

repeatGridColumns

  • returns css repeat() value of provided number of columns and size
import { repeatGridColumns } from "@uxf/styles/properties/repeat-grid-columns";

const example = repeatGridColumns(6, "1fr"); /* returns "repeat(6, 1fr)" */

transition

  • returns css transition property for specified property or an array of properties
import { transition } from "@uxf/styles/properties/transition";

const example = transition(["color", "transform"], 400, "ease-in-out");
/* returns "color 400ms ease-in-out, transform 400 ease-in-out" */

Responsive

string media queries mqBetween, mqHiDpi, mqMax, mqMin

import { mqBetween } from "@uxf/styles/responsive/mq-between";

const example = mqBetween(320, 480)
/* returns "(min-width: 20em and (max-width: 29.9375em)" */

import { mqHiDpi } from "@uxf/styles/responsive/mq-hidpi";

const example = mqHiDpi(3)
/* returns hidpi media query string for DPR 3.0 */

window.matchMedia().matches media queries matchBetween, matchHiDpi, matchMax, matchMin

import { matchBetween } from "@uxf/styles/responsive/match-between";

const example = matchBetween(320, 480) /* returns boolean */

import { matchHiDpi } from "@uxf/styles/responsive/match-hidpi";

const example = matchHiDpi(3) /* returns boolean */

Units

em and rem

  • returns string values divided by specified amount (defaults 16)
import { em } from "@uxf/styles/units/em";

const example1 = em(320) /* returns "20em" */
const example2 = em(320, 10) /* returns "32em" */

import { rem } from "@uxf/styles/units/rem";

const example1 = rem(320) /* returns "20rem" */
const example2 = rem(320, 10) /* returns "32rem" */

emToPx and remToPx

  • parse em or rem units to pixels (as number) by specified base (defaults 16)
import { emToPx } from "@uxf/styles/units/em-to-px";

const example1 = emToPx("20em") /* 320 */
const example2 = emToPx("20em", 10) /* 200 */
const example3 = emToPx("20rem", 10) /* "20rem" */

import { remToPx } from "@uxf/styles/units/rem-to-px";

const example1 = remToPx("20rem") /* 320 */
const example2 = remToPx("20rem", 10) /* 200 */
const example3 = remToPx("20%", 10) /* "20%" */

formatCssValue

  • returns normalized css value: pass string as string or input to rem or zero as string or optionally forced input as string
import { formatCssValue } from "@uxf/styles/units/format-css-value";

const example1 = formatCssValue(0) /* returns "0" */
const example2 = formatCssValue(24) /* returns "1.5rem" */
const example3 = formatCssValue("100%") /* returns "100%" */
const example4 = formatCssValue(1, true) /* returns "1" */

percent

  • returns float of percentage of provided number in provided max value (defaults 100) with provided precision (defaults 2)
import { percent } from "@uxf/styles/units/percent";

const example = percent(54.874, 80, 2) /* returns 68.59 */

spacing

  • returns input multiplied by given factor (defaults 8)
import { spacing } from "@uxf/styles/units/spacing";

const example = spacing(4) /* returns 32 */

withUnit

  • returns literal of input with CSS unit
import { withUnit } from "@uxf/styles/units/with-unit";

const example = withUnit(80, "vh") /* returns "80vh" */

Types

  • typed css units
  • shared types for utils