@lumx/core 2.1.0-alpha.1 → 2.1.0-alpha.7

package/package.json

@@ -42,7 +42,7 @@
         "prepublishOnly": "yarn build"
     },
     "sideEffects": false,
-    "version": "2.1.0-alpha.1",
+    "version": "2.1.0-alpha.7",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -79,5 +79,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "e44606424dcd9699ff2b7a1748b763dc88a4e7d3"
+    "gitHead": "c3a3dd3eea55b2e507bb6ce679d0bf7845451ad8"
 }

package/scss/_design-tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Sep 2021 07:20:36 GMT
+ * Generated on Tue, 14 Sep 2021 08:34:49 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -93,7 +93,7 @@ $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
 ) !default; // Base light color with 60% opacity
 $lumx-button-emphasis-medium-state-active-theme-dark-color: #fff !default; // Neutral light color
 $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-default-padding-horizontal: 16px !default;
+$lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
 $lumx-button-emphasis-low-state-default-border-width: 0 !default;
 $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
@@ -101,7 +101,7 @@ $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !d
 $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
 $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-hover-padding-horizontal: 16px !default;
+$lumx-button-emphasis-low-state-hover-padding-horizontal: 8px !default;
 $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
     0,
@@ -119,7 +119,7 @@ $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
 ) !default; // Base light color with 20% opacity
 $lumx-button-emphasis-low-state-hover-theme-dark-color: #fff !default; // Neutral light color
 $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-active-padding-horizontal: 16px !default;
+$lumx-button-emphasis-low-state-active-padding-horizontal: 8px !default;
 $lumx-button-emphasis-low-state-active-border-width: 0 !default;
 $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
     0,
