Correct a mis-step with extracting polished (#1605)

Author: Luke Bowerman

README.md

@@ -90,7 +90,7 @@ We follow a [semantic versioning scheme](https://semver.org/). That means:
 1.  Open PR for change review
 1.  Merge PR
 1.  Pull latest master
-1.  `yarn lerna release`
+1.  `yarn release`
 
 ### 4. Tooling
 

packages/components/src/Button/ButtonBase.tsx

@@ -82,8 +82,7 @@ export const buttonCSS = css<ButtonBaseProps>`
   ${minWidth}
   ${width}
 
-  ${({ focusVisible, color }) =>
-    focusVisible && `box-shadow: 0 0 0 0.15rem ${buttonShadow(color)};`}
+  ${({ focusVisible, color }) => focusVisible && buttonShadow(color)}
 
   align-items: center;
   border-radius: ${({ theme }) => theme.radii.medium};

packages/components/src/Button/__snapshots__/Button.test.tsx.snap

@@ -74,7 +74,7 @@ exports[`Button Focus: renders outline when tabbing into focus, but not when cli
 
 exports[`Button Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 kFFdak ButtonBase-sc-1bpio6j-1 Button-sc-18euc9m-0 dXZmpP"
+  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 cFuMRs ButtonBase-sc-1bpio6j-1 Button-sc-18euc9m-0 dXZmpP"
 >
   focus
 </button>

packages/components/src/Button/__snapshots__/ButtonOutline.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not w
 
 exports[`ButtonOutline Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 kFFdak ButtonBase-sc-1bpio6j-1 ButtonOutline-ncggc7-0 iADMFt"
+  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 cFuMRs ButtonBase-sc-1bpio6j-1 ButtonOutline-ncggc7-0 iADMFt"
 >
   focus
 </button>

packages/components/src/Button/__snapshots__/ButtonTransparent.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`ButtonTransparent Focus: renders outline when tabbing into focus, but n
 
 exports[`ButtonTransparent Focus: renders outline when tabbing into focus, but not when clicking 2`] = `
 <button
-  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 kFFdak ButtonBase-sc-1bpio6j-1 ButtonTransparent-sc-799h13-0 dHitBk"
+  class="ButtonBase__ButtonOuter-sc-1bpio6j-0 cFuMRs ButtonBase-sc-1bpio6j-1 ButtonTransparent-sc-799h13-0 dHitBk"
 >
   focus
 </button>

packages/components/src/Button/iconButtonColor.ts

@@ -28,7 +28,7 @@ import { css } from 'styled-components'
 import { iconButtonColorDerivation } from '@looker/design-tokens'
 
 export const iconButtonColor = css<{ toggle?: boolean }>`
-  color: ${iconButtonColorDerivation};
+  ${iconButtonColorDerivation}
 
   &:hover,
   &:focus,

packages/components/src/Calendar/Calendar.tsx

@@ -212,7 +212,7 @@ export const Calendar = styled<FC<CalendarProps>>(InternalCalendar)`
       &:not(.DayPicker-Day--to):not(.DayPicker-Day--from) {
         background-color: ${({ theme: { colors }, disabled }) =>
           disabled ? colors.neutralAccent : colors.keyAccent};
-        color: ${calendarMixColor};
+        ${calendarMixColor}
       }
 
       &:not(.DayPicker-Day--to):not(.DayPicker-Day--from):not(.DayPicker-Day--outside) {

packages/components/src/Form/Inputs/ToggleSwitch/Knob.tsx

@@ -71,7 +71,6 @@ export const KnobContainer = styled(KnobContainerLayout)`
   transition: ${({ theme }) => theme.transitions.moderate}ms;
 
   &:hover {
-    ${({ disabled }) =>
-      disabled && `box-shadow: 0 0 0.01rem 0.01rem ${knobShadowColor};`}
+    ${({ disabled }) => disabled && knobShadowColor}
   }
 `

packages/components/src/Form/Inputs/ToggleSwitch/ToggleSwitch.tsx

@@ -104,7 +104,7 @@ export const ToggleSwitch = styled(ToggleSwitchLayout)`
     z-index: 1;
 
     &:focus + div {
-      box-shadow: 0 0 0 0.2rem ${toggleSwitchShadowColor};
+      ${toggleSwitchShadowColor}
     }
   }
 `

packages/components/src/Form/Inputs/ToggleSwitch/__snapshots__/ToggleSwitch.test.tsx.snap

@@ -241,11 +241,9 @@ exports[`ToggleSwitch that is disabled 1`] = `
 }
 
 .c1:hover {
-  box-shadow: 0 0 0.01rem 0.01rem () => (0,_styledComponents.css)(["",""],(_ref5) => { var { theme;
+  box-shadow: 0 0 0.01rem 0.01rem rgba(122,85,227,0.5);
 }
 
-= _ref5; return (0,_rgba.default)(theme.colors.keyInteractive,0.5);});}
-
 .c3 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   background: #C1C6CC;