From b42580d8cc13ef373f83239cd8f4f4edb653c40c Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Thu, 12 Jun 2025 20:42:21 +0200 Subject: [PATCH] Fix Sass deprecations (#1080) * Fix building with Jekyll on Ruby 3.4 Ruby 3.4 removed several standard library packages, so they have to be installed as gems instead. This also updates Jekyll to use a version that's supported in Ruby 3.4. The minimum required Ruby version is now 3.2. * Fix Sass deprecations This allows the website to build on Ruby 3.4.0 + Jekyll 4.4.1. More information: - https://sass-lang.com/blog/import-is-deprecated/ --- _sass/common/_colors.scss | 70 ++++---- _sass/common/_release.scss | 71 ++++---- assets/css/main.scss | 6 +- assets/css/priorities/base.scss | 46 ++--- assets/css/release.scss | 2 +- assets/css/releases/4.3.scss | 257 ++++++++++++++-------------- assets/css/releases/4.4.scss | 289 ++++++++++++++++---------------- 7 files changed, 377 insertions(+), 364 deletions(-) diff --git a/_sass/common/_colors.scss b/_sass/common/_colors.scss index 71649ebbf8..7c258226e5 100644 --- a/_sass/common/_colors.scss +++ b/_sass/common/_colors.scss @@ -1,36 +1,36 @@ -$color-godot-blue: #478CBF; +$godot-blue: #478CBF; -$color-code-symbol--light: #00009c; -$color-code-symbol--dark: #ABC9FF; -$color-code-keyword--light: #e62282; -$color-code-keyword--dark: #FF7085; -$color-code-controlflow--light: #bd1fcc; -$color-code-controlflow--dark: #FF8CCC; -$color-code-basetype--light: #009933; -$color-code-basetype--dark: #42FFC2; -$color-code-enginetype--light: #1c8c66; -$color-code-enginetype--dark: #8FFFDB; -$color-code-usertype--light: #2e7366; -$color-code-usertype--dark: #C7FFED; -$color-code-string--light: #996b00; -$color-code-string--dark: #FFEDA1; -$color-code-background--light: #ffffff; -$color-code-background--dark: #1D2229; -$color-code-text--light: #393939; -$color-code-text--dark: #CDCFD2; -$color-code-function--light: #0039e6; -$color-code-function--dark: #57B3FF; -$color-code-membervariable--light: #0066ad; -$color-code-membervariable--dark: #BCE0FF; -$color-code-gdscript-function--light: #009999; -$color-code-gdscript-function--dark: #66E6FF; -$color-code-gdscript-globalfunction--light: #5c2eb8; -$color-code-gdscript-globalfunction--dark: #A3A3F5; -$color-code-gdscript-nodepath--light: #2e8c00; -$color-code-gdscript-nodepath--dark: #B8C47D; -$color-code-gdscript-nodereference--light: #008000; -$color-code-gdscript-nodereference--dark: #63C259; -$color-code-gdscript-annotation--light: #cc5e00; -$color-code-gdscript-annotation--dark: #FFB373; -$color-code-gdscript-stringname--light: #cc8f73; -$color-code-gdscript-stringname--dark: #FFC2A6; +$code-symbol--light: #00009c; +$code-symbol--dark: #ABC9FF; +$code-keyword--light: #e62282; +$code-keyword--dark: #FF7085; +$code-controlflow--light: #bd1fcc; +$code-controlflow--dark: #FF8CCC; +$code-basetype--light: #009933; +$code-basetype--dark: #42FFC2; +$code-enginetype--light: #1c8c66; +$code-enginetype--dark: #8FFFDB; +$code-usertype--light: #2e7366; +$code-usertype--dark: #C7FFED; +$code-string--light: #996b00; +$code-string--dark: #FFEDA1; +$code-background--light: #ffffff; +$code-background--dark: #1D2229; +$code-text--light: #393939; +$code-text--dark: #CDCFD2; +$code-function--light: #0039e6; +$code-function--dark: #57B3FF; +$code-membervariable--light: #0066ad; +$code-membervariable--dark: #BCE0FF; +$code-gdscript-function--light: #009999; +$code-gdscript-function--dark: #66E6FF; +$code-gdscript-globalfunction--light: #5c2eb8; +$code-gdscript-globalfunction--dark: #A3A3F5; +$code-gdscript-nodepath--light: #2e8c00; +$code-gdscript-nodepath--dark: #B8C47D; +$code-gdscript-nodereference--light: #008000; +$code-gdscript-nodereference--dark: #63C259; +$code-gdscript-annotation--light: #cc5e00; +$code-gdscript-annotation--dark: #FFB373; +$code-gdscript-stringname--light: #cc8f73; +$code-gdscript-stringname--dark: #FFC2A6; diff --git a/_sass/common/_release.scss b/_sass/common/_release.scss index 86c37cec1f..8f29bfa863 100644 --- a/_sass/common/_release.scss +++ b/_sass/common/_release.scss @@ -1,8 +1,11 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; // // Functions // @function offset-hue($color, $offset, $i: 1) { - @return adjust-hue($color, $offset * $i); + @return color.adjust($color, $hue: $offset * $i); } /** @@ -10,49 +13,49 @@ * it will return a map of sections with the $base-category being assigned with * a specific $base-color, and will $offset each section by n degrees. */ -@function r-generate-sections($sections, $base-category, $base-color, $offset) { +@function generate-sections($sections, $base-category, $base-color, $offset) { $return-value: (); - $base-category-i: index($sections, $base-category); + $base-category-i: list.index($sections, $base-category); @each $section in $sections { - $i: index($sections, $section); + $i: list.index($sections, $section); $diff: $i - $base-category-i; $base-color-top: offset-hue($base-color, $offset, $diff); - $base-color-bottom: adjust-color( + $base-color-bottom: color.adjust( offset-hue($base-color, $offset, $diff + 1), - $lightness: -10 + $lightness: -10% ); - $color-top: adjust-color($base-color-top, $saturation: -10); - $color-bottom: adjust-color($base-color-bottom, $saturation: -10); - $color-top-muted: adjust-color($base-color-top, $saturation: -25); - $color-bottom-muted: adjust-color($base-color-bottom, $saturation: -25); - $color-selection: adjust-color($base-color-bottom, $saturation: -30); - $color-selection--light: adjust-color( + $color-top: color.adjust($base-color-top, $saturation: -10%); + $color-bottom: color.adjust($base-color-bottom, $saturation: -10%); + $color-top-muted: color.adjust($base-color-top, $saturation: -25%); + $color-bottom-muted: color.adjust($base-color-bottom, $saturation: -25%); + $color-selection: color.adjust($base-color-bottom, $saturation: -30%); + $color-selection--light: color.adjust( $base-color-bottom, - $lightness: 40, - $saturation: 30 + $lightness: 40%, + $saturation: 30% ); - $color-invert: adjust-color( + $color-invert: color.adjust( $base-color-top, - $hue: 180, - $lightness: 0, - $saturation: 30 + $hue: 180deg, + $lightness: 0%, + $saturation: 30% ); - $color-highlight: adjust-color( + $color-highlight: color.adjust( $base-color-top, - $lightness: 0, - $saturation: 30 + $lightness: 0%, + $saturation: 30% ); - $color-highlight--dark: adjust-color( + $color-highlight--dark: color.adjust( $base-color-top, - $lightness: 30, - $saturation: 30 + $lightness: 30%, + $saturation: 30% ); - $color-invert-highlight: adjust-color( + $color-invert-highlight: color.adjust( $color-invert, - $lightness: 20, - $saturation: 30 + $lightness: 20%, + $saturation: 30% ); - $return-value: map-merge( + $return-value: map.merge( $return-value, ( #{$section}: ( @@ -73,16 +76,16 @@ @return $return-value; } -@function r-desktop-mobile($sizes...) { - @return ("desktop": nth($sizes, 1), "mobile": nth($sizes, 2)); +@function desktop-mobile($sizes...) { + @return ("desktop": list.nth($sizes, 1), "mobile": list.nth($sizes, 2)); } -@function r-get-desktop($value) { - @return map-get($value, "desktop"); +@function get-desktop($value) { + @return map.get($value, "desktop"); } -@function r-get-mobile($value) { - @return map-get($value, "mobile"); +@function get-mobile($value) { + @return map.get($value, "mobile"); } // diff --git a/assets/css/main.scss b/assets/css/main.scss index 6cd66df02a..07355969a5 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,6 +1,8 @@ --- --- +@use "footer"; + :root { color-scheme: light dark; @@ -176,7 +178,7 @@ opacity: 0.85; } - + .dark-invert { filter: invert(100%); @@ -1319,5 +1321,3 @@ section.sponsors .grid { border-top: 1px solid var(--table-divider-color); margin-top: 4rem; } - -@import 'footer'; diff --git a/assets/css/priorities/base.scss b/assets/css/priorities/base.scss index aef7ce9d57..2f2b8526b9 100644 --- a/assets/css/priorities/base.scss +++ b/assets/css/priorities/base.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; +@use "sass:selector"; --- --- // Fixes the parsing of the unusual front matter / SCSS file. @@ -14,7 +18,7 @@ ul { // // Imports // -@import "./details.css"; +@use "./details.css"; // // Variables @@ -40,15 +44,15 @@ $color-text-light: #4a5365; $color-text-dark: rgba(255, 255, 255, 0.9); $color-element-background-light: - adjust-color(#d5daea, $lightness: +7.5%); -$color-element-background-dark: adjust-color(#202325, $lightness: +2.5%); + color.adjust(#d5daea, $lightness: +7.5%); +$color-element-background-dark: color.adjust(#202325, $lightness: +2.5%); @function create-outline-rule($outline-color) { @return 0.125rem solid $outline-color; } $outline-color: #4080ff; $outline: create-outline-rule($outline-color: $outline-color); -$outline-inverted: create-outline-rule($outline-color: adjust-color($color: invert($outline-color), $lightness: +10%)); +$outline-inverted: create-outline-rule($outline-color: color.adjust($color: color.invert($outline-color), $lightness: +10%)); $detail-color: ( note: (rgb(26, 127, 55), rgb(45, 175, 71)), @@ -171,7 +175,7 @@ $detail-color: ( > .priorities-intro { @mixin set-background($color, $url) { - $color-with-alpha: change-color($color, $alpha: 0.866667); + $color-with-alpha: color.change($color, $alpha: 0.866667); background: linear-gradient(to right, $color-with-alpha, $color-with-alpha), linear-gradient(to bottom, rgba(0,0,0,0) 25%, $color 100%), @@ -219,7 +223,7 @@ $detail-color: ( color: $color-red; } - @at-root #{selector-replace(&, ".banner-last-updated", ".banner-last-updated.recent")} { + @at-root #{selector.replace(&, ".banner-last-updated", ".banner-last-updated.recent")} { .last-updated { display: none; } @@ -399,7 +403,7 @@ $detail-color: ( display: none; } - @at-root #{selector-replace(&, ".navigation-list-details", ".navigation-list-details[open]")} { + @at-root #{selector.replace(&, ".navigation-list-details", ".navigation-list-details[open]")} { .more { display: none; } @@ -462,12 +466,12 @@ $detail-color: ( } // .category.level-1 - @at-root #{selector-replace(&, ".category", ".category.level-1")} { + @at-root #{selector.replace(&, ".category", ".category.level-1")} { font-size: 3rem; background-color: $color-category-level-1; } // .category.level-2 - @at-root #{selector-replace(&, ".category", ".category.level-2")} { + @at-root #{selector.replace(&, ".category", ".category.level-2")} { font-size: 2.125rem; background-color: $color-category-level-2-light; @include is-dark() { @@ -499,11 +503,11 @@ $detail-color: ( color: white; .anchor-icon { - @at-root #{selector-replace(&, ".category-summary", ".category-summary:hover")} { + @at-root #{selector.replace(&, ".category-summary", ".category-summary:hover")} { opacity: 0.6; } - @at-root #{selector-replace(&, ".category-anchor", ".category-anchor:focus")} { + @at-root #{selector.replace(&, ".category-anchor", ".category-anchor:focus")} { opacity: 0.6; } } @@ -522,7 +526,7 @@ $detail-color: ( position: relative; margin-bottom: 0; - @at-root #{selector-replace(&, ".category-summary", ".category-summary:focus")} { + @at-root #{selector.replace(&, ".category-summary", ".category-summary:focus")} { outline: $outline-inverted; } @@ -556,7 +560,7 @@ $detail-color: ( .less { display: none; } - @at-root #{selector-replace(&, ".category-details", ".category-details[open]")} { + @at-root #{selector.replace(&, ".category-details", ".category-details[open]")} { .more { display: none; } @@ -681,7 +685,7 @@ $detail-color: ( @include anchor-icon($icon-color: $color-text-dark); } - @at-root #{selector-replace(&, ".element-title", ".element-title:hover")}, + @at-root #{selector.replace(&, ".element-title", ".element-title:hover")}, &:focus { .anchor-icon { opacity: 0.6; @@ -701,7 +705,7 @@ $detail-color: ( @include remove-markdown-margins(); - @at-root #{selector-replace(&, ".element-title", ".element-title:focus")} { + @at-root #{selector.replace(&, ".element-title", ".element-title:focus")} { outline: $outline; } } @@ -723,7 +727,7 @@ $detail-color: ( display: block; } - @at-root #{selector-replace(&, ".element-main", ".element-main[open]")} { + @at-root #{selector.replace(&, ".element-main", ".element-main[open]")} { .less { display: block; } @@ -760,7 +764,7 @@ $detail-color: ( .detail-block { @mixin parent-is-type($current-selector, $type) { - @at-root #{selector-replace($current-selector, ".detail-block", ".detail-block.#{$type}")} { + @at-root #{selector.replace($current-selector, ".detail-block", ".detail-block.#{$type}")} { @content; } } @@ -806,9 +810,9 @@ $detail-color: ( // Detail types. @each $type in ("note", "warning", "links", "trackers", "prs", "issues", "proposals") { &.#{$type} { - --detail-color: #{nth(map-get($detail-color, $type), 1)}; + --detail-color: #{list.nth(map.get($detail-color, $type), 1)}; @include is-dark() { - --detail-color: #{nth(map-get($detail-color, $type), 2)}; + --detail-color: #{list.nth(map.get($detail-color, $type), 2)}; } } } @@ -854,9 +858,9 @@ $detail-color: ( font-size: 0.75rem; font-style: italic; - color: adjust-color($color-text-light, $alpha: -0.33); + color: color.adjust($color-text-light, $alpha: -0.33); @include is-dark() { - color: adjust-color($color-text-dark, $alpha: -0.33); + color: color.adjust($color-text-dark, $alpha: -0.33); } .element-edit-title { diff --git a/assets/css/release.scss b/assets/css/release.scss index 78c50c6100..535717f13e 100644 --- a/assets/css/release.scss +++ b/assets/css/release.scss @@ -1,6 +1,6 @@ --- --- -@import "common/release"; +@use "common/release"; html { scroll-behavior: smooth; diff --git a/assets/css/releases/4.3.scss b/assets/css/releases/4.3.scss index 8a10469327..e9e26ae234 100644 --- a/assets/css/releases/4.3.scss +++ b/assets/css/releases/4.3.scss @@ -1,8 +1,9 @@ --- --- -@import "common/colors"; -@import "common/release"; +@use "sass:map"; +@use "common/colors"; +@use "common/release"; $column-max-width: 400px; $column-min-width: 300px; @@ -46,7 +47,7 @@ $header-gap-bottom: 80px; $header-content-color: white; $header-numbers-gap: 20px; $header-bar-height: 20px; -$header-bar-commits-color: $color-godot-blue; +$header-bar-commits-color: colors.$godot-blue; $header-bar-commits-color-inactive: #487491; $header-bar-contributors-color: #F47E7A; $header-bar-contributors-color-inactive: #A66160; @@ -54,21 +55,21 @@ $header-bar-gap: 10px; $header-version-font-weight: 800; $release-background-end: #BCBCBC; -$release-title-font-size: r-desktop-mobile(35px, 25px); -$release-section-margin-top: r-desktop-mobile(80px, 40px); -$release-section-margin-bottom: r-desktop-mobile(40px, 20px); +$release-title-font-size: release.desktop-mobile(35px, 25px); +$release-section-margin-top: release.desktop-mobile(80px, 40px); +$release-section-margin-bottom: release.desktop-mobile(40px, 20px); -$card-padding: r-desktop-mobile(17px, 15px); -$card-title-font-size: r-desktop-mobile(20px, 18px); -$card-content-font-size-clamp-min: r-desktop-mobile(14px, 0.8em); -$card-content-font-size-clamp-val: r-desktop-mobile(7cqw, 4cqw); -$card-content-font-size-clamp-max: r-desktop-mobile(16px, 1em); +$card-padding: release.desktop-mobile(17px, 15px); +$card-title-font-size: release.desktop-mobile(20px, 18px); +$card-content-font-size-clamp-min: release.desktop-mobile(14px, 0.8em); +$card-content-font-size-clamp-val: release.desktop-mobile(7cqw, 4cqw); +$card-content-font-size-clamp-max: release.desktop-mobile(16px, 1em); -$download-gap: r-desktop-mobile(8px, 4px); -$download-font-size: r-desktop-mobile(18px, 12px); +$download-gap: release.desktop-mobile(8px, 4px); +$download-font-size: release.desktop-mobile(18px, 12px); $section-hue-offset: 10; -$sections: r-generate-sections( +$sections: release.generate-sections( $sections: ( "download", "foundation", @@ -89,7 +90,7 @@ $sections: r-generate-sections( "special-thanks" ), $base-category: "foundation", - $base-color: $color-godot-blue, + $base-color: colors.$godot-blue, $offset: $section-hue-offset ); @@ -119,9 +120,9 @@ $donate-robot-size: 500px; z-index: 1; pointer-events: none; - --card-padding: #{r-get-desktop($card-padding)}; + --card-padding: #{release.get-desktop($card-padding)}; @include is-mobile() { - --card-padding: #{r-get-mobile($card-padding)}; + --card-padding: #{release.get-mobile($card-padding)}; } .link { @@ -160,20 +161,20 @@ $donate-robot-size: 500px; #foundation-donate { background-color: #EFF1F5; - @include is-dark() { + @include release.is-dark() { background-color: #283a5b; } .robot-1, .robot-2 { color: #CFD5E0; - @include is-dark() { - color: #233452; - } - font-size: $donate-robot-size; position: absolute; z-index: -1; + + @include release.is-dark() { + color: #233452; + } } .robot-1 { @@ -315,8 +316,8 @@ $donate-robot-size: 500px; @each $section-name, $section-colors in $sections { &.link-#{$section-name} { - --color-top: #{map-get($section-colors, "color-top")}; - --color-bottom: #{map-get($section-colors, "color-bottom")}; + --color-top: #{map.get($section-colors, "color-top")}; + --color-bottom: #{map.get($section-colors, "color-bottom")}; background: linear-gradient( to bottom, var(--color-top), @@ -384,7 +385,7 @@ $donate-robot-size: 500px; text-decoration: none; text-decoration-color: black; - @include is-dark() { + @include release.is-dark() { color: white; text-decoration-color: white; } @@ -435,102 +436,102 @@ $donate-robot-size: 500px; height: 100%; background-color: #25282b; - @include is-light() { - background-color: #cecece; + /** + * Responsive sizes. + */ + --release-title-font-size: #{release.get-desktop($release-title-font-size)}; + --release-section-margin-top: #{release.get-desktop($release-section-margin-top)}; + --release-section-margin-bottom: #{release.get-desktop($release-section-margin-bottom)}; + + --card-padding: #{release.get-desktop($card-padding)}; + --card-title-font-size: #{release.get-desktop($card-title-font-size)}; + --card-content-font-size-clamp-min: #{release.get-desktop($card-content-font-size-clamp-min)}; + --card-content-font-size-clamp-val: #{release.get-desktop($card-content-font-size-clamp-val)}; + --card-content-font-size-clamp-max: #{release.get-desktop($card-content-font-size-clamp-max)}; + + --download-gap: #{release.get-desktop($download-gap)}; + --download-font-size: #{release.get-desktop($download-font-size)}; + + /** Color **/ + --card-background-color: white; + --card-color: #2d2d2d; + --color-code-symbol: #{colors.$code-symbol--light}; + --color-code-keyword: #{colors.$code-keyword--light}; + --color-code-controlflow: #{colors.$code-controlflow--light}; + --color-code-basetype: #{colors.$code-basetype--light}; + --color-code-enginetype: #{colors.$code-enginetype--light}; + --color-code-usertype: #{colors.$code-usertype--light}; + --color-code-string: #{colors.$code-string--light}; + --color-code-background: #{colors.$code-background--light}; + --color-code-text: #{colors.$code-text--light}; + --color-code-function: #{colors.$code-function--light}; + --color-code-membervariable: #{colors.$code-membervariable--light}; + --color-code-gdscript-function: #{colors.$code-gdscript-function--light}; + --color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--light}; + --color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--light}; + --color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--light}; + --color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--light}; + --color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--light}; + @include release.is-dark() { + --card-background-color: #333639; + --card-color: white; + --color-code-symbol: #{colors.$code-symbol--dark}; + --color-code-keyword: #{colors.$code-keyword--dark}; + --color-code-controlflow: #{colors.$code-controlflow--dark}; + --color-code-basetype: #{colors.$code-basetype--dark}; + --color-code-enginetype: #{colors.$code-enginetype--dark}; + --color-code-usertype: #{colors.$code-usertype--dark}; + --color-code-string: #{colors.$code-string--dark}; + --color-code-background: #{colors.$code-background--dark}; + --color-code-text: #{colors.$code-text--dark}; + --color-code-function: #{colors.$code-function--dark}; + --color-code-membervariable: #{colors.$code-membervariable--dark}; + --color-code-gdscript-function: #{colors.$code-gdscript-function--dark}; + --color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--dark}; + --color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--dark}; + --color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--dark}; + --color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--dark}; + --color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--dark}; } a { text-decoration-thickness: 1px; } - /** - * Responsive sizes. - */ - --release-title-font-size: #{r-get-desktop($release-title-font-size)}; - --release-section-margin-top: #{r-get-desktop($release-section-margin-top)}; - --release-section-margin-bottom: #{r-get-desktop($release-section-margin-bottom)}; - - --card-padding: #{r-get-desktop($card-padding)}; - --card-title-font-size: #{r-get-desktop($card-title-font-size)}; - --card-content-font-size-clamp-min: #{r-get-desktop($card-content-font-size-clamp-min)}; - --card-content-font-size-clamp-val: #{r-get-desktop($card-content-font-size-clamp-val)}; - --card-content-font-size-clamp-max: #{r-get-desktop($card-content-font-size-clamp-max)}; - - --download-gap: #{r-get-desktop($download-gap)}; - --download-font-size: #{r-get-desktop($download-font-size)}; - - @include is-mobile() { - --release-title-font-size: #{r-get-mobile($release-title-font-size)}; - --release-section-margin-top: #{r-get-mobile($release-section-margin-top)}; - --release-section-margin-bottom: #{r-get-mobile($release-section-margin-bottom)}; - - --card-padding: #{r-get-mobile($card-padding)}; - --card-title-font-size: #{r-get-mobile($card-title-font-size)}; - --card-content-font-size-clamp-min: #{r-get-mobile($card-content-font-size-clamp-min)}; - --card-content-font-size-clamp-val: #{r-get-mobile($card-content-font-size-clamp-val)}; - --card-content-font-size-clamp-max: #{r-get-mobile($card-content-font-size-clamp-max)}; - - --download-gap: #{r-get-mobile($download-gap)}; - --download-font-size: #{r-get-mobile($download-font-size)}; + @include release.is-light() { + background-color: #cecece; } - /** Color **/ - --card-background-color: white; - --card-color: #2d2d2d; - --color-code-symbol: #{$color-code-symbol--light}; - --color-code-keyword: #{$color-code-keyword--light}; - --color-code-controlflow: #{$color-code-controlflow--light}; - --color-code-basetype: #{$color-code-basetype--light}; - --color-code-enginetype: #{$color-code-enginetype--light}; - --color-code-usertype: #{$color-code-usertype--light}; - --color-code-string: #{$color-code-string--light}; - --color-code-background: #{$color-code-background--light}; - --color-code-text: #{$color-code-text--light}; - --color-code-function: #{$color-code-function--light}; - --color-code-membervariable: #{$color-code-membervariable--light}; - --color-code-gdscript-function: #{$color-code-gdscript-function--light}; - --color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--light}; - --color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--light}; - --color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--light}; - --color-code-gdscript-annotation: #{$color-code-gdscript-annotation--light}; - --color-code-gdscript-stringname: #{$color-code-gdscript-stringname--light}; - @include is-dark() { - --card-background-color: #333639; - --card-color: white; - --color-code-symbol: #{$color-code-symbol--dark}; - --color-code-keyword: #{$color-code-keyword--dark}; - --color-code-controlflow: #{$color-code-controlflow--dark}; - --color-code-basetype: #{$color-code-basetype--dark}; - --color-code-enginetype: #{$color-code-enginetype--dark}; - --color-code-usertype: #{$color-code-usertype--dark}; - --color-code-string: #{$color-code-string--dark}; - --color-code-background: #{$color-code-background--dark}; - --color-code-text: #{$color-code-text--dark}; - --color-code-function: #{$color-code-function--dark}; - --color-code-membervariable: #{$color-code-membervariable--dark}; - --color-code-gdscript-function: #{$color-code-gdscript-function--dark}; - --color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--dark}; - --color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--dark}; - --color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--dark}; - --color-code-gdscript-annotation: #{$color-code-gdscript-annotation--dark}; - --color-code-gdscript-stringname: #{$color-code-gdscript-stringname--dark}; + @include is-mobile() { + --release-title-font-size: #{release.get-mobile($release-title-font-size)}; + --release-section-margin-top: #{release.get-mobile($release-section-margin-top)}; + --release-section-margin-bottom: #{release.get-mobile($release-section-margin-bottom)}; + + --card-padding: #{release.get-mobile($card-padding)}; + --card-title-font-size: #{release.get-mobile($card-title-font-size)}; + --card-content-font-size-clamp-min: #{release.get-mobile($card-content-font-size-clamp-min)}; + --card-content-font-size-clamp-val: #{release.get-mobile($card-content-font-size-clamp-val)}; + --card-content-font-size-clamp-max: #{release.get-mobile($card-content-font-size-clamp-max)}; + + --download-gap: #{release.get-mobile($download-gap)}; + --download-font-size: #{release.get-mobile($download-font-size)}; } code.highlight { $_padding: 5px; - background-color: color-mix(in srgb, var(--color-code-background), transparent 15%); - @include is-dark() { - background-color: color-mix(in srgb, var(--color-code-background), transparent 50%); - } - display: inline-block; - padding: 0 ($_padding / 2); + padding: 0 calc($_padding / 2); margin: 0 0; border-radius: $_padding; color: var(--color-code-text); + background-color: color-mix(in srgb, var(--color-code-background), transparent 15%); + @include release.is-dark() { + background-color: color-mix(in srgb, var(--color-code-background), transparent 50%); + } + .symbol { color: var(--color-code-symbol); } @@ -575,7 +576,7 @@ $donate-robot-size: 500px; background-repeat: $header-background-repeat; background-color: #121315; - @include is-light() { + @include release.is-light() { background-color: #25282B; } @@ -644,7 +645,7 @@ $donate-robot-size: 500px; .bar { display: inline-block; height: $header-bar-height; - background-color: var(--bar-color, #{$color-godot-blue}); + background-color: var(--bar-color, #{colors.$godot-blue}); transform: translateY(2px); margin-right: $header-bar-gap; } @@ -1097,12 +1098,13 @@ $donate-robot-size: 500px; a { color: var(--color-top); - @include is-dark() { + text-decoration: none; + + @include release.is-dark() { color: white; text-decoration-color: white; } - text-decoration: none; &:hover { text-decoration: underline; } @@ -1160,7 +1162,7 @@ $donate-robot-size: 500px; text-decoration-color: black; text-decoration: underline; - @include is-dark() { + @include release.is-dark() { color: white; text-decoration-color: white; } @@ -1173,7 +1175,7 @@ $donate-robot-size: 500px; border: 0; color: black; - @include is-dark() { + @include release.is-dark() { color: white; } @@ -1189,10 +1191,6 @@ $donate-robot-size: 500px; .c-link-popover { color: white; background-color: black; - @include is-dark() { - color: black; - background-color: white; - } border: 0; border-radius: calc(var(--card-padding) / 2); @@ -1201,12 +1199,17 @@ $donate-robot-size: 500px; var(--card-content-font-size-clamp-min), var(--card-content-font-size-clamp-val), var(--card-content-font-size-clamp-max) - ); - font-weight: 400; + ); + font-weight: 400; - // Remove browser default positionning of the popover, - // as it defaults to center of the screen. - inset: unset; + // Remove browser default positionning of the popover, + // as it defaults to center of the screen. + inset: unset; + + @include release.is-dark() { + color: black; + background-color: white; + } a { color: var(--color-highlight-switch); @@ -1290,16 +1293,16 @@ $donate-robot-size: 500px; @each $section-name, $section-colors in $sections { &.section-#{$section-name} { - --color-top: #{map-get($section-colors, "color-top")}; - --color-bottom: #{map-get($section-colors, "color-bottom")}; - --color-selection: #{map-get($section-colors, "color-selection")}; - --color-invert: #{map-get($section-colors, "color-invert")}; - --color-highlight: #{map-get($section-colors, "color-highlight")}; - --color-highlight-switch: #{map-get($section-colors, "color-highlight--dark")}; - --color-invert-highlight: #{map-get($section-colors, "color-invert-highlight")}; - @include is-dark() { - --color-highlight: #{map-get($section-colors, "color-highlight--dark")}; - --color-highlight-switch: #{map-get($section-colors, "color-highlight")}; + --color-top: #{map.get($section-colors, "color-top")}; + --color-bottom: #{map.get($section-colors, "color-bottom")}; + --color-selection: #{map.get($section-colors, "color-selection")}; + --color-invert: #{map.get($section-colors, "color-invert")}; + --color-highlight: #{map.get($section-colors, "color-highlight")}; + --color-highlight-switch: #{map.get($section-colors, "color-highlight--dark")}; + --color-invert-highlight: #{map.get($section-colors, "color-invert-highlight")}; + @include release.is-dark() { + --color-highlight: #{map.get($section-colors, "color-highlight--dark")}; + --color-highlight-switch: #{map.get($section-colors, "color-highlight")}; } } } diff --git a/assets/css/releases/4.4.scss b/assets/css/releases/4.4.scss index 24eec10e8b..05534f1e27 100644 --- a/assets/css/releases/4.4.scss +++ b/assets/css/releases/4.4.scss @@ -1,8 +1,10 @@ --- --- -@import "common/colors"; -@import "common/release"; +@use "sass:map"; +@use "sass:selector"; +@use "common/colors"; +@use "common/release"; $column-max-width: 400px; $column-min-width: 300px; @@ -50,7 +52,7 @@ $header-gap-bottom: 80px; $header-content-color: white; $header-numbers-gap: 20px; $header-bar-height: 20px; -$header-bar-commits-color: $color-godot-blue; +$header-bar-commits-color: colors.$godot-blue; $header-bar-commits-color-inactive: #487491; $header-bar-contributors-color: #f47e7a; $header-bar-contributors-color-inactive: #a66160; @@ -58,22 +60,22 @@ $header-bar-gap: 10px; $header-version-font-weight: 800; $release-background-end: #bcbcbc; -$release-title-font-size: r-desktop-mobile(35px, 25px); -$release-section-margin-top: r-desktop-mobile(80px, 40px); -$release-section-margin-bottom: r-desktop-mobile(40px, 20px); +$release-title-font-size: release.desktop-mobile(35px, 25px); +$release-section-margin-top: release.desktop-mobile(80px, 40px); +$release-section-margin-bottom: release.desktop-mobile(40px, 20px); -$card-padding: r-desktop-mobile(17px, 15px); -$card-title-font-size: r-desktop-mobile(20px, 18px); -$card-content-font-size-clamp-min: r-desktop-mobile(14px, 0.8em); -$card-content-font-size-clamp-val: r-desktop-mobile(7cqw, 4cqw); -$card-content-font-size-clamp-max: r-desktop-mobile(16px, 1em); +$card-padding: release.desktop-mobile(17px, 15px); +$card-title-font-size: release.desktop-mobile(20px, 18px); +$card-content-font-size-clamp-min: release.desktop-mobile(14px, 0.8em); +$card-content-font-size-clamp-val: release.desktop-mobile(7cqw, 4cqw); +$card-content-font-size-clamp-max: release.desktop-mobile(16px, 1em); $card-box-shadow: 0 9px 10px -10px #0000008f; -$download-gap: r-desktop-mobile(8px, 4px); -$download-font-size: r-desktop-mobile(18px, 12px); +$download-gap: release.desktop-mobile(8px, 4px); +$download-font-size: release.desktop-mobile(18px, 12px); $section-hue-offset: 10; -$sections: r-generate-sections( +$sections: release.generate-sections( $sections: ( "foundation", "links", @@ -85,13 +87,13 @@ $sections: r-generate-sections( "special-thanks", ), $base-category: "foundation", - $base-color: $color-godot-blue, + $base-color: colors.$godot-blue, $offset: $section-hue-offset, ); // Add "download" to be a copy of "foundation", and make it on top order-wise. -$sections: map-merge( +$sections: map.merge( ( - "download": map-get($sections, "foundation"), + "download": map.get($sections, "foundation"), ), $sections ); @@ -138,16 +140,17 @@ $donate-robot-size: 500px; } :root { - --card-padding: #{r-get-desktop($card-padding)}; + --card-padding: #{release.get-desktop($card-padding)}; + scroll-behavior: smooth; + scroll-padding-top: var(--card-padding); + @include is-mobile() { - --card-padding: #{r-get-mobile($card-padding)}; + --card-padding: #{release.get-mobile($card-padding)}; } - scroll-behavior: smooth; @media (prefers-reduced-motion) { scroll-behavior: auto; } - scroll-padding-top: var(--card-padding); } #scroll-to-top { @@ -194,20 +197,20 @@ $donate-robot-size: 500px; #foundation-donate { background-color: #eff1f5; - @include is-dark() { + @include release.is-dark() { background-color: #283a5b; } .robot-1, .robot-2 { color: #cfd5e0; - @include is-dark() { - color: #233452; - } - font-size: $donate-robot-size; position: absolute; z-index: -1; + + @include release.is-dark() { + color: #233452; + } } .robot-1 { @@ -360,17 +363,17 @@ $donate-robot-size: 500px; var(--color-bottom) ); - @at-root #{selector-replace(&, ".links-container", ".links-container.links-container-subsections")} { + @at-root #{selector.replace(&, ".links-container", ".links-container.links-container-subsections")} { font-weight: 600; --color-top: var(--color-top-muted); --color-bottom: var(--color-bottom-muted); } - @at-root #{selector-replace(&, ".links-container", ".links-container.main-list")} { + @at-root #{selector.replace(&, ".links-container", ".links-container.main-list")} { font-size: 150%; @each $section-name, $section-colors in $sections { &.link-#{$section-name} { - --color-top: #{map-get($section-colors, "color-top")}; - --color-bottom: #{map-get($section-colors, "color-bottom")}; + --color-top: #{map.get($section-colors, "color-top")}; + --color-bottom: #{map.get($section-colors, "color-bottom")}; } } } @@ -388,8 +391,8 @@ $donate-robot-size: 500px; .link { @each $section-name, $section-colors in $sections { &.link-#{$section-name} { - --color-top: #{map-get($section-colors, "color-top")}; - --color-bottom: #{map-get($section-colors, "color-bottom")}; + --color-top: #{map.get($section-colors, "color-top")}; + --color-bottom: #{map.get($section-colors, "color-bottom")}; } } } @@ -445,7 +448,7 @@ $donate-robot-size: 500px; text-decoration: none; text-decoration-color: black; - @include is-dark() { + @include release.is-dark() { color: white; text-decoration-color: white; } @@ -510,122 +513,109 @@ $donate-robot-size: 500px; height: 100%; background-color: #25282b; - @include is-light() { - background-color: #cecece; + /** + * Responsive sizes. + */ + --release-title-font-size: #{release.get-desktop($release-title-font-size)}; + --release-section-margin-top: #{release.get-desktop($release-section-margin-top)}; + --release-section-margin-bottom: #{release.get-desktop( + $release-section-margin-bottom + )}; + + --card-padding: #{release.get-desktop($card-padding)}; + --card-title-font-size: #{release.get-desktop($card-title-font-size)}; + --card-content-font-size-clamp-min: #{release.get-desktop( + $card-content-font-size-clamp-min + )}; + --card-content-font-size-clamp-val: #{release.get-desktop( + $card-content-font-size-clamp-val + )}; + --card-content-font-size-clamp-max: #{release.get-desktop( + $card-content-font-size-clamp-max + )}; + + --download-gap: #{release.get-desktop($download-gap)}; + --download-font-size: #{release.get-desktop($download-font-size)}; + + /** Color **/ + --card-background-color: white; + --card-color: #2d2d2d; + --color-code-symbol: #{colors.$code-symbol--light}; + --color-code-keyword: #{colors.$code-keyword--light}; + --color-code-controlflow: #{colors.$code-controlflow--light}; + --color-code-basetype: #{colors.$code-basetype--light}; + --color-code-enginetype: #{colors.$code-enginetype--light}; + --color-code-usertype: #{colors.$code-usertype--light}; + --color-code-string: #{colors.$code-string--light}; + --color-code-background: #{colors.$code-background--light}; + --color-code-text: #{colors.$code-text--light}; + --color-code-function: #{colors.$code-function--light}; + --color-code-membervariable: #{colors.$code-membervariable--light}; + --color-code-gdscript-function: #{colors.$code-gdscript-function--light}; + --color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--light}; + --color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--light}; + --color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--light}; + --color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--light}; + --color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--light}; + @include release.is-dark() { + --card-background-color: #333639; + --card-color: white; + --color-code-symbol: #{colors.$code-symbol--dark}; + --color-code-keyword: #{colors.$code-keyword--dark}; + --color-code-controlflow: #{colors.$code-controlflow--dark}; + --color-code-basetype: #{colors.$code-basetype--dark}; + --color-code-enginetype: #{colors.$code-enginetype--dark}; + --color-code-usertype: #{colors.$code-usertype--dark}; + --color-code-string: #{colors.$code-string--dark}; + --color-code-background: #{colors.$code-background--dark}; + --color-code-text: #{colors.$code-text--dark}; + --color-code-function: #{colors.$code-function--dark}; + --color-code-membervariable: #{colors.$code-membervariable--dark}; + --color-code-gdscript-function: #{colors.$code-gdscript-function--dark}; + --color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--dark}; + --color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--dark}; + --color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--dark}; + --color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--dark}; + --color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--dark}; } a { text-decoration-thickness: 1px; } - /** - * Responsive sizes. - */ - --release-title-font-size: #{r-get-desktop($release-title-font-size)}; - --release-section-margin-top: #{r-get-desktop($release-section-margin-top)}; - --release-section-margin-bottom: #{r-get-desktop( - $release-section-margin-bottom - )}; - - --card-padding: #{r-get-desktop($card-padding)}; - --card-title-font-size: #{r-get-desktop($card-title-font-size)}; - --card-content-font-size-clamp-min: #{r-get-desktop( - $card-content-font-size-clamp-min - )}; - --card-content-font-size-clamp-val: #{r-get-desktop( - $card-content-font-size-clamp-val - )}; - --card-content-font-size-clamp-max: #{r-get-desktop( - $card-content-font-size-clamp-max - )}; - - --download-gap: #{r-get-desktop($download-gap)}; - --download-font-size: #{r-get-desktop($download-font-size)}; + @include release.is-light() { + background-color: #cecece; + } @include is-mobile() { - --release-title-font-size: #{r-get-mobile($release-title-font-size)}; - --release-section-margin-top: #{r-get-mobile($release-section-margin-top)}; - --release-section-margin-bottom: #{r-get-mobile( + --release-title-font-size: #{release.get-mobile($release-title-font-size)}; + --release-section-margin-top: #{release.get-mobile($release-section-margin-top)}; + --release-section-margin-bottom: #{release.get-mobile( $release-section-margin-bottom )}; - --card-padding: #{r-get-mobile($card-padding)}; - --card-title-font-size: #{r-get-mobile($card-title-font-size)}; - --card-content-font-size-clamp-min: #{r-get-mobile( + --card-padding: #{release.get-mobile($card-padding)}; + --card-title-font-size: #{release.get-mobile($card-title-font-size)}; + --card-content-font-size-clamp-min: #{release.get-mobile( $card-content-font-size-clamp-min )}; - --card-content-font-size-clamp-val: #{r-get-mobile( + --card-content-font-size-clamp-val: #{release.get-mobile( $card-content-font-size-clamp-val )}; - --card-content-font-size-clamp-max: #{r-get-mobile( + --card-content-font-size-clamp-max: #{release.get-mobile( $card-content-font-size-clamp-max )}; - --download-gap: #{r-get-mobile($download-gap)}; - --download-font-size: #{r-get-mobile($download-font-size)}; - } - - /** Color **/ - --card-background-color: white; - --card-color: #2d2d2d; - --color-code-symbol: #{$color-code-symbol--light}; - --color-code-keyword: #{$color-code-keyword--light}; - --color-code-controlflow: #{$color-code-controlflow--light}; - --color-code-basetype: #{$color-code-basetype--light}; - --color-code-enginetype: #{$color-code-enginetype--light}; - --color-code-usertype: #{$color-code-usertype--light}; - --color-code-string: #{$color-code-string--light}; - --color-code-background: #{$color-code-background--light}; - --color-code-text: #{$color-code-text--light}; - --color-code-function: #{$color-code-function--light}; - --color-code-membervariable: #{$color-code-membervariable--light}; - --color-code-gdscript-function: #{$color-code-gdscript-function--light}; - --color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--light}; - --color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--light}; - --color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--light}; - --color-code-gdscript-annotation: #{$color-code-gdscript-annotation--light}; - --color-code-gdscript-stringname: #{$color-code-gdscript-stringname--light}; - @include is-dark() { - --card-background-color: #333639; - --card-color: white; - --color-code-symbol: #{$color-code-symbol--dark}; - --color-code-keyword: #{$color-code-keyword--dark}; - --color-code-controlflow: #{$color-code-controlflow--dark}; - --color-code-basetype: #{$color-code-basetype--dark}; - --color-code-enginetype: #{$color-code-enginetype--dark}; - --color-code-usertype: #{$color-code-usertype--dark}; - --color-code-string: #{$color-code-string--dark}; - --color-code-background: #{$color-code-background--dark}; - --color-code-text: #{$color-code-text--dark}; - --color-code-function: #{$color-code-function--dark}; - --color-code-membervariable: #{$color-code-membervariable--dark}; - --color-code-gdscript-function: #{$color-code-gdscript-function--dark}; - --color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--dark}; - --color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--dark}; - --color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--dark}; - --color-code-gdscript-annotation: #{$color-code-gdscript-annotation--dark}; - --color-code-gdscript-stringname: #{$color-code-gdscript-stringname--dark}; + --download-gap: #{release.get-mobile($download-gap)}; + --download-font-size: #{release.get-mobile($download-font-size)}; } code.highlight, .code-highlight { $_padding: 5px; - background-color: color-mix( - in srgb, - var(--color-code-background), - transparent 15% - ); - @include is-dark() { - background-color: color-mix( - in srgb, - var(--color-code-background), - transparent 50% - ); - } - display: inline-block; - padding: 0 ($_padding / 2); + padding: 0 calc($_padding / 2); margin: 0 0; border-radius: $_padding; @@ -639,6 +629,19 @@ $donate-robot-size: 500px; Liberation Mono, monospace; + background-color: color-mix( + in srgb, + var(--color-code-background), + transparent 15% + ); + @include release.is-dark() { + background-color: color-mix( + in srgb, + var(--color-code-background), + transparent 50% + ); + } + @each $key in ( symbol @@ -802,7 +805,7 @@ $donate-robot-size: 500px; .bar { display: inline-block; height: $header-bar-height; - background-color: var(--bar-color, #{$color-godot-blue}); + background-color: var(--bar-color, #{colors.$godot-blue}); transform: translateY(2px); margin-right: $header-bar-gap; } @@ -1249,13 +1252,13 @@ $donate-robot-size: 500px; font-size: var(--card-title-font-size); a { + text-decoration: none; color: var(--color-top); - @include is-dark() { + @include release.is-dark() { color: white; text-decoration-color: white; } - text-decoration: none; &:hover { text-decoration: underline; } @@ -1342,7 +1345,7 @@ $donate-robot-size: 500px; font-size: 21px; font-weight: 700; - @include is-dark() { + @include release.is-dark() { color: white; text-decoration-color: white; } @@ -1604,7 +1607,7 @@ $donate-robot-size: 500px; font-size: #{"max(clamp(4cqw, 50px, 6cqw), 2em)"}; font-weight: 800; - @at-root #{selector-replace(&, ".section", ".section.subsection")} { + @at-root #{selector.replace(&, ".section", ".section.subsection")} { font-size: #{"max(clamp(2cqw, 35px, 4cqw), 1.5em)"}; font-weight: 600; } @@ -1635,33 +1638,33 @@ $donate-robot-size: 500px; @each $section-name, $section-colors in $sections { .section-#{$section-name} { - --color-top: #{map-get($section-colors, "color-top")}; - --color-bottom: #{map-get($section-colors, "color-bottom")}; - --color-top-muted: #{map-get($section-colors, "color-top-muted")}; - --color-bottom-muted: #{map-get($section-colors, "color-bottom-muted")}; - --color-selection: #{map-get($section-colors, "color-selection")}; - --color-invert: #{map-get($section-colors, "color-invert")}; - --color-highlight: #{map-get($section-colors, "color-highlight")}; - --color-highlight-switch: #{map-get( + --color-top: #{map.get($section-colors, "color-top")}; + --color-bottom: #{map.get($section-colors, "color-bottom")}; + --color-top-muted: #{map.get($section-colors, "color-top-muted")}; + --color-bottom-muted: #{map.get($section-colors, "color-bottom-muted")}; + --color-selection: #{map.get($section-colors, "color-selection")}; + --color-invert: #{map.get($section-colors, "color-invert")}; + --color-highlight: #{map.get($section-colors, "color-highlight")}; + --color-highlight-switch: #{map.get( $section-colors, "color-highlight--dark" )}; - --color-invert-highlight: #{map-get( + --color-invert-highlight: #{map.get( $section-colors, "color-invert-highlight" )}; - @include is-light() { - --color-selection: #{map-get( + @include release.is-light() { + --color-selection: #{map.get( $section-colors, "color-selection--light" )}; } - @include is-dark() { - --color-highlight: #{map-get( + @include release.is-dark() { + --color-highlight: #{map.get( $section-colors, "color-highlight--dark" )}; - --color-highlight-switch: #{map-get( + --color-highlight-switch: #{map.get( $section-colors, "color-highlight" )};