From 71eb07517a6eb2ab2836c67e532983e7df07f8e3 Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Thu, 6 Mar 2025 11:58:14 +0800 Subject: [PATCH] style(ui-transitions): colors Signed-off-by: Neko Ayaka --- docs/src/content/docs/references/Design Guidelines/tools.md | 6 +++++- packages/ui-transitions/playground/src/App.vue | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/references/Design Guidelines/tools.md b/docs/src/content/docs/references/Design Guidelines/tools.md index 9bbd94fe2..0e78e0ad1 100644 --- a/docs/src/content/docs/references/Design Guidelines/tools.md +++ b/docs/src/content/docs/references/Design Guidelines/tools.md @@ -17,7 +17,11 @@ So, unless opacity is part of the typography design, please try to pick a best s Another great tool we use is called [Radix Colors](https://www.radix-ui.com/colors), it's kind of the building blocks of our interactive UI elements, since they built great color palettes with nice color theory backed, you can pick the suitable color from the palette as well. -You may already learned that a _complementary color_ is, it was useful for the color contrast, [Color wheel - color theory and calculator | Canva Colors](https://www.canva.com/colors/color-wheel/) is one of the tool that can help you find the complementary color quickly and interactively. +You may already learned that a _complementary color_ is, it was useful for the color contrast, here are several nice tools can help you choose the complementary color quickly and interactively: + +- [Color wheel - Figma](https://www.figma.com/color-wheel/) +- [Color wheel - Canva Colors](https://www.canva.com/colors/color-wheel/) +- [Paletton](https://paletton.com/#uid=55v1e0kk-p26VFOfrvbqEdSDDbg) ## Backgrounds & Patterns diff --git a/packages/ui-transitions/playground/src/App.vue b/packages/ui-transitions/playground/src/App.vue index 6e13a1c92..ea5eff94c 100644 --- a/packages/ui-transitions/playground/src/App.vue +++ b/packages/ui-transitions/playground/src/App.vue @@ -8,7 +8,11 @@ const isDark = useDark()