@workday/canvas-kit-react 11.0.0-alpha.778-next.0 → 11.0.0-alpha.781-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.
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import {createComponent} from '@workday/canvas-kit-react/common';
3
3
  import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling';
4
- import {base, system} from '@workday/canvas-tokens-web';
4
+ import {system} from '@workday/canvas-tokens-web';
5
5
 
6
6
  const grow = keyframes({
7
7
  from: {
@@ -28,17 +28,18 @@ export interface CountBadgeProps extends CSProps {
28
28
  limit?: number;
29
29
  /**
30
30
  * Sets the variant of the Count Badge
31
- *
32
- * @default 'default'
33
31
  */
34
- variant?: 'default' | 'inverse';
32
+ variant?: 'inverse';
35
33
  }
36
34
 
35
+ // .cnvs-count-badge
37
36
  const countBadgeStencil = createStencil({
38
37
  base: {
39
38
  alignItems: 'center',
40
39
  animation: `${grow} 0.2s ease`,
40
+ background: system.color.static.red.default,
41
41
  borderRadius: system.shape.round,
42
+ color: system.color.text.inverse,
42
43
  display: 'inline-flex',
43
44
  fontFamily: system.fontFamily.default,
44
45
  fontSize: system.fontSize.subtext.medium,
@@ -48,18 +49,16 @@ const countBadgeStencil = createStencil({
48
49
  lineHeight: px2rem(20),
49
50
  minWidth: px2rem(20),
50
51
  padding: `0 ${px2rem(6.5)}`,
52
+ textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
51
53
  },
52
54
  modifiers: {
53
55
  variant: {
54
- default: {
55
- background: base.cinnamon500,
56
- color: base.frenchVanilla100,
57
- textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
58
- },
56
+ // .cnvs-count-badge--variant-inverse
59
57
  inverse: {
60
- background: base.frenchVanilla100,
58
+ background: system.color.bg.default,
61
59
  boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
62
- color: base.blueberry400,
60
+ color: system.color.text.primary.default,
61
+ textShadow: 'none',
63
62
  },
64
63
  },
65
64
  },
@@ -70,11 +69,7 @@ const countBadgeStencil = createStencil({
70
69
  */
71
70
  export const CountBadge = createComponent('span')({
72
71
  displayName: 'NewCountBadge',
73
- Component: (
74
- {count = 0, limit = 1000, variant = 'default', ...elemProps}: CountBadgeProps,
75
- ref,
76
- Element
77
- ) => {
72
+ Component: ({count = 0, limit = 1000, variant, ...elemProps}: CountBadgeProps, ref, Element) => {
78
73
  const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
79
74
 
80
75
  return (
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import {Theme, ThemeProvider, CacheProvider} from '@emotion/react';
3
3
  import {InputProvider} from './InputProvider';
4
4
  import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
5
- import {brand} from '@workday/canvas-tokens-web';
5
+ import {brand, base} from '@workday/canvas-tokens-web';
6
6
  import {createStyles, getCache} from '@workday/canvas-kit-styling';
7
7
 
8
8
  export interface CanvasProviderProps {
@@ -11,41 +11,41 @@ export interface CanvasProviderProps {
11
11
 
12
12
  // copied from brand/_variables.css
13
13
  const defaultBranding = createStyles({
14
- '--cnvs-brand-error-darkest': 'rgba(128,22,14,1)',
15
- '--cnvs-brand-common-alert-inner': 'var(--cnvs-base-palette-cantaloupe-400)',
16
- '--cnvs-brand-common-error-inner': 'var(--cnvs-base-palette-cinnamon-500)',
17
- '--cnvs-brand-common-focus-outline': 'var(--cnvs-base-palette-blueberry-400)',
18
- '--cnvs-brand-neutral-accent': 'var(--cnvs-base-palette-french-vanilla-100)',
19
- '--cnvs-brand-neutral-darkest': 'var(--cnvs-base-palette-licorice-400)',
20
- '--cnvs-brand-neutral-dark': 'var(--cnvs-base-palette-licorice-300)',
21
- '--cnvs-brand-neutral-base': 'var(--cnvs-base-palette-soap-600)',
22
- '--cnvs-brand-neutral-light': 'var(--cnvs-base-palette-soap-300)',
23
- '--cnvs-brand-neutral-lightest': 'var(--cnvs-base-palette-soap-200)',
24
- '--cnvs-brand-success-accent': 'var(--cnvs-base-palette-french-vanilla-100)',
25
- '--cnvs-brand-success-darkest': 'var(--cnvs-base-palette-green-apple-600)',
26
- '--cnvs-brand-success-dark': 'var(--cnvs-base-palette-green-apple-500)',
27
- '--cnvs-brand-success-base': 'var(--cnvs-base-palette-green-apple-400)',
28
- '--cnvs-brand-success-light': 'var(--cnvs-base-palette-green-apple-300)',
29
- '--cnvs-brand-success-lightest': 'var(--cnvs-base-palette-green-apple-100)',
30
- '--cnvs-brand-error-accent': 'var(--cnvs-base-palette-french-vanilla-100)',
31
- '--cnvs-brand-error-dark': 'var(--cnvs-base-palette-cinnamon-600)',
32
- '--cnvs-brand-error-base': 'var(--cnvs-base-palette-cinnamon-500)',
33
- '--cnvs-brand-error-light': 'var(--cnvs-base-palette-cinnamon-200)',
34
- '--cnvs-brand-error-lightest': 'var(--cnvs-base-palette-cinnamon-100)',
35
- '--cnvs-brand-alert-accent': 'var(--cnvs-base-palette-french-vanilla-100)',
36
- '--cnvs-brand-alert-darkest': 'var(--cnvs-base-palette-cantaloupe-600)',
37
- '--cnvs-brand-alert-dark': 'var(--cnvs-base-palette-cantaloupe-500)',
38
- '--cnvs-brand-alert-base': 'var(--cnvs-base-palette-cantaloupe-400)',
39
- '--cnvs-brand-alert-light': 'var(--cnvs-base-palette-cantaloupe-200)',
40
- '--cnvs-brand-alert-lightest': 'var(--cnvs-base-palette-cantaloupe-100)',
41
- '--cnvs-brand-primary-accent': 'var(--cnvs-base-palette-french-vanilla-100)',
42
- '--cnvs-brand-primary-darkest': 'var(--cnvs-base-palette-blueberry-600)',
43
- '--cnvs-brand-primary-dark': 'var(--cnvs-base-palette-blueberry-500)',
44
- '--cnvs-brand-primary-base': 'var(--cnvs-base-palette-blueberry-400)',
45
- '--cnvs-brand-primary-light': 'var(--cnvs-base-palette-blueberry-200)',
46
- '--cnvs-brand-primary-lightest': 'var(--cnvs-base-palette-blueberry-100)',
47
- '--cnvs-brand-gradient-primary':
48
- 'linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%)',
14
+ [brand.error.darkest]: 'rgba(128,22,14,1)',
15
+ [brand.common.alertInner]: base.cantaloupe400,
16
+ [brand.common.errorInner]: base.cinnamon500,
17
+ [brand.common.focusOutline]: base.blueberry400,
18
+ [brand.neutral.accent]: base.frenchVanilla100,
19
+ [brand.neutral.darkest]: base.licorice400,
20
+ [brand.neutral.dark]: base.licorice300,
21
+ [brand.neutral.base]: base.soap600,
22
+ [brand.neutral.light]: base.soap300,
23
+ [brand.neutral.lightest]: base.soap200,
24
+ [brand.success.accent]: base.frenchVanilla100,
25
+ [brand.success.darkest]: base.greenApple600,
26
+ [brand.success.dark]: base.greenApple500,
27
+ [brand.success.base]: base.greenApple400,
28
+ [brand.success.light]: base.greenApple300,
29
+ [brand.success.lightest]: base.greenApple100,
30
+ [brand.error.accent]: base.frenchVanilla100,
31
+ [brand.error.dark]: base.cinnamon600,
32
+ [brand.error.base]: base.cinnamon500,
33
+ [brand.error.light]: base.cinnamon200,
34
+ [brand.error.lightest]: base.cinnamon100,
35
+ [brand.alert.accent]: base.frenchVanilla100,
36
+ [brand.alert.darkest]: base.cantaloupe600,
37
+ [brand.alert.dark]: base.cantaloupe500,
38
+ [brand.alert.base]: base.cantaloupe400,
39
+ [brand.alert.light]: base.cantaloupe200,
40
+ [brand.alert.lightest]: base.cantaloupe100,
41
+ [brand.primary.accent]: base.frenchVanilla100,
42
+ [brand.primary.darkest]: base.blueberry600,
43
+ [brand.primary.dark]: base.blueberry500,
44
+ [brand.primary.base]: base.blueberry400,
45
+ [brand.primary.light]: base.blueberry200,
46
+ [brand.primary.lightest]: base.blueberry100,
47
+ [brand.gradient
48
+ .primary]: `linear-gradient(90deg, ${brand.primary.base} 0%, ${brand.primary.dark} 100%)`,
49
49
  });
50
50
 
51
51
  const mappedKeys = {
@@ -15,10 +15,8 @@ export interface CountBadgeProps extends CSProps {
15
15
  limit?: number;
16
16
  /**
17
17
  * Sets the variant of the Count Badge
18
- *
19
- * @default 'default'
20
18
  */
21
- variant?: 'default' | 'inverse';
19
+ variant?: 'inverse';
22
20
  }
23
21
  /**
24
22
  * `CountBadge` provides a quantity-based summary with dynamic values.
@@ -1 +1 @@
1
- {"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAiCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
1
+ {"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAWrB,CAAC"}
@@ -24,13 +24,14 @@ const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
25
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
- const grow = canvas_kit_styling_1.keyframes({ name: "d9cb82", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
27
+ const grow = canvas_kit_styling_1.keyframes({ name: "56eab3", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
28
+ // .cnvs-count-badge
28
29
  const countBadgeStencil = canvas_kit_styling_1.createStencil({
29
- base: { name: "b5e677", styles: "box-sizing:border-box;align-items:center;animation:animation-d9cb82 0.2s ease;border-radius:var(--cnvs-sys-shape-round);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
30
+ base: { name: "3c746d", styles: "box-sizing:border-box;align-items:center;animation:animation-56eab3 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
30
31
  modifiers: {
31
32
  variant: {
32
- default: { name: "8b3806", styles: "background:var(--cnvs-base-palette-cinnamon-500);color:var(--cnvs-base-palette-french-vanilla-100);text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
33
- inverse: { name: "941238", styles: "background:var(--cnvs-base-palette-french-vanilla-100);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400);" }
33
+ // .cnvs-count-badge--variant-inverse
34
+ inverse: { name: "6cf61b", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
34
35
  }
35
36
  }
36
37
  }, "cnvs-count-badge");
@@ -39,7 +40,7 @@ const countBadgeStencil = canvas_kit_styling_1.createStencil({
39
40
  */
40
41
  exports.CountBadge = common_1.createComponent('span')({
41
42
  displayName: 'NewCountBadge',
42
- Component: ({ count = 0, limit = 1000, variant = 'default', ...elemProps }, ref, Element) => {
43
+ Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
43
44
  const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
44
45
  return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
45
46
  },
@@ -27,7 +27,7 @@ const theming_1 = require("./theming");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
29
29
  // copied from brand/_variables.css
30
- const defaultBranding = canvas_kit_styling_1.createStyles({ name: "2fed25", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
30
+ const defaultBranding = canvas_kit_styling_1.createStyles({ name: "9ced8c", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
31
31
  const mappedKeys = {
32
32
  lightest: 'lightest',
33
33
  light: 'light',
@@ -15,10 +15,8 @@ export interface CountBadgeProps extends CSProps {
15
15
  limit?: number;
16
16
  /**
17
17
  * Sets the variant of the Count Badge
18
- *
19
- * @default 'default'
20
18
  */
21
- variant?: 'default' | 'inverse';
19
+ variant?: 'inverse';
22
20
  }
23
21
  /**
24
22
  * `CountBadge` provides a quantity-based summary with dynamic values.
@@ -1 +1 @@
1
- {"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAiCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
1
+ {"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAWrB,CAAC"}
@@ -1,14 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-kit-styling';
4
- import { base, system } from '@workday/canvas-tokens-web';
5
- const grow = keyframes({ name: "d9cb82", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
4
+ import { system } from '@workday/canvas-tokens-web';
5
+ const grow = keyframes({ name: "56eab3", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
6
+ // .cnvs-count-badge
6
7
  const countBadgeStencil = createStencil({
7
- base: { name: "b5e677", styles: "box-sizing:border-box;align-items:center;animation:animation-d9cb82 0.2s ease;border-radius:var(--cnvs-sys-shape-round);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
8
+ base: { name: "3c746d", styles: "box-sizing:border-box;align-items:center;animation:animation-56eab3 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
8
9
  modifiers: {
9
10
  variant: {
10
- default: { name: "8b3806", styles: "background:var(--cnvs-base-palette-cinnamon-500);color:var(--cnvs-base-palette-french-vanilla-100);text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
11
- inverse: { name: "941238", styles: "background:var(--cnvs-base-palette-french-vanilla-100);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400);" }
11
+ // .cnvs-count-badge--variant-inverse
12
+ inverse: { name: "6cf61b", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
12
13
  }
13
14
  }
14
15
  }, "cnvs-count-badge");
@@ -17,7 +18,7 @@ const countBadgeStencil = createStencil({
17
18
  */
18
19
  export const CountBadge = createComponent('span')({
19
20
  displayName: 'NewCountBadge',
20
- Component: ({ count = 0, limit = 1000, variant = 'default', ...elemProps }, ref, Element) => {
21
+ Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
21
22
  const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
22
23
  return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
23
24
  },
@@ -2,10 +2,10 @@ import * as React from 'react';
2
2
  import { ThemeProvider, CacheProvider } from '@emotion/react';
3
3
  import { InputProvider } from './InputProvider';
4
4
  import { defaultCanvasTheme, useTheme } from './theming';
5
- import { brand } from '@workday/canvas-tokens-web';
5
+ import { brand, base } from '@workday/canvas-tokens-web';
6
6
  import { createStyles, getCache } from '@workday/canvas-kit-styling';
7
7
  // copied from brand/_variables.css
8
- const defaultBranding = createStyles({ name: "2fed25", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
8
+ const defaultBranding = createStyles({ name: "9ced8c", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
9
9
  const mappedKeys = {
10
10
  lightest: 'lightest',
11
11
  light: 'light',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.778-next.0",
3
+ "version": "11.0.0-alpha.781-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.778-next.0",
53
- "@workday/canvas-kit-styling": "^11.0.0-alpha.778-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.781-next.0",
53
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.781-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^1.3.1",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "46b95e41ca41eccf0a087ec904d12849ef83b729"
70
+ "gitHead": "d6f6fb3561eb04c34f1a6b43531f4c717140618d"
71
71
  }