@kofile/gds-foundations 0.0.10 → 1.0.0-alpha

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

@@ -0,0 +1,82 @@
+@import "@kofile/gds-foundations/theme/global";
+@import "@kofile/gds-foundations/theme/badge";
+
+.badge {
+  background-color: var(--badge-light-color-background-neutral-light-fill);
+  border-start-start-radius: var(--badge-size-sm-border-radius);
+  border-start-end-radius: var(--badge-size-sm-border-radius);
+  border-end-start-radius: var(--badge-size-sm-border-radius);
+  border-end-end-radius: var(--badge-size-sm-border-radius);
+  color: var(--badge-light-color-text-fill);
+  font: var(--badge-size-lg-typography);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--badge-gap-spacing);
+  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;
+}
+.badge[data-size="md"] {
+  font: var(--badge-size-md-typography);
+  padding-block-start: var(--badge-size-md-vertical-padding);
+  padding-block-end: var(--badge-size-md-vertical-padding);
+  padding-inline-start: var(--badge-size-md-horizontal-padding);
+  padding-inline-end: var(--badge-size-md-horizontal-padding);
+}
+.badge[data-size="sm"] {
+  font: var(--badge-size-sm-typography);
+  padding-block-start: var(--badge-size-sm-vertical-padding);
+  padding-block-end: var(--badge-size-sm-vertical-padding);
+  padding-inline-start: var(--badge-size-sm-horizontal-padding);
+  padding-inline-end: var(--badge-size-sm-horizontal-padding);
+}
+
+.badge[data-color="neutral-light"] {
+  background-color: var(--badge-light-color-background-neutral-light-fill);
+}
+.badge[data-color="neutral-dark"] {
+  background-color: var(--badge-light-color-background-neutral-dark-fill);
+}
+.badge[data-color="primary"] {
+  background-color: var(--badge-light-color-background-primary-fill);
+}
+.badge[data-color="success"] {
+  background-color: var(--badge-light-color-background-success-fill);
+}
+.badge[data-color="danger"] {
+  background-color: var(--badge-light-color-background-danger-fill);
+}
+.badge[data-color="warning"] {
+  background-color: var(--badge-light-color-background-warning-fill);
+}
+.badge[data-color="highlight"] {
+  background-color: var(--badge-light-color-background-hightlight-fill);
+}
+.badge[data-mode="dark"] {
+  color: var(--badge-dark-color-text-fill);
+}
+.badge[data-color="neutral-light"][data-mode="dark"] {
+  color: var(--badge-dark-color-text-fill);
+  background-color: var(--badge-dark-color-background-neutral-light-fill);
+}
+.badge[data-color="neutral-dark"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-neutral-dark-fill);
+}
+.badge[data-color="primary"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-primary-fill);
+}
+.badge[data-color="success"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-success-fill);
+}
+.badge[data-color="danger"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-danger-fill);
+}
+.badge[data-color="warning"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-warning-fill);
+}
+.badge[data-color="highlight"][data-mode="dark"] {
+  background-color: var(--badge-dark-color-background-highlight-fill);
+}

package/build/css/components/button.module.css

