Initiated docs and default preset update
Cagatay Civici
parent
36cd4c4692
commit
d80a18c052
|
|
@ -95,13 +95,11 @@
|
|||
},
|
||||
{
|
||||
"name": "FloatLabel",
|
||||
"to": "/floatlabel",
|
||||
"badge": "NEW"
|
||||
"to": "/floatlabel"
|
||||
},
|
||||
{
|
||||
"name": "IconField",
|
||||
"to": "/iconfield",
|
||||
"badge": "NEW"
|
||||
"to": "/iconfield"
|
||||
},
|
||||
{
|
||||
"name": "InputGroup",
|
||||
|
|
@ -117,8 +115,7 @@
|
|||
},
|
||||
{
|
||||
"name": "InputOtp",
|
||||
"to": "/inputotp",
|
||||
"badge": "NEW"
|
||||
"to": "/inputotp"
|
||||
},
|
||||
{
|
||||
"name": "InputSwitch",
|
||||
|
|
@ -273,8 +270,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Stepper",
|
||||
"to": "/stepper",
|
||||
"badge": "NEW"
|
||||
"to": "/stepper"
|
||||
},
|
||||
{
|
||||
"name": "TabView",
|
||||
|
|
@ -445,8 +441,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MeterGroup",
|
||||
"to": "/metergroup",
|
||||
"badge": "NEW"
|
||||
"to": "/metergroup"
|
||||
},
|
||||
{
|
||||
"name": "ScrollTop",
|
||||
|
|
@ -494,41 +489,11 @@
|
|||
"children": [
|
||||
{
|
||||
"name": "Styled Mode",
|
||||
"children": [
|
||||
{
|
||||
"name": "Overview",
|
||||
"to": "/theming"
|
||||
},
|
||||
{
|
||||
"name": "Colors",
|
||||
"to": "/colors"
|
||||
},
|
||||
{
|
||||
"name": "SASS API",
|
||||
"href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
|
||||
}
|
||||
]
|
||||
"to": "/theming/styled"
|
||||
},
|
||||
{
|
||||
"name": "Unstyled Mode",
|
||||
"children": [
|
||||
{
|
||||
"name": "Overview",
|
||||
"to": "/unstyled"
|
||||
},
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"to": "/bootstrap"
|
||||
},
|
||||
{
|
||||
"name": "Bulma",
|
||||
"to": "/bulma"
|
||||
},
|
||||
{
|
||||
"name": "UnoCSS",
|
||||
"to": "/unocss"
|
||||
}
|
||||
]
|
||||
"to": "/theming/unstyled"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -538,10 +503,9 @@
|
|||
"to": "/passthrough"
|
||||
},
|
||||
{
|
||||
"name": "Tailwind",
|
||||
"name": "Tailwind Presets",
|
||||
"icon": "pi pi-heart",
|
||||
"href": "https://tailwind.primevue.org/",
|
||||
"badge": "NEW"
|
||||
"href": "https://tailwind.primevue.org/"
|
||||
},
|
||||
{
|
||||
"name": "Figma UI Kit",
|
||||
|
|
|
|||
|
|
@ -125,17 +125,17 @@ export default {
|
|||
},
|
||||
anchorGutter: '2px',
|
||||
primary: {
|
||||
50: '{zinc.50}',
|
||||
100: '{zinc.100}',
|
||||
200: '{zinc.200}',
|
||||
300: '{zinc.300}',
|
||||
400: '{zinc.400}',
|
||||
500: '{zinc.500}',
|
||||
600: '{zinc.600}',
|
||||
700: '{zinc.700}',
|
||||
800: '{zinc.800}',
|
||||
900: '{zinc.900}',
|
||||
950: '{zinc.950}'
|
||||
50: '{emerald.50}',
|
||||
100: '{emerald.100}',
|
||||
200: '{emerald.200}',
|
||||
300: '{emerald.300}',
|
||||
400: '{emerald.400}',
|
||||
500: '{emerald.500}',
|
||||
600: '{emerald.600}',
|
||||
700: '{emerald.700}',
|
||||
800: '{emerald.800}',
|
||||
900: '{emerald.900}',
|
||||
950: '{emerald.950}'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
@ -154,16 +154,16 @@ export default {
|
|||
950: '{slate.950}'
|
||||
},
|
||||
primary: {
|
||||
color: '#09090b',
|
||||
color: '{primary.500}',
|
||||
inverseColor: '#ffffff',
|
||||
hoverColor: '#18181b',
|
||||
activeColor: '#27272a'
|
||||
hoverColor: '{primary.600}',
|
||||
activeColor: '{primary.700}'
|
||||
},
|
||||
highlight: {
|
||||
background: '#09090b',
|
||||
focusBackground: '#3f3f46',
|
||||
color: '#ffffff',
|
||||
focusColor: '#ffffff'
|
||||
background: '{primary.50}',
|
||||
focusBackground: '{primary.100}',
|
||||
color: '{primary.700}',
|
||||
focusColor: '{primary.800}'
|
||||
},
|
||||
maskBackground: 'rgba(0,0,0,0.4)',
|
||||
formField: {
|
||||
|
|
@ -200,14 +200,14 @@ export default {
|
|||
950: '{zinc.950}'
|
||||
},
|
||||
primary: {
|
||||
color: '#fafafa',
|
||||
inverseColor: '#09090b',
|
||||
hoverColor: '#f4f4f5',
|
||||
activeColor: '#e4e4e7'
|
||||
color: '{primary.400}',
|
||||
inverseColor: '{surface.900}',
|
||||
hoverColor: '{primary.300}',
|
||||
activeColor: '{primary.200}'
|
||||
},
|
||||
highlight: {
|
||||
background: 'rgba(250, 250, 250, .16)',
|
||||
focusBackground: 'rgba(250, 250, 250, .24)',
|
||||
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
|
||||
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
focusColor: 'rgba(255,255,255,.87)'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p class="notification"><strong>Note</strong>: By the end of Q1 2024, PrimeVue v4 will be introduced with a modern theming architecture based on design tokens and css variables.</p>
|
||||
<p>
|
||||
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
|
||||
inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors and spacing.
|
||||
</p>
|
||||
<img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/architecture.jpg" class="w-full" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator
|
||||
<span class="border-round inline-flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center bg-primary"><span class="pi pi-palette"></span></span> at the topbar to switch themes.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz scrollable />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
primevue/resources/themes/md-light-indigo/theme.css
|
||||
primevue/resources/themes/md-light-deeppurple/theme.css
|
||||
primevue/resources/themes/md-dark-indigo/theme.css
|
||||
primevue/resources/themes/md-dark-deeppurple/theme.css
|
||||
primevue/resources/themes/mdc-light-indigo/theme.css
|
||||
primevue/resources/themes/mdc-light-deeppurple/theme.css
|
||||
primevue/resources/themes/mdc-dark-indigo/theme.css
|
||||
primevue/resources/themes/mdc-dark-deeppurple/theme.css
|
||||
primevue/resources/themes/aura-light-blue/theme.css
|
||||
primevue/resources/themes/aura-light-indigo/theme.css
|
||||
primevue/resources/themes/aura-light-purple/theme.css
|
||||
primevue/resources/themes/aura-light-teal/theme.css
|
||||
primevue/resources/themes/aura-light-green/theme.css
|
||||
primevue/resources/themes/aura-light-amber/theme.css
|
||||
primevue/resources/themes/aura-light-cyan/theme.css
|
||||
primevue/resources/themes/aura-light-pink/theme.css
|
||||
primevue/resources/themes/aura-light-lime/theme.css
|
||||
primevue/resources/themes/aura-light-noir/theme.css
|
||||
primevue/resources/themes/aura-dark-blue/theme.css
|
||||
primevue/resources/themes/aura-dark-indigo/theme.css
|
||||
primevue/resources/themes/aura-dark-purple/theme.css
|
||||
primevue/resources/themes/aura-dark-teal/theme.css
|
||||
primevue/resources/themes/aura-dark-green/theme.css
|
||||
primevue/resources/themes/aura-dark-amber/theme.css
|
||||
primevue/resources/themes/aura-dark-cyan/theme.css
|
||||
primevue/resources/themes/aura-dark-pink/theme.css
|
||||
primevue/resources/themes/aura-dark-lime/theme.css
|
||||
primevue/resources/themes/aura-dark-noir/theme.css
|
||||
primevue/resources/themes/lara-light-blue/theme.css
|
||||
primevue/resources/themes/lara-light-indigo/theme.css
|
||||
primevue/resources/themes/lara-light-purple/theme.css
|
||||
primevue/resources/themes/lara-light-teal/theme.css
|
||||
primevue/resources/themes/lara-light-green/theme.css
|
||||
primevue/resources/themes/lara-light-amber/theme.css
|
||||
primevue/resources/themes/lara-light-cyan/theme.css
|
||||
primevue/resources/themes/lara-light-pink/theme.css
|
||||
primevue/resources/themes/lara-dark-blue/theme.css
|
||||
primevue/resources/themes/lara-dark-indigo/theme.css
|
||||
primevue/resources/themes/lara-dark-purple/theme.css
|
||||
primevue/resources/themes/lara-dark-teal/theme.css
|
||||
primevue/resources/themes/lara-dark-green/theme.css
|
||||
primevue/resources/themes/lara-dark-amber/theme.css
|
||||
primevue/resources/themes/lara-dark-cyan/theme.css
|
||||
primevue/resources/themes/lara-dark-pink/theme.css
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Each PrimeVue theme exports numerous CSS variables, refer to <PrimeVueNuxtLink to="/colors">Colors</PrimeVueNuxtLink> page for more details.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Themes are created with SASS using the <i>primevue-sass-theme</i> project available at <a href="http://github.com/primefaces/primevue-sass-theme">github</a>. This repository contains all the scss files for the components and the variables
|
||||
of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the <a href="https://www.primefaces.org/designer/api/primevue/3.9.0">SASS API</a> documentation.
|
||||
</p>
|
||||
<p>
|
||||
There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all cases,
|
||||
the generated theme file should be imported to your project.
|
||||
</p>
|
||||
|
||||
<h3>Theme SCSS</h3>
|
||||
<p>
|
||||
The theme scss is available as open source at <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> repository. The <i>theme-base</i> folder contains the theming structure of the components, themes under
|
||||
<i>themes</i> folder import the base and define the SCSS variables. The <i>themes</i> folder also contains all the built-in themes so you can customize their code as well.
|
||||
</p>
|
||||
<p>
|
||||
To create your own theme, <a href="https://github.com/primefaces/primevue-sass-theme/releases">download</a> the release matching your PrimeVue version and access the <i>themes/mytheme</i> folder. The sass variables to customize are
|
||||
available under the <i>variables</i> folder. The <i>_fonts</i> file can be used to define a custom font for your project whereas the optional <i>_extensions</i> file is provided to add overrides to the components designs. The
|
||||
<i>theme.scss</i> file imports the theme files along with the <i>theme-base</i> folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project.
|
||||
</p>
|
||||
|
||||
<h3>Compile SCSS Manually</h3>
|
||||
<p>Once your theme is ready run the following command to compile it. Note that <a href="https://www.npmjs.com/package/sass">sass</a> command should be available in your terminal.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<p>
|
||||
Then copy and import the theme.css file in your application. For example, in a Vite based template like <a href="https://github.com/vuejs/create-vue">create-vue</a>, you may place theme.css under assets folder and then import it an
|
||||
<i>main.js</i>.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
|
||||
<h3>Build Time Compilation</h3>
|
||||
<p>
|
||||
This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the <i>theme-base</i> folder along with <i>themes/mytheme</i> folder to your application where assets
|
||||
reside. At a suitable location like <i>main.js</i> or <i>App.vue</i>, import the <i>theme.scss</i> from <i>assets/themes/mytheme</i>. That would be it, during build time, your project will compile the sass and import the theme. Any
|
||||
changes to your theme will be reflected instantly.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import './assets/theme.css';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
<a href="https://primeflex.org/">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeVue can be used with any CSS utility library like bootstrap and tailwind
|
||||
however PrimeFlex has benefits like integration with PrimeVue themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeVue theme being used. PrimeVue follows the CSS utility approach
|
||||
of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primevue.org">PrimeBlocks for PrimeVue</a> project as well.
|
||||
</p>
|
||||
|
||||
<p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
|
||||
<Button type="button" label="Button 1"></Button>
|
||||
<Button type="button" label="Button 2" severity="secondary"></Button>
|
||||
<Button type="button" label="Button 3" severity="help"></Button>
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
|
||||
<Button type="button" label="Button 1"></Button>
|
||||
<Button type="button" label="Button 2" severity="secondary"></Button>
|
||||
<Button type="button" label="Button 3" severity="help"></Button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p class="notification">
|
||||
Solution below works however there is room for improvement. The upcoming styling api will greatly improve dynamic theme switching ability, eliminates the prerequisites with the introduction of CSS variables and dynamic imports.
|
||||
</p>
|
||||
<p>
|
||||
Themes can be dynamically changed using the <i>PrimeVue.changeTheme</i> function. For this feature to work, there are two prerequisites. To begin with, the themes should be publicly available under the <i>public</i> folder in your project
|
||||
by copying them from PrimeVue <i>resources/themes</i> folder. Second part is making the theme.css accessible via a link element so that the id of the link can be provided as the 3rd parameter to the <i>changeTheme</i> function.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
<div class="doc-section-description">
|
||||
<p>In a Vite based project like <a href="https://github.com/vuejs/create-vue">create-vue</a>, the link can be placed at index.html.</p>
|
||||
</div>
|
||||
<DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
|
||||
<div class="doc-section-description">
|
||||
<p><a href="https://nuxtjs.org/">Nuxt</a> applications can configure the link element using <i>nuxt.config.js</i>.</p>
|
||||
</div>
|
||||
<DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
primevue.changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
// Options API
|
||||
this.$primevue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
|
||||
`
|
||||
},
|
||||
code3: {
|
||||
basic: `
|
||||
// Composition API
|
||||
import { usePrimeVue } from 'primevue/config';
|
||||
|
||||
const PrimeVue = usePrimeVue();
|
||||
PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
|
||||
`
|
||||
},
|
||||
code4: {
|
||||
basic: `
|
||||
<link id="theme-link" rel="stylesheet" href="/themes/aura-light-green/theme.css">
|
||||
`
|
||||
},
|
||||
code5: {
|
||||
basic: `
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
head: {
|
||||
link: [
|
||||
{
|
||||
id: 'theme-link',
|
||||
rel: 'stylesheet',
|
||||
href: baseUrl + 'themes/aura-light-green/theme.css'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In addition to PrimeFlex, PrimeVue has a couple of css utility classes on its own as well.</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-component</td>
|
||||
<td>Applies component theming such as font-family and font-size to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fluid</td>
|
||||
<td>Applies 100% width to all descendant components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-disabled</td>
|
||||
<td>Applies an opacity to display as disabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-sr-only</td>
|
||||
<td>Element becomes visually hidden however accessibility is still available.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-reset</td>
|
||||
<td>Resets the browsers defaults.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-link</td>
|
||||
<td>Renders a button as a link.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-error</td>
|
||||
<td>Indicates an error text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-invalid</td>
|
||||
<td>Applies the invalid style to a text or a form field.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts;
|
||||
<i>base</i> and <i>preset</i>. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different
|
||||
presets, currently Aura is the only preset and in upcoming version more presets will be available. Similarly, PrimeOne is the default base and a new base inspired by Material Design is coming up with a near future update.
|
||||
</p>
|
||||
<img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/architecture.jpg" class="w-full mb-3" />
|
||||
<p>The core of the styled mode architecture is based on a concept named <i>design token</i>, a preset defines the token configuration in 3 tiers; <i>primitive</i>, <i>semantic</i> and <i>component</i>.</p>
|
||||
<h3>Primitive Tokens</h3>
|
||||
<p>
|
||||
Primitive tokens have no context, a color palette is a good example for a primitive token such as <i>blue-50</i> to <i>blue-900</i>. A token named <i>blue-500</i> may be used as the primary color, the background of a message however on
|
||||
its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens.
|
||||
</p>
|
||||
|
||||
<h3>Semantic Tokens</h3>
|
||||
<p>
|
||||
Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the <i>primary.color</i>. Semantic tokens map to primitive tokens or other semantic tokens. The
|
||||
<i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like implementing dark mode.
|
||||
</p>
|
||||
|
||||
<h3>Component Tokens</h3>
|
||||
<p>
|
||||
Component tokens are isolated tokens per component such as <i>inputtext.background</i> or <i>button.color</i> that map to the semantic tokens. As an example, <i>button.background</i> component token maps to the
|
||||
<i>primary.color</i> semantic token which maps to the <i>green.500</i> primitive token.
|
||||
</p>
|
||||
|
||||
<h3>Best Practices</h3>
|
||||
<p>
|
||||
Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific
|
||||
component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeVue components using style classes is not a best practice and should be the last resort,
|
||||
design tokens are the suggested approach.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>CSS Layer.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>CSS Layer.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>options</i> property defines the how the CSS would be generated from the design tokens of the preset.</p>
|
||||
<h3>prefix</h3>
|
||||
<p>The prefix of the CSS variables, defaults to <i>p</i>. For instance, the <i>primary.color</i> design token would be <i>var(--p-primary-color)</i>.</p>
|
||||
<h3>darkModeSelector</h3>
|
||||
<p>
|
||||
The CSS rule to encapsulate the CSS variables of the dark mode, the default is the <i>system</i> to generate <i>@media (prefers-color-scheme: dark)</i>. If you need to make the dark mode toggleable based on the user selection define a
|
||||
class selector such as <i>.app-dark</i> and toggle this class at the document root. See the dark mode toggle section below for example.
|
||||
</p>
|
||||
<h3>cssLayer</h3>
|
||||
<p>
|
||||
Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primevue</i> or not. A CSS layer would be handy to
|
||||
declare a custom cascade layer for easier customization. The default is <i>false</i>. View the CSS layer section for an example usage.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>theme</i> property is used to customize the initial theme that is preconfigured to be PrimeOne base with the Aura preset by default. The following is the default configuration and only needs to be defined for customization.</p>
|
||||
<p></p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import PrimeVue from 'primevue/config';
|
||||
import PrimeOne from 'primevue/themes/primeone';
|
||||
import Aura from 'primevue/themes/primeone/aura';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
// Default theme configuration
|
||||
theme: {
|
||||
base: PrimeOne,
|
||||
preset: Aura,
|
||||
options: {
|
||||
prefix: 'p',
|
||||
darkModeSelector: 'system',
|
||||
cssLayer: false
|
||||
}
|
||||
}
|
||||
});
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -44,7 +44,7 @@ import { updatePreset, updateSurface } from 'primevue/themes';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedPrimaryColor: 'noir',
|
||||
selectedPrimaryColor: 'emerald',
|
||||
selectedSurfaceColor: null,
|
||||
primaryColors: [
|
||||
{ name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } },
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Theming - PrimeVue</Title>
|
||||
<Meta name="description" content="Choose from a variety of themes or develop your own theme easily." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Theming</h1>
|
||||
<p>Choose from a variety of themes or develop your own theme easily.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArchitectureDoc from '@/doc/theming/ArchitectureDoc.vue';
|
||||
import BuiltInThemesDoc from '@/doc/theming/BuiltInThemesDoc.vue';
|
||||
import CSSModulesDoc from '@/doc/theming/CSSModulesDoc.vue';
|
||||
import CSSVariablesDoc from '@/doc/theming/CSSVariablesDoc.vue';
|
||||
import CustomThemeDoc from '@/doc/theming/CustomThemeDoc.vue';
|
||||
import PrimeFlexDoc from '@/doc/theming/PrimeFlexDoc.vue';
|
||||
import ScaleDoc from '@/doc/theming/ScaleDoc.vue';
|
||||
import ScopedCSSDoc from '@/doc/theming/ScopedCSSDoc.vue';
|
||||
import SwitchThemesDoc from '@/doc/theming/SwitchThemesDoc.vue';
|
||||
import UtilsDoc from '@/doc/theming/UtilsDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'architecture',
|
||||
label: 'Architecture',
|
||||
component: ArchitectureDoc
|
||||
},
|
||||
{
|
||||
id: 'builtinthemes',
|
||||
label: 'Built-in Themes',
|
||||
component: BuiltInThemesDoc
|
||||
},
|
||||
{
|
||||
id: 'switchthemes',
|
||||
label: 'Switch Themes',
|
||||
component: SwitchThemesDoc
|
||||
},
|
||||
{
|
||||
id: 'customtheme',
|
||||
label: 'Custom Theme',
|
||||
component: CustomThemeDoc
|
||||
},
|
||||
{
|
||||
id: 'scopedcss',
|
||||
label: 'Scoped CSS',
|
||||
component: ScopedCSSDoc
|
||||
},
|
||||
{
|
||||
id: 'cssmodules',
|
||||
label: 'CSS Modules',
|
||||
component: CSSModulesDoc
|
||||
},
|
||||
{
|
||||
id: 'scale',
|
||||
label: 'Scale',
|
||||
component: ScaleDoc
|
||||
},
|
||||
{
|
||||
id: 'primeflex',
|
||||
label: 'PrimeFlex',
|
||||
component: PrimeFlexDoc
|
||||
},
|
||||
{
|
||||
id: 'utils',
|
||||
label: 'Utils',
|
||||
component: UtilsDoc
|
||||
},
|
||||
{
|
||||
id: 'cssvariables',
|
||||
label: 'CSS Variables',
|
||||
component: CSSVariablesDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Styled Mode - PrimeVue</Title>
|
||||
<Meta name="description" content="Choose from a variety of pre-styled themes or develop your own." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Styled Mode</h1>
|
||||
<p>Choose from a variety of pre-styled themes or develop your own..</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
||||
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
||||
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
|
||||
import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue';
|
||||
import CSSLayerDoc from '@/doc/theming/styled/CSSLayerDoc.vue';
|
||||
import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
|
||||
import OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue';
|
||||
import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'architecture',
|
||||
label: 'Architecture',
|
||||
component: ArchitectureDoc
|
||||
},
|
||||
{
|
||||
id: 'configuration',
|
||||
label: 'Configuration',
|
||||
children: [
|
||||
{
|
||||
id: 'theme',
|
||||
label: 'Theme',
|
||||
component: ThemeDoc
|
||||
},
|
||||
{
|
||||
id: 'options',
|
||||
label: 'Options',
|
||||
component: OptionsDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'darkmodetoggle',
|
||||
label: 'Dark Mode Toggle',
|
||||
component: DarkModeToggleDoc
|
||||
},
|
||||
{
|
||||
id: 'csslayer',
|
||||
label: 'CSS Layer',
|
||||
component: CSSLayerDoc
|
||||
},
|
||||
{
|
||||
id: 'scopedcss',
|
||||
label: 'Scoped CSS',
|
||||
component: ScopedCSSDoc
|
||||
},
|
||||
{
|
||||
id: 'cssmodules',
|
||||
label: 'CSS Modules',
|
||||
component: CSSModulesDoc
|
||||
},
|
||||
{
|
||||
id: 'scale',
|
||||
label: 'Scale',
|
||||
component: ScaleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -19,10 +19,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ArchitectureDoc from '@/doc/unstyled/ArchitectureDoc.vue';
|
||||
import ExampleDoc from '@/doc/unstyled/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/unstyled/SetupDoc.vue';
|
||||
import ThemeDoc from '@/doc/unstyled/ThemeDoc.vue';
|
||||
import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
|
||||
import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue';
|
||||
import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -1,9 +1,58 @@
|
|||
import { definePreset } from 'primevue/themes';
|
||||
import PrimeOne from 'primevue/themes/primeone';
|
||||
import Aura from 'primevue/themes/primeone/aura';
|
||||
|
||||
const Noir = definePreset(Aura, {
|
||||
semantic: {
|
||||
primary: {
|
||||
50: '{zinc.50}',
|
||||
100: '{zinc.100}',
|
||||
200: '{zinc.200}',
|
||||
300: '{zinc.300}',
|
||||
400: '{zinc.400}',
|
||||
500: '{zinc.500}',
|
||||
600: '{zinc.600}',
|
||||
700: '{zinc.700}',
|
||||
800: '{zinc.800}',
|
||||
900: '{zinc.900}',
|
||||
950: '{zinc.950}'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
primary: {
|
||||
color: '#09090b',
|
||||
inverseColor: '#ffffff',
|
||||
hoverColor: '#18181b',
|
||||
activeColor: '#27272a'
|
||||
},
|
||||
highlight: {
|
||||
background: '#09090b',
|
||||
focusBackground: '#3f3f46',
|
||||
color: '#ffffff',
|
||||
focusColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
primary: {
|
||||
color: '#fafafa',
|
||||
inverseColor: '#09090b',
|
||||
hoverColor: '#f4f4f5',
|
||||
activeColor: '#e4e4e7'
|
||||
},
|
||||
highlight: {
|
||||
background: 'rgba(250, 250, 250, .16)',
|
||||
focusBackground: 'rgba(250, 250, 250, .24)',
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
focusColor: 'rgba(255,255,255,.87)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
base: PrimeOne,
|
||||
preset: Aura,
|
||||
preset: Noir,
|
||||
options: {
|
||||
darkModeSelector: '.p-dark'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue