@workday/canvas-kit-styling 16.0.0-alpha.0441-next.0 → 16.0.0-alpha.0445-next.0

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 (7) hide show
  1. package/dist/commonjs/lib/colorSpace.d.ts +8 -2
  2. package/dist/commonjs/lib/colorSpace.d.ts.map +1 -1
  3. package/dist/commonjs/lib/colorSpace.js +16 -6
  4. package/dist/es6/lib/colorSpace.d.ts +8 -2
  5. package/dist/es6/lib/colorSpace.d.ts.map +1 -1
  6. package/dist/es6/lib/colorSpace.js +16 -6
  7. package/package.json +2 -2
package/dist/commonjs/lib/colorSpace.d.ts CHANGED
@@ -44,10 +44,16 @@ export interface InteractiveStateProps {
44
44
  * @default 'accent'
45
45
  */
46
46
  colorType?: 'accent' | 'surface';
47
+ /**
48
+ * A string that will determine which surface overlay variant to use.
49
+ *
50
+ * @default 'default'
51
+ */
52
+ surfaceType?: 'default' | 'inverse';
47
53
  }
48
54
  export declare const colorSpace: {
49
55
  darken: ({ color, fallback, mixinColor, mixinValue }: DarkenProps) => string;
50
- hover: ({ color, fallback, colorType }: InteractiveStateProps) => string;
51
- pressed: ({ color, fallback, colorType }: InteractiveStateProps) => string;
56
+ hover: ({ color, fallback, colorType, surfaceType, }: InteractiveStateProps) => string;
57
+ pressed: ({ color, fallback, colorType, surfaceType, }: InteractiveStateProps) => string;
52
58
  };
53
59
  //# sourceMappingURL=colorSpace.d.ts.map
