@navikt/aksel-stylelint 3.4.0 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/deprecations.js +9 -0
- package/dist/index.css +4663 -0
- package/dist/index.js +8 -0
- package/dist/internal-tokens.json +48 -0
- package/dist/recommended.js +11 -0
- package/dist/rules/aksel-design-token-exists/index.js +72 -0
- package/dist/rules/aksel-design-token-exists/index.test.js +115 -0
- package/dist/rules/aksel-design-token-no-component-reference/index.js +49 -0
- package/dist/rules/aksel-design-token-no-component-reference/index.test.js +53 -0
- package/dist/rules/aksel-design-token-no-global-override/index.js +47 -0
- package/dist/rules/aksel-design-token-no-global-override/index.test.js +66 -0
- package/dist/rules/aksel-no-class-override/index.js +41 -0
- package/dist/rules/aksel-no-class-override/index.test.js +53 -0
- package/dist/rules/aksel-no-deprecated-classes/index.js +40 -0
- package/dist/rules/aksel-no-deprecated-classes/index.test.js +60 -0
- package/dist/rules/aksel-no-internal-tokens/index.js +56 -0
- package/dist/rules/aksel-no-internal-tokens/index.test.js +102 -0
- package/dist/rules/index.js +20 -0
- package/dist/tokens.json +395 -0
- package/dist/utils.js +115 -0
- package/package.json +6 -4
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
const jest_preset_stylelint_1 = require("jest-preset-stylelint");
|
|
27
|
+
const _1 = __importStar(require("."));
|
|
28
|
+
const deprecations_1 = require("../../deprecations");
|
|
29
|
+
(0, jest_preset_stylelint_1.getTestRule)()({
|
|
30
|
+
plugins: ["./dist/index.js"],
|
|
31
|
+
ruleName: _1.default.ruleName,
|
|
32
|
+
config: true,
|
|
33
|
+
accept: [
|
|
34
|
+
{
|
|
35
|
+
code: ".navds-foo, navdsi-bar, .baz {}",
|
|
36
|
+
description: "allowed class names",
|
|
37
|
+
// Allowed because this rule only checks deprecated class names. See also aksel/no-class-override.
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
reject: [
|
|
41
|
+
{
|
|
42
|
+
code: ".foo, \n .navdsi-deprecated-example \n .bar {}",
|
|
43
|
+
description: "selector with deprecated class name 1",
|
|
44
|
+
message: _1.messages.unexpected("navdsi-deprecated-example", deprecations_1.deprecations[0].message),
|
|
45
|
+
line: 2,
|
|
46
|
+
endLine: 2,
|
|
47
|
+
column: 3,
|
|
48
|
+
endColumn: 28,
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
code: ".foo .navdsi-other-deprecated-example \n .bar {}",
|
|
52
|
+
description: "selector with deprecated class name 2",
|
|
53
|
+
message: _1.messages.unexpected("navdsi-other-deprecated-example", deprecations_1.deprecations[0].message),
|
|
54
|
+
line: 1,
|
|
55
|
+
endLine: 1,
|
|
56
|
+
column: 7,
|
|
57
|
+
endColumn: 38,
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
});
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.messages = void 0;
|
|
7
|
+
const stylelint_1 = __importDefault(require("stylelint"));
|
|
8
|
+
const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
|
|
9
|
+
const ruleName = "aksel/no-internal-tokens";
|
|
10
|
+
const url = "https://github.com/navikt/aksel/blob/main/%40navikt/aksel-stylelint/README.md#aksel/no-internal-tokens";
|
|
11
|
+
const prefix = "--__ac-";
|
|
12
|
+
exports.messages = stylelint_1.default.utils.ruleMessages(ruleName, {
|
|
13
|
+
tokenUsed: (token, prop) => `("${token}") not allowed.\n\n` +
|
|
14
|
+
`"${token}" (inside decleration "${prop}") looks like an internal design token, ` +
|
|
15
|
+
`because it starts with "${prefix}". Internal tokens should not be used outside the design system.`,
|
|
16
|
+
tokenOverridden: (token) => `("${token}") not allowed.\n\n` +
|
|
17
|
+
`"${token}" looks like an internal design token, because it starts with "${prefix}". ` +
|
|
18
|
+
`Internal tokens should not be overridden.`,
|
|
19
|
+
});
|
|
20
|
+
const getInternalTokensUsed = (value) => {
|
|
21
|
+
const invalidValues = [];
|
|
22
|
+
(0, postcss_value_parser_1.default)(value).walk((node) => {
|
|
23
|
+
if (node.type === "word" && node.value.startsWith(prefix)) {
|
|
24
|
+
invalidValues.push(node.value);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
return invalidValues;
|
|
28
|
+
};
|
|
29
|
+
const ruleFunction = () => {
|
|
30
|
+
return (postcssRoot, postcssResult) => {
|
|
31
|
+
postcssRoot.walkDecls((node) => {
|
|
32
|
+
getInternalTokensUsed(node.value).forEach((token) => {
|
|
33
|
+
stylelint_1.default.utils.report({
|
|
34
|
+
message: exports.messages.tokenUsed(token, node.prop),
|
|
35
|
+
node,
|
|
36
|
+
result: postcssResult,
|
|
37
|
+
ruleName,
|
|
38
|
+
word: token,
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
const isTokenOverride = node.prop.startsWith(prefix);
|
|
42
|
+
if (isTokenOverride) {
|
|
43
|
+
stylelint_1.default.utils.report({
|
|
44
|
+
message: exports.messages.tokenOverridden(node.prop),
|
|
45
|
+
node,
|
|
46
|
+
result: postcssResult,
|
|
47
|
+
ruleName,
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
ruleFunction.ruleName = ruleName;
|
|
54
|
+
ruleFunction.messages = {};
|
|
55
|
+
ruleFunction.meta = { url };
|
|
56
|
+
exports.default = ruleFunction;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
const jest_preset_stylelint_1 = require("jest-preset-stylelint");
|
|
27
|
+
const _1 = __importStar(require("."));
|
|
28
|
+
(0, jest_preset_stylelint_1.getTestRule)()({
|
|
29
|
+
plugins: ["./dist/index.js"],
|
|
30
|
+
ruleName: _1.default.ruleName,
|
|
31
|
+
config: true,
|
|
32
|
+
accept: [
|
|
33
|
+
{
|
|
34
|
+
code: ".foo { --bar--__ac-baz: 1px }",
|
|
35
|
+
description: "non-internal token defined",
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
code: ".foo { font-size: var(--bar--__ac-baz) }",
|
|
39
|
+
description: "non-internal token used",
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
reject: [
|
|
43
|
+
{
|
|
44
|
+
code: ".foo { --__ac-bar: 1px; }",
|
|
45
|
+
description: "internal token overridden",
|
|
46
|
+
message: _1.messages.tokenOverridden("--__ac-bar"),
|
|
47
|
+
line: 1,
|
|
48
|
+
endLine: 1,
|
|
49
|
+
column: 8,
|
|
50
|
+
endColumn: 24,
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
code: ".foo { color: var(--__ac-bar) }",
|
|
54
|
+
description: "one internal token used",
|
|
55
|
+
message: _1.messages.tokenUsed("--__ac-bar", "color"),
|
|
56
|
+
line: 1,
|
|
57
|
+
endLine: 1,
|
|
58
|
+
column: 19,
|
|
59
|
+
endColumn: 29,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
code: ".foo { width: var(--__ac-bar, --__ac-baz) }",
|
|
63
|
+
description: "two internal tokens used in one var()",
|
|
64
|
+
warnings: [
|
|
65
|
+
{
|
|
66
|
+
message: _1.messages.tokenUsed("--__ac-bar", "width"),
|
|
67
|
+
line: 1,
|
|
68
|
+
endLine: 1,
|
|
69
|
+
column: 19,
|
|
70
|
+
endColumn: 29,
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
message: _1.messages.tokenUsed("--__ac-baz", "width"),
|
|
74
|
+
line: 1,
|
|
75
|
+
endLine: 1,
|
|
76
|
+
column: 31,
|
|
77
|
+
endColumn: 41,
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
code: ".foo { padding: var(--__ac-bar) var(--__ac-baz); }",
|
|
83
|
+
description: "two internal tokens used as separate vars",
|
|
84
|
+
warnings: [
|
|
85
|
+
{
|
|
86
|
+
message: _1.messages.tokenUsed("--__ac-bar", "padding"),
|
|
87
|
+
line: 1,
|
|
88
|
+
endLine: 1,
|
|
89
|
+
column: 21,
|
|
90
|
+
endColumn: 31,
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
message: _1.messages.tokenUsed("--__ac-baz", "padding"),
|
|
94
|
+
line: 1,
|
|
95
|
+
endLine: 1,
|
|
96
|
+
column: 37,
|
|
97
|
+
endColumn: 47,
|
|
98
|
+
},
|
|
99
|
+
],
|
|
100
|
+
},
|
|
101
|
+
],
|
|
102
|
+
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.rules = void 0;
|
|
7
|
+
const aksel_design_token_exists_1 = __importDefault(require("./aksel-design-token-exists"));
|
|
8
|
+
const aksel_no_internal_tokens_1 = __importDefault(require("./aksel-no-internal-tokens"));
|
|
9
|
+
const aksel_no_class_override_1 = __importDefault(require("./aksel-no-class-override"));
|
|
10
|
+
const aksel_no_deprecated_classes_1 = __importDefault(require("./aksel-no-deprecated-classes"));
|
|
11
|
+
const aksel_design_token_no_global_override_1 = __importDefault(require("./aksel-design-token-no-global-override"));
|
|
12
|
+
const aksel_design_token_no_component_reference_1 = __importDefault(require("./aksel-design-token-no-component-reference"));
|
|
13
|
+
exports.rules = {
|
|
14
|
+
"aksel/design-token-exists": aksel_design_token_exists_1.default,
|
|
15
|
+
"aksel/design-token-no-global-override": aksel_design_token_no_global_override_1.default,
|
|
16
|
+
"aksel/design-token-no-component-reference": aksel_design_token_no_component_reference_1.default,
|
|
17
|
+
"aksel/no-internal-tokens": aksel_no_internal_tokens_1.default,
|
|
18
|
+
"aksel/no-class-override": aksel_no_class_override_1.default,
|
|
19
|
+
"aksel/no-deprecated-classes": aksel_no_deprecated_classes_1.default,
|
|
20
|
+
};
|
package/dist/tokens.json
ADDED
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
{
|
|
2
|
+
"alert": {
|
|
3
|
+
"--ac-alert-error-border": "--a-border-danger",
|
|
4
|
+
"--ac-alert-error-bg": "--a-surface-danger-subtle",
|
|
5
|
+
"--ac-alert-icon-error-color": "--a-icon-danger",
|
|
6
|
+
"--ac-alert-warning-border": "--a-border-warning",
|
|
7
|
+
"--ac-alert-warning-bg": "--a-surface-warning-subtle",
|
|
8
|
+
"--ac-alert-icon-warning-color": "--a-icon-warning",
|
|
9
|
+
"--ac-alert-info-border": "--a-border-info",
|
|
10
|
+
"--ac-alert-info-bg": "--a-surface-info-subtle",
|
|
11
|
+
"--ac-alert-icon-info-color": "--a-icon-info",
|
|
12
|
+
"--ac-alert-success-border": "--a-border-success",
|
|
13
|
+
"--ac-alert-success-bg": "--a-surface-success-subtle",
|
|
14
|
+
"--ac-alert-icon-success-color": "--a-icon-success"
|
|
15
|
+
},
|
|
16
|
+
"accordion": {
|
|
17
|
+
"--ac-accordion-header-bg": "--a-surface-transparent",
|
|
18
|
+
"--ac-accordion-header-bg-hover": "--a-surface-hover",
|
|
19
|
+
"--ac-accordion-header-text-hover": "inherit",
|
|
20
|
+
"--ac-accordion-header-border": "--a-border-divider",
|
|
21
|
+
"--ac-accordion-item-bg-open": "--a-surface-action-subtle",
|
|
22
|
+
"--ac-accordion-neutral-item-bg-open": "--a-surface-neutral-subtle",
|
|
23
|
+
"--ac-accordion-header-icon-bg-hover": "--a-surface-neutral-subtle-hover"
|
|
24
|
+
},
|
|
25
|
+
"button": {
|
|
26
|
+
"--ac-button-border-radius": "--a-border-radius-medium",
|
|
27
|
+
"--ac-button-padding": "--a-spacing-3 --a-spacing-5",
|
|
28
|
+
"--ac-button-padding-small": "--a-spacing-1 --a-spacing-3",
|
|
29
|
+
"--ac-button-padding-xsmall": "--a-spacing-05 --a-spacing-2",
|
|
30
|
+
"--ac-button-padding-icon-only": "--a-spacing-3",
|
|
31
|
+
"--ac-button-padding-icon-only-small": "--a-spacing-1",
|
|
32
|
+
"--ac-button-padding-icon-only-xsmall": "--a-spacing-05",
|
|
33
|
+
"--ac-button-primary-bg": "--a-surface-action",
|
|
34
|
+
"--ac-button-primary-text": "--a-text-on-action",
|
|
35
|
+
"--ac-button-primary-hover-bg": "--a-surface-action-hover",
|
|
36
|
+
"--ac-button-primary-active-bg": "--a-surface-action-active",
|
|
37
|
+
"--ac-button-primary-focus-border": "--a-surface-default",
|
|
38
|
+
"--ac-button-secondary-text": "--a-text-action",
|
|
39
|
+
"--ac-button-secondary-bg": "--a-surface-transparent",
|
|
40
|
+
"--ac-button-secondary-border": "--a-border-action",
|
|
41
|
+
"--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
|
|
42
|
+
"--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
|
|
43
|
+
"--ac-button-secondary-focus-border": "--a-border-action",
|
|
44
|
+
"--ac-button-secondary-active-text": "--a-text-on-action",
|
|
45
|
+
"--ac-button-secondary-active-bg": "--a-surface-action-active",
|
|
46
|
+
"--ac-button-secondary-active-focus-border": "--a-surface-default",
|
|
47
|
+
"--ac-button-tertiary-text": "--a-text-action",
|
|
48
|
+
"--ac-button-tertiary-bg": "--a-surface-transparent",
|
|
49
|
+
"--ac-button-tertiary-hover-text": "--a-text-action-on-action-subtle",
|
|
50
|
+
"--ac-button-tertiary-hover-bg": "--a-surface-action-subtle-hover",
|
|
51
|
+
"--ac-button-tertiary-focus-border": "--a-border-action",
|
|
52
|
+
"--ac-button-tertiary-active-text": "--a-text-on-action",
|
|
53
|
+
"--ac-button-tertiary-active-bg": "--a-surface-action-active",
|
|
54
|
+
"--ac-button-tertiary-active-hover-bg": "--a-surface-action-active",
|
|
55
|
+
"--ac-button-danger-bg": "--a-surface-danger",
|
|
56
|
+
"--ac-button-danger-text": "--a-text-on-danger",
|
|
57
|
+
"--ac-button-danger-hover-bg": "--a-surface-danger-hover",
|
|
58
|
+
"--ac-button-danger-active-bg": "--a-surface-danger-active",
|
|
59
|
+
"--ac-button-loader-stroke": "currentColor",
|
|
60
|
+
"--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
|
|
61
|
+
"--ac-button-primary-neutral-bg": "--a-surface-neutral",
|
|
62
|
+
"--ac-button-primary-neutral-text": "--a-text-on-neutral",
|
|
63
|
+
"--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
|
|
64
|
+
"--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
|
|
65
|
+
"--ac-button-primary-neutral-focus-border": "--a-surface-default",
|
|
66
|
+
"--ac-button-secondary-neutral-text": "--a-text-default",
|
|
67
|
+
"--ac-button-secondary-neutral-bg": "--a-surface-transparent",
|
|
68
|
+
"--ac-button-secondary-neutral-border": "--a-border-strong",
|
|
69
|
+
"--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
70
|
+
"--ac-button-secondary-neutral-focus-border": "--a-border-stron",
|
|
71
|
+
"--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
|
|
72
|
+
"--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
|
|
73
|
+
"--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
|
|
74
|
+
"--ac-button-tertiary-neutral-text": "--a-text-default",
|
|
75
|
+
"--ac-button-tertiary-neutral-hover-text": "--a-text-default",
|
|
76
|
+
"--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
77
|
+
"--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
|
|
78
|
+
"--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
|
|
79
|
+
"--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
|
|
80
|
+
"--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
|
|
81
|
+
},
|
|
82
|
+
"chat": {
|
|
83
|
+
"--ac-chat-avatar-bg": "--a-bg-subtle",
|
|
84
|
+
"--ac-chat-avatar-color": "--a-text-default",
|
|
85
|
+
"--ac-chat-bubble-bg": "--a-bg-subtle",
|
|
86
|
+
"--ac-chat-top-text": "--a-text-default"
|
|
87
|
+
},
|
|
88
|
+
"chips": {
|
|
89
|
+
"--ac-chip-toggle-border": "--a-border-default",
|
|
90
|
+
"--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
|
|
91
|
+
"--ac-chip-toggle-text": "--a-text-default",
|
|
92
|
+
"--ac-chip-toggle-hover-border": "--a-border-strong",
|
|
93
|
+
"--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
94
|
+
"--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
|
|
95
|
+
"--ac-chip-toggle-pressed-text": "--a-text-on-action",
|
|
96
|
+
"--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
|
|
97
|
+
"--ac-chip-toggle-focus": "--a-border-focus",
|
|
98
|
+
"--ac-chip-removable-action-bg": "--a-surface-action-selected",
|
|
99
|
+
"--ac-chip-removable-action-text": "--a-text-on-action",
|
|
100
|
+
"--ac-chip-removable-neutral-bg": "--a-surface-neutral-subtle",
|
|
101
|
+
"--ac-chip-removable-neutral-text": "--a-text-default",
|
|
102
|
+
"--ac-chip-removable-neutral-border": "--a-border-default",
|
|
103
|
+
"--ac-chip-removable-action-hover-bg": "--a-surface-action-selected-hover",
|
|
104
|
+
"--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
105
|
+
"--ac-chip-removable-neutral-hover-border": "--a-border-strong"
|
|
106
|
+
},
|
|
107
|
+
"copybutton": {
|
|
108
|
+
"--ac-copybutton-border-radius": "--a-border-radius-medium",
|
|
109
|
+
"--ac-copybutton-action-text": "--a-text-action",
|
|
110
|
+
"--ac-copybutton-action-bg": "--a-surface-transparent",
|
|
111
|
+
"--ac-copybutton-action-hover-text": "--a-text-action",
|
|
112
|
+
"--ac-copybutton-action-hover-bg": "--a-surface-hover",
|
|
113
|
+
"--ac-copybutton-action-active-text": "--a-icon-success",
|
|
114
|
+
"--ac-copybutton-neutral-text": "--a-text-subtle",
|
|
115
|
+
"--ac-copybutton-neutral-bg": "--a-surface-transparent",
|
|
116
|
+
"--ac-copybutton-neutral-hover-text": "--a-text-default",
|
|
117
|
+
"--ac-copybutton-neutral-hover-bg": "--a-surface-hover",
|
|
118
|
+
"--ac-copybutton-neutral-active-text": "--a-text-default",
|
|
119
|
+
"--ac-copybutton-animation": "akselCopyButtonAnimation 0.4s linear"
|
|
120
|
+
},
|
|
121
|
+
"date": {
|
|
122
|
+
"--ac-date-middle-text": "--a-text-on-action",
|
|
123
|
+
"--ac-date-middle-bg": "--a-surface-action-selected",
|
|
124
|
+
"--ac-date-week-text": "--a-text-on-neutral",
|
|
125
|
+
"--ac-date-week-bg": "--a-surface-neutral",
|
|
126
|
+
"--ac-date-selected-text": "--a-text-on-action",
|
|
127
|
+
"--ac-date-selected-bg": "--a-surface-action-selected",
|
|
128
|
+
"--ac-date-disabled-bg": "--a-surface-neutral-subtle",
|
|
129
|
+
"--ac-date-disabled-text": "--a-text-subtle",
|
|
130
|
+
"--ac-date-hover-bg": "--a-surface-action-subtle-hover",
|
|
131
|
+
"--ac-date-today-border": "--a-border-action-selected",
|
|
132
|
+
"--ac-date-caption-text": "--a-text-default",
|
|
133
|
+
"--ac-date-input-error-border": "--a-border-danger",
|
|
134
|
+
"--ac-date-input-button-text": "--a-text-default",
|
|
135
|
+
"--ac-date-input-button-hover-text": "--a-text-action-on-action-subtle",
|
|
136
|
+
"--ac-date-input-button-hover-bg": "--a-surface-action-subtle-hover"
|
|
137
|
+
},
|
|
138
|
+
"expansioncard": {
|
|
139
|
+
"--ac-expansioncard-bg": "--a-surface-default",
|
|
140
|
+
"--ac-expansioncard-header-bg": "--a-surface-transparent",
|
|
141
|
+
"--ac-expansioncard-header-bg-hover": "--a-surface-hover",
|
|
142
|
+
"--ac-expansioncard-header-open-bg": "--a-surface-transparent",
|
|
143
|
+
"--ac-expansioncard-border-color": "--a-border-default",
|
|
144
|
+
"--ac-expansioncard-border-open-color": "--a-border-default",
|
|
145
|
+
"--ac-expansioncard-border-radius": "--a-border-radius-large",
|
|
146
|
+
"--ac-expansioncard-button-border-radius": "--a-border-radius-medium",
|
|
147
|
+
"--ac-expansioncard-border-hover-color": "--a-border-strong"
|
|
148
|
+
},
|
|
149
|
+
"guidepanel": {
|
|
150
|
+
"--ac-guide-panel-bg": "--a-surface-default",
|
|
151
|
+
"--ac-guide-panel-border": "--a-border-action",
|
|
152
|
+
"--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
|
|
153
|
+
},
|
|
154
|
+
"helptext": {
|
|
155
|
+
"--ac-help-text-button-color": "--a-surface-action",
|
|
156
|
+
"--ac-help-text-popover-bg": "--a-surface-info-subtle"
|
|
157
|
+
},
|
|
158
|
+
"linkpanel": {
|
|
159
|
+
"--ac-link-panel-text": "--a-text-default",
|
|
160
|
+
"--ac-link-panel-hover-text": "--a-text-action",
|
|
161
|
+
"--ac-link-panel-hover-border": "--a-border-action"
|
|
162
|
+
},
|
|
163
|
+
"link": {
|
|
164
|
+
"--ac-link-text": "--a-text-action",
|
|
165
|
+
"--ac-link-focus-text": "--a-text-on-action",
|
|
166
|
+
"--ac-link-focus-bg": "--a-border-focus",
|
|
167
|
+
"--ac-link-focus-border": "--a-border-focus",
|
|
168
|
+
"--ac-link-active-text": "--a-text-on-action",
|
|
169
|
+
"--ac-link-active-bg": "--a-border-focus",
|
|
170
|
+
"--ac-link-active-border": "--a-border-focus"
|
|
171
|
+
},
|
|
172
|
+
"list": {
|
|
173
|
+
"--ac-list-marker-ul-color": "--ac-list-marker-color",
|
|
174
|
+
"--ac-list-marker-icon-color": "--ac-list-marker-color",
|
|
175
|
+
"--ac-list-marker-ol-color": "--ac-list-marker-color",
|
|
176
|
+
"--ac-list-marker-color": "--a-icon-default"
|
|
177
|
+
},
|
|
178
|
+
"loader": {
|
|
179
|
+
"--ac-loader-stroke": "--a-border-default",
|
|
180
|
+
"--ac-loader-stroke-bg": "--a-surface-active",
|
|
181
|
+
"--ac-loader-neutral-stroke": "--a-border-default",
|
|
182
|
+
"--ac-loader-interaction-stroke": "--a-border-action",
|
|
183
|
+
"--ac-loader-inverted-stroke": "--a-border-on-inverted",
|
|
184
|
+
"--ac-loader-inverted-stroke-bg": "--a-border-on-inverted-subtle"
|
|
185
|
+
},
|
|
186
|
+
"modal": {
|
|
187
|
+
"--ac-modal-bg": "--a-surface-default",
|
|
188
|
+
"--ac-modal-backdrop": "--a-surface-backdrop"
|
|
189
|
+
},
|
|
190
|
+
"pagination": {
|
|
191
|
+
"--ac-pagination-text": "--a-text-default",
|
|
192
|
+
"--ac-pagination-selected-bg": "--a-surface-action-selected",
|
|
193
|
+
"--ac-pagination-selected-text": "--a-text-on-action"
|
|
194
|
+
},
|
|
195
|
+
"panel": {
|
|
196
|
+
"--ac-panel-bg": "--a-surface-default",
|
|
197
|
+
"--ac-panel-border": "--a-border-default"
|
|
198
|
+
},
|
|
199
|
+
"popover": {
|
|
200
|
+
"--ac-popover-bg": "--a-surface-default",
|
|
201
|
+
"--ac-popover-border": "--a-border-default"
|
|
202
|
+
},
|
|
203
|
+
"readmore": {
|
|
204
|
+
"--ac-read-more-text": "--a-text-action",
|
|
205
|
+
"--ac-read-more-hover-bg": "--a-surface-hover",
|
|
206
|
+
"--ac-read-more-active-bg": "--a-surface-active",
|
|
207
|
+
"--ac-read-more-line": "--a-border-divider"
|
|
208
|
+
},
|
|
209
|
+
"stepper": {
|
|
210
|
+
"--ac-stepper-text": "--a-surface-action",
|
|
211
|
+
"--ac-stepper-line": "--a-border-default",
|
|
212
|
+
"--ac-stepper-line-completed": "--a-border-selected",
|
|
213
|
+
"--ac-stepper-non-interactive": "--a-text-subtle",
|
|
214
|
+
"--ac-stepper-active": "--a-text-action-selected",
|
|
215
|
+
"--ac-stepper-active-bg": "--a-surface-action-selected",
|
|
216
|
+
"--ac-stepper-active-border": "--a-border-action-selected",
|
|
217
|
+
"--ac-stepper-active-text": "--a-text-on-action",
|
|
218
|
+
"--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
|
|
219
|
+
"--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
|
|
220
|
+
"--ac-stepper-non-interactive-line-completed": "--a-border-strong",
|
|
221
|
+
"--ac-stepper-non-interactive-active": "--a-text-default",
|
|
222
|
+
"--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
|
|
223
|
+
"--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
|
|
224
|
+
"--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
|
|
225
|
+
"--ac-stepper-active-completed": "--a-text-action-selected",
|
|
226
|
+
"--ac-stepper-non-interactive-active-completed": "--a-text-default"
|
|
227
|
+
},
|
|
228
|
+
"table": {
|
|
229
|
+
"--ac-table-row-hover": "--a-bg-subtle",
|
|
230
|
+
"--ac-table-row-selected": "--a-surface-action-subtle",
|
|
231
|
+
"--ac-table-row-selected-hover": "--a-surface-action-subtle-hover",
|
|
232
|
+
"--ac-table-row-zebra": "--a-surface-subtle",
|
|
233
|
+
"--ac-table-row-border": "--a-border-default",
|
|
234
|
+
"--ac-table-row-hover-border": "--a-border-strong",
|
|
235
|
+
"--ac-table-sort-button-text": "--a-text-action",
|
|
236
|
+
"--ac-table-sort-button-hover-bg": "--a-bg-subtle",
|
|
237
|
+
"--ac-table-sort-button-sorted-bg": "--a-surface-selected",
|
|
238
|
+
"--ac-table-sort-button-sorted-text": "--a-text-action-on-action-subtle"
|
|
239
|
+
},
|
|
240
|
+
"tabs": {
|
|
241
|
+
"--ac-tabs-border": "--a-border-divider",
|
|
242
|
+
"--ac-tabs-text": "--a-text-default",
|
|
243
|
+
"--ac-tabs-hover-border": "--a-border-subtle-hover",
|
|
244
|
+
"--ac-tabs-selected-border": "--a-border-action",
|
|
245
|
+
"--ac-tabs-selected-text": "--a-text-default",
|
|
246
|
+
"--ac-tabs-focus-text": "--a-text-default"
|
|
247
|
+
},
|
|
248
|
+
"tag": {
|
|
249
|
+
"--ac-tag-error-border": "--a-border-danger",
|
|
250
|
+
"--ac-tag-error-bg": "--a-surface-danger-subtle",
|
|
251
|
+
"--ac-tag-error-text": "--a-text-default",
|
|
252
|
+
"--ac-tag-error-filled-bg": "--a-surface-danger",
|
|
253
|
+
"--ac-tag-error-filled-text": "--a-text-on-danger",
|
|
254
|
+
"--ac-tag-error-moderate-bg": "--a-surface-danger-moderate",
|
|
255
|
+
"--ac-tag-error-moderate-text": "--a-text-default",
|
|
256
|
+
"--ac-tag-success-border": "--a-border-success",
|
|
257
|
+
"--ac-tag-success-bg": "--a-surface-success-subtle",
|
|
258
|
+
"--ac-tag-success-text": "--a-text-default",
|
|
259
|
+
"--ac-tag-success-filled-bg": "--a-surface-success",
|
|
260
|
+
"--ac-tag-success-filled-text": "--a-text-on-success",
|
|
261
|
+
"--ac-tag-success-moderate-bg": "--a-surface-success-moderate",
|
|
262
|
+
"--ac-tag-success-moderate-text": "--a-text-default",
|
|
263
|
+
"--ac-tag-warning-border": "--a-border-warning",
|
|
264
|
+
"--ac-tag-warning-bg": "--a-surface-warning-subtle",
|
|
265
|
+
"--ac-tag-warning-text": "--a-text-default",
|
|
266
|
+
"--ac-tag-warning-filled-bg": "--a-surface-warning",
|
|
267
|
+
"--ac-tag-warning-filled-text": "--a-text-on-warning",
|
|
268
|
+
"--ac-tag-warning-moderate-bg": "--a-surface-warning-moderate",
|
|
269
|
+
"--ac-tag-warning-moderate-text": "--a-text-default",
|
|
270
|
+
"--ac-tag-info-border": "--a-border-info",
|
|
271
|
+
"--ac-tag-info-bg": "--a-surface-info-subtle",
|
|
272
|
+
"--ac-tag-info-text": "--a-text-default",
|
|
273
|
+
"--ac-tag-info-filled-bg": "--a-surface-info",
|
|
274
|
+
"--ac-tag-info-filled-text": "--a-text-on-info",
|
|
275
|
+
"--ac-tag-info-moderate-bg": "--a-surface-info-moderate",
|
|
276
|
+
"--ac-tag-info-moderate-text": "--a-text-default",
|
|
277
|
+
"--ac-tag-neutral-border": "--a-border-default",
|
|
278
|
+
"--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
|
|
279
|
+
"--ac-tag-neutral-text": "--a-text-default",
|
|
280
|
+
"--ac-tag-neutral-filled-bg": "--a-surface-neutral",
|
|
281
|
+
"--ac-tag-neutral-filled-text": "--a-text-on-neutral",
|
|
282
|
+
"--ac-tag-neutral-moderate-bg": "--a-surface-neutral-moderate",
|
|
283
|
+
"--ac-tag-neutral-moderate-text": "--a-text-default",
|
|
284
|
+
"--ac-tag-alt-1-border": "--a-border-alt-1",
|
|
285
|
+
"--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
|
|
286
|
+
"--ac-tag-alt-1-text": "--a-text-default",
|
|
287
|
+
"--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
|
|
288
|
+
"--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
|
|
289
|
+
"--ac-tag-alt-1-moderate-bg": "--a-surface-alt-1-moderate",
|
|
290
|
+
"--ac-tag-alt-1-moderate-text": "--a-text-default",
|
|
291
|
+
"--ac-tag-alt-2-border": "--a-border-alt-2",
|
|
292
|
+
"--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
|
|
293
|
+
"--ac-tag-alt-2-text": "--a-text-default",
|
|
294
|
+
"--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
|
|
295
|
+
"--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
|
|
296
|
+
"--ac-tag-alt-2-moderate-bg": "--a-surface-alt-2-moderate",
|
|
297
|
+
"--ac-tag-alt-2-moderate-text": "--a-text-default",
|
|
298
|
+
"--ac-tag-alt-3-border": "--a-border-alt-3",
|
|
299
|
+
"--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
|
|
300
|
+
"--ac-tag-alt-3-text": "--a-text-default",
|
|
301
|
+
"--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
|
|
302
|
+
"--ac-tag-alt-3-filled-text": "--a-text-on-alt-3",
|
|
303
|
+
"--ac-tag-alt-3-moderate-bg": "--a-surface-alt-3-moderate",
|
|
304
|
+
"--ac-tag-alt-3-moderate-text": "--a-text-default"
|
|
305
|
+
},
|
|
306
|
+
"togglegroup": {
|
|
307
|
+
"--ac-toggle-group-bg": "--a-surface-transparent",
|
|
308
|
+
"--ac-toggle-group-border": "--a-border-default",
|
|
309
|
+
"--ac-toggle-group-button-bg": "--a-surface-transparent",
|
|
310
|
+
"--ac-toggle-group-button-text": "--a-text-default",
|
|
311
|
+
"--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
|
|
312
|
+
"--ac-toggle-group-button-hover-text": "--a-text-default",
|
|
313
|
+
"--ac-toggle-group-selected-bg": "--a-surface-action-selected",
|
|
314
|
+
"--ac-toggle-group-selected-text": "--a-text-on-action",
|
|
315
|
+
"--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
|
|
316
|
+
"--ac-toggle-group-button-neutral-text": "--a-text-default",
|
|
317
|
+
"--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
318
|
+
"--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
|
|
319
|
+
"--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected",
|
|
320
|
+
"--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
|
|
321
|
+
},
|
|
322
|
+
"tooltip": {
|
|
323
|
+
"--ac-tooltip-bg": "--a-surface-inverted",
|
|
324
|
+
"--ac-tooltip-text": "--a-text-on-inverted",
|
|
325
|
+
"--ac-tooltip-key-bg": "--a-surface-neutral",
|
|
326
|
+
"--ac-tooltip-key-text": "--a-text-on-inverted"
|
|
327
|
+
},
|
|
328
|
+
"typography": {
|
|
329
|
+
"--ac-typo-error-text": "--a-text-danger"
|
|
330
|
+
},
|
|
331
|
+
"confirmationpanel": {
|
|
332
|
+
"--ac-confirmation-panel-border": "--a-border-warning",
|
|
333
|
+
"--ac-confirmation-panel-bg": "--a-surface-warning-subtle",
|
|
334
|
+
"--ac-confirmation-panel-checked-border": "--a-border-success",
|
|
335
|
+
"--ac-confirmation-panel-checked-bg": "--a-surface-success-subtle",
|
|
336
|
+
"--ac-confirmation-panel-error-border": "--a-border-danger",
|
|
337
|
+
"--ac-confirmation-panel-error-bg": "--a-surface-danger-subtle"
|
|
338
|
+
},
|
|
339
|
+
"errorsummary": {
|
|
340
|
+
"--ac-error-summary-bg": "--a-surface-default",
|
|
341
|
+
"--ac-error-summary-border": "--a-border-danger",
|
|
342
|
+
"--ac-error-summary-list-dot": "--a-text-action"
|
|
343
|
+
},
|
|
344
|
+
"checkbox-radio": {
|
|
345
|
+
"--ac-radio-checkbox-bg": "--a-surface-default",
|
|
346
|
+
"--ac-radio-checkbox-border": "--a-border-default",
|
|
347
|
+
"--ac-radio-checkbox-action": "--a-surface-action",
|
|
348
|
+
"--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
|
|
349
|
+
"--ac-radio-checkbox-error-border": "--a-border-danger",
|
|
350
|
+
"--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
|
|
351
|
+
},
|
|
352
|
+
"search": {
|
|
353
|
+
"--ac-search-button-border": "--a-border-default",
|
|
354
|
+
"--ac-search-button-border-hover": "--a-border-action",
|
|
355
|
+
"--ac-search-clear-icon": "--a-text-default",
|
|
356
|
+
"--ac-search-clear-icon-hover": "--a-text-action",
|
|
357
|
+
"--ac-search-button-focus-active-border": "--a-surface-default",
|
|
358
|
+
"--ac-search-error-border": "--a-border-danger"
|
|
359
|
+
},
|
|
360
|
+
"select": {
|
|
361
|
+
"--ac-select-bg": "--a-surface-default",
|
|
362
|
+
"--ac-select-text": "--a-text-default",
|
|
363
|
+
"--ac-select-border": "--a-border-default",
|
|
364
|
+
"--ac-select-hover-bg": "--a-border-action",
|
|
365
|
+
"--ac-select-error-border": "--a-surface-danger"
|
|
366
|
+
},
|
|
367
|
+
"switch": {
|
|
368
|
+
"--ac-switch-action": "--a-surface-action",
|
|
369
|
+
"--ac-switch-bg": "--a-surface-neutral",
|
|
370
|
+
"--ac-switch-checked-bg": "--a-surface-success",
|
|
371
|
+
"--ac-switch-hover-bg": "--a-surface-neutral-hover",
|
|
372
|
+
"--ac-switch-checked-hover-bg": "--a-surface-success-hover",
|
|
373
|
+
"--ac-switch-thumb-bg": "--a-surface-default",
|
|
374
|
+
"--ac-switch-thumb-icon": "--a-icon-subtle",
|
|
375
|
+
"--ac-switch-thumb-icon-checked": "--a-icon-success"
|
|
376
|
+
},
|
|
377
|
+
"textfield": {
|
|
378
|
+
"--ac-textfield-bg": "--a-surface-default",
|
|
379
|
+
"--ac-textfield-border": "--a-border-default",
|
|
380
|
+
"--ac-textfield-text": "--a-text-default",
|
|
381
|
+
"--ac-textfield-placeholder": "--a-text-subtle",
|
|
382
|
+
"--ac-textfield-hover-border": "--a-border-action",
|
|
383
|
+
"--ac-textfield-error-border": "--a-border-danger"
|
|
384
|
+
},
|
|
385
|
+
"textarea": {
|
|
386
|
+
"--ac-textarea-bg": "--a-surface-default",
|
|
387
|
+
"--ac-textarea-border": "--a-border-default",
|
|
388
|
+
"--ac-textarea-text": "--a-text-default",
|
|
389
|
+
"--ac-textarea-placeholder": "--a-text-subtle",
|
|
390
|
+
"--ac-textarea-hover-border": "--a-border-action",
|
|
391
|
+
"--ac-textarea-counter-text": "--a-text-subtle",
|
|
392
|
+
"--ac-textarea-counter-error-text": "--a-text-danger",
|
|
393
|
+
"--ac-textarea-error-border": "--a-border-danger"
|
|
394
|
+
}
|
|
395
|
+
}
|