diff --git a/docs/cyp/base/generic.html b/docs/cyp/base/generic.html
new file mode 100644
index 00000000..7205c74a
--- /dev/null
+++ b/docs/cyp/base/generic.html
@@ -0,0 +1,33 @@
+---
+layout: cypress
+title: Base/Generic
+---
+
+article
+
+figure
+
+
+hgroup
+
+body
+
+input
+
+
+
+code
+precode
+
+Link strong>
+
hr
+![]()
img
+small
+span
+strong
+
+
+
diff --git a/docs/cypress.json b/docs/cypress.json
index 7058c351..bc3fa955 100644
--- a/docs/cypress.json
+++ b/docs/cypress.json
@@ -68,6 +68,8 @@
"text-light": "rgb(122, 122, 122)",
"text-invert": "rgb(255, 255, 255)",
+ "code": "rgb(218, 16, 57)",
+
"control-radius": "4px",
"control-radius-small": "2px",
"control-border-width": "1px",
@@ -89,6 +91,9 @@
"weight-semibold": "600",
"weight-bold": "700",
+ "family-primary": "\"system-ui\", -apple-system, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+ "family-code": "monospace",
+
"viewports": {
"mobile": [320, 480],
"tablet": [769, 640],
diff --git a/docs/cypress/integration/base/generic.spec.js b/docs/cypress/integration/base/generic.spec.js
new file mode 100644
index 00000000..f7c84859
--- /dev/null
+++ b/docs/cypress/integration/base/generic.spec.js
@@ -0,0 +1,139 @@
+describe("Base/Generic", () => {
+ beforeEach(() => {
+ cy.visit("http://127.0.0.1:4000/cyp/base/generic/");
+ });
+
+ it("has a correct html", () => {
+ cy.get("html").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.minWidth).to.equal("300px");
+ expect(cs.overflowX).to.equal("hidden");
+ expect(cs.overflowY).to.equal("scroll");
+ expect(cs.textRendering).to.equal("optimizelegibility");
+ expect(cs.textSizeAdjust).to.equal("100%");
+ expect(cs.webkitFontSmoothing).to.equal("antialiased");
+ });
+ });
+
+ it("has correct HTML5 elements", () => {
+ cy.get("article, aside, figure, footer, header, hgroup, section").then(
+ ($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.display).to.equal("block");
+ }
+ );
+ });
+
+ it("has correct form elements", () => {
+ cy.get("body, button, input, optgroup, select, textarea").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontFamily).to.equal(Cypress.env("family-primary"));
+ });
+ });
+
+ it("has correct monospace elements", () => {
+ cy.get("pre, code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontFamily).to.equal(Cypress.env("family-code"));
+ expect(cs.webkitFontSmoothing).to.equal("auto");
+ });
+ });
+
+ it("has a correct body", () => {
+ cy.get("body").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontFamily).to.equal(Cypress.env("family-primary"));
+ expect(cs.fontSize).to.equal("16px");
+ expect(cs.fontWeight).to.equal("400");
+ expect(cs.lineHeight).to.equal("24px");
+ });
+ });
+
+ it("has a correct a", () => {
+ cy.get("a").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.color).to.equal(Cypress.env("link"));
+ expect(cs.cursor).to.equal("pointer");
+ expect(cs.textDecorationLine).to.equal("none");
+ });
+ });
+
+ it("has a correct code", () => {
+ cy.get("code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.color).to.equal(Cypress.env("code"));
+ });
+ });
+
+ it("has a correct hr", () => {
+ cy.get("hr").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.borderStyle).to.equal("none");
+ expect(cs.display).to.equal("block");
+ expect(cs.height).to.equal("2px");
+ expect(cs.margin).to.equal("24px 0px");
+ });
+ });
+
+ it("has a correct img", () => {
+ cy.get("img").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.height).to.equal("28px");
+ expect(cs.width).to.equal("112px");
+ });
+ });
+
+ it("has a correct checkbox", () => {
+ cy.get("input[type='checkbox']").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.verticalAlign).to.equal("baseline");
+ });
+ });
+
+ it("has a correct radio", () => {
+ cy.get("input[type='radio']").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.verticalAlign).to.equal("baseline");
+ });
+ });
+
+ it("has a correct small", () => {
+ cy.get("small").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.fontSize).to.equal("14px");
+ });
+ });
+
+ it("has a correct fieldset", () => {
+ cy.get("fieldset").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.borderStyle).to.equal("none");
+ });
+ });
+
+ it("has a correct pre", () => {
+ cy.get("pre").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.overflowX).to.equal("auto");
+ expect(cs.padding).to.equal("20px 24px");
+ expect(cs.whiteSpace).to.equal("pre");
+ expect(cs.wordWrap).to.equal("normal");
+ });
+
+ cy.get("pre code").then(($) => {
+ const cs = window.getComputedStyle($[0]);
+ expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+ expect(cs.color).to.equal(Cypress.env("text"));
+ expect(cs.fontSize).to.equal("14px");
+ expect(cs.padding).to.equal("0px");
+ });
+ });
+});