@pega/cosmos-react-core 9.0.0-build.7.0 → 9.0.0-build.7.2

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,6 +1,6 @@
1
1
  import type { DefaultTheme } from 'styled-components';
2
2
  export declare const globalSpacingStyles: import("styled-components").FlattenSimpleInterpolation;
3
- export declare const createGlobalRootStyles: ({ base: { scale, "hit-area": hitArea } }: DefaultTheme) => string;
3
+ export declare const createGlobalRootStyles: ({ base: { scale, "hit-area": hitArea, palette } }: DefaultTheme) => string;
4
4
  export declare const createGlobalBodyStyles: ({ base: { "font-size": baseFontSize, "font-scale": baseFontScale, "font-stretch": baseFontStretch, "letter-spacing": baseLetterSpacing, "font-family": fontFamily, palette: { "foreground-color": foregroundColor, "app-background": background, "primary-background": primaryBackground }, "line-height": lineHeight }, components: { text } }: DefaultTheme) => string;
5
5
  declare const _default: import("styled-components").GlobalStyleComponent<{}, DefaultTheme>;
6
6
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,0CAA0C,YAAY,WAe5F,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,iVAepC,YAAY,WAoBd,CAAC;;AAEF,wBAwDG"}
1
+ {"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,mDAEpC,YAAY,WAgBd,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,iVAepC,YAAY,WAoBd,CAAC;;AAEF,wBAwDG"}
@@ -1,4 +1,4 @@
1
- import { mix } from 'polished';
1
+ import { mix, getLuminance } from 'polished';
2
2
  import { createGlobalStyle, css } from 'styled-components';
3
3
  import { calculateFontSize } from './utils';
4
4
  export const globalSpacingStyles = css `
@@ -10,7 +10,7 @@ export const globalSpacingStyles = css `
10
10
  padding: 0;
11
11
  }
12
12
  `;
13
- export const createGlobalRootStyles = ({ base: { scale, 'hit-area': hitArea } }) => {
13
+ export const createGlobalRootStyles = ({ base: { scale, 'hit-area': hitArea, palette } }) => {
14
14
  return css `
15
15
  :root,
16
16
  :host {
@@ -23,6 +23,7 @@ export const createGlobalRootStyles = ({ base: { scale, 'hit-area': hitArea } })
23
23
  @media (pointer: coarse) {
24
24
  --hit-area: ${hitArea.finger};
25
25
  }
26
+ color-scheme: ${getLuminance(palette['foreground-color']) > 0.5 ? 'dark' : 'light'};
26
27
  }
