@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/table.module.css

@@ -1,178 +1,234 @@
+.container {
+  --gds-table-container-width: auto;
+  --gds-table-container-height: auto;
+  --gds-table-border-width: var(--border-width-sm);
+
+  box-sizing: border-box;
+  background-color: var(--color-neutral-200);
+  border-color: var(--color-neutral-300);
+  border-width: var(--gds-table-border-width);
+  border-style: solid;
+  border-radius: var(--border-radius-sm);
+  width: var(--gds-table-container-width);
+  overflow: hidden;
+}
+
 .table {
-  width: 100%;
-  border-collapse: separate; /* Don't collapse */
+  table-layout: fixed;
+  /* width: 100%; */
+  border-collapse: separate;
   border-spacing: 0;
 }
 
-.container {
-  background-color: var(
-    --table-light-elements-container-color-background-primary-default
-  );
-  border-color: var(
-    --table-light-elements-container-color-border-primary-default
-  );
-  border-width: var(--table-elements-container-size-2xl-border-width);
+@media (min-width: 768px) {
+  .table {
+    width: 100%;
+  }
+}
+
+.scrollable {
+  overflow-y: auto;
+  /* overflow-x: auto; */
+  height: var(--gds-table-scrollable-container-height);
+  width: 100%;
+
+  position: relative;
+  right: 0;
+  /* scrollbar-gutter: stable; */
+}
+
+.scrollable::-webkit-scrollbar {
+  width: var(--spacing-sm);
+  background-color: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
   border-style: solid;
+  border-width: var(--border-width-sm);
+  border-right: none;
+  border-radius: var(--border-radius-sm);
+}
 
-  border-radius: var(--table-elements-container-size-2xl-border-radius);
-  min-height: auto;
-  max-height: var(--table-elements-container-size-2xl-max-height);
-  overflow: auto;
+.scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-width: var(--border-width-sm);
+  border-color: var(--color-neutral-500);
+  border-style: solid;
+  border-radius: var(--border-radius-sm);
+  height: 128px;
+  scrollbar-gutter: stable;
 }
+
 .container::-webkit-scrollbar {
-  width: var(--table-elements-container-scrollbar-size-2xl-width);
-  background-color: var(
-    --table-light-elements-container-scrollbar-color-background-primary-default
-  );
-  border-color: var(
-    --table-light-elements-container-scrollbar-color-border-primary-default
-  );
+  /* width: var(--spacing-sm);
+  background-color: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
   border-style: solid;
-  border-width: var(--table-elements-container-scrollbar-size-2xl-border-width);
+  border-width: var(--border-width-sm);
   border-right: none;
-  border-radius: var(
-    --table-elements-container-scrollbar-size-2xl-border-radius
-  );
-}
-.container::-webkit-scrollbar-thumb {
-  background-color: var(
-    --table-light-elements-container-scrollbar-thumb-color-background-primary-default
-  );
-  border-width: var(
-    --table-elements-container-scrollbar-thumb-size-2xl-border-width
-  );
-  border-color: var(
-    --table-light-elements-container-scrollbar-thumb-color-border-primary-default
-  );
-  border-style: solid;
-  border-radius: var(
-    --table-elements-container-scrollbar-size-2xl-border-radius
-  );
-  height: var(--table-elements-container-scrollbar-thumb-size-2xl-height);
+  border-radius: var(--border-radius-sm); */
+  /* display: none; */
 }
+
+/* .container::-webkit-scrollbar {
+  width: var(--spacing-sm);
+  background-color: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
+  border-style: solid;
+  border-width: var(--border-width-sm);
+  border-right: none;
+  border-radius: var(--border-radius-sm);
+} */
+/* .container::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-300);
+  border-width: var(--border-width-sm);
+  border-color: var(--color-neutral-500);
+  border-style: solid;
+  border-radius: var(--border-radius-sm);
+  height: 128px;
+} */
 .container[data-mode="dark"] {
-  background-color: var(
-    --table-dark-elements-container-color-background-primary-default
-  );
-  border-color: var(
-    --table-dark-elements-container-color-border-primary-default
-  );
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-800);
 }
 .container[data-mode="dark"]::-webkit-scrollbar {
-  background-color: var(
-    --table-dark-elements-container-scrollbar-color-background-primary-default
-  );
-  border-color: var(
-    --table-dark-elements-container-scrollbar-color-border-primary-default
-  );
+  background-color: var(--color-neutral-900);
+  border-color: var(--color-neutral-800);
 }
