From 6bc0d01ffcef6979f5cdc3c0b13be9948ee8f3b6 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 14 Sep 2024 18:50:43 +0100 Subject: [PATCH] use web theme values --- packages/ondevice-backgrounds/src/Swatch.tsx | 42 +- .../src/NoControlsWarning.tsx | 7 +- packages/ondevice-controls/src/PropField.tsx | 2 +- .../src/components/RadioSelect.tsx | 30 +- .../ondevice-controls/src/types/Color.tsx | 75 +-- packages/ondevice-controls/src/types/Date.tsx | 10 +- .../ondevice-controls/src/types/Number.tsx | 12 +- packages/react-native-theming/src/theme.ts | 522 +----------------- .../src/{newTheme.ts => web-theme.ts} | 15 +- 9 files changed, 113 insertions(+), 602 deletions(-) rename packages/react-native-theming/src/{newTheme.ts => web-theme.ts} (95%) diff --git a/packages/ondevice-backgrounds/src/Swatch.tsx b/packages/ondevice-backgrounds/src/Swatch.tsx index b1aeee0d23..e510b87b95 100644 --- a/packages/ondevice-backgrounds/src/Swatch.tsx +++ b/packages/ondevice-backgrounds/src/Swatch.tsx @@ -6,40 +6,42 @@ interface SwatchProps { setBackground: (background: string) => void; } -const PressableSwatch = styled.TouchableOpacity(({ theme }: any) => ({ - marginBottom: theme.tokens.spacing3, - borderWidth: theme.inputs.swatch.borderWidth, - borderColor: theme.inputs.swatch.borderColor, - borderRadius: theme.inputs.swatch.outerBorderRadius, - backgroundColor: theme.inputs.swatch.backgroundColor, - paddingVertical: theme.inputs.swatch.paddingVertical, - paddingHorizontal: theme.inputs.swatch.paddingHorizontal, +const PressableSwatch = styled.TouchableOpacity(({ theme }) => ({ + marginBottom: 10, + borderWidth: 1, + borderColor: theme.appBorderColor, + borderRadius: 6, + backgroundColor: theme.background.content, + paddingVertical: 4, + paddingHorizontal: 4, })); -const ColorSwatch = styled.View(({ theme, color }: any) => ({ - height: theme.inputs.swatch.height, +const ColorSwatch = styled.View<{ color: string }>(({ color, theme }) => ({ + height: 40, width: '100%', - borderRadius: theme.inputs.swatch.innerBorderRadius, + borderRadius: 4, backgroundColor: color, + borderColor: theme.appBorderColor, + borderWidth: 1, })); -const ValueContainer = styled.View(({ theme }: any) => ({ +const ValueContainer = styled.View(() => ({ flex: 1, flexDirection: 'row', justifyContent: 'space-between', - padding: theme.tokens.spacing1, + padding: 4, paddingBottom: 0, })); -const NameText = styled.Text(({ theme }: any) => ({ - fontSize: theme.inputs.swatch.fontSize, - color: theme.inputs.labelTextColor, - fontWeight: theme.inputs.swatch.nameTextWeight, +const NameText = styled.Text(({ theme }) => ({ + fontSize: theme.typography.size.s2, + color: theme.color.defaultText, + fontWeight: theme.typography.weight.bold, })); -const ValueText = styled.Text(({ theme }: any) => ({ - fontSize: theme.inputs.swatch.fontSize, - color: theme.inputs.labelTextColor, +const ValueText = styled.Text(({ theme }) => ({ + fontSize: theme.typography.size.s2, + color: theme.color.defaultText, })); const Swatch = ({ name, value, setBackground }: SwatchProps) => ( diff --git a/packages/ondevice-controls/src/NoControlsWarning.tsx b/packages/ondevice-controls/src/NoControlsWarning.tsx index 855681f4fa..eae3d738d3 100644 --- a/packages/ondevice-controls/src/NoControlsWarning.tsx +++ b/packages/ondevice-controls/src/NoControlsWarning.tsx @@ -2,12 +2,13 @@ import { styled } from '@storybook/react-native-theming'; import { Linking, View } from 'react-native'; const Paragraph = styled.Text(({ theme }) => ({ - marginBottom: theme.tokens.spacing3, - color: theme.text.primaryColor, + marginBottom: 16, + color: theme.color.defaultText, })); const LinkText = styled.Text(({ theme }) => ({ - color: theme.text.linkColor, + color: theme.color.secondary, + textDecorationLine: 'underline', })); const NoControlsWarning = () => { diff --git a/packages/ondevice-controls/src/PropField.tsx b/packages/ondevice-controls/src/PropField.tsx index 63b199fb75..fe543c9090 100644 --- a/packages/ondevice-controls/src/PropField.tsx +++ b/packages/ondevice-controls/src/PropField.tsx @@ -25,7 +25,7 @@ export interface Knob { } const InvalidTypeText = styled.Text(({ theme }) => ({ - color: theme.inputs.errorTextColor, + color: theme.color.negative, })); const InvalidType = ({ arg }: { arg: ArgType }) => ( diff --git a/packages/ondevice-controls/src/components/RadioSelect.tsx b/packages/ondevice-controls/src/components/RadioSelect.tsx index a6d7286482..580c70e632 100644 --- a/packages/ondevice-controls/src/components/RadioSelect.tsx +++ b/packages/ondevice-controls/src/components/RadioSelect.tsx @@ -1,5 +1,4 @@ import { styled } from '@storybook/react-native-theming'; -import React from 'react'; interface RadioProps { data: Array>; @@ -12,38 +11,37 @@ const RadioContainer = styled.View(({ isInline }: any) => ({ flexDirection: isInline ? 'row' : 'column', alignItems: isInline ? 'center' : 'flex-start', flexWrap: 'wrap', + rowGap: 10, })); -const RadioTouchable = styled.TouchableOpacity(({ theme }) => ({ +const RadioTouchable = styled.TouchableOpacity(() => ({ alignItems: 'center', flexDirection: 'row', - paddingVertical: theme.inputs.radio.itemSpacing, })); const RadioCircle = styled.View(({ theme }) => ({ - width: theme.inputs.radio.height, - height: theme.inputs.radio.height, - borderWidth: theme.inputs.radio.borderWidth, - borderColor: theme.inputs.radio.borderColor, - borderRadius: theme.tokens.borderRadius.round, - backgroundColor: theme.inputs.radio.backgroundColor, + width: 15, + height: 15, + borderWidth: 1, + borderColor: theme.appBorderColor, + borderRadius: 15, + backgroundColor: theme.background.content, alignItems: 'center', justifyContent: 'center', - paddingVertical: theme.inputs.radio.paddingVertical, - paddingHorizontal: theme.inputs.radio.paddingHorizontal, + padding: 2, })); const RadioInnerCircle = styled.View(({ theme, selected }: any) => ({ height: '100%', width: '100%', - borderRadius: theme.tokens.borderRadius.round, - backgroundColor: selected ? theme.inputs.radio.activeBackgroundColor : 'transparent', + borderRadius: 10, + backgroundColor: selected ? theme.color.positive : 'transparent', })); const RadioLabel = styled.Text(({ theme }) => ({ - fontSize: theme.inputs.radio.fontSize, - paddingStart: theme.inputs.radio.labelSpacing, - color: theme.inputs.labelTextColor, + fontSize: theme.typography.size.s1, + paddingStart: 10, + color: theme.color.defaultText, })); const RadioSelect = ({ data = [], value = '', onChange, isInline }: RadioProps) => { diff --git a/packages/ondevice-controls/src/types/Color.tsx b/packages/ondevice-controls/src/types/Color.tsx index a128375617..3fc3793e7a 100644 --- a/packages/ondevice-controls/src/types/Color.tsx +++ b/packages/ondevice-controls/src/types/Color.tsx @@ -19,54 +19,51 @@ export interface ColorProps { } const TouchableContainer = styled.View(({ theme }) => ({ - width: theme.inputs.swatch.height, - height: theme.inputs.swatch.height, - borderWidth: theme.inputs.swatch.borderWidth, - borderColor: theme.inputs.swatch.borderColor, - borderRadius: theme.inputs.swatch.outerBorderRadius, - paddingVertical: theme.inputs.swatch.paddingVertical, - paddingHorizontal: theme.inputs.swatch.paddingHorizontal, - backgroundColor: theme.inputs.swatch.backgroundColor, + width: 40, + height: 40, + borderWidth: 1, + borderColor: theme.appBorderColor, + borderRadius: 6, + padding: 3, + backgroundColor: theme.background.content, })); -const Touchable = styled.TouchableOpacity<{ color: string }>(({ theme, color }) => ({ +const Touchable = styled.TouchableOpacity<{ color: string }>(({ color }) => ({ width: '100%', height: '100%', - borderRadius: theme.inputs.swatch.innerBorderRadius, + borderRadius: 4, backgroundColor: color, })); const WebInput = styled('input' as any)(({ theme }) => ({ - width: theme.inputs.swatch.height, - height: theme.inputs.swatch.height, - borderWidth: theme.inputs.swatch.borderWidth, - borderColor: theme.inputs.swatch.borderColor, - borderRadius: theme.inputs.swatch.outerBorderRadius, - paddingVertical: theme.inputs.swatch.paddingVertical, - paddingHorizontal: theme.inputs.swatch.paddingHorizontal, - backgroundColor: theme.inputs.swatch.backgroundColor, + width: 40, + height: 40, + borderWidth: 1, + borderColor: theme.appBorderColor, + borderRadius: 6, + paddingVertical: 2, + paddingHorizontal: 2, + backgroundColor: theme.background.content, })); const ButtonTouchable = styled.TouchableOpacity<{ primary?: boolean }>(({ theme, primary }) => { - const buttonTheme = primary ? theme.button.primary : theme.button.secondary; return { - backgroundColor: buttonTheme.backgroundColor, - borderRadius: buttonTheme.borderRadius, - borderWidth: buttonTheme.borderWidth, - borderColor: buttonTheme.borderColor, - paddingVertical: theme.button.paddingVertical, - paddingHorizontal: theme.button.paddingHorizontal, + backgroundColor: primary ? theme.color.secondary : theme.button.background, + borderRadius: 6, + borderWidth: 1, + borderColor: primary ? theme.color.secondary : theme.button.border, + paddingVertical: 6, + paddingHorizontal: 20, justifyContent: 'center', alignItems: 'center', }; }); const ButtonText = styled.Text<{ primary?: boolean }>(({ theme, primary }) => { - const buttonTheme = primary ? theme.button.primary : theme.button.secondary; return { - color: buttonTheme.textColor, - fontSize: theme.button.fontSize, - fontWeight: theme.button.fontWeight, + color: primary ? theme.color.inverseText : theme.color.defaultText, + fontSize: theme.typography.size.s2, + fontWeight: theme.typography.weight.bold, }; }); @@ -117,7 +114,7 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => { /> - CANCEL + Cancel value }: ColorProps) => { closeColorPicker(); }} > - SELECT + Select @@ -138,16 +135,20 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => { }; const InnerContainer = styled.View(({ theme }) => ({ - backgroundColor: theme.panel.backgroundColor, - borderWidth: theme.panel.borderWidth, - borderColor: theme.panel.borderColor, - borderRadius: theme.tokens.borderRadius.large, + backgroundColor: theme.background.content, + borderWidth: 1, + borderColor: theme.appBorderColor, + borderRadius: 10, margin: 24, - padding: theme.tokens.spacing3, + padding: 10, maxWidth: 350, height: 400, maxHeight: Dimensions.get('screen').height - 24 * 2, - ...theme.tokens.elevation.floating, + shadowColor: '#000000', + shadowOpacity: 0.2, + shadowOffset: { width: 0, height: 0 }, + shadowRadius: 16, + elevation: 10, })); const styles = StyleSheet.create({ diff --git a/packages/ondevice-controls/src/types/Date.tsx b/packages/ondevice-controls/src/types/Date.tsx index 0e95ad492b..0c280c6a3c 100644 --- a/packages/ondevice-controls/src/types/Date.tsx +++ b/packages/ondevice-controls/src/types/Date.tsx @@ -13,17 +13,17 @@ export interface DateProps { onChange: (value: Date) => void; } -const Touchable = styled.TouchableOpacity(({ theme }: any) => ({ +const Touchable = styled.TouchableOpacity(({ theme }) => ({ ...inputStyle({ theme, isTextInput: false }), })); -const WebInput = styled('input' as any)(({ theme }: any) => ({ +const WebInput = styled('input' as any)(({ theme }) => ({ ...inputStyle({ theme }), })); -const Label = styled.Text(({ theme }: any) => ({ - fontSize: theme.inputs.text.fontSize, - color: theme.inputs.text.textColor, +const Label = styled.Text(({ theme }) => ({ + fontSize: theme.typography.size.s1, + color: theme.input.color, })); type VisiblePicker = 'date' | 'time' | 'none'; diff --git a/packages/ondevice-controls/src/types/Number.tsx b/packages/ondevice-controls/src/types/Number.tsx index 3018a2b6a7..f79117b924 100644 --- a/packages/ondevice-controls/src/types/Number.tsx +++ b/packages/ondevice-controls/src/types/Number.tsx @@ -6,13 +6,15 @@ import { useResyncValue } from './useResyncValue'; import { Input } from './common'; const ValueContainer = styled.View({ flexDirection: 'row' }); + const LabelText = styled.Text(({ theme }) => ({ - color: theme.inputs.slider.labelTextColor, - fontSize: theme.inputs.slider.fontSize, + color: theme.color.mediumdark, + fontSize: theme.typography.size.s1, })); + const ValueText = styled.Text(({ theme }) => ({ - color: theme.inputs.slider.valueTextColor, - fontSize: theme.inputs.slider.fontSize, + color: theme.color.defaultText, + fontSize: theme.typography.size.s1, })); export interface NumberProps { @@ -54,8 +56,10 @@ const NumberType = ({ arg, isPristine, onChange = (value) => value }: NumberProp Value: + {arg.value} + ; +export type StorybookTheme = StorybookThemeWeb; -type FontWeight = TextStyle['fontWeight']; - -/** - * Primitive tokens used to build the theme. - * - * Ideally components should not use these values directly, and should prefer - * to use more semantic values from the theme. - */ -interface ThemeTokens { - spacing1: number; - spacing2: number; - spacing3: number; - spacing4: number; - spacing5: number; - spacing6: number; - fontSize: { - small: number; - smaller: number; - normal: number; - }; - color: { - navy: string; - offBlack: string; - black: string; - white: string; - grey200: string; - grey700: string; - grey800: string; - red500: string; - blue100: string; - blue200: string; - blue250: string; - blue300: string; - blue400: string; - blue600: string; - green500: string; - }; - borderRadius: { - small: number; - medium: number; - large: number; - round: number; - }; - borderWidthNormal: number; - /** Elevation shadows */ - elevation: { - floating: ShadowStyle; - }; -} - -interface ThemeButton { - textColor: string; - backgroundColor: string; - borderColor: string; - borderWidth: number; - borderRadius: number; -} - -export interface StorybookTheme extends StorybookThemeWeb { - tokens: ThemeTokens; - backgroundColor: string; - text: { - primaryColor: string; - secondaryColor: string; - linkColor: string; - }; - preview: { - containerBackgroundColor: string; - backgroundColor: string; - }; - /** Navigation bar and related area */ - navigation: { - backgroundColor: string; - borderColor: string; - borderWidth: number; - visibilityBorderRadius: number; - visibilityInnerBorderColor: string; - visibilityOuterBorderColor: string; - }; - /** Side panels (Story list, addons) */ - panel: { - backgroundColor: string; - borderWidth: number; - borderColor: string; - paddingVertical: number; - paddingHorizontal: number; - }; - /** Story list and list items */ - storyList: { - fontSize: number; - headerPaddingHorizontal: number; - headerPaddingVertical: number; - headerTextColor: string; - headerFontWeight: FontWeight; - storyPaddingHorizontal: number; - storyPaddingVertical: number; - storyIndent: number; - storyTextColor: string; - storyFontWeight: FontWeight; - storySelectedBackgroundColor: string; - storySelectedTextColor: string; - storySelectedFontWeight: FontWeight; - sectionSpacing: number; - sectionActiveBackgroundColor: string; - sectionBorderRadius: number; - search: { - fontSize: number; - textColor: string; - placeholderTextColor: string; - borderRadius: number; - borderColor: string; - borderWidth: number; - backgroundColor: string; - paddingVertical: number; - paddingHorizontal: number; - }; - }; - /** Buttons */ - button: { - fontSize: number; - fontWeight: FontWeight; - paddingVertical: number; - paddingHorizontal: number; - primary: ThemeButton; - secondary: ThemeButton; - }; - /** Tabs (navigation and addons) */ - tabs: { - fontSize: number; - fontWeight: FontWeight; - paddingVertical: number; - paddingHorizontal: number; - borderWidth: number; - borderRadius: number; - activeBorderColor: string; - activeBackgroundColor: string; - activeTextColor: string; - inactiveBorderColor: string; - inactiveBackgroundColor: string; - inactiveTextColor: string; - }; - /** Inputs (text, radio, slider, etc.) */ - inputs: { - errorTextColor: string; - labelFontSize: number; - labelTextColor: string; - text: { - fontSize: number; - textColor: string; - borderWidth: number; - borderColor: string; - backgroundColor: string; - borderRadius: number; - paddingVertical: number; - paddingHorizontal: number; - }; - radio: { - fontSize: number; - height: number; - borderWidth: number; - borderColor: string; - backgroundColor: string; - paddingVertical: number; - paddingHorizontal: number; - activeBackgroundColor: string; - itemSpacing: number; - labelSpacing: number; - }; - swatch: { - fontSize: number; - height: number; - borderWidth: number; - borderColor: string; - backgroundColor: string; - outerBorderRadius: number; - innerBorderRadius: number; - paddingVertical: number; - paddingHorizontal: number; - nameTextWeight: FontWeight; - }; - slider: { - fontSize: number; - labelTextColor: string; - valueTextColor: string; - }; - }; -} - -const tokens: ThemeTokens = { - spacing1: 4, - spacing2: 8, - spacing3: 12, - spacing4: 16, - spacing5: 20, - spacing6: 24, - fontSize: { - small: 12, - smaller: 14, - normal: 16, - }, - color: { - navy: '#001a23', - black: '#000', - offBlack: '#222', - white: '#ffffff', - grey200: '#dee2e3', - grey700: '#859499', - grey800: '#575757', - red500: '#ff4400', - blue100: '#f6f9fc', - blue200: '#e0eaf5', - blue250: '#dcebf9', - blue300: '#b2cbe6', - blue400: '#a3c1e0', - blue600: '#1ea7fd', - green500: '#66bf3c', - }, - borderRadius: { - small: 4, - medium: 6, - large: 8, - round: 100, - }, - borderWidthNormal: 1, - elevation: { - floating: { - shadowColor: '#000000', - shadowOpacity: 0.2, - shadowOffset: { width: 0, height: 0 }, - shadowRadius: 16, - elevation: 10, - }, - }, -} as const; - -const text: StorybookTheme['text'] = { - primaryColor: tokens.color.navy, - secondaryColor: tokens.color.grey700, - linkColor: '#0000ff', -}; - -const textOnDark: StorybookTheme['text'] = { - primaryColor: tokens.color.white, - secondaryColor: tokens.color.grey200, - linkColor: tokens.color.blue600, -}; export const typography = { weight: { regular: '400' as TextStyle['fontWeight'], @@ -268,7 +22,7 @@ export const typography = { }, } as const; -export const theme: StorybookTheme = { +export const theme: StorybookThemeWeb = { base: 'light', textMutedColor: color.dark, color: { @@ -338,7 +92,7 @@ export const theme: StorybookTheme = { paddingVertical: 6, }, - button$: { + button: { background: light.buttonBg || light.inputBg, border: light.buttonBorder || light.inputBorder, }, @@ -366,140 +120,9 @@ export const theme: StorybookTheme = { image: light.brandImage || (light.brandTitle ? null : undefined), target: light.brandTarget, }, - - // ONDEVICE - tokens, - text, - backgroundColor: tokens.color.white, - preview: { - containerBackgroundColor: tokens.color.white, - backgroundColor: tokens.color.white, - }, - navigation: { - backgroundColor: tokens.color.white, - borderColor: tokens.color.grey200, - borderWidth: tokens.borderWidthNormal, - visibilityBorderRadius: tokens.borderRadius.small, - visibilityInnerBorderColor: tokens.color.grey700, - visibilityOuterBorderColor: tokens.color.white, - }, - panel: { - backgroundColor: tokens.color.blue100, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue200, - paddingVertical: 0, - paddingHorizontal: tokens.spacing2, - }, - storyList: { - fontSize: tokens.fontSize.normal, - headerPaddingHorizontal: tokens.spacing2, - headerPaddingVertical: tokens.spacing2, - headerTextColor: text.primaryColor, - headerFontWeight: '500', - storyPaddingHorizontal: tokens.spacing2, - storyPaddingVertical: tokens.spacing1 * 1.5, - storyIndent: tokens.spacing6, - storyTextColor: text.primaryColor, - storyFontWeight: '400', - storySelectedBackgroundColor: tokens.color.blue600, - storySelectedTextColor: tokens.color.white, - storySelectedFontWeight: '700', - sectionSpacing: tokens.spacing2, - sectionActiveBackgroundColor: tokens.color.blue200, - sectionBorderRadius: tokens.borderRadius.medium, - search: { - fontSize: tokens.fontSize.normal, - textColor: text.primaryColor, - placeholderTextColor: text.secondaryColor, - borderRadius: tokens.borderRadius.round, - borderColor: tokens.color.blue400, - borderWidth: tokens.borderWidthNormal, - backgroundColor: tokens.color.white, - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing3, - }, - }, - button: { - fontSize: tokens.fontSize.smaller, - fontWeight: '600', - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing5, - primary: { - textColor: text.primaryColor, - backgroundColor: tokens.color.blue250, - borderColor: tokens.color.blue300, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.medium, - }, - secondary: { - textColor: text.primaryColor, - backgroundColor: 'transparent', - borderColor: tokens.color.blue300, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.medium, - }, - }, - tabs: { - fontSize: tokens.fontSize.small, - fontWeight: '500', - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing2 * 1.25, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.round, - activeBorderColor: tokens.color.blue300, - activeBackgroundColor: tokens.color.blue250, - activeTextColor: text.primaryColor, - inactiveBorderColor: 'transparent', - inactiveBackgroundColor: 'transparent', - inactiveTextColor: text.secondaryColor, - }, - inputs: { - errorTextColor: tokens.color.red500, - labelFontSize: tokens.fontSize.smaller, - labelTextColor: text.primaryColor, - text: { - fontSize: tokens.fontSize.smaller, - textColor: text.primaryColor, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.white, - borderRadius: tokens.borderRadius.medium, - paddingVertical: tokens.spacing1 * 1.5, - paddingHorizontal: tokens.spacing1 * 1.5, - }, - radio: { - fontSize: tokens.fontSize.smaller, - height: 20, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.white, - paddingVertical: 3, - paddingHorizontal: 3, - activeBackgroundColor: tokens.color.green500, - itemSpacing: tokens.spacing1, - labelSpacing: tokens.spacing2, - }, - swatch: { - fontSize: tokens.fontSize.smaller, - height: 40, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.white, - outerBorderRadius: tokens.borderRadius.medium, - innerBorderRadius: tokens.borderRadius.small, - paddingVertical: tokens.spacing1, - paddingHorizontal: tokens.spacing1, - nameTextWeight: '600', - }, - slider: { - fontSize: tokens.fontSize.smaller, - labelTextColor: text.secondaryColor, - valueTextColor: text.primaryColor, - }, - }, }; -export const darkTheme: StorybookTheme = { +export const darkTheme: StorybookThemeWeb = { base: 'dark', textMutedColor: '#798186', color: { @@ -570,7 +193,7 @@ export const darkTheme: StorybookTheme = { paddingVertical: 6, }, - button$: { + button: { background: dark.buttonBg || dark.inputBg, border: dark.buttonBorder || dark.inputBorder, }, @@ -598,135 +221,4 @@ export const darkTheme: StorybookTheme = { image: dark.brandImage || (dark.brandTitle ? null : undefined), target: dark.brandTarget, }, - - // ondevice - tokens, - text: textOnDark, - backgroundColor: tokens.color.offBlack, - preview: { - containerBackgroundColor: tokens.color.black, - backgroundColor: tokens.color.offBlack, - }, - navigation: { - backgroundColor: tokens.color.offBlack, //tokens.color.black, - borderColor: tokens.color.grey800, - borderWidth: tokens.borderWidthNormal, - visibilityBorderRadius: tokens.borderRadius.small, - visibilityInnerBorderColor: tokens.color.navy, - visibilityOuterBorderColor: tokens.color.navy, - }, - panel: { - backgroundColor: tokens.color.offBlack, //tokens.color.blue100, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.grey800, - paddingVertical: 0, - paddingHorizontal: tokens.spacing2, - }, - storyList: { - fontSize: tokens.fontSize.normal, - headerPaddingHorizontal: tokens.spacing2, - headerPaddingVertical: tokens.spacing2, - headerTextColor: textOnDark.primaryColor, - headerFontWeight: '500', - storyPaddingHorizontal: tokens.spacing2, - storyPaddingVertical: tokens.spacing1 * 1.5, - storyIndent: tokens.spacing6, - storyTextColor: textOnDark.primaryColor, - storyFontWeight: '400', - storySelectedBackgroundColor: tokens.color.navy, - storySelectedTextColor: tokens.color.white, - storySelectedFontWeight: '700', - sectionSpacing: tokens.spacing2, - sectionActiveBackgroundColor: tokens.color.grey800, - sectionBorderRadius: tokens.borderRadius.medium, - search: { - fontSize: tokens.fontSize.normal, - textColor: textOnDark.primaryColor, - placeholderTextColor: textOnDark.secondaryColor, - borderRadius: tokens.borderRadius.round, - borderColor: tokens.color.grey800, //tokens.color.blue400, - borderWidth: tokens.borderWidthNormal, - backgroundColor: tokens.color.grey800, - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing3, - }, - }, - button: { - fontSize: tokens.fontSize.smaller, - fontWeight: '600', - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing5, - primary: { - textColor: textOnDark.primaryColor, - backgroundColor: tokens.color.black, - borderColor: tokens.color.blue300, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.medium, - }, - secondary: { - textColor: textOnDark.primaryColor, - backgroundColor: 'transparent', - borderColor: tokens.color.blue300, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.medium, - }, - }, - tabs: { - fontSize: tokens.fontSize.small, - fontWeight: '500', - paddingVertical: tokens.spacing2, - paddingHorizontal: tokens.spacing2 * 1.25, - borderWidth: tokens.borderWidthNormal, - borderRadius: tokens.borderRadius.round, - activeBorderColor: tokens.color.blue300, - activeBackgroundColor: tokens.color.navy, - activeTextColor: textOnDark.primaryColor, - inactiveBorderColor: 'transparent', - inactiveBackgroundColor: 'transparent', - inactiveTextColor: textOnDark.secondaryColor, - }, - inputs: { - errorTextColor: tokens.color.red500, - labelFontSize: tokens.fontSize.smaller, - labelTextColor: textOnDark.primaryColor, - text: { - fontSize: tokens.fontSize.smaller, - textColor: textOnDark.primaryColor, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.black, - borderRadius: tokens.borderRadius.medium, - paddingVertical: tokens.spacing1 * 1.5, - paddingHorizontal: tokens.spacing1 * 1.5, - }, - radio: { - fontSize: tokens.fontSize.smaller, - height: 20, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.black, - paddingVertical: 3, - paddingHorizontal: 3, - activeBackgroundColor: tokens.color.green500, - itemSpacing: tokens.spacing1, - labelSpacing: tokens.spacing2, - }, - swatch: { - fontSize: tokens.fontSize.smaller, - height: 40, - borderWidth: tokens.borderWidthNormal, - borderColor: tokens.color.blue400, - backgroundColor: tokens.color.navy, - outerBorderRadius: tokens.borderRadius.medium, - innerBorderRadius: tokens.borderRadius.small, - paddingVertical: tokens.spacing1, - paddingHorizontal: tokens.spacing1, - nameTextWeight: '600', - }, - slider: { - fontSize: tokens.fontSize.smaller, - labelTextColor: textOnDark.secondaryColor, - valueTextColor: textOnDark.primaryColor, - }, - }, }; diff --git a/packages/react-native-theming/src/newTheme.ts b/packages/react-native-theming/src/web-theme.ts similarity index 95% rename from packages/react-native-theming/src/newTheme.ts rename to packages/react-native-theming/src/web-theme.ts index 4ab99b03d4..c1d488f94a 100644 --- a/packages/react-native-theming/src/newTheme.ts +++ b/packages/react-native-theming/src/web-theme.ts @@ -178,10 +178,13 @@ export interface Brand { } export interface StorybookThemeWeb { + base: 'light' | 'dark'; color: Color; background: Background; typography: Typography; + textMutedColor: string; + input: { border: string; background: string; @@ -191,6 +194,16 @@ export interface StorybookThemeWeb { paddingVertical: number; }; + button: { + background: string; + border: string; + }; + + boolean: { + background: string; + selectedBackground: string; + }; + // UI layoutMargin: number; appBorderColor: string; @@ -204,7 +217,7 @@ export interface StorybookThemeWeb { brand: Brand; - [key: string]: any; + // [key: string]: any; } export const dark: ThemeVars = {