@ibis-design/css 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/components/dropdown.css

@@ -61,7 +61,7 @@
 .ibis-dropdown__menu {
   position: absolute;
   width: 100%;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-default);
   border: 2px solid var(--color-interactive-primary-indicator);
   border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
   border-top: none;
@@ -90,7 +90,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-body-md);
   font-weight: var(--font-weight-medium);
-  color: var(--color-surface-inverse);
+  color: var(--color-text-primary);
   text-align: center;
   transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
 }

package/dist/components/dropdownButton.css

@@ -32,8 +32,8 @@
   left: 0;
   margin-top: 0;
   min-width: 160px;
-  background: var(--color-white);
-  border: 2px solid var(--color-surface-inverse);
+  background: var(--color-surface-default);
+  border: 2px solid var(--color-interactive-primary-indicator);
   border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg);
   box-shadow: var(--shadow-elevation-sm);
   z-index: var(--z-index-dropdown);
@@ -62,7 +62,7 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-body-md);
   font-weight: var(--font-weight-medium);
-  color: var(--color-surface-inverse);
+  color: var(--color-text-primary);
   text-align: center;
   transition: background-color var(--transition-duration-fast) var(--transition-timing-default);
 }

package/dist/components/textInput.css

@@ -1,15 +1,11 @@
+/* TextInput component — import via @ibis-design/css/components/textInput.css */
+
 .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-text-secondary);
 }
 
 .ibis-input__label-wrapper {
@@ -18,57 +14,86 @@
   gap: var(--spacing-1);
 }
 
+.ibis-input__label {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-md);
+  color: var(--color-text-secondary);
+}
+
 .ibis-input__description {
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-body-sm);
   color: var(--color-text-muted);
 }
 
+/* ===== WRAPPER — owns the visible border ===== */
+
 .ibis-input__wrapper {
   display: flex;
   align-items: stretch;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
-  background-color: var(--color-surface-muted);
+  background-color: var(--color-surface-default);
+  border: var(--border-width-default) solid var(--border-color-default);
+  transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
 }
 
+/* Hover */
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+  .ibis-input__wrapper:not(:focus-within):hover {
+  border-color: var(--border-color-strong);
+}
+
+/* Focus */
+.ibis-input__wrapper:focus-within {
+  border-color: var(--border-color-focus);
+}
+
+/* ===== PREPEND ===== */
+
 .ibis-input__prepend {
   display: flex;
   align-items: center;
-  padding: var(--spacing-0) var(--spacing-3);
-  border: var(--border-width-default) solid var(--border-color-default);
-  border-right: none;
-  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+  padding: 0 var(--spacing-3);
+  border-right: var(--border-width-default) solid var(--border-color-default);
   position: relative;
   white-space: nowrap;
+  color: var(--color-text-secondary);
+  background-color: var(--color-surface-muted);
+  transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend {
+  border-color: var(--border-color-strong);
 }
 
+.ibis-input__wrapper:focus-within .ibis-input__prepend {
+  border-color: var(--border-color-focus);
+}
+
+/* ===== FIELD WRAPPER — no border, just layout ===== */
+
 .ibis-input__field-wrapper {
   display: flex;
   align-items: center;
   flex: 1;
-  border: var(--border-width-default) solid var(--border-color-default);
-  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+  border: none;
 }
 
-.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--sm .ibis-input__field-wrapper {
+  padding: var(--spacing-1) var(--spacing-2);
 }
 
-.ibis-input__wrapper:not(.ibis-input__wrapper--with-prepend) .ibis-input__field-wrapper {
-  border-radius: var(--border-radius-lg);
+.ibis-input--md .ibis-input__field-wrapper {
+  padding: var(--spacing-2);
 }
 
-.ibis-input__prepend::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--border-color-default);
+.ibis-input--lg .ibis-input__field-wrapper {
+  padding: var(--spacing-3) var(--spacing-4);
 }
 
+/* ===== FIELD ===== */
+
 .ibis-input__field {
   flex: 1;
   width: 100%;
@@ -76,74 +101,69 @@
   border: none;
   outline: none;
   background: transparent;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-md);
+}
+
+.ibis-input__field::placeholder {
+  color: var(--color-text-muted);
 }
 
+/* ===== PREFIX / SUFFIX ===== */
+
 .ibis-input__prefix,
 .ibis-input__suffix {
   display: inline-flex;
   align-items: center;
   padding: 0 var(--spacing-2);
+  color: var(--color-text-muted);
 }
 
+/* ===== HELP / ERROR ===== */
+
 .ibis-input__help {
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-body-sm);
   color: var(--color-text-muted);
 }
 
 .ibis-input__error {
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-body-sm);
   color: var(--color-status-error);
 }
 
-.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(--border-color-strong);
-}
+/* ===== INVALID STATE ===== */
 
-.ibis-input__field-wrapper:focus-within {
-  border-color: var(--border-color-focus);
+.ibis-input--invalid .ibis-input__wrapper {
+  border-color: var(--color-status-error);
 }
 
-.ibis-input--invalid .ibis-input__field-wrapper {
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:not(:focus-within):hover {
   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__wrapper:focus-within {
+  border-color: var(--color-status-error);
 }
 
-.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
-  border-width: var(--border-width-default);
-}
+/* ===== DISABLED STATE ===== */
 
-.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
-  background-color: var(--border-color-strong);
+.ibis-input--disabled .ibis-input__wrapper {
+  opacity: var(--opacity-5);
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+  background-color: var(--color-interactive-primary-bg-disabled);
 }
 
-.ibis-input__wrapper:focus-within .ibis-input__prepend::after {
-  background-color: var(--border-color-focus);
+.ibis-input--disabled .ibis-input__field {
+  cursor: not-allowed;
 }
 
-.ibis-input--invalid .ibis-input__prepend::after {
-  background-color: var(--color-status-error);
-}
+/* ===== LOADING STATE ===== */
 
-.ibis-input--disabled .ibis-input__prepend,
-.ibis-input--disabled .ibis-input__field-wrapper {
-  background-color: var(--color-interactive-primary-bg-disabled);
-  opacity: var(--opacity-5);
+.ibis-input--loading .ibis-input__wrapper {
+  opacity: var(--opacity-7);
+  pointer-events: none;
 }

package/dist/components/topBar.css

@@ -10,8 +10,6 @@
   justify-content: space-between;
   background-color: var(--color-surface-default);
   border-bottom: var(--border-width-thin) solid var(--border-color-subtle);
-  border-radius: 0 0 var(--border-radius-lg) 0;
-  box-shadow: 0 1px 8px 0 var(--shadow-color-black-soft);
   box-sizing: border-box;
   padding: 0 var(--spacing-6);
   gap: var(--spacing-4);
@@ -50,3 +48,14 @@
   max-width: 100%;
   width: 100%;
 }
+
+.ib-top-bar__logo {
+  display: none; /* hidden on desktop, nav has the logo */
+}
+
+@media (max-width: 768px) {
+  .ib-top-bar__logo {
+    display: flex;
+    align-items: center;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibis-design/css",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
   "type": "module",
   "exports": {
@@ -32,6 +32,6 @@
     "tsx": "^4.22.4"
   },
   "dependencies": {
-    "@ibis-design/css": "^1.0.0-alpha.2"
+    "@ibis-design/css": "^1.0.0-alpha.3"
   }
 }