package/dist/commonjs/lib/colorSpace.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colorSpace.d.ts","sourceRoot":"","sources":["../../../lib/colorSpace.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAiCD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAsDD,eAAO,MAAM,UAAU;0DA5EoC,WAAW;4CAqCd,qBAAqB;8CA8BnB,qBAAqB;CAa9E,CAAC"}
1
+ {"version":3,"file":"colorSpace.d.ts","sourceRoot":"","sources":["../../../lib/colorSpace.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAiCD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACrC;AA4ED,eAAO,MAAM,UAAU;0DAxGoC,WAAW;0DAgDnE,qBAAqB;4DAyCrB,qBAAqB;CAmBvB,CAAC"}
package/dist/commonjs/lib/colorSpace.js CHANGED
@@ -63,14 +63,19 @@ const darken = ({ color, fallback, mixinColor, mixinValue }) => {
63
63
  * ```
64
64
  * - `color`: Base color value.
65
65
  * - `fallback`: Fallback color value if the base color is not defined or invalid.
66
- * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.color.accent....` or `system.color.surface....`).
66
+ * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.legacy.color.accent....` or `system.legacy.color.surface....`).
67
67
  *
68
68
  */
69
- const hover = ({ color, fallback, colorType = 'accent' }) => {
69
+ const hover = ({ color, fallback, colorType = 'accent', surfaceType = 'default', }) => {
70
+ const mixinColor = colorType === 'accent'
71
+ ? canvas_tokens_web_1.system.legacy.color.accent.overlay.hover
72
+ : surfaceType === 'default'
73
+ ? canvas_tokens_web_1.system.legacy.color.surface.overlay.hover.default
74
+ : canvas_tokens_web_1.system.legacy.color.surface.overlay.hover.inverse;
70
75
  return darken({
71
76
  color: color,
72
77
  fallback: fallback,
73
- mixinColor: canvas_tokens_web_1.system.legacy.color[colorType].overlay.mixin,
78
+ mixinColor: mixinColor,
74
79
  mixinValue: canvas_tokens_web_1.system.legacy.opacity[colorType].hover,
75
80
  });
76
81
  };
@@ -84,7 +89,7 @@ const hover = ({ color, fallback, colorType = 'accent' }) => {
84
89
  * ```
85
90
  * - `color`: Base color value.
86
91
  * - `fallback`: Fallback color value if the base color is not defined or invalid.
87
- * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from in tokens (i.e. `system.color.accent....`, `system.color.surface....`, `system.opacity.accent....` or `system.opacity.surface....`).
92
+ * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from in tokens (i.e. `system.legacy.color.accent....`, `system.legacy.color.surface....`, `system.opacity.accent....` or `system.opacity.surface....`).
88
93
  *
89
94
  * @param color
90
95
  * The value being darkened.
@@ -95,11 +100,16 @@ const hover = ({ color, fallback, colorType = 'accent' }) => {
95
100
  * @param colorType
96
101
  * A string that will determine where the mixin color and the mixin percentage comes from within tokens.
97
102
  */
98
- const pressed = ({ color, fallback, colorType = 'accent' }) => {
103
+ const pressed = ({ color, fallback, colorType = 'accent', surfaceType = 'default', }) => {
104
+ const mixinColor = colorType === 'accent'
105
+ ? canvas_tokens_web_1.system.legacy.color.accent.overlay.pressed
106
+ : surfaceType === 'default'
107
+ ? canvas_tokens_web_1.system.legacy.color.surface.overlay.pressed.default
108
+ : canvas_tokens_web_1.system.legacy.color.surface.overlay.pressed.inverse;
99
109
  return darken({
100
110
  color: color,
101
111
  fallback: fallback,
102
- mixinColor: canvas_tokens_web_1.system.legacy.color[colorType].overlay.mixin,
112
+ mixinColor: mixinColor,
103
113
  mixinValue: canvas_tokens_web_1.system.legacy.opacity[colorType].pressed,
104
114
  });
105
115
  };
package/dist/es6/lib/colorSpace.d.ts CHANGED
@@ -44,10 +44,16 @@ export interface InteractiveStateProps {
44
44
  * @default 'accent'
45
45
  */
46
46
  colorType?: 'accent' | 'surface';
47
+ /**
48
+ * A string that will determine which surface overlay variant to use.
49
+ *
50
+ * @default 'default'
51
+ */
52
+ surfaceType?: 'default' | 'inverse';
47
53
  }
48
54
  export declare const colorSpace: {
49
55
  darken: ({ color, fallback, mixinColor, mixinValue }: DarkenProps) => string;
50
- hover: ({ color, fallback, colorType }: InteractiveStateProps) => string;
51
- pressed: ({ color, fallback, colorType }: InteractiveStateProps) => string;
56
+ hover: ({ color, fallback, colorType, surfaceType, }: InteractiveStateProps) => string;
57
+ pressed: ({ color, fallback, colorType, surfaceType, }: InteractiveStateProps) => string;
52
58
  };
53
59
  //# sourceMappingURL=colorSpace.d.ts.map
package/dist/es6/lib/colorSpace.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colorSpace.d.ts","sourceRoot":"","sources":["../../../lib/colorSpace.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAiCD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAsDD,eAAO,MAAM,UAAU;0DA5EoC,WAAW;4CAqCd,qBAAqB;8CA8BnB,qBAAqB;CAa9E,CAAC"}
1
+ {"version":3,"file":"colorSpace.d.ts","sourceRoot":"","sources":["../../../lib/colorSpace.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAcvE;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAiCD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACrC;AA4ED,eAAO,MAAM,UAAU;0DAxGoC,WAAW;0DAgDnE,qBAAqB;4DAyCrB,qBAAqB;CAmBvB,CAAC"}
package/dist/es6/lib/colorSpace.js CHANGED
@@ -59,14 +59,19 @@ const darken = ({ color, fallback, mixinColor, mixinValue }) => {
59
59
  * ```
60
60
  * - `color`: Base color value.
61
61
  * - `fallback`: Fallback color value if the base color is not defined or invalid.
62
- * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.color.accent....` or `system.color.surface....`).
62
+ * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.legacy.color.accent....` or `system.legacy.color.surface....`).
63
63
  *
64
64
  */
65
- const hover = ({ color, fallback, colorType = 'accent' }) => {
65
+ const hover = ({ color, fallback, colorType = 'accent', surfaceType = 'default', }) => {
66
+ const mixinColor = colorType === 'accent'
67
+ ? system.legacy.color.accent.overlay.hover
68
+ : surfaceType === 'default'
69
+ ? system.legacy.color.surface.overlay.hover.default
70
+ : system.legacy.color.surface.overlay.hover.inverse;
66
71
  return darken({
67
72
  color: color,
68
73
  fallback: fallback,
69
- mixinColor: system.legacy.color[colorType].overlay.mixin,
74
+ mixinColor: mixinColor,
70
75
  mixinValue: system.legacy.opacity[colorType].hover,
71
76
  });
72
77
  };
@@ -80,7 +85,7 @@ const hover = ({ color, fallback, colorType = 'accent' }) => {
80
85
  * ```
81
86
  * - `color`: Base color value.
82
87
  * - `fallback`: Fallback color value if the base color is not defined or invalid.
83
- * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from in tokens (i.e. `system.color.accent....`, `system.color.surface....`, `system.opacity.accent....` or `system.opacity.surface....`).
88
+ * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from in tokens (i.e. `system.legacy.color.accent....`, `system.legacy.color.surface....`, `system.opacity.accent....` or `system.opacity.surface....`).
84
89
  *
85
90
  * @param color
86
91
  * The value being darkened.
@@ -91,11 +96,16 @@ const hover = ({ color, fallback, colorType = 'accent' }) => {
91
96
  * @param colorType
92
97
  * A string that will determine where the mixin color and the mixin percentage comes from within tokens.
93
98
  */
94
- const pressed = ({ color, fallback, colorType = 'accent' }) => {
99
+ const pressed = ({ color, fallback, colorType = 'accent', surfaceType = 'default', }) => {
100
+ const mixinColor = colorType === 'accent'
101
+ ? system.legacy.color.accent.overlay.pressed
102
+ : surfaceType === 'default'
103
+ ? system.legacy.color.surface.overlay.pressed.default
104
+ : system.legacy.color.surface.overlay.pressed.inverse;
95
105
  return darken({
96
106
  color: color,
97
107
  fallback: fallback,
98
- mixinColor: system.legacy.color[colorType].overlay.mixin,
108
+ mixinColor: mixinColor,
99
109
  mixinValue: system.legacy.opacity[colorType].pressed,
100
110
  });
101
111
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-styling",
3
- "version": "16.0.0-alpha.0441-next.0",
3
+ "version": "16.0.0-alpha.0445-next.0",
4
4
  "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -57,5 +57,5 @@
57
57
  "@workday/canvas-tokens-web": "4.4.0-beta.3",
58
58
  "typescript": "5.0"
59
59
  },
60
- "gitHead": "df9a69acd1329b7bc14a225dfbe46d4cfe3265c0"
60
+ "gitHead": "fc927ea8a9cdb16ad227bbfc5d843dba09009b43"
61
61
  }