VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(fs.dev): Added syntax highlighting

Browse source
This commit is contained in:
Joost De Cock 2021-12-18 15:41:37 +01:00
parent c5e971e8a7
commit d1f53b78b6
20 changed files with 535 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

162
packages/freesewing.shared/themes/light.js
View file

@ -1,162 +0,0 @@
/**
* This is a theme file for FreeSewing's NextJS-based website
*
* You can change colors, fonts, and a few other things here.
* While technically, you can change more, it's really not recommended.
* Best to stick to the examples in this light theme
*
* If you want to make your own theme, copy this file to a new name.
* Update ../index.js to include it, and you're good to go.
*/
/*
* 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
*/
const colors = require('tailwindcss/colors')
module.exports = {
icon: "🌞",
config: {
/* 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['100'],
// 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.neutral['900'],
// 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'],
// 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.amber['300'],
// 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',
/* 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'],
/* ADVANCED
*
* You can override CSS this way, but ask yourself: why?
*
* One thing we do is take care of links in MDX content.
* Since this content is styled by the TailwindCSS Typography
* plugin, it won't follow the theme link styling.
*/
".mdx.prose a" : {
color: colors.violet['500'],
'text-decoration': 'none',
},
".mdx.prose a:hover" : {
color: colors.violet['400'],
},
}
}