fix: update css class naming

Kajabi · Jun 12, 2024 · e390a2c · e390a2c
1 parent d6da56d
commit e390a2c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -6,7 +6,7 @@
 
 
 // Default background option
-$-sage-frame-background: transparent;
+$-sage-card-background: transparent;
 
 .sage-card {
   @include sage-card();
@@ -165,7 +165,7 @@ $-sage-frame-background: transparent;
 
 @each $-color, $-sliders in $sage-colors {
   @each $-number, $-configs in $-sliders {
-    .sage-frame--background-#{"" + $-color}-#{$-number} {
+    .sage-card--background-#{"" + $-color}-#{$-number} {
       background: #{sage-color($-color, $-number)};
     }
   }

diff --git a/packages/sage-react/lib/Card/CardHeader.jsx b/packages/sage-react/lib/Card/CardHeader.jsx
@@ -10,16 +10,16 @@ export const CardHeader = ({ background, children, ...rest }) => {
     && !Object.values(SageTokens.COLOR_SLIDERS).includes(background);
 
   if (hasCustomBackground) {
-    styles['--sage-frame-background'] = background;
+    styles['--sage-card-background'] = background;
   }
 
   return (
     <div
       className={
         [
           'sage-card__header-layout',
-          hasCustomBackground ? 'sage-frame--background-custom' : '',
-          background && !hasCustomBackground ? `sage-frame--background-${background}` : ''
+          hasCustomBackground ? 'sage-card--background-custom' : '',
+          background && !hasCustomBackground ? `sage-card--background-${background}` : ''
         ].filter((x) => x).join(' ')
       }
       {...rest}