@rolster/styles-foundations 3.0.7 → 3.1.0

package/dist/design-system-bordered.css

@@ -385,6 +385,40 @@
   letter-spacing: inherit;
   line-height: inherit;
 }
+.rls-design-system-bordered .rls-button-icon {
+  --rlc-icon-dimension: var(
+    --rlc-button-icon-icon-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-button-dimension: var(
+    --rlc-button-icon-dimension,
+    var(--rls-sizing-x16)
+  );
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--pvt-button-dimension);
+  height: var(--pvt-button-dimension);
+  align-items: center;
+  justify-content: center;
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-button-icon-radius, var(--rls-sizing-x3));
+  cursor: pointer;
+  border: var(--rlc-button-icon-border, var(--rls-app-border-1-200));
+  color: var(--rlc-button-icon-font-color, var(--rls-app-color-600));
+  background: var(--rlc-button-icon-background, var(--rls-app-color-100));
+  transition: transform 240ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-button-icon:active {
+  transform: scale(0.8);
+}
+.rls-design-system-bordered .rls-button-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-button-icon--skeleton {
+  background: var(--rls-theme-color-300);
+}
 .rls-design-system-bordered .rls-breadcrumb {
   --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
   --pvt-link-font-color: var(--rls-app-color-600);
@@ -800,6 +834,7 @@
   display: flex;
   width: var(--pvt-dimension);
   height: var(--pvt-dimension);
+  flex: 0 0 auto;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
@@ -879,6 +914,93 @@
   height: var(--pvt-height);
   content-visibility: auto;
 }
+.rls-design-system-bordered .rls-input-counter {
+  --rlc-button-icon-border: none;
+  --pvt-body-border: var(
+    --rlc-input-counter-border,
+    var(--rls-app-border-1-200)
+  );
+  --pvt-body-background: var(
+    --rlc-input-counter-background,
+    var(--rls-app-color-050)
+  );
+  --pvt-body-shadow: none;
+  --pvt-button-background: var(
+    --rlc-input-counter-action-background,
+    var(--rls-app-color-200)
+  );
+  --pvt-button-background-hover: var(
+    --rlc-input-counter-action-background-hover,
+    var(--rls-app-color-300)
+  );
+  display: flex;
+  width: auto;
+  height: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  column-gap: var(--rls-sizing-x3);
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--rlc-input-counter-radius, var(--rls-sizing-x3));
+  border: var(--pvt-body-border);
+  box-shadow: var(--pvt-body-shadow);
+  background: var(--pvt-body-background);
+  transition: box-shadow 160ms 0ms var(--rls-standard-curve);
+}
+.rls-design-system-bordered .rls-input-counter--focused {
+  --pvt-body-shadow: var(
+    --rlc-input-counter-shadow-focused,
+    var(--rls-theme-shadow-500)
+  );
+  --pvt-body-border: var(
+    --rlc-input-counter-border-focused,
+    var(--rls-theme-border-1-500)
+  );
+}
+.rls-design-system-bordered .rls-input-counter--disabled {
+  --pvt-body-background: var(--rls-app-color-100);
+  --pvt-body-border: var(--rls-app-border-1-transparent);
+}
+.rls-design-system-bordered .rls-input-counter--readonly {
+  --pvt-body-background: transparent;
+}
+.rls-design-system-bordered .rls-input-counter__down {
+  --rlc-button-icon-radius: var(--rls-sizing-x3) 0rem 0rem var(--rls-sizing-x3);
+}
+.rls-design-system-bordered .rls-input-counter__up {
+  --rlc-button-icon-radius: 0rem var(--rls-sizing-x3) var(--rls-sizing-x3) 0rem;
+}
+.rls-design-system-bordered .rls-input-counter__body {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-input-counter__control {
+  width: var(--rlc-input-counter-width, 20rem);
+  padding: 0rem var(--rls-sizing-x3);
+  border: none;
+  outline: none;
+  text-align: center;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rlc-input-counter-font-color, var(--rls-app-color-900));
+  font-size: var(--rlc-input-counter-font-size, var(--rls-input-font-size));
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-design-system-bordered
+  .rls-input-counter__control::-webkit-inner-spin-button,
+.rls-design-system-bordered
+  .rls-input-counter__control::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rls-design-system-bordered .rls-input-counter__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-input-counter__control:disabled {
+  cursor: not-allowed;
+}
 .rls-design-system-bordered .rls-input {
   --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
   --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
@@ -1238,6 +1360,7 @@
   display: flex;
   width: var(--pvt-dimension);
   height: var(--pvt-dimension);
+  flex: 0 0 auto;
   justify-content: center;
   align-items: center;
   outline: none;
@@ -1429,6 +1552,7 @@
   --pvt-element-height: var(--rlc-switch-element-height, var(--rls-sizing-x8));
   --pvt-element-radius: var(--rlc-switch-element-radius, 50%);
   max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
+  flex: 0 0 auto;
 }
 .rls-design-system-bordered .rls-switch:hover {
   cursor: var(--rlc-switch-cursor, initial);
@@ -1755,6 +1879,13 @@
   justify-content: center;
   align-items: center;
 }
+.rls-design-system-bordered .rls-button-stepper {
+  display: flex;
+  width: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  column-gap: var(--rls-sizing-x4);
+}
 .rls-design-system-bordered .rls-button-toggle {
   width: auto;
 }
@@ -1934,6 +2065,16 @@
   color: var(--rls-danger-color-500);
 }
 .rls-design-system-bordered .rls-field-box__body {
+  --rlc-button-icon-dimension: var(--rls-sizing-x12);
+  --rlc-button-icon-icon-dimension: calc(
+    var(--pvt-action-dimension) - var(--rls-sizing-x2)
+  );
+  --rlc-button-icon-background: var(--pvt-action-background);
+  --rlc-button-icon-border: none;
+  --rlc-button-icon-radius: var(
+    --rlc-field-box-action-radius,
+    var(--rls-sizing-x2)
+  );
   display: flex;
   align-items: center;
   column-gap: var(--rls-sizing-x2);
@@ -1946,24 +2087,6 @@
   border: var(--pvt-body-border);
   box-shadow: var(--pvt-body-shadow);
 }
