@ibis-design/css 0.6.0 → 0.7.0

package/dist/components/dropdown.css

@@ -0,0 +1,105 @@
+.ibis-dropdown {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+.ibis-dropdown__trigger {
+  all: unset;
+  display: block;
+  width: 100%;
+  cursor: pointer;
+}
+
+/* Override TextInput styles inside trigger */
+.ibis-dropdown__trigger .ibis-input {
+  gap: var(--spacing-0);
+}
+
+.ibis-dropdown__trigger .ibis-input__label-wrapper {
+  display: none;
+}
+
+.ibis-dropdown__trigger .ibis-input__help,
+.ibis-dropdown__trigger .ibis-input__error {
+  display: none;
+}
+
+/* Default field wrapper radius */
+.ibis-dropdown__trigger .ibis-input__field-wrapper {
+  border-radius: var(--border-radius-lg);
+  transition: border-radius var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+/* ↓ ADDED — remove bottom radius on input when open so it connects to menu */
+.ibis-dropdown--open .ibis-dropdown__trigger .ibis-input__field-wrapper {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-color: transparent;
+}
+
+/* Menu */
+.ibis-dropdown__menu {
+  position: absolute;
+  width: 100%;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-primary-950);
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+  border-top: none;
+  margin-top: 0;
+  z-index: 10; /* TODO: replace with token */
+  list-style: none;
+  padding: var(--spacing-0);
+  overflow: hidden;
+}
+
+/* Dividers between items */
+.ibis-dropdown__menu li + li {
+  border-top: 1px solid var(--color-neutral-200);
+}
+
+/* Menu items */
+.ibis-dropdown__item {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-3) var(--spacing-4);
+  cursor: pointer;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-900);
+  text-align: center;
+  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ibis-dropdown__item:hover {
+  background-color: var(--color-primary-400);
+  color: var(--color-white);
+}
+
+/* ↓ CHANGED — scoped to li aria-selected for correct specificity */
+li[aria-selected="true"] .ibis-dropdown__item {
+  background-color: var(--color-primary-500);
+  color: var(--color-white);
+  font-weight: var(--font-weight-bold);
+}
+
+li[aria-selected="true"] .ibis-dropdown__item:hover {
+  background-color: var(--color-primary-700);
+  color: var(--color-white);
+}
+
+.ibis-dropdown__item:focus {
+  outline: none;
+  background-color: var(--color-neutral-200);
+}
+
+/* Disabled */
+.ibis-dropdown__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-5);
+}

package/dist/components/dropdownButton.css

@@ -0,0 +1,81 @@
+.ibis-dropdown-button {
+  position: relative;
+  display: inline-block;
+}
+
+.ibis-caret {
+  margin-left: 0.25em;
+  width: 1em;
+  height: 1em;
+}
+
+.ibis-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--spacing-1);
+  min-width: 160px;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-elevation-sm);
+  z-index: var(--z-index-dropdown);
+  padding: var(--spacing-1);
+  display: flex;
+  flex-direction: column;
+}
+
+/* .ibis-dropdown-menu :global(button) {
+	all: unset;
+	padding: 8px;
+	cursor: pointer;
+	border-radius: 4px; 
+}
+
+.ibis-dropdown-menu :global(button:hover) {
+	background-color: var(--color-neutral-100);
+} */
+
+.ibis-dropdown-menu :global(.ibis-dropdown-menu__item) {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-3) var(--spacing-4);
+  cursor: pointer;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-900);
+  text-align: center;
+  transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ibis-dropdown-menu :global(.ibis-dropdown-menu__item:hover) {
+  background-color: var(--color-primary-400);
+  color: var(--color-white);
+}
+
+.ibis-dropdown-menu :global(.ibis-dropdown-menu__item--selected) {
+  background-color: var(--color-primary-500);
+  color: var(--color-white);
+  font-weight: var(--font-weight-bold);
+}
+
+.ibis-dropdown-menu :global(.ibis-dropdown-menu__item--selected:hover) {
+  background-color: var(--color-primary-700);
+  color: var(--color-white);
+}
+
+.ibis-caret {
+  margin-left: 0.25em;
+  width: 1em;
+  height: 1em;
+  transition: transform var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ibis-caret--open {
+  transform: rotate(180deg);
+}

package/dist/components/pillTab.css

@@ -0,0 +1,59 @@
+.ibis-pill-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--spacing-1) var(--spacing-3);
+  height: 100%;
+  align-self: stretch;
+  border-radius: var(--border-radius-full);
+  /* background: var(--color-neutral-100); */
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background var(--transition-duration-normal),
+    color var(--transition-duration-normal),
+    box-shadow var(--transition-duration-normal);
+}
+
+.ibis-pill-tab__input {
+  display: none;
+}
+
+.ibis-pill-tab__content {
+  font-size: var(--font-size-body-sm);
+  line-height: 1;
+  text-align: center;
+  width: 100%;
+}
+
+/* Active */
+.ibis-pill-tab--active {
+  background: var(--color-primary-700);
+  color: var(--color-white);
+}
+
+/* Hover */
+.ibis-pill-tab:hover:not(.ibis-pill-tab--disabled):not(.ibis-pill-tab--active) {
+  background: var(--color-primary-100);
+  color: var(--color-primary-800);
+}
+
+.ibis-pill-tab--active:hover {
+  background: var(--color-primary-800);
+}
+
+/* Focus (important for accessibility) */
+.ibis-pill-tab__input:focus-visible + .ibis-pill-tab__content {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-full);
+}
+
+/* Disabled */
+.ibis-pill-tab--disabled {
+  opacity: var(--opacity-7);
+  cursor: not-allowed;
+}

package/dist/components/radio.css

@@ -0,0 +1,108 @@
+.ibis-radio {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.ibis-radio__label-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.ibis-radio__label {
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-700);
+}
+
+.ibis-radio__description {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-radio__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  cursor: pointer;
+}
+
+.ibis-radio__input {
+  display: none;
+}
+
+.ibis-radio__circle {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--border-radius-full);
+  border: var(--border-width-default) solid var(--color-neutral-300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    box-shadow var(--transition-duration-normal) var(--transition-timing-default),
+    border-color var(--transition-duration-normal) var(--transition-timing-default),
+    background var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+.ibis-radio__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--border-radius-full);
+  background: transparent;
+}
+
+.ibis-radio__dot--active {
+  background: var(--color-primary-900);
+}
+
+.ibis-radio__text {
+  font-size: var(--font-size-body-md);
+  color: var(--color-text-primary);
+}
+
+.ibis-radio__help {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-radio__error {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-status-error);
+}
+
+.ibis-radio--disabled {
+  opacity: var(--opacity-9);
+  cursor: not-allowed;
+}
+.ibis-radio--disabled .ibis-radio__circle {
+  border-color: var(--color-neutral-200);
+  background-color: var(--color-neutral-160);
+}
+
+.ibis-radio__input:checked + .ibis-radio__circle {
+  border-color: var(--color-primary-900);
+}
+
+.ibis-radio:not(.ibis-radio--disabled) .ibis-radio__control:hover .ibis-radio__circle {
+  box-shadow: var(--shadow-focus-default); /* TODO: replace with token */
+  border-color: var(--color-neutral-700);
+  transform: scale(1.05);
+}
+
+.ibis-radio:not(.ibis-radio--disabled)
+  .ibis-radio__control:hover
+  .ibis-radio__input:checked
+  + .ibis-radio__circle {
+  box-shadow: var(--shadow-focus-primary); /* TODO: replace with token */
+  border-color: var(--color-primary-900);
+}
+
+.ibis-radio--invalid .ibis-radio__circle {
+  border-color: var(--color-status-error);
+}
+
+.ibis-radio--invalid .ibis-radio__control:hover .ibis-radio__circle {
+  box-shadow: var(--shadow-focus-error); /* TODO: replace with token */
+  border-color: var(--color-status-error);
+}

package/dist/components/switch.css

