@hlf-fe/pulmo-ui 1.0.0

package/dist/styles/styles/mixins.js

@@ -0,0 +1,336 @@
+import { css } from 'styled-components';
+import { BREAKPOINT_VALUES, VARIABLES, SPACING, COLORS } from './theme';
+import { em, rem } from './mixins/units';
+import { themeColors, themeSpacing, themeBorderRadius, themeElevation, } from './mixins/theme-mixins';
+export { themeColors, themeSpacing, themeBorderRadius, themeElevation, em, rem };
+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 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 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/theme.d.ts

@@ -0,0 +1,135 @@
+export declare const BREAKPOINT_VALUES: {
+    XS: number;
+    S: number;
+    S_ALT: number;
+    M: number;
+    L: number;
+    XL: number;
+    XXL: number;
+};
+export declare const VARIABLES: {
+    siteWidthS: string;
+    siteWidth: string;
+    siteWidthXL: string;
+    siteMaxWidth: string;
+    mobileNavHeight: number;
+};
+export declare const THEME_SPACING: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const SPACING: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+};
+export declare const FONTS: {
+    valueRegular: string;
+    valueMedium: string;
+    valueBold: string;
+};
+export declare const COLORS: {
+    skyBlue: string;
+    black: string;
+    blackLight: string;
+    blackGray: string;
+    blueLight: string;
+    blueLightGray: string;
+    blue: string;
+    blueNavy: string;
+    blackCoral: string;
+    cadetBlue: string;
+    grayLight: string;
+    gray: string;
+    grayDark: string;
+    grayTransparent: string;
+    grayPale: string;
+    green: string;
+    white: string;
+    offWhite: string;
+    redLight: string;
+    red: string;
+    redSecondary: string;
+    redDark: string;
+    redHover: string;
+    redClear: string;
+    redWCAG: string;
+    pink: string;
+    lightBlue: string;
+    mediumBlue: string;
+    mint: string;
+    lilac: string;
+    lavender: string;
+    purple: string;
+    smokeGray: string;
+    yellowLight: string;
+    yellow: string;
+    yellowDark: string;
+};
+export declare const FONT_SIZES: {};
+export declare const THEME_SETTINGS: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+    skyBlue: string;
+    black: string;
+    blackLight: string;
+    blackGray: string;
+    blueLight: string;
+    blueLightGray: string;
+    blue: string;
+    blueNavy: string;
+    blackCoral: string;
+    cadetBlue: string;
+    grayLight: string;
+    gray: string;
+    grayDark: string;
+    grayTransparent: string;
+    grayPale: string;
+    green: string;
+    white: string;
+    offWhite: string;
+    redLight: string;
+    red: string;
+    redSecondary: string;
+    redDark: string;
+    redHover: string;
+    redClear: string;
+    redWCAG: string;
+    pink: string;
+    lightBlue: string;
+    mediumBlue: string;
+    mint: string;
+    lilac: string;
+    lavender: string;
+    purple: string;
+    smokeGray: string;
+    yellowLight: string;
+    yellow: string;
+    yellowDark: string;
+    valueRegular: string;
+    valueMedium: string;
+    valueBold: string;
+    siteWidthS: string;
+    siteWidth: string;
+    siteWidthXL: string;
+    siteMaxWidth: string;
+    mobileNavHeight: number;
+    XS: number;
+    S: number;
+    S_ALT: number;
+    M: number;
+    L: number;
+    XL: number;
+    XXL: number;
+};

package/dist/styles/styles/theme.js

