Initial commit: WordPress wp-content (themes, plugins, languages)

- Theme: momentry (custom theme with REST API routes)
- Plugins: code-snippets (contains all API proxies)
- Languages: zh_TW translations
- Excludes: cache, backups, uploads, logs

plugins/code-snippets/css/common/_badges.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use 'theme';
+
+.badge {
+	font-size: 12px;
+	font-weight: 700;
+	text-transform: uppercase;
+	border-radius: 3px;
+	text-align: center;
+	min-inline-size: 43px;
+	min-block-size: 24px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	padding-block: 0;
+	padding-inline: 3px;
+	box-sizing: border-box;
+	gap: 5px;
+	line-height: 1;
+
+	@at-root .row-actions & {
+		color: #8c8c8c;
+		padding-inline: 0;
+		text-transform: capitalize;
+		font-weight: 500;
+	}
+
+	.dashicons {
+		font-size: 18px;
+		inline-size: 18px;
+		block-size: 18px;
+	}
+}
+
+.network-shared {
+	color: #2271b1; 
+	font-size: 22px;
+	inline-size: 100%;
+	cursor: help;
+}
+
+.small-badge {
+	block-size: auto;
+	inline-size: auto;
+	font-size: smaller;
+	padding-block: 0;
+	padding-inline: 0.5em;
+}
+
+.wp-core-ui .button.nav-tab-button {
+	margin-inline-start: 0.5em;
+	float: inline-end;
+	color: #a7aaad;
+	background: #f6f7f7;
+	border-color: #f6f7f7;
+	align-self: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 2px;
+}
+
+@each $name, $colors in theme.$badges {
+	$text-color: #fff;
+	$background-color: list.nth($colors, 1);
+
+	@if list.length($colors) > 1 {
+		$text-color: list.nth($colors, 2);
+	}
+
+	.badge.#{$name}-badge,
+	.nav-tab-inactive:hover .badge.#{$name}-badge,
+	:hover > .inverted-badges .#{$name}-badge {
+		color: $text-color;
+		background-color: $background-color;
+	}
+
+	.badge.#{$name}-badge:hover {
+		color: $text-color;
+		background-color: color.adjust($background-color, $lightness: -5%);
+	}
+}
+
+.nav-tab-inactive .badge,
+.inverted-badges .badge {
+	color: #fff;
+	background-color: #a7aaad;
+	border-color: #fff !important;
+
+	.dashicons {
+		color: #fff;
+	}
+}
+
+.nav-tab-inactive {
+	$colors: map.get(theme.$badges, 'pro');
+	$text-color: list.nth($colors, 2);
+	$background-color: list.nth($colors, 1);
+
+	.badge.pro-badge {
+		color: $text-color;
+		background-color: $background-color;
+	}
+
+	&:hover {
+		&.button, .dashicons-external {
+			color: #3c434a;
+		}
+
+		.badge.pro-badge {
+			color: $background-color;
+			background-color: $text-color;
+		}
+	}
+}
+
+.nav-tab-inactive {
+	background: transparent;
+}
+
+.nav-tab-button .dashicons-external {
+	font-size: 15px;
+	color: #666;
+}

plugins/code-snippets/css/common/_codemirror.scss

@@ -0,0 +1,109 @@
+.CodeMirror {
+	border: 1px solid #dfdfdf;
+	border-radius: 3px;
+	block-size: auto !important;
+	background-color: #fff;
+}
+
+.CodeMirror-code {
+	outline: none;
+}
+
+.CodeMirror-focused .cm-matchhighlight {
+	color: white !important;
+	outline: 1px solid green;
+}
+
+/* Add a bit of extra space above the editor */
+.CodeMirror-sizer {
+	&::before, &::after {
+		display: block;
+		color: #bbb;
+	}
+
+	&::before {
+		content: '';
+		padding-block-end: 5px;
+	}
+}
+
+/* Fix cursor color with rubyblue theme (see https://goo.gl/3HDgRm */
+.cm-s-rubyblue .CodeMirror-cursor {
+	border-inline-start: 1px solid white !important;
+}
+
+[class*='CodeMirror-lint-marker'], [class*='CodeMirror-lint-message'], .CodeMirror-lint-marker-multiple {
+	background-image: none;
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
+	cursor: help;
+}
+
+.CodeMirror-lint-marker-multiple {
+	position: absolute;
+	inset-block-start: 0;
+}
+
+[class*='CodeMirror-lint-marker']::before {
+	font: normal 18px/1 dashicons;
+	position: relative;
+	inset-block-start: -2px;
+}
+
+[class*='CodeMirror-lint-message']::before {
+	font: normal 16px/1 dashicons;
+	position: absolute;
+	inset-inline-start: 16px;
+}
+
+.CodeMirror-lint-message-error,
+.CodeMirror-lint-message-warning {
+	box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
+	margin-block: 5px 2px;
+	padding-block: 3px;
+	margin-inline: 0;
+	padding-inline: 28px 12px;
+}
+
+.CodeMirror-lint-message-warning {
+	background-color: #fff8e5;
+	border-inline-start: 4px solid #ffb900;
+}
+
+.CodeMirror-lint-marker-warning::before, .CodeMirror-lint-message-warning::before {
+	content: '\f534';
+	color: #f6a306;
+}
+
+.CodeMirror-lint-message-error {
+	background-color: #fbeaea;
+	border-inline-start: 4px solid #dc3232;
+}
+
+.CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before {
+	content: '\f153';
+	color: #dc3232;
+}
+
+.CodeMirror-lint-tooltip {
+	background: none;
+	border: none;
+	border-radius: 0;
+	direction: ltr;
+}
+
+.CodeMirror .CodeMirror-matchingbracket {
+	background: rgb(255 150 0 / 30%);
+	color: inherit;
+}
+
+.CodeMirror .CodeMirror-linenumber {
+	color: #666;
+}
+
+.CodeMirror-foldmarker {
+	color: inherit;
+	margin-inline: 0.25em;
+	font-weight: bold;
+}

plugins/code-snippets/css/common/_direction.scss

@@ -0,0 +1,8 @@
+:root {
+	--cs-direction-multiplier: 1; // LTR = 1, RTL = -1
+}
+
+html[dir="rtl"],
+body.rtl {
+	--cs-direction-multiplier: -1;
+}

plugins/code-snippets/css/common/_modal.scss

