@bi-digital/css 0.11.10 → 0.12.0

package/dist/components/card.css

@@ -1,12 +1,11 @@
 .bi-card {
-  --bic-card-background-color: var(--bi-basic-white);
-  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
-  --bic-card-border-color: var(--bi-neutral-15);
-  --bic-card-color: var(--bi-neutral-95);
-  --bic-card-header-title-color: var(--bi-neutral-95);
-  --bic-card-header-bold-color: var(--bi-primary-60);
-  --bic-card-header-label-color: var(--bi-neutral-50);
-  --bic-card-content-color: var(--bi-neutral-50);
+  --bic-card-background-color: var(--bi-color-surface-subtle);
+  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-color-stroke);
+  --bic-card-color: var(--bi-color-text-secondary);
+  --bic-card-header-title-color: var(--bi-color-text);
+  --bic-card-header-bold-color: var(--bi-color-text-accent);
+  --bic-card-header-label-color: var(--bi-color-text-secondary);
+  --bic-card-content-color: var(--bi-color-text-secondary);
   --bic-card-content-padding: var(--bi-scale-4x);
   --bic-card-border-radius: var(--bi-radius-medium);
   --bic-card-content-lines: 2;
@@ -14,42 +13,11 @@
   --bic-card-media-date-width: 3.1875rem;
   --bic-card-media-date-height: 2.875rem;
   --bic-card-actions-flex-direction: column;
-  --bic-card-actions-background-color: var(--bi-neutral-10);
-  --bic-card-actions-icon-color: var(--bi-primary-50);
-  --bic-card-border-hover-color: var(--bi-neutral-50);
+  --bic-card-actions-background-color: var(--bi-color-surface-strong);
+  --bic-card-actions-icon-color: var(--bi-color-contrast);
+  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
   --bic-card-box-shadow-hover-color: #0000000d;
-  --bic-card-box-shadow-focus-color: var(--bi-primary-50);
-  --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
-  --bic-card-box-shadow-focus-outer-border: 6px;
-  --bic-card-box-shadow-focus-inner-border: 4px;
-  --bic-card-border-active-color: var(--bi-primary-50);
   --bic-card-box-shadow-active-color: #0000000d;
-  --bic-card-box-shadow-active-outer-border: 20px;
-  --bic-card-box-shadow-active-inner-border: 10px;
-}
-
-.bi-card[data-dark="true"] {
-  --bic-card-background-color: var(--bi-neutral-90);
-  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
-  --bic-card-border-color: var(--bi-neutral-70);
-  --bic-card-color: var(--bi-neutral-5);
-  --bic-card-header-title-color: var(--bi-neutral-5);
-  --bic-card-header-bold-color: var(--bi-primary-20);
-  --bic-card-header-label-color: var(--bi-neutral-30);
-  --bic-card-content-color: var(--bi-neutral-30);
-  --bic-card-actions-background-color: var(--bi-neutral-75);
-  --bic-card-actions-icon-color: var(--bi-neutral-10);
-  --bic-card-border-hover-color: var(--bi-neutral-25);
-  --bic-card-box-shadow-hover-color: #b2cdf40d;
-  --bic-card-box-shadow-focus-color: var(--bi-primary-30);
-  --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
-  --bic-card-box-shadow-focus-outer-border: 4.5px;
-  --bic-card-box-shadow-focus-inner-border: 4px;
-  --bic-card-border-active-color: var(--bi-primary-50);
-  --bic-card-box-shadow-active-color: #b2cdf40d;
-}
-
-.bi-card {
   width: 100%;
   box-shadow: var(--bic-card-box-shadow);
   border-radius: var(--bic-card-border-radius);
@@ -57,297 +25,252 @@
   color: var(--bic-card-color);
   flex-direction: row;
   display: flex;
-}
 
