@dialpad/dialtone-css 1.0.0

package/lib/build/less/dialtone.less

@@ -0,0 +1,71 @@
+//
+//  DIALTONE
+//
+//  This file provides CSS classes for Dialtone, the Dialpad design system.
+//  For further information about these classes, please visit:
+//  https://dialpad.design
+//
+//
+//  ============================================================================
+@import 'dialtone-reset';
+@import 'dialtone-variables';
+
+//  --  COMPONENTS
+@import 'components/avatar';
+@import 'components/badge';
+@import 'components/breadcrumbs';
+@import 'components/button';
+@import 'components/card';
+@import 'components/chip';
+@import 'components/codeblock';
+@import 'components/collapsible';
+@import 'components/combobox';
+@import 'components/datepicker';
+@import 'components/emoji-picker';
+@import 'components/forms';
+@import 'components/image-viewer';
+@import 'components/input';
+@import 'components/keyboard-shortcut';
+@import 'components/link';
+@import 'components/list-group'; // Dialtone 5 shim
+@import 'components/list-item-group';
+@import 'components/modal';
+@import 'components/notice';
+@import 'components/toast';
+@import 'components/banner';
+@import 'components/pagination';
+@import 'components/popover';
+@import 'components/radio-checkbox';
+@import 'components/selects';
+@import 'components/skeleton';
+@import 'components/table';
+@import 'components/tab-panel';
+@import 'components/tabs';
+@import 'components/tooltip';
+@import 'components/toggle';
+@import 'components/presence';
+@import 'components/icon';
+@import 'components/root-layout';
+@import 'components/stack';
+@import 'components/item-layout';
+
+//  --  UTILITIES
+@import 'utilities/backgrounds';
+@import 'utilities/borders';
+@import 'utilities/colors';
+@import 'utilities/effects';
+@import 'utilities/flex';
+@import 'utilities/grid';
+@import 'utilities/interactivity';
+@import 'utilities/layout';
+@import 'utilities/sizing';
+@import 'utilities/spacing';
+@import 'utilities/typography';
+
+//  --  THEMES & GLOBAL SETTINGS
+@import 'dialtone-globals';
+@import 'themes/default';
+
+// Tokens
+@import (inline) '@dialpad/dialtone-tokens/dist/css/variables-light.css';
+@import (inline) '@dialpad/dialtone-tokens/dist/css/variables-dark.css';

package/lib/build/less/themes/default.less

@@ -0,0 +1,83 @@
+//
+//  DIALTONE
+//  THEME VARIABLES
+//
+//  This file contains all the theme-able portions of Dialtone.
+//  For further information about these classes, please visit:
+//  https://dialpad.design/themes
+//
+//  ============================================================================
+//  THEME VARIABLES
+//  The following items are themeable items that will update the imported
+//  Dialtone styles and components accordingly.
+//
+//  TABLE OF CONTENTS:
+//    - SET VARIABLES
+//      - Colors
+//      - Visual Styles
+//      - Theme
+//    - OUTPUT VARIABLES
+//
+//  ============================================================================
+//  $   SET VARIABLES
+//  ----------------------------------------------------------------------------
+
+
+@theme-vars: {
+    primary-color-h:                        var(--dt-color-purple-400-h);
+    primary-color-s:                        var(--dt-color-purple-400-s);
+    primary-color-l:                        var(--dt-color-purple-400-l);
+    primary-color-hsl:                      var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
+    primary-color:                          hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
+    primary-color-hover:                    hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
+    nav-background-color-h:                 var(--dt-color-purple-600-h);
+    nav-background-color-s:                 var(--dt-color-purple-600-s);
+    nav-background-color-l:                 var(--dt-color-purple-600-l);
+    nav-background-color:                   hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
+
+    topbar-height:                                    var(--dt-size-700);
+
+    base--font-size:                                  var(--dt-font-size-200);
+    base--font-family:                                var(--dt-font-family-body);
+    base--line-height:                                var(--dt-font-line-height-300);
+    base--corner-radius:                              0.25em; // TODO: unused. deprecate or...?
+}
+
+//  ============================================================================
+//  $   OUTPUT VARIABLES
+//  ============================================================================
+body {
+    //  $$  COLOR VARS
+    //  ------------------------------------------------------------------------
+    --bgo: 100%;                // Background color opacity
+    --bco: 100%;                // Border color opacity
+    --fco: 100%;                // Font color opacity
+
+    //  $$  VISUAL STYLES
+    //  ------------------------------------------------------------------------
+    each(@transition, {
+        --@{key}: @value;
+    });
+    each(@background-patterns, {
+        --@{key}: @value;
+    });
+
+    //  $$  GRID
+    //  ------------------------------------------------------------------------
+    each(@grid-vars, {
+        --@{key}: @value;
+    });
+
+    //  $$  TYPE
+    //  ------------------------------------------------------------------------
+    each(@type-styles-vars, {
+        --@{key}: @value;
+    });
+
+    //  $$  THEME VARS
+    //      These should always come last
+    //  ------------------------------------------------------------------------
+    each(@theme-vars, {
+        --@{key}: @value;
+    });
+}

