I took what you shared and made a modification for a single script to create any of the boxes.  There was a bit of Genie interaction, but the result is pretty nice.  Maybe it will be helpful to someone else. I may look into find a way to make it a shared js to utilize.  

%md-sandbox
## All 8 Types (single cell, single script)

<div class="admonition" data-type="info" data-title="Information" data-body="Use for general information, tips, or additional context."></div>
<div class="admonition" data-type="note" data-title="Note" data-body="Use for notes or remarks that should stand out."></div>
<div class="admonition" data-type="warning" data-title="Warning" data-body="Use for warnings or important cautions."></div>
<div class="admonition" data-type="error" data-title="Error" data-body="Use for errors, critical issues, or things to avoid."></div>
<div class="admonition" data-type="success" data-title="Success" data-body="Use for confirmations, best practices, or things working correctly."></div>
<div class="admonition" data-type="tip" data-title="Tip" data-body="Use for helpful suggestions or pro-tips."></div>
<div class="admonition" data-type="config" data-title="Configuration" data-body="Use for technical settings or system requirements."></div>
<div class="admonition" data-type="goal" data-title="Goal" data-body="Use for objectives, targets, or key outcomes."></div>

<script>
(function() {
  var palettes = {
    info:    { light:{border:'#1976d2',bg:'#e3f2fd',title:'#0d47a1',body:'#333',icon:'#1976d2'}, dark:{border:'#e6892d',bg:'#1c0d02',title:'#f2b85e',body:'#ccc',icon:'#e6892d'} },
    note:    { light:{border:'#7b1fa2',bg:'#f3e5f5',title:'#4a148c',body:'#333',icon:'#7b1fa2'}, dark:{border:'#84e05d',bg:'#0c1a0a',title:'#b5eb73',body:'#ccc',icon:'#84e05d'} },
    warning: { light:{border:'#ff9800',bg:'#fff3e0',title:'#e65100',body:'#333',icon:'#ff9800'}, dark:{border:'#0067ff',bg:'#000c1f',title:'#19aeff',body:'#ccc',icon:'#0067ff'} },
    error:   { light:{border:'#f44336',bg:'#ffebee',title:'#c62828',body:'#333',icon:'#f44336'}, dark:{border:'#0bbcc9',bg:'#001411',title:'#39d7d7',body:'#ccc',icon:'#0bbcc9'} },
    success: { light:{border:'#4caf50',bg:'#e8f5e9',title:'#2e7d32',body:'#333',icon:'#4caf50'}, dark:{border:'#b350af',bg:'#170a16',title:'#d182cd',body:'#ccc',icon:'#b350af'} },
    tip:     { light:{border:'#009688',bg:'#e0f2f1',title:'#00695c',body:'#333',icon:'#009688'}, dark:{border:'#ff6977',bg:'#1f0d0e',title:'#ff96a3',body:'#ccc',icon:'#ff6977'} },
    config:  { light:{border:'#607d8b',bg:'#eceff1',title:'#37474f',body:'#333',icon:'#607d8b'}, dark:{border:'#9f8274',bg:'#13100e',title:'#c8b8b0',body:'#ccc',icon:'#9f8274'} },
    goal:    { light:{border:'#ffc107',bg:'#fffde7',title:'#ff8f00',body:'#333',icon:'#ffc107'}, dark:{border:'#003ef8',bg:'#000218',title:'#0070ff',body:'#ccc',icon:'#003ef8'} }
  };
  var icons = { info:'i', note:'\u270E', warning:'\u26A0', error:'\u2716', success:'\u2714', tip:'\u2731', config:'\u2699', goal:'\u25CE' };

  document.querySelectorAll('.admonition').forEach(function(block) {
    if (block.dataset.processed) return;
    block.dataset.processed = '1';
    var type = block.dataset.type, title = block.dataset.title, body = block.dataset.body;
    var mode = 'light';

    function render() {
      var p = palettes[type][mode];
      block.innerHTML =
        '<div style="position:relative; border-left:4px solid '+p.border+
        '; background:'+p.bg+'; padding:16px 20px; padding-right:80px;'+
        ' border-radius:4px; margin:16px 0; font-family:sans-serif;">'+
          '<button class="adm-toggle" style="position:absolute; top:8px; right:8px;'+
          ' padding:4px 10px; font-size:11px; background:#7f7f7f; color:#fff;'+
          ' border:1px solid #7f7f7f; border-radius:4px; cursor:pointer;">'+
          (mode==='light' ? '\ud83c\udf19 Dark' : '\u2600 Light')+'</button>'+
          '<div style="display:flex; gap:12px;">'+
            '<span style="font-size:22px; font-weight:bold; color:'+p.icon+';">'+icons[type]+'</span>'+
            '<div>'+
              '<strong style="color:'+p.title+'; font-size:1.1em;">'+title+'</strong>'+
              '<p style="margin:8px 0 0 0; color:'+p.body+';">'+body+'</p>'+
            '</div>'+
          '</div>'+
        '</div>';
      block.querySelector('.adm-toggle').onclick = function() {
        mode = (mode==='light') ? 'dark' : 'light';
        render();
      };
    }
    render();
  });
})();
</script>