@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/card.module.css

@@ -1,19 +1,17 @@
 .card {
-  background-color: var(--card-light-color-background-primary-default);
-  border: var(--card-size-sm-border-width) solid
-    var(--card-light-color-border-primary-default);
-  border-radius: var(--card-size-sm-border-radius);
-  padding: var(--card-size-sm-padding);
+  background-color: var(--color-neutral-lightest);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-md);
   width: 100%;
 }
 .card[data-size="md"] {
-  padding: var(--card-size-md-padding);
+  padding: var(--spacing-xl);
 }
 .card[data-size="lg"] {
-  padding: var(--card-size-lg-padding);
+  padding: var(--spacing-3xl);
 }
 .card[data-mode="dark"] {
-  background-color: var(--card-dark-color-background-primary-default);
-  border: var(--card-size-sm-border-width) solid
-    var(--card-dark-color-border-primary-default);
+  background-color: var(--color-neutral-darkest);
+  border: var(--border-width-sm) solid var(--color-neutral-800);
 }

package/build/css/components/checkbox.module.css

@@ -1,186 +1,272 @@
+:root {
+  /* Default to light color-scheme */
+  color-scheme: light;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+} */
+
+/* ------------------------------------------------------------------
+   Base (Light) Styles
+------------------------------------------------------------------ */
+
 .indicator {
   display: flex;
 }
 
 .checkbox {
+  --checkbox-transition-speed: 0.2s;
+
   appearance: none;
-  background-color: var(--checkbox-light-color-background-primary-default);
-  border-radius: var(--checkbox-size-md-border-radius);
-  border: var(--checkbox-size-md-border-width) solid
-    var(--checkbox-light-color-border-primary-default);
+  background-color: var(--color-neutral-lightest);
+  border-radius: var(--spacing-2xs);
+  border: var(--border-width-sm) solid var(--color-neutral-800);
   box-sizing: border-box;
   display: flex;
   justify-content: center;
-  height: var(--checkbox-size-md-height);
+  height: var(--spacing-lg);
   position: relative;
-  transition: background-color var(--checkbox-transition-speed) ease;
-  width: var(--checkbox-size-md-width);
-  min-width: var(--checkbox-size-md-width);
+  transition: background-color var(--checkbox-transition-speed, 0.2s) ease;
+  width: var(--spacing-lg);
+  min-width: var(--spacing-lg);
+  cursor: pointer;
 }
-/* Default Uncheck Hover */
+
 .checkbox:not([data-disabled]):hover:not([data-state="checked"]):not(
     :indeterminate
   )::before {
-  background-color: var(--checkbox-light-color-background-primary-hover);
+  background-color: var(--color-neutral-400);
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: var(--checkbox-size-md-background-size);
-  height: var(--checkbox-size-md-background-size);
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
   transition: opacity 0.25s ease;
 }
-/* Default Checked */
+
+/* Default Checked (Light) */
 .checkbox[data-state="checked"] {
-  background-color: var(--checkbox-light-color-background-primary-active);
-  border-color: var(--checkbox-light-color-border-primary-active);
+  background-color: var(--color-primary-600);
+  border-color: var(--color-primary-900);
 }
+
 /* Focus */
 .checkbox:focus-visible {
-  outline: var(--checkbox-outline-primary-width)
-    var(--checkbox-outline-primary-style) var(--checkbox-outline-primary-fill);
-  outline-offset: var(--checkbox-outline-primary-offset);
+  outline: var(--border-width-lg) solid var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
 }
+
 /* Disabled */
 .checkbox[data-disabled],
