@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/field-message.module.css

@@ -1,7 +1,6 @@
 .message {
   display: block;
-  color: var(--field-message-light-color-text-primary-default);
-
+  color: var(--color-neutral-700);
   font-family: var(--font-families-default);
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weights-regular);
@@ -16,17 +15,17 @@
 }
 
 .message[data-error="true"] {
-  color: var(--field-message-light-color-text-danger-default);
+  color: var(--color-danger-700);
 }
 
 .message[aria-disabled="true"] {
-  opacity: var(--field-message-opacity-disabled);
+  opacity: var(--opacity-disabled);
 }
 
 .message[data-mode="dark"] {
-  color: var(--field-message-dark-color-text-danger-default);
+  color: var(--color-neutral-400);
 }
 
 .message[data-error="true"][data-mode="dark"] {
-  color: var(--field-message-dark-color-text-danger-default);
+  color: var(--color-danger-400);
 }

package/build/css/components/form-label.module.css

@@ -1,6 +1,6 @@
 .label {
   box-sizing: border-box;
-  color: var(--form-label-light-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-semibold);
@@ -9,7 +9,7 @@
 
   display: inline-flex;
   align-items: center;
-  gap: var(--form-label-size-md-gap);
+  gap: var(--spacing-2xs);
 }
 .label[data-size="sm"] {
   font-size: var(--font-size-xs);
@@ -17,12 +17,12 @@
   line-height: var(--line-heights-xs);
 }
 .label[data-mode="dark"] {
-  color: var(--form-label-dark-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }
 .label:is([aria-required="true"]):after {
   content: "";
-  height: var(--form-label-elements-indicator-height);
-  width: var(--form-label-elements-indicator-width);
-  background-color: var(--form-label-elements-indicator-background);
-  border-radius: var(--form-label-elements-indicator-border-radius);
+  height: var(--spacing-xs);
+  width: var(--spacing-xs);
+  background-color: var(--color-warning-600);
+  border-radius: var(--primitive-6);
 }

package/build/css/components/icon-wrap.module.css

@@ -0,0 +1,43 @@
+.root {
+  background-color: var(--color-neutral-200);
+  width: min-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-md);
+  margin: 0 auto;
+}
+.root[data-type="neutral"] {
+  background-color: var(--color-neutral-200);
+}
+.root[data-type="neutral"][data-with-background="true"] {
+  padding: var(--spacing-xs);
+}
+
+.root[data-type="neutral"][data-with-background="true"][data-size="48"] {
+  padding: var(--spacing-xs);
+  color: var(--color-neutral-700);
+}
+
+.root[data-type="danger"] {
+  background-color: var(--color-danger-100);
+}
+.root[data-type="success"] {
+  background-color: var(--color-success-100);
+}
+.root[data-type="primary"],
+.root[data-mode="dark"][data-type="primary"] {
+  background-color: transparent;
+}
+.root[data-mode="dark"] {
+  background-color: var(--color-neutral-900);
+}
+.root[data-mode="dark"][data-type="neutral"] {
+  background-color: var(--color-neutral-900);
+}
+.root[data-mode="dark"][data-type="danger"] {
+  background-color: var(--color-danger-900);
+}
+.root[data-mode="dark"][data-type="success"] {
+  background-color: var(--color-success-900);
+}

package/build/css/components/input.module.css

@@ -1,161 +1,151 @@
 .root {
-  width: var(--input-elements-root-size-xl-width);
+  width: 100%;
   display: flex;
 }
 .root:focus-within {
-  border-radius: var(--input-elements-text-field-size-xl-border-radius);
+  border-radius: var(--border-radius-sm);
   box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
 }
 .input {
-  background-color: var(
-    --input-light-elements-text-field-color-background-primary-default
-  );
-  border-radius: var(--input-elements-text-field-size-xl-border-radius);
-  border-color: var(
-    --input-light-elements-text-field-color-border-primary-default
-  );
+  background-color: var(--color-neutral-200);
+  border-radius: var(--border-radius-sm);
+  border-color: var(--color-neutral-500);
   border-style: solid;
-  border-width: var(--input-elements-text-field-size-xl-border-width);
+  border-width: var(--border-width-sm);
   box-sizing: border-box;
-  color: var(--input-light-elements-color-text-primary-default);
+  color: var(--color-neutral-darkest);
   font-family: var(--font-families-default);
   font-size: var(--font-size-md);
   font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-md);
   line-height: var(--line-heights-md);
   outline: none;