@@ -0,0 +1,53 @@
+.code-snippets-modal {
+	.components-modal__header {
+		padding-block-end: 24px;
+	}
+
+	.components-modal__content {
+		padding: 0;
+		display: flex;
+		flex-flow: column;
+		background: #f6f7f7;
+		overflow: initial;
+		max-inline-size: 100%;
+	}
+
+	.modal-content {
+		flex: 1;
+		padding-block: 36px;
+		padding-inline: 45px;
+		display: flex;
+		flex-flow: column;
+	}
+
+	.components-modal__header + div {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.modal-footer {
+		border-block-start: 1px solid #e2e2e4;
+		display: flex;
+		flex-flow: row-reverse;
+		justify-content: space-between;
+		align-items: center;
+		inset-block-end: 0;
+		background: #f6f7f7;
+		inline-size: 100%;
+		padding: 11px 19px;
+
+		.button-link {
+			text-decoration: none;
+		}
+
+		.button-large {
+			block-size: 45px;
+
+			&.button-primary {
+				padding: 0 30px;
+			}
+		}
+	}
+}

plugins/code-snippets/css/common/_select.scss

@@ -0,0 +1,5 @@
+.code-snippets-select {
+	input[type="text"]:focus {
+		box-shadow: none;
+	}
+}

plugins/code-snippets/css/common/_switch.scss

@@ -0,0 +1,102 @@
+@use 'theme';
+
+$off-color: #789;
+
+.snippet-execution-button,
+.snippet-activation-switch,
+input[type='checkbox'].switch {
+	display: block;
+	position: relative;
+}
+
+.snippet-activation-switch,
+input[type='checkbox'].switch {
+	appearance: none;
+	outline: 0;
+	cursor: pointer;
+	margin: 0;
+	inline-size: 32px;
+	block-size: 19px;
+	border-radius: 34px;
+	text-align: start;
+	border: 1px solid $off-color;
+	box-sizing: border-box;
+
+	&::before {
+		transition: all .1s;
+		content: '';
+		block-size: 13px;
+		inline-size: 13px;
+		display: inline-block;
+		background-color: $off-color;
+		border-radius: 50%;
+		margin: 2px;
+	}
+}
+
+.active-snippet .snippet-activation-switch,
+input[type='checkbox'].switch:checked {
+	background-color: #0073aa;
+
+	&::before {
+		background-color: white;
+		transform: translateX(calc(100% * var(--cs-direction-multiplier)));
+	}
+}
+
+.erroneous-snippet .snippet-activation-switch::before {
+	content: '!';
+	transform: translateX(calc(50% * var(--cs-direction-multiplier)));
+	text-align: center;
+	font-weight: bold;
+	line-height: 1;
+	color: #bbb;
+}
+
+a.snippet-condition-count {
+	border-radius: 50%;
+	border: 1.8px solid currentcolor;
+	block-size: 29px;
+	inline-size: 29px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+
+	.inactive-snippet & {
+		color: #ccc;
+	}
+
+	.active-snippet & {
+		font-weight: bold;
+		color: theme.$accent;
+	}
+}
+
+.snippet-execution-button {
+	margin-inline-start: 11px;
+	margin-block-start: 9px;
+	inline-size: 0;
+	block-size: 0;
+	border-block: 9px solid transparent;
+	border-inline-start: 10px solid #ccc;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: -14px -8px -14px -21px;
+		border-radius: 50%;
+		border: 1.8px solid #ccc;
+		z-index: 2;
+	}
+
+	&:hover {
+		border-inline-start-color: theme.$accent;
+		transition: border-inline-start-color 0.6s;
+
+		&::before {
+			border-color: theme.$accent;
+			transition: border-color 0.6s;
+		}
+	}
+}

plugins/code-snippets/css/common/_theme.scss

