Fix default theming

overrides/react/src/shared/types.ts

@@ -18,11 +18,9 @@ export interface EmptyStateProps {
 }
 
 export interface BadgeProps {
-  children?: any;
-  className?: string;
-  color?: string;
-  size?: string;
+  badgeText: string;
   ariaLabel?: string;
+  variant?: 'success' | 'info' | 'warning';
 }
 
 export interface ModalProps {
@@ -68,6 +66,7 @@ export interface CardProps {
 export interface LinkProps {
   href: string;
   linkText: string;
+  cssClass?: string;
   variant?: 'primary' | 'button';
 }
 

overrides/svelte/src/shared/types.ts

@@ -18,11 +18,9 @@ export interface EmptyStateProps {
 }
 
 export interface BadgeProps {
-  children?: any;
-  className?: string;
-  color?: string;
-  size?: string;
+  badgeText: string;
   ariaLabel?: string;
+  variant?: 'success' | 'info' | 'warning';
 }
 
 export interface ButtonProps {
@@ -61,6 +59,7 @@ export interface CardProps {
 export interface LinkProps {
   href: string;
   linkText: string;
+  cssClass?: string;
   variant?: 'primary' | 'button';
 }
 

overrides/vue/vue3/src/shared/types.ts

@@ -18,11 +18,9 @@ export interface EmptyStateProps {
 }
 
 export interface BadgeProps {
-  children?: any;
-  className?: string;
-  color?: string;
-  size?: string;
+  badgeText: string;
   ariaLabel?: string;
+  variant?: 'success' | 'info' | 'warning';
 }
 
 export interface ModalProps {
@@ -68,6 +66,7 @@ export interface CardProps {
 export interface LinkProps {
   href: string;
   linkText: string;
+  cssClass?: string;
   variant?: 'primary' | 'button';
 }
 

src/shared/Anchor/index.lite.tsx

@@ -4,12 +4,16 @@ import styles from './index.module.css';
 
 export default function Anchor(props: LinkProps) {
   const state = useStore({
-    variantCss: props.variant ? ' ' + styles[props.variant] : '',
+    get className() {
+      return styles.a +
+        (props.variant ? ` ${styles[props.variant]}` : '') +
+        (props.cssClass ? ` ${props.cssClass}` : '')
+    }
   });
 
   return (
-    <a href={props.href} target='_blank' class={`${styles.a}${state.variantCss}`}>
+    <a href={props.href} target='_blank' class={state.className}>
       {props.linkText}
-    </a>
+    </a >
   );
 }

src/shared/Badge/index.lite.tsx

@@ -1,9 +1,15 @@
+import { useStore } from '@builder.io/mitosis';
 import type { BadgeProps } from '../types';
+import styles from "./index.module.css"
 
 export default function Badge(props: BadgeProps) {
+  const state = useStore({
+    get variantCss() { return ' ' + (props.variant ? styles[props.variant] : styles.info) }
+  });
+
   return (
-    <span color={props.color} aria-label={props.ariaLabel} class={`rounded-md py-2 ${props.className}`}>
-      {props.children}
+    <span class={`${styles.badge}${state.variantCss}`} aria-label={props.ariaLabel}>
+      {props.badgeText}
     </span>
   );
 }

src/shared/Badge/index.module.css

@@ -0,0 +1,22 @@
+@import url('../common.module.css');
+
+.badge {
+  padding: 0.375rem 0.65rem;
+  border-radius: 0.375rem;
+  color: var(--primary-color-950);
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+}
+
+.info {
+  background-color: var(--alert-color-info);
+}
+
+.success {
+  background-color: var(--alert-color-success);
+}
+
+.warning {
+  background-color: var(--alert-color-warning);
+}

src/shared/Checkbox/index.lite.tsx

@@ -0,0 +1,8 @@
+import styles from "./index.module.css";
+
+export default function Checkbox(props: { label: string, name: string, checked: boolean, handleChange: (e: any) => void }) {
+    return <label class={styles.label}>
+        <input type="checkbox" name={props.name} checked={props.checked} onChange={(event) => props.handleChange(event)} class={styles.checkbox} />
+        {props.label}
+    </label>
+}

src/shared/Checkbox/index.module.css

@@ -0,0 +1,55 @@
+@import url('../common.module.css');
+/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
+.label {
+  font-family: system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.1;
+  display: grid;
+  grid-template-columns: 1rem auto;
+  gap: 0.5rem;
+}
+
+.checkbox {
+  --border-width: 0.15em;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  background-color: #fff;
+  /* Not removed via appearance */
+  margin: 0;
+  font: inherit;
+  color: currentColor;
+  width: 1.15em;
+  height: 1.15em;
+  border: var(--border-width) solid currentColor;
+  border-radius: var(--border-width);
+  transform: translateY(calc(var(--border-width) / 2 * -1));
+
+  display: grid;
+  place-content: center;
+}
+
+.checkbox::before {
+  content: '';
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--primary-color-700);
+  transform-origin: bottom left;
+  /* tick mark */
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+.checkbox:checked::before {
+  transform: scale(1);
+}
+
+.checkbox:focus {
+  outline: max(2px, 0.15em) solid currentColor;
+  outline-offset: max(2px, 0.15em);
+}
+
+.checkbox:disabled {
+  color: var(--secondary-color);
+  cursor: not-allowed;
+}

src/shared/Spacer/index.lite.tsx

@@ -55,5 +55,5 @@ export default function Spacer(props: SpacerProps) {
     },
   });
 
-  return <div style={{ marginLeft: state.marginLeft, marginTop: state.marginTop }} aria-hidden></div>;
+  return <div style={{ marginLeft: state.marginLeft, marginTop: state.marginTop, display: "inline-block" }} aria-hidden></div>;
 }

src/shared/Well/index.lite.tsx

@@ -0,0 +1,6 @@
+import styles from "./index.module.css";
+
+// Adds a rounded border around some content
+export default function Well(props: { children?: any }) {
+    return <div class={styles.well}>{props.children}</div>
+}

src/shared/Well/index.module.css

@@ -0,0 +1,7 @@
+@import url('../common.module.css');
+
+.well {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--secondary-color);
+  padding: 1.5rem;
+}

src/shared/common.module.css

@@ -23,6 +23,9 @@
   --ring-color: hsl(240 5% 64.9%);
   /* --ring-color: hsl(240 4.9% 83.9%);  dark mode */
   --border-radius: 0.375rem;
+  --alert-color-success: #36d399;
+  --alert-color-info: #3abff8;
+  --alert-color-warning: #fbbd23;
 }
 
 .flex {
@@ -45,7 +48,6 @@
   font-size: 1rem;
   margin-top: 1px;
   outline: none;
-  margin-bottom: 1rem;
 }
 
 .input:focus {

src/shared/types.ts

@@ -18,11 +18,9 @@ export interface EmptyStateProps {
 }
 
 export interface BadgeProps {
-  children?: any;
-  className?: string;
-  color?: string;
-  size?: string;
+  badgeText: string;
   ariaLabel?: string;
+  variant?: 'success' | 'info' | 'warning';
 }
 
 export interface ModalProps {
@@ -68,6 +66,7 @@ export interface CardProps {
 export interface LinkProps {
   href: string;
   linkText: string;
+  cssClass?: string;
   variant?: 'primary' | 'button';
 }
 

src/sso/connections/ConnectionList/index.lite.tsx

@@ -33,7 +33,6 @@ export default function ConnectionList(props: ConnectionListProps) {
           defaultClasses.connectionListContainer
         ),
         td: cssClassAssembler(props.classNames?.td, defaultClasses.td),
-        badgeClass: cssClassAssembler(props.classNames?.badgeClass, defaultClasses.badgeClass),
         spanIcon: cssClassAssembler(props.classNames?.spanIcon, defaultClasses.spanIcon),
         icon: cssClassAssembler(props.classNames?.icon, defaultClasses.icon),
       };
@@ -132,12 +131,10 @@ export default function ConnectionList(props: ConnectionListProps) {
                           {state.connectionDisplayName(connection)}
                           <Show when={connection.isSystemSSO}>
                             <Badge
-                              color='info'
+                              variant='info'
+                              badgeText='system'
                               ariaLabel='is an sso connection for the admin portal'
-                              size='xs'
-                              className={state.classes.badgeClass}>
-                              system
-                            </Badge>
+                            />
                           </Show>
                         </td>
                       </Show>
@@ -158,13 +155,9 @@ export default function ConnectionList(props: ConnectionListProps) {
                           <Show
                             when={connection.deactivated}
                             else={
-                              <Badge color='black' size='md'>
-                                Active
-                              </Badge>
+                              <Badge badgeText='Active' variant='success' />
                             }>
-                            <Badge color='red' size='md'>
-                              Inactive
-                            </Badge>
+                            <Badge badgeText='Inactive' variant='warning' />
                           </Show>
                         </td>
                       </Show>

src/sso/connections/ConnectionsWrapper/index.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, onMount, useStore } from '@builder.io/mitosis';
+import { Show, useStore } from '@builder.io/mitosis';
 import ConnectionList from '../ConnectionList/index.lite';
 import type { ConnectionData, ConnectionsWrapperProp, OIDCSSORecord, SAMLSSORecord } from '../types';
 import cssClassAssembler from '../../utils/cssClassAssembler';

src/sso/connections/CreateConnection/index.lite.tsx

@@ -48,8 +48,9 @@ export default function CreateSSOConnection(props: CreateSSOConnectionProps) {
         </div>
       </Show>
       <div>
+        <h2 class={defaultClasses.heading}>Create SSO Connection</h2>
         <fieldset className={state.classes.container}>
-          <legend className={state.classes.selectSSO}>Select SSO type</legend>
+          <legend className={state.classes.selectSSO}>Select SSO type:</legend>
           <div className={state.classes.formControl}>
             <label className={state.classes.label}>
               <input
@@ -84,7 +85,7 @@ export default function CreateSSOConnection(props: CreateSSOConnectionProps) {
             classNames={props.componentProps.saml.classNames}
             variant={props.componentProps.saml.variant}
             errorCallback={props.componentProps.saml.errorCallback!}
-            successCallback={props.componentProps.saml.successCallback!}></CreateSAMLConnection>
+            successCallback={props.componentProps.saml.successCallback!} displayHeader={false} />
         </Show>
         <Show when={state.connectionIsOIDC}>
           <CreateOIDCConnection
@@ -93,7 +94,7 @@ export default function CreateSSOConnection(props: CreateSSOConnectionProps) {
             classNames={props.componentProps.oidc.classNames}
             variant={props.componentProps.oidc.variant}
             errorCallback={props.componentProps.oidc.errorCallback!}
-            successCallback={props.componentProps.oidc.successCallback!}></CreateOIDCConnection>
+            successCallback={props.componentProps.oidc.successCallback!} displayHeader={false} />
         </Show>
       </div>
     </div>

src/sso/connections/CreateConnection/index.module.css

@@ -1,3 +1,19 @@
+@import url('../../../shared/common.module.css');
+
+.heading {
+  margin: 1.5rem 0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--secondary-foreground-color);
+}
+
+@media (min-width: 768px) {
+  .heading {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
 .formControl {
   display: flex;
   flex-direction: column;
@@ -47,32 +63,26 @@
   /* Not removed via appearance */
   margin: 0;
   font: inherit;
-  color: currentColor;
+  color: var(--primary-color);
   height: 1.5rem /* 24px */;
   width: 1.5rem /* 24px */;
-  border: 0.15rem solid currentColor;
+  border: 1px solid currentColor;
   border-radius: 50%;
   transform: translateY(-0.075rem);
   display: grid;
   place-content: center;
 }
 
-.radio::before {
-  content: '';
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 50%;
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1rem 1rem currentColor;
-}
-
-.radio:checked::before {
-  transform: scale(1);
-}
-
 .radio:focus,
 .radio:checked {
-  outline: max(2px, 0.15rem) solid currentColor;
-  outline-offset: max(2px, 0.15rem);
+  animation: radiomark 0.2s ease-out;
+  background-color: var(--primary-color);
+  box-shadow:
+    0 0 0 4px var(--ring-offset-color) inset,
+    0 0 0 4px var(--ring-offset-color) inset;
+}
+
+.radio:focus-visible {
+  outline: var(--primary-color) solid var(--ring-offset-width, 2px);
+  outline-offset: var(--ring-offset-width, 2px);
 }