From d8611cf1d349c4b7483183789abfa058ca476a4f Mon Sep 17 00:00:00 2001
From: Alexander Heimbuch <github@heimbu.ch>
Date: Tue, 28 Nov 2023 14:46:16 +0100
Subject: [PATCH 1/2] dev bump

---
 apps/player/cypress/e2e/app/root.cy.ts        |  5 -
 apps/player/cypress/e2e/app/show-title.cy.ts  |  1 -
 .../cypress/e2e/app/subscribe-button.cy.ts    |  1 -
 .../episode-subtitle/EpisodeSubtitle.vue      |  7 +-
 .../components/episode-title/EpisodeTitle.vue |  7 +-
 apps/player/src/components/error/Error.vue    |  6 +-
 apps/player/src/components/root/Root.vue      | 16 ++--
 .../src/components/show-title/ShowTitle.vue   |  8 +-
 .../subscribe-button/SubscribeButton.vue      |  8 +-
 .../components/tab-files/components/File.vue  | 14 +--
 .../components/tab-share/components/Embed.vue |  4 -
 .../src/components/tab-title/TabTitle.vue     |  3 +-
 .../tab-transcripts/components/Entry.vue      | 18 +---
 .../tab-transcripts/components/Prerender.vue  | 12 +--
 apps/player/src/store/selectors/theme.ts      | 15 +--
 .../src/components/client-list/ClientList.vue |  7 +-
 .../src/components/finish-card/FinishCard.vue |  4 +-
 .../src/components/root/Root.vue              | 22 +----
 apps/subscribe-button/src/embed/config.ts     | 18 ----
 apps/subscribe-button/src/embed/embed.js      | 26 -----
 apps/subscribe-button/src/embed/overlay.ts    | 33 -------
 apps/subscribe-button/src/embed/sandbox.js    | 22 -----
 apps/subscribe-button/src/screens/Clients.vue | 19 ++--
 apps/subscribe-button/src/screens/Finish.vue  | 17 ++--
 apps/subscribe-button/src/store/selectors.ts  | 14 +--
 packages/button/state/src/theme.ts            | 85 +----------------
 .../components/src/components/font/Font.vue   | 59 ------------
 .../components/src/components/font/index.ts   |  2 -
 packages/components/src/components/main.ts    |  2 -
 packages/player/config/src/index.ts           |  9 +-
 packages/player/state/src/theme.test.ts       | 38 --------
 packages/player/state/src/theme.ts            | 94 +------------------
 packages/types/src/theme.ts                   | 12 ---
 33 files changed, 63 insertions(+), 545 deletions(-)
 delete mode 100644 apps/subscribe-button/src/embed/config.ts
 delete mode 100644 apps/subscribe-button/src/embed/embed.js
 delete mode 100644 apps/subscribe-button/src/embed/overlay.ts
 delete mode 100644 apps/subscribe-button/src/embed/sandbox.js
 delete mode 100644 packages/components/src/components/font/Font.vue
 delete mode 100644 packages/components/src/components/font/index.ts

diff --git a/apps/player/cypress/e2e/app/root.cy.ts b/apps/player/cypress/e2e/app/root.cy.ts
index 0eba1c76e..194c84dfe 100644
--- a/apps/player/cypress/e2e/app/root.cy.ts
+++ b/apps/player/cypress/e2e/app/root.cy.ts
@@ -20,11 +20,6 @@ describe('<root>', () => {
     it('should set the correct background color', () => {
       cy.query('root').should('have.css', 'background-color', 'rgb(233, 241, 245)');
     });
-
-    it('should set the correct font', () => {
-      cy.query('root').should('have.css', 'font-family', 'regularFont');
-      cy.query('root').should('have.css', 'font-weight', '300');
-    });
   });
 
   describe('slot', () => {
diff --git a/apps/player/cypress/e2e/app/show-title.cy.ts b/apps/player/cypress/e2e/app/show-title.cy.ts
index 3692d94c4..027966d32 100644
--- a/apps/player/cypress/e2e/app/show-title.cy.ts
+++ b/apps/player/cypress/e2e/app/show-title.cy.ts
@@ -16,7 +16,6 @@ describe('<show-title>', () => {
         })}"></show-title>`,
         [show, { version: 5, theme }]
       );
-      cy.query('show-title').should('have.css', 'font-family', 'boldFont');
       cy.query('show-title').should('have.css', 'color', 'rgb(0, 0, 0)');
     });
   });
diff --git a/apps/player/cypress/e2e/app/subscribe-button.cy.ts b/apps/player/cypress/e2e/app/subscribe-button.cy.ts
index a41410a66..f72132161 100644
--- a/apps/player/cypress/e2e/app/subscribe-button.cy.ts
+++ b/apps/player/cypress/e2e/app/subscribe-button.cy.ts
@@ -28,7 +28,6 @@ describe('<subscribe-button>', () => {
       cy.query('subscribe-button').should('have.css', 'color', 'rgb(0, 128, 0)');
       cy.query('subscribe-button').should('have.css', 'border-color', 'rgb(255, 255, 0)');
       cy.query('subscribe-button').should('have.css', 'background-color', 'rgb(0, 0, 255)');
-      cy.query('subscribe-button').should('have.css', 'font-family', 'boldFont');
     });
   });
 
diff --git a/apps/player/src/components/episode-subtitle/EpisodeSubtitle.vue b/apps/player/src/components/episode-subtitle/EpisodeSubtitle.vue
index a8f951dc8..92be0fe2f 100644
--- a/apps/player/src/components/episode-subtitle/EpisodeSubtitle.vue
+++ b/apps/player/src/components/episode-subtitle/EpisodeSubtitle.vue
@@ -1,22 +1,17 @@
 <template>
-  <div class="podlove-player--episode-subtitle block overflow-hidden" :style="style" data-test="episode-subtitle">
+  <div class="podlove-player--episode-subtitle block overflow-hidden" data-test="episode-subtitle">
     {{ state.subtitle }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontRegular,
   subtitle: select.episode.subtitle
 });
 
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>
diff --git a/apps/player/src/components/episode-title/EpisodeTitle.vue b/apps/player/src/components/episode-title/EpisodeTitle.vue
index 7bd0a964c..5758fd9f3 100644
--- a/apps/player/src/components/episode-title/EpisodeTitle.vue
+++ b/apps/player/src/components/episode-title/EpisodeTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 :style="style" data-test="episode-title">
+  <h1 class="font-bold" data-test="episode-title">
     <a
       v-if="state.link"
       class="podlove-player--episode-title block overflow-hidden"
@@ -16,20 +16,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontBold,
   title: select.episode.title,
   link: select.episode.link,
   target: select.target
 });
 
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>
diff --git a/apps/player/src/components/error/Error.vue b/apps/player/src/components/error/Error.vue
index c8d24cb1a..06c27026d 100644
--- a/apps/player/src/components/error/Error.vue
+++ b/apps/player/src/components/error/Error.vue
@@ -8,8 +8,7 @@
     <div class="p-6 text-center">
       <h3
         v-if="state.title"
