@tangible/ui 0.0.1

package/styles/utilities/_index.scss

@@ -0,0 +1,373 @@
+@use "../system" as sys;
+
+
+@mixin bundle() {
+  $spacing-aliases: (xxs, xs, sm, md, lg, xl, xxl);
+  $text-size-aliases: (xxs, xs, sm, md, lg, xl, xxl);
+  $themes: (primary, secondary, info, warning, danger, success);
+
+  .#{sys.$prefix}interface {
+    // ---------------------------
+    // Accessibility + position
+    // ---------------------------
+    .#{sys.$prefix}visually-hidden {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      clip: rect(0,0,0,0) !important;
+      clip-path: inset(50%) !important;
+      border: 0 !important;
+    }
+    .#{sys.$prefix}visually-hidden--focusable:not(:focus):not(:focus-within):not(:active) {
+      @extend .#{sys.$prefix}visually-hidden;
+    }
+    .#{sys.$prefix}position-static   { position: static !important; }
+    .#{sys.$prefix}position-relative { position: relative !important; }
+    .#{sys.$prefix}position-absolute { position: absolute !important; }
+
+    .#{sys.$prefix}stretched-link-container { position: relative !important; }
+    .#{sys.$prefix}stretched-link::after { 
+      content: '' !important;
+      position: absolute !important;
+      inset: 0 !important;
+    }
+
+    .#{sys.$prefix}hidden { 
+      display: none !important; 
+    }
+
+    // Elevation helpers (z-index)
+    // Uses layer tokens from _tokens.scss
+    // --------------------------------------------------
+
+    .is-layer-surface  { z-index: var(--#{sys.$prefix}layer-surface) !important; }
+    .is-layer-elevated { z-index: var(--#{sys.$prefix}layer-elevated) !important; }
+    .is-layer-overlay  { z-index: var(--#{sys.$prefix}layer-overlay) !important; }
+    .is-layer-modal    { z-index: var(--#{sys.$prefix}layer-modal) !important; }
+    .is-layer-top      { z-index: var(--#{sys.$prefix}layer-top) !important; }
+
+    // ---------------------------
+    // Margin shorthands
+    // ---------------------------
+    .#{sys.$prefix}margin-none              { margin: 0 !important; }
+    .#{sys.$prefix}margin-block-none        { margin-block: 0 !important; }
+    .#{sys.$prefix}margin-block-start-none  { margin-block-start: 0 !important; }
+    .#{sys.$prefix}margin-block-end-none    { margin-block-end: 0 !important; }
+    .#{sys.$prefix}margin-inline-none       { margin-inline: 0 !important; }
+    .#{sys.$prefix}margin-inline-start-none { margin-inline-start: 0 !important; }
+    .#{sys.$prefix}margin-inline-end-none   { margin-inline-end: 0 !important; }
+
+    .#{sys.$prefix}margin-auto              { margin: auto !important; }
+    .#{sys.$prefix}margin-block-auto        { margin-block: auto !important; }
+    .#{sys.$prefix}margin-block-start-auto  { margin-block-start: auto !important; }
+    .#{sys.$prefix}margin-block-end-auto    { margin-block-end: auto !important; }
+    .#{sys.$prefix}margin-inline-auto       { margin-inline: auto !important; }
+    .#{sys.$prefix}margin-inline-start-auto { margin-inline-start: auto !important; }
+    .#{sys.$prefix}margin-inline-end-auto   { margin-inline-end: auto !important; }
+
+    @each $name in $spacing-aliases {
+      .#{sys.$prefix}margin-#{$name}              { margin: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-block-#{$name}        { margin-block: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-block-start-#{$name}  { margin-block-start: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-block-end-#{$name}    { margin-block-end: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-inline-#{$name}       { margin-inline: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-inline-start-#{$name} { margin-inline-start: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}margin-inline-end-#{$name}   { margin-inline-end: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+    }
+    // ---------------------------
+    // Padding shorthands
+    // ---------------------------
+    .#{sys.$prefix}padding-none              { padding: 0 !important; }
+    .#{sys.$prefix}padding-block-none        { padding-block: 0 !important; }
+    .#{sys.$prefix}padding-block-start-none  { padding-block-start: 0 !important; }
+    .#{sys.$prefix}padding-block-end-none    { padding-block-end: 0 !important; }
+    .#{sys.$prefix}padding-inline-none       { padding-inline: 0 !important; }
+    .#{sys.$prefix}padding-inline-start-none { padding-inline-start: 0 !important; }
+    .#{sys.$prefix}padding-inline-end-none   { padding-inline-end: 0 !important; }
+
+    @each $name in $spacing-aliases {
+      .#{sys.$prefix}padding-#{$name}              { padding: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-block-#{$name}        { padding-block: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-block-start-#{$name}  { padding-block-start: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-block-end-#{$name}    { padding-block-end: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-inline-#{$name}       { padding-inline: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-inline-start-#{$name} { padding-inline-start: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+      .#{sys.$prefix}padding-inline-end-#{$name}   { padding-inline-end: var(--#{sys.$prefix}spacing-#{$name}) !important; }
+    }
+    // ---------------------------
+    // Container query context
+    // ---------------------------
+    // Supports width queries
+    .#{sys.$prefix}container {
+      container-name: var(--#{sys.$prefix}container-name, #{sys.$container-name}) !important;
+      container-type: inline-size !important;
+    }
+    // Supports width and height queries
+    .#{sys.$prefix}container--size {
+      container-name: var(--#{sys.$prefix}container-name, #{sys.$container-name}) !important;
+      container-type: size !important;
+    }
+
+    // ---------------------------
+    // Shared density variables
+    // ---------------------------
+    // Inline = x-axis spacing, Block = y-axis spacing.
+    // Defaults use your size aliases.
+    .#{sys.$prefix}grid,
+    .#{sys.$prefix}flex,
+    .#{sys.$prefix}stack,
+    .#{sys.$prefix}inline-flex {
+      --#{sys.$prefix}gap-inline: var(--#{sys.$prefix}spacing-md);
+      --#{sys.$prefix}gap-block:  var(--#{sys.$prefix}spacing-md);
+    }
+
+    // ---------------------------
+    // Grid
+    // ---------------------------
+    .#{sys.$prefix}grid {
+      display: grid !important;
+      grid-template-columns: repeat(var(--#{sys.$prefix}grid-cols, 1), minmax(0, 1fr));
+      column-gap: var(--#{sys.$prefix}gap-inline);
+      row-gap: var(--#{sys.$prefix}gap-block);
+    }
+    
+    @for $i from 1 through 12 {
+      .#{sys.$prefix}grid--cols-#{$i} { --#{sys.$prefix}grid-cols: #{$i}; }
+    }
+
+    // Auto-fill grid with a minimum column size (defaults to 12rem)
+    .#{sys.$prefix}grid--auto {
+      grid-template-columns: repeat(auto-fit, minmax(var(--#{sys.$prefix}grid-min, 12rem), 1fr));
+    }
+
+    // Grid item spans (1–12) and full
+    .#{sys.$prefix}col-span-full { grid-column: 1 / -1; }
+
+    @for $i from 1 through 12 {
+      .#{sys.$prefix}col-span-#{$i} { grid-column: span #{$i} / span #{$i}; }
+    }
+
+    .#{sys.$prefix}row-span-full { grid-row: 1 / -1; }
+    
+    @for $i from 1 through 12 {
+      .#{sys.$prefix}row-span-#{$i} { grid-row: span #{$i} / span #{$i}; }
+    }
+    // ---------------------------
+    // Flex (row/column + wrap)
+    // ---------------------------
+    .#{sys.$prefix}flex {
+      display: flex !important;
+      // Modern browsers support row/column gaps for flex:
+      row-gap: var(--#{sys.$prefix}gap-block);
+      column-gap: var(--#{sys.$prefix}gap-inline);
+
+      &.is-wrap { flex-wrap: wrap !important; }
+      &.is-nowrap { flex-wrap: nowrap !important; }
+
+      > * { min-width: 0; }
+    }
+
+    .#{sys.$prefix}inline-flex {
+      display: inline-flex !important;
+      row-gap: var(--#{sys.$prefix}gap-block);
+      column-gap: var(--#{sys.$prefix}gap-inline);
+    }
+
+      // Vertical stack helper
+    .#{sys.$prefix}stack {
+      display: flex !important;
+      flex-direction: column;
+      row-gap: var(--#{sys.$prefix}gap-block);
+      > * { min-height: 0; }
+    }
+
+
+    .is-align-stretch { align-items: stretch; }
+    .is-align-start   { align-items: start; }
+    .is-align-center  { align-items: center; }
+    .is-align-end     { align-items: end; }
+
+    // Distribution (justify-content) & self-alignment helpers
+    .is-justify-start   { justify-content: flex-start; }
+    .is-justify-center  { justify-content: center; }
+    .is-justify-end     { justify-content: flex-end; }
+    .is-justify-between { justify-content: space-between; }
+    .is-justify-around  { justify-content: space-around; }
+    .is-justify-evenly  { justify-content: space-evenly; }
+
+    .is-align-self-start   { align-self: start; }
+    .is-align-self-center  { align-self: center; }
+    .is-align-self-end     { align-self: end; }
+    .is-align-self-stretch { align-self: stretch; }
+
+    // Grid alignment shorthand (applies to grid containers)
+    .is-place-start  { place-items: start; }
+    .is-place-center { place-items: center; }
+    .is-place-end    { place-items: end; }
+
+    // Lists as layout containers
+    ul.#{sys.$prefix}grid, 
+    ul.#{sys.$prefix}stack,
+    ul.#{sys.$prefix}inline-flex,
+    ul.#{sys.$prefix}flex { list-style: none !important; padding: 0 !important; margin: 0 !important; }
+
+    ul.#{sys.$prefix}grid > li, 
+    ul.#{sys.$prefix}stack > li,
+    ul.#{sys.$prefix}inline-flex > li,
+    ul.#{sys.$prefix}flex > li {
+      list-style: none !important;
+    }
+
+    // ---------------------------
+    // Density utilities (aliases)
+    // Applies to BOTH grid and flex via shared custom props.
+    // ---------------------------
+    // ---------------------------
+    // Zero density helpers
+    // ---------------------------
+    .is-density-none         { --#{sys.$prefix}gap-inline: 0; --#{sys.$prefix}gap-block: 0; }
+    .is-density-inline-none  { --#{sys.$prefix}gap-inline: 0; }
+    .is-density-block-none   { --#{sys.$prefix}gap-block: 0; }
+
+    
+
+    @each $name in $spacing-aliases {
+      // both axes
+      .is-density-#{$name} {
+        --#{sys.$prefix}gap-inline: var(--#{sys.$prefix}spacing-#{$name});
+        --#{sys.$prefix}gap-block:  var(--#{sys.$prefix}spacing-#{$name});
+      }
+      // inline axis only (x)
+      .is-density-inline-#{$name} {
+        --#{sys.$prefix}gap-inline: var(--#{sys.$prefix}spacing-#{$name});
+      }
+      // block axis only (y)
+      .is-density-block-#{$name} {
+        --#{sys.$prefix}gap-block: var(--#{sys.$prefix}spacing-#{$name});
+      }
+    }
+
+    // ---------------------------
+    // Text size utilties (aliases)
+    // ---------------------------
+    @each $name in $text-size-aliases {
+      .#{sys.$prefix}text-#{$name} {
+        font-size: var(--#{sys.$prefix}typography-size-#{$name}) !important;
+      }
+    }
+    // ---------------------------
+    // Text weight utilties
+    // ---------------------------
+    .#{sys.$prefix}text-bold {
+      font-weight: var(--#{sys.$prefix}typography-weight-bold, 700) !important;
+    }
+    .#{sys.$prefix}text-normal {
+      font-weight: var(--#{sys.$prefix}typography-weight-normal, 400) !important;
+    }
+    // ---------------------------
+    // Text color utilties
+    // ---------------------------
+
+    @each $name in $themes {
+      .#{sys.$prefix}text-#{$name} {
+        color: var(--#{sys.$prefix}theme-#{$name}-base) !important;
+      }
+    }
+    .#{sys.$prefix}text-white {
+      color: var(--#{sys.$prefix}palette-color-white);
+    }
+    .#{sys.$prefix}text-contrast-high {
+      color: var(--#{sys.$prefix}typography-color-contrast-high);
+    }
+    .#{sys.$prefix}text-contrast-low {
+      color: var(--#{sys.$prefix}typography-color-contrast-low);
+    }
+
+    // ---------------------------
+    // Border radius utilities
+    // ---------------------------
+    .#{sys.$prefix}rounded-none {
+      border-radius: 0 !important;
+    }
+    .#{sys.$prefix}rounded-xs {
+      border-radius: var(--#{sys.$prefix}radius-xs) !important;
+    }
+    .#{sys.$prefix}rounded-sm {
+      border-radius: var(--#{sys.$prefix}radius-sm) !important;
+    }
+    .#{sys.$prefix}rounded-md {
+      border-radius: var(--#{sys.$prefix}radius-md) !important;
+    }
+    .#{sys.$prefix}rounded-lg {
+      border-radius: var(--#{sys.$prefix}radius-lg) !important;
+    }
+    .#{sys.$prefix}rounded-xl {
+      border-radius: var(--#{sys.$prefix}radius-xl) !important;
+    }
+    .#{sys.$prefix}rounded-full {
+      border-radius: 9999px !important;
+    }
+
+    // ---------------------------
+    // Border width & side utilities
+    // ---------------------------
+    // Base border uses a shared token and solid style.
+    .#{sys.$prefix}border {
+      border-width: var(--#{sys.$prefix}border-width, 1px) !important;
+      border-style: solid !important;
+      border-color: currentColor !important;
+    }
+
+    .#{sys.$prefix}border-0 {
+      border: 0 !important;
+    }
+
+    .#{sys.$prefix}border-t {
+      border-top-width: var(--#{sys.$prefix}border-width, 1px) !important;
+      border-top-style: solid !important;
+    }
+    .#{sys.$prefix}border-b {
+      border-bottom-width: var(--#{sys.$prefix}border-width, 1px) !important;
+      border-bottom-style: solid !important;
+    }
+    .#{sys.$prefix}border-l {
+      border-left-width: var(--#{sys.$prefix}border-width, 1px) !important;
+      border-left-style: solid !important;
+    }
+    .#{sys.$prefix}border-r {
+      border-right-width: var(--#{sys.$prefix}border-width, 1px) !important;
+      border-right-style: solid !important;
+    }
+
+    // ---------------------------
+    // Border color utilities (semantic-only)
+    // ---------------------------
+    // Uses `theme-*-border` when available, otherwise falls back to `theme-*-base`.
+    @each $name in $themes {
+      .#{sys.$prefix}border-#{$name} {
+        border-color: var(
+          --#{sys.$prefix}theme-#{$name}-border,
+          var(--#{sys.$prefix}theme-#{$name}-base)
+        ) !important;
+      }
+    }
+
+    .#{sys.$prefix}border-contrast-high {
+      border-color: var(
+        --#{sys.$prefix}border-color-contrast-high,
+        var(--#{sys.$prefix}typography-color-contrast-high)
+      ) !important;
+    }
+
+    .#{sys.$prefix}border-contrast-low {
+      border-color: var(
+        --#{sys.$prefix}border-color-contrast-low,
+        var(--#{sys.$prefix}typography-color-contrast-low)
+      ) !important;
+    }
+  }
+}