@nextrap/style-utils 1.0.5 → 2.0.0

package/src/mixins/_flex.scss

@@ -0,0 +1,72 @@
+// Flex utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+
+@mixin flex-column() { flex-direction: column !important; }
+@mixin flex-row() { flex-direction: row !important; }
+@mixin flex-column-reverse() { flex-direction: column-reverse !important; }
+@mixin flex-row-reverse() { flex-direction: row-reverse !important; }
+
+@mixin flex-wrap() { flex-wrap: wrap !important; }
+@mixin flex-nowrap() { flex-wrap: nowrap !important; }
+@mixin flex-wrap-reverse() { flex-wrap: wrap-reverse !important; }
+
+@mixin justify-content-start() { justify-content: flex-start !important; }
+@mixin justify-content-end() { justify-content: flex-end !important; }
+@mixin justify-content-center() { justify-content: center !important; }
+@mixin justify-content-between() { justify-content: space-between !important; }
+@mixin justify-content-around() { justify-content: space-around !important; }
+@mixin justify-content-evenly() { justify-content: space-evenly !important; }
+
+@mixin align-items-start() { align-items: flex-start !important; }
+@mixin align-items-end() { align-items: flex-end !important; }
+@mixin align-items-center() { align-items: center !important; }
+@mixin align-items-baseline() { align-items: baseline !important; }
+@mixin align-items-stretch() { align-items: stretch !important; }
+
+@mixin align-content-start() { align-content: flex-start !important; }
+@mixin align-content-end() { align-content: flex-end !important; }
+@mixin align-content-center() { align-content: center !important; }
+@mixin align-content-between() { align-content: space-between !important; }
+@mixin align-content-around() { align-content: space-around !important; }
+@mixin align-content-stretch() { align-content: stretch !important; }
+
+@mixin align-self-auto() { align-self: auto !important; }
+@mixin align-self-start() { align-self: flex-start !important; }
+@mixin align-self-end() { align-self: flex-end !important; }
+@mixin align-self-center() { align-self: center !important; }
+@mixin align-self-baseline() { align-self: baseline !important; }
+@mixin align-self-stretch() { align-self: stretch !important; }
+
+@mixin flex-fill() { flex: 1 1 auto !important; }
+@mixin flex-grow-0() { flex-grow: 0 !important; }
+@mixin flex-grow-1() { flex-grow: 1 !important; }
+@mixin flex-shrink-0() { flex-shrink: 0 !important; }
+@mixin flex-shrink-1() { flex-shrink: 1 !important; }
+
+@mixin order-first() { order: -1 !important; }
+@mixin order-0() { order: 0 !important; }
+@mixin order-1() { order: 1 !important; }
+@mixin order-2() { order: 2 !important; }
+@mixin order-3() { order: 3 !important; }
+@mixin order-4() { order: 4 !important; }
+@mixin order-5() { order: 5 !important; }
+@mixin order-last() { order: 6 !important; }
+
+@mixin gap-0() { gap: 0 !important; }
+@mixin gap-1() { gap: var(--nt-space-1) !important; }
+@mixin gap-2() { gap: var(--nt-space-2) !important; }
+@mixin gap-3() { gap: var(--nt-space-3) !important; }
+@mixin gap-4() { gap: var(--nt-space-4) !important; }
+@mixin gap-5() { gap: var(--nt-space-5) !important; }
+
+@mixin gap-x-1() { column-gap: var(--nt-space-1) !important; }
+@mixin gap-x-2() { column-gap: var(--nt-space-2) !important; }
+@mixin gap-x-3() { column-gap: var(--nt-space-3) !important; }
+@mixin gap-x-4() { column-gap: var(--nt-space-4) !important; }
+@mixin gap-x-5() { column-gap: var(--nt-space-5) !important; }
+
+@mixin gap-y-1() { row-gap: var(--nt-space-1) !important; }
+@mixin gap-y-2() { row-gap: var(--nt-space-2) !important; }
+@mixin gap-y-3() { row-gap: var(--nt-space-3) !important; }
+@mixin gap-y-4() { row-gap: var(--nt-space-4) !important; }
+@mixin gap-y-5() { row-gap: var(--nt-space-5) !important; }

package/src/mixins/_font-utils.scss

