@navikt/ds-css 1.3.0-alpha.0 → 1.3.0

package/index.css

@@ -10,8 +10,6 @@
 @import "chat.css";
 @import "guide-panel.css";
 @import "form/index.css";
-@import "datepicker.css";
-@import "monthpicker.css";
 @import "help-text.css";
 @import "link.css";
 @import "loader.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,12 +20,12 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.0-alpha.0",
+    "@navikt/ds-tokens": "^1.3.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   },
-  "gitHead": "eb4721db0d4e4cc9b5610f20bcb3b0cad30de00a"
+  "gitHead": "01a6f250da8c41fc4338fcd951ae5bc148e39b46"
 }

package/stepper.css

@@ -36,6 +36,11 @@
   grid-column: 1;
 }
 
+.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-blue-500);
+}
+
 .navds-stepper__line--1 {
   grid-row: line-1;
   display: none;
@@ -55,7 +60,6 @@
   display: grid;
   grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
   gap: var(--navds-spacing-2);
-  align-items: baseline;
   justify-content: flex-start;
   text-decoration: none;
   cursor: pointer;
@@ -73,6 +77,11 @@ button.navds-stepper__step {
   text-align: inherit;
 }
 
+.navds-stepper__step--non-interactive {
+  color: var(--navds-global-color-gray-600);
+  cursor: default;
+}
+
 :where(.navds-stepper__step):focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
@@ -91,10 +100,17 @@ button.navds-stepper__step {
   line-height: 1;
 }
 
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 28px;
+}
+
 .navds-stepper__content {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
+  padding-top: 0.035rem;
 }
 
 /* Horizontal */
@@ -161,11 +177,15 @@ button.navds-stepper__step {
   color: var(--navds-semantic-color-interaction-primary-selected);
 }
 
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
-  .navds-stepper__content {
+:where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
 
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover)
+  .navds-stepper__content {
+  text-decoration: none;
+}
+
 :where(.navds-stepper__step--active) .navds-stepper__circle {
   background-color: var(--navds-semantic-color-interaction-primary-selected);
   border-color: var(--navds-semantic-color-interaction-primary-selected);
@@ -178,3 +198,41 @@ button.navds-stepper__step {
     --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
+
+/* Non-interactive */
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__content {
+  color: var(--navds-global-color-gray-900);
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-gray-600);
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+  border-color: var(--navds-global-color-gray-900);
+  color: var(--navds-global-color-white);
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--navds-global-color-deepblue-500);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle {
+  color: var(--navds-global-color-gray-900);
+}

package/toggle-group.css

@@ -18,6 +18,12 @@
   );
 }
 
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
+}
+
 .navds-toggle-group {
   border-radius: 7px; /* Custom value OK */
   background-color: var(--navds-toggle-group-color-background);
@@ -91,7 +97,3 @@
   > svg {
   font-size: 1.125rem;
 }
-
-.navds-toggle-group__label {
-  margin-bottom: 0.5rem;
-}

package/datepicker.css

@@ -1,201 +0,0 @@
-/* :root,
-[data-theme="light"] {
-  --navds-date-color: #123123;
-} */
-
-.navds-date__wrapper {
-  height: fit-content;
-  width: fit-content;
-}
-
-/* Datepicker.Input */
-.navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-.navds-date__field-wrapper {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  width: fit-content;
-}
-
-.navds-date__field-input {
-  padding-right: var(--navds-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--navds-spacing-8);
-}
-
-.navds-date__field-button {
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.navds-form-field--small .navds-date__field-button {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-form-field--small .navds-date__field-button svg {
-  font-size: 16px;
-}
-
-/* Focus layering */
-.navds-date__field-input:focus,
-.navds-date__field-button {
-  z-index: 1;
-}
-
-/* Caption */
-.navds-date__caption-button {
-  width: 3rem;
-  height: 3rem;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 2px;
-  color: var(--navds-global-color-gray-900);
-}
-
-.navds-date__caption-button:hover {
-  background-color: var(
-    --navds-semantic-color-interaction-primary-hover-subtle
-  );
-}
-
-.navds-date__caption-button:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-date {
-  padding: var(--navds-spacing-3);
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
-
-.navds-date__caption-dropdown {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.navds-date__caption__month-wrapper {
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.navds-date__caption__month .navds-select__container select {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-month {
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-5);
-}
-
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: 14px;
-}
-
-.navds-date .rdp-button {
-  all: unset;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: 4px;
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):hover {
-  background: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  cursor: pointer;
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus {
-  box-shadow: inset 0 0 0 1px white,
-    0 0 0 3px var(--navds-global-color-blue-800);
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--navds-global-color-deepblue-500);
-}
-
-.navds-date .rdp-day_selected {
-  color: var(--navds-semantic-color-text-inverted);
-  background: var(--navds-global-color-deepblue-500);
-}
-
-/* Design uses image as background, so created bg with css. Need to get a token for the stripes. */
-.navds-date .rdp-day_disabled {
-  color: var(--navds-semantic-color-text-muted);
-  background-image: linear-gradient(
-    135deg,
-    #e8e8e8 10%,
-    var(--navds-global-color-white) 10%,
-    var(--navds-global-color-white) 50%,
-    #e8e8e8 50%,
-    #e8e8e8 60%,
-    var(--navds-global-color-white) 60%,
-    var(--navds-global-color-white) 100%
-  );
-  background-size: 7.07px 7.07px;
-}
-
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--navds-semantic-color-text-inverted);
-  background: var(--navds-global-color-deepblue-500);
-}
-
-/* Left-side weeknumbers */
-.navds-date .rdp-weeknumber {
-  color: white;
-  background: var(--navds-global-color-gray-800);
-  font-size: 14px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.125rem 0.25rem;
-  border-radius: 2px;
-}
-
-.navds-date .rdp-day_range_start {
-  border-radius: 12px 2px 2px 12px;
-}
-
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: 2px 12px 12px 2px;
-}
-
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: 12px;
-}

package/monthpicker.css

@@ -1,63 +0,0 @@
-.navds-monthpicker__wrapper {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5rem;
-}
-
-.navds-monthpicker__caption {
-  display: flex;
-  justify-content: space-between;
-}
-
-.navds-monthpicker__caption-button {
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  cursor: pointer;
-  height: 3rem;
-  width: 3rem;
-  border-radius: var(--navds-border-radius-small);
-}
-
-.navds-monthpicker__months {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 2px;
-}
-
-.navds-monthpicker__month {
-  all: unset;
-  text-align: center;
-  width: 47px;
-  height: 44px;
-  cursor: pointer;
-  text-transform: capitalize;
-  padding: 1px;
-  border: 1px solid transparent;
-  border-radius: var(--navds-border-radius-medium);
-}
-
-.navds-monthpicker__year-label {
-  display: flex;
-  align-items: center;
-}
-
-.navds-monthpicker__month:focus,
-.navds-monthpicker__caption-button:focus {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-monthpicker__month--current {
-  border-color: var(--navds-global-color-deepblue-500);
-}
-
-.navds-monthpicker__month--selected {
-  color: var(--navds-semantic-color-text-inverted);
-  background: var(--navds-global-color-deepblue-500);
-}
-
-.navds-monthpicker__month:not(.navds-monthpicker__month--selected):hover {
-  background: var(--navds-semantic-color-interaction-primary-hover-subtle);
-}