@midas-ds/components 8.1.0 → 8.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/accordion/Accordion.d.ts +1 -1
- package/button/Button.d.ts +1 -1
- package/calendar/Calendar.d.ts +4 -4
- package/calendar/CalendarGrid.d.ts +6 -0
- package/calendar/CalendarHeader.d.ts +2 -0
- package/calendar/RangeCalendar.d.ts +4 -4
- package/calendar/index.d.ts +2 -2
- package/card/Card.d.ts +29 -32
- package/date-field/DateField.d.ts +4 -4
- package/date-field/DateInput.d.ts +4 -0
- package/date-field/DateInputDivider.d.ts +2 -0
- package/date-field/DateSegment.d.ts +4 -0
- package/date-field/index.d.ts +4 -1
- package/date-picker/DatePicker.d.ts +4 -10
- package/date-picker/DatePickerInputField.d.ts +8 -0
- package/date-picker/DatePickerPopover.d.ts +6 -0
- package/date-picker/DateRangePicker.d.ts +9 -0
- package/date-picker/index.d.ts +2 -2
- package/index.cjs +32 -32
- package/index.css +1 -1
- package/index.js +6165 -6096
- package/label/Label.d.ts +1 -1
- package/modal/Dialog.d.ts +2 -2
- package/package.json +1 -1
- package/spinner/Spinner.d.ts +1 -1
- package/table/Table.d.ts +1 -1
- package/tabs/Tabs.d.ts +1 -1
- package/textfield/TextFieldBase.d.ts +5 -0
- package/theme/index.d.ts +3 -0
- package/theme/tokens.d.ts +3 -0
- package/theme.cjs +1 -1
- package/theme.js +2 -2
- package/{tokens-B0IQe84F.cjs → tokens-B6mMZ0T6.cjs} +1 -1
- package/{tokens-BWq37Xsh.js → tokens-CEzXihhV.js} +10 -2
- package/tooltip/Tooltip.d.ts +1 -2
- package/utils/intl/useMessageFormatter.d.ts +1 -1
- package/utils/storybook.d.ts +4 -0
- package/utils/test.d.ts +7 -0
package/label/Label.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { LabelProps as AriaLabelProps } from 'react-aria-components';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export interface LabelProps extends AriaLabelProps {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* @deprecated since v8.2.0 Please use Label without variant for label-02, and for label-01 use Text component with slot: 'description'
|
|
6
6
|
*/
|
|
7
7
|
variant?: 'label-01' | 'label-02';
|
|
8
8
|
}
|
package/modal/Dialog.d.ts
CHANGED
|
@@ -10,11 +10,11 @@ interface DialogProps extends AriaDialogProps {
|
|
|
10
10
|
title?: React.ReactNode;
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
}
|
|
13
|
-
/** @deprecated since
|
|
13
|
+
/** @deprecated since v6.0.0 use Modal instead.
|
|
14
14
|
* See docs {@link https://designsystem.migrationsverket.se/|Midas}
|
|
15
15
|
*/
|
|
16
16
|
export declare const Dialog: React.FC<DialogProps>;
|
|
17
|
-
/** @deprecated since
|
|
17
|
+
/** @deprecated since v6.0.0, use DialogTrigger instead.
|
|
18
18
|
* See docs {@link https://designsystem.migrationsverket.se/|Midas}
|
|
19
19
|
*/
|
|
20
20
|
export declare const ModalTrigger: React.FC<OverlayTriggerProps & {
|
package/package.json
CHANGED
package/spinner/Spinner.d.ts
CHANGED
package/table/Table.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
|
|
2
2
|
export interface TableProps extends AriaTableProps {
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated This variant will be replaced with a new scaling api accross all components.
|
|
4
|
+
* @deprecated since v8.0.0 This variant will be replaced with a new scaling api accross all components.
|
|
5
5
|
*/
|
|
6
6
|
narrow?: boolean;
|
|
7
7
|
/**
|
package/tabs/Tabs.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TextFieldProps, ValidationResult } from 'react-aria-components';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
export type Size = 'medium' | 'large';
|
|
3
4
|
export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
/** Specify label displayed above the TextField*/
|
|
@@ -15,5 +16,9 @@ export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
|
|
|
15
16
|
* false
|
|
16
17
|
*/
|
|
17
18
|
showCounter?: boolean;
|
|
19
|
+
/** Component size (large: height 48px, medium: height 40px)
|
|
20
|
+
* @default 'large'
|
|
21
|
+
* */
|
|
22
|
+
size?: Size;
|
|
18
23
|
}
|
|
19
24
|
export declare const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<HTMLDivElement>>;
|
package/theme/index.d.ts
CHANGED
|
@@ -153,6 +153,7 @@ export declare const theme: {
|
|
|
153
153
|
fieldSkeleton: string;
|
|
154
154
|
iconPrimary: string;
|
|
155
155
|
iconSecondary: string;
|
|
156
|
+
iconTertiary: string;
|
|
156
157
|
iconInverse: string;
|
|
157
158
|
iconOnColor: string;
|
|
158
159
|
iconDisabled: string;
|
|
@@ -197,6 +198,8 @@ export declare const theme: {
|
|
|
197
198
|
buttonBackgroundSkeleton: string;
|
|
198
199
|
buttonBorderSecondary: string;
|
|
199
200
|
logoPrimary: string;
|
|
201
|
+
menuItemBackgroundHover: string;
|
|
202
|
+
menuItemBackgroundSelected: string;
|
|
200
203
|
};
|
|
201
204
|
zIndex: {
|
|
202
205
|
base: number;
|
package/theme/tokens.d.ts
CHANGED
|
@@ -151,6 +151,7 @@ export declare const semantic: {
|
|
|
151
151
|
fieldSkeleton: string;
|
|
152
152
|
iconPrimary: string;
|
|
153
153
|
iconSecondary: string;
|
|
154
|
+
iconTertiary: string;
|
|
154
155
|
iconInverse: string;
|
|
155
156
|
iconOnColor: string;
|
|
156
157
|
iconDisabled: string;
|
|
@@ -195,6 +196,8 @@ export declare const semantic: {
|
|
|
195
196
|
buttonBackgroundSkeleton: string;
|
|
196
197
|
buttonBorderSecondary: string;
|
|
197
198
|
logoPrimary: string;
|
|
199
|
+
menuItemBackgroundHover: string;
|
|
200
|
+
menuItemBackgroundSelected: string;
|
|
198
201
|
};
|
|
199
202
|
export declare const zIndex: {
|
|
200
203
|
base: number;
|
package/theme.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-B6mMZ0T6.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;
|
package/theme.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { t as s } from "./tokens-
|
|
2
|
-
import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-
|
|
1
|
+
import { t as s } from "./tokens-CEzXihhV.js";
|
|
2
|
+
import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-CEzXihhV.js";
|
|
3
3
|
const t = { ...s };
|
|
4
4
|
export {
|
|
5
5
|
n as baseColors,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue10:"#eaf2f6",signalBlue100:"#0066cc",signalGreen20:"#d5f2d9",signalGreen30:"#bae5c5",signalGreen100:"#008d3c",signalYellow10:"#fff8e1",signalYellow100:"#fdb813",signalRed20:"#ffdfdf",signalRed30:"#fcc8c8",signalRed80:"#eb4e4e",signalRed100:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},i={focus:"0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"},l={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},t={sm:`(max-width: ${e.md-1}px)`,md:`(min-width: ${e.md}px)`,lg:`(min-width: ${e.lg}px)`,xl:`(min-width: ${e.xl}px)`,forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},d={background:`light-dark(${r.white}, ${r.gray200})`,backgroundHover:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderPrimary:`light-dark(${r.gray200}, ${r.gray10})`,borderSecondary:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderTertiary:`light-dark(${r.blue170}, ${r.blue100})`,borderInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,iconInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,iconWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,iconImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,supportBorderSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,supportBorderInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,supportBorderImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,supportBorderWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,supportBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,supportBackgroundSuccessHover:`light-dark(${r.signalGreen30}, ${r.gray170})`,supportBackgroundInfo:`light-dark(${r.signalBlue10}, ${r.gray180})`,supportBackgroundImportant:`light-dark(${r.signalYellow10}, ${r.gray180})`,supportBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,supportBackgroundWarningHover:`light-dark(${r.signalRed30}, ${r.gray170})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textTertiary:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed100}, ${r.signalRed100})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},n={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},o=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:d,spacing:g,states:i,transitions:l,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=l;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;
|
|
1
|
+
"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue10:"#eaf2f6",signalBlue100:"#0066cc",signalGreen20:"#d5f2d9",signalGreen30:"#bae5c5",signalGreen100:"#008d3c",signalYellow10:"#fff8e1",signalYellow100:"#fdb813",signalRed20:"#ffdfdf",signalRed30:"#fcc8c8",signalRed80:"#eb4e4e",signalRed100:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},i={focus:"0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"},l={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},t={sm:`(max-width: ${e.md-1}px)`,md:`(min-width: ${e.md}px)`,lg:`(min-width: ${e.lg}px)`,xl:`(min-width: ${e.xl}px)`,forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},d={background:`light-dark(${r.white}, ${r.gray200})`,backgroundHover:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderPrimary:`light-dark(${r.gray200}, ${r.gray10})`,borderSecondary:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderTertiary:`light-dark(${r.blue170}, ${r.blue100})`,borderInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.gray140}, ${r.gray70})`,iconTertiary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,iconInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,iconWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,iconImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,supportBorderSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,supportBorderInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,supportBorderImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,supportBorderWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,supportBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,supportBackgroundSuccessHover:`light-dark(${r.signalGreen30}, ${r.gray170})`,supportBackgroundInfo:`light-dark(${r.signalBlue10}, ${r.gray180})`,supportBackgroundImportant:`light-dark(${r.signalYellow10}, ${r.gray180})`,supportBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,supportBackgroundWarningHover:`light-dark(${r.signalRed30}, ${r.gray170})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textTertiary:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed100}, ${r.signalRed100})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`,menuItemBackgroundHover:`light-dark(${r.gray20}, ${r.gray190})`,menuItemBackgroundSelected:`light-dark(${r.gray10}, ${r.gray180})`},n={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},o=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:d,spacing:g,states:i,transitions:l,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=l;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;
|
|
@@ -163,6 +163,11 @@ const r = {
|
|
|
163
163
|
borderSecondary: `light-dark(${r.gray110}, ${r.gray90})`,
|
|
164
164
|
borderSubtle: `light-dark(${r.gray50}, ${r.gray160})`,
|
|
165
165
|
borderTertiary: `light-dark(${r.blue170}, ${r.blue100})`,
|
|
166
|
+
/*
|
|
167
|
+
* @deprecated
|
|
168
|
+
* Deprecated in 8.2.0
|
|
169
|
+
* Please use --support-border-warning instead.
|
|
170
|
+
*/
|
|
166
171
|
borderInvalid: `light-dark(${r.signalRed100}, ${r.signalRed80})`,
|
|
167
172
|
borderDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
|
|
168
173
|
field01: `light-dark(${r.gray10}, ${r.gray180})`,
|
|
@@ -174,7 +179,8 @@ const r = {
|
|
|
174
179
|
fieldDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
|
|
175
180
|
fieldSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
|
|
176
181
|
iconPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
|
|
177
|
-
iconSecondary: `light-dark(${r.
|
|
182
|
+
iconSecondary: `light-dark(${r.gray140}, ${r.gray70})`,
|
|
183
|
+
iconTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
|
|
178
184
|
iconInverse: `light-dark(${r.white}, ${r.gray200})`,
|
|
179
185
|
iconOnColor: `light-dark(${r.white}, ${r.white})`,
|
|
180
186
|
iconDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
|
|
@@ -218,7 +224,9 @@ const r = {
|
|
|
218
224
|
buttonBackgroundDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
|
|
219
225
|
buttonBackgroundSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
|
|
220
226
|
buttonBorderSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
|
|
221
|
-
logoPrimary: `light-dark(${r.red100}, ${r.white})
|
|
227
|
+
logoPrimary: `light-dark(${r.red100}, ${r.white})`,
|
|
228
|
+
menuItemBackgroundHover: `light-dark(${r.gray20}, ${r.gray190})`,
|
|
229
|
+
menuItemBackgroundSelected: `light-dark(${r.gray10}, ${r.gray180})`
|
|
222
230
|
}, n = {
|
|
223
231
|
base: 1,
|
|
224
232
|
above: 10,
|
package/tooltip/Tooltip.d.ts
CHANGED
|
@@ -2,8 +2,7 @@ import { TooltipProps, TooltipTriggerComponentProps } from 'react-aria-component
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
interface MidasTooltipProps extends Omit<TooltipProps, 'children'> {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
placement?: 'top' | 'right' | 'bottom' | 'left';
|
|
6
5
|
}
|
|
7
|
-
export declare function Tooltip({ children,
|
|
6
|
+
export declare function Tooltip({ children, className, ...props }: MidasTooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export declare function TooltipTrigger({ children, delay, ...props }: TooltipTriggerComponentProps): import("react/jsx-runtime").JSX.Element;
|
|
9
8
|
export {};
|
|
@@ -6,6 +6,6 @@ export type FormatMessage = (key: string, variables?: {
|
|
|
6
6
|
* Handles formatting ICU Message strings to create localized strings for the current locale.
|
|
7
7
|
* Automatically updates when the locale changes, and handles caching of messages for performance.
|
|
8
8
|
* @param strings - A mapping of languages to strings by key.
|
|
9
|
-
* @deprecated - use useLocalizedStringFormatter instead.
|
|
9
|
+
* @deprecated since v7.0.0 - use useLocalizedStringFormatter instead.
|
|
10
10
|
*/
|
|
11
11
|
export declare function useMessageFormatter(strings: LocalizedStrings): FormatMessage;
|
package/utils/test.d.ts
CHANGED
|
@@ -2,3 +2,10 @@
|
|
|
2
2
|
* A utility for making visual assertions in Storybook play tests based on the browsers "prefers-colors-scheme" setting
|
|
3
3
|
*/
|
|
4
4
|
export declare const lightDark: (light: string, dark: string) => string;
|
|
5
|
+
/**
|
|
6
|
+
* Convert a CSS hex color to CSS rgb color
|
|
7
|
+
* ```
|
|
8
|
+
* '#f2f2f2' => 'rgb(242, 242, 242)'
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export declare const hexToRgb: (hex: string) => string;
|