@dialpad/dialtone-css 1.0.0

package/lib/build/less/utilities/spacing.less

@@ -0,0 +1,107 @@
+//
+//  DIALTONE
+//  UTILITIES: SPACING
+//
+//  These are spacing utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/spacing
+//
+//  TABLE OF CONTENTS
+//  • AUTO-SPACING
+//    - VERTICALLY
+//    - HORIZONTALLY
+//  • MARGIN
+//  • PADDING
+//
+//  ============================================================================
+//  $   AUTO-SPACING
+//  ============================================================================
+//  $$  THE STACK
+//      Instead of stlying specific elements when we're unaware of their context,
+//      this applies margin to context. The margin is only applied when an
+//      element is proceeded by another element.
+//  ============================================================================
+//  $$   VERTICALLY
+//  ----------------------------------------------------------------------------
+.d-stack0   { > * + * { margin-top: 0 !important; } }
+.d-stack1   { > * + * { margin-top: var(--dt-space-100) !important; } }
+.d-stack2   { > * + * { margin-top: var(--dt-space-200) !important; } }
+.d-stack4   { > * + * { margin-top: var(--dt-space-300) !important; } }
+.d-stack6   { > * + * { margin-top: var(--dt-space-350) !important; } }
+.d-stack8   { > * + * { margin-top: var(--dt-space-400) !important; } }
+.d-stack12  { > * + * { margin-top: var(--dt-space-450) !important; } }
+.d-stack16  { > * + * { margin-top: var(--dt-space-500) !important; } }
+.d-stack24  { > * + * { margin-top: var(--dt-space-550) !important; } }
+.d-stack32  { > * + * { margin-top: var(--dt-space-600) !important; } }
+.d-stack48  { > * + * { margin-top: var(--dt-space-650) !important; } }
+.d-stack64  { > * + * { margin-top: var(--dt-space-700) !important; } }
+.d-stack72  { > * + * { margin-top: var(--dt-space-720) !important; } }
+.d-stack84  { > * + * { margin-top: var(--dt-space-730) !important; } }
+.d-stack96  { > * + * { margin-top: var(--dt-space-750) !important; } }
+.d-stack102 { > * + * { margin-top: var(--dt-space-760) !important; } }
+.d-stack114 { > * + * { margin-top: var(--dt-space-775) !important; } }
+.d-stack128 { > * + * { margin-top: var(--dt-space-800) !important; } }
+
+//  ============================================================================
+//  $$   HORIZONTALLY
+//  ----------------------------------------------------------------------------
+.d-flow0   { > * + * { margin-left: 0 !important; } }
+.d-flow1   { > * + * { margin-left: var(--dt-space-100) !important; } }
+.d-flow2   { > * + * { margin-left: var(--dt-space-200) !important; } }
+.d-flow4   { > * + * { margin-left: var(--dt-space-300) !important; } }
+.d-flow6   { > * + * { margin-left: var(--dt-space-350) !important; } }
+.d-flow8   { > * + * { margin-left: var(--dt-space-400) !important; } }
+.d-flow12  { > * + * { margin-left: var(--dt-space-450) !important; } }
+.d-flow16  { > * + * { margin-left: var(--dt-space-500) !important; } }
+.d-flow24  { > * + * { margin-left: var(--dt-space-550) !important; } }
+.d-flow32  { > * + * { margin-left: var(--dt-space-600) !important; } }
+.d-flow48  { > * + * { margin-left: var(--dt-space-650) !important; } }
+.d-flow64  { > * + * { margin-left: var(--dt-space-700) !important; } }
+.d-flow72  { > * + * { margin-left: var(--dt-space-720) !important; } }
+.d-flow84  { > * + * { margin-left: var(--dt-space-730) !important; } }
+.d-flow96  { > * + * { margin-left: var(--dt-space-750) !important; } }
+.d-flow102 { > * + * { margin-left: var(--dt-space-760) !important; } }
+.d-flow114 { > * + * { margin-left: var(--dt-space-775) !important; } }
+.d-flow128 { > * + * { margin-left: var(--dt-space-800) !important; } }
+
+//  ============================================================================
+//  $   MARGIN
+//  ----------------------------------------------------------------------------
+.d-m-auto { margin: auto !important; }
+.d-m-unset { margin: unset !important; }
+
+.d-mt-auto { margin-top: auto !important; }
+.d-mt-unset { margin-top: unset !important; }
+
+.d-mr-auto { margin-right: auto !important; }
+.d-mr-unset { margin-right: unset !important; }
+
+.d-mb-auto { margin-bottom: auto !important; }
+.d-mb-unset { margin-bottom: unset !important; }
+
+.d-ml-auto { margin-left: auto !important; }
+.d-ml-unset { margin-left: unset !important; }
+
+.d-mx-auto { margin-right: auto !important; margin-left: auto !important; }
+.d-mx-unset { margin-right: unset !important; margin-left: unset !important; }
+
+.d-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.d-my-unset { margin-top: unset !important; margin-bottom: unset !important; }
+
+
+//  ============================================================================
+//  $   PADDING
+//  ----------------------------------------------------------------------------
+.d-p-unset { padding: unset !important; }
+
+.d-pt-unset { padding-top: unset !important; }
+
+.d-pr-unset { padding-right: unset !important; }
+
+.d-pb-unset { padding-bottom: unset !important; }
+
+.d-pl-unset { padding-left: unset !important; }
+
+.d-px-unset { padding-right: unset !important; padding-left: unset !important; }
+
+.d-py-unset { padding-top: unset !important; padding-bottom: unset !important; }

package/lib/build/less/utilities/typography.less

@@ -0,0 +1,300 @@
+//
+//  DIALTONE
+//  UTILITIES: TYPOGRAPHY
+//
+//  These are utility typography classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilties/typography
+//
+//  TABLE OF CONTENTS
+//  • FONT FAMILY
+//  • RESET HEADERS & PARAGRAPH MARGINS
+//  • FONT SIZE
+//  • FONT STYLE
+//  • FONT WEIGHT
+//  • LINE HEIGHT
+//  • LISTS
+//  • TEXT ALIGN
+//  • TEXT DECORATION
+//  • TEXT OVERFLOW
+//  • TEXT TRANSFORM
+//  • VERTICAL ALIGN
+//  • WHITESPACE
+//  • WORD-BREAK
+//  • WORD-WRAP
+//
+//  ============================================================================
+//  $   FONT FAMILY
+//  ----------------------------------------------------------------------------
+.d-ff-custom { font-family: var(--dt-font-family-body) !important; }
+.d-ff-sans { font-family: var(--dt-font-family-body) !important; }
+.d-ff-mono { font-family: var(--dt-font-family-mono) !important; }
+.d-ff-marketing { font-family: var(--dt-font-family-expressive) !important; }
+.d-ff-unset { font-family: unset !important; }
+
+//  ============================================================================
+//  $   RESET HEADERS & PARAGRAPH MARGINS
+//  ----------------------------------------------------------------------------
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+//  ============================================================================
+//  $   BODY STYLES
+//  ----------------------------------------------------------------------------
+.d-body-base          { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); }
+.d-body-small         { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); }
+.d-body-compact       { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
+.d-body-compact-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
+
+//  ============================================================================
+//  $   LABEL STYLES
+//  ----------------------------------------------------------------------------
+.d-label-base                { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-semi-bold); }
+.d-label-small               { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-semi-bold); }
+.d-label-compact             { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-semi-bold); }
+.d-label-plain               { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); }
+.d-label-compact-plain       { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
+.d-label-compact-small       { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-semi-bold); }
+.d-label-plain-small         { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); }
+.d-label-compact-plain-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
+
+//  ============================================================================
+//  $   HELPER STYLES
+//  ----------------------------------------------------------------------------
+.d-helper-base  { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); }
+.d-helper-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
+
+//  ============================================================================
+//  $   CODE STYLES
+//  ----------------------------------------------------------------------------
+
+.d-code-base  { font-family: var(--dt-font-family-mono); line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-200); }
+.d-code-small { font-family: var(--dt-font-family-mono); line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); }
+
+//  ============================================================================
+//  $   FONT SIZE
+//  ----------------------------------------------------------------------------
+.d-fs-100 { font-size: var(--dt-font-size-100) !important; }
+.d-fs-200 { font-size: var(--dt-font-size-200) !important; }
+.d-fs-300 { font-size: var(--dt-font-size-300) !important; }
+.d-fs-400 { font-size: var(--dt-font-size-400) !important; }
+.d-fs-500 { font-size: var(--dt-font-size-500) !important; }
+
+.d-fs-100-mobile { font-size: var(--dt-font-size-100-mobile) !important; }
+.d-fs-200-mobile { font-size: var(--dt-font-size-200-mobile) !important; }
+.d-fs-300-mobile { font-size: var(--dt-font-size-300-mobile) !important; }
+.d-fs-400-mobile { font-size: var(--dt-font-size-400-mobile) !important; }
+.d-fs-500-mobile { font-size: var(--dt-font-size-500-mobile) !important; }
+
+.d-fs-100-tc8 { font-size: var(--dt-font-size-100-tc8) !important; }
+.d-fs-200-tc8 { font-size: var(--dt-font-size-200-tc8) !important; }
+.d-fs-300-tc8 { font-size: var(--dt-font-size-300-tc8) !important; }
+.d-fs-400-tc8 { font-size: var(--dt-font-size-400-tc8) !important; }
+.d-fs-500-tc8 { font-size: var(--dt-font-size-500-tc8) !important; }
+
+.d-fs-100-tv { font-size: var(--dt-font-size-100-tv) !important; }
+.d-fs-200-tv { font-size: var(--dt-font-size-200-tv) !important; }
+.d-fs-300-tv { font-size: var(--dt-font-size-300-tv) !important; }
+.d-fs-400-tv { font-size: var(--dt-font-size-400-tv) !important; }
+.d-fs-500-tv { font-size: var(--dt-font-size-500-tv) !important; }
+
+.d-headline10 { .d-fs-100(); font-weight: var(--dt-font-weight-bold); .d-tt-uppercase(); }
+.d-headline24 { .d-fs-300(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline28 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline32 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline36 { .d-fs-400(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline42 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline48 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
+.d-headline54 { .d-fs-500(); font-weight: var(--dt-font-weight-bold) !important; }
+
+.d-headline-eyebrow            { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-normal); .d-tt-uppercase(); }
+.d-headline-small              { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-bold); }
+.d-headline-soft-small         { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-medium); }
+.d-headline-medium             { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-bold); }
+.d-headline-compact-small      { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-bold); }
+.d-headline-compact-soft-small { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-100); font-weight: var(--dt-font-weight-medium); }
+.d-headline-compact-base,
+.d-headline-compact-medium     { line-height: var(--dt-font-line-height-300); font-size: var(--dt-font-size-200); font-weight: var(--dt-font-weight-bold); }
+.d-headline-compact-large      { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-300); font-weight: var(--dt-font-weight-bold); }
+.d-headline-large              { line-height: var(--dt-font-line-height-400); font-size: var(--dt-font-size-300); font-weight: var(--dt-font-weight-bold); }
+.d-headline-extra-large        { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-400); font-weight: var(--dt-font-weight-medium); }
+.d-headline-extra-extra-large  { line-height: var(--dt-font-line-height-200); font-size: var(--dt-font-size-500); font-weight: var(--dt-font-weight-medium); }
+
+.d-fs-unset { font-size: unset !important; }
+
+//  ============================================================================
+//  $$  FONT STYLE
+//  ----------------------------------------------------------------------------
+.d-fs-normal { font-style: normal !important; }
+.d-fs-italic { font-style: italic !important; }
+.d-fs-unset { font-style: unset !important; }
+
+
+//  ============================================================================
+//  $$  FONT WEIGHT
+//  ----------------------------------------------------------------------------
+.d-fw-normal { font-weight: var(--dt-font-weight-normal) !important; }
+.d-fw-medium { font-weight: var(--dt-font-weight-medium) !important; }
+.d-fw-semibold { font-weight: var(--dt-font-weight-semi-bold) !important; }
+.d-fw-bold { font-weight: var(--dt-font-weight-bold) !important; }
+.d-fw-unset { font-weight: unset !important; }
+
+
+//  ============================================================================
+//  $  LINE HEIGHT
+//  ----------------------------------------------------------------------------
+.d-lh0 { line-height: var(--lh0) !important; }
+.d-lh1 { line-height: var(--lh1) !important; }
+.d-lh2 { line-height: var(--lh2) !important; }
+.d-lh4 { line-height: var(--lh4) !important; }
+.d-lh6 { line-height: var(--lh6) !important; }
+.d-lh8 { line-height: var(--lh8) !important; }
+.d-lh12 { line-height: var(--lh12) !important; }
+.d-lh16 { line-height: var(--lh16) !important; }
+.d-lh20 { line-height: var(--lh20) !important; }
+.d-lh24 { line-height: var(--lh24) !important; }
+.d-lh-100 { line-height: var(--dt-font-line-height-100) !important; }
+.d-lh-200 { line-height: var(--dt-font-line-height-200) !important; }
+.d-lh-300 { line-height: var(--dt-font-line-height-300) !important; }
+.d-lh-400 { line-height: var(--dt-font-line-height-400) !important; }
+.d-lh-500 { line-height: var(--dt-font-line-height-500) !important; }
+.d-lh-600 { line-height: var(--dt-font-line-height-600) !important; }
+.d-lh-unset { line-height: unset !important; }
+
+
+//  ============================================================================
+//  $   LISTS
+//  ----------------------------------------------------------------------------
+.d-ls-reset {
+    //  We want to reset everything when applied
+    &,
+    li,
+    ol,
+    ul {
+        margin: 0;
+        padding: 0;
+        .d-ls-none();
+    }
+}
+.d-ls-none { list-style: none !important; }
+.d-lst-disc { list-style-type: disc !important; }
+.d-lst-circle { list-style-type: circle !important; }
+.d-lst-content { list-style-type: var(--ls-content) !important; }
+.d-lst-decimal { list-style-type: decimal !important; }
+.d-lst-none { list-style-type: none !important; }
+
+
+//  ============================================================================
+//  $$  TEXT ALIGN
+//  ----------------------------------------------------------------------------
+.d-ta-left { text-align: left !important; }
+.d-ta-right { text-align: right !important; }
+.d-ta-center { text-align: center !important; }
+.d-ta-justify { text-align: justify !important; }
+.d-ta-unset { text-align: unset !important; }
+
+
+//  ============================================================================
+//  $$  TEXT DECORATION
+//  ----------------------------------------------------------------------------
+.d-td-none { text-decoration: none !important; }
+.d-td-underline {
+    text-decoration: underline !important;
+    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
+    text-decoration-thickness: var(--dt-size-border-100) !important;
+}
+.d-td-dotted {
+    text-decoration: underline dotted !important;
+    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
+    text-decoration-thickness: var(--dt-size-border-100) !important;
+}
+.d-td-line-through { text-decoration: line-through !important; }
+.d-td-unset { text-decoration: unset !important; }
+
+
+//  ============================================================================
+//  $$  TEXT OVERFLOW
+//  ----------------------------------------------------------------------------
+.d-to-ellipsis { text-overflow: ellipsis !important; }
+.d-to-clip { text-overflow: clip !important; }
+.d-to-unset { text-overflow: unset !important; }
+
+//  $$  OVERFLOW WRAP
+//  ----------------------------------------------------------------------------
+.d-ow-normal { overflow-wrap: normal !important; }
+.d-ow-anywhere { overflow-wrap: anywhere !important; }
+.d-ow-break-word { overflow-wrap: break-word !important; }
+.d-ow-unset { overflow-wrap: unset !important; }
+
+//  ============================================================================
+//  $$  TEXT TRANSFORM
+//  ----------------------------------------------------------------------------
+.d-tt-uppercase { text-transform: uppercase !important; }
+.d-tt-lowercase { text-transform: lowercase !important; }
+.d-tt-capitalize { text-transform: capitalize !important; }
+.d-tt-full-width { text-transform: full-width !important; }
+.d-tt-none { text-transform: none !important; }
+.d-tt-unset { text-transform: unset !important; }
+
+
+//  ============================================================================
+//  $$  VERTICAL ALIGN
+//  ----------------------------------------------------------------------------
+.d-va-baseline { vertical-align: baseline !important; }
+.d-va-top { vertical-align: top !important; }
+.d-va-bottom { vertical-align: bottom !important; }
+.d-va-text-top { vertical-align: text-top !important; }
+.d-va-text-bottom { vertical-align: text-bottom !important; }
+.d-va-middle { vertical-align: middle !important; }
+.d-va-sub { vertical-align: sub !important; }
+.d-va-super { vertical-align: super !important; }
+.d-va-unset { vertical-align: unset !important; }
+
+
+//  ============================================================================
+//  $$  WHITESPACE
+//  ----------------------------------------------------------------------------
+.d-ws-normal { white-space: normal !important; }
+.d-ws-nowrap { white-space: nowrap !important; }
+.d-ws-pre { white-space: pre !important; }
+.d-ws-pre-line { white-space: pre-line !important; }
+.d-ws-pre-wrap { white-space: pre-wrap !important; }
+.d-ws-break-spaces { white-space: break-spaces !important; }
+.d-ws-unset { white-space: unset !important; }
+
+
+//  ============================================================================
+//  $$  WORD BREAK
+//  ----------------------------------------------------------------------------
+.d-wb-normal { word-break: normal !important; }
+.d-wb-break-all { word-break: break-all !important; }
+.d-wb-keep-all { word-break: keep-all !important; }
+.d-wb-unset { word-break: unset !important; }
+
+//  ============================================================================
+//  $$  WORD WRAP
+//  ----------------------------------------------------------------------------
+.d-ww-break-word { word-wrap: break-word !important; }
+.d-ww-normal { word-wrap: normal !important; }
+.d-ww-initial { word-wrap: initial !important; }
+.d-ww-inherit { word-wrap: inherit !important; }
+
+
+// Unsure what to do with this
+//  $$  TRUNCATE
+//  ----------------------------------------------------------------------------
+.d-truncate {
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+}