-.rls-design-system-bordered .rls-field-box__action {
-  --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
-  display: flex;
-  flex: 0 0 auto;
-  width: var(--pvt-action-dimension);
-  height: var(--pvt-action-dimension);
-  align-items: center;
-  justify-content: center;
-  color: var(--rls-app-color-600);
-  padding: 0rem;
-  outline: none;
-  border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
-  background: var(--pvt-action-background);
-}
-.rls-design-system-bordered .rls-field-box__action:disabled {
-  opacity: 0.5;
-  background: rgba(0, 0, 0, 0);
-}
 .rls-design-system-bordered .rls-field-box__helper {
   color: var(--rls-app-color-400);
   padding: 0rem 5rem;
@@ -2169,6 +2292,56 @@
 .rls-design-system-bordered .rls-field-list__element:not(:hover):focus {
   background: var(--rls-theme-color-100);
 }
+.rls-design-system-bordered .rls-field-list__multi__chips {
+  display: flex;
+  min-height: var(--rls-sizing-x12);
+  flex-wrap: wrap;
+  gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-field-list__multi__placeholder {
+  margin: auto 0rem;
+  cursor: default;
+  font-weight: var(
+    --rlc-field-list-control-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  font-size: var(
+    --rlc-field-list-control-font-size,
+    var(--rls-input-font-size)
+  );
+  letter-spacing: var(
+    --rlc-field-list-control-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-list__multi__chip {
+  display: flex;
+  width: auto;
+  align-items: center;
+  column-gap: var(--rls-sizing-x1);
+  border-radius: var(--rls-sizing-x2);
+  padding: var(--rls-sizing-x1) var(--rls-sizing-x3);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-field-list__multi__chip__description {
+  font-size: var(--rls-caption-font-size);
+  letter-spacing: var(--rls-caption-letter-spacing);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-design-system-bordered .rls-field-list__multi__chip__remove {
+  --rlc-icon-dimension: var(--rls-sizing-x8);
+  flex: 0 0 auto;
+  background: none;
+  padding: 0rem;
+  margin: 0rem;
+  outline: none;
+}
+.rls-design-system-bordered .rls-field-list__multi__element {
+  display: flex;
+  align-items: center;
+  column-gap: var(--rls-sizing-x4);
+}
 .rls-design-system-bordered .rls-field-list__action {
   padding: var(--pvt-list-component-padding);
   box-sizing: border-box;
@@ -2987,21 +3160,11 @@
 .rls-design-system-bordered .rls-picker-selector-title__label > span:hover {
   color: var(--rls-theme-color-500);
 }
-.rls-design-system-bordered .rls-picker-selector-title > button {
-  --rlc-icon-dimension: var(--rls-sizing-x10);
-  background: var(--rls-app-color-050);
-  outline: none;
-  padding: var(--rls-sizing-x2);
-  border-radius: var(--rls-sizing-x4);
-  color: var(--rls-app-color-900);
-}
-.rls-design-system-bordered .rls-picker-selector-title > button:hover {
-  background: var(--rls-app-color-300);
-}
-.rls-design-system-bordered .rls-picker-selector-title > button:disabled {
-  opacity: 0.5;
-  background: rgba(0, 0, 0, 0);
-  color: var(--rls-app-color-600);
+.rls-design-system-bordered .rls-picker-selector-title .rls-button-icon {
+  --rlc-button-icon-size: var(--rls-sizing-x14);
+  --rlc-button-icon-icon-size: var(--rls-sizing-x10);
+  --rlc-button-icon-background: var(--rls-app-color-050);
+  --rlc-button-icon-radius: var(--rls-sizing-x4);
 }
 .rls-design-system-bordered .rls-picker-year {
   --pvt-component-background: transparent;
@@ -3028,21 +3191,11 @@
   letter-spacing: 0.325rem;
   color: var(--rls-app-color-900);
 }
-.rls-design-system-bordered .rls-picker-year__action {
-  --rlc-icon-dimension: var(--rls-sizing-x10);
-  background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-600);
-  outline: none;
-  padding: var(--rls-sizing-x2);
-  border-radius: var(--rls-sizing-x4);
-}
-.rls-design-system-bordered .rls-picker-year__action:not(:disabled):hover {
-  color: var(--rls-theme-color-500);
-}
-.rls-design-system-bordered .rls-picker-year__action:disabled {
-  opacity: 0.5;
-  background: rgba(0, 0, 0, 0);
-  color: var(--rls-theme-color-300);
+.rls-design-system-bordered .rls-picker-year .rls-button-icon {
+  --rlc-button-icon-size: var(--rls-sizing-x14);
+  --rlc-button-icon-icon-size: var(--rls-sizing-x10);
+  --rlc-button-icon-background: var(--rls-theme-color-100);
+  --rlc-button-icon-radius: var(--rls-sizing-x4);
 }
 .rls-design-system-bordered .rls-picker-year__component {
   position: relative;
@@ -4092,6 +4245,58 @@
   --rlc-picker-clock-background: var(--rls-app-color-050);
   --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
 }
+.rls-design-system-bordered .rls-field-color {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-color-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-color-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-field-color .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-design-system-bordered .rls-field-color .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-design-system-bordered .rls-field-color__swatch {
+  width: var(--rls-sizing-x10);
+  height: var(--rls-sizing-x10);
+  flex: 0 0 auto;
+  border-radius: var(--rls-sizing-x2);
+  border: var(--rls-app-border-1-300);
+}
+.rls-design-system-bordered .rls-field-color__control {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-design-system-bordered .rls-field-color__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-field-color__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-design-system-bordered .rls-field-color-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-color-radius: var(--rls-sizing-x4);
+  --rlc-picker-color-background: var(--rls-app-color-050);
+}
 .rls-design-system-bordered .rls-field-date {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
   --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
@@ -4682,6 +4887,163 @@
   align-items: center;
   justify-content: center;
 }
+.rls-design-system-bordered .rls-picker-color {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x6);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-color-padding, var(--rls-sizing-x6));
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-color-radius, 0rem);
+  background: var(--rlc-picker-color-background, transparent);
+}
+.rls-design-system-bordered .rls-picker-color__preview {
+  display: flex;
+  width: 100%;
+  height: 130rem;
+  justify-content: center;
+  padding: var(--rls-sizing-x6);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  border: var(--rls-app-border-1-300);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-picker-color__canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rls-sizing-x6);
+  cursor: crosshair;
+  box-sizing: border-box;
+}
+.rls-design-system-bordered .rls-picker-color__indicator {
+  position: absolute;
+  width: var(--rls-sizing-x14);
+  height: var(--rls-sizing-x14);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.rls-design-system-bordered .rls-picker-color__indicator__circle {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rls-border-2) solid var(--rls-app-color-050);
+  box-sizing: border-box;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.3),
+    0 0 var(--rls-sizing-x4) rgba(0, 0, 0, 0.2);
+}
+.rls-design-system-bordered .rls-picker-color__controls {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x6) var(--rls-sizing-x10);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x6);
+  border: var(--rls-app-border-1-300);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-picker-color__slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--rls-sizing-x12);
+}
+.rls-design-system-bordered .rls-picker-color__slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--rls-sizing-x10);
+  cursor: pointer;
+  border-radius: var(--rls-sizing-x5);
+}
+.rls-design-system-bordered .rls-picker-color__slider__track--alpha {
+  background-size: 8rem 8rem;
+  background-position:
+    0 0,
+    4rem 4rem;
+  background-image:
+    linear-gradient(45deg, var(--rls-app-color-300) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--rls-app-color-300) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--rls-app-color-300) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--rls-app-color-300) 75%);
+}
+.rls-design-system-bordered .rls-picker-color__slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
+  transform: translate(-50%, -50%);
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rls-border-2) solid var(--rls-app-color-050);
+  box-sizing: border-box;
+  box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-design-system-bordered .rls-picker-color__footer {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x4);
+}
+.rls-design-system-bordered .rls-picker-color__hex {
+  --pvt-font-size: var(--rlc-field-color-font-size, var(--rls-input-font-size));
+  --pvt-font-weight: var(
+    --rlc-field-color-font-weight,
+    var(--rls-font-weight-medium)
+  );
+  display: flex;
+  height: var(--rls-sizing-x20);
+  align-items: center;
+  justify-content: center;
+  column-gap: var(--rls-sizing-x4);
+  padding: 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--rls-app-border-1-300);
+  background: var(--rls-app-color-200);
+}
+.rls-design-system-bordered .rls-picker-color__hex__swatch {
+  flex: 0 0 auto;
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
+  border-radius: var(--rls-sizing-x2);
+  border: var(--rls-app-border-1-300);
+}
+.rls-design-system-bordered .rls-picker-color__hex__prefix {
+  font-size: var(--pvt-font-size);
+  font-weight: var(--pvt-font-weight);
+  color: var(--rls-app-color-600);
+}
+.rls-design-system-bordered .rls-picker-color__hex__input {
+  width: 35rem;
+  height: 100%;
+  padding: 0rem;
+  text-align: center;
+  text-transform: uppercase;
+  background: rgba(0, 0, 0, 0);
+  border: none;
+  outline: none;
+  color: var(--rls-app-color-900);
+  font-size: var(--pvt-font-size);
+  font-weight: var(--pvt-font-weight);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-design-system-bordered .rls-picker-color__hex__input::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-design-system-bordered .rls-picker-color__actions {
+  --rlc-button-width: 100%;
+  --rlc-button-content-padding: 0rem var(--rls-sizing-x2);
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding-top: var(--rls-sizing-x4);
+  overflow: hidden;
+  box-sizing: border-box;
+}
 .rls-design-system-bordered .rls-picker-date {
   position: relative;
   display: flex;