braid-design-system - npm Package Compare versions

Comparing version 0.0.38 to 0.0.39

lib/atoms/font/makeFontSizes.ts

 import { TextDefinition } from './../utils/alignTextToGrid';
 import alignTextToGrid from '../utils/alignTextToGrid';
-import { px } from '../utils/toUnit';
 import makeDesktopRules from '../utils/makeDesktopRules';
@@ -17,4 +16,2 @@ import { Tokens, Breakpoint } from '../../themes/theme';
 const makeRules = (responsiveType: Breakpoint, tokens: Tokens) => {
-  const interactionHeight = tokens.interactionRows * tokens.rowHeight;
-
   const standardRules = getFontSizeRules(
@@ -24,7 +21,2 @@ tokens.text.standard[responsiveType],
   );
-  const interactionPadding = px(
-    (interactionHeight -
-      tokens.text.standard[responsiveType].rows * tokens.rowHeight) /
-      2,
-  );
 
@@ -37,7 +29,2 @@ return {
     ),
-    '.fontSize_interaction': {
-      ...standardRules,
-      paddingTop: interactionPadding,
-      paddingBottom: interactionPadding,
-    },
     '.fontSize_level1': getFontSizeRules(
@@ -44,0 +31,0 @@ tokens.heading.level1[responsiveType],

lib/atoms/makePadding.ts

@@ -1,19 +0,47 @@
-import { Tokens } from '../themes/theme';
+import { Tokens, Breakpoint } from '../themes/theme';
 import rowSpacingForCssRule from './utils/rowSpacingForCssRule';
 import columnSpacingForCssRule from './utils/columnSpacingForCssRule';
 import makeDesktopRules from './utils/makeDesktopRules';
+import { px } from './utils/toUnit';
 
-const makePaddingRules = (tokens: Tokens, suffix = '') => ({
-  ...rowSpacingForCssRule(`paddingTop${suffix}`, 'paddingTop', tokens),
-  ...columnSpacingForCssRule(`paddingRight${suffix}`, 'paddingRight', tokens),
-  ...rowSpacingForCssRule(`paddingBottom${suffix}`, 'paddingBottom', tokens),
-  ...columnSpacingForCssRule(`paddingLeft${suffix}`, 'paddingLeft', tokens),
-});
+const touchablePaddingRules = (
+  tokens: Tokens,
+  suffix: string,
+  breakpoint: Breakpoint,
+) => {
+  const touchableHeight = tokens.touchableRows * tokens.rowHeight;
+  const touchablePadding = px(
+    (touchableHeight -
+      tokens.text.standard[breakpoint].rows * tokens.rowHeight) /
+      2,
+  );
 
+  return {
+    [`.paddingTop${suffix}_standardTouchableText`]: {
+      paddingTop: touchablePadding,
+    },
+    [`.paddingBottom${suffix}_standardTouchableText`]: {
+      paddingBottom: touchablePadding,
+    },
+  };
+};
+
+const makePaddingRules = (tokens: Tokens, breakpoint: Breakpoint) => {
+  const suffix = breakpoint === 'desktop' ? 'Desktop' : '';
+
+  return {
+    ...rowSpacingForCssRule(`paddingTop${suffix}`, 'paddingTop', tokens),
+    ...columnSpacingForCssRule(`paddingRight${suffix}`, 'paddingRight', tokens),
+    ...rowSpacingForCssRule(`paddingBottom${suffix}`, 'paddingBottom', tokens),
+    ...columnSpacingForCssRule(`paddingLeft${suffix}`, 'paddingLeft', tokens),
+    ...touchablePaddingRules(tokens, suffix, breakpoint),
+  };
+};
+
 export default (tokens: Tokens) => ({
-  ...makePaddingRules(tokens),
+  ...makePaddingRules(tokens, 'mobile'),
   ...makeDesktopRules({
     tokens,
-    css: makePaddingRules(tokens, 'Desktop'),
+    css: makePaddingRules(tokens, 'desktop'),
   }),
 });

lib/atoms/normalizeAtoms.ts

@@ -67,3 +67,2 @@ import { Atoms } from '../themes/theme';
   fontSize: {
-    interaction: atoms.fontSize_interaction,
     large: atoms.fontSize_large,
@@ -179,2 +178,3 @@ level1: atoms.fontSize_level1,
     xxsmall: atoms.paddingBottom_xxsmall,
+    standardTouchableText: atoms.paddingBottom_standardTouchableText,
   },
@@ -190,2 +190,3 @@ paddingTop: {
     xxsmall: atoms.paddingTop_xxsmall,
+    standardTouchableText: atoms.paddingTop_standardTouchableText,
   },
@@ -223,2 +224,3 @@ paddingLeft: {
     xxsmall: atoms.paddingBottomDesktop_xxsmall,
+    standardTouchableText: atoms.paddingBottom_standardTouchableText,
   },
@@ -234,2 +236,3 @@ paddingTopDesktop: {
     xxsmall: atoms.paddingTopDesktop_xxsmall,
+    standardTouchableText: atoms.paddingTopDesktop_standardTouchableText,
   },
@@ -236,0 +239,0 @@ paddingLeftDesktop: {

lib/atoms/types.ts

@@ -46,3 +46,2 @@ export interface Css {
   fontFamily_text: string;
-  fontSize_interaction: string;
   fontSize_large: string;
@@ -136,2 +135,3 @@ fontSize_level1: string;
   paddingBottomDesktop_xxsmall: string;
+  paddingBottomDesktop_standardTouchableText: string;
   paddingBottom_large: string;
@@ -141,2 +141,3 @@ paddingBottom_medium: string;
   paddingBottom_small: string;
+  paddingBottom_standardTouchableText: string;
   paddingBottom_xlarge: string;
@@ -190,2 +191,3 @@ paddingBottom_xsmall: string;
   paddingTopDesktop_xxsmall: string;
+  paddingTopDesktop_standardTouchableText: string;
   paddingTop_large: string;
@@ -195,2 +197,3 @@ paddingTop_medium: string;
   paddingTop_small: string;
+  paddingTop_standardTouchableText: string;
   paddingTop_xlarge: string;
@@ -197,0 +200,0 @@ paddingTop_xsmall: string;

lib/components/private/getCheckboxRadioSize.ts

@@ -7,5 +7,5 @@ import { Theme } from '../../themes/theme';
   const scale = theme.tokens.text.standard.mobile.size / 28;
-  const rows = Math.round(theme.tokens.interactionRows * scale);
+  const rows = Math.round(theme.tokens.touchableRows * scale);
 
   return rows * theme.tokens.rowHeight;
 };

lib/themes/jobStreet/atoms.css.js.d.ts

@@ -43,3 +43,2 @@ // This file is automatically generated.
 export const fontFamily_text: string;
-export const fontSize_interaction: string;
 export const fontSize_large: string;
@@ -129,2 +128,3 @@ export const fontSize_level1: string;
 export const paddingBottomDesktop_small: string;
+export const paddingBottomDesktop_standardTouchableText: string;
 export const paddingBottomDesktop_xlarge: string;
@@ -138,2 +138,3 @@ export const paddingBottomDesktop_xsmall: string;
 export const paddingBottom_small: string;
+export const paddingBottom_standardTouchableText: string;
 export const paddingBottom_xlarge: string;
@@ -183,2 +184,3 @@ export const paddingBottom_xsmall: string;
 export const paddingTopDesktop_small: string;
+export const paddingTopDesktop_standardTouchableText: string;
 export const paddingTopDesktop_xlarge: string;
@@ -192,2 +194,3 @@ export const paddingTopDesktop_xsmall: string;
 export const paddingTop_small: string;
+export const paddingTop_standardTouchableText: string;
 export const paddingTop_xlarge: string;
@@ -194,0 +197,0 @@ export const paddingTop_xsmall: string;

lib/themes/jobStreet/tokens.ts

@@ -6,3 +6,3 @@ import { Tokens } from '../../themes/theme';
   columnWidth: 4,
-  interactionRows: 11,
+  touchableRows: 11,
   responsiveBreakpoint: 768,
@@ -9,0 +9,0 @@ descenderHeightScale: 0.13,

lib/themes/seekAnz/atoms.css.js.d.ts

@@ -43,3 +43,2 @@ // This file is automatically generated.
 export const fontFamily_text: string;
-export const fontSize_interaction: string;
 export const fontSize_large: string;
@@ -129,2 +128,3 @@ export const fontSize_level1: string;
 export const paddingBottomDesktop_small: string;
+export const paddingBottomDesktop_standardTouchableText: string;
 export const paddingBottomDesktop_xlarge: string;
@@ -138,2 +138,3 @@ export const paddingBottomDesktop_xsmall: string;
 export const paddingBottom_small: string;
+export const paddingBottom_standardTouchableText: string;
 export const paddingBottom_xlarge: string;
@@ -183,2 +184,3 @@ export const paddingBottom_xsmall: string;
 export const paddingTopDesktop_small: string;
+export const paddingTopDesktop_standardTouchableText: string;
 export const paddingTopDesktop_xlarge: string;
@@ -192,2 +194,3 @@ export const paddingTopDesktop_xsmall: string;
 export const paddingTop_small: string;
+export const paddingTop_standardTouchableText: string;
 export const paddingTop_xlarge: string;
@@ -194,0 +197,0 @@ export const paddingTop_xsmall: string;

lib/themes/seekAnz/tokens.ts

@@ -6,3 +6,3 @@ import { Tokens } from '../../themes/theme';
   columnWidth: 5,
-  interactionRows: 8,
+  touchableRows: 8,
   responsiveBreakpoint: 740,
@@ -9,0 +9,0 @@ descenderHeightScale: 0.16,

lib/themes/seekAsia/atoms.css.js.d.ts

@@ -43,3 +43,2 @@ // This file is automatically generated.
 export const fontFamily_text: string;
-export const fontSize_interaction: string;
 export const fontSize_large: string;
@@ -129,2 +128,3 @@ export const fontSize_level1: string;
 export const paddingBottomDesktop_small: string;
+export const paddingBottomDesktop_standardTouchableText: string;
 export const paddingBottomDesktop_xlarge: string;
@@ -138,2 +138,3 @@ export const paddingBottomDesktop_xsmall: string;
 export const paddingBottom_small: string;
+export const paddingBottom_standardTouchableText: string;
 export const paddingBottom_xlarge: string;
@@ -183,2 +184,3 @@ export const paddingBottom_xsmall: string;
 export const paddingTopDesktop_small: string;
+export const paddingTopDesktop_standardTouchableText: string;
 export const paddingTopDesktop_xlarge: string;
@@ -192,2 +194,3 @@ export const paddingTopDesktop_xsmall: string;
 export const paddingTop_small: string;
+export const paddingTop_standardTouchableText: string;
 export const paddingTop_xlarge: string;
@@ -194,0 +197,0 @@ export const paddingTop_xsmall: string;

lib/themes/seekAsia/tokens.ts

@@ -6,3 +6,3 @@ import { Tokens } from '../../themes/theme';
   columnWidth: 4,
-  interactionRows: 11,
+  touchableRows: 11,
   responsiveBreakpoint: 768,
@@ -9,0 +9,0 @@ descenderHeightScale: 0.13,

lib/themes/theme.d.ts

@@ -30,3 +30,3 @@ // Text definitions
   columnWidth: number;
-  interactionRows: number;
+  touchableRows: number;
   responsiveBreakpoint: number;
@@ -71,3 +71,3 @@ descenderHeightScale: number;
 type FontFamilyVariants = 'text';
-type FontSizeVariant = TextSize | HeadingSize | 'interaction';
+type FontSizeVariant = TextSize | HeadingSize;
 export type FontWeightVariants = 'regular' | 'medium' | 'strong';
@@ -166,3 +166,3 @@ export type DisplayVariants =
   | 'largeTextInline';
-type SpacingVariants =
+type SpacingVariant =
   | 'none'
@@ -176,3 +176,4 @@ | 'xxsmall'
   | 'xxlarge';
-type HorizontalSpacingVariants = SpacingVariants | 'gutter';
+type HorizontalSpacingVariant = SpacingVariant | 'gutter';
+type VerticalPaddingVariant = SpacingVariant | 'standardTouchableText';
 export type TransformVariant =
@@ -199,18 +200,18 @@ | 'standardText'
   height: Record<SizeVariants, string>;
-  marginTop: Record<SpacingVariants, string>;
-  marginRight: Record<HorizontalSpacingVariants, string>;
-  marginBottom: Record<SpacingVariants, string>;
-  marginLeft: Record<HorizontalSpacingVariants, string>;
-  marginTopDesktop: Record<SpacingVariants, string>;
-  marginRightDesktop: Record<HorizontalSpacingVariants, string>;
-  marginBottomDesktop: Record<SpacingVariants, string>;
-  marginLeftDesktop: Record<HorizontalSpacingVariants, string>;
-  paddingTop: Record<SpacingVariants, string>;
-  paddingRight: Record<HorizontalSpacingVariants, string>;
-  paddingBottom: Record<SpacingVariants, string>;
-  paddingLeft: Record<HorizontalSpacingVariants, string>;
-  paddingTopDesktop: Record<SpacingVariants, string>;
-  paddingRightDesktop: Record<HorizontalSpacingVariants, string>;
-  paddingBottomDesktop: Record<SpacingVariants, string>;
-  paddingLeftDesktop: Record<HorizontalSpacingVariants, string>;
+  marginTop: Record<SpacingVariant, string>;
+  marginRight: Record<HorizontalSpacingVariant, string>;
+  marginBottom: Record<SpacingVariant, string>;
+  marginLeft: Record<HorizontalSpacingVariant, string>;
+  marginTopDesktop: Record<SpacingVariant, string>;
+  marginRightDesktop: Record<HorizontalSpacingVariant, string>;
+  marginBottomDesktop: Record<SpacingVariant, string>;
+  marginLeftDesktop: Record<HorizontalSpacingVariant, string>;
+  paddingTop: Record<VerticalPaddingVariant, string>;
+  paddingRight: Record<HorizontalSpacingVariant, string>;
+  paddingBottom: Record<VerticalPaddingVariant, string>;
+  paddingLeft: Record<HorizontalSpacingVariant, string>;
+  paddingTopDesktop: Record<VerticalPaddingVariant, string>;
+  paddingRightDesktop: Record<HorizontalSpacingVariant, string>;
+  paddingBottomDesktop: Record<VerticalPaddingVariant, string>;
+  paddingLeftDesktop: Record<HorizontalSpacingVariant, string>;
   display: Record<DisplayVariants, string>;
@@ -217,0 +218,0 @@ displayDesktop: Record<DisplayVariants, string>;

lib/themes/wireframe/atoms.css.js.d.ts

@@ -43,3 +43,2 @@ // This file is automatically generated.
 export const fontFamily_text: string;
-export const fontSize_interaction: string;
 export const fontSize_large: string;
@@ -129,2 +128,3 @@ export const fontSize_level1: string;
 export const paddingBottomDesktop_small: string;
+export const paddingBottomDesktop_standardTouchableText: string;
 export const paddingBottomDesktop_xlarge: string;
@@ -138,2 +138,3 @@ export const paddingBottomDesktop_xsmall: string;
 export const paddingBottom_small: string;
+export const paddingBottom_standardTouchableText: string;
 export const paddingBottom_xlarge: string;
@@ -183,2 +184,3 @@ export const paddingBottom_xsmall: string;
 export const paddingTopDesktop_small: string;
+export const paddingTopDesktop_standardTouchableText: string;
 export const paddingTopDesktop_xlarge: string;
@@ -192,2 +194,3 @@ export const paddingTopDesktop_xsmall: string;
 export const paddingTop_small: string;
+export const paddingTop_standardTouchableText: string;
 export const paddingTop_xlarge: string;
@@ -194,0 +197,0 @@ export const paddingTop_xsmall: string;

lib/themes/wireframe/tokens.ts

@@ -6,3 +6,3 @@ import { Tokens } from '../theme';
   columnWidth: 5,
-  interactionRows: 8,
+  touchableRows: 8,
   responsiveBreakpoint: 768,
@@ -9,0 +9,0 @@ descenderHeightScale: 0.16,

package.json

 {
   "name": "braid-design-system",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "Themeable design system for the SEEK Group",
@@ -120,3 +120,3 @@ "main": "lib/components/index.ts",
     "semantic-release": "^15.10.8",
-    "sku": "8.2.0",
+    "sku": "8.2.2",
     "style-loader": "^0.23.1",
@@ -123,0 +123,0 @@ "surge": "^0.20.1",

No alert changes

Improved metrics

Total package byte prevSize

6672858

increased by0.2%

Lines of code

49729

increased by0.29%

No dependency changes