stillwind 0.0.0 → 0.1.0-rc.0

package/css/builtin-utilities/tw-backgrounds.css

@@ -0,0 +1,606 @@
+/* Built-in backgrounds utilities. */
+
+/* MARK: `background-color` */
+
+@stillwind-arbitrary-property background-color;
+
+@stillwind-utility bg-* {
+  background-color: --value(--color-*, current, inherit, transparent, [color]);
+}
+
+@stillwind-utility bg-* {
+  background-color: --compat-color(
+    --value(--color-*, current, inherit, transparent, [color]),
+    --alpha(--modifier())
+  );
+}
+
+/* MARK: `background-image` */
+
+@stillwind-arbitrary-property background-image;
+@stillwind-arbitrary-property --tw-gradient-*;
+
+@stillwind-utility bg-none {
+  background-image: none;
+}
+
+@stillwind-utility bg-* {
+  background-image: --value([image], [url]);
+}
+
+/* MARK: `background-image` with gradients */
+
+@stillwind-arbitrary-property --tw-gradient-position;
+
+@stillwind-utility bg-conic {
+  --tw-gradient-position: in oklab;
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+/* Gradient interpolation follows the CSS Images 4 color-space spelling.
+ * `--modifier-map` is registry syntax, so user-defined utilities get the
+ * same checked modifier behaviour without a JavaScript-side special case. */
+@stillwind-utility bg-conic {
+  --tw-gradient-position: --modifier-map(
+    oklab: in oklab,
+    oklch: in oklch,
+    srgb: in srgb,
+    hsl: in hsl,
+    longer: in oklch longer hue,
+    shorter: in oklch shorter hue,
+    increasing: in oklch increasing hue,
+    decreasing: in oklch decreasing hue
+  );
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-conic-* {
+  --stillwind-modifier-guard: --modifier-none();
+  --tw-gradient-position: from calc(1deg * --value(integer)) in oklab;
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-conic-* {
+  --tw-gradient-position: from calc(1deg * --value(integer))
+    --modifier-map(
+      oklab: in oklab,
+      oklch: in oklch,
+      srgb: in srgb,
+      hsl: in hsl,
+      longer: in oklch longer hue,
+      shorter: in oklch shorter hue,
+      increasing: in oklch increasing hue,
+      decreasing: in oklch decreasing hue
+    );
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility -bg-conic-* {
+  --stillwind-modifier-guard: --modifier-none();
+  --tw-gradient-position: from calc(1deg * -1 * --value(integer)) in oklab;
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility -bg-conic-* {
+  --tw-gradient-position: from calc(1deg * -1 * --value(integer))
+    --modifier-map(
+      oklab: in oklab,
+      oklch: in oklch,
+      srgb: in srgb,
+      hsl: in hsl,
+      longer: in oklch longer hue,
+      shorter: in oklch shorter hue,
+      increasing: in oklch increasing hue,
+      decreasing: in oklch decreasing hue
+    );
+  background-image: conic-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-radial {
+  --tw-gradient-position: in oklab;
+  background-image: radial-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-radial {
+  --tw-gradient-position: --modifier-map(
+    oklab: in oklab,
+    oklch: in oklch,
+    srgb: in srgb,
+    hsl: in hsl,
+    longer: in oklch longer hue,
+    shorter: in oklch shorter hue,
+    increasing: in oklch increasing hue,
+    decreasing: in oklch decreasing hue
+  );
+  background-image: radial-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-b {
+  --tw-gradient-position: to bottom;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to bottom in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-bl {
+  --tw-gradient-position: to bottom left;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to bottom left in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-br {
+  --tw-gradient-position: to bottom right;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to bottom right in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-l {
+  --tw-gradient-position: to left;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to left in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-r {
+  --tw-gradient-position: to right;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to right in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-t {
+  --tw-gradient-position: to top;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to top in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-tl {
+  --tw-gradient-position: to top left;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to top left in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-tr {
+  --tw-gradient-position: to top right;
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: to top right in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-to-* {
+  --tw-gradient-position: --value-map(
+    t: to top,
+    tr: to top right,
+    r: to right,
+    br: to bottom right,
+    b: to bottom,
+    bl: to bottom left,
+    l: to left,
+    tl: to top left
+  );
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: --value-map(
+        t: to top,
+        tr: to top right,
+        r: to right,
+        br: to bottom right,
+        b: to bottom,
+        bl: to bottom left,
+        l: to left,
+        tl: to top left
+      )
+      --modifier-map(
+        oklab: in oklab,
+        oklch: in oklch,
+        srgb: in srgb,
+        hsl: in hsl,
+        longer: in oklch longer hue,
+        shorter: in oklch shorter hue,
+        increasing: in oklch increasing hue,
+        decreasing: in oklch decreasing hue
+      );
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-* {
+  --tw-gradient-position: calc(--value(integer) * 1deg);
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: calc(--value(integer) * 1deg) in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility bg-linear-* {
+  --tw-gradient-position: calc(--value(integer) * 1deg);
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: calc(--value(integer) * 1deg)
+      --modifier-map(
+        oklab: in oklab,
+        oklch: in oklch,
+        srgb: in srgb,
+        hsl: in hsl,
+        longer: in oklch longer hue,
+        shorter: in oklch shorter hue,
+        increasing: in oklch increasing hue,
+        decreasing: in oklch decreasing hue
+      );
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility -bg-linear-* {
+  --tw-gradient-position: calc(--value(integer) * 1deg * -1);
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: calc(--value(integer) * 1deg * -1) in oklab;
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+@stillwind-utility -bg-linear-* {
+  --tw-gradient-position: calc(--value(integer) * 1deg * -1);
+  @supports (background: linear-gradient(in lab, red, red)) {
+    --tw-gradient-position: calc(--value(integer) * 1deg * -1)
+      --modifier-map(
+        oklab: in oklab,
+        oklch: in oklch,
+        srgb: in srgb,
+        hsl: in hsl,
+        longer: in oklch longer hue,
+        shorter: in oklch shorter hue,
+        increasing: in oklch increasing hue,
+        decreasing: in oklch decreasing hue
+      );
+  }
+  background-image: linear-gradient(var(--tw-gradient-stops));
+}
+
+/*
+An arbitrary gradient value sets the position that color stop utilities insert before
+their stops. Without color stop utilities, the value is the complete argument list, so
+`bg-linear-[to_right,red,blue]` draws its own gradient.
+*/
+@stillwind-utility bg-linear-* {
+  --tw-gradient-position: --value([linear-gradient-position]);
+  background-image: linear-gradient(var(--tw-gradient-stops, --value([linear-gradient-position])));
+}
+
+@stillwind-utility bg-radial-* {
+  --tw-gradient-position: --value([radial-gradient-position]);
+  background-image: radial-gradient(var(--tw-gradient-stops, --value([radial-gradient-position])));
+}
+
+@stillwind-utility bg-conic-* {
+  --tw-gradient-position: --value([conic-gradient-position]);
+  background-image: conic-gradient(var(--tw-gradient-stops, --value([conic-gradient-position])));
+}
+
+@stillwind-arbitrary-property --tw-gradient-via-stops;
+
+@stillwind-utility via-none {
+  --tw-gradient-via-stops: initial;
+}
+
+@stillwind-arbitrary-property --tw-gradient-via;
+
+@stillwind-utility via-* (tw-sort: --tw-gradient-via) {
+  --tw-gradient-via: --value(--color-*, current, inherit, transparent);
+  --tw-gradient-via-stops:
+    var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-via) var(--tw-gradient-via-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-via-stops);
+}
+
+@stillwind-utility via-* (tw-sort: --tw-gradient-via) {
+  --tw-gradient-via: --compat-color(
+    --value(--color-*, current, inherit, transparent),
+    --alpha(--modifier())
+  );
+  --tw-gradient-via-stops:
+    var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-via) var(--tw-gradient-via-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-via-stops);
+}
+
+@stillwind-arbitrary-property --tw-gradient-via-position;
+
+@stillwind-utility via-* {
+  --tw-gradient-via-position: --value(--spacing-*, --spacing(), percentage, [length-percentage]);
+}
+
+@stillwind-arbitrary-property --tw-gradient-stops;
+@stillwind-arbitrary-property --tw-gradient-from;
+
+@stillwind-utility from-* (tw-sort: --tw-gradient-from) {
+  --tw-gradient-from: --value(--color-*, current, inherit, transparent);
+  --tw-gradient-stops: var(
+    --tw-gradient-via-stops,
+    var(--tw-gradient-position),
+    var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position)
+  );
+}
+
+@stillwind-utility from-* (tw-sort: --tw-gradient-from) {
+  --tw-gradient-from: --compat-color(
+    --value(--color-*, current, inherit, transparent),
+    --alpha(--modifier())
+  );
+  --tw-gradient-stops: var(
+    --tw-gradient-via-stops,
+    var(--tw-gradient-position),
+    var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position)
+  );
+}
+
+@stillwind-arbitrary-property --tw-gradient-from-position;
+
+@stillwind-utility from-* {
+  --tw-gradient-from-position: --value(--spacing-*, --spacing(), percentage, [length-percentage]);
+}
+
+@stillwind-arbitrary-property --tw-gradient-to;
+
+@stillwind-utility to-* (tw-sort: --tw-gradient-to) {
+  --tw-gradient-to: --value(--color-*, current, inherit, transparent);
+  --tw-gradient-stops: var(
+    --tw-gradient-via-stops,
+    var(--tw-gradient-position),
+    var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position)
+  );
+}
+
+@stillwind-utility to-* (tw-sort: --tw-gradient-to) {
+  --tw-gradient-to: --compat-color(
+    --value(--color-*, current, inherit, transparent),
+    --alpha(--modifier())
+  );
+  --tw-gradient-stops: var(
+    --tw-gradient-via-stops,
+    var(--tw-gradient-position),
+    var(--tw-gradient-from) var(--tw-gradient-from-position),
+    var(--tw-gradient-to) var(--tw-gradient-to-position)
+  );
+}
+
+@stillwind-arbitrary-property --tw-gradient-to-position;
+
+@stillwind-utility to-* {
+  --tw-gradient-to-position: --value(--spacing-*, --spacing(), percentage, [length-percentage]);
+}
+
+/* MARK: `background-size` */
+
+@stillwind-arbitrary-property background-size;
+
+@stillwind-utility bg-auto {
+  background-size: auto;
+}
+
+@stillwind-utility bg-contain {
+  background-size: contain;
+}
+
+@stillwind-utility bg-cover {
+  background-size: cover;
+}
+
+@stillwind-utility bg-size-* {
+  background-size: --value([bg-size]);
+}
+
+@stillwind-utility bg-* {
+  background-size: --value([bg-size], [length]);
+}
+
+/* MARK: `background-attachment` */
+
+@stillwind-arbitrary-property background-attachment;
+
+@stillwind-utility bg-fixed {
+  background-attachment: fixed;
+}
+
+@stillwind-utility bg-local {
+  background-attachment: local;
+}
+
+@stillwind-utility bg-scroll {
+  background-attachment: scroll;
+}
+
+/* MARK: `background-clip` */
+
+@stillwind-arbitrary-property background-clip;
+
+@stillwind-utility bg-clip-border {
+  background-clip: border-box;
+}
+
+@stillwind-utility bg-clip-content {
+  background-clip: content-box;
+}
+
+@stillwind-utility bg-clip-padding {
+  background-clip: padding-box;
+}
+
+@stillwind-utility bg-clip-text {
+  background-clip: text;
+}
+
+/* MARK: `background-position` */
+
+@stillwind-arbitrary-property background-position;
+
+@stillwind-utility bg-position-* {
+  background-position: --value([position]);
+}
+
+@stillwind-utility bg-bottom {
+  background-position: bottom;
+}
+
+@stillwind-utility bg-bottom-left {
+  background-position: left bottom;
+}
+
+@stillwind-utility bg-bottom-right {
+  background-position: right bottom;
+}
+
+@stillwind-utility bg-center {
+  background-position: center;
+}
+
+@stillwind-utility bg-left {
+  background-position: left;
+}
+
+@stillwind-utility bg-right {
+  background-position: right;
+}
+
+@stillwind-utility bg-top {
+  background-position: top;
+}
+
+@stillwind-utility bg-top-left {
+  background-position: left top;
+}
+
+@stillwind-utility bg-top-right {
+  background-position: right top;
+}
+
+@stillwind-utility bg-* {
+  background-position: --value([percentage], [position]);
+}
+
+/* MARK: `background-repeat` */
+
+@stillwind-arbitrary-property background-repeat;
+
+@stillwind-utility bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+@stillwind-utility bg-repeat {
+  background-repeat: repeat;
+}
+
+@stillwind-utility bg-repeat-round {
+  background-repeat: round;
+}
+
+@stillwind-utility bg-repeat-space {
+  background-repeat: space;
+}
+
+@stillwind-utility bg-repeat-x {
+  background-repeat: repeat-x;
+}
+
+@stillwind-utility bg-repeat-y {
+  background-repeat: repeat-y;
+}
+
+/* MARK: `background-origin` */
+
+@stillwind-arbitrary-property background-origin;
+
+@stillwind-utility bg-origin-border {
+  background-origin: border-box;
+}
+
+@stillwind-utility bg-origin-content {
+  background-origin: content-box;
+}
+
+@stillwind-utility bg-origin-padding {
+  background-origin: padding-box;
+}
+
+/* MARK: `background-blend-mode` */
+
+@stillwind-arbitrary-property background-blend-mode;
+
+@stillwind-utility bg-blend-color {
+  background-blend-mode: color;
+}
+
+@stillwind-utility bg-blend-color-burn {
+  background-blend-mode: color-burn;
+}
+
+@stillwind-utility bg-blend-color-dodge {
+  background-blend-mode: color-dodge;
+}
+
+@stillwind-utility bg-blend-darken {
+  background-blend-mode: darken;
+}
+
+@stillwind-utility bg-blend-difference {
+  background-blend-mode: difference;
+}
+
+@stillwind-utility bg-blend-exclusion {
+  background-blend-mode: exclusion;
+}
+
+@stillwind-utility bg-blend-hard-light {
+  background-blend-mode: hard-light;
+}
+
+@stillwind-utility bg-blend-hue {
+  background-blend-mode: hue;
+}
+
+@stillwind-utility bg-blend-lighten {
+  background-blend-mode: lighten;
+}
+
+@stillwind-utility bg-blend-luminosity {
+  background-blend-mode: luminosity;
+}
+
+@stillwind-utility bg-blend-multiply {
+  background-blend-mode: multiply;
+}
+
+@stillwind-utility bg-blend-normal {
+  background-blend-mode: normal;
+}
+
+@stillwind-utility bg-blend-overlay {
+  background-blend-mode: overlay;
+}
+
+@stillwind-utility bg-blend-saturation {
+  background-blend-mode: saturation;
+}
+
+@stillwind-utility bg-blend-screen {
+  background-blend-mode: screen;
+}
+
+@stillwind-utility bg-blend-soft-light {
+  background-blend-mode: soft-light;
+}