@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/navigation.module.css

@@ -0,0 +1,416 @@
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 72px;
+  background-color: var(--color-neutral-lightest);
+  /* padding-inline: var(--spacing-md); */
+  border-bottom: 1px solid var(--color-neutral-400);
+}
+
+.details {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  height: 100%;
+  width: 100%;
+}
+
+.govName {
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-2xl);
+  font-weight: 480;
+  letter-spacing: -1.5%;
+  line-height: 28.8px;
+}
+
+.appName {
+  font-family: var(--font-families-default);
+  font-weight: var(--font-weights-semibold);
+  font-size: var(--font-size-xl);
+  letter-spacing: var(--letter-spacing-xl);
+  line-height: var(--line-heights-xl);
+  margin-inline-start: var(--spacing-4xs);
+  margin-block-end: var(--spacing-xs);
+
+  width: 100%;
+  display: flex;
+}
+
+.divider {
+  height: var(--spacing-sm);
+  display: inline-flex;
+  position: relative;
+  top: var(--spacing-3xs);
+  background-color: var(--color-neutral-700);
+  margin-inline: var(--spacing-2xs);
+}
+
+.footerText {
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-3xs);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-heights-3xs);
+}
+
+.footerLinks {
+  display: inline-flex;
+  gap: var(--spacing-xs);
+}
+
+.footerLink {
+  color: var(--color-neutral-700);
+}
+
+.icon {
+  /* visibility: hidden; */
+}
+
+.accountName {
+  background-color: var(--color-neutral-lightest);
+  margin: 0;
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weights-bold);
+  letter-spacing: var(--letter-spacing-md);
+  line-height: var(--line-heights-md);
+  padding-inline: var(--spacing-md);
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-4xs);
+}
+
+.accountEmail,
+.accountFooter {
+  background-color: var(--color-neutral-lightest);
+  margin: 0;
+  padding-inline: var(--spacing-md);
+  color: var(--color-neutral-700);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-3xs);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-heights-3xs);
+}
+
+.accountEmail {
+  padding-bottom: var(--spacing-xs);
+}
+
+.accountFooter {
+  padding: var(--spacing-xs) var(--spacing-md);
+  text-align: center;
+}
+
+.label {
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
+}
+
+/* Navigation Styles */
+.container:has(.navContainer[data-open="true"]) {
+  flex-direction: column;
+}
+
+.navContainer[data-open="true"] {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 72px);
+  width: 100%;
+  position: absolute;
+  top: 72px;
+  bottom: 0;
+
+  /* top: 72px; */
+  left: 0;
+  right: 0;
+  background-color: var(--color-neutral-lightest);
+
+  padding: var(--spacing-md);
+
+  overflow: scroll;
+  z-index: var(--elevation-absolute-top);
+}
+
+.appNavigation {
+  width: 100%;
+  justify-items: flex-end;
+}
+
+.appNavigation > .list {
+  padding-bottom: var(--spacing-4xs);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md);
+  width: 100%;
+}
+
+.list:nth-child(2) {
+  padding-bottom: var(--spacing-2xs);
+}
+
+.item {
+  list-style: none;
+  padding: 0;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-neutral-darkest);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+  width: 100%;
+  text-decoration: none;
+}
+
+.link:hover {
+  background-color: var(--color-neutral-200);
+}
+
+.link:active {
+  background-color: var(--color-neutral-300);
+}
+
+.link[data-selected="true"] {
+  background-color: var(--color-primary-200);
+  color: var(--color-primary-800);
+  border-radius: var(--border-radius-sm);
+}
+
+.close {
+  display: none;
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-md);
+  transform: translateY(-50%);
+  align-items: center;
+  z-index: var(--elevation-absolute-top);
+}
+
+.poweredByContainer {
+  margin-block-start: var(--spacing-xs);
+}
+
+.sideNavCollapsibleTrigger {
+  display: flex;
+  align-items: center;
+  color: var(--color-neutral-darkest);
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-xs);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+}
+
+/* Hover the entire row, including caret */
+.sideNavCollapsibleTrigger:hover {
+  background-color: var(--color-neutral-200);
+}
+
+.sideNavCollapsibleTrigger > a.link[data-selected="true"] {
+  background-color: var(--color-danger-300);
+}
+
+/* Responsive Overrides */
+
+@media (max-width: 512px) {
+  .appName {
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    gap: var(--spacing-2xs);
+  }
+
+  .appNavigation {
+    width: fit-content;
+  }
+
+  .navContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+  }
+
+  .navContainer > nav > .list > li > .link {
+    max-height: var(--spacing-2xl) !important;
+  }
+
+  .appName {
+    border-inline-start: 1px solid var(--color-neutral-400);
+    /* margin-inline-start: var(--spacing-4xs); */
+    /* margin-block-start: var(--spacing-4xs); */
+    padding-inline-start: var(--spacing-sm);
+    font-size: var(--font-size-2xl);
+    letter-spacing: var(--letter-spacing-2xl);
+    line-height: var(--line-heights-2xl);
+    width: fit-content;
+  }
+
+  .list {
+    flex-direction: row;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacing-2xs);
+    padding: 0;
+    width: max-content;
+  }
+
+  .link {
+    /* height: var(--spacing-2xl); */
+  }
+}
+
+@media (max-width: 1024px) {
+  .navContainer {
+    display: none;
+  }
+
+  .close {
+    display: flex;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Side Navigation Styles                                             */
+/* These styles support the SideNavigation component implementation.  */
+/* ------------------------------------------------------------------ */
+
+.sideNavContainer {
+  --nav-width-expanded: calc(240px - var(--spacing-sm));
+  --nav-width-collapsed: 72px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: var(--nav-width-expanded, 240px);
+  background-color: var(--color-neutral-lightest);
+  height: calc(100vh - 72px);
+  overflow-y: auto;
+  transition: width 0.25s ease;
+  padding: var(--spacing-sm);
+  padding-bottom: var(--spacing-4xs);
+  border-right: 1px solid var(--color-neutral-400);
+  position: fixed;
+  top: 72px;
+  left: 0;
+}
+
+.sideNavContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.sideNavContainer.collapsed {
+  width: var(--nav-width-collapsed, 72px);
+  align-items: center;
+}
+
+.sideNavList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sideNavItemWrapper {
+  margin-bottom: var(--spacing-xs);
+}
+
+/* When side nav is collapsed, li's are only as wide as their content */
+.sideNavContainer.collapsed .sideNavList li {
+  width: fit-content;
+}
+
+/* When side nav is expanded, li's fill the container width */
+.sideNavContainer:not(.collapsed) .sideNavList li {
+  width: 100%;
+}
+
+.sideNavSubList {
+  list-style: none;
+  padding: 0;
+}
+
+.sideNavSubList .link,
+.menu-list .link {
+  border-radius: var(--border-radius-none);
+}
+.sideNavSubList .link:hover,
+.menu-list .link:hover,
+.sideNavSubList .link:focus,
+.menu-list .link:focus {
+  border-radius: var(--border-radius-none);
+}
+
+/* 2. Top‑level side‐nav links keep the normal small radius */
+.sideNavList > li > .link {
+  border-radius: var(--border-radius-sm);
+  height: 40px !important;
+}
+.sideNavList.collapsed > li > .collapsedLinkWrapper > .link {
+  border-radius: var(--border-radius-sm);
+  height: 40px !important;
+}
+.sideNavList > li > .link:hover,
+.sideNavList > li > .link:focus {
+  border-radius: var(--border-radius-sm);
+}
+
+.sideNavFooter {
+  position: sticky;
+  bottom: 0; /* stick to the bottom edge */
+  width: 100%; /* full width of the nav */
+  display: flex;
+  justify-content: center; /* center the button */
+  padding: var(--spacing-md) 0 var(--spacing-md) 0; /* a little vertical breathing room */
+  z-index: var(--elevation-100); /* above the scrolling list */
+
+  /* semi‑transparent white so backdrop‑filter can blur underneath */
+  background-color: rgba(255, 255, 255, 0.75);
+
+  /* apply the frosted‐glass blur */
+  backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(1px);
+}
+
+/* inline badge in expanded nav */
+.badgeInline {
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+/* overlay badge when nav is collapsed */
+.collapsedLinkWrapper {
+  position: relative;
+}
+
+.badgeCollapsed {
+  position: absolute;
+  /* top: -16px; */
+  right: -16px;
+}
+
+.sideNavContainer.collapsed .sideNavList > li[data-selected="true"] {
+  background-color: var(--color-primary-200);
+  color: var(--color-primary-800);
+  border-radius: var(--border-radius-sm);
+}

package/build/css/components/progress.module.css

@@ -0,0 +1,66 @@
+/* packages/foundations/build/css/components/progress.module.css */
+
+.root {
+  position: relative;
+  overflow: hidden;
+  background: var(--color-neutral-100-alpha);
+  border-radius: var(--border-radius-xs);
+  /* min-width: var(--layout-4xs); */
+  width: 100%;
+  height: var(--spacing-md);
+  transform: translateZ(0); /* Safari fix */
+  border: none;
+}
+
+.root::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: var(--border-width-sm) solid var(--color-neutral-500);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.root[data-size="sm"] {
+  height: var(--spacing-sm);
+  border-radius: var(--border-radius-md);
+}
+
+.root[data-size="sm"] .indicator {
+  border-radius: var(--border-radius-md);
+}
+
+.indicator {
+  --indicator-background-color: var(--color-primary-600);
+  --indicator-border-color: var(--color-primary-600);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  background-color: var(--indicator-background-color);
+  border: var(--border-width-sm) solid var(--indicator-border-color);
+  border-radius: var(--border-radius-xs);
+  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .root {
+    background: var(--color-neutral-900-alpha);
+  }
+
+  .root::before {
+    border-color: var(--color-neutral-600);
+  }
+
+  .indicator {
+    --indicator-background-color: var(--color-primary-600);
+    --indicator-border-color: var(--color-primary-600);
+
+    background-color: var(--indicator-background-color);
+    border: var(--border-width-sm) solid var(--indicator-border-color);
+  }
+}

package/build/css/components/radio-group.module.css

@@ -11,48 +11,47 @@
 }
 
 .item {
-  background-color: var(--radio-group-light-color-background-primary-default);
+  background-color: var(--color-neutral-lightest);
   display: inline;
-  height: var(--radio-group-size-md-height);
-  min-width: var(--radio-group-size-md-min-width);
-  width: var(--radio-group-size-md-width);
-  border-color: var(--radio-group-light-color-border-primary-default);
+  height: var(--spacing-lg);
+  min-width: var(--spacing-lg);
+  width: var(--spacing-lg);
+  border-color: var(--color-neutral-800);
   border-style: solid;
-  border-width: var(--radio-group-size-md-border-width);
-  border-radius: var(--radio-group-size-md-border-radius);
+  border-width: var(--border-width-sm);
+  border-radius: 100%;
 }
 .item:focus-visible {
-  outline: var(--radio-group-outline-primary-width) solid
-    var(--radio-group-outline-primary-fill);
-  outline-offset: var(--radio-group-outline-primary-offset);
+  outline: var(--border-width-lg) solid var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
 }
 .item[aria-checked="true"] {
-  background-color: var(--radio-group-light-color-background-primary-active);
+  background-color: var(--color-primary-600);
 }
 .item[data-size="sm"] {
-  height: var(--radio-group-size-sm-height);
-  min-width: var(--radio-group-size-sm-min-width);
-  width: var(--radio-group-size-sm-width);
+  height: var(--spacing-md);
+  min-width: var(--spacing-md);
+  width: var(--spacing-md);
 }
 .item[data-error="true"] {
-  background-color: var(--radio-group-light-color-background-danger-default);
-  border-color: var(--radio-group-light-color-border-danger-default);
+  background-color: var(--color-danger-600);
+  border-color: var(--color-danger-800);
 }
 .item[data-disabled] {
-  opacity: var(--radio-group-opacity-disabled);
+  opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 .item[data-mode="dark"] {
-  background-color: var(--radio-group-dark-color-background-primary-default);
-  border-color: var(--radio-group-dark-color-border-primary-default);
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-800);
 }
 .item[data-mode="dark"][aria-checked="true"] {
-  background-color: var(--radio-group-dark-color-background-primary-active);
-  border-color: var(--radio-group-dark-color-border-primary-active);
+  background-color: var(--color-primary-500);
+  border-color: var(--color-primary-500);
 }
 .item[data-mode="dark"][data-error="true"] {
-  background-color: var(--radio-group-dark-color-background-danger-default);
-  border-color: var(--radio-group-dark-color-border-danger-default);
+  background-color: var(--color-danger-500);
+  border-color: var(--color-danger-500);
 }
 
 .indicator {
@@ -66,85 +65,82 @@
 .indicator::after {
   content: "";
   display: block;
-  width: var(--radio-group-elements-indicator-size-md-width);
-  height: var(--radio-group-elements-indicator-size-md-height);
-  border-radius: var(--radio-group-elements-indicator-size-md-border-radius);
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
+  border-radius: 50%;
   background-color: var(--color-neutral-lightest);
-  box-shadow: var(--radio-group-elements-indicator-shadow);
-}
-.indicator[data-size="sm"]::after {
-  border-radius: var(--radio-group-elements-indicator-size-sm-border-radius);
 }
 
 .tile {
   box-sizing: border-box;
   align-items: center;
-  padding-block: var(--radio-group-tile-size-md-padding-block);
-  padding-inline: var(--radio-group-tile-size-md-padding-inline);
-  border-radius: var(--radio-group-tile-size-md-border-radius);
-  background-color: var(
-    --radio-group-tile-light-color-background-primary-default
-  );
-  border: var(--radio-group-tile-size-md-border-width) solid
-    var(--radio-group-tile-light-color-border-primary-default);
+  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-sm);
+  border-radius: var(--primitive-6);
+  background-color: var(--color-neutral-200);
+  border: var(--border-width-sm) solid var(--color-neutral-200);
 }
 .tile[data-altbackground="true"] {
-  background-color: var(
-    --radio-group-tile-light-color-background-altbackground-default
-  );
-  border-color: var(
-    --radio-group-tile-light-color-border-altbackground-default
-  );
+  background-color: var(--color-neutral-lightest);
+  border-color: var(--color-neutral-lightest);
+  min-height: var(--spacing-md);
 }
 
 /* Default Checked */
 .tile:has(.root[data-state="checked"]) {
-  background-color: var(
-    --radio-group-tile-light-color-background-primary-active
-  );
+  background-color: var(--color-primary-200-alpha);
 }
 
 .tile[data-state="checked"] {
-  background-color: var(
-    --radio-group-tile-light-color-background-primary-active
-  );
-  border-color: var(--radio-group-tile-light-color-border-primary-active);
+  background-color: var(--color-primary-200-alpha);
+  border-color: var(--color-primary-600);
+}
+
+.tile[data-state="checked"][data-error="true"] {
+  background-color: var(--color-danger-200);
+  border-color: var(--color-danger-600);
 }
 
 .tile:not([data-state="checked"]):hover {
-  background-color: var(
-    --radio-group-tile-light-color-background-primary-hover
-  );
-  border-color: var(--radio-group-tile-light-color-border-primary-hover);
+  background-color: var(--color-neutral-300);
+  border-color: var(--color-neutral-300);
 }
 
 .tile[data-mode="dark"] {
-  background-color: var(
-    --radio-group-tile-dark-color-background-primary-default
-  );
+  background-color: var(--color-neutral-900);
 }
-.tile[data-altbackground="checked"][data-mode="dark"] {
-  background-color: var(
-    --radio-group-tile-dark-color-background-altbackground-default
-  );
+
+.tile[data-mode="dark"][data-state="checked"][data-error="true"] {
+  background-color: var(--color-danger-900);
+  border-color: var(--color-danger-400);
 }
 
 /* Default Checked */
 .tile[data-mode="dark"]:has(.root[data-state="checked"]) {
-  background-color: var(
-    --radio-group-tile-dark-color-background-primary-active
-  );
+  background-color: var(--color-primary-900);
 }
 .tile[data-mode="dark"]:hover {
-  background-color: var(--radio-group-tile-dark-color-background-primary-hover);
+  background-color: var(--color-neutral-800);
 }
 .tile[data-mode="dark"][data-state="checked"] {
-  background-color: var(
-    --radio-group-tile-dark-color-background-primary-active
-  );
+  background-color: var(--color-primary-900);
 }
 .tile[data-mode="dark"][data-state="checked"]:hover {
-  background-color: var(
-    --radio-group-tile-dark-color-background-primary-active
-  );
+  background-color: var(--color-primary-900);
+}
+
+.tile:has(.item[data-state="checked"]) {
+  background-color: var(--color-primary-200-alpha);
+  border-color: var(--color-primary-600);
+}
+
+.tile:has(.item[data-state="checked"])[data-error="true"] {
+  background-color: var(--color-danger-200);
+  border-color: var(--color-danger-600);
+}
+
+/* Hover example for un-checked */
+.tile:not(:has(.item[data-state="checked"])):hover {
+  background-color: var(--color-neutral-300);
+  border-color: var(--color-neutral-300);
 }