@qoretechnologies/reqore 0.78.11-pr.723.g4423093 → 0.78.11
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/components/Accordion/index.d.ts.map +1 -1
- package/dist/components/Accordion/index.js +14 -60
- package/dist/components/Accordion/index.js.map +1 -1
- package/dist/components/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/index.js +21 -58
- package/dist/components/Breadcrumbs/index.js.map +1 -1
- package/dist/components/Bubble/index.d.ts.map +1 -1
- package/dist/components/Bubble/index.js +4 -13
- package/dist/components/Bubble/index.js.map +1 -1
- package/dist/components/Button/index.d.ts +0 -67
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +98 -238
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Callout/index.d.ts.map +1 -1
- package/dist/components/Callout/index.js +29 -49
- package/dist/components/Callout/index.js.map +1 -1
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +36 -112
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/CollapsibleContent/index.d.ts.map +1 -1
- package/dist/components/CollapsibleContent/index.js +2 -6
- package/dist/components/CollapsibleContent/index.js.map +1 -1
- package/dist/components/ControlGroup/index.d.ts.map +1 -1
- package/dist/components/ControlGroup/index.js +1 -22
- package/dist/components/ControlGroup/index.js.map +1 -1
- package/dist/components/DataView/index.d.ts.map +1 -1
- package/dist/components/DataView/index.js +10 -13
- package/dist/components/DataView/index.js.map +1 -1
- package/dist/components/DescriptionList/index.d.ts.map +1 -1
- package/dist/components/DescriptionList/index.js +4 -30
- package/dist/components/DescriptionList/index.js.map +1 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +25 -41
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Dropdown/list.d.ts.map +1 -1
- package/dist/components/Dropdown/list.js +14 -19
- package/dist/components/Dropdown/list.js.map +1 -1
- package/dist/components/Effect/index.d.ts +0 -37
- package/dist/components/Effect/index.d.ts.map +1 -1
- package/dist/components/Effect/index.js +58 -224
- package/dist/components/Effect/index.js.map +1 -1
- package/dist/components/EntityRow/index.d.ts.map +1 -1
- package/dist/components/EntityRow/index.js +59 -98
- package/dist/components/EntityRow/index.js.map +1 -1
- package/dist/components/FeatureCard/index.d.ts.map +1 -1
- package/dist/components/FeatureCard/index.js +21 -54
- package/dist/components/FeatureCard/index.js.map +1 -1
- package/dist/components/Header/index.d.ts.map +1 -1
- package/dist/components/Header/index.js +4 -7
- package/dist/components/Header/index.js.map +1 -1
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +3 -13
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Input/index.d.ts +1 -44
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +23 -89
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/InputClearButton/index.d.ts +2 -7
- package/dist/components/InputClearButton/index.d.ts.map +1 -1
- package/dist/components/InputClearButton/index.js +5 -12
- package/dist/components/InputClearButton/index.js.map +1 -1
- package/dist/components/InternalPopover/index.d.ts.map +1 -1
- package/dist/components/InternalPopover/index.js +10 -19
- package/dist/components/InternalPopover/index.js.map +1 -1
- package/dist/components/Link/index.d.ts.map +1 -1
- package/dist/components/Link/index.js +1 -6
- package/dist/components/Link/index.js.map +1 -1
- package/dist/components/Menu/divider.d.ts.map +1 -1
- package/dist/components/Menu/divider.js +3 -8
- package/dist/components/Menu/divider.js.map +1 -1
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +4 -17
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Message/index.js +4 -20
- package/dist/components/Message/index.js.map +1 -1
- package/dist/components/NavRail/index.d.ts +0 -2
- package/dist/components/NavRail/index.d.ts.map +1 -1
- package/dist/components/NavRail/index.js +40 -120
- package/dist/components/NavRail/index.js.map +1 -1
- package/dist/components/Notifications/notification.d.ts +2 -6
- package/dist/components/Notifications/notification.d.ts.map +1 -1
- package/dist/components/Notifications/notification.js +18 -78
- package/dist/components/Notifications/notification.js.map +1 -1
- package/dist/components/Notifications/styles.d.ts +0 -20
- package/dist/components/Notifications/styles.d.ts.map +1 -1
- package/dist/components/Notifications/styles.js +9 -37
- package/dist/components/Notifications/styles.js.map +1 -1
- package/dist/components/Panel/index.d.ts +0 -3
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +153 -214
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +5 -8
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Progress/index.d.ts.map +1 -1
- package/dist/components/Progress/index.js +1 -1
- package/dist/components/Progress/index.js.map +1 -1
- package/dist/components/Rating/index.d.ts.map +1 -1
- package/dist/components/Rating/index.js +8 -20
- package/dist/components/Rating/index.js.map +1 -1
- package/dist/components/RichTextEditor/index.d.ts +5 -0
- package/dist/components/RichTextEditor/index.d.ts.map +1 -1
- package/dist/components/RichTextEditor/index.js +52 -90
- package/dist/components/RichTextEditor/index.js.map +1 -1
- package/dist/components/SegmentedControl/index.d.ts.map +1 -1
- package/dist/components/SegmentedControl/index.js +42 -87
- package/dist/components/SegmentedControl/index.js.map +1 -1
- package/dist/components/SeverityRow/index.d.ts.map +1 -1
- package/dist/components/SeverityRow/index.js +1 -1
- package/dist/components/SeverityRow/index.js.map +1 -1
- package/dist/components/Span/index.d.ts.map +1 -1
- package/dist/components/Span/index.js +5 -8
- package/dist/components/Span/index.js.map +1 -1
- package/dist/components/StackedBar/index.d.ts.map +1 -1
- package/dist/components/StackedBar/index.js +12 -42
- package/dist/components/StackedBar/index.js.map +1 -1
- package/dist/components/Statistic/index.d.ts.map +1 -1
- package/dist/components/Statistic/index.js +6 -34
- package/dist/components/Statistic/index.js.map +1 -1
- package/dist/components/Table/cell.d.ts.map +1 -1
- package/dist/components/Table/cell.js +41 -72
- package/dist/components/Table/cell.js.map +1 -1
- package/dist/components/Table/headerCell.d.ts.map +1 -1
- package/dist/components/Table/headerCell.js +5 -7
- package/dist/components/Table/headerCell.js.map +1 -1
- package/dist/components/Tag/index.d.ts +3 -70
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Tag/index.js +67 -233
- package/dist/components/Tag/index.js.map +1 -1
- package/dist/components/Testimonial/index.d.ts.map +1 -1
- package/dist/components/Testimonial/index.js +20 -35
- package/dist/components/Testimonial/index.js.map +1 -1
- package/dist/components/Textarea/index.d.ts +0 -6
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +20 -20
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/components/Timeline/index.d.ts +0 -2
- package/dist/components/Timeline/index.d.ts.map +1 -1
- package/dist/components/Timeline/index.js +13 -56
- package/dist/components/Timeline/index.js.map +1 -1
- package/dist/components/Tree/index.d.ts.map +1 -1
- package/dist/components/Tree/index.js +20 -24
- package/dist/components/Tree/index.js.map +1 -1
- package/dist/containers/UIProvider.d.ts +0 -10
- package/dist/containers/UIProvider.d.ts.map +1 -1
- package/dist/containers/UIProvider.js +4 -33
- package/dist/containers/UIProvider.js.map +1 -1
- package/dist/helpers/colors.d.ts +2 -184
- package/dist/helpers/colors.d.ts.map +1 -1
- package/dist/helpers/colors.js +86 -739
- package/dist/helpers/colors.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
- package/tests.json +1 -0
- package/vitest.config.ts +0 -10
- package/dist/context/SurfaceContext.d.ts +0 -18
- package/dist/context/SurfaceContext.d.ts.map +0 -1
- package/dist/context/SurfaceContext.js +0 -39
- package/dist/context/SurfaceContext.js.map +0 -1
- package/dist/helpers/iconProps.d.ts +0 -14
- package/dist/helpers/iconProps.d.ts.map +0 -1
- package/dist/helpers/iconProps.js +0 -33
- package/dist/helpers/iconProps.js.map +0 -1
- package/dist/helpers/surface.d.ts +0 -31
- package/dist/helpers/surface.d.ts.map +0 -1
- package/dist/helpers/surface.js +0 -87
- package/dist/helpers/surface.js.map +0 -1
- package/dist/hooks/useDrawnSurface.d.ts +0 -38
- package/dist/hooks/useDrawnSurface.d.ts.map +0 -1
- package/dist/hooks/useDrawnSurface.js +0 -48
- package/dist/hooks/useDrawnSurface.js.map +0 -1
package/dist/helpers/colors.d.ts
CHANGED
|
@@ -1,126 +1,17 @@
|
|
|
1
1
|
import { TReqoreEffectColor, TReqoreEffectGradientColors, TReqoreEffectGradientColorsObject, TReqoreHexColor, TReqoreMultiTypeColor, TReqoreRgbaColor } from '../components/Effect';
|
|
2
2
|
import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
|
|
3
|
-
/**
|
|
4
|
-
* A helper's memory of its results (see `COLOR_CACHE_SIZE`): `remember(key, compute)`. Also for a component's
|
|
5
|
-
* color work that is a function of its key alone (an effect's gradient pass): not part of the package's API.
|
|
6
|
-
*/
|
|
7
|
-
export declare const createColorCache: <T>() => (key: string, compute: () => T) => T;
|
|
8
|
-
/** One key for any list of a helper's arguments (colors, numbers, flags, lists of colors). */
|
|
9
|
-
export declare const cacheKey: (...parts: unknown[]) => string;
|
|
10
|
-
/**
|
|
11
|
-
* What of a theme the helpers that take one read: its main, the main it was made from, and its intents. The
|
|
12
|
-
* intents are written out once per intents object.
|
|
13
|
-
*/
|
|
14
|
-
export declare const getThemeColorKey: (theme: Partial<IReqoreTheme>) => string;
|
|
15
3
|
export declare const getReadableColor: (theme: Partial<IReqoreTheme>, ifLight?: TReqoreHexColor, ifDark?: TReqoreHexColor, dimmed?: boolean, fallback?: TReqoreHexColor) => TReqoreHexColor;
|
|
16
|
-
|
|
17
|
-
* How far text has to stand out from what it is drawn on (WCAG 2.1 AA, 1.4.3): 4.5:1.
|
|
18
|
-
*/
|
|
19
|
-
export declare const READABLE_TEXT_CONTRAST = 4.5;
|
|
20
|
-
/**
|
|
21
|
-
* How far an icon (or any other graphic a control needs to be understood) and large text have to stand out from
|
|
22
|
-
* what they are drawn on (WCAG 2.1 AA, 1.4.11 and 1.4.3): 3:1.
|
|
23
|
-
*/
|
|
24
|
-
export declare const READABLE_ICON_CONTRAST = 3;
|
|
25
|
-
/** The least size (px) from which bold text is large in WCAG's sense (14pt), and needs to stand out by 3:1 only. */
|
|
26
|
-
export declare const LARGE_BOLD_TEXT_PX = 18.66;
|
|
27
|
-
/** Whether the helpers can read `color` (see `parseColor`). */
|
|
28
|
-
export declare const isReadableColor: (color: unknown) => boolean;
|
|
29
|
-
/**
|
|
30
|
-
* `color` at `alpha`, as polished's `rgba(color, alpha)` writes it. A color it cannot read (a CSS variable,
|
|
31
|
-
* `currentColor`) is drawn as given, not thrown on: at an alpha below 1, mixed with nothing by the browser
|
|
32
|
-
* (`color-mix(in srgb, var(--brand) 20%, transparent)`), so a wash of it is still a wash and not the solid color
|
|
33
|
-
* the text on it is written in.
|
|
34
|
-
*/
|
|
35
|
-
export declare const getColorAtAlpha: (color: TReqoreMultiTypeColor | string, alpha: number) => string;
|
|
36
|
-
/**
|
|
37
|
-
* `color` tinted toward white by `amount` and fully saturated: the light shade of it an outlined control (a minimal
|
|
38
|
-
* button, a minimal tag) starts its text from, before it is made to read (`getReadableAccentColorOn`). A translucent
|
|
39
|
-
* color is its own hue drawn opaque; one it cannot read is as it is.
|
|
40
|
-
*/
|
|
41
|
-
export declare const getSaturatedTint: (color: TReqoreMultiTypeColor | string, amount: number) => TReqoreHexColor;
|
|
42
|
-
/**
|
|
43
|
-
* `color` as it is drawn over `under`: a translucent color blended into what is under it, the way the browser
|
|
44
|
-
* draws it, and an opaque one as it is. Without `under` (or over one it cannot read), a translucent color counts as
|
|
45
|
-
* its own hue drawn opaque. An opaque six-digit hex - except for a color that draws nothing there
|
|
46
|
-
* (`'transparent'` with nothing under it) or one it cannot read (a CSS variable), which comes back as it is given.
|
|
47
|
-
*/
|
|
48
|
-
export declare const getDrawnColor: (color: TReqoreMultiTypeColor | string, under?: TReqoreMultiTypeColor | string) => TReqoreHexColor;
|
|
49
|
-
/**
|
|
50
|
-
* `color` at `opacity` of the alpha it already has: a translucent color (a theme made from the muted intent) drawn
|
|
51
|
-
* at a panel's opacity stays as translucent, and more. `rgba(color, opacity)` replaced its alpha, so a panel in the
|
|
52
|
-
* muted intent's near-white drawn at 19% was drawn near-white and opaque. A color it cannot read is as it is.
|
|
53
|
-
*/
|
|
54
|
-
export declare const fadeColor: (color: TReqoreMultiTypeColor | string, opacity: number) => string;
|
|
55
|
-
/**
|
|
56
|
-
* The WCAG contrast ratio of two colors, each drawn opaque: from 1 to 21, not rounded. NaN when either cannot be
|
|
57
|
-
* read or draws nothing (a CSS variable, `'transparent'`): there is no telling how far it stands out.
|
|
58
|
-
*/
|
|
59
|
-
export declare const getContrastRatio: (first: TReqoreMultiTypeColor | string, second: TReqoreMultiTypeColor | string) => number;
|
|
60
|
-
/**
|
|
61
|
-
* The text color that reads on every one of `backgrounds` (each drawn over `under` when it is translucent - the
|
|
62
|
-
* colors of a gradient, or a single surface): of the text colors for a light and for a dark background (`ifLight`,
|
|
63
|
-
* `ifDark`; black and white, a shade softer when `dim`), the one that stands out more. When even that one does not
|
|
64
|
-
* reach 4.5:1, a color the caller gave stays theirs (the better of their pair); the default shades give way to pure
|
|
65
|
-
* black or white, whichever stands out more: a dimmed shade is a nicety, being read is not. A background it cannot
|
|
66
|
-
* read is left out; with none left, the text for a dark background (Reqore's default theme).
|
|
67
|
-
*/
|
|
68
|
-
export declare const getReadableColorOn: (backgrounds: (TReqoreMultiTypeColor | string)[], dim?: boolean, ifLight?: TReqoreHexColor, ifDark?: TReqoreHexColor, under?: TReqoreMultiTypeColor | string) => TReqoreHexColor;
|
|
69
|
-
/** A color, or each of the colors something may be drawn on (a gradient's, or a control's at rest and hovered). */
|
|
70
|
-
export type TReqoreReadableBackground = TReqoreMultiTypeColor | string | (TReqoreMultiTypeColor | string)[];
|
|
71
|
-
/**
|
|
72
|
-
* The least alpha (or opacity), from `alpha` up, at which `color` drawn over `background` (each of them, for a list)
|
|
73
|
-
* still stands out from it by `minContrast`: secondary text or an icon fades only as far as it can and still be read.
|
|
74
|
-
* `alpha` itself when it already reads; 1 when even the full color does not, which is for whoever chose that color to
|
|
75
|
-
* fix. A color or a background it cannot read (none given, a CSS variable) leaves `alpha` as it is: there is no
|
|
76
|
-
* telling how far it stands out.
|
|
77
|
-
*/
|
|
78
|
-
export declare const getReadableAlpha: (color: TReqoreMultiTypeColor | string, background: TReqoreReadableBackground, alpha: number, minContrast?: number) => number;
|
|
79
|
-
/** A mark (a text, an icon) as drawn in a group: its color, at `alpha`, on `on` (opaque). */
|
|
80
|
-
export interface IReqoreGroupMark {
|
|
81
|
-
color: TReqoreMultiTypeColor | string;
|
|
82
|
-
alpha: number;
|
|
83
|
-
on: TReqoreMultiTypeColor | string;
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* How far a group drawn as a whole (`opacity` on it: an idle rail resting dim) can be faded over `under` and every
|
|
87
|
-
* one of `marks` in it still stand out from what it is drawn on by `minContrast`: `opacity`, or as little more as
|
|
88
|
-
* it takes. Faded, a mark and what it is on both fade into `under`, so they draw closer together.
|
|
89
|
-
*/
|
|
90
|
-
export declare const getReadableGroupOpacity: (marks: IReqoreGroupMark[], under: TReqoreMultiTypeColor | string, opacity: number, minContrast?: number) => number;
|
|
91
|
-
/** `color` at `alpha`, or at as much more as it needs to stand out from `background` (`getReadableAlpha`). */
|
|
92
|
-
export declare const getReadableFadedColor: (color: TReqoreMultiTypeColor | string, background: TReqoreReadableBackground, alpha: number, minContrast?: number) => string;
|
|
93
|
-
/**
|
|
94
|
-
* A theme's text color on every one of `backgrounds` (what a component is drawn in - each color of its gradient):
|
|
95
|
-
* the theme's own text color when it names one, else the one that reads on all of them (`getReadableColorOn`),
|
|
96
|
-
* dimmed when the theme dims its text.
|
|
97
|
-
*/
|
|
98
|
-
export declare const getReadableTextOn: (theme: Partial<IReqoreTheme>, backgrounds: TReqoreHexColor[], dimmed?: boolean) => TReqoreHexColor;
|
|
99
|
-
/**
|
|
100
|
-
* The text color that reads on `from` (drawn over `under` when it is translucent): see `getReadableColorOn`.
|
|
101
|
-
*/
|
|
102
|
-
export declare const getReadableColorFrom: (from: TReqoreMultiTypeColor | string, dim?: boolean, ifLight?: TReqoreHexColor, ifDark?: TReqoreHexColor, under?: TReqoreMultiTypeColor | string) => TReqoreHexColor;
|
|
103
|
-
/** Whether `color` is a gray (black and white included); false for one it cannot read. */
|
|
4
|
+
export declare const getReadableColorFrom: (from: TReqoreHexColor, dim?: boolean, ifLight?: TReqoreHexColor, ifDark?: TReqoreHexColor) => TReqoreHexColor;
|
|
104
5
|
export declare const isAchromatic: (color: TReqoreMultiTypeColor) => boolean;
|
|
105
6
|
export declare const percentToHexAlpha: (p: number) => string;
|
|
106
|
-
/**
|
|
107
|
-
* The red, green, blue (0-255) and alpha (0-1) of a color: a hex of 3, 4, 6 or 8 digits, `rgb()`/`rgba()`, or any
|
|
108
|
-
* other color polished reads (`hsl()`, a named one). NaN in each for one it cannot read (a CSS variable).
|
|
109
|
-
*
|
|
110
|
-
* A short hex is each of its digits doubled (`#fdc` is `#ffddcc`). It was repeated (`#fdcfdc`, another hue), and
|
|
111
|
-
* polished writes the colors it works out short wherever it can, so a readable shade made from one of them took
|
|
112
|
-
* the wrong hue: a minimal button in `#ff5500` had lilac text instead of peach.
|
|
113
|
-
*/
|
|
114
7
|
export declare const getRGBAFromHex: (color: TReqoreMultiTypeColor) => {
|
|
115
8
|
r: number;
|
|
116
9
|
g: number;
|
|
117
10
|
b: number;
|
|
118
11
|
a: number;
|
|
119
12
|
};
|
|
120
|
-
/** `hex` as `rgba(r, g, b, a)`; an `rgb()`/`rgba()` color, and one it cannot read, as it is. */
|
|
121
13
|
export declare const hexAToRGBA: (hex: TReqoreMultiTypeColor) => TReqoreRgbaColor;
|
|
122
14
|
export declare const RGBAToHexA: (rgba: any, forceRemoveAlpha?: boolean) => TReqoreHexColor;
|
|
123
|
-
/** Whether `mainColor` is light (a lighter shade of it is made darker); false for one it cannot read. */
|
|
124
15
|
export declare const shouldDarken: (mainColor: TReqoreMultiTypeColor) => boolean;
|
|
125
16
|
export declare const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor;
|
|
126
17
|
export declare const changeLightness: (color: TReqoreHexColor, lightness?: number) => TReqoreHexColor;
|
|
@@ -129,7 +20,7 @@ export declare const changeDarkness: (color: TReqoreHexColor, lightness?: number
|
|
|
129
20
|
* The colour without its alpha channel, as a six-digit hex: `#e6e6e630` → `#e6e6e6`,
|
|
130
21
|
* `rgba(10, 102, 64, 0.5)` → `#0a6640`. For colour maths that needs the hue a colour
|
|
131
22
|
* is drawn in rather than how faintly it is drawn (Reqore's muted intent, for one, is
|
|
132
|
-
* an eight-digit hex).
|
|
23
|
+
* an eight-digit hex).
|
|
133
24
|
*/
|
|
134
25
|
export declare const getOpaqueColor: (color: TReqoreMultiTypeColor) => TReqoreHexColor;
|
|
135
26
|
/**
|
|
@@ -143,88 +34,15 @@ export declare const getOpaqueColor: (color: TReqoreMultiTypeColor) => TReqoreHe
|
|
|
143
34
|
* ends at white or black, which always can.
|
|
144
35
|
*/
|
|
145
36
|
export declare const getReadableAccentColor: (color: TReqoreMultiTypeColor, background: TReqoreMultiTypeColor, minContrast?: number) => TReqoreHexColor;
|
|
146
|
-
/**
|
|
147
|
-
* `color` in the shade that stands out by `minContrast` from every one of `backgrounds` (see
|
|
148
|
-
* `getReadableAccentColor`): moved toward whichever of white and black stands out more from the worst of them, until
|
|
149
|
-
* it stands out from all of them - or is that white or black, when nothing does. Always a six-digit hex; a color it
|
|
150
|
-
* cannot read is as it is, and a background it cannot read is left out.
|
|
151
|
-
*/
|
|
152
|
-
export declare const getReadableAccentColorOn: (color: TReqoreMultiTypeColor, backgrounds: TReqoreMultiTypeColor[], minContrast?: number) => TReqoreHexColor;
|
|
153
|
-
/**
|
|
154
|
-
* How a control draws an icon on `backgrounds` (what it is drawn on: one color, or each it may be) beside its `text`:
|
|
155
|
-
* in its own `color` or else in the text color it inherits; at `opacity`, or as much more as it needs to stand out
|
|
156
|
-
* by 3:1. A theme's color (an intent, the theme's main, a shade of one) is drawn in the shade of it that stands
|
|
157
|
-
* out by 3:1; any other color (an explicit hex) as it is given, as a standalone `ReqoreIcon` draws it. `color` is
|
|
158
|
-
* undefined when the icon inherits the text color.
|
|
159
|
-
*/
|
|
160
|
-
export declare const getReadableIconLook: (theme: IReqoreTheme, backgrounds: TReqoreHexColor[], text: TReqoreMultiTypeColor, opacity?: number, color?: TReqoreEffectColor) => {
|
|
161
|
-
color?: TReqoreHexColor;
|
|
162
|
-
opacity: number;
|
|
163
|
-
};
|
|
164
|
-
/**
|
|
165
|
-
* What a component is drawn on: one color, or each color of a gradient it is drawn on (a panel's, a card's).
|
|
166
|
-
*/
|
|
167
|
-
export type TReqoreSurface = TReqoreHexColor | TReqoreHexColor[];
|
|
168
|
-
/**
|
|
169
|
-
* What a component is drawn on: `surface`, when a component around it has said (`useReqoreSurface`), or else the
|
|
170
|
-
* surface of the theme it was picked in - the layout's, the theme's main a step lighter (`getMainBackgroundColor`).
|
|
171
|
-
* One color: the first of a gradient's (`getThemeSurfaces` gives every one).
|
|
172
|
-
*/
|
|
173
|
-
export declare const getThemeSurface: (theme: IReqoreTheme, surface?: TReqoreSurface | TReqoreMultiTypeColor | string) => TReqoreHexColor;
|
|
174
|
-
/**
|
|
175
|
-
* Every color a component is drawn on (see `getThemeSurface`): each of a gradient's, or the one. A color that draws
|
|
176
|
-
* nothing (`'transparent'`) or that cannot be read (a CSS variable) is no surface to read on and is left out; with
|
|
177
|
-
* none left, the theme's.
|
|
178
|
-
*/
|
|
179
|
-
export declare const getThemeSurfaces: (theme: IReqoreTheme, surface?: TReqoreSurface | TReqoreMultiTypeColor | string) => TReqoreHexColor[];
|
|
180
|
-
/**
|
|
181
|
-
* Text (or an icon, at `minContrast` 3) in an intent's color on what it is drawn on (`surface`, or the theme's: see
|
|
182
|
-
* `getThemeSurface`): the intent in the shade that stands out there - a warning stays orange, an orange light enough
|
|
183
|
-
* to read on a dark theme. A translucent intent (muted) is drawn over that surface first.
|
|
184
|
-
*/
|
|
185
|
-
export declare const getReadableIntentColor: (theme: IReqoreTheme, intent: TReqoreIntent, minContrast?: number, surface?: TReqoreSurface | TReqoreMultiTypeColor | string) => TReqoreHexColor;
|
|
186
|
-
/**
|
|
187
|
-
* The color a span, a paragraph or a link writes its text in: an intent in a shade of it that reads on what the text
|
|
188
|
-
* is drawn on (`surface`, or the theme's), else the theme's text color, else what it inherits.
|
|
189
|
-
*/
|
|
190
|
-
export declare const getReadableTextColor: (theme: IReqoreTheme, intent?: TReqoreIntent, surface?: TReqoreSurface) => string;
|
|
191
|
-
/**
|
|
192
|
-
* A theme's color - an intent, the theme's main, a shade of one ('info', 'success:lighten:5') - in the shade of it
|
|
193
|
-
* that stands out by `minContrast` from what it is drawn on: `backgrounds` when they are known (a tag's fill, each
|
|
194
|
-
* color of a gradient), else `surface` or the theme's (`getThemeSurface`). The theme picks the hue, not how faint
|
|
195
|
-
* it is. Any other color is as it is given.
|
|
196
|
-
*/
|
|
197
|
-
export declare const getReadableThemeColor: (theme: IReqoreTheme, color: TReqoreEffectColor, minContrast?: number, surface?: TReqoreSurface | TReqoreMultiTypeColor | string, backgrounds?: TReqoreHexColor[]) => TReqoreHexColor;
|
|
198
|
-
/**
|
|
199
|
-
* Black or white for a background, by its value in the long form (a short hex, `#fff`, was read as the number
|
|
200
|
-
* `0xfff`: white text on white). Empty for no background; white for one it cannot read.
|
|
201
|
-
*/
|
|
202
37
|
export declare const getColorByBgColor: (bgColor: any) => "#000000" | "#ffffff" | "";
|
|
203
|
-
/** A hex color of 3, 4, 6 or 8 digits (the name is older than the rule): one CSS and the helpers read. */
|
|
204
38
|
export declare const isValidSixCharHex: (hex: string) => boolean;
|
|
205
39
|
export declare const buildTheme: (theme: IReqoreTheme) => IReqoreTheme;
|
|
206
40
|
export declare const mergeThemes: (element: string, theme: IReqoreTheme, customTheme: any) => IReqoreTheme;
|
|
207
41
|
export declare const getNotificationIntent: (theme: IReqoreTheme, intent?: TReqoreIntent) => `#${string}`;
|
|
208
42
|
export declare const getMainBackgroundColor: (theme: IReqoreTheme) => TReqoreHexColor;
|
|
209
|
-
/**
|
|
210
|
-
* The color `color` names: an intent, the theme's main (`main`, or nothing before the first colon), a hex (a short
|
|
211
|
-
* one with an alpha, `#f00a`, in its long form), or `transparent` (the theme's original main), lightened or
|
|
212
|
-
* darkened by a number of steps and drawn at an alpha (`info:lighten:2:0.5`). A color CSS draws but Reqore has no
|
|
213
|
-
* name for (`red`, `var(--brand)`, `currentColor`) is as it is given, and so is a color that cannot be lightened (an
|
|
214
|
-
* intent that is a CSS variable); a name nothing knows is undefined.
|
|
215
|
-
*/
|
|
216
43
|
export declare const getColorFromMaybeString: (theme: IReqoreTheme, color: TReqoreEffectColor) => TReqoreHexColor;
|
|
217
44
|
export declare const createEffectGradient: (theme: IReqoreTheme, colors: TReqoreEffectGradientColors, lighten?: number, minimal?: boolean, active?: boolean, transparent?: boolean) => string;
|
|
218
|
-
/**
|
|
219
|
-
* A gradient made from one color (`'info'`, `'#0776cb'`): see `buildGradientShades`. A color it cannot read (a CSS
|
|
220
|
-
* variable) is the gradient's both ends.
|
|
221
|
-
*/
|
|
222
45
|
export declare const buildGradientColorsFromString: (theme: IReqoreTheme, colorString: TReqoreEffectColor) => TReqoreEffectGradientColorsObject;
|
|
223
46
|
export declare const getNthGradientColor: (theme: IReqoreTheme, colors?: TReqoreEffectGradientColors, nth?: number) => TReqoreHexColor | undefined;
|
|
224
47
|
export declare const getGradientMix: (theme: IReqoreTheme, colors: TReqoreEffectGradientColors, fallback?: TReqoreHexColor) => TReqoreHexColor | undefined;
|
|
225
|
-
/**
|
|
226
|
-
* Each color a gradient is drawn in, as given (a translucent one stays translucent): what text on the gradient has
|
|
227
|
-
* to stand out from, every one of them.
|
|
228
|
-
*/
|
|
229
|
-
export declare const getGradientColorList: (theme: IReqoreTheme, colors?: TReqoreEffectGradientColors) => TReqoreHexColor[];
|
|
230
48
|
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/helpers/colors.ts"],"names":[],"mappings":"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"}
|