Skip to content

Commit

Permalink
Merge pull request #86 from fortanix/mkrause/250103-round-px
Browse files Browse the repository at this point in the history 
Fix fractional px value rounding issues
  • Loading branch information
@mkrause
mkrause authored Jan 6, 2025
2 parents 52146e4 + 1399a24 commit 158dd2f
Show file tree
Hide file tree
Showing 11 changed files with 29 additions and 31 deletions.
2 changes: 1 addition & 1 deletion src/components/containers/Accordion/Accordion.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@

.bk-accordion__item + .bk-accordion__item {
--bk-disclosure-border-radius-top: 0;
border-top-width: 0;
}
.bk-accordion__item:has(+ .bk-accordion__item) {
--bk-disclosure-border-radius-bottom: 0;
border-bottom-width: 0;
}
}
}
2 changes: 1 addition & 1 deletion src/components/containers/Banner/Banner.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
overflow: hidden; // Banners shouldn't scroll (max height on a banner doesn't really make sense)

padding-block: bk.$spacing-2;
padding-inline: bk.$spacing-4 - bk.$radius-2;
padding-inline: calc(bk.$spacing-4 - bk.$radius-2);
padding-inline-start: var(--bk-banner-indent); // Indent all of the content (e.g. for when the message wraps)

border: bk.$size-1 var(--bk-banner-color-foreground) solid;
Expand Down
6 changes: 3 additions & 3 deletions src/components/containers/Dialog/Dialog.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
top: 0;
z-index: 1;

padding-block: var(--bk-dialog-padding-block) (bk.$spacing-7 / 2);
padding-block: var(--bk-dialog-padding-block) calc(bk.$spacing-7 / 2);
padding-inline: var(--bk-dialog-padding-inline);
background: var(--bk-dialog-background-color);

Expand All @@ -58,7 +58,7 @@
.bk-dialog__content {
flex: 1;

margin-block: (bk.$spacing-7 / 2) (bk.$spacing-7 / 2);
margin-block: calc(bk.$spacing-7 / 2) calc(bk.$spacing-7 / 2);
padding-inline: var(--bk-dialog-padding-inline);
}

Expand All @@ -67,7 +67,7 @@
bottom: 0;
z-index: 1;

padding-block: (bk.$spacing-7 / 2) bk.$spacing-9;
padding-block: calc(bk.$spacing-7 / 2) bk.$spacing-9;
padding-inline: var(--bk-dialog-padding-inline);
// In Figma, actions have an indent. But that might be only if the content itself has an indent, need to check.
//padding-inline-start: calc(var(--bk-dialog-padding-inline) + bk.$spacing-8);
Expand Down
4 changes: 2 additions & 2 deletions src/components/forms/controls/DatePicker/DatePicker.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin-right: -$caret-width;
margin-right: calc(-1 * $caret-width);
}

.bk-date-picker--input {
Expand All @@ -25,7 +25,7 @@
width: $caret-width;
height: $caret-width;
position: relative;
left: -$caret-width;
left: calc(-1 * $caret-width);
top: bk.rem-from-px(-1);
}

Expand Down
1 change: 0 additions & 1 deletion src/components/forms/fields/CheckboxField/CheckboxField.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
margin-bottom: bk.$spacing-1;

.bk-checkbox-field__title__icon {
font-size: 18px;
margin-left: bk.$spacing-1;
}

Expand Down
1 change: 0 additions & 1 deletion src/components/forms/fields/RadioField/RadioField.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
margin-bottom: bk.$spacing-1;

.bk-radio-field__title__icon {
font-size: 18px;
margin-left: bk.$spacing-1;
}

Expand Down
2 changes: 1 addition & 1 deletion src/styling/defs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,5 +59,5 @@
}

@function rem-from-px($size-in-px) {
@return math.div($size-in-px, 14) * 1rem;
@return round(math.div($size-in-px, 14) * 1rem, 1px);
}
2 changes: 1 addition & 1 deletion src/styling/global/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
// https://royalfig.github.io/fluid-typography-calculator
//font-size: clamp(0.8rem, 0.76rem + 0.19999999999999996vw, 1rem);
// https://utopia.fyi/type/calculator?c=320,12,1.2,1440,14,1.25,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
font-size: clamp(0.75rem, 0.7143rem + 0.1786vi, 0.875rem); // 1rem ~ 14px at 1440px max viewport size
font-size: round(clamp(0.75rem, 0.7143rem + 0.1786vi, 0.875rem), 1px); // 1rem ~ 14px at 1440px max viewport size

