Feat/colors extensions (#3115)

* feat: setup unocss integration page

* feat: add unocss config example

* feat: add description and translations

* refactor: rewrite to js

* refactor: rewrite key to lowercase

* feat: configure unocss integration page

* refactor: remove redundant preset from example

* feat: split translations

* refactor: added empty line

packages/docs/locales/en.json

@@ -1669,6 +1669,7 @@
     "webComponents": "Web Components",
     "colorsClasses": "Colors Classes",
     "skeleton": "Skeleton",
+    "unocss": "UnoCSS Integration",
     "testing": "Testing"
   },
   "all": {

packages/docs/locales/ru.json

@@ -1558,7 +1558,8 @@
     "team": "Команда разработчиков",
     "i18n": "I18n",
     "webComponents": "Web Components",
-    "colorsClasses": "Colors Classes"
+    "colorsClasses": "Colors Classes",
+    "unocss": "Интеграция с UnoCSS"
   },
   "all": {
     "examples": "Примеры",

packages/docs/page-config/extensions/unocss/code/unocss.config.js

@@ -0,0 +1,29 @@
+// unocss.config.*
+import { defineConfig, presetUno } from 'unocss'
+import presetTheme from 'unocss-preset-theme'
+import { colorsPreset, thresholdsPreset } from 'vuestic-ui'
+
+const convertNumbersToCssUnits = (obj, unit = 'px') =>
+  Object.entries(obj).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: `${value}${unit}`,
+  }), {})
+
+export default defineConfig({
+  theme: {
+    colors: colorsPreset.light,
+    breakpoints: convertNumbersToCssUnits(thresholdsPreset),
+  },
+  presets: [
+    presetUno({
+      dark: 'media',
+    }),
+    presetTheme({
+      theme: {
+        dark: {
+          colors: colorsPreset.dark,
+        },
+      },
+    }),
+  ],
+})

packages/docs/page-config/extensions/unocss/index.ts

@@ -0,0 +1,18 @@
+export default definePageConfig({
+  blocks: [
+    block.title('unocss.title'),
+    block.paragraph('unocss.text'),
+
+    block.headline('unocss.preparation.title'),
+    block.paragraph('unocss.preparation.text0'),
+    block.paragraph('unocss.preparation.text1'),
+    block.code({
+      npm: 'npm i -D unocss-preset-theme',
+      yarn: 'yarn add -D unocss-preset-theme',
+    }, 'bash'),
+
+    block.headline('unocss.setup.title'),
+    block.paragraph('unocss.setup.text'),
+    block.code('unocss.config.js'),
+  ]
+})

packages/docs/page-config/extensions/unocss/translation/en.json

@@ -0,0 +1,13 @@
+{
+  "title": "Integration with UnoCSS",
+  "text": "Here is guide how to integrate Vuestic UI colors and breakpoints into UnoCSS configuration.",
+  "preparation": {
+    "title": "Preparations",
+    "text0": "Before we start with integration, please ensure you have both UnoCSS and Vuestic UI installed. If that's not the case - here are installation guide for the [Vuestic UI](/getting-started/installation) and for the [UnoCSS]((https://github.com/unocss/unocss#installation))[[target=_blank]].",
+    "text1": "Also you need to install `unocss-preset-theme` preset."
+  },
+  "setup": {
+    "title": "Setup",
+    "text": "Configure configuration file for the UnoCSS as shown below."
+  }
+}

packages/docs/page-config/extensions/unocss/translation/ru.json

@@ -0,0 +1,13 @@
+{
+  "title": "Интеграция с UnoCSS",
+  "text": "На этой странице представлено описание интеграции цветов и брейкпоинтов Vuestic UI в файл конфигурации UnoCSS.",
+  "preparation": {
+    "title": "Подготовка",
+    "text0": "Прежде чем начать интеграцию, пожалуйста, убедитесь что вы установили и UnoCSS, и Vuestic UI. Если же нет, то вот инструкция по установке для [Vuestic UI](/getting-started/installation) и [UnoCSS]((https://github.com/unocss/unocss#installation))[[target=_blank]].",
+    "text1": "Также вам нужно установить пресет `unocss-preset-theme`."
+  },
+  "setup": {
+    "title": "Настройка",
+    "text": "Настройте файл конфигурации UnoCSS как ниже."
+  }
+}

packages/docs/page-config/navigationRoutes.ts

@@ -511,6 +511,13 @@ export const navigationRoutes: NavigationRoute[] = [
           badge: "updated",
         }
       },
+      {
+        name: "unocss",
+        displayName: "menu.unocss",
+        meta: {
+          badge: "new",
+        }
+      },
       // GENERATOR_ADD - extensions
     ],
   },