refactor: rename "variables" to "tokens"

Update the API to match @dash-ui/styles@>=0.8.0

BREAKING CHANGE: Drops support for @dash-ui/styles@<0.8.0

README.md

@@ -41,7 +41,7 @@ A library for creating CSS transitions with [**dash-ui**](https://github.com/das
 import {styles} from '@dash-ui/styles'
 import transition from '@dash-ui/transition'
 
-styles.insertVariables({
+styles.insertTokens({
   transition: {
     duration: {
       slow: '1s',
@@ -54,7 +54,7 @@ const fade = transition(styles, {
   default: {
     duration: 100,
   },
-  // Use a callback to access variables
+  // Use a callback to access tokens
   in: ({transition}) => ({
     opacity: 1,
     duration: transition.duration.slow,

package.json

@@ -117,7 +117,7 @@
     "@commitlint/cli": "^9.0.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@dash-ui/jest": "^2.0.0",
-    "@dash-ui/styles": "^0.7.0",
+    "@dash-ui/styles": "^0.8.0",
     "@types/jest": "latest",
     "babel-jest": "latest",
     "cz-conventional-changelog": "^3.2.0",
@@ -133,6 +133,6 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@dash-ui/styles": ">=0.6.2"
+    "@dash-ui/styles": ">=0.8.0"
   }
 }

src/index.test.ts

@@ -261,14 +261,14 @@ describe('transition()', () => {
   })
 
   it('should create default phase with a function', () => {
-    type Variables = {
+    type Tokens = {
       duration: {
         slow: 1000
       }
     }
 
-    const myStyles = createStyles<Variables>()
-    myStyles.insertVariables({
+    const myStyles = createStyles<Tokens>()
+    myStyles.insertTokens({
       duration: {
         slow: 1000,
       },
@@ -289,14 +289,14 @@ describe('transition()', () => {
   })
 
   it('should create phase with a function', () => {
-    type Variables = {
+    type Tokens = {
       duration: {
         slow: 1000
       }
     }
 
-    const myStyles = createStyles<Variables>()
-    myStyles.insertVariables({
+    const myStyles = createStyles<Tokens>()
+    myStyles.insertTokens({
       duration: {
         slow: 1000,
       },

src/index.ts

@@ -1,14 +1,14 @@
 /* eslint-disable prefer-const */
-import type {Styles, StyleObject, DashVariables} from '@dash-ui/styles'
+import type {Styles, StyleObject, DashTokens} from '@dash-ui/styles'
 
 const transition = <
   TransitionNames extends string,
-  Variables extends DashVariables = DashVariables
+  Tokens extends DashTokens = DashTokens
 >(
-  styles: Styles<Variables>,
-  transitions: TransitionMap<TransitionNames, Variables>
-): Transitioner<TransitionNames, Variables> => {
-  const transitioner: Transitioner<TransitionNames, Variables> = (...args) =>
+  styles: Styles<Tokens>,
+  transitions: TransitionMap<TransitionNames, Tokens>
+): Transitioner<TransitionNames, Tokens> => {
+  const transitioner: Transitioner<TransitionNames, Tokens> = (...args) =>
     styles.one(createTransitionsFromArgs(styles, transitions, args))()
 
   transitioner.css = (...names) =>
@@ -24,10 +24,10 @@ const transition = <
 
 const createTransitions = <
   TransitionNames extends string,
-  Variables extends DashVariables = DashVariables
+  Tokens extends DashTokens = DashTokens
 >(
-  styles: Styles<Variables>,
-  transitionMap: TransitionMap<TransitionNames, DashVariables>,
+  styles: Styles<Tokens>,
+  transitionMap: TransitionMap<TransitionNames, DashTokens>,
   styleName?: string | TransitionObject
 ): StyleObject => {
   const styleMap: StyleObject = {}
@@ -40,7 +40,7 @@ const createTransitions = <
   if (transitionMap.default !== void 0) {
     transitions.push('default')
     let defs = transitionMap.default
-    if (typeof defs === 'function') defs = defs(styles.variables)
+    if (typeof defs === 'function') defs = defs(styles.tokens)
     duration = unit(defs.duration, 'ms')
     delay = unit(defs.delay, 'ms')
     timing = defs.timing
@@ -61,7 +61,7 @@ const createTransitions = <
   for (let i = 0; i < transitions.length; i++) {
     const name = transitions[i] as TransitionNames
     let phase = transitionMap[name]
-    if (typeof phase === 'function') phase = phase(styles.variables)
+    if (typeof phase === 'function') phase = phase(styles.tokens)
 
     let {
       duration: phaseDuration,
@@ -160,10 +160,10 @@ const createTransitions = <
 
 const createTransitionsFromArgs = <
   TransitionNames extends string,
-  Variables extends DashVariables = DashVariables
+  Tokens extends DashTokens = DashTokens
 >(
-  styles: Styles<Variables>,
-  transitionMap: TransitionMap<TransitionNames, typeof styles.variables>,
+  styles: Styles<Tokens>,
+  transitionMap: TransitionMap<TransitionNames, typeof styles.tokens>,
   args: (string | TransitionObject<TransitionNames>)[]
 ): StyleObject => {
   if (args.length > 1) {
@@ -175,13 +175,13 @@ const createTransitionsFromArgs = <
       else if (typeof arg === 'object') Object.assign(argMap, arg)
     }
 
-    return createTransitions<TransitionNames, Variables>(
+    return createTransitions<TransitionNames, Tokens>(
       styles,
       transitionMap,
       argMap
     )
   } else {
-    return createTransitions<TransitionNames, Variables>(
+    return createTransitions<TransitionNames, Tokens>(
       styles,
       transitionMap,
       args[0]
@@ -225,7 +225,7 @@ export default transition
 
 export interface Transitioner<
   TransitionNames extends string,
-  Variables extends DashVariables = DashVariables
+  Tokens extends DashTokens = DashTokens
 > {
   (...args: (TransitionNames | TransitionObject<TransitionNames>)[]): string
   css: (
@@ -234,7 +234,7 @@ export interface Transitioner<
   style: (
     ...names: (TransitionNames | TransitionObject<TransitionNames>)[]
   ) => StyleObject
-  transitions: TransitionMap<TransitionNames, Variables>
+  transitions: TransitionMap<TransitionNames, Tokens>
 }
 
 export interface TransitionPhase {
@@ -247,14 +247,14 @@ export interface TransitionPhase {
 
 export type TransitionMap<
   TransitionNames extends string,
-  Variables extends DashVariables = DashVariables
+  Tokens extends DashTokens = DashTokens
 > = {
-  [Name in TransitionNames | 'default']?: TransitionValue<Variables>
+  [Name in TransitionNames | 'default']?: TransitionValue<Tokens>
 }
 
-export type TransitionValue<Variables extends DashVariables = DashVariables> =
+export type TransitionValue<Tokens extends DashTokens = DashTokens> =
   | TransitionPhase
-  | ((variables: Variables) => TransitionPhase)
+  | ((tokens: Tokens) => TransitionPhase)
 
 type TransitionObject<TransitionNames extends string = string> = {
   [Name in TransitionNames]?: boolean | null | undefined | string | number

yarn.lock

@@ -1164,10 +1164,10 @@
     chalk "^4.0.0"
     css "^2.2.4"
 
-"@dash-ui/styles@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@dash-ui/styles/-/styles-0.7.0.tgz#a1801c4639e205fb83e95dfed9ba0e2dcba29b62"
-  integrity sha512-M8ZA4xiack4p+2n18W+xP+LNXVOvhv/5MOhte3pYkTvzuPlmiLm6RDUkkSUEfJ+FdPfJbOqDriHhOwpBqU9FQg==
+"@dash-ui/styles@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@dash-ui/styles/-/styles-0.8.0.tgz#86a2a0bb9e843d09c4ca3bd0594469de297c4cf1"
+  integrity sha512-0q9JMJ87mzttEzpTVBBWyxIPg3lTKs/xFcRbB3pRsdyaKF+qUlIyRrr9cnwD8yVap7i7vR46S2ZL9eN8zeo/7w==
   dependencies:
     "@dash-ui/stylis" "^1.0.5"
     "@dash-ui/unitless" "^2.0.0"