From 643414d17d0d4e40d9275eb2071f7237c5d60f95 Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Thu, 3 Sep 2026 18:18:12 +0300 Subject: [PATCH 01/11] feat(utils): add typical animations --- package-lock.json | 9 +++ packages/core/src/sass/css/styles/_index.scss | 1 + .../core/src/sass/css/styles/animation.scss | 67 +++++++++++++++++++ .../sass/tools/settings/common/_utils.scss | 7 ++ 4 files changed, 84 insertions(+) create mode 100644 packages/core/src/sass/css/styles/animation.scss diff --git a/package-lock.json b/package-lock.json index 159da334..fef5352a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10691,6 +10691,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10711,6 +10712,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10731,6 +10733,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10751,6 +10754,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10771,6 +10775,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10791,6 +10796,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10811,6 +10817,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10831,6 +10838,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, @@ -10851,6 +10859,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 12.0.0" }, diff --git a/packages/core/src/sass/css/styles/_index.scss b/packages/core/src/sass/css/styles/_index.scss index f9878b39..6778a7ce 100644 --- a/packages/core/src/sass/css/styles/_index.scss +++ b/packages/core/src/sass/css/styles/_index.scss @@ -1,2 +1,3 @@ @forward 'variables'; @forward 'generic'; +@forward 'animation'; diff --git a/packages/core/src/sass/css/styles/animation.scss b/packages/core/src/sass/css/styles/animation.scss new file mode 100644 index 00000000..5135cd6d --- /dev/null +++ b/packages/core/src/sass/css/styles/animation.scss @@ -0,0 +1,67 @@ +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes notify { + 0%, + 70% { + transform: scale(1); + opacity: 1; + } + + 100% { + transform: scale(1.8); + opacity: 0; + } +} + +@keyframes beat { + 0%, + 100% { + opacity: 1; + } + + 25% { + opacity: 0.6; + } + + 50% { + opacity: 1; + } + + 75% { + opacity: 0.5; + } +} + +@keyframes breath { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(0.95); + opacity: 0.5; + } +} + +@keyframes bounce { + 0%, + 100% { + transform: translateY(-25%) scale(1); + animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.6); + } + + 50% { + transform: translateY(0) scale(1.05, 0.95); + animation-timing-function: cubic-bezier(0.15, 0, 0.3, 1); + } +} \ No newline at end of file diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index ef4d82db..86d3f4f2 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1953,6 +1953,13 @@ $utils-db: ( 'infinite': ( 'i': infinite, ), + 'animation': ( + 'mSp': spin 1.5s ease infinite, + 'mNf': notify 1.5s ease infinite, + 'mBt': beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, + 'mBr': breath 2s ease-in-out infinite, + 'mBn': bounce 1s infinite + ), 'font-size': ( 'sl': smaller, // so as not to occupy `lg` From ecb230763f1cb75036401d454500f40ef824ba3b Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Fri, 18 Sep 2026 19:45:49 +0300 Subject: [PATCH 02/11] feat(utils): add utility for the field-sizing property --- .../core/src/sass/tools/settings/common/_utils.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index 86d3f4f2..9b1fe33d 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1642,6 +1642,19 @@ $utils-db: ( '': none, ), ), + 'Fds': ( + 'properties': field-sizing, + 'keywords': ( + '': content, + 'c': content, + 'f': fixed, + 'ih': inherit, + 'ini': initial, + 'rvr': revert, + 'rvrl': revert-layer, + 'ust': unset + ), + ), 'Acnc': ( 'properties': accent-color, 'conversion': 'color', From c97160baa066d6562bdf71a8e68a9ac677e39de1 Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Wed, 7 Oct 2026 19:21:32 +0300 Subject: [PATCH 03/11] refactor(utils): fix animation utilities and field-sizing property --- .../core/src/sass/tools/settings/common/_utils.scss | 11 +++-------- test/web.html | 5 +++++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index 9b1fe33d..5f83ef9c 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1642,17 +1642,12 @@ $utils-db: ( '': none, ), ), - 'Fds': ( + 'Fils': ( 'properties': field-sizing, 'keywords': ( '': content, 'c': content, - 'f': fixed, - 'ih': inherit, - 'ini': initial, - 'rvr': revert, - 'rvrl': revert-layer, - 'ust': unset + 'f': fixed ), ), 'Acnc': ( @@ -1967,7 +1962,7 @@ $utils-db: ( 'i': infinite, ), 'animation': ( - 'mSp': spin 1.5s ease infinite, + 'mSp': spin 1.5s linear infinite, 'mNf': notify 1.5s ease infinite, 'mBt': beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, 'mBr': breath 2s ease-in-out infinite, diff --git a/test/web.html b/test/web.html index c193d4ba..b56f23b2 100644 --- a/test/web.html +++ b/test/web.html @@ -12,6 +12,11 @@

