feat(odyssey-react): withTheme for Banner

packages/odyssey-react/src/components/Banner/Banner.module.scss

@@ -19,28 +19,28 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding-block: $spacing-s;
-  padding-inline: $spacing-m;
-  background-color: cv("blue", "300");
+  padding-block: var(--SpaceRemS);
+  padding-inline: var(--SpaceRemM);
+  background-color: var(--ColorPrimaryLight);
 }
 
 .icon {
   grid-area: icon;
-  margin-inline-end: $spacing-s;
-  font-size: $size-title-5;
+  margin-inline-end: var(--SpaceRemS);
+  font-size: var(--FontSizeScale2);
   line-height: 1;
 }
 
 .title {
   grid-area: title;
-  margin-inline-end: $spacing-xs;
+  margin-inline-end: var(--SpaceRemXs);
 }
 
 .content {
   grid-area: content;
   max-width: 100%;
   margin-block-end: 0;
-  margin-inline-end: $spacing-m;
+  margin-inline-end: var(--SpaceRemM);
 }
 
 .actions {
@@ -52,8 +52,8 @@
 .dismiss {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: $spacing-m;
-  margin-inline-start: $spacing-m;
+  inset-inline-end: var(--SpaceRemM);
+  margin-inline-start: var(--SpaceRemM);
   transform: translateY(-50%);
 }
 
@@ -62,28 +62,28 @@
 }
 
 .isDismissable {
-  padding-block: $spacing-s;
-  padding-inline-start: $spacing-m;
-  padding-inline-end: $spacing-l;
+  padding-block: var(--SpaceRemS);
+  padding-inline-start: var(--SpaceRemM);
+  padding-inline-end: var(--SpaceRemL);
 }
 
 .infoVariant {
-  background-color: cv("blue", "300");
+  background-color: var(--ColorPrimaryLight);
 }
 
 .successVariant {
-  background-color: cv("green", "300");
+  background-color: var(--ColorSuccessLight);
 }
 
 .cautionVariant {
-  background-color: cv("yellow", "300");
+  background-color: var(--ColorCautionLight);
 }
 
 .dangerVariant {
-  background-color: cv("red", "300");
+  background-color: var(--ColorDangerLight);
 }
 
-@media screen and (max-width: ($max-line-length * 1.5)) {
+@media screen and (max-width: (calc(var(--LayoutMaxlinelength) * 1.5))) {
   .root {
     grid-template-areas: initial;
     grid-template-columns: repeat(2, minmax(min-content, max-content));

packages/odyssey-react/src/components/Banner/Banner.theme.ts

@@ -0,0 +1,40 @@
+/*!
+ * 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) => ({
+  // Layout
+  LayoutMaxlinelength: theme.LayoutMaxlinelength,
+
+  // Space
+  SpaceRemXs: theme.SpaceRemXs,
+  SpaceRemS: theme.SpaceRemS,
+  SpaceRemM: theme.SpaceRemM,
+  SpaceRemL: theme.SpaceRemL,
+
+  // Type
+  FontSizeScale2: theme.FontSizeScale2,
+
+  // Info Variant
+  ColorPrimaryLight: theme.ColorPrimaryLight,
+
+  // Success Variant
+  ColorSuccessLight: theme.ColorSuccessLight,
+
+  // Caution Variant
+  ColorCautionLight: theme.ColorCautionLight,
+
+  // Danger Variant
+  ColorDangerLight: theme.ColorDangerLight,
+
+});

packages/odyssey-react/src/components/Banner/Banner.tsx

@@ -21,6 +21,7 @@ import { Text } from "../Text";
 import type { ButtonProps } from "../Button";
 import { CautionIcon, CloseIcon, ErrorIcon, GetInfoIcon } from "../Icon";
 import styles from "./Banner.module.scss";
+import { theme } from "./Banner.theme";
 
 interface CommonProps
   extends Omit<
@@ -70,7 +71,7 @@ const icon = {
  * to act upon.
  */
 export const Banner = withTheme(
-  () => ({}),
+  theme,
   styles
 )(
   forwardRef<HTMLDivElement, BannerProps>((props, ref) => {