@transferwise/neptune-css 0.0.0-experimental-2c0913f → 0.0.0-experimental-97410ac

package/src/less/utilities.less

@@ -1,153 +1,48 @@
 @import (reference) "../variables/legacy-variables.less";
 @import (reference) "./mixins/_clearfix.less";
-@import (reference) "./mixins/_center-block.less";
 @import (reference) "./mixins/_hide-text.less";
 @import (reference) "./mixins/_logical-properties.less";
 
-.d-inline-block {
-  display: inline-block;
-}
-
-.d-inline {
-  display: inline;
-}
+@import "./utilities/align-items.less";
+@import "./utilities/align-self.less";
+@import "./utilities/border-radius.less";
+@import "./utilities/color.less";
+@import "./utilities/cursor.less";
+@import "./utilities/display.less";
+@import "./utilities/flex-direction.less";
+@import "./utilities/flex-grow.less";
+@import "./utilities/flex-wrap.less";
+@import "./utilities/float.less";
+@import "./utilities/font-style.less";
+@import "./utilities/font-weight.less";
+@import "./utilities/gap.less";
+@import "./utilities/justify-content.less";
+@import "./utilities/margin.less";
+@import "./utilities/max-width.less";
+@import "./utilities/order.less";
+@import "./utilities/outline-style.less";
+@import "./utilities/overflow-wrap.less";
+@import "./utilities/padding.less";
+@import "./utilities/position.less";
+@import "./utilities/rotate.less";
+@import "./utilities/screen-reader.less";
+@import "./utilities/text-align.less";
+@import "./utilities/text-decoration-line.less";
+@import "./utilities/text-overflow.less";
+@import "./utilities/text-transform.less";
+@import "./utilities/visibility.less";
+@import "./utilities/white-space.less";
 
 .clearfix {
   .clearfix();
 }
 
-.center-block {
-  .center-block();
-}
-
-.pull-right,
-.pull-xs-right {
-  .float(right) !important;
-}
-
-.pull-left,
-.pull-xs-left {
-  .float(left) !important;
-}
-
-.pull-xs-none {
-  float: none !important;
-}
-
-@media (--screen-sm) {
-  .pull-sm-left {
-    .float(left) !important;
-  }
-
-  .pull-sm-right {
-    .float(right) !important;
-  }
-
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-md) {
-  .pull-md-left {
-    .float(left) !important;
-  }
-
-  .pull-md-right {
-    .float(right) !important;
-  }
-
-  .pull-md-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-lg) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (--screen-xl) {
-  .pull-xl-left {
-    .float(left) !important;
-  }
-
-  .pull-xl-right {
-    .float(right) !important;
-  }
-
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-
-// Floats not changing direction on RTL.
-
-.pull-left-single-direction {
-  float: left !important;
-}
-
-.pull-right-single-direction {
-  float: right !important;
-}
-
-// Toggling content
-// -------------------------
-
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-
-.hide {
-  display: none !important;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
 .text-hide {
   .text-hide();
 }
 
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
-  display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-
-.affix {
-  position: fixed;
-}
-
-.rotate90 {
-  transform: rotate(90deg);
-}
-
-.rotate180 {
-  transform: rotate(180deg);
-}
-
-.rotate270 {
-  transform: rotate(270deg);
-}
-
-.rotate-90 {
-  transform: rotate(-90deg);
+.center-block {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
 }

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));

package/src/less/addons/_display-utilities.less

@@ -1,159 +0,0 @@
-.d-block {
-  display: block !important;
-}
-
-.d-inline-block {
-  display: inline-block !important;
-}
-
-.visible-xs,
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block,
-.visible-xl,
-.visible-xl-block,
-.visible-xl-inline,
-.visible-xl-inline-block {
-  display: none !important;
-}
-
-.visible-xs,
-.visible-xs-block {
-  @media (--screen-xs-max) {
-    display: block !important;
-  }
-}
-
-.visible-xs-inline {
-  @media (--screen-xs-max) {
-    display: inline !important;
-  }
-}
-
-.visible-xs-inline-block {
-  @media (--screen-xs-max) {
-    display: inline-block !important;
-  }
-}
-
-.visible-sm,
-.visible-sm-block {
-  @media (--screen-sm) and (--screen-sm-max) {
-    display: block !important;
-  }
-}
-
-.visible-sm-inline {
-  @media (--screen-sm) and (--screen-sm-max) {
-    display: inline !important;
-  }
-}
-
-.visible-sm-inline-block {
-  @media (--screen-sm) and (--screen-sm-max) {
-    display: inline-block !important;
-  }
-}
-
-.visible-md,
-.visible-md-block {
-  @media (--screen-md) and (--screen-md-max) {
-    display: block !important;
-  }
-}
-
-.visible-md-inline {
-  @media (--screen-md) and (--screen-md-max) {
-    display: inline !important;
-  }
-}
-
-.visible-md-inline-block {
-  @media (--screen-md) and (--screen-md-max) {
-    display: inline-block !important;
-  }
-}
-
-.visible-lg,
-.visible-lg-block {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: block !important;
-  }
-}
-
-.visible-lg-inline {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: inline !important;
-  }
-}
-
-.visible-lg-inline-block {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: inline-block !important;
-  }
-}
-
-.visible-xl,
-.visible-xl-block {
-  @media (--screen-xl) {
-    display: block !important;
-  }
-}
-
-.visible-xl-inline {
-  @media (--screen-xl) {
-    display: inline !important;
-  }
-}
-
-.visible-xl-inline-block {
-  @media (--screen-xl) {
-    display: inline-block !important;
-  }
-}
-
-.hidden-xs {
-  @media (--screen-xs-max) {
-    display: none !important;
-  }
-}
-
-.hidden-sm {
-  @media (--screen-sm) and (--screen-sm-max) {
-    display: none !important;
-  }
-}
-
-.hidden-md {
-  @media (--screen-md) and (--screen-md-max) {
-    display: none !important;
-  }
-}
-
-.hidden-lg {
-  @media (--screen-lg) and (--screen-lg-max) {
-    display: none !important;
-  }
-}
-
-.hidden-xl {
-  @media (--screen-xl) {
-    display: none !important;
-  }
-}
-
-.outline-none {
-  outline: none;
-}