package/lib/build/less/variables/layout.less

@@ -0,0 +1,19 @@
+//
+//  DIALTONE
+//  TOKENS: Grid-vars
+//
+//  ============================================================================
+//  $   GRID VARIABLES
+//  ----------------------------------------------------------------------------
+@grid-vars: {
+  //  Grid Layout Variables
+  sidebar-width:              minmax(20rem, 30rem);
+  content-width:              minmax(32rem, 90ch);
+  header-height:              minmax(6.4rem, min-content);
+  content-height:             minmax(64rem, max-content);
+
+  //  Grid Columns
+  grid-columns:               12;
+  grid-column-width:          minmax(min-content, 24rem);
+  grid-column-auto:           1fr;
+}

package/lib/build/less/variables/sizes.less

@@ -0,0 +1,64 @@
+//
+//  DIALTONE
+//  TOKENS: SIZES
+//
+//  These are shared sizes for buttons, inputs, select menus (native),
+//  and text-areas.
+//  ============================================================================
+//  $   SHARED INPUT & BUTTON SIZES
+//  ============================================================================
+//  $$  EXTRA SMALL
+//  ----------------------------------------------------------------------------
+
+#d-internal__input-and-select-xs() {
+    --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
+    --input-font-size: var(--dt-font-size-100);
+    --input-border-radius: var(--dt-size-300);
+
+    .d-btn__icon {
+        width: calc(var(--dt-size-500) - var(--dt-size-200));
+        height: calc(var(--dt-size-500) - var(--dt-size-200));
+    }
+}
+
+//  $$  SMALL
+//  ----------------------------------------------------------------------------
+#d-internal__input-and-select-sm() {
+    --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
+    --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
+    --input-font-size: var(--dt-font-size-100);
+
+    .d-btn__icon {
+        width: var(--dt-size-500);
+        height: var(--dt-size-500);
+    }
+}
+
+//  $$  LARGE
+//  ----------------------------------------------------------------------------
+#d-internal__input-and-select-lg() {
+    --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
+    --input-font-size: var(--dt-font-size-300);
+    --input-border-radius: var(--dt-size-450);
+
+    .d-btn__icon {
+        width: calc(var(--dt-size-300) * 5);
+        height: calc(var(--dt-size-300) * 5);
+    }
+}
+
+//  $$  EXTRA LARGE
+//  ----------------------------------------------------------------------------
+#d-internal__input-and-select-xl() {
+    --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
+    --input-font-size: var(--dt-font-size-400);
+    --input-border-radius: var(--dt-size-500);
+
+    .d-btn__icon {
+        width: var(--dt-size-550);
+        height: var(--dt-size-550);
+    }
+}

