@dialpad/dialtone-css 1.0.0 → 8.22.2

package/README.md

@@ -1,17 +1,17 @@
-# Dialtone
+# Dialtone CSS
 
-This is the home for Dialtone, Dialpad's design system. It includes the resources needed to create consistent,
-predictable interfaces that conform to Dialpad’s design principles, language, styles, and best practices.
+This is the library for Dialtone's CSS. Any classes or styles used within Dialtone should
+be stored here and documented on our site under `apps/dialtone-documentation`.
 
-## Install Dialtone
+## Installation
 
-### Install it via NPM:
+### Install it via NPM
 
 ```shell
-npm install @dialpad/dialtone
+npm install @dialpad/dialtone-css@latest
 ```
 
-### Import dialtone:
+### Import dialtone
 
 - CSS/LESS:
 
@@ -47,7 +47,7 @@ It is required to do this for Dialtone to function.
 ## Building Dialtone locally
 
 To build Dialtone locally, visit
-our [installation instructions](https://dialtone.dialpad.design/guides/getting-started/#build-dialtone-locally).
+our [installation instructions](https://dialtone.dialpad.com/guides/getting-started/#build-dialtone-locally).
 
 ## Contributing
 

package/lib/build/less/components/avatar.less

@@ -4,7 +4,7 @@
 //
 //  These are avatars classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/avatars
+//  visit https://dialtone.dialpad.com/components/avatars
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/badge.less

@@ -4,7 +4,7 @@
 //
 //  These are badge classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/badges
+//  visit https://dialtone.dialpad.com/components/badges
 //
 //  TABLE OF CONTENTS
 //  • COMPONENT CSS VARIABLES

package/lib/build/less/components/banner.less

@@ -5,7 +5,7 @@
 //  These are the styles for banners, which are a type of notice used
 //  to alert users about important information relevant to them.
 //  For further documentation of these styles, please visit:
-//  https://dialpad.design/components/banners
+//  https://dialtone.dialpad.com/components/banners
 //
 //  ============================================================================
 //  $   BASE WRAPPER

package/lib/build/less/components/breadcrumbs.less

@@ -3,7 +3,7 @@
 //  COMPONENTS: BREADCRUMBS
 //
 //  These are breadcrumb classes for Dialpad's design system Dialtone.
-//  For further information, visit https://dialpad.design/components/breadcrumbs
+//  For further information, visit https://dialtone.dialpad.com/components/breadcrumbs
 //
 //  TABLE OF CONTENTS
 //  • WRAPPER
@@ -85,4 +85,3 @@
         }
     }
 }
-

package/lib/build/less/components/button.less

@@ -4,7 +4,7 @@
 //
 //  These are button classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/buttons
+//  visit https://dialtone.dialpad.com/components/buttons
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/card.less

@@ -4,7 +4,7 @@
 //
 //  These are card classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/card
+//  visit https://dialtone.dialpad.com/components/card
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/chip.less

@@ -4,7 +4,7 @@
 //
 //  These are chip classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/chip
+//  visit https://dialtone.dialpad.com/components/chip
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/collapsible.less

@@ -4,7 +4,7 @@
 //
 //  These are collapsible classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/collapsible
+//  visit https://dialtone.dialpad.com/components/collapsible
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/combobox.less

@@ -4,7 +4,7 @@
 //
 //  These are combobox classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/combobox
+//  visit https://dialtone.dialpad.com/components/combobox
 //
 //  TABLE OF CONTENTS
 //  • EMPTY LIST

package/lib/build/less/components/forms.less

@@ -4,7 +4,7 @@
 //
 //  These are form classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/forms
+//  visit https://dialtone.dialpad.com/components/forms
 //
 //  TABLE OF CONTENTS
 //  • FIELDSETS

package/lib/build/less/components/icon.less

@@ -4,7 +4,7 @@
 //
 //  These are icon component classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/icon.html
+//  visit https://dialtone.dialpad.com/components/icon.html
 //
 //  TABLE OF CONTENTS
 //  • SIZE

package/lib/build/less/components/input.less

@@ -4,7 +4,7 @@
 //
 //  These are input classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/inputs
+//  visit https://dialtone.dialpad.com/components/inputs
 //
 //  TABLE OF CONTENTS
 //  • VARIABLES

package/lib/build/less/components/item-layout.less

@@ -4,7 +4,7 @@
 //
 // Custom layout to enable developer to use list-item like stack.
 // It is used as base for `dt-list-item` component
