CSS 颜色全部迁移至 UI 库

Author: Linho1219

src/App.vue

@@ -210,7 +210,7 @@ s-page {
   display: flex;
 }
 #editor {
-  border-right: var(--c-border) 1px solid;
+  border-right: var(--s-color-outline-variant) 1px solid;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -253,7 +253,7 @@ s-page {
   top: 0;
   bottom: 0;
   width: 5px;
-  background: var(--c-accent);
+  background: var(--s-color-secondary);
   z-index: 999;
   opacity: 0;
   transition: opacity 0.1s;

src/components/codeDisplay.vue

@@ -43,7 +43,7 @@ const collapse = ref(true);
 
 <style>
 .plot-data.output {
-  border-top: var(--c-border) 1px solid;
+  border-top: var(--s-color-outline-variant) 1px solid;
   padding: 15px 15px;
   height: 260px;
   display: flex;
@@ -71,8 +71,7 @@ const collapse = ref(true);
   float: right;
   height:100%;
   padding:0 10px;
-  background: var(--c-bk3);
-  border:var(--c-border) 1px solid;
+  border:var(--s-color-outline-variant) 1px solid;
   border-radius: 5px;
   opacity: 0.75;
 }

src/components/dataBlock.vue

@@ -178,35 +178,11 @@ const allowedGraphType = computed(() =>
 
 <style>
 .plot-data {
-  border-bottom: var(--c-border) 1px solid;
+  border-bottom: var(--s-color-outline-variant) 1px solid;
   position: relative;
   padding: 20px 15px;
   overflow-x: hidden;
 }
-.blockBtn {
-  color: var(--c-text);
-  padding: 0 15px;
-  border: none;
-  background: var(--c-bk3);
-  border-radius: 5px;
-  opacity: 0.75;
-  border: var(--c-border) 1px solid;
-  flex-shrink: 0;
-}
-.delete {
-  background: var(--c-red);
-  border-color: var(--c-red2);
-}
-.blockBtn.active {
-  background: var(--c-bk1);
-}
-.blockBtn:hover {
-  opacity: 1;
-}
-.blockBtn:active {
-  opacity: 1;
-  filter: brightness(0.5);
-}
 .selectors {
   margin-bottom: 10px;
   position: relative;
@@ -231,7 +207,7 @@ const allowedGraphType = computed(() =>
 }
 
 .sortable-chosen .datablock-drag {
-  background: var(--c-border);
+  background: var(--s-color-outline-variant);
 }
 .sortable-chosen {
   z-index: 999;

src/components/dataBlockInner/coordArrInputs.vue

@@ -119,7 +119,7 @@ onMounted(() => {
 }
 
 .sortable-chosen > .coordarr-drag {
-  background: var(--c-border);
+  background: var(--s-color-outline-variant);
   z-index: 999;
 }
 .add-coord {

src/components/dataBlockInner/coordInputs.vue

@@ -65,7 +65,7 @@ function handleCoordInput(
   display: flex;
 }
 .input-box.coord.optional {
-  color: var(--c-text2);
+  color: var(--s-color-on-surface-variant);
 }
 .coord-label {
   font-size: 20px;

src/components/dataBlockInner/optInputs.vue

@@ -41,7 +41,7 @@ function handleCoordInput(
 <style>
 .input-box.opt-input {
   display: flex;
-  color: var(--c-text2);
+  color: var(--s-color-on-surface-variant);
   gap: 10px;
   justify-content: space-between;
 }

src/components/dataBlockInner/switchInputs.vue

@@ -27,49 +27,8 @@ const { dataItem, fnType } = defineProps<InputProps>();
 <style>
 .input-box.switches {
   align-items: center;
-  gap: 10px;
+  gap: 15px;
   padding-left: 5px;
   cursor: default;
 }
-.switch:before,
-.switch:after {
-  position: absolute;
-  transition: all 0.2s cubic-bezier(0, 0.48, 0.27, 0.98);
-}
-.switch {
-  width: 40px;
-  height: 20px;
-  border-radius: 5px;
-  position: relative;
-  border-radius: 10px;
-  border: none;
-}
-.switch.on {
-  background: var(--c-accent);
-}
-.switch.off {
-  background: var(--c-border);
-}
-.switch:after {
-  content: "";
-  background: #fff;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-}
-.switch.off:after {
-  left: 4px;
-}
-.switch.on:after {
-  left: 24px;
-}
-.switches:hover .switch {
-  filter: brightness(110%);
-}
-.switches:active .switch {
-  filter: brightness(90%);
-}
 </style>

src/components/nav.vue

@@ -72,14 +72,4 @@ const emit = defineEmits(["toggleDrawer"]);
   opacity: 0.5;
   font-size: 0.8em;
 }
-.link {
-  opacity: 0.5;
-  font-size: 0.8em;
-  text-decoration: none;
-  color: var(--c-text);
-}
-.link:hover {
-  opacity: 0.8;
-  text-decoration: underline;
-}
 </style>

src/style.css

@@ -1,22 +1,7 @@
-:root {
-  --c-bk1: #181818;
-  --c-bk2: #1f1f1f;
-  --c-bk3: #25292c;
-  --c-border: #6a757a8a;
-  --c-hr: #2b2b2b;
-  --c-text: #fffe;
-  --c-text2: #bbb;
-  --c-accent: #398cab;
-  --c-red: #800000;
-  --c-red2: #8f4545;
-}
-
 :root {
   color-scheme: dark;
   line-height: 1.5;
   font-weight: 400;
-  color: var(--c-text);
-  background-color: var(--c-bk1);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;