fluent-svelte-extra 1.0.0

package/src/site/styles/_markdown.scss

@@ -0,0 +1,260 @@
+@use "./mixins" as *;
+
+.markdown-body {
+	color: var(--text-primary);
+	font-size: 1.4rem;
+	line-height: 1.65;
+
+	// Spacing
+	> *:first-child {
+		margin-block-start: 0 !important;
+	}
+
+	> *:last-child {
+		margin-block-end: 0 !important;
+	}
+
+	> *:only-child {
+		margin: 0 !important;
+	}
+
+	blockquote,
+	details,
+	dl,
+	ol,
+	p,
+	pre,
+	table,
+	ul {
+		margin-block-start: 0;
+		margin-block-end: 16px;
+	}
+
+	// Images
+	figure {
+		margin-block: 16px;
+
+		&.margin- {
+			&top {
+				margin: 48px 0 16px 0;
+			}
+
+			&bottom {
+				margin: 16px 0 48px 0;
+			}
+		}
+
+		img {
+			max-width: 100%;
+			height: auto;
+			border: 1px solid var(--card-stroke-default);
+			border-radius: var(--overlay-corner-radius);
+		}
+
+		figcaption {
+			color: var(--text-secondary);
+		}
+	}
+
+	// Header text (<h1> through <h6>)
+	h1,
+	h2 {
+		padding-block-start: 1.5em;
+		padding-block-end: 0.3em;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: var(--font-family-display);
+		margin-block-start: 24px;
+		margin-block-end: 16px;
+		color: var(--text-primary);
+		font-weight: 600;
+		line-height: 1.25;
+	}
+
+	h1 {
+		font-size: var(--display-font-size);
+	}
+
+	h2 {
+		font-size: var(--title-large-font-size);
+	}
+
+	h3 {
+		font-size: var(--title-font-size);
+	}
+
+	h4 {
+		font-size: 1em;
+	}
+
+	h5 {
+		font-size: 0.875em;
+	}
+
+	h6 {
+		color: var(--text-tertiary);
+		font-size: 0.85em;
+	}
+
+	// Ordered & unordered lists
+	ol ol,
+	ol ul,
+	ul ol,
+	ul ul {
+		margin-block-start: 0;
+		margin-block-end: 0;
+	}
+
+	ol,
+	ul {
+		padding-inline-start: 2em;
+	}
+
+	li + li {
+		margin-block-start: 0.25em;
+	}
+
+	ol ol,
+	ul ol {
+		list-style-type: lower-roman;
+	}
+
+	ol,
+	ul {
+		padding-inline-start: 2em;
+	}
+
+	// Codeblocks
+	code,
+	kbd {
+		margin: 0;
+		padding-inline: 0.4em;
+		padding-block: 0.2em;
+		border: 1px solid var(--card-stroke-default);
+		border-radius: var(--control-corner-radius);
+		background-color: var(--card-background-default);
+		background-clip: padding-box;
+		font-family: var(--font-family-monospace);
+		font-size: 85%;
+		word-wrap: break-word;
+	}
+
+	kbd {
+		padding-inline: 0.4em;
+		padding-block: 0.3em;
+		color: hsl(70, 5%, 22%);
+		box-shadow: inset 0 -0.2em 0 var(--subtle-fill-secondary);
+
+		@media (prefers-color-scheme: dark) {
+			color: hsl(0, 0%, 83%);
+		}
+	}
+
+	pre {
+		padding-inline: 16px;
+		padding-block: 12px;
+		border: 1px solid var(--card-stroke-default);
+		border-radius: var(--control-corner-radius);
+		background-color: var(--card-background-default);
+		background-clip: padding-box;
+		overflow: auto;
+
+		code {
+			font-family: var(--fds-font-family-monospace);
+			padding: 0;
+			border: none;
+			background-color: transparent;
+		}
+	}
+
+	// Blockquotes
+	blockquote {
+		margin: 0;
+		padding: 0 1em;
+		color: var(--text-disabled);
+		border-inline-start: 0.25em solid var(--subtle-fill-secondary);
+	}
+
+	// Anchors
+	a:not(.icon-button):not(.button) {
+		color: var(--accent-text-primary);
+		text-decoration: underline;
+		text-decoration-skip-ink: none;
+
+		&:hover,
+		&:active {
+			text-decoration: none;
+		}
+
+		&:hover {
+			color: var(--accent-text-tertiary);
+		}
+
+		&:active {
+			color: var(--accent-text-secondary);
+		}
+	}
+
+	// Horizontal dividers
+	hr:not([class]) {
+		margin: 24px 0;
+		border: none;
+		border-block-start: 1px solid var(--divider-stroke-default);
+	}
+
+	// Tables
+	table:not(.calendar-view-table) {
+		display: inline-block;
+		max-inline-size: 100%;
+		border: 1px solid var(--card-stroke-default);
+		border-radius: var(--control-corner-radius);
+		border-collapse: collapse;
+		background-clip: padding-box;
+		overflow: auto;
+		text-align: start;
+
+		button {
+			width: 100%;
+		}
+
+		th,
+		td {
+			padding-inline: 12px;
+			padding-block: 6px;
+		}
+
+		td {
+			border-block-start: 1px solid var(--card-stroke-default);
+		}
+
+		th {
+			white-space: nowrap;
+			background-color: var(--card-background-secondary);
+			font-weight: 600;
+		}
+
+		tr {
+			vertical-align: middle;
+			background-color: var(--card-background-default);
+		}
+
+		:global(.info-bar) {
+			margin-block-end: 0;
+		}
+	}
+
+	.info-bar,
+	.copy-box {
+		margin-block-end: 24px;
+	}
+
+	.copy-box {
+		margin-block-start: 8px;
+	}
+}