mlut tests

Lorem about mlut

+

Typical animations

+
An-mSp
+
An-mBr
+ + 
Loading...
From 956c6648799d93b24ffee2a4d9b7d031e6fd22b6 Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Fri, 9 Oct 2026 21:16:19 +0300 Subject: [PATCH 04/11] docs(utils): add examples for typical animations and field-sizing property --- .../core-utils/animations/animations.hbs | 17 +++++++++++++++++ .../core-utils/field-sizing/field-sizing.hbs | 11 +++++++++++ 2 files changed, 28 insertions(+) create mode 100644 docs/examples/core-utils/animations/animations.hbs create mode 100644 docs/examples/core-utils/field-sizing/field-sizing.hbs diff --git a/docs/examples/core-utils/animations/animations.hbs b/docs/examples/core-utils/animations/animations.hbs new file mode 100644 index 00000000..39771838 --- /dev/null +++ b/docs/examples/core-utils/animations/animations.hbs @@ -0,0 +1,17 @@ +
+
+
+
+
+
+
+
+
+ +
+

An-mSp — spin 1.5s linear infinite

+

An-mNf — notify 1.5s ease infinite

+

An-mBt — beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite

+

An-mBr — breath 2s ease-in-out infinite

+

An-mBn — bounce 1s infinite

+
\ No newline at end of file diff --git a/docs/examples/core-utils/field-sizing/field-sizing.hbs b/docs/examples/core-utils/field-sizing/field-sizing.hbs new file mode 100644 index 00000000..9ce17526 --- /dev/null +++ b/docs/examples/core-utils/field-sizing/field-sizing.hbs @@ -0,0 +1,11 @@ +
+ + + +
\ No newline at end of file From b18961e246a64819b1c9324c5f5a45fe704fbe27 Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Tue, 13 Oct 2026 18:36:38 +0300 Subject: [PATCH 05/11] docs(utils): add examples for typical animations --- .../core-utils/animations/animations.hbs | 17 ----------------- .../core-utils/field-sizing/field-sizing.hbs | 11 ----------- .../css_lib-helpers/animations/animations.hbs | 3 +++ .../core/src/sass/css/helpers/animations.scss | 15 +++++++++++++++ test/web.html | 5 ----- 5 files changed, 18 insertions(+), 33 deletions(-) delete mode 100644 docs/examples/core-utils/animations/animations.hbs delete mode 100644 docs/examples/core-utils/field-sizing/field-sizing.hbs create mode 100644 docs/examples/css_lib-helpers/animations/animations.hbs create mode 100644 packages/core/src/sass/css/helpers/animations.scss diff --git a/docs/examples/core-utils/animations/animations.hbs b/docs/examples/core-utils/animations/animations.hbs deleted file mode 100644 index 39771838..00000000 --- a/docs/examples/core-utils/animations/animations.hbs +++ /dev/null @@ -1,17 +0,0 @@ -
-
-
-
-
-
-
-
-
- -
-

An-mSp — spin 1.5s linear infinite

-

An-mNf — notify 1.5s ease infinite

-

An-mBt — beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite

-

An-mBr — breath 2s ease-in-out infinite

-

An-mBn — bounce 1s infinite

