@transferwise/neptune-css 0.0.0-experimental-4c688cd → 0.0.0-experimental-5405b30

package/dist/css/utilities.css

@@ -1,145 +1 @@
-.d-inline-block {
-  display: inline-block;
-}
-.d-inline {
-  display: inline;
-}
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
-}
-.clearfix::after {
-  clear: both;
-}
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.pull-right,
-.pull-xs-right {
-  float: right !important;
-}
-[dir="rtl"] .pull-right,
-[dir="rtl"] .pull-xs-right {
-  float: left !important;
-}
-.pull-left,
-.pull-xs-left {
-  float: left !important;
-}
-[dir="rtl"] .pull-left,
-[dir="rtl"] .pull-xs-left {
-  float: right !important;
-}
-.pull-xs-none {
-  float: none !important;
-}
-@media (min-width: 576px) {
-  .pull-sm-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-sm-left {
-    float: right !important;
-  }
-  .pull-sm-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-sm-right {
-    float: left !important;
-  }
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-@media (min-width: 768px) {
-  .pull-md-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-md-left {
-    float: right !important;
-  }
-  .pull-md-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-md-right {
-    float: left !important;
-  }
-  .pull-md-none {
-    float: none !important;
-  }
-}
-@media (min-width: 992px) {
-  .pull-lg-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-lg-left {
-    float: right !important;
-  }
-  .pull-lg-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-lg-right {
-    float: left !important;
-  }
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-@media (min-width: 1200px) {
-  .pull-xl-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-xl-left {
-    float: right !important;
-  }
-  .pull-xl-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-xl-right {
-    float: left !important;
-  }
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-.pull-left-single-direction {
-  float: left !important;
-}
-.pull-right-single-direction {
-  float: right !important;
-}
-.hide {
-  display: none !important;
-}
-.show {
-  display: block !important;
-}
-.invisible {
-  visibility: hidden;
-}
-.text-hide {
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-.hidden {
-  display: none !important;
-}
-.affix {
-  position: fixed;
-}
-.rotate90 {
-  transform: rotate(90deg);
-}
-.rotate180 {
-  transform: rotate(180deg);
-}
-.rotate270 {
-  transform: rotate(270deg);
-}
-.rotate-90 {
-  transform: rotate(-90deg);
-}
+.d-inline-block{display:inline-block}.d-inline{display:inline}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right,.pull-xs-right{float:right!important}.pull-left,.pull-xs-left,[dir=rtl] .pull-right,[dir=rtl] .pull-xs-right{float:left!important}[dir=rtl] .pull-left,[dir=rtl] .pull-xs-left{float:right!important}.pull-xs-none{float:none!important}@media (min-width:576px){.pull-sm-left{float:left!important}.pull-sm-right,[dir=rtl] .pull-sm-left{float:right!important}[dir=rtl] .pull-sm-right{float:left!important}.pull-sm-none{float:none!important}}@media (min-width:768px){.pull-md-left{float:left!important}.pull-md-right,[dir=rtl] .pull-md-left{float:right!important}[dir=rtl] .pull-md-right{float:left!important}.pull-md-none{float:none!important}}@media (min-width:992px){.pull-lg-left{float:left!important}.pull-lg-right,[dir=rtl] .pull-lg-left{float:right!important}[dir=rtl] .pull-lg-right{float:left!important}.pull-lg-none{float:none!important}}@media (min-width:1200px){.pull-xl-left{float:left!important}.pull-xl-right,[dir=rtl] .pull-xl-left{float:right!important}[dir=rtl] .pull-xl-right{float:left!important}.pull-xl-none{float:none!important}}.pull-left-single-direction{float:left!important}.pull-right-single-direction{float:right!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{background-color:transparent;border:0;color:transparent;text-shadow:none}.hidden{display:none!important}.affix{position:fixed}.rotate90{transform:rotate(90deg)}.rotate180{transform:rotate(180deg)}.rotate270{transform:rotate(270deg)}.rotate-90{transform:rotate(-90deg)}

package/dist/css/wells.css

@@ -1,74 +1 @@
-.well,
-.well-xs {
-  min-height: 24px;
-  min-height: var(--size-24);
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  border: solid 1px rgba(0,0,0,0.10196);
-  border: solid 1px var(--color-border-neutral);
-  padding: 24px;
-  padding: var(--size-24);
-  box-shadow: none;
-}
-@media only screen and (min-width: 576px) {
-  .well-sm {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
-    border-radius: 10px;
-    border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
-    border: solid 1px var(--color-border-neutral);
-    padding: 24px;
-    padding: var(--size-24);
-    box-shadow: none;
-  }
-}
-@media only screen and (min-width: 768px) {
-  .well-md {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
-    border-radius: 10px;
-    border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
-    border: solid 1px var(--color-border-neutral);
-    padding: 24px;
-    padding: var(--size-24);
-    box-shadow: none;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .well-lg {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
-    border-radius: 10px;
-    border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
-    border: solid 1px var(--color-border-neutral);
-    padding: 24px;
-    padding: var(--size-24);
-    box-shadow: none;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .well-xl {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
-    border-radius: 10px;
-    border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
-    border: solid 1px var(--color-border-neutral);
-    padding: 24px;
-    padding: var(--size-24);
-    box-shadow: none;
-  }
-}
+.well,.well-xs{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}@media only screen and (min-width:576px){.well-sm{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:768px){.well-md{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:992px){.well-lg{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:1200px){.well-xl{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-4c688cd",
+  "version": "0.0.0-experimental-5405b30",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,13 +28,12 @@
   "devDependencies": {
     "modern-normalize": "^2.0.0",
     "yargs": "^17.1.1",
-    "@transferwise/less-config": "0.0.0-experimental-4c688cd"
+    "@transferwise/less-config": "3.0.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "analyze:css-selectors": "node ./scripts/analyze-css-selectors.js",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf dist",
     "build:copy-assets": "npm-run-all --parallel copy:*",

package/src/less/buttons.less

@@ -200,7 +200,7 @@
 .btn-link,
 .btn-accent:not(.disabled, :disabled).btn-priority-3 {
   color: var(--color-content-accent);
-  text-decoration: underline;
+  text-decoration: @link-decoration;
   border-color: transparent;
 
   &,
@@ -214,7 +214,7 @@
   &:not(.disabled, :disabled):hover,
   &:not(.disabled, :disabled):focus-visible {
     color: var(--color-content-accent-hover);
-    text-decoration: underline;
+    text-decoration: @link-decoration;
     border-color: transparent;
     background-color: transparent;
   }
@@ -226,15 +226,18 @@
   .np-theme-personal & {
     color: var(--color-interactive-primary);
     border-color: transparent;
+    text-decoration-thickness: 2px;
     .link-underline();
 
     &:not(.disabled, :disabled):hover,
     &:not(.disabled, :disabled):focus-visible {
       color: var(--color-interactive-primary-hover);
       border-color: transparent;
+      text-decoration-thickness: 2px;
     }
 
     &:not(.disabled, :disabled):active {
+      text-decoration-thickness: 2px;
       color: var(--color-interactive-primary-active);
       background-color: var(--color-background-screen-active) !important;
     }
@@ -249,6 +252,7 @@
   text-decoration: underline;
 
   .np-theme-personal & {
+    text-decoration-thickness: 2px;
     .link-underline();
   }
 }

package/src/less/core/_scaffolding.less

@@ -36,9 +36,7 @@
   line-height: var(--line-height-body);
 }
 
-.np-theme-personal,
-.np-personal--forest-green,
-.np-personal--bright-green {
+.np-theme-personal {
   --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
 
   font-family: var(--font-family-regular);

package/scripts/analyze-css-selectors.js

@@ -1,39 +0,0 @@
-/* eslint-disable no-console */
-
-const fs = require('node:fs');
-const path = require('node:path');
-
-const postcss = require('postcss');
-
-const root = postcss.parse(fs.readFileSync(path.join(__dirname, '../dist/css/neptune.css')));
-
-/** @type {Set<string>} */
-const selectors = new Set();
-
-/**
- * @param {postcss.ChildNode} node
- */
-function visitNode(node) {
-  switch (node.type) {
-    case 'rule': {
-      for (const selector of node.selectors) {
-        selectors.add(selector);
-      }
-      break;
-    }
-    case 'atrule': {
-      for (const childNode of node.nodes) {
-        visitNode(childNode);
-      }
-      break;
-    }
-    default:
-  }
-}
-
-for (const node of root.nodes) {
-  visitNode(node);
-}
-
-const sortedClassNameSelectors = [...selectors].filter((selector) => selector.includes('.')).sort();
-console.log(JSON.stringify(sortedClassNameSelectors, null, 2));