@sandlada/mdk/build/modules/color.js

A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.

export const Palette = {
    Black: `var(--md-sys-palette-black, #000)`,
    Error0: `var(--md-sys-palette-error-0, #000)`,
    Error10: `var(--md-sys-palette-error-10, #410e0b)`,
    Error20: `var(--md-sys-palette-error-20, #601410)`,
    Error30: `var(--md-sys-palette-error-30, #8c1d18)`,
    Error40: `var(--md-sys-palette-error-40, #b3261e)`,
    Error50: `var(--md-sys-palette-error-50, #dc362e)`,
    Error60: `var(--md-sys-palette-error-60, #e46962)`,
    Error70: `var(--md-sys-palette-error-70, #ec928e)`,
    Error80: `var(--md-sys-palette-error-80, #f2b8b5)`,
    Error90: `var(--md-sys-palette-error-90, #f9dedc)`,
    Error95: `var(--md-sys-palette-error-95, #fceeee)`,
    Error99: `var(--md-sys-palette-error-99, #fffbf9)`,
    Error100: `var(--md-sys-palette-error-100, #fff)`,
    NeutralVariant0: `var(--md-sys-palette-neutral-variant-0, #000)`,
    NeutralVariant10: `var(--md-sys-palette-neutral-variant-10, #1d1a22)`,
    NeutralVariant20: `var(--md-sys-palette-neutral-variant-20, #322f37)`,
    NeutralVariant30: `var(--md-sys-palette-neutral-variant-30, #49454f)`,
    NeutralVariant40: `var(--md-sys-palette-neutral-variant-40, #605d66)`,
    NeutralVariant50: `var(--md-sys-palette-neutral-variant-50, #79747e)`,
    NeutralVariant60: `var(--md-sys-palette-neutral-variant-60, #938f99)`,
    NeutralVariant70: `var(--md-sys-palette-neutral-variant-70, #aea9b4)`,
    NeutralVariant80: `var(--md-sys-palette-neutral-variant-80, #cac4d0)`,
    NeutralVariant90: `var(--md-sys-palette-neutral-variant-90, #e7e0ec)`,
    NeutralVariant95: `var(--md-sys-palette-neutral-variant-95, #f5eefa)`,
    NeutralVariant99: `var(--md-sys-palette-neutral-variant-99, #fffbfe)`,
    NeutralVariant100: `var(--md-sys-palette-neutral-variant-100, #fff)`,
    Neutral0: `var(--md-sys-palette-neutral-0, #000)`,
    Neutral4: `var(--md-sys-palette-neutral-4, #0f0d13)`,
    Neutral6: `var(--md-sys-palette-neutral-6, #141218)`,
    Neutral10: `var(--md-sys-palette-neutral-10, #1d1b20)`,
    Neutral12: `var(--md-sys-palette-neutral-12, #211f26)`,
    Neutral17: `var(--md-sys-palette-neutral-17, #2b2930)`,
    Neutral20: `var(--md-sys-palette-neutral-20, #322f35)`,
    Neutral22: `var(--md-sys-palette-neutral-22, #36343b)`,
    Neutral24: `var(--md-sys-palette-neutral-24, #3b383e)`,
    Neutral30: `var(--md-sys-palette-neutral-30, #48464c)`,
    Neutral40: `var(--md-sys-palette-neutral-40, #605d64)`,
    Neutral50: `var(--md-sys-palette-neutral-50, #79767d)`,
    Neutral60: `var(--md-sys-palette-neutral-60, #938f96)`,
    Neutral70: `var(--md-sys-palette-neutral-70, #aea9b1)`,
    Neutral80: `var(--md-sys-palette-neutral-80, #cac5cd)`,
    Neutral87: `var(--md-sys-palette-neutral-87, #ded8e1)`,
    Neutral90: `var(--md-sys-palette-neutral-90, #e6e0e9)`,
    Neutral92: `var(--md-sys-palette-neutral-92, #ece6f0)`,
    Neutral94: `var(--md-sys-palette-neutral-94, #f3edf7)`,
    Neutral95: `var(--md-sys-palette-neutral-95, #f5eff7)`,
    Neutral96: `var(--md-sys-palette-neutral-96, #f7f2fa)`,
    Neutral98: `var(--md-sys-palette-neutral-98, #fef7ff)`,
    Neutral99: `var(--md-sys-palette-neutral-99, #fffbff)`,
    Neutral100: `var(--md-sys-palette-neutral-100, #fff)`,
    Primary0: `var(--md-sys-palette-primary-0, #000)`,
    Primary10: `var(--md-sys-palette-primary-10, #21005d)`,
    Primary20: `var(--md-sys-palette-primary-20, #381e72)`,
    Primary30: `var(--md-sys-palette-primary-30, #4f378b)`,
    Primary40: `var(--md-sys-palette-primary-40, #6750a4)`,
    Primary50: `var(--md-sys-palette-primary-50, #7f67be)`,
    Primary60: `var(--md-sys-palette-primary-60, #9a82db)`,
    Primary70: `var(--md-sys-palette-primary-70, #b69df8)`,
    Primary80: `var(--md-sys-palette-primary-80, #d0bcff)`,
    Primary90: `var(--md-sys-palette-primary-90, #eaddff)`,
    Primary95: `var(--md-sys-palette-primary-95, #f6edff)`,
    Primary99: `var(--md-sys-palette-primary-99, #fffbfe)`,
    Primary100: `var(--md-sys-palette-primary-100, #fff)`,
    Secondary0: `var(--md-sys-palette-secondary-0, #000)`,
    Secondary10: `var(--md-sys-palette-secondary-10, #1d192b)`,
    Secondary20: `var(--md-sys-palette-secondary-20, #332d41)`,
    Secondary30: `var(--md-sys-palette-secondary-30, #4a4458)`,
    Secondary40: `var(--md-sys-palette-secondary-40, #625b71)`,
    Secondary50: `var(--md-sys-palette-secondary-50, #7a7289)`,
    Secondary60: `var(--md-sys-palette-secondary-60, #958da5)`,
    Secondary70: `var(--md-sys-palette-secondary-70, #b0a7c0)`,
    Secondary80: `var(--md-sys-palette-secondary-80, #ccc2dc)`,
    Secondary90: `var(--md-sys-palette-secondary-90, #e8def8)`,
    Secondary95: `var(--md-sys-palette-secondary-95, #f6edff)`,
    Secondary99: `var(--md-sys-palette-secondary-99, #fffbfe)`,
    Secondary100: `var(--md-sys-palette-secondary-100, #fff)`,
    Tertiary0: `var(--md-sys-palette-tertiary-0, #000)`,
    Tertiary10: `var(--md-sys-palette-tertiary-10, #31111d)`,
    Tertiary20: `var(--md-sys-palette-tertiary-20, #492532)`,
    Tertiary30: `var(--md-sys-palette-tertiary-30, #633b48)`,
    Tertiary40: `var(--md-sys-palette-tertiary-40, #7d5260)`,
    Tertiary50: `var(--md-sys-palette-tertiary-50, #986977)`,
    Tertiary60: `var(--md-sys-palette-tertiary-60, #b58392)`,
    Tertiary70: `var(--md-sys-palette-tertiary-70, #d29dac)`,
    Tertiary80: `var(--md-sys-palette-tertiary-80, #efb8c8)`,
    Tertiary90: `var(--md-sys-palette-tertiary-90, #ffd8e4)`,
    Tertiary95: `var(--md-sys-palette-tertiary-95, #ffecf1)`,
    Tertiary99: `var(--md-sys-palette-tertiary-99, #fffbfa)`,
    Tertiary100: `var(--md-sys-palette-tertiary-100, #fff)`,
    White: `var(--md-sys-palette-white, #fff)`,
};
export const DefaultLightColor = {
    Background: `var(--md-sys-color-background, ${Palette.Neutral98})`,
    Error: `var(--md-sys-color-error, ${Palette.Error40})`,
    ErrorContainer: `var(--md-sys-color-error-container, ${Palette.Error90})`,
    InverseOnSurface: `var(--md-sys-color-inverse-on-surface, ${Palette.Neutral95})`,
    InversePrimary: `var(--md-sys-color-inverse-primary, ${Palette.Primary80})`,
    InverseSurface: `var(--md-sys-color-inverse-surface, ${Palette.Neutral20})`,
    OnBackground: `var(--md-sys-color-on-background, ${Palette.Neutral10})`,
    OnError: `var(--md-sys-color-on-error, ${Palette.Error100})`,
    OnErrorContainer: `var(--md-sys-color-on-error-container, ${Palette.Error10})`,
    OnPrimary: `var(--md-sys-color-on-primary, ${Palette.Primary100})`,
    OnPrimaryContainer: `var(--md-sys-color-on-primary-container, ${Palette.Primary10})`,
    OnPrimaryFixed: `var(--md-sys-color-on-primary-fixed, ${Palette.Primary10})`,
    OnPrimaryFixedVariant: `var(--md-sys-color-on-primary-fixed-variant, ${Palette.Primary30})`,
    OnSecondary: `var(--md-sys-color-on-secondary, ${Palette.Secondary100})`,
    OnSecondaryContainer: `var(--md-sys-color-on-secondary-container, ${Palette.Secondary10})`,
    OnSecondaryFixed: `var(--md-sys-color-on-secondary-fixed, ${Palette.Secondary10})`,
    OnSecondaryFixedVariant: `var(--md-sys-color-on-secondary-fixed-variant, ${Palette.Secondary30})`,
    OnSurface: `var(--md-sys-color-on-surface, ${Palette.Neutral10})`,
    OnSurfaceVariant: `var(--md-sys-color-on-surface-variant, ${Palette.NeutralVariant30})`,
    OnTertiary: `var(--md-sys-color-on-tertiary, ${Palette.Tertiary100})`,
    OnTertiaryContainer: `var(--md-sys-color-on-tertiary-container, ${Palette.Tertiary10})`,
    OnTertiaryFixed: `var(--md-sys-color-on-tertiary-fixed, ${Palette.Tertiary10})`,
    OnTertiaryFixedVariant: `var(--md-sys-color-on-tertiary-fixed-variant, ${Palette.Tertiary30})`,
    Outline: `var(--md-sys-color-outline, ${Palette.Neutral50})`,
    OutlineVariant: `var(--md-sys-color-outline-variant, ${Palette.NeutralVariant80})`,
    Primary: `var(--md-sys-color-primary, ${Palette.Primary40})`,
    PrimaryContainer: `var(--md-sys-color-primary-container, ${Palette.Primary90})`,
    PrimaryFixed: `var(--md-sys-color-primary-fixed, ${Palette.Primary90})`,
    PrimaryFixedDim: `var(--md-sys-color-primary-fixed-dim, ${Palette.Primary80})`,
    Scrim: `var(--md-sys-color-scrim, ${Palette.Neutral0})`,
    Secondary: `var(--md-sys-color-secondary, ${Palette.Secondary40})`,
    SecondaryContainer: `var(--md-sys-color-secondary-container, ${Palette.Secondary90})`,
    SecondaryFixed: `var(--md-sys-color-secondary-fixed, ${Palette.Secondary90})`,
    SecondaryFixedDim: `var(--md-sys-color-secondary-fixed-dim, ${Palette.Secondary80})`,
    Shadow: `var(--md-sys-color-shadow, ${Palette.Neutral0})`,
    Surface: `var(--md-sys-color-surface, ${Palette.Neutral98})`,
    SurfaceBright: `var(--md-sys-color-surface-bright, ${Palette.Neutral98})`,
    SurfaceContainer: `var(--md-sys-color-surface-container, ${Palette.Neutral94})`,
    SurfaceContainerHigh: `var(--md-sys-color-surface-container-high, ${Palette.Neutral92})`,
    SurfaceContainerHighest: `var(--md-sys-color-surface-container-highest, ${Palette.Neutral90})`,
    SurfaceContainerLow: `var(--md-sys-color-surface-container-low, ${Palette.Neutral96})`,
    SurfaceContainerLowest: `var(--md-sys-color-surface-container-lowest, ${Palette.Neutral100})`,
    SurfaceDim: `var(--md-sys-color-surface-dim, ${Palette.Neutral87})`,
    SurfaceTint: `var(--md-sys-color-surface-tint, ${Palette.Primary40})`,
    SurfaceVariant: `var(--md-sys-color-surface-variant, ${Palette.NeutralVariant90}`,
    Tertiary: `var(--md-sys-color-tertiary, ${Palette.Tertiary40})`,
    TertiaryContainer: `var(--md-sys-color-tertiary-container, ${Palette.Tertiary90})`,
    TertiaryFixed: `var(--md-sys-color-tertiary-fixed, ${Palette.Tertiary90})`,
    TertiaryFixedDim: `var(--md-sys-color-tertiary-fixed-dim, ${Palette.Tertiary80})`,
};
export const DefaultDarkColor = {
    Background: `var(--md-sys-color-background, ${Palette.Neutral6})`,
    Error: `var(--md-sys-color-error, ${Palette.Error80})`,
    ErrorContainer: `var(--md-sys-color-error-container, ${Palette.Error30})`,
    InverseOnSurface: `var(--md-sys-color-inverse-on-surface, ${Palette.Neutral20})`,
    InversePrimary: `var(--md-sys-color-inverse-primary, ${Palette.Primary40})`,
    InverseSurface: `var(--md-sys-color-inverse-surface, ${Palette.Neutral90})`,
    OnBackground: `var(--md-sys-color-on-background, ${Palette.Neutral90})`,
    OnError: `var(--md-sys-color-on-error, ${Palette.Error20})`,
    OnErrorContainer: `var(--md-sys-color-on-error-container, ${Palette.Error90})`,
    OnPrimary: `var(--md-sys-color-on-primary, ${Palette.Primary20})`,
    OnPrimaryContainer: `var(--md-sys-color-on-primary-container, ${Palette.Primary90})`,
    OnPrimaryFixed: `var(--md-sys-color-on-primary-fixed, ${Palette.Primary10})`,
    OnPrimaryFixedVariant: `var(--md-sys-color-on-primary-fixed-variant, ${Palette.Primary30})`,
    OnSecondary: `var(--md-sys-color-on-secondary, ${Palette.Secondary20})`,
    OnSecondaryContainer: `var(--md-sys-color-on-secondary-container, ${Palette.Secondary90})`,
    OnSecondaryFixed: `var(--md-sys-color-on-secondary-fixed, ${Palette.Secondary10})`,
    OnSecondaryFixedVariant: `var(--md-sys-color-on-secondary-fixed-variant, ${Palette.Secondary30})`,
    OnSurface: `var(--md-sys-color-on-surface, ${Palette.Neutral90})`,
    OnSurfaceVariant: `var(--md-sys-color-on-surface-variant, ${Palette.NeutralVariant80})`,
    OnTertiary: `var(--md-sys-color-on-tertiary, ${Palette.Tertiary20})`,
    OnTertiaryContainer: `var(--md-sys-color-on-tertiary-container, ${Palette.Tertiary90})`,
    OnTertiaryFixed: `var(--md-sys-color-on-tertiary-fixed, ${Palette.Tertiary10})`,
    OnTertiaryFixedVariant: `var(--md-sys-color-on-tertiary-fixed-variant, ${Palette.Tertiary30})`,
    Outline: `var(--md-sys-color-outline, ${Palette.Neutral60})`,
    OutlineVariant: `var(--md-sys-color-outline-variant, ${Palette.NeutralVariant30})`,
    Primary: `var(--md-sys-color-primary, ${Palette.Primary80})`,
    PrimaryContainer: `var(--md-sys-color-primary-container, ${Palette.Primary30})`,
    PrimaryFixed: `var(--md-sys-color-primary-fixed, ${Palette.Primary90})`,
    PrimaryFixedDim: `var(--md-sys-color-primary-fixed-dim, ${Palette.Primary80})`,
    Scrim: `var(--md-sys-color-scrim, ${Palette.Neutral0})`,
    Secondary: `var(--md-sys-color-secondary, ${Palette.Secondary80})`,
    SecondaryContainer: `var(--md-sys-color-secondary-container, ${Palette.Secondary30})`,
    SecondaryFixed: `var(--md-sys-color-secondary-fixed, ${Palette.Secondary90})`,
    SecondaryFixedDim: `var(--md-sys-color-secondary-fixed-dim, ${Palette.Secondary80})`,
    Shadow: `var(--md-sys-color-shadow, ${Palette.Neutral0})`,
    Surface: `var(--md-sys-color-surface, ${Palette.Neutral6})`,
    SurfaceBright: `var(--md-sys-color-surface-bright, ${Palette.Neutral24})`,
    SurfaceContainer: `var(--md-sys-color-surface-container, ${Palette.Neutral12})`,
    SurfaceContainerHigh: `var(--md-sys-color-surface-container-high, ${Palette.Neutral17})`,
    SurfaceContainerHighest: `var(--md-sys-color-surface-container-highest, ${Palette.Neutral22})`,
    SurfaceContainerLow: `var(--md-sys-color-surface-container-low, ${Palette.Neutral10})`,
    SurfaceContainerLowest: `var(--md-sys-color-surface-container-lowest, ${Palette.Neutral4})`,
    SurfaceDim: `var(--md-sys-color-surface-dim, ${Palette.Neutral6})`,
    SurfaceTint: `var(--md-sys-color-surface-tint, ${Palette.Primary80})`,
    SurfaceVariant: `var(--md-sys-color-surface-variant, ${Palette.NeutralVariant30}`,
    Tertiary: `var(--md-sys-color-tertiary, ${Palette.Tertiary80})`,
    TertiaryContainer: `var(--md-sys-color-tertiary-container, ${Palette.Tertiary30})`,
    TertiaryFixed: `var(--md-sys-color-tertiary-fixed, ${Palette.Tertiary90})`,
    TertiaryFixedDim: `var(--md-sys-color-tertiary-fixed-dim, ${Palette.Tertiary80})`,
};
export const Color = DefaultLightColor;