arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 10:50:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(css): add --ui-bg-muted / --ui-border-muted variables

Browse Source 
Those are used in Nuxt UI Pro
This commit is contained in:
Benjamin Canac
2024-11-07 21:43:49 +01:00
parent a64a7104c5
commit 7f6db45f1e
2 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/1.getting-started/3.theme.md
View File

@@ -254,6 +254,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
/* Main background color */ /* Main background color */
--ui-bg: var(--color-white); --ui-bg: var(--color-white);
/* Subtle background */
--ui-bg-muted: var(--ui-color-neutral-50);
/* Slightly elevated background */ /* Slightly elevated background */
--ui-bg-elevated: var(--ui-color-neutral-100); --ui-bg-elevated: var(--ui-color-neutral-100);
/* More prominent background */ /* More prominent background */
@@ -263,6 +265,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
/* Default border color */ /* Default border color */
--ui-border: var(--ui-color-neutral-200); --ui-border: var(--ui-color-neutral-200);
/* Subtle border */
--ui-border-muted: var(--ui-color-neutral-200);
/* More prominent border */ /* More prominent border */
--ui-border-accented: var(--ui-color-neutral-300); --ui-border-accented: var(--ui-color-neutral-300);
/* Inverted border color */ /* Inverted border color */
@@ -285,6 +289,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
/* Main background color */ /* Main background color */
--ui-bg: var(--ui-color-neutral-900); --ui-bg: var(--ui-color-neutral-900);
/* Subtle background */
--ui-bg-muted: var(--ui-color-neutral-800);
/* Slightly elevated background */ /* Slightly elevated background */
--ui-bg-elevated: var(--ui-color-neutral-800); --ui-bg-elevated: var(--ui-color-neutral-800);
/* More prominent background */ /* More prominent background */
@@ -294,6 +300,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
/* Default border color */ /* Default border color */
--ui-border: var(--ui-color-neutral-800); --ui-border: var(--ui-color-neutral-800);
/* Subtle border */
--ui-border-muted: var(--ui-color-neutral-700);
/* More prominent border */ /* More prominent border */
--ui-border-accented: var(--ui-color-neutral-700); --ui-border-accented: var(--ui-color-neutral-700);
/* Inverted border color */ /* Inverted border color */

4
src/runtime/index.css
View File

@@ -21,11 +21,13 @@
--ui-text-highlighted: var(--ui-color-neutral-900); --ui-text-highlighted: var(--ui-color-neutral-900);
--ui-bg: var(--color-white); --ui-bg: var(--color-white);
--ui-bg-muted: var(--ui-color-neutral-50);
--ui-bg-elevated: var(--ui-color-neutral-100); --ui-bg-elevated: var(--ui-color-neutral-100);
--ui-bg-accented: var(--ui-color-neutral-200); --ui-bg-accented: var(--ui-color-neutral-200);
--ui-bg-inverted: var(--ui-color-neutral-900); --ui-bg-inverted: var(--ui-color-neutral-900);
--ui-border: var(--ui-color-neutral-200); --ui-border: var(--ui-color-neutral-200);
--ui-border-muted: var(--ui-color-neutral-200);
--ui-border-accented: var(--ui-color-neutral-300); --ui-border-accented: var(--ui-color-neutral-300);
--ui-border-inverted: var(--ui-color-neutral-900); --ui-border-inverted: var(--ui-color-neutral-900);
@@ -42,11 +44,13 @@
--ui-text-highlighted: var(--color-white); --ui-text-highlighted: var(--color-white);
--ui-bg: var(--ui-color-neutral-900); --ui-bg: var(--ui-color-neutral-900);
--ui-bg-muted: var(--ui-color-neutral-800);
--ui-bg-elevated: var(--ui-color-neutral-800); --ui-bg-elevated: var(--ui-color-neutral-800);
--ui-bg-accented: var(--ui-color-neutral-700); --ui-bg-accented: var(--ui-color-neutral-700);
--ui-bg-inverted: var(--color-white); --ui-bg-inverted: var(--color-white);
--ui-border: var(--ui-color-neutral-800); --ui-border: var(--ui-color-neutral-800);
--ui-border-muted: var(--ui-color-neutral-700);
--ui-border-accented: var(--ui-color-neutral-700); --ui-border-accented: var(--ui-color-neutral-700);
--ui-border-inverted: var(--color-white); --ui-border-inverted: var(--color-white);
} }