@workday/canvas-kit-docs 14.3.0-0232-next.0 → 14.3.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.
package/dist/es6/lib/docs.js
CHANGED
|
@@ -432224,6 +432224,75 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
432224
432224
|
}
|
|
432225
432225
|
}
|
|
432226
432226
|
},
|
|
432227
|
+
{
|
|
432228
|
+
"name": "handleColorSpace",
|
|
432229
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleColorSpace.ts",
|
|
432230
|
+
"description": "",
|
|
432231
|
+
"declarations": [
|
|
432232
|
+
{
|
|
432233
|
+
"name": "handleColorSpace",
|
|
432234
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleColorSpace.ts"
|
|
432235
|
+
}
|
|
432236
|
+
],
|
|
432237
|
+
"tags": {},
|
|
432238
|
+
"type": {
|
|
432239
|
+
"kind": "function",
|
|
432240
|
+
"parameters": [
|
|
432241
|
+
{
|
|
432242
|
+
"kind": "parameter",
|
|
432243
|
+
"name": "node",
|
|
432244
|
+
"type": {
|
|
432245
|
+
"kind": "symbol",
|
|
432246
|
+
"name": "ts.Node",
|
|
432247
|
+
"value": "Node"
|
|
432248
|
+
},
|
|
432249
|
+
"required": true,
|
|
432250
|
+
"rest": false,
|
|
432251
|
+
"description": "",
|
|
432252
|
+
"declarations": [
|
|
432253
|
+
{
|
|
432254
|
+
"name": "node",
|
|
432255
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
|
|
432256
|
+
}
|
|
432257
|
+
],
|
|
432258
|
+
"tags": {}
|
|
432259
|
+
},
|
|
432260
|
+
{
|
|
432261
|
+
"kind": "parameter",
|
|
432262
|
+
"name": "context",
|
|
432263
|
+
"type": {
|
|
432264
|
+
"kind": "symbol",
|
|
432265
|
+
"name": "TransformerContext",
|
|
432266
|
+
"value": "TransformerContext"
|
|
432267
|
+
},
|
|
432268
|
+
"required": true,
|
|
432269
|
+
"rest": false,
|
|
432270
|
+
"description": "",
|
|
432271
|
+
"declarations": [
|
|
432272
|
+
{
|
|
432273
|
+
"name": "context",
|
|
432274
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/types.ts"
|
|
432275
|
+
}
|
|
432276
|
+
],
|
|
432277
|
+
"tags": {}
|
|
432278
|
+
}
|
|
432279
|
+
],
|
|
432280
|
+
"members": [],
|
|
432281
|
+
"returnType": {
|
|
432282
|
+
"kind": "union",
|
|
432283
|
+
"value": [
|
|
432284
|
+
{
|
|
432285
|
+
"kind": "primitive",
|
|
432286
|
+
"value": "string"
|
|
432287
|
+
},
|
|
432288
|
+
{
|
|
432289
|
+
"kind": "primitive",
|
|
432290
|
+
"value": "void"
|
|
432291
|
+
}
|
|
432292
|
+
]
|
|
432293
|
+
}
|
|
432294
|
+
}
|
|
432295
|
+
},
|
|
432227
432296
|
{
|
|
432228
432297
|
"name": "handleCreateStencil",
|
|
432229
432298
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling-transform/lib/utils/handleCreateStencil.ts",
|
|
@@ -434642,6 +434711,209 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
434642
434711
|
]
|
|
434643
434712
|
}
|
|
434644
434713
|
},
|
|
434714
|
+
{
|
|
434715
|
+
"name": "maybeWrapValue",
|
|
434716
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx",
|
|
434717
|
+
"description": "Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with\n`{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any\nstring and returns a string with CSS variables wrapped if necessary.\n\n```ts\nmaybeWrapValue('1rem'); // 1rem\nmaybeWrapValue('--foo'); // var(--foo)\nmaybeWrapValue('var(--foo)'); // var(--foo)\nmaybeWrapValue('calc(--foo)'); // calc(var(--foo))\n```",
|
|
434718
|
+
"declarations": [
|
|
434719
|
+
{
|
|
434720
|
+
"name": "maybeWrapValue",
|
|
434721
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434722
|
+
}
|
|
434723
|
+
],
|
|
434724
|
+
"tags": {},
|
|
434725
|
+
"type": {
|
|
434726
|
+
"kind": "function",
|
|
434727
|
+
"parameters": [
|
|
434728
|
+
{
|
|
434729
|
+
"kind": "parameter",
|
|
434730
|
+
"name": "input",
|
|
434731
|
+
"type": {
|
|
434732
|
+
"kind": "primitive",
|
|
434733
|
+
"value": "string"
|
|
434734
|
+
},
|
|
434735
|
+
"required": true,
|
|
434736
|
+
"rest": false,
|
|
434737
|
+
"description": "",
|
|
434738
|
+
"declarations": [
|
|
434739
|
+
{
|
|
434740
|
+
"name": "input",
|
|
434741
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434742
|
+
}
|
|
434743
|
+
],
|
|
434744
|
+
"tags": {}
|
|
434745
|
+
},
|
|
434746
|
+
{
|
|
434747
|
+
"kind": "parameter",
|
|
434748
|
+
"name": "fallback",
|
|
434749
|
+
"type": {
|
|
434750
|
+
"kind": "primitive",
|
|
434751
|
+
"value": "string"
|
|
434752
|
+
},
|
|
434753
|
+
"required": false,
|
|
434754
|
+
"rest": false,
|
|
434755
|
+
"description": "",
|
|
434756
|
+
"declarations": [
|
|
434757
|
+
{
|
|
434758
|
+
"name": "fallback",
|
|
434759
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434760
|
+
}
|
|
434761
|
+
],
|
|
434762
|
+
"tags": {}
|
|
434763
|
+
}
|
|
434764
|
+
],
|
|
434765
|
+
"members": [],
|
|
434766
|
+
"returnType": {
|
|
434767
|
+
"kind": "primitive",
|
|
434768
|
+
"value": "string"
|
|
434769
|
+
}
|
|
434770
|
+
}
|
|
434771
|
+
},
|
|
434772
|
+
{
|
|
434773
|
+
"name": "DarkenProps",
|
|
434774
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx",
|
|
434775
|
+
"description": "",
|
|
434776
|
+
"declarations": [
|
|
434777
|
+
{
|
|
434778
|
+
"name": "DarkenProps",
|
|
434779
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434780
|
+
}
|
|
434781
|
+
],
|
|
434782
|
+
"tags": {},
|
|
434783
|
+
"type": {
|
|
434784
|
+
"kind": "object",
|
|
434785
|
+
"properties": [
|
|
434786
|
+
{
|
|
434787
|
+
"kind": "property",
|
|
434788
|
+
"name": "color",
|
|
434789
|
+
"required": true,
|
|
434790
|
+
"type": {
|
|
434791
|
+
"kind": "primitive",
|
|
434792
|
+
"value": "string"
|
|
434793
|
+
},
|
|
434794
|
+
"description": "The value being darkened.",
|
|
434795
|
+
"declarations": [
|
|
434796
|
+
{
|
|
434797
|
+
"name": "color",
|
|
434798
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434799
|
+
}
|
|
434800
|
+
],
|
|
434801
|
+
"tags": {}
|
|
434802
|
+
},
|
|
434803
|
+
{
|
|
434804
|
+
"kind": "property",
|
|
434805
|
+
"name": "fallback",
|
|
434806
|
+
"required": false,
|
|
434807
|
+
"type": {
|
|
434808
|
+
"kind": "primitive",
|
|
434809
|
+
"value": "string"
|
|
434810
|
+
},
|
|
434811
|
+
"description": "This is the color that will be used if `color` is not defined.",
|
|
434812
|
+
"declarations": [
|
|
434813
|
+
{
|
|
434814
|
+
"name": "fallback",
|
|
434815
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434816
|
+
}
|
|
434817
|
+
],
|
|
434818
|
+
"tags": {}
|
|
434819
|
+
},
|
|
434820
|
+
{
|
|
434821
|
+
"kind": "property",
|
|
434822
|
+
"name": "mixinColor",
|
|
434823
|
+
"required": true,
|
|
434824
|
+
"type": {
|
|
434825
|
+
"kind": "primitive",
|
|
434826
|
+
"value": "string"
|
|
434827
|
+
},
|
|
434828
|
+
"description": "The mixinColor is the color that will be mixed in with `color`.",
|
|
434829
|
+
"declarations": [
|
|
434830
|
+
{
|
|
434831
|
+
"name": "mixinColor",
|
|
434832
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434833
|
+
}
|
|
434834
|
+
],
|
|
434835
|
+
"tags": {}
|
|
434836
|
+
},
|
|
434837
|
+
{
|
|
434838
|
+
"kind": "property",
|
|
434839
|
+
"name": "mixinValue",
|
|
434840
|
+
"required": true,
|
|
434841
|
+
"type": {
|
|
434842
|
+
"kind": "primitive",
|
|
434843
|
+
"value": "string"
|
|
434844
|
+
},
|
|
434845
|
+
"description": "The mixinValue is the percent of the `mixinColor` that will be mixed in with `color`.",
|
|
434846
|
+
"declarations": [
|
|
434847
|
+
{
|
|
434848
|
+
"name": "mixinValue",
|
|
434849
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434850
|
+
}
|
|
434851
|
+
],
|
|
434852
|
+
"tags": {}
|
|
434853
|
+
}
|
|
434854
|
+
]
|
|
434855
|
+
}
|
|
434856
|
+
},
|
|
434857
|
+
{
|
|
434858
|
+
"name": "colorSpace",
|
|
434859
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx",
|
|
434860
|
+
"description": "",
|
|
434861
|
+
"declarations": [
|
|
434862
|
+
{
|
|
434863
|
+
"name": "colorSpace",
|
|
434864
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434865
|
+
}
|
|
434866
|
+
],
|
|
434867
|
+
"tags": {},
|
|
434868
|
+
"type": {
|
|
434869
|
+
"kind": "object",
|
|
434870
|
+
"properties": [
|
|
434871
|
+
{
|
|
434872
|
+
"kind": "property",
|
|
434873
|
+
"name": "darken",
|
|
434874
|
+
"type": {
|
|
434875
|
+
"kind": "function",
|
|
434876
|
+
"parameters": [
|
|
434877
|
+
{
|
|
434878
|
+
"kind": "parameter",
|
|
434879
|
+
"name": "__0",
|
|
434880
|
+
"type": {
|
|
434881
|
+
"kind": "symbol",
|
|
434882
|
+
"name": "DarkenProps",
|
|
434883
|
+
"value": "DarkenProps"
|
|
434884
|
+
},
|
|
434885
|
+
"required": true,
|
|
434886
|
+
"rest": false,
|
|
434887
|
+
"description": "The value being darkened.",
|
|
434888
|
+
"declarations": [
|
|
434889
|
+
{
|
|
434890
|
+
"name": "__0",
|
|
434891
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434892
|
+
}
|
|
434893
|
+
],
|
|
434894
|
+
"tags": {
|
|
434895
|
+
"param": "color\n \nThe value being darkened."
|
|
434896
|
+
}
|
|
434897
|
+
}
|
|
434898
|
+
],
|
|
434899
|
+
"members": [],
|
|
434900
|
+
"returnType": {
|
|
434901
|
+
"kind": "primitive",
|
|
434902
|
+
"value": "string"
|
|
434903
|
+
}
|
|
434904
|
+
},
|
|
434905
|
+
"description": "",
|
|
434906
|
+
"declarations": [
|
|
434907
|
+
{
|
|
434908
|
+
"name": "darken",
|
|
434909
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
434910
|
+
}
|
|
434911
|
+
],
|
|
434912
|
+
"tags": {}
|
|
434913
|
+
}
|
|
434914
|
+
]
|
|
434915
|
+
}
|
|
434916
|
+
},
|
|
434645
434917
|
{
|
|
434646
434918
|
"name": "createStylesCache",
|
|
434647
434919
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "14.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.
|
|
23
|
-
"@workday/canvas-kit-react": "14.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.3.0",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.3.0",
|
|
23
|
+
"@workday/canvas-kit-react": "14.3.0",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.3.0",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.3.0",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "14.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.
|
|
23
|
-
"@workday/canvas-kit-react": "14.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.3.0",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.3.0",
|
|
23
|
+
"@workday/canvas-kit-react": "14.3.0",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.3.0",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.3.0",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
28
28
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
1
|
+
import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
|
|
2
2
|
import CreateStyles from './examples/CreateStyles';
|
|
3
3
|
import CreateVars from './examples/CreateVars';
|
|
4
4
|
|
|
@@ -99,6 +99,39 @@ const styles = {
|
|
|
99
99
|
};
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
+
## colorSpace
|
|
103
|
+
|
|
104
|
+
### Darken
|
|
105
|
+
|
|
106
|
+
A utility that should be used for interactive states on buttons and links.
|
|
107
|
+
|
|
108
|
+
It will return [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix) and the result is mixing the first color and the mixin color together in a given colorspace by a given amount.
|
|
109
|
+
|
|
110
|
+
It takes a single options object with four fields:
|
|
111
|
+
1. `color`: The color that will be darkened (this is typically the "base" color on the given element).
|
|
112
|
+
2. `fallback`: A fallback color if the first color is not valid or not defined.
|
|
113
|
+
3. `mixinColor`: The color that will be mixed in with the first color (or fallback color).
|
|
114
|
+
4. `mixinValue`: The percentage of the mixin color that will be added to the first color (or fallback color).
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
import {colorSpace, createStyles} from '@workday/canvas-kit-styling';
|
|
118
|
+
import {system, brand} from '@workday/canvas-tokens-web';
|
|
119
|
+
|
|
120
|
+
const styles = createStyles({
|
|
121
|
+
backgroundColor: system.color.brand.accent.primary,
|
|
122
|
+
'&:hover': {
|
|
123
|
+
backgroundColor: colorSpace.darken(
|
|
124
|
+
{
|
|
125
|
+
color: system.color.brand.accent.primary,
|
|
126
|
+
fallback: brand.primary.darkest,
|
|
127
|
+
mixinColor: system.color.accent.overlay.mixin,
|
|
128
|
+
mixinValue: system.opacity.accent.hover
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
}
|
|
132
|
+
})
|
|
133
|
+
```
|
|
134
|
+
|
|
102
135
|
## keyframes
|
|
103
136
|
|
|
104
137
|
The `keyframes` function re-exports the [Emotion CSS keyframes](https://emotion.sh/docs/keyframes)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.3.0
|
|
3
|
+
"version": "14.3.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.3.0
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.3.0
|
|
50
|
-
"@workday/canvas-kit-react": "^14.3.0
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.3.0
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.3.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.3.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.3.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.3.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
53
53
|
"@workday/canvas-tokens-web": "^3.1.6",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "7235a397c9f49a8ef929c793b2321d9f1526ec5c"
|
|
65
65
|
}
|