@matteusan/himig 1.0.0

package/ms-button/_button-styles.scss

@@ -0,0 +1,210 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@use '../ms-core';
+@use 'sass:list';
+@use 'button-base' as base;
+@use 'button-theme' as theme;
+@use 'button-mixins' as style;
+
+$_states: (
+  'success',
+  'warning',
+  'error'
+);
+
+@mixin render(
+  $color: (),
+  $struct: (),
+  $typography: (),
+  $settings: ()
+) {
+  $color: ms-core.theme-merge(theme.$init-color, $color);
+  $struct: ms-core.theme-merge(theme.$init-struct, $struct);
+  $typography: ms-core.theme-merge(theme.$init-typography, $typography);
+  $settings: ms-core.theme-merge(theme.$init-settings, $settings);
+
+  $fills: (
+    default: ms-core.theme-get($color, 'fill'),
+    hover: ms-core.theme-get($color, 'fill', 'hover'),
+    focus: ms-core.theme-get($color, 'fill', 'focus'),
+    active: ms-core.theme-get($color, 'fill', 'active'),
+    disabled: ms-core.theme-get($color, 'fill', 'disabled'),
+  );
+
+  $inks: (
+    default: ms-core.theme-get($color, 'ink'),
+    hover: ms-core.theme-get($color, 'ink', 'hover'),
+    focus: ms-core.theme-get($color, 'ink', 'focus'),
+    active: ms-core.theme-get($color, 'ink', 'active'),
+    disabled: ms-core.theme-get($color, 'ink', 'disabled'),
+  );
+
+  $borders: (
+    default: ms-core.theme-get($color, 'border'),
+    hover: ms-core.theme-get($color, 'border', 'hover'),
+    focus: ms-core.theme-get($color, 'border', 'focus'),
+    active: ms-core.theme-get($color, 'border', 'active'),
+    disabled: ms-core.theme-get($color, 'border', 'disabled'),
+  );
+
+  @include base.init() {
+    @include ms-core.struct-apply('button', $struct);
+    @include ms-core.typography-apply('button', $typography);
+    @include ms-core.color-apply('button', (
+      fill: 'ms-grey.400',
+      ink: 'ms-grey.800',
+      border: 'ms-grey.400',
+    ));
+    @include style.text(
+      $fills: $fills,
+      $inks: $inks,
+      $borders: $borders,
+    );
+    outline-offset: 2px;
+
+    &:where(.is-icon-only) {
+      @include ms-core.struct-bind('button', (
+        width: (min: auto),
+        padding: list.nth(ms-core.theme-get($struct, 'padding'), 1)
+      ));
+
+      > .ms-button__label {
+        display: none;
+      }
+    }
+
+    @each $state in $_states {
+      &:where(.is-#{$state}) {
+        @include style.text(
+          $fills: (
+            'default': '#{$state}-400',
+            'hover': '#{$state}-300',
+            'focus': '#{$state}-400',
+            'active': '#{$state}-200',
+            'disabled': '#{$state}-800',
+          ),
+          $inks: (
+            'default': '#{$state}-ink',
+            'disabled': '#{$state}-800'
+          ),
+          $borders: (
+            'default': '#{$state}-400',
+            'hover': '#{$state}-300',
+            'focus': '#{$state}-400',
+            'active': '#{$state}-200',
+            'disabled': '#{$state}-800',
+          )
+        );
+      }
+    }
+
+    &:where(.is-fullwidth) {
+      @include ms-core.struct-width('button', (
+        default: 100%,
+        min: auto,
+        max: 100%
+      ), 'bind');
+    }
+
+    &:where(.is-outlined) {
+      @include style.outlined(
+        $fills: $fills,
+        $inks: $inks,
+        $borders: $borders,
+      );
+
+      @each $state in $_states {
+        &:where(.is-#{$state}) {
+          @include style.outlined(
+            $fills: (
+              'default': '#{$state}-400',
+              'hover': '#{$state}-300',
+              'focus': '#{$state}-400',
+              'active': '#{$state}-200',
+              'disabled': '#{$state}-800',
+            ),
+            $inks: (
+              'default': '#{$state}-ink',
+              'disabled': '#{$state}-800'
+            ),
+            $borders: (
+              'default': '#{$state}-400',
+              'hover': '#{$state}-300',
+              'focus': '#{$state}-400',
+              'active': '#{$state}-200',
+              'disabled': '#{$state}-800',
+            )
+          );
+        }
+      }
+    }
+
+    &:where(.is-filled) {
+      @include style.filled(
+        $fills: $fills,
+        $inks: $inks,
+        $borders: $borders,
+      );
+
+      @each $state in $_states {
+        &:where(.is-#{$state}) {
+          @include style.filled(
+            $fills: (
+              'default': '#{$state}-400',
+              'hover': '#{$state}-300',
+              'focus': '#{$state}-400',
+              'active': '#{$state}-200',
+              'disabled': '#{$state}-800',
+            ),
+            $inks: (
+              'default': '#{$state}-ink',
+              'disabled': '#{$state}-600'
+            ),
+            $borders: (
+              'default': '#{$state}-400',
+              'hover': '#{$state}-300',
+              'focus': '#{$state}-400',
+              'active': '#{$state}-200',
+              'disabled': '#{$state}-800',
+            )
+          );
+        }
+      }
+
+      &:where(.is-raised) {
+        &:not(:disabled) {
+          @include ms-core.struct-shadow('button', 'xs');
+
+          &:hover,
+          &:focus {
+            @include ms-core.struct-shadow('button', 'xs');
+          }
+
+          &:active {
+            @include ms-core.struct-shadow('button', 'sm');
+          }
+        }
+      }
+    }
+  }
+}

