From f67fe3084734d9e76b88b92e18ea43a909ca66f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?= Date: Mon, 16 Sep 2024 09:48:30 +1200 Subject: [PATCH] style: improve dark mode button contrast (#85) --- .changeset/hungry-eagles-hug.md | 5 +++++ .../src/elements/components/element.ts | 22 ++++++------------- 2 files changed, 12 insertions(+), 15 deletions(-) create mode 100644 .changeset/hungry-eagles-hug.md diff --git a/.changeset/hungry-eagles-hug.md b/.changeset/hungry-eagles-hug.md new file mode 100644 index 0000000..95a02a2 --- /dev/null +++ b/.changeset/hungry-eagles-hug.md @@ -0,0 +1,5 @@ +--- +"dot-connect": patch +--- + +Updated button with improved contrast for dark mode. diff --git a/packages/dot-connect/src/elements/components/element.ts b/packages/dot-connect/src/elements/components/element.ts index cc8fe2e..7641ea7 100644 --- a/packages/dot-connect/src/elements/components/element.ts +++ b/packages/dot-connect/src/elements/components/element.ts @@ -64,32 +64,24 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) { } &.info { - color: light-dark( - var(--info-color), - color-mix(in srgb, var(--info-color), var(--surface-color) 10%) - ); + color: var(--info-color); } &.success { - color: light-dark( - var(--success-color), - color-mix(in srgb, var(--success-color), var(--surface-color) 10%) - ); + color: var(--success-color); } &.error { - color: light-dark( - var(--error-color), - color-mix(in srgb, var(--error-color), var(--surface-color) 10%) - ); + color: var(--error-color); } &.info, &.success, &.error { - background-color: light-dark( - color-mix(in srgb, var(--on-surface-color), transparent 95%), - var(--on-surface-color) + background-color: color-mix( + in srgb, + var(--on-surface-color), + transparent 95% ); }