Make all font sizes accessible + add docs about font-size() mixin (https://github.com/woocommerce/woocommerce-blocks/pull/2291)
* Switch all font-sizes to use the mixin * Add notice in coding-guidelines to use accessible font sizes * Fix label alignment in forms with big font-sizes * Fix Stripe input boxes font-size not being responsive * Fix select overflowing in small font sizes * Add rem function from woocommerce/woocommerce-blocks#2320 * Make the font-size() mixin set relative line-height values * Convert several magic numbers to use the new mixins * Update docs * Update input/select paddings to use the rem mixin * Add lineHeight comment * Interpolate rem() mixin inside calc * Make input padding use only relative units
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
3122447ae4
commit
9e7623567e
|
|
@ -1,9 +1,9 @@
|
|||
// Rem output with px fallback
|
||||
// Converts a font-size in px to rem and optionally sets a relative line-height.
|
||||
@mixin font-size($sizeValue: 16, $lineHeight: false ) {
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ($sizeValue / 16) + rem;
|
||||
@if ($lineHeight) {
|
||||
line-height: $lineHeight;
|
||||
line-height: $lineHeight / $sizeValue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,3 +118,7 @@
|
|||
// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
|
||||
-ms-word-break: break-all;
|
||||
}
|
||||
|
||||
@function rem($size, $base: 16px ) {
|
||||
@return $size / $base * 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
}
|
||||
|
||||
.wc-block-checkout__no-payment-methods-placeholder-description {
|
||||
@include font-size(13);
|
||||
display: block;
|
||||
margin: 0.25em 0 1em 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,17 +69,16 @@
|
|||
}
|
||||
|
||||
.wc-block-gateway-input {
|
||||
@include font-size(16, 22);
|
||||
background-color: #fff;
|
||||
padding: $gap-small $gap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-gray;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
height: 48px;
|
||||
height: 3em;
|
||||
color: $input-text-active;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -92,13 +91,12 @@
|
|||
}
|
||||
|
||||
label {
|
||||
@include font-size(16, 22);
|
||||
position: absolute;
|
||||
transform: translateY(#{$gap-small});
|
||||
transform: translateY(0.75em);
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform-origin: top left;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $gray-50;
|
||||
transition: transform 200ms ease;
|
||||
margin: 0 $gap;
|
||||
|
|
@ -130,7 +128,7 @@
|
|||
|
||||
.wc-block-gateway-input.focused.empty,
|
||||
.wc-block-gateway-input:not(.empty) {
|
||||
padding: $gap-large $gap $gap-smallest;
|
||||
padding: rem($gap-large) $gap rem($gap-smallest);
|
||||
& + label {
|
||||
transform: translateY(#{$gap-smallest}) scale(0.75);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
.wc-block-select {
|
||||
height: 48px;
|
||||
height: 3em;
|
||||
position: relative;
|
||||
margin-bottom: $gap-large;
|
||||
|
||||
label {
|
||||
@include font-size(16);
|
||||
@include font-size(16, 22);
|
||||
position: absolute;
|
||||
transform: translateY(#{$gap-small});
|
||||
transform: translateY(0.75em);
|
||||
transform-origin: top left;
|
||||
transition: all 200ms ease;
|
||||
line-height: 22px;
|
||||
color: $gray-50;
|
||||
z-index: 1;
|
||||
margin: 0 $gap;
|
||||
|
|
@ -48,7 +47,7 @@
|
|||
letter-spacing: inherit;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
padding: $gap-large $gap $gap-smallest;
|
||||
padding: rem($gap-large) $gap rem($gap-smallest);
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
label {
|
||||
@include font-size(16);
|
||||
position: absolute;
|
||||
transform: translateY(#{$gap-small});
|
||||
transform: translateY(0.75em);
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform-origin: top left;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
&.is-active input[type="url"],
|
||||
&.is-active input[type="text"],
|
||||
&.is-active input[type="email"] {
|
||||
padding: $gap-large $gap $gap-smallest;
|
||||
padding: rem($gap-large) $gap rem($gap-smallest);
|
||||
}
|
||||
|
||||
&.has-error input {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
display: block; /* Disable flex box */
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
.woocommerce-search-list__search {
|
||||
|
|
@ -22,11 +22,10 @@
|
|||
padding-top: 0;
|
||||
}
|
||||
.wc-block-attribute-filter__add_attribute_button {
|
||||
@include font-size(14, 24);
|
||||
margin: 0 0 1em;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.editor-styles-wrapper {
|
||||
.wp-block h4.wc-block-checkout-step__title {
|
||||
font-size: 16px;
|
||||
@include font-size(16);
|
||||
line-height: 24px;
|
||||
margin: 0 $gap-small 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
}
|
||||
|
||||
.wc-block-checkout__no-shipping-placeholder-description {
|
||||
@include font-size(13);
|
||||
display: block;
|
||||
margin: 0.25em 0 1em 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,15 +24,14 @@
|
|||
display: block; /* Disable flex box */
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
.wc-block-price-slider__add_product_button {
|
||||
@include font-size(14, 24);
|
||||
margin: 0 0 1em;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -63,16 +63,16 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
@include font-size(13);
|
||||
margin: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 8px;
|
||||
padding: rem(8, 13);
|
||||
color: #555d66;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
border-radius: rem(4, 13);
|
||||
svg {
|
||||
fill: currentColor;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
.wc-block-product-search__button {
|
||||
@include font-size(13);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
margin: 0 0 0 6px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -13,15 +13,14 @@
|
|||
display: block; /* Disable flex box */
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
.wc-block-products__add_product_button {
|
||||
@include font-size(14, 24);
|
||||
margin: 0 0 1em;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,27 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
|
|||
* @typedef {import('../stripe-utils/type-defs').StripeElementOptions} StripeElementOptions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Returns the CSS value of the specified property in the document element.
|
||||
*
|
||||
* @param {string} property Name of the property to retrieve the style
|
||||
* value from.
|
||||
* @param {string} defaultValue Fallback value if the value for the property
|
||||
* could not be retrieved.
|
||||
*
|
||||
* @return {string} The style value of that property in the document element.
|
||||
*/
|
||||
const getDocumentStyle = ( property, defaultValue ) => {
|
||||
let documentStyle = {};
|
||||
if (
|
||||
typeof window === 'object' &&
|
||||
typeof window.getComputedStyle === 'function'
|
||||
) {
|
||||
documentStyle = window.getComputedStyle( document.documentElement );
|
||||
}
|
||||
return documentStyle[ property ] || defaultValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Default options for the stripe elements.
|
||||
*/
|
||||
|
|
@ -15,7 +36,8 @@ const elementOptions = {
|
|||
base: {
|
||||
iconColor: '#666EE8',
|
||||
color: '#31325F',
|
||||
fontSize: '15px',
|
||||
fontSize: getDocumentStyle( 'fontSize', '16px' ),
|
||||
lineHeight: 1.375, // With a font-size of 16px, line-height will be 22px.
|
||||
'::placeholder': {
|
||||
color: '#fff',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -82,3 +82,11 @@ Or exclude blocks of CSS:
|
|||
The build process will split SCSS from within the blocks library directory into two separate CSS files when Webpack runs.
|
||||
|
||||
Styles placed in a `style.scss` file will be built into `build/style.css`, to load on the front end theme as well as in the editor. If you need additional styles specific to the block's display in the editor, add them to an `editor.scss`.
|
||||
|
||||
### Accessible font sizes
|
||||
|
||||
We want our font sizes to be declared with rem or em units instead of hardcoded px. That's important for accessibility because it allows users to make the text bigger and easier to read.
|
||||
|
||||
We have a mixin named `font-size()` that given a number of the font size in px, it converts it to rem. It accepts a second parameter which is the line height, it will be divided by the font-size and the result will be the relative units for the `line-height` CSS property.
|
||||
|
||||
In parallel to that, consider whether other size/distance units in your CSS need to be rem/em instead of px. In general, rem/em should be preferred if it doesn't break the design with big font sizes. There is another mixin named `rem()` that helps converting px units to rem (given a px size and optionally a base size).
|
||||
|
|
|
|||
Loading…
Reference in New Issue