From 796e901f185dae7d063f18d61663b000d6361861 Mon Sep 17 00:00:00 2001 From: Timo Zehnle <59875255+ti10le@users.noreply.github.com> Date: Fri, 17 Sep 2021 08:07:34 +0200 Subject: [PATCH] docs: initial core-theme (#1296) --- .changeset/few-peas-cheat.md | 7 + config/storybook/preview.js | 2 + docs/content/themes/core.mdx | 133 ++++++ docs/src/components/ThemeSwitch.tsx | 2 + themes/theme-core/README.md | 3 + themes/theme-core/package.json | 16 + themes/theme-core/src/colors.ts | 36 ++ themes/theme-core/src/index.ts | 620 ++++++++++++++++++++++++++ themes/theme-core/tsconfig.build.json | 3 + yarn.lock | 8 + 10 files changed, 830 insertions(+) create mode 100644 .changeset/few-peas-cheat.md create mode 100644 docs/content/themes/core.mdx create mode 100644 themes/theme-core/README.md create mode 100644 themes/theme-core/package.json create mode 100644 themes/theme-core/src/colors.ts create mode 100644 themes/theme-core/src/index.ts create mode 100644 themes/theme-core/tsconfig.build.json diff --git a/.changeset/few-peas-cheat.md b/.changeset/few-peas-cheat.md new file mode 100644 index 0000000000..c9b47997dc --- /dev/null +++ b/.changeset/few-peas-cheat.md @@ -0,0 +1,7 @@ +--- +"@marigold/storybook-config": patch +"docs": patch +"@marigold/theme-core": patch +--- + +docs: initial core-theme diff --git a/config/storybook/preview.js b/config/storybook/preview.js index 47238b661c..88bbc5f774 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -4,11 +4,13 @@ import { withThemes } from 'storybook-addon-themes/react'; import React from 'react'; import { MarigoldProvider } from '@marigold/components'; import b2bTheme from '@marigold/theme-b2b'; +import coreTheme from '@marigold/theme-core'; import unicornTheme from '@marigold/theme-unicorn'; // Theme Switch const themes = { b2b: b2bTheme, + core: coreTheme, unicorn: unicornTheme, }; diff --git a/docs/content/themes/core.mdx b/docs/content/themes/core.mdx new file mode 100644 index 0000000000..ba6a9f92ae --- /dev/null +++ b/docs/content/themes/core.mdx @@ -0,0 +1,133 @@ +--- +title: Core Theme +--- + +import { + Column, + Columns, + Container, + Heading, + Stack, + Text, +} from '@marigold/components'; +import { useStyles } from '@marigold/system'; + +# Core Theme + +The Core theme is also a b2b theme but should be used in all Reservix core applications that are not ready to use the new b2b-theme. + +## Breakpoints + +Standard breakpoints for shifting of menu and large-scale elements. We use two breakpoints at 768px and 1200px width: + +- small: <= 767px (mobile) +- medium: between 768px and 1200px (tablet, laptop) +- large: >= 1201px (desktop) + +## Space + +- none: 0 +- xxsmall: 4px +- xsmall: 8px +- small: 16px +- medium: 24px +- large: 32px +- xlarge: 40px +- xxlarge: 48px + +## Typography + +Arial, Helvetica, sans-serif for headings and for body text (font-weight: 900 & 400). + + + + Heading H1 + + + Heading H2 + + + Heading H3 + + + Heading H4 + + + Heading H5 + + + Heading H6 + + + +## Colors + +As a rule of thumb, any text displayed over colours with a classname number of 50 or above should be white. +Anything below 50 should have black text (gray-70 | #4b4b4b). + +
+ + + + + + + + + + + + + + + + + Primary + Secondary + Text + Background + Disabled + Error + Warning + Info + Success + + + +
diff --git a/docs/src/components/ThemeSwitch.tsx b/docs/src/components/ThemeSwitch.tsx index 6aa86403ff..5912c7b022 100644 --- a/docs/src/components/ThemeSwitch.tsx +++ b/docs/src/components/ThemeSwitch.tsx @@ -3,9 +3,11 @@ import { BaseTheme } from '@marigold/components'; import unicornTheme from '@marigold/theme-unicorn'; import b2bTheme from '@marigold/theme-b2b'; +import coreTheme from '@marigold/theme-core'; export const themes = { b2bTheme, + coreTheme, unicornTheme, }; diff --git a/themes/theme-core/README.md b/themes/theme-core/README.md new file mode 100644 index 0000000000..ebf5a722bf --- /dev/null +++ b/themes/theme-core/README.md @@ -0,0 +1,3 @@ +# `@marigold/theme-core` + +> Core theme diff --git a/themes/theme-core/package.json b/themes/theme-core/package.json new file mode 100644 index 0000000000..2e2cb7b726 --- /dev/null +++ b/themes/theme-core/package.json @@ -0,0 +1,16 @@ +{ + "name": "@marigold/theme-core", + "version": "0.1.0", + "description": "Marigold Core Theme", + "main": "dist/index.js", + "module": "dist/theme-core.esm.js", + "typings": "dist/index.d.ts", + "license": "MIT", + "dependencies": { + "@marigold/components": "workspace:*" + }, + "scripts": { + "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly", + "watch": "tsdx watch --tsconfig tsconfig.build.json --transpileOnly" + } +} diff --git a/themes/theme-core/src/colors.ts b/themes/theme-core/src/colors.ts new file mode 100644 index 0000000000..c823826e94 --- /dev/null +++ b/themes/theme-core/src/colors.ts @@ -0,0 +1,36 @@ +export const colors = { + gray00: '#ffffff', + gray10: '#fafafa', + gray20: '#f3f3f3', + gray30: '#e3e3e3', + gray40: '#cccccc', + gray50: '#8d8d8d', + gray60: '#6d6d6d', + gray70: '#4b4b4b', + gray80: '#2b2b2b', + gray90: '#0f0f0f', + orange10: '#fff8f1', + orange20: '#fdcca0', + orange40: '#f8ac67', + orange60: '#fa8005', + orange70: '#ea5200', + orange80: '#ae440a', + blue10: '#e8f4fa', + blue20: '#c1f0fc', + blue40: '#67dfff', + blue60: '#3ab3d5', + blue70: '#1d67b6', + blue80: '#0c3a6b', + green10: '#f9fed0', + green20: '#e8f57b', + green40: '#bacb2a', + green60: '#8bbd26', + green70: '#44a112', + green80: '#215107', + red10: '#fff8f8', + red20: '#fec8c9', + red40: '#f38a8a', + red60: '#dd4142', + red70: '#8b0027', + red80: '#4d0419', +}; diff --git a/themes/theme-core/src/index.ts b/themes/theme-core/src/index.ts new file mode 100644 index 0000000000..acc6721ec2 --- /dev/null +++ b/themes/theme-core/src/index.ts @@ -0,0 +1,620 @@ +import { BaseTheme } from '@marigold/components'; +import { colors } from './colors'; + +const selectButton = { + appearance: 'none', + position: 'relative', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'space-between', + overflow: 'hidden', + outline: 'none', + width: '100%', + lineHeight: 'heading', + px: 'xxsmall', + color: 'text', + bg: colors.gray00, +}; +const button = { + root: { + position: 'relative', + fontFamily: 'body', + fontWeight: 'body', + border: 'none', + borderRadius: '2px', + display: 'inline-flex', + }, + primary: { + color: 'background', + bg: 'primary', + ':hover': { + color: 'background', + bg: colors.orange40, + cursor: 'pointer', + }, + ':disabled': { + color: colors.gray40, + bg: colors.gray20, + cursor: 'not-allowed', + }, + }, + secondary: { + color: 'background', + bg: 'secondary', + ':hover': { + color: 'background', + bg: colors.gray60, + cursor: 'pointer', + }, + ':disabled': { + color: colors.gray40, + bg: colors.gray20, + cursor: 'not-allowed', + }, + }, + ghost: { + color: 'secondary', + border: '1px solid', + outlineColor: colors.gray70, + ':hover': { + color: 'secondary', + bg: colors.gray30, + cursor: 'pointer', + }, + ':disabled': { + color: 'disabled', + bg: colors.gray00, + outlineColor: 'disabled', + cursor: 'not-allowed', + }, + }, + text: { + color: 'secondary', + ':hover': { + color: 'secondary', + outlineColor: colors.gray70, + bg: colors.gray30, + cursor: 'pointer', + }, + ':disabled': { + color: 'disabled', + bg: colors.gray00, + cursor: 'not-allowed', + outline: 'none', + }, + }, + menu: { + color: 'secondary', + bg: 'background', + ':hover': { + color: 'background', + bg: colors.gray60, + cursor: 'pointer', + }, + ':disabled': { + color: colors.gray40, + bg: colors.gray20, + cursor: 'not-allowed', + }, + }, + select: { + ...selectButton, + border: '1px solid', + borderColor: '#aaa', + ':hover': { + cursor: 'pointer', + }, + ':focus': { + border: '1px solid', + borderColor: '#5897fb', + }, + ':disabled': { + bg: colors.gray20, + color: 'disabled', + cursor: 'not-allowed', + }, + error: { + ...selectButton, + border: '1px solid', + borderColor: 'error', + }, + open: { + ...selectButton, + borderTop: '1px solid', + borderRight: '1px solid', + borderLeft: '1px solid', + borderBottom: 'none', + borderColor: '#aaa', + borderTopRightRadius: '2px', + borderTopLeftRadius: '2px', + boxShadow: '0 1px 0 #fff inset', + backgroundImage: 'linear-gradient(#eee 20%, #fff 80%)', + }, + errorOpened: { + ...selectButton, + borderTop: '1px solid', + borderRight: '1px solid', + borderLeft: '1px solid', + borderBottom: 'none', + borderColor: 'error', + borderTopRightRadius: '2px', + borderTopLeftRadius: '2px', + boxShadow: '0 1px 0 #fff inset', + backgroundImage: 'linear-gradient(#eee 20%, #fff 80%)', + }, + }, + close: { + color: 'text', + bg: 'transparent', + ':hover': { + cursor: 'pointer', + }, + }, +}; +const text = { + root: { + fontFamily: 'body', + fontSize: '0.813rem', + lineHeight: 'body', + fontWeight: 'body', + }, + span: { + display: 'inline-block', + }, + p: { + display: 'inline-block', + margin: '0 0 8px', + ':last-child': { + marginBottom: 'small', + }, + }, +}; +const selectOption = { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 'body', + lineHeight: 'heading', + outline: 'none', + cursor: 'pointer', + color: 'text', + px: '6px', + listStyle: 'none', + bg: colors.gray00, +}; + +const theme: BaseTheme = { + breakpoints: ['768', '1200'], + space: { + none: 0, + xxsmall: 4, + xsmall: 8, + small: 16, + medium: 24, + large: 32, + xlarge: 40, + xxlarge: 48, + }, + fonts: { + body: 'Arial,Helvetica,sans-serif', + heading: 'Arial,Helvetica,sans-serif', + }, + fontSizes: { + xxsmall: '0.813rem', + xsmall: '1rem', + small: '1.125rem', + medium: '1.2rem', + large: '1.5rem', + xlarge: '2rem', + }, + fontWeights: { + body: 400, + heading: 900, + bold: 700, + }, + lineHeights: { + body: 1.125, + heading: 1.5, + }, + colors: { + ...colors, + text: '#511e04', + background: colors.gray10, + primary: colors.orange60, + secondary: colors.gray70, + disabled: colors.gray40, + error: '#f33', + warning: '#d80', + info: '#008', + success: '#080', + }, + alerts: { + error: { + borderStyle: 'solid', + borderColor: 'error', + color: 'error', + borderWidth: '1px 1px 1px 0px', + }, + warning: { + borderStyle: 'solid', + borderColor: 'warning', + color: 'warning', + borderWidth: '1px 1px 1px 0px', + }, + success: { + borderStyle: 'solid', + borderColor: 'success', + color: 'success', + borderWidth: '1px 1px 1px 0px', + }, + }, + badge: { + default: { + display: 'inline-flex', + alignItems: 'center', + fontFamily: 'body', + fontSize: 'xsmall', + fontWeight: 'body', + borderRadius: '8px', + border: '2px solid transparent', + whiteSpace: 'nowrap', + padding: '0.25rem 0.75rem', + mx: '0.5rem', + }, + }, + button: { + large: { + lineHeight: '46px', + paddingX: 'large', + fontSize: 'xsmall', + }, + medium: { + lineHeight: '30px', + paddingX: 'medium', + fontSize: '0.875', + }, + small: { + lineHeight: '24px', + paddingX: 'small', + fontSize: '0.875', + }, + primary: { + ...button.root, + ...button.primary, + }, + secondary: { + ...button.root, + ...button.secondary, + }, + ghost: { + ...button.root, + ...button.ghost, + }, + text: { + ...button.root, + ...button.text, + }, + menu: { + ...button.root, + ...button.menu, + }, + select: { + ...button.root, + ...button.select, + }, + close: { + ...button.root, + ...button.close, + }, + }, + checkbox: { + default: { + color: colors.gray70, + }, + }, + dialog: { + wrapper: { + display: 'block', + borderRadius: '2px', + paddingLeft: 'large', + paddingBottom: 'large', + }, + body: { + paddingTop: 'small', + }, + onClose: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'start', + paddingTop: 'xsmall', + paddingX: 'xsmall', + }, + }, + divider: { + regular: { + m: 'none', + my: 'small', + border: 0, + borderBottom: '1px solid', + }, + bold: { + m: 'none', + my: 'small', + border: 0, + borderBottom: '2px solid', + }, + }, + field: { + default: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 'body', + lineHeight: 'body', + color: 'text', + }, + }, + images: { + fullWidth: { + maxWidth: '100%', + height: 'auto', + }, + }, + input: { + default: { + display: 'block', + fontFamily: 'body', + color: 'text', + background: colors.gray00, + border: 'none', + borderRadius: '2px', + boxShadow: '0 0 0 1px #aaa', + outline: 'none', + padding: '0 4px', + lineHeight: '24px', + ':focus': { + boxShadow: '0 0 0 2px ' + colors.blue60, + }, + ':disabled': { + bg: colors.gray20, + color: colors.gray40, + cursor: 'not-allowed', + }, + }, + }, + label: { + above: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 'body', + lineHeight: 'body', + color: 'text', + }, + inline: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 'body', + lineHeight: 'body', + color: 'text', + }, + disabled: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 'body', + lineHeight: 'body', + color: colors.gray30, + }, + section: { + fontFamily: 'body', + fontSize: 'xsmall', + fontWeight: 'body', + lineHeight: '32px', + color: colors.gray50, + }, + }, + link: { + normal: { + color: '#900', + ':hover, :visited': { + textDecoration: 'none', + }, + }, + menu: { + color: 'text', + textDecoration: 'none', + }, + }, + menuItem: { + default: { + display: 'block', + fontFamily: 'body', + fontSize: 'xsmall', + fontWeight: 'body', + padding: 'xsmall', + bg: colors.gray10, + color: 'text', + ':hover': { + bg: colors.gray30, + cursor: 'pointer', + }, + }, + }, + messages: { + warning: { + borderStyle: 'solid', + borderColor: 'warning', + borderWidth: '2px 2px 2px 16px', + padding: '8px 16px 16px', + color: 'warning', + }, + error: { + borderStyle: 'solid', + borderColor: 'error', + borderWidth: '2px 2px 2px 16px', + padding: '8px 16px 16px', + color: 'error', + }, + info: { + borderStyle: 'solid', + borderColor: 'info', + borderWidth: '2px 2px 2px 16px', + padding: '8px 16px 16px', + color: 'info', + }, + title: { + mb: '8px', + }, + }, + text: { + body: { + ...text.root, + ...text.span, + }, + heading: { + ...text.root, + ...text.p, + }, + h1: { + ...text.root, + fontWeight: 'heading', + fontSize: 'xlarge', + lineHeight: '36px', + m: 'none', + }, + h2: { + ...text.root, + fontWeight: 'heading', + fontSize: 'large', + lineHeight: '27px', + m: 'none', + }, + h3: { + ...text.root, + fontWeight: 'heading', + fontSize: 'medium', + lineHeight: '21px', + m: 'none', + }, + h4: { + ...text.root, + fontWeight: 'heading', + fontSize: 'small', + m: 'none', + }, + h5: { + ...text.root, + fontWeight: 'heading', + fontSize: 'xsmall', + m: 'none', + }, + h6: { + ...text.root, + fontSize: 'xsmall', + textTransform: 'uppercase', + m: 'none', + }, + link: { + color: '#900', + ':hover': { + textDecoration: 'underline', + }, + }, + menuItemLink: { + color: 'text', + textDecoration: 'none', + }, + }, + textarea: { + default: { + fontFamily: 'body', + fontSize: 'xxsmall', + padding: '2px', + color: 'text', + background: colors.gray00, + border: 0, + boxShadow: '0 0 0 1px #aaa', + outline: 'none', + ':focus': { + borderRadius: '2px', + boxShadow: '0 0 0 2px ' + colors.blue60, + }, + ':disabled': { + bg: colors.gray20, + color: colors.gray40, + }, + }, + }, + select: { + __default: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 400, + lineHeight: 'heading', + color: 'text', + }, + disabled: { + fontFamily: 'body', + fontSize: 'xxsmall', + fontWeight: 400, + lineHeight: 'heading', + color: 'disabled', + cursor: 'not-allowed', + }, + listbox: { + __default: { + background: colors.gray00, + borderTop: 'none', + borderRight: '1px solid', + borderLeft: '1px solid', + borderBottom: '1px solid', + borderBottomRightRadius: '2px', + borderBottomLeftRadius: '2px', + borderColor: '#aaa', + outline: 'none', + px: 'xxsmall', + pb: 'xxsmall', + }, + error: { + background: colors.gray00, + borderTop: 'none', + borderRight: '1px solid', + borderLeft: '1px solid', + borderBottom: '1px solid', + borderBottomRightRadius: '2px', + borderBottomLeftRadius: '2px', + borderColor: 'error', + outline: 'none', + px: 'xxsmall', + pb: 'xxsmall', + }, + }, + option: { + __default: { + ...selectOption, + ':focus': { + color: colors.gray00, + bg: '#3875d7', + backgroundImage: 'linear-gradient(#3875d7 20%, #2a62bc 90%)', + }, + }, + selected: { + ...selectOption, + color: colors.gray00, + bg: '#3875d7', + backgroundImage: 'linear-gradient(#3875d7 20%, #2a62bc 90%)', + }, + disabled: { + ...selectOption, + cursor: 'not-allowed', + color: colors.gray40, + }, + }, + }, + validation: { + error: { + ...text.root, + fontSize: '0.813rem', + color: 'error', + }, + }, +}; + +export default theme; diff --git a/themes/theme-core/tsconfig.build.json b/themes/theme-core/tsconfig.build.json new file mode 100644 index 0000000000..df4a8197a2 --- /dev/null +++ b/themes/theme-core/tsconfig.build.json @@ -0,0 +1,3 @@ +{ + "extends": "@marigold/tsconfig" +} diff --git a/yarn.lock b/yarn.lock index f07f29e3ed..5685d7e61e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3704,6 +3704,14 @@ __metadata: languageName: unknown linkType: soft +"@marigold/theme-core@workspace:themes/theme-core": + version: 0.0.0-use.local + resolution: "@marigold/theme-core@workspace:themes/theme-core" + dependencies: + "@marigold/components": "workspace:*" + languageName: unknown + linkType: soft + "@marigold/theme-unicorn@workspace:themes/theme-unicorn": version: 0.0.0-use.local resolution: "@marigold/theme-unicorn@workspace:themes/theme-unicorn"