Merge pull request #1272 from atanasster/transitions-scale

feat: add support for transitions token
system-ui · Nov 20, 2020 · a70ffdd · a70ffdd
2 parents 4861bae + fad5286
commit a70ffdd
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## v0.4.0 UNRELEASED
 
+-- Add support for transitions token. issue: #1079 
 ## v0.4.0-rc.12 2020-11-18
 
 - Use correct version of @theme-ui/components in theme-ui package.

diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
@@ -65,6 +65,7 @@ export const scales = {
   caretColor: 'colors',
   columnRuleColor: 'colors',
   opacity: 'opacities',
+  transition: 'transitions',
   margin: 'space',
   marginTop: 'space',
   marginRight: 'space',

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
@@ -619,6 +619,7 @@ export interface Theme {
   colorStyles?: Scale<ThemeUICSSProperties>
   textStyles?: Scale<ThemeUICSSProperties>
   opacities?: Scale<CSS.OpacityProperty>
+  transitions?: Scale<CSS.TransitionProperty>
 
   /**
    * Enable/disable custom CSS properties/variables if lower browser

diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
@@ -53,6 +53,9 @@ const theme: Theme = {
     small: 5,
   },
   opacities: [0, '50%'],
+  transitions: {
+    standard: '0.3s ease-in-out'
+  }
 }
 
 test('returns a function', () => {
@@ -150,6 +153,7 @@ test('handles all core styled system props', () => {
     color: 'primary',
     bg: 'secondary',
     opacity: 1,
+    transition: 'standard',
     fontFamily: 'monospace',
     lineHeight: 'body',
   })({ theme })
@@ -167,6 +171,7 @@ test('handles all core styled system props', () => {
     color: 'tomato',
     backgroundColor: 'cyan',
     opacity: '50%',
+    transition: '0.3s ease-in-out',
     fontFamily: 'Menlo, monospace',
     fontSize: 24,
     fontWeight: 600,

diff --git a/packages/docs/src/pages/sx-prop.mdx b/packages/docs/src/pages/sx-prop.mdx
@@ -53,6 +53,8 @@ Property  | Theme Key
 `letterSpacing` | `letterSpacings`
 `color` | `colors`
 `backgroundColor`, `bg` | `colors`
+`opacity` | `opacities`
+`transition` | `transitions`
 `margin`, `m` | `space`
 `marginTop`, `mt` | `space`
 `marginRight`, `mr` | `space`