From bc44dc2b32743577feccf99fa16a5d29b0c9c5c7 Mon Sep 17 00:00:00 2001 From: Kia Ishii Date: Wed, 25 May 2022 18:56:57 +0900 Subject: [PATCH] feat: adjust custom box brightness --- src/client/theme-default/styles/vars.css | 39 +++++++++++++++--------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index 17f2fa5b..aca3345a 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.css @@ -55,21 +55,27 @@ --vp-c-green-lighter: #35eb9a; --vp-c-green-dark: #33a06f; --vp-c-green-darker: #155f3e; - --vp-c-green-dimm: rgba(66, 184, 131, 0.08); + --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5); + --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25); + --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05); --vp-c-yellow: #ffc517; - --vp-c-yellow-light: #ffe417; - --vp-c-yellow-lighter: #ffff17; + --vp-c-yellow-light: #fcd253; + --vp-c-yellow-lighter: #fcfc7c; --vp-c-yellow-dark: #e0ad15; --vp-c-yellow-darker: #ad850e; - --vp-c-yellow-dimm: rgba(255, 197, 23, 0.08); + --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5); + --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25); + --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05); --vp-c-red: #ed3c50; - --vp-c-red-light: #f43771; + --vp-c-red-light: #f54e82; --vp-c-red-lighter: #fd1d7c; --vp-c-red-dark: #cd2d3f; --vp-c-red-darker: #ab2131; - --vp-c-red-dimm: rgba(237, 60, 80, 0.08); + --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5); + --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25); + --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05); } /** @@ -266,19 +272,19 @@ --vp-custom-block-info-bg: var(--vp-c-white-soft); --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4); - --vp-custom-block-tip-border: var(--vp-c-green); + --vp-custom-block-tip-border: var(--vp-c-green-dimm-1); --vp-custom-block-tip-text: var(--vp-c-green-darker); - --vp-custom-block-tip-bg: var(--vp-c-green-dimm); + --vp-custom-block-tip-bg: var(--vp-c-green-dimm-3); --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg); - --vp-custom-block-warning-border: var(--vp-c-yellow); + --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1); --vp-custom-block-warning-text: var(--vp-c-yellow-darker); - --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm); + --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3); --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg); - --vp-custom-block-danger-border: var(--vp-c-red); + --vp-custom-block-danger-border: var(--vp-c-red-dimm-1); --vp-custom-block-danger-text: var(--vp-c-red-darker); - --vp-custom-block-danger-bg: var(--vp-c-red-dimm); + --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3); --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg); --vp-custom-block-details-border: var(--vp-custom-block-info-border); @@ -292,11 +298,14 @@ --vp-custom-block-info-bg: var(--vp-c-black-mute); --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4); - --vp-custom-block-tip-text: var(--vp-c-green); + --vp-custom-block-tip-border: var(--vp-c-green-dimm-2); + --vp-custom-block-tip-text: var(--vp-c-green-light); - --vp-custom-block-warning-text: var(--vp-c-yellow); + --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2); + --vp-custom-block-warning-text: var(--vp-c-yellow-light); - --vp-custom-block-danger-text: var(--vp-c-red); + --vp-custom-block-danger-border: var(--vp-c-red-dimm-2); + --vp-custom-block-danger-text: var(--vp-c-red-light); } /**