@navikt/ds-css 1.4.4 → 1.5.0

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/chips.css +124 -0
  3. package/dist/index.css +184 -16
  4. package/index.css +1 -0
  5. package/package.json +2 -2
  6. package/tag.css +93 -14
package/index.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "button.css";
8
8
  @import "content-container.css";
9
9
  @import "chat.css";
10
+ @import "chips.css";
10
11
  @import "guide-panel.css";
11
12
  @import "form/index.css";
12
13
  @import "help-text.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "1.4.4",
3
+ "version": "1.5.0",
4
4
  "description": "Css for NAV Designsystem components",
5
5
  "author": "NAV Designsystem team",
6
6
  "keywords": [
@@ -20,7 +20,7 @@
20
20
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
21
21
  },
22
22
  "devDependencies": {
23
- "@navikt/ds-tokens": "^1.4.4",
23
+ "@navikt/ds-tokens": "^1.5.0",
24
24
  "normalize.css": "^8.0.1",
25
25
  "postcss": "^8.4.0",
26
26
  "postcss-cli": "^9.0.0",
package/tag.css CHANGED
@@ -14,38 +14,117 @@
14
14
 
15
15
  .navds-tag {
16
16
  border: 1px solid;
17
- border-color: var(--navds-tag-color-border);
18
- border-radius: var(--navds-border-radius-medium);
19
- background-color: var(--navds-tag-color-background);
17
+ border-radius: var(--navds-border-radius-small);
20
18
  display: inline-flex;
21
19
  align-items: center;
22
20
  justify-content: center;
23
- padding: 0.125rem var(--navds-spacing-3);
21
+ padding: 0.125rem var(--navds-spacing-2);
24
22
  min-height: 32px;
23
+ line-height: 1;
25
24
  }
26
25
 
27
26
  .navds-tag--small {
28
27
  min-height: 24px;
29
- padding-right: var(--navds-spacing-1);
30
- padding-left: var(--navds-spacing-1);
28
+ padding: 0 0.375rem;
29
+ }
30
+
31
+ .navds-tag--xsmall {
32
+ min-height: 20px;
33
+ padding: 0 var(--navds-spacing-1);
31
34
  }
32
35
 
33
36
  .navds-tag--error {
34
- background-color: var(--navds-tag-color-error-background);
35
- border-color: var(--navds-tag-color-error-border);
37
+ border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
38
+ background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
39
+ color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
40
+ }
41
+
42
+ .navds-tag--error-filled {
43
+ border-color: transparent;
44
+ background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
45
+ color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
36
46
  }
37
47
 
38
48
  .navds-tag--success {
39
- background-color: var(--navds-tag-color-success-background);
40
- border-color: var(--navds-tag-color-success-border);
49
+ border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
50
+ background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
51
+ color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
52
+ }
53
+
54
+ .navds-tag--success-filled {
55
+ border-color: transparent;
56
+ background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
57
+ color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
41
58
  }
42
59
 
43
60
  .navds-tag--warning {
44
- background-color: var(--navds-tag-color-warning-background);
45
- border-color: var(--navds-tag-color-warning-border);
61
+ border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
62
+ background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
63
+ color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
64
+ }
65
+
66
+ .navds-tag--warning-filled {
67
+ border-color: transparent;
68
+ background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
69
+ color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
46
70
  }
47
71
 
48
72
  .navds-tag--info {
49
- background-color: var(--navds-tag-color-info-background);
50
- border-color: var(--navds-tag-color-info-border);
73
+ border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
74
+ background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
75
+ color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
76
+ }
77
+
78
+ .navds-tag--info-filled {
79
+ border-color: transparent;
80
+ background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
81
+ color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
82
+ }
83
+
84
+ .navds-tag--neutral {
85
+ border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
86
+ background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
87
+ color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
88
+ }
89
+
90
+ .navds-tag--neutral-filled {
91
+ border-color: transparent;
92
+ background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
93
+ color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
94
+ }
95
+
96
+ .navds-tag--alt1 {
97
+ border-color: var(--ac-tag-alt1-border, var(--navds-global-color-deepblue-400));
98
+ background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-deepblue-100));
99
+ color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
100
+ }
101
+
102
+ .navds-tag--alt1-filled {
103
+ border-color: transparent;
104
+ background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-deepblue-500));
105
+ color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
106
+ }
107
+
108
+ .navds-tag--alt2 {
109
+ border-color: var(--ac-tag-alt2-border, var(--navds-global-color-purple-400));
110
+ background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-purple-100));
111
+ color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
112
+ }
113
+
114
+ .navds-tag--alt2-filled {
115
+ border-color: transparent;
116
+ background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-purple-400));
117
+ color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-white));
118
+ }
119
+
120
+ .navds-tag--alt3 {
121
+ border-color: var(--ac-tag-alt3-border, var(--navds-global-color-limegreen-500));
122
+ background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-limegreen-100));
123
+ color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
124
+ }
125
+
126
+ .navds-tag--alt3-filled {
127
+ border-color: transparent;
128
+ background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-limegreen-400));
129
+ color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-gray-900));
51
130
  }