uikit-react-public 0.17.4 → 0.21.8

package/dist/theme/defaultTheme.d.ts

@@ -1,274 +0,0 @@
-declare const displayColours: {
-    purpleDark: string;
-    purpleVibrant: string;
-    purpleMuted: string;
-    greenDark: string;
-    greenVibrant: string;
-    greenMuted: string;
-    yellowDark: string;
-    yellowVibrant: string;
-    yellowMuted: string;
-    pinkDark: string;
-    pinkVibrant: string;
-    pinkMuted: string;
-    blueDark: string;
-    blueVibrant: string;
-    blueMuted: string;
-};
-declare const blackAndWhite: {
-    black: string;
-    white: string;
-};
-declare const theme: {
-    p0: number;
-    p2: string;
-    p4: string;
-    p6: string;
-    p8: string;
-    p12: string;
-    p16: string;
-    p20: string;
-    p24: string;
-    p32: string;
-    p40: string;
-    p48: string;
-    p56: string;
-    p64: string;
-    p72: string;
-    p80: string;
-    m0: number;
-    m2: string;
-    m4: string;
-    m6: string;
-    m8: string;
-    m12: string;
-    m16: string;
-    m20: string;
-    m24: string;
-    m32: string;
-    m40: string;
-    m48: string;
-    m56: string;
-    m64: string;
-    m72: string;
-    m80: string;
-    color: {
-        text: {
-            primary: string;
-            secondary: string;
-            muted: string;
-            inverted: string;
-            interactive: string;
-            default: string;
-            disabledOnBg: string;
-            disabled: string;
-            active: string;
-            hover: string;
-            visited: string;
-            error: string;
-            errorHover: string;
-            errorDisabled: string;
-        };
-        interaction: {
-            blue100: string;
-            blue80: string;
-            blue70: string;
-            blue40: string;
-            blue10: string;
-            blue5: string;
-        };
-        display: {
-            purpleDark: string;
-            purpleVibrant: string;
-            purpleMuted: string;
-            greenDark: string;
-            greenVibrant: string;
-            greenMuted: string;
-            yellowDark: string;
-            yellowVibrant: string;
-            yellowMuted: string;
-            pinkDark: string;
-            pinkVibrant: string;
-            pinkMuted: string;
-            blueDark: string;
-            blueVibrant: string;
-            blueMuted: string;
-        };
-        system: {
-            red100: string;
-            red70: string;
-            red40: string;
-            red10: string;
-            orange100: string;
-            orange70: string;
-            orange40: string;
-            orange10: string;
-            green100: string;
-            green70: string;
-            green40: string;
-            green10: string;
-            blue100: string;
-            blue80: string;
-            blue70: string;
-            blue40: string;
-            blue10: string;
-            blue5: string;
-        };
-        link: {
-            default: string;
-            secondaryDefault: string;
-            hover: string;
-            secondaryHover: string;
-            visited: string;
-            disabled: string;
-        };
-        neutral: {
-            black: string;
-            grey90: string;
-            grey80: string;
-            grey70: string;
-            grey60: string;
-            grey40: string;
-            grey20: string;
-            grey15: string;
-            grey10: string;
-            grey5: string;
-            white: string;
-        };
-        overlay: {
-            blanket: string;
-        };
-    };
-    thickness: {
-        t1: string;
-        t2: string;
-    };
-    width: {
-        h16: string;
-        h20: string;
-        h24: string;
-    };
-    height: {
-        h16: string;
-        h20: string;
-        h24: string;
-        h32: string;
-        h36: string;
-        h40: string;
-        h80: string;
-    };
-    margin: {
-        m0: number;
-        m2: string;
-        m4: string;
-        m6: string;
-        m8: string;
-        m12: string;
-        m16: string;
-        m20: string;
-        m24: string;
-        m32: string;
-        m40: string;
-        m48: string;
-        m56: string;
-        m64: string;
-        m72: string;
-        m80: string;
-    };
-    padding: {
-        p0: number;
-        p2: string;
-        p4: string;
-        p6: string;
-        p8: string;
-        p12: string;
-        p16: string;
-        p20: string;
-        p24: string;
-        p32: string;
-        p40: string;
-        p48: string;
-        p56: string;
-        p64: string;
-        p72: string;
-        p80: string;
-    };
-    radius: {
-        r2: string;
-        r4: string;
-        r8: string;
-        r12: string;
-        r16: string;
-    };
-    border: {
-        b1: string;
-        b2: string;
-    };
-    outline: {
-        o2: string;
-        o4: string;
-    };
-    font: {
-        family: {
-            primary: string;
-            secondary: string;
-            fixed: string;
-        };
-        size: {
-            f12: string;
-            f14: string;
-            f16: string;
-            f18: string;
-            f20: string;
-            f22: string;
-            f24: string;
-            f26: string;
-            f28: string;
-            f30: string;
-            f32: string;
-            f36: string;
-            f40: string;
-        };
-        weight: {
-            light: number;
-            regular: number;
-            medium: number;
-            semiBold: number;
-            bold: number;
-            extraBold: number;
-        };
-        lineHeight: {
-            h100: string;
-            h110: string;
-            h120: string;
-            h130: string;
-            h140: string;
-            h150: string;
-        };
-    };
-    boxShadow: {
-        y1: string;
-        y2: string;
-        x2y4: string;
-        focus: string;
-        active: string;
-        destructiveActive: string;
-    };
-    breakpoints: {
-        mobile: number;
-        tablet: number;
-        desktop: number;
-        desktopLarge: number;
-    };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        desktopLarge: string;
-        custom: (breakpoint: number) => string;
-    };
-};
-export type ThemeType = typeof theme;
-export type DisplayColoursType = typeof displayColours;
-export type BlackAndWhiteColoursType = typeof blackAndWhite;
-export default theme;

