- Fixes the font-weight issue (was due to non-existent CSS variables …

…being referenced) - Buttons in notifications have no border-radius
bitcrowd · May 15, 2024 · 8c457dd · 8c457dd
1 parent 31c9c9a
commit 8c457dd
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/scss/bitstyles/design-tokens/_typography.scss b/scss/bitstyles/design-tokens/_typography.scss
@@ -1,5 +1,6 @@
 @use '../tools/custom-property';
 @use 'sass:list';
+@use 'sass:map';
 
 //
 // Font-weights /////////////////////////////////////////
@@ -26,37 +27,37 @@ $webfont-variants: (
   'normal': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': map.get($font-weights, 'normal'),
     'filename': 'poppins-v20-latin-400',
   ),
   'italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': map.get($font-weights, 'normal'),
     'filename': 'poppins-v20-latin-400italic',
   ),
   'medium': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': map.get($font-weights, 'medium'),
     'filename': 'poppins-v20-latin-500',
   ),
   'medium-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': map.get($font-weights, 'medium'),
     'filename': 'poppins-v20-latin-500italic',
   ),
   'semibold': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': map.get($font-weights, 'semibold'),
     'filename': 'poppins-v20-latin-600',
   ),
   'semibold-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': map.get($font-weights, 'semibold'),
     'filename': 'poppins-v20-latin-600italic',
   ),
 ) !default;

diff --git a/scss/bitstyles/molecules/notification/Notification.js b/scss/bitstyles/molecules/notification/Notification.js
@@ -3,11 +3,11 @@ import Button from '../../atoms/button/Button';
 
 const CloseButton = () => {
   return Button({
-    colorVariant: ['transparent'],
+    colorVariant: ['secondary'],
     children: `<svg class="a-icon a-icon--xl" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <use xlink:href="${icons}#icon-cross"></use>
     </svg><span class="u-sr-only">Remove notification</span>`,
-    classname: ['u-self-start'],
+    classname: ['m-notification__button'],
   });
 };
 

diff --git a/scss/bitstyles/molecules/notification/_index.scss b/scss/bitstyles/molecules/notification/_index.scss
@@ -8,28 +8,63 @@
 /* prettier-ignore */
 $highlight-color-property: design-token.get('notification', 'highlight-color');
 $highlight-background-color-property: design-token.get('notification', 'highlight-background-color');
+$button-border-top-right-radius-property: design-token.get(
+  'button',
+  'border',
+  'top',
+  'right',
+  'radius'
+);
+$button-border-bottom-right-radius-property: design-token.get(
+  'button',
+  'border',
+  'bottom',
+  'right',
+  'radius'
+);
+$button-border-bottom-left-radius-property: design-token.get(
+  'button',
+  'border',
+  'bottom',
+  'left',
+  'radius'
+);
+$button-border-top-left-radius-property: design-token.get(
+  'button',
+  'border',
+  'top',
+  'left',
+  'radius'
+);
 
 #{classname.get($classname-items: 'notification', $layer: 'molecule')} {
   display: flex;
   background-color: var(design-token.get("color", "grayscale", "white"));
   color: var(design-token.get("color", "grayscale", "dark-3"));
 }
 
-#{classname.get($classname-items: 'notification__content', $layer: 'molecule')} {
-  flex: 1;
-  min-width: 0;
-  padding: var(design-token.get("size", "l2")) 0 var(design-token.get("size", "l2")) var(design-token.get("size", "l2"));
+#{classname.get($classname-items: 'notification__button', $layer: 'molecule')} {
+  #{$button-border-top-right-radius-property}: 0;
+  #{$button-border-bottom-right-radius-property}: 0;
+  #{$button-border-bottom-left-radius-property}: 0;
+  #{$button-border-top-left-radius-property}: 0;
 }
 
 #{classname.get($classname-items: 'notification__highlight', $layer: 'molecule')} {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  padding: var(design-token.get("size", "s2"));
+  padding: 0 var(design-token.get("size", "s1"));
   color: var($highlight-color-property, var(design-token.get("color", "brand-1", "dark-1")));
   background-color: var($highlight-background-color-property, var(design-token.get("color", "brand-1", "light-4")));
 }
 
+#{classname.get($classname-items: 'notification__content', $layer: 'molecule')} {
+  flex: 1;
+  min-width: 0;
+  padding: var(design-token.get("size", "l2")) 0 var(design-token.get("size", "l2")) var(design-token.get("size", "l2"));
+}
+
 @each $theme-name, $theme in settings.$theme-variants {
   @include themes.get($theme-name) {
     #{$highlight-color-property}: map.get($theme, 'highlight-color');