Add more info to scoped css and colors docs
Cagatay Civici
parent
30f2fe58d8
commit
be13e705a5
|
|
@ -1,82 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>. Following is the list of general variables used in a theme.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Variable</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>--text-color</td>
|
|
||||||
<td>Font text color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--text-secondary-color</td>
|
|
||||||
<td>Muted font text color with a secondary level.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--primary-color</td>
|
|
||||||
<td>Primary color of the theme.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--primary-color-text</td>
|
|
||||||
<td>Text color when background is primary color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--font-family</td>
|
|
||||||
<td>Font family of the theme.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--inline-spacing</td>
|
|
||||||
<td>Spacing between to adjacent items.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--border-radius</td>
|
|
||||||
<td>Common border radius of elements.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--focus-ring</td>
|
|
||||||
<td>Box shadow of a focused element.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--mask-bg</td>
|
|
||||||
<td>Background of an overlay mask.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--highlight-bg</td>
|
|
||||||
<td>Background of a highlighted element.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--highlight-text-color</td>
|
|
||||||
<td>Text color of a highlighted element.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="card flex justify-content-center gap-3 text-center">
|
|
||||||
<div :style="{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Highlighted Item</div>
|
|
||||||
<div :style="{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }">Primary Color</div>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<div style="backgroundColor: var(--highlight-bg), color: var(--highlight-text-color), borderRadius: var(--border-radius), padding: 3rem">Highlighted Item</div>
|
|
||||||
<div style="backgroundColor: var(--primary-color), color: var(--primary-color-text), borderRadius: var(--border-radius), padding: 3rem">Primary Color</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex flex-wrap gap-6">
|
|
||||||
<div v-for="color of colors" :key="color" class="flex flex-column">
|
|
||||||
<template v-for="shade of shades" :key="shade">
|
|
||||||
<div class="w-18rem flex align-items-center p-3 font-bold" :style="{ backgroundColor: `var(--${color}-${shade})`, color: shade > 500 ? '#fff' : '#000' }">{{ color }}-{{ shade }}</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
colors: ['primary', 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray'],
|
|
||||||
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex flex-column">
|
|
||||||
<div
|
|
||||||
v-for="shade in shades"
|
|
||||||
:key="shade"
|
|
||||||
class="w-18rem flex align-items-center p-3 font-bold"
|
|
||||||
:style="{ backgroundColor: `var(--surface-${shade})`, color: $appState.darkTheme ? (shade > 500 ? '#000' : '#fff') : shade > 500 ? '#fff' : '#000' }"
|
|
||||||
>
|
|
||||||
surface-{{ shade }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Variable</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-ground</td>
|
|
||||||
<td>Base ground color.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-section</td>
|
|
||||||
<td>Background color of a section on a ground surface.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-card</td>
|
|
||||||
<td>Color of a surface used as a card.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-overlay</td>
|
|
||||||
<td>Color of overlay surfaces.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-border</td>
|
|
||||||
<td>Color of a divider.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>--surface-hover</td>
|
|
||||||
<td>Color of an element in hover state.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -4,6 +4,8 @@
|
||||||
Color palette of a preset is defined by the <i>primitive</i> design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled mode.
|
Color palette of a preset is defined by the <i>primitive</i> design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled mode.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
<p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
|
||||||
|
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<ul class="p-0 m-0 list-none flex sm:flex-column gap-3 flex-wrap sm:flex-nowrap">
|
<ul class="p-0 m-0 list-none flex sm:flex-column gap-3 flex-wrap sm:flex-nowrap">
|
||||||
<li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
|
<li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
|
||||||
|
|
@ -24,7 +26,16 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
|
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
|
||||||
colors: ['emerald', 'green', 'lime', 'red', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone']
|
colors: ['emerald', 'green', 'lime', 'red', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone'],
|
||||||
|
code1: {
|
||||||
|
basic: `
|
||||||
|
// With CSS
|
||||||
|
var(--p-blue-500)
|
||||||
|
|
||||||
|
// With JS
|
||||||
|
$dt('blue.500', 'value')
|
||||||
|
`
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Design tokens can be scoped to a certain component using CSS variables. In an upcoming update, a special <i>dt</i> property would be introduced to generate the CSS variables from a design token object.</p>
|
<p>Design tokens can be scoped to a certain component using CSS variables.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center gap-3">
|
<div class="card flex justify-content-center gap-3">
|
||||||
<InputSwitch v-model="checked1" class="blue-switch" />
|
<InputSwitch v-model="checked1" class="blue-switch" />
|
||||||
|
|
@ -8,6 +8,9 @@
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
|
||||||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
||||||
|
<h3>Future API Preview</h3>
|
||||||
|
<p>In an upcoming update, a special <i>dt</i> property would be introduced for each component to generate the CSS variables from a design token object.</p>
|
||||||
|
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -40,6 +43,24 @@ export default {
|
||||||
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
|
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
code3: {
|
||||||
|
basic: `
|
||||||
|
<InputSwitch v-model="checked" :dt="blueSwitch" />
|
||||||
|
|
||||||
|
/*
|
||||||
|
const blueSwitch = {
|
||||||
|
root: {
|
||||||
|
checkedBackground: '{blue.500}',
|
||||||
|
checkedHoverBackground: '{blue.500}',
|
||||||
|
borderRadius: '40x'
|
||||||
|
},
|
||||||
|
handle: {
|
||||||
|
background: '{blue.50}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Head>
|
|
||||||
<Title>Color System - PrimeVue</Title>
|
|
||||||
<Meta name="description" content="Each PrimeVue theme exports its own color palette." />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div class="doc">
|
|
||||||
<div class="doc-main">
|
|
||||||
<div class="doc-intro">
|
|
||||||
<h1>Color System</h1>
|
|
||||||
<p>Each PrimeVue theme exports its own color palette.</p>
|
|
||||||
</div>
|
|
||||||
<DocSections :docs="docs" />
|
|
||||||
</div>
|
|
||||||
<DocSectionNav :docs="docs" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import OverviewDoc from '@/doc/colors/OverviewDoc.vue';
|
|
||||||
import PaletteDoc from '@/doc/colors/PaletteDoc.vue';
|
|
||||||
import SurfacesDoc from '@/doc/colors/SurfacesDoc.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'overview',
|
|
||||||
label: 'Overview',
|
|
||||||
component: OverviewDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'surfaces',
|
|
||||||
label: 'Surfaces',
|
|
||||||
component: SurfacesDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'palette',
|
|
||||||
label: 'Palette',
|
|
||||||
component: PaletteDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue