mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-21 07:41:51 +00:00
22143a04ff
This refactor is to help make future maintenance easier. Items are now consistently named as brush instead of color. Instead of one huge brush picker file, various elements such as gradients live in their own file. The brush picker is also made a bit less 'smart' and doesn't have to fully understand how the current color or brush needs to be updated or if the data tab live preview needs to be updated. In turn the PickerData has been made smarter and looks after these updates. This has fixed a few bug regarding gradient stops.
104 lines
5.2 KiB
Text
104 lines
5.2 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 { Palette } from "std-widgets.slint";
|
|
|
|
export global Icons {
|
|
out property <image> add: @image-url("../assets/add.svg");
|
|
out property <image> chevron-down: @image-url("../assets/chevron-down.svg");
|
|
out property <image> inspect: @image-url("../assets/inspect.svg");
|
|
out property <image> search: @image-url("../assets/search.svg");
|
|
out property <image> filter: @image-url("../assets/filter.svg");
|
|
out property <image> sidebar-left-off: @image-url("../assets/layout-sidebar-left-off.svg");
|
|
out property <image> sidebar-right-off: @image-url("../assets/layout-sidebar-right-off.svg");
|
|
out property <image> sidebar-left: @image-url("../assets/layout-sidebar-left.svg");
|
|
out property <image> sidebar-right: @image-url("../assets/layout-sidebar-right.svg");
|
|
out property <image> sync: @image-url("../assets/sync.svg");
|
|
out property <image> black-square: @image-url("../assets/black-square.png");
|
|
out property <image> checkerboard: @image-url("../assets/background.svg");
|
|
out property <image> checkerboard-mini: @image-url("../assets/background-mini.svg");
|
|
out property <image> checkerboard-tiny: @image-url("../assets/background-tiny.svg");
|
|
out property <image> close: @image-url("../assets/close.svg");
|
|
out property <image> plus: @image-url("../assets/plus.svg");
|
|
out property <image> minus: @image-url("../assets/minus.svg");
|
|
}
|
|
|
|
export struct TextStyle {
|
|
font-size: relative-font-size,
|
|
font-weight: int,
|
|
}
|
|
|
|
export global EditorFontSettings {
|
|
out property <int> light-font-weight: 100;
|
|
out property <int> regular-font-weight: 400;
|
|
out property <int> semibold-font-weight: 700;
|
|
out property <int> bold-font-weight: 900;
|
|
|
|
out property <TextStyle> header: { font-size: 18 * 0.0769rem, font-weight: root.semibold-font-weight };
|
|
|
|
out property <TextStyle> body: { font-size: 14 * 0.0769rem, font-weight: root.regular-font-weight };
|
|
out property <TextStyle> label: { font-size: 14 * 0.0769rem, font-weight: root.regular-font-weight };
|
|
out property <TextStyle> label-sub: { font-size: 14 * 0.0769rem, font-weight: root.light-font-weight };
|
|
|
|
out property <TextStyle> body-strong: { font-size: 16 * 0.0769rem, font-weight: root.bold-font-weight };
|
|
}
|
|
|
|
export global EditorSpaceSettings {
|
|
in property <length> default-padding: 8px;
|
|
in property <length> default-spacing: 8px;
|
|
in property <length> group-indent: 25px;
|
|
in property <length> property-spacing: 5px;
|
|
}
|
|
|
|
export global EditorSizeSettings {
|
|
in property <length> default-icon-width: 20px;
|
|
in property <length> eightbit-int-size: 40px;
|
|
in property <length> float-size: 100px;
|
|
in property <length> header-height: 32px;
|
|
in property <length> hex-size: 80px;
|
|
in property <length> item-height: 24px;
|
|
in property <length> length-combo: 70px;
|
|
in property <length> min-prefix-text-width: 120px;
|
|
in property <length> property-bar-width: 360px;
|
|
in property <length> radius: 5px;
|
|
in property <length> side-bar-width: 280px;
|
|
out property <length> standard-margin: 16px;
|
|
out property <length> small-margin: 12px;
|
|
out property <length> property-border-radius: 5px;
|
|
}
|
|
|
|
export global PickerStyles {
|
|
out property <length> picker-width: 240px;
|
|
out property <color> focused-color: #0c8ce9;
|
|
out property <color> focused-stop-color: Palette.color-scheme == ColorScheme.dark ? #4a5878 : #b5ccdd;
|
|
out property <color> slider-color: Palette.color-scheme == ColorScheme.dark ? EditorPalette.section-color : #b5ccdd;
|
|
}
|
|
|
|
export global EditorPalette {
|
|
|
|
property <bool> dark-color-scheme: Palette.color-scheme == ColorScheme.dark;
|
|
|
|
out property <brush> drop-mark-background: #00ff0080;
|
|
out property <brush> drop-mark-foreground: #00ff00ff;
|
|
|
|
out property <brush> general-element-selection-primary: #3884ed;
|
|
out property <brush> general-element-selection-secondary: #86b5fc;
|
|
out property <brush> general-element-selection-selected: Palette.accent-foreground;
|
|
out property <brush> interactive-element-selection-primary: #8fff79;
|
|
out property <brush> interactive-element-selection-secondary: #48dc2a;
|
|
out property <brush> layout-element-selection-primary: #FFC5FC;
|
|
out property <brush> layout-element-selection-secondary: #ff8af9;
|
|
out property <brush> shadow-gradient: @linear-gradient(0deg, Palette.foreground.transparentize(1), Palette.foreground.transparentize(0.75));
|
|
|
|
out property <brush> state-hovered: root.dark-color-scheme ? #ffffff.with-alpha(0.1) : #000000.with-alpha(0.1);
|
|
out property <brush> state-pressed: root.dark-color-scheme ? #ffffff.with-alpha(0.2) : #000000.with-alpha(0.2);
|
|
out property <color> text-color: Palette.color-scheme == ColorScheme.dark ? white : #383838;
|
|
out property <color> section-color: Palette.color-scheme == ColorScheme.dark ? #3f3f3f : #e6e6e6;
|
|
out property <color> divider-color: Palette.color-scheme == ColorScheme.dark ? #444444 : #e6e6e6;
|
|
}
|
|
|
|
export global EditorAnimationSettings {
|
|
out property <duration> resize-duration: 200ms;
|
|
out property <duration> color-duration: 200ms;
|
|
out property <duration> rotation-duration: 200ms;
|
|
}
|