@bi-digital/css 0.11.10 → 0.12.0

package/dist/components/input.css

@@ -1,46 +1,34 @@
+:root, [data-color-scheme="light"] {
+  --_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
+}
+
+[data-color-scheme="dark"] {
+  --_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
+}
+
 :where(.bi-input) {
   margin: 0;
 }
 
 .bi-input {
-  --bic-input-border-color-invalid: var(--bi-alert-50);
   --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
-  --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
-  --bic-input-caret-color: var(--bi-primary-50);
+  --bic-input-caret-color: var(--bi-color-primary-fill);
   --bic-input-font-size: 1rem;
   --bic-input-padding: var(--bi-scale-3x);
   --bic-input-size: var(--bi-scale-11x);
-  --bic-input-toggle-background: var(--bi-primary-50);
-  --bic-input-toggle-color: var(--bi-basic-white);
+  --bic-input-toggle-background: var(--bi-color-primary-fill);
+  --bic-input-toggle-color: var(--bi-color-primary-on-fill);
   --bic-input-toggle-size: 1.125rem;
-  --bic-input-background: var(--bi-basic-white);
-  --bic-input-background-readonly: var(--bi-neutral-10);
-  --bic-input-border-color: var(--bi-neutral-50);
-  --bic-input-border-color-hover: var(--bi-neutral-50);
-  --bic-input-border-color-readonly: var(--bi-neutral-50);
-  --bic-input-color-readonly: var(--bi-neutral-95);
-  --bic-input-color: var(--bi-neutral-95);
-  --bic-input-disabled-color: var(--bi-neutral-50);
-  --bic-input-placeholder-color: var(--bi-neutral-60);
-  --bic-input-focus-outline-color: var(--bi-primary-50);
-  --bic-input-focus-shadow-color: var(--bi-basic-white);
-  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
-}
-
-.bi-input[data-dark="true"] {
-  --bic-input-background: var(--bi-neutral-95);
-  --bic-input-background-readonly: var(--bi-neutral-50);
-  --bic-input-border-color-hover: var(--bi-neutral-25);
-  --bic-input-color-readonly: var(--bi-basic-white);
-  --bic-input-color: var(--bi-basic-white);
-  --bic-input-disabled-color: var(--bi-neutral-40);
-  --bic-input-placeholder-color: var(--bi-neutral-30);
-  --bic-input-focus-outline-color: var(--bi-primary-30);
-  --bic-input-focus-shadow-color: var(--bi-neutral-95);
-  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
-}
-
-.bi-input {
+  --bic-input-background: var(--bi-color-surface-subtle);
+  --bic-input-background-readonly: var(--bi-color-surface);
+  --bic-input-border-color: var(--bi-color-stroke-contrast);
+  --bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
+  --bic-input-color-readonly: var(--bi-color-text-subtle);
+  --bic-input-color: var(--bi-color-text);
+  --bic-input-disabled-color: var(--bi-color-text-subtle);
+  --bic-input-placeholder-color: var(--bi-color-text-secondary);
+  --bic-input-focus-outline-color: var(--bi-states-focus);
+  --bic-input-focus-shadow-color: var(--bi-states-focus-background);
   appearance: none;
   background: var(--bic-input-background);
   border-radius: var(--bi-radius-medium);
@@ -58,179 +46,173 @@
   border: none;
   line-height: 1;
   position: relative;
-}
-
-.bi-input[data-size="large"] {
-  --bic-input-size: var(--bi-scale-14x);
-  --bic-input-font-size: 1.25rem;
-}
-
-.bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
-  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
-}
-
-.bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
-  --bic-input-border-color: var(--bic-input-focus-outline-color);
-}
 
