@navikt/aksel-stylelint 7.33.5 → 7.35.0

package/README.md

@@ -170,4 +170,21 @@ Warns when you try to use deprecated class names.
 }
 ```
 
+## aksel/no-legacy-classes
+
+Warns when trying to to use legacy class names starting with `.navds`. As of version 8.0, all class names are prefixed with `.aksel`, so all old overrides no longer work.
+
+We still discourage overriding class names from `@navikt/ds-css`:
+
+- Add your own `className` instead of referencing Aksel classes directly.
+- Open a GitHub issue if what you need to do isn't straightforward, and we'll work together to find a solution.
+
+❌ Incorrect:
+
+```css
+.navds-button {
+^^^^^^^^^^^^^
+}
+```
+
 🐛 Found a bug? https://github.com/navikt/aksel/issues

package/dist/index.css

@@ -5,7 +5,7 @@
  */
 
 :root, :host {
-  --ax-version: "7.33.5";
+  --ax-version: "7.35.0";
   --a-breakpoint-xs: 0;
   --a-breakpoint-sm: 480px;
   --a-breakpoint-sm-down: 479px;
@@ -42,7 +42,7 @@
   --a-font-weight-regular: 400;
   --a-z-index-popover: 1000;
   --a-z-index-focus: 10;
-  --a-z-index-tooltip: 3000;
+  --a-z-index-tooltip: 2147483647;
   --a-border-radius-small: 2px;
   --a-border-radius-medium: 4px;
   --a-border-radius-large: 8px;
@@ -1658,6 +1658,232 @@ body,
   }
 }
 
+/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
+
+.navds-base-alert {
+  display: grid;
+  border-radius: var(--a-border-radius-xlarge);
+  overflow: clip;
+  height: fit-content;
+
+  --__ac-base-alert-pi: var(--a-spacing-5);
+  --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
+  --__ac-base-alert-title-pb: var(--a-spacing-05);
+  --__ac-base-alert-header-max-width: 37.5rem;
+}
+
+.navds-base-alert[data-size="small"] {
+    --__ac-base-alert-pi: var(--a-spacing-4);
+    --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+    --__ac-base-alert-title-pb: var(--a-spacing-1);
+  }
+
+.navds-base-alert[data-variant="moderate"] {
+    outline: 1px solid;
+    outline-offset: -1px;
+  }
+
+.navds-base-alert[data-variant="strong"] {
+    outline: 4px solid;
+    outline-offset: -4px;
+  }
+
+.navds-base-alert[data-global="true"] {
+    border-radius: 0;
+  }
+
+.navds-base-alert[data-color="accent"] {
+  outline-color: var(--a-border-action);
+}
+
+.navds-base-alert[data-color="accent"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-action-subtle);
+      color: var(--a-blue-800);
+      border-color: var(--a-blue-200);
+    }
+
+.navds-base-alert[data-color="neutral"] {
+  outline-color: var(--a-gray-700);
+}
+
+.navds-base-alert[data-color="neutral"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-neutral-subtle);
+      color: var(--a-gray-800);
+      border-color: var(--a-gray-200);
+    }
+
+.navds-base-alert[data-color="neutral"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-neutral);
+      color: var(--a-text-on-neutral);
+    }
+
+.navds-base-alert[data-color="info"] {
+  outline-color: var(--a-border-info);
+}
+
+.navds-base-alert[data-color="info"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-info-subtle);
+      color: var(--a-lightblue-900);
+      border-color: var(--a-lightblue-200);
+    }
+
+.navds-base-alert[data-color="success"] {
+  outline-color: var(--a-border-success);
+}
+
+.navds-base-alert[data-color="success"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-success-subtle);
+      color: var(--a-green-800);
+      border-color: var(--a-green-200);
+    }
+
+.navds-base-alert[data-color="success"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-success);
+      color: var(--a-text-on-success);
+    }
+
+.navds-base-alert[data-color="warning"] {
+  outline-color: var(--a-surface-warning);
+}
+
+.navds-base-alert[data-color="warning"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="warning"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-warning);
+      color: var(--a-text-on-warning);
+    }
+
+.navds-base-alert[data-color="danger"] {
+  outline-color: var(--a-border-danger);
+}
+
+.navds-base-alert[data-color="danger"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-danger-subtle);
+      color: var(--a-red-800);
+      border-color: var(--a-red-200);
+    }
+
+.navds-base-alert[data-color="danger"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-danger);
+      color: var(--a-text-on-danger);
+    }
+
+.navds-base-alert[data-color="brand-magenta"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="brand-magenta"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert[data-color="brand-beige"] {
+  outline-color: var(--a-border-warning);
+}
+
+.navds-base-alert[data-color="brand-beige"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="brand-blue"] {
+  outline-color: var(--a-border-alt-3);
+}
+
+.navds-base-alert[data-color="brand-blue"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-3-subtle);
+      color: var(--a-deepblue-800);
+      border-color: var(--a-deepblue-200);
+    }
+
+.navds-base-alert[data-color="meta-lime"] {
+  outline-color: var(--a-border-alt-2);
+}
+
+.navds-base-alert[data-color="meta-lime"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-2-subtle);
+      color: var(--a-limegreen-900);
+      border-color: var(--a-limegreen-200);
+    }
+
+.navds-base-alert[data-color="meta-purple"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="meta-purple"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-2) var(--__ac-base-alert-pi);
+  border-bottom: 1px solid;
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__header {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert[data-variant="strong"] .navds-base-alert__header {
+    border-bottom: none;
+  }
+
+.navds-base-alert__header:only-child {
+    border-bottom: none;
+  }
+
+.navds-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--a-spacing-1);
+  display: grid;
+}
+
+.navds-base-alert__title {
+  padding-block: var(--__ac-base-alert-title-pb);
+}
+
+.navds-base-alert__content {
+  padding: var(--__ac-base-alert-content-p);
+  background-color: var(--a-bg-default);
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__content {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button {
+  margin-left: auto;
+
+  /* Moved focus-outline over wrapper outline */
+  z-index: 1;
+}
+
+.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible {
+    box-shadow: 0 0 0 3px white;
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button {
+    color: var(--a-text-on-inverted);
+  }
+
+.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button {
+  color: var(--a-text-default);
+}
+
+:is(.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button):active {
+    color: var(--a-text-on-inverted);
+  }
+
 .navds-button {
   --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
 
@@ -5732,6 +5958,52 @@ li.navds-file-item {
   }
 }
 
+.navds-inline-message {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-inline-message[data-color="info"] {
+  color: var(--a-lightblue-900);
+}
+
+.navds-inline-message[data-color="info"] .navds-inline-message__icon {
+    color: var(--a-icon-info);
+  }
+
+.navds-inline-message[data-color="success"] {
+  color: var(--a-green-900);
+}
+
+.navds-inline-message[data-color="success"] .navds-inline-message__icon {
+    color: var(--a-icon-success);
+  }
+
+.navds-inline-message[data-color="danger"] {
+  color: var(--a-red-900);
+}
+
+.navds-inline-message[data-color="danger"] .navds-inline-message__icon {
+    color: var(--a-icon-danger);
+  }
+
+.navds-inline-message[data-color="warning"] {
+  color: var(--a-orange-900);
+}
+
+.navds-inline-message[data-color="warning"] .navds-inline-message__icon {
+    color: var(--a-icon-warning);
+  }
+
+.navds-inline-message__icon {
+  font-size: 1.5rem;
+  flex: 0 0 auto;
+}
+
+.navds-inline-message[data-size="small"] .navds-inline-message__icon {
+    font-size: 1.25rem;
+  }
+
 .navds-internalheader {
   display: flex;
   align-self: stretch;

package/dist/rules/aksel-no-legacy-classes/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = void 0;
+const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
+const stylelint_1 = __importDefault(require("stylelint"));
+const ruleName = "aksel/no-legacy-classes";
+const url = "https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#aksel/no-legacy-classes";
+const prefix = "navds-";
+exports.messages = stylelint_1.default.utils.ruleMessages(ruleName, {
+    unexpected: (value) => `".${value}" no longer has any effect.\n\n` +
+        "As of Aksel version 8.0, all class names from '@navikt/ds-css' are prefixed with '.aksel-'.\n" +
+        "Since this class name starts with '.navds-', it's safe to assume that it no longer works as intended.\n" +
+        "We still discourage overriding the styling from Aksel when possible.",
+});
+const ruleFunction = () => {
+    return (postcssRoot, postcssResult) => {
+        postcssRoot.walkRules((node) => {
+            (0, postcss_selector_parser_1.default)((selectors) => {
+                selectors.walkClasses((className) => {
+                    if (!className.value.startsWith(prefix)) {
+                        return;
+                    }
+                    stylelint_1.default.utils.report({
+                        message: exports.messages.unexpected(className.value),
+                        node,
+                        result: postcssResult,
+                        ruleName,
+                        word: className.value,
+                    });
+                });
+            }).processSync(node.selector);
+        });
+    };
+};
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = exports.messages;
+ruleFunction.meta = { url };
+exports.default = ruleFunction;

package/dist/rules/aksel-no-legacy-classes/index.test.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const stylelint_test_rule_node_1 = require("stylelint-test-rule-node");
+const _1 = __importStar(require("."));
+(0, stylelint_test_rule_node_1.testRule)({
+    plugins: ["./dist/index.js"],
+    ruleName: _1.default.ruleName,
+    config: true,
+    accept: [{ code: ".foo-navds-bar {}", description: "allowed class name" }],
+    reject: [
+        {
+            code: ".foo, \n .navds-button \n .bar {}",
+            description: "selector with disallowed class name .navds-*",
+            message: _1.messages.unexpected("navds-button"),
+            line: 2,
+            endLine: 2,
+            column: 3,
+            endColumn: 15,
+        },
+    ],
+});

package/dist/rules/index.js

@@ -10,6 +10,7 @@ const aksel_design_token_no_global_override_1 = __importDefault(require("./aksel
 const aksel_no_class_override_1 = __importDefault(require("./aksel-no-class-override"));
 const aksel_no_deprecated_classes_1 = __importDefault(require("./aksel-no-deprecated-classes"));
 const aksel_no_internal_tokens_1 = __importDefault(require("./aksel-no-internal-tokens"));
+const aksel_no_legacy_classes_1 = __importDefault(require("./aksel-no-legacy-classes"));
 exports.rules = {
     "aksel/design-token-exists": aksel_design_token_exists_1.default,
     "aksel/design-token-no-global-override": aksel_design_token_no_global_override_1.default,
@@ -17,4 +18,5 @@ exports.rules = {
     "aksel/no-internal-tokens": aksel_no_internal_tokens_1.default,
     "aksel/no-class-override": aksel_no_class_override_1.default,
     "aksel/no-deprecated-classes": aksel_no_deprecated_classes_1.default,
+    "aksel/no-legacy-classes": aksel_no_legacy_classes_1.default,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.33.5",
+  "version": "7.35.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -38,8 +38,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.33.5",
-    "@navikt/ds-tokens": "^7.33.5",
+    "@navikt/ds-css": "^7.35.0",
+    "@navikt/ds-tokens": "^7.35.0",
     "concurrently": "9.2.1",
     "postcss-selector-parser": "^7.1.0",
     "postcss-value-parser": "^4.2.0",