vcc-ui - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

dist/components/button/button.js

@@ -152,3 +152,2 @@ "use strict";
       defaultForeground,
-      activeBackground,
       highlight
@@ -160,3 +159,3 @@ } = intentStyleMap[intent] || intentStyleMap.primary;
       width: '100%',
-      outline: 0,
+      outlineWidth: 0,
       justifyContent: 'center',
@@ -242,47 +241,11 @@ userSelect: 'none',
           },
-          ':focus': {
+          ':focus-visible': {
             extend: [{
               condition: true,
-              style: {
-                ':active': {
-                  background: activeBackground
-                },
-                transform: 'scale(0.95, 0.9)',
-                boxShadow: `0 0 0 2px ${highlight}33`
-              }
-            }, {
-              condition: variant === 'default',
-              style: {
-                borderColor: highlight,
-                background: highlight
-              }
-            }, {
-              condition: variant === 'outline',
-              style: {
-                background: color,
-                color: defaultForeground,
-                borderColor: color,
-                fill: defaultForeground,
-                stroke: defaultForeground
-              }
-            }, {
-              condition: variant === 'text',
-              style: {
-                color: highlight,
-                borderColor: highlight
-              }
+              style: theme.states.focus
             }]
           },
           ':focus:not(:focus-visible)': {
-            boxShadow: 'none',
-            extend: [{
-              condition: variant === 'text',
-              style: {
-                borderColor: 'transparent'
-              }
-            }]
+            outlineWidth: 0
           },
-          ':focus:not(:focus-visible):not(:active)': {
-            transform: 'none'
-          },
           ':active': {
@@ -351,3 +314,3 @@ extend: [{
           ':focus': {
-            outline: 0
+            outlineWidth: 0
           },
@@ -354,0 +317,0 @@ extend: [{

dist/components/card/card.js

@@ -26,3 +26,4 @@ "use strict";
     href,
-    selected
+    selected,
+    disabled
   } = _ref;
@@ -36,2 +37,7 @@ return {
     extend: [{
+      condition: !disabled,
+      style: {
+        ':focus-visible': theme.states.focus
+      }
+    }, {
       condition: selected,
@@ -38,0 +44,0 @@ style: {

dist/components/checkbox/checkbox.style.js

@@ -34,3 +34,3 @@ "use strict";
       margin: 0,
-      outline: 0,
+      outlineWidth: 0,
       padding: 0,
@@ -43,9 +43,5 @@ position: 'relative',
           borderColor: theme.color.foreground.alert,
-          borderWidth: 2
-        }
-      }, {
-        condition: isValid,
-        style: {
-          ':focus': {
-            borderColor: theme.tokens.inputBorderFocus
+          borderWidth: 2,
+          ':focus-visible': { ...theme.states.focus,
+            outlineColor: theme.color.ornament.alert
           }
@@ -92,8 +88,3 @@ }
       },
-      ':focus-visible': {
-        ':after': {
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 2px 1px`,
-          transform: 'scale(1.2)'
-        }
-      }
+      ':focus-visible': theme.states.focus
     };
@@ -100,0 +91,0 @@ };

dist/components/click/click.js

@@ -63,3 +63,10 @@ "use strict";
       boxSizing: 'border-box'
-    }, as === 'button' ? buttonResetStyle : linkResetStyle, extend]
+    }, as === 'button' ? buttonResetStyle : linkResetStyle, _ref2 => {
+      let {
+        theme
+      } = _ref2;
+      return {
+        ':focus-visible': theme.states.focus
+      };
+    }, extend]
   }), children);
@@ -66,0 +73,0 @@ });

dist/components/icon-button/IconButton.styles.js

@@ -15,52 +15,34 @@ "use strict";
   } = _ref;
-  return _ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return {
-      boxSizing: 'border-box',
-      height: (0, _sizeToRem.pxToRem)(size),
-      width: (0, _sizeToRem.pxToRem)(size),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '50%',
-      transitionProperty: 'background-color, transform',
-      transitionDuration: '0.25s',
-      transitionTimingFunction: 'ease-in-out',
-      '[aria-disabled=true]': {
-        opacity: '0.3'
-      },
-      ':active:not([aria-disabled=true])': {
-        transform: 'scale(0.8)',
-        willChange: 'transform'
-      },
-      // Replaces default outline with vcc-ui blue blurred focus outline
-      ':focus-visible': {
-        outline: 0,
-        ':before': {
-          content: '""',
-          borderRadius: '9999px',
-          position: 'absolute',
-          height: (0, _sizeToRem.pxToRem)(size),
-          width: (0, _sizeToRem.pxToRem)(size),
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 3px 2px`,
-          transform: 'scale(1.1)'
-        }
-      },
-      // Extends touch area outside IconButton dimensions
-      ':after': {
-        content: '""',
-        position: 'absolute',
-        height: (0, _sizeToRem.pxToRem)(44),
-        width: (0, _sizeToRem.pxToRem)(44)
-      },
-      extend: [{
-        condition: bleed,
-        style: {
-          margin: (0, _sizeToRem.pxToRem)(-8)
-        }
-      }]
-    };
-  };
+  return () => ({
+    boxSizing: 'border-box',
+    height: (0, _sizeToRem.pxToRem)(size),
+    width: (0, _sizeToRem.pxToRem)(size),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    transitionProperty: 'background-color, transform',
+    transitionDuration: '0.25s',
+    transitionTimingFunction: 'ease-in-out',
+    '[aria-disabled=true]': {
+      opacity: '0.3'
+    },
+    ':active:not([aria-disabled=true])': {
+      transform: 'scale(0.8)',
+      willChange: 'transform'
+    },
+    // Extends touch area outside IconButton dimensions
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      height: (0, _sizeToRem.pxToRem)(44),
+      width: (0, _sizeToRem.pxToRem)(44)
+    },
+    extend: [{
+      condition: bleed,
+      style: {
+        margin: (0, _sizeToRem.pxToRem)(-8)
+      }
+    }]
+  });
 };
@@ -70,3 +52,3 @@
 
-const iconButtonStyle = (variant, intent) => _ref3 => {
+const iconButtonStyle = (variant, intent) => _ref2 => {
   let {
@@ -79,3 +61,3 @@ theme: {
     }
-  } = _ref3;
+  } = _ref2;
 
@@ -82,0 +64,0 @@ if (variant === 'outline') {

dist/components/link/index.js

@@ -141,17 +141,2 @@ "use strict";
             }
-          },
-          ':focus': {
-            color: theme.tokens.linkHoverForeground,
-            stroke: theme.tokens.linkHoverForeground,
-            outlineColor: theme.tokens.linkHoverForeground,
-            ':active': {
-              color: theme.tokens.linkPressForeground,
-              stroke: theme.tokens.linkPressForeground,
-              outlineColor: theme.tokens.linkPressForeground
-            }
-          },
-          ':focus:not(:focus-visible):not(:active)': {
-            color: theme.tokens.linkForeground,
-            stroke: theme.tokens.linkForeground,
-            outlineColor: theme.tokens.linkForeground
           }
@@ -158,0 +143,0 @@ }

dist/components/nav-item/index.js

@@ -71,11 +71,2 @@ "use strict";
       },
-      ':focus': {
-        outline: 'none',
-        extend: {
-          condition: !isActive,
-          style: {
-            borderBottomColor: theme.color.ornament.highlight
-          }
-        }
-      },
       ':focus:not(:focus-visible)': {
@@ -82,0 +73,0 @@ borderBottomColor: 'transparent'

dist/components/radio/radio.js

@@ -54,3 +54,3 @@ "use strict";
       backgroundColor: theme.tokens.inputBackground,
-      outline: 0,
+      outlineWidth: 0,
       extend: [{
@@ -65,5 +65,3 @@ condition: !isValid,
         style: {
-          ':focus': {
-            borderColor: theme.tokens.inputBorderFocus
-          }
+          ':focus-visible': theme.states.focus
         }
@@ -70,0 +68,0 @@ }],

dist/components/select-input/select-input.styles.js

@@ -26,3 +26,3 @@ "use strict";
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical * 2,
@@ -29,0 +29,0 @@ paddingBottom: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical / 2,

dist/components/slider/index.js

@@ -34,3 +34,3 @@ "use strict";
 const thumbStyle = _ref => {
-  var _theme$tokens, _theme$tokens2, _theme$tokens3;
+  var _theme$tokens, _theme$tokens2;
 
@@ -57,5 +57,4 @@ let {
     justifyContent: 'center',
-    outline: 0,
-    ':focus': {
-      borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens3 = theme.tokens) === null || _theme$tokens3 === void 0 ? void 0 : _theme$tokens3.inputBorderFocus
+    outlineWidth: 0,
+    ':focus-visible': { ...(theme !== undefined ? theme.states.focus : undefined)
     },
@@ -369,3 +368,3 @@ extend: {
   render() {
-    var _theme$tokens4, _theme$tokens5;
+    var _theme$tokens3, _theme$tokens4;
 
@@ -391,4 +390,4 @@ const {
         borderStyle: 'solid',
-        borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens4 = theme.tokens) === null || _theme$tokens4 === void 0 ? void 0 : _theme$tokens4.inputBorder,
-        background: theme === null || theme === void 0 ? void 0 : (_theme$tokens5 = theme.tokens) === null || _theme$tokens5 === void 0 ? void 0 : _theme$tokens5.inputBackground,
+        borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens3 = theme.tokens) === null || _theme$tokens3 === void 0 ? void 0 : _theme$tokens3.inputBorder,
+        background: theme === null || theme === void 0 ? void 0 : (_theme$tokens4 = theme.tokens) === null || _theme$tokens4 === void 0 ? void 0 : _theme$tokens4.inputBackground,
         cursor: this.props.disabled ? 'not-allwoed' : 'pointer'
@@ -395,0 +394,0 @@ }],

dist/components/tab-nav-item/index.js

@@ -65,10 +65,2 @@ "use strict";
     borderBottomColor: 'transparent',
-    ':focus': {
-      outline: 'solid',
-      outlineOffset: -2,
-      outlineColor: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight
-    },
-    ':focus:not(:focus-visible)': {
-      outlineColor: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary
-    },
     ':hover': {
@@ -75,0 +67,0 @@ color: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight

dist/components/tab-nav/index.js

@@ -44,3 +44,2 @@ "use strict";
       flexDirection: 'row',
-      overflow: 'hidden',
       borderBottomStyle: 'solid',
@@ -65,3 +64,6 @@ borderBottomWidth: 1,
     flexDirection: 'row',
-    padding: '0 0 0 19px'
+    padding: '0 0 0 19px',
+    '> button:focus-visible': {
+      outlineOffset: -2
+    }
   },
@@ -120,10 +122,2 @@ stickyLeft: _ref2 => {
       whiteSpace: 'nowrap',
-      ':focus': {
-        outline: 'solid',
-        outlineOffset: -2,
-        outlineColor: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight
-      },
-      ':focus:not(:focus-visible)': {
-        outlineColor: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary
-      },
       flexShrink: '0',
@@ -130,0 +124,0 @@ color: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary,

dist/components/text-area/text-area.style.js

@@ -24,3 +24,3 @@ "use strict";
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: theme.tokens.inputPaddingVertical * 2,
@@ -27,0 +27,0 @@ paddingBottom: theme.tokens.inputPaddingVertical / 2,

dist/components/text-input/text-input.js

@@ -46,3 +46,3 @@ "use strict";
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: theme.tokens.inputPaddingVertical * 2,
@@ -49,0 +49,0 @@ paddingBottom: theme.tokens.inputPaddingVertical / 2,

dist/components/toggle/index.js

@@ -47,8 +47,6 @@ "use strict";
       left: -1,
-      right: 0,
+      right: -1,
       top: -1,
-      bottom: 0,
+      bottom: -1,
       transformOrigin: 'center',
-      transition: 'box-shadow 150ms ease-out,transform 150ms ease-out',
-      boxShadow: `${theme.color.foreground.primary} 0px 0px 0px 0px`,
       borderRadius: 12,
@@ -59,6 +57,3 @@ borderWidth: 1
       '& + span': {
-        ':after': {
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 0px 1px`,
-          transform: 'scale(1.2)'
-        }
+        ':after': theme.states.focus
       }
@@ -87,3 +82,3 @@ }
       bottom: 0,
-      outline: 0,
+      outlineWidth: 0,
       padding: 0,
@@ -127,3 +122,2 @@ transition: 'background 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
       bottom: 1,
-      left: 1,
       width: 20,
@@ -137,3 +131,3 @@ height: 20,
       transition: 'transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
-      transform: checked ? 'translateX(15px)' : 'translateX(0px)',
+      transform: checked ? 'translateX(17px)' : 'translateX(1px)',
       extend: [{
@@ -140,0 +134,0 @@ condition: disabled,

dist/esm/components/button/button.js

@@ -130,3 +130,2 @@ import _extends from "@babel/runtime/helpers/extends";
       defaultForeground,
-      activeBackground,
       highlight
@@ -138,3 +137,3 @@ } = intentStyleMap[intent] || intentStyleMap.primary;
       width: '100%',
-      outline: 0,
+      outlineWidth: 0,
       justifyContent: 'center',
@@ -220,47 +219,11 @@ userSelect: 'none',
           },
-          ':focus': {
+          ':focus-visible': {
             extend: [{
               condition: true,
-              style: {
-                ':active': {
-                  background: activeBackground
-                },
-                transform: 'scale(0.95, 0.9)',
-                boxShadow: `0 0 0 2px ${highlight}33`
-              }
-            }, {
-              condition: variant === 'default',
-              style: {
-                borderColor: highlight,
-                background: highlight
-              }
-            }, {
-              condition: variant === 'outline',
-              style: {
-                background: color,
-                color: defaultForeground,
-                borderColor: color,
-                fill: defaultForeground,
-                stroke: defaultForeground
-              }
-            }, {
-              condition: variant === 'text',
-              style: {
-                color: highlight,
-                borderColor: highlight
-              }
+              style: theme.states.focus
             }]
           },
           ':focus:not(:focus-visible)': {
-            boxShadow: 'none',
-            extend: [{
-              condition: variant === 'text',
-              style: {
-                borderColor: 'transparent'
-              }
-            }]
+            outlineWidth: 0
           },
-          ':focus:not(:focus-visible):not(:active)': {
-            transform: 'none'
-          },
           ':active': {
@@ -329,3 +292,3 @@ extend: [{
           ':focus': {
-            outline: 0
+            outlineWidth: 0
           },
@@ -332,0 +295,0 @@ extend: [{

dist/esm/components/card/card.js

@@ -12,3 +12,4 @@ import _extends from "@babel/runtime/helpers/extends";
     href,
-    selected
+    selected,
+    disabled
   } = _ref;
@@ -22,2 +23,7 @@ return {
     extend: [{
+      condition: !disabled,
+      style: {
+        ':focus-visible': theme.states.focus
+      }
+    }, {
       condition: selected,
@@ -24,0 +30,0 @@ style: {

dist/esm/components/checkbox/checkbox.style.js

@@ -27,3 +27,3 @@ const checkmarkIcon = color => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none' %3E %3Cpath stroke='${encodeURIComponent(color)}' d='M1 6L4 9L11 1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' %3E %3C/path%3E %3C/svg%3E")`;
       margin: 0,
-      outline: 0,
+      outlineWidth: 0,
       padding: 0,
@@ -36,9 +36,5 @@ position: 'relative',
           borderColor: theme.color.foreground.alert,
-          borderWidth: 2
-        }
-      }, {
-        condition: isValid,
-        style: {
-          ':focus': {
-            borderColor: theme.tokens.inputBorderFocus
+          borderWidth: 2,
+          ':focus-visible': { ...theme.states.focus,
+            outlineColor: theme.color.ornament.alert
           }
@@ -85,8 +81,3 @@ }
       },
-      ':focus-visible': {
-        ':after': {
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 2px 1px`,
-          transform: 'scale(1.2)'
-        }
-      }
+      ':focus-visible': theme.states.focus
     };
@@ -93,0 +84,0 @@ };

dist/esm/components/click/click.js

@@ -47,3 +47,10 @@ import _extends from "@babel/runtime/helpers/extends";
       boxSizing: 'border-box'
-    }, as === 'button' ? buttonResetStyle : linkResetStyle, extend]
+    }, as === 'button' ? buttonResetStyle : linkResetStyle, _ref2 => {
+      let {
+        theme
+      } = _ref2;
+      return {
+        ':focus-visible': theme.states.focus
+      };
+    }, extend]
   }), children);
@@ -50,0 +57,0 @@ });

dist/esm/components/icon-button/IconButton.styles.js

@@ -7,54 +7,36 @@ import { pxToRem } from '../../utils/size-to-rem';
   } = _ref;
-  return _ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return {
-      boxSizing: 'border-box',
-      height: pxToRem(size),
-      width: pxToRem(size),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '50%',
-      transitionProperty: 'background-color, transform',
-      transitionDuration: '0.25s',
-      transitionTimingFunction: 'ease-in-out',
-      '[aria-disabled=true]': {
-        opacity: '0.3'
-      },
-      ':active:not([aria-disabled=true])': {
-        transform: 'scale(0.8)',
-        willChange: 'transform'
-      },
-      // Replaces default outline with vcc-ui blue blurred focus outline
-      ':focus-visible': {
-        outline: 0,
-        ':before': {
-          content: '""',
-          borderRadius: '9999px',
-          position: 'absolute',
-          height: pxToRem(size),
-          width: pxToRem(size),
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 3px 2px`,
-          transform: 'scale(1.1)'
-        }
-      },
-      // Extends touch area outside IconButton dimensions
-      ':after': {
-        content: '""',
-        position: 'absolute',
-        height: pxToRem(44),
-        width: pxToRem(44)
-      },
-      extend: [{
-        condition: bleed,
-        style: {
-          margin: pxToRem(-8)
-        }
-      }]
-    };
-  };
+  return () => ({
+    boxSizing: 'border-box',
+    height: pxToRem(size),
+    width: pxToRem(size),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    transitionProperty: 'background-color, transform',
+    transitionDuration: '0.25s',
+    transitionTimingFunction: 'ease-in-out',
+    '[aria-disabled=true]': {
+      opacity: '0.3'
+    },
+    ':active:not([aria-disabled=true])': {
+      transform: 'scale(0.8)',
+      willChange: 'transform'
+    },
+    // Extends touch area outside IconButton dimensions
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      height: pxToRem(44),
+      width: pxToRem(44)
+    },
+    extend: [{
+      condition: bleed,
+      style: {
+        margin: pxToRem(-8)
+      }
+    }]
+  });
 };
-export const iconButtonStyle = (variant, intent) => _ref3 => {
+export const iconButtonStyle = (variant, intent) => _ref2 => {
   let {
@@ -67,3 +49,3 @@ theme: {
     }
-  } = _ref3;
+  } = _ref2;
 
@@ -70,0 +52,0 @@ if (variant === 'outline') {

dist/esm/components/link/index.js

@@ -121,17 +121,2 @@ import _extends from "@babel/runtime/helpers/extends";
             }
-          },
-          ':focus': {
-            color: theme.tokens.linkHoverForeground,
-            stroke: theme.tokens.linkHoverForeground,
-            outlineColor: theme.tokens.linkHoverForeground,
-            ':active': {
-              color: theme.tokens.linkPressForeground,
-              stroke: theme.tokens.linkPressForeground,
-              outlineColor: theme.tokens.linkPressForeground
-            }
-          },
-          ':focus:not(:focus-visible):not(:active)': {
-            color: theme.tokens.linkForeground,
-            stroke: theme.tokens.linkForeground,
-            outlineColor: theme.tokens.linkForeground
           }
@@ -138,0 +123,0 @@ }

dist/esm/components/nav-item/index.js

@@ -51,11 +51,2 @@ import _extends from "@babel/runtime/helpers/extends";
       },
