Merge pull request #394 from jeradrutnam/next

Fix styling issues in default theme

Author: jeradrutnam

.changeset/brave-guests-brake.md

@@ -0,0 +1,6 @@
+---
+'@wso2/oxygen-ui': patch
+'@wso2/oxygen-ui-icons-react': patch
+---
+
+Fix some default theme styling issues

packages/oxygen-ui-docs/.storybook/docs.css

@@ -21,28 +21,12 @@ html[data-color-scheme='light'],
 html[data-color-scheme='light'] body {
     color-scheme: light;
     --background: #ffffff;
-
-    background-color: var(--background) !important;
-    background-attachment: fixed !important;
-    background-image:
-        radial-gradient(circle at 65% 30%, rgb(255 116 0 / 18%) 10%, rgba(255, 255, 255, 0) 40% 40%),
-        radial-gradient(circle at 35% 50%, rgb(74 41 165 / 10%) 1%, rgba(255, 255, 255, 0) 40% 70%),
-        radial-gradient(circle at center, rgba(255, 255, 255, 0.6) 0%, var(--background) 100%) !important;
-    background-blend-mode: normal !important;
 }
 
 html[data-color-scheme='dark'],
 html[data-color-scheme='dark'] body {
     color-scheme: dark;
     --background: #000000;
-
-    background-color: var(--background) !important;
-    background-attachment: fixed !important;
-    background-image:
-        radial-gradient(circle at 65% 30%, rgb(255 116 0 / 18%) 10%, rgba(0, 0, 0, 0) 40% 40%),
-        radial-gradient(circle at 35% 50%, rgb(74 41 165 / 20%) 1%, rgba(0, 0, 0, 0) 40% 70%),
-        radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, var(--background) 100%) !important;
-    background-blend-mode: screen !important;
 }
 
 .sidebar-container,

packages/oxygen-ui-docs/.storybook/preview.js

@@ -17,7 +17,12 @@
  */
 
 import React from "react";
-import { OxygenUIThemeProvider, OxygenTheme, Experimental_CssVarsProvider as CssVarsProvider } from "@wso2/oxygen-ui";
+// importing from path to avoid preview break on change
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  Experimental_CssVarsProvider as CssVarsProvider
+} from "../../oxygen-ui";
 import './docs.css';
 
 export const globalTypes = {
@@ -50,7 +55,7 @@ export const decorators = [
 
     return (
       <CssVarsProvider theme={OxygenTheme} defaultMode={mode} mode={mode} key={mode}>
-        <OxygenUIThemeProvider>
+        <OxygenUIThemeProvider radialBackground>
           <Story />
         </OxygenUIThemeProvider>
       </CssVarsProvider>

packages/oxygen-ui-docs/stories/Inputs/Button.stories.tsx

@@ -19,6 +19,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
 
 /**
@@ -78,3 +80,55 @@ export const SizeVariants: Story = {
     </Stack>
   ),
 };
+
+export const States: Story = {
+  render: () => {
+    const theme = useTheme();
+
+    return (
+      <Stack direction="column" spacing={3}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Button variant="contained">Default</Button>
+          <Button variant="contained" disabled>
+            Disabled
+          </Button>
+          <Button
+            variant="contained"
+            startIcon={<CircularProgress color="inherit" size={16} />}
+            disabled
+          >
+            Loading
+          </Button>
+        </Stack>
+
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Button variant="outlined">Default</Button>
+          <Button variant="outlined" disabled>
+            Disabled
+          </Button>
+          <Button
+            variant="outlined"
+            startIcon={<CircularProgress color="inherit" size={16} />}
+            disabled
+          >
+            Loading
+          </Button>
+        </Stack>
+
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Button variant="text">Default</Button>
+          <Button variant="text" disabled>
+            Disabled
+          </Button>
+          <Button
+            variant="text"
+            startIcon={<CircularProgress color="inherit" size={16} />}
+            disabled
+          >
+            Loading
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  },
+};

packages/oxygen-ui-icons-react/src/icons.css

@@ -17,7 +17,7 @@
  */
 
 .lucide {
-  stroke-width: 1px;
+  stroke-width: 1.5px;
 }
 
 .lucide:not(.lucide-logo) * {

packages/oxygen-ui/package.json

@@ -61,7 +61,7 @@
   },
   "homepage": "https://github.com/wso2/oxygen-ui#readme",
   "dependencies": {
-    "@fontsource/inter": "^5.2.8"
+    "@fontsource-variable/inter": "^5.2.8"
   },
   "peerDependencies": {
     "@emotion/react": "catalog:",