imporved support for SSG

packages/button/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meshx-org/mxui-button",
     "description": "Button component for MXUI",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "apache-2.0",
     "author": "Roland Szarka-Kovács <Roland.Szarka-Kovacs@meshx.co>",
     "homepage": "https://meshx.co/produts/mxui",
@@ -37,9 +37,9 @@
     },
     "dependencies": {
         "@types/styled-components": "^5.1.26",
-        "@meshx-org/mxui-core": "0.7.20",
-        "@meshx-org/mxui-text": "0.7.20",
-        "@meshx-org/mxui-primitives": "0.7.20"
+        "@meshx-org/mxui-core": "0.7.21",
+        "@meshx-org/mxui-text": "0.7.21",
+        "@meshx-org/mxui-primitives": "0.7.21"
     },
     "devDependencies": {
         "@meshx-org/mxui-tsconfig": "*",

packages/button/src/LinkButton.tsx

@@ -27,7 +27,7 @@ const StyledButton = styled.div`
     }
 
     &[data-state='pressed'] ${StyledSubtleFillX}, &:active ${StyledSubtleFillX} {
-        transform: scale(0.9) !important;
+        transform: scale(0.95) !important;
     }
 
     &[data-state='hovered'] ${StyledSubtleFillX}, &:hover ${StyledSubtleFillX} {

packages/core/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meshx-org/mxui-core",
     "description": "Button component for MXUI",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "apache-2.0",
     "author": "Roland Szarka-Kovács <Roland.Szarka-Kovacs@meshx.co>",
     "homepage": "https://meshx.co/produts/mxui",

packages/core/src/context/ThemeProvider.tsx

@@ -33,19 +33,29 @@ const GlobalStyle = createGlobalStyle`
         --theme-color-stroke-card: ${({ theme }) => theme.colors.stroke.card};
         --theme-color-stroke-divider: ${({ theme }) => theme.colors.stroke.divider};
         --theme-color-stroke-surface: ${({ theme }) => theme.colors.stroke.surface};
+        --theme-color-stroke-control: ${({ theme }) => theme.colors.stroke.control};
 
         // Backgrounds Colors
         --theme-background-card-default: ${({ theme }) => theme.colors.backgrounds.card.default};
         --theme-background-card-secondary: ${({ theme }) => theme.colors.backgrounds.card.secondary};
         --theme-background-card-tertiary: ${({ theme }) => theme.colors.backgrounds.card.tertiary};
 
+        --theme-background-control-default: ${({ theme }) => theme.colors.backgrounds.control.default};
+        --theme-background-control-secondary: ${({ theme }) => theme.colors.backgrounds.control.secondary};
+        --theme-background-control-tertiary: ${({ theme }) => theme.colors.backgrounds.control.tertiary};
+        --theme-background-control-disabled: ${({ theme }) => theme.colors.backgrounds.control.disabled};
+
         --theme-background-solid-default: ${({ theme }) => theme.colors.backgrounds.solid.default};
         --theme-background-solid-secondary: ${({ theme }) => theme.colors.backgrounds.solid.secondary};
         --theme-background-solid-tertiary: ${({ theme }) => theme.colors.backgrounds.solid.tertiary};
 
         --theme-background-layer-default: ${({ theme }) => theme.colors.backgrounds.layer.default};
         --theme-background-layer-alt: ${({ theme }) => theme.colors.backgrounds.layer.alt};
 
+        --theme-background-subtle-default: ${({ theme }) => theme.colors.backgrounds.subtle.default};
+        --theme-background-subtle-secondary: ${({ theme }) => theme.colors.backgrounds.subtle.secondary};
+        --theme-background-subtle-disabled: ${({ theme }) => theme.colors.backgrounds.subtle.disabled};
+
         --theme-background-smoke-default: ${({ theme }) => theme.colors.backgrounds.smoke.default};
         --theme-background-acrylic-default: ${({ theme }) => theme.colors.backgrounds.acrylic.default};
         
@@ -105,6 +115,7 @@ const GlobalStyle = createGlobalStyle`
         --theme-color-stroke-card: ${({ theme }) => theme.lightScheme.stroke.card};
         --theme-color-stroke-divider: ${({ theme }) => theme.lightScheme.stroke.divider};
         --theme-color-stroke-surface: ${({ theme }) => theme.lightScheme.stroke.surface};
+        --theme-color-stroke-control: ${({ theme }) => theme.lightScheme.stroke.control};
 
         // Backgrounds Colors
         --theme-background-card-default: ${({ theme }) => theme.lightScheme.backgrounds.card.default};
@@ -118,6 +129,10 @@ const GlobalStyle = createGlobalStyle`
         --theme-background-layer-default: ${({ theme }) => theme.lightScheme.backgrounds.layer.default};
         --theme-background-layer-alt: ${({ theme }) => theme.lightScheme.backgrounds.layer.alt};
 
+        --theme-background-subtle-default: ${({ theme }) => theme.lightScheme.backgrounds.subtle.default};
+        --theme-background-subtle-secondary: ${({ theme }) => theme.lightScheme.backgrounds.subtle.secondary};
+        --theme-background-subtle-disabled: ${({ theme }) => theme.lightScheme.backgrounds.subtle.disabled};
+
         --theme-background-smoke-default: ${({ theme }) => theme.lightScheme.backgrounds.smoke.default};
         --theme-background-acrylic-default: ${({ theme }) => theme.lightScheme.backgrounds.acrylic.default};
     }
