Update styling

patternfly · Apr 26, 2024 · f51c84a · f51c84a
1 parent bafc9de
commit f51c84a
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 8 deletions.
diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md
@@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
       label="Certified Level"
       value={
         <span>
-          <OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified
+          <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified
         </span>
       }
     />

diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js
diff --git a/...s/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/...s/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js
@@ -77,7 +77,7 @@ pageData.liveContext = {
 pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';"
 pageData.examples = {
   'Properties side panel with property items': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n  <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>\n    <PropertiesSidePanel>\n      <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n      <PropertyItem\n        label=\"Certified Level\"\n        value={\n          <span>\n            <OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified\n          </span>\n        }\n      />\n      <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n      <PropertyItem label=\"Health Index\" value=\"A\" />\n      <PropertyItem\n        label=\"Repository\"\n        value={\n          <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n            https://quay.io/repository/redhat/prometheus-operator\n          </a>\n        }\n      />\n      <PropertyItem\n        label=\"Container Image\"\n        value={\n          <a href=\"#\">\n            0.22.2 <ExternalLinkAltIcon />\n          </a>\n        }\n      />\n      <PropertyItem\n        label=\"Created At\"\n        value={\n          <span>\n            <GlobeIcon /> Aug 23, 1:58pm\n          </span>\n        }\n      />\n      <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n    </PropertiesSidePanel>\n  </div>\n)","title":"Properties side panel with property items","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n  <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>\n    <PropertiesSidePanel>\n      <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n      <PropertyItem\n        label=\"Certified Level\"\n        value={\n          <span>\n            <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified\n          </span>\n        }\n      />\n      <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n      <PropertyItem label=\"Health Index\" value=\"A\" />\n      <PropertyItem\n        label=\"Repository\"\n        value={\n          <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n            https://quay.io/repository/redhat/prometheus-operator\n          </a>\n        }\n      />\n      <PropertyItem\n        label=\"Container Image\"\n        value={\n          <a href=\"#\">\n            0.22.2 <ExternalLinkAltIcon />\n          </a>\n        }\n      />\n      <PropertyItem\n        label=\"Created At\"\n        value={\n          <span>\n            <GlobeIcon /> Aug 23, 1:58pm\n          </span>\n        }\n      />\n      <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n    </PropertiesSidePanel>\n  </div>\n)","title":"Properties side panel with property items","lang":"js"}}>
 
     </Example>
 };

diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss
@@ -20,6 +20,6 @@
 }
 
 .catalog-item-header-pf-subtitle {
-  color: var(--pf-v6-global--Color--200);
+  color: var(--pf-t--global--text--color--subtle);
   margin-bottom: 0;
 }
diff --git a/packages/module/sass/react-catalog-view-extension/_variables.scss b/packages/module/sass/react-catalog-view-extension/_variables.scss
@@ -1,5 +1,5 @@
-$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default;
-$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default;
+$vertical-tab-pf-color: var(--pf-t--global--text--color--regular) !default;
+$vertical-tab-pf-active-color: var(--pf-t--global--text--color--brand--clicked) !default;
 
 :root {
   --vertical-tab-pf-color: #{$vertical-tab-pf-color};

diff --git a/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss b/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss
@@ -13,7 +13,7 @@
   position: relative;
 
   > a {
-    color: var(--vertical-tab-pf-color);
+    color: var( --pf-t--global--text--color--regular);
     display: inline-block;
     font-size: 13px;
     padding: 3px 6px 3px 15px;

diff --git a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx
@@ -28,7 +28,7 @@ export const CatalogTileBadge: React.FunctionComponent<CatalogTileBadgeProps> =
         <Tooltip id={id} content={title}>
           <span className={classes} {...props}>
             {children}
-            <span className="pf-v6-u-screen-reader">{title}</span>
+            <span className="pf-v6-screen-reader">{title}</span>
           </span>
         </Tooltip>
       </React.Fragment>