@clayui/css 3.35.0 → 3.36.0

package/src/scss/atlas/variables/_globals.scss

@@ -1,7 +1,3 @@
-////
-/// @group globals
-////
-
 // The keyword `clay-unset` allows unsetting a css value so it doesn't get output in the final css file.
 
 $clay-unset: clay-unset !default;
@@ -12,60 +8,32 @@ $c-unset: $clay-unset !default;
 
 $clay-unset-placeholder: clay-unset-placeholder !default;
 
+// Settings
+
 $atlas-theme: true !default;
 
+$enable-bs4-deprecated: true !default;
 $enable-lexicon-flat-colors: true !default;
 $enable-scaling-components: true !default;
+$enable-c-inner: true !default;
+$scaling-breakpoint-down: sm !default;
 
-$enable-rounded: true !default;
+$enable-caret: false !default;
+$enable-deprecation-messages: true !default;
 $enable-gradients: false !default;
+$enable-grid-classes: true !default;
+$enable-pointer-cursor-for-buttons: true !default;
+$enable-prefers-reduced-motion-media-query: true !default;
+$enable-print-styles: true !default;
+$enable-responsive-font-sizes: false !default;
+$enable-rounded: true !default;
 $enable-shadows: true !default;
 $enable-transitions: true !default;
+$enable-validation-icons: true !default;
 
-$grid-breakpoints: (
-	xs: 0,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1280px,
-) !default;
-
-$container-max-widths: (
-	sm: 540px,
-	md: 720px,
-	lg: 960px,
-	xl: 1248px,
-) !default;
-
-$grid-gutter-width: 24px !default;
+// Deprecated, no longer affects any compiled CSS
 
-$moz-osx-font-smoothing: grayscale !default;
-$webkit-font-smoothing: antialiased !default;
-
-$font-size-base: 1rem !default; // 16px
-$font-size-lg: 1.125rem !default; // 18px
-$font-size-sm: 0.875rem !default; // 14px
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semi-bold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: 900 !default;
-
-$line-height-base: 1.5 !default;
-
-$font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont,
-	'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial,
-	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-
-$headings-font-weight: $font-weight-bold !default;
-
-$h1-font-size: 1.625rem !default; // 26px
-$h2-font-size: 1.375rem !default; // 22px
-$h3-font-size: 1.1875rem !default; // 19px
-$h4-font-size: 1rem !default; // 16px
-$h5-font-size: 0.875rem !default; // 14px
-$h6-font-size: 0.8125rem !default; // 13px
+$enable-hover-media-query: false !default;
 
 // Theme Base Colors
 
@@ -81,6 +49,22 @@ $gray-800: #393a4a !default;
 $gray-900: #272833 !default;
 $black: #000 !default;
 
