@dialpad/dialtone 7.25.1 → 8.0.0-version8.2

package/lib/build/less/variables/colors.less

@@ -1,279 +0,0 @@
-//
-//  DIALTONE
-//  TOKENS: COLORS
-//
-//  These are color tokens for Dialpad's design system Dialtone.
-//  For further documentation of these values, please visit:
-//  https://dialpad.design/tokens/colors
-//
-//  TABLE OF CONTENTS
-//  • COLOR STOPS
-//  • FONT COLORS
-//
-//  ============================================================================
-//  $   COLOR STOPS BASE HEX VALUES
-//  ----------------------------------------------------------------------------
-@white:                         #FFFFFF;
-@black-100:                     #F9F9F9;
-@black-200:                     #E9E9E9;
-@black-300:                     #D2D2D2;
-@black-400:                     #AAAAAA;
-@black-500:                     #808080;
-@black-600:                     #555555;
-@black-700:                     #3A3A3A;
-@black-800:                     #222222;
-@black-900:                     #000000;
-
-@purple-100:                    #F5F0FF;
-@purple-200:                    #DAC7FF;
-@purple-300:                    #AB7EFF;
-@purple-400:                    #7C52FF;
-@purple-500:                    #3A1D95;
-@purple-600:                    #10022C;
-
-@orange-100:                    #FFF0E5;
-@orange-200:                    #FFCCA7;
-@orange-300:                    #FFA360;
-@orange-400:                    #FF7F23;
-@orange-500:                    #E05E00;
-@orange-600:                    #43220A;
-
-@magenta-100:                   #FFE0F2;
-@magenta-200:                   #F985C7;
-@magenta-300:                   #F9008E;
-@magenta-400:                   #8C0E56;
-@magenta-500:                   #541A3B;
-
-@gold-100:                      #FFF4CC;
-@gold-200:                      #FFDB80;
-@gold-300:                      #F6AB3C;
-@gold-400:                      #D28F2B;
-@gold-500:                      #815008;
-
-@green-100:                     #EDF9EB;
-@green-200:                     #B0FFA3;
-@green-300:                     #45F777;
-@green-400:                     #1AA340;
-@green-500:                     #124620;
-
-@red-100:                       #FFE5E6;
-@red-200:                       #FF8585;
-@red-300:                       #EC0E0E;
-@red-400:                       #B70B0B;
-@red-500:                       #5B0505;
-
-@blue-100:                      #EAF2FA;
-@blue-200:                      #99C8FF;
-@blue-300:                      #51A0FE;
-@blue-400:                      #1768C6;
-@blue-500:                      #01326D;
-
-@tan-100:                       #F2F0EE;
-@tan-200:                       #CEC8C4;
-@tan-300:                       #87807B;
-@tan-400:                       #3F3D3C;
-@tan-500:                       #121212;
-
-//  ============================================================================
-//  $   FOCUS RINGS
-//      Used on inputs, buttons, and other focusable elements.
-//  ----------------------------------------------------------------------------
-@focus-rings: {
-    color-focus-ring:           hsla(var(--blue-300-hsl) / 1); // redundant for backwards compatibility
-    focus-ring:                 var(--bc-focus);
-}
-
-//  ============================================================================
-//  $   SURFACE COLORS
-//      Semantic background colors
-//  ----------------------------------------------------------------------------
-@surface-colors: {
-    bgc-critical:              var(--red-100);
-    bgc-critical-hsl:          var(--red-100-hsl);
-    bgc-critical-opaque:       hsla(var(--red-300-hsl) / 0.11);
-    bgc-critical-subtle:       #fff2f3;
-    bgc-critical-subtle-opaque:hsla(var(--red-300-hsl) / 0.05);
-    bgc-critical-strong:       var(--red-400);
-
-    bgc-info:                  var(--blue-100);
-    bgc-info-hsl:              var(--blue-100-hsl);
-    bgc-info-opaque:           hsla(var(--blue-400-hsl) / 0.09);
-    bgc-info-subtle:           #f5f9fd;
-    bgc-info-subtle-opaque:    hsla(var(--blue-400-hsl) / 0.04);
-    bgc-info-strong:           var(--blue-400);
-
-    bgc-warning:               var(--gold-100);
-    bgc-warning-hsl:           var(--gold-100-hsl);
-    bgc-warning-opaque:        hsla(var(--gold-200-hsl) / 0.38);
-    bgc-warning-subtle:        #fffae5;
-    bgc-warning-subtle-opaque: hsla(var(--gold-200-hsl) / 0.18);
-    bgc-warning-strong:        var(--gold-500);
-
-    bgc-success:               var(--green-100);
-    bgc-success-hsl:           var(--green-100-hsl);
-    bgc-success-opaque:               hsla(var(--green-400-hsl) / 0.08);
-    bgc-success-subtle:        #f8fdf7;
-    bgc-success-subtle-opaque:        hsla(var(--green-400-hsl) / 0.03);
-    bgc-success-strong:        var(--green-400);
-
-    bgc-primary:               var(--white);
-    bgc-primary-hsl:           var(--white-hsl);
-
-    bgc-secondary:             var(--black-100);
-    bgc-secondary-hsl:         var(--black-100-hsl);
-    bgc-secondary-opaque:      hsla(var(--black-900-hsl) / 0.02);
-
-    bgc-moderate:              var(--black-200);
-    bgc-moderate-hsl:          var(--black-200-hsl);
-    bgc-moderate-opaque:       hsla(var(--black-900-hsl) / 0.09);
-
-    bgc-bold:                  var(--black-300);
-    bgc-bold-hsl:              var(--black-300-hsl);
-    bgc-bold-opaque:           hsla(var(--black-900-hsl) / 0.18);
-
-    bgc-strong:                var(--black-600);
-    bgc-strong-hsl:            var(--black-600-hsl);
-    bgc-strong-opaque:              hsla(var(--black-900-hsl) / 0.67);
-
-    bgc-contrast:              var(--black-800);
-    bgc-contrast-hsl:          var(--black-800-hsl);
-    bgc-contrast-opaque:       hsla(var(--black-900-hsl) / 0.87);
-}
-
-//  ============================================================================
-//  $   BORDER COLORS
-//      Semantic border colors
-//  ----------------------------------------------------------------------------
-@border-colors: {
-    bc-subtle:            rgba(0, 0, 0, 0.1);
-    bc-default:           rgba(0, 0, 0, 0.18);
-    bc-moderate:          rgba(0, 0, 0, 0.34);
-    bc-bold:              rgba(0, 0, 0, 0.5);
-    bc-focus:             var(--blue-300);
-    bc-critical:          var(--red-300);
-    bc-critical-subtle:   var(--red-200);
-    bc-critical-strong:   var(--red-400);
-    bc-success:           var(--green-400);
-    bc-success-subtle:    var(--green-200);
-    bc-success-strong:    var(--green-500);
-    bc-warning:           var(--gold-400);
-    bc-warning-subtle:    var(--gold-200);
-    bc-warning-strong:    var(--gold-500);
-    bc-brand:             var(--purple-400);
-    bc-accent:            var(--magenta-300);
-    bc-brand-subtle:      var(--purple-200);
-    bc-brand-strong:      var(--purple-500);
-    bc-subtle-inverted:   rgba(255, 255, 255, 0.14);
-    bc-default-inverted:  rgba(255, 255, 255, 0.22);
-    bc-moderate-inverted: rgba(255, 255, 255, 0.38);
-    bc-bold-inverted:     rgba(255, 255, 255, 0.5);
-    bc-critical-inverted:          var(--red-200);
-    bc-critical-subtle-inverted:   var(--red-400);
-    bc-critical-strong-inverted:   var(--red-100);
-    bc-success-inverted:           var(--green-200);
-    bc-success-subtle-inverted:    var(--green-400);
-    bc-success-strong-inverted:    var(--green-100);
-    bc-warning-inverted:           var(--gold-200);
-    bc-warning-subtle-inverted:    var(--gold-400);
-    bc-warning-strong-inverted:    var(--gold-100);
-    bc-brand-inverted:             var(--purple-400);
-    bc-brand-subtle-inverted:      var(--purple-500);
-    bc-brand-strong-inverted:      var(--purple-200);
-}
-
-//  ============================================================================
-//  $   TYPE COLORS
-//      Various type color names
-//  ----------------------------------------------------------------------------
-@type-colors: {
-    fo:                         100%;
-    fc-primary:                 var(--black-900);
-    fc-primary-hsl:             var(--black-900-hsl);
-
-    fc-primary-inverted:        var(--white);
-    fc-primary-inverted-hsl:    var(--white-hsl);
-
-    fc-secondary:               var(--black-700);
-    fc-secondary-hsl:           var(--black-700-hsl);
-
-    fc-secondary-inverted:      var(--black-200);
-    fc-secondary-inverted-hsl:  var(--black-200-hsl);
-
-    fc-tertiary-inverted:       var(--black-300);
-    fc-tertiary-inverted-hsl:   var(--black-300-hsl);
-
-    fc-tertiary:                var(--black-600);
-    fc-tertiary-hsl:            var(--black-600-hsl);
-
-    fc-muted:                   hsla(var(--black-800-hsl) ~' / ' var(--alpha, 50%));
-    fc-muted-inverted:          hsla(var(--black-200-hsl) ~' / ' var(--alpha, 60%));
-
-    fc-placeholder:             var(--black-500);
-    fc-placeholder-hsl:         var(--black-500-hsl);
-
-    fc-placeholder-inverted:    var(--black-500);
-    fc-placeholder-inverted-hsl:var(--black-500-hsl);
-
-    fc-disabled:                var(--black-500);
-    fc-disabled-hsl:            var(--black-500-hsl);
-
-    fc-disabled-inverted:       var(--black-500);
-    fc-disabled-inverted-hsl:   var(--black-500-hsl);
-
-    fc-critical:                var(--red-300);
-    fc-critical-strong:         var(--red-400);
-    fc-critical-hsl:            var(--red-300-hsl);
-    fc-critical-strong-hsl:     var(--red-400-hsl);
-
-    fc-critical-inverted:       var(--red-200);
-    fc-critical-strong-inverted:hsl(0deg 100% 82% / 1);
-    fc-critical-inverted-hsl:   var(--red-200-hsl);
-
-    fc-error:                   var(--fc-critical);
-    fc-error-inverted:          var(--fc-critical-inverted);
-    fc-error-strong:            var(--fc-critical-strong);
-    fc-error-hsl:               var(--fc-critical-hsl);
-    fc-error-inverted-hsl:      var(--fc-critical-inverted-hsl);
-    fc-error-strong-hsl:        var(--fc-critical-strong-hsl);
-
-    fc-success:                 var(--green-400);
-    fc-success-strong:          var(--green-500);
-    fc-success-hsl:             var(--green-400-hsl);
-    fc-success-strong-hsl:      var(--green-500-hsl);
-
-    fc-success-inverted:        var(--green-200);
-    fc-success-strong-inverted: hsl(113deg 100% 90% / 1);
-    fc-success-hsl-inverted:    var(--green-200-hsl);
-
-    fc-warning:                 var(--gold-500);
-    fc-warning-inverted:        var(--gold-100);
-    fc-warning-hsl:             var(--gold-500-hsl);
-    fc-warning-inverted-hsl:    var(--gold-100-hsl);
-
-    fc-warning-hover:           var(--black-900);
-    fc-warning-hover-hsl:       var(--black-900-hsl);
-
-    //  --  BASE TEMPLATE
-    base-color-text:           var(--fc-primary);
-    base-color-background:     var(--bgc-primary);
-}
-
-//  $$  DARK HSL BREAKDOWNS
-//  ----------------------------------------------------------------------------
-@dark-color-vars: {
-    // Temporary and exploratory, these will be replaced by Design Tokens anyway
-    base-color-text:       var(--black-800);
-    theme-mention-color-foreground: white;
-    theme-mention-color-background: var(--purple-300);
-    base-color-background: var(--bgc-primary);
-    bc-critical:           var(--red-400);
-    bc-subtle:             rgba(255, 255, 255, 0.18);
-    bc-default:            rgba(255, 255, 255, 0.26);
-    bc-moderate:           rgba(255, 255, 255, 0.4);
-    bc-bold:               rgba(255, 255, 255, 0.6);
-    bgc-moderate-opaque:   var(--bgc-moderate); // temp workaround
-    bgc-strong-opaque:     var(--bgc-strong); // temp workaround
-    bgc-contrast-opaque:   var(--bgc-contrast); // temp workaround
-    fc-critical:           var(--red-400);
-    fc-warning:            var(--gold-400);
-}

