Merge pull request #199 from warp-ds/next

Release 1.8.0

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.8.0-next.2](https://github.com/warp-ds/drive/compare/v1.8.0-next.1...v1.8.0-next.2) (2024-02-06)
+
+
+### Features
+
+* Add support for alpha channel modifier to arbitrary color classes ([#198](https://github.com/warp-ds/drive/issues/198)) ([c98cc3c](https://github.com/warp-ds/drive/commit/c98cc3c3e94c59f11d40fae781cb909aefb70d40))
+
+# [1.8.0-next.1](https://github.com/warp-ds/drive/compare/v1.7.0...v1.8.0-next.1) (2024-02-05)
+
+
+### Features
+
+* Add support for alpha channel modifier to semantic color classes ([#197](https://github.com/warp-ds/drive/issues/197)) ([3236a1f](https://github.com/warp-ds/drive/commit/3236a1f0655048474d3182a67ed4fc17cfc2692b))
+
 # [1.7.0](https://github.com/warp-ds/drive/compare/v1.6.0...v1.7.0) (2024-01-24)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/uno",
   "repository": "git@github.com:warp-ds/drive.git",
-  "version": "1.7.0",
+  "version": "1.8.0-next.2",
   "type": "module",
   "exports": {
     ".": "./src/plugin.js",

src/_rules/background.js

@@ -1,4 +1,4 @@
-import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues } from '#utils';
+import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues, resolveArbitraryCssVariable } from '#utils';
 
 export const backgrounds = [
   // size
@@ -51,7 +51,7 @@ export const backgrounds = [
   ['bg-inherit', { 'background-color': 'inherit' }],
   ['bg-transparent', { 'background-color': 'transparent' }],
   ['bg-current', { 'background-color': 'currentColor' }],
-  [/^bg-\[(var\(--.+\)|--.+)]$/, ([, val]) => ({ 'background-color': val.startsWith('--') ? `var(${val})` : val })],
+  [/^bg-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ 'background-color': resolveArbitraryCssVariable(val, alpha) })],
 
   // image
   ['bg-none', { 'background-image': 'none' }],

src/_rules/border.js

@@ -1,5 +1,5 @@
 import { escapeSelector } from '@unocss/core';
-import { directionMap, cornerMap, resolveArbitraryValues } from '#utils';
+import { directionMap, cornerMap, resolveArbitraryValues, resolveArbitraryCssVariable } from '#utils';
 import { lineWidth } from '#theme';
 
 const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset'];
@@ -15,7 +15,7 @@ export const borders = [
   [/^border-inverted$/, () => ({ 'border-color': 'var(--w-s-border-inverted)' })],
   [/^border-inherit$/, () => ({ 'border-color': 'inherit' })],
   [/^border-current$/, () => ({ 'border-color': 'currentColor' })],
-  [/^border(-[lrtbxy])?-\[(var\(.+\)|--.+|\D.*)]$/, handleArbitraryBorderColor],
+  [/^border(-[lrtbxy])?-\[(var\(--.+\)|--[^\/]+|\D[^\/]*)(\/(0|[1-9][0-9]?|100))?]$/, handleArbitraryBorderColor],
 
   // border-style
   [new RegExp(`^border(-[lrtbxy])?-(${borderStyles.join('|')})$`), handleBorderStyle, { autocomplete: [`border-(${borderStyles.join('|')})`, `border-<directions>-(${borderStyles.join('|')})`] }],
@@ -30,9 +30,8 @@ function handleArbitraryBorderWidth([, dir = '', value, unit], context) {
   return directionMap[dir.substring(1)]?.map((i) => [`border${i}-width`, resolveArbitraryValues(value, unit, context)]);
 }
 
-function handleArbitraryBorderColor([, dir = '', val]) {
-  const cssVal = val.startsWith('--') ? `var(${val})` : val;
-  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-color`, cssVal]);
+function handleArbitraryBorderColor([, dir = '', val, alpha]) {
+  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-color`, resolveArbitraryCssVariable(val, alpha)]);
 }
 
 function handleBorderStyle([, dir = '', style]) {
@@ -50,7 +49,7 @@ export const divide = [
 
   // border-color
   [/^divide(-[xy])?-current$/, (match) => handleArbitraryDivideColor(match.concat('currentColor'))],
-  [/^divide(-[xy])?-\[(var\(.+\)|--.+|\D.*)]$/, handleArbitraryDivideColor],
+  [/^divide(-[xy])?-\[(var\(--.+\)|--[^\/]+|\D[^\/]*)(\/(0|[1-9][0-9]?|100))?]$/, handleArbitraryDivideColor],
 ];
 
 function getDivideWidthStyles(selector, dir, width, reverse) {
@@ -75,8 +74,8 @@ function handleArbitraryDivideWidth([_selector, dir, width, unit, reverse], { th
   return getDivideWidthStyles(_selector, dir, resolveArbitraryValues(width, unit, theme), reverse);
 }
 
-function handleArbitraryDivideColor([_selector, dir = '', val]) {
-  const cssRules = directionMap[dir?.substring(1)]?.map((i) => `border${i}-color: ${val.startsWith('--') ? `var(${val})` : val}`);
+function handleArbitraryDivideColor([_selector, dir = '', val, alpha]) {
+  const cssRules = directionMap[dir?.substring(1)]?.map((i) => `border${i}-color: ${resolveArbitraryCssVariable(val, alpha)}`);
   if (cssRules) return `.${escapeSelector(_selector)}>*+*{${cssRules.join(';')};}`;
 }
 

src/_rules/color.js

@@ -1,3 +1,5 @@
+import { resolveArbitraryCssVariable } from '#utils';
+
 export const opacity = [[/^opacity-(\d+)$/, ([, d], { theme }) => ({ opacity: theme.opacity[d] }), { autocomplete: 'opacity-${opacity}' }]];
 
 export const caretColors = [
@@ -10,6 +12,5 @@ export const textColors = [
   //  ['text-inherit', { 'color': 'inherit' }], // This class currently sets "text-align: inherit;" in align.js
   ['text-transparent', { color: 'transparent' }],
   ['text-current', { color: 'currentColor' }],
-  [/^text-\[(--.+)]$/, ([, p]) => ({ color: `var(${p})` })],
-  [/^text-\[(var\(--.+\))]$/, ([, p]) => ({ color: p })],
+  [/^text-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ color: resolveArbitraryCssVariable(val, alpha) })],
 ];

src/_rules/outline.js

@@ -1,4 +1,5 @@
 import { lineWidth } from '#theme';
+import { resolveArbitraryCssVariable } from '#utils';
 
 const outlineNone = {
   outline: '2px solid transparent',
@@ -9,8 +10,7 @@ export const outlineColors = [
   ['outline-inherit', { 'outline-color': 'inherit' }],
   ['outline-transparent', { 'outline-color': 'transparent' }],
   ['outline-current', { 'outline-color': 'currentColor' }],
-  [/^outline-\[(--.+)]$/, ([, p]) => ({ 'outline-color': `var(${p})` })],
-  [/^outline-\[(var\(--.+\))]$/, ([, p]) => ({ 'outline-color': p })],
+  [/^outline-\[(var\(--.+\)|--[^\/]+)(\/(0|[1-9][0-9]?|100))?]$/, ([, val, alpha]) => ({ 'outline-color': resolveArbitraryCssVariable(val, alpha) })],
 ];
 
 export const outlineStyle = [

src/_rules/semantic.js

@@ -1,15 +1,17 @@
 import { directionMap, handler as h } from '#utils';
 import { escapeSelector } from '@unocss/core';
 
-const handleBorder = ([, direction = '', cssvar = '']) => directionMap[direction.substring(1)]?.map((dir) => [`border${dir}-color`, h.semanticToken(`border${cssvar}`)]);
+const handleBorder = ([, direction = '', semanticVal = '']) => directionMap[direction.substring(1)]?.map((dir) => [`border${dir}-color`, h.semanticToken(`border${semanticVal}`)]);
 
-const handleDivide = ([_selector, direction = '', cssvar = '']) => `.${escapeSelector(_selector)}>*+*{${directionMap[direction.substring(1)]?.map((dir) => `border${dir}-color: ${h.semanticToken(`border${cssvar}`)};`).join('')}}`;
+const handleDivide = ([_selector, direction = '', semanticVal = '']) => `.${escapeSelector(_selector)}>*+*{${directionMap[direction.substring(1)]?.map((dir) => `border${dir}-color: ${h.semanticToken(`border${semanticVal}`)};`).join('')}}`;
+
+const getSemanticRegEx = (groupName, directions) => new RegExp(`^s-${groupName}${directions ? `(-[${directions}])?` : ''}((-[^\\/]+)?(\\/(0|[1-9][0-9]?|100))?)?$`);
 
 export const semanticRules = [
-  [/^s-bg(-.+)?$/, ([, cssvar = '']) => ({ 'background-color': h.semanticToken(`background${cssvar}`) })],
-  [/^s-text(-.+)?$/, ([, cssvar = '']) => ({ color: h.semanticToken(`text${cssvar}`) })],
-  [/^s-icon(-.+)?$/, ([, cssvar = '']) => ({ color: h.semanticToken(`icon${cssvar}`) })],
-  [/^s-border(-[lrtbxy])?(-.+)?$/, handleBorder],
-  [/^s-outline(-.+)?$/, ([, cssvar = '']) => ({ 'outline-color': h.semanticToken(`border${cssvar}`) })],
-  [/^s-divide(-[xy])?(-.+)?$/, handleDivide],
+  [getSemanticRegEx('bg'), ([, semanticVal = '']) => ({ 'background-color': h.semanticToken(`background${semanticVal}`) })],
+  [getSemanticRegEx('text'), ([, semanticVal = '']) => ({ color: h.semanticToken(`text${semanticVal}`) })],
+  [getSemanticRegEx('icon'), ([, semanticVal = '']) => ({ color: h.semanticToken(`icon${semanticVal}`) })],
+  [getSemanticRegEx('outline'), ([, semanticVal = '']) => ({ 'outline-color': h.semanticToken(`border${semanticVal}`) })],
+  [getSemanticRegEx('border', 'lrtbxy'), handleBorder],
+  [getSemanticRegEx('divide', 'xy'), handleDivide],
 ];

src/_utils/handlers/handlers.js

@@ -171,7 +171,8 @@ export function warpToken(str) {
   if (str.match(/^\$\S/)) return `var(--w-${escapeSelector(str.slice(1))})`;
 }
 export function semanticToken(str) {
-  return `var(--w-s-color-${str})`;
+  const alpha = str.match(/^([^\/]+)\/(0|[1-9][0-9]?|100)$/);
+  return alpha ? `rgba(var(--w-s-rgb-${alpha[1]}), ${percent(alpha[2])})` : `var(--w-s-color-${str})`;
 }
 export function cssvar(str) {
   if (str.match(/^\$\S/)) return `var(--${escapeSelector(str.slice(1))})`;

src/_utils/utilities.js

@@ -3,6 +3,7 @@ import { colorOpacityToString, colorToString, parseCssColor } from './colors.js'
 import { handler as h } from './handlers/index.js';
 import { directionMap, globalKeywords } from './mappings.js';
 import { getComponents } from './getComponents.js';
+import { percent } from './handlers/handlers.js';
 
 /**
  * Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
@@ -229,3 +230,14 @@ export function resolveArbitraryValues(value, unit, context) {
   if (value.startsWith('--')) return `var(${value})`;
   return h.rem(value) || value;
 }
+
+export function resolveArbitraryCssVariable(val, alpha) {
+  let cssValue = val.startsWith('--') ? `var(${val})` : val;
+  if (alpha) {
+    if (!/^var\(--w-(s-)?rgb-/.test(cssValue)) {
+      cssValue = cssValue.replace(/^var\(--w-(s-)?(color-)?(.*)\)$/, 'var(--w-$1rgb-$3)');
+    }
+    cssValue = `rgba(${cssValue},${percent(alpha.substring(1))})`;
+  }
+  return cssValue;
+}

test/__snapshots__/background.js.snap

@@ -89,6 +89,20 @@ exports[`bg size 1`] = `
 .bg-contain{background-size:contain;}"
 `;
 
+exports[`supports setting arbitrary background color variables with alpha channel 1`] = `
+"/* layer: default */
+.bg-\\[--w-black\\/90\\]{background-color:rgba(var(--w-rgb-black),0.9);}
+.bg-\\[--w-rgb-black\\/75\\]{background-color:rgba(var(--w-rgb-black),0.75);}
+.bg-\\[--w-rgb-white\\/0\\]{background-color:rgba(var(--w-rgb-white),0);}
+.bg-\\[--w-s-color-background-positive-selected-hover\\/100\\]{background-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.bg-\\[--w-s-color-background\\/5\\]{background-color:rgba(var(--w-s-rgb-background),0.05);}
+.bg-\\[--w-white\\/5\\]{background-color:rgba(var(--w-rgb-white),0.05);}
+.bg-\\[var\\(--w-black\\)\\/100\\]{background-color:rgba(var(--w-rgb-black),1);}
+.bg-\\[var\\(--w-color-text-link-active\\)\\/55\\]{background-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.bg-\\[var\\(--w-s-color-border\\)\\/60\\]{background-color:rgba(var(--w-s-rgb-border),0.6);}
+.bg-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{background-color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`supports setting arbitrary background colors 1`] = `
 "/* layer: default */
 .bg-\\[--w-s-color-background\\],

test/__snapshots__/border.js.snap

@@ -68,6 +68,20 @@ exports[`border > supports setting arbitrary border color variables 1`] = `
 .border-y-\\[--w-s-color-border\\]{border-top-color:var(--w-s-color-border);border-bottom-color:var(--w-s-color-border);}"
 `;
 
+exports[`border > supports setting arbitrary border color variables with alpha channel 1`] = `
+"/* layer: default */
+.border-\\[--w-black\\/90\\]{border-color:rgba(var(--w-rgb-black),0.9);}
+.border-\\[--w-rgb-white\\/0\\]{border-color:rgba(var(--w-rgb-white),0);}
+.border-\\[--w-s-color-background-positive-selected-hover\\/100\\]{border-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.border-\\[var\\(--w-color-text-link-active\\)\\/55\\]{border-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.border-\\[var\\(--w-s-color-border\\)\\/60\\]{border-color:rgba(var(--w-s-rgb-border),0.6);}
+.border-l-\\[--w-s-color-background\\/5\\]{border-left-color:rgba(var(--w-s-rgb-background),0.05);}
+.border-l-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{border-left-color:rgba(var(--w-s-rgb-border-disabled),0.12);}
+.border-r-\\[var\\(--w-black\\)\\/100\\]{border-right-color:rgba(var(--w-rgb-black),1);}
+.border-x-\\[--w-white\\/5\\]{border-left-color:rgba(var(--w-rgb-white),0.05);border-right-color:rgba(var(--w-rgb-white),0.05);}
+.border-y-\\[--w-rgb-black\\/75\\]{border-top-color:rgba(var(--w-rgb-black),0.75);border-bottom-color:rgba(var(--w-rgb-black),0.75);}"
+`;
+
 exports[`border > supports setting arbitrary border width 1`] = `
 "/* layer: default */
 .border-\\[6\\]{border-width:0.6rem;}
@@ -94,6 +108,20 @@ exports[`border > supports setting arbitrary divide color variables 1`] = `
 .divide-y-\\[var\\(--w-s-color-border-positive\\)\\]>*+*{border-top-color: var(--w-s-color-border-positive);border-bottom-color: var(--w-s-color-border-positive);}"
 `;
 
+exports[`border > supports setting arbitrary divide color variables with alpha channel 1`] = `
+"/* layer: default */
+.divide-\\[--w-black\\/90\\]>*+*{border-color: rgba(var(--w-rgb-black),0.9);}
+.divide-\\[--w-rgb-white\\/0\\]>*+*{border-color: rgba(var(--w-rgb-white),0);}
+.divide-\\[--w-s-color-background-positive-selected-hover\\/100\\]>*+*{border-color: rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.divide-\\[var\\(--w-color-text-link-active\\)\\/55\\]>*+*{border-color: rgba(var(--w-rgb-text-link-active),0.55);}
+.divide-\\[var\\(--w-s-color-border\\)\\/60\\]>*+*{border-color: rgba(var(--w-s-rgb-border),0.6);}
+.divide-x-\\[--w-s-color-background\\/5\\]>*+*{border-left-color: rgba(var(--w-s-rgb-background),0.05);border-right-color: rgba(var(--w-s-rgb-background),0.05);}
+.divide-x-\\[--w-white\\/5\\]>*+*{border-left-color: rgba(var(--w-rgb-white),0.05);border-right-color: rgba(var(--w-rgb-white),0.05);}
+.divide-y-\\[--w-rgb-black\\/75\\]>*+*{border-top-color: rgba(var(--w-rgb-black),0.75);border-bottom-color: rgba(var(--w-rgb-black),0.75);}
+.divide-y-\\[var\\(--w-black\\)\\/100\\]>*+*{border-top-color: rgba(var(--w-rgb-black),1);border-bottom-color: rgba(var(--w-rgb-black),1);}
+.divide-y-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]>*+*{border-top-color: rgba(var(--w-s-rgb-border-disabled),0.12);border-bottom-color: rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`border > supports setting border color 1`] = `
 "/* layer: default */
 .border-transparent{border-color:transparent;}

test/__snapshots__/color.js.snap

@@ -23,6 +23,20 @@ exports[`opacity by theme 1`] = `
 .opacity-75{opacity:75%;}"
 `;
 
+exports[`supports setting arbitrary outline color variables with alpha channel 1`] = `
+"/* layer: default */
+.text-\\[--w-black\\/90\\]{color:rgba(var(--w-rgb-black),0.9);}
+.text-\\[--w-rgb-black\\/75\\]{color:rgba(var(--w-rgb-black),0.75);}
+.text-\\[--w-rgb-white\\/0\\]{color:rgba(var(--w-rgb-white),0);}
+.text-\\[--w-s-color-background-positive-selected-hover\\/100\\]{color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.text-\\[--w-s-color-background\\/5\\]{color:rgba(var(--w-s-rgb-background),0.05);}
+.text-\\[--w-white\\/5\\]{color:rgba(var(--w-rgb-white),0.05);}
+.text-\\[var\\(--w-black\\)\\/100\\]{color:rgba(var(--w-rgb-black),1);}
+.text-\\[var\\(--w-color-text-link-active\\)\\/55\\]{color:rgba(var(--w-rgb-text-link-active),0.55);}
+.text-\\[var\\(--w-s-color-border\\)\\/60\\]{color:rgba(var(--w-s-rgb-border),0.6);}
+.text-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`supports setting arbitrary text colors 1`] = `
 "/* layer: default */
 .text-\\[--w-s-color-border\\],

test/__snapshots__/outline.js.snap

@@ -9,6 +9,20 @@ exports[`outline > offset 1`] = `
 .outline-offset-8{outline-offset:8px;}"
 `;
 
+exports[`outline > supports setting arbitrary outline color variables with alpha channel 1`] = `
+"/* layer: default */
+.outline-\\[--w-black\\/90\\]{outline-color:rgba(var(--w-rgb-black),0.9);}
+.outline-\\[--w-rgb-black\\/75\\]{outline-color:rgba(var(--w-rgb-black),0.75);}
+.outline-\\[--w-rgb-white\\/0\\]{outline-color:rgba(var(--w-rgb-white),0);}
+.outline-\\[--w-s-color-background-positive-selected-hover\\/100\\]{outline-color:rgba(var(--w-s-rgb-background-positive-selected-hover),1);}
+.outline-\\[--w-s-color-background\\/5\\]{outline-color:rgba(var(--w-s-rgb-background),0.05);}
+.outline-\\[--w-white\\/5\\]{outline-color:rgba(var(--w-rgb-white),0.05);}
+.outline-\\[var\\(--w-black\\)\\/100\\]{outline-color:rgba(var(--w-rgb-black),1);}
+.outline-\\[var\\(--w-color-text-link-active\\)\\/55\\]{outline-color:rgba(var(--w-rgb-text-link-active),0.55);}
+.outline-\\[var\\(--w-s-color-border\\)\\/60\\]{outline-color:rgba(var(--w-s-rgb-border),0.6);}
+.outline-\\[var\\(--w-s-rgb-border-disabled\\)\\/12\\]{outline-color:rgba(var(--w-s-rgb-border-disabled),0.12);}"
+`;
+
 exports[`outline > supports setting outline colors 1`] = `
 "/* layer: default */
 .outline-inherit{outline-color:inherit;}