From a7756f6ee3c2a6c3c94bef2eeaadadcc82efeeee Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 24 Aug 2021 13:27:40 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=94=20Improve=20the=20`Bluelib`=20stor?=
 =?UTF-8?q?y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bluelib.stories.jsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Bluelib.stories.jsx b/src/components/Bluelib.stories.jsx
index e09e1d0..7cc719f 100644
--- a/src/components/Bluelib.stories.jsx
+++ b/src/components/Bluelib.stories.jsx
@@ -3,6 +3,11 @@ import * as ReactDOM from "react-dom"
 import * as Decorators from "../utils/Decorators"
 import {Bluelib} from "./Bluelib"
 import Color from "color"
+import { LayoutThreeCol } from "./layouts/LayoutThreeCol"
+import { Box } from "./panels/Box"
+import { Heading } from "./common/Heading"
+import { Idiomatic } from "./semantics/Idiomatic"
+import { Mark } from "./semantics/Mark"
 
 
 export default {
@@ -64,7 +69,21 @@ export default {
 
 export const Paper = props => (
     <Bluelib {...props}>
-        <div>Hello world!</div>
+        <LayoutThreeCol>
+            <LayoutThreeCol.Center>
+                <Box>
+                    <Heading level={1}>
+                        Bluelib React
+                    </Heading>
+                    <p>
+                        This is a mini-webpage-in-a-page using <Idiomatic>Bluelib React</Idiomatic>!
+                    </p>
+                    <p>
+                        Test out the various themes by switching to the various <Mark>stories</Mark> of this component, or create your own by tweaking the <Mark>props</Mark> displayed below.
+                    </p>
+                </Box>
+            </LayoutThreeCol.Center>
+        </LayoutThreeCol>
     </Bluelib>
 )
 Paper.args = {
@@ -95,8 +114,8 @@ Sophon.args = {
 export const CustomRed = Paper.bind({})
 CustomRed.args = {
     ...Paper.args,
-    foregroundColor: "#ff0000",
+    foregroundColor: "#660000",
     backgroundColor: "#ffcccc",
-    accentColor: "#000000",
+    accentColor: "#ff0000",
     polarity: -1,
 }