From 4d441f4eec5cd34695cfacde5ed23f914e5cd5e3 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Wed, 22 Dec 2021 18:16:26 +0100 Subject: [PATCH] wip(fs.dev): Pattern themeing support --- .../components/mdx/example.js | 32 +- .../freesewing.shared/components/mdx/index.js | 15 +- .../config/tailwind.config.js | 4 +- packages/freesewing.shared/styles/globals.css | 77 ++++- .../freesewing.shared/themes/dark/index.js | 104 +++--- .../freesewing.shared/themes/hax0r/index.js | 130 ++++---- .../freesewing.shared/themes/lgbtq/index.js | 52 +-- .../freesewing.shared/themes/light/index.js | 309 +++++++++--------- .../freesewing.shared/themes/trans/index.js | 69 +--- 9 files changed, 393 insertions(+), 399 deletions(-) diff --git a/packages/freesewing.shared/components/mdx/example.js b/packages/freesewing.shared/components/mdx/example.js index a0dda15acca..940af054e2e 100644 --- a/packages/freesewing.shared/components/mdx/example.js +++ b/packages/freesewing.shared/components/mdx/example.js @@ -5,6 +5,8 @@ import tutorial from '@freesewing/tutorial' import Draft from '@freesewing/components/Draft' import Icon from 'shared/components/icon' //import Design from '../Workbench/Design' +// +const Design = props =>

TODO: Design

