@withlayers/mixins 0.5.0 → 0.5.2
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.
- package/dist/index.css +1 -1
- package/package.json +2 -2
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-link-color-content-primary{color: var(--l--theme--link--color--content--primary--on-default--rest); &:hover {color: var(--l--theme--link--color--content--primary--on-default--hover);} &:focus-visible {color: var(--l--theme--link--color--content--primary--on-default--focus);} &:active {color: var(--l--theme--link--color--content--primary--on-default--active);} &:visited {color: var(--l--theme--link--color--content--primary--on-default--visited);}}@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-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-blockquote{font-family: var(--l--theme--blockquote--typography--font-family); font-size: var(--l--theme--blockquote--typography--font-size); font-style: var(--l--theme--blockquote--typography--font-style); font-variant-caps: var(--l--theme--blockquote--typography--font-variant-caps); font-weight: var(--l--theme--blockquote--typography--font-weight); letter-spacing: var(--l--theme--blockquote--typography--letter-spacing); line-height: var(--l--theme--blockquote--typography--line-height); text-transform: var(--l--theme--blockquote--typography--text-transform);}@define-mixin is-typography-caption{font-family: var(--l--theme--typography--caption--font-family); font-size: var(--l--theme--typography--caption--font-size); font-style: var(--l--theme--typography--caption--font-style); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps); font-weight: var(--l--theme--typography--caption--font-weight); letter-spacing: var(--l--theme--typography--caption--letter-spacing); line-height: var(--l--theme--typography--caption--line-height); text-transform: var(--l--theme--typography--caption--text-transform);}@define-mixin is-typography-caption-attribution{font-family: var(--l--theme--typography--caption-attribution--font-family); font-size: var(--l--theme--typography--caption-attribution--font-size); font-style: var(--l--theme--typography--caption-attribution--font-style); font-variant-caps: var(--l--theme--typography--caption-attribution--font-variant-caps); font-weight: var(--l--theme--typography--caption-attribution--font-weight); letter-spacing: var(--l--theme--typography--caption-attribution--letter-spacing); line-height: var(--l--theme--typography--caption-attribution--line-height); text-transform: var(--l--theme--typography--caption-attribution--text-transform);}@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-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--inner--block--xs); padding-inline: var(--l--theme--button--space--inner--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--inner--block--sm); padding-inline: var(--l--theme--button--space--inner--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--inner--block--md); padding-inline: var(--l--theme--button--space--inner--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--inner--block--lg); padding-inline: var(--l--theme--button--space--inner--inline--lg);}@define-mixin button-typography-xs{font-family: var(--l--theme--button--typography--font-family--xs); font-size: var(--l--theme--button--typography--font-size--xs); font-style: var(--l--theme--button--typography--font-style--xs); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--xs); font-weight: var(--l--theme--button--typography--font-weight--xs); letter-spacing: var(--l--theme--button--typography--letter-spacing--xs); line-height: var(--l--theme--button--typography--line-height--xs); text-transform: var(--l--theme--button--typography--text-transform--xs);}@define-mixin button-typography-sm{font-family: var(--l--theme--button--typography--font-family--sm); font-size: var(--l--theme--button--typography--font-size--sm); font-style: var(--l--theme--button--typography--font-style--sm); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--sm); font-weight: var(--l--theme--button--typography--font-weight--sm); letter-spacing: var(--l--theme--button--typography--letter-spacing--sm); line-height: var(--l--theme--button--typography--line-height--sm); text-transform: var(--l--theme--button--typography--text-transform--sm);}@define-mixin button-typography-md{font-family: var(--l--theme--button--typography--font-family--md); font-size: var(--l--theme--button--typography--font-size--md); font-style: var(--l--theme--button--typography--font-style--md); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--md); font-weight: var(--l--theme--button--typography--font-weight--md); letter-spacing: var(--l--theme--button--typography--letter-spacing--md); line-height: var(--l--theme--button--typography--line-height--md); text-transform: var(--l--theme--button--typography--text-transform--md);}@define-mixin button-typography-lg{font-family: var(--l--theme--button--typography--font-family--lg); font-size: var(--l--theme--button--typography--font-size--lg); font-style: var(--l--theme--button--typography--font-style--lg); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--lg); font-weight: var(--l--theme--button--typography--font-weight--lg); letter-spacing: var(--l--theme--button--typography--letter-spacing--lg); line-height: var(--l--theme--button--typography--line-height--lg); text-transform: var(--l--theme--button--typography--text-transform--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--checkbox-control--color--background--on-default--rest); --color--border: var(--l--theme--checkbox-control--color--border--on-default--rest); --color--content: var(--l--theme--checkbox-control--color--content--on-default--rest); background-color: var(--color--background); & input[type="checkbox"] { border-color: var(--color--border); } &::after { background-color: var(--color--content); } &:has(input[type="checkbox"]:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--checked); } &:has(input[type="checkbox"]:disabled:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--disabled); --color--border: var(--l--theme--checkbox-control--color--border--on-default--disabled); --color--content: var(--l--theme--checkbox-control--color--content--on-default--disabled); } &:has(input[type="checkbox"]:disabled:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--disabled-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--disabled-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--disabled-checked); } &:has(input[type="checkbox"]:focus-visible:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--focus); --color--border: var(--l--theme--checkbox-control--color--border--on-default--focus); --color--content: var(--l--theme--checkbox-control--color--content--on-default--focus); } &:has(input[type="checkbox"]:focus-visible:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--focus-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--focus-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--focus-checked); } &:has(input[type="checkbox"]:hover:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--hover); --color--border: var(--l--theme--checkbox-control--color--border--on-default--hover); --color--content: var(--l--theme--checkbox-control--color--content--on-default--hover); } &:has(input[type="checkbox"]:hover:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--hover-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--hover-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--hover-checked); } }@define-mixin has-no-initial-underline{text-decoration-line: none; &:hover,&:active {text-decoration-line: underline; text-decoration-style: solid;}}@define-mixin radio-button-core{& input[type="radio"] {appearance: none;}}@define-mixin radio-button-shape{block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); display: grid; inline-size: var(--l--theme--radio-button-control--size); & input[type="radio"] {block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); border-style: var(--l--theme--radio-button-control--border--style); border-width: var(--l--theme--radio-button-control--border--width); grid-area: 1 / 1; inline-size: var(--l--theme--radio-button-control--size);} &::after {block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); clip-path: circle(20.83% at 50% 50%); content: ""; grid-area: 1 / 1; inline-size: var(--l--theme--radio-button-control--size); pointer-events: none;}}@define-mixin radio-button-color{ --color--background: var(--l--theme--radio-button-control--color--background--on-default--rest); --color--border: var(--l--theme--radio-button-control--color--border--on-default--rest); --color--content: var(--l--theme--radio-button-control--color--content--on-default--rest); background-color: var(--color--background); & input[type="radio"] { border-color: var(--color--border); } &::after { background-color: var(--color--content); } &:has(input[type="radio"]:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--checked); } &:has(input[type="radio"]:disabled:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--disabled); --color--border: var(--l--theme--radio-button-control--color--border--on-default--disabled); --color--content: var(--l--theme--radio-button-control--color--content--on-default--disabled); } &:has(input[type="radio"]:disabled:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--disabled-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--disabled-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--disabled-checked); } &:has(input[type="radio"]:focus-visible:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--focus); --color--border: var(--l--theme--radio-button-control--color--border--on-default--focus); --color--content: var(--l--theme--radio-button-control--color--content--on-default--focus); } &:has(input[type="radio"]:focus-visible:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--focus-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--focus-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--focus-checked); } &:has(input[type="radio"]:hover:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--hover); --color--border: var(--l--theme--radio-button-control--color--border--on-default--hover); --color--content: var(--l--theme--radio-button-control--color--content--on-default--hover); } &:has(input[type="radio"]:hover:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--hover-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--hover-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--hover-checked); } }@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--inner--block--xs); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--sm); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--md); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--lg); padding-inline: var(--l--theme--text-control--space--inner--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{background-color: var(--l--theme--text-control--color--background--on-default--rest); border-color: var(--l--theme--text-control--color--border--on-default--rest); color: var(--l--theme--text-control--color--content--on-default--rest); &::-webkit-datetime-edit-ampm-field,&::-webkit-datetime-edit-day-field,&::-webkit-datetime-edit-hour-field,&::-webkit-datetime-edit-minute-field,&::-webkit-datetime-edit-month-field,&::-webkit-datetime-edit-second-field,&::-webkit-datetime-edit-text,&::-webkit-datetime-edit-week-field,&::-webkit-datetime-edit-year-field {color: var(--l--theme--text-control--color--content--on-default--rest);} &::placeholder {color: var(--l--theme--text-control--color--placeholder--on-default--rest);} &:focus-visible {background-color: var(--l--theme--text-control--color--background--on-default--focus); border-color: var(--l--theme--text-control--color--border--on-default--focus); color: var(--l--theme--text-control--color--content--on-default--focus);} &:hover {background-color: var(--l--theme--text-control--color--background--on-default--hover); border-color: var(--l--theme--text-control--color--border--on-default--hover); color: var(--l--theme--text-control--color--content--on-default--hover);} &:disabled {background-color: var(--l--theme--text-control--color--background--on-default--disabled); border-color: var(--l--theme--text-control--color--border--on-default--disabled); color: var(--l--theme--text-control--color--content--on-default--disabled);} &:disabled::placeholder {color: var(--l--theme--text-control--color--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-link-color-content-primary{color: var(--l--theme--link--color--content--primary--on-default--rest); &:hover {color: var(--l--theme--link--color--content--primary--on-default--hover);} &:focus-visible {color: var(--l--theme--link--color--content--primary--on-default--focus);} &:active {color: var(--l--theme--link--color--content--primary--on-default--active);} &:visited {color: var(--l--theme--link--color--content--primary--on-default--visited);}}@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-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-blockquote{font-family: var(--l--theme--blockquote--typography--font-family); font-size: var(--l--theme--blockquote--typography--font-size); font-style: var(--l--theme--blockquote--typography--font-style); font-variant-caps: var(--l--theme--blockquote--typography--font-variant-caps); font-weight: var(--l--theme--blockquote--typography--font-weight); letter-spacing: var(--l--theme--blockquote--typography--letter-spacing); line-height: var(--l--theme--blockquote--typography--line-height); text-transform: var(--l--theme--blockquote--typography--text-transform);}@define-mixin is-typography-caption{font-family: var(--l--theme--typography--caption--font-family); font-size: var(--l--theme--typography--caption--font-size); font-style: var(--l--theme--typography--caption--font-style); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps); font-weight: var(--l--theme--typography--caption--font-weight); letter-spacing: var(--l--theme--typography--caption--letter-spacing); line-height: var(--l--theme--typography--caption--line-height); text-transform: var(--l--theme--typography--caption--text-transform);}@define-mixin is-typography-caption-attribution{font-family: var(--l--theme--typography--caption-attribution--font-family); font-size: var(--l--theme--typography--caption-attribution--font-size); font-style: var(--l--theme--typography--caption-attribution--font-style); font-variant-caps: var(--l--theme--typography--caption-attribution--font-variant-caps); font-weight: var(--l--theme--typography--caption-attribution--font-weight); letter-spacing: var(--l--theme--typography--caption-attribution--letter-spacing); line-height: var(--l--theme--typography--caption-attribution--line-height); text-transform: var(--l--theme--typography--caption-attribution--text-transform);}@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-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--inner--block--xs); padding-inline: var(--l--theme--button--space--inner--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--inner--block--sm); padding-inline: var(--l--theme--button--space--inner--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--inner--block--md); padding-inline: var(--l--theme--button--space--inner--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--inner--block--lg); padding-inline: var(--l--theme--button--space--inner--inline--lg);}@define-mixin button-typography-xs{font-family: var(--l--theme--button--typography--font-family--xs); font-size: var(--l--theme--button--typography--font-size--xs); font-style: var(--l--theme--button--typography--font-style--xs); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--xs); font-weight: var(--l--theme--button--typography--font-weight--xs); letter-spacing: var(--l--theme--button--typography--letter-spacing--xs); line-height: var(--l--theme--button--typography--line-height--xs); text-transform: var(--l--theme--button--typography--text-transform--xs);}@define-mixin button-typography-sm{font-family: var(--l--theme--button--typography--font-family--sm); font-size: var(--l--theme--button--typography--font-size--sm); font-style: var(--l--theme--button--typography--font-style--sm); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--sm); font-weight: var(--l--theme--button--typography--font-weight--sm); letter-spacing: var(--l--theme--button--typography--letter-spacing--sm); line-height: var(--l--theme--button--typography--line-height--sm); text-transform: var(--l--theme--button--typography--text-transform--sm);}@define-mixin button-typography-md{font-family: var(--l--theme--button--typography--font-family--md); font-size: var(--l--theme--button--typography--font-size--md); font-style: var(--l--theme--button--typography--font-style--md); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--md); font-weight: var(--l--theme--button--typography--font-weight--md); letter-spacing: var(--l--theme--button--typography--letter-spacing--md); line-height: var(--l--theme--button--typography--line-height--md); text-transform: var(--l--theme--button--typography--text-transform--md);}@define-mixin button-typography-lg{font-family: var(--l--theme--button--typography--font-family--lg); font-size: var(--l--theme--button--typography--font-size--lg); font-style: var(--l--theme--button--typography--font-style--lg); font-variant-caps: var(--l--theme--button--typography--font-variant-caps--lg); font-weight: var(--l--theme--button--typography--font-weight--lg); letter-spacing: var(--l--theme--button--typography--letter-spacing--lg); line-height: var(--l--theme--button--typography--line-height--lg); text-transform: var(--l--theme--button--typography--text-transform--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--checkbox-control--color--background--on-default--rest); --color--border: var(--l--theme--checkbox-control--color--border--on-default--rest); --color--content: var(--l--theme--checkbox-control--color--content--on-default--rest); 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"]:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--checked); } &:has(input[type="checkbox"]:disabled:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--disabled); --color--border: var(--l--theme--checkbox-control--color--border--on-default--disabled); --color--content: var(--l--theme--checkbox-control--color--content--on-default--disabled); } &:has(input[type="checkbox"]:disabled:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--disabled-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--disabled-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--disabled-checked); } &:has(input[type="checkbox"]:focus-visible:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--focus); --color--border: var(--l--theme--checkbox-control--color--border--on-default--focus); --color--content: var(--l--theme--checkbox-control--color--content--on-default--focus); } &:has(input[type="checkbox"]:focus-visible:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--focus-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--focus-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--focus-checked); } &:has(input[type="checkbox"]:hover:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--hover); --color--border: var(--l--theme--checkbox-control--color--border--on-default--hover); --color--content: var(--l--theme--checkbox-control--color--content--on-default--hover); } &:has(input[type="checkbox"]:hover:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--hover-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--hover-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--hover-checked); } &:has(input[type="checkbox"][aria-invalid="true"]:not(:checked)) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--invalid); --color--border: var(--l--theme--checkbox-control--color--border--on-default--invalid); --color--content: var(--l--theme--checkbox-control--color--content--on-default--invalid); } &:has(input[type="checkbox"][aria-invalid="true"]:checked) { --color--background: var(--l--theme--checkbox-control--color--background--on-default--invalid-checked); --color--border: var(--l--theme--checkbox-control--color--border--on-default--invalid-checked); --color--content: var(--l--theme--checkbox-control--color--content--on-default--invalid-checked); } }@define-mixin has-no-initial-underline{text-decoration-line: none; &:hover,&:active {text-decoration-line: underline; text-decoration-style: solid;}}@define-mixin radio-button-core{& input[type="radio"] {appearance: none;}}@define-mixin radio-button-shape{block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); display: grid; inline-size: var(--l--theme--radio-button-control--size); & input[type="radio"] {block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); border-style: var(--l--theme--radio-button-control--border--style); border-width: var(--l--theme--radio-button-control--border--width); grid-area: 1 / 1; inline-size: var(--l--theme--radio-button-control--size);} &::after {block-size: var(--l--theme--radio-button-control--size); border-radius: var(--l--theme--radio-button-control--border--radius); clip-path: circle(20.83% at 50% 50%); content: ""; grid-area: 1 / 1; inline-size: var(--l--theme--radio-button-control--size); pointer-events: none;}}@define-mixin radio-button-color{ --color--background: var(--l--theme--radio-button-control--color--background--on-default--rest); --color--border: var(--l--theme--radio-button-control--color--border--on-default--rest); --color--content: var(--l--theme--radio-button-control--color--content--on-default--rest); background-color: var(--color--background); & input[type="radio"] { border-color: var(--color--border); } &::after { background-color: var(--color--content); } &:has(input[type="radio"]:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--checked); } &:has(input[type="radio"]:disabled:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--disabled); --color--border: var(--l--theme--radio-button-control--color--border--on-default--disabled); --color--content: var(--l--theme--radio-button-control--color--content--on-default--disabled); } &:has(input[type="radio"]:disabled:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--disabled-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--disabled-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--disabled-checked); } &:has(input[type="radio"]:focus-visible:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--focus); --color--border: var(--l--theme--radio-button-control--color--border--on-default--focus); --color--content: var(--l--theme--radio-button-control--color--content--on-default--focus); } &:has(input[type="radio"]:focus-visible:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--focus-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--focus-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--focus-checked); } &:has(input[type="radio"]:hover:not(:checked)) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--hover); --color--border: var(--l--theme--radio-button-control--color--border--on-default--hover); --color--content: var(--l--theme--radio-button-control--color--content--on-default--hover); } &:has(input[type="radio"]:hover:checked) { --color--background: var(--l--theme--radio-button-control--color--background--on-default--hover-checked); --color--border: var(--l--theme--radio-button-control--color--border--on-default--hover-checked); --color--content: var(--l--theme--radio-button-control--color--content--on-default--hover-checked); } }@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--inner--block--xs); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--sm); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--md); padding-inline: var(--l--theme--text-control--space--inner--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--inner--block--lg); padding-inline: var(--l--theme--text-control--space--inner--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{background-color: var(--l--theme--text-control--color--background--on-default--rest); border-color: var(--l--theme--text-control--color--border--on-default--rest); color: var(--l--theme--text-control--color--content--on-default--rest); &::-webkit-datetime-edit-ampm-field,&::-webkit-datetime-edit-day-field,&::-webkit-datetime-edit-hour-field,&::-webkit-datetime-edit-minute-field,&::-webkit-datetime-edit-month-field,&::-webkit-datetime-edit-second-field,&::-webkit-datetime-edit-text,&::-webkit-datetime-edit-week-field,&::-webkit-datetime-edit-year-field {color: var(--l--theme--text-control--color--content--on-default--rest);} &::placeholder {color: var(--l--theme--text-control--color--placeholder--on-default--rest);} &:focus-visible {background-color: var(--l--theme--text-control--color--background--on-default--focus); border-color: var(--l--theme--text-control--color--border--on-default--focus); color: var(--l--theme--text-control--color--content--on-default--focus);} &:hover {background-color: var(--l--theme--text-control--color--background--on-default--hover); border-color: var(--l--theme--text-control--color--border--on-default--hover); color: var(--l--theme--text-control--color--content--on-default--hover);} &:disabled {background-color: var(--l--theme--text-control--color--background--on-default--disabled); border-color: var(--l--theme--text-control--color--border--on-default--disabled); color: var(--l--theme--text-control--color--content--on-default--disabled);} &:disabled::placeholder {color: var(--l--theme--text-control--color--placeholder--on-default--disabled);}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@withlayers/mixins",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "Mixins layer",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Dmitry Mayorov",
|
|
@@ -19,6 +19,6 @@
|
|
|
19
19
|
"lint:css:fix": "stylelint \"src/**/*.css\" --fix"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@withlayers/tokens": "0.9.
|
|
22
|
+
"@withlayers/tokens": "0.9.2"
|
|
23
23
|
}
|
|
24
24
|
}
|