fix: remove uppercase styles (#2160)

* chore: Removed CSS that forces headings to be in all caps

* changeset added

* docs: update neat-keys-sleep.md

* chore: updated the text transform properties

* chore: changeset update

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

.changeset/neat-keys-sleep.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tile>`:  
+`<rh-stat>`: 
+`<rh-card>`: 
+`<rh-icon>`: no longer force headings to be in all caps

docs/patterns/card/patterns/asset-title-and-link-top.html

@@ -24,7 +24,6 @@ <h4>Title, Lg</h4>
       font-size: var(--rh-font-size-body-text-md, 1rem);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text, 1.5);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/asset-title-and-link.html

@@ -40,7 +40,6 @@ <h4>
       font-size: var(--rh-font-size-body-text-md, 1rem);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text, 1.5);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/fast-facts.html

@@ -58,7 +58,6 @@ <h4>Title, lg</h4>
       font-size: var(--rh-font-size-body-text-md);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/title-bar.html

@@ -19,7 +19,6 @@ <h4 slot="header">Card title</h4>
       font-weight: var(--rh-font-weight-heading-regular);
       font-size: var(--rh-font-size-body-text-md);
       font-family: var(--rh-font-family-body-text);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/styles/not-defined.css

@@ -8,7 +8,6 @@ uxdot-hero:not(:defined) {
 uxdot-hero:not(:defined) [slot='header'] {
   color: var(--rh-color-text-brand-on-light);
   margin-block-end: 0;
-  text-transform: uppercase;
   font-weight: var(--rh-font-weight-code-medium);
   font-size: var(--rh-font-size-code-lg) !important;
 }

docs/styles/tokens-pages.css

@@ -35,7 +35,6 @@ rh-card.swatches {
     font-weight: inherit !important;
     font-size: inherit !important;
     font-family: inherit !important;
-    text-transform: uppercase;
 
     /* deprecated? */
   }

elements/rh-button/demo/form-control.html

@@ -34,10 +34,6 @@
   form h2 {
     width: 100%;
   }
-
-  form output {
-    text-transform: capitalize;
-  }
 </style>
 
 <script type="module">

elements/rh-card/demo/color-context.html

@@ -97,7 +97,6 @@ <h2 slot="header">Custom header</h2>
         font-weight: var(--rh-font-weight-heading-regular);
         font-size: var(--rh-font-size-body-text-md);
         font-family: var(--rh-font-family-body-text);
-        text-transform: uppercase; /* deprecated? */
       }
     }
   }

elements/rh-card/demo/sticky-pattern.html

@@ -35,7 +35,6 @@ <h2 slot="header">Heading, xs</h2>
       & .title {
         font-family: var(--rh-font-family-body-text);
         font-size: var(--rh-font-size-body-text-md);
-        text-transform: uppercase;
       }
       & > p {
         margin-block: 0;

elements/rh-card/demo/title-pattern.html

@@ -60,7 +60,6 @@ <h2 slot="header">Title, lg</h2>
         flex-flow: column;
       }
       & h2 {
-        text-transform: uppercase;
         font-family: var(--rh-font-family-body-text);
         font-size: var(--rh-font-size-body-text-md);
         font-weight: var(--rh-font-weight-body-text-regular);

elements/rh-card/demo/variants.html

@@ -152,7 +152,6 @@ <h2>Card with slotted image header. Full width image.</h2>
       margin: 0;
       padding: var(--rh-space-lg) var(--rh-space-xl);
       background-color: var(--_header-bg, var(--rh-color-surface-light));
-      text-transform: uppercase;
     }
   }
 

elements/rh-icon/demo/sets.html

@@ -74,10 +74,6 @@ <h2 id="${set}">${set}</h2>
     max-width: 300px;
   }
 
-  h2 {
-    text-transform: capitalize;
-  }
-
   section {
     --rh-tooltip-max-width: 50em;
     --rh-tooltip-content-padding-block-start: 0;

elements/rh-stat/rh-stat.css

@@ -65,7 +65,6 @@ span,
   font-size: var(--rh-font-size-body-text-xl, 1.25rem);
   font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
   font-weight: var(--rh-font-weight-body-text-regular, 400);
-  text-transform: uppercase;
 }
 
 #statistic {

elements/rh-tile/rh-tile.css

@@ -96,7 +96,6 @@
   }
 
   & ::slotted([slot='title']) {
-    text-transform: uppercase;
     font-size: var(--rh-font-size-body-text-md, 1rem) !important;
   }
 

uxdot/uxdot-hero.css

@@ -20,7 +20,7 @@ slot[name='header']::slotted(*) {
 slot[name='header']::slotted(h1) {
   color: var(--rh-color-text-brand-on-light);
   margin-block-end: 0;
-  text-transform: uppercase;
+  text-transform: capitalize;
   font-family: var(--rh-font-family-heading);
   line-height: var(--rh-line-height-heading);
   font-size: var(--rh-font-size-code-lg) !important;