@@ -0,0 +1,43 @@
+// Font utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+// Uses --nt-* CSS custom properties; no private Sass imports from style-base.
+
+@mixin fs-1() { font-size: var(--nt-fs-1) !important; line-height: var(--nt-line-height) !important; }
+@mixin fs-2() { font-size: var(--nt-fs-2) !important; line-height: var(--nt-line-height) !important; }
+@mixin fs-3() { font-size: var(--nt-fs-3) !important; line-height: var(--nt-line-height) !important; }
+@mixin fs-4() { font-size: var(--nt-fs-4) !important; line-height: var(--nt-line-height) !important; }
+@mixin fs-5() { font-size: var(--nt-fs-5) !important; line-height: var(--nt-line-height) !important; }
+@mixin fs-6() { font-size: var(--nt-fs-6) !important; line-height: var(--nt-line-height) !important; }
+
+@mixin text-reset() { color: inherit !important; text-decoration: none !important; }
+
+@mixin fw-light() { font-weight: 300 !important; }
+@mixin fw-lighter() { font-weight: lighter !important; }
+@mixin fw-normal() { font-weight: 400 !important; }
+@mixin fw-medium() { font-weight: 500 !important; }
+@mixin fw-semibold() { font-weight: 600 !important; }
+@mixin fw-bold() { font-weight: 700 !important; }
+@mixin fw-bolder() { font-weight: bolder !important; }
+
+@mixin fst-italic() { font-style: italic !important; }
+@mixin fst-normal() { font-style: normal !important; }
+
+@mixin lh-1() { line-height: 1 !important; }
+@mixin lh-sm() { line-height: 1.25 !important; }
+@mixin lh-base() { line-height: 1.5 !important; }
+@mixin lh-lg() { line-height: 2 !important; }
+
+@mixin font-monospace() {
+  font-family:
+    var(
+      --font-monospace-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New'
+    ),
+    monospace !important;
+}

package/src/mixins/_grid.scss

