@hlf-fe/pulmo-ui 1.0.0

package/dist/styles/mixins.js

@@ -0,0 +1,353 @@
+import { css } from "styled-components";
+import { BREAKPOINT_VALUES, VARIABLES, SPACING, COLORS } from "./theme";
+import { rem, em, relUnit } from "./units";
+export const media = {
+    XS: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.XS)}) {
+      ${css(...args)};
+    }
+  `,
+    S: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.S)}) {
+      ${css(...args)};
+    }
+  `,
+    S_ALT: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.S_ALT)}) {
+      ${css(...args)};
+    }
+  `,
+    M: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.M)}) {
+      ${css(...args)};
+    }
+  `,
+    L: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.L)}) {
+      ${css(...args)};
+    }
+  `,
+    XL: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.XL)}) {
+      ${css(...args)};
+    }
+  `,
+    XXL: (...args) => css `
+    @media (min-width: ${em(BREAKPOINT_VALUES.XXL)}) {
+      ${css(...args)};
+    }
+  `,
+    IOS: (...args) => css `
+    @supports (-webkit-touch-callout: none) {
+      ${css(...args)};
+    }
+  `,
+};
+export const dynamicFontSize = (minFontSize, maxFontSize, minScreenWidth = BREAKPOINT_VALUES.XS, maxScreenWidth = BREAKPOINT_VALUES.XXL) => `
+  font-size: ${rem(minFontSize)};
+  @media screen and (min-width: ${em(minScreenWidth)}) {
+    font-size: calc(${rem(minFontSize)} + (${relUnit(maxFontSize)} - ${relUnit(minFontSize)}) * ((100vw - ${em(minScreenWidth)}) / (${relUnit(maxScreenWidth)} - ${relUnit(minScreenWidth)})));
+  }
+  @media screen and (min-width: ${em(maxScreenWidth)}) {
+    font-size: ${rem(maxFontSize)};
+  }
+`;
+export const siteWidthRowS = () => css `
+  margin-left: ${SPACING.spacingXS};
+  margin-right: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+  max-width: ${VARIABLES.siteWidthS};
+
+  ${media.XS `
+    margin-left: ${SPACING.spacingM};
+    margin-right: ${SPACING.spacingM};
+  `}
+
+  ${media.S_ALT `
+    margin-left: auto;
+    margin-right: auto;
+  `}
+
+  ${media.M `
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+  `}
+
+  ${media.L `
+    margin-top: ${SPACING.spacingXXL};
+    margin-bottom: ${SPACING.spacingXXL};
+  `}
+`;
+export const siteWidthRow = () => css `
+  margin-left: ${SPACING.spacingXS};
+  margin-right: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+  max-width: ${VARIABLES.siteWidth};
+
+  ${media.XS `
+    margin-left: ${SPACING.spacingM};
+    margin-right: ${SPACING.spacingM};
+  `}
+
+  ${media.M `
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+    margin-left: ${rem(24)};
+    margin-right: ${rem(24)};
+  `}
+
+  ${media.L `
+    margin-top: ${SPACING.spacingXXL};
+    margin-right: auto;
+    margin-bottom: ${SPACING.spacingXXL};
+    margin-left: auto;
+  `}
+`;
+export const siteWidthRowXL = () => css `
+  margin-left: ${SPACING.spacingXS};
+  margin-right: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+  max-width: ${VARIABLES.siteWidthXL};
+
+  ${media.XS `
+    margin-left: ${SPACING.spacingM};
+    margin-right: ${SPACING.spacingM};
+  `}
+
+  ${media.M `
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+    margin-left: ${rem(24)};
+    margin-right: ${rem(24)};
+  `}
+
+  ${media.XL `
+    margin-top: ${SPACING.spacingXXL};
+    margin-right: auto;
+    margin-bottom: ${SPACING.spacingXXL};
+    margin-left: auto;
+  `}
+`;
+export const fullWidthRow = () => css `
+  padding-top: ${SPACING.spacingL};
+  padding-right: ${SPACING.spacingXS};
+  padding-bottom: ${SPACING.spacingL};
+  padding-left: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+
+  ${media.XS `
+    padding-left: ${SPACING.spacingM};
+    padding-right: ${SPACING.spacingM};
+  `}
+
+  ${media.M `
+    padding-top: ${SPACING.spacingXL};
+    padding-right: ${rem(24)};
+    padding-bottom: ${SPACING.spacingXL};
+    padding-left: ${rem(24)};
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+  `}
+
+  ${media.L `
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: ${SPACING.spacingXXL};
+    margin-top: ${SPACING.spacingXXL};
+  `}
+`;
+export const fontSize = {
+    XS: () => css `
+    font-size: ${rem(14)};
+    line-height: ${rem(20)};
+  `,
+    S: () => css `
+    font-size: ${rem(16)};
+    line-height: ${rem(20)};
+
+    ${media.M `
+      line-height: ${rem(24)};
+    `}
+  `,
+    M: () => css `
+    font-size: ${rem(18)};
+    line-height: ${rem(24)};
+
+    ${media.M `
+      font-size: ${rem(20)};
+      line-height: ${rem(28)};
+    `}
+  `,
+    L: () => css `
+    font-size: ${rem(20)};
+    line-height: ${rem(28)};
+
+    ${media.M `
+      font-size: ${rem(24)};
+      line-height: ${rem(32)};
+    `}
+
+    ${media.L `
+      font-size: ${rem(28)};
+      line-height: ${rem(40)};
+    `}
+  `,
+    XL: () => css `
+    font-size: ${rem(28)};
+    line-height: ${rem(36)};
+
+    ${media.M `
+      font-size: ${rem(36)};
+      line-height: ${rem(48)};
+    `}
+
+    ${media.L `
+      font-size: ${rem(44)};
+      line-height: ${rem(52)};
+    `}
+  `,
+    XXL: () => css `
+    font-size: ${rem(40)};
+    line-height: ${rem(52)};
+
+    ${media.M `
+      font-size: ${rem(56)};
+      line-height: ${rem(72)};
+    `}
+
+    ${media.L `
+      font-size: ${rem(64)};
+      line-height: ${rem(80)};
+    `}
+  `,
+};
+export const arrow = ({ color = COLORS?.lilac }) => css `
+  content: "";
+  display: block;
+  padding: ${rem(10)};
+  background: ${color};
+  bottom: 0;
+  transform: translateX(-50%) rotate(45deg);
+  left: 50%;
+  bottom: ${rem(-30)};
+  position: absolute;
+`;
+export const buttonSize = {
+    S: () => css `
+    font-size: ${rem(14)};
+    height: ${rem(32)};
+    padding: 0 ${rem(16)};
+  `,
+    M: () => css `
+    font-size: ${rem(16)};
+    height: ${rem(44)};
+    padding: 0 ${rem(24)};
+  `,
+    L: () => css `
+    font-size: ${rem(18)};
+    height: ${rem(56)};
+    padding: 0 ${rem(24)};
+  `,
+};
+export const alertTheme = {
+    error: () => css `
+    background-color: ${COLORS.pink};
+    border: ${rem(1)} solid rgba(216, 17, 37, 0.4);
+    font-size: ${rem(14)};
+  `,
+    warning: () => css `
+    background-color: ${COLORS.yellowLight};
+    border: ${rem(1)} solid ${COLORS.yellowDark};
+    font-size: ${rem(14)};
+  `,
+    info: () => css `
+    background-color: ${COLORS.lightBlue};
+    border: ${rem(1)} solid ${COLORS.mediumBlue};
+    font-size: ${rem(14)};
+  `,
+    success: () => css `
+    background-color: ${COLORS.mint};
+    border: none;
+  `,
+    default: () => css `
+    background-color: ${COLORS.lightBlue};
+    border: none;
+  `,
+};
+export const boxShadow = {
+    default: () => css `
+    box-shadow: rgba(0, 0, 0, 0.2) 0rem 0.75rem 1.75rem 0rem,
+      rgba(0, 0, 0, 0.1) 0rem 0.125rem 0.25rem 0rem,
+      rgba(255, 255, 255, 0.05) 0rem 0rem 0rem 0.063rem inset;
+  `,
+};
+export const buttonLinkStyling = {
+    inverted: () => css `
+    display: block;
+    font-family: ${({ theme }) => theme.valueBold};
+    font-weight: 400;
+    font-size: ${rem(16)};
+    width: fit-content;
+    color: ${({ theme }) => theme.red};
+    background-color: transparent;
+    border: ${rem(2)} solid ${({ theme }) => theme.red};
+    border-radius: ${rem(5)};
+    transition: background-color 0.3s ease-out;
+    padding: 0 ${rem(24)};
+    line-height: 2.5;
+    text-decoration: none;
+
+    &:hover,
+    :active,
+    :focus-visible {
+      background-color: ${({ theme }) => theme.red};
+      color: ${({ theme }) => theme.white};
+    }
+
+    &:focus-visible {
+      outline: ${rem(2)} solid ${({ theme }) => theme.blackLight};
+      outline-offset: ${rem(2)};
+    }
+  `,
+    text: () => css `
+    font-family: ${({ theme }) => theme.valueBold};
+    font-weight: 400;
+    font-size: ${rem(16)};
+    width: fit-content;
+    color: ${({ theme }) => theme.red};
+    text-decoration: underline;
+    text-decoration-thickness: ${rem(2)};
+    text-underline-offset: ${rem(6)};
+    line-height: ${rem(26)};
+    outline-offset: ${rem(2)};
+
+    ${media.L `
+      font-size: ${rem(18)};
+    `}
+
+    &:hover, :active, :focus-visible {
+      color: ${({ theme }) => theme.redHover};
+      text-decoration: none;
+    }
+  `,
+};
+export const linkStyling = ({ fontSize = 16 }) => css `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.redClear};
+  font-size: ${rem(fontSize)};
+  line-height: ${rem(22)};
+  font-weight: 400;
+  text-decoration: underline;
+  outline-offset: ${rem(2)};
+
+  &:hover,
+  :active,
+  :focus-visible {
+    color: ${({ theme }) => theme.redHover};
+    text-decoration: none;
+  }
+`;

