feat(core): add border-radius and spacing vars

Author: mlaursen

packages/core/src/_base.scss

@@ -28,6 +28,8 @@
 @use "chip/chip";
 @use "table/table";
 @use "theme/theme";
+@use "border-radius";
+@use "spacing";
 @use "dialog/dialog";
 @use "sheet/sheet";
 @use "transition/transition";
@@ -386,6 +388,8 @@ $_layer-order: (
 ///
 @mixin variables {
   @include theme.theme-variables;
+  @include border-radius.variables;
+  @include spacing.variables;
   @include typography.typography-variables;
   @include app-bar.variables;
   @include autocomplete.variables;

packages/core/src/_border-radius.scss

@@ -0,0 +1,88 @@
+@use "utils";
+
+/// Set to `true` to disable the border radius variables. You probably don't
+/// want to do this.
+/// @type Boolean
+$disable-everything: false !default;
+
+/// No Border Radius.
+///
+/// @type Number
+$none: 0 !default;
+
+/// Extra Small Border Radius.
+///
+/// @type Number
+$xs: 0.25rem !default;
+
+/// Small Border Radius.
+///
+/// @type Number
+$sm: 0.5rem !default;
+
+/// Medium Border Radius.
+///
+/// @type Number
+$md: 0.75rem !default;
+
+/// Large Border Radius.
+///
+/// @type Number
+$lg: 1rem !default;
+
+/// Extra Large Border Radius.
+///
+/// @type Number
+$xl: 1.75rem !default;
+
+/// Full Border Radius.
+///
+/// @type Number
+$full: 50% !default;
+
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
+$variables: (none, xs, sm, md, lg, xl, full);
+
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "border-radius");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+
+  @return var(#{$var});
+}
+
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "border-radius")}: #{$value};
+  }
+}
+
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+/// Conditionally applies the css variables based on feature flags
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(none, $none);
+    @include set-var(xs, $xs);
+    @include set-var(sm, $sm);
+    @include set-var(md, $md);
+    @include set-var(lg, $lg);
+    @include set-var(xl, $xl);
+    @include set-var(full, $full);
+  }
+}

packages/core/src/_core.scss

@@ -8,6 +8,8 @@
 @forward "theme/a11y";
 @forward "theme/colors";
 @forward "theme/theme";
+@forward "border-radius" as border-radius-*;
+@forward "spacing" as spacing-*;
 @forward "typography/typography";
 @forward "transition/transition";
 @forward "box-shadows";

packages/core/src/_spacing.scss

@@ -0,0 +1,82 @@
+@use "utils";
+
+/// Set to `true` to disable all the spacing variables. You probably don't want
+/// to do this.
+/// @type Boolean
+$disable-everything: false !default;
+
+/// No spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$none: 0 !default;
+
+/// Extra Small Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$xs: 0.25rem !default;
+
+/// Small Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$sm: 0.5rem !default;
+
+/// Medium Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$md: 1rem !default;
+
+/// Large Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$lg: 1.5rem !default;
+
+/// Extra Large Spacing. Generally applied as `gap`, `padding`, or `margin`.
+///
+/// @type Number
+$xl: 2rem !default;
+
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
+$variables: (none, xs, sm, md, lg, xl);
+
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "spacing");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+
+  @return var(#{$var});
+}
+
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "spacing")}: #{$value};
+  }
+}
+
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+/// Conditionally applies the css variables based on feature flags
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(none, $none);
+    @include set-var(xs, $xs);
+    @include set-var(sm, $sm);
+    @include set-var(md, $md);
+    @include set-var(lg, $lg);
+    @include set-var(xl, $xl);
+  }
+}