From 6e932f80544bb12bd6628aa937c1f9973c018aa0 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Thu, 3 Jun 2021 11:32:24 -0700 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Deprecate=20Slash=20as=20?= =?UTF-8?q?division=20operator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Deprecation of slash as division operator as we were getting warnings in the terminal about it. More info [here](https://sass-lang.com/documentation/breaking-changes/slash-div) --- .../rose/components/dropdown/_button.scss | 3 ++- .../rose/components/dropdown/_item.scss | 3 ++- .../rose/components/dropdown/_link.scss | 3 ++- .../rose/components/dropdown/_section.scss | 3 ++- .../styles/rose/components/header/_link.scss | 3 ++- .../rose/components/list/_key-value.scss | 5 +++-- .../styles/rose/components/nav/_sidebar.scss | 5 +++-- .../styles/rose/components/table/_table.scss | 5 +++-- .../styles/rose/variables/_typography.scss | 19 ++++++++++--------- 9 files changed, 29 insertions(+), 20 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss index b15bb016e..0c561b22d 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-dropdown-button { @include type.type(s); @@ -11,7 +12,7 @@ padding: 0 sizing.rems(s); text-decoration: none; text-align: left; - $line-height: 36 / 14; + $line-height: math.div(36, 14); line-height: $line-height; --background-color: transparent; diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss index 0388ebdc9..a0f4b0a67 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss @@ -1,12 +1,13 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; $checkmark: url("data:image/svg+xml;utf-8,"); .rose-dropdown-item { @include type.type(s); min-width: (sizing.rems(m)) * 20; - $line-height: 36 / 14; + $line-height: math.div(36, 14); line-height: $line-height; --color: var(--stark); diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss index 695b2e4ba..499f634a8 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_link.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-dropdown-link { @include type.type(s); @@ -11,7 +12,7 @@ padding: 0 sizing.rems(s); text-decoration: none; text-align: left; - $line-height: 36 / 14; + $line-height: math.div(36, 14); line-height: $line-height; --background-color: transparent; diff --git a/addons/rose/addon/styles/rose/components/dropdown/_section.scss b/addons/rose/addon/styles/rose/components/dropdown/_section.scss index 32cbe6150..10ca0a790 100644 --- a/addons/rose/addon/styles/rose/components/dropdown/_section.scss +++ b/addons/rose/addon/styles/rose/components/dropdown/_section.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-dropdown-section { .rose-dropdown-section-title { @@ -7,7 +8,7 @@ text-transform: uppercase; padding: 0 sizing.rems(s); margin: 0; - $line-height: 36 / 14; + $line-height: math.div(36, 14); line-height: $line-height; color: var(--ui-gray); } diff --git a/addons/rose/addon/styles/rose/components/header/_link.scss b/addons/rose/addon/styles/rose/components/header/_link.scss index e1620d910..6a6bb0da9 100644 --- a/addons/rose/addon/styles/rose/components/header/_link.scss +++ b/addons/rose/addon/styles/rose/components/header/_link.scss @@ -1,11 +1,12 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-header-nav-link { @include type.type(s, semibold); // target line height is 16, which is not a standard line height - $lineHeight: 16 / 14; + $lineHeight: math.div(16, 14); line-height: $lineHeight; text-decoration: none; diff --git a/addons/rose/addon/styles/rose/components/list/_key-value.scss b/addons/rose/addon/styles/rose/components/list/_key-value.scss index fcce12059..1ceb5f75d 100644 --- a/addons/rose/addon/styles/rose/components/list/_key-value.scss +++ b/addons/rose/addon/styles/rose/components/list/_key-value.scss @@ -1,6 +1,7 @@ @use '../../variables/sizing'; @use '../../variables/typography'; @use '../../utilities/type'; +@use 'sass:math'; .rose-list-key-value { margin-bottom: sizing.rems(m); @@ -10,9 +11,9 @@ display: flex; border-bottom: 1px solid var(--ui-gray-subtler-3); @include type.type(s); - $lineHeight: 36 / 14; + $lineHeight: math.div(36, 14); line-height: $lineHeight; - padding: (sizing.rems(s) / 2) 0; + padding: math.div(sizing.rems(s), 2) 0; .rose-list-key-value-item-cell { display: flex; diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss index fcc29ca45..cfe3b87f8 100644 --- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-nav-sidebar { $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs); @@ -19,7 +20,7 @@ display: none; color: var(--ui-gray); text-transform: uppercase; - $lineHeight: 20 / 12; + $lineHeight: math.div(20, 12); line-height: $lineHeight; padding: 0 sizing.rems(m); margin-bottom: $threePX; @@ -30,7 +31,7 @@ @include type.type(s); display: block; color: var(--stark); - $lineHeight: 36 / 14; + $lineHeight: math.div(36, 14); line-height: $lineHeight; text-decoration: none; padding: 0 sizing.rems(m); diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 81a815a24..5429a1cd9 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/addons/rose/addon/styles/rose/components/table/_table.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../utilities/type'; +@use 'sass:math'; .rose-table { @include type.type(s, normal); @@ -62,9 +63,9 @@ &.rose-table-condensed { .rose-table-cell { @include type.type(s); - $lineHeight: 36 / 14; + $lineHeight: math.div(36, 14); line-height: $lineHeight; - padding: (sizing.rems(s) / 2) sizing.rems(s); + padding: math.div(sizing.rems(s), 2) sizing.rems(s); } } diff --git a/addons/rose/addon/styles/rose/variables/_typography.scss b/addons/rose/addon/styles/rose/variables/_typography.scss index 1bd4c5415..5ed66a097 100644 --- a/addons/rose/addon/styles/rose/variables/_typography.scss +++ b/addons/rose/addon/styles/rose/variables/_typography.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use 'sizing'; +@use 'sass:math'; /** * SASS variables defining typography. @@ -46,15 +47,15 @@ $font-sizes: ( // Line height expressed as ratio. $line-heights: ( - xl: 36 / 28, - l: 24 / 20, - m: 20 / 16, - s: 18 / 14, - xs: 16 / 12, - h1: 48 / 28, - h2: 36 / 20, - h3: 24 / 16, - button: 24 / 13, + xl: math.div(36, 28), + l: math.div(24, 20), + m: math.div(20, 16), + s: math.div(18, 14), + xs: math.div(16, 12), + h1: math.div(48, 28), + h2: math.div(36, 20), + h3: math.div(24, 16), + button: math.div(24, 13), ); /**