feat: add light secondary color and secondary style for the afcl button

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1283/TfU5sPoE/add-afcl-primary-and-secondary

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -6,6 +6,9 @@ export const styles = () => ({
     lightPrimaryContrast: "alias:lightPrimary inverse", // primary color contrast
     lightPrimaryOpacity: "alias:lightPrimary opacity:0.05", // primary color opacity
 
+    lightSecondary: "#f9fafb", // secondary color
+    lightSecondaryContrast: "alias:lightSecondary inverse", // secondary color contrast
+
     lightNavbar: "#FFFFFF", // navbar background
     lightNavbarBorder: "rgb(229 231 235)", // border
     lightNavbarText: "#111827", // navbar text
@@ -361,6 +364,10 @@ export const styles = () => ({
     darkPrimaryContrast: "alias:darkPrimary inverse", // primary color contrast
     darkPrimaryOpacity: "alias:darkPrimary opacity:0.2", // primary color opacity
 
+    darkSecondary: "#374151", // secondary color
+    darkSecondaryContrast: "alias:darkSecondary inverse", // secondary color contrast
+
+
     darkNavbar: "#111827", 
     darkNavbarBorder: "#e5e7eb",
     darkNavbarText: "#9ca3af",

adminforth/spa/src/afcl/Button.vue

@@ -6,7 +6,8 @@
       focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
     :class="{
       'cursor-default opacity-50 pointer-events-none': props.disabled,
-      'active brightness-200 hover:brightness-150'  : props.active
+      'active brightness-200 hover:brightness-150'  : props.active,
+      'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-darkSecondary/60': props.mode === 'secondary',
     }"
   >
     <svg v-if="props.loader"
@@ -18,10 +19,16 @@
 
 <script setup lang="ts">
 
-const props = defineProps({
-  loader: Boolean,
-  disabled: Boolean,
-  active: Boolean,
+const props = withDefaults(defineProps<{
+  loader?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  mode?: 'primary' | 'secondary';
+}>(), {
+  loader: false,
+  disabled: false,
+  active: false,
+  mode: 'primary'
 });
 
 </script>

dev-demo/custom/AfComponents.vue

@@ -5,7 +5,12 @@
       <Checkbox :disabled="false"><p>afdsdfsdfsdgsdgsgdsggdg</p> </Checkbox>
       <Button @click="doSmth" 
         :loader="false" class="w-full">
-        Your button text
+        Primary button
+      </Button>
+
+      <Button @click="doSmth" 
+        :loader="false" class="w-full" mode="secondary">
+        Secondary button
       </Button>
 
       <Button @click="doSmth"