feat: accessibility APCA

client/components/Alert.story.vue

@@ -9,14 +9,14 @@
   >
     <Variant title="Warning Alert" theme="light">
       <Alert variant="warning" heading="This alert is a warning">
-        <p class="text-sm">
+        <p class="text-base">
           For more information, please refer to the documentation
         </p>
       </Alert>
     </Variant>
     <Variant title="Info Alert">
       <Alert variant="info" heading="This RFC is now obsolete">
-        <p class="text-sm">
+        <p class="text-base">
           For more information, please refer to the documentation
         </p>
       </Alert>

client/components/DateYearMonthRange.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset>
-    <legend class="text-sm font-bold mb-1">{{ props.label }}</legend>
+    <legend class="text-base font-bold mb-1">{{ props.label }}</legend>
     <div class="flex gap-2">
       <YearMonthDropdown
         v-model="startValue"

client/components/DiamondText.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'inline-flex flex-col justify-center items-center bg-yellow-400 dark:bg-yellow-800 text-black dark:text-white text-xs uppercase font-semibold',
+      'inline-flex flex-col justify-center items-center bg-yellow-400 dark:bg-yellow-800 text-black dark:text-white text-base uppercase font-semibold',
       {
         'w-[20px] h-[20px] [clip-path:polygon(0%_50%,_50%_0%,_50%_0%,100%_50%,50%_100%,50%_100%)]':
           props.text.length === 1,

client/components/Footer.vue

@@ -35,7 +35,7 @@
             <li
               v-for="(child, childIndex) in menuItem.children"
               :key="childIndex"
-              class="text-sm"
+              class="text-base"
             >
               <a
                 :href="child.href"

client/components/HeaderNavThemeDesktop.vue

@@ -24,7 +24,7 @@
       <HeadlessListboxOptions
         class="absolute z-10 right-0 bg-white text-black dark:bg-black dark:text-white dark:border-2 mt-1 w-[10em] top-[40px] max-h-60 rounded-md py-1 shadow-lg"
       >
-        <div class="text-sm font-bold pl-4 pr-2 py-1">Select theme:</div>
+        <div class="text-base font-bold pl-4 pr-2 py-1">Select theme:</div>
         <HeadlessListboxOption
           v-for="colorPreference in colorPreferences"
           :key="colorPreference.value"

client/components/Heading.vue

@@ -51,6 +51,6 @@ const headingStyles: Record<`h${Props['level']}`, string> = {
   h3: 'text-xl font-bold',
   h4: 'text-lg font-bold',
   h5: 'text-base font-bold',
-  h6: 'text-xs font-bold'
+  h6: 'text-base font-bold'
 }
 </script>

client/components/RFCCard.vue

@@ -20,15 +20,15 @@
     </div>
     <ul
       v-if="props.body"
-      class="hidden lg:block text-sm text-blue-900 dark:text-white"
+      class="hidden lg:block text-base text-blue-900 dark:text-white"
     >
       <li v-for="(part, index) in props.body" :key="index" class="inline">
         <GraphicsDiamond v-if="index > 0" />{{ part }}
       </li>
     </ul>
     <ul
       v-if="props.footer"
-      class="hidden lg:block text-xs text-gray-800 mt-1 dark:text-white"
+      class="hidden lg:block text-base text-gray-800 mt-1 dark:text-white"
     >
       <li v-for="(part, index) in props.footer" :key="index" class="inline">
         <GraphicsDiamond v-if="index > 0" />{{ part }}
@@ -41,7 +41,7 @@
           type="button"
           :aria-expanded="isMobileAbstractOpen"
           :aria-controls="abstractDomId"
-          class="relative z-50 text-blue-800 dark:text-blue-100 underline text-sm p-3 -left-3 -top-3 -mb-3"
+          class="relative z-50 text-blue-800 dark:text-blue-100 underline text-base p-3 -left-3 -top-3 -mb-3"
           @click="isMobileAbstractOpen = !isMobileAbstractOpen"
         >
           <template v-if="isMobileAbstractOpen">Hide abstract</template>
@@ -80,7 +80,7 @@
     <p
       v-if="props.redNote"
       :class="[
-        'text-red-700 dark:text-red-300 text-xs',
+        'text-red-700 dark:text-red-300 text-base',
         isMobileAbstractOpen && 'mt-2'
       ]"
     >

client/components/RFCDocumentBody.vue

@@ -61,7 +61,7 @@
     <div v-if="props.errata">
       <button
         type="button"
-        class="text-sm underline text-blue-300 dark:text-blue-100 p-2"
+        class="text-base underline text-blue-300 dark:text-blue-100 p-2"
         @click="gotoErrata"
       >
         {{ props.errata.length }}
@@ -77,7 +77,7 @@
     variant="warning"
     heading="This RFC is now obsolete"
   >
-    <p class="text-sm">
+    <p class="text-base">
       For more information, please refer to
       <a :href="`/info/${props.obsoletedBy}`"
         >{{ obsoletedByRFCId.type }} {{ obsoletedByRFCId.number }}
@@ -91,7 +91,7 @@
     variant="info"
     heading="This RFC updates the following RFC:"
   >
-    <p class="text-sm">
+    <p class="text-base">
       See also
       <a href="/info/rfc9052"
         >RFC 9052 CBOR Object Signing and Encryption (COSE): Structures and
@@ -103,7 +103,7 @@
   <div
     v-for="(page, index) in props.pagesHtml"
     :key="index"
-    class="mt-10 text-[9px] sm:text-xs lg:text-sm"
+    class="mt-10 text-[9px] sm:text-base lg:text-base"
   >
     <div class="font-mono whitespace-pre-wrap px-3 xs:px-0" v-html="page" />
   </div>

client/components/SearchFilterSelect.vue

@@ -1,9 +1,9 @@
 <template>
   <label>
-    <span class="text-sm font-bold block mb-1">{{ props.label }}</span>
+    <span class="text-base font-bold block mb-1">{{ props.label }}</span>
     <select
       v-model="value"
-      class="clear-both text-sm bg-white text-black dark:bg-black dark:text-white dark:border"
+      class="clear-both text-base bg-white text-black dark:bg-black dark:text-white dark:border"
     >
       <option
         v-for="([itemValue, itemLabel], itemIndex) in props.options"

client/components/SearchFilterStatuses.vue

@@ -1,12 +1,12 @@
 <template>
   <fieldset>
-    <legend class="text-sm font-bold mb-2">Status</legend>
+    <legend class="text-base font-bold mb-2">Status</legend>
     <ul class="grid-cols-2 grid gap-1 lg:w-3/4">
       <li
         v-for="(statusLabel, statusValue, statusIndex) in Statuses"
         :key="statusIndex"
       >
-        <label class="text-sm cursor-pointer">
+        <label class="text-base cursor-pointer">
           <input
             class="mr-2"
             type="checkbox"

client/components/SearchMobileFilter.vue

@@ -49,7 +49,7 @@
   <div>
     <button
       type="button"
-      class="flex gap-1 bg-white text-black dark:bg-black dark:text-white text-xs p-3"
+      class="flex gap-1 bg-white text-black dark:bg-black dark:text-white text-base p-3"
       @click="isOpen = true"
     >
       <GraphicsFilter />

client/components/Tag.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'pointer-events-none inline-flex items-center bg-blue-200 dark:bg-blue-800 text-white text-xs uppercase font-semibold',
+      'pointer-events-none inline-flex items-center bg-blue-400 dark:bg-blue-800 text-white text-base uppercase font-semibold',
       props.class,
       {
         '[clip-path:polygon(0%_50%,_6%_0%,_96%_0%,100%_50%,96%_100%,6%_100%)]':
@@ -35,7 +35,7 @@
         </template>
       </span>
       <span
-        class="bg-yellow-400 dark:bg-yellow-700 dark:text-white text-black pl-2 pr-5 py-2"
+        class="bg-yellow-200 dark:bg-yellow-700 dark:text-white text-black pl-2 pr-5 py-2"
       >
         <template v-if="typeof props.text[1] === 'string'">
           {{ props.text[1] }}

client/components/YearMonthDropdown.vue

@@ -3,7 +3,7 @@
     <span class="sr-only">{{ props.label }}</span>
     <select
       v-model="value"
-      class="text-sm bg-white text-black dark:bg-black dark:text-white dark:border"
+      class="text-base bg-white text-black dark:bg-black dark:text-white dark:border"
       :title="props.label"
     >
       <option value="" :disabled="isDisabled" class="text-gray-700">

client/pages/index.vue

@@ -11,7 +11,7 @@
           <Heading level="2" has-icon class="text-left mt-10 pl-5 md:pl-0">
             Latest RFCs
           </Heading>
-          <p class="hidden mt-8 lg:block text-sm text-grey-800 pl-5">
+          <p class="hidden mt-8 lg:block text-base text-grey-800 pl-5">
             Looking for works in progress? Go to
             <a
               href="https://datatracker.ietf.org/"

client/pages/search.vue

@@ -38,11 +38,11 @@
               </template>
             </Heading>
             <div class="hidden lg:block">
-              <label class="text-sm">
+              <label class="text-base">
                 <span>Sort by</span>
                 <select
                   v-model="searchStore.orderBy"
-                  class="text-sm ml-2 bg-white text-black dark:bg-black dark:text-white dark:border"
+                  class="text-base ml-2 bg-white text-black dark:bg-black dark:text-white dark:border"
                 >
                   <option value="lowest">RFC no. (Lowest first)</option>
                   <option value="highest">RFC no. (Highest first)</option>

client/tailwind.config.js

@@ -17,7 +17,11 @@ export default {
           950: '#00101C'
         },
         yellow: {
+          100: '#FFEE66',
+          200: '#FFE459',
           400: '#FFD13E',
+          500: '#E2B72A',
+          600: '#C49C15',
           750: '#A78201'
         }
       }