@react-md/core 6.0.2 → 6.1.0

package/dist/_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";
@@ -385,6 +387,10 @@ $_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;
   @include avatar.variables;
@@ -416,11 +422,9 @@ $_layer-order: (
   @include tabs.variables;
   @include text-field.variables;
   @include text-area.variables;
-  @include theme.theme-variables;
   @include tooltip.variables;
   @include transition.transition-variables;
   @include tree.variables;
-  @include typography.typography-variables;
   @include window-splitter.variables;
 }
 

package/dist/_border-radius.scss

@@ -0,0 +1,92 @@
+////
+/// @group core.border-radius
+////
+
+@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);
+  }
+}

package/dist/_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";

package/dist/_spacing.scss

@@ -0,0 +1,86 @@
+////
+/// @group core.spacing
+////
+
+@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);
+  }
+}

package/dist/app-bar/_app-bar.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../spacing";
 @use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
@@ -60,7 +61,7 @@ $disable-title: false !default;
 
 /// Sets the `gap` css property to apply spacing between each item.
 /// @type Number
-$gap: 0.25rem !default;
+$gap: spacing.get-var(xs) !default;
 
 /// The default height for an app bar.
 /// @type Number
@@ -142,11 +143,11 @@ $surface-color: theme.get-default-color(
 
 /// Horizontal padding for the app bar
 /// @type String|Number
-$horizontal-padding: 0.25rem !default;
+$horizontal-padding: spacing.get-var(xs) !default;
 
 /// Vertical padding for the app bar
 /// @type String|Number
-$vertical-padding: 0 !default;
+$vertical-padding: spacing.get-var(none) !default;
 
 /// This value is used to align the first element (normally a button) nicely with
 /// other elements on the page.
@@ -166,7 +167,7 @@ $title-keyline: 4.5rem !default;
 /// based on font-size now and `em`
 ///
 /// @type String|Number
-$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
+$nav-keyline: calc($title-keyline - $horizontal-padding - $gap - 3rem) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
@@ -253,7 +254,8 @@ $variables: (height, surface-background-color, surface-color);
 
       .rmd-app-bar {
         @include box.set-var(gap, $gap);
-        @include box.set-var(padding, $vertical-padding $horizontal-padding);
+        @include box.set-var(padding-v, $vertical-padding);
+        @include box.set-var(padding-h, $horizontal-padding);
         @include use-var(height);
 
         // since app bars can appear a lot in full page dialogs, setting these flex
@@ -348,8 +350,8 @@ $variables: (height, surface-background-color, surface-color);
 
       @if not $disable-title {
         .rmd-app-bar-title {
-          $title-h-margin: $keyline - $horizontal-padding;
-          $title-keyline-h-margin: $title-keyline - $horizontal-padding;
+          $title-h-margin: calc($keyline - $horizontal-padding);
+          $title-keyline-h-margin: calc($title-keyline - $horizontal-padding);
 
           flex: 1 1 auto;
           margin: 0 auto 0 $title-h-margin;

package/dist/app-bar/styles.js

@@ -47,7 +47,7 @@ const titleStyles = bem("rmd-app-bar-title");
  */ export function appBarTitle(options = {}) {
     const { className, keyline = "small" } = options;
     return cnb(titleStyles({
-        keyline: keyline == "list",
+        keyline: keyline === "list",
         "nav-keyline": keyline === "nav"
     }), className);
 }

package/dist/app-bar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    titleStyles({\n      keyline: keyline == \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}
+{"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    titleStyles({\n      keyline: keyline === \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,YAAY;QACrB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}

package/dist/avatar/_avatar.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../typography/typography";
 @use "../icon/icon";
@@ -53,7 +54,7 @@ $border-color: transparent !default;
 /// set this to something like 0.25rem.
 ///
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The default height and width
 /// @type Number
@@ -178,7 +179,6 @@ $variables: (
     @include set-var(background-color, $background-color);
     @include set-var(color, $color);
     @include set-var(border-color, $border-color);
-    @include set-var(border-radius, $border-radius);
     @include set-var(size, $size);
     @include set-var(font-size, $font-size);
   }
@@ -198,7 +198,7 @@ $variables: (
         }
         @include utils.map-to-styles(typography.$base-font-styles);
         @include use-var(background-color);
-        @include use-var(border-radius);
+        @include use-var(border-radius, $fallback: $border-radius);
         @include use-var(color);
         @include use-var(font-size);
         @include use-var(height, size);

package/dist/badge/_badge.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -60,7 +61,7 @@ $offset-right: $offset !default;
 
 /// The default border radius
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The default typography to use
 /// @type Map
@@ -110,6 +111,7 @@ $greyscale-color: theme.get-default-color(
 /// `get-var`, `set-var`, and `use-var` utils.
 /// @type List
 $variables: (
+  border-radius,
   greyscale-background-color,
   greyscale-color,
   size,
@@ -144,6 +146,12 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  @if not $fallback {
+    @if $name == border-radius {
+      $fallback: $border-radius;
+    }
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -207,12 +215,12 @@ $variables: (
     @include utils.optional-layer(badge, $disable-layer) {
       .rmd-badge {
         @include utils.map-to-styles($typography);
+        @include use-var(border-radius);
         @include use-var(height, size);
         @include use-var(width, size);
         @include use-var(top, offset-top, get-var(offset));
 
         align-items: center;
-        border-radius: $border-radius;
         display: inline-flex;
         justify-content: center;
         pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events

package/dist/box/_box.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../media-queries/media-queries";
 
 /// Set to `true` to disable all the styles
@@ -101,7 +102,7 @@ $justify-content: (
 
 /// The default flex and grid gap to apply between each item
 /// @type Number
-$gap: 1rem !default;
+$gap: spacing.get-var(md) !default;
 
 /// The default padding to apply to the container.
 /// @type Number
@@ -157,7 +158,11 @@ $_breakpoints: (
 /// @type List
 $variables: (
   gap,
+  column-gap,
+  row-gap,
   padding,
+  padding-v,
+  padding-h,
   item-min-size,
   item-min-height,
   columns,
@@ -182,6 +187,7 @@ $variables: (
 /// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "box");
+
   @if $fallback {
     @return var(#{$var}, #{$fallback});
   }
@@ -203,6 +209,72 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  // these variables define another fallback and are not set at the root so
+  // they can easily be overridden. if they have a default value at the root,
+  // that root value will be used instead of the lowest defined override.
+  //
+  // i.e.
+  // ```scss
+  //
+  // :root {
+  //   --rmd-box-padding: 3rem;
+  //   --rmd-box-padding-v: var(--rmd-box-padding);
+  //   --rmd-box-padding-h: var(--rmd-box-padding);
+  // }
+  //
+  // .some-child {
+  //   --rmd-box-padding: 1rem;
+  //
+  // }
+  // ```
+  //
+  // `--rmd-box-padding-v` and `--rmd-box-padding-h` would still have a value
+  // of `1rem`
+  @if not $fallback {
+    @if $name == padding-v or $name == padding-h {
+      $fallback: get-var(padding);
+    } @else if $name == column-gap or $name == row-gap {
+      $fallback: get-var(gap);
+    } @else if
+      $name ==
+      phone-columns or
+      $name ==
+      tablet-columns or
+      $name ==
+      desktop-columns or
+      $name ==
+      large-desktop-columns
+    {
+      $fallback: get-var(columns);
+    } @else if
+      $name ==
+      phone-item-min-height or
+      $name ==
+      tablet-item-min-height or
+      $name ==
+      desktop-item-min-height or
+      $name ==
+      large-desktop-item-min-height
+    {
+      $fallback: get-var(item-min-height);
+    } @else if
+      $name ==
+      phone-size or
+      $name ==
+      tablet-size or
+      $name ==
+      desktop-size or
+      $name ==
+      large-desktop-size
+    {
+      $fallback: get-var(size);
+    } @else if $name == gap {
+      $fallback: $gap;
+    } @else if $name == padding {
+      $fallback: $padding;
+    }
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -259,14 +331,8 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
-    @include set-var(gap, $gap);
-    @include set-var(padding, $padding);
     @include set-var(item-min-size, $item-min-size);
     @include set-var(columns, auto-fit);
-    @include set-var(phone-columns, auto-fit);
-    @include set-var(tablet-columns, auto-fit);
-    @include set-var(desktop-columns, auto-fit);
-    @include set-var(large-desktop-columns, auto-fit);
   }
 }
 
@@ -282,19 +348,20 @@ $variables: (
         display: flex;
 
         &--gap {
-          @include use-var(gap, gap);
+          @include use-var(gap);
         }
 
         &--gap-h {
-          @include use-var(column-gap, gap);
+          @include use-var(column-gap);
         }
 
         &--gap-v {
-          @include use-var(row-gap, gap);
+          @include use-var(row-gap);
         }
 
         &--padded {
-          @include use-var(padding);
+          padding: get-var(padding-v, get-var(padding, $padding))
+            get-var(padding-h, get-var(padding, $padding));
         }
 
         &--wrap {

package/dist/button/_button.scss

@@ -5,6 +5,8 @@
 @use "sass:list";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../theme/a11y";
 @use "../theme/theme";
 @use "../icon/icon";
@@ -69,15 +71,15 @@ $disable-unstyled-utility-class: false !default;
 
 /// The default border radius to apply to text buttons
 /// @type Number
-$text-border-radius: 0.5rem !default;
+$text-border-radius: border-radius.get-var(sm) !default;
 
 /// The default horizontal padding to apply to text buttons
 /// @type Number
-$text-horizontal-padding: 1rem !default;
+$text-horizontal-padding: spacing.get-var(md) !default;
 
 /// The default vertical padding to apply to text buttons
 /// @type Number
-$text-vertical-padding: 0 !default;
+$text-vertical-padding: spacing.get-var(none) !default;
 
 /// The default min-height to apply to text buttons
 /// @type Number
@@ -93,7 +95,7 @@ $text-icon-size: 1.125rem !default;
 
 /// The default border radius to apply to icon buttons
 /// @type Number
-$icon-border-radius: 50% !default;
+$icon-border-radius: border-radius.get-var(full) !default;
 
 /// The default border radius to apply to square icon buttons
 /// @type Number
@@ -151,7 +153,7 @@ $circular-progress-size: icon.get-var(size) !default;
 
 /// The default viewport margin for a floating action button
 /// @type Number
-$floating-margin: 1.5rem !default;
+$floating-margin: spacing.get-var(lg) !default;
 
 /// The default z-index for a floating action button
 /// @type Number
@@ -196,9 +198,12 @@ $variables: (
   text-vertical-padding,
   text-min-height,
   text-min-width,
+  text-border-radius,
   icon-size,
+  icon-padding,
   icon-font-size,
   icon-border-radius,
+  icon-square-border-radius,
   fab-offset
 );
 
@@ -277,8 +282,8 @@ $variables: (
 ///   }
 @mixin text-styles {
   @include icon.set-var(size, $text-icon-size);
-  @include set-var(border-radius, $text-border-radius);
   @include utils.map-to-styles(typography.$button-styles);
+  @include use-var(border-radius, text-border-radius, $text-border-radius);
   @include use-var(min-height, text-min-height);
   @include use-var(min-width, text-min-width);
 
@@ -308,7 +313,7 @@ $variables: (
     @if not $disable-icon {
       @include set-var(icon-size, $icon-size);
       @include set-var(icon-font-size, $icon-font-size);
-      @include set-var(icon-border-radius, $icon-border-radius);
+      @include set-var(icon-padding, $icon-padding);
     }
 
     @if not $disable-floating {
@@ -350,17 +355,22 @@ $variables: (
         @if not $disable-icon {
           &--icon {
             @include icon.set-var(size, 1em);
-            @include set-var(border-radius, get-var(icon-border-radius));
+            @include set-var(
+              border-radius,
+              get-var(icon-border-radius, $icon-border-radius)
+            );
             @include use-var(font-size, icon-font-size);
             @include use-var(height, icon-size);
             @include use-var(width, icon-size);
-
-            padding: $icon-padding;
+            @include use-var(padding, icon-padding);
           }
 
           @if not $disable-icon-square {
             &--icon-square {
-              @include set-var(icon-border-radius, $icon-square-border-radius);
+              @include set-var(
+                icon-border-radius,
+                get-var(icon-square-border-radius)
+              );
             }
           }