package/lib/components/Button/buttonPrimaryStyle.ts

@@ -1,62 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-
-const buttonPrimaryStyle = (
-  theme: ThemeType,
-  destructive: ButtonBaseProps['destructive'],
-  disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading']
-) => {
-  const {
-    color: { system, interaction },
-    boxShadow,
-  } = theme;
-
-  const bgColour = destructive ? system.red70 : interaction.blue70;
-  const bgHoverColour = destructive ? system.red100 : interaction.blue80;
-  const bgActiveColour = destructive ? system.red70 : interaction.blue70;
-  const boxShadowActive = destructive
-    ? boxShadow.destructiveActive
-    : boxShadow.active;
-
-  const primaryBaseStyle = css`
-    border: none;
-    background-color: ${bgColour};
-    color: ${theme.color.neutral.white};
-    font-weight: ${theme.font.weight.bold};
-  `;
-
-  const interactiveStyle = css`
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${bgHoverColour};
-    }
-
-    &:active {
-      background-color: ${bgActiveColour};
-      box-shadow: ${boxShadowActive};
-    }
-  `;
-
-  const disabledStyle = css`
-    border-color: ${theme.color.text.disabled};
-    background-color: ${theme.color.link.disabled};
-    color: ${theme.color.text.disabledOnBg};
-    cursor: not-allowed;
-  `;
-
-  const loadingStyle = css`
-    cursor: wait;
-  `;
-
-  return cx(
-    primaryBaseStyle,
-    !disabled && !loading && interactiveStyle,
-    disabled && disabledStyle,
-    loading && loadingStyle
-  );
-};
-
-export default buttonPrimaryStyle;

package/lib/components/Button/buttonSecondaryStyle.ts

@@ -1,65 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-
-const buttonSecondaryStyle = (
-  theme: ThemeType,
-  destructive: ButtonBaseProps['destructive'],
-  disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading']
-) => {
-  const {
-    color: { system, interaction },
-    boxShadow,
-  } = theme;
-
-  const colour = destructive ? system.red70 : interaction.blue70;
-  const hoverColour = destructive ? system.red100 : interaction.blue80;
-  const activeColour = destructive ? system.red70 : interaction.blue70;
-  const boxShadowActive = destructive
-    ? boxShadow.destructiveActive
-    : boxShadow.active;
-
-  const secondaryBaseStyle = css`
-    background-color: ${theme.color.neutral.white};
-    color: ${colour};
-    border: ${theme.border.b1} solid ${colour};
-    font-weight: ${theme.font.weight.regular};
-  `;
-
-  const interactiveStyle = css`
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${theme.color.neutral.white};
-      border-color: ${hoverColour};
-      color: ${hoverColour};
-    }
-
-    &:active {
-      background-color: ${theme.color.neutral.white};
-      color: ${activeColour};
-      border-color: ${activeColour};
-      box-shadow: ${boxShadowActive};
-    }
-  `;
-
-  const disabledStyle = css`
-    border-color: ${theme.color.text.disabled};
-    color: ${theme.color.text.disabled};
-    cursor: not-allowed;
-  `;
-
-  const loadingStyle = css`
-    cursor: wait;
-  `;
-
-  return cx(
-    secondaryBaseStyle,
-    !disabled && !loading && interactiveStyle,
-    disabled && disabledStyle,
-    loading && loadingStyle
-  );
-};
-
-export default buttonSecondaryStyle;

package/lib/components/Button/buttonTertiaryStyle.ts

@@ -1,54 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-
-const buttonTertiaryStyle = (
-  theme: ThemeType,
-  disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading']
-) => {
-  const {
-    color: { interaction },
-  } = theme;
-
-  const colour = interaction.blue70;
-  const hoverColour = interaction.blue80;
-  const activeColour = interaction.blue70;
-
-  const tertiaryBaseStyle = css`
-    border: none;
-    background-color: transparent;
-    color: ${colour};
-    font-weight: ${theme.font.weight.bold};
-  `;
-
-  const interactiveStyle = css`
-    cursor: pointer;
-
-    &:hover {
-      color: ${hoverColour};
-    }
-
-    &:active {
-      color: ${activeColour};
-    }
-  `;
-
-  const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    cursor: not-allowed;
-  `;
-
-  const loadingStyle = css`
-    cursor: wait;
-  `;
-
-  return cx(
-    tertiaryBaseStyle,
-    !disabled && !loading && interactiveStyle,
-    disabled && disabledStyle,
-    loading && loadingStyle
-  );
-};
-
-export default buttonTertiaryStyle;