feat(Button): emotion removal vanilla extract (#5428)

* feat(Button): emotion removal vanilla extract

* fix: unit tests and checks

* fix: update prefix to add uv

* fix: snapshot update

Author: matthprost

.changeset/eight-glasses-warn.md

@@ -2,13 +2,14 @@
 "@ultraviolet/ui": major
 ---
 
-! BREAKING CHANGES ! 
+⚠️ BREAKING CHANGES ⚠️ 
 In order to start using the new style, you will need to import new `<ThemeProvider />` and import new CSS generated at build time:
 
 ```tsx
 import { ThemeProvider } from '@emotion/react'
-import { consoleLightTheme, ThemeProvider as ThemeProviderUV } from '@ultraviolet/themes'
+import { consoleLightTheme } from '@ultraviolet/themes'
 
+import { ThemeProvider as ThemeProviderUV } from "@ultraviolet/ui" // ThemeProvider that generate the theme applied to components
 import "@ultraviolet/ui/styles" // Generated CSS used by components
 
 export const App = (children) => {

.storybook/components/DocsContainer.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from 'react'
 import { cloneElement, isValidElement, useState } from 'react'
 import { globalStyles } from './globalStyle'
 import '@ultraviolet/fonts/fonts.css'
-import { GlobalAlert } from '@ultraviolet/ui'
+import { GlobalAlert, ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui'
 
 type ExtraProps = {
   /**

.storybook/storybookThemes.ts

@@ -33,6 +33,9 @@ const generateStorybookTheme = ({
 
     // Toolbar default and active colors
     barTextColor: theme.colors.neutral.textWeak,
+    barSelectedColor: theme.colors.primary.text,
+    barBg: theme.colors.neutral.backgroundWeak,
+
     buttonBg: theme.colors.neutral.background,
     buttonBorder: theme.colors.neutral.border,
 

examples/vite/src/App.tsx

@@ -1,5 +1,4 @@
 import { PlusIcon } from '@ultraviolet/icons'
-import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes'
 import {
   Alert,
   Button,
@@ -11,6 +10,7 @@ import {
 } from '@ultraviolet/ui'
 import { useState } from 'react'
 import '@ultraviolet/ui/styles' // Import styles for the UI components
+import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes'
 
 export const App = () => {
   const [count, setCount] = useState(0)