123

QkeleQ10 · Jul 2, 2024 · 49298c6 · 49298c6
1 parent 5cc8a6d
commit 49298c6
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 109 deletions.
diff --git a/popup/dist/assets/index-BmeHimE9.css b/popup/dist/assets/index-BmeHimE9.css
diff --git a/popup/dist/assets/index-C4Qv7PqE.js b/popup/dist/assets/index-C4Qv7PqE.js
diff --git a/popup/dist/assets/index-DmvJ8t9n.js b/popup/dist/assets/index-DmvJ8t9n.js
diff --git a/popup/dist/assets/index-LP8LrBDw.css b/popup/dist/assets/index-LP8LrBDw.css
diff --git a/popup/dist/index.html b/popup/dist/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="./favicon.ico">
   <title>Study Tools-configuratiepaneel</title>
-  <script type="module" crossorigin src="./assets/index-DmvJ8t9n.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-BmeHimE9.css">
+  <script type="module" crossorigin src="./assets/index-C4Qv7PqE.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-LP8LrBDw.css">
 </head>
 
 <body>

diff --git a/popup/dist/themePresets.js b/popup/dist/themePresets.js
@@ -0,0 +1,82 @@
+export default [
+    {
+        name: "Standaard",
+        author: "Magister",
+        'ptheme': 'auto,207,95,55',
+        'pagecolor': 'false,0,0,7',
+        'wallpaper': 'none,',
+        'sidecolor': 'false,207,95,55',
+        'decoration': 'none,',
+        'decoration-size': 1,
+        'appbarcolor': 'false,207,95,47',
+        'shape': 8,
+        'custom-css': ''
+    },
+    {
+        name: "Hawaï",
+        author: "Quinten Althues",
+        'ptheme': 'light,180,50,40',
+        'pagecolor': 'false,0,0,7',
+        'wallpaper': 'custom,https://i.imgur.com/qY42IDh.png',
+        'sidecolor': 'false,207,95,55',
+        'decoration': 'custom,https://w0.peakpx.com/wallpaper/865/392/HD-wallpaper-hawaii-background-beautiful-colors-nature-outside-palm-trees-portrait-summer-water.jpg',
+        'decoration-size': 1,
+        'appbarcolor': 'false,207,95,47',
+        'shape': 8,
+        'custom-css': ''
+    },
+    {
+        name: "Vaporwave",
+        author: "Quinten Althues",
+        'ptheme': 'dark,275,100,60',
+        'pagecolor': 'false,0,0,7',
+        'wallpaper': 'custom,https://i.imgur.com/ss4ty9u.png',
+        'sidecolor': 'false,207,95,55',
+        'decoration': 'custom,https://wallpapers.com/images/hd/80s-neon-veqvixadrbra13q4.jpg',
+        'decoration-size': 1,
+        'appbarcolor': 'false,207,95,47',
+        'shape': 8,
+        'custom-css': ''
+    },
+    {
+        name: "Wilde Westen",
+        author: "Quinten Althues",
+        'ptheme': 'dark,10,80,50',
+        'pagecolor': 'false,0,0,7',
+        'wallpaper': 'custom,https://i.imgur.com/UgMMNqN.png',
+        'sidecolor': 'false,207,95,55',
+        'decoration': 'custom,https://static.vecteezy.com/system/resources/previews/023/592/503/non_2x/american-desert-landscape-western-background-vector.jpg',
+        'decoration-size': 1,
+        'appbarcolor': 'false,207,95,47',
+        'shape': 8,
+        'custom-css': ''
+    },
+    {
+        name: "Discord",
+        author: "Quinten Althues",
+        'ptheme': 'dark,235,48,85',
+        'pagecolor': 'true,223,6.7,20.6',
+        'wallpaper': 'none,',
+        'sidecolor': 'true,220,6.5,18',
+        'decoration': 'none',
+        'decoration-size': 1,
+        'appbarcolor': 'true,225,6.3,12.5',
+        'shape': 10,
+        'magister-picture': 'custom',
+        'magister-picture-source': 'data:image/webp;base64,UklGRuwCAABXRUJQVlA4WAoAAAAgAAAANwAANwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDgg/gAAAHAHAJ0BKjgAOAA/EXi1UCwnpaKuFtuJgCIJZADOsD76t/HoihGP61hpYw5Z1NN4bq7oCKOufMpnylC3y80qP7dFAy4gANZ5R6+pAwH5/1E9hHfeEu9y0SE1mj3Z+QDLC5oD3+LqS1T6ZjXgiYHVWkX3iFjKDyX7UcGV+Smyo1jisfsJFp8mgoSp31n5pybf8uJuJDN8KLAr/UEXi/UylwajOjYeNN4sHaE1pCQwGkAIBs1SUk7qLFKqGb0GsiU4N61XrXFPy/3i91rdvItliQM1J8gZZ9QIz32RnVHALZTLoWn4//RXx++eKTomYf2YcvOjHNDz3CseeMrAAAAA',
+        'custom-css': ':root{--st-background-secondary:#232428}#st-start-widgets{background-color:var(--st-side-background);border-left:none;box-shadow:none}#st-start-widget-controls-wrapper,.menu-footer{background-color:#232428;border-top:none}'
+    },
+    {
+        name: "Minecraft",
+        author: "a",
+        "ptheme": "dark,0,0,48.2",
+        "pagecolor": "false,223,6.7,20.6",
+        "wallpaper": "custom,https://i.imgur.com/IUTmKqe.png",
+        "sidecolor": "true,0,0,43.5",
+        "decoration": "custom,https://i.imgur.com/6pS88xl.png",
+        "decoration-size": 0.8,
+        "appbarcolor": "true,0,0,43.5",
+        "shape": 0,
+        "custom-css": `.examen-widget,.main-menu .caption,.st-title,.title,h2,h3{font-family:var(--st-font-family-secondary)!important}@font-face{font-family:Minecraftia;src:url("https://unpkg.com/@south-paw/[email protected]/files/minecraft.woff2") format("woff2"),url("https://unpkg.com/@south-paw/[email protected]/files/minecraft.woff") format("woff");font-weight:600}:root{--st-font-family-primary:Minecraftia!important;--st-font-family-secondary:Minecraftia!important;--st-background-secondary:#000000a6}:host{--title-font:Minecraftia!important;--subtitle-font:Minecraftia!important}body{--dna-font-family-base:Minecraftia!important;--dna-font-family-header:Minecraftia!important;height:100vh;flex-direction:column;background-color:#fff;background-image:url('https://i.ibb.co/bH3JY30/IE1G7Lr.png');background-size:cover;background-position:center;position:relative}.examen-widget,.title,h2,h3{font:var(--st-font-family-secondary)!important}.main-menu .caption:not(#st-start-header-text-wrapper *),.main-menu li.submenu.ng-scope>a,.main-menu li>a,.st-title:not(#st-start-header-text-wrapper *){font-size:small}dna-button{color:var(--st-contrast-accent)}.menu-host{margin-left:-90px;padding-left:90px;width:calc(240px + 90px)}.appbar-host{z-index:1;background:0 0}.logo .logo-expanded.ng-scope{content:url(https://i.imgur.com/NfjCZoy.png)!important;scale:1.2!important;margin:21px!important;padding-bottom:15px!important}.logo-collapsed{content:url(https://i.imgur.com/flg7uhq.png)!important;padding-bottom:15px!important}#st-cc,#st-start-today-view-popover,#st-start-widgets,.ng-isolate-scope .content-container{background:url(https://i.imgur.com/WfkURVY.png)!important}#aanwezigheid thead,#st-cb,#st-cc-open,#st-start-today-view,#st-start-widget-controls-wrapper,#st-start-widget-grades,.appbar .menu-button,.block h3,.main-menu a,.st-button.icon,.st-button.segment.st-dropdown-segment,dna-button-bar[slot=actions]>*,dna-button-group[slot=actions]>*,input[type=checkbox]+label>span{cursor:pointer;overflow:hidden;white-space:nowrap;user-select:none;border-radius:0;background:url('https://i.imgur.com/HKBqne8.png') center/cover #999;image-rendering:pixelated;border:2px solid #000;box-shadow:inset -2px -4px #0004,inset 2px 2px #fff5!important}#st-start-widget-controls-wrapper,#st-start-widget-grades,.st-button.segment.st-dropdown-segment.active{background:url('https://i.imgur.com/5EPox2G.png') center/cover #999}.appbar .menu-button>*{border-radius:0!important}#aanwezigheid thead *{background-color:transparent!important;border-color:none!important}#aanwezigheid :not(.fold) thead,#aanwezigheid thead:hover,.block h3:hover,.block:not(.fold) h3,.main-menu a:hover{border:2px solid #fff!important;text-shadow:2px 2px #202013CC!important}.block h3{border:2px solid #000!important;text-shadow:none!important}.main-menu li.active>a,.main-menu li.active>a:active,.main-menu li.active>a:hover,.main-menu li.submenu.ng-scope.active>a,.main-menu li.submenu.ng-scope.active>a:active,.main-menu li.submenu.ng-scope.active>a:hover,.main-menu li.submenu.ng-scope>a:active,.main-menu li>a:active{border:2px solid #fff;text-shadow:2px 2px #202013CC!important;font-size:small}ul.tabs li::after{background-color:transparent}input[type=checkbox]:checked+label>span{cursor:pointer;overflow:hidden;white-space:nowrap;user-select:none;border-radius:0;background:url('https://i.imgur.com/HKBqne8.png') center/cover #999;image-rendering:pixelated;border:2px solid #fff!important;box-shadow:inset -2px -4px #0004,inset 2px 2px #fff5!important;text-shadow:2px 2px #202013CC!important}.block .content,.fancy-select .k-multiselect-wrap.k-floatwrap,.fancy-select .k-widget.k-multiselect.k-header.select.all-items-selected,.fancy-select .k-widget.k-multiselect.k-header.select.all-items-selected.k-state-hover,.tabsheet .block,.tabsheet .block .content{background-color:transparent!important;border:none!important}.block .content fieldset{background-color:var(--st-background-secondary)!important}.widget.ng-scope .block h3 b{font-size:large;position:absolute;left:50%;top:50%;translate:-50% -50%}#st-start-widget-controls-wrapper{background-color:var(--st-background-secondary);padding:8px!important}#st-start-widget-controls-wrapper>*{color:#fff}#st-start-widget-digital-clock:hover{background-color:#4d3828!important}`
+    }
+]
diff --git a/popup/public/themePresets.js b/popup/public/themePresets.js
@@ -1,6 +1,7 @@
 export default [
     {
-        name: "Magister",
+        name: "Standaard",
+        author: "Magister",
         'ptheme': 'auto,207,95,55',
         'pagecolor': 'false,0,0,7',
         'wallpaper': 'none,',
@@ -13,6 +14,7 @@ export default [
     },
     {
         name: "Hawaï",
+        author: "Quinten Althues",
         'ptheme': 'light,180,50,40',
         'pagecolor': 'false,0,0,7',
         'wallpaper': 'custom,https://i.imgur.com/qY42IDh.png',
@@ -25,6 +27,7 @@ export default [
     },
     {
         name: "Vaporwave",
+        author: "Quinten Althues",
         'ptheme': 'dark,275,100,60',
         'pagecolor': 'false,0,0,7',
         'wallpaper': 'custom,https://i.imgur.com/ss4ty9u.png',
@@ -37,6 +40,7 @@ export default [
     },
     {
         name: "Wilde Westen",
+        author: "Quinten Althues",
         'ptheme': 'dark,10,80,50',
         'pagecolor': 'false,0,0,7',
         'wallpaper': 'custom,https://i.imgur.com/UgMMNqN.png',
@@ -49,6 +53,7 @@ export default [
     },
     {
         name: "Discord",
+        author: "Quinten Althues",
         'ptheme': 'dark,235,48,85',
         'pagecolor': 'true,223,6.7,20.6',
         'wallpaper': 'none,',
@@ -60,5 +65,18 @@ export default [
         'magister-picture': 'custom',
         'magister-picture-source': 'data:image/webp;base64,UklGRuwCAABXRUJQVlA4WAoAAAAgAAAANwAANwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDgg/gAAAHAHAJ0BKjgAOAA/EXi1UCwnpaKuFtuJgCIJZADOsD76t/HoihGP61hpYw5Z1NN4bq7oCKOufMpnylC3y80qP7dFAy4gANZ5R6+pAwH5/1E9hHfeEu9y0SE1mj3Z+QDLC5oD3+LqS1T6ZjXgiYHVWkX3iFjKDyX7UcGV+Smyo1jisfsJFp8mgoSp31n5pybf8uJuJDN8KLAr/UEXi/UylwajOjYeNN4sHaE1pCQwGkAIBs1SUk7qLFKqGb0GsiU4N61XrXFPy/3i91rdvItliQM1J8gZZ9QIz32RnVHALZTLoWn4//RXx++eKTomYf2YcvOjHNDz3CseeMrAAAAA',
         'custom-css': ':root{--st-background-secondary:#232428}#st-start-widgets{background-color:var(--st-side-background);border-left:none;box-shadow:none}#st-start-widget-controls-wrapper,.menu-footer{background-color:#232428;border-top:none}'
+    },
+    {
+        name: "Minecraft",
+        author: "a",
+        "ptheme": "dark,0,0,48.2",
+        "pagecolor": "false,223,6.7,20.6",
+        "wallpaper": "custom,https://i.imgur.com/IUTmKqe.png",
+        "sidecolor": "true,0,0,43.5",
+        "decoration": "custom,https://i.imgur.com/6pS88xl.png",
+        "decoration-size": 0.8,
+        "appbarcolor": "true,0,0,43.5",
+        "shape": 0,
+        "custom-css": `.examen-widget,.main-menu .caption,.st-title,.title,h2,h3{font-family:var(--st-font-family-secondary)!important}@font-face{font-family:Minecraftia;src:url("https://unpkg.com/@south-paw/[email protected]/files/minecraft.woff2") format("woff2"),url("https://unpkg.com/@south-paw/[email protected]/files/minecraft.woff") format("woff");font-weight:600}:root{--st-font-family-primary:Minecraftia!important;--st-font-family-secondary:Minecraftia!important;--st-background-secondary:#000000a6}:host{--title-font:Minecraftia!important;--subtitle-font:Minecraftia!important}body{--dna-font-family-base:Minecraftia!important;--dna-font-family-header:Minecraftia!important;height:100vh;flex-direction:column;background-color:#fff;background-image:url('https://i.ibb.co/bH3JY30/IE1G7Lr.png');background-size:cover;background-position:center;position:relative}.examen-widget,.title,h2,h3{font:var(--st-font-family-secondary)!important}.main-menu .caption:not(#st-start-header-text-wrapper *),.main-menu li.submenu.ng-scope>a,.main-menu li>a,.st-title:not(#st-start-header-text-wrapper *){font-size:small}dna-button{color:var(--st-contrast-accent)}.menu-host{margin-left:-90px;padding-left:90px;width:calc(240px + 90px)}.appbar-host{z-index:1;background:0 0}.logo .logo-expanded.ng-scope{content:url(https://i.imgur.com/NfjCZoy.png)!important;scale:1.2!important;margin:21px!important;padding-bottom:15px!important}.logo-collapsed{content:url(https://i.imgur.com/flg7uhq.png)!important;padding-bottom:15px!important}#st-cc,#st-start-today-view-popover,#st-start-widgets,.ng-isolate-scope .content-container{background:url(https://i.imgur.com/WfkURVY.png)!important}#aanwezigheid thead,#st-cb,#st-cc-open,#st-start-today-view,#st-start-widget-controls-wrapper,#st-start-widget-grades,.appbar .menu-button,.block h3,.main-menu a,.st-button.icon,.st-button.segment.st-dropdown-segment,dna-button-bar[slot=actions]>*,dna-button-group[slot=actions]>*,input[type=checkbox]+label>span{cursor:pointer;overflow:hidden;white-space:nowrap;user-select:none;border-radius:0;background:url('https://i.imgur.com/HKBqne8.png') center/cover #999;image-rendering:pixelated;border:2px solid #000;box-shadow:inset -2px -4px #0004,inset 2px 2px #fff5!important}#st-start-widget-controls-wrapper,#st-start-widget-grades,.st-button.segment.st-dropdown-segment.active{background:url('https://i.imgur.com/5EPox2G.png') center/cover #999}.appbar .menu-button>*{border-radius:0!important}#aanwezigheid thead *{background-color:transparent!important;border-color:none!important}#aanwezigheid :not(.fold) thead,#aanwezigheid thead:hover,.block h3:hover,.block:not(.fold) h3,.main-menu a:hover{border:2px solid #fff!important;text-shadow:2px 2px #202013CC!important}.block h3{border:2px solid #000!important;text-shadow:none!important}.main-menu li.active>a,.main-menu li.active>a:active,.main-menu li.active>a:hover,.main-menu li.submenu.ng-scope.active>a,.main-menu li.submenu.ng-scope.active>a:active,.main-menu li.submenu.ng-scope.active>a:hover,.main-menu li.submenu.ng-scope>a:active,.main-menu li>a:active{border:2px solid #fff;text-shadow:2px 2px #202013CC!important;font-size:small}ul.tabs li::after{background-color:transparent}input[type=checkbox]:checked+label>span{cursor:pointer;overflow:hidden;white-space:nowrap;user-select:none;border-radius:0;background:url('https://i.imgur.com/HKBqne8.png') center/cover #999;image-rendering:pixelated;border:2px solid #fff!important;box-shadow:inset -2px -4px #0004,inset 2px 2px #fff5!important;text-shadow:2px 2px #202013CC!important}.block .content,.fancy-select .k-multiselect-wrap.k-floatwrap,.fancy-select .k-widget.k-multiselect.k-header.select.all-items-selected,.fancy-select .k-widget.k-multiselect.k-header.select.all-items-selected.k-state-hover,.tabsheet .block,.tabsheet .block .content{background-color:transparent!important;border:none!important}.block .content fieldset{background-color:var(--st-background-secondary)!important}.widget.ng-scope .block h3 b{font-size:large;position:absolute;left:50%;top:50%;translate:-50% -50%}#st-start-widget-controls-wrapper{background-color:var(--st-background-secondary);padding:8px!important}#st-start-widget-controls-wrapper>*{color:#fff}#st-start-widget-digital-clock:hover{background-color:#4d3828!important}`
     }
 ]
diff --git a/popup/src/components/Dialog.vue b/popup/src/components/Dialog.vue
@@ -78,6 +78,7 @@ const closeDialog = () => {
 .dialog-description {
 	color: var(--color-on-surface-variant);
 	font: var(--typescale-body-medium);
+	text-wrap: balance;
 }
 
 .dialog-actions {

diff --git a/popup/src/components/ThemePresets.vue b/popup/src/components/ThemePresets.vue
@@ -1,12 +1,17 @@
 <script setup>
-import { inject } from 'vue'
+import { ref, inject } from 'vue'
 import MagisterThemePreview from './MagisterThemePreview.vue'
+import Dialog from './Dialog.vue'
 
 import themePresets from '../../public/themePresets.js'
 
 const syncedStorage = inject('syncedStorage')
 
-function applyPreset(preset) {
+const promptOpen = ref(false)
+const promptingPreset = ref({})
+
+function applyPreset() {
+    const preset = promptingPreset.value
     for (const key in preset) {
         if (Object.hasOwnProperty.call(preset, key) && key != 'name' && key != 'thumbnail') {
             const value = preset[key]
@@ -21,14 +26,29 @@ function applyPreset(preset) {
         <div id="theme-presets-container">
             <div id="theme-presets-heading">
                 <h3 class="setting-title">Thema's</h3>
-                <span class="setting-subtitle">Als je een thema selecteert, dan gaan al je aangepaste voorkeuren verloren.</span>
             </div>
             <div id="theme-presets">
-                <button v-for="preset in themePresets" :title="preset.name" @click="applyPreset(preset)">
+                <button v-for="preset in themePresets" class="theme-preset" :title="preset.name"
+                    @click="promptOpen = true; promptingPreset = preset">
                     <MagisterThemePreview class="theme-preset-preview" :preset="preset" />
+                    <div class="theme-preset-info">
+                        <span class="theme-preset-name">{{ preset.name }}</span>
+                        <span class="theme-preset-author">{{ preset.author }}</span>
+                    </div>
                 </button>
             </div>
         </div>
+        <Dialog v-model:active="promptOpen">
+            <template #icon>format_paint</template>
+            <template #headline>Thema vervangen?</template>
+            <template #text>
+                Als je doorgaat, dan gaan je huidige thema en al je aangepaste themavoorkeuren verloren.
+            </template>
+            <template #buttons>
+                <button @click="applyPreset(); promptOpen = false">Doorgaan</button>
+                <button @click="promptOpen = false">Annuleren</button>
+            </template>
+        </Dialog>
     </div>
 </template>
 
@@ -40,18 +60,20 @@ function applyPreset(preset) {
 }
 
 #theme-presets {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 8px;
 }
 
-#theme-presets>button {
+.theme-preset {
+    position: relative;
     display: flex;
     flex-direction: column;
+    gap: 6px;
     padding: 0;
     margin: 0;
-    width: 200px;
-    padding: 10px;
+    width: 196px;
+    padding: 8px;
     background-color: var(--color-surface-container);
     border: none;
     border-radius: 12px;
@@ -61,8 +83,24 @@ function applyPreset(preset) {
 .theme-preset-preview {
     grid-area: preview;
     width: 100%;
-    aspect-ratio: 16 / 9;
+    height: 90px;
     border-radius: 8px;
     outline: 1px solid var(--color-outline-variant);
 }
+
+.theme-preset-info {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+.theme-preset-name {
+    font: var(--typescale-body-medium);
+    color: var(--color-on-surface-container);
+}
+
+.theme-preset-author {
+    font: var(--typescale-body-small);
+    color: var(--color-on-surface-variant);
+}
 </style>