@schalkneethling/miyagi-core 4.0.2

package/frontend/assets/css/iframe/prism.css

@@ -0,0 +1,132 @@
+/* PrismJS 1.21.0
+ * https://prismjs.com/download.html#themes=prism-dark&languages=markup+json+yaml
+ * prism.js Dark theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ * @author Lea Verou
+ */
+
+.Code {
+	--color: light-dark(black, white);
+	--text-shadow: light-dark(white, black);
+	--background: light-dark(#f5f2f0, hsl(30deg 20% 25%));
+	--color-comment: light-dark(hsl(30deg 0% 40%), hsl(30deg 0% 60%));
+	--color-property: light-dark(#d9173e, hsl(348deg 100% 68%));
+	--color-selector: light-dark(hsl(80deg 100% 24%), #8dd203);
+	--color-operator: light-dark(#7a4613, hsl(30deg 73% 50%));
+	--color-atrule: light-dark(#07a, hsl(350deg 40% 70%));
+	--color-function: #dd4a68;
+	--color-regex: #e90;
+	--color-deleted: red;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: var(--color);
+	background: none;
+	text-shadow: 0 -0.1em 0.2em var(--text-shadow);
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	font-size: 1em;
+	text-align: start;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	overflow-wrap: normal;
+	line-height: 1.5;
+	tab-size: 4;
+	hyphens: none;
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: var(--background);
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.5em;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.15em 0.2em 0.05em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: var(--color-comment);
+}
+
+.token.punctuation {
+	opacity: 0.7;
+}
+
+.token.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+	color: var(--color-property);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: var(--color-selector);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: var(--color-operator);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: var(--color-atrule);
+}
+
+.token.function,
+.token.class-name {
+	color: var(--color-function);
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: var(--color-regex);
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.deleted {
+	color: var(--color-deleted);
+}

package/frontend/assets/css/iframe/styleguide/colors.css

@@ -0,0 +1,61 @@
+.Colors {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
+	gap: 3em;
+}
+
+.Colors-button {
+	--size: 3em;
+
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.Colors-button::before,
+.Colors-button::after {
+	display: block;
+}
+
+.Colors--all .Colors-button::before {
+	margin-inline-end: 10px;
+	width: var(--size);
+}
+
+.Colors--all .Colors-button::before,
+.Colors--decoration .Colors-button::before {
+	height: var(--size);
+	background: var(--color);
+	border: 1px solid var(--backdrop, transparent);
+	content: "";
+	order: -1;
+}
+
+.Colors--decoration .Colors-button::before {
+	width: 100%;
+}
+
+.Colors--all .Colors-button::after,
+.Colors--typo .Colors-button::after {
+	font-size: var(--size);
+	color: var(--color);
+	font-weight: bold;
+	order: -1;
+	/* stylelint-disable */
+	-webkit-text-stroke: 1px var(--backdrop, transparent);
+	text-stroke: 1px var(--backdrop, transparent);
+	/* stylelint-enable */
+}
+
+.Colors--all .Colors-button::after {
+	content: "Aa";
+}
+
+.Colors--typo .Colors-button::after {
+	content: "AaBbCc";
+}
+
+.Colors-prop,
+.Colors-value {
+	flex: 1 0 100%;
+	margin: 10px 0 0;
+}

package/frontend/assets/css/iframe/styleguide/fonts.css

@@ -0,0 +1,37 @@
+.Fonts-item:not(:first-child) {
+	margin-top: 3em;
+}
+
+.Fonts-button {
+	color: inherit;
+}
+
+.Fonts-button::before {
+	content: "The quick brown fox jumps over the lazy dog";
+	font-family: var(--font-family);
+	font-feature-settings: var(--font-feature-settings);
+	font-kerning: var(--font-kerning);
+	font-size-adjust: var(--font-size-adjust);
+	font-size: var(--font-size);
+	font-stretch: var(--font-stretch);
+	font-style: var(--font-style);
+	font-variant: var(--font-variant);
+	font-variant-caps: var(--font-variant-caps);
+	font-weight: var(--font-weight);
+	letter-spacing: var(--letter-spacing);
+	line-height: var(--line-height);
+	text-shadow: var(--text-shadow);
+	text-transform: var(--text-transform);
+}
+
+.Fonts-details {
+	display: flex;
+	padding: 0;
+	list-style: none;
+}
+
+.Fonts-details > li:not(:last-child) {
+	margin-inline-end: 0.5em;
+	padding-inline-end: 0.5em;
+	border-inline-end: 0.0625rem solid currentcolor;
+}

package/frontend/assets/css/iframe/styleguide/index.css

@@ -0,0 +1,109 @@
+@import url("./colors.css");
+@import url("./fonts.css");
+@import url("./spacings.css");
+
+.CustomPropsGroup {
+	list-style: none;
+	margin: 3em 0;
+	padding: 0;
+}
+
+.CustomProp {
+	position: relative;
+	border: 0.0625rem solid transparent;
+}
+
+.CustomProp[aria-selected="true"] {
+	position: relative;
+}
+
+.CustomProp-prop {
+	display: block;
+	margin: 10px 0 0;
+	word-break: break-all;
+}
+
+.CustomProp-button {
+	background: none;
+	border: none;
+	appearance: none;
+	font: inherit;
+	width: fit-content;
+	padding: 0;
+	text-align: start;
+}
+
+.CustomProp-button:focus {
+	outline: none;
+}
+
+.CustomProp-button:not([aria-expanded="true"]):hover .CustomProp-prop,
+.CustomProp-button:not([aria-expanded="true"]):focus .CustomProp-prop {
+	text-decoration: underline;
+}
+
+.CustomProp-details {
+	position: absolute;
+	bottom: calc(100% + 15px);
+	inset-inline-start: 0;
+	padding: 15px;
+	margin: 0;
+	z-index: 1;
+	background: var(--color-Tooltip-background);
+	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+	outline: 0.0625rem solid var(--color-Tooltip-outline);
+	box-sizing: border-box;
+	font-size: 14px;
+	display: none;
+	grid-template-columns: fit-content(50%) 1fr;
+	gap: 0.5rem 1rem;
+	line-height: 1.5;
+	white-space: nowrap;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.CustomProp-details:not([hidden]),
+.CustomProp-button:hover + .CustomProp-details {
+	display: grid;
+	animation: fadeIn 0.15s ease;
+}
+
+.CustomProp-details::before,
+.CustomProp-details::after {
+	content: "";
+	display: block;
+	position: absolute;
+	inset-inline-start: 15px;
+	width: 0;
+	height: 0;
+	border: 10px solid transparent;
+}
+
+.CustomProp-details::before {
+	border-top-color: var(--color-Tooltip-outline);
+	top: 100%;
+}
+
+.CustomProp-details::after {
+	border-top-color: var(--color-Tooltip-background);
+	top: calc(100% - 2px);
+}
+
+.CustomProp-detailsProperty {
+	font-weight: 600;
+}
+
+.CustomProp-detailsValue {
+	margin: 0;
+}

package/frontend/assets/css/iframe/styleguide/spacings.css

@@ -0,0 +1,21 @@
+.Spacings {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.Spacings-item:not(:first-child) {
+	margin-top: 3em;
+}
+
+.Spacings-button {
+	color: inherit;
+}
+
+.Spacings-button::before {
+	height: var(--spacing);
+	width: var(--spacing);
+	background: currentcolor;
+	content: "";
+	display: block;
+}