/* https://css-tricks.com/how-to-tame-line-height-in-css/ */
line-height: 1.6;
Expand Down
1 change: 0 additions & 1 deletion src/styling/global/reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
@mixin styles {
@include meta.load-css('../lib/reset.css');


/* Custom reset overrides */

// :focus-visible {
Expand Down
36 changes: 18 additions & 18 deletions src/styling/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,24 @@ $sizing-xxl: $sizing-9 !default;

// NEW
// Reference: 1rem ~ 14px (at max 1440px size, and with default 1rem=16px browser font size)
$spacing-1: math.div(4, 14) * 1rem !default; // ~4px
$spacing-2: math.div(8, 14) * 1rem !default; // ~8px
$spacing-3: math.div(12, 14) * 1rem !default; // ~12px
$spacing-4: math.div(16, 14) * 1rem !default; // ~16px
$spacing-5: math.div(18, 14) * 1rem !default; // ~18px
$spacing-6: math.div(20, 14) * 1rem !default; // ~20px
$spacing-7: math.div(24, 14) * 1rem !default; // ~24px
$spacing-8: math.div(32, 14) * 1rem !default; // ~32px
$spacing-9: math.div(40, 14) * 1rem !default; // ~40px
$spacing-10: math.div(48, 14) * 1rem !default; // ~48px
$spacing-11: math.div(64, 14) * 1rem !default; // ~64px
$spacing-12: math.div(80, 14) * 1rem !default; // ~80px
$spacing-13: math.div(96, 14) * 1rem !default; // ~96px
$spacing-14: math.div(128, 14) * 1rem !default; // ~128px
$spacing-15: math.div(160, 14) * 1rem !default; // ~160px
$spacing-16: math.div(192, 14) * 1rem !default; // ~192px
$spacing-17: math.div(224, 14) * 1rem !default; // ~224px
$spacing-18: math.div(256, 14) * 1rem !default; // ~256px
$spacing-1: round(math.div(4, 14) * 1rem, 1px) !default; // ~4px
$spacing-2: round(math.div(8, 14) * 1rem, 1px) !default; // ~8px
$spacing-3: round(math.div(12, 14) * 1rem, 1px) !default; // ~12px
$spacing-4: round(math.div(16, 14) * 1rem, 1px) !default; // ~16px
$spacing-5: round(math.div(18, 14) * 1rem, 1px) !default; // ~18px
$spacing-6: round(math.div(20, 14) * 1rem, 1px) !default; // ~20px
$spacing-7: round(math.div(24, 14) * 1rem, 1px) !default; // ~24px
$spacing-8: round(math.div(32, 14) * 1rem, 1px) !default; // ~32px
$spacing-9: round(math.div(40, 14) * 1rem, 1px) !default; // ~40px
$spacing-10: round(math.div(48, 14) * 1rem, 1px) !default; // ~48px
$spacing-11: round(math.div(64, 14) * 1rem, 1px) !default; // ~64px
$spacing-12: round(math.div(80, 14) * 1rem, 1px) !default; // ~80px
$spacing-13: round(math.div(96, 14) * 1rem, 1px) !default; // ~96px
$spacing-14: round(math.div(128, 14) * 1rem, 1px) !default; // ~128px
$spacing-15: round(math.div(160, 14) * 1rem, 1px) !default; // ~160px
$spacing-16: round(math.div(192, 14) * 1rem, 1px) !default; // ~192px
$spacing-17: round(math.div(224, 14) * 1rem, 1px) !default; // ~224px
$spacing-18: round(math.div(256, 14) * 1rem, 1px) !default; // ~256px

// these sizes do not match Figma variables
$size-1: math.div(1, 14) * 1rem !default; // ~1px
Expand Down
3 changes: 2 additions & 1 deletion stylelint.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ export default {
],

// Expressions
//...
// Workaround for `round()`, re-enable once https://github.com/stylelint-scss/stylelint-scss/pull/1097 lands
'scss/no-global-function-names': null,

// CSS extensions (e.g. CSS modules, or future CSS)
//'property-no-unknown': [true, { ignoreProperties: [] }],
Expand Down

0 comments on commit 158dd2f

Please sign in to comment.