refactor: DLT-2122 move css out of recipes

README.md

@@ -34,21 +34,13 @@ If you don't care about theming and just want to use Dialtone with the default l
 
 ```css
 @import "@dialpad/dialtone/css-default-theme";
-/* If using vue components */
-@import "@dialpad/dialtone/vue2/css";
-/* Or */
-@import "@dialpad/dialtone/vue3/css";
 
 ```
 
 - Javascript
 
 ```js
 import "@dialpad/dialtone/css-default-theme";
-/* If using vue components */
-import "@dialpad/dialtone/vue2/css";
-/* Or */
-import "@dialpad/dialtone/vue3/css";
 ```
 
 #### With theming
@@ -59,20 +51,12 @@ If you want to use theming, import from the below path. This file does not inclu
 
 ```css
 @import "@dialpad/dialtone/css";
-/* If using vue components */
-@import "@dialpad/dialtone/vue2/css";
-/* Or */
-@import "@dialpad/dialtone/vue3/css";
 ```
 
 - Javascript
 
 ```js
 import "@dialpad/dialtone/css";
-/* If using vue components */
-import "@dialpad/dialtone/vue2/css";
-/* Or */
-import "@dialpad/dialtone/vue3/css";
 ```
 
 ##### Set theme via setTheme() javascript function (preferred)

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExamplePresence.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dt-leftbar-row dt-leftbar-row__primary">
+  <div class="dt-recipe-leftbar-row dt-recipe-leftbar-row__primary">
     <div
       class="d-presence"
     >

apps/dialtone-documentation/docs/.vuepress/theme/client.js

@@ -9,7 +9,6 @@ import { flushPromises } from '@workspaceRoot/common/utils/client.mjs';
 
 // CSS
 import '@dialpad/dialtone-css/lib/dist/dialtone.css';
-import '@dialpad/dialtone-vue/css';
 // import '@dialpad/dialtone-combinator/css';
 import './assets/less/dialtone-docs.less';
 import './assets/less/dialtone-syntax.less';

package.json

@@ -73,7 +73,6 @@
       "import": "./dist/vue2/dialtone-vue.js",
       "require": "./dist/vue2/dialtone-vue.cjs"
     },
-    "./vue2/css": "./dist/vue2/style.css",
     "./vue2/*": {
       "types": "./dist/vue2/types/index.d.ts",
       "import": "./dist/vue2/*.js",
@@ -84,7 +83,6 @@
       "import": "./dist/vue3/dialtone-vue.js",
       "require": "./dist/vue3/dialtone-vue.cjs"
     },
