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>