-// visit https://dialpad.design/components/item_layout
+// visit https://dialtone.dialpad.com/components/item_layout
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/link.less

@@ -4,7 +4,7 @@
 //
 //  These are link classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/links
+//  visit https://dialtone.dialpad.com/components/links
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/list-group.less

@@ -4,7 +4,7 @@
 //
 //  These are the list group definitions, which are used by classes or can be
 //  used within Vue components. For further documentation of these values,
-//  please visit https://dialpad.design/components/list-groups
+//  please visit https://dialtone.dialpad.com/components/list-groups
 //
 //  ============================================================================
 .d-list-group,

package/lib/build/less/components/modal.less

@@ -4,7 +4,7 @@
 //
 //  These are modal classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/modals
+//  visit https://dialtone.dialpad.com/components/modals
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLES

package/lib/build/less/components/notice.less

@@ -4,7 +4,7 @@
 //
 //  These are the styles for notices, which are used by alert users to
 //  information they might need. For further documentation of these styles,
-//  please visit https://dialpad.design/components/notices
+//  please visit https://dialtone.dialpad.com/components/notices
 //
 //  ============================================================================
 //  $   BASE WRAPPER

package/lib/build/less/components/popover.less

@@ -4,7 +4,7 @@
 //
 //  These are popover classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/popover
+//  visit https://dialtone.dialpad.com/components/popover
 //
 //  TABLE OF CONTENTS
 //  • POPOVER

package/lib/build/less/components/presence.less

@@ -4,7 +4,7 @@
 //
 //  These are presence classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/presence
+//  visit https://dialtone.dialpad.com/components/presence
 
 .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-color-background);

package/lib/build/less/components/radio-checkbox.less

@@ -4,7 +4,7 @@
 //
 //  These are input classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/inputs
+//  visit https://dialtone.dialpad.com/components/inputs
 //
 //  TABLE OF CONTENTS
 //  • SHARED STYLES

package/lib/build/less/components/root-layout.less

@@ -4,7 +4,7 @@
 //
 //  These are the styles for root layout for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/root-layout.html
+//  visit https://dialtone.dialpad.com/components/root-layout.html
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/selects.less

@@ -4,7 +4,7 @@
 //
 //  These are select menu classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/select
+//  visit https://dialtone.dialpad.com/components/select
 //
 //  TABLE OF CONTENTS
 //  • SELECT MENUS

package/lib/build/less/components/skeleton.less

@@ -5,7 +5,7 @@
 //  These are the styles for skeleton component.
 //  The --placeholder-from-color and --placeholder-to-color custom properties can be set on the parent class of the
 //  placeholder to control the animation colors.
-//  For further documentation of these styles, please visit https://dialpad.design/components/skeleton
+//  For further documentation of these styles, please visit https://dialtone.dialpad.com/components/skeleton
 //
 //
 //  TABLE OF CONTENTS

package/lib/build/less/components/table.less

@@ -4,7 +4,7 @@
 //
 //  These are table component classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/tables
+//  visit https://dialtone.dialpad.com/components/tables
 //
 //  TABLE OF CONTENTS
 //  • DEFAULT STYLE

package/lib/build/less/components/tabs.less

@@ -4,7 +4,7 @@
 //
 //  These are tab classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/tabs
+//  visit https://dialtone.dialpad.com/components/tabs
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/toast.less

@@ -4,7 +4,7 @@
 //
 //  These are the styles for toast notices, which are used by alert users to
 //  information they might need. For further documentation of these styles,
-//  please visit https://dialpad.design/components/toasts
+//  please visit https://dialtone.dialpad.com/components/toasts
 
 //  ============================================================================
 //  @   TOAST CONTAINER

package/lib/build/less/components/toggle.less

@@ -4,7 +4,7 @@
 //
 //  These are toggle classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/toggle
+//  visit https://dialtone.dialpad.com/components/toggle
 //
 //  TABLE OF CONTENTS
 //  • BASE STYLE

package/lib/build/less/components/tooltip.less

@@ -4,7 +4,7 @@
 //
 //  These are tooltip classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/tooltips
+//  visit https://dialtone.dialpad.com/components/tooltips
 //
 //  TABLE OF CONTENTS
 //  • VARIABLES

package/lib/build/less/dialtone-globals.less

