Docs/update colors docs

packages/docs/page-config/services/colors-config/code/icons-config.ts

@@ -5,9 +5,8 @@ createApp(App)
  config: {
  colors: {
  variables: {
- primary: '#ff00ff',
- 'player-icon': '#aaa',
  success: '#0fb'
+ 'player-icon': '#aaa',
  }
  },
  icons: createIconsConfig({
@@ -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'

packages/docs/page-config/services/colors-config/examples/change-colors.vue

@@ -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"
@@ -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>

packages/docs/page-config/services/colors-config/index.ts

@@ -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" },
@@ -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",
@@ -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),
 

packages/docs/page-config/styles/colors/code/scheme.ts

@@ -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',
+ }
+ }
+ },
+ },
+})

packages/docs/page-config/styles/colors/components/PaletteGrid.vue

@@ -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>