@nldd/design-system 0.8.37

package/dist/css/rich-text.css

@@ -0,0 +1,444 @@
+/* # Host */
+
+nldd-rich-text {
+	--_spacing: var(--components-rich-text-spacing-snug);
+
+	display: block;
+	color: var(--semantics-content-color);
+	font: var(--primitives-font-body-md-regular-snug);
+	-webkit-text-size-adjust: 100%;
+	text-size-adjust: 100%;
+}
+
+nldd-rich-text[spacing="flat"] {
+	--_spacing: var(--components-rich-text-spacing-flat);
+}
+
+nldd-rich-text[spacing="tight"] {
+	--_spacing: var(--components-rich-text-spacing-tight);
+}
+
+nldd-rich-text[spacing="snug"] {
+	--_spacing: var(--components-rich-text-spacing-snug);
+}
+
+nldd-rich-text[spacing="loose"] {
+	--_spacing: var(--components-rich-text-spacing-loose);
+}
+
+nldd-rich-text[hidden] {
+	display: none;
+}
+
+nldd-rich-text > :first-child {
+	margin-top: 0;
+}
+
+nldd-rich-text > :last-child {
+	margin-bottom: 0;
+}
+
+nldd-rich-text *:focus-visible {
+	outline: var(--semantics-focus-ring-outline);
+	outline-offset: var(--semantics-focus-ring-outline-offset);
+	box-shadow: var(--semantics-focus-ring-box-shadow);
+}
+
+nldd-rich-text *:focus:not(:focus-visible) {
+	outline: none;
+}
+
+
+/* # Paragraph */
+
+nldd-rich-text p {
+	max-width: var(--primitives-area-720);
+	margin: var(--_spacing) 0;
+}
+
+
+/* # Heading 1 */
+
+nldd-rich-text h1 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-1-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-1-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-1-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-1-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-1-lg);
+	}
+}
+
+
+/* # Heading 2 */
+
+nldd-rich-text h2 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-2-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-2-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-2-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-2-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-2-lg);
+	}
+}
+
+
+/* # Heading 3 */
+
+nldd-rich-text h3 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-3-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-3-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-3-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-3-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-3-lg);
+	}
+}
+
+
+/* # Heading 4 */
+
+nldd-rich-text h4 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-4-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-4-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-4-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-4-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-4-lg);
+	}
+}
+
+
+/* # Heading 5 */
+
+nldd-rich-text h5 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-5-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-5-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-5-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-5-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-5-lg);
+	}
+}
+
+
+/* # Heading 6 */
+
+nldd-rich-text h6 {
+	margin-top: calc(var(--_spacing) * 2);
+	margin-bottom: var(--_spacing);
+	font: var(--primitives-font-display-6-sm);
+
+	@media (min-width: 641px) {
+		font: var(--primitives-font-display-6-md);
+	}
+
+	@media (min-width: 1008px) {
+		font: var(--primitives-font-display-6-lg);
+	}
+
+	@container layout-area (min-width: 641px) {
+		font: var(--primitives-font-display-6-md);
+	}
+
+	@container layout-area (min-width: 1008px) {
+		font: var(--primitives-font-display-6-lg);
+	}
+}
+
+
+/* # Lists */
+
+nldd-rich-text ul {
+	margin: 0;
+	padding-left: var(--components-rich-text-grid-size);
+	list-style-type: disc;
+}
+
+nldd-rich-text ol {
+	margin: 0;
+	padding-left: var(--components-rich-text-grid-size);
+	list-style-type: decimal;
+}
+
+nldd-rich-text > ul,
+nldd-rich-text > ol {
+	margin: var(--_spacing) 0;
+}
+
+nldd-rich-text ol > li > ol {
+	list-style-type: lower-alpha;
+}
+
+
+/* # List Item */
+
+nldd-rich-text li {
+	max-width: var(--primitives-area-720);
+	margin: calc(var(--_spacing) / 2) 0;
+	padding: 0;
+}
+
+
+/* # Link */
+
+nldd-rich-text a {
+	border-radius: var(--primitives-corner-radius-xxs);
+	color: var(--semantics-links-color);
+	text-decoration: underline;
+	text-underline-offset: var(--primitives-space-2);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--semantics-links-is-hovered-color);
+	}
+
+	&:active {
+		color: var(--semantics-links-is-active-color);
+	}
+}
+
+
+/* # Strong and Bold */
+
+nldd-rich-text strong,
+nldd-rich-text b {
+	color: inherit;
+	font-weight: var(--primitives-font-weight-body-bold);
+}
+
+
+/* # Emphasis and Italic */
+
+nldd-rich-text em,
+nldd-rich-text i {
+	color: inherit;
+	font-style: italic;
+}
+
+
+/* # Code */
+
+nldd-rich-text code {
+	padding: var(--primitives-space-4);
+	border-radius: var(--semantics-controls-xs-corner-radius);
+	background-color: var(--semantics-surfaces-tinted-background-color);
+	font-family: var(--primitives-font-family-monospace);
+	font-size: 0.85em;
+}
+
+
+/* # Mark */
+
+nldd-rich-text mark {
+	padding: var(--primitives-space-1) var(--primitives-space-2);
+	border-radius: var(--semantics-controls-xs-corner-radius);
+	background-color: var(--semantics-content-mark-background-color);
+	color: var(--semantics-content-mark-color);
+}
+
+
+/* # Figure */
+
+nldd-rich-text figure {
+	display: flex;
+	flex-direction: column;
+	gap: var(--primitives-space-8);
+	margin: 0;
+}
+
+
+/* # Figure Caption */
+
+nldd-rich-text figcaption {
+	color: var(--semantics-content-secondary-color);
+	font: var(--primitives-font-body-xs-regular-snug);
+	text-align: left;
+}
+
+
+/* # Blockquote */
+
+nldd-rich-text blockquote {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--semantics-blockquotes-md-spacing) / 2);
+	max-width: var(--semantics-blockquotes-max-width);
+	margin-block: var(--semantics-blockquotes-md-spacing);
+	margin-inline: 0;
+	padding-inline: var(--semantics-blockquotes-md-spacing);
+	padding-top: var(--semantics-blockquotes-md-spacing);
+	padding-bottom: 0;
+	border-top: var(--semantics-blockquotes-border);
+	border-left: var(--semantics-blockquotes-border);
+	border-top-left-radius: var(--semantics-blockquotes-corner-radius);
+	font: var(--semantics-blockquotes-md-quote-font);
+
+	@media (max-width: 640px) {
+		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
+		margin-block: var(--semantics-blockquotes-sm-spacing);
+		padding-inline: var(--semantics-blockquotes-sm-spacing);
+		padding-top: var(--semantics-blockquotes-sm-spacing);
+		padding-bottom: 0;
+		font: var(--semantics-blockquotes-sm-quote-font);
+	}
+
+	@container layout-area (max-width: 640px) {
+		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
+		margin-block: var(--semantics-blockquotes-sm-spacing);
+		padding-inline: var(--semantics-blockquotes-sm-spacing);
+		padding-top: var(--semantics-blockquotes-sm-spacing);
+		padding-bottom: 0;
+		font: var(--semantics-blockquotes-sm-quote-font);
+	}
+}
+
+nldd-rich-text blockquote > p {
+	margin: 0;
+}
+
+
+/* # Inline Quote */
+
+nldd-rich-text q {
+	font-style: italic;
+
+	&::before {
+		content: open-quote;
+	}
+
+	&::after {
+		content: close-quote;
+	}
+}
+
+
+/* # Image */
+
+nldd-rich-text img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+
+
+/* # Horizontal Rule */
+
+nldd-rich-text hr {
+	margin: var(--_spacing) 0;
+	border: none;
+	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
+}
+
+
+/* # Table */
+
+nldd-rich-text table {
+	display: block;
+	width: 100%;
+	border-collapse: collapse;
+	font: var(--primitives-font-body-md-regular-tight);
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	scrollbar-width: thin;
+
+	@media (min-width: 641px) {
+		display: table;
+		overflow-x: unset;
+		scrollbar-width: unset;
+	}
+
+	@container layout-area (min-width: 641px) {
+		display: table;
+		overflow-x: unset;
+		scrollbar-width: unset;
+	}
+}
+
+
+/* # Table Header Cell */
+
+nldd-rich-text th {
+	padding: var(--primitives-space-6);
+	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
+	font: var(--primitives-font-body-md-bold-snug);
+	text-align: left;
+}
+
+
+/* # Table Data Cell */
+
+nldd-rich-text td {
+	min-width: var(--primitives-area-120);
+	padding: var(--primitives-space-6);
+	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
+	font: var(--primitives-font-body-md-regular-snug);
+
+	@media (min-width: 641px) {
+		min-width: unset;
+	}
+
+	@container layout-area (min-width: 641px) {
+		min-width: unset;
+	}
+}