@navikt/ds-css 0.14.0 → 0.14.1-rc.search.0

package/form/radio-checkbox.css

@@ -1,6 +1,6 @@
 :root {
   --navds-radio-checkbox-color-background: var(
-    --navds-semantic-color-canvas-background-light
+    --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
@@ -107,6 +107,29 @@
     var(--navds-shadow-focus);
 }
 
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--navds-radio-checkbox-color-background);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small
+  .navds-checkbox__input:indeterminate
+  + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   background-position: 6px center;
@@ -121,7 +144,7 @@
   + .navds-checkbox__label::before {
   background-position: 4px center;
 }
-
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
 }
@@ -142,28 +165,28 @@
   color: var(--navds-radio-checkbox-color-label-hover);
 }
 
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
   background-color: var(--navds-radio-checkbox-color-background-hover);
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
     var(--navds-shadow-focus);

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/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.14.0",
+  "version": "0.14.1-rc.search.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -26,6 +26,5 @@
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2"
-  },
-  "gitHead": "eceaa7e65907270047c4c0728370b1e606261aee"
+  }
 }

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.