@@ -0,0 +1,56 @@
+@use 'sass:color';
+
+$accent: #2271b1;
+$primary: #03c7d2;
+$secondary: #d46f4d;
+$outline: #9e9e9e;
+$brand-discord: #5865f2;
+$brand-facebook: #3b5998;
+$cloud: #00bcd4;
+$cloud-update: #ff9800;
+
+/* format: background-color [color] */
+$badges: (
+	php: #1d97c6,
+	html: #ef6a36,
+	css: #9b59b6,
+	js: #ffeb3b #1c1f20,
+	cond: #2eae95,
+	core: #61c5cb,
+	pro: #f7e8e3 #df9279,
+	cloud: $cloud,
+	bundles: #50575e,
+	cloud_search: #ff9800,
+	private: #f7e6be #ca961b,
+	public: #dbebf7 $accent,
+	success: #d3e8d1 #447340,
+	failure: #fad7c1 #a24b16,
+	info: #d2e6f4 #2b71a3,
+	neutral: #e2e5e5 #6c7e7e,
+	special: #dfc5ef #6e249c
+);
+$notices: (
+	success: #d3e9d3 #377a37,
+	warning: #f2ebc3 #b0730a,
+	error: #f8d7da #721c24,
+);
+
+@function contrasting-text-color($bg-color) {
+	$sum: 0;
+
+	@each $color, $multiplier in (red 0.299, green 0.587, blue 0.114) {
+		$sum: $sum + color.channel($bg-color, $color, $space: rgb) * $multiplier;
+	}
+
+	@return if ($sum > 186, #1c1f20, #fff)
+}
+
+@mixin link-colors($color, $lightness: 15%) {
+	a {
+		color: $color;
+
+		&:hover, &:active, &:focus {
+			color: color.adjust($color, $lightness: $lightness);
+		}
+	}
+}

plugins/code-snippets/css/common/_tooltips.scss

@@ -0,0 +1,184 @@
+$bg-color: hsl(0deg 0% 20% / 90%);
+
+.help-tooltip {
+	display: inline-flex;
+	flex-direction: column;
+	justify-content: center;
+	border-block-end: 1px dotted;
+	position: relative;
+	vertical-align: middle;
+}
+
+.help-tooltip-anchor {
+	cursor: help;
+	padding-block: 0.3em 0;
+	padding-inline: 0.3em;
+	display: inline-block;
+	font-size: 10px;
+	background: transparent !important;
+}
+
+.tooltip {
+	cursor: help !important;
+	position: relative;
+	display: inline-block;
+
+	.dashicons {
+		color: lightslategrey;
+	}
+
+	&.badge {
+		display: inline-flex;
+
+		.dashicons {
+			color: inherit;
+		}
+	}
+}
+
+.tooltip::before,
+.tooltip-content {
+	position: absolute;
+	visibility: hidden;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out,
+		visibility 0.2s ease-in-out,
+		transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+	transform: translate3d(0, 0, 0);
+	pointer-events: none;
+}
+
+.tooltip::before {
+	z-index: 1001;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+}
+
+.tooltip-inline::before {
+	inset-block-start: 4px;
+}
+
+.tooltip-content {
+	z-index: 1000;
+	padding: 8px;
+	background-color: $bg-color;
+	color: #fff;
+	border-radius: 6px;
+	position: absolute;
+	font-size: small;
+	font-weight: normal;
+	text-transform: none;
+	min-inline-size: 200px;
+	backdrop-filter: blur(3px);
+
+	.tooltip-block & {
+		margin-inline-start: -80px;
+	}
+
+	.tooltip-inline & {
+		margin-inline-start: 0;
+		margin-block-end: -16px;
+	}
+
+	.tooltip-inline.tooltip-start & {
+		inset-block-start: -50%;
+	}
+}
+
+.tooltip-block.tooltip-start {
+	&::before {
+		margin-inline-start: -6px;
+		margin-block-end: -12px;
+		border-block-start-color: $bg-color;
+	}
+
+	&::before, .tooltip-content {
+		inset-block-end: 100%;
+		inset-inline-start: 50%;
+	}
+}
+
+.tooltip-block.tooltip-end {
+	&::before {
+		margin-block: -12px 0;
+		border-block-start-color: transparent;
+		border-block-end-color: $bg-color;
+	}
+
+	&::before, .tooltip-content {
+		inset-block: 100% auto;
+		margin-inline-start: 25%;
+	}
+
+	.tooltip-content {
+		inset-inline-end: -70%;
+	}
+}
+
+.tooltip-inline.tooltip-start {
+	&::before {
+		inset-block-end: 50%;
+		margin-inline: 0 -12px;
+		margin-block-end: 0;
+		border-block-start-color: transparent;
+		border-inline-start-color: $bg-color;
+	}
+
+	&::before, .tooltip-content {
+		inset-inline: auto 100%;
+	}
+}
+
+.tooltip-inline.tooltip-end {
+	&::before {
+		margin-block-end: 0;
+		margin-inline-start: -12px;
+		border-block-start-color: transparent;
+		border-inline-end-color: $bg-color;
+	}
+
+	&::before, .tooltip-content {
+		inset-inline-start: 100%;
+	}
+
+	.tooltip-content {
+		inset-block-start: -50%;
+	}
+}
+
+.tooltip:hover,
+.tooltip:focus {
+	&::before, .tooltip-content {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
+.tooltip-block.tooltip-start:hover,
+.tooltip-block.tooltip-start:focus {
+	&::before, .tooltip-content {
+		transform: translateY(-10px);
+	}
+}
+
+.tooltip-block.tooltip-end:hover,
+.tooltip-block.tooltip-end:focus {
+	&::before, .tooltip-content {
+		transform: translateY(10px);
+	}
+}
+
+.tooltip-inline.tooltip-end:hover,
+.tooltip-inline.tooltip-end:focus {
+	&::before, .tooltip-content {
+		transform: translateX(calc(10px * var(--cs-direction-multiplier)));
+	}
+}
+
+.tooltip-inline.tooltip-start:hover,
+.tooltip-inline.tooltip-start:focus {
+	&::before, .tooltip-content {
+		transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
+	}
+}

plugins/code-snippets/css/common/_upsell.scss

@@ -0,0 +1,134 @@
+@use 'sass:color';
+@use 'theme';
+
+.code-snippets-upsell-banner {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 12px;
+	gap: 10px;
+	background: #fff;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+
+	p {
+		margin: 0;
+	}
+
+	.components-external-link__contents {
+		text-decoration: none;
+	}
+
+	.button-primary {
+		background-color: theme.$secondary;
+		border: 0;
+		font-weight: bold;
+		margin-inline-start: auto;
+
+		&:hover, &:focus {
+			background-color: color.adjust(theme.$secondary, $lightness: -10%);
+		}
+	}
+
+	.button-link.button-small {
+		text-decoration: none;
+		font-weight: normal;
+		padding: 0;
+		color: #a7aaad;
+		line-height: 1;
+	}
+}
+
+.code-snippets-upsell-dialog {
+	background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%);
+	inline-size: 794px;
+	box-shadow: 0 4px 80px rgb(0 0 0 / 10%);
+	border-radius: 8px;
+	font-family: 'SF Pro', sans-serif;
+	color: #1c3f41;
+	line-height: 1.5;
+	max-block-size: unset;
+
+	.components-modal__content {
+		margin: 0;
+		padding-block: 48px;
+		padding-inline: 80px;
+	}
+
+	.components-modal__content > div:last-child {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 18px;
+		overflow: auto;
+	}
+
+	h1 {
+		font-size: 32px;
+		margin: 0;
+
+		span {
+			color: #d46f4d;
+		}
+	}
+
+	p {
+		margin-block: 0;
+		margin-inline: 2em;
+	}
+
+	h1 + p {
+		font-size: 16px;
+	}
+
+	img {
+		inline-size: 82px;
+	}
+
+	h2 {
+		text-transform: uppercase;
+		font-size: 12px;
+	}
+
+	ul {
+		display: grid;
+		inline-size: 100%;
+		grid-auto-flow: column;
+		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	li {
+		display: flex;
+		flex-flow: row;
+		gap: 11px;
+		font-size: 14px;
+	}
+
+	li::before {
+		content: '✓';
+		color: #fff;
+		inline-size: 24px;
+		block-size: 24px;
+		border-radius: 50%;
+		background-color: #0ca0a9;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.button.button-large {
+		background-color: #d46f4d;
+		padding-block: 15px;
+		padding-inline: 20px;
+		font-size: 16px;
+		line-height: inherit;
+		margin-block: 16px 24px;
+		margin-inline: auto;
+		border-color: currentcolor;
+
+		&:hover {
+			background-color: color.adjust(#d46f4d, $lightness: -10%);
+		}
+	}
+}

plugins/code-snippets/css/edit.scss

@@ -0,0 +1,107 @@
+/**
+ * Styles for the edit snippet admin page.
+ */
+
+@use 'common/direction';
+@use 'common/codemirror';
+@use 'common/badges';
+@use 'common/switch';
+@use 'common/select';
+@use 'common/tooltips';
+@use 'common/modal';
+@use 'common/upsell';
+@use 'edit/form';
+@use 'edit/sidebar';
+@use 'edit/editor';
+@use 'edit/conditions';
+@use 'edit/gpt';
+
+.notice.error blockquote {
+	margin-block-end: 0;
+}
+
+.button svg {
+	block-size: 1rem;
+	vertical-align: middle;
+	line-height: 1;
+	margin: 0;
+}
+
+.snippet-description-container {
+	.wp-editor-tools {
+		padding-block-start: 5px;
+	}
+
+	.wp-editor-tabs {
+		float: inline-start;
+	}
+
+	.generate-button {
+		float: inline-end;
+		margin-block-start: 37px;
+		z-index: 99;
+		position: relative;
+	}
+}
+
+.components-form-token-field__input-container {
+	background: #fff;
+	border-color: #c3c4c7;
+
+	> .components-flex {
+		padding: 12px;
+	}
+}
+
+#titlediv,
+.snippet-type-container {
+	margin-block-end: 24px;
+}
+
+.above-snippet-code {
+	margin-block: 0 15px;
+	display: flex;
+	align-items: center;
+	margin-inline: 0;
+	gap: 8px;
+
+	h2 {
+		margin: 0;
+	}
+
+	.expand-editor-button {
+		display: flex;
+		gap: 5px;
+		align-items: center;
+		margin-inline-end: auto;
+
+		.dashicons {
+			inline-size: 18px;
+			block-size: 18px;
+			font-size: 18px;
+		}
+	}
+}
+
+.snippet-name-wrapper {
+	display: flex;
+	gap: 0.5em;
+
+	> :first-child {
+		flex: 1;
+	}
+}
+
+form.condition-snippet .snippet-code-container {
+	display: none;
+}
+
+.cs-back {
+	cursor: pointer;
+
+	&::before {
+		content: '<';
+		color: #2271b1;
+		margin-inline-end: 3px;
+	}
+}

plugins/code-snippets/css/edit/_conditions.scss

@@ -0,0 +1,6 @@
+.snippet-condition-editor-container {
+	margin-block-start: 33px;
+	padding: 32px;
+	border: 1px solid #c3c4c7;
+	background: #f6f7f7;
+}

plugins/code-snippets/css/edit/_editor.scss

@@ -0,0 +1,89 @@
+
+.CodeMirror,
+.snippet-form textarea {
+	inline-size: 100%;
+	font-family: monospace;
+}
+
+.CodeMirror-sizer {
+	min-block-size: 300px !important;
+	box-sizing: border-box;
+	padding-block-end: 1.5em !important;
+
+	&::after {
+		position: absolute;
+		inset-block-end: 0;
+	}
+
+	.snippet-form.php-snippet & {
+		padding-block-end: 0 !important;
+
+		&::before {
+			content: '<?php';
+		}
+	}
+
+	.snippet-form.css-snippet & {
+		&::before {
+			content: '<style>';
+		}
+
+		&::after {
+			content: '</style>';
+		}
+	}
+
+	.snippet-form.js-snippet & {
+		&::before {
+			content: '<script>';
+		}
+
+		&::after {
+			content: '</script>';
+		}
+	}
+
+	.snippet-form.html-snippet & {
+		&::before {
+			content: '<!-- begin content -->';
+		}
+
+		&::after {
+			content: '<!-- end content -->';
+		}
+	}
+}
+
+.snippet-editor {
+	position: relative;
+}
+
+.snippet-editor-help {
+	position: absolute;
+	inset-inline-end: 5px;
+	inset-block-start: 5px;
+
+	td {
+		&:first-child {
+			padding-inline-end: 0.5em;
+		}
+
+		@media (width >= 512px) {
+			white-space: nowrap;
+		}
+	}
+
+	.mac-key {
+		display: none;
+	}
+
+	.platform-mac {
+		.mac-key {
+			display: inline;
+		}
+
+		.pc-key {
+			display: none;
+		}
+	}
+}

plugins/code-snippets/css/edit/_form.scss

@@ -0,0 +1,99 @@
+@use '../common/theme';
+
+$sidebar-width: 321px;
+$sidebar-gap: 30px;
+
+.snippet-form #titlediv #title,
+.snippet-type-container {
+	border-color: #ccc;
+	block-size: 45px
+}
+
+.snippet-type-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-flow: row;
+	gap: 2em;
+
+	.small-badge {
+		margin-inline-start: 0.5em;
+	}
+
+	.badge {
+		float: inline-end;
+	}
+}
+
+
+.conditions-editor-open {
+	.button.button-large {
+		block-size: 100%;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		overflow: hidden;
+		border-color: #ccc;
+		padding-block: 6px;
+		padding-inline: 12px;
+	}
+
+	&.no-condition .cond-badge {
+		background: transparent;
+		color: inherit;
+		border: 1px solid currentcolor;
+	}
+
+	&.no-condition:hover .cond-badge {
+		color: #fff;
+		background: theme.$accent;
+		border-color: theme.$accent;
+	}
+}
+
+.snippet-form {
+	margin-block-start: 10px;
+	display: grid;
+	gap: $sidebar-gap;
+	grid-template-columns: 1fr $sidebar-width;
+	grid-template-areas: 'upper sidebar' 'lower sidebar';
+	transition: all 700ms;
+
+	&.snippet-form-expanded {
+		grid-template-areas: 'upper upper' 'lower sidebar';
+	}
+
+	.snippet-form-upper {
+		grid-area: upper;
+	}
+
+	.snippet-form-lower {
+		grid-area: lower;
+	}
+
+	.snippet-editor-sidebar {
+		grid-area: span 3 / sidebar;
+		max-inline-size: $sidebar-width;
+		position: sticky;
+		inset-block-start: 32px;
+		align-self: start;
+	}
+
+	@media (width <= 1024px) {
+		grid-template-columns: 1fr;
+	}
+
+	h2, h3 {
+		margin-block: 25px 15px;
+		margin-inline: 0;
+		font-size: 1.16em;
+
+		label {
+			cursor: auto;
+		}
+
+		.button {
+			font-weight: normal;
+		}
+	}
+}

plugins/code-snippets/css/edit/_gpt.scss

@@ -0,0 +1,103 @@
+.cloud-create-modal {
+	.components-modal__content {
+		min-inline-size: 550px;
+	}
+
+	.action-buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.components-button.is-secondary {
+		box-shadow: none;
+	}
+
+	.notice {
+		margin-inline: 0;
+	}
+}
+
+.generate-button {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+
+	.dashicons-warning {
+		color: #b32d2e;
+	}
+
+	.snippet-tags-container &,
+	.snippet-description-container & {
+		float: inline-end;
+	}
+}
+
+.code-line-explanation {
+	display: flex;
+	cursor: default;
+	font-size: inherit;
+	margin: 0;
+	padding-inline: 6px;
+	border-inline-start: none;
+	border-inline-end: none;
+	border-block-start: 1px solid rgb(0 0 0 / 15%);
+	border-block-end: 1px solid rgb(0 0 0 / 15%);
+	border-image-slice: 1;
+	border-image-width: 1;
+	border-image-repeat: stretch;
+	color: #666;
+	font-style: italic;
+	font-family: monospace;
+	gap: 5px;
+	align-items: center;
+
+	img {
+		block-size: 1rem;
+		opacity: 0.7;
+	}
+
+	.code-line-actions {
+		cursor: default;
+		gap: 7px;
+		display: inline-flex;
+		margin-inline-start: 5px;
+		font-family: system-ui;
+		font-style: normal;
+
+		.commit {
+			color: #3d9970;
+		}
+
+		.remove {
+			color: #b32d2e;
+		}
+
+		.action {
+			cursor: pointer;
+			opacity: 0.6;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+.cloud-connect-modal {
+	.icons-group {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.dashicons {
+			inline-size: 50px;
+			block-size: 50px;
+			font-size: 50px;
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+}

plugins/code-snippets/css/edit/_sidebar.scss

@@ -0,0 +1,155 @@
+@use '../common/theme';
+
+.code-snippets-modal {
+	p h4 {
+		margin-block-start: 0;
+	}
+}
+
+.snippet-editor-sidebar {
+	.button-large {
+		block-size: 48px;
+	}
+
+	.row-actions {
+		display: flex;
+
+		.button {
+			background: none;
+			border: none;
+		}
+	}
+
+	.delete-button {
+		color: #cc1818;
+
+		&:hover {
+			color: #9e1313;
+		}
+
+		&:focus {
+			color: #710d0d;
+			border-color: #710d0d;
+		}
+	}
+
+	.help-tooltip {
+		margin-block: 0;
+		margin-inline: 5px auto;
+	}
+
+	.box {
+		background-color: #fff;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		padding: 1.5em;
+		display: flex;
+		flex-flow: column;
+		gap: 1em;
+
+		h4 {
+			margin-block: 0.5em;
+			margin-inline: 0;
+		}
+
+		.inline-form-field {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: center;
+			gap: 5px;
+
+			> :last-child {
+				margin-inline-start: auto;
+			}
+		}
+
+		.block-form-field {
+			display: flex;
+			flex-flow: column;
+			gap: 4px;
+
+			h4 {
+				margin-block-end: 0;
+			}
+		}
+	}
+
+	h4 .badge {
+		float: inline-end;
+
+		+ .badge {
+			margin-inline-end: 5px;
+		}
+	}
+
+	.beta-badge {
+		color: theme.$accent;
+		border: 1px solid currentcolor;
+	}
+
+	.components-form-token-field {
+		inline-size: 100%;
+	}
+
+	.generate-button {
+		margin-inline-start: auto;
+	}
+}
+
+.snippet-priority input {
+	inline-size: 4em;
+}
+
+p.submit {
+	display: flex;
+	flex-flow: column;
+	gap: 8px;
+	margin-block-start: 17px;
+	padding-block-start: 0;
+}
+
+.activation-switch-container label {
+	display: flex;
+	flex-flow: row;
+	gap: 5px;
+	justify-content: center;
+}
+
+.shortcode-tag-wrapper {
+	background: #fff;
+	min-block-size: 54px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px;
+	box-sizing: border-box;
+
+	code {
+		background: transparent;
+		padding-inline: 0.5em;
+		text-indent: -0.5em;
+	}
+}
+
+.code-snippets-copy-text.button {
+	display: flex;
+	align-items: center;
+	gap: 3px;
+
+	.dashicons {
+		block-size: 18px;
+		inline-size: 18px;
+		font-size: 18px;
+	}
+
+	.spinner-wrapper {
+		block-size: 18px;
+		inline-size: 18px;
+		display: flex;
+		align-items: center;
+	}
+
+	.components-spinner {
+		block-size: 12px;
+	}
+}

plugins/code-snippets/css/manage.scss

@@ -0,0 +1,215 @@
+/**
+ * Custom styling for the snippets table
+ */
+
+@use 'sass:map';
+@use 'sass:color';
+@use 'common/theme';
+@use 'common/badges';
+@use 'common/switch';
+@use 'common/direction';
+@use 'common/select';
+@use 'manage/cloud';
+
+.column-name,
+.column-type {
+	.dashicons {
+		font-size: 16px;
+		inline-size: 16px;
+		block-size: 16px;
+		vertical-align: middle;
+	}
+
+	.dashicons-clock {
+		vertical-align: middle;
+	}
+}
+
+.active-snippet .column-name > .snippet-name {
+	font-weight: 600;
+}
+
+.active-snippet {
+	td, th {
+		background-color: rgba(#78c8e6, 0.06);
+	}
+
+	th.check-column {
+		border-inline-start: 2px solid #2ea2cc;
+	}
+}
+
+.column-priority input {
+	appearance: none;
+	background: none;
+	border: none;
+	box-shadow: none;
+	inline-size: 4em;
+	color: #666;
+	text-align: center;
+
+	&:hover, &:focus, &:active {
+		color: #000;
+		background-color: #f5f5f5;
+		background-color: rgb(0 0 0 / 10%);
+		border-radius: 6px;
+	}
+
+	&:disabled {
+		color: inherit;
+	}
+}
+
+.clear-filters {
+	vertical-align: baseline !important;
+}
+
+.snippets {
+	td.column-id {
+		text-align: center;
+	}
+
+	tr {
+		background: #fff;
+	}
+
+	ol, ul {
+		margin-block: 0 1.5em;
+		margin-inline: 1.5em 0;
+	}
+
+	ul {
+		list-style: disc;
+	}
+
+	th.sortable a, th.sorted a {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.row-actions {
+		color: #ddd;
+		position: relative;
+		inset-inline-start: 0;
+	}
+
+	.column-activate {
+		padding-inline-end: 0 !important;
+	}
+
+	.clear-filters {
+		vertical-align: middle;
+	}
+
+	tfoot th.check-column {
+		padding-block: 13px 0;
+		padding-inline: 3px 0;
+	}
+
+	thead th.check-column,
+	tfoot th.check-column,
+	.inactive-snippet th.check-column {
+		padding-inline-start: 5px;
+	}
+
+	.active-snippet, .inactive-snippet {
+		td, th {
+			padding-block: 10px;
+			padding-inline: 9px;
+			border: none;
+			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
+		}
+	}
+
+	tr.active-snippet + tr.inactive-snippet th,
+	tr.active-snippet + tr.inactive-snippet td {
+		border-block-start: 1px solid rgb(0 0 0 / 3%);
+		box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
+	}
+
+	&, #all-snippets-table, #search-snippets-table {
+		a.delete:hover {
+			border-block-end: 1px solid #f00;
+			color: #f00;
+		}
+	}
+
+	#wpbody-content & .column-name {
+		white-space: nowrap; /* prevents wrapping of snippet title */
+	}
+}
+
+td.column-description {
+	max-inline-size: 700px;
+
+	pre {
+		white-space: unset;
+	}
+}
+
+.inactive-snippet {
+	@include theme.link-colors(#579);
+}
+
+@media (width <= 782px) {
+	p.search-box {
+		float: inline-start;
+		position: initial;
+		margin-block: 1em 0;
+		margin-inline: 0;
+		block-size: auto;
+	}
+}
+
+.wp-list-table .is-expanded td.column-activate.activate {
+	/* fix for mobile layout */
+	display: table-cell !important;
+}
+
+.nav-tab-wrapper + .subsubsub, p.search-box {
+	margin-block: 10px 0;
+	margin-inline: 0;
+}
+
+.snippet-type-description {
+	border-block-end: 1px solid #ccc;
+	margin: 0;
+	padding-block: 1em;
+	padding-inline: 0;
+}
+
+.code-snippets-notice a.notice-dismiss {
+	text-decoration: none;
+}
+
+.refresh-button-container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-block: 15px -39px;
+	gap: 7px;
+}
+
+#refresh-button {
+	inline-size: 30px;
+	padding: 0;
+	font-size: 20px;
+	line-height: 1.4;
+}
+
+.wrap h2.nav-tab-wrapper {
+	.nav-tab {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
+		gap: 8px;
+	}
+}
+
+@media (width <= 1190px) {
+	.nav-tab {
+		.snippet-label {
+			display: none;
+		}
+	}
+}

plugins/code-snippets/css/manage/_cloud.scss

@@ -0,0 +1,383 @@
+@use '../common/theme';
+@use '../common/tooltips';
+
+.cloud-legend-tooltip {
+	h3 {
+		font-size: 16px;
+		color: #fff;
+		text-align: center;
+	}
+
+	td {
+		vertical-align: top;
+	}
+}
+
+.cloud-search-info {
+	text-align: justify;
+
+	small {
+		color: #646970;
+		float: inline-end;
+	}
+}
+
+.thickbox-code-viewer {
+	min-block-size: 250px;
+	background-color: hsl(0deg 0% 96.5%);
+	padding: 20px;
+	border-radius: 10px;
+}
+
+#snippet-code-thickbox {
+	display: block;
+	inline-size: 100%;
+}
+
+.no-results {
+	font-size: 15px;
+}
+
+.dashicons.cloud-synced {
+	color: theme.$cloud;
+}
+
+.dashicons.cloud-downloaded {
+	color: #e91e63;
+}
+
+.dashicons.cloud-not-downloaded {
+	color: theme.$outline;
+}
+
+.dashicons.cloud-update {
+	color: theme.$cloud-update;
+}
+
+.cloud_update a {
+	color: theme.$cloud-update !important;
+	text-decoration: underline;
+}
+
+.updated.column-updated span {
+	text-decoration: dotted underline;
+}
+
+td.column-name {
+	.cloud-icon {
+		margin-inline-end: 3px;
+	}
+}
+
+.cloud-snippet-download {
+	color: theme.$accent !important;
+}
+
+.cloud-snippet-downloaded, .cloud-snippet-preview-style {
+	color: #616161 !important;
+}
+
+.cloud-snippet-update {
+	color: theme.$cloud-update !important;
+}
+
+#cloud-search-form {
+	margin-block: 30px;
+	text-align: center;
+}
+
+.input-group {
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+	max-inline-size: 900px;
+	margin-block: 0;
+	margin-inline: auto;
+}
+
+#cloud_search {
+	display: block;
+	padding-block: 0.375rem;
+	padding-inline: 0.75rem;
+	font-size: 1rem;
+	color: #495057;
+	background-clip: padding-box;
+	border-radius: 0;
+	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+	position: relative;
+	flex: 1 1 auto;
+	inline-size: 1%;
+	margin-block-end: 0;
+
+	&:focus {
+		outline: 0;
+		border: 1px solid #8c8f94;
+		box-shadow: none;
+	}
+}
+
+#cloud-select-prepend {
+	margin-inline-end: -3px;
+	border-start-end-radius: 0;
+	border-end-end-radius: 0;
+	position: relative;
+	z-index: 2;
+	color: theme.$accent;
+	border-color: theme.$accent;
+	background-color: #f6f7f7;
+
+	&:hover {
+		background-color: #f0f0f1;
+		border-color: #0a4b78;
+		color: #0a4b78;
+	}
+}
+
+#cloud-search-submit {
+	padding-block: 0;
+	padding-inline: 15px;
+	margin-inline-start: -3px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.cloud-search {
+	margin-inline-start: 5px;
+}
+
+.bundle-group {
+	margin-block-start: 10px;
+	justify-content: space-between;
+	display: flex;
+	gap: 5px;
+	flex-wrap: nowrap;
+}
+
+#cloud-bundles {
+	color: #495057;
+	display: flex;
+	flex: 1 1 auto;
+	font-size: 1rem;
+	padding-block: 0.375rem;
+	padding-inline: 0.75rem;
+	position: relative;
+	inline-size: 50%;
+}
+
+#cloud-bundle-show {
+	inline-size: 10%;
+}
+
+#cloud-bundle-run {
+	inline-size: 15%;
+}
+
+#bundle_share_name {
+	color: #495057;
+	font-size: 1rem;
+	inline-size: 25%;
+}
+
+.heading-box {
+	max-inline-size: 900px;
+	margin: auto;
+	padding-block-end: 1rem;
+}
+
+.cloud-search-heading {
+	font-size: 23px;
+	font-weight: 400;
+	padding-block: 9px 4px;
+	padding-inline: 0;
+	line-height: 1.3;
+	text-align: center;
+	margin-block-end: 0;
+}
+
+.cloud-badge.ai-icon {
+	font-size: 12px;
+	padding: 3px;
+	margin-inline-start: 5px;
+	color: #b22222;
+}
+
+.cloud-search-card-bottom {
+	min-block-size: 40px;
+}
+
+#cloud-search-results .cloud-snippets #the-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+
+	.plugin-card {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		.cloud-meta-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-grow: 1;
+		}
+
+		.column-name {
+			display: flex;
+			justify-content: space-between;
+
+			h3 {
+				display: inline-flex;
+				flex-shrink: 1;
+			}
+
+			.title-icon {
+				block-size: 90px;
+				margin-block-start: -7px;
+			}
+		}
+
+		.column-votes {
+			display: inline-flex;
+			gap: 3px;
+
+			&:hover {
+				.thumbs-up {
+					stroke: #059669;
+					fill: #6ee7b7;
+					animation: thumb 1s ease-in-out infinite;
+				}
+			}
+
+			.num-votes {
+				display: inline-flex;
+				align-items: flex-end;
+			}
+		}
+	}
+
+	.action-buttons {
+		margin: 0;
+		align-items: flex-end;
+
+		.button {
+			inline-size: 100%;
+			text-align: center;
+		}
+	}
+}
+
+.cloud-snippets #the-list {
+	.column-download {
+		display: flex;
+		flex-flow: column;
+		text-align: end;
+    
+		li {
+			list-style: none;
+		}
+	}
+}
+
+.cloud-connect-wrap {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	max-block-size: 35px;
+	margin-block: 0;
+	margin-inline: 3px;
+	float: inline-end;
+	gap: 5px;
+}
+
+.cloud-table > tbody > tr {
+	block-size: 80px;
+	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
+}
+
+.cloud-table > tbody > tr > td {
+	max-inline-size: 250px;
+}
+
+.cloud-table tbody .active-snippet .column-name {
+	font-weight: 400;
+	max-inline-size: 400px;
+	white-space: normal !important;
+}
+
+.cloud-table td .no-results {
+	margin-block-start: 15px;
+	color: #e32121;
+	text-align: center;
+}
+
+.cloud-status-dot {
+	block-size: 10px;
+	inline-size: 10px;
+	background-color: #ce0000;
+	border-radius: 50%;
+
+
+	.cloud-connect-active & {
+		background-color: #25a349;
+	}
+}
+
+.cloud-connect-text {
+	color: #ce0000;
+
+	.cloud-connect-active & {
+		color: #2e7d32;
+	}
+}
+
+.thumbs-up {
+	inline-size: 1.25rem; /* 20px */
+	block-size: 1.25rem; /* 20px */
+	transform-origin: bottom left;
+
+	&:hover {
+		stroke: #059669;
+		fill: #6ee7b7;
+	}
+}
+
+.plugin-card-bottom {
+	overflow: visible !important;
+	display: flex;
+	align-items: center;
+}
+
+.beta-test-notice {
+	margin-block-start: 20px;
+}
+
+.highlight-yellow {
+	background: #fefdba;
+	padding: 3px;
+	border-radius: 3px;
+}
+
+@keyframes thumb {
+	0% {
+		transform: rotate(0);
+	}
+
+	33% {
+		transform: rotate(7deg);
+	}
+
+	66% {
+		transform: rotate(-15deg);
+	}
+
+	90% {
+		transform: rotate(5deg);
+	}
+
+	100% {
+		transform: rotate(0);
+	}
+}

