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

package/dist/components/banner.css

@@ -77,8 +77,8 @@
 }
 
 .ibis-banner--success {
-  border-color: var(--color-status-success) var(--opacity-1);
-  background-color: var(--color-status-success) var(--opacity-1);
+  border-color: color-mix(in srgb, var(--color-status-success) var(--opacity-1));
+  background-color: color-mix(in srgb, var(--color-status-success) var(--opacity-1));
 }
 
 .ibis-banner--success .ibis-banner__title {
@@ -95,8 +95,8 @@
 }
 
 .ibis-banner--error {
-  border-color: var(--color-status-error) var(--opacity-1);
-  background-color: var(--color-status-error) var(--opacity-1);
+  border-color: color-mix(in srgb, var(--color-status-error) var(--opacity-1));
+  background-color: color-mix(in srgb, var(--color-status-error) var(--opacity-1));
 }
 
 .ibis-banner--error .ibis-banner__title {
@@ -113,8 +113,11 @@
 }
 
 .ibis-banner--default {
-  border-color: var(--color-interactive-primary-bg-emphasized) var(--opacity-1);
-  background-color: var(--color-interactive-primary-bg-emphasized) var(--opacity-1);
+  border-color: color-mix(in srgb, var(--color-interactive-primary-bg-emphasized) var(--opacity-1));
+  background-color: color-mix(
+    in srgb,
+    var(--color-interactive-primary-bg-emphasized) var(--opacity-1)
+  );
 }
 
 .ibis-banner--default .ibis-banner__title {

package/dist/components/card.css

@@ -6,7 +6,7 @@
   background-color: var(--color-surface-default);
   border: var(--border-width-thin) solid var(--border-color-subtle);
   border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-elevation-sm);
+  box-shadow: var(--shadow-elevation-md);
   overflow: visible;
   box-sizing: border-box;
   min-height: 200px;

package/dist/components/dropdown.css

@@ -9,6 +9,8 @@
   display: block;
   width: 100%;
   cursor: pointer;
+  font-size: 0;
+  line-height: 0;
 }
 
 /* Hide TextInput's label, help, and error inside the trigger */
@@ -45,6 +47,7 @@
 /* Default field wrapper radius */
 .ibis-dropdown__trigger .ibis-input__field-wrapper {
   border-radius: var(--border-radius-lg);
+  padding: var(--spacing-1) var(--spacing-2);
   transition:
     border-radius var(--transition-duration-fast) var(--transition-timing-default),
     border-color var(--transition-duration-fast) var(--transition-timing-default);
@@ -61,7 +64,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 +93,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/formLayout.css

@@ -125,3 +125,8 @@
     grid-column: 1 / -1;
   }
 }
+
+/* Allow inputs to stretch full width inside FormLayout */
+.ibis-form-layout .ibis-input {
+  max-width: 100%;
+}

package/dist/components/navShell.css

@@ -10,10 +10,10 @@
   height: 100%;
   min-height: 0;
   padding: var(--spacing-4) var(--spacing-3);
-  background-color: var(--color-surface-default);
-  border-right: var(--border-width-thin) solid var(--border-color-subtle);
+  background-color: transparent;
+  border-right: none;
   border-bottom-right-radius: var(--border-radius-xl);
-  box-shadow: var(--shadow-nav);
+  box-shadow: none;
   box-sizing: border-box;
 }
 
@@ -130,10 +130,10 @@
   height: 100%;
   min-height: 0;
   padding: var(--spacing-4) 0;
-  background-color: var(--color-surface-default);
-  border-right: var(--border-width-thin) solid var(--border-color-subtle);
+  background-color: transparent;
+  border-right: none;
   border-bottom-right-radius: var(--border-radius-xl);
-  box-shadow: var(--shadow-nav);
+  box-shadow: none;
   box-sizing: border-box;
   overflow: visible;
 }

package/dist/components/switch.css

@@ -63,3 +63,9 @@
 .ibis-switch--disabled .ibis-switch__control {
   cursor: not-allowed;
 }
+
+.ibis-switch__label {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-md);
+  color: var(--color-text-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,94 @@
   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 — layout only, no border ===== */
+
 .ibis-input__wrapper {
   display: flex;
   align-items: stretch;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
-  background-color: var(--color-surface-muted);
 }
 
+/* ===== PREPEND ===== */
+
 .ibis-input__prepend {
   display: flex;
   align-items: center;
-  padding: var(--spacing-0) var(--spacing-3);
+  padding: 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);
   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 — owns the visible border ===== */
+
 .ibis-input__field-wrapper {
   display: flex;
   align-items: center;
   flex: 1;
+  background-color: var(--color-surface-default);
   border: var(--border-width-default) solid var(--border-color-default);
-  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+  border-radius: var(--border-radius-lg);
+  transition: border-color var(--transition-duration-fast) var(--transition-timing-default);
 }
 
+/* When prepend is present, remove left radius and border */
 .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);
+/* Hover */
+.ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
+  .ibis-input__field-wrapper:not(:focus-within):hover {
+  border-color: var(--border-color-strong);
+}
+
+/* Focus */
+.ibis-input__field-wrapper:focus-within {
+  border-color: var(--border-color-focus);
+}
+
+.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__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 +109,70 @@
   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);
-}
-
-.ibis-input__field-wrapper:focus-within {
-  border-color: var(--border-color-focus);
-}
+/* ===== INVALID STATE ===== */
 
 .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:not(:focus-within):hover {
+  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);
+  border-color: var(--color-status-error);
 }
 
-.ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
-  background-color: var(--border-color-strong);
-}
+/* ===== DISABLED STATE ===== */
 
-.ibis-input__wrapper:focus-within .ibis-input__prepend::after {
-  background-color: var(--border-color-focus);
+.ibis-input--disabled .ibis-input__field-wrapper {
+  opacity: var(--opacity-5);
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+  background-color: var(--color-interactive-primary-bg-disabled);
 }
 
-.ibis-input--invalid .ibis-input__prepend::after {
-  background-color: var(--color-status-error);
+.ibis-input--disabled .ibis-input__field {
+  cursor: not-allowed;
 }
 
-.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);
+/* ===== LOADING STATE ===== */
+
+.ibis-input--loading .ibis-input__field-wrapper {
+  opacity: var(--opacity-7);
+  pointer-events: none;
 }

package/dist/components/topBar.css

@@ -8,10 +8,8 @@
   flex-direction: row;
   align-items: center;
   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);
+  background-color: transparent;
+  border-bottom: none;
   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.4",
   "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
   "type": "module",
   "exports": {
@@ -30,8 +30,5 @@
     "sd-tailwindcss-transformer": "^2.2.1",
     "style-dictionary": "^5.4.4",
     "tsx": "^4.22.4"
-  },
-  "dependencies": {
-    "@ibis-design/css": "^1.0.0-alpha.2"
   }
 }