@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/tokens.js

@@ -0,0 +1,285 @@
+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',
+            8: '#12192a14',
+            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', 50: '#8e8af480' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80' },
+        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)',
+        6: 'rgba(18, 25, 42, 0.06)',
+        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-secondary-inverse': colors.base.white[70],
+    '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[8],
+    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 lightOutlineColor = {
+    static: colors.base.midnight[8],
+    input: colors.base.midnight[10],
+    interactive: colors.base.midnight[15],
+    hover: colors.periwinkle[5][50],
+    focus: colors.periwinkle[5].default
+};
+const lightBackgroundColor = {
+    surface: colors.base.white.default,
+    'surface-secondary': colors.base.snow,
+    base: colors.base.mist,
+    '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[10],
+    'dark-input': colors.base.white[10],
+    '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 darkOutlineColor = {
+    'dark-static': colors.base.white[10],
+    'dark-input': colors.base.white[10],
+    'dark-interactive': colors.base.white[15],
+    'dark-hover': colors.periwinkle[3][50],
+    'dark-focus': colors.periwinkle[3].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 outlineColor = {
+    ...lightOutlineColor,
+    ...darkOutlineColor
+};
+export const boxShadow = {
+    input: `0 1px 4px 0 ${colors.shadow[4]}`,
+    container: `0 2px 16px 0 ${colors.shadow[2]}`,
+    menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 0.5px ${colors.shadow[8]}`
+};
+export const tokens = {
+    colors,
+    borderColor,
+    textColor,
+    backgroundColor,
+    boxShadow,
+    outlineColor
+};

package/dist/types/fonts.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.47",
+	"version": "0.0.48",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -42,6 +42,7 @@
 		"@eslint/compat": "^1.2.3",
 		"@sveltejs/adapter-vercel": "^5.6.2",
 		"@sveltejs/kit": "^2.17.2",
+		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",