@liftkit-vue/theme-css 0.1.0

package/css/index.css

@@ -0,0 +1,689 @@
+
+
+
+
+@layer lk-base {
+    @import "./liftkit-core.css";
+    @import "./align-items.css";
+    @import "./align-self.css";
+    @import "./aspect-ratios.css";
+    @import "./border-radius.css";
+    @import "./column-span.css";
+    @import "./display.css";
+    @import "./text-color.css";
+    @import "./flexboxes.css";
+    @import "./gaps.css";
+    @import "./justify-content.css";
+    @import "./margins.css";
+    @import "./opacity.css";
+    @import "./overflow.css";
+    @import "./padding.css";
+    @import "./position.css";
+    @import "./scale.css";
+    @import "./text-alignment.css";
+    @import "./typography.css";
+    @import "./width.css";
+    @import "./height.css";
+    @import "./text-columns.css";
+    @import "./borders.css";
+    @import "./pointer-events.css";
+    @import "./scrim.css";
+    @import "./z-index.css";
+    @import "./cursor.css";
+    @import "./breaks.css";
+    @import "./background-colors.css";
+    @import "./whitespace.css";
+    @import "./border-color.css";
+    @import "./border-style.css";
+    @import "./border-width.css";
+
+    ul,
+    ol,
+    menu {
+        list-style: revert;
+        padding-left: 1em;
+    }
+}
+
+/* Force generate class */
+
+/* maps variables to direct usable tailwind utility classes automatically */
+@theme {
+    /* m-*, p-*, h-*, w-*, border-*, gap-* from 3xs to 4xl
+       use m-xs for liftkit's values,
+       m-<number> for tailwind */
+    --spacing-3xs: var(--lk-size-3xs);
+    --spacing-2xs: var(--lk-size-2xs);
+    --spacing-xs: var(--lk-size-xs);
+    --spacing-sm: var(--lk-size-sm);
+    --spacing-md: var(--lk-size-md);
+    --spacing-lg: var(--lk-size-lg);
+    --spacing-xl: var(--lk-size-xl);
+    --spacing-2xl: var(--lk-size-2xl);
+    --spacing-3xl: var(--lk-size-3xl);
+    --spacing-4xl: var(--lk-size-4xl);
+
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+
+    --breakpoint-tablet: 47.9375rem;
+    /* 767px */
+    --breakpoint-mobile: 29.9375rem;
+    /* 479px */
+
+    /* https://tailwindcss.com/docs/colors#using-color-utilities */
+    /* bg-*, text-*, border-*, shadow-* and anywhere where color will be used  */
+
+    /**** COLORS ****/
+
+    /* Primary */
+    --color-primary: var(--lk-primary);
+    --color-onprimary: var(--lk-onprimary);
+    --color-primarycontainer: var(--lk-primarycontainer);
+    --color-onprimarycontainer: var(--lk-onprimarycontainer);
+    --color-primaryfixed: var(--lk-primaryfixed);
+    --color-onprimaryfixed: var(--lk-onprimaryfixed);
+    --color-primaryfixeddim: var(--lk-primaryfixeddim);
+    --color-onprimaryfixedvariant: var(--lk-onprimaryfixedvariant);
+
+    /* Secondary */
+    --color-secondary: var(--lk-secondary);
+    --color-onsecondary: var(--lk-onsecondary);
+    --color-secondarycontainer: var(--lk-secondarycontainer);
+    --color-onsecondarycontainer: var(--lk-onsecondarycontainer);
+    --color-secondaryfixed: var(--lk-secondaryfixed);
+    --color-onsecondaryfixed: var(--lk-onsecondaryfixed);
+    --color-secondaryfixeddim: var(--lk-secondaryfixeddim);
+    --color-onsecondaryfixedvariant: var(--lk-onsecondaryfixedvariant);
+
+    /* Tertiary */
+    --color-tertiary: var(--lk-tertiary);
+    --color-ontertiary: var(--lk-ontertiary);
+    --color-tertiarycontainer: var(--lk-tertiarycontainer);
+    --color-ontertiarycontainer: var(--lk-ontertiarycontainer);
+    --color-tertiaryfixed: var(--lk-tertiaryfixed);
+    --color-ontertiaryfixed: var(--lk-ontertiaryfixed);
+    --color-tertiaryfixeddim: var(--lk-tertiaryfixeddim);
+    --color-ontertiaryfixedvariant: var(--lk-ontertiaryfixedvariant);
+
+    /* Background & Surface */
+    --color-background: var(--lk-background);
+    --color-onbackground: var(--lk-onbackground);
+
+    --color-surface: var(--lk-surface);
+    --color-onsurface: var(--lk-onsurface);
+    --color-surfacevariant: var(--lk-surfacevariant);
+    --color-onsurfacevariant: var(--lk-onsurfacevariant);
+
+    /* surface elevation levels */
+    --color-surfacecontainerlowest: var(--lk-surfacecontainerlowest);
+    --color-surfacecontainerlow: var(--lk-surfacecontainerlow);
+    --color-surfacecontainer: var(--lk-surfacecontainer);
+    --color-surfacecontainerhigh: var(--lk-surfacecontainerhigh);
+    --color-surfacecontainerhighest: var(--lk-surfacecontainerhighest);
+
+    /* dimmest & brightest surface color
+
+     For example, in an interface using the default surface role,
+     the mapped area is the brightest in light theme and the dimmest in dark theme.
+     with surface bright role, the mapped area is the brightest in both light and dark theme.
+
+     https://m3.material.io/styles/color/roles#b2454878-db47-4621-b058-ecfcff7da730
+    */
+    --color-surfacedim: var(--lk-surfacedim);
+    --color-surfacebright: var(--lk-surfacebright);
+
+
+    /* Error */
+    --color-error: var(--lk-error);
+    --color-onerror: var(--lk-onerror);
+    --color-errorcontainer: var(--lk-errorcontainer);
+    --color-onerrorcontainer: var(--lk-onerrorcontainer);
+
+    /* Warning */
+    --color-warning: var(--lk-warning);
+    --color-onwarning: var(--lk-onwarning);
+    --color-warningcontainer: var(--lk-warningcontainer);
+    --color-onwarningcontainer: var(--lk-onwarningcontainer);
+
+    /* Success */
+    --color-success: var(--lk-success);
+    --color-onsuccess: var(--lk-onsuccess);
+    --color-successcontainer: var(--lk-successcontainer);
+    --color-onsuccesscontainer: var(--lk-onsuccesscontainer);
+
+    /* Info */
+    --color-info: var(--lk-info);
+    --color-oninfo: var(--lk-oninfo);
+    --color-infocontainer: var(--lk-infocontainer);
+    --color-oninfocontainer: var(--lk-oninfocontainer);
+
+    /* Inverse
+     for achieving colors that are inverse of surrounding ui for contrasting effect
+
+     https://m3.material.io/styles/color/roles#7fc6b47e-db22-4e98-8359-7649a099e4a1
+     */
+
+    --color-inversesurface: var(--lk-inversesurface);
+    --color-inverseonsurface: var(--lk-inverseonsurface);
+    --color-inverseprimary: var(--lk-inverseprimary);
+
+    /* Outline
+      for borders outline
+      for dividers outline variant
+
+     https://m3.material.io/styles/color/roles#cdd40805-d18c-4cd7-80b0-077b6b4a6b19
+    */
+    --color-outline: var(--lk-outline);
+    --color-outlinevariant: var(--lk-outlinevariant);
+
+    --color-shadow: var(--lk-shadow);
+    --color-scrim: var(--lk-scrim);
+
+    /* Shadow */
+    --shadow-sm: var(--lk-shadow-sm);
+    --shadow-md: var(--lk-shadow-md);
+    --shadow-lg: var(--lk-shadow-lg);
+    --shadow-xl: var(--lk-shadow-xl);
+    --shadow-2xl: var(--lk-shadow-2xl);
+
+    /* Border radius */
+    --rounded-3xs: var(--lk-size-3xs);
+    --rounded-2xs: var(--lk-size-2xs);
+    --rounded-xs: var(--lk-size-xs);
+    --rounded-sm: var(--lk-size-sm);
+    --rounded-md: var(--lk-size-md);
+    --rounded-lg: var(--lk-size-lg);
+    --rounded-xl: var(--lk-size-xl);
+    --rounded-2xl: var(--lk-size-2xl);
+    --rounded-3xl: var(--lk-size-3xl);
+    --rounded-4xl: var(--lk-size-4xl);
+
+    /* Scale */
+    --scale-up-w: var(--wholestep);
+    --scale-up-h: var(--halfstep);
+    --scale-up-q: var(--quarterstep);
+    --scale-down-w: calc(1 / var(--wholestep));
+    --scale-down-h: calc(1 / var(--halfstep));
+    --scale-down-q: calc(1 / var(--quarterstep));
+}
+
+@utility display1 {
+    --lineHeightInEms: calc(1em * var(--lk-quarterstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--display1-font-size);
+    font-weight: 400;
+    line-height: var(--lk-quarterstep);
+
+    @variant max-tablet {
+        font-size: 3.3301em;
+    }
+
+    @variant max-mobile {
+        font-size: 2.61743em;
+    }
+}
+
+@utility display1-bold {
+    --lineHeightInEms: calc(1em * var(--lk-quarterstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--display1-font-size);
+    font-weight: 700;
+    line-height: var(--lk-quarterstep);
+
+    @variant max-tablet {
+        font-size: 3.3301em;
+    }
+
+    @variant max-mobile {
+        font-size: 2.61743em;
+    }
+}
+
+@utility display2 {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--display2-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+
+    @variant max-mobile {
+        font-size: 2.05818em;
+    }
+}
+
+@utility display2-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--display2-font-size);
+    font-weight: 700;
+    line-height: var(--lk-halfstep);
+
+    @variant max-mobile {
+        font-size: 2.05818em;
+    }
+}
+
+@utility title1 {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--title1-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+
+    @variant max-mobile {
+        font-size: 1.82285em;
+    }
+}
+
+@utility title1-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.022em;
+    font-size: var(--title1-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+
+    @variant max-mobile {
+        font-size: 1.82285em;
+    }
+}
+
+@utility title2 {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.02em;
+    font-size: var(--title2-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+}
+
+@utility title2-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.02em;
+    font-size: var(--title2-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility title3 {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.017em;
+    font-size: var(--title3-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+}
+
+@utility title3-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.017em;
+    font-size: var(--title3-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility heading {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.014em;
+    font-size: var(--heading-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility heading-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.014em;
+    font-size: var(--heading-font-size);
+    font-weight: 700;
+    line-height: var(--lk-halfstep);
+}
+
+@utility subheading {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.007em;
+    font-size: var(--subheading-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+}
+
+@utility subheading-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.007em;
+    font-size: var(--subheading-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility body {
+    --lineHeightInEms: calc(1em * var(--lk-wholestep));
+    --spacing-md: var(--lineHeightInEms);
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.011em;
+    font-size: 1em;
+    font-weight: 400;
+    line-height: var(--lk-wholestep);
+}
+
+@utility body-bold {
+    --lineHeightInEms: calc(1em * var(--lk-wholestep));
+    --spacing-md: var(--lineHeightInEms);
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.011em;
+    padding: 0;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility callout {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.009em;
+    font-size: var(--callout-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+}
+
+@utility callout-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.009em;
+    font-size: var(--callout-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+    text-decoration: none;
+}
+
+@utility label {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.004em;
+    font-size: var(--label-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility label-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.004em;
+    font-size: var(--label-font-size);
+    font-weight: 700;
+    line-height: var(--lk-halfstep);
+}
+
+@utility caption {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.007em;
+    font-size: var(--caption-font-size);
+    font-weight: 400;
+    line-height: var(--lk-halfstep);
+}
+
+@utility caption-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: -0.007em;
+    font-size: var(--caption-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility capline {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-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);
+}
+
+@utility capline-bold {
+    --lineHeightInEms: calc(1em * var(--lk-halfstep));
+    --spacing-md: var(--lineHeightInEms);
+
+    --spacing-sm: calc(var(--lineHeightInEms) * var(--lk-wholestep-dec));
+    --spacing-xs: calc(var(--lineHeightInEms) * var(--lk-halfstep-dec));
+    --spacing-2xs: calc(var(--lineHeightInEms) * var(--lk-quarterstep-dec));
+
+    --spacing-lg: calc(var(--lineHeightInEms) * var(--lk-wholestep));
+    --spacing-xl: calc(var(--spacing-lg) * var(--lk-wholestep));
+    --spacing-2xl: calc(var(--spacing-xl) * var(--lk-wholestep));
+
+    letter-spacing: 0.0618em;
+    text-transform: uppercase;
+    font-size: var(--capline-font-size);
+    font-weight: 600;
+    line-height: var(--lk-halfstep);
+}
+
+@utility scrim {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--lk-scrim);
+    opacity: 0.5;
+    z-index: -1;
+}

package/css/index.d.ts

@@ -0,0 +1,6 @@
+export * from "@/registry/universal/lib/css/types/lk-color";
+export * from "@/registry/universal/lib/css/types/lk-material";
+export * from "@/registry/universal/lib/css/types/lk-shape";
+export * from "@/registry/universal/lib/css/types/lk-typography";
+export * from "@/registry/universal/lib/css/types/lk-units";
+export * from "@/registry/universal/lib/css/types/lk-utility";