@tangible/ui 0.0.5 → 0.0.6

package/styles/all.expanded.css

@@ -97,6 +97,7 @@
 --tui-combobox-content-border
 --tui-combobox-content-shadow
 --tui-combobox-content-radius
+--tui-combobox-option-radius
 --tui-combobox-option-bg-hover
 --tui-combobox-option-bg-selected
 */
@@ -132,6 +133,7 @@
 --tui-multiselect-content-border
 --tui-multiselect-content-shadow
 --tui-multiselect-content-radius
+--tui-multiselect-option-radius
 --tui-multiselect-option-bg-hover
 --tui-multiselect-option-bg-selected
 --tui-multiselect-chip-bg
@@ -147,6 +149,7 @@
 --tui-select-content-border
 --tui-select-content-shadow
 --tui-select-content-radius
+--tui-select-option-radius
 --tui-select-option-bg-hover
 --tui-select-option-bg-selected
 */
@@ -169,6 +172,11 @@
 /* @tui-tokens
 --tui-modal-z
 --tui-modal-max
+--tui-modal-spacing
+--tui-modal-offset-top
+--tui-modal-offset-bottom
+--tui-modal-offset-start
+--tui-modal-offset-end
 --tui-modal-backdrop
 --tui-modal-bg
 --tui-modal-border
@@ -630,6 +638,8 @@
   --tui-radius-lg: 12px;
   --tui-font-size-base: 16px;
   --tui-line: 1.5;
+  --tui-typography-weight-normal: 400;
+  --tui-typography-weight-bold: 700;
   --tui-typography-size: var(--tui-font-size-base);
   --tui-typography-line-height: 1.4;
   --tui-typography-font-family: inherit;
@@ -671,6 +681,13 @@
     text-transform: none;
     letter-spacing: normal;
   }
+  .tui-interface input:focus, .tui-interface input:focus-visible,
+  .tui-interface textarea:focus,
+  .tui-interface textarea:focus-visible,
+  .tui-interface select:focus,
+  .tui-interface select:focus-visible {
+    box-shadow: none;
+  }
 }
 @layer components {
   :where(.tui-interface) .tui-accordion {
@@ -680,7 +697,7 @@
   }
   :where(.tui-interface) .tui-accordion__item {
     --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
-    --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
+    --_bg-open: var(--tui-accordion-bg-open, var(--tui-color-bg-surface));
     --_border: var(--tui-accordion-border, var(--tui-color-border));
     --_divider: var(--tui-accordion-divider, var(--_border));
     --_radius: var(--tui-accordion-radius, var(--tui-radius-md));
@@ -1791,7 +1808,7 @@
     align-items: center;
   }
   .tui-interface .tui-combobox__input {
-    --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg)));
+    --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg-surface)));
     --_fg: var(--tui-combobox-input-fg, var(--tui-select-trigger-fg, var(--tui-color-fg)));
     --_border: var(--tui-combobox-input-border, var(--tui-select-trigger-border, var(--tui-color-border)));
     --_border-focus: var(--tui-combobox-input-border-focus, var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base)));
@@ -1799,7 +1816,7 @@
     appearance: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -1807,11 +1824,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-combobox__input {
@@ -1914,6 +1931,7 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-combobox__option {
+    --_option-radius: var(--tui-combobox-option-radius, var(--tui-select-option-radius, var(--tui-radius-sm)));
     --_bg-hover: var(--tui-combobox-option-bg-hover, var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest)));
     --_bg-selected: var(--tui-combobox-option-bg-selected, var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest)));
     display: flex;
@@ -1921,7 +1939,7 @@
     justify-content: space-between;
     gap: var(--tui-spacing-xs);
     padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
-    border-radius: var(--tui-radius-sm);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2200,7 +2218,7 @@
     pointer-events: none;
   }
   .tui-interface .tui-multiselect__trigger {
-    --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg));
+    --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-multiselect-trigger-fg, var(--tui-color-fg));
     --_border: var(--tui-multiselect-trigger-border, var(--tui-color-border));
     --_border-focus: var(--tui-multiselect-trigger-border-focus, var(--tui-theme-primary-base));
@@ -2209,7 +2227,7 @@
     border: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2217,11 +2235,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger {
@@ -2368,13 +2386,14 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-multiselect__option {
+    --_option-radius: var(--tui-multiselect-option-radius, var(--tui-radius-sm));
     --_bg-hover: var(--tui-multiselect-option-bg-hover, var(--tui-theme-secondary-subtlest));
     --_bg-selected: var(--tui-multiselect-option-bg-selected, var(--tui-theme-primary-subtlest));
     display: flex;
     align-items: center;
     gap: var(--tui-spacing-xs);
     padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
-    border-radius: var(--tui-radius-sm);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2468,7 +2487,7 @@
     }
   }
   .tui-interface .tui-select__trigger {
-    --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg));
+    --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-select-trigger-fg, var(--tui-color-fg));
     --_border: var(--tui-select-trigger-border, var(--tui-color-border));
     --_border-focus: var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base));
@@ -2477,7 +2496,7 @@
     border: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2485,11 +2504,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-select__trigger {
@@ -2601,13 +2620,14 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-select__option {
+    --_option-radius: var(--tui-select-option-radius, var(--tui-radius-sm));
     --_bg-hover: var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest));
     --_bg-selected: var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest));
     display: flex;
     align-items: center;
     gap: var(--tui-spacing-xs);
     padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
-    border-radius: var(--tui-radius-sm);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2694,13 +2714,13 @@
   input[type=color],
   textarea,
   select) {
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
     --_border: var(--tui-input-border, var(--tui-color-border));
     --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
     --_border-invalid: var(--tui-input-border-invalid, var(--tui-theme-danger-base));
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2725,7 +2745,7 @@
   input[type=color],
   textarea,
   select).is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
@@ -2746,7 +2766,7 @@
   input[type=color],
   textarea,
   select).is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
@@ -2943,7 +2963,7 @@
     padding-inline-end: 0.25em;
   }
   :where(.tui-interface) input[type=file] {
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
     --_border: var(--tui-input-border, var(--tui-color-border));
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
@@ -3017,7 +3037,7 @@
     transition-property: background-color, color, border-color;
   }
   .tui-interface .tui-icon-button .tui-icon {
-    font-size: calc(var(--_size) * 0.5);
+    font-size: calc(var(--_size) * 0.75);
   }
   .tui-interface .tui-icon-button:hover {
     --_bg: var(--_bg-interact);
@@ -3159,6 +3179,11 @@
   .tui-modal {
     --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
     --_backdrop: var(--tui-modal-backdrop, var(--tui-color-bg-overlay));
+    --_spacing: var(--tui-modal-spacing, var(--tui-spacing-md));
+    --_offset-top: var(--tui-modal-offset-top, env(safe-area-inset-top, 0px));
+    --_offset-bottom: var(--tui-modal-offset-bottom, env(safe-area-inset-bottom, 0px));
+    --_offset-start: var(--tui-modal-offset-start, env(safe-area-inset-left, 0px));
+    --_offset-end: var(--tui-modal-offset-end, env(safe-area-inset-right, 0px));
     position: fixed;
     inset: 0;
     z-index: var(--_z);
@@ -3167,7 +3192,10 @@
     justify-content: center;
     align-items: flex-start;
     overflow: auto;
-    padding-block: 1rem;
+    padding-block-start: calc(var(--_spacing) + var(--_offset-top));
+    padding-block-end: calc(var(--_spacing) + var(--_offset-bottom));
+    padding-inline-start: calc(var(--_spacing) + var(--_offset-start));
+    padding-inline-end: calc(var(--_spacing) + var(--_offset-end));
   }
   .tui-modal__backdrop {
     position: fixed;
@@ -3194,8 +3222,8 @@
     --_shadow: var(--tui-modal-shadow, var(--tui-shadow-lg));
     position: relative;
     width: 100%;
-    max-inline-size: min(100vw - 2rem, var(--_max));
-    max-block-size: calc(100dvh - 2rem);
+    max-inline-size: var(--_max);
+    max-block-size: calc(100dvh - var(--_spacing) * 2 - var(--_offset-top) - var(--_offset-bottom));
     margin-block: auto;
     overflow: hidden;
     display: flex;
@@ -3264,6 +3292,9 @@
     align-items: flex-start;
     gap: var(--tui-spacing-sm);
   }
+  .tui-modal__dialog .tui-modal__head :is(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0;
+  }
   .tui-modal__dialog .tui-modal__head-icon {
     flex-shrink: 0;
     display: flex;
@@ -5048,7 +5079,7 @@
     }
   }
   :where(.tui-interface) .tui-textarea {
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -5056,11 +5087,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-textarea {
@@ -5075,11 +5106,11 @@
   }
   :where(.tui-interface) .tui-input-group {
     --_gap: var(--tui-input-group-gap, var(--tui-spacing-xs));
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-input-border, var(--tui-color-border));
     --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -5087,11 +5118,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-input-group {