-    "./vue3/css": "./dist/vue3/style.css",
     "./vue3/*": {
       "types": "./dist/vue3/types/index.d.ts",
       "import": "./dist/vue3/*.js",

packages/combinator/src/main.js

@@ -2,7 +2,6 @@ import { createApp } from 'vue';
 import App from './App.vue';
 
 import '@dialpad/dialtone-css';
-import '@dialpad/dialtone-vue/css';
 import './assets/transitions.less';
 
 import { setTheme } from '@dialpad/dialtone-tokens/themes/config';

packages/dialtone-css/lib/build/less/components/avatar.less

@@ -122,8 +122,8 @@
     border-radius: var(--dt-size-radius-pill);
     box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 
-    .dt-leftbar-row--selected &,
-    .dt-leftbar-row__primary:hover & {
+    .dt-recipe-leftbar-row--selected &,
+    .dt-recipe-leftbar-row__primary:hover & {
       --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
     }
   }

packages/dialtone-css/lib/build/less/components/presence.less

@@ -23,11 +23,11 @@
   border-width: var(--presence-border-size);
   border-radius: var(--dt-size-radius-circle);
 
-  .dt-leftbar-row--selected & {
+  .dt-recipe-leftbar-row--selected & {
     --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
   }
 
-  .dt-leftbar-row__primary:hover & {
+  .dt-recipe-leftbar-row__primary:hover & {
     --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
   }
 

packages/dialtone-css/lib/build/less/dialtone.less

@@ -72,6 +72,26 @@
 @import 'utilities/spacing';
 @import 'utilities/typography';
 
+//  --  RECIPES
+@import 'recipes/attachment_carousel';
+@import 'recipes/callbar_button';
+@import 'recipes/callbar_button_with_popover';
+@import 'recipes/callbox';
+@import 'recipes/combobox_multi_select';
+@import 'recipes/contact_info';
+@import 'recipes/editor';
+@import 'recipes/emoji_row';
+@import 'recipes/feed_item_pill';
+@import 'recipes/feed_item_row';
+@import 'recipes/grouped_chip';
+@import 'recipes/ivr_node';
+@import 'recipes/leftbar_row';
+@import 'recipes/message_input';
+@import 'recipes/settings_menu_button';
+@import 'recipes/time_pill';
+@import 'recipes/top_banner_info';
+@import 'recipes/unread_pill';
+
 //  --  THEMES & GLOBAL SETTINGS
 @import 'dialtone-globals';
 @import 'themes/default';

packages/dialtone-css/lib/build/less/recipes/attachment_carousel.less

@@ -0,0 +1,109 @@
+.dt-recipe-attachment-carousel {
+  position: relative;
+  width: var(--dt-space-1000);
+  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
+
+  .dt-recipe-attachment-carousel__media-list {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .dt-recipe-attachment-carousel__arrow {
+    position: absolute;
+    top: var(--dt-space-30-percent);
+    background-color: var(--dt-color-neutral-white);
+    border: var(--dt-space-100) solid;
+    border-color: var(--bc-default);
+    border-width: var(--dt-size-100);
+    opacity: 0;
+
+    .dt-recipe-attachment-carousel:hover & {
+      opacity: 1;
+    }
+
+    .dt-recipe-attachment-carousel__arrow--left {
+      left: var(--dt-space-300);
+    }
+
+    .dt-recipe-attachment-carousel__arrow--right {
+      right: var(--dt-space-300);
+    }
+  }
+
+  .dt-recipe-attachment-carousel__image {
+    position: relative;
+
+    .dt-recipe-attachment-carousel__image__close-button {
+      position: absolute;
+      top: inherit;
+      right: inherit;
+      color: var(--dt-color-neutral-white);
+      background-color: var(--dt-color-black-400);
+      border: var(--dt-space-100) solid;
+      border-color: var(--dt-color-neutral-white);
+      border-width: var(--dt-size-200);
+      opacity: 0;
+
+      .dt-recipe-attachment-carousel__image:focus-within &, .dt-recipe-attachment-carousel__image:hover & {
+        opacity: 1;
+      }
+    }
+
+    .dt-recipe-attachment-carousel__image__viewer {
+      width: var(--dt-size-700);
+      height: var(--dt-size-700);
+      object-fit: cover;
+      border: var(--dt-space-100) solid;
+      border-color: var(--dt-color-border-subtle);
+      border-width: var(--dt-size-350);
+      border-radius: var(--br4);
+    }
+
+    .dt-recipe-attachment-carousel__image__top-right {
+      position: absolute;
+      top: var(--dt-size-100);
+      right: var(--dt-size-100);
+    }
+
+    .dt-recipe-attachment-carousel__image__progress-bar {
+      position: absolute;
+      top: inherit;
+      right: inherit;
+      display: flex;
+      background-color: var(--dt-color-neutral-white);
+      border: var(--dt-space-100) solid;
+      border-color: var(--dt-color-border-subtle);
+      border-width: var(--dt-size-200);
+      border-radius: 50%;
+      transform: rotate(-90deg);
+    }
+  }
+
+  .dt-recipe-attachment-carousel__progress-bar {
+    width: var(--dt-size-550);
+    height: var(--dt-size-550);
+
+    .dt-recipe-attachment-carousel__progress-bar__circle {
+      fill: none;
+      stroke-width: 2;
+      stroke-dasharray: var(--stroke-dasharray);
+    }
+
+    .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(1) {
+      stroke: var(--dt-color-black-100);
+      stroke-dashoffset: 0;
+    }
+
+    .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(2) {
+      transition: stroke-dashoffset 500ms linear;
+      stroke: var(--dt-color-purple-500);
+      stroke-dashoffset: var(--stroke-dashoffset);
+    }
+  }
+}

packages/dialtone-css/lib/build/less/recipes/callbar_button.less

@@ -0,0 +1,47 @@
+//
+//  DIALTONE
+//  RECIPES: CALLBAR BUTTON
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • STATUS
+//  • VARIANTS
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.dt-recipe-callbar-button {
+  &:not(.dt-recipe-callbar-button--circle) {
+    line-height: var(--dt-font-line-height-300);
+  }
+
+  .dt-recipe-callbar-button.d-btn[disabled] {
+    background-color: unset;
+    opacity: .5;
+  }
+}
+
+//  ============================================================================
+//  $   STATUS
+//  ----------------------------------------------------------------------------
+.dt-recipe-callbar-button--active,
+.dt-recipe-callbar-button--active:hover {
+  .base-button__icon {
+    color: var(--primary-color);
+  }
+}
+
+.dt-recipe-callbar-button--disabled {
+  cursor: not-allowed;
+}
+
+//  ============================================================================
+//  $   VARIANTS
+//  ----------------------------------------------------------------------------
+.dt-recipe-callbar-button--circle {
+  border-radius: var(--dt-size-radius-circle);
+
+  &.d-btn[disabled] {
+    border-color: unset;
+  }
+}

packages/dialtone-css/lib/build/less/recipes/callbar_button_with_popover.less

@@ -0,0 +1,55 @@
+.dt-recipe-callbar-button-with-popover {
+  display: flex;
+  align-items: flex-start;
+}
+
+.dt-recipe-callbar-button-with-popover__arrow {
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  margin-top: var(--dt-space-450);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
+  padding: var(--dt-space-400);
+  border-radius: var(--dt-size-300);
+
+  .d-btn--active {
+    background: var(--dt-color-surface-moderate-opaque);
+  }
+}
+
+.dt-recipe-callbar-button-with-popover__arrow--large {
+  margin-left: var(--dt-space-550-negative);
+}
+
+.dt-recipe-callbar-button-with-popover__arrow-icon {
+  color: var(--dt-color-black-800);
+}
+
+.dt-recipe-callbar-button-with-popover__popover {
+  .d-popover__header {
+    color: var(--dt-color-foreground-primary-inverted);
+    background: var(--dt-color-surface-contrast);
+
+    .d-btn {
+      color: var(--dt-color-foreground-primary-inverted);
+    }
+  }
+}
+
+.dt-recipe-callbar-button-with-popover__button {
+  &.d-tab--selected::after,
+  &.d-tab--selected:hover::after {
+    --tab--bgc: var(--dt-color-surface-contrast);
+  }
+
+  &.tab-group {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &.tab-content {
+    flex: 1 1 100%;
+    overflow-y: auto;
+  }
+}
+