feat: introduce rounded borders to buttons

Financial-Times · Dec 30, 2024 · 50b2c82 · 50b2c82
1 parent d2e156d
commit 50b2c82
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 44 deletions.
diff --git 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": "source",
@@ -436,7 +436,7 @@
       "internal/components/o3-form/use-case": "source",
       "internal/base/typography": "source",
       "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": "source",
@@ -668,7 +668,7 @@
       "sustainable-views/components/o3-form/use-case": "source",
       "sustainable-views/base/typography": "source",
       "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-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
@@ -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-icons-ft-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-icons-ft-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-icons-ft-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
@@ -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
@@ -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
@@ -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/o3-button/main.css b/components/o3-button/main.css
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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
@@ -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
@@ -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
@@ -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": {