diff --git a/src/components/SchemeSign.module.css b/src/components/SchemeSign.module.css index 09b8591..a6a6a99 100644 --- a/src/components/SchemeSign.module.css +++ b/src/components/SchemeSign.module.css @@ -17,5 +17,9 @@ background-color: #a78fff; color: var(--color-qihei); } + &.m3d { + background-color: #ffde3f; + color: var(--color-qihei); + } } } diff --git a/src/components/SchemeSign.tsx b/src/components/SchemeSign.tsx index 4785f7d..f2d893d 100644 --- a/src/components/SchemeSign.tsx +++ b/src/components/SchemeSign.tsx @@ -22,6 +22,8 @@ export function SchemeSign({ scheme, short = false }: SchemeSignProps) { return styles.m2; case 'material_3': return styles.m3; + case 'material_3_dynamic': + return styles.m3d; } }, [scheme]); diff --git a/src/models.ts b/src/models.ts index 4b4a6ed..6ff8c15 100644 --- a/src/models.ts +++ b/src/models.ts @@ -29,7 +29,12 @@ export type ColorDescription = { oklch: [number, number, number]; }; -export type SchemeType = 'q_scheme' | 'swatch_scheme' | 'material_2' | 'material_3'; +export type SchemeType = + | 'q_scheme' + | 'swatch_scheme' + | 'material_2' + | 'material_3' + | 'material_3_dynamic'; export type SchemeTypeOption = { label: string; short: string; @@ -40,6 +45,7 @@ export const SchemeTypeOptions: SchemeTypeOption[] = [ { label: 'Swatch Scheme', short: 'Swatch', value: 'swatch_scheme' }, { label: 'Material Design 2 Scheme', short: 'M2', value: 'material_2' }, { label: 'Material Design 3 Scheme', short: 'M3', value: 'material_3' }, + { label: 'Material Design 3 Dynamic Scheme', short: 'M3D', value: 'material_3_dynamic' }, ]; export function schemeType(