@@ -0,0 +1,309 @@
+@import "@kofile/gds-foundations/theme/global";
+@import "@kofile/gds-foundations/theme/button";
+
+.button {
+  box-sizing: border-box;
+  background-color: var(--button-light-color-background-solid-primary-default);
+  border-color: var(--button-light-color-border-solid-primary-default);
+  border-style: var(--button-size-xl-border-style);
+  border-width: var(--button-size-xl-border-width);
+  border-radius: var(--button-size-xl-border-radius);
+  box-shadow: 0px -2px 1px 0px rgba(18, 18, 18, 0.12) inset,
+    0px 1px 1px 0px rgba(255, 255, 255, 0.24) inset;
+  box-sizing: border-box;
+  color: var(--button-light-color-text-solid-primary-default);
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--button-size-xl-spacing);
+  align-items: center;
+  font: var(--button-size-xl-typography);
+  height: var(--button-size-xl-height);
+  padding-block-start: var(--button-size-xl-padding-top);
+  padding-block-end: var(--button-size-xl-padding-bottom);
+  padding-inline-start: var(--button-size-xl-padding-left);
+  padding-inline-end: var(--button-size-xl-padding-right);
+  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
+    border-color 0.25s ease-in-out;
+  white-space: nowrap;
+}
+.button[data-width="full"] {
+  width: 100%;
+  justify-content: center;
+}
+.button:not(:disabled):hover {
+  border-color: var(--button-light-color-border-solid-primary-hover);
+  background-color: var(--button-light-color-background-solid-primary-hover);
+}
+.button:focus-visible {
+  outline: var(--button-outline-primary-offset)
+    var(--button-outline-primary-style) var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
+}
+.button:active,
+.button[data-background="outlined"]:active {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+}
+.button[data-background="outlined"] {
+  border-color: var(--button-light-color-border-outlined-primary-default);
+  background-color: var(
+    --button-light-color-background-outlined-primary-default
+  );
+  box-shadow: none;
+  color: var(--button-light-color-text-outlined-primary-default);
+}
+.button[data-background="outlined"]:hover {
+  background-color: var(--button-light-color-background-outlined-primary-hover);
+  border-color: var(--button-light-color-border-outlined-primary-hover);
+}
+.button[data-background="transparent"] {
+  box-shadow: none;
+  border-color: var(--button-light-color-border-transparent-primary-default);
+  background-color: var(--button-light-color-transparent-primary-default);
+  color: var(--button-light-color-text-transparent-primary-default);
+}
+
+.button[data-background="transparent"]:hover {
+  background-color: var(--color-neutral-200);
+  border-color: transparent;
+}
+
+.button[data-background="transparent"]:active {
+  box-shadow: none;
+  background-color: var(
+    --button-light-color-background-transparent-primary-active
+  );
+  border-color: var(--button-light-color-border-transparent-primary-active);
+}
+
+.button[data-size="md"] {
+  font: var(--button-size-md-typography);
+  height: var(--button-size-md-height);
+  padding-block-start: var(--button-size-md-padding-top);
+  padding-block-end: var(--button-size-md-padding-bottom);
+  padding-inline-start: var(--button-size-md-padding-left);
+  padding-inline-end: var(--button-size-md-padding-right);
+}
+
+.button[data-size="lg"] {
+  font: var(--button-size-lg-typography);
+  height: var(--button-size-lg-height);
+  padding-block-start: var(--button-size-lg-padding-top);
+  padding-block-end: var(--button-size-lg-padding-bottom);
+  padding-inline-start: var(--button-size-lg-padding-left);
+  padding-inline-end: var(--button-size-lg-padding-right);
+}
+
+.button[data-rounded="left"] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.button[data-rounded="right"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.button[data-rounded="none"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/**** VARIANTS */
+.button[data-variant="neutral"][data-background="outlined"] {
+  border-color: var(--color-neutral-300);
+  box-shadow: none;
+  background-color: var(
+    --button-light-color-background-outlined-neutral-default
+  );
+  color: var(--button-light-color-text-outlined-neutral-default);
+}
+.button[data-variant="neutral"][data-background="outlined"]:active {
+  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.16);
+}
+.button[data-variant="neutral"]:hover {
+  background-color: var(--button-light-color-background-outlined-neutral-hover);
+}
+.button[data-variant="neutral"][data-background="transparent"] {
+  border-color: var(--button-light-color-border-transparent-neutral-default);
+  background-color: var(
+    --button-light-color-background-transparent-neutral-default
+  );
+  color: var(--button-light-color-text-outlined-neutral-default);
+}
+.button[data-variant="neutral"][data-background="transparent"]:hover {
+  border-color: var(--button-light-color-border-transparent-neutral-hover);
+  background-color: var(
+    --button-light-color-background-transparent-neutral-hover
+  );
+}
+.button[data-variant="neutral"][data-background="transparent"]:active {
+  border-color: var(--button-light-color-border-transparent-neutral-active);
+  background-color: var(
+    --button-light-color-background-transparent-neutral-active
+  );
+}
+.button[data-variant="danger"] {
+  background-color: var(--button-light-color-background-solid-danger-default);
+  border-color: var(--button-light-color-border-solid-danger-default);
+  color: var(--button-light-color-text-solid-danger-default);
+}
+.button[data-variant="danger"]:not(:disabled):hover {
+  border-color: var(--button-light-color-border-solid-danger-hover);
+  background-color: var(--button-light-color-background-solid-danger-hover);
+}
+
+.button[data-variant="danger"][data-background="outlined"] {
+  background-color: var(
+    --button-light-color-background-outlined-danger-default
+  );
+  border-color: var(--button-light-color-border-outlined-danger-default);
+  color: var(--button-light-color-text-outlined-danger-default);
+}
+.button[data-variant="danger"][data-background="outlined"]:hover {
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-100);
+}
+.button[data-variant="danger"]:active {
+  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+}
+
+/*! DARK MODE */
+
+.button[data-mode="dark"] {
+  border-color: var(--button-dark-color-border-solid-primary-default);
+  box-shadow: none;
+}
+
+.button[data-mode="dark"]:not(:disabled):active {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.24);
+}
+
+.button[data-mode="dark"][data-variant="neutral"][data-background="outlined"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.24);
+}
+
+.button[data-mode="dark"][data-variant="danger"]:not(:disabled):active,
+.button[data-mode="dark"][data-background="outlined"][data-variant="danger"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
+}
+
+.button[data-mode="dark"]:not(:disabled):hover {
+  border-color: var(--button-dark-color-border-solid-primary-hover);
+  background-color: var(--button-dark-color-background-solid-primary-hover);
+}
+
+.button[data-background="outlined"][data-mode="dark"] {
+  box-shadow: none;
+  border-color: var(--button-dark-color-border-outlined-primary-default);
+  background-color: var(
+    --button-dark-color-background-outlined-primary-default
+  );
+  color: var(--button-dark-color-text-outlined-primary-default);
+}
+
+.button[data-background="outlined"][data-mode="dark"]:hover {
+  background-color: var(--button-dark-color-background-outlined-primary-hover);
+  border-color: var(--button-dark-color-border-outlined-primary-hover);
+}
+
+.button[data-background="transparent"][data-mode="dark"] {
+  border-color: var(--button-dark-color-border-transparent-primary-default);
+  background-color: var(
+    --button-dark-color-background-transparent-primary-default
+  );
+  color: var(--button-dark-color-text-transparent-primary-default);
+}
+
+.button[data-background="transparent"][data-mode="dark"]:hover {
+  border-color: var(--button-dark-color-border-transparent-primary-hover);
+  background-color: var(
+    --button-dark-color-background-transparent-primary-hover
+  );
+}
+
+.button[data-background="transparent"][data-mode="dark"]:active {
+  box-shadow: none;
+  background-color: var(
+    --button-dark-color-background-transparent-primary-active
+  );
+}
+
+.button[data-variant="neutral"][data-background="outlined"][data-mode="dark"] {
+  border-color: var(--button-dark-color-border-outlined-neutral-default);
+  box-shadow: none;
+  background-color: var(
+    --button-dark-color-background-outlined-neutral-default
+  );
+  color: var(--button-dark-color-text-outlined-neutral-default);
+}
+.button[data-variant="neutral"][data-background="outlined"][data-mode="dark"]:hover {
+  background-color: var(--button-dark-color-background-outlined-neutral-hover);
+}
+
+.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"] {
+  border-color: var(--button-dark-color-border-transparent-neutral-default);
+  background-color: var(
+    --button-dark-color-background-transparent-neutral-default
+  );
+  color: var(--button-dark-color-text-transparent-neutral-default);
+}
+
+.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"]:hover {
+  border-color: var(--button-dark-color-border-transparent-neutral-hover);
+  background-color: var(
+    --button-dark-color-background-transparent-neutral-hover
+  );
+}
+
+.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"]:active {
+  box-shadow: none;
+  border-color: var(--button-dark-color-border-transparent-neutral-active);
+  background-color: var(
+    --button-dark-color-background-transparent-neutral-active
+  );
+}
+
+.button[data-mode="dark"][data-variant="danger"] {
+  border-color: var(--button-dark-color-border-solid-danger-default);
+  box-shadow: none;
+}
+
+.button[data-mode="dark"][data-variant="danger"]:hover {
+  border-color: var(--button-dark-color-border-solid-danger-hover);
+  background-color: var(--button-dark-color-background-solid-danger-hover);
+  box-shadow: none;
+}
+
+.button[data-variant="danger"][data-background="outlined"][data-mode="dark"] {
+  border-color: var(--button-dark-color-border-outlined-danger-default);
+  box-shadow: none;
+  background-color: var(--button-dark-color-background-outlined-danger-default);
+  color: var(--button-dark-color-text-outlined-danger-default);
+}
+
+.button[data-variant="danger"][data-background="outlined"][data-mode="dark"]:hover {
+  box-shadow: none;
+  background-color: var(--color-danger-1000);
+  color: var(--color-danger-400);
+}
+
+.button:disabled,
+.button[data-variant="danger"]:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: var(--button-opacity-disabled);
+  box-shadow: none;
+}
+
+.button:is([data-loading="true"]) {
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.button[data-mode="dark"]:focus-visible {
+  outline-color: var(--color-primary-300);
+}

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

@@ -0,0 +1,190 @@
+button {
+  all: unset;
+}
+
+.indicator {
+  display: flex;
+}
+
+.checkbox {
+  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);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  height: var(--checkbox-size-md-height);
+  position: relative;
+  transition: background-color var(--checkbox-transition-speed) ease;
+  width: var(--checkbox-size-md-width);
+  min-width: var(--checkbox-size-md-width);
+}
+/* Default Uncheck Hover */
+.checkbox:not([data-disabled]):hover:not([data-state="checked"]):not(
+    :indeterminate
+  )::before {
+  background-color: var(--checkbox-light-color-background-primary-hover);
+  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);
+  transition: opacity 0.25s ease;
+}
+/* Default Checked */
+.checkbox[data-state="checked"] {
+  background-color: var(--checkbox-light-color-background-primary-active);
+  border-color: var(--checkbox-light-color-border-primary-active);
+}
+/* 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);
+}
+/* Disabled */
+.checkbox[data-disabled],
+.checkbox[data-error="true"][data-disabled],
+.checkbox[data-mode="dark"][data-disabled] {
+  pointer-events: none;
+  opacity: var(--checkbox-opacity-disabled);
+}
+.checkbox[data-error="true"] {
+  background-color: var(--checkbox-light-color-background-danger-default);
+}
+/* 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);
+}
+/* Indeterminate Default */
+.checkbox:indeterminate {
+  background-color: var(
+    --checkbox-light-color-background-indeterminate-default
+  );
+}
+
+/* Checkbox - Size */
+.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);
+}
+
+/* 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(
+    [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);
+}
+
+.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);
+}
+.tile[data-altbackground="true"] {
+  background-color: var(
+    --checkbox-tile-light-color-background-altbackground-default
+  );
+  border-color: var(--checkbox-tile-light-color-border-altbackground-default);
+}
+
+/* Default Checked */
+.tile:has(.root[data-state="checked"]) {
+  background-color: var(--checkbox-tile-light-color-background-primary-active);
+}
+
+.tile[data-state="checked"] {
+  background-color: var(--checkbox-tile-light-color-background-primary-active);
+  border-color: var(--checkbox-tile-light-color-border-primary-active);
+}
+
+.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);
+}
+
+.tile[data-mode="dark"] {
+  background-color: var(--checkbox-tile-dark-color-background-primary-default);
+  border-color: var(--checkbox-tile-dark-color-border-primary-default);
+}
+.tile[data-altbackground="checked"][data-mode="dark"] {
+  background-color: var(
+    --checkbox-tile-dark-color-background-altbackground-default
+  );
+}
+
+/* Default Checked */
+.tile[data-mode="dark"]:has(.root[data-state="checked"]) {
+  background-color: var(--checkbox-tile-dark-color-background-primary-active);
+}
+.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);
+}
+.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);
+}
+.tile[data-mode="dark"][data-state="checked"]:hover {
+  background-color: var(--checkbox-tile-dark-color-background-primary-active);
+}

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

@@ -0,0 +1,26 @@
+.message {
+  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"] {
+  font: var(--field-message-size-sm-typography);
+}
+
+.message[data-error="true"] {
+  color: var(--field-message-light-color-text-danger-default);
+}
+
+.message[aria-disabled="true"] {
+  opacity: var(--field-message-opacity-disabled);
+}
+
+.message[data-mode="dark"] {
+  color: var(--field-message-dark-color-text-danger-default);
+}
+
+.message[data-error="true"][data-mode="dark"] {
+  color: var(--field-message-dark-color-text-danger-default);
+}

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

@@ -0,0 +1,21 @@
+.label {
+  box-sizing: border-box;
+  color: var(--form-label-light-color-text-primary-default);
+  font: var(--form-label-size-md-typography);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--form-label-size-md-gap);
+}
+.label[data-size="sm"] {
+  font: var(--form-label-size-sm-typography);
+}
+.label[data-mode="dark"] {
+  color: var(--form-label-dark-color-text-primary-default);
+}
+.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);
+}