package/lib/build/less/variables/typography.less

@@ -0,0 +1,46 @@
+/* stylelint-disable meowtec/no-px */
+//
+//  DIALTONE
+//  TOKENS: TYPOGRAPHY
+//  Pretty much everything in this file will ultimately be replaced by Design Tokens
+//
+//  These are typography constants for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/tokens/typography
+//
+//  TABLE OF CONTENTS
+//  • Line heights
+//
+
+//  ============================================================================
+//  $   LINE HEIGHTS
+//  ----------------------------------------------------------------------------
+//  Currently unclear how these will be replaced by Design Tokens
+@lh0:               1;
+@lh1:               calc(1em + 1px);
+@lh2:               calc(1em + 2px);
+@lh4:               calc(1em + 4px);
+@lh6:               calc(1em + 6px);
+@lh8:               calc(1em + 8px);
+@lh12:              calc(1em + 12px);
+@lh16:              calc(1em + 16px);
+@lh20:              calc(1em + 20px);
+@lh24:              calc(1em + 24px);
+
+//  ============================================================================
+//  $   CSS VARIABLES
+//  ----------------------------------------------------------------------------
+@type-styles-vars: {
+    lh0:                                    @lh0;
+    lh1:                                    @lh1;
+    lh2:                                    @lh2;
+    lh4:                                    @lh4;
+    lh6:                                    @lh6;
+    lh8:                                    @lh8;
+    lh12:                                   @lh12;
+    lh16:                                   @lh16;
+    lh20:                                   @lh20;
+    lh24:                                   @lh24;
+
+    ls-content:                             '\1F44D';
+}

package/lib/build/less/variables/visual-styles.less