-      ':focus': {
-        outline: 'none',
-        extend: {
-          condition: !isActive,
-          style: {
-            borderBottomColor: theme.color.ornament.highlight
-          }
-        }
-      },
       ':focus:not(:focus-visible)': {
@@ -62,0 +53,0 @@ borderBottomColor: 'transparent'

dist/esm/components/radio/radio.js

@@ -35,3 +35,3 @@ import _extends from "@babel/runtime/helpers/extends";
       backgroundColor: theme.tokens.inputBackground,
-      outline: 0,
+      outlineWidth: 0,
       extend: [{
@@ -46,5 +46,3 @@ condition: !isValid,
         style: {
-          ':focus': {
-            borderColor: theme.tokens.inputBorderFocus
-          }
+          ':focus-visible': theme.states.focus
         }
@@ -51,0 +49,0 @@ }],

dist/esm/components/select-input/select-input.styles.js

@@ -20,3 +20,3 @@ const FIREFOX_INNER_PADDING = 4;
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical * 2,
@@ -23,0 +23,0 @@ paddingBottom: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical / 2,

dist/esm/components/slider/index.js

@@ -15,3 +15,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const thumbStyle = _ref => {
-  var _theme$tokens, _theme$tokens2, _theme$tokens3;
+  var _theme$tokens, _theme$tokens2;
 
@@ -38,5 +38,4 @@ let {
     justifyContent: 'center',
-    outline: 0,
-    ':focus': {
-      borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens3 = theme.tokens) === null || _theme$tokens3 === void 0 ? void 0 : _theme$tokens3.inputBorderFocus
+    outlineWidth: 0,
+    ':focus-visible': { ...(theme !== undefined ? theme.states.focus : undefined)
     },
@@ -373,3 +372,3 @@ extend: {
   render() {
-    var _theme$tokens4, _theme$tokens5;
+    var _theme$tokens3, _theme$tokens4;
 
@@ -395,4 +394,4 @@ const {
         borderStyle: 'solid',
-        borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens4 = theme.tokens) === null || _theme$tokens4 === void 0 ? void 0 : _theme$tokens4.inputBorder,
-        background: theme === null || theme === void 0 ? void 0 : (_theme$tokens5 = theme.tokens) === null || _theme$tokens5 === void 0 ? void 0 : _theme$tokens5.inputBackground,
+        borderColor: theme === null || theme === void 0 ? void 0 : (_theme$tokens3 = theme.tokens) === null || _theme$tokens3 === void 0 ? void 0 : _theme$tokens3.inputBorder,
+        background: theme === null || theme === void 0 ? void 0 : (_theme$tokens4 = theme.tokens) === null || _theme$tokens4 === void 0 ? void 0 : _theme$tokens4.inputBackground,
         cursor: this.props.disabled ? 'not-allwoed' : 'pointer'
@@ -399,0 +398,0 @@ }],

dist/esm/components/tab-nav-item/index.js

@@ -46,10 +46,2 @@ import _extends from "@babel/runtime/helpers/extends";
     borderBottomColor: 'transparent',
-    ':focus': {
-      outline: 'solid',
-      outlineOffset: -2,
-      outlineColor: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight
-    },
-    ':focus:not(:focus-visible)': {
-      outlineColor: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary
-    },
     ':hover': {
@@ -56,0 +48,0 @@ color: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight

dist/esm/components/tab-nav/index.js

@@ -20,3 +20,2 @@ import _extends from "@babel/runtime/helpers/extends";
       flexDirection: 'row',
-      overflow: 'hidden',
       borderBottomStyle: 'solid',
@@ -41,3 +40,6 @@ borderBottomWidth: 1,
     flexDirection: 'row',
-    padding: '0 0 0 19px'
+    padding: '0 0 0 19px',
+    '> button:focus-visible': {
+      outlineOffset: -2
+    }
   },
@@ -96,10 +98,2 @@ stickyLeft: _ref2 => {
       whiteSpace: 'nowrap',
-      ':focus': {
-        outline: 'solid',
-        outlineOffset: -2,
-        outlineColor: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight
-      },
-      ':focus:not(:focus-visible)': {
-        outlineColor: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary
-      },
       flexShrink: '0',
@@ -106,0 +100,0 @@ color: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary,

dist/esm/components/text-area/text-area.style.js

@@ -17,3 +17,3 @@ export const defaultStyles = _ref => {
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: theme.tokens.inputPaddingVertical * 2,
@@ -20,0 +20,0 @@ paddingBottom: theme.tokens.inputPaddingVertical / 2,

dist/esm/components/text-input/text-input.js

@@ -28,3 +28,3 @@ import _extends from "@babel/runtime/helpers/extends";
     margin: 0,
-    outline: 0,
+    outlineWidth: 0,
     paddingTop: theme.tokens.inputPaddingVertical * 2,
@@ -31,0 +31,0 @@ paddingBottom: theme.tokens.inputPaddingVertical / 2,

dist/esm/components/toggle/index.js

@@ -31,8 +31,6 @@ import _extends from "@babel/runtime/helpers/extends";
       left: -1,
-      right: 0,
+      right: -1,
       top: -1,
-      bottom: 0,
+      bottom: -1,
       transformOrigin: 'center',
-      transition: 'box-shadow 150ms ease-out,transform 150ms ease-out',
-      boxShadow: `${theme.color.foreground.primary} 0px 0px 0px 0px`,
       borderRadius: 12,
@@ -43,6 +41,3 @@ borderWidth: 1
       '& + span': {
-        ':after': {
-          boxShadow: `${theme.tokens.inputBorderFocus} 0px 0px 0px 1px`,
-          transform: 'scale(1.2)'
-        }
+        ':after': theme.states.focus
       }
@@ -71,3 +66,3 @@ }
       bottom: 0,
-      outline: 0,
+      outlineWidth: 0,
       padding: 0,
@@ -111,3 +106,2 @@ transition: 'background 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
       bottom: 1,
-      left: 1,
       width: 20,
@@ -121,3 +115,3 @@ height: 20,
       transition: 'transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
-      transform: checked ? 'translateX(15px)' : 'translateX(0px)',
+      transform: checked ? 'translateX(17px)' : 'translateX(1px)',
       extend: [{
@@ -124,0 +118,0 @@ condition: disabled,

dist/esm/styling/style-renderer.js

@@ -77,3 +77,3 @@ import { assignStyle } from 'css-in-js-utils';
   const options = rest || {};
-  return createRenderer({ ...options,
+  const renderer = createRenderer({ ...options,
     enhancers: [sortClassnames(), sortMediaQueryMobileFirst(), ...(enforceLonghands ? [enforceLonghandsEnhancer()] : []), ...(options.enhancers || [])],
@@ -90,2 +90,3 @@ plugins: [responsiveObjectValue(responsiveProps), extend(), embedded(), responsiveValue(getResponsiveMediaQueries, responsiveProps), namedKeys(props => props && props.theme && props.theme.breakpoints || {}), themeFontsPlugin, hexToRgbaPlugin, rtl(isRtl ? 'rtl' : 'ltr'), themeValue({
   });
+  return renderer;
 } // TODO: move to fela repo as an official plugin
@@ -92,0 +93,0 @@

dist/esm/themes/getTheme.js

@@ -46,2 +46,10 @@ import darkTokens from '@volvo-cars/ui-design-tokens/build/web/volvo-dark/tokens.json';
     typeScale: buildTypeScale(typeScale),
+    states: {
+      focus: {
+        outlineOffset: 2,
+        outlineWidth: 2,
+        outlineColor: designTokens.color.foreground.primary,
+        outlineStyle: 'solid'
+      }
+    },
     // New Design Tokens
@@ -48,0 +56,0 @@ ...designTokens

dist/styling/style-renderer.js

@@ -105,3 +105,3 @@ "use strict";
   const options = rest || {};
-  return (0, _fela.createRenderer)({ ...options,
+  const renderer = (0, _fela.createRenderer)({ ...options,
     enhancers: [(0, _felaSortClassnames.default)(), (0, _felaSortMediaQueryMobileFirst.default)(), ...(enforceLonghands ? [(0, _felaEnforceLonghands.default)()] : []), ...(options.enhancers || [])],
@@ -118,2 +118,3 @@ plugins: [responsiveObjectValue(responsiveProps), (0, _felaPluginExtend.default)(), (0, _felaPluginEmbedded.default)(), (0, _felaPluginResponsiveValue.default)(getResponsiveMediaQueries, responsiveProps), (0, _felaPluginNamedKeys.default)(props => props && props.theme && props.theme.breakpoints || {}), themeFontsPlugin, hexToRgbaPlugin, (0, _felaPluginRtl.default)(isRtl ? 'rtl' : 'ltr'), (0, _felaPluginThemeValue.default)({
   });
+  return renderer;
 } // TODO: move to fela repo as an official plugin
@@ -120,0 +121,0 @@

dist/themes/getTheme.js

@@ -61,2 +61,10 @@ "use strict";
     typeScale: (0, _buildTypeScale.buildTypeScale)(typeScale),
+    states: {
+      focus: {
+        outlineOffset: 2,
+        outlineWidth: 2,
+        outlineColor: designTokens.color.foreground.primary,
+        outlineStyle: 'solid'
+      }
+    },
     // New Design Tokens
@@ -63,0 +71,0 @@ ...designTokens

dist/types/shared.d.ts

@@ -306,2 +306,10 @@ import { ComponentType, ReactNode } from 'react';
     typeScale: Record<TypeVariants, any>;
+    states: {
+        focus: {
+            outlineOffset: number;
+            outlineWidth: number;
+            outlineColor: string;
+            outlineStyle: string;
+        };
+    };
 }
@@ -308,0 +316,0 @@ export declare type Extendable<Props = {}> = {

package.json

 {
   "name": "vcc-ui",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "UNLICENSED",
@@ -24,2 +24,3 @@ "description": "A React library for building user interfaces at Volvo Cars",
     "build:prod": "rm -rf dist && yarn build:esm && yarn run build:cjs && yarn run build:dts",
+    "build:docs": "node scripts/build-docs.js",
     "test": "yarn run -T jest packages/vcc-ui",
@@ -29,3 +30,2 @@ "dev": "yarn run watch:cjs & yarn run watch:esm",
     "watch:esm": "babel src -d dist/esm -w --extensions '.ts,.tsx,.js,.jsx'",
-    "build:docs": "node scripts/build-docs.js",
     "types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json --verbose",
@@ -68,9 +68,9 @@ "clean": "rm -rf .turbo dist docs && rm -rf *.tsbuildinfo"
     "@babel/plugin-transform-modules-commonjs": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.18.10",
+    "@babel/plugin-transform-runtime": "7.19.1",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.18.10",
+    "@babel/preset-env": "7.19.1",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@storybook/react": "6.5.10",
-    "@types/react": "17.0.49",
+    "@storybook/react": "6.5.12",
+    "@types/react": "17.0.50",
     "@volvo-cars/browserslist-config": "workspace:*",
@@ -81,3 +81,3 @@ "babel-core": "7.0.0-bridge.0",
     "chromatic-cli": "1.0.0",
-    "core-js": "3.25.0",
+    "core-js": "3.25.1",
     "cpx": "1.5.0",
@@ -94,3 +94,3 @@ "fela-monolithic": "12.2.0",
     "shelljs": "0.8.5",
-    "typescript": "4.8.2",
+    "typescript": "4.8.3",
     "vcc-ui-docs-utils": "workspace:*"
@@ -97,0 +97,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

531755

decreased by-1.15%

Lines of code

15323

decreased by-1.1%

No dependency changes