Update typography, normalize and spacing to align to new design system (#42)
This commit is contained in:
Patricio Beltran
GitHub
Родитель
05c8ef5c8e
Коммит
13e8cba5df
19
CHANGELOG.md
19
CHANGELOG.md
|
|
@ -1,5 +1,24 @@
|
|||
# CHANGELOG
|
||||
|
||||
## v8.1.0
|
||||
### Changed
|
||||
- Updated `_normalize.scss` to use new spacing and sizing constants.
|
||||
- Removed unused dl and dt normalization.
|
||||
- Removed unused `--font-family-din-regular`
|
||||
- **[BREAKING]** Changed `--font-family-light` to `--font-family-semilight`
|
||||
- Marked old spacing classes as deprecated in favor of new ones.
|
||||
- Marked `%semibold` as deprecated in favor of `.semibold` css class and added a `.semilight` class
|
||||
- **[BREAKING]** Changed `--line-weight-headings` to `--line-weight-semibold`
|
||||
- **[BREAKING]** Changed `--line-weight-hero` to `--line-weight-semilight`
|
||||
- **[BREAKING]** Moved media query breakpoints to its own `_responsive.scss` file, updated breakpoints to align to fluent and added mobile first mixins to easily use these breakpoints.
|
||||
- Removed unused `box-sizing` and `tab-focus` mixins.
|
||||
- Updated `--font-size-hero`, `--line-height-hero`, `--font-size-h1` and `--line-height-h1` to align to fluent.
|
||||
|
||||
### Added
|
||||
- Added new spacing and sizing constants to align to new design system.
|
||||
- Added `.focus-visible` class to unify keyboard only focus behavior where supported (fallback to regular focus behavior)
|
||||
- Added IoTC internal data viz colors for system defined visualization coloring.
|
||||
|
||||
## v8.0.6
|
||||
### Changed
|
||||
- Updated `--color-search-background` to `--color-light-transparent-tenth` in both light and dark
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@microsoft/azure-iot-ux-fluent-css",
|
||||
"version": "8.0.6",
|
||||
"version": "8.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@microsoft/azure-iot-ux-fluent-css",
|
||||
"description": "Azure IoT common styles library for CSS, Colors and Themes",
|
||||
"version": "8.0.6",
|
||||
"version": "8.1.0",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"prepublish": "npm run build:codegen && npm run codegen"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^8.0.0"
|
||||
"node": "^12.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"normalize.css": "^8.0.1"
|
||||
|
|
|
|||
|
|
@ -2,18 +2,42 @@
|
|||
* General constants
|
||||
*/
|
||||
|
||||
// Gutters
|
||||
// Spacing
|
||||
|
||||
$gutter-xxsmall: 0.5rem;
|
||||
$gutter-xsmall: 0.75rem;
|
||||
$gutter-small: 1rem;
|
||||
$gutter-normal: 1.25rem;
|
||||
$gutter-big: 2rem;
|
||||
$gutter-bigger: 2.5rem;
|
||||
$space-base: 0.25rem;
|
||||
$space-xs: 0.5rem;
|
||||
$space-sm: 1rem;
|
||||
$space-md: 1.5rem;
|
||||
$space-lg: 2rem;
|
||||
$space-xl: 4rem;
|
||||
|
||||
// Grid size
|
||||
// Sizes
|
||||
|
||||
$grid-size: 0.25rem;
|
||||
$size-10: 0.75rem;
|
||||
$size-20: 1rem;
|
||||
$size-30: 1.5rem;
|
||||
$size-40: 2rem;
|
||||
$size-50: 2.75rem;
|
||||
$size-60: 3rem;
|
||||
$size-70: 4rem;
|
||||
$size-80: 8rem;
|
||||
$size-90: 10rem;
|
||||
$size-100: 12.5rem;
|
||||
$size-110: 16rem;
|
||||
$size-120: 21.25rem;
|
||||
$size-130: 40.25rem;
|
||||
$size-140: 58.75rem;
|
||||
|
||||
// Max sizes
|
||||
|
||||
$max-size-10: 15rem;
|
||||
$max-size-20: 20rem;
|
||||
$max-size-30: 25rem;
|
||||
$max-size-40: 30rem;
|
||||
$max-size-50: 40rem;
|
||||
$max-size-60: 50rem;
|
||||
$max-size-70: 60rem;
|
||||
$max-size-80: 70rem;
|
||||
|
||||
// Z Index
|
||||
|
||||
|
|
@ -33,6 +57,33 @@ $z-index-flyouts-dropdown: $z-index-flyout-layer + 6 * $z-index-medium-step;
|
|||
$z-index-flyouts-inline-btn: $z-index-flyout-layer + 7 * $z-index-medium-step;
|
||||
$z-index-tutorial-tips: $z-index-flyout-layer + 8 * $z-index-medium-step;
|
||||
|
||||
/// Interaction constants
|
||||
|
||||
$interaction-timing: 200ms;
|
||||
$clickable-scale: 0.9;
|
||||
|
||||
/********* [DEPRECATED] *************************/
|
||||
|
||||
// Gutters
|
||||
|
||||
$gutter-xxsmall: 0.5rem;
|
||||
$gutter-xsmall: 0.75rem;
|
||||
$gutter-small: 1rem;
|
||||
$gutter-normal: 1.25rem;
|
||||
$gutter-big: 2rem;
|
||||
$gutter-bigger: 2.5rem;
|
||||
|
||||
// Grid size
|
||||
|
||||
$grid-size: 0.25rem;
|
||||
|
||||
// Styles
|
||||
|
||||
%semibold {
|
||||
font-family: var(--font-family-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
// The basis for larger building blocks
|
||||
|
||||
$input-height: 8*$grid-size;
|
||||
|
|
@ -57,22 +108,4 @@ $layout-chart-y-axis-width: $gutter-bigger;
|
|||
$layout-chart-x-axis-height: $gutter-big;
|
||||
$layout-chart-axis-tick-size: 0.375rem;
|
||||
|
||||
// Media query breakpoints:
|
||||
|
||||
$screen-xs: 320px;
|
||||
$screen-sm: 480px;
|
||||
$screen-md: 640px;
|
||||
$screen-lg: 1024px;
|
||||
$screen-xl: 1366px;
|
||||
|
||||
/// Interaction constants
|
||||
|
||||
$interaction-timing: 200ms;
|
||||
$clickable-scale: 0.9;
|
||||
|
||||
// Styles
|
||||
|
||||
%semibold {
|
||||
font-family: var(--font-family-semibold);
|
||||
font-weight: 600;
|
||||
}
|
||||
/*************************************************/
|
||||
|
|
@ -8,23 +8,4 @@
|
|||
:root[dir='rtl'] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Box sizing
|
||||
///
|
||||
/// @param {String} $boxmodel - The box model e.g. border-box
|
||||
///
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
|
||||
/// WebKit-style focus
|
||||
///
|
||||
@mixin tab-focus() {
|
||||
// WebKit-specific. Other browsers will keep their default outline style.
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
@import "depth";
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "responsive";
|
||||
|
||||
:root[dir='rtl'] {
|
||||
direction: rtl;
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: var(--font-family-default);
|
||||
font-size: var(--font-size-default);
|
||||
line-height: var(--line-height-default);
|
||||
|
|
@ -35,13 +37,10 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
|
|
@ -58,41 +57,37 @@
|
|||
// Headings
|
||||
// -------------------------
|
||||
|
||||
.hero {
|
||||
font-family: var(--font-family-light);
|
||||
.type-hero {
|
||||
font-family: var(--font-family-semilight);
|
||||
font-weight: var(--font-weight-semilight);
|
||||
|
||||
font-size: var(--font-size-hero);
|
||||
line-height: var(--line-height-hero);
|
||||
min-height: var(--line-height-hero);
|
||||
font-weight: var(--font-weight-hero);
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-weight: var(--font-weight-headings);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-family-semibold);
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
.h2 {
|
||||
margin-top: $space-sm;
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
small,
|
||||
.small {
|
||||
|
|
@ -100,14 +95,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
margin-top: ($gutter-small / 2);
|
||||
margin-bottom: ($gutter-small / 2);
|
||||
margin-top: $space-xs;
|
||||
margin-bottom: $space-xs;
|
||||
|
||||
small,
|
||||
.small {
|
||||
|
|
@ -137,17 +134,31 @@
|
|||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: var(--font-size-h4);
|
||||
line-height: var(--line-height-h4);
|
||||
min-height: var(--line-height-h4);
|
||||
}
|
||||
|
||||
.semibold {
|
||||
font-family: var(--font-family-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.semilight {
|
||||
font-family: var(--font-family-semilight);
|
||||
font-weight: var(--font-weight-semilight);
|
||||
}
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 $gutter-normal / 2;
|
||||
margin: 0 0 $space-lg;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -172,7 +183,7 @@
|
|||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: $gutter-normal / 2;
|
||||
margin-bottom: $space-lg;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
|
|
@ -180,26 +191,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-top: 0; // Remove browser default
|
||||
margin-bottom: $gutter-normal;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
line-height: var(--line-height-default);
|
||||
min-height: var(--line-height-default);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
// define some common css classes that everyone needs to use. These
|
||||
// need to be declared as global so they're not mangled:
|
||||
.inline-text-overflow {
|
||||
|
|
@ -216,6 +207,22 @@
|
|||
color: var(--color-accent-foreground);
|
||||
background-color: var(--color-accent) !important;
|
||||
}
|
||||
|
||||
.focus-visible {
|
||||
&:focus {
|
||||
outline: 1px solid var(--color-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid var(--color-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* clears the 'X' from Internet Explorer */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
$screen-sm: 480px;
|
||||
$screen-md: 640px;
|
||||
$screen-lg: 1024px;
|
||||
$screen-xl: 1366px;
|
||||
$screen-xxl: 1920px;
|
||||
|
||||
@mixin screen-md() {
|
||||
@media screen and (min-width: $screen-sm) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin screen-lg() {
|
||||
@media screen and (min-width: $screen-md) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin screen-xl() {
|
||||
@media screen and (min-width: $screen-lg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin screen-2xl() {
|
||||
@media screen and (min-width: $screen-xl) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin screen-3xl() {
|
||||
@media screen and (min-width: $screen-xxl) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +1,43 @@
|
|||
/**
|
||||
* Typography constants
|
||||
*/
|
||||
|
||||
:root {
|
||||
--font-size-hero: 4rem;
|
||||
--font-size-h1: 2rem;
|
||||
--font-size-h2: 1.25rem;
|
||||
--font-size-h3: 1rem;
|
||||
--font-size-h4: 0.875rem;
|
||||
|
||||
--font-size-default: 0.875rem;
|
||||
--font-size-small: 0.75rem;
|
||||
--font-size-xsmall: 0.5rem;
|
||||
|
||||
--font-family-base: Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
|
||||
--font-family-default: Segoe UI Regular, var(--font-family-base);
|
||||
--font-family-light: Segoe UI Semilight, var(--font-family-base);
|
||||
--font-family-semibold: Segoe UI Semibold, var(--font-family-base);
|
||||
--font-family-din-regular: DIN-Regular, var(--font-family-default);
|
||||
|
||||
--font-weight-headings: 600;
|
||||
--font-weight-hero: 300;
|
||||
|
||||
--line-height-hero: 5rem;
|
||||
--line-height-h1: 2.75rem;
|
||||
--line-height-h2: 1.75rem;
|
||||
--line-height-h3: 1.375rem;
|
||||
--line-height-h4: 1.25rem;
|
||||
|
||||
--line-height-default: 1.25rem;
|
||||
--line-height-small: 1.125rem;
|
||||
--line-height-xsmall: 0.75rem;
|
||||
|
||||
/* Icons */
|
||||
--icon-font-family: "icons";
|
||||
--icon-size-base: 1rem;
|
||||
--icon-size-xsmall: var(--icon-size-base);
|
||||
--icon-size-small: calc(1 * var(--icon-size-base));
|
||||
--icon-size-medium: calc(2 * var(--icon-size-base));
|
||||
--icon-size-large: calc(3 * var(--icon-size-base));
|
||||
--icon-size-xlarge: calc(4 * var(--icon-size-base));
|
||||
--icon-size-xxlarge: calc(5 * var(--icon-size-base));
|
||||
}
|
||||
/**
|
||||
* Typography constants
|
||||
*/
|
||||
|
||||
:root {
|
||||
--font-size-hero: 2.75rem;
|
||||
--font-size-h1: 1.75rem;
|
||||
--font-size-h2: 1.25rem;
|
||||
--font-size-h3: 1rem;
|
||||
--font-size-h4: 0.875rem;
|
||||
|
||||
--font-size-default: 0.875rem;
|
||||
--font-size-small: 0.75rem;
|
||||
--font-size-xsmall: 0.5rem;
|
||||
|
||||
--font-family-base: Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
|
||||
--font-family-default: Segoe UI Regular, var(--font-family-base);
|
||||
--font-family-semilight: Segoe UI Semilight, var(--font-family-base);
|
||||
--font-family-semibold: Segoe UI Semibold, var(--font-family-base);
|
||||
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-semilight: 300;
|
||||
|
||||
--line-height-hero: 3.25rem;
|
||||
--line-height-h1: 2.25rem;
|
||||
--line-height-h2: 1.75rem;
|
||||
--line-height-h3: 1.5rem;
|
||||
--line-height-h4: 1.25rem;
|
||||
|
||||
--line-height-default: 1.25rem;
|
||||
--line-height-small: 1rem;
|
||||
--line-height-xsmall: 0.75rem;
|
||||
|
||||
/* Icons */
|
||||
--icon-font-family: "icons";
|
||||
--icon-size-base: 1rem;
|
||||
--icon-size-xsmall: var(--icon-size-base);
|
||||
--icon-size-small: calc(1 * var(--icon-size-base));
|
||||
--icon-size-medium: calc(2 * var(--icon-size-base));
|
||||
--icon-size-large: calc(3 * var(--icon-size-base));
|
||||
--icon-size-xlarge: calc(4 * var(--icon-size-base));
|
||||
--icon-size-xxlarge: calc(5 * var(--icon-size-base));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,21 +70,31 @@
|
|||
--color-link-hover: #136bfb;
|
||||
--color-link-selected: #2f7fbd;
|
||||
|
||||
/* IoTC internal data viz */
|
||||
--color-azul: #118dff;
|
||||
--color-foreground-azul: #ffffff;
|
||||
--color-atlantic: #4e4dff;
|
||||
--color-foreground-atlantic: #ffffff;
|
||||
--color-mango: #ff9254;
|
||||
--color-foreground-mango: #323130;
|
||||
--color-blush: #c83d95;
|
||||
--color-foreground-blush: #ffffff;
|
||||
--color-pacific: #00c7e2;
|
||||
--color-foreground-pacific: #323130;
|
||||
--color-grape: #9911b0;
|
||||
--color-foreground-grape: #ffffff;
|
||||
--color-lilac: #ffadc1;
|
||||
--color-foreground-lilac: #323130;
|
||||
--color-scarlet: #e04854;
|
||||
--color-foreground-scarlet: #ffffff;
|
||||
--color-sahara: #fcd641;
|
||||
--color-foreground-sahara: #323130;
|
||||
--color-leaf: #1ce099;
|
||||
--color-foreground-leaf: #323130;
|
||||
--color-natural-grey: #8A8886;
|
||||
--color-foreground-natural-grey: #ffffff;
|
||||
|
||||
/* Data */
|
||||
/*
|
||||
* @todo uncomment this when we update the color picker for fluent support
|
||||
* --data-color-1: #118dff;
|
||||
* --data-color-2: #4e4dff;
|
||||
* --data-color-3: #ff9254;
|
||||
* --data-color-4: #c83d95;
|
||||
* --data-color-5: #00c7e2;
|
||||
* --data-color-6: #9911b0;
|
||||
* --data-color-7: #ffadc1;
|
||||
* --data-color-8: #e04854;
|
||||
* --data-color-9: #fcd641;
|
||||
* --data-color-10: #1ce099;
|
||||
* --data-color-empty: #868886;
|
||||
*/
|
||||
--data-color-1: #01b8aa;
|
||||
--data-color-2: #6be8dc;
|
||||
--data-color-3: #59cec3;
|
||||
|
|
|
|||
|
|
@ -69,22 +69,32 @@
|
|||
--color-link-default: #136bfb;
|
||||
--color-link-hover: #0065d9;
|
||||
--color-link-selected: #0065d9;
|
||||
|
||||
|
||||
/* IoTC internal data viz */
|
||||
--color-azul: #118dff;
|
||||
--color-foreground-azul: #ffffff;
|
||||
--color-atlantic: #3a4bc6;
|
||||
--color-foreground-atlantic: #ffffff;
|
||||
--color-mango: #e66c37;
|
||||
--color-foreground-mango: #ffffff;
|
||||
--color-blush: #c83d95;
|
||||
--color-foreground-blush: #ffffff;
|
||||
--color-pacific: #009eb3;
|
||||
--color-foreground-pacific: #ffffff;
|
||||
--color-grape: #750985;
|
||||
--color-foreground-grape: #ffffff;
|
||||
--color-lilac: #835dd0;
|
||||
--color-foreground-lilac: #ffffff;
|
||||
--color-scarlet: #e04854;
|
||||
--color-foreground-scarlet: #ffffff;
|
||||
--color-sahara: #bd8608;
|
||||
--color-foreground-sahara: #ffffff;
|
||||
--color-leaf: #18a03c;
|
||||
--color-foreground-leaf: #ffffff;
|
||||
--color-natural-grey: #8A8886;
|
||||
--color-foreground-natural-grey: #ffffff;
|
||||
|
||||
/* Data */
|
||||
/*
|
||||
* @todo uncomment this when we update the color picker for fluent support
|
||||
* --data-color-1: #118dff;
|
||||
* --data-color-2: #3a4bc6;
|
||||
* --data-color-3: #e66c37;
|
||||
* --data-color-4: #c83d95;
|
||||
* --data-color-5: #009eb3;
|
||||
* --data-color-6: #750985;
|
||||
* --data-color-7: #835dd0;
|
||||
* --data-color-8: #e04854;
|
||||
* --data-color-9: #bd8608;
|
||||
* --data-color-10: #18a03c;
|
||||
* --data-color-empty: #868886;
|
||||
*/
|
||||
--data-color-1: #01b8aa;
|
||||
--data-color-2: #99e3dd;
|
||||
--data-color-3: #67d4cc;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче