@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
41 lines • 7.68 kB
JavaScript
import{Shape as e}from"../node_modules/@sandlada/mdk/build/domain/shape.js";import{State as t}from"../node_modules/@sandlada/mdk/build/domain/state.js";import{Typescale as n}from"../node_modules/@sandlada/mdk/build/domain/typescale.js";import"../node_modules/@sandlada/mdk/build/index.js";import{Color as r}from"../utils/tokens/theme.js";import{createStyleDefinition as i}from"../utils/tokens/create-style-definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* The values in this file are taken from M3 Figma.
* Some values are slightly adjusted and do not conform
* to the MD3 design specifications.
*
* |--------------- borderless
* | container-block-leading-space
* | icon-container
* | container-inline-leading-space /`````````\ also state-layer
* | container-inline-leading-space | <----- indicator-inline/block-leading/trailing-space
* | container-inline-leading-space \_________/
* |
* | Tab Label
* |
* | container-block-leading-space
* |_______________
*
* @example
* ```html
* <tab>
* <indicator />
* <icon-container>
* <state-layer>
* <icon />
* </state-layer>
* </icon-container>
* </tab>
* ```
*
* @link
* https://www.figma.com/community/file/1035203688168086460
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=55141-14251&p=f&t=Lo93bap9LHFqZ0Q1-0
*/
const a=i({"icon-size":`24px`,"unselected-icon-color":r.OnSecondaryContainer,"selected-icon-color":r.OnSecondaryContainer,"icon-container-height":`32px`,"icon-container-width":`56px`,"icon-container-block-leading-space":`0px`,"icon-container-block-trailing-space":`0px`,"icon-container-inline-leading-space":`0px`,"icon-container-inline-trailing-space":`0px`,"unselected-indicator-color":`transparent`,"selected-indicator-color":r.SecondaryContainer,"indicator-height":`32px`,"indicator-width":`56px`,"unselected-label-color":r.OnSurfaceVariant,"selected-label-color":r.Secondary,"label-size":n.LabelMedium.FontSize,"label-line-height":n.LabelMedium.LineHeight,"label-font":n.LabelMedium.Font,"label-tracking":n.LabelMedium.Tracking,"label-font-weight":n.LabelMedium.FontWeight,"badge-color":`unset`,"badge-height":`unset`,"badge-width":`unset`,"badge-label-color":`unset`,"badge-label-size":`unset`,"badge-label-line-height":`unset`,"badge-label-font":`unset`,"badge-label-tracking":`unset`,"badge-label-font-weight":`unset`,"unselected-enabled-state-layer-color":r.OnSurface,"unselected-hovered-state-layer-color":r.OnSurface,"unselected-focused-state-layer-color":r.OnSurface,"unselected-pressed-state-layer-color":r.OnSurface,"selected-enabled-state-layer-color":r.OnSecondaryContainer,"selected-hovered-state-layer-color":r.OnSecondaryContainer,"selected-focused-state-layer-color":r.OnSecondaryContainer,"selected-pressed-state-layer-color":r.OnSecondaryContainer,"unselected-enabled-state-layer-opacity":`0`,"unselected-hovered-state-layer-opacity":t.HoveredStateLayerOpacity,"unselected-focused-state-layer-opacity":t.FocusedStateLayerOpacity,"unselected-pressed-state-layer-opacity":t.PressedStateLayerOpacity,"selected-enabled-state-layer-opacity":`0`,"selected-hovered-state-layer-opacity":t.HoveredStateLayerOpacity,"selected-focused-state-layer-opacity":t.FocusedStateLayerOpacity,"selected-pressed-state-layer-opacity":t.PressedStateLayerOpacity,"container-height":`64px`,"container-width":`104px`,"container-block-leading-space":`6px`,"container-block-trailing-space":`6px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"spacing-between-icon-and-label":`4px`,"icon-container-shape":e.Full,"indicator-shape":e.Full}),o=i(a),s=i({...a,"container-height":`64px`,"container-width":`92px`,"container-block-leading-space":`0px`,"container-block-trailing-space":`0px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"icon-container-height":`40px`,"icon-container-width":`92px`,"icon-container-block-leading-space":`8px`,"icon-container-block-trailing-space":`8px`,"icon-container-inline-leading-space":`16px`,"icon-container-inline-trailing-space":`16px`,"indicator-height":`40px`,"indicator-width":`92px`,"spacing-between-icon-and-label":`4px`}),c=i({...a,"container-height":`80px`,"container-width":`64px`,"indicator-height":`32px`,"indicator-width":`64px`,"container-block-leading-space":`12px`,"container-block-trailing-space":`16px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"spacing-between-icon-and-label":`4px`,"icon-container-height":`32px`,"icon-container-width":`64px`}),l=i({...a,"container-height":`64px`,"container-width":`104px`,"container-block-leading-space":`6px`,"container-block-trailing-space":`6px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"icon-container-height":`32px`,"icon-container-width":`56px`,"icon-container-block-leading-space":`8px`,"icon-container-block-trailing-space":`8px`,"icon-container-inline-leading-space":`16px`,"icon-container-inline-trailing-space":`16px`,"indicator-height":`32px`,"indicator-width":`56px`,"spacing-between-icon-and-label":`4px`}),u=i({...a,"container-height":`56px`,"container-width":`99px`,"container-block-leading-space":`0px`,"container-block-trailing-space":`0px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"icon-container-height":`56px`,"icon-container-width":`99px`,"icon-container-block-leading-space":`16px`,"icon-container-block-trailing-space":`16px`,"icon-container-inline-leading-space":`16px`,"icon-container-inline-trailing-space":`16px`,"indicator-height":`56px`,"indicator-width":`99px`,"spacing-between-icon-and-label":`8px`,"label-font":n.LabelLarge.Font,"label-size":n.LabelLarge.FontSize,"label-line-height":n.LabelLarge.LineHeight,"label-tracking":n.LabelLarge.Tracking,"label-font-weight":n.LabelLarge.FontWeight}),d=i({...a,"container-height":`64px`,"container-width":`104px`,"container-block-leading-space":`4px`,"container-block-trailing-space":`4px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"icon-container-height":`56px`,"icon-container-width":`56px`,"icon-container-block-leading-space":`0px`,"icon-container-block-trailing-space":`0px`,"icon-container-inline-leading-space":`0px`,"icon-container-inline-trailing-space":`0px`,"indicator-height":`56px`,"indicator-width":`56px`,"spacing-between-icon-and-label":`0px`}),f=i({...a,"container-height":`56px`,"container-width":`56px`,"container-block-leading-space":`0px`,"container-block-trailing-space":`4px`,"container-inline-leading-space":`2px`,"container-inline-trailing-space":`2px`,"indicator-height":`32px`,"indicator-width":`56px`,"icon-container-height":`32px`,"icon-container-width":`56px`,"spacing-between-icon-and-label":`4px`}),p=i({...a,"container-height":`56px`,"container-width":`56px`,"container-block-leading-space":`0px`,"container-block-trailing-space":`0px`,"container-inline-leading-space":`0px`,"container-inline-trailing-space":`0px`,"indicator-height":`56px`,"indicator-width":`56px`,"icon-container-height":`56px`,"icon-container-width":`56px`,"spacing-between-icon-and-label":`0px`});export{s as NavigationBarHorizontalTabDefinition,o as NavigationBarVerticalTabDefinition,c as NavigationBarXRVerticalTabDefinition,u as NavigationRailHorizontalTabDefinition,d as NavigationRailRoundTabDefinition,l as NavigationRailVerticalTabDefinition,p as NavigationRailXRRoundTabDefinition,f as NavigationRailXRVerticalTabDefinition};
//# sourceMappingURL=navigation-tab.definition.js.map