feat(components): add subtle animations (#623)

* feat(components): update @sumup/design-tokens

* feat(components): add transitions to Anchor, Button, and Tag

package.json

@@ -96,7 +96,7 @@
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.2.0",
     "@storybook/source-loader": "^5.2.4",
-    "@sumup/design-tokens": "^1.0.0-alpha.3",
+    "@sumup/design-tokens": "^1.0.0-alpha.5",
     "@sumup/foundry": "^2.1.0",
     "@sumup/icons": "^1.0.0",
     "@sumup/intl": "^1.0.0",

src/components/Anchor/Anchor.tsx

@@ -48,6 +48,10 @@ const baseStyles = ({ theme }: StyleProps) => css`
   margin-left: 0;
   margin-right: 0;
   color: ${theme.colors.p700};
+  transition: opacity ${theme.transitions.default},
+    color ${theme.transitions.default},
+    background-color ${theme.transitions.default},
+    border-color ${theme.transitions.default};
 
   &:hover,
   &:active {

src/components/Anchor/__snapshots__/Anchor.spec.tsx.snap

@@ -20,6 +20,8 @@ exports[`Anchor styles should render as a \`button\` when an onClick is passed 1
   margin-left: 0;
   margin-right: 0;
   color: #1760CE;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
 }
 
 @media (min-width:480px) {
@@ -47,7 +49,7 @@ exports[`Anchor styles should render as a \`button\` when an onClick is passed 1
 .circuit-0:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 .circuit-0:focus::-moz-focus-inner {
@@ -104,6 +106,8 @@ exports[`Anchor styles should render as an \`a\` when an href (and onClick) is p
   margin-left: 0;
   margin-right: 0;
   color: #1760CE;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
 }
 
 @media (min-width:480px) {
@@ -131,7 +135,7 @@ exports[`Anchor styles should render as an \`a\` when an href (and onClick) is p
 .circuit-0:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 .circuit-0:focus::-moz-focus-inner {

src/components/Button/Button.tsx

@@ -80,7 +80,10 @@ const baseStyles = ({ theme }: StyleProps) => css`
   font-weight: ${theme.fontWeight.bold};
   border-width: ${BORDER_WIDTH};
   border-style: solid;
-  transition: opacity ${theme.transitions.default};
+  transition: opacity ${theme.transitions.default},
+    color ${theme.transitions.default},
+    background-color ${theme.transitions.default},
+    border-color ${theme.transitions.default};
 
   &:focus {
     ${focusOutline({ theme })};
@@ -160,11 +163,11 @@ const sizeStyles = ({ theme, size = 'mega' }: ButtonProps & StyleProps) => {
   const sizeMap = {
     kilo: {
       padding: `${theme.spacings.bit} calc(${theme.spacings.mega} - ${BORDER_WIDTH})`,
-      borderRadius: '6px'
+      borderRadius: theme.borderRadius.giga
     },
     mega: {
       padding: `${theme.spacings.byte} calc(${theme.spacings.giga} - ${BORDER_WIDTH})`,
-      borderRadius: '8px'
+      borderRadius: theme.borderRadius.tera
     }
   };
 

src/components/Button/__snapshots__/Button.spec.tsx.snap

@@ -25,8 +25,8 @@ exports[`Button styles should render a button with icon 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -109,8 +109,8 @@ exports[`Button styles should render a disabled button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -177,8 +177,8 @@ exports[`Button styles should render a kilo button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -244,8 +244,8 @@ exports[`Button styles should render a mega button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -311,8 +311,8 @@ exports[`Button styles should render a primary button by default 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -378,8 +378,8 @@ exports[`Button styles should render a secondary button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -445,8 +445,8 @@ exports[`Button styles should render a stretched button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -513,8 +513,8 @@ exports[`Button styles should render a tertiary button 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: transparent;
   border-color: transparent;
   color: #3388FF;

src/components/Calendar/__snapshots__/RangePicker.spec.js.snap

@@ -1057,8 +1057,8 @@ exports[`RangePicker should render with default styles 1`] = `
 .circuit-2 .SingleDatePickerInput {
   background-color: #FFFFFF;
   padding: 8px 12px;
-  -webkit-transition: border-color 200ms ease-in-out;
-  transition: border-color 200ms ease-in-out;
+  -webkit-transition: border-color 120ms ease-in-out;
+  transition: border-color 120ms ease-in-out;
   width: 100%;
   font-size: 16px;
   line-height: 24px;
@@ -1107,26 +1107,26 @@ exports[`RangePicker should render with default styles 1`] = `
 
 .circuit-2 .DateInput_input::-webkit-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-2 .DateInput_input::-moz-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-2 .DateInput_input:-ms-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-2 .DateInput_input::placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-2 .DateInput_fang {

src/components/Calendar/__snapshots__/SingleDayPicker.spec.js.snap

@@ -1057,8 +1057,8 @@ exports[`SingleDayPicker should render with default styles 1`] = `
 .circuit-0 .SingleDatePickerInput {
   background-color: #FFFFFF;
   padding: 8px 12px;
-  -webkit-transition: border-color 200ms ease-in-out;
-  transition: border-color 200ms ease-in-out;
+  -webkit-transition: border-color 120ms ease-in-out;
+  transition: border-color 120ms ease-in-out;
   width: 100%;
   font-size: 16px;
   line-height: 24px;
@@ -1107,26 +1107,26 @@ exports[`SingleDayPicker should render with default styles 1`] = `
 
 .circuit-0 .DateInput_input::-webkit-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input::-moz-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input:-ms-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input::placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_fang {

src/components/Calendar/components/CalendarWrapper/__snapshots__/CalendarWrapper.spec.js.snap

@@ -1057,8 +1057,8 @@ exports[`CalendarWrapper should render with default styles 1`] = `
 .circuit-0 .SingleDatePickerInput {
   background-color: #FFFFFF;
   padding: 8px 12px;
-  -webkit-transition: border-color 200ms ease-in-out;
-  transition: border-color 200ms ease-in-out;
+  -webkit-transition: border-color 120ms ease-in-out;
+  transition: border-color 120ms ease-in-out;
   width: 100%;
   font-size: 16px;
   line-height: 24px;
@@ -1107,26 +1107,26 @@ exports[`CalendarWrapper should render with default styles 1`] = `
 
 .circuit-0 .DateInput_input::-webkit-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input::-moz-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input:-ms-input-placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_input::placeholder {
   color: #9DA7B1;
-  -webkit-transition: color 200ms ease-in-out;
-  transition: color 200ms ease-in-out;
+  -webkit-transition: color 120ms ease-in-out;
+  transition: color 120ms ease-in-out;
 }
 
 .circuit-0 .DateInput_fang {

src/components/CalendarTag/__snapshots__/CalendarTag.spec.js.snap

@@ -16,14 +16,16 @@ exports[`CalendarTag should render with default styles 1`] = `
   border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
+  -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   cursor: pointer;
   outline: 0;
   background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  border: 1px solid #9DA7B1;
+  border-color: #9DA7B1;
 }
 
 .circuit-0:focus {

src/components/CalendarTagTwoStep/__snapshots__/CalendarTagTwoStep.spec.js.snap

@@ -16,14 +16,16 @@ exports[`CalendarTagTwoStep should render with default styles 1`] = `
   border: 1px solid #D8DDE1;
   padding: 4px 12px;
   cursor: default;
+  -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   cursor: pointer;
   outline: 0;
   background: transparent;
 }
 
 .circuit-0:hover {
   background-color: #D8DDE1;
-  border: 1px solid #9DA7B1;
+  border-color: #9DA7B1;
 }
 
 .circuit-0:focus {

src/components/Carousel/__snapshots__/Carousel.spec.js.snap

@@ -336,8 +336,8 @@ exports[`Carousel styles should render with children as a function 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -915,8 +915,8 @@ exports[`Carousel styles should render with children as a node 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -1453,8 +1453,8 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;
@@ -2046,8 +2046,8 @@ exports[`Carousel styles should render with default styles 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;

src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap

@@ -40,8 +40,8 @@ exports[`Buttons styles should render with default styles 1`] = `
   font-weight: 700;
   border-width: 1px;
   border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
+  -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
   background-color: #FFFFFF;
   border-color: #9DA7B1;
   color: #323E49;