-        class="podlove-player--error--title text-2xl mb-5"
-        :style="{ font: state.headline }"
+        class="podlove-player--error--title text-2xl mb-5 font-bold"
         data-test="error--title"
       >
         {{ t(state.title) }}
@@ -46,8 +45,7 @@ const state = mapState({
   active: select.error.active,
   title: select.error.title,
   message: select.error.message,
-  retry: select.error.retry,
-  headline: select.theme.fontBold
+  retry: select.error.retry
 });
 
 const dispatch = injectStore().dispatch;
diff --git a/apps/player/src/components/root/Root.vue b/apps/player/src/components/root/Root.vue
index d068b120f..34ad9b896 100644
--- a/apps/player/src/components/root/Root.vue
+++ b/apps/player/src/components/root/Root.vue
@@ -1,19 +1,12 @@
 <template>
   <div class="podlove-player antialiased text-base" :style="{ ...theme.font }" data-test="root" source="">
     <slot />
-    <font
-      v-for="(font, index) in theme.fonts"
-      :key="index"
-      :src="font.src"
-      :name="font.name"
-      :weight="font.weight"
-    />
+
   </div>
 </template>
 
 <script lang="ts" setup>
 import { mapState } from 'redux-vuex';
-import { Font } from '@podlove/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { fade, lighten } from 'farbraum';
@@ -23,8 +16,6 @@ import select from '../../store/selectors/index.js';
 const { locale } = useI18n({ useScope: 'global' });
 
 const theme = mapState({
-  font: select.theme.fontRegular,
-  fonts: select.theme.fonts,
   language: select.language,
   brand: select.theme.brand,
   brandLightest: select.theme.brandLightest,
@@ -162,10 +153,15 @@ const transcriptsEntryBackgroundActive = computed(() => fade(theme.alt, 0.8));
   --podlove-player--subscribe-button--color: v-bind('theme.brandDark');
   --podlove-player--subscribe-button--border-color: v-bind('theme.brandDark');
   --podlove-player--subscribe-button--background: v-bind('theme.alt');
+
+  --podlove-player--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --podlove-player--font-weight: 300;
 }
 
 .podlove-player {
   background: var(--podlove-player--background);
+  font-family: var(--podlove-player--font);
+  font-weight: var(--podlove-player--font-weight);
 }
 
 .entry-enter-active,
diff --git a/apps/player/src/components/show-title/ShowTitle.vue b/apps/player/src/components/show-title/ShowTitle.vue
index 7a03436f1..a29eecf85 100644
--- a/apps/player/src/components/show-title/ShowTitle.vue
+++ b/apps/player/src/components/show-title/ShowTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="podlove-player--show-title" :style="style" data-test="show-title">
+  <h1 class="podlove-player--show-title font-bold" data-test="show-title">
     <a v-if="state.link" :href="state.link" :target="state.target" data-test="show-title--link">{{
       state.title
     }}</a>
@@ -8,20 +8,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { mapState } from 'redux-vuex';
 import select from '../../store/selectors/index.js';
 
 const state = mapState({
-  font: select.theme.fontBold,
   title: select.show.title,
   link: select.show.link,
   target: select.target
 });
-
-const style = computed(() => ({
-  ...state.font
-}));
 </script>
 
 <style lang="postcss" scoped>
diff --git a/apps/player/src/components/subscribe-button/SubscribeButton.vue b/apps/player/src/components/subscribe-button/SubscribeButton.vue
index e2c2994fc..06d005176 100644
--- a/apps/player/src/components/subscribe-button/SubscribeButton.vue
+++ b/apps/player/src/components/subscribe-button/SubscribeButton.vue
@@ -11,10 +11,10 @@
       rounded-sm
       border
       whitespace-nowrap
+      font-bold
     "
     data-test="subscribe-button"
     :aria-label="t(state.a11y.key, state.a11y.attr)"
-    :style="style"
     @click="show"
   >
     <plus-icon class="mr-1" />
@@ -23,7 +23,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
 import { PlusIcon } from '@podlove/components';
 import { mapState, injectStore } from 'redux-vuex';
 import { useI18n } from 'vue-i18n';
@@ -34,17 +33,12 @@ import select from '../../store/selectors/index.js';
 const { t } = useI18n();
 
 const state = mapState({
-  font: select.theme.fontBold,
   available: select.subscribeButton.available,
   a11y: select.accessibility.subscribeButton
 });
 
 const dispatch = injectStore().dispatch;
 
-const style = computed(() => ({
-  ...state.font
-}));
-
 const show = () => {
   dispatch(overlay.show());
 };
diff --git a/apps/player/src/components/tab-files/components/File.vue b/apps/player/src/components/tab-files/components/File.vue
index 332213157..59b82f7a5 100644
--- a/apps/player/src/components/tab-files/components/File.vue
+++ b/apps/player/src/components/tab-files/components/File.vue
@@ -4,7 +4,7 @@
     :href="file.url"
     data-test="tab-files--download"
     @mouseover="hover(file)"
-    @mouseout="hover()"
+    @mouseout="hover(file)"
     @click="click(file)"
   >
     <div class="flex h-10">
@@ -16,9 +16,9 @@
         <pdf-file-icon :filled="true" v-if="icon === 'pdf-file'" />
       </span>
       <div class="w-full">
-        <h3 :style="state.font">{{ file.title }}</h3>
+        <h3 class="font-bold">{{ file.title }}</h3>
         <div class="opacity-50 text-sm">
-          <span class="uppercase" :style="state.font">{{ type }}</span>
+          <span class="uppercase font-bold">{{ type }}</span>
           <span class="px-2">-</span>
           <span>{{ toMegabyte(file.size) }} MB</span>
         </div>
@@ -29,15 +29,13 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { mapState, injectStore } from 'redux-vuex';
+import { injectStore } from 'redux-vuex';
 import { compose, includes, defaultTo, toLower } from 'ramda';
 import { DownloadIcon, AudioFileIcon, VideoFileIcon, TextFileIcon, PdfFileIcon } from '@podlove/components';
 import { toMegabyte } from '@podlove/utils/math';
 import { hoverFile, selectFile } from '@podlove/player-actions/files';
 import { useI18n } from 'vue-i18n';
 
-import select from '../../../store/selectors/index.js';
-
 const { t } = useI18n();
 const isType = (type) => compose(includes(type), toLower, defaultTo(''));
 const audio = isType('audio');
@@ -58,10 +56,6 @@ const props = defineProps({
   }
 });
 
