@navikt/ds-css 0.12.12 → 0.13.0-rc.search.0

package/form/search-field.css

@@ -1,11 +1,48 @@
 :root {
-  --navds-search-field-color-shadow-error: var(
-    --navds-semantic-color-interaction-danger
+  --navds-search-field-color-input-hover: var(
+    --navds-semantic-color-interaction-primary
   );
-  --navds-search-field-color-border-error: var(
-    --navds-semantic-color-interaction-danger
+  --navds-search-field-color-button-text: var(--navds-semantic-color-text);
+  --navds-search-field-color-button-hover: var(
+    --navds-semantic-color-interaction-primary
   );
-  --navds-search-field-color-clearbutton-border: var(
+  --navds-search-field-color-button-border-hover-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-search-field-color-button-border-focus: var(
+    --navds-semantic-color-border
+  );
+  --navds-search-field-color-input-inverted: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-border: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-background-active: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-active: var(
+    --navds-semantic-color-text
+  );
+  --navds-search-field-color-input-inverted-border-active: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-background-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-focus: var(
+    --navds-semantic-color-text
+  );
+  --navds-search-field-color-input-inverted-border-focus: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-hover-focus: var(
+    --navds-semantic-color-focus-inverted
+  );
+  --navds-search-field-color-button-inverted-focus: var(
     --navds-semantic-color-border
   );
 }
@@ -14,46 +51,134 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+}
+
+.navds-search-field__input-icon {
+  position: absolute;
+  left: 0;
+  padding: 0 var(--navds-spacing-4);
+  align-items: center;
+  display: flex;
+  pointer-events: none;
+}
+
+.navds-search-field__input {
+  padding-left: var(--navds-spacing-11);
+  padding-right: var(--navds-spacing-12);
+  color: inherit;
 }
 
 .navds-form-field--small .navds-search-field__input {
-  padding: 0.15rem;
   min-height: 32px;
+  padding: 0.15rem var(--navds-spacing-8);
 }
 
-.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
-  border-radius: 0;
+.navds-form-field--small .navds-search-field__input-icon {
+  padding: 0 var(--navds-spacing-2);
 }
 
-.navds-search-field__input-wrapper > :first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.navds-search-field__input:hover {
+  border-color: var(--navds-search-field-color-input-hover);
 }
 
-.navds-search-field__input-wrapper > :last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
+/* Clear Button */
 
-.navds-search-field__input-wrapper > :last-child:first-child {
+.navds-search-field__clear-button {
+  position: absolute;
+  right: 0;
+  color: var(--navds-search-field-color-button-text);
+  appearance: none;
+  background: none;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
   border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.5rem;
 }
 
-.navds-search-field__input-wrapper :focus {
-  z-index: var(--navds-z-index-focus);
+.navds-form-field--small .navds-search-field__clear-button {
+  height: 32px;
+  width: 32px;
+  font-size: 1rem;
 }
 
-.navds-search-field__button,
-.navds-search-field__clear-button {
-  flex-shrink: 0;
+.navds-search-field__clear-button:focus {
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-search-field-color-button-border-focus);
+  outline: none;
+}
+
+.navds-search-field__clear-button:hover {
+  color: var(--navds-search-field-color-button-hover);
+}
+
+.navds-search-field__clear-button:hover:focus {
+  border-color: var(--navds-search-field-color-button-border-hover-focus);
+}
+
+/* Inverted */
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__input {
+  background-color: var(--navds-search-field-color-inverted-background);
+  border-color: var(--navds-search-field-color-input-inverted-border);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper[data-value="true"]
+  > .navds-search-field__input {
+  background-color: var(
+    --navds-search-field-color-input-inverted-background-active
+  );
+  border-color: var(--navds-search-field-color-input-inverted-border-active);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper[data-value="true"] {
+  color: var(--navds-search-field-color-input-inverted-active);
+}
+
+.navds-search-field--inverted > .navds-search-field__input-wrapper {
+  color: var(--navds-search-field-color-input-inverted);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__input:focus {
+  background-color: var(
+    --navds-search-field-color-input-inverted-background-focus
+  );
+  border-color: var(--navds-search-field-color-input-inverted-border-focus);
+  box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper:focus-within {
+  color: var(--navds-search-field-color-input-inverted-focus);
+}
+
+/* Inveted clear button */
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__clear-button:focus {
+  box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
+  border-color: var(--navds-search-field-color-button-inverted-focus);
+  outline: none;
 }
 
-.navds-search-field--error
-  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
-  border-color: var(--navds-search-field-color-border-error);
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__clear-button:hover:focus {
+  border-color: var(--navds-search-field-color-input-inverted-hover-focus);
 }
 
+/* disabled */
 .navds-search-field--disabled {
   opacity: 0.3;
 }

package/form/switch.css

@@ -210,7 +210,7 @@
   appearance: none;
 }
 
-.navds-switch--disabled {
+.navds-switch--disabled:not(.navds-switch--loading) {
   opacity: 0.3;
 }
 

package/form/text-field.css

@@ -1,4 +1,5 @@
 :root {
+  --navds-text-field-color-text: var(--navds-semantic-color-text);
   --navds-text-field-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -27,6 +28,7 @@
   border: 1px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;
+  color: var(--navds-text-field-color-text);
 }
 
 .navds-form-field--small > .navds-text-field__input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.12.12",
+  "version": "0.13.0-rc.search.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,11 +21,10 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.7.1",
+    "@navikt/ds-tokens": "^0.8.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2"
-  },
-  "gitHead": "474ea81bbdeb5d5f07f382f0c663757f30e21672"
+  }
 }

package/LICENCE

@@ -1,31 +0,0 @@
-Font License
-
-The Source Sans Pro font files in packages/node_modules/nav-frontend-typografi-style/assets are a subset of Source Sans Pro, licensed under the SIL Open Font License, and copyright Adobe Systems Incorporated, with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
-
-Icon License
-
-This project uses Streamline Icons. If you use nav-frontend-moduler in your project please adhere to the Streamline Icons license agreement found here: https://streamlineicons.com/ux/extended-license.html
-
-The rest of the codebase (excluding 3rd party dependencies):
-
-# The MIT License
-
-Copyright 2019 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the "Software"),
-to deal in the Software without restriction, including without limitation
-the rights to use, copy, modify, merge, publish, distribute, sublicense,
-and/or sell copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included
-in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-USE OR OTHER DEALINGS IN THE SOFTWARE.