@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/tailwind.preset.js

@@ -1,7 +1,7 @@
 import daisyui from 'daisyui';
 import typography from '@tailwindcss/typography';
 import containerQueries from '@tailwindcss/container-queries';
-import { backgroundColor, borderColor, boxShadow, colors, textColor, outlineColor } from './tokens.js';
+import { backgroundColor, borderColor, boxShadow, colors, textColor, outlineColor, } from './tokens.js';
 const config = {
     safelist: ['tailwind-safelist.txt'],
     theme: {
@@ -14,12 +14,12 @@ const config = {
             outlineColor,
             fontFamily: {
                 mono: ['"MD System Mono"', 'sans-serif'],
-                sans: ['"af Another Sans"', 'sans-serif']
+                sans: ['"af Another Sans"', 'sans-serif'],
             },
             fontSize: {
-                xxs: '10px'
-            }
-        }
+                xxs: '10px',
+            },
+        },
     },
     plugins: [daisyui, typography, containerQueries],
     daisyui: {
@@ -46,10 +46,10 @@ const config = {
                     'warning-content': textColor.warning,
                     error: backgroundColor.danger,
                     'error-content': textColor.danger,
-                    default: colors.periwinkle[5].default
-                }
-            }
-        ]
-    }
+                    default: colors.periwinkle[5].default,
+                },
+            },
+        ],
+    },
 };
 export default config;

package/dist/tokens/colors.js