-
\ No newline at end of file diff --git a/docs/examples/core-utils/field-sizing/field-sizing.hbs b/docs/examples/core-utils/field-sizing/field-sizing.hbs deleted file mode 100644 index 9ce17526..00000000 --- a/docs/examples/core-utils/field-sizing/field-sizing.hbs +++ /dev/null @@ -1,11 +0,0 @@ -
- - - -
\ No newline at end of file diff --git a/docs/examples/css_lib-helpers/animations/animations.hbs b/docs/examples/css_lib-helpers/animations/animations.hbs new file mode 100644 index 00000000..fbaefd4d --- /dev/null +++ b/docs/examples/css_lib-helpers/animations/animations.hbs @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/packages/core/src/sass/css/helpers/animations.scss b/packages/core/src/sass/css/helpers/animations.scss new file mode 100644 index 00000000..6c6c0e48 --- /dev/null +++ b/packages/core/src/sass/css/helpers/animations.scss @@ -0,0 +1,15 @@ +/* +Animations + +Helper tools for creating basic animations — such as rotation, notification, "heartbeat," "breathing," and bounce—implemented using the `@keyframes` directive and the corresponding values ​​for the `animation` property. + +.An-mSp — spin +.An-mNf - notify +.An-mBt - beat +.An-mBr - breath +.An-mBn - bounce + +Markup: ../../../docs/examples/css_lib-helpers/animations/animations.hbs + +Styleguide: css_lib.helpers.animations +*/ \ No newline at end of file diff --git a/test/web.html b/test/web.html index b56f23b2..c193d4ba 100644 --- a/test/web.html +++ b/test/web.html @@ -12,11 +12,6 @@

mlut tests

Lorem about mlut

-

Typical animations

