feat: add admin GUI for editing SLASHED design tokens

integrations/bricks/README.md

@@ -137,11 +137,13 @@ integrations/bricks/
 
 ## CSS Bundle
 
-By default, the plugin loads `dist/slashed.optimal.css` from the jsDelivr CDN (`https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@main/dist/slashed.optimal.css`). This means the plugin works out of the box without copying any CSS files locally.
+By default, the plugin loads `dist/slashed.optimal.css` from the jsDelivr CDN, pinned to an immutable release tag (e.g. `https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@v0.2.12/dist/slashed.optimal.css`). Pinning to a tag (rather than `@main`) ensures the served CSS cannot change outside a plugin release, which is important for reproducibility and supply-chain safety - jsDelivr treats commit/tag refs as effectively immutable, whereas branch refs follow the moving branch tip with a short cache window. The pinned ref lives in the `SLASHED_BRICKS_CSS_REF` constant in `slashed-bricks.php` and is bumped with each plugin release.
+
+This means the plugin works out of the box without copying any CSS files locally.
 
 If a local copy of the bundle is detected (symlink/in-repo mode or a `dist/` folder inside the plugin directory), the local file takes precedence for faster loads and offline development.
 
-To load a different bundle (e.g., the minimal `dist/slashed.essential.css` or the full `dist/slashed.full.css`), use the `slashed_bricks/css_bundle_url` filter.
+To load a different bundle (e.g., the minimal `dist/slashed.essential.css` or the full `dist/slashed.full.css`), or to override the pinned ref / point to a commit SHA, use the `slashed_bricks/css_bundle_url` filter.
 
 ## License
 

integrations/bricks/assets/admin-page.css

