chore(fs.dev): More theme tweaks
This commit is contained in:
Joost De Cock
parent
da7ff9ec43
commit
6d1e685c1f
11 changed files with 223 additions and 83 deletions
|
|
@ -1,8 +1,8 @@
|
|||
const Footer = ({ app }) => {
|
||||
return (
|
||||
<footer>
|
||||
<div className="theme-gradient h-8 w-full"></div>
|
||||
<div className="p-4 flex flex-row">
|
||||
<div className="theme-gradient h-8 w-full relative"></div>
|
||||
<div className="p-4 flex flex-row bg-neutral -mt-4 z-0">
|
||||
<p>Some content here</p>
|
||||
<p>Some more content here</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ const Left = props => (
|
|||
const Header = ({ app }) => {
|
||||
return (
|
||||
<header className={`
|
||||
bg-primary
|
||||
bg-neutral
|
||||
block
|
||||
sm:hidden
|
||||
z-10
|
||||
p-4
|
||||
z-30
|
||||
`}>
|
||||
<div className="p-2">
|
||||
<button
|
||||
className={`
|
||||
btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
|
||||
|
|
@ -29,6 +29,8 @@ const Header = ({ app }) => {
|
|||
: <>Show menu <Right /></>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className="theme-gradient h-2 w-full z-10 relative -mb-2"></div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useState } from 'react'
|
||||
import set from 'lodash.set'
|
||||
// Stores state in local storage
|
||||
import useLocalStorage from 'shared/hooks/useLocalStorage.js'
|
||||
// Translation
|
||||
|
|
@ -29,6 +30,19 @@ function useApp(full = true) {
|
|||
const openPrimaryMenu = () => setPrimaryMenu(true)
|
||||
const closePrimaryMenu = () => setPrimaryMenu(false)
|
||||
|
||||
/*
|
||||
* Hot-update navigation method
|
||||
*/
|
||||
const updateNavigation = (path, content) => {
|
||||
const newNavigation = {...navigation}
|
||||
if (typeof path === 'string') {
|
||||
path = (path.slice(0,1) === '/')
|
||||
? path.slice(1).split('/')
|
||||
: path.split('/')
|
||||
}
|
||||
setNavigation(set(navigation, path, content))
|
||||
}
|
||||
|
||||
/*
|
||||
* Translation method
|
||||
*
|
||||
|
|
@ -72,6 +86,7 @@ function useApp(full = true) {
|
|||
setTheme,
|
||||
startLoading: () => setLoading(true),
|
||||
stopLoading: () => setLoading(false),
|
||||
updateNavigation,
|
||||
|
||||
// State handlers
|
||||
togglePrimaryMenu,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ export default (props) => {
|
|||
<Page app={app} title='FIXME: Create homepage content'>
|
||||
<Logo size={200} theme={app.theme}/>
|
||||
<button className="btn btn-primary" onClick={app.togglePrimaryMenu}>toggle menu</button>
|
||||
<div className="theme-gradient loading">test</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
96
packages/freesewing.dev/pages/typography.js
Normal file
96
packages/freesewing.dev/pages/typography.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { useEffect } from 'react'
|
||||
import Page from 'shared/components/wrappers/page.js'
|
||||
import useApp from 'site/hooks/useApp.js'
|
||||
import Popout from 'shared/components/popout.js'
|
||||
|
||||
export default (props) => {
|
||||
const app = useApp()
|
||||
|
||||
useEffect(() => {
|
||||
app.updateNavigation(
|
||||
['typography'],
|
||||
{
|
||||
__title: 'Typography',
|
||||
__linktitle: 'Typography',
|
||||
__slug: 'typography',
|
||||
__order: 'typography'
|
||||
})
|
||||
}, [])
|
||||
|
||||
const p = (
|
||||
<p>
|
||||
This paragraph is here to show the vertical spacing between headings and paragraphs.
|
||||
In addition, let's make it a bit longer so we can see the line height as the text wraps.
|
||||
</p>
|
||||
)
|
||||
|
||||
return (
|
||||
<Page app={app} title='Typography'>
|
||||
<div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
|
||||
<p>This typography page shows an overview of different elements and how they are styled.</p>
|
||||
<p>It's a good starting point for theme development.</p>
|
||||
<h2>Headings (this is h2)</h2>
|
||||
{p}
|
||||
<h3>This is h3</h3>{p}
|
||||
<h4>This is h4</h4>{p}
|
||||
<h5>This is h5</h5>{p}
|
||||
<h6>This is h6</h6>{p}
|
||||
<h2>Links and buttons</h2>
|
||||
<p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
|
||||
<h3>Main button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-neutral">Neutral button</button>
|
||||
<button className="btn btn-primary">Primary button</button>
|
||||
<button className="btn btn-secondary">Secondary button</button>
|
||||
<button className="btn btn-accent">Accent button</button>
|
||||
</div>
|
||||
<h3>State button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-info">Info button</button>
|
||||
<button className="btn btn-success">Success button</button>
|
||||
<button className="btn btn-warning">Warning button</button>
|
||||
<button className="btn btn-error">Error button</button>
|
||||
</div>
|
||||
<h3>Other button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-ghost">Ghost button</button>
|
||||
<button className="btn btn-link">Link button</button>
|
||||
</div>
|
||||
<h3>Outlined button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-outline btn-neutral">Neutral button</button>
|
||||
<button className="btn btn-outline btn-primary">Primary button</button>
|
||||
<button className="btn btn-outline btn-secondary">Secondary button</button>
|
||||
<button className="btn btn-outline btn-accent">Accent button</button>
|
||||
</div>
|
||||
<h3>Button sizes</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-primary btn-lg">Large</button>
|
||||
<button className="btn btn-primary">Normal</button>
|
||||
<button className="btn btn-primary btn-sm">Small</button>
|
||||
<button className="btn btn-primary btn-xs">Tiny</button>
|
||||
<button className="btn btn-primary btn-lg btn-wide">Large wide</button>
|
||||
<button className="btn btn-primary btn-wide">Normal wide</button>
|
||||
<button className="btn btn-primary btn-sm btn-wide">Small wide</button>
|
||||
<button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
|
||||
</div>
|
||||
<h2>Popouts</h2>
|
||||
<p>The Popout component is what powers various custom MDX components under the hood:</p>
|
||||
{['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
|
||||
const props = {}
|
||||
props[type] = true
|
||||
return (
|
||||
<div key={type}>
|
||||
<h3 className="capitalize">{type}</h3>
|
||||
<Popout {...props}>
|
||||
<h5>I am the {type} title</h5>
|
||||
{p}
|
||||
</Popout>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
|
|||
for (const i in chunks) {
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -79,6 +79,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
|
|||
<div className={`
|
||||
h-1 w-full theme-gradient ${app.loading ? 'loading' : ''}
|
||||
fixed top-0 right-0 z-20
|
||||
-mt-1
|
||||
`}></div>
|
||||
<main className={`
|
||||
grow flex flex-row
|
||||
|
|
@ -90,7 +91,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
|
|||
<aside className={`
|
||||
fixed top-0 right-0
|
||||
${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
|
||||
pt-16
|
||||
pt-24
|
||||
sm:pt-4
|
||||
sm:relative sm:transform-none
|
||||
h-screen w-screen
|
||||
|
|
@ -101,6 +102,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
|
|||
sm:sticky
|
||||
overflow-y-scroll
|
||||
py-4
|
||||
z-20
|
||||
`}>
|
||||
<PrimaryNavigation app={app} active={slug}/>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import Icon from "shared/components/icon"
|
||||
|
||||
const colors = {
|
||||
note: 'accent',
|
||||
tip: 'secondary',
|
||||
note: 'primary',
|
||||
tip: 'accent',
|
||||
warning: 'error',
|
||||
fixme: 'warning',
|
||||
link: 'info',
|
||||
link: 'secondary',
|
||||
related: 'info',
|
||||
none: '',
|
||||
}
|
||||
|
|
@ -20,6 +20,10 @@ forceTailwind = <p className="border-warning bg-warning" />
|
|||
forceTailwind = <p className="text-warning" />
|
||||
forceTailwind = <p className="border-info bg-info" />
|
||||
forceTailwind = <p className="text-info" />
|
||||
forceTailwind = <p className="border-success bg-success" />
|
||||
forceTailwind = <p className="text-success" />
|
||||
forceTailwind = <p className="border-primary bg-primary" />
|
||||
forceTailwind = <p className="text-primary" />
|
||||
|
||||
const Popout = (props) => {
|
||||
let type = 'none'
|
||||
|
|
|
|||
|
|
@ -93,6 +93,20 @@
|
|||
svg.freesewing.pattern .fill-current { @apply fs-fill-current }
|
||||
}
|
||||
|
||||
/* Override DaisyUI button text color */
|
||||
.btn-info {
|
||||
color: var(--btn-info-content);
|
||||
}
|
||||
.btn-success {
|
||||
color: var(--btn-success-content);
|
||||
}
|
||||
.btn-warning {
|
||||
color: var(--btn-warning-content);
|
||||
}
|
||||
.btn-error {
|
||||
color: var(--btn-error-content);
|
||||
}
|
||||
|
||||
/* Theme gradient */
|
||||
.theme-gradient {
|
||||
background: var(--theme-gradient);
|
||||
|
|
@ -102,6 +116,8 @@
|
|||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
margin-top: 0;
|
||||
transition: margin-top 0.2s ease-out;
|
||||
}
|
||||
@keyframes MOVE-BG {
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -3,42 +3,43 @@ const gray = colors.neutral
|
|||
|
||||
module.exports = {
|
||||
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
|
||||
'primary': gray['300'],
|
||||
'primary-focus': colors.violet['300'],
|
||||
'primary-content': gray['900'],
|
||||
'primary': colors.violet['700'],
|
||||
'primary-focus': colors.violet['600'],
|
||||
'primary-content': colors.violet['50'],
|
||||
|
||||
'secondary': colors.violet['500'],
|
||||
'secondary-focus': colors.violet['400'],
|
||||
'secondary-content': colors.violet['900'],
|
||||
'secondary': colors.sky['500'],
|
||||
'secondary-focus': colors.sky['400'],
|
||||
'secondary-content': colors.sky['50'],
|
||||
|
||||
'accent': colors.emerald['500'],
|
||||
'accent-focus': colors.emerald['400'],
|
||||
'accent-content': gray['900'],
|
||||
'accent': colors.pink['500'],
|
||||
'accent-focus': colors.pink['400'],
|
||||
'accent-content': colors.pink['50'],
|
||||
|
||||
'neutral': gray['900'],
|
||||
'neutral-focus': gray['800'],
|
||||
'neutral-content': gray['300'],
|
||||
'neutral': colors.neutral['300'],
|
||||
'neutral-focus': colors.neutral['50'],
|
||||
'neutral-content': colors.neutral['900'],
|
||||
|
||||
'base-100': gray['900'],
|
||||
'base-200': gray['700'],
|
||||
'base-300': gray['600'],
|
||||
'base-content': gray['300'],
|
||||
'base-100': colors.neutral['900'],
|
||||
'base-200': colors.neutral['700'],
|
||||
'base-300': colors.neutral['600'],
|
||||
'base-content': colors.neutral['300'],
|
||||
|
||||
'info': colors.emerald['700'],
|
||||
'success': colors.green['500'],
|
||||
'warning': colors.amber['500'],
|
||||
'error': colors.red['400'],
|
||||
'info': colors.indigo['700'],
|
||||
'success': colors.green['700'],
|
||||
'warning': colors.orange['500'],
|
||||
'error': colors.red['700'],
|
||||
|
||||
'--btn-info-content': colors.neutral[50],
|
||||
'--btn-success-content': colors.neutral[50],
|
||||
'--btn-warning-content': colors.neutral[50],
|
||||
'--btn-error-content': colors.neutral[50],
|
||||
|
||||
'--theme-gradient': `repeating-linear-gradient(
|
||||
-45deg,
|
||||
${colors.gray[500]},
|
||||
${colors.gray[500]} 10px,
|
||||
transparent 10px,
|
||||
transparent 20px,
|
||||
${colors.violet[500]} 20px,
|
||||
${colors.violet[500]} 30px,
|
||||
transparent 30px,
|
||||
transparent 40px
|
||||
${colors.gray[300]},
|
||||
${colors.gray[300]} 15px,
|
||||
transparent 15px,
|
||||
transparent 25px
|
||||
)`,
|
||||
|
||||
'--code-background-color': '#111',
|
||||
|
|
|
|||
|
|
@ -1,45 +1,46 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
|
||||
const bg = '#002808'
|
||||
module.exports = {
|
||||
'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
|
||||
'primary': colors.lime['600'],
|
||||
'primary-focus': colors.lime['700'],
|
||||
'primary-content': colors.lime['100'],
|
||||
'primary': colors.lime['700'],
|
||||
'primary-focus': colors.lime['600'],
|
||||
'primary-content': colors.lime['50'],
|
||||
|
||||
'secondary': colors.lime['600'],
|
||||
'secondary-focus': colors.lime['500'],
|
||||
'secondary-content': colors.lime['100'],
|
||||
'secondary': colors.lime['700'],
|
||||
'secondary-focus': colors.lime['600'],
|
||||
'secondary-content': bg,
|
||||
|
||||
'accent': colors.yellow['400'],
|
||||
'accent-focus': colors.yellow['500'],
|
||||
'accent-content': colors.neutral['900'],
|
||||
'accent': colors.lime['700'],
|
||||
'accent-focus': colors.lime['600'],
|
||||
'accent-content': colors.yellow['200'],
|
||||
|
||||
'neutral': colors.lime['900'],
|
||||
'neutral-focus': colors.neutral['200'],
|
||||
'neutral-content': colors.lime['300'],
|
||||
'neutral': colors.lime['700'],
|
||||
'neutral-focus': colors.lime['600'],
|
||||
'neutral-content': colors.lime['200'],
|
||||
|
||||
'base-100': '#002808',
|
||||
'base-200': '#002808',
|
||||
'base-300': colors.lime['900'],
|
||||
'base-100': bg,
|
||||
'base-200': colors.lime['900'],
|
||||
'base-300': colors.lime['800'],
|
||||
'base-content': colors.lime['500'],
|
||||
|
||||
'info': colors.lime['700'],
|
||||
'success': colors.green['600'],
|
||||
'warning': colors.amber['400'],
|
||||
'error': colors.red['400'],
|
||||
'success': colors.lime['700'],
|
||||
'warning': colors.lime['700'],
|
||||
'error': colors.lime['700'],
|
||||
|
||||
'--btn-info-content': colors.teal[300],
|
||||
'--btn-success-content': colors.green[300],
|
||||
'--btn-warning-content': colors.orange[300],
|
||||
'--btn-error-content': colors.red[300],
|
||||
'--rounded-btn': '0',
|
||||
|
||||
'--theme-gradient': `repeating-linear-gradient(
|
||||
-45deg,
|
||||
${colors.lime[500]},
|
||||
${colors.lime[500]} 10px,
|
||||
transparent 10px,
|
||||
transparent 20px,
|
||||
${colors.lime[700]} 20px,
|
||||
${colors.lime[700]} 30px,
|
||||
transparent 30px,
|
||||
transparent 40px
|
||||
${colors.lime['700']},
|
||||
${colors.lime['700']} 15px,
|
||||
${bg} 15px,
|
||||
${bg} 30px
|
||||
)`,
|
||||
|
||||
'--code-background-color': '#002407',
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ module.exports = {
|
|||
// primary-focus: The :hover color for the primary button
|
||||
'primary-focus': colors.violet['600'],
|
||||
// primary-content: The text color for the primary button
|
||||
'primary-content': colors.violet['50'],
|
||||
'primary-content': colors.neutral['50'],
|
||||
|
||||
// secondary: The link color
|
||||
'secondary': colors.sky['500'],
|
||||
|
|
@ -59,37 +59,45 @@ module.exports = {
|
|||
'secondary-focus': colors.sky['400'],
|
||||
// secondary: An alternative link color for on dark backgrounds
|
||||
// Typically a light shade of the secondary color
|
||||
'secondary-content': colors.sky['300'],
|
||||
'secondary-content': colors.sky['50'],
|
||||
|
||||
// accent: The accent color is used to highlight active things
|
||||
// Should be something is positive/neutral. Avoid red or orange.
|
||||
'accent': colors.emerald['500'],
|
||||
'accent': colors.pink['400'],
|
||||
// accent-focus: The :hover color for the accent button
|
||||
'accent-focus': colors.emerald['400'],
|
||||
'accent-focus': colors.pink['300'],
|
||||
// accent-content: The text color for the accent button
|
||||
'accent-content': colors.neutral['900'],
|
||||
'accent-content': colors.pink['50'],
|
||||
|
||||
// neutral: Used as the background for the footer and code blocks.
|
||||
// Should always be dark(ish) because of prism syntax highlighting
|
||||
'neutral': colors.neutral['800'],
|
||||
'neutral': colors.neutral['900'],
|
||||
// neutral-focus: Typically a shade lighter than neutral
|
||||
'neutral-focus': colors.neutral['700'],
|
||||
// neutral-content: The text color on neutral backgrounds
|
||||
'neutral-content': colors.neutral['200'],
|
||||
'neutral-content': colors.neutral['50'],
|
||||
|
||||
// info: Used rarely, can be another color best somewhat neutral looking
|
||||
// and should work with the default text color
|
||||
'info': colors.violet['400'],
|
||||
'info': colors.indigo['600'],
|
||||
// Text color on the info button
|
||||
'--btn-info-content': colors.neutral[50],
|
||||
// success: Used rarely, but if it is it's in notifications indicating success
|
||||
// Typically some shade of green
|
||||
'success': colors.green['500'],
|
||||
'success': colors.green['600'],
|
||||
// Text color on the success button
|
||||
'--btn-success-content': colors.neutral[50],
|
||||
// warning: We don't do warnings, but this is used for the tabs under code blocks
|
||||
// and a couple of other UI elements.
|
||||
'warning': colors.amber['500'],
|
||||
'warning': colors.orange['500'],
|
||||
// Text color on the warning button
|
||||
'--btn-warning-content': colors.neutral[50],
|
||||
// error: Used rarely, but if it is it's in notifications indicating success
|
||||
// or the danger button
|
||||
// Typically some shade of red
|
||||
'error': colors.red['600'],
|
||||
// Text color on the error button
|
||||
'--btn-error-content': colors.neutral[50],
|
||||
|
||||
/* VARIOUS
|
||||
*
|
||||
|
|
@ -125,14 +133,10 @@ module.exports = {
|
|||
*/
|
||||
'--theme-gradient': `repeating-linear-gradient(
|
||||
-45deg,
|
||||
${colors.sky[400]},
|
||||
${colors.sky[400]} 10px,
|
||||
transparent 10px,
|
||||
transparent 20px,
|
||||
${colors.violet[400]} 20px,
|
||||
${colors.violet[400]} 30px,
|
||||
transparent 30px,
|
||||
transparent 40px
|
||||
${colors.gray[900]},
|
||||
${colors.gray[900]} 15px,
|
||||
transparent 15px,
|
||||
transparent 25px
|
||||
)`,
|
||||
|
||||
/* CODE HIGHLIGHTING COLORS
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue