@liftkit-vue/core 0.1.0 → 0.2.1

package/src/css/liftkit-core.css

@@ -1,465 +1,6 @@
-/* @import "../liftkit/index.css"; */
-
-/* Random comment */
-
-:root {
-  font-size: 1rem;
-  --lk-scalefactor: 1.618;
-  /* these are the only two you set manually */
-
-  --lk-wholestep: var(--lk-scalefactor);
-  /* equals scalefactor */
-  /* 1.272 */
-  --lk-halfstep: calc(round(pow(var(--lk-scalefactor), 0.5), 0.001));
-  /* sqrt wholestep 1.128 */
-  --lk-quarterstep: round(pow(var(--lk-scalefactor), 0.25), 0.001);
-  /* sqrt halfstep 1.062*/
-  --lk-eighthstep: round(pow(var(--lk-scalefactor), 0.125), 0.001);
-  /* sqrt quarterstep:  */
-  --lk-wholestep-dec: calc(var(--lk-wholestep) - 1);
-  /* wholestep -1 */
-  --lk-halfstep-dec: calc(var(--lk-halfstep) - 1);
-  /* halfstep -1 */
-  --lk-quarterstep-dec: calc(var(--lk-quarterstep) - 1);
-  /* quarterstep -1 */
-  --lk-eighthstep-dec: calc(var(--lk-eighthstep) - 1);
-  /* eighthstep -1 */
-
-  --lk-size-md: 1em;
-  /* It's okay to use em here because the root font size
-                  has been manually set to 1rem */
-  --lk-size-sm: calc(1em / var(--lk-scalefactor));
-  --lk-size-xs: calc(1em * round(pow(var(--lk-scalefactor), -1), 0.001));
-  --lk-size-2xs: calc(1em * round(pow(var(--lk-scalefactor), -2), 0.001));
-  --lk-size-3xs: calc(1em * round(pow(var(--lk-scalefactor), -3), 0.001));
-  --lk-size-lg: calc(1em * var(--lk-scalefactor));
-  --lk-size-xl: calc(1em * round(pow(var(--lk-scalefactor), 2), 0.001));
-  --lk-size-2xl: calc(1em * round(pow(var(--lk-scalefactor), 3), 0.001));
-  --lk-size-3xl: calc(1em * round(pow(var(--lk-scalefactor), 4), 0.001));
-  --lk-size-4xl: calc(1em * round(pow(var(--lk-scalefactor), 5), 0.001));
-
-
-  /* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
-  /* NOTE: in calc() with multiplication or division the right side must be a unitless number */
-
-  --lk-size-sm-unitless: calc(1 / var(--lk-scalefactor));
-  --lk-size-xs-unitless: calc(var(--lk-size-sm-unitless) / var(--lk-scalefactor));
-  --lk-size-2xs-unitless: calc(var(--lk-size-xs-unitless) / var(--lk-scalefactor));
-  --lk-size-lg-unitless: calc(1 * var(--lk-scalefactor));
-  --lk-size-xl-unitless: calc(var(--lk-size-lg-unitless) * var(--lk-scalefactor));
-  --lk-size-2xl-unitless: calc(var(--lk-size-xl-unitless) * var(--lk-scalefactor));
-
-  /*Increments*/
-
-  /* Colors */
-
-  --light__primary_lkv: #0051e0;
-  --light__onprimary_lkv: #faf8ff;
-  --light__primarycontainer_lkv: #dbe1ff;
-  --light__onprimarycontainer_lkv: #00174d;
-  --light__secondary_lkv: #40617f;
-  --light__onsecondary_lkv: #f7f9ff;
-  --light__secondarycontainer_lkv: #cde5ff;
-  --light__onsecondarycontainer_lkv: #001d32;
-  --light__tertiary_lkv: #006878;
-  --light__ontertiary_lkv: #f0fbff;
-  --light__tertiarycontainer_lkv: #a8edff;
-  --light__ontertiarycontainer_lkv: #001f25;
-  --light__error_lkv: #bb0e45;
-  --light__onerror_lkv: #fff8f7;
-  --light__errorcontainer_lkv: #ffd9dc;
-  --light__onerrorcontainer_lkv: #400012;
-  --light__background_lkv: #fefbff;
-  --light__onbackground_lkv: #171b27;
-  --light__surface_lkv: #faf8ff;
-  --light__onsurface_lkv: #171b27;
-  --light__surfacevariant_lkv: #c8c6c6;
-  --light__onsurfacevariant_lkv: #464747;
-  --light__outline_lkv: #777777;
-  --light__outlinevariant_lkv: #c8c6c6;
-  --light__shadow_lkv: #000000;
-  --light__scrim_lkv: #000000;
-  --light__inversesurface_lkv: #2c303c;
-  --light__inverseonsurface_lkv: #eef0ff;
-  --light__inverseprimary_lkv: #b5c4ff;
-  --light__surfacedim_lkv: #d7d9ea;
-  --light__surfacebright_lkv: #faf8ff;
-  --light__surfacecontainerlowest_lkv: white;
-  --light__surfacecontainerlow_lkv: #f2f3ff;
-  --light__surfacecontainer_lkv: #ebedfe;
-  --light__surfacecontainerhigh_lkv: #e5e7f8;
-  --light__surfacecontainerhighest_lkv: #dfe2f2;
-  --light__warning_lkv: #7d5800;
-  --light__onwarning_lkv: #fff8f3;
-  --light__warningcontainer_lkv: #ffdea9;
-  --light__onwarningcontainer_lkv: #271900;
-  --light__success_lkv: #006b55;
-  --light__onsuccess_lkv: #e6fff4;
-  --light__successcontainer_lkv: #20ffce;
-  --light__onsuccesscontainer_lkv: #002118;
-  --light__info_lkv: #004ee7;
-  --light__oninfo_lkv: #faf8ff;
-  --light__infocontainer_lkv: #dce1ff;
-  --light__oninfocontainer_lkv: #001550;
-  --dark__primary_lkv: #b5c4ff;
-  --dark__onprimary_lkv: #00297a;
-  --dark__primarycontainer_lkv: #003cac;
-  --dark__onprimarycontainer_lkv: #dbe1ff;
-  --dark__secondary_lkv: #a8caec;
-  --dark__onsecondary_lkv: #0b334f;
-  --dark__secondarycontainer_lkv: #274a66;
-  --dark__onsecondarycontainer_lkv: #cde5ff;
-  --dark__tertiary_lkv: #00d9fa;
-  --dark__ontertiary_lkv: #00363f;
-  --dark__tertiarycontainer_lkv: #004e5b;
-  --dark__ontertiarycontainer_lkv: #a8edff;
-  --dark__error_lkv: #ffb2bb;
-  --dark__onerror_lkv: #670021;
-  --dark__errorcontainer_lkv: #910032;
-  --dark__onerrorcontainer_lkv: #ffd9dc;
-  --dark__background_lkv: #171b27;
-  --dark__onbackground_lkv: #d1d4e4;
-  --dark__surface_lkv: #222531;
-  --dark__onsurface_lkv: #c3c6d6;
-  --dark__surfacevariant_lkv: #303030;
-  --dark__onsurfacevariant_lkv: #acabab;
-  --dark__outline_lkv: #464747;
-  --dark__outlinevariant_lkv: #303030;
-  --dark__shadow_lkv: #000000;
-  --dark__scrim_lkv: #000000;
-  --dark__inversesurface_lkv: #faf8ff;
-  --dark__inverseonsurface_lkv: #171b27;
-  --dark__inverseprimary_lkv: #b5c4ff;
-  --dark__surfacedim_lkv: #20232f;
-  --dark__surfacebright_lkv: #434653;
-  --dark__surfacecontainerlowest_lkv: #1b1f2b;
-  --dark__surfacecontainerlow_lkv: #262a36;
-  --dark__surfacecontainer_lkv: #2c303c;
-  --dark__surfacecontainerhigh_lkv: #353945;
-  --dark__surfacecontainerhighest_lkv: #3e424f;
-  --dark__warning_lkv: #ffba28;
-  --dark__onwarning_lkv: #422c00;
-  --dark__warningcontainer_lkv: #5e4100;
-  --dark__onwarningcontainer_lkv: #ffdea9;
-  --dark__success_lkv: #00e0b4;
-  --dark__onsuccess_lkv: #00382b;
-  --dark__successcontainer_lkv: #00513f;
-  --dark__onsuccesscontainer_lkv: #20ffce;
-  --dark__info_lkv: #b6c4ff;
-  --dark__oninfo_lkv: #00277f;
-  --dark__infocontainer_lkv: #003ab1;
-  --dark__oninfocontainer_lkv: #dce1ff;
-  --light__primaryfixed_lkv: #dbe1ff;
-  --light__primaryfixeddim_lkv: #b5c4ff;
-  --light__onprimaryfixed_lkv: #00174d;
-  --light__onprimaryfixedvariant_lkv: #003cac;
-  --light__secondaryfixed_lkv: #cde5ff;
-  --light__secondaryfixeddim_lkv: #a8caec;
-  --light__onsecondaryfixed_lkv: #001d32;
-  --light__onsecondaryfixedvariant_lkv: #274a66;
-  --light__tertiaryfixed_lkv: #a8edff;
-  --light__tertiaryfixeddim_lkv: #00d9fa;
-  --light__ontertiaryfixed_lkv: #001f25;
-  --light__ontertiaryfixedvariant_lkv: #004e5b;
-  --dark__primaryfixed_lkv: #dbe1ff;
-  --dark__primaryfixeddim_lkv: #b5c4ff;
-  --dark__onprimaryfixed_lkv: #00174d;
-  --dark__onprimaryfixedvariant_lkv: #003cac;
-  --dark__secondaryfixed_lkv: #cde5ff;
-  --dark__secondaryfixeddim_lkv: #a8caec;
-  --dark__onsecondaryfixed_lkv: #001d32;
-  --dark__onsecondaryfixedvariant_lkv: #274a66;
-  --dark__tertiaryfixed_lkv: #a8edff;
-  --dark__tertiaryfixeddim_lkv: #00d9fa;
-  --dark__ontertiaryfixed_lkv: #001f25;
-  --dark__ontertiaryfixedvariant_lkv: #004e5b;
-
-  --lk-onprimary: var(--light__onprimary_lkv);
-  --lk-primarycontainer: var(--light__primarycontainer_lkv);
-  --lk-onprimarycontainer: var(--light__onprimarycontainer_lkv);
-  --lk-secondary: var(--light__secondary_lkv);
-  --lk-onsecondary: var(--light__onsecondary_lkv);
-  --lk-secondarycontainer: var(--light__secondarycontainer_lkv);
-  --lk-onsecondarycontainer: var(--light__onsecondarycontainer_lkv);
-  --lk-tertiary: var(--light__tertiary_lkv);
-  --lk-ontertiary: var(--light__ontertiary_lkv);
-  --lk-tertiarycontainer: var(--light__tertiarycontainer_lkv);
-  --lk-ontertiarycontainer: var(--light__ontertiarycontainer_lkv);
-  --lk-onerror: var(--light__onerror_lkv);
-  --lk-errorcontainer: var(--light__errorcontainer_lkv);
-  --lk-onerrorcontainer: var(--light__onerrorcontainer_lkv);
-  --lk-background: var(--light__background_lkv);
-  --lk-onbackground: var(--light__onbackground_lkv);
-  --lk-surface: var(--light__surface_lkv);
-  --lk-onsurface: var(--light__onsurface_lkv);
-  --lk-onsurfacevariant: var(--light__onsurfacevariant_lkv);
-  --lk-surfacevariant: var(--light__surfacevariant_lkv);
-  --lk-shadow: var(--light__shadow_lkv);
-  --lk-inversesurface: var(--light__inversesurface_lkv);
-  --lk-scrim: var(--light__scrim_lkv);
-  --lk-inverseonsurface: var(--light__inverseonsurface_lkv);
-  --lk-inverseprimary: var(--light__inverseprimary_lkv);
-  --lk-success: var(--light__success_lkv);
-  --lk-onsuccess: var(--light__onsuccess_lkv);
-  --lk-successcontainer: var(--light__successcontainer_lkv);
-  --lk-onsuccesscontainer: var(--light__onsuccesscontainer_lkv);
-  --lk-warning: var(--light__warning_lkv);
-  --lk-onwarning: var(--light__onwarning_lkv);
-  --lk-warningcontainer: var(--light__warningcontainer_lkv);
-  --lk-onwarningcontainer: var(--light__onwarningcontainer_lkv);
-  --lk-info: var(--light__info_lkv);
-  --lk-oninfo: var(--light__oninfo_lkv);
-  --lk-infocontainer: var(--light__infocontainer_lkv);
-  --lk-oninfocontainer: var(--light__oninfocontainer_lkv);
-  --lk-primaryfixed: var(--light__primaryfixed_lkv);
-  --lk-onprimaryfixed: var(--light__onprimaryfixed_lkv);
-  --lk-primaryfixeddim: var(--light__primaryfixeddim_lkv);
-  --lk-onprimaryfixedvariant: var(--light__onprimaryfixedvariant_lkv);
-  --lk-secondaryfixed: var(--light__secondaryfixed_lkv);
-  --lk-secondaryfixeddim: var(--light__secondaryfixeddim_lkv);
-  --lk-onsecondaryfixed: var(--light__onsecondaryfixed_lkv);
-  --lk-onsecondaryfixedvariant: var(--light__onsecondaryfixedvariant_lkv);
-  --lk-tertiaryfixed: var(--light__tertiaryfixed_lkv);
-  --lk-ontertiaryfixed: var(--light__ontertiaryfixed_lkv);
-  --lk-tertiaryfixeddim: var(--light__tertiaryfixeddim_lkv);
-  --lk-ontertiaryfixedvariant: var(--light__ontertiaryfixedvariant_lkv);
-  --lk-surfacedim: var(--light__surfacedim_lkv);
-  --lk-surfacebright: var(--light__surfacebright_lkv);
-  --lk-surfacecontainerlowest: var(--light__surfacecontainerlowest_lkv);
-  --lk-surfacecontainer: var(--light__surfacecontainer_lkv);
-  --lk-surfacecontainerhigh: var(--light__surfacecontainerhigh_lkv);
-  --lk-surfacecontainerhighest: var(--light__surfacecontainerhighest_lkv);
-  --lk-surfacecontainerlow: var(--light__surfacecontainerlow_lkv);
-  --lk-outlinevariant: var(--light__outlinevariant_lkv);
-  --lk-outline: var(--light__outline_lkv);
-  --lk-error: var(--light__error_lkv);
-  --lk-primary: var(--light__primary_lkv);
-
-  /* Make text look sharper */
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-smooth: never;
-
-  /************ Font Size Vars ************/
-
-  /* DEBUGGING TIP: The CSS rules for calc() define unique laws for adding, subtracating, multiplying, and dividing.
-   * In addition and subtraction, both sides must have the same unit.
-   * In multiplication, one side must be unitless.
-   * In division, the right side must be unitless.
-  */
-
-  --display1-font-size: calc(1em * pow(var(--lk-wholestep), 3));
-  --display2-font-size: calc(1em * pow(var(--lk-wholestep), 2));
-  --title1-font-size: calc(1em * var(--lk-wholestep) * var(--lk-halfstep));
-  --title2-font-size: calc(1em * var(--lk-wholestep));
-  --title3-font-size: calc(1em * var(--lk-halfstep));
-  --heading-font-size: calc(1em * var(--lk-quarterstep));
-  --subheading-font-size: calc(1em / var(--lk-quarterstep));
-  --body-font-size: 1em;
-  --callout-font-size: calc(1em / var(--lk-eighthstep));
-  --label-font-size: calc((1em / var(--lk-quarterstep)) / var(--lk-eighthstep));
-  --caption-font-size: calc(1em / var(--lk-halfstep));
-  --capline-font-size: calc(1em / var(--lk-halfstep));
-
-  /* Font Line Height Vars (UNITLESS!) */
-
-  --display1-line-height: var(--lk-quarterstep);
-  --display2-line-height: var(--lk-halfstep);
-  --title1-line-height: var(--lk-halfstep);
-  --title2-line-height: var(--lk-halfstep);
-  --title3-line-height: var(--lk-halfstep);
-  --heading-line-height: var(--lk-halfstep);
-  --subheading-line-height: var(--lk-halfstep);
-  --body-line-height: var(--lk-wholestep);
-  --callout-line-height: var(--lk-halfstep);
-  --label-line-height: var(--lk-halfstep);
-  --caption-line-height: var(--lk-halfstep);
-  --capline-line-height: var(--lk-halfstep);
-
-  /* Optical Top Padding Offsets and Border Radii for Cards */
-  /* Produce padding values for the insides of cards or other containers on sides that
-     optically look imbalanced even though mathematically they're symmetrical. Like in the first liftkit video. */
-
-  --display1-offset: calc(var(--display1-font-size) * calc(var(--display1-line-height) / var(--lk-wholestep)));
-  --display2-offset: calc(var(--display2-font-size) * calc(var(--display2-line-height) / var(--lk-wholestep)));
-  --title1-offset: calc(var(--title1-font-size) * calc(var(--title1-line-height) / var(--lk-wholestep)));
-  --title2-offset: calc(var(--title2-font-size) * calc(var(--title2-line-height) / var(--lk-wholestep)));
-  --title3-offset: calc(var(--title3-font-size) * calc(var(--title3-line-height) / var(--lk-wholestep)));
-  --heading-offset: calc(var(--heading-font-size) * calc(var(--heading-line-height) / var(--lk-wholestep)));
-  --subheading-offset: calc(var(--subheading-font-size) * calc(var(--subheading-line-height) / var(--lk-wholestep)));
-  --body-offset: calc(var(--body-font-size) / var(--lk-wholestep));
-  --callout-offset: calc(var(--callout-font-size) * calc(var(--callout-line-height) / var(--lk-wholestep)));
-  --label-offset: calc(var(--label-font-size) * calc(var(--label-line-height) / var(--lk-wholestep)));
-  --caption-offset: calc(var(--caption-font-size) * calc(var(--caption-line-height) / var(--lk-wholestep)));
-  --capline-offset: calc(var(--capline-font-size) * calc(var(--capline-line-height) / var(--lk-wholestep)));
-
-  /* shadows */
-  --shadow-sm: 0 0 1px 0 var(--lk-shadow);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.11),
-    0 0 1px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 11px 15px -3px rgba(0, 0, 0, 0.11),
-    0 2px 6px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.4);
-  --shadow-xl: 0px 0px 1px 0px var(--lk-outline),
-    0px 50px 100px 0px rgba(0, 0, 0, 0.15);
-  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.1),
-    0 0 1px rgba(0, 0, 0, 0.4);
-
-  /* Global Scale Factors - Used for ad hoc calculations in the component tree leaves */
-
-  --display1BoxHeight: calc(var(--display1-font-size) * var(--display1-line-height));
-  --display2BoxHeight: calc(var(--display2-font-size) * var(--display2-line-height));
-  --title1BoxHeight: calc(var(--title1-font-size) * var(--title1-line-height));
-  --title2BoxHeight: calc(var(--title2-font-size) * var(--title2-line-height));
-  --title3BoxHeight: calc(var(--title3-font-size) * var(--title3-line-height));
-  --headingBoxHeight: calc(var(--heading-font-size) * var(--heading-line-height));
-  --subheadingBoxHeight: calc(var(--subheading-font-size) * var(--subheading-line-height));
-  --bodyBoxHeight: calc(var(--body-font-size) * var(--body-line-height));
-  --calloutBoxHeight: calc(var(--callout-font-size) * var(--callout-line-height));
-  --labelBoxHeight: calc(var(--label-font-size) * var(--label-line-height));
-  --captionBoxHeight: calc(var(--caption-font-size) * var(--caption-line-height));
-  --caplineBoxHeight: calc(var(--capline-font-size) * var(--capline-line-height));
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-
-  :root {
-    --lk-onprimary: var(--dark__onprimary_lkv);
-    --lk-primarycontainer: var(--dark__primarycontainer_lkv);
-    --lk-onprimarycontainer: var(--dark__onprimarycontainer_lkv);
-    --lk-secondary: var(--dark__secondary_lkv);
-    --lk-onsecondary: var(--dark__onsecondary_lkv);
-    --lk-secondarycontainer: var(--dark__secondarycontainer_lkv);
-    --lk-onsecondarycontainer: var(--dark__onsecondarycontainer_lkv);
-    --lk-tertiary: var(--dark__tertiary_lkv);
-    --lk-ontertiary: var(--dark__ontertiary_lkv);
-    --lk-tertiarycontainer: var(--dark__tertiarycontainer_lkv);
-    --lk-ontertiarycontainer: var(--dark__ontertiarycontainer_lkv);
-    --lk-onerror: var(--dark__onerror_lkv);
-    --lk-errorcontainer: var(--dark__errorcontainer_lkv);
-    --lk-onerrorcontainer: var(--dark__onerrorcontainer_lkv);
-    --lk-background: var(--dark__background_lkv);
-    --lk-onbackground: var(--dark__onbackground_lkv);
-    --lk-surface: var(--dark__surface_lkv);
-    --lk-onsurface: var(--dark__onsurface_lkv);
-    --lk-onsurfacevariant: var(--dark__onsurfacevariant_lkv);
-    --lk-surfacevariant: var(--dark__surfacevariant_lkv);
-    --lk-shadow: var(--dark__shadow_lkv);
-    --lk-inversesurface: var(--dark__inversesurface_lkv);
-    --lk-scrim: var(--dark__scrim_lkv);
-    --lk-inverseonsurface: var(--dark__inverseonsurface_lkv);
-    --lk-inverseprimary: var(--dark__inverseprimary_lkv);
-    --lk-success: var(--dark__success_lkv);
-    --lk-onsuccess: var(--dark__onsuccess_lkv);
-    --lk-successcontainer: var(--dark__successcontainer_lkv);
-    --lk-onsuccesscontainer: var(--dark__onsuccesscontainer_lkv);
-    --lk-warning: var(--dark__warning_lkv);
-    --lk-onwarning: var(--dark__onwarning_lkv);
-    --lk-warningcontainer: var(--dark__warningcontainer_lkv);
-    --lk-onwarningcontainer: var(--dark__onwarningcontainer_lkv);
-    --lk-info: var(--dark__info_lkv);
-    --lk-oninfo: var(--dark__oninfo_lkv);
-    --lk-infocontainer: var(--dark__infocontainer_lkv);
-    --lk-oninfocontainer: var(--dark__oninfocontainer_lkv);
-    --lk-primaryfixed: var(--dark__primaryfixed_lkv);
-    --lk-onprimaryfixed: var(--dark__onprimaryfixed_lkv);
-    --lk-primaryfixeddim: var(--dark__primaryfixeddim_lkv);
-    --lk-onprimaryfixedvariant: var(--dark__onprimaryfixedvariant_lkv);
-    --lk-secondaryfixed: var(--dark__secondaryfixed_lkv);
-    --lk-secondaryfixeddim: var(--dark__secondaryfixeddim_lkv);
-    --lk-onsecondaryfixed: var(--dark__onsecondaryfixed_lkv);
-    --lk-onsecondaryfixedvariant: var(--dark__onsecondaryfixedvariant_lkv);
-    --lk-tertiaryfixed: var(--dark__tertiaryfixed_lkv);
-    --lk-ontertiaryfixed: var(--dark__ontertiaryfixed_lkv);
-    --lk-tertiaryfixeddim: var(--dark__tertiaryfixeddim_lkv);
-    --lk-ontertiaryfixedvariant: var(--dark__ontertiaryfixedvariant_lkv);
-    --lk-surfacedim: var(--dark__surfacedim_lkv);
-    --lk-surfacebright: var(--dark__surfacebright_lkv);
-    --lk-surfacecontainerlowest: var(--dark__surfacecontainerlowest_lkv);
-    --lk-surfacecontainer: var(--dark__surfacecontainer_lkv);
-    --lk-surfacecontainerhigh: var(--dark__surfacecontainerhigh_lkv);
-    --lk-surfacecontainerhighest: var(--dark__surfacecontainerhighest_lkv);
-    --lk-surfacecontainerlow: var(--dark__surfacecontainerlow_lkv);
-    --lk-outlinevariant: var(--dark__outlinevariant_lkv);
-    --lk-outline: var(--dark__outline_lkv);
-    --lk-error: var(--dark__error_lkv);
-    --lk-primary: var(--dark__primary_lkv);
-  }
-}
-
-/* Everything from here is done to disable native display behavior of HTML elements
-
-/* TODO: Consider a more robust noramlizing solution. there's gotta be open source solutions to this.
-
+/* LiftKit Core - 後方互換ラッパー
+   トークン（CSS変数）とリセット（要素セレクタ）の両方をインポート。
+   トークンのみが必要な場合は liftkit-tokens.css を直接インポートすること。
 */
-
-html,
-body {
-  max-width: 100vw;
-  color: var(--lk-onbackground);
-  background: var(--lk-background);
-  color-scheme: dark;
-}
-
-input:focus-visible {
-  outline: none;
-}
-
-body {
-  color: var(--lk-onbackground);
-  background: var(--lk-background);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--lk-onbackground);
-  background-color: var(--lk-background);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.swatch {
-  padding: calc(1.272em / var(--lk-size-xl-unitless)) var(--lk-size-sm);
-  border-radius: var(--lk-size-xs);
-  margin: var(--lk-size-sm) 0;
-}
-
-/* Make Buttons into Inline Elements */
-
-button {
-  --button-font-size: var(--lk-size-md);
-  --button-line-height: var(--lk-halfstep);
-  --button-padX-default: var(--lk-size-md);
-  --button-padX-sideWithIcon: calc(1em * calc(var(--lk-wholestep) / var(--lk-size-xl-unitless)));
-  --button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless)));
-  --button-gap: var(--button-padX-sideWithIcon);
-  /* In division, the second value MUST be unitless */
-  display: inline-block;
-  border: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 100em;
-  position: relative;
-  text-decoration: none;
-  white-space: normal;
-  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);
-}
-
-button span {
-  text-transform: capitalize;
-}
+@import "./liftkit-tokens.css";
+@import "./liftkit-reset.css";

