@glare-labs/mdk
Version:
@glare-labs/mdk, Material Design Kit, mdk is a JavaScript constant library based on Material Design 3, providing constant data such as color, shape, shadow level, etc:
196 lines (195 loc) • 15.2 kB
TypeScript
export declare const md: {
readonly sys: {
readonly color: {
readonly background: "light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-6, #141218))";
readonly error: "light-dark(var(--md-sys-palette-error-40, #b3261e), var(--md-sys-palette-error-80, #f2b8b5))";
readonly errorContainer: "light-dark(var(--md-sys-palette-error-90, #f9dedc), var(--md-sys-palette-error-30, #8c1d18))";
readonly inverseOnSurface: "light-dark(var(--md-sys-palette-neutral-95, #f5eff7), var(--md-sys-palette-neutral-20, #322f35))";
readonly inversePrimary: "light-dark(var(--md-sys-palette-primary-80, #d0bcff), var(--md-sys-palette-primary-40, #6750a4))";
readonly inverseSurface: "light-dark(var(--md-sys-palette-neutral-20, #322f35), var(--md-sys-palette-neutral-90, #e6e0e9))";
readonly onBackground: "light-dark(var(--md-sys-palette-neutral-10, #1d1b20), var(--md-sys-palette-neutral-90, #e6e0e9))";
readonly onError: "light-dark(var(--md-sys-palette-error-100, #fff), var(--md-sys-palette-error-20, #601410))";
readonly onErrorContainer: "light-dark(var(--md-sys-palette-error-10, #410e0b), var(--md-sys-palette-error-90, #f9dedc))";
readonly onPrimary: "light-dark(var(--md-sys-palette-primary-100, #fff), var(--md-sys-palette-primary-20, #381e72))";
readonly onPrimaryContainer: "light-dark(var(--md-sys-palette-primary-10, #21005d), var(--md-sys-palette-primary-90, #eaddff))";
readonly onPrimaryFixed: "var(--md-sys-palette-primary-10, #21005d)";
readonly onPrimaryFixedVariant: "var(--md-sys-palette-primary-30, #4f378b)";
readonly onSecondary: "light-dark(var(--md-sys-palette-secondary-100, #fff), var(--md-sys-palette-secondary-20, #332d41))";
readonly onSecondaryContainer: "light-dark(var(--md-sys-palette-secondary-10, #1d192b), var(--md-sys-palette-secondary-90, #e8def8))";
readonly onSecondaryFixed: "var(--md-sys-palette-secondary-10, #1d192b)";
readonly onSecondaryFixedVariant: "var(--md-sys-palette-secondary-30, #4a4458)";
readonly onSurface: "light-dark(var(--md-sys-palette-neutral-10, #1d1b20), var(--md-sys-palette-neutral-90, #e6e0e9))";
readonly onSurfaceVariant: "light-dark(var(--md-sys-palette-neutral-variant-30, #49454f), var(--md-sys-palette-neutral-variant-80, #cac4d0))";
readonly onTertiary: "light-dark(var(--md-sys-palette-tertiary-100, #fff), var(--md-sys-palette-tertiary-20, #492532))";
readonly onTertiaryContainer: "light-dark(var(--md-sys-palette-tertiary-10, #31111d), var(--md-sys-palette-tertiary-90, #ffd8e4))";
readonly onTertiaryFixed: "var(--md-sys-palette-tertiary-10, #31111d)";
readonly onTertiaryFixedVariant: "var(--md-sys-palette-tertiary-30, #633b48)";
readonly outline: "light-dark(var(--md-sys-palette-neutral-50, #79767d), var(--md-sys-palette-neutral-60, #938f96))";
readonly outlineVariant: "light-dark(var(--md-sys-palette-neutral-variant-80, #cac4d0), var(--md-sys-palette-neutral-variant-30, #49454f))";
readonly primary: "light-dark(var(--md-sys-palette-primary-40, #6750a4), var(--md-sys-palette-primary-80, #d0bcff))";
readonly primaryContainer: "light-dark(var(--md-sys-palette-primary-90, #eaddff), var(--md-sys-palette-primary-30, #4f378b))";
readonly primaryFixed: "var(--md-sys-palette-primary-90, #eaddff)";
readonly primaryFixedDim: "var(--md-sys-palette-primary-80, #d0bcff)";
readonly scrim: "var(--md-sys-palette-neutral-0, #000)";
readonly secondary: "light-dark(var(--md-sys-palette-secondary-40, #625b71), var(--md-sys-palette-secondary-80, #ccc2dc))";
readonly secondaryContainer: "light-dark(var(--md-sys-palette-secondary-90, #e8def8), var(--md-sys-palette-secondary-30, #4a4458))";
readonly secondaryFixed: "var(--md-sys-palette-secondary-90, #e8def8)";
readonly secondaryFixedDim: "var(--md-sys-palette-secondary-80, #ccc2dc)";
readonly shadow: "var(--md-sys-palette-neutral-0, #000)";
readonly surface: "light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-6, #141218))";
readonly surfaceBright: "light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-24, #3b383e))";
readonly surfaceContainer: "light-dark(var(--md-sys-palette-neutral-94, #f3edf7), var(--md-sys-palette-neutral-12, #211f26))";
readonly surfaceContainerHigh: "light-dark(var(--md-sys-palette-neutral-92, #ece6f0), var(--md-sys-palette-neutral-17, #2b2930))";
readonly surfaceContainerHighest: "light-dark(var(--md-sys-palette-neutral-90, #e6e0e9), var(--md-sys-palette-neutral-22, #36343b))";
readonly surfaceContainerLow: "light-dark(var(--md-sys-palette-neutral-96, #f7f2fa), var(--md-sys-palette-neutral-10, #1d1b20))";
readonly surfaceContainerLowest: "light-dark(var(--md-sys-palette-neutral-100, #fff), var(--md-sys-palette-neutral-4, #0f0d13))";
readonly surfaceDim: "light-dark(var(--md-sys-palette-neutral-87, #ded8e1), var(--md-sys-palette-neutral-6, #141218))";
readonly surfaceTint: "light-dark(var(--md-sys-palette-primary-40, #6750a4), var(--md-sys-palette-primary-80, #d0bcff))";
readonly surfaceVariant: "light-dark(var(--md-sys-palette-neutral-variant-90, #e7e0ec), var(--md-sys-palette-neutral-variant-30, #49454f))";
readonly tertiary: "light-dark(var(--md-sys-palette-tertiary-40, #7d5260), var(--md-sys-palette-tertiary-80, #efb8c8))";
readonly tertiaryContainer: "light-dark(var(--md-sys-palette-tertiary-90, #ffd8e4), var(--md-sys-palette-tertiary-30, #633b48))";
readonly tertiaryFixed: "var(--md-sys-palette-tertiary-90, #ffd8e4)";
readonly tertiaryFixedDim: "var(--md-sys-palette-tertiary-80, #efb8c8)";
};
readonly palette: {
readonly black: "var(--md-sys-palette-black, #000)";
readonly error0: "var(--md-sys-palette-error-0, #000)";
readonly error10: "var(--md-sys-palette-error-10, #410e0b)";
readonly error100: "var(--md-sys-palette-error-100, #fff)";
readonly error20: "var(--md-sys-palette-error-20, #601410)";
readonly error30: "var(--md-sys-palette-error-30, #8c1d18)";
readonly error40: "var(--md-sys-palette-error-40, #b3261e)";
readonly error50: "var(--md-sys-palette-error-50, #dc362e)";
readonly error60: "var(--md-sys-palette-error-60, #e46962)";
readonly error70: "var(--md-sys-palette-error-70, #ec928e)";
readonly error80: "var(--md-sys-palette-error-80, #f2b8b5)";
readonly error90: "var(--md-sys-palette-error-90, #f9dedc)";
readonly error95: "var(--md-sys-palette-error-95, #fceeee)";
readonly error99: "var(--md-sys-palette-error-99, #fffbf9)";
readonly neutralVariant0: "var(--md-sys-palette-neutral-variant-0, #000)";
readonly neutralVariant10: "var(--md-sys-palette-neutral-variant-10, #1d1a22)";
readonly neutralVariant100: "var(--md-sys-palette-neutral-variant-100, #fff)";
readonly neutralVariant20: "var(--md-sys-palette-neutral-variant-20, #322f37)";
readonly neutralVariant30: "var(--md-sys-palette-neutral-variant-30, #49454f)";
readonly neutralVariant40: "var(--md-sys-palette-neutral-variant-40, #605d66)";
readonly neutralVariant50: "var(--md-sys-palette-neutral-variant-50, #79747e)";
readonly neutralVariant60: "var(--md-sys-palette-neutral-variant-60, #938f99)";
readonly neutralVariant70: "var(--md-sys-palette-neutral-variant-70, #aea9b4)";
readonly neutralVariant80: "var(--md-sys-palette-neutral-variant-80, #cac4d0)";
readonly neutralVariant90: "var(--md-sys-palette-neutral-variant-90, #e7e0ec)";
readonly neutralVariant95: "var(--md-sys-palette-neutral-variant-95, #f5eefa)";
readonly neutralVariant99: "var(--md-sys-palette-neutral-variant-99, #fffbfe)";
readonly neutral0: "var(--md-sys-palette-neutral-0, #000)";
readonly neutral10: "var(--md-sys-palette-neutral-10, #1d1b20)";
readonly neutral100: "var(--md-sys-palette-neutral-100, #fff)";
readonly neutral12: "var(--md-sys-palette-neutral-12, #211f26)";
readonly neutral17: "var(--md-sys-palette-neutral-17, #2b2930)";
readonly neutral20: "var(--md-sys-palette-neutral-20, #322f35)";
readonly neutral22: "var(--md-sys-palette-neutral-22, #36343b)";
readonly neutral24: "var(--md-sys-palette-neutral-24, #3b383e)";
readonly neutral30: "var(--md-sys-palette-neutral-30, #48464c)";
readonly neutral4: "var(--md-sys-palette-neutral-4, #0f0d13)";
readonly neutral40: "var(--md-sys-palette-neutral-40, #605d64)";
readonly neutral50: "var(--md-sys-palette-neutral-50, #79767d)";
readonly neutral6: "var(--md-sys-palette-neutral-6, #141218)";
readonly neutral60: "var(--md-sys-palette-neutral-60, #938f96)";
readonly neutral70: "var(--md-sys-palette-neutral-70, #aea9b1)";
readonly neutral80: "var(--md-sys-palette-neutral-80, #cac5cd)";
readonly neutral87: "var(--md-sys-palette-neutral-87, #ded8e1)";
readonly neutral90: "var(--md-sys-palette-neutral-90, #e6e0e9)";
readonly neutral92: "var(--md-sys-palette-neutral-92, #ece6f0)";
readonly neutral94: "var(--md-sys-palette-neutral-94, #f3edf7)";
readonly neutral95: "var(--md-sys-palette-neutral-95, #f5eff7)";
readonly neutral96: "var(--md-sys-palette-neutral-96, #f7f2fa)";
readonly neutral98: "var(--md-sys-palette-neutral-98, #fef7ff)";
readonly neutral99: "var(--md-sys-palette-neutral-99, #fffbff)";
readonly primary0: "var(--md-sys-palette-primary-0, #000)";
readonly primary10: "var(--md-sys-palette-primary-10, #21005d)";
readonly primary100: "var(--md-sys-palette-primary-100, #fff)";
readonly primary20: "var(--md-sys-palette-primary-20, #381e72)";
readonly primary30: "var(--md-sys-palette-primary-30, #4f378b)";
readonly primary40: "var(--md-sys-palette-primary-40, #6750a4)";
readonly primary50: "var(--md-sys-palette-primary-50, #7f67be)";
readonly primary60: "var(--md-sys-palette-primary-60, #9a82db)";
readonly primary70: "var(--md-sys-palette-primary-70, #b69df8)";
readonly primary80: "var(--md-sys-palette-primary-80, #d0bcff)";
readonly primary90: "var(--md-sys-palette-primary-90, #eaddff)";
readonly primary95: "var(--md-sys-palette-primary-95, #f6edff)";
readonly primary99: "var(--md-sys-palette-primary-99, #fffbfe)";
readonly secondary0: "var(--md-sys-palette-secondary-0, #000)";
readonly secondary10: "var(--md-sys-palette-secondary-10, #1d192b)";
readonly secondary100: "var(--md-sys-palette-secondary-100, #fff)";
readonly secondary20: "var(--md-sys-palette-secondary-20, #332d41)";
readonly secondary30: "var(--md-sys-palette-secondary-30, #4a4458)";
readonly secondary40: "var(--md-sys-palette-secondary-40, #625b71)";
readonly secondary50: "var(--md-sys-palette-secondary-50, #7a7289)";
readonly secondary60: "var(--md-sys-palette-secondary-60, #958da5)";
readonly secondary70: "var(--md-sys-palette-secondary-70, #b0a7c0)";
readonly secondary80: "var(--md-sys-palette-secondary-80, #ccc2dc)";
readonly secondary90: "var(--md-sys-palette-secondary-90, #e8def8)";
readonly secondary95: "var(--md-sys-palette-secondary-95, #f6edff)";
readonly secondary99: "var(--md-sys-palette-secondary-99, #fffbfe)";
readonly tertiary0: "var(--md-sys-palette-tertiary-0, #000)";
readonly tertiary10: "var(--md-sys-palette-tertiary-10, #31111d)";
readonly tertiary100: "var(--md-sys-palette-tertiary-100, #fff)";
readonly tertiary20: "var(--md-sys-palette-tertiary-20, #492532)";
readonly tertiary30: "var(--md-sys-palette-tertiary-30, #633b48)";
readonly tertiary40: "var(--md-sys-palette-tertiary-40, #7d5260)";
readonly tertiary50: "var(--md-sys-palette-tertiary-50, #986977)";
readonly tertiary60: "var(--md-sys-palette-tertiary-60, #b58392)";
readonly tertiary70: "var(--md-sys-palette-tertiary-70, #d29dac)";
readonly tertiary80: "var(--md-sys-palette-tertiary-80, #efb8c8)";
readonly tertiary90: "var(--md-sys-palette-tertiary-90, #ffd8e4)";
readonly tertiary95: "var(--md-sys-palette-tertiary-95, #ffecf1)";
readonly tertiary99: "var(--md-sys-palette-tertiary-99, #fffbfa)";
readonly white: "var(--md-sys-palette-white, #fff)";
};
readonly motion: {
readonly short1: "50ms";
readonly short2: "100ms";
readonly short3: "150ms";
readonly short4: "200ms";
readonly medium1: "250ms";
readonly medium2: "300ms";
readonly medium3: "350ms";
readonly medium4: "400ms";
readonly long1: "450ms";
readonly long2: "500ms";
readonly long3: "550ms";
readonly long4: "600ms";
readonly extraLong1: "700ms";
readonly extraLong2: "800ms";
readonly extraLong3: "900ms";
readonly extraLong4: "1000ms";
};
readonly easing: {
readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
readonly standardAccelerate: "cubic-bezier(0.3, 0, 1, 1)";
readonly standardDecelerate: "cubic-bezier(0, 0, 0, 1)";
readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
readonly emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)";
readonly emphasizedDecelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)";
readonly legacy: "cubic-bezier(0.4, 0, 0.2, 1)";
readonly legacyAccelerate: "cubic-bezier(0.4, 0, 1, 1)";
readonly legacyDecelerate: "cubic-bezier(0, 0, 0.2, 1)";
readonly linear: "cubic-bezier(0, 0, 1, 1)";
};
readonly elevation: {
readonly level0: number;
readonly level1: number;
readonly level2: number;
readonly level3: number;
readonly level4: number;
readonly level5: number;
};
readonly shape: {
readonly full: string;
readonly extraLarge: string;
readonly large: string;
readonly medium: string;
readonly small: string;
readonly extraSmall: string;
readonly none: string;
};
};
};