@bi-digital/css 0.11.10 → 0.11.11

package/dist/components/input.css

@@ -25,22 +25,20 @@
   --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>");
-}
+  &[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 {
   appearance: none;
   background: var(--bic-input-background);
   border-radius: var(--bi-radius-medium);
@@ -58,179 +56,179 @@
   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 {
+      box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
+    }
+
+    &:focus-visible {
+      --bic-input-border-color: var(--bic-input-focus-outline-color);
+    }
+  }
+
+  &: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;
+    & * {
+      --_bi--focus: ;
+    }
+  }
+
+  &::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);
+  }
+
+  &[readonly], &:disabled, &[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);
+  }
+
+  &: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);
+
+      & * {
+        --_bi--focus: ;
+      }
+    }
+
+    &: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,28 @@
 .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));
-}
+  &[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 {
   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

@@ -13,62 +13,62 @@
   text-decoration-thickness: var(--bic-link-text-decoration-thickness);
   text-underline-offset: .25em;
   outline: none;
-}
 
-.bi-link :is(img, svg) {
-  vertical-align: middle;
-}
+  & :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);
-}
+  &[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);
-}
+  &[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);
-}
+    &[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);
+    }
+  }
 
-.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(--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);
 
-.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: var(--bic-link-background-active);
+    color: var(--bic-link-color-active);
+  }
 }

package/dist/components/logo.css

@@ -19,50 +19,48 @@
   background-size: contain;
   justify-content: center;
   display: flex;
-}
-
-.bi-logo[data-dark="true"] {
-  --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
-  --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
-  --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
-}
 
-.bi-logo[data-size="xs"] {
-  --bic-logo-height: var(--bi-scale-6x);
-}
+  &[data-dark="true"] {
+    --bic-logo-international-vertical: var(--bic-logo-pride-dark-international-vertical, url("./assets/logos/vertical-dark.svg"));
+    --bic-logo-international: var(--bic-logo-pride-dark-international, url("./assets/logos/international-dark.svg"));
+    --bic-logo-default: var(--bic-logo-pride-dark-default, url("./assets/logos/dark.svg"));
+  }
 
-.bi-logo[data-size="small"] {
-  --bic-logo-height: var(--bi-scale-8x);
-}
+  &[data-size="xs"] {
+    --bic-logo-height: var(--bi-scale-6x);
+  }
 
-.bi-logo[data-size="medium"] {
-  --bic-logo-height: var(--bi-scale-11x);
-}
+  &[data-size="small"] {
+    --bic-logo-height: var(--bi-scale-8x);
+  }
 
-.bi-logo[data-size="large"] {
-  --bic-logo-height: var(--bi-scale-24x);
-}
+  &[data-size="medium"] {
+    --bic-logo-height: var(--bi-scale-11x);
+  }
 
-.bi-logo[data-size="xl"] {
-  --bic-logo-height: var(--bi-scale-36x);
-}
+  &[data-size="large"] {
+    --bic-logo-height: var(--bi-scale-24x);
+  }
 
-.bi-logo[data-size="xxl"] {
-  --bic-logo-height: var(--bi-scale-48x);
-}
+  &[data-size="xl"] {
+    --bic-logo-height: var(--bi-scale-36x);
+  }
 
-@media (width >= 795px) {
-  .bi-logo[data-international="true"][data-vertical="true"] {
-    background-image: var(--bic-logo-international-vertical);
-    aspect-ratio: .974318;
+  &[data-size="xxl"] {
+    --bic-logo-height: var(--bi-scale-48x);
   }
 
-  .bi-logo[data-international="true"] {
-    background-image: var(--bic-logo-international);
-    aspect-ratio: 2.8125;
+  @media (width >= 795px) {
+    &[data-international="true"] {
+      &[data-vertical="true"] {
+        background-image: var(--bic-logo-international-vertical);
+        aspect-ratio: .974318;
+      }
+
+      background-image: var(--bic-logo-international);
+      aspect-ratio: 2.8125;
+    }
   }
-}
 
-.bi-logo {
   background-image: var(--bic-logo-default);
 }