Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design tokens - create border radius tokens (HDS-3948) #2595

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Design tokens - create border radius tokens (HDS-3948) #2595

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7fad4ff
HDS-3948 Add global design tokens for border radius sizes
KristinLBradley Dec 10, 2024
1d278a5
HDS-3948 Regenerate design tokens in output
KristinLBradley Dec 10, 2024
b98ccb2
HDS-3948 Update border-radius values in styles to use design tokens
KristinLBradley Dec 10, 2024
4bb41a2
HDS-3948 Document code for border radius tokens
KristinLBradley Dec 11, 2024
52f1719
HDS-3948 Add changeset
KristinLBradley Dec 11, 2024
8fe90b2
HDS-3948 Use design token for button border-radius variable, use calc…
KristinLBradley Dec 11, 2024
89d38de
HDS-3948 Replace hard-coded border-radius values with tokens
KristinLBradley Dec 11, 2024
0c52154
HDS-3948 Update border-radius values to use tokens
KristinLBradley Dec 11, 2024
1ad5559
HDS-3948 Fix border-radisu value calculations for buttons
KristinLBradley Dec 11, 2024
75874c7
HDS-3948 Update border-radius for icon tile
KristinLBradley Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/hungry-mayflies-destroy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hashicorp/design-system-components": minor
"@hashicorp/design-system-tokens": minor
---

Added global tokens for border radius
KristinLBradley marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
.hds-accordion-item--type-card {
--hds-accordion-item-focus-ring-offset: 0;
background: var(--token-color-surface-primary);
border-radius: 6px;
border-radius: var(--token-border-radius-medium);

&.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
box-shadow: var(--token-surface-mid-box-shadow);
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/styles/components/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
line-height: 1em;
background-color: var(--token-color-surface-primary);
border: 1px solid var(--token-color-palette-neutral-200);
border-radius: 5px;
border-radius: var(--token-border-radius-small);
}

// Default styling for bare HTML links not using HDS::Link components
Expand Down Expand Up @@ -117,7 +117,7 @@
padding: 16px;
border-style: solid;
border-width: 1px;
border-radius: 6px;
border-radius: var(--token-border-radius-medium);
}

.hds-alert--type-compact {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/app-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
font-family: var(--token-typography-display-200-font-family);
line-height: var(--token-typography-display-200-line-height);
background-color: var(--token-color-surface-faint);
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);
transform: translateY(-200%);
transition: 0.6s ease-in-out;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ $hds-badge-colors-props: (
max-width: 100%;
vertical-align: middle;
border: $hds-badge-border-width solid transparent;
border-radius: 5px;
border-radius: var(--token-border-radius-small);
}

.hds-badge__icon {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/styles/components/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@use "../mixins/focus-ring" as *;

$hds-breadcrumb-item-height: 28px;
$hds-breadcrumb-item-border-radius: 5px;
$hds-breadcrumb-item-border-radius: var(--token-border-radius-small);
$hds-breadcrumb-item-visual-horizontal-padding: 4px;

// MAIN CONTAINER (NAV)
Expand Down Expand Up @@ -187,7 +187,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
max-width: 200px; // by design
padding: 6px 12px;
background-color: var(--token-color-surface-primary);
border-radius: 6px;
border-radius: var(--token-border-radius-medium);
box-shadow: var(--token-surface-high-box-shadow);

// the "popover" attributes comes with pre-defined styling so we need to override it
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/styles/components/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
border-radius: calc(#{$hds-dropdown-toggle-border-radius} - 2px); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌 🧑‍🍳👌


img {
width: 100%;
Expand Down Expand Up @@ -214,7 +214,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
min-width: 200px;
max-width: 400px;
background-color: var(--token-color-surface-primary);
border-radius: 6px;
border-radius: var(--token-border-radius-medium);
box-shadow: var(--token-surface-high-box-shadow);

// the "popover" attributes comes with pre-defined styling so we need to override it
Expand Down Expand Up @@ -369,7 +369,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
bottom: 0;
left: 10px;
z-index: -1;
border-radius: 5px;
border-radius: var(--token-border-radius-small);
content: "";
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
max-height: 95vh;
inset: 0;
margin: auto; // needed to center the modal dialog on the viewport
border-radius: 8px;
border-radius: var(--token-border-radius-large);
box-shadow: var(--token-surface-overlay-box-shadow);

// the `<dialog>` element uses a special "open" attribute to determine its visibility status
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/rich-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
max-height: none;
padding: 16px;
background: var(--token-color-surface-primary);
border-radius: 5px;
border-radius: var(--token-border-radius-small);
box-shadow: var(--token-surface-higher-box-shadow);

// fade-in animation (we can't do fade-out because `isOpen` removes the content of the bubble immediately from the DOM)
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/styles/components/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

@use "../mixins/focus-ring" as *;

$hds-table-border-radius: 6px;
$hds-table-border-radius: var(--token-border-radius-medium);
$hds-table-border-width: 1px;
$hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
$hds-table-border-color: var(--token-color-border-primary);
Expand Down Expand Up @@ -128,7 +128,7 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
color: var(--token-color-foreground-faint);
background-color: transparent;
border: 1px solid transparent;
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);

&:hover,
&.mock-hover {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/mixins/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

$hds-button-sizes: ( "small", "medium", "large" );
$hds-button-border-radius: 5px;
$hds-button-border-radius: var(--token-border-radius-small);
KristinLBradley marked this conversation as resolved.
Show resolved Hide resolved
$hds-button-border-width: 1px;
$hds-button-focus-border-width: 3px;

Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/dist/cloud-email/tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@

// Do not edit directly, this file was auto-generated.

$token-border-radius-x-small: 3px;
KristinLBradley marked this conversation as resolved.
Show resolved Hide resolved
$token-border-radius-small: 5px;
$token-border-radius-medium: 6px;
$token-border-radius-large: 8px;
$token-color-palette-blue-500: #1c345f;
$token-color-palette-blue-400: #0046d1;
$token-color-palette-blue-300: #0c56e9;
Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/dist/devdot/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*/

:root {
--token-border-radius-x-small: 3px;
--token-border-radius-small: 5px;
--token-border-radius-medium: 6px;
--token-border-radius-large: 8px;
--token-color-palette-blue-500: #1c345f;
--token-color-palette-blue-400: #0046d1;
--token-color-palette-blue-300: #0c56e9;
Expand Down
76 changes: 76 additions & 0 deletions packages/tokens/dist/docs/products/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,80 @@
[
{
"value": "3px",
"type": "size",
"original": {
"value": "3",
"type": "size"
},
"name": "token-border-radius-x-small",
"attributes": {
"category": "border",
"type": "radius",
"item": "x-small"
},
"path": [
"border",
"radius",
"x-small"
]
},
{
"value": "5px",
"type": "size",
"original": {
"value": "5",
"type": "size"
},
"name": "token-border-radius-small",
"attributes": {
"category": "border",
"type": "radius",
"item": "small"
},
"path": [
"border",
"radius",
"small"
]
},
{
"value": "6px",
"type": "size",
"original": {
"value": "6",
"type": "size"
},
"name": "token-border-radius-medium",
"attributes": {
"category": "border",
"type": "radius",
"item": "medium"
},
"path": [
"border",
"radius",
"medium"
]
},
{
"value": "8px",
"type": "size",
"original": {
"value": "8",
"type": "size"
},
"name": "token-border-radius-large",
"attributes": {
"category": "border",
"type": "radius",
"item": "large"
},
"path": [
"border",
"radius",
"large"
]
},
{
"value": "#1c345f",
"type": "color",
Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/dist/marketing/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*/

:root {
--token-border-radius-x-small: 3px;
--token-border-radius-small: 5px;
--token-border-radius-medium: 6px;
--token-border-radius-large: 8px;
--token-color-palette-blue-500: #1c345f;
--token-color-palette-blue-400: #0046d1;
--token-color-palette-blue-300: #0c56e9;
Expand Down
88 changes: 88 additions & 0 deletions packages/tokens/dist/marketing/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,92 @@
{
"border": {
"radius": {
"x-small": {
"value": "3px",
"type": "size",
"filePath": "src/global/border/radius.json",
"isSource": true,
"original": {
"value": "3",
"type": "size"
},
"name": "token-border-radius-x-small",
"attributes": {
"category": "border",
"type": "radius",
"item": "x-small"
},
"path": [
"border",
"radius",
"x-small"
]
},
"small": {
"value": "5px",
"type": "size",
"filePath": "src/global/border/radius.json",
"isSource": true,
"original": {
"value": "5",
"type": "size"
},
"name": "token-border-radius-small",
"attributes": {
"category": "border",
"type": "radius",
"item": "small"
},
"path": [
"border",
"radius",
"small"
]
},
"medium": {
"value": "6px",
"type": "size",
"filePath": "src/global/border/radius.json",
"isSource": true,
"original": {
"value": "6",
"type": "size"
},
"name": "token-border-radius-medium",
"attributes": {
"category": "border",
"type": "radius",
"item": "medium"
},
"path": [
"border",
"radius",
"medium"
]
},
"large": {
"value": "8px",
"type": "size",
"filePath": "src/global/border/radius.json",
"isSource": true,
"original": {
"value": "8",
"type": "size"
},
"name": "token-border-radius-large",
"attributes": {
"category": "border",
"type": "radius",
"item": "large"
},
"path": [
"border",
"radius",
"large"
]
}
}
},
"color": {
"palette": {
"blue-500": {
Expand Down
4 changes: 4 additions & 0 deletions packages/tokens/dist/products/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
*/

:root {
--token-border-radius-x-small: 3px;
--token-border-radius-small: 5px;
Copy link
Contributor

@didoo didoo Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[issue/blocker]: comment for @jorytindall and @hashicorp/hds-design in general: this is the first case of t-shirt naming for our design tokens; what if we need to add a 4px border radius in the future? what would be the name?

should we use a different naming convention? maybe

--token-border-radius-300: 3px;
--token-border-radius-500: 5px;
--token-border-radius-600: 6px;
--token-border-radius-800: 8px;

or maybe simply:

--token-border-radius-3: 3px;
--token-border-radius-5: 5px;
--token-border-radius-6: 6px;
--token-border-radius-8: 8px;

(I know, the last one is controversial, but that's what has been done for the spacing variables in Figma)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me surface this to the broader team for discussion, it's a valid point. We discussed initially what to do here and I can't quite remember what the reasoning was.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related Slack discussion thread: https://hashicorp.slack.com/archives/C025N5V4PFZ/p1734029185471359

--token-border-radius-medium: 6px;
--token-border-radius-large: 8px;
--token-color-palette-blue-500: #1c345f;
--token-color-palette-blue-400: #0046d1;
--token-color-palette-blue-300: #0c56e9;
Expand Down
22 changes: 22 additions & 0 deletions packages/tokens/src/global/border/radius.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"border": {
"radius": {
"x-small": {
"value": "3",
"type": "size"
},
"small": {
"value": "5",
"type": "size"
},
"medium": {
"value": "6",
"type": "size"
},
"large": {
"value": "8",
"type": "size"
}
}
}
}
Loading
Loading