-  padding-inline-start: var(--input-elements-text-field-size-xl-padding-inline);
-  padding-block: var(--input-elements-text-field-size-xl-padding-block);
-  max-height: var(--input-elements-text-field-size-xl-height);
+  padding-inline-start: var(--spacing-md);
+  padding-block: var(--spacing-sm);
+  max-height: var(--spacing-3xl);
   width: 100%;
 }
+.input:focus {
+  border-color: var(--color-primary-600);
+}
+
+.root:focus-within .icon {
+  border-color: var(--color-primary-400);
+}
+
+.root:focus-within .icon {
+  border-color: var(--color-primary-400);
+}
+
+.root:focus-within .input[data-error="true"],
+.root:focus-within .icon[data-error="true"] {
+  border-color: var(--color-danger-600);
+}
 
 .input[data-size="lg"] {
-  border-radius: var(--input-elements-text-field-size-lg-border-radius);
-  padding-block: var(--input-elements-text-field-size-lg-padding-block);
-  padding-inline-start: var(
-    --input-elements-text-field-size-lg-padding-inline-start
-  );
-  height: var(--input-elements-text-field-size-lg-height);
+  border-radius: var(--primitive-6);
+  padding-block: var(--spacing-xs);
+  padding-inline-start: var(--spacing-xs);
+  height: var(--spacing-2xl);
   font-size: var(--font-size-xs);
   letter-spacing: var(--letter-spacing-xs);
   line-height: var(--line-heights-xs);
 }
 .input[data-size="lg"] + .icon {
-  height: var(--input-elements-icon-size-lg-height);
+  height: var(--spacing-2xl);
 }
 .input[data-size="md"] {
-  border-radius: var(--input-elements-text-field-size-md-border-radius);
-
-  padding-block: var(--input-elements-text-field-size-md-padding-block);
-  padding-inline-start: var(
-    --input-elements-text-field-size-md-padding-inline-start
-  );
-  height: var(--input-elements-text-field-size-md-height);
+  border-radius: var(--border-radius-xs);
+  padding-block: var(--primitive-6);
+  padding-inline-start: var(--spacing-xs);
+  height: var(--spacing-xl);
   font-size: var(--font-size-3xs);
   letter-spacing: var(--letter-spacing-3xs);
   line-height: var(--line-heights-3xs);
 }
 .input[data-size="md"] + .icon {
-  height: var(--input-elements-icon-size-md-height);
+  height: var(--spacing-xl);
 }
 .root[data-altbackground="true"] .input,
 .root[data-altbackground="true"] .icon {
-  background-color: var(
-    --input-light-elements-text-field-color-background-altbackground-default
-  );
+  background-color: var(--color-neutral-lightest);
 }
 .input::placeholder {
-  color: var(--input-light-elements-text-field-color-text-error-default);
+  color: var(--color-neutral-darkest);
 }
 .input[data-error="true"]::placeholder {
-  color: var(--input-light-elements-text-field-color-text-error-placeholder);
+  color: var(--color-neutral-600);
 }
 .input[data-error="true"],
 .icon[data-error="true"] {
-  background-color: var(
-    --input-light-elements-text-field-color-background-error-default
-  );
-  border-color: var(
-    --input-light-elements-text-field-color-border-error-default
-  );
+  background-color: var(--color-danger-100);
+  border-color: var(--color-danger-600);
 }
 
 .root[data-error="true"]:focus-within {
-  border-radius: var(--input-elements-text-field-size-xl-border-radius);
+  border-radius: var(--border-radius-sm);
   box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
 }
 .input[data-disabled="true"],
 .icon[aria-disabled="true"] {
-  opacity: var(--input-disabled-opacity);
+  opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 .icon {
-  background-color: var(
-    --input-light-elements-icon-color-background-primary-default
-  );
-  border-radius: var(--input-elements-icon-size-xl-border-radius);
-  border-color: var(--input-light-elements-icon-color-border-primary-default);
-  border-width: var(--input-elements-icon-size-xl-border-width);
+  background-color: var(--color-neutral-200);
+  border-radius: var(--border-radius-md);
+  border-color: var(--color-neutral-500);
+  border-width: var(--border-width-sm);
   border-style: solid;
   box-sizing: border-box;
-  color: var(--input-light-elements-icon-color-text-primary-default);
-  height: var(--input-elements-icon-size-xl-height);
+  color: var(--color-neutral-500);
+  height: var(--spacing-3xl);
   display: flex;
   align-items: center;
   justify-content: center;
-
-  padding-inline-start: var(--input-elements-text-field-size-xl-padding-inline);
-  padding-inline-end: var(--input-elements-icon-size-xl-padding-block-end);
+  padding-inline-start: var(--spacing-md);
+  padding-inline-end: var(--spacing-4xs);
 }
 .icon[data-size="md"] {
-  padding-inline-start: var(
-    --input-elements-text-field-size-md-padding-inline-start
-  );
-  height: var(--input-elements-icon-size-md-height);
-  border-radius: var(--input-elements-icon-size-md-border-radius);
+  padding-inline-start: var(--spacing-xs);
+  height: var(--spacing-xl);
+  border-radius: var(--border-radius-sm);
 }
 .icon[data-size="lg"] {
-  padding-inline-start: var(
-    --input-elements-text-field-size-lg-padding-inline-start
-  );
-  height: var(--input-elements-icon-size-lg-height);
-  border-radius: var(--input-elements-icon-size-lg-border-radius);
+  padding-inline-start: var(--spacing-xs);
+  height: var(--spacing-2xl);
+  border-radius: var(--border-radius-sm);
 }
 .addon {
-  background-color: var(
-    --input-light-elements-addon-color-background-primary-default
-  );
-  border-color: var(--input-light-elements-addon-color-border-primary-default);
-  border-width: var(--input-elements-addon-size-xl-border-width);
+  background-color: var(--color-neutral-lightest);
+  border-color: var(--color-neutral-500);
+  border-width: var(--border-width-sm);
   border-style: solid;
-  border-radius: var(--input-elements-addon-size-xl-border-radius);
-  color: var(--input-light-elements-addon-color-text-primary-default);
-  height: var(--input-elements-addon-size-xl-height);
+  border-radius: var(--border-radius-sm);
+  color: var(--color-neutral-darkest);
+  height: var(--spacing-3xl);
   display: flex;
   align-items: center;
-  padding-inline: var(--input-elements-addon-size-xl-padding-inline);
+  padding-inline: var(--spacing-md);
   z-index: 10;
 }
 .addon[data-size="md"] {
-  border-radius: var(--input-elements-addon-size-md-border-radius);
-  padding-inline: var(--input-elements-addon-size-md-padding-inline);
+  border-radius: var(--border-radius-xs);
+  padding-inline: var(--spacing-xs);
 
-  height: var(--input-elements-addon-size-md-height);
+  height: var(--spacing-xl);
 }
 .addon[data-size="lg"] {
-  border-radius: var(--input-elements-addon-size-lg-border-radius);
-  padding-inline: var(--input-elements-addon-size-lg-padding-inline);
+  border-radius: var(--spacing-2xs);
+  padding-inline: var(--spacing-sm);
 
-  height: var(--input-elements-addon-size-lg-height);
+  height: var(--spacing-2xl);
 }
 
 /* Dark Mode */
 .root[data-mode="dark"][data-altbackground="true"] .input,
 .root[data-mode="dark"][data-altbackground="true"] .icon {
-  background-color: var(
-    --input-dark-elements-text-field-color-background-altbackground-default
-  );
+  background-color: var(--color-neutral-darkest);
 }
 .root[data-mode="dark"]:focus-within {
   box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.24);
@@ -165,36 +155,27 @@
 }
 .input[data-mode="dark"][data-error="true"],
 .icon[data-mode="dark"][data-error="true"] {
-  background-color: var(
-    --input-dark-elements-text-field-color-background-error-default
-  );
-  border-color: var(
-    --input-dark-elements-text-field-color-border-error-default
-  );
+  background-color: var(--color-danger-1000);
+  border-color: var(--color-danger-500);
 }
 .input[data-mode="dark"],
 .input[data-mode="dark"] + .icon {
-  background-color: var(
-    --input-dark-elements-text-field-color-background-primary-default
-  );
-  border-color: var(
-    --input-dark-elements-text-field-color-border-primary-default
-  );
-  color: var(--input-dark-elements-text-field-color-text-primary-default);
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-600);
+  color: var(--color-neutral-lightest);
 }
 .input[data-mode="dark"]::placeholder {
-  color: var(--input-dark-elements-text-field-color-text-error-placeholder);
+  color: var(--color-neutral-400);
 }
 .icon[data-mode="dark"] {
-  background-color: var(
-    --input-dark-elements-icon-color-background-primary-default
-  );
-  border-color: var(--input-dark-elements-icon-color-border-primary-default);
-  color: var(--input-dark-elements-icon-color-text-primary-default);
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-600);
+  color: var(--color-neutral-400);
 }
 .addon[data-mode="dark"] {
-  background-color: var(
-    --input-dark-elements-addon-color-background-primary-default
-  );
-  border-color: var(--input-dark-elements-addon-color-border-primary-default);
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-600);
+}
+.input:focus {
+  border-color: var(--color-primary-400);
 }

