@navikt/ds-css 0.7.4 → 0.8.0

package/accordion-menu.css

@@ -1,3 +1,11 @@
+:root {
+  --navds-accordion-menu-color-text: var(--navds-color-text-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
+  --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
+  --navds-accordion-menu-color-text-active: var(--navds-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-text-focus);
+}
+
 .navds-accordion-menu__list {
   list-style: none;
   margin: 0;
@@ -18,7 +26,7 @@
   justify-content: space-between;
   align-items: center;
   font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color-text);
   text-decoration: underline;
 }
 
@@ -31,7 +39,7 @@
 
 .navds-accordion-menu-collapsable__expand-icon {
   font-size: 1.5rem;
-  color: var(--navds-color-text-link);
+  color: var(--navds-accordion-menu-color);
   flex-shrink: 0;
   margin-left: var(--navds-spacing-2);
 }
@@ -73,18 +81,23 @@
 
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
-  outline: 3px solid var(--navds-text-focus);
+  outline: 3px solid var(--navds-accordion-menu-outline-focus);
   outline-offset: -3px;
-  color: var(--navds-color-darkgray);
+  color: var(--navds-accordion-menu-color-text-focus);
+}
+
+.navds-accordion-menu-collapsable__button:focus
+  > .navds-accordion-menu-collapsable__expand-icon {
+  color: var(--navds-accordion-menu-color-focus);
 }
 
 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-blue-10);
+  background-color: var(--navds-accordion-menu-color-background-hover);
 }
 
 .navds-accordion-menu-item--active {
   box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
-  color: var(--navds-color-text);
+  color: var(--navds-accordion-menu-color-text-active);
   text-decoration: none;
 }

package/accordion.css

