@bi-digital/css 0.11.10 → 0.12.0

package/dist/components/field.css

@@ -1,226 +1,210 @@
 .bi-field {
-  --bic-field-border-color-invalid: var(--bi-alert-50);
   --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
-  --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
   --bic-field-content-spacing: var(--bi-scale-0-50x);
   --bic-field-padding-inline: var(--bi-scale-3x);
-  --bic-field-affix-color: var(--bi-neutral-60);
-  --bic-field-background: var(--bi-basic-white);
-  --bic-field-background-hover: var(--bi-states-hover-dark);
-  --bic-field-background-press: var(--bi-states-press-dark);
-  --bic-field-background-readonly: var(--bi-neutral-10);
-  --bic-field-border-color: var(--bi-neutral-50);
-  --bic-field-border-color-hover: var(--bi-neutral-50);
-  --bic-field-border-color-readonly: var(--bi-neutral-50);
-  --bic-field-disabled-color: var(--bi-neutral-50);
-  --bic-field-description-color: var(--bi-neutral-60);
-  --bic-field-label-color: var(--bi-neutral-95);
-  --bic-field-label-required-color: var(--bi-primary-50);
-  --bic-field-focus-outline-color: var(--bi-primary-50);
-  --bic-field-focus-shadow-color: var(--bi-basic-white);
-}
-
-.bi-field[data-dark="true"] {
-  --bic-field-affix-color: var(--bi-neutral-30);
-  --bic-field-background: var(--bi-neutral-95);
-  --bic-field-background-hover: var(--bi-states-hover-light);
-  --bic-field-background-press: var(--bi-states-press-light);
-  --bic-field-background-readonly: var(--bi-neutral-50);
-  --bic-field-border-color-hover: var(--bi-neutral-25);
-  --bic-field-disabled-color: var(--bi-neutral-40);
-  --bic-field-description-color: var(--bi-neutral-15);
-  --bic-field-label-color: var(--bi-basic-white);
-  --bic-field-label-required-color: var(--bi-secondary-50);
-  --bic-field-focus-outline-color: var(--bi-primary-30);
-  --bic-field-focus-shadow-color: var(--bi-neutral-95);
-}
-
-.bi-field > * {
-  margin-block: 0;
-}
-
-.bi-field > * + * {
-  margin-top: var(--bic-field-content-spacing);
-}
-
-.bi-field .bi-field--description {
-  color: var(--bic-field-description-color);
-  font: var(--bi-font-body-small);
-  line-height: 1.15;
-}
-
-.bi-field .bi-input:where(:not([hidden])) {
-  display: block;
-}
-
-.bi-field:has(.bi-input[aria-invalid="true"]) {
-  --bic-field-border-color: var(--bic-field-border-color-invalid);
-}
-
-.bi-field:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
-  cursor: not-allowed;
-  --bic-field-label-color: var(--bic-field-disabled-color);
-  --bic-field-description-color: var(--bic-field-disabled-color);
-  --bic-field-affix-color: var(--bic-field-disabled-color);
-  --bic-input-toggle-background: var(--bic-field-disabled-color);
-}
-
-.bi-field[data-fullwidth="true"] {
-  width: 100%;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) {
-  border-radius: var(--bi-radius-medium);
-  gap: 0 var(--bi-scale-3x);
-  width: fit-content;
-  padding: var(--bi-scale-2x) var(--bi-scale-3x);
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "input content";
-  align-items: center;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):not([hidden]) {
-  display: grid;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-fullwidth="true"] {
-  width: 100%;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]) {
-  border-radius: var(--bi-scale-24x);
-  padding: var(--bi-scale-1x) var(--bi-scale-2x);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="start"] {
-  padding-inline-end: var(--bi-scale-4x);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input[role="switch"]):has(.bi-label)[data-position="end"] {
-  padding-inline-start: var(--bi-scale-4x);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) > * {
-  grid-column: content;
-  margin-block: 0;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-label {
-  margin: var(--bi-scale-0-50x) 0;
-  -webkit-user-select: none;
-  user-select: none;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])) .bi-input {
-  margin: var(--bi-scale-1x) auto;
-  grid-area: 1 / input;
-  align-self: flex-start;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
-  cursor: pointer;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(input:only-child) {
-  gap: 0;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
-  background: var(--_bi--hover, var(--bic-field-background-hover));
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
-  --_bi--hover: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
-  background: var(--_bi--hover, var(--bic-field-background-press));
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) * {
-  --_bi--hover: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) * {
-  --_bi--focus: ;
-}
-
-.bi-field:has(.bi-input:is([type="radio"], [type="checkbox"]))[data-position="end"] {
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "content input";
-}
-
-.bi-field .bi-field--affixes {
-  background: var(--bic-field-background);
-  border-radius: var(--bi-radius-medium);
-  box-sizing: border-box;
-  white-space: nowrap;
-  max-width: 100%;
-  box-shadow: var(--bic-field-box-shadow);
-}
-
-.bi-field .bi-field--affixes .bi-input {
-  --bic-input-background: ;
-  --bic-input-box-shadow: ;
-  flex: auto;
-}
-
-.bi-field .bi-field--affixes:not([hidden]) {
-  display: flex;
-}
-
-.bi-field .bi-field--affixes:has(.bi-input[size]) {
-  width: fit-content;
-}
-
-.bi-field .bi-field--affixes:hover {
-  box-shadow: var(--_bi--hover, var(--bic-field-box-shadow-hover));
-}
-
-.bi-field .bi-field--affixes:hover * {
-  --_bi--hover: ;
-}
-
-.bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
-  outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
-  outline-offset: 0;
-  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+  --bic-field-affix-color: var(--bi-color-text);
+  --bic-field-background: var(--bi-color-surface-subtle);
+  --bic-field-background-hover: var(--bi-states-hover);
+  --bic-field-background-press: var(--bi-states-press);
+  --bic-field-border-color: var(--bi-color-stroke-contrast);
+  --bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
+  --bic-field-disabled-color: var(--bi-color-text-subtle);
+  --bic-field-description-color: var(--bi-color-text-secondary);
+  --bic-field-label-color: var(--bi-color-text);
+  --bic-field-label-required-color: var(--bi-states-required);
+  --bic-field-focus-outline-color: var(--bi-states-focus);
+  --bic-field-focus-shadow-color: var(--bi-states-focus-background);
+
+  & > * {
+    margin-block: 0;
+  }
+
+  & > * + * {
+    margin-top: var(--bic-field-content-spacing);
+  }
+
+  & .bi-field--description {
+    color: var(--bic-field-description-color);
+    font: var(--bi-font-body-small);
+    line-height: 1.15;
+  }
+
+  & .bi-input:where(:not([hidden])) {
+    display: block;
+  }
+
+  &:has(.bi-input[aria-invalid="true"]) {
+    --bic-field-border-color: var(--bic-field-border-color-invalid);
+    --bic-field-focus-outline-color: var(--bic-field-border-color-invalid);
+  }
+
+  &:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
+    cursor: not-allowed;
+    --bic-field-label-color: var(--bic-field-disabled-color);
+    --bic-field-description-color: var(--bic-field-disabled-color);
+    --bic-field-affix-color: var(--bic-field-disabled-color);
+    --bic-input-toggle-background: var(--bic-field-disabled-color);
+  }
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &:has(.bi-input:is([type="radio"], [type="checkbox"])) {
+    border-radius: var(--bi-radius-medium);
+    gap: 0 var(--bi-scale-3x);
+    width: fit-content;
+    padding: var(--bi-scale-2x) var(--bi-scale-3x);
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "input content";
+    align-items: center;
+
+    &:not([hidden]) {
+      display: grid;
+    }
+
+    &[data-fullwidth="true"] {
+      width: 100%;
+    }
+
+    &:has(.bi-input[role="switch"]) {
+      border-radius: var(--bi-scale-24x);
+      padding: var(--bi-scale-1x) var(--bi-scale-2x);
+
+      &:has(.bi-label) {
+        &[data-position="start"] {
+          padding-inline-end: var(--bi-scale-4x);
+        }
+
+        &[data-position="end"] {
+          padding-inline-start: var(--bi-scale-4x);
+        }
+      }
+    }
+
+    & > * {
+      grid-column: content;
+      margin-block: 0;
+    }
+
+    & .bi-label {
+      margin: var(--bi-scale-0-50x) 0;
+      -webkit-user-select: none;
+      user-select: none;
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    & .bi-input {
+      margin: var(--bi-scale-1x) auto;
+      grid-area: 1 / input;
+      align-self: flex-start;
+    }
+
+    &:is(label):not(:has([readonly], [aria-disabled="true"], :disabled)) {
+      cursor: pointer;
+    }
+
+    &:has(input:only-child) {
+      gap: 0;
+    }
+
+    &:hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
+      background: var(--_bi--hover, var(--bic-field-background-hover));
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &:active:not(:has(a:active), :has([aria-disabled="true"], :disabled)) {
+      background: var(--_bi--hover, var(--bic-field-background-press));
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &:has(.bi-input:focus-visible) {
+      box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
+      outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
+      outline-offset: var(--_bi--focus, 2px);
+
+      & * {
+        --_bi--focus: ;
+      }
+    }
+
+    &[data-position="end"] {
+      grid-template-columns: 1fr auto;
+      grid-template-areas: "content input";
+    }
+  }
+
+  & .bi-field--affixes {
+    background: var(--bic-field-background);
+    border-radius: var(--bi-radius-medium);
+    box-sizing: border-box;
+    white-space: nowrap;
+    max-width: 100%;
+    box-shadow: var(--bic-field-box-shadow);
+
+    & .bi-input {
+      --bic-input-background: ;
+      --bic-input-box-shadow: ;
+      flex: auto;
+    }
+
+    &:not([hidden]) {
+      display: flex;
+    }
+
+    &:has(.bi-input[size]) {
+      width: fit-content;
+    }
+
+    &:hover {
+      background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-field-background);
+
+      & * {
+        --_bi--hover: ;
+      }
+    }
+
+    &:has(.bi-input:focus-visible) {
+      outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
+      outline-offset: 0;
+      box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
         0px 0px 10px 0px #0000000d);
-}
-
-.bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
-  --_bi--focus: ;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix {
-  padding-inline: var(--bic-field-padding-inline);
-  color: var(--bic-field-affix-color);
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:not([hidden]) {
-  display: flex;
-}
-
-.bi-field .bi-field--affixes .bi-field--affix:first-child {
-  border-inline-end: 0;
-  border-start-start-radius: inherit;
-  border-end-start-radius: inherit;
-  padding-inline-end: 0;
-}
 
-.bi-field .bi-field--affixes .bi-field--affix:last-child {
-  border-inline-start: 0;
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-  padding-inline-start: 0;
+      & * {
+        --_bi--focus: ;
+      }
+    }
+
+    & .bi-field--affix {
+      padding-inline: var(--bic-field-padding-inline);
+      color: var(--bic-field-affix-color);
+      flex-shrink: 0;
+      align-items: center;
+
+      &:not([hidden]) {
+        display: flex;
+      }
+
+      &:first-child {
+        border-inline-end: 0;
+        border-start-start-radius: inherit;
+        border-end-start-radius: inherit;
+        padding-inline-end: 0;
+      }
+
+      &:last-child {
+        border-inline-start: 0;
+        border-start-end-radius: inherit;
+        border-end-end-radius: inherit;
+        padding-inline-start: 0;
+      }
+    }
+  }
 }

package/dist/components/fieldset.css

@@ -1,36 +1,28 @@
 .bi-fieldset {
-  --bic-fieldset-color: var(--bi-neutral-95);
-  --bic-fieldset-description-color: var(--bi-neutral-60);
-}
-
-.bi-fieldset[data-dark="true"] {
-  --bic-fieldset-color: var(--bi-basic-white);
-  --bic-fieldset-description-color: var(--bi-neutral-15);
-}
-
-.bi-fieldset {
+  --bic-fieldset-color: var(--bi-color-text);
+  --bic-fieldset-description-color: var(--bi-color-text-subtle);
   border: 0;
   min-width: 0;
   margin: 0;
   padding: 0;
-}
 
-.bi-fieldset > legend {
-  color: var(--bic-fieldset-color);
-  padding: 0;
-  font-size: 1rem;
-}
+  & > legend {
+    color: var(--bic-fieldset-color);
+    padding: 0;
+    font-size: 1rem;
+  }
 
-.bi-fieldset > * + * {
-  margin-block-start: var(--bi-scale-1x);
-}
+  & > * + * {
+    margin-block-start: var(--bi-scale-1x);
+  }
 
-.bi-fieldset > legend + p {
-  margin-block: var(--bi-scale-1x) 0;
-  color: var(--bic-fieldset-description-color);
-  font: var(--bi-font-body-large);
-}
+  & > legend + p {
+    margin-block: var(--bi-scale-1x) 0;
+    color: var(--bic-fieldset-description-color);
+    font: var(--bi-font-body-large);
+  }
 
-.bi-fieldset:disabled > legend, .bi-fieldset:disabled > legend + p {
-  opacity: var(--ds-opacity-disabled);
+  &:disabled > legend, &:disabled > legend + p {
+    opacity: var(--ds-opacity-disabled);
+  }
 }