diff --git a/js-api-spec/value/color/color-4-channels.test.ts b/js-api-spec/value/color/color-4-channels.test.ts index ac0e3dc85..9bcdee6b9 100644 --- a/js-api-spec/value/color/color-4-channels.test.ts +++ b/js-api-spec/value/color/color-4-channels.test.ts @@ -10,7 +10,6 @@ import {List} from 'immutable'; import {spaces} from './spaces'; import {channelCases, channelNames} from './utils'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -161,148 +160,171 @@ describe('Color 4 SassColor Channels', () => { }); }); - // TODO(sass#3654) Failing in dart-sass pending: - // https://github.com/sass/sass/issues/3654 - skipForImpl('dart-sass', () => { + if (!['hsl', 'hwb', 'lch', 'oklch'].includes(spaceId)) { describe('isChannelPowerless', () => { - function checkPowerless( - _color: SassColor, - powerless = [false, false, false] - ) { - it(`channels ${_color.channels.toArray()} is ${powerless}`, () => { - expect(_color.isChannelPowerless(space.channels[0])).toBe( - powerless[0] - ); - expect(_color.isChannelPowerless(space.channels[1])).toBe( - powerless[1] - ); - expect(_color.isChannelPowerless(space.channels[2])).toBe( - powerless[2] - ); - }); - } - const [ch1, ch2, ch3] = space.ranges; - if (space.hasPowerless) { - // test powerless channels - switch (space.name) { - case 'hwb': - // If the combined `whiteness` and `blackness` values (after - // normalization) are equal to `100%`, then the `hue` channel is - // powerless. - checkPowerless(space.constructor(ch1[0], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 50, 50), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 50, 50), [ - true, - false, - false, - ]); + const [range1, range2, range3] = space.ranges; + checkPowerless(space.constructor(range1[0], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[0], range3[1])); + checkPowerless(space.constructor(range1[1], range2[0], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[0])); + }); + } + }); + }); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); + describe('isChannelPowerless', () => { + describe('for HWB', () => { + // If the combined `whiteness + blackness` is great than or equal to + // `100%`, then the `hue` channel is powerless. + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 100, blackness: 0, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 50, blackness: 50, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 60, blackness: 60, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -100, blackness: 200, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 200, blackness: -100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); - break; + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 49, blackness: 50, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -1, blackness: 100, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + }); - case 'hsl': - // hsl- If the saturation of an HSL color is 0%, then the hue component is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - true, - false, - false, - ]); + describe('for HSL', () => { + // If the saturation of an HSL color is 0%, then the hue component is + // powerless. + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 100, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 0, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 0, space: 'hsl'}) + ); + }); - case 'lch': - case 'oklch': - // (ok)lch- If the `chroma` value is 0%, then the `hue` channel is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - false, - false, - true, - ]); + describe('for LCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'lch'}) + ); + }); - default: - throw new Error( - `Unimplemented isPowerless check for ${space.name}` - ); - } - } else { - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - } - }); - }); + describe('for OKLCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'oklch'}) + ); }); }); }); + +/** + * Creates a test that checks that the powerless channels in `color` match the + * expectation in `powerless`. + */ +function checkPowerless( + color: SassColor, + powerless = [false, false, false] +): void { + it(`${color}: ${powerless}`, () => { + const space = spaces[color.space]!; + expect(color.isChannelPowerless(space.channels[0])).toBe(powerless[0]); + expect(color.isChannelPowerless(space.channels[1])).toBe(powerless[1]); + expect(color.isChannelPowerless(space.channels[2])).toBe(powerless[2]); + }); +} diff --git a/js-api-spec/value/color/color-4-conversions.test.ts b/js-api-spec/value/color/color-4-conversions.test.ts index 2c6ffa6f5..0cbdfa525 100644 --- a/js-api-spec/value/color/color-4-conversions.test.ts +++ b/js-api-spec/value/color/color-4-conversions.test.ts @@ -11,7 +11,6 @@ import type { KnownColorSpace, } from 'sass'; -import {skipForImpl} from '../../utils'; import {spaces} from './spaces'; import {interpolations} from './interpolation-examples'; @@ -43,24 +42,16 @@ describe('Color 4 SassColors Conversions', () => { }); }); - // TODO: Waiting on new ColorJS release to fix `hue` interpolation: - // https://github.com/LeaVerou/color.js/pull/338 - skipForImpl('sass-embedded', () => { - // TODO: Failing in dart-sass because `hue` should be normalized to the - // [0, 360) range - skipForImpl('dart-sass', () => { - describe('interpolate', () => { - it('interpolates examples', () => { - const examples = interpolations[space.name]; - examples.forEach(([input, output]) => { - const res = color.interpolate(blue, { - weight: input.weight, - method: input.method as HueInterpolationMethod, - }); - const outputColor = space.constructor(...output); - expect(res).toLooselyEqualColor(outputColor); - }); + describe('interpolate', () => { + it('interpolates examples', () => { + const examples = interpolations[space.name]; + examples.forEach(([input, output]) => { + const res = color.interpolate(blue, { + weight: input.weight, + method: input.method as HueInterpolationMethod, }); + const outputColor = space.constructor(...output); + expect(res).toLooselyEqualColor(outputColor); }); }); }); @@ -118,6 +109,47 @@ describe('Color 4 SassColors Conversions', () => { ).toLooselyEqualColor(space.constructor(...space.pink, null)); }); + describe('allows out-of-range channel values', () => { + const baseColor = space.constructor( + (space.ranges[0][0] + space.ranges[0][1]) / 2, + (space.ranges[1][0] + space.ranges[1][1]) / 2, + (space.ranges[2][0] + space.ranges[2][1]) / 2 + ); + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = baseColor.change({[channel]: aboveRange}); + const below = baseColor.change({[channel]: belowRange}); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual( + (baseColor.channels.get(0) + 180) % 360 + ); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual( + (baseColor.channels.get(2) + 180) % 360 + ); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } + }); + } + }); + spaceNames.forEach(destinationSpaceId => { it(`changes all channels with space set to ${destinationSpaceId}`, () => { const destinationSpace = spaces[destinationSpaceId]; @@ -153,23 +185,6 @@ describe('Color 4 SassColors Conversions', () => { expect(() => color.change({alpha: -1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - expect(() => color.change({lightness: -1})).toThrow(); - }); - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const lightness = space.ranges[index][1] + 1; - expect(() => color.change({lightness})).toThrow(); - }); - }); - }); - } }); describe('isInGamut', () => { diff --git a/js-api-spec/value/color/color-4-spaces.test.ts b/js-api-spec/value/color/color-4-spaces.test.ts index b83e9c2f7..5faad02b6 100644 --- a/js-api-spec/value/color/color-4-spaces.test.ts +++ b/js-api-spec/value/color/color-4-spaces.test.ts @@ -8,7 +8,6 @@ import {Value, SassColor} from 'sass'; import type {KnownColorSpace} from 'sass'; import {spaces} from './spaces'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -42,42 +41,58 @@ describe('Color 4 SassColors Spaces', () => { expect(() => color.assertString()).toThrow(); }); - describe('validation on construction', () => { - it('throws on invalid alpha', () => { - expect(() => { - space.constructor(...space.pink, -1); - }).toThrow(); - expect(() => { - space.constructor(...space.pink, 1.1); - }).toThrow(); - }); - - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = -1; - expect(() => space.constructor(...channels)).toThrow(); - }); - - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = space.ranges[index][1] + 1; - expect(() => space.constructor(...channels)).toThrow(); - }); - }); + describe('allows out-of-range channel values', () => { + const average1 = (space.ranges[0][0] + space.ranges[0][1]) / 2; + const average2 = (space.ranges[1][0] + space.ranges[1][1]) / 2; + const average3 = (space.ranges[2][0] + space.ranges[2][1]) / 2; + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = space.constructor( + i === 0 ? aboveRange : average1, + i === 1 ? aboveRange : average2, + i === 2 ? aboveRange : average3 + ); + const below = space.constructor( + i === 0 ? belowRange : average1, + i === 1 ? belowRange : average2, + i === 2 ? belowRange : average3 + ); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual((average1 + 180) % 360); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual((average3 + 180) % 360); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } }); } }); + it('throws on invalid alpha', () => { + expect(() => { + space.constructor(...space.pink, -1); + }).toThrow(); + expect(() => { + space.constructor(...space.pink, 1.1); + }).toThrow(); + }); + it(`returns name for ${space.name}`, () => { expect(color.space).toBe(space.name); }); diff --git a/js-api-spec/value/color/legacy.test.ts b/js-api-spec/value/color/legacy.test.ts index b07e420fc..a64484973 100644 --- a/js-api-spec/value/color/legacy.test.ts +++ b/js-api-spec/value/color/legacy.test.ts @@ -3,7 +3,7 @@ // https://opensource.org/licenses/MIT. import {Value, SassColor} from 'sass'; -import {captureStdio, skipForImpl} from '../../utils'; +import {captureStdio} from '../../utils'; import {legacyRGB, legacyHsl, legacyHwb} from './constructors'; describe('Legacy SassColor', () => { @@ -46,7 +46,7 @@ describe('Legacy SassColor', () => { expect(() => legacyRGB(0, 0, 0, 1.1)).toThrow(); }); - it('allows out of range values which were invalid before color 4', () => { + it('allows out-of-gamut values which were invalid before color 4', () => { expect(() => legacyRGB(-1, 0, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, -1, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, 0, -1, 0)).not.toThrow(); @@ -71,18 +71,21 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1, alpha: undefined}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -95,6 +98,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -111,20 +115,17 @@ describe('Legacy SassColor', () => { }); describe('hsl()', () => { - // TODO: Failing in dart-sass because saturation should not be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { - expect(() => legacyHsl(0, 0, -0.1, 0)).toThrow(); + it('disallows invalid alpha values', () => { expect(() => legacyHsl(0, 0, 0, -0.1)).toThrow(); - expect(() => legacyHsl(0, 0, 100.1, 0)).toThrow(); expect(() => legacyHsl(0, 0, 0, 1.1)).toThrow(); }); @@ -135,6 +136,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -146,12 +148,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, saturation: 1, lightness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -164,6 +168,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -180,20 +185,16 @@ describe('Legacy SassColor', () => { }); describe('hwb()', () => { - // TODO: Failing in dart-sass because whiteness and blackness should not - // be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); - expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { + it('disallows invalid alpha values', () => { expect(() => legacyHwb(0, 0, 0, -0.1)).toThrow(); expect(() => legacyHwb(0, 0, 0, 1.1)).toThrow(); }); @@ -205,6 +206,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -216,12 +218,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, whiteness: 1, blackness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -234,6 +238,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -335,16 +340,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(62, 152, 62)); - expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); - expect(color).toEqualWithHash( - legacyHwb(120, 24.313725490196077, 40.3921568627451) - ); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(62.118, 152.082, 62.118)); + expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); + expect(color).toEqualWithHash(legacyHwb(120, 24.36, 40.36)); }); it('allows negative hue', () => { @@ -390,14 +389,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(107, 148, 107)); - expect(color).toEqualWithHash(legacyHsl(120, 16.078431372549026, 50)); - expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(107.1, 147.9, 107.1)); + expect(color).toEqualWithHash(legacyHsl(120, 16, 50)); + expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); }); it('allows negative hue', () => { @@ -412,6 +407,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes RGB values', () => { expect(color.change({red: 0})).toEqualWithHash(legacyRGB(0, 52, 86)); expect(color.change({green: 0})).toEqualWithHash(legacyRGB(18, 0, 86)); @@ -444,6 +440,7 @@ describe('Legacy SassColor', () => { expect(() => color.change({blue: -1})).not.toThrow(); expect(() => color.change({blue: 256})).not.toThrow(); }); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); @@ -457,6 +454,7 @@ describe('Legacy SassColor', () => { color.change({red: -0.1, green: 50.5, blue: 90.9}).channels ).toFuzzyEqualList([-0.1, 50.5, 90.9]); }); + it('emits deprecation for null values', () => { const stdio = captureStdio(() => { color.change({red: null}); @@ -469,6 +467,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`green: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blue: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({hue: 1}); @@ -482,6 +481,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHsl(210, 65.3846153846154, 20.392156862745097); }); + it('changes HSL values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHsl(120, 65.3846153846154, 20.392156862745097) @@ -520,12 +520,12 @@ describe('Legacy SassColor', () => { expect(color.change({lightness: 100}).channel('lightness')).toBe(100); expect(color.change({alpha: 0}).alpha).toBe(0); expect(color.change({alpha: 1}).alpha).toBe(1); + expect(color.change({lightness: -0.1}).lightness).toBe(-0.1); + expect(color.change({lightness: 100.1}).lightness).toBe(100.1); expect(color.change({hue: undefined}).channel('hue')).toBe(210); }); - it('disallows invalid values', () => { - expect(() => color.change({lightness: -0.1})).toThrow(); - expect(() => color.change({lightness: 100.1})).toThrow(); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); @@ -542,6 +542,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`saturation: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`lightness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -555,6 +556,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHwb(210, 7.0588235294117645, 66.27450980392157); }); + it('changes HWB values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHwb(120, 7.0588235294117645, 66.27450980392157) @@ -611,6 +613,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`whiteness: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blackness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -624,6 +627,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes the alpha value', () => { expect(color.change({alpha: 0.5})).toEqualWithHash( legacyRGB(18, 52, 86, 0.5) diff --git a/js-api-spec/value/color/spaces.ts b/js-api-spec/value/color/spaces.ts index 33921eb6a..93d26ed70 100644 --- a/js-api-spec/value/color/spaces.ts +++ b/js-api-spec/value/color/spaces.ts @@ -141,7 +141,7 @@ export const spaces: { ], ], }, - srgbLinear: { + 'srgb-linear': { constructor: constructors.srgbLinear, name: 'srgb-linear', isLegacy: false, @@ -162,7 +162,7 @@ export const spaces: { ], ], }, - displayP3: { + 'display-p3': { constructor: constructors.displayP3, name: 'display-p3', isLegacy: false, @@ -183,7 +183,7 @@ export const spaces: { ], ], }, - a98Rgb: { + 'a98-rgb': { constructor: constructors.a98Rgb, name: 'a98-rgb', isLegacy: false, @@ -204,7 +204,7 @@ export const spaces: { ], ], }, - prophotoRgb: { + 'prophoto-rgb': { constructor: constructors.prophotoRgb, name: 'prophoto-rgb', isLegacy: false, @@ -267,7 +267,7 @@ export const spaces: { ], ], }, - xyzD50: { + 'xyz-d50': { constructor: constructors.xyzD50, name: 'xyz-d50', isLegacy: false, @@ -288,7 +288,7 @@ export const spaces: { ], ], }, - xyzD65: { + 'xyz-d65': { constructor: constructors.xyzD65, name: 'xyz', isLegacy: false, diff --git a/spec/core_functions/color/_utils.scss b/spec/core_functions/color/_utils.scss new file mode 100644 index 000000000..375c314cf --- /dev/null +++ b/spec/core_functions/color/_utils.scss @@ -0,0 +1,71 @@ +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:meta'; + +@function -real-channel($color, $channel) { + @if color.is-missing($color, $channel) { + @return none; + } @else { + @return color.channel($color, $channel); + } +} + +@mixin inspect($color) { + a { + value: $color; + @if meta.type-of($color) == string { + type: string; + } @else { + $space: color.space($color); + space: $space; + + @if $space == 'rgb' or $space == 'srgb' or $space == 'srgb-linear' or + $space == 'display-p3' or $space == 'a98-rgb' or + $space == 'prophoto-rgb' or $space == 'rec2020' { + channels: list.slash( + -real-channel($color, 'red') + -real-channel($color, 'green') + -real-channel($color, 'blue'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hwb' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'whiteness') + -real-channel($color, 'blackness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hsl' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'saturation') + -real-channel($color, 'lightness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'xyz' or $space == 'xyz-d50' { + channels: list.slash( + -real-channel($color, 'x') + -real-channel($color, 'y') + -real-channel($color, 'z'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lab' or $space == 'oklab' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'a') + -real-channel($color, 'b'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lch' or $space == 'oklch' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'chroma') + -real-channel($color, 'hue'), + -real-channel($color, 'alpha') + ); + } @else { + @error "Unknown color space #{$space}"; + } + } + } +} diff --git a/spec/core_functions/color/adjust_color/hsl.hrx b/spec/core_functions/color/adjust_color/hsl.hrx index 4bf9e26b1..d860a0810 100644 --- a/spec/core_functions/color/adjust_color/hsl.hrx +++ b/spec/core_functions/color/adjust_color/hsl.hrx @@ -63,7 +63,7 @@ a {b: adjust-color(plum, $saturation: 100%)} <===> saturation/max/output.css a { - b: #ff7eff; + b: hsl(300, 147.2868217054%, 74.7058823529%); } <===> @@ -73,7 +73,7 @@ a {b: adjust-color(plum, $saturation: 53%)} <===> saturation/max_remaining/output.css a { - b: #ff7eff; + b: hsl(300, 100.2868217054%, 74.7058823529%); } <===> @@ -133,7 +133,7 @@ a {b: adjust-color(red, $lightness: 100%)} <===> lightness/max/output.css a { - b: white; + b: hsl(0, 100%, 150%); } <===> @@ -173,7 +173,7 @@ a {b: adjust-color(red, $lightness: -100%)} <===> lightness/min/output.css a { - b: black; + b: hsl(0, 100%, -50%); } <===> diff --git a/spec/core_functions/color/adjust_color/hwb.hrx b/spec/core_functions/color/adjust_color/hwb.hrx index 625259ca9..4414f6741 100644 --- a/spec/core_functions/color/adjust_color/hwb.hrx +++ b/spec/core_functions/color/adjust_color/hwb.hrx @@ -3,7 +3,7 @@ a {b: adjust-color(#cc6666, $whiteness: 100%)} <===> whiteness/max/output.css a { - b: rgb(212.5, 212.5, 212.5); + b: rgb(223.125, 223.125, 223.125); } <===> @@ -33,7 +33,7 @@ a {b: adjust-color(#cc6666, $whiteness: -100%)} <===> whiteness/min/output.css a { - b: #cc0000; + b: hsl(0, 700%, 10%); } <===> @@ -73,7 +73,7 @@ a {b: adjust-color(#993333, $blackness: 100%)} <===> blackness/max/output.css a { - b: rgb(42.5, 42.5, 42.5); + b: rgb(31.875, 31.875, 31.875); } <===> @@ -103,7 +103,7 @@ a {b: adjust-color(#993333, $blackness: -100%)} <===> blackness/min/output.css a { - b: #ff3333; + b: hsl(0, 700%, 90%); } <===> diff --git a/spec/core_functions/color/change_color/error/type.hrx b/spec/core_functions/color/change_color/error/type.hrx index 96b045e32..11b12fe7a 100644 --- a/spec/core_functions/color/change_color/error/type.hrx +++ b/spec/core_functions/color/change_color/error/type.hrx @@ -15,7 +15,7 @@ Error: $color: 1 is not a color. a {b: change-color(red, $red: c)} <===> red/error -Error: $red: c is not a number. +Error: $red: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $red: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -28,7 +28,7 @@ Error: $red: c is not a number. a {b: change-color(red, $green: c)} <===> green/error -Error: $green: c is not a number. +Error: $green: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $green: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -41,7 +41,7 @@ Error: $green: c is not a number. a {b: change-color(red, $blue: c)} <===> blue/error -Error: $blue: c is not a number. +Error: $blue: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $blue: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -54,7 +54,7 @@ Error: $blue: c is not a number. a {b: change-color(red, $hue: c)} <===> hue/error -Error: $hue: c is not a number. +Error: $hue: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $hue: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -67,7 +67,7 @@ Error: $hue: c is not a number. a {b: change-color(red, $saturation: c)} <===> saturation/error -Error: $saturation: c is not a number. +Error: $saturation: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $saturation: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -80,7 +80,7 @@ Error: $saturation: c is not a number. a {b: change-color(red, $lightness: c)} <===> lightness/error -Error: $lightness: c is not a number. +Error: $lightness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $lightness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -106,7 +106,7 @@ Error: $alpha: c is not a number. a {b: change-color(red, $blackness: c)} <===> blackness/error -Error: $blackness: c is not a number. +Error: $blackness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $blackness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -119,10 +119,9 @@ Error: $blackness: c is not a number. a {b: change-color(red, $whiteness: c)} <===> whiteness/error -Error: $whiteness: c is not a number. +Error: $whiteness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $whiteness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet - diff --git a/spec/core_functions/color/color/_rgb-utils.scss b/spec/core_functions/color/color/_rgb-utils.scss deleted file mode 100644 index 266f54772..000000000 --- a/spec/core_functions/color/color/_rgb-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'red') - -real-channel($color, 'green') - -real-channel($color, 'blue'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/color/_xyz-utils.scss b/spec/core_functions/color/color/_xyz-utils.scss deleted file mode 100644 index 8290223bd..000000000 --- a/spec/core_functions/color/color/_xyz-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'x') - -real-channel($color, 'y') - -real-channel($color, 'z'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/color/alpha.hrx b/spec/core_functions/color/color/alpha.hrx index 3e672f825..b66231103 100644 --- a/spec/core_functions/color/color/alpha.hrx +++ b/spec/core_functions/color/color/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 0)); <===> transparent/output.css a { value: color(srgb 0.1 0.2 0.3 / 0); + space: srgb; channels: 0.1 0.2 0.3 / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 1)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 1)); <===> opaque/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0.4)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 0.4)); <===> partial/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 40%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 40%)); <===> percent/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3 / 0.4)); +@use 'core_functions/color/utils'; +@include utils.inspect(color($description: srgb 0.1 0.2 0.3 / 0.4)); <===> named/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, 0.4))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, 0.4))); <===> slash_list/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } <===> ================================================================================ <===> none/slash/blue/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 none / 0.4)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 none / 0.4)); <===> none/slash/blue/output.css a { value: color(srgb 0.1 0.2 none / 0.4); + space: srgb; channels: 0.1 0.2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / none)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / none)); <===> none/slash/alpha/output.css a { value: color(srgb 0.1 0.2 0.3 / none); + space: srgb; channels: 0.1 0.2 0.3 / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/blue/input.scss @use 'sass:list'; -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 none, 0.4))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 none, 0.4))); <===> none/slash_list/blue/output.css a { value: color(srgb 0.1 0.2 none / 0.4); + space: srgb; channels: 0.1 0.2 none / 0.4; } @@ -110,20 +119,21 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, none))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, none))); <===> none/slash_list/alpha/output.css a { value: color(srgb 0.1 0.2 0.3 / none); + space: srgb; channels: 0.1 0.2 0.3 / none; } <===> ================================================================================ <===> relative_color/slash/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(from #aaa srgb r g b / 25%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b / 25%)); <===> relative_color/slash/output.css a { @@ -135,8 +145,8 @@ a { ================================================================================ <===> relative_color/slash_list/input.scss @use 'sass:list'; -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(list.slash(from #aaa srgb r g b, 25%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(from #aaa srgb r g b, 25%))); <===> relative_color/slash_list/output.css a { diff --git a/spec/core_functions/color/color/no_alpha.hrx b/spec/core_functions/color/color/no_alpha.hrx index 218077126..f5318ef2d 100644 --- a/spec/core_functions/color/color/no_alpha.hrx +++ b/spec/core_functions/color/color/no_alpha.hrx @@ -1,54 +1,58 @@ <===> none/red/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb none 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb none 0.2 0.3)); <===> none/red/output.css a { value: color(srgb none 0.2 0.3); + space: srgb; channels: none 0.2 0.3 / 1; } <===> ================================================================================ <===> none/green/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/green/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } <===> ================================================================================ <===> none/blue/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/blue/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } <===> ================================================================================ <===> case/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(sRGB 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(sRGB 0.1 none 0.3)); <===> case/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } <===> ================================================================================ <===> relative_color/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(from #aaa srgb r g b)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b)); <===> relative_color/output.css a { @@ -59,11 +63,12 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color($description: srgb 0.1 0.2 0.3)); <===> named/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/a98_rgb.hrx b/spec/core_functions/color/color/spaces/a98_rgb.hrx index 2c073216f..877efcd52 100644 --- a/spec/core_functions/color/color/spaces/a98_rgb.hrx +++ b/spec/core_functions/color/color/spaces/a98_rgb.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(a98-rgb 0.1 0.2 0.3); + space: a98-rgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(a98-rgb 1.1 0.2 0.3); + space: a98-rgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(a98-rgb -0.1 0.2 0.3); + space: a98-rgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(a98-rgb 0.1 1.2 0.3); + space: a98-rgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(a98-rgb 0.1 -0.2 0.3); + space: a98-rgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(a98-rgb 0.1 0.2 1.3); + space: a98-rgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(a98-rgb 0.1 0.2 -0.3); + space: a98-rgb; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(a98-rgb 0.1 0.2 0.3); + space: a98-rgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(a98-rgb 1.1 0.2 0.3); + space: a98-rgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(a98-rgb -0.1 0.2 0.3); + space: a98-rgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(a98-rgb 0.1 1.2 0.3); + space: a98-rgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(a98-rgb 0.1 -0.2 0.3); + space: a98-rgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(a98-rgb 0.1 0.2 1.3); + space: a98-rgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(a98-rgb 0.1 0.2 -0.3); + space: a98-rgb; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/display_p3.hrx b/spec/core_functions/color/color/spaces/display_p3.hrx index a7ae00505..91c495833 100644 --- a/spec/core_functions/color/color/spaces/display_p3.hrx +++ b/spec/core_functions/color/color/spaces/display_p3.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(display-p3 0.1 0.2 0.3); + space: display-p3; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(display-p3 1.1 0.2 0.3); + space: display-p3; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(display-p3 -0.1 0.2 0.3); + space: display-p3; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(display-p3 0.1 1.2 0.3); + space: display-p3; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(display-p3 0.1 -0.2 0.3); + space: display-p3; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(display-p3 0.1 0.2 1.3); + space: display-p3; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(display-p3 0.1 0.2 -0.3); + space: display-p3; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(display-p3 0.1 0.2 0.3); + space: display-p3; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(display-p3 1.1 0.2 0.3); + space: display-p3; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(display-p3 -0.1 0.2 0.3); + space: display-p3; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(display-p3 0.1 1.2 0.3); + space: display-p3; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(display-p3 0.1 -0.2 0.3); + space: display-p3; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(display-p3 0.1 0.2 1.3); + space: display-p3; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(display-p3 0.1 0.2 -0.3); + space: display-p3; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx index 080f28eb0..67750f549 100644 --- a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx +++ b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(prophoto-rgb 0.1 0.2 0.3); + space: prophoto-rgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(prophoto-rgb 1.1 0.2 0.3); + space: prophoto-rgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(prophoto-rgb -0.1 0.2 0.3); + space: prophoto-rgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(prophoto-rgb 0.1 1.2 0.3); + space: prophoto-rgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(prophoto-rgb 0.1 -0.2 0.3); + space: prophoto-rgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(prophoto-rgb 0.1 0.2 1.3); + space: prophoto-rgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(prophoto-rgb 0.1 0.2 -0.3); + space: prophoto-rgb; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(prophoto-rgb 0.1 0.2 0.3); + space: prophoto-rgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(prophoto-rgb 1.1 0.2 0.3); + space: prophoto-rgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(prophoto-rgb -0.1 0.2 0.3); + space: prophoto-rgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(prophoto-rgb 0.1 1.2 0.3); + space: prophoto-rgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(prophoto-rgb 0.1 -0.2 0.3); + space: prophoto-rgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(prophoto-rgb 0.1 0.2 1.3); + space: prophoto-rgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(prophoto-rgb 0.1 0.2 -0.3); + space: prophoto-rgb; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/rec2020.hrx b/spec/core_functions/color/color/spaces/rec2020.hrx index c5df2d5f1..097ea4665 100644 --- a/spec/core_functions/color/color/spaces/rec2020.hrx +++ b/spec/core_functions/color/color/spaces/rec2020.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(rec2020 0.1 0.2 0.3); + space: rec2020; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(rec2020 1.1 0.2 0.3); + space: rec2020; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(rec2020 -0.1 0.2 0.3); + space: rec2020; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(rec2020 0.1 1.2 0.3); + space: rec2020; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(rec2020 0.1 -0.2 0.3); + space: rec2020; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(rec2020 0.1 0.2 1.3); + space: rec2020; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(rec2020 0.1 0.2 -0.3); + space: rec2020; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(rec2020 0.1 0.2 0.3); + space: rec2020; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(rec2020 1.1 0.2 0.3); + space: rec2020; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(rec2020 -0.1 0.2 0.3); + space: rec2020; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(rec2020 0.1 1.2 0.3); + space: rec2020; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(rec2020 0.1 -0.2 0.3); + space: rec2020; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(rec2020 0.1 0.2 1.3); + space: rec2020; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(rec2020 0.1 0.2 -0.3); + space: rec2020; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/srgb.hrx b/spec/core_functions/color/color/spaces/srgb.hrx index 6f3ac5d2e..05e445a7f 100644 --- a/spec/core_functions/color/color/spaces/srgb.hrx +++ b/spec/core_functions/color/color/spaces/srgb.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(srgb 1.1 0.2 0.3); + space: srgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(srgb -0.1 0.2 0.3); + space: srgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(srgb 0.1 1.2 0.3); + space: srgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(srgb 0.1 -0.2 0.3); + space: srgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(srgb 0.1 0.2 1.3); + space: srgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(srgb 0.1 0.2 -0.3); + space: srgb; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(srgb 1.1 0.2 0.3); + space: srgb; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(srgb -0.1 0.2 0.3); + space: srgb; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(srgb 0.1 1.2 0.3); + space: srgb; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(srgb 0.1 -0.2 0.3); + space: srgb; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(srgb 0.1 0.2 1.3); + space: srgb; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(srgb 0.1 0.2 -0.3); + space: srgb; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/srgb_linear.hrx b/spec/core_functions/color/color/spaces/srgb_linear.hrx index 9bb3cea1c..395abf17b 100644 --- a/spec/core_functions/color/color/spaces/srgb_linear.hrx +++ b/spec/core_functions/color/color/spaces/srgb_linear.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(srgb-linear 0.1 0.2 0.3); + space: srgb-linear; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { value: color(srgb-linear 1.1 0.2 0.3); + space: srgb-linear; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { value: color(srgb-linear -0.1 0.2 0.3); + space: srgb-linear; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { value: color(srgb-linear 0.1 1.2 0.3); + space: srgb-linear; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { value: color(srgb-linear 0.1 -0.2 0.3); + space: srgb-linear; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { value: color(srgb-linear 0.1 0.2 1.3); + space: srgb-linear; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { value: color(srgb-linear 0.1 0.2 -0.3); + space: srgb-linear; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(srgb-linear 0.1 0.2 0.3); + space: srgb-linear; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { value: color(srgb-linear 1.1 0.2 0.3); + space: srgb-linear; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { value: color(srgb-linear -0.1 0.2 0.3); + space: srgb-linear; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { value: color(srgb-linear 0.1 1.2 0.3); + space: srgb-linear; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { value: color(srgb-linear 0.1 -0.2 0.3); + space: srgb-linear; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { value: color(srgb-linear 0.1 0.2 1.3); + space: srgb-linear; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { value: color(srgb-linear 0.1 0.2 -0.3); + space: srgb-linear; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/xyz.hrx b/spec/core_functions/color/color/spaces/xyz.hrx index 8970c4532..9dfe04af2 100644 --- a/spec/core_functions/color/color/spaces/xyz.hrx +++ b/spec/core_functions/color/color/spaces/xyz.hrx @@ -1,177 +1,192 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/x/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 1.1 0.2 0.3)); <===> unitless/x/above_range/output.css a { value: color(xyz 1.1 0.2 0.3); + space: xyz; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/x/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz -0.1 0.2 0.3)); <===> unitless/x/below_range/output.css a { value: color(xyz -0.1 0.2 0.3); + space: xyz; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/y/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 1.2 0.3)); <===> unitless/y/above_range/output.css a { value: color(xyz 0.1 1.2 0.3); + space: xyz; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/y/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 -0.2 0.3)); <===> unitless/y/below_range/output.css a { value: color(xyz 0.1 -0.2 0.3); + space: xyz; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/z/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 1.3)); <===> unitless/z/above_range/output.css a { value: color(xyz 0.1 0.2 1.3); + space: xyz; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/z/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 -0.3)); <===> unitless/z/below_range/output.css a { value: color(xyz 0.1 0.2 -0.3); + space: xyz; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/x/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 110% 0.2 0.3)); <===> percent/x/above_range/output.css a { value: color(xyz 1.1 0.2 0.3); + space: xyz; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/x/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz -10% 0.2 0.3)); <===> percent/x/below_range/output.css a { value: color(xyz -0.1 0.2 0.3); + space: xyz; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/y/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 120% 0.3)); <===> percent/y/above_range/output.css a { value: color(xyz 0.1 1.2 0.3); + space: xyz; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/y/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 -20% 0.3)); <===> percent/y/below_range/output.css a { value: color(xyz 0.1 -0.2 0.3); + space: xyz; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/z/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 130%)); <===> percent/z/above_range/output.css a { value: color(xyz 0.1 0.2 1.3); + space: xyz; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/z/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 -30%)); <===> percent/z/below_range/output.css a { value: color(xyz 0.1 0.2 -0.3); + space: xyz; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> xyz_d65/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d65 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d65 0.1 0.2 0.3)); <===> xyz_d65/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; channels: 0.1 0.2 0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/xyz_d50.hrx b/spec/core_functions/color/color/spaces/xyz_d50.hrx index f836ab16f..3357106e0 100644 --- a/spec/core_functions/color/color/spaces/xyz_d50.hrx +++ b/spec/core_functions/color/color/spaces/xyz_d50.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { value: color(xyz-d50 0.1 0.2 0.3); + space: xyz-d50; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/x/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 1.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 1.1 0.2 0.3)); <===> unitless/x/above_range/output.css a { value: color(xyz-d50 1.1 0.2 0.3); + space: xyz-d50; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/x/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 -0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 -0.1 0.2 0.3)); <===> unitless/x/below_range/output.css a { value: color(xyz-d50 -0.1 0.2 0.3); + space: xyz-d50; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/y/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 1.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 1.2 0.3)); <===> unitless/y/above_range/output.css a { value: color(xyz-d50 0.1 1.2 0.3); + space: xyz-d50; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> unitless/y/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 -0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 -0.2 0.3)); <===> unitless/y/below_range/output.css a { value: color(xyz-d50 0.1 -0.2 0.3); + space: xyz-d50; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> unitless/z/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 1.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 1.3)); <===> unitless/z/above_range/output.css a { value: color(xyz-d50 0.1 0.2 1.3); + space: xyz-d50; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> unitless/z/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 -0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 -0.3)); <===> unitless/z/below_range/output.css a { value: color(xyz-d50 0.1 0.2 -0.3); + space: xyz-d50; channels: 0.1 0.2 -0.3 / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(xyz-d50 0.1 0.2 0.3); + space: xyz-d50; channels: 0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/x/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 110% 0.2 0.3)); <===> percent/x/above_range/output.css a { value: color(xyz-d50 1.1 0.2 0.3); + space: xyz-d50; channels: 1.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/x/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 -10% 0.2 0.3)); <===> percent/x/below_range/output.css a { value: color(xyz-d50 -0.1 0.2 0.3); + space: xyz-d50; channels: -0.1 0.2 0.3 / 1; } <===> ================================================================================ <===> percent/y/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 120% 0.3)); <===> percent/y/above_range/output.css a { value: color(xyz-d50 0.1 1.2 0.3); + space: xyz-d50; channels: 0.1 1.2 0.3 / 1; } <===> ================================================================================ <===> percent/y/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 -20% 0.3)); <===> percent/y/below_range/output.css a { value: color(xyz-d50 0.1 -0.2 0.3); + space: xyz-d50; channels: 0.1 -0.2 0.3 / 1; } <===> ================================================================================ <===> percent/z/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 130%)); <===> percent/z/above_range/output.css a { value: color(xyz-d50 0.1 0.2 1.3); + space: xyz-d50; channels: 0.1 0.2 1.3 / 1; } <===> ================================================================================ <===> percent/z/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 -30%)); <===> percent/z/below_range/output.css a { value: color(xyz-d50 0.1 0.2 -0.3); + space: xyz-d50; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/color/special_functions.hrx b/spec/core_functions/color/color/special_functions.hrx index c93bb051e..064c758ba 100644 --- a/spec/core_functions/color/color/special_functions.hrx +++ b/spec/core_functions/color/color/special_functions.hrx @@ -1,6 +1,6 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb calc(1px + 1%) 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb calc(1px + 1%) 0.2 0.3)); <===> calculation/arg_1/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 calc(1px + 1%) 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 calc(1px + 1%) 0.3)); <===> calculation/arg_2/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 calc(1px + 1%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / calc(1px + 1%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / calc(1px + 1%))); <===> calculation/arg_4/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo) 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.2 0.3)); <===> var/arg_1/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 var(--foo) 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo) 0.3)); <===> var/arg_2/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 var(--foo))); <===> var/arg_3/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / var(--foo))); <===> var/arg_4/output.css a { @@ -96,8 +96,8 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo) 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.3)); <===> multi_argument_var/1_of_2/output.css a { @@ -108,8 +108,8 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo))); <===> multi_argument_var/2_of_2/output.css a { @@ -120,8 +120,8 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css a { @@ -132,8 +132,8 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo) / 0.4)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css a { diff --git a/spec/core_functions/color/grayscale.hrx b/spec/core_functions/color/grayscale.hrx index ac29702ae..604112db9 100644 --- a/spec/core_functions/color/grayscale.hrx +++ b/spec/core_functions/color/grayscale.hrx @@ -94,7 +94,7 @@ a {b: grayscale(lch(54.3 107 40.9))} <===> non_legacy/polar/output.css a { - b: lch(56.854581217% 0.0000089094 270.4698997617deg); + b: lch(56.854581217% 0.0000089094 270.4699001175deg); } <===> diff --git a/spec/core_functions/color/hsl/four_args/clamped.hrx b/spec/core_functions/color/hsl/four_args/clamped.hrx index c4aa155fa..85a62b65d 100644 --- a/spec/core_functions/color/hsl/four_args/clamped.hrx +++ b/spec/core_functions/color/hsl/four_args/clamped.hrx @@ -18,7 +18,7 @@ a {b: hsl(0, 100%, 9999%, 0.5)} <===> blue/output.css a { - b: hsla(0, 100%, 100%, 0.5); + b: hsla(0, 100%, 9999%, 0.5); } <===> diff --git a/spec/core_functions/color/hsl/one_arg/alpha.hrx b/spec/core_functions/color/hsl/one_arg/alpha.hrx index 2b23c7d42..ebd8fcc6f 100644 --- a/spec/core_functions/color/hsl/one_arg/alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/alpha.hrx @@ -64,7 +64,7 @@ a {b: hsl(0 100% 9999% / 0.5)} <===> clamped/lightness/output.css a { - b: hsla(0, 100%, 100%, 0.5); + b: hsla(0, 100%, 9999%, 0.5); } <===> diff --git a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx index e175a51c1..a7f5257f7 100644 --- a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -28,12 +28,12 @@ a { <===> ================================================================================ -<===> clamped/saturation/above/input.scss +<===> out_of_gamut/saturation/above/input.scss a {b: hsl(0 500% 50%)} -<===> clamped/saturation/above/output.css +<===> out_of_gamut/saturation/above/output.css a { - b: hsl(0, 100%, 50%); + b: hsl(0, 500%, 50%); } <===> @@ -53,7 +53,7 @@ a {b: hsl(0 100% 500%)} <===> clamped/lightness/above/output.css a { - b: hsl(0, 100%, 100%); + b: hsl(0, 100%, 500%); } <===> @@ -63,7 +63,7 @@ a {b: hsl(0 100% -100%)} <===> clamped/lightness/below/output.css a { - b: hsl(0, 100%, 0%); + b: hsl(0, 100%, -100%); } <===> diff --git a/spec/core_functions/color/hsl/three_args/clamped.hrx b/spec/core_functions/color/hsl/three_args/clamped.hrx index 722b8f6e8..308a32fbb 100644 --- a/spec/core_functions/color/hsl/three_args/clamped.hrx +++ b/spec/core_functions/color/hsl/three_args/clamped.hrx @@ -1,16 +1,6 @@ <===> README.md The W3C tests cover clamped hue, but not clamped saturation or lightness. -<===> -================================================================================ -<===> saturation/above/input.scss -a {b: hsl(0, 500%, 50%)} - -<===> saturation/above/output.css -a { - b: hsl(0, 100%, 50%); -} - <===> ================================================================================ <===> saturation/below/input.scss @@ -28,7 +18,7 @@ a {b: hsl(0, 100%, 500%)} <===> lightness/above/output.css a { - b: hsl(0, 100%, 100%); + b: hsl(0, 100%, 500%); } <===> @@ -38,5 +28,5 @@ a {b: hsl(0, 100%, -100%)} <===> lightness/below/output.css a { - b: hsl(0, 100%, 0%); + b: hsl(0, 100%, -100%); } diff --git a/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx new file mode 100644 index 000000000..bed3d2b75 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx @@ -0,0 +1,12 @@ +<===> saturation/above/input.scss +a {b: hsl(0, 500%, 50%)} + +<===> saturation/above/output.css +a { + b: hsl(0, 500%, 50%); +} + +<===> saturation/above/output-libsass.css +a { + b: red; +} diff --git a/spec/core_functions/color/is_in_gamut.hrx b/spec/core_functions/color/is_in_gamut.hrx index af99008df..93ff599d7 100644 --- a/spec/core_functions/color/is_in_gamut.hrx +++ b/spec/core_functions/color/is_in_gamut.hrx @@ -1,6 +1,6 @@ <===> rgb/input.scss @use "sass:color"; -a {b: color.is-in-gamut(rgb(0 300 0))} +a {b: color.is-in-gamut(color.change(black, $green: 300))} <===> rgb/output.css a { @@ -11,7 +11,7 @@ a { ================================================================================ <===> rgba/input.scss @use "sass:color"; -a {b: color.is-in-gamut(rgba(-1 122 180 / 0.4))} +a {b: color.is-in-gamut(color.change(rgba(0 122 180 / 0.4), $red: -1))} <===> rgba/output.css a { @@ -22,11 +22,11 @@ a { ================================================================================ <===> hwb/input.scss @use "sass:color"; -a {b: color.is-in-gamut(hwb(0 300% 0%))} +a {b: color.is-in-gamut(hwb(0 300% -1%))} <===> hwb/output.css a { - b: true; + b: false; } <===> @@ -37,7 +37,7 @@ a {b: color.is-in-gamut(hsl(0 0% -1%))} <===> hsl/output.css a { - b: true; + b: false; } <===> @@ -235,7 +235,7 @@ a {b: color.is-in-gamut(color(display-p3 1 1 0), hwb)} <===> wide_narrow/output.css a { - b: true; + b: false; } <===> diff --git a/spec/core_functions/color/lab/_utils.scss b/spec/core_functions/color/lab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/lab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'lightness') - -real-channel($color, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/lab/alpha.hrx b/spec/core_functions/color/lab/alpha.hrx index bdb10dcb9..cff840012 100644 --- a/spec/core_functions/color/lab/alpha.hrx +++ b/spec/core_functions/color/lab/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(0 255 127 / 0)); <===> transparent/output.css a { value: lab(0% 255 127 / 0); + space: lab; channels: 0% 255 127 / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 1)); <===> opaque/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 0.4)); <===> partial/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 40%)); <===> percent/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3 / 0.4)); <===> named/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -60,48 +65,52 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / 0.4)); <===> none/slash/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / none)); <===> none/slash/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } <===> ================================================================================ <===> none/slash/b_and_alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / none)); <===> none/slash/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } @@ -109,12 +118,13 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } @@ -122,12 +132,13 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } @@ -135,11 +146,12 @@ a { ================================================================================ <===> none/slash_list/b_and_alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, none))); <===> none/slash_list/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } diff --git a/spec/core_functions/color/lab/no_alpha.hrx b/spec/core_functions/color/lab/no_alpha.hrx index 69e193f4e..39d71357f 100644 --- a/spec/core_functions/color/lab/no_alpha.hrx +++ b/spec/core_functions/color/lab/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 -3)); <===> unitless/ab/in_range/output.css a { value: lab(1% 2 -3); + space: lab; channels: 1% 2 -3 / 1; } <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 126 300)); <===> unitless/ab/above_range/output.css a { value: lab(1% 126 300); + space: lab; channels: 1% 126 300 / 1; } <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -126 -300)); <===> unitless/ab/below_range/output.css a { value: lab(1% -126 -300); + space: lab; channels: 1% -126 -300 / 1; } <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(10 2 -3)); <===> unitless/lightness/in_range/output.css a { value: lab(10% 2 -3); + space: lab; channels: 10% 2 -3 / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(101 2 3)); <===> unitless/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1 2 3)); <===> unitless/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/ab/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 101% 150%)); <===> percent/ab/above_range/output.css a { value: lab(1% 126.25 187.5); + space: lab; channels: 1% 126.25 187.5 / 1; } <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -101% -150%)); <===> percent/ab/below_range/output.css a { value: lab(1% -126.25 -187.5); + space: lab; channels: 1% -126.25 -187.5 / 1; } <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/lightness/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(110% 2 3)); <===> percent/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1% 2 3)); <===> percent/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(none 2 3)); <===> none/lightness/output.css a { value: lab(none 2 3); + space: lab; channels: none 2 3 / 1; } <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% none 3)); <===> none/a/output.css a { value: lab(1% none 3); + space: lab; channels: 1% none 3 / 1; } <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none)); <===> none/b/output.css a { value: lab(1% 2 none); + space: lab; channels: 1% 2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3)); <===> named/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/lab/special_functions/alpha.hrx b/spec/core_functions/color/lab/special_functions/alpha.hrx index 85837f597..081d164f8 100644 --- a/spec/core_functions/color/lab/special_functions/alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3 / 0.4)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3 / 0.4)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)") / 0.4)); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("calc(0.4)"))); <===> calc/string/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3 / 0.4)); <===> calc/calculation/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3 / 0.4)); <===> calc/calculation/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%) / 0.4)); <===> calc/calculation/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / calc(1px + 1%))); <===> calc/calculation/arg_4/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3 / 0.4)); <===> var/arg_1/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3 / 0.4)); <===> var/arg_2/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo) / 0.4)); <===> var/arg_3/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3 / 0.4)); <===> env/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3 / 0.4)); <===> env/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo) / 0.4)); <===> env/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> env/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / env(--foo))); <===> env/arg_4/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3 / 0.4)); <===> min/string/arg_1/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3 / 0.4)); <===> min/string/arg_2/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)") / 0.4)); <===> min/string/arg_3/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> min/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("min(0.4)"))); <===> min/string/arg_4/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3 / 0.4)); <===> max/string/arg_1/output.css @@ -251,7 +251,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3 / 0.4)); <===> max/string/arg_2/output.css @@ -263,7 +263,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)") / 0.4)); <===> max/string/arg_3/output.css @@ -275,7 +275,7 @@ a { <===> ================================================================================ <===> max/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("max(0.4)"))); <===> max/string/arg_4/output.css @@ -287,7 +287,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3 / 0.4)); <===> clamp/string/arg_1/output.css @@ -299,7 +299,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3 / 0.4)); <===> clamp/string/arg_2/output.css @@ -311,7 +311,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)") / 0.4)); <===> clamp/string/arg_3/output.css @@ -323,7 +323,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("clamp(0.4, 0.5, 0.6)"))); <===> clamp/string/arg_4/output.css @@ -335,7 +335,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / 0.4)); <===> unknown/arg_3/with_number/output.css @@ -347,7 +347,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / none)); <===> unknown/arg_3/with_none/output.css @@ -359,7 +359,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / b)); <===> unknown/arg_4/with_number/output.css @@ -371,7 +371,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / b)); <===> unknown/arg_4/with_none/output.css @@ -383,7 +383,7 @@ a { <===> ================================================================================ <===> unknown/arg_3_and_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / c)); <===> unknown/arg_3_and_4/output.css @@ -396,7 +396,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 / 0.4)); <===> multi_argument_var/1_of_2/output.css @@ -408,7 +408,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) / 0.4)); <===> multi_argument_var/2_of_2/output.css @@ -420,7 +420,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/output.css diff --git a/spec/core_functions/color/lab/special_functions/no_alpha.hrx b/spec/core_functions/color/lab/special_functions/no_alpha.hrx index c20e71040..8f461e641 100644 --- a/spec/core_functions/color/lab/special_functions/no_alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/no_alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)"))); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3)); <===> calc/calculation/arg_1/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3)); <===> calc/calculation/arg_2/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%))); <===> calc/calculation/arg_3/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3)); <===> env/arg_1/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3)); <===> env/arg_2/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo))); <===> env/arg_3/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3)); <===> min/string/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3)); <===> min/string/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)"))); <===> min/string/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3)); <===> max/string/arg_1/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3)); <===> max/string/arg_2/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)"))); <===> max/string/arg_3/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3)); <===> clamp/string/arg_1/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3)); <===> clamp/string/arg_2/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)"))); <===> clamp/string/arg_3/output.css diff --git a/spec/core_functions/color/lab/special_functions/slash_list.hrx b/spec/core_functions/color/lab/special_functions/slash_list.hrx index f99a640c5..b3aace0b9 100644 --- a/spec/core_functions/color/lab/special_functions/slash_list.hrx +++ b/spec/core_functions/color/lab/special_functions/slash_list.hrx @@ -1,6 +1,6 @@ <===> channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(var(--foo), 0.4))); <===> channels/output.css @@ -13,7 +13,7 @@ a { ================================================================================ <===> some_channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% var(--foo), 0.4))); <===> some_channels/output.css @@ -26,7 +26,7 @@ a { ================================================================================ <===> alpha/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, var(--c)))); <===> alpha/output.css diff --git a/spec/core_functions/color/lch/_utils.scss b/spec/core_functions/color/lch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/lch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'lightness') - -real-channel($color, 'chroma') - -real-channel($color, 'hue'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx index 170b7b0b6..a5957e271 100644 --- a/spec/core_functions/color/lch/alpha.hrx +++ b/spec/core_functions/color/lch/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0)); <===> transparent/output.css a { value: lch(1% 2 3deg / 0); + space: lch; channels: 1% 2 3deg / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 1)); <===> opaque/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0.4)); <===> partial/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 40%)); <===> percent/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg / 0.4)); <===> named/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, 0.4))); <===> slash_list/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none / 0.4)); <===> none/slash/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / none)); <===> none/slash/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 none, 0.4))); <===> none/slash_list/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } @@ -110,11 +119,12 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, none))); <===> none/slash_list/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index 65fc7e78b..8d01279b8 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1 2 3deg)); <===> unitless/in_range/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(101 2 3deg)); <===> unitless/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1 2 3deg)); <===> unitless/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css a { value: lch(1% 0.5 3deg); + space: lch; channels: 1% 0.5 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -0.1 3deg)); <===> unitless/chroma/below_range/output.css a { - value: lch(1% -0.1 3deg); - channels: 1% -0.1 3deg / 1; + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 361deg)); <===> unitless/hue/above_range/output.css a { value: lch(1% 2 1deg); + space: lch; channels: 1% 2 1deg / 1; } <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 -1deg)); <===> unitless/hue/below_range/output.css a { value: lch(1% 2 359deg); + space: lch; channels: 1% 2 359deg / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2% 3deg)); <===> percent/in_range/output.css a { value: lch(1% 3 3deg); + space: lch; channels: 1% 3 3deg / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(110% 2 3deg)); <===> percent/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1% 2 3deg)); <===> percent/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css a { value: lch(1% 151.5 3deg); + space: lch; channels: 1% 151.5 3deg / 1; } <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -1% 3deg)); <===> percent/chroma/below_range/output.css a { - value: lch(1% -1.5 3deg); - channels: 1% -1.5 3deg / 1; + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(none 2 3deg)); <===> none/lightness/output.css a { value: lch(none 2 3deg); + space: lch; channels: none 2 3deg / 1; } <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% none 3deg)); <===> none/chroma/output.css a { value: lch(1% none 3deg); + space: lch; channels: 1% none 3deg / 1; } <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none)); <===> none/hue/output.css a { value: lch(1% 2 none); + space: lch; channels: 1% 2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg)); <===> named/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } diff --git a/spec/core_functions/color/lch/special_functions.hrx b/spec/core_functions/color/lch/special_functions.hrx index afcf9f813..dc2ff487b 100644 --- a/spec/core_functions/color/lch/special_functions.hrx +++ b/spec/core_functions/color/lch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(calc(1px + 1%) 2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/mix/error.hrx b/spec/core_functions/color/mix/error.hrx index 3dc0313d4..cf5b481d4 100644 --- a/spec/core_functions/color/mix/error.hrx +++ b/spec/core_functions/color/mix/error.hrx @@ -36,7 +36,7 @@ Error: Missing argument $color2. a {b: mix(lch(20% -20 0), red)} <===> null_method/non_legacy/color1/error -Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color1: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(lch(20% -20 0), red)} | ^^^^^^^^^^^^^^^^^^^^^^^^ @@ -49,7 +49,7 @@ Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you a {b: mix(red, lch(20% -20 0))} <===> null_method/non_legacy/color2/error -Error: $color2: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color2: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(red, lch(20% -20 0))} | ^^^^^^^^^^^^^^^^^^^^^^^^ diff --git a/spec/core_functions/color/mix/hue_interpolation.hrx b/spec/core_functions/color/mix/hue_interpolation.hrx index 052c47412..df1c19a67 100644 --- a/spec/core_functions/color/mix/hue_interpolation.hrx +++ b/spec/core_functions/color/mix/hue_interpolation.hrx @@ -13,5 +13,5 @@ a {b: mix(red, green, 20%, lch increasing hue)} <===> increasing/weighted/output.css a { - b: rgb(75.3627215695, 127.0940173535, -38.3383580918); + b: hsl(78.7622147036, 186.3907911016%, 17.4030704435%); } diff --git a/spec/core_functions/color/mix/mixed_spaces.hrx b/spec/core_functions/color/mix/mixed_spaces.hrx index 9c321d2be..e26fa61dc 100644 --- a/spec/core_functions/color/mix/mixed_spaces.hrx +++ b/spec/core_functions/color/mix/mixed_spaces.hrx @@ -3,5 +3,5 @@ a {b: mix(hsl(0 100% 50%), green, $method: lch)} <===> output.css a { - b: hsl(49.4586711601, 100%, 27.8089044382%); + b: hsl(50.9351301875, 199.2813015981%, 19.0269267557%); } diff --git a/spec/core_functions/color/mix/predefined.hrx b/spec/core_functions/color/mix/predefined.hrx index 1f0de2dda..504ea9ba7 100644 --- a/spec/core_functions/color/mix/predefined.hrx +++ b/spec/core_functions/color/mix/predefined.hrx @@ -13,7 +13,7 @@ a {b: mix(color(display-p3 1 0 0), color(display-p3 0 1 0), 60%, $method: hsl)} <===> rgb_explicit_method/output.css a { - b: color(display-p3 0.9849707148 0.9141322646 0.3079881122); + b: color(display-p3 1.0849635599 0.8595336595 -0.252822726); } <===> @@ -33,5 +33,5 @@ a {b: mix(color(xyz-d50 0.15 0.24 0), color(xyz-d65 1 .2 0), $method: hwb)} <===> xyz_explicit_method/output.css a { - b: color(xyz-d50 0.3464867621 0.2923393699 0.0410088495); + b: color(xyz-d50 0.5250037958 0.2975068714 -0.1396614468); } diff --git a/spec/core_functions/color/oklab/_utils.scss b/spec/core_functions/color/oklab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/oklab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'lightness') - -real-channel($color, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index 6ff6a6287..ee7f24dac 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0 255 127 / 0)); <===> transparent/output.css a { value: oklab(0% 255 127 / 0); + space: oklab; channels: 0% 255 127 / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 1)); <===> opaque/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 0.4)); <===> partial/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 40%)); <===> percent/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3 / 0.4)); <===> named/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none / 0.4)); <===> none/slash/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / none)); <===> none/slash/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } @@ -110,19 +119,20 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } <===> ================================================================================ <===> relative_color/slash/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b / 25%)); <===> relative_color/slash/output.css @@ -135,7 +145,7 @@ a { ================================================================================ <===> relative_color/slash_list/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(from #aaa l a b, 25%))); <===> relative_color/slash_list/output.css diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index ffd32248d..21698a935 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -1,185 +1,200 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 -3)); <===> unitless/ab/in_range/output.css a { value: oklab(1% 2 -3); + space: oklab; channels: 1% 2 -3 / 1; } <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 126 300)); <===> unitless/ab/above_range/output.css a { value: oklab(1% 126 300); + space: oklab; channels: 1% 126 300 / 1; } <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -126 -300)); <===> unitless/ab/below_range/output.css a { value: oklab(1% -126 -300); + space: oklab; channels: 1% -126 -300 / 1; } <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0.1 2 -3)); <===> unitless/lightness/in_range/output.css a { value: oklab(10% 2 -3); + space: oklab; channels: 10% 2 -3 / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1.1 2 3)); <===> unitless/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-0.1 2 3)); <===> unitless/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/ab/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 101% 150%)); <===> percent/ab/above_range/output.css a { value: oklab(1% 0.404 0.6); + space: oklab; channels: 1% 0.404 0.6 / 1; } <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -101% -150%)); <===> percent/ab/below_range/output.css a { value: oklab(1% -0.404 -0.6); + space: oklab; channels: 1% -0.404 -0.6 / 1; } <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/lightness/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(110% 2 3)); <===> percent/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-1% 2 3)); <===> percent/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(none 2 3)); <===> none/lightness/output.css a { value: oklab(none 2 3); + space: oklab; channels: none 2 3 / 1; } <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% none 3)); <===> none/a/output.css a { value: oklab(1% none 3); + space: oklab; channels: 1% none 3 / 1; } <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none)); <===> none/b/output.css a { value: oklab(1% 2 none); + space: oklab; channels: 1% 2 none / 1; } <===> ================================================================================ <===> relative_color/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b)); <===> relative_color/output.css @@ -191,11 +206,12 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3)); <===> named/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/oklab/special_functions.hrx b/spec/core_functions/color/oklab/special_functions.hrx index 089f5057f..16f4e4ebe 100644 --- a/spec/core_functions/color/oklab/special_functions.hrx +++ b/spec/core_functions/color/oklab/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(calc(1px + 1%) 2 3)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% calc(1px + 1%) 3)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/oklch/_utils.scss b/spec/core_functions/color/oklch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/oklch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:color'; -@use 'sass:list'; -@use 'sass:meta'; - -@function -real-channel($color, $channel) { - @if color.is-missing($color, $channel) { - @return none; - } @else { - @return color.channel($color, $channel); - } -} - -@mixin inspect($color) { - a { - value: $color; - @if meta.type-of($color) == string { - type: string; - } @else { - channels: list.slash( - -real-channel($color, 'lightness') - -real-channel($color, 'chroma') - -real-channel($color, 'hue'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/oklch/alpha.hrx b/spec/core_functions/color/oklch/alpha.hrx index acb10b5a4..8ac85be2f 100644 --- a/spec/core_functions/color/oklch/alpha.hrx +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0)); <===> transparent/output.css a { value: oklch(1% 0.2 3deg / 0); + space: oklch; channels: 1% 0.2 3deg / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 1)); <===> opaque/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0.4)); <===> partial/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 40%)); <===> percent/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg / 0.4)); <===> named/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 3deg, 0.4))); <===> slash_list/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 none / 0.4)); <===> none/slash/hue/output.css a { value: oklch(1% 0.2 none / 0.4); + space: oklch; channels: 1% 0.2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / none)); <===> none/slash/alpha/output.css a { value: oklch(1% 0.2 3deg / none); + space: oklch; channels: 1% 0.2 3deg / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 none, 0.4))); <===> none/slash_list/hue/output.css a { value: oklch(1% 0.2 none / 0.4); + space: oklch; channels: 1% 0.2 none / 0.4; } @@ -110,11 +119,12 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 3deg, none))); <===> none/slash_list/alpha/output.css a { value: oklch(1% 0.2 3deg / none); + space: oklch; channels: 1% 0.2 3deg / none; } diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index 9b24e8e78..2c8c27848 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(0.1 0.2 3deg)); <===> unitless/in_range/output.css a { value: oklch(10% 0.2 3deg); + space: oklch; channels: 10% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1.1 0.2 3deg)); <===> unitless/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-0.1 0.2 3deg)); <===> unitless/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css a { value: oklch(1% 0.5 3deg); + space: oklch; channels: 1% 0.5 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% -0.1 3deg)); <===> unitless/chroma/below_range/output.css a { - value: oklch(1% -0.1 3deg); - channels: 1% -0.1 3deg / 1; + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 361deg)); <===> unitless/hue/above_range/output.css a { value: oklch(1% 0.2 1deg); + space: oklch; channels: 1% 0.2 1deg / 1; } <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 -1deg)); <===> unitless/hue/below_range/output.css a { value: oklch(1% 0.2 359deg); + space: oklch; channels: 1% 0.2 359deg / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 2% 3deg)); <===> percent/in_range/output.css a { value: oklch(1% 0.008 3deg); + space: oklch; channels: 1% 0.008 3deg / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(110% 0.2 3deg)); <===> percent/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-1% 0.2 3deg)); <===> percent/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css a { value: oklch(1% 0.404 3deg); + space: oklch; channels: 1% 0.404 3deg / 1; } <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% -1% 3deg)); <===> percent/chroma/below_range/output.css a { - value: oklch(1% -0.004 3deg); - channels: 1% -0.004 3deg / 1; + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(none 0.2 3deg)); <===> none/lightness/output.css a { value: oklch(none 0.2 3deg); + space: oklch; channels: none 0.2 3deg / 1; } <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% none 3deg)); <===> none/chroma/output.css a { value: oklch(1% none 3deg); + space: oklch; channels: 1% none 3deg / 1; } <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 none)); <===> none/hue/output.css a { value: oklch(1% 0.2 none); + space: oklch; channels: 1% 0.2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg)); <===> named/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } diff --git a/spec/core_functions/color/oklch/special_functions.hrx b/spec/core_functions/color/oklch/special_functions.hrx index 8955526c4..60100e9e3 100644 --- a/spec/core_functions/color/oklch/special_functions.hrx +++ b/spec/core_functions/color/oklch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(calc(1px + 1%) 0.2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 0.2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/libsass/color-functions/rgb/rgb/b.hrx b/spec/libsass/color-functions/rgb/rgb/b.hrx index 0195a80e5..04fc42ebe 100644 --- a/spec/libsass/color-functions/rgb/rgb/b.hrx +++ b/spec/libsass/color-functions/rgb/rgb/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: rgb(0, 0, 255); } foo { - c-1: rgb(0, 0, -2.55); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: rgb(0, 0, 255); } diff --git a/spec/libsass/color-functions/rgb/rgb/g.hrx b/spec/libsass/color-functions/rgb/rgb/g.hrx index d8ec64afd..c9326912f 100644 --- a/spec/libsass/color-functions/rgb/rgb/g.hrx +++ b/spec/libsass/color-functions/rgb/rgb/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: rgb(0, 255, 0); } foo { - c-1: rgb(0, -2.55, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: rgb(0, 255, 0); } diff --git a/spec/libsass/color-functions/rgb/rgb/r.hrx b/spec/libsass/color-functions/rgb/rgb/r.hrx index f01d48830..2f28b4a41 100644 --- a/spec/libsass/color-functions/rgb/rgb/r.hrx +++ b/spec/libsass/color-functions/rgb/rgb/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: rgb(0, 255, 0); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: rgb(255, 0, 0); } diff --git a/spec/libsass/color-functions/rgb/rgba/b.hrx b/spec/libsass/color-functions/rgb/rgba/b.hrx index 70a2db62f..2e4508a80 100644 --- a/spec/libsass/color-functions/rgb/rgba/b.hrx +++ b/spec/libsass/color-functions/rgb/rgba/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: rgb(0, 0, 255); } foo { - c-1: rgb(0, 0, -2.55); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: rgb(0, 0, 255); } diff --git a/spec/libsass/color-functions/rgb/rgba/g.hrx b/spec/libsass/color-functions/rgb/rgba/g.hrx index e0273defd..2036c8091 100644 --- a/spec/libsass/color-functions/rgb/rgba/g.hrx +++ b/spec/libsass/color-functions/rgb/rgba/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: rgb(0, 255, 0); } foo { - c-1: rgb(0, -2.55, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: rgb(0, 255, 0); } diff --git a/spec/libsass/color-functions/rgb/rgba/r.hrx b/spec/libsass/color-functions/rgb/rgba/r.hrx index 1655f8d08..305608c65 100644 --- a/spec/libsass/color-functions/rgb/rgba/r.hrx +++ b/spec/libsass/color-functions/rgb/rgba/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: rgb(0, 255, 0); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: rgb(255, 0, 0); } diff --git a/spec/non_conformant/colors/basic.hrx b/spec/non_conformant/colors/basic.hrx index 79abb2d83..8d0d96a38 100644 --- a/spec/non_conformant/colors/basic.hrx +++ b/spec/non_conformant/colors/basic.hrx @@ -14,5 +14,5 @@ p { color: red green blue; color: redhux; color: redgreen; - foo: rgb(200, 382.5, 433.5); + foo: rgb(200, 255, 255); }