-.bi-card[data-orientation="horizontal"] > div:first-child {
-  border-top-left-radius: var(--bic-card-border-radius);
-  border-bottom-left-radius: var(--bic-card-border-radius);
-}
+  &[data-orientation="horizontal"] {
+    & > div:first-child {
+      border-top-left-radius: var(--bic-card-border-radius);
+      border-bottom-left-radius: var(--bic-card-border-radius);
+    }
 
-.bi-card[data-orientation="horizontal"] > div:last-child {
-  border-top-right-radius: var(--bic-card-border-radius);
-  border-bottom-right-radius: var(--bic-card-border-radius);
-}
+    & > div:last-child {
+      border-top-right-radius: var(--bic-card-border-radius);
+      border-bottom-right-radius: var(--bic-card-border-radius);
+    }
 
-.bi-card[data-orientation="horizontal"] {
-  --bic-card-media-width: 15.75rem;
-}
+    --bic-card-media-width: 15.75rem;
 
-@media (width < 1024px) {
-  .bi-card[data-orientation="horizontal"] {
-    --bic-card-media-width: 14.5rem;
-  }
-}
+    @media (width < 1024px) {
+      --bic-card-media-width: 14.5rem;
+    }
 
-@media (width < 600px) {
-  .bi-card[data-orientation="horizontal"] {
-    --bic-card-media-width: 8.4375rem;
+    @media (width < 600px) {
+      --bic-card-media-width: 8.4375rem;
+    }
   }
-}
-
-.bi-card[data-orientation="vertical"] {
-  --bic-card-actions-flex-direction: row;
-  --bic-card-content-lines: 4;
-  --bic-card-media-date-width: 4rem;
-  --bic-card-media-date-height: 3.5625rem;
-  flex-direction: column;
-}
-
-.bi-card[data-orientation="vertical"] > div:first-child {
-  border-top-left-radius: var(--bic-card-border-radius);
-  border-top-right-radius: var(--bic-card-border-radius);
-}
-
-.bi-card[data-orientation="vertical"] > div:last-child {
-  border-bottom-left-radius: var(--bic-card-border-radius);
-  border-bottom-right-radius: var(--bic-card-border-radius);
-}
-
-.bi-card[data-orientation="vertical"] .bi-card--actions {
-  width: 100%;
-}
 
-.bi-card[data-color="info"] {
-  --bic-card-background-color: var(--bi-info-5);
-  --bic-card-color: var(--bi-info-90);
-  --bic-card-border-color: var(--bi-info-15);
-  --bic-card-header-title-color: var(--bi-info-90);
-  --bic-card-header-bold-color: var(--bi-info-90);
-  --bic-card-header-label-color: var(--bi-info-90);
-}
-
-.bi-card[data-color="warning"] {
-  --bic-card-background-color: var(--bi-warning-10);
-  --bic-card-color: var(--bi-warning-90);
-  --bic-card-border-color: var(--bi-warning-15);
-  --bic-card-header-title-color: var(--bi-warning-90);
-  --bic-card-header-bold-color: var(--bi-warning-90);
-  --bic-card-header-label-color: var(--bi-warning-90);
-}
-
-.bi-card[data-color="primary"][data-dark="true"] {
-  --bic-card-background-color: var(--bi-primary-90);
-  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
-  --bic-card-border-color: var(--bi-primary-75);
-  --bic-card-color: var(--bi-neutral-5);
-  --bic-card-header-title-color: var(--bi-neutral-5);
-  --bic-card-header-bold-color: var(--bi-primary-20);
-  --bic-card-header-label-color: var(--bi-neutral-30);
-  --bic-card-content-color: var(--bi-neutral-30);
-  --bic-card-actions-background-color: var(--bi-primary-85);
-  --bic-card-actions-icon-color: var(--bi-primary-10);
-  --bic-card-border-hover-color: var(--bi-primary-40);
-  --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
-  --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
-  --bic-card-border-active-color: var(--bi-primary-10);
-}
-
-.bi-card[data-error="true"] {
-  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
-  --bic-card-border-color: transparent;
-}
-
-.bi-card .bi-card--content {
-  padding: var(--bic-card-content-padding);
-  gap: var(--bi-scale-4x);
-  border-radius: inherit;
-  background: none;
-  border: none;
-  flex-direction: column;
-  flex: auto;
-  display: flex;
-  overflow: hidden;
-}
-
-.bi-card .bi-card--content > p {
-  color: var(--bic-card-content-color);
-  font: var(--bi-font-body-medium);
-  white-space: break-spaces;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: var(--bic-card-content-lines);
-  line-clamp: var(--bic-card-content-lines);
-  -webkit-box-orient: vertical;
-  margin: 0;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media (width < 600px) {
-  .bi-card .bi-card--content {
-    --bic-card-content-padding: var(--bi-scale-3x);
-    gap: var(--bi-scale-3x);
+  &[data-orientation="vertical"] {
+    --bic-card-actions-flex-direction: row;
+    --bic-card-content-lines: 4;
+    --bic-card-media-date-width: 4rem;
+    --bic-card-media-date-height: 3.5625rem;
+    flex-direction: column;
+
+    & > div:first-child {
+      border-top-left-radius: var(--bic-card-border-radius);
+      border-top-right-radius: var(--bic-card-border-radius);
+    }
+
+    & > div:last-child {
+      border-bottom-left-radius: var(--bic-card-border-radius);
+      border-bottom-right-radius: var(--bic-card-border-radius);
+    }
+
+    & .bi-card--actions {
+      width: 100%;
+    }
   }
-}
-
-:is(.bi-card, .bi-card .bi-card--content):is(a, button) {
-  cursor: pointer;
-  text-decoration: none;
-  transition: box-shadow .25s ease-in-out;
-  position: relative;
-}
 
-:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible {
-  box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color),
-            0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
-  outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
-  outline-offset: var(--_bi--focus, 2px);
-}
+  &[data-error="true"] {
+    box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-color-alert-fill);
+  }
 
-:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):focus-visible * {
-  --_bi--focus: ;
-}
+  & .bi-card--content {
+    padding: var(--bic-card-content-padding);
+    gap: var(--bi-scale-4x);
+    border-radius: inherit;
+    background: none;
+    border: none;
+    flex-direction: column;
+    flex: auto;
+    display: flex;
+    overflow: hidden;
+
+    & > p {
+      color: var(--bic-card-content-color);
+      font: var(--bi-font-body-medium);
+      white-space: break-spaces;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: var(--bic-card-content-lines);
+      line-clamp: var(--bic-card-content-lines);
+      -webkit-box-orient: vertical;
+      margin: 0;
+      display: -webkit-box;
+      overflow: hidden;
+    }
+
+    @media (width < 600px) {
+      --bic-card-content-padding: var(--bi-scale-3x);
+      gap: var(--bi-scale-3x);
+    }
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  :is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):hover {
-    box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
+  &, & .bi-card--content {
+    &:is(a, button) {
+      cursor: pointer;
+      text-decoration: none;
+      transition: box-shadow .25s ease-in-out;
+      position: relative;
+
+      &:not(.disabled) {
+        &:focus-visible {
+          box-shadow: var(--bic-card-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);
+
+          & * {
+            --_bi--focus: ;
+          }
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+          &:hover {
+            box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
               0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
               0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
-  }
-}
+          }
+        }
 
-:is(.bi-card, .bi-card .bi-card--content):is(a, button):not(.disabled):active {
-  box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color),
+        &:active {
+          box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
             0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
             0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
-}
+        }
+      }
 
