diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js index f8a5e174e21..b82226ec757 100644 --- a/packages/freesewing.dev/pages/index.js +++ b/packages/freesewing.dev/pages/index.js @@ -2,11 +2,13 @@ import Page from 'shared/components/wrappers/page.js' import useApp from 'site/hooks/useApp.js' import ThemePicker from 'shared/components/theme-picker.js' import Popout from 'shared/components/popout' +import Logo from 'shared/components/logos/freesewing.js' export default (props) => { const app = useApp() return ( + test test test diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js index a04b4d3870f..aec067c7081 100644 --- a/packages/freesewing.shared/components/layouts/default.js +++ b/packages/freesewing.shared/components/layouts/default.js @@ -48,6 +48,8 @@ const DefaultLayout = props => { sm:bg-base-100 sm:max-w-[38.2%] sm:flex sm:flex-row-reverse + overflow-scroll + py-8 `}> diff --git a/packages/freesewing.shared/components/logos/freesewing.js b/packages/freesewing.shared/components/logos/freesewing.js new file mode 100644 index 00000000000..ac75e19652f --- /dev/null +++ b/packages/freesewing.shared/components/logos/freesewing.js @@ -0,0 +1,97 @@ +import React from 'react' +const colors = require('tailwindcss/colors') + +const stroke = { + light: 'none', + dark: 'none', + hax0r: 'none', + lgbtq: 'none', + trans: 'none', +} +let step = 0 + +const fill = { + light: ( + + + + + + ), + dark: ( + + + + + + ), + bureaucrats: ( + + + + + + ), + hax0r: ( + + {[0,1,2,3,4,5,6,7,8,9].map( i => ( + <> + + + + + ))} + + ), + lgbtq: ( + + {['red', 'orange', 'yellow', 'green', 'blue', 'violet'].map(c => { + let next = step + 100/6 + let stop = <> + + + + step = next + return stop + })} + + ), + trans: ( + + + + + + + + + + + + + ), +} + +const Logo = ({ size=false, className='', theme='light' }) => { + const svgProps = { + xmlns: 'http://www.w3.org/2000/svg', + viewBox: '0 0 48 48', + className: className + } + if (size) { + svgProps.width = size + svgProps.height = size + } + return ( + + {fill[theme]} + + + ) +} + +export default Logo diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js index b8a23fe88a9..ca0939517bc 100644 --- a/packages/freesewing.shared/components/navigation/primary.js +++ b/packages/freesewing.shared/components/navigation/primary.js @@ -21,7 +21,7 @@ const force = [ // Component for the collapse toggle const Chevron = ({w=8, m=2}) => @@ -30,6 +30,8 @@ const Chevron = ({w=8, m=2}) => Object.values(current) .filter(entry => (typeof entry === 'object')) +const linkClasses = "text-lg py-2 text-base-content hover:cursor-pointer hover:text-secondary bg-opacity-50" + // Component that renders a sublevel of navigation const SubLevel = ({ nodes={} }) => (
    @@ -38,23 +40,13 @@ const SubLevel = ({ nodes={} }) => (
  • - + { child?.__linktitle || child.__title } @@ -64,20 +56,12 @@ const SubLevel = ({ nodes={} }) => (
    • ) : ( -
  • -
    +
  • - {child.__linktitle} + + {child.__linktitle} + -
    • ) @@ -87,23 +71,17 @@ const SubLevel = ({ nodes={} }) => ( // Component that renders a toplevel of navigation const TopLevel = ({ icon, title, nav, current, slug, showChildren=false }) => ( -
    +
    {icon} - + {title} @@ -119,23 +97,18 @@ const TopLogo = ({ app }) => ( flex flex-row uppercase gap-4 font-bold text-lg items-center hover:cursor-row-resize - hover:bg-base-200 p-2 - text-primary + text-base-content `}> -
    - - freesewing.{app.site} - -

    {getTagline()}

    +
    + + + freesewing.{app.site} + + +

    {getTagline()}

    ) @@ -151,14 +124,8 @@ const TopTheme = ({ app }) => ( p-2 text-primary `}> - -
    + +
    Theme
    @@ -173,7 +140,7 @@ const Navigation = ({ app }) => { const output = [] for (const key of Object.keys(app.navigation).sort()) { if (hide.indexOf(key) === -1) output.push(} + icon={} title={key} slug={key} key={key} diff --git a/packages/freesewing.shared/themes/bureaucrats/index.js b/packages/freesewing.shared/themes/bureaucrats/index.js deleted file mode 100644 index 81c88d0fd51..00000000000 --- a/packages/freesewing.shared/themes/bureaucrats/index.js +++ /dev/null @@ -1,69 +0,0 @@ -const colors = require('tailwindcss/colors') -const gray = colors.neutral - -module.exports = { - icon: "👨‍💼", - config: { - 'fontFamily': 'Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol', - 'primary': colors.blue['600'], - 'primary-focus': colors.blue['500'], - 'primary-content': '#fff', - - 'secondary': colors.blue['600'], - 'secondary-focus': colors.blue['200'], - 'secondary-content': colors.blue['700'], - - 'accent': colors.blue['500'], - 'accent-focus': colors.yellow['400'], - 'accent-content': gray['900'], - - 'neutral': colors.blue['900'], - 'neutral-focus': colors.blue['800'], - 'neutral-content': colors.blue['100'], - - 'base-100': '#ffffff', - 'base-200': gray['200'], - 'base-300': gray['400'], - 'base-content': gray['700'], - - 'info': colors.blue['400'], - 'success': colors.green['600'], - 'warning': colors.amber['500'], - 'error': colors.red['600'], - - '--rounded-box': '2px', - '--rounded-btn': '2px', - - '--code-background-color': colors.blue['800'], - '--code-border-color': colors.blue['900'], - '--code-color': colors.blue['100'], - '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, - '--code-border-radius': '0', - '--code-border-style': 'solid', - '--code-border-width': 15, - '--code-outer-padding': '0 0.5rem', - '--code-inner-padding': '1rem', - '--code-color-keyword': colors.neutral['50'], - '--code-font-weight-keyword': 'bold', - '--code-color-entity': colors.neutral['50'], - '--code-font-weight-entity': 'bold', - '--code-color-constant': colors.blue['300'], - '--code-color-string': colors.sky['300'], - '--code-font-style-string': 'italic', - '--code-color-variable': colors.blue['300'], - '--code-color-comment': colors.blue['400'], - '--code-color-tag': colors.blue['100'], - '--code-color-property': colors.blue['300'], - '--code-font-weight-property': 'bold', - - - '--pattern-fabric': colors.neutral['700'], - '--pattern-lining': colors.emerald['500'], - '--pattern-interfacing': colors.neutral['400'], - '--pattern-canvas': colors.amber['600'], - '--pattern-various': colors.red['500'], - '--pattern-mark': colors.blue['500'], - '--pattern-contrast': colors.pink['500'], - '--pattern-note': colors.violet['500'], - } -} diff --git a/packages/freesewing.shared/themes/index.js b/packages/freesewing.shared/themes/index.js index 958bbbf122e..2ee9e968bd9 100644 --- a/packages/freesewing.shared/themes/index.js +++ b/packages/freesewing.shared/themes/index.js @@ -1,13 +1,13 @@ const light = require('./light') const dark = require('./dark') -const bureaucrats = require('./bureaucrats') -const kindergarten = require('./kindergarten') const hax0r = require('./hax0r') +const lgbtq = require('./lgbtq') +const trans = require('./trans') module.exports = { light, dark, - bureaucrats, - kindergarten, hax0r, + lgbtq, + trans, } diff --git a/packages/freesewing.shared/themes/kindergarten/index.js b/packages/freesewing.shared/themes/kindergarten/index.js deleted file mode 100644 index cc586e36c6e..00000000000 --- a/packages/freesewing.shared/themes/kindergarten/index.js +++ /dev/null @@ -1,75 +0,0 @@ -const colors = require('tailwindcss/colors') -const gray = colors.neutral - -module.exports = { - icon: "🐕", - config: { - 'fontFamily': "Chalkboard,comic sans ms,\"sanssecondaryerif\"", - 'primary': colors.emerald['600'], - 'primary-focus': colors.emerald['500'], - 'primary-content': '#fff', - - 'secondary': colors.fuchsia['600'], - 'secondary-focus': colors.fuchsia['500'], - 'secondary-content': colors.gray['800'], - - 'accent': colors.green['500'], - 'accent-focus': colors.yellow['400'], - 'accent-content': gray['900'], - - 'neutral': colors.emerald['900'], - 'neutral-focus': gray['200'], - 'neutral-content': colors.emerald['100'], - - 'base-100': colors.yellow['200'], - 'base-200': colors.yellow['300'], - 'base-300': colors.yellow['400'], - 'base-content': gray['700'], - - 'info': colors.pink['400'], - 'success': colors.green['600'], - 'warning': colors.amber['600'], - 'error': colors.red['600'], - - '--rounded-btn': '10rem', - - '--code-background-color': colors.emerald['900'], - '--code-border-color': colors.yellow['400'], - '--code-color': colors.neutral['200'], - '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, - '--code-border-radius': '1.5rem', - '--code-border-style': 'dashed', - '--code-border-width': 4, - '--code-outer-padding': '0 0.5rem', - '--code-inner-padding': '1rem', - '--code-color-keyword': colors.yellow['400'], - '--code-font-weight-keyword': 'bold', - '--code-color-entity': colors.pink['300'], - '--code-font-weight-entity': 'bold', - '--code-color-constant': colors.lime['300'], - '--code-color-string': colors.sky['300'], - '--code-font-style-string': 'italic', - '--code-color-variable': colors.indigo['300'], - '--code-color-comment': colors.neutral['600'], - '--code-color-tag': colors.green['600'], - '--code-color-property': colors.yellow['200'], - '--code-font-weight-property': 'bold', - '--pattern-fabric': colors.neutral['700'], - '--pattern-lining': colors.emerald['500'], - '--pattern-interfacing': colors.neutral['400'], - '--pattern-canvas': colors.amber['600'], - '--pattern-various': colors.red['500'], - '--pattern-mark': colors.blue['500'], - '--pattern-contrast': colors.pink['500'], - '--pattern-note': colors.violet['500'], - - ".mdx.prose a" : { - color: colors.fuchsia['600'], - 'text-decoration': 'none', - }, - ".mdx.prose a:hover" : { - color: colors.fuchsia['500'], - 'text-decoration': 'underline', - }, - } -} diff --git a/packages/freesewing.shared/themes/lgbtq/index.js b/packages/freesewing.shared/themes/lgbtq/index.js new file mode 100644 index 00000000000..df191b6d85a --- /dev/null +++ b/packages/freesewing.shared/themes/lgbtq/index.js @@ -0,0 +1,94 @@ +const colors = require('tailwindcss/colors') + +module.exports = { + // fontFamily: The font family to use. + 'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', + + // base-100: The default background color + 'base-100': colors.neutral['50'], + // base-200: A slightly different background color, used for hovers and so on + 'base-200': colors.neutral['200'], + // base-300: A shade midway between dark and light + 'base-300': colors.neutral['400'], + // base-content: The default text color + 'base-content': colors.neutral['700'], + + // primary: The main brand color and color of the primary button + 'primary': colors.sky['500'], + // primary-focus: The :hover color for the primary button + 'primary-focus': colors.sky['600'], + // primary-content: The text color for the primary button + 'primary-content': colors.sky['100'], + + // secondary: The link color + 'secondary': colors.violet['500'], + // secondary: The :hover link color + 'secondary-focus': colors.violet['400'], + // secondary: An alternative link color for on dark backgrounds + // Typically a light shade of the secondary color + 'secondary-content': colors.violet['300'], + + // 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-focus: The :hover color for the accent button + 'accent-focus': colors.emerald['400'], + // accent-content: The text color for the accent button + 'accent-content': colors.neutral['900'], + + // 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-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'], + + // info: Used rarely, can be another color best somewhat neutral looking + // and should work with the default text color + 'info': colors.pink['400'], + // success: Used rarely, but if it is it's in notifications indicating success + // Typically some shade of green + 'success': colors.green['600'], + // 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'], + // 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'], + + /* CODE HIGHLIGHTING COLORS + * + * These are variables to style highlighted code blocks. + * + * Specifically this first set applies to the wrapper around + * the highlighted code. + * The names should (hopefully) speak for themselves + */ + '--code-background-color': colors.neutral['100'], + '--code-border-color': colors.neutral['300'], + '--code-color': colors.neutral['900'], + '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, + '--code-border-radius': '0.5rem', + '--code-border-style': 'solid', + '--code-border-width': 1, + '--code-outer-padding': '0 0.5rem', + '--code-inner-padding': '1rem', + /* + * These variables are used to style the highlighted tokesn themselves + */ + '--code-color-keyword': colors.pink['500'], + '--code-font-weight-keyword': 'bold', + '--code-color-entity': colors.violet['500'], + '--code-font-weight-entity': 'bold', + '--code-color-constant': colors.lime['600'], + '--code-color-string': colors.sky['600'], + '--code-font-style-string': 'italic', + '--code-color-variable': colors.indigo['600'], + '--code-color-comment': colors.neutral['600'], + '--code-color-tag': colors.green['600'], + '--code-color-property': 'inherit', + '--code-font-weight-property': 'bold', +} + diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js index bbebc4b0e32..82317197a44 100644 --- a/packages/freesewing.shared/themes/light/index.js +++ b/packages/freesewing.shared/themes/light/index.js @@ -49,19 +49,19 @@ module.exports = { 'base-content': colors.neutral['700'], // primary: The main brand color and color of the primary button - 'primary': colors.neutral['900'], + 'primary': colors.violet['700'], // 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.neutral['200'], + 'primary-content': colors.violet['50'], // secondary: The link color - 'secondary': colors.violet['500'], + 'secondary': colors.sky['500'], // secondary: The :hover link color - 'secondary-focus': colors.violet['400'], + '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.violet['300'], + 'secondary-content': colors.sky['300'], // accent: The accent color is used to highlight active things // Should be something is positive/neutral. Avoid red or orange. diff --git a/packages/freesewing.shared/themes/trans/index.js b/packages/freesewing.shared/themes/trans/index.js new file mode 100644 index 00000000000..ef2e73fe37e --- /dev/null +++ b/packages/freesewing.shared/themes/trans/index.js @@ -0,0 +1,111 @@ +const colors = require('tailwindcss/colors') + +module.exports = { + + /* FONTS + * + * This will apply to everything except code blocks + */ + + // fontFamily: The font family to use. + 'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', + + /* COLORS + * + * These names are a bit 'bootstrap' like, which can be misleading. + * We don't really use primary and secondary colors, nor do we have + * a warning color and so on. + * However, these names are used under the hood by TailwindCSS + * and DaisyUI, so we're stuck with them. + * + * Read the descriptions below to understand what each color is used for. + */ + + // base-100: The default background color + 'base-100': colors.neutral['50'], + // base-200: A slightly different background color, used for hovers and so on + 'base-200': colors.neutral['200'], + // base-300: A shade midway between dark and light + 'base-300': colors.neutral['400'], + // base-content: The default text color + 'base-content': colors.neutral['700'], + + // primary: The main brand color and color of the primary button + 'primary': colors.sky['500'], + // primary-focus: The :hover color for the primary button + 'primary-focus': colors.sky['600'], + // primary-content: The text color for the primary button + 'primary-content': colors.sky['100'], + + // secondary: The link color + 'secondary': colors.violet['500'], + // secondary: The :hover link color + 'secondary-focus': colors.violet['400'], + // secondary: An alternative link color for on dark backgrounds + // Typically a light shade of the secondary color + 'secondary-content': colors.violet['300'], + + // 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-focus: The :hover color for the accent button + 'accent-focus': colors.emerald['400'], + // accent-content: The text color for the accent button + 'accent-content': colors.neutral['900'], + + // 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-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'], + + // info: Used rarely, can be another color best somewhat neutral looking + // and should work with the default text color + 'info': colors.pink['400'], + // success: Used rarely, but if it is it's in notifications indicating success + // Typically some shade of green + 'success': colors.green['600'], + // 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'], + // 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'], + + /* CODE HIGHLIGHTING COLORS + * + * These are variables to style highlighted code blocks. + * + * Specifically this first set applies to the wrapper around + * the highlighted code. + * The names should (hopefully) speak for themselves + */ + '--code-background-color': colors.neutral['100'], + '--code-border-color': colors.neutral['300'], + '--code-color': colors.neutral['900'], + '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, + '--code-border-radius': '0.5rem', + '--code-border-style': 'solid', + '--code-border-width': 1, + '--code-outer-padding': '0 0.5rem', + '--code-inner-padding': '1rem', + /* + * These variables are used to style the highlighted tokesn themselves + */ + '--code-color-keyword': colors.pink['500'], + '--code-font-weight-keyword': 'bold', + '--code-color-entity': colors.violet['500'], + '--code-font-weight-entity': 'bold', + '--code-color-constant': colors.lime['600'], + '--code-color-string': colors.sky['600'], + '--code-font-style-string': 'italic', + '--code-color-variable': colors.indigo['600'], + '--code-color-comment': colors.neutral['600'], + '--code-color-tag': colors.green['600'], + '--code-color-property': 'inherit', + '--code-font-weight-property': 'bold', +} +