package/lib/build/less/themes/example.less

@@ -0,0 +1,89 @@
+//
+//  DIALTONE
+//  THEME FILE
+//
+//  Use this file to create Dialtone themes..
+//  For further information about these theming, please visit:
+//  https://dialpad.design/themes
+//
+//  TABLE OF CONTENTS:
+//    - REFERENCE FILES
+//    - THEME VARIABLES
+//    - REDECLARE & OUTPUT VARIABLES
+//
+//  ============================================================================
+//  $   REFERENCE FILES
+//      This won't output anything. We need to reference the core colors and the
+//      default theme so this file can compile on it's own.
+//  ----------------------------------------------------------------------------
+@import (reference) '../dialtone-variables';
+@import (reference) 'default';
+
+//  ============================================================================
+//  $   THEME VARIABLES
+//  ============================================================================
+//  $$  SET THESE
+//      Currently only the following items are themeable in Dialtone.
+//
+//      @primary-color:         This is used for all selected and primary states
+//                              in elements and components (i.e. buttons, input focus,
+//                              links, etc).
+//
+//      @primary-color--hover:  Hover state color for @primary-color.
+//
+//      @nav__background-color: This sets the navigation background color.
+//  ----------------------------------------------------------------------------
+@primary-color:                 var(--dt-color-purple-400);
+@primary-color--hover:          darken(@primary-color, 10%);
+@nav__background-color:         var(--dt-color-black-400);
+
+//  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
+//  ----------------------------------------------------------------------------
+//  $   IGNORE THESE!!!
+//      Warning:    We use these to extract the HSL values of the HEX code and
+//                  restate them in the CSS Variables.
+//  ----------------------------------------------------------------------------
+@primary-color--h:              hue(@primary-color);
+@primary-color--s:              saturation(@primary-color);
+@primary-color--l:              lightness(@primary-color);
+
+@primary-color--hover--h:       hue(@primary-color--hover);
+@primary-color--hover--s:       saturation(@primary-color--hover);
+@primary-color--hover--l:       lightness(@primary-color--hover);
+
+@nav__background-color--h:      hue(@nav__background-color);
+@nav__background-color--s:      saturation(@nav__background-color);
+@nav__background-color--l:      lightness(@nav__background-color);
+
+
+//  --  RE-DECLARE CSS VARIABLES WITH NEW COLORS
+//  ----------------------------------------------------------------------------
+@theme-vars: {
+    primary-color:              @primary-color;
+    primary-color--h:           @primary-color--h;
+    primary-color--s:           @primary-color--s;
+    primary-color--l:           @primary-color--l;
+
+    primary-color--hover:       @primary-color--hover;
+    primary-color--hover--h:    @primary-color--hover--h;
+    primary-color--hover--s:    @primary-color--hover--s;
+    primary-color--hover--l:    @primary-color--l;
+
+    nav__background-color:      @nav__background-color;
+    nav__background-color--h:   @nav__background-color--h;
+    nav__background-color--s:   @nav__background-color--s;
+    nav__background-color--l:   @nav__background-color--l;
+
+    btn--inverted__bg--hover:   fade(mix(#fff, @primary-color, 90%), 25%);
+    btn--inverted--primary__bg--hover: mix(#fff, @primary-color, 90%);
+}
+
+//  ============================================================================
+//  $   OUTPUT VARIABLES
+//  ============================================================================
+:root {
+    //  Theme Styles
+    each(@theme-vars, {
+        --@{key}: @value;
+    });
+}

package/lib/build/less/utilities/backgrounds.less

@@ -0,0 +1,139 @@
+//
+//  DIALTONE
+//  UTILITIES: BACKGROUNDS
+//
+//  These are border utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/borders
+//
+//  TABLE OF CONTENTS
+//  • BACKGROUND ATTACHMENT
+//  • BACKGROUND CLIP
+//  • BACKGROUND POSITION
+//  • BACKGROUND REPEAT
+//  • BACKGROUND SIZE
+//  • GRADIENTS
+//  • PATTERNS
+//
+//  ============================================================================
+//  $  BACKGROUND ATTACHMENT
+//  ----------------------------------------------------------------------------
+.d-bga-scroll { background-attachment: scroll !important; }
+.d-bga-fixed { background-attachment: fixed !important; }
+.d-bga-local { background-attachment: local !important; }
+.d-bga-unset { background-attachment: unset !important; }
+
+//  ============================================================================
+//  $  BACKGROUND CLIP
+//  ----------------------------------------------------------------------------
+.d-bgc-border-box { background-clip: border-box !important; }
+.d-bgc-padding-box { background-clip: padding-box !important; }
+.d-bgc-content-box { background-clip: content-box !important; }
+
+.d-bgc-text {
+  color: transparent !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+}
+.d-bgclip-unset { background-clip: unset !important; }
+
+
+//  ============================================================================
+//  $  BACKGROUND POSITION
+//  ----------------------------------------------------------------------------
+.d-bgp-t { background-position: top !important; }
+.d-bgp-tr { background-position: top right !important; }
+.d-bgp-r { background-position: right !important; }
+.d-bgp-br { background-position: bottom right !important; }
+.d-bgp-b { background-position: bottom !important; }
+.d-bgp-bl { background-position: bottom left !important; }
+.d-bgp-l { background-position: left !important; }
+.d-bgp-tl { background-position: top left !important; }
+.d-bgp-center { background-position: center !important; }
+.d-bgp-unset { background-position: unset !important; }
+
+
+//  ============================================================================
+//  $  BACKGROUND REPEAT
+//  ----------------------------------------------------------------------------
+.d-bgr-repeat-x { background-repeat: repeat-x !important; }
+.d-bgr-repeat-y { background-repeat: repeat-y !important; }
+.d-bgr-repeat { background-repeat: repeat !important; }
+.d-bgr-space { background-repeat: space !important; }
+.d-bgr-none { background-repeat: no-repeat !important; }
+.d-bgr-unset { background-repeat: unset !important; }
+
+
+//  ============================================================================
+//  $  BACKGROUND SIZE
+//  ----------------------------------------------------------------------------
+.d-bgs-contain { background-size: contain !important; }
+.d-bgs-cover { background-size: cover !important; }
+.d-bgs-var { background-size: var(--bgg-size, 100% 100%) !important; }
+.d-bgs-auto { background-size: auto !important; }
+.d-bgs-unset { background-size: unset !important; }
+
+
+//  ============================================================================
+//  $   GRADIENTS
+//  ----------------------------------------------------------------------------
+.d-bgg-to-t { background-image: linear-gradient(to top, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-tr { background-image: linear-gradient(to top right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-r { background-image: linear-gradient(to right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-br { background-image: linear-gradient(to bottom right, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-b { background-image: linear-gradient(to bottom, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-bl { background-image: linear-gradient(to bottom left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-l { background-image: linear-gradient(to left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-to-tl { background-image: linear-gradient(to top left, var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
+.d-bgg-none { background-image: none !important; }
+.d-bgg-unset { background-image: unset !important; }
+
+
+//  ============================================================================
+//  $   PATTERNS
+//  ----------------------------------------------------------------------------
+//  --  BASE CLASS
+.d-bgg-pattern {
+    position: relative;
+    padding-left: var(--dt-space-550) !important;
+
+    &::after {
+        position: absolute;
+        top: var(--dt-space-100);
+        bottom: var(--dt-space-100);
+        left: var(--dt-space-100);
+        min-width: 2rem;
+        min-height: 2rem;
+        background-image: var(--bgg-pattern);
+        background-repeat: repeat-y;
+        background-position: top left;
+        background-clip: content-box;
+        border-radius: 0.3rem;
+        content: '';
+    }
+}
+
+//  --  EACH PATTERN
+.d-bgg-pattern-blob-dark { --bgg-pattern: var(--bgg-pattern-blob-dark) !important; }
+.d-bgg-pattern-chevrons-dark { --bgg-pattern: var(--bgg-pattern-chevrons-dark) !important; }
+.d-bgg-pattern-crosses-dark { --bgg-pattern: var(--bgg-pattern-crosses-dark) !important; }
+.d-bgg-pattern-crosshatch-dark { --bgg-pattern: var(--bgg-pattern-crosshatch-dark) !important; }
+.d-bgg-pattern-dot-dash-dark { --bgg-pattern: var(--bgg-pattern-dot-dash-dark) !important; }
+.d-bgg-pattern-dots-circles-dark { --bgg-pattern: var(--bgg-pattern-dots-circles-dark) !important; }
+.d-bgg-pattern-horz-stripes-dark { --bgg-pattern: var(--bgg-pattern-horz-stripes-dark) !important; }
+.d-bgg-pattern-slanted-stripes-dark { --bgg-pattern: var(--bgg-pattern-slanted-stripes-dark) !important; }
+.d-bgg-pattern-steps-dark { --bgg-pattern: var(--bgg-pattern-steps-dark) !important; }
+.d-bgg-pattern-stripe-dark { --bgg-pattern: var(--bgg-pattern-stripe-dark) !important; }
+
+.d-bgg-pattern-blob-light { --bgg-pattern: var(--bgg-pattern-blob-light) !important; }
+.d-bgg-pattern-chevrons-light { --bgg-pattern: var(--bgg-pattern-chevrons-light) !important; }
+.d-bgg-pattern-crosses-light { --bgg-pattern: var(--bgg-pattern-crosses-light) !important; }
+.d-bgg-pattern-crosshatch-light { --bgg-pattern: var(--bgg-pattern-crosshatch-light) !important; }
+.d-bgg-pattern-dot-dash-light { --bgg-pattern: var(--bgg-pattern-dot-dash-light) !important; }
+.d-bgg-pattern-dots-circles-light { --bgg-pattern: var(--bgg-pattern-dots-circles-light) !important; }
+.d-bgg-pattern-horz-stripes-light { --bgg-pattern: var(--bgg-pattern-horz-stripes-light) !important; }
+.d-bgg-pattern-slanted-stripes-light { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
+.d-bgg-pattern-steps-light { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
+.d-bgg-pattern-stripe-light { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }

package/lib/build/less/utilities/borders.less

@@ -0,0 +1,196 @@
+//
+//  DIALTONE
+//  UTILITIES: BORDERS
+//
+//  These are border utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/borders
+//
+//  TABLE OF CONTENTS
+//  • BORDERS
+//    - COLOR
+//    - DIRECTION
+//    - RADIUS
+//    - STYLE
+//    - WIDTH
+//  • DIVIDERS
+//    - VERTICAL DIVIDERS
+//    - HORIZONTAL DIVIDERS
+//
+//  ============================================================================
+//  $  BORDERS
+//  ============================================================================
+//  $$ DIRECTION
+//  ----------------------------------------------------------------------------
+.d-ba { border: var(--dt-size-100) solid !important; }
+.d-bt { border-top: var(--dt-size-100) solid !important; }
+.d-br { border-right: var(--dt-size-100) solid !important; }
+.d-bb { border-bottom: var(--dt-size-100) solid !important; }
+.d-bl { border-left: var(--dt-size-100) solid !important; }
+.d-bx { .d-br(); .d-bl(); }
+.d-by { .d-bt(); .d-bb(); }
+.d-ba-none { border: none !important; }
+.d-ba-unset { border: unset !important; }
+
+//  ============================================================================
+//  $  BORDER RADIUS
+//  ============================================================================
+//  $$ ALL
+//  ----------------------------------------------------------------------------
+.d-bar-circle { border-radius: var(--dt-size-radius-circle) !important; }
+.d-bar-pill { border-radius: var(--dt-size-radius-pill) !important; }
+.d-bar-unset { border-radius: unset !important; }
+
+//  $$ TOP
+//  ----------------------------------------------------------------------------
+.d-btr-circle { border-top-left-radius: var(--dt-size-radius-circle) !important; border-top-right-radius: var(--dt-size-radius-circle) !important; }
+.d-btr-pill { border-top-left-radius: var(--dt-size-radius-pill) !important; border-top-right-radius: var(--dt-size-radius-pill) !important; }
+
+//  $$ RIGHT
+//  ----------------------------------------------------------------------------
+.d-brr-circle { border-top-right-radius: var(--dt-size-radius-circle) !important; border-bottom-right-radius: var(--dt-size-radius-circle) !important; }
+.d-brr-pill { border-top-right-radius: var(--dt-size-radius-pill) !important; border-bottom-right-radius: var(--dt-size-radius-pill) !important; }
+
+//  $$ BOTTOM
+//  ----------------------------------------------------------------------------
+.d-bbr-circle { border-bottom-right-radius: var(--dt-size-radius-circle) !important; border-bottom-left-radius: var(--dt-size-radius-circle) !important; }
+.d-bbr-pill { border-bottom-right-radius: var(--dt-size-radius-pill) !important; border-bottom-left-radius: var(--dt-size-radius-pill) !important; }
+
+//  $$ RIGHT
+//  ----------------------------------------------------------------------------
+.d-blr-circle { border-top-left-radius: var(--dt-size-radius-circle) !important; border-bottom-left-radius: var(--dt-size-radius-circle) !important; }
+.d-blr-pill { border-top-left-radius: var(--dt-size-radius-pill) !important; border-bottom-left-radius: var(--dt-size-radius-pill) !important; }
+
+
+//  $$ STYLE
+//  ----------------------------------------------------------------------------
+.d-bas-dashed { border-style: dashed !important; }
+.d-bts-dashed { border-top-style: dashed !important; }
+.d-brs-dashed { border-right-style: dashed !important; }
+.d-bbs-dashed { border-bottom-style: dashed !important; }
+.d-bls-dashed { border-left-style: dashed !important; }
+
+.d-bas-dotted { border-style: dotted !important; }
+.d-bts-dotted { border-top-style: dotted !important; }
+.d-brs-dotted { border-right-style: dotted !important; }
+.d-bbs-dotted { border-bottom-style: dotted !important; }
+.d-bls-dotted { border-left-style: dotted !important; }
+
+.d-bas-unset { border-style: unset !important; }
+
+
+//  $$ WIDTH
+//  ----------------------------------------------------------------------------
+.d-baw0 { border-width: 0 !important; }
+.d-baw1 { border-width: var(--dt-size-100) !important; }
+.d-baw2 { border-width: var(--dt-size-200) !important; }
+.d-baw4 { border-width: var(--dt-size-300) !important; }
+.d-baw6 { border-width: var(--dt-size-350) !important; }
+
+//  --  Top Border width
+.d-btw0 { border-top-width: 0 !important; }
+.d-btw1 { border-top-width: var(--dt-size-100) !important; }
+.d-btw2 { border-top-width: var(--dt-size-200) !important; }
+.d-btw4 { border-top-width: var(--dt-size-300) !important; }
+.d-btw6 { border-top-width: var(--dt-size-350) !important; }
+
+//  --  Right Border width
+.d-brw0 { border-right-width: 0 !important; }
+.d-brw1 { border-right-width: var(--dt-size-100) !important; }
+.d-brw2 { border-right-width: var(--dt-size-200) !important; }
+.d-brw4 { border-right-width: var(--dt-size-300) !important; }
+.d-brw6 { border-right-width: var(--dt-size-350) !important; }
+
+//  --  Bottom Border width
+.d-bbw0 { border-bottom-width: 0 !important; }
+.d-bbw1 { border-bottom-width: var(--dt-size-100) !important; }
+.d-bbw2 { border-bottom-width: var(--dt-size-200) !important; }
+.d-bbw4 { border-bottom-width: var(--dt-size-300) !important; }
+.d-bbw6 { border-bottom-width: var(--dt-size-350) !important; }
+
+//  --  Left Border width
+.d-blw0 { border-left-width: 0 !important; }
+.d-blw1 { border-left-width: var(--dt-size-100) !important; }
+.d-blw2 { border-left-width: var(--dt-size-200) !important; }
+.d-blw4 { border-left-width: var(--dt-size-300) !important; }
+.d-blw6 { border-left-width: var(--dt-size-350) !important; }
+
+//  --  X Border width
+.d-bxw0 { .d-brw0(); .d-blw0(); }
+.d-bxw1 { .d-brw1(); .d-blw1(); }
+.d-bxw2 { .d-brw2(); .d-blw2(); }
+.d-bxw4 { .d-brw4(); .d-blw4(); }
+.d-bxw6 { .d-brw6(); .d-blw6(); }
+
+//  --  Y Border width
+.d-byw0 { .d-btw0(); .d-bbw0(); }
+.d-byw1 { .d-btw1(); .d-bbw1(); }
+.d-byw2 { .d-btw2(); .d-bbw2(); }
+.d-byw4 { .d-btw4(); .d-bbw4(); }
+.d-byw6 { .d-btw6(); .d-bbw6(); }
+
+
+//  ============================================================================
+//  $  DIVIDERS
+//  ============================================================================
+//  $$ VERTICAL DIVIDERS
+//  ----------------------------------------------------------------------------
+.d-divide-y > * + * {
+    --divide-y-reverse: 0;
+
+    border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'1px * var(--divide-y-reverse)') solid !important;
+}
+
+.d-divide-y0 > * + * {
+    --divide-y-reverse: 0;
+
+    border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'0 * var(--divide-y-reverse)') solid !important;
+}
+
+.d-divide-y2 > * + * {
+    --divide-y-reverse: 0;
+
+    border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'2px * var(--divide-y-reverse)') solid !important;
+}
+
+.d-divide-y4 > * + * {
+    --divide-y-reverse: 0;
+
+    border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid !important;
+    border-bottom: calc(~'4px * var(--divide-y-reverse)') solid !important;
+}
+.d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
+
+//  $$ HORIZONTAL DIVIDERS
+//  ----------------------------------------------------------------------------
+.d-divide-x > * + * {
+    --divide-x-reverse: 0;
+
+    border-right: calc(~'1px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid !important;
+}
+
+.d-divide-x0 > * + * {
+    --divide-x-reverse: 0;
+
+    border-right: calc(~'0 * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid !important;
+}
+
+.d-divide-x2 > * + * {
+    --divide-x-reverse: 0;
+
+    border-right: calc(~'2px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid !important;
+}
+
+.d-divide-x4 > * + * {
+    --divide-x-reverse: 0;
+
+    border-right: calc(~'4px * var(--divide-x-reverse)') solid !important;
+    border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid !important;
+}
+.d-divide-x-reverse > * + * { --divide-x-reverse: 1; }