@hakuna-matata-ui/styled-system/src/create-theme-vars/theme-tokens.ts

Style function for css-in-js building component libraries

import { Dict, pick } from "@hakuna-matata-ui/utils"

const tokens = [
  "colors",
  "borders",
  "borderWidths",
  "borderStyles",
  "fonts",
  "fontSizes",
  "fontWeights",
  "letterSpacings",
  "lineHeights",
  "radii",
  "space",
  "shadows",
  "sizes",
  "zIndices",
  "transition",
  "blur",
] as const

export type ThemeScale =
  | typeof tokens[number]
  | "transition.duration"
  | "transition.property"
  | "transition.easing"

export function extractTokens(theme: Dict) {
  const _tokens = tokens as unknown as string[]
  return pick(theme, _tokens)
}

export function omitVars(rawTheme: Dict) {
  const { __cssMap, __cssVars, __breakpoints, ...cleanTheme } = rawTheme
  return cleanTheme
}