@kofile/gds-foundations 1.0.0-alpha.9 → 1.1.0

package/build/css/components/badge.module.css

@@ -9,12 +9,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--badge-gap-spacing);
+  height: fit-content;
   vertical-align: top;
   padding-inline-start: var(--badge-size-lg-horizontal-padding);
   padding-inline-end: var(--badge-size-lg-horizontal-padding);
   padding-block-start: var(--badge-size-lg-vertical-padding);
   padding-block-end: var(--badge-size-lg-vertical-padding);
   white-space: nowrap;
+  width: fit-content;
 }
 .badge[data-size="md"] {
   font: var(--badge-size-md-typography);
@@ -77,3 +79,7 @@
 .badge[data-color="highlight"][data-mode="dark"] {
   background-color: var(--badge-dark-color-background-highlight-fill);
 }
+.action:hover {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}

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

@@ -0,0 +1,19 @@
+.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);
+  width: 100%;
+}
+.card[data-size="md"] {
+  padding: var(--card-size-md-padding);
+}
+.card[data-size="lg"] {
+  padding: var(--card-size-lg-padding);
+}
+.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);
+}

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

@@ -1,7 +1,3 @@
-button {
-  all: unset;
-}
-
 .indicator {
   display: flex;
 }

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

@@ -0,0 +1,108 @@
+.overlay {
+  background-color: var(
+    --dialog-light-elements-overlay-color-background-primary-default
+  );
+  position: fixed;
+  inset: 0;
+}
+
+.overlay[data-mode="dark"] {
+  background-color: var(
+    --dialog-dark-elements-overlay-color-background-primary-default
+  );
+  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);
+  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);
+}
+.content:focus {
+  outline: none;
+}
+.content[data-size="spacious"] {
+  width: var(--dialog-elements-content-size-spacious-width);
+}
+.content[data-mode="dark"] {
+  background-color: var(
+    --dialog-dark-elements-content-color-background-primary-default
+  );
+}
+
+.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);
+  font: var(--dialog-elements-title-typography);
+  text-align: var(--dialog-elements-title-text-align);
+}
+.title[data-mode="dark"] {
+  color: var(--dialog-dark-elements-title-color-text-primary-default);
+}
+
+.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);
+  font: var(--dialog-elements-description-typography);
+  text-align: var(--dialog-elements-description-text-align);
+}
+.description[data-mode="dark"] {
+  color: var(--dialog-dark-elements-description-color-text-primary-default);
+}
+/** Add the design tokens to token studio */
+
+.icon {
+  background-color: var(
+    --dialog-light-elements-icon-color-background-generic-default
+  );
+  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);
+  margin: 0 auto;
+}
+.icon[data-type="destructive"],
+.icon[data-type="error"] {
+  background-color: var(
+    --dialog-light-elements-icon-color-background-destructive-default
+  );
+}
+.icon[data-type="success"] {
+  background-color: var(
+    --dialog-light-elements-icon-color-background-success-default
+  );
+}
+.icon[data-type="loading"],
+.icon[data-mode="dark"][data-type="loading"] {
+  background-color: var(
+    --dialog-light-elements-icon-color-background-loading-default
+  );
+}
+.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
+  );
+}
+.icon[data-mode="dark"][data-type="success"] {
+  background-color: var(
+    --dialog-dark-elements-icon-color-background-success-default
+  );
+}

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

@@ -2,7 +2,6 @@
   display: block;
   color: var(--field-message-light-color-text-primary-default);
   font: var(--field-message-size-md-typography);
-  margin-bottom: var(--field-message-size-md-margin-block-end);
 }
 
 .message[data-size="sm"] {

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

@@ -20,14 +20,19 @@
   color: var(--input-light-elements-color-text-primary-default);
   font: var(--input-elements-text-field-size-xl-typography);
   outline: none;
-  padding-inline: var(--input-elements-text-field-size-xl-padding-inline);
+  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);
   width: 100%;
 }
 
 .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);
   font: var(--input-elements-text-field-size-lg-typography);
 }
@@ -35,7 +40,12 @@
   height: var(--input-elements-icon-size-lg-height);
 }
 .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);
   font: var(--input-elements-text-field-size-md-typography);
 }
@@ -48,11 +58,14 @@
     --input-light-elements-text-field-color-background-altbackground-default
   );
 }
+.input::placeholder {
+  color: var(--input-light-elements-text-field-color-text-error-default);
+}
 .input[data-error="true"]::placeholder {
   color: var(--input-light-elements-text-field-color-text-error-placeholder);
 }
 .input[data-error="true"],
-.input[data-error="true"] + .icon {
+.icon[data-error="true"] {
   background-color: var(
     --input-light-elements-text-field-color-background-error-default
   );
@@ -66,7 +79,7 @@
   box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
 }
 .input[data-disabled="true"],
-.input[data-disabled="true"] + .icon {
+.icon[aria-disabled="true"] {
   opacity: var(--input-disabled-opacity);
   pointer-events: none;
 }
@@ -78,19 +91,29 @@
   border-color: var(--input-light-elements-icon-color-border-primary-default);
   border-width: var(--input-elements-icon-size-xl-border-width);
   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);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-inline-start: var(--input-elements-icon-size-xl-padding-block-start);
+
+  padding-inline-start: var(--input-elements-text-field-size-xl-padding-inline);
   padding-inline-end: var(--input-elements-icon-size-xl-padding-block-end);
 }
 .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);
 }
 .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);
 }
 .addon {
   background-color: var(
@@ -108,9 +131,15 @@
   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);
+
   height: var(--input-elements-addon-size-md-height);
 }
 .addon[data-size="lg"] {
+  border-radius: var(--input-elements-addon-size-lg-border-radius);
+  padding-inline: var(--input-elements-addon-size-lg-padding-inline);
+
   height: var(--input-elements-addon-size-lg-height);
 }
 
@@ -128,7 +157,7 @@
   box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
 }
 .input[data-mode="dark"][data-error="true"],
-.input[data-mode="dark"][data-error="true"] + .icon {
+.icon[data-mode="dark"][data-error="true"] {
   background-color: var(
     --input-dark-elements-text-field-color-background-error-default
   );

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

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

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

@@ -0,0 +1,13 @@
+.li {
+  all: unset;
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-direction="horizontal"] {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

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

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

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

@@ -0,0 +1,13 @@
+.li {
+  all: unset;
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-direction="horizontal"] {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

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

@@ -0,0 +1,19 @@
+.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);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -1,6 +1,6 @@
-button {
+/* button {
   all: unset;
-}
+} */
 
 .root {
   display: flex;

package/build/css/components/segmented-controller.module.css

@@ -0,0 +1,160 @@
+/* button,
+fieldset,
+input {
+  all: unset;
+} */
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  box-sizing: border-box;
+  display: flex;
+  column-gap: 1px;
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-light-elements-list-color-border-primary-default);
+  border-radius: var(
+    --segmented-controller-elements-list-size-lg-border-radius
+  );
+  width: fit-content;
+}
+.trigger {
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-default
+  );
+  padding-block: var(
+    --segmented-controller-elements-trigger-size-lg-padding-block
+  );
+  padding-inline: var(
+    --segmented-controller-elements-trigger-size-lg-padding-inline
+  );
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--segmented-controller-elements-trigger-size-lg-typography);
+  color: var(--segmented-controller-trigger-color);
+}
+.trigger:hover {
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger:first-child {
+  border-top-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+.trigger:last-child {
+  border-top-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+
+.trigger[data-state="active"] {
+  box-sizing: border-box;
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-active
+  );
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-active
+  );
+  /* border-color: var(
+    --segmented-controller-light-elements-trigger-color-border-primary-active
+  ); */
+
+  border: 1px solid var(--color-primary-300);
+  border-radius: 6px;
+
+  margin: -1px;
+}
+.trigger[data-size="md"] {
+  font: var(--segmented-controller-elements-trigger-size-md-typography);
+  padding-block: var(
+    --segmented-controller-elements-trigger-size-md-padding-block
+  );
+  padding-inline: var(
+    --segmented-controller-elements-trigger-size-md-padding-inline
+  );
+}
+.list[data-mode="dark"] {
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-dark-elements-list-color-border-primary-default);
+  background-color: var(
+    --segmented-controller-dark-elements-list-color-background-primary-default
+  );
+}
+
+.trigger[data-mode="dark"] {
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-default
+  );
+
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-default
+  );
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-default
+  );
+}
+.trigger[data-mode="dark"]:hover {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger[data-mode="dark"][data-state="active"] {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-active
+  );
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-active
+  );
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-active
+  );
+}
+
+.content {
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-default
+  );
+  flex-shrink: 1;
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+  border-radius: var(
+    --segmented-controller-elements-content-size-lg-border-radius
+  );
+
+  margin-top: var(
+    --segmented-controller-elements-content-size-lg-margin-block-start
+  );
+  padding: var(--segmented-controller-elements-content-size-lg-padding);
+  outline: none;
+  width: auto;
+}
+.content:focus {
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+}
+.content[data-mode="dark"] {
+  background-color: var(
+    --segmented-controller-dark-elements-content-color-background-primary-default
+  );
+  border-color: var(
+    --segmented-controller-dark-elements-content-color-border-primary-default
+  );
+}

package/build/css/components/select.module.css

@@ -1,7 +1,7 @@
 /* reset */