package/lib/build/less/variables/icons.less

@@ -1,43 +0,0 @@
-//
-//  DIALTONE
-//  TOKENS: ICONS
-//
-//  These are icon variables for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/
-//
-//  ============================================================================
-//  $   ICON SIZES
-//  ----------------------------------------------------------------------------
-//  OLD VARIABLES
-@icon-size14:     1.4rem;
-@icon-size16:     1.6rem;
-@icon-size18:     1.8rem;
-@icon-size20:     2rem;
-@icon-size24:     2.4rem;
-@icon-size32:     3.2rem;
-@icon-size48:     4.8rem;
-@icon-size64:     6.4rem;
-
-//  NEW VARIABLES
-@icon12:                        1.2rem;
-@icon14:                        1.4rem;
-@icon16:                        1.6rem;
-@icon18:                        1.8rem;
-@icon20:                        2rem;
-@icon24:                        2.4rem;
-@icon32:                        3.2rem;
-@icon48:                        4.8rem;
-@icon64:                        6.4rem;
-
-@icon-vars: {
-  icon12:                       @icon12;
-  icon14:                       @icon14;
-  icon16:                       @icon16;
-  icon18:                       @icon18;
-  icon20:                       @icon20;
-  icon24:                       @icon24;
-  icon32:                       @icon32;
-  icon48:                       @icon48;
-  icon64:                       @icon64;
-}

