Dev

package.json

@@ -1,67 +1,42 @@
 {
-	"name": "@builtnorth/ui-kit",
-	"version": "0.0.1",
-	"description": "NPM package for very minimal global and common CSS and JS.",
-	"main": "index.js",
-	"scripts": {
-		"build": "wp-scripts build",
-		"check-engines": "wp-scripts check-engines",
-		"check-licenses": "wp-scripts check-licenses",
-		"format": "wp-scripts format",
-		"lint:css": "wp-scripts lint-style",
-		"lint:js": "wp-scripts lint-js",
-		"lint:md:docs": "wp-scripts lint-md-docs",
-		"lint:pkg-json": "wp-scripts lint-pkg-json",
-		"packages-update": "wp-scripts packages-update",
-		"plugin-zip": "wp-scripts plugin-zip",
-		"start": "wp-scripts start",
-		"test:e2e": "wp-scripts test-e2e",
-		"test:unit": "wp-scripts test-unit-js",
-		"build:debug": "NODE_ENV=development wp-scripts build",
-		"inspect": "wp-scripts build --webpack-bundle-analyzer"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+:https://github.com/builtnorth/wp-admin-dashboard.git"
-	},
-	"author": "Built North",
-	"license": "GPL-2.0-or-later",
-	"bugs": {
-		"url": "https://github.com/builtnorth/wp-admin-dashboard.git/issues"
-	},
-	"homepage": "https://github.com/builtnorth/wp-admin-dashboard?tab=readme-ov-file#readme",
-	"devDependencies": {
-		"@babel/core": "^7.24.7",
-		"@babel/preset-env": "^7.24.7",
-		"@babel/preset-react": "^7.24.7",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/scripts": "^26.19.0",
-		"babel-loader": "^8.3.0",
-		"classnames": "^2.5.1",
-		"lodash": "^4.17.21"
-	},
-	"exports": {
-		"./ui-kit": "./scss/style.scss",
-		"./base/": "./scss/base/index.scss",
-		"./base/utilities": "./scss/base/utilities.scss",
-		"./base/reset": "./scss/base/reset.scss",
-		"./base/accessibility": "./scss/base/accessibility.scss",
-		"./components": "./scss/components/index.scss",
-		"./components/buttons": "./scss/components/buttons.scss",
-		"./components/icons": "./scss/components/icons.scss",
-		"./components/slider": "./scss/components/slider.scss",
-		"./forms": "./scss/forms/index.scss",
-		"./forms/label": "./scss/forms/label.scss",
-		"./forms/fieldset": "./scss/forms/fieldset.scss",
-		"./forms/select": "./scss/forms/select.scss",
-		"./forms/checkbox": "./scss/forms/checkbox.scss",
-		"./forms/text": "./scss/forms/text.scss",
-		"./helpers": "./scss/helpers/index.scss",
-		"./helpers/mixins": "./scss/helpers/mixins.scss",
-		"./helpers/functions": "./scss/helpers/functions.scss",
-		"./helpers/media-queries": "./scss/helpers/media-queries.scss",
-		"./layout": "./scss/layout/index.scss",
-		"./layout/grid": "./scss/layout/grid.scss",
-		"./layout/columns": "./scss/layout/columns.scss"
-	}
+    "name": "@builtnorth/ui-kit",
+    "version": "0.0.1",
+    "description": "NPM package for very minimal global and common CSS and JS.",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+:https://github.com/builtnorth/wp-admin-dashboard.git"
+    },
+    "author": "Built North",
+    "license": "GPL-2.0-or-later",
+    "bugs": {
+        "url": "https://github.com/builtnorth/wp-admin-dashboard.git/issues"
+    },
+    "homepage": "https://github.com/builtnorth/wp-admin-dashboard?tab=readme-ov-file#readme",
+    "exports": {
+        ".": "./src/scss/style.scss",
+        "./base": "./src/scss/base/index.scss",
+        "./base/utilities": "./src/scss/base/_utilities.scss",
+        "./base/reset": "./src/scss/base/_reset.scss",
+        "./base/accessibility": "./src/scss/base/_accessibility.scss",
+        "./base/images": "./src/scss/base/_images.scss",
+        "./components": "./src/scss/components/index.scss",
+        "./components/buttons": "./src/scss/components/_buttons.scss",
+        "./components/slider": "./src/scss/components/_slider.scss",
+        "./forms": "./src/scss/forms/index.scss",
+        "./forms/label": "./src/scss/forms/_label.scss",
+        "./forms/fieldset": "./src/scss/forms/_fieldset.scss",
+        "./forms/select": "./src/scss/forms/_select.scss",
+        "./forms/checkbox": "./src/scss/forms/_checkbox.scss",
+        "./forms/text": "./src/scss/forms/_text.scss",
+        "./helpers": "./src/scss/helpers/index.scss",
+        "./helpers/mixins": "./src/scss/helpers/_mixins.scss",
+        "./helpers/functions": "./src/scss/helpers/_functions.scss",
+        "./helpers/media-queries": "./src/scss/helpers/_media-queries.scss",
+        "./layout": "./src/scss/layout/index.scss",
+        "./layout/grid": "./src/scss/layout/_grid.scss",
+        "./layout/columns": "./src/scss/layout/_columns.scss",
+        "./gutenberg": "./src/scss/gutenberg/index.scss",
+        "./gutenberg/quirks": "./src/scss/gutenberg/_quirks.scss"
+    }
 }