@@ -10,7 +10,7 @@ export const colors = {
             25: '#FFFFFF40',
             50: '#FFFFFF80',
             70: '#FFFFFFB3',
-            90: '#FFFFFFE6'
+            90: '#FFFFFFE6',
         },
         midnight: {
             default: '#12192a',
@@ -21,8 +21,8 @@ export const colors = {
             25: '#12192A40',
             50: '#12192A80',
             70: '#12192AB3',
-            90: '#12192AE6'
-        }
+            90: '#12192AE6',
+        },
     },
     gray: {
         1: '#ecedee',
@@ -30,7 +30,7 @@ export const colors = {
         3: '#c4c6ca',
         4: '#888c94',
         5: '#595e6a',
-        6: '#2A303F'
+        6: '#2A303F',
     },
     periwinkle: {
         1: '#eeeefd',
@@ -38,7 +38,7 @@ export const colors = {
         3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480', 75: '#8e8af4BF' },
         4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180', 75: '#7973f1BF' },
         5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80', 75: '#5750eeBF' },
-        6: '#4741c1'
+        6: '#4741c1',
     },
     orange: {
         1: '#fff2e6',
@@ -46,7 +46,7 @@ export const colors = {
         3: '#ffa654',
         4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
         5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
-        6: '#cf6300'
+        6: '#cf6300',
     },
     sky: {
         1: '#f3fafc',
@@ -54,7 +54,7 @@ export const colors = {
         3: '#89D8E6',
         4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
         5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
-        6: '#3597a9'
+        6: '#3597a9',
     },
     blue: {
         1: '#e8f4fe',
@@ -62,7 +62,7 @@ export const colors = {
         3: '#66b8fb',
         4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
         5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
-        6: '#146db6'
+        6: '#146db6',
     },
     green: {
         1: '#e7f7f1',
@@ -70,7 +70,7 @@ export const colors = {
         3: '#65cba4',
         4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
         5: { default: '#0aad6e', 5: '#0aad6e0D', 10: '#0aad6e1A', 25: '#0aad6e40' },
-        6: '#088756'
+        6: '#088756',
     },
     yellow: {
         1: '#fff8e9',
@@ -78,7 +78,7 @@ export const colors = {
         3: '#fed16c',
         4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
         5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
-        6: '#cc951e'
+        6: '#cc951e',
     },
     red: {
         1: '#fdeded',
@@ -86,7 +86,7 @@ export const colors = {
         3: '#f28384',
         4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
         5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
-        6: '#bf393a'
+        6: '#bf393a',
     },
     shadow: {
         2: 'rgba(18, 25, 42, 0.02)',
@@ -94,7 +94,7 @@ export const colors = {
         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)'
+        16: 'rgba(18, 25, 42, 0.16)',
     },
     pink: {
         1: '#fdedf4',
@@ -102,7 +102,7 @@ export const colors = {
         3: '#f284b6',
         4: { default: '#f06da8', 10: '#f06da81A', 25: '#f06da840' },
         5: { default: '#ec4892', 10: '#ec48921A', 25: '#ec489240' },
-        6: '#bf3b77'
+        6: '#bf3b77',
     },
     plum: {
         1: '#f9edf8',
@@ -110,7 +110,7 @@ export const colors = {
         3: '#d583d2',
         4: { default: '#cd6bc9', 10: '#cd6bc91A', 25: '#cd6bc940' },
         5: { default: '#c146bc', 10: '#c146bc1A', 25: '#c146bc40' },
-        6: '#9d3998'
+        6: '#9d3998',
     },
     lilac: {
         1: '#f5ecfd',
@@ -118,7 +118,7 @@ export const colors = {
         3: '#b982ee',
         4: { default: '#ac69eb', 10: '#ac69eb1A', 25: '#ac69eb40' },
         5: { default: '#9744e6', 10: '#9744e61A', 25: '#9744e640' },
-        6: '#7a37ba'
+        6: '#7a37ba',
     },
     lime: {
         1: '#f2f8e8',
@@ -126,7 +126,7 @@ export const colors = {
         3: '#a5d162',
         4: { default: '#93c843', 10: '#93c8431A', 25: '#93c84340' },
         5: { default: '#78ba14', 10: '#78ba141A', 25: '#78ba1440' },
-        6: '#619710'
+        6: '#619710',
     },
     pear: {
         1: '#f8f8e7',
@@ -134,6 +134,6 @@ export const colors = {
         3: '#cfd161',
         4: { default: '#c6c842', 10: '#c6c8421A', 25: '#c6c84240' },
         5: { default: '#b8ba13', 10: '#b8ba131A', 25: '#b8ba1340' },
-        6: '#95970F'
-    }
+        6: '#95970F',
+    },
 };

package/dist/tokens/typography.js

@@ -1,7 +1,7 @@
 export const typography = {
     fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace']
+        mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace'],
     },
     fontSize: {
         xs: '0.75rem', // 12px
@@ -16,7 +16,7 @@ export const typography = {
         '6xl': '3.75rem', // 60px
         '7xl': '4.5rem', // 72px
         '8xl': '6rem', // 96px
-        '9xl': '8rem' // 128px
+        '9xl': '8rem', // 128px
     },
     fontWeight: {
         thin: '100',
@@ -27,7 +27,7 @@ export const typography = {
         semibold: '600',
         bold: '700',
         extrabold: '800',
-        black: '900'
+        black: '900',
     },
     lineHeight: {
         none: '1',
@@ -35,7 +35,7 @@ export const typography = {
         snug: '1.375',
         normal: '1.5',
         relaxed: '1.625',
-        loose: '2'
+        loose: '2',
     },
     letterSpacing: {
         tighter: '-0.05em',
@@ -43,6 +43,6 @@ export const typography = {
         normal: '0em',
         wide: '0.025em',
         wider: '0.05em',
-        widest: '0.1em'
-    }
+        widest: '0.1em',
+    },
 };

package/dist/tokens.js

@@ -17,7 +17,7 @@ const lightTextColor = {
     plum: colors.plum[6],
     lilac: colors.lilac[6],
     lime: colors.lime[6],
-    pear: colors.pear[6]
+    pear: colors.pear[6],
 };
 const lightIconColor = {
     'icon-primary': colors.base.midnight.default,
@@ -37,7 +37,7 @@ const lightIconColor = {
     'icon-lilac': colors.lilac[5].default,
     'icon-lime': colors.lime[5].default,
     'icon-pear': colors.pear[5].default,
-    'icon-white': colors.base.white.default
+    'icon-white': colors.base.white.default,
 };
 const lightBorderColor = {
     static: colors.base.midnight[8],
@@ -53,14 +53,14 @@ const lightBorderColor = {
     'pink-inverse': colors.pink[5].default,
     'lime-inverse': colors.lime[5].default,
     white: colors.base.white.default,
-    axis: colors.gray[3]
+    axis: colors.gray[3],
 };
 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
+    focus: colors.periwinkle[5].default,
 };
 const lightBackgroundColor = {
     surface: colors.base.white.default,
@@ -121,7 +121,7 @@ const lightBackgroundColor = {
     pear: colors.pear[5][10],
     'pear-hover': colors.pear[5][25],
     'pear-inverse': colors.pear[5].default,
-    'pear-inverse-hover': colors.pear[6]
+    'pear-inverse-hover': colors.pear[6],
 };
 const lightChartColor = {
     accent: colors.periwinkle[5].default,
@@ -136,7 +136,7 @@ const lightChartColor = {
     green: colors.green[5].default,
     yellow: colors.yellow[5].default,
     red: colors.red[5].default,
-    gray: colors.gray[5]
+    gray: colors.gray[5],
 };
 const darkTextColor = {
     'dark-primary': colors.base.white.default,
@@ -156,7 +156,7 @@ const darkTextColor = {
     'dark-plum': colors.plum[3],
     'dark-lilac': colors.lilac[3],
     'dark-lime': colors.lime[3],
-    'dark-pear': colors.pear[3]
+    'dark-pear': colors.pear[3],
 };
 const darkIconColor = {
     'dark-primary': colors.base.white.default,
@@ -174,7 +174,7 @@ const darkIconColor = {
     'dark-plum': colors.plum[5].default,
     'dark-lilac': colors.lilac[5].default,
     'dark-lime': colors.lime[5].default,
-    'dark-pear': colors.sky[5].default
+    'dark-pear': colors.sky[5].default,
 };
 const darkBorderColor = {
     'dark-static': colors.base.white[10],
@@ -182,21 +182,21 @@ const darkBorderColor = {
     '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-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
+    '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
+    'dark-overlay': '#090D1566', // TODO: MAP TO A COLOR
 };
 const darkBackgroundColor = {
     ...darkSurfaceColor,
@@ -235,32 +235,32 @@ const darkBackgroundColor = {
     'dark-lime': colors.lime[4][10],
     'dark-lime-hover': colors.lime[4][25],
     'dark-pear': colors.pear[4][10],
-    'dark-pear-hover': colors.pear[4][25]
+    'dark-pear-hover': colors.pear[4][25],
 };
 const borderColor = {
     ...lightBorderColor,
-    ...darkBorderColor
+    ...darkBorderColor,
 };
 const textColor = {
     ...lightTextColor,
     ...darkTextColor,
-    ...lightIconColor
+    ...lightIconColor,
 };
 const backgroundColor = {
     ...lightBackgroundColor,
-    ...darkBackgroundColor
+    ...darkBackgroundColor,
 };
 const chartColor = {
-    ...lightChartColor
+    ...lightChartColor,
 };
 const outlineColor = {
     ...lightOutlineColor,
-    ...darkOutlineColor
+    ...darkOutlineColor,
 };
 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 1px ${colors.shadow[8]}`
+    menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
 };
 // Export individual token categories for tree-shaking
 export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor };
@@ -272,5 +272,5 @@ export const tokens = {
     backgroundColor,
     boxShadow,
     outlineColor,
-    chartColor
+    chartColor,
 };

package/dist/types/fonts.d.ts

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