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.
|
||||
</p>
|
||||
</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">
|
||||
<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">
|
||||
|
|
@ -24,7 +26,16 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
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>
|
||||
<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>
|
||||
<div class="card flex justify-content-center gap-3">
|
||||
<InputSwitch v-model="checked1" class="blue-switch" />
|
||||
|
|
@ -8,6 +8,9 @@
|
|||
</div>
|
||||
<DocSectionCode :code="code1" 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>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,6 +43,24 @@ export default {
|
|||
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
|
||||
}
|
||||
</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