feat: add guidelines

[Mister-Hope]

@pengzhanbo Need help with the color part.

I don't like the -1 -2 -3 as this will confuse developers and users. They should be something like -hover -bg

For example:

--vp-c-brand
--vp-c-brand-bg
--vp-c-brand-hover

--vp-c-text
--vp-c-mute

You can complete the guidelines, and I will sync the default-theme (classic theme)

[coveralls]

Pull Request Test Coverage Report for Build 9383177498

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 56.168%

---

Totals
Change from base Build 9381003398:	0.0%
Covered Lines:	992
Relevant Lines:	1582

---

💛 - Coveralls

[pengzhanbo]

@pengzhanbo Need help with the color part, I don't like the -1 -2 -3 they should be something like `-hover`-bg

For example:

--vp-c-brand
--vp-c-brand-bg
--vp-c-brand-hover

--vp-c-text
--vp-c-mute

You can complete the guidelines, and I will sync the default-theme (classic theme)

@pengzhanbo Need help with the color part, I don't like the -1 -2 -3 they should be something like `-hover`-bg

For example:

--vp-c-brand
--vp-c-brand-bg
--vp-c-brand-hover

--vp-c-text
--vp-c-mute

You can complete the guidelines, and I will sync the default-theme (classic theme)

OK, I am organizing the content.

[Mister-Hope]

The comment plugin still needs an update, probably after adding a useDarkMode in @vuepress/helper and a syncDarkMode helper.

The synDarkMode should be like this:

syncDarkmode(document.documentElement, 'class', { light: '', dark: 'dark' });

syncDarkmode(document.body, 'id', { light: 'light', dark: 'dark' });

It would be helpful if we force the community to use a specific darkmode selector, and provide a "Sync helper" to sync the darkmode state with other light/dark dom combinations in case some component library or other packages are requiring different ones.

[pengzhanbo]

Colors: Palette

The primitive colors used for accent colors. These colors are referenced by functional colors such as "Text", "Background", or "Brand".

Each colors have exact same color scale system with 3 levels of solid colors with different brightness, and 1 soft color.

• --vp-c-XXX: The most solid color used mainly for colored text. It must satisfy the contrast ratio against when used on top of --vp-c-XXX-soft.

• --vp-c-XXX-hover: The color used mainly for hover state of the button.

• --vp-c-XXX-bg: The color for solid background, such as bg color of the button. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it.

• --vp-c-XXX-soft: The color used for subtle background such as custom container or badges. It must satisfy the contrast ratio when putting --vp-c-XXX colors on top of it.

  The soft color must be semi transparent alpha channel. This is crucial because it allows adding multiple "soft" colors on top of each other to create a accent, such as when having inline code block inside custom containers.

For Example:

--vp-c-gray: #dddde3;
--vp-c-gray-hover: #e4e4e9;
--vp-c-gray-bg: #ebebef;
--vp-c-gray-soft: rgba(142, 150, 170, 0.14);

Colors: Background

• --vp-c-bg: The bg color used for main screen.

• --vp-c-bg-alt: The alternative bg color used in places such as "sidebar", or "code block".

• --vp-c-bg-elv: The elevated bg color. This is used at parts where it "floats", such as "dialog".

• --vp-c-bg-soft: The bg color to slightly distinguish some components from the page. Used for things like "carbon ads" or "table".

For Example:

--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #ffffff;
--vp-c-bg-soft: #f6f6f7;

Colors: Borders

• --vp-c-divider: This is used for separators. This is used to divide sections within the same components, such as having separator on "h2" heading.

• --vp-c-border: This is designed for borders on interactive components. For example this should be used for a button outline.

• --vp-c-gutter: This is used to divide components in the page. For example the header and the lest of the page.

For Example:

--vp-c-border: #c2c2c4;
--vp-c-divider: #e2e2e3;
--vp-c-gutter: #e2e2e3;

Colors: Text

• --vp-c-text-primary: Used for primary text.

• --vp-c-text-mute: Used for muted texts, such as "inactive menu" or "info texts".

• --vp-c-text-subtle: Used for subtle texts, such as "placeholders" or "caret icon".

For Example:

--vp-c-text-primary: rgba(60, 60, 67);
--vp-c-text-mute: rgba(60, 60, 67, 0.78);
--vp-c-text-subtle: rgba(60, 60, 67, 0.56);