EP-6633 Restore accidentally removed CSS variables

.changeset/real-moose-lick.md

@@ -0,0 +1,16 @@
+---
+"@igloo-ui/area-chart": patch
+"@igloo-ui/breadcrumb": patch
+"@igloo-ui/button": patch
+"@igloo-ui/checkbox": patch
+"@igloo-ui/combobox": patch
+"@igloo-ui/datepicker": patch
+"@igloo-ui/disclosure": patch
+"@igloo-ui/dropdown": patch
+"@igloo-ui/helper-text": patch
+"@igloo-ui/select": patch
+"@igloo-ui/text-editor": patch
+"@igloo-ui/toaster": patch
+---
+
+Restore CSS variables accidentally removed during cleanup

packages/AreaChart/src/chart-tooltip.scss

@@ -28,13 +28,10 @@
         --ids-chart-tooltip-score-text-font-weight: var(--hop-body-sm-font-weight);
 
         /* Circle */
+        --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2));
         --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category1);
         --ids-chart-tooltip-circle-margin-right: var(--hop-space-inline-sm);
         --ids-chart-tooltip-circle-size: 0.75rem;
-
-        .ids-tooltip-score__circle {
-            --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2));
-        }
     }
 
     @keyframes fade-in {

packages/Breadcrumb/src/breadcrumb.scss

@@ -20,6 +20,7 @@
         --ids-breadcrumb-link-color: var(--hop-neutral-text-weak);
         --ids-breadcrumb-link-color-hover:  var(--hop-neutral-text); /* Will be var(--hop-neutral-text-weak-hover) */
         --ids-breadcrumb-link-border: none;
+        --ids-breadcrumb-link-border-color-hover: #{tokens.$grey-600};
         --ids-breadcrumb-link-text-decoration-hover: underline;
         --ids-breadcrumb-link-focus: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
         --ids-breadcrumb-link-border-radius-focus: var(--hop-shape-rounded-md);

packages/Button/src/button.scss

@@ -52,9 +52,9 @@
         /* Premium */
         --ids-btn-text-premium: var(--hop-upsell-text);
         --ids-btn-text-premium-disabled: var(--hop-neutral-text-disabled);
+        --ids-btn-text-premium-active: var(--hop-upsell-text-selected);
         --ids-btn-text-premium-hover: var(--hop-upsell-text-hover);
         --ids-btn-text-premium-pressed: var(--hop-upsell-text-press);
-        --ids-btn-text-premium-active: var(--hop-upsell-text-selected);
         --ids-btn-border-premium-active: var(--hop-upsell-border-selected);
         --ids-btn-background-premium: var(--hop-upsell-surface);
         --ids-btn-background-premium-hover: var(--hop-upsell-surface-hover);
@@ -64,6 +64,7 @@
 
         /* Danger */
         --ids-btn-text-danger: var(--hop-danger-text-strong);
+        --ids-btn-text-danger-disabled: #{tokens.$samoyed};
         --ids-btn-text-danger-active: var(--hop-danger-text-selected);
         --ids-btn-border-danger-active: var(--hop-danger-border-selected);
         --ids-btn-background-danger: var(--hop-danger-surface-strong);

packages/Checkbox/src/checkbox.scss

@@ -7,11 +7,11 @@
 @layer igloo {
     :root {
         --ids-checkbox-font-family: #{tokens.$primary-font-family};
-        --ids-checkbox-font-size: var(--hop-body-sm-font-size);
         --ids-checkbox-font-weight: var(--hop-body-sm-font-weight);
-        --ids-checkbox-line-height: var(--hop-body-sm-line-height);
+        --ids-checkbox-font-size: var(--hop-body-sm-font-size);
         --ids-checkbox-focus: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.2188rem var(--hop-primary-border-focus);
         --ids-checkbox-size: 1rem;
+        --ids-checkbox-line-height: var(--hop-body-sm-line-height);
         --ids-checkbox-radius: var(--hop-shape-rounded-sm);
         --ids-checkbox-check: var(--hop-neutral-icon-selected);
         --ids-checkbox-margin: var(--hop-space-inline-sm);
@@ -42,6 +42,8 @@
 
         /* Completion */
         --ids-checkbox-completion-size: 1.5rem;
+        --ids-checkbox-completion-radius: 50%;
+        --ids-checkbox-one-px: 0.1rem;
         --ids-checkbox-completion-border-disabled: var(--hop-neutral-border-disabled);
         --ids-checkbox-completion-check-color-disabled: var(--hop-neutral-icon-disabled);
         --ids-checkbox-completion-check-color-hover: transparent;

packages/Combobox/src/ComboboxInput.tsx

@@ -64,8 +64,6 @@ const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
     ...rest
 }: ComboboxInputProps) => {
     const chevronClass = "ids-combobox-input__chevron";
-    const chevronUpIcon = <AngleUpIcon className={chevronClass} size="sm" />
-    const chevronDownIcon = <AngleDownIcon className={chevronClass} size="sm" />
 
     const handleChange = ({
         target
@@ -142,9 +140,9 @@ const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
               clearBtn
           ))}
                 {isOpen ? (
-                    chevronUpIcon
+                    <AngleUpIcon className={chevronClass} size="sm" />
                 ) : (
-                    chevronDownIcon
+                    <AngleDownIcon className={chevronClass} size="sm" />
                 )}
             </div>
         </div>

packages/Datepicker/src/datepicker.scss

@@ -9,6 +9,8 @@
         // Calculation of the width of the datepicker to obtain a square cell
       --ids-datepicker-cell-size: 2.5rem;
       --ids-datepicker-cell-number: 7;
+      --ids-datepicker-cell-border: .2rem;
+      --ids-datepicker-cell-empty-border: calc(6 * .05rem);
 
       /* Default */
       --ids-datepicker-font-family: var(--hop-body-sm-font-family);

packages/Disclosure/src/disclosure.scss

@@ -39,6 +39,8 @@
         /* Content */
         --ids-disclosure-content-border: 0.0625rem solid var(--hop-neutral-border-weak);
 
+        /* === Low Contrast === */
+
         /* Header/Button */
         --ids-disclosure-low-contrast-header-padding: 0;
         --ids-disclosure-low-contrast-header-icon-margin: 0 var(--hop-space-inline-xs) 0 0;

packages/Dropdown/src/dropdown.scss

@@ -14,12 +14,16 @@
         --ids-dropdown-background: var(--hop-neutral-surface);
         --ids-dropdown-border: 0.0625rem solid var(--hop-neutral-border-weak);
         --ids-dropdown-border-radius: var(--hop-shape-rounded-md);
+        --ids-dropdown-zindex: #{tokens.$z-index-100};
         --ids-dropdown-box-shadow: var(--hop-elevation-lifted);
         --ids-dropdown-padding: 0;
         --ids-dropdown-padding-small: var(--hop-space-inset-md);
         --ids-dropdown-padding-medium: var(--hop-space-inset-lg);
         --ids-dropdown-padding-large: var(--hop-space-inset-xl);
 
+        /* Click Handler */
+        --ids-dropdown-zindex-click-handler: #{tokens.$z-index-90};
+
         /* Footer */
         --ids-dropdown-footer-background: var(--hop-neutral-surface);
         --ids-dropdown-footer-background-hover: var(--hop-neutral-surface-hover);

packages/HelperText/src/helper-text.scss

@@ -6,6 +6,7 @@
 
 @layer igloo {
     :root {
+        /* Default */
         --ids-helper-font-family: var(--hop-body-xs-font-family);
         --ids-helper-font-size: var(--hop-body-xs-font-size);
         --ids-helper-font-weight: var(--hop-body-xs-font-weight);

packages/Select/src/select-input.scss

@@ -48,7 +48,6 @@
         flex: 0 0 auto;
         margin-left: auto;
         padding: var(--ids-select-input-actions-padding);
-
     }
 
     .ids-select__input-clear {

packages/Select/src/select-option.scss

@@ -7,6 +7,9 @@
         /* Focused */
         --ids-select-option-background-focused: var(--hop-neutral-surface-hover);
 
+        /* Selected */
+        --ids-select-option-background-selected: none;
+
         /* Disabled */
         --ids-select-option-color-disabled: var(--hop-neutral-text-disabled);
 

packages/Select/src/select-value.scss

@@ -8,6 +8,9 @@
         /* Compact **/
         --ids-select-value-padding-compact: calc(var(--hop-space-stack-sm) - var(--ids-select-border-width) * 2) var(--hop-space-inline-md);
 
+        /* Disabled */
+        --ids-select-value-color-disabled: #{tokens.$grey-500};
+
         /* Placeholder */
         --ids-select-value-color-placeholder: var(--hop-neutral-text-weakest);
 

packages/Select/src/select.scss

@@ -16,6 +16,7 @@
         --ids-select-background: var(--hop-neutral-surface);
         --ids-select-border-color: var(--hop-neutral-border);
         --ids-select-border-radius: var(--hop-shape-rounded-md);
+        --ids-select-number-of-option-to-display: 4;
         --ids-select-border-width: 0.0625rem;
         --ids-select-height: 2.5rem;
 

packages/TextEditor/src/plugins/floating-link-editor.scss

@@ -11,6 +11,8 @@
     --ids-link-editor-border-color: var(--hop-neutral-border-weak);
     --ids-link-editor-border-radius: var(--hop-shape-rounded-md);
     --ids-link-editor-line-height: var(--hop-body-md-line-height);
+    --ids-link-editor-z-index: 999;
+    --ids-link-editor-width: 100%;
     --ids-link-editor-text: var(--hop-neutral-text);
     --ids-link-editor-shadow: var(--hop-elevation-lifted);
     --ids-link-editor-button-margin: var(--hop-space-inline-sm);

packages/Toaster/src/toaster.scss

@@ -6,6 +6,7 @@
 
 @layer igloo {
     :root {
+        /* Default */
         --ids-toaster-font-family: var(--hop-body-md-medium-font-family);
         --ids-toaster-font-size: var(--hop-body-md-medium-font-size);
         --ids-toaster-font-weight: var(--hop-body-md-medium-font-weight);