[breaking]: FreeSewing v4 (#7297)
Refer to the CHANGELOG for all info. --------- Co-authored-by: Wouter van Wageningen <wouter.vdub@yahoo.com> Co-authored-by: Josh Munic <jpmunic@gmail.com> Co-authored-by: Jonathan Haas <haasjona@gmail.com>
This commit is contained in:
Joost De Cock
GitHub
parent
d22fbe78d9
commit
51dc1d9732
6626 changed files with 142053 additions and 150606 deletions
70
packages/studio/template/themes/dark.mjs
Normal file
70
packages/studio/template/themes/dark.mjs
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import colors from 'tailwindcss/colors'
|
||||
import { theme as light } from './light.mjs'
|
||||
export const theme = {
|
||||
// Start from the light theme
|
||||
...light,
|
||||
|
||||
// Then override what is needed for dark more
|
||||
'base-100': colors.neutral['900'],
|
||||
'base-200': colors.neutral['700'],
|
||||
'base-300': colors.neutral['600'],
|
||||
'base-content': colors.neutral['100'],
|
||||
|
||||
primary: colors.violet['400'],
|
||||
'primary-focus': colors.violet['500'],
|
||||
'primary-content': colors.neutral['900'],
|
||||
|
||||
secondary: colors.sky['400'],
|
||||
'secondary-focus': colors.sky['500'],
|
||||
'secondary-content': colors.neutral['900'],
|
||||
|
||||
accent: colors.fuchsia['400'],
|
||||
'accent-focus': colors.fuchsia['500'],
|
||||
'accent-content': colors.neutral['900'],
|
||||
|
||||
neutral: '#000',
|
||||
'neutral-focus': colors.neutral['800'],
|
||||
'neutral-content': colors.neutral['50'],
|
||||
|
||||
info: colors.yellow['400'],
|
||||
success: colors.green['400'],
|
||||
warning: colors.orange['400'],
|
||||
error: colors.red['400'],
|
||||
|
||||
'--btn-info-content': colors.neutral[900],
|
||||
'--btn-success-content': colors.neutral[900],
|
||||
'--btn-warning-content': colors.neutral[900],
|
||||
'--btn-error-content': colors.neutral[900],
|
||||
|
||||
'--code-background-color': '#111',
|
||||
'--code-background-highlight-color': '#191919',
|
||||
'--code-border-color': colors.neutral['800'],
|
||||
'--code-color': colors.neutral['300'],
|
||||
'--code-color-keyword': colors.yellow['500'],
|
||||
'--code-color-entity': colors.violet['400'],
|
||||
'--code-color-constant': colors.lime['300'],
|
||||
'--code-color-string': colors.sky['300'],
|
||||
'--code-color-variable': colors.indigo['300'],
|
||||
'--code-color-comment': colors.neutral['400'],
|
||||
'--code-color-tag': colors.green['600'],
|
||||
'--code-color-property': colors.yellow['200'],
|
||||
|
||||
'--pattern-bg': colors.neutral['900'],
|
||||
'--pattern-fabric': colors.neutral['50'],
|
||||
'--pattern-lining': colors.emerald['300'],
|
||||
'--pattern-interfacing': colors.neutral['500'],
|
||||
'--pattern-canvas': colors.amber['300'],
|
||||
'--pattern-various': colors.red['300'],
|
||||
'--pattern-mark': colors.blue['300'],
|
||||
'--pattern-contrast': colors.pink['300'],
|
||||
'--pattern-note': colors.violet['300'],
|
||||
|
||||
'--pattern-dev-0': colors.red['500'],
|
||||
'--pattern-dev-1': colors.green['500'],
|
||||
'--pattern-dev-2': colors.blue['500'],
|
||||
'--pattern-dev-3': colors.yellow['500'],
|
||||
'--pattern-dev-4': colors.pink['500'],
|
||||
'--pattern-dev-5': colors.violet['500'],
|
||||
'--pattern-dev-6': colors.teal['500'],
|
||||
'--pattern-dev-7': colors.neutral['500'],
|
||||
}
|
||||
4
packages/studio/template/themes/index.mjs
Normal file
4
packages/studio/template/themes/index.mjs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { theme as light } from './light.mjs'
|
||||
import { theme as dark } from './dark.mjs'
|
||||
|
||||
export { light, dark }
|
||||
262
packages/studio/template/themes/light.mjs
Normal file
262
packages/studio/template/themes/light.mjs
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
/**
|
||||
* This is a theme file for DaisyUI for FreeSewing's Docusaurus-based website
|
||||
* You can change colors, fonts, and a few other things here.
|
||||
*/
|
||||
|
||||
/*
|
||||
* We're using the TailwindCSS colors.
|
||||
* Let's include them so we can reference them by name.
|
||||
* For a full list, see: https://tailwindcss.com/docs/customizing-colors
|
||||
*/
|
||||
import colors from 'tailwindcss/colors'
|
||||
|
||||
/*
|
||||
* This export is the DaisyUI theme
|
||||
*/
|
||||
export const theme = {
|
||||
/* FONTS
|
||||
*
|
||||
* This will apply to everything except code blocks
|
||||
* Note that we're using a system font stack here.
|
||||
* That means we're not loading any fonts in the browser,
|
||||
* but rather relying on what the user has available locally.
|
||||
*
|
||||
* You can get more font stacks here: https://modernfontstacks.com/
|
||||
*/
|
||||
fontFamily: 'system-ui, 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 for a regular page (docs and so on)
|
||||
'base-100': colors.neutral['50'],
|
||||
// base-200: A slightly darker background color, used for hovers and so on
|
||||
'base-200': colors.neutral['100'],
|
||||
// base-300: A shade midway between dark and light
|
||||
'base-300': colors.neutral['300'],
|
||||
// base-content: The default text color for a regular page (docs and so on)
|
||||
'base-content': colors.neutral['700'],
|
||||
|
||||
// primary: The main brand color and color of the primary button
|
||||
primary: colors.violet['600'],
|
||||
// primary-focus: The :hover color for the primary button
|
||||
'primary-focus': colors.violet['500'],
|
||||
// primary-content: The text color on a primary button
|
||||
'primary-content': colors.neutral['50'],
|
||||
|
||||
// secondary: The link color on default backgrounds (base-100)
|
||||
secondary: colors.sky['600'],
|
||||
// secondary-focus: The :hover link color for default backgrounds. Or:
|
||||
// secondary-focus: An alternative link color for on dark backgrounds
|
||||
'secondary-focus': colors.sky['500'],
|
||||
'--ifm-link-hover-color': colors.sky['500'],
|
||||
// secondary-content: The text color on a secondary button
|
||||
'secondary-content': colors.neutral['50'],
|
||||
|
||||
// accent: The accent color is used to highlight active things
|
||||
// Should be something is positive/neutral. Avoid red or orange.
|
||||
accent: colors.fuchsia['600'],
|
||||
// accent-focus: The :hover color for the accent button
|
||||
'accent-focus': colors.fuchsia['500'],
|
||||
// accent-content: The text color for the accent button
|
||||
'accent-content': colors.neutral['50'],
|
||||
|
||||
// neutral: Used as the background for the footer and navigation on desktop
|
||||
// Should always be dark
|
||||
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['50'],
|
||||
|
||||
// info: Used rarely, can be another color best somewhat neutral looking
|
||||
// and should work with the default text color
|
||||
info: colors.yellow['300'],
|
||||
// Text color on info
|
||||
'info-content': colors.neutral[900],
|
||||
|
||||
// success: Used rarely, but if it is it's in notifications indicating success
|
||||
// Typically some shade of green
|
||||
success: colors.green['600'],
|
||||
// Text color on success
|
||||
'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.orange['600'],
|
||||
// Text color on warning
|
||||
'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 error
|
||||
'error-content': colors.neutral[50],
|
||||
|
||||
/* 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-background-highlight-color': '#313131',
|
||||
'--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 tokens themselves
|
||||
*/
|
||||
'--code-color-keyword': colors.yellow['500'],
|
||||
'--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': colors.yellow['200'],
|
||||
'--code-font-weight-property': 'bold',
|
||||
|
||||
/* 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',
|
||||
|
||||
/* FREESEWING PATTERN THEMEING
|
||||
*
|
||||
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
|
||||
*/
|
||||
// Pattern background color
|
||||
'--pattern-bg': colors.neutral['50'],
|
||||
// Color for the main fabric
|
||||
'--pattern-fabric': colors.neutral['900'],
|
||||
// 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'],
|
||||
|
||||
// Color 0 in xray reveals
|
||||
'--pattern-color-0': colors.red['500'],
|
||||
// Color 1 in xray reveals
|
||||
'--pattern-color-1': colors.green['500'],
|
||||
// Color 2 in xray reveals
|
||||
'--pattern-color-2': colors.blue['500'],
|
||||
// Color 3 in xray reveals
|
||||
'--pattern-color-3': colors.yellow['500'],
|
||||
// Color 4 in xray reveals
|
||||
'--pattern-color-4': colors.pink['500'],
|
||||
// Color 5 in xray reveals
|
||||
'--pattern-color-5': colors.violet['500'],
|
||||
// Color 6 in xray reveals
|
||||
'--pattern-color-6': colors.teal['500'],
|
||||
// Color 7 in xray reveals
|
||||
'--pattern-color-7': colors.amber['500'],
|
||||
// Color 8 in xray reveals
|
||||
'--pattern-color-8': colors.fuchsia['500'],
|
||||
// Color 9 in xray reveals
|
||||
'--pattern-color-9': colors.cyan['500'],
|
||||
|
||||
// Pattern xs text size
|
||||
'--pattern-text-xs': '0.2rem',
|
||||
// Pattern sm text size
|
||||
'--pattern-text-sm': '0.3rem',
|
||||
// Pattern default text size
|
||||
'--pattern-text': '0.4rem',
|
||||
// Pattern lg text size
|
||||
'--pattern-text-lg': '0.6rem',
|
||||
// Pattern xl text size
|
||||
'--pattern-text-xl': '0.8rem',
|
||||
// Pattern 2xl text size
|
||||
'--pattern-text-2xl': '1.5rem',
|
||||
// Pattern 3xl text size
|
||||
'--pattern-text-3xl': '2rem',
|
||||
// Pattern 4xl text size
|
||||
'--pattern-text-4xl': '3rem',
|
||||
|
||||
// Pattern overal scale for strokes and text sizes
|
||||
// '--pattern-scale': '1',
|
||||
// Pattern xs stroke width
|
||||
'--pattern-stroke-xs': '0.2px',
|
||||
// Pattern sm stroke width
|
||||
'--pattern-stroke-sm': '0.4px',
|
||||
// Pattern default stroke width
|
||||
'--pattern-stroke': '0.7px',
|
||||
// Pattern lg stroke width
|
||||
'--pattern-stroke-lg': '1.3px',
|
||||
// Pattern xl stroke width
|
||||
'--pattern-stroke-xl': '2px',
|
||||
// Pattern 2xl stroke width
|
||||
'--pattern-stroke-2xl': '4px',
|
||||
// Pattern 3xl stroke width
|
||||
'--pattern-stroke-3xl': '6px',
|
||||
// Pattern 4xl stroke width
|
||||
'--pattern-stroke-4xl': '8px',
|
||||
// Pattern 5xl stroke width
|
||||
'--pattern-stroke-5xl': '12px',
|
||||
// Pattern 6xl stroke width
|
||||
'--pattern-stroke-6xl': '16px',
|
||||
// Pattern 7xl stroke width
|
||||
'--pattern-stroke-7xl': '20px',
|
||||
|
||||
'--pattern-sample-1': colors.red['500'],
|
||||
'--pattern-sample-2': colors.orange['500'],
|
||||
'--pattern-sample-3': colors.yellow['500'],
|
||||
'--pattern-sample-4': colors.lime['500'],
|
||||
'--pattern-sample-5': colors.emerald['500'],
|
||||
'--pattern-sample-6': colors.cyan['500'],
|
||||
'--pattern-sample-7': colors.blue['500'],
|
||||
'--pattern-sample-8': colors.violet['500'],
|
||||
'--pattern-sample-9': colors.fuchsia['500'],
|
||||
'--pattern-sample-10': colors.rose['500'],
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue