diff --git a/.changeset/old-masks-pretend.md b/.changeset/old-masks-pretend.md new file mode 100644 index 00000000000..8f84897bb16 --- /dev/null +++ b/.changeset/old-masks-pretend.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': minor +--- + +Make the asides less prominent diff --git a/packages/starlight/style/asides.css b/packages/starlight/style/asides.css index adbb0558f48..37f02690152 100644 --- a/packages/starlight/style/asides.css +++ b/packages/starlight/style/asides.css @@ -1,23 +1,27 @@ .starlight-aside { padding: 1rem; - border-inline-start: 0.25rem solid var(--sl-color-asides-border); + border: 1px solid var(--sl-color-asides-border); color: var(--sl-color-white); } + .starlight-aside--note { --sl-color-asides-text-accent: var(--sl-color-blue-high); --sl-color-asides-border: var(--sl-color-blue); background-color: var(--sl-color-blue-low); } + .starlight-aside--tip { --sl-color-asides-text-accent: var(--sl-color-purple-high); --sl-color-asides-border: var(--sl-color-purple); background-color: var(--sl-color-purple-low); } + .starlight-aside--caution { --sl-color-asides-text-accent: var(--sl-color-orange-high); --sl-color-asides-border: var(--sl-color-orange); background-color: var(--sl-color-orange-low); } + .starlight-aside--danger { --sl-color-asides-text-accent: var(--sl-color-red-high); --sl-color-asides-border: var(--sl-color-red); @@ -28,7 +32,6 @@ display: flex; gap: 0.5rem; align-items: center; - font-size: var(--sl-text-h5); font-weight: 600; line-height: var(--sl-line-height-headings); color: var(--sl-color-asides-text-accent); diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css index 09c0305d110..160c4b1186d 100644 --- a/packages/starlight/style/props.css +++ b/packages/starlight/style/props.css @@ -11,23 +11,23 @@ --sl-color-black: hsl(224, 10%, 10%); --sl-hue-orange: 41; - --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%); + --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 15%); --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%); --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%); --sl-hue-green: 101; - --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); + --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 15%); --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%); --sl-hue-blue: 234; - --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); + --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 18%); --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); --sl-hue-purple: 281; - --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%); + --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 15%); --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%); --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%); --sl-hue-red: 339; - --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%); + --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 15%); --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%); --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%); @@ -127,19 +127,19 @@ --sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%); --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%); - --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%); + --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 90%); --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%); --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%); - --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%); + --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 92%); --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%); --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%); - --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%); + --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 94%); --sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%); --sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%); - --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%); + --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 94%); --sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%); --sl-color-red: hsl(var(--sl-hue-red), 90%, 60%); - --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%); + --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 94%); --sl-color-accent-high: hsl(234, 80%, 30%); --sl-color-accent: hsl(234, 90%, 60%);