@kofile/gds-foundations 0.0.10 → 1.0.0-alpha

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

@@ -0,0 +1,164 @@
+.root {
+  width: var(--input-elements-root-size-xl-width);
+  display: flex;
+}
+.root:focus-within {
+  border-radius: var(--input-elements-text-field-size-xl-border-radius);
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+}
+.input {
+  background-color: var(
+    --input-light-elements-text-field-color-background-primary-default
+  );
+  border-radius: var(--input-elements-text-field-size-xl-border-radius);
+  border-color: var(
+    --input-light-elements-text-field-color-border-primary-default
+  );
+  border-style: solid;
+  border-width: var(--input-elements-text-field-size-xl-border-width);
+  box-sizing: border-box;
+  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-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"] {
+  padding-block: var(--input-elements-text-field-size-lg-padding-block);
+  height: var(--input-elements-text-field-size-lg-height);
+  font: var(--input-elements-text-field-size-lg-typography);
+}
+.input[data-size="lg"] + .icon {
+  height: var(--input-elements-icon-size-lg-height);
+}
+.input[data-size="md"] {
+  padding-block: var(--input-elements-text-field-size-md-padding-block);
+  height: var(--input-elements-text-field-size-md-height);
+  font: var(--input-elements-text-field-size-md-typography);
+}
+.input[data-size="md"] + .icon {
+  height: var(--input-elements-icon-size-md-height);
+}
+.root[data-altbackground="true"] .input,
+.root[data-altbackground="true"] .icon {
+  background-color: var(
+    --input-light-elements-text-field-color-background-altbackground-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 {
+  background-color: var(
+    --input-light-elements-text-field-color-background-error-default
+  );
+  border-color: var(
+    --input-light-elements-text-field-color-border-error-default
+  );
+}
+
+.root[data-error="true"]:focus-within {
+  border-radius: var(--input-elements-text-field-size-xl-border-radius);
+  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
+}
+.input[data-disabled="true"],
+.input[data-disabled="true"] + .icon {
+  opacity: var(--input-disabled-opacity);
+  pointer-events: none;
+}
+.icon {
+  background-color: var(
+    --input-light-elements-icon-color-background-primary-default
+  );
+  border-radius: var(--input-elements-icon-size-xl-border-radius);
+  border-color: var(--input-light-elements-icon-color-border-primary-default);
+  border-width: var(--input-elements-icon-size-xl-border-width);
+  border-style: solid;
+  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-end: var(--input-elements-icon-size-xl-padding-block-end);
+}
+.icon[data-size="md"] {
+  height: var(--input-elements-icon-size-md-height);
+}
+.icon[data-size="lg"] {
+  height: var(--input-elements-icon-size-lg-height);
+}
+.addon {
+  background-color: var(
+    --input-light-elements-addon-color-background-primary-default
+  );
+  border-color: var(--input-light-elements-addon-color-border-primary-default);
+  border-width: var(--input-elements-addon-size-xl-border-width);
+  border-style: solid;
+  border-radius: var(--input-elements-addon-size-xl-border-radius);
+  color: var(--input-light-elements-addon-color-text-primary-default);
+  height: var(--input-elements-addon-size-xl-height);
+  display: flex;
+  align-items: center;
+  padding-inline: var(--input-elements-addon-size-xl-padding-inline);
+  z-index: 10;
+}
+.addon[data-size="md"] {
+  height: var(--input-elements-addon-size-md-height);
+}
+.addon[data-size="lg"] {
+  height: var(--input-elements-addon-size-lg-height);
+}
+
+/* Dark Mode */
+.root[data-mode="dark"][data-altbackground="true"] .input,
+.root[data-mode="dark"][data-altbackground="true"] .icon {
+  background-color: var(
+    --input-dark-elements-text-field-color-background-altbackground-default
+  );
+}
+.root[data-mode="dark"]:focus-within {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.24);
+}
+.root[data-mode="dark"][data-error="true"]:focus-within {
+  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 {
+  background-color: var(
+    --input-dark-elements-text-field-color-background-error-default
+  );
+  border-color: var(
+    --input-dark-elements-text-field-color-border-error-default
+  );
+}
+.input[data-mode="dark"],
+.input[data-mode="dark"] + .icon {
+  background-color: var(
+    --input-dark-elements-text-field-color-background-primary-default
+  );
+  border-color: var(
+    --input-dark-elements-text-field-color-border-primary-default
+  );
+  color: var(--input-dark-elements-text-field-color-text-primary-default);
+}
+.input[data-mode="dark"]::placeholder {
+  color: var(--input-dark-elements-text-field-color-text-error-placeholder);
+}
+.icon[data-mode="dark"] {
+  background-color: var(
+    --input-dark-elements-icon-color-background-primary-default
+  );
+  border-color: var(--input-dark-elements-icon-color-border-primary-default);
+  color: var(--input-dark-elements-icon-color-text-primary-default);
+}
+.addon[data-mode="dark"] {
+  background-color: var(
+    --input-dark-elements-addon-color-background-primary-default
+  );
+  border-color: var(--input-dark-elements-addon-color-border-primary-default);
+}

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

@@ -0,0 +1,21 @@
+.label {
+  all: unset;
+  box-sizing: border-box;
+  color: var(--label-light-color-text-primary-default);
+  cursor: default;
+  font: var(--label-size-md-typography);
+}
+
+.label[aria-disabled="true"] {
+  opacity: var(--label-opacity-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.label[data-size="sm"] {
+  font: var(--label-size-sm-typography);
+}
+
+.label[data-mode="dark"] {
+  color: var(--label-dark-color-text-primary-default);
+}

package/build/css/components/link.module.css

@@ -0,0 +1,52 @@
+.link {
+  all: unset;
+  box-sizing: border-box;
+  color: var(--link-light-color-text-primary-default);
+  cursor: pointer;
+  font: var(--link-size-xl-typography);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--link-gap-default);
+  vertical-align: top;
+  text-decoration: underline;
+}
+.link:hover {
+  color: var(--link-light-color-text-primary-hover);
+}
+.link:active {
+  color: var(--link-light-color-text-primary-active);
+}
+.link[data-size="3xs"] {
+  font: var(--link-size-3xs-typography);
+}
+.link[data-size="2xs"] {
+  font: var(--link-size-2xs-typography);
+}
+.link[data-size="xs"] {
+  font: var(--link-size-xs-typography);
+}
+.link[data-size="sm"] {
+  font: var(--link-size-sm-typography);
+}
+.link[data-size="md"] {
+  font: var(--link-size-md-typography);
+}
+.link[data-size="lg"] {
+  font: var(--link-size-lg-typography);
+}
+.link[data-size="xl"] {
+  font: var(--link-size-xl-typography);
+}
+.link[data-weight="regular"] {
+  font-weight: var(--link-weight-regular);
+}
+
+.link[data-mode="dark"] {
+  color: var(--link-dark-color-text-primary-default);
+}
+.link[data-mode="dark"]:hover {
+  color: var(--link-dark-color-text-primary-hover);
+}
+.link[data-mode="dark"]:active {
+  color: var(--link-dark-color-text-primary-active);
+}

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

@@ -0,0 +1,151 @@
+button {
+  all: unset;
+}
+
+.root {
+  display: flex;
+}
+.root[data-orientation="vertical"] {
+  display: grid;
+  row-gap: var(--spacing-xs);
+}
+
+.item {
+  background-color: var(--radio-group-light-color-background-primary-default);
+  display: inline;
+  height: var(--radio-group-size-md-height);
+  min-width: var(--radio-group-size-md-min-width);
+  width: var(--radio-group-size-md-width);
+  border-color: var(--radio-group-light-color-border-primary-default);
+  border-style: solid;
+  border-width: var(--radio-group-size-md-border-width);
+  border-radius: var(--radio-group-size-md-border-radius);
+}
+.item:focus-visible {
+  outline: var(--radio-group-outline-primary-width) solid
+    var(--radio-group-outline-primary-fill);
+  outline-offset: var(--radio-group-outline-primary-offset);
+}
+.item[aria-checked="true"] {
+  background-color: var(--radio-group-light-color-background-primary-active);
+}
+.item[data-size="sm"] {
+  height: var(--radio-group-size-sm-height);
+  min-width: var(--radio-group-size-sm-min-width);
+  width: var(--radio-group-size-sm-width);
+}
+.item[data-error="true"] {
+  background-color: var(--radio-group-light-color-background-danger-default);
+  border-color: var(--radio-group-light-color-border-danger-default);
+}
+.item[data-disabled] {
+  opacity: var(--radio-group-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.item[data-mode="dark"] {
+  background-color: var(--radio-group-dark-color-background-primary-default);
+  border-color: var(--radio-group-dark-color-border-primary-default);
+}
+.item[data-mode="dark"][aria-checked="true"] {
+  background-color: var(--radio-group-dark-color-background-primary-active);
+  border-color: var(--radio-group-dark-color-border-primary-active);
+}
+.item[data-mode="dark"][data-error="true"] {
+  background-color: var(--radio-group-dark-color-background-danger-default);
+  border-color: var(--radio-group-dark-color-border-danger-default);
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.indicator::after {
+  content: "";
+  display: block;
+  width: var(--radio-group-elements-indicator-size-md-width);
+  height: var(--radio-group-elements-indicator-size-md-height);
+  border-radius: var(--radio-group-elements-indicator-size-md-border-radius);
+  background-color: var(--color-neutral-lightest);
+  box-shadow: var(--radio-group-elements-indicator-shadow);
+}
+.indicator[data-size="sm"]::after {
+  border-radius: var(--radio-group-elements-indicator-size-sm-border-radius);
+}
+
+.tile {
+  box-sizing: border-box;
+  align-items: center;
+  padding-block: var(--radio-group-tile-size-md-padding-block);
+  padding-inline: var(--radio-group-tile-size-md-padding-inline);
+  border-radius: var(--radio-group-tile-size-md-border-radius);
+  background-color: var(
+    --radio-group-tile-light-color-background-primary-default
+  );
+  border: var(--radio-group-tile-size-md-border-width) solid
+    var(--radio-group-tile-light-color-border-primary-default);
+}
+.tile[data-altbackground="true"] {
+  background-color: var(
+    --radio-group-tile-light-color-background-altbackground-default
+  );
+  border-color: var(
+    --radio-group-tile-light-color-border-altbackground-default
+  );
+}
+
+/* Default Checked */
+.tile:has(.root[data-state="checked"]) {
+  background-color: var(
+    --radio-group-tile-light-color-background-primary-active
+  );
+}
+
+.tile[data-state="checked"] {
+  background-color: var(
+    --radio-group-tile-light-color-background-primary-active
+  );
+  border-color: var(--radio-group-tile-light-color-border-primary-active);
+}
+
+.tile:not([data-state="checked"]):hover {
+  background-color: var(
+    --radio-group-tile-light-color-background-primary-hover
+  );
+  border-color: var(--radio-group-tile-light-color-border-primary-hover);
+}
+
+.tile[data-mode="dark"] {
+  background-color: var(
+    --radio-group-tile-dark-color-background-primary-default
+  );
+}
+.tile[data-altbackground="checked"][data-mode="dark"] {
+  background-color: var(
+    --radio-group-tile-dark-color-background-altbackground-default
+  );
+}
+
+/* Default Checked */
+.tile[data-mode="dark"]:has(.root[data-state="checked"]) {
+  background-color: var(
+    --radio-group-tile-dark-color-background-primary-active
+  );
+}
+.tile[data-mode="dark"]:hover {
+  background-color: var(--radio-group-tile-dark-color-background-primary-hover);
+}
+.tile[data-mode="dark"][data-state="checked"] {
+  background-color: var(
+    --radio-group-tile-dark-color-background-primary-active
+  );
+}
+.tile[data-mode="dark"][data-state="checked"]:hover {
+  background-color: var(
+    --radio-group-tile-dark-color-background-primary-active
+  );
+}

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

@@ -0,0 +1,235 @@
+/* reset */
+button {
+  all: unset;
+}
+
+.trigger {
+  box-sizing: border-box;
+  background-color: var(
+    --select-light-elements-trigger-color-background-primary-default
+  );
+  border-color: var(
+    --select-light-elements-trigger-color-border-primary-default
+  );
+  border-style: solid;
+  border-width: var(--select-elements-trigger-size-xl-border-width);
+  border-radius: var(--select-elements-trigger-size-xl-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--select-elements-trigger-size-xl-padding-inline);
+  padding-block: var(--select-elements-trigger-size-xl-padding-block);
+  max-height: var(--select-elements-trigger-size-xl-max-height);
+  width: var(--select-elements-trigger-size-xl-width);
+}
+.trigger[data-disabled] {
+  pointer-events: none;
+  opacity: var(--select-elements-trigger-opacity-disabled);
+  user-select: none;
+}
+.trigger[data-altbackground="true"] {
+  background-color: var(
+    --select-light-elements-trigger-color-background-altbackground-default
+  );
+}
+.trigger[data-error="true"] {
+  border-color: var(
+    --select-light-elements-trigger-color-border-danger-default
+  );
+  background-color: var(
+    --select-light-elements-trigger-color-background-danger-default
+  );
+}
+.trigger:focus-visible[data-error="true"] {
+  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 {
+  border-color: var(--select-light-elements-trigger-color-border-primary-focus);
+  box-shadow: var(--select-light-elements-trigger-color-shadow-primary-focus);
+}
+.trigger[data-size="md"] {
+  padding-inline: var(--select-elements-trigger-size-md-padding-inline);
+  padding-block: var(--select-elements-trigger-size-md-padding-block);
+  max-height: var(--select-elements-trigger-size-md-max-height);
+}
+.trigger[data-size="lg"] {
+  padding-inline: var(--select-elements-trigger-size-lg-padding-inline);
+  padding-block: var(--select-elements-trigger-size-lg-padding-block);
+  max-height: var(--select-elements-trigger-size-lg-max-height);
+}
+
+.content {
+  --select-dropdown-menu-width: var(--radix-dropdown-menu-width);
+  background-color: var(
+    --select-light-elements-content-color-background-primary-default
+  );
+  border-color: var(
+    --select-light-elements-content-color-border-primary-default
+  );
+  border-radius: var(--select-elements-content-size-lg-border-radius);
+  border-width: var(--select-elements-content-size-lg-border-width);
+  position: relative;
+  overflow-y: auto;
+  border-style: solid;
+  width: var(--radix-dropdown-menu-trigger-width);
+  max-width: var(--select-elements-content-size-lg-max-width);
+  max-height: var(--select-elements-content-size-lg-max-height);
+  z-index: var(--select-elements-content-size-lg-z-index);
+}
+.content::-webkit-scrollbar {
+  width: var(--select-elements-content-scrollbar-size-lg-width);
+  background-color: var(
+    --select-light-elements-content-scrollbar-color-background-primary-default
+  );
+  border: var(--select-elements-content-scrollbar-size-lg-border-width) solid
+    var(--select-light-elements-content-scrollbar-color-border-primary-default);
+  border-right: none;
+  border-radius: var(--select-elements-content-scrollbar-size-lg-border-radius);
+}
+
+.content::-webkit-scrollbar-thumb {
+  border-width: var(--select-elements-content-scrollbar-size-lg-border-width);
+  border-color: var(
+    --select-light-elements-content-scrollbar-thumb-color-border-primary-default
+  );
+  border-style: solid;
+  background-color: var(
+    --select-light-elements-content-scrollbar-thumb-color-background-primary-default
+  );
+  border-radius: var(--select-elements-content-scrollbar-size-lg-border-radius);
+  height: var(--select-elements-content-scrollbar-thumb-size-lg-height);
+}
+
+.item {
+  background-color: var(
+    --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-inline: var(--select-elements-menu-item-size-lg-padding-inline);
+}
+.item[data-disabled] {
+  opacity: var(--select-elements-menu-item-opacity-disabled);
+}
+.item[data-highlighted],
+.sub-trigger[data-highlighted],
+.item-radio[data-highlighted],
+.item-checkbox[data-highlighted] {
+  background-color: var(
+    --select-light-elements-menu-item-color-background-primary-hover
+  );
+}
+.item[data-state="checked"],
+.item[aria-checked="true"] {
+  background-color: var(
+    --select-light-elements-menu-item-color-background-primary-active
+  );
+}
+
+.separator {
+  height: var(--select-elements-separator-size-lg-height);
+  background-color: var(
+    --select-light-elements-separtor-color-background-primary-default
+  );
+}
+
+/* .separator {
+  height: var(--select-elements-separator-size-lg-height);
+  background-color: var(
+    --select-light-elements-separtor-color-background-primary-default
+  );
+} */
+
+.info {
+  margin: 0 auto;
+  margin-right: 0;
+  color: var(--select-light-elements-info-color-text-primary-default);
+  font: var(--select-elements-info-size-lg-typography);
+}
+
+/* DARK */
+.trigger[data-mode="dark"] {
+  background-color: var(
+    --select-dark-elements-trigger-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-trigger-color-border-primary-default
+  );
+}
+.trigger[data-mode="dark"][data-altbackground="true"] {
+  background-color: var(
+    --select-dark-elements-trigger-color-background-altbackground-default
+  );
+}
+.trigger[data-mode="dark"][data-error="true"] {
+  border-color: var(--select-dark-elements-trigger-color-border-danger-default);
+  background-color: var(
+    --select-dark-elements-trigger-color-background-danger-default
+  );
+}
+.trigger:focus-visible[data-mode="dark"][data-error="true"] {
+  border-color: var(--select-dark-elements-trigger-color-border-danger-focus);
+  focus-color: var(--select-dark-elements-trigger-color-shadow-danger-focus);
+}
+.trigger[data-mode="dark"]:focus-visible {
+  border-color: var(--select-dark-elements-trigger-color-border-primary-focus);
+  box-shadow: var(--select-dark-elements-trigger-color-shadow-primary-focus);
+}
+
+.content[data-mode="dark"] {
+  background-color: var(
+    --select-dark-elements-content-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-color-border-primary-default
+  );
+}
+.content[data-mode="dark"]::-webkit-scrollbar {
+  background-color: var(
+    --select-dark-elements-content-scrollbar-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-scrollbar-color-border-primary-default
+  );
+}
+
+.content[data-mode="dark"]::-webkit-scrollbar-thumb {
+  background-color: var(
+    --select-dark-elements-content-scrollbar-thumb-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-scrollbar-thumb-color-border-primary-default
+  );
+}
+
+.item[data-mode="dark"] {
+  background-color: var(
+    --select-dark-elements-menu-item-color-background-primary-default
+  );
+  color: var(--select-dark-elements-menu-item-color-text-primary-default);
+}
+.item[data-disabled][data-mode="dark"] {
+  opacity: var(--select-elements-menu-item-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"] {
+  background-color: var(
+    --select-dark-elements-menu-item-color-background-primary-hover
+  );
+}
+.item[data-state="checked"][data-mode="dark"],
+.item[aria-checked="true"][data-mode="dark"] {
+  background-color: var(
+    --select-dark-elements-menu-item-color-background-primary-active
+  );
+}
+
+.info[data-mode="dark"] {
+  color: var(--select-dark-elements-info-color-text-primary-default);
+}