Skip to content

Commit

Permalink
Refactor baseline icon, light-dark() support & inline SVG
Browse files Browse the repository at this point in the history 
Partially based on web-platform-dx/baseline-status#22
  • Loading branch information
@delucis
delucis committed Oct 25, 2024
1 parent 7a3d2f1 commit e6ef371
Showing 1 changed file with 79 additions and 35 deletions.
114 changes: 79 additions & 35 deletions packages/astro-embed-baseline-status/BaselineIcon.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,94 @@ import type { StatusLevel } from './types';
interface Props {
support: StatusLevel;
}
const paths = {
limited: `<path fill="var(--baseline-icon-limited-front)" d="m10 0 6 6-2 2-6-6 2-2Zm12 12-2 2 6 6 2-2-6-6Zm4-12 2 2-18 18-2-2L26 0Z"/><path fill="var(--baseline-icon-limited-back)" d="m8 2 2 2-6 6 6 6-2 2-8-8 8-8Zm20 0 8 8-8 8-2-2 6-6-6-6 2-2Z"/>`,
widely: `<path fill="var(--baseline-icon-widely-front)" d="m18 8 2 2-2 2-2-2 2-2Z"/><path fill="var(--baseline-icon-widely-front)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/><path fill="var(--baseline-icon-widely-back)" d="m28 2-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z"/>`,
newly: `<path fill="var(--baseline-icon-newly-back)" d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z"/><path fill="var(--baseline-icon-newly-front)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/>`,
no_data: `<path fill="var(--baseline-icon-no_data)" d="m18 8 2 2-2 2-2-2 2-2Zm10-6-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z"/><path fill="var(--baseline-icon-no_data)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/>`,
};
---

<baseline-icon aria-hidden="true">
<div class={`support-${Astro.props.support}`}></div>
</baseline-icon>
<svg
width="36"
height="20"
viewBox="0 0 36 20"
class="baseline-icon"
aria-hidden="true"
set:html={paths[Astro.props.support]}
/>

<style>
baseline-icon {
--baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E");
--baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23C4EED0'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23C4EED0'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E");
--baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%23A8C7FA'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%23A8C7FA'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231B6EF3'/%3E%3C/svg%3E");
--baseline-icon-no_data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23909090'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23909090'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23909090'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23909090'/%3E%3C/svg%3E");
height: 20px;
.baseline-icon {
/* Light palette */
--baseline-icon-limited-front--light: #f09409;
--baseline-icon-limited-back--light: #c6c6c6;
--baseline-icon-widely-front--light: #1ea446;
--baseline-icon-widely-back--light: #c4eed0;
--baseline-icon-newly-front--light: #1b6ef3;
--baseline-icon-newly-back--light: #a8c7fa;
--baseline-icon-no_data--light: #909090;
/* Dark palette */
--baseline-icon-limited-front--dark: #f09409;
--baseline-icon-limited-back--dark: #565656;
--baseline-icon-widely-front--dark: #1ea446;
--baseline-icon-widely-back--dark: #125225;
--baseline-icon-newly-front--dark: #4185ff;
--baseline-icon-newly-back--dark: #2d509e;
--baseline-icon-no_data--dark: #666666;

--baseline-icon-limited-front: var(--baseline-icon-limited-front--light);
--baseline-icon-limited-back: var(--baseline-icon-limited-back--light);
--baseline-icon-widely-front: var(--baseline-icon-widely-front--light);
--baseline-icon-widely-back: var(--baseline-icon-widely-back--light);
--baseline-icon-newly-front: var(--baseline-icon-newly-front--light);
--baseline-icon-newly-back: var(--baseline-icon-newly-back--light);
--baseline-icon-no_data: var(--baseline-icon-no_data--light);
}

@media (prefers-color-scheme: dark) {
baseline-icon {
--baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23565656'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23565656'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E%0A");
--baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23125225'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23125225'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E");
--baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%232D509E'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%232D509E'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%232D509E'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%232D509E'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%232D509E'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%232D509E'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%232D509E'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%232D509E'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%234185FF'/%3E%3C/svg%3E");
--baseline-icon-no_data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23666666'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23666666'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23666666'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23666666'/%3E%3C/svg%3E");
.baseline-icon {
--baseline-icon-limited-front: var(--baseline-icon-limited-front--dark);
--baseline-icon-limited-back: var(--baseline-icon-limited-back--dark);
--baseline-icon-widely-front: var(--baseline-icon-widely-front--dark);
--baseline-icon-widely-back: var(--baseline-icon-widely-back--dark);
--baseline-icon-newly-front: var(--baseline-icon-newly-front--dark);
--baseline-icon-newly-back: var(--baseline-icon-newly-back--dark);
--baseline-icon-no_data: var(--baseline-icon-no_data--dark);
}
}

div {
background-repeat: no-repeat;
width: 36px;
height: 20px;
display: inline-block;
}

.support-limited {
background-image: var(--baseline-icon-limited);
}

.support-widely {
background-image: var(--baseline-icon-widely);
}

.support-newly {
background-image: var(--baseline-icon-newly);
}

.support-no_data {
background-image: var(--baseline-icon-no_data);
@supports (--color: light-dark(var(--a), var(--b))) {
.baseline-icon {
--baseline-icon-limited-front: light-dark(
var(--baseline-icon-limited-front--light),
var(--baseline-icon-limited-front--dark)
);
--baseline-icon-limited-back: light-dark(
var(--baseline-icon-limited-back--light),
var(--baseline-icon-limited-back--dark)
);
--baseline-icon-widely-front: light-dark(
var(--baseline-icon-widely-front--light),
var(--baseline-icon-widely-front--dark)
);
--baseline-icon-widely-back: light-dark(
var(--baseline-icon-widely-back--light),
var(--baseline-icon-widely-back--dark)
);
--baseline-icon-newly-front: light-dark(
var(--baseline-icon-newly-front--light),
var(--baseline-icon-newly-front--dark)
);
--baseline-icon-newly-back: light-dark(
var(--baseline-icon-newly-back--light),
var(--baseline-icon-newly-back--dark)
);
--baseline-icon-no_data: light-dark(
var(--baseline-icon-no_data--light),
var(--baseline-icon-no_data--dark)
);
}
}
</style>

0 comments on commit e6ef371

Please sign in to comment.