mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 04:45:13 +00:00
cecdb330f8
This is consistent with the use of `px` for the sizes and matches the expected conversion to css pixels.
106 lines
2.9 KiB
Text
106 lines
2.9 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,
|
|
on-surface: color,
|
|
on-surface-variant: color,
|
|
primary: color,
|
|
on-primary: color,
|
|
shadow: color,
|
|
outline: color,
|
|
outline-variant: color,
|
|
secondary-container: color,
|
|
on-secondary-container: color,
|
|
}
|
|
|
|
// typo settings
|
|
struct Label := {
|
|
font: string,
|
|
size: length,
|
|
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 := {
|
|
property<bool> dark-color-scheme: ColorSchemeSelector.dark-color-scheme;
|
|
|
|
property<Sys> sys: {
|
|
color: {
|
|
background: !dark-color-scheme ? #FFFBFE : #1C1B1F,
|
|
surface: !dark-color-scheme ? #FFFBFE : #1C1B1F,
|
|
on-surface: !dark-color-scheme ? #1C1B1F : #E6E1E5,
|
|
on-surface-variant: !dark-color-scheme ? #49454E : #CAC4D0,
|
|
surface-tint: !dark-color-scheme ? #6750A4 : #D0BCFF,
|
|
primary: !dark-color-scheme ? #6750A4 : #D0BCFF,
|
|
on-primary: !dark-color-scheme ? #FFFFFF : #371E73,
|
|
shadow: #000000,
|
|
outline: !dark-color-scheme ? #79747E : #938F99,
|
|
outline-variant: !dark-color-scheme ? #C4C7C5 : #444746,
|
|
secondary-container: !dark-color-scheme ? #E8DEF8 : #4A4458,
|
|
on-secondary-container: !dark-color-scheme ? #1E192B : #E8DEF8,
|
|
},
|
|
|
|
elevation: {
|
|
level0: 0px,
|
|
level1: 1px,
|
|
level2: 2px
|
|
},
|
|
|
|
typescale: {
|
|
label-large: {
|
|
font: "Roboto Medium",
|
|
size: 14px,
|
|
weight: 500
|
|
},
|
|
label-medium: {
|
|
font: "Roboto Medium",
|
|
size: 12px,
|
|
weight: 500
|
|
},
|
|
body-large: {
|
|
font: "Roboto Medium",
|
|
size: 14px,
|
|
weight: 400
|
|
},
|
|
body-small: {
|
|
font: "Roboto Regular",
|
|
size: 12px,
|
|
weight: 400
|
|
},
|
|
title-small: {
|
|
font: "Roboto Medium",
|
|
size: 14px,
|
|
weight: 500
|
|
},
|
|
}
|
|
};
|
|
}
|