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

chore: Replace remaining pixel lengths with rems #1235

Merged
merged 5 commits into from
May 27, 2024
Merged

chore: Replace remaining pixel lengths with rems #1235

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dbc8c55
Replace all remaining pixel lengths with rems
VincentSmedinga May 21, 2024
692dcb6
Fix token value – offset is not a border
VincentSmedinga May 24, 2024
446f2a4
Relate text underline offset length to local font size
VincentSmedinga May 24, 2024
eb88683
Merge branch 'develop' into feature/DES-648-px-to-rem
VincentSmedinga May 27, 2024
ecff5ba
Simplify token
VincentSmedinga May 27, 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
8 changes: 4 additions & 4 deletions packages/css/documentation/coding-conventions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Still, we define its thickness and offset for the initial state.
```css
.ams-link {
text-decoration: none;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
text-decoration-thickness: 0.125rem;
text-underline-offset: 0.1875rem;

&:hover {
text-decoration: underline;
Expand All @@ -30,8 +30,8 @@ Still, we define its thickness and offset for the initial state.

&:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-thickness: 0.125rem;
text-underline-offset: 0.1875rem;
}
}
```
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
&:has(:focus-visible) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 1px;
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
outline-width: 0.0625rem;
}

/*
Expand Down
6 changes: 3 additions & 3 deletions packages/css/src/components/header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,21 +65,21 @@
}
}

// Temporary, will move to megamenu (and/or iconButton)
// Temporary – will move to Mega Menu and/or Icon Button
.ams-header__menu-button {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
background-position: center right;
background-repeat: no-repeat;
background-size: 19px 19px;
background-size: 1.1875rem 1.1875rem;
border: 0;
color: var(--ams-page-menu-item-color);
font-family: var(--ams-page-menu-item-font-family);
font-size: var(--ams-page-menu-item-font-size);
font-weight: var(--ams-page-menu-item-font-weight);
line-height: var(--ams-page-menu-item-line-height);
margin-block: 0;
padding-inline: 0 30px;
padding-inline: 0 1.875rem;
text-align: center;
touch-action: manipulation;
}
13 changes: 8 additions & 5 deletions packages/css/src/components/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@
}

.ams-switch__label {
--ams-switch-track-padding: 0.0625rem;

background-color: var(--ams-switch-background-color);
border-radius: calc(var(--ams-switch-thumb-width) * 2);
cursor: pointer;
display: inline-block;
outline-offset: var(--ams-switch-outline-offset);
padding-block: 1px;
padding-inline: 1px;
padding-block: var(--ams-switch-track-padding);
padding-inline: var(--ams-switch-track-padding);
transition: background-color 0.2s ease-in-out;
width: var(--ams-switch-width);

Expand Down Expand Up @@ -51,10 +53,11 @@
}

.ams-switch__input:checked + .ams-switch__label::before {
// The 2px is to account for the 1px padding-inline on the label
transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
transform: translate(
calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2 * var(--ams-switch-track-padding))
);
}

.ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
box-shadow: 0 0 0 var(--ams-switch-thumb-hover-box-shadow-spread-radius) var(--ams-switch-thumb-hover-color);
alimpens marked this conversation as resolved.
Show resolved Hide resolved
}
2 changes: 1 addition & 1 deletion proprietary/tokens/src/common/ams/focus.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"ams": {
"focus": {
"outline-offset": { "value": "2px" }
"outline-offset": { "value": "{ams.border.width.md}" }
alimpens marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
5 changes: 3 additions & 2 deletions proprietary/tokens/src/components/ams/switch.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
{
"ams": {
"switch": {
"font-family": { "value": "{ams.text.font-family}" },
"background-color": { "value": "{ams.color.neutral-grey3}" },
"font-family": { "value": "{ams.text.font-family}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"width": { "value": "3.5rem" },
"thumb": {
"background-color": { "value": "{ams.color.primary-white}" },
"width": { "value": "1.75rem" },
"height": { "value": "1.75rem" },
"hover": {
"box-shadow-spread-radius": { "value": "0.125rem" },
"color": { "value": "{ams.color.dark-blue}" }
}
},
"checked": {
"background-color": { "value": "{ams.color.primary-blue}" }
},
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"disabled": {
"background-color": { "value": "{ams.color.neutral-grey2}" }
}
Expand Down
8 changes: 4 additions & 4 deletions storybook/config/preview-body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
.ams-docs-figure > img {
display: block;
max-width: 100%;
outline: 1px dashed #e8e8e8;
outline: 0.0625rem dashed #e8e8e8;
}

.ams-docs-figure > figcaption {
Expand Down Expand Up @@ -46,7 +46,7 @@
}

.ams-docs-card {
border: 1px solid hotpink;
border: 0.0625rem solid hotpink;
display: flex;
flex-direction: column;
gap: 0.5rem;
Expand All @@ -56,7 +56,7 @@

.ams-docs-dark-background {
background-color: #004699;
margin: -16px; /* stylelint-disable-line */
padding: 16px; /* stylelint-disable-line */
margin: -1rem; /* stylelint-disable-line */
padding: 1rem; /* stylelint-disable-line */
}
</style>
4 changes: 2 additions & 2 deletions storybook/src/components/Link/Link.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const onDarkBackground: Story = {
},
decorators: [
(Story) => (
<div style={{ background: '#004699', display: 'inline', padding: '16px' }}>
<div style={{ background: '#004699', display: 'inline', padding: '1rem' }}>
<Story />
</div>
),
Expand All @@ -75,7 +75,7 @@ export const onLightBackground: Story = {
},
decorators: [
(Story) => (
<div style={{ background: '#FFE600', display: 'inline', padding: '16px' }}>
<div style={{ background: '#FFE600', display: 'inline', padding: '1rem' }}>
<Story />
</div>
),
Expand Down
2 changes: 1 addition & 1 deletion storybook/src/docs/components/color-palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

.ams-storybook-color-palette__example {
aspect-ratio: 16 / 9;
border: 1px solid rgb(0 0 0 / 12.5%);
border: 0.0625rem solid rgb(0 0 0 / 12.5%);
grid-area: example;
}

Expand Down
Loading