package/src/css/liftkit-reset.css

@@ -0,0 +1,74 @@
+/* LiftKit Reset - 要素レベルセレクタ
+   HTML要素のネイティブ表示をリセットするスタイル。
+   外部UIフレームワーク（Nuxt UI等）と併用する場合は、このファイルを読み込まないこと。
+
+   TODO: Consider a more robust normalizing solution. there's gotta be open source solutions to this.
+*/
+
+html,
+body {
+  max-width: 100vw;
+  color: var(--lk-onbackground);
+  background: var(--lk-background);
+  color-scheme: dark;
+}
+
+input:focus-visible {
+  outline: none;
+}
+
+body {
+  color: var(--lk-onbackground);
+  background: var(--lk-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--lk-onbackground);
+  background-color: var(--lk-background);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.swatch {
+  padding: calc(1.272em / var(--lk-size-xl-unitless)) var(--lk-size-sm);
+  border-radius: var(--lk-size-xs);
+  margin: var(--lk-size-sm) 0;
+}
+
+/* Make Buttons into Inline Elements */
+
+button {
+  --button-font-size: var(--lk-size-md);
+  --button-line-height: var(--lk-halfstep);
+  --button-padX-default: var(--lk-size-md);
+  --button-padX-sideWithIcon: calc(1em * calc(var(--lk-wholestep) / var(--lk-size-xl-unitless)));
+  --button-padY: calc(var(--button-font-size) * calc(var(--lk-halfstep) / var(--lk-size-xl-unitless)));
+  --button-gap: var(--button-padX-sideWithIcon);
+  /* In division, the second value MUST be unitless */
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 100em;
+  position: relative;
+  text-decoration: none;
+  white-space: normal;
+  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);
+}
+
+button span {
+  text-transform: capitalize;
+}