package/lib/build/less/variables/spacing.less

@@ -1,81 +0,0 @@
-//
-//  DIALTONE
-//  TOKENS: SPACING
-//
-//  These are spacing tokens for Dialpad's design system Dialtone.
-//  For further documentation of these values, please visit:
-//  https://dialpad.design/tokens/spacing
-//
-//  ============================================================================
-//  $   SPACING UNITS
-//  ----------------------------------------------------------------------------
-@su0:                           0;          // 0
-@su1:                           0.1rem;     // 1px
-@su2:                           0.2rem;     // 2px
-@su4:                           0.4rem;     // 4px
-@su6:                           0.6rem;     // 6px
-@su8:                           0.8rem;     // 8px
-@su12:                          1.2rem;     // 12px
-@su16:                          1.6rem;     // 16px
-@su24:                          2.4rem;     // 24px
-@su32:                          3.2rem;     // 32px
-@su48:                          4.8rem;     // 48px
-@su64:                          6.4rem;     // 64px
-@su72:                          7.2rem;     // 72px
-@su84:                          8.4rem;     // 84px
-@su96:                          9.6rem;     // 96px
-@su102:                         10.2rem;    // 102px
-@su114:                         11.4rem;    // 114px
-@su128:                         12.8rem;    // 128px
-
-@spacing-units: {
-    su0:    @su0;
-    su1:    @su1;
-    su2:    @su2;
-    su4:    @su4;
-    su6:    @su6;
-    su8:    @su8;
-    su12:   @su12;
-    su16:   @su16;
-    su24:   @su24;
-    su32:   @su32;
-    su48:   @su48;
-    su64:   @su64;
-    su72:   @su72;
-    su84:   @su84;
-    su96:   @su96;
-    su102:  @su102;
-    su114:  @su114;
-    su128:  @su128;
-
-    sun1:   -(@su1);
-    sun2:   -(@su2);
-    sun4:   -(@su4);
-    sun6:   -(@su6);
-    sun8:   -(@su8);
-    sun12:  -(@su12);
-    sun16:  -(@su16);
-    sun24:  -(@su24);
-    sun32:  -(@su32);
-    sun48:  -(@su48);
-    sun64:  -(@su64);
-    sun72:  -(@su72);
-    sun84:  -(@su84);
-    sun96:  -(@su96);
-    sun102: -(@su102);
-    sun114: -(@su114);
-    sun128: -(@su128);
-}
-
-body {
-    //  Spacing units
-    each(@spacing-units, {
-        --@{key}: @value;
-    });
-}
-
-#d-internals #spacing-classes(0.8rem, 'space');
-#d-internals #spacing-classes(1.6rem, 'space', '-16');
-#d-internals #spacing-classes(3.2rem, 'space', '-32');
-#d-internals #spacing-classes(6.4rem, 'space', '-64');
-#d-internals #spacing-classes(12.8rem, 'space', '-128');

package/lib/dist/js/dialtone_migration_helper/configs/tokens-migration.mjs

@@ -1,13 +0,0 @@
-export default {
-  description:
-    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
-    '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
-    'eg. var(--black-200) with var(--dt-color-black-200)',
-  patterns: ['**/*.{css,less,scss,sass,styl,html,vue}'],
-  expressions: [
-    {
-      from: /var\(--(white|black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)?\)/gi,
-      to: 'var(--dt-color-$1$2)',
-    },
-  ],
-};