docs: initial core-theme (#1296)

.changeset/few-peas-cheat.md

@@ -0,0 +1,7 @@
+---
+"@marigold/storybook-config": patch
+"docs": patch
+"@marigold/theme-core": patch
+---
+
+docs: initial core-theme

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,
 };
 

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).
+
+<Stack space={24}>
+  <Heading as="h1" variant="h1">
+    Heading H1
+  </Heading>
+  <Heading as="h2" variant="h2">
+    Heading H2
+  </Heading>
+  <Heading as="h3" variant="h3">
+    Heading H3
+  </Heading>
+  <Heading as="h4" variant="h4">
+    Heading H4
+  </Heading>
+  <Heading as="h5" variant="h5">
+    Heading H5
+  </Heading>
+  <Heading as="h6" variant="h6">
+    Heading H6
+  </Heading>
+</Stack>
+
+## 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).
+
+<div>
+  <Columns>
+    <Column width={2}>
+      <Stack space={4}>
+        <Container
+          className={useStyles({
+            css: { bg: '#fa8005', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#4b4b4b', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#511e04', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#fafafa', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#e3e3e3', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#f33', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#d80', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#008', width: '96px', height: '24px' },
+          })}
+        />
+        <Container
+          className={useStyles({
+            css: { bg: '#080', width: '96px', height: '24px' },
+          })}
+        />
+      </Stack>
+    </Column>
+    <Column width={6}>
+      <Stack space={4}>
+        <Text>Primary</Text>
+        <Text>Secondary</Text>
+        <Text>Text</Text>
+        <Text>Background</Text>
+        <Text>Disabled</Text>
+        <Text>Error</Text>
+        <Text>Warning</Text>
+        <Text>Info</Text>
+        <Text>Success</Text>
+      </Stack>
+    </Column>
+  </Columns>
+</div>

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,
 };
 

themes/theme-core/README.md

@@ -0,0 +1,3 @@
+# `@marigold/theme-core`
+
+> Core theme

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"
+  }
+}

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',
+};