@kofile/gds-foundations 1.1.2 → 1.2.0

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

@@ -5,13 +5,11 @@
   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-family: var(--badge-size-lg-typography-font-family);
-  font-size: var(--badge-size-lg-typography-font-size);
-  font-weight: var(--badge-size-lg-typography-font-weight);
-  letter-spacing: var(--badge-size-lg-typography-letter-spacing);
-  line-height: var(--badge-size-lg-typography-line-height);
-  text-decoration: var(--badge-size-lg-typography-text-decoration);
-
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-heights-xs);
   display: inline-flex;
   align-items: center;
   gap: var(--badge-gap-spacing);
@@ -25,24 +23,18 @@
   width: fit-content;
 }
 .badge[data-size="md"] {
-  font-family: var(--badge-size-md-typography-font-family);
-  font-size: var(--badge-size-md-typography-font-size);
-  font-weight: var(--badge-size-md-typography-font-weight);
-  letter-spacing: var(--badge-size-md-typography-letter-spacing);
-  line-height: var(--badge-size-md-typography-line-height);
-  text-decoration: var(--badge-size-md-typography-text-decoration);
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
   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-family: var(--badge-size-sm-typography-font-family);
-  font-size: var(--badge-size-sm-typography-font-size);
-  font-weight: var(--badge-size-sm-typography-font-weight);
-  letter-spacing: var(--badge-size-sm-typography-letter-spacing);
-  line-height: var(--badge-size-sm-typography-line-height);
-  text-decoration: var(--badge-size-sm-typography-text-decoration);
+  font-size: var(--font-size-3xs);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-heights-3xs);
   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);

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

@@ -0,0 +1,340 @@
+.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;
+  /* color: var(--button-light-color-text-solid-primary-default); */
+  /* cursor: pointer; */
+  /* display: inline-flex; */
+  /* gap: var(--button-size-xl-spacing); */
+  /* align-items: center; */
+  /* font-family: var(--font-families-default); */
+  /* font-size: var(--font-size-lg); */
+  /* font-weight: var(--font-weights-semibold); */
+  /* letter-spacing: var(--letter-spacing-lg); */
+  /* line-height: var(--line-heights-lg); */
+  /* 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:not(:disabled):focus-visible {
+  outline: var(--button-outline-primary-offset)
+    var(--button-outline-primary-style) var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
+} */
+/* .button:focus-visible {
+  outline: var(--button-outline-primary-offset)
+    var(--button-outline-primary-style) var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
+} */
+/* .button:not(:disabled):active,
+.button[data-background="outlined"]:not(:disabled):active {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+} */
+
+/* .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"],
+.button[data-background="transparent"]:disabled {
+  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"]:not(:disabled):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-size: var(--font-size-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
+  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-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
+  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[data-background="outlined"]:disabled {
+  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="transparent"]:disabled {
+  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:is([data-loading="true"]) {
+  opacity: 0.8;
+  /* pointer-events: none; */
+}
+
+.button[data-mode="dark"]:focus-visible {
+  outline-color: var(--color-primary-300);
+}