fix: use antd css variables to make button active

BREAKING CHANGE: This removes the buttonTransparent property.
See the example on how to customize the color via the ConfigProvider.

src/Button/ToggleButton/ToggleButton.example.md

@@ -75,3 +75,39 @@ const StandaloneToggleButton = () => {
 
 <StandaloneToggleButton />
 ```
+
+A ToggleButton with a different type and a customized theme:
+
+```jsx
+import ToggleButton from '@terrestris/react-geo/dist/Button/ToggleButton/ToggleButton';
+import {ConfigProvider} from 'antd';
+import * as React from 'react';
+
+const StandaloneToggleButton = () => {
+  const [pressed, setPressed] = React.useState();
+
+  return (
+    <ConfigProvider theme={{
+      cssVar: true,
+      components: {
+        Button: {
+          defaultActiveBg: 'lightgreen'
+        }
+      },
+      token: {
+        colorBgBase: 'lightblue'
+      }
+    }}>
+      <ToggleButton
+        type="dashed"
+        pressed={pressed}
+        onChange={() => setPressed(!pressed)}
+      >
+        Toggle me
+      </ToggleButton>
+    </ConfigProvider>
+  );
+};
+
+<StandaloneToggleButton />
+```

src/Button/ToggleButton/ToggleButton.less

@@ -0,0 +1,25 @@
+.react-geo-togglebutton.btn-pressed.ant-btn-primary {
+  color: var(--ant-color-text-light-solid, #fff);
+  background: var(--ant-color-primary-active, #0958d9);
+}
+
+.react-geo-togglebutton.btn-pressed.ant-btn-default {
+  color: var(--ant-button-default-active-color, #0958d9);
+  border-color: var(--ant-button-default-active-border-color, #0958d9);
+  background: var(--ant-button-default-active-bg, #ffffff);
+}
+
+.react-geo-togglebutton.btn-pressed.ant-btn-link {
+  color: var(--ant-color-link-active, #0958d9);
+}
+
+.react-geo-togglebutton.btn-pressed.ant-btn-dashed {
+  color: var(--ant-button-default-active-color, #0958d9);
+  border-color: var(--ant-button-default-active-border-color, #0958d9);
+  background: var(--ant-button-default-active-bg, #ffffff);
+}
+
+.react-geo-togglebutton.btn-pressed.ant-btn-text {
+  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+  background: var(--ant-color-bg-text-active, rgba(0, 0, 0, 0.15));
+}

src/Button/ToggleButton/ToggleButton.tsx

@@ -1,6 +1,7 @@
+import './ToggleButton.less';
+
 import {
   Button,
-  theme,
   Tooltip
 } from 'antd';
 import {
@@ -11,10 +12,6 @@ import React, {
   MouseEvent
 } from 'react';
 
-const { useToken } = theme;
-
-import _isFunction from 'lodash/isFunction';
-
 import { CSS_PREFIX } from '../../constants';
 import { SimpleButtonProps } from '../SimpleButton/SimpleButton';
 
@@ -58,11 +55,6 @@ interface OwnProps {
    * The onChange callback.
    */
   onChange?: (evt: MouseEvent<HTMLButtonElement>, value?: string) => void;
-
-  /**
-   * Sets button background to transparent instead of primary color.
-   */
-  buttonTransparent?: boolean;
 }
 
 export type ToggleButtonProps = OwnProps & Omit<SimpleButtonProps, 'onChange' | 'value'>;
@@ -82,12 +74,9 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
   value,
   onClick,
   onChange = () => {},
-  buttonTransparent = false,
   ...passThroughProps
 }) => {
 
-  const token = useToken();
-
   const handleChange = (evt: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick) {
       onClick(evt);
@@ -118,14 +107,6 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
       {...tooltipProps}
     >
       <Button
-        style={{
-          backgroundColor:
-            buttonTransparent
-              ? 'transparent'
-              : pressed
-                ? token.token.colorPrimaryActive
-                : token.token.colorPrimary
-        }}
         type={type}
         onClick={handleChange}
         onChange={onChange}

src/index.ts

@@ -20,8 +20,8 @@ export { FeatureLabelModal } from './FeatureLabelModal/FeatureLabelModal';
 export {
   default as CoordinateReferenceSystemCombo
 } from './Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo';
-export { SearchField } from './Field/SearchField/SearchField';
 export { default as ScaleCombo } from './Field/ScaleCombo/ScaleCombo';
+export { SearchField } from './Field/SearchField/SearchField';
 export { AgFeatureGrid } from './Grid/AgFeatureGrid/AgFeatureGrid';
 export { FeatureGrid } from './Grid/FeatureGrid/FeatureGrid';
 export { default as PropertyGrid } from './Grid/PropertyGrid/PropertyGrid';