@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

package/dist/utilities.css

@@ -3,266 +3,239 @@
 /* Text styles: one class per text style token. */
 
 /* Body copy in the base tier, the default UI and body text. */
-.text-style-base {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+.text-style-body-base {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
 /* The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. */
-.text-style-base-selected {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+.text-style-selected-base {
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
 }
 
 /* Form labels in the base tier, the default UI and body text. */
-.text-style-base-label {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+.text-style-label-base {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
 }
 
 /* Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. */
-.text-style-base-link {
-  font-family: var(--sl-font-base-link-font-family);
-  font-size: var(--sl-font-base-link-font-size);
-  font-weight: var(--sl-font-base-link-font-weight);
-  line-height: var(--sl-font-base-link-line-height);
-  letter-spacing: var(--sl-font-base-link-letter-spacing);
+.text-style-link-base {
+  font-family: var(--sl-font-link-base-font-family);
+  font-size: var(--sl-font-link-base-font-size);
+  font-weight: var(--sl-font-link-base-font-weight);
+  line-height: var(--sl-font-link-base-line-height);
+  letter-spacing: var(--sl-font-link-base-letter-spacing);
 }
 
 /* Subtitles in the base tier, the default UI and body text. */
-.text-style-base-subtitle {
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+.text-style-subtitle-base {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
 }
 
 /* Buttons and triggers in the base tier, the default UI and body text. */
-.text-style-base-trigger {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+.text-style-trigger-base {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
+}
+
+/* Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. */
+.text-style-title-base {
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
 }
 
 /* Code uses the mono family so characters line up. */
-.text-style-code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+.text-style-code-condense {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
 }
 
 /* Body copy in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+.text-style-body-condense {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 /* Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. */
-.text-style-condense-trigger {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+.text-style-trigger-condense {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
 }
 
 /* The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. */
-.text-style-condense-selected {
-  font-family: var(--sl-font-condense-selected-font-family);
-  font-size: var(--sl-font-condense-selected-font-size);
-  font-weight: var(--sl-font-condense-selected-font-weight);
-  line-height: var(--sl-font-condense-selected-line-height);
-  letter-spacing: var(--sl-font-condense-selected-letter-spacing);
+.text-style-selected-condense {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
 }
 
 /* Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. */
-.text-style-condense-link {
-  font-family: var(--sl-font-condense-link-font-family);
-  font-size: var(--sl-font-condense-link-font-size);
-  font-weight: var(--sl-font-condense-link-font-weight);
-  line-height: var(--sl-font-condense-link-line-height);
-  letter-spacing: var(--sl-font-condense-link-letter-spacing);
+.text-style-link-condense {
+  font-family: var(--sl-font-link-condense-font-family);
+  font-size: var(--sl-font-link-condense-font-size);
+  font-weight: var(--sl-font-link-condense-font-weight);
+  line-height: var(--sl-font-link-condense-line-height);
+  letter-spacing: var(--sl-font-link-condense-letter-spacing);
 }
 
 /* Subtitles in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle {
-  font-family: var(--sl-font-condense-subtitle-font-family);
-  font-size: var(--sl-font-condense-subtitle-font-size);
-  font-weight: var(--sl-font-condense-subtitle-font-weight);
-  line-height: var(--sl-font-condense-subtitle-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
+.text-style-subtitle-condense {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
 }
 
 /* Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle-label {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+.text-style-eyebrow-condense {
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
+}
+
+/* Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. */
+.text-style-title-condense {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
 }
 
 /* Body copy in the magnify tier, emphasized body text (lead paragraphs). */
-.text-style-magnify {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+.text-style-body-magnify {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
 /* Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. */
-.text-style-magnify-trigger {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+.text-style-trigger-magnify {
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
+}
+
+/* Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. */
+.text-style-title-magnify {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
 }
 
 /* Body copy in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+.text-style-body-minimize {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
 }
 
 /* Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. */
-.text-style-minimize-trigger {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+.text-style-trigger-minimize {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
 }
 
 /* The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. */
-.text-style-minimize-selected {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+.text-style-selected-minimize {
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
 /* Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. */
-.text-style-minimize-link {
-  font-family: var(--sl-font-minimize-link-font-family);
-  font-size: var(--sl-font-minimize-link-font-size);
-  font-weight: var(--sl-font-minimize-link-font-weight);
-  line-height: var(--sl-font-minimize-link-line-height);
-  letter-spacing: var(--sl-font-minimize-link-letter-spacing);
+.text-style-link-minimize {
+  font-family: var(--sl-font-link-minimize-font-family);
+  font-size: var(--sl-font-link-minimize-font-size);
+  font-weight: var(--sl-font-link-minimize-font-weight);
+  line-height: var(--sl-font-link-minimize-line-height);
+  letter-spacing: var(--sl-font-link-minimize-letter-spacing);
 }
 
 /* Subtitles in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle {
-  font-family: var(--sl-font-minimize-subtitle-font-family);
-  font-size: var(--sl-font-minimize-subtitle-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-letter-spacing);
+.text-style-subtitle-minimize {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
 }
 
 /* Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle-label {
-  font-family: var(--sl-font-minimize-subtitle-label-font-family);
-  font-size: var(--sl-font-minimize-subtitle-label-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-label-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-minimize-subtitle-label-text-transform);
-}
-
-/* Display text at 2xl, for headings and hero copy. */
-.text-style-maximize-2xl {
-  font-family: var(--sl-font-maximize-2xl-font-family);
-  font-size: var(--sl-font-maximize-2xl-font-size);
-  font-weight: var(--sl-font-maximize-2xl-font-weight);
-  line-height: var(--sl-font-maximize-2xl-line-height);
-  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
-}
-
-/* Display text at 3xl, for headings and hero copy. */
-.text-style-maximize-3xl {
-  font-family: var(--sl-font-maximize-3xl-font-family);
-  font-size: var(--sl-font-maximize-3xl-font-size);
-  font-weight: var(--sl-font-maximize-3xl-font-weight);
-  line-height: var(--sl-font-maximize-3xl-line-height);
-  letter-spacing: var(--sl-font-maximize-3xl-letter-spacing);
-}
-
-/* Display text at 4xl, for headings and hero copy. */
-.text-style-maximize-4xl {
-  font-family: var(--sl-font-maximize-4xl-font-family);
-  font-size: var(--sl-font-maximize-4xl-font-size);
-  font-weight: var(--sl-font-maximize-4xl-font-weight);
-  line-height: var(--sl-font-maximize-4xl-line-height);
-  letter-spacing: var(--sl-font-maximize-4xl-letter-spacing);
-}
-
-/* Display text at lg, for headings and hero copy. */
-.text-style-maximize-lg {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
-}
-
-/* Display text at md, for headings and hero copy. */
-.text-style-maximize-md {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
-}
-
-/* Display text at sm, for headings and hero copy. */
-.text-style-maximize-sm {
-  font-family: var(--sl-font-maximize-sm-font-family);
-  font-size: var(--sl-font-maximize-sm-font-size);
-  font-weight: var(--sl-font-maximize-sm-font-weight);
-  line-height: var(--sl-font-maximize-sm-line-height);
-  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
-}
-
-/* Display text at xl, for headings and hero copy. */
-.text-style-maximize-xl {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
-}
-
-/* Display text at xs, for headings and hero copy. */
-.text-style-maximize-xs {
-  font-family: var(--sl-font-maximize-xs-font-family);
-  font-size: var(--sl-font-maximize-xs-font-size);
-  font-weight: var(--sl-font-maximize-xs-font-weight);
-  line-height: var(--sl-font-maximize-xs-line-height);
-  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+.text-style-eyebrow-minimize {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+}
+
+/* Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. */
+.text-style-title-amplify {
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
+}
+
+/* Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. */
+.text-style-title-maximize {
+  font-family: var(--sl-font-title-maximize-font-family);
+  font-size: var(--sl-font-title-maximize-font-size);
+  font-weight: var(--sl-font-title-maximize-font-weight);
+  line-height: var(--sl-font-title-maximize-line-height);
+  letter-spacing: var(--sl-font-title-maximize-letter-spacing);
 }
 
 /* Responsive visibility from the breakpoint tokens. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Mojave, the demo theme for Loomiere: desert stone and purple, built from one brand file.",
   "repository": {
     "type": "git",
@@ -46,6 +46,7 @@
     "build": "loomiere build",
     "studio": "loomiere studio",
     "lab": "loomiere lab",
+    "figma": "loomiere figma push",
     "prepack": "loomiere build"
   },
   "publishConfig": {
@@ -61,6 +62,6 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.2.0"
+    "@scattered-light/loomiere": "0.4.0"
   }
 }