@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/menu.module.css

@@ -0,0 +1,318 @@
+.trigger {
+  --gds-menu-trigger-width: 100%;
+
+  box-sizing: border-box;
+  background-color: var(--color-neutral-200);
+  border-color: var(--color-neutral-500);
+  border-style: solid;
+  border-width: var(--border-width-sm);
+  border-radius: var(--primitive-6);
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--spacing-md);
+  padding-block: var(--spacing-sm);
+  max-height: var(--spacing-3xl);
+  width: var(--gds-select-dropdown-menu-width, 100%);
+}
+.trigger[data-disabled],
+.trigger[disabled] {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+  user-select: none;
+}
+.trigger[data-altbackground="true"] {
+  background-color: var(--color-neutral-lightest);
+}
+.trigger[data-error="true"] {
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-100);
+}
+.trigger:focus-visible[data-error="true"] {
+  border-color: var(--color-danger-600);
+  box-shadow: 0 0 0 0.375rem rgba(209, 40, 40, 0.16);
+}
+.trigger:focus-visible,
+.trigger:focus {
+  border-color: var(--color-primary-400);
+  box-shadow: 0 0 0 0.375rem rgba(12, 87, 205, 0.16);
+}
+.trigger[data-size="md"] {
+  padding-inline: var(--spacing-xs);
+  padding-block: var(--spacing-2xs);
+  max-height: var(--spacing-xl);
+}
+.trigger[data-size="lg"] {
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--primitive-6);
+  max-height: var(--spacing-2xl);
+}
+
+.content,
+.container {
+  --gds-select-dropdown-menu-width: var(--radix-dropdown-menu-width);
+  background-color: var(--color-neutral-lightest);
+  border-color: var(--color-neutral-300);
+  border-radius: var(--primitive-6);
+  border-width: var(--border-width-sm);
+  position: relative;
+  overflow-y: auto;
+  border-style: solid;
+  width: var(--radix-dropdown-menu-trigger-width);
+  max-width: var(--menu-width);
+  z-index: var(--elevation-499);
+  text-align: center;
+}
+.content::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollable {
+  max-height: 256px;
+  overflow-y: auto;
+}
+
+.scrollable::-webkit-scrollbar {
+  will-change: transform;
+  width: var(--spacing-sm);
+  background-color: var(--color-neutral-100);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
+  border-right: none;
+  border-radius: var(--primitive-6);
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  border-width: var(--border-width-sm);
+  border-color: var(--color-neutral-500);
+  border-style: solid;
+  background-color: var(--color-neutral-300);
+  border-radius: var(--primitive-6);
+  max-height: 128px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.list:focus {
+  outline: none;
+}
+
+.item {
+  background-color: var(--color-neutral-lightest);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  outline: none;
+  padding-block: var(--primitive-6);
+  padding-inline: var(--spacing-sm);
+}
+.item[data-disabled] {
+  opacity: var(--opacity-disabled);
+}
+.item[data-highlighted],
+.item:focus-visible,
+.item:focus,
+.item:hover,
+.sub-trigger[data-highlighted],
+.item-radio[data-highlighted],
+.item-checkbox[data-highlighted] {
+  background-color: var(--color-neutral-200);
+}
+.item[data-state="checked"],
+.item[data-checked="true"],
+.item[aria-checked="true"] {
+  background-color: var(--color-primary-200);
+}
+
+.item[data-state="checked"][data-highlighted],
+.item[data-checked="true"][data-highlighted],
+.item[aria-checked="true"][data-highlighted] {
+  background-color: var(--color-neutral-200);
+}
+
+/* .separator {
+  height: var(--border-width-sm);
+  background-color: var(--color-neutral-300);
+}
+
+.separator[data-mode="dark"] {
+  background-color: var(--color-neutral-800);
+} */
+
+.controls {
+  background-color: var(--color-neutral-lightest);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-300);
+  z-index: 1;
+  position: sticky;
+  width: 100%;
+  padding-block-start: var(--spacing-2xs);
+  top: 0;
+}
+
+.controls[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-darkest);
+}
+
+.selection {
+  display: flex;
+  align-items: center;
+}
+
+.selection[data-mode="dark"] {
+  border-bottom: var(--border-width-sm) solid var(--color-neutral-800);
+}
+
+.search {
+  padding: var(--spacing-xs);
+}
+
+.count {
+  margin: 0 auto;
+  margin-right: var(--spacing-xs);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-neutral-600);
+  display: flex;
+  align-items: center;
+}
+
+.info {
+  margin: 0 auto;
+  margin-right: 0;
+  color: var(--color-neutral-600);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  line-heights: var(--line-heights-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+}
+
+/* DARK */
+.trigger[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-600);
+}
+.trigger[data-mode="dark"][data-altbackground="true"] {
+  background-color: var(--color-neutral-darkest);
+}
+.trigger[data-mode="dark"][data-error="true"] {
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-1000);
+}
+.trigger:focus-visible[data-mode="dark"][data-error="true"] {
+  border-color: var(--color-danger-600);
+  focus-color: 0 0 0 0.375rem rgba(209, 40, 40, 0.24);
+}
+.trigger[data-mode="dark"]:focus-visible {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 0.375rem rgba(12, 87, 205, 0.24);
+}
+
+.content[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-800);
+}
+.content[data-mode="dark"]::-webkit-scrollbar {
+  display: none;
+}
+
+.content[data-mode="dark"] > .scrollable::-webkit-scrollbar {
+  background-color: var(--color-neutral-900);
+  border-color: var(--color-neutral-800);
+}
+
+.content[data-mode="dark"] > .scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-700);
+  border-color: var(--color-neutral-500);
+}
+
+.container[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  border-color: var(--color-neutral-800);
+}
+.container[data-mode="dark"]::-webkit-scrollbar {
+  display: none;
+}
+
+.container[data-mode="dark"] > .scrollable::-webkit-scrollbar {
+  background-color: var(--color-neutral-900);
+  border-color: var(--color-neutral-800);
+}
+
+.container[data-mode="dark"] > .scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--color-neutral-700);
+  border-color: var(--color-neutral-500);
+}
+
+.item[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  color: var(--color-neutral-lightest);
+}
+.item[data-disabled][data-mode="dark"] {
+  opacity: var(--opacity-disabled);
+}
+.item[data-highlighted][data-mode="dark"],
+.sub-trigger[data-highlighted][data-mode="dark"],
+.item-radio[data-highlighted][data-mode="dark"],
+.item-checkbox[data-highlighted][data-mode="dark"],
+.item[data-mode="dark"]:hover,
+.item[data-mode="dark"]:focus {
+  background-color: var(--color-neutral-900);
+}
+.item[data-state="checked"][data-mode="dark"],
+.item[data-checked="true"][data-mode="dark"],
+.item[aria-checked="true"][data-mode="dark"] {
+  background-color: var(--color-primary-900);
+}
+
+.info[data-mode="dark"] {
+  color: var(--color-neutral-400);
+}
+
+.count[data-mode="dark"] {
+  color: var(--color-neutral-400);
+}
+
+.icon {
+  min-width: var(--spacing-lg);
+  min-height: var(--spacing-lg);
+  align-self: baseline;
+}
+
+.heading {
+  display: inline-block;
+  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);
+  color: var(--color-neutral-600);
+  padding-block: var(--primitive-6);
+  padding-inline: var(--spacing-sm);
+}
+
+.heading[data-mode="dark"] {
+  color: var(--color-neutral-500);
+}
+
+.label {
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
+  color: var(--color-neutral-darkest);
+}
+
+.label[data-mode="dark"] {
+  font-family: var(--font-famililes-default);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
+  color: var(--color-neutral-lightest);
+}

package/build/css/components/modal.module.css

@@ -0,0 +1,102 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+}
+
+.overlay[data-mode="dark"] {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+}
+
+.content {
+  background-color: var(--color-neutral-lightest);
+  border-radius: var(--primitive-6);
+  box-shadow: var(--shadow-md);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--layout-md);
+}
+.content:focus {
+  outline: none;
+}
+.content[data-size="spacious"] {
+  width: var(--layout-sm);
+}
+.content[data-mode="dark"] {
+  background-color: var(--color-neutral-darkest);
+}
+
+.title {
+  margin: var(--spacing-4xs);
+  /* margin-block-start: var(--spacing-sm); */
+  color: var(--color-neutral-darkest);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-xl);
+  line-height: var(--line-heights-xl);
+  text-align: var(center);
+}
+.title[data-mode="dark"] {
+  color: var(--color-neutral-lightest);
+}
+
+.description {
+  margin: var(--spacing-4xs);
+  margin-block-start: var(--spacing-sm);
+  color: var(--color-neutral-400);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
+  text-align: var(--center);
+}
+.description[data-mode="dark"] {
+  color: var(--color-neutral-lightest);
+}
+
+.icon {
+  background-color: var(--color-neutral-200);
+  width: min-content;
+  display: flex;
+  justify-content: center;
+  border-radius: var(--primitive-6);
+  padding: var(--spacing-2xs);
+  margin: 0 auto;
+}
+.icon[data-type="destructive"],
+.icon[data-type="error"] {
+  background-color: var(--color-danger-100);
+}
+.icon[data-type="success"] {
+  background-color: var(--color-success-100);
+}
+.icon[data-type="loading"],
+.icon[data-mode="dark"][data-type="loading"] {
+  background-color: transparent;
+}
+.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(--color-danger-900);
+}
+.icon[data-mode="dark"][data-type="success"] {
+  background-color: var(--color-success-900);
+}
+
+.content[data-size="md"] {
+  width: var(--layout-md);
+}
+.content[data-size="lg"] {
+  width: var(--layout-lg);
+}
+.content[data-size="xl"] {
+  width: var(--layout-xl);
+}