Skip to content

Commit cab1fce

Browse files
thecrypticacethecrypticace
authored
Add future flag to preserve custom, default ring color opacity (tailwindlabs#8448)
* Add future flag to preserve ring color opacity * Update changelog
1 parent 0295408 commit cab1fce

File tree

6 files changed

+258
-9
lines changed

6 files changed

+258
-9
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
5151
- Experimental support for variant grouping ([#8405](https://github.com/tailwindlabs/tailwindcss/pull/8405))
5252
- Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
5353
- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
54+
- Add future flag to preserve custom, default ring color opacity ([#8448](https://github.com/tailwindlabs/tailwindcss/pull/8448))
5455

5556
## [3.0.24] - 2022-04-12
5657

‎src/corePlugins.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -1977,13 +1977,20 @@ export let corePlugins = {
19771977
)
19781978
},
19791979

1980-
ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
1981-
let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
1982-
let ringColorDefault = withAlphaValue(
1983-
theme('ringColor')?.DEFAULT,
1984-
ringOpacityDefault,
1985-
`rgb(147 197 253 / ${ringOpacityDefault})`
1986-
)
1980+
ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
1981+
let ringColorDefault = (() => {
1982+
if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
1983+
return theme('ringColor.DEFAULT')
1984+
}
1985+
1986+
let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
1987+
1988+
return withAlphaValue(
1989+
theme('ringColor')?.DEFAULT,
1990+
ringOpacityDefault,
1991+
`rgb(147 197 253 / ${ringOpacityDefault})`
1992+
)
1993+
})()
19871994

19881995
addDefaults('ring-width', {
19891996
'--tw-ring-inset': ' ',

‎src/featureFlags.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ let defaults = {
66
}
77

88
let featureFlags = {
9-
future: ['hoverOnlyWhenSupported'],
9+
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
1010
experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
1111
}
1212

‎src/util/getAllConfigs.js

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ export default function getAllConfigs(config) {
99

1010
const features = {
1111
// Add experimental configs here...
12+
respectDefaultRingColorOpacity: {
13+
theme: {
14+
ringColor: {
15+
DEFAULT: '#3b82f67f',
16+
},
17+
},
18+
},
1219
}
1320

1421
const experimentals = Object.keys(features)

‎stubs/defaultConfig.stub.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -720,7 +720,7 @@ module.exports = {
720720
8: '8px',
721721
},
722722
ringColor: ({ theme }) => ({
723-
DEFAULT: theme('colors.blue.500', '#3b82f6'),
723+
DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
724724
...theme('colors'),
725725
}),
726726
ringOffsetColor: ({ theme }) => theme('colors'),

‎tests/basic-usage.test.js

+234
Original file line numberDiff line numberDiff line change
@@ -430,3 +430,237 @@ it('supports multiple backgrounds as arbitrary values even if only some are quot
430430
`)
431431
})
432432
})
433+
434+
it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (1)', () => {
435+
let config = {
436+
content: [{ raw: html`<div class="ring"></div>` }],
437+
corePlugins: { preflight: false },
438+
}
439+
440+
let input = css`
441+
@tailwind base;
442+
@tailwind utilities;
443+
`
444+
445+
return run(input, config).then((result) => {
446+
expect(result.css).toMatchFormattedCss(css`
447+
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.5)' })}
448+
.ring {
449+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
450+
var(--tw-ring-offset-color);
451+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
452+
var(--tw-ring-color);
453+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
454+
}
455+
`)
456+
})
457+
})
458+
459+
it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (2)', () => {
460+
let config = {
461+
content: [{ raw: html`<div class="ring"></div>` }],
462+
corePlugins: { preflight: false },
463+
theme: {
464+
ringOpacity: {
465+
DEFAULT: 0.75,
466+
},
467+
},
468+
}
469+
470+
let input = css`
471+
@tailwind base;
472+
@tailwind utilities;
473+
`
474+
475+
return run(input, config).then((result) => {
476+
expect(result.css).toMatchFormattedCss(css`
477+
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.75)' })}
478+
.ring {
479+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
480+
var(--tw-ring-offset-color);
481+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
482+
var(--tw-ring-color);
483+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
484+
}
485+
`)
486+
})
487+
})
488+
489+
it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (1)', () => {
490+
let config = {
491+
content: [{ raw: html`<div class="ring"></div>` }],
492+
corePlugins: { preflight: false },
493+
theme: {
494+
ringColor: {
495+
DEFAULT: '#ff7f7f',
496+
},
497+
},
498+
}
499+
500+
let input = css`
501+
@tailwind base;
502+
@tailwind utilities;
503+
`
504+
505+
return run(input, config).then((result) => {
506+
expect(result.css).toMatchFormattedCss(css`
507+
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
508+
.ring {
509+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
510+
var(--tw-ring-offset-color);
511+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
512+
var(--tw-ring-color);
513+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
514+
}
515+
`)
516+
})
517+
})
518+
519+
it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (2)', () => {
520+
let config = {
521+
content: [{ raw: html`<div class="ring"></div>` }],
522+
corePlugins: { preflight: false },
523+
theme: {
524+
ringColor: {
525+
DEFAULT: '#ff7f7f00',
526+
},
527+
},
528+
}
529+
530+
let input = css`
531+
@tailwind base;
532+
@tailwind utilities;
533+
`
534+
535+
return run(input, config).then((result) => {
536+
expect(result.css).toMatchFormattedCss(css`
537+
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
538+
.ring {
539+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
540+
var(--tw-ring-offset-color);
541+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
542+
var(--tw-ring-color);
543+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
544+
}
545+
`)
546+
})
547+
})
548+
549+
it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (1)', () => {
550+
let config = {
551+
future: { respectDefaultRingColorOpacity: true },
552+
content: [{ raw: html`<div class="ring"></div>` }],
553+
corePlugins: { preflight: false },
554+
}
555+
556+
let input = css`
557+
@tailwind base;
558+
@tailwind utilities;
559+
`
560+
561+
return run(input, config).then((result) => {
562+
expect(result.css).toMatchFormattedCss(css`
563+
${defaults({ defaultRingColor: '#3b82f67f' })}
564+
.ring {
565+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
566+
var(--tw-ring-offset-color);
567+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
568+
var(--tw-ring-color);
569+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
570+
}
571+
`)
572+
})
573+
})
574+
575+
it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (2)', () => {
576+
let config = {
577+
future: { respectDefaultRingColorOpacity: true },
578+
content: [{ raw: html`<div class="ring"></div>` }],
579+
corePlugins: { preflight: false },
580+
theme: {
581+
ringOpacity: {
582+
DEFAULT: 0.75,
583+
},
584+
},
585+
}
586+
587+
let input = css`
588+
@tailwind base;
589+
@tailwind utilities;
590+
`
591+
592+
return run(input, config).then((result) => {
593+
expect(result.css).toMatchFormattedCss(css`
594+
${defaults({ defaultRingColor: '#3b82f67f' })}
595+
.ring {
596+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
597+
var(--tw-ring-offset-color);
598+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
599+
var(--tw-ring-color);
600+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
601+
}
602+
`)
603+
})
604+
})
605+
606+
it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (1)', () => {
607+
let config = {
608+
future: { respectDefaultRingColorOpacity: true },
609+
content: [{ raw: html`<div class="ring"></div>` }],
610+
corePlugins: { preflight: false },
611+
theme: {
612+
ringColor: {
613+
DEFAULT: '#ff7f7f',
614+
},
615+
},
616+
}
617+
618+
let input = css`
619+
@tailwind base;
620+
@tailwind utilities;
621+
`
622+
623+
return run(input, config).then((result) => {
624+
expect(result.css).toMatchFormattedCss(css`
625+
${defaults({ defaultRingColor: '#ff7f7f' })}
626+
.ring {
627+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
628+
var(--tw-ring-offset-color);
629+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
630+
var(--tw-ring-color);
631+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
632+
}
633+
`)
634+
})
635+
})
636+
637+
it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (2)', () => {
638+
let config = {
639+
future: { respectDefaultRingColorOpacity: true },
640+
content: [{ raw: html`<div class="ring"></div>` }],
641+
corePlugins: { preflight: false },
642+
theme: {
643+
ringColor: {
644+
DEFAULT: '#ff7f7f00',
645+
},
646+
},
647+
}
648+
649+
let input = css`
650+
@tailwind base;
651+
@tailwind utilities;
652+
`
653+
654+
return run(input, config).then((result) => {
655+
expect(result.css).toMatchFormattedCss(css`
656+
${defaults({ defaultRingColor: '#ff7f7f00' })}
657+
.ring {
658+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
659+
var(--tw-ring-offset-color);
660+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
661+
var(--tw-ring-color);
662+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
663+
}
664+
`)
665+
})
666+
})

0 commit comments

Comments
 (0)