🚀 Next release 1.6.0

package.json

@@ -89,8 +89,8 @@
     "@babel/types": "^7.17.10",
     "@betterer/cli": "^5.1.7",
     "@betterer/eslint": "^5.1.7",
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
     "@fontsource/inter": "^4.5.15",
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@mdx-js/react": "^1.6.22",

src/components/Accordion/Accordion.stories.tsx

@@ -7,6 +7,7 @@ import { Paragraph, Text } from '../typographyLegacy';
 import { Button } from '../Button';
 import Accordion from './Accordion';
 import { AccordionProps } from './Accordion.types';
+import { TextSizes } from '../typographyLegacy/Text/Text.enums';
 
 export default {
   title: 'components/Accordion',
@@ -53,7 +54,7 @@ const AccordionItemTitle = () => (
   <Stack gap="sm">
     <Inline align="center" gap="md">
       <HexGrade grade="A" size={24} />
-      <Text>Company Name</Text>
+      <Text size={TextSizes.lg}>Company Name</Text>
     </Inline>
     <Paragraph>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/components/Callout/Callout.tsx

@@ -8,7 +8,6 @@ import { getColor, getFontSize, getRadii, pxToRem } from '../../utils';
 import { Inline, Padbox } from '../layout';
 import { Text } from '../typographyLegacy';
 import { Icon } from '../Icon';
-import { TextSizes } from '../typographyLegacy/Text/Text.enums';
 import { SSCIcons } from '../Icon/Icon.types';
 import { SSCIconNames } from '../../theme/icons/icons.enums';
 import { CalloutColors } from './Callout.enums';
@@ -33,7 +32,7 @@ const IconContainer = styled.div<CalloutContainerProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: ${getFontSize('mdPlus')};
+  font-size: ${getFontSize('lg')};
   ${({ $color }) => calloutIconColors[$color]};
 `;
 
@@ -77,9 +76,7 @@ const Callout: React.FC<CalloutProps> = ({
           icon
         )}
       </IconContainer>
-      <Text size={TextSizes.lg} style={{ alignSelf: 'center' }}>
-        {children}
-      </Text>
+      <Text style={{ alignSelf: 'center' }}>{children}</Text>
     </Inline>
   </Container>
 );

src/components/Card/CardHeader.tsx

@@ -24,11 +24,12 @@ export const CardIconButton = styled.button<{
   background-color: ${({ $isActive }) =>
     $isActive ? getColor('primary.50') : 'transparent'};
   border: none;
-  box-sizing: content-box;
   color: ${getColor('neutral.800')};
   display: flex;
+  align-items: center;
   border-radius: ${getRadii('default')};
   padding: ${getSpace(SpaceSizes.sm)};
+  height: 2rem;
   ${(props) =>
     props.as !== 'div' &&
     css`
@@ -82,7 +83,6 @@ const StyledIcon = styled(Icon).withConfig<{ color: Color }>({
   shouldForwardProp: (property) => !includes(property, ['color']),
 })`
   background: ${getColor('neutral.0')};
-  border: 1px solid ${getColor('neutral.0')};
   border-radius: 100%;
   color: ${({ color, theme }) =>
     isNotUndefined(color) ? getColor(color, { theme }) : 'inherit'};

src/components/forms/Password/Password.tsx

@@ -28,6 +28,7 @@ const ToggleButton = styled.button`
   width: ${pxToRem(16)};
   position: absolute;
   top: 0;
+  bottom: 0;
   right: 0;
   ${({ theme }) =>
     createPadding({

src/components/forms/Range/Range.tsx

@@ -206,7 +206,7 @@ const Range = forwardRef<HTMLInputElement, RangeProps>(
                 $left={calcPercentage(rangeValue, min, max)}
                 isDisabled={isDisabled}
               >
-                {rangeValue}
+                <Text>{rangeValue}</Text>
               </RangeValue>
             </RangeValueContainer>
           </Stack>

src/components/forms/Select/Select.styles.tsx

@@ -175,6 +175,7 @@ export const selectStyles: (
       fontSize: DSTheme.typography.size.md,
       lineHeight: DSTheme.typography.lineHeight.md,
       display: isEmptyString(children) ? 'none' : 'block',
+      position: 'absolute',
     }),
     indicatorsContainer: (styles) => ({
       ...styles,

src/components/typographyLegacy/Paragraph/Paragraph.tsx

@@ -27,7 +27,7 @@ Paragraph.propTypes = {
 };
 
 Paragraph.defaultProps = {
-  size: TextSizes.lg,
+  size: TextSizes.md,
   variant: TextVariants.primary,
   as: 'p',
 };

src/components/typographyLegacy/Text/Text.tsx

@@ -119,7 +119,7 @@ Text.propTypes = {
 };
 
 Text.defaultProps = {
-  size: TextSizes.lg,
+  size: TextSizes.md,
   variant: TextVariants.primary,
   isBold: false,
 };
@@ -129,12 +129,14 @@ export default Text;
 export const Strong = styled(Text).attrs<StrongProps>(() => ({
   as: 'strong',
   isBold: true,
-  size: TextSizes.inherit,
 }))``;
 
 Strong.propTypes = {
   variant: PropTypes.oneOf(Object.values(TextVariants)),
 };
+Strong.defaultProps = {
+  size: TextSizes.inherit,
+};
 
 export const Code = styled(Text).attrs<CodeProps>(() => ({
   variant: TextVariants.monospace,

src/theme/GlobalStyles/GlobalStyles.tsx

@@ -50,7 +50,7 @@ export default createGlobalStyle`
     background: ${getColor('neutral.0')};
     font-family: ${getFontFamily('base')};
     font-weight: ${getFontWeight('regular')};
-    font-size: ${pxToRem(BASE_FONT_SIZE)};
+    font-size: ${pxToRem(BASE_FONT_SIZE * 0.875)};
     line-height: ${pxToRem(BASE_LINE_HEIGHT)};
     color: ${getColor('neutral.900')};
   }

visual-regressions/yarn.lock

@@ -2142,20 +2142,20 @@ __metadata:
   linkType: hard
 
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0":
-  version: 5.7.1
-  resolution: "semver@npm:5.7.1"
+  version: 5.7.2
+  resolution: "semver@npm:5.7.2"
   bin:
-    semver: ./bin/semver
-  checksum: 57fd0acfd0bac382ee87cd52cd0aaa5af086a7dc8d60379dfe65fea491fb2489b6016400813930ecd61fd0952dae75c115287a1b16c234b1550887117744dfaf
+    semver: bin/semver
+  checksum: fb4ab5e0dd1c22ce0c937ea390b4a822147a9c53dbd2a9a0132f12fe382902beef4fbf12cf51bb955248d8d15874ce8cd89532569756384f994309825f10b686
   languageName: node
   linkType: hard
 
 "semver@npm:^6.0.0":
-  version: 6.3.0
-  resolution: "semver@npm:6.3.0"
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
   bin:
-    semver: ./bin/semver.js
-  checksum: 1b26ecf6db9e8292dd90df4e781d91875c0dcc1b1909e70f5d12959a23c7eebb8f01ea581c00783bbee72ceeaad9505797c381756326073850dc36ed284b21b9
+    semver: bin/semver.js
+  checksum: ae47d06de28836adb9d3e25f22a92943477371292d9b665fb023fae278d345d508ca1958232af086d85e0155aee22e313e100971898bbb8d5d89b8b1d4054ca2
   languageName: node
   linkType: hard