70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
|
<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>
|