Revert "Import harmony styles in web and embed (#6191)" (#6217)

packages/embed/src/index.css

@@ -1,2 +1 @@
 @import '~@audius/stems/dist/stems.css';
-@import '~@audius/harmony/dist/harmony.css';

packages/harmony/.storybook/preview.ts

@@ -1,12 +1,6 @@
 // This file is used to configure all stories
-import 'assets/styles/reset.css'
-import 'assets/fonts/avenir.css'
-import 'assets/styles/fonts.css'
-import 'assets/styles/spacing.css'
-import 'assets/styles/colors.css'
-import 'assets/styles/tokens.css'
-import 'assets/styles/border-radius.css'
-import 'assets/styles/shadows.css'
+import 'assets/styles/main.css'
+import 'react-perfect-scrollbar/dist/css/styles.css'
 
 // Default to docs view
 export const parameters = {

packages/harmony/rollup.config.js

@@ -26,16 +26,7 @@ export default {
         postcssCustomProperties({
           // Preserve var names so they can be overridden
           preserve: true,
-          importFrom: [
-            'src/assets/styles/reset.css',
-            'src/assets/fonts/avenir.css',
-            'src/assets/styles/fonts.css',
-            'src/assets/styles/spacing.css',
-            'src/assets/styles/colors.css',
-            'src/assets/styles/tokens.css',
-            'src/assets/styles/border-radius.css',
-            'src/assets/styles/shadows.css'
-          ]
+          importFrom: ['src/assets/styles/main.css']
         })
       ],
       minimize: true,

packages/harmony/src/assets/styles/fonts.css

@@ -43,10 +43,3 @@ root {
   --font-bold: 700;
   --font-heavy: 900;
 }
-
-#root *,
-body * {
-  font-family: var(--font-family);
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-}

packages/harmony/src/assets/styles/main.css

@@ -0,0 +1,17 @@
+@import './reset.css';
+@import '../fonts/avenir.css';
+@import './fonts.css';
+@import './spacing.css';
+@import './colors.css';
+@import './tokens.css';
+@import './border-radius.css';
+@import './shadows.css';
+
+#root *,
+body * {
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-s);
+  font-weight: var(--font-medium);
+}

packages/harmony/src/index.ts

@@ -1,10 +1,10 @@
-import './assets/styles/reset.css'
-import './assets/fonts/avenir.css'
-import './assets/styles/fonts.css'
-import './assets/styles/spacing.css'
-import './assets/styles/colors.css'
-import './assets/styles/tokens.css'
-import './assets/styles/border-radius.css'
-import './assets/styles/shadows.css'
+import './assets/styles/main.css'
 
-export * from './components'
+export {
+  Text,
+  TextProps,
+  TextColor,
+  TextSize,
+  TextVariant,
+  TextStrength
+} from './components'

packages/web/src/app.tsx

@@ -1,5 +1,4 @@
 import '@audius/stems/dist/stems.css'
-import '@audius/harmony/dist/harmony.css'
 
 import { useState } from 'react'