@fewbox/den-web 0.2.0-preview.42 → 0.2.0-preview.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.2.0-preview.42",
+  "version": "0.2.0-preview.43",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",

package/src/components/Engine/Base/index.d.ts

@@ -1,4 +1,4 @@
-import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType, FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, FullOpacityType, FullLetterSpacingType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType } from '..';
+import { DirectionType, FullColorType, PseudoType, FullFontSizeType, FontWeightType, FullBorderRadiusType, FullBorderStyleType, FullBorderWidthType, FullPaddingType, FullMarginType, FullOpacityType, FullLetterSpacingType, FullLineHeightType, FullDisplayType, FullVisibilityType, FullCursorType, FullOverflowType, FullOverflowXType, FullOverflowYType } from '..';
 import { Property } from 'csstype';
 export interface IViewProps {
     className?: string;
@@ -34,7 +34,7 @@ export interface IViewProps {
     maxHeight?: Property.Width;
     maxWidth?: Property.Width;
     letterSpacing?: FullLetterSpacingType;
-    lineHeight?: Property.LineHeight;
+    lineHeight?: FullLineHeightType;
     overflowX?: FullOverflowXType;
     overflowY?: FullOverflowYType;
     selfShrink?: Property.FlexShrink;

package/src/components/Engine/index.d.ts

@@ -69,8 +69,14 @@ export declare const FontFamilyType: {
 export type FontFamilyType = typeof FontFamilyType[keyof typeof FontFamilyType];
 export declare const LineHeightType: {
     readonly Default: "line-height";
+    readonly Normal: "line-height-normal";
+    readonly ExtraSmall: "line-height-extra-small";
+    readonly Small: "line-height-small";
+    readonly Large: "line-height-large";
+    readonly ExtraLarge: "line-height-extra-large";
 };
 export type LineHeightType = typeof LineHeightType[keyof typeof LineHeightType];
+export type FullLineHeightType = LineHeightType | Property.LineHeight;
 export declare const PaddingType: {
     readonly Default: "padding";
     readonly Normal: "padding-normal";
@@ -303,4 +309,4 @@ export declare const DirectionType: {
     readonly LeftRight: "left-right";
 };
 export type DirectionType = typeof DirectionType[keyof typeof DirectionType];
-export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: FullOpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType, letterSpacing?: FullLetterSpacingType) => string;
+export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: FullOpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType, letterSpacing?: FullLetterSpacingType, lineHeight?: FullLineHeightType) => string;

package/templates/style/_core.scss

@@ -308,6 +308,12 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         letter-spacing: var(#{v.$var-prefix}letter-spacing-#{$letter-spacing});
     }
 }
+/* line-height */
+@each $line-height, $value in v.$line-heights {
+    .line-height-#{$line-height} {
+        line-height: var(#{v.$var-prefix}line-height-#{$line-height});
+    }
+}
 /* padding */
 @each $padding, $value in v.$paddings {
     .padding-#{$padding} {

package/templates/style/_root-properties.scss

@@ -74,6 +74,9 @@
     #{v.$var-prefix}font-family: #{v.$font-family};
     #{v.$var-prefix}font-size: #{v.$font-size};
     #{v.$var-prefix}line-height: #{v.$line-height};
+    @each $line-height, $value in v.$line-heights {
+        #{v.$var-prefix}line-height-#{$line-height}: #{$value};
+    }
     #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
     @each $letter-spacing, $value in v.$letter-spacings {
         #{v.$var-prefix}letter-spacing-#{$letter-spacing}: #{$value};

package/templates/style/_variables.scss

@@ -251,6 +251,18 @@ $scrollbar-radius: 8px;
 /*       FONT       */
 /*------------------*/
 $line-height: 1.4;
+$line-height-normal: 1.3;
+$line-height-extra-small: 1.15;
+$line-height-small: 1.2;
+$line-height-large: 1.4;
+$line-height-extra-large: 1.45;
+$line-heights: (
+    "normal": $line-height-normal,
+    "extra-small": $line-height-extra-small,
+    "small": $line-height-small,
+    "large": $line-height-large,
+    "extra-large": $line-height-extra-large,
+);
 $letter-spacing: 0.01em;
 $letter-spacing-normal: 0.05em;
 $letter-spacing-extra-small: $letter-spacing-normal * 0.5;