@navikt/ds-css 0.16.12 → 0.16.15

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 (8) hide show
  1. package/baseline/baseline.css +13 -1
  2. package/button.css +35 -1
  3. package/dist/index.css +723 -658
  4. package/form/search.css +47 -14
  5. package/form/text-field.css +21 -3
  6. package/index.css +1 -0
  7. package/package.json +5 -4
  8. package/tooltip.css +56 -0
package/form/search.css CHANGED
@@ -1,8 +1,18 @@
1
- :root {
1
+ :root,
2
+ [data-theme="light"] {
3
+ --navds-search-color-text: var(--navds-semantic-color-text);
2
4
  --navds-search-color-border: var(--navds-semantic-color-border);
3
5
  --navds-search-color-border-hover: var(
4
6
  --navds-semantic-color-interaction-primary
5
7
  );
8
+ --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
9
+ }
10
+
11
+ [data-theme="dark"] {
12
+ --navds-search-color-text: var(--navds-semantic-color-text-inverted);
13
+ --navds-search-color-border: var(--navds-semantic-color-border-inverted);
14
+ --navds-search-color-border-hover: var(--navds-global-color-blue-200);
15
+ --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
6
16
  }
7
17
 
8
18
  .navds-search {
@@ -22,22 +32,45 @@
22
32
  }
23
33
 
24
34
  .navds-search__input {
25
- padding-right: var(--navds-spacing-12);
26
- border-top-right-radius: 0;
27
- border-bottom-right-radius: 0;
35
+ padding-right: var(--navds-spacing-10);
28
36
  }
29
37
 
30
38
  .navds-form-field--small .navds-search__input {
31
- min-height: 32px;
32
- padding: 0.15rem;
33
39
  padding-right: var(--navds-spacing-8);
34
40
  }
35
41
 
42
+ .navds-search__input--simple {
43
+ padding-left: var(--navds-spacing-11);
44
+ }
45
+
46
+ .navds-form-field--small .navds-search__input--simple {
47
+ padding-left: var(--navds-spacing-7);
48
+ }
49
+
50
+ .navds-search__input:not(.navds-search__input--simple) {
51
+ border-top-right-radius: 0;
52
+ border-bottom-right-radius: 0;
53
+ }
54
+
55
+ .navds-search__search-icon {
56
+ position: absolute;
57
+ left: var(--navds-spacing-3);
58
+ top: 50%;
59
+ transform: translateY(-50%);
60
+ pointer-events: none;
61
+ font-size: 1.5rem;
62
+ }
63
+
64
+ .navds-form-field--small .navds-search__search-icon {
65
+ left: var(--navds-spacing-2);
66
+ font-size: 1rem;
67
+ }
68
+
36
69
  .navds-search__button-clear {
37
70
  position: absolute;
38
71
  right: 0.75rem;
39
72
  border-radius: var(--navds-border-radius-medium);
40
- color: var(--navds-semantic-color-text);
73
+ color: var(--navds-search-color-text);
41
74
  height: 32px;
42
75
  width: 32px;
43
76
  top: 50%;
@@ -59,7 +92,7 @@
59
92
  }
60
93
 
61
94
  .navds-search__button-clear:hover {
62
- color: var(--navds-global-color-blue-500);
95
+ color: var(--navds-search-color-clear-hover);
63
96
  }
64
97
 
65
98
  .navds-search__button-clear:focus {
@@ -84,13 +117,13 @@
84
117
  min-width: 40px;
85
118
  }
86
119
 
87
- .navds-search__button-search.navds-button--tertiary {
120
+ .navds-search__button-search.navds-button--secondary {
88
121
  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
89
122
  0 1px 0 0 var(--navds-search-color-border) inset,
90
123
  0 -1px 0 0 var(--navds-search-color-border) inset;
91
124
  }
92
125
 
93
- .navds-search__button-search.navds-button--tertiary:hover {
126
+ .navds-search__button-search.navds-button--secondary:hover {
94
127
  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
95
128
  0 1px 0 0 var(--navds-search-color-border-hover) inset,
96
129
  0 -1px 0 0 var(--navds-search-color-border-hover) inset,
@@ -99,21 +132,21 @@
99
132
  }
100
133
 
101
134
  .navds-search__wrapper-inner:focus-within
102
- + .navds-search__button-search.navds-button--tertiary:hover {
135
+ + .navds-search__button-search.navds-button--secondary:hover {
103
136
  z-index: auto;
104
137
  }
105
138
 
106
- .navds-search__button-search.navds-button--tertiary:focus {
139
+ .navds-search__button-search.navds-button--secondary:focus {
107
140
  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
108
141
  var(--navds-shadow-focus);
109
142
  }
110
143
 
111
- .navds-search__button-search.navds-button--tertiary:focus:hover {
144
+ .navds-search__button-search.navds-button--secondary:focus:hover {
112
145
  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
113
146
  var(--navds-shadow-focus);
114
147
  }
115
148
 
116
- .navds-search__button-search.navds-button--tertiary:focus:active {
149
+ .navds-search__button-search.navds-button--secondary:focus:active {
117
150
  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
118
151
  }
119
152
 
package/form/text-field.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ [data-theme="light"] {
2
3
  --navds-text-field-color-text: var(--navds-semantic-color-text);
3
4
  --navds-text-field-color-background: var(
4
5
  --navds-semantic-color-component-background-light
@@ -18,11 +19,24 @@
18
19
  --navds-semantic-color-component-background-alternate
19
20
  );
20
21
  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
22
+ --navds-text-field-color-placeholder-text: var(
23
+ --navds-semantic-color-text-muted
24
+ );
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
29
+ --navds-text-field-color-background: var(
30
+ --navds-semantic-color-component-background-dark
31
+ );
32
+ --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
33
+ --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
34
+ --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
21
35
  }
22
36
 
23
37
  .navds-text-field__input {
24
38
  appearance: none;
25
- padding: 0.5rem;
39
+ padding: var(--navds-spacing-2);
26
40
  background-color: var(--navds-text-field-color-background);
27
41
  border-radius: var(--navds-border-radius-medium);
28
42
  border: 1px solid var(--navds-text-field-color-border);
@@ -31,7 +45,11 @@
31
45
  color: var(--navds-text-field-color-text);
32
46
  }
33
47
 
34
- .navds-form-field--small > .navds-text-field__input {
48
+ .navds-text-field__input::placeholder {
49
+ color: var(--navds-text-field-color-placeholder-text);
50
+ }
51
+
52
+ .navds-form-field--small .navds-text-field__input {
35
53
  padding: 0 0.25rem;
36
54
  min-height: 32px;
37
55
  }
package/index.css CHANGED
@@ -17,6 +17,7 @@
17
17
  @import "pagination.css";
18
18
  @import "popover.css";
19
19
  @import "tag.css";
20
+ @import "tooltip.css";
20
21
  @import "toggle-group.css";
21
22
  @import "panel.css";
22
23
  @import "link-panel.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "0.16.12",
3
+ "version": "0.16.15",
4
4
  "private": false,
5
5
  "description": "Css for NAV Designsystem components",
6
6
  "author": "NAV Designsystem team",
@@ -17,15 +17,16 @@
17
17
  },
18
18
  "main": "./dist/index.css",
19
19
  "scripts": {
20
- "build": "postcss --use postcss-import -o dist/index.css index.css",
20
+ "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
21
21
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
22
22
  },
23
23
  "devDependencies": {
24
- "@navikt/ds-tokens": "^0.8.4",
24
+ "@navikt/ds-tokens": "^0.8.6",
25
25
  "normalize.css": "^8.0.1",
26
26
  "postcss": "^8.3.6",
27
27
  "postcss-cli": "^8.3.1",
28
+ "postcss-combine-duplicated-selectors": "10.0.3",
28
29
  "postcss-import": "^14.0.2"
29
30
  },
30
- "gitHead": "c80cb199a138566285d516e8c2f5aa3993afb20f"
31
+ "gitHead": "31bd40c02cde72ad9aeea011a2005ba8660718cc"
31
32
  }
package/tooltip.css ADDED
@@ -0,0 +1,56 @@
1
+ @keyframes tooltipFadeIn {
2
+ 0% {
3
+ opacity: 0;
4
+ }
5
+ 100% {
6
+ opacity: 1;
7
+ }
8
+ }
9
+
10
+ .navds-tooltip {
11
+ z-index: var(--navds-z-index-tooltip);
12
+ }
13
+
14
+ .navds-tooltip__inner {
15
+ background-color: var(--navds-semantic-color-component-background-inverted);
16
+ color: var(--navds-semantic-color-text-inverted);
17
+ border-radius: var(--navds-border-radius-small);
18
+ padding: 0 var(--navds-spacing-2);
19
+ align-items: center;
20
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
21
+ drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
22
+ display: flex;
23
+ flex-direction: column;
24
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
25
+ animation-duration: 0.2s;
26
+ animation-name: tooltipFadeIn;
27
+ text-align: center;
28
+ }
29
+
30
+ .navds-tooltip__arrow {
31
+ height: 7px;
32
+ width: 7px;
33
+ transform: rotate(45deg);
34
+ z-index: -1;
35
+ background-color: var(--navds-semantic-color-component-background-inverted);
36
+ position: absolute;
37
+ }
38
+
39
+ .navds-tooltip__keys {
40
+ padding-bottom: var(--navds-spacing-1);
41
+ display: flex;
42
+ gap: var(--navds-spacing-1);
43
+ }
44
+
45
+ .navds-tooltip__key {
46
+ font-family: var(--navds-font-family);
47
+ background-color: var(--navds-global-color-gray-700);
48
+ color: var(--navds-semantic-color-text-inverted);
49
+ border-radius: var(--navds-border-radius-small);
50
+ padding: 0 var(--navds-spacing-1);
51
+ min-width: 18px;
52
+ height: 18px;
53
+ display: inline-flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ }