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

Merged
merged 11 commits into from
Jan 8, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ce15fcc
HDS-3948 Add global design tokens for border radius sizes
KristinLBradley Dec 10, 2024
b4960b4
HDS-3948 Regenerate design tokens in output
KristinLBradley Dec 10, 2024
acf7860
HDS-3948 Update border-radius values in styles to use design tokens
KristinLBradley Dec 10, 2024
46f8151
HDS-3948 Document code for border radius tokens
KristinLBradley Dec 11, 2024
698c16c
HDS-3948 Add changeset
KristinLBradley Dec 11, 2024
a152602
HDS-3948 Use design token for button border-radius variable, use calc…
KristinLBradley Dec 11, 2024
88f6e89
HDS-3948 Replace hard-coded border-radius values with tokens
KristinLBradley Dec 11, 2024
14c84b6
HDS-3948 Update border-radius values to use tokens
KristinLBradley Dec 11, 2024
98e3ecc
HDS-3948 Fix border-radisu value calculations for buttons
KristinLBradley Dec 11, 2024
586af93
HDS-3948 Update border-radius for icon tile
KristinLBradley Dec 16, 2024
8ff0703
Migrate borders guideline content from #2636
jorytindall Jan 8, 2025
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
6 changes: 3 additions & 3 deletions packages/components/src/styles/@hashicorp/design-system-power-select-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,15 @@
&.ember-basic-dropdown-content--in-place {
margin-top: -3px;
border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: var(--token-border-radius-medium);
border-bottom-left-radius: var(--token-border-radius-medium);
box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow);
}

&.ember-basic-dropdown-content--above {
margin-top: 3px;
border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
border-radius: 6px 6px 0 0;
border-radius: var(--token-border-radius-medium) var(--token-border-radius-medium) 0 0;
box-shadow: none;
}
}
Expand Down
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 @@ -59,7 +59,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 @@ -116,7 +116,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 @@ -39,7 +39,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
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/card/container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

$hds-card-container-style: ( "surface", "elevation" );
$hds-card-container-levels: ( "base", "mid", "high" );
$hds-card-container-border-radius: 6px;
$hds-card-container-border-radius: var(--token-border-radius-medium);

.hds-card__container {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/code-block/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $hds-code-block-code-padding: 16px;

// isStandalone
.hds-code-block--is-standalone {
border-radius: 6px;
border-radius: var(--token-border-radius-medium);
}

// hasLineWrapping
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/copy/snippet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
padding: 6px 4px;
text-align: left;
border: 1px solid transparent;
border-radius: 5px;
border-radius: var(--token-border-radius-small);
cursor: pointer;
}

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/form/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

option {
margin: 2px auto;
border-radius: 3px;
border-radius: var(--token-border-radius-x-small);

&:hover {
color: var(--token-color-foreground-action);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/icon-tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $hds-icon-tile-border-width: 1px;
position: relative;
display: flex;
border: $hds-icon-tile-border-width solid transparent;
border-radius: 4px;
border-radius: var(--token-border-radius-medium);
}

.hds-icon-tile__icon,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/link/standalone.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
@use "../../mixins/focus-ring" as *;

$hds-link-standalone-sizes: ( "small", "medium", "large" );
$hds-link-standalone-focus-border-radius: 5px;
$hds-link-standalone-focus-border-radius: var(--token-border-radius-small);
$hds-link-standalone-border-width: 1px;

.hds-link-standalone {
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
2 changes: 1 addition & 1 deletion packages/components/src/styles/components/side-nav/a11y-refocus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,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
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 @@ -116,7 +116,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
6 changes: 3 additions & 3 deletions packages/components/src/styles/mixins/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@use "sass:map";

$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 Expand Up @@ -86,7 +86,7 @@ $hds-button-size-props: (
left: -$shift;
z-index: -1;
border: $hds-button-focus-border-width solid transparent;
border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width});
content: "";
}
}
Expand Down Expand Up @@ -121,7 +121,7 @@ $hds-button-size-props: (
bottom: -$shift;
left: -$shift;
border-color: var(--token-color-focus-action-external);
border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width} + 2px);
}
}

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
Loading
Loading