@unocss/preset-uno 0.11.3 → 0.12.0

package/dist/{chunk-TBH55H4M.mjs → chunk-6XFI3IKX.mjs}

@@ -4,7 +4,7 @@ import {
   directionMap,
   handler,
   xyzMap
-} from "./chunk-FOQKHXUZ.mjs";
+} from "./chunk-URBMB274.mjs";
 
 // src/rules/transition.ts
 var transitionBasicProps = [
@@ -243,6 +243,43 @@ function handlerRounded([, a, b], { theme }) {
     return cornerMap[d].map((i) => [`border${i}-radius`, v]);
 }
 
+// src/rules/container.ts
+import { toArray } from "@unocss/core";
+var queryMatcher = /@media \(min-width: (.+)\)/;
+var container = [
+  [
+    /^__container$/,
+    (m, { variantHandlers }) => {
+      var _a;
+      let width = "100%";
+      for (const v of variantHandlers) {
+        const query = toArray(v.parent || [])[0];
+        if (typeof query === "string") {
+          const match = (_a = query.match(queryMatcher)) == null ? void 0 : _a[1];
+          if (match)
+            width = match;
+        }
+      }
+      return { "max-width": width };
+    },
+    { internal: true }
+  ]
+];
+var containerShortcuts = [
+  [/^(?:(\w+)[:-])?container$/, ([, bp], { theme }) => {
+    let points = Object.keys(theme.breakpoints || {});
+    if (bp) {
+      if (!points.includes(bp))
+        return;
+      points = points.slice(points.indexOf(bp));
+    }
+    const shortcuts = points.map((p) => `${p}:__container`);
+    if (!bp)
+      shortcuts.unshift("__container");
+    return shortcuts;
+  }]
+];
+
 // src/rules/background.ts
 var colorResolver2 = (mode) => ([, body], { theme }) => {
   const data = parseColorUtil(body, theme);
@@ -372,7 +409,7 @@ var bgSizes = [
 ];
 
 // src/rules/filters.ts
-import { toArray } from "@unocss/core";
+import { toArray as toArray2 } from "@unocss/core";
 var varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 var percentWithDefault = (defaultValue = "1") => (str) => {
   const v = str ? handler.bracket.percent(str) : defaultValue;
@@ -427,7 +464,7 @@ var filters = [
     var _a;
     const v = handler.bracket(s) || ((_a = theme.dropShadow) == null ? void 0 : _a[s || "DEFAULT"]);
     if (v)
-      return toArray(v).map((v2) => `drop-shadow(${v2})`).join(" ");
+      return toArray2(v).map((v2) => `drop-shadow(${v2})`).join(" ");
   })],
   [/^(backdrop-)?grayscale(?:-(\d+))?$/, toFilter("grayscale", percentWithDefault())],
   [/^(backdrop-)?hue-rotate-(\d+)$/, toFilter("hue-rotate", (s) => `${handler.bracket.number(s)}deg`)],
@@ -460,7 +497,7 @@ var flex = [
 ];
 
 // src/rules/typography.ts
-import { toArray as toArray2 } from "@unocss/core";
+import { toArray as toArray3 } from "@unocss/core";
 var fontsFamilies = [
   [/^font-(\w+)$/, ([, d], { theme }) => {
     var _a;
@@ -486,7 +523,7 @@ var weightMap = {
 var fontSizes = [
   [/^text-([^-]+)$/, ([, s = "base"], { theme }) => {
     var _a;
-    const result = toArray2(((_a = theme.fontSize) == null ? void 0 : _a[s]) || handler.bracket.rem(s));
+    const result = toArray3(((_a = theme.fontSize) == null ? void 0 : _a[s]) || handler.bracket.rem(s));
     if (result == null ? void 0 : result[0]) {
       const [size, height = "1"] = result;
       return {
@@ -521,12 +558,15 @@ var trackings = [
 ];
 var tabSizes = [
   [/^tab-?([^-]*)$/, ([, s]) => {
-    const v = handler.bracket.number.rem(s) || 4;
-    return {
-      "-moz-tab-size": v,
-      "-o-tab-size": v,
-      "tab-size": v
-    };
+    s = s || "4";
+    const v = handler.bracket.global.number(s);
+    if (v !== null) {
+      return {
+        "-moz-tab-size": v,
+        "-o-tab-size": v,
+        "tab-size": v
+      };
+    }
   }]
 ];
 var textDecorationLengths = [
@@ -605,12 +645,11 @@ var gaps = [
 ];
 
 // src/rules/grid.ts
-import { toArray as toArray3 } from "@unocss/core";
+import { toArray as toArray4 } from "@unocss/core";
 var calSize = (s, theme) => {
   var _a;
-  return toArray3(((_a = theme.fontSize) == null ? void 0 : _a[s]) || handler.bracket.rem(s))[0];
+  return toArray4(((_a = theme.fontSize) == null ? void 0 : _a[s]) || handler.bracket.rem(s))[0];
 };
-var isNumber = (s) => !isNaN(Number(s));
 var autoDirection = (selector, theme) => {
   if (selector === "min")
     return "min-content";
@@ -627,36 +666,29 @@ var grids = [
   [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })],
   [/^grid-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
   [/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })],
-  [/^(?:grid-)?auto-flow-(.+)$/, ([, v]) => ({ "grid-auto-flow": `${v.replace("col", "column").split("-").join(" ")}` })],
-  [/^(?:grid-)?row-start-(.+)$/, ([, v]) => ({ "grid-row-start": `${v}` })],
-  [/^(?:grid-)?row-end-(.+)$/, ([, v]) => ({ "grid-row-end": `${v}` })],
-  [/^(?:grid-)?col-start-(.+)$/, ([, v]) => ({ "grid-column-start": `${v}` })],
-  [/^(?:grid-)?col-end-(.+)$/, ([, v]) => ({ "grid-column-end": `${v}` })],
-  [/^(?:grid-)?auto-rows-(.+)$/, ([, v], { theme }) => ({ "grid-auto-rows": `${autoDirection(v, theme)}` })],
-  [/^(?:grid-)?auto-cols-(.+)$/, ([, v], { theme }) => ({ "grid-auto-columns": `${autoDirection(v, theme)}` })],
-  [/^(?:grid-)?row-((?!(start)|(end)).+)$/, ([, v]) => {
-    const shortArr = v.split("-");
-    if (shortArr[0] === "span") {
-      if (shortArr[1] === "full") {
-        return {
-          "grid-row": "1/-1"
-        };
-      }
-      return isNumber(shortArr[1]) ? { "grid-row": `span ${shortArr[1]}/span ${shortArr[1]}` } : void 0;
-    }
-    return { "grid-row": v.split("-").join(" ") };
-  }],
-  [/^(?:grid-)?col-((?!(start)|(end)).+)$/, ([, v]) => {
-    const shortArr = v.split("-");
-    if (shortArr[0] === "span") {
-      if (shortArr[1] === "full") {
-        return {
-          "grid-column": "1 / -1"
-        };
-      }
-      return isNumber(shortArr[1]) ? { "grid-column": `span ${shortArr[1]}/span ${shortArr[1]}` } : void 0;
+  [/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": `${v.replace("col", "column").split("-").join(" ")}` })],
+  [/^(?:grid-)?row-start-([\w.-]+)$/, ([, v]) => ({ "grid-row-start": `${v}` })],
+  [/^(?:grid-)?row-end-([\w.-]+)$/, ([, v]) => ({ "grid-row-end": `${v}` })],
+  [/^(?:grid-)?col-start-([\w.-]+)$/, ([, v]) => ({ "grid-column-start": `${v}` })],
+  [/^(?:grid-)?col-end-([\w.]+)$/, ([, v]) => ({ "grid-column-end": `${v}` })],
+  [/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": `${autoDirection(v, theme)}` })],
+  [/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": `${autoDirection(v, theme)}` })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, d, v]) => {
+    var _a;
+    const key = d === "row" ? "grid-row" : "grid-column";
+    let raw = handler.bracket(v);
+    if (raw)
+      return { [key]: raw };
+    const parts = v.split("-");
+    if (parts.length === 1 && parts[0] === "auto")
+      return { [key]: parts[0] };
+    if (parts[0] === "span") {
+      if (parts[1] === "full")
+        return { [key]: "1/-1" };
+      raw = (_a = handler.number.bracket(parts[1])) == null ? void 0 : _a.toString().replace(/_/g, " ");
+      if (raw)
+        return { [key]: `span ${raw}/span ${raw}` };
     }
-    return { "grid-column": v.split("-").join(" ") };
   }]
 ];
 
@@ -676,7 +708,9 @@ var overflows = [
 var positions = [
   ["relative", { position: "relative" }],
   ["absolute", { position: "absolute" }],
-  ["fixed", { position: "fixed" }]
+  ["fixed", { position: "fixed" }],
+  ["sticky", { position: "sticky" }],
+  ["static", { position: "static" }]
 ];
 var justifies = [
   ["justify-start", { "justify-content": "flex-start" }],
@@ -1510,6 +1544,7 @@ var rules = [
   margins,
   lineClamps,
   isolations,
+  container,
   displays,
   opacity,
   bgAttachments,
@@ -1599,5 +1634,6 @@ var rules = [
 ].flat(1);
 
 export {
+  containerShortcuts,
   rules
 };

package/dist/{chunk-R5JSOZOB.js → chunk-72RFF6VI.js}

@@ -209,43 +209,7 @@ var colors = {
     800: "#991b1b",
     900: "#7f1d1d"
   },
-  warmgray: {
-    50: "#fafaf9",
-    100: "#f5f5f4",
-    200: "#e7e5e4",
-    300: "#d6d3d1",
-    400: "#a8a29e",
-    500: "#78716c",
-    600: "#57534e",
-    700: "#44403c",
-    800: "#292524",
-    900: "#1c1917"
-  },
-  truegray: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#e5e5e5",
-    300: "#d4d4d4",
-    400: "#a3a3a3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#171717"
-  },
   gray: {
-    50: "#fafafa",
-    100: "#f4f4f5",
-    200: "#e4e4e7",
-    300: "#d4d4d8",
-    400: "#a1a1aa",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b"
-  },
-  coolgray: {
     50: "#f9fafb",
     100: "#f3f4f6",
     200: "#e5e7eb",
@@ -257,7 +221,7 @@ var colors = {
     800: "#1f2937",
     900: "#111827"
   },
-  bluegray: {
+  slate: {
     50: "#f8fafc",
     100: "#f1f5f9",
     200: "#e2e8f0",
@@ -269,6 +233,42 @@ var colors = {
     800: "#1e293b",
     900: "#0f172a"
   },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917"
+  },
   light: {
     50: "#fdfdfd",
     100: "#fcfcfc",
@@ -292,6 +292,36 @@ var colors = {
     700: "#1b1b1b",
     800: "#181818",
     900: "#0f0f0f"
+  },
+  get lightblue() {
+    return this.sky;
+  },
+  get lightBlue() {
+    return this.sky;
+  },
+  get warmgray() {
+    return this.stone;
+  },
+  get warmGray() {
+    return this.stone;
+  },
+  get truegray() {
+    return this.neutral;
+  },
+  get trueGray() {
+    return this.neutral;
+  },
+  get coolgray() {
+    return this.gray;
+  },
+  get coolGray() {
+    return this.gray;
+  },
+  get bluegray() {
+    return this.slate;
+  },
+  get blueGray() {
+    return this.slate;
   }
 };
 Object.values(colors).forEach((color) => {

package/dist/{chunk-PVS5EBXX.js → chunk-SCNDCSE5.js}

@@ -55,13 +55,14 @@ _chunkY6EUTGDCjs.__export.call(void 0, handlers_exports, {
   bracket: () => bracket,
   cssvar: () => cssvar,
   fraction: () => fraction,
+  global: () => global,
   number: () => number,
   percent: () => percent,
   px: () => px,
   rem: () => rem,
   time: () => time
 });
-var numberWithUnitRE = /^(-?[0-9.]+)([a-z]*)$/i;
+var numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
 var numberRE = /^(-?[0-9.]+)$/i;
 function rem(str) {
   if (str === "auto" || str === "a")
@@ -123,6 +124,10 @@ function time(str) {
     return str;
   return `${str}ms`;
 }
+function global(str) {
+  if (["inherit", "initial", "unset"].includes(str))
+    return str;
+}
 
 // src/utils/handlers/shorthand.ts
 var handlersNames = Object.keys(handlers_exports);

package/dist/{chunk-27BCQBR5.mjs → chunk-TOS4ZSIW.mjs}

@@ -1,6 +1,6 @@
 import {
   variantMatcher
-} from "./chunk-FOQKHXUZ.mjs";
+} from "./chunk-URBMB274.mjs";
 
 // src/variants/breakpoints.ts
 var regexCache = {};
@@ -18,8 +18,11 @@ var variantBreakpoints = (matcher, _, theme) => {
       direction = "max";
       order = -order;
     }
+    const m = matcher.slice(pre.length);
+    if (m === "container")
+      continue;
     return {
-      matcher: matcher.slice(pre.length),
+      matcher: m,
       parent: [`@media (${direction}-width: ${size})`, order]
     };
   }

package/dist/{chunk-FOQKHXUZ.mjs → chunk-URBMB274.mjs}

@@ -55,13 +55,14 @@ __export(handlers_exports, {
   bracket: () => bracket,
   cssvar: () => cssvar,
   fraction: () => fraction,
+  global: () => global,
   number: () => number,
   percent: () => percent,
   px: () => px,
   rem: () => rem,
   time: () => time
 });
-var numberWithUnitRE = /^(-?[0-9.]+)([a-z]*)$/i;
+var numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
 var numberRE = /^(-?[0-9.]+)$/i;
 function rem(str) {
   if (str === "auto" || str === "a")
@@ -123,6 +124,10 @@ function time(str) {
     return str;
   return `${str}ms`;
 }
+function global(str) {
+  if (["inherit", "initial", "unset"].includes(str))
+    return str;
+}
 
 // src/utils/handlers/shorthand.ts
 var handlersNames = Object.keys(handlers_exports);

package/dist/{chunk-RHH7JH7F.mjs → chunk-ZFG46AJ5.mjs}

@@ -209,43 +209,7 @@ var colors = {
     800: "#991b1b",
     900: "#7f1d1d"
   },
-  warmgray: {
-    50: "#fafaf9",
-    100: "#f5f5f4",
-    200: "#e7e5e4",
-    300: "#d6d3d1",
-    400: "#a8a29e",
-    500: "#78716c",
-    600: "#57534e",
-    700: "#44403c",
-    800: "#292524",
-    900: "#1c1917"
-  },
-  truegray: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#e5e5e5",
-    300: "#d4d4d4",
-    400: "#a3a3a3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#171717"
-  },
   gray: {
-    50: "#fafafa",
-    100: "#f4f4f5",
-    200: "#e4e4e7",
-    300: "#d4d4d8",
-    400: "#a1a1aa",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b"
-  },
-  coolgray: {
     50: "#f9fafb",
     100: "#f3f4f6",
     200: "#e5e7eb",
@@ -257,7 +221,7 @@ var colors = {
     800: "#1f2937",
     900: "#111827"
   },
-  bluegray: {
+  slate: {
     50: "#f8fafc",
     100: "#f1f5f9",
     200: "#e2e8f0",
@@ -269,6 +233,42 @@ var colors = {
     800: "#1e293b",
     900: "#0f172a"
   },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917"
+  },
   light: {
     50: "#fdfdfd",
     100: "#fcfcfc",
@@ -292,6 +292,36 @@ var colors = {
     700: "#1b1b1b",
     800: "#181818",
     900: "#0f0f0f"
+  },
+  get lightblue() {
+    return this.sky;
+  },
+  get lightBlue() {
+    return this.sky;
+  },
+  get warmgray() {
+    return this.stone;
+  },
+  get warmGray() {
+    return this.stone;
+  },
+  get truegray() {
+    return this.neutral;
+  },
+  get trueGray() {
+    return this.neutral;
+  },
+  get coolgray() {
+    return this.gray;
+  },
+  get coolGray() {
+    return this.gray;
+  },
+  get bluegray() {
+    return this.slate;
+  },
+  get blueGray() {
+    return this.slate;
   }
 };
 Object.values(colors).forEach((color) => {

package/dist/index.js

@@ -1,26 +1,30 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVL3EBQ6Wjs = require('./chunk-VL3EBQ6W.js');
 
+var _chunk2KYLIEWUjs = require('./chunk-2KYLIEWU.js');
 
 
-var _chunkR5JSOZOBjs = require('./chunk-R5JSOZOB.js');
 
+var _chunk72RFF6VIjs = require('./chunk-72RFF6VI.js');
 
 
 
-var _chunkGP4COTTPjs = require('./chunk-GP4COTTP.js');
-require('./chunk-PVS5EBXX.js');
+
+var _chunk5WWOD4UIjs = require('./chunk-5WWOD4UI.js');
+require('./chunk-SCNDCSE5.js');
 require('./chunk-Y6EUTGDC.js');
 
 // src/index.ts
 var preset = (options = {}) => ({
   name: "@unocss/preset-uno",
-  theme: _chunkR5JSOZOBjs.theme,
-  rules: _chunkVL3EBQ6Wjs.rules,
+  theme: _chunk72RFF6VIjs.theme,
+  rules: _chunk2KYLIEWUjs.rules,
   variants: [
-    ..._chunkGP4COTTPjs.variants,
-    ...options.dark === "media" ? _chunkGP4COTTPjs.variantColorsMedia : _chunkGP4COTTPjs.variantColorsClass
+    ..._chunk5WWOD4UIjs.variants,
+    ...options.dark === "media" ? _chunk5WWOD4UIjs.variantColorsMedia : _chunk5WWOD4UIjs.variantColorsClass
+  ],
+  shortcuts: [
+    ..._chunk2KYLIEWUjs.containerShortcuts
   ]
 });
 var src_default = preset;
@@ -29,4 +33,4 @@ var src_default = preset;
 
 
 
-exports.colors = _chunkR5JSOZOBjs.colors; exports.default = src_default; exports.preset = preset; exports.theme = _chunkR5JSOZOBjs.theme;
+exports.colors = _chunk72RFF6VIjs.colors; exports.default = src_default; exports.preset = preset; exports.theme = _chunk72RFF6VIjs.theme;

package/dist/index.mjs

@@ -1,16 +1,17 @@
 import {
+  containerShortcuts,
   rules
-} from "./chunk-TBH55H4M.mjs";
+} from "./chunk-6XFI3IKX.mjs";
 import {
   colors,
   theme
-} from "./chunk-RHH7JH7F.mjs";
+} from "./chunk-ZFG46AJ5.mjs";
 import {
   variantColorsClass,
   variantColorsMedia,
   variants
-} from "./chunk-27BCQBR5.mjs";
-import "./chunk-FOQKHXUZ.mjs";
+} from "./chunk-TOS4ZSIW.mjs";
+import "./chunk-URBMB274.mjs";
 import "./chunk-5SH5BFJ4.mjs";
 
 // src/index.ts
@@ -21,6 +22,9 @@ var preset = (options = {}) => ({
   variants: [
     ...variants,
     ...options.dark === "media" ? variantColorsMedia : variantColorsClass
+  ],
+  shortcuts: [
+    ...containerShortcuts
   ]
 });
 var src_default = preset;

package/dist/rules.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVL3EBQ6Wjs = require('./chunk-VL3EBQ6W.js');
-require('./chunk-PVS5EBXX.js');
+var _chunk2KYLIEWUjs = require('./chunk-2KYLIEWU.js');
+require('./chunk-SCNDCSE5.js');
 require('./chunk-Y6EUTGDC.js');
 
 
-exports.rules = _chunkVL3EBQ6Wjs.rules;
+exports.rules = _chunk2KYLIEWUjs.rules;

package/dist/rules.mjs

@@ -1,7 +1,7 @@
 import {
   rules
-} from "./chunk-TBH55H4M.mjs";
-import "./chunk-FOQKHXUZ.mjs";
+} from "./chunk-6XFI3IKX.mjs";
+import "./chunk-URBMB274.mjs";
 import "./chunk-5SH5BFJ4.mjs";
 export {
   rules

package/dist/theme.js

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkR5JSOZOBjs = require('./chunk-R5JSOZOB.js');
+var _chunk72RFF6VIjs = require('./chunk-72RFF6VI.js');
 require('./chunk-Y6EUTGDC.js');
 
 
 
-exports.colors = _chunkR5JSOZOBjs.colors; exports.theme = _chunkR5JSOZOBjs.theme;
+exports.colors = _chunk72RFF6VIjs.colors; exports.theme = _chunk72RFF6VIjs.theme;

package/dist/theme.mjs

@@ -1,7 +1,7 @@
 import {
   colors,
   theme
-} from "./chunk-RHH7JH7F.mjs";
+} from "./chunk-ZFG46AJ5.mjs";
 import "./chunk-5SH5BFJ4.mjs";
 export {
   colors,