Skip to content

Commit

Permalink
fix: Variable Fixes (#186)
Browse files Browse the repository at this point in the history 
* Updated alert line height

Updated content line height from 15px to 1.25

* Added line height variables

* Moved line height to global variables

* Added button variables

* Update Variables.stories.mdx

* Compiled css files
  • Loading branch information
@chasturansky
chasturansky authored May 20, 2021
1 parent 205e0af commit 0c9cc58
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 32 deletions.
2 changes: 1 addition & 1 deletion css/denali-components.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/denali-dark-theme.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/denali.css
View file

Large diffs are not rendered by default.

11 changes: 9 additions & 2 deletions scss/components/alerts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$alert-bg-color: map-get($denali-grey-colors,"100") !default;
$alert-text-color: null !default;
$alert-corner-radius: $border-radius-sm !default;
Expand All @@ -19,6 +19,7 @@ $alert-inline-font-size: inherit !default;
$alert-inline-alignment-text: center !default;
$alert-inline-alignment-justify-content: center !default;
$alert-inline-padding: 4px 10px !default;
$alert-content-line-height: $line-height-compact !default;

@mixin alerts-default {
.alert {
Expand Down Expand Up @@ -50,7 +51,7 @@ $alert-inline-padding: 4px 10px !default;
margin-top: 4px;
font-size: 12px !important;
margin-bottom: 0px;
line-height: 15px;
line-height: $alert-content-line-height;
}
}

Expand Down Expand Up @@ -183,6 +184,12 @@ $alert-inline-padding: 4px 10px !default;
border-top-color: $alert-border-color;
}

div {
p {
line-height: $alert-content-line-height;
}
}

@if variable-exists(alert-border-color) {
.d-icon {
color: $alert-border-color;
Expand Down
18 changes: 14 additions & 4 deletions scss/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@

$button-font-weight: inherit !default;
$button-corner-radius: $border-radius-sm !default;

$button-sizes-sm-padding: 0px 10px !default;
$button-sizes-md-padding: 0px 10px !default;
$button-sizes-default-padding: 0px 10px !default;
$button-sizes-lg-padding: 0px 30px !default;

$button-sizes-sm-height: 24px !default;
$button-sizes-sm-font-size: 12px !default;
$button-sizes-sm-min-width: 70px !default;
Expand Down Expand Up @@ -88,7 +94,7 @@ $button-text-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"
justify-content: center;
align-items: center;
margin: 0px;
padding: 0px 10px;
padding: $button-sizes-default-padding;
padding-bottom: 1px;
height: $button-sizes-default-height;
font-size: $button-sizes-default-font-size;
Expand Down Expand Up @@ -263,17 +269,19 @@ $button-text-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"
height: $button-sizes-sm-height;
font-size: $button-sizes-sm-font-size;
min-width: $button-sizes-sm-min-width;
padding: $button-sizes-sm-padding;
}
&.is-medium {
height: $button-sizes-md-height;
font-size: $button-sizes-md-font-size;
min-width: $button-sizes-md-min-width;
padding: $button-sizes-md-padding;
}
&.is-large {
height: $button-sizes-lg-height;
font-size: $button-sizes-lg-font-size;
min-width: $button-sizes-lg-min-width;
padding: 0px 30px;
padding: $button-sizes-lg-padding;
}
&.is-full {
width: 100%;
Expand All @@ -298,6 +306,7 @@ $button-text-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"
min-width: $button-sizes-default-min-width;
border-radius: $button-corner-radius;
font-weight: $button-font-weight;
padding: $button-sizes-default-padding;

&.is-solid {
background: $button-solid-default-bg-color;
Expand Down Expand Up @@ -465,18 +474,19 @@ $button-text-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"
height: $button-sizes-sm-height;
font-size: $button-sizes-sm-font-size;
min-width: $button-sizes-sm-min-width;
padding: $button-sizes-sm-padding;
}

&.is-medium {
height: $button-sizes-md-height;
font-size: $button-sizes-md-font-size;
min-width: $button-sizes-md-min-width;
padding: $button-sizes-md-padding;
}

&.is-large {
height: $button-sizes-lg-height;
font-size: $button-sizes-lg-font-size;
min-width: $button-sizes-lg-min-width;
padding: $button-sizes-lg-padding;
}
}
}
38 changes: 21 additions & 17 deletions scss/components/typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,13 @@ $h5-font-weight: 600 !default;
$h6-font-weight: 400 !default;
$p-font-weight: 400 !default;

$line-height-compact: 1.25 !default;
$line-height-normal: 1.5 !default;
$line-height-expanded: 1.75 !default;
$h1-line-height: $line-height-compact !default;
$h2-line-height: $line-height-compact !default;
$h3-line-height: $line-height-normal !default;
$h4-line-height: $line-height-normal !default;
$h5-line-height: $line-height-normal !default;
$h6-line-height: $line-height-normal !default;
$p-line-height: $line-height-expanded !default;

@mixin typography-default {
h1,
Expand All @@ -42,50 +46,50 @@ $line-height-expanded: 1.75 !default;

h1 {
font-size: $h1-font-size;
line-height: $line-height-compact;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $headline-color;
}

h2 {
font-size: $h2-font-size;
line-height: $line-height-compact;
line-height: $h2-line-height;
font-weight: $h2-font-weight;
color: $headline-color;
}

h3 {
font-size: $h3-font-size;
line-height: $line-height-normal;
line-height: $h3-line-height;
font-weight: $h3-font-weight;
color: $headline-color;
}

h4 {
font-size: $h4-font-size;
line-height: $line-height-normal;
line-height: $h4-line-height;
font-weight: $h4-font-weight;
color: $headline-color;
}

h5 {
font-size: $h5-font-size;
line-height: $line-height-normal;
line-height: $h5-line-height;
font-weight: $h5-font-weight;
color: $headline-color;
}

h6 {
font-size: $h6-font-size;
line-height: $line-height-normal;
line-height: $h6-line-height;
font-weight: $h6-font-weight;
color: $headline-color;
}

p {
font-family: $paragraph-font-family;
font-size: $p-font-size;
line-height: $line-height-expanded;
line-height: $p-line-height;
font-weight: $p-font-weight;
color: $paragraph-color;
}
Expand All @@ -103,50 +107,50 @@ $line-height-expanded: 1.75 !default;

h1 {
font-size: $h1-font-size;
line-height: $line-height-compact;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $headline-color;
}

h2 {
font-size: $h2-font-size;
line-height: $line-height-compact;
line-height: $h2-line-height;
font-weight: $h2-font-weight;
color: $headline-color;
}

h3 {
font-size: $h3-font-size;
line-height: $line-height-normal;
line-height: $h3-line-height;
font-weight: $h3-font-weight;
color: $headline-color;
}

h4 {
font-size: $h4-font-size;
line-height: $line-height-normal;
line-height: $h4-line-height;
font-weight: $h4-font-weight;
color: $headline-color;
}

h5 {
font-size: $h5-font-size;
line-height: $line-height-normal;
line-height: $h5-line-height;
font-weight: $h5-font-weight;
color: $headline-color;
}

h6 {
font-size: $h6-font-size;
line-height: $line-height-normal;
line-height: $h6-line-height;
font-weight: $h6-font-weight;
color: $headline-color;
}

p {
font-family: $paragraph-font-family;
font-size: $p-font-size;
line-height: $line-height-expanded;
line-height: $p-line-height;
font-weight: $p-font-weight;
color: $paragraph-color;
}
Expand Down
7 changes: 6 additions & 1 deletion scss/utilities/global-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,9 @@ $elevation-fixed: 100 !default;
$elevation-sticky: 200 !default;
$elevation-menu: 300 !default;
$elevation-modal-background: 400 !default;
$elevation-modal: 500 !default;
$elevation-modal: 500 !default;

// Line Height
$line-height-compact: 1.25 !default;
$line-height-normal: 1.5 !default;
$line-height-expanded: 1.75 !default;
21 changes: 16 additions & 5 deletions stories/guides/Variables.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ Listed below are all the SCSS variables for each component.
|$elevation-sticky| 200 !default|
|$elevation-menu| 300 !default|
|$elevation-modal-background| 400 !default|
|$elevation-modal| 500 !default|
|$elevation-modal| 500 !default|
|$line-height-compact| 1.25 !default|
|$line-height-normal| 1.5 !default|
|$line-height-expanded| 1.75 !default|

---

Expand Down Expand Up @@ -61,6 +64,7 @@ Listed below are all the SCSS variables for each component.
|$alert-inline-alignment-text| center !default|
|$alert-inline-alignment-justify-content| center !default|
|$alert-inline-padding| 4px 10px !default|
|$alert-content-line-height|$line-height-compact !default|

## Box

Expand Down Expand Up @@ -95,15 +99,19 @@ Listed below are all the SCSS variables for each component.
|$button-sizes-sm-height| 24px !default|
|$button-sizes-sm-font-size| 12px !default|
|$button-sizes-sm-min-width| 70px !default|
|$button-sizes-sm-padding| 0px 10px !default|
|$button-sizes-md-height| 32px !default|
|$button-sizes-md-font-size| inherit !default|
|$button-sizes-md-min-width| 90px !default|
|$button-sizes-md-padding| 0px 10px !default|
|$button-sizes-default-height| 36px !default|
|$button-sizes-default-font-size| inherit !default|
|$button-sizes-default-min-width| 120px !default|
|$button-sizes-default-padding| 0px 10px !default|
|$button-sizes-lg-height| 44px !default|
|$button-sizes-lg-font-size| 16px !default|
|$button-sizes-lg-min-width| null !default|
|$button-sizes-lg-padding| 0px 30px !default|
|$button-solid-default-bg-color| map-get($denali-brand-colors,"300") !default|
|$button-solid-default-text-color| map-get($denali-grey-colors,"100") !default|
|$button-solid-default-inverse-bg-color| map-get($denali-brand-colors,"300") !default|
Expand Down Expand Up @@ -410,7 +418,6 @@ Listed below are all the SCSS variables for each component.

|Variable|Value|
|---|-----|

|$tags-corner-radius| $border-radius-pill !default|
|$tags-padding| 0px 10px !default|
|$tags-margin| 3px !default|
Expand Down Expand Up @@ -504,6 +511,10 @@ Listed below are all the SCSS variables for each component.
|$h5-font-weight| 600 !default|
|$h6-font-weight| 400 !default|
|$p-font-weight| 400 !default|
|$line-height-compact| 1.25 !default|
|$line-height-normal| 1.5 !default|
|$line-height-expanded| 1.75 !default|
|$h1-line-height| $line-height-compact !default|
|$h2-line-height| $line-height-compact !default|
|$h3-line-height| $line-height-normal !default|
|$h4-line-height| $line-height-normal !default|
|$h5-line-height| $line-height-normal !default|
|$h6-line-height| $line-height-normal !default|
|$p-line-height| $line-height-expanded !default|

0 comments on commit 0c9cc58

Please sign in to comment.