27
28
  `.join('');
28
29
  };
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAgB,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;oBACT,OAAO,CAAC,OAAO;;;sBAGb,OAAO,CAAC,MAAM;;;GAGjC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,cAAc,EAAE,eAAe,EAC/B,gBAAgB,EAAE,iBAAiB,EACnC,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EACP,kBAAkB,EAAE,eAAe,EACnC,gBAAgB,EAAE,UAAU,EAC5B,oBAAoB,EAAE,iBAAiB,EACxC,EACD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;sBACT,eAAe;wBACb,iBAAiB;oBACrB,UAAU;0BACJ,iBAAiB;;GAExC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,OAAO,EAAE,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB;;;;;;;;;;;;;oBAaL,KAAK;;;;eAIV,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC;;;;MAItD,eAAe;QACjB,GAAG,CAAA;;;;KAIF;;MAEC,sBAAsB,CAAC,KAAK,CAAC;;MAE7B,sBAAsB,CAAC,KAAK,CAAC;;;;;;;;;;;;GAYhC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { mix } from 'polished';\nimport { createGlobalStyle, css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { calculateFontSize } from './utils';\nimport type { FontSize } from './utils';\n\nexport const globalSpacingStyles = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n`;\n\nexport const createGlobalRootStyles = ({ base: { scale, 'hit-area': hitArea } }: DefaultTheme) => {\n return css`\n :root,\n :host {\n height: 100%;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n font-size: calc(${scale} * 1rem);\n --hit-area: ${hitArea.compact};\n\n @media (pointer: coarse) {\n --hit-area: ${hitArea.finger};\n }\n }\n `.join('');\n};\n\nexport const createGlobalBodyStyles = ({\n base: {\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n 'font-stretch': baseFontStretch,\n 'letter-spacing': baseLetterSpacing,\n 'font-family': fontFamily,\n palette: {\n 'foreground-color': foregroundColor,\n 'app-background': background,\n 'primary-background': primaryBackground\n },\n 'line-height': lineHeight\n },\n components: { text }\n}: DefaultTheme) => {\n // Can't call a hook here\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n return css`\n body,\n :host {\n min-height: 100%;\n margin: 0;\n padding: 0;\n font-size: ${fontSize[text.primary['font-size'] as FontSize]};\n font-family: ${fontFamily};\n color: ${foregroundColor};\n line-height: ${lineHeight};\n font-stretch: ${baseFontStretch};\n letter-spacing: ${baseLetterSpacing};\n background: ${background};\n background-color: ${primaryBackground};\n }\n `.join('');\n};\n\nexport default createGlobalStyle(({ theme }) => {\n const {\n base: {\n 'custom-scrollbar': customScrollbar,\n palette: { 'foreground-color': foreground },\n shadow: { focus },\n transparency: { 'transparent-3': transparent }\n },\n components: {\n 'form-control': { 'background-color': backgroundColor }\n }\n } = theme;\n return css`\n ${globalSpacingStyles}\n\n body {\n overscroll-behavior: none;\n }\n\n h1:focus-visible,\n h2:focus-visible,\n h3:focus-visible,\n h4:focus-visible,\n h5:focus-visible,\n h6:focus-visible {\n outline: transparent;\n box-shadow: ${focus};\n }\n\n ::placeholder {\n color: ${mix(transparent, foreground, backgroundColor)};\n opacity: unset;\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n ${createGlobalRootStyles(theme)}\n\n ${createGlobalBodyStyles(theme)}\n\n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n `;\n});\n"]}
1
+ {"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAChC,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;oBACT,OAAO,CAAC,OAAO;;;sBAGb,OAAO,CAAC,MAAM;;sBAEd,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;GAErF,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,cAAc,EAAE,eAAe,EAC/B,gBAAgB,EAAE,iBAAiB,EACnC,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EACP,kBAAkB,EAAE,eAAe,EACnC,gBAAgB,EAAE,UAAU,EAC5B,oBAAoB,EAAE,iBAAiB,EACxC,EACD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;sBACT,eAAe;wBACb,iBAAiB;oBACrB,UAAU;0BACJ,iBAAiB;;GAExC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,OAAO,EAAE,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB;;;;;;;;;;;;;oBAaL,KAAK;;;;eAIV,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC;;;;MAItD,eAAe;QACjB,GAAG,CAAA;;;;KAIF;;MAEC,sBAAsB,CAAC,KAAK,CAAC;;MAE7B,sBAAsB,CAAC,KAAK,CAAC;;;;;;;;;;;;GAYhC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { mix, getLuminance } from 'polished';\nimport { createGlobalStyle, css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { calculateFontSize } from './utils';\nimport type { FontSize } from './utils';\n\nexport const globalSpacingStyles = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n`;\n\nexport const createGlobalRootStyles = ({\n base: { scale, 'hit-area': hitArea, palette }\n}: DefaultTheme) => {\n return css`\n :root,\n :host {\n height: 100%;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n font-size: calc(${scale} * 1rem);\n --hit-area: ${hitArea.compact};\n\n @media (pointer: coarse) {\n --hit-area: ${hitArea.finger};\n }\n color-scheme: ${getLuminance(palette['foreground-color']) > 0.5 ? 'dark' : 'light'};\n }\n `.join('');\n};\n\nexport const createGlobalBodyStyles = ({\n base: {\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n 'font-stretch': baseFontStretch,\n 'letter-spacing': baseLetterSpacing,\n 'font-family': fontFamily,\n palette: {\n 'foreground-color': foregroundColor,\n 'app-background': background,\n 'primary-background': primaryBackground\n },\n 'line-height': lineHeight\n },\n components: { text }\n}: DefaultTheme) => {\n // Can't call a hook here\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n return css`\n body,\n :host {\n min-height: 100%;\n margin: 0;\n padding: 0;\n font-size: ${fontSize[text.primary['font-size'] as FontSize]};\n font-family: ${fontFamily};\n color: ${foregroundColor};\n line-height: ${lineHeight};\n font-stretch: ${baseFontStretch};\n letter-spacing: ${baseLetterSpacing};\n background: ${background};\n background-color: ${primaryBackground};\n }\n `.join('');\n};\n\nexport default createGlobalStyle(({ theme }) => {\n const {\n base: {\n 'custom-scrollbar': customScrollbar,\n palette: { 'foreground-color': foreground },\n shadow: { focus },\n transparency: { 'transparent-3': transparent }\n },\n components: {\n 'form-control': { 'background-color': backgroundColor }\n }\n } = theme;\n return css`\n ${globalSpacingStyles}\n\n body {\n overscroll-behavior: none;\n }\n\n h1:focus-visible,\n h2:focus-visible,\n h3:focus-visible,\n h4:focus-visible,\n h5:focus-visible,\n h6:focus-visible {\n outline: transparent;\n box-shadow: ${focus};\n }\n\n ::placeholder {\n color: ${mix(transparent, foreground, backgroundColor)};\n opacity: unset;\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n ${createGlobalRootStyles(theme)}\n\n ${createGlobalBodyStyles(theme)}\n\n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n `;\n});\n"]}
@@ -12,7 +12,7 @@
12
12
  "success": "#3FDF78",
