We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I am trying to use this addon with my styled components but theme is not updating on switching themes.
.story import { storiesOf } from '@storybook/react-native'; storiesOf('Theming', module) .addDecorator(withTheme) .addParameters({ themes: [ { name: 'Default Theme', ...DefaultTheme }, { name: 'Secondary Theme', ...SecondaryTheme, }, ], }) .add('Themes', ThemeStories); .rn-addons import '@storybook/addon-ondevice-actions/register'; import '@storybook/addon-ondevice-knobs/register'; import 'storybook-addon-ondevice-styled-theme/register'; Preview:
import { storiesOf } from '@storybook/react-native'; storiesOf('Theming', module) .addDecorator(withTheme) .addParameters({ themes: [ { name: 'Default Theme', ...DefaultTheme }, { name: 'Secondary Theme', ...SecondaryTheme, }, ], }) .add('Themes', ThemeStories);
import '@storybook/addon-ondevice-actions/register'; import '@storybook/addon-ondevice-knobs/register'; import 'storybook-addon-ondevice-styled-theme/register';
Themes :
`export const theme = { space: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128], fontSizes: [10, 12, 14, 16, 20, 24, 32, 36], fontWeights: [200, 400, 600], lineHeights: [16, 19, 22, 24, 32], borders: ['0px', '1px solid', '2px solid', '4px solid'], radii: [0, 4, 8, 12, 16, 30, 50, 100], sizes: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128], colors: { 'info': { light: '#D6F1FC', medium: '#3182CE', dark: '#092562', }, 'warning': { light: '#FDEDD1', medium: '#DD6B20', dark: '#9F3710', }, 'success': { light: '#D9FADB', medium: '#38A169', dark: '#0A4D44', }, 'danger': { light: '#FDE5D8', medium: '#E53E3E', dark: '#6D0B2D', }, 'primary': '#5F2F37', 'secondary': '#370E20', 'highlight': '#F0E0DA', 'accent': '#EEC4BE', 'muted': '#E2E2E2', 'text-muted': '#828282',
'black': '#111111', 'white': '#ffffff',
}, }; export const secondaryTheme = { space: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128], fontSizes: [10, 12, 14, 16, 20, 24, 32, 36], fontWeights: [200, 400, 600], lineHeights: [16, 19, 22, 24, 32], borders: ['0px', '1px solid', '2px solid', '4px solid'], radii: [0, 4, 8, 12, 16, 30, 50, 100], sizes: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128], colors: { 'info': { light: '#CCE6EC', medium: '#00819E', dark: '#005669', }, 'warning': { light: '#FDEDD1', medium: '#DD6B20', dark: '#9F3710', }, 'success': { light: '#D9FADB', medium: '#38A169', dark: '#2B450B', }, 'danger': { light: '#F1CED5', medium: '#BA0C2F', dark: '#A41F36', }, 'primary': '#BA0C2F', 'secondary': '#FFB81C', 'highlight': '#F0E0DA', 'accent': '#EEC4BE', 'muted': '#E2E2E2', 'text-muted': '#828282', 'black': '#111111', 'white': '#ffffff', }, }; `
cc : @h-des Many thanks in advance
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I am trying to use this addon with my styled components but theme is not updating on switching themes.
.story
![git](https://user-images.githubusercontent.com/42070594/175786961-92f62e66-2d87-45ee-b765-0a815d14e088.gif)
import { storiesOf } from '@storybook/react-native'; storiesOf('Theming', module) .addDecorator(withTheme) .addParameters({ themes: [ { name: 'Default Theme', ...DefaultTheme }, { name: 'Secondary Theme', ...SecondaryTheme, }, ], }) .add('Themes', ThemeStories);
.rn-addons
import '@storybook/addon-ondevice-actions/register'; import '@storybook/addon-ondevice-knobs/register'; import 'storybook-addon-ondevice-styled-theme/register';
Preview:
Themes :
`export const theme = {
space: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128],
fontSizes: [10, 12, 14, 16, 20, 24, 32, 36],
fontWeights: [200, 400, 600],
lineHeights: [16, 19, 22, 24, 32],
borders: ['0px', '1px solid', '2px solid', '4px solid'],
radii: [0, 4, 8, 12, 16, 30, 50, 100],
sizes: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128],
colors: {
'info': {
light: '#D6F1FC',
medium: '#3182CE',
dark: '#092562',
},
'warning': {
light: '#FDEDD1',
medium: '#DD6B20',
dark: '#9F3710',
},
'success': {
light: '#D9FADB',
medium: '#38A169',
dark: '#0A4D44',
},
'danger': {
light: '#FDE5D8',
medium: '#E53E3E',
dark: '#6D0B2D',
},
'primary': '#5F2F37',
'secondary': '#370E20',
'highlight': '#F0E0DA',
'accent': '#EEC4BE',
'muted': '#E2E2E2',
'text-muted': '#828282',
},
};
export const secondaryTheme = {
space: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128],
fontSizes: [10, 12, 14, 16, 20, 24, 32, 36],
fontWeights: [200, 400, 600],
lineHeights: [16, 19, 22, 24, 32],
borders: ['0px', '1px solid', '2px solid', '4px solid'],
radii: [0, 4, 8, 12, 16, 30, 50, 100],
sizes: [1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 56, 64, 80, 96, 112, 128],
colors: {
'info': {
light: '#CCE6EC',
medium: '#00819E',
dark: '#005669',
},
'warning': {
light: '#FDEDD1',
medium: '#DD6B20',
dark: '#9F3710',
},
'success': {
light: '#D9FADB',
medium: '#38A169',
dark: '#2B450B',
},
'danger': {
light: '#F1CED5',
medium: '#BA0C2F',
dark: '#A41F36',
},
'primary': '#BA0C2F',
'secondary': '#FFB81C',
'highlight': '#F0E0DA',
'accent': '#EEC4BE',
'muted': '#E2E2E2',
'text-muted': '#828282',
'black': '#111111',
'white': '#ffffff',
},
};
`
cc : @h-des Many thanks in advance
The text was updated successfully, but these errors were encountered: