From c034dc81b2cd6a1708defd5f6ff81f8c4a8646a8 Mon Sep 17 00:00:00 2001 From: Nana Poku Date: Tue, 19 Dec 2023 17:00:41 -0500 Subject: [PATCH 1/2] WCMS-9877: Proposed changes fixes color contrast issues noted in WCMS-6698 and WCMS-8942. --- src/components/ApiDocumentation/index.jsx | 1 + src/templates/APIPage/APIPage.jsx | 1 + .../APIPage/swagger-ui-overrides.scss | 87 +++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 src/templates/APIPage/swagger-ui-overrides.scss diff --git a/src/components/ApiDocumentation/index.jsx b/src/components/ApiDocumentation/index.jsx index 88c0019a..4668d39c 100644 --- a/src/components/ApiDocumentation/index.jsx +++ b/src/components/ApiDocumentation/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; +import '../../templates/APIPage/swagger-ui-overrides.scss'; const ApiDocumentation = ({ endpoint }) => { return ( diff --git a/src/templates/APIPage/APIPage.jsx b/src/templates/APIPage/APIPage.jsx index e3c54c9b..4c087415 100644 --- a/src/templates/APIPage/APIPage.jsx +++ b/src/templates/APIPage/APIPage.jsx @@ -2,6 +2,7 @@ import React from 'react'; import qs from 'qs'; import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; +import './swagger-ui-overrides.scss'; const APIPage = ({ hideAuth, additionalParams, rootUrl }) => { const hasACA = additionalParams && additionalParams.ACA ? true : false; diff --git a/src/templates/APIPage/swagger-ui-overrides.scss b/src/templates/APIPage/swagger-ui-overrides.scss new file mode 100644 index 00000000..9bdc4d63 --- /dev/null +++ b/src/templates/APIPage/swagger-ui-overrides.scss @@ -0,0 +1,87 @@ +/* +This document provides overrides to Swagger UI, fixing accessibility issues. +*/ + +:root { + //Colors + --su-color--blue-dark: rgb(0, 51, 102); + --su-color--brown: rgba(136, 76, 0, 1); + --su-color--green-dark: rgb(0, 118, 65); + --su-color--green-muted: rgb(39, 117, 100); + --su-color--orange-dark: rgb(209, 0, 0); + --su-color--orange-light: rgba(209, 0, 0, .1); + --su-color--red-dark: rgb(151, 0, 0); + --su-color--red-light: rgba(211, 0, 0, .1); + --su-color--red: rgb(211, 0, 0); +} + +// State `.swagger-ui` twice to include specificity and avoid multiple `!important` statements; +.swagger-ui.swagger-ui { + .opblock { + .opblock-summary-method { + color: #333; + } + + &.opblock-delete { + background-color: var(--su-color--red-light); + border-color: var(--su-color--red); + + .opblock-summary-method { + color: white; + + background-color: var(--su-color--red-dark); + } + } + + &.opblock-put { + .opblock-summary-method { + background-color: var(--su-color--brown); + color: white; + } + } + } + + .parameter__name { + &.required { + span { + color: var(--su-color--red); + } + + &:after { + color: var(--su-color--red); + } + } + } + + .btn { + &.cancel { + border-color: var(--su-color--red); + color: var(--su-color--red); + } + + &.authorize { + border-color: var(--su-color--green-muted); + background-color: var(--su-color--green-muted); + } + + &.execute { + background-color: var(--su-color--blue-dark) + } + } + + .info { + .title { + small { + background-color: #666; + + &.version-stamp { + background-color: #005830; + } + } + } + + a { + color: #036; + } + } +} From 9856ae83285e7b32ea19581dab6e61f5f7178d1f Mon Sep 17 00:00:00 2001 From: Bethany Dunfield Date: Thu, 11 Jan 2024 10:01:16 -0700 Subject: [PATCH 2/2] Bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0e8a35b..d9272f7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@civicactions/cmsds-open-data-components", - "version": "2.2.0", + "version": "2.2.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@civicactions/cmsds-open-data-components", - "version": "2.2.0", + "version": "2.2.1", "license": "GPL-3.0", "dependencies": { "@popperjs/core": "^2.11.6", diff --git a/package.json b/package.json index 78300e94..2440cf78 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@civicactions/cmsds-open-data-components", - "version": "2.2.0", + "version": "2.2.1", "description": "Components for the open data catalog frontend using CMS Design System", "main": "dist/main.js", "source": "src/index.ts",