-
 .container[data-mode="dark"]::-webkit-scrollbar-thumb {
-  background-color: var(
-    --table-dark-elements-container-scrollbar-thumb-color-background-primary-default
-  );
-  border-color: var(
-    --table-dark-elements-container-scrollbar-thumb-color-border-primary-default
-  );
+  background-color: var(--color-neutral-700);
+  border-color: var(--color-neutral-500);
 }
 
 .tr {
-  background-color: var(
-    --table-light-elements-tr-color-background-primary-default
-  );
+  background-color: var(--color-neutral-lightest);
   transition: background-color 0.2s ease-in-out;
+  /* width: 100%; */
 }
 .tr:not(:last-child) > * {
-  border-block-end: var(--table-elements-td-size-2xl-border-width) solid
-    var(--table-light-elements-td-color-border-primary-default);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-300);
 }
 .tr[data-mode="dark"]:not(:last-child) > * {
-  border-block-end: var(--table-elements-td-size-2xl-border-width) solid
-    var(--table-dark-elements-td-color-border-primary-default);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-800);
+}
+.tr[data-selected="true"] {
+  background-color: var(--color-primary-100) !important;
+}
+.tr[data-selected="true"]:hover {
+  background-color: var(--color-primary-200) !important;
+}
+.tr[data-selected="true"][data-mode="dark"] {
+  background-color: var(--color-primary-1000) !important;
+}
+.tr[data-selected="true"][data-mode="dark"]:hover {
+  background-color: var(--color-primary-900) !important;
+}
+.tr[data-error="true"] {
+  background-color: var(--color-danger-100) !important;
+}
+.tr[data-error="true"][data-mode="dark"] {
+  background-color: var(--color-error-1000) !important;
 }
 .tr:hover {
-  background-color: var(
-    --table-light-elements-tr-color-background-primary-hover
-  );
+  background-color: var(--color-neutral-200);
 }
 .tr[data-mode="dark"] {
-  background-color: var(
-    --table-dark-elements-tr-color-background-primary-default
-  );
+  background-color: var(--color-neutral-darkest);
 }
 .tr[data-mode="dark"]:hover {
-  background-color: var(
-    --table-dark-elements-tr-color-background-primary-hover
-  );
+  background-color: var(--color-neutral-1000);
 }
 .tr[data-striped]:nth-child(even) {
-  background-color: var(
-    --table-light-elements-tr-color-background-striped-default
-  );
+  background-color: var(--color-neutral-100);
 }
 .tr[data-mode="dark"][data-striped]:nth-child(even) {
-  background-color: var(
-    --table-dark-elements-tr-color-background-striped-default
-  );
+  background-color: var(--color-neutral-1000);
 }
 .tr[data-striped]:hover {
-  background-color: var(
-    --table-light-elements-tr-color-background-striped-hover
-  );
+  background-color: var(--color-neutral-200);
 }
 .tr[data-mode="dark"][data-striped]:hover {
-  background-color: var(
-    --table-dark-elements-tr-color-background-striped-hover
-  );
+  background-color: var(--color-neutral-900);
 }
 
 .th {
-  background-color: var(
-    --table-light-elements-th-color-background-primary-default
-  );
-  border-bottom-color: var(
-    --table-light-elements-th-color-border-bottom-primary-default
-  );
+  --gds-table-column-width: auto;
+
+  background-color: var(--color-neutral-200);
+  border-bottom-color: var(--color-neutral-300);
   border-bottom-style: solid;
-  border-bottom-width: var(--table-elements-th-size-xl-border-bottom-width);
-  color: var(--table-light-elements-th-color-text-primary-default);
+  border-bottom-width: var(--border-width-sm);
+  color: var(--color-neutral-darkest);
   font-family: var(--font-families-default);
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weights-bold);
   letter-spacing: var(--letter-spacing-2xs);
   line-height: var(--line-heights-2xs);
-  height: var(--table-elements-th-size-xl-max-height);
-  padding-inline: var(--table-elements-th-size-xl-padding-inline);
-  padding-block-start: var(--table-elements-th-size-xl-padding-block-start);
-  padding-block-end: var(--table-elements-th-size-xl-padding-block-end);
+  height: var(--spacing-3xl);
   text-align: left;
+  text-transform: capitalize;
+
+  padding-block: 0;
+  padding-inline: var(--spacing-sm);
+  width: var(--gds-table-column-width);
+  z-index: var(--elevation-100);
+
+  /* position: absolute; */
+  /* top: 10px; */
 }
