mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-10 13:48:38 +00:00
106 lines
3.1 KiB
Text
106 lines
3.1 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { ColorSchemeSelector } from "color-scheme.slint";
|
|
|
|
// helper to create material design token like path md.sys.colors.
|
|
struct Color {
|
|
background: color,
|
|
surface: color,
|
|
surface-variant: color,
|
|
on-surface: color,
|
|
on-surface-variant: color,
|
|
primary: color,
|
|
on-primary: color,
|
|
primary-ripple: color,
|
|
shadow: color,
|
|
outline: color,
|
|
outline-variant: color,
|
|
secondary-container: color,
|
|
on-secondary-container: color,
|
|
secondary-ripple: color,
|
|
}
|
|
|
|
// typo settings
|
|
struct Label {
|
|
size: relative-font-size,
|
|
weight: int
|
|
}
|
|
|
|
// helper to create material design token like path md.sys.elevation.
|
|
struct Elevation {
|
|
level0: length,
|
|
level1: length,
|
|
level2: length
|
|
}
|
|
|
|
// helper to create material design token like path md.sys.typescale.
|
|
struct Typescale {
|
|
label-large: Label,
|
|
label-medium: Label,
|
|
body-large: Label,
|
|
body-small: Label,
|
|
title-small: Label,
|
|
}
|
|
|
|
// helper to create material design token like path md.sys.
|
|
struct Sys {
|
|
color: Color,
|
|
elevation: Elevation,
|
|
typescale: Typescale
|
|
}
|
|
|
|
// Material Desigin v3 style defintions.
|
|
export global md {
|
|
in-out property<bool> dark-color-scheme: ColorSchemeSelector.dark-color-scheme;
|
|
|
|
out property<Sys> sys: {
|
|
color: {
|
|
background: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
|
|
surface: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
|
|
surface-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F,
|
|
on-surface: !root.dark-color-scheme ? #1C1B1F : #E6E1E5,
|
|
on-surface-variant: !root.dark-color-scheme ? #49454E : #CAC4D0,
|
|
surface-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF,
|
|
primary: !root.dark-color-scheme ? #6750A4 : #D0BCFF,
|
|
primary-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4,
|
|
on-primary: !root.dark-color-scheme ? #FFFFFF : #371E73,
|
|
shadow: #000000,
|
|
outline: !root.dark-color-scheme ? #79747E : #938F99,
|
|
outline-variant: !root.dark-color-scheme ? #C4C7C5 : #444746,
|
|
secondary-container: !root.dark-color-scheme ? #E8DEF8 : #4A4458,
|
|
on-secondary-container: !root.dark-color-scheme ? #1E192B : #E8DEF8,
|
|
secondary-ripple: !root.dark-color-scheme ? #fffc : #000000,
|
|
},
|
|
|
|
elevation: {
|
|
level0: 0px,
|
|
level1: 1px,
|
|
level2: 2px
|
|
},
|
|
|
|
typescale: {
|
|
label-large: {
|
|
size: 14 * 0.0625rem,
|
|
weight: 500
|
|
},
|
|
label-medium: {
|
|
size: 12 * 0.0625rem,
|
|
weight: 500
|
|
},
|
|
body-large: {
|
|
size: 16 * 0.0625rem,
|
|
weight: 400
|
|
},
|
|
body-small: {
|
|
size: 12 * 0.0625rem,
|
|
weight: 400
|
|
},
|
|
title-small: {
|
|
size: 14 * 0.0625rem,
|
|
weight: 500
|
|
},
|
|
}
|
|
};
|
|
}
|