activist-org#665 change special-text to distinct-text + headwind clas…

…s ordering

frontend/assets/css/tailwind.css

@@ -10,7 +10,7 @@
     @apply bg-light-header dark:bg-dark-header;
   }
   * {
-    @apply scrollbar scrollbar-w-2 scrollbar-thumb-light-special-text dark:scrollbar-thumb-dark-special-text scrollbar-track-transparent scrollbar-thumb-rounded-md;
+    @apply scrollbar scrollbar-w-2 scrollbar-thumb-light-distinct-text dark:scrollbar-thumb-dark-distinct-text scrollbar-track-transparent scrollbar-thumb-rounded-md;
   }
 }
 

frontend/components/PasswordStrengthIndicator.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-4">
-    <div class="h-1 bg-light-special-text dark:bg-dark-special-text rounded-md">
+    <div class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md">
       <div
         class="h-1 transition-width ease-in duration-500 rounded-md"
         :class="!!passwordValue.length ? `${color}` : ''"
@@ -10,7 +10,7 @@
     <div
       class="float-right mt-1 text-xs"
       :class="{
-        'text-light-special-text dark:text-dark-special-text':
+        'text-light-distinct-text dark:text-dark-distinct-text':
           color !== 'bg-light-text dark-bg-dark-text',
         'text-light-text dark:text-dark-text':
           color === 'bg-light-text dark-bg-dark-text',

frontend/components/SearchBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="location == 'sidebar'"
-    class="flex justify-between grow items-center pl-[12px] py-1 mx-2 text-left transition duration-200 rounded-md select-none text-light-special-text dark:text-dark-special-text focus-within:border-light-link-text focus-within:border-2 dark:focus-within:border-dark-link-text focus-within:mb-[-3px] bg-light-header dark:bg-dark-header elem-shadow-sm"
+    class="flex justify-between grow items-center pl-[12px] py-1 mx-2 text-left transition duration-200 rounded-md select-none text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-link-text focus-within:border-2 dark:focus-within:border-dark-link-text focus-within:mb-[-3px] bg-light-header dark:bg-dark-header elem-shadow-sm"
   >
     <div class="flex items-center pl-1 space-x-2">
       <Icon class="flex-shrink-0 w-4 h-4 my-1" name="bi:search" size="1em" />
@@ -25,7 +25,7 @@
         class="flex pr-1 space-x-1 transition-opacity transition-duration-200"
       >
         <div
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -35,7 +35,7 @@
         </div>
         <div
           v-if="$device.isMacOS"
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -45,7 +45,7 @@
         </div>
         <div
           v-else
-          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+          class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
         >
           <TooltipBase
             class="invisible -mt-8"
@@ -58,7 +58,7 @@
   </div>
   <div
     v-else
-    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-special-text dark:border-dark-special-text text-light-special-text dark:text-dark-special-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange"
+    class="relative inline-flex items-center pl-[12px] pr-[10px] py-1 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-distinct-text dark:border-dark-distinct-text text-light-distinct-text dark:text-dark-distinct-text focus-within:border-light-cta-orange focus-within:border-2 dark:focus-within:border-dark-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"

frontend/components/card/CardAbout.vue

@@ -12,7 +12,7 @@
           emit('expand-reduce-text');
           expand_reduce_text();
         "
-        class="absolute right-0 p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+        class="absolute right-0 p-1 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
       >
         <Icon class="w-10 h-10" name="bi:x-circle-fill" />
       </button>

frontend/components/card/CardLegalDisclaimer.vue

@@ -17,7 +17,7 @@
         class="py-2 mt-2 border-t focus-within:border-0 border-light-section-div dark:border-dark-section-div"
       >
         <p
-          class="text-left select-text text-light-special-text dark:text-dark-special-text"
+          class="text-left select-text text-light-distinct-text dark:text-dark-distinct-text"
         >
           {{ disclaimer }}
         </p>

frontend/components/card/CardTopicSelection.vue

@@ -13,7 +13,7 @@
       id="query"
       :display-value="() => query"
       :placeholder="$t('components.card-topic-selection.selector-placeholder')"
