AG-10044 - Fix formatting issues

packages/ag-charts-website/src/design-system/elements/_form-elements.scss

@@ -67,8 +67,12 @@ input[type='number'] {
  border: 1px solid var(--color-input-border);
  background-color: var(--color-bg-primary);
  outline: none;
- box-shadow: 0 0 0 $spacing-size-1 transparent, var(--shadow-xs);
- transition: border-color $transition-default-timing, box-shadow $transition-default-timing;
+ box-shadow:
+ 0 0 0 $spacing-size-1 transparent,
+ var(--shadow-xs);
+ transition:
+ border-color $transition-default-timing,
+ box-shadow $transition-default-timing;
 
  &::placeholder {
  color: var(--color-fg-placeholder);
@@ -85,7 +89,9 @@ input[type='number'] {
  &:focus:not(:disabled):not([readonly]),
  &:focus-visible:not(:disabled):not([readonly]),
  &.focus {
- box-shadow: 0 0 0 $spacing-size-1 var(--color-input-shadow-focus), var(--shadow-xs);
+ box-shadow:
+ 0 0 0 $spacing-size-1 var(--color-input-shadow-focus),
+ var(--shadow-xs);
  }
 
  &:disabled,
@@ -137,7 +143,9 @@ input[type='checkbox']:not(.switch)#{$selector-exclude-grid} {
 
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-primary);
- transition: background-color $transition-default-timing, border-color $transition-default-timing,
+ transition:
+ background-color $transition-default-timing,
+ border-color $transition-default-timing,
  box-shadow $transition-default-timing;
 
  &:hover:not(:disabled):not([readonly]),
@@ -178,7 +186,9 @@ input[type='checkbox'].switch {
  );
  background-repeat: no-repeat;
  background-size: $height $height;
- transition: background-position $transition-default-timing, background-color $transition-default-timing,
+ transition:
+ background-position $transition-default-timing,
+ background-color $transition-default-timing,
  box-shadow $transition-default-timing;
 
  &:checked {
@@ -190,7 +200,9 @@ input[type='checkbox'].switch {
 input[type='radio']#{$selector-exclude-grid} {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-primary);
- transition: background-color $transition-default-timing, border-color $transition-default-timing,
+ transition:
+ background-color $transition-default-timing,
+ border-color $transition-default-timing,
  box-shadow $transition-default-timing;
 
  &:hover:not(:disabled):not([readonly]),
@@ -223,7 +235,9 @@ select#{$selector-exclude-grid} {
  background-position: center right 4px;
  border: 1px solid var(--color-input-border);
  outline: none;
- transition: border-color $transition-default-timing, box-shadow $transition-default-timing;
+ transition:
+ border-color $transition-default-timing,
+ box-shadow $transition-default-timing;
  cursor: pointer;
 
  &:hover,
@@ -281,7 +295,9 @@ input[type='range']#{$selector-exclude-grid} {
  outline: none;
  border: 2px solid transparent;
  cursor: pointer;
- transition: border-color $transition-default-timing, box-shadow $transition-default-timing;
+ transition:
+ border-color $transition-default-timing,
+ box-shadow $transition-default-timing;
 
  &:focus-visible:not(:disabled):not([readonly]),
  &.focus {

packages/ag-charts-website/src/design-system/modules/ChevronButtonRenderer.module.scss

@@ -22,7 +22,9 @@
  text-align: center;
  font-size: 2em;
  margin-right: $spacing-size-2;
- transition: background-color $transition-default-timing, transform 0.33s ease-in-out;
+ transition:
+ background-color $transition-default-timing,
+ transform 0.33s ease-in-out;
 
  &:hover {
  background: var(--color-util-brand-700);

packages/ag-charts-website/src/design-system/modules/CodeViewer.module.scss

@@ -18,7 +18,9 @@
  display: flex;
  min-width: 100%;
  height: 100%;
- transition: transform 0.33s ease-in-out, min-width 0.33s ease-in-out;
+ transition:
+ transform 0.33s ease-in-out,
+ min-width 0.33s ease-in-out;
 
  @container (width < 640px) {
  height: calc(100% - var(--mobile-header-height));
@@ -107,7 +109,9 @@
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius-sm);
  border-top-left-radius: var(--radius-sm);
- transition: color $transition-default-timing, background-color $transition-default-timing,
+ transition:
+ color $transition-default-timing,
+ background-color $transition-default-timing,
  border-color $transition-default-timing;
 
  &:hover {

packages/ag-charts-website/src/design-system/modules/Gif.module.scss

@@ -44,5 +44,7 @@
  background-image: url('../../images/gif-play-icon.svg');
  color: #fff;
  transform: translate(-50%, -50%) scale(1);
- transition: transform 0.25s, background-color 0.25s;
+ transition:
+ transform 0.25s,
+ background-color 0.25s;
 }

packages/ag-charts-website/src/design-system/modules/LearningVideos.module.scss

@@ -28,7 +28,9 @@
  border-radius: var(--radius-md);
  padding: $spacing-size-4;
  margin: $spacing-size-4;
- transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+ transition:
+ color 0.2s ease-in-out,
+ border-color 0.2s ease-in-out;
  width: calc(100% - 2 * $spacing-size-4);
  box-sizing: border-box;
  color: var(--color-text-primary);

packages/ag-charts-website/src/design-system/modules/Licenses.module.scss

@@ -1,4 +1,4 @@
-@use "../../design-system/" as *;
+@use '../../design-system/' as *;
 
 .license {
  width: 100%;

packages/ag-charts-website/src/design-system/modules/Menu.module.scss

@@ -17,7 +17,9 @@
  color: var(--color-logo-orange);
  border-radius: 24px;
  border: 1px solid var(--color-logo-orange);
- transition: background-color $transition-default-timing, color $transition-default-timing;
+ transition:
+ background-color $transition-default-timing,
+ color $transition-default-timing;
  -webkit-font-smoothing: auto;
 
  &:hover,
@@ -98,7 +100,9 @@ button:not([class^='ag-']).sectionHeader {
  font-weight: var(--text-semibold);
  border: 2px solid transparent;
  outline: none;
- transition: color $transition-default-timing, border-color $transition-default-timing;
+ transition:
+ color $transition-default-timing,
+ border-color $transition-default-timing;
  border-radius: var(--radius-sm);
 
  &:focus-visible {
@@ -132,7 +136,9 @@ button:not([class^='ag-']).sectionHeader {
  fill: var(--color-fg-primary);
  }
 
- transition: transform 0.33s ease-in-out, fill $transition-default-timing;
+ transition:
+ transform 0.33s ease-in-out,
+ fill $transition-default-timing;
 
  &.active {
  transform: rotate(90deg);
@@ -195,7 +201,10 @@ button:not([class^='ag-']).sectionHeader {
  color: var(--color-fg-secondary);
  border-left: 1px solid transparent;
  outline: none;
- transition: color 0.33s ease-in-out, border-color 0.33s ease-in-out, background-color 0.33s ease-in-out;
+ transition:
+ color 0.33s ease-in-out,
+ border-color 0.33s ease-in-out,
+ background-color 0.33s ease-in-out;
 
  #{$selector-darkmode} & {
  --active-color: var(--color-brand-300);

packages/ag-charts-website/src/design-system/modules/SideMenu.module.scss

@@ -116,7 +116,10 @@
  // border-left: 1px solid var(--nav-line-color);
  opacity: 0;
  z-index: -1;
- transition: color 0.33s ease-in-out, border-color 0.33s ease-in-out, background-color 0.33s ease-in-out;
+ transition:
+ color 0.33s ease-in-out,
+ border-color 0.33s ease-in-out,
+ background-color 0.33s ease-in-out;
  }
 
  &:hover::before {

packages/ag-charts-website/src/design-system/modules/SideNavigation.module.scss

@@ -116,7 +116,10 @@
  // border-left: 1px solid var(--nav-line-color);
  opacity: 0;
  z-index: -1;
- transition: color 0.33s ease-in-out, border-color 0.33s ease-in-out, background-color 0.33s ease-in-out;
+ transition:
+ color 0.33s ease-in-out,
+ border-color 0.33s ease-in-out,
+ background-color 0.33s ease-in-out;
  }
 
  &:hover::before {

packages/ag-charts-website/src/design-system/modules/ToggleAutomatedExampleButton.module.scss

@@ -13,8 +13,11 @@
  width: $replay-width;
  padding: 0.25em 0.5em 0.4em 0.5em !important;
  text-align: left;
- transition: background-color $transition-default-timing, border $transition-default-timing,
- box-shadow $transition-default-timing, width $transition-default-timing !important;
+ transition:
+ background-color $transition-default-timing,
+ border $transition-default-timing,
+ box-shadow $transition-default-timing,
+ width $transition-default-timing !important;
 
  @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
  display: none;

packages/ag-charts-website/src/design-system/modules/TopBar.module.scss

@@ -46,7 +46,9 @@
  background-color: var(--color-link);
  opacity: 0;
  transform: scaleX(0);
- transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
+ transition:
+ transform 0.33s ease-in-out,
+ opacity 0.33s ease-in-out;
  }
 
  &:hover::before {

packages/ag-charts-website/src/design-system/style-guide/Alerts.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Alert } from '@components/alert/Alert';
+import React from 'react';
 import type { FunctionComponent } from 'react';
 
 export const Alerts: FunctionComponent = () => {

packages/ag-charts-website/src/design-system/style-guide/StyleGuide.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import classnames from 'classnames';
+import React from 'react';
 import type { FunctionComponent } from 'react';
 
 import { Alerts } from './Alerts';

packages/ag-charts-website/src/design-system/style-guide/getCssVarValue.ts

@@ -5,7 +5,7 @@ export const getCssVarValue = (cssVar) => {
  return null;
  } else {
  const bodyStyles = window.getComputedStyle(document.body);
- 
+
  return bodyStyles.getPropertyValue(cssVar);
  }
 };