@withlayers/mixins 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +1 -1
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @define-mixin is-visually-hidden{border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;}@define-mixin is-color-code{background-color: var(--l--theme--color--code--background--on-default); color: var(--l--theme--color--code--content--on-default);}@define-mixin is-color-feedback-destructive{background-color: var(--l--theme--color--feedback--background--destructive--on-default); border-color: var(--l--theme--color--feedback--border--destructive--on-default); color: var(--l--theme--color--feedback--content--destructive--on-destructive); & a {color: var(--l--theme--color--feedback--content--destructive--on-destructive);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--destructive--on-destructive);}}@define-mixin is-color-feedback-informative{background-color: var(--l--theme--color--feedback--background--informative--on-default); border-color: var(--l--theme--color--feedback--border--informative--on-default); color: var(--l--theme--color--feedback--content--informative--on-informative); & a {color: var(--l--theme--color--feedback--content--informative--on-informative);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--informative--on-informative);}}@define-mixin is-color-feedback-positive{background-color: var(--l--theme--color--feedback--background--positive--on-default); border-color: var(--l--theme--color--feedback--border--positive--on-default); color: var(--l--theme--color--feedback--content--positive--on-positive); & a {color: var(--l--theme--color--feedback--content--positive--on-positive);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--positive--on-positive);}}@define-mixin is-color-feedback-warning{background-color: var(--l--theme--color--feedback--background--warning--on-default); border-color: var(--l--theme--color--feedback--border--warning--on-default); color: var(--l--theme--color--feedback--content--warning--on-warning); & a {color: var(--l--theme--color--feedback--content--warning--on-warning);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--warning--on-warning);}}@define-mixin is-color-link-primary{color: var(--l--theme--color--link--content--primary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--primary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--primary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--primary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--primary--on-default--visited);}}@define-mixin is-color-link-secondary{color: var(--l--theme--color--link--content--secondary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--secondary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--secondary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--secondary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--secondary--on-default--visited);}}@define-mixin is-color-link-tertiary{color: var(--l--theme--color--link--content--tertiary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--tertiary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--tertiary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--tertiary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--tertiary--on-default--visited);}}@define-mixin is-border-text-highlight{border-radius: var(--l--theme--border--text-highlight--radius); border-style: var(--l--theme--border--text-highlight--style); border-width: var(--l--theme--border--text-highlight--width);}@define-mixin is-space-text-highlight{padding-block: var(--l--theme--space--text-highlight--inset--block); padding-inline: var(--l--theme--space--text-highlight--inset--inline);}@define-mixin is-typography-blockquote{font-family: var(--l--theme--typography--blockquote--font-family); font-size: var(--l--theme--typography--blockquote--font-size); font-style: var(--l--theme--typography--blockquote--font-style); font-variant-caps: var(--l--theme--typography--blockquote--font-variant-caps); font-weight: var(--l--theme--typography--blockquote--font-weight); letter-spacing: var(--l--theme--typography--blockquote--letter-spacing); line-height: var(--l--theme--typography--blockquote--line-height); text-transform: var(--l--theme--typography--blockquote--text-transform);}@define-mixin is-typography-body-sm{font-family: var(--l--theme--typography--body--font-family--sm); font-size: var(--l--theme--typography--body--font-size--sm); font-style: var(--l--theme--typography--body--font-style--sm); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--sm); font-weight: var(--l--theme--typography--body--font-weight--sm); letter-spacing: var(--l--theme--typography--body--letter-spacing--sm); line-height: var(--l--theme--typography--body--line-height--sm); text-transform: var(--l--theme--typography--body--text-transform--sm);}@define-mixin is-typography-body-md{font-family: var(--l--theme--typography--body--font-family--md); font-size: var(--l--theme--typography--body--font-size--md); font-style: var(--l--theme--typography--body--font-style--md); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--md); font-weight: var(--l--theme--typography--body--font-weight--md); letter-spacing: var(--l--theme--typography--body--letter-spacing--md); line-height: var(--l--theme--typography--body--line-height--md); text-transform: var(--l--theme--typography--body--text-transform--md);}@define-mixin is-typography-body-lg{font-family: var(--l--theme--typography--body--font-family--lg); font-size: var(--l--theme--typography--body--font-size--lg); font-style: var(--l--theme--typography--body--font-style--lg); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--lg); font-weight: var(--l--theme--typography--body--font-weight--lg); letter-spacing: var(--l--theme--typography--body--letter-spacing--lg); line-height: var(--l--theme--typography--body--line-height--lg); text-transform: var(--l--theme--typography--body--text-transform--lg);}@define-mixin is-typography-button-xs{font-family: var(--l--theme--typography--button--font-family--xs); font-size: var(--l--theme--typography--button--font-size--xs); font-style: var(--l--theme--typography--button--font-style--xs); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--xs); font-weight: var(--l--theme--typography--button--font-weight--xs); letter-spacing: var(--l--theme--typography--button--letter-spacing--xs); line-height: var(--l--theme--typography--button--line-height--xs); text-transform: var(--l--theme--typography--button--text-transform--xs);}@define-mixin is-typography-button-sm{font-family: var(--l--theme--typography--button--font-family--sm); font-size: var(--l--theme--typography--button--font-size--sm); font-style: var(--l--theme--typography--button--font-style--sm); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--sm); font-weight: var(--l--theme--typography--button--font-weight--sm); letter-spacing: var(--l--theme--typography--button--letter-spacing--sm); line-height: var(--l--theme--typography--button--line-height--sm); text-transform: var(--l--theme--typography--button--text-transform--sm);}@define-mixin is-typography-button-md{font-family: var(--l--theme--typography--button--font-family--md); font-size: var(--l--theme--typography--button--font-size--md); font-style: var(--l--theme--typography--button--font-style--md); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--md); font-weight: var(--l--theme--typography--button--font-weight--md); letter-spacing: var(--l--theme--typography--button--letter-spacing--md); line-height: var(--l--theme--typography--button--line-height--md); text-transform: var(--l--theme--typography--button--text-transform--md);}@define-mixin is-typography-button-lg{font-family: var(--l--theme--typography--button--font-family--lg); font-size: var(--l--theme--typography--button--font-size--lg); font-style: var(--l--theme--typography--button--font-style--lg); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--lg); font-weight: var(--l--theme--typography--button--font-weight--lg); letter-spacing: var(--l--theme--typography--button--letter-spacing--lg); line-height: var(--l--theme--typography--button--line-height--lg); text-transform: var(--l--theme--typography--button--text-transform--lg);}@define-mixin is-typography-caption-primary{font-family: var(--l--theme--typography--caption--font-family--primary); font-size: var(--l--theme--typography--caption--font-size--primary); font-style: var(--l--theme--typography--caption--font-style--primary); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps--primary); font-weight: var(--l--theme--typography--caption--font-weight--primary); letter-spacing: var(--l--theme--typography--caption--letter-spacing--primary); line-height: var(--l--theme--typography--caption--line-height--primary); text-transform: var(--l--theme--typography--caption--text-transform--primary);}@define-mixin is-typography-caption-secondary{font-family: var(--l--theme--typography--caption--font-family--secondary); font-size: var(--l--theme--typography--caption--font-size--secondary); font-style: var(--l--theme--typography--caption--font-style--secondary); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps--secondary); font-weight: var(--l--theme--typography--caption--font-weight--secondary); letter-spacing: var(--l--theme--typography--caption--letter-spacing--secondary); line-height: var(--l--theme--typography--caption--line-height--secondary); text-transform: var(--l--theme--typography--caption--text-transform--secondary);}@define-mixin is-typography-code{font-family: var(--l--theme--typography--code--font-family); font-size: var(--l--theme--typography--code--font-size); font-style: var(--l--theme--typography--code--font-style); font-variant-caps: var(--l--theme--typography--code--font-variant-caps); font-weight: var(--l--theme--typography--code--font-weight); letter-spacing: var(--l--theme--typography--code--letter-spacing); line-height: var(--l--theme--typography--code--line-height); text-transform: var(--l--theme--typography--code--text-transform);}@define-mixin is-typography-heading-l1{font-family: var(--l--theme--typography--heading--font-family--l1); font-size: var(--l--theme--typography--heading--font-size--l1); font-style: var(--l--theme--typography--heading--font-style--l1); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l1); font-weight: var(--l--theme--typography--heading--font-weight--l1); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l1); line-height: var(--l--theme--typography--heading--line-height--l1); text-transform: var(--l--theme--typography--heading--text-transform--l1);}@define-mixin is-typography-heading-l2{font-family: var(--l--theme--typography--heading--font-family--l2); font-size: var(--l--theme--typography--heading--font-size--l2); font-style: var(--l--theme--typography--heading--font-style--l2); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l2); font-weight: var(--l--theme--typography--heading--font-weight--l2); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l2); line-height: var(--l--theme--typography--heading--line-height--l2); text-transform: var(--l--theme--typography--heading--text-transform--l2);}@define-mixin is-typography-heading-l3{font-family: var(--l--theme--typography--heading--font-family--l3); font-size: var(--l--theme--typography--heading--font-size--l3); font-style: var(--l--theme--typography--heading--font-style--l3); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l3); font-weight: var(--l--theme--typography--heading--font-weight--l3); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l3); line-height: var(--l--theme--typography--heading--line-height--l3); text-transform: var(--l--theme--typography--heading--text-transform--l3);}@define-mixin is-typography-heading-l4{font-family: var(--l--theme--typography--heading--font-family--l4); font-size: var(--l--theme--typography--heading--font-size--l4); font-style: var(--l--theme--typography--heading--font-style--l4); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l4); font-weight: var(--l--theme--typography--heading--font-weight--l4); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l4); line-height: var(--l--theme--typography--heading--line-height--l4); text-transform: var(--l--theme--typography--heading--text-transform--l4);}@define-mixin is-typography-heading-l5{font-family: var(--l--theme--typography--heading--font-family--l5); font-size: var(--l--theme--typography--heading--font-size--l5); font-style: var(--l--theme--typography--heading--font-style--l5); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l5); font-weight: var(--l--theme--typography--heading--font-weight--l5); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l5); line-height: var(--l--theme--typography--heading--line-height--l5); text-transform: var(--l--theme--typography--heading--text-transform--l5);}@define-mixin is-typography-heading-l6{font-family: var(--l--theme--typography--heading--font-family--l6); font-size: var(--l--theme--typography--heading--font-size--l6); font-style: var(--l--theme--typography--heading--font-style--l6); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l6); font-weight: var(--l--theme--typography--heading--font-weight--l6); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l6); line-height: var(--l--theme--typography--heading--line-height--l6); text-transform: var(--l--theme--typography--heading--text-transform--l6);}@define-mixin is-typography-label{font-family: var(--l--theme--typography--label--font-family); font-size: var(--l--theme--typography--label--font-size); font-style: var(--l--theme--typography--label--font-style); font-variant-caps: var(--l--theme--typography--label--font-variant-caps); font-weight: var(--l--theme--typography--label--font-weight); letter-spacing: var(--l--theme--typography--label--letter-spacing); line-height: var(--l--theme--typography--label--line-height); text-transform: var(--l--theme--typography--label--text-transform);}@define-mixin is-typography-link-primary{text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--rest); &:hover {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--hover);} &:focus-visible {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--focus);} &:active {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--active);}}@define-mixin is-typography-link-secondary{text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--rest); &:hover {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--hover);} &:focus-visible {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--focus);} &:active {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--active);}}@define-mixin is-typography-overline{font-family: var(--l--theme--typography--overline--font-family); font-size: var(--l--theme--typography--overline--font-size); font-style: var(--l--theme--typography--overline--font-style); font-variant-caps: var(--l--theme--typography--overline--font-variant-caps); font-weight: var(--l--theme--typography--overline--font-weight); letter-spacing: var(--l--theme--typography--overline--letter-spacing); line-height: var(--l--theme--typography--overline--line-height); text-transform: var(--l--theme--typography--overline--text-transform);}@define-mixin is-typography-subhead{font-family: var(--l--theme--typography--subhead--font-family); font-size: var(--l--theme--typography--subhead--font-size); font-style: var(--l--theme--typography--subhead--font-style); font-variant-caps: var(--l--theme--typography--subhead--font-variant-caps); font-weight: var(--l--theme--typography--subhead--font-weight); letter-spacing: var(--l--theme--typography--subhead--letter-spacing); line-height: var(--l--theme--typography--subhead--line-height); text-transform: var(--l--theme--typography--subhead--text-transform);}@define-mixin button-core{appearance: none; border-style: var(--l--theme--button--border--style);}@define-mixin button-shape-xs{border-radius: var(--l--theme--button--border--radius--xs); border-width: var(--l--theme--button--border--width--xs); padding-block: var(--l--theme--button--space--inset--block--xs); padding-inline: var(--l--theme--button--space--inset--inline--xs);}@define-mixin button-shape-sm{border-radius: var(--l--theme--button--border--radius--sm); border-width: var(--l--theme--button--border--width--sm); padding-block: var(--l--theme--button--space--inset--block--sm); padding-inline: var(--l--theme--button--space--inset--inline--sm);}@define-mixin button-shape-md{border-radius: var(--l--theme--button--border--radius--md); border-width: var(--l--theme--button--border--width--md); padding-block: var(--l--theme--button--space--inset--block--md); padding-inline: var(--l--theme--button--space--inset--inline--md);}@define-mixin button-shape-lg{border-radius: var(--l--theme--button--border--radius--lg); border-width: var(--l--theme--button--border--width--lg); padding-block: var(--l--theme--button--space--inset--block--lg); padding-inline: var(--l--theme--button--space--inset--inline--lg);}@define-mixin button-color-primary{background-color: var(--l--theme--button--color--background--primary--on-default--rest); border-color: var(--l--theme--button--color--border--primary--on-default--rest); color: var(--l--theme--button--color--content--primary--on-default--rest); &:active {background-color: var(--l--theme--button--color--background--primary--on-default--active); border-color: var(--l--theme--button--color--border--primary--on-default--active); color: var(--l--theme--button--color--content--primary--on-default--active);} &:focus-visible {background-color: var(--l--theme--button--color--background--primary--on-default--focus); border-color: var(--l--theme--button--color--border--primary--on-default--focus); color: var(--l--theme--button--color--content--primary--on-default--focus);} &:hover {background-color: var(--l--theme--button--color--background--primary--on-default--hover); border-color: var(--l--theme--button--color--border--primary--on-default--hover); color: var(--l--theme--button--color--content--primary--on-default--hover);} &:disabled {background-color: var(--l--theme--button--color--background--primary--on-default--disabled); border-color: var(--l--theme--button--color--border--primary--on-default--disabled); color: var(--l--theme--button--color--content--primary--on-default--disabled);}}@define-mixin button-color-secondary{background-color: var(--l--theme--button--color--background--secondary--on-default--rest); border-color: var(--l--theme--button--color--border--secondary--on-default--rest); color: var(--l--theme--button--color--content--secondary--on-default--rest); &:active {background-color: var(--l--theme--button--color--background--secondary--on-default--active); border-color: var(--l--theme--button--color--border--secondary--on-default--active); color: var(--l--theme--button--color--content--secondary--on-default--active);} &:focus-visible {background-color: var(--l--theme--button--color--background--secondary--on-default--focus); border-color: var(--l--theme--button--color--border--secondary--on-default--focus); color: var(--l--theme--button--color--content--secondary--on-default--focus);} &:hover {background-color: var(--l--theme--button--color--background--secondary--on-default--hover); border-color: var(--l--theme--button--color--border--secondary--on-default--hover); color: var(--l--theme--button--color--content--secondary--on-default--hover);} &:disabled {background-color: var(--l--theme--button--color--background--secondary--on-default--disabled); border-color: var(--l--theme--button--color--border--secondary--on-default--disabled); color: var(--l--theme--button--color--content--secondary--on-default--disabled);}}@define-mixin button-color-tertiary{background-color: var(--l--theme--button--color--background--tertiary--on-default--rest); border-color: var(--l--theme--button--color--border--tertiary--on-default--rest); color: var(--l--theme--button--color--content--tertiary--on-default--rest); &:active {background-color: var(--l--theme--button--color--background--tertiary--on-default--active); border-color: var(--l--theme--button--color--border--tertiary--on-default--active); color: var(--l--theme--button--color--content--tertiary--on-default--active);} &:focus-visible {background-color: var(--l--theme--button--color--background--tertiary--on-default--focus); border-color: var(--l--theme--button--color--border--tertiary--on-default--focus); color: var(--l--theme--button--color--content--tertiary--on-default--focus);} &:hover {background-color: var(--l--theme--button--color--background--tertiary--on-default--hover); border-color: var(--l--theme--button--color--border--tertiary--on-default--hover); color: var(--l--theme--button--color--content--tertiary--on-default--hover);} &:disabled {background-color: var(--l--theme--button--color--background--tertiary--on-default--disabled); border-color: var(--l--theme--button--color--border--tertiary--on-default--disabled); color: var(--l--theme--button--color--content--tertiary--on-default--disabled);}}@define-mixin button-color-destructive{background-color: var(--l--theme--button--color--background--destructive--on-default--rest); border-color: var(--l--theme--button--color--border--destructive--on-default--rest); color: var(--l--theme--button--color--content--destructive--on-default--rest); &:active {background-color: var(--l--theme--button--color--background--destructive--on-default--active); border-color: var(--l--theme--button--color--border--destructive--on-default--active); color: var(--l--theme--button--color--content--destructive--on-default--active);} &:focus-visible {background-color: var(--l--theme--button--color--background--destructive--on-default--focus); border-color: var(--l--theme--button--color--border--destructive--on-default--focus); color: var(--l--theme--button--color--content--destructive--on-default--focus);} &:hover {background-color: var(--l--theme--button--color--background--destructive--on-default--hover); border-color: var(--l--theme--button--color--border--destructive--on-default--hover); color: var(--l--theme--button--color--content--destructive--on-default--hover);} &:disabled {background-color: var(--l--theme--button--color--background--destructive--on-default--disabled); border-color: var(--l--theme--button--color--border--destructive--on-default--disabled); color: var(--l--theme--button--color--content--destructive--on-default--disabled);}}@define-mixin checkbox-control-core{& input[type="checkbox"] {appearance: none;}}@define-mixin checkbox-control-shape{block-size: var(--l--theme--checkbox-control--size); border-radius: var(--l--theme--checkbox-control--border--radius); display: grid; inline-size: var(--l--theme--checkbox-control--size); & input[type="checkbox"] {block-size: var(--l--theme--checkbox-control--size); border-radius: var(--l--theme--checkbox-control--border--radius); border-style: var(--l--theme--checkbox-control--border--style); border-width: var(--l--theme--checkbox-control--border--width); grid-area: 1 / 1; inline-size: var(--l--theme--checkbox-control--size);} &::after {block-size: var(--l--theme--checkbox-control--size); border-radius: var(--l--theme--checkbox-control--border--radius); clip-path: polygon(83.325% 33.35%,41.675% 75%,16.667% 49.9925%,22.5586% 44.0679%,41.675% 63.2167%,77.425% 27.4083%,83.325% 33.35%); content: ""; grid-area: 1 / 1; inline-size: var(--l--theme--checkbox-control--size); pointer-events: none;}}@define-mixin checkbox-control-color{ --color--background: var(--l--theme--color--interactive--background--on-default--rest); --color--border: var(--l--theme--color--interactive--border--on-default--rest); --color--content: transparent; background-color: var(--color--background); & input[type="checkbox"] { background-color: transparent; border-color: var(--color--border); } &::after { background-color: var(--color--content); } &:has(input[type="checkbox"]:focus-visible) { --color--background: var(--l--theme--color--interactive--background--on-default--focus); --color--border: var(--l--theme--color--interactive--border--on-default--focus); } &:has(input[type="checkbox"]:hover) { --color--background: var(--l--theme--color--interactive--background--on-default--hover); --color--border: var(--l--theme--color--interactive--border--on-default--hover); } &:has(input[type="checkbox"][aria-invalid="true"]) { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--rest); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--rest); } &:has(input[type="checkbox"][aria-invalid="true"]:focus-visible) { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--focus); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--focus); } &:has(input[type="checkbox"][aria-invalid="true"]:hover) { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--hover); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--hover); } &:has(input[type="checkbox"]:checked) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--rest); --color--border: var(--l--theme--color--interactive--border--on-default--checked--rest); --color--content: var(--l--theme--color--interactive--content--on-default--checked--rest); } &:has(input[type="checkbox"]:checked:focus-visible) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--focus); --color--border: var(--l--theme--color--interactive--border--on-default--checked--focus); --color--content: var(--l--theme--color--interactive--content--on-default--checked--focus); } &:has(input[type="checkbox"]:checked:hover) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--hover); --color--border: var(--l--theme--color--interactive--border--on-default--checked--hover); --color--content: var(--l--theme--color--interactive--content--on-default--checked--hover); } &:has(input[type="checkbox"][aria-invalid="true"]:checked) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--invalid--rest); --color--border: var(--l--theme--color--interactive--border--on-default--checked--invalid--rest); --color--content: var(--l--theme--color--interactive--content--on-default--checked--invalid--rest); } &:has(input[type="checkbox"][aria-invalid="true"]:checked:focus-visible) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--invalid--focus); --color--border: var(--l--theme--color--interactive--border--on-default--checked--invalid--focus); --color--content: var(--l--theme--color--interactive--content--on-default--checked--invalid--focus); } &:has(input[type="checkbox"][aria-invalid="true"]:checked:hover) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--invalid--hover); --color--border: var(--l--theme--color--interactive--border--on-default--checked--invalid--hover); --color--content: var(--l--theme--color--interactive--content--on-default--checked--invalid--hover); } &:has( input[type="checkbox"]:disabled, input[type="checkbox"]:disabled:checked ) { --color--background: var(--l--theme--color--interactive--background--on-default--disabled); --color--border: var(--l--theme--color--interactive--border--on-default--disabled); } &:has(input[type="checkbox"]:disabled:checked) { --color--content: var(--l--theme--color--interactive--content--on-default--disabled); } }@define-mixin notification-core{border-style: var(--l--theme--notification--border--style);}@define-mixin notification-shape-xs{border-radius: var(--l--theme--notification--border--radius--xs); border-width: var(--l--theme--notification--border--width--xs); padding-block: var(--l--theme--notification--space--inset--block--xs); padding-inline: var(--l--theme--notification--space--inset--inline--xs);}@define-mixin notification-shape-sm{border-radius: var(--l--theme--notification--border--radius--sm); border-width: var(--l--theme--notification--border--width--sm); padding-block: var(--l--theme--notification--space--inset--block--sm); padding-inline: var(--l--theme--notification--space--inset--inline--sm);}@define-mixin notification-shape-md{border-radius: var(--l--theme--notification--border--radius--md); border-width: var(--l--theme--notification--border--width--md); padding-block: var(--l--theme--notification--space--inset--block--md); padding-inline: var(--l--theme--notification--space--inset--inline--md);}@define-mixin notification-shape-lg{border-radius: var(--l--theme--notification--border--radius--lg); border-width: var(--l--theme--notification--border--width--lg); padding-block: var(--l--theme--notification--space--inset--block--lg); padding-inline: var(--l--theme--notification--space--inset--inline--lg);}@define-mixin notification-typography-xs{font-family: var(--l--theme--notification--typography--font-family--xs); font-size: var(--l--theme--notification--typography--font-size--xs); font-style: var(--l--theme--notification--typography--font-style--xs); font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--xs); font-weight: var(--l--theme--notification--typography--font-weight--xs); letter-spacing: var(--l--theme--notification--typography--letter-spacing--xs); line-height: var(--l--theme--notification--typography--line-height--xs); text-transform: var(--l--theme--notification--typography--text-transform--xs);}@define-mixin notification-typography-sm{font-family: var(--l--theme--notification--typography--font-family--sm); font-size: var(--l--theme--notification--typography--font-size--sm); font-style: var(--l--theme--notification--typography--font-style--sm); font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--sm); font-weight: var(--l--theme--notification--typography--font-weight--sm); letter-spacing: var(--l--theme--notification--typography--letter-spacing--sm); line-height: var(--l--theme--notification--typography--line-height--sm); text-transform: var(--l--theme--notification--typography--text-transform--sm);}@define-mixin notification-typography-md{font-family: var(--l--theme--notification--typography--font-family--md); font-size: var(--l--theme--notification--typography--font-size--md); font-style: var(--l--theme--notification--typography--font-style--md); font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--md); font-weight: var(--l--theme--notification--typography--font-weight--md); letter-spacing: var(--l--theme--notification--typography--letter-spacing--md); line-height: var(--l--theme--notification--typography--line-height--md); text-transform: var(--l--theme--notification--typography--text-transform--md);}@define-mixin notification-typography-lg{font-family: var(--l--theme--notification--typography--font-family--lg); font-size: var(--l--theme--notification--typography--font-size--lg); font-style: var(--l--theme--notification--typography--font-style--lg); font-variant-caps: var(--l--theme--notification--typography--font-variant-caps--lg); font-weight: var(--l--theme--notification--typography--font-weight--lg); letter-spacing: var(--l--theme--notification--typography--letter-spacing--lg); line-height: var(--l--theme--notification--typography--line-height--lg); text-transform: var(--l--theme--notification--typography--text-transform--lg);}@define-mixin radio-core{& input[type="radio"] {appearance: none;}}@define-mixin radio-shape{block-size: var(--l--theme--radio-control--size); border-radius: var(--l--theme--radio-control--border--radius); display: grid; inline-size: var(--l--theme--radio-control--size); & input[type="radio"] {block-size: var(--l--theme--radio-control--size); border-radius: var(--l--theme--radio-control--border--radius); border-style: var(--l--theme--radio-control--border--style); border-width: var(--l--theme--radio-control--border--width); grid-area: 1 / 1; inline-size: var(--l--theme--radio-control--size);} &::after {block-size: var(--l--theme--radio-control--size); border-radius: var(--l--theme--radio-control--border--radius); clip-path: circle(20.83% at 50% 50%); content: ""; grid-area: 1 / 1; inline-size: var(--l--theme--radio-control--size); pointer-events: none;}}@define-mixin radio-color{ --color--background: var(--l--theme--color--interactive--background--on-default--rest); --color--border: var(--l--theme--color--interactive--border--on-default--rest); --color--content: transparent; background-color: var(--color--background); & input[type="radio"] { border-color: var(--color--border); } &::after { background-color: var(--color--content); } &:has(input[type="radio"]:focus-visible) { --color--background: var(--l--theme--color--interactive--background--on-default--focus); --color--border: var(--l--theme--color--interactive--border--on-default--focus); } &:has(input[type="radio"]:hover) { --color--background: var(--l--theme--color--interactive--background--on-default--hover); --color--border: var(--l--theme--color--interactive--border--on-default--hover); } &:has(input[type="radio"]:checked) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--rest); --color--border: var(--l--theme--color--interactive--border--on-default--checked--rest); --color--content: var(--l--theme--color--interactive--content--on-default--checked--rest); } &:has(input[type="radio"]:focus-visible:checked) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--focus); --color--border: var(--l--theme--color--interactive--border--on-default--checked--focus); --color--content: var(--l--theme--color--interactive--content--on-default--checked--focus); } &:has(input[type="radio"]:hover:checked) { --color--background: var(--l--theme--color--interactive--background--on-default--checked--hover); --color--border: var(--l--theme--color--interactive--border--on-default--checked--hover); --color--content: var(--l--theme--color--interactive--content--on-default--checked--hover); } &:has( input[type="radio"]:disabled, input[type="radio"]:disabled:checked ) { --color--background: var(--l--theme--color--interactive--background--on-default--disabled); --color--border: var(--l--theme--color--interactive--border--on-default--disabled); } &:has(input[type="radio"]:disabled:checked) { --color--content: var(--l--theme--color--interactive--content--on-default--disabled); } }@define-mixin text-control-core{border-style: var(--l--theme--text-control--border--style);}@define-mixin text-control-shape-xs{border-radius: var(--l--theme--text-control--border--radius--xs); border-width: var(--l--theme--text-control--border--width--xs); padding-block: var(--l--theme--text-control--space--inset--block--xs); padding-inline: var(--l--theme--text-control--space--inset--inline--xs);}@define-mixin text-control-shape-sm{border-radius: var(--l--theme--text-control--border--radius--sm); border-width: var(--l--theme--text-control--border--width--sm); padding-block: var(--l--theme--text-control--space--inset--block--sm); padding-inline: var(--l--theme--text-control--space--inset--inline--sm);}@define-mixin text-control-shape-md{border-radius: var(--l--theme--text-control--border--radius--md); border-width: var(--l--theme--text-control--border--width--md); padding-block: var(--l--theme--text-control--space--inset--block--md); padding-inline: var(--l--theme--text-control--space--inset--inline--md);}@define-mixin text-control-shape-lg{border-radius: var(--l--theme--text-control--border--radius--lg); border-width: var(--l--theme--text-control--border--width--lg); padding-block: var(--l--theme--text-control--space--inset--block--lg); padding-inline: var(--l--theme--text-control--space--inset--inline--lg);}@define-mixin text-control-typography-xs{font-family: var(--l--theme--text-control--typography--font-family--xs); font-size: var(--l--theme--text-control--typography--font-size--xs); font-style: var(--l--theme--text-control--typography--font-style--xs); font-variant-caps: var(--l--theme--text-control--typography--font-variant-caps--xs); font-weight: var(--l--theme--text-control--typography--font-weight--xs); letter-spacing: var(--l--theme--text-control--typography--letter-spacing--xs); line-height: var(--l--theme--text-control--typography--line-height--xs); text-transform: var(--l--theme--text-control--typography--text-transform--xs);}@define-mixin text-control-typography-sm{font-family: var(--l--theme--text-control--typography--font-family--sm); font-size: var(--l--theme--text-control--typography--font-size--sm); font-style: var(--l--theme--text-control--typography--font-style--sm); font-variant-caps: var(--l--theme--text-control--typography--font-variant-caps--sm); font-weight: var(--l--theme--text-control--typography--font-weight--sm); letter-spacing: var(--l--theme--text-control--typography--letter-spacing--sm); line-height: var(--l--theme--text-control--typography--line-height--sm); text-transform: var(--l--theme--text-control--typography--text-transform--sm);}@define-mixin text-control-typography-md{font-family: var(--l--theme--text-control--typography--font-family--md); font-size: var(--l--theme--text-control--typography--font-size--md); font-style: var(--l--theme--text-control--typography--font-style--md); font-variant-caps: var(--l--theme--text-control--typography--font-variant-caps--md); font-weight: var(--l--theme--text-control--typography--font-weight--md); letter-spacing: var(--l--theme--text-control--typography--letter-spacing--md); line-height: var(--l--theme--text-control--typography--line-height--md); text-transform: var(--l--theme--text-control--typography--text-transform--md);}@define-mixin text-control-typography-lg{font-family: var(--l--theme--text-control--typography--font-family--lg); font-size: var(--l--theme--text-control--typography--font-size--lg); font-style: var(--l--theme--text-control--typography--font-style--lg); font-variant-caps: var(--l--theme--text-control--typography--font-variant-caps--lg); font-weight: var(--l--theme--text-control--typography--font-weight--lg); letter-spacing: var(--l--theme--text-control--typography--letter-spacing--lg); line-height: var(--l--theme--text-control--typography--line-height--lg); text-transform: var(--l--theme--text-control--typography--text-transform--lg);}@define-mixin text-control-color-primary{ --color--background: var(--l--theme--color--interactive--background--on-default--rest); --color--border: var(--l--theme--color--interactive--border--on-default--rest); --color--content: var(--l--theme--color--interactive--content--on-default--rest); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--rest); background-color: var(--color--background); border-color: var(--color--border); color: var(--color--content); &::placeholder, &::-webkit-datetime-edit { color: var(--color--placeholder); } &:focus-visible { --color--background: var(--l--theme--color--interactive--background--on-default--focus); --color--border: var(--l--theme--color--interactive--border--on-default--focus); --color--content: var(--l--theme--color--interactive--content--on-default--focus); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--focus); } &:hover { --color--background: var(--l--theme--color--interactive--background--on-default--hover); --color--border: var(--l--theme--color--interactive--border--on-default--hover); --color--content: var(--l--theme--color--interactive--content--on-default--hover); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--hover); } &[aria-invalid="true"] { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--rest); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--rest); --color--content: var(--l--theme--color--interactive--content--on-default--invalid--rest); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--invalid--rest); } &[aria-invalid="true"]:focus-visible { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--focus); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--focus); --color--content: var(--l--theme--color--interactive--content--on-default--invalid--focus); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--invalid--focus); } &[aria-invalid="true"]:hover { --color--background: var(--l--theme--color--interactive--background--on-default--invalid--hover); --color--border: var(--l--theme--color--interactive--border--on-default--invalid--hover); --color--content: var(--l--theme--color--interactive--content--on-default--invalid--hover); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--invalid--hover); } &:disabled { --color--background: var(--l--theme--color--interactive--background--on-default--disabled); --color--border: var(--l--theme--color--interactive--border--on-default--disabled); --color--content: var(--l--theme--color--interactive--content--on-default--disabled); --color--placeholder: var(--l--theme--color--interactive--placeholder--on-default--disabled); } }
1
+ @define-mixin is-visually-hidden{border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;}@define-mixin is-color-code{background-color: var(--l--theme--color--code--background--on-default); color: var(--l--theme--color--code--content--on-default);}@define-mixin is-color-feedback-destructive{background-color: var(--l--theme--color--feedback--background--destructive--on-default); border-color: var(--l--theme--color--feedback--border--destructive--on-default); color: var(--l--theme--color--feedback--content--destructive--on-destructive); & a {color: var(--l--theme--color--feedback--content--destructive--on-destructive);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--destructive--on-destructive);}}@define-mixin is-color-feedback-informative{background-color: var(--l--theme--color--feedback--background--informative--on-default); border-color: var(--l--theme--color--feedback--border--informative--on-default); color: var(--l--theme--color--feedback--content--informative--on-informative); & a {color: var(--l--theme--color--feedback--content--informative--on-informative);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--informative--on-informative);}}@define-mixin is-color-feedback-positive{background-color: var(--l--theme--color--feedback--background--positive--on-default); border-color: var(--l--theme--color--feedback--border--positive--on-default); color: var(--l--theme--color--feedback--content--positive--on-positive); & a {color: var(--l--theme--color--feedback--content--positive--on-positive);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--positive--on-positive);}}@define-mixin is-color-feedback-warning{background-color: var(--l--theme--color--feedback--background--warning--on-default); border-color: var(--l--theme--color--feedback--border--warning--on-default); color: var(--l--theme--color--feedback--content--warning--on-warning); & a {color: var(--l--theme--color--feedback--content--warning--on-warning);} & :focus-visible {outline-color: var(--l--theme--color--feedback--outline--warning--on-warning);}}@define-mixin is-color-link-primary{color: var(--l--theme--color--link--content--primary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--primary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--primary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--primary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--primary--on-default--visited);}}@define-mixin is-color-link-secondary{color: var(--l--theme--color--link--content--secondary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--secondary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--secondary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--secondary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--secondary--on-default--visited);}}@define-mixin is-color-link-tertiary{color: var(--l--theme--color--link--content--tertiary--on-default--rest); &:hover {color: var(--l--theme--color--link--content--tertiary--on-default--hover);} &:focus-visible {color: var(--l--theme--color--link--content--tertiary--on-default--focus);} &:active {color: var(--l--theme--color--link--content--tertiary--on-default--active);} &:visited {color: var(--l--theme--color--link--content--tertiary--on-default--visited);}}@define-mixin is-border-text-highlight{border-radius: var(--l--theme--border--text-highlight--radius); border-style: var(--l--theme--border--text-highlight--style); border-width: var(--l--theme--border--text-highlight--width);}@define-mixin is-space-text-highlight{padding-block: var(--l--theme--space--text-highlight--inset--block); padding-inline: var(--l--theme--space--text-highlight--inset--inline);}@define-mixin is-typography-blockquote{font-family: var(--l--theme--typography--blockquote--font-family); font-size: var(--l--theme--typography--blockquote--font-size); font-style: var(--l--theme--typography--blockquote--font-style); font-variant-caps: var(--l--theme--typography--blockquote--font-variant-caps); font-weight: var(--l--theme--typography--blockquote--font-weight); letter-spacing: var(--l--theme--typography--blockquote--letter-spacing); line-height: var(--l--theme--typography--blockquote--line-height); text-transform: var(--l--theme--typography--blockquote--text-transform);}@define-mixin is-typography-body-sm{font-family: var(--l--theme--typography--body--font-family--sm); font-size: var(--l--theme--typography--body--font-size--sm); font-style: var(--l--theme--typography--body--font-style--sm); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--sm); font-weight: var(--l--theme--typography--body--font-weight--sm); letter-spacing: var(--l--theme--typography--body--letter-spacing--sm); line-height: var(--l--theme--typography--body--line-height--sm); text-transform: var(--l--theme--typography--body--text-transform--sm);}@define-mixin is-typography-body-md{font-family: var(--l--theme--typography--body--font-family--md); font-size: var(--l--theme--typography--body--font-size--md); font-style: var(--l--theme--typography--body--font-style--md); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--md); font-weight: var(--l--theme--typography--body--font-weight--md); letter-spacing: var(--l--theme--typography--body--letter-spacing--md); line-height: var(--l--theme--typography--body--line-height--md); text-transform: var(--l--theme--typography--body--text-transform--md);}@define-mixin is-typography-body-lg{font-family: var(--l--theme--typography--body--font-family--lg); font-size: var(--l--theme--typography--body--font-size--lg); font-style: var(--l--theme--typography--body--font-style--lg); font-variant-caps: var(--l--theme--typography--body--font-variant-caps--lg); font-weight: var(--l--theme--typography--body--font-weight--lg); letter-spacing: var(--l--theme--typography--body--letter-spacing--lg); line-height: var(--l--theme--typography--body--line-height--lg); text-transform: var(--l--theme--typography--body--text-transform--lg);}@define-mixin is-typography-button-xs{font-family: var(--l--theme--typography--button--font-family--xs); font-size: var(--l--theme--typography--button--font-size--xs); font-style: var(--l--theme--typography--button--font-style--xs); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--xs); font-weight: var(--l--theme--typography--button--font-weight--xs); letter-spacing: var(--l--theme--typography--button--letter-spacing--xs); line-height: var(--l--theme--typography--button--line-height--xs); text-transform: var(--l--theme--typography--button--text-transform--xs);}@define-mixin is-typography-button-sm{font-family: var(--l--theme--typography--button--font-family--sm); font-size: var(--l--theme--typography--button--font-size--sm); font-style: var(--l--theme--typography--button--font-style--sm); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--sm); font-weight: var(--l--theme--typography--button--font-weight--sm); letter-spacing: var(--l--theme--typography--button--letter-spacing--sm); line-height: var(--l--theme--typography--button--line-height--sm); text-transform: var(--l--theme--typography--button--text-transform--sm);}@define-mixin is-typography-button-md{font-family: var(--l--theme--typography--button--font-family--md); font-size: var(--l--theme--typography--button--font-size--md); font-style: var(--l--theme--typography--button--font-style--md); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--md); font-weight: var(--l--theme--typography--button--font-weight--md); letter-spacing: var(--l--theme--typography--button--letter-spacing--md); line-height: var(--l--theme--typography--button--line-height--md); text-transform: var(--l--theme--typography--button--text-transform--md);}@define-mixin is-typography-button-lg{font-family: var(--l--theme--typography--button--font-family--lg); font-size: var(--l--theme--typography--button--font-size--lg); font-style: var(--l--theme--typography--button--font-style--lg); font-variant-caps: var(--l--theme--typography--button--font-variant-caps--lg); font-weight: var(--l--theme--typography--button--font-weight--lg); letter-spacing: var(--l--theme--typography--button--letter-spacing--lg); line-height: var(--l--theme--typography--button--line-height--lg); text-transform: var(--l--theme--typography--button--text-transform--lg);}@define-mixin is-typography-caption-primary{font-family: var(--l--theme--typography--caption--font-family--primary); font-size: var(--l--theme--typography--caption--font-size--primary); font-style: var(--l--theme--typography--caption--font-style--primary); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps--primary); font-weight: var(--l--theme--typography--caption--font-weight--primary); letter-spacing: var(--l--theme--typography--caption--letter-spacing--primary); line-height: var(--l--theme--typography--caption--line-height--primary); text-transform: var(--l--theme--typography--caption--text-transform--primary);}@define-mixin is-typography-caption-secondary{font-family: var(--l--theme--typography--caption--font-family--secondary); font-size: var(--l--theme--typography--caption--font-size--secondary); font-style: var(--l--theme--typography--caption--font-style--secondary); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps--secondary); font-weight: var(--l--theme--typography--caption--font-weight--secondary); letter-spacing: var(--l--theme--typography--caption--letter-spacing--secondary); line-height: var(--l--theme--typography--caption--line-height--secondary); text-transform: var(--l--theme--typography--caption--text-transform--secondary);}@define-mixin is-typography-code{font-family: var(--l--theme--typography--code--font-family); font-size: var(--l--theme--typography--code--font-size); font-style: var(--l--theme--typography--code--font-style); font-variant-caps: var(--l--theme--typography--code--font-variant-caps); font-weight: var(--l--theme--typography--code--font-weight); letter-spacing: var(--l--theme--typography--code--letter-spacing); line-height: var(--l--theme--typography--code--line-height); text-transform: var(--l--theme--typography--code--text-transform);}@define-mixin is-typography-heading-l1{font-family: var(--l--theme--typography--heading--font-family--l1); font-size: var(--l--theme--typography--heading--font-size--l1); font-style: var(--l--theme--typography--heading--font-style--l1); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l1); font-weight: var(--l--theme--typography--heading--font-weight--l1); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l1); line-height: var(--l--theme--typography--heading--line-height--l1); text-transform: var(--l--theme--typography--heading--text-transform--l1);}@define-mixin is-typography-heading-l2{font-family: var(--l--theme--typography--heading--font-family--l2); font-size: var(--l--theme--typography--heading--font-size--l2); font-style: var(--l--theme--typography--heading--font-style--l2); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l2); font-weight: var(--l--theme--typography--heading--font-weight--l2); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l2); line-height: var(--l--theme--typography--heading--line-height--l2); text-transform: var(--l--theme--typography--heading--text-transform--l2);}@define-mixin is-typography-heading-l3{font-family: var(--l--theme--typography--heading--font-family--l3); font-size: var(--l--theme--typography--heading--font-size--l3); font-style: var(--l--theme--typography--heading--font-style--l3); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l3); font-weight: var(--l--theme--typography--heading--font-weight--l3); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l3); line-height: var(--l--theme--typography--heading--line-height--l3); text-transform: var(--l--theme--typography--heading--text-transform--l3);}@define-mixin is-typography-heading-l4{font-family: var(--l--theme--typography--heading--font-family--l4); font-size: var(--l--theme--typography--heading--font-size--l4); font-style: var(--l--theme--typography--heading--font-style--l4); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l4); font-weight: var(--l--theme--typography--heading--font-weight--l4); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l4); line-height: var(--l--theme--typography--heading--line-height--l4); text-transform: var(--l--theme--typography--heading--text-transform--l4);}@define-mixin is-typography-heading-l5{font-family: var(--l--theme--typography--heading--font-family--l5); font-size: var(--l--theme--typography--heading--font-size--l5); font-style: var(--l--theme--typography--heading--font-style--l5); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l5); font-weight: var(--l--theme--typography--heading--font-weight--l5); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l5); line-height: var(--l--theme--typography--heading--line-height--l5); text-transform: var(--l--theme--typography--heading--text-transform--l5);}@define-mixin is-typography-heading-l6{font-family: var(--l--theme--typography--heading--font-family--l6); font-size: var(--l--theme--typography--heading--font-size--l6); font-style: var(--l--theme--typography--heading--font-style--l6); font-variant-caps: var(--l--theme--typography--heading--font-variant-caps--l6); font-weight: var(--l--theme--typography--heading--font-weight--l6); letter-spacing: var(--l--theme--typography--heading--letter-spacing--l6); line-height: var(--l--theme--typography--heading--line-height--l6); text-transform: var(--l--theme--typography--heading--text-transform--l6);}@define-mixin is-typography-label{font-family: var(--l--theme--typography--label--font-family); font-size: var(--l--theme--typography--label--font-size); font-style: var(--l--theme--typography--label--font-style); font-variant-caps: var(--l--theme--typography--label--font-variant-caps); font-weight: var(--l--theme--typography--label--font-weight); letter-spacing: var(--l--theme--typography--label--letter-spacing); line-height: var(--l--theme--typography--label--line-height); text-transform: var(--l--theme--typography--label--text-transform);}@define-mixin is-typography-link-primary{text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--rest); &:hover {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--hover);} &:focus-visible {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--focus);} &:active {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--primary--active);}}@define-mixin is-typography-link-secondary{text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--rest); &:hover {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--hover);} &:focus-visible {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--focus);} &:active {text-decoration-line: var(--l--theme--typography--link--text-decoration-line--secondary--active);}}@define-mixin is-typography-overline{font-family: var(--l--theme--typography--overline--font-family); font-size: var(--l--theme--typography--overline--font-size); font-style: var(--l--theme--typography--overline--font-style); font-variant-caps: var(--l--theme--typography--overline--font-variant-caps); font-weight: var(--l--theme--typography--overline--font-weight); letter-spacing: var(--l--theme--typography--overline--letter-spacing); line-height: var(--l--theme--typography--overline--line-height); text-transform: var(--l--theme--typography--overline--text-transform);}@define-mixin is-typography-subhead{font-family: var(--l--theme--typography--subhead--font-family); font-size: var(--l--theme--typography--subhead--font-size); font-style: var(--l--theme--typography--subhead--font-style); font-variant-caps: var(--l--theme--typography--subhead--font-variant-caps); font-weight: var(--l--theme--typography--subhead--font-weight); letter-spacing: var(--l--theme--typography--subhead--letter-spacing); line-height: var(--l--theme--typography--subhead--line-height); text-transform: var(--l--theme--typography--subhead--text-transform);}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/mixins",
3
- "version": "0.12.0",
3
+ "version": "0.13.0",
4
4
  "description": "Mixins layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",