@sandlada/vue-mdc
Version:

603 lines (596 loc) • 25.7 kB
text/typescript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
/**
* Vibrant
* 135 75 50
*/
const GreenLight = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
const GreenDark = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
/**
* Fidelity
* 200 75 50
*/
const AquamarineLight = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
const AquamarineDark = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
/**
* 260 50 45
*/
const BlueLight = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
const BlueDark = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
/**
* Vibrant
* 320 75 50
*/
const PurpleLight = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
const PurpleDark = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
/**
* Fidelity
* 55 75 50
*/
const OrangeLight = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
const OrangeDark = `
--md-sys-color-primary-palette-key-color:
--md-sys-color-secondary-palette-key-color:
--md-sys-color-tertiary-palette-key-color:
--md-sys-color-neutral-palette-key-color:
--md-sys-color-neutral-variant-palette-key-color:
--md-sys-color-background:
--md-sys-color-on-background:
--md-sys-color-surface:
--md-sys-color-surface-dim:
--md-sys-color-surface-bright:
--md-sys-color-surface-container-lowest:
--md-sys-color-surface-container-low:
--md-sys-color-surface-container:
--md-sys-color-surface-container-high:
--md-sys-color-surface-container-highest:
--md-sys-color-on-surface:
--md-sys-color-surface-variant:
--md-sys-color-on-surface-variant:
--md-sys-color-inverse-surface:
--md-sys-color-inverse-on-surface:
--md-sys-color-outline:
--md-sys-color-outline-variant:
--md-sys-color-shadow:
--md-sys-color-scrim:
--md-sys-color-surface-tint:
--md-sys-color-primary:
--md-sys-color-on-primary:
--md-sys-color-primary-container:
--md-sys-color-on-primary-container:
--md-sys-color-inverse-primary:
--md-sys-color-secondary:
--md-sys-color-on-secondary:
--md-sys-color-secondary-container:
--md-sys-color-on-secondary-container:
--md-sys-color-tertiary:
--md-sys-color-on-tertiary:
--md-sys-color-tertiary-container:
--md-sys-color-on-tertiary-container:
--md-sys-color-error:
--md-sys-color-on-error:
--md-sys-color-error-container:
--md-sys-color-on-error-container:
--md-sys-color-primary-fixed:
--md-sys-color-primary-fixed-dim:
--md-sys-color-on-primary-fixed:
--md-sys-color-on-primary-fixed-variant:
--md-sys-color-secondary-fixed:
--md-sys-color-secondary-fixed-dim:
--md-sys-color-on-secondary-fixed:
--md-sys-color-on-secondary-fixed-variant:
--md-sys-color-tertiary-fixed:
--md-sys-color-tertiary-fixed-dim:
--md-sys-color-on-tertiary-fixed:
--md-sys-color-on-tertiary-fixed-variant:
`
export const DefaultThemes = {
GreenLight,
GreenDark,
AquamarineLight,
AquamarineDark,
BlueLight,
BlueDark,
PurpleLight,
PurpleDark,
OrangeLight,
OrangeDark,
} as const