Light branding for the reference site (WordPress#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 <[email protected]>
up1512001 · Oct 2, 2024 · d660f37 · d660f37
1 parent bed3a43
commit d660f37
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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/[email protected] b/storybook/static/[email protected]
diff --git 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: './[email protected]',
+
+	// 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,
 } );