@@ -0,0 +1,77 @@
+//
+//  DIALTONE
+//  TOKENS: VISUAL STYLES
+//
+//  Pretty much everything in this file will ultimately be replaced by Design Tokens
+//
+//  These are various visual style tokens and mixins for Dialpad's design
+//  system Dialtone. For further documentation of these values, please visit:
+//  https://dialpad.design/tokens/visual-styles
+//
+//  TABLE OF CONTENTS
+//  • BACKGROUND PATTERNS
+//
+//¡
+//  ============================================================================
+//  $   TRANSITIONS
+//  ----------------------------------------------------------------------------
+@transition: {
+   ttf-in-out:      cubic-bezier(0.645, 0.045, 0.355, 1);
+   ttf-out:         cubic-bezier(0.23, 1, 0.32, 1);
+   ttf-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);
+   td0:             0s;
+   td50:            50ms;
+   td100:           100ms;
+   td150:           150ms;
+   td200:           200ms;
+   td300:           300ms;
+}
+
+
+//  ============================================================================
+//  $   BACKGROUND PATTERNS
+//  ----------------------------------------------------------------------------
+//  TODO: sunset these?
+@background-patterns: {
+    bgg-pattern-blob-dark:                 @bgg-pattern-blob-dark;
+    bgg-pattern-chevrons-dark:             @bgg-pattern-chevrons-dark;
+    bgg-pattern-crosses-dark:              @bgg-pattern-crosses-dark;
+    bgg-pattern-crosshatch-dark:           @bgg-pattern-crosshatch-dark;
+    bgg-pattern-dot-dash-dark:             @bgg-pattern-dot-dash-dark;
+    bgg-pattern-dots-circles-dark:         @bgg-pattern-dots-circles-dark;
+    bgg-pattern-horz-stripes-dark:         @bgg-pattern-horz-stripes-dark;
+    bgg-pattern-slanted-stripes-dark:      @bgg-pattern-slanted-stripes-dark;
+    bgg-pattern-steps-dark:                @bgg-pattern-steps-dark;
+    bgg-pattern-stripe-dark:               @bgg-pattern-stripe-dark;
+    bgg-pattern-blob-light:                @bgg-pattern-blob-light;
+    bgg-pattern-chevrons-light:            @bgg-pattern-chevrons-light;
+    bgg-pattern-crosses-light:             @bgg-pattern-crosses-light;
+    bgg-pattern-crosshatch-light:          @bgg-pattern-crosshatch-light;
+    bgg-pattern-dot-dash-light:            @bgg-pattern-dot-dash-light;
+    bgg-pattern-dots-circles-light:        @bgg-pattern-dots-circles-light;
+    bgg-pattern-horz-stripes-light:        @bgg-pattern-horz-stripes-light;
+    bgg-pattern-slanted-stripes-light:     @bgg-pattern-slanted-stripes-light;
+    bgg-pattern-steps-light:               @bgg-pattern-steps-light;
+    bgg-pattern-stripe-light:              @bgg-pattern-stripe-light;
+}
+
+@bgg-pattern-blob-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQmxvYiBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fYmxvYkRhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xIDBhMSAxIDAgMDAtMSAxdjIuM2ExIDEgMCAwMDEgMWg0LjAyYy0uMDEzLjA2NS0uMDIuMTMyLS4wMi4ydjIuM0gxYTEgMSAwIDAwLTEgMXYyLjNhMSAxIDAgMDAxIDFoNC4wMmMtLjAxMy4wNjUtLjAyLjEzMi0uMDIuMnYyLjNIMWExIDEgMCAwMC0xIDF2Mi4zYTEgMSAwIDAwMSAxaDQuMDJjLS4wMTMuMDY1LS4wMi4xMzItLjAyLjJWMjBoOHYtMS45YTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4ydi0yLjNoNGExIDEgMCAwMDEtMXYtMi4zYTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4yVjcuOGg0YTEgMSAwIDAwMS0xVjQuNWExIDEgMCAwMC0xLTFINy45OGMuMDEzLS4wNjUuMDItLjEzMi4wMi0uMnYtMmg0YTEgMSAwIDAwMS0xVjBIMXoiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
+@bgg-pattern-chevrons-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ2hldnJvbnMgRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2NoZXZyb25zRGFyayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTExLjAyNyAxLjMyNEMxMS42IDEuMTM0IDExLjk4OS42MDIgMTIgMEgwdjFsNiAyIDUuMDI3LTEuNjc2ek0wIDN2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiA1IDAgM3pNMCA4djNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTAgMCA4ek0wIDEzdjNsNiAyIDUuMDI3LTEuNjc2YTEuNDIzIDEuNDIzIDAgMTAtLjktMi43TDYgMTVsLTYtMnpNMCAxOHYyaDEydi0uMDI2YzAtLjk3MS0uOTUyLTEuNjU3LTEuODczLTEuMzVMNiAyMGwtNi0yeiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
+@bgg-pattern-crosses-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NlcyBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fY3Jvc3Nlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMWExIDEgMCAwMC0xLTFIMHYyaDN2M0gwdjJoM3YzSDB2MmgzdjNIMHYyaDN2M2gydi0zaDJ2M2gydi0zaDJhMSAxIDAgMTAwLTJIOXYtM2gyYTEgMSAwIDEwMC0ySDlWN2gyYTEgMSAwIDEwMC0ySDlWMmgyYTEgMSAwIDAwMS0xek03IDJINXYzaDJWMnptMCA1SDV2M2gyVjd6bTAgNUg1djNoMnYtM3oiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
+@bgg-pattern-crosshatch-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NoYXRjaCBEYXJrIiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fY3Jvc3NoYXRjaERhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0zIDBIMHYyLjVhMS41IDEuNSAwIDEwMyAwVjB6TTAgMTcuNVYyMGgzdi0yLjVhMS41IDEuNSAwIDAwLTMgMHpNOCAyMEg1di0yLjVhMS41IDEuNSAwIDAxMyAwVjIwek0xMyAyMGgtM3YtMi41YTEuNSAxLjUgMCAwMTMgMFYyMHpNMTAgMGgzdjIuNWExLjUgMS41IDAgMDEtMyAwVjB6TTUgMGgzdjIuNWExLjUgMS41IDAgMTEtMyAwVjB6TTAgMTMuNWExIDEgMCAwMTEtMWgxMWExIDEgMCAxMTAgMkgxYTEgMSAwIDAxLTEtMXpNMCAxMGExIDEgMCAwMDEgMWgxMWExIDEgMCAxMDAtMkgxYTEgMSAwIDAwLTEgMXpNMCA2LjVhMSAxIDAgMDAxIDFoMTFhMSAxIDAgMTAwLTJIMWExIDEgMCAwMC0xIDF6IiBmaWxsPSIjMTQxNzIxIi8+PC9zdmc+');
+@bgg-pattern-dot-dash-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iRG90IERhc2ggRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2RvdERhc2hEYXJrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNS4xNDMgNC44MThWMEgwdjQuODE4YzAgMS40MDYgMS4xNTEgMi41NDYgMi41NzEgMi41NDYgMS40MiAwIDIuNTcyLTEuMTQgMi41NzItMi41NDZ6TTAgMTguMzk0VjIwaDUuMTQzdi0xLjYwNmMwLTEuNDA2LTEuMTUxLTIuNTQ1LTIuNTcyLTIuNTQ1LTEuNDIgMC0yLjU3MSAxLjE0LTIuNTcxIDIuNTQ1ek0xMiAyMEg2Ljg1N3YtNi42OTdjMC0xLjQwNiAxLjE1MS0yLjU0NSAyLjU3Mi0yLjU0NSAxLjQyIDAgMi41NzEgMS4xNCAyLjU3MSAyLjU0NVYyMHpNMTEuOTg1IDBINi44NzJhMi41NjIgMi41NjIgMCAwMDIuNTU3IDIuMjczYzEuMzI3IDAgMi40MTktLjk5NSAyLjU1Ni0yLjI3M3pNMCAxMS42MDZDMCAxMC4yIDEuMTUxIDkuMDYxIDIuNTcxIDkuMDYxYzEuNDIgMCAyLjU3MiAxLjE0IDIuNTcyIDIuNTQ1IDAgMS40MDYtMS4xNTEgMi41NDYtMi41NzIgMi41NDYtMS40MiAwLTIuNTcxLTEuMTQtMi41NzEtMi41NDZ6TTEyIDYuNTE1QzEyIDUuMTEgMTAuODQ5IDMuOTcgOS40MjkgMy45N2MtMS40MiAwLTIuNTcyIDEuMTQtMi41NzIgMi41NDUgMCAxLjQwNiAxLjE1MSAyLjU0NiAyLjU3MiAyLjU0NkMxMC44NDkgOS4wNiAxMiA3LjkyIDEyIDYuNTE1eiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
+@bgg-pattern-dots-circles-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iRG90cyBDaXJjbGVzIERhcmsiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19kb3RzQ2lyY2xlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xMiAwSDZhMiAyIDAgMDAyIDJoNFYwek00IDBIMHY0aDRhMiAyIDAgMTAwLTR6TTAgMTEuNTM1djYuOTNhNCA0IDAgMTAwLTYuOTN6TTEyIDIwSDZhMiAyIDAgMDEyLTJoNHYyek02IDkuNWEyIDIgMCAwMTItMmg0djRIOGEyIDIgMCAwMS0yLTJ6TS41IDcuNWExLjUgMS41IDAgMTEzIDAgMS41IDEuNSAwIDAxLTMgMHpNMTAgMy41YTEgMSAwIDEwMCAyIDEgMSAwIDAwMC0yek0xMCAxMy41YTEuNSAxLjUgMCAxMDAgMyAxLjUgMS41IDAgMDAwLTN6IiBmaWxsPSIjMTQxNzIxIi8+PC9zdmc+');
+@bgg-pattern-horz-stripes-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iSG9yeiBTdHJpcGVzIERhcmsiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19ob3J6U3RyaXBlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0xMC40MTIgM0gwVjBoMTAuNDEyQzExLjI4OSAwIDEyIC42NzIgMTIgMS41UzExLjI4OSAzIDEwLjQxMiAzek0wIDE4aDEwLjQxMmMuODc3IDAgMS41ODgtLjY3MiAxLjU4OC0xLjVzLS43MTEtMS41LTEuNTg4LTEuNUgwdjN6TTAgMTNoMTAuNDEyYy44NzcgMCAxLjU4OC0uNjcyIDEuNTg4LTEuNXMtLjcxMS0xLjUtMS41ODgtMS41SDB2M3pNMCA4aDEwLjQxMkMxMS4yODkgOCAxMiA3LjMyOCAxMiA2LjVTMTEuMjg5IDUgMTAuNDEyIDVIMHYzeiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
+@bgg-pattern-slanted-stripes-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU2xhbnRlZCBTdHJpcGVzIERhcmsiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19zbGFudGVkU3RyaXBlc0RhcmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik04IDBIMHY0bDgtNHpNMCA1djRsMTItNlYwaC0yTDAgNXpNMTIgMjB2LTFsLTIgMWgyek04IDIwbDQtMnYtNEwwIDIwaDh6TTAgMTlsMTItNlY5TDAgMTV2NHpNMCAxNGwxMi02VjRMMCAxMHY0eiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
+@bgg-pattern-steps-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RlcHMgRGFyayIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX3N0ZXBzRGFyayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgMHYuNWExLjUgMS41IDAgMTAzIDBWMEgwek0xMCAyMGEyIDIgMCAwMDItMnYtMS41YTEuNSAxLjUgMCAwMC0zIDB2LjVIMmEyIDIgMCAwMC0yIDJ2MWgxMHpNMCAxMy41YTEuNSAxLjUgMCAwMDMgMFYxM2g3YTIgMiAwIDAwMi0yVjkuNWExLjUgMS41IDAgMDAtMyAwdi41SDJhMiAyIDAgMDAtMiAydjEuNXpNMCA2LjVhMS41IDEuNSAwIDEwMyAwVjZoN2EyIDIgMCAwMDItMlYyLjVhMS41IDEuNSAwIDAwLTMgMFYzSDJhMiAyIDAgMDAtMiAydjEuNXoiIGZpbGw9IiMxNDE3MjEiLz48L3N2Zz4=');
+@bgg-pattern-stripe-dark: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RyaXBlIERhcmsiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19zdHJpcGVEYXJrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNCAyMEgyVjBoMnYyMHpNOSAyMEg1VjBoNHYyMHpNMTIgMjBoLTJWMGgydjIweiIgZmlsbD0iIzE0MTcyMSIvPjwvc3ZnPg==');
+@bgg-pattern-blob-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQmxvYiBMaWdodCIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2Jsb2JMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEgMGExIDEgMCAwMC0xIDF2Mi4zYTEgMSAwIDAwMSAxaDQuMDJjLS4wMTMuMDY1LS4wMi4xMzItLjAyLjJ2Mi4zSDFhMSAxIDAgMDAtMSAxdjIuM2ExIDEgMCAwMDEgMWg0LjAyYy0uMDEzLjA2NS0uMDIuMTMyLS4wMi4ydjIuM0gxYTEgMSAwIDAwLTEgMXYyLjNhMSAxIDAgMDAxIDFoNC4wMmMtLjAxMy4wNjUtLjAyLjEzMi0uMDIuMlYyMGg4di0xLjlhMSAxIDAgMDAtMS0xSDcuOThjLjAxMy0uMDY1LjAyLS4xMzIuMDItLjJ2LTIuM2g0YTEgMSAwIDAwMS0xdi0yLjNhMSAxIDAgMDAtMS0xSDcuOThjLjAxMy0uMDY1LjAyLS4xMzIuMDItLjJWNy44aDRhMSAxIDAgMDAxLTFWNC41YTEgMSAwIDAwLTEtMUg3Ljk4Yy4wMTMtLjA2NS4wMi0uMTMyLjAyLS4ydi0yaDRhMSAxIDAgMDAxLTFWMEgxeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
+@bgg-pattern-chevrons-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ2hldnJvbnMgTGlnaHQiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19jaGV2cm9uc0xpZ2h0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuMDI3IDEuMzI0QzExLjYgMS4xMzQgMTEuOTg5LjYwMiAxMiAwSDB2MWw2IDIgNS4wMjctMS42NzZ6TTAgM3YzbDYgMiA1LjAyNy0xLjY3NmExLjQyMyAxLjQyMyAwIDEwLS45LTIuN0w2IDUgMCAzek0wIDh2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiAxMCAwIDh6TTAgMTN2M2w2IDIgNS4wMjctMS42NzZhMS40MjMgMS40MjMgMCAxMC0uOS0yLjdMNiAxNWwtNi0yek0wIDE4djJoMTJ2LS4wMjZjMC0uOTcxLS45NTItMS42NTctMS44NzMtMS4zNUw2IDIwbC02LTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
+@bgg-pattern-crosses-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NlcyBMaWdodCIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2Nyb3NzZXNMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAxYTEgMSAwIDAwLTEtMUgwdjJoM3YzSDB2MmgzdjNIMHYyaDN2M0gwdjJoM3YzaDJ2LTNoMnYzaDJ2LTNoMmExIDEgMCAxMDAtMkg5di0zaDJhMSAxIDAgMTAwLTJIOVY3aDJhMSAxIDAgMTAwLTJIOVYyaDJhMSAxIDAgMDAxLTF6TTcgMkg1djNoMlYyem0wIDVINXYzaDJWN3ptMCA1SDV2M2gydi0zeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
+@bgg-pattern-crosshatch-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iQ3Jvc3NoYXRjaCBMaWdodCIgY2xhc3M9ImQtc3ZnIGQtc3ZnLS1zeXN0ZW0gZC1zdmdfX2Nyb3NzaGF0Y2hMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTMgMEgwdjIuNWExLjUgMS41IDAgMTAzIDBWMHpNMCAxNy41VjIwaDN2LTIuNWExLjUgMS41IDAgMDAtMyAwek04IDIwSDV2LTIuNWExLjUgMS41IDAgMDEzIDBWMjB6TTEzIDIwaC0zdi0yLjVhMS41IDEuNSAwIDAxMyAwVjIwek0xMCAwaDN2Mi41YTEuNSAxLjUgMCAwMS0zIDBWMHpNNSAwaDN2Mi41YTEuNSAxLjUgMCAxMS0zIDBWMHpNMCAxMy41YTEgMSAwIDAxMS0xaDExYTEgMSAwIDExMCAySDFhMSAxIDAgMDEtMS0xek0wIDEwYTEgMSAwIDAwMSAxaDExYTEgMSAwIDEwMC0ySDFhMSAxIDAgMDAtMSAxek0wIDYuNWExIDEgMCAwMDEgMWgxMWExIDEgMCAxMDAtMkgxYTEgMSAwIDAwLTEgMXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
+@bgg-pattern-dot-dash-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iRG90IERhc2ggTGlnaHQiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19kb3REYXNoTGlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik01LjE0MyA0LjgxOFYwSDB2NC44MThjMCAxLjQwNiAxLjE1MSAyLjU0NiAyLjU3MSAyLjU0NiAxLjQyIDAgMi41NzItMS4xNCAyLjU3Mi0yLjU0NnpNMCAxOC4zOTRWMjBoNS4xNDN2LTEuNjA2YzAtMS40MDYtMS4xNTEtMi41NDUtMi41NzItMi41NDUtMS40MiAwLTIuNTcxIDEuMTQtMi41NzEgMi41NDV6TTEyIDIwSDYuODU3di02LjY5N2MwLTEuNDA2IDEuMTUxLTIuNTQ1IDIuNTcyLTIuNTQ1IDEuNDIgMCAyLjU3MSAxLjE0IDIuNTcxIDIuNTQ1VjIwek0xMS45ODUgMEg2Ljg3MmEyLjU2MiAyLjU2MiAwIDAwMi41NTcgMi4yNzNjMS4zMjcgMCAyLjQxOS0uOTk1IDIuNTU2LTIuMjczek0wIDExLjYwNkMwIDEwLjIgMS4xNTEgOS4wNjEgMi41NzEgOS4wNjFjMS40MiAwIDIuNTcyIDEuMTQgMi41NzIgMi41NDUgMCAxLjQwNi0xLjE1MSAyLjU0Ni0yLjU3MiAyLjU0Ni0xLjQyIDAtMi41NzEtMS4xNC0yLjU3MS0yLjU0NnpNMTIgNi41MTVDMTIgNS4xMSAxMC44NDkgMy45NyA5LjQyOSAzLjk3Yy0xLjQyIDAtMi41NzIgMS4xNC0yLjU3MiAyLjU0NSAwIDEuNDA2IDEuMTUxIDIuNTQ2IDIuNTcyIDIuNTQ2QzEwLjg0OSA5LjA2IDEyIDcuOTIgMTIgNi41MTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
+@bgg-pattern-dots-circles-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iRG90cyBDaXJjbGVzIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fZG90c0NpcmNsZXNMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEyIDBINmEyIDIgMCAwMDIgMmg0VjB6TTQgMEgwdjRoNGEyIDIgMCAxMDAtNHpNMCAxMS41MzV2Ni45M2E0IDQgMCAxMDAtNi45M3pNMTIgMjBINmEyIDIgMCAwMTItMmg0djJ6TTYgOS41YTIgMiAwIDAxMi0yaDR2NEg4YTIgMiAwIDAxLTItMnpNLjUgNy41YTEuNSAxLjUgMCAxMTMgMCAxLjUgMS41IDAgMDEtMyAwek0xMCAzLjVhMSAxIDAgMTAwIDIgMSAxIDAgMDAwLTJ6TTEwIDEzLjVhMS41IDEuNSAwIDEwMCAzIDEuNSAxLjUgMCAwMDAtM3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
+@bgg-pattern-horz-stripes-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iSG9yeiBTdHJpcGVzIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19faG9yelN0cmlwZXNMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEwLjQxMiAzSDBWMGgxMC40MTJDMTEuMjg5IDAgMTIgLjY3MiAxMiAxLjVTMTEuMjg5IDMgMTAuNDEyIDN6TTAgMThoMTAuNDEyYy44NzcgMCAxLjU4OC0uNjcyIDEuNTg4LTEuNXMtLjcxMS0xLjUtMS41ODgtMS41SDB2M3pNMCAxM2gxMC40MTJjLjg3NyAwIDEuNTg4LS42NzIgMS41ODgtMS41cy0uNzExLTEuNS0xLjU4OC0xLjVIMHYzek0wIDhoMTAuNDEyQzExLjI4OSA4IDEyIDcuMzI4IDEyIDYuNVMxMS4yODkgNSAxMC40MTIgNUgwdjN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
+@bgg-pattern-slanted-stripes-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU2xhbnRlZCBTdHJpcGVzIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fc2xhbnRlZFN0cmlwZXNMaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTggMEgwdjRsOC00ek0wIDV2NGwxMi02VjBoLTJMMCA1ek0xMiAyMHYtMWwtMiAxaDJ6TTggMjBsNC0ydi00TDAgMjBoOHpNMCAxOWwxMi02VjlMMCAxNXY0ek0wIDE0bDEyLTZWNEwwIDEwdjR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
+@bgg-pattern-steps-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RlcHMgTGlnaHQiIGNsYXNzPSJkLXN2ZyBkLXN2Zy0tc3lzdGVtIGQtc3ZnX19zdGVwc0xpZ2h0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMCAwdi41YTEuNSAxLjUgMCAxMDMgMFYwSDB6TTEwIDIwYTIgMiAwIDAwMi0ydi0xLjVhMS41IDEuNSAwIDAwLTMgMHYuNUgyYTIgMiAwIDAwLTIgMnYxaDEwek0wIDEzLjVhMS41IDEuNSAwIDAwMyAwVjEzaDdhMiAyIDAgMDAyLTJWOS41YTEuNSAxLjUgMCAwMC0zIDB2LjVIMmEyIDIgMCAwMC0yIDJ2MS41ek0wIDYuNWExLjUgMS41IDAgMTAzIDBWNmg3YTIgMiAwIDAwMi0yVjIuNWExLjUgMS41IDAgMDAtMyAwVjNIMmEyIDIgMCAwMC0yIDJ2MS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
+@bgg-pattern-stripe-light: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgYXJpYS1sYWJlbD0iU3RyaXBlIExpZ2h0IiBjbGFzcz0iZC1zdmcgZC1zdmctLXN5c3RlbSBkLXN2Z19fc3RyaXBlTGlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik00IDIwSDJWMGgydjIwek05IDIwSDVWMGg0djIwek0xMiAyMGgtMlYwaDJ2MjB6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');