mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-06 19:58:53 +00:00
87 lines
4.1 KiB
Text
87 lines
4.1 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
import { ColorSchemeSelector } from "color-scheme.slint";
|
|
|
|
export struct TextStyle {
|
|
font-size: relative-font-size,
|
|
font-weight: int,
|
|
}
|
|
|
|
export global CosmicFontSettings {
|
|
out property <int> light-font-weight: 300;
|
|
out property <int> regular-font-weight: 400;
|
|
out property <int> semibold-font-weight: 600;
|
|
out property <TextStyle> body: {
|
|
font-size: 14 * 0.0769rem,
|
|
font-weight: regular-font-weight
|
|
};
|
|
out property <TextStyle> body-strong: {
|
|
font-size: 14 * 0.0769rem,
|
|
font-weight: semibold-font-weight
|
|
};
|
|
out property <TextStyle> title: {
|
|
font-size: 24 * 0.0769rem,
|
|
font-weight: light-font-weight
|
|
};
|
|
}
|
|
|
|
export global CosmicPalette {
|
|
in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
|
|
property <bool> dark-color-scheme: {
|
|
if (color-scheme == ColorScheme.unknown) {
|
|
return SlintInternal.color-scheme == ColorScheme.dark;
|
|
}
|
|
return color-scheme == ColorScheme.dark;
|
|
}
|
|
|
|
// base palette
|
|
out property <brush> background: dark-color-scheme ? #1B1B1B : #D7D7D7;
|
|
out property <brush> foreground: dark-color-scheme ? #C4C4C4 : #292929;
|
|
out property <brush> alternate-background: dark-color-scheme ? #2E2E2E : #F2F2F2;
|
|
out property <brush> alternate-foreground: dark-color-scheme ? #DEDEDE : #000000E6;
|
|
out property <brush> control-background: dark-color-scheme ? #262626 : #C7C7C7;
|
|
out property <brush> control-foreground: dark-color-scheme ? #C4C4C4 : #3D3D3D;
|
|
out property <brush> accent-background: dark-color-scheme ? #63D0DF : #00525A;
|
|
out property <brush> accent-foreground: dark-color-scheme ? #161616 : #FFFFFF;
|
|
out property <brush> selection-background: dark-color-scheme ? #63D0DF : #00525A;
|
|
out property <brush> selection-foreground: dark-color-scheme ? #161616 : #FFFFFF;
|
|
out property <brush> border: dark-color-scheme ? #C4C4C433 : #29292933;
|
|
|
|
// additional cosmic palette
|
|
out property <brush> state-hover: #63636333;
|
|
out property <brush> state-pressed: dark-color-scheme ? #16161680 : #BEBEBE80;
|
|
out property <brush> state-selected: dark-color-scheme ? #4D4D4D4D : #98989833;
|
|
out property <brush> state-focus: dark-color-scheme ? #63D0DF : #00525A;
|
|
out property <brush> alternate-border: dark-color-scheme ? #BEBEBE : #161616;
|
|
out property <brush> control-divider: dark-color-scheme ? #DEDEDE33 : #3D3D3D33;
|
|
out property <brush> shadow: dark-color-scheme ? #00000052 : #00000014;
|
|
out property <brush> accent-text: dark-color-scheme ? #63D0DF : #00525A;
|
|
out property <brush> placeholder-foreground: dark-color-scheme ? #959595 : #585858;
|
|
out property <brush> neutral-5-background: #636363;
|
|
out property <brush> neutral-6-background: dark-color-scheme ? #808080 :#484848;
|
|
|
|
out property <brush> control-disabled: dark-color-scheme ? #212121 :#cfcfcf;
|
|
out property <brush> text-disabled: dark-color-scheme ? #707070 :#808080;
|
|
out property <brush> secondary-accent-background: dark-color-scheme ? #51a3ae : #367378;
|
|
|
|
out property <brush> state: dark-color-scheme ? #ffffff : #000000;
|
|
out property <brush> state-secondary: dark-color-scheme ? #000000 : #ffffff;
|
|
}
|
|
|
|
export global Icons {
|
|
out property <image> arrow-down: @image-url("_arrow_down.svg");
|
|
out property <image> arrow-up: @image-url("_arrow_up.svg");
|
|
out property <image> check-mark: @image-url("_check-mark.svg");
|
|
out property <image> dropdown: @image-url("_pane_down.svg");
|
|
out property <image> keyboard: @image-url("_keyboard.svg");
|
|
out property <image> clock: @image-url("_clock.svg");
|
|
out property <image> arrow-back: @image-url("_arrow_back.svg");
|
|
out property <image> arrow-forward: @image-url("_arrow_forward.svg");
|
|
out property <image> edit: @image-url("_edit.svg");
|
|
out property <image> calendar: @image-url("_calendar.svg");
|
|
}
|
|
|
|
export global CosmicSizeSettings {
|
|
out property <length> item-height: 40px;
|
|
}
|