mirror of
https://github.com/discourse/discourse.git
synced 2024-12-21 15:53:45 +08:00
87 lines
2.9 KiB
Plaintext
87 lines
2.9 KiB
Plaintext
|
import Component from "@glimmer/component";
|
||
|
import { htmlSafe } from "@ember/template";
|
||
|
|
||
|
export default class ThemesGridPlaceholder extends Component {
|
||
|
get themeColors() {
|
||
|
if (this.args.theme.color_scheme) {
|
||
|
return {
|
||
|
primary: `#${this.args.theme.color_scheme.colors[0].hex}`,
|
||
|
secondary: `#${this.args.theme.color_scheme.colors[1].hex}`,
|
||
|
tertiary: `#${this.args.theme.color_scheme.colors[2].hex}`,
|
||
|
quaternary: `#${this.args.theme.color_scheme.colors[3].hex}`,
|
||
|
highlight: `#${this.args.theme.color_scheme.colors[6].hex}`,
|
||
|
danger: `#${this.args.theme.color_scheme.colors[7].hex}`,
|
||
|
success: `#${this.args.theme.color_scheme.colors[8].hex}`,
|
||
|
love: `#${this.args.theme.color_scheme.colors[9].hex}`,
|
||
|
};
|
||
|
} else {
|
||
|
return {
|
||
|
primary: "var(--primary)",
|
||
|
secondary: "var(--secondary)",
|
||
|
tertiary: "var(--tertiary)",
|
||
|
quaternary: "var(--quaternary)",
|
||
|
highlight: "var(--highlight)",
|
||
|
danger: "var(--danger)",
|
||
|
success: "var(--success)",
|
||
|
love: "var(--love)",
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
<template>
|
||
|
<svg viewBox="0 0 636 347" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
<rect
|
||
|
width="635.115"
|
||
|
height="347"
|
||
|
fill={{htmlSafe this.themeColors.secondary}}
|
||
|
/>
|
||
|
<path
|
||
|
d="M54.9766 79.1039C55.9198 76.0065 59.8623 75.0916 62.0732 77.4571L121.448 140.986C123.659 143.351 122.48 147.223 119.326 147.955L34.621 167.611C31.467 168.343 28.7034 165.386 29.6466 162.288L54.9766 79.1039Z"
|
||
|
fill={{htmlSafe this.themeColors.primary}}
|
||
|
/>
|
||
|
<path
|
||
|
d="M398.487 211.02C400.651 208.611 404.611 209.448 405.615 212.527L432.579 295.196C433.584 298.274 430.879 301.285 427.711 300.615L342.635 282.633C339.467 281.963 338.212 278.115 340.376 275.707L398.487 211.02Z"
|
||
|
fill={{htmlSafe this.themeColors.tertiary}}
|
||
|
/>
|
||
|
<circle cx="109.357" cy="262.879" r="44.1636" fill="#D1F0FF" />
|
||
|
<circle cx="365.927" cy="103.048" r="44.1636" fill="#E45735" />
|
||
|
<rect
|
||
|
x="166.139"
|
||
|
y="68.751"
|
||
|
width="81.9226"
|
||
|
height="81.9226"
|
||
|
rx="4.20606"
|
||
|
transform="rotate(-15.9297 166.139 68.751)"
|
||
|
fill={{htmlSafe this.themeColors.danger}}
|
||
|
/>
|
||
|
<rect
|
||
|
x="500.521"
|
||
|
y="100.296"
|
||
|
width="81.9226"
|
||
|
height="81.9226"
|
||
|
rx="4.20606"
|
||
|
transform="rotate(-15.9297 500.521 100.296)"
|
||
|
fill={{htmlSafe this.themeColors.success}}
|
||
|
/>
|
||
|
<rect
|
||
|
x="481.857"
|
||
|
y="222.921"
|
||
|
width="121.976"
|
||
|
height="54.6788"
|
||
|
rx="4.20606"
|
||
|
transform="rotate(9.12857 481.857 222.921)"
|
||
|
fill={{htmlSafe this.themeColors.love}}
|
||
|
/>
|
||
|
<rect
|
||
|
x="176.654"
|
||
|
y="240.608"
|
||
|
width="121.976"
|
||
|
height="54.6788"
|
||
|
rx="4.20606"
|
||
|
transform="rotate(-22.7296 176.654 240.608)"
|
||
|
fill={{htmlSafe this.themeColors.primary}}
|
||
|
/>
|
||
|
</svg>
|
||
|
</template>
|
||
|
}
|