package/dist/styles/styles/mixins/theme-mixins.d.ts

@@ -0,0 +1,5 @@
+import { SIZES, THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME } from '../../models/theme';
+export declare const themeColors: (color: THEME_COLORS_BY_HEX | THEME_COLORS_BY_NAME) => any;
+export declare const themeSpacing: (size: SIZES) => any;
+export declare const themeBorderRadius: (size: "sm" | "md" | "lg") => string;
+export declare const themeElevation: (elevation: 0 | 1) => string;

package/dist/styles/styles/mixins/theme-mixins.js

@@ -0,0 +1,37 @@
+import { COLORS, THEME_SPACING } from '../theme';
+import { rem } from './units';
+export const themeColors = (color) => {
+    const THEME_COLORS = {
+        green: COLORS.mint,
+        blue: COLORS.skyBlue,
+        purple: COLORS.lavender,
+        pink: COLORS.pink,
+        white: COLORS.white,
+    };
+    return THEME_COLORS[color] || color;
+};
+export const themeSpacing = (size) => {
+    const THEME_SPACING_SIZES = {
+        sm: THEME_SPACING.sm,
+        md: THEME_SPACING.md,
+        lg: THEME_SPACING.lg,
+        xl: THEME_SPACING.xl,
+        none: '0',
+    };
+    return THEME_SPACING_SIZES[size] || THEME_SPACING.md;
+};
+export const themeBorderRadius = (size) => {
+    const BORDER_RADIUS = {
+        sm: rem(6),
+        md: rem(8),
+        lg: rem(12),
+    };
+    return BORDER_RADIUS[size] || BORDER_RADIUS.sm;
+};
+export const themeElevation = (elevation) => {
+    const ELEVETION = {
+        0: 'none',
+        1: `0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08)`,
+    };
+    return ELEVETION[elevation] || ELEVETION[0];
+};

