@fkui/design 5.36.0

package/src/internal-components/popupError/_popuperror.scss

@@ -0,0 +1,116 @@
+@use "../../core/size";
+@use "../../components/z-index";
+@use "arrows/top" as arrowTop;
+@use "arrows/top-before" as arrowTopBefore;
+@use "arrows/bottom" as arrowBottom;
+@use "arrows/bottom-before" as arrowBottomBefore;
+@use "arrows/left" as arrowLeft;
+@use "arrows/left-before" as arrowLeftBefore;
+@use "arrows/right" as arrowRight;
+@use "arrows/right-before" as arrowRightBefore;
+
+// With inspiration from:
+// https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/#comments-modern-css-tooltips-speech-bubbles-part1
+$POPUP_ERROR_SELECTOR: ".popup-error" !default;
+#{$POPUP_ERROR_SELECTOR} {
+    --i-popup-error-offset: 24px;
+
+    // Arrorw angle
+    $angle: 60deg;
+
+    // Arrow height
+    $height: 10px;
+
+    // Arrow position (0%:left 100%:right)
+    $pos: calc(100% - var(--i-popup-error-offset));
+    $radius: 0.2em;
+    $border-width: var(--f-border-width-medium);
+    $border-color: var(--f-border-color-error);
+    $bg-color: var(--f-background-error);
+    $offset: $height * tan($angle / 2);
+
+    &--overlay {
+        position: absolute;
+
+        // Place popup at the top as default so it doesn't affect
+        // the page height when teleporting to bottom of body.
+        top: 0;
+
+        #{$POPUP_ERROR_SELECTOR}__wrapper {
+            left: -10000px;
+            position: absolute;
+            z-index: z-index.$POPUP_ZINDEX;
+            white-space: nowrap;
+        }
+    }
+
+    &--inline {
+        position: static;
+
+        #{$POPUP_ERROR_SELECTOR}__wrapper {
+            box-sizing: border-box;
+            margin-top: size.$margin-050;
+            margin-bottom: size.$margin-050;
+            position: static;
+        }
+    }
+
+    &--arrow {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5em 10px;
+        background: var(--f-border-color-error);
+        line-height: 24px;
+        position: relative;
+
+        #{$POPUP_ERROR_SELECTOR}__button {
+            margin: 0;
+            min-height: 24px;
+            min-width: 24px;
+            padding: 0;
+            padding-left: 5px;
+        }
+    }
+
+    &--arrow::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+        padding: $border-width;
+        border-radius: inherit;
+        background: $bg-color content-box;
+    }
+
+    &--top {
+        @include arrowTop.mixin($pos, $radius, $height, $angle, $border-color);
+    }
+
+    &--bottom {
+        @include arrowBottom.mixin($pos, $radius, $height, $angle, $border-color);
+    }
+
+    &--left {
+        @include arrowLeft.mixin($pos, $radius, $height, $angle, $border-color);
+    }
+
+    &--right {
+        @include arrowRight.mixin($pos, $radius, $height, $angle, $border-color);
+    }
+
+    &--top::before {
+        @include arrowTopBefore.mixin($pos, $radius, $height, $angle, $border-width, $bg-color);
+    }
+
+    &--bottom::before {
+        @include arrowBottomBefore.mixin($pos, $radius, $height, $angle, $border-width, $bg-color);
+    }
+
+    &--left::before {
+        @include arrowLeftBefore.mixin($pos, $radius, $height, $angle, $border-width, $bg-color);
+    }
+
+    &--right::before {
+        @include arrowRightBefore.mixin($pos, $radius, $height, $angle, $border-width, $bg-color);
+    }
+}

package/src/internal-components/popupError/arrows/_bottom-before.scss

@@ -0,0 +1,22 @@
+@function border-image($pos, $offset, $height, $radius, $border-width, $bg-color) {
+    @return conic-gradient($bg-color 0 0) fill 0 / ($radius max($border-width, 100% - $pos - $offset) 0 max($border-width, $pos - $offset)) / 0 0 $height 0;
+}
+
+@function clip-path($pos, $offset, $height, $border-width, $angle) {
+    @return polygon(
+        0 100%,
+        0 0,
+        100% 0,
+        100% 100%,
+        min(100% - $border-width, $pos + $offset - $border-width * tan(45deg - $angle / 4)) calc(100% - $border-width),
+        $pos calc(100% + $height - $border-width / sin($angle / 2)),
+        max($border-width, $pos - $offset + $border-width * tan(45deg - $angle / 4)) calc(100% - $border-width)
+    );
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-width, $bg-color) {
+    $offset: $height * tan($angle / 2);
+
+    clip-path: clip-path($pos, $offset, $height, $border-width, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-width, $bg-color);
+}

package/src/internal-components/popupError/arrows/_bottom.scss

@@ -0,0 +1,19 @@
+@function border-radius($pos, $radius, $offset) {
+    @return $radius $radius min($radius, 100% - $pos - $offset) min($radius, $pos - $offset) / $radius;
+}
+
+@function border-image($pos, $offset, $height, $radius, $border-color) {
+    @return conic-gradient($border-color 0 0) fill 0 / ($radius max(0%, 100% - $pos - $offset) 0) max(0%, $pos - $offset) / 0 0 $height 0;
+}
+
+@function clip-path($pos, $offset, $height) {
+    @return polygon(0 100%, 0 0, 100% 0, 100% 100%, min(100%, $pos + $offset) 100%, $pos calc(100% + $height), max(0%, $pos - $offset) 100%);
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-color) {
+    $offset: $height * tan($angle / 2);
+
+    border-radius: border-radius($pos, $offset, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-color);
+    clip-path: clip-path($pos, $offset, $height);
+}

package/src/internal-components/popupError/arrows/_left-before.scss

@@ -0,0 +1,22 @@
+@function border-image($pos, $offset, $height, $radius, $border-width, $bg-color) {
+    @return conic-gradient($bg-color 0 0) fill 0 / max($border-width, $pos - $offset) $radius max($border-width, 100% - $pos - $offset) 0 / 0 0 0 $height;
+}
+
+@function clip-path($pos, $offset, $height, $border-width, $angle) {
+    @return polygon(
+        0 0,
+        100% 0,
+        100% 100%,
+        0 100%,
+        $border-width min(100% - $border-width, $pos + $offset - $border-width * tan(45deg - $angle / 4)),
+        calc($border-width / sin($angle / 2) - $height) $pos,
+        $border-width max($border-width, $pos - $offset + $border-width * tan(45deg - $angle / 4))
+    );
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-width, $bg-color) {
+    $offset: $height * tan($angle / 2);
+
+    clip-path: clip-path($pos, $offset, $height, $border-width, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-width, $bg-color);
+}

package/src/internal-components/popupError/arrows/_left.scss

@@ -0,0 +1,19 @@
+@function border-radius($pos, $radius, $offset) {
+    @return $radius / min($radius, $pos - $offset) $radius $radius min($radius, 100% - $pos - $offset);
+}
+
+@function border-image($pos, $offset, $height, $radius, $border-color) {
+    @return conic-gradient($border-color 0 0) fill 0 / max(0%, $pos - $offset) $radius max(0%, 100% - $pos - $offset) 0 / 0 0 0 $height;
+}
+
+@function clip-path($pos, $offset, $height) {
+    @return polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 min(100%, $pos + $offset), calc(-1 * $height) $pos, 0 max(0%, $pos - $offset));
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-color) {
+    $offset: $height * tan($angle / 2);
+
+    border-radius: border-radius($pos, $offset, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-color);
+    clip-path: clip-path($pos, $offset, $height);
+}

package/src/internal-components/popupError/arrows/_right-before.scss

@@ -0,0 +1,22 @@
+@function border-image($pos, $offset, $height, $radius, $border-width, $bg-color) {
+    @return conic-gradient($bg-color 0 0) fill 0 / (max($border-width, $pos - $offset) 0 max($border-width, 100% - $pos - $offset) $radius) / 0 $height 0 0;
+}
+
+@function clip-path($pos, $offset, $height, $border-width, $angle) {
+    @return polygon(
+        100% 0,
+        0 0,
+        0 100%,
+        100% 100%,
+        calc(100% - $border-width) min(100% - $border-width, $pos + $offset - $border-width * tan(45deg - $angle / 4)),
+        calc(100% + $height - $border-width / sin($angle / 2)) $pos,
+        calc(100% - $border-width) max($border-width, $pos - $offset + $border-width * tan(45deg - $angle / 4))
+    );
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-width, $bg-color) {
+    $offset: $height * tan($angle / 2);
+
+    clip-path: clip-path($pos, $offset, $height, $border-width, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-width, $bg-color);
+}

package/src/internal-components/popupError/arrows/_right.scss

@@ -0,0 +1,19 @@
+@function border-radius($pos, $radius, $offset) {
+    @return $radius / ($radius min($radius, $pos - $offset) min($radius, 100% - $pos - $offset) $radius);
+}
+
+@function border-image($pos, $offset, $height, $radius, $border-color) {
+    @return conic-gradient($border-color 0 0) fill 0 / (max(0%, $pos - $offset) 0 max(0%, 100% - $pos - $offset) $radius) / 0 $height 0 0;
+}
+
+@function clip-path($pos, $offset, $height) {
+    @return polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% min(100%, $pos + $offset), calc(100% + $height) $pos, 100% max(0%, $pos - $offset));
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-color) {
+    $offset: $height * tan($angle / 2);
+
+    border-radius: border-radius($pos, $offset, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-color);
+    clip-path: clip-path($pos, $offset, $height);
+}

package/src/internal-components/popupError/arrows/_top-before.scss