@@ -177,6 +177,7 @@ $lumx-button-emphasis-selected-state-active-theme-dark-background-color: rgba(
 $lumx-button-emphasis-selected-state-active-theme-dark-color: #fff !default; // Neutral light color
 $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
 $lumx-material-button-text-transform: none !default;
+$lumx-material-button-variant-icon-border-radius: 50% !default;
 $lumx-material-checkbox-wrapper-size: 20px !default;
 $lumx-material-checkbox-control-size: 16px !default;
 $lumx-material-chip-size-m-height: 36px !default;
@@ -918,6 +919,10 @@ $lumx-typography-custom-quote-font-size: 16px !default;
 $lumx-typography-custom-quote-font-weight: 300 !default;
 $lumx-typography-custom-quote-font-style: italic !default;
 $lumx-typography-custom-quote-line-height: 24px !default;
+$lumx-typography-custom-publish-info-font-family: var(--lumx-typography-font-family) !default;
+$lumx-typography-custom-publish-info-font-size: 14px !default;
+$lumx-typography-custom-publish-info-font-weight: 400 !default;
+$lumx-typography-custom-publish-info-line-height: 20px !default;
 $lumx-typography-custom-button-size-m-font-family: var(--lumx-typography-font-family) !default;
 $lumx-typography-custom-button-size-m-font-size: 14px !default;
 $lumx-typography-custom-button-size-m-font-weight: 700 !default;
@@ -1133,7 +1138,7 @@ $lumx-design-tokens: (
     'material': (
         'button': (
             'text-transform': $lumx-material-button-text-transform,
-            'variant-icon-border-radius': (),
+            'variant-icon-border-radius': $lumx-material-button-variant-icon-border-radius,
         ),
         'checkbox': (
             'wrapper-size': $lumx-material-checkbox-wrapper-size,
@@ -2018,6 +2023,12 @@ $lumx-design-tokens: (
                 'font-style': $lumx-typography-custom-quote-font-style,
                 'line-height': $lumx-typography-custom-quote-line-height,
             ),
+            'publish-info': (
+                'font-family': $lumx-typography-custom-publish-info-font-family,
+                'font-size': $lumx-typography-custom-publish-info-font-size,
+                'font-weight': $lumx-typography-custom-publish-info-font-weight,
+                'line-height': $lumx-typography-custom-publish-info-line-height,
+            ),
             'button': (
                 'size-m': (
                     'font-family': $lumx-typography-custom-button-size-m-font-family,

package/scss/components/button/_mixins.scss

@@ -61,17 +61,21 @@
         }
     }
 
-    @if $size == lumx-base-const('size', 'M') {
-        padding: 0 var(--lumx-button-#{$emphasis}-state-default-padding-horizontal);
-    } @else if $size == lumx-base-const('size', 'S') {
-        padding: 0 calc(var(--lumx-button-#{$emphasis}-state-default-padding-horizontal) / 1.5);
+    @if $variant == 'button' {
+        @if $size == lumx-base-const('size', 'M') {
+            padding: 0 var(--lumx-button-#{$emphasis}-state-default-padding-horizontal);
+        } @else if $size == lumx-base-const('size', 'S') {
+            padding: 0 calc(var(--lumx-button-#{$emphasis}-state-default-padding-horizontal) / 1.5);
+        }
     }
 
     &:hover {
-        @if $size == lumx-base-const('size', 'M') {
-            padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal);
-        } @else if $size == lumx-base-const('size', 'S') {
-            padding: 0 calc(var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal) / 1.5);
+        @if $variant == 'button' {
+            @if $size == lumx-base-const('size', 'M') {
+                padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal);
+            } @else if $size == lumx-base-const('size', 'S') {
+                padding: 0 calc(var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal) / 1.5);
+            }
         }
 
         &::before {
@@ -80,10 +84,12 @@
     }
 
     &:active {
-        @if $size == lumx-base-const('size', 'M') {
-            padding: 0 var(--lumx-button-#{$emphasis}-state-active-padding-horizontal);
-        } @else if $size == lumx-base-const('size', 'S') {
-            padding: 0 calc(var(--lumx-button-#{$emphasis}-state-active-padding-horizontal) / 1.5);
+        @if $variant == 'button' {
+            @if $size == lumx-base-const('size', 'M') {
+                padding: 0 var(--lumx-button-#{$emphasis}-state-active-padding-horizontal);
+            } @else if $size == lumx-base-const('size', 'S') {
+                padding: 0 calc(var(--lumx-button-#{$emphasis}-state-active-padding-horizontal) / 1.5);
+            }
         }
 
         &::before {

package/scss/components/tabs/_index.scss

@@ -7,11 +7,11 @@
 
     &__links {
         #{$self}--theme-light & {
-            @include lumx-tabs-links(lumx-base-const('theme', 'LIGHT'));
+            @include lumx-tabs-links;
         }
 
         #{$self}--theme-dark & {
-            @include lumx-tabs-links(lumx-base-const('theme', 'DARK'));
+            @include lumx-tabs-links;
         }
     }
 

package/scss/components/tabs/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin lumx-tabs-links($theme) {
+@mixin lumx-tabs-links() {
     position: relative;
     display: flex;
 }

package/scss/core/typography/_mixins.scss

@@ -6,11 +6,11 @@
 
 @mixin lumx-typography($key, $type: 'interface') {
     @if $type == 'custom' {
-        font-family: var(--lumx-typography-style-custom-font-family);
-        font-size: var(--lumx-typography-style-custom-font-size);
-        font-style: var(--lumx-typography-style-custom-font-style);
-        font-weight: var(--lumx-typography-style-custom-font-weight);
-        line-height: var(--lumx-typography-style-custom-line-height);
+        font-family: var(--lumx-typography-custom-#{$key}-font-family, var(--lumx-typography-font-family));
+        font-size: var(--lumx-typography-custom-#{$key}-font-size);
+        font-style: var(--lumx-typography-custom-#{$key}-font-style);
+        font-weight: var(--lumx-typography-custom-#{$key}-font-weight);
+        line-height: var(--lumx-typography-custom-#{$key}-line-height);
     } @else if $type == 'interface' {
         font-size: map-get(map-get($lumx-typography-interface, $key), 'font-size');
         font-weight: map-get(map-get($lumx-typography-interface, $key), 'font-weight');