package/src/site/styles/_mixins.scss

@@ -0,0 +1,319 @@
+@use "src/lib/mixins";
+
+@mixin icon($size: 14px) {
+	width: $size;
+	height: auto;
+	fill: currentColor;
+}
+
+@mixin prism-vs-light {
+	& {
+		color: #393a34;
+	}
+
+	.comment,
+	.prolog,
+	.doctype,
+	.cdata {
+		color: #008000;
+		font-style: italic;
+	}
+
+	.namespace {
+		opacity: 0.7;
+	}
+
+	.string {
+		color: #a31515;
+	}
+
+	.punctuation,
+	.operator {
+		color: #393a34; /* no highlight */
+	}
+
+	.url,
+	.symbol,
+	.number,
+	.boolean,
+	.variable,
+	.constant,
+	.inserted {
+		color: #36acaa;
+	}
+
+	.atrule,
+	.keyword,
+	.attr-value,
+	.language-autohotkey .selector,
+	.language-json .boolean,
+	.language-json .number,
+	&[class*="language-css"] {
+		color: #00f;
+	}
+
+	.function {
+		color: #393a34;
+	}
+
+	.deleted,
+	.language-autohotkey .tag {
+		color: #9a050f;
+	}
+
+	.selector,
+	.language-autohotkey .keyword {
+		color: #00009f;
+	}
+
+	.important {
+		color: #e90;
+	}
+
+	.important,
+	.bold {
+		font-weight: bold;
+	}
+
+	.italic {
+		font-style: italic;
+	}
+
+	.class-name,
+	.language-json .property {
+		color: #2b91af;
+	}
+
+	.tag,
+	.selector {
+		color: #800000;
+	}
+
+	.attr-name,
+	.property,
+	.regex,
+	.entity {
+		color: #f00;
+	}
+
+	.directive.tag .tag {
+		background: #ff0;
+		color: #393a34;
+	}
+
+	.line-numbers .line-numbers-rows {
+		border-inline-end-color: #a5a5a5;
+	}
+
+	.line-numbers-rows > span:before {
+		color: #2b91af;
+	}
+}
+
+@mixin prism-vs-dark {
+	& {
+		color: #d4d4d4;
+	}
+
+	&[class*="language-javascript"],
+	&[class*="language-jsx"],
+	&[class*="language-typescript"],
+	&[class*="language-tsx"] {
+		color: #9cdcfe;
+	}
+
+	&[class*="language-css"] {
+		color: #ce9178;
+	}
+
+	&[class*="language-html"] {
+		color: #d4d4d4;
+	}
+
+	.language-regex .anchor {
+		color: #dcdcaa;
+	}
+
+	.language-html .punctuation {
+		color: #808080;
+	}
+
+	.namespace {
+		opacity: 0.7;
+	}
+
+	.doctype .doctype-tag {
+		color: #569cd6;
+	}
+
+	.doctype .name {
+		color: #9cdcfe;
+	}
+
+	.comment,
+	.prolog {
+		color: #6a9955;
+	}
+
+	.punctuation,
+	.language-html .language-css .punctuation,
+	.language-html .language-javascript .punctuation {
+		color: #d4d4d4;
+	}
+
+	.property,
+	.tag,
+	.boolean,
+	.number,
+	.constant,
+	.symbol,
+	.inserted,
+	.unit {
+		color: #b5cea8;
+	}
+
+	.selector,
+	.attr-name,
+	.string,
+	.char,
+	.builtin,
+	.deleted {
+		color: #ce9178;
+	}
+
+	.language-css .string.url {
+		text-decoration: underline;
+	}
+
+	.operator,
+	.entity {
+		color: #d4d4d4;
+	}
+
+	.operator.arrow {
+		color: #569cd6;
+	}
+
+	.atrule {
+		color: #ce9178;
+	}
+
+	.atrule .rule {
+		color: #c586c0;
+	}
+
+	.atrule .url {
+		color: #9cdcfe;
+	}
+
+	.atrule .url .function {
+		color: #dcdcaa;
+	}
+
+	.atrule .url .punctuation {
+		color: #d4d4d4;
+	}
+
+	.keyword {
+		color: #569cd6;
+	}
+
+	.keyword.module,
+	.keyword.control-flow {
+		color: #c586c0;
+	}
+
+	.function,
+	.function .maybe-class-name {
+		color: #dcdcaa;
+	}
+
+	.regex {
+		color: #d16969;
+	}
+
+	.important {
+		color: #569cd6;
+	}
+
+	.italic {
+		font-style: italic;
+	}
+
+	.constant {
+		color: #9cdcfe;
+	}
+
+	.class-name,
+	.maybe-class-name {
+		color: #4ec9b0;
+	}
+
+	.console {
+		color: #9cdcfe;
+	}
+
+	.parameter {
+		color: #9cdcfe;
+	}
+
+	.interpolation {
+		color: #9cdcfe;
+	}
+
+	.punctuation.interpolation-punctuation {
+		color: #569cd6;
+	}
+
+	.boolean {
+		color: #569cd6;
+	}
+
+	.property,
+	.variable,
+	.imports .maybe-class-name,
+	.exports .maybe-class-name {
+		color: #9cdcfe;
+	}
+
+	.selector {
+		color: #d7ba7d;
+	}
+
+	.escape {
+		color: #d7ba7d;
+	}
+
+	.tag {
+		color: #569cd6;
+	}
+
+	.tag .punctuation {
+		color: #808080;
+	}
+
+	.cdata {
+		color: #808080;
+	}
+
+	.attr-name {
+		color: #9cdcfe;
+	}
+
+	.attr-value,
+	.attr-value .punctuation {
+		color: #ce9178;
+	}
+
+	.attr-value .punctuation.attr-equals {
+		color: #d4d4d4;
+	}
+
+	.entity {
+		color: #569cd6;
+	}
+
+	.namespace {
+		color: #4ec9b0;
+	}
+}