-:is(.bi-card, .bi-card .bi-card--content):is(a, button):disabled {
-  cursor: not-allowed;
-}
-
-.bi-card .bi-card--actions {
-  flex-direction: var(--bic-card-actions-flex-direction, column);
-  justify-content: center;
-  gap: var(--bi-scale-1x);
-  width: var(--bi-scale-14x);
-  background-color: var(--bic-card-actions-background-color);
-  display: flex;
-}
-
-@media (width < 600px) {
-  .bi-card .bi-card--actions {
-    width: var(--bi-scale-11x);
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
   }
-}
-
-.bi-card .bi-card--actions .bi-card--action {
-  --bic-button-font-size: var(--bi-icon-medium);
-  --bic-button-color: var(--bic-card-actions-icon-color);
-  --bic-button-size: var(--bi-scale-14x);
-  flex: 1;
-}
 
-@media (width < 600px) {
-  .bi-card .bi-card--actions .bi-card--action {
-    --bic-button-size: var(--bi-scale-11x);
+  & .bi-card--actions {
+    flex-direction: var(--bic-card-actions-flex-direction, column);
+    justify-content: center;
+    gap: var(--bi-scale-1x);
+    width: var(--bi-scale-14x);
+    background-color: var(--bic-card-actions-background-color);
+    display: flex;
+
+    @media (width < 600px) {
+      width: var(--bi-scale-11x);
+    }
+
+    & .bi-card--action {
+      --bic-button-font-size: var(--bi-icon-medium);
+      --bic-button-color: var(--bic-card-actions-icon-color);
+      --bic-button-size: var(--bi-scale-14x);
+      flex: 1;
+
+      @media (width < 600px) {
+        --bic-button-size: var(--bi-scale-11x);
+      }
+
+      &[data-color] {
+        --bic-card-actions-icon-color: var(--bi-color-contrast);
+      }
+    }
   }
-}
-
-.bi-card .bi-card--header {
-  font: var(--bi-font-body-medium);
-  gap: var(--bi-scale-0-50x);
-  word-wrap: break-word;
-  word-break: break-word;
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
 
-.bi-card .bi-card--header .bi-card--header-label {
-  color: var(--bic-card-header-label-color);
-  margin: 0;
-}
-
-@media (width < 600px) {
-  .bi-card .bi-card--header .bi-card--header-label {
-    font: var(--bi-font-body-small);
+  & .bi-card--header {
+    font: var(--bi-font-body-medium);
+    gap: var(--bi-scale-0-50x);
+    word-wrap: break-word;
+    word-break: break-word;
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+
+    & .bi-card--header-label {
+      color: var(--bic-card-header-label-color);
+      margin: 0;
+
+      @media (width < 600px) {
+        font: var(--bi-font-body-small);
+      }
+
+      & .bi-card--header-bold {
+        color: var(--bic-card-header-bold-color);
+        font-weight: var(--bi-font-weight-bold);
+      }
+
+      & .bi-card--header-dot {
+        width: var(--bi-scale-0-50x);
+        height: var(--bi-scale-0-50x);
+        margin: auto var(--bi-scale-1x);
+        vertical-align: middle;
+        background-color: currentColor;
+        border-radius: 50%;
+        display: inline-block;
+      }
+    }
+
+    & .bi-card--header-title {
+      font: var(--bi-font-title-bold-small);
+      color: var(--bic-card-header-title-color);
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+      margin: 0;
+      display: -webkit-box;
+      overflow: hidden;
+
+      @media (width < 600px) {
+        font: var(--bi-font-title-bold-xs);
+      }
+    }
   }
-}
-
-.bi-card .bi-card--header .bi-card--header-label .bi-card--header-bold {
-  color: var(--bic-card-header-bold-color);
-  font-weight: var(--bi-font-weight-bold);
-}
 
-.bi-card .bi-card--header .bi-card--header-label .bi-card--header-dot {
-  width: var(--bi-scale-0-50x);
-  height: var(--bi-scale-0-50x);
-  margin: auto var(--bi-scale-1x);
-  vertical-align: middle;
-  background-color: currentColor;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.bi-card .bi-card--header .bi-card--header-title {
-  font: var(--bi-font-title-bold-small);
-  color: var(--bic-card-header-title-color);
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media (width < 600px) {
-  .bi-card .bi-card--header .bi-card--header-title {
-    font: var(--bi-font-title-bold-xs);
-  }
-}
-
-.bi-card .bi-card--media {
-  width: var(--bic-card-media-width);
-  min-width: var(--bic-card-media-width);
-  display: block;
-  position: relative;
-}
-
-.bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
-  border-radius: inherit;
-  object-fit: cover;
-  aspect-ratio: 4 / 3;
-  width: 100%;
-  display: block;
-}
-
-@media (width < 600px) {
-  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
-    aspect-ratio: 3 / 2;
+  & .bi-card--media {
+    width: var(--bic-card-media-width);
+    min-width: var(--bic-card-media-width);
+    display: block;
+    position: relative;
+
+    & > :is(audio, figure, iframe, img, video) {
+      border-radius: inherit;
+      object-fit: cover;
+      aspect-ratio: 4 / 3;
+      width: 100%;
+      display: block;
+
+      @media (width < 600px) {
+        aspect-ratio: 3 / 2;
+      }
+    }
+
+    & .bi-card--media-overlay {
+      top: var(--bi-scale-4x);
+      left: var(--bi-scale-4x);
+      right: var(--bi-scale-4x);
+      flex-wrap: wrap;
+      width: fit-content;
+      display: flex;
+      position: absolute;
+    }
   }
-}
-
-.bi-card .bi-card--media .bi-card--media-overlay {
-  top: var(--bi-scale-4x);
-  left: var(--bi-scale-4x);
-  right: var(--bi-scale-4x);
-  flex-wrap: wrap;
-  width: fit-content;
-  display: flex;
-  position: absolute;
-}
 
-.bi-card .bi-card--date {
-  width: var(--bic-card-media-date-width);
-  height: var(--bic-card-media-date-height);
-  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
-  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
-  background: var(--bic-card-background-color);
-  box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
+  & .bi-card--date {
+    width: var(--bic-card-media-date-width);
+    height: var(--bic-card-media-date-height);
+    padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
+    border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
+    background: var(--bic-card-background-color);
+    box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d,
       0px 4px 6px 0px #26333f0d;
-  color: var(--bic-card-header-title-color);
-  text-align: center;
-  font: var(--bi-font-title-bold-medium);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  display: flex;
-}
-
-.bi-card .bi-card--date span {
-  color: var(--bic-card-header-bold-color);
-  font-size: .8125rem;
-  line-height: 1.15;
+    color: var(--bic-card-header-title-color);
+    text-align: center;
+    font: var(--bi-font-title-bold-medium);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: flex;
+
+    & span {
+      color: var(--bic-card-header-bold-color);
+      font-size: .8125rem;
+      line-height: 1.15;
+    }
+  }
 }

package/dist/components/checkbox-subsection.css

@@ -1,22 +1,18 @@
 .bi-checkbox-subsection {
-  --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
+  --bic-checkbox-subsection-line-bg: var(--bi-color-neutral-stroke-strong);
   display: flex;
-}
 
-.bi-checkbox-subsection[data-dark="true"] {
-  --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
-}
+  & > div:first-child {
+    margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
+    background-color: var(--bic-checkbox-subsection-line-bg);
+    width: var(--bi-stroke-medium);
+  }
 
-.bi-checkbox-subsection > div:first-child {
-  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
-  background-color: var(--bic-checkbox-subsection-line-bg);
-  width: var(--bi-stroke-medium);
-}
-
-.bi-checkbox-subsection > div:last-child {
-  align-items: flex-start;
-  gap: var(--bi-scale-0-50x);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
+  & > div:last-child {
+    align-items: flex-start;
+    gap: var(--bi-scale-0-50x);
+    flex-direction: column;
+    flex: 1;
+    display: flex;
+  }
 }