From 18d70c953d19abbfb0b2f0a419191aa6ebdafd40 Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Fri, 29 Oct 2021 16:27:51 -0500 Subject: [PATCH] update(scss): add initial helpers/mixins/etc. --- packages/scss/README.md | 11 +++ packages/scss/__overrides.scss | 1 + packages/scss/_config.scss | 6 ++ packages/scss/components/index.scss | 2 + packages/scss/core/_theme.scss | 1 + packages/scss/core/_typography.scss | 1 + packages/scss/core/index.scss | 2 + packages/scss/dev.scss | 2 + packages/scss/helpers/_visually-hidden.scss | 5 ++ packages/scss/helpers/index.scss | 1 + packages/scss/index.scss | 6 ++ packages/scss/resets/_box-sizing.scss | 13 ++++ packages/scss/resets/_document.scss | 5 ++ packages/scss/resets/_inert.scss | 15 ++++ packages/scss/resets/index.scss | 5 ++ packages/scss/utils/_a11y.scss | 34 +++++++++ packages/scss/utils/_env.scss | 21 ++++++ packages/scss/utils/_layout.scss | 17 +++++ packages/scss/utils/_placeholder.scss | 42 ++++++++++++ packages/scss/utils/_prefers.scss | 19 ++++++ packages/scss/utils/_pseudo.scss | 76 +++++++++++++++++++++ packages/scss/utils/_user-select.scss | 13 ++++ 22 files changed, 298 insertions(+) create mode 100644 packages/scss/__overrides.scss create mode 100644 packages/scss/_config.scss create mode 100644 packages/scss/components/index.scss create mode 100644 packages/scss/core/_theme.scss create mode 100644 packages/scss/core/_typography.scss create mode 100644 packages/scss/core/index.scss create mode 100644 packages/scss/dev.scss create mode 100644 packages/scss/helpers/_visually-hidden.scss create mode 100644 packages/scss/helpers/index.scss create mode 100644 packages/scss/index.scss create mode 100644 packages/scss/resets/_box-sizing.scss create mode 100644 packages/scss/resets/_document.scss create mode 100644 packages/scss/resets/_inert.scss create mode 100644 packages/scss/resets/index.scss create mode 100644 packages/scss/utils/_a11y.scss create mode 100644 packages/scss/utils/_env.scss create mode 100644 packages/scss/utils/_layout.scss create mode 100644 packages/scss/utils/_placeholder.scss create mode 100644 packages/scss/utils/_prefers.scss create mode 100644 packages/scss/utils/_pseudo.scss create mode 100644 packages/scss/utils/_user-select.scss diff --git a/packages/scss/README.md b/packages/scss/README.md index 7ced2a9..7c0be60 100644 --- a/packages/scss/README.md +++ b/packages/scss/README.md @@ -1,6 +1,17 @@ # @ooee/scss SCSS assets for building CSS stylesheets. +## Installation ``` npm install @ooee/scss ``` + +## Consumption + +```scss +// PRODUCTION +@use '@ooee/scss'; + +// DEVELOPMENT +@use '@ooee/scss/dev'; +``` diff --git a/packages/scss/__overrides.scss b/packages/scss/__overrides.scss new file mode 100644 index 0000000..4893366 --- /dev/null +++ b/packages/scss/__overrides.scss @@ -0,0 +1 @@ +// Try to keep this file empty of any styles! diff --git a/packages/scss/_config.scss b/packages/scss/_config.scss new file mode 100644 index 0000000..64e2212 --- /dev/null +++ b/packages/scss/_config.scss @@ -0,0 +1,6 @@ +// Module Usage: +// +// @use '@ooee/scss/config' with ($env: DEV); +// @use '@ooee/scss'; + +$env: PROD !default; diff --git a/packages/scss/components/index.scss b/packages/scss/components/index.scss new file mode 100644 index 0000000..0f5bb35 --- /dev/null +++ b/packages/scss/components/index.scss @@ -0,0 +1,2 @@ +/// TBD... +//@use 'compnent-name'; diff --git a/packages/scss/core/_theme.scss b/packages/scss/core/_theme.scss new file mode 100644 index 0000000..b084c7b --- /dev/null +++ b/packages/scss/core/_theme.scss @@ -0,0 +1 @@ +// TBD... diff --git a/packages/scss/core/_typography.scss b/packages/scss/core/_typography.scss new file mode 100644 index 0000000..b084c7b --- /dev/null +++ b/packages/scss/core/_typography.scss @@ -0,0 +1 @@ +// TBD... diff --git a/packages/scss/core/index.scss b/packages/scss/core/index.scss new file mode 100644 index 0000000..17a3ab8 --- /dev/null +++ b/packages/scss/core/index.scss @@ -0,0 +1,2 @@ +@use 'theme'; +@use 'typography'; diff --git a/packages/scss/dev.scss b/packages/scss/dev.scss new file mode 100644 index 0000000..974eaaa --- /dev/null +++ b/packages/scss/dev.scss @@ -0,0 +1,2 @@ +@use 'config' with ($env: DEV); +@use 'index'; diff --git a/packages/scss/helpers/_visually-hidden.scss b/packages/scss/helpers/_visually-hidden.scss new file mode 100644 index 0000000..b91864c --- /dev/null +++ b/packages/scss/helpers/_visually-hidden.scss @@ -0,0 +1,5 @@ +@use '../utils/a11y' as A11y + +.ui--visuallyHidden { + @include A11y.visuallyHidden; +} diff --git a/packages/scss/helpers/index.scss b/packages/scss/helpers/index.scss new file mode 100644 index 0000000..c3ac8a9 --- /dev/null +++ b/packages/scss/helpers/index.scss @@ -0,0 +1 @@ +@use 'visually-hidden'; diff --git a/packages/scss/index.scss b/packages/scss/index.scss new file mode 100644 index 0000000..1f56433 --- /dev/null +++ b/packages/scss/index.scss @@ -0,0 +1,6 @@ +@use 'resets'; +@use 'core'; +@use 'components'; +@use 'helpers'; +@use '_overrides'; // KEEP LAST! + diff --git a/packages/scss/resets/_box-sizing.scss b/packages/scss/resets/_box-sizing.scss new file mode 100644 index 0000000..75dc998 --- /dev/null +++ b/packages/scss/resets/_box-sizing.scss @@ -0,0 +1,13 @@ +// ----------------------------------------------------------------------------- +// BOX-SIZING RESET +// ----------------------------------------------------------------------------- +// See https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} diff --git a/packages/scss/resets/_document.scss b/packages/scss/resets/_document.scss new file mode 100644 index 0000000..d0d22a3 --- /dev/null +++ b/packages/scss/resets/_document.scss @@ -0,0 +1,5 @@ +html, +body { + padding: 0; + margin: 0; +} diff --git a/packages/scss/resets/_inert.scss b/packages/scss/resets/_inert.scss new file mode 100644 index 0000000..950b51e --- /dev/null +++ b/packages/scss/resets/_inert.scss @@ -0,0 +1,15 @@ +@use '../utils/user-select' as UserSelect; + +// https://github.com/WICG/inert/commit/be4b4a4f4a4c8e37e775c64b9db22b78ccf9d96a +// https://github.com/WICG/inert/blob/master/src/inert.js#L703 +// https://github.com/WICG/inert/commit/be4b4a4f4a4c8e37e775c64b9db22b78ccf9d96a#diff-04c6e90faac2675aa89e2176d2eec7d8R85 + +[inert] { + cursor: default; + pointer-events: none; +} + +[inert], +[inert] * { + @include UserSelect.set(none); +} diff --git a/packages/scss/resets/index.scss b/packages/scss/resets/index.scss new file mode 100644 index 0000000..1146d11 --- /dev/null +++ b/packages/scss/resets/index.scss @@ -0,0 +1,5 @@ +@use 'box-sizing'; +@use 'document'; + +/// OPTIONAL +//@use 'inert'; diff --git a/packages/scss/utils/_a11y.scss b/packages/scss/utils/_a11y.scss new file mode 100644 index 0000000..40cfcc6 --- /dev/null +++ b/packages/scss/utils/_a11y.scss @@ -0,0 +1,34 @@ +// @use '@ooee/scss/utils/a11y'; +// .foo { +// @include a11y.visuallyHidden; +// } +@mixin visuallyHidden { + // remove visible styles around element perimeter + border: 0 !important; + outline: none !important; + box-shadow: none !important; + + // shrink as small as possible without removing + // content from the a11y tree + width: 1px !important; + height: 1px !important; + clip: rect(1px, 1px, 1px, 1px); /* old & current Browsers */ + clip-path: inset(50%); /* browsers in the future */ + + // Prevent the screen reader to skip spaces between words + white-space: nowrap; + + // eliminate any space being taken up by the element + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + + // remove element from normal document flow + position: absolute !important; + z-index: -99999 !important; + + // render fg and bg invisible + color: transparent; + background-color: transparent; + text-shadow: none; +} diff --git a/packages/scss/utils/_env.scss b/packages/scss/utils/_env.scss new file mode 100644 index 0000000..9361ecc --- /dev/null +++ b/packages/scss/utils/_env.scss @@ -0,0 +1,21 @@ +@use "../config"; + +// Only generate content if in DEV mode +// +// @use "@ooee/scss/utils/env"; +// @include env.DEV { ... } +@mixin DEV { + @if config.$env == DEV { + @content; + } +} + +// Only generate content if in PROD mode. +// +// @use "@ooee/scss/utils/env"; +// @include env.PROD { ... } +@mixin PROD { + @if config.$env == PROD { + @content; + } +} diff --git a/packages/scss/utils/_layout.scss b/packages/scss/utils/_layout.scss new file mode 100644 index 0000000..e6edb6b --- /dev/null +++ b/packages/scss/utils/_layout.scss @@ -0,0 +1,17 @@ +// @use "@ooee/scss/utils/layout" as Layout; +// .foo { +// @include Layout.stack(8px); +// } +@mixin stack($gap: 0) { + display: flex; + flex-direction: column; + + > * { + margin-top: 0; + margin-bottom: 0; + + & + * { + margin-top: $gap; + } + } +} diff --git a/packages/scss/utils/_placeholder.scss b/packages/scss/utils/_placeholder.scss new file mode 100644 index 0000000..a0d46a5 --- /dev/null +++ b/packages/scss/utils/_placeholder.scss @@ -0,0 +1,42 @@ +// Mixin for standard `::placeholder` pseudo-element selector +// - https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#Browser_compatibility +// - https://css-tricks.com/snippets/css/style-placeholder-text/ +// +// Example: +// @use '@ooee/scss/utils/placeholder' as Placeholder; +// input { +// @include Placeholder.apply { ... } +// } +@mixin apply { + // Firefox (< 51) + &::-moz-placeholder { @content; } + + // Edge + &::-ms-input-placeholder { @content; } + + // Chrome (< 57), Opera (< 44), Safari (< 10.1), Edge + &::-webkit-input-placeholder { @content; } + + // standards-compliant selector + &::placeholder { @content; } +} + + +// Mixin for standard `:placeholder-shown` pseudo-class +// - https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown#Browser_compatibility +// +// Example: +// @use "@ooee/scss/utils/placeholder" as Placeholder; +// input { +// @include Placeholder.applyWhenShown { ... } +// } +@mixin applyWhenShown { + // Firefox (< 51) uses non-standard, prefixed selector + &:-moz-placeholder { @content; } + + // IE10+ uses non-standard, prefixed selector + &:-ms-input-placeholder { @content; } + + // standards-compliant selector + &:placeholder-shown { @content; } +} diff --git a/packages/scss/utils/_prefers.scss b/packages/scss/utils/_prefers.scss new file mode 100644 index 0000000..b77913c --- /dev/null +++ b/packages/scss/utils/_prefers.scss @@ -0,0 +1,19 @@ +// @use '@ooee/scss/utils/prefers' as Prefers; +// @include Prefers.reducedMotion { +// // apply reduced animations/transitions/motion here... +// } +@mixin reducedMotion { + @media (prefers-reduced-motion) { + @content; + } +} + +// @use '@ooee/scss/utils/prefers' as Prefers; +// @include Prefers.darkMode { +// // apply "dark" styles here... +// } +@mixin darkMode { + @media (prefers-color-scheme: dark) { + @content; + } +} diff --git a/packages/scss/utils/_pseudo.scss b/packages/scss/utils/_pseudo.scss new file mode 100644 index 0000000..9c38b65 --- /dev/null +++ b/packages/scss/utils/_pseudo.scss @@ -0,0 +1,76 @@ +@use 'env'; + +// @use "@ooee/scss/utils/pseudo" as Pseudo; +// .foo { +// @include Pseudo.hover { ... } +// } +// +------------+ +// | env.$mode | +// +--------------+------------+ +// | selector | DEV | PROD | +// +--------------+-----+------+ +// | :hover | X | X | +// +--------------+-----+------+ +// | .mock-hover | X | | +// +--------------+-----+------+ +@mixin hover { + &:hover { + @content; + } + + @include env.DEV { + &.mock-hover { + @content; + } + } +} + +// @use "@ooee/scss/utils/pseudo" as Pseudo; +// .foo { +// @include Pseudo.focus { ... } +// } +// +------------+ +// | env.$mode | +// +--------------+------------+ +// | selector | DEV | PROD | +// +--------------+-----+------+ +// | :focus | X | X | +// +--------------+-----+------+ +// | .mock-focus | X | | +// +--------------+-----+------+ +@mixin focus { + &:focus { + @content; + } + + @include env.DEV { + &.mock-focus { + @content; + } + } +} + +// @use "@ooee/scss/utils/pseudo" as Pseudo; +// .foo { +// @include Pseudo.active { ... } +// } +// +------------+ +// | env.$mode | +// +--------------+------------+ +// | selector | DEV | PROD | +// +--------------+-----+------+ +// | :active | X | X | +// +--------------+-----+------+ +// | .mock-active | X | | +// +--------------+-----+------+ +@mixin active { + &:active { + @content; + } + + @include env.DEV { + &.mock-active { + @content; + } + } +} diff --git a/packages/scss/utils/_user-select.scss b/packages/scss/utils/_user-select.scss new file mode 100644 index 0000000..ed824b8 --- /dev/null +++ b/packages/scss/utils/_user-select.scss @@ -0,0 +1,13 @@ +// See https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Browser_compatibility +// +// Example: +// @use '@ooee/scss/utils/user-select' as UserSelect; +// .foo { +// @include UserSelect.set(none); +// } +@mixin set($value) { + -webkit-user-select: $value; // Edge, Opera?, Firefox (49-68), Safari + -moz-user-select: $value; // Firefox (<49) + -ms-user-select: $value; // Edge, IE + user-select: $value; // Chromium (54+) and spec-compliant browsers +}