@dialpad/dialtone-css
Version:
Dialpad's design system
124 lines (116 loc) • 3.72 kB
text/less
//
// DIALTONE
//
// This file provides CSS classes for Dialtone, the Dialpad design system.
// For further information about these classes, please visit:
// https://dialtone.dialpad.com
//
//
// ============================================================================
@import 'dialtone-reset';
@import 'dialtone-variables';
@import 'dialtone-transitions';
// -- COMPONENTS
@import 'components/root-layout';
@import 'components/stack';
@import 'components/item-layout';
@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/dropdown';
@import 'components/description-list';
@import 'components/empty-state';
@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/list-item';
@import 'components/loader';
@import 'components/modal';
@import 'components/notice';
@import 'components/toast';
@import 'components/banner';
@import 'components/pagination';
@import 'components/popover';
@import 'components/radio-checkbox';
@import 'components/rich-text-editor';
@import 'components/scroller';
@import 'components/selects';
@import 'components/skeleton';
@import 'components/table';
@import 'components/tabs';
@import 'components/tooltip';
@import 'components/toggle';
@import 'components/presence';
@import 'components/icon';
@import 'components/scrollbar';
@import 'components/emoji';
@import 'components/emoji-text-wrapper';
@import 'components/emoji-picker';
// -- 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';
// -- RECIPES
@import 'recipes/attachment_carousel';
@import 'recipes/callbar_button';
@import 'recipes/callbar_button_with_popover';
@import 'recipes/callbar_button_with_dropdown';
@import 'recipes/callbox';
@import 'recipes/combobox_multi_select';
@import 'recipes/combobox_with_popover';
@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/motion_text';
@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';
// -- DEBUG
[data-migrate-outline] {
--outline-color: orangered;
--outline-size: var(--dt-size-200);
--outline-offset: calc(var(--outline-size) * -1);
/* stylelint-disable-next-line meowtec/no-px */
outline: var(--outline-size) solid var(--outline-color) ;
/* stylelint-disable-next-line meowtec/no-px */
outline-offset: var(--outline-offset);
&:hover {
--outline-color: transparent;
}
/* stylelint-disable-next-line meowtec/no-px */
> * {
/* stylelint-disable-next-line meowtec/no-px */
outline: var(--outline-size) dotted var(--outline-color);
/* stylelint-disable-next-line meowtec/no-px */
outline-offset: var(--outline-offset);
}
}