-.th[data-mode="dark"] {
-  background-color: var(
-    --table-dark-elements-th-color-background-primary-default
-  );
-  border-bottom-color: var(
-    --table-dark-elements-th-color-border-bottom-primary-default
-  );
-  color: var(--table-dark-elements-th-color-text-primary-default);
+
+.th:last-child {
+  /* padding-right: 32px; */
 }
 
+.th:has(.button) {
+  cursor: pointer;
+}
+.th:has(.button):hover {
+  background-color: var(--color-neutral-300);
+  margin-left: 12px;
+}
+.button {
+  /* display: flex; */
+  /* align-items: center; */
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  tab-index: 0;
+}
+.button:hover {
+  background-color: var(--color-neutral-300);
+}
+
+.button:focus-visible {
+  width: calc(100% - 14px);
+  outline: var(--button-outline-primary-offset) solid var(--color-primary-700);
+  border: none;
+}
+.span,
+.thContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  position: relative;
+  top: var(--spacing-2xs);
+}
+.th[data-mode="dark"] {
+  background-color: var(--color-neutral-900);
+  border-bottom-color: var(--color-neutral-800);
+  color: var(--color-neutral-lightest);
+}
 .th[data-size="2xl"] {
   font-family: var(--font-families-default);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-bold);
   letter-spacing: var(--letter-spacing-sm);
   line-height: var(--line-heights-sm);
-
-  height: var(--table-elements-th-size-2xl-max-height);
-  padding-block-start: var(--table-elements-th-size-2xl-padding-block-start);
-  padding-block-end: var(--table-elements-th-size-2xl-padding-block-end);
+  height: var(--spacing-4xl);
+}
+.th[data-size="2xl"] .thContent {
+  top: var(--spacing-sm);
 }
-
 .th[data-background="none"] {
-  background-color: var(
-    --table-light-elements-th-color-background-altbackground-default
-  );
+  background-color: var(--color-neutral-lightest);
 }
 .th[data-align="center"] {
   text-align: center;
@@ -180,23 +236,28 @@
 .th[data-align="right"] {
   text-align: right;
 }
-
 .th[data-mode="dark"][data-background="none"] {
-  background-color: var(
-    --table-dark-elements-th-color-background-altbackground-default
-  );
+  background-color: var(--color-neutral-darkest);
+}
+.th[data-sticky="true"] {
+  --gds-table-th-top: auto;
+  position: sticky;
+  top: var(--gds-table-th-top);
 }
 .td {
   box-sizing: border-box;
-  color: var(--table-light-elements-td-color-text-primary-default);
+  color: var(--color-neutral-darkest);
   font-family: var(--font-families-default);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-lg);
   line-height: var(--line-heights-lg);
+  height: var(--spacing-4xl);
+  padding-inline: var(--spacing-sm);
+}
 
-  height: var(--table-elements-td-size-2xl-max-height);
-  padding-inline: var(--table-elements-td-size-2xl-padding-inline);
+.td:last-child {
+  margin-right: -16px;
 }
 
 .td[data-size="xl"] {
@@ -205,7 +266,8 @@
   font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-sm);
   line-height: var(--line-heights-sm);
-  height: var(--table-elements-td-size-xl-max-height);
+  height: var(--spacing-3xl);
+  padding-inline-start: var(--spacing-sm);
 }
 
 .td[data-size="lg"] {
@@ -214,33 +276,81 @@
   font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-2xs);
   line-height: var(--line-heights-2xs);
