@tight-embedded/react 1.4.1 → 6.0.2

package/dist/235.css

@@ -0,0 +1,446 @@
+:where(:root, :host) {
+
+    /* Brand Colors */
+
+    --Tight-colors-brand-primary-weak: #0A8080;
+    --Tight-colors-brand-primary: #005961;
+    --Tight-colors-brand-primary-strong: #0A8080;
+
+    --Tight-colors-brand-secondary-weak: #FFFFFF;
+    --Tight-colors-brand-secondary: #E5F4F3;
+    --Tight-colors-brand-secondary-strong: #6c7381;
+
+    --Tight-colors-brand-success-opaque: #E5F4F3;
+    --Tight-colors-brand-success-weak: #E5F4F3;
+    --Tight-colors-brand-success: #56A9AC;
+    --Tight-colors-brand-success-strong: #005961;
+
+    --Tight-colors-brand-warning-opaque: #FFF2DF;
+    --Tight-colors-brand-warning-weak: #FFF2DF;
+    --Tight-colors-brand-warning: #E1B762;
+    --Tight-colors-brand-warning-strong: #E1B762;
+
+    --Tight-colors-brand-danger-opaque: #FFFBFB;
+    --Tight-colors-brand-danger-weak: #FFFBFB;
+    --Tight-colors-brand-danger: #FFEDEB;
+    --Tight-colors-brand-danger-strong: #C53336;
+
+    --Tight-colors-brand-action-opaque: #E5F4F3;
+    --Tight-colors-brand-action-weak: #E5F4F3;
+    --Tight-colors-brand-action: #CEE6E6;
+    --Tight-colors-brand-action-strong: #9DCCCC;
+
+    /* Surface Colors */
+
+    --Tight-colors-surface-background: #FAFAFA;
+    --Tight-colors-surface-elevated: #F8F5F2;
+
+    /*--Tight-colors-surface-intent-secondary: #f5f7fa;*/
+    /*--Tight-colors-surface-intent-secondary-hover: #f5f7fa;*/
+    /*--Tight-colors-surface-intent-secondary-active: #f5f7fa;*/
+
+    /*--Tight-colors-surface-intent-success: #dcfce7;*/
+    /*--Tight-colors-surface-intent-success-hover: #dcfce7;*/
+    /*--Tight-colors-surface-intent-success-active: #dcfce7;*/
+
+    /*--Tight-colors-surface-intent-warning: #fffbec;*/
+    /*--Tight-colors-surface-intent-warning-hover: #fffbec;*/
+    /*--Tight-colors-surface-intent-warning-active: #fffbec;*/
+
+    /*--Tight-colors-surface-intent-danger: #fee2e1;*/
+    /*--Tight-colors-surface-intent-danger-hover: #fee2e1;*/
+    /*--Tight-colors-surface-intent-danger-active: #fee2e1;*/
+
+    /* Typography Colors */
+
+    --Tight-colors-typography-base: #525257;
+    --Tight-colors-typography-label-sub: #6b6b6b;
+    --Tight-colors-typography-label-strongSub: #6b6b6b;
+
+    --Tight-colors-typography-intent-primary: #FFFFFF;
+    --Tight-colors-typography-intent-primary-hover: #FFFFFF;
+    --Tight-colors-typography-intent-primary-active: #FFFFFF;
+
+    --Tight-colors-typography-intent-secondary: #6c6c72;
+    --Tight-colors-typography-intent-secondary-hover: #6c6c72;
+    --Tight-colors-typography-intent-secondary-active: #6c6c72;
+
+    /* Border Colors */
+
+    --Tight-colors-border-layout-weak: #eff3f5;
+    --Tight-colors-border-layout: #CED1D2;
+    --Tight-colors-border-layout-strong: #525257;
+
+    --Tight-colors-border-intent-primary-hover: #0A8080;
+    --Tight-colors-border-intent-primary: #0A8080;
+    --Tight-colors-border-intent-primary-active: #0A8080;
+
+    --Tight-colors-border-intent-secondary-hover: #005C5C;
+    --Tight-colors-border-intent-secondary: #005C5C;
+    --Tight-colors-border-intent-secondary-active: #005C5C;
+
+    --Tight-colors-border-intent-danger-hover: #A31821;
+
+    /*--Tight-colors-border-intent-warning-hover: #ffe58f;*/
+    /*--Tight-colors-border-intent-warning: #ffe58f;*/
+    /*--Tight-colors-border-intent-warning-active: #ffe58f;*/
+
+    /*--Tight-colors-border-intent-success-hover: #8ceda8;*/
+    /*--Tight-colors-border-intent-success: #8ceda8;*/
+    /*--Tight-colors-border-intent-success-active: #8ceda8;*/
+
+    /*--Tight-colors-border-intent-action-hover: #93c6ff;*/
+    /*--Tight-colors-border-intent-action: #93c6ff;*/
+    /*--Tight-colors-border-intent-action-active: #93c6ff;*/
+
+    /* Money Colors */
+
+    --Tight-colors-money-negative-weak: #E36751;
+    --Tight-colors-money-negative: #EB4C33;
+    --Tight-colors-money-negative-strong: #A52E1B;
+    --Tight-colors-money-positive-weak: #56A9AC;
+    --Tight-colors-money-positive: #52B2B6;
+    --Tight-colors-money-positive-strong: #245860;
+
+    /* Border Radii */
+
+    --Tight-radii-sm: 4px;
+    --Tight-radii-md: 4px;
+    --Tight-radii-lg: 5px;
+
+    /* Typefaces */
+
+    --Tight-fonts-base: "G Centra", sans-serif;
+
+    /* Font Weights */
+
+    --Tight-fontWeights-md: 500;
+
+    /* Box Shadows */
+
+    --Tight-shadows-box-shadow: 0px -2px 12px rgba(28, 28, 28, 0.04), 0px 8px 16px rgba(28, 28, 28, 0.12), 0px 4px 12px rgba(28, 28, 28, 0.04);
+
+}
+
+.Tight-heading {
+    line-height: normal;
+    letter-spacing: 0;
+}
+.Tight-label {
+    line-height: normal;
+    letter-spacing: 0.32px;
+}
+.Tight-strong-label {
+    line-height: normal;
+    letter-spacing: 0.32px;
+}
+.Tight-sub-label {
+    line-height: 1.25rem;
+    letter-spacing: 0.32px;
+}
+.Tight-strong-sub-label {
+    line-height: 1.25rem;
+    letter-spacing: 0.32px;
+}
+.Tight-body {
+    line-height: 1.3;
+    letter-spacing: 0.32px;
+}
+
+.Tight-dashboard-header {
+    input {
+        font-family: "G Centra", sans-serif;
+    }
+    .Tight-button-primary {
+        font-family: "G Centra", sans-serif;
+        border: none;
+        font-weight: 400;
+        color: #0A8080;
+        text-decoration: underline;
+        .Tight-small-icon > path {
+            stroke: #0A8080;
+        }
+    }
+}
+.Tight-dashboard-table {
+    border: none;
+}
+.Tight-dashboard-table-header {
+    border-top: 1px solid var(--Tight-colors-border-layout-strong);
+    background-color: var(--Tight-colors-surface-background);
+}
+.Tight-dashboard-table-column-header {
+    .Tight-text {
+        color: #6B6B6B;
+    }
+}
+.Tight-table-parent-row {
+    border-top: 1px solid var(--Tight-colors-border-layout-strong);
+    background-color: var(--Tight-colors-surface-foreground);
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: #F9FDFC;
+        }
+    }
+}
+.Tight-table-cell-divider {
+    display: none;
+}
+
+.Tight-button-table-header {
+    border: 2px solid var(--Tight-colors-border-intent-primary);
+
+    .Tight-text {
+        font-weight: 500;
+        color: #0A8080;
+    }
+    .Tight-small-icon {
+        display: none;
+    }
+    .Tight-medium-icon {
+        display: none;
+    }
+}
+.Tight-button-tertiary {
+    border: none;
+    background-color: var(--Tight-colors-brand-primary-weak);
+
+    .Tight-text {
+        font-weight: 500;
+        color: white;
+    }
+    .Tight-strong-label {
+        font-weight: 500;
+        color: white;
+    }
+    .Tight-small-icon {
+        display: none;
+    }
+}
+
+.Tight-selector-button {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: #E5F4F3;
+        }
+    }
+}
+.Tight-review-status-selector-button {
+    border: none;
+    background-color: transparent;
+
+    .Tight-text {
+        font-weight: 500;
+        color: #0A8080;
+        text-decoration: underline;
+    }
+    .Tight-label {
+        font-weight: 500;
+        color: #0A8080;
+        text-decoration: underline;
+    }
+    .Tight-icon > path {
+        stroke: #0A8080;
+    }
+    .Tight-icon > g > path {
+        stroke: #0A8080;
+    }
+
+    .Tight-button-base {
+        text-transform: lowercase;
+        .Tight-text {
+            text-transform: lowercase;
+        }
+        .Tight-label {
+            text-transform: lowercase;
+        }
+        .Tight-strong-label {
+            text-transform: lowercase;
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            .Tight-text {
+                color: #005961;
+            }
+            .Tight-label {
+                color: #005961;
+            }
+            .Tight-medium-icon > path {
+                stroke: #005961;
+            }
+        }
+    }
+
+    &:active:enabled, &[data-active='true']:enabled {
+        background-color: #E5F4F3;
+    }
+}
+.Tight-review-status-dropdown-arrow {
+    display: flex;
+}
+
+.Tight-filter-bar {
+    background-color: var(--Tight-colors-surface-foreground);
+    border: 1px solid var(--Tight-colors-border-layout);
+}
+.Tight-bulk-select {
+    height: 40px
+}
+.Tight-filter-pill {
+    border-radius: 100px;
+    border-color: #929292;
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: #FAFAFA;
+            border-color: #535353;
+        }
+    }
+}
+
+.Tight-pagination-button {
+    height: 44px;
+    border: none;
+
+    button {
+        &:disabled {
+            opacity: 0.6;
+        }
+        .Tight-small-icon > path {
+            stroke: #0A8080;
+        }
+    }
+}
+
+.Tight-tile-header {
+    padding: 20px;
+}
+.Tight-tile-body {
+    padding: 20px;
+}
+
+.Tight-financial-summary-chatbox-header {
+    .Tight-strong-label {
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+.Tight-financial-summary-layout {
+    padding: 20px;
+}
+.Tight-financial-summary-chatbox {
+    padding: 20px;
+    background-color: var(--Tight-colors-surface-foreground);
+    .Tight-strong-label {
+        font-size: 14px;
+        font-weight: 500;
+    }
+    .Tight-button-primary {
+        height: 36px;
+        border: 2px solid var(--Tight-colors-border-intent-primary);
+
+        .Tight-strong-label {
+            font-size: 14px;
+            font-weight: 500;
+            color: #0A8080;
+        }
+        .Tight-small-icon {
+            display: none;
+        }
+        .Tight-medium-icon {
+            display: none;
+        }
+    }
+}
+.Tight-financial-summary-chatbox-header {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.Tight-tile-bar-label {
+    .Tight-label {
+        color: var(--Tight-colors-typography-contrast);
+    }
+}
+
+.Tight-month-picker {
+    border: none;
+    .Tight-small-icon > path {
+        stroke: #0A8080;
+    }
+}
+.Tight-month-picker-label {
+    width: 85px;
+}
+.Tight-month-picker-left-button {
+    border-right: none;
+}
+.Tight-month-picker-right-button {
+    border-left: none;
+}
+
+.Tight-banner {
+    box-shadow: var(--Tight-shadows-box-shadow);
+    background-color: #F9FDFC;
+    border: none;
+    .Tight-sub-label {
+        margin-left: 44px;
+    }
+}
+.Tight-banner-button {
+    background-color: var(--Tight-colors-brand-primary-weak);
+    border: none;
+    .Tight-label {
+        color: var(--Tight-colors-typography-intent-primary);
+    }
+    .Tight-strong-label {
+        color: var(--Tight-colors-typography-intent-primary);
+    }
+    &:hover:not(:disabled) {
+        background-color: var(--Tight-colors-brand-primary);
+    }
+
+    &:active:enabled, &[data-active='true']:enabled {
+        background-color: var(--Tight-colors-brand-primary);
+    }
+}
+.Tight-banner-button-icon {
+    display: none;
+}
+.Tight-banner-title {
+    height: 21px;
+    align-items: flex-start;
+}
+.Tight-banner-title > img {
+    margin-top: 5px;
+    height: 36px;
+    width: 36px;
+}
+.Tight-banner-title > svg {
+    margin-top: 5px;
+    height: 36px;
+    width: 36px;
+}
+
+.Tight-empty-dashboard-layout {
+    background-color: var(--Tight-colors-surface-foreground);
+}
+
+.Tight-button-inline {
+    .Tight-sub-label {
+        color: var(--Tight-colors-typography-contrast);
+    }
+}
+
+.Tight-button-group {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: #E5F4F3;
+        }
+    }
+    &:active:enabled, &[data-active='true']:enabled {
+        background-color: #E5F4F3;
+        border-color: var(--Tight-colors-border-intent-primary-active);
+    }
+}

package/dist/41.css

@@ -0,0 +1,245 @@
+:where(:root, :host) {
+    /* Brand Colors */
+    --Tight-colors-brand-primary-weak: #000000;
+    --Tight-colors-brand-primary: #000000;
+    --Tight-colors-brand-primary-strong: #000000;
+
+    --Tight-colors-brand-action-weak: rgba(0, 0, 0, 0.02);
+    --Tight-colors-brand-action: rgba(0, 0, 0, 0.04);
+    --Tight-colors-brand-action-strong: rgba(0, 0, 0, 0.06);
+
+    --Tight-colors-brand-success-weak: #b9ffbb;
+    --Tight-colors-brand-success: #33F28B;
+    --Tight-colors-brand-success-strong: rgb(37, 216, 117);
+
+    --Tight-colors-brand-warning-weak: #626262;
+    --Tight-colors-brand-warning: #626262;
+    --Tight-colors-brand-warning-strong: #000000;
+
+    --Tight-colors-brand-danger-weak: #FFAAAA;
+    --Tight-colors-brand-danger: #F0685F;
+    --Tight-colors-brand-danger-strong: #E12513;
+
+    /* Surface Colors */
+    --Tight-colors-surface-background: #FAFAFA;
+    --Tight-colors-surface-foreground: #FFFFFF;
+
+    --Tight-colors-surface-intent-success: #33F28B;
+    --Tight-colors-surface-intent-success-hover: rgb(37, 216, 117);
+
+    --Tight-colors-surface-intent-warning-hover: #000000;
+
+    /* Border Colors */
+    --Tight-colors-border-layout-weak: rgba(0, 0, 0, 0.10);
+    --Tight-colors-border-layout: rgba(0, 0, 0, 0.18);
+    --Tight-colors-border-layout-strong: rgba(0, 0, 0, 0.18);
+
+    --Tight-colors-border-intent-success: transparent;
+    --Tight-colors-border-intent-success-hover: transparent;
+    --Tight-colors-border-intent-success-active: transparent;
+
+    --Tight-colors-border-intent-warning: transparent;
+    --Tight-colors-border-intent-warning-hover: transparent;
+    --Tight-colors-border-intent-warning-active: transparent;
+
+    --Tight-colors-border-intent-danger: transparent;
+    --Tight-colors-border-intent-danger-hover: transparent;
+    --Tight-colors-border-intent-danger-active: transparent;
+
+    /* Money Colors */
+    --Tight-colors-money-positive: #00863A;
+    --Tight-colors-money-positive-weak: rgb(37, 216, 117);
+    --Tight-colors-money-negative: #F8645B;
+    --Tight-colors-money-negative-weak: #FD9390;
+
+    /* Custom Colors */
+    --zb-success-badge: rgb(141, 248, 181);
+    --zb-banner-default: #ededed;
+    --zb-banner-promo: #111112;
+    --zb-banner-error: #ffaaaa;
+    --zb-banner-info: #bed4ff;
+    --zb-banner-action: #b9ffbb;
+    --zb-banner-ai: #d1b5ff;
+
+    /* Layout */
+    --Tight-radii-sm: 4px;
+    --Tight-radii-md: 12px;
+    --Tight-radii-lg: 12px;
+
+    --Tight-shadows-box-shadow: 0 2px 10px 0 rgba(153, 153, 153, 0.5);
+
+    /* Typography */
+    --Tight-fontSizes-label: 16px;
+    --Tight-fontSizes-label-sub: 14px;
+    --Tight-fontSizes-label-strong: 16px;
+    --Tight-fontSizes-label-strongSub: 14px;
+
+    --Tight-fontWeights-md: 500;
+
+    --Tight-colors-typography-base: rgba(0, 0, 0, 0.93);
+    --Tight-colors-typography-base-weak: rgba(0, 0, 0, 0.74);
+
+    --Tight-colors-typography-intent-primary: #FFFFFF;
+    --Tight-colors-typography-intent-primary-hover: #FFFFFF;
+    --Tight-colors-typography-intent-primary-active: #FFFFFF;
+
+    --Tight-colors-typography-intent-action-hover: #6F7576;
+
+    --Tight-colors-typography-intent-warning: #FFFFFF;
+    --Tight-colors-typography-intent-warning-hover: #FFFFFF;
+    --Tight-colors-typography-intent-warning-active: #FFFFFF;
+}
+
+* {
+    font-family: "Inter", sans-serif;
+}
+.Tight-label {
+    line-height: 18px;
+}
+.Tight-strong-label {
+    line-height: 18px;
+}
+.Tight-sub-label {
+    line-height: 16px;
+}
+.Tight-strong-sub-label {
+    line-height: 16px;
+}
+
+.Tight-filter-bar {
+    background-color: var(--Tight-colors-surface-foreground);
+    border: 1px solid var(--Tight-colors-border-layout-strong);
+}
+
+.Tight-business-owner-table {
+    border: none;
+}
+.Tight-table-parent-row {
+    margin-bottom: 12px;
+    border: 1px solid var(--Tight-colors-border-layout-strong);
+    border-radius: var(--Tight-radii-md);
+    background-color: var(--Tight-colors-surface-foreground);
+}
+
+.Tight-popup {
+    background-color: var(--Tight-colors-surface-foreground);
+    border-radius: var(--Tight-radii-sm);
+    border: none;
+}
+.Tight-selector-row {
+    border: none;
+}
+
+.Tight-table-cell-divider {
+    display: none;
+}
+.Tight-badge {
+    border-radius: 9999px;
+    height: 28px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border: none;
+}
+.Tight-success-badge {
+    background-color: var(--zb-success-badge);
+
+    &:focus-visible, &[data-state="open"] {
+        background-color: var(--Tight-colors-brand-success);
+    }
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: var(--Tight-colors-brand-success);
+        }
+    }
+}
+
+.Tight-drawer-header {
+    background-color: var(--Tight-colors-surface-background);
+    padding-left: 24px;
+    padding-right: 24px;
+}
+.Tight-form-header-border {
+    margin-right: 24px;
+    margin-left: 24px;
+}
+.Tight-form-body {
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+.Tight-button-base {
+    border-radius: var(--Tight-radii-sm);
+}
+.Tight-button-secondary {
+    border: 1px solid var(--Tight-colors-brand-primary-strong);
+    &:active:enabled, &[data-active="true"]:enabled {
+        background-color: #FFFFFF;
+        color: var(--Tight-colors-brand-primary-strong);
+        .Tight-text {
+            color: var(--Tight-colors-brand-primary-strong);
+        }
+        .Tight-icon > path {
+            stroke: var(--Tight-colors-brand-primary-strong);
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: #FFFFFF;
+            color: var(--Tight-colors-brand-primary-strong);
+
+            .Tight-text {
+                color: var(--Tight-colors-brand-primary-strong);
+            }
+
+            .Tight-icon > path {
+                stroke: var(--Tight-colors-brand-primary-strong);
+            }
+        }
+    }
+}
+
+.Tight-month-picker-left-button {
+    border-right: none;
+}
+.Tight-month-picker-right-button {
+    border-left: none;
+}
+
+.Tight-tile {
+    box-shadow: none;
+}
+.Tight-tile-header {
+    border-bottom: none;
+}
+
+.Tight-banner {
+    border-color: var(--Tight-colors-border-layout-weak);
+}
+.Tight-banner-high {
+    background-color: var(--zb-banner-action);
+}
+.Tight-banner-medium {
+    background-color: var(--zb-banner-default);
+}
+.Tight-banner-button { /* match zb solid black banner buttons */
+    background-color: var(--Tight-colors-surface-intent-primary);
+    border-color: var(--Tight-colors-border-intent-primary);
+    @media (hover: hover) and (pointer: fine) {
+        &:hover:not(:disabled) {
+            background-color: var(--Tight-colors-surface-intent-primary-hover);
+            border-color: var(--Tight-colors-border-intent-primary-hover);
+        }
+    }
+
+    &:active:enabled, &[data-active='true']:enabled {
+        background-color: var(--Tight-colors-surface-intent-primary-active);
+        border-color: var(--Tight-colors-border-intent-primary-active);
+    }
+}
+.Tight-banner-button-text {
+    color: var(--Tight-colors-typography-intent-primary);
+}
+.Tight-banner-button-icon > path {
+    stroke: var(--Tight-colors-icon-intent-primary);
+}