@reshape-biotech/design-system 0.0.42 → 0.0.43

package/dist/tokens.js

@@ -1,267 +1,267 @@
 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)'
-    }
+	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]
+	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
+	'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
+	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]
+	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]
+	'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
+	'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
+	'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
+	'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]
+	...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
+	...lightBorderColor,
+	...darkBorderColor
 };
 export const textColor = {
-    ...lightTextColor,
-    ...darkTextColor,
-    ...lightIconColor
+	...lightTextColor,
+	...darkTextColor,
+	...lightIconColor
 };
 export const backgroundColor = {
-    ...lightBackgroundColor,
-    ...darkBackgroundColor
+	...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}`
+	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
+	colors,
+	borderColor,
+	textColor,
+	backgroundColor,
+	boxShadow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.42",
+	"version": "0.0.43",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",