package/ms-button/_button-theme.scss

@@ -0,0 +1,67 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+$init-color: (
+  fill: (
+    default: 'accent-400',
+    hover: 'accent-300',
+    active: 'accent-200',
+    focus: 'accent-400',
+    disabled: 'undefined-300',
+  ),
+  ink: (
+    default: 'accent-ink',
+    hover: 'accent-ink',
+    active: 'accent-ink',
+    focus: 'accent-ink',
+    disabled: 'undefined-600',
+  ),
+  border: (
+    default: 'accent-400',
+    hover: 'accent-300',
+    active: 'accent-200',
+    focus: 'accent-400',
+    disabled: 'undefined-300',
+  ),
+);
+
+$init-struct: (
+  width: (
+    default: 100%,
+    min: 69px,
+    max: max-content
+  ),
+  padding: ('sm' 'md'),
+  radius: 'small',
+  border-width: 'xs',
+  border-style: solid,
+  gap: 'xs'
+);
+
+$init-typography: (
+  family: 'global',
+  size: 'body',
+  weight: 'bold',
+  line-height: 'condensed'
+);
+
+$init-settings: ();

package/ms-button/_index.scss

@@ -0,0 +1,24 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@forward 'button-styles';
+@forward 'button-extend';

package/ms-core/_index.scss

@@ -0,0 +1,76 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+$module-mode: false !default;
+$test-mode: $module-mode !default;
+$vue-mode: $test-mode !default;
+$validation: if($vue-mode == true, false, true);
+$expressive-inks: false !default;
+
+/// @type map
+/// @description helper variable for inheriting values for all color properties
+$color-inherit-template: (
+  fill: inherit,
+  ink: inherit,
+  border: inherit
+);
+
+/// @type map
+/// @description helper variable for inheriting values for all struct properties
+$struct-inherit-template: (
+  width: inherit,
+  height: inherit,
+  radius: inherit,
+  padding: inherit,
+  margin: inherit,
+  gap: inherit,
+  border-width: inherit,
+  border-style: inherit,
+  shadow: inherit
+);
+
+/// @type map
+/// @description helper variable for inheriting values for all typography properties
+$type-inherit-template: (
+  family: inherit,
+  size: inherit,
+  weight: inherit,
+  line-height: inherit
+);
+
+@use 'node_modules/@matteusan/sentro' with (
+  $prefix: 'ms',
+  $context: 'theme',
+  $token-validation: $validation,
+  $key-validation: $validation,
+  $breakpoint-validation: $validation,
+);
+
+@forward 'tokens';
+@forward 'theme' with ($expressive-inks: $expressive-inks);
+@forward 'tools';
+@forward 'breakpoint' as breakpoint-*;
+
+@forward 'color' as color-*;
+@forward 'struct' as struct-*;
+@forward 'sprite' as sprite-*;
+@forward 'typography' as typography-*;

