@zendeskgarden/react-theming 9.0.0-next.10 → 9.0.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/esm/elements/theme/index.js +12 -6
  2. package/dist/esm/utils/getColor.js +42 -8
  3. package/dist/index.cjs.js +54 -14
  4. package/package.json +2 -2
package/dist/esm/elements/theme/index.js CHANGED
@@ -51,7 +51,8 @@ const colors = {
51
51
  primaryEmphasis: 'primaryHue.600',
52
52
  successEmphasis: 'successHue.600',
53
53
  warningEmphasis: 'warningHue.600',
54
- dangerEmphasis: 'dangerHue.600'
54
+ dangerEmphasis: 'dangerHue.600',
55
+ disabled: 'rgba(neutralHue.500, 100)'
55
56
  },
56
57
  border: {
57
58
  default: 'neutralHue.800',
@@ -63,7 +64,8 @@ const colors = {
63
64
  primaryEmphasis: 'primaryHue.600',
64
65
  successEmphasis: 'successHue.600',
65
66
  warningEmphasis: 'warningHue.600',
66
- dangerEmphasis: 'dangerHue.600'
67
+ dangerEmphasis: 'dangerHue.600',
68
+ disabled: 'neutralHue.800'
67
69
  },
68
70
  foreground: {
69
71
  default: 'neutralHue.300',
@@ -75,7 +77,8 @@ const colors = {
75
77
  danger: 'dangerHue.400',
76
78
  successEmphasis: 'successHue.300',
77
79
  warningEmphasis: 'warningHue.300',
78
- dangerEmphasis: 'dangerHue.300'
80
+ dangerEmphasis: 'dangerHue.300',
81
+ disabled: 'neutralHue.700'
79
82
  }
80
83
  },
81
84
  light: {
@@ -92,7 +95,8 @@ const colors = {
92
95
  primaryEmphasis: 'primaryHue.700',
93
96
  successEmphasis: 'successHue.700',
94
97
  warningEmphasis: 'warningHue.700',
95
- dangerEmphasis: 'dangerHue.700'
98
+ dangerEmphasis: 'dangerHue.700',
99
+ disabled: 'rgba(neutralHue.700, 100)'
96
100
  },
97
101
  border: {
98
102
  default: 'neutralHue.300',
@@ -104,7 +108,8 @@ const colors = {
104
108
  primaryEmphasis: 'primaryHue.700',
105
109
  successEmphasis: 'successHue.700',
106
110
  warningEmphasis: 'warningHue.700',
107
- dangerEmphasis: 'dangerHue.700'
111
+ dangerEmphasis: 'dangerHue.700',
112
+ disabled: 'neutralHue.300'
108
113
  },
109
114
  foreground: {
110
115
  default: 'neutralHue.900',
@@ -116,7 +121,8 @@ const colors = {
116
121
  danger: 'dangerHue.700',
117
122
  successEmphasis: 'successHue.900',
118
123
  warningEmphasis: 'warningHue.900',
119
- dangerEmphasis: 'dangerHue.900'
124
+ dangerEmphasis: 'dangerHue.900',
125
+ disabled: 'neutralHue.600'
120
126
  }
121
127
  }
122
128
  }
package/dist/esm/utils/getColor.js CHANGED
@@ -83,6 +83,41 @@ const toProperty = (object, path) => {
83
83
  throw new TypeError(`Error: unexpected '${typeof retVal}' type for color variable "${path}"`);
84
84
  }
85
85
  };
86
+ const fromRgba = value => {
87
+ let retVal;
88
+ const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
89
+ const _rgba = regex.exec(value);
90
+ if (_rgba && _rgba.groups) {
91
+ const property = _rgba.groups.property;
92
+ const transparency = parseFloat(_rgba.groups.alpha);
93
+ retVal = {
94
+ property,
95
+ transparency
96
+ };
97
+ } else {
98
+ throw new Error(`Error: invalid \`rgba\` value "${value}"`);
99
+ }
100
+ return retVal;
101
+ };
102
+ const fromVariable = (variable, variables, palette) => {
103
+ const retVal = {};
104
+ let property = toProperty(variables, variable);
105
+ if (property.startsWith('rgba')) {
106
+ const value = fromRgba(property);
107
+ property = value.property;
108
+ retVal.transparency = value.transparency;
109
+ }
110
+ const [key, value] = property.split(/\.(?<value>.*)/u);
111
+ if (key === 'palette') {
112
+ retVal.hue = toProperty(palette, value);
113
+ } else {
114
+ retVal.hue = key;
115
+ if (value !== undefined) {
116
+ retVal.shade = parseInt(value, 10);
117
+ }
118
+ }
119
+ return retVal;
120
+ };
86
121
  const getColor = memoize(_ref => {
87
122
  let {
88
123
  dark,
@@ -106,16 +141,14 @@ const getColor = memoize(_ref => {
106
141
  let _hue = mode?.hue || hue;
107
142
  let _shade = mode?.shade === undefined ? shade : mode.shade;
108
143
  const _offset = mode?.offset === undefined ? offset : mode.offset;
109
- const _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
144
+ let _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
110
145
  if (variable) {
111
146
  const _variables = variables?.[scheme] ? variables[scheme] : DEFAULT_THEME.colors.variables[scheme];
112
- const property = toProperty(_variables, variable);
113
- const [key, value] = property.split(/\.(?<value>.*)/u);
114
- if (key === 'palette') {
115
- _hue = toProperty(palette, value);
116
- } else {
117
- _hue = key;
118
- _shade = parseInt(value, 10);
147
+ const value = fromVariable(variable, _variables, palette);
148
+ _hue = value.hue;
149
+ _shade = value.shade;
150
+ if (value.transparency !== undefined) {
151
+ _transparency = value.transparency;
119
152
  }
120
153
  }
121
154
  if (_hue) {
@@ -145,6 +178,7 @@ const getColor = memoize(_ref => {
145
178
  shade,
146
179
  colors: theme.colors,
147
180
  palette: theme.palette,
181
+ opacity: theme.opacity,
148
182
  transparency,
149
183
  variable
150
184
  });
package/dist/index.cjs.js CHANGED
@@ -317,7 +317,8 @@ const colors = {
317
317
  primaryEmphasis: 'primaryHue.600',
318
318
  successEmphasis: 'successHue.600',
319
319
  warningEmphasis: 'warningHue.600',
320
- dangerEmphasis: 'dangerHue.600'
320
+ dangerEmphasis: 'dangerHue.600',
321
+ disabled: 'rgba(neutralHue.500, 100)'
321
322
  },
322
323
  border: {
323
324
  default: 'neutralHue.800',
@@ -329,7 +330,8 @@ const colors = {
329
330
  primaryEmphasis: 'primaryHue.600',
330
331
  successEmphasis: 'successHue.600',
331
332
  warningEmphasis: 'warningHue.600',
332
- dangerEmphasis: 'dangerHue.600'
333
+ dangerEmphasis: 'dangerHue.600',
334
+ disabled: 'neutralHue.800'
333
335
  },
334
336
  foreground: {
335
337
  default: 'neutralHue.300',
@@ -341,7 +343,8 @@ const colors = {
341
343
  danger: 'dangerHue.400',
342
344
  successEmphasis: 'successHue.300',
343
345
  warningEmphasis: 'warningHue.300',
344
- dangerEmphasis: 'dangerHue.300'
346
+ dangerEmphasis: 'dangerHue.300',
347
+ disabled: 'neutralHue.700'
345
348
  }
346
349
  },
347
350
  light: {
@@ -358,7 +361,8 @@ const colors = {
358
361
  primaryEmphasis: 'primaryHue.700',
359
362
  successEmphasis: 'successHue.700',
360
363
  warningEmphasis: 'warningHue.700',
361
- dangerEmphasis: 'dangerHue.700'
364
+ dangerEmphasis: 'dangerHue.700',
365
+ disabled: 'rgba(neutralHue.700, 100)'
362
366
  },
363
367
  border: {
364
368
  default: 'neutralHue.300',
@@ -370,7 +374,8 @@ const colors = {
370
374
  primaryEmphasis: 'primaryHue.700',
371
375
  successEmphasis: 'successHue.700',
372
376
  warningEmphasis: 'warningHue.700',
373
- dangerEmphasis: 'dangerHue.700'
377
+ dangerEmphasis: 'dangerHue.700',
378
+ disabled: 'neutralHue.300'
374
379
  },
375
380
  foreground: {
376
381
  default: 'neutralHue.900',
@@ -382,7 +387,8 @@ const colors = {
382
387
  danger: 'dangerHue.700',
383
388
  successEmphasis: 'successHue.900',
384
389
  warningEmphasis: 'warningHue.900',
385
- dangerEmphasis: 'dangerHue.900'
390
+ dangerEmphasis: 'dangerHue.900',
391
+ disabled: 'neutralHue.600'
386
392
  }
387
393
  }
388
394
  }
@@ -754,6 +760,41 @@ const toProperty = (object, path) => {
754
760
  throw new TypeError(`Error: unexpected '${typeof retVal}' type for color variable "${path}"`);
755
761
  }
756
762
  };
763
+ const fromRgba = value => {
764
+ let retVal;
765
+ const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
766
+ const _rgba = regex.exec(value);
767
+ if (_rgba && _rgba.groups) {
768
+ const property = _rgba.groups.property;
769
+ const transparency = parseFloat(_rgba.groups.alpha);
770
+ retVal = {
771
+ property,
772
+ transparency
773
+ };
774
+ } else {
775
+ throw new Error(`Error: invalid \`rgba\` value "${value}"`);
776
+ }
777
+ return retVal;
778
+ };
779
+ const fromVariable = (variable, variables, palette) => {
780
+ const retVal = {};
781
+ let property = toProperty(variables, variable);
782
+ if (property.startsWith('rgba')) {
783
+ const value = fromRgba(property);
784
+ property = value.property;
785
+ retVal.transparency = value.transparency;
786
+ }
787
+ const [key, value] = property.split(/\.(?<value>.*)/u);
788
+ if (key === 'palette') {
789
+ retVal.hue = toProperty(palette, value);
790
+ } else {
791
+ retVal.hue = key;
792
+ if (value !== undefined) {
793
+ retVal.shade = parseInt(value, 10);
794
+ }
795
+ }
796
+ return retVal;
797
+ };
757
798
  const getColor = memoize__default.default(_ref => {
758
799
  let {
759
800
  dark,
@@ -777,16 +818,14 @@ const getColor = memoize__default.default(_ref => {
777
818
  let _hue = mode?.hue || hue;
778
819
  let _shade = mode?.shade === undefined ? shade : mode.shade;
779
820
  const _offset = mode?.offset === undefined ? offset : mode.offset;
780
- const _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
821
+ let _transparency = mode?.transparency === undefined ? transparency : mode.transparency;
781
822
  if (variable) {
782
823
  const _variables = variables?.[scheme] ? variables[scheme] : DEFAULT_THEME.colors.variables[scheme];
783
- const property = toProperty(_variables, variable);
784
- const [key, value] = property.split(/\.(?<value>.*)/u);
785
- if (key === 'palette') {
786
- _hue = toProperty(palette, value);
787
- } else {
788
- _hue = key;
789
- _shade = parseInt(value, 10);
824
+ const value = fromVariable(variable, _variables, palette);
825
+ _hue = value.hue;
826
+ _shade = value.shade;
827
+ if (value.transparency !== undefined) {
828
+ _transparency = value.transparency;
790
829
  }
791
830
  }
792
831
  if (_hue) {
@@ -816,6 +855,7 @@ const getColor = memoize__default.default(_ref => {
816
855
  shade,
817
856
  colors: theme.colors,
818
857
  palette: theme.palette,
858
+ opacity: theme.opacity,
819
859
  transparency,
820
860
  variable
821
861
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-theming",
3
- "version": "9.0.0-next.10",
3
+ "version": "9.0.0-next.11",
4
4
  "description": "Theming utilities and components within the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "zendeskgarden:src": "src/index.ts",
51
- "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
51
+ "gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
52
52
  }