@ethlete/components 1.0.0-next.78 → 1.0.0-next.80

package/design/sdk/components/empty-state/empty-state.ts

@@ -0,0 +1,57 @@
+import { emptyState, emptyStateStyles } from '@ethlete/components/design/empty-state';
+import { definePart, drawing } from '@design-system';
+import frame from './empty-state.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  form: 'default' | 'without-action' | 'errored' | 'heading-only';
+  action?: Interaction;
+};
+
+const mark = (interaction?: Interaction) =>
+  [`data-et-control="action" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const COPY = {
+  default: {
+    heading: 'No results',
+    description: 'Try a different search term or clear your filters.',
+    action: 'Clear filters',
+  },
+  'without-action': { heading: 'No results', description: 'Try a different search term or clear your filters.' },
+  errored: {
+    icon: 'triangle',
+    heading: 'Something went wrong',
+    description: 'We could not load this data. Please try again.',
+    action: 'Try again',
+  },
+  'heading-only': { icon: false, heading: 'Nothing here yet' },
+} as const;
+
+const render = ({ form, action }: Props) => emptyState({ ...COPY[form], actionAttributes: mark(action) });
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: { form: 'default' },
+    'without-action': { form: 'without-action' },
+    errored: { form: 'errored' },
+    'heading-only': { form: 'heading-only' },
+    'action-hover': { form: 'default', action: 'hover' },
+    'action-active': { form: 'default', action: 'active' },
+    'action-focus-visible': { form: 'default', action: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    action: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  frame: (body) => `<div class="empty-state-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      styles: [emptyStateStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/floating-action/floating-action.css

@@ -0,0 +1,51 @@
+.fa-frame {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  block-size: 400px;
+  transform: translate(0);
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .fa-page {
+    padding: 2.4rem;
+  }
+
+  .et-floating-action {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .fa-heading {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  .fa-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .fa-row {
+    padding: 1.2rem;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--et-surface-color-solid) 8%, transparent);
+    list-style: none;
+  }
+}
+
+@layer components {
+  .et-floating-action .et-floating-action-trigger:where([data-floating-action-state='floating']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
+}

package/design/sdk/components/floating-action/floating-action.ts

@@ -0,0 +1,63 @@
+import { floatingAction, floatingActionStyles } from '@ethlete/components/design/floating-action';
+import { definePart, drawing } from '@design-system';
+import frame from './floating-action.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  state?: 'inline' | 'floating' | 'hidden';
+  interaction?: Interaction;
+  filterIcon?: boolean;
+  color?: string;
+  inset?: number;
+  overRow?: boolean;
+};
+
+const SCROLL = { inline: 0, floating: 236, hidden: 980 };
+const OVER_ROW_SCROLL = 252;
+const PARAGRAPH =
+  'Pick a competition and a season, then narrow the list down by team, venue or kick-off time to find the match you are after.';
+
+const rows = Array.from({ length: 12 }, (_, index) => `<li class="fa-row">Result ${index + 1}</li>`).join('');
+const paragraphs = (count: number) => Array.from({ length: count }, () => `<p>${PARAGRAPH}</p>`).join('');
+
+const render = ({ state = 'inline', interaction, filterIcon, color, inset }: Props) =>
+  floatingAction({
+    state,
+    filterIcon,
+    trigger: { label: 'Filter (2)', color },
+    triggerAttributes: interaction ? `data-et-force="${interaction}"` : undefined,
+    heldSize: { inlineSize: filterIcon ? 132 : 104, blockSize: 40 },
+    before: `${paragraphs(2)}<h2 class="fa-heading">Results</h2>`,
+    scope: `<ul class="fa-rows">${rows}</ul>`,
+    after: paragraphs(8),
+    attributes:
+      inset === undefined
+        ? undefined
+        : `style="--et-floating-action-inset-inline-end: ${inset}px; --et-floating-action-inset-block-end: ${inset}px"`,
+  });
+
+export default definePart({
+  note: 'Q138: the floating trigger gets the Q99a 1px inset ink edge in light only, so it reaches 3:1 on a light grey row (4.68) and the page (5.48); dark unchanged.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    inline: {},
+    floating: { state: 'floating' },
+    'floating-hover': { state: 'floating', interaction: 'hover' },
+    'floating-active': { state: 'floating', interaction: 'active' },
+    'floating-focus-visible': { state: 'floating', interaction: 'focus-visible' },
+    'inline-focus-visible': { interaction: 'focus-visible' },
+    'floating-icon': { state: 'floating', filterIcon: true },
+    'floating-inset': { state: 'floating', inset: 12 },
+    'floating-danger': { state: 'floating', color: 'danger' },
+    'floating-danger-hover': { state: 'floating', color: 'danger', interaction: 'hover' },
+    'floating-over-row': { state: 'floating', overRow: true },
+    hidden: { state: 'hidden' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="fa-frame" data-et-skip="CLIPPED"><div class="fa-page" style="margin-block-start: -${props.overRow ? OVER_ROW_SCROLL : SCROLL[props.state ?? 'inline']}px">${render(props)}</div></div>`,
+      styles: [floatingActionStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/form-field/form-field.ts

@@ -16,6 +16,7 @@ type Axes = Pick<FormFieldMockOptions, 'appearance' | 'fill' | 'labelMode' | 'si
 type Props = Axes & {
   control?: FieldControl;
   value?: string;
+  textAlign?: 'center' | 'end';
   hint?: string;
   error?: string;
   focused?: boolean;
@@ -40,7 +41,7 @@ const axisRows = Object.fromEntries(
   ),
 ) as Record<string, Props>;
 
-const { states, grid } = interactionRows(
+const interactive = interactionRows(
   {
     empty: { hint: 'Shown on your profile' },
     filled: { value: 'Ada Lovelace' },
@@ -56,6 +57,23 @@ const { states, grid } = interactionRows(
   },
 );
 
+const ALIGNMENTS = ['center', 'end'] as const;
+
+const alignStates = Object.fromEntries(
+  ALIGNMENTS.map((textAlign) => [`text-align-${textAlign}`, { ...axisRow, textAlign }]),
+) as Record<`text-align-${(typeof ALIGNMENTS)[number]}`, Props>;
+
+const states = { ...interactive.states, ...alignStates };
+const grid = {
+  columns: interactive.grid.columns,
+  rows: {
+    ...interactive.grid.rows,
+    ...Object.fromEntries(
+      ALIGNMENTS.map((textAlign) => [`textAlign ${textAlign}`, { rest: `text-align-${textAlign}` as const }]),
+    ),
+  },
+};
+
 const markControl = (markup: string, control: FieldControl, interaction: FieldInteraction | undefined) => {
   const frame = ['data-et-control-part', interaction && `data-et-force="${interaction}"`].filter(Boolean);
   const native = control === 'input' ? '<input class="et-input-native"' : '<textarea class="et-textarea-native"';
@@ -67,7 +85,7 @@ const markControl = (markup: string, control: FieldControl, interaction: FieldIn
 };
 
 export default definePart<Props>({
-  note: 'The SDK form field with a text input and a textarea, drawn by its mocks from @ethlete/components/design.',
+  note: 'scale of the decided shape, Q182, lead merge',
   madeBy: ['claude-opus-5-5'],
   states: {
     ...states,
@@ -82,14 +100,14 @@ export default definePart<Props>({
     input: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
     textarea: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
   },
-  render: ({ control = 'input', value, interaction, ...field }) =>
+  render: ({ control = 'input', value, textAlign, interaction, ...field }) =>
     drawing({
       body: markControl(
         formField({
           id: 'name',
           label: 'Name',
-          errorColor: 'danger-on-light',
-          control: control === 'input' ? input({ value }) : textarea({ value }),
+          errorColor: 'danger',
+          control: control === 'input' ? input({ value, textAlign }) : textarea({ value }),
           ...field,
         }),
         control,

package/design/sdk/components/grid/grid.css

@@ -0,0 +1,17 @@
+.t-frame {
+  box-sizing: border-box;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-grid-item:focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-grid-item-toolbar .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/grid/grid.ts

@@ -0,0 +1,81 @@
+import { grid, GridMockItem, gridStyles } from '@ethlete/components/design/grid';
+import { definePart, drawing } from '@design-system';
+import frame from './grid.css?inline';
+
+type Props = {
+  layout: 'rest' | 'spans';
+  actions?: boolean;
+  item?: Partial<GridMockItem> & { id: string };
+  drag?: boolean;
+  resize?: boolean;
+  longTitle?: boolean;
+};
+
+const REST: (GridMockItem & { id: string })[] = [
+  { id: 'revenue', col: 0, row: 0, colSpan: 2, rowSpan: 1, title: 'Revenue', subtitle: 'Last 30 days' },
+  { id: 'visitors', col: 2, row: 0, colSpan: 2, rowSpan: 1, title: 'Visitors', subtitle: 'This week' },
+  { id: 'orders', col: 0, row: 1, colSpan: 2, rowSpan: 1, title: 'Orders', subtitle: 'Today' },
+  { id: 'refunds', col: 2, row: 1, colSpan: 2, rowSpan: 1, title: 'Refunds', subtitle: 'Today' },
+];
+
+const SPANS: (GridMockItem & { id: string })[] = [
+  { id: 'revenue', col: 0, row: 0, colSpan: 2, rowSpan: 1, title: 'Revenue', subtitle: 'Last 30 days' },
+  { id: 'visitors', col: 2, row: 0, colSpan: 2, rowSpan: 2, title: 'Visitors', subtitle: 'This week' },
+  { id: 'orders', col: 0, row: 1, colSpan: 1, rowSpan: 1, title: 'Orders', subtitle: 'Today' },
+  { id: 'refunds', col: 1, row: 1, colSpan: 1, rowSpan: 1, title: 'Refunds', subtitle: 'Today' },
+  { id: 'activity', col: 0, row: 2, colSpan: 4, rowSpan: 1, title: 'Activity', subtitle: 'Latest events' },
+];
+
+const LONG_TITLE = 'Revenue by region and sales channel';
+
+const itemsOf = (props: Props) => {
+  const items = (props.layout === 'rest' ? REST : SPANS).map((item) =>
+    props.item?.id === item.id ? { ...item, ...props.item } : item,
+  );
+
+  if (props.drag) {
+    return items.map((item) => {
+      if (item.id === 'orders') return { ...item, state: 'dragging' as const, offset: { x: 70, y: 18 } };
+      if (item.id === 'refunds') return { ...item, col: 0 };
+      return item;
+    });
+  }
+
+  if (props.resize) {
+    return items.map((item) =>
+      item.id === 'activity' ? { ...item, rowSpan: 2, state: 'resizing' as const, activeEdge: 's' as const } : item,
+    );
+  }
+
+  if (props.longTitle) return items.map((item) => (item.id === 'revenue' ? { ...item, title: LONG_TITLE } : item));
+
+  return items;
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    rest: { layout: 'rest' },
+    spans: { layout: 'spans' },
+    'item-hover': { layout: 'spans', item: { id: 'visitors', force: 'hover' } },
+    'item-focus-visible': { layout: 'spans', item: { id: 'visitors', force: 'focus-visible' } },
+    actions: { layout: 'spans', actions: true },
+    'action-hover': { layout: 'spans', actions: true, item: { id: 'revenue', removeForce: 'hover' } },
+    'action-focus-visible': { layout: 'spans', actions: true, item: { id: 'revenue', removeForce: 'focus-visible' } },
+    dragging: { layout: 'spans', drag: true },
+    resizing: { layout: 'spans', resize: true },
+    'long-title': { layout: 'spans', actions: true, longTitle: true },
+  },
+  widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: grid({
+        items: itemsOf(props),
+        actions: props.actions,
+        ghost: props.drag ? { col: 1, row: 1, colSpan: 1, rowSpan: 1 } : undefined,
+      }),
+      styles: [gridStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/input/input.css

@@ -0,0 +1,75 @@
+.t-frame {
+  box-sizing: border-box;
+  display: grid;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  et-form-field[data-text-shell] {
+    --_et-form-field-frame-border: var(--et-surface-interaction-solid);
+    --_et-form-field-frame-border-hover: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid) 75%,
+      var(--et-surface-color-solid)
+    );
+    --_et-form-field-frame-focus: var(--et-surface-color-solid);
+  }
+
+  et-form-field[data-text-shell][data-error] {
+    --_et-form-field-frame-border: var(--et-theme-color-primary-solid);
+    --_et-form-field-frame-border-hover: light-dark(
+      rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+      rgb(
+        var(
+          --et-color-primary-ink-active,
+          var(
+            --et-color-primary-ink-focus,
+            var(
+              --et-color-primary-ink-hover,
+              var(
+                --et-color-primary-ink,
+                var(
+                  --et-color-primary-active,
+                  var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_et-form-field-frame-focus: var(--et-theme-color-ink-solid);
+  }
+
+  et-form-field[data-text-shell]:is([data-focused], :has(:focus-visible)):not([data-readonly])
+    .et-form-field-control-frame {
+    border-color: var(--_et-form-field-frame-focus);
+    box-shadow: inset 0 0 0 1px var(--_et-form-field-frame-focus);
+  }
+
+  et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame {
+    border-style: dashed;
+  }
+
+  et-form-field[data-text-shell][data-readonly]:is([data-focused], :has(:focus-visible)) .et-form-field-control-frame {
+    border-color: transparent;
+    outline: 2px dashed var(--_et-form-field-frame-focus);
+    outline-offset: -2px;
+  }
+
+  et-form-field[data-text-shell] .et-form-field-prefix:not(:has(svg)) {
+    margin-inline-end: calc(4px - var(--et-form-field-control-affix-gap));
+  }
+
+  et-form-field et-label .et-label-required-marker {
+    color: var(--et-theme-color-ink-solid);
+  }
+
+  et-input .et-input-native::placeholder {
+    color: color-mix(in srgb, currentColor 60%, transparent);
+  }
+}

package/design/sdk/components/input/input.ts

@@ -0,0 +1,80 @@
+import { textInput, type TextInputMockOptions, textInputStyles } from '@ethlete/components/design/input';
+import { definePart, drawing } from '@design-system';
+import frame from './input.css?inline';
+
+type Props = { field: TextInputMockOptions };
+
+const email = (extra: Partial<TextInputMockOptions> = {}): Props => ({
+  field: { id: 'email', label: 'Email', placeholder: 'name@example.com', ...extra },
+});
+
+const VALUE = 'lena.hoffmann@example.com';
+
+const INVALID = {
+  required: true,
+  value: 'lena.hoffmann@',
+  error: 'Enter a valid email address.',
+  errorColor: 'danger',
+} satisfies Partial<TextInputMockOptions>;
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: email({ placeholder: undefined }),
+    placeholder: email(),
+    filled: email({ value: VALUE }),
+    hover: email({ force: 'hover' }),
+    'hover-filled': email({ value: VALUE, force: 'hover' }),
+    focus: email({ focused: true, force: 'focus-visible' }),
+    'focus-filled': email({ value: VALUE, focused: true, force: 'focus-visible' }),
+    'focus-hover': email({ value: VALUE, focused: true, force: ['focus-visible', 'hover'] }),
+    hint: email({ hint: 'We only use it to sign you in.' }),
+    description: email({ description: 'Your team sees this address on your profile.' }),
+    required: email({ required: true, hint: 'We only use it to sign you in.' }),
+    invalid: email(INVALID),
+    'invalid-hover': email({ ...INVALID, force: 'hover' }),
+    'invalid-focus': email({ ...INVALID, focused: true, force: 'focus-visible' }),
+    'invalid-focus-hover': email({ ...INVALID, focused: true, force: ['focus-visible', 'hover'] }),
+    disabled: email({ disabled: true }),
+    'disabled-filled': email({ value: VALUE, disabled: true }),
+    readonly: email({ value: VALUE, readonly: true }),
+    'readonly-hover': email({ value: VALUE, readonly: true, force: 'hover' }),
+    'readonly-focus': email({ value: VALUE, readonly: true, focused: true, force: 'focus-visible' }),
+    long: email({ value: 'lena.hoffmann-schulze.marketing-department@example-company.com' }),
+    'icon-affixes': {
+      field: { id: 'key', label: 'API key', placeholder: 'sk-…', prefixIcon: 'lock', suffixIcon: 'check' },
+    },
+    'text-affixes': {
+      field: { id: 'site', label: 'Website', value: 'example.com', prefix: 'https://', suffix: '.de' },
+    },
+    'text-prefix': {
+      field: { id: 'price', label: 'Price', value: '1,250.00', prefix: '€' },
+    },
+    search: {
+      field: { id: 'search', label: 'Search', type: 'search', value: 'running shoes' },
+    },
+    password: {
+      field: { id: 'password', label: 'Password', type: 'password', value: 'correct-horse' },
+    },
+    'align-end': {
+      field: { id: 'amount', label: 'Amount', value: '1,250.00', textAlign: 'end', suffix: 'EUR' },
+    },
+    mixed: {
+      field: { id: 'title', label: 'Title', value: 'shared draft title', mixed: true, mixedLabel: 'Mixed values' },
+    },
+    'no-label': {
+      field: { id: 'quick', placeholder: 'Search…', prefixIcon: 'lock' },
+    },
+    'size-sm': email({ value: VALUE, size: 'sm' }),
+    'size-lg': email({ value: VALUE, size: 'lg' }),
+    'align-center': email({ value: VALUE, textAlign: 'center' }),
+  },
+  widths: [320, 360, 640],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: textInput(props.field),
+      styles: [textInputStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/kbd/kbd.css

@@ -0,0 +1,25 @@
+.kbd-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+.kbd-text {
+  margin: 0;
+  font-size: 1.4rem;
+  line-height: 1.6;
+}
+
+.kbd-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  font-size: 1.3rem;
+}
+
+.kbd-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.6rem;
+}

package/design/sdk/components/kbd/kbd.ts

@@ -0,0 +1,58 @@
+import { kbd, kbdStyles } from '@ethlete/components/design/kbd';
+import { definePart, drawing } from '@design-system';
+import frame from './kbd.css?inline';
+
+type Platform = 'apple' | 'other';
+
+type Props = {
+  form: 'single' | 'combo' | 'in-text' | 'shortcut-list';
+  platform: Platform;
+};
+
+const MOD = { apple: '⌘', other: 'Ctrl' } as const;
+const SHIFT = { apple: '⇧', other: 'Shift' } as const;
+const ALT = { apple: '⌥', other: 'Alt' } as const;
+
+const SHORTCUTS = (p: Platform) => [
+  { label: 'Save', keys: [MOD[p], 'S'] },
+  { label: 'Undo', keys: [MOD[p], 'Z'] },
+  { label: 'Redo', keys: [MOD[p], SHIFT[p], 'Z'] },
+  { label: 'Move up a level', keys: [ALT[p], '↑'] },
+  { label: 'Next page', keys: ['PgDn'] },
+  { label: 'Zoom in', keys: [MOD[p], '+'] },
+];
+
+const render = ({ form, platform: p }: Props) => {
+  switch (form) {
+    case 'single':
+      return kbd({ keys: ['Esc'] });
+    case 'combo':
+      return kbd({ keys: [MOD[p], 'K'] });
+    case 'in-text':
+      return `<p class="kbd-text">Press ${kbd({ keys: [MOD[p], 'K'] })} to open the palette, then ${kbd({ keys: ['Esc'] })} to dismiss it.</p>`;
+    case 'shortcut-list':
+      return `<div class="kbd-list">${SHORTCUTS(p)
+        .map(({ label, keys }) => `<div class="kbd-row"><span>${label}</span>${kbd({ keys })}</div>`)
+        .join('')}</div>`;
+  }
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    single: { form: 'single', platform: 'apple' },
+    'combo-apple': { form: 'combo', platform: 'apple' },
+    'combo-other': { form: 'combo', platform: 'other' },
+    'in-text': { form: 'in-text', platform: 'apple' },
+    'shortcut-list-apple': { form: 'shortcut-list', platform: 'apple' },
+    'shortcut-list-other': { form: 'shortcut-list', platform: 'other' },
+  },
+  widths: [480],
+  frame: (body) => `<div class="kbd-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      styles: [kbdStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/loader/loader.css

@@ -0,0 +1,37 @@
+.loader-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+.loader-row {
+  display: flex;
+  align-items: center;
+  gap: 2.4rem;
+}
+
+.loader-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@layer components {
+  .et-spinner.et-color--brand {
+    --et-spinner-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-progress-bar.et-color--brand {
+    --et-progress-bar-indicator-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-brand-loader .et-brand-loader__outline {
+    stroke: var(--et-theme-color-ink-solid);
+  }
+
+  .et-brand-loader .et-brand-loader__fill {
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 0.7;
+    stroke-linejoin: round;
+  }
+}