unocss-preset-naive-ui

WIP

This preset will help you make naive-ui and unocss work together. Based on unocss-preset-theme.

Installation

npm i -D unocss-preset-naive-ui

Usages

We use uno.config.ts as an example below.

import { defineConfig, presetUno } from 'unocss';
import { presetNaiveUi } from 'unocss-preset-naive-ui';

export default defineConfig({
  presets: [
    presetUno(),
     // place after other presets, since it overrides some values by default
    presetNaiveUi({ ... }),
  ],
});

We recommend you to use tailwind compat reset if you are facing style conflicts.

Options

You can a options object to the preset.

import { defineConfig, presetUno } from 'unocss';
import { presetNaiveUi } from 'unocss-preset-naive-ui';

export default defineConfig({
  presets: [
    presetUno(),
    presetNaiveUi({
      // top-level options
      prefix: '--un-preset-n',
      preferCssVariables: true,
      namespace: '',

      // theme options
      primary: '#18a058',
      light: {
        primary: '#18a058',
      },
      dark: {
        primary: '#63e2b7',
      },
    }),
  ],
});

prefix

Top-level Option

This option is extended from unocss-preset-theme. Defaults to --un-preset-n.

selectors

Top-level Option

This option is extended from unocss-preset-theme and use its default value.

You may need to update this field when you are developing with uni-app, taro, etc.

preferCssVariables

Top-level Option

Prefer existed css variables or not. Defaults to true.

If true, use naive-ui css variables and you have to follow naive-ui design standards.

If false, use generated variables and you can use more variables away from naive-ui design standards.

You may need to set this field to false when you are developing with uni-app, taro, etc.

namespace

Top-level Option

The namespace used to find css variables. Used when preferCssVariables is true. Defaults to ``.

breakpoints

Top-level Option

Breakpoints. Defaults to { xs: '0px', s: '640px', m: '1024px', l: '1280px', xl: '1536px', xxl: '1920px' }.

primary

Base primary color. Used when preferCssVariables is false.

By default #18a058 for light theme and #63e2b7 for dark theme.

primaryHover

Hover primary color. Used when preferCssVariables is false.

By default #36ad6a for light theme and #7fe7c4 for dark theme.

primaryPressed

Pressed primary color. Used when preferCssVariables is false.

By default #0c7a43 for light theme and #5acea7 for dark theme.

primarySuppl

Supplement(?) primary color. Used when preferCssVariables is false.

By default #36ad6a for light theme and rgb(42, 148, 125) for dark theme.

info

Base info color. Used when preferCssVariables is false.

By default #2080f0 for light theme and #70c0e8 for dark theme.

infoHover

Hover info color. Used when preferCssVariables is false.

By default #4098fc for light theme and #8acbec for dark theme.

infoPressed

Pressed info color. Used when preferCssVariables is false.

By default #1060c9 for light theme and #66afd3 for dark theme.

infoSuppl

Supplement(?) info color. Used when preferCssVariables is false.

By default #4098fc for light theme and rgb(56, 137, 197) for dark theme.

success

Base success color. Used when preferCssVariables is false.

By default #18a058 for light theme and #63e2b7 for dark theme.

successHover

Hover success color. Used when preferCssVariables is false.

By default #36ad6a for light theme and #7fe7c4 for dark theme.

successPressed

Pressed success color. Used when preferCssVariables is false.

By default #0c7a43 for light theme and #5acea7 for dark theme.

successSuppl

Supplement(?) success color. Used when preferCssVariables is false.

By default #36ad6a for light theme and rgb(42, 148, 125) for dark theme.

warning

Base warning color. Used when preferCssVariables is false.

By default #f0a020 for light theme and #f2c97d for dark theme.

warningHover

Hover warning color. Used when preferCssVariables is false.

By default #fcb040 for light theme and #f5d599 for dark theme.

warningPressed

Pressed warning color. Used when preferCssVariables is false.

By default #c97c10 for light theme and #e6c260 for dark theme.

warningSuppl

Supplement(?) warning color. Used when preferCssVariables is false.

By default #fcb040 for light theme and rgb(240, 138, 0) for dark theme.

error

Base error color. Used when preferCssVariables is false.

By default #d03050 for light theme and #e88080 for dark theme.

errorHover

Hover error color. Used when preferCssVariables is false.

By default #de576d for light theme and #e98b8b for dark theme.

errorPressed

Pressed error color. Used when preferCssVariables is false.

By default #ab1f3f for light theme and #e57272 for dark theme.

errorSuppl

Supplement(?) error color. Used when preferCssVariables is false.

By default #de576d for light theme and rgb(208, 58, 82) for dark theme.

danger

Base danger color. Used when preferCssVariables is false.

By default #d03050 for light theme and #e88080 for dark theme.

dangerHover

Hover danger color. Used when preferCssVariables is false.

By default #de576d for light theme and #e98b8b for dark theme.

dangerPressed

Pressed danger color. Used when preferCssVariables is false.

By default #ab1f3f for light theme and #e57272 for dark theme.

dangerSuppl

Supplement(?) danger color. Used when preferCssVariables is false.

By default #de576d for light theme and rgb(208, 58, 82) for dark theme.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

fix(deps): update dependency unocss to ^0.56.0
fix(deps): update dependency unocss-preset-theme to ^0.10.0
chore(deps): update dependency lint-staged to v15
chore(deps): update dependency unbuild to v2
fix(deps): update dependency @ctrl/tinycolor to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

pnpm/action-setup v2

actions/setup-node v3

actions/checkout v3

pnpm/action-setup v2

actions/setup-node v3

actions/checkout v3

pnpm/action-setup v2

actions/setup-node v3

.github/workflows/release.yml

actions/checkout v3

pnpm/action-setup v2

actions/setup-node v3

.github/workflows/stale.yml

actions/stale v8

npm

package.json

@ctrl/tinycolor ^3.6.0

unocss ^0.55.1

unocss-preset-theme ^0.9.1

@commitlint/cli ^17.7.1

@commitlint/config-conventional ^17.7.0

@commitlint/prompt ^17.7.1

@modyqyw/fabric ^9.0.3

@tsconfig/node18 ^18.2.0

@types/node ^18.17.5

@typescript-eslint/eslint-plugin ^6.4.0

@typescript-eslint/parser ^6.4.0

@vitest/coverage-v8 ^0.34.2

@vitest/ui ^0.34.2

commit-and-tag-version ^11.2.2

commitizen ^4.3.0

concurrently ^8.2.0

eslint ^8.47.0

is-ci ^3.0.1

lint-staged ^13.3.0

markdownlint-cli ^0.35.0

prettier ^3.0.2

publint ^0.2.0

simple-git-hooks ^2.9.0

sort-package-json ^2.5.1

taze ^0.11.2

type-fest ^4.2.0

typescript ^5.1.6

unbuild ^1.2.1

vitest ^0.34.2

unocss >=0.52

node >=14.18

pnpm 8.6.12

nvm

.nvmrc

Check this box to trigger a request for Renovate to run again on this repository

modyqyw / unocss-preset-naive-ui Goto Github PK