@coinbase/cds-web 9.3.1 → 9.4.1
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/CHANGELOG.md +12 -0
- package/dts/core/theme.d.ts +6 -6
- package/dts/core/theme.d.ts.map +1 -1
- package/dts/overlays/modal/FullscreenModalLayout.d.ts +1 -1
- package/dts/overlays/modal/Modal.d.ts +13 -2
- package/dts/overlays/modal/Modal.d.ts.map +1 -1
- package/dts/system/ThemeProvider.d.ts.map +1 -1
- package/dts/themes/coinbaseDenseTheme.d.ts +2 -0
- package/dts/themes/coinbaseDenseTheme.d.ts.map +1 -1
- package/dts/themes/coinbaseHighContrastTheme.d.ts +2 -0
- package/dts/themes/coinbaseHighContrastTheme.d.ts.map +1 -1
- package/dts/themes/coinbaseTheme.d.ts +2 -0
- package/dts/themes/coinbaseTheme.d.ts.map +1 -1
- package/dts/themes/defaultHighContrastTheme.d.ts +2 -0
- package/dts/themes/defaultHighContrastTheme.d.ts.map +1 -1
- package/dts/themes/defaultTheme.d.ts +2 -0
- package/dts/themes/defaultTheme.d.ts.map +1 -1
- package/esm/overlays/modal/Modal.js +87 -6
- package/esm/system/ThemeProvider.js +6 -1
- package/esm/themes/coinbaseHighContrastTheme.js +2 -0
- package/esm/themes/coinbaseTheme.js +2 -0
- package/esm/themes/defaultHighContrastTheme.js +2 -0
- package/esm/themes/defaultTheme.js +2 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.4.1 (6/15/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: Modal appearance props now apply to the modal card. [[#758](https://github.com/coinbase/cds/pull/758)]
|
|
16
|
+
|
|
17
|
+
## 9.4.0 (6/15/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🚀 Updates
|
|
20
|
+
|
|
21
|
+
- Feat: add gray4 illustration color token. [[#746](https://github.com/coinbase/cds/pull/746)]
|
|
22
|
+
|
|
11
23
|
## 9.3.1 (6/12/2026 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
package/dts/core/theme.d.ts
CHANGED
|
@@ -19,14 +19,14 @@ export type ThemeConfig = {
|
|
|
19
19
|
darkColor?: {
|
|
20
20
|
[key in ThemeVars.Color]: Property.Color;
|
|
21
21
|
};
|
|
22
|
-
/** The light illustration color palette. */
|
|
23
|
-
lightIllustrationColor?: {
|
|
22
|
+
/** The light illustration color palette. All tokens are optional. */
|
|
23
|
+
lightIllustrationColor?: Partial<{
|
|
24
24
|
[key in ThemeVars.IllustrationColor]: Property.Color;
|
|
25
|
-
}
|
|
26
|
-
/** The dark illustration color palette. */
|
|
27
|
-
darkIllustrationColor?: {
|
|
25
|
+
}>;
|
|
26
|
+
/** The dark illustration color palette. All tokens are optional. */
|
|
27
|
+
darkIllustrationColor?: Partial<{
|
|
28
28
|
[key in ThemeVars.IllustrationColor]: Property.Color;
|
|
29
|
-
}
|
|
29
|
+
}>;
|
|
30
30
|
/** The space values, used for margin and padding. */
|
|
31
31
|
space: {
|
|
32
32
|
[key in ThemeVars.Space]: number;
|
package/dts/core/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,aAAa,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC7D,sCAAsC;IACtC,YAAY,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC5D,+BAA+B;IAC/B,UAAU,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK;KAAE,CAAC;IAC1D,8BAA8B;IAC9B,SAAS,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK;KAAE,CAAC;IACzD,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ export type FullscreenModalLayoutBaseProps = Pick<
|
|
|
23
23
|
export type FullscreenModalLayoutProps = FullscreenModalLayoutBaseProps;
|
|
24
24
|
export declare const FullscreenModalLayout: React.NamedExoticComponent<
|
|
25
25
|
Pick<
|
|
26
|
-
|
|
26
|
+
ModalProps,
|
|
27
27
|
| 'zIndex'
|
|
28
28
|
| 'visible'
|
|
29
29
|
| 'accessibilityLabel'
|
|
@@ -2,8 +2,19 @@ import React from 'react';
|
|
|
2
2
|
import { type ModalContextValue } from '@coinbase/cds-common/overlays/ModalContext';
|
|
3
3
|
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
|
|
4
4
|
import type { PositionStyles } from '../../styles/styleProps';
|
|
5
|
+
import type { StylesAndClassNames } from '../../types';
|
|
5
6
|
import { type FocusTrapProps } from '../FocusTrap';
|
|
6
7
|
import type { ModalWrapperProps } from './ModalWrapper';
|
|
8
|
+
/**
|
|
9
|
+
* Static class names for Modal component parts.
|
|
10
|
+
* Use these selectors to target specific elements with CSS.
|
|
11
|
+
*/
|
|
12
|
+
export declare const modalClassNames: {
|
|
13
|
+
/** Full-viewport overlay/backdrop element that positions the modal within the viewport */
|
|
14
|
+
readonly overlay: 'cds-Modal';
|
|
15
|
+
/** Visible modal card element */
|
|
16
|
+
readonly modal: 'cds-Modal-modal';
|
|
17
|
+
};
|
|
7
18
|
type ModalChildrenRenderProps = {
|
|
8
19
|
closeModal: () => void;
|
|
9
20
|
};
|
|
@@ -39,10 +50,10 @@ export type ModalBaseProps = SharedProps &
|
|
|
39
50
|
*/
|
|
40
51
|
restoreFocusOnUnmount?: boolean;
|
|
41
52
|
};
|
|
42
|
-
export type ModalProps = ModalBaseProps
|
|
53
|
+
export type ModalProps = ModalBaseProps & StylesAndClassNames<typeof modalClassNames>;
|
|
43
54
|
export type ModalRefBaseProps = Pick<ModalBaseProps, 'onRequestClose'>;
|
|
44
55
|
export declare const Modal: React.NamedExoticComponent<
|
|
45
|
-
Omit<
|
|
56
|
+
Omit<ModalProps, 'ref'> & React.RefAttributes<ModalRefBaseProps>
|
|
46
57
|
>;
|
|
47
58
|
export {};
|
|
48
59
|
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAMlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAW1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAMlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAW1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA6CxD;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B,0FAA0F;;IAE1F,iCAAiC;;CAEzB,CAAC;AAMX,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAC9B,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,GACzC,IAAI,CACF,cAAc,EACd,kBAAkB,GAAG,uBAAuB,GAAG,2BAA2B,CAC3E,GAAG;IACF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzD;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC;AAEtF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,KAAK,8FA8LjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAItE,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG9F,OAAO,QAAQ,SAAS,CAAC;IAEvB,UAAU,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;KAAG;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAEpF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,CAAC,KAAK,CAAC,4BAG3D,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,EAAE,cAAc,KAAK,mBAgB3D,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC,GAAG;IAC5F,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,aAAa,2HAUrB,kBAAkB,6CA6DtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,iBAAiB,EACjB,SAAS,GAAG,WAAW,GAAG,OAAO,CAClC,GACC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,gFACoB,0BAA0B,6CAsB/E,CAAC"}
|
|
@@ -546,6 +546,7 @@ export declare const coinbaseDenseTheme: {
|
|
|
546
546
|
readonly gray: 'rgb(206,210,219)';
|
|
547
547
|
readonly gray2: 'rgb(10, 11, 15)';
|
|
548
548
|
readonly gray3: 'rgb(206, 210, 220)';
|
|
549
|
+
readonly gray4: 'rgb(200, 203, 210)';
|
|
549
550
|
readonly positive: 'rgb(60,194,138)';
|
|
550
551
|
readonly negative: 'rgb(225,57,71)';
|
|
551
552
|
readonly accent1: 'rgb(255, 210, 0)';
|
|
@@ -562,6 +563,7 @@ export declare const coinbaseDenseTheme: {
|
|
|
562
563
|
readonly gray: 'rgb(70,75,85)';
|
|
563
564
|
readonly gray2: 'rgb(70,75,85)';
|
|
564
565
|
readonly gray3: 'rgb(255,255,255)';
|
|
566
|
+
readonly gray4: 'rgb(255,255,255)';
|
|
565
567
|
readonly positive: 'rgb(68,194,141)';
|
|
566
568
|
readonly negative: 'rgb(240,97,109)';
|
|
567
569
|
readonly accent1: 'rgb(236, 208, 105)';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB
|
|
1
|
+
{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,CAAC"}
|
|
@@ -538,6 +538,7 @@ export declare const coinbaseHighContrastTheme: {
|
|
|
538
538
|
readonly gray: 'rgb(206,210,219)';
|
|
539
539
|
readonly gray2: 'rgb(10, 11, 15)';
|
|
540
540
|
readonly gray3: 'rgb(206, 210, 220)';
|
|
541
|
+
readonly gray4: 'rgb(200, 203, 210)';
|
|
541
542
|
readonly positive: 'rgb(60,194,138)';
|
|
542
543
|
readonly negative: 'rgb(225,57,71)';
|
|
543
544
|
readonly accent1: 'rgb(255, 210, 0)';
|
|
@@ -554,6 +555,7 @@ export declare const coinbaseHighContrastTheme: {
|
|
|
554
555
|
readonly gray: 'rgb(70,75,85)';
|
|
555
556
|
readonly gray2: 'rgb(70,75,85)';
|
|
556
557
|
readonly gray3: 'rgb(255,255,255)';
|
|
558
|
+
readonly gray4: 'rgb(255,255,255)';
|
|
557
559
|
readonly positive: 'rgb(68,194,141)';
|
|
558
560
|
readonly negative: 'rgb(240,97,109)';
|
|
559
561
|
readonly accent1: 'rgb(236, 208, 105)';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB
|
|
1
|
+
{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsSN,CAAC"}
|
|
@@ -542,6 +542,7 @@ export declare const coinbaseTheme: {
|
|
|
542
542
|
readonly gray: 'rgb(206,210,219)';
|
|
543
543
|
readonly gray2: 'rgb(10, 11, 15)';
|
|
544
544
|
readonly gray3: 'rgb(206, 210, 220)';
|
|
545
|
+
readonly gray4: 'rgb(200, 203, 210)';
|
|
545
546
|
readonly positive: 'rgb(60,194,138)';
|
|
546
547
|
readonly negative: 'rgb(225,57,71)';
|
|
547
548
|
readonly accent1: 'rgb(255, 210, 0)';
|
|
@@ -558,6 +559,7 @@ export declare const coinbaseTheme: {
|
|
|
558
559
|
readonly gray: 'rgb(70,75,85)';
|
|
559
560
|
readonly gray2: 'rgb(70,75,85)';
|
|
560
561
|
readonly gray3: 'rgb(255,255,255)';
|
|
562
|
+
readonly gray4: 'rgb(255,255,255)';
|
|
561
563
|
readonly positive: 'rgb(68,194,141)';
|
|
562
564
|
readonly negative: 'rgb(240,97,109)';
|
|
563
565
|
readonly accent1: 'rgb(236, 208, 105)';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa
|
|
1
|
+
{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsSM,CAAC"}
|
|
@@ -538,6 +538,7 @@ export declare const defaultHighContrastTheme: {
|
|
|
538
538
|
readonly gray: 'rgb(206,210,219)';
|
|
539
539
|
readonly gray2: 'rgb(10, 11, 15)';
|
|
540
540
|
readonly gray3: 'rgb(206, 210, 220)';
|
|
541
|
+
readonly gray4: 'rgb(200, 203, 210)';
|
|
541
542
|
readonly positive: 'rgb(60,194,138)';
|
|
542
543
|
readonly negative: 'rgb(225,57,71)';
|
|
543
544
|
readonly accent1: 'rgb(255, 210, 0)';
|
|
@@ -554,6 +555,7 @@ export declare const defaultHighContrastTheme: {
|
|
|
554
555
|
readonly gray: 'rgb(70,75,85)';
|
|
555
556
|
readonly gray2: 'rgb(70,75,85)';
|
|
556
557
|
readonly gray3: 'rgb(255,255,255)';
|
|
558
|
+
readonly gray4: 'rgb(255,255,255)';
|
|
557
559
|
readonly positive: 'rgb(68,194,141)';
|
|
558
560
|
readonly negative: 'rgb(240,97,109)';
|
|
559
561
|
readonly accent1: 'rgb(236, 208, 105)';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB
|
|
1
|
+
{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsSL,CAAC"}
|
|
@@ -388,6 +388,7 @@ export declare const defaultTheme: {
|
|
|
388
388
|
readonly gray: 'rgb(206,210,219)';
|
|
389
389
|
readonly gray2: 'rgb(10, 11, 15)';
|
|
390
390
|
readonly gray3: 'rgb(206, 210, 220)';
|
|
391
|
+
readonly gray4: 'rgb(200, 203, 210)';
|
|
391
392
|
readonly positive: 'rgb(60,194,138)';
|
|
392
393
|
readonly negative: 'rgb(225,57,71)';
|
|
393
394
|
readonly accent1: 'rgb(255, 210, 0)';
|
|
@@ -404,6 +405,7 @@ export declare const defaultTheme: {
|
|
|
404
405
|
readonly gray: 'rgb(70,75,85)';
|
|
405
406
|
readonly gray2: 'rgb(70,75,85)';
|
|
406
407
|
readonly gray3: 'rgb(255,255,255)';
|
|
408
|
+
readonly gray4: 'rgb(255,255,255)';
|
|
407
409
|
readonly positive: 'rgb(68,194,141)';
|
|
408
410
|
readonly negative: 'rgb(240,97,109)';
|
|
409
411
|
readonly accent1: 'rgb(236, 208, 105)';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsSO,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["children", "visible", "onRequestClose", "disableOverlayPress", "disablePortal", "disableFocusTrap", "accessibilityLabelledBy", "accessibilityLabel", "focusTabIndexElements", "restoreFocusOnUnmount", "disableArrowKeyNavigation", "
|
|
1
|
+
const _excluded = ["children", "visible", "onRequestClose", "disableOverlayPress", "disablePortal", "disableFocusTrap", "accessibilityLabelledBy", "accessibilityLabel", "focusTabIndexElements", "restoreFocusOnUnmount", "disableArrowKeyNavigation", "dangerouslyDisableResponsiveness", "dangerouslySetPosition", "shouldCloseOnEscPress", "hideCloseButton", "hideDividers", "className", "classNames", "style", "styles", "width", "maxWidth", "minWidth", "minHeight", "maxHeight", "background", "color", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderColor", "borderWidth", "borderTopWidth", "borderBottomWidth", "borderStartWidth", "borderEndWidth", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "elevation", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -34,6 +34,17 @@ const baseCss = "baseCss-bp3ahp7";
|
|
|
34
34
|
const modalDialogResponsiveCss = "modalDialogResponsiveCss-msti16y";
|
|
35
35
|
const modalResponsiveCss = "modalResponsiveCss-ml7szrb";
|
|
36
36
|
const MotionBox = motion(Box);
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Static class names for Modal component parts.
|
|
40
|
+
* Use these selectors to target specific elements with CSS.
|
|
41
|
+
*/
|
|
42
|
+
export const modalClassNames = {
|
|
43
|
+
/** Full-viewport overlay/backdrop element that positions the modal within the viewport */
|
|
44
|
+
overlay: 'cds-Modal',
|
|
45
|
+
/** Visible modal card element */
|
|
46
|
+
modal: 'cds-Modal-modal'
|
|
47
|
+
};
|
|
37
48
|
const overlayContentContextValue = {
|
|
38
49
|
isModal: true
|
|
39
50
|
};
|
|
@@ -51,13 +62,50 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
|
|
|
51
62
|
focusTabIndexElements = false,
|
|
52
63
|
restoreFocusOnUnmount = true,
|
|
53
64
|
disableArrowKeyNavigation,
|
|
54
|
-
width,
|
|
55
65
|
dangerouslyDisableResponsiveness = false,
|
|
56
66
|
dangerouslySetPosition,
|
|
57
67
|
shouldCloseOnEscPress = true,
|
|
58
68
|
hideCloseButton,
|
|
59
69
|
hideDividers,
|
|
60
|
-
|
|
70
|
+
className,
|
|
71
|
+
classNames,
|
|
72
|
+
style,
|
|
73
|
+
styles,
|
|
74
|
+
// Dialog card sizing
|
|
75
|
+
width,
|
|
76
|
+
maxWidth,
|
|
77
|
+
minWidth,
|
|
78
|
+
minHeight,
|
|
79
|
+
maxHeight,
|
|
80
|
+
// Dialog card appearance
|
|
81
|
+
background,
|
|
82
|
+
color,
|
|
83
|
+
borderRadius = 200,
|
|
84
|
+
borderTopLeftRadius,
|
|
85
|
+
borderTopRightRadius,
|
|
86
|
+
borderBottomLeftRadius,
|
|
87
|
+
borderBottomRightRadius,
|
|
88
|
+
borderColor,
|
|
89
|
+
borderWidth,
|
|
90
|
+
borderTopWidth,
|
|
91
|
+
borderBottomWidth,
|
|
92
|
+
borderStartWidth,
|
|
93
|
+
borderEndWidth,
|
|
94
|
+
bordered,
|
|
95
|
+
borderedTop,
|
|
96
|
+
borderedBottom,
|
|
97
|
+
borderedStart,
|
|
98
|
+
borderedEnd,
|
|
99
|
+
borderedHorizontal,
|
|
100
|
+
borderedVertical,
|
|
101
|
+
elevation = 2,
|
|
102
|
+
padding,
|
|
103
|
+
paddingX,
|
|
104
|
+
paddingY,
|
|
105
|
+
paddingTop,
|
|
106
|
+
paddingBottom,
|
|
107
|
+
paddingStart,
|
|
108
|
+
paddingEnd
|
|
61
109
|
} = mergedProps,
|
|
62
110
|
props = _objectWithoutProperties(mergedProps, _excluded);
|
|
63
111
|
const defaultWidth = dangerouslyDisableResponsiveness ? modalMaxWidth : defaultWidthStyle;
|
|
@@ -96,20 +144,26 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
|
|
|
96
144
|
const dialogStyles = useMemo(() => ({
|
|
97
145
|
position: dangerouslySetPosition
|
|
98
146
|
}), [dangerouslySetPosition]);
|
|
147
|
+
const overlayStyle = useMemo(() => style || styles !== null && styles !== void 0 && styles.overlay ? _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.overlay) : undefined, [style, styles === null || styles === void 0 ? void 0 : styles.overlay]);
|
|
99
148
|
return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
|
|
100
149
|
value: overlayContentContextValue,
|
|
101
150
|
children: /*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
|
|
102
151
|
accessibilityLabel: label,
|
|
103
152
|
accessibilityLabelledBy: labelledBy,
|
|
153
|
+
className: cx(modalClassNames.overlay, className, classNames === null || classNames === void 0 ? void 0 : classNames.overlay),
|
|
104
154
|
dangerouslyDisableResponsiveness: dangerouslyDisableResponsiveness,
|
|
105
155
|
disableOverlayPress: disableOverlayPress,
|
|
106
156
|
disablePortal: disablePortal,
|
|
107
157
|
onOverlayPress: handleClose,
|
|
158
|
+
style: overlayStyle,
|
|
108
159
|
visible: visible
|
|
109
160
|
}, props), {}, {
|
|
110
161
|
children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({}, motionProps), {}, {
|
|
111
162
|
className: cx(baseCss, !dangerouslyDisableResponsiveness && modalResponsiveCss),
|
|
163
|
+
maxHeight: maxHeight,
|
|
112
164
|
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth,
|
|
165
|
+
minHeight: minHeight,
|
|
166
|
+
minWidth: minWidth,
|
|
113
167
|
style: dialogStyles,
|
|
114
168
|
testID: "modal-dialog-motion",
|
|
115
169
|
width: width !== null && width !== void 0 ? width : defaultWidth,
|
|
@@ -120,10 +174,37 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
|
|
|
120
174
|
onEscPress: shouldCloseOnEscPress ? handleClose : undefined,
|
|
121
175
|
restoreFocusOnUnmount: restoreFocusOnUnmount,
|
|
122
176
|
children: /*#__PURE__*/_jsx(VStack, {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
177
|
+
background: background,
|
|
178
|
+
borderBottomLeftRadius: borderBottomLeftRadius,
|
|
179
|
+
borderBottomRightRadius: borderBottomRightRadius,
|
|
180
|
+
borderBottomWidth: borderBottomWidth,
|
|
181
|
+
borderColor: borderColor,
|
|
182
|
+
borderEndWidth: borderEndWidth,
|
|
183
|
+
borderRadius: borderRadius,
|
|
184
|
+
borderStartWidth: borderStartWidth,
|
|
185
|
+
borderTopLeftRadius: borderTopLeftRadius,
|
|
186
|
+
borderTopRightRadius: borderTopRightRadius,
|
|
187
|
+
borderTopWidth: borderTopWidth,
|
|
188
|
+
borderWidth: borderWidth,
|
|
189
|
+
bordered: bordered,
|
|
190
|
+
borderedBottom: borderedBottom,
|
|
191
|
+
borderedEnd: borderedEnd,
|
|
192
|
+
borderedHorizontal: borderedHorizontal,
|
|
193
|
+
borderedStart: borderedStart,
|
|
194
|
+
borderedTop: borderedTop,
|
|
195
|
+
borderedVertical: borderedVertical,
|
|
196
|
+
className: cx(!dangerouslyDisableResponsiveness && modalDialogResponsiveCss, modalClassNames.modal, classNames === null || classNames === void 0 ? void 0 : classNames.modal),
|
|
197
|
+
color: color,
|
|
198
|
+
elevation: elevation,
|
|
126
199
|
overflow: "hidden",
|
|
200
|
+
padding: padding,
|
|
201
|
+
paddingBottom: paddingBottom,
|
|
202
|
+
paddingEnd: paddingEnd,
|
|
203
|
+
paddingStart: paddingStart,
|
|
204
|
+
paddingTop: paddingTop,
|
|
205
|
+
paddingX: paddingX,
|
|
206
|
+
paddingY: paddingY,
|
|
207
|
+
style: styles === null || styles === void 0 ? void 0 : styles.modal,
|
|
127
208
|
width: "100%",
|
|
128
209
|
children: /*#__PURE__*/_jsx(ModalContext.Provider, {
|
|
129
210
|
value: modalData,
|
|
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
|
|
|
7
7
|
import React, { createContext, memo, useContext, useMemo } from 'react';
|
|
8
8
|
import { createThemeCssVars } from '../core/createThemeCssVars';
|
|
9
9
|
import { cx } from '../cx';
|
|
10
|
+
import { defaultTheme } from '../themes/defaultTheme';
|
|
10
11
|
import { FramerMotionProvider } from './FramerMotionProvider';
|
|
11
12
|
|
|
12
13
|
/* Augments csstype's Properties by adding all our theme CSS variable names. Effectively adds all theme CSS variable names as valid keys to React.CSSProperties. */
|
|
@@ -80,11 +81,15 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
|
|
|
80
81
|
if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeSpectrumKey, " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
|
|
81
82
|
if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has ".concat(inverseSpectrumKey, " values defined but no ").concat(inverseColorKey, " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
|
|
82
83
|
if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has ".concat(inverseColorKey, " colors defined but no ").concat(inverseSpectrumKey, " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
|
|
84
|
+
|
|
85
|
+
// All illustration tokens are optional; fill in any omitted tokens from defaultTheme.
|
|
86
|
+
const consumerIllustrationColor = theme[activeIllustrationKey];
|
|
87
|
+
const illustrationColor = consumerIllustrationColor ? _objectSpread(_objectSpread({}, defaultTheme[activeIllustrationKey]), consumerIllustrationColor) : undefined;
|
|
83
88
|
return _objectSpread(_objectSpread({}, theme), {}, {
|
|
84
89
|
activeColorScheme: activeColorScheme,
|
|
85
90
|
spectrum: theme[activeSpectrumKey],
|
|
86
91
|
color: theme[activeColorKey],
|
|
87
|
-
illustrationColor
|
|
92
|
+
illustrationColor
|
|
88
93
|
});
|
|
89
94
|
}, [theme, activeColorScheme]);
|
|
90
95
|
const parentTheme = useContext(ThemeContext);
|
|
@@ -576,6 +576,7 @@ export const coinbaseHighContrastTheme = {
|
|
|
576
576
|
gray: "rgb(".concat(lightSpectrum.gray20, ")"),
|
|
577
577
|
gray2: "rgb(10, 11, 15)",
|
|
578
578
|
gray3: "rgb(206, 210, 220)",
|
|
579
|
+
gray4: "rgb(200, 203, 210)",
|
|
579
580
|
positive: "rgb(".concat(lightSpectrum.green30, ")"),
|
|
580
581
|
negative: "rgb(".concat(lightSpectrum.red50, ")"),
|
|
581
582
|
accent1: "rgb(255, 210, 0)",
|
|
@@ -592,6 +593,7 @@ export const coinbaseHighContrastTheme = {
|
|
|
592
593
|
gray: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
593
594
|
gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
594
595
|
gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
596
|
+
gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
595
597
|
positive: "rgb(".concat(darkSpectrum.green70, ")"),
|
|
596
598
|
negative: "rgb(".concat(darkSpectrum.red60, ")"),
|
|
597
599
|
accent1: "rgb(236, 208, 105)",
|
|
@@ -580,6 +580,7 @@ export const coinbaseTheme = {
|
|
|
580
580
|
gray: "rgb(".concat(lightSpectrum.gray20, ")"),
|
|
581
581
|
gray2: "rgb(10, 11, 15)",
|
|
582
582
|
gray3: "rgb(206, 210, 220)",
|
|
583
|
+
gray4: "rgb(200, 203, 210)",
|
|
583
584
|
positive: "rgb(".concat(lightSpectrum.green30, ")"),
|
|
584
585
|
negative: "rgb(".concat(lightSpectrum.red50, ")"),
|
|
585
586
|
accent1: "rgb(255, 210, 0)",
|
|
@@ -596,6 +597,7 @@ export const coinbaseTheme = {
|
|
|
596
597
|
gray: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
597
598
|
gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
598
599
|
gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
600
|
+
gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
599
601
|
positive: "rgb(".concat(darkSpectrum.green70, ")"),
|
|
600
602
|
negative: "rgb(".concat(darkSpectrum.red60, ")"),
|
|
601
603
|
accent1: "rgb(236, 208, 105)",
|
|
@@ -576,6 +576,7 @@ export const defaultHighContrastTheme = {
|
|
|
576
576
|
gray: "rgb(".concat(lightSpectrum.gray20, ")"),
|
|
577
577
|
gray2: "rgb(10, 11, 15)",
|
|
578
578
|
gray3: "rgb(206, 210, 220)",
|
|
579
|
+
gray4: "rgb(200, 203, 210)",
|
|
579
580
|
positive: "rgb(".concat(lightSpectrum.green30, ")"),
|
|
580
581
|
negative: "rgb(".concat(lightSpectrum.red50, ")"),
|
|
581
582
|
accent1: "rgb(255, 210, 0)",
|
|
@@ -592,6 +593,7 @@ export const defaultHighContrastTheme = {
|
|
|
592
593
|
gray: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
593
594
|
gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
594
595
|
gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
596
|
+
gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
595
597
|
positive: "rgb(".concat(darkSpectrum.green70, ")"),
|
|
596
598
|
negative: "rgb(".concat(darkSpectrum.red60, ")"),
|
|
597
599
|
accent1: "rgb(236, 208, 105)",
|
|
@@ -402,6 +402,7 @@ export const defaultTheme = {
|
|
|
402
402
|
gray: "rgb(".concat(lightSpectrum.gray20, ")"),
|
|
403
403
|
gray2: "rgb(10, 11, 15)",
|
|
404
404
|
gray3: "rgb(206, 210, 220)",
|
|
405
|
+
gray4: "rgb(200, 203, 210)",
|
|
405
406
|
positive: "rgb(".concat(lightSpectrum.green30, ")"),
|
|
406
407
|
negative: "rgb(".concat(lightSpectrum.red50, ")"),
|
|
407
408
|
accent1: "rgb(255, 210, 0)",
|
|
@@ -418,6 +419,7 @@ export const defaultTheme = {
|
|
|
418
419
|
gray: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
419
420
|
gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
|
|
420
421
|
gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
422
|
+
gray4: "rgb(".concat(darkSpectrum.gray100, ")"),
|
|
421
423
|
positive: "rgb(".concat(darkSpectrum.green70, ")"),
|
|
422
424
|
negative: "rgb(".concat(darkSpectrum.red60, ")"),
|
|
423
425
|
accent1: "rgb(236, 208, 105)",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.1",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -219,9 +219,9 @@
|
|
|
219
219
|
"react-dom": "^18.0.0 || ~19.1.2"
|
|
220
220
|
},
|
|
221
221
|
"dependencies": {
|
|
222
|
-
"@coinbase/cds-common": "^9.
|
|
222
|
+
"@coinbase/cds-common": "^9.4.1",
|
|
223
223
|
"@coinbase/cds-icons": "^5.19.0",
|
|
224
|
-
"@coinbase/cds-illustrations": "^4.
|
|
224
|
+
"@coinbase/cds-illustrations": "^4.42.0",
|
|
225
225
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
226
226
|
"@coinbase/cds-utils": "^2.3.5",
|
|
227
227
|
"@floating-ui/react-dom": "^2.1.1",
|