chore: extract button from core for error-boundary

Signed-off-by: Gabriel <gaccettola@mirantis.com>

package-lock.json

@@ -3883,6 +3883,10 @@
       "resolved": "packages/bump-version-for-cron",
       "link": true
     },
+    "node_modules/@k8slens/button": {
+      "resolved": "packages/ui-components/button",
+      "link": true
+    },
     "node_modules/@k8slens/cluster-settings": {
       "resolved": "packages/cluster-settings",
       "link": true
@@ -35927,6 +35931,7 @@
       "peerDependencies": {
         "@k8slens/application": "^6.5.0-alpha.0",
         "@k8slens/application-for-electron-main": "^6.5.0-alpha.0",
+        "@k8slens/button": "^1.0.0-alpha.0",
         "@k8slens/cluster-settings": "^6.5.0-alpha.1",
         "@k8slens/kubectl-versions": "^1.0.0-alpha.0",
         "@k8slens/legacy-extensions": "^1.0.0-alpha.0",
@@ -37124,6 +37129,72 @@
         "react-dom": "^17.0.2"
       }
     },
+    "packages/ui-components/button": {
+      "name": "@k8slens/button",
+      "version": "1.0.0-alpha.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/user-event": "^12.8.3"
+      },
+      "peerDependencies": {
+        "@k8slens/tooltip": "^1.0.0-alpha.0",
+        "@k8slens/utilities": "^1.0.0-alpha.1",
+        "auto-bind": "^4.0.0",
+        "lodash": "^4.17.21",
+        "mobx": "^6.8.0",
+        "mobx-react": "^7.6.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
+    "packages/ui-components/button/node_modules/@k8slens/eslint-config": {
+      "version": "6.5.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@k8slens/eslint-config/-/eslint-config-6.5.0-alpha.1.tgz",
+      "integrity": "sha512-6DdfKe/iafX85GBK/UlKgz29FOIOp/UVS03bFGLyw7Vmm7pauB0FEHTAdbr3g1qG/Zcn6nxhOM3uqQyRY/uEyA==",
+      "dev": true,
+      "bin": {
+        "lens-lint": "bin/lint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">= 5",
+        "@typescript-eslint/parser": ">= 5",
+        "eslint": ">= 7",
+        "eslint-config-airbnb-typescript": ">= 17",
+        "eslint-config-prettier": ">= 8",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-import": ">= 2",
+        "eslint-plugin-jest": ">= 27",
+        "eslint-plugin-jsx-a11y": ">= 6",
+        "eslint-plugin-no-unsanitized": ">= 4.0.2",
+        "eslint-plugin-prettier": ">= 4",
+        "eslint-plugin-react-hooks": ">= 4",
+        "eslint-plugin-security": ">= 1.6.0",
+        "eslint-plugin-simple-import-sort": ">= 7",
+        "eslint-plugin-unused-imports": ">= 2",
+        "eslint-plugin-xss": ">= 0.1.12",
+        "prettier": ">= 2"
+      }
+    },
+    "packages/ui-components/button/node_modules/@testing-library/user-event": {
+      "version": "12.8.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
+      "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "packages/ui-components/tooltip": {
       "name": "@k8slens/tooltip",
       "version": "1.0.0-alpha.0",

packages/core/package.json

@@ -323,6 +323,7 @@
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/test-utils": "^1.0.0-alpha.1",
     "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "@k8slens/button": "^1.0.0-alpha.0",
     "@k8slens/utilities": "^1.0.0-alpha.1",
     "@ogre-tools/fp": "^15.3.1",
     "@ogre-tools/injectable": "^15.3.1",

packages/core/src/extensions/renderer-api/components.ts

@@ -36,7 +36,6 @@ export * from "../../renderer/components/layout/wizard-layout";
 export * from "../../renderer/components/layout/tab-layout";
 
 // form-controls
-export * from "../../renderer/components/button";
 export * from "../../renderer/components/checkbox";
 export * from "../../renderer/components/radio";
 export * from "../../renderer/components/select";

packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx

@@ -10,7 +10,7 @@ import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import installUpdateCountdownInjectable from "./install-update-countdown.injectable";
 import { Dialog } from "../../../../../../renderer/components/dialog";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import styles from "./force-update-modal.module.scss";
 
 interface Dependencies {

packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx

@@ -17,7 +17,7 @@ import type { IObservableValue } from "mobx";
 import { action } from "mobx";
 import submitCustomHelmRepositoryInjectable from "./submit-custom-helm-repository.injectable";
 import hideDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/hide-dialog-for-adding-custom-helm-repository.injectable";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../../../../../../renderer/components/icon";
 import maximalCustomHelmRepoOptionsAreShownInjectable from "./maximal-custom-helm-repo-options-are-shown.injectable";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";

packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx

@@ -4,7 +4,7 @@
  */
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import showDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/show-dialog-for-adding-custom-helm-repository.injectable";
 
 interface Dependencies {

packages/core/src/renderer/components/+add-cluster/add-cluster.tsx

@@ -15,7 +15,7 @@ import * as uuid from "uuid";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { isDefined, iter } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
 import { MonacoEditor } from "../monaco-editor";

packages/core/src/renderer/components/+config-maps/config-map-details.tsx

@@ -10,7 +10,7 @@ import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ConfigMap } from "../../../common/k8s-api/endpoints";
 import type { Logger } from "../../../common/logger";

packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx

@@ -17,7 +17,7 @@ import { systemName } from "../../input/input_validators";
 import type { IResourceQuotaValues, ResourceQuotaApi } from "../../../../common/k8s-api/endpoints";
 import { Select } from "../../select";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { SubTitle } from "../../layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";

packages/core/src/renderer/components/+config-secrets/secret-details.tsx

@@ -10,7 +10,7 @@ import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { base64, toggle } from "@k8slens/utilities";
 import { Icon } from "../icon";

packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx

@@ -15,7 +15,7 @@ import extensionInstallationStateStoreInjectable from "../../../../extensions/ex
 import type { Disposer } from "@k8slens/utilities";
 import { disposer } from "@k8slens/utilities";
 import type { ShowNotification } from "../../notifications";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
 import React from "react";
 import { remove as removeDir } from "fs-extra";

packages/core/src/renderer/components/+extensions/install.tsx

@@ -6,7 +6,7 @@
 import styles from "./install.module.scss";
 import React, { useEffect, useRef, useState } from "react";
 import { prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { observer } from "mobx-react";
 import { Input, InputValidators } from "../input";

packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -12,7 +12,7 @@ import { Drawer, DrawerItem } from "../drawer";
 import { stopPropagation } from "@k8slens/utilities";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Select } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";

packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx

@@ -14,7 +14,7 @@ import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ConfigurationInput, MinimalResourceGroup, OnlyUserSuppliedValuesAreShownToggle, ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
 import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { kebabCase } from "lodash/fp";
 import { Badge } from "../../badge";
 import { SubTitle } from "../../layout/sub-title";

packages/core/src/renderer/components/+network-services/service-port-component.tsx

@@ -11,7 +11,7 @@ import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";

packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -11,7 +11,7 @@ import type { ContainerPort, Pod } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";

packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx

@@ -7,7 +7,7 @@ import "./add-remove-buttons.scss";
 
 import React from "react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 
 export interface AddRemoveButtonsProps extends React.HTMLAttributes<any> {

packages/core/src/renderer/components/cluster-manager/cluster-status.tsx

@@ -12,7 +12,7 @@ import { ipcRendererOn } from "../../../common/ipc";
 import type { Cluster } from "../../../common/cluster/cluster";
 import type { IClassName } from "@k8slens/utilities";
 import { hasTypedProperty, isObject, isString, cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";

packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { onMultiSelectFor, Select } from "../select/select";
 import { Icon } from "../icon/icon";
-import { Button } from "../button/button";
+import { Button } from "@k8slens/button";
 import { SubTitle } from "../layout/sub-title";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { observable, reaction, makeObservable } from "mobx";

packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -11,8 +11,8 @@ import type { IObservableValue } from "mobx";
 import { observable, makeObservable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "@k8slens/utilities";
-import type { ButtonProps } from "../button";
+import type { ButtonProps } from "@k8slens/button";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/delete-cluster-dialog/view.tsx

@@ -9,7 +9,7 @@ import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/dialog/logs-dialog.tsx

@@ -10,7 +10,7 @@ import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { clipboard } from "electron";
 import { kebabCase } from "lodash/fp";

packages/core/src/renderer/components/dock/info-panel.tsx

@@ -10,7 +10,7 @@ import React, { Component } from "react";
 import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { DockStore, TabId } from "./dock/store";

packages/core/src/renderer/components/dock/install-chart/view.tsx

@@ -12,7 +12,7 @@ import { Badge } from "../../badge";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { prevDefault } from "@k8slens/utilities";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { LogsDialog } from "../../dialog/logs-dialog";
 import { Select } from "../../select";
 import { Input } from "../../input";

packages/core/src/renderer/components/error-boundary/error-boundary.tsx

@@ -8,7 +8,7 @@ import "./error-boundary.scss";
 import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
 import type { SingleOrMany } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";

packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import type { IObservableValue } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";

packages/core/src/renderer/components/path-picker/path-picker.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import type { OpenPathPickingDialog } from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import openPathPickingDialogInjectable from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 
 export interface PathPickOpts {
   message: string;

packages/core/src/renderer/components/wizard/wizard.tsx

@@ -6,7 +6,7 @@
 import "./wizard.scss";
 import React from "react";
 import { cssNames, prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Stepper } from "../stepper";
 import { SubTitle } from "../layout/sub-title";
 import { Spinner } from "../spinner";

packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx

@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
 import type { ListNamespaceForbiddenArgs } from "../../common/ipc/cluster";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import type { IpcRendererEvent } from "electron";
 import React from "react";
 import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";

packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx

@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import React from "react";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import showSuccessNotificationInjectable from "../components/notifications/show-success-notification.injectable";
 
 const aboutPortForwardingInjectable = getInjectable({

packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx

@@ -6,7 +6,7 @@ import { getInjectable } from "@ogre-tools/injectable";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import showErrorNotificationInjectable from "../components/notifications/show-error-notification.injectable";
 import React from "react";
-import { Button } from "../components/button";
+import { Button } from from "@k8slens/button";
 
 const notifyErrorPortForwardingInjectable = getInjectable({
   id: "notify-error-port-forwarding",

packages/open-lens/src/renderer/index.ts

@@ -1,4 +1,5 @@
 import "@k8slens/core/styles";
+import "@k8slens/button/dist/index.css";
 import "@k8slens/tooltip/dist/index.css";
 import { runInAction } from "mobx";
 import {

packages/ui-components/button/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/button/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/ui-components/button/.swcrc

@@ -0,0 +1,19 @@
+{
+  "module": {
+    "type": "commonjs"
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": false
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "target": "es2019"
+  }
+}
+

packages/ui-components/button/README.md

@@ -0,0 +1,16 @@
+# @k8slens/button
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/button
+```
+
+```typescript
+import type { ButtonProps } from "@k8slens/button";
+import { Button } from "@k8slens/button";
+```
+
+## Extendability

packages/ui-components/button/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./src/button";

packages/ui-components/button/jest.config.js

@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;

packages/ui-components/button/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@k8slens/button",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Highly extendable button in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^12.8.3"
+  }
+}

packages/ui-components/button/src/button.scss

@@ -12,12 +12,12 @@
   text-align: center;
   text-decoration: none;
   cursor: pointer;
-  border-radius: $radius;
+  border-radius: var(--border-radius);
   background: var(--buttonDefaultBackground);
-  padding: round($padding * .9) $padding * 1.5;
+  padding: round(8px * .9) 8px * 1.5;
   flex-shrink: 0;
   line-height: 1;
-  font-size: $font-size;
+  font-size: var(--font-size);
   user-select: none;
 
   &[href] {
@@ -66,7 +66,7 @@
   }
 
   &.big {
-    font-size: 2.2 * $unit;
+    font-size: 2.2 * 8px;
     border-radius: 50px;
     padding: .75em 1em;
   }

packages/ui-components/button/tailwind.config.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+const path = require('path');
+
+module.exports = {
+  content: [
+    path.join(__dirname, "src/**/*.tsx")
+  ],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

packages/ui-components/button/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/ui-components/button/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;