From a59de6bb7d09e1e86717384a51d3c0f9f11cf119 Mon Sep 17 00:00:00 2001 From: Kian McKenna Date: Wed, 23 Oct 2024 18:17:17 -0500 Subject: [PATCH 1/2] fix: add background color to code block buttons --- packages/site-kit/src/lib/components/Text.svelte | 1 + packages/site-kit/src/lib/styles/utils/buttons.css | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 19fc4e6e1f..0cbfaa6d59 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -204,6 +204,7 @@ height: calc(var(--height) - 1rem); aspect-ratio: 1; border-radius: var(--sk-border-radius); + background-color: var(--sk-back-2); &[disabled] { opacity: 1; diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index d277fe9372..1f99a0d695 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -3,6 +3,7 @@ border-style: solid; border-color: var(--sk-raised-color); border-width: var(--sk-raised-width); + background-color: inherit; &:hover { border-color: var(--sk-raised-hover-color); From 2ed33b9bae8400c68bb53337755583f85f9d97f7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 24 Oct 2024 21:47:04 -0400 Subject: [PATCH 2/2] put background on .controls rather than button --- packages/site-kit/src/lib/components/Text.svelte | 8 ++++++-- packages/site-kit/src/lib/styles/utils/buttons.css | 1 - 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 9e532f24f0..7a8a77700c 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -127,7 +127,7 @@ top: 0; right: 0; height: var(--height); - padding: 0.3rem 0.5rem 0.3rem 1rem; + padding: 0.3rem 0.5rem; gap: 0.5rem; z-index: 2; justify-content: end; @@ -136,6 +136,11 @@ &:has(.filename) { position: relative; background: var(--sk-back-3); + padding-left: 1rem; + } + + &:not(:has(.filename)) { + background: inherit; } .filename { @@ -206,7 +211,6 @@ height: calc(var(--height) - 1rem); aspect-ratio: 1; border-radius: var(--sk-border-radius); - background-color: var(--sk-back-2); &[disabled] { opacity: 1; diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index 073841ca1a..b9f742ed21 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -3,7 +3,6 @@ border-style: solid; border-color: var(--sk-raised-color); border-width: var(--sk-raised-width); - background-color: inherit; &.primary { --sk-raised-color: hsla(12, 93%, 60%) hsla(12, 93%, 35%) hsla(12, 93%, 35%) hsla(12, 93%, 60%);