-const state = mapState({
-  font: select.theme.fontBold
-});
-
 const dispatch = injectStore().dispatch;
 
 const type = computed(() => {
diff --git a/apps/player/src/components/tab-share/components/Embed.vue b/apps/player/src/components/tab-share/components/Embed.vue
index ae35a8a6c..38e957404 100644
--- a/apps/player/src/components/tab-share/components/Embed.vue
+++ b/apps/player/src/components/tab-share/components/Embed.vue
@@ -43,9 +43,6 @@
             font-bold
           "
           :title="t(state.copyLabel.key, state.copyLabel.attr)"
-          :style="{
-            ...state.font
-          }"
         >
           <span aria-hidden="true">{{ t('SHARE.ACTIONS.COPY') }}</span>
         </button>
@@ -67,7 +64,6 @@ const { t } = useI18n();
 const state = mapState({
   embedSize: select.share.embedSize,
   embedCode: select.share.code,
-  font: select.theme.fontBold,
   inputLabel: select.accessibility.embedCode,
   copyLabel: select.accessibility.copyEmbedLink
 });
diff --git a/apps/player/src/components/tab-title/TabTitle.vue b/apps/player/src/components/tab-title/TabTitle.vue
index a424d3d2b..b91811a6e 100644
--- a/apps/player/src/components/tab-title/TabTitle.vue
+++ b/apps/player/src/components/tab-title/TabTitle.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-6" data-test="tab-title">
     <div class="flex justify-between">
-      <h1 class="text-xl mb-4" :style="state.font">
+      <h1 class="text-xl mb-4 font-extrabold">
         <slot />
       </h1>
       <button
@@ -35,7 +35,6 @@ const props = defineProps({
 });
 
 const state = mapState({
-  font: select.theme.fontCi,
   title: select.accessibility.closeTab(props.tab)
 });
 
diff --git a/apps/player/src/components/tab-transcripts/components/Entry.vue b/apps/player/src/components/tab-transcripts/components/Entry.vue
index e84eb5cad..c0a6b8d4e 100644
--- a/apps/player/src/components/tab-transcripts/components/Entry.vue
+++ b/apps/player/src/components/tab-transcripts/components/Entry.vue
@@ -1,8 +1,6 @@
 <template><render /></template>
 
 <script lang="ts" setup>
-import { mapState } from 'redux-vuex';
-
 import { computed, h } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
@@ -10,8 +8,6 @@ import {
   PodloveWebPlayerTimelineChapterEntry
 } from '@podlove/types';
 
-import select from '../../../store/selectors/index.js';
-
 const { t } = useI18n();
 
 const container = (children = []) =>
@@ -30,8 +26,7 @@ const chapter = (children = []) =>
   h(
     'div',
     {
-      class: { 'text-lg': true, 'podlove-player--transcript-entry--chapter': true },
-      style: chapterStyle.value,
+      class: { 'text-lg': true, 'podlove-player--transcript-entry--chapter': true, 'font-extrabold': true },
       ...(props.prerender
         ? {}
         : {
@@ -45,8 +40,7 @@ const speaker = () =>
   h(
     'div',
     {
-      class: { '-ml-6': true, 'podlove-player--transcript-entry--speaker': true },
-      style: speakerStyle.value
+      class: { '-ml-6': true, 'podlove-player--transcript-entry--speaker': true, 'font-bold': true }
     },
     [
       props.entry.speaker.avatar
@@ -136,11 +130,6 @@ const props = defineProps<{
   searchResults: number[];
 }>();
 
-const state = mapState({
-  fontCi: select.theme.fontCi,
-  fontBold: select.theme.fontBold
-});
-
 const query = computed(() => {
   if (!props.searchQuery || props.searchResults.length === 0) {
     return null;
@@ -149,9 +138,6 @@ const query = computed(() => {
   return new RegExp(props.searchQuery, 'ig');
 });
 
-const chapterStyle = computed(() => state.fontCi);
-const speakerStyle = computed(() => state.fontBold);
-
 // Event Bindings
 const onClick = (entry) => {
   emit('onClick', entry);
diff --git a/apps/player/src/components/tab-transcripts/components/Prerender.vue b/apps/player/src/components/tab-transcripts/components/Prerender.vue
index 49854425e..5f363ad56 100644
--- a/apps/player/src/components/tab-transcripts/components/Prerender.vue
+++ b/apps/player/src/components/tab-transcripts/components/Prerender.vue
@@ -10,15 +10,13 @@
       :ghost-active="state.ghostActive"
       :ghost-time="state.ghostTime"
       :search-results="state.searchResults"
-      :chapter-style="chapterStyle"
-      :speaker-style="speakerStyle"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { mapState } from 'redux-vuex';
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { asyncAnimation } from '@podlove/utils/helper';
 
 import select from '../../../store/selectors/index.js';
@@ -41,15 +39,9 @@ const state = mapState({
   ghostActive: select.ghost.active,
   ghostTime: select.ghost.time,
   searchResults: select.transcripts.searchResults,
-  searchQuery: select.transcripts.searchQuery,
-  fontCi: select.theme.fontCi,
-  fontBold: select.theme.fontBold
+  searchQuery: select.transcripts.searchQuery
 });
 
-const chapterStyle = computed(() => state.fontCi);
-
-const speakerStyle = computed(() => state.fontBold);
-
 onMounted(() => {
   nextTick()
     .then(() =>
diff --git a/apps/player/src/store/selectors/theme.ts b/apps/player/src/store/selectors/theme.ts
index 760217ff0..78a82a764 100644
--- a/apps/player/src/store/selectors/theme.ts
+++ b/apps/player/src/store/selectors/theme.ts
@@ -1,21 +1,8 @@
-import { createSelector } from 'reselect';
 import { scope } from '@podlove/utils/helper';
-import { PodloveThemeFont } from '@podlove/types';
 import { selectors as theme } from '@podlove/player-state/theme';
 import root from './root.js';
 
-const fontStyle = (input: PodloveThemeFont) => ({
-  'font-family': (input.family || []).map((font) => `${font}`).join(', '),
-  'font-weight': input.weight
-});
 
 export default {
-  ...scope(theme, root.theme),
-  fonts: createSelector(
-    root.theme,
-    (state) => [theme.fontRegular(state), theme.fontBold(state), theme.fontCi(state)]
-  ),
-  fontRegular: createSelector(root.theme, createSelector(theme.fontRegular, fontStyle)),
-  fontBold: createSelector(root.theme, createSelector(theme.fontBold, fontStyle)),
-  fontCi: createSelector(root.theme, createSelector(theme.fontCi, fontStyle))
+  ...scope(theme, root.theme)
 };
diff --git a/apps/subscribe-button/src/components/client-list/ClientList.vue b/apps/subscribe-button/src/components/client-list/ClientList.vue
index 35cfd2bf1..de8b79b27 100644
--- a/apps/subscribe-button/src/components/client-list/ClientList.vue
+++ b/apps/subscribe-button/src/components/client-list/ClientList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="flex mobile:flex-col tablet:flex-row flex-wrap w-full">
+  <ul class="podlove-subscribe-button--client-list flex mobile:flex-col tablet:flex-row flex-wrap w-full">
     <li
       v-for="(entry, index) in state.clients"
       :key="index"
@@ -7,7 +7,7 @@
       :aria-label="t('A11Y.CLIENT', entry)"
     >
       <a
-        class="flex items-center w-full p-2 hover:bg-gray-200 rounded-sm cursor-pointer"
+        class="flex items-center w-full p-2 hover:bg-gray-200 rounded-sm cursor-pointer font-bold"
         rel="noopener"
         target="_blank"
         :style="state.font"
@@ -36,8 +36,7 @@ const { t } = useI18n();
 const emit = defineEmits(['clientSelect']);
 
 const state = mapState({
-  clients: select.clients,
-  font: select.theme.fontBold
+  clients: select.clients
 });
 
 const onClick = (client: PodloveSubscribeButtonClient) => {
diff --git a/apps/subscribe-button/src/components/finish-card/FinishCard.vue b/apps/subscribe-button/src/components/finish-card/FinishCard.vue
index 0da62821d..0ff155be7 100644
--- a/apps/subscribe-button/src/components/finish-card/FinishCard.vue
+++ b/apps/subscribe-button/src/components/finish-card/FinishCard.vue
@@ -46,8 +46,7 @@
     >
       <button
         :title="t('A11Y.COPY_FEED')"
-        class="podlove-subscribe-button--finish-card--tooltip-button py-2 px-4 rounded-sm text-sm"
-        :style="{ ...state.font }"
+        class="podlove-subscribe-button--finish-card--tooltip-button py-2 px-4 rounded-sm text-sm font-bold"
       >
         {{ t('FINISH_SCREEN.COPY_URL') }}
       </button>
@@ -72,7 +71,6 @@ const state = mapState({
   install: select.finish.install,
   os: select.finish.os,
   rss: select.finish.rss,
-  font: select.theme.fontBold,
   feed: select.feed
 });
 
diff --git a/apps/subscribe-button/src/components/root/Root.vue b/apps/subscribe-button/src/components/root/Root.vue
index e4e5b51a4..a519c1e06 100644
--- a/apps/subscribe-button/src/components/root/Root.vue
+++ b/apps/subscribe-button/src/components/root/Root.vue
@@ -1,35 +1,21 @@
 <template>
-  <div class="podlove-subscribe-button antialiased" :style="state.font">
+  <div class="podlove-subscribe-button antialiased">
     <slot></slot>
-
-    <font
-      v-for="(font, index) in state.fonts"
-      :key="index"
-      :src="font.src"
-      :name="font.name"
-      :weight="font.weight"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Font } from '@podlove/components';
 import { mapState } from 'redux-vuex';
 import * as select from '../../store/selectors.js';
 
-const state = mapState({
-  font: select.theme.fontRegular,
-  fonts: select.theme.fonts,
-
-});
-
 const theme = mapState({
   brand: select.theme.brand,
   brandLightest: select.theme.brandLightest,
   brandDarkest: select.theme.brandDarkest,
   brandDark: select.theme.brandDark,
   contrast: select.theme.contrast,
-  alt: select.theme.alt
+  alt: select.theme.alt,
+  shadeBase: select.theme.shadeBase,
 })
 </script>
 
@@ -39,5 +25,7 @@ const theme = mapState({
   --podlove-subscribe-button--finish-card--tooltip--background: v-bind('theme.brand');
   --podlove-subscribe-button--finish-card--tooltip-button--color: v-bind('theme.alt');
   --podlove-subscribe-button--finish-card--tooltip-button--background: v-bind('theme.brand');
+
+  --podlove-subscribe-button--divider--color: v-bind('theme.shadeBase')
 }
 </style>
diff --git a/apps/subscribe-button/src/embed/config.ts b/apps/subscribe-button/src/embed/config.ts
deleted file mode 100644
index 74fe1fd5c..000000000
--- a/apps/subscribe-button/src/embed/config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { mergeDeepRight } from 'ramda';
-import { json } from '@podlove/utils/request';
-import type { PodloveSubscribeButtonConfig } from '@podlove/types';
-
-export default async (
-  input: Partial<PodloveSubscribeButtonConfig> = {},
-  additional: Partial<PodloveSubscribeButtonConfig> = {}
-): Promise<PodloveSubscribeButtonConfig> => {
-  let config;
-
-  try {
-    config = typeof input === 'string' ? await json(input) : input;
-  } catch (err) {
-    throw new Error(`Couldn't parse configuration "${input}"`);
-  }
-
-  return mergeDeepRight(config, additional) as PodloveSubscribeButtonConfig;
-};
diff --git a/apps/subscribe-button/src/embed/embed.js b/apps/subscribe-button/src/embed/embed.js
deleted file mode 100644
index 6f2b02ad3..000000000
--- a/apps/subscribe-button/src/embed/embed.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import url from 'button?url'
-
-export default function embedDom({ base }) {
-  return `<div>
-    <script type="text/javascript">
-      window.resourceBaseUrl = '${base}';
-    </script>
-
-    <div id="subscribe-button">
-      <subscribe-button></subscribe-button>
-    </div>
-
-    <script type="module">
-      import createButton from '${url}'
-      const { app } = createButton()
-
-      app.mount('#subscribe-button')
-    </script>
-
-    <style>
-      #subscribe-button {
-        display: inline-block;
-      }
-    </style>
-  </div>`
-}
diff --git a/apps/subscribe-button/src/embed/overlay.ts b/apps/subscribe-button/src/embed/overlay.ts
deleted file mode 100644
index 8af388362..000000000
--- a/apps/subscribe-button/src/embed/overlay.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Store } from 'redux'
-import { setStyles } from '@podlove/utils/dom'
-import * as select from '../store/selectors.js'
-import State from '../store/state.js'
-
-const visibleStyle = {
-  position: 'fixed',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-}
-
-const hiddenStyle = {
-  position: 'fixed',
-  width: '0',
-  height: '0',
-  top: 0,
-  left: 0
-}
-
-export default (store: Store<State>, entry: HTMLElement): void => {
-  setStyles(hiddenStyle, entry)
-
-  store.subscribe(() => {
-    const state = store.getState()
-    if (select.view.overlay(state)) {
-      setStyles(visibleStyle, entry)
-    } else {
-      setStyles(hiddenStyle, entry)
-    }
-  })
-}
diff --git a/apps/subscribe-button/src/embed/sandbox.js b/apps/subscribe-button/src/embed/sandbox.js
deleted file mode 100644
index 79cc94680..000000000
--- a/apps/subscribe-button/src/embed/sandbox.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { propOr } from 'ramda'
-import { sandbox } from '@podlove/utils/sandbox'
-import { setStyles } from '@podlove/utils/dom'
-
-import embedButtonDom from './embed'
-
-export default async (config, entry) => {
-  const reference =
-    import.meta.env.MODE === 'cdn'
-      ? import.meta.env.BASE
-      : propOr(import.meta.env.BASE, 'base', config)
-
-  const buttonDom = embedButtonDom({
-    version: import.meta.env.VERSION,
-    base: reference
-  })
-
-  const subscribeButton = await sandbox(entry, buttonDom, { fullWidth: true })
-  setStyles({ width: '100%', height: '100%' }, subscribeButton)
-
-  return subscribeButton
-}
diff --git a/apps/subscribe-button/src/screens/Clients.vue b/apps/subscribe-button/src/screens/Clients.vue
index bad8f90d2..537e16b7a 100644
--- a/apps/subscribe-button/src/screens/Clients.vue
+++ b/apps/subscribe-button/src/screens/Clients.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="
+      podlove-subscribe-button--clients
       m-6
       p-6
       mobile:p-4
@@ -14,35 +15,29 @@
     "
   >
     <div class="mb-6 mobile:mb-4 flex justify-between items-center">
-      <h1 class="tablet:text-2xl mobile:text-xl" :style="state.font">
+      <h1 class="tablet:text-2xl mobile:text-xl font-extrabold">
         {{ t('SUBSCRIBE') }}
       </h1>
       <button :title="t('A11Y.CLOSE')" @click="close">
         <close-icon />
       </button>
     </div>
-    <divider class="mb-6" :color="state.shadeBase"></divider>
+    <divider class="mb-6"></divider>
     <client-list @clientSelect="finish" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { injectStore, mapState } from 'redux-vuex';
+import { injectStore } from 'redux-vuex';
 import { Divider, CloseIcon } from '@podlove/components';
 import { useI18n } from 'vue-i18n';
 import * as overlay from '@podlove/button-actions/overlay';
 import * as finishCard from '@podlove/button-actions/finish-card';
 
 import ClientList from '../components/client-list/ClientList.vue';
-import * as select from '../store/selectors.js';
 
 const { t } = useI18n();
 
-const state = mapState({
-  font: select.theme.fontCi,
-  shadeBase: select.theme.shadeBase
-});
-
 const dispatch = injectStore().dispatch;
 
 const close = () => {
@@ -53,3 +48,9 @@ const finish = (client: finishCard.showPayload) => {
   dispatch(finishCard.show(client));
 };
 </script>
+
+<style lang="postcss" scoped>
+.podlove-subscribe-button--clients {
+  --podlove-component--divider--color: var(--podlove-subscribe-button--divider--color);
+}
+</style>
diff --git a/apps/subscribe-button/src/screens/Finish.vue b/apps/subscribe-button/src/screens/Finish.vue
index ee5f284e0..5ff6a2649 100644
--- a/apps/subscribe-button/src/screens/Finish.vue
+++ b/apps/subscribe-button/src/screens/Finish.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 mobile:p-4 mobile:text-xl max-w-xl w-full max-h-full bg-white text-gray-900">
+  <div class="podlove-subscribe-button--finish p-6 mobile:p-4 mobile:text-xl max-w-xl w-full max-h-full bg-white text-gray-900">
     <div class="mb-6 mobile:mb-4 flex justify-between items-center rounded-sm">
       <button class="text-xl flex items-center" :title="t('A11Y.BACK')" @click="back">
         <arrow-to-left-icon class="mr-2" />
@@ -9,13 +9,13 @@
         <close-icon />
       </button>
     </div>
-    <divider class="mb-6" :color="state.shadeBase"></divider>
+    <divider class="mb-6"></divider>
     <finish-card class="text-base" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { injectStore, mapState } from 'redux-vuex';
+import { injectStore } from 'redux-vuex';
 import { ArrowToLeftIcon, CloseIcon, Divider } from '@podlove/components';
 import { useI18n } from 'vue-i18n';
 
@@ -23,14 +23,9 @@ import * as overlay from '@podlove/button-actions/overlay';
 import * as list from '@podlove/button-actions/list';
 
 import FinishCard from '../components/finish-card/FinishCard.vue';
-import * as select from '../store/selectors.js';
 
 const { t } = useI18n();
 
-const state = mapState({
-  shadeBase: select.theme.shadeBase
-});
-
 const dispatch = injectStore().dispatch;
 
 const close = () => {
@@ -41,3 +36,9 @@ const back = () => {
   dispatch(list.show());
 };
 </script>
+
+<style lang="postcss" scoped>
+.podlove-subscribe-button--clients {
+  --podlove-component--divider--color: var(--podlove-subscribe-button--divider--color);
+}
+</style>
diff --git a/apps/subscribe-button/src/store/selectors.ts b/apps/subscribe-button/src/store/selectors.ts
index 05e111625..aad8ba07e 100644
--- a/apps/subscribe-button/src/store/selectors.ts
+++ b/apps/subscribe-button/src/store/selectors.ts
@@ -6,7 +6,6 @@ import { selectors as themeSelectors, type State as ThemeState } from '@podlove/
 import { selectors as finishSelectors, type State as FinishState } from '@podlove/button-state/finish';
 import { selectors as runtimeSelectors, type State as RuntimeState } from '@podlove/button-state/runtime';
 import { selectors as clientSelectors, type State as ClientsState } from '@podlove/button-state/clients';
-import type { PodloveThemeFont } from '@podlove/types';
 import { scope } from '@podlove/utils/helper';
 
 import State from './state.js';
@@ -21,21 +20,10 @@ const slices = {
   clients: propOr([], 'clients') as (input: State) => ClientsState,
 };
 
-const fontString = (font: PodloveThemeFont) => ({
-  'font-family': (font.family || []).map((font) => `"${font}"`).join(', '),
-  'font-weight': font.weight || 300
-});
+
 
 export const theme = {
   ...scope(themeSelectors, slices.theme),
-  fonts: createSelector(slices.theme, (state) => [
-    themeSelectors.fontRegular(state),
-    themeSelectors.fontBold(state),
-    themeSelectors.fontCi(state)
-  ]),
-  fontRegular: createSelector(slices.theme, createSelector(themeSelectors.fontRegular, fontString)),
-  fontBold: createSelector(slices.theme, createSelector(themeSelectors.fontBold, fontString)),
-  fontCi: createSelector(slices.theme, createSelector(themeSelectors.fontCi, fontString)),
 };
 
 export const view = scope(viewSelectors, slices.view);
diff --git a/packages/button/state/src/theme.ts b/packages/button/state/src/theme.ts
index 8f4eb48a4..105ce0abe 100644
--- a/packages/button/state/src/theme.ts
+++ b/packages/button/state/src/theme.ts
@@ -29,76 +29,6 @@ export const tokens = {
   alt: propOr(TOKENS.alt, 'alt')
 };
 
-export const FONTS: { [key: string]: PodloveThemeFont } = {
-  ci: {
-    name: 'ci',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 800
-  },
-  regular: {
-    name: 'regular',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 300
-  },
-  bold: {
-    name: 'bold',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 700
-  }
-};
-
-const normalizeFont = (type) =>
-  createObject({
-    family: propOr(path([type, 'family'], FONTS), 'family'),
-    weight: propOr(path([type, 'weight'], FONTS), 'weight'),
-    name: propOr(path([type, 'name'], FONTS), 'name'),
-    src: propOr([], 'src')
-  });
-
-const extractFonts = createObject({
-  regular: compose(
-    normalizeFont('regular'),
-    propOr(FONTS.regular, 'regular'),
-    propOr({}, 'fonts'),
-    theme
-  ),
-  bold: compose(normalizeFont('bold'), propOr(FONTS.bold, 'bold'), propOr({}, 'fonts'), theme),
-  ci: compose(normalizeFont('ci'), propOr(FONTS.ci, 'ci'), propOr({}, 'fonts'), theme)
-}) as (input: initPayload) => { [key: string]: PodloveThemeFont };
-
 const getTokens = propOr({}, 'tokens');
 
 const extractTokens = createObject({
@@ -113,27 +43,23 @@ const extractTokens = createObject({
 }) as (input: initPayload) => PodloveThemeTokens;
 
 export interface State {
-  tokens: PodloveThemeTokens;
-  fonts: { [key: string]: PodloveThemeFont };
+  tokens: PodloveThemeTokens
 }
 
 export const INITIAL_STATE: State = {
-  tokens: TOKENS,
-  fonts: FONTS
+  tokens: TOKENS
 };
 
 export const reducer = handleActions<State, initPayload>(
   {
     [init.toString()]: (_, { payload }: Action<initPayload>): State => ({
-      tokens: extractTokens(payload),
-      fonts: extractFonts(payload)
+      tokens: extractTokens(payload)
     })
   },
   INITIAL_STATE
 );
 
 const themeColors = propOr({}, 'tokens') as (input: State) => PodloveThemeTokens;
-const themeFonts = propOr({}, 'fonts') as (input: State) => { [key: string]: PodloveThemeFont };
 
 export const selectors = {
   brand: createSelector(themeColors, prop('brand')),
@@ -143,8 +69,5 @@ export const selectors = {
   shadeDark: createSelector(themeColors, prop('shadeDark')),
   shadeBase: createSelector(themeColors, prop('shadeBase')),
   contrast: createSelector(themeColors, prop('contrast')),
-  alt: createSelector(themeColors, prop('alt')),
-  fontRegular: createSelector(themeFonts, prop('regular') as (input: { [key: string]: PodloveThemeFont }) => PodloveThemeFont),
-  fontBold: createSelector(themeFonts, prop('bold') as (input: { [key: string]: PodloveThemeFont }) => PodloveThemeFont),
-  fontCi: createSelector(themeFonts, prop('ci') as (input: { [key: string]: PodloveThemeFont }) => PodloveThemeFont)
+  alt: createSelector(themeColors, prop('alt'))
 };
diff --git a/packages/components/src/components/font/Font.vue b/packages/components/src/components/font/Font.vue
deleted file mode 100644
index eac85492b..000000000
--- a/packages/components/src/components/font/Font.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-import { h } from 'vue'
-
-export default {
-  props: {
-    name: {
-      type: String,
-      default: null
-    },
-    src: {
-      type: Array<string>,
-      default: () => []
-    },
-    weight: {
-      type: Number,
-      default: null
-    }
-  },
-  computed: {
-    fontSrc() {
-      const eot = this.src.find((font) => font.endsWith('.eot'))
-      const woff = this.src.find((font) => font.endsWith('.woff'))
-      const woff2 = this.src.find((font) => font.endsWith('.woff2'))
-      const ttf = this.src.find((font) => font.endsWith('.ttf'))
-      const svg = this.src.find((font) => font.endsWith('.svg'))
-
-      return [
-        { format: 'embedded-opentype', url: eot },
-        { format: 'woff2', url: woff2 },
-        { format: 'woff', url: woff },
-        { format: 'truetype', url: ttf },
-        { format: 'svg', url: svg }
-      ]
-        .filter(({ url }) => !!url)
-        .map(({ format, url }) => `url("${url}") format("${format}")`)
-        .join(',')
-    }
-  },
-  render() {
-    if (this.src.length === 0) {
-      return ''
-    }
-
-    return h(
-      'style',
-      {},
-      `
-      @font-face {
-        font-family: ${this.name};
-        font-style: normal;
-        font-display: swap;
-        src: ${this.fontSrc};
-        font-weight: ${this.weight};
-      }
-    `
-    )
-  }
-}
-</script>
diff --git a/packages/components/src/components/font/index.ts b/packages/components/src/components/font/index.ts
deleted file mode 100644
index bf6bcb7cf..000000000
--- a/packages/components/src/components/font/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Font from './Font.vue'
-export default Font
diff --git a/packages/components/src/components/main.ts b/packages/components/src/components/main.ts
index 61f1e254b..397e7994e 100644
--- a/packages/components/src/components/main.ts
+++ b/packages/components/src/components/main.ts
@@ -26,7 +26,6 @@ import InputSelect from './input-select/index.js';
 import InputSlider from './input-slider/index.js';
 import InputCheckbox from './input-checkbox/index.js';
 import Divider from './divider/index.js';
-import Font from './font/index.js';
 
 import {
   PlayIcon,
@@ -118,7 +117,6 @@ export {
   InputSlider,
   InputCheckbox,
   Divider,
-  Font,
   PlayIcon,
   PlusIcon,
   PauseIcon,
diff --git a/packages/player/config/src/index.ts b/packages/player/config/src/index.ts
index c9941ae3b..fbb4ee73b 100644
--- a/packages/player/config/src/index.ts
+++ b/packages/player/config/src/index.ts
@@ -51,8 +51,7 @@ export const theme = (config: PodloveWebPlayerConfig): PodloveTheme => {
 
   if (version(config) === 5) {
     return {
-      tokens: propOr({}, 'tokens', theme),
-      fonts: propOr({}, 'fonts', theme)
+      tokens: propOr({}, 'tokens', theme)
     };
   }
 
@@ -62,14 +61,12 @@ export const theme = (config: PodloveWebPlayerConfig): PodloveTheme => {
     return {
       tokens: {
         brand
-      },
-      fonts: {}
+      }
     };
   }
 
   return {
-    tokens: {},
-    fonts: {}
+    tokens: {}
   };
 };
 
diff --git a/packages/player/state/src/theme.test.ts b/packages/player/state/src/theme.test.ts
index 5f2ce1c91..8f93e5277 100644
--- a/packages/player/state/src/theme.test.ts
+++ b/packages/player/state/src/theme.test.ts
@@ -14,27 +14,6 @@ const tokens = {
   alt: '#fff'
 }
 
-const fonts = {
-  ci: {
-    name: 'CiFont',
-    family: ['CiFont'],
-    weight: 800,
-    src: ['./ci/font/src']
-  },
-  regular: {
-    name: 'RegularFont',
-    family: ['RegularFont'],
-    weight: 300,
-    src: ['./regular/font/src']
-  },
-  bold: {
-    name: 'BoldFont',
-    family: ['BoldFont'],
-    weight: 700,
-    src: ['./bold/font/src']
-  }
-}
-
 describe('theme', () => {
   test(`theme: is a reducer function`, () => {
     expect(typeof theme).toBe('function')
@@ -43,23 +22,6 @@ describe('theme', () => {
   const actions = [CONSTRUCTED, SET_THEME]
 
   actions.forEach((type) => {
-    test(`theme: it sets the fonts on ${type}`, () => {
-      const result = theme(INITIAL_STATE, {
-        type,
-        payload: {
-          version: 5,
-          theme: {
-            fonts
-          }
-        } as unknown as PodloveWebPlayerEpisode
-      })
-
-      expect(result).toEqual({
-        ...INITIAL_STATE,
-        fonts
-      })
-    })
-
     test(`theme: it sets the tokens on ${type}`, () => {
       const result = theme(INITIAL_STATE, {
         type,
diff --git a/packages/player/state/src/theme.ts b/packages/player/state/src/theme.ts
index 96fdcaf5a..5df317192 100644
--- a/packages/player/state/src/theme.ts
+++ b/packages/player/state/src/theme.ts
@@ -1,10 +1,9 @@
-import { compose, propOr, path, prop } from 'ramda';
+import { compose, propOr, prop } from 'ramda';
 import { Action, handleActions } from 'redux-actions';
 import { createObject } from '@podlove/utils/helper';
 import {
   PodloveTheme,
   PodloveThemeTokens,
-  PodloveThemeFont,
   PodloveWebPlayerEpisode
 } from '@podlove/types';
 
@@ -47,80 +46,6 @@ export const tokens = {
   alt: propOr(TOKENS.alt, 'alt') as (input: PodloveThemeTokens) => string
 };
 
-export const FONTS: { [key: string]: PodloveThemeFont } = {
-  ci: {
-    name: 'ci',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 800
-  },
-  regular: {
-    name: 'regular',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 300
-  },
-  bold: {
-    name: 'bold',
-    family: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica',
-      'Arial',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji", "Segoe UI Symbol'
-    ],
-    src: [],
-    weight: 700
-  }
-};
-
-const normalizeFont = (type: string) =>
-  createObject({
-    family: propOr(path([type, 'family'], FONTS), 'family'),
-    weight: propOr(path([type, 'weight'], FONTS), 'weight'),
-    name: propOr(path([type, 'name'], FONTS), 'name'),
-    src: propOr([], 'src')
-  }) as (input: PodloveThemeFont) => PodloveThemeFont;
-
-const extractFonts = createObject({
-  regular: compose(
-    normalizeFont('regular'),
-    propOr(FONTS.regular, 'regular'),
-    propOr({}, 'fonts'),
-    theme
-  ),
-  bold: compose(normalizeFont('bold'), propOr(FONTS.bold, 'bold'), propOr({}, 'fonts'), theme),
-  ci: compose(normalizeFont('ci'), propOr(FONTS.ci, 'ci'), propOr({}, 'fonts'), theme)
-}) as (input: PodloveWebPlayerEpisode) => {
-  regular: PodloveThemeFont;
-  bold: PodloveThemeFont;
-  ci: PodloveThemeFont;
-};
-
 const getTokens = propOr({}, 'tokens');
 
 const extractTokens = createObject({
@@ -135,28 +60,22 @@ const extractTokens = createObject({
 }) as (input: PodloveWebPlayerEpisode) => PodloveThemeTokens;
 
 export const INITIAL_STATE: State = {
-  tokens: TOKENS,
-  fonts: FONTS
+  tokens: TOKENS
 };
 
 export const reducer = handleActions<State, constructedPayload | setThemePayload>(
   {
     [constructed.toString()]: (_, { payload }: Action<constructedPayload>) => ({
-      tokens: extractTokens(payload),
-      fonts: extractFonts(payload)
+      tokens: extractTokens(payload)
     }),
     [setTheme.toString()]: (_, { payload }: Action<setThemePayload>) => ({
-      tokens: extractTokens(payload),
-      fonts: extractFonts(payload)
+      tokens: extractTokens(payload)
     })
   },
   INITIAL_STATE
 );
 
 const themeColors = propOr({}, 'tokens') as (input: State) => PodloveThemeTokens;
-const themeFonts = propOr({}, 'fonts') as (input: State) => {
-  [key: string]: PodloveThemeFont;
-};
 
 export const selectors = {
   brand: compose(prop('brand'), themeColors) as (input: State) => string,
@@ -166,8 +85,5 @@ export const selectors = {
   shadeDark: compose(prop('shadeDark'), themeColors) as (input: State) => string,
   shadeBase: compose(prop('shadeBase'), themeColors) as (input: State) => string,
   contrast: compose(prop('contrast'), themeColors) as (input: State) => string,
-  alt: compose(prop('alt'), themeColors) as (input: State) => string,
-  fontRegular: compose(prop('regular'), themeFonts) as (input: State) => PodloveThemeFont,
-  fontBold: compose(prop('bold'), themeFonts) as (input: State) => PodloveThemeFont,
-  fontCi: compose(prop('ci'), themeFonts) as (input: State) => PodloveThemeFont
+  alt: compose(prop('alt'), themeColors) as (input: State) => string
 };
diff --git a/packages/types/src/theme.ts b/packages/types/src/theme.ts
index c68eb3cf7..ae8a584b5 100644
--- a/packages/types/src/theme.ts
+++ b/packages/types/src/theme.ts
@@ -24,16 +24,4 @@ export interface PodloveTheme {
    * - use this generator to get a direct visual feedback:
    */
   tokens: PodloveThemeTokens;
-
-  /**
-   * Fonts
-   * - by default the system font stack is used (https://css-tricks.com/snippets/css/system-font-stack/)
-   *
-   * font:
-   * - name: font name that is used in the font stack
-   * - family: list of fonts in a fallback order
-   * - weight: font weight of the defined font
-   * - src: list of web font sources (allowed: woff, woff2, ttf, eot, svg)
-   */
-  fonts?: { [key: string]: PodloveThemeFont };
 }

From 22edb5b658edfab1d6563b8b744530513f4858d7 Mon Sep 17 00:00:00 2001
From: Alexander Heimbuch <github@heimbu.ch>
Date: Tue, 28 Nov 2023 15:12:19 +0100
Subject: [PATCH 2/2] dev bump

---
 packages/player/config/src/version-4.test.ts |   6 +-
 packages/player/config/src/version-5.test.ts | 133 ++++++-------------
 packages/utils/src/chapters.test.ts          |   6 +-
 3 files changed, 48 insertions(+), 97 deletions(-)

diff --git a/packages/player/config/src/version-4.test.ts b/packages/player/config/src/version-4.test.ts
index 16a4adc45..2dab516ed 100644
--- a/packages/player/config/src/version-4.test.ts
+++ b/packages/player/config/src/version-4.test.ts
@@ -258,15 +258,13 @@ describe('config version 4', () => {
       expect(theme(example)).toEqual({
         tokens: {
           brand: '#a00'
-        },
-        fonts: {}
+        }
       })
     })
 
     test('should have a fallback', () => {
       expect(theme({})).toEqual({
-        tokens: {},
-        fonts: {}
+        tokens: {}
       })
     })
   })
diff --git a/packages/player/config/src/version-5.test.ts b/packages/player/config/src/version-5.test.ts
index e087636a1..a07fea60f 100644
--- a/packages/player/config/src/version-5.test.ts
+++ b/packages/player/config/src/version-5.test.ts
@@ -7,7 +7,7 @@ import {
   originReference,
   episodeReference,
   configReference
-} from './index'
+} from './index.js';
 
 const example = {
   version: 5,
@@ -72,35 +72,15 @@ const example = {
       shadeBase: '#807E7C',
       contrast: '#000',
       alt: '#fff'
-    },
-    fonts: {
-      ci: {
-        name: 'CiFont',
-        family: ['CiFont'],
-        weight: 800,
-        src: []
-      },
-      regular: {
-        name: 'RegularFont',
-        family: ['RegularFont'],
-        weight: 300,
-        src: []
-      },
-      bold: {
-        name: 'BoldFont',
-        family: ['BoldFont'],
-        weight: 700,
-        src: []
-      }
     }
   }
-}
+};
 
 describe('config version 5', () => {
   describe('theme()', () => {
     test('should be a function', () => {
-      expect(typeof theme).toBe('function')
-    })
+      expect(typeof theme).toBe('function');
+    });
 
     test('should extract the brand color', () => {
       expect(theme(example)).toEqual({
@@ -113,42 +93,15 @@ describe('config version 5', () => {
           shadeBase: '#807E7C',
           contrast: '#000',
           alt: '#fff'
-        },
-        fonts: {
-          ci: {
-            name: 'CiFont',
-            family: ['CiFont'],
-            weight: 800,
-            src: []
-          },
-          regular: {
-            name: 'RegularFont',
-            family: ['RegularFont'],
-            weight: 300,
-            src: []
-          },
-          bold: {
-            name: 'BoldFont',
-            family: ['BoldFont'],
-            weight: 700,
-            src: []
-          }
         }
-      })
-    })
-
-    test('should have a fallback', () => {
-      expect(theme({})).toEqual({
-        tokens: {},
-        fonts: {}
-      })
-    })
-  })
+      });
+    });
+  });
 
   describe('reference', () => {
     test('should be a function', () => {
-      expect(typeof reference).toBe('function')
-    })
+      expect(typeof reference).toBe('function');
+    });
 
     test('should extract from the config', () => {
       expect(reference(example)).toEqual({
@@ -156,67 +109,67 @@ describe('config version 5', () => {
         origin: 'http://foo.bar/origin-reference',
         config: 'http://foo.bar/config-reference',
         episode: 'http://foo.bar/episode-reference'
-      })
-    })
+      });
+    });
 
     test('should have a fallback', () => {
-      expect(reference({})).toEqual({})
-    })
-  })
+      expect(reference({})).toEqual({});
+    });
+  });
 
   describe('shareReference', () => {
     test('should be a function', () => {
-      expect(typeof shareReference).toBe('function')
-    })
+      expect(typeof shareReference).toBe('function');
+    });
 
     test('should extract from the config', () => {
-      expect(shareReference(example)).toEqual('http://foo.bar/share-reference')
-    })
+      expect(shareReference(example)).toEqual('http://foo.bar/share-reference');
+    });
 
     test('should have a fallback', () => {
-      expect(shareReference({})).toEqual(null)
-    })
-  })
+      expect(shareReference({})).toEqual(null);
+    });
+  });
 
   describe('originReference', () => {
     test('should be a function', () => {
-      expect(typeof originReference).toBe('function')
-    })
+      expect(typeof originReference).toBe('function');
+    });
 
     test('should extract from the config', () => {
-      expect(originReference(example)).toEqual('http://foo.bar/origin-reference')
-    })
+      expect(originReference(example)).toEqual('http://foo.bar/origin-reference');
+    });
 
     test('should have a fallback', () => {
-      expect(originReference({})).toEqual(null)
-    })
-  })
+      expect(originReference({})).toEqual(null);
+    });
+  });
 
   describe('episodeReference', () => {
     test('should be a function', () => {
-      expect(typeof episodeReference).toBe('function')
-    })
+      expect(typeof episodeReference).toBe('function');
+    });
 
     test('should extract from the episode', () => {
-      expect(episodeReference(example)).toEqual('http://foo.bar/episode-reference')
-    })
+      expect(episodeReference(example)).toEqual('http://foo.bar/episode-reference');
+    });
 
     test('should have a fallback', () => {
-      expect(episodeReference({})).toEqual(null)
-    })
-  })
+      expect(episodeReference({})).toEqual(null);
+    });
+  });
 
   describe('configReference', () => {
     test('should be a function', () => {
-      expect(typeof configReference).toBe('function')
-    })
+      expect(typeof configReference).toBe('function');
+    });
 
     test('should extract from the config', () => {
-      expect(configReference(example)).toEqual('http://foo.bar/config-reference')
-    })
+      expect(configReference(example)).toEqual('http://foo.bar/config-reference');
+    });
 
     test('should have a fallback', () => {
-      expect(configReference({})).toEqual(null)
-    })
-  })
-})
+      expect(configReference({})).toEqual(null);
+    });
+  });
+});
diff --git a/packages/utils/src/chapters.test.ts b/packages/utils/src/chapters.test.ts
index 05369e3e7..aff5e9675 100644
--- a/packages/utils/src/chapters.test.ts
+++ b/packages/utils/src/chapters.test.ts
@@ -68,13 +68,13 @@ describe('chapters', () => {
 
     test('hould find the active chapter by playtime', () => {
       expect(
-        currentChapterByPlaytime([inactiveChapter, activeChapter, additionalChapter])(11)
+        currentChapterByPlaytime([inactiveChapter, activeChapter, additionalChapter], 11)
       ).toEqual(inactiveChapter)
       expect(
-        currentChapterByPlaytime([inactiveChapter, activeChapter, additionalChapter])(4000)
+        currentChapterByPlaytime([inactiveChapter, activeChapter, additionalChapter], 4000)
       ).toEqual(activeChapter)
       expect(
-        currentChapterByPlaytime([activeChapter, additionalChapter, inactiveChapter])(3500)
+        currentChapterByPlaytime([activeChapter, additionalChapter, inactiveChapter], 3500)
       ).toEqual(inactiveChapter)
     })
   })