plugins/code-snippets/css/menu.scss

@@ -0,0 +1,35 @@
+#adminmenu {
+	.toplevel_page_snippets div.wp-menu-image::before {
+		content: '';
+		mask-image: url('../assets/menu-icon.svg');
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: currentcolor;
+	}
+
+	.code-snippets-upgrade-button {
+		color: #fff;
+		background-color: #d46f4d;
+		border: none;
+		text-align: center;
+		font-weight: bold;
+		transition: background-color .1s linear;
+		white-space: break-spaces;
+		line-height: inherit;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		&:hover {
+			background-color: #08c5d1;
+		}
+
+		.dashicons {
+			vertical-align: text-bottom;
+		}
+	}
+
+	.wp-submenu a[href='admin.php?page=code_snippets_upgrade']:hover {
+		box-shadow: none;
+	}
+}

plugins/code-snippets/css/prism.scss

@@ -0,0 +1,83 @@
+@import '~prismjs/themes/prism.css';
+@import '~prismjs/plugins/line-numbers/prism-line-numbers.css';
+@import '~prismjs/plugins/toolbar/prism-toolbar.css';
+@import '~prismjs/plugins/inline-color/prism-inline-color.css';
+@import '~prismjs/plugins/previewers/prism-previewers.css';
+@import '~prismjs/plugins/autolinker/prism-autolinker.css';
+
+/* These lines are taken from '~prismjs/plugins/inline-color/prism-inline-color.css', adjusted to avoid autoprefixer
+complaining about deprecated syntax. Ideally, they can be removed if the file in question is updated. */
+
+pre[data-line] {
+	position: relative;
+	padding-block: 1em;
+	padding-inline: 3em 0;
+}
+
+.line-highlight {
+	position: absolute;
+	inset-inline: 0;
+	padding: inherit;
+	margin-block-start: 1em;
+	background: hsl(24deg 20% 50% / 8%);
+	background: linear-gradient(to right, hsl(24deg 20% 50% / 10%) 70%, hsl(24deg 20% 50% / 0%));
+	pointer-events: none;
+	line-height: inherit;
+	white-space: pre;
+
+	@media print {
+		print-color-adjust: exact;
+	}
+
+	&::before, &[data-end]::after {
+		content: attr(data-start);
+		position: absolute;
+		inset-block-start: .4em;
+		inset-inline-start: .6em;
+		min-inline-size: 1em;
+		padding-block: 0;
+		padding-inline: .5em;
+		background-color: hsl(24deg 20% 50% / 40%);
+		color: hsl(24deg 20% 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	&[data-end]::after {
+		content: attr(data-end);
+		inset-block: auto .4em;
+	}
+
+	.line-numbers &::before, .line-numbers &::after {
+		content: none;
+	}
+
+	/* Additional fixes to the behaviour of line highlighting with certain themes. */
+
+	.is-style-prism-coy-without-shadows pre[class*="language-"] & {
+		margin-block-start: 0;
+	}
+
+	:not(.is-style-prism-shades-of-purple) pre[class*="language-"].line-numbers & {
+		box-sizing: border-box;
+		padding: 0;
+		margin-block: 1em 0;
+		margin-inline: 0;
+	}
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows {
+	pointer-events: all;
+
+	> span::before {
+		cursor: pointer;
+	}
+
+	> span:hover::before {
+		background-color: rgb(128 128 128 / 20%);
+	}
+}

plugins/code-snippets/css/settings.scss

@@ -0,0 +1,213 @@
+@use 'common/codemirror';
+
+$sections: general, editor, debug, version-switch;
+
+p.submit {
+	display: flex;
+	justify-content: space-between;
+}
+
+.settings-section,
+p.submit {
+	max-inline-size: 1020px;
+}
+
+.nav-tab-wrapper {
+	margin-block-end: 1em;
+}
+
+input[type="number"] {
+	inline-size: 4em;
+}
+
+.CodeMirror {
+	max-inline-size: 800px;
+	inline-size: 100%;
+	padding-inline-end: 1em;
+}
+
+.CodeMirror-sizer::before {
+	content: '<?php';
+}
+
+body.no-js {
+	.nav-tab-wrapper {
+		display: none;
+	}
+
+	.settings-section {
+		display: block !important;
+	}
+}
+
+body.js {
+	.settings-section-title {
+		border: 0;
+		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
+		block-size: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;
+		inline-size: 1px;
+		word-wrap: normal !important;
+	}
+
+	.nav-tab:not(.nav-tab-active) {
+		cursor: pointer;
+	}
+
+	.settings-section {
+		display: none;
+	}
+
+	@each $section in $sections {
+		.wrap[data-active-tab=#{$section}] .#{$section}-settings {
+			display: block;
+		}
+	}
+}
+
+.license-status {
+	display: inline-block;
+	padding-inline-end: 2em;
+	line-height: 2;
+	color: #aaa;
+}
+
+.license-status-valid {
+	color: #2ecc40;
+}
+
+.license-status-expired {
+	color: #dc3232;
+}
+
+.wrap[data-active-tab="license"] .submit {
+	display: none;
+}
+
+#code_snippets_remove_license {
+	color: #b32d2e;
+	border-color: #b32d2e;
+}
+
+#code_snippets_license_key {
+	font-family: Consolas, Monaco, monospace;
+}
+
+#cloud_token {
+	max-inline-size: 450px;
+	inline-size: 90vw;
+}
+
+.cloud-message {
+	inline-size: fit-content;
+	padding: 5px;
+	border-radius: 5px;
+	font-weight: 600;
+}
+
+.cloud-error {
+	background: #e53935;
+	color: #ffebee;
+}
+
+.cloud-success {
+	background: #43a047;
+	color: #e8f5e9;
+}
+
+.refresh-success {
+	background: #2271b1;
+	color: #ffeb3b;
+}
+
+.cloud-settings tbody tr:nth-child(n+5) {
+	display: none;
+}
+
+// Version Switch Styles
+.code-snippets-version-switch {
+	.current-version {
+		font-family: monospace;
+		font-size: 1.1em;
+		font-weight: bold;
+		color: #0073aa;
+		background: #f0f6fc;
+		padding: 2px 8px;
+		border-radius: 3px;
+		border: 1px solid #c3c4c7;
+	}
+
+	#target_version {
+		min-inline-size: 200px;
+		margin-inline-start: 8px;
+	}
+
+	#switch-version-btn {
+		&[disabled] {
+			opacity: 0.6;
+			cursor: not-allowed;
+			background-color: #f0f0f1 !important;
+			color: #a7aaad !important;
+			border-color: #dcdcde !important;
+		}
+	}
+	
+	// Warning box styling
+	#version-switch-warning {
+		margin-block-start: 20px !important;
+		padding: 12px 16px;
+		border-inline-start: 4px solid #dba617;
+		background: #fff8e5;
+		border-radius: 4px;
+		
+		p {
+			margin: 0;
+			color: #8f6914;
+			
+			strong {
+				color: #8f6914;
+			}
+		}
+	}
+
+	#version-switch-result {
+		margin-block-start: 12px;
+		
+		&.notice {
+			padding: 8px 12px;
+			border-radius: 4px;
+		}
+	}
+
+	.notice {
+		&.notice {
+			&-success {
+				border-inline-start-color: #00a32a;
+			}
+
+			&-error {
+				border-inline-start-color: #d63638;
+			}
+
+			&-warning {
+				border-inline-start-color: #dba617;
+			}
+
+			&-info {
+				border-inline-start-color: #72aee6;
+			}
+		}
+	}
+}
+
+.version-switch-settings {
+	.form-table {
+		th {
+			inline-size: 180px;
+		}
+	}
+}

