@reshape-biotech/design-system 0.0.44 → 0.0.47

package/dist/tokens.js

@@ -1,267 +0,0 @@
-export const colors = {
-    base: {
-        mist: '#fbfbfb',
-        snow: '#f6f7f7',
-        white: {
-            default: '#FFFFFF',
-            5: '#FFFFFF0D',
-            10: '#FFFFFF1A',
-            15: '#FFFFFF26',
-            25: '#FFFFFF40',
-            50: '#FFFFFF80',
-            70: '#FFFFFFB3',
-            90: '#FFFFFFE6'
-        },
-        midnight: {
-            default: '#12192a',
-            5: '#12192a0d',
-            10: '#12192A1A',
-            15: '#12192A26',
-            25: '#12192A40',
-            50: '#12192A80',
-            70: '#12192AB3',
-            90: '#12192AE6'
-        }
-    },
-    gray: {
-        1: '#ecedee',
-        2: '#dbdddf',
-        3: '#c4c6ca',
-        4: '#888c94',
-        5: '#595e6a',
-        6: '#2A303F'
-    },
-    periwinkle: {
-        1: '#eeeefd',
-        2: '#cbc9fa',
-        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440' },
-        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140' },
-        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40' },
-        6: '#4741c1'
-    },
-    orange: {
-        1: '#fff2e6',
-        2: '#ffd6b0',
-        3: '#ffa654',
-        4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
-        5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
-        6: '#cf6300'
-    },
-    sky: {
-        1: '#f3fafc',
-        2: '#D2F0F6',
-        3: '#89D8E6',
-        4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
-        5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
-        6: '#3597a9'
-    },
-    blue: {
-        1: '#e8f4fe',
-        2: '#b8defd',
-        3: '#66b8fb',
-        4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
-        5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
-        6: '#146db6'
-    },
-    green: {
-        1: '#e7f7f1',
-        2: '#c4ebdc',
-        3: '#65cba4',
-        4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
-        5: { default: '#0aad6e', 5: '#0aad6e0D', 10: '#0aad6e1A', 25: '#0aad6e40' },
-        6: '#088756'
-    },
-    yellow: {
-        1: '#fff8e9',
-        2: '#feeabb',
-        3: '#fed16c',
-        4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
-        5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
-        6: '#cc951e'
-    },
-    red: {
-        1: '#fdeded',
-        2: '#f9c6c6',
-        3: '#f28384',
-        4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
-        5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
-        6: '#bf393a'
-    },
-    shadow: {
-        2: 'rgba(18, 25, 42 0.02)',
-        4: 'rgba(18, 25, 42, 0.04)',
-        8: 'rgba(18, 25, 42, 0.08)',
-        12: 'rgba(18, 25, 42, 0.12)',
-        16: 'rgba(18, 25, 42, 0.16)'
-    }
-};
-const lightTextColor = {
-    primary: colors.base.midnight.default,
-    secondary: colors.gray[5],
-    tertiary: colors.gray[4],
-    'primary-inverse': colors.base.white.default,
-    'secondary-inverse': colors.base.white[70],
-    'tertiary-inverse': colors.base.white[50],
-    accent: colors.periwinkle[6],
-    success: colors.green[6],
-    warning: colors.yellow[6],
-    danger: colors.red[6]
-};
-const lightIconColor = {
-    'icon-primary': colors.base.midnight.default,
-    'icon-secondary': colors.gray[5],
-    'icon-tertiary': colors.gray[4],
-    'icon-primary-inverse': colors.base.white.default,
-    'icon-accent': colors.periwinkle[5].default,
-    'icon-success': colors.green[5].default,
-    'icon-warning': colors.yellow[5].default,
-    'icon-danger': colors.red[5].default,
-    'icon-blue': colors.blue[5].default,
-    'icon-orange': colors.orange[5].default,
-    'icon-sky': colors.sky[5].default
-};
-const lightBorderColor = {
-    static: colors.base.midnight[5],
-    input: colors.base.midnight[10],
-    interactive: colors.base.midnight[15],
-    hover: colors.periwinkle[5][25],
-    focus: colors.periwinkle[5].default,
-    danger: colors.red[5].default
-};
-const lightBackgroundColor = {
-    surface: colors.base.white.default,
-    'surface-secondary': colors.base.snow,
-    base: colors.sky[1],
-    'base-inverse': colors.gray[6],
-    overlay: '#090D1566', // TODO: MAP TO A COLOR
-    neutral: colors.base.midnight[5],
-    'neutral-hover': colors.base.midnight[10],
-    'neutral-darker': colors.base.midnight[15],
-    'neutral-darker-hover': colors.base.midnight[25],
-    'neutral-inverse': colors.base.white[5],
-    'neutral-inverse-hover': colors.base.white[15],
-    accent: colors.periwinkle[5][10],
-    'accent-hover': colors.periwinkle[5][25],
-    'accent-inverse': colors.periwinkle[5].default,
-    'accent-inverse-hover': colors.periwinkle[6],
-    success: colors.green[5][10],
-    'success-hover': colors.green[5][25],
-    'success-inverse': colors.green[5].default,
-    'success-inverse-hover': colors.green[6],
-    warning: colors.yellow[5][10],
-    'warning-hover': colors.yellow[5][25],
-    'warning-inverse': colors.yellow[5].default,
-    'warning-inverse-hover': colors.yellow[6],
-    danger: colors.red[5][10],
-    'danger-hover': colors.red[5][25],
-    'danger-inverse': colors.red[5].default,
-    'danger-inverse-hover': colors.red[6],
-    blue: colors.blue[5][10],
-    'blue-hover': colors.blue[5][25],
-    orange: colors.orange[5][10],
-    'orange-hover': colors.orange[5][25],
-    'orange-inverse': colors.orange[5].default,
-    'orange-inverse-hover': colors.orange[6],
-    sky: colors.sky[5][10],
-    'sky-hover': colors.sky[5][25],
-    'sky-inverse': colors.sky[5].default,
-    'sky-inverse-hover': colors.sky[6]
-};
-const darkTextColor = {
-    'dark-primary': colors.base.white.default,
-    'dark-secondary': colors.gray[3],
-    'dark-tertiary': colors.gray[4],
-    'dark-primary-inverse': colors.base.midnight.default,
-    'dark-secondary-inverse': colors.base.midnight[70],
-    'dark-tertiary-inverse': colors.base.midnight[50],
-    'dark-accent': colors.periwinkle[3].default,
-    'dark-success': colors.green[3],
-    'dark-warning': colors.yellow[3],
-    'dark-danger': colors.red[3]
-};
-const darkIconColor = {
-    'dark-primary': colors.base.white.default,
-    'dark-secondary': colors.gray[3],
-    'dark-tertiary': colors.gray[4],
-    'dark-primary-inverse': colors.base.midnight.default,
-    'dark-accent': colors.periwinkle[4].default,
-    'dark-success': colors.green[4].default,
-    'dark-warning': colors.yellow[4].default,
-    'dark-danger': colors.red[4].default,
-    'dark-blue': colors.blue[4].default,
-    'dark-orange': colors.orange[4].default,
-    'dark-sky': colors.sky[4].default
-};
-const darkBorderColor = {
-    'dark-static': colors.base.white[5],
-    'dark-interactive': colors.base.white[15],
-    'dark-hover': colors.periwinkle[3][25],
-    'dark-focus': colors.periwinkle[4].default,
-    'dark-danger': colors.red[4].default
-};
-const darkSurfaceColor = {
-    'dark-primary': colors.gray[6],
-    'dark-secondary': colors.base.midnight.default,
-    'dark-base': colors.base.midnight.default,
-    'dark-base-inverse': colors.base.snow,
-    'dark-overlay': '#090D1566' // TODO: MAP TO A COLOR
-};
-const darkBackgroundColor = {
-    ...darkSurfaceColor,
-    'dark-neutral': colors.base.white[5],
-    'dark-neutral-hover': colors.base.white[15],
-    'dark-neutral-darker': colors.base.white[15],
-    'dark-neutral-darker-hover': colors.base.white[25],
-    'dark-accent': colors.periwinkle[3][10],
-    'dark-accent-hover': colors.periwinkle[3][25],
-    'dark-accent-inverse': colors.periwinkle[4].default,
-    'dark-accent-inverse-hover': colors.periwinkle[5].default,
-    'dark-success': colors.green[4][10],
-    'dark-success-hover': colors.green[4][25],
-    'dark-success-inverse': colors.green[4].default,
-    'dark-success-inverse-hover': colors.green[5].default,
-    'dark-warning': colors.yellow[4][10],
-    'dark-warning-hover': colors.yellow[4][25],
-    'dark-warning-inverse': colors.yellow[4].default,
-    'dark-warning-inverse-hover': colors.yellow[5].default,
-    'dark-danger': colors.red[4][10],
-    'dark-danger-hover': colors.red[4][25],
-    'dark-danger-inverse': colors.red[4].default,
-    'dark-danger-inverse-hover': colors.red[5].default,
-    'dark-blue': colors.blue[4][10],
-    'dark-blue-hover': colors.blue[4][25],
-    'dark-orange': colors.orange[4][10],
-    'dark-orange-hover': colors.orange[4][25],
-    'dark-sky': colors.sky[4][10],
-    'dark-sky-hover': colors.sky[4][25]
-};
-export const borderColor = {
-    ...lightBorderColor,
-    ...darkBorderColor
-};
-export const textColor = {
-    ...lightTextColor,
-    ...darkTextColor,
-    ...lightIconColor
-};
-export const backgroundColor = {
-    ...lightBackgroundColor,
-    ...darkBackgroundColor
-};
-export const boxShadow = {
-    input: `0px 1px 4px 0px ${colors.shadow[4]}`,
-    field: `0px 8px 12px 0px ${colors.shadow[4]}`,
-    nav: `0px 0px 24px 0px ${colors.shadow[12]}`,
-    calendar: `0px 16px 24px 0px ${colors.shadow[16]}`,
-    container: `0px 4px 17px 0px ${colors.shadow[2]}`,
-    panel: `0px 2px 8px 0px ${colors.shadow[8]}`,
-    outline: `0px 0px 0px 1px ${colors.periwinkle[5][25]}`,
-    focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
-};
-export const tokens = {
-    colors,
-    borderColor,
-    textColor,
-    backgroundColor,
-    boxShadow
-};

package/dist/types/fonts.d.ts

@@ -1,4 +0,0 @@
-declare module '*.woff2' {
-	const content: string;
-	export default content;
-}