chore: add global vars and mixins to fluent

telerik · Jul 4, 2022 · 2364732 · 2364732
1 parent 2909156
commit 2364732
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 1 deletion.
diff --git a/packages/fluent/scss/core/_variables.scss b/packages/fluent/scss/core/_variables.scss
@@ -12,12 +12,49 @@ $use-input-spinner-width: true !default;
 $use-input-spinner-icon-offset: false !default;
 $use-picker-select-width: true !default;
 
+$kendo-spacing: (
+    0: 0,
+    1: .25rem,
+    2: .5rem,
+    3: .75rem,
+    4: 1rem,
+    5: 1.25rem,
+    6: 1.5rem,
+    7: 1.75rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
+    xs: .25rem,
+    sm: .5rem,
+    md: .75rem,
+    lg: 1rem,
+    xl: 1.5rem,
+    thin: .125rem,
+    hair: .0625rem
+) !default;
 
 // Generic styles
 $kendo-font-size: 14px !default;
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
-$kendo-line-height: ( 20 / 14 ) !default;
+$kendo-line-height: calc( 20 / 14 ) !default;
+
 $kendo-font-weight: 400 !default;
+$kendo-font-weight-bold: 600 !default;
+
 $kendo-letter-spacing: null !default;
 
 $default-scrollbar-width: 17px !default;
@@ -26,6 +63,9 @@ $default-scrollbar-width: 17px !default;
     --kendo-font-size: #{$kendo-font-size};
     --kendo-font-family: #{$kendo-font-family};
     --kendo-line-height: #{$kendo-line-height};
+
     --kendo-font-weight: #{$kendo-font-weight};
+    --kendo-font-weight-bold: #{$kendo-font-weight-bold};
+
     --kendo-letter-spacing: #{$kendo-letter-spacing};
 }
diff --git a/packages/fluent/scss/core/color-system/_theme.scss b/packages/fluent/scss/core/color-system/_theme.scss
@@ -5,6 +5,8 @@
 $white: #ffffff;
 $black: #000000;
 
+$rgba-transparent: rgba( 0, 0, 0, 0 );
+
 // Root styles
 $kendo-body-bg: $white !default;
 $kendo-body-text: get-theme-color( neutral, 160 ) !default;

diff --git a/packages/fluent/scss/core/mixins/_border-radius.scss b/packages/fluent/scss/core/mixins/_border-radius.scss
@@ -0,0 +1,60 @@
+@use "../_variables.scss" as *;
+
+// Border radius
+@mixin border-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius;
+    }
+}
+
+@mixin border-top-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+    }
+}
+
+@mixin border-right-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+    }
+}
+
+@mixin border-bottom-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-bottom-right-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-left-radius( $radius: null ) {
+    @if $enable-rounded {
+        border-top-left-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-top-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius $radius 0 0;
+    }
+}
+
+@mixin border-right-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: 0 $radius $radius 0;
+    }
+}
+
+@mixin border-bottom-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: 0 0 $radius $radius;
+    }
+}
+
+@mixin border-left-radius-only( $radius: null ) {
+    @if $enable-rounded {
+        border-radius: $radius 0 0 $radius;
+    }
+}
diff --git a/packages/fluent/scss/core/mixins/_box-shadow.scss b/packages/fluent/scss/core/mixins/_box-shadow.scss
@@ -1,3 +1,5 @@
+@use "../_variables.scss" as *;
+
 @mixin box-shadow( $shadow... ) {
     @if $enable-shadows and nth($shadow, 1) {
         box-shadow: $shadow;

diff --git a/packages/fluent/scss/core/mixins/_decoration.scss b/packages/fluent/scss/core/mixins/_decoration.scss
@@ -1,3 +1,5 @@
+@use "../_variables.scss" as *;
+
 @mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
     @if $border {
         border-color: $border;
@@ -12,3 +14,14 @@
         @include linear-gradient( $gradient );
     }
 }
+
+@mixin linear-gradient( $gradient: null ) {
+    @if $gradient and $enable-gradients {
+        @if $gradient == none {
+            background-image: none;
+        }
+        @else {
+            background-image: linear-gradient( $gradient );
+        }
+    }
+}
diff --git a/packages/fluent/scss/core/mixins/_index.scss b/packages/fluent/scss/core/mixins/_index.scss
@@ -1,3 +1,4 @@
 @forward "decoration";
 @forward "box-shadow";
+@forward "border-radius";
 @forward "typography";