lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/colorPickerCustom/color-picker-custom.slds.css

@@ -1,227 +1,3 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
-
-:host([data-render-mode="shadow"]) [part~='input-container'] {
-  display: flex;
-  align-items: center;
-  position: relative;
-  min-height: var(--sds-c-inputtext-sizing-height);
-  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
-  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
-  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
-  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
-  border-style: solid;
-  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
-  border-radius: var(--sds-c-inputtext-radius-border);
-  box-shadow: var(--sds-c-inputtext-shadow);
-}
-
-/* The Input element (in markup) */
-
-:host([data-render-mode="shadow"]) [part~='input'] {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  font-size: var(--sds-c-inputtext-font-size);
-  color: var(--sds-c-inputtext-text-color);
-  line-height: 1;
-  border: none;
-  background: transparent;
-}
-
-/* Placeholder Text */
-
-:host([data-render-mode="shadow"]) [part~='input']::placeholder {
-  color: var(--sds-c-inputtext-text-color-placeholder);
-  font-style: var(--sds-c-inputtext-font-style-placeholder);
-}
-
-/* Focus State */
-
-:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
-  --sds-c-inputtext-color-border: var(
-    --sds-c-inputtext-color-border-focus,
-    var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
-}
-
-:host([data-render-mode="shadow"]) [part~='input']:focus {
-  outline: none;
-}
-
-/* Invalid state */
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
-}
-
-/* Valid State */
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
-  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
-  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
-}
-
-:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
-  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
-}
-
-/* Readonly State */
-
-:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
-  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
-  --sds-c-inputtext-spacing-inline-start: var(
-    --sds-c-inputtext-spacing-inline-start-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-  --sds-c-inputtext-spacing-inline-end: var(
-    --sds-c-inputtext-spacing-inline-end-readonly,
-    var(--sds-c-inputtext-spacing-inline-readonly)
-  );
-}
-
-/* Disabled State */
-
-:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
-  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
-  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
-}
-
-@supports (--styling-hooks: '') {
-  /**
-   * Input Text
-   */
-  :host([data-render-mode="shadow"]) [part~='input-text'] {
-    /* Host reassignments to composed slds-icon */
-    --slds-c-icon-color-foreground: var(
-      --slds-c-inputtext-icon-color-foreground,
-      var(--sds-g-color-neutral-base-50, #747474)
-    );
-    --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
-
-    --sds-c-inputtext-spacing-inline-start: var(
-      --slds-c-inputtext-spacing-inline-start,
-      var(--sds-g-spacing-3, 0.75rem)
-    );
-    --sds-c-inputtext-spacing-inline-end: var(--slds-c-inputtext-spacing-inline-end, var(--sds-g-spacing-4, 1rem));
-    --sds-c-inputtext-sizing-height: var(--slds-c-inputtext-sizing-height, 1.875rem);
-    --sds-c-inputtext-color-background: var(--slds-c-inputtext-color-background);
-    --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
-    --sds-c-inputtext-font-size: var(--slds-c-inputtext-font-size, var(--sds-g-font-scale-neg-2, 0.8125rem));
-    --sds-c-inputtext-text-color-placeholder: var(
-      --slds-c-inputtext-text-color-placeholder,
-      var(--sds-g-color-neutral-base-50, #747474)
-    );
-    --sds-c-inputtext-color-border: var(--slds-c-inputtext-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
-    --sds-c-inputtext-radius-border: var(--slds-c-inputtext-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    row-gap: 0.125rem;
-  }
-
-  /**
-   * Read Only State
-   */
-  :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
-    --sds-c-inputtext-spacing-inline-start-readonly: 0;
-    --slds-c-inputtext-color-border: transparent;
-    --slds-c-inputtext-color-background: transparent;
-  }
-
-  /**
-   * Invalid State
-   */
-  :host([data-render-mode="shadow"][aria-invalid]) [part~='input-text'] {
-    --sds-c-inputtext-color-border-invalid: var(--sds-g-color-error-base-50, #ea001e);
-    --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-2, 2px);
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  /**
-   * Disabled State
-   *
-   * Both parts form the visible form control.
-   */
-  :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
-    cursor: not-allowed;
-  }
-
-  /**
-   * Label
-   */
-  :host([data-render-mode="shadow"]) [part='label'] {
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-    color: var(--slds-c-inputtext-label-color, var(--sds-g-color-neutral-base-30, #444444));
-    font-size: var(--slds-c-inputtext-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-
-    /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
-    display: inline-flex;
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    column-gap: 0.125rem;
-  }
-
-  /**
-   * Label's Required Symbol
-   */
-  :host([data-render-mode="shadow"]) [part='label'] [title='required'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  /**
-   * Input Container
-   */
-  :host([data-render-mode="shadow"]) [part='input-container'] {
-    flex: 1 0 100%;
-  }
-
-  /**
-   * Help Text
-   *
-   * Note: not to be confused with lightning-helptext. This is for the text
-   *       that goes below the input.
-   */
-  :host([data-render-mode="shadow"]) [part='help-text'] {
-    font-size: var(--slds-c-inputtext-helptext-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-
-    /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
-    padding-block-start: 0.125rem;
-  }
-
-  /**
-   * Help Text's Invalid State – Part container is unique to SLDS
-   */
-  :host([data-render-mode="shadow"][aria-invalid]) [part='help-text'] {
-    color: var(--sds-g-color-error-base-50, #ea001e);
-  }
-
-  /**
-   * Start
-   *
-   * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
-   * so we don't add spacing to other icons composed in the component, e.g.,
-   * the icon in the inline help text.
-   */
-  :host([data-render-mode="shadow"]) [part~='start'] {
-    --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
-  }
-}
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
@@ -239,52 +15,52 @@
   white-space: nowrap !important;
 }
 
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part='color-picker-custom'] {
-    --slds-c-inputtext-spacing-inlinestart: var(--sds-g-spacing-1, 0.25rem);
-    --slds-c-inputtext-spacing-inlineend: var(--sds-g-spacing-1, 0.25rem);
+:host([data-render-mode="shadow"]) [part='color-picker-custom'] {
+    --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-1);
+    --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-1);
   }
 
-  /* needed to change the size of the hex input */
-  :host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
+/* needed to change the size of the hex input */
+
+:host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
     flex: none;
     width: 4.2rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-m-bottom_small {
-    margin-block-end: var(--sds-g-spacing-3, 0.75rem);
+:host([data-render-mode="shadow"]) .slds-m-bottom_small {
+    margin-block-end: var(--slds-g-spacing-3);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator {
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator {
     transform: translate3d(-0.375rem, 0.375rem, 0);
     cursor: pointer;
     position: absolute;
-    height: var(--sds-g-spacing-3, 0.75rem);
-    width: var(--sds-g-spacing-3, 0.75rem);
-    border: var(--sds-g-sizing-border-2, 2px) solid var(--sds-g-color-neutral-base-100, #ffffff);
+    height: var(--slds-g-spacing-3);
+    width: var(--slds-g-spacing-3);
+    border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1);
     border-radius: 50%;
     box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 16%), inset 0 2px 4px 4px rgba(0, 0, 0, 16%);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
     outline: none;
-    box-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+    box-shadow: 0 0 3px var(--slds-g-color-accent-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
     display: flex;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
     appearance: none;
     cursor: pointer;
     flex: 1;
     margin: 0;
     padding: 0;
-    height: var(--sds-g-spacing-5, 1.5rem);
+    height: var(--slds-g-spacing-5);
     width: 100%;
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-    border-radius: var(--sds-g-spacing-1, 0.25rem);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+    border-radius: var(--slds-g-spacing-1);
     background: linear-gradient(
       to right,
       red,
@@ -362,80 +138,79 @@
     );
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
     appearance: none;
     cursor: pointer;
-    height: calc(var(--sds-g-spacing-5, 1.5rem) - (1px * 2));
+    height: calc(var(--slds-g-spacing-5) - (1px * 2));
     width: 0.375rem;
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-30, #444444);
-    border-radius: var(--sds-g-radius-border-1, 0.125rem);
-    background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
+    border-radius: var(--slds-g-radius-border-1);
+    background: var(--slds-g-color-surface-container-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
     appearance: none;
     box-sizing: border-box; /* Note: FF did not inherit border-box from parent. Initially set to content-box, it needs to set manually here */
     cursor: pointer;
-    height: calc(var(--sds-g-spacing-5, 1.5rem) - (1px * 2));
+    height: calc(var(--slds-g-spacing-5) - (1px * 2));
     width: 0.375rem;
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-30, #444444);
-    border-radius: var(--sds-g-radius-border-1, 0.125rem);
-    background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
+    border-radius: var(--slds-g-radius-border-1);
+    background: var(--slds-g-color-neutral-base-95);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
-    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
+    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
-    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
+    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
-    box-shadow: 0 0 5px var(--sds-g-color-brand-base-50, #0176d3);
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
+    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
     border: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
     outline: none;
   }
 
-  :host([data-render-mode="shadow"]) .slds-swatch {
-    margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
-    height: var(--sds-g-spacing-5, 1.5rem);
-    width: var(--sds-g-spacing-5, 1.5rem);
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-    border-radius: var(--sds-g-spacing-1, 0.25rem);
+:host([data-render-mode="shadow"]) .slds-swatch {
+    margin-inline-start: var(--slds-g-spacing-1);
+    height: var(--slds-g-spacing-5);
+    width: var(--slds-g-spacing-5);
+    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+    border-radius: var(--slds-g-spacing-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
     display: flex;
-    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-block-start: var(--slds-g-spacing-2);
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
+    margin-inline-end: var(--slds-g-spacing-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-has-error {
-    border-color: var(--sds-g-color-error-base-50, #ea001e);
+:host([data-render-mode="shadow"]) .slds-has-error {
+    border-color: var(--slds-g-color-border-error-1);
   }
 
-  :host([data-render-mode="shadow"]) .slds-form-element__help {
-    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
-    padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
-    color: var(--sds-g-color-error-base-50, #ea001e);
-    font-size: var(--sds-g-spacing-3, 0.75rem);
+:host([data-render-mode="shadow"]) .slds-form-element__help {
+    padding-block-start: var(--slds-g-spacing-2);
+    padding-inline-start: var(--slds-g-spacing-1);
+    color: var(--slds-g-color-error-1);
+    font-size: var(--slds-g-spacing-3);
   }
 
-  :host([data-render-mode="shadow"]) abbr[title] {
+:host([data-render-mode="shadow"]) abbr[title] {
     text-decoration: none;
   }
-}

package/src/lightning/colorPickerCustom/colorPickerCustom.css

@@ -1,2 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './color-picker-custom.slds.css'; */
+@import './colorPickerCustom.lbc.native.css';

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -9,7 +9,8 @@ import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
 import formFactorPropertyName from '@salesforce/client/formFactor';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
 import {
@@ -36,7 +37,7 @@ const i18n = {
 
 const CANVAS = { x: 198, y: 80 };
 
-export default class LightningColorPickerCustom extends LightningElement {
+export default class LightningColorPickerCustom extends LightningShadowBaseClass {
     @track _hueValue = null;
     @track
     _rgb = {

package/src/lightning/colorPickerCustom/colorPickerCustom.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './input-text.slds.css';
+@import './color-picker-custom.slds.css';