@liftkit-vue/theme-css 0.1.0

package/css/liftkitvars.css

@@ -0,0 +1,378 @@
+:root {
+  font-size: 16px;
+
+  --lk-scalefactor: 1.618;
+  --lk-wholestep: 1.618;
+  --lk-halfstep: 1.272;
+  --lk-quarterstep: 1.128;
+  --lk-eighthstep: 1.062;
+
+  --lk-wholestep-dec: 0.618;
+  --lk-halfstep-dec: 0.272;
+  --lk-quarterstep-dec: 0.128;
+  --lk-eighthstep-dec: 0.062;
+
+  --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(var(--lk-size-sm) / var(--lk-scalefactor));
+  --lk-size-2xs: calc(var(--lk-size-xs) / var(--lk-scalefactor));
+  --lk-size-3xs: calc(var(--lk-size-2xs) / var(--lk-scalefactor));
+  --lk-size-lg: calc(1em * var(--lk-scalefactor));
+  --lk-size-xl: calc(var(--lk-size-lg) * var(--lk-scalefactor));
+  --lk-size-2xl: calc(var(--lk-size-xl) * var(--lk-scalefactor));
+  --lk-size-3xl: calc(var(--lk-size-2xl) * var(--lk-scalefactor));
+  --lk-size-4xl: calc(var(--lk-size-3xl) * var(--lk-scalefactor));
+
+  /* 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 * var(--lk-wholestep) * var(--lk-wholestep));
+  --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 */
+  --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);
+  }
+}