@apple-pie/slice-native 0.1.3 → 0.1.6

package/dist/esm/src/theme/type/type.mjs

@@ -0,0 +1,184 @@
+// base family
+const fontFamily = `var(--slice-font-family, "Funnel Sans")`;
+// base weights
+const fontWeights = {
+    regular: 360,
+    medium: 420,
+    bold: 500,
+    extra: 560,
+};
+// base sizes
+const fontSizes = {
+    xs: '0.75rem',
+    s: '0.875rem',
+    m: '0.9375rem',
+    l: '1rem',
+    xl: '1.0625rem',
+    h1: '4.25rem',
+    h2: '3.5rem',
+    h3: '2.75rem',
+    h4: '2rem',
+    h5: '1.5rem',
+    h6: '1.0625rem',
+};
+// base line heights
+const lineHeights = {
+    xs: '116.67%',
+    m: '133.33%',
+    l: '140%',
+    xl: '142.86%',
+    xxl: '162.5%',
+};
+// base letter spacing
+const letterSpacings = {
+    xs: '0.00625em',
+    s: '0.009375em',
+    m: '0.0125em',
+    l: '0.015625em',
+};
+// ** new styles aligned to lyra */
+const type = {
+    'body-xs-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.l}`,
+    'body-s-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-m-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-l-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-xl-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    h1: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h1};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h2: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h2};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h3: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h3};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h4: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h4};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h5: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h5};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h6: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h6};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+};
+
+export { fontSizes, fontWeights, letterSpacings, lineHeights, type };

package/dist/esm/src/utils/typography/typography.mjs

@@ -0,0 +1,15 @@
+/**
+ * Simple utility to take text style and returns a defined line height factor
+ * Since there is no relative/percent in native, looks for the fontsize and
+ * derives an absolute line height from the font size
+ */
+function lineHeightTextStyle(styles, lineHeightFactor = 1.2) {
+    if (!Number.isFinite(lineHeightFactor) || lineHeightFactor < 0 || lineHeightFactor > 2) {
+        throw new Error('lineHeightFactor must be a number between 0 and 2');
+    }
+    const fontSize = styles.fontSize ?? 16;
+    const lineHeight = lineHeightFactor * fontSize;
+    return { ...styles, lineHeight };
+}
+
+export { lineHeightTextStyle };