/** * Represents a color palette configuration. * @typedef {object} PaletteConfig * @property {object} primary - The primary color palette. * @property {object} secondary - The secondary color palette. * @property {object} tertiary - The tertiary color palette. * @property {object} error - The error color palette. * @property {object} neutral - The neutral color palette. * @property {object} neutralVariant - The neutral variant color palette. */ /** * Represents a light scheme configuration. * @typedef {object} LightSchemeConfig * @property {string} primary - The primary color for the light scheme. * @property {string} onPrimary - The text color on the primary color for the light scheme. * @property {string} primaryContainer - The container color for the primary color in the light scheme. * @property {string} onPrimaryContainer - The text color on the container color for the primary color in the light scheme. * @property {string} secondary - The secondary color for the light scheme. * @property {string} onSecondary - The text color on the secondary color for the light scheme. * @property {string} secondaryContainer - The container color for the secondary color in the light scheme. * @property {string} onSecondaryContainer - The text color on the container color for the secondary color in the light scheme. * @property {string} tertiary - The tertiary color for the light scheme. * @property {string} onTertiary - The text color on the tertiary color for the light scheme. * @property {string} tertiaryContainer - The container color for the tertiary color in the light scheme. * @property {string} onTertiaryContainer - The text color on the container color for the tertiary color in the light scheme. * @property {string} error - The error color for the light scheme. * @property {string} onError - The text color on the error color for the light scheme. * @property {string} errorContainer - The container color for the error color in the light scheme. * @property {string} onErrorContainer - The text color on the container color for the error color in the light scheme. * @property {string} surface - The surface color for the light scheme. * @property {string} onSurface - The text color on the surface color for the light scheme. * @property {string} surfaceVariant - The variant surface color for the light scheme. * @property {string} onSurfaceVariant - The text color on the variant surface color for the light scheme. * @property {string} surfaceContainerLowest - The lowest container color for the surface color in the light scheme. * @property {string} surfaceContainerLow - The low container color for the surface color in the light scheme. * @property {string} surfaceContainer - The container color for the surface color in the light scheme. * @property {string} surfaceContainerHigh - The high container color for the surface color in the light scheme. * @property {string} surfaceContainerHighest - The highest container color for the surface color in the light scheme. * @property {string} surfaceTint - The tint color for the surface color in the light scheme. * @property {string} outline - The outline color for the light scheme. * @property {string} outlineVariant - The variant outline color for the light scheme. * @property {string} shadow - The shadow color for the light scheme. * @property {string} background - The background color for the light scheme. * @property {string} onBackground - The text color on the background color for the light scheme. * @property {string} inversePrimary - The inverse primary color for the light scheme. * @property {string} inverseSurface - The inverse surface color for the light scheme. * @property {string} inverseOnSurface - The text color on the inverse surface color for the light scheme. */ /** * Represents a dark scheme configuration. * @typedef {object} DarkSchemeConfig * @property {string} primary - The primary color for the dark scheme. * @property {string} onPrimary - The text color on the primary color for the dark scheme. * @property {string} primaryContainer - The container color for the primary color in the dark scheme. * @property {string} onPrimaryContainer - The text color on the container color for the primary color in the dark scheme. * @property {string} secondary - The secondary color for the dark scheme. * @property {string} onSecondary - The text color on the secondary color for the dark scheme. * @property {string} secondaryContainer - The container color for the secondary color in the dark scheme. * @property {string} onSecondaryContainer - The text color on the container color for the secondary color in the dark scheme. * @property {string} tertiary - The tertiary color for the dark scheme. * @property {string} onTertiary - The text color on the tertiary color for the dark scheme. * @property {string} tertiaryContainer - The container color for the tertiary color in the dark scheme. * @property {string} onTertiaryContainer - The text color on the container color for the tertiary color in the dark scheme. * @property {string} error - The error color for the dark scheme. * @property {string} onError - The text color on the error color for the dark scheme. * @property {string} errorContainer - The container color for the error color in the dark scheme. * @property {string} onErrorContainer - The text color on the container color for the error color in the dark scheme. * @property {string} surface - The surface color for the dark scheme. * @property {string} onSurface - The text color on the surface color for the dark scheme. * @property {string} surfaceVariant - The variant surface color for the dark scheme. * @property {string} onSurfaceVariant - The text color on the variant surface color for the dark scheme. * @property {string} surfaceContainerLowest - The lowest container color for the surface color in the dark scheme. * @property {string} surfaceContainerLow - The low container color for the surface color in the dark scheme. * @property {string} surfaceContainer - The container color for the surface color in the dark scheme. * @property {string} surfaceContainerHigh - The high container color for the surface color in the dark scheme. * @property {string} surfaceContainerHighest - The highest container color for the surface color in the dark scheme. * @property {string} surfaceTint - The tint color for the surface color in the dark scheme. * @property {string} outline - The outline color for the dark scheme. * @property {string} outlineVariant - The variant outline color for the dark scheme. * @property {string} shadow - The shadow color for the dark scheme. * @property {string} background - The background color for the dark scheme. * @property {string} onBackground - The text color on the background color for the dark scheme. * @property {string} inversePrimary - The inverse primary color for the dark scheme. * @property {string} inverseSurface - The inverse surface color for the dark scheme. * @property {string} inverseOnSurface - The text color on the inverse surface color for the dark scheme. */ /** * Represents a color configuration. * @typedef {object} ColorConfig * @property {PaletteConfig} palette - The color palette configuration. * @property {LightSchemeConfig} lightScheme - The light scheme configuration. * @property {DarkSchemeConfig} darkScheme - The dark scheme configuration. */ export const theme = { palette: { primary: { 0: '#000000', 10: '#22005d', 20: '#3a0093', 30: '#5300cd', 40: '#6d23f9', 50: '#8553ff', 60: '#9d79ff', 70: '#b69cff', 80: '#cfbdff', 90: '#e8ddff', 95: '#f5eeff', 99: '#fffbff', 100: '#ffffff' }, secondary: { 0: '#000000', 10: '#00201c', 20: '#003731', 30: '#005048', 40: '#006a60', 50: '#008679', 60: '#00a293', 70: '#00c0ae', 80: '#17deca', 90: '#4ffbe6', 95: '#b4fff2', 99: '#f2fffb', 100: '#ffffff' }, tertiary: { 0: '#000000', 10: '#00201c', 20: '#003731', 30: '#005048', 40: '#006a60', 50: '#008679', 60: '#00a293', 70: '#00c0ae', 80: '#17deca', 90: '#4ffbe6', 95: '#b4fff2', 99: '#f2fffb', 100: '#ffffff' }, error: { 0: '#000000', 10: '#410006', 20: '#68000f', 30: '#930019', 40: '#bc1127', 50: '#e0313c', 60: '#ff5357', 70: '#ff8985', 80: '#ffb3af', 90: '#ffdad8', 95: '#ffedeb', 99: '#fffbff', 100: '#ffffff' }, neutral: { 0: '#000000', 4: '#0e0e0e', 6: '#131313', 10: '#1b1b1b', 12: '#1f1f1f', 17: '#2a2a2a', 20: '#303030', 22: '#353535', 24: '#393939', 30: '#474747', 40: '#5e5e5e', 50: '#777777', 60: '#919191', 70: '#ababab', 80: '#c6c6c6', 90: '#e2e2e2', 92: '#e8e8e8', 94: '#eeeeee', 95: '#f1f1f1', 96: '#f3f3f3', 98: '#f9f9f9', 99: '#fcfcfc', 100: '#ffffff' }, neutralVariant: { 0: '#000000', 10: '#1a1c1c', 20: '#2f3131', 30: '#454747', 40: '#5d5f5f', 50: '#767777', 60: '#909191', 70: '#aaabab', 80: '#c6c6c7', 90: '#e2e2e2', 95: '#f0f1f1', 99: '#fcfcfc', 100: '#ffffff' } }, lightScheme: { primary: '#6d23f9', onPrimary: '#ffffff', primaryContainer: '#e8ddff', onPrimaryContainer: '#22005d', secondary: '#006a60', onSecondary: '#ffffff', secondaryContainer: '#4ffbe6', onSecondaryContainer: '#00201c', tertiary: '#006a60', onTertiary: '#ffffff', tertiaryContainer: '#4ffbe6', onTertiaryContainer: '#00201c', error: '#bc1127', onError: '#ffffff', errorContainer: '#ffdad8', onErrorContainer: '#410006', surface: '#f9f9f9', onSurface: '#1b1b1b', surfaceVariant: '#e2e2e2', onSurfaceVariant: '#454747', surfaceContainerLowest: '#ffffff', surfaceContainerLow: '#f3f3f3', surfaceContainer: '#eeeeee', surfaceContainerHigh: '#e8e8e8', surfaceContainerHighest: '#e2e2e2', surfaceTint: '#6d23f9', outline: '#767777', outlineVariant: '#c6c6c7', shadow: '#000000', background: '#f9f9f9', onBackground: '#1b1b1b', inversePrimary: '#cfbdff', inverseSurface: '#303030', inverseOnSurface: '#f1f1f1' }, darkScheme: { primary: '#cfbdff', onPrimary: '#3a0093', primaryContainer: '#5300cd', onPrimaryContainer: '#e8ddff', secondary: '#17deca', onSecondary: '#003731', secondaryContainer: '#005048', onSecondaryContainer: '#4ffbe6', tertiary: '#17deca', onTertiary: '#003731', tertiaryContainer: '#005048', onTertiaryContainer: '#4ffbe6', error: '#ffb3af', onError: '#68000f', errorContainer: '#930019', onErrorContainer: '#ffdad8', surface: '#131313', onSurface: '#e2e2e2', surfaceVariant: '#454747', onSurfaceVariant: '#c6c6c7', surfaceContainerLowest: '#0e0e0e', surfaceContainerLow: '#1b1b1b', surfaceContainer: '#1f1f1f', surfaceContainerHigh: '#2a2a2a', surfaceContainerHighest: '#393939', surfaceTint: '#cfbdff', outline: '#909191', outlineVariant: '#454747', shadow: '#000000', background: '#131313', onBackground: '#e2e2e2', inversePrimary: '#6d23f9', inverseSurface: '#e2e2e2', inverseOnSurface: '#303030' } };