@@ -137,6 +152,7 @@ const GlobalStyle = createGlobalStyle`
         --theme-color-stroke-card: ${({ theme }) => theme.darkScheme.stroke.card};
         --theme-color-stroke-divider: ${({ theme }) => theme.darkScheme.stroke.divider};
         --theme-color-stroke-surface: ${({ theme }) => theme.darkScheme.stroke.surface};
+        --theme-color-stroke-control: ${({ theme }) => theme.darkScheme.stroke.control};
 
         // Backgrounds Colors
         --theme-background-card-default: ${({ theme }) => theme.darkScheme.backgrounds.card.default};
@@ -150,6 +166,10 @@ const GlobalStyle = createGlobalStyle`
         --theme-background-layer-default: ${({ theme }) => theme.darkScheme.backgrounds.layer.default};
         --theme-background-layer-alt: ${({ theme }) => theme.darkScheme.backgrounds.layer.alt};
 
+        --theme-background-subtle-default: ${({ theme }) => theme.darkScheme.backgrounds.subtle.default};
+        --theme-background-subtle-secondary: ${({ theme }) => theme.darkScheme.backgrounds.subtle.secondary};
+        --theme-background-subtle-disabled: ${({ theme }) => theme.darkScheme.backgrounds.subtle.disabled};
+
         --theme-background-smoke-default: ${({ theme }) => theme.darkScheme.backgrounds.smoke.default};
         --theme-background-acrylic-default: ${({ theme }) => theme.darkScheme.backgrounds.acrylic.default};
     }
@@ -169,11 +189,7 @@ export function ThemeProvider({ theme, children }: ThemeProviderProps) {
                     name: theme
                 }}
             >
-                {Platform.OS === 'web' ? (
-                    <>
-                        <GlobalStyle />
-                    </>
-                ) : null}
+                {Platform.OS === 'web' ? <GlobalStyle /> : null}
                 {children}
             </StyledProvider>
         </ThemeContext.Provider>

packages/core/src/context/themeValues.ts

