@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/tailwind.preset.d.ts

@@ -366,6 +366,10 @@ declare const config: {
                 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/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.d.ts

@@ -0,0 +1,246 @@
+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;
+    };
+};

package/dist/tokens/colors.js

@@ -0,0 +1,139 @@
+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',
+    },
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export { colors } from './colors';
+export { typography } from './typography';
+export * from '../tokens';

package/dist/tokens/index.js

@@ -0,0 +1,5 @@
+// Export individual token categories for granular imports
+export { colors } from './colors';
+export { typography } from './typography';
+// Re-export everything from the main tokens file for backwards compatibility
+export * from '../tokens';

package/dist/tokens/typography.d.ts

@@ -0,0 +1,48 @@
+export declare const typography: {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    fontWeight: {
+        thin: string;
+        extralight: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+    lineHeight: {
+        none: string;
+        tight: string;
+        snug: string;
+        normal: string;
+        relaxed: string;
+        loose: string;
+    };
+    letterSpacing: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+};

package/dist/tokens/typography.js

@@ -0,0 +1,48 @@
+export const typography = {
+    fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace'],
+    },
+    fontSize: {
+        xs: '0.75rem', // 12px
+        sm: '0.875rem', // 14px
+        base: '1rem', // 16px
+        lg: '1.125rem', // 18px
+        xl: '1.25rem', // 20px
+        '2xl': '1.5rem', // 24px
+        '3xl': '1.875rem', // 30px
+        '4xl': '2.25rem', // 36px
+        '5xl': '3rem', // 48px
+        '6xl': '3.75rem', // 60px
+        '7xl': '4.5rem', // 72px
+        '8xl': '6rem', // 96px
+        '9xl': '8rem', // 128px
+    },
+    fontWeight: {
+        thin: '100',
+        extralight: '200',
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+    },
+    lineHeight: {
+        none: '1',
+        tight: '1.25',
+        snug: '1.375',
+        normal: '1.5',
+        relaxed: '1.625',
+        loose: '2',
+    },
+    letterSpacing: {
+        tighter: '-0.05em',
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em',
+    },
+};