@esri/calcite-components 1.4.0-next.0 → 1.4.0-next.10

package/dist/collection/components/color-picker/color-picker.css

@@ -110,67 +110,48 @@
   opacity: 1;
 }
 
+:host([scale=s]) {
+  --calcite-color-picker-spacing: 8px;
+}
 :host([scale=s]) .container {
   inline-size: 160px;
 }
 :host([scale=s]) .saved-colors {
-  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
-}
-:host([scale=s]) .channels {
-  flex-direction: column;
-}
-:host([scale=s]) .channel {
-  inline-size: 100%;
-  margin-block-end: 4px;
-}
-:host([scale=s]) .channel:last-child {
-  margin-block-end: 0;
+  gap: 0.25rem;
+  grid-template-columns: repeat(auto-fill, 20px);
 }
 
+:host([scale=m]) {
+  --calcite-color-picker-spacing: 12px;
+}
 :host([scale=m]) .container {
   inline-size: 272px;
 }
 
-:host([scale=l]) .header {
-  padding-block-end: 0px;
-}
-
 :host([scale=l]) {
+  --calcite-color-picker-spacing: 16px;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=l]) .container {
   inline-size: 464px;
 }
-:host([scale=l]) .color-field-and-slider {
-  margin-block-end: -20px;
-}
-:host([scale=l]) .section {
-  padding-block: 0 16px;
-  padding-inline: 16px;
-}
 :host([scale=l]) .section:first-of-type {
-  padding-block-start: 16px;
+  padding-block-start: var(--calcite-color-picker-spacing);
 }
 :host([scale=l]) .saved-colors {
-  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
-  grid-gap: 12px;
-  padding-block-start: 16px;
+  grid-template-columns: repeat(auto-fill, 32px);
 }
 :host([scale=l]) .control-section {
   flex-wrap: nowrap;
   align-items: baseline;
-}
-:host([scale=l]) .control-section > :nth-child(2) {
-  margin-inline-start: 12px;
+  flex-wrap: wrap;
 }
 :host([scale=l]) .color-hex-options {
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
   justify-content: space-around;
-  min-block-size: 98px;
-  inline-size: 160px;
 }
 :host([scale=l]) .color-mode-container {
   flex-shrink: 3;
@@ -182,15 +163,18 @@
   border: 1px solid var(--calcite-ui-border-1);
 }
 
-.color-field-and-slider-wrap {
+.control-and-scope {
   position: relative;
+  display: flex;
+  cursor: pointer;
+  touch-action: none;
 }
 
 .scope {
   position: absolute;
+  z-index: 1;
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;
-  outline-offset: 14px;
 }
 .scope:focus {
   outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));
@@ -208,14 +192,11 @@
   outline-offset: 16px;
 }
 
-.color-field-and-slider {
-  margin-block-end: -16px;
-  touch-action: none;
-}
-.color-field-and-slider--interactive {
-  cursor: pointer;
+.hex-and-channels-group {
+  inline-size: 100%;
 }
 
+.hex-and-channels-group,
 .control-section {
   display: flex;
   flex-direction: row;
@@ -223,11 +204,24 @@
 }
 
 .section {
-  padding-block: 0 12px;
-  padding-inline: 12px;
+  padding-block: 0 var(--calcite-color-picker-spacing);
+  padding-inline: var(--calcite-color-picker-spacing);
 }
 .section:first-of-type {
-  padding-block-start: 12px;
+  padding-block-start: var(--calcite-color-picker-spacing);
+}
+
+.sliders {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-inline-start: var(--calcite-color-picker-spacing);
+}
+
+.preview-and-sliders {
+  display: flex;
+  align-items: center;
+  padding: var(--calcite-color-picker-spacing);
 }
 
 .color-hex-options,
@@ -239,30 +233,43 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-block-end: 0.25rem;
   color: var(--calcite-ui-text-1);
 }
 
-.header--hex,
 .color-mode-container {
-  padding-block-start: 12px;
+  padding-block-start: var(--calcite-color-picker-spacing);
 }
 
 .channels {
   display: flex;
-  justify-content: space-between;
+  row-gap: 0.125rem;
 }
 
-.channel {
-  inline-size: 31%;
+.channel[data-channel-index="3"] {
+  inline-size: 159px;
+}
+
+:host([scale=s]) .channels {
+  flex-wrap: wrap;
+}
+:host([scale=s]) .channel {
+  flex-basis: 30%;
+  flex-grow: 1;
+}
+:host([scale=s]) .channel[data-channel-index="3"] {
+  inline-size: unset;
+  margin-inline-start: unset;
+}
+
+:host([scale=l]) .channel[data-channel-index="3"] {
+  inline-size: 131px;
 }
 
 .saved-colors {
-  padding-block-start: 12px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-  grid-gap: 8px;
-  inline-size: 100%;
+  gap: 0.5rem;
+  padding-block-start: var(--calcite-color-picker-spacing);
+  grid-template-columns: repeat(auto-fill, 24px);
 }
 
 .saved-colors-buttons {