@oscarpalmer/atoms 0.77.2 → 0.78.0

package/dist/css/reset.css

@@ -1,316 +0,0 @@
-@charset "UTF-8";
-/*! https://github.com/oscarpalmer/atoms */
-/**
- * Reset
- * ========================
- * 
- * A reset I use for a lot of personal stuff, and elsewhere, of course.
- * It's a mix of a few different resets mixed together with some of my own ideas.
- *
- * When rules are explained, such comments will be suffixed with one ore more square brackets
- * with a two-letter code, all of which are listed below. My own code is "OP", which are my initials.
- *
- * - Andy Bell's "A (more) Modern CSS Reset" [AB]
- *   https://andy-bell.co.uk/a-more-modern-css-reset/
- *
- * - CSS Remedy [CR]
- *   https://github.com/jensimmons/cssremedy
- *
- * - RESS [RS]
- *   https://github.com/filipelinhares/ress
- *
- * - Sanitize.css [SE]
- *   https://github.com/csstools/sanitize.css
- */
-/**
- * Catch-alls
- */
-* {
-  padding: 0;
-  margin: 0;
-  background-repeat: no-repeat;
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-::before,
-::after {
-  text-decoration: inherit;
-  vertical-align: inherit;
-}
-
-/**
- * Document
- */
-:where(:root) {
-  font-family: system-ui, sans-serif;
-  font-size: 100%;
-  line-height: 1.5;
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  -webkit-tap-highlight-color: transparent;
-}
-
-:where(body) {
-  min-height: 100vh;
-  font-size: 1rem;
-}
-
-/**
- * General
- */
-:where(a) {
-  background-color: transparent;
-  text-decoration-skip-ink: auto;
-  text-underline-offset: 0.125em;
-}
-
-:where(abbr[title]) {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-:where(b, strong) {
-  font-weight: bolder;
-}
-
-:where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
-  line-height: 1.125;
-}
-
-:where(button, [type=button i], [type=reset i], [type=submit i]) {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-
-:where(button, select) {
-  text-transform: none;
-}
-
-:where(button) {
-  overflow: visible;
-}
-
-:where(code, kbd, pre, samp) {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-:where(details > summary:first-of-type) {
-  display: list-item;
-}
-
-:where(dl, ol, ul) :where(dl, ol, ul) {
-  margin: 0;
-}
-
-:where(h1, h2, h3, h4, h5, h6) {
-  text-wrap: balance;
-}
-
-:where(hr) {
-  height: 0;
-  overflow: visible;
-  border-style: solid;
-  border-width: 1px 0 0;
-  color: inherit;
-}
-
-:where(nav) :where(ol, ul),
-:where(ul[class]) {
-  list-style-type: none;
-  padding: 0;
-}
-
-:where(nav li)::before {
-  content: "​";
-  float: left;
-}
-
-:where(pre) {
-  overflow: auto;
-  white-space: pre-wrap;
-}
-
-:where(small) {
-  font-size: 0.875rem;
-}
-
-:where(sub, sup) {
-  vertical-align: baseline;
-  font-size: 0.75rem;
-  line-height: 0;
-  position: relative;
-}
-
-:where(sub) {
-  bottom: -0.25em;
-}
-
-:where(sup) {
-  top: -0.5em;
-}
-
-:where(table) {
-  border-collapse: collapse;
-  border-color: currentColor;
-  text-indent: 0;
-}
-
-/**
- * Form-related
- */
-:where(button, input, optgroup, select, textarea) {
-  font: inherit;
-}
-
-:where(button, input, select, textarea) {
-  padding: 0.25em 0.5em;
-  background-color: transparent;
-  border: 1px solid WindowFrame;
-  color: inherit;
-  letter-spacing: inherit;
-}
-
-:where(fieldset) {
-  border: 1px solid darkgrey;
-}
-
-:where(optgroup) {
-  font-weight: bold;
-}
-
-:where(progress) {
-  vertical-align: baseline;
-}
-
-:where(select) {
-  -webkit-appearance: none;
-  appearance: none;
-  padding-right: 1em;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center/1em;
-  border-radius: 0;
-}
-
-:where(select[multiple]) {
-  background-image: none;
-}
-
-select::-ms-expand {
-  display: none;
-}
-
-select::-ms-value {
-  color: currentColor;
-}
-
-:where(textarea) {
-  overflow: auto;
-  resize: vertical;
-}
-
-:where([type=color i], [type=range i]) {
-  border-width: 0;
-  padding: 0;
-}
-
-:where([type=search i]) {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  color: inherit;
-  font: inherit;
-  line-height: 1.25;
-}
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Media-related
- */
-:where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-:where(audio, canvas, embed, iframe, img, object, svg, video) {
-  display: block;
-}
-
-:where(audio) {
-  width: 100%;
-}
-
-:where(audio:not([controls])) {
-  display: none;
-}
-
-:where(canvas, img, svg, video) {
-  height: auto;
-}
-
-:where(iframe) {
-  border-style: none;
-}
-
-:where(img) {
-  border-style: none;
-}
-
-:where(picture) {
-  display: contents;
-}
-
-:where(source) {
-  display: none;
-}
-
-:where(svg) {
-  overflow: hidden;
-}
-
-:where(svg:not([fill])) {
-  fill: currentColor;
-}
-
-/**
- * Attributes
- */
-:where([disabled], [aria-disabled=true i]) {
-  cursor: default;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-:where([aria-busy=true i]) {
-  cursor: progress;
-}
-
-:where([aria-controls]) {
-  cursor: pointer;
-}

package/src/css/a11y.scss

@@ -1,16 +0,0 @@
-.visually-hidden {
-	:where(&) {
-		position: absolute !important;
-	}
-
-	:where(&:not(:active):not(:focus):not(:focus-within)) {
-		width: 1px !important;
-		height: 1px !important;
-		padding: 0 !important;
-		clip: rect(1px, 1px 1px, 1px) !important;
-		clip-path: inset(50%) !important;
-		overflow: hidden !important;
-		border: 0 !important;
-		white-space: nowrap !important;
-	}
-}

package/src/css/flex.scss

@@ -1,104 +0,0 @@
-:where(.fill) {
-	flex: 1;
-}
-
-:where(.flow, .stack) {
-	display: flex;
-}
-
-:where(.flow) {
-	flex-flow: row wrap;
-	align-items: center;
-	gap: var(--flow-gap, 1rem);
-}
-
-.flow {
-	:where(&-large) {
-		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-nowrap) {
-		flex-wrap: nowrap;
-	}
-
-	:where(&-small) {
-		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-text) {
-		gap: var(--flow-gap-text, 1em);
-	}
-}
-
-:where(.stack) {
-	flex-flow: column nowrap;
-	gap: var(--stack-gap, 1rem);
-}
-
-.stack {
-	:where(&-large) {
-		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-small) {
-		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-text) {
-		gap: var(--stack-gap-text, 1em);
-	}
-}
-
-.flex {
-	&-reverse {
-		:where(&[class^='flow' i], &[class*=' flow' i]) {
-			flex-direction: row-reverse;
-		}
-
-		:where(&[class^='stack' i], &[class*=' stack' i]) {
-			flex-direction: column-reverse;
-		}
-	}
-}
-
-$alignmentOrigins: (
-	c: 'content',
-	i: 'items',
-	s: 'self',
-);
-
-$alignmentValues: (
-	c: 'center',
-	fe: 'flex-end',
-	fs: 'flex-start',
-	s: 'stretch',
-);
-
-$justificationValues: (
-	sa: 'space-around',
-	sb: 'space-between',
-	se: 'space-evenly',
-);
-
-$types: (
-	a: 'align',
-	j: 'justify',
-);
-
-@each $typeKey, $typeValue in $types {
-	@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
-		.flex-#{$typeKey}#{$alignmentOriginKey} {
-			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
-				:where(&-#{$alignmentValueKey}) {
-					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue};
-				}
-			}
-		}
-	}
-
-	@each $justificationKey, $justificationValue in $justificationValues {
-		:where(.flex-#{$typeKey}c-#{$justificationKey}) {
-			#{$typeValue}-content: #{$justificationValue};
-		}
-	}
-}