@preply/ds-web-core 0.32.0 → 0.34.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.
@@ -0,0 +1 @@
1
+ export declare const useColorClassName: (color?: "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | undefined, useCurrentColor?: boolean | undefined) => string[];
@@ -0,0 +1,13 @@
1
+ import { useStyleExtract } from '../../ssr/hooks/useStyleExtract.js';
2
+ import styles from '../style/index.module.less.js';
3
+ import { moduleLocals, stringClassNames } from '../../css-module/classNames.js';
4
+
5
+ const COLOR = 'Color';
6
+ const useColorClassName = (color, useCurrentColor) => {
7
+ useStyleExtract(styles);
8
+ const baseClassName = useCurrentColor ? 'current-color' : 'default-color';
9
+ return moduleLocals(styles, COLOR, [baseClassName, stringClassNames('color', color)]);
10
+ };
11
+
12
+ export { useColorClassName };
13
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ29sb3JDbGFzc05hbWUuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb2xvci9ob29rcy91c2VDb2xvckNsYXNzTmFtZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb2xvck5hbWUgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuXG5pbXBvcnQgeyBtb2R1bGVMb2NhbHMsIHN0cmluZ0NsYXNzTmFtZXMgfSBmcm9tICcuLi8uLi9jc3MtbW9kdWxlJztcbmltcG9ydCB7IHVzZVN0eWxlRXh0cmFjdCB9IGZyb20gJy4uLy4uL3Nzci9ob29rcy91c2VTdHlsZUV4dHJhY3QnO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuLi9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmNvbnN0IENPTE9SID0gJ0NvbG9yJztcblxuZXhwb3J0IGNvbnN0IHVzZUNvbG9yQ2xhc3NOYW1lID0gKGNvbG9yPzogQ29sb3JOYW1lLCB1c2VDdXJyZW50Q29sb3I/OiBib29sZWFuKTogc3RyaW5nW10gPT4ge1xuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgY29uc3QgYmFzZUNsYXNzTmFtZSA9IHVzZUN1cnJlbnRDb2xvciA/ICdjdXJyZW50LWNvbG9yJyA6ICdkZWZhdWx0LWNvbG9yJztcblxuICAgIHJldHVybiBtb2R1bGVMb2NhbHMoc3R5bGVzLCBDT0xPUiwgW2Jhc2VDbGFzc05hbWUsIHN0cmluZ0NsYXNzTmFtZXMoJ2NvbG9yJywgY29sb3IpXSk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFNQSxNQUFNLEtBQUssR0FBRyxPQUFPLENBQUM7TUFFVCxpQkFBaUIsR0FBRyxDQUFDLEtBQWlCLEVBQUUsZUFBeUI7SUFDMUUsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sYUFBYSxHQUFHLGVBQWUsR0FBRyxlQUFlLEdBQUcsZUFBZSxDQUFDO0lBRTFFLE9BQU8sWUFBWSxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxhQUFhLEVBQUUsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUMxRjs7OzsifQ==
@@ -0,0 +1 @@
1
+ export { useColorClassName } from './hooks/useColorClassName';
@@ -0,0 +1,2 @@
1
+ export { useColorClassName } from './hooks/useColorClassName.js';
2
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=
@@ -0,0 +1,8 @@
1
+ @import './mixins.less';
2
+
3
+ .Color {
4
+ // ORDER MATTERS: default color and current color must come before color class names
5
+ .default-color();
6
+ .current-color();
7
+ .colors();
8
+ }
@@ -0,0 +1,9 @@
1
+ import styleInject from '../../external/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".lEFktc{color:var(--aface)}._3XvUmr{color:currentColor}._3jaBF2{color:var(--55407)}._15POOe{color:var(--8f123)}._9iB_fE{color:var(--da403)}._3cTGmd{color:var(--7c8c3)}._3Vbsxc{color:var(--c9575)}._2nhtDY{color:var(--2fb6f)}.hM7GWH{color:var(--54ed1)}._1ycQRs{color:var(--b706b)}._2RpEHh{color:var(--4adef)}._2cKNUr{color:var(--de8a4)}._1YgFY6{color:var(--57454)}._11inLa{color:var(--1383a)}._2b_sKe{color:var(--9f106)}._3oYRQ8{color:var(--d4cf9)}._2twNrF{color:var(--bbfa9)}._3klYId{color:var(--5f8b3)}._5nBiTO{color:var(--c7d8b)}._3MDji-{color:var(--17bab)}.zc40BT{color:var(--f017e)}._13RZ7d{color:var(--2242e)}._3K8oin{color:var(--e40de)}.MqgUpa{color:var(--ecb5d)}._3MJiYd{color:var(--5b5cb)}._1MTXWb{color:var(--d55c7)}._14M98o{color:var(--4e47f)}._2cafi9{color:var(--3e787)}._2RfMzV{color:var(--21906)}.aGG8c0{color:var(--5d87f)}._2rnC0H{color:var(--201e1)}._302tq6{color:var(--e1c27)}._21dTGC{color:var(--6a142)}._1zv0gj{color:var(--1a996)}._2gi6N-{color:var(--b774d)}.Sk7h_A{color:var(--f72cd)}.O0yTGq{color:var(--6cbd8)}._1p6nDo{color:var(--5893e)}";
4
+ var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/color/style/index.module.less",__css:css_248z,"Color--default-color":"lEFktc","Color--current-color":"_3XvUmr","Color--color-gray-100":"_3jaBF2","Color--color-gray-200":"_15POOe","Color--color-gray-300":"_9iB_fE","Color--color-gray-400":"_3cTGmd","Color--color-gray-500":"_3Vbsxc","Color--color-gray-600":"_2nhtDY","Color--color-teal-100":"hM7GWH","Color--color-teal-200":"_1ycQRs","Color--color-teal-300":"_2RpEHh","Color--color-teal-400":"_2cKNUr","Color--color-teal-500":"_1YgFY6","Color--color-green-100":"_11inLa","Color--color-green-200":"_2b_sKe","Color--color-green-300":"_3oYRQ8","Color--color-green-400":"_2twNrF","Color--color-green-500":"_3klYId","Color--color-yellow-100":"_5nBiTO","Color--color-yellow-200":"_3MDji-","Color--color-yellow-300":"zc40BT","Color--color-yellow-400":"_13RZ7d","Color--color-yellow-500":"_3K8oin","Color--color-red-100":"MqgUpa","Color--color-red-200":"_3MJiYd","Color--color-red-300":"_1MTXWb","Color--color-red-400":"_14M98o","Color--color-red-500":"_2cafi9","Color--color-blue-100":"_2RfMzV","Color--color-blue-200":"aGG8c0","Color--color-blue-300":"_2rnC0H","Color--color-blue-400":"_302tq6","Color--color-blue-500":"_21dTGC","Color--color-magenta-100":"_1zv0gj","Color--color-magenta-200":"_2gi6N-","Color--color-magenta-300":"Sk7h_A","Color--color-magenta-400":"O0yTGq","Color--color-magenta-500":"_1p6nDo"};
5
+ var stylesheet=css_248z;
6
+ styleInject(css_248z);
7
+
8
+ export { styles as default, stylesheet };
9
+
@@ -0,0 +1,23 @@
1
+ @import '../../generated/tokens.less';
2
+ @import '../../generated/options.less';
3
+
4
+ .default-color() {
5
+ &--default-color {
6
+ color: @scheme-color;
7
+ }
8
+ }
9
+
10
+ .current-color() {
11
+ &--current-color {
12
+ color: currentColor;
13
+ }
14
+ }
15
+
16
+ .colors() {
17
+ each(@COLOR_NAME_OPTIONS, {
18
+ &--color-@{value} {
19
+ @token-name: 'root-palette-@{value}';
20
+ color: @@token-name;
21
+ }
22
+ });
23
+ }
@@ -0,0 +1,8 @@
1
+ import styleInject from '../../external/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = "";
4
+ var stylesheet="";
5
+ styleInject(css_248z);
6
+
7
+ export { css_248z as default, stylesheet };
8
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3QixxREFBeUQ7QUFDakY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu Jun 23 2022 14:49:17 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Jul 12 2022 15:24:22 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @breakpoints: {
4
4
  narrow-l: 400px;
@@ -1,8 +1,13 @@
1
- /* AUTO GENERATED @Thu Jun 23 2022 14:49:17 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Jul 12 2022 15:24:21 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
4
4
  @BUTTON_SIZE_OPTIONS: xs, s, m, l, xl;
5
5
  @BUTTON_VARIANT_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous;
6
+ @COLOR_NAME_OPTIONS: gray-100, gray-200, gray-300, gray-400, gray-500, gray-600, teal-100, teal-200,
7
+ teal-300, teal-400, teal-500, green-100, green-200, green-300, green-400, green-500, yellow-100,
8
+ yellow-200, yellow-300, yellow-400, yellow-500, red-100, red-200, red-300, red-400, red-500,
9
+ blue-100, blue-200, blue-300, blue-400, blue-500, magenta-100, magenta-200, magenta-300,
10
+ magenta-400, magenta-500;
6
11
  @COLOR_SCHEME_OPTIONS: base, banner, invert;
7
12
  @HEADING_LEVEL_OPTIONS: h1, h2, h3, h4, h5;
8
13
  @HEADING_TAG_OPTIONS: h1, h2, h3, h4, h5, p, div;
@@ -24,4 +29,4 @@
24
29
  @TEXT_VARIANT_OPTIONS: xs, s, s-italic, s-medium, s-medium-italic, s-bold, s-bold-italic, m,
25
30
  m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, l, l-italic, l-medium,
26
31
  l-medium-italic, xl, xl-italic, xl-medium, xl-medium-italic;
27
- @THEME_OPTIONS: cluck-ui, base-ui, preply-ui;
32
+ @THEME_OPTIONS: bold-ui, cluck-ui, base-ui, preply-ui;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu Jun 23 2022 14:49:17 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Jul 12 2022 15:24:21 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @scheme-color: var(--aface);
4
4
  @scheme-bgColor: var(--786b9);
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { VERSION } from './version';
2
+ export * from './color';
2
3
  export * from './color-scheme';
3
4
  export * from './css-module';
4
5
  export * from './dom/props';
@@ -11,3 +12,4 @@ export * from './ssr';
11
12
  export * from './theme';
12
13
  export * from './token';
13
14
  export * from './types';
15
+ export * from './typography';
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@ export { VERSION } from './version.js';
2
2
  export { getDatasetProps, getExternalUrlProps } from './dom/props/index.js';
3
3
  export { mapEdgeKeyToStandard } from './keyboard/index.js';
4
4
  export { currentHostname, currentHref } from './location/index.js';
5
+ export { useColorClassName } from './color/hooks/useColorClassName.js';
5
6
  export { colorSchemes } from './color-scheme/colorSchemes.js';
6
7
  export { ColorScheme } from './color-scheme/classes/ColorScheme.js';
7
8
  export { ColorSchemeProvider } from './color-scheme/providers/ColorSchemeProvider.js';
@@ -33,4 +34,5 @@ export { withTheme } from './theme/hocs/withTheme.js';
33
34
  export { getTokenVar } from './token/util/getTokenVar.js';
34
35
  export { useToken } from './token/hooks/useToken.js';
35
36
  export { withGetToken } from './token/hocs/withGetToken.js';
36
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
37
+ export { useTextCenteredClassname } from './typography/hooks/useTextCenteredClassname.js';
38
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
@@ -0,0 +1,3 @@
1
+ export declare const useTextCenteredClassname: (centered?: boolean | ({
2
+ _: boolean;
3
+ } & Partial<Record<import("@preply/ds-core").Breakpoint, boolean>>) | undefined) => string[];
@@ -0,0 +1,14 @@
1
+ import { useStyleExtract } from '../../ssr/hooks/useStyleExtract.js';
2
+ import styles from '../style/text-centered.module.less.js';
3
+ import { moduleLocals, booleanClassNames } from '../../css-module/classNames.js';
4
+
5
+ const TEXT_CENTERED = 'TextCentered';
6
+ const useTextCenteredClassname = (centered) => {
7
+ useStyleExtract(styles);
8
+ return moduleLocals(styles, TEXT_CENTERED, [
9
+ booleanClassNames('centered', 'initial', centered),
10
+ ]);
11
+ };
12
+
13
+ export { useTextCenteredClassname };
14
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGV4dENlbnRlcmVkQ2xhc3NuYW1lLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdHlwb2dyYXBoeS9ob29rcy91c2VUZXh0Q2VudGVyZWRDbGFzc25hbWUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVzcG9uc2l2ZSB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5cbmltcG9ydCB7IGJvb2xlYW5DbGFzc05hbWVzLCBtb2R1bGVMb2NhbHMgfSBmcm9tICcuLi8uLi9jc3MtbW9kdWxlJztcbmltcG9ydCB7IHVzZVN0eWxlRXh0cmFjdCB9IGZyb20gJy4uLy4uL3Nzci9ob29rcy91c2VTdHlsZUV4dHJhY3QnO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuLi9zdHlsZS90ZXh0LWNlbnRlcmVkLm1vZHVsZS5sZXNzJztcblxuY29uc3QgVEVYVF9DRU5URVJFRCA9ICdUZXh0Q2VudGVyZWQnO1xuXG5leHBvcnQgY29uc3QgdXNlVGV4dENlbnRlcmVkQ2xhc3NuYW1lID0gKGNlbnRlcmVkPzogUmVzcG9uc2l2ZTxib29sZWFuPik6IHN0cmluZ1tdID0+IHtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIHJldHVybiBtb2R1bGVMb2NhbHMoc3R5bGVzLCBURVhUX0NFTlRFUkVELCBbXG4gICAgICAgIGJvb2xlYW5DbGFzc05hbWVzKCdjZW50ZXJlZCcsICdpbml0aWFsJywgY2VudGVyZWQpLFxuICAgIF0pO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBTUEsTUFBTSxhQUFhLEdBQUcsY0FBYyxDQUFDO01BRXhCLHdCQUF3QixHQUFHLENBQUMsUUFBOEI7SUFDbkUsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE9BQU8sWUFBWSxDQUFDLE1BQU0sRUFBRSxhQUFhLEVBQUU7UUFDdkMsaUJBQWlCLENBQUMsVUFBVSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUM7S0FDckQsQ0FBQyxDQUFDO0FBQ1A7Ozs7In0=
@@ -0,0 +1 @@
1
+ export { useTextCenteredClassname } from './hooks/useTextCenteredClassname';
@@ -0,0 +1,2 @@
1
+ export { useTextCenteredClassname } from './hooks/useTextCenteredClassname.js';
2
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=
@@ -7,11 +7,14 @@
7
7
  font-family: @root-text-base-fontFamily;
8
8
  font-size: @root-text-base-fontSize;
9
9
  line-height: @root-text-base-lineHeight;
10
- color: @scheme-color;
11
10
  -webkit-font-smoothing: antialiased;
12
11
  text-rendering: optimizeLegibility;
13
12
  }
14
13
 
14
+ .type-base-default-color() {
15
+ color: @scheme-color;
16
+ }
17
+
15
18
  .text-accents() {
16
19
  each(@TEXT_ACCENT_OPTIONS, {
17
20
  &--accent-@{value} {
@@ -0,0 +1,13 @@
1
+ @import '../../responsive/style/mixins.less';
2
+
3
+ .TextCentered {
4
+ .responsive({
5
+ &--centered {
6
+ text-align: center;
7
+ }
8
+
9
+ &--initial {
10
+ text-align: initial;
11
+ }
12
+ });
13
+ }
@@ -0,0 +1,9 @@
1
+ import styleInject from '../../external/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = "._2bFcIs{text-align:center}.EEteH4{text-align:left;text-align:initial}@media (min-width:400px){._3I3B1y{text-align:center}._3n1toT{text-align:left;text-align:initial}}@media (min-width:700px){._2vwyEr{text-align:center}._31LAh2{text-align:left;text-align:initial}}@media (min-width:880px){._1EzRsH{text-align:center}.y3RbFr{text-align:left;text-align:initial}}@media (min-width:1200px){._3Dwb-o{text-align:center}._3tuT_b{text-align:left;text-align:initial}}@media (min-width:1900px){._1-1vcj{text-align:center}._1zyLeO{text-align:left;text-align:initial}}";
4
+ var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/typography/style/text-centered.module.less",__css:css_248z,"TextCentered--centered":"_2bFcIs","TextCentered--initial":"EEteH4","TextCentered--narrow-l--centered":"_3I3B1y","TextCentered--narrow-l--initial":"_3n1toT","TextCentered--medium-s--centered":"_2vwyEr","TextCentered--medium-s--initial":"_31LAh2","TextCentered--medium-l--centered":"_1EzRsH","TextCentered--medium-l--initial":"y3RbFr","TextCentered--wide-s--centered":"_3Dwb-o","TextCentered--wide-s--initial":"_3tuT_b","TextCentered--wide-l--centered":"_1-1vcj","TextCentered--wide-l--initial":"_1zyLeO"};
5
+ var stylesheet=css_248z;
6
+ styleInject(css_248z);
7
+
8
+ export { styles as default, stylesheet };
9
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preply/ds-web-core",
3
- "version": "0.32.0",
3
+ "version": "0.34.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,14 +19,14 @@
19
19
  "dev": "run build:rollup -w"
20
20
  },
21
21
  "dependencies": {
22
- "@preply/ds-core": "0.32.0",
23
- "@preply/ds-core-types": "0.32.0"
22
+ "@preply/ds-core": "0.34.0",
23
+ "@preply/ds-core-types": "0.34.0"
24
24
  },
25
25
  "peerDependencies": {
26
- "@preply/ds-core": "0.32.0",
27
- "@preply/ds-core-types": "0.32.0",
26
+ "@preply/ds-core": "0.34.0",
27
+ "@preply/ds-core-types": "0.34.0",
28
28
  "react": "^16.8.3",
29
29
  "react-dom": "^16.8.3"
30
30
  },
31
- "gitHead": "639bc1a029e41a60ab326299e1518eb1cdca35f7"
31
+ "gitHead": "ae730381db654b0feab5693e2c4e2d99ea1cd7c9"
32
32
  }