-
An-mSp
-
An-mBr
- - 
Loading...
From f51e9f4270756e732f220082ba601963c2ada61a Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Tue, 13 Oct 2026 23:05:18 +0300 Subject: [PATCH 06/11] docs(utils): add examples for typical animations after rewiev --- .../core/src/sass/css/helpers/animations.scss | 15 --------------- packages/core/src/sass/css/styles/animation.scss | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 15 deletions(-) delete mode 100644 packages/core/src/sass/css/helpers/animations.scss diff --git a/packages/core/src/sass/css/helpers/animations.scss b/packages/core/src/sass/css/helpers/animations.scss deleted file mode 100644 index 6c6c0e48..00000000 --- a/packages/core/src/sass/css/helpers/animations.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* -Animations - -Helper tools for creating basic animations — such as rotation, notification, "heartbeat," "breathing," and bounce—implemented using the `@keyframes` directive and the corresponding values ​​for the `animation` property. - -.An-mSp — spin -.An-mNf - notify -.An-mBt - beat -.An-mBr - breath -.An-mBn - bounce - -Markup: ../../../docs/examples/css_lib-helpers/animations/animations.hbs - -Styleguide: css_lib.helpers.animations -*/ \ No newline at end of file diff --git a/packages/core/src/sass/css/styles/animation.scss b/packages/core/src/sass/css/styles/animation.scss index 5135cd6d..f471be3d 100644 --- a/packages/core/src/sass/css/styles/animation.scss +++ b/packages/core/src/sass/css/styles/animation.scss @@ -1,3 +1,19 @@ +/* +Animations + +Helper tools for creating basic animations — such as rotation, notification, "heartbeat," "breathing," and bounce—implemented using the `@keyframes` directive and the corresponding values ​​for the `animation` property. + +.An-mSp - spin +.An-mNf - notify +.An-mBt - beat +.An-mBr - breath +.An-mBn - bounce + +Markup: ../../../docs/examples/css_lib-helpers/animations/animations.hbs + +Styleguide: css_lib.styles.animation +*/ + @keyframes spin { from { transform: rotate(0deg); From 7de14e3c5476c00f4d428d150aab86a528191679 Mon Sep 17 00:00:00 2001 From: mr150 Date: Wed, 14 Oct 2026 16:22:13 +0500 Subject: [PATCH 07/11] feat(core): add the animation utils to CSS bundle --- packages/core/src/sass/css/utils/_transition.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/sass/css/utils/_transition.scss b/packages/core/src/sass/css/utils/_transition.scss index 9ade43ae..19c7e3e6 100644 --- a/packages/core/src/sass/css/utils/_transition.scss +++ b/packages/core/src/sass/css/utils/_transition.scss @@ -11,6 +11,6 @@ ml.$utils-map: map.merge( ml.$cBpAllCp + 'Tsd': (ml.$cArOlBp + ml.$css-transition-time, 1s, 0s), 'Tsdl': (ml.$css-transition-time, 1s), 'Tstf': (ml.$kUvKA), - ml.$cArOlBp + 'An': ('n'), + ml.$cBpAllCp + 'An': (ml.$kUvKA), ) ); From 0ac0659ebda9962884eed53b60a5e9dc61ea383a Mon Sep 17 00:00:00 2001 From: Oleg Ostapchuk Date: Sun, 25 Oct 2026 14:51:04 +0300 Subject: [PATCH 08/11] docs(utils): add examples for typical animations --- .../css_lib-helpers/animations/animations.hbs | 4 +- test/css/test.css | 169 ++++++++++-------- 2 files changed, 94 insertions(+), 79 deletions(-) diff --git a/docs/examples/css_lib-helpers/animations/animations.hbs b/docs/examples/css_lib-helpers/animations/animations.hbs index fbaefd4d..b87dadca 100644 --- a/docs/examples/css_lib-helpers/animations/animations.hbs +++ b/docs/examples/css_lib-helpers/animations/animations.hbs @@ -1,3 +1,3 @@ -
-
+
+
\ No newline at end of file diff --git a/test/css/test.css b/test/css/test.css index 6dce11ce..f474ea7f 100644 --- a/test/css/test.css +++ b/test/css/test.css @@ -57,10 +57,10 @@ } .gs-debug { - /* autoprefixer: off */ - padding: calc(var(--ml-gg) * 3) 0px; - background-image: linear-gradient(90deg, #336 var(--ml-gg), #d15 var(--ml-gg), #d15 calc(100% - var(--ml-gg)), #336 0); - background-size: calc(1 / var(--ml-gscc) * 100%); + /* autoprefixer: off */ + padding: calc(var(--ml-gg) * 3) 0px; + background-image: linear-gradient(90deg, #336 var(--ml-gg), #d15 var(--ml-gg), #d15 calc(100% - var(--ml-gg)), #336 0); + background-size: calc(1 / var(--ml-gscc) * 100%); } .kss-description, @@ -90,7 +90,7 @@ .kss-description table:not([class]) th { padding: 6px; border: 1px solid #dfe2e5; - margin-bottom: 24px; + margin-bottom: 24px; } @media (min-width:520px) { @@ -101,7 +101,7 @@ } .kss-description table:not([class]) { - margin-bottom: 24px; + margin-bottom: 24px; } @media (max-width:519px) { @@ -112,124 +112,139 @@ /* CSS for demo, that not included in default bundle */ :root { - --ml-gscc: 12; + --ml-gscc: 12; } .row { - position: relative; - display: flex; - flex-wrap: wrap; - padding: 0px; - list-style: none; - counter-reset: ml-row-item; + position: relative; + display: flex; + flex-wrap: wrap; + padding: 0px; + list-style: none; + counter-reset: ml-row-item; } .row { - margin: 0px -16px; - margin: 0px calc(var(--ml-gg) * -1); + margin: 0px -16px; + margin: 0px calc(var(--ml-gg) * -1); } .row__col, .row__item { - --ml-gsfd: 0px; - max-width: 100%; + --ml-gsfd: 0px; + max-width: 100%; } .row__col, .row__item { - --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); - --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); + --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); + --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); } .row__col > :first-child:not([class]), .row__item > :first-child:not([class]) { - margin-top: 0px; + margin-top: 0px; } .row__col > :last-child:not([class]), .row__item > :last-child:not([class]) { - margin-bottom: 0px; + margin-bottom: 0px; } .row__col { - --ml-gsfd: calc(var(--ml-gg) * 1); + --ml-gsfd: calc(var(--ml-gg) * 1); } .row__col { - --ml-gsc: 12; - width: calc(100% - 32px); - width: var(--ml-gscf, 100%); + --ml-gsc: 12; + width: calc(100% - 32px); + width: var(--ml-gscf, 100%); } .row__col { - margin: 0px 16px 32px; - margin: 0px calc(var(--ml-gg) * 1) calc(var(--ml-gg) * 2); + margin: 0px 16px 32px; + margin: 0px calc(var(--ml-gg) * 1) calc(var(--ml-gg) * 2); } .row__col.row { - margin-bottom: 0px; + margin-bottom: 0px; } .-Gsfd1gg { - --ml-gsfd: calc(var(--ml-gg) * 1); + --ml-gsfd: calc(var(--ml-gg) * 1); } .-Gsfd0 { - --ml-gsfd: 0px; + --ml-gsfd: 0px; } .-Gsf { - --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); - --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); + --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2); + --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg))); +} + +.animation-place { + padding: 15%; +} + +.animation-item { + width: 50%; + aspect-ratio: 1; + background-image: linear-gradient(#0078ff 0% 50%, #c2e3e3 50% 100%); + border-radius: 100%; } @media (min-width: 520px) { - .sm_W1gc { - --ml-gsc: 1; - width: calc(8.3333333333% - 32px); - width: var(--ml-gscf, 8.3333333333%); - } - .sm_W2gc { - --ml-gsc: 2; - width: calc(16.6666666667% - 32px); - width: var(--ml-gscf, 16.6666666667%); - } + .sm_W1gc { + --ml-gsc: 1; + width: calc(8.3333333333% - 32px); + width: var(--ml-gscf, 8.3333333333%); + } + .sm_W2gc { + --ml-gsc: 2; + width: calc(16.6666666667% - 32px); + width: var(--ml-gscf, 16.6666666667%); + } } @media (min-width: 768px) { - .md_W1gc { - --ml-gsc: 1; - width: calc(8.3333333333% - 32px); - width: var(--ml-gscf, 8.3333333333%); - } - - .md_W3gc { - --ml-gsc: 3; - width: calc(25% - 32px); - width: var(--ml-gscf, 25%); - } - - .md_W4gc { - --ml-gsc: 4; - width: calc(33.3333333333% - 32px); - width: var(--ml-gscf, 33.3333333333%); - } - - .md_W5gc { - --ml-gsc: 5; - width: calc(41.6666666667% - 32px); - width: var(--ml-gscf, 41.6666666667%); - } - - .md_W8gc { - --ml-gsc: 8; - width: calc(66.6666666667% - 32px); - width: var(--ml-gscf, 66.6666666667%); - } - - .md_W9gc { - --ml-gsc: 9; - width: calc(75% - 32px); - width: var(--ml-gscf, 75%); - } + .md_W1gc { + --ml-gsc: 1; + width: calc(8.3333333333% - 32px); + width: var(--ml-gscf, 8.3333333333%); + } + + .md_W3gc { + --ml-gsc: 3; + width: calc(25% - 32px); + width: var(--ml-gscf, 25%); + } + + .md_W4gc { + --ml-gsc: 4; + width: calc(33.3333333333% - 32px); + width: var(--ml-gscf, 33.3333333333%); + } + + .md_W5gc { + --ml-gsc: 5; + width: calc(41.6666666667% - 32px); + width: var(--ml-gscf, 41.6666666667%); + } + + .md_W8gc { + --ml-gsc: 8; + width: calc(66.6666666667% - 32px); + width: var(--ml-gscf, 66.6666666667%); + } + + .md_W9gc { + --ml-gsc: 9; + width: calc(75% - 32px); + width: var(--ml-gscf, 75%); + } + + .animation-place { + padding: 3%; + } } From 4527fa24476e7a9774eea70adfe19d0409fbb8e5 Mon Sep 17 00:00:00 2001 From: mr150 Date: Sat, 7 Nov 2026 01:53:05 +0500 Subject: [PATCH 09/11] refactor(core): change the animation name --- packages/core/src/sass/css/styles/animation.scss | 6 +++--- packages/core/src/sass/tools/settings/common/_utils.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/src/sass/css/styles/animation.scss b/packages/core/src/sass/css/styles/animation.scss index f471be3d..32909c25 100644 --- a/packages/core/src/sass/css/styles/animation.scss +++ b/packages/core/src/sass/css/styles/animation.scss @@ -1,10 +1,10 @@ /* Animations -Helper tools for creating basic animations — such as rotation, notification, "heartbeat," "breathing," and bounce—implemented using the `@keyframes` directive and the corresponding values ​​for the `animation` property. +Basic animations such as rotation, notification, "heartbeat", etc. You can use it with [An](section-utils-reference.html#kssref-utils-reference-an) utility. .An-mSp - spin -.An-mNf - notify +.An-mNt - notify .An-mBt - beat .An-mBr - breath .An-mBn - bounce @@ -80,4 +80,4 @@ Styleguide: css_lib.styles.animation transform: translateY(0) scale(1.05, 0.95); animation-timing-function: cubic-bezier(0.15, 0, 0.3, 1); } -} \ No newline at end of file +} diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index 5f83ef9c..cab37d4a 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1963,7 +1963,7 @@ $utils-db: ( ), 'animation': ( 'mSp': spin 1.5s linear infinite, - 'mNf': notify 1.5s ease infinite, + 'mNt': notify 1.5s ease infinite, 'mBt': beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, 'mBr': breath 2s ease-in-out infinite, 'mBn': bounce 1s infinite From f8ab927801036fb630e026b7cfb3289acefd75b1 Mon Sep 17 00:00:00 2001 From: mr150 Date: Sun, 8 Nov 2026 14:46:19 +0500 Subject: [PATCH 10/11] refactor(core-sass): add a prefix to animation names --- packages/core/src/sass/css/styles/animation.scss | 12 +++++++----- .../core/src/sass/tools/settings/common/_utils.scss | 10 +++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/core/src/sass/css/styles/animation.scss b/packages/core/src/sass/css/styles/animation.scss index 32909c25..148816b2 100644 --- a/packages/core/src/sass/css/styles/animation.scss +++ b/packages/core/src/sass/css/styles/animation.scss @@ -1,3 +1,5 @@ +@use '../../tools' as ml; + /* Animations @@ -14,7 +16,7 @@ Markup: ../../../docs/examples/css_lib-helpers/animations/animations.hbs Styleguide: css_lib.styles.animation */ -@keyframes spin { +@keyframes #{ml.$css-var-prefix}spin { from { transform: rotate(0deg); } @@ -24,7 +26,7 @@ Styleguide: css_lib.styles.animation } } -@keyframes notify { +@keyframes #{ml.$css-var-prefix}notify { 0%, 70% { transform: scale(1); @@ -37,7 +39,7 @@ Styleguide: css_lib.styles.animation } } -@keyframes beat { +@keyframes #{ml.$css-var-prefix}beat { 0%, 100% { opacity: 1; @@ -56,7 +58,7 @@ Styleguide: css_lib.styles.animation } } -@keyframes breath { +@keyframes #{ml.$css-var-prefix}breath { 0%, 100% { transform: scale(1); @@ -69,7 +71,7 @@ Styleguide: css_lib.styles.animation } } -@keyframes bounce { +@keyframes #{ml.$css-var-prefix}bounce { 0%, 100% { transform: translateY(-25%) scale(1); diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index cab37d4a..556f9450 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -1962,11 +1962,11 @@ $utils-db: ( 'i': infinite, ), 'animation': ( - 'mSp': spin 1.5s linear infinite, - 'mNt': notify 1.5s ease infinite, - 'mBt': beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, - 'mBr': breath 2s ease-in-out infinite, - 'mBn': bounce 1s infinite + 'mSp': #{ml.$css-var-prefix}spin 1.5s linear infinite, + 'mNt': #{ml.$css-var-prefix}notify 1.5s ease infinite, + 'mBt': #{ml.$css-var-prefix}beat 4s cubic-bezier(0.37, 0, 0.63, 1) infinite, + 'mBr': #{ml.$css-var-prefix}breath 2s ease-in-out infinite, + 'mBn': #{ml.$css-var-prefix}bounce 1s infinite ), 'font-size': ( 'sl': smaller, From 5527062a73d8c25d30a7b665d4971e32a99fbc1c Mon Sep 17 00:00:00 2001 From: mr150 Date: Sun, 8 Nov 2026 14:47:18 +0500 Subject: [PATCH 11/11] chore(core): release v2.6.0 --- package-lock.json | 2 +- packages/core/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index fef5352a..87d3a21e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19040,7 +19040,7 @@ }, "packages/core": { "name": "@mlut/core", - "version": "2.5.1", + "version": "2.6.0", "license": "MIT", "devDependencies": { "@types/node": "^20.10.5", diff --git a/packages/core/package.json b/packages/core/package.json index 3ce83e36..705ce9d7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@mlut/core", - "version": "2.5.1", + "version": "2.6.0", "description": "Tailwind CSS alternative for custom websites and creative coding", "author": "mr150", "type": "module",