-.bi-input:focus-visible {
-  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
-  outline-offset: 0;
-  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
+  &[data-size="large"] {
+    --bic-input-size: var(--bi-scale-14x);
+    --bic-input-font-size: 1.25rem;
+  }
+
+  &:where(:not([type="checkbox"], [type="radio"])) {
+    &:hover {
+      background: var(--_bi--hover, linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%),
+        var(--bic-input-background));
+    }
+
+    &:focus-visible {
+      --bic-input-border-color: var(--bic-input-focus-outline-color);
+      background: var(--_bi--focus, var(--bic-input-background));
+    }
+  }
+
+  &:focus-visible {
+    outline: var(--_bi--focus, 3px solid var(--bic-input-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-input:focus-visible * {
-  --_bi--focus: ;
-}
-
-.bi-input::placeholder {
-  color: var(--bic-input-placeholder-color);
-}
-
-.bi-input:not([size], [cols]) {
-  width: 100%;
-}
-
-.bi-input:disabled, .bi-input[aria-disabled="true"] {
-  cursor: not-allowed;
-}
-
-.bi-input[aria-invalid="true"] {
-  --bic-input-border-color: var(--bic-input-border-color-invalid);
-}
-
-.bi-input[readonly], .bi-input:disabled, .bi-input[aria-disabled="true"] {
-  background: var(--bic-input-background-readonly);
-  --bic-input-border-color: var(--bic-input-border-color-readonly);
-  color: var(--bic-input-color-readonly);
-}
-
-.bi-input:is(textarea) {
-  height: auto;
-  min-height: calc(var(--bic-input-size) * 2);
-  resize: vertical;
-}
-
-.bi-input:is(textarea):not([rows]) {
-  field-sizing: content;
-}
-
-.bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-.bi-input:is(select) {
-  background-image: var(--bic-input-select-chevron);
-  background-position: calc(100% - .5em);
-  background-repeat: no-repeat;
-  background-size: 1.5em;
-}
-
-.bi-input[type="checkbox"], .bi-input[type="radio"] {
-  padding: var(--bi-scale-0-50x);
-  line-height: inherit;
-  height: var(--bic-input-toggle-size);
-  width: var(--bic-input-toggle-size);
-  box-shadow: none;
-  border-width: var(--bi-stroke-medium);
-  border-style: solid;
-  border-color: var(--bic-input-border-color);
-  background: none;
-  flex-shrink: 0;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
-  outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
-  outline-offset: var(--_bi--focus, 3px);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):focus-visible * {
-  --_bi--focus: ;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
-  cursor: pointer;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"] {
-  border-radius: var(--bi-radius-full);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:before {
-  content: "";
-  background-color: var(--bic-input-toggle-background);
-  border-radius: 100%;
-  width: 0;
-  height: 0;
-  transition: width .1s ease-in-out, height .1s ease-in-out;
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked {
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="radio"]:checked:before {
-  width: 12px;
-  height: 12px;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]) {
-  border-radius: var(--bi-radius-small);
-  place-content: center;
-  display: grid;
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):before {
-  content: "";
-  width: .7em;
-  height: .7em;
-  box-shadow: inset 1em 1em var(--bic-input-toggle-color);
-  transform-origin: center;
-  clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
-  transition: transform .2s ease-in-out;
-  transform: scale(0);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate) {
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):where(:checked, :indeterminate):before {
-  transform: scale(1);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"]:not([role="switch"]):indeterminate:before {
-  clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
-  --_bic-input-circle-position-x: var(--bi-scale-0-50x);
-  background: var(--bi-neutral-50);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"]:where(:checked) {
-  --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
-  background: var(--bic-input-toggle-background);
-  --bic-input-border-color: var(--bic-input-toggle-background);
-}
-
-:is(.bi-input[type="checkbox"], .bi-input[type="radio"])[type="checkbox"][role="switch"] {
-  background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
-  background-origin: content-box;
-  background-position: var(--_bic-input-circle-position-x);
-  background-repeat: no-repeat;
-  background-size: calc(var(--bic-input-toggle-size)) 100%;
-  border-radius: var(--bi-radius-full);
-  width: var(--bi-scale-11x);
-  height: var(--bi-scale-6x);
-  padding-inline: 0;
-  transition: background-position .2s;
+  }
+
+  &::placeholder {
+    color: var(--bic-input-placeholder-color);
+  }
+
+  &:not([size], [cols]) {
+    width: 100%;
+  }
+
+  &:disabled, &[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+
+  &[aria-invalid="true"] {
+    --bic-input-border-color: var(--bic-input-border-color-invalid);
+    --bic-input-focus-outline-color: var(--bic-input-border-color-invalid);
+  }
+
+  &[readonly], &:disabled, &[aria-disabled="true"] {
+    background: var(--bic-input-background-readonly);
+    color: var(--bic-input-color-readonly);
+  }
+
+  &:is(textarea) {
+    height: auto;
+    min-height: calc(var(--bic-input-size) * 2);
+    resize: vertical;
+
+    &:not([rows]) {
+      field-sizing: content;
+    }
+  }
+
+  &:is(select) {
+    &:not([readonly], [aria-disabled="true"], :disabled) {
+      cursor: pointer;
+    }
+
+    background-image: var(--_bic-input-select-chevron);
+    background-position: calc(100% - .5em);
+    background-repeat: no-repeat;
+    background-size: 1.5em;
+  }
+
+  &[type="checkbox"], &[type="radio"] {
+    padding: var(--bi-scale-0-50x);
+    line-height: inherit;
+    height: var(--bic-input-toggle-size);
+    width: var(--bic-input-toggle-size);
+    box-shadow: none;
+    border-width: var(--bi-stroke-medium);
+    border-style: solid;
+    border-color: var(--bic-input-border-color);
+    background: none;
+    flex-shrink: 0;
+
+    &:focus-visible {
+      box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
+      outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
+      outline-offset: var(--_bi--focus, 3px);
+    }
+
+    &:read-only:not([readonly], [aria-disabled="true"], :disabled) {
+      cursor: pointer;
+    }
+
+    &[type="radio"] {
+      border-radius: var(--bi-radius-full);
+
+      &:before {
+        content: "";
+        background-color: var(--bic-input-toggle-background);
+        border-radius: 100%;
+        width: 0;
+        height: 0;
+        transition: width .1s ease-in-out, height .1s ease-in-out;
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &:checked {
+        --bic-input-border-color: var(--bic-input-toggle-background);
+
+        &:before {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+
+    &[type="checkbox"]:not([role="switch"]) {
+      border-radius: var(--bi-radius-small);
+      place-content: center;
+      display: grid;
+
+      &:before {
+        content: "";
+        width: .7em;
+        height: .7em;
+        box-shadow: inset 1em 1em var(--bic-input-toggle-color);
+        transform-origin: center;
+        clip-path: polygon(9.73% 39.66%, 0% 49.25%, 34.81% 84.58%, 100% 20%, 90.45% 10.31%, 34.81% 65.12%);
+        transition: transform .2s ease-in-out;
+        transform: scale(0);
+      }
+
+      &:where(:checked, :indeterminate) {
+        background: var(--bic-input-toggle-background);
+        --bic-input-border-color: var(--bic-input-toggle-background);
+
+        &:before {
+          transform: scale(1);
+        }
+      }
+
+      &:indeterminate:before {
+        clip-path: polygon(0% 42%, 0% 58%, 100% 58%, 100% 42%);
+      }
+    }
+
+    &[type="checkbox"][role="switch"] {
+      --_bic-input-circle-position-x: var(--bi-scale-0-50x);
+      background: var(--bi-neutral-50);
+
+      &:where(:checked) {
+        --_bic-input-circle-position-x: calc(100% - var(--bi-scale-0-50x));
+        background: var(--bic-input-toggle-background);
+        --bic-input-border-color: var(--bic-input-toggle-background);
+      }
+
+      background-image: radial-gradient(circle closest-side, var(--bi-basic-white) 95%, transparent 100%);
+      background-origin: content-box;
+      background-position: var(--_bic-input-circle-position-x);
+      background-repeat: no-repeat;
+      background-size: calc(var(--bic-input-toggle-size)) 100%;
+      border-radius: var(--bi-radius-full);
+      width: var(--bi-scale-11x);
+      height: var(--bi-scale-6x);
+      padding-inline: 0;
+      transition: background-position .2s;
+    }
+  }
 }

package/dist/components/label.css

@@ -1,28 +1,22 @@
 .bi-label {
-  --bic-label-color: var(--bic-field-label-color, var(--bi-neutral-95));
-  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-primary-50));
-}
-
-.bi-label[data-dark="true"] {
-  --bic-label-color: var(--bic-field-label-color, var(--bi-basic-white));
-  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-secondary-50));
-}
-
-.bi-label {
+  --bic-label-color: var(--bic-field-label-color, var(--bi-color-text));
+  --bic-label-required-color: var(--bic-field-label-required-color, var(--bi-states-required));
   color: var(--bic-label-color);
   font: var(--bi-font-label-medium);
-}
 
-.bi-label[data-weight="medium"] {
-  font-weight: var(--bi-font-weight-regular);
-}
+  &[data-weight="medium"] {
+    font-weight: var(--bi-font-weight-regular);
+  }
 
-.bi-label[data-weight="regular"] {
-  font-weight: 300;
-}
+  &[data-weight="regular"] {
+    font-weight: 300;
+  }
 
-.bi-label:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required):before {
-  content: "*";
-  color: var(--bic-label-required-color);
-  padding-inline-end: var(--bi-scale-0-25x);
+  &:has( ~ .bi-input:required,  ~ .bi-field--affixes > .bi-input:required) {
+    &:before {
+      content: "*";
+      color: var(--bic-label-required-color);
+      padding-inline-end: var(--bi-scale-0-25x);
+    }
+  }
 }

package/dist/components/link.css

@@ -1,74 +1,54 @@
 .bi-link {
-  --bic-link-background-active: var(--bi-primary-20);
-  --bic-link-color-active: var(--bi-primary-60);
-  --bic-link-color-hover: var(--bi-primary-60);
-  --bic-link-color: var(--bi-primary-50);
+  --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
+  --bic-link-color: var(--bi-color-primary-contrast);
   --bic-link-text-decoration-thickness--hover: .125em;
   --bic-link-text-decoration-thickness: .0625em;
-  --bic-link-focus-shadow-color: var(--bi-basic-white);
-  --bic-link-focus-outline-color: var(--bi-primary-50);
+
+  &[data-color] {
+    --bic-link-color-hover: var(--bi-color-contrast-hover);
+    --bic-link-color: var(--bi-color-contrast);
+  }
+
   color: var(--bic-link-color);
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-thickness: var(--bic-link-text-decoration-thickness);
   text-underline-offset: .25em;
   outline: none;
-}
-
-.bi-link :is(img, svg) {
-  vertical-align: middle;
-}
 
-.bi-link[data-dark="true"] {
-  --bic-link-background-active: var(--bi-primary-80);
-  --bic-link-color-active: var(--bi-primary-30);
-  --bic-link-color-hover: var(--bi-primary-30);
-  --bic-link-color: var(--bi-primary-40);
-  --bic-link-focus-shadow-color: var(--bi-neutral-95);
-  --bic-link-focus-outline-color: var(--bi-primary-30);
-}
-
-.bi-link[data-color="neutral"] {
-  --bic-link-background-active: var(--bi-neutral-10);
-  --bic-link-color-active: var(--bi-neutral-100);
-  --bic-link-color-hover: var(--bi-neutral-100);
-  --bic-link-color: var(--bi-neutral-90);
-}
-
-.bi-link[data-color="neutral"][data-dark="true"] {
-  --bic-link-background-active: var(--bi-neutral-90);
-  --bic-link-color-active: var(--bi-neutral-15);
-  --bic-link-color-hover: var(--bi-neutral-15);
-  --bic-link-color: var(--bi-neutral-5);
-}
+  & :is(img, svg) {
+    vertical-align: middle;
+  }
 
-.bi-link[data-underline="hover"]:not(:hover) {
-  text-decoration: none;
-}
+  &[data-underline="hover"]:not(:hover) {
+    text-decoration: none;
+  }
 
-.bi-link:visited {
-  color: var(--bic-link-color);
-}
+  &:visited {
+    color: var(--bic-link-color);
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .bi-link:hover {
-    color: var(--bic-link-color-hover);
-    --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: var(--bic-link-color-hover);
+      --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
+    }
   }
-}
 
-.bi-link:focus-visible {
-  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
-  outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
-  outline-offset: var(--_bi--focus, 2px);
-  border-radius: var(--bi-radius-small);
-}
+  &:focus-visible {
+    box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
+    outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
+    outline-offset: var(--_bi--focus, 2px);
+    border-radius: var(--bi-radius-small);
+    text-decoration: none;
 
-.bi-link:focus-visible * {
-  --_bi--focus: ;
-}
+    & * {
+      --_bi--focus: ;
+    }
+  }
 
-.bi-link:active {
-  background: var(--bic-link-background-active);
-  color: var(--bic-link-color-active);
+  &:active {
+    background-color: var(--bi-states-press);
+    border-radius: var(--bi-radius-small);
+  }
 }