package/build/css/components/label.module.css

@@ -1,17 +1,30 @@
+:root {
+  color-scheme: light;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+} */
+
+/* ------------------------------------------------------------------
+   Base (Light) Styles
+------------------------------------------------------------------ */
 .label {
   all: unset;
   box-sizing: border-box;
-  color: var(--label-light-color-text-primary-default);
+  color: var(--color-neutral-1000, #121212);
   cursor: default;
   font-family: var(--font-families-default);
   font-size: var(--font-size-md);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weights-regular);
   letter-spacing: var(--letter-spacing-md);
   line-height: var(--line-heights-md);
 }
 
 .label[aria-disabled="true"] {
-  opacity: var(--label-opacity-disabled);
+  opacity: var(--opacity-disabled, 0.32);
   cursor: not-allowed;
 }
 
@@ -21,6 +34,19 @@
   line-height: var(--line-heights-xs);
 }
 
+/* ------------------------------------------------------------------
+   Dark Mode via prefers-color-scheme
+------------------------------------------------------------------ */
+/* @media (prefers-color-scheme: dark) {
+  .label {
+    color: var(--color-neutral-lightest, #ffffff);
+  }
+} */
+
+/* ------------------------------------------------------------------
+   Dark Mode via data-mode="dark"
+   (Overwrites light defaults if explicitly set)
+------------------------------------------------------------------ */
 .label[data-mode="dark"] {
-  color: var(--label-dark-color-text-primary-default);
+  color: var(--color-neutral-lightest, #ffffff);
 }

package/build/css/components/link.module.css

@@ -1,69 +1,69 @@
 .link {
   all: unset;
   box-sizing: border-box;
-  color: var(--link-light-color-text-primary-default);
+  color: var(--color-primary-600);
   cursor: pointer;
   font-family: var(--font-families-default);
   font-weight: var(--font-weights-bold);
   font-size: var(--font-size-xl);
   letter-spacing: var(--letter-spacing-xl);
-  line-height: var(--line-height-xl);
+  line-height: var(--line-heights-xl);
   display: inline-flex;
-  gap: var(--link-gap-default);
+  gap: var(--spacing-2xs);
   vertical-align: top;
   text-decoration: underline;
 }
 .link:hover {
-  color: var(--link-light-color-text-primary-hover);
+  color: var(--color-primary-700);
 }
 .link:active {
-  color: var(--link-light-color-text-primary-active);
+  color: var(--color-primary-900);
 }
 .link[data-size="3xs"] {
   font-size: var(--font-size-3xs);
   letter-spacing: var(--letter-spacing-3xs);
-  line-height: var(--line-height-3xs);
+  line-height: var(--line-heights-3xs);
 }
 .link[data-size="2xs"] {
   font-size: var(--font-size-2xs);
   letter-spacing: var(--letter-spacing-2xs);
-  line-height: var(--line-height-2xs);
+  line-height: var(--line-heights-2xs);
 }
 .link[data-size="xs"] {
   font-size: var(--font-size-xs);
   letter-spacing: var(--letter-spacing-xs);
-  line-height: var(--line-height-xs);
+  line-height: var(--line-heights-xs);
 }
 .link[data-size="sm"] {
   font-size: var(--font-size-sm);
   letter-spacing: var(--letter-spacing-sm);
-  line-height: var(--line-height-sm);
+  line-height: var(--line-heights-sm);
 }
 .link[data-size="md"] {
   font-size: var(--font-size-md);
   letter-spacing: var(--letter-spacing-md);
-  line-height: var(--line-height-md);
+  line-height: var(--line-heights-md);
 }
 .link[data-size="lg"] {
   font-size: var(--font-size-lg);
   letter-spacing: var(--letter-spacing-lg);
-  line-height: var(--line-height-lg);
+  line-height: var(--line-heights-lg);
 }
 .link[data-size="xl"] {
   font-size: var(--font-size-xl);
   letter-spacing: var(--letter-spacing-xl);
-  line-height: var(--line-height-xl);
+  line-height: var(--line-heights-xl);
 }
 .link[data-weight="regular"] {
   font-weight: var(--font-weights-regular);
 }
 
 .link[data-mode="dark"] {
-  color: var(--link-dark-color-text-primary-default);
+  color: var(--color-primary-500);
 }
 .link[data-mode="dark"]:hover {
-  color: var(--link-dark-color-text-primary-hover);
+  color: var(--color-primary-400);
 }
 .link[data-mode="dark"]:active {
-  color: var(--link-dark-color-text-primary-active);
+  color: var(--color-primary-300);
 }

package/build/css/components/list-callout-group.module.css

@@ -1,10 +1,10 @@
 .ul {
   all: unset;
   display: flex;
-  gap: var(--list-group-space-comfortable);
+  gap: var(--spacing-3xl);
 }
 
 .ul[data-direction="vertical"] {
   flex-direction: column;
-  padding-block: var(--list-group-space-comfortable);
+  padding-block: var(--spacing-3xl);
 }

package/build/css/components/list-callout.module.css

@@ -1,6 +1,6 @@
 .li {
   all: unset;
-  color: var(--list-item-light-color-text-primary-default);
+  color: var(--color-neutral-darkest);
 }
 
 .li[data-direction="horizontal"] {
@@ -9,5 +9,5 @@
 }
 
 .li[data-mode="dark"] {
-  color: var(--list-item-dark-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }

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

@@ -1,10 +1,10 @@
 .ul {
   all: unset;
   display: flex;
-  gap: var(--list-group-space-comfortable);
+  gap: var(--spacing-3xl);
 }
 
 .ul[data-direction="vertical"] {
   flex-direction: column;
-  gap: var(--list-group-space-comfortable);
+  gap: var(--spacing-3xl);
 }

package/build/css/components/list-item.module.css

@@ -1,6 +1,6 @@
 .li {
   all: unset;
-  color: var(--list-item-light-color-text-primary-default);
+  color: var(--color-neutral-darkest);
 }
 
 .li[data-direction="horizontal"] {
@@ -9,5 +9,5 @@
 }
 
 .li[data-mode="dark"] {
-  color: var(--list-item-dark-color-text-primary-default);
+  color: var(--color-neutral-lightest);
 }

package/build/css/components/loader.module.css

@@ -1,11 +1,9 @@
 .loader {
-  border: var(--loader-size-lg-border-width) solid
-    var(--loader-light-color-border-primary-default);
-  border-top: var(--loader-size-lg-border-width) solid
-    var(--loader-light-color-border-top-primary-default);
-  border-radius: var(--loader-size-lg-border-radius);
-  width: var(--loader-size-lg-width);
-  height: var(--loader-size-lg-height);
+  border: var(--border-radius-md) solid var(--color-primary-300);
+  border-top: var(--border-radius-md) solid var(--color-primary-700);
+  border-radius: 100%;
+  width: var(--spacing-4xl);
+  height: var(--spacing-4xl);
   animation: spin 1s linear infinite;
 }
 

package/build/css/components/logo.module.css

@@ -0,0 +1,34 @@
+.root {
+  display: inline-flex;
+
+  gap: var(--spacing-2xs);
+  height: auto;
+  align-items: baseline;
+}
+
+.img {
+  height: var(--spacing-2xl);
+  align-self: baseline;
+}
+
+.root[data-powered-by="true"] {
+  height: var(--spacing-md);
+}
+
+.root[data-powered-by="true"] .img {
+  height: var(--spacing-md);
+  align-self: baseline;
+}
+
+.powered {
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-3xs);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-3xs);
+  letter-spacing: var(--letter-spacings-3xs);
+  color: var(--color-neutral-700);
+}
+
+.root[data-mode="dark"] .powered {
+  color: var(--color-neutral-400);
+}