Added setting for link color to CTA card

packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js

@@ -16,6 +16,7 @@ export class CallToActionNode extends generateDecoratorNode({
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
         {name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
+        {name: 'linkColor', default: 'text'},
         {name: 'imageUrl', default: ''},
         {name: 'imageWidth', default: null},
         {name: 'imageHeight', default: null}

packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js

@@ -23,7 +23,7 @@ function ctaCardTemplate(dataset) {
         ? `style="color: ${dataset.buttonTextColor};"`
         : `style="background-color: ${dataset.buttonColor}; color: ${dataset.buttonTextColor};"`;
     return `
-        <div class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.imageUrl ? 'kg-cta-has-img' : ''}" data-layout="${dataset.layout}">
+        <div class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.imageUrl ? 'kg-cta-has-img' : ''} ${dataset.linkColor === 'accent' ? 'kg-cta-link-accent' : ''}" data-layout="${dataset.layout}">
             ${dataset.hasSponsorLabel ? `
                 <div class="kg-cta-sponsor-label-wrapper">
                     <div class="kg-cta-sponsor-label">
@@ -177,7 +177,7 @@ function emailCTATemplate(dataset, options = {}) {
     };
 
     return `
-        <table class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.hasSponsorLabel ? '' : 'kg-cta-no-label'} ${dataset.textValue ? '' : 'kg-cta-no-text'} ${dataset.imageUrl ? 'kg-cta-has-img' : ''}" border="0" cellpadding="0" cellspacing="0" width="100%">
+        <table class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.hasSponsorLabel ? '' : 'kg-cta-no-label'} ${dataset.textValue ? '' : 'kg-cta-no-text'} ${dataset.imageUrl ? 'kg-cta-has-img' : ''} ${dataset.linkColor === 'accent' ? 'kg-cta-link-accent' : ''}" border="0" cellpadding="0" cellspacing="0" width="100%">
             ${dataset.hasSponsorLabel ? `
                 <tr>
                     <td>
@@ -212,7 +212,8 @@ export function renderCallToActionNode(node, options = {}) {
         sponsorLabel: node.sponsorLabel,
         imageUrl: node.imageUrl,
         imageWidth: node.imageWidth,
-        imageHeight: node.imageHeight
+        imageHeight: node.imageHeight,
+        linkColor: node.linkColor
     };
 
     // Add validation for backgroundColor

packages/kg-default-nodes/test/nodes/call-to-action.test.js

@@ -38,7 +38,8 @@ describe('CallToActionNode', function () {
             backgroundColor: 'none',
             imageUrl: 'http://blog.com/image1.jpg',
             imageWidth: 200,
-            imageHeight: 100
+            imageHeight: 100,
+            linkColor: 'text'
         };
         exportOptions = {
             exportFormat: 'html',
@@ -69,6 +70,7 @@ describe('CallToActionNode', function () {
             callToActionNode.visibility.should.deepEqual(utils.visibility.buildDefaultVisibility());
             callToActionNode.imageHeight.should.equal(dataset.imageHeight);
             callToActionNode.imageWidth.should.equal(dataset.imageWidth);
+            callToActionNode.linkColor.should.equal(dataset.linkColor);
         }));
 
         it('has setters for all properties', editorTest(function () {
@@ -144,6 +146,10 @@ describe('CallToActionNode', function () {
                     memberSegment: ''
                 }
             });
+
+            callToActionNode.linkColor.should.equal('text');
+            callToActionNode.linkColor = 'accent';
+            callToActionNode.linkColor.should.equal('accent');
         }));
 
         it('has getDataset() convenience method', editorTest(function () {
@@ -483,6 +489,7 @@ describe('CallToActionNode', function () {
                 layout: 'minimal',
                 showButton: true,
                 textValue: '<p><span style="white-space: pre-wrap;">This is a new CTA Card.</span></p>',
+                linkColor: 'text',
                 visibility: {
                     web: {
                         nonMember: true,

packages/koenig-lexical/src/components/ui/ButtonGroupBeta.jsx

@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroupBeta({buttons = [], selectedName, onClick, hasTooltip = true}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white" role="menubar">
+            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white dark:bg-grey-900" role="menubar">
                 {buttons.map(({label, name, Icon, dataTestId, ariaLabel}) => (
                     <ButtonGroupIconButton
                         key={`${name}-${label}`}
@@ -36,7 +36,7 @@ export function ButtonGroupIconButton({dataTestId, onClick, label, ariaLabel, na
             <button
                 aria-checked={isActive}
                 aria-label={ariaLabel || label}
-                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:border-grey-800 dark:bg-grey-950' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 role="menuitemradio"
                 type="button"

packages/koenig-lexical/src/components/ui/ColorOptionButtonsBeta.jsx

@@ -31,13 +31,13 @@ export function ColorOptionButtonsBeta({buttons = [], selectedName, onClick}) {
                     }} />
                 )}
                 <span
-                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white`}
+                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white dark:border-grey-950`}
                 ></span>
             </button>
 
             {/* Color options popover */}
             {isOpen && (
-                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow" data-testid="color-options-popover">
+                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow dark:bg-grey-900" data-testid="color-options-popover">
                     <div className="flex">
                         <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
                             {buttons.map(({label, name, color}) => (

packages/koenig-lexical/src/components/ui/ColorPickerBeta.jsx

@@ -202,7 +202,7 @@ export function ColorIndicatorBeta({value, swatches, onSwatchChange, onTogglePic
                     }} />
                 )}
                 <span
-                    className="block size-full rounded-full border-2 border-white"
+                    className="block size-full rounded-full border-2 border-white dark:border-grey-950"
                     style={{backgroundColor}}
                 >
                     {
@@ -218,7 +218,7 @@ export function ColorIndicatorBeta({value, swatches, onSwatchChange, onTogglePic
                 <div
                     ref={popoverRef}
                     className={clsx(
-                        'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-950',
+                        'absolute -right-3 bottom-full z-10 mb-2 flex flex-col gap-3 rounded-lg bg-white p-3 shadow transition-[width] duration-200 ease-in-out dark:bg-grey-900',
                         (showColorPicker || showChildren) && 'min-w-[296px]'
                     )}
                     onClick={stopPropagation}
@@ -271,7 +271,7 @@ export function ColorIndicatorBeta({value, swatches, onSwatchChange, onTogglePic
                                         maskComposite: 'exclude'
                                     }} />
                                     <span
-                                        className="block size-full rounded-full border-2 border-white"
+                                        className="block size-full rounded-full border-2 border-white dark:border-grey-950"
                                         style={{backgroundColor: value}}
                                     >
                                         {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}

packages/koenig-lexical/src/components/ui/TabView.jsx

@@ -10,7 +10,7 @@ const TabView = ({tabs, defaultTab, tabContent}) => {
 
     return (
         <>
-            <div className={`no-scrollbar flex gap-5 border-b border-grey-300 dark:border-grey-900 ${tabs.length > 1 ? 'w-full px-6' : 'mx-6'}`}>
+            <div className={`no-scrollbar flex gap-3 border-b border-grey-300 dark:border-grey-900 ${tabs.length > 1 ? 'w-full px-6' : 'mx-6'}`}>
                 {tabs.map(tab => (
                     <button
                         key={tab.id}
@@ -19,7 +19,7 @@ const TabView = ({tabs, defaultTab, tabContent}) => {
                         } ${
                             activeTab === tab.id
                                 ? 'border-black text-black dark:border-white dark:text-white'
-                                : 'border-transparent text-grey-600 hover:border-grey-500 dark:text-white'
+                                : 'border-transparent text-grey-600 hover:border-grey-500 dark:text-grey-500 dark:hover:border-grey-500'
                         }`}
                         data-testid={`tab-${tab.id}`}
                         type="button"