refactor: update CSS variables (#95)

* chore: remove deprecated extension

* refactor: update old variable names

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.volar"]
 }

src/App.vue

@@ -81,7 +81,10 @@ const share = () => {
       Object.assign(storedContent, data)
       router.replace({ name: 'edit', params: { id: data.id } })
 
-      const path = router.resolve({ name: 'edit', params: { id: data.id } }).href
+      const path = router.resolve({
+        name: 'edit',
+        params: { id: data.id },
+      }).href
       copyToClipboard(window.location.origin + path)
     })
     .finally(() => {
@@ -107,7 +110,7 @@ watch(content, (value) => {
 })
 
 watch(editing, (value) => {
-  if (!route.params.id)  {
+  if (!route.params.id) {
     return
   }
 
@@ -205,13 +208,13 @@ onUnmounted(() => {
 
 <style scoped>
 .app {
-  font-family: var(--default-theme-font);
+  font-family: var(--scalar-font);
 }
 
 .header {
   height: 50px;
-  border-bottom: 1px solid var(--default-theme-border-color);
-  color: var(--default-theme-color-1);
+  border-bottom: 1px solid var(--scalar-border-color);
+  color: var(--scalar-color-1);
   display: flex;
   align-items: center;
   padding: 12px;
@@ -240,24 +243,24 @@ onUnmounted(() => {
 .mode button,
 .actions a {
   text-decoration: none;
-  color: var(--default-theme-color-1);
-  font-size: var(--default-theme-small);
+  color: var(--scalar-color-1);
+  font-size: var(--scalar-small);
 }
 
 .mode a,
 .mode button {
-  font-size: var(--default-theme-small);
-  font-family: var(--default-theme-font);
+  font-size: var(--scalar-small);
+  font-family: var(--scalar-font);
   border: none;
-  background: var(--default-theme-background-4);
+  background: var(--scalar-background-4);
   padding: 6px 12px;
-  border-radius: var(--default-theme-radius-lg);
-  color: var(--default-theme-color-1);
+  border-radius: var(--scalar-radius-lg);
+  color: var(--scalar-color-1);
 }
 
 .logo {
-  font-size: var(--default-theme-small);
-  font-weight: var(--default-theme-bold);
+  font-size: var(--scalar-small);
+  font-weight: var(--scalar-bold);
   gap: 8px;
 }
 
@@ -272,6 +275,6 @@ onUnmounted(() => {
 }
 
 .layout > * + * {
-  border-left: 1px solid var(--default-theme-border-color);
+  border-left: 1px solid var(--scalar-border-color);
 }
 </style>

src/components/DarkModeToggle.vue

@@ -101,10 +101,10 @@ const toggleDark = useToggle(isDark)
 
 <style scoped>
 .darkmode-toggle {
-  color: var(--default-theme-color-1);
+  color: var(--scalar-color-1);
   cursor: pointer;
-  font-family: var(--default-theme-font);
-  font-size: var(--default-theme-small);
-  border-radius: var(--default-theme-radius-lg);
+  font-family: var(--scalar-font);
+  font-size: var(--scalar-small);
+  border-radius: var(--scalar-radius-lg);
 }
 </style>

src/components/ModeToggleButton.vue

@@ -41,35 +41,35 @@ const model = computed<boolean>({
 .toggle-group {
   display: flex;
   position: relative;
-  border-radius: var(--theme-radius, var(--default-theme-radius));
+  border-radius: var(--theme-radius, var(--scalar-radius));
 }
 .toggle-group:hover,
 .toggle-group:focus-visible {
-  background: var(--theme-background-3, var(--default-theme-background-3));
+  background: var(--theme-background-3, var(--scalar-background-3));
 }
 .toggle-group:before {
   content: '';
   display: block;
-  border-radius: var(--theme-radius, var(--default-theme-radius));
+  border-radius: var(--theme-radius, var(--scalar-radius));
   width: 50%;
   height: 100%;
   position: absolute;
-  background: var(--theme-background-3, var(--default-theme-background-3));
+  background: var(--theme-background-3, var(--scalar-background-3));
   transition: transform 0.2s ease-in-out;
   transform: translate3d(0%, 0, 0);
 }
 .toggle-group:hover:before,
 .toggle-group:focus-visible:before {
-  background: var(--theme-background-4, var(--default-theme-background-4));
+  background: var(--theme-background-4, var(--scalar-background-4));
 }
 .toggle-group-checked:before {
   transform: translate3d(100%, 0, 0);
 }
 
 .toggle-item {
   flex: 1;
-  font-size: var(--theme-font-size-4, var(--default-theme-font-size-4));
-  color: var(--theme-color-3, var(--default-theme-color-3));
+  font-size: var(--theme-font-size-4, var(--scalar-font-size-4));
+  color: var(--theme-color-3, var(--scalar-color-3));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -88,6 +88,6 @@ const model = computed<boolean>({
 }
 
 .toggle-item-active {
-  color: var(--theme-color-1, var(--default-theme-color-1));
+  color: var(--theme-color-1, var(--scalar-color-1));
 }
 </style>

src/components/ShareButton.vue

@@ -1,34 +1,41 @@
 <script lang="ts" setup>
-withDefaults(defineProps<{
-  loading?: boolean,
-}>(), {
-  loading: false,
-})
+withDefaults(
+  defineProps<{
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  },
+)
 
 defineEmits<{
   (e: 'share'): void
 }>()
 </script>
 
 <template>
-  <button type="button" @click="$emit('share')" :disabled="loading" class="button">
+  <button
+    type="button"
+    @click="$emit('share')"
+    :disabled="loading"
+    class="button">
     Share
   </button>
 </template>
 
 <style scoped>
 .button {
-  background: var(--default-theme-background-3);
+  background: var(--scalar-background-3);
   font-weight: normal;
   border: none;
-  font-family: var(--default-theme-font);
-  font-size: var(--default-theme-small);
+  font-family: var(--scalar-font);
+  font-size: var(--scalar-small);
   padding: 6px 12px;
-  border-radius: var(--default-theme-radius-lg);
-  transition: all .5s ease-in-out;
+  border-radius: var(--scalar-radius-lg);
+  transition: all 0.5s ease-in-out;
 }
 
 .button[disabled] {
-  color: var(--default-theme-color-3);
+  color: var(--scalar-color-3);
 }
-</style>
+</style>

src/style.css

@@ -13,7 +13,7 @@ html {
 
 body {
   margin: 0;
-  background: var(--default-theme-background-1);
+  background: var(--scalar-background-1);
 }
 
 .darklight-reference {