@@ -0,0 +1,68 @@
+.ibis-switch {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ibis-switch__control {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--spacing-1);
+  user-select: none;
+}
+
+.ibis-switch__input {
+  display: none;
+}
+
+/* Track */
+.ibis-switch__track {
+  width: 32px;
+  height: 20px;
+  background: var(--color-neutral-200);
+  border-radius: var(--border-radius-full);
+  position: relative;
+  transition:
+    background var(--transition-duration-normal) var(--transition-timing-default),
+    box-shadow var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+/* Thumb */
+.ibis-switch__thumb {
+  width: 16px;
+  height: 16px;
+  background: var(--color-white);
+  border-radius: var(--border-radius-full);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition:
+    transform var(--transition-duration-normal) var(--transition-timing-default),
+    background var(--transition-duration-normal) var(--transition-timing-default);
+}
+
+.ibis-switch__input:checked + .ibis-switch__track {
+  background: var(--color-primary-700);
+}
+
+.ibis-switch__input:checked + .ibis-switch__track .ibis-switch__thumb {
+  transform: translateX(12px);
+}
+
+/* Disabled state */
+.ibis-switch--disabled {
+  opacity: var(--opacity-7);
+  cursor: not-allowed;
+}
+
+.ibis-switch--disabled .ibis-switch__track {
+  background: var(--color-neutral-200);
+}
+
+.ibis-switch--disabled .ibis-switch__thumb {
+  background: var(--color-neutral-100);
+}
+
+.ibis-switch--disabled .ibis-switch__control {
+  cursor: not-allowed;
+}

package/dist/components/textInput.css

@@ -0,0 +1,152 @@
+.ibis-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+  max-width: 300px;
+  max-height: 4rem;
+}
+
+.ibis-input__label {
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-700);
+}
+
+.ibis-input__label-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.ibis-input__description {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-input__wrapper {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  background-color: var(--color-neutral-100);
+}
+
+.ibis-input__prepend {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-0) var(--spacing-3);
+  border: var(--border-width-default) solid var(--color-neutral-200);
+  border-right: none;
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+  position: relative;
+  white-space: nowrap;
+}
+
+.ibis-input__field-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  border: var(--border-width-default) solid var(--color-neutral-200);
+  /* border-left: none; */
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+
+.ibis-input__wrapper--with-prepend .ibis-input__field-wrapper {
+  border-left: none;
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+
+.ibis-input__wrapper:not(.ibis-input__wrapper--with-prepend) .ibis-input__field-wrapper {
+  border-radius: var(--border-radius-lg);
+}
+
+.ibis-input__prepend::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--color-neutral-200);
+}
+
+.ibis-input__field {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.ibis-input__prefix,
+.ibis-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-2);
+}
+
+.ibis-input__help {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-neutral-500);
+}
+
+.ibis-input__error {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-status-error);
+}
+
+/* sizes */
+.ibis-input--sm .ibis-input__field-wrapper {
+  padding: var(--spacing-1) var(--spacing-2);
+}
+
+.ibis-input--md .ibis-input__field-wrapper {
+  padding: var(--spacing-2);
+}
+
+.ibis-input--lg .ibis-input__field-wrapper {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+  .ibis-input__field-wrapper:not(:focus-within):hover {
+  border-color: var(--color-neutral-300);
+}
+
+.ibis-input__field-wrapper:focus-within {
+  border-color: var(--color-primary-400);
+}
+
+.ibis-input--invalid .ibis-input__field-wrapper {
+  border-color: var(--color-status-error);
+  border-width: var(--border-width-thin);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within)
+  .ibis-input__field-wrapper:hover {
+  border-width: var(--border-width-default);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
+  border-width: var(--border-width-default);
+}
+
+.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
+  background-color: var(--color-neutral-300);
+}
+
+.ibis-input__wrapper:focus-within .ibis-input__prepend::after {
+  background-color: var(--color-primary-400);
+}
+
+.ibis-input--invalid .ibis-input__prepend::after {
+  background-color: var(--color-status-error);
+}
+
+/* disabled */
+.ibis-input--disabled .ibis-input__prepend,
+.ibis-input--disabled .ibis-input__field-wrapper {
+  background-color: var(--color-neutral-400);
+  opacity: var(--opacity-5);
+}

package/dist/components/textarea.css

@@ -0,0 +1,91 @@
+.ibis-input {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+	width: 100%;
+	max-width: 400px;
+}
+
+.ibis-input__label {
+	font-size: var(--font-size-body-md);
+	color: var(--color-neutral-700);
+}
+
+.ibis-input__wrapper {
+	display: flex;
+	flex-direction: column0;
+	border-radius: var(--border-radius-lg);
+	overflow: hidden;
+	background-color: var(--color-neutral-100);
+	border: var(--border-width-default) solid var(--color-neutral-200);
+}
+
+.ibis-input__field {
+	flex: 1;
+	width: 100%;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+	font-family: var(--font-family-sans);
+	font-size: inherit;
+	resize: vertical;
+	/* min-height: 80px; */
+	line-height: 1.4;
+	display: block;
+	box-sizing: border-box;
+}
+
+.ibis-input__help {
+	font-size: var(--font-size-body-sm);
+	color: var(--color-neutral-500);
+}
+
+.ibis-input__error {
+	font-size: var(--font-size-body-sm);
+	color: var(--color-status-error);
+}
+
+/* Sizes */
+.ibis-input--sm .ibis-input__field {
+	padding: var(--spacing-1) var(--spacing-2);
+}
+
+.ibis-input--md .ibis-input__field {
+	padding: var(--spacing-2);
+}
+
+.ibis-input--lg .ibis-input__field {
+	padding: var(--spacing-3) var(--spacing-4);
+}
+
+/* Hover */
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+	.ibis-input__wrapper:not(:focus-within):hover {
+	border-color: var(--color-neutral-300);
+}
+
+/* Focus */
+.ibis-input__wrapper:focus-within {
+	border-color: var(--color-primary-400);
+}
+
+/* Invalid */
+.ibis-input--invalid .ibis-input__wrapper {
+	border-color: var(--color-status-error);
+	border-width: var(--border-width-thin);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled):not(:focus-within) .ibis-input__wrapper:hover {
+	border-width: var(--border-width-default);
+}
+
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:focus-within {
+	border-width: var(--border-width-default);
+}
+
+/* Disabled */
+.ibis-input--disabled .ibis-input__wrapper {
+	background-color: var(--color-neutral-400);
+	opacity: 0.5;
+}