plugins/code-snippets/css/welcome.scss

@@ -0,0 +1,383 @@
+@use 'sass:color';
+@use 'common/theme';
+@use 'common/badges';
+
+$breakpoint: 1060px;
+
+.csp-welcome-wrap {
+	padding: 25px;
+
+	h1, h2, h3 {
+		font-weight: 700;
+		margin-block: 10px;
+
+		.dashicons {
+			font-size: 90%;
+			line-height: inherit;
+			inline-size: auto;
+		}
+	}
+
+	h1 {
+		font-size: 1.6rem;
+	}
+
+	h2 {
+		font-size: 1.4rem;
+	}
+
+	.dashicons-external {
+		float: inline-end;
+		color: #666;
+	}
+}
+
+.csp-welcome-header {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+	align-items: center;
+
+	header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 10px;
+
+		h1 {
+			font-size: 1.4rem;
+			font-weight: bold;
+			line-height: 1;
+			margin: 0;
+
+			span {
+				text-decoration: underline theme.$primary wavy 3px;
+				text-decoration-skip-ink: none;
+				text-underline-offset: 11px;
+				text-transform: capitalize;
+			}
+		}
+	}
+}
+
+.csp-welcome-header nav {
+	column-gap: 15px;
+
+	ul {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-evenly;
+		margin: 0;
+	}
+
+	li {
+		margin-block-end: 0;
+	}
+
+	li a {
+		margin-block: 10px;
+		align-items: center;
+		border-width: 1px;
+		border-style: solid;
+		color: white;
+		cursor: pointer;
+		display: flex;
+		font-weight: 400;
+		gap: 3px;
+		text-decoration: none;
+		transition: all .1s ease-in-out;
+		border-radius: 3px;
+		padding: 8px;
+
+		&:hover {
+			background: transparent;
+		}
+
+		.dashicons, svg {
+			text-decoration: none;
+			margin-block-start: -1px;
+			margin-inline-start: 3px;
+		}
+
+		svg {
+			fill: #fff;
+			inline-size: 20px;
+			block-size: 20px;
+			font-size: 20px;
+			vertical-align: top;
+		}
+
+		&:hover svg {
+			fill: currentcolor;
+		}
+	}
+
+	$link-colors: (
+		pro: theme.$secondary,
+		cloud: #08c5d1,
+		resources: #424242,
+		discord: theme.$brand-discord,
+		facebook: theme.$brand-facebook
+	);
+
+	@each $link-name, $color in $link-colors {
+		.csp-link-#{$link-name} {
+			background: $color;
+			border-color: $color;
+
+			&:hover {
+				color: $color;
+			}
+		}
+	}
+}
+
+.csp-cards {
+	display: grid;
+	grid-auto-rows: 1fr;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 40px 15px;
+
+	@media (width <= $breakpoint) {
+		grid-template-columns: 1fr !important;
+	}
+}
+
+.csp-card {
+	border: 1px solid theme.$outline;
+	background: white;
+	border-radius: 10px;
+	display: flex;
+	flex-flow: column;
+}
+
+a.csp-card {
+	text-decoration: none;
+
+	&:hover {
+		background: color.adjust(theme.$primary, $lightness: 55%);
+		transition: .5s background-color;
+		box-shadow: 0 1px 1px rgb(255 255 255 / 50%);
+
+		.dashicons-external {
+			color: #000;
+		}
+	}
+}
+
+.csp-section-changes {
+	border: 1px solid theme.$outline;
+	border-inline-start: 0;
+	border-inline-end: 0;
+	padding-block: 40px 50px;
+	padding-inline: 0;
+	display: flex;
+	flex-direction: column;
+	row-gap: 20px;
+	margin-block-start: 30px;
+
+	.csp-cards {
+		grid-template-columns: 2fr 1fr;
+		gap: 20px;
+	}
+
+	.csp-card {
+		padding: 20px;
+		box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
+
+		h2 {
+			color: theme.$primary;
+		}
+	}
+
+	.csp-changelog-wrapper {
+		overflow-y: scroll;
+	}
+
+	.csp-section-changelog {
+		font-size: 0.9rem;
+		line-height: 1.5;
+		color: #333;
+		block-size: 400px;
+
+		h3 {
+			float: inline-end;
+			color: #666;
+		}
+
+		h4 {
+			margin-block: 30px 10px;
+			margin-inline: 0;
+		}
+
+		ul {
+			margin-block-start: 5px;
+		}
+
+		li {
+			display: grid;
+			grid-template-columns: 40px 1fr;
+			grid-template-rows: 1fr;
+			align-items: baseline;
+			gap: 7px;
+		}
+
+		li .badge {
+			text-align: center;
+		}
+
+		> article::after {
+			border-block-end: 1px solid #666;
+			content: ' ';
+			display: block;
+			inline-size: 50%;
+			margin-block: 3em 0;
+			margin-inline: auto;
+		}
+
+		> article:last-child {
+			padding-block-end: 1px;
+
+			&::after {
+				border: 0;
+			}
+		}
+	}
+
+	figure {
+		margin-block: 1em 0;
+		margin-inline: 0;
+		overflow: hidden;
+		border-radius: 0.5rem;
+		border: 1px solid grey;
+		position: relative;
+		block-size: auto;
+		background: #646970;
+
+		img {
+			inline-size: 100%;
+			block-size: 100%;
+			overflow: hidden;
+			object-fit: cover;
+		}
+	}
+
+	.dashicons-lightbulb {
+		color: #f1c40f;
+	}
+
+	.dashicons-chart-line {
+		color: #85144b;
+	}
+
+	.dashicons-buddicons-replies {
+		color: #3d9970;
+	}
+}
+
+.csp-section-links {
+	padding-block: 40px 50px;
+	padding-inline: 0;
+
+	.csp-card {
+		margin-block-start: 20px;
+		justify-content: flex-start;
+		color: black;
+		position: relative;
+		overflow: hidden;
+		row-gap: 10px;
+		padding: 1rem;
+		inline-size: 85%;
+
+		header {
+			flex: 1;
+		}
+
+		figure {
+			margin-block: 1em 0;
+			margin-inline: 0;
+
+			img {
+				border-radius: 5px;
+				inline-size: 100%;
+				block-size: 100%;
+				max-block-size: 300px;
+				overflow: hidden;
+				object-fit: cover;
+			}
+		}
+
+		.csp-card-item-category {
+			color: white;
+			background: theme.$secondary;
+			display: block;
+			font-size: .9rem;
+			letter-spacing: 1px;
+			margin-block: 0;
+			text-transform: uppercase;
+			inline-size: fit-content;
+			padding-block: 5px;
+			padding-inline: 15px;
+			border-radius: 50px;
+		}
+
+		h3 {
+			font-size: 1.7rem;
+			color: theme.$primary;
+			line-height: normal;
+		}
+
+		.csp-card-item-description {
+			color: #51525c;
+			font-size: 1rem;
+			font-weight: 300;
+		}
+
+		footer {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+
+	&.csp-section-partners {
+		border-block-start: 1px solid theme.$outline;
+
+		header {
+			display: flex;
+			flex-direction: row-reverse;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+
+	&.csp-section-articles {
+		h2 {
+			font-size: 1.1rem;
+		}
+
+		figure img {
+			aspect-ratio: 1;
+		}
+	}
+}
+
+.csp-loading-spinner {
+	block-size: 0;
+	inline-size: 0;
+	padding: 15px;
+	border: 6px solid #e7c0b3;
+	border-inline-end-color: theme.$secondary;
+	border-radius: 22px;
+	animation: loading-rotate 1s infinite linear;
+	position: absolute;
+	inset-inline-start: 47%;
+	inset-block-start: 45%;
+}
+
+@keyframes loading-rotate {
+	100% {
+		transform: rotate(calc(360deg * var(--cs-direction-multiplier)));
+	}
+}