package/src/less/addons/_utilities.less

@@ -1,147 +0,0 @@
-@import (reference)
-  "../../variables/legacy-variables.less";
-@import (reference) "../mixins/_clearfix.less";
-@import (reference) "../mixins/_center-block.less";
-@import (reference) "../mixins/_hide-text.less";
-
-//
-// Utility classes
-// --------------------------------------------------
-
-// Floats
-// -------------------------
-
-.clearfix {
-  .clearfix();
-}
-
-.center-block {
-  .center-block();
-}
-
-.pull-right,
-.pull-xs-right {
-  .float(right) !important;
-}
-
-.pull-left,
-.pull-xs-left {
-  .float(left) !important;
-}
-
-.pull-xs-none {
-  float: none !important;
-}
-
-@media (min-width: @screen-sm-min) {
-  .pull-sm-left {
-    .float(left) !important;
-  }
-
-  .pull-sm-right {
-    .float(right) !important;
-  }
-
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-md-min) {
-  .pull-md-left {
-    .float(left) !important;
-  }
-
-  .pull-md-right {
-    .float(right) !important;
-  }
-
-  .pull-md-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-lg-min) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-xl-min) {
-  .pull-xl-left {
-    .float(left) !important;
-  }
-
-  .pull-xl-right {
-    .float(right) !important;
-  }
-
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-
-// Toggling content
-// -------------------------
-
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-.hide {
-  display: none !important;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  .text-hide();
-}
-
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
-  display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-
-.affix {
-  position: fixed;
-}
-
-.rotate90 {
-  transform: rotate(90deg);
-}
-
-.rotate180 {
-  transform: rotate(180deg);
-}
-
-.rotate270 {
-  transform: rotate(270deg);
-}
-
-.rotate-90 {
-  transform: rotate(-90deg);
-}
-
-// Cursor
-
-.clickable {
-  cursor: pointer !important;
-}

package/src/less/mixins/_center-block.less

@@ -1,7 +0,0 @@
-// Center-align a block level element
-
-.center-block() {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}

package/src/less/mixins/_flex.less

@@ -1,105 +0,0 @@
-.flex-properties(@break-point) {
-  .d-flex@{break-point} {
-    display: flex;
-  }
-
-  .d-inline-flex@{break-point} {
-    display: inline-flex;
-  }
-
-  .flex-column@{break-point} {
-    flex-direction: column;
-  }
-
-  .flex-row@{break-point} {
-    flex-direction: row;
-  }
-
-  .justify-content-start@{break-point} {
-    justify-content: flex-start;
-  }
-
-  .justify-content-end@{break-point} {
-    justify-content: flex-end;
-  }
-
-  .justify-content-center@{break-point} {
-    justify-content: center;
-  }
-
-  .justify-content-between@{break-point} {
-    justify-content: space-between;
-  }
-
-  .justify-content-around@{break-point} {
-    justify-content: space-around;
-  }
-
-  .align-items-start@{break-point} {
-    align-items: flex-start;
-  }
-
-  .align-items-end@{break-point} {
-    align-items: flex-end;
-  }
-
-  .align-items-center@{break-point} {
-    align-items: center;
-  }
-
-  .align-items-baseline@{break-point} {
-    align-items: baseline;
-  }
-
-  .align-items-stretch@{break-point} {
-    align-items: stretch;
-  }
-
-  .align-self-start@{break-point} {
-    align-self: flex-start;
-  }
-
-  .align-self-end@{break-point} {
-    align-self: flex-end;
-  }
-
-  .align-self-center@{break-point} {
-    align-self: center;
-  }
-
-  .align-self-baseline@{break-point} {
-    align-self: baseline;
-  }
-
-  .align-self-stretch@{break-point} {
-    align-self: stretch;
-  }
-
-  .flex-nowrap@{break-point} {
-    flex-wrap: nowrap;
-  }
-
-  .flex-wrap@{break-point} {
-    flex-wrap: wrap;
-  }
-
-  .order-0@{break-point} {
-    order: 0;
-  }
-
-  .order-1@{break-point} {
-    order: 1;
-  }
-
-  .order-2@{break-point} {
-    order: 2;
-  }
-
-  .order-3@{break-point} {
-    order: 3;
-  }
-
-  .flex-grow-1@{break-point} {
-    flex-grow: 1;
-  }
-}