From 189a453e8b8283fe571ccc59fc724bf982a8bfb9 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Fri, 7 Nov 2025 12:32:54 -0500 Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20align=20typography=20an?= =?UTF-8?q?d=20border=20styles=20to=20HDS=20tokens=20=20(#3051)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Feat: Convert font-family styles to HDS tokens * Feat: Convert font-size styles to HDS tokens * Feat: Convert font-weight styles to HDS tokens * Feat: Convert border-radius styles to HDS tokens --------- Co-authored-by: Zhihe Li --- addons/rose/app/styles/rose/_typography.scss | 2 +- .../rose/components/code-editor/_index.scss | 2 +- .../rose/components/form/_checkbox.scss | 5 ++-- .../rose/components/form/_fieldset.scss | 4 ++- .../styles/rose/components/form/_select.scss | 2 +- .../styles/rose/components/header/_brand.scss | 3 +- .../rose/components/list/_key-value.scss | 2 +- .../styles/rose/components/nav/_sidebar.scss | 3 +- .../app/styles/rose/components/nav/_tabs.scss | 3 +- .../rose/app/styles/rose/utilities/_type.scss | 5 +--- .../styles/rose/variables/_typography.scss | 30 ------------------- addons/rose/tests/dummy/app/styles/app.scss | 4 +-- ui/admin/app/styles/app.scss | 21 ++++++------- ui/desktop/app/styles/app.scss | 10 +++---- 14 files changed, 35 insertions(+), 61 deletions(-) diff --git a/addons/rose/app/styles/rose/_typography.scss b/addons/rose/app/styles/rose/_typography.scss index d000a26c5..7e5909ec7 100644 --- a/addons/rose/app/styles/rose/_typography.scss +++ b/addons/rose/app/styles/rose/_typography.scss @@ -14,7 +14,7 @@ html { body { // Used by Rose::Tabs and '/' in breadcrumbs // and link list panel - font-family: typography.$family-primary; + font-family: var(--token-typography-font-stack-text); // this is used across the app line-height: typography.line-height(m); diff --git a/addons/rose/app/styles/rose/components/code-editor/_index.scss b/addons/rose/app/styles/rose/components/code-editor/_index.scss index f419925ab..1a530ee84 100644 --- a/addons/rose/app/styles/rose/components/code-editor/_index.scss +++ b/addons/rose/app/styles/rose/components/code-editor/_index.scss @@ -15,7 +15,7 @@ max-width: 100%; display: flex; flex: 1; - font-family: ui-monospace, Menlo, monospace; + font-family: var(--token-typography-font-stack-code); } .rose-autosize { diff --git a/addons/rose/app/styles/rose/components/form/_checkbox.scss b/addons/rose/app/styles/rose/components/form/_checkbox.scss index 308b07d13..30d7f7e87 100644 --- a/addons/rose/app/styles/rose/components/form/_checkbox.scss +++ b/addons/rose/app/styles/rose/components/form/_checkbox.scss @@ -28,9 +28,10 @@ .rose-form-checkbox-label { // label styles - @include type.type(s, semibold); + @include type.type(s); color: currentcolor; + font-weight: var(--token-typography-font-weight-semibold); &, .rose-form-checkbox-label-description { @@ -53,7 +54,7 @@ pointer-events: none; content: ' '; border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); - border-radius: sizing.rems(xxxs); + border-radius: var(--token-form-checkbox-border-radius); } &::after { diff --git a/addons/rose/app/styles/rose/components/form/_fieldset.scss b/addons/rose/app/styles/rose/components/form/_fieldset.scss index c3171291e..e4a8c705a 100644 --- a/addons/rose/app/styles/rose/components/form/_fieldset.scss +++ b/addons/rose/app/styles/rose/components/form/_fieldset.scss @@ -10,7 +10,9 @@ margin-bottom: sizing.rems(m); .rose-form-fieldset-title { - @include type.type(s, semibold); + @include type.type(s); + + font-weight: var(--token-typography-font-weight-semibold); } .rose-form-fieldset-body { diff --git a/addons/rose/app/styles/rose/components/form/_select.scss b/addons/rose/app/styles/rose/components/form/_select.scss index baff30843..58a56a138 100644 --- a/addons/rose/app/styles/rose/components/form/_select.scss +++ b/addons/rose/app/styles/rose/components/form/_select.scss @@ -21,7 +21,7 @@ margin-bottom: sizing.rems(xs); padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs); border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); - border-radius: sizing.rems(xxxs); + border-radius: var(--token-border-radius-x-small); box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) rgba(var(--stark-components), var(--opacity-2)); background: var(--ui-gray-subtler-5) diff --git a/addons/rose/app/styles/rose/components/header/_brand.scss b/addons/rose/app/styles/rose/components/header/_brand.scss index 1612859e0..0f7cbc1f8 100644 --- a/addons/rose/app/styles/rose/components/header/_brand.scss +++ b/addons/rose/app/styles/rose/components/header/_brand.scss @@ -20,8 +20,9 @@ } .rose-header-brand-text { - @include type.type(m, normal); + @include type.type(m); + font-weight: var(--token-typography-font-weight-regular); margin: 0; margin-left: sizing.rems(s); white-space: nowrap; diff --git a/addons/rose/app/styles/rose/components/list/_key-value.scss b/addons/rose/app/styles/rose/components/list/_key-value.scss index 94196d92e..2d04dcea5 100644 --- a/addons/rose/app/styles/rose/components/list/_key-value.scss +++ b/addons/rose/app/styles/rose/components/list/_key-value.scss @@ -43,7 +43,7 @@ // First cell (key) is approximately 25% &:nth-child(1) { width: 25%; - font-weight: typography.font-weight(semibold); + font-weight: var(--token-typography-font-weight-semibold); } // Second cell (value) is approximately 75% diff --git a/addons/rose/app/styles/rose/components/nav/_sidebar.scss b/addons/rose/app/styles/rose/components/nav/_sidebar.scss index 81a2c3894..9f53bcfbc 100644 --- a/addons/rose/app/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/app/styles/rose/components/nav/_sidebar.scss @@ -22,10 +22,11 @@ // TODO revisit the title .rose-nav-title { - @include type.type(xs, semibold); + @include type.type(xs); display: none; color: #{sass.color(ui-gray, 400)}; + font-weight: var(--token-typography-font-weight-semibold); text-transform: uppercase; $line-height: math.div(20, 12); diff --git a/addons/rose/app/styles/rose/components/nav/_tabs.scss b/addons/rose/app/styles/rose/components/nav/_tabs.scss index e7275fc16..737551816 100644 --- a/addons/rose/app/styles/rose/components/nav/_tabs.scss +++ b/addons/rose/app/styles/rose/components/nav/_tabs.scss @@ -17,8 +17,9 @@ --background: transparent; --box-shadow-color: transparent; - @include type.type(s, semibold); + @include type.type(s); + font-weight: var(--token-typography-font-weight-semibold); display: inline-block; color: var(--color); background-color: var(--background); diff --git a/addons/rose/app/styles/rose/utilities/_type.scss b/addons/rose/app/styles/rose/utilities/_type.scss index 5347f8303..43a08f3d7 100644 --- a/addons/rose/app/styles/rose/utilities/_type.scss +++ b/addons/rose/app/styles/rose/utilities/_type.scss @@ -9,10 +9,7 @@ * Mixin for specifying a font-size/line-height size on an element, with * an option for specifying weight. */ -@mixin type($size, $weight: &) { +@mixin type($size) { font-size: typography.font-size($size); line-height: typography.line-height($size); - @if $weight { - font-weight: typography.font-weight($weight); - } } diff --git a/addons/rose/app/styles/rose/variables/_typography.scss b/addons/rose/app/styles/rose/variables/_typography.scss index 7978eb2b6..14f00edb3 100644 --- a/addons/rose/app/styles/rose/variables/_typography.scss +++ b/addons/rose/app/styles/rose/variables/_typography.scss @@ -11,29 +11,6 @@ * SASS variables defining typography. */ -$family-primary: - system-ui, - -apple-system, - blinkmacsystemfont, - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; -$family-monospace: - 'SFMono-Regular', consolas, 'Liberation Mono', menlo, courier, monospace; - -// Available font weights by name -$font-weights: ( - normal: 400, - semibold: 600, - bold: 700, -); - // unitless value to start, but think pixels or points $base-font-size: 16; @@ -84,10 +61,3 @@ $line-heights: ( @function line-height($name) { @return map.get($line-heights, $name); } - -/** - * Returns a named font weight. - */ -@function font-weight($name) { - @return map.get($font-weights, $name); -} diff --git a/addons/rose/tests/dummy/app/styles/app.scss b/addons/rose/tests/dummy/app/styles/app.scss index 03c0e798d..300592fe6 100644 --- a/addons/rose/tests/dummy/app/styles/app.scss +++ b/addons/rose/tests/dummy/app/styles/app.scss @@ -16,7 +16,7 @@ width: 9rem; // border: 1px solid var(--ui-gray-subtler-4); - border-radius: 4px; + border-radius: var(--token-border-radius-small); margin: 0 0.5rem 0.5rem 0 !important; box-shadow: 0 3px 6px rgba(var(--stark-components), var(--opacity-3)); list-style-type: none; @@ -36,7 +36,7 @@ .swatch-chip { height: 5rem; border: 0.5rem solid var(--subtle); - border-radius: 4px; + border-radius: var(--token-border-radius-small); } .swatch-detail { diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index af02e4632..2fe998630 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -171,7 +171,7 @@ .worker-create-section { border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); - border-radius: sizing.rems(xxs); + border-radius: var(--token-border-radius-small); margin-bottom: sizing.rems(xl); padding: sizing.rems(l); @@ -181,7 +181,7 @@ > p span { background-color: var(--token-color-surface-strong); - border-radius: 5px; + border-radius: var(--token-border-radius-small); padding: sizing.rems(xxxs) sizing.rems(xxs); } @@ -231,7 +231,7 @@ grid-template-areas: 'label' 'text-input' 'helper-text'; .hds-form-label { - font-size: sizing.rems(m); + font-size: var(--token-typography-body-300-font-size); grid-area: label; line-height: sizing.rems(m) + sizing.rems(xxs); } @@ -241,7 +241,7 @@ border: 0; color: var(--token-form-label-color); grid-area: text-input; - font-size: sizing.rems(m); + font-size: var(--token-typography-body-300-font-size); padding: 0; } @@ -274,14 +274,14 @@ --secret-editor-height: 210px; background: var(--secret-editor-body); - border-radius: sizing.rems(xxs); + border-radius: var(--token-border-radius-small); height: var(--secret-editor-height); margin-bottom: sizing.rems(l); width: 100%; .secret-editor-json { .CodeMirror { - border-radius: sizing.rems(xxs); + border-radius: var(--token-border-radius-small); height: var(--secret-editor-height); display: block; } @@ -303,7 +303,8 @@ .secret-editor-skeleton-gutter { background: var(--secret-editor-gutter); - border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs); + border-radius: var(--token-border-radius-small) 0 0 + var(--token-border-radius-small); width: sizing.rems(xxl) + sizing.rems(xxs); // 52 } @@ -343,7 +344,7 @@ } .secret-editor-skeleton-message { - font-size: sizing.rems(s) + sizing.rems(xxxs); // 14 + font-size: var(--token-typography-body-200-font-size); left: 50%; position: absolute; top: 50%; @@ -605,7 +606,7 @@ position: absolute; bottom: 2.15rem; left: 0.5rem; - border-radius: 0.25rem; + border-radius: var(--token-border-radius-small); z-index: 1; background-color: var(--token-color-palette-neutral-200); } @@ -688,7 +689,7 @@ .ap-playback-button { background: var(--player-play-button); border: var(--player-play-button-border) 0.063rem solid; - border-radius: 0.313rem; + border-radius: var(--token-border-radius-small); margin: 0.75rem; padding: 0.625rem 1rem; diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 5787047fd..e53d43c10 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -160,7 +160,7 @@ .branded-card { border: 1px solid var(--ui-border-subtler-1); - border-radius: sizing.rems(xxxs); + border-radius: var(--token-border-radius-x-small); margin: 0 auto; margin-top: sizing.rems(l) * 1.25; padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) @@ -173,8 +173,8 @@ background-image: url('/brand-background.svg'); background-position: right; background-repeat: no-repeat; - border-top-left-radius: sizing.rems(xxxs); - border-top-right-radius: sizing.rems(xxxs); + border-top-left-radius: var(--token-border-radius-x-small); + border-top-right-radius: var(--token-border-radius-x-small); content: ' '; height: sizing.rems(l) * 3.25; left: 0; @@ -246,7 +246,7 @@ .details-sidebar { background-color: var(--token-color-palette-neutral-50); - border-radius: 0.313rem; + border-radius: var(--token-border-radius-small); padding: 1.5rem 2.5rem; > :not(:last-child) { @@ -324,7 +324,7 @@ .credential-panel-body { border: 1px solid var(--token-color-border-primary); - border-radius: 5px; + border-radius: var(--token-border-radius-small); display: flex; margin-top: 0.75rem;