VPR-104 fix(a11y): align CTS button and badge colors to UC Davis brand palette

rlorenzo · rlorenzo · commit cedea923bbb5 · 2026-04-02T11:24:32.000-07:00
- Replace color="green" with color="positive" (Redwood) on ~15 add/create buttons
- Replace color="red"/"red-5"/"red-7" with color="negative" (Merlot) on ~12 delete buttons
- Replace color="blue" with color="primary" on Last Week badges
- Add text-color="dark" to 3 info-colored chips/buttons for AA contrast
- Fix duplicate text-color attributes in CompetenciesBundleReport
- Remove redundant global comments and unused function parameters
diff --git a/VueApp/src/CTS/components/ServiceSelect.vue b/VueApp/src/CTS/components/ServiceSelect.vue
@@ -95,13 +95,13 @@ void getServices()
                     side
                     v-if="scope.opt.thisWeek"
                 >
-                    <q-badge color="green"> This Week </q-badge>
+                    <q-badge color="positive"> This Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
                     v-if="scope.opt.lastWeek && !scope.opt.thisWeek"
                 >
-                    <q-badge color="blue"> Last Week </q-badge>
+                    <q-badge color="primary"> Last Week </q-badge>
                 </q-item-section>
                 <q-item-section
                     side
diff --git a/VueApp/src/CTS/pages/CompetenciesBundleReport.vue b/VueApp/src/CTS/pages/CompetenciesBundleReport.vue
@@ -238,7 +238,7 @@ onMounted(() => {
                                     v-for="bundle in props.value"
                                     :key="bundle.bundleId"
                                     color="info"
-                                    text-color="white"
+                                    text-color="dark"
                                     size="sm"
                                     dense
                                     class="q-ma-xs"
@@ -301,7 +301,7 @@ onMounted(() => {
                                             v-for="bundle in props.row.bundles"
                                             :key="bundle.bundleId"
                                             color="info"
-                                            text-color="white"
+                                            text-color="dark"
                                             size="sm"
                                             dense
                                         >
diff --git a/VueApp/src/CTS/pages/CourseStudents.vue b/VueApp/src/CTS/pages/CourseStudents.vue
@@ -60,7 +60,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
@@ -90,7 +90,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
@@ -120,7 +120,7 @@ const student = ref("")
                             <q-btn
                                 dense
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 flat
                                 size="sm"
                             ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageBundleCompetencies.vue b/VueApp/src/CTS/pages/ManageBundleCompetencies.vue
@@ -206,7 +206,7 @@ load()
             label="Add Group"
             @click="showGroupForm = true"
             class="q-mt-lg q-px-sm"
-            color="green"
+            color="positive"
             icon="add"
         ></q-btn>
         <div
@@ -253,7 +253,7 @@ load()
                         v-if="bundleCompetencyGroup?.bundleCompetencyGroupId"
                         type="button"
                         @click="removeBundleCompetencyGroup()"
-                        color="red-5"
+                        color="negative"
                         dense
                         class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                         label="Delete"
@@ -304,7 +304,7 @@ load()
                     type="submit"
                     label="Add"
                     icon="add"
-                    color="green"
+                    color="positive"
                     class="col-auto q-ml-md q-px-sm"
                 ></q-btn>
             </div>
@@ -423,7 +423,7 @@ load()
                 <q-icon
                     v-if="props.row.levels.findIndex((l: any) => l.levelId === level.levelId) > -1"
                     name="check"
-                    color="green"
+                    color="positive"
                 ></q-icon>
             </q-td>
         </template>
@@ -441,7 +441,7 @@ load()
                     dense
                     size="sm"
                     icon="delete"
-                    color="red-5"
+                    color="negative"
                     @click="removeBundleCompetency(props.row)"
                 ></q-btn>
             </q-td>
diff --git a/VueApp/src/CTS/pages/ManageBundles.vue b/VueApp/src/CTS/pages/ManageBundles.vue
@@ -150,7 +150,7 @@ load()
                     v-if="bundle?.bundleId"
                     type="button"
                     @click="removeBundle()"
-                    color="red-5"
+                    color="negative"
                     dense
                     class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                     label="Delete"
@@ -211,7 +211,7 @@ load()
                 <q-icon
                     v-if="props.row.clinical"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -220,7 +220,7 @@ load()
                 <q-icon
                     v-if="props.row.assessment"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
@@ -229,7 +229,7 @@ load()
                 <q-icon
                     v-if="props.row.milestone"
                     name="check"
-                    color="green"
+                    color="positive"
                 />
             </q-td>
         </template>
diff --git a/VueApp/src/CTS/pages/ManageCompetencies.vue b/VueApp/src/CTS/pages/ManageCompetencies.vue
@@ -210,7 +210,7 @@ load()
                         no-caps
                         label="Delete"
                         v-if="selectedComp.competencyId != null"
-                        color="red-5"
+                        color="negative"
                         class="q-px-md q-mx-md col"
                         @click="deleteComp()"
                     ></q-btn>
@@ -254,7 +254,7 @@ load()
                 dense
                 no-caps
                 class="q-px-sm q-ml-md"
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 @click="showForm = true"
@@ -280,7 +280,7 @@ load()
                         flat
                         size="sm"
                         icon="add"
-                        color="green"
+                        color="positive"
                         @click="addChild(prop.node.comp)"
                         title="Add child of this competency"
                     ></q-btn>
@@ -305,7 +305,7 @@ load()
                     }}</span>
                     <q-icon
                         name="school"
-                        color="green"
+                        color="positive"
                         v-if="prop.node.comp.canLinkToStudent"
                         class="q-ml-md"
                     ></q-icon>
diff --git a/VueApp/src/CTS/pages/ManageDomains.vue b/VueApp/src/CTS/pages/ManageDomains.vue
@@ -107,7 +107,7 @@ getDomains()
                 label="Delete"
                 no-caps
                 dense
-                color="red-7"
+                color="negative"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
             <q-btn
@@ -117,6 +117,7 @@ getDomains()
                 no-caps
                 dense
                 color="info"
+                text-color="dark"
                 class="col col-4 col-lg-1 q-ml-md"
             ></q-btn>
         </div>
diff --git a/VueApp/src/CTS/pages/ManageEpas.vue b/VueApp/src/CTS/pages/ManageEpas.vue
@@ -152,7 +152,7 @@ getEpas()
                 no-caps
                 type="button"
                 label="Delete EPA"
-                color="red"
+                color="negative"
                 @click="deleteEpa()"
                 v-if="epa?.epaId"
                 class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
@@ -166,7 +166,7 @@ getEpas()
             no-caps
             size="md"
             label="Add EPA"
-            color="green"
+            color="positive"
             @click="showForm = true"
         />
     </div>
diff --git a/VueApp/src/CTS/pages/ManageLevels.vue b/VueApp/src/CTS/pages/ManageLevels.vue
@@ -186,7 +186,7 @@ loadLevels()
                     no-caps
                     type="button"
                     label="Delete Level"
-                    color="red"
+                    color="negative"
                     class="q-mt-sm q-ml-lg col col-4 col-md-1"
                     @click="deleteLevel"
                 ></q-btn>
diff --git a/VueApp/src/CTS/pages/ManageMilestones.vue b/VueApp/src/CTS/pages/ManageMilestones.vue
@@ -125,7 +125,7 @@ load()
                     icon="add"
                     label="Add Milestone"
                     type="submit"
-                    color="green"
+                    color="positive"
                 ></q-btn>
             </div>
         </div>
diff --git a/VueApp/src/CTS/pages/ManageRoles.vue b/VueApp/src/CTS/pages/ManageRoles.vue
@@ -71,7 +71,7 @@ load()
                 v-if="role?.roleId"
                 type="button"
                 @click="removeRole()"
-                color="red-5"
+                color="negative"
                 dense
                 class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
                 label="Delete"
diff --git a/VueApp/src/CTS/pages/ManageSessionCompetencies.vue b/VueApp/src/CTS/pages/ManageSessionCompetencies.vue
@@ -276,7 +276,7 @@ if (!courseId || !sessionId) {
             <q-btn
                 dense
                 no-caps
-                color="green"
+                color="positive"
                 icon="add"
                 label="Add Competency"
                 class="q-px-md"
@@ -325,7 +325,7 @@ if (!courseId || !sessionId) {
                                 <td>
                                     <q-icon
                                         name="check"
-                                        color="green"
+                                        color="positive"
                                         v-if="lc.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                     ></q-icon>
                                 </td>
@@ -346,7 +346,7 @@ if (!courseId || !sessionId) {
                             <td class="text-center">
                                 <q-icon
                                     name="check"
-                                    color="green"
+                                    color="positive"
                                     v-if="c.levels.findIndex((l: Level) => l.levelName == level) >= 0"
                                 ></q-icon>
                             </td>
@@ -364,7 +364,7 @@ if (!courseId || !sessionId) {
                                 dense
                                 size="sm"
                                 icon="delete"
-                                color="red-5"
+                                color="negative"
                                 @click="delComp(c)"
                             ></q-btn>
                         </td>
diff --git a/web/Areas/CTS/Views/Epa.cshtml b/web/Areas/CTS/Views/Epa.cshtml
@@ -16,10 +16,10 @@
                     <template v-slot:option="scope">
                         <q-item v-bind="scope.itemProps">
                             <q-item-section side v-if="serviceThisWeek == scope.opt.value">
-                                <q-badge color="green">This Week</q-badge>
+                                <q-badge color="positive">This Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="serviceLastWeek == scope.opt.value">
-                                <q-badge color="blue">Last Week</q-badge>
+                                <q-badge color="primary">Last Week</q-badge>
                             </q-item-section>
                             <q-item-section side v-if="servicesScheduled.indexOf(scope.opt.value) >= 0">
                                 <q-badge color="yellow">Scheduled</q-badge>
@@ -284,7 +284,7 @@
                         this.success = true
                     }
                 },
-                studentSearch: function (val, update, _abort) {
+                studentSearch: function (val, update) {
                     if (val === '') {
                         update(() => this.getStudents())
                         return
@@ -315,7 +315,7 @@
                 },
                 //set student list when student type is selected
                 studentOptionsType: {
-                    handler(_v) {
+                    handler() {
                         this.getStudents()
                     }
                 },
diff --git a/web/Areas/CTS/Views/ManageEpas.cshtml b/web/Areas/CTS/Views/ManageEpas.cshtml
@@ -33,7 +33,7 @@
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
-        <q-btn dense no-caps type="button" label="Delete EPA" color="red" @@click="deleteEpa()"
+        <q-btn dense no-caps type="button" label="Delete EPA" color="negative" @@click="deleteEpa()"
                v-if="epa?.epaId"
                class="q-mt-sm q-ml-lg col col-4 col-md-4 col-lg-1"
 ></q-btn>
@@ -43,7 +43,7 @@
 
 <h3>
     Add New EPA
-    <q-btn no-caps size="md" label="Add EPA" color="green" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
+    <q-btn no-caps size="md" label="Add EPA" color="positive" @@click="this.showForm=true" class="q-ml-sm"></q-btn>
 </h3>
 
 <q-list separator>
@@ -94,7 +94,6 @@
 
 @section Scripts {
     <script asp-add-nonce="true">
-        /* global createVueApp, viperFetch */
         createVueApp({
             data() {
                 return {
diff --git a/web/Areas/CTS/Views/ManageLevels.cshtml b/web/Areas/CTS/Views/ManageLevels.cshtml
@@ -21,7 +21,7 @@
         </div>
         <div class="row">
             <q-btn dense no-caps type="submit" :label="(level?.levelId ? 'Update' : 'Add') + ' Level'" color="primary" class="q-mt-sm col col-4 col-md-1"></q-btn>
-            <q-btn dense no-caps type="button" label="Delete Level" color="red" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
+            <q-btn dense no-caps type="button" label="Delete Level" color="negative" class="q-mt-sm q-ml-lg col col-4 col-md-1"></q-btn>
         </div>
     </div>
 
