Global styles refactor

enterprise/frontend/src/metabase-enterprise/sandboxes/components/EditSandboxingModal/EditSandboxingModal.tsx

@@ -1,3 +1,4 @@
+import cx from "classnames";
 import type * as React from "react";
 import { useState } from "react";
 import { useAsyncFn } from "react-use";
@@ -9,6 +10,7 @@ import QuestionLoader from "metabase/containers/QuestionLoader";
 import QuestionPicker from "metabase/containers/QuestionPicker";
 import Button from "metabase/core/components/Button";
 import Radio from "metabase/core/components/Radio";
+import CS from "metabase/css/core/index.css";
 import { EntityName } from "metabase/entities/containers/EntityName";
 import { GTAPApi } from "metabase/services";
 import type { IconName } from "metabase/ui";
@@ -152,7 +154,7 @@ const EditSandboxingModal = ({
         )}
         {(!shouldUseSavedQuestion || policy.card_id != null) &&
           (hasAttributesOptions || hasValidMappings ? (
-            <div className="p3 border-top border-bottom">
+            <div className={cx(CS.p3, CS.borderTop, CS.borderBottom)}>
               {shouldUseSavedQuestion && (
                 <div className="pb2">
                   {t`You can optionally add additional filters here based on user attributes. These filters will be applied on top of any filters that are already in this saved question.`}

frontend/src/metabase/App.tsx

@@ -13,6 +13,7 @@ import {
 } from "metabase/components/ErrorPages";
 import { UndoListing } from "metabase/containers/UndoListing";
 import { ContentViewportContext } from "metabase/core/context/ContentViewportContext";
+import CS from "metabase/css/core/index.css";
 import ScrollToTop from "metabase/hoc/ScrollToTop";
 import { initializeIframeResizer } from "metabase/lib/dom";
 import AppBar from "metabase/nav/containers/AppBar";
@@ -97,7 +98,7 @@ function App({
   return (
     <ErrorBoundary onError={onError}>
       <ScrollToTop>
-        <AppContainer className="spread">
+        <AppContainer className={CS.spread}>
           <KeyboardTriggeredErrorModal />
           <AppBanner location={location} />
           {isAppBarVisible && <AppBar />}

frontend/src/metabase/account/login-history/components/LoginHistory/LoginHistory.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import moment from "moment-timezone"; // eslint-disable-line no-restricted-imports -- deprecated usage
 import { t } from "ttag";
 import _ from "underscore";
@@ -8,6 +9,7 @@ import Card from "metabase/components/Card";
 import EmptyState from "metabase/components/EmptyState";
 import Label from "metabase/components/type/Label";
 import Text from "metabase/components/type/Text";
+import CS from "metabase/css/core/index.css";
 
 import {
   LoginActiveLabel,
@@ -17,18 +19,21 @@ import {
 } from "./LoginHistory.styled";
 
 const LoginHistoryItem = ({ item }) => (
-  <Card className="my2 py1" style={{ paddingLeft: 20, paddingRight: 20 }}>
+  <Card
+    className={cx(CS.my2, CS.py1)}
+    style={{ paddingLeft: 20, paddingRight: 20 }}
+  >
     <LoginItemContent>
       <div>
         <Label mb="0">
           {item.location} -{" "}
-          <span className="text-medium">{item.ip_address}</span>
+          <span className={CS.textMedium}>{item.ip_address}</span>
         </Label>
         <Text style={{ marginTop: -8 }}>{item.device_description}</Text>
       </div>
       <LoginItemInfo>
         {item.active && (
-          <LoginActiveLabel className="pr2">{t`Active`}</LoginActiveLabel>
+          <LoginActiveLabel className={CS.pr2}>{t`Active`}</LoginActiveLabel>
         )}
         <Label>{item.time}</Label>
       </LoginItemInfo>

frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx

@@ -8,6 +8,7 @@ import { t } from "ttag";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
 import Modal from "metabase/components/Modal";
 import FormMessage from "metabase/components/form/FormMessage";
+import CS from "metabase/css/core/index.css";
 import DatabaseSyncModal from "metabase/databases/containers/DatabaseSyncModal";
 import { isSyncCompleted } from "metabase/lib/syncing";
 import { PLUGIN_FEATURE_LEVEL_PERMISSIONS } from "metabase/plugins";
@@ -72,7 +73,7 @@ export default class DatabaseList extends Component {
     const error = deletionError || addSampleDatabaseError;
 
     return (
-      <div className="wrapper" data-testid="database-list">
+      <div className={CS.wrapper} data-testid="database-list">
         <section className="PageHeader px2 clearfix">
           {isAdmin && (
             <Link
@@ -142,7 +143,7 @@ export default class DatabaseList extends Component {
             <div className="pt4">
               <span
                 className={cx("p2 text-italic", {
-                  "border-top": databases && databases.length > 0,
+                  [CS.borderTop]: databases && databases.length > 0,
                 })}
               >
                 {isAddingSampleDatabase ? (

frontend/src/metabase/admin/datamodel/components/GuiQueryEditor/GuiQueryEditor.jsx

@@ -8,6 +8,7 @@ import { t } from "ttag";
 
 import IconBorder from "metabase/components/IconBorder";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import CS from "metabase/css/core/index.css";
 import { DatabaseSchemaAndTableDataSelector } from "metabase/query_builder/components/DataSelector";
 import { Icon } from "metabase/ui";
 import * as Lib from "metabase-lib";
@@ -317,7 +318,7 @@ export class GuiQueryEditor extends Component {
         </div>
         <div className="GuiBuilder-row flex flex-full">
           {this.renderViewSection()}
-          <div className="flex-full" />
+          <div className={CS.flexFull} />
           {this.props.children}
         </div>
       </div>

frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx

@@ -1,9 +1,11 @@
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { createRef, Component } from "react";
 import { t } from "ttag";
 
 import ModalWithTrigger from "metabase/components/ModalWithTrigger";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import CS from "metabase/css/core/index.css";
 import { capitalize } from "metabase/lib/formatting";
 import { Icon } from "metabase/ui";
 
@@ -60,7 +62,7 @@ export default class ObjectActionsSelect extends Component {
                 {t`Revision History`}
               </ActionLink>
             </li>
-            <li className="mt1 border-top">
+            <li className={cx(CS.mt1, CS.borderTop)}>
               <ModalWithTrigger
                 ref={this.retireModal}
                 triggerElement={t`Retire ${objectTypeLocalized}`}

frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx

@@ -1,10 +1,12 @@
 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Component } from "react";
 import { t } from "ttag";
 
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import CS from "metabase/css/core/index.css";
 import Tables from "metabase/entities/tables";
 import { assignUserColors } from "metabase/lib/formatting";
 
@@ -31,7 +33,7 @@ class RevisionHistory extends Component {
     return (
       <LoadingAndErrorWrapper loading={!object || !revisions}>
         {() => (
-          <div className="wrapper">
+          <div className={CS.wrapper}>
             <Breadcrumbs
               className="py4"
               crumbs={[
@@ -41,7 +43,7 @@ class RevisionHistory extends Component {
                 [this.props.objectType + t` History`],
               ]}
             />
-            <div className="wrapper py4" style={{ maxWidth: 950 }}>
+            <div className={cx(CS.wrapper, "py4")} style={{ maxWidth: 950 }}>
               <h2 className="mb4">
                 {t`Revision History for`} &quot;{object.name}&quot;
               </h2>

frontend/src/metabase/admin/datamodel/metadata/components/MetadataFieldSettings/MetadataFieldSettings.tsx

@@ -6,6 +6,7 @@ import { AdminLayout } from "metabase/components/AdminLayout";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import { LeftNavPane, LeftNavPaneItem } from "metabase/components/LeftNavPane";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import CS from "metabase/css/core/index.css";
 import Databases from "metabase/entities/databases";
 import Fields from "metabase/entities/fields";
 import Schemas from "metabase/entities/schemas";
@@ -105,7 +106,7 @@ const MetadataFieldSettings = ({
         />
       }
     >
-      <div className="wrapper">
+      <div className={CS.wrapper}>
         <FieldBreadcrumbs
           database={database}
           schema={schema}

frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableSettings/MetadataTableSettings.tsx

@@ -1,10 +1,12 @@
+import cx from "classnames";
 import { useCallback } from "react";
 import { connect } from "react-redux";
 import { t } from "ttag";
 import _ from "underscore";
 
 import ActionButton from "metabase/components/ActionButton";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
+import CS from "metabase/css/core/index.css";
 import Databases from "metabase/entities/databases";
 import Schemas from "metabase/entities/schemas";
 import Tables from "metabase/entities/tables";
@@ -79,7 +81,7 @@ const MetadataTableSettings = ({
 
   return (
     <div className="relative">
-      <div className="wrapper wrapper--trim">
+      <div className={cx(CS.wrapper, CS.wrapperTrim)}>
         <div className="flex align-center my2">
           <MetadataBackButton
             selectedDatabaseId={database.id}

frontend/src/metabase/admin/settings/components/SettingsUpdatesForm/SettingsUpdatesForm.jsx

@@ -1,6 +1,7 @@
 import cx from "classnames";
 import PropTypes from "prop-types";
 
+import CS from "metabase/css/core/index.css";
 import MetabaseSettings from "metabase/lib/settings";
 
 import SettingsSetting from "../SettingsSetting";
@@ -23,8 +24,8 @@ export default function SettingsUpdatesForm({ elements, updateSetting }) {
 
       <div className="px2">
         <div
-          className={cx("pt3", {
-            "border-top": !MetabaseSettings.isHosted(),
+          className={cx(CS.pt3, {
+            [CS.borderTop]: !MetabaseSettings.isHosted(),
           })}
         >
           <VersionUpdateNotice />

frontend/src/metabase/browse/components/SchemaBrowser.jsx

@@ -6,6 +6,7 @@ import BrowserCrumbs from "metabase/components/BrowserCrumbs";
 import Card from "metabase/components/Card";
 import EntityItem from "metabase/components/EntityItem";
 import { Grid } from "metabase/components/Grid";
+import CS from "metabase/css/core/index.css";
 import Database from "metabase/entities/databases";
 import Schema from "metabase/entities/schemas";
 import { color } from "metabase/lib/colors";
@@ -53,7 +54,7 @@ function SchemaBrowser(props) {
                       schema.name,
                     )}`}
                   >
-                    <Card hoverable className="px1">
+                    <Card hoverable className={CS.px1}>
                       <EntityItem
                         name={schema.name}
                         iconName="folder"

frontend/src/metabase/components/DebouncedFrame/DebouncedFrame.jsx

@@ -4,6 +4,7 @@ import { Component } from "react";
 import _ from "underscore";
 
 import ExplicitSize from "metabase/components/ExplicitSize";
+import CS from "metabase/css/core/index.css";
 
 const DEBOUNCE_PERIOD = 300;
 
@@ -96,7 +97,7 @@ class DebouncedFrame extends Component {
           ...style,
         }}
       >
-        <div className="absolute" style={{ width, height }}>
+        <div className={CS.absolute} style={{ width, height }}>
           {children}
         </div>
       </div>

frontend/src/metabase/components/DeleteModalWithConfirm/DeleteModalWithConfirm.jsx

@@ -6,6 +6,7 @@ import _ from "underscore";
 
 import ModalContent from "metabase/components/ModalContent";
 import CheckBox from "metabase/core/components/CheckBox";
+import CS from "metabase/css/core/index.css";
 
 import { CheckboxLabel } from "./DeleteModalWithConfirm.styled";
 
@@ -72,8 +73,8 @@ export default class DeleteModalWithConfirm extends Component {
           >{t`Cancel`}</button>
           <button
             className={cx("Button ml2", {
-              disabled: !confirmed,
               "Button--danger": confirmed,
+              [CS.disabled]: !confirmed,
             })}
             onClick={this.onDelete}
           >

frontend/src/metabase/components/LoadingAndErrorWrapper/LoadingAndErrorWrapper.jsx

@@ -5,6 +5,7 @@ import { Children, Component } from "react";
 import { t } from "ttag";
 
 import LoadingSpinner from "metabase/components/LoadingSpinner";
+import CS from "metabase/css/core/index.css";
 
 export default class LoadingAndErrorWrapper extends Component {
   state = {
@@ -125,7 +126,8 @@ export default class LoadingAndErrorWrapper extends Component {
     const { messageIndex, sceneIndex } = this.state;
 
     const contentClassName = cx(
-      "wrapper py4 text-brand text-centered flex-full flex flex-column layout-centered",
+      CS.wrapper,
+      "py4 text-brand text-centered flex-full flex flex-column layout-centered",
       { "bg-white": !noBackground },
     );
 

frontend/src/metabase/components/PasswordReveal/PasswordReveal.jsx

@@ -1,8 +1,10 @@
 /* eslint-disable react/prop-types */
 /* flow */
+import cx from "classnames";
 import { Component } from "react";
 import { t } from "ttag";
 
+import CS from "metabase/css/core/index.css";
 import { color } from "metabase/lib/colors";
 
 import { PasswordCopyButton } from "./PasswordReveal.styled";
@@ -17,7 +19,10 @@ const styles = {
 };
 
 const Label = () => (
-  <div style={{ top: -12 }} className="absolute text-centered left right">
+  <div
+    style={{ top: -12 }}
+    className={cx(CS.absolute, CS.textCentered, CS.left, CS.right)}
+  >
     <span className="px1 bg-white h6 text-bold text-medium text-uppercase">
       {t`Temporary Password`}
     </span>

frontend/src/metabase/containers/dnd/DropArea.jsx

@@ -2,6 +2,8 @@
 import cx from "classnames";
 import { Component } from "react";
 
+import CS from "metabase/css/core/index.css";
+
 const DropTargetBackgroundAndBorder = ({
   highlighted,
   hovered,
@@ -13,7 +15,7 @@ const DropTargetBackgroundAndBorder = ({
   marginBottom = margin,
 }) => (
   <div
-    className={cx("absolute rounded", {
+    className={cx(CS.absolute, CS.rounded, {
       "pointer-events-none": !highlighted,
     })}
     style={{

frontend/src/metabase/core/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import type { ButtonHTMLAttributes, ReactNode, Ref, ElementType } from "react";
 import { forwardRef } from "react";
 import _ from "underscore";
 
+import CS from "metabase/css/core/index.css";
 import type { IconName } from "metabase/ui";
 import { Icon } from "metabase/ui";
 
@@ -92,6 +93,7 @@ const BaseButton = forwardRef(function BaseButton(
       {..._.omit(props, ...BUTTON_VARIANTS)}
       className={cx("Button", className, variantClasses, {
         p1: !children,
+        [CS.p1]: !children,
       })}
       purple={props.purple}
     >

frontend/src/metabase/css/core/bordered.module.css

@@ -11,7 +11,8 @@
 }
 
 :global(.border-bottom),
-.border-bottom {
+.border-bottom,
+.borderBottom {
   border-bottom: var(--border-size) var(--border-style) var(--color-border);
 }
 
@@ -21,7 +22,8 @@
 }
 
 :global(.border-top),
-.border-top {
+.border-top,
+.borderTop {
   border-top: var(--border-size) var(--border-style) var(--color-border);
 }