VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(rehype-highlight-lines): Themeing and overflow fix

Browse source
This commit is contained in:
Joost De Cock 2022-10-12 18:34:34 +02:00
parent aac5156c9d
commit 1fae0bc3d8
9 changed files with 139 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/rehype-highlight-lines/src/index.mjs
View file

@ -99,7 +99,16 @@ export default (userOptions = {}) => {
? options[`${variant}Class`] ? options[`${variant}Class`]
: [options[`${variant}Class`]], : [options[`${variant}Class`]],
}, },
children: [...Object.values(children)], children: [
{
type: 'element',
tagName: 'div',
properties: {
className: ['code-section-inner'],
},
children: [...Object.values(children)],
},
],
} }
if (!options.swallow) parent[i].children.push(curNode) if (!options.swallow) parent[i].children.push(curNode)

7
sites/shared/components/mdx/example.js
View file

@ -30,7 +30,6 @@ const Example = ({ app, draft, settings, xray = false }) => {
gist._state.xray = { enabled: true } gist._state.xray = { enabled: true }
gist.margin = 20 gist.margin = 20
} }
console.log(draft.draft, draft.sample, settings)
if (!draft.sample) return null if (!draft.sample) return null
const patternProps = settings.sample const patternProps = settings.sample
? draft.sample().getRenderProps() ? draft.sample().getRenderProps()
@ -72,7 +71,11 @@ const buildExample = (children, settings = { margin: 5 }, tutorial = false, pape
code = code.split(')') code = code.split(')')
code = code[0] + ') => ' + code.slice(1).join(')') code = code[0] + ') => ' + code.slice(1).join(')')
} }
draft = eval(code) try {
draft = eval(code)
} catch (err) {
console.log(err, code)
}
const part = { const part = {
draft: draft, draft: draft,
measurements: tutorial ? [] : ['head'], measurements: tutorial ? [] : ['head'],

2
sites/shared/mdx/loader.js
View file

@ -87,7 +87,7 @@ const mdxLoader = async (language, site, slug, jargon) => {
[ [
rehypeHighlightLines, rehypeHighlightLines,
{ {
highlightClass: ['highlight-lines', 'bg-yellow-300', 'bg-opacity-5', 'border-l-4'], highlightClass: ['highlight-lines', 'border-l-4'],
strikeoutClass: [ strikeoutClass: [
'strikeout-lines', 'strikeout-lines',
'bg-orange-300', 'bg-orange-300',

8
sites/shared/styles/code.css
View file

@ -37,9 +37,15 @@ div.hljs > pre > code {
*/ */
div.hljs > pre > code section { div.hljs > pre > code section {
margin: 0 -1rem; margin: 0 -1rem;
padding: 0.25rem 1rem 0.25rem calc(1rem - 4px); padding: 0 1rem 0 calc(1rem - 4px);
border-left: 0.35rem solid transparent; border-left: 0.35rem solid transparent;
border-color: rgb(130, 203, 21); border-color: rgb(130, 203, 21);
background-color: var(--code-background-highlight-color);
}
div.hljs > pre > code section > div.code-section-inner {
display: inline-block;
padding: 0.25rem 0.25rem 0.25rem 0;
background-color: var(--code-background-highlight-color);
} }
div.hljs > pre > code section.strikeout-lines { div.hljs > pre > code section.strikeout-lines {
border-color: rgb(255, 75, 57); border-color: rgb(255, 75, 57);

2
sites/shared/styles/globals.css
View file

@ -3,8 +3,6 @@
@tailwind utilities; @tailwind utilities;
@import './code.css'; @import './code.css';
/* import for dot graphs */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat+Alternates:ital,wght@1,900&display=swap');
@layer components { @layer components {
/* Applied styles for common HTML tags */ /* Applied styles for common HTML tags */

22
sites/shared/themes/dark.js
View file

@ -1,33 +1,34 @@
const colors = require('tailwindcss/colors') const colors = require('tailwindcss/colors')
module.exports = { module.exports = {
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', fontFamily:
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
'base-100': colors.neutral['900'], 'base-100': colors.neutral['900'],
'base-200': colors.neutral['700'], 'base-200': colors.neutral['700'],
'base-300': colors.neutral['600'], 'base-300': colors.neutral['600'],
'base-content': colors.neutral['300'], 'base-content': colors.neutral['300'],
'primary': colors.violet['700'], primary: colors.violet['700'],
'primary-focus': colors.violet['600'], 'primary-focus': colors.violet['600'],
'primary-content': colors.violet['50'], 'primary-content': colors.violet['50'],
'secondary': colors.sky['500'], secondary: colors.sky['500'],
'secondary-focus': colors.sky['400'], 'secondary-focus': colors.sky['400'],
'secondary-content': colors.sky['50'], 'secondary-content': colors.sky['50'],
'accent': colors.pink['500'], accent: colors.pink['500'],
'accent-focus': colors.pink['400'], 'accent-focus': colors.pink['400'],
'accent-content': colors.pink['50'], 'accent-content': colors.pink['50'],
'neutral': '#000000', // Dark as my soul neutral: '#000000', // Dark as my soul
'neutral-focus': colors.neutral['800'], 'neutral-focus': colors.neutral['800'],
'neutral-content': colors.neutral['50'], 'neutral-content': colors.neutral['50'],
'info': colors.indigo['700'], info: colors.indigo['700'],
'success': colors.green['700'], success: colors.green['700'],
'warning': colors.orange['500'], warning: colors.orange['500'],
'error': colors.red['700'], error: colors.red['700'],
'--btn-info-content': colors.neutral[50], '--btn-info-content': colors.neutral[50],
'--btn-success-content': colors.neutral[50], '--btn-success-content': colors.neutral[50],
@ -44,6 +45,7 @@ module.exports = {
)`, )`,
'--code-background-color': '#111', '--code-background-color': '#111',
'--code-background-highlight-color': '#191919',
'--code-border-color': colors.neutral['800'], '--code-border-color': colors.neutral['800'],
'--code-color': colors.neutral['300'], '--code-color': colors.neutral['300'],
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@ -60,7 +62,7 @@ module.exports = {
'--code-color-string': colors.sky['300'], '--code-color-string': colors.sky['300'],
'--code-font-style-string': 'italic', '--code-font-style-string': 'italic',
'--code-color-variable': colors.indigo['300'], '--code-color-variable': colors.indigo['300'],
'--code-color-comment': colors.neutral['600'], '--code-color-comment': colors.neutral['400'],
'--code-color-tag': colors.green['600'], '--code-color-tag': colors.green['600'],
'--code-color-property': colors.yellow['200'], '--code-color-property': colors.yellow['200'],
'--code-font-weight-property': 'bold', '--code-font-weight-property': 'bold',

39
sites/shared/themes/hax0r.js
View file

@ -2,34 +2,34 @@ const colors = require('tailwindcss/colors')
const bg = '#002808' const bg = '#002808'
module.exports = { 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;`, 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;`,
'base-100': bg, 'base-100': bg,
'base-200': colors.lime['900'], 'base-200': colors.lime['900'],
'base-300': colors.lime['800'], 'base-300': colors.lime['800'],
'base-content': colors.lime['500'], 'base-content': colors.lime['500'],
'primary': colors.lime['700'], primary: colors.lime['700'],
'primary-focus': colors.lime['600'], 'primary-focus': colors.lime['600'],
'primary-content': colors.lime['50'], 'primary-content': colors.lime['50'],
'secondary': colors.lime['400'], secondary: colors.lime['400'],
'secondary-focus': colors.lime['500'], 'secondary-focus': colors.lime['500'],
'secondary-content': bg, 'secondary-content': bg,
'accent': colors.lime['700'], accent: colors.lime['700'],
'accent-focus': colors.lime['600'], 'accent-focus': colors.lime['600'],
'accent-content': colors.yellow['200'], 'accent-content': colors.yellow['200'],
'neutral': '#001c06', // Even darker neutral: '#001c06', // Even darker
'neutral-focus': colors.lime['600'], 'neutral-focus': colors.lime['600'],
'neutral-content': colors.lime['200'], 'neutral-content': colors.lime['200'],
'info': colors.lime['700'], info: colors.lime['700'],
'success': colors.lime['700'], success: colors.lime['700'],
'warning': colors.lime['700'], warning: colors.lime['700'],
'error': colors.lime['700'], error: colors.lime['700'],
'--btn-info-content': colors.teal[300], '--btn-info-content': colors.teal[300],
'--btn-success-content': colors.green[300], '--btn-success-content': colors.green[300],
@ -44,6 +44,7 @@ module.exports = {
)`, )`,
'--code-background-color': '#002407', '--code-background-color': '#002407',
'--code-background-highlight-color': '#191919',
'--code-border-color': colors.lime['900'], '--code-border-color': colors.lime['900'],
'--code-color': colors.lime['600'], '--code-color': colors.lime['600'],
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@ -60,7 +61,7 @@ module.exports = {
'--code-color-string': colors.lime['200'], '--code-color-string': colors.lime['200'],
'--code-font-style-string': 'italic', '--code-font-style-string': 'italic',
'--code-color-variable': colors.lime['400'], '--code-color-variable': colors.lime['400'],
'--code-color-comment': colors.lime['600'], '--code-color-comment': colors.lime['700'],
'--code-color-tag': colors.lime['400'], '--code-color-tag': colors.lime['400'],
'--code-color-property': colors.lime['200'], '--code-color-property': colors.lime['200'],
'--code-font-weight-property': 'bold', '--code-font-weight-property': 'bold',
@ -106,12 +107,12 @@ module.exports = {
'--pattern-text-4xl': '3rem', '--pattern-text-4xl': '3rem',
'--pattern-scale': '1', '--pattern-scale': '1',
'--pattern-stroke-xs': "0.2px", '--pattern-stroke-xs': '0.2px',
'--pattern-stroke-sm': "0.4px", '--pattern-stroke-sm': '0.4px',
'--pattern-stroke': "0.7px", '--pattern-stroke': '0.7px',
'--pattern-stroke-lg': "1.3px", '--pattern-stroke-lg': '1.3px',
'--pattern-stroke-xl': "2px", '--pattern-stroke-xl': '2px',
'--pattern-stroke-2xl': "4px", '--pattern-stroke-2xl': '4px',
'--pattern-stroke-3xl': "6px", '--pattern-stroke-3xl': '6px',
'--pattern-stroke-4xl': "8px", '--pattern-stroke-4xl': '8px',
} }

37
sites/shared/themes/lgbtq.js
View file

@ -1,32 +1,33 @@
const colors = require('tailwindcss/colors') const colors = require('tailwindcss/colors')
module.exports = { module.exports = {
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', fontFamily:
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
'base-100': colors.fuchsia['50'], 'base-100': colors.fuchsia['50'],
'base-200': colors.neutral['200'], 'base-200': colors.neutral['200'],
'base-300': colors.neutral['400'], 'base-300': colors.neutral['400'],
'base-content': colors.neutral['700'], 'base-content': colors.neutral['700'],
'primary': colors.sky['500'], primary: colors.sky['500'],
'primary-focus': colors.sky['400'], 'primary-focus': colors.sky['400'],
'primary-content': colors.sky['50'], 'primary-content': colors.sky['50'],
'secondary': colors.violet['500'], secondary: colors.violet['500'],
'secondary-focus': colors.violet['400'], 'secondary-focus': colors.violet['400'],
'secondary-content': colors.violet['50'], 'secondary-content': colors.violet['50'],
'accent': colors.fuchsia['500'], accent: colors.fuchsia['500'],
'accent-focus': colors.fuchsia['400'], 'accent-focus': colors.fuchsia['400'],
'accent-content': colors.neutral['50'], 'accent-content': colors.neutral['50'],
'neutral': colors.neutral['900'], neutral: colors.neutral['900'],
'neutral-focus': colors.neutral['700'], 'neutral-focus': colors.neutral['700'],
'neutral-content': colors.yellow['50'], 'neutral-content': colors.yellow['50'],
'info': colors.pink['400'], info: colors.pink['400'],
'success': colors.green['600'], success: colors.green['600'],
'warning': colors.amber['500'], warning: colors.amber['500'],
'error': colors.red['600'], error: colors.red['600'],
'--theme-gradient': `repeating-linear-gradient( '--theme-gradient': `repeating-linear-gradient(
90deg, 90deg,
@ -45,6 +46,7 @@ module.exports = {
)`, )`,
'--code-background-color': colors.neutral['800'], '--code-background-color': colors.neutral['800'],
'--code-background-highlight-color': '#313131',
'--code-border-color': colors.neutral['900'], '--code-border-color': colors.neutral['900'],
'--code-color': colors.neutral['100'], '--code-color': colors.neutral['100'],
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@ -108,13 +110,12 @@ module.exports = {
'--pattern-text-4xl': '3rem', '--pattern-text-4xl': '3rem',
'--pattern-scale': '1', '--pattern-scale': '1',
'--pattern-stroke-xs': "0.2px", '--pattern-stroke-xs': '0.2px',
'--pattern-stroke-sm': "0.4px", '--pattern-stroke-sm': '0.4px',
'--pattern-stroke': "0.7px", '--pattern-stroke': '0.7px',
'--pattern-stroke-lg': "1.3px", '--pattern-stroke-lg': '1.3px',
'--pattern-stroke-xl': "2px", '--pattern-stroke-xl': '2px',
'--pattern-stroke-2xl': "4px", '--pattern-stroke-2xl': '4px',
'--pattern-stroke-3xl': "6px", '--pattern-stroke-3xl': '6px',
'--pattern-stroke-4xl': "8px", '--pattern-stroke-4xl': '8px',
} }

129
sites/shared/themes/light.js
View file

@ -18,24 +18,25 @@ const colors = require('tailwindcss/colors')
module.exports = { module.exports = {
/* FONTS /* FONTS
* *
* This will apply to everything except code blocks * This will apply to everything except code blocks
* Note that we're using a system font stack here. * Note that we're using a system font stack here.
* That means we're not loading any fonts in the browser, * That means we're not loading any fonts in the browser,
* but rather relying on what the user has available locally. * but rather relying on what the user has available locally.
*/ */
'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', fontFamily:
'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
/* COLORS /* COLORS
* *
* These names are a bit 'bootstrap' like, which can be misleading. * These names are a bit 'bootstrap' like, which can be misleading.
* We don't really use primary and secondary colors, nor do we have * We don't really use primary and secondary colors, nor do we have
* a warning color and so on. * a warning color and so on.
* However, these names are used under the hood by TailwindCSS * However, these names are used under the hood by TailwindCSS
* and DaisyUI, so we're stuck with them. * and DaisyUI, so we're stuck with them.
* *
* Read the descriptions below to understand what each color is used for. * 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: The default background color for a regular page (docs and so on)
'base-100': colors.neutral['50'], 'base-100': colors.neutral['50'],
@ -47,14 +48,14 @@ module.exports = {
'base-content': colors.neutral['700'], 'base-content': colors.neutral['700'],
// primary: The main brand color and color of the primary button // primary: The main brand color and color of the primary button
'primary': colors.violet['500'], primary: colors.violet['500'],
// primary-focus: The :hover color for the primary button // primary-focus: The :hover color for the primary button
'primary-focus': colors.violet['600'], 'primary-focus': colors.violet['600'],
// primary-content: The text color on a primary button // primary-content: The text color on a primary button
'primary-content': colors.neutral['50'], 'primary-content': colors.neutral['50'],
// secondary: The link color on default backgrounds (base-100) // secondary: The link color on default backgrounds (base-100)
'secondary': colors.sky['500'], secondary: colors.sky['500'],
// secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: The :hover link color for default backgrounds. Or:
// secondary-focus: An alternative link color for on dark backgrounds // secondary-focus: An alternative link color for on dark backgrounds
'secondary-focus': colors.sky['400'], 'secondary-focus': colors.sky['400'],
@ -63,7 +64,7 @@ module.exports = {
// accent: The accent color is used to highlight active things // accent: The accent color is used to highlight active things
// Should be something is positive/neutral. Avoid red or orange. // Should be something is positive/neutral. Avoid red or orange.
'accent': colors.pink['400'], accent: colors.pink['400'],
// accent-focus: The :hover color for the accent button // accent-focus: The :hover color for the accent button
'accent-focus': colors.pink['300'], 'accent-focus': colors.pink['300'],
// accent-content: The text color for the accent button // accent-content: The text color for the accent button
@ -71,7 +72,7 @@ module.exports = {
// neutral: Used as the background for the footer and navigation on desktop // neutral: Used as the background for the footer and navigation on desktop
// Should always be dark // Should always be dark
'neutral': colors.neutral['900'], neutral: colors.neutral['900'],
// neutral-focus: Typically a shade lighter than neutral // neutral-focus: Typically a shade lighter than neutral
'neutral-focus': colors.neutral['700'], 'neutral-focus': colors.neutral['700'],
// neutral-content: The text color on neutral backgrounds // neutral-content: The text color on neutral backgrounds
@ -79,30 +80,30 @@ module.exports = {
// info: Used rarely, can be another color best somewhat neutral looking // info: Used rarely, can be another color best somewhat neutral looking
// and should work with the default text color // and should work with the default text color
'info': colors.indigo['600'], info: colors.indigo['600'],
// Text color on the info button // Text color on the info button
'--btn-info-content': colors.neutral[50], '--btn-info-content': colors.neutral[50],
// success: Used rarely, but if it is it's in notifications indicating success // success: Used rarely, but if it is it's in notifications indicating success
// Typically some shade of green // Typically some shade of green
'success': colors.green['600'], success: colors.green['600'],
// Text color on the success button // Text color on the success button
'--btn-success-content': colors.neutral[50], '--btn-success-content': colors.neutral[50],
// warning: We don't do warnings, but this is used for the tabs under code blocks // warning: We don't do warnings, but this is used for the tabs under code blocks
// and a couple of other UI elements. // and a couple of other UI elements.
'warning': colors.orange['500'], warning: colors.orange['500'],
// Text color on the warning button // Text color on the warning button
'--btn-warning-content': colors.neutral[50], '--btn-warning-content': colors.neutral[50],
// error: Used rarely, but if it is it's in notifications indicating success // error: Used rarely, but if it is it's in notifications indicating success
// or the danger button // or the danger button
// Typically some shade of red // Typically some shade of red
'error': colors.red['600'], error: colors.red['600'],
// Text color on the error button // Text color on the error button
'--btn-error-content': colors.neutral[50], '--btn-error-content': colors.neutral[50],
/* THEME GRADIENT /* THEME GRADIENT
* *
* This is used as a border & loading indicator * This is used as a border & loading indicator
*/ */
'--theme-gradient': `repeating-linear-gradient( '--theme-gradient': `repeating-linear-gradient(
90deg, 90deg,
${colors.violet[600]} 0, ${colors.violet[600]} 0,
@ -113,14 +114,15 @@ module.exports = {
)`, )`,
/* CODE HIGHLIGHTING COLORS /* CODE HIGHLIGHTING COLORS
* *
* These are variables to style highlighted code blocks. * These are variables to style highlighted code blocks.
* *
* Specifically this first set applies to the wrapper around * Specifically this first set applies to the wrapper around
* the highlighted code. * the highlighted code.
* The names should (hopefully) speak for themselves * The names should (hopefully) speak for themselves
*/ */
'--code-background-color': colors.neutral['800'], '--code-background-color': colors.neutral['800'],
'--code-background-highlight-color': '#313131',
'--code-border-color': colors.neutral['900'], '--code-border-color': colors.neutral['900'],
'--code-color': colors.neutral['100'], '--code-color': colors.neutral['100'],
'--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`, '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@ -130,8 +132,8 @@ module.exports = {
'--code-outer-padding': '0 0.5rem', '--code-outer-padding': '0 0.5rem',
'--code-inner-padding': '1rem', '--code-inner-padding': '1rem',
/* /*
* These variables are used to style the highlighted tokens themselves * These variables are used to style the highlighted tokens themselves
*/ */
'--code-color-keyword': colors.yellow['500'], '--code-color-keyword': colors.yellow['500'],
'--code-font-weight-keyword': 'bold', '--code-font-weight-keyword': 'bold',
'--code-color-entity': colors.violet['400'], '--code-color-entity': colors.violet['400'],
@ -146,9 +148,9 @@ module.exports = {
'--code-font-weight-property': 'bold', '--code-font-weight-property': 'bold',
/* VARIOUS /* VARIOUS
* *
* These are additional variables to control other aspects of the theme * These are additional variables to control other aspects of the theme
*/ */
// border-radius for cards and other big elements // border-radius for cards and other big elements
'--rounded-box': '0.5rem', '--rounded-box': '0.5rem',
// border-radius for buttons and similar elements // border-radius for buttons and similar elements
@ -173,9 +175,9 @@ module.exports = {
'--focus-ring-offset': '2px', '--focus-ring-offset': '2px',
/* FREESEWING PATTERN THEMEING /* FREESEWING PATTERN THEMEING
* *
* These are variables to style FreeSewing SVG output (drafts, examples, and so on) * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
*/ */
// Pattern background color // Pattern background color
'--pattern-bg': colors.neutral['50'], '--pattern-bg': colors.neutral['50'],
// Color for the main fabric // Color for the main fabric
@ -236,38 +238,37 @@ module.exports = {
// Pattern overal scale for strokes and text sizes // Pattern overal scale for strokes and text sizes
'--pattern-scale': '1', '--pattern-scale': '1',
// Pattern xs stroke width // Pattern xs stroke width
'--pattern-stroke-xs': "0.2px", '--pattern-stroke-xs': '0.2px',
// Pattern sm stroke width // Pattern sm stroke width
'--pattern-stroke-sm': "0.4px", '--pattern-stroke-sm': '0.4px',
// Pattern default stroke width // Pattern default stroke width
'--pattern-stroke': "0.7px", '--pattern-stroke': '0.7px',
// Pattern lg stroke width // Pattern lg stroke width
'--pattern-stroke-lg': "1.3px", '--pattern-stroke-lg': '1.3px',
// Pattern xl stroke width // Pattern xl stroke width
'--pattern-stroke-xl': "2px", '--pattern-stroke-xl': '2px',
// Pattern 2xl stroke width // Pattern 2xl stroke width
'--pattern-stroke-2xl': "4px", '--pattern-stroke-2xl': '4px',
// Pattern 3xl stroke width // Pattern 3xl stroke width
'--pattern-stroke-3xl': "6px", '--pattern-stroke-3xl': '6px',
// Pattern 4xl stroke width // Pattern 4xl stroke width
'--pattern-stroke-4xl': "8px", '--pattern-stroke-4xl': '8px',
// Pattern 5xl stroke width // Pattern 5xl stroke width
'--pattern-stroke-5xl': "12px", '--pattern-stroke-5xl': '12px',
// Pattern 6xl stroke width // Pattern 6xl stroke width
'--pattern-stroke-6xl': "16px", '--pattern-stroke-6xl': '16px',
// Pattern 7xl stroke width // Pattern 7xl stroke width
'--pattern-stroke-7xl': "20px", '--pattern-stroke-7xl': '20px',
// Pattern sampling styles // Pattern sampling styles
'--pattern-sample-1': colors.red["500"], '--pattern-sample-1': colors.red['500'],
'--pattern-sample-2': colors.orange["500"], '--pattern-sample-2': colors.orange['500'],
'--pattern-sample-3': colors.yellow["500"], '--pattern-sample-3': colors.yellow['500'],
'--pattern-sample-4': colors.lime["500"], '--pattern-sample-4': colors.lime['500'],
'--pattern-sample-5': colors.emerald["500"], '--pattern-sample-5': colors.emerald['500'],
'--pattern-sample-6': colors.cyan["500"], '--pattern-sample-6': colors.cyan['500'],
'--pattern-sample-7': colors.blue["500"], '--pattern-sample-7': colors.blue['500'],
'--pattern-sample-8': colors.violet["500"], '--pattern-sample-8': colors.violet['500'],
'--pattern-sample-9': colors.fuchsia["500"], '--pattern-sample-9': colors.fuchsia['500'],
'--pattern-sample-10': colors.rose["500"], '--pattern-sample-10': colors.rose['500'],
} }