From ddf592d3f797ec6427920cd6c66936baf12ba77c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 17 Mar 2026 14:23:38 +0000
Subject: [PATCH 1/2] Initial plan


From 34575fd2a5df13693cc2e270beb9de14da33d9b5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 17 Mar 2026 14:36:39 +0000
Subject: [PATCH 2/2] feat: replace style buttons with formatted-text previews
 (MS Word style)

Co-authored-by: codewriter3000 <58712923+codewriter3000@users.noreply.github.com>
---
 package-lock.json                |   4 +-
 src/app/globals.scss             |  60 ++++++++++-
 src/components/Ribbon/Ribbon.tsx | 169 +++++++++++++++++--------------
 3 files changed, 154 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9afd7d..5b540e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "carbon-type",
-  "version": "0.1.0",
+  "version": "0.1.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "carbon-type",
-      "version": "0.1.0",
+      "version": "0.1.13",
       "dependencies": {
         "@carbon/colors": "^11.30.0",
         "@carbon/react": "^1.77.0",
diff --git a/src/app/globals.scss b/src/app/globals.scss
index f123f11..5b3dd7b 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -279,11 +279,69 @@ html {
   .ribbon-style-btn.cds--btn {
     min-height: unset;
     padding: 3px 8px;
-    font-size: 11px;
     line-height: 1.2;
   }
 }
 
+// ─── Custom format buttons (B / I / U etc.) ───────────────────────────────────
+
+.format-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 26px;
+  min-height: 22px;
+  padding: 2px 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  border-radius: 2px;
+  color: #222;
+  line-height: 1;
+
+  &:hover {
+    background: #dde0e5;
+  }
+
+  &--active {
+    background: #cce0ff;
+    border-color: #0f62fe;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #0f62fe;
+    outline-offset: 1px;
+  }
+}
+
+.format-btn__label {
+  font-family: 'Times New Roman', Georgia, serif;
+  font-size: 14px;
+  color: inherit;
+  line-height: 1;
+
+  &--bold {
+    font-weight: bold;
+  }
+
+  &--italic {
+    font-style: italic;
+  }
+
+  &--underline {
+    text-decoration: underline;
+  }
+
+  &--strikethrough {
+    text-decoration: line-through;
+  }
+
+  &--highlight {
+    background-color: #ffff00;
+    padding: 0 2px;
+  }
+}
+
 // ─── Ghost button sizing tweaks ───────────────────────────────────────────────
 
 .word-ribbon .cds--btn--ghost {
diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx
index b2f0c57..de48ef9 100644
--- a/src/components/Ribbon/Ribbon.tsx
+++ b/src/components/Ribbon/Ribbon.tsx
@@ -4,10 +4,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tabs, Tab, TabList, TabPanels, TabPanel, Button } from '@carbon/react';
 import {
-  TextBold,
-  TextItalic,
-  TextUnderline,
-  TextStrikethrough,
   TextAlignLeft,
   TextAlignCenter,
   TextAlignRight,
@@ -22,9 +18,6 @@ import {
   Link,
   TextIndentMore,
   TextIndentLess,
-  TextSubscript,
-  TextSuperscript,
-  TextHighlight,
   TextClearFormat,
   TextLineSpacing,
   SpellCheck,
@@ -81,6 +74,31 @@ const RibbonChunk = ({
 
 const RibbonDivider = () => <div className="ribbon-divider" />;
 
+// ─── Format Button (styled-text toggle button) ────────────────────────────────
+
+const FormatButton = ({
+  active = false,
+  onClick,
+  title,
+  children,
+}: {
+  active?: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <button
+    type="button"
+    className={`format-btn${active ? ' format-btn--active' : ''}`}
+    onClick={onClick}
+    title={title}
+    aria-label={title}
+    aria-pressed={active}
+  >
+    {children}
+  </button>
+);
+
 // ─── Dialog Launcher Icon ────────────────────────────────────────────────────
 
 const DialogLauncherIcon = () => (
@@ -186,11 +204,52 @@ const FONTS = [
 ];
 const SIZES = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '72'];
 
-const STYLES: { label: string; cmd: string; val: string }[] = [
-  { label: 'Normal', cmd: 'formatBlock', val: 'p' },
-  { label: 'Heading 1', cmd: 'formatBlock', val: 'h1' },
-  { label: 'Heading 2', cmd: 'formatBlock', val: 'h2' },
-  { label: 'Heading 3', cmd: 'formatBlock', val: 'h3' },
+const STYLES: { label: string; cmd: string; val: string; previewStyle: React.CSSProperties }[] = [
+  {
+    label: 'Normal',
+    cmd: 'formatBlock',
+    val: 'p',
+    previewStyle: {
+      fontFamily: 'Calibri, sans-serif',
+      fontSize: '11px',
+      fontWeight: '400',
+      color: '#161616',
+    },
+  },
+  {
+    label: 'Heading 1',
+    cmd: 'formatBlock',
+    val: 'h1',
+    previewStyle: {
+      fontFamily: "'Calibri Light', Calibri, sans-serif",
+      fontSize: '15px',
+      fontWeight: '700',
+      color: '#2e74b5',
+    },
+  },
+  {
+    label: 'Heading 2',
+    cmd: 'formatBlock',
+    val: 'h2',
+    previewStyle: {
+      fontFamily: "'Calibri Light', Calibri, sans-serif",
+      fontSize: '13px',
+      fontWeight: '700',
+      color: '#2e74b5',
+    },
+  },
+  {
+    label: 'Heading 3',
+    cmd: 'formatBlock',
+    val: 'h3',
+    previewStyle: {
+      fontFamily: "'Calibri Light', Calibri, sans-serif",
+      fontSize: '12px',
+      fontWeight: '700',
+      fontStyle: 'italic',
+      color: '#1f3864',
+    },
+  },
 ];
 
 const LINE_SPACINGS = ['1.0', '1.15', '1.5', '2.0', '2.5', '3.0'];
@@ -377,69 +436,27 @@ const Ribbon = ({
                   </select>
                 </div>
                 <div className="ribbon-row">
-                  <Button className="items-center"
-                    kind={isBold ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextBold}
-                    iconDescription="Bold"
-                    tooltipPosition="bottom"
-                    onClick={fmt('bold')}
-                  />
-                  <Button className="items-center"
-                    kind={isItalic ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextItalic}
-                    iconDescription="Italic"
-                    tooltipPosition="bottom"
-                    onClick={fmt('italic')}
-                  />
-                  <Button className="items-center"
-                    kind={isUnderline ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextUnderline}
-                    iconDescription="Underline"
-                    tooltipPosition="bottom"
-                    onClick={fmt('underline')}
-                  />
-                  <Button className="items-center"
-                    kind={isStrikethrough ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextStrikethrough}
-                    iconDescription="Strikethrough"
-                    tooltipPosition="bottom"
-                    onClick={fmt('strikeThrough')}
-                  />
-                  <Button className="items-center"
-                    kind={isSubscript ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextSubscript}
-                    iconDescription="Subscript"
-                    tooltipPosition="bottom"
-                    onClick={fmt('subscript')}
-                  />
-                  <Button className="items-center"
-                    kind={isSuperscript ? 'primary' : 'ghost'}
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextSuperscript}
-                    iconDescription="Superscript"
-                    tooltipPosition="bottom"
-                    onClick={fmt('superscript')}
-                  />
-                  <Button className="items-center"
-                    kind="ghost"
-                    size="sm"
-                    hasIconOnly
-                    renderIcon={TextHighlight}
-                    iconDescription="Highlight"
-                    tooltipPosition="bottom"
-                    onClick={fmt('hiliteColor', '#FFFF00')}
-                  />
+                  <FormatButton active={isBold} onClick={fmt('bold')} title="Bold">
+                    <span className="format-btn__label format-btn__label--bold">B</span>
+                  </FormatButton>
+                  <FormatButton active={isItalic} onClick={fmt('italic')} title="Italic">
+                    <span className="format-btn__label format-btn__label--italic">I</span>
+                  </FormatButton>
+                  <FormatButton active={isUnderline} onClick={fmt('underline')} title="Underline">
+                    <span className="format-btn__label format-btn__label--underline">U</span>
+                  </FormatButton>
+                  <FormatButton active={isStrikethrough} onClick={fmt('strikeThrough')} title="Strikethrough">
+                    <span className="format-btn__label format-btn__label--strikethrough">S</span>
+                  </FormatButton>
+                  <FormatButton active={isSubscript} onClick={fmt('subscript')} title="Subscript">
+                    <span className="format-btn__label">X<sub>2</sub></span>
+                  </FormatButton>
+                  <FormatButton active={isSuperscript} onClick={fmt('superscript')} title="Superscript">
+                    <span className="format-btn__label">X<sup>2</sup></span>
+                  </FormatButton>
+                  <FormatButton onClick={fmt('hiliteColor', '#FFFF00')} title="Highlight">
+                    <span className="format-btn__label format-btn__label--highlight">A</span>
+                  </FormatButton>
                   <Button className="items-center"
                     kind="ghost"
                     size="sm"
@@ -554,7 +571,7 @@ const Ribbon = ({
                       className="ribbon-style-btn items-center"
                       onClick={() => onFormat(style.cmd, style.val)}
                     >
-                      {style.label}
+                      <span style={style.previewStyle}>{style.label}</span>
                     </Button>
                   ))}
                 </div>