@@ -0,0 +1,77 @@
+import { rem } from "./mixins/units";
+export const BREAKPOINT_VALUES = {
+    XS: 360,
+    S: 576,
+    S_ALT: 676,
+    M: 768,
+    L: 1024,
+    XL: 1200,
+    XXL: 1440,
+};
+export const VARIABLES = {
+    siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
+    siteWidth: rem(BREAKPOINT_VALUES.L),
+    siteWidthXL: rem(BREAKPOINT_VALUES.XL),
+    siteMaxWidth: rem(1920),
+    mobileNavHeight: 56,
+};
+export const THEME_SPACING = {
+    sm: rem(16),
+    md: rem(24),
+    lg: rem(32),
+    xl: rem(40),
+};
+export const SPACING = {
+    spacingXXS: rem(6),
+    spacingXS: rem(8),
+    spacingS: rem(12),
+    spacingM: rem(16),
+    spacingL: rem(32),
+    spacingXL: rem(40),
+    spacingXXL: rem(48),
+};
+export const FONTS = {
+    valueRegular: '"ValueRegular", Arial, sans-serif',
+    valueMedium: '"ValueMedium", Arial, sans-serif',
+    valueBold: '"ValueBold", Arial, sans-serif',
+};
+export const COLORS = {
+    skyBlue: '#d1e4ed',
+    black: '#000',
+    blackLight: '#333333',
+    blackGray: '#858585',
+    blueLight: '#d1e3ed',
+    blueLightGray: '#dfeff7',
+    blue: '#4195be',
+    blueNavy: '#0C4670',
+    blackCoral: '#5A5F61',
+    cadetBlue: '#A4B6BF',
+    grayLight: '#f2f2f2',
+    gray: '#d3d3d3',
+    grayDark: '#8e8e8e',
+    grayTransparent: 'rgba(51,51,51,.15)',
+    grayPale: '#dddddd',
+    green: '#59b290',
+    white: '#fff',
+    offWhite: '#fafafa',
+    redLight: '#ff6e6e',
+    red: '#ea2337',
+    redSecondary: '#ec1b2e',
+    redDark: '#be3639',
+    redHover: '#c11021',
+    redClear: '#d81125',
+    redWCAG: '#E71328',
+    pink: '#fbdfd9',
+    lightBlue: '#e4eef4',
+    mediumBlue: '#76B2CE',
+    mint: '#d6ebe3',
+    lilac: '#F5ECF5',
+    lavender: '#e6d1e5',
+    purple: '#9B4391',
+    smokeGray: '#f7f7f7',
+    yellowLight: '#ffecc4',
+    yellow: '#ffe5b1',
+    yellowDark: '#ffd379',
+};
+export const FONT_SIZES = {};
+export const THEME_SETTINGS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BREAKPOINT_VALUES), VARIABLES), FONTS), COLORS), FONT_SIZES), SPACING);

package/dist/styles/theme.d.ts

@@ -0,0 +1,135 @@
+export declare const BREAKPOINT_VALUES: {
+    XS: number;
+    S: number;
+    S_ALT: number;
+    M: number;
+    L: number;
+    XL: number;
+    XXL: number;
+};
+export declare const VARIABLES: {
+    siteWidthS: string;
+    siteWidth: string;
+    siteWidthXL: string;
+    siteMaxWidth: string;
+    mobileNavHeight: number;
+};
+export declare const THEME_SPACING: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const SPACING: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+};
+export declare const FONTS: {
+    valueRegular: string;
+    valueMedium: string;
+    valueBold: string;
+};
+export declare const COLORS: {
+    skyBlue: string;
+    black: string;
+    blackLight: string;
+    blackGray: string;
+    blueLight: string;
+    blueLightGray: string;
+    blue: string;
+    blueNavy: string;
+    blackCoral: string;
+    cadetBlue: string;
+    grayLight: string;
+    gray: string;
+    grayDark: string;
+    grayTransparent: string;
+    grayPale: string;
+    green: string;
+    white: string;
+    offWhite: string;
+    redLight: string;
+    red: string;
+    redSecondary: string;
+    redDark: string;
+    redHover: string;
+    redClear: string;
+    redWCAG: string;
+    pink: string;
+    lightBlue: string;
+    mediumBlue: string;
+    mint: string;
+    lilac: string;
+    lavender: string;
+    purple: string;
+    smokeGray: string;
+    yellowLight: string;
+    yellow: string;
+    yellowDark: string;
+};
+export declare const FONT_SIZES: {};
+export declare const THEME_SETTINGS: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+    skyBlue: string;
+    black: string;
+    blackLight: string;
+    blackGray: string;
+    blueLight: string;
+    blueLightGray: string;
+    blue: string;
+    blueNavy: string;
+    blackCoral: string;
+    cadetBlue: string;
+    grayLight: string;
+    gray: string;
+    grayDark: string;
+    grayTransparent: string;
+    grayPale: string;
+    green: string;
+    white: string;
+    offWhite: string;
+    redLight: string;
+    red: string;
+    redSecondary: string;
+    redDark: string;
+    redHover: string;
+    redClear: string;
+    redWCAG: string;
+    pink: string;
+    lightBlue: string;
+    mediumBlue: string;
+    mint: string;
+    lilac: string;
+    lavender: string;
+    purple: string;
+    smokeGray: string;
+    yellowLight: string;
+    yellow: string;
+    yellowDark: string;
+    valueRegular: string;
+    valueMedium: string;
+    valueBold: string;
+    siteWidthS: string;
+    siteWidth: string;
+    siteWidthXL: string;
+    siteMaxWidth: string;
+    mobileNavHeight: number;
+    XS: number;
+    S: number;
+    S_ALT: number;
+    M: number;
+    L: number;
+    XL: number;
+    XXL: number;
+};