package/dist/styles/styles/mixins/units.d.ts

@@ -0,0 +1,3 @@
+export declare const relUnit: (absoluteUnit: number) => number;
+export declare const rem: (absoluteUnit: number) => string;
+export declare const em: (absoluteUnit: number) => string;

package/dist/styles/styles/mixins/units.js

@@ -0,0 +1,3 @@
+export const relUnit = (absoluteUnit) => absoluteUnit / 16;
+export const rem = (absoluteUnit) => `${relUnit(absoluteUnit)}rem`;
+export const em = (absoluteUnit) => `${relUnit(absoluteUnit)}em`;

package/dist/styles/styles/mixins.d.ts

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+import { em, rem } from './mixins/units';
+import { themeColors, themeSpacing, themeBorderRadius, themeElevation } from './mixins/theme-mixins';
+export { themeColors, themeSpacing, themeBorderRadius, themeElevation, em, rem };
+export declare const media: {
+    XS: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    S: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    S_ALT: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    M: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    L: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    XL: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    XXL: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+    IOS: (styles: import("styled-components/dist/types").Styles<object>, ...interpolations: import("styled-components").Interpolation<object>[]) => import("styled-components").RuleSet<object>;
+};
+export declare const siteWidthRowS: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRow: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRowXL: () => import("styled-components").RuleSet<object>;
+export declare const fullWidthRow: () => import("styled-components").RuleSet<object>;
+export declare const fontSize: {
+    XS: () => import("styled-components").RuleSet<object>;
+    S: () => import("styled-components").RuleSet<object>;
+    M: () => import("styled-components").RuleSet<object>;
+    L: () => import("styled-components").RuleSet<object>;
+    XL: () => import("styled-components").RuleSet<object>;
+    XXL: () => import("styled-components").RuleSet<object>;
+};
+export declare const buttonSize: {
+    S: () => import("styled-components").RuleSet<object>;
+    M: () => import("styled-components").RuleSet<object>;
+    L: () => import("styled-components").RuleSet<object>;
+};
+export declare const alertTheme: {
+    error: () => import("styled-components").RuleSet<object>;
+    warning: () => import("styled-components").RuleSet<object>;
+    info: () => import("styled-components").RuleSet<object>;
+    success: () => import("styled-components").RuleSet<object>;
+    default: () => import("styled-components").RuleSet<object>;
+};
+export declare const boxShadow: {
+    default: () => import("styled-components").RuleSet<object>;
+};
+export declare const buttonLinkStyling: {
+    inverted: () => import("styled-components").RuleSet<object>;
+    text: () => import("styled-components").RuleSet<object>;
+};
+export declare const linkStyling: ({ fontSize }: {
+    fontSize?: number;
+}) => import("styled-components").RuleSet<object>;