@@ -0,0 +1,22 @@
+@function border-image($pos, $offset, $height, $radius, $border-width, $bg-color) {
+    @return conic-gradient($bg-color 0 0) fill 0 / 0 max($border-width, 100% - $pos - $offset) $radius max($border-width, $pos - $offset) / $height 0 0 0;
+}
+
+@function clip-path($pos, $offset, $height, $border-width, $angle) {
+    @return polygon(
+        0 0,
+        0 100%,
+        100% 100%,
+        100% 0,
+        min(100% - $border-width, $pos + $offset - $border-width * tan(45deg - $angle / 4)) $border-width,
+        $pos calc($border-width / sin($angle / 2) - $height),
+        max($border-width, $pos - $offset + $border-width * tan(45deg - $angle / 4)) $border-width
+    );
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-width, $bg-color) {
+    $offset: $height * tan($angle / 2);
+
+    clip-path: clip-path($pos, $offset, $height, $border-width, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-width, $bg-color);
+}

package/src/internal-components/popupError/arrows/_top.scss

@@ -0,0 +1,19 @@
+@function border-radius($pos, $radius, $offset) {
+    @return (min($radius, $pos - $offset) min($radius, 100% - $pos - $offset) $radius $radius) / $radius;
+}
+
+@function border-image($pos, $offset, $height, $radius, $border-color) {
+    @return conic-gradient($border-color 0 0) fill 0 / 0 max(0%, 100% - $pos - $offset) $radius max(0%, $pos - $offset) / $height 0 0 0;
+}
+
+@function clip-path($pos, $offset, $height) {
+    @return polygon(0 0, 0 100%, 100% 100%, 100% 0, min(100%, $pos + $offset) 0, $pos calc(-1 * $height), max(0%, $pos - $offset) 0);
+}
+
+@mixin mixin($pos, $radius, $height, $angle, $border-color) {
+    $offset: $height * tan($angle / 2);
+
+    border-radius: border-radius($pos, $offset, $angle);
+    border-image: border-image($pos, $offset, $height, $radius, $border-color);
+    clip-path: clip-path($pos, $offset, $height);
+}

package/stylelint/index.js

@@ -0,0 +1,3 @@
+const rules = require("./rules");
+
+module.exports = rules;

package/stylelint/recommended.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [__dirname],
+    rules: {
+        "fkui/deprecated-variable": true,
+    },
+};

package/stylelint/rules/deprecatedVariable/index.js

@@ -0,0 +1,93 @@
+const stylelint = require("stylelint");
+const deprecatedVariables = require("@fkui/css-variables/dist/deprecated-variables.json");
+
+/**
+ * @typedef { import("postcss").Root } Root
+ * @typedef { import("postcss").ChildNode } ChildNode
+ */
+
+/**
+ * @typedef {Object} Variable
+ * @property {string} name
+ * @property {number} offset
+ */
+
+const ruleName = "fkui/deprecated-variable";
+const messages = stylelint.utils.ruleMessages(ruleName, {
+    deprecated: (selector) => `Deprecated variable "${selector}"`,
+});
+
+/**
+ * @param node {ChildNode }
+ * @returns {boolean}
+ */
+function isDeclaration(node) {
+    return node.type === "decl";
+}
+
+/**
+ * @param variable {Variable}
+ * @returns {boolean}
+ */
+function isDeprecated(variable) {
+    return deprecatedVariables.includes(variable.name);
+}
+
+/**
+ * @param node {ChildNode }
+ * @returns {IterableIterator<Variable>}
+ */
+function* extractVariables(node) {
+    const { value } = node;
+    for (const match of value.matchAll(
+        /var\(\s*(.+?)\s*(?:,\s*[^)]*\s*)?\)/g,
+    )) {
+        yield {
+            name: match[1],
+            offset: match.index,
+        };
+    }
+}
+
+function rule(actual) {
+    /**
+     * @param {Root} root
+     */
+    function deprecatedVariable(root, result) {
+        const validOptions = stylelint.utils.validateOptions(result, ruleName, {
+            actual,
+        });
+        if (!validOptions) {
+            return;
+        }
+
+        root.walk(
+            /**
+             * @param {ChildNode} node
+             */
+            (node) => {
+                if (!isDeclaration(node)) {
+                    return;
+                }
+
+                for (const variable of extractVariables(node)) {
+                    if (isDeprecated(variable)) {
+                        stylelint.utils.report({
+                            index: 0,
+                            message: messages.deprecated(variable.name),
+                            node,
+                            ruleName,
+                            result,
+                        });
+                    }
+                }
+            },
+        );
+    }
+
+    return deprecatedVariable;
+}
+
+module.exports = stylelint.createPlugin(ruleName, rule);
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;

package/stylelint/rules/index.js

@@ -0,0 +1,3 @@
+const deprecatedVariable = require("./deprecatedVariable");
+
+module.exports = [deprecatedVariable];