@ibis-design/css 1.0.0-alpha.3 → 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);

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

@@ -26,27 +26,13 @@
   color: var(--color-text-muted);
 }
 
-/* ===== WRAPPER — owns the visible border ===== */
+/* ===== 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-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 ===== */
@@ -55,7 +41,9 @@
   display: flex;
   align-items: center;
   padding: 0 var(--spacing-3);
-  border-right: var(--border-width-default) solid var(--border-color-default);
+  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);
@@ -71,13 +59,33 @@
   border-color: var(--border-color-focus);
 }
 
-/* ===== FIELD WRAPPER — no border, just layout ===== */
+/* ===== FIELD WRAPPER — owns the visible border ===== */
 
 .ibis-input__field-wrapper {
   display: flex;
   align-items: center;
   flex: 1;
-  border: none;
+  background-color: var(--color-surface-default);
+  border: var(--border-width-default) solid var(--border-color-default);
+  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;
+}
+
+/* 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 {
@@ -136,21 +144,22 @@
 
 /* ===== INVALID STATE ===== */
 
-.ibis-input--invalid .ibis-input__wrapper {
+.ibis-input--invalid .ibis-input__field-wrapper {
   border-color: var(--color-status-error);
 }
 
-.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__wrapper:not(:focus-within):hover {
+.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__wrapper:focus-within {
+.ibis-input--invalid:not(.ibis-input--disabled) .ibis-input__field-wrapper:focus-within {
   border-color: var(--color-status-error);
 }
 
 /* ===== DISABLED STATE ===== */
 
-.ibis-input--disabled .ibis-input__wrapper {
+.ibis-input--disabled .ibis-input__field-wrapper {
   opacity: var(--opacity-5);
   cursor: not-allowed;
   border-color: var(--border-color-disabled);
@@ -163,7 +172,7 @@
 
 /* ===== LOADING STATE ===== */
 
-.ibis-input--loading .ibis-input__wrapper {
+.ibis-input--loading .ibis-input__field-wrapper {
   opacity: var(--opacity-7);
   pointer-events: none;
 }

package/dist/components/topBar.css

@@ -8,8 +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);
+  background-color: transparent;
+  border-bottom: none;
   box-sizing: border-box;
   padding: 0 var(--spacing-6);
   gap: var(--spacing-4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibis-design/css",
-  "version": "1.0.0-alpha.3",
+  "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.3"
   }
 }