feat(themes): include additional step variables for light and dark theme

[brandyscarney]

Issue number: N/A

---

What is the current behavior?

The step colors are currently defined in the dark theme as:

:root {
  --ion-color-step-50: #0d0d0d;
  --ion-color-step-100: #1a1a1a;
  --ion-color-step-150: #262626;
  /* additional variables */
  --ion-color-step-850: #d9d9d9;
  --ion-color-step-900: #e6e6e6;
  --ion-color-step-950: #f2f2f2;
}

The step colors are not defined for the default theme, instead it uses these fallbacks.

What is the new behavior?

Updates the dark theme to include the new modern color tokens --ion-background-color-step-* and --ion-text-color-step-*:

:root {
  --ion-background-color-step-50: #0d0d0d;
  --ion-background-color-step-100: #1a1a1a;
  --ion-background-color-step-150: #262626;
  /* additional variables */
  --ion-background-color-step-850: #d9d9d9;
  --ion-background-color-step-900: #e6e6e6;
  --ion-background-color-step-950: #f2f2f2;

  --ion-text-color-step-50: #f2f2f2;
  --ion-text-color-step-100: #e6e6e6;
  --ion-text-color-step-150: #d9d9d9;
  /* additional variables */
  --ion-text-color-step-850: #262626;
  --ion-text-color-step-900: #1a1a1a;
  --ion-text-color-step-950: #0d0d0d;
}

Updates the light theme to set these variables instead of using the fallback:

:root {
  --ion-background-color-step-50: #{mix($text-color-value, $background-color-value, 5%)};
  --ion-background-color-step-100: #{mix($text-color-value, $background-color-value, 10%)};
  --ion-background-color-step-150: #{mix($text-color-value, $background-color-value, 15%)};
  /* additional variables */
  --ion-background-color-step-850: #{mix($text-color-value, $background-color-value, 85%)};
  --ion-background-color-step-900: #{mix($text-color-value, $background-color-value, 90%)};
  --ion-background-color-step-950: #{mix($text-color-value, $background-color-value, 95%)};

  --ion-text-color-step-50: #{mix($background-color-value, $text-color-value, 5%)};
  --ion-text-color-step-100: #{mix($background-color-value, $text-color-value, 10%)};
  --ion-text-color-step-150: #{mix($background-color-value, $text-color-value, 15%)};
  /* additional variables */
  --ion-text-color-step-850: #{mix($background-color-value, $text-color-value, 85%)};
  --ion-text-color-step-900: #{mix($background-color-value, $text-color-value, 90%)};
  --ion-text-color-step-950: #{mix($background-color-value, $text-color-value, 95%)};
}

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other Information

I removed the theme files from the stylelint for the following reasons:

• The custom-property-empty-line-before wants to remove all empty lines between custom properties, but our theme files have used empty lines to break the css variables into groups
• The theme files are only setting custom properties, they do not require checks for the CSS property order or mixins such as padding() and margin() which is the main purpose of stylelint
• I attempted to find a way to allow empty lines while disallowing them before custom properties when after comments (the original purpose of custom-property-empty-line-before rule) but the custom-property-empty-line-before rule does not allow after-custom-property in the ignore block and I could not find another way to combine them to make this work