From 09395052df11bca6b7ac0ed6fcfb9042463dd38d Mon Sep 17 00:00:00 2001 From: Khaled Mohamed Date: Sat, 2 Nov 2024 14:43:16 +0200 Subject: [PATCH 1/2] feat(mixins-general): :sparkles: add `reset-zone` package & use it into `reset` mixin --- package.json | 1 + src/mixins/general/_reset.scss | 526 ++------------------------------- 2 files changed, 33 insertions(+), 494 deletions(-) diff --git a/package.json b/package.json index 8e6d3836..d028f05a 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "test": "concurrently --prefix-colors=\"blue,red\" \"npm run test:jest\" \"npm run test:scss\"" }, "dependencies": { + "reset-zone": "^2.0.0", "sass": "^1.79.5" }, "devDependencies": { diff --git a/src/mixins/general/_reset.scss b/src/mixins/general/_reset.scss index ab545bf5..7144d681 100644 --- a/src/mixins/general/_reset.scss +++ b/src/mixins/general/_reset.scss @@ -19,507 +19,45 @@ // @module general/reset // @dependencies: -// * - LibMixin1.prefixing-web (mixin). -// * - LibMixin2.shape-margin (mixin). -// * - LibMixin3.banner (mixin). -// * - LibMixin4.mq-gen (mixin). -// * - LibMixin5.flex-between-center (mixin). +// * - meta.type-of (SASS function). +// * - LibMixin1.banner (mixin). +// * - Error.throw (function). +// * - ResetZone1.reset-zone-regular (external mixin). +// * - ResetZone2.reset-zone-layer (external mixin). // @example 1 // * In the top of the SCSS file, you can write like this: -// * @import "your-path-to-node_modules/sass-pire/src/mixins/general/_reset.scss"; -// * @include reset; - -// @example 2 -// * In the top of the SCSS file, you can also write like this: -// * @layer reset, .., your-all-components, ..etc; -// * @layer rest { -// * @import "your-path-to-node_modules/sass-pire/src/mixins/general/_reset.scss"; -// * @include reset; -// * } - -// @example 3 -// * You can use it whatever you want. - -@use "../../mixins/vendor-prefixes/prefix" as LibMixin1; -@use "../../mixins/general/shape-margin" as LibMixin2; -@use "../../mixins/general/banner" as LibMixin3; -@use "../../mixins/media-queries/screens/media-query" as LibMixin4; -@use "../../mixins/flex-props/flexbox/between" as LibMixin5; +// * +// * @use "your-path-to-node_modules/sass-pire/src/mixins/general/_reset.scss" as Lib; +// * +// * @include Lib.reset; +// * +// * Or you can write like this: +// * +// * @include Lib.reset(regular); +// * +// * This is a regular version of `reset` mixin: +// * +// * @include Lib.reset(layer); + +@use "sass:meta"; +@use "../../mixins/general/banner" as LibMixin1; +@use "../../development-utils/toggle-error-message" as Error; +@use "../../../node_modules/reset-zone/src/reset-zone.regular.scss" as ResetZone1; +@use "../../../node_modules/reset-zone/src/reset-zone.layer.scss" as ResetZone2; // * stylelint-disable-next-line at-rule-empty-line-before -@mixin reset() { - @include LibMixin3.banner; - - // * Box sizing rules. - *, - *::before, - *::after { - margin: 0; - padding: 0; - - $box-sizing-props: ( - -moz-box-sizing: border-box, - -webkit-box-sizing: border-box, - box-sizing: border-box) !default; - - @each $prop, $value in $box-sizing-props { - #{$prop}: $value; - } - } - - // * Set core root defaults - html, - html:focus-within { - @media (prefers-reduced-motion: no-preference) { - scroll-behavior: smooth; - } - - @media (prefers-reduced-motion: reduce) { - scroll-behavior: auto; - } - } - - // * Set core body defaults - body { - --sp-body-min-height: 100dvh; - - min-block-size: var(--sp-body-min-height); - min-height: var(--sp-body-min-height); - line-height: 1.5; - - // * This is for improve text rendering in the browsers - -webkit-font-smoothing: antialiased; - - // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector - :where(&) { - overflow-wrap: break-word; - - $hyphens-props: ( - -webkit-hyphens, - -ms-hyphens, - hyphens) !default; - - @each $prop in $hyphens-props { - #{$prop}: auto; - } - } - } - - // * Remove default margin - body, - h1, - h2, - h3, - h4, - p, - figure, - blockquote, - dl, - dd { - margin: 0; - } - - // * Avoid text overflows - p, - h1, - h2, - h3, - h4, - h5, - h6 { - overflow-wrap: break-word; - } - - // * Remove list styles on ul, ol elements with a list role which suggests - // * default styling will be removed - ul[role="list"], - menu[role="list"], - ol[role="list"] { - list-style: none; - } - - main, - header, - footer, - section, - article, - aside, - nav, - menu, - details, - summary, - figcaption, - figure, - hgroup, - img, - picture, - video, - canvas, - svg { - display: block; - } - - sup, - sub { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; - } - - sup { - top: -0.5em; - } - - sub { - bottom: -0.25em; - } - - // * Set default styles for menu tag - menu { - $main-unicode-bidi-props-values: ( - -webkit-isolate, - -moz-isolate, - isolate) !default; - - @each $value in $main-unicode-bidi-props-values { - unicode-bidi: $value; - } - } - - // * A elements that don't have a class get default styles - a:not([class]) { - $text-decoration-ink-props: ( - -webkit-text-decoration-skip, - text-decoration-skip-ink) !default; - - // stylelint-disable-next-line scss/dollar-variable-empty-line-before - $text-decoration-line-props: ( - -webkit-text-decoration-line, - text-decoration-line) !default; - - @each $prop in $text-decoration-ink-props { - #{$prop}: auto; - } - - @each $prop in $text-decoration-line-props { - #{$prop}: underline; - } - - text-decoration-thickness: max(0.08em, 1px - ); - text-underline-offset: 0.15em; - } - - // * Make images easier to work with - img, - picture, - video, - canvas, - svg { - --sp-asset-max-width: 100%; - --sp-asset-height: auto; - - max-inline-size: var(--sp-asset-max-width); - max-width: var(--sp-asset-max-width); - block-size: var(--sp-asset-height); - height: var(--sp-asset-height); - font-style: italic; - background-repeat: no-repeat; - background-size: cover; - - @include LibMixin2.shape-margin(1rem); - } - - figcaption { - font-style: italic; - } - - // * Inherit fonts for inputs and buttons - input, - button, - textarea, - select { - font: inherit; - } - - // * Reset styles of blockquote and q tag - blockquote, - q { - quotes: none; - - &::before, - &::after { - content: none; - } - } - - // * Removes spacing between cells in tables - table { - border-collapse: collapse; - border-spacing: 0; - } - - @supports selector(:is) { - body> :is(header, footer), - main, - section, - article { - container-type: inline-size; - } - } - - @supports not selector(:is) { - body>header, - body>footer, - main, - section, - article { - container-type: inline-size; - } - } - - @supports selector(:where) { - :where([hidden]) { - display: none; - } - } - - @supports not selector(:where) { - [hidden] { - display: none; - } - } - - @supports selector(:focus-visible) { - :focus-visible { - // stylelint-disable-next-line value-keyword-case - outline: max(1px, 0.15em) solid currentColor; - outline-offset: max(1px, 0.15em); - } - } - - @supports not selector(:focus-visible) { - :focus { - // stylelint-disable-next-line value-keyword-case - outline: max(1px, 0.15em) solid currentColor; - outline-offset: max(1px, 0.15em); - } - } - - // * Scroll margin allowance above anchor links - :target { - scroll-padding-block-start: 2rem; - } - - // * Scroll margin allowance below focused elements to ensure they are clearly in view - :focus { - scroll-padding-block-end: 8vh; - } - - // * Remove all animations, transitions and smooth scroll for - // * people that prefer not to see them - @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - @include LibMixin1.prefixing-web(animation-duration, 0.01ms); - @include LibMixin1.prefixing-web(animation-iteration-count, 1); - @include LibMixin1.prefixing-web-o(transition-duration, 0.01ms); - - scroll-behavior: auto; - } - } - - dialog { - --sp-dialog-max-width: 90%; - --sp-dialog-max-height: 85dvh; - --sp-dialog-padding-x: 1rem; - --sp-dialog-padding-y: 1.25rem; - --sp-dialog-border: 1px solid hsl(0deg 0% 91.81%); - --sp-dialog-scrollbar-bg: transparent; - --sp-dialog-scrollbar-width: none; - - max-width: var(--sp-dialog-max-width); - max-inline-size: var(--sp-dialog-max-width); - max-height: var(--sp-dialog-max-height); - max-block-size: var(--sp-dialog-max-height); - margin: auto; - padding: 0; - border: var(--sp-dialog-border); - border-radius: 0.5rem; - overscroll-behavior: contain; - scroll-behavior: smooth; - - // Hide scrollbar for Firefox - scrollbar-width: var(--sp-dialog-scrollbar-width); +@mixin reset($mode: regular) { + @include LibMixin1.banner; - // Hide scrollbar for IE and Edge - -ms-overflow-style: var(--sp-dialog-scrollbar-width); - scrollbar-color: var(--sp-dialog-scrollbar-bg) var(--sp-dialog-scrollbar-bg); - animation: sp-bottom-to-top 0.25s ease-in-out forwards; - - @include LibMixin4.mq-gen(min, w, sm) { - --sp-dialog-max-width: 45rem; - } - - &::-webkit-scrollbar { - --sp-dialog-scrollbar-width: 0; - - width: var(--sp-dialog-scrollbar-width); - inline-size: var(--sp-dialog-scrollbar-width); - display: none; - } - - &::-webkit-scrollbar-track { - background-color: var(--sp-dialog-scrollbar-bg); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--sp-dialog-scrollbar-bg); - } - - &::backdrop { - background-color: hsl(0deg 0% 0%); - opacity: 0.5; - } - - .dialog-header { - padding-top: var(--sp-dialog-padding-y); - padding-bottom: var(--sp-dialog-padding-y); - padding-block: var(--sp-dialog-padding-y); - padding-right: var(--sp-dialog-padding-x); - // stylelint-disable-next-line declaration-block-no-redundant-longhand-properties - padding-left: var(--sp-dialog-padding-x); - padding-inline: var(--sp-dialog-padding-x); - border-bottom: var(--sp-dialog-border); - position: sticky; - top: 0; - - @include LibMixin5.flex-between-center; - - background-color: hsl(0deg 0% 100%); - - .dialog-close { - --sp-dialog-close-size: 1.5rem; - - width: var(--sp-dialog-close-size); - inline-size: var(--sp-dialog-close-size); - height: var(--sp-dialog-close-size); - block-size: var(--sp-dialog-close-size); - border: none; - border-radius: 5px; - outline: 1px solid transparent; - font-size: var(--sp-dialog-close-size); - line-height: var(--sp-dialog-close-size); - background-image: url('data:image/svg+xml,'); - background-position: center; - background-repeat: no-repeat; - background-color: hsl(0deg 0% 91.81%); - cursor: pointer; - } - } - - .dialog-content { - --sp-dialog-padding-x: 1rem; - --sp-dialog-padding-y: 1rem; - - padding-top: var(--sp-dialog-padding-y); - padding-bottom: var(--sp-dialog-padding-y); - padding-block: var(--sp-dialog-padding-y); - padding-right: var(--sp-dialog-padding-x); - // stylelint-disable-next-line declaration-block-no-redundant-longhand-properties - padding-left: var(--sp-dialog-padding-x); - padding-inline: var(--sp-dialog-padding-x); - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - - &::-webkit-scrollbar { - width: 0; - } - - &::-webkit-scrollbar-track { - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: transparent; - } - } - - .dialog-footer { - --sp-dialog-padding-x: 1rem; - - padding-top: var(--sp-dialog-padding-y); - padding-bottom: var(--sp-dialog-padding-y); - padding-block: var(--sp-dialog-padding-y); - padding-right: var(--sp-dialog-padding-x); - // stylelint-disable-next-line declaration-block-no-redundant-longhand-properties - padding-left: var(--sp-dialog-padding-x); - padding-inline: var(--sp-dialog-padding-x); - border-top: var(--sp-dialog-border); - position: sticky; - bottom: 0; - background-color: hsl(0deg 0% 100%); - } - } - - @keyframes sp-bottom-to-top { - 0% { - opacity: 0; - transform: translateY(10%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } - } - - @media print { - @page { - margin: 1.875rem; // 30px + @if meta.type-of($value: $mode) != string { + content: Error.throw("The parameter of reset mixin must be in a string type."); + } @else { + @if $mode == regular { + @include ResetZone1.reset-zone-regular; + } @else if $mode == layer { + @include ResetZone2.reset-zone-layer; } - - a[href^="http"]::after { - content: " (" attr(href) ")"; - } - } - - /* This is for accessibility purposes */ - .sr-only { - --sp-sr-only-width: 1px; - --sp-sr-only-height: 1px; - - inline-size: var(--sp-sr-only-width); - width: var(--sp-sr-only-width); - block-size: var(--sp-sr-only-height); - height: var(--sp-sr-only-height); - border: 0; - margin: -1px; - padding: 0; - position: absolute; - clip: rect(0, 0, 0, 0); - overflow: hidden; - white-space: nowrap; - } - - /* This is for accessibility purposes */ - .not-sr-only { - --sp-not-sr-only-width: auto; - --sp-not-sr-only-height: auto; - - inline-size: var(--sp-not-sr-only-width); - width: var(--sp-not-sr-only-width); - block-size: var(--sp-not-sr-only-height); - height: var(--sp-not-sr-only-height); - position: static; - padding: 0; - margin: 0; - overflow: visible; - clip: auto; - white-space: normal; } } From 4754b77f83965230bf50040db0f77cff356ad306 Mon Sep 17 00:00:00 2001 From: Khaled Mohamed Date: Sat, 2 Nov 2024 14:45:41 +0200 Subject: [PATCH 2/2] chore(new-version): :bookmark: update version from `2.3.1` to `3.0.0` --- package.json | 2 +- src/abstract/_settings.scss | 2 +- src/sass-pire.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d028f05a..70ea3c3c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sass-pire", "aliasName": "sp", - "version": "2.3.1", + "version": "3.0.0", "description": "Just a more mixins and functions with SCSS for more productive projects.", "markdown": "github", "license": "MIT", diff --git a/src/abstract/_settings.scss b/src/abstract/_settings.scss index 7161e52e..62b79eb8 100644 --- a/src/abstract/_settings.scss +++ b/src/abstract/_settings.scss @@ -31,4 +31,4 @@ $author-names: ("Khaled Mohamed"); $current-year: 2024; -$current-version: "v2.3.1"; \ No newline at end of file +$current-version: "v3.0.0"; \ No newline at end of file diff --git a/src/sass-pire.scss b/src/sass-pire.scss index 08d3a76b..7eaa5b93 100644 --- a/src/sass-pire.scss +++ b/src/sass-pire.scss @@ -12,7 +12,7 @@ // @library sass-pire -// @version 2.3.1 +// @version 3.0.0 // * forwarding the "abstract" module. // * The "abstract" module may contain abstract styles or variables used