@basis-ng/styles 0.0.1-alpha.36 → 0.0.1-alpha.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.36",
+  "version": "0.0.1-alpha.38",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {

package/src/components/button.component.css

@@ -152,7 +152,6 @@ button[b-button] {
     font-size: 0.857rem;
 
     &.squared {
-      padding-inline: 0;
       width: 1.714rem;
     }
   }
@@ -163,7 +162,6 @@ button[b-button] {
     font-size: 1rem;
 
     &.squared {
-      padding-inline: 0;
       width: 2.286rem;
     }
   }
@@ -174,7 +172,6 @@ button[b-button] {
     font-size: 1.143rem;
 
     &.squared {
-      padding-inline: 0;
       width: 2.857rem;
     }
   }

package/src/components/input-group.component.css

@@ -1,110 +1,53 @@
 b-input-group {
-  --exterior-padding: clamp(
-    1rem,
-    calc(0.75rem + var(--radius, 0.5rem) / 2),
-    1.3rem
-  );
-
-  width: 100%;
-  background-color: var(--input-background);
-  border-radius: var(--radius, 0.5rem);
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-color, transparent);
-  transition:
-    opacity 0.2s,
-    padding-top 0.2s,
-    padding-bottom 0.2s,
-    background-color 0.2s,
-    border-color 0.2s;
-  font-size: 1rem;
-  color: var(--input-foreground, #798194);
   display: flex;
   align-items: center;
+  border-radius: var(--radius);
+  box-sizing: border-box;
+  background-color: var(--input-background);
+  border: 1px solid var(--border-color, transparent);
 
-  &:has(> *.ng-invalid) {
-    color: var(--error-foreground, #c40000ab);
-    background-color: var(--error, #fff0f0);
-    border-color: var(--error-border-color, #c40000ab);
-
-    i svg {
-      stroke: var(--error-foreground, #c40000ab);
-    }
-
-    button {
-      color: var(--error-foreground, #c40000ab);
-      background-color: var(--error, #fff0f0);
-    }
-  }
-
-  select,
-  input,
-  button,
-  b-label input,
-  b-label select {
-    border-radius: 0px !important;
-    border-width: 0px !important;
-  }
-
-  &:not(:has(b-label)) select:not(:first-child),
-  &:not(:has(b-label)) input:not(:first-child),
-  button:not(:first-child),
-  b-label:not(:first-child) input,
-  b-label:not(:first-child) select {
-    padding-left: 0.8rem !important;
-  }
-
-  b-label:not(:first-child) label {
-    left: 0.8rem !important;
+  input[b-input] {
+    border: none;
+    outline-width: 0 !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
   }
 
-  &:not(:has(b-label)) select:not(:last-child),
-  &:not(:has(b-label)) input:not(:last-child),
-  button:not(:last-child),
-  b-label:not(:last-child) input,
-  b-label:not(:last-child) select {
-    padding-right: 0.8rem !important;
+  &:has(:focus-visible) {
+    outline: 2px solid var(--primary, #0a0a0a);
+    outline-offset: 2px;
   }
 
-  input:first-child,
-  button:first-child,
-  b-label:first-child input,
-  b-label:first-child select select:first-child,
-  input:first-child,
-  button:first-child,
-  b-label:first-child input,
-  b-label:first-child select {
-    border-top-left-radius: var(--radius) !important;
-    border-bottom-left-radius: var(--radius) !important;
+  &:has(.size-1) {
+    padding: 0.357rem 0.5rem;
+    height: 1.714rem;
+    gap: 0.5rem;
+    font-size: 0.857rem;
   }
 
-  select:last-child,
-  input:last-child,
-  button:last-child,
-  b-label:last-child input,
-  b-label:last-child select {
-    border-top-right-radius: var(--radius) !important;
-    border-bottom-right-radius: var(--radius) !important;
+  &:has(.size-2) {
+    padding: 0.5rem 0.75rem;
+    height: 2.286rem;
+    gap: 0.75rem;
+    font-size: 1rem;
   }
 
-  span:first-child,
-  & > i:first-child {
-    padding-inline: var(--exterior-padding) 0;
+  &:has(.size-3) {
+    padding: 0.786rem 1rem;
+    min-height: 2.857rem;
+    gap: 1rem;
+    font-size: 1.143rem;
   }
 
-  span:last-child,
-  & > i:last-child {
-    padding-inline: 0 var(--exterior-padding);
+  &:has(button[b-button]:last-child) {
+    padding-right: 0.285rem;
   }
 
-  button {
-    height: 100%;
-    max-height: 100%;
-    font-size: 0.88rem;
+  &:has(button[b-button]:first-child) {
+    padding-left: 0.285rem;
   }
 
-  button:active {
-    transform: scale(1) !important;
+  button[b-button] {
+    border-radius: calc(var(--radius) - 0.2rem);
   }
 }

package/src/components/option.component.css

@@ -14,13 +14,13 @@ li[b-option] {
   &.cdk-option-highlighted {
     background-color: color-mix(
       in srgb,
-      var(--foreground, #798194) 5%,
-      var(--background, #ffffff)
+      var(--secondary) 50%,
+      var(--background)
     );
   }
 
   &[aria-selected='true'] {
-    background-color: var(--primary, #0a0a0a);
-    color: var(--primary-foreground, #ffffff);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
   }
 }

package/src/components/select-options.component.css

@@ -6,7 +6,7 @@ ul[b-select-options] {
   position: relative;
   background: var(--background, #ffffff);
   box-shadow: 0 0 0.25rem 0.125rem rgba(1, 1, 1, 0.01);
-  border-radius: clamp(0rem, var(--radius, 0.5rem), 0.5rem);
+  border-radius: clamp(0rem, var(--radius), 0.5rem);
   border: 1px solid
     color-mix(
       in srgb,