@ibis-design/css 0.8.2 → 1.0.0-alpha.0

package/dist/components/navShell.css

@@ -0,0 +1,314 @@
+/* Navigation shell layout — import via @ibis-design/css/components/navShell.css */
+
+/* NavDrawer */
+
+.ib-nav-drawer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 360px;
+  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);
+  border-bottom-right-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-nav);
+  box-sizing: border-box;
+}
+
+.ib-nav-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+}
+
+.ib-nav-drawer__logo {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ib-nav-drawer__logo-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-full);
+  background: var(--gradient-brand-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
+}
+
+.ib-nav-drawer-logo-image {
+  height: 48px;
+  width: auto;
+  object-fit: contain;
+}
+
+.ib-nav-drawer__toggle {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-start;
+}
+
+.ib-nav-drawer__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ib-nav-drawer__section-label {
+  margin: 0 0 var(--spacing-2);
+  padding: 0 var(--spacing-2);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+}
+
+.ib-nav-drawer__body {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--spacing-2);
+}
+
+.ib-nav-drawer__footer {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--spacing-1);
+  border-top: var(--border-width-thin) solid var(--border-color-subtle);
+  padding-top: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.ib-nav-drawer__footer-label {
+  margin: 0;
+  padding: 0 var(--spacing-2);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+}
+
+.ib-nav-drawer__footer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.ib-nav-drawer__meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-2) 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
+/* NavRail */
+
+.ib-nav-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 72px;
+  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);
+  border-bottom-right-radius: var(--border-radius-xl);
+  box-shadow: var(--shadow-nav);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ib-nav-rail__header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  margin-bottom: var(--spacing-4);
+  overflow: visible;
+}
+
+.ib-nav-rail__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.ib-nav-rail__logo-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-full);
+  background: var(--gradient-brand-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
+}
+
+.ib-nav-rail-logo-image {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.ib-nav-rail__toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: var(--z-index-overlay);
+}
+
+.ib-nav-rail__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-2);
+  box-sizing: border-box;
+}
+
+.ib-nav-rail__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  gap: var(--spacing-1);
+  margin-top: auto;
+  padding: var(--spacing-2) var(--spacing-2) 0;
+  box-sizing: border-box;
+  border-top: var(--border-width-thin) solid var(--border-color-subtle);
+}
+
+/* NavBottom */
+
+.ib-nav-bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-around;
+  position: fixed;
+  bottom: 0;
+  inset-inline: 0;
+  z-index: var(--z-index-sticky);
+  padding: var(--spacing-2) var(--spacing-4);
+  padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom, 0px));
+  gap: var(--spacing-1);
+  background-color: var(--color-surface-default);
+  border-top: var(--border-width-thin) solid var(--border-color-default);
+  box-shadow: var(--shadow-elevation-md);
+  box-sizing: border-box;
+}
+
+/* Toggle Button */
+
+.ib-nav-shell-toggle {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-1);
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  outline: none;
+  transition:
+    background-color var(--transition-duration-fast) var(--transition-timing-default),
+    color var(--transition-duration-fast) var(--transition-timing-default);
+}
+
+.ib-nav-shell-toggle:hover {
+  background-color: var(--color-interactive-neutral-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ib-nav-shell-toggle svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  overflow: visible;
+}
+
+.ib-nav-shell-toggle svg path {
+  stroke: currentColor;
+}
+
+/* Icon Animations */
+
+.ib-nav-rail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-rail-icon--selected {
+  transform: scale(1.15);
+}
+
+.ib-nav-drawer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-drawer-icon--selected {
+  transform: scale(1.15);
+}
+
+.ib-nav-bottom-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-duration-normal) var(--transition-timing-default);
+  transform: scale(1);
+}
+
+.ib-nav-bottom-icon--selected {
+  transform: scale(1.15);
+}
+
+/* Sign Out Button */
+
+.ib-nav-signout:not(:disabled):hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-status-error) calc(var(--opacity-5) * 100%),
+    transparent
+  );
+}

package/dist/components/pillTab.css

@@ -7,8 +7,7 @@
   height: 100%;
   align-self: stretch;
   border-radius: var(--border-radius-full);
-  /* background: var(--color-neutral-100); */
-  color: var(--color-neutral-700);
+  color: var(--color-text-secondary);
   cursor: pointer;
   user-select: none;
 
@@ -29,30 +28,26 @@
   width: 100%;
 }
 
-/* Active */
 .ibis-pill-tab--active {
-  background: var(--color-primary-700);
-  color: var(--color-white);
+  background: var(--color-interactive-primary-bg-emphasized);
+  color: var(--color-text-on-primary);
 }
 
-/* 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);
+  background: var(--color-interactive-primary-bg-selected);
+  color: var(--color-interactive-primary-indicator);
 }
 
 .ibis-pill-tab--active:hover {
-  background: var(--color-primary-800);
+  background: var(--color-interactive-primary-bg-emphasized);
 }
 
-/* Focus (important for accessibility) */
 .ibis-pill-tab__input:focus-visible + .ibis-pill-tab__content {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--color-brand-primary);
   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

@@ -12,12 +12,12 @@
 
 .ibis-radio__label {
   font-size: var(--font-size-body-md);
-  color: var(--color-neutral-700);
+  color: var(--color-text-secondary);
 }
 
 .ibis-radio__description {
   font-size: var(--font-size-body-sm);
-  color: var(--color-neutral-500);
+  color: var(--color-text-muted);
 }
 
 .ibis-radio__control {
@@ -35,7 +35,7 @@
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius-full);
-  border: var(--border-width-default) solid var(--color-neutral-300);
+  border: var(--border-width-default) solid var(--border-color-strong);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -53,7 +53,7 @@
 }
 
 .ibis-radio__dot--active {
-  background: var(--color-primary-900);
+  background: var(--color-interactive-primary-indicator);
 }
 
 .ibis-radio__text {
@@ -63,7 +63,7 @@
 
 .ibis-radio__help {
   font-size: var(--font-size-body-sm);
-  color: var(--color-neutral-500);
+  color: var(--color-text-muted);
 }
 
 .ibis-radio__error {
@@ -75,18 +75,19 @@
   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);
+  border-color: var(--border-color-disabled);
+  background-color: var(--color-surface-disabled);
 }
 
 .ibis-radio__input:checked + .ibis-radio__circle {
-  border-color: var(--color-primary-900);
+  border-color: var(--color-interactive-primary-border-selected);
 }
 
 .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);
+  box-shadow: var(--shadow-focus-default);
+  border-color: var(--color-text-secondary);
   transform: scale(1.05);
 }
 
@@ -94,8 +95,8 @@
   .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);
+  box-shadow: var(--shadow-focus-primary);
+  border-color: var(--color-interactive-primary-border-selected);
 }
 
 .ibis-radio--invalid .ibis-radio__circle {
@@ -103,6 +104,6 @@
 }
 
 .ibis-radio--invalid .ibis-radio__control:hover .ibis-radio__circle {
-  box-shadow: var(--shadow-focus-error); /* TODO: replace with token */
+  box-shadow: var(--shadow-focus-error);
   border-color: var(--color-status-error);
 }

package/dist/components/switch.css

@@ -15,11 +15,10 @@
   display: none;
 }
 
-/* Track */
 .ibis-switch__track {
   width: 32px;
   height: 20px;
-  background: var(--color-neutral-200);
+  background: var(--color-interactive-primary-track-off);
   border-radius: var(--border-radius-full);
   position: relative;
   transition:
@@ -27,11 +26,10 @@
     box-shadow var(--transition-duration-normal) var(--transition-timing-default);
 }
 
-/* Thumb */
 .ibis-switch__thumb {
   width: 16px;
   height: 16px;
-  background: var(--color-white);
+  background: var(--color-surface-default);
   border-radius: var(--border-radius-full);
   position: absolute;
   top: 2px;
@@ -42,25 +40,24 @@
 }
 
 .ibis-switch__input:checked + .ibis-switch__track {
-  background: var(--color-primary-700);
+  background: var(--color-interactive-primary-track-on);
 }
 
 .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);
