diff --git a/frontend/assets/icon-16px-solid/transformation-rotate.svg b/frontend/assets/icon-16px-solid/transformation-rotate.svg index 3930d072..0ed8ff75 100644 --- a/frontend/assets/icon-16px-solid/transformation-rotate.svg +++ b/frontend/assets/icon-16px-solid/transformation-rotate.svg @@ -1,5 +1,4 @@ - diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte index 634ddda3..ba94e33e 100644 --- a/frontend/src/components/Editor.svelte +++ b/frontend/src/components/Editor.svelte @@ -235,11 +235,11 @@ .scrollable-y { overflow: hidden; - // Firefox (standardized in CSS, but less capable) scrollbar-width: thin; + // Not supported in Safari scrollbar-color: var(--color-5-dullgray) transparent; - // WebKit (only in Chromium/Safari but more capable) + // Safari (more capable, removed from recent versions of Chromium, possibly still supported in Safari but not tested) &::-webkit-scrollbar { width: calc(2px + 6px + 2px); height: calc(2px + 6px + 2px); diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index dc969cd2..d648e92a 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/frontend/src/components/panels/Document.svelte @@ -614,23 +614,24 @@ .tool-shelf { flex: 0 0 auto; justify-content: space-between; - // A precaution in case the variables above somehow fail - max-width: var(--columns-width-max); .tools { flex: 0 1 auto; + // Disabled because Firefox appears to have switched to using overlay scrollbars which float atop the content and don't affect the layout (as of FF 135 on Windows). + // We'll keep this here in case it's needed in the future. + // // Firefox-specific workaround for this bug causing the scrollbar to cover up the toolbar instead of widening to accommodate the scrollbar: // // // Remove this when the Firefox bug is fixed. - @-moz-document url-prefix() { - --available-height-plus-1: calc(var(--available-height) + 1px); - --3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--separator-height)); - --overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px)); - --firefox-scrollbar-width-space-occupied: 8; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows - padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns)); - } + // @-moz-document url-prefix() { + // --available-height-plus-1: calc(var(--available-height) + 1px); + // --3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--height-of-separator)); + // --overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px)); + // --firefox-scrollbar-width-space-occupied: 2; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows + // padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns)); + // } .widget-span { flex-wrap: wrap; diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte index cd76883f..cf918cbd 100644 --- a/frontend/src/components/widgets/buttons/TextButton.svelte +++ b/frontend/src/components/widgets/buttons/TextButton.svelte @@ -146,11 +146,12 @@ } &.flush { - background: none; + --button-background-color: none; + --button-text-color: var(--color-e-nearwhite); &:hover, &.open { - background: var(--color-5-dullgray); + --button-background-color: var(--color-5-dullgray); } } diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte index c27a0ab9..c976bf9c 100644 --- a/frontend/src/components/widgets/inputs/DropdownInput.svelte +++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte @@ -138,6 +138,7 @@ .dropdown-arrow { margin: 4px; + margin-right: 2px; flex: 0 0 auto; } diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte index e4542ac4..aa72b208 100644 --- a/frontend/src/components/widgets/inputs/FontInput.svelte +++ b/frontend/src/components/widgets/inputs/FontInput.svelte @@ -72,7 +72,7 @@ dispatch("fontFamily", newName); family = newName; - style = "Normal (400)"; + style = "Regular (400)"; } const fontFileUrl = await fonts.getFontFileUrl(family, style); diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte index ae26c20e..5d342742 100644 --- a/frontend/src/components/widgets/inputs/NumberInput.svelte +++ b/frontend/src/components/widgets/inputs/NumberInput.svelte @@ -739,10 +739,6 @@ // An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing outline: none; - &:hover { - background: var(--color-4-dimgray); - } - &.right { right: 0; padding-left: 7px; @@ -774,6 +770,18 @@ border-color: transparent var(--color-e-nearwhite) transparent transparent; } } + + &:hover { + background: var(--color-4-dimgray); + + &::before { + border-color: transparent transparent transparent var(--color-f-white); + } + + &::after { + border-color: transparent var(--color-f-white) transparent transparent; + } + } } } diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte index e81b2ba3..0c210b4d 100644 --- a/frontend/src/components/widgets/labels/Separator.svelte +++ b/frontend/src/components/widgets/labels/Separator.svelte @@ -25,7 +25,7 @@ } &.section { - // If changing this, update `--separator-height` in `Document.svelte` + // If changing this, update `--height-of-separator` in `Document.svelte` margin: 12px 0; width: 100%; diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts index 52328f0b..f6939d60 100644 --- a/frontend/src/state-providers/fonts.ts +++ b/frontend/src/state-providers/fonts.ts @@ -106,7 +106,7 @@ const weightNameMapping = new Map([ [100, "Thin"], [200, "Extra Light"], [300, "Light"], - [400, "Normal"], + [400, "Regular"], [500, "Medium"], [600, "Semi Bold"], [700, "Bold"], diff --git a/node-graph/gcore/src/consts.rs b/node-graph/gcore/src/consts.rs index 3ca96f7c..057f55bc 100644 --- a/node-graph/gcore/src/consts.rs +++ b/node-graph/gcore/src/consts.rs @@ -6,4 +6,4 @@ pub const LAYER_OUTLINE_STROKE_WEIGHT: f64 = 1.; // Fonts pub const DEFAULT_FONT_FAMILY: &str = "Cabin"; -pub const DEFAULT_FONT_STYLE: &str = "Normal (400)"; +pub const DEFAULT_FONT_STYLE: &str = "Regular (400)"; diff --git a/node-graph/gcore/src/text/font_cache.rs b/node-graph/gcore/src/text/font_cache.rs index 40d8f260..47088817 100644 --- a/node-graph/gcore/src/text/font_cache.rs +++ b/node-graph/gcore/src/text/font_cache.rs @@ -7,7 +7,7 @@ use std::collections::HashMap; pub struct Font { #[serde(rename = "fontFamily")] pub font_family: String, - #[serde(rename = "fontStyle")] + #[serde(rename = "fontStyle", deserialize_with = "migrate_font_style")] pub font_style: String, } impl Font { @@ -73,3 +73,9 @@ impl core::hash::Hash for FontCache { self.font_file_data.keys().for_each(|font| font.hash(state)); } } + +// TODO: Eventually remove this migration document upgrade code +fn migrate_font_style<'de, D: serde::Deserializer<'de>>(deserializer: D) -> Result { + use serde::Deserialize; + String::deserialize(deserializer).map(|name| if name == "Normal (400)" { "Regular (400)".to_string() } else { name }) +} diff --git a/website/content/volunteer/guide/student-projects/_index.md b/website/content/volunteer/guide/student-projects/_index.md index a3dcb5c7..25cb9cb7 100644 --- a/website/content/volunteer/guide/student-projects/_index.md +++ b/website/content/volunteer/guide/student-projects/_index.md @@ -191,6 +191,7 @@ In addition to the detailed projects above, here are some loose ideas that may b - [Node equivalence rewriting](https://github.com/GraphiteEditor/Graphite/issues/2021) - Snapping system overhaul - Advanced vector editing tool modes (segment editing, mesh vector, and more) +- Meticulous tooling polishing and gizmo additions ## Successful past projects