Theming docs progress update
Cagatay Civici
parent
a7c3bf15e3
commit
a9df0acc65
|
|
@ -186,7 +186,7 @@
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||||
color: var(--text-secondary-color);
|
color: var(--text-secondary-color);
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Lorem Ipsum.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Currently Aura is the only available preset and more will follow in the upcoming updates.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Aura"><DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz /></TabPanel>
|
||||||
|
<TabPanel header="Lara">Under development.</TabPanel>
|
||||||
|
<TabPanel header="Nora">Under development.</TabPanel>
|
||||||
|
<TabPanel header="Material">Under development.</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import accordion from 'primevue/themes/primeone/presets/aura/accordion';
|
||||||
|
// ... imports of other component tokens
|
||||||
|
|
||||||
|
export default {
|
||||||
|
primitive: {
|
||||||
|
rounded: {
|
||||||
|
sm: '4px',
|
||||||
|
base: '6px',
|
||||||
|
lg: '8px',
|
||||||
|
xl: '12px'
|
||||||
|
},
|
||||||
|
emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
|
||||||
|
green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
|
||||||
|
lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
|
||||||
|
red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
|
||||||
|
orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
|
||||||
|
amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
|
||||||
|
yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
|
||||||
|
teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
|
||||||
|
cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
|
||||||
|
sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
|
||||||
|
blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
|
||||||
|
indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
|
||||||
|
violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
|
||||||
|
purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
|
||||||
|
fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
|
||||||
|
pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
|
||||||
|
rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
|
||||||
|
slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
|
||||||
|
gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
|
||||||
|
zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
|
||||||
|
neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
|
||||||
|
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
fontFamily: 'system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
|
||||||
|
fontFeatureSettings: 'normal',
|
||||||
|
transitionDuration: '0.2s',
|
||||||
|
focusRing: {
|
||||||
|
width: '1px',
|
||||||
|
style: 'solid',
|
||||||
|
color: '{primary.500}',
|
||||||
|
offset: '2px'
|
||||||
|
},
|
||||||
|
anchorGutter: '2px',
|
||||||
|
primary: {
|
||||||
|
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: {
|
||||||
|
surface: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '{slate.50}',
|
||||||
|
100: '{slate.100}',
|
||||||
|
200: '{slate.200}',
|
||||||
|
300: '{slate.300}',
|
||||||
|
400: '{slate.400}',
|
||||||
|
500: '{slate.500}',
|
||||||
|
600: '{slate.600}',
|
||||||
|
700: '{slate.700}',
|
||||||
|
800: '{slate.800}',
|
||||||
|
900: '{slate.900}',
|
||||||
|
950: '{slate.950}'
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
color: '{primary.500}',
|
||||||
|
inverseColor: '#ffffff',
|
||||||
|
hoverColor: '{primary.600}',
|
||||||
|
activeColor: '{primary.700}'
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
background: '{primary.50}',
|
||||||
|
focusBackground: '{primary.100}',
|
||||||
|
color: '{primary.700}',
|
||||||
|
focusColor: '{primary.800}'
|
||||||
|
},
|
||||||
|
maskBackground: 'rgba(0,0,0,0.4)',
|
||||||
|
formField: {
|
||||||
|
background: '{surface.0}',
|
||||||
|
disabledBackground: '{surface.200}',
|
||||||
|
filledBackground: '{surface.50}',
|
||||||
|
filledFocusBackground: '{surface.0}',
|
||||||
|
borderColor: '{surface.300}',
|
||||||
|
hoverBorderColor: '{surface.400}',
|
||||||
|
focusBorderColor: '{primary.color}',
|
||||||
|
invalidBorderColor: '{red.400}',
|
||||||
|
color: '{surface.700}',
|
||||||
|
disabledColor: '{surface.500}',
|
||||||
|
placeholderColor: '{surface.500}',
|
||||||
|
floatLabelColor: '{surface.500}',
|
||||||
|
floatLabelFocusColor: '{surface.500}',
|
||||||
|
floatLabelInvalidColor: '{red.400}',
|
||||||
|
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
surface: {
|
||||||
|
0: '#ffffff',
|
||||||
|
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}'
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
color: '{primary.400}',
|
||||||
|
inverseColor: '{surface.900}',
|
||||||
|
hoverColor: '{primary.300}',
|
||||||
|
activeColor: '{primary.200}'
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
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)'
|
||||||
|
},
|
||||||
|
maskBackground: 'rgba(0,0,0,0.4)',
|
||||||
|
formField: {
|
||||||
|
background: '{surface.950}',
|
||||||
|
disabledBackground: '{surface.700}',
|
||||||
|
filledBackground: '{surface.800}',
|
||||||
|
filledFocusBackground: '{surface.950}',
|
||||||
|
borderColor: '{surface.700}',
|
||||||
|
hoverBorderColor: '{surface.600}',
|
||||||
|
focusBorderColor: '{primary.color}',
|
||||||
|
invalidBorderColor: '{red.300}',
|
||||||
|
color: '{surface.0}',
|
||||||
|
disabledColor: '{surface.400}',
|
||||||
|
placeholderColor: '{surface.400}',
|
||||||
|
floatLabelColor: '{surface.400}',
|
||||||
|
floatLabelFocusColor: '{surface.400}',
|
||||||
|
floatLabelInvalidColor: '{red.300}',
|
||||||
|
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
accordion,
|
||||||
|
// ... other components
|
||||||
|
}
|
||||||
|
};
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
PrimeVue utilizes <i>rem</i> units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document.
|
Lorem Ipsum.
|
||||||
Code below sets the scale of the components based on <i>16px</i>. If you require bigger or smaller components, just change this variable and components will scale accordingly.
|
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<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>
|
<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>
|
<h4>prefix</h4>
|
||||||
<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>
|
<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>
|
<h4>darkModeSelector</h4>
|
||||||
<p>
|
<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
|
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.
|
class selector such as <i>.app-dark</i> and toggle this class at the document root. See the dark mode toggle section for an example.
|
||||||
</p>
|
</p>
|
||||||
<h3>cssLayer</h3>
|
<h4>cssLayer</h4>
|
||||||
<p>
|
<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
|
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.
|
declare a custom cascade layer for easier customization. The default is <i>false</i>. View the CSS layer section for an example usage.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<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>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>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
components: {
|
||||||
|
card: {
|
||||||
|
colorScheme: {
|
||||||
|
light: {
|
||||||
|
root: {
|
||||||
|
background: '{surface.0}',
|
||||||
|
color: '{surface.700}'
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
color: '{surface.500}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
root: {
|
||||||
|
background: '{surface.900}',
|
||||||
|
color: '{surface.0}'
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
color: '{surface.400}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>The <i>definePreset</i> utility is used to customize an existing preset during the PrimeVue setup. The first parameter is the preset to customize and the second is the design tokens to override.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import PrimeVue from 'primevue/config';
|
||||||
|
import { definePreset } from 'primevue/themes';
|
||||||
|
import PrimeOne from 'primevue/themes/primeone';
|
||||||
|
import Aura from 'primevue/themes/primeone/aura';
|
||||||
|
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
//Your customizations, see the following sections for examples
|
||||||
|
});
|
||||||
|
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
base: PrimeOne,
|
||||||
|
preset: MyPreset
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
focusRing: {
|
||||||
|
width: '2px',
|
||||||
|
style: 'dashed',
|
||||||
|
color: '{primary.color}',
|
||||||
|
offset: '1px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
Presets use the native font stack by default for optimal rendering depending on the platform. If you have installed a specific font stack in your application, use the <i>fontFamily</i> and the optional <i>fontVariationSettings</i> tokens
|
||||||
|
to define your custom font for PrimeVue components. As example, let's configure the popular <i>Inter</i> for PrimeVue.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
fontFamily: 'Inter, sans-serif'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
The design tokens of the form input components are derived from the <i>form.field</i> token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as
|
||||||
|
<i>dropdown.hover.border.color</i> and <i>textarea.hover.border.color</i> would receive the change.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
colorScheme: {
|
||||||
|
light: {
|
||||||
|
formField: {
|
||||||
|
hoverBorderColor: '{primary.color}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
formField: {
|
||||||
|
hoverBorderColor: '{primary.color}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
The <i>noir</i> mode is the nickname of a variant that uses black tones as the primary and requires and additional <i>colorScheme</i> configuration to implement. A sample preset configuration with black and white variants as the primary
|
||||||
|
color;
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
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: '{zinc.950}',
|
||||||
|
inverseColor: '#ffffff',
|
||||||
|
hoverColor: '{zinc.900}',
|
||||||
|
activeColor: '{zinc.800}'
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
background: '{zinc.950}',
|
||||||
|
focusBackground: '{zinc.700}',
|
||||||
|
color: '#ffffff',
|
||||||
|
focusColor: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
primary: {
|
||||||
|
color: '{zinc.50}',
|
||||||
|
inverseColor: '{zinc.950}',
|
||||||
|
hoverColor: '{zinc.100}',
|
||||||
|
activeColor: '{zinc.200}'
|
||||||
|
},
|
||||||
|
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)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>The <i>primary</i> defines the main color palette, default value maps to the <i>emerald</i> primitive token. Let's setup to use <i>indigo</i> instead.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
primary: {
|
||||||
|
50: '{indigo.50}',
|
||||||
|
100: '{indigo.100}',
|
||||||
|
200: '{indigo.200}',
|
||||||
|
300: '{indigo.300}',
|
||||||
|
400: '{indigo.400}',
|
||||||
|
500: '{indigo.500}',
|
||||||
|
600: '{indigo.600}',
|
||||||
|
700: '{indigo.700}',
|
||||||
|
800: '{indigo.800}',
|
||||||
|
900: '{indigo.900}',
|
||||||
|
950: '{indigo.950}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses <i>zinc</i> for light mode and <i>slategray</i> for dark mode. With this setting, light mode, would have a
|
||||||
|
grayscale tone and dark mode would include blue tone.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
const MyPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
colorScheme: {
|
||||||
|
light: {
|
||||||
|
surface: {
|
||||||
|
0: '#ffffff',
|
||||||
|
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}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
surface: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '{slate.50}',
|
||||||
|
100: '{slate.100}',
|
||||||
|
200: '{slate.200}',
|
||||||
|
300: '{slate.300}',
|
||||||
|
400: '{slate.400}',
|
||||||
|
500: '{slate.500}',
|
||||||
|
600: '{slate.600}',
|
||||||
|
700: '{slate.700}',
|
||||||
|
800: '{slate.800}',
|
||||||
|
900: '{slate.900}',
|
||||||
|
950: '{slate.950}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>The <i>$dt</i> function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import { $dt } from 'primevue/themes';
|
||||||
|
|
||||||
|
const value = $dt('primary.color', 'value');
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Returns shades and tints of a given color from 50 to 950 as an array.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import { palette } from 'primevue/themes';
|
||||||
|
|
||||||
|
const values = palette('#10b981');
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import { updatePreset } from 'primevue/themes';
|
||||||
|
|
||||||
|
const changePrimaryColor() {
|
||||||
|
updatePreset({
|
||||||
|
semantic: {
|
||||||
|
primary: {
|
||||||
|
50: '{indigo.50}',
|
||||||
|
100: '{indigo.100}',
|
||||||
|
200: '{indigo.200}',
|
||||||
|
300: '{indigo.300}',
|
||||||
|
400: '{indigo.400}',
|
||||||
|
500: '{indigo.500}',
|
||||||
|
600: '{indigo.600}',
|
||||||
|
700: '{indigo.700}',
|
||||||
|
800: '{indigo.800}',
|
||||||
|
900: '{indigo.900}',
|
||||||
|
950: '{indigo.950}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Replaces the current presets entirely, common use case is changing the preset dynamically at runtime.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import { usePreset } from 'primevue/themes';
|
||||||
|
|
||||||
|
const onButtonClick() {
|
||||||
|
usePreset(MyPreset);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Replaces the theme including the base and the preset such as from PrimeOne to Material. Note that the built-in Material theme is under development.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import { useTheme } from 'primevue/themes';
|
||||||
|
|
||||||
|
const changeTheme() {
|
||||||
|
useTheme({
|
||||||
|
base: MaterialDesign,
|
||||||
|
preset: M3
|
||||||
|
});
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -20,13 +20,28 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
||||||
|
import CSSLayerDoc from '@/doc/theming/styled/CSSLayerDoc.vue';
|
||||||
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
||||||
|
import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
|
||||||
|
import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
|
||||||
|
import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
|
||||||
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
|
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
|
||||||
import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.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 OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue';
|
||||||
import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
|
import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
|
||||||
|
import ComponentDoc from '@/doc/theming/styled/customization/ComponentDoc.vue';
|
||||||
|
import DefinePresetDoc from '@/doc/theming/styled/customization/DefinePresetDoc.vue';
|
||||||
|
import FocusRingDoc from '@/doc/theming/styled/customization/FocusRingDoc.vue';
|
||||||
|
import FontDoc from '@/doc/theming/styled/customization/FontDoc.vue';
|
||||||
|
import FormsDoc from '@/doc/theming/styled/customization/FormsDoc.vue';
|
||||||
|
import NoirDoc from '@/doc/theming/styled/customization/NoirDoc.vue';
|
||||||
|
import PrimaryDoc from '@/doc/theming/styled/customization/PrimaryDoc.vue';
|
||||||
|
import SurfaceDoc from '@/doc/theming/styled/customization/SurfaceDoc.vue';
|
||||||
|
import DTDoc from '@/doc/theming/styled/utils/DTDoc.vue';
|
||||||
|
import PaletteDoc from '@/doc/theming/styled/utils/PaletteDoc.vue';
|
||||||
|
import UpdatePresetDoc from '@/doc/theming/styled/utils/UpdatePresetDoc.vue';
|
||||||
|
import UsePresetDoc from '@/doc/theming/styled/utils/UsePresetDoc.vue';
|
||||||
|
import UseThemeDoc from '@/doc/theming/styled/utils/UseThemeDoc.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -39,7 +54,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'configuration',
|
id: 'configuration',
|
||||||
label: 'Configuration',
|
label: 'Configuration API',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: 'theme',
|
id: 'theme',
|
||||||
|
|
@ -53,6 +68,93 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'presets',
|
||||||
|
label: 'Presets',
|
||||||
|
component: PresetsDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'customization',
|
||||||
|
label: 'Customization',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'definepreset',
|
||||||
|
label: 'definePreset',
|
||||||
|
component: DefinePresetDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'primary',
|
||||||
|
label: 'Primary',
|
||||||
|
component: PrimaryDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'noir',
|
||||||
|
label: 'Noir',
|
||||||
|
component: NoirDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'surface',
|
||||||
|
label: 'Surface',
|
||||||
|
component: SurfaceDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'font',
|
||||||
|
label: 'Font',
|
||||||
|
component: FontDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'forms',
|
||||||
|
label: 'Forms',
|
||||||
|
component: FormsDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'focusring',
|
||||||
|
label: 'Focus Ring',
|
||||||
|
component: FocusRingDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'component',
|
||||||
|
label: 'Component',
|
||||||
|
component: ComponentDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'utils',
|
||||||
|
label: 'Utils',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'usepreset',
|
||||||
|
label: 'usePreset',
|
||||||
|
component: UsePresetDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'updatepreset',
|
||||||
|
label: 'updatePreset',
|
||||||
|
component: UpdatePresetDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'usetheme',
|
||||||
|
label: 'useTheme',
|
||||||
|
component: UseThemeDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'dt',
|
||||||
|
label: '$dt',
|
||||||
|
component: DTDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Palette',
|
||||||
|
label: 'palette',
|
||||||
|
component: PaletteDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'colors',
|
||||||
|
label: 'Colors',
|
||||||
|
component: ColorsDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'darkmodetoggle',
|
id: 'darkmodetoggle',
|
||||||
label: 'Dark Mode Toggle',
|
label: 'Dark Mode Toggle',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue