Merge branch 'main' into feat/defineModel-support

src/components/code/CliInstallation.vue

@@ -124,7 +124,7 @@ const { command } = defineProps<{
 .code-block {
   border-radius: 15px;
   overflow: hidden;
-  border: 1px solid #142216;
+  border: 1px solid #333;
 }
 
 :deep(.p-accordionpanel) {
@@ -133,19 +133,19 @@ const { command } = defineProps<{
 
 :deep(.p-accordion-header) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 20px !important;
 }
 
 :deep(.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 15px 15px 0 0;
   border-bottom: none !important;
 }
 
 :deep(.p-accordionpanel:not(.p-disabled) > .p-accordionheader) {
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 15px;
   background: #0b0b0b !important;
 }
@@ -171,14 +171,14 @@ const { command } = defineProps<{
 
 :deep(.p-accordion-content) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-top: none;
   border-radius: 0 0 15px 15px;
 }
 
 :deep(.p-accordioncontent-content) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 0 0 15px 15px;
   border-top: none !important;
 }

src/components/common/PreviewColor.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-    <input :value="color" @input="handleColorChange" type="color" :disabled="props.disabled" class="color-input" />
+    <input :value="color" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ title: string; disabled?: boolean }>();
+defineProps<{
+  title?: string;
+  modelValue: string;
+  disabled?: boolean;
+}>();
+
 const color = defineModel<string>();
 
 const handleColorChange = (event: Event) => {
@@ -19,7 +24,6 @@ const handleColorChange = (event: Event) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .color-label {

src/components/common/PropTable.vue

@@ -92,14 +92,14 @@ defineProps<{
 
 :deep(.p-datatable-header) {
   background: #111;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-bottom: none;
 }
 
 :deep(.p-datatable-thead > tr > th) {
   background: #111;
-  border-right: 1px solid #142216;
-  border-bottom: 1px solid #142216;
+  border-right: 1px solid #333;
+  border-bottom: 1px solid #333;
   color: #fff;
   font-weight: 600;
   text-transform: capitalize;
@@ -114,8 +114,8 @@ defineProps<{
 
 :deep(.p-datatable-tbody > tr > td) {
   background: #0b0b0b;
-  border-right: 1px solid #142216;
-  border-bottom: 1px solid #142216;
+  border-right: 1px solid #333;
+  border-bottom: 1px solid #333;
   color: #fff;
   padding: 1rem;
   font-size: 14px;

src/components/common/RefreshButton.vue

@@ -18,8 +18,8 @@ defineEmits<{
   top: 0.75rem;
   right: 0.75rem;
   z-index: 2;
-  background-color: #111;
-  border: 1px solid #142216;
+  background-color: #0b0b0b;
+  border: 1px solid #333;
   color: white;
   border-radius: 12px;
   padding: 0.5rem;
@@ -29,11 +29,11 @@ defineEmits<{
 .refresh-button:hover {
   background-color: #222 !important;
   color: #fff !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   outline: 1px solid transparent !important;
 }
 
 .refresh-button:active {
-  background-color: #142216;
+  background-color: #0b0b0b;
 }
 </style>

src/components/common/TabbedLayout.vue

@@ -125,8 +125,8 @@ import ContributionSection from './ContributionSection.vue';
 }
 
 :deep(.p-tab[aria-selected='true'] .tab-header) {
-  background: #333333;
-  color: #a7ef9e;
+  background: #222;
+  color: #27ff64;
 }
 
 :deep(.p-tabpanels) {

src/components/landing/Hero/Hero.vue

@@ -31,7 +31,7 @@
         split-type="words"
         :delay="10"
         :duration="1"
-        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+        text="Sixty-plus snippets, ready to be dropped into your Vue projects"
       />
 
       <router-link to="/text-animations/split-text" class="landing-button">