+$grays: () !default;
+$grays: map-merge(
+	(
+		'100': $gray-100,
+		'200': $gray-200,
+		'300': $gray-300,
+		'400': $gray-400,
+		'500': $gray-500,
+		'600': $gray-600,
+		'700': $gray-700,
+		'800': $gray-800,
+		'900': $gray-900,
+	),
+	$grays
+);
+
 $blue: if($enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
 $indigo: if($enable-lexicon-flat-colors, #7785ff, #6610f2) !default;
 $purple: if($enable-lexicon-flat-colors, #af78ff, #6f42c1) !default;
@@ -92,6 +76,26 @@ $green: if($enable-lexicon-flat-colors, #9be169, #287d3d) !default;
 $teal: if($enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
 $cyan: if($enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
 
+$colors: () !default;
+$colors: map-merge(
+	(
+		'blue': $blue,
+		'indigo': $indigo,
+		'purple': $purple,
+		'pink': $pink,
+		'red': $red,
+		'orange': $orange,
+		'yellow': $yellow,
+		'green': $green,
+		'teal': $teal,
+		'cyan': $cyan,
+		'white': $white,
+		'gray': $gray-600,
+		'gray-dark': $gray-800,
+	),
+	$colors
+);
+
 $primary: #0b5fff !default;
 $primary-d1: darken($primary, 5.1) !default;
 $primary-d2: darken($primary, 10) !default;
@@ -152,39 +156,35 @@ $dark-l1: lighten(saturate($dark, 0.18), 4.12) !default;
 $dark-l2: lighten(desaturate($dark, 0.36), 8.04) !default;
 
 $theme-colors: () !default;
-$theme-colors: map-deep-merge(
+$theme-colors: map-merge(
 	(
-		primary: $primary,
-		secondary: $secondary,
-		success: $success,
-		info: $info,
-		warning: $warning,
-		danger: $danger,
-		light: $light,
-		dark: $dark,
+		'primary': $primary,
+		'secondary': $secondary,
+		'success': $success,
+		'info': $info,
+		'warning': $warning,
+		'danger': $danger,
+		'light': $light,
+		'dark': $dark,
 	),
 	$theme-colors
 );
 
+// Set a specific jump point for requesting color jumps
+
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+
 $yiq-contrasted-threshold: 150 !default;
 $yiq-text-dark: $gray-900 !default;
 $yiq-text-light: $white !default;
 
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
-$text-muted: $gray-500 !default;
-
-$link-color: $primary !default;
-$link-hover-color: $primary-d2 !default;
-
-$component-active-bg: #0b5fff !default;
-$component-active-color: #fff !default;
+// Characters which are escaped by the escape-svg function
 
-$component-focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1 !default;
-$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0
-	0 0 0.25rem $white !default;
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23')) !default;
 
-// Spacing
+// Spacers
 
 $spacer: 1rem !default;
 $spacers: () !default;
@@ -225,6 +225,298 @@ $spacers: map-deep-merge(
 	$spacers
 );
 
+// This variable affects the `.h-*` and `.w-*` classes.
+
+$sizes: () !default;
+$sizes: map-merge(
+	(
+		25: 25%,
+		50: 50%,
+		75: 75%,
+		100: 100%,
+		auto: auto,
+	),
+	$sizes
+);
+
+// Reusable Values
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$border-color: $gray-300 !default;
+$border-width: 0.0625rem !default;
+
 $border-radius: 0.25rem !default; // 4px
 $border-radius-lg: 0.375rem !default; // 6px
 $border-radius-sm: 0.1875rem !default; // 3px
+
+$rounded-border-radius: $border-radius !default;
+$rounded-circle-border-radius: 5000px !default;
+$rounded-0-border-radius: 0 !default;
+$rounded-pill: 50rem !default;
+
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
+
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
+
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+$transition-collapse: height 0.35s ease !default;
+
+$embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: join(
+	((21 9), (16 9), (4 3), (1 1)),
+	$embed-responsive-aspect-ratios
+);
+
+$component-focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1 !default;
+$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0
+	0 0 0.25rem $white !default;
+
+$component-active-color: #fff !default;
+$component-active-bg: #0b5fff !default;
+
+// Cursors
+
+$link-cursor: pointer !default;
+$disabled-cursor: not-allowed !default;
+
+// Grid
+
+$grid-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1280px,
+) !default;
+
+// Grid columns
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 24px !default;
+$grid-row-columns: 6 !default;
+
+// Containers
+
+$container-max-widths: (
+	sm: 540px,
+	md: 720px,
+	lg: 960px,
+	xl: 1248px,
+) !default;
+
+$container-form-lg: () !default;
+$container-form-lg: map-deep-merge(
+	(
+		breakpoint-up: lg,
+		padding-bottom: 3rem,
+		padding-top: 3rem,
+		padding-bottom-mobile: 1rem,
+		padding-top-mobile: 1rem,
+	),
+	$container-form-lg
+);
+
+$container-view: () !default;
+$container-view: map-deep-merge(
+	(
+		padding-bottom: 1.5rem,
+		padding-top: 1.5rem,
+	),
+	$container-view
+);
+
+// Fonts
+
+$moz-osx-font-smoothing: grayscale !default;
+$webkit-font-smoothing: antialiased !default;
+
+$font-import-url: null !default;
+
+$font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont,
+	'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial,
+	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+	'Liberation Mono', 'Courier New', monospace !default;
+
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 1rem !default; // 16px
+$font-size-lg: 1.125rem !default; // 18px
+$font-size-sm: 0.875rem !default; // 14px
+
+$font-size-base-mobile: $font-size-base !default;
+$font-size-lg-mobile: $font-size-lg !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi-bold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: 900 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+
+$headings-font-weight: $font-weight-bold !default;
+
+$h1-font-size: 1.625rem !default; // 26px
+$h2-font-size: 1.375rem !default; // 22px
+$h3-font-size: 1.1875rem !default; // 19px
+$h4-font-size: 1rem !default; // 16px
+$h5-font-size: 0.875rem !default; // 14px
+$h6-font-size: 0.8125rem !default; // 13px
+
+$h1-font-size-mobile: null !default;
+$h2-font-size-mobile: null !default;
+$h3-font-size-mobile: null !default;
+$h4-font-size-mobile: null !default;
+$h5-font-size-mobile: null !default;
+$h6-font-size-mobile: null !default;
+
+$headings-margin-bottom: $spacer / 2 !default;
+$headings-font-family: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
+
+// Body
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$body-moz-osx-font-smoothing: $moz-osx-font-smoothing !default;
+$body-webkit-font-smoothing: $webkit-font-smoothing !default;
+$body-text-align: inherit !default;
+
+$c-body: () !default;
+$c-body: map-merge(
+	(
+		background-color: $body-bg,
+		color: $body-color,
+		font-family: $font-family-base,
+		font-size: $font-size-base,
+		-moz-osx-font-smoothing: $body-moz-osx-font-smoothing,
+		-webkit-font-smoothing: $body-webkit-font-smoothing,
+		font-weight: $font-weight-base,
+		line-height: $line-height-base,
+		margin: 0,
+		-ms-overflow-style: scrollbar,
+		text-align: $body-text-align,
+	),
+	$c-body
+);
+
+// Button
+
+$c-button-base: () !default;
+$c-button-base: map-merge(
+	(
+		cursor: $link-cursor,
+		-webkit-appearance: button,
+	),
+	$c-button-base
+);
+
+// Link
+
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: $primary-d2 !default;
+$link-hover-decoration: underline !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraph
+
+$paragraph-margin-bottom: 1rem !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-500 !default;
+
+$blockquote-small-color: $gray-600 !default;
+$blockquote-small-font-size: $small-font-size !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+
+$hr-border-color: rgba($black, 0.1) !default;
+$hr-border-width: $border-width !default;
+$hr-margin-y: $spacer !default;
+
+$mark-padding: 0.2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$code-color: $pink !default;
+$code-font-size: 87.5% !default;
+
+$kbd-bg: $gray-900 !default;
+$kbd-color: $white !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-padding-y: 0.2rem !default;
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
+
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$pre-color: $gray-900 !default;
+$pre-scrollable-max-height: 340px !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+// Buttons + Forms
+
+$label-margin-bottom: 0.5rem !default;
+
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-padding-y: 0.375rem !default;
+
+$input-btn-focus-width: 0.2rem !default;
+
+$input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-font-size-sm: $font-size-sm !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-padding-y-sm: 0.25rem !default;
+
+$input-btn-font-size-lg: $font-size-lg !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-padding-y-lg: 0.5rem !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Print
+
+$print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
+$print-page-size: a3 !default;

package/src/scss/atlas/variables/_labels.scss

@@ -1,7 +1,3 @@
-////
-/// @group labels
-////
-
 $label-border-radius: 0.125rem !default; // 2px
 $label-font-size: 0.625rem !default; // 10px
 $label-font-weight: $font-weight-semi-bold !default;

package/src/scss/atlas/variables/_pagination.scss

@@ -1,7 +1,3 @@
-////
-/// @group pagination
-////
-
 $pagination-font-size: 0.875rem !default; // 14px
 $pagination-line-height: 1 !default;