-      class="w-full py-2 pl-4 topicInput rounded-md text-light-special-text dark:text-dark-special-text bg-light-content dark:bg-dark-content elem-shadow-sm focus-brand"
+      class="w-full py-2 pl-4 topicInput rounded-md text-light-distinct-text dark:text-dark-distinct-text bg-light-content dark:bg-dark-content elem-shadow-sm focus-brand"
     />
     <ul class="hidden gap-2 sm:flex sm:flex-wrap">
       <ShieldTopic

frontend/components/card/discussion/CardDiscussionInput.vue

@@ -97,7 +97,7 @@
         <textarea
           id="message"
           rows="4"
-          class="block p-2.5 w-full text-sm text-light-text rounded-lg border border-light-section-div placeholder-light-special-text dark:placeholder-dark-special-text dark:text-dark-text dark:bg-dark-distinct focus-brand"
+          class="block p-2.5 w-full text-sm text-light-text rounded-lg border border-light-section-div placeholder-light-distinct-text dark:placeholder-dark-distinct-text dark:text-dark-text dark:bg-dark-distinct focus-brand"
           :placeholder="$t('components.card-discussion-input.leave-comment')"
         ></textarea>
       </div>

frontend/components/combobox/ComboboxTopics.vue

@@ -34,7 +34,7 @@
           >
             <div
               v-if="filteredTopics.length === 0 && query !== ''"
-              class="relative px-4 py-2 cursor-default select-none text-light-special-text dark:text-dark-special-text"
+              class="relative px-4 py-2 cursor-default select-none text-light-distinct-text dark:text-dark-distinct-text"
             >
               {{ $t("components.combobox-topics.no-matching-topics") }}
             </div>

frontend/components/dropdown/DropdownDateFilter.vue

@@ -29,15 +29,15 @@
               <li
                 class="relative py-2 pl-10 pr-4 cursor-default select-none"
                 :class="{
-                  'bg-light-highlight dark:bg-dark-header text-light-cta-orange dark:text-dark-special-text':
+                  'bg-light-highlight dark:bg-dark-header text-light-cta-orange dark:text-dark-distinct-text':
                     active,
                   'text-light-distinct dark:text-dark-distinct': !active,
                 }"
               >
                 <span class="block truncate">{{ option }}</span>
                 <span
                   v-if="selected"
-                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-light-cta-orange dark:text-dark-special-text"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-light-cta-orange dark:text-dark-distinct-text"
                 >
                   <Icon name="bi:check-lg" />
                 </span>

frontend/components/footer/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="responsive-px-5 responsive-py-5 bg-light-header dark:bg-dark-header text-light-special-text dark:text-dark-special-text"
+    class="responsive-px-5 responsive-py-5 bg-light-header dark:bg-dark-header text-light-distinct-text dark:text-dark-distinct-text"
   >
     <!-- Note: Content Sections Top for Mobile -->
     <FooterFlexCol class="flex flex-col lg:hidden" :links="links" />

frontend/components/form/FormSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center pl-[12px] pr-[10px] py-2 h-9 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-interactive dark:border-dark-interactive text-light-special-text dark:text-dark-special-text"
+    class="flex items-center pl-[12px] pr-[10px] py-2 h-9 space-x-2 text-left border rounded-md select-none bg-light-header dark:bg-dark-header border-light-interactive dark:border-dark-interactive text-light-distinct-text dark:text-dark-distinct-text"
   >
     <Icon class="flex-shrink-0 w-4 h-4 my-1" name="bi:search" size="1em" />
     <input

frontend/components/form/FormTextField.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center pl-[12px] pr-[10px] py-2 max-h-[40px] space-x-2 text-left border rounded select-none text-light-special-text dark:text-dark-special-text"
+    class="flex items-center pl-[12px] pr-[10px] py-2 max-h-[40px] space-x-2 text-left border rounded select-none text-light-distinct-text dark:text-dark-distinct-text"
     :class="{
       'border-light-action-red dark:border-dark-action-red': error,
       'border-light-interactive dark:border-dark-interactive': !error,
@@ -11,7 +11,7 @@
       @blur="emit('blurred')"
       @focus="emit('focused')"
       :id="uuid"
-      class="w-full h-5 bg-transparent outline-none placeholder:text-light-special-text dark:placeholder:text-dark-special-text"
+      class="w-full h-5 bg-transparent outline-none placeholder:text-light-distinct-text dark:placeholder:text-dark-distinct-text"
       :value="modelValue"
       :placeholder="placeholder"
       :type="refInputType"

