fix: remove hard coded background color from jsv (#157)

* fix: remove hard coded background color from jsv

* fix: update snapshots

Author: mpodlasin

src/__stories__/JsonSchemaViewer.tsx

@@ -154,6 +154,7 @@ storiesOf('JsonSchemaViewer', module)
             schema={schema as JSONSchema4}
             defaultExpandedDepth={number('defaultExpandedDepth', 2)}
             onGoToRef={action('onGoToRef')}
+            className="sl-bg-canvas"
           />
         </div>
       </InvertTheme>

src/components/shared/ChildStack.tsx

@@ -19,7 +19,7 @@ export const ChildStack = ({
   className,
   RowComponent = SchemaRow,
 }: ChildStackProps) => (
-  <Box bg="canvas" className={className} style={childStackStyle}>
+  <Box className={className} style={childStackStyle}>
     {childNodes.map((childNode: SchemaNode, index) => (
       <React.Fragment key={childNode.id}>
         {index > 0 && <Box borderT borderColor="light" alignSelf="stretch" />}

src/components/shared/__tests__/Property.spec.tsx

@@ -164,7 +164,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"sl-cursor-pointer\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-absolute sl-justify-center sl-items-center sl-cursor-pointer sl-text-muted\\" style=\\"height: 12px; margin-top: 2px; left: -25px;\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><span class=\\"sl-truncate sl-text-muted\\">array of objects</span></div></div></div></div><div></div></div><div style=\\"padding-left: 25px;\\" class=\\"sl-bg-canvas\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">baz</div></div></div></div></div><div></div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"sl-cursor-pointer\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-absolute sl-justify-center sl-items-center sl-cursor-pointer sl-text-muted\\" style=\\"height: 12px; margin-top: 2px; left: -25px;\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><span class=\\"sl-truncate sl-text-muted\\">array of objects</span></div></div></div></div><div></div></div><div style=\\"padding-left: 25px;\\"><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">foo</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">bar</div></div></div></div></div><div></div></div></div><div class=\\"sl-self-stretch sl-border-light sl-border-t\\"></div><div class=\\"sl-relative\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-baseline sl-text-base sl-flex-1\\"><div class=\\"sl-mr-2 sl-font-mono sl-font-semibold\\">baz</div></div></div></div></div><div></div></div></div></div></div></div></div>"`,
       );
     });