@apia/theme 3.0.18 → 3.0.21
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/{index-DOCkz85H.js → index-DGezuU-i.js} +245 -19
- package/dist/index-DGezuU-i.js.map +1 -0
- package/dist/index.d.ts +7 -5
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/{styles-CdKSTYgp.js → styles-CHGH27gK.js} +4 -3
- package/dist/{styles-CdKSTYgp.js.map → styles-CHGH27gK.js.map} +1 -1
- package/package.json +3 -3
- package/dist/index-DOCkz85H.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ResponsiveStyleValue, ThemeUICSSObject, Theme } from 'theme-ui';
|
|
2
2
|
export { Alert, AlertProps, AspectImage, AspectImageProps, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BaseStyles, Box, BoxOwnProps, BoxProps, Button, ButtonProps, CSSObject, CSSProperties, CSSPseudoSelectorProps, Card, CardProps, Checkbox, CheckboxProps, Close, CloseIcon, CloseProps, ColorMode, ColorModesScale, Container, ContainerProps, Divider, DividerProps, Donut, DonutProps, Embed, EmbedProps, Field, FieldOwnProps, FieldProps, Flex, FlexOwnProps, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, InitializeColorMode, Input, InputProps, Label, LabelProps, Link, LinkProps, MenuButton, MenuButtonProps, MenuIcon, Message, MessageProps, NavLink, NavLinkProps, Paragraph, ParagraphProps, Progress, ProgressProps, Radio, RadioProps, ResponsiveStyleValue, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, StylePropertyValue, Switch, SwitchProps, SxProp, TLengthStyledSystem, Text, TextProps, Textarea, TextareaProps, Theme, ThemeStyles, ThemeUICSSObject, ThemeUICSSProperties, ThemeUIContextValue, ThemeUIStyleObject, createElement, css, get, merge, useColorMode, useThemeUI } from 'theme-ui';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import React__default, { FC, ReactNode } from 'react';
|
|
3
5
|
export * from '@theme-ui/match-media';
|
|
4
6
|
import * as _theme_ui_css from '@theme-ui/css';
|
|
5
|
-
import * as react from 'react';
|
|
6
|
-
import { FC, ReactNode } from 'react';
|
|
7
7
|
import { StateInline, TagToken, StateBlock } from 'remarkable/lib';
|
|
8
8
|
import { Remarkable } from 'remarkable';
|
|
9
9
|
|
|
@@ -219,6 +219,8 @@ declare function parsePalette(palette: TCustomPalette): TParsedPalette;
|
|
|
219
219
|
|
|
220
220
|
type CustomTheme = Omit<Theme, 'palette'>;
|
|
221
221
|
|
|
222
|
+
declare const Form: (props: React__default.ClassAttributes<HTMLFormElement> & React__default.FormHTMLAttributes<HTMLFormElement>) => React__default.JSX.Element;
|
|
223
|
+
|
|
222
224
|
/**
|
|
223
225
|
* Este método está pensado para usarse únicamente dentro de applyStates, si se
|
|
224
226
|
* desea obtener un objeto con las propiedades correspondientes a un estado,
|
|
@@ -317,7 +319,7 @@ declare function useMainTheme(customTheme?: () => CustomTheme, customPalette?: T
|
|
|
317
319
|
* @param Component La definición del componente.
|
|
318
320
|
* @returns Un componente reutilizable y exportable que tiene estilos aplicados.
|
|
319
321
|
*/
|
|
320
|
-
declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) =>
|
|
322
|
+
declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) => React.JSX.Element) & {
|
|
321
323
|
displayName: string;
|
|
322
324
|
};
|
|
323
325
|
|
|
@@ -378,7 +380,7 @@ interface TThemeProvider {
|
|
|
378
380
|
customPalette?: () => TCustomPalette | undefined;
|
|
379
381
|
themeModifier?: TThemeModifier;
|
|
380
382
|
}
|
|
381
|
-
declare const ApiaThemeProvider: ({ children, customTheme, customPalette, themeModifier, }: TThemeProvider) =>
|
|
383
|
+
declare const ApiaThemeProvider: ({ children, customTheme, customPalette, themeModifier, }: TThemeProvider) => React.JSX.Element;
|
|
382
384
|
|
|
383
385
|
declare function getVariant(variant: string): {
|
|
384
386
|
variant: string;
|
|
@@ -586,5 +588,5 @@ declare module '@theme-ui/css' {
|
|
|
586
588
|
}
|
|
587
589
|
}
|
|
588
590
|
|
|
589
|
-
export { ApiaThemeProvider, type CustomTheme, type IMarkdownStylesAggregator, MarkdownBlock, MarkdownBuilder, MarkdownList, MarkdownParagraph, MarkdownTable, type MarkdownTableCell, type MarkdownTableObjectCell, MarkdownTableOfContents, type RemarkableExtension, type TColorDefinition, type TCustomPalette, type TPalette, type TParsedPalette, type TSpacingLayout, type TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parseMarkdown, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };
|
|
591
|
+
export { ApiaThemeProvider, type CustomTheme, Form, type IMarkdownStylesAggregator, MarkdownBlock, MarkdownBuilder, MarkdownList, MarkdownParagraph, MarkdownTable, type MarkdownTableCell, type MarkdownTableObjectCell, MarkdownTableOfContents, type RemarkableExtension, type TColorDefinition, type TCustomPalette, type TPalette, type TParsedPalette, type TSpacingLayout, type TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parseMarkdown, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };
|
|
590
592
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { A as ApiaThemeProvider, M as MarkdownBlock, t as MarkdownBuilder, w as MarkdownList, x as MarkdownParagraph, y as MarkdownTable, z as MarkdownTableOfContents, h as applyStatesGetColor, o as focusOutline, g as getColorState, a as getColorStates, b as getColorsAndStatesByDefinition, c as getColorsAndStatesByPath, d as getColorsByDefinition, e as getColorsByPath, f as getOneColorState, k as getSpacingLayouts, q as getVariant, j as injectStyles, i as makeStyledComponent, v as parseMarkdown, p as parsePalette, r as responsive, n as smallButton, l as spacing, s as spacingLayouts, u as useMainTheme } from './index-
|
|
1
|
+
export { A as ApiaThemeProvider, F as Form, M as MarkdownBlock, t as MarkdownBuilder, w as MarkdownList, x as MarkdownParagraph, y as MarkdownTable, z as MarkdownTableOfContents, h as applyStatesGetColor, o as focusOutline, g as getColorState, a as getColorStates, b as getColorsAndStatesByDefinition, c as getColorsAndStatesByPath, d as getColorsByDefinition, e as getColorsByPath, f as getOneColorState, k as getSpacingLayouts, q as getVariant, j as injectStyles, i as makeStyledComponent, v as parseMarkdown, p as parsePalette, r as responsive, n as smallButton, l as spacing, s as spacingLayouts, u as useMainTheme } from './index-DGezuU-i.js';
|
|
2
2
|
export * from '@theme-ui/match-media';
|
|
3
3
|
export { Alert, AspectImage, AspectRatio, Avatar, Badge, BaseStyles, Box, Button, Card, Checkbox, Close, CloseIcon, Container, Divider, Donut, Embed, Flex, Global, Grid, Heading, IconButton, Image, InitializeColorMode, Input, Label, Link, MenuButton, MenuIcon, Message, NavLink, Paragraph, Progress, Radio, Select, Slider, Spinner, Switch, Text, Textarea, createElement, css, get, merge, useColorMode, useThemeUI } from 'theme-ui';
|
|
4
4
|
import 'lodash-es/cloneDeep';
|
|
@@ -7,5 +7,6 @@ import 'lodash-es/merge';
|
|
|
7
7
|
import 'theme-ui/jsx-runtime';
|
|
8
8
|
import 'react';
|
|
9
9
|
import '@apia/util';
|
|
10
|
+
import '@emotion/react';
|
|
10
11
|
import '@apia/theme';
|
|
11
12
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { m as markdownExtensions } from './index-
|
|
1
|
+
import { m as markdownExtensions } from './index-DGezuU-i.js';
|
|
2
2
|
import 'lodash-es/cloneDeep';
|
|
3
3
|
import 'tinycolor2';
|
|
4
4
|
import 'lodash-es/merge';
|
|
5
|
-
import '@theme-ui/match-media';
|
|
6
5
|
import 'theme-ui/jsx-runtime';
|
|
7
6
|
import 'theme-ui';
|
|
7
|
+
import '@theme-ui/match-media';
|
|
8
8
|
import 'react';
|
|
9
9
|
import '@apia/util';
|
|
10
|
+
import '@emotion/react';
|
|
10
11
|
import '@apia/theme';
|
|
11
12
|
|
|
12
13
|
const markdownTheme = `:root {
|
|
@@ -205,4 +206,4 @@ const markdownParserStyles = (additionalStyles, extensions) => {
|
|
|
205
206
|
};
|
|
206
207
|
|
|
207
208
|
export { markdownParserStyles };
|
|
208
|
-
//# sourceMappingURL=styles-
|
|
209
|
+
//# sourceMappingURL=styles-CHGH27gK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles-
|
|
1
|
+
{"version":3,"file":"styles-CHGH27gK.js","sources":["../src/markdown/theme/markdownTheme.ts","../src/markdown/styles.ts"],"sourcesContent":["export const markdownTheme = `:root {\r\n --color-error-back: #fff2f4;\r\n --color-error-border: rgb(115, 7, 9);\r\n --color-error-text: var(--color-text-default);\r\n --color-warning-back: #fffdd9;\r\n --color-warning-border: rgb(244, 239, 64);\r\n --color-warning-text: var(--color-text-default);\r\n --color-success-back: #e7ffd9;\r\n --color-success-border: rgb(79, 205, 79);\r\n --color-success-text: var(--color-text-default);\r\n --color-primary: rgb(0, 73, 108);\r\n --color-primary-light: #f8fdff;\r\n --color-primary-contrast: white;\r\n --color-back-paper: white;\r\n --color-back-default: white;\r\n --color-border-field: #aaa;\r\n --color-border-section: #ddd;\r\n --color-text-default: #333;\r\n --color-text-disabled: #aaa;\r\n --color-text-heading: var(--color-primary);\r\n --font-size-h1: 32px;\r\n --font-size-h2: 28px;\r\n --font-size-h3: 25px;\r\n --font-size-h4: 21px;\r\n --font-size-h5: 18px;\r\n --font-size-h6: 16px;\r\n --font-size-default: 16px;\r\n --font-family-heading: Inter, system-ui, \"Segoe UI\", \"Helvetica Neue\", sans-serif, Roboto;\r\n --font-family-default: Inter, system-ui, \"Segoe UI\", \"Helvetica Neue\", sans-serif, Roboto;\r\n --font-family-monospace: monospace;\r\n --table-head-color-background: var(--color-primary);\r\n --table-head-color-text: var(--color-primary-contrast);\r\n --table-head-color-border: var(--color-primary);\r\n --table-head-border: 1px solid var(--table-head-color-border);\r\n --table-head-cell-padding: var(--space-4);\r\n --table-head-font-weight: bold;\r\n --table-head-text-align: center;\r\n --table-body-color-background: transparent;\r\n --table-body-color-background-odd: var(--color-primary-light);\r\n --table-body-color-text: inherit;\r\n --table-body-color-border: var(--color-border-section);\r\n --table-body-border: 1px solid var(--table-body-color-border);\r\n --table-body-cell-padding: var(--space-4);\r\n --table-color-background: var(--color-back-paper);\r\n --table-color-border: var(--color-border-section);\r\n --table-border: 1px solid var(--table-color-border);\r\n --table-border-collapse: collapse;\r\n --shadow-sheet: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;\r\n --space-0: 0;\r\n --space-1: 2px;\r\n --space-2: 4px;\r\n --space-3: 8px;\r\n --space-4: 12px;\r\n --space-5: 16px;\r\n --space-6: 24px;\r\n}\r\n\r\nhtml {\r\n margin: 0;\r\n font-size: var(--font-size-default);\r\n font-family: var(--font-family-default);\r\n color: var(--color-text-default);\r\n}\r\n\r\nbody {\r\n background: var(--color-back-default);\r\n margin: 0;\r\n}\r\n\r\npre, code {\r\n font-family: var(--font-family-monospace);\r\n}\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n font-family: var(--font-family-heading);\r\n color: var(--color-text-heading);\r\n}\r\n\r\nh1 {\r\n font-size: var(--font-size-h1);\r\n}\r\nh1:first-of-type {\r\n margin-top: 0;\r\n}\r\n\r\nh2 {\r\n font-size: var(--font-size-h2);\r\n}\r\n\r\nh3 {\r\n font-size: var(--font-size-h3);\r\n}\r\n\r\nh4 {\r\n font-size: var(--font-size-h4);\r\n}\r\n\r\nh5 {\r\n font-size: var(--font-size-h5);\r\n}\r\n\r\nh6 {\r\n font-size: var(--font-size-h6);\r\n}\r\n\r\na {\r\n color: var(--color-text-default);\r\n}\r\n\r\na:visited {\r\n color: var(--color-primary);\r\n}\r\n\r\ntable {\r\n border-collapse: var(--table-border-collapse);\r\n border: var(--table-border);\r\n width: 100%;\r\n table-layout: fixed;\r\n}\r\ntable * {\r\n word-break: break-word;\r\n}\r\ntable thead th, table thead td.heading, table tbody th, table tbody td.heading {\r\n background: var(--table-head-color-background);\r\n color: var(--table-head-color-text);\r\n border: var(--table-head-border);\r\n padding: var(--table-head-cell-padding);\r\n font-weight: var(--table-head-font-weight);\r\n text-align: var(--table-head-text-align);\r\n text-wrap: nowrap;\r\n}\r\ntable tbody td {\r\n background: var(--table-body-color-background);\r\n color: var(--table-body-color-text);\r\n border: var(--table-body-border);\r\n padding: var(--table-body-cell-padding);\r\n}\r\ntable tbody tr:nth-child(2n) td:not(.heading) {\r\n background: var(--table-body-color-background-odd);\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n}`;\r\n","import { IMarkdownStylesAggregator, RemarkableExtension } from './types';\r\nimport { markdownTheme } from './theme/markdownTheme';\r\nimport { markdownExtensions } from './extensions';\r\n\r\nconst printStyles: IMarkdownStylesAggregator = () => `\r\n@media print {\r\n body {\r\n background: white;\r\n }\r\n\r\n #Container {\r\n border: none;\r\n margin: 0;\r\n width: auto;\r\n padding: 0;\r\n }\r\n}\r\n`;\r\n\r\nconst styles = (\r\n additionalStyles?: IMarkdownStylesAggregator,\r\n extensions?: RemarkableExtension[],\r\n) => {\r\n const generated = `\r\n${markdownTheme}\r\n\r\n#Container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-6);\r\n margin: var(--space-6) auto;\r\n width: 920px;\r\n\r\n & > * {\r\n margin: 0;\r\n }\r\n\r\n h1, h2, h3, h4, h5, h6 {\r\n margin: 0;\r\n }\r\n\r\n li > *:not(:first-child) {\r\n margin-top: var(--space-5);\r\n margin-bottom: var(--space-5);\r\n }\r\n}\r\n${printStyles()}\r\n\r\n${[...(extensions ?? []), ...markdownExtensions]\r\n .map((current) => current.styles())\r\n .join('\\n\\n')}\r\n\r\n${additionalStyles?.() ?? ''}\r\n`;\r\n\r\n return generated;\r\n};\r\n\r\nexport const markdownParserStyles = (\r\n additionalStyles?: IMarkdownStylesAggregator,\r\n extensions?: RemarkableExtension[],\r\n) => {\r\n return styles(additionalStyles, extensions);\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;;;;AAAO,MAAM,aAAgB,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;;ACI7B,MAAM,cAAyC,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAerD,MAAM,MAAA,GAAS,CACb,gBAAA,EACA,UACG,KAAA;AACH,EAAA,MAAM,SAAY,GAAA,CAAA;AAAA,EAClB,aAAa,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBb,aAAa,CAAA;AAAA;AAAA,EAEb,CAAC,GAAI,UAAA,IAAc,EAAC,EAAI,GAAG,kBAAkB,CAAA,CAC5C,GAAI,CAAA,CAAC,YAAY,OAAQ,CAAA,MAAA,EAAQ,CACjC,CAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA;AAAA,EAEb,gBAAA,QAAwB,EAAE,CAAA;AAAA,CAAA,CAAA;AAG1B,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,oBAAA,GAAuB,CAClC,gBAAA,EACA,UACG,KAAA;AACH,EAAO,OAAA,MAAA,CAAO,kBAAkB,UAAU,CAAA,CAAA;AAC5C;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apia/theme",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.21",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "Alexis Leite <alexisleite@live.com>",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.ts,WATCH:true"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@apia/util": "^3.0.
|
|
31
|
+
"@apia/util": "^3.0.21",
|
|
32
32
|
"theme-ui": "^0.16.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public",
|
|
53
53
|
"registry": "https://registry.npmjs.org/"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "d853d8c0f93ef6bf8553d4ce19fe2867197789ec"
|
|
56
56
|
}
|