@@ -0,0 +1,324 @@
+/**
+ * SLASHED Admin Page Styles
+ *
+ * Custom styles for the SLASHED design token settings page.
+ * Enhances WordPress admin UI with branding and improved UX.
+ *
+ * @package SLASHED_Bricks
+ */
+
+/* Page Header */
+.slashed-admin-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 20px;
+	padding: 15px 20px;
+	background: #1d2327;
+	border-radius: 4px;
+	color: #fff;
+}
+
+.slashed-admin-header h1 {
+	margin: 0;
+	padding: 0;
+	color: #fff;
+	font-size: 1.6em;
+	line-height: 1.3;
+}
+
+.slashed-admin-header .slashed-version {
+	opacity: 0.6;
+	font-size: 0.5em;
+	font-weight: normal;
+	margin-left: 8px;
+}
+
+/* Tab Navigation */
+.slashed-admin-tabs .nav-tab-wrapper {
+	border-bottom: 2px solid #1d2327;
+	margin-bottom: 0;
+	padding-top: 0;
+}
+
+.slashed-admin-tabs .nav-tab {
+	border: 1px solid transparent;
+	border-bottom: none;
+	margin-left: 0;
+	margin-right: 4px;
+	padding: 8px 16px;
+	font-size: 14px;
+	transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.slashed-admin-tabs .nav-tab:hover {
+	background-color: #f0f0f1;
+	color: #1d2327;
+}
+
+.slashed-admin-tabs .nav-tab-active,
+.slashed-admin-tabs .nav-tab-active:hover,
+.slashed-admin-tabs .nav-tab-active:focus {
+	background: #fff;
+	border-color: #1d2327;
+	border-bottom: 1px solid #fff;
+	color: #1d2327;
+	font-weight: 600;
+}
+
+/* Tab Content */
+.slashed-tab-content {
+	background: #fff;
+	border: 1px solid #c3c4c7;
+	border-top: none;
+	padding: 20px;
+	margin-bottom: 20px;
+	animation: sf-fade-in 0.2s ease-in-out;
+}
+
+@keyframes sf-fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* Section Cards */
+.slashed-section-card {
+	background: #f9f9f9;
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+	padding: 16px 20px;
+	margin-bottom: 20px;
+}
+
+.slashed-section-card h2 {
+	margin-top: 0;
+	padding-top: 0;
+	font-size: 1.2em;
+	border-bottom: 1px solid #e0e0e0;
+	padding-bottom: 8px;
+	margin-bottom: 12px;
+}
+
+.slashed-section-card .description {
+	color: #646970;
+	font-style: italic;
+}
+
+/* Form Field Grid */
+.slashed-field-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.slashed-field-grid .form-field {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.slashed-field-grid .form-field label {
+	font-weight: 600;
+	font-size: 13px;
+}
+
+.slashed-field-grid .form-field .description {
+	font-size: 12px;
+	color: #646970;
+}
+
+/* Color Fields */
+.slashed-color-field-wrap {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.slashed-color-field-wrap .slashed-color-field {
+	flex: 1;
+}
+
+.slashed-color-field-wrap .wp-picker-container {
+	display: inline-flex;
+	align-items: center;
+}
+
+.slashed-color-field-wrap .wp-picker-container .wp-color-result {
+	margin: 0 8px 0 0;
+}
+
+.slashed-color-field-wrap .color-note {
+	display: block;
+	font-size: 11px;
+	color: #646970;
+	font-style: italic;
+	margin-top: 4px;
+}
+
+/* Range + Number Input Sync */
+.slashed-range-group {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.slashed-range-group .slashed-range-input {
+	flex: 1;
+	height: 6px;
+	cursor: pointer;
+	accent-color: #1d2327;
+}
+
+.slashed-range-group .slashed-number-input {
+	width: 70px;
+	text-align: center;
+}
+
+.slashed-range-group .slashed-range-label {
+	min-width: 40px;
+	text-align: right;
+	font-size: 12px;
+	color: #646970;
+}
+
+/* Live Preview Panel */
+.slashed-preview-panel {
+	border: 2px solid #1d2327;
+	border-radius: 4px;
+	padding: 24px;
+	margin-top: 24px;
+	background: #fff;
+	position: relative;
+}
+
+.slashed-preview-panel::before {
+	content: "Live Preview";
+	position: absolute;
+	top: -10px;
+	left: 12px;
+	background: #fff;
+	padding: 0 8px;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: #1d2327;
+}
+
+.slashed-preview-panel .preview-heading {
+	margin: 0 0 12px;
+	font-size: 1.5em;
+	line-height: 1.3;
+}
+
+.slashed-preview-panel .preview-text {
+	margin: 0 0 16px;
+	line-height: 1.6;
+	color: #333;
+}
+
+.slashed-preview-panel .preview-colors {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+	margin-bottom: 16px;
+}
+
+.slashed-preview-panel .preview-color-swatch {
+	width: 48px;
+	height: 48px;
+	border-radius: 4px;
+	border: 1px solid rgb(0 0 0 / 0.1);
+}
+
+.slashed-preview-panel .preview-button {
+	display: inline-block;
+	padding: 10px 24px;
+	border-radius: 4px;
+	color: #fff;
+	font-weight: 600;
+	font-size: 14px;
+	margin-right: 8px;
+	margin-bottom: 12px;
+}
+
+.slashed-preview-panel .preview-spacing {
+	display: flex;
+	align-items: flex-end;
+	gap: 4px;
+	margin-top: 16px;
+}
+
+.slashed-preview-panel .preview-spacing-box {
+	background: rgb(29 35 39 / 0.1);
+	border: 1px solid rgb(29 35 39 / 0.2);
+	border-radius: 2px;
+	min-width: 20px;
+}
+
+/* Responsive */
+@media screen and (width <= 782px) {
+	.slashed-admin-header {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+	}
+
+	.slashed-field-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.slashed-range-group {
+		flex-wrap: wrap;
+	}
+
+	.slashed-range-group .slashed-range-input {
+		width: 100%;
+		flex: none;
+	}
+
+	.slashed-preview-panel .preview-colors {
+		gap: 4px;
+	}
+
+	.slashed-preview-panel .preview-color-swatch {
+		width: 36px;
+		height: 36px;
+	}
+}
+
+/* WordPress Admin Overrides */
+.wrap .slashed-tab-content .form-table th {
+	padding-left: 0;
+	width: 200px;
+}
+
+.wrap .slashed-tab-content .form-table td {
+	padding-left: 0;
+}
+
+.wrap .slashed-tab-content .form-table td code {
+	font-size: 12px;
+	background: #f0f0f1;
+	padding: 2px 6px;
+	border-radius: 2px;
+}
+
+/* Reset Button Styling */
+.slashed-reset-section {
+	margin-top: 16px;
+	padding-top: 16px;
+	border-top: 1px solid #e0e0e0;
+}
+
+/* Dirty state indicator */
+.slashed-form-dirty .submit .button-primary::after {
+	content: " *";
+	color: #d63638;
+}