diff --git a/apps/dictionary/tokens/$themes.json b/apps/dictionary/tokens/$themes.json index 3ed6539c76..58b43ae684 100644 --- a/apps/dictionary/tokens/$themes.json +++ b/apps/dictionary/tokens/$themes.json @@ -13,7 +13,7 @@ "core/components/o3-editorial-typography": "source", "core/components/o3-form/use-case": "source", "core/components/o3-form": "source", - "core/base/border-radius": "source", + "core/base/border-radius": "enabled", "sustainable-views/base/border-radius": "disabled", "internal/base/border-radius": "disabled", "core/base/typography": "enabled", @@ -436,7 +436,7 @@ "internal/components/o3-form/use-case": "source", "internal/base/typography": "enabled", "internal/use-case/focus": "enabled", - "internal/base/border-radius": "source" + "internal/base/border-radius": "enabled" }, "$figmaCollectionId": "VariableCollectionId:6510:3502", "$figmaModeId": "6510:2", @@ -586,7 +586,7 @@ "whitelabel/components/o3-editorial-typography": "source", "whitelabel/components/o3-form": "source", "whitelabel/components/o3-form/use-case": "source", - "whitelabel/base/border-radius": "source", + "whitelabel/base/border-radius": "enabled", "sustainable-views/base/border-radius": "disabled", "internal/base/border-radius": "disabled", "core/base/typography": "enabled", @@ -668,7 +668,7 @@ "sustainable-views/components/o3-form/use-case": "source", "sustainable-views/base/typography": "enabled", "sustainable-views/use-case/focus": "enabled", - "sustainable-views/base/border-radius": "source", + "sustainable-views/base/border-radius": "enabled", "internal/base/border-radius": "disabled" }, "$figmaCollectionId": "VariableCollectionId:6169:227", diff --git a/components/o-forms/src/scss/_radio-box.scss b/components/o-forms/src/scss/_radio-box.scss index f15d742c7f..c7775bda16 100644 --- a/components/o-forms/src/scss/_radio-box.scss +++ b/components/o-forms/src/scss/_radio-box.scss @@ -17,10 +17,6 @@ label { @include _oFormsControlsBoxBase(); - &:not(:first-of-type) { - border-left: $_o-forms-border; - } - .o-forms-input__label { box-sizing: border-box; padding: $_o-forms-spacing-one $_o-forms-spacing-two; @@ -43,6 +39,7 @@ height: 100%; cursor: pointer; + @if $disabled { &:disabled + .o-forms-input__label { cursor: default; @@ -81,45 +78,29 @@ .o-forms-input--radio-box__container { background-color: _oFormsGet('radio-background'); - } - - .o-forms-input--radio-box__container, - label:not(:first-of-type) { - border-color: _oFormsGet('default-border', $from: $theme); - } - input[type='radio'] { - & + .o-forms-input__label { - color: _oFormsGet('controls-base', $from: $theme); + label .o-forms-input__label { + border-radius: oPrivateFoundationGet('o3-border-radius-1'); } - &:not(:checked):not(:disabled):hover + .o-forms-input__label { - background-color: rgba(_oFormsGet('controls-base', $from: $theme), 0.15); + .o-forms-input--radio-box__container, + label:not(:first-of-type) { + border-color: _oFormsGet('default-border', $from: $theme); } - &:focus { - @include oPrivateNormaliseFocusUnsetContent(); + input[type='radio'] { + & + .o-forms-input__label { - $default-text: _oFormsGet('default-text', $theme); - @if $default-text and oPrivateColorsColorBrightness($default-text) > 65% { - @include oPrivateNormaliseFocusContentInverse(); - } @else { - @include oPrivateNormaliseFocusContent(); - } + color: _oFormsGet('controls-base', $from: $theme); } - } - // Unset :focus styles where :focus-visible is supported. - // Ideally we would set `:focus-visible` by default and use - // `@supports not selector(:focus-visible)` to provide a - // `:focus` fallback, however some of our supported browsers - // do not understand `@supports: selector()`. - @supports selector(:focus-visible) { - &:focus + .o-forms-input__label { - @include oPrivateNormaliseFocusUnsetContent(); + &:not(:checked):not(:disabled):hover + .o-forms-input__label { + background-color: rgba(_oFormsGet('controls-base', $from: $theme), 0.15); } - &:focus-visible { + &:focus { + @include oPrivateNormaliseFocusUnsetContent(); + & + .o-forms-input__label { $default-text: _oFormsGet('default-text', $theme); @if $default-text and oPrivateColorsColorBrightness($default-text) > 65% { @@ -129,17 +110,39 @@ } } } - } - &:checked + .o-forms-input__label { - background-color: _oFormsGet('controls-base', $from: $theme); - color: _oFormsGet('controls-checked-base', $from: $theme); + // Unset :focus styles where :focus-visible is supported. + // Ideally we would set `:focus-visible` by default and use + // `@supports not selector(:focus-visible)` to provide a + // `:focus` fallback, however some of our supported browsers + // do not understand `@supports: selector()`. + @supports selector(:focus-visible) { + &:focus + .o-forms-input__label { + @include oPrivateNormaliseFocusUnsetContent(); + } + + &:focus-visible { + & + .o-forms-input__label { + $default-text: _oFormsGet('default-text', $theme); + @if $default-text and oPrivateColorsColorBrightness($default-text) > 65% { + @include oPrivateNormaliseFocusContentInverse(); + } @else { + @include oPrivateNormaliseFocusContent(); + } + } + } + } - &.o-forms-input__label--negative { - background-color: _oFormsGet( - 'controls-negative-checked-background', - $from: $theme - ); + &:checked + .o-forms-input__label { + background-color: _oFormsGet('controls-base', $from: $theme); + color: _oFormsGet('controls-checked-base', $from: $theme); + + &.o-forms-input__label--negative { + background-color: _oFormsGet( + 'controls-negative-checked-background', + $from: $theme + ); + } } } } diff --git a/components/o-forms/src/scss/shared/_control-inputs.scss b/components/o-forms/src/scss/shared/_control-inputs.scss index fec4e3e35f..45d14af36f 100644 --- a/components/o-forms/src/scss/shared/_control-inputs.scss +++ b/components/o-forms/src/scss/shared/_control-inputs.scss @@ -58,6 +58,7 @@ line-height: unset; box-sizing: border-box; border: $_o-forms-border; + border-radius: oPrivateFoundationGet('o3-border-radius-2'); display: inline-flex; flex-wrap: wrap; text-align: center; diff --git a/components/o-private-foundation/src/scss/o-buttons/main.scss b/components/o-private-foundation/src/scss/o-buttons/main.scss index 16ed1183b8..9ca73b01ce 100644 --- a/components/o-private-foundation/src/scss/o-buttons/main.scss +++ b/components/o-private-foundation/src/scss/o-buttons/main.scss @@ -119,7 +119,7 @@ /* Button Sizes */ @if ($size == 'big') { --_o-pf-button-min-width: 80px; - --_o-pf-button-min-height: 40px; + --_o-pf-button-min-height: 44px; --_o-pf-button-inline-padding-start: #{oPrivateFoundationGet( 'o3-spacing-2xs' @@ -156,7 +156,7 @@ } min-width: var(--_o-pf-button-min-width); - min-height: var(--_o-pf-button-min-height); + min-height: var(--_o-pf-button-min-height, 44px); padding: 0 var(--_o-pf-button-inline-padding-end) 0 var(--_o-pf-button-inline-padding-start); display: inline-flex; @@ -169,6 +169,7 @@ font-weight: var(--_o-pf-button-font-weight); font-family: '#{oPrivateFoundationGet('o3-font-family-metric')}', sans-serif; border: var(--_o-pf-button-border-size) solid transparent; + border-radius: oPrivateFoundationGet('o3-border-radius-1'); text-align: center; text-decoration: none; cursor: pointer; diff --git a/components/o-private-foundation/src/scss/tokens/core.scss b/components/o-private-foundation/src/scss/tokens/core.scss index b182c4cfb2..6f6d1d4a5f 100644 --- a/components/o-private-foundation/src/scss/tokens/core.scss +++ b/components/o-private-foundation/src/scss/tokens/core.scss @@ -5,8 +5,8 @@ $tokens: ( 'do-not-use': rgba(0, 0, 0, 0), - '_o3-border-radius-1': 4px, - '_o3-border-radius-2': 6px, + 'o3-border-radius-1': 4px, + 'o3-border-radius-2': 6px, // FT Pink is used for the FT logo 'o3-color-palette-ft-pink': #fcd0b1, 'o3-color-palette-ft-grey': #333333, diff --git a/components/o-private-foundation/src/scss/tokens/internal.scss b/components/o-private-foundation/src/scss/tokens/internal.scss index 16aa5583fb..bfb0430557 100644 --- a/components/o-private-foundation/src/scss/tokens/internal.scss +++ b/components/o-private-foundation/src/scss/tokens/internal.scss @@ -373,8 +373,8 @@ $tokens: ( 'o3-focus-use-case-ring-inverse-outer': 0px 0px 0px 8px #ffffff, 'o3-focus-use-case-outline-color': 0px 0px 0px 2px #808080, 'o3-focus-use-case-outline-inverse-color': 0px 0px 0px 2px #ffffff, - '_o3-border-radius-1': 4px, - '_o3-border-radius-2': 6px, + 'o3-border-radius-1': 4px, + 'o3-border-radius-2': 6px, 'o3-icon-at': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M575.9%20171.2H448.1C295.172%20171.2%20171.2%20295.172%20171.2%20448.1V575.9C171.2%20728.828%20295.172%20852.8%20448.1%20852.8H575.9C602.384%20852.8%20628%20849.082%20652.254%20842.139C666.869%20837.955%20682.4%20848.337%20682.4%20863.539V906.347C682.4%20915.701%20676.313%20924.023%20667.26%20926.376C638.075%20933.963%20607.459%20938%20575.9%20938H448.1C248.118%20938%2086%20775.882%2086%20575.9V448.1C86%20248.118%20248.118%2086%20448.1%2086H575.9C775.882%2086%20938%20248.118%20938%20448.1V597.197C937.999%20679.542%20871.245%20746.297%20788.9%20746.297C732.022%20746.297%20682.584%20714.45%20657.443%20667.614C619.373%20703.21%20568.231%20725%20512%20725C394.363%20725%20299%20629.637%20299%20512C299%20394.363%20394.363%20299%20512%20299C559.951%20299%20604.201%20314.845%20639.8%20341.584C639.808%20329.828%20649.341%20320.3%20661.1%20320.3H703.7C715.464%20320.3%20725%20329.836%20725%20341.6V597.215C725.009%20632.498%20753.615%20661.097%20788.9%20661.097C824.185%20661.097%20852.791%20632.48%20852.8%20597.197V448.1C852.8%20295.172%20728.828%20171.2%20575.9%20171.2ZM639.8%20512C639.8%20441.418%20582.582%20384.2%20512%20384.2C441.418%20384.2%20384.2%20441.418%20384.2%20512C384.2%20582.582%20441.418%20639.8%20512%20639.8C582.582%20639.8%20639.8%20582.582%20639.8%20512Z%22%20fill=%22black%22/%3E%3C/svg%3E"), 'o3-icon-book': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M512%20871.126C517.342%20871.133%20522.536%20870.12%20527.357%20868.248L881.8%20742.492C890.312%20739.472%20896%20731.419%20896%20722.387L896%20158.218C896%20143.485%20881.419%20133.186%20867.533%20138.113L512%20264.256L156.467%20138.113C142.581%20133.186%20128%20143.485%20128%20158.218L128%20722.387C128%20731.419%20133.688%20739.472%20142.2%20742.492L496.643%20868.248C501.463%20870.12%20506.658%20871.133%20512%20871.126ZM554.667%20768.013L810.667%20677.185L810.667%20248.834L554.667%20339.663L554.667%20768.013ZM469.333%20768.013L469.333%20339.663L213.333%20248.834L213.333%20677.185L469.333%20768.013Z%22%20fill=%22black%22/%3E%3C/svg%3E"), 'o3-icon-bookmark-filled': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%201024%201024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M256%20106.667C256%2094.8852%20265.551%2085.334%20277.333%2085.334H746.667C758.449%2085.334%20768%2094.8853%20768%20106.667V904.837C768%20923.843%20745.021%20933.361%20731.582%20919.922L512.354%20700.694C512.158%20700.499%20511.842%20700.499%20511.646%20700.694L292.418%20919.922C278.979%20933.361%20256%20923.843%20256%20904.837V106.667Z%22%20fill=%22black%22/%3E%3C/svg%3E"), diff --git a/components/o-private-foundation/src/scss/tokens/professional.scss b/components/o-private-foundation/src/scss/tokens/professional.scss index 794947705d..b98359dd65 100644 --- a/components/o-private-foundation/src/scss/tokens/professional.scss +++ b/components/o-private-foundation/src/scss/tokens/professional.scss @@ -304,8 +304,8 @@ $tokens: ( '_o3-editorial-typography-big-number-title-font-weight': 700, '_o3-editorial-typography-big-number-title-font-size': 48px, '_o3-editorial-typography-big-number-title-line-height': 56px, - '_o3-border-radius-1': 4px, - '_o3-border-radius-2': 6px, + 'o3-border-radius-1': 4px, + 'o3-border-radius-2': 6px, 'o3-font-family-metric': 'metric 2 VF', 'o3-font-family-financier-display': 'financier display VF', 'o3-font-family-georgia': georgia, diff --git a/components/o-private-foundation/src/scss/tokens/sustainable-views.scss b/components/o-private-foundation/src/scss/tokens/sustainable-views.scss index 7b48ee5e24..24d62ff11a 100644 --- a/components/o-private-foundation/src/scss/tokens/sustainable-views.scss +++ b/components/o-private-foundation/src/scss/tokens/sustainable-views.scss @@ -4,8 +4,8 @@ */ $tokens: ( - '_o3-border-radius-1': 4px, - '_o3-border-radius-2': 6px, + 'o3-border-radius-1': 4px, + 'o3-border-radius-2': 6px, 'o3-spacing-5xs': 4px, 'o3-spacing-4xs': 8px, 'o3-spacing-3xs': 12px, diff --git a/components/o-private-foundation/src/scss/tokens/whitelabel.scss b/components/o-private-foundation/src/scss/tokens/whitelabel.scss index b754bb595a..83e7412bbe 100644 --- a/components/o-private-foundation/src/scss/tokens/whitelabel.scss +++ b/components/o-private-foundation/src/scss/tokens/whitelabel.scss @@ -5,8 +5,8 @@ $tokens: ( 'do-not-use': rgba(0, 0, 0, 0), - '_o3-border-radius-1': 4px, - '_o3-border-radius-2': 6px, + 'o3-border-radius-1': 4px, + 'o3-border-radius-2': 6px, 'o3-font-family-metric': 'metric 2 VF', 'o3-font-family-financier-display': 'financier display VF', 'o3-font-family-georgia': georgia, diff --git a/components/o-table/src/scss/_responsive-overflow.scss b/components/o-table/src/scss/_responsive-overflow.scss index ff0df48b75..4ff62e46ea 100644 --- a/components/o-table/src/scss/_responsive-overflow.scss +++ b/components/o-table/src/scss/_responsive-overflow.scss @@ -20,7 +20,6 @@ .o-table-control { display: inline-block; - background: _oTableGet('table-background'); pointer-events: all; transition: 1s opacity ease-in-out; } @@ -39,6 +38,7 @@ ) ); width: 100%; + border-radius: 0; } } @@ -103,23 +103,26 @@ position: absolute; content: ''; bottom: 0; - height: 40px; + height: 44px; pointer-events: none; border-color: oPrivateFoundationGet( '_o3-button-primary-standard-background' ); + background-color: oPrivateFoundationGet( + '_o3-button-primary-standard-background' + ); border-style: solid; width: 1px; } &:before { left: 0; - border-width: 0 40px 0 9px; + border-width: 0 44px 0 9px; } &:after { right: 0; - border-width: 0 9px 0 40px; + border-width: 0 9px 0 44px; } // Make more control leave space for arrows to dock left/right. diff --git a/components/o-tabs/src/scss/_buttontabs.scss b/components/o-tabs/src/scss/_buttontabs.scss index f9b06f3cc1..d7bbecf175 100644 --- a/components/o-tabs/src/scss/_buttontabs.scss +++ b/components/o-tabs/src/scss/_buttontabs.scss @@ -3,6 +3,7 @@ /// @access private @mixin _oTabsButtonTabs($button-tabs, $sizes) { .o-tabs--buttontabs[data-o-tabs--js] { + &[role='tablist'] { display: flex; // prevent spacing between tabs border-bottom: 1px solid; @@ -16,24 +17,25 @@ $theme-selector: '.o-tabs--#{$button-type}'; @if $button-theme { $theme-selector: selector-append( - $theme-selector, - '.o-tabs--#{$button-theme}' + $theme-selector, + '.o-tabs--#{$button-theme}' ); } + &#{$theme-selector} { &[role='tablist'] { // Find a tab list border colour based on standard button colours. $button-background: oPrivateFoundationGet( - '_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-background' + '_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-background' ); $button-border: oPrivateFoundationGet( - '_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-border' + '_o3-button-#{$button-type}-#{if($button-theme, $button-theme, 'standard')}-border' ); $tablist-border: if( - $button-border and opacity($button-border) != 0, - $button-border, - $button-background + $button-border and opacity($button-border) != 0, + $button-border, + $button-background ); border-color: $tablist-border; @@ -41,23 +43,41 @@ [role='tab'] { @include oPrivateButtonsContent( - ( - 'type': $button-type, - 'theme': $button-theme, - ) + ( + 'type': $button-type, + 'theme': $button-theme, + ) ); + border-radius: 0; + } + + [role='tab']:first-of-type { + border-top-left-radius: oPrivateFoundationGet('o3-border-radius-1'); + } + + [role='tab']:last-of-type { + border-top-right-radius: oPrivateFoundationGet('o3-border-radius-1'); } // Include tab button sizes. @if index($sizes, 'big') { &.o-tabs--big [role='tab'] { @include oPrivateButtonsContent( - ( - 'type': $button-type, - 'theme': $button-theme, - 'size': 'big', - ) + ( + 'type': $button-type, + 'theme': $button-theme, + 'size': 'big', + ) ); + border-radius: 0; + } + + &.o-tabs--big [role='tab']:first-of-type { + border-top-left-radius: oPrivateFoundationGet('o3-border-radius-1'); + } + + &.o-tabs--big [role='tab']:last-of-type{ + border-top-right-radius: oPrivateFoundationGet('o3-border-radius-1'); } } } diff --git a/components/o3-button/main.css b/components/o3-button/main.css index fb51d9d819..15dfd5f1a8 100644 --- a/components/o3-button/main.css +++ b/components/o3-button/main.css @@ -1,6 +1,6 @@ .o3-button { --_o3-button-min-width: 80px; - --_o3-button-min-height: 40px; + --_o3-button-min-height: 44px; --_o3-button-block-padding: var(--o3-spacing-4xs); --_o3-button-inline-padding-start: var(--o3-spacing-2xs); @@ -21,6 +21,7 @@ --o3-button-fluid: ; width: var(--o3-button-fluid, 100%); min-height: var(--_o3-button-min-height); + border-radius: var(--o3-border-radius-1); padding: 0 var(--_o3-button-inline-padding-end) 0 var(--_o3-button-inline-padding-start); display: inline-flex; @@ -391,6 +392,17 @@ .o3-button-group > .o3-button + .o3-button { margin-left: calc(var(--_o3-button-border-size) * -1); + border-radius: 0; +} +.o3-button-group > .o3-button:first-of-type { + border-radius: 0; + border-top-left-radius: var(--o3-border-radius-1); + border-bottom-left-radius: var(--o3-border-radius-1); +} +.o3-button-group > .o3-button:last-of-type { + border-radius: 0; + border-top-right-radius: var(--o3-border-radius-1); + border-bottom-right-radius: var(--o3-border-radius-1); } /* BUTTON ICON */ diff --git a/components/o3-foundation/src/css/tokens/core/_variables.css b/components/o3-foundation/src/css/tokens/core/_variables.css index a60c978f78..eb7a340faa 100644 --- a/components/o3-foundation/src/css/tokens/core/_variables.css +++ b/components/o3-foundation/src/css/tokens/core/_variables.css @@ -4,8 +4,8 @@ [data-o3-brand="core"] { - --_o3-border-radius-1: 4px; - --_o3-border-radius-2: 6px; + --o3-border-radius-1: 4px; + --o3-border-radius-2: 6px; --o3-color-palette-ft-pink: #fcd0b1; /* FT Pink is used for the FT logo */ --o3-color-palette-ft-grey: #333333; --o3-color-palette-white: #ffffff; diff --git a/components/o3-foundation/src/css/tokens/core/professional/_variables.css b/components/o3-foundation/src/css/tokens/core/professional/_variables.css index 84ea5d8ac7..dcbff58637 100644 --- a/components/o3-foundation/src/css/tokens/core/professional/_variables.css +++ b/components/o3-foundation/src/css/tokens/core/professional/_variables.css @@ -112,8 +112,8 @@ --o3-typography-use-case-body-content-emphasis-font-style: italic; /* Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */ --o3-typography-use-case-body-content-link-font-family: Georgia; /* Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */ --o3-typography-use-case-body-content-link-font-weight: Regular; /* Use this style only for the body copy of content pages, such as articles, live news and other content experience page. */ - --_o3-border-radius-1: 4px; - --_o3-border-radius-2: 6px; + --o3-border-radius-1: 4px; + --o3-border-radius-2: 6px; --o3-font-family-metric: 'metric 2 VF'; --o3-font-family-financier-display: 'financier display VF'; --o3-font-family-georgia: georgia; diff --git a/components/o3-foundation/src/css/tokens/internal/_variables.css b/components/o3-foundation/src/css/tokens/internal/_variables.css index b6ae4d2b8e..8a5223014c 100644 --- a/components/o3-foundation/src/css/tokens/internal/_variables.css +++ b/components/o3-foundation/src/css/tokens/internal/_variables.css @@ -120,8 +120,8 @@ --o3-font-size-metric2-negative-3: 10px; --o3-font-size-metric2-negative-2: 12px; --o3-font-size-metric2-negative-1: 14px; - --_o3-border-radius-1: 4px; - --_o3-border-radius-2: 6px; + --o3-border-radius-1: 4px; + --o3-border-radius-2: 6px; --o3-color-use-case-link-text: var(--o3-color-palette-teal); --o3-color-use-case-link-text-hover: var(--o3-color-palette-teal-30); --o3-color-use-case-link-inverse-text: var(--o3-color-palette-white); diff --git a/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css b/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css index db081ea504..5acf8beecd 100644 --- a/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css +++ b/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css @@ -4,8 +4,8 @@ [data-o3-brand="sustainable-views"] { - --_o3-border-radius-1: 4px; - --_o3-border-radius-2: 6px; + --o3-border-radius-1: 4px; + --o3-border-radius-2: 6px; --o3-spacing-5xs: 4px; --o3-spacing-4xs: 8px; --o3-spacing-3xs: 12px; diff --git a/components/o3-foundation/src/css/tokens/whitelabel/_variables.css b/components/o3-foundation/src/css/tokens/whitelabel/_variables.css index 09b146bb61..60b98eea91 100644 --- a/components/o3-foundation/src/css/tokens/whitelabel/_variables.css +++ b/components/o3-foundation/src/css/tokens/whitelabel/_variables.css @@ -4,8 +4,8 @@ [data-o3-brand="whitelabel"] { - --_o3-border-radius-1: 4px; - --_o3-border-radius-2: 6px; + --o3-border-radius-1: 4px; + --o3-border-radius-2: 6px; --o3-font-family-metric: 'metric 2 VF'; --o3-font-family-financier-display: 'financier display VF'; --o3-font-family-georgia: georgia; diff --git a/components/o3-social-sign-in/main.css b/components/o3-social-sign-in/main.css index ba5c762110..5071120a87 100644 --- a/components/o3-social-sign-in/main.css +++ b/components/o3-social-sign-in/main.css @@ -2,7 +2,7 @@ --o3-grid-columns-to-span-count: 4; max-width: var(--o3-grid-columns-to-span-width, 484px); width: 100%; - min-height: 40px; + min-height: 44px; padding: 0 var(--o3-spacing-m) 0 var(--o3-spacing-s); display: inline-flex; gap: var(--o3-spacing-s); @@ -16,6 +16,7 @@ font-family: var(--o3-font-family-metric), sans-serif; border: 1px solid var(--_o3-social-sign-in-border-color); + border-radius: var(--o3-border-radius-1); text-align: center; text-decoration: none; cursor: pointer; diff --git a/components/o3-social-sign-in/package.json b/components/o3-social-sign-in/package.json index e0103cba78..af81bb32d3 100644 --- a/components/o3-social-sign-in/package.json +++ b/components/o3-social-sign-in/package.json @@ -33,6 +33,6 @@ }, "homepage": "https://github.com/Financial-Times/origami#readme", "dependencies": { - "@financial-times/o3-foundation": "^2.0.0" + "@financial-times/o3-foundation": "^2.3.0" } } diff --git a/libraries/o3-tooling-token/build/core/_variables.js b/libraries/o3-tooling-token/build/core/_variables.js index fbf4468303..9f7fd24329 100644 --- a/libraries/o3-tooling-token/build/core/_variables.js +++ b/libraries/o3-tooling-token/build/core/_variables.js @@ -1,5 +1,5 @@ export default { - "_o3-border-radius-1": { + "o3-border-radius-1": { "shortName": "1", "value": "4px", "originalValue": "4", @@ -9,10 +9,10 @@ export default { "border-radius", "1" ], - "css": "--_o3-border-radius-1", + "css": "--o3-border-radius-1", "figma": "o3/border-radius/1" }, - "_o3-border-radius-2": { + "o3-border-radius-2": { "shortName": "2", "value": "6px", "originalValue": "6", @@ -22,7 +22,7 @@ export default { "border-radius", "2" ], - "css": "--_o3-border-radius-2", + "css": "--o3-border-radius-2", "figma": "o3/border-radius/2" }, "o3-color-palette-ft-pink": { diff --git a/libraries/o3-tooling-token/build/core/professional/_variables.js b/libraries/o3-tooling-token/build/core/professional/_variables.js index 6537fa44f3..c9dcf3e7d3 100644 --- a/libraries/o3-tooling-token/build/core/professional/_variables.js +++ b/libraries/o3-tooling-token/build/core/professional/_variables.js @@ -3183,7 +3183,7 @@ export default { "css": "--o3-typography-use-case-body-content-link-line-height", "figma": "o3/typography/use-case/body-content-link/lineHeight" }, - "_o3-border-radius-1": { + "o3-border-radius-1": { "shortName": "1", "value": "4px", "originalValue": "4", @@ -3193,10 +3193,10 @@ export default { "border-radius", "1" ], - "css": "--_o3-border-radius-1", + "css": "--o3-border-radius-1", "figma": "o3/border-radius/1" }, - "_o3-border-radius-2": { + "o3-border-radius-2": { "shortName": "2", "value": "6px", "originalValue": "6", @@ -3206,7 +3206,7 @@ export default { "border-radius", "2" ], - "css": "--_o3-border-radius-2", + "css": "--o3-border-radius-2", "figma": "o3/border-radius/2" }, "o3-font-family-metric": { diff --git a/libraries/o3-tooling-token/build/internal/_variables.js b/libraries/o3-tooling-token/build/internal/_variables.js index aef1561403..a53ddcd46e 100644 --- a/libraries/o3-tooling-token/build/internal/_variables.js +++ b/libraries/o3-tooling-token/build/internal/_variables.js @@ -3023,7 +3023,7 @@ export default { "css": "--o3-focus-use-case-outline-inverse-color", "figma": "o3/focus/use-case/outline/inverse/color" }, - "_o3-border-radius-1": { + "o3-border-radius-1": { "shortName": "1", "value": "4px", "originalValue": "4", @@ -3033,10 +3033,10 @@ export default { "border-radius", "1" ], - "css": "--_o3-border-radius-1", + "css": "--o3-border-radius-1", "figma": "o3/border-radius/1" }, - "_o3-border-radius-2": { + "o3-border-radius-2": { "shortName": "2", "value": "6px", "originalValue": "6", @@ -3046,7 +3046,7 @@ export default { "border-radius", "2" ], - "css": "--_o3-border-radius-2", + "css": "--o3-border-radius-2", "figma": "o3/border-radius/2" } }; diff --git a/libraries/o3-tooling-token/build/sustainable-views/_variables.js b/libraries/o3-tooling-token/build/sustainable-views/_variables.js index 841e11e425..f075aa371c 100644 --- a/libraries/o3-tooling-token/build/sustainable-views/_variables.js +++ b/libraries/o3-tooling-token/build/sustainable-views/_variables.js @@ -1,5 +1,5 @@ export default { - "_o3-border-radius-1": { + "o3-border-radius-1": { "shortName": "1", "value": "4px", "originalValue": "4", @@ -9,10 +9,10 @@ export default { "border-radius", "1" ], - "css": "--_o3-border-radius-1", + "css": "--o3-border-radius-1", "figma": "o3/border-radius/1" }, - "_o3-border-radius-2": { + "o3-border-radius-2": { "shortName": "2", "value": "6px", "originalValue": "6", @@ -22,7 +22,7 @@ export default { "border-radius", "2" ], - "css": "--_o3-border-radius-2", + "css": "--o3-border-radius-2", "figma": "o3/border-radius/2" }, "o3-spacing-5xs": { diff --git a/libraries/o3-tooling-token/build/whitelabel/_variables.js b/libraries/o3-tooling-token/build/whitelabel/_variables.js index 761b82585a..c3981e5b18 100644 --- a/libraries/o3-tooling-token/build/whitelabel/_variables.js +++ b/libraries/o3-tooling-token/build/whitelabel/_variables.js @@ -1,5 +1,5 @@ export default { - "_o3-border-radius-1": { + "o3-border-radius-1": { "shortName": "1", "value": "4px", "originalValue": "4", @@ -9,10 +9,10 @@ export default { "border-radius", "1" ], - "css": "--_o3-border-radius-1", + "css": "--o3-border-radius-1", "figma": "o3/border-radius/1" }, - "_o3-border-radius-2": { + "o3-border-radius-2": { "shortName": "2", "value": "6px", "originalValue": "6", @@ -22,7 +22,7 @@ export default { "border-radius", "2" ], - "css": "--_o3-border-radius-2", + "css": "--o3-border-radius-2", "figma": "o3/border-radius/2" }, "o3-font-family-metric": {