datahub/datahub-web-react/.storybook/storybook-theme.js
Anna Everhart 0b26ee0ad5
fix(): Update OSS to DataHub Brand (#13160)
Co-authored-by: John Joyce <john@acryl.io>
2025-04-11 10:33:42 -07:00

47 lines
1.4 KiB
JavaScript

import { create } from '@storybook/theming';
import brandImage from './storybook-logo.svg';
import theme, { typography } from '../src/alchemy-components/theme';
export default create({
// config
base: 'light',
brandTitle: 'DataHub Design System',
brandUrl: '/?path=/docs/',
brandImage: brandImage,
brandTarget: '_self',
// styles
fontBase: typography.fontFamily,
fontCode: 'monospace',
colorPrimary: theme.semanticTokens.colors.primary,
colorSecondary: theme.semanticTokens.colors.secondary,
// UI
appBg: theme.semanticTokens.colors['body-bg'],
appContentBg: theme.semanticTokens.colors['body-bg'],
appPreviewBg: theme.semanticTokens.colors['body-bg'],
appBorderColor: theme.semanticTokens.colors['border-color'],
appBorderRadius: 4,
// Text colors
textColor: theme.semanticTokens.colors['body-text'],
textInverseColor: theme.semanticTokens.colors['inverse-text'],
textMutedColor: theme.semanticTokens.colors['subtle-text'],
// Toolbar default and active colors
barTextColor: theme.semanticTokens.colors['body-text'],
barSelectedColor: theme.semanticTokens.colors['subtle-bg'],
barHoverColor: theme.semanticTokens.colors['subtle-bg'],
barBg: theme.semanticTokens.colors['body-bg'],
// Form colors
inputBg: theme.semanticTokens.colors['body-bg'],
inputBorder: theme.semanticTokens.colors['border-color'],
inputTextColor: theme.semanticTokens.colors['body-text'],
inputBorderRadius: 4,
// Grid
gridCellSize: 6,
});