package/ms-core/breakpoint/_breakpoint-sentro.scss

@@ -0,0 +1,53 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@use '../tools';
+@use 'node_modules/@matteusan/sentro';
+@use 'sass:map';
+@use 'sass:meta';
+
+$_registry: ();
+
+@mixin config($map: (), $breakpoints...) {
+  @if not tools.is-empty($map) {
+    @each $key, $value in $map {
+      $_registry: map.set($_registry, $key, $value) !global;
+    }
+  }
+  @if meta.keywords($breakpoints) {
+    @each $key, $value in meta.keywords($breakpoints) {
+      $_registry: map.set($_registry, $key, $value) !global;
+    }
+  }
+  @include sentro.breakpoint-config($map, $breakpoints...);
+}
+
+@mixin create($query) {
+  @include sentro.breakpoint-create($query) {
+    @content;
+  }
+}
+
+/// @access protected
+@function registry-get() {
+  @return $_registry;
+}

package/ms-core/breakpoint/_index.scss

@@ -0,0 +1,23 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@forward 'breakpoint-sentro';

package/ms-core/color/_color-constants.scss

@@ -0,0 +1,33 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+$fill-default-opacity: 0%;
+$fill-hover-opacity: 20%;
+$fill-focus-opacity: 20%;
+$fill-active-opacity: 33%;
+
+$border-default-opacity: 0%;
+$border-hover-opacity: 2%;
+$border-focus-opacity: 2%;
+$border-active-opacity: 3.3%;
+
+$outline-focus-opacity: 50%;

package/ms-core/color/_color-setters.scss

@@ -0,0 +1,75 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@use '../theme';
+@use '../tools';
+@use 'sass:map';
+@use 'sass:list';
+
+@use 'color-utils' as util;
+@use 'color-validators' as validator;
+
+@mixin _base($component, $theme, $settings: ()) {
+  $_init-settings: (intent: 'create');
+  $_settings: map.merge($_init-settings, $settings);
+
+  /// @type string
+  $intent: map.get($_settings, 'intent');
+
+  $fill: theme.theme-get($theme, 'fill');
+  $ink: theme.theme-get($theme, 'ink');
+  $border: theme.theme-get($theme, 'border');
+
+  @if not tools.is-type($theme, 'map') {
+    @error '$theme is expecting a map. Map was not given.';
+  } @else {
+    @include validator.validate-color-props(map.keys($theme)) {
+      @if $fill {
+        @include util.fill($component, $fill, $intent);
+      }
+      @if $ink {
+        @include util.ink($component, $ink, $intent);
+      }
+      @if $border {
+        @include util.border($component, $border, $intent);
+      }
+    }
+  }
+}
+
+/// Mixin that applies color styles to a component.
+/// @param {string} $component
+/// @param {map<string, string>} $theme
+/// @return {void} void.
+@mixin apply($component, $theme) {
+  @include _base($component, $theme);
+}
+
+/// Mixin that binds color styles to a component with existing keys.
+/// @param {string} $component
+/// @param {map<string, string>} $theme
+/// @return {void} void.
+@mixin bind($component, $theme) {
+  @include _base($component, $theme, (
+    'intent': bind
+  ));
+}

package/ms-core/color/_color-utils.scss

@@ -0,0 +1,62 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+@use '../theme';
+
+/// Mixin for applying background colors.
+/// @param {string} $component
+/// @param {token|color} $color
+/// @param {string} $intent
+/// @return {void} background color styles.
+@mixin fill($component, $color, $intent: 'create') {
+  @include theme.property(
+    background-color,
+    ('#{$component}-fill', $color),
+    $intent
+  );
+}
+
+/// Mixin for applying text colors.
+/// @param {string} $component
+/// @param {token|color} $color
+/// @param {string} $intent
+/// @return {void} text color styles.
+@mixin ink($component, $color, $intent: 'create') {
+  @include theme.property(
+    color,
+    ('#{$component}-ink', $color),
+    $intent
+  );
+}
+
+/// Mixin for applying border colors.
+/// @param {string} $component
+/// @param {token|color} $color
+/// @param {string} $intent
+/// @return {void} border color styles.
+@mixin border($component, $color, $intent: 'create') {
+  @include theme.property(
+    border-color,
+    ('#{$component}-border', $color),
+    $intent
+  );
+}