refactor(CCloseButton): add dark variant

Author: mrholek

packages/coreui-vue/src/components/close-button/CCloseButton.ts

@@ -3,6 +3,10 @@ import { defineComponent, h } from 'vue'
 export const CCloseButton = defineComponent({
   name: 'CCloseButton',
   props: {
+    /**
+     * Invert the default color.
+     */
+    dark: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
@@ -39,6 +43,7 @@ export const CCloseButton = defineComponent({
         ],
         'aria-label': 'Close',
         disabled: props.disabled,
+        ...(props.dark && { 'data-coreui-theme': 'dark' }),
         onClick: handleClick,
       })
   },

packages/docs/components/close-button.md

@@ -27,17 +27,17 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
 <CCloseButton disabled/>
 ```
 
-## White variant
+## Dark variant
 
-Change the default `<CCloseButton>` to be white with the `white` boolean property.
+Add `dark` boolean property to the `<CCloseButton>`, to invert the close button. This uses the filter property to invert the background-image without overriding its value.
 
 ::: demo-dark
-<CCloseButton white/>
-<CCloseButton white disabled/>
+<CCloseButton dark/>
+<CCloseButton dark disabled/>
 :::
 ```vue
-<CCloseButton white/>
-<CCloseButton white disabled/>
+<CCloseButton dark/>
+<CCloseButton dark disabled/>
 ```
 
 ## API