@redsift/design-system 7.4.0-alpha.0 → 7.4.0-alpha.1

package/index.d.ts

@@ -772,7 +772,7 @@ type IconSize = ValueOf<typeof IconSize>;
 /**
  * Component props.
  */
-interface IconProps extends ComponentProps<'span'>, StylingProps {
+interface IconProps extends ComponentProps<'span'>, Omit<StylingProps, 'width' | 'height'> {
     /** Indicates whether the element is exposed to an accessibility API. */
     'aria-hidden'?: boolean | 'false' | 'true';
     /** A screen reader only label for the Icon. */
@@ -880,7 +880,7 @@ type BadgeVariant = ValueOf<typeof BadgeVariant>;
 /**
  * Component props.
  */
-interface BadgeProps extends ComponentProps<'div'>, StylingProps {
+interface BadgeProps extends ComponentProps<'div'>, Omit<StylingProps, 'width' | 'height'> {
     /** Whether the badge should automatically break content. */
     autoBreak?: boolean;
     /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */

package/index.js

@@ -768,6 +768,12 @@ const baseGrid = css`
 }}
 `;
 const baseStyling = css`
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  color: var(--redsift-color-neutral-black);
+
   ${baseLayout}
   ${baseSpacing}
   ${baseSizing}
@@ -790,8 +796,10 @@ const baseContainer = css`
  * Component style.
  */
 const StyledIcon = styled.span`
-  font-style: normal;
   position: relative;
+  ${baseStyling}
+
+  font-style: normal;
 
   svg {
     vertical-align: -0.125em;
@@ -911,7 +919,6 @@ const StyledIcon = styled.span`
         `;
   }
 }}
-  ${baseStyling}
 `;
 
 const _excluded$D = ["aria-hidden", "aria-label", "badge", "className", "color", "icon", "size", "svgProps"];
@@ -1422,6 +1429,13 @@ const HeadingVariant = {
  * Component style.
  */
 const StyledHeading = styled.span`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+
   ${baseStyling}
 
   ${_ref => {
@@ -1782,7 +1796,13 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     onPress: appContainerState.collapseSidePanel,
     ref: expandIconButtonRef,
     variant: IconButtonVariant.primary
-  }))) : null, propsTitle && typeof propsTitle !== 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, propsTitle) : typeof propsTitle === 'string' ? /*#__PURE__*/React.createElement("h1", null, propsTitle) : appContainerState && appContainerState.title ? /*#__PURE__*/React.createElement("h1", null, appContainerState.title) : fallbackTitle ? /*#__PURE__*/React.createElement("h1", null, fallbackTitle) : null), /*#__PURE__*/React.createElement("div", {
+  }))) : null, propsTitle && typeof propsTitle !== 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, propsTitle) : typeof propsTitle === 'string' ? /*#__PURE__*/React.createElement(Heading, {
+    as: "h1"
+  }, propsTitle) : appContainerState && appContainerState.title ? /*#__PURE__*/React.createElement(Heading, {
+    as: "h1"
+  }, appContainerState.title) : fallbackTitle ? /*#__PURE__*/React.createElement(Heading, {
+    as: "h1"
+  }, fallbackTitle) : null), /*#__PURE__*/React.createElement("div", {
     className: `${AppBar.className}__right`
   }, children));
 });
@@ -2223,6 +2243,8 @@ const BadgeVariant = {
  * Component style.
  */
 const StyledBadge = styled.div`
+  ${baseStyling}
+
   ${_ref => {
   let {
     $color,
@@ -2283,7 +2305,6 @@ const StyledBadge = styled.div`
         `;
   }
 }}
-  ${baseStyling}
 `;
 
 const _excluded$s = ["autoBreak", "children", "className", "color", "isReversed", "variant"];
@@ -3257,6 +3278,7 @@ BreadcrumbItem.displayName = COMPONENT_NAME$n;
  */
 const StyledBreadcrumbs = styled.nav`
   ${baseStyling}
+
   ol {
     display: inline-flex;
     list-style: none;