@ardium-ui/ui 5.0.0-alpha.74 → 5.0.0-alpha.76

package/themes/default/chips.scss

@@ -40,214 +40,221 @@
   --ard-chip-disabled-selected-opacity: 40%;
 }
 
-//! general css
-.ard-chip-wrapper {
-  @include coloringMixins.typeColors();
-  @include clearButton.clearButton();
-  @include defaultMixins.formVariants();
-
-  font-family: var(--ard-font-family);
-  color: ARD.$text2;
-  background: ARD.$bg;
-  border-radius: var(--ard-variant-border-radius);
-  padding: 0;
-  margin: var(--ard-chip-margin, 0);
-  vertical-align: center;
-  display: flex;
-  align-items: center;
-  font-size: var(--ard-chip-font-size, 0.875rem);
-  position: relative;
-  outline: none;
-  user-select: none;
-  overflow: hidden;
-  height: var(--ard-chip-height, 2rem);
-
-  > .ard-chip-content-wrapper {
-    padding: var(--ard-chip-padding, 0 0.75rem);
-  }
-  > .ard-focus-overlay {
-    @include defaultMixins.focus-overlay;
-    background: ARD.$overlay;
-    border-radius: 0;
-  }
+@layer ard-theme {
+  //! general css
+  .ard-chip-wrapper {
+    @include coloringMixins.typeColors();
+    @include clearButton.clearButton();
+    @include defaultMixins.formVariants();
 
-  &.ard-chip-selectable {
-    cursor: pointer;
+    font-family: var(--ard-font-family);
+    color: ARD.$text2;
+    background: ARD.$bg;
+    border-radius: var(--ard-variant-border-radius);
+    padding: 0;
+    margin: var(--ard-chip-margin, 0);
+    vertical-align: center;
     display: flex;
     align-items: center;
+    font-size: var(--ard-chip-font-size, 0.875rem);
+    position: relative;
+    outline: none;
+    user-select: none;
+    overflow: hidden;
+    height: var(--ard-chip-height, 2rem);
 
-    &:hover,
-    &:focus {
-      > .ard-focus-overlay {
-        opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
-      }
-    }
-    &:active {
-      > .ard-focus-overlay {
-        opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
-      }
-    }
-
-    .ard-chip-selection-icon {
-      @include defaultMixins.icon;
-
-      &::after {
-        content: '\e876';
-      }
+    > .ard-chip-content-wrapper {
+      padding: var(--ard-chip-padding, 0 0.75rem);
     }
-  }
-  //! appearances
-  &.ard-appearance-filled,
-  &.ard-appearance-filled-strong {
-    border: 1px solid transparent;
-
-    &.ard-chip-selectable {
-      background-color: var(--ard-chip-filled-unselected-background, #{ARD.$bg-f});
-      color: var(--ard-chip-filled-unselected-color, #{ARD.$text2});
-      transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease), background-color var(--ard-chip-transition, 0.15s ease);
-
-      &.ard-chip-selected {
-        color: var(--ard-cmpcl--on-bg-colored);
-        background: var(--ard-cmpcl--bg-colored);
-      }
+    > .ard-focus-overlay {
+      @include defaultMixins.focus-overlay;
+      background: ARD.$overlay;
+      border-radius: 0;
     }
-  }
-  &.ard-appearance-filled {
-    background: var(--ard-cmpcl--bg-colored-light);
-    color: var(--ard-cmpcl--on-bg-colored-light);
-  }
-  &.ard-appearance-filled-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
-  }
-  &.ard-appearance-outlined,
-  &.ard-appearance-outlined-strong {
-    background: transparent;
-    color: var(--ard-cmpcl--content);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
-    border-radius: var(--ard-variant-border-radius);
-    font-weight: 600;
 
     &.ard-chip-selectable {
-      transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
 
-      > .ard-focus-overlay {
-        opacity: 0;
-        background: var(--ard-cmpcl--bg-colored);
-      }
       &:hover,
       &:focus {
         > .ard-focus-overlay {
-          opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
+          opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
         }
       }
       &:active {
         > .ard-focus-overlay {
-          opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
+          opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
         }
       }
 
-      &.ard-chip-selected {
-        color: var(--ard-cmpcl--content);
-        border-color: var(--ard-cmpcl--content);
+      .ard-chip-selection-icon {
+        @include defaultMixins.icon;
 
-        > .ard-focus-overlay {
-          opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
+        &::after {
+          content: '\e876';
         }
-        &:hover {
-          > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
-          }
+      }
+    }
+    //! appearances
+    &.ard-appearance-filled,
+    &.ard-appearance-filled-strong {
+      border: 1px solid transparent;
+
+      &.ard-chip-selectable {
+        background-color: var(--ard-chip-filled-unselected-background, #{ARD.$bg-f});
+        color: var(--ard-chip-filled-unselected-color, #{ARD.$text2});
+        transition:
+          color var(--ard-chip-transition, 0.15s ease),
+          border-color var(--ard-chip-transition, 0.15s ease),
+          background-color var(--ard-chip-transition, 0.15s ease);
+
+        &.ard-chip-selected {
+          color: var(--ard-cmpcl--on-bg-colored);
+          background: var(--ard-cmpcl--bg-colored);
+        }
+      }
+    }
+    &.ard-appearance-filled {
+      background: var(--ard-cmpcl--bg-colored-light);
+      color: var(--ard-cmpcl--on-bg-colored-light);
+    }
+    &.ard-appearance-filled-strong {
+      background: var(--ard-cmpcl--bg-colored);
+      color: var(--ard-cmpcl--on-bg-colored);
+    }
+    &.ard-appearance-outlined,
+    &.ard-appearance-outlined-strong {
+      background: transparent;
+      color: var(--ard-cmpcl--content);
+      border: 1px solid var(--ard-cmpcl--bg-colored);
+      border-radius: var(--ard-variant-border-radius);
+      font-weight: 600;
+
+      &.ard-chip-selectable {
+        transition:
+          color var(--ard-chip-transition, 0.15s ease),
+          border-color var(--ard-chip-transition, 0.15s ease);
+
+        > .ard-focus-overlay {
+          opacity: 0;
+          background: var(--ard-cmpcl--bg-colored);
         }
+        &:hover,
         &:focus {
           > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
+            opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
           }
         }
-        &:focus-visible {
+        &:active {
           > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
+            opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
           }
         }
-        &:active {
+
+        &.ard-chip-selected {
+          color: var(--ard-cmpcl--content);
+          border-color: var(--ard-cmpcl--content);
+
           > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
+            opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
+          }
+          &:hover {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
+            }
+          }
+          &:focus {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
+            }
+          }
+          &:focus-visible {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
+            }
+          }
+          &:active {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
+            }
           }
         }
       }
     }
-  }
-  &.ard-appearance-outlined-strong {
-    > .ard-focus-overlay {
-      opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
-      background: var(--ard-cmpcl--bg-colored);
-    }
-    &.ard-chip-selectable {
-      color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));
-      border: 1px solid var(--ard-chip-outlined-strong-selectable-border-color, var(--ard-detail-light));
+    &.ard-appearance-outlined-strong {
+      > .ard-focus-overlay {
+        opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
+        background: var(--ard-cmpcl--bg-colored);
+      }
+      &.ard-chip-selectable {
+        color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));
+        border: 1px solid var(--ard-chip-outlined-strong-selectable-border-color, var(--ard-detail-light));
+      }
     }
-  }
 
-  //! alignments
-  &.ard-chip-align-left {
-    flex-direction: row;
-    padding-left: var(--ard-chip-padding-align-left, 0.125rem);
+    //! alignments
+    &.ard-chip-align-left {
+      flex-direction: row;
+      padding-left: var(--ard-chip-padding-align-left, 0.125rem);
 
-    .ard-chip-selection-icon {
-      padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
-      margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
-    }
-    &.ard-chip-deletable {
-      padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
+      .ard-chip-selection-icon {
+        padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
+        margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
+      }
+      &.ard-chip-deletable {
+        padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
 
-      .ard-chip-content-wrapper {
-        padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        .ard-chip-content-wrapper {
+          padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        }
       }
     }
-  }
-  &.ard-chip-align-right {
-    flex-direction: row-reverse;
-    padding-right: var(--ard-chip-padding-align-right, 0.125rem);
+    &.ard-chip-align-right {
+      flex-direction: row-reverse;
+      padding-right: var(--ard-chip-padding-align-right, 0.125rem);
 
-    .ard-chip-selection-icon {
-      padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
-      margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
-    }
-    &.ard-chip-deletable {
-      padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
+      .ard-chip-selection-icon {
+        padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
+        margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
+      }
+      &.ard-chip-deletable {
+        padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
 
-      .ard-chip-content-wrapper {
-        padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        .ard-chip-content-wrapper {
+          padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        }
       }
     }
-  }
-  //! compact
-  &.ard-compact {
-    height: var(--ard-chip-height-compact, 1.4375rem);
-    font-size: var(--ard-chip-font-size-compact, 0.8125rem);
+    //! compact
+    &.ard-compact {
+      height: var(--ard-chip-height-compact, 1.4375rem);
+      font-size: var(--ard-chip-font-size-compact, 0.8125rem);
 
-    > .ard-chip-content-wrapper {
-      padding: var(--ard-chip-padding-compact, 0 0.5625rem);
-    }
+      > .ard-chip-content-wrapper {
+        padding: var(--ard-chip-padding-compact, 0 0.5625rem);
+      }
 
-    &.ard-chip-align-left .ard-chip-selection-icon {
-      padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
-      margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
-    }
-    &.ard-chip-align-right .ard-chip-selection-icon {
-      padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
-      margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
+      &.ard-chip-align-left .ard-chip-selection-icon {
+        padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+        margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
+      }
+      &.ard-chip-align-right .ard-chip-selection-icon {
+        padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+        margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
+      }
     }
   }
-}
-//! disabled state
-.ard-disabled {
-  .ard-chip-wrapper {
-    pointer-events: none;
-    opacity: var(--ard-chip-disabled-opacity, 60%);
+  //! disabled state
+  .ard-disabled {
+    .ard-chip-wrapper {
+      pointer-events: none;
+      opacity: var(--ard-chip-disabled-opacity, 60%);
 
-    &.ard-chip-selected {
-      opacity: var(--ard-chip-disabled-selected-opacity, 40%);
+      &.ard-chip-selected {
+        opacity: var(--ard-chip-disabled-selected-opacity, 40%);
+      }
     }
   }
 }

package/themes/default/color-display.scss

@@ -11,41 +11,43 @@
   // --ard-color-display-border-color: ;
 }
 
-.ard-color-display-wrapper {
-  gap: var(--ard-color-display-gap, 0.3ch);
-  align-items: center;
+@layer ard-theme {
+  .ard-color-display-wrapper {
+    gap: var(--ard-color-display-gap, 0.3ch);
+    align-items: center;
 
-  .ard-color-display {
-    width: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
-    height: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
-    font-size: inherit;
-    cursor: help;
-    border: 1px solid transparent;
-  }
+    .ard-color-display {
+      width: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
+      height: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
+      font-size: inherit;
+      cursor: help;
+      border: 1px solid transparent;
+    }
 
-  .ard-color-display-label {
-    font-family: var(--ard-font-family-mono);
-    font-size: var(--ard-color-display-font-size, 1.15em);
-  }
+    .ard-color-display-label {
+      font-family: var(--ard-font-family-mono);
+      font-size: var(--ard-color-display-font-size, 1.15em);
+    }
 
-  &.ard-appearance-rounded {
-    .ard-color-display {
-      border-radius: var(--ard-color-display-rounded-corner-radius, 0.25em);
+    &.ard-appearance-rounded {
+      .ard-color-display {
+        border-radius: var(--ard-color-display-rounded-corner-radius, 0.25em);
+      }
     }
-  }
-  &.ard-appearance-circle {
-    .ard-color-display {
-      border-radius: 9999px;
+    &.ard-appearance-circle {
+      .ard-color-display {
+        border-radius: 9999px;
+      }
     }
-  }
-  &.ard-appearance-sharp {
-    .ard-color-display {
-      border-radius: 0;
+    &.ard-appearance-sharp {
+      .ard-color-display {
+        border-radius: 0;
+      }
     }
-  }
-  &.ard-with-border {
-    .ard-color-display {
-      border-color: var(--ard-color-display-border-color, #{ARD.$text});
+    &.ard-with-border {
+      .ard-color-display {
+        border-color: var(--ard-color-display-border-color, #{ARD.$text});
+      }
     }
   }
 }

package/themes/default/color-picker.scss

@@ -1,111 +1,113 @@
 @use '../variables' as ARD;
 
-.ard-color-picker {
-  width: 15rem;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  .ard-color-picker-click-areas {
-    width: 100%;
+@layer ard-theme {
+  .ard-color-picker {
+    width: 15rem;
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
     gap: 0.5rem;
 
-    .ard-color-picker-shade-map,
-    .ard-color-picker-hue-map,
-    .ard-color-picker-opacity-map {
-      border: 1px solid ARD.$detail-ultralight-solid;
+    .ard-color-picker-click-areas {
+      width: 100%;
+      gap: 0.5rem;
 
-      &:focus-visible {
-        outline: 2px solid ARD.$overlay;
-        outline-offset: 1px;
-      }
-    }
-    .ard-color-picker-shade-map {
-      flex-grow: 1;
-      aspect-ratio: 1;
-    }
-    .ard-color-picker-hue-map,
-    .ard-color-picker-opacity-map {
-      width: 1rem;
-    }
-    .ard-color-picker-opacity-map {
-      --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
-      --ard-color-picker-opacity-checkerboard-size: 0.5rem;
-    }
-    .ard-color-picker-shade-indicator {
-      width: 0.375rem;
-      height: 0.375rem;
-      border: 2px solid white;
-      outline: 1px solid black;
-      border-radius: 999px;
-      cursor: pointer;
-    }
-    .ard-color-picker-shade-indicator-container,
-    .ard-color-picker-hue-indicator-container,
-    .ard-color-picker-opacity-indicator-container {
-      top: clamp(2px, var(--top), calc(100% - 2px));
-    }
-    .ard-color-picker-shade-indicator-container {
-      left: clamp(2px, var(--left), calc(100% - 2px));
-    }
-    .ard-color-picker-hue-indicator-container,
-    .ard-color-picker-opacity-indicator-container {
-      left: 50%;
-    }
-    .ard-color-picker-hue-indicator,
-    .ard-color-picker-opacity-indicator {
-      width: 1rem;
-      height: 0.25rem;
-      border: 2px solid white;
-      outline: 1px solid black;
-      border-radius: 3px;
-      cursor: pointer;
-    }
-  }
-  .ard-color-picker-inputs {
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    grid-template-rows: max-content max-content;
-    gap: 0.5rem;
+      .ard-color-picker-shade-map,
+      .ard-color-picker-hue-map,
+      .ard-color-picker-opacity-map {
+        border: 1px solid ARD.$detail-ultralight-solid;
 
-    .ard-color-picker-input-type {
-      font-weight: 700;
-      width: max-content;
+        &:focus-visible {
+          outline: 2px solid ARD.$overlay;
+          outline-offset: 1px;
+        }
+      }
+      .ard-color-picker-shade-map {
+        flex-grow: 1;
+        aspect-ratio: 1;
+      }
+      .ard-color-picker-hue-map,
+      .ard-color-picker-opacity-map {
+        width: 1rem;
+      }
+      .ard-color-picker-opacity-map {
+        --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
+        --ard-color-picker-opacity-checkerboard-size: 0.5rem;
+      }
+      .ard-color-picker-shade-indicator {
+        width: 0.375rem;
+        height: 0.375rem;
+        border: 2px solid white;
+        outline: 1px solid black;
+        border-radius: 999px;
+        cursor: pointer;
+      }
+      .ard-color-picker-shade-indicator-container,
+      .ard-color-picker-hue-indicator-container,
+      .ard-color-picker-opacity-indicator-container {
+        top: clamp(2px, var(--top), calc(100% - 2px));
+      }
+      .ard-color-picker-shade-indicator-container {
+        left: clamp(2px, var(--left), calc(100% - 2px));
+      }
+      .ard-color-picker-hue-indicator-container,
+      .ard-color-picker-opacity-indicator-container {
+        left: 50%;
+      }
+      .ard-color-picker-hue-indicator,
+      .ard-color-picker-opacity-indicator {
+        width: 1rem;
+        height: 0.25rem;
+        border: 2px solid white;
+        outline: 1px solid black;
+        border-radius: 3px;
+        cursor: pointer;
+      }
     }
-    .ard-color-picker-inputs-container {
+    .ard-color-picker-inputs {
       display: grid;
+      grid-template-columns: 1fr max-content;
+      grid-template-rows: max-content max-content;
       gap: 0.5rem;
-      width: 100%;
-      grid-column: 1 / 3;
 
-      &.ard-mode-hex {
-        grid-template-columns: 1fr;
-      }
-      &.ard-mode-triple {
-        grid-template-columns: 1fr 1fr 1fr;
+      .ard-color-picker-input-type {
+        font-weight: 700;
+        width: max-content;
       }
-      &.ard-mode-opacity {
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+      .ard-color-picker-inputs-container {
+        display: grid;
+        gap: 0.5rem;
+        width: 100%;
+        grid-column: 1 / 3;
 
-        &.ard-mode-hex .ard-color-picker-hex-input {
-          grid-column: 1 / 4;
+        &.ard-mode-hex {
+          grid-template-columns: 1fr;
+        }
+        &.ard-mode-triple {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+        &.ard-mode-opacity {
+          grid-template-columns: 1fr 1fr 1fr 1fr;
+
+          &.ard-mode-hex .ard-color-picker-hex-input {
+            grid-column: 1 / 4;
+          }
         }
       }
-    }
-    .ard-color-picker-reference {
-      --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
-      --ard-color-picker-opacity-checkerboard-size: 0.5rem;
+      .ard-color-picker-reference {
+        --ard-color-picker-opacity-checkerboard-color: #{ARD.$detail-ultralight-solid};
+        --ard-color-picker-opacity-checkerboard-size: 0.5rem;
 
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      width: 4rem;
-      height: 100%;
-      border: 1px solid ARD.$detail-ultralight-solid;
-      box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 4rem;
+        height: 100%;
+        border: 1px solid ARD.$detail-ultralight-solid;
+        box-sizing: border-box;
+      }
+    }
+    &.ard-vertical {
+      width: 13.5rem;
     }
-  }
-  &.ard-vertical {
-    width: 13.5rem;
   }
 }