diff --git a/packages/tailwindcss-language-server/src/util/color.ts b/packages/tailwindcss-language-server/src/util/color.ts
index c1378e8bdc32ff8166dd58912cb57d2fe710b68e..4e4b5985fdcfedda75373453c32c04218f8a7f55 100644
--- a/packages/tailwindcss-language-server/src/util/color.ts
+++ b/packages/tailwindcss-language-server/src/util/color.ts
@@ -1,6 +1,8 @@
const dlv = require('dlv')
import { State } from './state'
import removeMeta from './removeMeta'
+import { TinyColor } from '@ctrl/tinycolor'
+import { ensureArray, dedupe, flatten } from './array'
const COLOR_PROPS = [
'caret-color',
@@ -19,292 +21,158 @@ 'stroke',
'text-decoration-color',
]
-import { State } from './state'
const dlv = require('dlv')
- transparent: 'rgba(0, 0, 0, 0.01)',
- aliceblue: '#f0f8ff',
- antiquewhite: '#faebd7',
- aqua: '#0ff',
- aquamarine: '#7fffd4',
-import { State } from './state'
'color',
- beige: '#f5f5dc',
- bisque: '#ffe4c4',
import removeMeta from './removeMeta'
-import removeMeta from './removeMeta'
const dlv = require('dlv')
- blue: '#00f',
- blueviolet: '#8a2be2',
- brown: '#a52a2a',
- burlywood: '#deb887',
- burntsienna: '#ea7e5d',
-import removeMeta from './removeMeta'
'color',
- chartreuse: '#7fff00',
- chocolate: '#d2691e',
-
const dlv = require('dlv')
- cornsilk: '#fff8dc',
- crimson: '#dc143c',
- cyan: '#0ff',
- darkblue: '#00008b',
- darkcyan: '#008b8b',
-
'color',
- darkgray: '#a9a9a9',
- darkgreen: '#006400',
const COLOR_PROPS = [
-const COLOR_PROPS = [
const dlv = require('dlv')
- darkmagenta: '#8b008b',
- darkolivegreen: '#556b2f',
- darkorange: '#ff8c00',
- darkorchid: '#9932cc',
- darkred: '#8b0000',
-const COLOR_PROPS = [
'color',
- darkseagreen: '#8fbc8f',
- darkslateblue: '#483d8b',
'caret-color',
- 'caret-color',
const dlv = require('dlv')
- darkturquoise: '#00ced1',
- darkviolet: '#9400d3',
- deeppink: '#ff1493',
- deepskyblue: '#00bfff',
- dimgray: '#696969',
- 'caret-color',
'color',
- dodgerblue: '#1e90ff',
- firebrick: '#b22222',
'color',
- 'color',
const dlv = require('dlv')
- fuchsia: '#f0f',
- gainsboro: '#dcdcdc',
- ghostwhite: '#f8f8ff',
- gold: '#ffd700',
- goldenrod: '#daa520',
- gray: '#808080',
green: '#008000',
+const dlv = require('dlv')
greenyellow: '#adff2f',
- 'column-rule-color',
+const COLOR_NAMES = {
- 'column-rule-color',
const dlv = require('dlv')
- hotpink: '#ff69b4',
'column-rule-color',
-import removeMeta from './removeMeta'
- indigo: '#4b0082',
- ivory: '#fffff0',
- khaki: '#f0e68c',
- lavender: '#e6e6fa',
- lavenderblush: '#fff0f5',
- lawngreen: '#7cfc00',
- 'background-color',
- lightblue: '#add8e6',
+
- 'background-color',
import { State } from './state'
+ 'border-top-color',
- lightcyan: '#e0ffff',
- 'background-color',
- lightgray: '#d3d3d3',
- lightgreen: '#90ee90',
- lightgrey: '#d3d3d3',
- lightpink: '#ffb6c1',
- lightsalmon: '#ffa07a',
+import { State } from './state'
const dlv = require('dlv')
- lightskyblue: '#87cefa',
+import { State } from './state'
- 'border-color',
import { State } from './state'
const dlv = require('dlv')
import removeMeta from './removeMeta'
+import { State } from './state'
const dlv = require('dlv')
+import { State } from './state'
const dlv = require('dlv')
const COLOR_PROPS = [
+import { State } from './state'
const dlv = require('dlv')
'caret-color',
+import { State } from './state'
const dlv = require('dlv')
'color',
const dlv = require('dlv')
'column-rule-color',
- magenta: '#f0f',
- maroon: '#800000',
+ 'color',
- mediumaquamarine: '#66cdaa',
+
- 'border-top-color',
import { State } from './state'
const dlv = require('dlv')
- 'border-bottom-color',
+ 'column-rule-color',
- 'border-top-color',
- mediumseagreen: '#3cb371',
- mediumslateblue: '#7b68ee',
- mediumspringgreen: '#00fa9a',
- mediumturquoise: '#48d1cc',
-const dlv = require('dlv')
+import { State } from './state'
'text-decoration-color',
-const dlv = require('dlv')
+import { State } from './state'
]
const dlv = require('dlv')
+ 'background-color',
import { State } from './state'
-const dlv = require('dlv')
+
-const dlv = require('dlv')
transparent: 'rgba(0, 0, 0, 0.01)',
const dlv = require('dlv')
- aliceblue: '#f0f8ff',
-const dlv = require('dlv')
import { State } from './state'
-
-const dlv = require('dlv')
+import { State } from './state'
import { State } from './state'
-const COLOR_PROPS = [
-const dlv = require('dlv')
import { State } from './state'
- 'caret-color',
const dlv = require('dlv')
-import { State } from './state'
'color',
const dlv = require('dlv')
-import { State } from './state'
'column-rule-color',
- orange: '#ffa500',
+ 'color',
- orangered: '#ff4500',
- orchid: '#da70d6',
+
- 'border-bottom-color',
+import { State } from './state'
import { State } from './state'
- 'border-bottom-color',
import removeMeta from './removeMeta'
- 'border-bottom-color',
+ transparent: 'rgba(0, 0, 0, 0.01)',
- 'border-bottom-color',
+ transparent: 'rgba(0, 0, 0, 0.01)',
const COLOR_PROPS = [
- papayawhip: '#ffefd5',
+import { State } from './state'
const dlv = require('dlv')
-import removeMeta from './removeMeta'
'color',
const dlv = require('dlv')
-import removeMeta from './removeMeta'
'column-rule-color',
- pink: '#ffc0cb',
+ 'color',
-const dlv = require('dlv')
- powderblue: '#b0e0e6',
- 'border-left-color',
import { State } from './state'
- rebeccapurple: '#663399',
- red: '#f00',
- rosybrown: '#bc8f8f',
- 'border-left-color',
+import { State } from './state'
'caret-color',
const dlv = require('dlv')
-
'color',
+import { State } from './state'
-const dlv = require('dlv')
- 'column-rule-color',
- sandybrown: '#f4a460',
- 'fill',
+import { State } from './state'
- seashell: '#fff5ee',
+
- 'fill',
import { State } from './state'
- silver: '#c0c0c0',
+ azure: '#f0ffff',
- skyblue: '#87ceeb',
- slateblue: '#6a5acd',
+ return 'rgba(0, 0, 0, 0.01)'
const dlv = require('dlv')
- darkred: '#8b0000',
- 'fill',
+ 'column-rule-color',
'color',
- snow: '#fffafa',
- 'fill',
+ transparent: 'rgba(0, 0, 0, 0.01)',
'background-color',
- 'outline-color',
+ aliceblue: '#f0f8ff',
- tan: '#d2b48c',
- 'outline-color',
import { State } from './state'
- 'outline-color',
import removeMeta from './removeMeta'
const dlv = require('dlv')
- deeppink: '#ff1493',
const dlv = require('dlv')
- deepskyblue: '#00bfff',
- violet: '#ee82ee',
- wheat: '#f5deb3',
- 'outline-color',
'column-rule-color',
- whitesmoke: '#f5f5f5',
-const dlv = require('dlv')
'color',
- yellowgreen: '#9acd32',
+ return null
}
- 'stop-color',
+import { State } from './state'
import removeMeta from './removeMeta'
- state: State,
- keys: string[]
-): { documentation?: string } {
- const item = dlv(state.classNames.classNames, keys)
+import removeMeta from './removeMeta'
-const dlv = require('dlv')
+ transparent: 'rgba(0, 0, 0, 0.01)',
'color',
- 'column-rule-color',
- const props = Object.keys(removeMeta(item))
- const nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
- if (nonCustomProps.length !== 1) return null
- 'stroke',
import { State } from './state'
- 'stroke',
import removeMeta from './removeMeta'
-
- 'stroke',
'stroke',
-const COLOR_PROPS = [
- return { documentation: namedColor }
- 'stroke',
'color',
// matches: rgba(<r>, <g>, <b>, var(--bg-opacity))
// TODO: support other formats? e.g. hsla, css level 4
- const match = item[prop].match(
- /^\s*rgba\(\s*(?<r>[0-9]{1,3})\s*,\s*(?<g>[0-9]{1,3})\s*,\s*(?<b>[0-9]{1,3})\s*,\s*var/
- 'text-decoration-color',
import { State } from './state'
- 'text-decoration-color',
import removeMeta from './removeMeta'
- return {
- 'text-decoration-color',
const COLOR_PROPS = [
'text-decoration-color',
- 'caret-color',
const dlv = require('dlv')
- lavender: '#e6e6fa',
-
'text-decoration-color',
- 'color',
- 'stop-color',
import { State } from './state'
'text-decoration-color',
- 'column-rule-color',
- return (
+import removeMeta from './removeMeta'
import { State } from './state'
+ burntsienna: '#ea7e5d',
import { State } from './state'
-const dlv = require('dlv')
+ cadetblue: '#5f9ea0',
import { State } from './state'
-import { State } from './state'
+ chartreuse: '#7fff00',
import { State } from './state'
import removeMeta from './removeMeta'
+ 'background-color',
- 'text-decoration-color',
import { State } from './state'
+ coral: '#ff7f50',
const dlv = require('dlv')
+ 'column-rule-color',
'color',
-import { State } from './state'
import { State } from './state'
- if (isColor(str)) {
- return str
const dlv = require('dlv')
- lavender: '#e6e6fa',
- return COLOR_NAMES[str] || null
}