Dev

.github/workflows/release.yml

@@ -18,15 +18,18 @@ on:
 
 jobs:
     release:
-        uses: builtnorth/basecamp-dev/.github/.github/workflows/npm-package-release.yml@dev
+        permissions:
+            contents: write
+            packages: write
+        uses: builtnorth/.github/.github/workflows/npm-package-release.yml@main
         with:
             version: ${{ inputs.version }}
             prerelease: ${{ inputs.prerelease }}
             package-name: "ui-kit"
             node-version: "22"
             publish-to-npm: false
             publish-to-github: true
-            use-workspace: false # SCSS package doesn't need workspace dependencies
+            use-workspace: true
         secrets:
             POLARIS_PLUGIN_GITHUB_TOKEN: ${{ secrets.POLARIS_PLUGIN_GITHUB_TOKEN }}
             NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

src/scss/forms/_gravity-forms.scss

@@ -0,0 +1,179 @@
+.gform_body,
+.gform_page {
+	display: flex;
+	flex-direction: column;
+	gap: var(
+		--wp--custom--spacing--form-column-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+}
+
+.gfield {
+	grid-column: 1 / -1;
+	min-inline-size: 0;
+}
+
+.ginput_complex {
+	> span {
+		display: flex;
+		flex-direction: column;
+
+		label {
+			order: 2;
+		}
+
+		input {
+			order: 1;
+		}
+	}
+}
+
+.gfield_radio,
+.gfield_checkbox {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(
+		--wp--custom--spacing--form-column-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+
+	.gchoice {
+		display: flex;
+		align-items: flex-start;
+		gap: var(
+			--wp--custom--spacing--form-choice-gap,
+			var(--wp--preset--spacing--30, 0.75rem)
+		);
+	}
+}
+
+.ginput_container_consent {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: var(
+		--wp--custom--spacing--form-choice-gap,
+		var(--wp--preset--spacing--30, 0.75rem)
+	);
+	align-items: start;
+
+	input[type="checkbox"] {
+		margin-block-start: 0.25em; // Align with first line of text
+	}
+
+	.gfield_consent_label {
+		display: inline;
+	}
+}
+
+.gform_fields {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	column-gap: var(
+		--wp--custom--spacing--form-column-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+	row-gap: var(
+		--wp--custom--spacing--form-row-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+}
+
+.gform_page_footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(
+		--wp--custom--spacing--form-column-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+}
+
+.gform-grid-row {
+	display: flex;
+	flex-flow: row wrap;
+	gap: var(
+		--wp--custom--spacing--form-column-gap,
+		var(--wp--style--block-gap, 1rem)
+	);
+}
+
+.gform-grid-col {
+	flex: 0 0 100%;
+	min-inline-size: 0;
+}
+
+.ginput_address_city,
+.ginput_address_country,
+.ginput_address_state,
+.ginput_address_zip {
+	flex: 0 0
+		calc(
+			50% -
+				(
+					var(
+							--wp--custom--spacing--form-column-gap,
+							var(--wp--style--block-gap, 1rem)
+						) /
+						2
+				)
+		);
+	@container (max-width: 48rem) {
+		flex-basis: 100%;
+	}
+}
+
+.gform-grid-col.gform-grid-col--size-auto {
+	flex: 1;
+	inline-size: auto;
+}
+
+.gfield--width-full {
+	grid-column: span 12;
+}
+
+.gfield--width-half {
+	grid-column: span 6;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+
+.gfield--width-third {
+	grid-column: span 4;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+
+.gfield--width-two-third {
+	grid-column: span 8;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+.gfield--width-quarter {
+	grid-column: span 3;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+
+.gfield--width-three-quarter {
+	grid-column: span 9;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+
+.gfield--width-five-sixths {
+	grid-column: span 10;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}
+
+.gfield--width-one-sixth {
+	grid-column: span 2;
+	@container (max-width: 48rem) {
+		grid-column: span 12;
+	}
+}

src/scss/forms/_shared.scss

@@ -0,0 +1,61 @@
+input,
+select,
+textarea {
+	margin: 0;
+	border-width: var(--wp--custom--border-width--form-field, 1px);
+	border-color: var(--wp--custom--color--form-field-border, #8e8e8e);
+	border-radius: var(--wp--custom--border-radius--form-field, 0);
+	padding-top: var(--wp--custom--spacing--form-field, 0.11rem);
+	padding-bottom: var(--wp--custom--spacing--form-field, 0.11rem);
+	padding-left: var(--wp--custom--spacing--form-field, 0.11rem);
+	padding-right: var(--wp--custom--spacing--form-field, 0.11rem);
+	width: 100%;
+
+	&:focus,
+	&:focus-within {
+		outline-color: var(--wp--preset--color--primary);
+	}
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+	margin-top: var(--wp--preset--spacing--20, 0.25rem);
+	width: var(--wp--custom--form-choice-size, 1.125rem);
+	height: var(--wp--custom--form-choice-size, 1.125rem);
+	appearance: none;
+	background-color: var(--wp--preset--color--white, #fff);
+	border-style: solid;
+	display: inline-block;
+	vertical-align: middle;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	flex-shrink: 0;
+
+	&:checked {
+		background-color: var(--wp--preset--color--primary);
+		border-color: var(--wp--preset--color--primary);
+	}
+
+	&:focus {
+		outline-color: var(--wp--preset--color--primary);
+		outline-offset: 2px;
+	}
+}
+
+input[type="checkbox"] {
+	border-radius: var(--wp--custom--border-radius--form-choice, 0.25rem);
+
+	&:checked {
+		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+	}
+}
+
+input[type="radio"],
+input[type="radio"] {
+	border-radius: 50%;
+
+	&:checked {
+		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+	}
+}

src/scss/layout/_columns.scss

@@ -25,7 +25,6 @@
 		min-width: 4rem;
 		flex-direction: column;
 		display: flex;
-		align-self: stretch;
 
 		/* fix for gutenberg */
 		margin-block-start: 0;