feat(odyssey-react): convert Status to tokens

okta · Dec 17, 2021 · be5b1f2 · be5b1f2
1 parent a7890f8
commit be5b1f2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/packages/odyssey-react/src/components/Status/Status.module.scss b/packages/odyssey-react/src/components/Status/Status.module.scss
@@ -34,26 +34,26 @@ $status-indicator-size: 1em * 0.5;
     height: $status-indicator-size;
     margin-inline-end: $spacing-xs;
     transform: translateY(-50%);
-    background-color: cv("gray", "600");
+    background-color: var(--ColorIndicatorNeutral);
   }
 }
 
 /* Value variants */
 
 .successVariant {
   &::before {
-    background-color: $color-success-base;
+    background-color: var(--ColorIndicatorSuccess);
   }
 }
 
 .cautionVariant {
   &::before {
-    background-color: $color-caution-base;
+    background-color: var(--ColorIndicatorCaution);
   }
 }
 
 .dangerVariant {
   &::before {
-    background-color: $color-danger-base;
+    background-color: var(--ColorIndicatorDanger);
   }
 }
diff --git a/packages/odyssey-react/src/components/Status/Status.theme.ts b/packages/odyssey-react/src/components/Status/Status.theme.ts
@@ -0,0 +1,27 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import type { ThemeReducer } from "@okta/odyssey-react-theme";
+
+export const theme: ThemeReducer = (theme) => ({
+  // Caution Variant
+  ColorIndicatorCaution: theme.ColorCautionBase,
+
+  // Danger Variant
+  ColorIndicatorDanger: theme.ColorDangerBase,
+
+  // Neutral Variant
+  ColorIndicatorNeutral: theme.ColorNeutralBase,
+
+  // Success Variant
+  ColorIndicatorSuccess: theme.ColorSuccessBase,
+});
diff --git a/packages/odyssey-react/src/components/Status/Status.tsx b/packages/odyssey-react/src/components/Status/Status.tsx
@@ -17,6 +17,7 @@ import { useCx, useOmit } from "../../utils";
 import { ScreenReaderText } from "../ScreenReaderText";
 import { Box } from "../Box";
 import styles from "./Status.module.scss";
+import { theme } from "./Status.theme";
 
 export interface StatusProps
   extends Omit<ComponentPropsWithRef<"div">, "style" | "className" | "role"> {
@@ -48,7 +49,7 @@ export interface StatusProps
  * operational states as well as granular states like user status.
  */
 export const Status = withTheme(
-  () => ({}),
+  theme,
   styles
 )(
   forwardRef<HTMLDivElement, StatusProps>((props, ref) => {