Fix border colors, color picker

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

@@ -41,8 +41,8 @@ const CompletionBadge = ({ completed }) => (
     style={{
       borderWidth: 1,
       borderStyle: "solid",
-      borderColor: completed ? colors["accent1"] : colors["text-light"],
-      backgroundColor: completed ? colors["accent1"] : colors["text-white"],
+      borderColor: completed ? colors["success"] : colors["text-light"],
+      backgroundColor: completed ? colors["success"] : colors["text-white"],
       width: 32,
       height: 32,
       borderRadius: 99,

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

@@ -95,7 +95,7 @@ export default class SettingsUpdatesForm extends Component {
     } else {
       return (
         <div>
-          <div className="p2 bg-green bordered rounded border-green flex flex-row align-center justify-between">
+          <div className="p2 bg-green bordered rounded border-success flex flex-row align-center justify-between">
             <span className="text-white text-bold">{jt`Metabase ${this.removeVersionPrefixIfNeeded(
               versionInfo.latest.version,
             )} is available.  You're running ${this.removeVersionPrefixIfNeeded(

frontend/src/metabase/components/ColorPicker.jsx

@@ -20,7 +20,6 @@ const ColorSquare = ({ color, size }) => (
 
 class ColorPicker extends Component {
   static defaultProps = {
-    colors: [...Object.values(normal)],
     size: DEFAULT_COLOR_SQUARE_SIZE,
     triggerSize: DEFAULT_COLOR_SQUARE_SIZE,
     padding: 4,
@@ -35,7 +34,8 @@ class ColorPicker extends Component {
   };
 
   render() {
-    const { colors, onChange, padding, size, triggerSize, value } = this.props;
+    const { onChange, padding, size, triggerSize, value } = this.props;
+    const colors = this.props.colors || [...Object.values(normal)];
     return (
       <div className="inline-block">
         <PopoverWithTrigger

frontend/src/metabase/containers/CollectionPicker.jsx

@@ -92,7 +92,7 @@ export default class CollectionPicker extends React.Component {
                 !isRoot(collection) && (
                   <Icon
                     name="chevronright"
-                    className="p1 ml-auto circular text-grey-2 border-grey-2 bordered bg-white-hover cursor-pointer"
+                    className="p1 ml-auto circular text-grey-2 bordered bg-white-hover cursor-pointer"
                     onClick={e => {
                       e.stopPropagation();
                       this.setState({ parentId: collection.id });

frontend/src/metabase/css/components/buttons.css

 :root {
   --default-button-border-radius: 4px;
-  --default-button-border-color: var(--color-border);
-  --default-button-background-color: var(--color-bg-white);
-
-  --primary-button-border-color: var(--color-brand);
-  --primary-button-bg-color: var(--color-brand);
-  --warning-button-border-color: var(--color-accent3);
-  --warning-button-bg-color: var(--color-accent3);
-  --danger-button-bg-color: var(--color-accent3);
-  --selected-button-bg-color: var(--color-bg-light);
-
-  --success-button-color: var(--color-accent1);
 }
 
 .Button {

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

@@ -63,32 +63,21 @@
   border-color: color(var(--color-accent2) alpha(-80%)) !important;
 }
 
-.border-grey-1 {
-  border-color: var(--color-border) !important;
-}
-.border-grey-2 {
-  border-color: var(--color-border) !important;
-}
-
-.border-green {
-  border-color: var(--color-accent1) !important;
-}
-
 .border-purple {
   border-color: var(--color-accent2) !important;
 }
 
 .border-error,
 :local(.border-error) {
-  border-color: var(--color-accent3) !important;
+  border-color: var(--color-error) !important;
 }
 
 .border-gold {
-  border-color: var(--color-accent4) !important;
+  border-color: var(--color-warning) !important;
 }
 
 .border-success {
-  border-color: var(--color-accent1) !important;
+  border-color: var(--color-success) !important;
 }
 
 .border-brand,

frontend/src/metabase/nav/components/ProfileLink.jsx

@@ -78,7 +78,7 @@ export default class ProfileLink extends Component {
               action: () => this.openModal("logs"),
             },
             {
-              title: t`About metabase`,
+              title: t`About Metabase`,
               icon: null,
               action: () => this.openModal("about"),
             },

frontend/src/metabase/questions/components/ExpandingSearchField.jsx

@@ -75,7 +75,7 @@ export default class ExpandingSearchField extends Component {
       <div
         className={cx(
           className,
-          "bordered border-grey-1 flex align-center pr2 transition-border",
+          "bordered flex align-center pr2 transition-border",
           { "border-brand": active },
         )}
         onClick={this.setActive}

frontend/src/metabase/questions/containers/AddToDashboard.jsx

@@ -11,7 +11,7 @@ import QuestionListLoader from "metabase/containers/QuestionListLoader";
 import ExpandingSearchField from "../components/ExpandingSearchField.jsx";
 
 const QuestionRow = ({ question, onClick }) => (
-  <div className="py2 border-top border-grey-1">
+  <div className="py2 border-top">
     <div className="flex flex-full align-center">
       <QuestionIcon
         question={question}

frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx

@@ -217,10 +217,9 @@ const RulePreview = ({ rule, cols, onClick, onRemove }) => (
     <div className="p2 flex align-center">
       <RuleBackground
         rule={rule}
-        className={cx(
-          "mr2 flex-no-shrink rounded overflow-hidden border-grey-1",
-          { bordered: rule.type === "range" },
-        )}
+        className={cx("mr2 flex-no-shrink rounded overflow-hidden", {
+          bordered: rule.type === "range",
+        })}
         style={{ width: 40, height: 40 }}
       />
       <RuleDescription rule={rule} />