+  background: var(--color-interactive-primary-track-off);
 }
 
 .ibis-switch--disabled .ibis-switch__thumb {
-  background: var(--color-neutral-100);
+  background: var(--color-surface-muted);
 }
 
 .ibis-switch--disabled .ibis-switch__control {

package/dist/components/textInput.css

@@ -9,7 +9,7 @@
 
 .ibis-input__label {
   font-size: var(--font-size-body-md);
-  color: var(--color-neutral-700);
+  color: var(--color-text-secondary);
 }
 
 .ibis-input__label-wrapper {
@@ -20,7 +20,7 @@
 
 .ibis-input__description {
   font-size: var(--font-size-body-sm);
-  color: var(--color-neutral-500);
+  color: var(--color-text-muted);
 }
 
 .ibis-input__wrapper {
@@ -28,14 +28,14 @@
   align-items: stretch;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-muted);
 }
 
 .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: 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;
@@ -46,8 +46,7 @@
   display: flex;
   align-items: center;
   flex: 1;
-  border: var(--border-width-default) solid var(--color-neutral-200);
-  /* border-left: none; */
+  border: var(--border-width-default) solid var(--border-color-default);
   border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
 }
 
@@ -67,7 +66,7 @@
   top: 0;
   bottom: 0;
   width: 2px;
-  background-color: var(--color-neutral-200);
+  background-color: var(--border-color-default);
 }
 
 .ibis-input__field {
@@ -88,7 +87,7 @@
 
 .ibis-input__help {
   font-size: var(--font-size-body-sm);
-  color: var(--color-neutral-500);
+  color: var(--color-text-muted);
 }
 
 .ibis-input__error {
@@ -96,7 +95,6 @@
   color: var(--color-status-error);
 }
 
-/* sizes */
 .ibis-input--sm .ibis-input__field-wrapper {
   padding: var(--spacing-1) var(--spacing-2);
 }
@@ -111,11 +109,11 @@
 
 .ibis-input:not(.ibis-input--disabled):not(.ibis-input--invalid)
   .ibis-input__field-wrapper:not(:focus-within):hover {
-  border-color: var(--color-neutral-300);
+  border-color: var(--border-color-strong);
 }
 
 .ibis-input__field-wrapper:focus-within {
-  border-color: var(--color-primary-400);
+  border-color: var(--border-color-focus);
 }
 
 .ibis-input--invalid .ibis-input__field-wrapper {
@@ -133,20 +131,19 @@
 }
 
 .ibis-input__wrapper:not(:focus-within):hover .ibis-input__prepend::after {
-  background-color: var(--color-neutral-300);
+  background-color: var(--border-color-strong);
 }
 
 .ibis-input__wrapper:focus-within .ibis-input__prepend::after {
-  background-color: var(--color-primary-400);
+  background-color: var(--border-color-focus);
 }
 
 .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);
+  background-color: var(--color-interactive-primary-bg-disabled);
   opacity: var(--opacity-5);
 }

package/dist/components/textarea.css

@@ -8,7 +8,7 @@
 
 .ibis-input__label {
 	font-size: var(--font-size-body-md);
-	color: var(--color-neutral-700);
+	color: var(--color-text-secondary);
 }
 
 .ibis-input__wrapper {
@@ -16,8 +16,8 @@
 	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);
+	background-color: var(--color-surface-muted);
+	border: var(--border-width-default) solid var(--border-color-default);
 }
 
 .ibis-input__field {
@@ -30,7 +30,6 @@
 	font-family: var(--font-family-sans);
 	font-size: inherit;
 	resize: vertical;
-	/* min-height: 80px; */
 	line-height: 1.4;
 	display: block;
 	box-sizing: border-box;
@@ -38,7 +37,7 @@
 
 .ibis-input__help {
 	font-size: var(--font-size-body-sm);
-	color: var(--color-neutral-500);
+	color: var(--color-text-muted);
 }
 
 .ibis-input__error {
@@ -46,7 +45,6 @@
 	color: var(--color-status-error);
 }
 
-/* Sizes */
 .ibis-input--sm .ibis-input__field {
 	padding: var(--spacing-1) var(--spacing-2);
 }
@@ -59,18 +57,15 @@
 	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);
+	border-color: var(--border-color-strong);
 }
 
-/* Focus */
 .ibis-input__wrapper:focus-within {
-	border-color: var(--color-primary-400);
+	border-color: var(--border-color-focus);
 }
 
-/* Invalid */
 .ibis-input--invalid .ibis-input__wrapper {
 	border-color: var(--color-status-error);
 	border-width: var(--border-width-thin);
@@ -84,8 +79,7 @@
 	border-width: var(--border-width-default);
 }
 
-/* Disabled */
 .ibis-input--disabled .ibis-input__wrapper {
-	background-color: var(--color-neutral-400);
+	background-color: var(--color-interactive-primary-bg-disabled);
 	opacity: 0.5;
 }