@@ -1,82 +1,70 @@
-.ReactCollapse--collapse {
-  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+:root {
+  --navds-accordion-color-text: var(--navds-color-darkgray);
+  --navds-accordion-color-background: var(--navds-color-background);
+  --navds-accordion-color-text-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-hover: var(--navds-color-blue-50);
+  --navds-accordion-color-border-focus: var(--navds-color-background);
 }
 
-.navds-accordion {
-  position: relative;
-  background: var(--navds-color-background);
-  border-bottom: 2px solid #c9c9c9;
+.navds-accordion .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.navds-accordion:hover {
-  /* color: black; */
-  border-bottom: 2px solid var(--navds-color-blue-50);
+.navds-accordion {
+  background: var(--navds-accordion-color-background);
 }
 
-.navds-accordion:focus,
-.navds-accordion__button:focus {
-  box-shadow: var(--navds-shadow-focus);
+.navds-accordion__header:focus {
   outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-accordion-color-border-focus);
 }
 
-.navds-accordion__chevron {
-  width: 1.25em;
-  height: 1.25em;
-  transform: rotateZ(0deg);
-  flex-shrink: 0;
-  margin-left: var(--navds-spacing-4);
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+  text-decoration: underline;
 }
 
-.navds-accordion__chevron--up {
-  transform: rotateZ(-180deg);
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
 }
 
-.navds-accordion__chevron--down {
-  transform: rotateZ(0deg);
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
 }
 
-.navds-accordion__button {
-  padding: var(--navds-spacing-4);
+.navds-accordion__header {
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
   background: transparent;
   text-align: left;
   border: none;
   width: 100%;
-  margin-bottom: 0;
+  margin: 0;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--navds-color-text-link);
-}
-
-.navds-accordion__button:hover .navds-accordion__heading {
-  text-decoration: underline;
-  color: var(--navds-color-text-link);
+  border-bottom: 2px solid #a0a0a0;
+  gap: var(--navds-spacing-4);
 }
 
 .navds-accordion__content {
-  padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
-}
-
-.navds-accordion--open .navds-accordion__content {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.navds-accordion--open > .navds-accordion__button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
 }
 
-.navds-accordion__chevron--filled {
+.navds-accordion__expand-icon--filled {
   display: none;
 }
 
-.navds-accordion__button:hover
-  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+.navds-accordion__header:hover
+  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
   display: inherit;
 }
 
-.navds-accordion__button:hover > .navds-accordion__chevron {
+.navds-accordion__header:hover > .navds-accordion__expand-icon {
   display: none;
 }

package/alert.css

@@ -1,84 +1,119 @@
+:root {
+  --navds-alert-color-border: var(--navds-color-gray-40);
+  --navds-alert-color-error-border: var(--navds-color-error-border);
+  --navds-alert-color-error-background: var(--navds-color-error-background);
+  --navds-alert-color-warning-border: var(--navds-color-warning-border);
+  --navds-alert-color-warning-background: var(--navds-color-warning-background);
+  --navds-alert-color-info-border: var(--navds-color-info-border);
+  --navds-alert-color-info-background: var(--navds-color-info-background);
+  --navds-alert-color-success-border: var(--navds-color-success-border);
+  --navds-alert-color-success-background: var(--navds-color-success-background);
+  --navds-alert-color-error-icon: var(--navds-color-red-60);
+  --navds-alert-color-error-icon-background: var(--navds-color-white);
+  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
+  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
+  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
+  --navds-alert-color-info-icon-background: var(--navds-color-white);
+  --navds-alert-color-success-icon: var(--navds-color-green-70);
+  --navds-alert-color-success-icon-background: var(--navds-color-white);
+}
+
 .navds-alert {
   border-radius: 4px;
-  border: var(--navds-border-default);
+  border: 1px solid;
+  border-color: var(--navds-alert-color-border);
+  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
+  display: flex;
+  gap: var(--navds-spacing-3);
+  align-items: center;
+}
 
-  /* Padding calculated based on 18px font for 64px tall alert */
-  padding: var(--navds-spacing-4) var(--navds-spacing-4);
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: start;
-  min-height: 64px;
-  box-sizing: border-box;
+.navds-alert__wrapper {
+  max-width: 43.5rem;
 }
 
-.navds-alert--s {
-  padding: var(--navds-spacing-1) var(--navds-spacing-4);
-  min-height: 32px;
+.navds-alert--small {
+  padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
 }
 
-.navds-alert > span > svg {
-  margin-right: var(--navds-spacing-3);
-  font-size: 1.5rem;
-  flex-shrink: 0;
-  background: radial-gradient(
-    circle,
-    var(--navds-color-background) 50%,
-    0,
-    transparent
-  );
+.navds-alert--full-width {
+  border-radius: 0;
 }
 
-.navds-alert > div {
-  display: block;
-  margin: auto 0;
-  max-width: 43.5rem;
-  flex: 1;
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--navds-font-line-height-xl);
 }
 
-.navds-alert > span {
-  display: flex;
-  align-items: center;
-  max-height: calc(var(--navds-spacing-8) - 2px);
+.navds-alert--small > .navds-alert__icon {
+  font-size: 1.25rem;
+  height: var(--navds-font-line-height-l);
 }
 
 .navds-alert--error {
-  border-color: var(--navds-color-error-border);
-  background-color: var(--navds-color-error-background);
+  border-color: var(--navds-alert-color-error-border);
+  background-color: var(--navds-alert-color-error-background);
 }
 
-.navds-alert--error > span > svg {
-  color: var(--navds-color-red-60);
+.navds-alert--error > .navds-alert__icon {
+  color: var(--navds-alert-color-error-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-error-icon-background) 50%,
+    0,
+    transparent
+  );
 }
 
 .navds-alert--warning {
-  border-color: var(--navds-color-warning-border);
-  background-color: var(--navds-color-warning-background);
+  border-color: var(--navds-alert-color-warning-border);
+  background-color: var(--navds-alert-color-warning-background);
 }
 
-.navds-alert--warning > span > svg {
-  color: var(--navds-color-orange-40);
+.navds-alert--warning > .navds-alert__icon {
+  color: var(--navds-alert-color-warning-icon);
   background: radial-gradient(
     circle,
-    var(--navds-color-darkgray) 50%,
+    var(--navds-alert-color-warning-icon-background) 50%,
     0,
     transparent
   );
 }
 
 .navds-alert--info {
-  border-color: var(--navds-color-info-border);
-  background-color: var(--navds-color-info-background);
+  border-color: var(--navds-alert-color-info-border);
+  background-color: var(--navds-alert-color-info-background);
 }
 
-.navds-alert--info > span > svg {
-  color: var(--navds-color-lightblue-70);
+.navds-alert--info > .navds-alert__icon {
+  color: var(--navds-alert-color-info-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-info-icon-background) 50%,
+    0,
+    transparent
+  );
 }
 
 .navds-alert--success {
-  border-color: var(--navds-color-success-border);
-  background-color: var(--navds-color-success-background);
+  border-color: var(--navds-alert-color-success-border);
+  background-color: var(--navds-alert-color-success-background);
+}
+
+.navds-alert--success > .navds-alert__icon {
+  color: var(--navds-alert-color-success-icon);
+  background: radial-gradient(
+    circle,
+    var(--navds-alert-color-success-icon-background) 50%,
+    0,
+    transparent
+  );
 }
 
-.navds-alert--success > span > svg {
-  color: var(--navds-color-green-70);
+.navds-alert--inline {
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0;
 }

package/baseline/utility.css

@@ -9,7 +9,8 @@
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
-.sr-only {
+.sr-only,
+.navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -32,7 +33,9 @@
  */
 
 .sr-only.focusable:active,
-.sr-only.focusable:focus {
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;

package/button.css

@@ -1,46 +1,96 @@
+:root {
+  --navds-button-color-text: var(--navds-color-action-default);
+  --navds-button-color-background: var(--navds-color-background);
+  --navds-button-color-border: var(--navds-color-action-default);
+
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-color-white);
+  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-border: var(--navds-color-action-default);
+  --navds-button-color-primary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-primary-border-hover: var(--navds-color-action-hover);
+  --navds-button-color-primary-background-active: var(
+    --navds-color-action-active
+  );
+  --navds-button-color-primary-border-focus: var(--navds-color-white);
+
+  /* secondary */
+  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-secondary-background-active: var(
+    --navds-color-action-active
+  );
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-color-white
+  );
+
+  /* tertiary */
+  --navds-button-color-tertiary-border: transparent;
+  --navds-button-color-tertiary-background: transparent;
+  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
+  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
+  --navds-button-color-tertiary-background-active: var(
+    --navds-color-action-active
+  );
+
+  /* Danger */
+  --navds-button-color-danger-text: var(--navds-color-white);
+  --navds-button-color-danger-background: var(--navds-color-danger-default);
+  --navds-button-color-danger-border: var(--navds-color-danger-default);
+  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-border-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-background-active: var(
+    --navds-color-danger-active
+  );
+  --navds-button-color-danger-border-focus: var(--navds-color-white);
+
+  /* Disabled */
+  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
+  --navds-button-color-background-disabled: var(--navds-color-disabled);
+}
+
 .navds-button {
   display: inline-flex;
   cursor: pointer;
-  background-color: var(--navds-color-background);
-  color: var(--navds-color-action-default);
+  background-color: var(--navds-button-color-background);
+  color: var(--navds-button-color-text);
   margin: 0;
   text-align: center;
   text-decoration: none;
-  border-color: var(--navds-color-action-default);
+  border-color: var(--navds-button-color-border);
   border-radius: 2px;
   border-style: solid;
   border-width: 2px;
   min-height: 48px;
-  align-items: center;
+  min-width: 48px;
+  padding: var(--navds-spacing-2) var(--navds-spacing-2);
+  flex-shrink: 0;
+}
 
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
+.navds-button__inner {
+  display: flex;
+  align-items: center;
+  margin: auto;
+  gap: var(--navds-spacing-2);
 }
 
-.navds-button > svg {
+.navds-button svg {
   font-size: 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
 }
 
-.navds-button--s > svg {
+.navds-button--small svg {
   font-size: 1.25rem;
-  width: 1.25rem;
-  height: 1.25rem;
 }
 
-.navds-button > svg + *:not(.sr-only),
-.navds-button > *:not(.sr-only) + svg {
-  margin-left: 0.5rem;
-}
-
-/* .navds-button:last-child {
-  margin-left: 0.5rem;
-} */
-
-.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
+.navds-button--small {
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
   min-height: 32px;
 }
 
@@ -50,93 +100,123 @@
 }
 
 /**************************
- * .navds-button--primary *
+ * .navds-button--secondary *
  **************************/
 
-.navds-button--primary:hover,
-.navds-button--primary:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-hover);
+.navds-button--secondary:hover {
+  color: var(--navds-button-color-secondary-text-hover);
+  background-color: var(--navds-button-color-secondary-background-hover);
   border-color: transparent;
 }
 
-.navds-button--primary:active {
-  background-color: var(--navds-color-action-active);
+.navds-button--secondary:active {
+  color: var(--navds-button-color-secondary-text-active);
+  background-color: var(--navds-button-color-secondary-background-active);
+  border-color: transparent;
+}
+
+.navds-button--secondary:focus:hover {
+  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
+  border-width: 1px;
+  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+}
+
+.navds-button--secondary:focus:active {
+  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
+  border-width: 1px;
+  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
 }
 
 /****************************
- * .navds-button--secondary *
+ * .navds-button--tertiary *
  ****************************/
 
-.navds-button--secondary {
-  border-color: transparent;
-  background-color: transparent;
+.navds-button--tertiary {
+  border-color: var(--navds-button-color-tertiary-border);
+  background-color: var(--navds-button-color-tertiary-background);
 }
 
-.navds-button--secondary:hover,
-.navds-button--secondary:focus {
-  border-color: var(--navds-color-action-default);
+.navds-button--tertiary:hover {
+  border-color: var(--navds-button-color-tertiary-border-hover);
 }
 
-.navds-button--secondary:active {
-  color: var(--navds-color-text-inverse);
-  border-color: var(--navds-color-action-active);
-  background-color: var(--navds-color-action-active);
+.navds-button--tertiary:focus {
+  border-color: var(--navds-button-color-tertiary-border-focus);
+}
+
+.navds-button--tertiary:active {
+  color: var(--navds-button-color-tertiary-text-active);
+  background-color: var(--navds-button-color-tertiary-background-active);
+  border-color: var(--navds-button-color-tertiary-border-active);
+  border-width: 1px;
+  padding: calc(0.5rem + 1px) calc(0.5rem + 1px);
+}
+
+.navds-button--small.navds-button--tertiary:active {
+  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
 }
 
 /*************************
- * .navds-button--action *
+ * .navds-button--primary *
  * .navds-button--danger *
  *************************/
 
-.navds-button--action {
-  background-color: var(--navds-color-action-default);
-  border-color: var(--navds-color-action-default);
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  border-color: var(--navds-button-color-primary-border);
+  color: var(--navds-button-color-primary-text);
 }
 
 .navds-button--danger {
-  background-color: var(--navds-color-danger-default);
-  border-color: var(--navds-color-danger-default);
+  background-color: var(--navds-button-color-danger-background);
+  border-color: var(--navds-button-color-danger-border);
+  color: var(--navds-button-color-danger-text);
 }
 
-.navds-button--action,
+.navds-button--primary,
 .navds-button--danger {
-  color: white;
   border-width: 1px;
 }
 
-.navds-button--action:hover {
-  background-color: var(--navds-color-action-hover);
-  border-color: var(--navds-color-action-hover);
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
+  border-color: var(--navds-button-color-primary-border-hover);
 }
 
 .navds-button--danger:hover {
-  background-color: var(--navds-color-danger-hover);
-  border-color: var(--navds-color-danger-hover);
+  background-color: var(--navds-button-color-danger-background-hover);
+  border-color: var(--navds-button-color-danger-border-hover);
 }
 
-.navds-button--action:active {
-  background-color: var(--navds-color-action-active);
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
 }
 
 .navds-button--danger:active {
-  background-color: var(--navds-color-danger-active);
+  background-color: var(--navds-button-color-danger-background-active);
+}
+
+.navds-button--primary:focus {
+  border-color: var(--navds-button-color-primary-border-focus);
 }
 
-.navds-button--action:focus,
 .navds-button--danger:focus {
-  border-color: white;
+  border-color: var(--navds-button-color-danger-border-focus);
 }
 
 /**************************
  * .navds-button:disabled *
  **************************/
 
-.navds-button:disabled:disabled {
-  background-color: var(--navds-color-disabled);
-  color: var(--navds-color-text-inverse);
+.navds-button:disabled {
+  color: var(--navds-button-color-text-disabled);
+  background-color: var(--navds-button-color-background-disabled);
   cursor: not-allowed;
   border-width: 0;
   box-shadow: none;
   transform: none;
 }
+
+.navds-button:disabled.navds-button--tertiary:active {
+  padding: var(--navds-spacing-2) var(--navds-spacing-2);
+}