@servicetitan/design-system 11.3.1 → 11.4.2

package/dist/components/Table/Table.css

@@ -64,7 +64,7 @@
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -287,12 +287,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -388,7 +388,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -396,14 +396,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width
@@ -418,7 +418,7 @@ span.Popover {
 /* stylelint-disable-line */
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -432,17 +432,6 @@ span.Popover {
 .Table .k-grid-header .k-grid-header-wrap {
   border-right-color: transparent;
 }
-.Table:not(.Table--striped) .k-alt,
-.Table:not(.Table--striped) .k-grid-content-sticky td {
-  background-color: transparent;
-}
-.Table:not(.Table--striped) .k-alt:hover,
-.Table:not(.Table--striped) .k-grid-content-sticky td:hover {
-  background-color: #f5f5f5;
-}
-.Table:not(.Table--striped) .k-master-row:not(:hover) {
-  background: transparent;
-}
 .Table.Table--master-detail > .k-grid-header colgroup > :first-child {
   display: none;
 }
@@ -458,17 +447,6 @@ span.Popover {
 .Table.Table--master-detail > .k-grid-container > .k-grid-content > * > .k-grid-table > tbody > * > .k-hierarchy-cell {
   display: none;
 }
-.Table .k-state-selected td {
-  border-color: #d5e7fb;
-}
-.Table .k-state-selected:hover td {
-  background-color: #d5e7fb;
-}
-.Table .k-pager-wrap .k-state-selected {
-  background-color: #2270ee;
-  border-radius: 3px;
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
@@ -483,7 +461,7 @@ span.Popover {
   bottom: 8px;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical::before {
@@ -494,12 +472,6 @@ span.Popover {
 .Table .k-grid-header .k-header .k-grid-column-menu.k-grid-filter {
   border-radius: 3px;
 }
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
-  background-color: #2270ee;
-}
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header .k-link {
   font-weight: 400;
 }
@@ -510,24 +482,123 @@ span.Popover {
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-column-resizer:hover {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 .Table .k-grid-header-sticky[style*="border-right-width: 1px;"],
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
-  box-shadow: 2px 3px 5px 0 rgba(20, 20, 20, 0.1);
-}
-.Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
-  background-color: #eeeeee;
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table .k-i-sort-asc-sm,
 .Table .k-i-sort-desc-sm {
   font-size: 18px;
 }
+.Table.k-grid {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-grid-header {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-grid-header .k-grid-filter:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-header-column-menu:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-hierarchy-cell .k-icon:hover {
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
+  background-color: var(--colorsSurfacePrimary, #141414);
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-grid-header .k-i-sort-asc-sm,
+.Table.k-grid .k-grid-header .k-i-sort-desc-sm,
+.Table.k-grid .k-grid-header .k-sort-order {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Table.k-grid .k-state-selected td {
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+}
+.Table.k-grid .k-state-selected:hover td {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Table.k-grid tr.k-alt {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid tr.k-alt:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-alt,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td {
+  background-color: transparent;
+}
+.Table.k-grid:not(.Table--striped) .k-alt:hover,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-master-row:not(:hover) {
+  background: transparent;
+}
+.Table.k-grid.Table--sortable .k-header:hover,
+.Table.k-grid.Table--sortable th.k-header.k-sorted {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-grid-content {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid tbody tr.k-state-hover,
+.Table.k-grid tbody tr:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-checkbox {
+  border-color: var(--colorsBorderGreyStrong, #bcbcbd);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-checkbox.k-checked, .Table.k-grid .k-checkbox:checked {
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+}
+.Table.k-grid .k-checkbox.k-state-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
+  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #ecf4fd);
+}
+.Table.k-grid .k-filter-row > td,
+.Table.k-grid .k-filter-row > th,
+.Table.k-grid td,
+.Table.k-grid .k-grid-content-locked,
+.Table.k-grid .k-grid-footer,
+.Table.k-grid .k-grid-footer-locked,
+.Table.k-grid .k-grid-footer-wrap,
+.Table.k-grid .k-grid-header,
+.Table.k-grid .k-grid-header-locked,
+.Table.k-grid .k-grid-header-wrap,
+.Table.k-grid .k-grouping-header,
+.Table.k-grid .k-grouping-header .k-group-indicator,
+.Table.k-grid .k-header,
+.Table.k-grid th.k-header {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
+.Table.k-grid .k-pager-wrap {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-pager-wrap .k-state-selected {
+  background-color: var(--colorsSurfacePrimary, #141414);
+  border-radius: 3px;
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-pager-wrap .k-pager-nav.k-link:hover,
+.Table.k-grid .k-pager-wrap .k-pager-refresh:hover,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-nav.k-link,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-refresh {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
 
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }

package/dist/components/Table/Table.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Checkbox/Checkbox.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Popover/Popover.scss","../../../src/themes/kendo/_kendo-variables.scss","../../../src/components/Table/Table.scss"],"names":[],"mappings":"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","file":"Table.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Checkbox/Checkbox.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Popover/Popover.scss","../../../src/themes/kendo/_kendo-variables.scss","../../../src/components/Table/Table.scss"],"names":[],"mappings":"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","file":"Table.css"}

package/dist/components/Table/index.css

@@ -64,7 +64,7 @@
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -287,12 +287,12 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  background: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -388,7 +388,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -396,14 +396,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width
@@ -418,7 +418,7 @@ span.Popover {
 /* stylelint-disable-line */
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -432,17 +432,6 @@ span.Popover {
 .Table .k-grid-header .k-grid-header-wrap {
   border-right-color: transparent;
 }
-.Table:not(.Table--striped) .k-alt,
-.Table:not(.Table--striped) .k-grid-content-sticky td {
-  background-color: transparent;
-}
-.Table:not(.Table--striped) .k-alt:hover,
-.Table:not(.Table--striped) .k-grid-content-sticky td:hover {
-  background-color: #f5f5f5;
-}
-.Table:not(.Table--striped) .k-master-row:not(:hover) {
-  background: transparent;
-}
 .Table.Table--master-detail > .k-grid-header colgroup > :first-child {
   display: none;
 }
@@ -458,17 +447,6 @@ span.Popover {
 .Table.Table--master-detail > .k-grid-container > .k-grid-content > * > .k-grid-table > tbody > * > .k-hierarchy-cell {
   display: none;
 }
-.Table .k-state-selected td {
-  border-color: #d5e7fb;
-}
-.Table .k-state-selected:hover td {
-  background-color: #d5e7fb;
-}
-.Table .k-pager-wrap .k-state-selected {
-  background-color: #2270ee;
-  border-radius: 3px;
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
@@ -483,7 +461,7 @@ span.Popover {
   bottom: 8px;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical::before {
@@ -494,12 +472,6 @@ span.Popover {
 .Table .k-grid-header .k-header .k-grid-column-menu.k-grid-filter {
   border-radius: 3px;
 }
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
-  background-color: #2270ee;
-}
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header .k-link {
   font-weight: 400;
 }
@@ -510,24 +482,123 @@ span.Popover {
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-column-resizer:hover {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 .Table .k-grid-header-sticky[style*="border-right-width: 1px;"],
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
-  box-shadow: 2px 3px 5px 0 rgba(20, 20, 20, 0.1);
-}
-.Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
-  background-color: #eeeeee;
+  box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
 .Table .k-i-sort-asc-sm,
 .Table .k-i-sort-desc-sm {
   font-size: 18px;
 }
+.Table.k-grid {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-grid-header {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-grid-header .k-grid-filter:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-header-column-menu:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-hierarchy-cell .k-icon:hover {
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
+  background-color: var(--colorsSurfacePrimary, #141414);
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-grid-header .k-i-sort-asc-sm,
+.Table.k-grid .k-grid-header .k-i-sort-desc-sm,
+.Table.k-grid .k-grid-header .k-sort-order {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Table.k-grid .k-state-selected td {
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+}
+.Table.k-grid .k-state-selected:hover td {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Table.k-grid tr.k-alt {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid tr.k-alt:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-alt,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td {
+  background-color: transparent;
+}
+.Table.k-grid:not(.Table--striped) .k-alt:hover,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-master-row:not(:hover) {
+  background: transparent;
+}
+.Table.k-grid.Table--sortable .k-header:hover,
+.Table.k-grid.Table--sortable th.k-header.k-sorted {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-grid-content {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid tbody tr.k-state-hover,
+.Table.k-grid tbody tr:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-checkbox {
+  border-color: var(--colorsBorderGreyStrong, #bcbcbd);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-checkbox.k-checked, .Table.k-grid .k-checkbox:checked {
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+}
+.Table.k-grid .k-checkbox.k-state-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
+  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #ecf4fd);
+}
+.Table.k-grid .k-filter-row > td,
+.Table.k-grid .k-filter-row > th,
+.Table.k-grid td,
+.Table.k-grid .k-grid-content-locked,
+.Table.k-grid .k-grid-footer,
+.Table.k-grid .k-grid-footer-locked,
+.Table.k-grid .k-grid-footer-wrap,
+.Table.k-grid .k-grid-header,
+.Table.k-grid .k-grid-header-locked,
+.Table.k-grid .k-grid-header-wrap,
+.Table.k-grid .k-grouping-header,
+.Table.k-grid .k-grouping-header .k-group-indicator,
+.Table.k-grid .k-header,
+.Table.k-grid th.k-header {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
+.Table.k-grid .k-pager-wrap {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-pager-wrap .k-state-selected {
+  background-color: var(--colorsSurfacePrimary, #141414);
+  border-radius: 3px;
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-pager-wrap .k-pager-nav.k-link:hover,
+.Table.k-grid .k-pager-wrap .k-pager-refresh:hover,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-nav.k-link,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-refresh {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
 
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }

package/dist/components/Table/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Checkbox/Checkbox.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Popover/Popover.scss","../../../src/themes/kendo/_kendo-variables.scss","../../../src/components/Table/Table.scss"],"names":[],"mappings":"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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Checkbox/Checkbox.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Popover/Popover.scss","../../../src/themes/kendo/_kendo-variables.scss","../../../src/components/Table/Table.scss"],"names":[],"mappings":"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","file":"index.css"}

package/dist/components/Tag/Tag.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-size: 14px;
   font-weight: 600;
@@ -215,11 +215,11 @@
 
 .Tag .Tag__close.Button:focus {
   box-shadow: none;
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: rgba(4, 4, 4, 0.2);
 }
 .Tag--subtle.Tag .Tag__close.Button:focus,
 .Tag--default.Tag .Tag__close.Button:focus {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 
 .Tag--lightText,

package/dist/components/Tag/Tag.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tag/Tag.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,eEEiB;EFDjB,OEYa;EFXb;EACA,WE4Ha;EF3Hb;EACA;EACA;;AAEA;EACC;;AAGD;EAMC;;AAEA;EAAoB;;AAGrB;EAAkB,kBE4DH;;AF3Df;EAAiB,kBE8BC;;AF7BlB;EAAiB,kBEwCA;;AFvCjB;EAAc,kBEkDI;;AFhDlB;EACiB,kBEkBI;;AFhBrB;EACC,kBEWoB;EFVpB,OEOkB;EFNlB;;AAGD;EAAiB,WEyFJ;;AFtFZ;EAAqB;;AAErB;EACC,kBEoCa;EFnCb,OEwCa;;AFrCd;EACC,kBECgB;EFAhB,OETiB;;AFYlB;EACC,kBEQe;EFPf,OEYe;;AFThB;EACC,kBEegB;EFdhB,OEmBgB;;AFhBjB;EAEC,kBEpBmB;EFqBnB,OEzBiB;;AF4BlB;EACC;EACA;EACA,OE/BiB;;AFmCnB;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAES;EAAoB;;;AAE7B;EACC;;AAES;EAAoB;;;AAI/B;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAES;EAAoB;;;AAE7B;EACC;EACA;EACA;EACA;;AAGD;EAAwB;;AAGzB;EACC;EACA,OElHY;EFmHZ;EACA;EACA;;AAGC;EAAiC,OEhDpB;;;AFiDb;EAAgC,OE7Ff;;;AF8FjB;EAAgC,OEpEjB;;;AFqEf;EAA6B,OEzDb;;;AF0DhB;AAAA;AAAA;EAEgC,OElGf;;;AFqGlB;EAAU;;AAEV;EACC;EACA;;AAES;EACR;EACA;;;AAMA;EAAqB,kBEvET;;;AFwEZ;EAAoB;;;AACpB;EAAoB,kBE3FN;;;AF4Fd;EAAiB,kBEhFF;;;AFkFf;AAAA;EACoB,kBEjHF;;;AFkHlB;EAAoB,kBEtHF;;;AFwHlB;EAAiC;;;AACjC;EAAgC;;;AAChC;EAAgC;;;AAChC;EAA6B;;;AAE7B;AAAA;EACgC;;;AAChC;EAAgC;;;AAIlC;EACC;EACA;;AAGC;AAAA;EACoB;;;AAMxB;AAAA;AAAA;EAGC,OE/JkB;;;AFkKnB;AAAA;AAAA;EAGC,OE3JmB","file":"Tag.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tag/Tag.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA,eEEiB;EFDjB,OEYa;EFXb;EACA,WE6Ha;EF5Hb;EACA;EACA;;AAEA;EACC;;AAGD;EAMC;;AAEA;EAAoB;;AAGrB;EAAkB,kBE6DH;;AF5Df;EAAiB,kBE+BC;;AF9BlB;EAAiB,kBEyCA;;AFxCjB;EAAc,kBEmDI;;AFjDlB;EACiB,kBEmBI;;AFjBrB;EACC,kBEYoB;EFXpB,OEOkB;EFNlB;;AAGD;EAAiB,WE0FJ;;AFvFZ;EAAqB;;AAErB;EACC,kBEqCa;EFpCb,OEyCa;;AFtCd;EACC,kBEEgB;EFDhB,OETiB;;AFYlB;EACC,kBESe;EFRf,OEae;;AFVhB;EACC,kBEgBgB;EFfhB,OEoBgB;;AFjBjB;EAEC,kBEnBmB;EFoBnB,OEzBiB;;AF4BlB;EACC;EACA;EACA,OE/BiB;;AFmCnB;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAES;EAAoB;;;AAE7B;EACC;;AAES;EAAoB;;;AAI/B;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAES;EAAoB;;;AAE7B;EACC;EACA;EACA;EACA;;AAGD;EAAwB;;AAGzB;EACC;EACA,OElHY;EFmHZ;EACA;EACA;;AAGC;EAAiC,OE/CpB;;;AFgDb;EAAgC,OE7Ff;;;AF8FjB;EAAgC,OEnEjB;;;AFoEf;EAA6B,OExDb;;;AFyDhB;AAAA;AAAA;EAEgC,OElGf;;;AFqGlB;EAAU;;AAEV;EACC;EACA;;AAES;EACR;EACA;;;AAMA;EAAqB,kBEtET;;;AFuEZ;EAAoB;;;AACpB;EAAoB,kBE1FN;;;AF2Fd;EAAiB,kBE/EF;;;AFiFf;AAAA;EACoB,kBEhHF;;;AFiHlB;EAAoB,kBErHF;;;AFuHlB;EAAiC;;;AACjC;EAAgC;;;AAChC;EAAgC;;;AAChC;EAA6B;;;AAE7B;AAAA;EACgC;;;AAChC;EAAgC;;;AAIlC;EACC;EACA;;AAGC;AAAA;EACoB;;;AAMxB;AAAA;AAAA;EAGC,OE/JkB;;;AFkKnB;AAAA;AAAA;EAGC,OE3JmB","file":"Tag.css"}

package/dist/components/Tag/index.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
-  color: #141414;
+  color: #040404;
   display: inline-flex;
   font-size: 14px;
   font-weight: 600;
@@ -215,11 +215,11 @@
 
 .Tag .Tag__close.Button:focus {
   box-shadow: none;
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: rgba(4, 4, 4, 0.2);
 }
 .Tag--subtle.Tag .Tag__close.Button:focus,
 .Tag--default.Tag .Tag__close.Button:focus {
-  background-color: rgba(20, 20, 20, 0.1);
+  background-color: rgba(4, 4, 4, 0.1);
 }
 
 .Tag--lightText,

package/dist/components/Tag/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tag/Tag.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,eEEiB;EFDjB,OEYa;EFXb;EACA,WE4Ha;EF3Hb;EACA;EACA;;AAEA;EACC;;AAGD;EAMC;;AAEA;EAAoB;;AAGrB;EAAkB,kBE4DH;;AF3Df;EAAiB,kBE8BC;;AF7BlB;EAAiB,kBEwCA;;AFvCjB;EAAc,kBEkDI;;AFhDlB;EACiB,kBEkBI;;AFhBrB;EACC,kBEWoB;EFVpB,OEOkB;EFNlB;;AAGD;EAAiB,WEyFJ;;AFtFZ;EAAqB;;AAErB;EACC,kBEoCa;EFnCb,OEwCa;;AFrCd;EACC,kBECgB;EFAhB,OETiB;;AFYlB;EACC,kBEQe;EFPf,OEYe;;AFThB;EACC,kBEegB;EFdhB,OEmBgB;;AFhBjB;EAEC,kBEpBmB;EFqBnB,OEzBiB;;AF4BlB;EACC;EACA;EACA,OE/BiB;;AFmCnB;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAES;EAAoB;;;AAE7B;EACC;;AAES;EAAoB;;;AAI/B;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAES;EAAoB;;;AAE7B;EACC;EACA;EACA;EACA;;AAGD;EAAwB;;AAGzB;EACC;EACA,OElHY;EFmHZ;EACA;EACA;;AAGC;EAAiC,OEhDpB;;;AFiDb;EAAgC,OE7Ff;;;AF8FjB;EAAgC,OEpEjB;;;AFqEf;EAA6B,OEzDb;;;AF0DhB;AAAA;AAAA;EAEgC,OElGf;;;AFqGlB;EAAU;;AAEV;EACC;EACA;;AAES;EACR;EACA;;;AAMA;EAAqB,kBEvET;;;AFwEZ;EAAoB;;;AACpB;EAAoB,kBE3FN;;;AF4Fd;EAAiB,kBEhFF;;;AFkFf;AAAA;EACoB,kBEjHF;;;AFkHlB;EAAoB,kBEtHF;;;AFwHlB;EAAiC;;;AACjC;EAAgC;;;AAChC;EAAgC;;;AAChC;EAA6B;;;AAE7B;AAAA;EACgC;;;AAChC;EAAgC;;;AAIlC;EACC;EACA;;AAGC;AAAA;EACoB;;;AAMxB;AAAA;AAAA;EAGC,OE/JkB;;;AFkKnB;AAAA;AAAA;EAGC,OE3JmB","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tag/Tag.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA,eEEiB;EFDjB,OEYa;EFXb;EACA,WE6Ha;EF5Hb;EACA;EACA;;AAEA;EACC;;AAGD;EAMC;;AAEA;EAAoB;;AAGrB;EAAkB,kBE6DH;;AF5Df;EAAiB,kBE+BC;;AF9BlB;EAAiB,kBEyCA;;AFxCjB;EAAc,kBEmDI;;AFjDlB;EACiB,kBEmBI;;AFjBrB;EACC,kBEYoB;EFXpB,OEOkB;EFNlB;;AAGD;EAAiB,WE0FJ;;AFvFZ;EAAqB;;AAErB;EACC,kBEqCa;EFpCb,OEyCa;;AFtCd;EACC,kBEEgB;EFDhB,OETiB;;AFYlB;EACC,kBESe;EFRf,OEae;;AFVhB;EACC,kBEgBgB;EFfhB,OEoBgB;;AFjBjB;EAEC,kBEnBmB;EFoBnB,OEzBiB;;AF4BlB;EACC;EACA;EACA,OE/BiB;;AFmCnB;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;;AAES;EAAoB;;;AAE7B;EACC;;AAES;EAAoB;;;AAI/B;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAES;EAAoB;;;AAE7B;EACC;EACA;EACA;EACA;;AAGD;EAAwB;;AAGzB;EACC;EACA,OElHY;EFmHZ;EACA;EACA;;AAGC;EAAiC,OE/CpB;;;AFgDb;EAAgC,OE7Ff;;;AF8FjB;EAAgC,OEnEjB;;;AFoEf;EAA6B,OExDb;;;AFyDhB;AAAA;AAAA;EAEgC,OElGf;;;AFqGlB;EAAU;;AAEV;EACC;EACA;;AAES;EACR;EACA;;;AAMA;EAAqB,kBEtET;;;AFuEZ;EAAoB;;;AACpB;EAAoB,kBE1FN;;;AF2Fd;EAAiB,kBE/EF;;;AFiFf;AAAA;EACoB,kBEhHF;;;AFiHlB;EAAoB,kBErHF;;;AFuHlB;EAAiC;;;AACjC;EAAgC;;;AAChC;EAAgC;;;AAChC;EAA6B;;;AAE7B;AAAA;EACgC;;;AAChC;EAAgC;;;AAIlC;EACC;EACA;;AAGC;AAAA;EACoB;;;AAMxB;AAAA;AAAA;EAGC,OE/JkB;;;AFkKnB;AAAA;AAAA;EAGC,OE3JmB","file":"index.css"}

package/dist/components/Takeover/Takeover.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -12,7 +12,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }

package/dist/components/Takeover/Takeover.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB","file":"Takeover.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Takeover/Takeover.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAfa;EAgBb;EACA;;AAGA;EAAU;;AAGV;EAAkB;;;AAGnB;EACC;;;AAGD;EACC;EACA;;;AAID;EAAqB","file":"Takeover.css"}

package/dist/components/Takeover/TakeoverFooter.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -12,7 +12,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   text-align: left;
   z-index: 1100;
 }
@@ -37,8 +37,8 @@
 }
 
 .TakeoverFooter {
-  background: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
   flex: 0 0 auto;
   padding-top: 16px;