@@ -51,14 +51,21 @@ export const DEFAULT_LIGHT: ColorScheme = {
     stroke: {
         divider: 'rgba(0,0,0,0.0803)',
         card: 'rgba(0 0 0 / 6%)',
-        surface: 'rgba(0 0 0 / 6%)'
+        surface: 'rgba(0 0 0 / 6%)',
+        control: 'rgba(0, 0, 0, 0.45)'
     },
     accentText: {
         primary: 'rgb(3, 150, 255)',
         secondary: 'rgb(3, 150, 255)',
         disabled: 'rgb(3, 150, 255)'
     },
     backgrounds: {
+        control: {
+            default: 'hsla(210, 10%, 100%, 0.7)',
+            secondary: 'rgba(249, 249, 249, 0.5)',
+            tertiary: 'rgba(249, 249, 249, 0.3)',
+            disabled: 'hsla(210, 10%, 100%, 0.04)'
+        },
         card: {
             default: 'rgba(255,255,255,0.7)',
             secondary: 'rgba(246,246,246,0.5)',
@@ -117,9 +124,16 @@ export const DEFAULT_DARK: ColorScheme = {
     stroke: {
         divider: 'rgba(255, 255, 255, 0.0837)',
         card: 'rgba(255 255 255 / 14%)',
-        surface: 'rgba(255 255 255 / 18%)'
+        surface: 'rgba(255 255 255 / 18%)',
+        control: 'rgba(255, 255, 255, 0.54)'
     },
     backgrounds: {
+        control: {
+            default: 'hsla(210, 10%, 100%, 0.061)',
+            secondary: 'hsla(210, 10%, 100%, 0.084)',
+            tertiary: 'hsla(210, 10%, 100%, 0.033)',
+            disabled: 'rgba(249, 249, 249, 0.3)'
+        },
         card: {
             default: '#FFFFFF0D',
             secondary: '#FFFFFF08',

packages/core/src/context/types.ts

@@ -23,6 +23,7 @@ export interface ColorScheme {
         divider: RGBA
         card: RGBA
         surface: RGBA
+        control: RGBA
     }
     backgrounds: {
         // Used to create `cards` t
@@ -32,6 +33,13 @@ export interface ColorScheme {
             tertiary: string
         }
 
+        control: {
+            default: string
+            secondary: string
+            tertiary: string
+            disabled: string
+        }
+
         // Used over under dialogs to block them out as inaccessible.
         subtle: {
             default: string

packages/mxui/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meshx-org/mxui",
     "description": "Button component for MXUI",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "Apache-2.0",
     "author": "Roland Szarka-Kovács <Roland.Szarka-Kovacs@meshx.co>",
     "homepage": "https://meshx.co/produts/mxui",
@@ -37,15 +37,15 @@
         "build": "bob build"
     },
     "dependencies": {
-        "@meshx-org/mxui-overlays": "0.7.20",
-        "@meshx-org/mxui-navigation": "0.7.20",
-        "@meshx-org/mxui-button": "0.7.20",
-        "@meshx-org/mxui-switch": "0.7.20",
-        "@meshx-org/mxui-textbox": "0.7.20",
-        "@meshx-org/mxui-slider": "0.7.20",
-        "@meshx-org/mxui-primitives": "0.7.20",
-        "@meshx-org/mxui-treeview": "0.7.20",
-        "@meshx-org/mxui-text": "0.7.20"
+        "@meshx-org/mxui-overlays": "0.7.21",
+        "@meshx-org/mxui-navigation": "0.7.21",
+        "@meshx-org/mxui-button": "0.7.21",
+        "@meshx-org/mxui-switch": "0.7.21",
+        "@meshx-org/mxui-textbox": "0.7.21",
+        "@meshx-org/mxui-slider": "0.7.21",
+        "@meshx-org/mxui-primitives": "0.7.21",
+        "@meshx-org/mxui-treeview": "0.7.21",
+        "@meshx-org/mxui-text": "0.7.21"
     },
     "devDependencies": {
         "@meshx-org/mxui-tsconfig": "*",

packages/navigation/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meshx-org/mxui-navigation",
     "description": "Navigation components for MXUI",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "Apache-2.0",
     "author": "Roland Szarka-Kovács <Roland.Szarka-Kovacs@meshx.co>",
     "homepage": "https://meshx.co/produts/mxui",

packages/navigation/src/tabs/index.tsx

@@ -1,41 +1,30 @@
 import React, { Children } from 'react'
 import { Tab } from '@headlessui/react'
-import { SubtleFill } from '@meshx-org/mxui-primitives'
 import { ControlState } from '@meshx-org/mxui-core'
+import { LinkButton } from '@meshx-org/mxui-button'
 import { Text } from '@meshx-org/mxui-text'
 import { TabViewProps, TabPanelsProps, ItemProps, TabListProps } from './types'
 import styled from 'styled-components'
-import { padding, PaddingProps } from 'styled-system'
+import { padding, color, ColorProps, PaddingProps } from 'styled-system'
 
 const StyledTab = styled.div`
     cursor: pointer;
     outline: none;
 `
 
-const StyledTabContent = styled.div`
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px 12px;
-    font-size: 14px;
-    line-height: 20px;
-    position: relative;
-`
-
 function Item(props: ItemProps) {
-    return <>{props.children}</>
+    return props.children
 }
 
 const Selector = styled.div`
     height: 3px;
-    width: 20px;
+    width: 32px;
     border-radius: 8px;
     background-color: rgba(3, 150, 255, 1);
 `
 
 const SelectorWrapper = styled.div`
-    bottom: 0;
+    bottom: 1px;
     position: absolute;
     width: 100%;
     display: flex;
@@ -46,18 +35,16 @@ const SelectorWrapper = styled.div`
 function TabInternal(props: any) {
     return (
         <Tab as={StyledTab}>
-            {({ selected }: any) => (
-                <SubtleFill data-state={selected ? ControlState.Hovered : ControlState.Rest}>
-                    <StyledTabContent>
-                        <Text
-                            variant="body"
-                            selectable={false}
-                            color={false ? 'text.disabled' : 'text.primary'}
-                            children={props.children}
-                        />
-                        <SelectorWrapper>{selected ? <Selector /> : null}</SelectorWrapper>
-                    </StyledTabContent>
-                </SubtleFill>
+            {({ selected }) => (
+                <LinkButton state={selected ? ControlState.Hovered : undefined}>
+                    <Text
+                        variant="body"
+                        selectable={false}
+                        color={false ? 'text.disabled' : 'text.primary'}
+                        children={props.children}
+                    />
+                    <SelectorWrapper>{selected ? <Selector /> : null}</SelectorWrapper>
+                </LinkButton>
             )}
         </Tab>
     )
@@ -68,7 +55,6 @@ const StyledTabList = styled(Tab.List)<TabListProps>`
     column-gap: ${(props) => props.theme.space[4]}px;
 
     border-bottom: 1px solid ${(props) => props.theme.colors.stroke.surface};
-    // padding: ${(props) => props.theme.space[3]}px 0px;
 
     ${padding}
 `
@@ -89,31 +75,32 @@ function TabList(props: TabListProps) {
     )
 }
 
-const StyledTabPanels = styled(Tab.Panels)`
+const StyledTabPanels = styled(Tab.Panels)<PaddingProps & ColorProps>`
     flex: 1;
-    background-color: var(--theme-background-layer-default);
 
+    ${color}
     ${padding}
 `
 
 function TabPanels(props: TabPanelsProps) {
     const { children, ...otherProps } = props
+    const { bg = 'backgrounds.layer.default', backgroundColor } = otherProps
 
     if (typeof children === 'function') {
         return <StyledTabPanels {...otherProps}>{children}</StyledTabPanels>
-    }
+    } else {
+        const arrayChildren = Children.toArray(children)
 
-    const arrayChildren = Children.toArray(children)
-
-    const panels = Children.map(arrayChildren, (child, index) => {
         return (
-            <Tab.Panel>
-                <Text>{child}</Text>
-            </Tab.Panel>
+            <StyledTabPanels {...otherProps}>
+                {Children.map(arrayChildren, (child) => (
+                    <Tab.Panel>
+                        <Text>{child}</Text>
+                    </Tab.Panel>
+                ))}
+            </StyledTabPanels>
         )
-    })
-
-    return <StyledTabPanels {...otherProps}>{panels}</StyledTabPanels>
+    }
 }
 
 const StyledTabView = styled(Tab.List)`

packages/navigation/src/tabs/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { PaddingProps } from 'styled-system'
+import { ColorProps, PaddingProps } from 'styled-system'
 
 export interface TabViewProps {
     children: ReactNode[]
@@ -11,7 +11,7 @@ interface TabPanelsRenderProps {
     selectedIndex: number
 }
 
-export interface TabPanelsProps extends PaddingProps {
+export interface TabPanelsProps extends PaddingProps, ColorProps {
     children:
         | ReactNode
         | ReactNode[]

packages/overlays/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meshx-org/mxui-overlays",
     "description": "Overlay component for MXUI",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "license": "Apache-2.0",
     "author": "Roland Szarka-Kovács <Roland.Szarka-Kovacs@meshx.co>",
     "homepage": "https://meshx.co",
@@ -36,8 +36,8 @@
         "build": "bob build"
     },
     "dependencies": {
-        "@meshx-org/mxui-core": "0.7.20",
-        "@meshx-org/mxui-primitives": "0.7.20",
+        "@meshx-org/mxui-core": "0.7.21",
+        "@meshx-org/mxui-primitives": "0.7.21",
         "@types/styled-components": "^5.1.26"
     },
     "devDependencies": {