diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 48735bcf..ffb0c3e9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -9,10 +9,7 @@ module.exports = { // 'airbnb-typescript/base', 'prettier' ], - plugins: [ - '@typescript-eslint', - 'import' - ], + plugins: ['@typescript-eslint', 'import'], ignorePatterns: [], // ['*.cjs'], overrides: [ { diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml index 9102fdfe..b4992f29 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yaml +++ b/.github/ISSUE_TEMPLATE/bug_report.yaml @@ -2,23 +2,23 @@ name: 🐞 Bug description: Report an issue labels: [🐞 bug] body: -- type: textarea - attributes: - label: Describe the bug - description: A clear description of the problem you're experiencing. - validations: - required: true -- type: textarea - attributes: - label: Reproduction steps - description: Describe how to reproduce the issue. - placeholder: | - 1. ... - 2. ... - validations: - required: false -- type: input - id: reproduction - attributes: - label: Link to Reproduction - description: A minimal SvelteLab / Stackblitz reproduction. + - type: textarea + attributes: + label: Describe the bug + description: A clear description of the problem you're experiencing. + validations: + required: true + - type: textarea + attributes: + label: Reproduction steps + description: Describe how to reproduce the issue. + placeholder: | + 1. ... + 2. ... + validations: + required: false + - type: input + id: reproduction + attributes: + label: Link to Reproduction + description: A minimal SvelteLab / Stackblitz reproduction. diff --git a/.github/ISSUE_TEMPLATE/docs_report.yaml b/.github/ISSUE_TEMPLATE/docs_report.yaml index ba4b212e..9656457f 100644 --- a/.github/ISSUE_TEMPLATE/docs_report.yaml +++ b/.github/ISSUE_TEMPLATE/docs_report.yaml @@ -2,7 +2,7 @@ name: 📖 Report docs related issue description: Report some problems with the documentation or improvements that can be made. labels: [📖 documentation] body: -- type: textarea - attributes: - label: Describe the issue - description: Please add helpful screenshots and links (if it is a specific page). + - type: textarea + attributes: + label: Describe the issue + description: Please add helpful screenshots and links (if it is a specific page). diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index c5c3023f..cf846fcb 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -13,7 +13,7 @@ concurrency: permissions: contents: read # to fetch code (actions/checkout) - + jobs: Check: runs-on: ubuntu-latest @@ -24,4 +24,17 @@ jobs: version: 8.6.3 run_install: true - run: pnpm run check - \ No newline at end of file + + Lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: pnpm/action-setup@v2.2.1 + with: + version: 8 + - uses: actions/setup-node@v3 + with: + node-version: '18.x' + cache: pnpm + - run: pnpm install --frozen-lockfile + - run: pnpm run lint diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8de54c40..1f2dd271 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -38,4 +38,4 @@ jobs: publish: pnpm release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }} \ No newline at end of file + NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }} diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 7c6d6e80..929c21e8 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,10 +1,10 @@ { - "recommendations": [ - "svelte.svelte-vscode", - "dbaeumer.vscode-eslint", - "antfu.unocss", - "antfu.iconify", - "esbenp.prettier-vscode", - "zixuanchen.vitest-explorer" - ] -} \ No newline at end of file + "recommendations": [ + "svelte.svelte-vscode", + "dbaeumer.vscode-eslint", + "antfu.unocss", + "antfu.iconify", + "esbenp.prettier-vscode", + "zixuanchen.vitest-explorer" + ] +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 14d0c22e..38488ebb 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the overall +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or advances of +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email address, +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -128,4 +128,4 @@ For answers to common questions about this code of conduct, see the FAQ at [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html [Mozilla CoC]: https://github.com/mozilla/diversity [FAQ]: https://www.contributor-covenant.org/faq -[translations]: https://www.contributor-covenant.org/translations \ No newline at end of file +[translations]: https://www.contributor-covenant.org/translations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 15c71039..f1101a6c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -29,4 +29,4 @@ If this is your first project to contribute to you can find many great resources 3. Clone the forked repo into your machine. 4. Open the project (using VSCode) and install the dependencies with `pnpm i`. 5. Create a new branch for you to make changes on. -6. Run the server `pnpm run dev` to see your changes. \ No newline at end of file +6. Run the server `pnpm run dev` to see your changes. diff --git a/README.md b/README.md index 5a069d1c..68684ec0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![Ato UI](./static/seo/ato-ui-banner-resized.png "Ato UI") +![Ato UI](./static/seo/ato-ui-banner-resized.png 'Ato UI') # Ato UI @@ -17,6 +17,7 @@ pnpm add -D ato-ui ``` ## ✨ Features + - 🦄 Headless + Styled components - 🎨 Themeable with an easy to use designers page - 🎯 Written in TypeScript diff --git a/mdsvex.config.js b/mdsvex.config.js index b89a67d3..97f90221 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -14,14 +14,11 @@ import { escapeSvelte } from '@huntabyte/mdsvex'; import { highlightCode } from './src/docs/mdsvex/highlight.js'; - const __dirname = fileURLToPath(new URL('.', import.meta.url)); const prettyCodeOptions = { // theme: 'github-dark', - theme: JSON.parse( - readFileSync(resolve(__dirname, './static/moonlight-2-theme.json'), 'utf-8') - ), + theme: JSON.parse(readFileSync(resolve(__dirname, './static/moonlight-2-theme.json'), 'utf-8')), keepBackground: false, // @ts-ignore:next-line onVisitLine(node) { @@ -39,9 +36,9 @@ const prettyCodeOptions = { ...options, langs: BUNDLED_LANGUAGES.filter(({ id }) => { return ['svelte', 'typescript', 'html', 'css', 'javascript', 'bash', 'shell'].includes(id); - }), + }) }); - }, + } }; /** @type {import('mdsvex').MdsvexOptions} */ @@ -51,29 +48,34 @@ export const mdsvexOptions = { // highlight: { // highlighter: highlightCode // }, - rehypePlugins: [ + rehypePlugins: [ rehypeCustomComponents, rehypeComponentPreToPre, [rehypePrettyCode, prettyCodeOptions], rehypeHandleMetadata, rehypeRenderCode, - rehypePreToComponentPre, - - ], + rehypePreToComponentPre + ] }; - function rehypeCustomComponents() { // @ts-ignore:next-line return async (tree) => { - const hTags = ['Components.h1', 'Components.h2', 'Components.h3', 'Components.h4', 'Components.h5', 'Components.h6']; + const hTags = [ + 'Components.h1', + 'Components.h2', + 'Components.h3', + 'Components.h4', + 'Components.h5', + 'Components.h6' + ]; visit(tree, (node, index, parent) => { // Check h tags, and pass some extra parameters to the custom components. - if (node?.type === 'element' && hTags.includes(node?.tagName)) { + if (node?.type === 'element' && hTags.includes(node?.tagName)) { node.properties['content'] = node.children[0].value; - node.properties['headerTag'] = node.tagName.split('.')[1]; - } + node.properties['headerTag'] = node.tagName.split('.')[1]; + } }); }; } @@ -84,7 +86,6 @@ function rehypeComponentPreToPre() { // Replace `Component.pre` tags with regular `pre` tags. // This enables us to use rehype-pretty-code with our custom `pre` component. visit(tree, (node) => { - // if (node?.data && 'meta' in node?.data) { // console.log('node:', node, '\n'); // console.log('data:', node?.data, '\n-------------------------'); @@ -100,11 +101,16 @@ function rehypeComponentPreToPre() { /** * Escapes the html string of code blocks so we can pass * it on to our custom `Component.pre` element. - * @param {string} html + * @param {string} html * @returns {string} */ function escapeHtml(html) { - return html.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", '''); + return html + .replaceAll('&', '&') + .replaceAll('<', '<') + .replaceAll('>', '>') + .replaceAll('"', '"') + .replaceAll("'", '''); } function rehypePreToComponentPre() { @@ -119,7 +125,6 @@ function rehypePreToComponentPre() { if (node?.type === 'element' && node?.tagName === 'pre') { node.tagName = 'Components.pre'; - // if (node?.children.length > 0) { // console.log('\n\nnode:', node); // console.log('\n\nnode.children[0]:', node?.children[0], '\n------------------------'); @@ -143,7 +148,10 @@ function rehypeHandleMetadata() { const titleElement = node.children[0]; const preElement = node.children.at(-1); - if (preElement.tagName !== 'pre' || !('data-rehype-pretty-code-title' in titleElement.properties)) { + if ( + preElement.tagName !== 'pre' || + !('data-rehype-pretty-code-title' in titleElement.properties) + ) { return; } @@ -173,7 +181,7 @@ function rehypeRenderCode() { const codeString = tabsToSpaces( toHtml(codeEl, { allowDangerousCharacters: true, - allowDangerousHtml: true, + allowDangerousHtml: true }) ); @@ -185,10 +193,10 @@ function rehypeRenderCode() { } /** - * - * @param {string} code + * + * @param {string} code * @returns {string} */ function tabsToSpaces(code) { return code.replaceAll(' ', ' '); -} \ No newline at end of file +} diff --git a/package.json b/package.json index bed1ca91..522c8d8b 100644 --- a/package.json +++ b/package.json @@ -140,4 +140,4 @@ "esm-env": "^1.0.0", "unocss": "^0.55.7" } -} \ No newline at end of file +} diff --git a/scripts/api-docs.ts b/scripts/api-docs.ts index 9fe8cac9..af86a0b1 100644 --- a/scripts/api-docs.ts +++ b/scripts/api-docs.ts @@ -1,3 +1,3 @@ import { getComponentFileData } from './utils'; -getComponentFileData(); \ No newline at end of file +getComponentFileData(); diff --git a/scripts/prepare.ts b/scripts/prepare.ts index f2fbf074..b06c66bf 100644 --- a/scripts/prepare.ts +++ b/scripts/prepare.ts @@ -13,54 +13,49 @@ import type { HighlightedExamples } from './prepare.types'; import { presetAtoUI } from '../src/lib/preset/index'; export const unocss_config = { - presets: [ - presetWind(), - presetAtoUI() - ] + presets: [presetWind(), presetAtoUI()] }; -const unoGenerator = createGenerator(unocss_config);; +const unoGenerator = createGenerator(unocss_config); const prettier_config = { - parser: 'css', - plugins: [prettierParserCSS], - printWidth: Infinity + parser: 'css', + plugins: [prettierParserCSS], + printWidth: Infinity }; export async function generate_css(generator: UnoGenerator, input: string) { - const generate = await generator.generate(new Set([input]), { preflights: false, minify: true }); + const generate = await generator.generate(new Set([input]), { preflights: false, minify: true }); - return prettier.format(generate.css, prettier_config); + return prettier.format(generate.css, prettier_config); } - const dark_highlighter = await shiki.getHighlighter({ - theme: 'github-dark', - langs: ['svelte', 'typescript', 'html', 'css', 'javascript', 'shell'] + theme: 'github-dark', + langs: ['svelte', 'typescript', 'html', 'css', 'javascript', 'shell'] }); const light_highlighter = await shiki.getHighlighter({ - theme: 'github-light', - langs: ['svelte', 'typescript', 'html', 'css', 'javascript', 'shell'] + theme: 'github-light', + langs: ['svelte', 'typescript', 'html', 'css', 'javascript', 'shell'] }); - export function get_highlighted_html(code: string, lang: string) { - return { - dark_html: dark_highlighter.codeToHtml(code ?? '', { lang }), - light_html: light_highlighter.codeToHtml(code ?? '', { lang }), - } + return { + dark_html: dark_highlighter.codeToHtml(code ?? '', { lang }), + light_html: light_highlighter.codeToHtml(code ?? '', { lang }) + }; } const highlighted_examples: HighlightedExamples = {}; for (const desc of descriptions) { - for (const ex of desc.examples) { - const css = await generate_css(unoGenerator, ex); - const html = get_highlighted_html(css, 'css'); + for (const ex of desc.examples) { + const css = await generate_css(unoGenerator, ex); + const html = get_highlighted_html(css, 'css'); - Object.assign(highlighted_examples, { [ex]: html }); - } + Object.assign(highlighted_examples, { [ex]: html }); + } } -fs.writeJsonSync('static/search/highlighted-examples.json', highlighted_examples, { spaces: 4 }) +fs.writeJsonSync('static/search/highlighted-examples.json', highlighted_examples, { spaces: 4 }); diff --git a/scripts/prepare.types.ts b/scripts/prepare.types.ts index 57368443..de86f039 100644 --- a/scripts/prepare.types.ts +++ b/scripts/prepare.types.ts @@ -1,6 +1,6 @@ export type HTML = { - dark_html: string, - light_html: string, -} + dark_html: string; + light_html: string; +}; -export type HighlightedExamples = Record; \ No newline at end of file +export type HighlightedExamples = Record; diff --git a/scripts/types.ts b/scripts/types.ts index 917f533f..efddcb5d 100644 --- a/scripts/types.ts +++ b/scripts/types.ts @@ -1,12 +1,11 @@ - export type ComponentFile = { - component: string; - files: string[]; + component: string; + files: string[]; }; -export type ComponentProp = { - name: string; - type: string; - description: string; - defaultValue?: string; -}; \ No newline at end of file +export type ComponentProp = { + name: string; + type: string; + description: string; + defaultValue?: string; +}; diff --git a/scripts/utils.ts b/scripts/utils.ts index 26764266..3c12b15b 100644 --- a/scripts/utils.ts +++ b/scripts/utils.ts @@ -6,201 +6,210 @@ import type { ComponentFile } from './types'; import type { APIProp, Prop } from '../src/docs/data/types'; import { isComponent } from '../src/docs/data/components/index'; - export function getComponentFileData() { - const componentFiles = getComponentFiles(); + const componentFiles = getComponentFiles(); - const allAPIs = getAllComponentAPIs(componentFiles); + const allAPIs = getAllComponentAPIs(componentFiles); - const dir = 'static/api/'; + const dir = 'static/api/'; - if (!fs.existsSync(dir)) { - fs.mkdirSync(dir); - } + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir); + } - fs.writeJsonSync('static/api/component-apis.json', allAPIs, { spaces: 4 }) + fs.writeJsonSync('static/api/component-apis.json', allAPIs, { spaces: 4 }); } function hasIndexFile(files: string[], component: string) { - return files.includes(`./src/lib/components/${component}/index.ts`); + return files.includes(`./src/lib/components/${component}/index.ts`); } function getComponentFiles(): ComponentFile[] { - const globFiles = fg.globSync('./src/lib/components/**/*'); + const globFiles = fg.globSync('./src/lib/components/**/*'); - const components: string[] = []; + const components: string[] = []; - globFiles.forEach((file) => { - const parts = file.split('/'); + globFiles.forEach((file) => { + const parts = file.split('/'); - if (parts.length !== 6) return; + if (parts.length !== 6) return; - const component = parts[4]; + const component = parts[4]; - if (components.includes(component) || !(isComponent(component) && hasIndexFile(globFiles, component) )) return; + if ( + components.includes(component) || + !(isComponent(component) && hasIndexFile(globFiles, component)) + ) + return; - components.push(component); - }); + components.push(component); + }); - const componentFiles = components.map((item) => { - const glob = fg.globSync(`./src/lib/components/${item}/*`); + const componentFiles = components.map((item) => { + const glob = fg.globSync(`./src/lib/components/${item}/*`); - return { - component: item, - files: glob - } - }); + return { + component: item, + files: glob + }; + }); - return componentFiles; + return componentFiles; } function getAllComponentAPIs(componentFiles: ComponentFile[]) { - // getComponentAPIs(componentFiles[1].files); - const allAPIs: Record = {}; + // getComponentAPIs(componentFiles[1].files); + const allAPIs: Record = {}; - componentFiles.forEach((component) => { - const apiProps = getComponentAPIs(component.files); + componentFiles.forEach((component) => { + const apiProps = getComponentAPIs(component.files); - allAPIs[component.component] = apiProps; - }); + allAPIs[component.component] = apiProps; + }); - // console.log(JSON.stringify(allAPIs, null, 4)); - return allAPIs; + // console.log(JSON.stringify(allAPIs, null, 4)); + return allAPIs; } function getComponentAPIs(filePaths: ComponentFile['files']): APIProp[] | null { - const indexFilePath = filePaths.find((file) => file.split('/').at(-1) === 'index.ts'); + const indexFilePath = filePaths.find((file) => file.split('/').at(-1) === 'index.ts'); - if (!indexFilePath) return null; + if (!indexFilePath) return null; - const indexFile = fs.readFileSync(indexFilePath, 'utf-8'); + const indexFile = fs.readFileSync(indexFilePath, 'utf-8'); - const svelteFiles = filePaths.map((file) => ({ - path: file, - type: file.split('/').at(-1)?.split('.').at(-1), - file: file.split('/').at(-1) - })).filter((file) => file.type === 'svelte'); + const svelteFiles = filePaths + .map((file) => ({ + path: file, + type: file.split('/').at(-1)?.split('.').at(-1), + file: file.split('/').at(-1) + })) + .filter((file) => file.type === 'svelte'); - const apis: APIProp[] = []; + const apis: APIProp[] = []; - svelteFiles.forEach((svelteFile) => { - // const re = new RegExp(`export { default as (.*) } from ["'].\/${svelteFile.file}["']`); - const re = new RegExp(`export { default as (.*) } from ["']./${svelteFile.file}["']`); + svelteFiles.forEach((svelteFile) => { + // const re = new RegExp(`export { default as (.*) } from ["'].\/${svelteFile.file}["']`); + const re = new RegExp(`export { default as (.*) } from ["']./${svelteFile.file}["']`); - const matches = indexFile.match(re); + const matches = indexFile.match(re); - if (!matches) return; + if (!matches) return; - const alias = matches[1]; + const alias = matches[1]; - const scriptContent = getFileScriptTagAsString(svelteFile.path); + const scriptContent = getFileScriptTagAsString(svelteFile.path); - if (!scriptContent) return; + if (!scriptContent) return; - const filePropDescriptions = getFilePropDescriptions(scriptContent); + const filePropDescriptions = getFilePropDescriptions(scriptContent); - const api: APIProp = { - component: alias, - props: filePropDescriptions - }; + const api: APIProp = { + component: alias, + props: filePropDescriptions + }; - apis.push(api); - }); + apis.push(api); + }); - return apis; + return apis; } /** * Returns the content inside inside a Svelte file. - * + * * @param filePath Path to the svelte file. * @returns Script content. */ function getFileScriptTagAsString(filePath: string) { - const file = fs.readFileSync(filePath, 'utf-8'); + const file = fs.readFileSync(filePath, 'utf-8'); - const re = /]*>([\s\S]*?)<\/script>/g; + const re = /]*>([\s\S]*?)<\/script>/g; - const scriptContent = []; - let match; - while ((match = re.exec(file)) !== null) { - if (match[0].includes(`lang="ts"`)) { - scriptContent.push(match[1]); - } - } + const scriptContent = []; + let match; + while ((match = re.exec(file)) !== null) { + if (match[0].includes(`lang="ts"`)) { + scriptContent.push(match[1]); + } + } - return scriptContent.length === 1 ? scriptContent[0].trim() : ''; + return scriptContent.length === 1 ? scriptContent[0].trim() : ''; } function getFilePropDescriptions(svelteScriptString: string) { - // console.log(ts); - const sourceFile = ts.createSourceFile( - "file.ts", // filePath - svelteScriptString, // fileText - ts.ScriptTarget.Latest, // scriptTarget - true // setParentNodes -- sets the `parent` property - ); - - const program = ts.createProgram({ - rootNames: ["file.ts"], - options: {}, - host: { - getSourceFile: (fileName) => fileName === "file.ts" ? sourceFile : undefined, - getDefaultLibFileName: () => "lib.d.ts", - writeFile: () => {}, - getCurrentDirectory: () => "", - // getDirectories: () => [], - fileExists: (fileName) => fileName === "file.ts", - readFile: () => "", - getCanonicalFileName: (fileName) => fileName, - useCaseSensitiveFileNames: () => true, - getNewLine: () => "\n", - }, - }); - - const typeChecker = program.getTypeChecker(); - - // Find the variable declarations in the AST - const variableDeclarations: ts.VariableDeclaration[] = []; - ts.forEachChild(sourceFile, function findVariableDeclarations(node) { - if (ts.isVariableDeclaration(node)) { - variableDeclarations.push(node); - } else { - ts.forEachChild(node, findVariableDeclarations); - } - }); - - const componentProps: Prop[] = []; - - // Get the type and comment for each variable - for (const variableDeclaration of variableDeclarations) { - - const variableName = variableDeclaration.name.getText(); - - // const isExported = !!(ts.getCombinedModifierFlags(variableDeclaration?.parent?.parent) & ts.ModifierFlags.Export); - const isExported = !!(ts.getCombinedModifierFlags(({...variableDeclaration?.parent?.parent, _declarationBrand: null })) & ts.ModifierFlags.Export); - - if (isExported) { - const typeNode = typeChecker.getTypeAtLocation(variableDeclaration); - const typeText = variableDeclaration.type?.getText().trim() ?? ''; - - const type = typeText === '' ? typeChecker.typeToString(typeNode) : typeText; - - const comments = ts.getJSDocCommentsAndTags(variableDeclaration).map((node) => node.comment); - - // const newVariable = { name: variableName, type: typeChecker.typeToString(type), description: comments.join(' ') }; - const newVariable: Prop = { name: variableName, type, description: comments.join(' ') }; - - let value: null | string; - if (variableDeclaration.initializer) { - value = variableDeclaration.initializer.getText(); - newVariable.defaultValue = value; - } - - componentProps.push(newVariable); - } - } - - return componentProps; - // console.log(typesAndComments); -} \ No newline at end of file + // console.log(ts); + const sourceFile = ts.createSourceFile( + 'file.ts', // filePath + svelteScriptString, // fileText + ts.ScriptTarget.Latest, // scriptTarget + true // setParentNodes -- sets the `parent` property + ); + + const program = ts.createProgram({ + rootNames: ['file.ts'], + options: {}, + host: { + getSourceFile: (fileName) => (fileName === 'file.ts' ? sourceFile : undefined), + getDefaultLibFileName: () => 'lib.d.ts', + writeFile: () => {}, + getCurrentDirectory: () => '', + // getDirectories: () => [], + fileExists: (fileName) => fileName === 'file.ts', + readFile: () => '', + getCanonicalFileName: (fileName) => fileName, + useCaseSensitiveFileNames: () => true, + getNewLine: () => '\n' + } + }); + + const typeChecker = program.getTypeChecker(); + + // Find the variable declarations in the AST + const variableDeclarations: ts.VariableDeclaration[] = []; + ts.forEachChild(sourceFile, function findVariableDeclarations(node) { + if (ts.isVariableDeclaration(node)) { + variableDeclarations.push(node); + } else { + ts.forEachChild(node, findVariableDeclarations); + } + }); + + const componentProps: Prop[] = []; + + // Get the type and comment for each variable + for (const variableDeclaration of variableDeclarations) { + const variableName = variableDeclaration.name.getText(); + + // const isExported = !!(ts.getCombinedModifierFlags(variableDeclaration?.parent?.parent) & ts.ModifierFlags.Export); + const isExported = !!( + ts.getCombinedModifierFlags({ + ...variableDeclaration?.parent?.parent, + _declarationBrand: null + }) & ts.ModifierFlags.Export + ); + + if (isExported) { + const typeNode = typeChecker.getTypeAtLocation(variableDeclaration); + const typeText = variableDeclaration.type?.getText().trim() ?? ''; + + const type = typeText === '' ? typeChecker.typeToString(typeNode) : typeText; + + const comments = ts.getJSDocCommentsAndTags(variableDeclaration).map((node) => node.comment); + + // const newVariable = { name: variableName, type: typeChecker.typeToString(type), description: comments.join(' ') }; + const newVariable: Prop = { name: variableName, type, description: comments.join(' ') }; + + let value: null | string; + if (variableDeclaration.initializer) { + value = variableDeclaration.initializer.getText(); + newVariable.defaultValue = value; + } + + componentProps.push(newVariable); + } + } + + return componentProps; + // console.log(typesAndComments); +} diff --git a/src/app.html b/src/app.html index f3ddc18b..d3fc7555 100644 --- a/src/app.html +++ b/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/src/docs/components/api-table.svelte b/src/docs/components/api-table.svelte index cc231524..431c6d93 100644 --- a/src/docs/components/api-table.svelte +++ b/src/docs/components/api-table.svelte @@ -186,9 +186,7 @@ > {#if $activeTab === 'props'} - - Props - + Props - export let href: string; - export let text: string; - export let icon: string; + export let href: string; + export let text: string; + export let icon: string; - - - {text} - \ No newline at end of file + + {text} + diff --git a/src/docs/components/index.ts b/src/docs/components/index.ts index e4812cbe..1cde8e50 100644 --- a/src/docs/components/index.ts +++ b/src/docs/components/index.ts @@ -1,4 +1,3 @@ - export * from './landing-page'; export * from './layout'; export * from './markdown'; diff --git a/src/docs/components/installation.svelte b/src/docs/components/installation.svelte index 1943ecbc..7dd0d129 100644 --- a/src/docs/components/installation.svelte +++ b/src/docs/components/installation.svelte @@ -19,22 +19,17 @@ icon: 'i-vscode-icons-file-type-light-pnpm', value: 'pnpm add -D ato-ui' } - ] + ]; -
-
+
+
{#each tabs as { name, icon }} - @@ -43,7 +38,9 @@ {#each tabs as { name, value }}
- {value} + {value}
{/each} @@ -51,6 +48,6 @@ \ No newline at end of file + --at-apply: 'shadow-[rgba(var(--color-primary-300))_0px_0px_2px_2px]'; + } + diff --git a/src/docs/components/landing-page/index.ts b/src/docs/components/landing-page/index.ts index bbba769b..8138a167 100644 --- a/src/docs/components/landing-page/index.ts +++ b/src/docs/components/landing-page/index.ts @@ -1,2 +1 @@ - -export { default as Particles } from './particles.svelte'; \ No newline at end of file +export { default as Particles } from './particles.svelte'; diff --git a/src/docs/components/landing-page/particles.svelte b/src/docs/components/landing-page/particles.svelte index dbd5617c..3a73a66f 100644 --- a/src/docs/components/landing-page/particles.svelte +++ b/src/docs/components/landing-page/particles.svelte @@ -3,13 +3,15 @@
- Ato + Ato - UI -
\ No newline at end of file + UI +
diff --git a/src/docs/components/landing-page/ring.svelte b/src/docs/components/landing-page/ring.svelte index 964c2fb1..dc581e8b 100644 --- a/src/docs/components/landing-page/ring.svelte +++ b/src/docs/components/landing-page/ring.svelte @@ -1,11 +1,11 @@ -
- {#each particles as { z, y, color }, i} -
+ {#each particles as { z, y, color }, i} +
- {/each} + /> + {/each}
+ + + # Search @@ -44,4 +44,4 @@ icon: i-material-symbols-search-rounded
This page is a WIP and currently only shows button classes.
- \ No newline at end of file + diff --git a/src/docs/guides/tokens/background.md b/src/docs/guides/tokens/background.md index d31a3cf2..98a6a0d7 100644 --- a/src/docs/guides/tokens/background.md +++ b/src/docs/guides/tokens/background.md @@ -11,7 +11,7 @@ description: Available background shortcuts that allow you to easily set gradien ## Background & Text -`[color]-[shade]`: Sets the background color with the corresponding `text-on` color. +`[color]-[shade]`: Sets the background color with the corresponding `text-on` color. Example: `primary-500` becomes `bg-primary-500 text-on-primary-500`. @@ -57,7 +57,7 @@ Example: `bg-inverse-primary-500/20-surface/33` or `bg-inverse-primary/20-surfac ## Gradients -`bg-gradient-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[shade3]`: Sets the background to be a gradient of the three colors in the specified direction. The direction and shades are optional. It's also okay to just use 2 colors. For each color you can also specify an opacity. +`bg-gradient-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[shade3]`: Sets the background to be a gradient of the three colors in the specified direction. The direction and shades are optional. It's also okay to just use 2 colors. For each color you can also specify an opacity. Possible directions: `r | l | tr | tl | br | bl | b | t`. The default direction is `r` if no direction is specified. @@ -76,9 +76,10 @@ Examples: `bg-mesh-primary/20-x5-y0`, `bg-mesh-secondary-400/20-x20-y20-success/
bg-mesh-secondary/20-x4-y0-error-400-x125-y-25
```html -
- This div has a background mesh gradient +
+ This div has a background mesh gradient
``` @@ -89,4 +90,3 @@ Examples: `bg-mesh-primary/20-x5-y0`, `bg-mesh-secondary-400/20-x20-y20-success/ Examples: `bg-radial-primary-secondary`, `bg-radial-primary-700-secondary-700-tertiary-700`.
bg-radial-primary-secondary-tertiary-700
- diff --git a/src/docs/guides/tokens/border.md b/src/docs/guides/tokens/border.md index 2ed6f1f2..c67e83e1 100644 --- a/src/docs/guides/tokens/border.md +++ b/src/docs/guides/tokens/border.md @@ -43,4 +43,4 @@ Examples: `border-inverse-primary-secondary`, `border-inverse-surface/50-surface
border-inverse-primary/80-secondary-400/70
-
\ No newline at end of file +
diff --git a/src/docs/guides/tokens/convenience.md b/src/docs/guides/tokens/convenience.md index ca2615c7..f5f7e3dc 100644 --- a/src/docs/guides/tokens/convenience.md +++ b/src/docs/guides/tokens/convenience.md @@ -11,8 +11,8 @@ Pattern: `/^(\w+)-\((.*)\)$/` This pattern allows you to group together classes for one category inside square brackets []. -Example: `text-(teal,5xl,lg:8xl) font-(mono,semibold)` turns into: `text-teal text-5xl lg:text-8xl font-mono font-semibold` +Example: `text-(teal,5xl,lg:8xl) font-(mono,semibold)` turns into: `text-teal text-5xl lg:text-8xl font-mono font-semibold` ```html showCode=true
Hi
-``` --> \ No newline at end of file +``` --> diff --git a/src/docs/guides/tokens/svg.md b/src/docs/guides/tokens/svg.md index b5eacf49..65cfb633 100644 --- a/src/docs/guides/tokens/svg.md +++ b/src/docs/guides/tokens/svg.md @@ -39,4 +39,4 @@ Used to easily set different colors for light and dark mode. The opacity is opti `fill-inverse-primary-500/50-secondary-400/55` becomes `fill-primary-500/[0.5] dark:fill-secondary-400/[0.55]`. -`stroke-inverse-primary-500/50-secondary-400/55` becomes `stroke-primary-500/[0.5] dark:stroke-secondary-400/[0.55]`. \ No newline at end of file +`stroke-inverse-primary-500/50-secondary-400/55` becomes `stroke-primary-500/[0.5] dark:stroke-secondary-400/[0.55]`. diff --git a/src/docs/guides/tokens/text.md b/src/docs/guides/tokens/text.md index 7001fcf6..6c9a4e1c 100644 --- a/src/docs/guides/tokens/text.md +++ b/src/docs/guides/tokens/text.md @@ -41,7 +41,7 @@ More examples: `text-surface-950/70-950-50/80-50`. ## Inverse Light & Dark Mode -`text-inverse-[color]-[shade]-[color]-[shade]`: In light mode the text is set with the first color and the first shade, and in dark mode the second color and shade are used. Opacity and shades are optional. +`text-inverse-[color]-[shade]-[color]-[shade]`: In light mode the text is set with the first color and the first shade, and in dark mode the second color and shade are used. Opacity and shades are optional. Example: `text-inverse-primary-secondary` becomes `text-primary-500 dark:text-secondary-500`. @@ -53,7 +53,7 @@ More examples: `text-inverse-primary/90-secondary-400/90`. ## Inverse Light & Dark Mode + Hover -`text-inverse-[color]-[shade]-[hover_shade]-[color]-[shade]-[hover_shade]`: In light mode the text is set with the first color and the first shade. When the text is hovered the first hover shade is used. Same thing with the second color and shades, but for dark mode. Opacity can be included for each shade if needed. +`text-inverse-[color]-[shade]-[hover_shade]-[color]-[shade]-[hover_shade]`: In light mode the text is set with the first color and the first shade. When the text is hovered the first hover shade is used. Same thing with the second color and shades, but for dark mode. Opacity can be included for each shade if needed. Example: `text-inverse-primary-500-700-secondary-500-700` becomes `text-primary-500 hover:text-primary-700 dark:text-secondary-500 dark:hover:text-secondary-700`. @@ -74,4 +74,4 @@ Examples: `text-gradient-br-primary-secondary-tertiary`, `text-gradient-tertiary
Easy. Elegant. -
\ No newline at end of file +
diff --git a/src/docs/guides/unocss/buttons.md b/src/docs/guides/unocss/buttons.md index 4b2f782f..dde37311 100644 --- a/src/docs/guides/unocss/buttons.md +++ b/src/docs/guides/unocss/buttons.md @@ -12,12 +12,12 @@ description: Create nice buttons with simple CSS classes. Can be used for anchor ## Size -Pattern: `btn-[size]`. +Pattern: `btn-[size]`. `size` can be `sm | md | lg | xl`. - + ## Regular Gradients @@ -27,7 +27,7 @@ Pattern: `btn-gradient-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]- For each color you can also specify an opacity if you want. The shades are always optional and the third color is also optional. - + ## Glass @@ -37,7 +37,7 @@ Pattern: `btn-glass-[color]-[shade]`. The shade is optional. - + ## Glass Gradients @@ -47,7 +47,7 @@ Pattern: `btn-glass-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[sh For each color you can also specify an opacity if you want. The shades are always optional and the third color is also optional. - + ## Gradient Border @@ -57,17 +57,17 @@ Pattern: `btn-border-[base_color]-[base_shade]-[direction]-[color1]-[shade1]-[co The base color and shade are the background overlay color of the button. You can add an opacity to overwrite the deafault opacity to it. The `direction` can be: `l | r | t | b | bl | br | tl | tr`. If you do not provide a direction `r` will be chosen. The 3 color values are for the gradient. For each color you can optionally define a shade. Shade `500` is the default. - + ## Icon -You can add icons inside `span` elements inside your button and use the regular `btn` classes to set the colors and size. +You can add icons inside `span` elements inside your button and use the regular `btn` classes to set the colors and size. Add the `btn-icon` class to buttons that only have an icon and no text. - + ## Button Groups @@ -81,7 +81,7 @@ Pattern: `btn-group-[color]-[shade]`. Creates a horizontal button group with the given color and shade. The shade is optional. - + ### Vertical @@ -91,7 +91,7 @@ Pattern: `btn-group-vertical-[color]-[shade]`. Creates a vertical button group with the given color and shade. The shade is optional. - + ### Outline @@ -101,5 +101,5 @@ Pattern: `btn-group-outline-[color]-[shade]` or `btn-group-vertical-outline-[col Create a button group with outlines. This works for both horizontal and vertical groups. Shades are optional. - - \ No newline at end of file + + diff --git a/src/docs/guides/unocss/forms.md b/src/docs/guides/unocss/forms.md index a2845662..520fa11f 100644 --- a/src/docs/guides/unocss/forms.md +++ b/src/docs/guides/unocss/forms.md @@ -3,7 +3,6 @@ title: Forms description: Describes how to style forms with UnoCSS. --- - ## Installation UnoCSS has a [community preset](https://github.com/Julien-R44/unocss-preset-forms) that is a port of the Tailwind forms plugin. You can see all community presets in the official [UnoCSS docs](https://unocss.dev/presets/community). @@ -15,14 +14,14 @@ pnpm add -D @julr/unocss-preset-forms Next, add the preset to your `unocss.config.ts` file: ```ts title="unocss.config.ts" showCode=true -import { defineConfig, presetAttributify, presetUno } from 'unocss' -import { presetForms } from '@julr/unocss-preset-forms' +import { defineConfig, presetAttributify, presetUno } from 'unocss'; +import { presetForms } from '@julr/unocss-preset-forms'; export default defineConfig({ - presets: [ - // ... - presetForms() - ], - // ... -}) -``` \ No newline at end of file + presets: [ + // ... + presetForms() + ] + // ... +}); +``` diff --git a/src/docs/guides/unocss/spinners.md b/src/docs/guides/unocss/spinners.md index f3dfe84a..093e7b92 100644 --- a/src/docs/guides/unocss/spinners.md +++ b/src/docs/guides/unocss/spinners.md @@ -10,7 +10,6 @@ description: Allows you to easily add spinners to your website when loading data export let previewComponents; - @@ -41,7 +40,7 @@ To customize these spinners use regular Tailwind classes to modify the size and Example: `w-12 h-12 text-primary-500 i-svg-spinners-blocks-scale`. - + ## Size @@ -49,7 +48,7 @@ Example: `w-12 h-12 text-primary-500 i-svg-spinners-blocks-scale`. You can set the size of each spinner by setting the width and height after the `s-` prefix. For example: `s-wh15-circle-secondary`, `s-wh20-flip-tertiary`. This will set the width and height to `w-15 h-15` and `w-20 h-20` respectively. - + ## Colors & Variations @@ -60,10 +59,10 @@ Ato-UI's spinners can be customized with different colors. Each one is a bit dif Pattern: `s-circle-[color]`. -You can change the border type and size of circles by using regular Tailwind classes like: `border-dashed`, `border-spotted`, `border-6`, and `border-8`. +You can change the border type and size of circles by using regular Tailwind classes like: `border-dashed`, `border-spotted`, `border-6`, and `border-8`. - + ### Circle Split @@ -71,7 +70,7 @@ You can change the border type and size of circles by using regular Tailwind cla Pattern: `s-circle-split-[color]`. - + ### Squares Hover @@ -79,7 +78,7 @@ Pattern: `s-circle-split-[color]`. Pattern: `s-squares-hover-[color1]-[color2]-[color3]`. You can set the colors of all three layers. - + ### Squares Rotate @@ -87,17 +86,17 @@ Pattern: `s-squares-hover-[color1]-[color2]-[color3]`. You can set the colors of Pattern: `s-squares-hover-[color1]-[color2]`. You can set the colors of both rotating squares. The second color is optional. - + ### Corners -Pattern: `s-corners-[color]`. +Pattern: `s-corners-[color]`. You can also change the background with some additional classes such as:`bg-gradient-primary-secondary-tertiary`. - + ### Corners Outline @@ -105,5 +104,5 @@ You can also change the background with some additional classes such as:`bg-grad Pattern: `s-corners-outline-[color]`. - - \ No newline at end of file + + diff --git a/src/docs/mdsvex/highlight.js b/src/docs/mdsvex/highlight.js index 900bd25e..65c0133c 100644 --- a/src/docs/mdsvex/highlight.js +++ b/src/docs/mdsvex/highlight.js @@ -118,9 +118,11 @@ export function handleExample(code, lang, meta_args) { const { dark_html, light_html } = highlighted_html; return ` - + ${example} `; @@ -133,9 +135,11 @@ export function handleExample(code, lang, meta_args) { const { dark_html, light_html } = highlighted_html; return ` - + ${example} `; diff --git a/src/docs/mdsvex/svelte-global-components.js b/src/docs/mdsvex/svelte-global-components.js index e231b99a..9747144c 100644 --- a/src/docs/mdsvex/svelte-global-components.js +++ b/src/docs/mdsvex/svelte-global-components.js @@ -9,7 +9,6 @@ import MagicString from 'magic-string'; * @property {Array.} importPaths The paths in which the component should be imported. Example: ['src/routes/docs/']. */ - // https://github.com/threlte/threlte/blob/main/packages/preprocess/src/index.ts // https://astexplorer.net/ // https://github.com/Rich-Harris/magic-string @@ -23,44 +22,48 @@ import MagicString from 'magic-string'; * @returns {import('svelte/types/compiler/preprocess').PreprocessorGroup} */ const svelteGlobalComponents = (globalOptions) => ({ - markup(options) { - const { content, filename } = options; - const { components } = globalOptions; + markup(options) { + const { content, filename } = options; + const { components } = globalOptions; - let code = ''; + let code = ''; - const relevant = components.filter((item) => item.importPaths.some((p) => filename?.includes(p))); + const relevant = components.filter((item) => + item.importPaths.some((p) => filename?.includes(p)) + ); - if (filename?.includes('.md') && relevant.length > 0) { - let contextModule = '\n${content}`; - } else { - const s = new MagicString(content); - const idx = content.indexOf(contextModule); + code += `\n${content}`; + } else { + const s = new MagicString(content); + const idx = content.indexOf(contextModule); - - const imports = relevant.reduce((previous, item) => `${previous}\n\timport ${item.name} from '${item.location}';`, ''); + const imports = relevant.reduce( + (previous, item) => `${previous}\n\timport ${item.name} from '${item.location}';`, + '' + ); - s.prependRight(idx + contextModule.length, imports); + s.prependRight(idx + contextModule.length, imports); - code = s.toString(); - } - } else { - code = content; - } + code = s.toString(); + } + } else { + code = content; + } - return { - code - } - }, + return { + code + }; + } }); -export default svelteGlobalComponents; \ No newline at end of file +export default svelteGlobalComponents; diff --git a/src/docs/mdsvex/theme-synthwave84.json b/src/docs/mdsvex/theme-synthwave84.json index 8bb5826f..5d639f17 100644 --- a/src/docs/mdsvex/theme-synthwave84.json +++ b/src/docs/mdsvex/theme-synthwave84.json @@ -1,871 +1,815 @@ { - "name": "SynthWave 84", - "type": "dark", - "semanticHighlighting": true, - "colors": { - "focusBorder": "#1f212b", - "foreground": "#ffffff", - "widget.shadow": "#2a2139", - "selection.background": "#ffffff20", - "errorForeground": "#fe4450", - "textLink.activeForeground": "#ff7edb", - "textLink.foreground": "#f97e72", - "button.background": "#614D85", - "dropdown.background": "#232530", - "dropdown.listBackground": "#2a2139", - "input.background": "#2a2139", - "inputOption.activeBorder": "#ff7edb99", - "inputValidation.errorBackground": "#fe445080", - "inputValidation.errorBorder": "#fe445000", - "scrollbar.shadow": "#2a2139", - "scrollbarSlider.activeBackground": "#9d8bca20", - "scrollbarSlider.background": "#9d8bca30", - "scrollbarSlider.hoverBackground": "#9d8bca50", - "badge.foreground": "#ffffff", - "badge.background": "#2a2139", - "progressBar.background": "#f97e72", - "list.activeSelectionBackground": "#ffffff20", - "list.activeSelectionForeground": "#ffffff", - "list.dropBackground": "#34294f66", - "list.focusBackground": "#ffffff20", - "list.focusForeground": "#ffffff", - "list.highlightForeground": "#f97e72", - "list.hoverBackground": "#37294d99", - "list.hoverForeground": "#ffffff", - "list.inactiveSelectionBackground": "#ffffff20", - "list.inactiveSelectionForeground": "#ffffff", - "list.inactiveFocusBackground": "#2a213999", - "list.errorForeground": "#fe4450E6", - "list.warningForeground": "#72f1b8bb", - "activityBar.background": "#171520", - "activityBar.dropBackground": "#34294f66", - "activityBar.foreground": "#ffffffCC", - "activityBarBadge.background": "#f97e72", - "activityBarBadge.foreground": "#2a2139", - "sideBar.background": "#241b2f", - "sideBar.foreground": "#ffffff99", - "sideBar.dropBackground": "#34294f4c", - "sideBarSectionHeader.background": "#241b2f", - "sideBarSectionHeader.foreground": "#ffffffca", - "menu.background": "#463465", - "editorGroup.border": "#495495", - "editorGroup.dropBackground": "#4954954a", - "editorGroupHeader.tabsBackground": "#241b2f", - "tab.border": "#241b2f00", - "tab.activeBorder": "#880088", - "tab.inactiveBackground": "#262335", - "editor.background": "#262335", - "editorLineNumber.foreground": "#ffffff73", - "editorLineNumber.activeForeground": "#ffffffcc", - "editorCursor.background": "#241b2f", - "editorCursor.foreground": "#f97e72", - "editor.selectionBackground": "#ffffff20", - "editor.selectionHighlightBackground": "#ffffff20", - "editor.wordHighlightBackground": "#34294f88", - "editor.wordHighlightStrongBackground": "#34294f88", - "editor.findMatchBackground": "#D18616bb", - "editor.findMatchHighlightBackground": "#D1861655", - "editor.findRangeHighlightBackground": "#34294f1a", - "editor.hoverHighlightBackground": "#463564", - "editor.lineHighlightBorder": "#7059AB66", - "editor.rangeHighlightBackground": "#49549539", - "editorIndentGuide.background": "#444251", - "editorIndentGuide.activeBackground": "#A148AB80", - "editorRuler.foreground": "#A148AB80", - "editorCodeLens.foreground": "#ffffff7c", - "editorBracketMatch.background": "#34294f66", - "editorBracketMatch.border": "#495495", - "editorOverviewRuler.border": "#34294fb3", - "editorOverviewRuler.findMatchForeground": "#D1861699", - "editorOverviewRuler.modifiedForeground": "#b893ce99", - "editorOverviewRuler.addedForeground": "#09f7a099", - "editorOverviewRuler.deletedForeground": "#fe445099", - "editorOverviewRuler.errorForeground": "#fe4450dd", - "editorOverviewRuler.warningForeground": "#72f1b8cc", - "editorError.foreground": "#fe4450", - "editorWarning.foreground": "#72f1b8cc", - "editorGutter.modifiedBackground": "#b893ce8f", - "editorGutter.addedBackground": "#206d4bd6", - "editorGutter.deletedBackground": "#fa2e46a4", - "diffEditor.insertedTextBackground": "#0beb9935", - "diffEditor.removedTextBackground": "#fe445035", - "editorWidget.background": "#171520DC", - "editorWidget.border": "#ffffff22", - "editorWidget.resizeBorder": "#ffffff44", - "editorSuggestWidget.highlightForeground": "#f97e72", - "editorSuggestWidget.selectedBackground": "#ffffff36", - "peekView.border": "#495495", - "peekViewEditor.background": "#232530", - "peekViewEditor.matchHighlightBackground": "#D18616bb", - "peekViewResult.background": "#232530", - "peekViewResult.matchHighlightBackground": "#D1861655", - "peekViewResult.selectionBackground": "#2a213980", - "peekViewTitle.background": "#232530", - "panelTitle.activeBorder": "#f97e72", - "statusBar.background": "#241b2f", - "statusBar.foreground": "#ffffff80", - "statusBar.debuggingBackground": "#f97e72", - "statusBar.debuggingForeground": "#08080f", - "statusBar.noFolderBackground": "#241b2f", - "statusBarItem.prominentBackground": "#2a2139", - "statusBarItem.prominentHoverBackground": "#34294f", - "titleBar.activeBackground": "#241b2f", - "titleBar.inactiveBackground": "#241b2f", - "extensionButton.prominentBackground": "#f97e72", - "extensionButton.prominentHoverBackground": "#ff7edb", - "pickerGroup.foreground": "#f97e72ea", - "terminal.foreground": "#ffffff", - "terminal.ansiBlue": "#03edf9", - "terminal.ansiBrightBlue": "#03edf9", - "terminal.ansiBrightCyan": "#03edf9", - "terminal.ansiBrightGreen": "#72f1b8", - "terminal.ansiBrightMagenta": "#ff7edb", - "terminal.ansiBrightRed": "#fe4450", - "terminal.ansiBrightYellow": "#fede5d", - "terminal.ansiCyan": "#03edf9", - "terminal.ansiGreen": "#72f1b8", - "terminal.ansiMagenta": "#ff7edb", - "terminal.ansiRed": "#fe4450", - "terminal.ansiYellow": "#f3e70f", - "terminal.selectionBackground": "#ffffff20", - "terminalCursor.background": "#ffffff", - "terminalCursor.foreground": "#03edf9", - "debugToolBar.background": "#463465", - "walkThrough.embeddedEditorBackground": "#232530", - "gitDecoration.modifiedResourceForeground": "#b893ceee", - "gitDecoration.deletedResourceForeground": "#fe4450", - "gitDecoration.addedResourceForeground": "#72f1b8cc", - "gitDecoration.untrackedResourceForeground": "#72f1b8", - "gitDecoration.ignoredResourceForeground": "#ffffff59", - "minimapGutter.addedBackground": "#09f7a099", - "minimapGutter.modifiedBackground": "#b893ce", - "minimapGutter.deletedBackground": "#fe4450", - "breadcrumbPicker.background": "#232530" - }, - "tokenColors": [ - { - "name": "Comment", - "scope": [ - "comment", - "string.quoted.docstring.multi.python", - "string.quoted.docstring.multi.python punctuation.definition.string.begin.python", - "string.quoted.docstring.multi.python punctuation.definition.string.end.python" - ], - "settings": { - "foreground": "#848bbd", - "fontStyle": "italic" - } - }, - { - "name": "String", - "scope": [ - "string.quoted", - "string.template", - "punctuation.definition.string" - ], - "settings": { - "foreground": "#ff8b39" - } - }, - { - "name": "Punctuation within templates", - "scope": "string.template meta.embedded.line", - "settings": { - "foreground": "#b6b1b1" - } - }, - { - "name": "Variable", - "scope": ["variable", "entity.name.variable"], - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "Language variable", - "scope": "variable.language", - "settings": { - "foreground": "#fe4450", - "fontStyle": "bold" - } - }, - { - "name": "Parameter", - "scope": "variable.parameter", - "settings": { - "fontStyle": "italic" - } - }, - { - "name": "Storage (declaration or modifier keyword)", - "scope": ["storage.type", "storage.modifier"], - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Constant", - "scope": "constant", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Regex", - "scope": "string.regexp", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Number", - "scope": "constant.numeric", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Language constant (boolean, null)", - "scope": "constant.language", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Character escape", - "scope": "constant.character.escape", - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Entity", - "scope": "entity.name", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "HTML or XML tag", - "scope": "entity.name.tag", - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "HTML or XML tag brackets", - "scope": ["punctuation.definition.tag"], - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Tag attribute", - "scope": "entity.other.attribute-name", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Tag attribute HTML", - "scope": "entity.other.attribute-name.html", - "settings": { - "foreground": "#fede5d", - "fontStyle": "italic" - } - }, - { - "name": "Class", - "scope": ["entity.name.type", "meta.attribute.class.html"], - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "Inherited class", - "scope": "entity.other.inherited-class", - "settings": { - "foreground": "#D50" - } - }, - { - "name": "Function", - "scope": ["entity.name.function", "variable.function"], - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "JS Export", - "scope": ["keyword.control.export.js", "keyword.control.import.js"], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "JS Numerics", - "scope": ["constant.numeric.decimal.js"], - "settings": { - "foreground": "#2EE2FA" - } - }, - { - "name": "Keyword", - "scope": "keyword", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Control keyword", - "scope": "keyword.control", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Operator", - "scope": "keyword.operator", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Special operator", - "scope": [ - "keyword.operator.new", - "keyword.operator.expression", - "keyword.operator.logical" - ], - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Unit", - "scope": "keyword.other.unit", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Support", - "scope": "support", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "Support function", - "scope": "support.function", - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Support variable", - "scope": "support.variable", - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "Object literal key / property", - "scope": ["meta.object-literal.key", "support.type.property-name"], - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "Key-value separator", - "scope": "punctuation.separator.key-value", - "settings": { - "foreground": "#b6b1b1" - } - }, - { - "name": "Embedded punctuation", - "scope": "punctuation.section.embedded", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Template expression", - "scope": [ - "punctuation.definition.template-expression.begin", - "punctuation.definition.template-expression.end" - ], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "CSS property", - "scope": [ - "support.type.property-name.css", - "support.type.property-name.json" - ], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "JS Switch control", - "scope": "switch-block.expr.js", - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "JS object path", - "scope": "variable.other.constant.property.js, variable.other.property.js", - "settings": { - "foreground": "#2ee2fa" - }, - }, - { - "name": "Color", - "scope": "constant.other.color", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Font names", - "scope": "support.constant.font-name", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "CSS #id", - "scope": "entity.other.attribute-name.id", - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Pseudo CSS", - "scope": [ - "entity.other.attribute-name.pseudo-element", - "entity.other.attribute-name.pseudo-class" - ], - "settings": { - "foreground": "#D50" - } - }, - { - "name": "CSS support functions (rgb)", - "scope": "support.function.misc.css", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "Markup heading", - "scope": ["markup.heading", "entity.name.section"], - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "Markup text", - "scope": ["text.html", "keyword.operator.assignment", ], - "settings": { - "foreground": "#ffffffee" - } - }, - { - "name": "Markup quote", - "scope": "markup.quote", - "settings": { - "foreground": "#b6b1b1cc", - "fontStyle": "italic" - } - }, - { - "name": "Markup list", - "scope": "beginning.punctuation.definition.list", - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "Markup link", - "scope": "markup.underline.link", - "settings": { - "foreground": "#D50" - } - }, - { - "name": "Markup link description", - "scope": "string.other.link.description", - "settings": { - "foreground": "#f97e72" - } - }, - { - "name": "Python function call", - "scope": "meta.function-call.generic.python", - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Python variable params", - "scope": "variable.parameter.function-call.python", - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "C# storage type", - "scope": "storage.type.cs", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "C# local variable", - "scope": "entity.name.variable.local.cs", - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "C# properties and fields", - "scope": [ - "entity.name.variable.field.cs", - "entity.name.variable.property.cs" - ], - "settings": { - "foreground": "#ff7edb" - } - }, - { - "name": "C placeholder", - "scope": "constant.other.placeholder.c", - "settings": { - "foreground": "#72f1b8", - "fontStyle": "italic" - } - }, - { - "name": "C preprocessors", - "scope": [ - "keyword.control.directive.include.c", - "keyword.control.directive.define.c" - ], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "C storage modifier", - "scope": "storage.modifier.c", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "C++ operators", - "scope": "source.cpp keyword.operator", - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "C++ placeholder", - "scope": "constant.other.placeholder.cpp", - "settings": { - "foreground": "#72f1b8", - "fontStyle": "italic" - } - }, - { - "name": "C++ include", - "scope": [ - "keyword.control.directive.include.cpp", - "keyword.control.directive.define.cpp" - ], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "C++ constant modifier", - "scope": "storage.modifier.specifier.const.cpp", - "settings": { - "foreground": "#fe4450" - } - }, - { - "name": "Elixir Classes", - "scope": [ - "source.elixir support.type.elixir", - "source.elixir meta.module.elixir entity.name.class.elixir" - ], - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Elixir Functions", - "scope": "source.elixir entity.name.function", - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "Elixir Constants", - "scope": [ - "source.elixir constant.other.symbol.elixir", - "source.elixir constant.other.keywords.elixir" - ], - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Elixir String Punctuation", - "scope": "source.elixir punctuation.definition.string", - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "Elixir", - "scope": [ - "source.elixir variable.other.readwrite.module.elixir", - "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir" - ], - "settings": { - "foreground": "#72f1b8" - } - }, - { - "name": "Elixir Binary Punctuation", - "scope": "source.elixir .punctuation.binary.elixir", - "settings": { - "foreground": "#ff7edb", - "fontStyle": "italic" - } - }, - { - "name": "Clojure Globals", - "scope": [ - "entity.global.clojure", - ], - "settings": { - "foreground": "#36f9f6", - "fontStyle": "bold" - } - }, - { - "name": "Clojure Storage", - "scope": [ - "storage.control.clojure" - ], - "settings": { - "foreground": "#36f9f6", - "fontStyle": "italic" - } - }, - { - "name": "Clojure Metadata", - "scope": [ - "meta.metadata.simple.clojure", - "meta.metadata.map.clojure" - ], - "settings": { - "foreground": "#fe4450", - "fontStyle": "italic" - } - }, - { - "name": "Clojure Macros, Quoted", - "scope": [ - "meta.quoted-expression.clojure" - ], - "settings": { - "fontStyle": "italic" - } - }, - { - "name": "Clojure Symbols", - "scope": [ - "meta.symbol.clojure" - ], - "settings": { - "foreground": "#ff7edbff" - } - }, - { - "name": "Go basic", - "scope": "source.go", - "settings": { - "foreground": "#ff7edbff" - } - }, - { - "name": "Go Function Calls", - "scope": "source.go meta.function-call.go", - "settings": { - "foreground": "#36f9f6" - } - }, - { - "name": "Go Keywords", - "scope": [ - "source.go keyword.package.go", - "source.go keyword.import.go", - "source.go keyword.function.go", - "source.go keyword.type.go", - "source.go keyword.const.go", - "source.go keyword.var.go", - "source.go keyword.map.go", - "source.go keyword.channel.go", - "source.go keyword.control.go" - ], - "settings": { - "foreground": "#fede5d", - } - }, - { - "name": "Go interfaces", - "scope": [ - "source.go storage.type", - "source.go keyword.struct.go", - "source.go keyword.interface.go", - ], - "settings": { - "foreground": "#72f1b8", - } - }, - { - "name": "Go Constants e.g. nil, string format (%s, %d, etc.)", - "scope": [ - "source.go constant.language.go", - "source.go constant.other.placeholder.go", - "source.go variable" - ], - "settings": { - "foreground": "#2EE2FA" - } - }, - { - "name": "Markdown links and image paths", - "scope": [ - "markup.underline.link.markdown", - "markup.inline.raw.string.markdown" - ], - "settings": { - "foreground": "#72f1b8", - "fontStyle": "italic" - } - }, - { - "name": "Markdown links and image paths", - "scope": [ - "string.other.link.title.markdown" - ], - "settings": { - "foreground": "#fede5d" - } - }, - { - "name": "Markdown headings", - "scope": [ - "markup.heading.markdown", - "entity.name.section.markdown", - ], - "settings": { - "foreground": "#ff7edb", - "fontStyle": "bold" - } - }, - { - "name": "Markdown italic", - "scope": [ - "markup.italic.markdown", - ], - "settings": { - "foreground": "#2EE2FA", - "fontStyle": "italic" - } - }, - { - "name": "Markdown bold", - "scope": [ - "markup.bold.markdown", - ], - "settings": { - "foreground": "#2EE2FA", - "fontStyle": "bold" - } - }, - { - "name": "Markdown quotes", - "scope": [ - "punctuation.definition.quote.begin.markdown", - "markup.quote.markdown", - ], - "settings": { - "foreground": "#72f1b8", - } - }, - { - "name": "Basic source colours", - "scope": ["source.dart", "source.python", "source.scala"], - "settings": { - "foreground": "#ff7edbff" - } - }, - { - "name": "Dart strings", - "scope": [ - "string.interpolated.single.dart", - ], - "settings": { - "foreground": "#f97e72", - } - }, - { - "name": "Dart variable params", - "scope": [ - "variable.parameter.dart", - ], - "settings": { - "foreground": "#72f1b8", - } - }, - { - "name": "Dart numerics", - "scope": [ - "constant.numeric.dart", - ], - "settings": { - "foreground": "#2EE2FA", - } - }, - { - "name": "Scala variable params", - "scope": [ - "variable.parameter.scala", - ], - "settings": { - "foreground": "#2EE2FA", - } - }, - { - "name": "Scala", - "scope": [ - "meta.template.expression.scala", - ], - "settings": { - "foreground": "#72f1b8", - } - }, - ] - } \ No newline at end of file + "name": "SynthWave 84", + "type": "dark", + "semanticHighlighting": true, + "colors": { + "focusBorder": "#1f212b", + "foreground": "#ffffff", + "widget.shadow": "#2a2139", + "selection.background": "#ffffff20", + "errorForeground": "#fe4450", + "textLink.activeForeground": "#ff7edb", + "textLink.foreground": "#f97e72", + "button.background": "#614D85", + "dropdown.background": "#232530", + "dropdown.listBackground": "#2a2139", + "input.background": "#2a2139", + "inputOption.activeBorder": "#ff7edb99", + "inputValidation.errorBackground": "#fe445080", + "inputValidation.errorBorder": "#fe445000", + "scrollbar.shadow": "#2a2139", + "scrollbarSlider.activeBackground": "#9d8bca20", + "scrollbarSlider.background": "#9d8bca30", + "scrollbarSlider.hoverBackground": "#9d8bca50", + "badge.foreground": "#ffffff", + "badge.background": "#2a2139", + "progressBar.background": "#f97e72", + "list.activeSelectionBackground": "#ffffff20", + "list.activeSelectionForeground": "#ffffff", + "list.dropBackground": "#34294f66", + "list.focusBackground": "#ffffff20", + "list.focusForeground": "#ffffff", + "list.highlightForeground": "#f97e72", + "list.hoverBackground": "#37294d99", + "list.hoverForeground": "#ffffff", + "list.inactiveSelectionBackground": "#ffffff20", + "list.inactiveSelectionForeground": "#ffffff", + "list.inactiveFocusBackground": "#2a213999", + "list.errorForeground": "#fe4450E6", + "list.warningForeground": "#72f1b8bb", + "activityBar.background": "#171520", + "activityBar.dropBackground": "#34294f66", + "activityBar.foreground": "#ffffffCC", + "activityBarBadge.background": "#f97e72", + "activityBarBadge.foreground": "#2a2139", + "sideBar.background": "#241b2f", + "sideBar.foreground": "#ffffff99", + "sideBar.dropBackground": "#34294f4c", + "sideBarSectionHeader.background": "#241b2f", + "sideBarSectionHeader.foreground": "#ffffffca", + "menu.background": "#463465", + "editorGroup.border": "#495495", + "editorGroup.dropBackground": "#4954954a", + "editorGroupHeader.tabsBackground": "#241b2f", + "tab.border": "#241b2f00", + "tab.activeBorder": "#880088", + "tab.inactiveBackground": "#262335", + "editor.background": "#262335", + "editorLineNumber.foreground": "#ffffff73", + "editorLineNumber.activeForeground": "#ffffffcc", + "editorCursor.background": "#241b2f", + "editorCursor.foreground": "#f97e72", + "editor.selectionBackground": "#ffffff20", + "editor.selectionHighlightBackground": "#ffffff20", + "editor.wordHighlightBackground": "#34294f88", + "editor.wordHighlightStrongBackground": "#34294f88", + "editor.findMatchBackground": "#D18616bb", + "editor.findMatchHighlightBackground": "#D1861655", + "editor.findRangeHighlightBackground": "#34294f1a", + "editor.hoverHighlightBackground": "#463564", + "editor.lineHighlightBorder": "#7059AB66", + "editor.rangeHighlightBackground": "#49549539", + "editorIndentGuide.background": "#444251", + "editorIndentGuide.activeBackground": "#A148AB80", + "editorRuler.foreground": "#A148AB80", + "editorCodeLens.foreground": "#ffffff7c", + "editorBracketMatch.background": "#34294f66", + "editorBracketMatch.border": "#495495", + "editorOverviewRuler.border": "#34294fb3", + "editorOverviewRuler.findMatchForeground": "#D1861699", + "editorOverviewRuler.modifiedForeground": "#b893ce99", + "editorOverviewRuler.addedForeground": "#09f7a099", + "editorOverviewRuler.deletedForeground": "#fe445099", + "editorOverviewRuler.errorForeground": "#fe4450dd", + "editorOverviewRuler.warningForeground": "#72f1b8cc", + "editorError.foreground": "#fe4450", + "editorWarning.foreground": "#72f1b8cc", + "editorGutter.modifiedBackground": "#b893ce8f", + "editorGutter.addedBackground": "#206d4bd6", + "editorGutter.deletedBackground": "#fa2e46a4", + "diffEditor.insertedTextBackground": "#0beb9935", + "diffEditor.removedTextBackground": "#fe445035", + "editorWidget.background": "#171520DC", + "editorWidget.border": "#ffffff22", + "editorWidget.resizeBorder": "#ffffff44", + "editorSuggestWidget.highlightForeground": "#f97e72", + "editorSuggestWidget.selectedBackground": "#ffffff36", + "peekView.border": "#495495", + "peekViewEditor.background": "#232530", + "peekViewEditor.matchHighlightBackground": "#D18616bb", + "peekViewResult.background": "#232530", + "peekViewResult.matchHighlightBackground": "#D1861655", + "peekViewResult.selectionBackground": "#2a213980", + "peekViewTitle.background": "#232530", + "panelTitle.activeBorder": "#f97e72", + "statusBar.background": "#241b2f", + "statusBar.foreground": "#ffffff80", + "statusBar.debuggingBackground": "#f97e72", + "statusBar.debuggingForeground": "#08080f", + "statusBar.noFolderBackground": "#241b2f", + "statusBarItem.prominentBackground": "#2a2139", + "statusBarItem.prominentHoverBackground": "#34294f", + "titleBar.activeBackground": "#241b2f", + "titleBar.inactiveBackground": "#241b2f", + "extensionButton.prominentBackground": "#f97e72", + "extensionButton.prominentHoverBackground": "#ff7edb", + "pickerGroup.foreground": "#f97e72ea", + "terminal.foreground": "#ffffff", + "terminal.ansiBlue": "#03edf9", + "terminal.ansiBrightBlue": "#03edf9", + "terminal.ansiBrightCyan": "#03edf9", + "terminal.ansiBrightGreen": "#72f1b8", + "terminal.ansiBrightMagenta": "#ff7edb", + "terminal.ansiBrightRed": "#fe4450", + "terminal.ansiBrightYellow": "#fede5d", + "terminal.ansiCyan": "#03edf9", + "terminal.ansiGreen": "#72f1b8", + "terminal.ansiMagenta": "#ff7edb", + "terminal.ansiRed": "#fe4450", + "terminal.ansiYellow": "#f3e70f", + "terminal.selectionBackground": "#ffffff20", + "terminalCursor.background": "#ffffff", + "terminalCursor.foreground": "#03edf9", + "debugToolBar.background": "#463465", + "walkThrough.embeddedEditorBackground": "#232530", + "gitDecoration.modifiedResourceForeground": "#b893ceee", + "gitDecoration.deletedResourceForeground": "#fe4450", + "gitDecoration.addedResourceForeground": "#72f1b8cc", + "gitDecoration.untrackedResourceForeground": "#72f1b8", + "gitDecoration.ignoredResourceForeground": "#ffffff59", + "minimapGutter.addedBackground": "#09f7a099", + "minimapGutter.modifiedBackground": "#b893ce", + "minimapGutter.deletedBackground": "#fe4450", + "breadcrumbPicker.background": "#232530" + }, + "tokenColors": [ + { + "name": "Comment", + "scope": [ + "comment", + "string.quoted.docstring.multi.python", + "string.quoted.docstring.multi.python punctuation.definition.string.begin.python", + "string.quoted.docstring.multi.python punctuation.definition.string.end.python" + ], + "settings": { + "foreground": "#848bbd", + "fontStyle": "italic" + } + }, + { + "name": "String", + "scope": ["string.quoted", "string.template", "punctuation.definition.string"], + "settings": { + "foreground": "#ff8b39" + } + }, + { + "name": "Punctuation within templates", + "scope": "string.template meta.embedded.line", + "settings": { + "foreground": "#b6b1b1" + } + }, + { + "name": "Variable", + "scope": ["variable", "entity.name.variable"], + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "Language variable", + "scope": "variable.language", + "settings": { + "foreground": "#fe4450", + "fontStyle": "bold" + } + }, + { + "name": "Parameter", + "scope": "variable.parameter", + "settings": { + "fontStyle": "italic" + } + }, + { + "name": "Storage (declaration or modifier keyword)", + "scope": ["storage.type", "storage.modifier"], + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Constant", + "scope": "constant", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Regex", + "scope": "string.regexp", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Number", + "scope": "constant.numeric", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Language constant (boolean, null)", + "scope": "constant.language", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Character escape", + "scope": "constant.character.escape", + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Entity", + "scope": "entity.name", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "HTML or XML tag", + "scope": "entity.name.tag", + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "HTML or XML tag brackets", + "scope": ["punctuation.definition.tag"], + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Tag attribute", + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Tag attribute HTML", + "scope": "entity.other.attribute-name.html", + "settings": { + "foreground": "#fede5d", + "fontStyle": "italic" + } + }, + { + "name": "Class", + "scope": ["entity.name.type", "meta.attribute.class.html"], + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "Inherited class", + "scope": "entity.other.inherited-class", + "settings": { + "foreground": "#D50" + } + }, + { + "name": "Function", + "scope": ["entity.name.function", "variable.function"], + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "JS Export", + "scope": ["keyword.control.export.js", "keyword.control.import.js"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "JS Numerics", + "scope": ["constant.numeric.decimal.js"], + "settings": { + "foreground": "#2EE2FA" + } + }, + { + "name": "Keyword", + "scope": "keyword", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Control keyword", + "scope": "keyword.control", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Operator", + "scope": "keyword.operator", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Special operator", + "scope": ["keyword.operator.new", "keyword.operator.expression", "keyword.operator.logical"], + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Unit", + "scope": "keyword.other.unit", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Support", + "scope": "support", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "Support function", + "scope": "support.function", + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Support variable", + "scope": "support.variable", + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "Object literal key / property", + "scope": ["meta.object-literal.key", "support.type.property-name"], + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "Key-value separator", + "scope": "punctuation.separator.key-value", + "settings": { + "foreground": "#b6b1b1" + } + }, + { + "name": "Embedded punctuation", + "scope": "punctuation.section.embedded", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Template expression", + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end" + ], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "CSS property", + "scope": ["support.type.property-name.css", "support.type.property-name.json"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "JS Switch control", + "scope": "switch-block.expr.js", + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "JS object path", + "scope": "variable.other.constant.property.js, variable.other.property.js", + "settings": { + "foreground": "#2ee2fa" + } + }, + { + "name": "Color", + "scope": "constant.other.color", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Font names", + "scope": "support.constant.font-name", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "CSS #id", + "scope": "entity.other.attribute-name.id", + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Pseudo CSS", + "scope": [ + "entity.other.attribute-name.pseudo-element", + "entity.other.attribute-name.pseudo-class" + ], + "settings": { + "foreground": "#D50" + } + }, + { + "name": "CSS support functions (rgb)", + "scope": "support.function.misc.css", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "Markup heading", + "scope": ["markup.heading", "entity.name.section"], + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "Markup text", + "scope": ["text.html", "keyword.operator.assignment"], + "settings": { + "foreground": "#ffffffee" + } + }, + { + "name": "Markup quote", + "scope": "markup.quote", + "settings": { + "foreground": "#b6b1b1cc", + "fontStyle": "italic" + } + }, + { + "name": "Markup list", + "scope": "beginning.punctuation.definition.list", + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "Markup link", + "scope": "markup.underline.link", + "settings": { + "foreground": "#D50" + } + }, + { + "name": "Markup link description", + "scope": "string.other.link.description", + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Python function call", + "scope": "meta.function-call.generic.python", + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Python variable params", + "scope": "variable.parameter.function-call.python", + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "C# storage type", + "scope": "storage.type.cs", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "C# local variable", + "scope": "entity.name.variable.local.cs", + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "C# properties and fields", + "scope": ["entity.name.variable.field.cs", "entity.name.variable.property.cs"], + "settings": { + "foreground": "#ff7edb" + } + }, + { + "name": "C placeholder", + "scope": "constant.other.placeholder.c", + "settings": { + "foreground": "#72f1b8", + "fontStyle": "italic" + } + }, + { + "name": "C preprocessors", + "scope": ["keyword.control.directive.include.c", "keyword.control.directive.define.c"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "C storage modifier", + "scope": "storage.modifier.c", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "C++ operators", + "scope": "source.cpp keyword.operator", + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "C++ placeholder", + "scope": "constant.other.placeholder.cpp", + "settings": { + "foreground": "#72f1b8", + "fontStyle": "italic" + } + }, + { + "name": "C++ include", + "scope": ["keyword.control.directive.include.cpp", "keyword.control.directive.define.cpp"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "C++ constant modifier", + "scope": "storage.modifier.specifier.const.cpp", + "settings": { + "foreground": "#fe4450" + } + }, + { + "name": "Elixir Classes", + "scope": [ + "source.elixir support.type.elixir", + "source.elixir meta.module.elixir entity.name.class.elixir" + ], + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Elixir Functions", + "scope": "source.elixir entity.name.function", + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Elixir Constants", + "scope": [ + "source.elixir constant.other.symbol.elixir", + "source.elixir constant.other.keywords.elixir" + ], + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Elixir String Punctuation", + "scope": "source.elixir punctuation.definition.string", + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Elixir", + "scope": [ + "source.elixir variable.other.readwrite.module.elixir", + "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir" + ], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Elixir Binary Punctuation", + "scope": "source.elixir .punctuation.binary.elixir", + "settings": { + "foreground": "#ff7edb", + "fontStyle": "italic" + } + }, + { + "name": "Clojure Globals", + "scope": ["entity.global.clojure"], + "settings": { + "foreground": "#36f9f6", + "fontStyle": "bold" + } + }, + { + "name": "Clojure Storage", + "scope": ["storage.control.clojure"], + "settings": { + "foreground": "#36f9f6", + "fontStyle": "italic" + } + }, + { + "name": "Clojure Metadata", + "scope": ["meta.metadata.simple.clojure", "meta.metadata.map.clojure"], + "settings": { + "foreground": "#fe4450", + "fontStyle": "italic" + } + }, + { + "name": "Clojure Macros, Quoted", + "scope": ["meta.quoted-expression.clojure"], + "settings": { + "fontStyle": "italic" + } + }, + { + "name": "Clojure Symbols", + "scope": ["meta.symbol.clojure"], + "settings": { + "foreground": "#ff7edbff" + } + }, + { + "name": "Go basic", + "scope": "source.go", + "settings": { + "foreground": "#ff7edbff" + } + }, + { + "name": "Go Function Calls", + "scope": "source.go meta.function-call.go", + "settings": { + "foreground": "#36f9f6" + } + }, + { + "name": "Go Keywords", + "scope": [ + "source.go keyword.package.go", + "source.go keyword.import.go", + "source.go keyword.function.go", + "source.go keyword.type.go", + "source.go keyword.const.go", + "source.go keyword.var.go", + "source.go keyword.map.go", + "source.go keyword.channel.go", + "source.go keyword.control.go" + ], + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Go interfaces", + "scope": [ + "source.go storage.type", + "source.go keyword.struct.go", + "source.go keyword.interface.go" + ], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Go Constants e.g. nil, string format (%s, %d, etc.)", + "scope": [ + "source.go constant.language.go", + "source.go constant.other.placeholder.go", + "source.go variable" + ], + "settings": { + "foreground": "#2EE2FA" + } + }, + { + "name": "Markdown links and image paths", + "scope": ["markup.underline.link.markdown", "markup.inline.raw.string.markdown"], + "settings": { + "foreground": "#72f1b8", + "fontStyle": "italic" + } + }, + { + "name": "Markdown links and image paths", + "scope": ["string.other.link.title.markdown"], + "settings": { + "foreground": "#fede5d" + } + }, + { + "name": "Markdown headings", + "scope": ["markup.heading.markdown", "entity.name.section.markdown"], + "settings": { + "foreground": "#ff7edb", + "fontStyle": "bold" + } + }, + { + "name": "Markdown italic", + "scope": ["markup.italic.markdown"], + "settings": { + "foreground": "#2EE2FA", + "fontStyle": "italic" + } + }, + { + "name": "Markdown bold", + "scope": ["markup.bold.markdown"], + "settings": { + "foreground": "#2EE2FA", + "fontStyle": "bold" + } + }, + { + "name": "Markdown quotes", + "scope": ["punctuation.definition.quote.begin.markdown", "markup.quote.markdown"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Basic source colours", + "scope": ["source.dart", "source.python", "source.scala"], + "settings": { + "foreground": "#ff7edbff" + } + }, + { + "name": "Dart strings", + "scope": ["string.interpolated.single.dart"], + "settings": { + "foreground": "#f97e72" + } + }, + { + "name": "Dart variable params", + "scope": ["variable.parameter.dart"], + "settings": { + "foreground": "#72f1b8" + } + }, + { + "name": "Dart numerics", + "scope": ["constant.numeric.dart"], + "settings": { + "foreground": "#2EE2FA" + } + }, + { + "name": "Scala variable params", + "scope": ["variable.parameter.scala"], + "settings": { + "foreground": "#2EE2FA" + } + }, + { + "name": "Scala", + "scope": ["meta.template.expression.scala"], + "settings": { + "foreground": "#72f1b8" + } + } + ] +} diff --git a/src/docs/previews/accordion-headless/main/app.svelte b/src/docs/previews/accordion-headless/main/app.svelte index ea42635e..4c272aab 100644 --- a/src/docs/previews/accordion-headless/main/app.svelte +++ b/src/docs/previews/accordion-headless/main/app.svelte @@ -1,81 +1,78 @@
- {#each items as {key, title, itemContent, icon}} -
-
- -
+ {#each items as { key, title, itemContent, icon }} +
+
+ +
- {#if $isSelected(key)} -
- {itemContent} -
- {/if} -
- {/each} -
\ No newline at end of file + {#if $isSelected(key)} +
+ {itemContent} +
+ {/if} +
+ {/each} +
diff --git a/src/docs/previews/accordion/colors/app.svelte b/src/docs/previews/accordion/colors/app.svelte index 87ae93f8..316e0e50 100644 --- a/src/docs/previews/accordion/colors/app.svelte +++ b/src/docs/previews/accordion/colors/app.svelte @@ -1,59 +1,64 @@ - - {#each items as { title, content, key, titleBgStyle, icon }} - - -
- - {title} -
- + + {#each items as { title, content, key, titleBgStyle, icon }} + + +
+ + {title} +
+ - - {content} - - {/each} - \ No newline at end of file + + {content} + + {/each} + diff --git a/src/docs/previews/accordion/main/app.svelte b/src/docs/previews/accordion/main/app.svelte index 11d2efb1..4abfd038 100644 --- a/src/docs/previews/accordion/main/app.svelte +++ b/src/docs/previews/accordion/main/app.svelte @@ -1,54 +1,58 @@ - {#each items as { title, content, key, icon }} - - -
- - {title} -
- + {#each items as { title, content, key, icon }} + + +
+ + {title} +
+ - - {content} - - {/each} - \ No newline at end of file + + {content} + + {/each} + diff --git a/src/docs/previews/avatar-headless/main/app.svelte b/src/docs/previews/avatar-headless/main/app.svelte index ac829fde..0270f648 100644 --- a/src/docs/previews/avatar-headless/main/app.svelte +++ b/src/docs/previews/avatar-headless/main/app.svelte @@ -1,25 +1,25 @@ - - \ No newline at end of file + + diff --git a/src/docs/previews/avatar/badge/app.svelte b/src/docs/previews/avatar/badge/app.svelte index e2729890..39d193ad 100644 --- a/src/docs/previews/avatar/badge/app.svelte +++ b/src/docs/previews/avatar/badge/app.svelte @@ -3,30 +3,30 @@
- -
- + +
+ - -
- -
-
+ > + +
+
- -
- + +
+ - -
- -
-
-
\ No newline at end of file + +
+ +
+
+
diff --git a/src/docs/previews/avatar/dropdown/app.svelte b/src/docs/previews/avatar/dropdown/app.svelte index 7f25da1e..1f2140de 100644 --- a/src/docs/previews/avatar/dropdown/app.svelte +++ b/src/docs/previews/avatar/dropdown/app.svelte @@ -1,81 +1,71 @@
- - - - + + + + - - + + - + - + - + - + - - - - - + + + + + - - { - console.log('something'); - }} - > - {#each statuses as {text, styles}} - -
- - {text} -
- - {/each} - - -
\ No newline at end of file + + { + console.log('something'); + }} + > + {#each statuses as { text, styles }} + +
+ + {text} +
+ + {/each} + + + diff --git a/src/docs/previews/avatar/dropdown/badge.svelte b/src/docs/previews/avatar/dropdown/badge.svelte index ebfc5165..91751ea9 100644 --- a/src/docs/previews/avatar/dropdown/badge.svelte +++ b/src/docs/previews/avatar/dropdown/badge.svelte @@ -1,10 +1,10 @@ -
\ No newline at end of file +/> diff --git a/src/docs/previews/avatar/dropdown/icon-item.svelte b/src/docs/previews/avatar/dropdown/icon-item.svelte index a7ea2565..2d57d0db 100644 --- a/src/docs/previews/avatar/dropdown/icon-item.svelte +++ b/src/docs/previews/avatar/dropdown/icon-item.svelte @@ -1,9 +1,9 @@
- {text} - -
\ No newline at end of file + {text} + +
diff --git a/src/docs/previews/avatar/main/app.svelte b/src/docs/previews/avatar/main/app.svelte index 8a6023d8..0cd60566 100644 --- a/src/docs/previews/avatar/main/app.svelte +++ b/src/docs/previews/avatar/main/app.svelte @@ -3,6 +3,6 @@
- - -
\ No newline at end of file + + + diff --git a/src/docs/previews/buttons/glass-gradient/app.svelte b/src/docs/previews/buttons/glass-gradient/app.svelte index e6cb95f2..bfe169f4 100644 --- a/src/docs/previews/buttons/glass-gradient/app.svelte +++ b/src/docs/previews/buttons/glass-gradient/app.svelte @@ -1,9 +1,8 @@ -
- - - - - - -
\ No newline at end of file + + + + + + + diff --git a/src/docs/previews/buttons/glass/app.svelte b/src/docs/previews/buttons/glass/app.svelte index a59f12b6..8bf818d3 100644 --- a/src/docs/previews/buttons/glass/app.svelte +++ b/src/docs/previews/buttons/glass/app.svelte @@ -1,8 +1,8 @@
- - - - - - + + + + + +
diff --git a/src/docs/previews/buttons/gradient-border/app.svelte b/src/docs/previews/buttons/gradient-border/app.svelte index ad22d601..15d3e438 100644 --- a/src/docs/previews/buttons/gradient-border/app.svelte +++ b/src/docs/previews/buttons/gradient-border/app.svelte @@ -1,9 +1,8 @@ -
- - - - - - -
\ No newline at end of file + + + + + + + diff --git a/src/docs/previews/buttons/group-outline/app.svelte b/src/docs/previews/buttons/group-outline/app.svelte index 4ca248c8..01484298 100644 --- a/src/docs/previews/buttons/group-outline/app.svelte +++ b/src/docs/previews/buttons/group-outline/app.svelte @@ -1,39 +1,40 @@ - -
-
- - - - -
-
- - - - -
-
\ No newline at end of file +
+
+ + + + +
+
+ + + + +
+
diff --git a/src/docs/previews/buttons/group-regular/app.svelte b/src/docs/previews/buttons/group-regular/app.svelte index b6982ee8..23663a74 100644 --- a/src/docs/previews/buttons/group-regular/app.svelte +++ b/src/docs/previews/buttons/group-regular/app.svelte @@ -1,35 +1,36 @@ - -
-
- - - - -
-
- - - - -
-
\ No newline at end of file +
+
+ + + + +
+
+ + + + +
+
diff --git a/src/docs/previews/buttons/group-vertical/app.svelte b/src/docs/previews/buttons/group-vertical/app.svelte index 38a39bf2..c130807c 100644 --- a/src/docs/previews/buttons/group-vertical/app.svelte +++ b/src/docs/previews/buttons/group-vertical/app.svelte @@ -1,35 +1,34 @@ -
-
- - - - -
-
- - - - -
-
\ No newline at end of file +
+ + + + +
+
+ + + + +
+ diff --git a/src/docs/previews/buttons/icon/app.svelte b/src/docs/previews/buttons/icon/app.svelte index b2457c74..15348817 100644 --- a/src/docs/previews/buttons/icon/app.svelte +++ b/src/docs/previews/buttons/icon/app.svelte @@ -1,26 +1,27 @@ +
+
+ -
-
- + +
- -
- -
- +
+ - -
-
\ No newline at end of file + +
+
diff --git a/src/docs/previews/buttons/main/app.svelte b/src/docs/previews/buttons/main/app.svelte index 1494e170..90dcdd1f 100644 --- a/src/docs/previews/buttons/main/app.svelte +++ b/src/docs/previews/buttons/main/app.svelte @@ -1,8 +1,8 @@
- - - - - - + + + + + +
diff --git a/src/docs/previews/buttons/size/app.svelte b/src/docs/previews/buttons/size/app.svelte index cdd403b0..bc73ac7a 100644 --- a/src/docs/previews/buttons/size/app.svelte +++ b/src/docs/previews/buttons/size/app.svelte @@ -1,7 +1,6 @@ -
- - - - -
\ No newline at end of file + + + + + diff --git a/src/docs/previews/combobox-headless/main/app.svelte b/src/docs/previews/combobox-headless/main/app.svelte index b2dfef0d..7c5d3e2b 100644 --- a/src/docs/previews/combobox-headless/main/app.svelte +++ b/src/docs/previews/combobox-headless/main/app.svelte @@ -1,13 +1,12 @@
-
- - +
+ + -
- + -
- -
-
-
+ placeholder="Favourite book" + /> +
+ +
+
+
{#if $open} diff --git a/src/docs/previews/combobox-headless/main/types.ts b/src/docs/previews/combobox-headless/main/types.ts index c7c711e6..80cb19ce 100644 --- a/src/docs/previews/combobox-headless/main/types.ts +++ b/src/docs/previews/combobox-headless/main/types.ts @@ -2,9 +2,9 @@ import type { Writable } from 'svelte/store'; import type { ComboboxOption } from '@melt-ui/svelte'; export type Item = { - value: string; - subtitle?: string; - disabled?: boolean; -} + value: string; + subtitle?: string; + disabled?: boolean; +}; -export type SelectedStore = Writable>; \ No newline at end of file +export type SelectedStore = Writable>; diff --git a/src/docs/previews/combobox/debounce/app.svelte b/src/docs/previews/combobox/debounce/app.svelte index 977ae56d..374d0b73 100644 --- a/src/docs/previews/combobox/debounce/app.svelte +++ b/src/docs/previews/combobox/debounce/app.svelte @@ -1,10 +1,6 @@
- +
{#if $open} -
- -
-

- Edit profile -

-

- Make changes to your profile here. -

- -
- - -
-
- - -
-
- - -
-
+
+ +
+

Edit profile

+

Make changes to your profile here.

+ +
+ + +
+
+ + +
+
+ + +
+
{/if} \ No newline at end of file + input { + --at-apply: 'rounded-container p-2 w-full bg-surface-100-800 outline-primary-500 border-1 border-solid border-surface-300/50 selection:(text-on-primary bg-primary-500/70)'; + } + diff --git a/src/docs/previews/dialog/main/app.svelte b/src/docs/previews/dialog/main/app.svelte index 4175e93f..e9753cb8 100644 --- a/src/docs/previews/dialog/main/app.svelte +++ b/src/docs/previews/dialog/main/app.svelte @@ -5,58 +5,30 @@ let open = writable(false); -
- +
-

- Edit profile -

-

- Make changes to your profile here. -

+

Edit profile

+

Make changes to your profile here.

-
- - -
-
- - -
-
- - -
+
+ + +
+
+ + +
+
+ + +
\ No newline at end of file + input { + --at-apply: 'rounded-container p-2 w-full bg-surface-100-800 outline-primary-500 border-1 border-solid border-surface-300/50 selection:(text-on-primary bg-primary-500/70)'; + } + diff --git a/src/docs/previews/dropdown-menu-headless/main/icon-item.svelte b/src/docs/previews/dropdown-menu-headless/main/icon-item.svelte index a7ea2565..2d57d0db 100644 --- a/src/docs/previews/dropdown-menu-headless/main/icon-item.svelte +++ b/src/docs/previews/dropdown-menu-headless/main/icon-item.svelte @@ -1,9 +1,9 @@
- {text} - -
\ No newline at end of file + {text} + +
diff --git a/src/docs/previews/dropdown-menu/main/app.svelte b/src/docs/previews/dropdown-menu/main/app.svelte index 92870cca..5a93dfd8 100644 --- a/src/docs/previews/dropdown-menu/main/app.svelte +++ b/src/docs/previews/dropdown-menu/main/app.svelte @@ -52,15 +52,13 @@ - console.log('radio group value changed:', e.detail)} > {#each themes as theme} - + {theme} {/each} @@ -74,6 +72,5 @@ > -
diff --git a/src/docs/previews/dropdown-menu/main/icon-item.svelte b/src/docs/previews/dropdown-menu/main/icon-item.svelte index a7ea2565..2d57d0db 100644 --- a/src/docs/previews/dropdown-menu/main/icon-item.svelte +++ b/src/docs/previews/dropdown-menu/main/icon-item.svelte @@ -1,9 +1,9 @@
- {text} - -
\ No newline at end of file + {text} + + diff --git a/src/docs/previews/radio-group/active-icon/app.svelte b/src/docs/previews/radio-group/active-icon/app.svelte index 6f44fc5c..0b04988b 100644 --- a/src/docs/previews/radio-group/active-icon/app.svelte +++ b/src/docs/previews/radio-group/active-icon/app.svelte @@ -8,24 +8,26 @@ label: 'Startup', icon: 'i-material-symbols-rocket-launch-rounded' }, - { - value: 'business', - label: 'Business', - icon: 'i-material-symbols-add-business-rounded' + { + value: 'business', + label: 'Business', + icon: 'i-material-symbols-add-business-rounded' }, - { - value: 'enterprise', - label: 'Enterprise', - icon: 'i-material-symbols-star-rounded' + { + value: 'enterprise', + label: 'Enterprise', + icon: 'i-material-symbols-star-rounded' } ]; let group = 'startup'; - let ariaLabel = "business type"; + let ariaLabel = 'business type'; let activeIcon = 'i-material-symbols-arrow-back-ios-rounded'; -
+
diff --git a/src/docs/previews/radio-group/colors/app.svelte b/src/docs/previews/radio-group/colors/app.svelte index 3959eff3..b910650d 100644 --- a/src/docs/previews/radio-group/colors/app.svelte +++ b/src/docs/previews/radio-group/colors/app.svelte @@ -8,28 +8,58 @@ label: 'Startup', icon: 'i-material-symbols-rocket-launch-rounded' }, - { - value: 'business', - label: 'Business', - icon: 'i-material-symbols-add-business-rounded' + { + value: 'business', + label: 'Business', + icon: 'i-material-symbols-add-business-rounded' }, - { - value: 'enterprise', - label: 'Enterprise', - icon: 'i-material-symbols-star-rounded' + { + value: 'enterprise', + label: 'Enterprise', + icon: 'i-material-symbols-star-rounded' } ]; let group = 'startup'; - let ariaLabel = "business type"; + let ariaLabel = 'business type'; let activeIcon = 'i-material-symbols-check-circle-outline-rounded'; -
+
- - - - + + + +
diff --git a/src/docs/previews/radio-group/main/app.svelte b/src/docs/previews/radio-group/main/app.svelte index 80e4123e..8f65bb75 100644 --- a/src/docs/previews/radio-group/main/app.svelte +++ b/src/docs/previews/radio-group/main/app.svelte @@ -8,15 +8,15 @@ label: 'Startup', icon: 'i-material-symbols-rocket-launch-rounded' }, - { - value: 'business', - label: 'Business', - icon: 'i-material-symbols-add-business-rounded' + { + value: 'business', + label: 'Business', + icon: 'i-material-symbols-add-business-rounded' }, - { - value: 'enterprise', - label: 'Enterprise', - icon: 'i-material-symbols-star-rounded' + { + value: 'enterprise', + label: 'Enterprise', + icon: 'i-material-symbols-star-rounded' } ]; @@ -27,19 +27,14 @@ { label: 'Comfortable', value: 'comfortable' }, { label: 'Compact', value: 'compact' } ]; - + let checked = 'default'; -
- - - +
+ -
+
diff --git a/src/docs/previews/spinners/circle-split/app.svelte b/src/docs/previews/spinners/circle-split/app.svelte index 505df149..d61fdf79 100644 --- a/src/docs/previews/spinners/circle-split/app.svelte +++ b/src/docs/previews/spinners/circle-split/app.svelte @@ -1,3 +1,3 @@
- -
\ No newline at end of file + +
diff --git a/src/docs/previews/spinners/circle/app.svelte b/src/docs/previews/spinners/circle/app.svelte index 41ca4cef..fe6f2094 100644 --- a/src/docs/previews/spinners/circle/app.svelte +++ b/src/docs/previews/spinners/circle/app.svelte @@ -1,4 +1,4 @@
- - -
\ No newline at end of file + + +
diff --git a/src/docs/previews/spinners/corners-outline/app.svelte b/src/docs/previews/spinners/corners-outline/app.svelte index bbe5c0b5..935febbb 100644 --- a/src/docs/previews/spinners/corners-outline/app.svelte +++ b/src/docs/previews/spinners/corners-outline/app.svelte @@ -1,3 +1,3 @@
- -
\ No newline at end of file + +
diff --git a/src/docs/previews/spinners/corners/app.svelte b/src/docs/previews/spinners/corners/app.svelte index c9227195..dbac903c 100644 --- a/src/docs/previews/spinners/corners/app.svelte +++ b/src/docs/previews/spinners/corners/app.svelte @@ -1,4 +1,4 @@
- - -
\ No newline at end of file + + +
diff --git a/src/docs/previews/spinners/iconify/app.svelte b/src/docs/previews/spinners/iconify/app.svelte index 90754ca6..606c5a5b 100644 --- a/src/docs/previews/spinners/iconify/app.svelte +++ b/src/docs/previews/spinners/iconify/app.svelte @@ -1,8 +1,8 @@
- - - - - - -
\ No newline at end of file + + + + + + +
diff --git a/src/docs/previews/spinners/main/app.svelte b/src/docs/previews/spinners/main/app.svelte index 6dda167b..2d0098a3 100644 --- a/src/docs/previews/spinners/main/app.svelte +++ b/src/docs/previews/spinners/main/app.svelte @@ -1,12 +1,14 @@
- - - - - - - - - - -
\ No newline at end of file + + + + + + + + + + +
diff --git a/src/docs/previews/spinners/size/app.svelte b/src/docs/previews/spinners/size/app.svelte index 388d9f89..01ba05df 100644 --- a/src/docs/previews/spinners/size/app.svelte +++ b/src/docs/previews/spinners/size/app.svelte @@ -1,5 +1,5 @@
- - - -
\ No newline at end of file + + + + diff --git a/src/docs/previews/spinners/squares-hover/app.svelte b/src/docs/previews/spinners/squares-hover/app.svelte index e150ea90..a54f0cb3 100644 --- a/src/docs/previews/spinners/squares-hover/app.svelte +++ b/src/docs/previews/spinners/squares-hover/app.svelte @@ -1,3 +1,3 @@
- -
\ No newline at end of file + + diff --git a/src/docs/previews/spinners/squares-rotate/app.svelte b/src/docs/previews/spinners/squares-rotate/app.svelte index 721aa4e9..e4f9ef9e 100644 --- a/src/docs/previews/spinners/squares-rotate/app.svelte +++ b/src/docs/previews/spinners/squares-rotate/app.svelte @@ -1,3 +1,3 @@
- -
\ No newline at end of file + + diff --git a/src/docs/previews/switch-headless/main/app.svelte b/src/docs/previews/switch-headless/main/app.svelte index 49ab64fa..71e98fa4 100644 --- a/src/docs/previews/switch-headless/main/app.svelte +++ b/src/docs/previews/switch-headless/main/app.svelte @@ -6,7 +6,7 @@ let name = ''; let required = false; let disabled = false; - let checked = false; + let checked = false; let background = 'bg-surface-300-400'; let activeBackground = 'bg-primary-500'; @@ -14,9 +14,7 @@ const { elements: { root, input }, states: { checked: switchChecked }, - options: { - disabled: switchDisabled - } + options: { disabled: switchDisabled } } = createSwitch({ disabled, name, required, defaultChecked: checked }); let uniqueId = generateId(); @@ -25,27 +23,27 @@
-
-
- - - -
-
-
\ No newline at end of file + + + + + diff --git a/src/docs/previews/switch/colors/app.svelte b/src/docs/previews/switch/colors/app.svelte index 3d351565..8295b2f9 100644 --- a/src/docs/previews/switch/colors/app.svelte +++ b/src/docs/previews/switch/colors/app.svelte @@ -1,23 +1,18 @@
- {#each backgroundColors as color} - - {/each} -
\ No newline at end of file + {#each backgroundColors as color} + + {/each} + diff --git a/src/docs/previews/switch/main/app.svelte b/src/docs/previews/switch/main/app.svelte index 466dfff0..510ac71c 100644 --- a/src/docs/previews/switch/main/app.svelte +++ b/src/docs/previews/switch/main/app.svelte @@ -1,17 +1,17 @@
- -
\ No newline at end of file + + diff --git a/src/docs/previews/switch/sizes/app.svelte b/src/docs/previews/switch/sizes/app.svelte index 0df46903..c1deb7b2 100644 --- a/src/docs/previews/switch/sizes/app.svelte +++ b/src/docs/previews/switch/sizes/app.svelte @@ -1,15 +1,11 @@
- {#each sizes as size} - - {/each} -
\ No newline at end of file + {#each sizes as size} + + {/each} + diff --git a/src/docs/previews/table-of-contents-headless/main/tree.svelte b/src/docs/previews/table-of-contents-headless/main/tree.svelte index 648a6502..21ee9391 100644 --- a/src/docs/previews/table-of-contents-headless/main/tree.svelte +++ b/src/docs/previews/table-of-contents-headless/main/tree.svelte @@ -1,8 +1,5 @@ @@ -27,12 +27,9 @@
- @@ -43,7 +40,8 @@ {#if !hideHeading}

Reactive ToC

- The ToC reacts to changes on the page and updates when headings change or get added or removed. + The ToC reacts to changes on the page and updates when headings change or get added or + removed.

Another sub-heading

This one also gets added and removed.

@@ -82,25 +80,25 @@
+ selector="#toc-preview" + exclude={['h1', 'h4', 'h5', 'h6']} + activeType="highest" + {scrollFn} + {headingFilterFn} + />
diff --git a/src/docs/previews/tabs-headless/main/app.svelte b/src/docs/previews/tabs-headless/main/app.svelte index 1582fd6e..8a9ad06c 100644 --- a/src/docs/previews/tabs-headless/main/app.svelte +++ b/src/docs/previews/tabs-headless/main/app.svelte @@ -18,13 +18,9 @@
- + Styled Content Headless Content Extra Content -
\ No newline at end of file + diff --git a/src/docs/previews/tabs-headless/main/types.ts b/src/docs/previews/tabs-headless/main/types.ts index 3d98621e..ecd091fa 100644 --- a/src/docs/previews/tabs-headless/main/types.ts +++ b/src/docs/previews/tabs-headless/main/types.ts @@ -1,7 +1,5 @@ - export type TabHeader = { - key: string, - title: string, - icon?: string, -} - + key: string; + title: string; + icon?: string; +}; diff --git a/src/docs/search/index.ts b/src/docs/search/index.ts index 43465691..26d32128 100644 --- a/src/docs/search/index.ts +++ b/src/docs/search/index.ts @@ -1,7 +1,5 @@ -import type { RulesDescription } from "./types"; +import type { RulesDescription } from './types'; -import { buttonDescriptions } from "./rules/buttons"; +import { buttonDescriptions } from './rules/buttons'; -export const descriptions: RulesDescription[] = [ - ...buttonDescriptions, -] \ No newline at end of file +export const descriptions: RulesDescription[] = [...buttonDescriptions]; diff --git a/src/docs/search/rules/buttons.ts b/src/docs/search/rules/buttons.ts index 3b3b68f3..d494669b 100644 --- a/src/docs/search/rules/buttons.ts +++ b/src/docs/search/rules/buttons.ts @@ -1,99 +1,136 @@ -import type { RulesDescription } from "../types" - +import type { RulesDescription } from '../types'; export const buttonDescriptions: RulesDescription[] = [ - // Button sizes - { - rule: 'btn-(sizes)', - description: 'Change the size of the button. The default button size is medium (md).', - keywords: ['button'], - variablesUsed: ['sizes'], - classes: [], - examples: ['btn-sm', 'btn-md', 'btn-lg', 'btn-xl'] - }, - // Button with icon - { - rule: 'btn-icon', - description: 'Creates an icon button with equal height and width. Use this class in combination with another button class, such as: btn-primary.', - keywords: ['button', 'icons'], - variablesUsed: [], - classes: [], - examples: ['btn-icon'] - }, - // Regular button - { - rule: 'btn-(themeColors)', - description: 'Create a button with the specified theme color. Shade 500 is used.', - keywords: ['button'], - variablesUsed: ['themeColors'], - classes: [], - examples: ['btn-primary', 'btn-secondary', 'btn-tertiary', 'btn-success', 'btn-warning', 'btn-error'] - }, - // Buttons with gradients - { - rule: 'btn-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)', - description: 'Create a button with a gradient of 2 colors in the specified direction. The shades are optional with shade 500 being the default for both colors.', - keywords: ['button', 'gradient'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-tr-primary-secondary', 'btn-b-primary-200-tertiary', 'btn-r-secondary-200-warning-700'] - }, - { - rule: 'btn-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)-(themeColors)-(shades?)', - description: 'Create a button with a gradient of 3 colors in the specified direction. It goes from the first theme color via the second theme color to the third one. Shades are optional.', - keywords: ['button', 'gradient'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-r-primary-secondary-tertiary', 'btn-bl-primary-700-secondary-600-tertiary-400'] - }, - // Glass buttons - { - rule: 'btn-glass-(themeColors)-(shades?)/(opacity?)', - description: 'Create a glass button with the specified theme color and shade. The shade and opacity are optional with shade 500 being the default. The opacity changes the background color opacity (70 is the default percentage).', - keywords: ['button', 'glass'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['btn-glass-primary', 'btn-glass-success-700', 'btn-glass-secondary/50'] - }, - { - rule: 'btn-glass-(directions?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)', - description: 'Create a glass button with a gradient of 2 colors in the specified direction (default is right). The shades are optional with shade 500 being the default for both colors. For each color you can also optionally define an opacity.', - keywords: ['button', 'glass', 'gradient'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-glass-tr-primary-secondary', 'btn-glass-primary-200-tertiary', 'btn-glass-r-secondary-200-warning-700'] - }, - { - rule: 'btn-glass-(directions?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)', - description: 'Create a glass button with a gradient of 3 colors in the specified direction (default is right). It goes from the first theme color via the second theme color to the third one. Shades and opacity are optional.', - keywords: ['button', 'glass', 'gradient'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-glass-primary-secondary-tertiary', 'btn-glass-bl-primary-700-secondary-600-tertiary-400'] - }, - // Buttons with border gradients - { - rule: 'btn-border-(themeColors)-(shades)/(opacity?)-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)', - description: 'Create a button with a gradient border of 2 colors in the specified direction. The first theme color is the background of the button with an optional opacity. The other 2 colors represent the border gradient. The shades are optional with shade 500 being the default for all colors.', - keywords: ['button', 'gradient', 'border'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-border-surface-900-tr-primary-secondary', 'btn-border-surface-b-primary-200-tertiary', 'btn-border-surface-800-secondary-400-warning-700'] - }, - { - rule: 'btn-border-(themeColors)-(shades?)/(opacity?)-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)-(themeColors)-(shades?)', - description: 'Create a button with a gradient border of 3 colors in the specified direction. The first theme color is the background of the button with an optional opacity. The other 3 colors represent the border gradient. The shades are optional with shade 500 being the default for all colors.', - keywords: ['button', 'gradient', 'border'], - variablesUsed: ['directions', 'themeColors', 'shades'], - classes: [], - examples: ['btn-border-surface-900/50-primary-secondary-tertiary', 'btn-border-surface-bl-primary-700-secondary-600-tertiary-400'] - }, - // Group buttons - { - rule: 'btn-group-(vertical?)-(outline?)-(themeColors)-(shades?)', - description: `Creates a button group for the children button or anchor elements of your element. You can add 'vertical' to change the orientation of the buttons, or 'outline' to change the style.`, - keywords: ['button'], - variablesUsed: ['orientation', 'themeColors', 'shades'], - examples: ['btn-group-error', 'btn-group-vertical-tertiary', 'btn-group-outline-primary', 'btn-group-vertical-outline-secondary'] - }, -] \ No newline at end of file + // Button sizes + { + rule: 'btn-(sizes)', + description: 'Change the size of the button. The default button size is medium (md).', + keywords: ['button'], + variablesUsed: ['sizes'], + classes: [], + examples: ['btn-sm', 'btn-md', 'btn-lg', 'btn-xl'] + }, + // Button with icon + { + rule: 'btn-icon', + description: + 'Creates an icon button with equal height and width. Use this class in combination with another button class, such as: btn-primary.', + keywords: ['button', 'icons'], + variablesUsed: [], + classes: [], + examples: ['btn-icon'] + }, + // Regular button + { + rule: 'btn-(themeColors)', + description: 'Create a button with the specified theme color. Shade 500 is used.', + keywords: ['button'], + variablesUsed: ['themeColors'], + classes: [], + examples: [ + 'btn-primary', + 'btn-secondary', + 'btn-tertiary', + 'btn-success', + 'btn-warning', + 'btn-error' + ] + }, + // Buttons with gradients + { + rule: 'btn-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)', + description: + 'Create a button with a gradient of 2 colors in the specified direction. The shades are optional with shade 500 being the default for both colors.', + keywords: ['button', 'gradient'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: [ + 'btn-tr-primary-secondary', + 'btn-b-primary-200-tertiary', + 'btn-r-secondary-200-warning-700' + ] + }, + { + rule: 'btn-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)-(themeColors)-(shades?)', + description: + 'Create a button with a gradient of 3 colors in the specified direction. It goes from the first theme color via the second theme color to the third one. Shades are optional.', + keywords: ['button', 'gradient'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: ['btn-r-primary-secondary-tertiary', 'btn-bl-primary-700-secondary-600-tertiary-400'] + }, + // Glass buttons + { + rule: 'btn-glass-(themeColors)-(shades?)/(opacity?)', + description: + 'Create a glass button with the specified theme color and shade. The shade and opacity are optional with shade 500 being the default. The opacity changes the background color opacity (70 is the default percentage).', + keywords: ['button', 'glass'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['btn-glass-primary', 'btn-glass-success-700', 'btn-glass-secondary/50'] + }, + { + rule: 'btn-glass-(directions?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)', + description: + 'Create a glass button with a gradient of 2 colors in the specified direction (default is right). The shades are optional with shade 500 being the default for both colors. For each color you can also optionally define an opacity.', + keywords: ['button', 'glass', 'gradient'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: [ + 'btn-glass-tr-primary-secondary', + 'btn-glass-primary-200-tertiary', + 'btn-glass-r-secondary-200-warning-700' + ] + }, + { + rule: 'btn-glass-(directions?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)-(themeColors)-(shades?)/(opacity?)', + description: + 'Create a glass button with a gradient of 3 colors in the specified direction (default is right). It goes from the first theme color via the second theme color to the third one. Shades and opacity are optional.', + keywords: ['button', 'glass', 'gradient'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: [ + 'btn-glass-primary-secondary-tertiary', + 'btn-glass-bl-primary-700-secondary-600-tertiary-400' + ] + }, + // Buttons with border gradients + { + rule: 'btn-border-(themeColors)-(shades)/(opacity?)-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)', + description: + 'Create a button with a gradient border of 2 colors in the specified direction. The first theme color is the background of the button with an optional opacity. The other 2 colors represent the border gradient. The shades are optional with shade 500 being the default for all colors.', + keywords: ['button', 'gradient', 'border'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: [ + 'btn-border-surface-900-tr-primary-secondary', + 'btn-border-surface-b-primary-200-tertiary', + 'btn-border-surface-800-secondary-400-warning-700' + ] + }, + { + rule: 'btn-border-(themeColors)-(shades?)/(opacity?)-(directions?)-(themeColors)-(shades?)-(themeColors)-(shades?)-(themeColors)-(shades?)', + description: + 'Create a button with a gradient border of 3 colors in the specified direction. The first theme color is the background of the button with an optional opacity. The other 3 colors represent the border gradient. The shades are optional with shade 500 being the default for all colors.', + keywords: ['button', 'gradient', 'border'], + variablesUsed: ['directions', 'themeColors', 'shades'], + classes: [], + examples: [ + 'btn-border-surface-900/50-primary-secondary-tertiary', + 'btn-border-surface-bl-primary-700-secondary-600-tertiary-400' + ] + }, + // Group buttons + { + rule: 'btn-group-(vertical?)-(outline?)-(themeColors)-(shades?)', + description: `Creates a button group for the children button or anchor elements of your element. You can add 'vertical' to change the orientation of the buttons, or 'outline' to change the style.`, + keywords: ['button'], + variablesUsed: ['orientation', 'themeColors', 'shades'], + examples: [ + 'btn-group-error', + 'btn-group-vertical-tertiary', + 'btn-group-outline-primary', + 'btn-group-vertical-outline-secondary' + ] + } +]; diff --git a/src/docs/search/types.ts b/src/docs/search/types.ts index fdb6ac8f..e47a2b92 100644 --- a/src/docs/search/types.ts +++ b/src/docs/search/types.ts @@ -1,16 +1,45 @@ +export type ShortcutVariable = + | 'themeColors' + | 'allColors' + | 'shades' + | 'directions' + | 'sizes' + | 'orientation'; -export type ShortcutVariable = 'themeColors' | 'allColors' | 'shades' | 'directions' | 'sizes' | 'orientation'; +export type Keyword = + | 'button' + | 'icons' + | 'cards' + | 'chips' + | 'gradient' + | 'glass' + | 'text' + | 'background' + | 'dark/light' + | 'hover' + | 'border' + | 'spinners'; - -export type Keyword = 'button' | 'icons' | 'cards' | 'chips' | 'gradient' | 'glass' | 'text' | 'background' | 'dark/light' | 'hover' | 'border' | 'spinners'; - -export const keywords: Keyword[] = ['button', 'icons', 'cards', 'chips', 'gradient', 'glass', 'text', 'background', 'dark/light', 'hover', 'border', 'spinners']; +export const keywords: Keyword[] = [ + 'button', + 'icons', + 'cards', + 'chips', + 'gradient', + 'glass', + 'text', + 'background', + 'dark/light', + 'hover', + 'border', + 'spinners' +]; export type RulesDescription = { - rule: string, - keywords: Keyword[], - variablesUsed: ShortcutVariable[], - classes?: string[], - description: string, - examples: string[], -}; \ No newline at end of file + rule: string; + keywords: Keyword[]; + variablesUsed: ShortcutVariable[]; + classes?: string[]; + description: string; + examples: string[]; +}; diff --git a/src/docs/search/utils.ts b/src/docs/search/utils.ts index 26b45283..80ed6f52 100644 --- a/src/docs/search/utils.ts +++ b/src/docs/search/utils.ts @@ -5,39 +5,39 @@ import { presetWind } from '@unocss/preset-wind'; import { presetAtoUI } from '$lib/preset/index'; export const unocss_config = { - presets: [ - // presetUno(), - presetWind(), - presetAtoUI() - ] + presets: [ + // presetUno(), + presetWind(), + presetAtoUI() + ] }; let uno: UnoGenerator; -let prettier: typeof import('prettier/standalone')['format']; +let prettier: (typeof import('prettier/standalone'))['format']; // let prettierParserCSS: typeof import('prettier/parser-postcss'); let prettierParserCSS: typeof import('prettier/plugins/postcss'); -let prettier_config: { parser: string, plugins: typeof prettierParserCSS[], printWidth: number }; +let prettier_config: { parser: string; plugins: (typeof prettierParserCSS)[]; printWidth: number }; export async function get_uno_generator_configs() { - uno = createGenerator(unocss_config); + uno = createGenerator(unocss_config); - await Promise.all([ - import('prettier/standalone').then((r) => (prettier = r.format)), - // import('prettier/parser-postcss').then((r) => (prettierParserCSS = r.default)) - import('prettier/plugins/postcss').then((r) => (prettierParserCSS = r.default)) - ]); + await Promise.all([ + import('prettier/standalone').then((r) => (prettier = r.format)), + // import('prettier/parser-postcss').then((r) => (prettierParserCSS = r.default)) + import('prettier/plugins/postcss').then((r) => (prettierParserCSS = r.default)) + ]); - prettier_config = { - parser: 'css', - plugins: [prettierParserCSS], - printWidth: Infinity - }; + prettier_config = { + parser: 'css', + plugins: [prettierParserCSS], + printWidth: Infinity + }; - return uno; + return uno; } export async function generate_css(generator: UnoGenerator, input: string) { - const generate = await generator.generate(new Set([input]), { preflights: false, minify: true }); + const generate = await generator.generate(new Set([input]), { preflights: false, minify: true }); - return prettier(generate.css, prettier_config); -} \ No newline at end of file + return prettier(generate.css, prettier_config); +} diff --git a/src/docs/utils/highlighter.ts b/src/docs/utils/highlighter.ts index bef6191d..22e1fb20 100644 --- a/src/docs/utils/highlighter.ts +++ b/src/docs/utils/highlighter.ts @@ -1,4 +1,3 @@ - /** * Copy rehype-pretty-code into separate folder because of bundle errors. * Packages installed for this rehype (remove them when issue is solved): @@ -21,7 +20,6 @@ import { highlighterStore } from './stores'; import type { IShikiTheme } from 'shiki'; import type { FileHighlights } from '$docs/data/types'; - async function getShikiHighlighter(theme: IShikiTheme | string, fetcher?: typeof fetch) { if (fetcher && typeof window !== 'undefined') { window.fetch = fetcher; @@ -29,7 +27,7 @@ async function getShikiHighlighter(theme: IShikiTheme | string, fetcher?: typeof const shikiHighlighter = await getHighlighter({ theme, - langs: ['svelte'], + langs: ['svelte'] }); return shikiHighlighter; } @@ -45,7 +43,7 @@ export async function getStoredHighlighter(theme: IShikiTheme | string, fetcher? } /** - * Source: https://github.com/pngwn/MDsveX/blob/26591be63e088f57c78108553813ef18cc8ca5b1/packages/mdsvex/src/index.ts#L40 + * Source: https://github.com/pngwn/MDsveX/blob/26591be63e088f57c78108553813ef18cc8ca5b1/packages/mdsvex/src/index.ts#L40 */ function stringify(this: Processor, options = {}) { // @ts-ignore:next-line @@ -72,20 +70,20 @@ function createMetaString(fileHighlights: FileHighlights | null): string { words.forEach((item) => { const { strings, id } = item; - strings.forEach((string) => meta = `${meta} /${string}/#${id}`); + strings.forEach((string) => (meta = `${meta} /${string}/#${id}`)); }); } return meta; } -type HighlightedPreviewArgs = { - code: string, - lang: string, - fetcher: typeof fetch, - theme: IShikiTheme | string, - fileHighlights?: FileHighlights | null -} +type HighlightedPreviewArgs = { + code: string; + lang: string; + fetcher: typeof fetch; + theme: IShikiTheme | string; + fileHighlights?: FileHighlights | null; +}; export async function getHighlightedPreviews(args: HighlightedPreviewArgs) { const { code, lang, fetcher, theme, fileHighlights } = args; @@ -94,9 +92,9 @@ export async function getHighlightedPreviews(args: HighlightedPreviewArgs) { // await getStoredHighlighter(theme, fetcher); - const file = await unified() + const file = await unified() .use(rehypeCustomParser, { lang, meta }) - .use(rehypePrettyCode, { + .use(rehypePrettyCode, { keepBackground: false, // @ts-ignore:next-line getHighlighter: (options) => { @@ -105,39 +103,40 @@ export async function getHighlightedPreviews(args: HighlightedPreviewArgs) { }) .use(stringify, { allowDangerousHtml: true, - allowDangerousCharacters: true, + allowDangerousCharacters: true }) - .process(code); + .process(code); - return String(file); + return String(file); } - /** * Source: https://github.com/rehypejs/rehype/blob/main/packages/rehype-parse/lib/index.js */ -function rehypeCustomParser(this: Processor, args: { lang: string, meta: string }) { +function rehypeCustomParser(this: Processor, args: { lang: string; meta: string }) { const { lang, meta } = args; - Object.assign(this, {Parser: parser}); + Object.assign(this, { Parser: parser }); // meta example: data: { meta: '{5,6,14,18} /surface/#v' } - + function parser(doc: string) { - return{ + return { type: 'element', tagName: 'pre', - children: [{ - type: 'element', - tagName: 'code', - properties: { className: [ `language-${lang}` ] }, - children: [ + children: [ { - type: 'text', - value: doc + type: 'element', + tagName: 'code', + properties: { className: [`language-${lang}`] }, + children: [ + { + type: 'text', + value: doc + } + ], + data: { meta } } - ], - data: { meta } - }] - } + ] + }; } -} \ No newline at end of file +} diff --git a/src/docs/utils/preview.ts b/src/docs/utils/preview.ts index 56a9b3bd..0f7bee20 100644 --- a/src/docs/utils/preview.ts +++ b/src/docs/utils/preview.ts @@ -5,7 +5,6 @@ import type { SvelteComponent } from 'svelte'; import { getHighlightedPreviews } from '$docs/utils/highlighter.js'; import type { ExampleHighlights, FileHighlights } from '$docs/data/types'; - const PATH_LENGTH = 7; // export async function getMainPreviewComponent(slug: string) { @@ -31,179 +30,196 @@ const PATH_LENGTH = 7; // } function isSlugFile(slug: string, key: string) { - const splitPath = key.split('/'); - return splitPath.includes(slug); + const splitPath = key.split('/'); + return splitPath.includes(slug); } function isMainFile(key: string) { - const splitPath = key.split('/'); - if (splitPath && splitPath.length === PATH_LENGTH) { - return splitPath.at(-1)?.toLowerCase() === 'app.svelte'; - } + const splitPath = key.split('/'); + if (splitPath && splitPath.length === PATH_LENGTH) { + return splitPath.at(-1)?.toLowerCase() === 'app.svelte'; + } - return false; + return false; } export function getGuidesFolderFiles(folder: string) { - // Get the files. - const filePaths = import.meta.glob(`/src/docs/guides/**/*.md`); + // Get the files. + const filePaths = import.meta.glob(`/src/docs/guides/**/*.md`); - const keys = Object.keys(filePaths); + const keys = Object.keys(filePaths); - const files: string[] = []; + const files: string[] = []; - for (const key of keys) { - const pathParts = key.split('/'); - const file = pathParts.at(-1)?.replace('.md', '') ?? ''; + for (const key of keys) { + const pathParts = key.split('/'); + const file = pathParts.at(-1)?.replace('.md', '') ?? ''; - if (file && pathParts.at(-2) === folder) { - files.push(file); - } - } + if (file && pathParts.at(-2) === folder) { + files.push(file); + } + } - return files; + return files; } function getFileType(key: string) { - const splitPath = key.split('/'); - if (splitPath && splitPath.length === PATH_LENGTH) { - const filetype = splitPath.at(-1)?.split('.').at(-1); - return filetype === 'ts' ? 'typescript' : filetype; - } + const splitPath = key.split('/'); + if (splitPath && splitPath.length === PATH_LENGTH) { + const filetype = splitPath.at(-1)?.split('.').at(-1); + return filetype === 'ts' ? 'typescript' : filetype; + } - return ''; + return ''; } function getFolderName(key: string) { - const splitPath = key.split('/'); - if (splitPath && splitPath.length === PATH_LENGTH) { - return splitPath[5]; - } + const splitPath = key.split('/'); + if (splitPath && splitPath.length === PATH_LENGTH) { + return splitPath[5]; + } - return ''; + return ''; } function getFileName(key: string) { - const splitPath = key.split('/'); - if (splitPath && splitPath.length === PATH_LENGTH) { - return splitPath.at(-1); - } + const splitPath = key.split('/'); + if (splitPath && splitPath.length === PATH_LENGTH) { + return splitPath.at(-1); + } - return ''; + return ''; } -function getFileHighlights(foldername: string, filename: string, highlights: ExampleHighlights | undefined): FileHighlights | null { - if (!highlights) return null; - if (!(foldername in highlights)) return null; - if (!(filename in highlights[foldername])) return null; +function getFileHighlights( + foldername: string, + filename: string, + highlights: ExampleHighlights | undefined +): FileHighlights | null { + if (!highlights) return null; + if (!(foldername in highlights)) return null; + if (!(filename in highlights[foldername])) return null; - return highlights[foldername][filename]; + return highlights[foldername][filename]; } export type PreviewTab = { - title: string; - file: string; + title: string; + file: string; }; export type PreviewExamples = Record; type PreviewSnippetsArgs = { - slug: string; - theme: IShikiTheme | string; - highlights?: ExampleHighlights | undefined; - required?: boolean; -} + slug: string; + theme: IShikiTheme | string; + highlights?: ExampleHighlights | undefined; + required?: boolean; +}; /** * Returns all highlighted code files for each example * of the specified slug route. */ export async function getAllPreviewSnippets(args: PreviewSnippetsArgs) { - const { slug, theme, highlights, required } = { required: true, ...args }; + const { slug, theme, highlights, required } = { required: true, ...args }; - // Get the files. - const rawFiles = import.meta.glob(`/src/docs/previews/**/*.{css,svelte,ts}`, { + // Get the files. + const rawFiles = import.meta.glob(`/src/docs/previews/**/*.{css,svelte,ts}`, { as: 'raw', - eager: true, + eager: true }); - // Get the highlighted HTML for each file. - // const previewSnippets: PreviewTab[] = []; - const previewSnippets: PreviewExamples = {}; + // Get the highlighted HTML for each file. + // const previewSnippets: PreviewTab[] = []; + const previewSnippets: PreviewExamples = {}; + + let mainExists = false; - let mainExists = false; + const keys = Object.keys(rawFiles); - const keys = Object.keys(rawFiles); + for await (const key of keys) { + if (isSlugFile(slug, key)) { + const foldername = getFolderName(key); + const filename = getFileName(key); + const filetype = getFileType(key); - for await (const key of keys) { - if (isSlugFile(slug, key)) { - const foldername = getFolderName(key); - const filename = getFileName(key); - const filetype = getFileType(key); + if (!filename || !foldername || !filetype) throw error(500); - if (!filename || !foldername || !filetype) throw error(500); - - const fileHighlights = getFileHighlights(foldername, filename, highlights); + const fileHighlights = getFileHighlights(foldername, filename, highlights); - const snippet = await getHighlightedPreviews({ code: rawFiles[key].trim(), lang: filetype, fetcher: fetch, theme: theme, fileHighlights }); + const snippet = await getHighlightedPreviews({ + code: rawFiles[key].trim(), + lang: filetype, + fetcher: fetch, + theme: theme, + fileHighlights + }); - // Add folder to examples. - if (!(foldername in previewSnippets)) { - previewSnippets[foldername] = []; - } + // Add folder to examples. + if (!(foldername in previewSnippets)) { + previewSnippets[foldername] = []; + } - const file = { title: filename, file: snippet }; + const file = { title: filename, file: snippet }; - // Add file to example. - if (isMainFile(key)) { - // previewSnippets.main = snippet; - previewSnippets[foldername].unshift(file); + // Add file to example. + if (isMainFile(key)) { + // previewSnippets.main = snippet; + previewSnippets[foldername].unshift(file); - if (foldername.toLowerCase() === 'main') mainExists = true; - } else { - previewSnippets[foldername].push(file); - } - } - } + if (foldername.toLowerCase() === 'main') mainExists = true; + } else { + previewSnippets[foldername].push(file); + } + } + } - if (required && !mainExists) { - throw error(500); - } + if (required && !mainExists) { + throw error(500); + } - return previewSnippets; + return previewSnippets; } /** * This gets the highlighted types.ts file - * for a given component page. + * for a given component page. */ -export async function getComponentsTypesSnippet(args: { slug: string, theme: IShikiTheme | string }) { - const { slug, theme } = args; - - // Get the files. - const rawFiles = import.meta.glob(`/src/lib/components/**/types.ts`, { +export async function getComponentsTypesSnippet(args: { + slug: string; + theme: IShikiTheme | string; +}) { + const { slug, theme } = args; + + // Get the files. + const rawFiles = import.meta.glob(`/src/lib/components/**/types.ts`, { as: 'raw', - eager: true, + eager: true }); - // Get the highlighted HTML for each file. - // const previewSnippets: PreviewTab[] = []; - let typesSnippet: string = ''; - - const keys = Object.keys(rawFiles); + // Get the highlighted HTML for each file. + // const previewSnippets: PreviewTab[] = []; + let typesSnippet: string = ''; - for await (const key of keys) { - if (isSlugFile(slug, key)) { + const keys = Object.keys(rawFiles); - const snippet = await getHighlightedPreviews({ code: rawFiles[key].trim(), lang: 'typescript', fetcher: fetch, theme: theme }); + for await (const key of keys) { + if (isSlugFile(slug, key)) { + const snippet = await getHighlightedPreviews({ + code: rawFiles[key].trim(), + lang: 'typescript', + fetcher: fetch, + theme: theme + }); - typesSnippet = snippet; + typesSnippet = snippet; - break; - } - } + break; + } + } - return typesSnippet; + return typesSnippet; } export type PreviewComponents = Record; @@ -213,122 +229,122 @@ export type PreviewFile = { }; type PreviewComponentsArgs = { - slug: string; - required?: boolean; -} + slug: string; + required?: boolean; +}; /** * Returns the main 'app.svelte' component for every example - * folder within the specified slug route from inside the + * folder within the specified slug route from inside the * previews folder. */ export async function getAllPreviewComponents(args: PreviewComponentsArgs) { - const { slug, required } = { required: true, ...args}; + const { slug, required } = { required: true, ...args }; - // Get the files. - const rawFiles = import.meta.glob(`/src/docs/previews/**/app.svelte`); + // Get the files. + const rawFiles = import.meta.glob(`/src/docs/previews/**/app.svelte`); - const previewComponents: PreviewComponents = {}; + const previewComponents: PreviewComponents = {}; - let mainExists = false; + let mainExists = false; - const keys = Object.keys(rawFiles); + const keys = Object.keys(rawFiles); - for await (const key of keys) { - if (isSlugFile(slug, key)) { - const foldername = getFolderName(key); - const filename = getFileName(key); - const filetype = getFileType(key); + for await (const key of keys) { + if (isSlugFile(slug, key)) { + const foldername = getFolderName(key); + const filename = getFileName(key); + const filetype = getFileType(key); - if (!filename || !foldername || !filetype) throw error(500); + if (!filename || !foldername || !filetype) throw error(500); - /** - * import.meta.glob returns an import function for each key. - * Call the function and await the response to get the - * component. - */ - const previewComponent = (await rawFiles[key]()) as PreviewFile; + /** + * import.meta.glob returns an import function for each key. + * Call the function and await the response to get the + * component. + */ + const previewComponent = (await rawFiles[key]()) as PreviewFile; - // Add component to example. - if ('default' in previewComponent) { - previewComponents[foldername] = previewComponent.default; + // Add component to example. + if ('default' in previewComponent) { + previewComponents[foldername] = previewComponent.default; - if (foldername.toLowerCase() === 'main') mainExists = true; - } - } - } + if (foldername.toLowerCase() === 'main') mainExists = true; + } + } + } - if (required && !mainExists) { - throw error(500); - } + if (required && !mainExists) { + throw error(500); + } - return previewComponents; + return previewComponents; } - function isDocsPage(slug: string, key: string) { - return key.includes(`${slug}.md`); + return key.includes(`${slug}.md`); } export type Metadata = { - title: string; - description: string; - icon?: string; -} + title: string; + description: string; + icon?: string; +}; export type DocsComponentData = { - content: SvelteComponent | null; - meta: Metadata; - styledExists?: boolean; - headlessExists?: boolean; - githubPath: string; + content: SvelteComponent | null; + meta: Metadata; + styledExists?: boolean; + headlessExists?: boolean; + githubPath: string; }; /** * Get the markdown documentation related information, - * so the markdown as a component, as well as the + * so the markdown as a component, as well as the * meta data (title, description, etc.). */ -export async function getDocsData(args: { slug: string, isComponent: boolean }) { - const { slug, isComponent } = args; - - // Get the files. - const rawFiles = import.meta.glob(`/src/docs/guides/**/*.md`); +export async function getDocsData(args: { slug: string; isComponent: boolean }) { + const { slug, isComponent } = args; - const docsComponentData: Partial = { - content: null, - }; + // Get the files. + const rawFiles = import.meta.glob(`/src/docs/guides/**/*.md`); - const keys = Object.keys(rawFiles); + const docsComponentData: Partial = { + content: null + }; - for await (const key of keys) { - if (isDocsPage(slug, key)) { + const keys = Object.keys(rawFiles); - docsComponentData.githubPath = key; - const docsComponent = (await rawFiles[key]()) as PreviewFile; + for await (const key of keys) { + if (isDocsPage(slug, key)) { + docsComponentData.githubPath = key; + const docsComponent = (await rawFiles[key]()) as PreviewFile; - if ('default' in docsComponent) { - docsComponentData.content = docsComponent.default; - } + if ('default' in docsComponent) { + docsComponentData.content = docsComponent.default; + } - if ('metadata' in docsComponent) { - docsComponentData.meta = docsComponent.metadata as Metadata; - } - } - } + if ('metadata' in docsComponent) { + docsComponentData.meta = docsComponent.metadata as Metadata; + } + } + } - if (!docsComponentData.content || !docsComponentData.meta || !docsComponentData.githubPath) { - throw error(500); - } + if (!docsComponentData.content || !docsComponentData.meta || !docsComponentData.githubPath) { + throw error(500); + } - if (isComponent) { - let components = keys - .filter((v) => v.includes(slug.replace('-headless', ''))) - .map((v) => v.split('/').at(-1)?.split('.')[0]); + if (isComponent) { + let components = keys + .filter((v) => v.includes(slug.replace('-headless', ''))) + .map((v) => v.split('/').at(-1)?.split('.')[0]); - docsComponentData.styledExists = components.includes(slug.replace('-headless', '')); - docsComponentData.headlessExists = components.includes(`${slug.replace('-headless', '')}-headless`); - } + docsComponentData.styledExists = components.includes(slug.replace('-headless', '')); + docsComponentData.headlessExists = components.includes( + `${slug.replace('-headless', '')}-headless` + ); + } - return docsComponentData; -} \ No newline at end of file + return docsComponentData; +} diff --git a/src/docs/utils/rehype-pretty-code/chars/charsHighlighter.ts b/src/docs/utils/rehype-pretty-code/chars/charsHighlighter.ts index f944b42c..140c2774 100644 --- a/src/docs/utils/rehype-pretty-code/chars/charsHighlighter.ts +++ b/src/docs/utils/rehype-pretty-code/chars/charsHighlighter.ts @@ -16,85 +16,72 @@ import { hasOwnProperty, isElement } from '../utils'; * matched part, and the left and/or right parts are cloned to sibling nodes. */ export function charsHighlighter( - element: Element, - charsList: string[], - options: CharsHighlighterOptions, - onVisitHighlightedChars?: ( - element: CharsElement, - id: string | undefined - ) => void + element: Element, + charsList: string[], + options: CharsHighlighterOptions, + onVisitHighlightedChars?: (element: CharsElement, id: string | undefined) => void ) { - const { ranges = [] } = options; - const textContent = toString(element); + const { ranges = [] } = options; + const textContent = toString(element); - charsList.forEach((chars, index) => { - if (chars && textContent?.includes(chars)) { - let textContent = toString(element); - let startIndex = 0; + charsList.forEach((chars, index) => { + if (chars && textContent?.includes(chars)) { + let textContent = toString(element); + let startIndex = 0; - while (textContent.includes(chars)) { - const currentCharsRange = ranges[index] || []; - const id = `${chars}-${index}`; + while (textContent.includes(chars)) { + const currentCharsRange = ranges[index] || []; + const id = `${chars}-${index}`; - options.counterMap.set(id, (options.counterMap.get(id) || 0) + 1); + options.counterMap.set(id, (options.counterMap.get(id) || 0) + 1); - const ignoreChars = - currentCharsRange.length > 0 && - !currentCharsRange.includes(options.counterMap.get(id) ?? -1); + const ignoreChars = + currentCharsRange.length > 0 && + !currentCharsRange.includes(options.counterMap.get(id) ?? -1); - const elementsToWrap = getElementsToHighlight( - element, - chars, - startIndex, - ignoreChars - ); + const elementsToWrap = getElementsToHighlight(element, chars, startIndex, ignoreChars); - // maybe throw / notify due to failure here - if (elementsToWrap.length === 0) break; + // maybe throw / notify due to failure here + if (elementsToWrap.length === 0) break; - wrapHighlightedChars( - element, - elementsToWrap, - options, - ignoreChars, - onVisitHighlightedChars - ); + wrapHighlightedChars( + element, + elementsToWrap, + options, + ignoreChars, + onVisitHighlightedChars + ); - // re-start from the 'last' node (the chars or part of them may exist - // multiple times in the same node) - // account for possible extra nodes added from split with - 2 - startIndex = Math.max( - elementsToWrap[elementsToWrap.length - 1].index - 2, - 0 - ); + // re-start from the 'last' node (the chars or part of them may exist + // multiple times in the same node) + // account for possible extra nodes added from split with - 2 + startIndex = Math.max(elementsToWrap[elementsToWrap.length - 1].index - 2, 0); - textContent = element.children - .map((childNode) => { - const props = isElement(childNode) ? childNode.properties : {}; - if ( - props && - !hasOwnProperty(props, 'rehype-pretty-code-visited') && - !hasOwnProperty(props, 'data-highlighted-chars-wrapper') - ) { - return toString(childNode); - } - }) - .join(''); - } - } + textContent = element.children + .map((childNode) => { + const props = isElement(childNode) ? childNode.properties : {}; + if ( + props && + !hasOwnProperty(props, 'rehype-pretty-code-visited') && + !hasOwnProperty(props, 'data-highlighted-chars-wrapper') + ) { + return toString(childNode); + } + }) + .join(''); + } + } - element.children.forEach((childNode) => { - if (!isElement(childNode)) { - return; - } + element.children.forEach((childNode) => { + if (!isElement(childNode)) { + return; + } - if ( - hasOwnProperty(childNode.properties ?? {}, 'rehype-pretty-code-visited') - ) { - if (childNode.properties) { - delete childNode.properties['rehype-pretty-code-visited']; - } - } - }); - }); + if (hasOwnProperty(childNode.properties ?? {}, 'rehype-pretty-code-visited')) { + if (childNode.properties) { + delete childNode.properties['rehype-pretty-code-visited']; + } + } + }); + }); } diff --git a/src/docs/utils/rehype-pretty-code/chars/getElementsToHighlight.ts b/src/docs/utils/rehype-pretty-code/chars/getElementsToHighlight.ts index 61aa7f8f..7459d803 100644 --- a/src/docs/utils/rehype-pretty-code/chars/getElementsToHighlight.ts +++ b/src/docs/utils/rehype-pretty-code/chars/getElementsToHighlight.ts @@ -1,142 +1,134 @@ import type { Element } from 'hast'; import { splitElement } from './splitElement'; -import { - findOverlap, - getContent, - nextElementMaybeContinuesChars, -} from './utils'; +import { findOverlap, getContent, nextElementMaybeContinuesChars } from './utils'; import { hasOwnProperty } from '../utils'; export function getElementsToHighlight( - element: Element, - chars: string, - startIndex = 0, - ignoreChars = false + element: Element, + chars: string, + startIndex = 0, + ignoreChars = false ): Array<{ element: Element; index: number }> { - const toWrap = []; - let charsSoFar = ''; - - if (element.children) { - const elements = element.children as Element[]; - - for (let i = startIndex; i < elements.length; i++) { - const remaining = charsSoFar ? chars.replace(charsSoFar, '') : chars; - - if (remaining === '') { - return toWrap; - } - - const maybeElement = elements[i]; - - if ( - !maybeElement || - maybeElement.type !== 'element' || - // ignore any previously matched chars within - hasOwnProperty( - maybeElement.properties ?? {}, - 'rehype-pretty-code-visited' - ) - ) { - continue; - } - - const content = getContent(maybeElement) || ''; - - // node is the chars, or it finishes the chars - if (content === chars || charsSoFar + content === chars) { - toWrap.push({ element: maybeElement, index: i }); - return toWrap; - } - - // check if the whole node is a continuation of the chars - if (chars.startsWith(charsSoFar + content)) { - // make sure we continue here only if further siblings - // complete the chars. Otherwise an earlier repetition - // of a section of the chars will lead us down the wrong path - if ( - nextElementMaybeContinuesChars({ - elements, - nextIndex: i + 1, - remainingPart: remaining.replace(content, ''), - }) - ) { - toWrap.push({ element: elements[i], index: i }); - charsSoFar += content; - continue; - } - } - - const overlap = findOverlap(content, remaining); - const partialMatch = overlap && remaining.startsWith(overlap); - - if (partialMatch) { - const nextPart = remaining.replace(overlap, ''); - - // this is the wrong node, continue - if ( - nextPart !== '' && - getContent(elements[i + 1]) && - !nextElementMaybeContinuesChars({ - elements, - nextIndex: i + 1, - remainingPart: nextPart, - }) - ) { - continue; - } - - const splitParts = content.split(overlap); - const [leftPart, rightPart, ...rest] = splitParts; - - if (rightPart || leftPart || rest.length > 0) { - // One of the below scenarios should be true - // 1. the whole set of chars are inside the string (at least once) ca[rro]t - // 2. the chars finish or start & end on the beginning of the string ...[carr]ot - // 3. the chars start or start & end from the end of the string carr[ot]... - - const withNextNode = - content + - (getContent(elements[i + 1]) ? getContent(elements[i + 1]) : ''); - const nextNodeOverlap = findOverlap(withNextNode, remaining); - const splitIndex = withNextNode.indexOf(nextNodeOverlap); - - if (chars.endsWith(overlap) || chars.startsWith(overlap)) { - const rightString = rightPart.replace(overlap, ''); - const innerString = overlap; - const leftString = content.substring(0, splitIndex); - - // need to check this to avoid edge case where the right - // side will be duplicated when the matched part repeats within the - // current node - const nextElementContinues = nextElementMaybeContinuesChars({ - elements, - nextIndex: i + 1, - remainingPart: nextPart, - }); - - const [newElement, updatedIndex] = splitElement({ - elements, - elementToWrap: elements[i], - innerString, - rightString, - leftString, - rest, - nextElementContinues, - index: i, - ignoreChars, - }); - - charsSoFar += overlap; - - toWrap.push({ - element: newElement, - index: updatedIndex, - }); - } - } - } - } - } - - return toWrap; + const toWrap = []; + let charsSoFar = ''; + + if (element.children) { + const elements = element.children as Element[]; + + for (let i = startIndex; i < elements.length; i++) { + const remaining = charsSoFar ? chars.replace(charsSoFar, '') : chars; + + if (remaining === '') { + return toWrap; + } + + const maybeElement = elements[i]; + + if ( + !maybeElement || + maybeElement.type !== 'element' || + // ignore any previously matched chars within + hasOwnProperty(maybeElement.properties ?? {}, 'rehype-pretty-code-visited') + ) { + continue; + } + + const content = getContent(maybeElement) || ''; + + // node is the chars, or it finishes the chars + if (content === chars || charsSoFar + content === chars) { + toWrap.push({ element: maybeElement, index: i }); + return toWrap; + } + + // check if the whole node is a continuation of the chars + if (chars.startsWith(charsSoFar + content)) { + // make sure we continue here only if further siblings + // complete the chars. Otherwise an earlier repetition + // of a section of the chars will lead us down the wrong path + if ( + nextElementMaybeContinuesChars({ + elements, + nextIndex: i + 1, + remainingPart: remaining.replace(content, '') + }) + ) { + toWrap.push({ element: elements[i], index: i }); + charsSoFar += content; + continue; + } + } + + const overlap = findOverlap(content, remaining); + const partialMatch = overlap && remaining.startsWith(overlap); + + if (partialMatch) { + const nextPart = remaining.replace(overlap, ''); + + // this is the wrong node, continue + if ( + nextPart !== '' && + getContent(elements[i + 1]) && + !nextElementMaybeContinuesChars({ + elements, + nextIndex: i + 1, + remainingPart: nextPart + }) + ) { + continue; + } + + const splitParts = content.split(overlap); + const [leftPart, rightPart, ...rest] = splitParts; + + if (rightPart || leftPart || rest.length > 0) { + // One of the below scenarios should be true + // 1. the whole set of chars are inside the string (at least once) ca[rro]t + // 2. the chars finish or start & end on the beginning of the string ...[carr]ot + // 3. the chars start or start & end from the end of the string carr[ot]... + + const withNextNode = + content + (getContent(elements[i + 1]) ? getContent(elements[i + 1]) : ''); + const nextNodeOverlap = findOverlap(withNextNode, remaining); + const splitIndex = withNextNode.indexOf(nextNodeOverlap); + + if (chars.endsWith(overlap) || chars.startsWith(overlap)) { + const rightString = rightPart.replace(overlap, ''); + const innerString = overlap; + const leftString = content.substring(0, splitIndex); + + // need to check this to avoid edge case where the right + // side will be duplicated when the matched part repeats within the + // current node + const nextElementContinues = nextElementMaybeContinuesChars({ + elements, + nextIndex: i + 1, + remainingPart: nextPart + }); + + const [newElement, updatedIndex] = splitElement({ + elements, + elementToWrap: elements[i], + innerString, + rightString, + leftString, + rest, + nextElementContinues, + index: i, + ignoreChars + }); + + charsSoFar += overlap; + + toWrap.push({ + element: newElement, + index: updatedIndex + }); + } + } + } + } + } + + return toWrap; } diff --git a/src/docs/utils/rehype-pretty-code/chars/splitElement.ts b/src/docs/utils/rehype-pretty-code/chars/splitElement.ts index 7db346c5..bacded76 100644 --- a/src/docs/utils/rehype-pretty-code/chars/splitElement.ts +++ b/src/docs/utils/rehype-pretty-code/chars/splitElement.ts @@ -2,70 +2,64 @@ import type { Element } from 'hast'; import { isElement, isText } from '../utils'; interface SplitElementProps { - elements: Element[]; - elementToWrap: Element; - innerString: string; - rightString: string; - leftString: string; - rest: string[]; - nextElementContinues: boolean; - index: number; - ignoreChars: boolean; + elements: Element[]; + elementToWrap: Element; + innerString: string; + rightString: string; + leftString: string; + rest: string[]; + nextElementContinues: boolean; + index: number; + ignoreChars: boolean; } export function splitElement({ - elements, - elementToWrap, - innerString, - rightString, - leftString, - rest, - nextElementContinues, - index, - ignoreChars, + elements, + elementToWrap, + innerString, + rightString, + leftString, + rest, + nextElementContinues, + index, + ignoreChars }: SplitElementProps) { - if ( - (isElement(elementToWrap) && - elementToWrap.children?.[0]?.type !== 'text') || - ignoreChars - ) { - return [elementToWrap, index] as const; - } + if ((isElement(elementToWrap) && elementToWrap.children?.[0]?.type !== 'text') || ignoreChars) { + return [elementToWrap, index] as const; + } - let newIndex = index; + let newIndex = index; - // assign the matched value to the current element - const textElement = elementToWrap.children[0]; - if (isText(textElement)) { - textElement.value = innerString; - } + // assign the matched value to the current element + const textElement = elementToWrap.children[0]; + if (isText(textElement)) { + textElement.value = innerString; + } - let rightStr = rightString; - const leftStr = leftString; + let rightStr = rightString; + const leftStr = leftString; - // append any repetitions to the right if necessary - if (rest.length > 0) { - rightStr += rest - .map((s) => (s === '' ? innerString : innerString + s)) - .join(''); - } + // append any repetitions to the right if necessary + if (rest.length > 0) { + rightStr += rest.map((s) => (s === '' ? innerString : innerString + s)).join(''); + } - if (leftStr.length > 0) { - elements.splice(newIndex, 0, { - ...elementToWrap, - properties: { ...elementToWrap.properties }, - children: [{ type: 'text', value: leftStr }], - }); - } + if (leftStr.length > 0) { + elements.splice(newIndex, 0, { + ...elementToWrap, + properties: { ...elementToWrap.properties }, + children: [{ type: 'text', value: leftStr }] + }); + } - if (rightStr.length > 0 && !nextElementContinues) { - newIndex = leftStr.length > 0 ? newIndex + 2 : newIndex + 1; - elements.splice(newIndex, 0, { - ...elementToWrap, - properties: { ...elementToWrap.properties }, - children: [{ type: 'text', value: rightStr }], - }); - } + if (rightStr.length > 0 && !nextElementContinues) { + newIndex = leftStr.length > 0 ? newIndex + 2 : newIndex + 1; + elements.splice(newIndex, 0, { + ...elementToWrap, + properties: { ...elementToWrap.properties }, + children: [{ type: 'text', value: rightStr }] + }); + } - return [elementToWrap, index + 1] as const; + return [elementToWrap, index + 1] as const; } diff --git a/src/docs/utils/rehype-pretty-code/chars/utils.ts b/src/docs/utils/rehype-pretty-code/chars/utils.ts index d373f846..3cc11bab 100644 --- a/src/docs/utils/rehype-pretty-code/chars/utils.ts +++ b/src/docs/utils/rehype-pretty-code/chars/utils.ts @@ -5,66 +5,65 @@ import { toString } from 'hast-util-to-string'; * Look ahead to determine if further, sibling nodes continue the string. */ export function nextElementMaybeContinuesChars({ - elements, - nextIndex, - remainingPart, + elements, + nextIndex, + remainingPart }: { - elements: Element[]; - nextIndex: number; - remainingPart: string; + elements: Element[]; + nextIndex: number; + remainingPart: string; }): boolean { - if (remainingPart === '') { - return false; - } + if (remainingPart === '') { + return false; + } - const nextNode = elements[nextIndex]; - const content = getContent(nextNode); + const nextNode = elements[nextIndex]; + const content = getContent(nextNode); - if (!content) { - return false; - } + if (!content) { + return false; + } - const includesNext = - content.startsWith(remainingPart) || remainingPart.startsWith(content); + const includesNext = content.startsWith(remainingPart) || remainingPart.startsWith(content); - const overlap = findOverlap(content, remainingPart); + const overlap = findOverlap(content, remainingPart); - if (overlap === remainingPart && content.startsWith(remainingPart)) { - return true; - } + if (overlap === remainingPart && content.startsWith(remainingPart)) { + return true; + } - if (includesNext) { - return nextElementMaybeContinuesChars({ - elements, - nextIndex: nextIndex + 1, - remainingPart: remainingPart.replace(content, ''), - }); - } + if (includesNext) { + return nextElementMaybeContinuesChars({ + elements, + nextIndex: nextIndex + 1, + remainingPart: remainingPart.replace(content, '') + }); + } - return false; + return false; } export function getContent(node: Element) { - if (!node) return; - return toString(node); + if (!node) return; + return toString(node); } export function findOverlap(a: string, b: string): string { - if (b.length === 0) { - return ''; - } + if (b.length === 0) { + return ''; + } - if (a.endsWith(b)) { - return b; - } + if (a.endsWith(b)) { + return b; + } - if (a.indexOf(b) >= 0) { - return b; - } + if (a.indexOf(b) >= 0) { + return b; + } - return findOverlap(a, b.substring(0, b.length - 1)); + return findOverlap(a, b.substring(0, b.length - 1)); } export function reverseString(s: string) { - return s.split('').reverse().join(''); + return s.split('').reverse().join(''); } diff --git a/src/docs/utils/rehype-pretty-code/chars/wrapHighlightedChars.ts b/src/docs/utils/rehype-pretty-code/chars/wrapHighlightedChars.ts index d6d5696a..462f2738 100644 --- a/src/docs/utils/rehype-pretty-code/chars/wrapHighlightedChars.ts +++ b/src/docs/utils/rehype-pretty-code/chars/wrapHighlightedChars.ts @@ -4,75 +4,68 @@ import type { CharsHighlighterOptions } from '../types'; import { isElement, isText } from '../utils'; export function wrapHighlightedChars( - parentElement: Element, - elementsToWrap: Array<{ element: Element; index: number }>, - options: CharsHighlighterOptions, - ignoreWord: boolean, - onVisitHighlightedChars?: ( - element: CharsElement, - id: string | undefined - ) => void + parentElement: Element, + elementsToWrap: Array<{ element: Element; index: number }>, + options: CharsHighlighterOptions, + ignoreWord: boolean, + onVisitHighlightedChars?: (element: CharsElement, id: string | undefined) => void ) { - if (!elementsToWrap || elementsToWrap.length === 0) { - return; - } + if (!elementsToWrap || elementsToWrap.length === 0) { + return; + } - const [{ element }] = elementsToWrap; + const [{ element }] = elementsToWrap; - if (ignoreWord) { - if (element.properties) { - element.properties['rehype-pretty-code-visited'] = ''; - } - return; - } + if (ignoreWord) { + if (element.properties) { + element.properties['rehype-pretty-code-visited'] = ''; + } + return; + } - if (elementsToWrap.length > 1) { - parentElement.children.splice( - elementsToWrap[0].index, - elementsToWrap.length, - { - type: 'element', - tagName: 'span', - properties: { 'data-highlighted-chars-wrapper': '' }, - children: elementsToWrap.map(({ element }) => element), - } - ); + if (elementsToWrap.length > 1) { + parentElement.children.splice(elementsToWrap[0].index, elementsToWrap.length, { + type: 'element', + tagName: 'span', + properties: { 'data-highlighted-chars-wrapper': '' }, + children: elementsToWrap.map(({ element }) => element) + }); - const element = parentElement.children[elementsToWrap[0].index]; + const element = parentElement.children[elementsToWrap[0].index]; - if (!isElement(element)) { - return; - } + if (!isElement(element)) { + return; + } - const wordStr = element.children.reduce((acc, node) => { - const textElement = isElement(node) ? node.children[0] : null; - if (isText(textElement)) { - return acc + textElement.value; - } - return acc; - }, ''); + const wordStr = element.children.reduce((acc, node) => { + const textElement = isElement(node) ? node.children[0] : null; + if (isText(textElement)) { + return acc + textElement.value; + } + return acc; + }, ''); - const id = options.idsMap.get(wordStr); - element.properties = element.properties || {}; - element.properties['data-highlighted-chars'] = ''; - element.properties['data-chars-id'] = id; - onVisitHighlightedChars?.(element as CharsElement, id); - } else { - const [{ element }] = elementsToWrap; - const textElement = element.children[0]; + const id = options.idsMap.get(wordStr); + element.properties = element.properties || {}; + element.properties['data-highlighted-chars'] = ''; + element.properties['data-chars-id'] = id; + onVisitHighlightedChars?.(element as CharsElement, id); + } else { + const [{ element }] = elementsToWrap; + const textElement = element.children[0]; - if (!isText(textElement)) { - return; - } + if (!isText(textElement)) { + return; + } - const id = options.idsMap.get(textElement.value); + const id = options.idsMap.get(textElement.value); - element.properties = element.properties || {}; - // used to skip already parsed chars - element.properties['rehype-pretty-code-visited'] = ''; - element.properties['data-highlighted-chars'] = ''; - element.properties['data-chars-id'] = id; + element.properties = element.properties || {}; + // used to skip already parsed chars + element.properties['rehype-pretty-code-visited'] = ''; + element.properties['data-highlighted-chars'] = ''; + element.properties['data-chars-id'] = id; - onVisitHighlightedChars?.(element as CharsElement, id); - } + onVisitHighlightedChars?.(element as CharsElement, id); + } } diff --git a/src/docs/utils/rehype-pretty-code/index.ts b/src/docs/utils/rehype-pretty-code/index.ts index 37b41880..b6fdf58b 100644 --- a/src/docs/utils/rehype-pretty-code/index.ts +++ b/src/docs/utils/rehype-pretty-code/index.ts @@ -14,408 +14,384 @@ import { reverseString } from './chars/utils'; import { isElement, isShikiTheme, isText } from './utils'; interface ToFragmentProps { - trees: Record; - lang: string; - title?: string | null; - caption?: string | null; - inline?: boolean; - keepBackground?: boolean; - lineNumbersMaxDigits?: number; - onVisitTitle?: (element: Element) => void; - onVisitCaption?: (element: Element) => void; + trees: Record; + lang: string; + title?: string | null; + caption?: string | null; + inline?: boolean; + keepBackground?: boolean; + lineNumbersMaxDigits?: number; + onVisitTitle?: (element: Element) => void; + onVisitCaption?: (element: Element) => void; } function toFragment( - element: Element, - { - trees, - lang, - title, - caption, - inline = false, - keepBackground = true, - lineNumbersMaxDigits = 1, - onVisitTitle, - onVisitCaption, - }: ToFragmentProps + element: Element, + { + trees, + lang, + title, + caption, + inline = false, + keepBackground = true, + lineNumbersMaxDigits = 1, + onVisitTitle, + onVisitCaption + }: ToFragmentProps ) { - element.tagName = inline ? 'span' : 'div'; - // User can replace this with a real Fragment at runtime - element.properties = { 'data-rehype-pretty-code-fragment': '' }; - element.children = Object.entries(trees) - .map(([mode, tree]) => { - const pre = tree.children[0]; - - if (!isElement(pre) || !pre.properties) { - return []; - } - - const code = pre.children[0]; - - // Remove class="shiki" - pre.properties.className = undefined; - - if (!keepBackground) { - pre.properties = {}; - } - - pre.properties['data-language'] = lang; - pre.properties['data-theme'] = mode; - - if (!isElement(code) || !code.properties) { - return []; - } - - code.properties['data-language'] = lang; - code.properties['data-theme'] = mode; - - if (inline) { - if (keepBackground) { - code.properties.style = pre.properties.style; - } - return code; - } - - if ('data-line-numbers' in code.properties) { - code.properties['data-line-numbers-max-digits'] = - lineNumbersMaxDigits.toString().length; - } - - const fragments: ElementContent[] = []; - - if (title) { - const elementContent: Element = { - type: 'element', - tagName: 'div', - properties: { - 'data-rehype-pretty-code-title': '', - 'data-language': lang, - 'data-theme': mode, - }, - children: [{ type: 'text', value: title }], - }; - onVisitTitle?.(elementContent); - fragments.push(elementContent); - } - - fragments.push(pre); - - if (caption) { - const elementContent: Element = { - type: 'element', - tagName: 'div', - properties: { - 'data-rehype-pretty-code-caption': '', - 'data-language': lang, - 'data-theme': mode, - }, - children: [{ type: 'text', value: caption }], - }; - onVisitCaption?.(elementContent); - fragments.push(elementContent); - } - - return fragments; - }) - .flatMap((c) => c); + element.tagName = inline ? 'span' : 'div'; + // User can replace this with a real Fragment at runtime + element.properties = { 'data-rehype-pretty-code-fragment': '' }; + element.children = Object.entries(trees) + .map(([mode, tree]) => { + const pre = tree.children[0]; + + if (!isElement(pre) || !pre.properties) { + return []; + } + + const code = pre.children[0]; + + // Remove class="shiki" + pre.properties.className = undefined; + + if (!keepBackground) { + pre.properties = {}; + } + + pre.properties['data-language'] = lang; + pre.properties['data-theme'] = mode; + + if (!isElement(code) || !code.properties) { + return []; + } + + code.properties['data-language'] = lang; + code.properties['data-theme'] = mode; + + if (inline) { + if (keepBackground) { + code.properties.style = pre.properties.style; + } + return code; + } + + if ('data-line-numbers' in code.properties) { + code.properties['data-line-numbers-max-digits'] = lineNumbersMaxDigits.toString().length; + } + + const fragments: ElementContent[] = []; + + if (title) { + const elementContent: Element = { + type: 'element', + tagName: 'div', + properties: { + 'data-rehype-pretty-code-title': '', + 'data-language': lang, + 'data-theme': mode + }, + children: [{ type: 'text', value: title }] + }; + onVisitTitle?.(elementContent); + fragments.push(elementContent); + } + + fragments.push(pre); + + if (caption) { + const elementContent: Element = { + type: 'element', + tagName: 'div', + properties: { + 'data-rehype-pretty-code-caption': '', + 'data-language': lang, + 'data-theme': mode + }, + children: [{ type: 'text', value: caption }] + }; + onVisitCaption?.(elementContent); + fragments.push(elementContent); + } + + return fragments; + }) + .flatMap((c) => c); } -const globalHighlighterCache = new Map< - string, - Map> ->(); +const globalHighlighterCache = new Map>>(); const hastParser = unified().use(rehypeParse, { fragment: true }); -export default function rehypePrettyCode( - options: Options = {} -): void | Transformer { - const { - grid = true, - theme = 'github-dark-dimmed', - keepBackground = true, - tokensMap = {}, - filterMetaString = (v) => v, - getHighlighter = shikiHighlighter, - onVisitLine, - onVisitHighlightedLine, - onVisitHighlightedChars, - onVisitTitle, - onVisitCaption, - } = options; - - const optionsHash = hashObj( - { - theme, - tokensMap, - onVisitLine, - onVisitHighlightedLine, - onVisitHighlightedChars, - getHighlighter, - }, - { algorithm: 'sha1' } - ); - let highlighterCache = globalHighlighterCache.get(optionsHash); - if (!highlighterCache) { - highlighterCache = new Map(); - globalHighlighterCache.set(optionsHash, highlighterCache); - } - const highlighters = new Map(); - - if (theme == null || typeof theme === 'string' || isShikiTheme(theme)) { - if (!highlighterCache.has('default')) { - highlighterCache.set('default', getHighlighter({ theme })); - } - } else if (typeof theme === 'object') { - // color mode object - for (const [mode, value] of Object.entries(theme)) { - if (!highlighterCache.has(mode)) { - highlighterCache.set(mode, getHighlighter({ theme: value })); - } - } - } - - return async (tree) => { - if (!highlighterCache) return; - - for (const [mode, loadHighlighter] of highlighterCache.entries()) { - if (!highlighters.get(mode)) { - highlighters.set(mode, await loadHighlighter); - } - } - - visit(tree, 'element', (element, index, parent) => { - // Inline code - if ( - (element.tagName === 'code' && - isElement(parent) && - parent.tagName !== 'pre') || - element.tagName === 'inlineCode' - ) { - const textElement = element.children[0]; - - if (!isText(textElement)) { - return; - } - - const value = textElement.value; - - if (!value) { - return; - } - - // TODO: allow escape characters to break out of highlighting - const strippedValue = value.replace(/{:[a-zA-Z.-]+}/, ''); - const meta = value.match(/{:([a-zA-Z.-]+)}$/)?.[1]; - - if (!meta) { - return; - } - - const isLang = meta[0] !== '.'; - - const trees: Record = {}; - for (const [mode, highlighter] of highlighters.entries()) { - if (!isLang || (meta === 'ansi' && !highlighter.ansiToHtml)) { - const color = - highlighter - .getTheme() - .settings.find(({ scope }: { scope?: string[] }) => - scope?.includes(tokensMap[meta.slice(1)] ?? meta.slice(1)) - )?.settings.foreground ?? 'inherit'; - - trees[mode] = hastParser.parse( - `
${strippedValue}
` - ); - } else { - let html; - if (meta === 'ansi') { - html = highlighter.ansiToHtml(strippedValue); - } else { - html = highlighter.codeToHtml(strippedValue, meta); - } - trees[mode] = hastParser.parse(html); - } - } - - toFragment(element, { - trees, - lang: isLang ? meta : '.token', - inline: true, - keepBackground, - }); - } - - if ( - // Block code - // Check from https://github.com/leafac/rehype-shiki - element.tagName === 'pre' && - Array.isArray(element.children) && - element.children.length === 1 && - isElement(element.children[0]) && - element.children[0].tagName === 'code' && - typeof element.children[0].properties === 'object' && - Array.isArray(element.children[0].properties.className) && - typeof element.children[0].properties.className[0] === 'string' && - element.children[0].properties.className[0].startsWith('language-') - ) { - const codeElement = element.children[0]; - const textElement = codeElement.children[0]; - - if (!isElement(codeElement)) { - return; - } - - if (grid && codeElement.properties) { - codeElement.properties.style += 'display: grid;'; - } - - const lang = element.children[0].properties.className[0].replace( - 'language-', - '' - ); - const metastring = (codeElement.data?.meta ?? - codeElement.properties?.metastring ?? - '') as string; - - let meta = filterMetaString(metastring); - - const titleMatch = meta.match(/title="([^"]*)"/); - const title = titleMatch?.[1] ?? null; - meta = meta.replace(titleMatch?.[0] ?? '', ''); - - const captionMatch = meta.match(/caption="([^"]*)"/); - const caption = captionMatch?.[1] ?? null; - meta = meta.replace(captionMatch?.[0] ?? '', ''); - - const lineNumbers = meta - ? rangeParser(meta.match(/(?:^|\s){(.*?)}/)?.[1] ?? '') - : []; - let lineNumbersMaxDigits = 0; - - const words: string[] = []; - const wordNumbers: Array = []; - const wordIdsMap = new Map(); - - const wordMatches = meta - ? [...meta.matchAll(/\/(.*?)\/(\S*)/g)] - : undefined; - if (Array.isArray(wordMatches)) { - wordMatches.forEach((_, index) => { - const word = wordMatches[index][1]; - const wordIdAndOrRange = wordMatches[index][2]; - words.push(word); - - const [range, id] = wordIdAndOrRange.split('#'); - - if (range) { - wordNumbers.push(rangeParser(range)); - } - - if (id) { - wordIdsMap.set(word, id); - } - }); - } - - if (!isText(textElement)) { - return; - } - - const strippedValue = textElement.value.replace(/\n$/, ''); - const trees: Record = {}; - for (const [mode, highlighter] of highlighters.entries()) { - try { - let html; - if (lang === 'ansi' && highlighter.ansiToHtml) { - html = highlighter.ansiToHtml(strippedValue); - } else { - html = highlighter.codeToHtml(strippedValue, lang); - } - trees[mode] = hastParser.parse(html); - } catch (e) { - // Fallback to plain text if a language has not been registered - trees[mode] = hastParser.parse( - highlighter.codeToHtml(strippedValue, 'txt') - ); - } - } - - Object.entries(trees).forEach(([, tree]) => { - let lineCounter = 0; - - const wordOptions: CharsHighlighterOptions = { - ranges: wordNumbers, - idsMap: wordIdsMap, - counterMap: new Map(), - }; - - visit(tree, 'element', (element) => { - if ( - element.tagName === 'code' && - /srebmuNeniLwohs(?!(.*)(\/))/.test(reverseString(meta)) - ) { - if (element.properties) { - element.properties['data-line-numbers'] = ''; - } - - const lineNumbersStartAtMatch = reverseString(meta).match( - /(?:\}(\d+){)?srebmuNeniLwohs(?!(.*)(\/))/ - ); - const startNumberString = lineNumbersStartAtMatch?.[1]; - if (startNumberString) { - const startAt = startNumberString - ? Number(reverseString(startNumberString)) - 1 - : 0; - lineNumbersMaxDigits = startAt; - if (element.properties) { - element.properties.style = `counter-set: line ${startAt};`; - } - } - } - - if ( - Array.isArray(element.properties?.className) && - element.properties?.className?.[0] === 'line' - ) { - if (grid && element.children.length === 0) { - element.children = [{ type: 'text', value: ' ' }]; - } - - element.properties.className = undefined; - element.properties['data-line'] = ''; - onVisitLine?.(element as LineElement); - - if ( - lineNumbers.length !== 0 && - lineNumbers.includes(++lineCounter) - ) { - element.properties['data-highlighted-line'] = ''; - onVisitHighlightedLine?.(element as LineElement); - } - - charsHighlighter( - element, - words, - wordOptions, - onVisitHighlightedChars - ); - - lineNumbersMaxDigits++; - } - }); - }); - - toFragment(element, { - trees, - lang, - title, - caption, - keepBackground, - lineNumbersMaxDigits, - onVisitTitle, - onVisitCaption, - }); - } - }); - }; +export default function rehypePrettyCode(options: Options = {}): void | Transformer { + const { + grid = true, + theme = 'github-dark-dimmed', + keepBackground = true, + tokensMap = {}, + filterMetaString = (v) => v, + getHighlighter = shikiHighlighter, + onVisitLine, + onVisitHighlightedLine, + onVisitHighlightedChars, + onVisitTitle, + onVisitCaption + } = options; + + const optionsHash = hashObj( + { + theme, + tokensMap, + onVisitLine, + onVisitHighlightedLine, + onVisitHighlightedChars, + getHighlighter + }, + { algorithm: 'sha1' } + ); + let highlighterCache = globalHighlighterCache.get(optionsHash); + if (!highlighterCache) { + highlighterCache = new Map(); + globalHighlighterCache.set(optionsHash, highlighterCache); + } + const highlighters = new Map(); + + if (theme == null || typeof theme === 'string' || isShikiTheme(theme)) { + if (!highlighterCache.has('default')) { + highlighterCache.set('default', getHighlighter({ theme })); + } + } else if (typeof theme === 'object') { + // color mode object + for (const [mode, value] of Object.entries(theme)) { + if (!highlighterCache.has(mode)) { + highlighterCache.set(mode, getHighlighter({ theme: value })); + } + } + } + + return async (tree) => { + if (!highlighterCache) return; + + for (const [mode, loadHighlighter] of highlighterCache.entries()) { + if (!highlighters.get(mode)) { + highlighters.set(mode, await loadHighlighter); + } + } + + visit(tree, 'element', (element, index, parent) => { + // Inline code + if ( + (element.tagName === 'code' && isElement(parent) && parent.tagName !== 'pre') || + element.tagName === 'inlineCode' + ) { + const textElement = element.children[0]; + + if (!isText(textElement)) { + return; + } + + const value = textElement.value; + + if (!value) { + return; + } + + // TODO: allow escape characters to break out of highlighting + const strippedValue = value.replace(/{:[a-zA-Z.-]+}/, ''); + const meta = value.match(/{:([a-zA-Z.-]+)}$/)?.[1]; + + if (!meta) { + return; + } + + const isLang = meta[0] !== '.'; + + const trees: Record = {}; + for (const [mode, highlighter] of highlighters.entries()) { + if (!isLang || (meta === 'ansi' && !highlighter.ansiToHtml)) { + const color = + highlighter + .getTheme() + .settings.find( + ({ scope }: { scope?: string[] }) => + scope?.includes(tokensMap[meta.slice(1)] ?? meta.slice(1)) + )?.settings.foreground ?? 'inherit'; + + trees[mode] = hastParser.parse( + `
${strippedValue}
` + ); + } else { + let html; + if (meta === 'ansi') { + html = highlighter.ansiToHtml(strippedValue); + } else { + html = highlighter.codeToHtml(strippedValue, meta); + } + trees[mode] = hastParser.parse(html); + } + } + + toFragment(element, { + trees, + lang: isLang ? meta : '.token', + inline: true, + keepBackground + }); + } + + if ( + // Block code + // Check from https://github.com/leafac/rehype-shiki + element.tagName === 'pre' && + Array.isArray(element.children) && + element.children.length === 1 && + isElement(element.children[0]) && + element.children[0].tagName === 'code' && + typeof element.children[0].properties === 'object' && + Array.isArray(element.children[0].properties.className) && + typeof element.children[0].properties.className[0] === 'string' && + element.children[0].properties.className[0].startsWith('language-') + ) { + const codeElement = element.children[0]; + const textElement = codeElement.children[0]; + + if (!isElement(codeElement)) { + return; + } + + if (grid && codeElement.properties) { + codeElement.properties.style += 'display: grid;'; + } + + const lang = element.children[0].properties.className[0].replace('language-', ''); + const metastring = (codeElement.data?.meta ?? + codeElement.properties?.metastring ?? + '') as string; + + let meta = filterMetaString(metastring); + + const titleMatch = meta.match(/title="([^"]*)"/); + const title = titleMatch?.[1] ?? null; + meta = meta.replace(titleMatch?.[0] ?? '', ''); + + const captionMatch = meta.match(/caption="([^"]*)"/); + const caption = captionMatch?.[1] ?? null; + meta = meta.replace(captionMatch?.[0] ?? '', ''); + + const lineNumbers = meta ? rangeParser(meta.match(/(?:^|\s){(.*?)}/)?.[1] ?? '') : []; + let lineNumbersMaxDigits = 0; + + const words: string[] = []; + const wordNumbers: Array = []; + const wordIdsMap = new Map(); + + const wordMatches = meta ? [...meta.matchAll(/\/(.*?)\/(\S*)/g)] : undefined; + if (Array.isArray(wordMatches)) { + wordMatches.forEach((_, index) => { + const word = wordMatches[index][1]; + const wordIdAndOrRange = wordMatches[index][2]; + words.push(word); + + const [range, id] = wordIdAndOrRange.split('#'); + + if (range) { + wordNumbers.push(rangeParser(range)); + } + + if (id) { + wordIdsMap.set(word, id); + } + }); + } + + if (!isText(textElement)) { + return; + } + + const strippedValue = textElement.value.replace(/\n$/, ''); + const trees: Record = {}; + for (const [mode, highlighter] of highlighters.entries()) { + try { + let html; + if (lang === 'ansi' && highlighter.ansiToHtml) { + html = highlighter.ansiToHtml(strippedValue); + } else { + html = highlighter.codeToHtml(strippedValue, lang); + } + trees[mode] = hastParser.parse(html); + } catch (e) { + // Fallback to plain text if a language has not been registered + trees[mode] = hastParser.parse(highlighter.codeToHtml(strippedValue, 'txt')); + } + } + + Object.entries(trees).forEach(([, tree]) => { + let lineCounter = 0; + + const wordOptions: CharsHighlighterOptions = { + ranges: wordNumbers, + idsMap: wordIdsMap, + counterMap: new Map() + }; + + visit(tree, 'element', (element) => { + if ( + element.tagName === 'code' && + /srebmuNeniLwohs(?!(.*)(\/))/.test(reverseString(meta)) + ) { + if (element.properties) { + element.properties['data-line-numbers'] = ''; + } + + const lineNumbersStartAtMatch = reverseString(meta).match( + /(?:\}(\d+){)?srebmuNeniLwohs(?!(.*)(\/))/ + ); + const startNumberString = lineNumbersStartAtMatch?.[1]; + if (startNumberString) { + const startAt = startNumberString + ? Number(reverseString(startNumberString)) - 1 + : 0; + lineNumbersMaxDigits = startAt; + if (element.properties) { + element.properties.style = `counter-set: line ${startAt};`; + } + } + } + + if ( + Array.isArray(element.properties?.className) && + element.properties?.className?.[0] === 'line' + ) { + if (grid && element.children.length === 0) { + element.children = [{ type: 'text', value: ' ' }]; + } + + element.properties.className = undefined; + element.properties['data-line'] = ''; + onVisitLine?.(element as LineElement); + + if (lineNumbers.length !== 0 && lineNumbers.includes(++lineCounter)) { + element.properties['data-highlighted-line'] = ''; + onVisitHighlightedLine?.(element as LineElement); + } + + charsHighlighter(element, words, wordOptions, onVisitHighlightedChars); + + lineNumbersMaxDigits++; + } + }); + }); + + toFragment(element, { + trees, + lang, + title, + caption, + keepBackground, + lineNumbersMaxDigits, + onVisitTitle, + onVisitCaption + }); + } + }); + }; } diff --git a/src/docs/utils/rehype-pretty-code/types.ts b/src/docs/utils/rehype-pretty-code/types.ts index 7e0995fd..00eeb658 100644 --- a/src/docs/utils/rehype-pretty-code/types.ts +++ b/src/docs/utils/rehype-pretty-code/types.ts @@ -3,36 +3,36 @@ import type { Transformer } from 'unified'; import type { Root, Element, Properties } from 'hast'; export interface CharsHighlighterOptions { - ranges: Array; - idsMap: Map; - counterMap: Map; + ranges: Array; + idsMap: Map; + counterMap: Map; } export type LineElement = Omit & { - properties: Properties & { className?: string[] }; + properties: Properties & { className?: string[] }; }; export type CharsElement = Omit & { - properties: Properties & { className?: string[] }; - children: Array; + properties: Properties & { className?: string[] }; + children: Array; }; type Theme = IShikiTheme | string; export interface Options { - grid?: boolean; - theme?: Theme | Record; - keepBackground?: boolean; - tokensMap?: Record; - filterMetaString?(str: string): string; - getHighlighter?(options: Pick): Promise; - onVisitLine?(element: LineElement): void; - onVisitHighlightedLine?(element: LineElement): void; - onVisitHighlightedChars?(element: CharsElement, id: string | undefined): void; - onVisitTitle?(element: Element): void; - onVisitCaption?(element: Element): void; + grid?: boolean; + theme?: Theme | Record; + keepBackground?: boolean; + tokensMap?: Record; + filterMetaString?(str: string): string; + getHighlighter?(options: Pick): Promise; + onVisitLine?(element: LineElement): void; + onVisitHighlightedLine?(element: LineElement): void; + onVisitHighlightedChars?(element: CharsElement, id: string | undefined): void; + onVisitTitle?(element: Element): void; + onVisitCaption?(element: Element): void; } // export default function rehypePrettyCode( // options?: void | Options | undefined -// ): void | Transformer; \ No newline at end of file +// ): void | Transformer; diff --git a/src/docs/utils/rehype-pretty-code/utils.ts b/src/docs/utils/rehype-pretty-code/utils.ts index 96098832..bdf999c4 100644 --- a/src/docs/utils/rehype-pretty-code/utils.ts +++ b/src/docs/utils/rehype-pretty-code/utils.ts @@ -3,22 +3,19 @@ import type { IShikiTheme } from 'shiki'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export function isShikiTheme(value: any): value is IShikiTheme { - return value ? hasOwnProperty(value, 'tokenColors') : false; + return value ? hasOwnProperty(value, 'tokenColors') : false; } export function isElement( - value: ElementContent | Element | Root | RootContent | null + value: ElementContent | Element | Root | RootContent | null ): value is Element { - return value ? value.type === 'element' : false; + return value ? value.type === 'element' : false; } export function isText(value: ElementContent | null): value is Text { - return value ? value.type === 'text' : false; + return value ? value.type === 'text' : false; } -export function hasOwnProperty( - object: Record, - string: string -) { - return {}.hasOwnProperty.call(object, string); +export function hasOwnProperty(object: Record, string: string) { + return {}.hasOwnProperty.call(object, string); } diff --git a/src/docs/utils/stores.ts b/src/docs/utils/stores.ts index d6ae2f82..033eaec2 100644 --- a/src/docs/utils/stores.ts +++ b/src/docs/utils/stores.ts @@ -15,4 +15,4 @@ export const themeStore: Writable = writable('ato'); export const customThemeCSSStore: Writable = writable(''); -export const darkTheme: Writable = persisted('ato-dark-mode', true); \ No newline at end of file +export const darkTheme: Writable = persisted('ato-dark-mode', true); diff --git a/src/lib/actions/observe/observe.ts b/src/lib/actions/observe/observe.ts index 30e8ad4a..4169b6d0 100644 --- a/src/lib/actions/observe/observe.ts +++ b/src/lib/actions/observe/observe.ts @@ -1,38 +1,40 @@ -import { derived, writable, type Writable } from "svelte/store"; -import type { Visibility } from "./types"; +import { derived, writable, type Writable } from 'svelte/store'; +import type { Visibility } from './types'; // TODO export function observe(target: string): Visibility { - - let isVisible: Writable = writable(false); - let intersectionRatio: Writable = writable(0); - - const { subscribe } = derived([isVisible, intersectionRatio], ($state) => ({ isVisible: $state[0], intersectionRatio: $state[1] })); - - const element: Element | null = document.getElementsByClassName(target)[0]; - - const observer: IntersectionObserver = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.intersectionRatio > 0) { - isVisible.set(true); - intersectionRatio.set(entry.intersectionRatio); - } else { - isVisible.set(false); - intersectionRatio.set(0); - } - }); - }); - - if (element) { - observer.observe(element); - } - - function destroy(): void { - observer?.disconnect(); - } - - return { - subscribe, - destroy - } -} \ No newline at end of file + let isVisible: Writable = writable(false); + let intersectionRatio: Writable = writable(0); + + const { subscribe } = derived([isVisible, intersectionRatio], ($state) => ({ + isVisible: $state[0], + intersectionRatio: $state[1] + })); + + const element: Element | null = document.getElementsByClassName(target)[0]; + + const observer: IntersectionObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio > 0) { + isVisible.set(true); + intersectionRatio.set(entry.intersectionRatio); + } else { + isVisible.set(false); + intersectionRatio.set(0); + } + }); + }); + + if (element) { + observer.observe(element); + } + + function destroy(): void { + observer?.disconnect(); + } + + return { + subscribe, + destroy + }; +} diff --git a/src/lib/actions/observe/types.d.ts b/src/lib/actions/observe/types.d.ts index cdfeb351..2791ad37 100644 --- a/src/lib/actions/observe/types.d.ts +++ b/src/lib/actions/observe/types.d.ts @@ -1,12 +1,12 @@ -import type { Readable } from "svelte/store"; +import type { Readable } from 'svelte/store'; type VisibilityStore = { - isVisible: boolean; - intersectionRatio: number; -} + isVisible: boolean; + intersectionRatio: number; +}; export interface CustomReadable extends Readable { - destroy: () => void; -}; + destroy: () => void; +} -export type Visibility = CustomReadable; \ No newline at end of file +export type Visibility = CustomReadable; diff --git a/src/lib/components/accordion/accordion-item.svelte b/src/lib/components/accordion/accordion-item.svelte index 729e4555..be2a082c 100644 --- a/src/lib/components/accordion/accordion-item.svelte +++ b/src/lib/components/accordion/accordion-item.svelte @@ -1,43 +1,38 @@ -
-
- -
+ > + + +
- {#if $isSelected(key)} -
- -
- {/if} - \ No newline at end of file + {#if $isSelected(key)} +
+ +
+ {/if} + diff --git a/src/lib/components/accordion/accordion-root.svelte b/src/lib/components/accordion/accordion-root.svelte index 593bba78..af6c3d9a 100644 --- a/src/lib/components/accordion/accordion-root.svelte +++ b/src/lib/components/accordion/accordion-root.svelte @@ -1,53 +1,50 @@ -
- -
\ No newline at end of file +
+ +
diff --git a/src/lib/components/accordion/exports.ts b/src/lib/components/accordion/exports.ts index 85b8d703..0de953d6 100644 --- a/src/lib/components/accordion/exports.ts +++ b/src/lib/components/accordion/exports.ts @@ -1,8 +1,4 @@ - import { default as Root } from './accordion-root.svelte'; import { default as Item } from './accordion-item.svelte'; -export { - Root, - Item -}; \ No newline at end of file +export { Root, Item }; diff --git a/src/lib/components/accordion/index.ts b/src/lib/components/accordion/index.ts index 897b6868..8f4d6991 100644 --- a/src/lib/components/accordion/index.ts +++ b/src/lib/components/accordion/index.ts @@ -1,5 +1,4 @@ - export { default as AccordionRoot } from './accordion-root.svelte'; export { default as AccordionItem } from './accordion-item.svelte'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/accordion/types.ts b/src/lib/components/accordion/types.ts index 29c8fe35..94de001f 100644 --- a/src/lib/components/accordion/types.ts +++ b/src/lib/components/accordion/types.ts @@ -1,11 +1,10 @@ - import type { Accordion } from '@melt-ui/svelte'; export type AccordionContext = { - content: Accordion["elements"]["content"]; - item: Accordion["elements"]["item"]; - trigger: Accordion["elements"]["trigger"]; - isSelected: Accordion["helpers"]["isSelected"]; - disabled: boolean; - disabledStyle: string; -}; \ No newline at end of file + content: Accordion['elements']['content']; + item: Accordion['elements']['item']; + trigger: Accordion['elements']['trigger']; + isSelected: Accordion['helpers']['isSelected']; + disabled: boolean; + disabledStyle: string; +}; diff --git a/src/lib/components/avatar/aang.svelte b/src/lib/components/avatar/aang.svelte index b4cf75f4..4b07b36c 100644 --- a/src/lib/components/avatar/aang.svelte +++ b/src/lib/components/avatar/aang.svelte @@ -1,6 +1,5 @@ - {#if src} - - {:else} - {formattedText} - {/if} - \ No newline at end of file + {#if src} + + {:else} + {formattedText} + {/if} + diff --git a/src/lib/components/avatar/index.ts b/src/lib/components/avatar/index.ts index 6ffc9555..4dcf546c 100644 --- a/src/lib/components/avatar/index.ts +++ b/src/lib/components/avatar/index.ts @@ -1,2 +1 @@ - -export { default as Avatar } from './aang.svelte'; \ No newline at end of file +export { default as Avatar } from './aang.svelte'; diff --git a/src/lib/components/combobox/index.ts b/src/lib/components/combobox/index.ts index 1612caea..84afd96c 100644 --- a/src/lib/components/combobox/index.ts +++ b/src/lib/components/combobox/index.ts @@ -1,4 +1,3 @@ - export { default as Combobox } from './combobox.svelte'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/combobox/types.ts b/src/lib/components/combobox/types.ts index 13d884a5..09abc126 100644 --- a/src/lib/components/combobox/types.ts +++ b/src/lib/components/combobox/types.ts @@ -2,9 +2,9 @@ import type { Writable } from 'svelte/store'; import type { ComboboxOption } from '@melt-ui/svelte'; export type ComboboxItem = { - value: string; - subtitle?: string; - disabled?: boolean; -} + value: string; + subtitle?: string; + disabled?: boolean; +}; -export type ComboboxSelectedStore = Writable>; \ No newline at end of file +export type ComboboxSelectedStore = Writable>; diff --git a/src/lib/components/dialog/dialog.svelte b/src/lib/components/dialog/dialog.svelte index 410de48a..39f21a78 100644 --- a/src/lib/components/dialog/dialog.svelte +++ b/src/lib/components/dialog/dialog.svelte @@ -6,8 +6,8 @@ /** A writable store that controls whether or not the dialog is open. */ export let open: Writable; - /** The role attribute of the dialog element. An alert dialog should be used to display content - * that is critical to the user's workflow, whereas a dialog should be used to display content + /** The role attribute of the dialog element. An alert dialog should be used to display content + * that is critical to the user's workflow, whereas a dialog should be used to display content * that isn't critical to the user's workflow. */ export let role: DialogRole = 'dialog'; @@ -21,12 +21,12 @@ export let overlayTransition: DialogTransition = { trans: fade, options: { duration: 150 } - } + }; /** Set the dialog container transition. */ export let containerTransition: DialogTransition = { trans: fade, options: { duration: 150 } - } + }; /** Center modal. */ export let center = true; @@ -65,17 +65,19 @@ {#if $open} -
-
-{/if} \ No newline at end of file +{/if} diff --git a/src/lib/components/dialog/index.ts b/src/lib/components/dialog/index.ts index 110d1f86..00be53cf 100644 --- a/src/lib/components/dialog/index.ts +++ b/src/lib/components/dialog/index.ts @@ -1,4 +1,3 @@ - export { default as Dialog } from './dialog.svelte'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/dialog/types.ts b/src/lib/components/dialog/types.ts index 6b3f1d27..52ae51c1 100644 --- a/src/lib/components/dialog/types.ts +++ b/src/lib/components/dialog/types.ts @@ -1,9 +1,9 @@ -import type { TransitionConfig } from "svelte/transition"; +import type { TransitionConfig } from 'svelte/transition'; // Props export type DialogRole = 'dialog' | 'alertdialog'; export type DialogTransition = { - trans: (node: Element, options: any) => TransitionConfig, - options: any -} \ No newline at end of file + trans: (node: Element, options: any) => TransitionConfig; + options: any; +}; diff --git a/src/lib/components/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/dropdown-menu/dropdown-menu-item.svelte index b0d8dd25..702b0d5c 100644 --- a/src/lib/components/dropdown-menu/dropdown-menu-item.svelte +++ b/src/lib/components/dropdown-menu/dropdown-menu-item.svelte @@ -3,33 +3,39 @@ import type { DropdownMenuContext } from './types'; - /** Set whether or not the item is disabled. */ - export let disabled = false; + /** Set whether or not the item is disabled. */ + export let disabled = false; - /** - * Set the item styles for when the item is not disabled. - * You can use this to overwrite the global itemStyle prop set in the - * Dropdown.Menu component. - */ - export let itemStyle = ''; - /** - * Set the styles for the disabled item. - * You can use this to overwrite the global itemDisabledStyle prop set - * in the Dropdown.Menu component. - */ - export let itemDisabledStyle = ''; + /** + * Set the item styles for when the item is not disabled. + * You can use this to overwrite the global itemStyle prop set in the + * Dropdown.Menu component. + */ + export let itemStyle = ''; + /** + * Set the styles for the disabled item. + * You can use this to overwrite the global itemDisabledStyle prop set + * in the Dropdown.Menu component. + */ + export let itemDisabledStyle = ''; - const { item, itemDisabledStyle: inheritedDisabledStyle, itemStyle: inheritedItemStyle } = getContext('dropdown-menu'); + const { + item, + itemDisabledStyle: inheritedDisabledStyle, + itemStyle: inheritedItemStyle + } = getContext('dropdown-menu'); - $: itemClasses = disabled - ? itemDisabledStyle - ? itemDisabledStyle : inheritedDisabledStyle - : itemStyle - ? itemStyle : inheritedItemStyle; + $: itemClasses = disabled + ? itemDisabledStyle + ? itemDisabledStyle + : inheritedDisabledStyle + : itemStyle + ? itemStyle + : inheritedItemStyle;
-
- -
+
+ +
diff --git a/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte index d8009cdc..e19908e8 100644 --- a/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte +++ b/src/lib/components/dropdown-menu/dropdown-menu-radio-group.svelte @@ -1,39 +1,39 @@
- -
\ No newline at end of file + +
diff --git a/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte index 8b25c27c..b2c6dd2e 100644 --- a/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte +++ b/src/lib/components/dropdown-menu/dropdown-menu-separator.svelte @@ -1,15 +1,12 @@ -
\ No newline at end of file +
diff --git a/src/lib/components/dropdown-menu/dropdown-menu-submenu.svelte b/src/lib/components/dropdown-menu/dropdown-menu-submenu.svelte index c82d7d9b..1de995e9 100644 --- a/src/lib/components/dropdown-menu/dropdown-menu-submenu.svelte +++ b/src/lib/components/dropdown-menu/dropdown-menu-submenu.svelte @@ -1,52 +1,59 @@ -
-
- -
+
+
+ +
{#if $subOpen} -
- - - {#if !hideArrow} -
- {/if} -
-{/if} \ No newline at end of file +
+ + + {#if !hideArrow} +
+ {/if} +
+{/if} diff --git a/src/lib/components/dropdown-menu/exports.ts b/src/lib/components/dropdown-menu/exports.ts index 9dfbd834..b5003fa0 100644 --- a/src/lib/components/dropdown-menu/exports.ts +++ b/src/lib/components/dropdown-menu/exports.ts @@ -1,4 +1,3 @@ - // https://github.com/huntabyte/bits/blob/main/src/lib/bits/accordion/index.ts // https://github.com/huntabyte/bits/blob/main/src/lib/bits/index.ts @@ -11,12 +10,4 @@ import { default as RadioGroupItem } from './dropdown-menu-radio-group-item.svel import { default as Separator } from './dropdown-menu-separator.svelte'; import { default as Submenu } from './dropdown-menu-submenu.svelte'; -export { - Menu, - CheckboxItem, - Item, - RadioGroup, - RadioGroupItem, - Separator, - Submenu -}; \ No newline at end of file +export { Menu, CheckboxItem, Item, RadioGroup, RadioGroupItem, Separator, Submenu }; diff --git a/src/lib/components/dropdown-menu/index.ts b/src/lib/components/dropdown-menu/index.ts index 2e668a28..c2e75543 100644 --- a/src/lib/components/dropdown-menu/index.ts +++ b/src/lib/components/dropdown-menu/index.ts @@ -1,4 +1,3 @@ - // These are for the automatic API documentation. export { default as DropdownMenu } from './dropdown-menu.svelte'; export { default as DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-item.svelte'; @@ -9,4 +8,4 @@ export { default as DropdownMenuSeparator } from './dropdown-menu-separator.svel export { default as DropdownMenuSubmenu } from './dropdown-menu-submenu.svelte'; // Types -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/dropdown-menu/types.ts b/src/lib/components/dropdown-menu/types.ts index 783f2ee1..3f621bb0 100644 --- a/src/lib/components/dropdown-menu/types.ts +++ b/src/lib/components/dropdown-menu/types.ts @@ -1,9 +1,9 @@ import type { Writable } from 'svelte/store'; -import type { TransitionConfig } from "svelte/transition"; -import type { - DropdownMenuElements, - DropdownMenuBuilders, - DropdownMenuRadioGroup +import type { TransitionConfig } from 'svelte/transition'; +import type { + DropdownMenuElements, + DropdownMenuBuilders, + DropdownMenuRadioGroup } from '@melt-ui/svelte'; // Props @@ -12,33 +12,35 @@ export type DropdownMenuRadioGroupValue = Writable; export type DropdownMenuCheckboxValue = Writable; export type DropdownMenuTransition = { - trans: (node: Element, options: any) => TransitionConfig; - options: any; -} + trans: (node: Element, options: any) => TransitionConfig; + options: any; +}; // Events -export type DropdownMenuCheckboxCheckedChangeEvent = CustomEvent<{ curr: boolean, next: boolean }>; -export type DropdownMenuRadioGroupChangeEvent = CustomEvent<{ curr: string, next: string }>; -export type DropdownMenuRadioGroupItemClickEvent = CustomEvent<{ value: string, originalEvent: CustomEvent }>; - +export type DropdownMenuCheckboxCheckedChangeEvent = CustomEvent<{ curr: boolean; next: boolean }>; +export type DropdownMenuRadioGroupChangeEvent = CustomEvent<{ curr: string; next: string }>; +export type DropdownMenuRadioGroupItemClickEvent = CustomEvent<{ + value: string; + originalEvent: CustomEvent; +}>; // For internal use ------------------------------------ export type DropdownMenuContext = { - item: DropdownMenuElements['item']; - separator: DropdownMenuElements['separator']; - createSubmenu: DropdownMenuBuilders['createSubmenu']; - createMenuRadioGroup: DropdownMenuBuilders['createMenuRadioGroup']; - createCheckboxItem: DropdownMenuBuilders['createCheckboxItem']; - itemDisabledStyle: string; - itemStyle: string; - menuContainerStyle: string; + item: DropdownMenuElements['item']; + separator: DropdownMenuElements['separator']; + createSubmenu: DropdownMenuBuilders['createSubmenu']; + createMenuRadioGroup: DropdownMenuBuilders['createMenuRadioGroup']; + createCheckboxItem: DropdownMenuBuilders['createCheckboxItem']; + itemDisabledStyle: string; + itemStyle: string; + menuContainerStyle: string; }; export type DropdownMenuRadioGroupContext = { - radioItem: DropdownMenuRadioGroup['elements']['radioItem']; - isChecked: DropdownMenuRadioGroup['helpers']['isChecked']; - checkedIcon: string; - activeStyle: string; - inactiveStyle: string; -} \ No newline at end of file + radioItem: DropdownMenuRadioGroup['elements']['radioItem']; + isChecked: DropdownMenuRadioGroup['helpers']['isChecked']; + checkedIcon: string; + activeStyle: string; + inactiveStyle: string; +}; diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 4b79780f..4522af98 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -1,14 +1,13 @@ - // export * from './accordion'; export * as Accordion from './accordion/exports'; export * from './avatar'; export * from './combobox'; export * from './dialog'; -export * from './dropdown-menu' +export * from './dropdown-menu'; export * as Dropdown from './dropdown-menu/exports'; // export * from './popover'; export * from './radio-group'; export * from './switch'; export * from './tabs'; export * as Tabs from './tabs/exports'; -export * from './table-of-contents'; \ No newline at end of file +export * from './table-of-contents'; diff --git a/src/lib/components/popover/index.ts b/src/lib/components/popover/index.ts index 4cc61019..a4467555 100644 --- a/src/lib/components/popover/index.ts +++ b/src/lib/components/popover/index.ts @@ -1,2 +1 @@ - -// export { default as Popover } from './popover.svelte'; \ No newline at end of file +// export { default as Popover } from './popover.svelte'; diff --git a/src/lib/components/radio-group/index.ts b/src/lib/components/radio-group/index.ts index b43085f7..6a1faac9 100644 --- a/src/lib/components/radio-group/index.ts +++ b/src/lib/components/radio-group/index.ts @@ -1,5 +1,4 @@ - export { default as RadioGroup } from './radio-group.svelte'; export { default as RadioGroupRegular } from './radio-group-regular.svelte'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/radio-group/radio-group.svelte b/src/lib/components/radio-group/radio-group.svelte index 4f88eeb9..30817b7f 100644 --- a/src/lib/components/radio-group/radio-group.svelte +++ b/src/lib/components/radio-group/radio-group.svelte @@ -74,7 +74,7 @@ } -
+
{#each updated_items as { value, label, subLabel, icon, uid }} {@const active = $isChecked(value)} {@const styles = $isChecked(value) ? bgActiveStyles : bgStyles} diff --git a/src/lib/components/radio-group/types.ts b/src/lib/components/radio-group/types.ts index a9233e90..f420718f 100644 --- a/src/lib/components/radio-group/types.ts +++ b/src/lib/components/radio-group/types.ts @@ -1,18 +1,20 @@ - export type RadioItem = { - value: string; - label: string; - subLabel?: string; - icon?: string; -} + value: string; + label: string; + subLabel?: string; + icon?: string; +}; export type RegularRadioItem = { - value: string; - label: string; -} + value: string; + label: string; +}; export type RadioItemSize = 'sm' | 'md' | 'lg'; export type RadioGroupOrientation = 'horizontal' | 'vertical'; -export type RegularRadioItemSizeDefinitions = Record; \ No newline at end of file +export type RegularRadioItemSizeDefinitions = Record< + RadioItemSize, + { out: string; in: string; text: string } +>; diff --git a/src/lib/components/switch/index.ts b/src/lib/components/switch/index.ts index c6f0fdf2..4b1bc8d7 100644 --- a/src/lib/components/switch/index.ts +++ b/src/lib/components/switch/index.ts @@ -1,4 +1,3 @@ - export { default as Switch } from './switch.svelte'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/lib/components/switch/switch.svelte b/src/lib/components/switch/switch.svelte index 174be04a..955d0ef9 100644 --- a/src/lib/components/switch/switch.svelte +++ b/src/lib/components/switch/switch.svelte @@ -1,7 +1,7 @@
- \ No newline at end of file diff --git a/src/lib/components/tabs/types.ts b/src/lib/components/tabs/types.ts index 9024af9a..afddc5aa 100644 --- a/src/lib/components/tabs/types.ts +++ b/src/lib/components/tabs/types.ts @@ -1,10 +1,9 @@ import type { Writable } from 'svelte/store'; export type TabHeader = { - key: string, - title: string, - icon?: string, + key: string; + title: string; + icon?: string; }; export type TabValue = Writable; - diff --git a/src/lib/index.ts b/src/lib/index.ts index 8afd2028..cd57831e 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,2 +1,2 @@ // Components -export * from './components'; \ No newline at end of file +export * from './components'; diff --git a/src/lib/preset/_rules/animation.ts b/src/lib/preset/_rules/animation.ts index d2b30efa..a2a7f152 100644 --- a/src/lib/preset/_rules/animation.ts +++ b/src/lib/preset/_rules/animation.ts @@ -1,24 +1,28 @@ import type { Rule } from '@unocss/core'; -import type { Theme } from "@unocss/preset-wind"; +import type { Theme } from '@unocss/preset-wind'; export const animationRules: Rule[] = [ - [ - 'fill-mode-both', { - 'animation-fill-mode': 'both', - } - ] + [ + 'fill-mode-both', + { + 'animation-fill-mode': 'both' + } + ] ]; export const animation = { - keyframes: { - rotate360: '{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}', - rotateSquare360: '{0% {transform: rotate(0deg)} 50% {transform: rotate(360deg)} 100% {transform: rotate(0deg)}}', - layers1: "{0% {box-shadow: 0px 0px 0 0px} 90%, 100% {box-shadow: 20px 20px 0 -4px}}", - layerTr: "{0% {transform: translate(0, 0) scale(1)} 100% {transform: translate(-25px, -25px) scale(1)}}", - flipXY: `{0% {transform: perspective(200px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(200px) rotateX(-180deg) rotateY(0deg)} 100% {transform: perspective(200px) rotateX(-180deg) rotateY(-180deg)}}`, - barSlide: "{0% {transform: translateX(40px)} 50% {transform: translateX(-30px)} 100% {transform: translateX(40px)}}", - squareShapeShift: `{ + keyframes: { + rotate360: '{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}', + rotateSquare360: + '{0% {transform: rotate(0deg)} 50% {transform: rotate(360deg)} 100% {transform: rotate(0deg)}}', + layers1: '{0% {box-shadow: 0px 0px 0 0px} 90%, 100% {box-shadow: 20px 20px 0 -4px}}', + layerTr: + '{0% {transform: translate(0, 0) scale(1)} 100% {transform: translate(-25px, -25px) scale(1)}}', + flipXY: `{0% {transform: perspective(200px) rotateX(0deg) rotateY(0deg)} 50% {transform: perspective(200px) rotateX(-180deg) rotateY(0deg)} 100% {transform: perspective(200px) rotateX(-180deg) rotateY(-180deg)}}`, + barSlide: + '{0% {transform: translateX(40px)} 50% {transform: translateX(-30px)} 100% {transform: translateX(40px)}}', + squareShapeShift: `{ 0% {border-radius: 50%;} 12.5% {border-radius: 0 50% 50% 50%; transform: rotate(45deg);} 25% {border-radius: 0 0 50% 50%; transform: rotate(90deg);} @@ -29,54 +33,54 @@ export const animation = { 87.5% {border-radius: 50% 50% 50% 0; transform: rotate(315deg);} 100% {border-radius: 50%; transform: rotate(360deg);} }`, - foldingSquares2: `{ + foldingSquares2: `{ 0% {transform: translate(0, 0) rotateX(0) rotateY(0);} 25% {transform: translate(100%, 0) rotateX(0) rotateY(180deg);} 50% {transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);} 75% {transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);} 100% {transform: translate(0, 0) rotateX(0) rotateY(360deg);} }`, - // 0%, 80%, 100% {box-shadow: 0 2.5em 0 -1.3em} - // 40% {box-shadow: 0 2.5em 0 0} - // 0%, 80%, 100% {box-shadow: 0 0 0 -1.3em} - // 40% {box-shadow: 0 0 0 0} - // 0%, 80%, 100% {transform: scale(1, 1)} - // 40% {transform: scale(0.1, 0.1)} - bblFadeInOut: `{ + // 0%, 80%, 100% {box-shadow: 0 2.5em 0 -1.3em} + // 40% {box-shadow: 0 2.5em 0 0} + // 0%, 80%, 100% {box-shadow: 0 0 0 -1.3em} + // 40% {box-shadow: 0 0 0 0} + // 0%, 80%, 100% {transform: scale(1, 1)} + // 40% {transform: scale(0.1, 0.1)} + bblFadeInOut: `{ 0%, 20%, 80%, 100% {opacity: 1} 40% {opacity: 0.2} 60% {opacity: 0.6} - }`, - }, - counts: { - rotate360: 'infinite', - rotateSquare360: 'infinite', - layers1: 'infinite', - layerTr: 'infinite', - flipXY: 'infinite', - barSlide: 'infinite', - squareShapeShift: 'infinite', - foldingSquares1: 'infinite', - foldingSquares2: 'infinite', - bblFadeInOut: 'infinite', - }, - timingFns: { - rotateSquare360: 'ease', - barSlide: 'ease-in-out', - foldingSquares: 'ease', - foldingSquares2: 'ease', - bblFadeInOut: 'ease-in-out', - }, - durations: { - rotate360: '1.1s', - rotateSquare360: '4s', - layers1: '1s', - layerTr: '1s', - flipXY: '1.2s', - barSlide: '1.8s', - squareShapeShift: '2s', - foldingSquares1: '4s', - foldingSquares2: '2s', - bblFadeInOut: '1.8s', - } -} satisfies Theme['animation']; \ No newline at end of file + }` + }, + counts: { + rotate360: 'infinite', + rotateSquare360: 'infinite', + layers1: 'infinite', + layerTr: 'infinite', + flipXY: 'infinite', + barSlide: 'infinite', + squareShapeShift: 'infinite', + foldingSquares1: 'infinite', + foldingSquares2: 'infinite', + bblFadeInOut: 'infinite' + }, + timingFns: { + rotateSquare360: 'ease', + barSlide: 'ease-in-out', + foldingSquares: 'ease', + foldingSquares2: 'ease', + bblFadeInOut: 'ease-in-out' + }, + durations: { + rotate360: '1.1s', + rotateSquare360: '4s', + layers1: '1s', + layerTr: '1s', + flipXY: '1.2s', + barSlide: '1.8s', + squareShapeShift: '2s', + foldingSquares1: '4s', + foldingSquares2: '2s', + bblFadeInOut: '1.8s' + } +} satisfies Theme['animation']; diff --git a/src/lib/preset/_rules/background.ts b/src/lib/preset/_rules/background.ts index b76a1868..4535e72b 100644 --- a/src/lib/preset/_rules/background.ts +++ b/src/lib/preset/_rules/background.ts @@ -1,15 +1,28 @@ import type { Rule, Shortcut } from '@unocss/core'; import { allColorsJ } from '../../types/colors'; -import { default_dir, reg_dO, reg_c, reg_s, reg_c_sO, cs, reg_c_sO_oO, cso, reg_sO, reg_oO, reg_num, reg_d } from '../utils/regex'; +import { + default_dir, + reg_dO, + reg_c, + reg_s, + reg_c_sO, + cs, + reg_c_sO_oO, + cso, + reg_sO, + reg_oO, + reg_num, + reg_d +} from '../utils/regex'; import { parse_opacity } from '../utils/regex'; export const backgroundRules: Rule[] = [ - // Scrollbar - [ - /^scrollbar-none$/, - ([n]: string[]) => - ` + // Scrollbar + [ + /^scrollbar-none$/, + ([n]: string[]) => + ` .${n}::-webkit-scrollbar { display: none; } @@ -18,120 +31,136 @@ export const backgroundRules: Rule[] = [ scrollbar-width: none; } ` - ], - // Radial background gradients - [ - new RegExp(`^bg-radial-${reg_c_sO}-${reg_c_sO}$`), - ([, c1, s1, c2, s2]: string[]) => ({ - "background": `radial-gradient(rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs(c2, s2)})))` - }) - ], - [ - new RegExp(`^bg-radial-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - ([, c1, s1, c2, s2, c3, s3]: string[]) => ({ - "background": `radial-gradient(rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs(c2, s2)})), rgb(var(--color-${cs(c3, s3)})))` - }), - { - autocomplete: [ - `bg-radial`, - `bg-radial-${reg_c}`, - `bg-radial-${reg_c}-${reg_c}`, - `bg-radial-${reg_c}-${reg_s}`, - `bg-radial-${reg_c}-${reg_s}-${reg_c}`, - `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}`, - `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - ] - } - ], - // Mesh background - [ - new RegExp(`^bg-mesh(?:-${reg_c_sO_oO}-x${reg_num}-y${reg_num})+$`), - (matches) => { - const regex = new RegExp(`${reg_c_sO_oO}-x${reg_num}-y${reg_num}`, 'g'); - const meshes = [...matches[0].matchAll(regex)]; + ], + // Radial background gradients + [ + new RegExp(`^bg-radial-${reg_c_sO}-${reg_c_sO}$`), + ([, c1, s1, c2, s2]: string[]) => ({ + background: `radial-gradient(rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs( + c2, + s2 + )})))` + }) + ], + [ + new RegExp(`^bg-radial-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + ([, c1, s1, c2, s2, c3, s3]: string[]) => ({ + background: `radial-gradient(rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs( + c2, + s2 + )})), rgb(var(--color-${cs(c3, s3)})))` + }), + { + autocomplete: [ + `bg-radial`, + `bg-radial-${reg_c}`, + `bg-radial-${reg_c}-${reg_c}`, + `bg-radial-${reg_c}-${reg_s}`, + `bg-radial-${reg_c}-${reg_s}-${reg_c}`, + `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, + `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}`, + `bg-radial-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], + // Mesh background + [ + new RegExp(`^bg-mesh(?:-${reg_c_sO_oO}-x${reg_num}-y${reg_num})+$`), + (matches) => { + const regex = new RegExp(`${reg_c_sO_oO}-x${reg_num}-y${reg_num}`, 'g'); + const meshes = [...matches[0].matchAll(regex)]; - let bg_image = ''; + let bg_image = ''; - for (let i = 0; i < meshes.length; i++) { - const [ , c, s, o, x, y ] = meshes[i]; + for (let i = 0; i < meshes.length; i++) { + const [, c, s, o, x, y] = meshes[i]; - bg_image += `radial-gradient(at ${x}% ${y}%, rgba(var(--color-${cs(c, s)}), ${parse_opacity(o, '0.3')}) 0px, transparent 50%)`; + bg_image += `radial-gradient(at ${x}% ${y}%, rgba(var(--color-${cs(c, s)}), ${parse_opacity( + o, + '0.3' + )}) 0px, transparent 50%)`; - bg_image += i + 1 === meshes.length ? ';' : ', '; - } + bg_image += i + 1 === meshes.length ? ';' : ', '; + } - return { - "background-image": bg_image - }; - }, - { - autocomplete: [ - `bg-mesh`, - `bg-mesh-${reg_c}`, - `bg-mesh-${reg_c}-x`, - `bg-mesh-${reg_c}-x-y`, - `bg-mesh-${reg_c}-x-y-${reg_c}`, - `bg-mesh-${reg_c}-x-y-${reg_c}-x`, - `bg-mesh-${reg_c}-x-y-${reg_c}-x-y`, - `bg-mesh-${reg_c}-x-y-${reg_c}-x-y-${reg_c}`, - ] - } - ] + return { + 'background-image': bg_image + }; + }, + { + autocomplete: [ + `bg-mesh`, + `bg-mesh-${reg_c}`, + `bg-mesh-${reg_c}-x`, + `bg-mesh-${reg_c}-x-y`, + `bg-mesh-${reg_c}-x-y-${reg_c}`, + `bg-mesh-${reg_c}-x-y-${reg_c}-x`, + `bg-mesh-${reg_c}-x-y-${reg_c}-x-y`, + `bg-mesh-${reg_c}-x-y-${reg_c}-x-y-${reg_c}` + ] + } + ] ]; export const backgroundSCs: Shortcut[] = [ - // Background + text on background - [ - new RegExp(`^${reg_c}-${reg_s}${reg_oO}$`), - ([, c, s, o]) => `bg-${cso(c, s, o)} text-on-${cs(c, s)}` - ], - [ - new RegExp(`^${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c, s1, o1, s2, o2]) => `bg-${cso(c, s1, o1)} text-on-${cs(c, s1)} dark:(bg-${cso(c, s2, o2)} text-on-${cs(c, s2)})` - ], + // Background + text on background + [ + new RegExp(`^${reg_c}-${reg_s}${reg_oO}$`), + ([, c, s, o]) => `bg-${cso(c, s, o)} text-on-${cs(c, s)}` + ], + [ + new RegExp(`^${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c, s1, o1, s2, o2]) => + `bg-${cso(c, s1, o1)} text-on-${cs(c, s1)} dark:(bg-${cso(c, s2, o2)} text-on-${cs(c, s2)})` + ], - // Background Tokens - // ([, b, s1, s2]: string[]) => `bg-${cs(b, s1)} dark:bg-${cs(b, s2)}`, - [ - new RegExp(`^bg-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c, s1, o1, s2, o2]: string[]) => `bg-${cso(c, s1, o1)} dark:bg-${cso(c, s2, o2)}`, - // ([, b, s1, o1, s2, o2]: string[]) => `${cs(b, s1)}${o1 ? `/${o1}` : ''} dark:${cs(b, s2)}${o2 ? `/${o2}` : ''}`, - ], + // Background Tokens + // ([, b, s1, s2]: string[]) => `bg-${cs(b, s1)} dark:bg-${cs(b, s2)}`, + [ + new RegExp(`^bg-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c, s1, o1, s2, o2]: string[]) => `bg-${cso(c, s1, o1)} dark:bg-${cso(c, s2, o2)}` + // ([, b, s1, o1, s2, o2]: string[]) => `${cs(b, s1)}${o1 ? `/${o1}` : ''} dark:${cs(b, s2)}${o2 ? `/${o2}` : ''}`, + ], - // Background Inverse Tokens - [ - new RegExp(`^bg-inverse-(${allColorsJ})${reg_sO}${reg_oO}-(${allColorsJ})${reg_sO}${reg_oO}$`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `bg-${cso(c1, s1, o1)} dark:bg-${cso(c2, s2, o2)}`, - { - autocomplete: [ - `bg-inverse`, - `bg-inverse-(${allColorsJ})`, - `bg-inverse-(${allColorsJ})-${reg_s}`, - `bg-inverse-(${allColorsJ})-${reg_s}-(${allColorsJ})`, - ] - } - ], + // Background Inverse Tokens + [ + new RegExp(`^bg-inverse-(${allColorsJ})${reg_sO}${reg_oO}-(${allColorsJ})${reg_sO}${reg_oO}$`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => `bg-${cso(c1, s1, o1)} dark:bg-${cso(c2, s2, o2)}`, + { + autocomplete: [ + `bg-inverse`, + `bg-inverse-(${allColorsJ})`, + `bg-inverse-(${allColorsJ})-${reg_s}`, + `bg-inverse-(${allColorsJ})-${reg_s}-(${allColorsJ})` + ] + } + ], - // Background gradients - [ - new RegExp(`^bg-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2]: string[]) => `bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, o1)} to-${cso(c2, s2, o2)}` - ], - [ - new RegExp(`^bg-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => `bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, o1)} via-${cso(c2, s2, o2)} to-${cso(c3, s3, o3)}`, - { - autocomplete: [ - 'bg-gradient', - `bg-gradient-${reg_d}`, - `bg-gradient-${reg_c}`, - `bg-gradient-${reg_d}-${reg_c}`, - `bg-gradient-${reg_c}-${reg_c}`, - `bg-gradient-${reg_d}-${reg_c}-${reg_c}`, - `bg-gradient-${reg_c}-${reg_c}-${reg_c}`, - `bg-gradient-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, - ] - } - ], -] \ No newline at end of file + // Background gradients + [ + new RegExp(`^bg-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2]: string[]) => + `bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, o1)} to-${cso(c2, s2, o2)}` + ], + [ + new RegExp(`^bg-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => + `bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, o1)} via-${cso(c2, s2, o2)} to-${cso( + c3, + s3, + o3 + )}`, + { + autocomplete: [ + 'bg-gradient', + `bg-gradient-${reg_d}`, + `bg-gradient-${reg_c}`, + `bg-gradient-${reg_d}-${reg_c}`, + `bg-gradient-${reg_c}-${reg_c}`, + `bg-gradient-${reg_d}-${reg_c}-${reg_c}`, + `bg-gradient-${reg_c}-${reg_c}-${reg_c}`, + `bg-gradient-${reg_d}-${reg_c}-${reg_c}-${reg_c}` + ] + } + ] +]; diff --git a/src/lib/preset/_rules/border.ts b/src/lib/preset/_rules/border.ts index 63ecff63..7ad36e6a 100644 --- a/src/lib/preset/_rules/border.ts +++ b/src/lib/preset/_rules/border.ts @@ -3,96 +3,96 @@ import type { Shortcut } from '@unocss/core'; import { cso, reg_c, reg_c_sO_oO, reg_oO, reg_p, reg_pO, reg_s } from '../utils/regex'; export const borderSCs: Shortcut[] = [ - // rounded container - [ - new RegExp(`^rounded-container${reg_pO}$`), - ([, p]: string[]) => `rounded-${p ? `${p}-` : ''}[var(--ato-container-radius)]`, - { - autocomplete: [ - 'rounded-container', - `rounded-container-${reg_p}` - ] - } - ], - [ - new RegExp(`rounded-btn${reg_pO}`), - ([, side]: string[]) => `rounded-${side ? `${side}-` : ''}[var(--btn-radius)]`, - ], - [ - new RegExp(`rounded-btn-icon${reg_pO}`), - ([, side]: string[]) => `rounded-${side ? `${side}-` : ''}[var(--btn-icon-radius)]!`, - { - autocomplete: [ - 'rounded-btn', - 'rounded-btn-icon', - `rounded-btn-${reg_p}`, - `rounded-btn-icon-${reg_p}` - ] - } - ], + // rounded container + [ + new RegExp(`^rounded-container${reg_pO}$`), + ([, p]: string[]) => `rounded-${p ? `${p}-` : ''}[var(--ato-container-radius)]`, + { + autocomplete: ['rounded-container', `rounded-container-${reg_p}`] + } + ], + [ + new RegExp(`rounded-btn${reg_pO}`), + ([, side]: string[]) => `rounded-${side ? `${side}-` : ''}[var(--btn-radius)]` + ], + [ + new RegExp(`rounded-btn-icon${reg_pO}`), + ([, side]: string[]) => `rounded-${side ? `${side}-` : ''}[var(--btn-icon-radius)]!`, + { + autocomplete: [ + 'rounded-btn', + 'rounded-btn-icon', + `rounded-btn-${reg_p}`, + `rounded-btn-icon-${reg_p}` + ] + } + ], - // Border light - dark - [ - new RegExp(`^border-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c1, s1, o1, s2, o2]: string[]) => `border-${cso(c1, s1, o1)} dark:border-${cso(c1, s2, o2)}`, - { - autocomplete: [ - `border-${reg_c}`, - `border-${reg_c}-${reg_s}`, - `border-${reg_c}-${reg_s}/`, - `border-${reg_c}-${reg_s}-${reg_s}`, - `border-${reg_c}-${reg_s}/-${reg_s}`, - `border-${reg_c}-${reg_s}-${reg_s}/`, - `border-${reg_c}-${reg_s}/-${reg_s}/`, - ] - } - ], + // Border light - dark + [ + new RegExp(`^border-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c1, s1, o1, s2, o2]: string[]) => + `border-${cso(c1, s1, o1)} dark:border-${cso(c1, s2, o2)}`, + { + autocomplete: [ + `border-${reg_c}`, + `border-${reg_c}-${reg_s}`, + `border-${reg_c}-${reg_s}/`, + `border-${reg_c}-${reg_s}-${reg_s}`, + `border-${reg_c}-${reg_s}/-${reg_s}`, + `border-${reg_c}-${reg_s}-${reg_s}/`, + `border-${reg_c}-${reg_s}/-${reg_s}/` + ] + } + ], - // Ring light - dark - [ - new RegExp(`^ring-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c1, s1, o1, s2, o2]: string[]) => `ring-${cso(c1, s1, o1)} dark:ring-${cso(c1, s2, o2)}`, - { - autocomplete: [ - `ring-${reg_c}`, - `ring-${reg_c}-${reg_s}`, - `ring-${reg_c}-${reg_s}`, - `ring-${reg_c}-${reg_s}-${reg_s}`, - ] - } - ], + // Ring light - dark + [ + new RegExp(`^ring-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c1, s1, o1, s2, o2]: string[]) => `ring-${cso(c1, s1, o1)} dark:ring-${cso(c1, s2, o2)}`, + { + autocomplete: [ + `ring-${reg_c}`, + `ring-${reg_c}-${reg_s}`, + `ring-${reg_c}-${reg_s}`, + `ring-${reg_c}-${reg_s}-${reg_s}` + ] + } + ], - // Border inverse light - dark - [ - new RegExp(`^border-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `border-${cso(c1, s1, o1)} dark:border-${cso(c2, s2, o2)}`, - { - autocomplete: [ - `border-inverse`, - `border-inverse-${reg_c}`, - `border-inverse-${reg_c}-${reg_c}`, - `border-inverse-${reg_c}-${reg_s}`, - `border-inverse-${reg_c}-${reg_s}-${reg_c}`, - `border-inverse-${reg_c}-${reg_c}-${reg_s}`, - `border-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - ] - } - ], + // Border inverse light - dark + [ + new RegExp(`^border-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `border-${cso(c1, s1, o1)} dark:border-${cso(c2, s2, o2)}`, + { + autocomplete: [ + `border-inverse`, + `border-inverse-${reg_c}`, + `border-inverse-${reg_c}-${reg_c}`, + `border-inverse-${reg_c}-${reg_s}`, + `border-inverse-${reg_c}-${reg_s}-${reg_c}`, + `border-inverse-${reg_c}-${reg_c}-${reg_s}`, + `border-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], - // Ring inverse light - dark - [ - new RegExp(`^ring-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `ring-${cso(c1, s1, o1)} dark:ring-${cso(c2, s2, o2)}`, - { - autocomplete: [ - `ring-inverse`, - `ring-inverse-${reg_c}`, - `ring-inverse-${reg_c}-${reg_c}`, - `ring-inverse-${reg_c}-${reg_s}`, - `ring-inverse-${reg_c}-${reg_s}-${reg_c}`, - `ring-inverse-${reg_c}-${reg_c}-${reg_s}`, - `ring-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - ] - } - ], -] \ No newline at end of file + // Ring inverse light - dark + [ + new RegExp(`^ring-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `ring-${cso(c1, s1, o1)} dark:ring-${cso(c2, s2, o2)}`, + { + autocomplete: [ + `ring-inverse`, + `ring-inverse-${reg_c}`, + `ring-inverse-${reg_c}-${reg_c}`, + `ring-inverse-${reg_c}-${reg_s}`, + `ring-inverse-${reg_c}-${reg_s}-${reg_c}`, + `ring-inverse-${reg_c}-${reg_c}-${reg_s}`, + `ring-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ] +]; diff --git a/src/lib/preset/_rules/buttons.ts b/src/lib/preset/_rules/buttons.ts index 1cdee267..3d7e7398 100644 --- a/src/lib/preset/_rules/buttons.ts +++ b/src/lib/preset/_rules/buttons.ts @@ -2,17 +2,29 @@ import type { Shortcut, Rule } from '@unocss/core'; import { directions } from '../../types/directions'; -import { reg_c, reg_c_sO, reg_c_sO_oO, cs, cso, name_c_sO_oO, reg_l, reg_dO, norm_op, reg_s, reg_d } from '../utils/regex'; +import { + reg_c, + reg_c_sO, + reg_c_sO_oO, + cs, + cso, + name_c_sO_oO, + reg_l, + reg_dO, + norm_op, + reg_s, + reg_d +} from '../utils/regex'; const sizes: { [key: string]: string } = { - // 'sm': 'py-1 px-2 text-sm font-medium', - // 'md': 'py-1 px-3 font-medium', - // 'lg': 'py-2 px-4 text-lg font-semibold', - // 'xl': 'py-3 px-6 text-xl font-bold' - 'sm': 'text-sm py-[--btn-sm-p-y] px-[--btn-sm-p-x] font-weight-[--btn-sm-font-weight]', - 'md': 'py-[--btn-md-p-y] px-[--btn-md-p-x] font-weight-[--btn-md-font-weight]', - 'lg': 'text-lg py-[--btn-lg-p-y] px-[--btn-lg-p-x] font-weight-[--btn-lg-font-weight]', - 'xl': 'text-xl py-[--btn-xl-p-y] px-[--btn-xl-p-x] font-weight-[--btn-xl-font-weight]' + // 'sm': 'py-1 px-2 text-sm font-medium', + // 'md': 'py-1 px-3 font-medium', + // 'lg': 'py-2 px-4 text-lg font-semibold', + // 'xl': 'py-3 px-6 text-xl font-bold' + sm: 'text-sm py-[--btn-sm-p-y] px-[--btn-sm-p-x] font-weight-[--btn-sm-font-weight]', + md: 'py-[--btn-md-p-y] px-[--btn-md-p-x] font-weight-[--btn-md-font-weight]', + lg: 'text-lg py-[--btn-lg-p-y] px-[--btn-lg-p-x] font-weight-[--btn-lg-font-weight]', + xl: 'text-xl py-[--btn-xl-p-y] px-[--btn-xl-p-x] font-weight-[--btn-xl-font-weight]' }; const disabledStyles = 'opacity-70 cursor-not-allowed scale-100'; @@ -33,162 +45,230 @@ const default_dir = 'r'; const gradientStyles = 'brightness-95 hover:(brightness-115)'; export const buttonRules: Rule[] = [ - // Gradient border: 2 colours - [ - new RegExp(`^border-gradient-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), - ([, bc, bs, bo, d, c1, s1, c2, s2]: string[]) => ({ - "background": `linear-gradient(to right, rgba(var(--color-${cs(bc, bs)}), ${bo ? norm_op(bo) : borderBaseOp}), rgba(var(--color-${cs(bc, bs)}), ${bo ? norm_op(bo) : borderBaseOp})), linear-gradient(to ${d ? directions[d] : 'right'}, rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs(c2, s2)})))`, - "background-clip": `padding-box, border-box`, - "background-origin": `padding-box, border-box`, - "border": "2px solid transparent", - }), - ], - // Gradient border: 3 colours - [ - new RegExp(`^border-gradient-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - ([, bc, bs, bo, d, c1, s1, c2, s2, c3, s3]: string[]) => ({ - "background": `linear-gradient(to right, rgba(var(--color-${cs(bc, bs)}), ${bo ? norm_op(bo) : borderBaseOp}), rgba(var(--color-${cs(bc, bs)}), ${bo ? norm_op(bo) : borderBaseOp})), linear-gradient(to ${d ? directions[d] : 'right'}, rgb(var(--color-${cs(c1, s1)})), rgb(var(--color-${cs(c2, s2)})), rgb(var(--color-${cs(c3, s3)})))`, - "background-clip": `padding-box, border-box`, - "background-origin": `padding-box, border-box`, - "border": "2px solid transparent", - }), - { - autocomplete: [ - `border-gradient`, - `border-gradient-${reg_c}`, - `border-gradient-${reg_c}-${reg_s}`, - `border-gradient-${reg_c}-${reg_s}-${reg_d}`, - `border-gradient-${reg_c}-${reg_d}`, - `border-gradient-${reg_c}-${reg_d}-${reg_c}`, - `border-gradient-${reg_c}-${reg_c}`, - `border-gradient-${reg_c}-${reg_d}-${reg_c}-${reg_c}`, - `border-gradient-${reg_c}-${reg_c}-${reg_c}`, - `border-gradient-${reg_c}-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, - `border-gradient-${reg_c}-${reg_c}-${reg_c}-${reg_c}`, - ] - } - ] + // Gradient border: 2 colours + [ + new RegExp(`^border-gradient-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), + ([, bc, bs, bo, d, c1, s1, c2, s2]: string[]) => ({ + background: `linear-gradient(to right, rgba(var(--color-${cs(bc, bs)}), ${ + bo ? norm_op(bo) : borderBaseOp + }), rgba(var(--color-${cs(bc, bs)}), ${ + bo ? norm_op(bo) : borderBaseOp + })), linear-gradient(to ${d ? directions[d] : 'right'}, rgb(var(--color-${cs( + c1, + s1 + )})), rgb(var(--color-${cs(c2, s2)})))`, + 'background-clip': `padding-box, border-box`, + 'background-origin': `padding-box, border-box`, + border: '2px solid transparent' + }) + ], + // Gradient border: 3 colours + [ + new RegExp(`^border-gradient-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + ([, bc, bs, bo, d, c1, s1, c2, s2, c3, s3]: string[]) => ({ + background: `linear-gradient(to right, rgba(var(--color-${cs(bc, bs)}), ${ + bo ? norm_op(bo) : borderBaseOp + }), rgba(var(--color-${cs(bc, bs)}), ${ + bo ? norm_op(bo) : borderBaseOp + })), linear-gradient(to ${d ? directions[d] : 'right'}, rgb(var(--color-${cs( + c1, + s1 + )})), rgb(var(--color-${cs(c2, s2)})), rgb(var(--color-${cs(c3, s3)})))`, + 'background-clip': `padding-box, border-box`, + 'background-origin': `padding-box, border-box`, + border: '2px solid transparent' + }), + { + autocomplete: [ + `border-gradient`, + `border-gradient-${reg_c}`, + `border-gradient-${reg_c}-${reg_s}`, + `border-gradient-${reg_c}-${reg_s}-${reg_d}`, + `border-gradient-${reg_c}-${reg_d}`, + `border-gradient-${reg_c}-${reg_d}-${reg_c}`, + `border-gradient-${reg_c}-${reg_c}`, + `border-gradient-${reg_c}-${reg_d}-${reg_c}-${reg_c}`, + `border-gradient-${reg_c}-${reg_c}-${reg_c}`, + `border-gradient-${reg_c}-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, + `border-gradient-${reg_c}-${reg_c}-${reg_c}-${reg_c}` + ] + } + ] ]; export const buttonSCs: Shortcut[] = [ - // Button size - [ - new RegExp(`^btn-${reg_l}$`), - ([, l]: string[]) => `${sizes[l]}`, - { - autocomplete: `btn-${reg_l}` - } - ], - - // Icon button - [ - 'btn-icon', `${baseStylesIcon} aspect-square` - ], - - // Button regular - [ - new RegExp(`^btn-${reg_c}$`), - ([, c]: string[]) => `${baseStyles} bg-${c}-500 text-on-${cs(c, '500')} hover:(bg-${c}-600 text-on-${c}-600) disabled:hover:(bg-${c}-500 text-on-${c}-500)`, - { - autocomplete: `btn-${reg_c}` - } - ], - - // Button glass - [ - new RegExp(`^btn-glass-${reg_c_sO_oO}$`), - ([, c, s, o]: string[]) => `${baseStyles} ${glassStyles} bg-${cso(c, s, `${o ?? glassOp}`)} text-on-${cs(c, s)} border-${cs(c, s)} hover:(bg-${cs(c, s)} text-on-${cs(c, s)}) disabled:hover:(bg-${cso(c, s, `${o ?? glassOp}`)} text-on-${cs(c, s)})` - ], - [ - new RegExp(`^btn-glass${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2]: string[]) => - `${baseStyles} ${glassStyles} bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, `${o1 ?? glassOp}`)} to-${cso(c2, s2, `${o2 ?? glassOp}`)} + // Button size + [ + new RegExp(`^btn-${reg_l}$`), + ([, l]: string[]) => `${sizes[l]}`, + { + autocomplete: `btn-${reg_l}` + } + ], + + // Icon button + ['btn-icon', `${baseStylesIcon} aspect-square`], + + // Button regular + [ + new RegExp(`^btn-${reg_c}$`), + ([, c]: string[]) => + `${baseStyles} bg-${c}-500 text-on-${cs( + c, + '500' + )} hover:(bg-${c}-600 text-on-${c}-600) disabled:hover:(bg-${c}-500 text-on-${c}-500)`, + { + autocomplete: `btn-${reg_c}` + } + ], + + // Button glass + [ + new RegExp(`^btn-glass-${reg_c_sO_oO}$`), + ([, c, s, o]: string[]) => + `${baseStyles} ${glassStyles} bg-${cso(c, s, `${o ?? glassOp}`)} text-on-${cs( + c, + s + )} border-${cs(c, s)} hover:(bg-${cs(c, s)} text-on-${cs(c, s)}) disabled:hover:(bg-${cso( + c, + s, + `${o ?? glassOp}` + )} text-on-${cs(c, s)})` + ], + [ + new RegExp(`^btn-glass${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2]: string[]) => + `${baseStyles} ${glassStyles} bg-gradient-to-${d ?? default_dir} from-${cso( + c1, + s1, + `${o1 ?? glassOp}` + )} to-${cso(c2, s2, `${o2 ?? glassOp}`)} text-on-${cs(c1, s1)} border-${cs(c1, s1)} hover:(from-${cs(c1, s1)} to-${cs(c2, s2)} text-on-${cs(c1, s1)}) - disabled:hover:(from-${cso(c1, s1, `${o1 ?? glassOp}`)} to-${cso(c2, s2, `${o2 ?? glassOp}`)})` - ], - [ - new RegExp(`^btn-glass${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => - `${baseStyles} ${glassStyles} bg-gradient-to-${d ?? default_dir} from-${cso(c1, s1, `${o1 ?? glassOp}`)} via-${cso(c2, s2, `${o2 ?? glassOp}`)} to-${cso(c3, s3, `${o3 ?? glassOp}`)} + disabled:hover:(from-${cso(c1, s1, `${o1 ?? glassOp}`)} to-${cso( + c2, + s2, + `${o2 ?? glassOp}` + )})` + ], + [ + new RegExp(`^btn-glass${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => + `${baseStyles} ${glassStyles} bg-gradient-to-${d ?? default_dir} from-${cso( + c1, + s1, + `${o1 ?? glassOp}` + )} via-${cso(c2, s2, `${o2 ?? glassOp}`)} to-${cso(c3, s3, `${o3 ?? glassOp}`)} text-on-${cs(c1, s1)} border-${cs(c1, s1)} hover:(from-${cs(c1, s1)} via-${cs(c2, s2)} to-${cs(c3, s3)}) - disabled:hover:(from-${cso(c1, s1, `${o1 ?? glassOp}`)} via-${cso(c2, s2, `${o2 ?? glassOp}`)} to-${cso(c3, s3, `${o3 ?? glassOp}`)})`, - { - autocomplete: [ - `btn-glass`, - `btn-glass-${reg_c}`, - `btn-glass-${reg_c}-${reg_s}`, - `btn-glass-${reg_d}-${reg_c}`, - `btn-glass-${reg_c}-${reg_c}`, - `btn-glass-${reg_d}-${reg_c}-${reg_c}`, - `btn-glass-${reg_c}-${reg_c}-${reg_c}`, - `btn-glass-${reg_d}-${reg_c}-${reg_c}-${reg_c}` - ] - } - ], - - // Button gradients: 2 colours - [ - new RegExp(`^btn-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2]: string[]) => `${baseStyles} ${gradientStyles} bg-gradient-to-${d ?? default_dir} text-on-${cs(c1, s1)} from-${cso(c1, s1, o1)} to-${cso(c2, s2, o2)}` - ], - // Button gradients: 3 colours - [ - new RegExp(`^btn-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => `${baseStyles} ${gradientStyles} bg-gradient-to-${d ?? default_dir} text-on-${cs(c1, s1)} from-${cso(c1, s1, o1)} via-${cso(c2, s2, o2)} to-${cso(c3, s3, o3)}`, - { - autocomplete: [ - `btn-gradient`, - `btn-gradient-${reg_d}`, - `btn-gradient-${reg_c}`, - `btn-gradient-${reg_c}-${reg_c}`, - `btn-gradient${reg_d}-${reg_c}`, - `btn-gradient${reg_d}-${reg_c}-${reg_c}`, - `btn-gradient${reg_d}-${reg_c}-${reg_c}-${reg_c}` - ] - } - ], - - // Button gradient border: 2 colours - [ - new RegExp(`^btn-border-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), - ([, bc, bs, bo, d, c1, s1, c2, s2]: string[]) => ` + disabled:hover:(from-${cso(c1, s1, `${o1 ?? glassOp}`)} via-${cso( + c2, + s2, + `${o2 ?? glassOp}` + )} to-${cso(c3, s3, `${o3 ?? glassOp}`)})`, + { + autocomplete: [ + `btn-glass`, + `btn-glass-${reg_c}`, + `btn-glass-${reg_c}-${reg_s}`, + `btn-glass-${reg_d}-${reg_c}`, + `btn-glass-${reg_c}-${reg_c}`, + `btn-glass-${reg_d}-${reg_c}-${reg_c}`, + `btn-glass-${reg_c}-${reg_c}-${reg_c}`, + `btn-glass-${reg_d}-${reg_c}-${reg_c}-${reg_c}` + ] + } + ], + + // Button gradients: 2 colours + [ + new RegExp(`^btn-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2]: string[]) => + `${baseStyles} ${gradientStyles} bg-gradient-to-${d ?? default_dir} text-on-${cs( + c1, + s1 + )} from-${cso(c1, s1, o1)} to-${cso(c2, s2, o2)}` + ], + // Button gradients: 3 colours + [ + new RegExp(`^btn-gradient${reg_dO}-${reg_c_sO_oO}-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, d, c1, s1, o1, c2, s2, o2, c3, s3, o3]: string[]) => + `${baseStyles} ${gradientStyles} bg-gradient-to-${d ?? default_dir} text-on-${cs( + c1, + s1 + )} from-${cso(c1, s1, o1)} via-${cso(c2, s2, o2)} to-${cso(c3, s3, o3)}`, + { + autocomplete: [ + `btn-gradient`, + `btn-gradient-${reg_d}`, + `btn-gradient-${reg_c}`, + `btn-gradient-${reg_c}-${reg_c}`, + `btn-gradient${reg_d}-${reg_c}`, + `btn-gradient${reg_d}-${reg_c}-${reg_c}`, + `btn-gradient${reg_d}-${reg_c}-${reg_c}-${reg_c}` + ] + } + ], + + // Button gradient border: 2 colours + [ + new RegExp(`^btn-border-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), + ([, bc, bs, bo, d, c1, s1, c2, s2]: string[]) => ` ${baseStyles} text-on-${cs(bc, bs)} - border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs(c2, s2)} - hover:(bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} to-${cs(c2, s2)} text-on-${cs(c1, s1)}) - disabled:hover:(text-on-${cs(bc, bs)} border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs(c2, s2)}!)` - ], - // Button gradient border: 3 colours - [ - new RegExp(`^btn-border-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - ([, bc, bs, bo, d, c1, s1, c2, s2, c3, s3]: string[]) => - `${baseStyles} + border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs( + c2, + s2 + )} + hover:(bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} to-${cs( + c2, + s2 + )} text-on-${cs(c1, s1)}) + disabled:hover:(text-on-${cs(bc, bs)} border-gradient-${name_c_sO_oO(bc, bs, bo)}-${ + d ?? default_dir + }-${cs(c1, s1)}-${cs(c2, s2)}!)` + ], + // Button gradient border: 3 colours + [ + new RegExp(`^btn-border-${reg_c_sO_oO}${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + ([, bc, bs, bo, d, c1, s1, c2, s2, c3, s3]: string[]) => + `${baseStyles} text-on-${cs(bc, bs)} - border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs(c2, s2)}-${cs(c3, s3)} - hover:(bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} via-${cs(c2, s2)} to-${cs(c3, s3)} text-on-${cs(c1, s1)}) - disabled:hover:(border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs(c2, s2)}-${cs(c3, s3)}!)`, - { - autocomplete: [ - `btn-border`, - `btn-border-${reg_c}`, - `btn-border-${reg_c}-${reg_s}`, - `btn-border-${reg_c}-${reg_s}-${reg_d}`, - `btn-border-${reg_c}-${reg_d}`, - `btn-border-${reg_c}-${reg_d}-${reg_c}`, - `btn-border-${reg_c}-${reg_d}-${reg_c}-${reg_c}`, - `btn-border-${reg_c}-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, - ] - } - ], - - // Button group horizontal & vertical & outline - [ - new RegExp(`btn-group(?:-(vertical))?(?:-(outline))?-${reg_c_sO}`), - ([, vert, out, c, s]: string[]) => ` + border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs(c1, s1)}-${cs( + c2, + s2 + )}-${cs(c3, s3)} + hover:(bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} via-${cs(c2, s2)} to-${cs( + c3, + s3 + )} text-on-${cs(c1, s1)}) + disabled:hover:(border-gradient-${name_c_sO_oO(bc, bs, bo)}-${d ?? default_dir}-${cs( + c1, + s1 + )}-${cs(c2, s2)}-${cs(c3, s3)}!)`, + { + autocomplete: [ + `btn-border`, + `btn-border-${reg_c}`, + `btn-border-${reg_c}-${reg_s}`, + `btn-border-${reg_c}-${reg_s}-${reg_d}`, + `btn-border-${reg_c}-${reg_d}`, + `btn-border-${reg_c}-${reg_d}-${reg_c}`, + `btn-border-${reg_c}-${reg_d}-${reg_c}-${reg_c}`, + `btn-border-${reg_c}-${reg_d}-${reg_c}-${reg_c}-${reg_c}` + ] + } + ], + + // Button group horizontal & vertical & outline + [ + new RegExp(`btn-group(?:-(vertical))?(?:-(outline))?-${reg_c_sO}`), + ([, vert, out, c, s]: string[]) => ` inline-flex ${vert ? 'flex-col' : ''} rounded-btn cursor-pointer - [&>button,&>a]:(px-4 py-2 inline-flex gap-1 justify-center items-center transition-all border-1 border-${cs(c, s)} bg-${cso(c, s, out ? '80' : '100')} text-on-${cs(c, s)} text-sm font-bold) + [&>button,&>a]:(px-4 py-2 inline-flex gap-1 justify-center items-center transition-all border-1 border-${cs( + c, + s + )} bg-${cso(c, s, out ? '80' : '100')} text-on-${cs(c, s)} text-sm font-bold) [&>button:disabled,&>a:disabled]:(cursor-not-allowed text-on-${cs(c, s)} opacity-25) [&>button:disabled:hover,&>a:disabled:hover]:(bg-${cs(c, s)} text-on-${cs(c, s)}) [&>button:hover,&>a:hover]:(bg-${cso(c, s, out ? '100' : '70')}) @@ -197,17 +277,17 @@ export const buttonSCs: Shortcut[] = [ [&>button:first-child,&>a:first-child]:(rounded-${vert ? 't' : 'l'}-[var(--btn-radius)]) [&>button:last-child,&>a:last-child]:(rounded-${vert ? 'b' : 'r'}-[var(--btn-radius)]) `, - { - autocomplete: [ - 'btn-group', - 'btn-group-vertical', - 'btn-group-vertical-outline', - 'btn-group-outline', - `btn-group-${reg_c}`, - `btn-group-vertical-${reg_c}`, - `btn-group-outline-${reg_c}`, - `btn-group-vertical-outline-${reg_c}`, - ] - } - ], -]; \ No newline at end of file + { + autocomplete: [ + 'btn-group', + 'btn-group-vertical', + 'btn-group-vertical-outline', + 'btn-group-outline', + `btn-group-${reg_c}`, + `btn-group-vertical-${reg_c}`, + `btn-group-outline-${reg_c}`, + `btn-group-vertical-outline-${reg_c}` + ] + } + ] +]; diff --git a/src/lib/preset/_rules/cards.ts b/src/lib/preset/_rules/cards.ts index 8c852d00..670a7380 100644 --- a/src/lib/preset/_rules/cards.ts +++ b/src/lib/preset/_rules/cards.ts @@ -2,4 +2,4 @@ import type { Shortcut } from '@unocss/core'; // import { allColorsJoined, themeColorsJoined, colorValuesJoined } from '../../types/colors.d'; -export const cardSCs: Shortcut[] = [] \ No newline at end of file +export const cardSCs: Shortcut[] = []; diff --git a/src/lib/preset/_rules/chips.ts b/src/lib/preset/_rules/chips.ts index c00044fe..c0c6cd3e 100644 --- a/src/lib/preset/_rules/chips.ts +++ b/src/lib/preset/_rules/chips.ts @@ -2,4 +2,4 @@ import type { Shortcut } from '@unocss/core'; // import { allColorsJoined, themeColorsJoined, colorValuesJoined } from '../../types/colors.d'; -export const chipSCs: Shortcut[] = [] \ No newline at end of file +export const chipSCs: Shortcut[] = []; diff --git a/src/lib/preset/_rules/convenience.ts b/src/lib/preset/_rules/convenience.ts index cace7abf..2c83dc0e 100644 --- a/src/lib/preset/_rules/convenience.ts +++ b/src/lib/preset/_rules/convenience.ts @@ -1,20 +1,20 @@ import type { Shortcut } from '@unocss/core'; export const convenienceSCs: Shortcut[] = [ - // TODO: Attributify mode inside class: text-[red,2xl,lg:5xl] turns into text-red text-2xl lg:text-5xl - // [ - // // /^(\w+)-\{(.*)\}$/, - // /^(\w+)-\((.*)\)$/, - // // /^(\w+)-\{((?:[:a-zA-Z0-9]*,\s)+[:a-zA-Z0-9]+)\}$/, - // ([, category, multiple]) => { - // const elements = multiple.replace(/\s+/g,' ').trim().split(','); - // let classes: string[] = []; - // elements.forEach((v) => { - // const parts = v.split(':') - // if (parts.length === 2) { classes.push(`${parts[0]}:${category}-${parts[1]}`); } - // else { classes.push(`${category}-${v.trim()}`); } - // }); - // return classes.join(' '); - // } - // ], -] \ No newline at end of file + // TODO: Attributify mode inside class: text-[red,2xl,lg:5xl] turns into text-red text-2xl lg:text-5xl + // [ + // // /^(\w+)-\{(.*)\}$/, + // /^(\w+)-\((.*)\)$/, + // // /^(\w+)-\{((?:[:a-zA-Z0-9]*,\s)+[:a-zA-Z0-9]+)\}$/, + // ([, category, multiple]) => { + // const elements = multiple.replace(/\s+/g,' ').trim().split(','); + // let classes: string[] = []; + // elements.forEach((v) => { + // const parts = v.split(':') + // if (parts.length === 2) { classes.push(`${parts[0]}:${category}-${parts[1]}`); } + // else { classes.push(`${category}-${v.trim()}`); } + // }); + // return classes.join(' '); + // } + // ], +]; diff --git a/src/lib/preset/_rules/image.ts b/src/lib/preset/_rules/image.ts index 3f0c4e13..ac1002dd 100644 --- a/src/lib/preset/_rules/image.ts +++ b/src/lib/preset/_rules/image.ts @@ -1,15 +1,15 @@ import type { Rule } from '@unocss/core'; export const imageRules: Rule[] = [ - [ - 'drag-none', - { - 'user-drag': 'none', - '-webkit-user-drag': 'none', - 'user-select': 'none', - '-moz-user-select': 'none', - '-webkit-user-select': 'none', - '-ms-user-select': 'none', - } - ], -]; \ No newline at end of file + [ + 'drag-none', + { + 'user-drag': 'none', + '-webkit-user-drag': 'none', + 'user-select': 'none', + '-moz-user-select': 'none', + '-webkit-user-select': 'none', + '-ms-user-select': 'none' + } + ] +]; diff --git a/src/lib/preset/_rules/index.ts b/src/lib/preset/_rules/index.ts index 4eced2e4..7cb9df2f 100644 --- a/src/lib/preset/_rules/index.ts +++ b/src/lib/preset/_rules/index.ts @@ -16,23 +16,23 @@ import { textRules, textSCs } from './text'; export { animation } from './animation'; export const rules: Rule[] = [ - ...animationRules, - ...backgroundRules, - ...buttonRules, - ...imageRules, - ...spinnerRules, - ...textRules, + ...animationRules, + ...backgroundRules, + ...buttonRules, + ...imageRules, + ...spinnerRules, + ...textRules ]; export const shortcuts: Shortcut[] = [ - ...backgroundSCs, - ...borderSCs, - ...buttonSCs, - // ...cardSCs, - // ...chipSCs, - // ...convenienceSCs, - ...shadowSCs, - ...spinnerSCs, - ...svgSCs, - ...textSCs -]; \ No newline at end of file + ...backgroundSCs, + ...borderSCs, + ...buttonSCs, + // ...cardSCs, + // ...chipSCs, + // ...convenienceSCs, + ...shadowSCs, + ...spinnerSCs, + ...svgSCs, + ...textSCs +]; diff --git a/src/lib/preset/_rules/shadow.ts b/src/lib/preset/_rules/shadow.ts index acaee94f..953b289f 100644 --- a/src/lib/preset/_rules/shadow.ts +++ b/src/lib/preset/_rules/shadow.ts @@ -3,33 +3,34 @@ import type { Shortcut } from '@unocss/core'; import { cso, reg_c, reg_c_sO_oO, reg_oO, reg_s } from '../utils/regex'; export const shadowSCs: Shortcut[] = [ - // Shadow light - dark - [ - new RegExp(`^shadow-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c, s1, o1, s2, o2]: string[]) => `shadow-${cso(c, s1, o1)} dark:shadow-${cso(c, s2, o2)}`, - { - autocomplete: [ - `shadow-${reg_c}`, - `shadow-${reg_c}-${reg_s}`, - `shadow-${reg_c}-${reg_s}-${reg_s}`, - ] - } - ], + // Shadow light - dark + [ + new RegExp(`^shadow-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c, s1, o1, s2, o2]: string[]) => `shadow-${cso(c, s1, o1)} dark:shadow-${cso(c, s2, o2)}`, + { + autocomplete: [ + `shadow-${reg_c}`, + `shadow-${reg_c}-${reg_s}`, + `shadow-${reg_c}-${reg_s}-${reg_s}` + ] + } + ], - // Shadow inverse light - dark - [ - new RegExp(`^shadow-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `shadow-${cso(c1, s1, o1)} dark:shadow-${cso(c2, s2, o2)}`, - { - autocomplete: [ - 'shadow-inverse', - `shadow-inverse-${reg_c}`, - `shadow-inverse-${reg_c}-${reg_c}`, - `shadow-inverse-${reg_c}-${reg_s}`, - `shadow-inverse-${reg_c}-${reg_s}-${reg_c}`, - `shadow-inverse-${reg_c}-${reg_c}-${reg_s}`, - `shadow-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - ] - } - ] -] \ No newline at end of file + // Shadow inverse light - dark + [ + new RegExp(`^shadow-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `shadow-${cso(c1, s1, o1)} dark:shadow-${cso(c2, s2, o2)}`, + { + autocomplete: [ + 'shadow-inverse', + `shadow-inverse-${reg_c}`, + `shadow-inverse-${reg_c}-${reg_c}`, + `shadow-inverse-${reg_c}-${reg_s}`, + `shadow-inverse-${reg_c}-${reg_s}-${reg_c}`, + `shadow-inverse-${reg_c}-${reg_c}-${reg_s}`, + `shadow-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ] +]; diff --git a/src/lib/preset/_rules/spinners.ts b/src/lib/preset/_rules/spinners.ts index 6bff482f..e1345973 100644 --- a/src/lib/preset/_rules/spinners.ts +++ b/src/lib/preset/_rules/spinners.ts @@ -24,343 +24,379 @@ const rotSquaresBeforeAfter = `content-[''] border-2 absolute top-0 left-0 box-b // const dots_WH = '4'; export const spinnerRules: Rule[] = [ - [ - new RegExp(`^folding-squares-${reg_c_sO}$`), - ([, c, s]: string[], { constructCSS }) => `@keyframes foldingSquares1-${cs(c, s)} { + [ + new RegExp(`^folding-squares-${reg_c_sO}$`), + ([, c, s]: string[], { constructCSS }) => `@keyframes foldingSquares1-${cs(c, s)} { 0% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} - 12% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} - 25% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs(c, s)})), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} - 37% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs(c, s)})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgba(255, 255, 255, 0);} - 50% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs(c, s)})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgb(var(--color-${cs(c, s)}));} - 62% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgb(var(--color-${cs(c, s)})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgb(var(--color-${cs(c, s)}));} - 75% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgb(var(--color-${cs(c, s)}));} - 87% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgb(var(--color-${cs(c, s)}));} + 12% {box-shadow: 0 24px rgb(var(--color-${cs( + c, + s + )})), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} + 25% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs( + c, + s + )})), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} + 37% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs( + c, + s + )})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgba(255, 255, 255, 0);} + 50% {box-shadow: 0 24px rgb(var(--color-${cs(c, s)})), 24px 24px rgb(var(--color-${cs( + c, + s + )})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgb(var(--color-${cs(c, s)}));} + 62% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgb(var(--color-${cs( + c, + s + )})), 24px 48px rgb(var(--color-${cs(c, s)})), 0px 48px rgb(var(--color-${cs(c, s)}));} + 75% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgb(var(--color-${cs( + c, + s + )})), 0px 48px rgb(var(--color-${cs(c, s)}));} + 87% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgb(var(--color-${cs( + c, + s + )}));} 100% {box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);} }\n ${constructCSS({ animation: `foldingSquares1-${cs(c, s)} 4s ease infinite` })}` - ] + ] ]; export const spinnerSCs: Shortcut[] = [ - // Regular spinner - [ - new RegExp(`^s${reg_whO}-circle-${reg_c_sO}$`), - ([, wh, c, s]: string[]) => `inline-block ${dim(wh)} border-2 border-solid border-${cs(c, s)} border-b-transparent box-border rounded-full animate-rotate360`, - { - autocomplete: [ - 's-circle', - // 's-wh-circle', - // `s-wh-circle-${reg_c}`, - // `s-wh-circle-${reg_c}-${reg_s}`, - `s-circle-${reg_c}`, - `s-circle-${reg_c}-${reg_s}` - ] - } - ], - [ - new RegExp(`^s${reg_whO}-circle-split-${reg_c_sO}$`), - ([, wh, c, s]: string[]) => `inline-block ${dim(wh)} border-2 border-solid border-${cs(c, s)} border-y-transparent box-border rounded-full animate-rotate360`, - { - autocomplete: [ - 's-circle-split', - // 's-wh-circle-split', - // `s-wh-circle-split-${reg_c}`, - // `s-wh-circle-split-${reg_c}-${reg_s}`, - `s-circle-split-${reg_c}`, - `s-circle-split-${reg_c}-${reg_s}` - ] - } - ], + // Regular spinner + [ + new RegExp(`^s${reg_whO}-circle-${reg_c_sO}$`), + ([, wh, c, s]: string[]) => + `inline-block ${dim(wh)} border-2 border-solid border-${cs( + c, + s + )} border-b-transparent box-border rounded-full animate-rotate360`, + { + autocomplete: [ + 's-circle', + // 's-wh-circle', + // `s-wh-circle-${reg_c}`, + // `s-wh-circle-${reg_c}-${reg_s}`, + `s-circle-${reg_c}`, + `s-circle-${reg_c}-${reg_s}` + ] + } + ], + [ + new RegExp(`^s${reg_whO}-circle-split-${reg_c_sO}$`), + ([, wh, c, s]: string[]) => + `inline-block ${dim(wh)} border-2 border-solid border-${cs( + c, + s + )} border-y-transparent box-border rounded-full animate-rotate360`, + { + autocomplete: [ + 's-circle-split', + // 's-wh-circle-split', + // `s-wh-circle-split-${reg_c}`, + // `s-wh-circle-split-${reg_c}-${reg_s}`, + `s-circle-split-${reg_c}`, + `s-circle-split-${reg_c}-${reg_s}` + ] + } + ], - // Dots fading in and out - // [ - // new RegExp(`^s${reg_whO}-dots-${reg_c_sO}$`), - // ([_, wh, c, s]: string[]) => `${dotsBase} ${dim(wh, dots_WH)} bg-${cs(c, s)} relative animate-delay-300 - // before:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c, s)} -left-6) - // after:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c, s)} left-6 animate-delay-600)`, - // { - // autocomplete: [ - // `s-dots-${reg_c}`, - // `s-dots-${reg_c}-${reg_s}` - // ] - // } - // ], - // [ - // new RegExp(`^s${reg_whO}-dots-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - // ([_, wh, c1, s1, c2, s2, c3, s3]: string[]) => `${dotsBase} ${dim(wh, dots_WH)} bg-${cs(c2, s2)} relative animate-delay-300 - // before:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c1, s1)} -left-6) - // after:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c3, s3)} left-6 animate-delay-600)`, - // { - // autocomplete: [ - // `s-dots-${reg_c}-${reg_c}-${reg_c}`, - // `s-dots-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - // ] - // } - // ], + // Dots fading in and out + // [ + // new RegExp(`^s${reg_whO}-dots-${reg_c_sO}$`), + // ([_, wh, c, s]: string[]) => `${dotsBase} ${dim(wh, dots_WH)} bg-${cs(c, s)} relative animate-delay-300 + // before:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c, s)} -left-6) + // after:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c, s)} left-6 animate-delay-600)`, + // { + // autocomplete: [ + // `s-dots-${reg_c}`, + // `s-dots-${reg_c}-${reg_s}` + // ] + // } + // ], + // [ + // new RegExp(`^s${reg_whO}-dots-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + // ([_, wh, c1, s1, c2, s2, c3, s3]: string[]) => `${dotsBase} ${dim(wh, dots_WH)} bg-${cs(c2, s2)} relative animate-delay-300 + // before:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c1, s1)} -left-6) + // after:(${dotsBase} ${dotsBeforeAfter} bg-${cs(c3, s3)} left-6 animate-delay-600)`, + // { + // autocomplete: [ + // `s-dots-${reg_c}-${reg_c}-${reg_c}`, + // `s-dots-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + // ] + // } + // ], - // Hovering squares - [ - new RegExp(`^s${reg_whO}-squares-hover-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - ([, wh, c1, s1, c2, s2, c3, s3]: string[]) => `${sqHoverBase} ${dim(wh)} text-${cs(c1, s1)} bg-${cs(c2, s2)} after:(bg-${cs(c3, s3)}/75)`, - { - autocomplete: [ - `s-squares-hover`, - // `s-wh-squares-hover`, - // `s-wh-squares-hover-${reg_c}`, - // `s-wh-squares-hover-${reg_c}-${reg_s}`, - // `s-wh-squares-hover-${reg_c}-${reg_c}`, - // `s-wh-squares-hover-${reg_c}-${reg_c}-${reg_s}`, - // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}`, - // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, - // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, - // `s-wh-squares-hover-${reg_c}-${reg_c}-${reg_c}`, - `s-squares-hover-${reg_c}`, - `s-squares-hover-${reg_c}-${reg_s}`, - `s-squares-hover-${reg_c}-${reg_c}`, - `s-squares-hover-${reg_c}-${reg_c}-${reg_s}`, - `s-squares-hover-${reg_c}-${reg_s}-${reg_c}`, - `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, - `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, - `s-squares-hover-${reg_c}-${reg_c}-${reg_c}`, - ] - } - ], + // Hovering squares + [ + new RegExp(`^s${reg_whO}-squares-hover-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + ([, wh, c1, s1, c2, s2, c3, s3]: string[]) => + `${sqHoverBase} ${dim(wh)} text-${cs(c1, s1)} bg-${cs(c2, s2)} after:(bg-${cs(c3, s3)}/75)`, + { + autocomplete: [ + `s-squares-hover`, + // `s-wh-squares-hover`, + // `s-wh-squares-hover-${reg_c}`, + // `s-wh-squares-hover-${reg_c}-${reg_s}`, + // `s-wh-squares-hover-${reg_c}-${reg_c}`, + // `s-wh-squares-hover-${reg_c}-${reg_c}-${reg_s}`, + // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}`, + // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, + // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, + // `s-wh-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, + // `s-wh-squares-hover-${reg_c}-${reg_c}-${reg_c}`, + `s-squares-hover-${reg_c}`, + `s-squares-hover-${reg_c}-${reg_s}`, + `s-squares-hover-${reg_c}-${reg_c}`, + `s-squares-hover-${reg_c}-${reg_c}-${reg_s}`, + `s-squares-hover-${reg_c}-${reg_s}-${reg_c}`, + `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, + `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, + `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_c}`, + `s-squares-hover-${reg_c}-${reg_c}-${reg_c}` + ] + } + ], - // Flipping Square - [ - new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}$`), - ([, wh, c, s]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-${cs(c, s)}`, - { - autocomplete: [ - 's-squares-flip', - `s-squares-flip-${reg_c}`, - `s-squares-flip-${reg_c}-${reg_s}` - ] - } - ], - // [ - // // With 2 gradients - // new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}-${reg_c_sO}$`), - // ([_, wh, c1, s1, c2, s2]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-radial-${c1}${s1 ? `-${s1}` : ''}-${c2}${s2 ? `-${s2}` : ''}`, - // { - // autocomplete: [ - // `s-squares-flip-${reg_c}-${reg_c}`, - // `s-squares-flip-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - // ] - // } - // ], - // [ - // // With 3 gradients - // new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - // ([_, wh, c1, s1, c2, s2, c3, s3]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-radial-${c1}${s1 ? `-${s1}` : ''}-${c2}${s2 ? `-${s2}` : ''}-${c3}${s3 ? `-${s3}` : ''}`, - // { - // autocomplete: [ - // `s-squares-flip-${reg_c}-${reg_c}-${reg_c}`, - // `s-squares-flip-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - // ] - // } - // ], + // Flipping Square + [ + new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}$`), + ([, wh, c, s]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-${cs(c, s)}`, + { + autocomplete: [ + 's-squares-flip', + `s-squares-flip-${reg_c}`, + `s-squares-flip-${reg_c}-${reg_s}` + ] + } + ], + // [ + // // With 2 gradients + // new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}-${reg_c_sO}$`), + // ([_, wh, c1, s1, c2, s2]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-radial-${c1}${s1 ? `-${s1}` : ''}-${c2}${s2 ? `-${s2}` : ''}`, + // { + // autocomplete: [ + // `s-squares-flip-${reg_c}-${reg_c}`, + // `s-squares-flip-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + // ] + // } + // ], + // [ + // // With 3 gradients + // new RegExp(`^s${reg_whO}-squares-flip-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + // ([_, wh, c1, s1, c2, s2, c3, s3]: string[]) => `${sqFlipBase} ${dim(wh, sqFlip_WH)} bg-radial-${c1}${s1 ? `-${s1}` : ''}-${c2}${s2 ? `-${s2}` : ''}-${c3}${s3 ? `-${s3}` : ''}`, + // { + // autocomplete: [ + // `s-squares-flip-${reg_c}-${reg_c}-${reg_c}`, + // `s-squares-flip-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + // ] + // } + // ], - // Horizontal bars - // [ - // new RegExp(`^s-bars-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - // ([_, c1, s1, c2, s2, c3, s3]: string[]) => `bg-${cs(c2, s2)} ${barSlideBase} w-12 rounded-md - // before:(bg-${cs(c1, s1)} ${barSlideBeforeAfter} rounded-md -top-5 left-2.5 w-10) - // after:(bg-${cs(c3, s3)} ${barSlideBeforeAfter} rounded-md -bottom-5 w-9)`, - // { - // autocomplete: [ - // `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - // `s-squares-hover-${reg_c}-${reg_c}-${reg_c}` - // ] - // } - // ], + // Horizontal bars + // [ + // new RegExp(`^s-bars-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + // ([_, c1, s1, c2, s2, c3, s3]: string[]) => `bg-${cs(c2, s2)} ${barSlideBase} w-12 rounded-md + // before:(bg-${cs(c1, s1)} ${barSlideBeforeAfter} rounded-md -top-5 left-2.5 w-10) + // after:(bg-${cs(c3, s3)} ${barSlideBeforeAfter} rounded-md -bottom-5 w-9)`, + // { + // autocomplete: [ + // `s-squares-hover-${reg_c}-${reg_s}-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, + // `s-squares-hover-${reg_c}-${reg_c}-${reg_c}` + // ] + // } + // ], - // Shape shifting square - [ - new RegExp(`^s${reg_whO}-corners-${reg_c_sO}$`), - ([, wh, c, s]: string[]) => `relative inline-block ${dim(wh)} bg-${cs(c, s)} animate-squareShapeShift`, - { - autocomplete: [ - 's-corners', - `s-corners-${reg_c}`, - `s-corners-${reg_c}-${reg_s}` - ] - } - ], - [ - new RegExp(`^s${reg_whO}-corners-outline-${reg_c_sO}$`), - ([, wh, c, s]: string[]) => `relative inline-block ${dim(wh)} border-4 border-${cs(c, s)} animate-squareShapeShift`, - { - autocomplete: [ - 's-corners-outline', - `s-corners-outline-${reg_c}`, - `s-corners-outline-${reg_c}-${reg_s}` - ] - } - ], + // Shape shifting square + [ + new RegExp(`^s${reg_whO}-corners-${reg_c_sO}$`), + ([, wh, c, s]: string[]) => + `relative inline-block ${dim(wh)} bg-${cs(c, s)} animate-squareShapeShift`, + { + autocomplete: ['s-corners', `s-corners-${reg_c}`, `s-corners-${reg_c}-${reg_s}`] + } + ], + [ + new RegExp(`^s${reg_whO}-corners-outline-${reg_c_sO}$`), + ([, wh, c, s]: string[]) => + `relative inline-block ${dim(wh)} border-4 border-${cs(c, s)} animate-squareShapeShift`, + { + autocomplete: [ + 's-corners-outline', + `s-corners-outline-${reg_c}`, + `s-corners-outline-${reg_c}-${reg_s}` + ] + } + ], - // Folding squares - // [ - // new RegExp(`^s-squares-folding-${reg_c_sO}$`), - // ([_, c, s]: string[]) => ` - // inline-block relative w-12 h-12 rotate-45 - // before:(content-[''] box-border w-6 h-6 absolute left-0 -top-6 folding-squares-${cs(c, s)}) - // after:(content-[''] box-border w-6 h-6 absolute left-0 top-0 shadow-md animate-foldingSquares2) - // `, - // { - // autocomplete: [ - // `s-squares-folding-${reg_c}`, - // `s-squares-folding-${reg_c}-${reg_s}` - // ] - // } - // ], + // Folding squares + // [ + // new RegExp(`^s-squares-folding-${reg_c_sO}$`), + // ([_, c, s]: string[]) => ` + // inline-block relative w-12 h-12 rotate-45 + // before:(content-[''] box-border w-6 h-6 absolute left-0 -top-6 folding-squares-${cs(c, s)}) + // after:(content-[''] box-border w-6 h-6 absolute left-0 top-0 shadow-md animate-foldingSquares2) + // `, + // { + // autocomplete: [ + // `s-squares-folding-${reg_c}`, + // `s-squares-folding-${reg_c}-${reg_s}` + // ] + // } + // ], - // 2 Rotating squares - [ - new RegExp(`^s${reg_whO}-squares-rotate-${reg_c_sO}$`), - ([, wh, c1, s1]: string[]) => ` + // 2 Rotating squares + [ + new RegExp(`^s${reg_whO}-squares-rotate-${reg_c_sO}$`), + ([, wh, c1, s1]: string[]) => ` ${dim(wh)} relative inline-block before:(${rotSquaresBeforeAfter} ${dim(wh)} border-${cs(c1, s1)}) after:(${rotSquaresBeforeAfter} ${dim(wh)} border-${cs(c1, s1)} animate-reverse)` - ], - [ - new RegExp(`^s${reg_whO}-squares-rotate-${reg_c_sO}-${reg_c_sO}$`), - ([, wh, c1, s1, c2, s2]: string[]) => ` + ], + [ + new RegExp(`^s${reg_whO}-squares-rotate-${reg_c_sO}-${reg_c_sO}$`), + ([, wh, c1, s1, c2, s2]: string[]) => ` ${dim(wh)} relative inline-block before:(${rotSquaresBeforeAfter} ${dim(wh)} border-${cs(c1, s1)}) after:(${rotSquaresBeforeAfter} ${dim(wh)} border-${cs(c2, s2)} animate-reverse)`, - { - autocomplete: [ - 's-squares-rotate', - `s-squares-rotate-${reg_c}`, - `s-squares-rotate-${reg_c}-${reg_s}`, - `s-squares-rotate-${reg_c}-${reg_c}`, - `s-squares-rotate-${reg_c}-${reg_s}-${reg_c}`, - `s-squares-rotate-${reg_c}-${reg_c}-${reg_s}`, - ] - } - ], + { + autocomplete: [ + 's-squares-rotate', + `s-squares-rotate-${reg_c}`, + `s-squares-rotate-${reg_c}-${reg_s}`, + `s-squares-rotate-${reg_c}-${reg_c}`, + `s-squares-rotate-${reg_c}-${reg_s}-${reg_c}`, + `s-squares-rotate-${reg_c}-${reg_c}-${reg_s}` + ] + } + ] ]; export const spinnersDescriptions: RulesDescription[] = [ - { - rule: 's-circle-(themeColors)-(shades)', - description: `Inserts a circle spinner. The shade value is optional and 500 is used by default. You can increase the border width with 'border-4' for example and change the border style to dotted or dashed with 'border-dotted' and 'border-dashed' respectively.`, - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-circle-primary', 's-circle-tertiary-600'] - }, - { - rule: 's-circle-split-(themeColors)-(shades)', - description: `Inserts a circle spinner with two separate quarter circles. The shade value is optional and 500 is used by default. You can increase the border width with 'border-4' for example and change the border style to dotted or dashed with 'border-dotted' and 'border-dashed' respectively.`, - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-circle-split-primary', 's-circle-split-tertiary-600'] - }, - { - rule: 's-dots-(themeColors)-(shades)', - description: 'Inserts a spinner with 3 dots that change their opacity. You can control the color of the dots with the theme color value. The shade value is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: [ - 's-dots-primary-400', - ] - }, - { - rule: 's-dots-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with 3 dots that change their opacity. You can control the color of each dot with the 3 theme color values (starting from the left most dot). The shade values are optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: [ - 's-dots-primary-secondary-tertiary', - ] - }, - { - rule: 's-squares-hover-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with 3 hovering squares. You can control the color of each square with the 3 theme color values (starting from the lowest square). The shade values are optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: [ - 's-squares-hover-primary-secondary-tertiary', - 's-squares-hover-tertiary-secondary-primary dark:s-squares-hover-tertiary-secondary-primary-200 rounded-xl after:rounded-xl' - ] - }, - { - rule: 's-squares-flip-(themeColors)-(shades)', - description: 'Inserts a spinner with a flipping square. You can control the color of the square with the theme color value. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-flip-primary'] - }, - { - rule: 's-squares-flip-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with a flipping square and a radial color gradient of the 2 specified colors. The shades are optional.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-flip-primary-secondary'] - }, - { - rule: 's-squares-flip-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with a flipping square and a radial color gradient of the 3 specified colors. The shades are optional.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-flip-primary-secondary-tertiary'] - }, - { - rule: 's-bars-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with 3 bars flying left to right. You can specify the colors of all three bars. The shades are optional.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-bars-primary-secondary-success'] - }, - { - rule: 's-corners-(themeColors)-(shades)', - description: 'Inserts a spinner with a shape shifting square. You can control the color of the square with the theme color value. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-corners-primary'] - }, - { - rule: 's-corners-outline-(themeColors)-(shades)', - description: 'Inserts a spinner with a shape shifting square outline. You can control the color of the outline with the theme color value. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-corners-primary'] - }, - { - rule: 's-squares-folding-(themeColors)-(shades)', - description: 'Inserts a spinner with a square that folds and expands. You can control the color of the squares with the theme color value. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-folding-primary'] - }, - { - rule: 's-squares-rotate-(themeColors)-(shades)', - description: 'Inserts a spinner with 2 squares that rotate around each other. You can control the color of the squares with the theme color value. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-rotate-primary'] - }, - { - rule: 's-squares-rotate-(themeColors)-(shades)-(themeColors)-(shades)', - description: 'Inserts a spinner with 2 squares that rotate around each other. You can control the color of the squares with the 2 theme color values. The shade is optional and 500 is the default.', - keywords: ['spinners'], - variablesUsed: ['themeColors', 'shades'], - classes: [], - examples: ['s-squares-rotate-primary-secondary-300'] - }, -]; \ No newline at end of file + { + rule: 's-circle-(themeColors)-(shades)', + description: `Inserts a circle spinner. The shade value is optional and 500 is used by default. You can increase the border width with 'border-4' for example and change the border style to dotted or dashed with 'border-dotted' and 'border-dashed' respectively.`, + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-circle-primary', 's-circle-tertiary-600'] + }, + { + rule: 's-circle-split-(themeColors)-(shades)', + description: `Inserts a circle spinner with two separate quarter circles. The shade value is optional and 500 is used by default. You can increase the border width with 'border-4' for example and change the border style to dotted or dashed with 'border-dotted' and 'border-dashed' respectively.`, + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-circle-split-primary', 's-circle-split-tertiary-600'] + }, + { + rule: 's-dots-(themeColors)-(shades)', + description: + 'Inserts a spinner with 3 dots that change their opacity. You can control the color of the dots with the theme color value. The shade value is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-dots-primary-400'] + }, + { + rule: 's-dots-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with 3 dots that change their opacity. You can control the color of each dot with the 3 theme color values (starting from the left most dot). The shade values are optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-dots-primary-secondary-tertiary'] + }, + { + rule: 's-squares-hover-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with 3 hovering squares. You can control the color of each square with the 3 theme color values (starting from the lowest square). The shade values are optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: [ + 's-squares-hover-primary-secondary-tertiary', + 's-squares-hover-tertiary-secondary-primary dark:s-squares-hover-tertiary-secondary-primary-200 rounded-xl after:rounded-xl' + ] + }, + { + rule: 's-squares-flip-(themeColors)-(shades)', + description: + 'Inserts a spinner with a flipping square. You can control the color of the square with the theme color value. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-flip-primary'] + }, + { + rule: 's-squares-flip-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with a flipping square and a radial color gradient of the 2 specified colors. The shades are optional.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-flip-primary-secondary'] + }, + { + rule: 's-squares-flip-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with a flipping square and a radial color gradient of the 3 specified colors. The shades are optional.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-flip-primary-secondary-tertiary'] + }, + { + rule: 's-bars-(themeColors)-(shades)-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with 3 bars flying left to right. You can specify the colors of all three bars. The shades are optional.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-bars-primary-secondary-success'] + }, + { + rule: 's-corners-(themeColors)-(shades)', + description: + 'Inserts a spinner with a shape shifting square. You can control the color of the square with the theme color value. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-corners-primary'] + }, + { + rule: 's-corners-outline-(themeColors)-(shades)', + description: + 'Inserts a spinner with a shape shifting square outline. You can control the color of the outline with the theme color value. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-corners-primary'] + }, + { + rule: 's-squares-folding-(themeColors)-(shades)', + description: + 'Inserts a spinner with a square that folds and expands. You can control the color of the squares with the theme color value. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-folding-primary'] + }, + { + rule: 's-squares-rotate-(themeColors)-(shades)', + description: + 'Inserts a spinner with 2 squares that rotate around each other. You can control the color of the squares with the theme color value. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-rotate-primary'] + }, + { + rule: 's-squares-rotate-(themeColors)-(shades)-(themeColors)-(shades)', + description: + 'Inserts a spinner with 2 squares that rotate around each other. You can control the color of the squares with the 2 theme color values. The shade is optional and 500 is the default.', + keywords: ['spinners'], + variablesUsed: ['themeColors', 'shades'], + classes: [], + examples: ['s-squares-rotate-primary-secondary-300'] + } +]; diff --git a/src/lib/preset/_rules/svg.ts b/src/lib/preset/_rules/svg.ts index 47148d0e..07888cab 100644 --- a/src/lib/preset/_rules/svg.ts +++ b/src/lib/preset/_rules/svg.ts @@ -1,123 +1,147 @@ import type { Shortcut } from '@unocss/core'; -import { convert_opacity, cs, cso, reg_c, reg_c_sO_oO, reg_c_s_oO, reg_oO, reg_s } from '../utils/regex'; +import { + convert_opacity, + cs, + cso, + reg_c, + reg_c_sO_oO, + reg_c_s_oO, + reg_oO, + reg_s +} from '../utils/regex'; export const svgSCs: Shortcut[] = [ - // Fill colors - [ - new RegExp(`^fill-on-${reg_c_sO_oO}`), - ([, c, s, op]: string[]) => `fill-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${convert_opacity(op)}` : ''}` - ], + // Fill colors + [ + new RegExp(`^fill-on-${reg_c_sO_oO}`), + ([, c, s, op]: string[]) => + `fill-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${convert_opacity(op)}` : ''}` + ], - // Fill-on light - dark - [ - new RegExp(`^fill-on-${reg_c_s_oO}-${reg_s}${reg_oO}`), - ([, c1, s1, o1, s2, o2]: string[]) => `fill-[color:rgb(var(--on-${cs(c1, s1)}))]${o1 ? `/${convert_opacity(o1)}` : ''} dark:fill-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, - { - autocomplete: [ - 'fill-on', - `fill-on-${reg_c}`, - `fill-on-${reg_c}-${reg_s}`, - `fill-on-${reg_c}-${reg_s}-${reg_s}` - ] - } - ], + // Fill-on light - dark + [ + new RegExp(`^fill-on-${reg_c_s_oO}-${reg_s}${reg_oO}`), + ([, c1, s1, o1, s2, o2]: string[]) => + `fill-[color:rgb(var(--on-${cs(c1, s1)}))]${ + o1 ? `/${convert_opacity(o1)}` : '' + } dark:fill-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, + { + autocomplete: [ + 'fill-on', + `fill-on-${reg_c}`, + `fill-on-${reg_c}-${reg_s}`, + `fill-on-${reg_c}-${reg_s}-${reg_s}` + ] + } + ], - // Fill-on inverse light - dark - [ - new RegExp(`^fill-on-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `fill-[color:rgb(var(--on-${cs(c1, s1)}))]${o1 ? `/${convert_opacity(o1)}` : ''} dark:fill-[color:rgb(var(--on-${cs(c2, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, - { - autocomplete: [ - 'fill-on-inverse', - `fill-on-inverse-${reg_c}`, - `fill-on-inverse-${reg_c}-${reg_s}`, - `fill-on-inverse-${reg_c}-${reg_c}`, - `fill-on-inverse-${reg_c}-${reg_c}-${reg_s}`, - `fill-on-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - ] - } - ], + // Fill-on inverse light - dark + [ + new RegExp(`^fill-on-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `fill-[color:rgb(var(--on-${cs(c1, s1)}))]${ + o1 ? `/${convert_opacity(o1)}` : '' + } dark:fill-[color:rgb(var(--on-${cs(c2, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, + { + autocomplete: [ + 'fill-on-inverse', + `fill-on-inverse-${reg_c}`, + `fill-on-inverse-${reg_c}-${reg_s}`, + `fill-on-inverse-${reg_c}-${reg_c}`, + `fill-on-inverse-${reg_c}-${reg_c}-${reg_s}`, + `fill-on-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], - // Fill light - dark - [ - new RegExp(`^fill-${reg_c_s_oO}-${reg_s}${reg_oO}`), - ([, c1, s1, o1, s2, o2]: string[]) => `fill-${cso(c1, s1, o1)} dark:fill-${cso(c1, s2, o2)}` - ], + // Fill light - dark + [ + new RegExp(`^fill-${reg_c_s_oO}-${reg_s}${reg_oO}`), + ([, c1, s1, o1, s2, o2]: string[]) => `fill-${cso(c1, s1, o1)} dark:fill-${cso(c1, s2, o2)}` + ], - // Fill inverse light - dark - [ - new RegExp(`^fill-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `fill-${cso(c1, s1, o1)} dark:fill-${cso(c2, s2, o2)}`, - { - autocomplete: [ - 'fill-inverse', - `fill-inverse-${reg_c}`, - `fill-inverse-${reg_c}-${reg_s}`, - `fill-inverse-${reg_c}-${reg_s}-${reg_c}`, - `fill-inverse-${reg_c}-${reg_c}`, - `fill-inverse-${reg_c}-${reg_c}-${reg_s}`, - `fill-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` - ] - } - ], - - // Stroke colors - [ - new RegExp(`^stroke-on-${reg_c_sO_oO}`), - ([, c, s, op]: string[]) => `stroke-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${op}` : ''}` - ], + // Fill inverse light - dark + [ + new RegExp(`^fill-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `fill-${cso(c1, s1, o1)} dark:fill-${cso(c2, s2, o2)}`, + { + autocomplete: [ + 'fill-inverse', + `fill-inverse-${reg_c}`, + `fill-inverse-${reg_c}-${reg_s}`, + `fill-inverse-${reg_c}-${reg_s}-${reg_c}`, + `fill-inverse-${reg_c}-${reg_c}`, + `fill-inverse-${reg_c}-${reg_c}-${reg_s}`, + `fill-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], - // Stroke-on light - dark - [ - new RegExp(`^stroke-on-${reg_c_s_oO}-${reg_s}${reg_oO}`), - ([, c1, s1, o1, s2, o2]: string[]) => `stroke-[color:rgb(var(--on-${cs(c1, s1)}))]${o1 ? `/${convert_opacity(o1)}` : ''} dark:stroke-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, - { - autocomplete: [ - 'stroke-on', - `stroke-on-${reg_c}`, - `stroke-on-${reg_c}-${reg_s}`, - `stroke-on-${reg_c}-${reg_s}-${reg_s}`, - ] - } - ], + // Stroke colors + [ + new RegExp(`^stroke-on-${reg_c_sO_oO}`), + ([, c, s, op]: string[]) => `stroke-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${op}` : ''}` + ], - // Stroke-on inverse light - dark - [ - new RegExp(`^stroke-on-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `stroke-[color:rgb(var(--on-${cs(c1, s1)}))]${o1 ? `/${convert_opacity(o1)}` : ''} dark:stroke-[color:rgb(var(--on-${cs(c2, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, - { - autocomplete: [ - 'stroke-on-inverse', - `stroke-on-inverse-${reg_c}`, - `stroke-on-inverse-${reg_c}-${reg_c}`, - `stroke-on-inverse-${reg_c}-${reg_s}`, - `stroke-on-inverse-${reg_c}-${reg_c}-${reg_s}`, - `stroke-on-inverse-${reg_c}-${reg_s}-${reg_c}`, - `stroke-on-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - ] - } - ], + // Stroke-on light - dark + [ + new RegExp(`^stroke-on-${reg_c_s_oO}-${reg_s}${reg_oO}`), + ([, c1, s1, o1, s2, o2]: string[]) => + `stroke-[color:rgb(var(--on-${cs(c1, s1)}))]${ + o1 ? `/${convert_opacity(o1)}` : '' + } dark:stroke-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, + { + autocomplete: [ + 'stroke-on', + `stroke-on-${reg_c}`, + `stroke-on-${reg_c}-${reg_s}`, + `stroke-on-${reg_c}-${reg_s}-${reg_s}` + ] + } + ], - // Stroke light - dark - [ - new RegExp(`^stroke-${reg_c_s_oO}-${reg_s}${reg_oO}`), - ([, c1, s1, o1, s2, o2]: string[]) => `stroke-${cso(c1, s1, o1)} dark:stroke-${cso(c1, s2, o2)}` - ], + // Stroke-on inverse light - dark + [ + new RegExp(`^stroke-on-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `stroke-[color:rgb(var(--on-${cs(c1, s1)}))]${ + o1 ? `/${convert_opacity(o1)}` : '' + } dark:stroke-[color:rgb(var(--on-${cs(c2, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, + { + autocomplete: [ + 'stroke-on-inverse', + `stroke-on-inverse-${reg_c}`, + `stroke-on-inverse-${reg_c}-${reg_c}`, + `stroke-on-inverse-${reg_c}-${reg_s}`, + `stroke-on-inverse-${reg_c}-${reg_c}-${reg_s}`, + `stroke-on-inverse-${reg_c}-${reg_s}-${reg_c}`, + `stroke-on-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], - // Stroke inverse light - dark - [ - new RegExp(`^stroke-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `stroke-${cso(c1, s1, o1)} dark:stroke-${cso(c2, s2, o2)}`, - { - autocomplete: [ - 'stroke-inverse', - `stroke-inverse-${reg_c}`, - `stroke-inverse-${reg_c}-${reg_c}`, - `stroke-inverse-${reg_c}-${reg_s}`, - `stroke-inverse-${reg_c}-${reg_c}-${reg_s}`, - `stroke-inverse-${reg_c}-${reg_s}-${reg_c}`, - `stroke-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - ] - } - ], -] \ No newline at end of file + // Stroke light - dark + [ + new RegExp(`^stroke-${reg_c_s_oO}-${reg_s}${reg_oO}`), + ([, c1, s1, o1, s2, o2]: string[]) => `stroke-${cso(c1, s1, o1)} dark:stroke-${cso(c1, s2, o2)}` + ], + + // Stroke inverse light - dark + [ + new RegExp(`^stroke-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `stroke-${cso(c1, s1, o1)} dark:stroke-${cso(c2, s2, o2)}`, + { + autocomplete: [ + 'stroke-inverse', + `stroke-inverse-${reg_c}`, + `stroke-inverse-${reg_c}-${reg_c}`, + `stroke-inverse-${reg_c}-${reg_s}`, + `stroke-inverse-${reg_c}-${reg_c}-${reg_s}`, + `stroke-inverse-${reg_c}-${reg_s}-${reg_c}`, + `stroke-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ] +]; diff --git a/src/lib/preset/_rules/text.ts b/src/lib/preset/_rules/text.ts index bf97a96e..110f4988 100644 --- a/src/lib/preset/_rules/text.ts +++ b/src/lib/preset/_rules/text.ts @@ -1,94 +1,130 @@ import type { Rule, Shortcut } from '@unocss/core'; -import { default_dir, reg_dO, reg_c, reg_s, reg_c_s, reg_c_sO, cs, reg_d, reg_oO, cso, reg_c_sO_oO, reg_c_s_oO, convert_opacity } from '../utils/regex'; +import { + default_dir, + reg_dO, + reg_c, + reg_s, + reg_c_s, + reg_c_sO, + cs, + reg_d, + reg_oO, + cso, + reg_c_sO_oO, + reg_c_s_oO, + convert_opacity +} from '../utils/regex'; const gradientClasses = 'bg-clip-text text-transparent'; export const textRules: Rule[] = [ - [/^font-weight-\[([-a-z]+)\]$/, ([, w]) => ({ 'font-weight': `var(${w})` })] -] + [/^font-weight-\[([-a-z]+)\]$/, ([, w]) => ({ 'font-weight': `var(${w})` })] +]; export const textSCs: Shortcut[] = [ - // Text on base colours - [ - new RegExp(`^text-on-${reg_c_sO_oO}$`), - ([, c, s, op]: string[]) => `text-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${convert_opacity(op)}` : ''}` - ], - [ - new RegExp(`^text-on-${reg_c_s_oO}-${reg_s}${reg_oO}$`), - ([, c1, s1, o1, s2, o2]: string[]) => `text-[color:rgb(var(--on-${cs(c1, s1)}))]${o1 ? `/${convert_opacity(o1)}` : ''} dark:text-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, - { - autocomplete: [ - 'text-on', - `text-on-${reg_c}`, - `text-on-${reg_c}-${reg_s}`, - `text-on-${reg_c}-${reg_s}-${reg_s}`, - ] - } - ], + // Text on base colours + [ + new RegExp(`^text-on-${reg_c_sO_oO}$`), + ([, c, s, op]: string[]) => + `text-[color:rgb(var(--on-${cs(c, s)}))]${op ? `/${convert_opacity(op)}` : ''}` + ], + [ + new RegExp(`^text-on-${reg_c_s_oO}-${reg_s}${reg_oO}$`), + ([, c1, s1, o1, s2, o2]: string[]) => + `text-[color:rgb(var(--on-${cs(c1, s1)}))]${ + o1 ? `/${convert_opacity(o1)}` : '' + } dark:text-[color:rgb(var(--on-${cs(c1, s2)}))]${o2 ? `/${convert_opacity(o2)}` : ''}`, + { + autocomplete: [ + 'text-on', + `text-on-${reg_c}`, + `text-on-${reg_c}-${reg_s}`, + `text-on-${reg_c}-${reg_s}-${reg_s}` + ] + } + ], - // Text Light - Dark - [ - new RegExp(`^text-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c, s1, o1, s2, o2]: string[]) => `text-${cso(c, s1, o1)} dark:text-${cso(c, s2, o2)}`, - { - autocomplete: [ - `text-${reg_c}-${reg_s}-${reg_s}` - ] - } - ], + // Text Light - Dark + [ + new RegExp(`^text-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), + ([, c, s1, o1, s2, o2]: string[]) => `text-${cso(c, s1, o1)} dark:text-${cso(c, s2, o2)}`, + { + autocomplete: [`text-${reg_c}-${reg_s}-${reg_s}`] + } + ], - // Text Light - Dark + Hover - [ - new RegExp(`^text-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c, s1, o1, s2, o2, s3, o3, s4, o4]: string[]) => `text-${cso(c, s1, o1)} hover:text-${cso(c, s2, o2)} dark:(text-${cso(c, s3, o3)} hover:text-${cso(c, s4, o4)})`, - { - autocomplete: `text-${reg_c}-${reg_s}-${reg_s}-${reg_s}-${reg_s}` - } - ], + // Text Light - Dark + Hover + [ + new RegExp( + `^text-${reg_c}-${reg_s}${reg_oO}-${reg_s}${reg_oO}-${reg_s}${reg_oO}-${reg_s}${reg_oO}$` + ), + ([, c, s1, o1, s2, o2, s3, o3, s4, o4]: string[]) => + `text-${cso(c, s1, o1)} hover:text-${cso(c, s2, o2)} dark:(text-${cso( + c, + s3, + o3 + )} hover:text-${cso(c, s4, o4)})`, + { + autocomplete: `text-${reg_c}-${reg_s}-${reg_s}-${reg_s}-${reg_s}` + } + ], - // Text Inverse - [ - new RegExp(`^text-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), - ([, c1, s1, o1, c2, s2, o2]: string[]) => `text-${cso(c1, s1, o1)} dark:text-${cso(c2, s2, o2)}`, - { - autocomplete: [ - 'text-inverse', - `text-inverse-${reg_c}`, - `text-inverse-${reg_c}-${reg_s}`, - `text-inverse-${reg_c}-${reg_c}`, - `text-inverse-${reg_c}-${reg_c}-${reg_s}`, - `text-inverse-${reg_c}-${reg_s}-${reg_c}`, - `text-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}`, - ] - } - ], - [ - new RegExp(`^text-inverse-${reg_c_s}${reg_oO}-${reg_s}${reg_oO}-${reg_c_s}${reg_oO}-${reg_s}${reg_oO}$`), - ([, c1, s11, o11, s12, o12, c2, s21, o21, s22, o22]: string[]) => `text-${cso(c1, s11, o11)} hover:text-${cso(c1, s12, o12)} dark:(text-${cso(c2, s21, o21)} hover:text-${cso(c2, s22, o22)})`, - ], + // Text Inverse + [ + new RegExp(`^text-inverse-${reg_c_sO_oO}-${reg_c_sO_oO}$`), + ([, c1, s1, o1, c2, s2, o2]: string[]) => + `text-${cso(c1, s1, o1)} dark:text-${cso(c2, s2, o2)}`, + { + autocomplete: [ + 'text-inverse', + `text-inverse-${reg_c}`, + `text-inverse-${reg_c}-${reg_s}`, + `text-inverse-${reg_c}-${reg_c}`, + `text-inverse-${reg_c}-${reg_c}-${reg_s}`, + `text-inverse-${reg_c}-${reg_s}-${reg_c}`, + `text-inverse-${reg_c}-${reg_s}-${reg_c}-${reg_s}` + ] + } + ], + [ + new RegExp( + `^text-inverse-${reg_c_s}${reg_oO}-${reg_s}${reg_oO}-${reg_c_s}${reg_oO}-${reg_s}${reg_oO}$` + ), + ([, c1, s11, o11, s12, o12, c2, s21, o21, s22, o22]: string[]) => + `text-${cso(c1, s11, o11)} hover:text-${cso(c1, s12, o12)} dark:(text-${cso( + c2, + s21, + o21 + )} hover:text-${cso(c2, s22, o22)})` + ], - // Text gradients - [ - new RegExp(`^text-gradient${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), - ([, d, c1, s1, c2, s2]: string[]) => `${gradientClasses} bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} to-${cs(c2, s2)}` - ], - [ - new RegExp(`^text-gradient${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), - ([, d, c1, s1, c2, s2, c3, s3]: string[]) => `${gradientClasses} bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} via-${cs(c2, s2)} to-${cs(c3, s3)}`, - { - autocomplete: [ - 'text-gradient', - `text-gradient-${reg_c}`, - `text-gradient-${reg_c}-${reg_s}`, - `text-gradient-${reg_d}`, - `text-gradient-${reg_d}-${reg_c}`, - `text-gradient-${reg_d}-${reg_c}-${reg_s}`, - `text-gradient-${reg_c}-${reg_c}`, - `text-gradient-${reg_d}-${reg_c}-${reg_c}`, - `text-gradient-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, - `text-gradient-${reg_c}-${reg_c}-${reg_c}` - ] - } - ], -] \ No newline at end of file + // Text gradients + [ + new RegExp(`^text-gradient${reg_dO}-${reg_c_sO}-${reg_c_sO}$`), + ([, d, c1, s1, c2, s2]: string[]) => + `${gradientClasses} bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} to-${cs(c2, s2)}` + ], + [ + new RegExp(`^text-gradient${reg_dO}-${reg_c_sO}-${reg_c_sO}-${reg_c_sO}$`), + ([, d, c1, s1, c2, s2, c3, s3]: string[]) => + `${gradientClasses} bg-gradient-to-${d ?? default_dir} from-${cs(c1, s1)} via-${cs( + c2, + s2 + )} to-${cs(c3, s3)}`, + { + autocomplete: [ + 'text-gradient', + `text-gradient-${reg_c}`, + `text-gradient-${reg_c}-${reg_s}`, + `text-gradient-${reg_d}`, + `text-gradient-${reg_d}-${reg_c}`, + `text-gradient-${reg_d}-${reg_c}-${reg_s}`, + `text-gradient-${reg_c}-${reg_c}`, + `text-gradient-${reg_d}-${reg_c}-${reg_c}`, + `text-gradient-${reg_d}-${reg_c}-${reg_c}-${reg_c}`, + `text-gradient-${reg_c}-${reg_c}-${reg_c}` + ] + } + ] +]; diff --git a/src/lib/preset/_theme/colors.ts b/src/lib/preset/_theme/colors.ts index 65710df5..c08639d7 100644 --- a/src/lib/preset/_theme/colors.ts +++ b/src/lib/preset/_theme/colors.ts @@ -1,14 +1,16 @@ // Reference: https://github.com/unocss/unocss/blob/172f480a9a092538685fddd9cb5fccdab9d59a86/packages/preset-mini/src/_theme/colors.ts -import type { Theme } from "@unocss/preset-uno"; -import { shades } from "../../types/colors"; +import type { Theme } from '@unocss/preset-uno'; +import { shades } from '../../types/colors'; export const colors = { - primary: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-primary-${x}), %alpha)`])), - secondary: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-secondary-${x}), %alpha)`])), - tertiary: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-tertiary-${x}), %alpha)`])), - success: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-success-${x}), %alpha)`])), - warning: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-warning-${x}), %alpha)`])), - error: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-error-${x}), %alpha)`])), - surface: Object.fromEntries(shades.map(x => [x, `rgba(var(--color-surface-${x}), %alpha)`])) -} satisfies Theme['colors']; \ No newline at end of file + primary: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-primary-${x}), %alpha)`])), + secondary: Object.fromEntries( + shades.map((x) => [x, `rgba(var(--color-secondary-${x}), %alpha)`]) + ), + tertiary: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-tertiary-${x}), %alpha)`])), + success: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-success-${x}), %alpha)`])), + warning: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-warning-${x}), %alpha)`])), + error: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-error-${x}), %alpha)`])), + surface: Object.fromEntries(shades.map((x) => [x, `rgba(var(--color-surface-${x}), %alpha)`])) +} satisfies Theme['colors']; diff --git a/src/lib/preset/index.ts b/src/lib/preset/index.ts index 9eba8bff..34867f11 100644 --- a/src/lib/preset/index.ts +++ b/src/lib/preset/index.ts @@ -9,13 +9,13 @@ import { animation, rules, shortcuts } from './_rules/index'; export { colors } from './_theme/colors'; export const presetAtoUI = (): Preset => ({ - name: 'presetAtoUI', - theme: { - colors, - animation - }, - rules, - shortcuts + name: 'presetAtoUI', + theme: { + colors, + animation + }, + rules, + shortcuts }); // const ato = presetWind(); @@ -30,7 +30,7 @@ export const presetAtoUI = (): Preset => ({ // ...colors // }, // animation: { -// ...<[]>ato.theme?.animation, +// ...<[]>ato.theme?.animation, // ...animation // } // }, @@ -38,4 +38,4 @@ export const presetAtoUI = (): Preset => ({ // shortcuts: [...<[]>ato.shortcuts, ...shortcuts], // }); -export default presetAtoUI; \ No newline at end of file +export default presetAtoUI; diff --git a/src/lib/preset/utils/regex.ts b/src/lib/preset/utils/regex.ts index 7cb38081..d3839fe9 100644 --- a/src/lib/preset/utils/regex.ts +++ b/src/lib/preset/utils/regex.ts @@ -1,7 +1,7 @@ import { themeColorsJ, shadesJ } from '../../types/colors'; import { directionsJ } from '../../types/directions'; import { sizesJ } from '../../types/types'; -import { pos_j } from '../../types/positions'; +import { pos_j } from '../../types/positions'; /** * reg_... = regular expressions @@ -52,52 +52,52 @@ export const reg_c_sO_oO = `${reg_c}${reg_sO}${reg_oO}`; // ===== Functions used for shortcuts export function norm_op(o: string) { - return `${parseInt(o, 10) / 100}` + return `${parseInt(o, 10) / 100}`; } -export function parse_opacity(o: string, def_o='1') { - return `${o ? (parseInt(o, 10) / 100).toFixed(2) : def_o}` +export function parse_opacity(o: string, def_o = '1') { + return `${o ? (parseInt(o, 10) / 100).toFixed(2) : def_o}`; } export function convert_opacity(o: string) { - if (!o) return '[1]'; + if (!o) return '[1]'; - const opacity = norm_op(o); - return `[${opacity}]` + const opacity = norm_op(o); + return `[${opacity}]`; } export function so(s: string, o: string) { - const shade = s ?? '500'; - return `${shade}/${convert_opacity(o)}`; + const shade = s ?? '500'; + return `${shade}/${convert_opacity(o)}`; } export function cs(c: string, s: string) { - if (white_black.includes(c)) { - return c; - } + if (white_black.includes(c)) { + return c; + } - return `${c}-${s ?? '500'}`; + return `${c}-${s ?? '500'}`; } export function cso(c: string, s: string, o: string) { - if (white_black.includes(c)) { - return c; - } + if (white_black.includes(c)) { + return c; + } - return `${c}-${so(s, o)}`; + return `${c}-${so(s, o)}`; } -export function dim(wh: string, default_wh='12') { - if (wh) { - return `w-${wh} h-${wh}`; - } +export function dim(wh: string, default_wh = '12') { + if (wh) { + return `w-${wh} h-${wh}`; + } - return `w-${default_wh} h-${default_wh}`; + return `w-${default_wh} h-${default_wh}`; } // ===== Functions used only for specifying class names in rules -export function name_c_sO_oO(c: string, s='', o='') { - // console.log(`${c}${s ? `-${s}` : ''}${o ? `/${o}` : ''}`); - // return `${c}${s ? `-${s}` : ''}${o ? `\/${o}` : ''}`; - return `${c}${s ? `-${s}` : ''}${o ? `/${o}` : ''}`; -} \ No newline at end of file +export function name_c_sO_oO(c: string, s = '', o = '') { + // console.log(`${c}${s ? `-${s}` : ''}${o ? `/${o}` : ''}`); + // return `${c}${s ? `-${s}` : ''}${o ? `\/${o}` : ''}`; + return `${c}${s ? `-${s}` : ''}${o ? `/${o}` : ''}`; +} diff --git a/src/lib/styles/themes/air.css b/src/lib/styles/themes/air.css index 2fdb1dac..5d5da0b0 100644 --- a/src/lib/styles/themes/air.css +++ b/src/lib/styles/themes/air.css @@ -1,26 +1,26 @@ -:root [data-theme="air"] { +:root [data-theme='air'] { --ato-container-radius: 6px; - + /* Buttons */ --btn-radius: 6px; --btn-icon-radius: 6px; - + --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; - + --btn-lg-p-y: 0.5rem; --btn-lg-p-x: 1rem; --btn-lg-font-weight: 600; - + --btn-xl-p-y: 0.75rem; --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - + /* primary colors */ --color-primary-50: 242, 251, 254; /* #f2fbfe */ --color-primary-100: 191, 236, 251; /* #bfecfb */ @@ -33,7 +33,7 @@ --color-primary-800: 0, 90, 120; /* #005a78 */ --color-primary-900: 0, 72, 96; /* #004860 */ --color-primary-950: 0, 54, 72; /* #003648 */ - + --on-primary-50: 0, 0, 0; /* #000000 */ --on-primary-100: 0, 0, 0; /* #000000 */ --on-primary-200: 0, 0, 0; /* #000000 */ @@ -45,7 +45,7 @@ --on-primary-800: 255, 255, 255; /* #ffffff */ --on-primary-900: 255, 255, 255; /* #ffffff */ --on-primary-950: 255, 255, 255; /* #ffffff */ - + /* secondary colors */ --color-secondary-50: 254, 249, 243; /* #fef9f3 */ --color-secondary-100: 252, 223, 196; /* #fcdfc4 */ @@ -58,7 +58,7 @@ --color-secondary-800: 109, 57, 8; /* #6d3908 */ --color-secondary-900: 87, 45, 6; /* #572d06 */ --color-secondary-950: 68, 35, 5; /* #442305 */ - + --on-secondary-50: 0, 0, 0; /* #000000 */ --on-secondary-100: 0, 0, 0; /* #000000 */ --on-secondary-200: 0, 0, 0; /* #000000 */ @@ -70,7 +70,7 @@ --on-secondary-800: 255, 255, 255; /* #ffffff */ --on-secondary-900: 255, 255, 255; /* #ffffff */ --on-secondary-950: 255, 255, 255; /* #ffffff */ - + /* tertiary colors */ --color-tertiary-50: 254, 253, 244; /* #fefdf4 */ --color-tertiary-100: 248, 244, 201; /* #f8f4c9 */ @@ -83,7 +83,7 @@ --color-tertiary-800: 168, 156, 28; /* #a89c1c */ --color-tertiary-900: 91, 84, 15; /* #5b540f */ --color-tertiary-950: 68, 63, 11; /* #443f0b */ - + --on-tertiary-50: 0, 0, 0; /* #000000 */ --on-tertiary-100: 0, 0, 0; /* #000000 */ --on-tertiary-200: 0, 0, 0; /* #000000 */ @@ -95,7 +95,7 @@ --on-tertiary-800: 0, 0, 0; /* #000000 */ --on-tertiary-900: 255, 255, 255; /* #ffffff */ --on-tertiary-950: 255, 255, 255; /* #ffffff */ - + /* surface colors */ --color-surface-50: 242, 245, 247; /* #f2f5f7 */ --color-surface-100: 191, 206, 216; /* #bfced8 */ @@ -108,7 +108,7 @@ --color-surface-800: 0, 36, 58; /* #00243a */ --color-surface-900: 0, 24, 39; /* #001827 */ --color-surface-950: 0, 18, 29; /* #00121d */ - + --on-surface-50: 0, 0, 0; /* #000000 */ --on-surface-100: 0, 0, 0; /* #000000 */ --on-surface-200: 0, 0, 0; /* #000000 */ @@ -120,7 +120,7 @@ --on-surface-800: 255, 255, 255; /* #ffffff */ --on-surface-900: 255, 255, 255; /* #ffffff */ --on-surface-950: 255, 255, 255; /* #ffffff */ - + /* success colors */ --color-success-50: 245, 252, 245; /* #f5fcf5 */ --color-success-100: 206, 240, 206; /* #cef0ce */ @@ -133,7 +133,7 @@ --color-success-800: 35, 118, 35; /* #237623 */ --color-success-900: 24, 78, 24; /* #184e18 */ --color-success-950: 18, 59, 18; /* #123b12 */ - + --on-success-50: 0, 0, 0; /* #000000 */ --on-success-100: 0, 0, 0; /* #000000 */ --on-success-200: 0, 0, 0; /* #000000 */ @@ -145,7 +145,7 @@ --on-success-800: 255, 255, 255; /* #ffffff */ --on-success-900: 255, 255, 255; /* #ffffff */ --on-success-950: 255, 255, 255; /* #ffffff */ - + /* warning colors */ --color-warning-50: 254, 251, 243; /* #fefbf3 */ --color-warning-100: 249, 235, 197; /* #f9ebc5 */ @@ -158,7 +158,7 @@ --color-warning-800: 139, 106, 14; /* #8b6a0e */ --color-warning-900: 93, 70, 9; /* #5d4609 */ --color-warning-950: 70, 53, 7; /* #463507 */ - + --on-warning-50: 0, 0, 0; /* #000000 */ --on-warning-100: 0, 0, 0; /* #000000 */ --on-warning-200: 0, 0, 0; /* #000000 */ @@ -170,7 +170,7 @@ --on-warning-800: 255, 255, 255; /* #ffffff */ --on-warning-900: 255, 255, 255; /* #ffffff */ --on-warning-950: 255, 255, 255; /* #ffffff */ - + /* error colors */ --color-error-50: 249, 244, 243; /* #f9f4f3 */ --color-error-100: 227, 202, 194; /* #e3cac2 */ @@ -183,7 +183,7 @@ --color-error-800: 86, 26, 5; /* #561a05 */ --color-error-900: 58, 17, 4; /* #3a1104 */ --color-error-950: 43, 13, 3; /* #2b0d03 */ - + --on-error-50: 0, 0, 0; /* #000000 */ --on-error-100: 0, 0, 0; /* #000000 */ --on-error-200: 0, 0, 0; /* #000000 */ @@ -195,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/styles/themes/ato.css b/src/lib/styles/themes/ato.css index 8cf53f0b..2eed25d2 100644 --- a/src/lib/styles/themes/ato.css +++ b/src/lib/styles/themes/ato.css @@ -1,5 +1,4 @@ - -:root [data-theme="ato"] { +:root [data-theme='ato'] { --ato-container-radius: 6px; /* Buttons */ @@ -9,7 +8,7 @@ --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; @@ -22,7 +21,7 @@ --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - /* primary colors */ + /* primary colors */ --color-primary-50: 245, 245, 255; /* #f5f5ff */ --color-primary-100: 203, 203, 255; /* #cbcbff */ --color-primary-200: 161, 161, 255; /* #a1a1ff */ @@ -196,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/styles/themes/earth.css b/src/lib/styles/themes/earth.css index e5a067a5..0e1e1af8 100644 --- a/src/lib/styles/themes/earth.css +++ b/src/lib/styles/themes/earth.css @@ -1,5 +1,4 @@ - -:root [data-theme="earth"] { +:root [data-theme='earth'] { --ato-container-radius: 2px; /* Buttons */ @@ -9,7 +8,7 @@ --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; @@ -22,7 +21,7 @@ --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - /* primary colors */ + /* primary colors */ --color-primary-50: 244, 247, 242; /* #f4f7f2 */ --color-primary-100: 198, 217, 192; /* #c6d9c0 */ --color-primary-200: 157, 190, 147; /* #9dbe93 */ @@ -196,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/styles/themes/fire.css b/src/lib/styles/themes/fire.css index 3f9a29ce..6eee1eba 100644 --- a/src/lib/styles/themes/fire.css +++ b/src/lib/styles/themes/fire.css @@ -1,5 +1,4 @@ - -:root [data-theme="fire"] { +:root [data-theme='fire'] { --ato-container-radius: 6px; /* Buttons */ @@ -9,7 +8,7 @@ --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; @@ -22,7 +21,7 @@ --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - /* primary colors */ + /* primary colors */ --color-primary-50: 251, 243, 243; /* #fbf3f3 */ --color-primary-100: 233, 193, 193; /* #e9c1c1 */ --color-primary-200: 219, 156, 156; /* #db9c9c */ @@ -196,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/styles/themes/sunset.css b/src/lib/styles/themes/sunset.css index 6f13952e..6eed5f22 100644 --- a/src/lib/styles/themes/sunset.css +++ b/src/lib/styles/themes/sunset.css @@ -1,5 +1,4 @@ - -:root [data-theme="sunset"] { +:root [data-theme='sunset'] { --ato-container-radius: 6px; /* Buttons */ @@ -9,7 +8,7 @@ --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; @@ -22,7 +21,7 @@ --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - /* primary colors */ + /* primary colors */ --color-primary-50: 251, 250, 243; /* #fbfaf3 */ --color-primary-100: 237, 228, 196; /* #ede4c4 */ --color-primary-200: 225, 211, 160; /* #e1d3a0 */ @@ -196,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/styles/themes/water.css b/src/lib/styles/themes/water.css index 097ddf1f..f94efa05 100644 --- a/src/lib/styles/themes/water.css +++ b/src/lib/styles/themes/water.css @@ -1,5 +1,4 @@ - -:root [data-theme="water"] { +:root [data-theme='water'] { --ato-container-radius: 12px; /* Buttons */ @@ -9,7 +8,7 @@ --btn-sm-p-y: 0.25rem; --btn-sm-p-x: 0.5rem; --btn-sm-font-weight: 500; - + --btn-md-p-y: 0.25rem; --btn-md-p-x: 0.75rem; --btn-md-font-weight: 500; @@ -22,7 +21,7 @@ --btn-xl-p-x: 1.5rem; --btn-xl-font-weight: 700; - /* primary colors */ + /* primary colors */ --color-primary-50: 243, 251, 253; /* #f3fbfd */ --color-primary-100: 197, 234, 247; /* #c5eaf7 */ --color-primary-200: 155, 219, 241; /* #9bdbf1 */ @@ -196,6 +195,4 @@ --on-error-800: 255, 255, 255; /* #ffffff */ --on-error-900: 255, 255, 255; /* #ffffff */ --on-error-950: 255, 255, 255; /* #ffffff */ - } - \ No newline at end of file diff --git a/src/lib/types/colors.ts b/src/lib/types/colors.ts index 6e2c8d66..30b06155 100644 --- a/src/lib/types/colors.ts +++ b/src/lib/types/colors.ts @@ -1,6 +1,24 @@ -export const themeColors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface']; +export const themeColors = [ + 'primary', + 'secondary', + 'tertiary', + 'success', + 'warning', + 'error', + 'surface' +]; -export const allColors = ['white', 'black', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface']; +export const allColors = [ + 'white', + 'black', + 'primary', + 'secondary', + 'tertiary', + 'success', + 'warning', + 'error', + 'surface' +]; export const themeColorsJ = themeColors.join('|'); @@ -8,4 +26,4 @@ export const allColorsJ = allColors.join('|'); export const shades = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']; -export const shadesJ = shades.join('|'); \ No newline at end of file +export const shadesJ = shades.join('|'); diff --git a/src/lib/types/directions.ts b/src/lib/types/directions.ts index d3761513..ac5c366f 100644 --- a/src/lib/types/directions.ts +++ b/src/lib/types/directions.ts @@ -1,15 +1,14 @@ - // export const directions = ['t', 'tr', 'tl', 'r', 'l', 'b', 'br', 'bl']; export const directions: { [key: string]: string } = { - 't': 'top', - 'tr': 'top right', - 'tl': 'top left', - 'r': 'right', - 'l': 'left', - 'b': 'bottom', - 'br': 'bottom right', - 'bl': 'bottom left', -} + t: 'top', + tr: 'top right', + tl: 'top left', + r: 'right', + l: 'left', + b: 'bottom', + br: 'bottom right', + bl: 'bottom left' +}; export const directionsJ = Object.keys(directions).join('|'); diff --git a/src/lib/types/positions.ts b/src/lib/types/positions.ts index 1f64cf6d..21a42ddf 100644 --- a/src/lib/types/positions.ts +++ b/src/lib/types/positions.ts @@ -1,3 +1,2 @@ - export const positions = ['l', 'r', 't', 'b', 'tl', 'tr', 'bl', 'br']; -export const pos_j = positions.join('|'); \ No newline at end of file +export const pos_j = positions.join('|'); diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts index 7094f6b7..1902a479 100644 --- a/src/lib/types/types.ts +++ b/src/lib/types/types.ts @@ -3,7 +3,17 @@ import { directions } from './directions'; export type Size = 'sm' | 'md' | 'lg' | 'xl'; -export type Rounded = 'rounded-btn' | 'rounded-container' | 'rounded-none' | 'rounded-sm' | 'rounded-md' | 'rounded-lg' | 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl' | 'rounded-full'; +export type Rounded = + | 'rounded-btn' + | 'rounded-container' + | 'rounded-none' + | 'rounded-sm' + | 'rounded-md' + | 'rounded-lg' + | 'rounded-xl' + | 'rounded-2xl' + | 'rounded-3xl' + | 'rounded-full'; export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; @@ -12,21 +22,33 @@ export const sizesJ = sizes.join('|'); export type ShortcutVariable = 'themeColors' | 'allColors' | 'shades' | 'directions' | 'sizes'; -export type Keyword = 'button' | 'icons' | 'cards' | 'chips' | 'gradient' | 'glass' | 'text' | 'background' | 'dark/light mode' | 'hover' | 'border' | 'spinners'; +export type Keyword = + | 'button' + | 'icons' + | 'cards' + | 'chips' + | 'gradient' + | 'glass' + | 'text' + | 'background' + | 'dark/light mode' + | 'hover' + | 'border' + | 'spinners'; export type RulesDescription = { - rule: string, - keywords: Keyword[], - variablesUsed: ShortcutVariable[], - classes?: string[], - description: string, - examples: string[], + rule: string; + keywords: Keyword[]; + variablesUsed: ShortcutVariable[]; + classes?: string[]; + description: string; + examples: string[]; }; export const variablesDictionary = { - themeColors, - allColors, - shades, - directions, - sizes, -}; \ No newline at end of file + themeColors, + allColors, + shades, + directions, + sizes +}; diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 49db2a16..ad70aaae 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -58,7 +58,7 @@ `} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 96fa83d6..7af42479 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -27,8 +27,7 @@ { icon: 'i-mdi-theme-light-dark', title: 'Dark + Light Mode', - description: - 'Styled components support dark / light mode out of the box.' + description: 'Styled components support dark / light mode out of the box.' }, { icon: 'i-vscode-icons-file-type-unocss', @@ -43,7 +42,8 @@ { icon: 'i-mdi-dots-grid', title: 'Tokens & Shortcuts', - description: 'Helpful shortcuts make it simpler to create consistent UIs with fewer CSS classes.' + description: + 'Helpful shortcuts make it simpler to create consistent UIs with fewer CSS classes.' } ]; @@ -55,8 +55,7 @@ } #ato-ui-docu > div { background-color: rgb(var(--color-surface-50)); - background-image: - radial-gradient( + background-image: radial-gradient( at 50% 0%, rgba(var(--color-surface-400), 0.25) 0px, transparent 50% @@ -93,7 +92,9 @@ class="block h-0.5 max-w-0 rounded-btn bg-secondary-500 transition-all duration-500 group-hover:max-w-full" />
-

+

{description}

diff --git a/src/routes/api/highlight/+server.ts b/src/routes/api/highlight/+server.ts index 309af500..2e1cc08c 100644 --- a/src/routes/api/highlight/+server.ts +++ b/src/routes/api/highlight/+server.ts @@ -1,15 +1,15 @@ -import type { RequestHandler } from "./$types"; -import { json } from "@sveltejs/kit"; +import type { RequestHandler } from './$types'; +import { json } from '@sveltejs/kit'; export const POST: RequestHandler = async ({ fetch, request }) => { - const response = await fetch('/search/highlighted-examples.json'); - const highlights = await response.json(); - - const { example } = await request.json(); + const response = await fetch('/search/highlighted-examples.json'); + const highlights = await response.json(); - if (Object.keys(highlights).includes(example)) { - return json(highlights[example], { status: 200 }); - } + const { example } = await request.json(); - return json({ dark_html: '', light_html: ''}, { status: 404 }) -} \ No newline at end of file + if (Object.keys(highlights).includes(example)) { + return json(highlights[example], { status: 200 }); + } + + return json({ dark_html: '', light_html: '' }, { status: 404 }); +}; diff --git a/src/routes/app.css b/src/routes/app.css index 5c41ca39..2237b1ca 100644 --- a/src/routes/app.css +++ b/src/routes/app.css @@ -1,16 +1,15 @@ - /* html, body { --at-apply: "min-w-screen w-full h-full"; } */ .prose { - --at-apply: "w-full text-surface-900-50"; + --at-apply: 'w-full text-surface-900-50'; } [data-highlighted-line] { /* --at-apply: "bg-surface-400/80"; */ /* background: rgba(var(--color-surface-400), 1); */ - --at-apply: "bg-surface-950/60"; + --at-apply: 'bg-surface-950/60'; box-shadow: -5px 0 0px 0 rgba(var(--color-primary-300)); } @@ -27,28 +26,27 @@ pre > code { } */ [data-chars-id] { - --at-apply: "p-1 rounded-btn"; + --at-apply: 'p-1 rounded-btn'; } [data-chars-id='v'] { - --at-apply: "!text-yellow-50 bg-yellow-800/60 border-b-yellow-600 font-bold"; + --at-apply: '!text-yellow-50 bg-yellow-800/60 border-b-yellow-600 font-bold'; } [data-chars-id='builder'] { /* --at-apply: "!text-yellow-50 bg-yellow-800/60 border-b-yellow-600 font-bold"; */ - --at-apply: "bg-yellow-800/50 font-semibold"; + --at-apply: 'bg-yellow-800/50 font-semibold'; } [data-chars-id='prop'] { /* --at-apply: "!text-yellow-50 bg-yellow-800/60 border-b-yellow-600 font-bold"; */ - --at-apply: "bg-yellow-800/50 font-semibold"; + --at-apply: 'bg-yellow-800/50 font-semibold'; } /* [data-chars-id='builder'] > span { --at-apply: "font-bold"; } */ - /* .prose > :is(h1, h2, h3, h4, h5, h6) > a { position: relative; @@ -101,26 +99,28 @@ pre > code { } */ -.prose > p > code, p > code, li > code { - --at-apply: "px-2 bg-primary-500/20 border-1 border-primary-500 rounded-container selection:(text-on-primary bg-primary-500/70)"; +.prose > p > code, +p > code, +li > code { + --at-apply: 'px-2 bg-primary-500/20 border-1 border-primary-500 rounded-container selection:(text-on-primary bg-primary-500/70)'; } ::view-transition-old(root), ::view-transition-new(root) { - animation: none; - mix-blend-mode: normal; + animation: none; + mix-blend-mode: normal; } ::view-transition-old(root) { - z-index: 1; + z-index: 1; } ::view-transition-new(root) { - z-index: 9999; + z-index: 9999; } .dark::view-transition-old(root) { - z-index: 9999; + z-index: 9999; } .dark::view-transition-new(root) { - z-index: 1; + z-index: 1; } /* --- Scrollbars --- */ @@ -180,4 +180,4 @@ body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-surface-500)); background-clip: padding-box; -} \ No newline at end of file +} diff --git a/src/routes/designer/colors.ts b/src/routes/designer/colors.ts index bab9899b..d6655f77 100644 --- a/src/routes/designer/colors.ts +++ b/src/routes/designer/colors.ts @@ -4,7 +4,15 @@ import tinycolor from 'tinycolor2'; -import type { Rgb, Contrast, PaletteShades, Shade, ShadeValues, FullTheme, ColorManipulation } from "./types.d"; +import type { + Rgb, + Contrast, + PaletteShades, + Shade, + ShadeValues, + FullTheme, + ColorManipulation +} from './types.d'; import { theme_colors, shade_values } from './constants'; function hexToRgb(hex: string): Rgb | null { @@ -28,7 +36,7 @@ function hex_to_rgb_string(hex: string): string { const rgb: Rgb | null = hexToRgb(hex); if (rgb) { - const { r, g, b} = rgb; + const { r, g, b } = rgb; return `${r}, ${g}, ${b}`; } @@ -96,7 +104,7 @@ function find_best_contrast(hex: string): Contrast { return { contrast, on_color: contrast_color - } + }; } export default function generate_palette(baseColor: ColorManipulation): PaletteShades { @@ -119,7 +127,7 @@ export default function generate_palette(baseColor: ColorManipulation): PaletteS shade_values.forEach((v) => { const contrast = find_best_contrast(response[v]); - + palette_shades[v] = { color: response[v], ...contrast @@ -134,23 +142,27 @@ export function create_css_colors(theme: FullTheme): string { theme_colors.forEach((c, i) => { if (c in theme) { - css_string += `\t/* ${c} colors */\n` + css_string += `\t/* ${c} colors */\n`; shade_values.forEach((v) => { if (v in theme[c]) { - css_string += `\t--color-${c}-${v}: ${hex_to_rgb_string(theme[c][v]?.color)}; /* ${theme[c][v]?.color} */\n` + css_string += `\t--color-${c}-${v}: ${hex_to_rgb_string( + theme[c][v]?.color + )}; /* ${theme[c][v]?.color} */\n`; } }); css_string += '\n'; shade_values.forEach((v) => { if (v in theme[c]) { - css_string += `\t--on-${c}-${v}: ${hex_to_rgb_string(theme[c][v]?.on_color)}; /* ${theme[c][v]?.on_color} */\n` + css_string += `\t--on-${c}-${v}: ${hex_to_rgb_string( + theme[c][v]?.on_color + )}; /* ${theme[c][v]?.on_color} */\n`; } }); css_string += i === theme_colors.length - 1 ? '' : '\n'; } - }) + }); return css_string; -} \ No newline at end of file +} diff --git a/src/routes/designer/constants.ts b/src/routes/designer/constants.ts index b59f667d..06de96e8 100644 --- a/src/routes/designer/constants.ts +++ b/src/routes/designer/constants.ts @@ -1,14 +1,13 @@ -import type { ShadeValues, ThemeColor } from "./types"; - +import type { ShadeValues, ThemeColor } from './types'; export const shade_values: ShadeValues[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]; export const theme_colors: ThemeColor[] = [ - 'primary', - 'secondary', - 'tertiary', - 'surface', - 'success', - 'warning', - 'error' -]; \ No newline at end of file + 'primary', + 'secondary', + 'tertiary', + 'surface', + 'success', + 'warning', + 'error' +]; diff --git a/src/routes/designer/options.ts b/src/routes/designer/options.ts index 9ec724e9..fc7e14d3 100644 --- a/src/routes/designer/options.ts +++ b/src/routes/designer/options.ts @@ -1,48 +1,36 @@ -import type { Options } from "./types"; +import type { Options } from './types'; -const radius = [ - '0px', - '2px', - '4px', - '6px', - '8px', - '10px', - '12px', - '14px', - '16px', - '20px', - '24px' -]; +const radius = ['0px', '2px', '4px', '6px', '8px', '10px', '12px', '14px', '16px', '20px', '24px']; export const options: Options = { - container_radius: radius, - btn_sizes: ['sm', 'md', 'lg', 'xl'], - btn_radius: [...radius, '9999px'], - btn_icon_radius: [...radius, '9999px'], - btns: { - sm: { - title: 'Small buttons (btn-sm)', - py: [0.15, 0.2, 0.25], - px: [0.375, 0.4, 0.5], - font: [400, 500, 600], - }, - md: { - title: 'Medium buttons (btn-md)', - py: [0.25, 0.3, 0.35, 0.375], - px: [0.65, 0.7, 0.75], - font: [500, 600], - }, - lg: { - title: 'Large buttons (btn-lg)', - py: [0.375, 0.5, 0.625], - px: [0.75, 0.875, 1, 1.125, 1.25], - font: [500, 600, 700], - }, - xl: { - title: 'Extra-large buttons (btn-xl)', - py: [0.625, 0.75, 0.875], - px: [1.25, 1.375, 1.5, 1.625, 1.75], - font: [600, 700, 800, 900], - } - } -}; \ No newline at end of file + container_radius: radius, + btn_sizes: ['sm', 'md', 'lg', 'xl'], + btn_radius: [...radius, '9999px'], + btn_icon_radius: [...radius, '9999px'], + btns: { + sm: { + title: 'Small buttons (btn-sm)', + py: [0.15, 0.2, 0.25], + px: [0.375, 0.4, 0.5], + font: [400, 500, 600] + }, + md: { + title: 'Medium buttons (btn-md)', + py: [0.25, 0.3, 0.35, 0.375], + px: [0.65, 0.7, 0.75], + font: [500, 600] + }, + lg: { + title: 'Large buttons (btn-lg)', + py: [0.375, 0.5, 0.625], + px: [0.75, 0.875, 1, 1.125, 1.25], + font: [500, 600, 700] + }, + xl: { + title: 'Extra-large buttons (btn-xl)', + py: [0.625, 0.75, 0.875], + px: [1.25, 1.375, 1.5, 1.625, 1.75], + font: [600, 700, 800, 900] + } + } +}; diff --git a/src/routes/designer/shade-contrasts.svelte b/src/routes/designer/shade-contrasts.svelte index 0ff56973..16e2f159 100644 --- a/src/routes/designer/shade-contrasts.svelte +++ b/src/routes/designer/shade-contrasts.svelte @@ -36,15 +36,15 @@
- +
= persisted('ato-custom-theme-css', { - colors: { - primary: { color: '#0371d8', lighten_values, darken_values }, - secondary: { color: '#10c5ea', lighten_values, darken_values }, - tertiary: { color: '#18dc6d', lighten_values, darken_values }, - surface: { color: '#0f0f4d', lighten_values, darken_values }, - success: { color: '#3bc43b', lighten_values, darken_values }, - warning: { color: '#e8b017', lighten_values, darken_values }, - error: { color: '#ff006f', lighten_values, darken_values } - }, - container_radius: '6px', - btns: { - radius: '6px', - icon_radius: '6px', - sm: { py: 0.25, px: 0.5, font: 500 }, - md: { py: 0.25, px: 0.75, font: 500 }, - lg: { py: 0.5, px: 1, font: 600 }, - xl: { py: 0.75, px: 1.5, font: 700 }, - } + colors: { + primary: { color: '#0371d8', lighten_values, darken_values }, + secondary: { color: '#10c5ea', lighten_values, darken_values }, + tertiary: { color: '#18dc6d', lighten_values, darken_values }, + surface: { color: '#0f0f4d', lighten_values, darken_values }, + success: { color: '#3bc43b', lighten_values, darken_values }, + warning: { color: '#e8b017', lighten_values, darken_values }, + error: { color: '#ff006f', lighten_values, darken_values } + }, + container_radius: '6px', + btns: { + radius: '6px', + icon_radius: '6px', + sm: { py: 0.25, px: 0.5, font: 500 }, + md: { py: 0.25, px: 0.75, font: 500 }, + lg: { py: 0.5, px: 1, font: 600 }, + xl: { py: 0.75, px: 1.5, font: 700 } + } }); /** * Nice colors: - * + * * {"primary":"#0371d8","secondary":"#10c5ea","tertiary":"#18dc6d","surface":"#0f0f4d","success":"#3bc43b","warning":"#e8b017","error":"#ff006f"} - */ \ No newline at end of file + */ diff --git a/src/routes/designer/types.d.ts b/src/routes/designer/types.d.ts index 0c875649..0f6b5b53 100644 --- a/src/routes/designer/types.d.ts +++ b/src/routes/designer/types.d.ts @@ -1,57 +1,57 @@ export type ThemeColor = - | 'primary' - | 'secondary' - | 'tertiary' - | 'surface' - | 'success' - | 'warning' - | 'error'; + | 'primary' + | 'secondary' + | 'tertiary' + | 'surface' + | 'success' + | 'warning' + | 'error'; export type ShadeValues = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950; type ColorManipulation = { - color: string, - lighten_values: number[], - darken_values: number[], -} + color: string; + lighten_values: number[]; + darken_values: number[]; +}; export type LocalStorageColor = { [key in ThemeColor]: ColorManipulation; -} +}; type ButtonVariables = { - py: number, - px: number, - font: number, -} + py: number; + px: number; + font: number; +}; type LocalStorageButtons = { - radius: string, - icon_radius: string, - sm: ButtonVariables, - md: ButtonVariables, - lg: ButtonVariables, - xl: ButtonVariables -} + radius: string; + icon_radius: string; + sm: ButtonVariables; + md: ButtonVariables; + lg: ButtonVariables; + xl: ButtonVariables; +}; export type LocalStorageTheme = { - colors: LocalStorageColor, - btns: LocalStorageButtons, - container_radius: string + colors: LocalStorageColor; + btns: LocalStorageButtons; + container_radius: string; }; export type Contrast = { - on_color: string, - contrast: number, -} + on_color: string; + contrast: number; +}; export type Shade = Contrast & { - color: string -} + color: string; +}; export type PaletteShades = { [key in ShadeValues]: Shade; -} +}; export type Palette = { [key in ShadeValues]: string; @@ -70,16 +70,16 @@ export type FullTheme = { export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'; export type Options = { - container_radius: string[], - btn_sizes: ButtonSize[], - btn_radius: string[], - btn_icon_radius: string[], + container_radius: string[]; + btn_sizes: ButtonSize[]; + btn_radius: string[]; + btn_icon_radius: string[]; btns: { [key in ButtonSize]: { - title: string, - py: number[], - px: number[], - font: number[] - } - } -} \ No newline at end of file + title: string; + py: number[]; + px: number[]; + font: number[]; + }; + }; +}; diff --git a/src/routes/docs/actions/[slug]/+page.svelte b/src/routes/docs/actions/[slug]/+page.svelte index 1e5a2c53..ed8fd318 100644 --- a/src/routes/docs/actions/[slug]/+page.svelte +++ b/src/routes/docs/actions/[slug]/+page.svelte @@ -14,4 +14,4 @@
--> -

Actions

\ No newline at end of file +

Actions

diff --git a/src/routes/docs/actions/[slug]/+page.ts b/src/routes/docs/actions/[slug]/+page.ts index 5dd5dbf7..97c62131 100644 --- a/src/routes/docs/actions/[slug]/+page.ts +++ b/src/routes/docs/actions/[slug]/+page.ts @@ -3,14 +3,16 @@ import type { PageLoad } from './$types'; export const load = (async ({ params }) => { try { - const documentation = await import(/* @vite-ignore */`../../../../docs/guides/actions/${params.slug}.md`) + const documentation = await import( + /* @vite-ignore */ `../../../../docs/guides/actions/${params.slug}.md` + ); return { slug: params.slug, content: documentation.default, meta: documentation.metadata - } + }; } catch (e) { - throw error(404, `Could not find ${params.slug}`) + throw error(404, `Could not find ${params.slug}`); } -}) satisfies PageLoad; \ No newline at end of file +}) satisfies PageLoad; diff --git a/src/routes/docs/components/[slug]/+page.server.ts b/src/routes/docs/components/[slug]/+page.server.ts index fc3bcafc..d438b326 100644 --- a/src/routes/docs/components/[slug]/+page.server.ts +++ b/src/routes/docs/components/[slug]/+page.server.ts @@ -7,49 +7,52 @@ import { componentsList, isComponent, componentsData } from '$docs/data/componen import { getAllPreviewSnippets, getComponentsTypesSnippet } from '$docs/utils/preview'; import type { ComponentsAPI } from '$docs/data/types'; - export const entries = (() => { const slugs = componentsList.map((component) => ({ slug: component })); return slugs; }) satisfies EntryGenerator; +export const load = (async ({ params, fetch }) => { + const response = await fetch('/api/component-apis.json'); + const componentAPIs: ComponentsAPI = await response.json(); -export const load = (async ({ params, fetch }) => { - - const response = await fetch('/api/component-apis.json'); - const componentAPIs: ComponentsAPI = await response.json(); - - const { slug } = params; + const { slug } = params; if (!isComponent(slug)) { throw error(404); } - if (!slug.includes('-headless') && !(slug in componentAPIs)) { - throw error(500); - } + if (!slug.includes('-headless') && !(slug in componentAPIs)) { + throw error(500); + } - // Get the theme and update theme store. - let theme = get(shikiThemeStore); + // Get the theme and update theme store. + let theme = get(shikiThemeStore); if (!theme) { - const response = await fetch('/moonlight-2-theme.json'); - theme = await response.json(); + const response = await fetch('/moonlight-2-theme.json'); + theme = await response.json(); - shikiThemeStore.set(theme); + shikiThemeStore.set(theme); } - const previewSnippets = await getAllPreviewSnippets({ slug, theme: theme ?? 'github-dark', highlights: componentsData[slug].highlights }); + const previewSnippets = await getAllPreviewSnippets({ + slug, + theme: theme ?? 'github-dark', + highlights: componentsData[slug].highlights + }); - const isStyledPage = !slug.includes('-headless'); + const isStyledPage = !slug.includes('-headless'); - const typesSnippet = isStyledPage ? await getComponentsTypesSnippet({ slug, theme: theme ?? 'github-dark' }) : ''; + const typesSnippet = isStyledPage + ? await getComponentsTypesSnippet({ slug, theme: theme ?? 'github-dark' }) + : ''; return { - previewSnippets, - typesSnippet, - isStyledPage, - componentData: componentsData[slug], - componentAPI: componentAPIs[slug] + previewSnippets, + typesSnippet, + isStyledPage, + componentData: componentsData[slug], + componentAPI: componentAPIs[slug] }; -}) satisfies PageServerLoad; \ No newline at end of file +}) satisfies PageServerLoad; diff --git a/src/routes/docs/components/[slug]/+page.ts b/src/routes/docs/components/[slug]/+page.ts index fedd736c..e4e0b35c 100644 --- a/src/routes/docs/components/[slug]/+page.ts +++ b/src/routes/docs/components/[slug]/+page.ts @@ -5,18 +5,18 @@ import { isComponent } from '$docs/data/components'; import { getAllPreviewComponents, getDocsData } from '$docs/utils/preview'; export const load = (async ({ params, data }) => { - const { slug } = params; + const { slug } = params; if (!isComponent(slug)) { throw error(404); } - const previewComponents = await getAllPreviewComponents({ slug }); - const docsComponentData = await getDocsData({ slug, isComponent: true }); + const previewComponents = await getAllPreviewComponents({ slug }); + const docsComponentData = await getDocsData({ slug, isComponent: true }); - return { - ...data, - previewComponents, - ...docsComponentData, - }; -}) satisfies PageLoad; \ No newline at end of file + return { + ...data, + previewComponents, + ...docsComponentData + }; +}) satisfies PageLoad; diff --git a/src/routes/docs/get-started/[slug]/+page.server.ts b/src/routes/docs/get-started/[slug]/+page.server.ts index 2a86719b..7dda56cc 100644 --- a/src/routes/docs/get-started/[slug]/+page.server.ts +++ b/src/routes/docs/get-started/[slug]/+page.server.ts @@ -5,33 +5,35 @@ import type { EntryGenerator, PageServerLoad } from './$types'; import { shikiThemeStore } from '$docs/utils/stores'; import { getAllPreviewSnippets, getGuidesFolderFiles } from '$docs/utils/preview'; - export const entries = (() => { const slugs = getGuidesFolderFiles('get-started').map((file) => ({ slug: file })); return slugs; }) satisfies EntryGenerator; +export const load = (async ({ params, fetch }) => { + const { slug } = params; -export const load = (async ({ params, fetch }) => { - const { slug } = params; - - if (!getGuidesFolderFiles('get-started').includes(slug)) { - throw error(404); - } + if (!getGuidesFolderFiles('get-started').includes(slug)) { + throw error(404); + } - // Get the theme and update theme store. - let theme = get(shikiThemeStore); + // Get the theme and update theme store. + let theme = get(shikiThemeStore); if (!theme) { - const response = await fetch('/moonlight-2-theme.json'); - theme = await response.json(); + const response = await fetch('/moonlight-2-theme.json'); + theme = await response.json(); - shikiThemeStore.set(theme); + shikiThemeStore.set(theme); } - const previewSnippets = await getAllPreviewSnippets({ slug, theme: theme ?? 'github-dark', required: false }); + const previewSnippets = await getAllPreviewSnippets({ + slug, + theme: theme ?? 'github-dark', + required: false + }); return { - previewSnippets + previewSnippets }; -}) satisfies PageServerLoad; \ No newline at end of file +}) satisfies PageServerLoad; diff --git a/src/routes/docs/get-started/[slug]/+page.ts b/src/routes/docs/get-started/[slug]/+page.ts index ed31b20e..86069d21 100644 --- a/src/routes/docs/get-started/[slug]/+page.ts +++ b/src/routes/docs/get-started/[slug]/+page.ts @@ -2,7 +2,6 @@ // import type { PageLoad } from './$types'; // import type { PreviewFile } from '$docs/utils/preview'; - // export const load = (async ({ params }) => { // try { // // const documentation = await import(/* @vite-ignore */`../../../../docs/guides/get-started/${params.slug}.md`); @@ -30,19 +29,18 @@ // } // }) satisfies PageLoad; - import type { PageLoad } from './$types'; import { getAllPreviewComponents, getDocsData } from '$docs/utils/preview'; export const load = (async ({ params, data }) => { - const { slug } = params; + const { slug } = params; - const previewComponents = await getAllPreviewComponents({ slug, required: false }); - const docsComponentData = await getDocsData({ slug, isComponent: false }); + const previewComponents = await getAllPreviewComponents({ slug, required: false }); + const docsComponentData = await getDocsData({ slug, isComponent: false }); - return { - ...data, - previewComponents, - ...docsComponentData, - }; -}) satisfies PageLoad; \ No newline at end of file + return { + ...data, + previewComponents, + ...docsComponentData + }; +}) satisfies PageLoad; diff --git a/src/routes/docs/tokens/[slug]/+page.ts b/src/routes/docs/tokens/[slug]/+page.ts index c83b6082..cb1e3853 100644 --- a/src/routes/docs/tokens/[slug]/+page.ts +++ b/src/routes/docs/tokens/[slug]/+page.ts @@ -8,15 +8,15 @@ export const entries = (() => { }) satisfies EntryGenerator; export const load = (async ({ params }) => { - const { slug } = params; + const { slug } = params; if (!getGuidesFolderFiles('tokens').includes(slug)) { - throw error(404); - } + throw error(404); + } - const docsComponentData = await getDocsData({ slug, isComponent: false }); + const docsComponentData = await getDocsData({ slug, isComponent: false }); - return { - ...docsComponentData, - }; -}) satisfies PageLoad; \ No newline at end of file + return { + ...docsComponentData + }; +}) satisfies PageLoad; diff --git a/src/routes/docs/unocss/[slug]/+page.server.ts b/src/routes/docs/unocss/[slug]/+page.server.ts index 8a163bb3..885d6195 100644 --- a/src/routes/docs/unocss/[slug]/+page.server.ts +++ b/src/routes/docs/unocss/[slug]/+page.server.ts @@ -5,33 +5,35 @@ import type { EntryGenerator, PageServerLoad } from './$types'; import { shikiThemeStore } from '$docs/utils/stores'; import { getAllPreviewSnippets, getGuidesFolderFiles } from '$docs/utils/preview'; - export const entries = (() => { const slugs = getGuidesFolderFiles('unocss').map((file) => ({ slug: file })); return slugs; }) satisfies EntryGenerator; +export const load = (async ({ params, fetch }) => { + const { slug } = params; -export const load = (async ({ params, fetch }) => { - const { slug } = params; - - if (!getGuidesFolderFiles('unocss').includes(slug)) { - throw error(404); - } + if (!getGuidesFolderFiles('unocss').includes(slug)) { + throw error(404); + } - // Get the theme and update theme store. - let theme = get(shikiThemeStore); + // Get the theme and update theme store. + let theme = get(shikiThemeStore); if (!theme) { - const response = await fetch('/moonlight-2-theme.json'); - theme = await response.json(); + const response = await fetch('/moonlight-2-theme.json'); + theme = await response.json(); - shikiThemeStore.set(theme); + shikiThemeStore.set(theme); } - const previewSnippets = await getAllPreviewSnippets({ slug, theme: theme ?? 'github-dark', required: false }); + const previewSnippets = await getAllPreviewSnippets({ + slug, + theme: theme ?? 'github-dark', + required: false + }); return { - previewSnippets + previewSnippets }; -}) satisfies PageServerLoad; \ No newline at end of file +}) satisfies PageServerLoad; diff --git a/src/routes/docs/unocss/[slug]/+page.ts b/src/routes/docs/unocss/[slug]/+page.ts index b91b6ebc..f1fb8eb2 100644 --- a/src/routes/docs/unocss/[slug]/+page.ts +++ b/src/routes/docs/unocss/[slug]/+page.ts @@ -1,16 +1,15 @@ - import type { PageLoad } from './$types'; import { getAllPreviewComponents, getDocsData } from '$docs/utils/preview'; export const load = (async ({ params, data }) => { - const { slug } = params; + const { slug } = params; - const previewComponents = await getAllPreviewComponents({ slug, required: false }); - const docsComponentData = await getDocsData({ slug, isComponent: false }); + const previewComponents = await getAllPreviewComponents({ slug, required: false }); + const docsComponentData = await getDocsData({ slug, isComponent: false }); - return { - ...data, - previewComponents, - ...docsComponentData, - }; -}) satisfies PageLoad; \ No newline at end of file + return { + ...data, + previewComponents, + ...docsComponentData + }; +}) satisfies PageLoad; diff --git a/src/routes/examples/dialog/+page.svelte b/src/routes/examples/dialog/+page.svelte index 07ea3ac8..7e21c3b5 100644 --- a/src/routes/examples/dialog/+page.svelte +++ b/src/routes/examples/dialog/+page.svelte @@ -5,57 +5,30 @@ let open = writable(false); - + -

- Edit profile -

-

- Make changes to your profile here. -

+

Edit profile

+

Make changes to your profile here.

-
- - -
-
- - -
-
- - -
+
+ + +
+
+ + +
+
+ + +
\ No newline at end of file + --at-apply: 'rounded-container p-2 w-full bg-surface-100-800 outline-primary-500 border-1 border-solid border-surface-300/50 selection:(text-on-primary bg-primary-500/70)'; + } + diff --git a/src/routes/examples/landing-2/+page.svelte b/src/routes/examples/landing-2/+page.svelte index a416d878..69a57389 100644 --- a/src/routes/examples/landing-2/+page.svelte +++ b/src/routes/examples/landing-2/+page.svelte @@ -49,8 +49,7 @@ } #ato-ui-docu > div { background-color: rgb(var(--color-surface-50)); - background-image: - radial-gradient( + background-image: radial-gradient( at 50% 0%, rgba(var(--color-surface-400), 0.25) 0px, transparent 50% @@ -87,7 +86,9 @@ class="block h-0.5 max-w-0 rounded-btn bg-secondary-500 transition-all duration-500 group-hover:max-w-full" />
-

+

{description}

diff --git a/src/routes/examples/landing-2/particles.svelte b/src/routes/examples/landing-2/particles.svelte index dbd5617c..3a73a66f 100644 --- a/src/routes/examples/landing-2/particles.svelte +++ b/src/routes/examples/landing-2/particles.svelte @@ -3,13 +3,15 @@
- Ato + Ato - UI -
\ No newline at end of file + UI +
diff --git a/src/routes/examples/landing-2/ring.svelte b/src/routes/examples/landing-2/ring.svelte index 63359f0a..b2fd0e69 100644 --- a/src/routes/examples/landing-2/ring.svelte +++ b/src/routes/examples/landing-2/ring.svelte @@ -1,11 +1,11 @@ -
- {#each particles as { z, y, color }, i} -
+ {#each particles as { z, y, color }, i} +
- {/each} + /> + {/each}