Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow CSS variables to be used as values in the Color trait #3796

Merged
merged 1 commit into from
Jul 31, 2023
Merged

Allow CSS variables to be used as values in the Color trait #3796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions python/ipywidgets/ipywidgets/widgets/tests/test_traits.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,17 @@ class TestColor(TraitTestBase):
'hsl(0.0, .0, 0)', # hsl
'hsl( 0.5,0.3,0 )', # hsl with spaces
'hsla(10,10,10, 0.5)', # rgba with float alpha
'var(--my-color)', # CSS variable without fallback
'var(--my-color-with_separators)', # CSS variable without fallback
'var(--my-color,)', # CSS variable with empty fallback
'var(--my-color-æ)', # CSS variable with non-ascii characters
'var(--my-color-\u1234)', # CSS variable with unicode characters
r'var(--my-color-\\1234)', # CSS variable escaped hex character
'var(--my-color-\.)', # CSS variable with escaped characters
'var(--my-color,black)', # CSS variable with named color fallback
'var(--my-color, black)', # CSS variable with named color fallback
'var(--my-color, rgb(20, 70, 50))', # CSS variable with rgb color fallback
'var(--my-color, #fff)', # CSS variable with rgb color fallback
]
_bad_values = [
"vanilla", "blues", # Invalid color names
Expand All @@ -61,6 +72,12 @@ class TestColor(TraitTestBase):
'hsl(0.4, 512, -40)',
'rgba(0, 0, 0)',
'hsla(0, 0, 0)',
'var(-my-color)', # wrong identifier
'var(--my-color-\u2041)', # invalid unicode codepoint
'var(my-color, black)', # wrong identifier
'var(my-color-., black)', # invalid character in identifier
'var(--my-color, vanilla)', # wrong fallback
'var(--my-color, rgba(0,0,0))', # wrong fallback
None,
]

Expand Down
54 changes: 49 additions & 5 deletions python/ipywidgets/ipywidgets/widgets/trait_types.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@
_color_names = ['aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beiae', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgrey', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'grey', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred ', 'indigo ', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgrey', 'lightgreen', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']

# Regex colors #fff and #ffffff
_color_hex_re = re.compile(r'#[a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?$')
_color_hex = r'#[a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?'
_color_hex_re = re.compile(fr'^{_color_hex}$')
# Regex colors #ffff and #ffffffff (includes alpha value)
_color_hexa_re = re.compile(r'^#[a-fA-F0-9]{4}(?:[a-fA-F0-9]{4})?$')
_color_hexa = r'#[a-fA-F0-9]{4}(?:[a-fA-F0-9]{4})?'
_color_hexa_re = re.compile(fr'^{_color_hexa}$')

# Helpers (float percent, int percent with optional surrounding whitespace)
_color_frac_percent = r'\s*(\d+(\.\d*)?|\.\d+)?%?\s*'
Expand All @@ -28,9 +30,50 @@
_color_hsla = r'hsla\({fp},{fp},{fp},{fp}\)'

# Regex colors rgb/rgba/hsl/hsla
_color_rgbhsl_re = re.compile('({})|({})|({})|({})'.format(
_color_rgbhsl = '({})|({})|({})|({})'.format(
_color_rgb, _color_rgba, _color_hsl, _color_hsla
).format(ip=_color_int_percent, fp=_color_frac_percent))
).format(ip=_color_int_percent, fp=_color_frac_percent)
_color_rgbhsl_re = re.compile(_color_rgbhsl)

# Support for CSS variables.
# For production rules, see: https://drafts.csswg.org/css-syntax-3/#tokenization

_escape = r'\\([0-9a-fA-F]{1-6}\s?|[^0-9a-fA-F\s])'
_non_ascii = r''.join(
(
r'\u00B7',
r'\u00C0-\u00D6',
r'\u00C0-\u00D6',
r'\u00D8-\u00F6',
r'\u00F8-\u037D',
r'\u037F-\u1FFF',
r'\u200C',
r'\u200D',
r'\u203F',
r'\u2040',
r'\u2070-\u218F',
r'\u2C00-\u2FEF',
r'\u3001-\uD7FF',
r'\uF900-\uFDCF',
r'\uFDF0-\uFFFD',
r'\u10000'
)
)

# Custom CSS identifier
_custom_ident = fr'--([a-zA-Z0-9_\-{_non_ascii}]|{_escape})+'

# Matching for CSS variables with valid color fallback declaration values.
#
# A CSS variable consists of a custom identifier starting with '--'.
# The 'var()' function can be used for substituting the custom property into
# the value of another property.
#
# Here we further restrict the fallback values to be valid colors.

_css_color = fr'({"|".join(_color_names)}|({_color_rgbhsl})|({_color_hex})|({_color_hexa}))'
_css_var_fallback_color = fr'var\({_custom_ident}(,\s*({_css_color}\s*)?)?\)'
_color_var_re = re.compile(_css_var_fallback_color)


class Color(traitlets.Unicode):
Expand All @@ -44,7 +87,8 @@ def validate(self, obj, value):
return value
if isinstance(value, str):
if (value.lower() in _color_names or _color_hex_re.match(value) or
_color_hexa_re.match(value) or _color_rgbhsl_re.match(value)):
_color_hexa_re.match(value) or _color_rgbhsl_re.match(value) or
_color_var_re.match(value)):
return value

self.error(obj, value)
Expand Down
Loading