-.checkbox[data-error="true"][data-disabled],
-.checkbox[data-mode="dark"][data-disabled] {
+.checkbox[data-error="true"][data-disabled] {
   cursor: not-allowed;
-  opacity: var(--checkbox-opacity-disabled);
+  opacity: var(--opacity-disabled);
 }
+
+/* Error state */
 .checkbox[data-error="true"] {
-  background-color: var(--checkbox-light-color-background-danger-default);
+  background-color: var(--color-danger-600);
 }
+
 /* Error state - Unchecked - Hover */
 .checkbox[data-error="true"]:not([data-disabled]):not(
     [data-state="checked"]
   ):hover {
-  background-color: var(--checkbox-light-color-background-danger-hover);
+  background-color: var(--color-neutral-lightest);
 }
+
 /* Indeterminate Default */
 .checkbox:indeterminate {
-  background-color: var(
-    --checkbox-light-color-background-indeterminate-default
-  );
+  background-color: var(--color-primary-600);
 }
 
-/* Checkbox - Size */
+/* Checkbox - Size = sm */
 .checkbox[data-size="sm"] {
-  border-radius: var(--checkbox-size-sm-border-radius, initial);
-  height: var(--checkbox-size-sm-height);
-  width: var(--checkbox-size-sm-width);
-  min-width: var(--checkbox-size-sm-width);
-}
-/*
- * Checkbox Styles - Hover
- * Adds a small square to the background when the checkbox is hovered 
- * and not checked or indeterminate
- */
-.checkbox[data-size="sm"]:not([data-disabled]):hover:not(
-    [data-state="checked"]
-  ):not(:indeterminate)::before {
-  width: var(--checkbox-size-sm-background-size);
-  height: var(--checkbox-size-sm-background-size);
+  border-radius: var(--border-radius-2xs);
+  height: var(--spacing-md);
+  width: var(--spacing-md);
+  min-width: var(--spacing-md);
 }
 
-/* Checkbox Styles - Dark */
-.checkbox[data-mode="dark"] {
-  background-color: var(--checkbox-dark-color-background-primary-default);
-}
-/* Checkbox - Checked - Dark Mode */
-.checkbox[data-mode="dark"][data-state="checked"] {
-  background-color: var(--checkbox-dark-color-background-primary-active);
-  border-color: var(--checkbox-dark-color-background-primary-active);
-}
-/* Error Styles - Unchecked - Dark */
-.checkbox[data-error="true"][data-mode="dark"] {
-  background-color: var(--checkbox-dark-color-background-danger-default);
-}
-/* Dark - Focus */
-.checkbox[data-mode="dark"]:focus-visible {
-  outline-color: var(var(--checkbox-dark-color-outline-primary-fill));
-}
-/*
- * Checkbox Styles - Unchecked Hover - Dark
- * Adds a small square to the background when the checkbox is hovered 
- * and not checked or indeterminate
- */
-.checkbox[data-mode="dark"]:not([data-disabled]):hover:not(
+/* Hover square for sm */
+.checkbox[data-size="sm"]:not([data-disabled]):hover:not(
     [data-state="checked"]
   ):not(:indeterminate)::before {
-  background-color: var(--checkbox-dark-color-background-primary-hover);
-}
-/*
- * Checkbox - Checked - Error - Dark Mode
- * The checked state for error includes sizes hover states.
- */
-.checkbox[data-error="true"][data-mode="dark"][data-state="checked"],
-.checkbox[data-error="true"][data-mode="dark"][data-state="checked"]:hover {
-  background-color: var(--checkbox-dark-color-background-danger-active);
-}
-/* Error Styles - Unchecked Hover - Dark */
-.checkbox[data-error="true"][data-mode="dark"]:not([data-disabled]):not(
-    [data-state="checked"]
-  ):hover {
-  background-color: var(--checkbox-dark-color-background-danger-hover);
+  width: var(--spacing-xs);
+  height: var(--spacing-xs);
 }
 
+/* ------------------------------------------------------------------
+   Tile (Light)
+------------------------------------------------------------------ */
 .tile {
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  padding-block: var(--checkbox-tile-size-md-padding-block);
-  padding-inline: var(--checkbox-tile-size-md-padding-inline);
-  border-radius: var(--checkbox-tile-size-md-border-radius);
-  background-color: var(--checkbox-tile-light-color-background-primary-default);
-  border: var(--checkbox-tile-size-md-border-width) solid
-    var(--checkbox-tile-light-color-border-primary-default);
+  min-height: var(--spacing-3xl);
+  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+  border-radius: var(--primitive-6);
+  background-color: var(--color-neutral-lightest);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
 }
+
 .tile[data-altbackground="true"] {
-  background-color: var(
-    --checkbox-tile-light-color-background-altbackground-default
-  );
-  border-color: var(--checkbox-tile-light-color-border-altbackground-default);
+  background-color: var(--color-neutral-400);
+  border-color: var(--color-neutral-400);
 }
 
-/* Default Checked */
 .tile:has(.root[data-state="checked"]) {
-  background-color: var(--checkbox-tile-light-color-background-primary-active);
+  background-color: var(--color-primary-200-alpha);
 }
 
 .tile[data-state="checked"] {
-  background-color: var(--checkbox-tile-light-color-background-primary-active);
-  border-color: var(--checkbox-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"] {
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-200);
 }
 
 .tile:not([data-state="checked"]):hover {
-  background-color: var(--checkbox-tile-light-color-background-primary-hover);
-  border-color: var(--checkbox-tile-light-color-border-primary-hover);
+  background-color: var(--color-neutral-400);
+  border-color: var(--color-neutral-500, #818791);
 }
 
+/* ------------------------------------------------------------------
+   Dark Mode via prefers-color-scheme
+------------------------------------------------------------------ */
+/* @media (prefers-color-scheme: dark) {
+
+  .checkbox {
+    background-color: var(--color-neutral-darkest); 
+    border-color: var(--color-neutral-800); 
+  }
+  .checkbox:not([data-disabled]):hover:not([data-state="checked"]):not(
+      :indeterminate
+    )::before {
+    background-color: var(--color-neutral-700); 
+  }
+  .checkbox[data-state="checked"] {
+    background-color: var(--color-primary-500); 
+    border-color: var(--color-primary-500);
+  }
+  .checkbox:focus-visible {
+    outline-color: var(--color-primary-700); 
+  }
+  .checkbox[data-error="true"] {
+    background-color: var(--color-danger-500); 
+  }
+  .checkbox[data-error="true"]:not([data-disabled]):not(
+      [data-state="checked"]
+    ):hover {
+    background-color: var(--color-danger-900); 
+  }
+  .checkbox[data-error="true"][data-state="checked"],
+  .checkbox[data-error="true"][data-state="checked"]:hover {
+    background-color: var(--color-danger-500);
+  }
+
+
+  .tile {
+    background-color: var(--color-neutral-darkest); 
+    border-color: var(--color-neutral-900); 
+  }
+  .tile[data-altbackground="true"] {
+    background-color: var(--color-neutral-700); 
+  }
+  .tile:has(.root[data-state="checked"]) {
+    background-color: var(--color-primary-500); 
+  }
+  .tile:hover {
+    background-color: var(--color-neutral-700);
+    border-color: var(--color-neutral-800); 
+  }
+  .tile[data-state="checked"] {
+    background-color: var(--color-primary-500);
+    border-color: var(--color-primary-400, #66a8fd);
+  }
+  .tile[data-state="checked"][data-error="true"] {
+    background-color: var(--color-danger-900);
+    border-color: var(--color-danger-400, #fc817c);
+  }
+  .tile:not([data-state="checked"]):hover {
+    background-color: var(--color-neutral-700);
+    border-color: var(--color-neutral-800);
+  }
+} */
+
+/* ------------------------------------------------------------------
+   Dark Mode via data-mode=\"dark\" attribute
+   (Overwrites light defaults if explicitly set)
+------------------------------------------------------------------ */
+.checkbox[data-mode="dark"] {
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-800);
+}
+
+.checkbox[data-mode="dark"]:not([data-disabled]):hover:not(
+    [data-state="checked"]
+  ):not(:indeterminate)::before {
+  background-color: var(--color-neutral-700);
+}
+
+.checkbox[data-mode="dark"][data-state="checked"] {
+  background-color: var(--color-primary-500);
+  border-color: var(--color-primary-500);
+}
+
+.checkbox[data-mode="dark"]:focus-visible {
+  outline-color: var(--color-primary-700);
+}
+
+.checkbox[data-mode="dark"][data-error="true"] {
+  background-color: var(--color-danger-500);
+}
+
+.checkbox[data-mode="dark"][data-error="true"]:not([data-disabled]):not(
+    [data-state="checked"]
+  ):hover {
+  background-color: var(--color-danger-900);
+}
+
+.checkbox[data-mode="dark"][data-error="true"][data-state="checked"],
+.checkbox[data-mode="dark"][data-error="true"][data-state="checked"]:hover {
+  background-color: var(--color-danger-500);
+}
+
+/* Tile (Dark attribute) */
 .tile[data-mode="dark"] {
-  background-color: var(--checkbox-tile-dark-color-background-primary-default);
-  border-color: var(--checkbox-tile-dark-color-border-primary-default);
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-900);
 }
-.tile[data-altbackground="checked"][data-mode="dark"] {
-  background-color: var(
-    --checkbox-tile-dark-color-background-altbackground-default
-  );
+
+.tile[data-altbackground="true"][data-mode="dark"] {
+  background-color: var(--color-neutral-700);
 }
 
-/* Default Checked */
 .tile[data-mode="dark"]:has(.root[data-state="checked"]) {
-  background-color: var(--checkbox-tile-dark-color-background-primary-active);
+  background-color: var(--color-primary-900);
 }
+
 .tile[data-mode="dark"]:hover {
-  background-color: var(--checkbox-tile-dark-color-background-primary-hover);
-  border-color: var(--checkbox-tile-dark-color-border-primary-hover);
+  background-color: var(--color-neutral-700);
+  border-color: var(--color-neutral-800);
 }
+
 .tile[data-mode="dark"][data-state="checked"] {
-  background-color: var(--checkbox-tile-dark-color-background-primary-active);
-  border-color: var(--checkbox-tile-dark-color-border-primary-active);
+  background-color: var(--color-primary-900);
+  border-color: var(--color-primary-400);
 }
-.tile[data-mode="dark"][data-state="checked"]:hover {
-  background-color: var(--checkbox-tile-dark-color-background-primary-active);
+
+.tile[data-mode="dark"][data-state="checked"][data-error="true"] {
+  background-color: var(--color-danger-900);
+  border-color: var(--color-danger-400);
 }

package/build/css/components/dialog.module.css

@@ -1,116 +1,95 @@
 .overlay {
-  background-color: var(
-    --dialog-light-elements-overlay-color-background-primary-default
-  );
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   inset: 0;
 }
 
 .overlay[data-mode="dark"] {
-  background-color: var(
-    --dialog-dark-elements-overlay-color-background-primary-default
-  );
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   inset: 0;
 }
 
 .content {
-  background-color: var(
-    --dialog-light-elements-content-color-background-primary-default
-  );
-  border-radius: var(--dialog-elements-content-size-compact-border-radius);
-  box-shadow: var(--dialog-elements-content-size-compact-box-shadow);
+  background-color: var(--color-neutral-lightest);
+  border-radius: var(--primitive-6);
+  box-shadow: var(--shadow-md);
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: var(--dialog-elements-content-size-compact-width);
-  padding-block: var(--dialog-elements-content-size-compact-padding-block);
-  padding-inline: var(--dialog-elements-content-size-compact-padding-inline);
-  animation: var(--dialog-content-animation);
+  width: var(--layout-2xs);
+  padding-block: var(--spacing-xl);
+  padding-inline: var(--spacing-lg);
+  /* animation: var(--dialog-content-animation); */
 }
 .content:focus {
   outline: none;
 }
 .content[data-size="spacious"] {
-  width: var(--dialog-elements-content-size-spacious-width);
+  width: var(--layout-sm);
 }
 .content[data-mode="dark"] {
-  background-color: var(
-    --dialog-dark-elements-content-color-background-primary-default
-  );
+  background-color: var(--color-neutral-darkest);
 }
 
 .title {
-  margin: var(--dialog-elements-title-margin);
-  margin-block-start: var(--dialog-elements-title-margin-block-start);
-  color: var(--dialog-light-elements-title-color-text-primary-default);
+  margin: var(--spacing-4xs);
+  margin-block-start: var(--spacing-sm);
+  color: var(--color-neutral-darkest);
   font-family: var(--font-families-default);
   font-size: var(--font-size-xl);
   font-weight: var(--font-weights-bold);
   letter-spacing: var(--letter-spacing-xl);
   line-height: var(--line-heights-xl);
-  text-align: var(--dialog-elements-title-text-align);
+  text-align: var(center);
 }
 .title[data-mode="dark"] {
-  color: var(--dialog-dark-elements-title-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }
 
 .description {
-  margin: var(--dialog-elements-description-margin);
-  margin-block-start: var(--dialog-elements-description-margin-block-start);
-  color: var(--dialog-light-elements-description-color-text-primary-default);
+  margin: var(--spacing-4xs);
+  margin-block-start: var(--spacing-sm);
+  color: var(--color-neutral-400);
   font-family: var(--font-families-default);
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-2xs);
   line-height: var(--line-heights-2xs);
-  text-align: var(--dialog-elements-description-text-align);
+  text-align: var(--center);
 }
 .description[data-mode="dark"] {
-  color: var(--dialog-dark-elements-description-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }
-/** Add the design tokens to token studio */
 
 .icon {
-  background-color: var(
-    --dialog-light-elements-icon-color-background-generic-default
-  );
+  background-color: var(--color-neutral-200);
   width: min-content;
   display: flex;
   justify-content: center;
-  border-radius: var(--dialog-elements-icon-size-default-border-radius);
-  padding: var(--dialog-elements-icon-size-default-padding);
+  border-radius: var(--primitive-6);
+  padding: var(--spacing-2xs);
   margin: 0 auto;
 }
 .icon[data-type="destructive"],
 .icon[data-type="error"] {
-  background-color: var(
-    --dialog-light-elements-icon-color-background-destructive-default
-  );
+  background-color: var(--color-danger-100);
 }
 .icon[data-type="success"] {
-  background-color: var(
-    --dialog-light-elements-icon-color-background-success-default
-  );
+  background-color: var(--color-success-100);
 }
 .icon[data-type="loading"],
 .icon[data-mode="dark"][data-type="loading"] {
-  background-color: var(
-    --dialog-light-elements-icon-color-background-loading-default
-  );
+  background-color: transparent;
 }
 .icon[data-mode="dark"] {
   background-color: var(--color-neutral-900);
 }
 .icon[data-mode="dark"][data-type="destructive"],
 .icon[data-mode="dark"][data-type="error"] {
-  background-color: var(
-    --dialog-dark-elements-icon-color-background-destructive-default
-  );
+  background-color: var(--color-danger-900);
 }
 .icon[data-mode="dark"][data-type="success"] {
-  background-color: var(
-    --dialog-dark-elements-icon-color-background-success-default
-  );
+  background-color: var(--color-success-900);
 }

package/build/css/components/divider.module.css

@@ -0,0 +1,17 @@
+.root {
+  background-color: var(--color-neutral-300);
+}
+.root[data-mode="dark"] {
+  background-color: var(--color-neutral-800);
+}
+.root[data-orientation="horizontal"] {
+  height: var(--border-width-sm);
+  width: 100%;
+}
+.root[data-orientation="vertical"] {
+  width: var(--border-width-sm);
+  background-color: var(--color-neutral-300);
+}
+.root[data-orientation="vertical"][data-mode="dark"] {
+  background-color: var(--color-neutral-800);
+}

package/build/css/components/empty-state.module.css

@@ -0,0 +1,97 @@
+.root {
+  align-items: center;
+  color: var(--color-neutral-darkest);
+  display: flex;
+  font-family: var(--font-families-default);
+
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--spacing-md);
+  gap: var(--spacing-xs);
+  width: var(--layout-2xs);
+}
+
+.root[data-size="md"] {
+  width: var(--layout-sm);
+  padding: var(--spacing-md);
+}
+
+.root[data-size="md"] .title {
+  font-size: var(--font-size-xl);
+  line-height: var(--line-heights-xl);
+  letter-spacing: var(--letter-spacing-xl);
+}
+
+.root[data-size="md"] .description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  letter-spacing: var(--letter-spacing-xs);
+}
+
+.root[data-size="lg"] {
+  width: var(--layout-sm);
+  padding: var(--spacing-md);
+}
+
+.root[data-size="lg"] .title {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-heights-2xl);
+  letter-spacing: var(--letter-spacing-2xl);
+}
+
+.root[data-size="lg"] .description {
+  font-size: var(--font-size-md);
+  line-height: var(--line-heights-md);
+  letter-spacing: var(--letter-spacing-md);
+}
+
+.content {
+  text-align: center;
+  gap: var(--spacing-2xs);
+}
+
+.icon {
+  background-color: var(--color-neutral-200);
+  width: min-content;
+  display: flex;
+  justify-content: center;
+  border-radius: var(--primitive-6);
+  padding: var(--spacing-2xs);
+  margin: 0 auto;
+}
+.icon[data-type="destructive"],
+.icon[data-type="error"] {
+  background-color: var(--color-danger-100);
+}
+.icon[data-type="success"] {
+  background-color: var(--color-success-100);
+}
+.icon[data-type="loading"],
+.icon[data-mode="dark"][data-type="loading"] {
+  background-color: transparent;
+}
+.icon[data-mode="dark"] {
+  background-color: var(--color-neutral-900);
+}
+.icon[data-mode="dark"][data-type="destructive"],
+.icon[data-mode="dark"][data-type="error"] {
+  background-color: var(--color-danger-900);
+}
+.icon[data-mode="dark"][data-type="success"] {
+  background-color: var(--color-success-900);
+}
+
+.title {
+  font-weight: var(--font-weights-bold);
+  font-size: var(--font-size-md);
+  line-height: var(--line-heights-md);
+  letter-spacing: var(--letter-spacing-md);
+}
+
+.description {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  color: var(--color-neutral-700);
+}