Box: Sunken

WIP

Notes
HTML
View
Info
Assets

Usage & behaviour

Boxes come in two styles default and semantic

Default styles have the following behaviours:

Flat: Most basic implementation, no interaction whatsoever. Defines a flat elevation context wherein all buttons behave normally.
Flat bordered: same as above, except this variation also has a border.
Sunken: The "opposite" of flat, strictly referring to the color of its surface. Creates a sunken elevation context wherein certain button type have their background altered to stand out enough.
Raised: Usually highlights interaction. To be used when a box is nested in another box. Typically, this applies only to flat boxes and is used to distinguish nested boxes of the same type. The sunken variant has no interaction, thus is never used in that manner. Elevation context is flat.
Overlaid: Usually highlights interaction. To be used when the box is floating or hovering above other content (such as dropdown, modals, popovers etc). Elevation context is flat.

Data attribute alternative

Box styles can either be applied through classes or data attributes. In the event you'd need, for any given component, an elevation context stripped of any predefined spacings or interaction, use data attributes.

Data attribute usage

First you need to describe which type of wrapper you need to form an elevation context. For boxes, use : [data-scope-wrapper="box"].

The available types for now are:

[data-scope="flat"]
[data-scope="sunken"]


        
        <div class="sds-box -boxInsetLg -boxSunken">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


        <div class="{{ namespace }}box{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>

Handle: @box--sunken
Preview:
- With layout
- Component only
Filesystem Path: components/token-based/surfaces/box/box.njk

File:

Content:


                                /* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}box {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	@include custom-prop-fallback("background-color","comp-box-background-color");
	display: block;
	border-radius: $box-border-radius-global;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// box__childElement
	&__header {
		border-top-right-radius: map-deep-get($token-radius-map, "16");
		border-top-left-radius: map-deep-get($token-radius-map, "16");
	}

	&__footer {
		border-bottom-right-radius: map-deep-get($token-radius-map, "16");
		border-bottom-left-radius: map-deep-get($token-radius-map, "16");
	}

	&__separator {

		height: $border-width;
		@include custom-prop-fallback("background-color","sys-color-border-primary-moderate");
		@include custom-prop-fallback("margin-left","sys-space-inset-horizontal-1000","true","false","true");
		@include custom-prop-fallback("margin-right","sys-space-inset-horizontal-1000","true","false","true");

		@include media-breakpoint-up(lg) {
			@include custom-prop-fallback("margin-left","sys-space-inset-horizontal-1500","true","false","true");
			@include custom-prop-fallback("margin-right","sys-space-inset-horizontal-1500","true","false","true");
		}

	}

	&__outOfBoundsLg {

		@include custom-prop-fallback("margin-left","ui-space-inset-horizontal-static-1000","true","false","true");
		@include custom-prop-fallback("margin-right","ui-space-inset-horizontal-static-1000","true","false","true");

		@include media-breakpoint-up(lg) {
			@include custom-prop-fallback("margin-left","ui-space-inset-horizontal-static-1500","true","false","true");
			@include custom-prop-fallback("margin-right","ui-space-inset-horizontal-static-1500","true","false","true");
		}

	}

	&__outOfBoundsMd {

		@include custom-prop-fallback("margin-left","sys-space-inset-horizontal-500","true","false","true");
		@include custom-prop-fallback("margin-right","sys-space-inset-horizontal-500","true","false","true");

		@include media-breakpoint-up(lg) {
			--comp-card-space-inset-horizontal-small: calc(var(--ui-space-inset-horizontal-static-1500) - var(--ui-space-inset-horizontal-static-500));
			margin-left: calc(var(comp-card-space-inset-horizontal-small) * -1);
			margin-right: calc(var(comp-card-space-inset-horizontal-small) * -1);
		}

	}


	/* modifiers */

	// box -altStyle
	&.-boxInsetXs,
	&.-insetXs {

		@include custom-prop-fallback("padding", "comp-box-extra-small-inset-h");

	}

	&.-boxInsetSm,
	&.-insetSm {

		@include custom-prop-fallback("padding", "comp-box-small-inset-h");

	}

	&.-boxInsetMd,
	&.-insetMd {

		@include custom-prop-fallback("padding", "comp-box-medium-inset-h")

	}

	&.-boxInsetLg,
	&.-insetLg {

		@include custom-prop-fallback("padding", "comp-box-large-inset-h");

	}

	&.-boxInsetXl,
	&.-insetXl {

		@include custom-prop-fallback("padding", "comp-box-extra-large-inset-h");

	}

	&.-boxInsetHorizontalSm,
	&.-insetHorizontalSm {

		@include custom-prop-fallback("padding-left", "comp-box-small-inset-h");
		@include custom-prop-fallback("padding-right", "comp-box-small-inset-h");

	}

	&.-info,
	&.-boxInfo,
	&.-elevated,
	&.-boxElevated,
	&.-boxSunken {
		@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
	}

	&.-boxDanger,
	&.-danger {

		@include custom-prop-fallback("background-color","comp-box-danger-background-color");
		@include custom-prop-fallback("color","comp-box-danger-text-color");

		&.-boxOutline {
			@include custom-prop-fallback("border-color","comp-box-danger-background-color");
		}

	}

	&.-boxSuccess,
	&.-success {

		@include custom-prop-fallback("background-color","comp-box-success-background-color");
		@include custom-prop-fallback("color","comp-box-success-text-color");

		&.-boxOutline {
			@include custom-prop-fallback("border-color","comp-box-success-background-color");
		}

	}

	&.-boxHighlight {

		@include custom-prop-fallback("background-color","comp-box-highlight-background-color");
		@include custom-prop-fallback("color","comp-box-highlight-text-color");

		&.-boxOutline {
			@include custom-prop-fallback("border-color","comp-box-highlight-background-color");
		}

	}

	&.-boxWarning {

		@include custom-prop-fallback("background-color","comp-box-warning-background-color");
		@include custom-prop-fallback("color","comp-box-warning-text-color");

		&.-boxOutline {
			@include custom-prop-fallback("border-color","comp-box-warning-background-color");
		}

	}

	&.-boxNeutral{

		&.-boxOutline {
			@include custom-prop-fallback("border-color","comp-box-neutral-outline-border-color");
		}

	}

	&.-boxOutline {
		border: $border-width*2 solid;
		@include custom-prop-fallback("background-color","comp-box-background-color");
		@include custom-prop-fallback("color","sys-color-text-primary-contrast");
	}

	&.-boxBordered {
		border: map-deep-get($design-tokens, "comp-box-flat-bordered-border-width") solid;
		@include custom-prop-fallback("border-color","comp-box-flat-bordered-border-color");
	}

	&.-boxOverlaid {

		@include custom-prop-fallback("background-color","comp-box-overlaid-background-color");

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	/* for when no sds-scaleInteraction class is applied */
	&:focus-visible {
		outline: map-deep-get($design-tokens,"comp-box-pressed-border-width") solid;
		@include custom-prop-fallback("outline-color","comp-box-neutral-outline-border-color");
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}

URL: /components/raw/box/_box.scss
Filesystem Path: components/token-based/surfaces/box/_box.scss
Size: 5.9 KB