@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/tokens.d.ts

@@ -1,250 +1,5 @@
-export declare const colors: {
-    base: {
-        mist: string;
-        snow: string;
-        white: {
-            default: string;
-            5: string;
-            10: string;
-            15: string;
-            25: string;
-            50: string;
-            70: string;
-            90: string;
-        };
-        midnight: {
-            default: string;
-            5: string;
-            8: string;
-            10: string;
-            15: string;
-            25: string;
-            50: string;
-            70: string;
-            90: string;
-        };
-    };
-    gray: {
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-    };
-    periwinkle: {
-        1: string;
-        2: string;
-        3: {
-            default: string;
-            10: string;
-            25: string;
-            50: string;
-            75: string;
-        };
-        4: {
-            default: string;
-            10: string;
-            25: string;
-            50: string;
-            75: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-            50: string;
-            75: string;
-        };
-        6: string;
-    };
-    orange: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    sky: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    blue: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    green: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            5: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    yellow: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    red: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    shadow: {
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-    };
-    pink: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    plum: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    lilac: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    lime: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-    pear: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        5: {
-            default: string;
-            10: string;
-            25: string;
-        };
-        6: string;
-    };
-};
-export declare const borderColor: {
+import { colors } from './tokens/colors';
+declare const borderColor: {
     'dark-static': string;
     'dark-input': string;
     'dark-interactive': string;
@@ -259,10 +14,14 @@ export declare const borderColor: {
     danger: string;
     'static-inverse': string;
     'interactive-inverse': string;
+    'blue-inverse': string;
+    'orange-inverse': string;
+    'pink-inverse': string;
+    'lime-inverse': string;
     white: string;
     axis: string;
 };
-export declare const textColor: {
+declare const textColor: {
     'icon-primary': string;
     'icon-secondary': string;
     'icon-tertiary': string;
@@ -318,7 +77,7 @@ export declare const textColor: {
     lime: string;
     pear: string;
 };
-export declare const backgroundColor: {
+declare const backgroundColor: {
     'dark-neutral': string;
     'dark-neutral-hover': string;
     'dark-neutral-darker': string;
@@ -420,7 +179,7 @@ export declare const backgroundColor: {
     'pear-inverse': string;
     'pear-inverse-hover': string;
 };
-export declare const chartColor: {
+declare const chartColor: {
     accent: string;
     blue: string;
     orange: string;
@@ -435,7 +194,7 @@ export declare const chartColor: {
     red: string;
     gray: string;
 };
-export declare const outlineColor: {
+declare const outlineColor: {
     'dark-static': string;
     'dark-input': string;
     'dark-interactive': string;
@@ -447,11 +206,12 @@ export declare const outlineColor: {
     hover: string;
     focus: string;
 };
-export declare const boxShadow: {
+declare const boxShadow: {
     input: string;
     container: string;
     menu: string;
 };
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor };
 export declare const tokens: {
     colors: {
         base: {
@@ -714,6 +474,10 @@ export declare const tokens: {
         danger: string;
         'static-inverse': string;
         'interactive-inverse': string;
+        'blue-inverse': string;
+        'orange-inverse': string;
+        'pink-inverse': string;
+        'lime-inverse': string;
         white: string;
         axis: string;
     };

package/dist/tokens.js

@@ -1,142 +1,4 @@
-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: '#12192a0A',
-            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', 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'
-    },
-    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)'
-    },
-    pink: {
-        1: '#fdedf4',
-        2: '#f9c6dd',
-        3: '#f284b6',
-        4: { default: '#f06da8', 10: '#f06da81A', 25: '#f06da840' },
-        5: { default: '#ec4892', 10: '#ec48921A', 25: '#ec489240' },
-        6: '#bf3b77'
-    },
-    plum: {
-        1: '#f9edf8',
-        2: '#ecc6ea',
-        3: '#d583d2',
-        4: { default: '#cd6bc9', 10: '#cd6bc91A', 25: '#cd6bc940' },
-        5: { default: '#c146bc', 10: '#c146bc1A', 25: '#c146bc40' },
-        6: '#9d3998'
-    },
-    lilac: {
-        1: '#f5ecfd',
-        2: '#dfc5f7',
-        3: '#b982ee',
-        4: { default: '#ac69eb', 10: '#ac69eb1A', 25: '#ac69eb40' },
-        5: { default: '#9744e6', 10: '#9744e61A', 25: '#9744e640' },
-        6: '#7a37ba'
-    },
-    lime: {
-        1: '#f2f8e8',
-        2: '#d5eab6',
-        3: '#a5d162',
-        4: { default: '#93c843', 10: '#93c8431A', 25: '#93c84340' },
-        5: { default: '#78ba14', 10: '#78ba141A', 25: '#78ba1440' },
-        6: '#619710'
-    },
-    pear: {
-        1: '#f8f8e7',
-        2: '#e9eab6',
-        3: '#cfd161',
-        4: { default: '#c6c842', 10: '#c6c8421A', 25: '#c6c84240' },
-        5: { default: '#b8ba13', 10: '#b8ba131A', 25: '#b8ba1340' },
-        6: '#95970F'
-    }
-};
+import { colors } from './tokens/colors';
 const lightTextColor = {
     primary: colors.base.midnight.default,
     secondary: colors.gray[5],
@@ -155,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,
@@ -175,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],
@@ -186,15 +48,19 @@ const lightBorderColor = {
     danger: colors.red[5].default,
     'static-inverse': colors.base.white[10],
     'interactive-inverse': colors.base.white[15],
+    'blue-inverse': colors.blue[5].default,
+    'orange-inverse': colors.orange[5].default,
+    '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,
@@ -255,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,
@@ -270,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,
@@ -290,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,
@@ -308,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],
@@ -316,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,
@@ -369,33 +235,36 @@ 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],
 };
-export const borderColor = {
+const borderColor = {
     ...lightBorderColor,
-    ...darkBorderColor
+    ...darkBorderColor,
 };
-export const textColor = {
+const textColor = {
     ...lightTextColor,
     ...darkTextColor,
-    ...lightIconColor
+    ...lightIconColor,
 };
-export const backgroundColor = {
+const backgroundColor = {
     ...lightBackgroundColor,
-    ...darkBackgroundColor
+    ...darkBackgroundColor,
 };
-export const chartColor = {
-    ...lightChartColor
+const chartColor = {
+    ...lightChartColor,
 };
-export const outlineColor = {
+const outlineColor = {
     ...lightOutlineColor,
-    ...darkOutlineColor
+    ...darkOutlineColor,
 };
-export const boxShadow = {
+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 };
+// Export tokens object for backward compatibility
 export const tokens = {
     colors,
     borderColor,
@@ -403,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;
 }