@momo-webplatform/mobase-next 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase-next",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "sideEffects": [
     "**/*.css",
     "./src/styles/**"
@@ -68,8 +68,8 @@
     "eslint": "^8.57.0",
     "tsup": "^8.0.2",
     "typescript": "5.5.4",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/styles/globals.css

@@ -448,10 +448,693 @@ html {
   tab-size: 4;
   touch-action: manipulation;
   text-rendering: optimizelegibility;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-synthesis: none;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
+}
+
+
+/* MOBASE PROSE */
+
+/* Biến toàn cục (được chuyển từ biến SCSS $) */
+:root {
+  --prose-divider-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8 15h2v1H8zm-2.5-3h7v1h-7zM3 9h12v1H3zM0 6h18v1H0zm2-3h14v1H2zm5-3h4v1H7z'/%3E%3C/svg%3E");
+}
+
+/* Base style cho .mobase-prose áp dụng các tokens mặc định (Desktop) */
+.mobase-prose {
+  /* Tokens Colors */
+  --prose-color-accent: rgb(var(--mobase-pink-500));
+  --prose-color-text: #212123;
+  --prose-color-muted: #000000a3;
+  --prose-color-caption: #0000007a;
+  --prose-color-footnote: #858585;
+  --prose-color-link: var(--prose-color-accent);
+  --prose-color-link-visited: rgb(var(--mobase-pink-700));
+  --prose-color-link-hover: rgb(var(--mobase-pink-400));
+  --prose-color-figure-border: #0000000a;
+  --prose-color-kbd-text: #000;
+  --prose-color-kbd-bg: #ffffff7a;
+  --prose-color-table-head: #333;
+
+  /* Tokens Weights */
+  --prose-weight-normal: 400;
+  --prose-weight-medium: 500;
+  --prose-weight-semibold: 600;
+  --prose-weight-bold: bold;
+
+  /* Tokens Spacing */
+  --prose-space-xs: 0.25rem;
+  --prose-space-sm: 0.625rem;
+  --prose-space-md: 1.25rem;
+  --prose-space-lg: 1.5rem;
+  --prose-space-xl: 2rem;
+  --prose-space-2xl: 2.5rem;
+  --prose-space-3xl: 3.5rem;
+  --prose-space-4xl: 3.75rem;
+  --prose-space-5xl: 5rem;
+  --prose-heading-margin: var(--prose-space-xl) 0 var(--prose-space-md);
+  --prose-subheading-margin: var(--prose-space-xl) 0 var(--prose-space-sm);
+  --prose-h2-h3-gap: var(--prose-space-2xl);
+  --prose-blockquote-margin: var(--prose-space-5xl) 0;
+  --prose-blockquote-padding-top-mobile: var(--prose-space-3xl);
+  --prose-blockquote-mark-gap: var(--prose-space-lg);
+  --prose-table-section-margin: var(--prose-space-xl);
+  --prose-figure-gap: var(--prose-space-2xl);
+  --prose-figure-caption-gap: var(--prose-space-sm);
+
+  /* Tokens Typography Desktop */
+  --prose-h1-size: 4.75rem;
+  --prose-h1-line: 4.75rem;
+  --prose-h2-size: 1.75rem;
+  --prose-h2-line: 2.25rem;
+  --prose-h3-size: 1.25rem;
+  --prose-h3-line: 1.5rem;
+  --prose-h4-size: 1.125rem;
+  --prose-h4-line: 1.5rem;
+  --prose-h5-size: 1.125rem;
+  --prose-h5-line: 1.5rem;
+  --prose-h6-size: 1rem;
+  --prose-h6-line: 1.25rem;
+  --prose-body-size: 1rem;
+  --prose-body-line: 1.5rem;
+  --prose-large-size: 1.25rem;
+  --prose-large-line: 2rem;
+  --prose-footnote-size: 0.9375rem;
+  --prose-footnote-line: 1.25rem;
+  --prose-caption-size: 0.875rem;
+  --prose-caption-line: 1.25rem;
+  --prose-code-size: 0.9375rem;
+  --prose-code-line: 1.5rem;
+  --prose-quote-size: 1.5rem;
+  --prose-quote-line: 2rem;
+  --prose-quote-small-size: 1.5rem;
+  --prose-quote-small-line: 2rem;
+  --prose-quote-mark-size: 4.75rem;
+  --prose-quote-letter-spacing: -0.03125rem;
+  --prose-blockquote-size: 1.125rem;
+  --prose-blockquote-line: 1.5rem;
+  --prose-table-head-size: 0.875rem;
+  --prose-table-head-line: 1rem;
+  --prose-table-body-size: 0.9375rem;
+  --prose-table-body-line: 1.25rem;
+
+  /* Tokens Misc */
+  --prose-media-radius: 0.625rem;
+  --prose-kbd-radius: 8px;
+  --prose-divider-width: 1.125rem;
+  --prose-divider-height: 1rem;
+  --prose-divider-opacity: 0.25;
+  --prose-divider-margin: var(--prose-space-4xl) auto;
+  --prose-large-divider-margin: var(--prose-space-3xl) auto;
+  --prose-transition-duration: 0.125s;
+  --prose-blockquote-width-desktop: 125%;
+  --prose-list-bullet-size: 0.375rem;
+  --prose-list-bullet-radius: 0.1875rem;
+  --prose-table-cell-min-width: 12.5rem;
+
+  position: relative;
+}
+
+/* Responsive: Ghi đè Typography trên Mobile (max-width: 767px) */
+@media screen and (max-width: 767px) {
+  .mobase-prose {
+    --prose-h1-size: 4.75rem;
+    --prose-h1-line: 4.75rem;
+    --prose-h2-size: 1.5rem;
+    --prose-h2-line: 2rem;
+    --prose-h3-size: 1.25rem;
+    --prose-h3-line: 1.5rem;
+    --prose-h4-size: 1.125rem;
+    --prose-quote-size: 1.5rem;
+    --prose-quote-line: 2rem;
+    --prose-quote-small-size: 1.25rem;
+    --prose-quote-small-line: 1.5rem;
+    --prose-quote-letter-spacing: 0;
+  }
+}
+
+/* Media query cho khoảng màn hình từ tablet đến desktop nhỏ */
+@media screen and (min-width: 768px) and (max-width: 1439px) {
+  .mobase-prose {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* Chi tiết các Selector con bên trong .mobase-prose */
+.mobase-prose h1,
+.mobase-prose h2,
+.mobase-prose h3 {
+  margin: var(--prose-heading-margin);
+}
+
+.mobase-prose h1,
+.mobase-prose h2,
+.mobase-prose h3,
+.mobase-prose h4,
+.mobase-prose h6 {
+  text-wrap: pretty;
+}
+
+.mobase-prose h1 {
+  font-size: var(--prose-h1-size);
+  font-weight: var(--prose-weight-bold);
+  line-height: var(--prose-h1-line);
+}
+
+.mobase-prose h2 {
+  font-size: var(--prose-h2-size);
+  font-weight: var(--prose-weight-bold);
+  line-height: var(--prose-h2-line);
+}
+
+.mobase-prose h2+h3 {
+  margin-top: var(--prose-h2-h3-gap);
+}
+
+.mobase-prose h3 {
+  font-size: var(--prose-h3-size);
+  font-weight: var(--prose-weight-bold);
+  line-height: var(--prose-h3-line);
+}
+
+@media screen and (max-width: 767px) {
+  .mobase-prose h3 {
+    letter-spacing: 0;
+  }
+}
+
+.mobase-prose h4,
+.mobase-prose h5,
+.mobase-prose h6 {
+  letter-spacing: 0;
+  margin: var(--prose-subheading-margin);
+}
+
+.mobase-prose h4 {
+  font-size: var(--prose-h4-size);
+  font-weight: var(--prose-weight-bold);
+  line-height: var(--prose-h4-line);
+}
+
+.mobase-prose h5 {
+  font-size: var(--prose-h5-size);
+  line-height: var(--prose-h5-line);
+}
+
+.mobase-prose h6 {
+  font-size: var(--prose-h6-size);
+  font-weight: var(--prose-weight-bold);
+  line-height: var(--prose-h6-line);
+}
+
+.mobase-prose p {
+  letter-spacing: 0;
+  text-wrap: pretty;
+  margin-bottom: var(--prose-space-md);
+  font-size: var(--prose-body-size);
+  font-weight: var(--prose-weight-normal);
+  line-height: var(--prose-body-line);
+}
+
+.mobase-prose p strong {
+  font-weight: var(--prose-weight-semibold);
+}
+
+.mobase-prose p:last-child {
+  margin-bottom: 0;
+}
+
+.mobase-prose .large {
+  color: var(--prose-color-text);
+  font-size: var(--prose-large-size);
+  line-height: var(--prose-large-line);
+}
+
+.mobase-prose .large+.large {
+  margin-top: var(--prose-space-md);
+}
+
+/* Giả lập mixin prose-divider-icon bằng CSS thuần */
+.mobase-prose .large:not(:last-child):not(:has(+ .large)):not(:has(+ hr))::after {
+  content: "";
+  margin: var(--prose-large-divider-margin);
+  background-color: var(--prose-color-accent);
+  border: none;
+  width: var(--prose-divider-width);
+  height: var(--prose-divider-height);
+  display: block;
+  -webkit-mask-image: var(--prose-divider-mask);
+  mask-image: var(--prose-divider-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.mobase-prose .footnote {
+  color: var(--prose-color-footnote);
+  font-size: var(--prose-footnote-size);
+  font-weight: var(--prose-weight-normal);
+  line-height: var(--prose-footnote-line);
+}
+
+.mobase-prose hr {
+  opacity: var(--prose-divider-opacity);
+  margin: var(--prose-divider-margin);
+  background-color: var(--prose-color-accent);
+  border: none;
+  width: var(--prose-divider-width);
+  height: var(--prose-divider-height);
+  display: block;
+  -webkit-mask-image: var(--prose-divider-mask);
+  mask-image: var(--prose-divider-mask);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.mobase-prose img,
+.mobase-prose video {
+  border-radius: var(--prose-media-radius);
+  width: 100%;
+  display: block;
+  max-width: 100% !important;
+  height: auto !important;
+  margin-bottom: var(--prose-space-md);
+}
+
+.mobase-prose em {
+  font-style: italic;
+}
+
+.mobase-prose strong {
+  font-weight: var(--prose-weight-semibold);
+}
+
+.mobase-prose ol,
+.mobase-prose ul {
+  margin-bottom: var(--prose-space-md);
+}
+
+.mobase-prose ol li,
+.mobase-prose ul li {
+  margin-bottom: var(--prose-space-sm);
+  padding-left: 1.75rem;
+  font-size: var(--prose-body-size);
+  line-height: var(--prose-body-line);
+  position: relative;
+}
+
+.mobase-prose ol {
+  counter-reset: ordered-list;
+}
+
+.mobase-prose ol li {
+  counter-increment: ordered-list;
+  padding-left: 2rem;
+}
+
+.mobase-prose ol li::before {
+  content: counter(ordered-list) ".";
+  font-weight: var(--prose-weight-semibold);
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.mobase-prose ul li {
+  padding-left: 1.5625rem;
+}
+
+.mobase-prose ul li::before {
+  content: "";
+  background-color: var(--prose-color-accent);
+  border-radius: var(--prose-list-bullet-radius);
+  width: var(--prose-list-bullet-size);
+  height: var(--prose-list-bullet-size);
+  display: block;
+  position: absolute;
+  top: 0.5625rem;
+  left: 0.4375rem;
+}
+
+.mobase-prose ul li ul {
+  margin: var(--prose-space-sm) 0;
+}
+
+.mobase-prose figure.no-border video,
+.mobase-prose figure.no-border img {
+  border: none;
+}
+
+.mobase-prose figure.no-border .video-player {
+  box-shadow: none;
+  border: none;
+}
+
+.mobase-prose figure video,
+.mobase-prose figure img {
+  border: 1px solid var(--prose-color-figure-border);
+}
+
+.mobase-prose figure p {
+  color: var(--prose-color-caption);
+  margin-top: var(--prose-figure-caption-gap);
+  font-size: var(--prose-caption-size);
+  line-height: var(--prose-caption-line);
+}
+
+/* Giả lập mixin prose-color-transition */
+.mobase-prose figure a {
+  color: inherit;
+  font-weight: var(--prose-weight-bold);
+  text-decoration: underline;
+  transition: color var(--prose-transition-duration) ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobase-prose figure a {
+    transition-duration: 1ms;
+  }
+}
+
+.mobase-prose figure a:visited {
+  color: var(--prose-color-text);
+}
+
+.mobase-prose figure a:hover,
+.mobase-prose figure a:active {
+  color: var(--prose-color-caption);
+}
+
+.mobase-prose figure kbd {
+  min-width: 1.125rem;
+  min-height: 1.125rem;
+}
+
+.mobase-prose p+figure,
+.mobase-prose ul+figure {
+  margin: var(--prose-figure-gap) 0;
+}
+
+.mobase-prose figure+p {
+  margin-top: var(--prose-space-md);
+}
+
+.mobase-prose a:not(.button) {
+  color: var(--prose-color-link);
+  font-weight: var(--prose-weight-semibold);
+  text-decoration: underline;
+  transition: color var(--prose-transition-duration) ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobase-prose a:not(.button) {
+    transition-duration: 1ms;
+  }
+}
+
+.mobase-prose a:not(.button):visited {
+  color: var(--prose-color-link-visited);
+}
+
+.mobase-prose a:not(.button):hover,
+.mobase-prose a:not(.button):active {
+  color: var(--prose-color-link-hover);
+}
+
+.mobase-prose kbd {
+  color: var(--prose-color-kbd-text);
+  background-color: var(--prose-color-kbd-bg);
+  border-radius: var(--prose-kbd-radius);
+  justify-content: center;
+  align-items: center;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0 var(--prose-space-xs);
+  font-size: var(--prose-caption-size);
+  font-weight: var(--prose-weight-bold);
+  display: inline-flex;
+  box-shadow: inset 0 0 0 1px #0000001a, inset 0 -1px #0000001a, inset 0 -2px #0000001a;
+}
+
+.mobase-prose kbd~kbd {
+  margin-left: var(--prose-space-xs);
+}
+
+.mobase-prose blockquote {
+  font-size: var(--prose-blockquote-size);
+  line-height: var(--prose-blockquote-line);
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  border: 0 solid;
+  margin: 0;
+  padding: 0;
+  color: var(--gray-900);
+  border-inline-start-width: .25rem;
+  border-inline-start-color: rgba(var(--mobase-pink-500));
+  quotes: "“" "”" "‘" "’";
+  margin-top: 1.66667em;
+  margin-bottom: 1.66667em;
+  padding-inline-start: 1em;
+  margin-block: var(--prose-space-xl);
+  border-left-style: solid;
+  padding-left: var(--prose-space-md);
+  font-weight: var(--prose-weight-normal);
+  border-color: rgba(var(--mobase-pink-500));
+  border-left-width: 2px;
+  font-style: normal;
+}
+
+.mobase-prose blockquote>p:last-of-type {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 767px) {
+  .mobase-prose blockquote {
+    padding-left: var(--prose-space-sm);
+  }
+}
+
+.mobase-prose pre code {
+  padding: var(--prose-space-lg);
+  font-size: var(--prose-code-size);
+  line-height: var(--prose-code-line);
+}
+
+.mobase-prose .table-wrapper,
+.mobase-prose .table-responsive {
+  overflow: auto;
+  margin-bottom: var(--prose-table-section-margin);
+}
+
+@media screen and (max-width: 767px) {
+
+  .mobase-prose .table-wrapper,
+  .mobase-prose .table-responsive {
+    margin-right: -1rem;
+  }
+}
+
+.mobase-prose .table-wrapper table,
+.mobase-prose .table-responsive table {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 1023px) {
+
+  .mobase-prose .table-wrapper table,
+  .mobase-prose .table-responsive table {
+    min-width: -webkit-max-content;
+    min-width: max-content;
+  }
+
+  .mobase-prose .table-wrapper table thead th,
+  .mobase-prose .table-responsive table thead th {
+    width: var(--prose-table-cell-min-width);
+    padding-right: var(--prose-space-md);
+  }
+}
+
+.mobase-prose table {
+  width: 100%;
+  box-sizing: border-box;
+  border: 0 solid;
+  margin-bottom: var(--prose-table-section-margin);
+  padding: 0;
+}
+
+@media screen and (min-width: 1024px) {
+  .mobase-prose table {
+    table-layout: fixed;
+  }
+}
+
+.mobase-prose thead,
+.mobase-prose tbody {
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(var(--mobase-gray-300));
+}
+
+.mobase-prose thead tr th,
+.mobase-prose tbody tr th {
+  color: var(--prose-color-table-head);
+  text-align: left;
+  font-size: var(--prose-table-head-size);
+  font-weight: var(--prose-weight-semibold);
+  line-height: var(--prose-table-head-line);
+  padding-bottom: var(--prose-space-sm);
+}
+
+.mobase-prose thead tr th *,
+.mobase-prose tbody tr th * {
+  font-weight: bold;
+}
+
+.mobase-prose thead tr th:first-child,
+.mobase-prose tbody tr th:first-child {
+  padding-left: var(--prose-space-sm);
+}
+
+.mobase-prose thead tr th:last-child,
+.mobase-prose tbody tr th:last-child {
+  padding-right: var(--prose-space-sm);
+}
+
+.mobase-prose tbody {
+  font-size: var(--prose-table-body-size);
+  font-weight: 300;
+  line-height: var(--prose-table-body-line);
+}
+
+.mobase-prose tbody p {
+  margin-bottom: 0;
+}
+
+.mobase-prose tbody tr {
+  opacity: 1;
+  padding: var(--prose-space-sm);
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(var(--mobase-gray-200));
+}
+
+.mobase-prose tbody tr td {
+  padding: var(--prose-space-sm) 0.625rem var(--prose-space-sm) 0;
+  border: none;
+}
+
+.mobase-prose tbody tr td:first-child {
+  padding-left: var(--prose-space-sm);
+}
+
+.mobase-prose tbody tr td:last-child {
+  padding-right: var(--prose-space-sm);
+}
+
+.mobase-prose tbody tr td strong {
+  font-weight: var(--prose-weight-medium);
+}
+
+
+/* Biến thể 1: Variant .mobase-prose-md (FAQ, Feature rich text, v.v...) */
+.mobase-prose.mobase-prose-md {
+  /* Ghi đè tokens mobile lên mọi kích thước màn hình */
+  --prose-h1-size: 4.75rem;
+  --prose-h1-line: 4.75rem;
+  --prose-h2-size: 1.5rem;
+  --prose-h2-line: 2rem;
+  --prose-h3-size: 1.25rem;
+  --prose-h3-line: 1.5rem;
+  --prose-h4-size: 1.125rem;
+  --prose-quote-size: 1.5rem;
+  --prose-quote-line: 2rem;
+  --prose-quote-small-size: 1.25rem;
+  --prose-quote-small-line: 1.5rem;
+  --prose-quote-letter-spacing: 0;
+}
+
+.mobase-prose.mobase-prose-md h3 {
+  letter-spacing: 0;
+}
+
+.mobase-prose.mobase-prose-md blockquote {
+  padding-left: var(--prose-space-sm);
+}
+
+.mobase-prose.mobase-prose-md .table-wrapper,
+.mobase-prose.mobase-prose-md .table-responsive {
+  margin-right: -1rem;
+}
+
+
+/* Biến thể 2: Variant .mobase-prose-sm (Bản thu gọn - Compact) */
+.mobase-prose.mobase-prose-sm {
+  /* Tokens Spacing Compact */
+  --prose-space-xs: 0.25rem;
+  --prose-space-sm: 0.5rem;
+  --prose-space-md: 1rem;
+  --prose-space-lg: 1.25rem;
+  --prose-space-xl: 1.75rem;
+  --prose-space-2xl: 2rem;
+  --prose-space-3xl: 3rem;
+  --prose-space-4xl: 3.25rem;
+  --prose-space-5xl: 4.25rem;
+
+  /* Tokens Typography Compact */
+  --prose-h1-size: 4.15625rem;
+  --prose-h1-line: 4.15625rem;
+  --prose-h2-size: 1.3125rem;
+  --prose-h2-line: 1.75rem;
+  --prose-h3-size: 1.09375rem;
+  --prose-h3-line: 1.3125rem;
+  --prose-h4-size: 0.984375rem;
+  --prose-h4-line: 1.3125rem;
+  --prose-h5-size: 0.984375rem;
+  --prose-h5-line: 1.3125rem;
+  --prose-h6-size: 0.875rem;
+  --prose-h6-line: 1.09375rem;
+  --prose-body-size: 0.875rem;
+  --prose-body-line: 1.3125rem;
+  --prose-large-size: 1.09375rem;
+  --prose-large-line: 1.75rem;
+  --prose-footnote-size: 0.8125rem;
+  --prose-footnote-line: 1.09375rem;
+  --prose-caption-size: 0.75rem;
+  --prose-caption-line: 1.09375rem;
+  --prose-code-size: 0.8125rem;
+  --prose-code-line: 1.3125rem;
+  --prose-quote-size: 1.3125rem;
+  --prose-quote-line: 1.75rem;
+  --prose-quote-small-size: 1.09375rem;
+  --prose-quote-small-line: 1.3125rem;
+  --prose-quote-mark-size: 4.15625rem;
+  --prose-quote-letter-spacing: 0;
+  --prose-blockquote-size: 0.984375rem;
+  --prose-blockquote-line: 1.3125rem;
+  --prose-table-head-size: 0.75rem;
+  --prose-table-head-line: 0.875rem;
+  --prose-table-body-size: 0.8125rem;
+  --prose-table-body-line: 1.09375rem;
+
+  /* Tokens Misc Compact */
+  --prose-media-radius: 0.625rem;
+  --prose-divider-width: 1rem;
+  --prose-divider-height: 0.875rem;
+  --prose-list-bullet-size: 0.3125rem;
+  --prose-table-cell-min-width: 10.9375rem;
+}
+
+.mobase-prose.mobase-prose-sm h3 {
+  letter-spacing: 0;
+}
+
+.mobase-prose.mobase-prose-sm blockquote {
+  padding-left: var(--prose-space-sm);
+}
+
+.mobase-prose.mobase-prose-sm .table-wrapper,
+.mobase-prose.mobase-prose-sm .table-responsive {
+  margin-right: -1rem;
 }