@transferwise/neptune-css 0.0.0-experimental-73c1cfd → 0.0.0-experimental-dda2eb3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-73c1cfd",
+  "version": "0.0.0-experimental-dda2eb3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,6 @@
     "@transferwise/neptune-tokens": "^8.5.0"
   },
   "devDependencies": {
-    "modern-normalize": "^2.0.0",
     "yargs": "^17.1.1",
     "@transferwise/less-config": "3.0.6"
   },

package/src/less/core/_scaffolding.less

@@ -1,12 +1,16 @@
 /* stylelint-disable selector-max-empty-lines */
-
-@import "modern-normalize";
 @import (reference) "../../variables/neptune-tokens.less";
 @import (reference) "../mixins/_logical-properties.less";
 @import (reference) "../mixins/_links.less";
 @import (reference) "../core/_typography.less";
 @import "../../variables/legacy-variables.less";
 
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
 :root {
   --radius-small: 3px;
   --radius-medium: 10px;
@@ -75,6 +79,24 @@ html {
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%; // Normalize 8.0.1
+}
+
+body {
+  margin: 0; // Normalize 8.0.1
+}
+
+main,
+details {
+  display: block; // Normalize 8.0.1
+}
+
+summary {
+  display: list-item; // Normalize 8.0.1
+}
+
+template {
+  display: none; // Normalize 8.0.1
 }
 
 blockquote,
@@ -99,6 +121,7 @@ a,
 .np-text-link-default,
 .np-text-link-large {
   color: var(--color-content-link);
+  background-color: transparent; // Normalize 8.0.1
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: normal;
   text-decoration: underline;
@@ -151,22 +174,44 @@ fieldset {
   padding: 0;
 }
 
+legend {
+  display: table; // Normalize 8.0.1
+  box-sizing: border-box; // Normalize 8.0.1
+  max-width: 100%; // Normalize 8.0.1
+  padding: 0; // Normalize 8.0.1
+  color: inherit; // Normalize 8.0.1
+  white-space: normal; // Normalize 8.0.1
+}
+
 button,
 input,
 optgroup,
 select,
 textarea {
+  margin: 0; // Normalize 8.0.1
   padding: 0;
   color: inherit;
   font-size: inherit;
+  font-family: inherit; // Normalize 8.0.1
   line-height: inherit;
 }
 
+button,
+input {
+  overflow: visible; // Normalize 8.0.1
+}
+
+button,
+select {
+  text-transform: none; // Normalize 8.0.1
+}
+
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   cursor: pointer;
+  appearance: button; // Normalize 8.0.1
 }
 
 // iOS "clickable elements" fix for role="button"
@@ -176,7 +221,35 @@ button,
   cursor: pointer;
 }
 
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; // Normalize 8.0.1
+  padding: 0; // Normalize 8.0.1
+}
+
+[type="number"] {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    height: auto; // Normalize 8.0.1
+  }
+}
+
+[type="search"] {
+  outline-offset: -2px; // Normalize 8.0.1
+  appearance: textfield; // Normalize 8.0.1
+
+  &::-webkit-search-decoration {
+    appearance: none; // Normalize 8.0.1
+  }
+}
+
+::-webkit-file-upload-button {
+  font: inherit; // Normalize 8.0.1
+  appearance: button; // Normalize 8.0.1
+}
+
 textarea {
+  overflow: auto; // Normalize 8.0.1
   resize: vertical;
 }
 
@@ -189,6 +262,10 @@ textarea {
   }
 }
 
+progress {
+  vertical-align: baseline; // Normalize 8.0.1
+}
+
 ol,
 ul {
   margin: 0 0 var(--size-24);
@@ -297,7 +374,10 @@ dd {
 }
 
 hr {
+  box-sizing: content-box; // Normalize 8.0.1
+  height: 0; // Normalize 8.0.1
   margin: var(--size-16) auto;
+  overflow: visible; // Normalize 8.0.1
   border: 0;
   border-top: 1px solid var(--color-border-neutral);
 
@@ -344,6 +424,10 @@ video {
   border-radius: 50%;
 }
 
+[hidden] {
+  display: none; // Normalize 8.0.1
+}
+
 .disabled,
 :disabled {
   filter: grayscale(1);

package/src/less/core/_typography.less

@@ -592,6 +592,29 @@ mark,
   background-color: var(--color-background-warning);
 }
 
+sub,
+sup {
+  position: relative; // Normalize 8.0.1
+  font-size: 75%; // Normalize 8.0.1
+  line-height: 0; // Normalize 8.0.1
+  vertical-align: baseline; // Normalize 8.0.1
+}
+
+sub {
+  bottom: -0.25em; // Normalize 8.0.1
+}
+
+sup {
+  top: -0.5em; // Normalize 8.0.1
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: none;
+  border-bottom: 1px dotted var(--color-content-accent);
+  cursor: help;
+}
+
 address {
   margin-bottom: var(--size-24);
   font-style: normal;
@@ -660,7 +683,10 @@ blockquote {
 
 pre,
 code,
-kbd {
+kbd,
+samp {
+  font-size: 1em;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   border-radius: var(--radius-small);
 }
 
@@ -703,3 +729,8 @@ kbd {
     font-size: 100%;
   }
 }
+
+samp {
+  font-size: 1em;
+  border-radius: 0;
+}