LOGIC

Parent Level100

Nesting Logic

Live Preview

Parent: accent / 100
Child: accent / 200
Nested: accent / 300

Welcome Back

Sign in to your account

Generated CSS

/* Generated Nesting Rules - down */

@container style(--appearance: accent) and style(--level: 100) {
  [data-emphasis='nested'] {
    @mixin color-object 200;
  }
}

@container style(--appearance: accent) and style(--level: 200) {
  [data-emphasis='nested'] {
    @mixin color-object 300;
  }
}

@container style(--appearance: accent) and style(--level: 300) {
  [data-emphasis='nested'] {
    @mixin color-object 400;
  }
}

@container style(--appearance: accent) and style(--level: 400) {
  [data-emphasis='nested'] {
    @mixin color-object 500;
  }
}

@container style(--appearance: accent) and style(--level: 500) {
  [data-emphasis='nested'] {
    @mixin color-object 600;
  }
}

@container style(--appearance: accent) and style(--level: 600) {
  [data-emphasis='nested'] {
    @mixin color-object 700;
  }
}

@container style(--appearance: accent) and style(--level: 700) {
  [data-emphasis='nested'] {
    @mixin color-object 800;
  }
}

@container style(--appearance: accent) and style(--level: 800) {
  [data-emphasis='nested'] {
    @mixin color-object 900;
  }
}

@container style(--appearance: accent) and style(--level: 900) {
  [data-emphasis='nested'] {
    @mixin color-object 1000;
  }
}

@container style(--appearance: accent) and style(--level: 1000) {
  [data-emphasis='nested'] {
    @mixin color-object 1100;
  }
}

@container style(--appearance: accent) and style(--level: 1100) {
  [data-emphasis='nested'] {
    @mixin color-object 1200;
  }
}

@container style(--appearance: accent) and style(--level: 1200) {
  [data-emphasis='nested'] {
    @mixin color-object 1300;
  }
}

@container style(--appearance: accent) and style(--level: 1300) {
  [data-emphasis='nested'] {
    @mixin color-object 1400;
  }
}

@container style(--appearance: accent) and style(--level: 1400) {
  [data-emphasis='nested'] {
    @mixin color-object 1500;
  }
}

@container style(--appearance: accent) and style(--level: 1500) {
  [data-emphasis='nested'] {
    @mixin color-object 1500;
  }
}