const Example = ({ pattern = 'examples', @@ -60,7 +62,7 @@ const Example = ({ const patternProps = patternInstance.getRenderProps() return (
-
+
-
-
- -
+
+
- +
+ +
-
{children}
+
{children}
{designMode && (
, Warning: props => , YouTube, - // Tailwind typography plugin overrides - h5: props =>
{props.children}
, - h6: props =>
{props.children}
, pre: props => , //code: props => , + // TODO: Handle PatternPage component + PatternPage: props => ( + +

+ The PatternPage component is not yet implemented. +
+ Below are the props: +

+ 
{JSON.stringify(props, null ,2)}
+ + ), + } export default mdxCustomComponents diff --git a/packages/freesewing.shared/config/tailwind.config.js b/packages/freesewing.shared/config/tailwind.config.js index dab4b22f8af..a983e299c3b 100644 --- a/packages/freesewing.shared/config/tailwind.config.js +++ b/packages/freesewing.shared/config/tailwind.config.js @@ -1,7 +1,5 @@ // Handle themes -const allThemes = require('../themes') -const themes = {} -for (const theme in allThemes) themes[theme] = allThemes[theme].config +const themes = require('../themes') module.exports = { content: [ diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css index dc6fcbd3ec7..658e5b15c0c 100644 --- a/packages/freesewing.shared/styles/globals.css +++ b/packages/freesewing.shared/styles/globals.css @@ -5,8 +5,9 @@ @import './code.css'; @import './svg-freesewing-draft.css'; -/* Applied styles for common HTML tags */ @layer components { + + /* Applied styles for common HTML tags */ h1 { @apply text-base-content text-4xl py-5 font-bold lg:text-6xl } h2 { @apply text-base-content text-3xl py-4 font-bold lg:text-4xl } h3 { @apply text-base-content text-2xl py-3 font-bold lg:text-3xl } @@ -14,13 +15,87 @@ h5 { @apply text-base-content text-lg py-1 font-bold lg:text-xl } h6 { @apply text-base-content text-base font-bold lg:text-lg } p { @apply text-base-content my-1 py-2 lg:text-xl } + /* mdx styles */ .mdx a { @apply text-secondary } .mdx a:hover { @apply text-secondary-focus } .mdx p > code { @apply text-info px-1 rounded-lg } .mdx ul { @apply pl-4 list-disc list-inside text-base-content } + + /* FreeSewing SVG output styles */ + .fs-stroke-fabric { stroke: var(--pattern-fabric); } + .fs-stroke-lining { stroke: var(--pattern-lining); } + .fs-stroke-interfacing { stroke: var(--pattern-interfacing); } + .fs-stroke-canvas { stroke: var(--pattern-canvas); } + .fs-stroke-various { stroke: var(--pattern-various); } + .fs-stroke-mark { stroke: var(--pattern-mark); } + .fs-stroke-contrast { stroke: var(--pattern-contrast); } + .fs-stroke-note { stroke: var(--pattern-note); } + svg.freesewing.draft path.fabric, + svg.freesewing.draft circle.fabric { @apply fs-stroke-fabric } + svg.freesewing.draft path.lining, + svg.freesewing.draft circle.lining { @apply fs-stroke-lining } + svg.freesewing.draft path.interfacing, + svg.freesewing.draft circle.interfacing { @apply fs-stroke-interfacing } + svg.freesewing.draft path.canvas, + svg.freesewing.draft circle.canvas { @apply fs-stroke-canvas } + svg.freesewing.draft path.various, + svg.freesewing.draft circle.various { @apply fs-stroke-various } + svg.freesewing.draft path.mark, + svg.freesewing.draft circle.mark { @apply fs-stroke-mark } + svg.freesewing.draft path.contrast, + svg.freesewing.draft circle.contrast { @apply fs-stroke-contrast } + svg.freesewing.draft path.note, + svg.freesewing.draft circle.note { @apply fs-stroke-note } + .fs-fill-fabric { fill: var(--pattern-fabric); } + .fs-fill-lining { fill: var(--pattern-lining); } + .fs-fill-interfacing { fill: var(--pattern-interfacing); } + .fs-fill-canvas { fill: var(--pattern-canvas); } + .fs-fill-various { fill: var(--pattern-various); } + .fs-fill-mark { fill: var(--pattern-mark); } + .fs-fill-contrast { fill: var(--pattern-contrast); } + .fs-fill-note { fill: var(--pattern-note); } + svg.freesewing.draft path.fill-fabric, + svg.freesewing.draft text.fill-fabric, + svg.freesewing.draft tspan.fill-fabric, + svg.freesewing.draft circle.fill-fabric { @apply fs-fill-fabric } + svg.freesewing.draft text.fill-lining, + svg.freesewing.draft tspan.fill-lining, + svg.freesewing.draft path.fill-lining, + svg.freesewing.draft circle.fill-lining { @apply fs-fill-lining } + svg.freesewing.draft text.fill-interfacing, + svg.freesewing.draft tspan.fill-interfacing, + svg.freesewing.draft path.fill-interfacing, + svg.freesewing.draft circle.fill-interfacing { @apply fs-fill-interfacing } + svg.freesewing.draft text.fill-canvas, + svg.freesewing.draft tspan.fill-canvas, + svg.freesewing.draft path.fill-canvas, + svg.freesewing.draft circle.fill-canvas { @apply fs-fill-canvas } + svg.freesewing.draft text.fill-various, + svg.freesewing.draft tspan.fill-various, + svg.freesewing.draft path.fill-various, + svg.freesewing.draft circle.fill-various { @apply fs-fill-various } + svg.freesewing.draft path.fill-mark, + svg.freesewing.draft text.fill-mark, + svg.freesewing.draft tspan.fill-mark, + svg.freesewing.draft circle.fill-mark { @apply fs-fill-mark } + svg.freesewing.draft text.fill-contrast, + svg.freesewing.draft tspan.fill-contrast, + svg.freesewing.draft path.fill-contrast, + svg.freesewing.draft circle.fill-contrast { @apply fs-fill-contrast } + svg.freesewing.draft text.fill-note, + svg.freesewing.draft tspan.fill-note, + svg.freesewing.draft path.fill-note, + svg.freesewing.draft circle.fill-note { @apply fs-fill-note } + + .fs-fill-bg { fill: var(--pattern-bg); } + .fs-fill-current { fill: currentColor; } + svg.freesewing.draft .fill-bg { @apply fs-fill-bg } + svg.freesewing.draft .fill-current { @apply fs-fill-current } } + + details { user-select: none; } details > summary > svg.details-toggle { transform: rotate(90deg); diff --git a/packages/freesewing.shared/themes/dark/index.js b/packages/freesewing.shared/themes/dark/index.js index 55c41e7e674..1bb621d1e59 100644 --- a/packages/freesewing.shared/themes/dark/index.js +++ b/packages/freesewing.shared/themes/dark/index.js @@ -2,65 +2,63 @@ const colors = require('tailwindcss/colors') const gray = colors.neutral module.exports = { - icon: "🌚", - config: { - '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'], + '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'], - 'secondary': colors.violet['500'], - 'secondary-focus': colors.violet['400'], - 'secondary-content': colors.violet['900'], + 'secondary': colors.violet['500'], + 'secondary-focus': colors.violet['400'], + 'secondary-content': colors.violet['900'], - 'accent': colors.emerald['500'], - 'accent-focus': colors.emerald['400'], - 'accent-content': gray['900'], + 'accent': colors.emerald['500'], + 'accent-focus': colors.emerald['400'], + 'accent-content': gray['900'], - 'neutral': gray['900'], - 'neutral-focus': gray['800'], - 'neutral-content': gray['300'], + 'neutral': gray['900'], + 'neutral-focus': gray['800'], + 'neutral-content': gray['300'], - 'base-100': gray['900'], - 'base-200': gray['700'], - 'base-300': gray['600'], - 'base-content': gray['300'], + 'base-100': gray['900'], + 'base-200': gray['700'], + 'base-300': gray['600'], + 'base-content': gray['300'], - 'info': colors.emerald['700'], - 'success': colors.green['500'], - 'warning': colors.amber['500'], - 'error': colors.red['400'], + 'info': colors.emerald['700'], + 'success': colors.green['500'], + 'warning': colors.amber['500'], + 'error': colors.red['400'], - '--code-background-color': '#111', - '--code-border-color': colors.neutral['800'], - '--code-color': colors.neutral['300'], - '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, - '--code-border-radius': '0.5rem', - '--code-border-style': 'solid', - '--code-border-width': 2, - '--code-outer-padding': '0 0.5rem', - '--code-inner-padding': '1rem', - '--code-color-keyword': colors.pink['400'], - '--code-font-weight-keyword': 'bold', - '--code-color-entity': colors.violet['400'], - '--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', + '--code-background-color': '#111', + '--code-border-color': colors.neutral['800'], + '--code-color': colors.neutral['300'], + '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, + '--code-border-radius': '0.5rem', + '--code-border-style': 'solid', + '--code-border-width': 2, + '--code-outer-padding': '0 0.5rem', + '--code-inner-padding': '1rem', + '--code-color-keyword': colors.pink['400'], + '--code-font-weight-keyword': 'bold', + '--code-color-entity': colors.violet['400'], + '--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['300'], - '--pattern-lining': colors.emerald['700'], - '--pattern-interfacing': colors.neutral['500'], - '--pattern-canvas': colors.amber['700'], - '--pattern-various': colors.red['700'], - '--pattern-mark': colors.blue['700'], - '--pattern-contrast': colors.pink['600'], - '--pattern-note': colors.violet['600'], + '--pattern-bg': colors.neutral['900'], + '--pattern-fabric': colors.neutral['300'], + '--pattern-lining': colors.emerald['700'], + '--pattern-interfacing': colors.neutral['500'], + '--pattern-canvas': colors.amber['700'], + '--pattern-various': colors.red['700'], + '--pattern-mark': colors.blue['700'], + '--pattern-contrast': colors.pink['600'], + '--pattern-note': colors.violet['600'], - } } diff --git a/packages/freesewing.shared/themes/hax0r/index.js b/packages/freesewing.shared/themes/hax0r/index.js index a5f3bac63ab..a5fdf6486a2 100644 --- a/packages/freesewing.shared/themes/hax0r/index.js +++ b/packages/freesewing.shared/themes/hax0r/index.js @@ -1,83 +1,73 @@ const colors = require('tailwindcss/colors') -const gray = colors.neutral module.exports = { - icon: "👩‍💻", - config: { - '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'], + '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'], - 'secondary': colors.lime['600'], - 'secondary-focus': colors.lime['500'], - 'secondary-content': colors.lime['100'], + 'secondary': colors.lime['600'], + 'secondary-focus': colors.lime['500'], + 'secondary-content': colors.lime['100'], - 'accent': colors.yellow['400'], - 'accent-focus': colors.yellow['500'], - 'accent-content': gray['900'], + 'accent': colors.yellow['400'], + 'accent-focus': colors.yellow['500'], + 'accent-content': colors.neutral['900'], - 'neutral': colors.lime['900'], - 'neutral-focus': gray['200'], - 'neutral-content': colors.lime['300'], + 'neutral': colors.lime['900'], + 'neutral-focus': colors.neutral['200'], + 'neutral-content': colors.lime['300'], - 'base-100': '#002808', - 'base-200': '#002808', - 'base-300': colors.lime['900'], - 'base-content': colors.lime['500'], + 'base-100': '#002808', + 'base-200': '#002808', + 'base-300': colors.lime['900'], + 'base-content': colors.lime['500'], - 'info': colors.lime['700'], - 'success': colors.green['600'], - 'warning': colors.amber['400'], - 'error': colors.red['400'], + 'info': colors.lime['700'], + 'success': colors.green['600'], + 'warning': colors.amber['400'], + 'error': colors.red['400'], - '--rounded-btn': '0', + '--rounded-btn': '0', - '--code-background-color': '#002407', - '--code-border-color': colors.lime['900'], - '--code-color': colors.lime['600'], - '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, - '--code-border-radius': 0, - '--code-border-style': 'solid', - '--code-border-width': 1, - '--code-outer-padding': '0 0.5rem', - '--code-inner-padding': '1rem', - '--code-color-keyword': colors.lime['400'], - '--code-font-weight-keyword': 'bold', - '--code-color-entity': colors.lime['400'], - '--code-font-weight-entity': 'bold', - '--code-color-constant': colors.lime['200'], - '--code-color-string': colors.lime['200'], - '--code-font-style-string': 'italic', - '--code-color-variable': colors.lime['400'], - '--code-color-comment': colors.lime['600'], - '--code-color-tag': colors.lime['400'], - '--code-color-property': colors.lime['200'], - '--code-font-weight-property': 'bold', + '--code-background-color': '#002407', + '--code-border-color': colors.lime['900'], + '--code-color': colors.lime['600'], + '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, + '--code-border-radius': 0, + '--code-border-style': 'solid', + '--code-border-width': 1, + '--code-outer-padding': '0 0.5rem', + '--code-inner-padding': '1rem', + '--code-color-keyword': colors.lime['400'], + '--code-font-weight-keyword': 'bold', + '--code-color-entity': colors.lime['400'], + '--code-font-weight-entity': 'bold', + '--code-color-constant': colors.lime['200'], + '--code-color-string': colors.lime['200'], + '--code-font-style-string': 'italic', + '--code-color-variable': colors.lime['400'], + '--code-color-comment': colors.lime['600'], + '--code-color-tag': colors.lime['400'], + '--code-color-property': colors.lime['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'], - '--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'], + '--pattern-bg': colors.lime['900'], + '--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'], + '--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.lime['600'], - 'text-decoration': 'underline', - }, - ".mdx.prose a:hover" : { - color: colors.lime['500'], - }, - } } diff --git a/packages/freesewing.shared/themes/lgbtq/index.js b/packages/freesewing.shared/themes/lgbtq/index.js index df191b6d85a..c7aae0ed8d0 100644 --- a/packages/freesewing.shared/themes/lgbtq/index.js +++ b/packages/freesewing.shared/themes/lgbtq/index.js @@ -1,71 +1,33 @@ 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'], @@ -75,9 +37,7 @@ module.exports = { '--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'], @@ -90,5 +50,15 @@ module.exports = { '--code-color-tag': colors.green['600'], '--code-color-property': 'inherit', '--code-font-weight-property': 'bold', + + '--pattern-bg': colors.neutral['50'], + '--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/light/index.js b/packages/freesewing.shared/themes/light/index.js index 54c927e947b..23f199c4958 100644 --- a/packages/freesewing.shared/themes/light/index.js +++ b/packages/freesewing.shared/themes/light/index.js @@ -17,164 +17,163 @@ const colors = require('tailwindcss/colors') module.exports = { - icon: "🌞", - config: { - /* FONTS - * - * This will apply to everything except code blocks + /* 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.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.violet['50'], + + // secondary: The link color + 'secondary': colors.sky['500'], + // secondary: The :hover link color + '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'], + + // 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.violet['400'], + // success: Used rarely, but if it is it's in notifications indicating success + // Typically some shade of green + 'success': colors.green['500'], + // 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'], + + /* VARIOUS + * + * These are additional variables to control other aspects of the theme + */ + + // border-radius for cards and other big elements + '--rounded-box': '0.5rem', + // border-radius for buttons and similar elements + '--rounded-btn': '0.5rem', + // border-radius for badges and other small elements + '--rounded-badge': '1.9rem', + // bounce animation time for button + '--animation-btn': '0.25s', + // bounce animation time for checkbox, toggle, etc + '--animation-input': '.4s', + // default card-body padding + '--padding-card': '2rem', + // default text case for buttons + '--btn-text-case': 'uppercase', + // default padding for navbar + '--navbar-padding': '.5rem', + // default border size for button + '--border-btn': '1px', + // focus ring size for button and inputs + '--focus-ring': '2px', + // focus ring offset size for button and inputs + '--focus-ring-offset': '2px', + + /* 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['800'], + '--code-border-color': colors.neutral['900'], + '--code-color': colors.neutral['100'], + '--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['400'], + '--code-font-weight-keyword': 'bold', + '--code-color-entity': colors.violet['400'], + '--code-font-weight-entity': 'bold', + '--code-color-constant': colors.lime['400'], + '--code-color-string': colors.sky['400'], + '--code-font-style-string': 'italic', + '--code-color-variable': colors.indigo['400'], + '--code-color-comment': colors.neutral['400'], + '--code-color-tag': colors.green['400'], + '--code-color-property': 'inherit', + '--code-font-weight-property': 'bold', - // fontFamily: The font family to use. - 'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', + /* FREESEWING PATTERN COLORS + * + * These are variables to style FreeSewing SVG output (drafts, examples, and so on) + */ - /* 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. - */ + // Pattern background color + '--pattern-bg': colors.neutral['50'], + // Color for the main fabric + '--pattern-fabric': colors.neutral['700'], + // Color for lining fabric + '--pattern-lining': colors.emerald['500'], + // Color for interfacing + '--pattern-interfacing': colors.neutral['400'], + // Color for canvas + '--pattern-canvas': colors.amber['600'], + // Color for various fabric types + '--pattern-various': colors.red['500'], + // Color for marking things on a pattern + '--pattern-mark': colors.blue['500'], + // Color to provide contrast on a pattern + '--pattern-contrast': colors.pink['500'], + // Color for noting things on a pattern + '--pattern-note': colors.violet['500'], - // 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.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.violet['50'], - - // secondary: The link color - 'secondary': colors.sky['500'], - // secondary: The :hover link color - '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'], - - // 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.violet['400'], - // success: Used rarely, but if it is it's in notifications indicating success - // Typically some shade of green - 'success': colors.green['500'], - // 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'], - - /* VARIOUS - * - * These are additional variables to control other aspects of the theme - */ - - // border-radius for cards and other big elements - '--rounded-box': '0.5rem', - // border-radius for buttons and similar elements - '--rounded-btn': '0.5rem', - // border-radius for badges and other small elements - '--rounded-badge': '1.9rem', - // bounce animation time for button - '--animation-btn': '0.25s', - // bounce animation time for checkbox, toggle, etc - '--animation-input': '.4s', - // default card-body padding - '--padding-card': '2rem', - // default text case for buttons - '--btn-text-case': 'uppercase', - // default padding for navbar - '--navbar-padding': '.5rem', - // default border size for button - '--border-btn': '1px', - // focus ring size for button and inputs - '--focus-ring': '2px', - // focus ring offset size for button and inputs - '--focus-ring-offset': '2px', - - /* 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['800'], - '--code-border-color': colors.neutral['900'], - '--code-color': colors.neutral['100'], - '--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['400'], - '--code-font-weight-keyword': 'bold', - '--code-color-entity': colors.violet['400'], - '--code-font-weight-entity': 'bold', - '--code-color-constant': colors.lime['400'], - '--code-color-string': colors.sky['400'], - '--code-font-style-string': 'italic', - '--code-color-variable': colors.indigo['400'], - '--code-color-comment': colors.neutral['400'], - '--code-color-tag': colors.green['400'], - '--code-color-property': 'inherit', - '--code-font-weight-property': 'bold', - - /* FREESEWING PATTERN COLORS - * - * These are variables to style FreeSewing SVG output (drafts, examples, and so on) - */ - - // Color for the main fabric - '--pattern-fabric': colors.neutral['700'], - // Color for lining fabric - '--pattern-lining': colors.emerald['500'], - // Color for interfacing - '--pattern-interfacing': colors.neutral['400'], - // Color for canvas - '--pattern-canvas': colors.amber['600'], - // Color for various fabric types - '--pattern-various': colors.red['500'], - // Color for marking things on a pattern - '--pattern-mark': colors.blue['500'], - // Color to provide contrast on a pattern - '--pattern-contrast': colors.pink['500'], - // Color for noting things on a pattern - '--pattern-note': colors.violet['500'], - - } } diff --git a/packages/freesewing.shared/themes/trans/index.js b/packages/freesewing.shared/themes/trans/index.js index ef2e73fe37e..c7aae0ed8d0 100644 --- a/packages/freesewing.shared/themes/trans/index.js +++ b/packages/freesewing.shared/themes/trans/index.js @@ -1,88 +1,33 @@ 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'], @@ -92,9 +37,7 @@ module.exports = { '--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'], @@ -107,5 +50,15 @@ module.exports = { '--code-color-tag': colors.green['600'], '--code-color-property': 'inherit', '--code-font-weight-property': 'bold', + + '--pattern-bg': colors.neutral['50'], + '--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'], }