frontend/components/form/checkbox/FormCheckboxBtn.vue

@@ -5,7 +5,7 @@
       'bg-light-menu-selection dark:bg-dark-menu-selection text-light-distinct dark:text-dark-distinct':
         modelValue && !customColor,
       [customColorClass]: modelValue && customColor,
-      'bg-light-header text-light-special-text dark:text-dark-special-text dark:bg-dark-header':
+      'bg-light-header text-light-distinct-text dark:text-dark-distinct-text dark:bg-dark-header':
         !modelValue,
       'hover:bg-light-hover dark:hover:bg-dark-hover': !modelValue,
     }"

frontend/components/form/radio/FormRadioBtn.vue

@@ -5,7 +5,7 @@
       'bg-light-menu-selection dark:bg-dark-menu-selection text-light-distinct dark:text-dark-distinct':
         modelValue === value && !customColor,
       [customColorClass]: modelValue === value && customColor,
-      'bg-light-header text-light-special-text dark:text-dark-special-text dark:bg-dark-header':
+      'bg-light-header text-light-distinct-text dark:text-dark-distinct-text dark:bg-dark-header':
         modelValue !== value,
     }"
   >

frontend/components/form/radio/FormRadioGroup.vue

@@ -23,7 +23,7 @@
         v-if="showAdditionalInput"
         v-model="customValue"
         @input="inputDebounce"
-        class="flex-1 w-full pl-4 pr-2 font-bold border border-r-0 outline-none border-light-interactive rounded-l-md bg-light-header dark:bg-dark-header dark:border-dark-interactive text-light-special-text dark:text-dark-special-text"
+        class="flex-1 w-full pl-4 pr-2 font-bold border border-r-0 outline-none border-light-interactive rounded-l-md bg-light-header dark:bg-dark-header dark:border-dark-interactive text-light-distinct-text dark:text-dark-distinct-text"
         :type="customValueType"
         :placeholder="
           $t('components.form-radio-group.custom-numeric-value-placeholder')
@@ -33,7 +33,7 @@
         @click="toggleAdditionalInput"
         class="rounded-r-md relative min-w-[3rem] h-9 border border-light-interactive dark:border-dark-interactive focus-brand"
         :class="{
-          'bg-light-header text-light-special-text dark:bg-dark-header dark:text-dark-special-text':
+          'bg-light-header text-light-distinct-text dark:bg-dark-header dark:text-dark-distinct-text':
             !showAdditionalInput,
           'bg-light-menu-selection text-light-distinct dark:bg-dark-menu-selection dark:text-dark-distinct':
             showAdditionalInput,

frontend/components/header/HeaderAppPage.vue

@@ -38,7 +38,7 @@
   >
     <h2
       v-if="headerTagline"
-      class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
+      class="transition-all duration-500 responsive-h4 text-light-distinct-text dark:text-dark-distinct-text"
     >
       {{ headerTagline }}
     </h2>

frontend/components/icon/IconActivist.vue

@@ -3,7 +3,7 @@
     <svg
       class="transition duration-100"
       :class="{
-        'fill-light-text dark:fill-dark-text hover:fill-light-special-text hover:dark:fill-dark-special-text':
+        'fill-light-text dark:fill-dark-text hover:fill-light-distinct-text hover:dark:fill-dark-distinct-text':
           !color,
         '{{color}}': color,
       }"

frontend/components/landing/LandingCommunityBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col w-full space-y-1 sm:space-y-2 xl:space-y-4 responsive-py-4 bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
+    class="flex flex-col w-full space-y-1 sm:space-y-2 xl:space-y-4 responsive-py-4 bg-light-highlight dark:bg-dark-highlight text-light-distinct-text dark:text-dark-distinct-text"
   >
     <div
       class="flex justify-center text-lg space-x-12 sm:space-x-8 xl:space-x-12 xl:text-xl"

frontend/components/landing/LandingContent.vue

@@ -25,7 +25,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -95,7 +95,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full sm:text-left xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -124,7 +124,7 @@
         {{ $t(header) }}
       </h2>
       <p
-        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+        class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(tagline) }}
       </p>
@@ -158,7 +158,7 @@
       </div>
       <p
         v-if="subText"
