From d660f373d4a72a4c372add1e07258d31e5d00bdf Mon Sep 17 00:00:00 2001 From: Au Pleguezuelo Date: Wed, 2 Oct 2024 17:18:18 -0400 Subject: [PATCH] Light branding for the reference site (#65764) * Update theme.js * auareyou changes Color changes and added static directory to swap out logo * Image swap * Typography * Update theme.js * Format storybook/theme.js * Logo lossless compression --------- Co-authored-by: Marco Ciampini --- storybook/main.js | 1 + storybook/static/wp-logo@2x.png | Bin 0 -> 5395 bytes storybook/theme.js | 35 ++++++++++++++++++++++++++++++-- 3 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 storybook/static/wp-logo@2x.png diff --git a/storybook/main.js b/storybook/main.js index 66e951b26b1de6..f111e9f5d8cd38 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -41,6 +41,7 @@ module.exports = { disableTelemetry: true, }, stories, + staticDirs: [ './static' ], addons: [ { name: '@storybook/addon-docs', diff --git a/storybook/static/wp-logo@2x.png b/storybook/static/wp-logo@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a95cd961902b01cbd7635676f703ba9da135642d GIT binary patch literal 5395 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 literal 0 HcmV?d00001 diff --git a/storybook/theme.js b/storybook/theme.js index c13de5b53d4f53..9e340119eb48f8 100644 --- a/storybook/theme.js +++ b/storybook/theme.js @@ -6,6 +6,37 @@ import { create } from '@storybook/theming/create'; export default create( { base: 'light', brandTitle: 'WordPress Components', - brandImage: - 'https://s.w.org/style/images/about/WordPress-logotype-wmark.png', + brandImage: './wp-logo@2x.png', + + // Typography + fontBase: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + fontCode: 'monospace', + + // + colorPrimary: '#3858E9', + colorSecondary: '#3858E9', + + // UI + appBg: '#ffffff', + appContentBg: '#ffffff', + appPreviewBg: '#ffffff', + appBorderColor: '#DCDCDE', + appBorderRadius: 4, + + // Text colors + textColor: '#10162F', + textInverseColor: '#ffffff', + + // Toolbar default and active colors + barTextColor: '#9E9E9E', + barSelectedColor: '#3858E9', + barHoverColor: '#3858E9', + barBg: '#ffffff', + + // Form colors + inputBg: '#ffffff', + inputBorder: '#10162F', + inputTextColor: '#10162F', + inputBorderRadius: 2, } );