@@ -4,7 +4,7 @@
 //
 //  This file provides global CSS styles for Dialtone. For more Information
 //  about Dialtone and these classes, please visit:
-//  https://dialpad.design
+//  https://dialtone.dialpad.com
 //
 //  ============================================================================
 

package/lib/build/less/dialtone-variables.less

@@ -5,7 +5,7 @@
 //  This file provides the tokens and definitions for Dialtone. This file
 //  OUTPUTS NO CSS. Instead use this file as an import for your Vue app.
 //  For documentation about these tokens, definitions, and related CSS classes,
-//  please visit: https://dialpad.design
+//  please visit: https://dialtone.dialpad.com
 //
 //  ============================================================================
 //  $   VARIABLES

package/lib/build/less/dialtone.less

@@ -3,7 +3,7 @@
 //
 //  This file provides CSS classes for Dialtone, the Dialpad design system.
 //  For further information about these classes, please visit:
-//  https://dialpad.design
+//  https://dialtone.dialpad.com
 //
 //
 //  ============================================================================

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

@@ -4,7 +4,7 @@
 //
 //  This file contains all the theme-able portions of Dialtone.
 //  For further information about these classes, please visit:
-//  https://dialpad.design/themes
+//  https://dialtone.dialpad.com/themes
 //
 //  ============================================================================
 //  THEME VARIABLES

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

@@ -4,7 +4,7 @@
 //
 //  Use this file to create Dialtone themes..
 //  For further information about these theming, please visit:
-//  https://dialpad.design/themes
+//  https://dialtone.dialpad.com/themes
 //
 //  TABLE OF CONTENTS:
 //    - REFERENCE FILES

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

@@ -4,7 +4,7 @@
 //
 //  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
+//  visit https://dialtone.dialpad.com/utilities/borders
 //
 //  TABLE OF CONTENTS
 //  • BACKGROUND ATTACHMENT

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

@@ -4,7 +4,7 @@
 //
 //  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
+//  visit https://dialtone.dialpad.com/utilities/borders
 //
 //  TABLE OF CONTENTS
 //  • BORDERS

package/lib/build/less/utilities/colors.less

@@ -4,7 +4,7 @@
 //
 //  These are all the color utility classes for Dialpad's design system Dialtone.
 //  For further information about these classes, please visit their respective
-//  documentation pages at https://dialpad.design
+//  documentation pages at https://dialtone.dialpad.com
 //
 //  TABLE OF CONTENTS
 //  • TEXT COLORS

package/lib/build/less/utilities/effects.less

@@ -4,7 +4,7 @@
 //
 //  These are effects utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/effects
+//  visit https://dialtone.dialpad.com/utilities/effects
 //
 //  TABLE OF CONTENTS
 //  • ANIMATIONS

package/lib/build/less/utilities/flex.less

@@ -4,7 +4,7 @@
 //
 //  These are the flexbox utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes, visit:
-//  https://dialpad.design/utilities/layout/flex/
+//  https://dialtone.dialpad.com/utilities/layout/flex/
 //
 //  TABLE OF CONTENTS
 //  • ALIGN CONTENT

package/lib/build/less/utilities/grid.less

@@ -4,7 +4,7 @@
 //
 //  These are the CSS grid utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/grid
+//  visit https://dialtone.dialpad.com/utilities/grid
 //
 //  TABLE OF CONTENTS
 //  • GRID VARIABLES

package/lib/build/less/utilities/interactivity.less

@@ -4,7 +4,7 @@
 //
 //  These are interactivity utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/interactivity
+//  visit https://dialtone.dialpad.com/utilities/interactivity
 //
 //  TABLE OF CONTENTS
 //  • CURSOR

package/lib/build/less/utilities/layout.less

@@ -4,7 +4,7 @@
 //
 //  These are layout utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/layout
+//  visit https://dialtone.dialpad.com/utilities/layout
 //
 //  TABLE OF CONTENTS
 //  • BOX SIZING

package/lib/build/less/utilities/sizing.less

@@ -4,7 +4,7 @@
 //
 //  These are sizing utility classes for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/sizing
+//  visit https://dialtone.dialpad.com/utilities/sizing
 //
 //  TABLE OF CONTENTS
 //  • HEIGHT

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

@@ -4,7 +4,7 @@
 //
 //  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
+//  visit https://dialtone.dialpad.com/utilities/spacing
 //
 //  TABLE OF CONTENTS
 //  • AUTO-SPACING

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

