refactor(css): Use css by Aura Theme

sfxcode · sfxcode · commit d8e4a4392824 · 2024-08-06T22:46:43.000+02:00
diff --git a/dev/App.scss b/dev/App.scss
@@ -10,12 +10,12 @@
 
 html {
   height: 100%;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 a {
   text-decoration: none;
-  color: var(--primary-color);
+  color: var(--p-primary-color);
 }
 
 
diff --git a/dev/components/app/AppTopbar.vue b/dev/components/app/AppTopbar.vue
@@ -167,6 +167,6 @@ const items = ref([
 
 <style scoped lang='scss'>
 a {
-  color: var(--primary-color);
+  color: var(--p-primary-color);
 }
 </style>
diff --git a/dev/components/demo/PrimeInput.vue b/dev/components/demo/PrimeInput.vue
@@ -33,7 +33,7 @@ async function submitHandler() {
 <template>
   <div>
     <Toast position="bottom-right" />
-    <h2 class="text-color-[var(--primary-color)] pb-2">
+    <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>
     <slot />
diff --git a/dev/components/demo/PrimeOutput.vue b/dev/components/demo/PrimeOutput.vue
@@ -18,7 +18,7 @@ const formData = ref(props.data)
 <template>
   <div>
     <Toast position="bottom-right" />
-    <h2 class="text-color-[var(--primary-color)] pb-2">
+    <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>
     <slot />
diff --git a/dev/components/demo/PrimeSchemaEditor.vue b/dev/components/demo/PrimeSchemaEditor.vue
@@ -57,7 +57,7 @@ function copyObject() {
 <template>
   <div>
     <Toast position="bottom-right" />
-    <h2 class="text-color-[var(--primary-color)] pb-2">
+    <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>
     <slot />
diff --git a/dev/index.html b/dev/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="font-size: 14px;" class="p-dark">
+<html lang="en" class="p-dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="./assets/favicon.ico" />
diff --git a/dev/pages/samples/FormEditor.vue b/dev/pages/samples/FormEditor.vue
@@ -74,17 +74,17 @@ const schemaResult = computed(() => editorDataToSchema(formData.value))
           <li v-for="formInput in formInputList" :key="formInput" class="mt-4">
             <div class="" style="box-sizing: border-box;">
               <div class="min-w-100 mr-4 flex gap-2">
-                <span class="block  p-drag-handle"><i class="pi pi-bars text-[color:var(--primary-color)]" /></span>
-                <i class="pi pi-file-edit text-[color:var(--primary-color)] mb-2" @click="actionEdit(formInput)" />
-                <i class="pi pi-copy text-[color:var(--primary-color)] mb-2" @click="actionCopy(formInput)" />
-                <i class="pi pi-plus text-[color:var(--primary-color)] mb-2" @click="actionInsert(formInput)" />
-                <i class="pi pi-trash text-[color:var(--primary-color)]" @click="actionDelete(formInput)" />
+                <span class="block  p-drag-handle"><i class="pi pi-bars text-[color:var(--p-primary-color)]" /></span>
+                <i class="pi pi-file-edit text-[color:var(--p-primary-color)] mb-2" @click="actionEdit(formInput)" />
+                <i class="pi pi-copy text-[color:var(--p-primary-color)] mb-2" @click="actionCopy(formInput)" />
+                <i class="pi pi-plus text-[color:var(--p-primary-color)] mb-2" @click="actionInsert(formInput)" />
+                <i class="pi pi-trash text-[color:var(--p-primary-color)]" @click="actionDelete(formInput)" />
                 <span class="text-gray-700">|</span>
                 <i
                   v-if="formInput.if && formInput.if.length > 0" v-tooltip="`condition: ${formInput.if}`"
                   class="pi pi-question-circle text-yellow-700"
                 />
-                <span class="text-xs text-[color:var(--primary-color)]">{{ formInput.$formkit }}</span>
+                <span class="text-xs text-[color:var(--p-primary-color)]">{{ formInput.$formkit }}</span>
                 <span class="text-gray-700">|</span>
                 <span class="text-xs text-yellow-500">{{ formInput.name }}</span>
               </div>
diff --git a/dev/pages/styling/Grid.vue b/dev/pages/styling/Grid.vue
@@ -57,14 +57,14 @@ const data = { name: 'Hey Some Value', name2: 'Another value !', name3: 42 }
 </script>
 
 <template>
-  <h2 class="text-color-[var(--primary-color)]">
+  <h2 class="text-color-[var(--p-primary-color)]">
     Grid in Data Edit
   </h2>
   <h4>12 Column Grid used</h4>
   <div class="w-1/3">
     <FormKitDataEdit :schema="schema" :data="data" :debug-schema="false" :debug-data="false" />
   </div>
-  <h2 class="text-color-[var(--primary-color)]">
+  <h2 class="text-color-[var(--p-primary-color)]">
     Grid in Data View
   </h2>
   <div class="w-1/3">

Original file line number	Diff line number	Diff line change
`@@ -10,12 +10,12 @@`
`10`	`10`
`11`	`11`	`html {`
`12`	`12`	`height: 100%;`
`13`		`- font-size: 16px;`
	`13`	`+ font-size: 14px;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`a {`
`17`	`17`	`text-decoration: none;`
`18`		`- color: var(--primary-color);`
	`18`	`+ color: var(--p-primary-color);`
`19`	`19`	`}`
`20`	`20`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,6 @@ const items = ref([`
`167`	`167`
`168`	`168`	`<style scoped lang='scss'>`
`169`	`169`	`a {`
`170`		`- color: var(--primary-color);`
	`170`	`+ color: var(--p-primary-color);`
`171`	`171`	`}`
`172`	`172`	`</style>`