From aec6027636c8d833287125bfe66ff49792c8b015 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Tue, 2 May 2023 06:19:44 +0300 Subject: [PATCH 1/4] docs(colors): update colors guide page --- .../page-config/styles/colors/code/scheme.ts | 26 +++--- .../component-examples.vue => Components.vue} | 0 .../styles/colors/components/PaletteGrid.vue | 83 +++++++++++++++++++ ...lors-grid-card.vue => PaletteGridCard.vue} | 0 .../components/components/colors-grid.vue | 55 ------------ .../colors/components/theme-examples.vue | 9 -- .../styles/colors/components/theme.vue | 67 --------------- .../styles/colors/examples/CssVariables.vue | 19 +++++ .../styles/colors/examples/CustomAlert.vue | 16 ---- .../colors/examples/LocalThemeSwitcher.vue | 35 ++++++++ .../styles/colors/examples/ThemeSwitcher.vue | 26 ++++++ .../styles/colors/examples/Utility.vue | 14 ++++ .../docs/page-config/styles/colors/index.ts | 34 +++++--- .../styles/colors/translation/en.json | 53 ++++++++++++ 14 files changed, 264 insertions(+), 173 deletions(-) rename packages/docs/page-config/styles/colors/components/{components/component-examples.vue => Components.vue} (100%) create mode 100644 packages/docs/page-config/styles/colors/components/PaletteGrid.vue rename packages/docs/page-config/styles/colors/components/components/{colors-grid-card.vue => PaletteGridCard.vue} (100%) delete mode 100644 packages/docs/page-config/styles/colors/components/components/colors-grid.vue delete mode 100644 packages/docs/page-config/styles/colors/components/theme-examples.vue delete mode 100644 packages/docs/page-config/styles/colors/components/theme.vue create mode 100644 packages/docs/page-config/styles/colors/examples/CssVariables.vue delete mode 100644 packages/docs/page-config/styles/colors/examples/CustomAlert.vue create mode 100644 packages/docs/page-config/styles/colors/examples/LocalThemeSwitcher.vue create mode 100644 packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue create mode 100644 packages/docs/page-config/styles/colors/examples/Utility.vue create mode 100644 packages/docs/page-config/styles/colors/translation/en.json diff --git a/packages/docs/page-config/styles/colors/code/scheme.ts b/packages/docs/page-config/styles/colors/code/scheme.ts index de16e3eb89..f6c494e81f 100644 --- a/packages/docs/page-config/styles/colors/code/scheme.ts +++ b/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', + } + } + }, + }, +}) diff --git a/packages/docs/page-config/styles/colors/components/components/component-examples.vue b/packages/docs/page-config/styles/colors/components/Components.vue similarity index 100% rename from packages/docs/page-config/styles/colors/components/components/component-examples.vue rename to packages/docs/page-config/styles/colors/components/Components.vue diff --git a/packages/docs/page-config/styles/colors/components/PaletteGrid.vue b/packages/docs/page-config/styles/colors/components/PaletteGrid.vue new file mode 100644 index 0000000000..3f1834a739 --- /dev/null +++ b/packages/docs/page-config/styles/colors/components/PaletteGrid.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/docs/page-config/styles/colors/components/components/colors-grid-card.vue b/packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue similarity index 100% rename from packages/docs/page-config/styles/colors/components/components/colors-grid-card.vue rename to packages/docs/page-config/styles/colors/components/components/PaletteGridCard.vue diff --git a/packages/docs/page-config/styles/colors/components/components/colors-grid.vue b/packages/docs/page-config/styles/colors/components/components/colors-grid.vue deleted file mode 100644 index 85b7ea4037..0000000000 --- a/packages/docs/page-config/styles/colors/components/components/colors-grid.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - diff --git a/packages/docs/page-config/styles/colors/components/theme-examples.vue b/packages/docs/page-config/styles/colors/components/theme-examples.vue deleted file mode 100644 index 34bf62a275..0000000000 --- a/packages/docs/page-config/styles/colors/components/theme-examples.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/packages/docs/page-config/styles/colors/components/theme.vue b/packages/docs/page-config/styles/colors/components/theme.vue deleted file mode 100644 index 53f7ea88e6..0000000000 --- a/packages/docs/page-config/styles/colors/components/theme.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - diff --git a/packages/docs/page-config/styles/colors/examples/CssVariables.vue b/packages/docs/page-config/styles/colors/examples/CssVariables.vue new file mode 100644 index 0000000000..bcbaac5e4b --- /dev/null +++ b/packages/docs/page-config/styles/colors/examples/CssVariables.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/docs/page-config/styles/colors/examples/CustomAlert.vue b/packages/docs/page-config/styles/colors/examples/CustomAlert.vue deleted file mode 100644 index 02518ff5a8..0000000000 --- a/packages/docs/page-config/styles/colors/examples/CustomAlert.vue +++ /dev/null @@ -1,16 +0,0 @@ - diff --git a/packages/docs/page-config/styles/colors/examples/LocalThemeSwitcher.vue b/packages/docs/page-config/styles/colors/examples/LocalThemeSwitcher.vue new file mode 100644 index 0000000000..a4780e6863 --- /dev/null +++ b/packages/docs/page-config/styles/colors/examples/LocalThemeSwitcher.vue @@ -0,0 +1,35 @@ + + + diff --git a/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue b/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue new file mode 100644 index 0000000000..ddfcfdbdaa --- /dev/null +++ b/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue @@ -0,0 +1,26 @@ + +Ͳ + diff --git a/packages/docs/page-config/styles/colors/examples/Utility.vue b/packages/docs/page-config/styles/colors/examples/Utility.vue new file mode 100644 index 0000000000..dd468db32a --- /dev/null +++ b/packages/docs/page-config/styles/colors/examples/Utility.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/packages/docs/page-config/styles/colors/index.ts b/packages/docs/page-config/styles/colors/index.ts index 880917cfd6..25afb49479 100644 --- a/packages/docs/page-config/styles/colors/index.ts +++ b/packages/docs/page-config/styles/colors/index.ts @@ -3,20 +3,30 @@ export default definePageConfig({ block.title("colors.title"), block.paragraph("colors.description"), - block.subtitle("colors.theme.title"), - block.paragraph("colors.theme.description"), - block.paragraph("colors.theme.autoTextColor"), - block.component("theme", { hideTemplate: true }), - block.component("theme-examples", { hideCode: true }), + block.subtitle("colors.palette.title"), + block.paragraph("colors.palette.description"), + block.component("PaletteGrid", { hideCode: true }), - block.subtitle("colors.syntax.title"), - block.paragraph("colors.syntax.description"), + block.subtitle("colors.customization.title"), + block.paragraph("colors.customization.description"), block.code("scheme"), - block.paragraph("colors.syntax.colorsUsed"), - block.example("CustomAlert", { hideTitle: true }), + block.link("colors.customization.link", "/services/colors-config"), - block.subtitle("colors.reactivity.subtitle"), - block.paragraph("colors.reactivity.about"), - block.paragraph("colors.reactivity.additional"), + block.subtitle("colors.guide.global.title"), + block.paragraph("colors.guide.global.description"), + block.component("Components", { hideTemplate: true }), + block.example("ThemeSwitcher", { hideTitle: true }), + + // block.subtitle("colors.guide.local.title"), + // block.paragraph("colors.guide.local.description"), + // block.example("LocalThemeSwitcher", { hideTitle: true }), + + block.subtitle("colors.guide.cssVariables.title"), + block.paragraph("colors.guide.cssVariables.description"), + block.example("CssVariables", { hideTitle: true }), + + block.subtitle("colors.guide.utility.title"), + block.paragraph("colors.guide.utility.description"), + block.example("Utility", { hideTitle: true }), ], }); diff --git a/packages/docs/page-config/styles/colors/translation/en.json b/packages/docs/page-config/styles/colors/translation/en.json new file mode 100644 index 0000000000..6eecefc1a1 --- /dev/null +++ b/packages/docs/page-config/styles/colors/translation/en.json @@ -0,0 +1,53 @@ +{ + "title": "Colors", + "description": "Developing an effective and user-friendly color scheme can be a challenging task. The Vuestic UI component library aims to make this process simpler and more convenient by providing a versatile set of colors that are easy to customize and manage.", + "palette": { + "title": "Color Palette", + "description": "Vuestic UI library offers a color palette consisting of 14 colors. These colors are divided into accent colors, background colors, text colors and utility colors. By default, there are two color presets available: light and dark.", + "accent": "Accent colors are used to highlight interactive elements such as buttons, links, and other interactive elements.", + "background": "Background colors are used to define the background of the page, cards, modals, dropdowns, and other elements.", + "text": "Text colors are used to define the main and alternative text colors. Vuestic automatically choose correct text color based on background color.", + "utility": "Utility colors are used to define the color of shadows and keyboard focus outline." + }, + "customization": { + "title": "Customization", + "description": "There is the flexibility to modify or expand upon the existing color set, as well as define own custom color presets. The color scheme can be applied globally using a [Colors Config](https://vuestic.dev/en/services/colors-config) or set for specific sections of an application using [VaConfig](https://vuestic.dev/en/ui-elements/config) component.", + "link": "Read more about Colors Config" + }, + "guide": { + "global": { + "title": "Making a global theme switcher", + "description": "You can use `useColors` composable function to make a theme switcher. `applyPreset` method will change theme globally. You can check example bellow:" + }, + "local": { + "title": "Making a local theme switcher", + "description": "Color preset can be provided using [VaConfig](https://vuestic.dev/en/ui-elements/config) for specific part of application:" + }, + "cssVariables": { + "title": "CSS Variables", + "description": "In case you need custom component that will follow Vuestic theme, you can use CSS variables. CSS variables are reactive and can be also scoped using [VaConfig](https://vuestic.dev/en/ui-elements/config)." + }, + "utility": { + "title": "Modify colors", + "description": "You can modify colors using utilities from `useColors`. You can check example bellow:" + } + }, + "theme": { + "colors": { + "primary": "Accent color used on button, links and other interactive elements", + "secondary": "Accent color used on non important interactive elements", + "success": "Accent color for success validation, alerts or toasts", + "danger": "Accent color for error validation, alerts or toasts", + "info": "Accent color for info toasts or alerts", + "warning": "Accent color for warning toasts or alerts", + "backgroundPrimary": "Page background", + "backgroundSecondary": "Card, Modal, Dropdown background", + "backgroundElement": "Input, switch, divider background colors", + "backgroundBorder": "Used as border color in elements like input, switch etc.", + "textPrimary": "Main text used on page. Used as default color on background colors.", + "textInverted": "Used as text color, if textPrimary doesn't have enough contrast with background color.", + "shadow": "Color of shadows that used in elements like cards, modals etc.", + "focus": "Keyboard focus outline color" + } + } +} \ No newline at end of file From 80de5053844681dd0ae0add5df3e63007190987a Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Tue, 2 May 2023 06:25:27 +0300 Subject: [PATCH 2/4] docs(colors): remove extra info from colors config page --- .../colors-config/code/icons-config.ts | 13 +----- .../colors-config/examples/change-colors.vue | 45 +++++------------- .../services/colors-config/index.ts | 46 ------------------- 3 files changed, 12 insertions(+), 92 deletions(-) diff --git a/packages/docs/page-config/services/colors-config/code/icons-config.ts b/packages/docs/page-config/services/colors-config/code/icons-config.ts index f7d66b4739..1df809f229 100644 --- a/packages/docs/page-config/services/colors-config/code/icons-config.ts +++ b/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' diff --git a/packages/docs/page-config/services/colors-config/examples/change-colors.vue b/packages/docs/page-config/services/colors-config/examples/change-colors.vue index 26179d80b5..27e0c024e6 100644 --- a/packages/docs/page-config/services/colors-config/examples/change-colors.vue +++ b/packages/docs/page-config/services/colors-config/examples/change-colors.vue @@ -1,6 +1,6 @@ - diff --git a/packages/docs/page-config/services/colors-config/index.ts b/packages/docs/page-config/services/colors-config/index.ts index 4c28e284e5..19fe3dff0c 100644 --- a/packages/docs/page-config/services/colors-config/index.ts +++ b/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), From e20ef23c7d9f2ba3a7d78b1f925b01d111c2ffd1 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Tue, 16 May 2023 21:31:59 +0300 Subject: [PATCH 3/4] chore: typo fixes Co-authored-by: Vitaly --- .../docs/page-config/styles/colors/examples/ThemeSwitcher.vue | 1 - packages/docs/page-config/styles/colors/translation/en.json | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue b/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue index ddfcfdbdaa..d6898d55f9 100644 --- a/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue +++ b/packages/docs/page-config/styles/colors/examples/ThemeSwitcher.vue @@ -10,7 +10,6 @@ const switchValue = computed({ set(value) { applyPreset(value) } }) -Ͳ