✨ feat(cookie-consent-banner): introduce ::part pseudo selector

packages/cookie-consent-banner-react/README.md

@@ -113,7 +113,11 @@ triggerCookieConsentBanner({ showDetails: true });
 
 ### Styling
 
-The appearance of the component can be influenced by updating the available CSS Properties.
+Styling can be done in two different ways: Either via the availabe CSS Properties or via the [CSS `::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+
+#### Styling with CSS Properties
+
+The appearance of the component can be influenced by updating the availabe CSS Properties. In most cases this is enough customization flexibility but since not every aspect is exposed, you might want to use the [`::part` selectors](#styling-with-the-part-selectors) if you need more flexibility.
 
 ```html
 <style>
@@ -155,6 +159,40 @@ The appearance of the component can be influenced by updating the available CSS
 </style>
 ```
 
+#### Styling with the `::part` selectors
+
+For full control over the styles we provide you these CSS parts to customize completely by your own:
+
+1. `cookie-consent-banner::part(button-accept-all)` for styling the primary button which triggers "Accept All Cookies"
+2. `cookie-consent-banner::part(button-persist-selection)` for styling the secondary button which triggers "Save Selection"
+3. `cookie-consent-banner::part(button-essential-only)` for styling the secondary button which triggers "Only required Cookies"
+4. `cookie-consent-banner::part(checkbox)` for styling the checkboxes
+5. `cookie-consent-banner::part(description-main)` for styling the main description text
+6. `cookie-consent-banner::part(description-settings)` for styling the description text on the expanded settings
+7. `cookie-consent-banner::part(headline)` for styling the headline
+
+```html
+<style>
+  cookie-consent-banner::part(primary-button) {
+    text-transform: uppercase;
+  }
+
+  cookie-consent-banner::part(secondary-button) {
+    text-transform: uppercase;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  }
+
+  cookie-consent-banner::part(checkbox) {
+    accent-color: rgb(24, 251, 107);
+  }
+
+  cookie-consent-banner::part(description),
+  cookie-consent-banner::part(headline) {
+    font-family: "Arial", sans-serif;
+  }
+</style>
+```
+
 ## 🚀 Real World example with Tag Manager and Custom Error Tracking
 
 This example shows how the component could be integrated into your web application.

packages/cookie-consent-banner/README.md

@@ -91,7 +91,11 @@ In order to allow the user to always update its preferences it's possible to tri
 
 ### Styling
 
-The appearance of the component can be influenced by updating the availabe CSS Properties.
+Styling can be done in two different ways: Either via the availabe CSS Properties or via the [CSS `::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+
+#### Styling with CSS Properties
+
+The appearance of the component can be influenced by updating the availabe CSS Properties. In most cases this is enough customization flexibility but since not every aspect is exposed, you might want to use the [`::part` selectors](#styling-with-the-part-selectors) if you need more flexibility.
 
 ```html
 <style>
@@ -133,6 +137,40 @@ The appearance of the component can be influenced by updating the availabe CSS P
 </style>
 ```
 
+#### Styling with the `::part` selectors
+
+For full control over the styles we provide you these CSS parts to customize completely by your own:
+
+1. `cookie-consent-banner::part(button-accept-all)` for styling the primary button which triggers "Accept All Cookies"
+2. `cookie-consent-banner::part(button-persist-selection)` for styling the secondary button which triggers "Save Selection"
+3. `cookie-consent-banner::part(button-essential-only)` for styling the secondary button which triggers "Only required Cookies"
+4. `cookie-consent-banner::part(checkbox)` for styling the checkboxes
+5. `cookie-consent-banner::part(description-main)` for styling the main description text
+6. `cookie-consent-banner::part(description-settings)` for styling the description text on the expanded settings
+7. `cookie-consent-banner::part(headline)` for styling the headline
+
+```html
+<style>
+  cookie-consent-banner::part(primary-button) {
+    text-transform: uppercase;
+  }
+
+  cookie-consent-banner::part(secondary-button) {
+    text-transform: uppercase;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  }
+
+  cookie-consent-banner::part(checkbox) {
+    accent-color: rgb(24, 251, 107);
+  }
+
+  cookie-consent-banner::part(description),
+  cookie-consent-banner::part(headline) {
+    font-family: "Arial", sans-serif;
+  }
+</style>
+```
+
 ## :rocket: Real World Examples
 
 ### ...with Tag Manager

packages/cookie-consent-banner/src/components/cookie-consent-banner/cookie-consent-banner.tsx

@@ -217,24 +217,28 @@ export class CookieConsentBanner {
           tabIndex={-1}
         >
           {Boolean(this.headline) && (
-            <h1 class="cc_headline">{this.headline}</h1>
+            <h1 class="cc_headline" part="headline">
+              {this.headline}
+            </h1>
           )}
           <form>
-            <p class="cc_text">
+            <p class="cc_text" part="description-main">
               <slot />
             </p>
             {Boolean(this.isShownSettings) && (
               <div class="cc_settings">
-                <p class="cc_settings_description">
+                <p part="description-settings" class="cc_settings_description">
                   {this.contentSettingsDescription}
                 </p>
                 <div class="cc_checkboxes">
                   {this.availableCategories.map((category) => (
                     <label
+                      part="checkbox-label"
                       class="cc_checkboxes_item"
                       htmlFor={`check-category-${category.label}`}
                     >
                       <input
+                        part="checkbox"
                         id={`check-category-${category.label}`}
                         type="checkbox"
                         disabled={category.isMandatory ?? false}
@@ -269,6 +273,7 @@ export class CookieConsentBanner {
             <div class="cc_buttons">
               {Boolean(this.isShownSettings) && (
                 <button
+                  part="button-persist-selection"
                   type="submit"
                   class="secondary"
                   onClick={() => this.persistSelection()}
@@ -280,6 +285,7 @@ export class CookieConsentBanner {
               {!this.isShownSettings &&
                 !!this.btnLabelOnlyEssentialAndContinue && (
                   <button
+                    part="button-essential-only"
                     class="secondary"
                     type="button"
                     onClick={() => this.handleEssentialsOnly()}
@@ -289,6 +295,7 @@ export class CookieConsentBanner {
                   </button>
                 )}
               <button
+                part="button-accept-all"
                 onClick={() => this.handleAcceptAll()}
                 onKeyPress={() => this.handleAcceptAll()}
                 type="button"

packages/cookie-consent-banner/src/index.html

@@ -31,6 +31,34 @@
         --cookie-consent-banner-spacings-container-padding-left: 0;
         --cookie-consent-banner-spacings-container-padding-bottom: 0;
         --cookie-consent-banner-spacings-container-padding-right: 0;
+
+        --cookie-consent-banner-colors-primary: rgb(24, 77, 251);
+        --cookie-consent-banner-colors-primary-border: rgb(24, 77, 251);
+      }
+
+      /* Check if CSS Parts are merged with default styles and CSS variable overrides */
+      cookie-consent-banner::part(button-accept-all) {
+        text-transform: uppercase;
+      }
+
+      cookie-consent-banner::part(button-persist-selection),
+      cookie-consent-banner::part(button-essential-only) {
+        text-transform: uppercase;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      }
+
+      cookie-consent-banner::part(checkbox) {
+        accent-color: rgb(24, 251, 107);
+      }
+
+      cookie-consent-banner::part(description-main),
+      cookie-consent-banner::part(description-settings),
+      cookie-consent-banner::part(headline) {
+        font-family: "Arial", sans-serif;
+      }
+
+      cookie-consent-banner::part(description-settings) {
+        color: rgba(255, 255, 255, 0.66);
       }
     </style>
   </head>
@@ -78,6 +106,13 @@
           key: "analytics",
           label: "Analysis cookies",
         },
+        {
+          description:
+            "These Cookies are required for the page to work properly and won't track you",
+          key: "technically-required",
+          label: "Technically required",
+          isMandatory: true,
+        },
       ];
     </script>
   </body>