-button {
+/* button {
   all: unset;
-}
+} */
 
 .trigger {
   box-sizing: border-box;
@@ -44,7 +44,8 @@ button {
   border-color: var(--select-light-elements-trigger-color-border-danger-focus);
   box-shadow: var(--select-light-elements-trigger-color-shadow-danger-focus);
 }
-.trigger:focus-visible {
+.trigger:focus-visible,
+.trigger:focus {
   border-color: var(--select-light-elements-trigger-color-border-primary-focus);
   box-shadow: var(--select-light-elements-trigger-color-shadow-primary-focus);
 }
@@ -106,10 +107,9 @@ button {
     --select-light-elements-menu-item-color-background-primary-default
   );
   display: flex;
-  align-items: center;
   gap: var(--select-elements-menu-item-gap-default);
-  height: var(--select-elements-menu-item-size-lg-height);
   outline: none;
+  padding-block: var(--select-elements-menu-item-size-lg-padding-block);
   padding-inline: var(--select-elements-menu-item-size-lg-padding-inline);
 }
 .item[data-disabled] {
@@ -233,3 +233,31 @@ button {
 .info[data-mode="dark"] {
   color: var(--select-dark-elements-info-color-text-primary-default);
 }
+
+.icon {
+  min-width: var(--select-elements-icon-size-md-min-height);
+  min-height: var(--select-elements-icon-size-md-min-height);
+  align-self: baseline;
+}
+
+.heading {
+  display: inline-block;
+  font: var(--select-elements-heading-size-sm-typography);
+  color: var(--select-light-elements-heading-color-text-primary-default);
+  padding-block: var(--select-elements-heading-size-sm-padding-block);
+  padding-inline: var(--select-elements-heading-size-sm-padding-inline);
+}
+
+.heading[data-mode="dark"] {
+  color: var(--select-dark-elements-heading-color-text-primary-default);
+}
+
+.label {
+  font: var(--select-elements-label-size-sm-typography);
+  color: var(--select-light-elements-label-color-text-primary-default);
+}
+
+.label[data-mode="dark"] {
+  font: var(--select-elements-label-size-sm-typography);
+  color: var(--select-dark-elements-label-color-text-primary-default);
+}

package/build/css/components/switch.module.css

@@ -1,8 +1,3 @@
-/* reset */
-button {
-  all: unset;
-}
-
 .root {
   background-color: var(--switch-light-color-background-primary-default);
   border-radius: var(--switch-size-md-border-radius);
@@ -39,8 +34,6 @@ button {
   width: var(--switch-size-sm-width);
 }
 
-/* TODO DARK MODE!!! */
-
 .thumb {
   display: block;
   width: var(--switch-elements-thumb-size-md-width);

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

@@ -1,12 +1,3 @@
-button,
-fieldset,
-input {
-  all: unset;
-}
-
-.tokens {
-}
-
 .root {
   display: flex;
   flex-direction: column;
@@ -41,6 +32,7 @@ input {
   align-items: center;
   justify-content: center;
   font: var(--tabs-elements-trigger-size-lg-typography);
+  height: var(--tabs-elements-trigger-size-lg-max-height);
   color: var(--tabs-trigger-color);
 }
 .trigger:hover {
@@ -53,6 +45,7 @@ input {
 }
 .trigger[data-size="xl"] {
   font: var(--tabs-elements-trigger-size-xl-typography);
+  height: var(--tabs-elements-trigger-size-xl-max-height);
 }
 .trigger[data-mode="dark"] {
   color: var(--tabs-dark-elements-trigger-color-text-primary-default);
@@ -65,9 +58,13 @@ input {
 }
 
 .content {
+  background-color: var(
+    --tabs-light-elements-trigger-color-background-primary-default
+  );
   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);
   outline: none;
@@ -77,3 +74,9 @@ input {
   border: var(--tabs-elements-content-size-lg-border-width) solid
     var(--tabs-light-elements-content-color-border-primary-default);
 }
+.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);
+}

package/build/css/index.css

@@ -1,3 +1 @@
 @import "./normalize.css";
-@import "./fonts.css";
-@import "./tokens-global.css";

package/build/css/themes/badge/light.css

@@ -4,9 +4,9 @@
 --badge-light-color-background-neutral-light-fill: #edeeef;
 --badge-light-color-background-neutral-dark-fill: #d5d7db;
 --badge-light-color-background-primary-fill: #d9eafe;
---badge-light-color-background-success-fill: #a3f6ce;
---badge-light-color-background-danger-fill: #fecbcb;
---badge-light-color-background-warning-fill: #ffddb1;
---badge-light-color-background-hightlight-fill: #fae592;
+--badge-light-color-background-success-fill: #C0F6DC;
+--badge-light-color-background-danger-fill: #FEDCDC;
+--badge-light-color-background-warning-fill: #FFE4C2;
+--badge-light-color-background-hightlight-fill: #FDEEAF;
 --badge-light-color-text-fill: #121212;
 }

package/build/css/themes/card/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-dark-color-background-primary-default: #121212;
+--card-dark-color-border-primary-default: #343944;
+}

package/build/css/themes/card/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-light-color-background-primary-default: #ffffff;
+--card-light-color-border-primary-default: #d5d7db;
+}