src/scss/base/_accessibility.scss

@@ -9,97 +9,97 @@ Helper classes for improving accessibility.
 /* Accessible card link
 ----------------------------------------------------------------*/
 .has-accessible-card-link {
-	position: relative;
+    position: relative;
 
-	// Additional links that are inside the card
-	.is-interior-link,
-	.wp-block-post-terms a {
-		position: relative;
-		z-index: 2;
-		color: inherit;
-	}
+    // Additional links that are inside the card
+    .is-interior-link,
+    .wp-block-post-terms a {
+        position: relative;
+        z-index: 2;
+        color: inherit;
+    }
 }
 
 .accessible-card-link {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
-	z-index: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 0;
 }
 
 /* Screen reader text
 ----------------------------------------------------------------*/
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal;
-	left: -99999px;
+.screen-reader-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal;
+    //left: -99999px; // Messes up Gutenberg skip to link
 }
 
 /* Skip content
 ----------------------------------------------------------------*/
 .skip-content {
-	z-index: 999;
-	display: block;
-	color: var(--color--theme-base);
-	background-color: var(--color--theme-contrast);
-	border: 2px solid var(--color--theme-base);
-	padding: 5px 10px;
-	position: absolute;
-	left: -99999px;
-	font-size: var(--font-size--small);
-	font-weight: var(--font-weight--bold);
-	cursor: default;
+    z-index: 999;
+    display: block;
+    color: var(--color--theme-base);
+    background-color: var(--color--theme-contrast);
+    border: 2px solid var(--color--theme-base);
+    padding: 5px 10px;
+    position: absolute;
+    left: -99999px;
+    font-size: var(--font-size--small);
+    font-weight: var(--font-weight--bold);
+    cursor: default;
 
-	&:focus,
-	&:active {
-		color: var(--color--theme-base);
-		background-color: var(--color--theme-contrast);
-		visibility: visible;
-		text-decoration: underline;
-		left: 12px;
-	}
+    &:focus,
+    &:active {
+        color: var(--color--theme-base);
+        background-color: var(--color--theme-contrast);
+        visibility: visible;
+        text-decoration: underline;
+        left: 12px;
+    }
 
-	&.skip-to-main {
-		top: 4px;
-	}
+    &.skip-to-main {
+        top: 4px;
+    }
 
-	&.skip-to-top {
-		bottom: 4px;
-	}
+    &.skip-to-top {
+        bottom: 4px;
+    }
 }
 
 /* Motion specific
 ----------------------------------------------------------------*/
 
 /* If no preferecne, smooth scroll */
 @media (prefers-reduced-motion: no-preference) {
-	:has(:target) {
-		scroll-behavior: smooth;
-	}
+    :has(:target) {
+        scroll-behavior: smooth;
+    }
 }
 
 /* If reduced motion, disable animations and transitions */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 
-	html {
-		scroll-behavior: initial;
-	}
+    html {
+        scroll-behavior: initial;
+    }
 }

src/scss/base/_images.scss

@@ -0,0 +1,16 @@
+// Flexible figure and caption styles that work with any prefix
+.wp-block-image,
+[class$="__figure"] {
+    position: relative;
+
+    .wp-element-caption,
+    [class$="__caption"] {
+        position: absolute;
+        bottom: var(--wp--preset--spacing--30);
+        left: var(--wp--preset--spacing--30);
+        font-size: var(--wp--preset--font-size--tiny, 0.75rem);
+        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
+        background-color: var(--wp--preset--color--base);
+        color: var(--wp--preset--color--contrast);
+    }
+}