@simplybusiness/theme-core 7.0.2

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@simplybusiness/theme-core",
+  "version": "7.0.2",
+  "main": "dist/index.css",
+  "simplyBusiness": {
+    "publishToPublicNpm": true
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "yarn run -T turbo run turbo:build",
+    "prepack": "yarn run build",
+    "turbo:build": "yarn webpack --mode production"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "sideEffects": [
+    "dist/**/*.css"
+  ],
+  "exports": {
+    ".": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css",
+    "./src/*": "./src/*",
+    "./fonts": "./dist/fonts.css"
+  },
+  "dependencies": {
+    "@simplybusiness/mobius": "^5.0.1"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.40",
+    "postcss-discard-comments": "^7.0.2",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^6.2.0",
+    "postcss-preset-env": "^9.6.0",
+    "postcss-url": "^10.1.3",
+    "resolve-url-loader": "^5.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/src/fonts.css

@@ -0,0 +1,19 @@
+/*-------------------------------------------------------------------*\
+  Museo Sans
+\*-------------------------------------------------------------------*/
+
+@font-face {
+  font-family: museosans;
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/museosans/museosans-500.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: museosans;
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/museosans/museosans-700.woff2") format("woff2");
+}

package/src/icons.css

@@ -0,0 +1,408 @@
+/* FontAwesome generated stylesheet */
+svg:not(:root).svg-inline--mobius-icon,
+svg:not(:host).svg-inline--mobius-icon {
+  overflow: visible;
+  box-sizing: content-box;
+}
+
+.svg-inline--mobius-icon {
+  display: var(--mobius-icon-display, inline-block);
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-2xs {
+  vertical-align: 0.1em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-xs {
+  vertical-align: 0em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-sm {
+  vertical-align: -0.0714285705em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-lg {
+  vertical-align: -0.2em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-xl {
+  vertical-align: -0.25em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-2xl {
+  vertical-align: -0.3125em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-pull-left {
+  margin-right: var(--mobius-icon-pull-margin, 0.3em);
+  width: auto;
+}
+
+.svg-inline--mobius-icon.mobius-icon-pull-right {
+  margin-left: var(--mobius-icon-pull-margin, 0.3em);
+  width: auto;
+}
+
+.svg-inline--mobius-icon.mobius-icon-li {
+  width: var(--mobius-icon-li-width, 2em);
+  top: 0.25em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-fw {
+  width: var(--mobius-icon-fw-width, 1.25em);
+}
+
+.mobius-icon-layers svg.svg-inline--mobius-icon {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.mobius-icon-layers-counter,
+.mobius-icon-layers-text {
+  display: inline-block;
+  position: absolute;
+  text-align: center;
+}
+
+.mobius-icon-layers {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  text-align: center;
+  vertical-align: -0.125em;
+  width: 1em;
+}
+
+.mobius-icon-layers svg.svg-inline--mobius-icon {
+  transform-origin: center center;
+}
+
+.mobius-icon-layers-text {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center center;
+}
+
+.mobius-icon-layers-counter {
+  background-color: var(--mobius-icon-counter-background-color, #ff253a);
+  border-radius: var(--mobius-icon-counter-border-radius, 1em);
+  box-sizing: border-box;
+  color: var(--mobius-icon-inverse, #fff);
+  line-height: var(--mobius-icon-counter-line-height, 1);
+  max-width: var(--mobius-icon-counter-max-width, 5em);
+  min-width: var(--mobius-icon-counter-min-width, 1.5em);
+  overflow: hidden;
+  padding: var(--mobius-icon-counter-padding, 0.25em 0.5em);
+  right: var(--mobius-icon-right, 0);
+  text-overflow: ellipsis;
+  top: var(--mobius-icon-top, 0);
+  transform: scale(var(--mobius-icon-counter-scale, 0.25));
+  transform-origin: top right;
+}
+
+.mobius-icon-layers-bottom-right {
+  bottom: var(--mobius-icon-bottom, 0);
+  right: var(--mobius-icon-right, 0);
+  top: auto;
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: bottom right;
+}
+
+.mobius-icon-layers-bottom-left {
+  bottom: var(--mobius-icon-bottom, 0);
+  left: var(--mobius-icon-left, 0);
+  right: auto;
+  top: auto;
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: bottom left;
+}
+
+.mobius-icon-layers-top-right {
+  top: var(--mobius-icon-top, 0);
+  right: var(--mobius-icon-right, 0);
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: top right;
+}
+
+.mobius-icon-layers-top-left {
+  left: var(--mobius-icon-left, 0);
+  right: auto;
+  top: var(--mobius-icon-top, 0);
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: top left;
+}
+
+.mobius-icon-1x {
+  font-size: 1em;
+}
+
+.mobius-icon-2x {
+  font-size: 2em;
+}
+
+.mobius-icon-3x {
+  font-size: 3em;
+}
+
+.mobius-icon-4x {
+  font-size: 4em;
+}
+
+.mobius-icon-5x {
+  font-size: 5em;
+}
+
+.mobius-icon-6x {
+  font-size: 6em;
+}
+
+.mobius-icon-7x {
+  font-size: 7em;
+}
+
+.mobius-icon-8x {
+  font-size: 8em;
+}
+
+.mobius-icon-9x {
+  font-size: 9em;
+}
+
+.mobius-icon-10x {
+  font-size: 10em;
+}
+
+.mobius-icon-2xs {
+  font-size: 0.625em;
+  line-height: 0.1em;
+  vertical-align: 0.225em;
+}
+
+.mobius-icon-xs {
+  font-size: 0.75em;
+  line-height: 0.0833333337em;
+  vertical-align: 0.125em;
+}
+
+.mobius-icon-sm {
+  font-size: 0.875em;
+  line-height: 0.0714285718em;
+  vertical-align: 0.0535714295em;
+}
+
+.mobius-icon-lg {
+  font-size: 1.25em;
+  line-height: 0.05em;
+  vertical-align: -0.075em;
+}
+
+.mobius-icon-xl {
+  font-size: 1.5em;
+  line-height: 0.0416666682em;
+  vertical-align: -0.125em;
+}
+
+.mobius-icon-2xl {
+  font-size: 2em;
+  line-height: 0.03125em;
+  vertical-align: -0.1875em;
+}
+
+.mobius-icon-fw {
+  text-align: center;
+  width: 1.25em;
+}
+
+.mobius-icon-ul {
+  list-style-type: none;
+  margin-left: var(--mobius-icon-li-margin, 2.5em);
+  padding-left: 0;
+}
+
+.mobius-icon-ul > li {
+  position: relative;
+}
+
+.mobius-icon-li {
+  left: calc(var(--mobius-icon-li-width, 2em) * -1);
+  position: absolute;
+  text-align: center;
+  width: var(--mobius-icon-li-width, 2em);
+  line-height: inherit;
+}
+
+.mobius-icon-border {
+  border-color: var(--mobius-icon-border-color, #eee);
+  border-radius: var(--mobius-icon-border-radius, 0.1em);
+  border-style: var(--mobius-icon-border-style, solid);
+  border-width: var(--mobius-icon-border-width, 0.08em);
+  padding: var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);
+}
+
+.mobius-icon-pull-left {
+  float: left;
+  margin-right: var(--mobius-icon-pull-margin, 0.3em);
+}
+
+.mobius-icon-pull-right {
+  float: right;
+  margin-left: var(--mobius-icon-pull-margin, 0.3em);
+}
+
+.mobius-icon-spin {
+  animation-name: mobius-icon-spin;
+  animation-delay: var(--mobius-icon-animation-delay, 0s);
+  animation-direction: var(--mobius-icon-animation-direction, normal);
+  animation-duration: var(--mobius-icon-animation-duration, 2s);
+  animation-iteration-count: var(
+    --mobius-icon-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(--mobius-icon-animation-timing, linear);
+}
+
+.mobius-icon-spin-reverse {
+  --mobius-icon-animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobius-icon-spin {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+@keyframes mobius-icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.mobius-icon-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.mobius-icon-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.mobius-icon-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.mobius-icon-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.mobius-icon-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.mobius-icon-flip-both,
+.mobius-icon-flip-horizontal.mobius-icon-flip-vertical {
+  transform: scale(-1, -1);
+}
+
+.mobius-icon-rotate-by {
+  transform: rotate(var(--mobius-icon-rotate-angle, none));
+}
+
+.mobius-icon-stack {
+  display: inline-block;
+  vertical-align: middle;
+  height: 2em;
+  position: relative;
+  width: 2.5em;
+}
+
+.mobius-icon-stack-1x,
+.mobius-icon-stack-2x {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: var(--mobius-icon-stack-z-index, auto);
+}
+
+.svg-inline--mobius-icon.mobius-icon-stack-1x {
+  height: 1em;
+  width: 1.25em;
+}
+
+.svg-inline--mobius-icon.mobius-icon-stack-2x {
+  height: 2em;
+  width: 2.5em;
+}
+
+.mobius-icon-inverse {
+  color: var(--mobius-icon-inverse, #fff);
+}
+
+.sr-only,
+.mobius-icon-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:not(:focus),
+.mobius-icon-sr-only-focusable:not(:focus) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.svg-inline--mobius-icon .mobius-icon-primary {
+  fill: var(--mobius-icon-primary-color, currentColor);
+  opacity: var(--mobius-icon-primary-opacity, 1);
+}
+
+.svg-inline--mobius-icon .mobius-icon-secondary {
+  fill: var(--mobius-icon-secondary-color, currentColor);
+  opacity: var(--mobius-icon-secondary-opacity, 0.4);
+}
+
+.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {
+  opacity: var(--mobius-icon-secondary-opacity, 0.4);
+}
+
+.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary {
+  opacity: var(--mobius-icon-primary-opacity, 1);
+}
+
+.svg-inline--mobius-icon mask .mobius-icon-primary,
+.svg-inline--mobius-icon mask .mobius-icon-secondary {
+  fill: black;
+}
+
+.fad.mobius-icon-inverse,
+.mobius-icon-duotone.mobius-icon-inverse {
+  color: var(--mobius-icon-inverse, #fff);
+}

package/src/index.css

@@ -0,0 +1,49 @@
+@import "../../mobius/src/components/Accordion/Accordion.css";
+@import "../../mobius/src/components/Alert/Alert.css";
+@import "../../mobius/src/components/Box/Box.css";
+@import "../../mobius/src/components/Breadcrumbs/Breadcrumbs.css";
+@import "../../mobius/src/components/Button/Button.css";
+@import "../../mobius/src/components/Checkbox/Checkbox.css";
+@import "../../mobius/src/components/Checkbox/CheckboxGroup.css";
+@import "../../mobius/src/components/Container/Container.css";
+@import "../../mobius/src/components/Divider/Divider.css";
+@import "../../mobius/src/components/Drawer/Drawer.css";
+@import "../../mobius/src/components/DropdownMenu/DropdownMenu.css";
+@import "../../mobius/src/components/ErrorMessage/ErrorMessage.css";
+@import "../../mobius/src/components/Fieldset/Fieldset.css";
+@import "../../mobius/src/components/Flex/Flex.css";
+@import "../../mobius/src/components/Icon/Icon.css";
+@import "../../mobius/src/components/Label/Label.css";
+@import "../../mobius/src/components/Link/Link.css";
+@import "../../mobius/src/components/List/List.css";
+@import "../../mobius/src/components/LoadingIndicator/LoadingIndicator.css";
+@import "../../mobius/src/components/Modal/Modal.css";
+@import "../../mobius/src/components/NumberField/NumberField.css";
+@import "../../mobius/src/components/PasswordField/PasswordField.css";
+@import "../../mobius/src/components/Popover/Popover.css";
+@import "../../mobius/src/components/Progress/Progress.css";
+@import "../../mobius/src/components/Radio/Radio.css";
+@import "../../mobius/src/components/Segment/Segment.css";
+@import "../../mobius/src/components/Select/Select.css";
+@import "../../mobius/src/components/Slider/Slider.css";
+@import "../../mobius/src/components/Stack/Stack.css";
+@import "../../mobius/src/components/Table/Table.css";
+@import "../../mobius/src/components/Text/Text.css";
+@import "../../mobius/src/components/TextArea/TextArea.css";
+@import "../../mobius/src/components/TextField/TextField.css";
+@import "../../mobius/src/components/Title/Title.css";
+
+@import "./icons.css"; /* Placing this at the top affects specificity */
+
+@import "./fonts.css";
+@import "./variables.css";
+
+.mobius {
+  font-family: var(--font-family);
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}

package/src/variables.css

@@ -0,0 +1,137 @@
+:root,
+:host {
+  /*** Palette ***/
+  /* Neutral */
+  --color-neutral-100: #ffffff;
+  --color-neutral-200: #f3f3f3;
+  --color-neutral-300: #d1d1d2;
+  --color-neutral-500: #5d5d60;
+  --color-neutral-700: #18181d;
+
+  /* Azure */
+  --color-azure-200: #f6f5fd;
+  --color-azure-300: #dad6f7;
+  --color-azure-400: #9084e8;
+  --color-azure-500: #4632d8;
+  --color-azure-600: #2a1e81;
+  --color-azure-700: #0e0a2b;
+
+  /* Cyan */
+  --color-cyan-500: #00d4ff;
+
+  /* Bubblegum */
+  --color-bubblegum-500: #e943c9;
+
+  /* Green */
+  --color-green-300: #e6f3ed;
+  --color-green-500: #008744;
+  --color-green-600: #006633;
+
+  /* Yellow */
+  --color-yellow-300: #fff9e6;
+  --color-yellow-500: #ffba00;
+
+  /* Red */
+  --color-red-300: #f8e7e7;
+  --color-red-500: #b90909;
+
+  /* Blue */
+  --color-blue-300: #e8f1f7;
+  --color-blue-500: #176fae;
+
+  /*** Semantic colours ***/
+  /* Primary */
+  --color-primary-light: var(--color-azure-400);
+  --color-primary: var(--color-azure-500);
+  --color-primary-hover: var(--color-azure-600);
+
+  /* Secondary */
+  --color-secondary: var(--color-azure-500);
+  --color-secondary-hover: var(--color-azure-600);
+
+  /* Focus */
+  --color-focus: var(--color-bubblegum-500);
+  --color-accent: var(--color-bubblegum-500);
+
+  /* Text */
+  --color-text: var(--color-neutral-700);
+  --color-text-medium: var(--color-neutral-500);
+  --color-text-light: var(--color-neutral-300);
+  --color-text-inverted: var(--color-neutral-100);
+
+  /* Background */
+  --color-background: var(--color-neutral-100);
+  --color-background-light: var(--color-neutral-200);
+  --color-background-medium: var(--color-neutral-500);
+  --color-background-highlight: var(--color-azure-200);
+  --color-background-input: var(--color-neutral-100);
+  --color-background-input-active: var(--color-background-highlight);
+  --color-background-body: transparent;
+
+  /* Border */
+  --color-border: var(--color-neutral-300);
+  --color-border-medium: var(--color-neutral-300);
+  --color-border-light: var(--color-neutral-200);
+
+  /* Info */
+  --color-info: var(--color-blue-500);
+  --color-info-background: var(--color-blue-300);
+
+  /* Warning */
+  --color-warning: var(--color-yellow-500);
+  --color-warning-background: var(--color-yellow-300);
+
+  /* Valid */
+  --color-valid: var(--color-green-500);
+  --color-valid-hover: var(--color-green-600);
+  --color-valid-background: var(--color-green-300);
+
+  /* Error */
+  --color-error: var(--color-red-500);
+  --color-error-background: var(--color-red-300);
+
+  /* Fonts */
+  --font-family: museosans, Arial, sans-serif;
+  --font-family-heading: museosans, Arial, sans-serif;
+  --font-size-0: 10px;
+  --font-size-1: 12px;
+  --font-size-2: 14px;
+  --font-size-3: 16px;
+  --font-size-4: 20px;
+  --font-size-5: 24px;
+  --font-size-6: 32px;
+  --font-weight-normal: 500;
+  --font-weight-bold: 700;
+  --line-height-normal: 1.5;
+  --line-height-tight: 1.333;
+
+  /* Custom font sizes */
+  --font-size-small-print: var(--font-size-1);
+  --font-size-small-paragraph: var(--font-size-2);
+  --font-size-regular: var(--font-size-3);
+  --font-size-lead: var(--font-size-4);
+  --font-size-small-title: var(--font-size-5);
+  --font-size-title: var(--font-size-6);
+
+  /* Sizing */
+  --size-xxs: 4px;
+  --size-xs: 8px;
+  --size-sm: 16px;
+  --size-md: 24px;
+  --size-lg: 32px;
+  --size-xl: 40px;
+  --size-xxl: 48px;
+
+  --size-container: 1200px;
+  --size-inner-container: 1004px;
+  --size-focus-ring: 2px;
+  --size-border-width: 2px;
+
+  --radius-1: 4px;
+  --radius-2: 8px;
+  --transition-standard: 160ms ease-in-out;
+  --input-field-padding: 17px var(--size-sm);
+  --input-field-padding-tight: 14px var(--size-sm);
+  --border-default: var(--size-border-width) solid var(--color-primary-light);
+  --box-shadow-default: 0 0 0 var(--size-focus-ring) var(--color-focus);
+}