@trebired/frontend 1.19.5 → 4.0.1

package/dist/surface/styles/index.scss

@@ -1,47 +1,133 @@
 .tbf-button {
-  min-height: 32px;
+  --tbf-surface-button-current-icon-color: var(
+    --tbf-surface-button-icon-color,
+    var(--tbf-button-icon-color, currentColor)
+  );
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tbf-surface-button-gap, var(--tbf-button-gap, 8px));
+  min-height: var(--tbf-surface-button-min-height, var(--tbf-surface-button-height, var(--tbf-button-height, 28px)));
   box-sizing: border-box;
-  padding: 0 12px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-sm, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface-muted, #fff);
+  padding: var(--tbf-surface-button-padding, var(--tbf-button-padding, 0 12px));
+  padding-block: var(--tbf-surface-button-padding-block, var(--tbf-button-padding-block, 0));
+  border: var(
+    --tbf-surface-button-border,
+    var(--tbf-button-border, var(--border-width) solid var(--border-surface-2))
+  );
+  border-radius: var(
+    --tbf-surface-button-radius,
+    var(--tbf-button-radius, var(--radius-md, var(--tbf-radius, 0)))
+  );
+  color: var(--tbf-surface-button-color, var(--tbf-button-color, var(--text-color)));
+  background: var(--tbf-surface-button-background, var(--tbf-button-background, transparent));
   cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  font-family: var(--tbf-surface-button-font-family, var(--tbf-font-sans, "Inter", sans-serif));
+  font-size: var(--tbf-surface-button-font-size, var(--tbf-button-font-size, 12px));
+  font-weight: var(--tbf-surface-button-font-weight, var(--tbf-button-font-weight, 600));
+  line-height: 1.15;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.tbf-button:hover,
+.tbf-button.active {
+  --tbf-surface-button-current-icon-color: var(
+    --tbf-surface-button-hover-icon-color,
+    var(--tbf-button-hover-icon-color, currentColor)
+  );
+  border-color: var(--tbf-surface-button-hover-border-color, var(--tbf-button-hover-border-color, currentColor));
+  color: var(--tbf-surface-button-hover-color, var(--tbf-button-hover-color, currentColor));
+  background: var(--tbf-surface-button-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
+}
+
+.tbf-button:disabled,
+.tbf-button[disabled],
+.tbf-button.disabled {
+  opacity: var(--tbf-surface-button-disabled-opacity, var(--tbf-button-disabled-opacity, 0.55));
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tbf-button > i,
+.tbf-button > svg,
+.tbf-button > i svg,
+.tbf-button > [data-icon],
+.tbf-button > [data-icon] svg {
+  color: var(--tbf-surface-button-current-icon-color);
+  flex: 0 0 auto;
 }
 
 .tbf-button--strong {
-  border-color: var(--tbf-focus, #000);
-  color: var(--tbf-surface, #fff);
-  background: var(--tbf-focus, #000);
+  --tbf-surface-button-current-icon-color: var(
+    --tbf-surface-button-strong-icon-color,
+    var(--tbf-button-tones-highlight-icon-color, currentColor)
+  );
+  border-color: var(
+    --tbf-surface-button-strong-border-color,
+    var(--tbf-button-tones-highlight-border-color, currentColor)
+  );
+  color: var(
+    --tbf-surface-button-strong-color,
+    var(--tbf-button-tones-highlight-color, currentColor)
+  );
+  background: var(
+    --tbf-surface-button-strong-background,
+    var(--tbf-button-tones-highlight-background, var(--tbf-button-background, transparent))
+  );
+}
+
+.tbf-button--strong:hover,
+.tbf-button--strong.active {
+  --tbf-surface-button-current-icon-color: var(
+    --tbf-surface-button-strong-hover-icon-color,
+    var(--tbf-button-tones-highlight-hover-icon-color, currentColor)
+  );
+  border-color: var(
+    --tbf-surface-button-strong-hover-border-color,
+    var(--tbf-button-tones-highlight-hover-border-color, currentColor)
+  );
+  color: var(
+    --tbf-surface-button-strong-hover-color,
+    var(--tbf-button-tones-highlight-hover-color, currentColor)
+  );
+  background: var(
+    --tbf-surface-button-strong-hover-background,
+    var(--tbf-button-tones-highlight-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)))
+  );
 }
 
 .tbf-button--sm {
-  min-height: 28px;
-  padding-inline: 9px;
+  min-height: var(--tbf-surface-button-sizes-sm-height, var(--tbf-button-sizes-sm-height, 24px));
+  padding-inline: var(--tbf-surface-button-sizes-sm-padding-inline, var(--tbf-button-sizes-sm-padding-inline, 9px));
+  font-size: var(--tbf-surface-button-sizes-sm-font-size, var(--tbf-button-sizes-sm-font-size, 11px));
 }
 
 .tbf-button--lg {
-  min-height: 40px;
-  padding-inline: 16px;
+  min-height: var(--tbf-surface-button-sizes-lg-height, var(--tbf-button-sizes-lg-height, 34px));
+  padding-inline: var(--tbf-surface-button-sizes-lg-padding-inline, var(--tbf-button-sizes-lg-padding-inline, 14px));
+  font-size: var(--tbf-surface-button-sizes-lg-font-size, var(--tbf-button-sizes-lg-font-size, 13px));
 }
 
 .tbf-card,
 [data-tbf-card] {
   min-width: 0;
   box-sizing: border-box;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface, #fff);
+  border: var(--tbf-surface-card-border, var(--tbf-card-border, var(--border-width) solid var(--border-surface-1)));
+  border-radius: var(--tbf-surface-card-radius, var(--tbf-card-radius, var(--radius-lg, var(--tbf-radius, 0))));
+  color: var(--tbf-surface-card-color, var(--tbf-card-color, var(--tbf-text, #000)));
+  background: var(--tbf-surface-card-background, var(--tbf-card-background, var(--background-page, var(--tbf-page, #fff))));
 }
 
 .tbf-card.card,
 .card[data-tbf-card] {
-  background: var(--background-page, var(--tbf-page, #fff));
+  background: var(--tbf-card-background, var(--background-page, var(--tbf-page, #fff)));
 }
 
 .tbf-card[data-tbf-interactive="true"]:hover {
-  border-color: var(--tbf-focus, #000);
+  border-color: var(--tbf-surface-card-hover-border-color, var(--tbf-focus, #000));
 }
 
 .tbf-card__header,
@@ -49,7 +135,7 @@
 .tbf-card__footer {
   min-width: 0;
   box-sizing: border-box;
-  padding: 12px;
+  padding: var(--tbf-surface-card-section-padding, var(--tbf-card-padding, 12px));
 }
 
 .tbf-card__header,