fix(styles): remove html and body styles

kodiak-packages · May 16, 2020 · fd05555 · fd05555
1 parent 2669217
commit fd05555
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 28 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import Spinner from '../utils/Spinner/Spinner';
 
+import cssReset from '../../css-reset.module.css';
 import styles from './Button.module.css';
 
 interface Props {
@@ -29,6 +30,7 @@ const Button: React.FC<Props> = ({
   name,
 }: Props) => {
   const buttonClassNames = classNames(
+    cssReset.ventura,
     styles.button,
     {
       [styles.typePrimary]: type === 'primary',

diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button default snapshot 1`] = `
 <DocumentFragment>
   <button
-    class="button typePrimary"
+    class="ventura button typePrimary"
     data-testid="button-undefined"
     type="button"
   >
@@ -19,13 +19,13 @@ exports[`Button default snapshot 1`] = `
 exports[`Button loading button 1`] = `
 <DocumentFragment>
   <button
-    class="button typePrimary"
+    class="ventura button typePrimary"
     data-testid="button-loading"
     disabled=""
     type="button"
   >
     <svg
-      class="svg spinner"
+      class="ventura svg spinner"
       viewBox="0 0 150 150"
       x="0px"
       y="0px"
@@ -49,7 +49,7 @@ exports[`Button loading button 1`] = `
 exports[`Button prefix icon button 1`] = `
 <DocumentFragment>
   <button
-    class="button typePrimary"
+    class="ventura button typePrimary"
     data-testid="button-undefined"
     type="button"
   >
@@ -80,7 +80,7 @@ exports[`Button prefix icon button 1`] = `
 exports[`Button secondary button 1`] = `
 <DocumentFragment>
   <button
-    class="button typeSecondary"
+    class="ventura button typeSecondary"
     data-testid="button-undefined"
     type="button"
   >
@@ -96,7 +96,7 @@ exports[`Button secondary button 1`] = `
 exports[`Button suffix icon button 1`] = `
 <DocumentFragment>
   <button
-    class="button typePrimary"
+    class="ventura button typePrimary"
     data-testid="button-undefined"
     type="button"
   >

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,6 +1,7 @@
 import React, { ChangeEventHandler } from 'react';
 import classNames from 'classnames';
 
+import cssReset from '../../css-reset.module.css';
 import styles from './Input.module.css';
 
 interface Props {
@@ -32,7 +33,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
     }: Props,
     ref,
   ) => {
-    const mergedContainerClassName = classNames(styles.container, className);
+    const mergedContainerClassName = classNames(cssReset.ventura, styles.container, className);
     const mergedInputClassName = classNames(styles.input, {
       [styles.containsError]: Boolean(errorMessage),
     });

diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Input default snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="container"
+    class="ventura container"
     data-testid="container"
   >
     <input

diff --git a/src/components/Radio/RadioItem/RadioItem.tsx b/src/components/Radio/RadioItem/RadioItem.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { radioContext } from '../RadioGroup/RadioGroup';
 
+import cssReset from '../../../css-reset.module.css';
 import styles from './RadioItem.module.css';
 
 export interface Props {
@@ -28,6 +29,7 @@ const RadioItem = React.forwardRef<HTMLInputElement, Props>(
     const isChecked = value === groupContext.selectedValue;
 
     const labelClassNames = classNames(
+      cssReset.ventura,
       styles.radioButtonContainer,
       {
         [styles.radioButtonContainerChecked]: isChecked,

diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Radio default snapshot 1`] = `
     value="test1"
   />
   <label
-    class="radioButtonContainer radioButtonContainerChecked"
+    class="ventura radioButtonContainer radioButtonContainerChecked"
     data-testid="default-test1-container"
     for="default-test1"
   >
@@ -42,7 +42,7 @@ exports[`Radio default snapshot 1`] = `
     value="test2"
   />
   <label
-    class="radioButtonContainer"
+    class="ventura radioButtonContainer"
     data-testid="default-test2-container"
     for="default-test2"
   >
@@ -72,7 +72,7 @@ exports[`Radio default snapshot 1`] = `
     value="test3"
   />
   <label
-    class="radioButtonContainer"
+    class="ventura radioButtonContainer"
     data-testid="default-test3-container"
     for="default-test3"
   >
@@ -108,7 +108,7 @@ exports[`Radio description snapshot 1`] = `
     value="test1"
   />
   <label
-    class="radioButtonContainer radioButtonContainerChecked"
+    class="ventura radioButtonContainer radioButtonContainerChecked"
     data-testid="default-test1-container"
     for="default-test1"
   >
@@ -143,7 +143,7 @@ exports[`Radio description snapshot 1`] = `
     value="test2"
   />
   <label
-    class="radioButtonContainer"
+    class="ventura radioButtonContainer"
     data-testid="default-test2-container"
     for="default-test2"
   >
@@ -178,7 +178,7 @@ exports[`Radio description snapshot 1`] = `
     value="test3"
   />
   <label
-    class="radioButtonContainer"
+    class="ventura radioButtonContainer"
     data-testid="default-test3-container"
     for="default-test3"
   >

diff --git a/src/components/utils/Spinner/Spinner.tsx b/src/components/utils/Spinner/Spinner.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import cssReset from '../../../css-reset.module.css';
 import styles from './Spinner.module.css';
 
 interface Props {
   className?: string;
 }
 
 const Spinner: React.FC<Props> = ({ className }: Props) => {
-  const spinnerClassNames = classNames(styles.svg, className);
+  const spinnerClassNames = classNames(cssReset.ventura, styles.svg, className);
 
   return (
     <svg className={spinnerClassNames} x="0px" y="0px" viewBox="0 0 150 150">

diff --git a/src/index.css → src/css-reset.module.css b/src/index.css → src/css-reset.module.css
@@ -1,20 +1,16 @@
-@import 'theme.css';
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-body {
+.ventura {
   font-family: var(--font-family);
   font-size: var(--font-size);
   color: var(--font-color);
 }
 
-svg[viewBox="0 0 24 24"][stroke-linejoin="round"][stroke-linecap="round"] {
+.ventura *,
+.ventura *:before,
+.ventura *:after {
+  box-sizing: border-box;
+}
+
+.ventura svg[viewBox='0 0 24 24'][stroke-linejoin='round'][stroke-linecap='round'] {
   width: var(--font-size);
   height: var(--font-size);
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,4 @@
-import './index.css';
+import './theme.css';
 
 export { default as Button } from './components/Button/Button';
 export { default as Input } from './components/Input/Input';