From 5998581aece7e3229aabf0c1c0994b2412bada22 Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Sun, 7 Sep 2025 09:41:07 +0530 Subject: [PATCH 1/5] wrap css in @layer components --- registry/nextjs/components/badge/badge.css | 300 ++++---- registry/nextjs/components/button/button.css | 147 ++-- registry/nextjs/components/card/card.css | 299 ++++---- registry/nextjs/components/column/column.css | 176 ++--- .../nextjs/components/container/container.css | 16 +- .../nextjs/components/dropdown/dropdown.css | 54 +- registry/nextjs/components/grid/grid.css | 444 ++++++------ .../nextjs/components/heading/heading.css | 12 +- .../components/icon-button/icon-button.css | 288 ++++---- registry/nextjs/components/icon/icon.css | 480 +++++++------ registry/nextjs/components/image/image.css | 680 +++++++++--------- .../nextjs/components/menu-item/menu-item.css | 110 +-- registry/nextjs/components/navbar/navbar.css | 114 +-- .../placeholder-block/placeholder-block.css | 16 +- registry/nextjs/components/row/row.css | 238 +++--- .../nextjs/components/section/section.css | 328 ++++----- registry/nextjs/components/select/select.css | 154 ++-- .../nextjs/components/snackbar/snackbar.css | 60 +- .../components/state-layer/state-layer.css | 96 +-- .../nextjs/components/sticker/sticker.css | 22 +- registry/nextjs/components/switch/switch.css | 58 +- .../nextjs/components/tab-link/tab-link.css | 40 +- .../nextjs/components/tab-menu/tab-menu.css | 28 +- registry/nextjs/components/tabs/tabs.css | 41 +- .../components/text-input/text-input.css | 164 ++--- .../theme-controller/theme-controller.css | 4 + registry/nextjs/components/theme/index.tsx | 56 +- registry/nextjs/components/theme/theme.css | 3 + 28 files changed, 2277 insertions(+), 2151 deletions(-) diff --git a/registry/nextjs/components/badge/badge.css b/registry/nextjs/components/badge/badge.css index c415a101..8588e3f8 100644 --- a/registry/nextjs/components/badge/badge.css +++ b/registry/nextjs/components/badge/badge.css @@ -1,149 +1,153 @@ -[data-lk-component="badge"] { - display: inline-flex; - padding: var(--lk-size-xs); - justify-content: center; - align-items: center; - gap: 10px; - border-radius: var(--lk-size-sm); - background: var(--LiftKit-Default-sys-light-surface-container, #eeedf8); - font-size: var(--lk-size-md); - position: relative; - overflow: hidden; - - [data-lk-slot="icon"] { +@layer components { + + [data-lk-component="badge"] { + display: inline-flex; + padding: var(--lk-size-xs); + justify-content: center; + align-items: center; + gap: 10px; + border-radius: var(--lk-size-sm); + background: var(--LiftKit-Default-sys-light-surface-container, #eeedf8); + font-size: var(--lk-size-md); position: relative; - z-index: 1; - } -} - -/* Scale modifiers */ -[data-lk-badge-scale="md"] { - font-size: var(--lk-size-md); -} - -[data-lk-badge-scale="lg"] { - font-size: var(--lk-size-lg); -} - -/* Color modifiers */ -[data-lk-badge-color="lk-primary"] { - background-color: var(--lk-primary); - color: var(--lk-onprimary); -} - -[data-lk-badge-color="lk-secondary"] { - background-color: var(--lk-secondary); - color: var(--lk-onsecondary); -} - -[data-lk-badge-color="lk-tertiary"] { - background-color: var(--lk-tertiary); - color: var(--lk-ontertiary); -} - -[data-lk-badge-color="lk-error"] { - background-color: var(--lk-error); - color: var(--lk-onerror); -} - -[data-lk-badge-color="lk-warning"] { - background-color: var(--lk-warning); - color: var(--lk-onwarning); -} - -[data-lk-badge-color="lk-success"] { - background-color: var(--lk-success); - color: var(--lk-onsuccess); -} - -[data-lk-badge-color="lk-info"] { - background-color: var(--lk-info); - color: var(--lk-oninfo); -} - -[data-lk-badge-color="lk-surface"] { - background-color: var(--lk-surface); - color: var(--lk-onsurface); -} - -[data-lk-badge-color="lk-inverse"] { - background-color: var(--lk-inverseprimary); - color: var(--lk-inverseonsurface); -} - -[data-lk-badge-color="lk-primarycontainer"] { - background-color: var(--lk-primarycontainer); - color: var(--lk-onprimarycontainer); -} - -[data-lk-badge-color="lk-secondarycontainer"] { - background-color: var(--lk-secondarycontainer); - color: var(--lk-onsecondarycontainer); -} - -[data-lk-badge-color="lk-tertiarycontainer"] { - background-color: var(--lk-tertiarycontainer); - color: var(--lk-ontertiarycontainer); -} - -[data-lk-badge-color="lk-errorcontainer"] { - background-color: var(--lk-errorcontainer); - color: var(--lk-onerrorcontainer); -} - -[data-lk-badge-color="lk-warningcontainer"] { - background-color: var(--lk-warningcontainer); - color: var(--lk-onwarningcontainer); -} - -[data-lk-badge-color="lk-successcontainer"] { - background-color: var(--lk-successcontainer); - color: var(--lk-onsuccesscontainer); -} - -[data-lk-badge-color="lk-infocontainer"] { - background-color: var(--lk-infocontainer); - color: var(--lk-oninfocontainer); -} - -[data-lk-badge-color="lk-surfacecontainerlowest"] { - background-color: var(--lk-surfacecontainerlowest); - color: var(--lk-onbackground); -} - -[data-lk-badge-color="lk-surfacecontainerlow"] { - background-color: var(--lk-surfacecontainerlow); - color: var(--lk-onbackground); -} - -[data-lk-badge-color="lk-surfacecontainer"] { - background-color: var(--lk-surfacecontainer); - color: var(--lk-onbackground); -} - -[data-lk-badge-color="lk-surfacecontainerhigh"] { - background-color: var(--lk-surfacecontainerhigh); - color: var(--lk-onbackground); -} - -[data-lk-badge-color="lk-surfacecontainerhighest"] { - background-color: var(--lk-surfacecontainerhighest); - color: var(--lk-onbackground); -} - -[data-lk-badge-color="lk-surfacevariant"] { - background-color: var(--lk-surfacevariant); - color: var(--lk-onsurfacevariant); -} - -[data-lk-badge-color="lk-inversesurface"] { - background-color: var(--lk-inversesurface); - color: var(--lk-inverseonsurface); -} - -[data-lk-component="badge-scrim"] { - position: absolute; - inset: 0; - z-index: 0; - opacity: 0.1; -} + overflow: hidden; + + [data-lk-slot="icon"] { + position: relative; + z-index: 1; + } + } + + /* Scale modifiers */ + [data-lk-badge-scale="md"] { + font-size: var(--lk-size-md); + } + + [data-lk-badge-scale="lg"] { + font-size: var(--lk-size-lg); + } + + /* Color modifiers */ + [data-lk-badge-color="lk-primary"] { + background-color: var(--lk-primary); + color: var(--lk-onprimary); + } + + [data-lk-badge-color="lk-secondary"] { + background-color: var(--lk-secondary); + color: var(--lk-onsecondary); + } + + [data-lk-badge-color="lk-tertiary"] { + background-color: var(--lk-tertiary); + color: var(--lk-ontertiary); + } + + [data-lk-badge-color="lk-error"] { + background-color: var(--lk-error); + color: var(--lk-onerror); + } + + [data-lk-badge-color="lk-warning"] { + background-color: var(--lk-warning); + color: var(--lk-onwarning); + } + + [data-lk-badge-color="lk-success"] { + background-color: var(--lk-success); + color: var(--lk-onsuccess); + } + + [data-lk-badge-color="lk-info"] { + background-color: var(--lk-info); + color: var(--lk-oninfo); + } + + [data-lk-badge-color="lk-surface"] { + background-color: var(--lk-surface); + color: var(--lk-onsurface); + } + + [data-lk-badge-color="lk-inverse"] { + background-color: var(--lk-inverseprimary); + color: var(--lk-inverseonsurface); + } + + [data-lk-badge-color="lk-primarycontainer"] { + background-color: var(--lk-primarycontainer); + color: var(--lk-onprimarycontainer); + } + + [data-lk-badge-color="lk-secondarycontainer"] { + background-color: var(--lk-secondarycontainer); + color: var(--lk-onsecondarycontainer); + } + + [data-lk-badge-color="lk-tertiarycontainer"] { + background-color: var(--lk-tertiarycontainer); + color: var(--lk-ontertiarycontainer); + } + + [data-lk-badge-color="lk-errorcontainer"] { + background-color: var(--lk-errorcontainer); + color: var(--lk-onerrorcontainer); + } + + [data-lk-badge-color="lk-warningcontainer"] { + background-color: var(--lk-warningcontainer); + color: var(--lk-onwarningcontainer); + } + + [data-lk-badge-color="lk-successcontainer"] { + background-color: var(--lk-successcontainer); + color: var(--lk-onsuccesscontainer); + } + + [data-lk-badge-color="lk-infocontainer"] { + background-color: var(--lk-infocontainer); + color: var(--lk-oninfocontainer); + } + + [data-lk-badge-color="lk-surfacecontainerlowest"] { + background-color: var(--lk-surfacecontainerlowest); + color: var(--lk-onbackground); + } + + [data-lk-badge-color="lk-surfacecontainerlow"] { + background-color: var(--lk-surfacecontainerlow); + color: var(--lk-onbackground); + } + + [data-lk-badge-color="lk-surfacecontainer"] { + background-color: var(--lk-surfacecontainer); + color: var(--lk-onbackground); + } + + [data-lk-badge-color="lk-surfacecontainerhigh"] { + background-color: var(--lk-surfacecontainerhigh); + color: var(--lk-onbackground); + } + + [data-lk-badge-color="lk-surfacecontainerhighest"] { + background-color: var(--lk-surfacecontainerhighest); + color: var(--lk-onbackground); + } + + [data-lk-badge-color="lk-surfacevariant"] { + background-color: var(--lk-surfacevariant); + color: var(--lk-onsurfacevariant); + } + + [data-lk-badge-color="lk-inversesurface"] { + background-color: var(--lk-inversesurface); + color: var(--lk-inverseonsurface); + } + + [data-lk-component="badge-scrim"] { + position: absolute; + inset: 0; + z-index: 0; + opacity: 0.1; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/button/button.css b/registry/nextjs/components/button/button.css index 56af399c..e04fdc50 100644 --- a/registry/nextjs/components/button/button.css +++ b/registry/nextjs/components/button/button.css @@ -1,64 +1,66 @@ -[data-lk-component="button"] { - /* DEFAULTS */ - --button-font-size: var(--body-font-size); - --button-line-height: var(--lk-halfstep) !important; - --button-padX: var(--button-font-size); - --button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless))); - --button-padX-sideWithIcon: calc(var(--button-font-size) / var(--lk-wholestep)); - --button-gap: calc(var(--button-padY) / var(--lk-eighthstep)); - cursor: pointer; - - display: inline-flex; - vertical-align: middle; - border: 1px solid rgba(0, 0, 0, 0); - border-radius: 100em; - position: relative; - text-decoration: none; - white-space: pre; - word-break: keep-all; - overflow: hidden; - padding: var(--button-padY) 1em; - font-weight: 500; - font-size: var(--button-font-size); - line-height: var(--button-line-height); - font-family: inherit; -} - -/* SIZE VARIANTS */ -[data-lk-button-size="sm"] { - --button-font-size: var(--subheading-font-size); -} - -[data-lk-button-size="lg"] { - --button-font-size: var(--title3-font-size); -} - -/* ICON-BASED PADDING ADJUSTMENTS */ -[data-lk-component="button"]:has([data-lk-icon-position="start"]) { - padding-left: var(--button-padX-sideWithIcon); - padding-right: var(--button-padX); -} - -[data-lk-component="button"]:has([data-lk-icon-position="end"]) { - padding-left: 1em; - padding-right: var(--button-padX-sideWithIcon); -} - -[data-lk-component="button"]:has([data-lk-icon-position="start"]):has([data-lk-icon-position="end"]) { - padding-left: var(--button-padX-sideWithIcon); - padding-right: var(--button-padX-sideWithIcon); -} - -/* CONTENT WRAPPER */ -[data-lk-button-content-wrap="true"] { - display: inline-flex; - align-items: center; - gap: var(--button-gap); -} +@layer components { + + [data-lk-component="button"] { + /* DEFAULTS */ + --button-font-size: var(--body-font-size); + --button-line-height: var(--lk-halfstep) !important; + --button-padX: var(--button-font-size); + --button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless))); + --button-padX-sideWithIcon: calc(var(--button-font-size) / var(--lk-wholestep)); + --button-gap: calc(var(--button-padY) / var(--lk-eighthstep)); + cursor: pointer; + + display: inline-flex; + vertical-align: middle; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 100em; + position: relative; + text-decoration: none; + white-space: pre; + word-break: keep-all; + overflow: hidden; + padding: var(--button-padY) 1em; + font-weight: 500; + font-size: var(--button-font-size); + line-height: var(--button-line-height); + font-family: inherit; + } + + /* SIZE VARIANTS */ + [data-lk-button-size="sm"] { + --button-font-size: var(--subheading-font-size); + } + + [data-lk-button-size="lg"] { + --button-font-size: var(--title3-font-size); + } + + /* ICON-BASED PADDING ADJUSTMENTS */ + [data-lk-component="button"]:has([data-lk-icon-position="start"]) { + padding-left: var(--button-padX-sideWithIcon); + padding-right: var(--button-padX); + } -/* TODO: Remove entirely */ + [data-lk-component="button"]:has([data-lk-icon-position="end"]) { + padding-left: 1em; + padding-right: var(--button-padX-sideWithIcon); + } -/* [data-lk-component="button"] div:has(> [data-lk-component="icon"]) { + [data-lk-component="button"]:has([data-lk-icon-position="start"]):has([data-lk-icon-position="end"]) { + padding-left: var(--button-padX-sideWithIcon); + padding-right: var(--button-padX-sideWithIcon); + } + + /* CONTENT WRAPPER */ + [data-lk-button-content-wrap="true"] { + display: inline-flex; + align-items: center; + gap: var(--button-gap); + } + + /* TODO: Remove entirely */ + + /* [data-lk-component="button"] div:has(> [data-lk-component="icon"]) { width: calc(1em * var(--lk-halfstep)); aspect-ratio: 1; display: flex; @@ -66,18 +68,21 @@ justify-content: center; } */ -/* ICON VERTICAL OPTICAL ALIGNMENTS */ + /* ICON VERTICAL OPTICAL ALIGNMENTS */ + + [data-lk-button-optic-icon-shift="true"] div:has(> [data-lk-component="icon"]) { + margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec))); + } + + /* STYLE VARIANTS */ -[data-lk-button-optic-icon-shift="true"] div:has(> [data-lk-component="icon"]) { - margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec))); -} + [data-lk-button-variant="text"] { + background: transparent !important; + } -/* STYLE VARIANTS */ + [data-lk-button-variant="outline"] { + background: transparent !important; + border: 1px solid var(--lk-outlinevariant); + } -[data-lk-button-variant="text"] { - background: transparent !important; -} -[data-lk-button-variant="outline"] { - background: transparent !important; - border: 1px solid var(--lk-outlinevariant); -} +} \ No newline at end of file diff --git a/registry/nextjs/components/card/card.css b/registry/nextjs/components/card/card.css index bd99b974..4e708af9 100644 --- a/registry/nextjs/components/card/card.css +++ b/registry/nextjs/components/card/card.css @@ -1,191 +1,194 @@ -[data-lk-component="card"] { - display: block; - overflow: hidden; - position: relative; +@layer components { - --local-offset-factor: calc( - var(--largest-child-font-size) / var(--largest-child-line-height) - ); /* The line height of the largest child */ - --largest-child-font-size: var(--body-font-size); - --largest-child-line-height: var(--body-line-height); + [data-lk-component="card"] { + display: block; + overflow: hidden; + position: relative; + + --local-offset-factor: calc(var(--largest-child-font-size) / var(--largest-child-line-height)); + /* The line height of the largest child */ + --largest-child-font-size: var(--body-font-size); + --largest-child-line-height: var(--body-line-height); - border-radius: var(--local-offset-factor); + border-radius: var(--local-offset-factor); - /* Modifies direct child text elements of the children slot (that way nested components like buttons + /* Modifies direct child text elements of the children slot (that way nested components like buttons don't inherit color blending props */ -} + } -/* Other material handling (that doesn't need to be nested) */ + /* Other material handling (that doesn't need to be nested) */ -[data-lk-card-variant="fill"] { -} + [data-lk-card-variant="fill"] {} -[data-lk-card-variant="outline"] { - background-color: transparent; - border: 1px solid var(--lk-outlinevariant); -} + [data-lk-card-variant="outline"] { + background-color: transparent; + border: 1px solid var(--lk-outlinevariant); + } -[data-lk-card-variant="transparent"] { - background-color: transparent; - border: none; -} + [data-lk-card-variant="transparent"] { + background-color: transparent; + border: none; + } -/* For each scale factor, recalculate largest child font size and line height so that padding can adjust */ + /* For each scale factor, recalculate largest child font size and line height so that padding can adjust */ -[data-lk-card-scale-factor="zero"] { - padding: 0; - border-radius: var(--lk-size-sm); -} + [data-lk-card-scale-factor="zero"] { + padding: 0; + border-radius: var(--lk-size-sm); + } -[data-lk-card-scale-factor="display1"] { - --largest-child-font-size: var(--display1-font-size); - --largest-child-line-height: var(--display1-line-height); - --opticCorrectedPadding: calc(var(--display1-font-size) / var(--display1-line-height)); - border-radius: var(--local-offset-factor); -} + [data-lk-card-scale-factor="display1"] { + --largest-child-font-size: var(--display1-font-size); + --largest-child-line-height: var(--display1-line-height); + --opticCorrectedPadding: calc(var(--display1-font-size) / var(--display1-line-height)); + border-radius: var(--local-offset-factor); + } -[data-lk-card-scale-factor="display2"] { - --largest-child-font-size: var(--display2-font-size); - --largest-child-line-height: var(--display2-line-height); - --opticCorrectedPadding: calc(var(--display2-font-size) / var(--display2-line-height)); -} + [data-lk-card-scale-factor="display2"] { + --largest-child-font-size: var(--display2-font-size); + --largest-child-line-height: var(--display2-line-height); + --opticCorrectedPadding: calc(var(--display2-font-size) / var(--display2-line-height)); + } -[data-lk-card-scale-factor="title1"] { - --largest-child-font-size: var(--title1-font-size); - --largest-child-line-height: var(--title1-line-height); - --opticCorrectedPadding: calc(var(--title1-font-size) / var(--title1-line-height)); -} + [data-lk-card-scale-factor="title1"] { + --largest-child-font-size: var(--title1-font-size); + --largest-child-line-height: var(--title1-line-height); + --opticCorrectedPadding: calc(var(--title1-font-size) / var(--title1-line-height)); + } -[data-lk-card-scale-factor="title2"] { - --largest-child-font-size: var(--title2-font-size); - --largest-child-line-height: var(--title2-line-height); - --opticCorrectedPadding: calc(var(--title2-font-size) / var(--title2-line-height)); -} + [data-lk-card-scale-factor="title2"] { + --largest-child-font-size: var(--title2-font-size); + --largest-child-line-height: var(--title2-line-height); + --opticCorrectedPadding: calc(var(--title2-font-size) / var(--title2-line-height)); + } -[data-lk-card-scale-factor="title3"] { - --largest-child-font-size: var(--title3-font-size); - --largest-child-line-height: var(--title3-line-height); - --opticCorrectedPadding: calc(var(--title3-font-size) / var(--title3-line-height)); -} + [data-lk-card-scale-factor="title3"] { + --largest-child-font-size: var(--title3-font-size); + --largest-child-line-height: var(--title3-line-height); + --opticCorrectedPadding: calc(var(--title3-font-size) / var(--title3-line-height)); + } -[data-lk-card-scale-factor="heading"] { - --largest-child-font-size: var(--heading-font-size); - --largest-child-line-height: var(--heading-line-height); - --opticCorrectedPadding: calc(var(--heading-font-size) / var(--heading-line-height)); -} + [data-lk-card-scale-factor="heading"] { + --largest-child-font-size: var(--heading-font-size); + --largest-child-line-height: var(--heading-line-height); + --opticCorrectedPadding: calc(var(--heading-font-size) / var(--heading-line-height)); + } -[data-lk-card-scale-factor="subheading"] { - --largest-child-font-size: var(--subheading-font-size); - --largest-child-line-height: var(--subheading-line-height); - --opticCorrectedPadding: calc(var(--subheading-font-size) / var(--subheading-line-height)); -} + [data-lk-card-scale-factor="subheading"] { + --largest-child-font-size: var(--subheading-font-size); + --largest-child-line-height: var(--subheading-line-height); + --opticCorrectedPadding: calc(var(--subheading-font-size) / var(--subheading-line-height)); + } -[data-lk-card-scale-factor="body"] { - --largest-child-font-size: var(--body-font-size); - --largest-child-line-height: var(--body-line-height); - --opticCorrectedPadding: calc(var(--body-font-size) / var(--body-line-height)); -} + [data-lk-card-scale-factor="body"] { + --largest-child-font-size: var(--body-font-size); + --largest-child-line-height: var(--body-line-height); + --opticCorrectedPadding: calc(var(--body-font-size) / var(--body-line-height)); + } -[data-lk-card-scale-factor="callout"] { - --largest-child-font-size: var(--callout-font-size); - --largest-child-line-height: var(--callout-line-height); - --opticCorrectedPadding: calc(var(--callout-font-size) / var(--callout-line-height)); -} + [data-lk-card-scale-factor="callout"] { + --largest-child-font-size: var(--callout-font-size); + --largest-child-line-height: var(--callout-line-height); + --opticCorrectedPadding: calc(var(--callout-font-size) / var(--callout-line-height)); + } -[data-lk-card-scale-factor="label"] { - --largest-child-font-size: var(--label-font-size); - --largest-child-line-height: var(--label-line-height); - --opticCorrectedPadding: calc(var(--label-font-size) / var(--label-line-height)); -} + [data-lk-card-scale-factor="label"] { + --largest-child-font-size: var(--label-font-size); + --largest-child-line-height: var(--label-line-height); + --opticCorrectedPadding: calc(var(--label-font-size) / var(--label-line-height)); + } -[data-lk-card-scale-factor="caption"] { - --largest-child-font-size: var(--caption-font-size); - --largest-child-line-height: var(--caption-line-height); - --opticCorrectedPadding: calc(var(--caption-font-size) / var(--caption-line-height)); -} + [data-lk-card-scale-factor="caption"] { + --largest-child-font-size: var(--caption-font-size); + --largest-child-line-height: var(--caption-line-height); + --opticCorrectedPadding: calc(var(--caption-font-size) / var(--caption-line-height)); + } -[data-lk-card-scale-factor="capline"] { - --largest-child-font-size: var(--capline-font-size); - --largest-child-line-height: var(--capline-line-height); - --opticCorrectedPadding: calc(var(--capline-font-size) / var(--capline-line-height)); -} + [data-lk-card-scale-factor="capline"] { + --largest-child-font-size: var(--capline-font-size); + --largest-child-line-height: var(--capline-line-height); + --opticCorrectedPadding: calc(var(--capline-font-size) / var(--capline-line-height)); + } -[data-lk-card-material="flat"] { - backdrop-filter: none; -} + [data-lk-card-material="flat"] { + backdrop-filter: none; + } -.clickable { - cursor: pointer; - transition: box-shadow 0.2s ease; -} + .clickable { + cursor: pointer; + transition: box-shadow 0.2s ease; + } -.clickable:hover { - box-shadow: 0 0 0 2px var(--lk-primary, blue); -} + .clickable:hover { + box-shadow: 0 0 0 2px var(--lk-primary, blue); + } -/* [data-lk-card-material="rubber"] { */ -/* } */ + /* [data-lk-card-material="rubber"] { */ + /* } */ -/* Default padding behavior: equal on all sides */ -[data-lk-card-element="padding-box"] { - position: relative; - z-index: 1; - padding: var(--largest-child-font-size); - height: 100%; -} + /* Default padding behavior: equal on all sides */ + [data-lk-card-element="padding-box"] { + position: relative; + z-index: 1; + padding: var(--largest-child-font-size); + height: 100%; + } -[data-lk-card-element="padding-box"].overflow-auto { - position: relative; - z-index: 1; - padding: var(--largest-child-font-size); - height: 100%; - overflow: auto; -} + [data-lk-card-element="padding-box"].overflow-auto { + position: relative; + z-index: 1; + padding: var(--largest-child-font-size); + height: 100%; + overflow: auto; + } -[data-lk-card-optical-correction="left"] { - padding-left: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="left"] { + padding-left: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="right"] { - padding-right: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="right"] { + padding-right: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="top"] { - padding-top: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="top"] { + padding-top: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="bottom"] { - padding-bottom: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="bottom"] { + padding-bottom: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="x"] { - padding-left: var(--opticCorrectedPadding); - padding-right: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="x"] { + padding-left: var(--opticCorrectedPadding); + padding-right: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="y"] { - padding-top: var(--opticCorrectedPadding); - padding-bottom: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="y"] { + padding-top: var(--opticCorrectedPadding); + padding-bottom: var(--opticCorrectedPadding); + } -[data-lk-card-optical-correction="all"] { - padding: var(--opticCorrectedPadding); -} + [data-lk-card-optical-correction="all"] { + padding: var(--opticCorrectedPadding); + } -@media (prefers-color-scheme: dark) { - [data-lk-component="card"] { - /* Special material handling */ + @media (prefers-color-scheme: dark) { + [data-lk-component="card"] { + /* Special material handling */ + + /* Global material component behaviors are handled in universal/lib/css/material.css. But here, we're adding case-specific rules. */ + &[data-lk-card-material="glass"] { - /* Global material component behaviors are handled in universal/lib/css/material.css. But here, we're adding case-specific rules. */ - &[data-lk-card-material="glass"] { - /* Modifies direct child text elements of the children slot (that way nested components like buttons + /* Modifies direct child text elements of the children slot (that way nested components like buttons don't inherit color blending props */ - [data-lk-slot="children"] { - mix-blend-mode: plus-lighter; - color: var(--lk-onsurface); + [data-lk-slot="children"] { + mix-blend-mode: plus-lighter; + color: var(--lk-onsurface); + } } } } + } -/* TODO: Consider adding a 'tint' prop which would let you combine frosted glass effects with a slight color */ +/* TODO: Consider adding a 'tint' prop which would let you combine frosted glass effects with a slight color */ \ No newline at end of file diff --git a/registry/nextjs/components/column/column.css b/registry/nextjs/components/column/column.css index 133da6f9..3c135e4e 100644 --- a/registry/nextjs/components/column/column.css +++ b/registry/nextjs/components/column/column.css @@ -1,87 +1,91 @@ -[data-lk-component="column"] { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - gap: 0; - flex-wrap: nowrap; -} - -/* align-items variations */ -[data-lk-column-align-items="start"] { - align-items: flex-start; -} - -[data-lk-column-align-items="center"] { - align-items: center; -} - -[data-lk-column-align-items="end"] { - align-items: flex-end; -} - -[data-lk-column-align-items="stretch"] { - align-items: stretch; -} - -/* justify-content variations */ -[data-lk-column-justify-content="start"] { - justify-content: flex-start; -} - -[data-lk-column-justify-content="center"] { - justify-content: center; -} - -[data-lk-column-justify-content="end"] { - justify-content: flex-end; -} - -[data-lk-column-justify-content="space-between"] { - justify-content: space-between; -} - -[data-lk-column-justify-content="space-around"] { - justify-content: space-around; -} - -/* Gap */ -[data-lk-column-gap="3xs"] { - gap: var(--lk-size-3xs); -} - -[data-lk-column-gap="2xs"] { - gap: var(--lk-size-2xs); -} - -[data-lk-column-gap="xs"] { - gap: var(--lk-size-xs); -} - -[data-lk-column-gap="sm"] { - gap: var(--lk-size-sm); -} - -[data-lk-column-gap="md"] { - gap: var(--lk-size-md); -} - -[data-lk-column-gap="lg"] { - gap: var(--lk-size-lg); -} - -[data-lk-column-gap="xl"] { - gap: var(--lk-size-xl); -} - -[data-lk-column-gap="2xl"] { - gap: var(--lk-size-2xl); -} - -[data-lk-column-gap="3xl"] { - gap: var(--lk-size-3xl); -} - -[data-lk-column-gap="4xl"] { - gap: var(--lk-size-4xl); +@layer components { + + [data-lk-component="column"] { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: 0; + flex-wrap: nowrap; + } + + /* align-items variations */ + [data-lk-column-align-items="start"] { + align-items: flex-start; + } + + [data-lk-column-align-items="center"] { + align-items: center; + } + + [data-lk-column-align-items="end"] { + align-items: flex-end; + } + + [data-lk-column-align-items="stretch"] { + align-items: stretch; + } + + /* justify-content variations */ + [data-lk-column-justify-content="start"] { + justify-content: flex-start; + } + + [data-lk-column-justify-content="center"] { + justify-content: center; + } + + [data-lk-column-justify-content="end"] { + justify-content: flex-end; + } + + [data-lk-column-justify-content="space-between"] { + justify-content: space-between; + } + + [data-lk-column-justify-content="space-around"] { + justify-content: space-around; + } + + /* Gap */ + [data-lk-column-gap="3xs"] { + gap: var(--lk-size-3xs); + } + + [data-lk-column-gap="2xs"] { + gap: var(--lk-size-2xs); + } + + [data-lk-column-gap="xs"] { + gap: var(--lk-size-xs); + } + + [data-lk-column-gap="sm"] { + gap: var(--lk-size-sm); + } + + [data-lk-column-gap="md"] { + gap: var(--lk-size-md); + } + + [data-lk-column-gap="lg"] { + gap: var(--lk-size-lg); + } + + [data-lk-column-gap="xl"] { + gap: var(--lk-size-xl); + } + + [data-lk-column-gap="2xl"] { + gap: var(--lk-size-2xl); + } + + [data-lk-column-gap="3xl"] { + gap: var(--lk-size-3xl); + } + + [data-lk-column-gap="4xl"] { + gap: var(--lk-size-4xl); + } + } \ No newline at end of file diff --git a/registry/nextjs/components/container/container.css b/registry/nextjs/components/container/container.css index 17818711..1f766c8b 100644 --- a/registry/nextjs/components/container/container.css +++ b/registry/nextjs/components/container/container.css @@ -1,6 +1,10 @@ -[lk-component="container"] { - margin-left: auto; - margin-right: auto; - width: 100%; - max-width: var(--lk-container-max-width, 100%); -} +@layer components { + + [data-lk-component="container"] { + margin-left: auto; + margin-right: auto; + width: 100%; + max-width: var(--lk-container-max-width, 100%); + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/dropdown/dropdown.css b/registry/nextjs/components/dropdown/dropdown.css index 7594032b..b5ac8fb8 100644 --- a/registry/nextjs/components/dropdown/dropdown.css +++ b/registry/nextjs/components/dropdown/dropdown.css @@ -1,35 +1,39 @@ -[data-lk-component="dropdown-menu"] { - position: absolute; - z-index: 1000; - transform: scale(0%); +@layer components { - transition: transform 0.3s ease-out; + [data-lk-component="dropdown-menu"] { + position: absolute; + z-index: 1000; + transform: scale(0%); - &[data-isactive="true"] { - transform: scale(100%); - } + transition: transform 0.3s ease-out; - &[data-lk-dropdown-trigger-quadrant="top-left"] { - transform: translate(0%, -100%); - transform-origin: top left; + &[data-isactive="true"] { + transform: scale(100%); + } - } + &[data-lk-dropdown-trigger-quadrant="top-left"] { + transform: translate(0%, -100%); + transform-origin: top left; - &[data-lk-dropdown-trigger-quadrant="top-right"] { - transform: translate(-100%, -100%); - transform-origin: top right; - - } + } - &[data-lk-dropdown-trigger-quadrant="bottom-right"] { - transform: translate(-100%, 0%); - transform-origin: bottom right; + &[data-lk-dropdown-trigger-quadrant="top-right"] { + transform: translate(-100%, -100%); + transform-origin: top right; - } + } - &[data-lk-dropdown-trigger-quadrant="bottom-left"] { - transform: translate(0%, 0%); - transform-origin: bottom left; + &[data-lk-dropdown-trigger-quadrant="bottom-right"] { + transform: translate(-100%, 0%); + transform-origin: bottom right; + } + + &[data-lk-dropdown-trigger-quadrant="bottom-left"] { + transform: translate(0%, 0%); + transform-origin: bottom left; + + } } -} + +} \ No newline at end of file diff --git a/registry/nextjs/components/grid/grid.css b/registry/nextjs/components/grid/grid.css index e11c0550..f98feca2 100644 --- a/registry/nextjs/components/grid/grid.css +++ b/registry/nextjs/components/grid/grid.css @@ -1,258 +1,262 @@ -/* ============================================= */ -/* Component: Grid */ -/* Description: Basic responsive grid container */ -/* Default: 2 columns, 1 row, gap md, auto rows */ -/* ============================================= */ -[data-lk-component="grid"] { - display: grid; - grid-template-columns: repeat(2, 1fr); - /* default: 2 columns */ - grid-template-rows: auto; - /* default: 1 row, auto height */ - gap: var(--lk-size-md); - /* default spacing */ -} - -/* Sets the number of columns in the grid */ -[data-lk-component="grid"][data-lk-grid-columns="1"] { - grid-template-columns: repeat(1, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="2"] { - grid-template-columns: repeat(2, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="3"] { - grid-template-columns: repeat(3, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="4"] { - grid-template-columns: repeat(4, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="5"] { - grid-template-columns: repeat(5, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="6"] { - grid-template-columns: repeat(6, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="7"] { - grid-template-columns: repeat(7, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="8"] { - grid-template-columns: repeat(8, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="9"] { - grid-template-columns: repeat(9, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="10"] { - grid-template-columns: repeat(10, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="11"] { - grid-template-columns: repeat(11, 1fr); -} - -[data-lk-component="grid"][data-lk-grid-columns="12"] { - grid-template-columns: repeat(12, 1fr); -} - -/* Enables auto-fitting columns with a default minmax range */ -[data-lk-component="grid"][data-lk-grid-minmax="true"] { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} - -/* Overrides default min width in minmax range */ -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xs"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xs), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xs"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xs), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xs"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xs), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="sm"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-sm), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="md"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-md), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="lg"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-lg), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xl"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xl), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xl"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xl), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xl"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xl), 1fr)); -} - -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="4xl"] { - grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-4xl), 1fr)); -} - -/* Overrides default max width in minmax range */ -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xs"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xs))); -} +@layer components { + + /* ============================================= */ + /* Component: Grid */ + /* Description: Basic responsive grid container */ + /* Default: 2 columns, 1 row, gap md, auto rows */ + /* ============================================= */ + [data-lk-component="grid"] { + display: grid; + grid-template-columns: repeat(2, 1fr); + /* default: 2 columns */ + grid-template-rows: auto; + /* default: 1 row, auto height */ + gap: var(--lk-size-md); + /* default spacing */ + } + + /* Sets the number of columns in the grid */ + [data-lk-component="grid"][data-lk-grid-columns="1"] { + grid-template-columns: repeat(1, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="2"] { + grid-template-columns: repeat(2, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="3"] { + grid-template-columns: repeat(3, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="4"] { + grid-template-columns: repeat(4, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="5"] { + grid-template-columns: repeat(5, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="6"] { + grid-template-columns: repeat(6, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="7"] { + grid-template-columns: repeat(7, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="8"] { + grid-template-columns: repeat(8, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="9"] { + grid-template-columns: repeat(9, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="10"] { + grid-template-columns: repeat(10, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="11"] { + grid-template-columns: repeat(11, 1fr); + } + + [data-lk-component="grid"][data-lk-grid-columns="12"] { + grid-template-columns: repeat(12, 1fr); + } + + /* Enables auto-fitting columns with a default minmax range */ + [data-lk-component="grid"][data-lk-grid-minmax="true"] { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + + /* Overrides default min width in minmax range */ + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xs"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xs), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xs"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xs), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xs"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xs), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="sm"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-sm), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="md"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-md), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="lg"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-lg), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xl"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xl), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xl"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xl), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xl"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xl), 1fr)); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="4xl"] { + grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-4xl), 1fr)); + } + + /* Overrides default max width in minmax range */ + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xs"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xs))); + } + + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xs"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xs))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xs"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xs))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xs"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xs))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xs"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xs))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="sm"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-sm))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="sm"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-sm))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="md"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-md))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="md"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-md))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="lg"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-lg))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="lg"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-lg))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xl"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xl))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xl"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xl))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xl"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xl))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xl"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xl))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xl"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xl))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xl"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xl))); -} + [data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="4xl"] { + grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-4xl))); + } -[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="4xl"] { - grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-4xl))); -} + /* Collapse to single column on mobile viewports (portrait) */ + @media (max-width: 480px) { + [data-lk-component="grid"][data-lk-grid-auto-responsive="true"] { + grid-template-columns: 1fr !important; + } -/* Collapse to single column on mobile viewports (portrait) */ -@media (max-width: 480px) { - [data-lk-component="grid"][data-lk-grid-auto-responsive="true"] { - grid-template-columns: 1fr !important; + /* Force all children to single span (use !important to override combinations) */ + [data-lk-component="grid"][data-lk-grid-auto-responsive="true"]>* { + grid-column: span 1 !important; + } } - /* Force all children to single span (use !important to override combinations) */ - [data-lk-component="grid"][data-lk-grid-auto-responsive="true"]>* { - grid-column: span 1 !important; + /* Sets gap using LiftKit spacing scale */ + [data-lk-component="grid"][data-lk-grid-gap="3xs"] { + gap: var(--lk-size-3xs); } -} -/* Sets gap using LiftKit spacing scale */ -[data-lk-component="grid"][data-lk-grid-gap="3xs"] { - gap: var(--lk-size-3xs); -} + [data-lk-component="grid"][data-lk-grid-gap="2xs"] { + gap: var(--lk-size-2xs); + } -[data-lk-component="grid"][data-lk-grid-gap="2xs"] { - gap: var(--lk-size-2xs); -} + [data-lk-component="grid"][data-lk-grid-gap="xs"] { + gap: var(--lk-size-xs); + } -[data-lk-component="grid"][data-lk-grid-gap="xs"] { - gap: var(--lk-size-xs); -} + [data-lk-component="grid"][data-lk-grid-gap="sm"] { + gap: var(--lk-size-sm); + } -[data-lk-component="grid"][data-lk-grid-gap="sm"] { - gap: var(--lk-size-sm); -} + [data-lk-component="grid"][data-lk-grid-gap="md"] { + gap: var(--lk-size-md); + } -[data-lk-component="grid"][data-lk-grid-gap="md"] { - gap: var(--lk-size-md); -} + [data-lk-component="grid"][data-lk-grid-gap="lg"] { + gap: var(--lk-size-lg); + } -[data-lk-component="grid"][data-lk-grid-gap="lg"] { - gap: var(--lk-size-lg); -} + [data-lk-component="grid"][data-lk-grid-gap="xl"] { + gap: var(--lk-size-xl); + } -[data-lk-component="grid"][data-lk-grid-gap="xl"] { - gap: var(--lk-size-xl); -} + [data-lk-component="grid"][data-lk-grid-gap="2xl"] { + gap: var(--lk-size-2xl); + } -[data-lk-component="grid"][data-lk-grid-gap="2xl"] { - gap: var(--lk-size-2xl); -} + [data-lk-component="grid"][data-lk-grid-gap="3xl"] { + gap: var(--lk-size-3xl); + } -[data-lk-component="grid"][data-lk-grid-gap="3xl"] { - gap: var(--lk-size-3xl); -} + [data-lk-component="grid"][data-lk-grid-gap="4xl"] { + gap: var(--lk-size-4xl); + } -[data-lk-component="grid"][data-lk-grid-gap="4xl"] { - gap: var(--lk-size-4xl); -} + /* THESE ARE FOR WEBFLOW ONLY */ -/* THESE ARE FOR WEBFLOW ONLY */ + /* Show only the first 1 slot */ + [data-lk-component="grid"][data-lk-grid-slots-to-show="1"]>[data-lk-element="slot"]:nth-of-type(n + 2) { + display: none; + } -/* Show only the first 1 slot */ -[data-lk-component="grid"][data-lk-grid-slots-to-show="1"]>[data-lk-element="slot"]:nth-of-type(n + 2) { - display: none; -} + /* Show only the first 2 slots */ + [data-lk-component="grid"][data-lk-grid-slots-to-show="2"]>[data-lk-element="slot"]:nth-of-type(n + 3) { + display: none; + } -/* Show only the first 2 slots */ -[data-lk-component="grid"][data-lk-grid-slots-to-show="2"]>[data-lk-element="slot"]:nth-of-type(n + 3) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="3"]>[data-lk-element="slot"]:nth-of-type(n + 4) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="3"]>[data-lk-element="slot"]:nth-of-type(n + 4) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="4"]>[data-lk-element="slot"]:nth-of-type(n + 5) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="4"]>[data-lk-element="slot"]:nth-of-type(n + 5) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="5"]>[data-lk-element="slot"]:nth-of-type(n + 6) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="5"]>[data-lk-element="slot"]:nth-of-type(n + 6) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="6"]>[data-lk-element="slot"]:nth-of-type(n + 7) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="6"]>[data-lk-element="slot"]:nth-of-type(n + 7) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="7"]>[data-lk-element="slot"]:nth-of-type(n + 8) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="7"]>[data-lk-element="slot"]:nth-of-type(n + 8) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="8"]>[data-lk-element="slot"]:nth-of-type(n + 9) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="8"]>[data-lk-element="slot"]:nth-of-type(n + 9) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="9"]>[data-lk-element="slot"]:nth-of-type(n + 10) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="9"]>[data-lk-element="slot"]:nth-of-type(n + 10) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="10"]>[data-lk-element="slot"]:nth-of-type(n + 11) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="10"]>[data-lk-element="slot"]:nth-of-type(n + 11) { - display: none; -} + [data-lk-component="grid"][data-lk-grid-slots-to-show="11"]>[data-lk-element="slot"]:nth-of-type(n + 12) { + display: none; + } -[data-lk-component="grid"][data-lk-grid-slots-to-show="11"]>[data-lk-element="slot"]:nth-of-type(n + 12) { - display: none; -} + /* No rule needed for 12 – all slots are shown by default */ -/* No rule needed for 12 – all slots are shown by default */ + .lk-debug--grid-override { + grid-template-columns: 0.5fr 1fr 0.5fr 2fr 0.5fr; -.lk-debug--grid-override { - grid-template-columns: 0.5fr 1fr 0.5fr 2fr 0.5fr; + } -} +} \ No newline at end of file diff --git a/registry/nextjs/components/heading/heading.css b/registry/nextjs/components/heading/heading.css index 72052ab6..18d1c08b 100644 --- a/registry/nextjs/components/heading/heading.css +++ b/registry/nextjs/components/heading/heading.css @@ -1,4 +1,8 @@ -[data-lk-component="heading"] { - display: block; - margin: 0; -} +@layer components { + + [data-lk-component="heading"] { + display: block; + margin: 0; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/icon-button/icon-button.css b/registry/nextjs/components/icon-button/icon-button.css index 01e861bf..c16c3763 100644 --- a/registry/nextjs/components/icon-button/icon-button.css +++ b/registry/nextjs/components/icon-button/icon-button.css @@ -1,28 +1,30 @@ -[data-lk-component="icon-button"] { - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - border-radius: 100em; - /* border: 1px solid transparent; */ - padding: var(--lk-size-xs); - font-weight: 500; - background: none; - overflow: hidden; - cursor: pointer; -} +@layer components { -[data-lk-component="icon-button"]>[data-lk-button-content-wrap] { - display: flex; - justify-content: center; - align-items: center; -} + [data-lk-component="icon-button"] { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + border-radius: 100em; + /* border: 1px solid transparent; */ + padding: var(--lk-size-xs); + font-weight: 500; + background: none; + overflow: hidden; + cursor: pointer; + } + [data-lk-component="icon-button"]>[data-lk-button-content-wrap] { + display: flex; + justify-content: center; + align-items: center; + } -/* [data-lk-component="icon-button"]>[data-lk-component="state-layer"] { + + /* [data-lk-component="icon-button"]>[data-lk-component="state-layer"] { position: absolute; inset: 0; pointer-events: none; @@ -33,7 +35,7 @@ opacity 0.2s ease-out; } */ -/* STATE LAYER OPACITY + /* STATE LAYER OPACITY [data-lk-component="icon-button"]:hover>[data-lk-component="state-layer"] { opacity: 0.04; } @@ -43,7 +45,7 @@ opacity: 0.1; } */ -/* Size map + /* Size map [data-lk-icon-button-size="xs"] { font-size: var(--caption-font-size); } @@ -64,124 +66,126 @@ font-size: var(--title2-font-size); } */ -/* COLORS */ -[data-lk-icon-button-color="primary"] { - background-color: var(--lk-primary); - color: var(--lk-onprimary); -} - -[data-lk-icon-button-color="primarycontainer"] { - background-color: var(--lk-primarycontainer); - color: var(--lk-onprimarycontainer); -} - -[data-lk-icon-button-color="secondary"] { - background-color: var(--lk-secondary); - color: var(--lk-onsecondary); -} - -[data-lk-icon-button-color="secondarycontainer"] { - background-color: var(--lk-secondarycontainer); - color: var(--lk-onsecondarycontainer); -} - -[data-lk-icon-button-color="tertiary"] { - background-color: var(--lk-tertiary); - color: var(--lk-ontertiary); -} - -[data-lk-icon-button-color="tertiarycontainer"] { - background-color: var(--lk-tertiarycontainer); - color: var(--lk-ontertiarycontainer); -} - -[data-lk-icon-button-color="error"] { - background-color: var(--lk-error); - color: var(--lk-onerror); -} - -[data-lk-icon-button-color="errorcontainer"] { - background-color: var(--lk-errorcontainer); - color: var(--lk-onerrorcontainer); -} - -[data-lk-icon-button-color="success"] { - background-color: var(--lk-success); - color: var(--lk-onsuccess); -} - -[data-lk-icon-button-color="successcontainer"] { - background-color: var(--lk-successcontainer); - color: var(--lk-onsuccesscontainer); -} - -[data-lk-icon-button-color="warning"] { - background-color: var(--lk-warning); - color: var(--lk-onwarning); -} - -[data-lk-icon-button-color="warningcontainer"] { - background-color: var(--lk-warningcontainer); - color: var(--lk-onwarningcontainer); -} - -[data-lk-icon-button-color="info"] { - background-color: var(--lk-info); - color: var(--lk-oninfo); -} - -[data-lk-icon-button-color="infocontainer"] { - background-color: var(--lk-infocontainer); - color: var(--lk-oninfocontainer); -} - -[data-lk-icon-button-color="surface"] { - background-color: var(--lk-surface); - color: var(--lk-onsurface); -} - -[data-lk-icon-button-color="surfacecontainer"] { - background-color: var(--lk-surfacecontainer); - color: var(--lk-onsurfacecontainer); -} - -[data-lk-icon-button-color="surfacevariant"] { - background-color: var(--lk-surfacevariant); - color: var(--lk-onsurfacevariant); -} - -[data-lk-icon-button-color="surfacecontainerlowest"] { - background-color: var(--lk-surfacecontainerlowest); - color: var(--lk-onsurfacecontainerlowest); -} - -[data-lk-icon-button-color="surfacecontainerlow"] { - background-color: var(--lk-surfacecontainerlow); - color: var(--lk-onsurfacecontainerlow); -} - -[data-lk-icon-button-color="surfacecontainerhigh"] { - background-color: var(--lk-surfacecontainerhigh); - color: var(--lk-onsurfacecontainerhigh); -} - -[data-lk-icon-button-color="surfacecontainerhighest"] { - background-color: var(--lk-surfacecontainerhighest); - color: var(--lk-onsurfacecontainerhighest); -} - -[data-lk-icon-button-color="inversesurface"] { - background-color: var(--lk-inversesurface); - color: var(--lk-oninversesurface); -} - -/* VARIANT OUTLINE */ -[data-lk-icon-button-variant="outline"] { - border: solid 1px var(--lk-outlinevariant); - background-color: transparent; -} - -/* VARIANT TEXT */ -[data-lk-icon-button-variant="text"] { - background-color: transparent; -} + /* COLORS */ + [data-lk-icon-button-color="primary"] { + background-color: var(--lk-primary); + color: var(--lk-onprimary); + } + + [data-lk-icon-button-color="primarycontainer"] { + background-color: var(--lk-primarycontainer); + color: var(--lk-onprimarycontainer); + } + + [data-lk-icon-button-color="secondary"] { + background-color: var(--lk-secondary); + color: var(--lk-onsecondary); + } + + [data-lk-icon-button-color="secondarycontainer"] { + background-color: var(--lk-secondarycontainer); + color: var(--lk-onsecondarycontainer); + } + + [data-lk-icon-button-color="tertiary"] { + background-color: var(--lk-tertiary); + color: var(--lk-ontertiary); + } + + [data-lk-icon-button-color="tertiarycontainer"] { + background-color: var(--lk-tertiarycontainer); + color: var(--lk-ontertiarycontainer); + } + + [data-lk-icon-button-color="error"] { + background-color: var(--lk-error); + color: var(--lk-onerror); + } + + [data-lk-icon-button-color="errorcontainer"] { + background-color: var(--lk-errorcontainer); + color: var(--lk-onerrorcontainer); + } + + [data-lk-icon-button-color="success"] { + background-color: var(--lk-success); + color: var(--lk-onsuccess); + } + + [data-lk-icon-button-color="successcontainer"] { + background-color: var(--lk-successcontainer); + color: var(--lk-onsuccesscontainer); + } + + [data-lk-icon-button-color="warning"] { + background-color: var(--lk-warning); + color: var(--lk-onwarning); + } + + [data-lk-icon-button-color="warningcontainer"] { + background-color: var(--lk-warningcontainer); + color: var(--lk-onwarningcontainer); + } + + [data-lk-icon-button-color="info"] { + background-color: var(--lk-info); + color: var(--lk-oninfo); + } + + [data-lk-icon-button-color="infocontainer"] { + background-color: var(--lk-infocontainer); + color: var(--lk-oninfocontainer); + } + + [data-lk-icon-button-color="surface"] { + background-color: var(--lk-surface); + color: var(--lk-onsurface); + } + + [data-lk-icon-button-color="surfacecontainer"] { + background-color: var(--lk-surfacecontainer); + color: var(--lk-onsurfacecontainer); + } + + [data-lk-icon-button-color="surfacevariant"] { + background-color: var(--lk-surfacevariant); + color: var(--lk-onsurfacevariant); + } + + [data-lk-icon-button-color="surfacecontainerlowest"] { + background-color: var(--lk-surfacecontainerlowest); + color: var(--lk-onsurfacecontainerlowest); + } + + [data-lk-icon-button-color="surfacecontainerlow"] { + background-color: var(--lk-surfacecontainerlow); + color: var(--lk-onsurfacecontainerlow); + } + + [data-lk-icon-button-color="surfacecontainerhigh"] { + background-color: var(--lk-surfacecontainerhigh); + color: var(--lk-onsurfacecontainerhigh); + } + + [data-lk-icon-button-color="surfacecontainerhighest"] { + background-color: var(--lk-surfacecontainerhighest); + color: var(--lk-onsurfacecontainerhighest); + } + + [data-lk-icon-button-color="inversesurface"] { + background-color: var(--lk-inversesurface); + color: var(--lk-oninversesurface); + } + + /* VARIANT OUTLINE */ + [data-lk-icon-button-variant="outline"] { + border: solid 1px var(--lk-outlinevariant); + background-color: transparent; + } + + /* VARIANT TEXT */ + [data-lk-icon-button-variant="text"] { + background-color: transparent; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/icon/icon.css b/registry/nextjs/components/icon/icon.css index 301923f9..da6e4675 100644 --- a/registry/nextjs/components/icon/icon.css +++ b/registry/nextjs/components/icon/icon.css @@ -1,238 +1,242 @@ -[data-lk-component="icon"] { - width: calc(1em * var(--lk-halfstep)); - aspect-ratio: 1; - display: flex; - align-items: center; - justify-content: center; -} - -/* Regular families */ -[data-lk-icon-font-class="display1"] { - --lineHeightInEms: calc(1em * var(--lk-quarterstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --sm: calc(var(--lineHeightInEms) * calc(1 / var(--lk-halfstep))); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.022em; - font-size: var(--display1-font-size); - font-weight: 400; - line-height: var(--lk-quarterstep); -} - -[data-lk-icon-font-class="display2"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.022em; - font-size: var(--display2-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="title1"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.022em; - font-size: var(--title1-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="title2"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.02em; - font-size: var(--title2-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="title3"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.017em; - font-size: var(--title3-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="heading"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.014em; - font-size: var(--heading-font-size); - font-weight: 600; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="subheading"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.007em; - font-size: var(--subheading-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="body"] { - --lineHeightInEms: var(--title2-font-size); - --md: 1em; - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(1em * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.011em; - cursor: default; - font-size: 1em; - font-weight: 400; - line-height: var(--lk-wholestep); -} - -[data-lk-icon-font-class="callout"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.009em; - font-size: var(--callout-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="label"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.004em; - font-size: var(--label-font-size); - font-weight: 600; - line-height: var(--lk-halfstep); - position: static; -} - -[data-lk-icon-font-class="caption"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: -0.007em; - font-size: var(--caption-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -[data-lk-icon-font-class="capline"] { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); - - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - - letter-spacing: 0.0618em; - text-transform: uppercase; - font-size: var(--capline-font-size); - font-weight: 400; - line-height: var(--lk-halfstep); -} - -/* Ignore the width and aspect ratio rules when inside an icon-button component */ - -[data-lk-component="icon-button"] [data-lk-component="icon"] { - width: unset; - aspect-ratio: unset; -} - -[data-lk-icon-offset="true"] { - margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec))); -} +@layer components { + + [data-lk-component="icon"] { + width: calc(1em * var(--lk-halfstep)); + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + } + + /* Regular families */ + [data-lk-icon-font-class="display1"] { + --lineHeightInEms: calc(1em * var(--lk-quarterstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --sm: calc(var(--lineHeightInEms) * calc(1 / var(--lk-halfstep))); + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.022em; + font-size: var(--display1-font-size); + font-weight: 400; + line-height: var(--lk-quarterstep); + } + + [data-lk-icon-font-class="display2"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.022em; + font-size: var(--display2-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="title1"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.022em; + font-size: var(--title1-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="title2"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.02em; + font-size: var(--title2-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="title3"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.017em; + font-size: var(--title3-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="heading"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.014em; + font-size: var(--heading-font-size); + font-weight: 600; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="subheading"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.007em; + font-size: var(--subheading-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="body"] { + --lineHeightInEms: var(--title2-font-size); + --md: 1em; + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(1em * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.011em; + cursor: default; + font-size: 1em; + font-weight: 400; + line-height: var(--lk-wholestep); + } + + [data-lk-icon-font-class="callout"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.009em; + font-size: var(--callout-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="label"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.004em; + font-size: var(--label-font-size); + font-weight: 600; + line-height: var(--lk-halfstep); + position: static; + } + + [data-lk-icon-font-class="caption"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: -0.007em; + font-size: var(--caption-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + [data-lk-icon-font-class="capline"] { + --lineHeightInEms: calc(1em * var(--lk-halfstep)); + --md: var(--lineHeightInEms); + + --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + + --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + + letter-spacing: 0.0618em; + text-transform: uppercase; + font-size: var(--capline-font-size); + font-weight: 400; + line-height: var(--lk-halfstep); + } + + /* Ignore the width and aspect ratio rules when inside an icon-button component */ + + [data-lk-component="icon-button"] [data-lk-component="icon"] { + width: unset; + aspect-ratio: unset; + } + + [data-lk-icon-offset="true"] { + margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec))); + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/image/image.css b/registry/nextjs/components/image/image.css index f7950946..54c0fd18 100644 --- a/registry/nextjs/components/image/image.css +++ b/registry/nextjs/components/image/image.css @@ -1,351 +1,355 @@ -[data-lk-component="image"] { - display: block; - width: 100%; - height: auto; - object-fit: var(--lk-image-fit, fill); -} - -[data-lk-image-radius]:not([data-lk-image-radius="none"]):not([data-lk-image-radius="zero"]) { - border-radius: var(--lk-size-md); - overflow: hidden; -} - - -/* IMAGE RADII TESTING AREA - Remove for production */ -.radius-test-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - padding: 1rem; -} - -.radius-test-item { - border: 1px solid #ccc; - padding: 0.5rem; - background: #f9f9f9; - text-align: center; -} - -.radius-test-img { - width: 100%; - aspect-ratio: 1 / 1; - object-fit: cover; - display: block; -} - -.radius-test-caption { - margin-top: 0.5rem; - font-size: 0.875rem; - color: #333; -} - - -/* BORDER RADIUS +@layer components { + + [data-lk-component="image"] { + display: block; + width: 100%; + height: auto; + object-fit: var(--lk-image-fit, fill); + } + + [data-lk-image-radius]:not([data-lk-image-radius="none"]):not([data-lk-image-radius="zero"]) { + border-radius: var(--lk-size-md); + overflow: hidden; + } + + + /* IMAGE RADII TESTING AREA - Remove for production */ + .radius-test-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + padding: 1rem; + } + + .radius-test-item { + border: 1px solid #ccc; + padding: 0.5rem; + background: #f9f9f9; + text-align: center; + } + + .radius-test-img { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + display: block; + } + + .radius-test-caption { + margin-top: 0.5rem; + font-size: 0.875rem; + color: #333; + } + + + /* BORDER RADIUS The CSS pow() and round() functions may not work in many browsers yet because they're part of an experimental CSS spec (Values and Units Level 4) that lacks full support. I was unable to use var(--lk-size-2xl) as calculated with pow() and round(); */ -[data-lk-image-border-radius="3xs"] { - border-radius: var(--lk-size-3xs); - overflow: hidden; - -} - -[data-lk-image-border-radius="2xs"] { - border-radius: var(--lk-size-2xs); - overflow: hidden; -} - -[data-lk-image-border-radius="xs"] { - border-radius: var(--lk-size-xs); - overflow: hidden; -} - -[data-lk-image-border-radius="sm"] { - border-radius: var(--lk-size-sm); - overflow: hidden; -} - -[data-lk-image-border-radius="md"] { - border-radius: var(--lk-size-md); - overflow: hidden; -} - -[data-lk-image-border-radius="lg"] { - border-radius: var(--lk-size-lg); - overflow: hidden; -} - -[data-lk-image-border-radius="xl"] { - border-radius: var(--lk-size-xl); - overflow: hidden; -} - -[data-lk-image-border-radius="2xl"] { - border-radius: var(--lk-size-2xl); - overflow: hidden; -} - -[data-lk-image-border-radius="3xl"] { - border-radius: var(--lk-size-3xl); - overflow: hidden; -} - -[data-lk-image-border-radius="4xl"] { - border-radius: var(--lk-size-4xl); - overflow: hidden; -} - -/* IMAGE WIDTH AND HEIGHT TESTING AREA - Remove for production */ -.size-test-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - padding: 1rem; -} - -.size-test-item { - border: 1px solid #ccc; - padding: 0.5rem; - text-align: center; - background: #f5f5f5; -} - -.size-test-img { - object-fit: cover; - display: block; -} - -.size-test-caption { - margin-top: 0.5rem; - font-size: 0.875rem; - color: #333; -} - -/* IMAGE WIDTH */ -[data-lk-image-width="3xs"] { - width: var(--lk-size-3xs); - overflow: hidden; - -} - -[data-lk-image-width="2xs"] { - width: var(--lk-size-2xs); - overflow: hidden; -} - -[data-lk-image-width="xs"] { - width: var(--lk-size-xs); - overflow: hidden; -} - -[data-lk-image-width="sm"] { - width: var(--lk-size-sm); - overflow: hidden; -} - -[data-lk-image-width="md"] { - width: var(--lk-size-md); - overflow: hidden; -} - -[data-lk-image-width="lg"] { - width: var(--lk-size-lg); - overflow: hidden; -} - -[data-lk-image-width="xl"] { - width: var(--lk-size-xl); - overflow: hidden; -} - -[data-lk-image-width="2xl"] { - width: var(--lk-size-2xl); - overflow: hidden; -} - -[data-lk-image-width="3xl"] { - width: var(--lk-size-3xl); - overflow: hidden; -} - -[data-lk-image-width="4xl"] { - width: var(--lk-size-4xl); - overflow: hidden; -} - -/* IMAGE HEIGHT */ -[data-lk-image-height="3xs"] { - height: var(--lk-size-3xs); - overflow: hidden; - -} - -[data-lk-image-height="2xs"] { - height: var(--lk-size-2xs); - overflow: hidden; -} - -[data-lk-image-height="xs"] { - height: var(--lk-size-xs); - overflow: hidden; -} - -[data-lk-image-height="sm"] { - height: var(--lk-size-sm); - overflow: hidden; -} - -[data-lk-image-height="md"] { - height: var(--lk-size-md); - overflow: hidden; -} - -[data-lk-image-height="lg"] { - height: var(--lk-size-lg); - overflow: hidden; -} - -[data-lk-image-height="xl"] { - height: var(--lk-size-xl); - overflow: hidden; -} - -[data-lk-image-height="2xl"] { - height: var(--lk-size-2xl); - overflow: hidden; -} - -[data-lk-image-height="3xl"] { - height: var(--lk-size-3xl); - overflow: hidden; -} - -[data-lk-image-height="4xl"] { - height: var(--lk-size-4xl); - overflow: hidden; -} - - -/* OBJECT-FIT TESTING AREA - Remove for production */ -.objectfit-test-grid { - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - - figure { + [data-lk-image-border-radius="3xs"] { + border-radius: var(--lk-size-3xs); + overflow: hidden; + + } + + [data-lk-image-border-radius="2xs"] { + border-radius: var(--lk-size-2xs); + overflow: hidden; + } + + [data-lk-image-border-radius="xs"] { + border-radius: var(--lk-size-xs); + overflow: hidden; + } + + [data-lk-image-border-radius="sm"] { + border-radius: var(--lk-size-sm); + overflow: hidden; + } + + [data-lk-image-border-radius="md"] { + border-radius: var(--lk-size-md); + overflow: hidden; + } + + [data-lk-image-border-radius="lg"] { + border-radius: var(--lk-size-lg); + overflow: hidden; + } + + [data-lk-image-border-radius="xl"] { + border-radius: var(--lk-size-xl); + overflow: hidden; + } + + [data-lk-image-border-radius="2xl"] { + border-radius: var(--lk-size-2xl); + overflow: hidden; + } + + [data-lk-image-border-radius="3xl"] { + border-radius: var(--lk-size-3xl); + overflow: hidden; + } + + [data-lk-image-border-radius="4xl"] { + border-radius: var(--lk-size-4xl); + overflow: hidden; + } + + /* IMAGE WIDTH AND HEIGHT TESTING AREA - Remove for production */ + .size-test-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + padding: 1rem; + } + + .size-test-item { border: 1px solid #ccc; padding: 0.5rem; text-align: center; - background: #f9f9f9; + background: #f5f5f5; + } + + .size-test-img { + object-fit: cover; + display: block; + } + + .size-test-caption { + margin-top: 0.5rem; + font-size: 0.875rem; + color: #333; + } + + /* IMAGE WIDTH */ + [data-lk-image-width="3xs"] { + width: var(--lk-size-3xs); + overflow: hidden; + + } + + [data-lk-image-width="2xs"] { + width: var(--lk-size-2xs); + overflow: hidden; + } + + [data-lk-image-width="xs"] { + width: var(--lk-size-xs); + overflow: hidden; + } + + [data-lk-image-width="sm"] { + width: var(--lk-size-sm); + overflow: hidden; + } + + [data-lk-image-width="md"] { + width: var(--lk-size-md); + overflow: hidden; + } + + [data-lk-image-width="lg"] { + width: var(--lk-size-lg); + overflow: hidden; + } + + [data-lk-image-width="xl"] { + width: var(--lk-size-xl); + overflow: hidden; + } + + [data-lk-image-width="2xl"] { + width: var(--lk-size-2xl); + overflow: hidden; + } + + [data-lk-image-width="3xl"] { + width: var(--lk-size-3xl); + overflow: hidden; + } + + [data-lk-image-width="4xl"] { + width: var(--lk-size-4xl); + overflow: hidden; + } + + /* IMAGE HEIGHT */ + [data-lk-image-height="3xs"] { + height: var(--lk-size-3xs); + overflow: hidden; + + } + + [data-lk-image-height="2xs"] { + height: var(--lk-size-2xs); + overflow: hidden; + } + + [data-lk-image-height="xs"] { + height: var(--lk-size-xs); + overflow: hidden; + } + + [data-lk-image-height="sm"] { + height: var(--lk-size-sm); + overflow: hidden; + } + + [data-lk-image-height="md"] { + height: var(--lk-size-md); + overflow: hidden; + } + + [data-lk-image-height="lg"] { + height: var(--lk-size-lg); + overflow: hidden; + } + + [data-lk-image-height="xl"] { + height: var(--lk-size-xl); + overflow: hidden; + } + + [data-lk-image-height="2xl"] { + height: var(--lk-size-2xl); + overflow: hidden; + } + + [data-lk-image-height="3xl"] { + height: var(--lk-size-3xl); + overflow: hidden; } - [data-lk-image-object-fit] { - width: 300px; - height: 300px; - background-color: #ddd; + [data-lk-image-height="4xl"] { + height: var(--lk-size-4xl); + overflow: hidden; } -} -/* OBJECT-FIT MAPPING + /* OBJECT-FIT TESTING AREA - Remove for production */ + .objectfit-test-grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + + figure { + border: 1px solid #ccc; + padding: 0.5rem; + text-align: center; + background: #f9f9f9; + } + + [data-lk-image-object-fit] { + width: 300px; + height: 300px; + background-color: #ddd; + } + } + + + /* OBJECT-FIT MAPPING Include inherit, initial, unset? */ -[data-lk-image-object-fit="cover"] { - object-fit: cover; -} - -[data-lk-image-object-fit="contain"] { - object-fit: contain; -} - -[data-lk-image-object-fit="fill"] { - object-fit: fill; -} - -[data-lk-image-object-fit="none"] { - object-fit: none; -} - -[data-lk-image-object-fit="scale-down"] { - object-fit: scale-down; -} - - - -/* ASPECT TESTING AREA - Remove for production */ -.aspect-test-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - padding: 1rem; -} - -.aspect-test-item { - border: 1px solid #ccc; - padding: 0.5rem; - text-align: center; - background: #fafafa; -} - -.aspect-test-img { - width: 100%; - height: auto; - object-fit: cover; - display: block; -} - -.aspect-test-caption { - margin-top: 0.5rem; - font-size: 0.875rem; - color: #333; -} - - -/* IMAGE ASPECT RATIO MAPPING */ -[data-lk-image-aspect="auto"] { - aspect-ratio: auto; -} - -[data-lk-image-aspect="1/1"] { - aspect-ratio: 1 / 1; -} - -[data-lk-image-aspect="2.39/1"] { - aspect-ratio: 2.39 / 1; -} - -[data-lk-image-aspect="2/1"] { - aspect-ratio: 2 / 1; -} - -[data-lk-image-aspect="16/9"] { - aspect-ratio: 16 / 9; -} - -[data-lk-image-aspect="3/2"] { - aspect-ratio: 3 / 2; -} - -[data-lk-image-aspect="4/3"] { - aspect-ratio: 4 / 3; -} - -[data-lk-image-aspect="5/4"] { - aspect-ratio: 5 / 4; -} - -[data-lk-image-aspect="1/2.39"] { - aspect-ratio: 1 / 2.39; -} - -[data-lk-image-aspect="1/2"] { - aspect-ratio: 1 / 2; -} - -[data-lk-image-aspect="9/16"] { - aspect-ratio: 9 / 16; -} - -[data-lk-image-aspect="4/5"] { - aspect-ratio: 4 / 5; -} + [data-lk-image-object-fit="cover"] { + object-fit: cover; + } + + [data-lk-image-object-fit="contain"] { + object-fit: contain; + } + + [data-lk-image-object-fit="fill"] { + object-fit: fill; + } + + [data-lk-image-object-fit="none"] { + object-fit: none; + } + + [data-lk-image-object-fit="scale-down"] { + object-fit: scale-down; + } + + + + /* ASPECT TESTING AREA - Remove for production */ + .aspect-test-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + padding: 1rem; + } + + .aspect-test-item { + border: 1px solid #ccc; + padding: 0.5rem; + text-align: center; + background: #fafafa; + } + + .aspect-test-img { + width: 100%; + height: auto; + object-fit: cover; + display: block; + } + + .aspect-test-caption { + margin-top: 0.5rem; + font-size: 0.875rem; + color: #333; + } + + + /* IMAGE ASPECT RATIO MAPPING */ + [data-lk-image-aspect="auto"] { + aspect-ratio: auto; + } + + [data-lk-image-aspect="1/1"] { + aspect-ratio: 1 / 1; + } + + [data-lk-image-aspect="2.39/1"] { + aspect-ratio: 2.39 / 1; + } + + [data-lk-image-aspect="2/1"] { + aspect-ratio: 2 / 1; + } + + [data-lk-image-aspect="16/9"] { + aspect-ratio: 16 / 9; + } + + [data-lk-image-aspect="3/2"] { + aspect-ratio: 3 / 2; + } + + [data-lk-image-aspect="4/3"] { + aspect-ratio: 4 / 3; + } + + [data-lk-image-aspect="5/4"] { + aspect-ratio: 5 / 4; + } + + [data-lk-image-aspect="1/2.39"] { + aspect-ratio: 1 / 2.39; + } + + [data-lk-image-aspect="1/2"] { + aspect-ratio: 1 / 2; + } + + [data-lk-image-aspect="9/16"] { + aspect-ratio: 9 / 16; + } + + [data-lk-image-aspect="4/5"] { + aspect-ratio: 4 / 5; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/menu-item/menu-item.css b/registry/nextjs/components/menu-item/menu-item.css index 961dc2f6..07fc972c 100644 --- a/registry/nextjs/components/menu-item/menu-item.css +++ b/registry/nextjs/components/menu-item/menu-item.css @@ -1,54 +1,58 @@ -[data-lk-component="menu-item"] { - --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); - --gap: calc(var(--py) / var(--lk-eighthstep)); - - display: inline-flex; - align-items: center; - gap: var(--lk-size-sm); - border-radius: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); - padding-top: var(--py); - padding-bottom: var(--py); - gap: var(--gap); - position: relative; - - /* Required for text-overflow ellipsis */ - overflow: hidden; - cursor: pointer; -} - -[data-lk-menu-item-element="content-wrap"] { - flex: 1 0 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -/* Left padding with start icon */ -[data-lk-component="menu-item"]:has([data-lk-icon-position="start"]) { - padding-left: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); -} - -/* Right padding with end icon */ -[data-lk-component="menu-item"]:has([data-lk-icon-position="end"]) { - padding-right: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); -} - -/* Default padding without icons */ -[data-lk-component="menu-item"]:not(:has([data-lk-icon-position="start"])) { - padding-left: var(--body-font-size); -} - -[data-lk-component="menu-item"]:not(:has([data-lk-icon-position="end"])) { - padding-right: var(--body-font-size); -} - -[data-lk-component="menu-item"] > [data-lk-component="state-layer"] { - border-radius: var(--lk-size-xs); -} - - -/* Force-inherit font size when nested within lk-component="dropdown-menu" */ - -[data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] { - font-size: inherit !important; +@layer components { + + [data-lk-component="menu-item"] { + --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + --gap: calc(var(--py) / var(--lk-eighthstep)); + + display: inline-flex; + align-items: center; + gap: var(--lk-size-sm); + border-radius: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + padding-top: var(--py); + padding-bottom: var(--py); + gap: var(--gap); + position: relative; + + /* Required for text-overflow ellipsis */ + overflow: hidden; + cursor: pointer; + } + + [data-lk-menu-item-element="content-wrap"] { + flex: 1 0 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + /* Left padding with start icon */ + [data-lk-component="menu-item"]:has([data-lk-icon-position="start"]) { + padding-left: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + } + + /* Right padding with end icon */ + [data-lk-component="menu-item"]:has([data-lk-icon-position="end"]) { + padding-right: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + } + + /* Default padding without icons */ + [data-lk-component="menu-item"]:not(:has([data-lk-icon-position="start"])) { + padding-left: var(--body-font-size); + } + + [data-lk-component="menu-item"]:not(:has([data-lk-icon-position="end"])) { + padding-right: var(--body-font-size); + } + + [data-lk-component="menu-item"]>[data-lk-component="state-layer"] { + border-radius: var(--lk-size-xs); + } + + + /* Force-inherit font size when nested within lk-component="dropdown-menu" */ + + [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] { + font-size: inherit !important; + } + } \ No newline at end of file diff --git a/registry/nextjs/components/navbar/navbar.css b/registry/nextjs/components/navbar/navbar.css index 3a1749d6..344a9a77 100644 --- a/registry/nextjs/components/navbar/navbar.css +++ b/registry/nextjs/components/navbar/navbar.css @@ -1,73 +1,77 @@ -[data-lk-component="navbar"] { - position: sticky; - top: 0; - z-index: 99; - padding: var(--lk-size-md); -} +@layer components { + [data-lk-component="navbar"] { + position: sticky; + top: 0; + z-index: 99; + padding: var(--lk-size-md); + } -/* Mobile Navbar */ -.navbar-mobile { - display: none; - position: relative; - z-index: 1; -} -@media (max-width: 768px) { - .navbar-desktop { + /* Mobile Navbar */ + .navbar-mobile { display: none; + position: relative; + z-index: 1; } - .navbar-mobile.active { - display: flex; + @media (max-width: 768px) { + .navbar-desktop { + display: none; + } + + .navbar-mobile.active { + display: flex; + } } -} -@media (max-width: 768px) { - [data-lk-navbar-el="nav-menu"]>.active { - position: fixed; - top: 0; - left: 0; - height: 100svh; + @media (max-width: 768px) { + [data-lk-navbar-el="nav-menu"]>.active { + position: fixed; + top: 0; + left: 0; + height: 100svh; + width: 100%; + flex-direction: column; + background: white; + transform: translateX(0); + opacity: 1; + z-index: 98; + padding: 1rem; + } + } + + /* Desktop Navbar */ + .navbar-desktop { + display: flex; width: 100%; - flex-direction: column; - background: white; - transform: translateX(0); - opacity: 1; - z-index: 98; - padding: 1rem; + position: relative; + z-index: 1; + gap: var(--lk-size-sm); } -} -/* Desktop Navbar */ -.navbar-desktop { - display: flex; - width: 100%; - position: relative; - z-index: 1; - gap: var(--lk-size-sm); -} + [data-lk-navbar-el="nav-menu-end"] { + display: flex; + align-items: center; + gap: var(--lk-size-xs); + margin-left: auto; + transition: transform 0.3s ease, opacity 0.2s ease; + } -[data-lk-navbar-el="nav-menu-end"] { - display: flex; - align-items: center; - gap: var(--lk-size-xs); - margin-left: auto; - transition: transform 0.3s ease, opacity 0.2s ease; -} + [data-lk-slot="nav-icon-buttons"], + [data-lk-slot="nav-cta-buttons"] { + display: flex; + align-items: center; + gap: var(--lk-size-xs); + margin-left: var(--lk-size-xs); -[data-lk-slot="nav-icon-buttons"], -[data-lk-slot="nav-cta-buttons"] { - display: flex; - align-items: center; - gap: var(--lk-size-xs); - margin-left: var(--lk-size-xs); + } -} + [data-lk-navbar-material="glass"] { + border-bottom: 1px solid var(--lk-outlinevariant); + } -[data-lk-navbar-material="glass"] { - border-bottom: 1px solid var(--lk-outlinevariant); -} +} \ No newline at end of file diff --git a/registry/nextjs/components/placeholder-block/placeholder-block.css b/registry/nextjs/components/placeholder-block/placeholder-block.css index 9af7de4b..94094e8e 100644 --- a/registry/nextjs/components/placeholder-block/placeholder-block.css +++ b/registry/nextjs/components/placeholder-block/placeholder-block.css @@ -1,6 +1,10 @@ -[data-lk-component="placeholder-block"] { - display: block; - border: 1px dashed var(--lk-info); - background-color: var(--lk-infocontainer); - padding: var(--lk-size-md); -} +@layer components { + + [data-lk-component="placeholder-block"] { + display: block; + border: 1px dashed var(--lk-info); + background-color: var(--lk-infocontainer); + padding: var(--lk-size-md); + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/row/row.css b/registry/nextjs/components/row/row.css index 6d42ffc7..68382c2a 100644 --- a/registry/nextjs/components/row/row.css +++ b/registry/nextjs/components/row/row.css @@ -1,117 +1,121 @@ -[data-lk-component="row"] { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 0; -} - -/* Align Items */ -[data-lk-row-align-items="start"] { - align-items: flex-start; -} - -[data-lk-row-align-items="center"] { - align-items: center; -} - -[data-lk-row-align-items="end"] { - align-items: flex-end; -} - -[data-lk-row-align-items="stretch"] { - align-items: stretch; -} - -/* Justify Content */ -[data-lk-row-justify-content="start"] { - justify-content: flex-start; -} - -[data-lk-row-justify-content="center"] { - justify-content: center; -} - -[data-lk-row-justify-content="end"] { - justify-content: flex-end; -} - -[data-lk-row-justify-content="space-between"] { - justify-content: space-between; -} - -[data-lk-row-justify-content="space-around"] { - justify-content: space-around; -} - -/* Gap */ -[data-lk-row-gap="3xs"] { - gap: var(--lk-size-3xs); -} - -[data-lk-row-gap="2xs"] { - gap: var(--lk-size-2xs); -} - -[data-lk-row-gap="xs"] { - gap: var(--lk-size-xs); -} - -[data-lk-row-gap="sm"] { - gap: var(--lk-size-sm); -} - -[data-lk-row-gap="md"] { - gap: var(--lk-size-md); -} - -[data-lk-row-gap="lg"] { - gap: var(--lk-size-lg); -} - -[data-lk-row-gap="xl"] { - gap: var(--lk-size-xl); -} - -[data-lk-row-gap="2xl"] { - gap: var(--lk-size-2xl); -} - -[data-lk-row-gap="3xl"] { - gap: var(--lk-size-3xl); -} - -[data-lk-row-gap="4xl"] { - gap: var(--lk-size-4xl); -} - -/* Wrap */ -[data-lk-row-wrap-children="true"] { - flex-wrap: wrap; -} - -[data-lk-row-wrap-children="false"] { - flex-wrap: nowrap; -} - -/* Default Child Behavior */ -[data-lk-row-default-child-behavior="auto-grow"]>* { - flex-grow: 1; - flex-shrink: 0; - flex-basis: auto; -} - -[data-lk-row-default-child-behavior="auto-shrink"]>* { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; -} - -[data-lk-row-default-child-behavior="ignoreFlexRules"]>* { - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; -} - -[data-lk-row-default-child-behavior="ignoreIntrinsicSize"]>* { - flex-basis: 0; -} +@layer components { + + [data-lk-component="row"] { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 0; + } + + /* Align Items */ + [data-lk-row-align-items="start"] { + align-items: flex-start; + } + + [data-lk-row-align-items="center"] { + align-items: center; + } + + [data-lk-row-align-items="end"] { + align-items: flex-end; + } + + [data-lk-row-align-items="stretch"] { + align-items: stretch; + } + + /* Justify Content */ + [data-lk-row-justify-content="start"] { + justify-content: flex-start; + } + + [data-lk-row-justify-content="center"] { + justify-content: center; + } + + [data-lk-row-justify-content="end"] { + justify-content: flex-end; + } + + [data-lk-row-justify-content="space-between"] { + justify-content: space-between; + } + + [data-lk-row-justify-content="space-around"] { + justify-content: space-around; + } + + /* Gap */ + [data-lk-row-gap="3xs"] { + gap: var(--lk-size-3xs); + } + + [data-lk-row-gap="2xs"] { + gap: var(--lk-size-2xs); + } + + [data-lk-row-gap="xs"] { + gap: var(--lk-size-xs); + } + + [data-lk-row-gap="sm"] { + gap: var(--lk-size-sm); + } + + [data-lk-row-gap="md"] { + gap: var(--lk-size-md); + } + + [data-lk-row-gap="lg"] { + gap: var(--lk-size-lg); + } + + [data-lk-row-gap="xl"] { + gap: var(--lk-size-xl); + } + + [data-lk-row-gap="2xl"] { + gap: var(--lk-size-2xl); + } + + [data-lk-row-gap="3xl"] { + gap: var(--lk-size-3xl); + } + + [data-lk-row-gap="4xl"] { + gap: var(--lk-size-4xl); + } + + /* Wrap */ + [data-lk-row-wrap-children="true"] { + flex-wrap: wrap; + } + + [data-lk-row-wrap-children="false"] { + flex-wrap: nowrap; + } + + /* Default Child Behavior */ + [data-lk-row-default-child-behavior="auto-grow"]>* { + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + } + + [data-lk-row-default-child-behavior="auto-shrink"]>* { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + } + + [data-lk-row-default-child-behavior="ignoreFlexRules"]>* { + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; + } + + [data-lk-row-default-child-behavior="ignoreIntrinsicSize"]>* { + flex-basis: 0; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/section/section.css b/registry/nextjs/components/section/section.css index d1d6386a..38479e7c 100644 --- a/registry/nextjs/components/section/section.css +++ b/registry/nextjs/components/section/section.css @@ -1,205 +1,209 @@ -/* Component selector: [data-lk-component="section"] */ - -[data-lk-component="section"] { - display: block; - position: relative; -} - -[data-lk-section-padding="none"] { - padding: 0px; -} - -[data-lk-section-padding="xs"] { - padding: var(--lk-size-lg); -} - -[data-lk-section-padding="sm"] { - padding: var(--lk-size-xl); -} - -[data-lk-section-padding="md"] { - padding: var(--lk-size-2xl); -} +@layer components { -[data-lk-section-padding="lg"] { - padding: var(--lk-size-3xl); -} + /* Component selector: [data-lk-component="section"] */ -[data-lk-section-padding="xl"] { - padding: var(--lk-size-4xl); -} + [data-lk-component="section"] { + display: block; + position: relative; + } -/* Padding X */ - -[data-lk-section-px="none"] { - padding-left: 0px; - padding-right: 0px; -} - -[data-lk-section-px="xs"] { - padding-left: var(--lk-size-lg); - padding-right: var(--lk-size-lg); -} + [data-lk-section-padding="none"] { + padding: 0px; + } -[data-lk-section-px="sm"] { - padding-left: var(--lk-size-xl); - padding-right: var(--lk-size-xl); -} - -[data-lk-section-px="md"] { - padding-left: var(--lk-size-2xl); - padding-right: var(--lk-size-2xl); -} + [data-lk-section-padding="xs"] { + padding: var(--lk-size-lg); + } -[data-lk-section-px="lg"] { - padding-left: var(--lk-size-3xl); - padding-right: var(--lk-size-3xl); -} + [data-lk-section-padding="sm"] { + padding: var(--lk-size-xl); + } -[data-lk-section-px="xl"] { - padding-left: var(--lk-size-4xl); - padding-right: var(--lk-size-4xl); -} + [data-lk-section-padding="md"] { + padding: var(--lk-size-2xl); + } -/* Padding Y */ + [data-lk-section-padding="lg"] { + padding: var(--lk-size-3xl); + } -[data-lk-section-py="none"] { - padding-top: 0px; - padding-bottom: 0px; -} + [data-lk-section-padding="xl"] { + padding: var(--lk-size-4xl); + } -[data-lk-section-py="xs"] { - padding-top: var(--lk-size-lg); - padding-bottom: var(--lk-size-lg); -} + /* Padding X */ -[data-lk-section-py="sm"] { - padding-top: var(--lk-size-xl); - padding-bottom: var(--lk-size-xl); -} + [data-lk-section-px="none"] { + padding-left: 0px; + padding-right: 0px; + } -[data-lk-section-py="md"] { - padding-top: var(--lk-size-2xl); - padding-bottom: var(--lk-size-2xl); -} + [data-lk-section-px="xs"] { + padding-left: var(--lk-size-lg); + padding-right: var(--lk-size-lg); + } -[data-lk-section-py="lg"] { - padding-top: var(--lk-size-3xl); - padding-bottom: var(--lk-size-3xl); -} + [data-lk-section-px="sm"] { + padding-left: var(--lk-size-xl); + padding-right: var(--lk-size-xl); + } -[data-lk-section-py="xl"] { - padding-top: var(--lk-size-4xl); - padding-bottom: var(--lk-size-4xl); -} + [data-lk-section-px="md"] { + padding-left: var(--lk-size-2xl); + padding-right: var(--lk-size-2xl); + } -/* Padding Top */ + [data-lk-section-px="lg"] { + padding-left: var(--lk-size-3xl); + padding-right: var(--lk-size-3xl); + } -[data-lk-section-pt="none"] { - padding-top: 0px; -} + [data-lk-section-px="xl"] { + padding-left: var(--lk-size-4xl); + padding-right: var(--lk-size-4xl); + } -[data-lk-section-pt="xs"] { - padding-top: var(--lk-size-lg); -} + /* Padding Y */ -[data-lk-section-pt="sm"] { - padding-top: var(--lk-size-xl); -} + [data-lk-section-py="none"] { + padding-top: 0px; + padding-bottom: 0px; + } -[data-lk-section-pt="md"] { - padding-top: var(--lk-size-2xl); -} + [data-lk-section-py="xs"] { + padding-top: var(--lk-size-lg); + padding-bottom: var(--lk-size-lg); + } -[data-lk-section-pt="lg"] { - padding-top: var(--lk-size-3xl); -} + [data-lk-section-py="sm"] { + padding-top: var(--lk-size-xl); + padding-bottom: var(--lk-size-xl); + } -[data-lk-section-pt="xl"] { - padding-top: var(--lk-size-4xl); -} + [data-lk-section-py="md"] { + padding-top: var(--lk-size-2xl); + padding-bottom: var(--lk-size-2xl); + } -/* Padding Right */ + [data-lk-section-py="lg"] { + padding-top: var(--lk-size-3xl); + padding-bottom: var(--lk-size-3xl); + } -[data-lk-section-pr="none"] { - padding-right: 0px; -} + [data-lk-section-py="xl"] { + padding-top: var(--lk-size-4xl); + padding-bottom: var(--lk-size-4xl); + } -[data-lk-section-pr="xs"] { - padding-right: var(--lk-size-lg); -} + /* Padding Top */ -[data-lk-section-pr="sm"] { - padding-right: var(--lk-size-xl); -} + [data-lk-section-pt="none"] { + padding-top: 0px; + } -[data-lk-section-pr="md"] { - padding-right: var(--lk-size-2xl); -} + [data-lk-section-pt="xs"] { + padding-top: var(--lk-size-lg); + } -[data-lk-section-pr="lg"] { - padding-right: var(--lk-size-3xl); -} + [data-lk-section-pt="sm"] { + padding-top: var(--lk-size-xl); + } -[data-lk-section-pr="xl"] { - padding-right: var(--lk-size-4xl); -} + [data-lk-section-pt="md"] { + padding-top: var(--lk-size-2xl); + } -/* Padding Bottom */ + [data-lk-section-pt="lg"] { + padding-top: var(--lk-size-3xl); + } -[data-lk-section-pb="none"] { - padding-bottom: 0px; -} + [data-lk-section-pt="xl"] { + padding-top: var(--lk-size-4xl); + } -[data-lk-section-pb="xs"] { - padding-bottom: var(--lk-size-lg); -} + /* Padding Right */ -[data-lk-section-pb="sm"] { - padding-bottom: var(--lk-size-xl); -} + [data-lk-section-pr="none"] { + padding-right: 0px; + } -[data-lk-section-pb="md"] { - padding-bottom: var(--lk-size-2xl); -} + [data-lk-section-pr="xs"] { + padding-right: var(--lk-size-lg); + } -[data-lk-section-pb="lg"] { - padding-bottom: var(--lk-size-3xl); -} + [data-lk-section-pr="sm"] { + padding-right: var(--lk-size-xl); + } + + [data-lk-section-pr="md"] { + padding-right: var(--lk-size-2xl); + } + + [data-lk-section-pr="lg"] { + padding-right: var(--lk-size-3xl); + } + + [data-lk-section-pr="xl"] { + padding-right: var(--lk-size-4xl); + } -[data-lk-section-pb="xl"] { - padding-bottom: var(--lk-size-4xl); -} + /* Padding Bottom */ -/* Padding Left */ + [data-lk-section-pb="none"] { + padding-bottom: 0px; + } -[data-lk-section-pl="none"] { - padding-left: 0px; -} + [data-lk-section-pb="xs"] { + padding-bottom: var(--lk-size-lg); + } -[data-lk-section-pl="xs"] { - padding-left: var(--lk-size-lg); -} + [data-lk-section-pb="sm"] { + padding-bottom: var(--lk-size-xl); + } -[data-lk-section-pl="sm"] { - padding-left: var(--lk-size-xl); -} + [data-lk-section-pb="md"] { + padding-bottom: var(--lk-size-2xl); + } -[data-lk-section-pl="md"] { - padding-left: var(--lk-size-2xl); -} + [data-lk-section-pb="lg"] { + padding-bottom: var(--lk-size-3xl); + } -[data-lk-section-pl="lg"] { - padding-left: var(--lk-size-3xl); -} + [data-lk-section-pb="xl"] { + padding-bottom: var(--lk-size-4xl); + } -[data-lk-section-pl="xl"] { - padding-left: var(--lk-size-4xl); -} + /* Padding Left */ -@media screen and (max-width: 767px) { - [data-lk-component="section"] { - padding-left: var(--lk-size-md); - padding-right: var(--lk-size-md); + [data-lk-section-pl="none"] { + padding-left: 0px; } -} + + [data-lk-section-pl="xs"] { + padding-left: var(--lk-size-lg); + } + + [data-lk-section-pl="sm"] { + padding-left: var(--lk-size-xl); + } + + [data-lk-section-pl="md"] { + padding-left: var(--lk-size-2xl); + } + + [data-lk-section-pl="lg"] { + padding-left: var(--lk-size-3xl); + } + + [data-lk-section-pl="xl"] { + padding-left: var(--lk-size-4xl); + } + + @media screen and (max-width: 767px) { + [data-lk-component="section"] { + padding-left: var(--lk-size-md); + padding-right: var(--lk-size-md); + } + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/select/select.css b/registry/nextjs/components/select/select.css index 3e2e3b05..46370245 100644 --- a/registry/nextjs/components/select/select.css +++ b/registry/nextjs/components/select/select.css @@ -1,90 +1,94 @@ -[data-lk-component="select-menu"] { - position: absolute; - z-index: 1000; - transform: scale(0%); +@layer components { - transition: transform 0.3s ease-out; + [data-lk-component="select-menu"] { + position: absolute; + z-index: 1000; + transform: scale(0%); - &[data-isactive="true"] { - transform: scale(100%); + transition: transform 0.3s ease-out; + + &[data-isactive="true"] { + transform: scale(100%); + } + + &[data-lk-select-trigger-quadrant="top-left"] { + transform: translate(0%, -100%); + transform-origin: top left; + + } + + &[data-lk-select-trigger-quadrant="top-right"] { + transform: translate(-100%, -100%); + transform-origin: top right; + + } + + &[data-lk-select-trigger-quadrant="bottom-right"] { + transform: translate(-100%, 0%); + transform-origin: bottom right; + + } + + &[data-lk-select-trigger-quadrant="bottom-left"] { + transform: translate(0%, 0%); + transform-origin: bottom left; + + } } - &[data-lk-select-trigger-quadrant="top-left"] { - transform: translate(0%, -100%); - transform-origin: top left; + [data-lk-component="menu-item"] { + --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + --gap: calc(var(--py) / var(--lk-eighthstep)); + + display: inline-flex; + align-items: center; + gap: var(--lk-size-sm); + border-radius: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + padding-top: var(--py); + padding-bottom: var(--py); + gap: var(--gap); + position: relative; + + /* Required for text-overflow ellipsis */ + overflow: hidden; + cursor: pointer; + } + [data-lk-menu-item-element="content-wrap"] { + flex: 1 0 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - &[data-lk-select-trigger-quadrant="top-right"] { - transform: translate(-100%, -100%); - transform-origin: top right; - + /* Left padding with start icon */ + [data-lk-component="menu-item"]:has([data-lk-icon-position="start"]) { + padding-left: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); } - &[data-lk-select-trigger-quadrant="bottom-right"] { - transform: translate(-100%, 0%); - transform-origin: bottom right; + /* Right padding with end icon */ + [data-lk-component="menu-item"]:has([data-lk-icon-position="end"]) { + padding-right: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); + } + /* Default padding without icons */ + [data-lk-component="menu-item"]:not(:has([data-lk-icon-position="start"])) { + padding-left: var(--body-font-size); } - &[data-lk-select-trigger-quadrant="bottom-left"] { - transform: translate(0%, 0%); - transform-origin: bottom left; + [data-lk-component="menu-item"]:not(:has([data-lk-icon-position="end"])) { + padding-right: var(--body-font-size); + } + [data-lk-component="menu-item"]>[data-lk-component="state-layer"] { + border-radius: var(--lk-size-xs); } -} - -[data-lk-component="menu-item"] { - --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); - --gap: calc(var(--py) / var(--lk-eighthstep)); - - display: inline-flex; - align-items: center; - gap: var(--lk-size-sm); - border-radius: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); - padding-top: var(--py); - padding-bottom: var(--py); - gap: var(--gap); - position: relative; - - /* Required for text-overflow ellipsis */ - overflow: hidden; - cursor: pointer; -} - -[data-lk-menu-item-element="content-wrap"] { - flex: 1 0 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -/* Left padding with start icon */ -[data-lk-component="menu-item"]:has([data-lk-icon-position="start"]) { - padding-left: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); -} - -/* Right padding with end icon */ -[data-lk-component="menu-item"]:has([data-lk-icon-position="end"]) { - padding-right: calc(var(--lk-size-lg) * var(--lk-halfstep-dec)); -} - -/* Default padding without icons */ -[data-lk-component="menu-item"]:not(:has([data-lk-icon-position="start"])) { - padding-left: var(--body-font-size); -} - -[data-lk-component="menu-item"]:not(:has([data-lk-icon-position="end"])) { - padding-right: var(--body-font-size); -} - -[data-lk-component="menu-item"] > [data-lk-component="state-layer"] { - border-radius: var(--lk-size-xs); -} - - -/* Force-inherit font size when nested within lk-component="dropdown-menu" */ - -[data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] { - font-size: inherit !important; + + + /* Force-inherit font size when nested within lk-component="dropdown-menu" */ + + [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] { + font-size: inherit !important; + } + } \ No newline at end of file diff --git a/registry/nextjs/components/snackbar/snackbar.css b/registry/nextjs/components/snackbar/snackbar.css index 63181357..915f72ca 100644 --- a/registry/nextjs/components/snackbar/snackbar.css +++ b/registry/nextjs/components/snackbar/snackbar.css @@ -1,33 +1,37 @@ -[data-lk-component="snackbar"] { - display: inline-flex; - align-items: center; - padding: calc(var(--body-line-height) * var(--lk-halfstep-dec)); - gap: var(--lk-size-sm); - border-radius: calc(var(--callout-line-height) * var(--lk-wholestep-dec)); - /* background-color: var(--lk-primary); */ - color: var(--lk-onsurface); - box-shadow: var(--shadow-xs); +@layer components { - [data-lk-slot="snackbar-text"] { - flex: 1 0 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - [data-lk-slot="snackbar-icon"] { - width: 1em; - height: 1em; - display: flex; + [data-lk-component="snackbar"] { + display: inline-flex; align-items: center; - justify-content: center; - font-size: var(--heading-font-size); - transform: translateY(-0.25px); - margin-right: calc(1em / var(--lk-halfstep)); - } + padding: calc(var(--body-line-height) * var(--lk-halfstep-dec)); + gap: var(--lk-size-sm); + border-radius: calc(var(--callout-line-height) * var(--lk-wholestep-dec)); + /* background-color: var(--lk-primary); */ + color: var(--lk-onsurface); + box-shadow: var(--shadow-xs); + + [data-lk-slot="snackbar-text"] { + flex: 1 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + [data-lk-slot="snackbar-icon"] { + width: 1em; + height: 1em; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--heading-font-size); + transform: translateY(-0.25px); + margin-right: calc(1em / var(--lk-halfstep)); + } + + [data-lk-slot="snackbar-actions"] { + margin-left: calc(1em / var(--lk-halfstep)); + } - [data-lk-slot="snackbar-actions"] { - margin-left: calc(1em / var(--lk-halfstep)); } -} +} \ No newline at end of file diff --git a/registry/nextjs/components/state-layer/state-layer.css b/registry/nextjs/components/state-layer/state-layer.css index edf00d46..d9c759fe 100644 --- a/registry/nextjs/components/state-layer/state-layer.css +++ b/registry/nextjs/components/state-layer/state-layer.css @@ -1,46 +1,50 @@ -[data-lk-component="state-layer"] { - z-index: 1; - opacity: 0; - - pointer-events: none; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - transition: opacity 0.1s ease-out; -} - -/* Only apply styles to the [data-lk-component="state-layer"] when its direct parent is hovered, active, or focused */ -div:hover > [data-lk-component="state-layer"], -a:hover > [data-lk-component="state-layer"], -button:hover > [data-lk-component="state-layer"], -li:hover > [data-lk-component="state-layer"] { - opacity: 0.16 !important; -} - -div:active > [data-lk-component="state-layer"], -a:active > [data-lk-component="state-layer"], -button:active > [data-lk-component="state-layer"], -li:active > [data-lk-component="state-layer"] { - opacity: 0.5 !important; -} - -div:focus > [data-lk-component="state-layer"], -a:focus > [data-lk-component="state-layer"], -button:focus > [data-lk-component="state-layer"], -li:focus > [data-lk-component="state-layer"] { - opacity: 0.35 !important; -} - -.is-active [data-lk-component="state-layer"] { - opacity: 0.16 !important; -} - -.list-item.active [data-lk-component="state-layer"] { - opacity: 0.24 !important; -} - -[data-lk-forced-state="active"] { - opacity: 0.12 !important; -} +@layer components { + + [data-lk-component="state-layer"] { + z-index: 1; + opacity: 0; + + pointer-events: none; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + transition: opacity 0.1s ease-out; + } + + /* Only apply styles to the [data-lk-component="state-layer"] when its direct parent is hovered, active, or focused */ + div:hover>[data-lk-component="state-layer"], + a:hover>[data-lk-component="state-layer"], + button:hover>[data-lk-component="state-layer"], + li:hover>[data-lk-component="state-layer"] { + opacity: 0.16 !important; + } + + div:active>[data-lk-component="state-layer"], + a:active>[data-lk-component="state-layer"], + button:active>[data-lk-component="state-layer"], + li:active>[data-lk-component="state-layer"] { + opacity: 0.5 !important; + } + + div:focus>[data-lk-component="state-layer"], + a:focus>[data-lk-component="state-layer"], + button:focus>[data-lk-component="state-layer"], + li:focus>[data-lk-component="state-layer"] { + opacity: 0.35 !important; + } + + .is-active [data-lk-component="state-layer"] { + opacity: 0.16 !important; + } + + .list-item.active [data-lk-component="state-layer"] { + opacity: 0.24 !important; + } + + [data-lk-forced-state="active"] { + opacity: 0.12 !important; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/sticker/sticker.css b/registry/nextjs/components/sticker/sticker.css index 2bb4ab98..47dd6b48 100644 --- a/registry/nextjs/components/sticker/sticker.css +++ b/registry/nextjs/components/sticker/sticker.css @@ -1,9 +1,13 @@ -[data-lk-component="sticker"] { - display: inline-block; - padding: var(--lk-size-xs) var(--lk-size-sm); - color: var(--lk-onprimary); - border-radius: var(--lk-size-sm); - font-weight: 500; - line-height: var(--label-line-height); - font-size: var(--label-font-size); -} +@layer components { + + [data-lk-component="sticker"] { + display: inline-block; + padding: var(--lk-size-xs) var(--lk-size-sm); + color: var(--lk-onprimary); + border-radius: var(--lk-size-sm); + font-weight: 500; + line-height: var(--label-line-height); + font-size: var(--label-font-size); + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/switch/switch.css b/registry/nextjs/components/switch/switch.css index 51a55813..5979b0ac 100644 --- a/registry/nextjs/components/switch/switch.css +++ b/registry/nextjs/components/switch/switch.css @@ -1,31 +1,35 @@ -[data-lk-component="switch"] { - position: relative; - display: block; - align-items: center; - justify-content: start; - width: var(--lk-size-xl); - height: calc(var(--lk-size-md) + calc(var(--lk-size-2xs) * 2)); - background-color: var(--lk-surfacevariant); - border-radius: 100em; +@layer components { - [data-lk-component="switch-thumb"] { - position: absolute; - top: 50%; - left: var(--lk-size-2xs); - right: auto; - width: var(--lk-size-md); - height: var(--lk-size-md); - border-radius: 50%; - background-color: var(--lk-onsurface); - transform: translateY(-50%); - transition: left 0.1s ease-out; + [data-lk-component="switch"] { + position: relative; + display: block; + align-items: center; + justify-content: start; + width: var(--lk-size-xl); + height: calc(var(--lk-size-md) + calc(var(--lk-size-2xs) * 2)); + background-color: var(--lk-surfacevariant); + border-radius: 100em; + + [data-lk-component="switch-thumb"] { + position: absolute; + top: 50%; + left: var(--lk-size-2xs); + right: auto; + width: var(--lk-size-md); + height: var(--lk-size-md); + border-radius: 50%; + background-color: var(--lk-onsurface); + transform: translateY(-50%); + transition: left 0.1s ease-out; + } + } + + [data-lk-component="switch"][data-lk-switch-state="on"] { + background-color: var(--lk-tertiary); } -} -[data-lk-component="switch"][data-lk-switch-state="on"] { - background-color: var(--lk-tertiary); -} + [data-lk-switch-state="on"] [data-lk-component="switch-thumb"] { + left: calc(100% - calc(var(--lk-size-md) + var(--lk-size-2xs))); + } -[data-lk-switch-state="on"] [data-lk-component="switch-thumb"] { - left: calc(100% - calc(var(--lk-size-md) + var(--lk-size-2xs))); -} +} \ No newline at end of file diff --git a/registry/nextjs/components/tab-link/tab-link.css b/registry/nextjs/components/tab-link/tab-link.css index 1972ab72..79cf0057 100644 --- a/registry/nextjs/components/tab-link/tab-link.css +++ b/registry/nextjs/components/tab-link/tab-link.css @@ -1,20 +1,24 @@ -[data-lk-component="tab-link"] { - display: inline-flex; - position: relative; - padding: var(--lk-size-md); -} +@layer components { -.lk-indicator { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background-color: var(--lk-primary); - opacity: 0; - transition: opacity 0.2s ease-out; -} + [data-lk-component="tab-link"] { + display: inline-flex; + position: relative; + padding: var(--lk-size-md); + } -[data-lk-tab-link-selected="true"]>.lk-indicator { - opacity: 1; -} + .lk-indicator { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: var(--lk-primary); + opacity: 0; + transition: opacity 0.2s ease-out; + } + + [data-lk-tab-link-selected="true"]>.lk-indicator { + opacity: 1; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/tab-menu/tab-menu.css b/registry/nextjs/components/tab-menu/tab-menu.css index 620ea6e4..484451a5 100644 --- a/registry/nextjs/components/tab-menu/tab-menu.css +++ b/registry/nextjs/components/tab-menu/tab-menu.css @@ -1,12 +1,16 @@ -[data-lk-component="tab-menu"] { - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: flex-start; - width: 100%; - overflow-x: auto; - padding: 0; - position: relative; - border-bottom: 1px solid var(--lk-outlinevariant); - flex: 0 0 auto; -} +@layer components { + + [data-lk-component="tab-menu"] { + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: flex-start; + width: 100%; + overflow-x: auto; + padding: 0; + position: relative; + border-bottom: 1px solid var(--lk-outlinevariant); + flex: 0 0 auto; + } + +} \ No newline at end of file diff --git a/registry/nextjs/components/tabs/tabs.css b/registry/nextjs/components/tabs/tabs.css index 3837d45c..e6985af5 100644 --- a/registry/nextjs/components/tabs/tabs.css +++ b/registry/nextjs/components/tabs/tabs.css @@ -1,24 +1,27 @@ -[data-lk-component="tabs"] { - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; +@layer components { - &[data-lk-tabs-content-scrollable="true"] { - overflow: hidden; - flex-grow: 1; - } + [data-lk-component="tabs"] { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; -} + &[data-lk-tabs-content-scrollable="true"] { + overflow: hidden; + flex-grow: 1; + } -[data-lk-tabs-el="tab-content"] > * { - width: 100%; -} + } -[data-lk-tabs-el="tab-content"][data-lk-tabs-content-scrollable="true"] { - overflow: auto; - flex-grow: 1; - scrollbar-color: var(--lk-outline) transparent; - scrollbar-width: thin; -} + [data-lk-tabs-el="tab-content"]>* { + width: 100%; + } + + [data-lk-tabs-el="tab-content"][data-lk-tabs-content-scrollable="true"] { + overflow: auto; + flex-grow: 1; + scrollbar-color: var(--lk-outline) transparent; + scrollbar-width: thin; + } +} \ No newline at end of file diff --git a/registry/nextjs/components/text-input/text-input.css b/registry/nextjs/components/text-input/text-input.css index f02e54da..dec74506 100644 --- a/registry/nextjs/components/text-input/text-input.css +++ b/registry/nextjs/components/text-input/text-input.css @@ -1,103 +1,107 @@ -[data-lk-component="text-input"] { - display: flex; - flex-flow: column nowrap; +@layer components { - [data-lk-component="state-layer"] { - border-radius: var(--lk-size-sm); - font-size: inherit; - } -} - -[data-lk-component="text-input"] input { - appearance: none; - background: var(--lk-surface); - border: none; - font-size: inherit; - line-height: inherit; - color: inherit; - width: 100%; - padding: var(--lk-size-xs) var(--lk-size-sm); - border-radius: var(--lk-size-sm); -} + [data-lk-component="text-input"] { + display: flex; + flex-flow: column nowrap; -[data-lk-text-input-label-position="on-input"] { - label { - position: absolute; - top: 50%; - left: var(--lk-size-sm); - transform: translateY(-50%); - opacity: 50%; - pointer-events: none; - transition: - top 0.2s ease-out, - font-size 0.2s ease-out, - color 0.2s ease-out, - letter-spacing 0.2s ease-out, - opacity 0.2s ease-out, - padding 0.2s ease-out, - transform 0.2s ease-out; + [data-lk-component="state-layer"] { + border-radius: var(--lk-size-sm); + font-size: inherit; + } } - label.on-field-with-value-set { - opacity: 100%; - top: 0; - font-size: var(--label-font-size); - letter-spacing: -0.004em; - padding: 0 var(--lk-size-xs); - transform: translate(calc(-1 * var(--lk-size-2xs)), -61.8%); - color: var(--lk-outline); + [data-lk-component="text-input"] input { + appearance: none; + background: var(--lk-surface); + border: none; + font-size: inherit; + line-height: inherit; + color: inherit; + width: 100%; + padding: var(--lk-size-xs) var(--lk-size-sm); + border-radius: var(--lk-size-sm); } -} - -[data-lk-text-input-el="input-wrap"] { - border: 1px solid var(--lk-outlinevariant); - margin-top: calc(var(--bodyBoxHeight) * var(--lk-halfstep-dec)); - position: relative; - - border-radius: var(--lk-size-sm); - outline: 3px solid transparent; - outline-offset: -3px; - transition: - outline 0.2s ease-out, - outline-offset 0.2s ease-out; - - &:has(input:focus-visible) { - outline: 3px solid var(--lk-primary); - outline-offset: 0px; + [data-lk-text-input-label-position="on-input"] { label { + position: absolute; + top: 50%; + left: var(--lk-size-sm); + transform: translateY(-50%); + opacity: 50%; + pointer-events: none; + transition: + top 0.2s ease-out, + font-size 0.2s ease-out, + color 0.2s ease-out, + letter-spacing 0.2s ease-out, + opacity 0.2s ease-out, + padding 0.2s ease-out, + transform 0.2s ease-out; + } + + label.on-field-with-value-set { opacity: 100%; top: 0; font-size: var(--label-font-size); letter-spacing: -0.004em; padding: 0 var(--lk-size-xs); transform: translate(calc(-1 * var(--lk-size-2xs)), -61.8%); + color: var(--lk-outline); } } - &:placeholder-shown { - color: var(--lk-outline); + [data-lk-text-input-el="input-wrap"] { + border: 1px solid var(--lk-outlinevariant); + margin-top: calc(var(--bodyBoxHeight) * var(--lk-halfstep-dec)); + position: relative; + + border-radius: var(--lk-size-sm); + outline: 3px solid transparent; + outline-offset: -3px; + transition: + outline 0.2s ease-out, + outline-offset 0.2s ease-out; + + &:has(input:focus-visible) { + outline: 3px solid var(--lk-primary); + outline-offset: 0px; + + label { + opacity: 100%; + top: 0; + font-size: var(--label-font-size); + letter-spacing: -0.004em; + padding: 0 var(--lk-size-xs); + transform: translate(calc(-1 * var(--lk-size-2xs)), -61.8%); + } + } + + &:placeholder-shown { + color: var(--lk-outline); + } + + [data-lk-component="icon"] { + position: absolute; + top: 50%; + right: var(--lk-size-sm); + transform: translateY(-50%); + } } - [data-lk-component="icon"] { - position: absolute; - top: 50%; - right: var(--lk-size-sm); - transform: translateY(-50%); + div[data-lk-text-input-label-position="on-input"]>[data-lk-text-input-el="input-wrap"] { + margin-top: 0px; } -} -div[data-lk-text-input-label-position="on-input"] > [data-lk-text-input-el="input-wrap"] { - margin-top: 0px; -} + [data-lk-component="text-input"]:focus-within { + [data-lk-component="state-layer"] { + display: none; + } + } -[data-lk-component="text-input"]:focus-within { - [data-lk-component="state-layer"] { - display: none; + [data-lk-input-help-text="true"] { + margin-bottom: var(--lk-size-xs); + color: var(--lk-outline); } -} -[data-lk-input-help-text="true"] { - margin-bottom: var(--lk-size-xs); - color: var(--lk-outline); -} +} \ No newline at end of file diff --git a/registry/nextjs/components/theme-controller/theme-controller.css b/registry/nextjs/components/theme-controller/theme-controller.css index e69de29b..980559ac 100644 --- a/registry/nextjs/components/theme-controller/theme-controller.css +++ b/registry/nextjs/components/theme-controller/theme-controller.css @@ -0,0 +1,4 @@ +@layer components { + + +} \ No newline at end of file diff --git a/registry/nextjs/components/theme/index.tsx b/registry/nextjs/components/theme/index.tsx index 5b9453db..2ab53094 100644 --- a/registry/nextjs/components/theme/index.tsx +++ b/registry/nextjs/components/theme/index.tsx @@ -203,24 +203,24 @@ export default function ThemeProvider({ children }: { children: ReactNode }) { * */ -const [colorMode, setColorMode] = useState<"light" | "dark">("light"); - - const [palette, setPalette] = useState({ - "primary": "#035eff", - "secondary": "#badcff", - "tertiary": "#00ddfe", - "neutral": "#000000", - "neutralvariant": "#3f4f5b", - "error": "#dd305c", - "warning": "#feb600", - "success": "#0cfecd", - "info": "#175bfc" -} - - /** - * END OF REPLACE BLOCK; DO NOT ALTER ANYTHING BELOW THIS COMMENT - */ + const [colorMode, setColorMode] = useState<"light" | "dark">("light"); + + const [palette, setPalette] = useState( + { + primary: "#035eff", + secondary: "#badcff", + tertiary: "#00ddfe", + neutral: "#000000", + neutralvariant: "#3f4f5b", + error: "#dd305c", + warning: "#feb600", + success: "#0cfecd", + info: "#175bfc", + } + /** + * END OF REPLACE BLOCK; DO NOT ALTER ANYTHING BELOW THIS COMMENT + */ ); const [navIsOpen, setNavIsOpen] = useState(false); @@ -434,6 +434,26 @@ const [colorMode, setColorMode] = useState<"light" | "dark">("light"); [`on${toSentenceCase(key)}FixedVariant`]: tones._30, }, })); + break; + case "warning": + setTheme((prevTheme) => ({ + ...prevTheme, + light: { + ...prevTheme.light, + [key]: tones._75, + [`on${toSentenceCase(key)}`]: tones._30, + [`${key}Container`]: tones._90, + [`on${toSentenceCase(key)}Container`]: tones._10, + }, + dark: { + ...prevTheme.dark, + [key]: tones._80, + [`on${toSentenceCase(key)}`]: tones._20, + [`${key}Container`]: tones._30, + [`on${toSentenceCase(key)}Container`]: tones._90, + }, + })); + break; default: setTheme((prevTheme) => ({ ...prevTheme, @@ -525,4 +545,4 @@ const [colorMode, setColorMode] = useState<"light" | "dark">("light"); export const useTheme = () => { return useContext(ThemeContext); -}; +}; \ No newline at end of file diff --git a/registry/nextjs/components/theme/theme.css b/registry/nextjs/components/theme/theme.css index e69de29b..737e9a1d 100644 --- a/registry/nextjs/components/theme/theme.css +++ b/registry/nextjs/components/theme/theme.css @@ -0,0 +1,3 @@ +@layer components { + +} \ No newline at end of file From a0159865bf92f63f041550b420b4bfeba9ce64f6 Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Sun, 7 Sep 2025 09:49:22 +0530 Subject: [PATCH 2/5] fix: typography.css with correct values --- registry/universal/lib/css/typography.css | 347 +++++++++++----------- 1 file changed, 172 insertions(+), 175 deletions(-) diff --git a/registry/universal/lib/css/typography.css b/registry/universal/lib/css/typography.css index 8ab98064..d8c92a48 100644 --- a/registry/universal/lib/css/typography.css +++ b/registry/universal/lib/css/typography.css @@ -3,16 +3,15 @@ /* Regular families */ .display1 { --lineHeightInEms: calc(1em * var(--lk-quarterstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --sm: calc(var(--lineHeightInEms) * calc(1 / var(--lk-halfstep))); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--display1-font-size); @@ -21,16 +20,16 @@ } .display2 { - --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lineHeightInEms: calc(1em * var(--lk-quarterstep)); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--display2-font-size); @@ -40,15 +39,15 @@ .title1 { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--title1-font-size); @@ -58,15 +57,15 @@ .title2 { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.02em; font-size: var(--title2-font-size); @@ -76,15 +75,15 @@ .title3 { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.017em; font-size: var(--title3-font-size); @@ -94,15 +93,15 @@ .heading { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.014em; font-size: var(--heading-font-size); @@ -112,15 +111,15 @@ .subheading { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.007em; font-size: var(--subheading-font-size); @@ -130,17 +129,16 @@ .body { --lineHeightInEms: var(--title2-font-size); - --md: 1em; - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-md: 1em; + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(1em * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(1em * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.011em; - cursor: default; font-size: 1em; font-weight: 400; line-height: var(--lk-wholestep); @@ -148,15 +146,15 @@ .callout { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.009em; font-size: var(--callout-font-size); @@ -166,34 +164,33 @@ .label { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.004em; font-size: var(--label-font-size); font-weight: 600; line-height: var(--lk-halfstep); - position: static; } .caption { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.007em; font-size: var(--caption-font-size); @@ -203,15 +200,15 @@ .capline { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: 0.0618em; text-transform: uppercase; @@ -224,14 +221,14 @@ .display1-bold { --lineHeightInEms: calc(1em * var(--lk-quarterstep)); - --md: calc(1em / var(--lk-wholestep)); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-md: calc(1em / var(--lk-wholestep)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(1em * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(1em * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--display1-font-size); @@ -241,15 +238,15 @@ .display2-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--display2-font-size); @@ -259,15 +256,15 @@ .title1-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.022em; font-size: var(--title1-font-size); @@ -277,15 +274,15 @@ .title2-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.02em; font-size: var(--title2-font-size); @@ -295,15 +292,15 @@ .title3-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.017em; font-size: var(--title3-font-size); @@ -313,15 +310,15 @@ .heading-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.014em; font-size: var(--heading-font-size); @@ -331,15 +328,15 @@ .subheading-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.007em; font-size: var(--subheading-font-size); @@ -348,35 +345,34 @@ } .body-bold { - --lineHeightInEms: var(--title2-font-size); - --md: calc(1em / var(--lk-wholestep)); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lineHeightInEms: calc(1em * var(--lk-wholestep)); + --lk-size-md: var(--lineHeightInEms); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(1em * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.011em; padding: 0; font-size: 1em; font-weight: 600; line-height: var(--lk-wholestep); - position: relative; } .callout-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.009em; font-size: var(--callout-font-size); @@ -387,15 +383,15 @@ .label-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.004em; font-size: var(--label-font-size); @@ -405,15 +401,15 @@ .caption-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: -0.007em; font-size: var(--caption-font-size); @@ -423,15 +419,15 @@ .capline-bold { --lineHeightInEms: calc(1em * var(--lk-halfstep)); - --md: var(--lineHeightInEms); + --lk-size-md: var(--lineHeightInEms); - --sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); - --xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); - --2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); + --lk-size-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec)); + --lk-size-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec)); + --lk-size-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec)); - --lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); - --xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); - --2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); + --lk-size-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep)); + --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-wholestep)); + --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-wholestep)); letter-spacing: 0.0618em; text-transform: uppercase; @@ -441,6 +437,7 @@ } @media screen and (max-width: 767px) { + .display1-bold, .display1 { font-size: 3.3301em; @@ -490,4 +487,4 @@ .mono { font-family: monospace; -} +} \ No newline at end of file From 764492bbb893d3cf7de3db9ade8e1ed15e0ac2fa Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Sun, 7 Sep 2025 09:53:18 +0530 Subject: [PATCH 3/5] updated readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4eee00ec..c025a888 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ This documentation assumes the following: ```css @import url('@/lib/css/index.css'); + @layer components ``` #### What’s in the template? @@ -83,6 +84,7 @@ A blank Next.js project with LiftKit Core’s config files pre-installed—faste ```css @import url('@/lib/css/index.css'); + @layer components ``` #### What does `npx liftkit init` do? From 8633648331beb06eacf1a3a98ce6dd8540af45ac Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Mon, 8 Sep 2025 11:22:00 +0530 Subject: [PATCH 4/5] FIX: pass classNames to button --- registry/nextjs/components/button/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/registry/nextjs/components/button/index.tsx b/registry/nextjs/components/button/index.tsx index bb07d2ef..91e42e5e 100644 --- a/registry/nextjs/components/button/index.tsx +++ b/registry/nextjs/components/button/index.tsx @@ -60,6 +60,7 @@ export default function Button({ opticIconShift = true, modifiers, stateLayerOverride, + className, ...restProps }: LkButtonProps) { const lkButtonAttrs = useMemo( @@ -109,7 +110,7 @@ export default function Button({ {...restProps} type="button" data-lk-component="button" - className={`${baseButtonClasses} ${modifiers || ""}`} + className={`${baseButtonClasses} ${modifiers || ""} ${className || ""}`} >
{startIcon && ( From 77137fff7a0f1d7bc65ca3e799d399999fef0f1c Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Mon, 8 Sep 2025 12:48:36 +0530 Subject: [PATCH 5/5] @layer component moved to index.css --- README.md | 2 -- registry/universal/lib/css/index.css | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c025a888..4eee00ec 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,6 @@ This documentation assumes the following: ```css @import url('@/lib/css/index.css'); - @layer components ``` #### What’s in the template? @@ -84,7 +83,6 @@ A blank Next.js project with LiftKit Core’s config files pre-installed—faste ```css @import url('@/lib/css/index.css'); - @layer components ``` #### What does `npx liftkit init` do? diff --git a/registry/universal/lib/css/index.css b/registry/universal/lib/css/index.css index 477708ff..a075dff8 100644 --- a/registry/universal/lib/css/index.css +++ b/registry/universal/lib/css/index.css @@ -1,3 +1,8 @@ +/* we'll override it with tailwind */ +/* Left to right, right has most power */ +/* @layer theme, lk-base, components, utilities; */ +@layer components; + @import "./liftkit-core.css"; @import "./align-items.css"; @import "./align-self.css"; @@ -32,4 +37,4 @@ @import "./border-color.css"; @import "./border-style.css"; @import "./border-width.css"; -@import "@csstools/normalize.css"; +@import "@csstools/normalize.css"; \ No newline at end of file