@kofile/gds-foundations 1.2.2 → 1.4.0

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

@@ -1,10 +1,32 @@
+:root,
+:host {
+  --badge-bg-default: var(--color-neutral-200);
+  --badge-bg-primary: var(--color-primary-200);
+  --badge-bg-success: var(--color-success-200);
+  --badge-bg-danger: var(--color-danger-200);
+  --badge-bg-warning: var(--color-warning-200);
+  --badge-bg-neutral-light: var(--color-neutral-200);
+  --badge-text-color: var(--color-neutral-darkest);
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --badge-bg-primary: var(--color-primary-900);
+    --badge-bg-success: var(--color-success-900);
+    --badge-bg-danger: var(--color-danger-900);
+    --badge-bg-warning: var(--color-warning-900);
+    --badge-bg-neutral-light: var(--color-neutral-800);
+    --badge-text-color: var(--color-neutral-lightest);
+  }
+} */
+
 .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);
+  background-color: var(--badge-bg-default);
+  border-start-start-radius: var(--border-radius-xs);
+  border-start-end-radius: var(--border-radius-xs);
+  border-end-start-radius: var(--border-radius-xs);
+  border-end-end-radius: var(--border-radius-xs);
+  color: var(--badge-text-color);
   font-family: var(--font-families-default);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-semibold);
@@ -12,13 +34,13 @@
   line-height: var(--line-heights-xs);
   display: inline-flex;
   align-items: center;
-  gap: var(--badge-gap-spacing);
+  gap: var(--spacing-2xs);
   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);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xs);
+  padding-block-start: var(--primitive-6);
+  padding-block-end: var(--primitive-6);
   white-space: nowrap;
   width: fit-content;
 }
@@ -26,66 +48,66 @@
   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);
+  padding-block-start: var(--spacing-3xs);
+  padding-block-end: var(--spacing-3xs);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xs);
 }
 .badge[data-size="sm"] {
   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);
-  padding-inline-end: var(--badge-size-sm-horizontal-padding);
+  padding-block-start: var(--spacing-3xs);
+  padding-block-end: var(--spacing-3xs);
+  padding-inline-start: var(--spacing-2xs);
+  padding-inline-end: var(--spacing-2xs);
 }
 
 .badge[data-color="neutral-light"] {
-  background-color: var(--badge-light-color-background-neutral-light-fill);
+  background-color: var(--color-neutral-200);
 }
 .badge[data-color="neutral-dark"] {
-  background-color: var(--badge-light-color-background-neutral-dark-fill);
+  background-color: var(--color-neutral-300);
 }
 .badge[data-color="primary"] {
-  background-color: var(--badge-light-color-background-primary-fill);
+  background-color: var(--color-primary-200);
 }
 .badge[data-color="success"] {
-  background-color: var(--badge-light-color-background-success-fill);
+  background-color: var(--color-success-200);
 }
 .badge[data-color="danger"] {
-  background-color: var(--badge-light-color-background-danger-fill);
+  background-color: var(--color-danger-200);
 }
 .badge[data-color="warning"] {
-  background-color: var(--badge-light-color-background-warning-fill);
+  background-color: var(--color-warning-200);
 }
 .badge[data-color="highlight"] {
-  background-color: var(--badge-light-color-background-hightlight-fill);
+  background-color: var(--color-highlight-200);
 }
 .badge[data-mode="dark"] {
-  color: var(--badge-dark-color-text-fill);
+  color: var(--color-neutral-lightest);
 }
 .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);
+  color: var(--color-neutral-lightest);
+  background-color: var(--color-neutral-800);
 }
 .badge[data-color="neutral-dark"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-neutral-dark-fill);
+  background-color: var(--color-neutral-900);
 }
 .badge[data-color="primary"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-primary-fill);
+  background-color: var(--color-primary-900);
 }
 .badge[data-color="success"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-success-fill);
+  background-color: var(--color-success-900);
 }
 .badge[data-color="danger"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-danger-fill);
+  background-color: var(--color-danger-900);
 }
 .badge[data-color="warning"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-warning-fill);
+  background-color: var(--color-warning-900);
 }
 .badge[data-color="highlight"][data-mode="dark"] {
-  background-color: var(--badge-dark-color-background-highlight-fill);
+  background-color: var(--color-highlight-900);
 }
 .action:hover {
   background-color: transparent !important;

package/build/css/components/banner.module.css

@@ -0,0 +1,61 @@
+.root {
+  --banner-max-width: var(--layout-lg);
+  position: relative;
+
+  display: flex;
+  align-items: flex-start;
+
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-xs);
+  border-radius: var(--primitive-6);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-md);
+  background-color: var(--color-neutral-200-alpha);
+  border: 1px solid var(--color-neutral-300);
+  color: var(--color-neutral-900);
+  max-width: var(--banner-max-width);
+}
+
+.root[data-status="neutral"] {
+  background-color: var(--color-neutral-200-alpha);
+  color: var(--color-neutral-900);
+}
+.root[data-status="success"] {
+  background-color: var(--color-success-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-success-900);
+}
+.root[data-status="warning"] {
+  background-color: var(--color-warning-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-warning-900);
+}
+.root[data-status="highlight"] {
+  background-color: var(--color-highlight-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-highlight-900);
+}
+.root[data-status="error"] {
+  background-color: var(--color-danger-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-danger-900);
+}
+
+.title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-semibold);
+  line-height: var(--line-heights-xs);
+}
+
+.subtitle {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-2xs);
+}
+
+.root > .dismiss {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  padding-inline: var(--spacing-3xs);
+}