-        class="pt-8 mx-12 text-center md:max-w-md lg:max-w-lg xl:pt-12 text-light-special-text dark:text-dark-special-text"
+        class="pt-8 mx-12 text-center md:max-w-md lg:max-w-lg xl:pt-12 text-light-distinct-text dark:text-dark-distinct-text"
       >
         {{ $t(subText) }}
       </p>

frontend/components/landing/LandingTechBanner.vue

@@ -8,7 +8,7 @@
       {{ $t("components.landing-tech-banner.open-source-header") }}
     </h2>
     <p
-      class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-special-text dark:text-dark-special-text"
+      class="w-10/12 text-base tracking-wider text-center uppercase sm:text-lg sm:w-full xl:text-xl text-transform: text-light-distinct-text dark:text-dark-distinct-text"
     >
       {{ $t("components.landing-tech-banner.open-source-tagline") }}
     </p>

frontend/components/logo/LogoActivist.vue

@@ -5,7 +5,7 @@
     :aria-label="$t('components.logo-activist.aria-label')"
   >
     <svg
-      class="transition duration-100 fill-light-text dark:fill-dark-text hover:fill-light-special-text hover:dark:fill-dark-special-text"
+      class="transition duration-100 fill-light-text dark:fill-dark-text hover:fill-light-distinct-text hover:dark:fill-dark-distinct-text"
       :class="{ 'w-28 h-7': isMobile, color }"
       width="3000"
       height="647"

frontend/components/logo/LogoImpactHub.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="80"
     height="80"
     viewBox="0 0 80 80"

frontend/components/logo/LogoWikimediaDE.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="992"
     height="992"
     viewBox="0 0 992 992"

frontend/components/logo/LogoWikimediaRS.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="fill-light-special-text dark:fill-dark-special-text"
+    class="fill-light-distinct-text dark:fill-dark-distinct-text"
     width="322"
     height="386"
     viewBox="0 0 322 386"

frontend/components/media/MediaVideo.vue

@@ -3,7 +3,7 @@
     class="flex items-center justify-center w-full h-full card-style bg-light-placeholder dark:bg-dark-placeholder"
   >
     <div
-      class="p-6 rounded-full md:p-8 bg-light-special-text dark:bg-dark-menu-selection"
+      class="p-6 rounded-full md:p-8 bg-light-distinct-text dark:bg-dark-menu-selection"
     >
       <Icon
         name="bi:camera-video"

frontend/components/menu/MenuNavigationDropdown.vue

@@ -51,7 +51,7 @@
                     !selected && active,
                   'text-light-distinct dark:text-dark-distinct fill-light-distinct dark:fill-dark-distinct':
                     !active && menuEntry.active,
-                  'text-light-special-text dark:text-dark-special-text fill-light-special-text dark:fill-dark-special-text':
+                  'text-light-distinct-text dark:text-dark-distinct-text fill-light-distinct-text dark:fill-dark-distinct-text':
                     !active && !menuEntry.active,
                 }"
               >

frontend/components/modal/ModalBase.vue

@@ -28,15 +28,15 @@
         <button
           v-if="imageModal"
           @click="closeModal"
-          class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+          class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
           :aria-label="$t('components.modal-image.close-modal-aria-label')"
         >
           <Icon class="w-10 h-10" name="bi:x-circle-fill" />
         </button>
         <div v-else class="relative">
           <button
             @click="closeModal"
-            class="absolute right-0 p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
+            class="absolute right-0 p-1 rounded-full text-light-distinct-text dark:text-dark-distinct-text hover:text-light-text hover:dark:text-dark-text focus-brand"
           >
             <Icon class="w-10 h-10" name="bi:x-circle-fill" />
           </button>

frontend/components/modal/ModalCommandPalette.vue

@@ -6,7 +6,7 @@
     </template>
     <template #modalDisplay>
       <div
-        class="flex w-[90%] justify-between grow items-center my-2.5 text-left transition duration-200 rounded-md select-none text-light-special-text dark:text-dark-special-text focus-inside bg-light-header dark:bg-dark-header elem-shadow-sm py-1 px-2"
+        class="flex w-[90%] justify-between grow items-center my-2.5 text-left transition duration-200 rounded-md select-none text-light-distinct-text dark:text-dark-distinct-text focus-inside bg-light-header dark:bg-dark-header elem-shadow-sm py-1 px-2"
       >
         <div class="flex items-center pl-1 space-x-2">
           <Icon name="bi:search" size="1em" />