13
13
  "info": "#3AB4FD",
14
14
  "interactive": "#75D7CD",
15
- "pending": "#8B6EC3",
15
+ "pending": "#A986F1",
16
16
  "border-line": "#3B3F4C",
17
17
  "skeleton": "#AAB0C0",
18
18
  "app-foreground": "#F5F7FA"
@@ -37,7 +37,7 @@
37
37
  }
38
38
  },
39
39
  "avatar": {
40
- "background-color": "#15112C"
40
+ "background-color": "#30314D"
41
41
  },
42
42
  "app-shell": {
43
43
  "nav": {
@@ -1,25 +1,32 @@
1
1
  {
2
2
  "base": {
3
- "icon-set": "streamline",
4
3
  "palette": {
5
- "brand-primary": "#515fc1",
6
- "app-background": "repeating-linear-gradient(135deg, rgba(242,244,246, 0.24) 0px, rgba(242,244,246, 0.24) 1px,transparent 1px, transparent 11px,rgba(242,244,246, 0.24) 11px, rgba(242,244,246, 0.24) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(45deg, rgba(242,244,246, 0.24) 0px, rgba(242,244,246, 0.24) 1px,transparent 1px, transparent 11px,rgba(242,244,246, 0.24) 11px, rgba(242,244,246, 0.24) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, rgba(242,244,246, 0.24) 0px, rgba(242,244,246, 0.24) 1px,transparent 1px, transparent 11px,rgba(242,244,246, 0.24) 11px, rgba(242,244,246, 0.24) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, rgba(242,244,246, 0.24) 0px, rgba(242,244,246, 0.24) 1px,transparent 1px, transparent 11px,rgba(242,244,246, 0.24) 11px, rgba(242,244,246, 0.24) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgba(192,238,231, 0.41),rgb(201,197,240))"
4
+ "ai": "#8C2EEB",
5
+ "app-background": "radial-gradient(circle at top center, #FFFFFF,#EDEDF2)",
6
+ "primary-background": "#FFFFFF",
7
+ "secondary-background": "#F4F6FA",
8
+ "foreground-color": "#333333",
9
+ "brand-primary": "#504cd5",
10
+ "urgent": "#D32F2F",
11
+ "warn": "#ED6C02",
12
+ "success": "#2E7D32",
13
+ "info": "#0288D1",
14
+ "interactive": "#504cd5",
15
+ "pending": "#7E57C2",
16
+ "border-line": "#D0D4DC",
17
+ "skeleton": "#DADDE5",
18
+ "app-foreground": "#333333"
7
19
  },
8
20
  "shadow": {
9
- "focus": "0 0 0 0.11rem #fff, 0 0 0 0.18rem #515fc1, 0 0 0 0.3rem #0A0A0A1A",
10
- "focus-inset": "inset 0 0 0 0.11rem #fff, inset 0 0 0 0.18rem #515fc1, inset 0 0 0 0.3rem #515fc11a",
11
- "focus-group": "0 0 0 0.125rem #515fc199",
12
- "focus-group-inset": "inset 0 0 0 0.125rem #515fc199",
13
- "high": "0 0 0.125rem 0.125rem #515fc11A, 0 0 1rem 0.125rem #515fc11A",
14
- "low": "0 0 0.06rem 0.06rem #515fc110, 0 0 0.5rem 0.125rem #515fc110"
21
+ "focus": "0 0 0 0.11rem #FFFFFF, 0 0 0 0.14rem #00000033, 0 0 0 0.18rem #504cd5, 0 0 0 0.3rem #0000001A",
22
+ "focus-inset": "inset 0 0 0 0.11rem #FFFFFF, inset 0 0 0 0.18rem #504cd5, inset 0 0 0 0.3rem #504cd51a",
23
+ "focus-group": "0 0 0 0.125rem #504cd599",
24
+ "focus-group-inset": "inset 0 0 0 0.125rem #504cd599"
15
25
  },
16
26
  "font-family": "'Noto Sans', sans-serif",
17
27
  "font-stretch": "100%",
18
- "line-height": "1.28",
19
28
  "font-scale": "minorThird",
20
- "border-radius": "0.5rem",
21
- "spacing": "0.4rem",
22
- "font-size": "0.8125rem"
29
+ "border-radius": "0.5rem"
23
30
  },
24
31
  "components": {
25
32
  "icon": {
@@ -29,28 +36,150 @@
29
36
  "l": "2rem"
30
37
  }
31
38
  },
39
+ "avatar": {
40
+ "background-color": "#E0E3EF"
41
+ },
42
+ "app-shell": {
43
+ "nav": {
44
+ "background": "linear-gradient(to bottom, #F4F6FA 0%, #EDEDF2 50%, #F4F6FA 100%)",
45
+ "foreground-color": "#333333",
46
+ "border-color": "transparent",
47
+ "detached": false
48
+ },
49
+ "header": {
50
+ "background": "#F4F6FA",
51
+ "border-color": "transparent"
52
+ }
53
+ },
32
54
  "button": {
33
- "border-radius": 0.5
55
+ "border-radius": 0.5,
56
+ "color": "#504cd5",
57
+ "secondary-color": "#504cd5"
34
58
  },
35
- "card": {
36
- "background": "#05131E0A"
59
+ "form-control": {
60
+ "border-radius": 0.5,
61
+ ":hover": {
62
+ "border-color": "#9EA7B8"
63
+ },
64
+ ":disabled": {
65
+ "background-color": "#F3F4F7"
66
+ },
67
+ ":read-only": {
68
+ "background-color": "#F3F4F7"
69
+ },
70
+ "border-color": "#C8CFDA"
71
+ },
72
+ "tabs": {
73
+ "detached": false
74
+ },
75
+ "table": {
76
+ "typography": {
77
+ "font-stretch": "70%"
78
+ },
79
+ "header": {
80
+ "background-color": "#F4F6FA",
81
+ "foreground-color": "#333333"
82
+ },
83
+ "striped-rows": true
84
+ },
85
+ "tooltip": {
86
+ "foreground-color": "#FFFFFF",
87
+ "background-color": "#3F3F3F"
37
88
  },
38
89
  "badges": {
39
- "font-stretch": "70%"
90
+ "font-stretch": "70%",
91
+ "count": {
92
+ "default": {
93
+ "background": "#E5E2FF80",
94
+ "foreground": "#3F3D56"
95
+ }
96
+ },
97
+ "keyboard": {
98
+ "background-color": "#E0E0E0",
99
+ "border-color": "#BDBDBD"
100
+ },
101
+ "status": {
102
+ "success": {
103
+ "background": "#C8E6C9",
104
+ "foreground": "#1F351F"
105
+ },
106
+ "warn": {
107
+ "background": "#FFE0B2",
108
+ "foreground": "#37281E"
109
+ },
110
+ "urgent": {
111
+ "background": "#FFCDD2",
112
+ "foreground": "#1F1112"
113
+ },
114
+ "pending": {
115
+ "background": "#D1C4E9",
116
+ "foreground": "#1B1425"
117
+ },
118
+ "info": {
119
+ "background": "#E3F2FD",
120
+ "foreground": "#333333"
121
+ }
122
+ }
123
+ },
124
+ "announcement": {
125
+ "background": "#504cd5"
126
+ },
127
+ "case-view": {
128
+ "header": {
129
+ "background": "#FFFFFFE0",
130
+ "foreground-color": "#333333"
131
+ },
132
+ "summary": {
133
+ "detached": true
134
+ },
135
+ "utilities": {
136
+ "detached": false,
137
+ "background": "#FFFFFFE0"
138
+ },
139
+ "assignments": {
140
+ "detached": true,
141
+ "background": "#FFFFFFE0",
142
+ "foreground-color": "auto"
143
+ },
144
+ "stages": {
145
+ "status": {
146
+ "completed": {
147
+ "background": "#C8E6C9",
148
+ "foreground-color": "#1F351F"
149
+ },
150
+ "current": {
151
+ "background": "#504cd5",
152
+ "foreground-color": "#FFFFFF"
153
+ },
154
+ "pending": {
155
+ "background": "#E0E3EF"
156
+ }
157
+ }
158
+ }
40
159
  },
41
160
  "field-value-list": {
42
161
  "inline": {
43
162
  "detached": true
44
163
  }
45
164
  },
46
- "label": {
47
- "font-size": "s"
165
+ "card": {
166
+ "background": "#FFFFFFE0",
167
+ "border-radius": "0.5rem",
168
+ "foreground-color": "#333333"
48
169
  },
49
170
  "text": {
171
+ "primary": {
172
+ "font-family": "'Noto Sans', sans-serif",
173
+ "font-size": "s"
174
+ },
175
+ "secondary": {
176
+ "font-family": "'Noto Sans', sans-serif",
177
+ "font-size": "s"
178
+ },
50
179
  "h1": {
51
180
  "font-family": "'Saira', sans-serif",
52
- "font-weight": "500",
53
- "font-size": "xxxl"
181
+ "font-size": "xxxl",
182
+ "font-weight": "500"
54
183
  },
55
184
  "h2": {
56
185
  "font-family": "'Saira', sans-serif"
@@ -70,6 +199,42 @@
70
199
  "brand-primary": {
71
200
  "font-family": "'Saira', sans-serif"
72
201
  }
202
+ },
203
+ "link": {
204
+ "color": "#504cd5"
205
+ },
206
+ "modal": {
207
+ "background": "#FFFFFF"
208
+ },
209
+ "popover": {
210
+ "background": "#FFFFFF"
211
+ },
212
+ "lifecycle": {
213
+ "background": "transparent",
214
+ "task": {
215
+ "background": "#FFFFFF"
216
+ },
217
+ "stage": {
218
+ "background": "#FFFFFF",
219
+ "foreground-color": "#333333",
220
+ "start": {
221
+ "background": "#90CAF9",
222
+ "hover-color": "#64B5F6"
223
+ },
224
+ "default": {
225
+ "background": "#BBDEFB",
226
+ "hover-color": "#90CAF9"
227
+ },
228
+ "resolution": {
229
+ "background": "#A5D6A7",
230
+ "hover-color": "#81C784"
231
+ },
232
+ "alternate": {
233
+ "background": "#C7C5C5",
234
+ "hover-color": "#B9B7B7",
235
+ "resolution-highlight": "#81C784"
236
+ }
237
+ }
73
238
  }
74
239
  }
75
240
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "9.0.0-build.7.0",
3
+ "version": "9.0.0-build.7.2",
4
4
  "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "author": "Pegasystems",