@revikornmann/muka-ui 0.26.0 → 0.27.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/cjs/components/Avatar/Avatar.css +79 -30
- package/dist/cjs/components/Avatar/Avatar.js +1 -1
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Avatar/AvatarGroup.js +4 -3
- package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/cjs/components/Button/Button.css +33 -0
- package/dist/cjs/components/Button/Button.js +2 -2
- package/dist/cjs/components/DataPieChart/DataPieChart.js +5 -2
- package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/cjs/components/DataPieChart/index.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.css +37 -14
- package/dist/cjs/components/Tabs/Tabs.js +30 -10
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.css +79 -30
- package/dist/esm/components/Avatar/Avatar.js +1 -1
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Avatar/AvatarGroup.js +4 -3
- package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
- package/dist/esm/components/Button/Button.css +33 -0
- package/dist/esm/components/Button/Button.js +2 -2
- package/dist/esm/components/DataPieChart/DataPieChart.js +4 -1
- package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
- package/dist/esm/components/DataPieChart/index.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.css +37 -14
- package/dist/esm/components/Tabs/Tabs.js +30 -10
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/Avatar.css +79 -30
- package/dist/styles/components/Button.css +33 -0
- package/dist/styles/components/Tabs.css +37 -14
- package/dist/styles/index.css +796 -648
- package/dist/styles/muka-dark.css +796 -648
- package/dist/styles/muka-light.css +796 -648
- package/dist/styles/tokens-bouwplan-dark.css +48 -5
- package/dist/styles/tokens-bouwplan-light.css +48 -5
- package/dist/styles/tokens-fscl-dark.css +48 -5
- package/dist/styles/tokens-fscl-light.css +48 -5
- package/dist/styles/tokens-grip-dark.css +48 -5
- package/dist/styles/tokens-grip-light.css +48 -5
- package/dist/styles/tokens-muka-dark.css +48 -5
- package/dist/styles/tokens-muka-light.css +48 -5
- package/dist/styles/tokens-wireframe-dark.css +48 -5
- package/dist/styles/tokens-wireframe-light.css +48 -5
- package/dist/styles/wireframe-dark.css +796 -648
- package/dist/styles/wireframe-light.css +796 -648
- package/dist/types/components/Avatar/Avatar.d.ts +8 -3
- package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/components/Avatar/AvatarGroup.d.ts +10 -5
- package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
- package/dist/types/components/Avatar/index.d.ts +1 -1
- package/dist/types/components/Avatar/index.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts +3 -3
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/DataPieChart/DataPieChart.d.ts +13 -2
- package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
- package/dist/types/components/DataPieChart/index.d.ts +1 -1
- package/dist/types/components/DataPieChart/index.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.d.ts +17 -2
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +2 -2
- package/dist/types/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/t1-primitives/color.json +10 -0
- package/tokens/t2-alias/base.json +14 -0
- package/tokens/t2-alias/brand/bouwplan/dark.json +5 -0
- package/tokens/t2-alias/brand/bouwplan/light.json +5 -0
- package/tokens/t2-alias/brand/fscl/dark.json +5 -0
- package/tokens/t2-alias/brand/fscl/light.json +5 -0
- package/tokens/t2-alias/brand/grip/dark.json +14 -0
- package/tokens/t2-alias/brand/grip/light.json +14 -0
- package/tokens/t2-alias/brand/muka/dark.json +14 -0
- package/tokens/t2-alias/brand/muka/light.json +14 -0
- package/tokens/t2-alias/brand/wireframe/dark.json +14 -0
- package/tokens/t2-alias/brand/wireframe/light.json +14 -0
- package/tokens/t3-semantics/ui.json +49 -2
- package/tokens/t4-components/avatar.json +82 -18
- package/tokens/t4-components/button.json +56 -0
- package/tokens/t4-components/tabs.json +41 -1
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Avatar.css';
|
|
3
|
+
/**
|
|
4
|
+
* Avatar sizes, smallest to largest: 4xs 16 · 3xs 24 · 2xs 32 · xs 40 · sm 48 ·
|
|
5
|
+
* md 64 · lg 80 · xl 112 (px).
|
|
6
|
+
*/
|
|
7
|
+
export type AvatarSize = '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
3
8
|
export interface AvatarProps {
|
|
4
9
|
/** Image source URL */
|
|
5
10
|
src?: string;
|
|
@@ -9,8 +14,8 @@ export interface AvatarProps {
|
|
|
9
14
|
icon?: React.ReactNode;
|
|
10
15
|
/** Name for generating initials */
|
|
11
16
|
name?: string;
|
|
12
|
-
/** Size variant */
|
|
13
|
-
size?:
|
|
17
|
+
/** Size variant. `4xs` shows the picture only (no initials or status). */
|
|
18
|
+
size?: AvatarSize;
|
|
14
19
|
/** Shape variant */
|
|
15
20
|
shape?: 'circle' | 'square';
|
|
16
21
|
/** Status indicator */
|
|
@@ -34,7 +39,7 @@ export interface AvatarProps {
|
|
|
34
39
|
* 4. Default icon - Generic user icon
|
|
35
40
|
*
|
|
36
41
|
* Features:
|
|
37
|
-
* -
|
|
42
|
+
* - 8 sizes: 4xs (16px) to xl (112px)
|
|
38
43
|
* - 2 shapes: circle, square
|
|
39
44
|
* - Status indicators: online, offline, busy, away
|
|
40
45
|
* - Loading and error states
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0IxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { AvatarSize } from './Avatar';
|
|
2
3
|
import './Avatar.css';
|
|
3
4
|
export interface AvatarGroupProps {
|
|
4
5
|
/** Avatar components to display */
|
|
@@ -6,9 +7,12 @@ export interface AvatarGroupProps {
|
|
|
6
7
|
/** Maximum number of avatars to show (rest show as "+N") */
|
|
7
8
|
max?: number;
|
|
8
9
|
/** Size of all avatars in group */
|
|
9
|
-
size?:
|
|
10
|
-
/**
|
|
11
|
-
|
|
10
|
+
size?: AvatarSize;
|
|
11
|
+
/**
|
|
12
|
+
* How far the avatars overlap: `tight` (two thirds of an avatar), `compact`
|
|
13
|
+
* (half) or `spacious` (a third).
|
|
14
|
+
*/
|
|
15
|
+
spacing?: 'tight' | 'compact' | 'spacious';
|
|
12
16
|
/** Additional CSS classes */
|
|
13
17
|
className?: string;
|
|
14
18
|
/** Accessible label for the group */
|
|
@@ -17,12 +21,13 @@ export interface AvatarGroupProps {
|
|
|
17
21
|
/**
|
|
18
22
|
* AvatarGroup Component
|
|
19
23
|
*
|
|
20
|
-
* Displays a horizontal stack of avatars with overlap.
|
|
24
|
+
* Displays a horizontal stack of avatars with overlap (Figma "Avatar Stack").
|
|
25
|
+
* Each avatar gets a ring in the surface colour so the overlap reads clearly.
|
|
21
26
|
* When there are more avatars than `max`, shows remaining count as "+N".
|
|
22
27
|
*
|
|
23
28
|
* Features:
|
|
24
29
|
* - Configurable max visible avatars
|
|
25
|
-
* -
|
|
30
|
+
* - Three spacing modes: tight, compact, spacious
|
|
26
31
|
* - Size propagation to child avatars
|
|
27
32
|
* - Overflow counter display
|
|
28
33
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,IAAI,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAE3C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoElD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { Avatar } from './Avatar';
|
|
2
|
-
export type { AvatarProps } from './Avatar';
|
|
2
|
+
export type { AvatarProps, AvatarSize } from './Avatar';
|
|
3
3
|
export { AvatarGroup } from './AvatarGroup';
|
|
4
4
|
export type { AvatarGroupProps } from './AvatarGroup';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -4,7 +4,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
4
4
|
/** Button content */
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
/** Button variant - like Figma component variants */
|
|
7
|
-
variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'muted';
|
|
7
|
+
variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'muted' | 'destructive';
|
|
8
8
|
/** Size variant - matches your token system */
|
|
9
9
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
10
10
|
/** Disabled state */
|
|
@@ -26,8 +26,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
26
26
|
* Button Component
|
|
27
27
|
*
|
|
28
28
|
* Built using the Muka design token system with support for:
|
|
29
|
-
* -
|
|
30
|
-
* -
|
|
29
|
+
* - 6 variants: primary, secondary, tertiary, ghost, muted, destructive
|
|
30
|
+
* - 4 sizes: sm, md, lg, xl
|
|
31
31
|
* - Interactive states: default, hover, pressed, disabled
|
|
32
32
|
* - Icons with flexible positioning (left, right, or both)
|
|
33
33
|
* - Icon-only buttons (label can be hidden)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;IAEnF,+CAA+C;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEjC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,uFAyGlB,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './DataPieChart.css';
|
|
3
|
+
/** Named sizes from the Figma "Data Pie Chart" variants, in pixels. */
|
|
4
|
+
export declare const DATA_PIE_CHART_SIZES: {
|
|
5
|
+
readonly xs: 24;
|
|
6
|
+
readonly sm: 40;
|
|
7
|
+
readonly md: 64;
|
|
8
|
+
readonly lg: 120;
|
|
9
|
+
};
|
|
10
|
+
export type DataPieChartSize = keyof typeof DATA_PIE_CHART_SIZES;
|
|
3
11
|
export interface DataPieChartProps {
|
|
4
12
|
/** The portion to fill, expressed against `max` */
|
|
5
13
|
value: number;
|
|
@@ -7,8 +15,11 @@ export interface DataPieChartProps {
|
|
|
7
15
|
max?: number;
|
|
8
16
|
/** Visual style: hollow donut or solid pie */
|
|
9
17
|
variant?: 'donut' | 'pie';
|
|
10
|
-
/**
|
|
11
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Diameter: a named size (`xs` 24, `sm` 40, `md` 64, `lg` 120) or any number of
|
|
20
|
+
* pixels. Defaults to `lg` (120).
|
|
21
|
+
*/
|
|
22
|
+
size?: DataPieChartSize | number;
|
|
12
23
|
/** Filled-segment color (any CSS color or var()); defaults to the accent color */
|
|
13
24
|
color?: string;
|
|
14
25
|
/** Track (remainder) color; defaults to surface level 0 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataPieChart.d.ts","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IAEd,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE1B
|
|
1
|
+
{"version":3,"file":"DataPieChart.d.ts","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,CAAC;AAE5B,uEAAuE;AACvE,eAAO,MAAM,oBAAoB;;;;;CAA+C,CAAC;AAEjF,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IAEd,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;IAEjC,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAQD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+GpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/DataPieChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/DataPieChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Tabs.css';
|
|
3
|
+
type TabsSize = 'sm' | 'md' | 'lg';
|
|
3
4
|
export interface TabsProps {
|
|
4
5
|
/** Tab content (TabList + TabPanels) */
|
|
5
6
|
children: React.ReactNode;
|
|
@@ -10,9 +11,15 @@ export interface TabsProps {
|
|
|
10
11
|
/** Change handler */
|
|
11
12
|
onChange?: (value: string) => void;
|
|
12
13
|
/** Size variant */
|
|
13
|
-
size?:
|
|
14
|
+
size?: TabsSize;
|
|
14
15
|
/** Alignment variant */
|
|
15
16
|
alignment?: 'left' | 'center' | 'fill';
|
|
17
|
+
/**
|
|
18
|
+
* Horizontal padding on the tab strip: `default` insets the tabs by 16px on
|
|
19
|
+
* both sides, `none` aligns the first tab with the container edge. The
|
|
20
|
+
* divider always spans the full width.
|
|
21
|
+
*/
|
|
22
|
+
padding?: 'default' | 'none';
|
|
16
23
|
/** Additional CSS classes */
|
|
17
24
|
className?: string;
|
|
18
25
|
}
|
|
@@ -42,7 +49,15 @@ export interface TabProps {
|
|
|
42
49
|
value: string;
|
|
43
50
|
/** Tab label */
|
|
44
51
|
children: React.ReactNode;
|
|
45
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Leading item before the label: an `Icon`, `Avatar`, `AvatarGroup` or
|
|
54
|
+
* `DataPieChart`. Avatars and pie charts are sized to the tab size unless
|
|
55
|
+
* they set their own `size`; icons switch to their filled variant when the
|
|
56
|
+
* tab is active. The leading item is hidden from assistive technology, so
|
|
57
|
+
* put anything a screen reader needs (e.g. a percentage) in the label.
|
|
58
|
+
*/
|
|
59
|
+
leading?: React.ReactNode;
|
|
60
|
+
/** Tab icon. Same as `leading`; `leading` wins when both are set. */
|
|
46
61
|
icon?: React.ReactNode;
|
|
47
62
|
/** Disabled state */
|
|
48
63
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8E,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,YAAY,CAAC;AAEpB,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkBnC,MAAM,WAAW,SAAS;IACxB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuCpC,CAAC;AAGF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAGF,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyDlC,CAAC;AAGF,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqB5C,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -33,11 +33,11 @@ export { Section, type SectionProps } from './Section';
|
|
|
33
33
|
export { Container, type ContainerProps } from './Container';
|
|
34
34
|
export { Badge, type BadgeProps } from './Badge';
|
|
35
35
|
export { BadgeNumber, type BadgeNumberProps } from './BadgeNumber';
|
|
36
|
-
export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps } from './Avatar';
|
|
36
|
+
export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarSize } from './Avatar';
|
|
37
37
|
export { ProfileBadge, type ProfileBadgeProps } from './ProfileBadge';
|
|
38
38
|
export { Progress, type ProgressProps } from './Progress';
|
|
39
39
|
export { PieChart, type PieChartProps, type PieChartSegment } from './PieChart';
|
|
40
|
-
export { DataPieChart, type DataPieChartProps } from './DataPieChart';
|
|
40
|
+
export { DataPieChart, type DataPieChartProps, type DataPieChartSize } from './DataPieChart';
|
|
41
41
|
export { RangeSlider, type RangeSliderProps } from './RangeSlider';
|
|
42
42
|
export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell, TablePagination, useTableSelection, type TableProps, type TableHeadProps, type TableBodyProps, type TableRowProps, type TableCellProps, type TableHeaderCellProps, type TablePaginationProps, type TablePaginationLabels, type UseTableSelectionOptions, type UseTableSelectionReturn, } from './Table';
|
|
43
43
|
export { DataTable, type DataTableProps, type DataTableColumn, type DataTableSortDirection, type DataTableSize, } from './DataTable';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -412,6 +412,16 @@
|
|
|
412
412
|
"$value": "#381316"
|
|
413
413
|
}
|
|
414
414
|
},
|
|
415
|
+
"redStrong": {
|
|
416
|
+
"1": {
|
|
417
|
+
"$type": "color",
|
|
418
|
+
"$value": "#bd1524"
|
|
419
|
+
},
|
|
420
|
+
"2": {
|
|
421
|
+
"$type": "color",
|
|
422
|
+
"$value": "#ab001a"
|
|
423
|
+
}
|
|
424
|
+
},
|
|
415
425
|
"ruby": {
|
|
416
426
|
"1": {
|
|
417
427
|
"$type": "color",
|
|
@@ -257,6 +257,20 @@
|
|
|
257
257
|
"$type": "color",
|
|
258
258
|
"$value": "{color.red.3}"
|
|
259
259
|
},
|
|
260
|
+
"solid": {
|
|
261
|
+
"default": {
|
|
262
|
+
"$type": "color",
|
|
263
|
+
"$value": "{color.red.11}"
|
|
264
|
+
},
|
|
265
|
+
"hover": {
|
|
266
|
+
"$type": "color",
|
|
267
|
+
"$value": "{color.redStrong.1}"
|
|
268
|
+
},
|
|
269
|
+
"pressed": {
|
|
270
|
+
"$type": "color",
|
|
271
|
+
"$value": "{color.redStrong.2}"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
260
274
|
"surface": {
|
|
261
275
|
"level0": {
|
|
262
276
|
"$type": "color",
|
|
@@ -89,6 +89,11 @@
|
|
|
89
89
|
"contrast": { "$type": "color", "$value": "{color.redDark.11}" },
|
|
90
90
|
"default": { "$type": "color", "$value": "{color.redDark.9}" },
|
|
91
91
|
"muted": { "$type": "color", "$value": "{color.redDark.3}" },
|
|
92
|
+
"solid": {
|
|
93
|
+
"default": { "$type": "color", "$value": "{color.redDark.9}" },
|
|
94
|
+
"hover": { "$type": "color", "$value": "{color.redDark.10}" },
|
|
95
|
+
"pressed": { "$type": "color", "$value": "{color.redDark.10}" }
|
|
96
|
+
},
|
|
92
97
|
"surface": {
|
|
93
98
|
"level0": { "$type": "color", "$value": "{color.redDark.2}" },
|
|
94
99
|
"level1": { "$type": "color", "$value": "{color.redDark.3}" },
|
|
@@ -89,6 +89,11 @@
|
|
|
89
89
|
"contrast": { "$type": "color", "$value": "{color.red.11}" },
|
|
90
90
|
"default": { "$type": "color", "$value": "{color.red.9}" },
|
|
91
91
|
"muted": { "$type": "color", "$value": "{color.red.3}" },
|
|
92
|
+
"solid": {
|
|
93
|
+
"default": { "$type": "color", "$value": "{color.red.11}" },
|
|
94
|
+
"hover": { "$type": "color", "$value": "{color.redStrong.1}" },
|
|
95
|
+
"pressed": { "$type": "color", "$value": "{color.redStrong.2}" }
|
|
96
|
+
},
|
|
92
97
|
"surface": {
|
|
93
98
|
"level0": { "$type": "color", "$value": "{color.red.2}" },
|
|
94
99
|
"level1": { "$type": "color", "$value": "{color.red.3}" },
|
|
@@ -86,6 +86,11 @@
|
|
|
86
86
|
"contrast": { "$type": "color", "$value": "{color.redDark.11}" },
|
|
87
87
|
"default": { "$type": "color", "$value": "{color.redDark.9}" },
|
|
88
88
|
"muted": { "$type": "color", "$value": "{color.redDark.3}" },
|
|
89
|
+
"solid": {
|
|
90
|
+
"default": { "$type": "color", "$value": "{color.redDark.9}" },
|
|
91
|
+
"hover": { "$type": "color", "$value": "{color.redDark.10}" },
|
|
92
|
+
"pressed": { "$type": "color", "$value": "{color.redDark.10}" }
|
|
93
|
+
},
|
|
89
94
|
"surface": {
|
|
90
95
|
"level0": { "$type": "color", "$value": "{color.redDark.2}" },
|
|
91
96
|
"level1": { "$type": "color", "$value": "{color.redDark.3}" },
|
|
@@ -86,6 +86,11 @@
|
|
|
86
86
|
"contrast": { "$type": "color", "$value": "{color.red.11}" },
|
|
87
87
|
"default": { "$type": "color", "$value": "{color.red.9}" },
|
|
88
88
|
"muted": { "$type": "color", "$value": "{color.red.3}" },
|
|
89
|
+
"solid": {
|
|
90
|
+
"default": { "$type": "color", "$value": "{color.red.11}" },
|
|
91
|
+
"hover": { "$type": "color", "$value": "{color.redStrong.1}" },
|
|
92
|
+
"pressed": { "$type": "color", "$value": "{color.redStrong.2}" }
|
|
93
|
+
},
|
|
89
94
|
"surface": {
|
|
90
95
|
"level0": { "$type": "color", "$value": "{color.red.2}" },
|
|
91
96
|
"level1": { "$type": "color", "$value": "{color.red.3}" },
|
|
@@ -269,6 +269,20 @@
|
|
|
269
269
|
"$type": "color",
|
|
270
270
|
"$value": "{color.redDark.3}"
|
|
271
271
|
},
|
|
272
|
+
"solid": {
|
|
273
|
+
"default": {
|
|
274
|
+
"$type": "color",
|
|
275
|
+
"$value": "{color.redDark.9}"
|
|
276
|
+
},
|
|
277
|
+
"hover": {
|
|
278
|
+
"$type": "color",
|
|
279
|
+
"$value": "{color.redDark.10}"
|
|
280
|
+
},
|
|
281
|
+
"pressed": {
|
|
282
|
+
"$type": "color",
|
|
283
|
+
"$value": "{color.redDark.10}"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
272
286
|
"surface": {
|
|
273
287
|
"level0": {
|
|
274
288
|
"$type": "color",
|
|
@@ -269,6 +269,20 @@
|
|
|
269
269
|
"$type": "color",
|
|
270
270
|
"$value": "{color.red.3}"
|
|
271
271
|
},
|
|
272
|
+
"solid": {
|
|
273
|
+
"default": {
|
|
274
|
+
"$type": "color",
|
|
275
|
+
"$value": "{color.red.11}"
|
|
276
|
+
},
|
|
277
|
+
"hover": {
|
|
278
|
+
"$type": "color",
|
|
279
|
+
"$value": "{color.redStrong.1}"
|
|
280
|
+
},
|
|
281
|
+
"pressed": {
|
|
282
|
+
"$type": "color",
|
|
283
|
+
"$value": "{color.redStrong.2}"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
272
286
|
"surface": {
|
|
273
287
|
"level0": {
|
|
274
288
|
"$type": "color",
|
|
@@ -269,6 +269,20 @@
|
|
|
269
269
|
"$type": "color",
|
|
270
270
|
"$value": "{color.redDark.3}"
|
|
271
271
|
},
|
|
272
|
+
"solid": {
|
|
273
|
+
"default": {
|
|
274
|
+
"$type": "color",
|
|
275
|
+
"$value": "{color.redDark.9}"
|
|
276
|
+
},
|
|
277
|
+
"hover": {
|
|
278
|
+
"$type": "color",
|
|
279
|
+
"$value": "{color.redDark.10}"
|
|
280
|
+
},
|
|
281
|
+
"pressed": {
|
|
282
|
+
"$type": "color",
|
|
283
|
+
"$value": "{color.redDark.10}"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
272
286
|
"surface": {
|
|
273
287
|
"level0": {
|
|
274
288
|
"$type": "color",
|
|
@@ -269,6 +269,20 @@
|
|
|
269
269
|
"$type": "color",
|
|
270
270
|
"$value": "{color.red.3}"
|
|
271
271
|
},
|
|
272
|
+
"solid": {
|
|
273
|
+
"default": {
|
|
274
|
+
"$type": "color",
|
|
275
|
+
"$value": "{color.red.11}"
|
|
276
|
+
},
|
|
277
|
+
"hover": {
|
|
278
|
+
"$type": "color",
|
|
279
|
+
"$value": "{color.redStrong.1}"
|
|
280
|
+
},
|
|
281
|
+
"pressed": {
|
|
282
|
+
"$type": "color",
|
|
283
|
+
"$value": "{color.redStrong.2}"
|
|
284
|
+
}
|
|
285
|
+
},
|
|
272
286
|
"surface": {
|
|
273
287
|
"level0": {
|
|
274
288
|
"$type": "color",
|
|
@@ -257,6 +257,20 @@
|
|
|
257
257
|
"$type": "color",
|
|
258
258
|
"$value": "{color.redDark.3}"
|
|
259
259
|
},
|
|
260
|
+
"solid": {
|
|
261
|
+
"default": {
|
|
262
|
+
"$type": "color",
|
|
263
|
+
"$value": "{color.redDark.9}"
|
|
264
|
+
},
|
|
265
|
+
"hover": {
|
|
266
|
+
"$type": "color",
|
|
267
|
+
"$value": "{color.redDark.10}"
|
|
268
|
+
},
|
|
269
|
+
"pressed": {
|
|
270
|
+
"$type": "color",
|
|
271
|
+
"$value": "{color.redDark.10}"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
260
274
|
"surface": {
|
|
261
275
|
"level0": {
|
|
262
276
|
"$type": "color",
|
|
@@ -257,6 +257,20 @@
|
|
|
257
257
|
"$type": "color",
|
|
258
258
|
"$value": "{color.red.3}"
|
|
259
259
|
},
|
|
260
|
+
"solid": {
|
|
261
|
+
"default": {
|
|
262
|
+
"$type": "color",
|
|
263
|
+
"$value": "{color.red.11}"
|
|
264
|
+
},
|
|
265
|
+
"hover": {
|
|
266
|
+
"$type": "color",
|
|
267
|
+
"$value": "{color.redStrong.1}"
|
|
268
|
+
},
|
|
269
|
+
"pressed": {
|
|
270
|
+
"$type": "color",
|
|
271
|
+
"$value": "{color.redStrong.2}"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
260
274
|
"surface": {
|
|
261
275
|
"level0": {
|
|
262
276
|
"$type": "color",
|
|
@@ -431,10 +431,10 @@
|
|
|
431
431
|
"usage": ["Error messages", "Validation failures", "Critical alerts", "Destructive actions"],
|
|
432
432
|
"accessibility": "Always combine with error text and icons, never rely on color alone",
|
|
433
433
|
"relationships": ["color.state.error.contrast", "color.state.error.background", "color.text.default.inverse"],
|
|
434
|
-
"examples": ["Form validation errors", "Failed transaction alerts", "
|
|
434
|
+
"examples": ["Form validation errors", "Failed transaction alerts", "Error icons and borders"],
|
|
435
435
|
"brand-impact": "High - critical user feedback",
|
|
436
436
|
"semantic-meaning": "Error indication and negative feedback",
|
|
437
|
-
"do": ["Use for errors and failures", "Combine with error icons", "
|
|
437
|
+
"do": ["Use for errors and failures", "Combine with error icons", "Use color.state.error.solid.* for destructive button fills"],
|
|
438
438
|
"dont": ["Use for warnings", "Apply decoratively", "Use without clear error context"]
|
|
439
439
|
}
|
|
440
440
|
},
|
|
@@ -467,6 +467,53 @@
|
|
|
467
467
|
"do": ["Use for error alerts", "Apply to validation messages", "Pair with error icons"],
|
|
468
468
|
"dont": ["Use for buttons", "Apply to general content", "Make alarming without reason"]
|
|
469
469
|
}
|
|
470
|
+
},
|
|
471
|
+
"solid": {
|
|
472
|
+
"default": {
|
|
473
|
+
"$type": "color",
|
|
474
|
+
"$value": "{alias.color.state.error.solid.default}",
|
|
475
|
+
"$rag": {
|
|
476
|
+
"description": "Solid error fill for destructive actions that carry a text label",
|
|
477
|
+
"usage": ["Destructive button backgrounds", "Filled error controls with a text label"],
|
|
478
|
+
"accessibility": "Meets WCAG AA (4.5:1) against color.text.default.inverse in every theme. Interaction states move away from the label color, so contrast never drops: darker in light themes, lighter in dark themes",
|
|
479
|
+
"relationships": ["color.state.error.solid.default", "color.state.error.solid.hover", "color.state.error.solid.pressed", "color.text.default.inverse"],
|
|
480
|
+
"examples": ["Delete button", "Remove account confirmation"],
|
|
481
|
+
"brand-impact": "High - critical user feedback",
|
|
482
|
+
"semantic-meaning": "Filled error surface that carries text",
|
|
483
|
+
"do": ["Pair with color.text.default.inverse", "Use for irreversible actions"],
|
|
484
|
+
"dont": ["Use for passive error feedback (use color.state.error.default)", "Use for warnings"]
|
|
485
|
+
}
|
|
486
|
+
},
|
|
487
|
+
"hover": {
|
|
488
|
+
"$type": "color",
|
|
489
|
+
"$value": "{alias.color.state.error.solid.hover}",
|
|
490
|
+
"$rag": {
|
|
491
|
+
"description": "Solid error fill for the hover state of destructive actions",
|
|
492
|
+
"usage": ["Destructive button hover"],
|
|
493
|
+
"accessibility": "Meets WCAG AA (4.5:1) against color.text.default.inverse in every theme. Interaction states move away from the label color, so contrast never drops: darker in light themes, lighter in dark themes",
|
|
494
|
+
"relationships": ["color.state.error.solid.default", "color.state.error.solid.hover", "color.state.error.solid.pressed", "color.text.default.inverse"],
|
|
495
|
+
"examples": ["Hovered delete button"],
|
|
496
|
+
"brand-impact": "High - critical user feedback",
|
|
497
|
+
"semantic-meaning": "Filled error surface that carries text",
|
|
498
|
+
"do": ["Use with color.state.error.solid.default"],
|
|
499
|
+
"dont": ["Use as a resting color"]
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
"pressed": {
|
|
503
|
+
"$type": "color",
|
|
504
|
+
"$value": "{alias.color.state.error.solid.pressed}",
|
|
505
|
+
"$rag": {
|
|
506
|
+
"description": "Solid error fill for the pressed/active state of destructive actions",
|
|
507
|
+
"usage": ["Destructive button pressed, open or toggled state"],
|
|
508
|
+
"accessibility": "Meets WCAG AA (4.5:1) against color.text.default.inverse in every theme. Interaction states move away from the label color, so contrast never drops: darker in light themes, lighter in dark themes",
|
|
509
|
+
"relationships": ["color.state.error.solid.default", "color.state.error.solid.hover", "color.state.error.solid.pressed", "color.text.default.inverse"],
|
|
510
|
+
"examples": ["Pressed delete button"],
|
|
511
|
+
"brand-impact": "High - critical user feedback",
|
|
512
|
+
"semantic-meaning": "Filled error surface that carries text",
|
|
513
|
+
"do": ["Use with color.state.error.solid.default"],
|
|
514
|
+
"dont": ["Use as a resting color"]
|
|
515
|
+
}
|
|
516
|
+
}
|
|
470
517
|
}
|
|
471
518
|
},
|
|
472
519
|
"info": {
|