From 3d45d958f6447c67eea572e3707230821a404d07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sz=2E=20Kov=C3=A1cs=20Roland?= Date: Sun, 12 Mar 2023 15:59:31 +0100 Subject: [PATCH] imporved support for SSG --- packages/button/package.json | 8 +-- packages/button/src/LinkButton.tsx | 2 +- packages/core/package.json | 2 +- packages/core/src/context/ThemeProvider.tsx | 26 ++++++-- packages/core/src/context/themeValues.ts | 18 ++++- packages/core/src/context/types.ts | 8 +++ packages/mxui/package.json | 20 +++--- packages/navigation/package.json | 2 +- packages/navigation/src/tabs/index.tsx | 69 ++++++++----------- packages/navigation/src/tabs/types.ts | 4 +- packages/overlays/package.json | 6 +- packages/primitives/package.json | 4 +- packages/primitives/src/fill/Fill.tsx | 74 +++++++-------------- packages/primitives/src/surface/Surface.tsx | 2 +- packages/searchbox/package.json | 6 +- packages/select/package.json | 6 +- packages/slider/package.json | 6 +- packages/slider/src/Slider.tsx | 28 ++------ packages/stories/package.json | 18 ++--- packages/text/package.json | 4 +- packages/textbox/package.json | 6 +- packages/toggle-switch/package.json | 6 +- packages/treeview/package.json | 6 +- 23 files changed, 158 insertions(+), 173 deletions(-) diff --git a/packages/button/package.json b/packages/button/package.json index ab82553d..abe7f7d1 100644 --- a/packages/button/package.json +++ b/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 ", "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": "*", diff --git a/packages/button/src/LinkButton.tsx b/packages/button/src/LinkButton.tsx index 5e5f8ae8..db4367ab 100644 --- a/packages/button/src/LinkButton.tsx +++ b/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} { diff --git a/packages/core/package.json b/packages/core/package.json index ca8c4bec..ffb221d1 100644 --- a/packages/core/package.json +++ b/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 ", "homepage": "https://meshx.co/produts/mxui", diff --git a/packages/core/src/context/ThemeProvider.tsx b/packages/core/src/context/ThemeProvider.tsx index b4291f2c..50c9a60f 100644 --- a/packages/core/src/context/ThemeProvider.tsx +++ b/packages/core/src/context/ThemeProvider.tsx @@ -33,12 +33,18 @@ 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}; @@ -46,6 +52,10 @@ const GlobalStyle = createGlobalStyle` --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' ? ( - <> - - - ) : null} + {Platform.OS === 'web' ? : null} {children} diff --git a/packages/core/src/context/themeValues.ts b/packages/core/src/context/themeValues.ts index 7412ceb8..07e42685 100644 --- a/packages/core/src/context/themeValues.ts +++ b/packages/core/src/context/themeValues.ts @@ -51,7 +51,8 @@ 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)', @@ -59,6 +60,12 @@ export const DEFAULT_LIGHT: ColorScheme = { 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', diff --git a/packages/core/src/context/types.ts b/packages/core/src/context/types.ts index bfb10322..54669c46 100644 --- a/packages/core/src/context/types.ts +++ b/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 diff --git a/packages/mxui/package.json b/packages/mxui/package.json index 374ed70a..f7376c6a 100644 --- a/packages/mxui/package.json +++ b/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 ", "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": "*", diff --git a/packages/navigation/package.json b/packages/navigation/package.json index e720238f..15ce3055 100644 --- a/packages/navigation/package.json +++ b/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 ", "homepage": "https://meshx.co/produts/mxui", diff --git a/packages/navigation/src/tabs/index.tsx b/packages/navigation/src/tabs/index.tsx index 77bd5d3e..cec7c277 100644 --- a/packages/navigation/src/tabs/index.tsx +++ b/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 ( - {({ selected }: any) => ( - - - - {selected ? : null} - - + {({ selected }) => ( + + + {selected ? : null} + )} ) @@ -68,7 +55,6 @@ const StyledTabList = styled(Tab.List)` 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)` 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 {children} - } + } else { + const arrayChildren = Children.toArray(children) - const arrayChildren = Children.toArray(children) - - const panels = Children.map(arrayChildren, (child, index) => { return ( - - {child} - + + {Children.map(arrayChildren, (child) => ( + + {child} + + ))} + ) - }) - - return {panels} + } } const StyledTabView = styled(Tab.List)` diff --git a/packages/navigation/src/tabs/types.ts b/packages/navigation/src/tabs/types.ts index 920bc830..a85e8d47 100644 --- a/packages/navigation/src/tabs/types.ts +++ b/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[] diff --git a/packages/overlays/package.json b/packages/overlays/package.json index 7b2db51b..629f4b49 100644 --- a/packages/overlays/package.json +++ b/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 ", "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": { diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 3be18e97..2b9a117b 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-primitives", "description": "Button component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -37,7 +37,7 @@ "build": "bob build" }, "dependencies": { - "@meshx-org/mxui-core": "0.7.20", + "@meshx-org/mxui-core": "0.7.21", "styled-system": "^5.1.5", "@types/styled-system": "^5.1.15", "@types/styled-components": "^5.1.26" diff --git a/packages/primitives/src/fill/Fill.tsx b/packages/primitives/src/fill/Fill.tsx index 59b2ee36..d3354061 100644 --- a/packages/primitives/src/fill/Fill.tsx +++ b/packages/primitives/src/fill/Fill.tsx @@ -66,29 +66,6 @@ const TextControlFillBase = styled(FillBase)` } ` -export const SubtleFill = styled(FillBase)` - border-radius: 4px; - - background: ${(props) => (props.theme.name == 'dark' ? ' rgba(255, 255, 255, 0)' : 'rgba(0, 0, 0, 0)')}; - - &:hover, - &[data-state='hovered'] { - background: ${(props) => - props.theme.name == 'dark' ? 'rgba(255, 255, 255, 0.0837)' : 'rgb(0, 0, 0, 0.0373)'} !important; - } - - &:active, - &[data-state='pressed'] { - background: ${(props) => - props.theme.name == 'dark' ? 'rgba(255, 255, 255, 0.0326)' : 'rgba(0, 0, 0, 0.0241)'} !important; - } - - &[data-state='disabled'] { - background: ${(props) => - props.theme.name == 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgb(0, 0, 0, 0)'} !important; - } -` - export const ControlFill = styled(FillBase)` ${borderRadius} @@ -128,17 +105,6 @@ function ariaHidden(props: any) { return { ...props, 'aria-hidden': true } } -function cardFillState(theme: DefaultTheme, state: ControlState) { - switch (state) { - case ControlState.Hovered: - return theme.colors.backgrounds.card.tertiary - case ControlState.Pressed: - return theme.colors.backgrounds.card.tertiary - default: - return theme.colors.backgrounds.card.default - } -} - const fillBase = css` z-index: -1; position: absolute; @@ -156,17 +122,17 @@ export const SubtleFillX = styled.div.attrs(ariaHidden)` &:hover, &[data-state='hovered'] { - background: ${(props) => props.theme.colors.backgrounds.subtle.default} !important; + background: var(--theme-background-subtle-default) !important; } &:active, &[data-state='pressed'] { - background: ${(props) => props.theme.colors.backgrounds.subtle.secondary} !important; + background: var(--theme-background-subtle-secondary) !important; } &:disabled, &[data-state='disabled'] { - background: ${(props) => props.theme.colors.backgrounds.subtle.disabled} !important; + background: var(--theme-background-subtle-disabled) !important; } ` @@ -174,49 +140,59 @@ export const ControlFillX = styled.div.attrs(ariaHidden)` ${fillBase} ${borderRadius} - background: ${(props) => - props.theme.name == 'dark' ? 'hsla(210, 10%, 100%, 0.061)' : 'hsla(210, 10%, 100%, 0.7)'}; + background: var(--theme-background-control-default); &:hover, &[data-state='hovered'] { - background: ${(props) => - props.theme.name == 'dark' ? 'hsla(210, 10%, 100%, 0.084)' : 'rgba(249, 249, 249, 0.5)'} !important; + background: var(--theme-background-control-secondary) !important; } &:active, &[data-state='pressed'] { - background: ${(props) => - props.theme.name == 'dark' ? 'hsla(210, 10%, 100%, 0.033)' : 'rgba(249, 249, 249, 0.3)'} !important; + background: var(--theme-background-control-tertiary) !important; } &:disabled, [data-state='disabled'] { - background: ${(props) => - props.theme.name == 'dark' ? 'rgba(249, 249, 249, 0.3)' : 'hsla(210, 10%, 100%, 0.04)'} !important; + background: var(--theme-background-control-disabled) !important; } ` export const SmokeFill = styled.div.attrs(ariaHidden)` ${fillBase} ${borderRadius} - background-color: ${({ theme }) => theme.colors.backgrounds.smoke.default}; + + background-color: var(--theme-background-smoke-default); ` export const LayerFill = styled.div.attrs((props) => ({ ...props, 'aria-hidden': true }))` ${fillBase} ${borderRadius} - background-color: ${({ theme }) => theme.colors.backgrounds.layer.default}; + + background-color: var(--theme-background-layer-default); ` export const AcrylicFill = styled.div.attrs(ariaHidden)` ${fillBase} ${borderRadius} + backdrop-filter: ${({ theme }) => (theme.name === 'light' ? 'blur(20px) saturate(3)' : 'blur(20px) saturate(3.5)')}; - background-color: ${({ theme }) => theme.colors.backgrounds.acrylic.default}; + background-color: var(--theme-background-acrylic-default); ` export const CardFill = styled.div.attrs(ariaHidden)` ${fillBase} ${borderRadius} - background-color: ${(props) => cardFillState(props.theme, props.state)}; + + background: var(--theme-background-card-default); + + &:hover, + &[data-state='hovered'] { + background: var(--theme-background-card-tertiary) !important; + } + + &:active, + &[data-state='pressed'] { + background: var(--theme-background-card-tertiary) !important; + } ` diff --git a/packages/primitives/src/surface/Surface.tsx b/packages/primitives/src/surface/Surface.tsx index 89ffcdb1..dbe0f7d5 100644 --- a/packages/primitives/src/surface/Surface.tsx +++ b/packages/primitives/src/surface/Surface.tsx @@ -44,7 +44,7 @@ export function CardSurface(props: CardSurfaceProps) { - + {children} diff --git a/packages/searchbox/package.json b/packages/searchbox/package.json index 0a763c80..ef153451 100644 --- a/packages/searchbox/package.json +++ b/packages/searchbox/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-searchbox", "description": "SearchBox component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co", @@ -36,8 +36,8 @@ "build": "bob build" }, "dependencies": { - "@meshx-org/mxui-textbox": "0.7.20", - "@meshx-org/mxui-overlays": "0.7.20", + "@meshx-org/mxui-textbox": "0.7.21", + "@meshx-org/mxui-overlays": "0.7.21", "styled-system": "^5.1.5" }, "devDependencies": { diff --git a/packages/select/package.json b/packages/select/package.json index 694d14e8..22c1530b 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-select", "description": "Select component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -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": { diff --git a/packages/slider/package.json b/packages/slider/package.json index 337a894a..e6ac4dda 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-slider", "description": "Slider component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -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", "styled-components": "^5.3.6", "react-slider": "^2.0.4" }, diff --git a/packages/slider/src/Slider.tsx b/packages/slider/src/Slider.tsx index fd56819a..2c513bb8 100644 --- a/packages/slider/src/Slider.tsx +++ b/packages/slider/src/Slider.tsx @@ -31,14 +31,7 @@ const StyledRail = styled.div` top: 9px; bottom: 9px; border-radius: 12px; - - ${StyledSliderWrapper}[data-theme='light'] & { - background: rgba(0, 0, 0, 0.45); - } - - ${StyledSliderWrapper}[data-theme='dark'] & { - background: rgba(255, 255, 255, 0.54); - } + background: var(--theme-color-stroke-control); ` const StyledTick = styled.span` @@ -50,6 +43,7 @@ const StyledTick = styled.span` position: absolute; width: 1px; height: 4px; + background: var(--theme-color-stroke-control); } &::after { @@ -59,16 +53,6 @@ const StyledTick = styled.span` &::before { top: 1px; } - - ${StyledSliderWrapper}[data-theme='light'] &::before, - ${StyledSliderWrapper}[data-theme='light'] &::after { - background: rgba(0, 0, 0, 0.45); - } - - ${StyledSliderWrapper}[data-theme='dark'] &::before, - ${StyledSliderWrapper}[data-theme='dark'] &::after { - background: rgba(255, 255, 255, 0.54); - } ` const StyledThumb = styled.div` @@ -155,7 +139,7 @@ export function Slider(props: SliderProps) { ) const renderThumb = (thumbProps: HTMLProps) => ( - + @@ -168,15 +152,15 @@ export function Slider(props: SliderProps) { const { left, right } = style as CSSProperties return trackState.index === 0 ? ( - + ) : ( - + ) } const renderMark = ({ style, ...markProps }: HTMLProps) => { const { left, ...rest } = style as CSSProperties - return + return } return ( diff --git a/packages/stories/package.json b/packages/stories/package.json index d71a192a..f1aea3e6 100644 --- a/packages/stories/package.json +++ b/packages/stories/package.json @@ -6,15 +6,15 @@ "storybook": "cross-env start-storybook -p 6006" }, "dependencies": { - "@meshx-org/mxui-button": "0.7.20", - "@meshx-org/mxui-switch": "0.7.20", - "@meshx-org/mxui-overlays": "0.7.20", - "@meshx-org/mxui-core": "0.7.20", - "@meshx-org/mxui-primitives": "0.7.20", - "@meshx-org/mxui-textbox": "0.7.20", - "@meshx-org/mxui-text": "0.7.20", - "@meshx-org/mxui-slider": "0.7.20", - "@meshx-org/mxui-treeview": "0.7.20", + "@meshx-org/mxui-button": "0.7.21", + "@meshx-org/mxui-switch": "0.7.21", + "@meshx-org/mxui-overlays": "0.7.21", + "@meshx-org/mxui-core": "0.7.21", + "@meshx-org/mxui-primitives": "0.7.21", + "@meshx-org/mxui-textbox": "0.7.21", + "@meshx-org/mxui-text": "0.7.21", + "@meshx-org/mxui-slider": "0.7.21", + "@meshx-org/mxui-treeview": "0.7.21", "@storybook/addon-react-native-web": "^0.0.19", "@storybook/react": "^6.5.15", "@storybook/manager-webpack5": "^6.5.16", diff --git a/packages/text/package.json b/packages/text/package.json index e4e87415..6b94aa1d 100644 --- a/packages/text/package.json +++ b/packages/text/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-text", "description": "Text component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -36,7 +36,7 @@ "build": "bob build" }, "dependencies": { - "@meshx-org/mxui-core": "0.7.20", + "@meshx-org/mxui-core": "0.7.21", "styled-system": "^5.1.5" }, "devDependencies": { diff --git a/packages/textbox/package.json b/packages/textbox/package.json index 602fdfed..a9a377a1 100644 --- a/packages/textbox/package.json +++ b/packages/textbox/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-textbox", "description": "TextBox component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -38,8 +38,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" }, "devDependencies": { "@meshx-org/mxui-tsconfig": "*", diff --git a/packages/toggle-switch/package.json b/packages/toggle-switch/package.json index 128f1ee5..11504c00 100644 --- a/packages/toggle-switch/package.json +++ b/packages/toggle-switch/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-switch", "description": "Switch component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -38,8 +38,8 @@ "build": "bob build" }, "dependencies": { - "@meshx-org/mxui-core": "0.7.20", - "@meshx-org/mxui-text": "0.7.20" + "@meshx-org/mxui-core": "0.7.21", + "@meshx-org/mxui-text": "0.7.21" }, "devDependencies": { "@types/styled-components": "^5.1.26", diff --git a/packages/treeview/package.json b/packages/treeview/package.json index c9c21efc..193fe561 100644 --- a/packages/treeview/package.json +++ b/packages/treeview/package.json @@ -1,7 +1,7 @@ { "name": "@meshx-org/mxui-treeview", "description": "TreeView component for MXUI", - "version": "0.7.20", + "version": "0.7.21", "license": "Apache-2.0", "author": "Roland Szarka-Kovács ", "homepage": "https://meshx.co/produts/mxui", @@ -38,8 +38,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" }, "devDependencies": { "@meshx-org/mxui-tsconfig": "*",