vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add scoped tokens doc

pull/5507/head
Cagatay Civici 2024-04-01 15:55:29 +03:00
parent c96603671a
commit 3589ef9e38
5 changed files with 108 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/themes/primeone/base/inputswitch/index.js
View File

@ -45,7 +45,7 @@ export default {
height: 1rem;
left: 0.25rem;
margin-top: -0.5rem;
border-radius: 50%;
border-radius: ${dt('inputswitch.handle.border.radius')};
transition: all ${dt('transition.duration')};
}

3
components/lib/themes/primeone/presets/aura/inputswitch/index.js
View File

@ -1,4 +1,7 @@
export default {
handle: {
borderRadius: '50%'
},
colorScheme: {
light: {
root: {

86
doc/theming/styled/ScopedCSSDoc.vue
View File

@ -1,86 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<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" />
<InputSwitch v-model="checked2" class="amber-switch" />
</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>
export default {
data() {
return {
checked1: true,
checked2: true,
code1: {
basic: `
<InputSwitch v-model="checked1" class="blue-switch" />
<InputSwitch v-model="checked2" class="amber-switch" />
`
},
code2: {
basic: `
<style scoped>
.blue-switch {
--p-inputswitch-checked-background: var(--p-blue-500);
--p-inputswitch-checked-hover-background: var(--p-blue-500);
--p-inputswitch-border-radius: 4px;
}
.amber-switch {
--p-inputswitch-checked-background: var(--p-amber-500);
--p-inputswitch-checked-hover-background: var(--p-amber-500);
--p-inputswitch-handle-background: var(--p-zinc-950);
--p-inputswitch-handle-hover-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-background: var(--p-zinc-950);
--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}'
}
}
*/
`
}
};
}
};
</script>
<style scoped>
.blue-switch {
--p-inputswitch-checked-background: var(--p-blue-500);
--p-inputswitch-checked-hover-background: var(--p-blue-500);
--p-inputswitch-border-radius: 4px;
}
.amber-switch {
--p-inputswitch-checked-background: var(--p-amber-500);
--p-inputswitch-checked-hover-background: var(--p-amber-500);
--p-inputswitch-handle-background: var(--p-zinc-950);
--p-inputswitch-handle-hover-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-background: var(--p-zinc-950);
--p-inputswitch-handle-checked-hover-background: var(--p-zinc-950);
}
</style>

97
doc/theming/styled/ScopedTokensDoc.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens.</p>
</DocSectionText>
<div class="card flex justify-content-center gap-3">
<InputSwitch v-model="checked1" />
<InputSwitch v-model="checked2" :dt="amberSwitch" />
</div>
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
checked1: true,
checked2: true,
amberSwitch: {
handle: {
borderRadius: '4px'
},
colorScheme: {
light: {
root: {
checkedBackground: '{amber.500}',
checkedHoverBackground: '{amber.600}',
borderRadius: '4px'
},
handle: {
checkedBackground: '{amber.900}',
checkedHoverBackground: '{amber.950}'
}
},
dark: {
root: {
checkedBackground: '{amber.400}',
checkedHoverBackground: '{amber.300}',
borderRadius: '4px'
},
handle: {
checkedBackground: '{amber.50}',
checkedHoverBackground: '{amber.100}'
}
}
}
},
code1: {
basic: `
<template>
<div>
<InputSwitch v-model="checked1" />
<InputSwitch v-model="checked2" :dt"amberSwitch" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const checked1 = ref(true);
const checked2 = ref(true);
const amberSwitch = ref({
handle: {
borderRadius: '4px'
},
colorScheme: {
light: {
root: {
checkedBackground: '{amber.500}',
checkedHoverBackground: '{amber.600}',
borderRadius: '4px'
},
handle: {
checkedBackground: '{amber.900}',
checkedHoverBackground: '{amber.950}'
}
},
dark: {
root: {
checkedBackground: '{amber.400}',
checkedHoverBackground: '{amber.300}',
borderRadius: '4px'
},
handle: {
checkedBackground: '{amber.50}',
checkedHoverBackground: '{amber.100}'
}
}
}
});
<\/script>
`
}
};
}
};
</script>

14
pages/theming/styled/index.vue
View File

@ -22,12 +22,12 @@
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.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 ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue';
import ScopedTokensDoc from '@/doc/theming/styled/ScopedTokensDoc.vue';
import OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue';
import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue';
import LibrariesDoc from '@/doc/theming/styled/csslayer/LibrariesDoc.vue';
@ -135,6 +135,11 @@ export default {
}
]
},
{
id: 'scopedtokens',
label: 'Scoped Tokens',
component: ScopedTokensDoc
},
{
id: 'utils',
label: 'Utils',
@ -208,11 +213,6 @@ export default {
}
]
},
{
id: 'scopedcss',
label: 'Scoped CSS',
component: ScopedCSSDoc
},
{
id: 'cssmodules',
label: 'CSS Modules',