feat: Added studio to monorepo
This commit is contained in:
joostdecock
Joost De Cock
parent
c17b58f141
commit
02f841c570
177 changed files with 2467 additions and 2118 deletions
5
packages/studio/about.json
Normal file
5
packages/studio/about.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"id": "studio",
|
||||
"description": "Initializer package for a the FreeSewing design studio: npx @freesewing/studio",
|
||||
"version": "4.0.0"
|
||||
}
|
||||
|
|
@ -15,7 +15,12 @@
|
|||
},
|
||||
"keywords": [
|
||||
"freesewing",
|
||||
"freesewing"
|
||||
"design",
|
||||
"diy",
|
||||
"fashion",
|
||||
"made to measure",
|
||||
"parametric design",
|
||||
"sewing"
|
||||
],
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -49,4 +54,4 @@
|
|||
"bin": {
|
||||
"studio": "./index.mjs"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Support
|
||||
sidebar_class_name: tw-hidden
|
||||
sidebar_class_name: tw:hidden
|
||||
---
|
||||
|
||||
import { RoleBlock } from '@freesewing/react/components/Role'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import path from 'node:path'
|
||||
import { themes as prismThemes } from 'prism-react-renderer'
|
||||
//import designs from '../../config/software/designs.json'
|
||||
import tailwindcss from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import { docusaurusPlugins } from './plugins/index.mjs'
|
||||
import smartypants from 'remark-smartypants'
|
||||
|
||||
const config = {
|
||||
|
|
@ -22,51 +19,7 @@ const config = {
|
|||
/*
|
||||
* We need to make sure we can import from .mjs files
|
||||
*/
|
||||
plugins: [
|
||||
() => ({
|
||||
name: 'mjs-loader',
|
||||
configureWebpack() {
|
||||
return {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.mjs$/,
|
||||
include: /node_modules/,
|
||||
type: 'javascript/auto',
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.mjs$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-react'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
async function myPlugin() {
|
||||
return {
|
||||
name: 'docusaurus-tailwindcss',
|
||||
configurePostCss(postcssOptions) {
|
||||
// Appends TailwindCSS and AutoPrefixer.
|
||||
postcssOptions.plugins.push(tailwindcss)
|
||||
postcssOptions.plugins.push(autoprefixer)
|
||||
return postcssOptions
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
plugins: docusaurusPlugins,
|
||||
i18n: { defaultLocale: 'en', locales: ['en'] },
|
||||
presets: [
|
||||
[
|
||||
|
|
@ -84,6 +37,11 @@ const config = {
|
|||
],
|
||||
],
|
||||
themeConfig: {
|
||||
colorMode: {
|
||||
// Do not be tempted to change these
|
||||
disableSwitch: true,
|
||||
respectPrefersColorScheme: true,
|
||||
},
|
||||
image: 'img/freesewing-social-card.png',
|
||||
navbar: {
|
||||
title: 'FreeSewing Studio',
|
||||
|
|
|
|||
|
|
@ -29,24 +29,25 @@
|
|||
"@freesewing/plugin-i18n": "latest",
|
||||
"@freesewing/plugin-theme": "latest",
|
||||
"@freesewing/plugin-timing": "latest",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"clsx": "^2.0.0",
|
||||
"daisyui": "^4.12.23",
|
||||
"lodash": "^4.17.21",
|
||||
"postcss": "^8.4.47",
|
||||
"prism-react-renderer": "^2.3.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-markdown": "^9.0.1",
|
||||
"remark-smartypants": "^3.0.2",
|
||||
"tailwindcss": "^3.4.14"
|
||||
"remark-smartypants": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-syntax-import-attributes": "^7.25.6",
|
||||
"@docusaurus/module-type-aliases": "^3.7.0",
|
||||
"@docusaurus/types": "^3.7.0",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"daisyui": "^5.0.19",
|
||||
"glob": "^11.0.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"yaml-loader": "^0.8.1"
|
||||
},
|
||||
"browserslist": {
|
||||
|
|
|
|||
28
packages/studio/template/plugins/esm.mjs
Normal file
28
packages/studio/template/plugins/esm.mjs
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export function esmPlugin() {
|
||||
return {
|
||||
name: 'esm-plugin',
|
||||
configureWebpack() {
|
||||
return {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.mjs$/,
|
||||
include: /node_modules/,
|
||||
type: 'javascript/auto',
|
||||
},
|
||||
{
|
||||
test: /\.mjs$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-react'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
4
packages/studio/template/plugins/index.mjs
Normal file
4
packages/studio/template/plugins/index.mjs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { esmPlugin } from './esm.mjs'
|
||||
import { tailwindPlugin } from './tailwind.mjs'
|
||||
|
||||
export const docusaurusPlugins = [esmPlugin, tailwindPlugin]
|
||||
14
packages/studio/template/plugins/tailwind.mjs
Normal file
14
packages/studio/template/plugins/tailwind.mjs
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import tailwindPostcss from '@tailwindcss/postcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
export async function tailwindPlugin() {
|
||||
return {
|
||||
name: 'tailwind-plugin',
|
||||
configurePostCss(postcssOptions) {
|
||||
// Appends TailwindCSS and AutoPrefixer.
|
||||
postcssOptions.plugins.push(tailwindPostcss)
|
||||
postcssOptions.plugins.push(autoprefixer)
|
||||
return postcssOptions
|
||||
},
|
||||
}
|
||||
}
|
||||
6
packages/studio/template/postcss.config.js
Normal file
6
packages/studio/template/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ export function BareLayout({
|
|||
children = null,
|
||||
footer = false,
|
||||
noHeader = false,
|
||||
className = 'tw-bg-transparent tw-p-0 tw-m-0',
|
||||
className = 'tw:bg-transparent tw:p-0 tw:m-0',
|
||||
title = 'FreeSewing.org',
|
||||
description = 'Free bespoke sewing patterns',
|
||||
}) {
|
||||
|
|
|
|||
|
|
@ -1,285 +1,205 @@
|
|||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
/* Colors from tailwind that we use here*/
|
||||
--sky-300: #7dd3fc;
|
||||
--sky-400: #38bdf8;
|
||||
--sky-500: #0ea5e9;
|
||||
--sky-600: #0284c7;
|
||||
--sky-700: #0369a1;
|
||||
--pink-300: #f9a8d4;
|
||||
--pink-500: #ec4899;
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #e5e5e5;
|
||||
--neutral-400: #a3a3a3;
|
||||
--neutral-500: #737373;
|
||||
--neutral-600: #525252;
|
||||
--neutral-900: #0a0a0a;
|
||||
--amber-600: #d97706;
|
||||
--red-500: #ef4444;
|
||||
--blue-500: #3b82f6;
|
||||
--pink-500: #ec4899;
|
||||
--violet-500: #8b5cf6;
|
||||
|
||||
/* Color Palette */
|
||||
--ifm-color-primary: var(--sky-500);
|
||||
--ifm-color-primary-dark: var(--sky-600);
|
||||
--ifm-color-primary-light: var(--sky-400);
|
||||
--ifm-color-secondary: var(--sky-300);
|
||||
--ifm-color-tertiary: var(--pink-500);
|
||||
|
||||
/* Text Colors */
|
||||
--ifm-font-color-base: var(--neutral-900);
|
||||
--ifm-font-color-light: var(--neutral-50);
|
||||
--ifm-font-color-secondary: var(--sky-500);
|
||||
|
||||
/* State colors */
|
||||
--ifm-color-success: var(--sky-400);
|
||||
|
||||
/* Background Colors */
|
||||
--ifm-background-color: #fcfcfc;
|
||||
--ifm-background-color-secondary: var(--neutral-100);
|
||||
|
||||
/* Borders and Outlines */
|
||||
--ifm-border-color: var(--neutral-200);
|
||||
--ifm-outline-color: var(--pink-300);
|
||||
|
||||
/* Link colors */
|
||||
--ifm-link-color: var(--sky-600);
|
||||
--ifm-link-hover-color: var(--sky-700);
|
||||
|
||||
/* Button Colors */
|
||||
--ifm-button-color: var(--neutral-50);
|
||||
--ifm-button-background-color: var(--sky-500);
|
||||
--ifm-button-background-hover-color: var(--sky-700);
|
||||
--ifm-button-border-color: var(--sky-600);
|
||||
|
||||
/* Font Sizes and Spacing */
|
||||
--ifm-font-size-base: 16px;
|
||||
--ifm-line-height-base: 1.5;
|
||||
--ifm-spacing-unit: 8px;
|
||||
--ifm-spacing-base: 16px;
|
||||
|
||||
/* Sidebar/Navigation Customizations */
|
||||
--ifm-sidebar-background-color: var(--neutral-50);
|
||||
--ifm-sidebar-link-color: var(--neutral-500);
|
||||
--ifm-sidebar-link-hover-color: var(--sky-600);
|
||||
--ifm-sidebar-active-link-color: var(--sky-600);
|
||||
--ifm-sidebar-item-spacing: 8px;
|
||||
|
||||
/* Navbar Customizations */
|
||||
--ifm-navbar-background-color: var(--neutral-50);
|
||||
--ifm-navbar-link-color: var(--neutral-900);
|
||||
--ifm-navbar-link-hover-color: var(--sky-500);
|
||||
|
||||
/* Footer colors */
|
||||
--ifm-footer-background-color: var(--neutral-100);
|
||||
--ifm-footer-link-color: var(--sky-600);
|
||||
|
||||
/*
|
||||
* FreeSewing pattern vars
|
||||
*/
|
||||
'--pattern-bg':var(--neutral-50);
|
||||
'--pattern-fabric':var(--neutral-900);
|
||||
'--pattern-lining':var(--emerald-500);
|
||||
'--pattern-interfacing':var(--neutral-400);
|
||||
,'--pattern-canvas': var(--amber-600);
|
||||
'--pattern-various':var(--red-500);
|
||||
'--pattern-mark':var(--blue-500);
|
||||
'--pattern-contrast':var(--pink-500);
|
||||
'--pattern-note':var(--violet-500);
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme='dark'] {
|
||||
/* Text Colors */
|
||||
--ifm-font-color-base: var(--neutral-200);
|
||||
--ifm-font-color-light: var(--neutral-50);
|
||||
|
||||
/* Background Colors */
|
||||
--ifm-background-color: var(--neutral-900);
|
||||
--ifm-background-color-secondary: var(--neutral-100);
|
||||
|
||||
/* Borders and Outlines */
|
||||
--ifm-border-color: var(--neutral-200);
|
||||
|
||||
/* Link colors */
|
||||
--ifm-link-color: var(--sky-400);
|
||||
--ifm-link-hover-color: var(--sky-500);
|
||||
|
||||
/* Button Colors */
|
||||
--ifm-button-color: var(--neutral-600);
|
||||
|
||||
/* Navbar Customizations */
|
||||
--ifm-navbar-background-color: var(--neutral-900);
|
||||
--ifm-navbar-link-color: var(--neutral-50);
|
||||
--ifm-navbar-link-hover-color: var(--sky-300);
|
||||
|
||||
/* Footer colors */
|
||||
--ifm-footer-background-color: var(--neutral-900);
|
||||
--ifm-footer-link-color: var(--sky-300);
|
||||
|
||||
/*
|
||||
* FreeSewing pattern vars
|
||||
*/
|
||||
'--pattern-bg':var(--neutral-900);
|
||||
'--pattern-fabric':var(--neutral-5);
|
||||
'--pattern-lining':var(--emerald-500);
|
||||
'--pattern-interfacing':var(--neutral-400);
|
||||
,'--pattern-canvas': var(--amber-600);
|
||||
'--pattern-various':var(--red-500);
|
||||
'--pattern-mark':var(--blue-500);
|
||||
'--pattern-contrast':var(--pink-500);
|
||||
'--pattern-note':var(--violet-500);
|
||||
@import 'tailwindcss' prefix(tw);
|
||||
@plugin "daisyui" {
|
||||
prefix: 'daisy-';
|
||||
}
|
||||
@import './light.css';
|
||||
@import './dark.css';
|
||||
|
||||
/*
|
||||
* Add CSS for code
|
||||
*/
|
||||
@import './code.css';
|
||||
@import './code.css' layer(base);
|
||||
|
||||
/*
|
||||
* Add styling for FreeSewing patterns
|
||||
*/
|
||||
@import './patterns.css';
|
||||
@import './patterns.css' layer(base);
|
||||
|
||||
div.footer__copyright {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
div.footer__copyright a {
|
||||
font-weight: bold;
|
||||
@source '../**/*.{js,mjs,mdx}';
|
||||
@source '../../docs/**/*.mdx';
|
||||
@source '../../node_modules/daisyui/**/*.{js,mjs,ts,tsx}';
|
||||
@source '../../node_modules/@freesewing/react/components/**/*.mjs';
|
||||
@source '../../node_modules/@freesewing/react/context/**/*.mjs';
|
||||
@source '../../node_modules/@freesewing/react/hooks/**/*.mjs';
|
||||
@source '../../node_modules/@freesewing/utils/src/*.mjs';
|
||||
|
||||
@custom-variant dark (&:where(data-theme="dark"], data-theme="dark"] *));
|
||||
|
||||
@theme {
|
||||
--aspect-9\/16: 9 / 16;
|
||||
}
|
||||
|
||||
.caption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: -1rem;
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
.tag,
|
||||
.technique {
|
||||
background: var(--ifm-color-primary);
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--ifm-font-color-light);
|
||||
border-radius: 0.5rem;
|
||||
@utility markdown {
|
||||
& ul {
|
||||
@apply tw:list-inside tw:list-disc tw:ml-4;
|
||||
}
|
||||
}
|
||||
|
||||
.technique {
|
||||
background: var(--pink-500);
|
||||
}
|
||||
@layer base {
|
||||
div.footer__copyright {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
div.footer__copyright a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p > figure.mdx {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
figure.mdx {
|
||||
margin: 0;
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
figure.mdx > img {
|
||||
padding: 1rem;
|
||||
}
|
||||
figcaption.mdx {
|
||||
font-style: italic;
|
||||
margin-top: -0.25rem;
|
||||
opacity: 0.8;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 90%;
|
||||
.caption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.technique {
|
||||
background: var(--ifm-color-primary);
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--ifm-font-color-light);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.technique {
|
||||
background: var(--pink-500);
|
||||
}
|
||||
|
||||
p > figure.mdx {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
figure.mdx {
|
||||
margin: 0;
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
figure.mdx > img {
|
||||
padding: 1rem;
|
||||
}
|
||||
figcaption.mdx {
|
||||
font-style: italic;
|
||||
margin-top: -0.25rem;
|
||||
opacity: 0.8;
|
||||
padding: 0 0.5rem;
|
||||
font-size: 90%;
|
||||
}
|
||||
.mdx p {
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
.avatar img {
|
||||
width: var(--ifm-avatar-photo-size);
|
||||
height: var(--ifm-avatar-photo-size);
|
||||
}
|
||||
.avatar > div {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.markdown a:not([class]) {
|
||||
color: var(--ifm-link-color);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.markdown a:not([class]):hover {
|
||||
color: var(--ifm-link-hover-color);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 4px;
|
||||
}
|
||||
|
||||
.markdown ul > li > p {
|
||||
display: inline;
|
||||
}
|
||||
a.theme-edit-this-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: var(--ifm-pagination-nav-border-radius);
|
||||
line-height: var(--ifm-heading-line-height);
|
||||
padding: var(--ifm-global-spacing);
|
||||
transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
|
||||
color: var(--ifm-link-color);
|
||||
text-decoration: var(--ifm-link-decoration);
|
||||
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
|
||||
font-size: var(--ifm-h4-font-size);
|
||||
font-weight: var(--ifm-heading-font-weight);
|
||||
word-break: break-word;
|
||||
}
|
||||
a.theme-edit-this-page:hover {
|
||||
border-color: var(--ifm-pagination-nav-color-hover);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.daisy-btn-neutral:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* fixes
|
||||
*/
|
||||
.avatar img {
|
||||
width: var(--ifm-avatar-photo-size);
|
||||
height: var(--ifm-avatar-photo-size);
|
||||
a.no-hover-decoration:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.avatar > div {
|
||||
aspect-ratio: auto;
|
||||
a.tw\:daisy-btn {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.markdown a:not([class]) {
|
||||
color: var(--ifm-link-color);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 2px;
|
||||
a.tw\:daisy-btn-primary.tw\:daisy-btn-outline {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.markdown a:not([class]):hover {
|
||||
color: var(--ifm-link-hover-color);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 4px;
|
||||
a.tw\:daisy-btn-primary.tw\:daisy-btn-outline:hover {
|
||||
color: var(--color-primary-content);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown ul > li > p {
|
||||
display: inline;
|
||||
.tw\:daisy-menu {
|
||||
--daisy-menu-active-fg: currentColor;
|
||||
--daisy-menu-active-bg: var(--bg-transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* Make the 'edit this page' link look consistent
|
||||
*/
|
||||
a.theme-edit-this-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: var(--ifm-pagination-nav-border-radius);
|
||||
line-height: var(--ifm-heading-line-height);
|
||||
padding: var(--ifm-global-spacing);
|
||||
transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
|
||||
color: var(--ifm-link-color);
|
||||
text-decoration: var(--ifm-link-decoration);
|
||||
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
|
||||
font-size: var(--ifm-h4-font-size);
|
||||
font-weight: var(--ifm-heading-font-weight);
|
||||
word-break: break-word;
|
||||
}
|
||||
a.theme-edit-this-page:hover {
|
||||
border-color: var(--ifm-pagination-nav-color-hover);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.daisy-btn-neutral:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add Tailwindcss
|
||||
*/
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
/* Applied styles for common HTML tags */
|
||||
h1 {
|
||||
@apply tw-text-5xl tw-pt-5 tw-pb-4 tw-font-light tw-tracking-tight lg:tw-text-6xl;
|
||||
@apply tw:text-5xl tw:pt-5 tw:pb-4 tw:font-light tw:tracking-tight tw:lg:text-6xl;
|
||||
}
|
||||
h2 {
|
||||
@apply tw-text-3xl tw-pt-4 tw-pb-3 tw-font-black tw-m-0 tw-tracking-tight lg:tw-text-4xl;
|
||||
@apply tw:text-3xl tw:pt-4 tw:pb-3 tw:font-black tw:m-0 tw:tracking-tight tw:lg:text-4xl;
|
||||
}
|
||||
h3 {
|
||||
@apply tw-text-2xl tw-pt-3 tw-pb-2 tw-font-extrabold tw-tracking-tight tw-m-0 lg:tw-text-3xl;
|
||||
@apply tw:text-2xl tw:pt-3 tw:pb-2 tw:font-extrabold tw:tracking-tight tw:m-0 tw:lg:text-3xl;
|
||||
}
|
||||
h4 {
|
||||
@apply tw-text-xl tw-pt-2 tw-pb-1 tw-font-bold tw-m-0 tw-tracking-tight lg:tw-text-2xl;
|
||||
@apply tw:text-xl tw:pt-2 tw:pb-1 tw:font-bold tw:m-0 tw:tracking-tight tw:lg:text-2xl;
|
||||
}
|
||||
h5 {
|
||||
@apply tw-text-lg tw-py-1 tw-font-semibold tw-m-0 tw-tracking-tight lg:tw-text-xl;
|
||||
@apply tw:text-lg tw:py-1 tw:font-semibold tw:m-0 tw:tracking-tight tw:lg:text-xl;
|
||||
}
|
||||
h6 {
|
||||
@apply tw-text-base tw-py-1 tw-font-medium tw-italic tw-m-0 tw-tracking-tight lg:tw-text-lg;
|
||||
}
|
||||
.markdown ul {
|
||||
@apply tw-list-inside tw-list-disc tw-ml-4;
|
||||
@apply tw:text-base tw:py-1 tw:font-medium tw:italic tw:m-0 tw:tracking-tight tw:lg:text-lg;
|
||||
}
|
||||
}
|
||||
nav.navbar {
|
||||
|
|
|
|||
229
packages/studio/template/src/css/dark.css
Normal file
229
packages/studio/template/src/css/dark.css
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
[data-theme='dark']:root,
|
||||
html[data-theme='dark'] {
|
||||
/* Color Palette */
|
||||
--ifm-color-primary: oklch(0.685 0.169 237.323);
|
||||
--ifm-color-primary-dark: oklch(0.588 0.158 241.966);
|
||||
--ifm-color-primary-light: oklch(0.746 0.16 232.661);
|
||||
--ifm-color-secondary: oklch(0.828 0.111 230.318);
|
||||
--ifm-color-tertiary: oklch(0.656 0.241 354.308);
|
||||
|
||||
/* Text Colors */
|
||||
--ifm-font-color-base: oklch(0.97 0 0);
|
||||
--ifm-font-color-light: oklch(0.985 0 0);
|
||||
--ifm-font-color-secondary: oklch(0.685 0.169 237.323);
|
||||
|
||||
/* State colors */
|
||||
--ifm-color-success: oklch(0.746 0.16 232.661);
|
||||
|
||||
/* Background Colors */
|
||||
--ifm-background-color: oklch(0.269 0 0);
|
||||
--ifm-background-color-secondary: oklch(0.97 0 0);
|
||||
|
||||
/* Borders and Outlines */
|
||||
--ifm-border-color: oklch(0.922 0 0);
|
||||
--ifm-outline-color: oklch(0.823 0.12 346.018);
|
||||
|
||||
/* Link colors */
|
||||
--ifm-link-color: oklch(0.746 0.16 232.661);
|
||||
--ifm-link-hover-color: oklch(0.828 0.111 230.318);
|
||||
|
||||
/* Button Colors */
|
||||
--ifm-button-color: oklch(0.985 0 0);
|
||||
--ifm-button-background-color: oklch(0.685 0.169 237.323);
|
||||
--ifm-button-background-hover-color: oklch(0.5 0.134 242.749);
|
||||
--ifm-button-border-color: oklch(0.588 0.158 241.966);
|
||||
|
||||
/* Font Sizes and Spacing */
|
||||
--ifm-font-size-base: 16px;
|
||||
--ifm-line-height-base: 1.5;
|
||||
--ifm-spacing-unit: 8px;
|
||||
--ifm-spacing-base: 16px;
|
||||
|
||||
/* Sidebar/Navigation Customizations */
|
||||
--ifm-sidebar-background-color: oklch(0.985 0 0);
|
||||
--ifm-sidebar-link-color: oklch(0.556 0 0);
|
||||
--ifm-sidebar-link-hover-color: oklch(0.588 0.158 241.966);
|
||||
--ifm-sidebar-active-link-color: oklch(0.588 0.158 241.966);
|
||||
--ifm-sidebar-item-spacing: 8px;
|
||||
|
||||
/* Navbar Customizations */
|
||||
--ifm-navbar-background-color: oklch(0.985 0 0);
|
||||
--ifm-navbar-link-color: oklch(0.97 0 0);
|
||||
--ifm-navbar-link-hover-color: oklch(0.685 0.169 237.323);
|
||||
|
||||
/* Footer colors */
|
||||
--ifm-footer-background-color: oklch(0.205 0 0);
|
||||
--ifm-footer-link-color: oklch(0.828 0.111 230.318);
|
||||
|
||||
/*
|
||||
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
|
||||
*/
|
||||
--pattern-bg: oklch(0.985 0 0);
|
||||
--pattern-fabric: oklch(0.985 0 0);
|
||||
--pattern-lining: oklch(0.696 0.17 162.48);
|
||||
--pattern-interfacing: oklch(0.708 0 0);
|
||||
--pattern-canvas: oklch(0.666 0.179 58.318);
|
||||
--pattern-various: oklch(0.637 0.237 25.331);
|
||||
--pattern-mark: oklch(0.623 0.214 259.815);
|
||||
--pattern-contrast: oklch(0.656 0.241 354.308);
|
||||
--pattern-note: oklch(0.606 0.25 292.717);
|
||||
|
||||
--pattern-color-0: oklch(0.637 0.237 25.331);
|
||||
--pattern-color-1: oklch(0.723 0.219 149.579);
|
||||
--pattern-color-2: oklch(0.623 0.214 259.815);
|
||||
--pattern-color-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-color-4: oklch(0.656 0.241 354.308);
|
||||
--pattern-color-5: oklch(0.606 0.25 292.717);
|
||||
--pattern-color-6: oklch(0.704 0.14 182.503);
|
||||
--pattern-color-7: oklch(0.769 0.188 70.08);
|
||||
--pattern-color-8: oklch(0.667 0.295 322.15);
|
||||
--pattern-color-9: oklch(0.715 0.143 215.221);
|
||||
|
||||
--pattern-text-xs: 0.2rem;
|
||||
--pattern-text-sm: 0.3rem;
|
||||
--pattern-text: 0.4rem;
|
||||
--pattern-text-lg: 0.6rem;
|
||||
--pattern-text-xl: 0.8rem;
|
||||
--pattern-text-2xl: 1.5rem;
|
||||
--pattern-text-3xl: 2rem;
|
||||
--pattern-text-4xl: 3rem;
|
||||
|
||||
--pattern-scale: 1;
|
||||
--pattern-stroke-xs: 0.2px;
|
||||
--pattern-stroke-sm: 0.4px;
|
||||
--pattern-stroke: 0.7px;
|
||||
--pattern-stroke-lg: 1.3px;
|
||||
--pattern-stroke-xl: 2px;
|
||||
--pattern-stroke-2xl: 4px;
|
||||
--pattern-stroke-3xl: 6px;
|
||||
--pattern-stroke-4xl: 8px;
|
||||
--pattern-stroke-5xl: 12px;
|
||||
--pattern-stroke-6xl: 16px;
|
||||
--pattern-stroke-7xl: 20px;
|
||||
|
||||
--pattern-sample-1: oklch(0.637 0.237 25.331);
|
||||
--pattern-sample-2: oklch(0.705 0.213 47.604);
|
||||
--pattern-sample-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-sample-4: oklch(0.768 0.233 130.85);
|
||||
--pattern-sample-5: oklch(0.696 0.17 162.48);
|
||||
--pattern-sample-6: oklch(0.715 0.143 215.221);
|
||||
--pattern-sample-7: oklch(0.623 0.214 259.815);
|
||||
--pattern-sample-8: oklch(0.606 0.25 292.717);
|
||||
--pattern-sample-9: oklch(0.667 0.295 322.15);
|
||||
--pattern-sample-10: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: 'dark';
|
||||
default: false;
|
||||
prefersdark: true;
|
||||
color-scheme: dark;
|
||||
|
||||
--color-base-100: oklch(0.205 0 0);
|
||||
--color-base-200: oklch(0.371 0 0);
|
||||
--color-base-300: oklch(0.439 0 0);
|
||||
--color-base-content: oklch(0.97 0 0);
|
||||
--color-primary: oklch(0.811 0.111 293.571);
|
||||
--color-primary-content: oklch(0.145 0 0);
|
||||
--color-secondary: oklch(0.828 0.111 230.318);
|
||||
--color-secondary-content: oklch(0.145 0 0);
|
||||
--color-accent: oklch(0.833 0.145 321.434);
|
||||
--color-accent-content: oklch(0.145 0 0);
|
||||
--color-neutral: oklch(0.87 0 0);
|
||||
--color-neutral-content: oklch(0.145 0 0);
|
||||
--color-info: oklch(0.945 0.129 101.54);
|
||||
--color-info-content: oklch(0.145 0 0);
|
||||
--color-success: oklch(0.792 0.209 151.711);
|
||||
--color-success-content: oklch(0.145 0 0);
|
||||
--color-warning: oklch(0.75 0.183 55.934);
|
||||
--color-warning-content: oklch(0.145 0 0);
|
||||
--color-error: oklch(0.704 0.191 22.216);
|
||||
--color-error-content: oklch(0.145 0 0);
|
||||
|
||||
/*
|
||||
* These are variables to style highlighted code blocks.
|
||||
*/
|
||||
--code-background-color: oklch(0.269 0 0);
|
||||
--code-background-highlight-color: #313131;
|
||||
--code-border-color: oklch(0.205 0 0);
|
||||
--code-color: oklch(0.97 0 0);
|
||||
--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: oklch(0.795 0.184 86.047);
|
||||
--code-font-weight-keyword: bold;
|
||||
--code-color-entity: oklch(0.702 0.183 293.541);
|
||||
--code-font-weight-entity: bold;
|
||||
--code-color-constant: oklch(0.841 0.238 128.85);
|
||||
--code-color-string: oklch(0.746 0.16 232.661);
|
||||
--code-font-style-string: italic;
|
||||
--code-color-variable: oklch(0.673 0.182 276.935);
|
||||
--code-color-comment: oklch(0.708 0 0);
|
||||
--code-color-tag: oklch(0.792 0.209 151.711);
|
||||
--code-color-property: oklch(0.945 0.129 101.54);
|
||||
--code-font-weight-property: bold;
|
||||
|
||||
/*
|
||||
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
|
||||
*/
|
||||
--pattern-bg: oklch(0.985 0 0);
|
||||
--pattern-fabric: oklch(0.985 0 0);
|
||||
--pattern-lining: oklch(0.696 0.17 162.48);
|
||||
--pattern-interfacing: oklch(0.708 0 0);
|
||||
--pattern-canvas: oklch(0.666 0.179 58.318);
|
||||
--pattern-various: oklch(0.637 0.237 25.331);
|
||||
--pattern-mark: oklch(0.623 0.214 259.815);
|
||||
--pattern-contrast: oklch(0.656 0.241 354.308);
|
||||
--pattern-note: oklch(0.606 0.25 292.717);
|
||||
|
||||
--pattern-color-0: oklch(0.637 0.237 25.331);
|
||||
--pattern-color-1: oklch(0.723 0.219 149.579);
|
||||
--pattern-color-2: oklch(0.623 0.214 259.815);
|
||||
--pattern-color-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-color-4: oklch(0.656 0.241 354.308);
|
||||
--pattern-color-5: oklch(0.606 0.25 292.717);
|
||||
--pattern-color-6: oklch(0.704 0.14 182.503);
|
||||
--pattern-color-7: oklch(0.769 0.188 70.08);
|
||||
--pattern-color-8: oklch(0.667 0.295 322.15);
|
||||
--pattern-color-9: oklch(0.715 0.143 215.221);
|
||||
|
||||
--pattern-text-xs: 0.2rem;
|
||||
--pattern-text-sm: 0.3rem;
|
||||
--pattern-text: 0.4rem;
|
||||
--pattern-text-lg: 0.6rem;
|
||||
--pattern-text-xl: 0.8rem;
|
||||
--pattern-text-2xl: 1.5rem;
|
||||
--pattern-text-3xl: 2rem;
|
||||
--pattern-text-4xl: 3rem;
|
||||
|
||||
--pattern-scale: 1;
|
||||
--pattern-stroke-xs: 0.2px;
|
||||
--pattern-stroke-sm: 0.4px;
|
||||
--pattern-stroke: 0.7px;
|
||||
--pattern-stroke-lg: 1.3px;
|
||||
--pattern-stroke-xl: 2px;
|
||||
--pattern-stroke-2xl: 4px;
|
||||
--pattern-stroke-3xl: 6px;
|
||||
--pattern-stroke-4xl: 8px;
|
||||
--pattern-stroke-5xl: 12px;
|
||||
--pattern-stroke-6xl: 16px;
|
||||
--pattern-stroke-7xl: 20px;
|
||||
|
||||
--pattern-sample-1: oklch(0.637 0.237 25.331);
|
||||
--pattern-sample-2: oklch(0.705 0.213 47.604);
|
||||
--pattern-sample-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-sample-4: oklch(0.768 0.233 130.85);
|
||||
--pattern-sample-5: oklch(0.696 0.17 162.48);
|
||||
--pattern-sample-6: oklch(0.715 0.143 215.221);
|
||||
--pattern-sample-7: oklch(0.623 0.214 259.815);
|
||||
--pattern-sample-8: oklch(0.606 0.25 292.717);
|
||||
--pattern-sample-9: oklch(0.667 0.295 322.15);
|
||||
--pattern-sample-10: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
233
packages/studio/template/src/css/light.css
Normal file
233
packages/studio/template/src/css/light.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/* Infima vars (for docusaurus native styles) */
|
||||
:root {
|
||||
/* Color Palette */
|
||||
--ifm-color-primary: oklch(0.685 0.169 237.323);
|
||||
--ifm-color-primary-dark: oklch(0.588 0.158 241.966);
|
||||
--ifm-color-primary-light: oklch(0.746 0.16 232.661);
|
||||
--ifm-color-secondary: oklch(0.828 0.111 230.318);
|
||||
--ifm-color-tertiary: oklch(0.656 0.241 354.308);
|
||||
|
||||
/* Text Colors */
|
||||
--ifm-font-color-base: oklch(0.205 0 0);
|
||||
--ifm-font-color-light: oklch(0.985 0 0);
|
||||
--ifm-font-color-secondary: oklch(0.685 0.169 237.323);
|
||||
|
||||
/* State colors */
|
||||
--ifm-color-success: oklch(0.746 0.16 232.661);
|
||||
|
||||
/* Background Colors */
|
||||
--ifm-background-color: oklch(0.985 0 0);
|
||||
--ifm-background-color-secondary: oklch(0.97 0 0);
|
||||
|
||||
/* Borders and Outlines */
|
||||
--ifm-border-color: oklch(0.922 0 0);
|
||||
--ifm-outline-color: oklch(0.823 0.12 346.018);
|
||||
|
||||
/* Link colors */
|
||||
--ifm-link-color: oklch(0.588 0.158 241.966);
|
||||
--ifm-link-hover-color: oklch(0.5 0.134 242.749);
|
||||
|
||||
/* Button Colors */
|
||||
--ifm-button-color: oklch(0.985 0 0);
|
||||
--ifm-button-background-color: oklch(0.685 0.169 237.323);
|
||||
--ifm-button-background-hover-color: oklch(0.5 0.134 242.749);
|
||||
--ifm-button-border-color: oklch(0.588 0.158 241.966);
|
||||
|
||||
/* Font Sizes and Spacing */
|
||||
--ifm-font-size-base: 16px;
|
||||
--ifm-line-height-base: 1.5;
|
||||
--ifm-spacing-unit: 8px;
|
||||
--ifm-spacing-base: 16px;
|
||||
|
||||
/* Sidebar/Navigation Customizations */
|
||||
--ifm-sidebar-background-color: oklch(0.985 0 0);
|
||||
--ifm-sidebar-link-color: oklch(0.556 0 0);
|
||||
--ifm-sidebar-link-hover-color: oklch(0.588 0.158 241.966);
|
||||
--ifm-sidebar-active-link-color: oklch(0.588 0.158 241.966);
|
||||
--ifm-sidebar-item-spacing: 8px;
|
||||
|
||||
/* Navbar Customizations */
|
||||
--ifm-navbar-background-color: oklch(0.985 0 0);
|
||||
--ifm-navbar-link-color: oklch(0.205 0 0);
|
||||
--ifm-navbar-link-hover-color: oklch(0.685 0.169 237.323);
|
||||
|
||||
/* Footer colors */
|
||||
--ifm-footer-background-color: oklch(0.922 0 0);
|
||||
--ifm-footer-link-color: oklch(0.588 0.158 241.966);
|
||||
|
||||
/*
|
||||
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
|
||||
*/
|
||||
--pattern-bg: oklch(0.985 0 0);
|
||||
--pattern-fabric: oklch(0.205 0 0);
|
||||
--pattern-lining: oklch(0.696 0.17 162.48);
|
||||
--pattern-interfacing: oklch(0.708 0 0);
|
||||
--pattern-canvas: oklch(0.666 0.179 58.318);
|
||||
--pattern-various: oklch(0.637 0.237 25.331);
|
||||
--pattern-mark: oklch(0.623 0.214 259.815);
|
||||
--pattern-contrast: oklch(0.656 0.241 354.308);
|
||||
--pattern-note: oklch(0.606 0.25 292.717);
|
||||
|
||||
--pattern-color-0: oklch(0.637 0.237 25.331);
|
||||
--pattern-color-1: oklch(0.723 0.219 149.579);
|
||||
--pattern-color-2: oklch(0.623 0.214 259.815);
|
||||
--pattern-color-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-color-4: oklch(0.656 0.241 354.308);
|
||||
--pattern-color-5: oklch(0.606 0.25 292.717);
|
||||
--pattern-color-6: oklch(0.704 0.14 182.503);
|
||||
--pattern-color-7: oklch(0.769 0.188 70.08);
|
||||
--pattern-color-8: oklch(0.667 0.295 322.15);
|
||||
--pattern-color-9: oklch(0.715 0.143 215.221);
|
||||
|
||||
--pattern-text-xs: 0.2rem;
|
||||
--pattern-text-sm: 0.3rem;
|
||||
--pattern-text: 0.4rem;
|
||||
--pattern-text-lg: 0.6rem;
|
||||
--pattern-text-xl: 0.8rem;
|
||||
--pattern-text-2xl: 1.5rem;
|
||||
--pattern-text-3xl: 2rem;
|
||||
--pattern-text-4xl: 3rem;
|
||||
|
||||
--pattern-scale: 1;
|
||||
--pattern-stroke-xs: 0.2px;
|
||||
--pattern-stroke-sm: 0.4px;
|
||||
--pattern-stroke: 0.7px;
|
||||
--pattern-stroke-lg: 1.3px;
|
||||
--pattern-stroke-xl: 2px;
|
||||
--pattern-stroke-2xl: 4px;
|
||||
--pattern-stroke-3xl: 6px;
|
||||
--pattern-stroke-4xl: 8px;
|
||||
--pattern-stroke-5xl: 12px;
|
||||
--pattern-stroke-6xl: 16px;
|
||||
--pattern-stroke-7xl: 20px;
|
||||
|
||||
--pattern-sample-1: oklch(0.637 0.237 25.331);
|
||||
--pattern-sample-2: oklch(0.705 0.213 47.604);
|
||||
--pattern-sample-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-sample-4: oklch(0.768 0.233 130.85);
|
||||
--pattern-sample-5: oklch(0.696 0.17 162.48);
|
||||
--pattern-sample-6: oklch(0.715 0.143 215.221);
|
||||
--pattern-sample-7: oklch(0.623 0.214 259.815);
|
||||
--pattern-sample-8: oklch(0.606 0.25 292.717);
|
||||
--pattern-sample-9: oklch(0.667 0.295 322.15);
|
||||
--pattern-sample-10: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: 'light';
|
||||
default: true;
|
||||
prefersdark: false;
|
||||
color-scheme: light;
|
||||
|
||||
/*fontFamily: 'system-ui, sans-serif',*/
|
||||
--ifm-link-hover-color: oklch(0.685 0.169 237.323);
|
||||
|
||||
--color-base-100: oklch(0.985 0 0);
|
||||
--color-base-200: oklch(0.97 0 0);
|
||||
--color-base-300: oklch(0.87 0 0);
|
||||
--color-base-content: oklch(0.371 0 0);
|
||||
|
||||
--color-primary: oklch(0.541 0.281 293.009);
|
||||
--color-primary-content: oklch(0.985 0 0);
|
||||
--color-secondary: oklch(0.685 0.169 237.323);
|
||||
--color-secondary-content: oklch(0.985 0 0);
|
||||
--color-accent: oklch(0.667 0.295 322.15);
|
||||
--color-accent-content: oklch(0.985 0 0);
|
||||
--color-neutral: oklch(0.205 0 0);
|
||||
--color-neutral-content: oklch(0.985 0 0);
|
||||
--color-info: oklch(0.905 0.182 98.111);
|
||||
--color-info-content: oklch(0.205 0 0);
|
||||
--color-success: oklch(0.627 0.194 149.214);
|
||||
--color-success-content: oklch(0.985 0 0);
|
||||
--color-warning: oklch(0.646 0.222 41.116);
|
||||
--color-warning-content: oklch(0.985 0 0);
|
||||
--color-error: oklch(0.577 0.245 27.325);
|
||||
--color-error-content: oklch(0.985 0 0);
|
||||
|
||||
/*
|
||||
* These are variables to style highlighted code blocks.
|
||||
*/
|
||||
--code-background-color: oklch(0.269 0 0);
|
||||
--code-background-highlight-color: #313131;
|
||||
--code-border-color: oklch(0.205 0 0);
|
||||
--code-color: oklch(0.97 0 0);
|
||||
--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: oklch(0.795 0.184 86.047);
|
||||
--code-font-weight-keyword: bold;
|
||||
--code-color-entity: oklch(0.702 0.183 293.541);
|
||||
--code-font-weight-entity: bold;
|
||||
--code-color-constant: oklch(0.841 0.238 128.85);
|
||||
--code-color-string: oklch(0.746 0.16 232.661);
|
||||
--code-font-style-string: italic;
|
||||
--code-color-variable: oklch(0.673 0.182 276.935);
|
||||
--code-color-comment: oklch(0.708 0 0);
|
||||
--code-color-tag: oklch(0.792 0.209 151.711);
|
||||
--code-color-property: oklch(0.945 0.129 101.54);
|
||||
--code-font-weight-property: bold;
|
||||
|
||||
/*
|
||||
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
|
||||
*/
|
||||
--pattern-bg: oklch(0.985 0 0);
|
||||
--pattern-fabric: oklch(0.205 0 0);
|
||||
--pattern-lining: oklch(0.696 0.17 162.48);
|
||||
--pattern-interfacing: oklch(0.708 0 0);
|
||||
--pattern-canvas: oklch(0.666 0.179 58.318);
|
||||
--pattern-various: oklch(0.637 0.237 25.331);
|
||||
--pattern-mark: oklch(0.623 0.214 259.815);
|
||||
--pattern-contrast: oklch(0.656 0.241 354.308);
|
||||
--pattern-note: oklch(0.606 0.25 292.717);
|
||||
|
||||
--pattern-color-0: oklch(0.637 0.237 25.331);
|
||||
--pattern-color-1: oklch(0.723 0.219 149.579);
|
||||
--pattern-color-2: oklch(0.623 0.214 259.815);
|
||||
--pattern-color-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-color-4: oklch(0.656 0.241 354.308);
|
||||
--pattern-color-5: oklch(0.606 0.25 292.717);
|
||||
--pattern-color-6: oklch(0.704 0.14 182.503);
|
||||
--pattern-color-7: oklch(0.769 0.188 70.08);
|
||||
--pattern-color-8: oklch(0.667 0.295 322.15);
|
||||
--pattern-color-9: oklch(0.715 0.143 215.221);
|
||||
|
||||
--pattern-text-xs: 0.2rem;
|
||||
--pattern-text-sm: 0.3rem;
|
||||
--pattern-text: 0.4rem;
|
||||
--pattern-text-lg: 0.6rem;
|
||||
--pattern-text-xl: 0.8rem;
|
||||
--pattern-text-2xl: 1.5rem;
|
||||
--pattern-text-3xl: 2rem;
|
||||
--pattern-text-4xl: 3rem;
|
||||
|
||||
--pattern-scale: 1;
|
||||
--pattern-stroke-xs: 0.2px;
|
||||
--pattern-stroke-sm: 0.4px;
|
||||
--pattern-stroke: 0.7px;
|
||||
--pattern-stroke-lg: 1.3px;
|
||||
--pattern-stroke-xl: 2px;
|
||||
--pattern-stroke-2xl: 4px;
|
||||
--pattern-stroke-3xl: 6px;
|
||||
--pattern-stroke-4xl: 8px;
|
||||
--pattern-stroke-5xl: 12px;
|
||||
--pattern-stroke-6xl: 16px;
|
||||
--pattern-stroke-7xl: 20px;
|
||||
|
||||
--pattern-sample-1: oklch(0.637 0.237 25.331);
|
||||
--pattern-sample-2: oklch(0.705 0.213 47.604);
|
||||
--pattern-sample-3: oklch(0.795 0.184 86.047);
|
||||
--pattern-sample-4: oklch(0.768 0.233 130.85);
|
||||
--pattern-sample-5: oklch(0.696 0.17 162.48);
|
||||
--pattern-sample-6: oklch(0.715 0.143 215.221);
|
||||
--pattern-sample-7: oklch(0.623 0.214 259.815);
|
||||
--pattern-sample-8: oklch(0.606 0.25 292.717);
|
||||
--pattern-sample-9: oklch(0.667 0.295 322.15);
|
||||
--pattern-sample-10: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@ import { linkClasses } from '@freesewing/utils'
|
|||
import Link from '@docusaurus/Link'
|
||||
|
||||
const Card = ({ title, children, icon }) => (
|
||||
<div className={`tw-px-8 tw-bg-primary/5 tw-py-10 tw-rounded-lg tw-block tw-shadow-lg tw-grow`}>
|
||||
<h2 className="tw-mb-4 tw-text-inherit tw-flex tw-flex-row tw-gap-4 tw-justify-between tw-items-center tw-font-medium">
|
||||
<div className={`tw:px-8 tw:bg-primary/5 tw:py-10 tw:rounded-lg tw:block tw:shadow-lg tw:grow`}>
|
||||
<h2 className="tw:mb-4 tw:text-inherit tw:flex tw:flex-row tw:gap-4 tw:justify-between tw:items-center tw:font-medium">
|
||||
{title}
|
||||
{icon}
|
||||
</h2>
|
||||
|
|
@ -25,44 +25,44 @@ const meta = {
|
|||
export default function Home() {
|
||||
return (
|
||||
<DocusaurusPage DocusaurusLayout={Layout} {...meta} Layout={false}>
|
||||
<div className="tw-max-w-7xl tw-mx-auto tw-my-12 tw-px-4">
|
||||
<div className="tw-text-center">
|
||||
<FreeSewingIcon className="tw-w-48 tw-h-48 tw-mx-auto tw-pr-3" />
|
||||
<h1 className="tw-font-black tw-text-5xl lg:tw-text-7xl tw-tracking-tighter tw-mb-0 tw-pb-0">
|
||||
<div className="tw:max-w-7xl tw:mx-auto tw:my-12 tw:px-4">
|
||||
<div className="tw:text-center">
|
||||
<FreeSewingIcon className="tw:w-48 tw:h-48 tw:mx-auto tw:pr-3" />
|
||||
<h1 className="tw:font-black tw:text-5xl lg:tw:text-7xl tw:tracking-tighter tw:mb-0 tw:pb-0">
|
||||
FreeSewing Studio
|
||||
</h1>
|
||||
<h2 className="tw-text-xl lg:tw-text-3xl tw-font-medium tw-tracking-tighter tw-mt-0 tw-pt-0">
|
||||
<h2 className="tw:text-xl lg:tw:text-3xl tw:font-medium tw:tracking-tighter tw:mt-0 tw:pt-0">
|
||||
Design your own bespoke sewing patterns
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="tw-flex tw-flex-col tw-gap-8 md:tw-grid md:tw-grid-cols-2 md:tw-gap-4 tw-mt-12 md:tw-mt-20 md:tw-px-4">
|
||||
<div className="tw:flex tw:flex-col tw:gap-8 md:tw:grid md:tw:grid-cols-2 md:tw:gap-4 tw:mt-12 md:tw:mt-20 md:tw:px-4">
|
||||
<Card
|
||||
title="Batteries Included"
|
||||
icon={<OkIcon className="tw-w-12 tw-h-12 tw-text-success" stroke={4} />}
|
||||
icon={<OkIcon className="tw:w-12 tw:h-12 tw:text-success" stroke={4} />}
|
||||
>
|
||||
<p className="tw-font-medium tw-text-lg tw-mb-4">
|
||||
<p className="tw:font-medium tw:text-lg tw:mb-4">
|
||||
The FreeSewing Studio ships with <b>all FreeSewing designs</b> on board. You can
|
||||
utilize them as they are, or extend them for your own needs.
|
||||
</p>
|
||||
<p className="tw-font-medium tw-text-lg tw-mb-4">
|
||||
<p className="tw:font-medium tw:text-lg tw:mb-4">
|
||||
The studio is also integrated with the FreeSewing backend, so you can access all your
|
||||
account data, and can store your patterns.
|
||||
</p>
|
||||
<p className="tw-font-medium tw-text-lg tw-text-center tw-mt-4">
|
||||
<p className="tw:font-medium tw:text-lg tw:text-center tw:mt-4">
|
||||
<Link
|
||||
className="tw-daisy-btn tw-daisy-btn-primary hover:tw-no-underline hover:tw-text-primary-content"
|
||||
className="tw:daisy-btn tw:daisy-btn-primary hover:tw:no-underline hover:tw:text-primary-content"
|
||||
href="/collection"
|
||||
>
|
||||
Browse Collection
|
||||
<span className="tw:text-primary-content">Browse Collection</span>
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
<Card
|
||||
title="Add your own designs"
|
||||
icon={<OkIcon className="tw-w-12 tw-h-12 tw-text-success" stroke={4} />}
|
||||
icon={<OkIcon className="tw:w-12 tw:h-12 tw:text-success" stroke={4} />}
|
||||
>
|
||||
<p className="tw-font-medium tw-text-lg tw-mb-4">
|
||||
<p className="tw:font-medium tw:text-lg tw:mb-4">
|
||||
<Link href="/add" className={linkClasses}>
|
||||
Adding your own custom design
|
||||
</Link>{' '}
|
||||
|
|
@ -72,16 +72,16 @@ export default function Home() {
|
|||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="tw-font-medium tw-text-lg">
|
||||
<p className="tw:font-medium tw:text-lg">
|
||||
You can start a new design from scratch, or start from one of our blocks. Just pick
|
||||
the option you want, and your new design will be added to the studio.
|
||||
</p>
|
||||
<p className="tw-font-medium tw-text-lg tw-text-center tw-mt-4">
|
||||
<p className="tw:font-medium tw:text-lg tw:text-center tw:mt-4">
|
||||
<Link
|
||||
className="tw-daisy-btn tw-daisy-btn-primary hover:tw-no-underline hover:tw-text-primary-content"
|
||||
className="tw:daisy-btn tw:daisy-btn-primary hover:tw:no-underline hover:tw:text-primary-content"
|
||||
href="/add"
|
||||
>
|
||||
Add a new design
|
||||
<span className="tw:text-primary-content">Add a new design</span>
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
<!--
|
||||
Sometimes class names are added in a way that prevents TailwindCSS
|
||||
from detecting them, which means they won't be included in the CSS
|
||||
bundle. When you've got one of those, you can simply add them to
|
||||
the class list below, as tailwind is configured to include this
|
||||
file in it's scans.
|
||||
-->
|
||||
|
||||
<!-- Loading status -->
|
||||
<div className="fixed top-0 md:top-28 md:max-w-2xl md:px-4 md:mx-auto"></div>
|
||||
<progress className="progress progress-secondary" />
|
||||
<div className='bg-gradient-to-r from-accent from-0% to-0% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-10% to-10% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-20% to-20% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-30% to-30% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-40% to-40% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-50% to-50% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-60% to-60% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-70% to-70% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-80% to-80% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-90% to-90% to-primary'></div>
|
||||
<div className='bg-gradient-to-r from-accent from-100% to-100% to-primary'></div>
|
||||
|
||||
<!-- Classes for the Popout component -->
|
||||
<p class="border-accent bg-accent text-accent" />
|
||||
<p class="border-secondary bg-secondary text-secondary" />
|
||||
<p class="border-error bg-error text-error" />
|
||||
<p class="border-warning bg-warning text-warning" />
|
||||
<p class="border-info bg-info text-info" />
|
||||
<p class="border-success bg-success text-success" />
|
||||
<p class="border-primary bg-primary text-primary" />
|
||||
|
||||
<!-- Background opacity for highlighted lines in code -->
|
||||
<code class="bg-yellow-300 bg-opacity-5" />
|
||||
<code class="bg-orange-300 bg-opacity-5 opacity-80 line-through decoration-orange-500" />
|
||||
|
||||
<!-- badges for tags -->
|
||||
<badge class="badge badge-success hover:badge-success" />
|
||||
<badge class="badge badge-warning hover:badge-warning" />
|
||||
<badge class="badge badge-error hover:badge-error" />
|
||||
<badge class="badge badge-info hover:badge-info" />
|
||||
<badge class="badge badge-ghost hover:badge-ghost" />
|
||||
<badge class="badge badge-outline hover:badge-outline" />
|
||||
<badge class="badge badge-primary hover:badge-primary" />
|
||||
<badge class="badge badge-secondary hover:badge-secondary" />
|
||||
<badge class="badge badge-accent hover:badge-accent" />
|
||||
<badge class="badge badge-neutral hover:badge-neutral" />
|
||||
|
||||
<!-- choice button colors -->
|
||||
<div className="hover:bg-accent hover:bg-opacity-20 hover:border-accent"></div>
|
||||
<div className="hover:bg-error hover:bg-opacity-20 hover:border-error"></div>
|
||||
<div className="hover:bg-success hover:bg-opacity-20 hover:border-success"></div>
|
||||
|
||||
<!-- iFrame embed -->
|
||||
<iframe className="w-full aspect-[16/9]"/>
|
||||
|
||||
<!-- toc list padding -->
|
||||
<li className="pl-3"></li>
|
||||
|
||||
<!-- homepage -->
|
||||
<a className="bg-accent text-accent-content"></a>
|
||||
|
||||
<!-- support -->
|
||||
<div className="bg-gradient-to-tr from-secondary from-10% to-primary"></div>
|
||||
<div className="bg-gradient-to-tr from-accent from-10% to-primary"></div>
|
||||
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// Handle themes
|
||||
import { light, dark } from './themes/index.mjs'
|
||||
import daisyui from 'daisyui'
|
||||
|
||||
export default {
|
||||
content: [
|
||||
'./src/**/*.{js,mjs,mdx}',
|
||||
'./node_modules/daisyui/**/*.{js,mjs,ts,tsx}',
|
||||
'./node_modules/@freesewing/react/components/**/*.mjs',
|
||||
'./node_modules/@freesewing/react/context/**/*.mjs',
|
||||
'./node_modules/@freesewing/react/hooks/**/*.mjs',
|
||||
'./node_modules/@freesewing/react/lib/tailwind-force.mjs',
|
||||
'./node_modules/@freesewing/utils/src/*.mjs',
|
||||
'./tailwind-force.html',
|
||||
],
|
||||
plugins: [daisyui],
|
||||
prefix: 'tw-',
|
||||
daisyui: {
|
||||
themes: [{ dark, light }],
|
||||
logs: true,
|
||||
prefix: 'daisy-',
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
aspectRatio: {
|
||||
'9/16': '9 / 16',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue