From ed7f93e1a264809f2731a3be314cf1d134c4582d Mon Sep 17 00:00:00 2001 From: sdejonge Date: Mon, 8 Sep 2025 14:50:45 +1000 Subject: [PATCH 1/2] Use rem for border radius SCSS variables In preparation of border radius design tokens inheriting values from spacing scales rem values update existing SCSS variables to support rem values to avoid CSS stylesheet compile errors --- app/assets/stylesheets/framework/awards.scss | 2 +- app/assets/stylesheets/framework/ds_experiments.scss | 8 ++++---- app/assets/stylesheets/framework/variables.scss | 8 ++++---- app/assets/stylesheets/page_bundles/tree.scss | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index bcf67b5346f9a1..50fa8686b8accf 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -299,7 +299,7 @@ } .add-reaction-search { - $input-focus-ring-border-radius: calc(#{$gl-border-radius-large} - #{$gl-border-size-1}); + $input-focus-ring-border-radius: $gl-border-radius-lg-inner; input { border-top-left-radius: $input-focus-ring-border-radius !important; diff --git a/app/assets/stylesheets/framework/ds_experiments.scss b/app/assets/stylesheets/framework/ds_experiments.scss index 21db68d716c98b..18e466fca0e3f9 100644 --- a/app/assets/stylesheets/framework/ds_experiments.scss +++ b/app/assets/stylesheets/framework/ds_experiments.scss @@ -78,19 +78,19 @@ table.tree-table tbody tr:last-child { td, th { &:first-child { - border-bottom-left-radius: calc(#{$gl-border-radius-lg} - 1px) !important; + border-bottom-left-radius: $gl-border-radius-lg-inner !important; } &:last-child { - border-bottom-right-radius: calc(#{$gl-border-radius-lg} - 1px) !important; + border-bottom-right-radius: $gl-border-radius-lg-inner !important; } } } // File title .file-title-flex-parent, .file-holder .file-title-flex-parent { - border-top-left-radius: #{$gl-border-radius-lg - 1px} !important; - border-top-right-radius: #{$gl-border-radius-lg - 1px} !important; + border-top-left-radius: $gl-border-radius-lg-inner !important; + border-top-right-radius: $gl-border-radius-lg-inner !important; } // Discussion file comment diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 7245c521668c4a..f7e98aabed0551 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -136,10 +136,10 @@ $limited-layout-width: 1006px; $fixed-layout-width: 1296px; $container-margin: $gl-padding; $container-margin-xl: $gl-padding-24; -$gl-border-radius-base: 4px; -$gl-border-radius-base-inner: $gl-border-radius-base - 1px; -$gl-border-radius-lg: 8px; -$gl-border-radius-lg-inner: $gl-border-radius-lg - 1px; +$gl-border-radius-base: 0.25rem; +$gl-border-radius-base-inner: calc(#{$gl-border-radius-base} - 1px); +$gl-border-radius-lg: 0.5rem; +$gl-border-radius-lg-inner: calc(#{$gl-border-radius-lg} - 1px); $border-radius-small: 2px; $border-radius-large: 8px; $default-icon-size: 16px; diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss index 9df06ecc098bab..fe1777918add09 100644 --- a/app/assets/stylesheets/page_bundles/tree.scss +++ b/app/assets/stylesheets/page_bundles/tree.scss @@ -166,13 +166,13 @@ $bottom-padding: $gl-spacing-scale-6; &:first-child { box-shadow: inset 1px 0 0 0 var(--gl-action-selected-border-color-default), inset 0 -1px 0 0 var(--gl-action-selected-border-color-default); - border-bottom-left-radius: calc(#{$gl-border-radius-base} - 1px); + border-bottom-left-radius: $gl-border-radius-base-inner; } &:last-child { box-shadow: inset -1px 0 0 0 var(--gl-action-selected-border-color-default), inset 0 -1px 0 0 var(--gl-action-selected-border-color-default); - border-bottom-right-radius: calc(#{$gl-border-radius-base} - 1px); + border-bottom-right-radius: $gl-border-radius-base-inner; } } } -- GitLab From 01e2bea2c8aaf213846d4e64c2b69f8c320313fa Mon Sep 17 00:00:00 2001 From: sdejonge Date: Mon, 8 Sep 2025 14:51:59 +1000 Subject: [PATCH 2/2] Install @gitlab/ui package Install @gitlab/ui package --- package.json | 2 +- yarn.lock | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index bcfdda15db7d74..4fc3550410d028 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@gitlab/fonts": "^1.3.1", "@gitlab/query-language-rust": "0.20.8", "@gitlab/svgs": "3.146.0", - "@gitlab/ui": "120.0.0", + "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11271951983/artifacts/raw/packages/gitlab-ui/gitlab-ui.2944-define-spacing-design-tokens-2.tgz", "@gitlab/vue-router-vue3": "npm:vue-router@4.5.1", "@gitlab/vuex-vue3": "npm:vuex@4.1.0", "@gitlab/web-ide": "^0.0.1-dev-20250818141247", diff --git a/yarn.lock b/yarn.lock index f36821d5f60277..3175832bf66feb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1430,7 +1430,7 @@ resolved "https://registry.yarnpkg.com/@gitlab/fonts/-/fonts-1.3.1.tgz#dd335ed25cb33927abc1d80dfbfa31fc93e9bd15" integrity sha512-/7Q5Sy9Q3pmutV/1EgURm3iDZtV0HcE4nTwFpHLCrGDdxQ3pNv6SdujzeJExnfiI5Y+1FGfOvKwOlmiVuyDtzA== -"@gitlab/noop@^1.0.1": +"@gitlab/noop@^1.0.1", jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454" integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q== @@ -1457,10 +1457,9 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.146.0.tgz#9d2005978252296cbff9bf47f7f2c0f29c7d35e2" integrity sha512-KEPhXsRQkaWjyApjk71t8aIKgMjqZ+QtgRe2H82vXsj+G17XoDDXAHl7Zw00PLf4IrJjn6ur6aS2A6CmTVHDLA== -"@gitlab/ui@120.0.0": - version "120.0.0" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-120.0.0.tgz#6192ee9d4ec59c1d313d7cab0e988e1d0624d054" - integrity sha512-oKACJA/b5+sVC4BZj76ixwa5KE0feyS06lFFiPRPK1as4GLICZih3/wtRTGV+zlO/znRGcIrk13wx5pc/2Zz9g== +"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11271951983/artifacts/raw/packages/gitlab-ui/gitlab-ui.2944-define-spacing-design-tokens-2.tgz": + version "122.2.0" + resolved "https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11271951983/artifacts/raw/packages/gitlab-ui/gitlab-ui.2944-define-spacing-design-tokens-2.tgz#c17cfd04d6b17ab2ef96edac45073ee169e49c37" dependencies: "@floating-ui/dom" "1.7.4" echarts "^5.6.0" @@ -9536,11 +9535,6 @@ istanbul-reports@^3.1.3: html-escaper "^2.0.0" istanbul-lib-report "^3.0.0" -jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454" - integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q== - jed@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4" -- GitLab