-  height: var(--table-elements-td-size-lg-max-height);
-  padding-inline-start: var(--table-elements-td-size-lg-padding-inline);
+  height: var(--spacing-2xl);
+  padding-inline-start: var(--spacing-sm);
 }
 
 .td[data-mode="dark"] {
-  color: var(--table-dark-elements-td-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }
 .actions {
+  position: sticky;
+  top: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding-inline-end: var(--table-elements-actions-2xl-padding-inline-end);
-  height: var(--table-elements-actions-2xl-height);
+  padding-inline-end: var(--spacing-xs);
+  height: var(--spacing-3xl);
   box-sizing: border-box;
-  border-color: var(
-    --table-light-elements-actions-color-border-primary-default
-  );
-  border-style: solid;
-  border-width: var(--table-elements-actions-2xl-border-width);
-  background-color: var(
-    --table-light-elements-actions-color-background-primary-default
-  );
-  border-radius: var(--table-elements-actions-2xl-border-radius);
+  border-color: var(--color-neutral-300);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-300);
+  background-color: var(--color-neutral-200);
+  z-index: var(--elevation-100);
 }
 
 .actions[data-altbackground="true"] {
-  background-color: var(
-    --table-light-elements-actions-color-altbackground-primary-default
-  );
+  background-color: var(--color-neutral-lightest);
+}
+
+.menuButton {
+  border-radius: 0 !important;
+  padding-inline: 12px !important;
+  justify-content: flex-start !important;
+}
+
+.menuButton:hover {
+  background-color: var(--color-neutral-300) !important;
+}
+
+.checkbox[data-state="checked"] {
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpolyline points="40 144 96 200 224 72" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+}
+
+/* Checkbox in indeterminate state */
+.checkbox:indeterminate {
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cline x1="40" y1="128" x2="216" y2="128" fill="none" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+}
+
+.resizer {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  right: 0;
+  width: 2px;
+  background: var(--color-primary-500);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer::before {
+  content: "";
+  display: block;
+  position: relative;
+  right: 8px;
+  width: 8px; /* Adjust size for your design */
+  height: 100%; /* Adjust size for your design */
+
+  background-color: var(--color-primary-300); /* Match the background color */
+  opacity: 0.5;
+}
+
+.isResizing {
+  background-color: var(--color-primary-200);
 }

package/build/css/components/tabs.module.css

@@ -5,28 +5,24 @@
 
 .list {
   display: flex;
-  column-gap: var(--tabs-elements-list-gap-default);
+  column-gap: var(--spacing-xl);
   flex-shrink: 0;
 }
 .list[data-border] {
-  border-block-end-color: var(
-    --tabs-light-elements-list-color-border-primary-default
-  );
-  border-block-end-width: var(--tabs-elements-list-size-lg-border-bottom-width);
+  border-block-end-color: var(--color-neutral-300);
+  border-block-end-width: var(--border-width-sm);
   border-block-end-style: solid;
 }
 .list[data-mode="dark"][data-border] {
-  border-color: var(--tabs-dark-elements-list-color-border-primary-default);
+  border-color: var(--color-neutral-800);
 }
 .trigger {
   box-sizing: border-box;
-  background-color: var(--tabs-trigger-background-color);
-  border-block-end-color: var(
-    --tabs-light-elements-trigger-color-border-primary-default
-  );
-  border-block-end-width: var(--tabs-elements-trigger-size-lg-border-width);
+  background-color: transparent;
+  border-block-end-color: transparent;
+  border-block-end-width: var(--border-width-md);
   border-block-end-style: solid;
-  padding-block-end: var(--tabs-elements-trigger-size-lg-padding-block-end);
+  padding-block-end: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -36,16 +32,16 @@
   font-weight: var(--font-weights-bold);
   letter-spacing: var(--letter-spacing-lg);
   line-height: var(--line-heights-lg);
-  height: var(--tabs-elements-trigger-size-lg-max-height);
-  color: var(--tabs-trigger-color);
+  height: var(--spacing-2xl);
+  color: var(--color-neutral-darkest);
 }
 .trigger:hover {
-  color: var(--tabs-light-elements-trigger-color-text-primary-hover);
+  color: var(--color-primary-700);
 }
 .trigger[data-state="active"] {
   box-sizing: border-box;
-  color: var(--tabs-light-elements-trigger-color-text-primary-active);
-  border-color: var(--tabs-light-elements-trigger-color-border-primary-active);
+  color: var(--color-primary-600);
+  border-color: var(--color-primary-600);
 }
 .trigger[data-size="xl"] {
   font-family: var(--font-families-default);
@@ -53,38 +49,33 @@
   font-weight: var(--font-weights-bold);
   letter-spacing: var(--letter-spacing-2xl);
   line-height: var(--line-heights-2xl);
-  height: var(--tabs-elements-trigger-size-xl-max-height);
+  height: var(--spacing-3xl);
 }
 .trigger[data-mode="dark"] {
-  color: var(--tabs-dark-elements-trigger-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }
 .trigger[data-mode="dark"]:hover {
-  color: var(--tabs-dark-elements-trigger-color-text-primary-hover);
+  color: var(--color-primary-300);
 }
 .trigger[data-mode="dark"][data-state="active"] {
-  color: var(--tabs-dark-elements-trigger-color-text-primary-active);
+  color: var(--color-primary-400);
+  border-color: var(--color-primary-400);
 }
 
 .content {
-  background-color: var(
-    --tabs-light-elements-trigger-color-background-primary-default
-  );
+  background-color: var(--color-neutral-lightest);
   flex-shrink: 1;
-  border: var(--tabs-elements-content-size-lg-border-width) solid
-    var(--tabs-light-elements-content-color-border-primary-default);
-  border-radius: var(--tabs-elements-content-size-lg-border-radius);
-  margin-top: var(--tabs-elements-content-size-lg-margin-block-start);
-  padding: var(--tabs-elements-content-size-lg-padding);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
+  border-radius: var(--border-radius-sm);
+  margin-top: var(--spacing-xs);
+  padding: var(--spacing-md);
   outline: none;
   width: auto;
 }
 .content:focus {
-  border: var(--tabs-elements-content-size-lg-border-width) solid
-    var(--tabs-light-elements-content-color-border-primary-default);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
 }
 .content[data-mode="dark"] {
-  background-color: var(
-    --tabs-dark-elements-content-color-background-primary-default
-  );
-  border-color: var(--tabs-dark-elements-content-color-border-primary-default);
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-800);
 }