package/src/site/styles/global.scss

@@ -0,0 +1,40 @@
+@use "src/lib/mixins" as *;
+@use "./mixins" as *;
+
+:global {
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+		-webkit-user-drag: none;
+	}
+
+	:root {
+		--font-family-monospace: "Cascadia Mono", "Fira Code", "Consolas", monospace;
+		color-scheme: light dark;
+	}
+
+	html {
+		font-size: 62.5%;
+	}
+
+	body {
+		@include typography-body;
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+		color: var(--text-primary);
+		user-select: revert;
+		background-color: var(--solid-background-base);
+	}
+
+	// Codeblock syntax highlighting
+	code {
+		@media (prefers-color-scheme: light) {
+			@include prism-vs-light;
+		}
+		@media (prefers-color-scheme: dark) {
+			@include prism-vs-dark;
+		}
+	}
+}

package/src/site/styles/pages/docs.scss

@@ -0,0 +1,74 @@
+@use "../markdown";
+@use "src/lib/mixins" as *;
+
+.docs- {
+	&container {
+		background-color: var(--fds-card-background-secondary); // Temporary bodge for mica tinting
+		&::before {
+			transform: scale(2);
+			content: "";
+			position: fixed;
+			z-index: -1;
+			inset: 0;
+			inline-size: 100%;
+			block-size: 100%;
+			background: url("/bloom-mica-light.png") center/cover no-repeat fixed;
+			@media (prefers-color-scheme: dark) {
+				background-image: url("/bloom-mica-dark.png");
+			}
+		}
+		&-inner {
+			min-height: 100vh;
+			max-width: 1440px;
+			margin-inline: auto;
+			@include flex($justify: center);
+		}
+	}
+	&search {
+		margin-inline: 4px;
+		margin-block-end: 12px;
+	}
+}
+
+aside {
+	@include flex($direction: column);
+	overflow: auto;
+	padding-inline: 12px 4px;
+	position: sticky;
+	align-self: start;
+	inset-block-start: 56px;
+	padding-block-start: 12px;
+	flex: 0 0 auto;
+	inline-size: 280px;
+	max-block-size: calc(100vh - 56px);
+	&:last-child {
+		width: 220px;
+		padding-block-start: 44px;
+		padding-inline-end: 12px;
+		:global(.text-block.type-body-strong) {
+			margin-bottom: 12px;
+		}
+		@media only screen and (max-width: 1096px) {
+			display: none;
+		}
+	}
+}
+
+article {
+	max-inline-size: 100%;
+	min-inline-size: 0;
+	margin-block-start: 56px;
+	position: relative;
+	z-index: 1;
+	padding: 44px 56px;
+	flex: 1 1 auto;
+	border-inline-start: 1px solid var(--card-stroke-default);
+	header {
+		@include flex($justify: between, $align: start);
+		h1:first-child {
+			margin-block-start: 0;
+			padding: 0;
+			font-size: 48px;
+		}
+	}
+}