2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Color System - PrimeVue</Title>
|
|
|
|
|
<Meta name="description" content="Each PrimeVue theme exports its own color palette." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
<div class="content-section documentation">
|
|
|
|
|
<h1>Colors</h1>
|
|
|
|
|
<p>Each PrimeVue theme exports its own color palette.</p>
|
|
|
|
|
|
|
|
|
|
<h5>Getting Started</h5>
|
|
|
|
|
<p>Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>.</p>
|
|
|
|
|
|
|
|
|
|
<pre v-code><code>
|
|
|
|
|
<span :style="{color:var(--text-color)}"></span>
|
|
|
|
|
|
|
|
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
<h5>General Colors</h5>
|
|
|
|
|
<p>These are common variables used throughout the theme.</p>
|
|
|
|
|
|
|
|
|
|
<div class="doc-tablewrapper">
|
|
|
|
|
<table class="doc-table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Variable</th>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--text-color</i></td>
|
|
|
|
|
<td>Font text color.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--text-color-secondary</i></td>
|
|
|
|
|
<td>Muted font text color with a secondary level.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--primary-color</i></td>
|
|
|
|
|
<td>Primary color of the theme.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--primary-color-text</i></td>
|
|
|
|
|
<td>Text color when background is primary color.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--font-family</i></td>
|
|
|
|
|
<td>Font family of the theme.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--inline-spacing</i></td>
|
|
|
|
|
<td>Spacing between to adjacent items.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--border-radius</i></td>
|
|
|
|
|
<td>Common border radius of elements.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--focus-ring</i></td>
|
|
|
|
|
<td>Box shadow of a focused element.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--mask-bg</i></td>
|
|
|
|
|
<td>Background of an overlay mask.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Color Palette</h5>
|
|
|
|
|
<p>A palette consists of 9 colors where each color provides tints/shades from 50 to 900.</p>
|
|
|
|
|
|
|
|
|
|
<pre v-code><code>
|
|
|
|
|
<div :style="{backgroundColor:var(--blue-500)}"></div>
|
|
|
|
|
|
|
|
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="flex flex-wrap">
|
|
|
|
|
<div v-for="color of colors" :key="color" class="color-stack mr-6 mb-6">
|
|
|
|
|
<template v-for="shade of shades" :key="shade">
|
|
|
|
|
<div v-if="shade !== 0" class="color-box" :style="{ backgroundColor: `var(--${color}-${shade})`, color: shade > 500 ? '#fff' : '#000' }">{{ color }}-{{ shade }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Surfaces</h5>
|
|
|
|
|
<p>In addition, a theme brings a special palette called surfaces that can be used as the base when designing the surface layers and separators.</p>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="color-stack">
|
|
|
|
|
<div v-for="shade in shades" :key="shade" class="color-box" :style="{ backgroundColor: `var(--surface-${shade})`, color: $appState.darkTheme ? '#fff' : shade > 500 ? '#fff' : '#000' }">surface-{{ shade }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>A theme also exports named surfaces for common use cases.</p>
|
|
|
|
|
<div class="doc-tablewrapper">
|
|
|
|
|
<table class="doc-table">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Variable</th>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-ground</i></td>
|
|
|
|
|
<td>Base ground color.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-section</i></td>
|
|
|
|
|
<td>Color of a section on a ground surface.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-card</i></td>
|
|
|
|
|
<td>Color of a surface used as a card.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-overlay</i></td>
|
|
|
|
|
<td>Color of overlay surfaces.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-border</i></td>
|
|
|
|
|
<td>Color of a divider.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><i>--surface-hover</i></td>
|
|
|
|
|
<td>Color of an element in hover state.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray', 'primary'],
|
|
|
|
|
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.color-stack {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.color-box {
|
|
|
|
|
width: 2.5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
width: 250px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sample-layout {
|
|
|
|
|
width: 375px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
