Remove arc colors (#17)

This commit is contained in:
Carter McBride 2024-08-05 14:28:59 -06:00 committed by GitHub
parent ab7d7144a0
commit 93326d6483
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 33 deletions

View file

@ -98,8 +98,8 @@
</script>
</head>
<body class="font-system bg-arc-background text-base m-4">
<header class="text-2xl text-arc-title">
<body class="font-system text-base m-4">
<header class="text-2xl">
<h1>📰 Carter's RSS Feeds</h1>
</header>
<main class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] mt-2">
@ -110,20 +110,20 @@
{% for feed in feeds %}
<details class="group">
<summary
class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 group-has-[.has-recent]:border-arc-title hover:bg-arc-hover flex flex-row items-center">
class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 flex flex-row items-center">
{% if feed.hasRecent %}
<div class="text-xl mr-2" aria-label="Feed has recent items">✳︎</div>
{% endif %}
<div class="w-full">
<div>{{ feed.title }}</div>
<div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden"
title="{{feed.feed}}">({{ feed.feed }})</div>
<div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden" title="{{feed.feed}}">({{
feed.feed }})</div>
</div>
</summary>
<ul class=" overflow-y-auto list-none ml-6">
{% for item in feed.items %}
<li
class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors hover:bg-arc-hover">
class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors">
{% if item.isRecent %}
<div class="text-xl mr-2" aria-label="Item is recent">✳︎</div>
{% endif %}

View file

@ -209,41 +209,15 @@ export default {
"'Noto Color Emoji'",
],
},
colors: {
/*
* The Arc browser (can) expose its theme color to the pages beneath as
* CSS custom properties.
*/
arc: {
"background-simple": "var(--arc-background-simple-color, #FDF8EBFF)",
maxContrast: "var(--arc-palette-maxContrastColor, #6F540AFF)",
minContrast: "var(--arc-palette-minContrastColor, #FDF8EBFF)",
hover: "var(--arc-palette-hover, #E2DDCAFF)",
foregroundPrimary: "var(--arc-palette-foregroundPrimary, #EBB218FF)",
foregroundSecondary:
"var(--arc-palette-foregroundSecondary, #EBB218FF)",
foregroundTertiary:
"var(--arc-palette-foregroundTertiary, #FDF8EBFF)",
title: "var(--arc-palette-title, #211900FF)",
subtitle: "var(--arc-palette-subtitle, #C5BB96FF)",
background: "var(--arc-palette-background, #F1EEE5FF)",
backgroundExtra: "var(--arc-palette-backgroundExtra, #FEFDFCFF)",
cutout: "var(--arc-palette-cutoutColor, #FDF8EBFF)",
focus: "var(--arc-palette-focus, #B7A97CFF)",
},
},
},
},
plugins: [
plugin(({ addBase, theme }) => {
plugin(({ addBase }) => {
addBase({
a: {
textDecoration: "underline",
transition: "color 0.2s",
cursor: "pointer",
"&:hover": {
color: theme("colors.arc.subtitle"),
},
},
});
}),