@@ -4,7 +4,7 @@
 //
 //  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
+//  visit https://dialtone.dialpad.com/utilties/typography
 //
 //  TABLE OF CONTENTS
 //  • FONT FAMILY

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

@@ -6,7 +6,7 @@
 //
 //  These are typography constants for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
-//  visit https://dialpad.design/tokens/typography
+//  visit https://dialtone.dialpad.com/tokens/typography
 //
 //  TABLE OF CONTENTS
 //  • Line heights

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

@@ -6,7 +6,7 @@
 //
 //  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
+//  https://dialtone.dialpad.com/tokens/visual-styles
 //
 //  TABLE OF CONTENTS
 //  • BACKGROUND PATTERNS

package/lib/dist/css/dialtone.css

@@ -7426,7 +7426,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Tue, 19 Dec 2023 20:54:39 GMT
+ * Generated on Sat, 13 Jan 2024 01:14:28 GMT
  */
 
 .dialtone-theme-light {
@@ -8223,7 +8223,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Tue, 19 Dec 2023 20:54:40 GMT
+ * Generated on Sat, 13 Jan 2024 01:14:29 GMT
  */
 
 .dialtone-theme-dark {
@@ -15331,7 +15331,7 @@ body {
   --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-x) var(--dt-shadow-extra-large-1-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-x) var(--dt-shadow-extra-large-2-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-x) var(--dt-shadow-extra-large-3-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-x) var(--dt-shadow-extra-large-4-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color), var(--dt-shadow-extra-large-5-x) var(--dt-shadow-extra-large-5-y) var(--dt-shadow-extra-large-5-blur) var(--dt-shadow-extra-large-5-spread) var(--dt-shadow-extra-large-5-color);
   --dt-shadow-card: var(--dt-shadow-card-1-x) var(--dt-shadow-card-1-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-x) var(--dt-shadow-card-2-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-x) var(--dt-shadow-card-3-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color), var(--dt-shadow-card-4-x) var(--dt-shadow-card-4-y) var(--dt-shadow-card-4-blur) var(--dt-shadow-card-4-spread) var(--dt-shadow-card-4-color), var(--dt-shadow-card-5-x) var(--dt-shadow-card-5-y) var(--dt-shadow-card-5-blur) var(--dt-shadow-card-5-spread) var(--dt-shadow-card-5-color), var(--dt-shadow-card-6-x) var(--dt-shadow-card-6-y) var(--dt-shadow-card-6-blur) var(--dt-shadow-card-6-spread) var(--dt-shadow-card-6-color), var(--dt-shadow-card-7-x) var(--dt-shadow-card-7-y) var(--dt-shadow-card-7-blur) var(--dt-shadow-card-7-spread) var(--dt-shadow-card-7-color);
   --dt-shadow-focus: var(--dt-shadow-focus-1-x) var(--dt-shadow-focus-1-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-x) var(--dt-shadow-focus-2-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
-  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-1-x) var(--dt-shadow-focus-inset-1-y) var(--dt-shadow-focus-inset-1-blur) var(--dt-shadow-focus-inset-1-spread) var(--dt-shadow-focus-inset-1-color);
+  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-1-x) var(--dt-shadow-focus-inset-1-y) var(--dt-shadow-focus-inset-1-blur) var(--dt-shadow-focus-inset-1-spread) var(--dt-shadow-focus-inset-1-color) inset;
 }
 
 .dialtone-theme-light {
@@ -15767,7 +15767,7 @@ body {
   --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-x) var(--dt-shadow-extra-large-1-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color);
   --dt-shadow-card: var(--dt-shadow-card-1-x) var(--dt-shadow-card-1-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-x) var(--dt-shadow-card-2-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-x) var(--dt-shadow-card-3-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
   --dt-shadow-focus: var(--dt-shadow-focus-1-x) var(--dt-shadow-focus-1-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-x) var(--dt-shadow-focus-2-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
-  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-1-x) var(--dt-shadow-focus-inset-1-y) var(--dt-shadow-focus-inset-1-blur) var(--dt-shadow-focus-inset-1-spread) var(--dt-shadow-focus-inset-1-color);
+  --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-1-x) var(--dt-shadow-focus-inset-1-y) var(--dt-shadow-focus-inset-1-blur) var(--dt-shadow-focus-inset-1-spread) var(--dt-shadow-focus-inset-1-color) inset;
 }
 
 @media (max-width: 480px) {