@@ -0,0 +1,103 @@
+// Row/column utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+@use 'sass:math';
+
+@mixin row() {
+  --gutters-x: 0;
+  --gutters-y: 0;
+
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  margin-top: calc(-1 * var(--gutters-y)) !important;
+  margin-right: calc(-0.5 * var(--gutters-x)) !important;
+  margin-left: calc(-0.5 * var(--gutters-x)) !important;
+
+  > * {
+    @include row-children();
+  }
+}
+
+@mixin row-children() {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--gutters-x) * 0.5) !important;
+  padding-left: calc(var(--gutters-x) * 0.5) !important;
+  margin-top: var(--gutters-y) !important;
+}
+
+@mixin col() { flex: 1 0 0 !important; width: 0 !important; }
+@mixin col-auto() { flex: 0 0 auto !important; width: auto !important; }
+@mixin col-1() { flex: 0 0 auto !important; width: math.percentage(math.div(1, 12)) !important; }
+@mixin col-2() { flex: 0 0 auto !important; width: math.percentage(math.div(2, 12)) !important; }
+@mixin col-3() { flex: 0 0 auto !important; width: math.percentage(math.div(3, 12)) !important; }
+@mixin col-4() { flex: 0 0 auto !important; width: math.percentage(math.div(4, 12)) !important; }
+@mixin col-5() { flex: 0 0 auto !important; width: math.percentage(math.div(5, 12)) !important; }
+@mixin col-6() { flex: 0 0 auto !important; width: math.percentage(math.div(6, 12)) !important; }
+@mixin col-7() { flex: 0 0 auto !important; width: math.percentage(math.div(7, 12)) !important; }
+@mixin col-8() { flex: 0 0 auto !important; width: math.percentage(math.div(8, 12)) !important; }
+@mixin col-9() { flex: 0 0 auto !important; width: math.percentage(math.div(9, 12)) !important; }
+@mixin col-10() { flex: 0 0 auto !important; width: math.percentage(math.div(10, 12)) !important; }
+@mixin col-11() { flex: 0 0 auto !important; width: math.percentage(math.div(11, 12)) !important; }
+@mixin col-12() { flex: 0 0 auto !important; width: math.percentage(math.div(12, 12)) !important; }
+
+@mixin _row-cols($count) {
+  > * {
+    flex: 0 0 auto !important;
+    width: math.percentage(math.div(1, $count)) !important;
+  }
+}
+
+@mixin row-cols-1() { @include _row-cols(1); }
+@mixin row-cols-2() { @include _row-cols(2); }
+@mixin row-cols-3() { @include _row-cols(3); }
+@mixin row-cols-4() { @include _row-cols(4); }
+@mixin row-cols-5() { @include _row-cols(5); }
+@mixin row-cols-6() { @include _row-cols(6); }
+
+@mixin offset-1() { margin-left: math.percentage(math.div(1, 12)) !important; }
+@mixin offset-2() { margin-left: math.percentage(math.div(2, 12)) !important; }
+@mixin offset-3() { margin-left: math.percentage(math.div(3, 12)) !important; }
+@mixin offset-4() { margin-left: math.percentage(math.div(4, 12)) !important; }
+@mixin offset-5() { margin-left: math.percentage(math.div(5, 12)) !important; }
+@mixin offset-6() { margin-left: math.percentage(math.div(6, 12)) !important; }
+@mixin offset-7() { margin-left: math.percentage(math.div(7, 12)) !important; }
+@mixin offset-8() { margin-left: math.percentage(math.div(8, 12)) !important; }
+@mixin offset-9() { margin-left: math.percentage(math.div(9, 12)) !important; }
+@mixin offset-10() { margin-left: math.percentage(math.div(10, 12)) !important; }
+@mixin offset-11() { margin-left: math.percentage(math.div(11, 12)) !important; }
+@mixin offset-12() { margin-left: math.percentage(math.div(12, 12)) !important; }
+
+@mixin _gutter($x, $y) {
+  --gutters-x: var(--nt-space-#{$x}) !important;
+  --gutters-y: var(--nt-space-#{$y}) !important;
+}
+
+@mixin _gutter-x($size) { --gutters-x: var(--nt-space-#{$size}) !important; }
+@mixin _gutter-y($size) { --gutters-y: var(--nt-space-#{$size}) !important; }
+
+@mixin g-0() { @include _gutter(0, 0); }
+@mixin g-1() { @include _gutter(1, 1); }
+@mixin g-2() { @include _gutter(2, 2); }
+@mixin g-3() { @include _gutter(3, 3); }
+@mixin g-4() { @include _gutter(4, 4); }
+@mixin g-5() { @include _gutter(5, 5); }
+@mixin g-6() { @include _gutter(6, 6); }
+
+@mixin gx-0() { @include _gutter-x(0); }
+@mixin gx-1() { @include _gutter-x(1); }
+@mixin gx-2() { @include _gutter-x(2); }
+@mixin gx-3() { @include _gutter-x(3); }
+@mixin gx-4() { @include _gutter-x(4); }
+@mixin gx-5() { @include _gutter-x(5); }
+@mixin gx-6() { @include _gutter-x(6); }
+
+@mixin gy-0() { @include _gutter-y(0); }
+@mixin gy-1() { @include _gutter-y(1); }
+@mixin gy-2() { @include _gutter-y(2); }
+@mixin gy-3() { @include _gutter-y(3); }
+@mixin gy-4() { @include _gutter-y(4); }
+@mixin gy-5() { @include _gutter-y(5); }
+@mixin gy-6() { @include _gutter-y(6); }

package/src/mixins/_index.scss

@@ -0,0 +1,16 @@
+@forward 'background';
+@forward 'border-color';
+@forward 'borders';
+@forward 'color-scheme';
+@forward 'container';
+@forward 'dimensions';
+@forward 'display';
+@forward 'flex';
+@forward 'font-utils';
+@forward 'grid';
+@forward 'list-style';
+@forward 'spacing-utils';
+@forward 'surface';
+@forward 'table';
+@forward 'text-color';
+@forward 'text';

package/src/mixins/_list-style.scss

@@ -0,0 +1,54 @@
+// List utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+
+@mixin list-unstyled() {
+  list-style: none !important;
+  padding-left: 0 !important;
+}
+
+@mixin list-inline() {
+  padding-left: 0 !important;
+
+  > li {
+    display: inline-block !important;
+
+    &:not(:last-child) {
+      margin-right: var(--nt-space-3) !important;
+    }
+  }
+}
+
+@mixin list-checked() {
+  list-style: none !important;
+  padding-left: 0 !important;
+
+  > li {
+    vertical-align: center;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      width: 1.2em;
+      height: 1.2em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      content: '\2713';
+      border-radius: 50%;
+      margin-right: var(--nt-space-2);
+      background-color: var(--nt-success);
+      color: var(--nt-white);
+      text-align: center;
+    }
+
+    &.list-item-removed::before {
+      content: '\2715';
+      background-color: var(--nt-danger);
+    }
+
+    &.list-item-unavailable::before {
+      content: '\2012';
+      background-color: var(--nt-dark);
+    }
+  }
+}

package/src/mixins/_spacing-utils.scss

@@ -0,0 +1,115 @@
+// Spacing utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+
+@mixin m-0() { margin: 0 !important; }
+@mixin m-1() { margin: var(--nt-space-1) !important; }
+@mixin m-2() { margin: var(--nt-space-2) !important; }
+@mixin m-3() { margin: var(--nt-space-3) !important; }
+@mixin m-4() { margin: var(--nt-space-4) !important; }
+@mixin m-5() { margin: var(--nt-space-5) !important; }
+
+@mixin mt-0() { margin-top: 0 !important; }
+@mixin mt-1() { margin-top: var(--nt-space-1) !important; }
+@mixin mt-2() { margin-top: var(--nt-space-2) !important; }
+@mixin mt-3() { margin-top: var(--nt-space-3) !important; }
+@mixin mt-4() { margin-top: var(--nt-space-4) !important; }
+@mixin mt-5() { margin-top: var(--nt-space-5) !important; }
+
+@mixin me-0() { margin-right: 0 !important; }
+@mixin me-1() { margin-right: var(--nt-space-1) !important; }
+@mixin me-2() { margin-right: var(--nt-space-2) !important; }
+@mixin me-3() { margin-right: var(--nt-space-3) !important; }
+@mixin me-4() { margin-right: var(--nt-space-4) !important; }
+@mixin me-5() { margin-right: var(--nt-space-5) !important; }
+
+@mixin mb-0() { margin-bottom: 0 !important; }
+@mixin mb-1() { margin-bottom: var(--nt-space-1) !important; }
+@mixin mb-2() { margin-bottom: var(--nt-space-2) !important; }
+@mixin mb-3() { margin-bottom: var(--nt-space-3) !important; }
+@mixin mb-4() { margin-bottom: var(--nt-space-4) !important; }
+@mixin mb-5() { margin-bottom: var(--nt-space-5) !important; }
+
+@mixin ms-0() { margin-left: 0 !important; }
+@mixin ms-1() { margin-left: var(--nt-space-1) !important; }
+@mixin ms-2() { margin-left: var(--nt-space-2) !important; }
+@mixin ms-3() { margin-left: var(--nt-space-3) !important; }
+@mixin ms-4() { margin-left: var(--nt-space-4) !important; }
+@mixin ms-5() { margin-left: var(--nt-space-5) !important; }
+
+@mixin mx-0() { margin-inline: 0 !important; }
+@mixin mx-1() { margin-inline: var(--nt-space-1) !important; }
+@mixin mx-2() { margin-inline: var(--nt-space-2) !important; }
+@mixin mx-3() { margin-inline: var(--nt-space-3) !important; }
+@mixin mx-4() { margin-inline: var(--nt-space-4) !important; }
+@mixin mx-5() { margin-inline: var(--nt-space-5) !important; }
+
+@mixin my-0() { margin-block: 0 !important; }
+@mixin my-1() { margin-block: var(--nt-space-1) !important; }
+@mixin my-2() { margin-block: var(--nt-space-2) !important; }
+@mixin my-3() { margin-block: var(--nt-space-3) !important; }
+@mixin my-4() { margin-block: var(--nt-space-4) !important; }
+@mixin my-5() { margin-block: var(--nt-space-5) !important; }
+
+@mixin p-0() { padding: 0 !important; }
+@mixin p-1() { padding: var(--nt-space-1) !important; }
+@mixin p-2() { padding: var(--nt-space-2) !important; }
+@mixin p-3() { padding: var(--nt-space-3) !important; }
+@mixin p-4() { padding: var(--nt-space-4) !important; }
+@mixin p-5() { padding: var(--nt-space-5) !important; }
+
+@mixin pt-0() { padding-top: 0 !important; }
+@mixin pt-1() { padding-top: var(--nt-space-1) !important; }
+@mixin pt-2() { padding-top: var(--nt-space-2) !important; }
+@mixin pt-3() { padding-top: var(--nt-space-3) !important; }
+@mixin pt-4() { padding-top: var(--nt-space-4) !important; }
+@mixin pt-5() { padding-top: var(--nt-space-5) !important; }
+
+@mixin pe-0() { padding-right: 0 !important; }
+@mixin pe-1() { padding-right: var(--nt-space-1) !important; }
+@mixin pe-2() { padding-right: var(--nt-space-2) !important; }
+@mixin pe-3() { padding-right: var(--nt-space-3) !important; }
+@mixin pe-4() { padding-right: var(--nt-space-4) !important; }
+@mixin pe-5() { padding-right: var(--nt-space-5) !important; }
+
+@mixin pb-0() { padding-bottom: 0 !important; }
+@mixin pb-1() { padding-bottom: var(--nt-space-1) !important; }
+@mixin pb-2() { padding-bottom: var(--nt-space-2) !important; }
+@mixin pb-3() { padding-bottom: var(--nt-space-3) !important; }
+@mixin pb-4() { padding-bottom: var(--nt-space-4) !important; }
+@mixin pb-5() { padding-bottom: var(--nt-space-5) !important; }
+
+@mixin ps-0() { padding-left: 0 !important; }
+@mixin ps-1() { padding-left: var(--nt-space-1) !important; }
+@mixin ps-2() { padding-left: var(--nt-space-2) !important; }
+@mixin ps-3() { padding-left: var(--nt-space-3) !important; }
+@mixin ps-4() { padding-left: var(--nt-space-4) !important; }
+@mixin ps-5() { padding-left: var(--nt-space-5) !important; }
+
+@mixin px-0() { padding-inline: 0 !important; }
+@mixin px-1() { padding-inline: var(--nt-space-1) !important; }
+@mixin px-2() { padding-inline: var(--nt-space-2) !important; }
+@mixin px-3() { padding-inline: var(--nt-space-3) !important; }
+@mixin px-4() { padding-inline: var(--nt-space-4) !important; }
+@mixin px-5() { padding-inline: var(--nt-space-5) !important; }
+
+@mixin py-0() { padding-block: 0 !important; }
+@mixin py-1() { padding-block: var(--nt-space-1) !important; }
+@mixin py-2() { padding-block: var(--nt-space-2) !important; }
+@mixin py-3() { padding-block: var(--nt-space-3) !important; }
+@mixin py-4() { padding-block: var(--nt-space-4) !important; }
+@mixin py-5() { padding-block: var(--nt-space-5) !important; }
+
+@mixin m-auto() { margin: auto !important; }
+@mixin mt-auto() { margin-top: auto !important; }
+@mixin me-auto() { margin-right: auto !important; }
+@mixin mb-auto() { margin-bottom: auto !important; }
+@mixin ms-auto() { margin-left: auto !important; }
+@mixin mx-auto() { margin-inline: auto !important; }
+@mixin my-auto() { margin-block: auto !important; }
+@mixin p-auto() { padding: auto !important; }
+@mixin pt-auto() { padding-top: auto !important; }
+@mixin pe-auto() { padding-right: auto !important; }
+@mixin pb-auto() { padding-bottom: auto !important; }
+@mixin ps-auto() { padding-left: auto !important; }
+@mixin px-auto() { padding-inline: auto !important; }
+@mixin py-auto() { padding-block: auto !important; }

package/src/mixins/_surface.scss

@@ -0,0 +1,24 @@
+// Semantic surface mixins keep a readable background/foreground pair together.
+
+@mixin _surface($background, $foreground) {
+  --nt-text: #{$foreground};
+  --nt-text-muted: color-mix(in oklch, #{$foreground} 72%, #{$background});
+  --nt-header: #{$foreground};
+  --nt-link: #{$foreground};
+  --nt-link-hover: #{$foreground};
+  background: #{$background} !important;
+  color: var(--nt-text) !important;
+}
+
+@mixin surface-primary() { @include _surface(var(--nt-primary), var(--nt-text-on-primary)); }
+@mixin surface-secondary() { @include _surface(var(--nt-secondary), var(--nt-text-on-secondary)); }
+@mixin surface-tertiary() { @include _surface(var(--nt-tertiary), var(--nt-text-on-tertiary)); }
+@mixin surface-accent() { @include _surface(var(--nt-accent), var(--nt-text-on-accent)); }
+@mixin surface-success() { @include _surface(var(--nt-success), var(--nt-text-on-success)); }
+@mixin surface-info() { @include _surface(var(--nt-info), var(--nt-text-on-info)); }
+@mixin surface-warning() { @include _surface(var(--nt-warning), var(--nt-text-on-warning)); }
+@mixin surface-danger() { @include _surface(var(--nt-danger), var(--nt-text-on-danger)); }
+@mixin surface-light() { @include _surface(var(--nt-light), var(--nt-text-on-light)); }
+@mixin surface-dark() { @include _surface(var(--nt-dark), var(--nt-text-on-dark)); }
+@mixin surface-white() { @include _surface(var(--nt-white), var(--nt-text-on-white)); }
+@mixin surface-black() { @include _surface(var(--nt-black), var(--nt-text-on-black)); }

package/src/mixins/_table.scss

@@ -0,0 +1,35 @@
+// Table utility mixins.
+// Generic reusable table styles live in @nextrap/style-elements.
+// These are kept for backward compatibility.
+// Classes are generated in default.scss from these same mixins.
+
+@mixin table() {
+  width: 100%;
+  caption-side: bottom;
+  border-collapse: collapse;
+
+  tbody,
+  td,
+  tfoot,
+  th,
+  thead,
+  tr {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  & > :not(caption) > * > * {
+    padding: var(--nt-space-2, 0.5rem) var(--nt-space-2, 0.5rem);
+    background-color: transparent;
+    border-bottom-width: var(--nt-border-width, 1px);
+    border-bottom-style: solid;
+    border-bottom-color: var(--nt-border, currentColor);
+  }
+}
+
+@mixin table-bordered() {
+  & > :not(caption) > * > * {
+    border-width: 1px;
+  }
+}

package/src/mixins/_text-color.scss

@@ -0,0 +1,24 @@
+// Text color utility mixins — each mixin styles the current selector.
+
+@mixin text-primary() { --text-color: var(--nt-primary) !important; color: var(--nt-primary) !important; }
+@mixin text-secondary() { --text-color: var(--nt-secondary) !important; color: var(--nt-secondary) !important; }
+@mixin text-tertiary() { --text-color: var(--nt-tertiary) !important; color: var(--nt-tertiary) !important; }
+@mixin text-accent() { --text-color: var(--nt-accent) !important; color: var(--nt-accent) !important; }
+@mixin text-success() { --text-color: var(--nt-success) !important; color: var(--nt-success) !important; }
+@mixin text-info() { --text-color: var(--nt-info) !important; color: var(--nt-info) !important; }
+@mixin text-warning() { --text-color: var(--nt-warning) !important; color: var(--nt-warning) !important; }
+@mixin text-danger() { --text-color: var(--nt-danger) !important; color: var(--nt-danger) !important; }
+@mixin text-light() { --text-color: var(--nt-light) !important; color: var(--nt-light) !important; }
+@mixin text-dark() { --text-color: var(--nt-dark) !important; color: var(--nt-dark) !important; }
+@mixin text-white() { --text-color: var(--nt-white) !important; color: var(--nt-white) !important; }
+@mixin text-black() { --text-color: var(--nt-black) !important; color: var(--nt-black) !important; }
+
+@mixin text-gray-100() { color: var(--nt-gray-100) !important; }
+@mixin text-gray-200() { color: var(--nt-gray-200) !important; }
+@mixin text-gray-300() { color: var(--nt-gray-300) !important; }
+@mixin text-gray-400() { color: var(--nt-gray-400) !important; }
+@mixin text-gray-500() { color: var(--nt-gray-500) !important; }
+@mixin text-gray-600() { color: var(--nt-gray-600) !important; }
+@mixin text-gray-700() { color: var(--nt-gray-700) !important; }
+@mixin text-gray-800() { color: var(--nt-gray-800) !important; }
+@mixin text-gray-900() { color: var(--nt-gray-900) !important; }

package/src/mixins/_text.scss

@@ -0,0 +1,28 @@
+// Text utility mixins — each mixin styles the current selector.
+// Classes are generated in default.scss from these same mixins.
+
+@mixin text-start() { text-align: start !important; }
+@mixin text-end() { text-align: end !important; }
+@mixin text-center() { text-align: center !important; }
+
+@mixin text-wrap() { white-space: normal !important; }
+@mixin text-nowrap() { white-space: nowrap !important; }
+
+@mixin text-break() {
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+}
+
+@mixin text-truncate() {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+@mixin text-lowercase() { text-transform: lowercase !important; }
+@mixin text-uppercase() { text-transform: uppercase !important; }
+@mixin text-capitalize() { text-transform: capitalize !important; }
+
+@mixin text-decoration-none() { text-decoration: none !important; }
+@mixin text-decoration-underline() { text-decoration: underline !important; }
+@mixin text-decoration-line-through() { text-decoration: line-through !important; }