Skip to content

Commit

Permalink
Docs/update colors docs (#3393)
Browse files Browse the repository at this point in the history
* docs(colors): update colors guide page

* docs(colors): remove extra info from colors config page

* chore: typo fixes

Co-authored-by: Vitaly <[email protected]>

* fix: make getComputedColor writtable

---------

Co-authored-by: Vitaly <[email protected]>
  • Loading branch information
m0ksem and RVitaly1978 authored May 25, 2023
1 parent 6a77ad1 commit 91ba95f
Show file tree
Hide file tree
Showing 18 changed files with 279 additions and 266 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ createApp(App)
config: {
colors: {
variables: {
primary: '#ff00ff',
'player-icon': '#aaa',
success: '#0fb'
'player-icon': '#aaa',
}
},
icons: createIconsConfig({
Expand All @@ -17,16 +16,6 @@ createApp(App)
to: 'fa4-prev',
color: 'player-icon'
},
{
name: 'next',
to: 'fa4-next',
color: 'player-icon'
},
{
name: 'pause',
to: 'fa4-pause',
color: 'player-icon'
},
{
name: 'play',
to: 'fa4-play'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="flex items-center gap-4">
<va-button>{{ buttonText }}</va-button>
<va-button>Primary button</va-button>

<va-color-palette
v-model="primaryColor"
Expand All @@ -12,39 +12,16 @@
</div>
</template>

<script>
import { computed } from "vue";
import { useColors } from "vuestic-ui";
<script setup>
const { getComputedColor } = useColors();
export default {
props: {
currentColorText: { type: String, default: "Current primary color is" },
buttonText: { type: String, default: "Primary color button" },
},
setup() {
const { presets, setColors, getColor } = useColors();
const colorsToChange = [
"#2c82e0",
"#ef476f",
"#ffd166",
"#06d6a0",
"#118ab2",
];
const colorsToChange = [
presets.value.light.primary,
"#ef476f",
"#ffd166",
"#06d6a0",
"#118ab2",
];
const primaryColor = computed({
get() {
return getColor("primary");
},
set(value) {
setColors({ primary: value });
},
});
return {
primaryColor,
colorsToChange,
};
},
};
const primaryColor = getComputedColor('primary');
</script>
46 changes: 0 additions & 46 deletions packages/docs/page-config/services/colors-config/index.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
import {
colorToRgba,
setHSLAColor,
getFocusColor,
getHoverColor,
shiftHSLAColor,
getBoxShadowColor,
getGradientBackground,
getBoxShadowColorFromBg,
getStateMaskGradientBackground,
} from 'vuestic-ui/src/services/color';

const columnsApiTypes = [
"name",
{ title: "type", type: "code" },
Expand Down Expand Up @@ -56,34 +44,6 @@ const tableDataApiTypes = [
],
];

const tableDataApiMethods = [
[
"useColors",
`() => {
colors,
currentPresetName,
presets,
applyPreset,
setColors,
getColors,
getColor,
getComputedColor,
getBoxShadowColor,
getBoxShadowColorFromBg,
getHoverColor,
getFocusColor,
getGradientBackground,
getTextColor,
shiftHSLAColor,
setHSLAColor,
colorsToCSSVariable,
colorToRgba,
getStateMaskGradientBackground,
}`,
"colorsConfig.api.useColors",
],
];

const tableDataApiHookMethods = [
[
"applyPreset",
Expand Down Expand Up @@ -195,18 +155,12 @@ export default definePageConfig({
block.paragraph("colorsConfig.otherServices.icons"),
block.code("icons-config"),

block.paragraph("colorsConfig.otherServices.css"),
block.example("css-variable", { hideTitle: true }),

// api
block.subtitle("colorsConfig.api.title"),

block.headline("colorsConfig.api.types"),
block.table(columnsApiTypes, tableDataApiTypes),

block.headline("colorsConfig.api.methods"),
block.table(columnsApiMethods, tableDataApiMethods),

block.headline("colorsConfig.api.hookMethods"),
block.table(columnsApiMethods, tableDataApiHookMethods),

Expand Down
26 changes: 12 additions & 14 deletions packages/docs/page-config/styles/colors/code/scheme.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
const app = createApp(App)
.use(
createVuestic({
config: {
colors: {
variables: {
primary: "#B456C0",
custom: "#A35600",
},
},
},
})
)
.mount("#app");
createVuestic({
config: {
colors: {
presets: {
light: {
primary: '#f0f0f0',
myCoolColor: '#f00f0f',
}
}
},
},
})
83 changes: 83 additions & 0 deletions packages/docs/page-config/styles/colors/components/PaletteGrid.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<template>
<div class="color-grid">
<div
v-for="{ type, colors } in colorNames"
:key="type"
class="flex flex-wrap mb-8"
>
<div class="px-4">
<h6 class="va-text-capitalize">{{ type }}</h6>
<p>
{{ $t('colors.palette.' + type) }}
</p>
</div>
<div
v-for="name in colors"
:key="type + name"
class="color-grid__item-wrapper sm:w-1/2 w-full"
>
<ColorsGridCard
class="color-grid__item"
:value="getColor(name)"
:name="name"
/>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { useColors } from "vuestic-ui";
import ColorsGridCard from "./components/PaletteGridCard.vue";
const { getColor } = useColors();
const colorNames = [
{
type: "accent",
colors: ["primary", "secondary", "success", "warning", "danger", "info"],
},
{
type: "background",
colors: [
"backgroundPrimary",
"backgroundSecondary",
"backgroundElement",
"backgroundBorder",
],
},
{
type: "text",
colors: ["textPrimary", "textInverted"],
},
{
type: "utility",
colors: ["shadow", "focus"],
},
];
</script>

<style lang="scss" scoped>
$gap: 16px;
.color-grid {
display: flex;
flex-wrap: wrap;
margin: -$gap;
padding: $gap 0;
p {
margin-bottom: 0.25rem;
}
&__item {
box-sizing: border-box;
border: 1px solid rgba(58, 58, 58, 0.307);
border-radius: 5px;
&-wrapper {
padding: $gap;
}
}
}
</style>

This file was deleted.

This file was deleted.

Loading

0 comments on commit 91ba95f

Please sign in to comment.