diff --git a/.yarn/cache/@next-swc-darwin-arm64-npm-12.1.4-8bc9a59090-8.zip b/.yarn/cache/@next-swc-darwin-arm64-npm-12.1.4-8bc9a59090-8.zip new file mode 100644 index 000000000000..87eb23228206 Binary files /dev/null and b/.yarn/cache/@next-swc-darwin-arm64-npm-12.1.4-8bc9a59090-8.zip differ diff --git a/.yarn/cache/@next-swc-linux-arm64-gnu-npm-12.1.4-5ce5b29d4d-8.zip b/.yarn/cache/@next-swc-linux-arm64-gnu-npm-12.1.4-5ce5b29d4d-8.zip new file mode 100644 index 000000000000..b29a136eee29 Binary files /dev/null and b/.yarn/cache/@next-swc-linux-arm64-gnu-npm-12.1.4-5ce5b29d4d-8.zip differ diff --git a/.yarn/cache/@next-swc-win32-arm64-msvc-npm-12.1.4-b5b707823d-8.zip b/.yarn/cache/@next-swc-win32-arm64-msvc-npm-12.1.4-b5b707823d-8.zip new file mode 100644 index 000000000000..90394d00bc2d Binary files /dev/null and b/.yarn/cache/@next-swc-win32-arm64-msvc-npm-12.1.4-b5b707823d-8.zip differ diff --git a/.yarn/cache/esbuild-darwin-arm64-npm-0.14.38-b37de966bb-8.zip b/.yarn/cache/esbuild-darwin-arm64-npm-0.14.38-b37de966bb-8.zip new file mode 100644 index 000000000000..d991ac385800 Binary files /dev/null and b/.yarn/cache/esbuild-darwin-arm64-npm-0.14.38-b37de966bb-8.zip differ diff --git a/.yarn/cache/esbuild-darwin-arm64-npm-0.15.3-3640e6bc55-8.zip b/.yarn/cache/esbuild-darwin-arm64-npm-0.15.3-3640e6bc55-8.zip new file mode 100644 index 000000000000..86f29015e47d Binary files /dev/null and b/.yarn/cache/esbuild-darwin-arm64-npm-0.15.3-3640e6bc55-8.zip differ diff --git a/.yarn/cache/esbuild-linux-arm64-npm-0.14.38-cef31fba53-8.zip b/.yarn/cache/esbuild-linux-arm64-npm-0.14.38-cef31fba53-8.zip new file mode 100644 index 000000000000..16e3d3396887 Binary files /dev/null and b/.yarn/cache/esbuild-linux-arm64-npm-0.14.38-cef31fba53-8.zip differ diff --git a/.yarn/cache/esbuild-linux-arm64-npm-0.15.3-5ce6ddd928-8.zip b/.yarn/cache/esbuild-linux-arm64-npm-0.15.3-5ce6ddd928-8.zip new file mode 100644 index 000000000000..b7820748fab3 Binary files /dev/null and b/.yarn/cache/esbuild-linux-arm64-npm-0.15.3-5ce6ddd928-8.zip differ diff --git a/.yarn/cache/esbuild-windows-arm64-npm-0.14.38-9693d16298-8.zip b/.yarn/cache/esbuild-windows-arm64-npm-0.14.38-9693d16298-8.zip new file mode 100644 index 000000000000..9ad725f42e62 Binary files /dev/null and b/.yarn/cache/esbuild-windows-arm64-npm-0.14.38-9693d16298-8.zip differ diff --git a/.yarn/cache/esbuild-windows-arm64-npm-0.15.3-6777f0a5aa-8.zip b/.yarn/cache/esbuild-windows-arm64-npm-0.15.3-6777f0a5aa-8.zip new file mode 100644 index 000000000000..8bcc7deac358 Binary files /dev/null and b/.yarn/cache/esbuild-windows-arm64-npm-0.15.3-6777f0a5aa-8.zip differ diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_breakpoint.scss new file mode 100644 index 000000000000..c213c5e02609 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_breakpoint.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/breakpoint'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_colors.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_colors.scss new file mode 100644 index 000000000000..b3c70bfe6b21 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_colors.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/colors'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_config.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_config.scss new file mode 100644 index 000000000000..ec34f7f8691e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_config.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/config'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_feature-flags.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_feature-flags.scss new file mode 100644 index 000000000000..5c6d5ca1c1d4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_feature-flags.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/feature-flags'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_grid.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_grid.scss new file mode 100644 index 000000000000..a8bce3987100 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_grid.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/grid'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_layer.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_layer.scss new file mode 100644 index 000000000000..488e28165dc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_layer.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/layer'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_motion.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_motion.scss new file mode 100644 index 000000000000..950632aa61f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_motion.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/motion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_reset.scss new file mode 100644 index 000000000000..a24d8984d52d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_reset.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/reset'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_spacing.scss new file mode 100644 index 000000000000..042bedcc0786 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_spacing.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_theme.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_theme.scss new file mode 100644 index 000000000000..a1b1880ebb53 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_theme.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/theme'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_themes.scss new file mode 100644 index 000000000000..77e290f36b7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_themes.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_type.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_type.scss new file mode 100644 index 000000000000..be5d1dcd9dea --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_type.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/type'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_zone.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_zone.scss new file mode 100644 index 000000000000..aadd90dee847 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/_zone.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/zone'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_theme.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_theme.scss new file mode 100644 index 000000000000..6e35001e7a08 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_theme.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/compat/theme'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_themes.scss new file mode 100644 index 000000000000..7844e4a87a03 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/compat/_themes.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/compat/themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/accordion/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/accordion/_index.scss new file mode 100644 index 000000000000..c8e542c8b229 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/accordion/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/accordion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/breadcrumb/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/breadcrumb/_index.scss new file mode 100644 index 000000000000..bfaf7cbfaefc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/breadcrumb/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/breadcrumb'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/button/_index.scss new file mode 100644 index 000000000000..ce0f12f72a2f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/button'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/checkbox/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/checkbox/_index.scss new file mode 100644 index 000000000000..90a7e29b4d80 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/checkbox/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/checkbox'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/code-snippet/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/code-snippet/_index.scss new file mode 100644 index 000000000000..042347845ebc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/code-snippet/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/code-snippet'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/combo-box/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/combo-box/_index.scss new file mode 100644 index 000000000000..6dcbca539ec6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/combo-box/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/combo-box'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/content-switcher/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/content-switcher/_index.scss new file mode 100644 index 000000000000..a556b5a77259 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/content-switcher/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/content-switcher'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/copy-button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/copy-button/_index.scss new file mode 100644 index 000000000000..db49d102e235 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/copy-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/copy-button'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/data-table/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/data-table/_index.scss new file mode 100644 index 000000000000..dbb7651ed708 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/data-table/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/data-table'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/date-picker/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/date-picker/_index.scss new file mode 100644 index 000000000000..022867b18fad --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/date-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/date-picker'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/dropdown/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/dropdown/_index.scss new file mode 100644 index 000000000000..4719b2d5da43 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/dropdown/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/dropdown'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/file-uploader/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/file-uploader/_index.scss new file mode 100644 index 000000000000..2147e2019db4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/file-uploader/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/file-uploader'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/form/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/form/_index.scss new file mode 100644 index 000000000000..c0c810ef5e1e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/form/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/form'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/inline-loading/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/inline-loading/_index.scss new file mode 100644 index 000000000000..98a7cf537ff5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/inline-loading/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/inline-loading'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/link/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/link/_index.scss new file mode 100644 index 000000000000..823f21ce7867 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/link/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/link'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/list/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/list/_index.scss new file mode 100644 index 000000000000..c6cd81ee947d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/list/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/list'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/loading/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/loading/_index.scss new file mode 100644 index 000000000000..6c141da2486f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/loading/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/loading'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/menu/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/menu/_index.scss new file mode 100644 index 000000000000..1da729be03d1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/menu/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/menu'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/modal/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/modal/_index.scss new file mode 100644 index 000000000000..6b4e38c559bc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/modal/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/modal'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/multiselect/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/multiselect/_index.scss new file mode 100644 index 000000000000..d54269b1387e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/multiselect/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/multiselect'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/notification/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/notification/_index.scss new file mode 100644 index 000000000000..5bc05d12d838 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/notification/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/notification'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/number-input/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/number-input/_index.scss new file mode 100644 index 000000000000..c5dc36fd0baf --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/number-input/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/number-input'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/overflow-menu/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/overflow-menu/_index.scss new file mode 100644 index 000000000000..a5526ea5e1e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/overflow-menu/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/overflow-menu'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination-nav/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination-nav/_index.scss new file mode 100644 index 000000000000..fdd706eefffd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination-nav/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/pagination-nav'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination/_index.scss new file mode 100644 index 000000000000..679f8cf98073 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/pagination/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/pagination'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/progress-indicator/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/progress-indicator/_index.scss new file mode 100644 index 000000000000..e433914c55aa --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/progress-indicator/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/progress-indicator'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/radio-button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/radio-button/_index.scss new file mode 100644 index 000000000000..ef9ded9cc2f2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/radio-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/radio-button'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/search/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/search/_index.scss new file mode 100644 index 000000000000..995d3cc41162 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/search/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/search'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/select/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/select/_index.scss new file mode 100644 index 000000000000..c995c43d3199 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/select/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/select'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/slider/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/slider/_index.scss new file mode 100644 index 000000000000..807bb5df0e31 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/slider/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/slider'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/stack/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/stack/_index.scss new file mode 100644 index 000000000000..fb8a6cf6a378 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/stack/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/stack'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/structured-list/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/structured-list/_index.scss new file mode 100644 index 000000000000..8a37a3291cad --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/structured-list/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/structured-list'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tabs/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tabs/_index.scss new file mode 100644 index 000000000000..0e27f9f33f7e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tabs/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/tabs'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tag/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tag/_index.scss new file mode 100644 index 000000000000..4040cbfab5b6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tag/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/tag'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-area/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-area/_index.scss new file mode 100644 index 000000000000..78a0efd0225a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-area/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/text-area'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-input/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-input/_index.scss new file mode 100644 index 000000000000..8d5b65023127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/text-input/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/text-input'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tile/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tile/_index.scss new file mode 100644 index 000000000000..50c044d12446 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tile/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/tile'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/time-picker/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/time-picker/_index.scss new file mode 100644 index 000000000000..11ac9bf2861e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/time-picker/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/time-picker'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/toggle/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/toggle/_index.scss new file mode 100644 index 000000000000..860643b5dbef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/toggle/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/toggle'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tooltip/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tooltip/_index.scss new file mode 100644 index 000000000000..45d173aaf991 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/tooltip/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/tooltip'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/treeview/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/treeview/_index.scss new file mode 100644 index 000000000000..9a45e97d3d25 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/treeview/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/treeview'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/ui-shell/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/ui-shell/_index.scss new file mode 100644 index 000000000000..8a026592e7a9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/components/ui-shell/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/ui-shell'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_index.scss new file mode 100644 index 000000000000..8131757379e0 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_mono.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_mono.scss new file mode 100644 index 000000000000..5bc808190d86 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_mono.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/mono'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-arabic.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-arabic.scss new file mode 100644 index 000000000000..2efce12db25f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-arabic.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans-arabic'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-devanagari.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-devanagari.scss new file mode 100644 index 000000000000..46d8ec6366e3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-devanagari.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans-devanagari'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-hebrew.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-hebrew.scss new file mode 100644 index 000000000000..29c89a3c815e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-hebrew.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans-hebrew'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai-looped.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai-looped.scss new file mode 100644 index 000000000000..0f6c00cd136c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai-looped.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans-thai-looped'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai.scss new file mode 100644 index 000000000000..179702b41df7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans-thai.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans-thai'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans.scss new file mode 100644 index 000000000000..127ab690b990 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_sans.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/sans'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_serif.scss b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_serif.scss new file mode 100644 index 000000000000..3e505e700ea8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/carbon-react/scss/fonts/_serif.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/fonts/serif'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/colors/scss/colors.scss b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/colors.scss new file mode 100644 index 000000000000..3a24b50ab44a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/colors.scss @@ -0,0 +1,12 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@import './mixins'; +// Deprecated ☠️ +@include ibm--colors(); +// Preferred +@include carbon--colors(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/colors/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/index.scss new file mode 100644 index 000000000000..3a24b50ab44a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/index.scss @@ -0,0 +1,12 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@import './mixins'; +// Deprecated ☠️ +@include ibm--colors(); +// Preferred +@include carbon--colors(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss new file mode 100644 index 000000000000..c0e034e014d3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/colors/scss/mixins.scss @@ -0,0 +1,1456 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +$ibm-color__black-100: #000000 !default; +$ibm-color__blue-10: #edf5ff !default; +$ibm-color__blue-20: #d0e2ff !default; +$ibm-color__blue-30: #a6c8ff !default; +$ibm-color__blue-40: #78a9ff !default; +$ibm-color__blue-50: #4589ff !default; +$ibm-color__blue-60: #0f62fe !default; +$ibm-color__blue-70: #0043ce !default; +$ibm-color__blue-80: #002d9c !default; +$ibm-color__blue-90: #001d6c !default; +$ibm-color__blue-100: #001141 !default; +$ibm-color__cool-gray-10: #f2f4f8 !default; +$ibm-color__cool-gray-20: #dde1e6 !default; +$ibm-color__cool-gray-30: #c1c7cd !default; +$ibm-color__cool-gray-40: #a2a9b0 !default; +$ibm-color__cool-gray-50: #878d96 !default; +$ibm-color__cool-gray-60: #697077 !default; +$ibm-color__cool-gray-70: #4d5358 !default; +$ibm-color__cool-gray-80: #343a3f !default; +$ibm-color__cool-gray-90: #21272a !default; +$ibm-color__cool-gray-100: #121619 !default; +$ibm-color__cyan-10: #e5f6ff !default; +$ibm-color__cyan-20: #bae6ff !default; +$ibm-color__cyan-30: #82cfff !default; +$ibm-color__cyan-40: #33b1ff !default; +$ibm-color__cyan-50: #1192e8 !default; +$ibm-color__cyan-60: #0072c3 !default; +$ibm-color__cyan-70: #00539a !default; +$ibm-color__cyan-80: #003a6d !default; +$ibm-color__cyan-90: #012749 !default; +$ibm-color__cyan-100: #061727 !default; +$ibm-color__gray-10: #f4f4f4 !default; +$ibm-color__gray-20: #e0e0e0 !default; +$ibm-color__gray-30: #c6c6c6 !default; +$ibm-color__gray-40: #a8a8a8 !default; +$ibm-color__gray-50: #8d8d8d !default; +$ibm-color__gray-60: #6f6f6f !default; +$ibm-color__gray-70: #525252 !default; +$ibm-color__gray-80: #393939 !default; +$ibm-color__gray-90: #262626 !default; +$ibm-color__gray-100: #161616 !default; +$ibm-color__green-10: #defbe6 !default; +$ibm-color__green-20: #a7f0ba !default; +$ibm-color__green-30: #6fdc8c !default; +$ibm-color__green-40: #42be65 !default; +$ibm-color__green-50: #24a148 !default; +$ibm-color__green-60: #198038 !default; +$ibm-color__green-70: #0e6027 !default; +$ibm-color__green-80: #044317 !default; +$ibm-color__green-90: #022d0d !default; +$ibm-color__green-100: #071908 !default; +$ibm-color__magenta-10: #fff0f7 !default; +$ibm-color__magenta-20: #ffd6e8 !default; +$ibm-color__magenta-30: #ffafd2 !default; +$ibm-color__magenta-40: #ff7eb6 !default; +$ibm-color__magenta-50: #ee5396 !default; +$ibm-color__magenta-60: #d02670 !default; +$ibm-color__magenta-70: #9f1853 !default; +$ibm-color__magenta-80: #740937 !default; +$ibm-color__magenta-90: #510224 !default; +$ibm-color__magenta-100: #2a0a18 !default; +$ibm-color__orange-10: #fff2e8 !default; +$ibm-color__orange-20: #ffd9be !default; +$ibm-color__orange-30: #ffb784 !default; +$ibm-color__orange-40: #ff832b !default; +$ibm-color__orange-50: #eb6200 !default; +$ibm-color__orange-60: #ba4e00 !default; +$ibm-color__orange-70: #8a3800 !default; +$ibm-color__orange-80: #5e2900 !default; +$ibm-color__orange-90: #3e1a00 !default; +$ibm-color__orange-100: #231000 !default; +$ibm-color__purple-10: #f6f2ff !default; +$ibm-color__purple-20: #e8daff !default; +$ibm-color__purple-30: #d4bbff !default; +$ibm-color__purple-40: #be95ff !default; +$ibm-color__purple-50: #a56eff !default; +$ibm-color__purple-60: #8a3ffc !default; +$ibm-color__purple-70: #6929c4 !default; +$ibm-color__purple-80: #491d8b !default; +$ibm-color__purple-90: #31135e !default; +$ibm-color__purple-100: #1c0f30 !default; +$ibm-color__red-10: #fff1f1 !default; +$ibm-color__red-20: #ffd7d9 !default; +$ibm-color__red-30: #ffb3b8 !default; +$ibm-color__red-40: #ff8389 !default; +$ibm-color__red-50: #fa4d56 !default; +$ibm-color__red-60: #da1e28 !default; +$ibm-color__red-70: #a2191f !default; +$ibm-color__red-80: #750e13 !default; +$ibm-color__red-90: #520408 !default; +$ibm-color__red-100: #2d0709 !default; +$ibm-color__teal-10: #d9fbfb !default; +$ibm-color__teal-20: #9ef0f0 !default; +$ibm-color__teal-30: #3ddbd9 !default; +$ibm-color__teal-40: #08bdba !default; +$ibm-color__teal-50: #009d9a !default; +$ibm-color__teal-60: #007d79 !default; +$ibm-color__teal-70: #005d5d !default; +$ibm-color__teal-80: #004144 !default; +$ibm-color__teal-90: #022b30 !default; +$ibm-color__teal-100: #081a1c !default; +$ibm-color__warm-gray-10: #f7f3f2 !default; +$ibm-color__warm-gray-20: #e5e0df !default; +$ibm-color__warm-gray-30: #cac5c4 !default; +$ibm-color__warm-gray-40: #ada8a8 !default; +$ibm-color__warm-gray-50: #8f8b8b !default; +$ibm-color__warm-gray-60: #726e6e !default; +$ibm-color__warm-gray-70: #565151 !default; +$ibm-color__warm-gray-80: #3c3838 !default; +$ibm-color__warm-gray-90: #272525 !default; +$ibm-color__warm-gray-100: #171414 !default; +$ibm-color__white-0: #ffffff !default; +$ibm-color__yellow-10: #fcf4d6 !default; +$ibm-color__yellow-20: #fddc69 !default; +$ibm-color__yellow-30: #f1c21b !default; +$ibm-color__yellow-40: #d2a106 !default; +$ibm-color__yellow-50: #b28600 !default; +$ibm-color__yellow-60: #8e6a00 !default; +$ibm-color__yellow-70: #684e00 !default; +$ibm-color__yellow-80: #483700 !default; +$ibm-color__yellow-90: #302400 !default; +$ibm-color__yellow-100: #1c1500 !default; +$carbon--black-100: #000000 !default; +$carbon--blue-10: #edf5ff !default; +$carbon--blue-20: #d0e2ff !default; +$carbon--blue-30: #a6c8ff !default; +$carbon--blue-40: #78a9ff !default; +$carbon--blue-50: #4589ff !default; +$carbon--blue-60: #0f62fe !default; +$carbon--blue-70: #0043ce !default; +$carbon--blue-80: #002d9c !default; +$carbon--blue-90: #001d6c !default; +$carbon--blue-100: #001141 !default; +$carbon--cool-gray-10: #f2f4f8 !default; +$carbon--cool-gray-20: #dde1e6 !default; +$carbon--cool-gray-30: #c1c7cd !default; +$carbon--cool-gray-40: #a2a9b0 !default; +$carbon--cool-gray-50: #878d96 !default; +$carbon--cool-gray-60: #697077 !default; +$carbon--cool-gray-70: #4d5358 !default; +$carbon--cool-gray-80: #343a3f !default; +$carbon--cool-gray-90: #21272a !default; +$carbon--cool-gray-100: #121619 !default; +$carbon--cyan-10: #e5f6ff !default; +$carbon--cyan-20: #bae6ff !default; +$carbon--cyan-30: #82cfff !default; +$carbon--cyan-40: #33b1ff !default; +$carbon--cyan-50: #1192e8 !default; +$carbon--cyan-60: #0072c3 !default; +$carbon--cyan-70: #00539a !default; +$carbon--cyan-80: #003a6d !default; +$carbon--cyan-90: #012749 !default; +$carbon--cyan-100: #061727 !default; +$carbon--gray-10: #f4f4f4 !default; +$carbon--gray-20: #e0e0e0 !default; +$carbon--gray-30: #c6c6c6 !default; +$carbon--gray-40: #a8a8a8 !default; +$carbon--gray-50: #8d8d8d !default; +$carbon--gray-60: #6f6f6f !default; +$carbon--gray-70: #525252 !default; +$carbon--gray-80: #393939 !default; +$carbon--gray-90: #262626 !default; +$carbon--gray-100: #161616 !default; +$carbon--green-10: #defbe6 !default; +$carbon--green-20: #a7f0ba !default; +$carbon--green-30: #6fdc8c !default; +$carbon--green-40: #42be65 !default; +$carbon--green-50: #24a148 !default; +$carbon--green-60: #198038 !default; +$carbon--green-70: #0e6027 !default; +$carbon--green-80: #044317 !default; +$carbon--green-90: #022d0d !default; +$carbon--green-100: #071908 !default; +$carbon--magenta-10: #fff0f7 !default; +$carbon--magenta-20: #ffd6e8 !default; +$carbon--magenta-30: #ffafd2 !default; +$carbon--magenta-40: #ff7eb6 !default; +$carbon--magenta-50: #ee5396 !default; +$carbon--magenta-60: #d02670 !default; +$carbon--magenta-70: #9f1853 !default; +$carbon--magenta-80: #740937 !default; +$carbon--magenta-90: #510224 !default; +$carbon--magenta-100: #2a0a18 !default; +$carbon--orange-10: #fff2e8 !default; +$carbon--orange-20: #ffd9be !default; +$carbon--orange-30: #ffb784 !default; +$carbon--orange-40: #ff832b !default; +$carbon--orange-50: #eb6200 !default; +$carbon--orange-60: #ba4e00 !default; +$carbon--orange-70: #8a3800 !default; +$carbon--orange-80: #5e2900 !default; +$carbon--orange-90: #3e1a00 !default; +$carbon--orange-100: #231000 !default; +$carbon--purple-10: #f6f2ff !default; +$carbon--purple-20: #e8daff !default; +$carbon--purple-30: #d4bbff !default; +$carbon--purple-40: #be95ff !default; +$carbon--purple-50: #a56eff !default; +$carbon--purple-60: #8a3ffc !default; +$carbon--purple-70: #6929c4 !default; +$carbon--purple-80: #491d8b !default; +$carbon--purple-90: #31135e !default; +$carbon--purple-100: #1c0f30 !default; +$carbon--red-10: #fff1f1 !default; +$carbon--red-20: #ffd7d9 !default; +$carbon--red-30: #ffb3b8 !default; +$carbon--red-40: #ff8389 !default; +$carbon--red-50: #fa4d56 !default; +$carbon--red-60: #da1e28 !default; +$carbon--red-70: #a2191f !default; +$carbon--red-80: #750e13 !default; +$carbon--red-90: #520408 !default; +$carbon--red-100: #2d0709 !default; +$carbon--teal-10: #d9fbfb !default; +$carbon--teal-20: #9ef0f0 !default; +$carbon--teal-30: #3ddbd9 !default; +$carbon--teal-40: #08bdba !default; +$carbon--teal-50: #009d9a !default; +$carbon--teal-60: #007d79 !default; +$carbon--teal-70: #005d5d !default; +$carbon--teal-80: #004144 !default; +$carbon--teal-90: #022b30 !default; +$carbon--teal-100: #081a1c !default; +$carbon--warm-gray-10: #f7f3f2 !default; +$carbon--warm-gray-20: #e5e0df !default; +$carbon--warm-gray-30: #cac5c4 !default; +$carbon--warm-gray-40: #ada8a8 !default; +$carbon--warm-gray-50: #8f8b8b !default; +$carbon--warm-gray-60: #726e6e !default; +$carbon--warm-gray-70: #565151 !default; +$carbon--warm-gray-80: #3c3838 !default; +$carbon--warm-gray-90: #272525 !default; +$carbon--warm-gray-100: #171414 !default; +$carbon--white-0: #ffffff !default; +$carbon--yellow-10: #fcf4d6 !default; +$carbon--yellow-20: #fddc69 !default; +$carbon--yellow-30: #f1c21b !default; +$carbon--yellow-40: #d2a106 !default; +$carbon--yellow-50: #b28600 !default; +$carbon--yellow-60: #8e6a00 !default; +$carbon--yellow-70: #684e00 !default; +$carbon--yellow-80: #483700 !default; +$carbon--yellow-90: #302400 !default; +$carbon--yellow-100: #1c1500 !default; +$black-100: #000000 !default; +$blue-10: #edf5ff !default; +$blue-20: #d0e2ff !default; +$blue-30: #a6c8ff !default; +$blue-40: #78a9ff !default; +$blue-50: #4589ff !default; +$blue-60: #0f62fe !default; +$blue-70: #0043ce !default; +$blue-80: #002d9c !default; +$blue-90: #001d6c !default; +$blue-100: #001141 !default; +$cool-gray-10: #f2f4f8 !default; +$cool-gray-20: #dde1e6 !default; +$cool-gray-30: #c1c7cd !default; +$cool-gray-40: #a2a9b0 !default; +$cool-gray-50: #878d96 !default; +$cool-gray-60: #697077 !default; +$cool-gray-70: #4d5358 !default; +$cool-gray-80: #343a3f !default; +$cool-gray-90: #21272a !default; +$cool-gray-100: #121619 !default; +$cyan-10: #e5f6ff !default; +$cyan-20: #bae6ff !default; +$cyan-30: #82cfff !default; +$cyan-40: #33b1ff !default; +$cyan-50: #1192e8 !default; +$cyan-60: #0072c3 !default; +$cyan-70: #00539a !default; +$cyan-80: #003a6d !default; +$cyan-90: #012749 !default; +$cyan-100: #061727 !default; +$gray-10: #f4f4f4 !default; +$gray-20: #e0e0e0 !default; +$gray-30: #c6c6c6 !default; +$gray-40: #a8a8a8 !default; +$gray-50: #8d8d8d !default; +$gray-60: #6f6f6f !default; +$gray-70: #525252 !default; +$gray-80: #393939 !default; +$gray-90: #262626 !default; +$gray-100: #161616 !default; +$green-10: #defbe6 !default; +$green-20: #a7f0ba !default; +$green-30: #6fdc8c !default; +$green-40: #42be65 !default; +$green-50: #24a148 !default; +$green-60: #198038 !default; +$green-70: #0e6027 !default; +$green-80: #044317 !default; +$green-90: #022d0d !default; +$green-100: #071908 !default; +$magenta-10: #fff0f7 !default; +$magenta-20: #ffd6e8 !default; +$magenta-30: #ffafd2 !default; +$magenta-40: #ff7eb6 !default; +$magenta-50: #ee5396 !default; +$magenta-60: #d02670 !default; +$magenta-70: #9f1853 !default; +$magenta-80: #740937 !default; +$magenta-90: #510224 !default; +$magenta-100: #2a0a18 !default; +$orange-10: #fff2e8 !default; +$orange-20: #ffd9be !default; +$orange-30: #ffb784 !default; +$orange-40: #ff832b !default; +$orange-50: #eb6200 !default; +$orange-60: #ba4e00 !default; +$orange-70: #8a3800 !default; +$orange-80: #5e2900 !default; +$orange-90: #3e1a00 !default; +$orange-100: #231000 !default; +$purple-10: #f6f2ff !default; +$purple-20: #e8daff !default; +$purple-30: #d4bbff !default; +$purple-40: #be95ff !default; +$purple-50: #a56eff !default; +$purple-60: #8a3ffc !default; +$purple-70: #6929c4 !default; +$purple-80: #491d8b !default; +$purple-90: #31135e !default; +$purple-100: #1c0f30 !default; +$red-10: #fff1f1 !default; +$red-20: #ffd7d9 !default; +$red-30: #ffb3b8 !default; +$red-40: #ff8389 !default; +$red-50: #fa4d56 !default; +$red-60: #da1e28 !default; +$red-70: #a2191f !default; +$red-80: #750e13 !default; +$red-90: #520408 !default; +$red-100: #2d0709 !default; +$teal-10: #d9fbfb !default; +$teal-20: #9ef0f0 !default; +$teal-30: #3ddbd9 !default; +$teal-40: #08bdba !default; +$teal-50: #009d9a !default; +$teal-60: #007d79 !default; +$teal-70: #005d5d !default; +$teal-80: #004144 !default; +$teal-90: #022b30 !default; +$teal-100: #081a1c !default; +$warm-gray-10: #f7f3f2 !default; +$warm-gray-20: #e5e0df !default; +$warm-gray-30: #cac5c4 !default; +$warm-gray-40: #ada8a8 !default; +$warm-gray-50: #8f8b8b !default; +$warm-gray-60: #726e6e !default; +$warm-gray-70: #565151 !default; +$warm-gray-80: #3c3838 !default; +$warm-gray-90: #272525 !default; +$warm-gray-100: #171414 !default; +$white-0: #ffffff !default; +$yellow-10: #fcf4d6 !default; +$yellow-20: #fddc69 !default; +$yellow-30: #f1c21b !default; +$yellow-40: #d2a106 !default; +$yellow-50: #b28600 !default; +$yellow-60: #8e6a00 !default; +$yellow-70: #684e00 !default; +$yellow-80: #483700 !default; +$yellow-90: #302400 !default; +$yellow-100: #1c1500 !default; +$white-hover: #e8e8e8 !default; +$black-hover: #212121 !default; +$blue-10-hover: #dbebff !default; +$blue-20-hover: #b8d3ff !default; +$blue-30-hover: #8ab6ff !default; +$blue-40-hover: #5c97ff !default; +$blue-50-hover: #1f70ff !default; +$blue-60-hover: #0050e6 !default; +$blue-70-hover: #0053ff !default; +$blue-80-hover: #0039c7 !default; +$blue-90-hover: #00258a !default; +$blue-100-hover: #001f75 !default; +$cool-gray-10-hover: #e4e9f1 !default; +$cool-gray-20-hover: #cdd3da !default; +$cool-gray-30-hover: #adb5bd !default; +$cool-gray-40-hover: #9199a1 !default; +$cool-gray-50-hover: #757b85 !default; +$cool-gray-60-hover: #585e64 !default; +$cool-gray-70-hover: #5d646a !default; +$cool-gray-80-hover: #434a51 !default; +$cool-gray-90-hover: #2b3236 !default; +$cool-gray-100-hover: #222a2f !default; +$cyan-10-hover: #cceeff !default; +$cyan-20-hover: #99daff !default; +$cyan-30-hover: #57beff !default; +$cyan-40-hover: #059fff !default; +$cyan-50-hover: #0f7ec8 !default; +$cyan-60-hover: #005fa3 !default; +$cyan-70-hover: #0066bd !default; +$cyan-80-hover: #00498a !default; +$cyan-90-hover: #013360 !default; +$cyan-100-hover: #0b2947 !default; +$gray-10-hover: #e8e8e8 !default; +$gray-20-hover: #d1d1d1 !default; +$gray-30-hover: #b5b5b5 !default; +$gray-40-hover: #999999 !default; +$gray-50-hover: #7a7a7a !default; +$gray-60-hover: #5e5e5e !default; +$gray-70-hover: #636363 !default; +$gray-80-hover: #474747 !default; +$gray-90-hover: #333333 !default; +$gray-100-hover: #292929 !default; +$green-10-hover: #b6f6c8 !default; +$green-20-hover: #74e792 !default; +$green-30-hover: #36ce5e !default; +$green-40-hover: #3bab5a !default; +$green-50-hover: #208e3f !default; +$green-60-hover: #166f31 !default; +$green-70-hover: #11742f !default; +$green-80-hover: #05521c !default; +$green-90-hover: #033b11 !default; +$green-100-hover: #0d300f !default; +$magenta-10-hover: #ffe0ef !default; +$magenta-20-hover: #ffbdda !default; +$magenta-30-hover: #ff94c3 !default; +$magenta-40-hover: #ff57a0 !default; +$magenta-50-hover: #e3176f !default; +$magenta-60-hover: #b0215f !default; +$magenta-70-hover: #bf1d63 !default; +$magenta-80-hover: #8e0b43 !default; +$magenta-90-hover: #68032e !default; +$magenta-100-hover: #53142f !default; +$orange-10-hover: #ffe2cc !default; +$orange-20-hover: #ffc69e !default; +$orange-30-hover: #ff9d57 !default; +$orange-40-hover: #fa6800 !default; +$orange-50-hover: #cc5500 !default; +$orange-60-hover: #9e4200 !default; +$orange-70-hover: #a84400 !default; +$orange-80-hover: #753300 !default; +$orange-90-hover: #522200 !default; +$orange-100-hover: #421e00 !default; +$purple-10-hover: #ede5ff !default; +$purple-20-hover: #dcc7ff !default; +$purple-30-hover: #c5a3ff !default; +$purple-40-hover: #ae7aff !default; +$purple-50-hover: #9352ff !default; +$purple-60-hover: #7822fb !default; +$purple-70-hover: #7c3dd6 !default; +$purple-80-hover: #5b24ad !default; +$purple-90-hover: #40197b !default; +$purple-100-hover: #341c59 !default; +$red-10-hover: #ffe0e0 !default; +$red-20-hover: #ffc2c5 !default; +$red-30-hover: #ff99a0 !default; +$red-40-hover: #ff6168 !default; +$red-50-hover: #ee0713 !default; +$red-60-hover: #b81922 !default; +$red-70-hover: #c21e25 !default; +$red-80-hover: #921118 !default; +$red-90-hover: #66050a !default; +$red-100-hover: #540d11 !default; +$teal-10-hover: #acf6f6 !default; +$teal-20-hover: #57e5e5 !default; +$teal-30-hover: #25cac8 !default; +$teal-40-hover: #07aba9 !default; +$teal-50-hover: #008a87 !default; +$teal-60-hover: #006b68 !default; +$teal-70-hover: #007070 !default; +$teal-80-hover: #005357 !default; +$teal-90-hover: #033940 !default; +$teal-100-hover: #0f3034 !default; +$warm-gray-10-hover: #f0e8e6 !default; +$warm-gray-20-hover: #d8d0cf !default; +$warm-gray-30-hover: #b9b3b1 !default; +$warm-gray-40-hover: #9c9696 !default; +$warm-gray-50-hover: #7f7b7b !default; +$warm-gray-60-hover: #605d5d !default; +$warm-gray-70-hover: #696363 !default; +$warm-gray-80-hover: #4c4848 !default; +$warm-gray-90-hover: #343232 !default; +$warm-gray-100-hover: #2c2626 !default; +$yellow-10-hover: #f8e6a0 !default; +$yellow-20-hover: #fccd27 !default; +$yellow-30-hover: #ddb00e !default; +$yellow-40-hover: #bc9005 !default; +$yellow-50-hover: #9e7700 !default; +$yellow-60-hover: #755800 !default; +$yellow-70-hover: #806000 !default; +$yellow-80-hover: #5c4600 !default; +$yellow-90-hover: #3d2e00 !default; +$yellow-100-hover: #332600 !default; +$ibm-color-map: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), +) !default; +$carbon--colors: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), +) !default; + +/// Define color variables +/// @access public +/// @group @carbon/colors +/// @deprecated Use `$carbon--colors` going forward +@mixin ibm--colors() { + $ibm-color__black-100: #000000 !global; + $ibm-color__blue-10: #edf5ff !global; + $ibm-color__blue-20: #d0e2ff !global; + $ibm-color__blue-30: #a6c8ff !global; + $ibm-color__blue-40: #78a9ff !global; + $ibm-color__blue-50: #4589ff !global; + $ibm-color__blue-60: #0f62fe !global; + $ibm-color__blue-70: #0043ce !global; + $ibm-color__blue-80: #002d9c !global; + $ibm-color__blue-90: #001d6c !global; + $ibm-color__blue-100: #001141 !global; + $ibm-color__cool-gray-10: #f2f4f8 !global; + $ibm-color__cool-gray-20: #dde1e6 !global; + $ibm-color__cool-gray-30: #c1c7cd !global; + $ibm-color__cool-gray-40: #a2a9b0 !global; + $ibm-color__cool-gray-50: #878d96 !global; + $ibm-color__cool-gray-60: #697077 !global; + $ibm-color__cool-gray-70: #4d5358 !global; + $ibm-color__cool-gray-80: #343a3f !global; + $ibm-color__cool-gray-90: #21272a !global; + $ibm-color__cool-gray-100: #121619 !global; + $ibm-color__cyan-10: #e5f6ff !global; + $ibm-color__cyan-20: #bae6ff !global; + $ibm-color__cyan-30: #82cfff !global; + $ibm-color__cyan-40: #33b1ff !global; + $ibm-color__cyan-50: #1192e8 !global; + $ibm-color__cyan-60: #0072c3 !global; + $ibm-color__cyan-70: #00539a !global; + $ibm-color__cyan-80: #003a6d !global; + $ibm-color__cyan-90: #012749 !global; + $ibm-color__cyan-100: #061727 !global; + $ibm-color__gray-10: #f4f4f4 !global; + $ibm-color__gray-20: #e0e0e0 !global; + $ibm-color__gray-30: #c6c6c6 !global; + $ibm-color__gray-40: #a8a8a8 !global; + $ibm-color__gray-50: #8d8d8d !global; + $ibm-color__gray-60: #6f6f6f !global; + $ibm-color__gray-70: #525252 !global; + $ibm-color__gray-80: #393939 !global; + $ibm-color__gray-90: #262626 !global; + $ibm-color__gray-100: #161616 !global; + $ibm-color__green-10: #defbe6 !global; + $ibm-color__green-20: #a7f0ba !global; + $ibm-color__green-30: #6fdc8c !global; + $ibm-color__green-40: #42be65 !global; + $ibm-color__green-50: #24a148 !global; + $ibm-color__green-60: #198038 !global; + $ibm-color__green-70: #0e6027 !global; + $ibm-color__green-80: #044317 !global; + $ibm-color__green-90: #022d0d !global; + $ibm-color__green-100: #071908 !global; + $ibm-color__magenta-10: #fff0f7 !global; + $ibm-color__magenta-20: #ffd6e8 !global; + $ibm-color__magenta-30: #ffafd2 !global; + $ibm-color__magenta-40: #ff7eb6 !global; + $ibm-color__magenta-50: #ee5396 !global; + $ibm-color__magenta-60: #d02670 !global; + $ibm-color__magenta-70: #9f1853 !global; + $ibm-color__magenta-80: #740937 !global; + $ibm-color__magenta-90: #510224 !global; + $ibm-color__magenta-100: #2a0a18 !global; + $ibm-color__orange-10: #fff2e8 !global; + $ibm-color__orange-20: #ffd9be !global; + $ibm-color__orange-30: #ffb784 !global; + $ibm-color__orange-40: #ff832b !global; + $ibm-color__orange-50: #eb6200 !global; + $ibm-color__orange-60: #ba4e00 !global; + $ibm-color__orange-70: #8a3800 !global; + $ibm-color__orange-80: #5e2900 !global; + $ibm-color__orange-90: #3e1a00 !global; + $ibm-color__orange-100: #231000 !global; + $ibm-color__purple-10: #f6f2ff !global; + $ibm-color__purple-20: #e8daff !global; + $ibm-color__purple-30: #d4bbff !global; + $ibm-color__purple-40: #be95ff !global; + $ibm-color__purple-50: #a56eff !global; + $ibm-color__purple-60: #8a3ffc !global; + $ibm-color__purple-70: #6929c4 !global; + $ibm-color__purple-80: #491d8b !global; + $ibm-color__purple-90: #31135e !global; + $ibm-color__purple-100: #1c0f30 !global; + $ibm-color__red-10: #fff1f1 !global; + $ibm-color__red-20: #ffd7d9 !global; + $ibm-color__red-30: #ffb3b8 !global; + $ibm-color__red-40: #ff8389 !global; + $ibm-color__red-50: #fa4d56 !global; + $ibm-color__red-60: #da1e28 !global; + $ibm-color__red-70: #a2191f !global; + $ibm-color__red-80: #750e13 !global; + $ibm-color__red-90: #520408 !global; + $ibm-color__red-100: #2d0709 !global; + $ibm-color__teal-10: #d9fbfb !global; + $ibm-color__teal-20: #9ef0f0 !global; + $ibm-color__teal-30: #3ddbd9 !global; + $ibm-color__teal-40: #08bdba !global; + $ibm-color__teal-50: #009d9a !global; + $ibm-color__teal-60: #007d79 !global; + $ibm-color__teal-70: #005d5d !global; + $ibm-color__teal-80: #004144 !global; + $ibm-color__teal-90: #022b30 !global; + $ibm-color__teal-100: #081a1c !global; + $ibm-color__warm-gray-10: #f7f3f2 !global; + $ibm-color__warm-gray-20: #e5e0df !global; + $ibm-color__warm-gray-30: #cac5c4 !global; + $ibm-color__warm-gray-40: #ada8a8 !global; + $ibm-color__warm-gray-50: #8f8b8b !global; + $ibm-color__warm-gray-60: #726e6e !global; + $ibm-color__warm-gray-70: #565151 !global; + $ibm-color__warm-gray-80: #3c3838 !global; + $ibm-color__warm-gray-90: #272525 !global; + $ibm-color__warm-gray-100: #171414 !global; + $ibm-color__white-0: #ffffff !global; + $ibm-color__yellow-10: #fcf4d6 !global; + $ibm-color__yellow-20: #fddc69 !global; + $ibm-color__yellow-30: #f1c21b !global; + $ibm-color__yellow-40: #d2a106 !global; + $ibm-color__yellow-50: #b28600 !global; + $ibm-color__yellow-60: #8e6a00 !global; + $ibm-color__yellow-70: #684e00 !global; + $ibm-color__yellow-80: #483700 !global; + $ibm-color__yellow-90: #302400 !global; + $ibm-color__yellow-100: #1c1500 !global; + $ibm-color-map: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), + ) !global; +} + +/// Define color variables +/// @access public +/// @group @carbon/colors +@mixin carbon--colors() { + $carbon--black-100: #000000 !global; + $carbon--blue-10: #edf5ff !global; + $carbon--blue-20: #d0e2ff !global; + $carbon--blue-30: #a6c8ff !global; + $carbon--blue-40: #78a9ff !global; + $carbon--blue-50: #4589ff !global; + $carbon--blue-60: #0f62fe !global; + $carbon--blue-70: #0043ce !global; + $carbon--blue-80: #002d9c !global; + $carbon--blue-90: #001d6c !global; + $carbon--blue-100: #001141 !global; + $carbon--cool-gray-10: #f2f4f8 !global; + $carbon--cool-gray-20: #dde1e6 !global; + $carbon--cool-gray-30: #c1c7cd !global; + $carbon--cool-gray-40: #a2a9b0 !global; + $carbon--cool-gray-50: #878d96 !global; + $carbon--cool-gray-60: #697077 !global; + $carbon--cool-gray-70: #4d5358 !global; + $carbon--cool-gray-80: #343a3f !global; + $carbon--cool-gray-90: #21272a !global; + $carbon--cool-gray-100: #121619 !global; + $carbon--cyan-10: #e5f6ff !global; + $carbon--cyan-20: #bae6ff !global; + $carbon--cyan-30: #82cfff !global; + $carbon--cyan-40: #33b1ff !global; + $carbon--cyan-50: #1192e8 !global; + $carbon--cyan-60: #0072c3 !global; + $carbon--cyan-70: #00539a !global; + $carbon--cyan-80: #003a6d !global; + $carbon--cyan-90: #012749 !global; + $carbon--cyan-100: #061727 !global; + $carbon--gray-10: #f4f4f4 !global; + $carbon--gray-20: #e0e0e0 !global; + $carbon--gray-30: #c6c6c6 !global; + $carbon--gray-40: #a8a8a8 !global; + $carbon--gray-50: #8d8d8d !global; + $carbon--gray-60: #6f6f6f !global; + $carbon--gray-70: #525252 !global; + $carbon--gray-80: #393939 !global; + $carbon--gray-90: #262626 !global; + $carbon--gray-100: #161616 !global; + $carbon--green-10: #defbe6 !global; + $carbon--green-20: #a7f0ba !global; + $carbon--green-30: #6fdc8c !global; + $carbon--green-40: #42be65 !global; + $carbon--green-50: #24a148 !global; + $carbon--green-60: #198038 !global; + $carbon--green-70: #0e6027 !global; + $carbon--green-80: #044317 !global; + $carbon--green-90: #022d0d !global; + $carbon--green-100: #071908 !global; + $carbon--magenta-10: #fff0f7 !global; + $carbon--magenta-20: #ffd6e8 !global; + $carbon--magenta-30: #ffafd2 !global; + $carbon--magenta-40: #ff7eb6 !global; + $carbon--magenta-50: #ee5396 !global; + $carbon--magenta-60: #d02670 !global; + $carbon--magenta-70: #9f1853 !global; + $carbon--magenta-80: #740937 !global; + $carbon--magenta-90: #510224 !global; + $carbon--magenta-100: #2a0a18 !global; + $carbon--orange-10: #fff2e8 !global; + $carbon--orange-20: #ffd9be !global; + $carbon--orange-30: #ffb784 !global; + $carbon--orange-40: #ff832b !global; + $carbon--orange-50: #eb6200 !global; + $carbon--orange-60: #ba4e00 !global; + $carbon--orange-70: #8a3800 !global; + $carbon--orange-80: #5e2900 !global; + $carbon--orange-90: #3e1a00 !global; + $carbon--orange-100: #231000 !global; + $carbon--purple-10: #f6f2ff !global; + $carbon--purple-20: #e8daff !global; + $carbon--purple-30: #d4bbff !global; + $carbon--purple-40: #be95ff !global; + $carbon--purple-50: #a56eff !global; + $carbon--purple-60: #8a3ffc !global; + $carbon--purple-70: #6929c4 !global; + $carbon--purple-80: #491d8b !global; + $carbon--purple-90: #31135e !global; + $carbon--purple-100: #1c0f30 !global; + $carbon--red-10: #fff1f1 !global; + $carbon--red-20: #ffd7d9 !global; + $carbon--red-30: #ffb3b8 !global; + $carbon--red-40: #ff8389 !global; + $carbon--red-50: #fa4d56 !global; + $carbon--red-60: #da1e28 !global; + $carbon--red-70: #a2191f !global; + $carbon--red-80: #750e13 !global; + $carbon--red-90: #520408 !global; + $carbon--red-100: #2d0709 !global; + $carbon--teal-10: #d9fbfb !global; + $carbon--teal-20: #9ef0f0 !global; + $carbon--teal-30: #3ddbd9 !global; + $carbon--teal-40: #08bdba !global; + $carbon--teal-50: #009d9a !global; + $carbon--teal-60: #007d79 !global; + $carbon--teal-70: #005d5d !global; + $carbon--teal-80: #004144 !global; + $carbon--teal-90: #022b30 !global; + $carbon--teal-100: #081a1c !global; + $carbon--warm-gray-10: #f7f3f2 !global; + $carbon--warm-gray-20: #e5e0df !global; + $carbon--warm-gray-30: #cac5c4 !global; + $carbon--warm-gray-40: #ada8a8 !global; + $carbon--warm-gray-50: #8f8b8b !global; + $carbon--warm-gray-60: #726e6e !global; + $carbon--warm-gray-70: #565151 !global; + $carbon--warm-gray-80: #3c3838 !global; + $carbon--warm-gray-90: #272525 !global; + $carbon--warm-gray-100: #171414 !global; + $carbon--white-0: #ffffff !global; + $carbon--yellow-10: #fcf4d6 !global; + $carbon--yellow-20: #fddc69 !global; + $carbon--yellow-30: #f1c21b !global; + $carbon--yellow-40: #d2a106 !global; + $carbon--yellow-50: #b28600 !global; + $carbon--yellow-60: #8e6a00 !global; + $carbon--yellow-70: #684e00 !global; + $carbon--yellow-80: #483700 !global; + $carbon--yellow-90: #302400 !global; + $carbon--yellow-100: #1c1500 !global; + $carbon--colors: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), + ) !global; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss new file mode 100644 index 000000000000..3a24b50ab44a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/colors.scss @@ -0,0 +1,12 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@import './mixins'; +// Deprecated ☠️ +@include ibm--colors(); +// Preferred +@include carbon--colors(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/index.scss new file mode 100644 index 000000000000..3a24b50ab44a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/index.scss @@ -0,0 +1,12 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@import './mixins'; +// Deprecated ☠️ +@include ibm--colors(); +// Preferred +@include carbon--colors(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss new file mode 100644 index 000000000000..c0e034e014d3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/colors/mixins.scss @@ -0,0 +1,1456 @@ +// Code generated by @carbon/colors. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +$ibm-color__black-100: #000000 !default; +$ibm-color__blue-10: #edf5ff !default; +$ibm-color__blue-20: #d0e2ff !default; +$ibm-color__blue-30: #a6c8ff !default; +$ibm-color__blue-40: #78a9ff !default; +$ibm-color__blue-50: #4589ff !default; +$ibm-color__blue-60: #0f62fe !default; +$ibm-color__blue-70: #0043ce !default; +$ibm-color__blue-80: #002d9c !default; +$ibm-color__blue-90: #001d6c !default; +$ibm-color__blue-100: #001141 !default; +$ibm-color__cool-gray-10: #f2f4f8 !default; +$ibm-color__cool-gray-20: #dde1e6 !default; +$ibm-color__cool-gray-30: #c1c7cd !default; +$ibm-color__cool-gray-40: #a2a9b0 !default; +$ibm-color__cool-gray-50: #878d96 !default; +$ibm-color__cool-gray-60: #697077 !default; +$ibm-color__cool-gray-70: #4d5358 !default; +$ibm-color__cool-gray-80: #343a3f !default; +$ibm-color__cool-gray-90: #21272a !default; +$ibm-color__cool-gray-100: #121619 !default; +$ibm-color__cyan-10: #e5f6ff !default; +$ibm-color__cyan-20: #bae6ff !default; +$ibm-color__cyan-30: #82cfff !default; +$ibm-color__cyan-40: #33b1ff !default; +$ibm-color__cyan-50: #1192e8 !default; +$ibm-color__cyan-60: #0072c3 !default; +$ibm-color__cyan-70: #00539a !default; +$ibm-color__cyan-80: #003a6d !default; +$ibm-color__cyan-90: #012749 !default; +$ibm-color__cyan-100: #061727 !default; +$ibm-color__gray-10: #f4f4f4 !default; +$ibm-color__gray-20: #e0e0e0 !default; +$ibm-color__gray-30: #c6c6c6 !default; +$ibm-color__gray-40: #a8a8a8 !default; +$ibm-color__gray-50: #8d8d8d !default; +$ibm-color__gray-60: #6f6f6f !default; +$ibm-color__gray-70: #525252 !default; +$ibm-color__gray-80: #393939 !default; +$ibm-color__gray-90: #262626 !default; +$ibm-color__gray-100: #161616 !default; +$ibm-color__green-10: #defbe6 !default; +$ibm-color__green-20: #a7f0ba !default; +$ibm-color__green-30: #6fdc8c !default; +$ibm-color__green-40: #42be65 !default; +$ibm-color__green-50: #24a148 !default; +$ibm-color__green-60: #198038 !default; +$ibm-color__green-70: #0e6027 !default; +$ibm-color__green-80: #044317 !default; +$ibm-color__green-90: #022d0d !default; +$ibm-color__green-100: #071908 !default; +$ibm-color__magenta-10: #fff0f7 !default; +$ibm-color__magenta-20: #ffd6e8 !default; +$ibm-color__magenta-30: #ffafd2 !default; +$ibm-color__magenta-40: #ff7eb6 !default; +$ibm-color__magenta-50: #ee5396 !default; +$ibm-color__magenta-60: #d02670 !default; +$ibm-color__magenta-70: #9f1853 !default; +$ibm-color__magenta-80: #740937 !default; +$ibm-color__magenta-90: #510224 !default; +$ibm-color__magenta-100: #2a0a18 !default; +$ibm-color__orange-10: #fff2e8 !default; +$ibm-color__orange-20: #ffd9be !default; +$ibm-color__orange-30: #ffb784 !default; +$ibm-color__orange-40: #ff832b !default; +$ibm-color__orange-50: #eb6200 !default; +$ibm-color__orange-60: #ba4e00 !default; +$ibm-color__orange-70: #8a3800 !default; +$ibm-color__orange-80: #5e2900 !default; +$ibm-color__orange-90: #3e1a00 !default; +$ibm-color__orange-100: #231000 !default; +$ibm-color__purple-10: #f6f2ff !default; +$ibm-color__purple-20: #e8daff !default; +$ibm-color__purple-30: #d4bbff !default; +$ibm-color__purple-40: #be95ff !default; +$ibm-color__purple-50: #a56eff !default; +$ibm-color__purple-60: #8a3ffc !default; +$ibm-color__purple-70: #6929c4 !default; +$ibm-color__purple-80: #491d8b !default; +$ibm-color__purple-90: #31135e !default; +$ibm-color__purple-100: #1c0f30 !default; +$ibm-color__red-10: #fff1f1 !default; +$ibm-color__red-20: #ffd7d9 !default; +$ibm-color__red-30: #ffb3b8 !default; +$ibm-color__red-40: #ff8389 !default; +$ibm-color__red-50: #fa4d56 !default; +$ibm-color__red-60: #da1e28 !default; +$ibm-color__red-70: #a2191f !default; +$ibm-color__red-80: #750e13 !default; +$ibm-color__red-90: #520408 !default; +$ibm-color__red-100: #2d0709 !default; +$ibm-color__teal-10: #d9fbfb !default; +$ibm-color__teal-20: #9ef0f0 !default; +$ibm-color__teal-30: #3ddbd9 !default; +$ibm-color__teal-40: #08bdba !default; +$ibm-color__teal-50: #009d9a !default; +$ibm-color__teal-60: #007d79 !default; +$ibm-color__teal-70: #005d5d !default; +$ibm-color__teal-80: #004144 !default; +$ibm-color__teal-90: #022b30 !default; +$ibm-color__teal-100: #081a1c !default; +$ibm-color__warm-gray-10: #f7f3f2 !default; +$ibm-color__warm-gray-20: #e5e0df !default; +$ibm-color__warm-gray-30: #cac5c4 !default; +$ibm-color__warm-gray-40: #ada8a8 !default; +$ibm-color__warm-gray-50: #8f8b8b !default; +$ibm-color__warm-gray-60: #726e6e !default; +$ibm-color__warm-gray-70: #565151 !default; +$ibm-color__warm-gray-80: #3c3838 !default; +$ibm-color__warm-gray-90: #272525 !default; +$ibm-color__warm-gray-100: #171414 !default; +$ibm-color__white-0: #ffffff !default; +$ibm-color__yellow-10: #fcf4d6 !default; +$ibm-color__yellow-20: #fddc69 !default; +$ibm-color__yellow-30: #f1c21b !default; +$ibm-color__yellow-40: #d2a106 !default; +$ibm-color__yellow-50: #b28600 !default; +$ibm-color__yellow-60: #8e6a00 !default; +$ibm-color__yellow-70: #684e00 !default; +$ibm-color__yellow-80: #483700 !default; +$ibm-color__yellow-90: #302400 !default; +$ibm-color__yellow-100: #1c1500 !default; +$carbon--black-100: #000000 !default; +$carbon--blue-10: #edf5ff !default; +$carbon--blue-20: #d0e2ff !default; +$carbon--blue-30: #a6c8ff !default; +$carbon--blue-40: #78a9ff !default; +$carbon--blue-50: #4589ff !default; +$carbon--blue-60: #0f62fe !default; +$carbon--blue-70: #0043ce !default; +$carbon--blue-80: #002d9c !default; +$carbon--blue-90: #001d6c !default; +$carbon--blue-100: #001141 !default; +$carbon--cool-gray-10: #f2f4f8 !default; +$carbon--cool-gray-20: #dde1e6 !default; +$carbon--cool-gray-30: #c1c7cd !default; +$carbon--cool-gray-40: #a2a9b0 !default; +$carbon--cool-gray-50: #878d96 !default; +$carbon--cool-gray-60: #697077 !default; +$carbon--cool-gray-70: #4d5358 !default; +$carbon--cool-gray-80: #343a3f !default; +$carbon--cool-gray-90: #21272a !default; +$carbon--cool-gray-100: #121619 !default; +$carbon--cyan-10: #e5f6ff !default; +$carbon--cyan-20: #bae6ff !default; +$carbon--cyan-30: #82cfff !default; +$carbon--cyan-40: #33b1ff !default; +$carbon--cyan-50: #1192e8 !default; +$carbon--cyan-60: #0072c3 !default; +$carbon--cyan-70: #00539a !default; +$carbon--cyan-80: #003a6d !default; +$carbon--cyan-90: #012749 !default; +$carbon--cyan-100: #061727 !default; +$carbon--gray-10: #f4f4f4 !default; +$carbon--gray-20: #e0e0e0 !default; +$carbon--gray-30: #c6c6c6 !default; +$carbon--gray-40: #a8a8a8 !default; +$carbon--gray-50: #8d8d8d !default; +$carbon--gray-60: #6f6f6f !default; +$carbon--gray-70: #525252 !default; +$carbon--gray-80: #393939 !default; +$carbon--gray-90: #262626 !default; +$carbon--gray-100: #161616 !default; +$carbon--green-10: #defbe6 !default; +$carbon--green-20: #a7f0ba !default; +$carbon--green-30: #6fdc8c !default; +$carbon--green-40: #42be65 !default; +$carbon--green-50: #24a148 !default; +$carbon--green-60: #198038 !default; +$carbon--green-70: #0e6027 !default; +$carbon--green-80: #044317 !default; +$carbon--green-90: #022d0d !default; +$carbon--green-100: #071908 !default; +$carbon--magenta-10: #fff0f7 !default; +$carbon--magenta-20: #ffd6e8 !default; +$carbon--magenta-30: #ffafd2 !default; +$carbon--magenta-40: #ff7eb6 !default; +$carbon--magenta-50: #ee5396 !default; +$carbon--magenta-60: #d02670 !default; +$carbon--magenta-70: #9f1853 !default; +$carbon--magenta-80: #740937 !default; +$carbon--magenta-90: #510224 !default; +$carbon--magenta-100: #2a0a18 !default; +$carbon--orange-10: #fff2e8 !default; +$carbon--orange-20: #ffd9be !default; +$carbon--orange-30: #ffb784 !default; +$carbon--orange-40: #ff832b !default; +$carbon--orange-50: #eb6200 !default; +$carbon--orange-60: #ba4e00 !default; +$carbon--orange-70: #8a3800 !default; +$carbon--orange-80: #5e2900 !default; +$carbon--orange-90: #3e1a00 !default; +$carbon--orange-100: #231000 !default; +$carbon--purple-10: #f6f2ff !default; +$carbon--purple-20: #e8daff !default; +$carbon--purple-30: #d4bbff !default; +$carbon--purple-40: #be95ff !default; +$carbon--purple-50: #a56eff !default; +$carbon--purple-60: #8a3ffc !default; +$carbon--purple-70: #6929c4 !default; +$carbon--purple-80: #491d8b !default; +$carbon--purple-90: #31135e !default; +$carbon--purple-100: #1c0f30 !default; +$carbon--red-10: #fff1f1 !default; +$carbon--red-20: #ffd7d9 !default; +$carbon--red-30: #ffb3b8 !default; +$carbon--red-40: #ff8389 !default; +$carbon--red-50: #fa4d56 !default; +$carbon--red-60: #da1e28 !default; +$carbon--red-70: #a2191f !default; +$carbon--red-80: #750e13 !default; +$carbon--red-90: #520408 !default; +$carbon--red-100: #2d0709 !default; +$carbon--teal-10: #d9fbfb !default; +$carbon--teal-20: #9ef0f0 !default; +$carbon--teal-30: #3ddbd9 !default; +$carbon--teal-40: #08bdba !default; +$carbon--teal-50: #009d9a !default; +$carbon--teal-60: #007d79 !default; +$carbon--teal-70: #005d5d !default; +$carbon--teal-80: #004144 !default; +$carbon--teal-90: #022b30 !default; +$carbon--teal-100: #081a1c !default; +$carbon--warm-gray-10: #f7f3f2 !default; +$carbon--warm-gray-20: #e5e0df !default; +$carbon--warm-gray-30: #cac5c4 !default; +$carbon--warm-gray-40: #ada8a8 !default; +$carbon--warm-gray-50: #8f8b8b !default; +$carbon--warm-gray-60: #726e6e !default; +$carbon--warm-gray-70: #565151 !default; +$carbon--warm-gray-80: #3c3838 !default; +$carbon--warm-gray-90: #272525 !default; +$carbon--warm-gray-100: #171414 !default; +$carbon--white-0: #ffffff !default; +$carbon--yellow-10: #fcf4d6 !default; +$carbon--yellow-20: #fddc69 !default; +$carbon--yellow-30: #f1c21b !default; +$carbon--yellow-40: #d2a106 !default; +$carbon--yellow-50: #b28600 !default; +$carbon--yellow-60: #8e6a00 !default; +$carbon--yellow-70: #684e00 !default; +$carbon--yellow-80: #483700 !default; +$carbon--yellow-90: #302400 !default; +$carbon--yellow-100: #1c1500 !default; +$black-100: #000000 !default; +$blue-10: #edf5ff !default; +$blue-20: #d0e2ff !default; +$blue-30: #a6c8ff !default; +$blue-40: #78a9ff !default; +$blue-50: #4589ff !default; +$blue-60: #0f62fe !default; +$blue-70: #0043ce !default; +$blue-80: #002d9c !default; +$blue-90: #001d6c !default; +$blue-100: #001141 !default; +$cool-gray-10: #f2f4f8 !default; +$cool-gray-20: #dde1e6 !default; +$cool-gray-30: #c1c7cd !default; +$cool-gray-40: #a2a9b0 !default; +$cool-gray-50: #878d96 !default; +$cool-gray-60: #697077 !default; +$cool-gray-70: #4d5358 !default; +$cool-gray-80: #343a3f !default; +$cool-gray-90: #21272a !default; +$cool-gray-100: #121619 !default; +$cyan-10: #e5f6ff !default; +$cyan-20: #bae6ff !default; +$cyan-30: #82cfff !default; +$cyan-40: #33b1ff !default; +$cyan-50: #1192e8 !default; +$cyan-60: #0072c3 !default; +$cyan-70: #00539a !default; +$cyan-80: #003a6d !default; +$cyan-90: #012749 !default; +$cyan-100: #061727 !default; +$gray-10: #f4f4f4 !default; +$gray-20: #e0e0e0 !default; +$gray-30: #c6c6c6 !default; +$gray-40: #a8a8a8 !default; +$gray-50: #8d8d8d !default; +$gray-60: #6f6f6f !default; +$gray-70: #525252 !default; +$gray-80: #393939 !default; +$gray-90: #262626 !default; +$gray-100: #161616 !default; +$green-10: #defbe6 !default; +$green-20: #a7f0ba !default; +$green-30: #6fdc8c !default; +$green-40: #42be65 !default; +$green-50: #24a148 !default; +$green-60: #198038 !default; +$green-70: #0e6027 !default; +$green-80: #044317 !default; +$green-90: #022d0d !default; +$green-100: #071908 !default; +$magenta-10: #fff0f7 !default; +$magenta-20: #ffd6e8 !default; +$magenta-30: #ffafd2 !default; +$magenta-40: #ff7eb6 !default; +$magenta-50: #ee5396 !default; +$magenta-60: #d02670 !default; +$magenta-70: #9f1853 !default; +$magenta-80: #740937 !default; +$magenta-90: #510224 !default; +$magenta-100: #2a0a18 !default; +$orange-10: #fff2e8 !default; +$orange-20: #ffd9be !default; +$orange-30: #ffb784 !default; +$orange-40: #ff832b !default; +$orange-50: #eb6200 !default; +$orange-60: #ba4e00 !default; +$orange-70: #8a3800 !default; +$orange-80: #5e2900 !default; +$orange-90: #3e1a00 !default; +$orange-100: #231000 !default; +$purple-10: #f6f2ff !default; +$purple-20: #e8daff !default; +$purple-30: #d4bbff !default; +$purple-40: #be95ff !default; +$purple-50: #a56eff !default; +$purple-60: #8a3ffc !default; +$purple-70: #6929c4 !default; +$purple-80: #491d8b !default; +$purple-90: #31135e !default; +$purple-100: #1c0f30 !default; +$red-10: #fff1f1 !default; +$red-20: #ffd7d9 !default; +$red-30: #ffb3b8 !default; +$red-40: #ff8389 !default; +$red-50: #fa4d56 !default; +$red-60: #da1e28 !default; +$red-70: #a2191f !default; +$red-80: #750e13 !default; +$red-90: #520408 !default; +$red-100: #2d0709 !default; +$teal-10: #d9fbfb !default; +$teal-20: #9ef0f0 !default; +$teal-30: #3ddbd9 !default; +$teal-40: #08bdba !default; +$teal-50: #009d9a !default; +$teal-60: #007d79 !default; +$teal-70: #005d5d !default; +$teal-80: #004144 !default; +$teal-90: #022b30 !default; +$teal-100: #081a1c !default; +$warm-gray-10: #f7f3f2 !default; +$warm-gray-20: #e5e0df !default; +$warm-gray-30: #cac5c4 !default; +$warm-gray-40: #ada8a8 !default; +$warm-gray-50: #8f8b8b !default; +$warm-gray-60: #726e6e !default; +$warm-gray-70: #565151 !default; +$warm-gray-80: #3c3838 !default; +$warm-gray-90: #272525 !default; +$warm-gray-100: #171414 !default; +$white-0: #ffffff !default; +$yellow-10: #fcf4d6 !default; +$yellow-20: #fddc69 !default; +$yellow-30: #f1c21b !default; +$yellow-40: #d2a106 !default; +$yellow-50: #b28600 !default; +$yellow-60: #8e6a00 !default; +$yellow-70: #684e00 !default; +$yellow-80: #483700 !default; +$yellow-90: #302400 !default; +$yellow-100: #1c1500 !default; +$white-hover: #e8e8e8 !default; +$black-hover: #212121 !default; +$blue-10-hover: #dbebff !default; +$blue-20-hover: #b8d3ff !default; +$blue-30-hover: #8ab6ff !default; +$blue-40-hover: #5c97ff !default; +$blue-50-hover: #1f70ff !default; +$blue-60-hover: #0050e6 !default; +$blue-70-hover: #0053ff !default; +$blue-80-hover: #0039c7 !default; +$blue-90-hover: #00258a !default; +$blue-100-hover: #001f75 !default; +$cool-gray-10-hover: #e4e9f1 !default; +$cool-gray-20-hover: #cdd3da !default; +$cool-gray-30-hover: #adb5bd !default; +$cool-gray-40-hover: #9199a1 !default; +$cool-gray-50-hover: #757b85 !default; +$cool-gray-60-hover: #585e64 !default; +$cool-gray-70-hover: #5d646a !default; +$cool-gray-80-hover: #434a51 !default; +$cool-gray-90-hover: #2b3236 !default; +$cool-gray-100-hover: #222a2f !default; +$cyan-10-hover: #cceeff !default; +$cyan-20-hover: #99daff !default; +$cyan-30-hover: #57beff !default; +$cyan-40-hover: #059fff !default; +$cyan-50-hover: #0f7ec8 !default; +$cyan-60-hover: #005fa3 !default; +$cyan-70-hover: #0066bd !default; +$cyan-80-hover: #00498a !default; +$cyan-90-hover: #013360 !default; +$cyan-100-hover: #0b2947 !default; +$gray-10-hover: #e8e8e8 !default; +$gray-20-hover: #d1d1d1 !default; +$gray-30-hover: #b5b5b5 !default; +$gray-40-hover: #999999 !default; +$gray-50-hover: #7a7a7a !default; +$gray-60-hover: #5e5e5e !default; +$gray-70-hover: #636363 !default; +$gray-80-hover: #474747 !default; +$gray-90-hover: #333333 !default; +$gray-100-hover: #292929 !default; +$green-10-hover: #b6f6c8 !default; +$green-20-hover: #74e792 !default; +$green-30-hover: #36ce5e !default; +$green-40-hover: #3bab5a !default; +$green-50-hover: #208e3f !default; +$green-60-hover: #166f31 !default; +$green-70-hover: #11742f !default; +$green-80-hover: #05521c !default; +$green-90-hover: #033b11 !default; +$green-100-hover: #0d300f !default; +$magenta-10-hover: #ffe0ef !default; +$magenta-20-hover: #ffbdda !default; +$magenta-30-hover: #ff94c3 !default; +$magenta-40-hover: #ff57a0 !default; +$magenta-50-hover: #e3176f !default; +$magenta-60-hover: #b0215f !default; +$magenta-70-hover: #bf1d63 !default; +$magenta-80-hover: #8e0b43 !default; +$magenta-90-hover: #68032e !default; +$magenta-100-hover: #53142f !default; +$orange-10-hover: #ffe2cc !default; +$orange-20-hover: #ffc69e !default; +$orange-30-hover: #ff9d57 !default; +$orange-40-hover: #fa6800 !default; +$orange-50-hover: #cc5500 !default; +$orange-60-hover: #9e4200 !default; +$orange-70-hover: #a84400 !default; +$orange-80-hover: #753300 !default; +$orange-90-hover: #522200 !default; +$orange-100-hover: #421e00 !default; +$purple-10-hover: #ede5ff !default; +$purple-20-hover: #dcc7ff !default; +$purple-30-hover: #c5a3ff !default; +$purple-40-hover: #ae7aff !default; +$purple-50-hover: #9352ff !default; +$purple-60-hover: #7822fb !default; +$purple-70-hover: #7c3dd6 !default; +$purple-80-hover: #5b24ad !default; +$purple-90-hover: #40197b !default; +$purple-100-hover: #341c59 !default; +$red-10-hover: #ffe0e0 !default; +$red-20-hover: #ffc2c5 !default; +$red-30-hover: #ff99a0 !default; +$red-40-hover: #ff6168 !default; +$red-50-hover: #ee0713 !default; +$red-60-hover: #b81922 !default; +$red-70-hover: #c21e25 !default; +$red-80-hover: #921118 !default; +$red-90-hover: #66050a !default; +$red-100-hover: #540d11 !default; +$teal-10-hover: #acf6f6 !default; +$teal-20-hover: #57e5e5 !default; +$teal-30-hover: #25cac8 !default; +$teal-40-hover: #07aba9 !default; +$teal-50-hover: #008a87 !default; +$teal-60-hover: #006b68 !default; +$teal-70-hover: #007070 !default; +$teal-80-hover: #005357 !default; +$teal-90-hover: #033940 !default; +$teal-100-hover: #0f3034 !default; +$warm-gray-10-hover: #f0e8e6 !default; +$warm-gray-20-hover: #d8d0cf !default; +$warm-gray-30-hover: #b9b3b1 !default; +$warm-gray-40-hover: #9c9696 !default; +$warm-gray-50-hover: #7f7b7b !default; +$warm-gray-60-hover: #605d5d !default; +$warm-gray-70-hover: #696363 !default; +$warm-gray-80-hover: #4c4848 !default; +$warm-gray-90-hover: #343232 !default; +$warm-gray-100-hover: #2c2626 !default; +$yellow-10-hover: #f8e6a0 !default; +$yellow-20-hover: #fccd27 !default; +$yellow-30-hover: #ddb00e !default; +$yellow-40-hover: #bc9005 !default; +$yellow-50-hover: #9e7700 !default; +$yellow-60-hover: #755800 !default; +$yellow-70-hover: #806000 !default; +$yellow-80-hover: #5c4600 !default; +$yellow-90-hover: #3d2e00 !default; +$yellow-100-hover: #332600 !default; +$ibm-color-map: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), +) !default; +$carbon--colors: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), +) !default; + +/// Define color variables +/// @access public +/// @group @carbon/colors +/// @deprecated Use `$carbon--colors` going forward +@mixin ibm--colors() { + $ibm-color__black-100: #000000 !global; + $ibm-color__blue-10: #edf5ff !global; + $ibm-color__blue-20: #d0e2ff !global; + $ibm-color__blue-30: #a6c8ff !global; + $ibm-color__blue-40: #78a9ff !global; + $ibm-color__blue-50: #4589ff !global; + $ibm-color__blue-60: #0f62fe !global; + $ibm-color__blue-70: #0043ce !global; + $ibm-color__blue-80: #002d9c !global; + $ibm-color__blue-90: #001d6c !global; + $ibm-color__blue-100: #001141 !global; + $ibm-color__cool-gray-10: #f2f4f8 !global; + $ibm-color__cool-gray-20: #dde1e6 !global; + $ibm-color__cool-gray-30: #c1c7cd !global; + $ibm-color__cool-gray-40: #a2a9b0 !global; + $ibm-color__cool-gray-50: #878d96 !global; + $ibm-color__cool-gray-60: #697077 !global; + $ibm-color__cool-gray-70: #4d5358 !global; + $ibm-color__cool-gray-80: #343a3f !global; + $ibm-color__cool-gray-90: #21272a !global; + $ibm-color__cool-gray-100: #121619 !global; + $ibm-color__cyan-10: #e5f6ff !global; + $ibm-color__cyan-20: #bae6ff !global; + $ibm-color__cyan-30: #82cfff !global; + $ibm-color__cyan-40: #33b1ff !global; + $ibm-color__cyan-50: #1192e8 !global; + $ibm-color__cyan-60: #0072c3 !global; + $ibm-color__cyan-70: #00539a !global; + $ibm-color__cyan-80: #003a6d !global; + $ibm-color__cyan-90: #012749 !global; + $ibm-color__cyan-100: #061727 !global; + $ibm-color__gray-10: #f4f4f4 !global; + $ibm-color__gray-20: #e0e0e0 !global; + $ibm-color__gray-30: #c6c6c6 !global; + $ibm-color__gray-40: #a8a8a8 !global; + $ibm-color__gray-50: #8d8d8d !global; + $ibm-color__gray-60: #6f6f6f !global; + $ibm-color__gray-70: #525252 !global; + $ibm-color__gray-80: #393939 !global; + $ibm-color__gray-90: #262626 !global; + $ibm-color__gray-100: #161616 !global; + $ibm-color__green-10: #defbe6 !global; + $ibm-color__green-20: #a7f0ba !global; + $ibm-color__green-30: #6fdc8c !global; + $ibm-color__green-40: #42be65 !global; + $ibm-color__green-50: #24a148 !global; + $ibm-color__green-60: #198038 !global; + $ibm-color__green-70: #0e6027 !global; + $ibm-color__green-80: #044317 !global; + $ibm-color__green-90: #022d0d !global; + $ibm-color__green-100: #071908 !global; + $ibm-color__magenta-10: #fff0f7 !global; + $ibm-color__magenta-20: #ffd6e8 !global; + $ibm-color__magenta-30: #ffafd2 !global; + $ibm-color__magenta-40: #ff7eb6 !global; + $ibm-color__magenta-50: #ee5396 !global; + $ibm-color__magenta-60: #d02670 !global; + $ibm-color__magenta-70: #9f1853 !global; + $ibm-color__magenta-80: #740937 !global; + $ibm-color__magenta-90: #510224 !global; + $ibm-color__magenta-100: #2a0a18 !global; + $ibm-color__orange-10: #fff2e8 !global; + $ibm-color__orange-20: #ffd9be !global; + $ibm-color__orange-30: #ffb784 !global; + $ibm-color__orange-40: #ff832b !global; + $ibm-color__orange-50: #eb6200 !global; + $ibm-color__orange-60: #ba4e00 !global; + $ibm-color__orange-70: #8a3800 !global; + $ibm-color__orange-80: #5e2900 !global; + $ibm-color__orange-90: #3e1a00 !global; + $ibm-color__orange-100: #231000 !global; + $ibm-color__purple-10: #f6f2ff !global; + $ibm-color__purple-20: #e8daff !global; + $ibm-color__purple-30: #d4bbff !global; + $ibm-color__purple-40: #be95ff !global; + $ibm-color__purple-50: #a56eff !global; + $ibm-color__purple-60: #8a3ffc !global; + $ibm-color__purple-70: #6929c4 !global; + $ibm-color__purple-80: #491d8b !global; + $ibm-color__purple-90: #31135e !global; + $ibm-color__purple-100: #1c0f30 !global; + $ibm-color__red-10: #fff1f1 !global; + $ibm-color__red-20: #ffd7d9 !global; + $ibm-color__red-30: #ffb3b8 !global; + $ibm-color__red-40: #ff8389 !global; + $ibm-color__red-50: #fa4d56 !global; + $ibm-color__red-60: #da1e28 !global; + $ibm-color__red-70: #a2191f !global; + $ibm-color__red-80: #750e13 !global; + $ibm-color__red-90: #520408 !global; + $ibm-color__red-100: #2d0709 !global; + $ibm-color__teal-10: #d9fbfb !global; + $ibm-color__teal-20: #9ef0f0 !global; + $ibm-color__teal-30: #3ddbd9 !global; + $ibm-color__teal-40: #08bdba !global; + $ibm-color__teal-50: #009d9a !global; + $ibm-color__teal-60: #007d79 !global; + $ibm-color__teal-70: #005d5d !global; + $ibm-color__teal-80: #004144 !global; + $ibm-color__teal-90: #022b30 !global; + $ibm-color__teal-100: #081a1c !global; + $ibm-color__warm-gray-10: #f7f3f2 !global; + $ibm-color__warm-gray-20: #e5e0df !global; + $ibm-color__warm-gray-30: #cac5c4 !global; + $ibm-color__warm-gray-40: #ada8a8 !global; + $ibm-color__warm-gray-50: #8f8b8b !global; + $ibm-color__warm-gray-60: #726e6e !global; + $ibm-color__warm-gray-70: #565151 !global; + $ibm-color__warm-gray-80: #3c3838 !global; + $ibm-color__warm-gray-90: #272525 !global; + $ibm-color__warm-gray-100: #171414 !global; + $ibm-color__white-0: #ffffff !global; + $ibm-color__yellow-10: #fcf4d6 !global; + $ibm-color__yellow-20: #fddc69 !global; + $ibm-color__yellow-30: #f1c21b !global; + $ibm-color__yellow-40: #d2a106 !global; + $ibm-color__yellow-50: #b28600 !global; + $ibm-color__yellow-60: #8e6a00 !global; + $ibm-color__yellow-70: #684e00 !global; + $ibm-color__yellow-80: #483700 !global; + $ibm-color__yellow-90: #302400 !global; + $ibm-color__yellow-100: #1c1500 !global; + $ibm-color-map: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), + ) !global; +} + +/// Define color variables +/// @access public +/// @group @carbon/colors +@mixin carbon--colors() { + $carbon--black-100: #000000 !global; + $carbon--blue-10: #edf5ff !global; + $carbon--blue-20: #d0e2ff !global; + $carbon--blue-30: #a6c8ff !global; + $carbon--blue-40: #78a9ff !global; + $carbon--blue-50: #4589ff !global; + $carbon--blue-60: #0f62fe !global; + $carbon--blue-70: #0043ce !global; + $carbon--blue-80: #002d9c !global; + $carbon--blue-90: #001d6c !global; + $carbon--blue-100: #001141 !global; + $carbon--cool-gray-10: #f2f4f8 !global; + $carbon--cool-gray-20: #dde1e6 !global; + $carbon--cool-gray-30: #c1c7cd !global; + $carbon--cool-gray-40: #a2a9b0 !global; + $carbon--cool-gray-50: #878d96 !global; + $carbon--cool-gray-60: #697077 !global; + $carbon--cool-gray-70: #4d5358 !global; + $carbon--cool-gray-80: #343a3f !global; + $carbon--cool-gray-90: #21272a !global; + $carbon--cool-gray-100: #121619 !global; + $carbon--cyan-10: #e5f6ff !global; + $carbon--cyan-20: #bae6ff !global; + $carbon--cyan-30: #82cfff !global; + $carbon--cyan-40: #33b1ff !global; + $carbon--cyan-50: #1192e8 !global; + $carbon--cyan-60: #0072c3 !global; + $carbon--cyan-70: #00539a !global; + $carbon--cyan-80: #003a6d !global; + $carbon--cyan-90: #012749 !global; + $carbon--cyan-100: #061727 !global; + $carbon--gray-10: #f4f4f4 !global; + $carbon--gray-20: #e0e0e0 !global; + $carbon--gray-30: #c6c6c6 !global; + $carbon--gray-40: #a8a8a8 !global; + $carbon--gray-50: #8d8d8d !global; + $carbon--gray-60: #6f6f6f !global; + $carbon--gray-70: #525252 !global; + $carbon--gray-80: #393939 !global; + $carbon--gray-90: #262626 !global; + $carbon--gray-100: #161616 !global; + $carbon--green-10: #defbe6 !global; + $carbon--green-20: #a7f0ba !global; + $carbon--green-30: #6fdc8c !global; + $carbon--green-40: #42be65 !global; + $carbon--green-50: #24a148 !global; + $carbon--green-60: #198038 !global; + $carbon--green-70: #0e6027 !global; + $carbon--green-80: #044317 !global; + $carbon--green-90: #022d0d !global; + $carbon--green-100: #071908 !global; + $carbon--magenta-10: #fff0f7 !global; + $carbon--magenta-20: #ffd6e8 !global; + $carbon--magenta-30: #ffafd2 !global; + $carbon--magenta-40: #ff7eb6 !global; + $carbon--magenta-50: #ee5396 !global; + $carbon--magenta-60: #d02670 !global; + $carbon--magenta-70: #9f1853 !global; + $carbon--magenta-80: #740937 !global; + $carbon--magenta-90: #510224 !global; + $carbon--magenta-100: #2a0a18 !global; + $carbon--orange-10: #fff2e8 !global; + $carbon--orange-20: #ffd9be !global; + $carbon--orange-30: #ffb784 !global; + $carbon--orange-40: #ff832b !global; + $carbon--orange-50: #eb6200 !global; + $carbon--orange-60: #ba4e00 !global; + $carbon--orange-70: #8a3800 !global; + $carbon--orange-80: #5e2900 !global; + $carbon--orange-90: #3e1a00 !global; + $carbon--orange-100: #231000 !global; + $carbon--purple-10: #f6f2ff !global; + $carbon--purple-20: #e8daff !global; + $carbon--purple-30: #d4bbff !global; + $carbon--purple-40: #be95ff !global; + $carbon--purple-50: #a56eff !global; + $carbon--purple-60: #8a3ffc !global; + $carbon--purple-70: #6929c4 !global; + $carbon--purple-80: #491d8b !global; + $carbon--purple-90: #31135e !global; + $carbon--purple-100: #1c0f30 !global; + $carbon--red-10: #fff1f1 !global; + $carbon--red-20: #ffd7d9 !global; + $carbon--red-30: #ffb3b8 !global; + $carbon--red-40: #ff8389 !global; + $carbon--red-50: #fa4d56 !global; + $carbon--red-60: #da1e28 !global; + $carbon--red-70: #a2191f !global; + $carbon--red-80: #750e13 !global; + $carbon--red-90: #520408 !global; + $carbon--red-100: #2d0709 !global; + $carbon--teal-10: #d9fbfb !global; + $carbon--teal-20: #9ef0f0 !global; + $carbon--teal-30: #3ddbd9 !global; + $carbon--teal-40: #08bdba !global; + $carbon--teal-50: #009d9a !global; + $carbon--teal-60: #007d79 !global; + $carbon--teal-70: #005d5d !global; + $carbon--teal-80: #004144 !global; + $carbon--teal-90: #022b30 !global; + $carbon--teal-100: #081a1c !global; + $carbon--warm-gray-10: #f7f3f2 !global; + $carbon--warm-gray-20: #e5e0df !global; + $carbon--warm-gray-30: #cac5c4 !global; + $carbon--warm-gray-40: #ada8a8 !global; + $carbon--warm-gray-50: #8f8b8b !global; + $carbon--warm-gray-60: #726e6e !global; + $carbon--warm-gray-70: #565151 !global; + $carbon--warm-gray-80: #3c3838 !global; + $carbon--warm-gray-90: #272525 !global; + $carbon--warm-gray-100: #171414 !global; + $carbon--white-0: #ffffff !global; + $carbon--yellow-10: #fcf4d6 !global; + $carbon--yellow-20: #fddc69 !global; + $carbon--yellow-30: #f1c21b !global; + $carbon--yellow-40: #d2a106 !global; + $carbon--yellow-50: #b28600 !global; + $carbon--yellow-60: #8e6a00 !global; + $carbon--yellow-70: #684e00 !global; + $carbon--yellow-80: #483700 !global; + $carbon--yellow-90: #302400 !global; + $carbon--yellow-100: #1c1500 !global; + $carbon--colors: ( + 'black': ( + 100: #000000, + ), + 'blue': ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), + 'cool-gray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'coolGray': ( + 10: #f2f4f8, + 20: #dde1e6, + 30: #c1c7cd, + 40: #a2a9b0, + 50: #878d96, + 60: #697077, + 70: #4d5358, + 80: #343a3f, + 90: #21272a, + 100: #121619, + ), + 'cyan': ( + 10: #e5f6ff, + 20: #bae6ff, + 30: #82cfff, + 40: #33b1ff, + 50: #1192e8, + 60: #0072c3, + 70: #00539a, + 80: #003a6d, + 90: #012749, + 100: #061727, + ), + 'gray': ( + 10: #f4f4f4, + 20: #e0e0e0, + 30: #c6c6c6, + 40: #a8a8a8, + 50: #8d8d8d, + 60: #6f6f6f, + 70: #525252, + 80: #393939, + 90: #262626, + 100: #161616, + ), + 'green': ( + 10: #defbe6, + 20: #a7f0ba, + 30: #6fdc8c, + 40: #42be65, + 50: #24a148, + 60: #198038, + 70: #0e6027, + 80: #044317, + 90: #022d0d, + 100: #071908, + ), + 'magenta': ( + 10: #fff0f7, + 20: #ffd6e8, + 30: #ffafd2, + 40: #ff7eb6, + 50: #ee5396, + 60: #d02670, + 70: #9f1853, + 80: #740937, + 90: #510224, + 100: #2a0a18, + ), + 'orange': ( + 10: #fff2e8, + 20: #ffd9be, + 30: #ffb784, + 40: #ff832b, + 50: #eb6200, + 60: #ba4e00, + 70: #8a3800, + 80: #5e2900, + 90: #3e1a00, + 100: #231000, + ), + 'purple': ( + 10: #f6f2ff, + 20: #e8daff, + 30: #d4bbff, + 40: #be95ff, + 50: #a56eff, + 60: #8a3ffc, + 70: #6929c4, + 80: #491d8b, + 90: #31135e, + 100: #1c0f30, + ), + 'red': ( + 10: #fff1f1, + 20: #ffd7d9, + 30: #ffb3b8, + 40: #ff8389, + 50: #fa4d56, + 60: #da1e28, + 70: #a2191f, + 80: #750e13, + 90: #520408, + 100: #2d0709, + ), + 'teal': ( + 10: #d9fbfb, + 20: #9ef0f0, + 30: #3ddbd9, + 40: #08bdba, + 50: #009d9a, + 60: #007d79, + 70: #005d5d, + 80: #004144, + 90: #022b30, + 100: #081a1c, + ), + 'warm-gray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'warmGray': ( + 10: #f7f3f2, + 20: #e5e0df, + 30: #cac5c4, + 40: #ada8a8, + 50: #8f8b8b, + 60: #726e6e, + 70: #565151, + 80: #3c3838, + 90: #272525, + 100: #171414, + ), + 'white': ( + 0: #ffffff, + ), + 'yellow': ( + 10: #fcf4d6, + 20: #fddc69, + 30: #f1c21b, + 40: #d2a106, + 50: #b28600, + 60: #8e6a00, + 70: #684e00, + 80: #483700, + 90: #302400, + 100: #1c1500, + ), + ) !global; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/elements.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/elements.scss new file mode 100644 index 000000000000..5df2cf38548d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/elements.scss @@ -0,0 +1,17 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// The files below are generated using the `yarn build` stage for this +// package +@import './import-once/import-once'; +@import './colors/colors'; +@import './themes/themes'; +@import './layout/layout'; +@import './grid/grid'; +@import './icons/icons'; +@import './type/type'; +@import './motion/motion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss new file mode 100644 index 000000000000..9cc166539729 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/12.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16 +/// @type Map +/// @access public +/// @group @carbon/grid +$carbon--12-column-grid: map-merge( + $carbon--grid-breakpoints, + ( + lg: + map-merge( + map-get($carbon--grid-breakpoints, lg), + ( + columns: 12, + ) + ), + xlg: + map-merge( + map-get($carbon--grid-breakpoints, xlg), + ( + columns: 12, + ) + ), + max: + map-merge( + map-get($carbon--grid-breakpoints, max), + ( + columns: 12, + ) + ), + ) +); + +@include carbon--grid($breakpoints: $carbon--12-column-grid); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/12.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/12.scss new file mode 100644 index 000000000000..9cc166539729 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/12.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16 +/// @type Map +/// @access public +/// @group @carbon/grid +$carbon--12-column-grid: map-merge( + $carbon--grid-breakpoints, + ( + lg: + map-merge( + map-get($carbon--grid-breakpoints, lg), + ( + columns: 12, + ) + ), + xlg: + map-merge( + map-get($carbon--grid-breakpoints, xlg), + ( + columns: 12, + ) + ), + max: + map-merge( + map-get($carbon--grid-breakpoints, max), + ( + columns: 12, + ) + ), + ) +); + +@include carbon--grid($breakpoints: $carbon--12-column-grid); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.import.scss new file mode 100644 index 000000000000..1cfa18aaff9c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.import.scss @@ -0,0 +1,431 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@use 'sass:meta'; +@use 'sass:math'; +@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: $condensed-gutter * 0.5; + padding-left: $condensed-gutter * 0.5; + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: $gutter * 0.5; + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--end { + padding-right: $gutter * 0.5; + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--right { + padding-right: $gutter * 0.5; + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.scss new file mode 100644 index 000000000000..c468ff6e7bb1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_mixins.scss @@ -0,0 +1,415 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@import '../vendor/@carbon/layout/breakpoint'; +@import 'prefix'; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter / 2); + padding-left: ($condensed-gutter / 2); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter / 2); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($span / $columns); + flex: 0 0 percentage($span / $columns); + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: $span / $columns; + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter / 2; + margin-left: -1 * $gutter / 2; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter / 2); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter / 2); + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + padding-top: percentage($height / $width); + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter / 2; + padding-bottom: $grid-gutter / 2; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter / 2; + padding-bottom: $condensed-gutter / 2; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_prefix.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/_prefix.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.import.scss new file mode 100644 index 000000000000..a40b5b2b6bdd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.import.scss @@ -0,0 +1,431 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@use 'sass:meta'; +@use 'sass:math'; +@import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: $condensed-gutter * 0.5; + padding-left: $condensed-gutter * 0.5; + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: $gutter * 0.5; + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--end { + padding-right: $gutter * 0.5; + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--right { + padding-right: $gutter * 0.5; + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss new file mode 100644 index 000000000000..e34c611ceef8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_mixins.scss @@ -0,0 +1,415 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@import '../layout/breakpoint'; +@import 'prefix'; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter / 2); + padding-left: ($condensed-gutter / 2); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter / 2); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($span / $columns); + flex: 0 0 percentage($span / $columns); + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: $span / $columns; + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter / 2; + margin-left: -1 * $gutter / 2; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter / 2); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter / 2); + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + padding-top: percentage($height / $width); + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter / 2; + padding-bottom: $grid-gutter / 2; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter / 2; + padding-bottom: $condensed-gutter / 2; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/_prefix.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss new file mode 100644 index 000000000000..d3c2e6f4b9d4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/grid.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './_inlined/mixins'; + +@include carbon--grid(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/index.scss new file mode 100644 index 000000000000..6e4772178b3d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/index.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +@include carbon--grid(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_breakpoint.scss new file mode 100644 index 000000000000..4d0bce1cea6f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_breakpoint.scss @@ -0,0 +1,266 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use '../../layout/modules/convert'; + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, key-by-index($map, $total-length)); +} + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_config.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_config.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_config.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_css-grid.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_css-grid.scss new file mode 100644 index 000000000000..19f1261ba553 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_css-grid.scss @@ -0,0 +1,426 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use "sass:math"; + +@use 'sass:map'; +@use 'config' as *; +@use 'breakpoint' as *; + +@mixin css-grid() { + display: grid; + max-width: 99rem; + padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + margin-right: auto; + margin-left: auto; + column-gap: var(--cds-grid-gutter); + grid-template-columns: repeat( + var(--cds-grid-columns), + minmax(0, var(--cds-grid-column-size)) + ); +} + +@mixin subgrid() { + display: grid; + column-gap: var(--cds-grid-gutter); + grid-template-columns: repeat( + var(--cds-grid-columns), + minmax(0, var(--cds-grid-column-size)) + ); +} + +:root { + --cds-grid-columns: 4; + --cds-grid-column-size: 1fr; + --cds-grid-gutter: 2rem; + // Used to configure appropriate margins for condensed subgrids inside wide grids + --cds-grid-gutter-wide: 2rem; + --cds-grid-hang: 1rem; + --cds-grid-margin: 0; + + @include breakpoint(md) { + --cds-grid-columns: 8; + --cds-grid-margin: 1rem; + } + + @include breakpoint(lg) { + --cds-grid-columns: 16; + } + + @include breakpoint(max) { + --cds-grid-margin: 1.5rem; + } +} + +.#{$prefix}--css-grid { + @include css-grid(); +} + +.#{$prefix}--css-grid--12 { + @include css-grid(); + @include breakpoint(lg) { + --cds-grid-columns: 12; + } +} + +.#{$prefix}--subgrid { + @include subgrid(); +} + +.#{$prefix}--subgrid[class*='col'] { + display: grid; +} + +// ----------------------------------------------------------------------------- +// Narrow +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--narrow { + --cds-grid-margin: 1rem; + + padding-right: var(--cds-grid-margin); + padding-left: var(--cds-grid-margin); + + @include breakpoint(md) { + padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + } +} + +.#{$prefix}--css-grid--narrow > [class*='col'] { + margin-left: calc(var(--cds-grid-gutter) / 2 * -1); +} + +// Narrow subgrid inside wide +.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed) + .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow { + padding: 0; +} + +// Narrow subgrid column inside wide +.#{$prefix}--css-grid + .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow + > [class*='col'] { + margin-left: calc(var(--cds-grid-gutter) / 2 * -1); +} + +// ----------------------------------------------------------------------------- +// Condensed +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--condensed { + --cds-grid-gutter: 1px; + + column-gap: var(--cds-grid-gutter); + row-gap: var(--cds-grid-gutter); +} + +// condensed subgrid inside wide +.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow) + .bx--subgrid.#{$prefix}--css-grid--condensed { + margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1); + margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1); +} + +// ----------------------------------------------------------------------------- +// No Gutter +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--no-gutter { + // This is set to 0px (versus 0) so that the calc expression for padding for + // a grid container works as expected. Without the unit, the calc() will + // result in a value of 0. + // stylelint-disable-next-line length-zero-no-unit + --cds-grid-gutter: 0px; + + column-gap: var(--cds-grid-gutter); +} + +// ----------------------------------------------------------------------------- +// Full width +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--full-width { + max-width: 100%; +} + +// ----------------------------------------------------------------------------- +// Column span +// ----------------------------------------------------------------------------- +@mixin -column-span($i) { + @if $i == 0 { + display: none; + } @else { + --cds-grid-columns: #{$i}; + + display: block; + grid-column: span $i / span $i; + } +} + +@for $i from 0 through 16 { + .#{$prefix}--col-span-#{$i} { + @include -column-span($i); + } +} + +.#{$prefix}--col-span-auto { + grid-column: auto; +} + +.#{$prefix}--col-span-100 { + grid-column: 1 / -1; +} + +@each $name, $value in $grid-breakpoints { + $columns: map.get($value, columns); + + @include breakpoint($name) { + @for $i from 0 through $columns { + .#{$prefix}--#{$name}\:col-span-#{$i} { + @include -column-span($i); + } + } + + .#{$prefix}--#{$name}\:col-span-auto { + grid-column: auto; + } + + .#{$prefix}--#{$name}\:col-span-100 { + grid-column: 1 / -1; + } + } +} + +.#{$prefix}--col-span-25 { + --cds-grid-columns: 1; + + grid-column: span 1; + + @include breakpoint(md) { + --cds-grid-columns: 2; + + grid-column: span 2; + } + + @include breakpoint(lg) { + --cds-grid-columns: 4; + + grid-column: span 4; + } +} + +.#{$prefix}--col-span-50 { + --cds-grid-columns: 2; + + grid-column: span 2; + + @include breakpoint(md) { + --cds-grid-columns: 4; + + grid-column: span 4; + } + + @include breakpoint(lg) { + --cds-grid-columns: 8; + + grid-column: span 8; + } +} + +.#{$prefix}--col-span-75 { + --cds-grid-columns: 3; + + grid-column: span 3; + + @include breakpoint(md) { + --cds-grid-columns: 6; + + grid-column: span 6; + } + + @include breakpoint(lg) { + --cds-grid-columns: 12; + + grid-column: span 12; + } +} + +// ----------------------------------------------------------------------------- +// Column offset +// ----------------------------------------------------------------------------- +@for $i from 1 through 17 { + .#{$prefix}--col-start-#{$i} { + grid-column-start: $i; + } + + .#{$prefix}--col-end-#{$i} { + grid-column-start: $i; + } +} + +.#{$prefix}--col-start-auto { + grid-column-start: auto; +} + +.#{$prefix}--col-end-auto { + grid-column-start: end; +} + +@each $name, $value in $grid-breakpoints { + $columns: map.get($value, columns); + + @include breakpoint($name) { + // The `grid-column-start` property is *not* inclusive. + // It starts the column *at* the column, not *on* the column. We must + // ensure that there is one additional class available for each breakpoint. + @for $i from 1 through $columns + 1 { + .#{$prefix}--#{$name}\:col-start-#{$i} { + grid-column-start: $i; + } + + .#{$prefix}--#{$name}\:col-end-#{$i} { + grid-column-end: $i; + } + } + + .#{$prefix}--#{$name}\:col-start-auto { + grid-column-start: auto; + } + + .#{$prefix}--#{$name}\:col-end-auto { + grid-column-start: end; + } + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- +.#{$prefix}--hang { + padding-left: var(--cds-grid-hang); +} + +// ----------------------------------------------------------------------------- +// Column gutter +// ----------------------------------------------------------------------------- +.#{$prefix}--gutter { + padding-right: var(--cds-grid-hang); + padding-left: var(--cds-grid-hang); +} + +.#{$prefix}--gutter-start { + padding-left: var(--cds-grid-hang); +} + +[dir='rtl'] .#{$prefix}--gutter-start { + padding-right: var(--cds-grid-hang); +} + +.#{$prefix}--gutter-end { + padding-right: var(--cds-grid-hang); +} + +[dir='rtl'] .#{$prefix}--gutter-end { + padding-left: var(--cds-grid-hang); +} + +// ----------------------------------------------------------------------------- +// Utilities +// ----------------------------------------------------------------------------- + +/// Justify items +.#{$prefix}--justify-items-start { + justify-items: start; +} + +.#{$prefix}--justify-items-end { + justify-items: end; +} + +.#{$prefix}--justify-items-center { + justify-items: center; +} + +/// Align items +.#{$prefix}--align-items-start { + align-items: start; +} + +.#{$prefix}--align-items-end { + align-items: end; +} + +.#{$prefix}--align-items-center { + align-items: center; +} + +// ----------------------------------------------------------------------------- +// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component? +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } +} + +@include carbon--aspect-ratio(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_mixins.scss new file mode 100644 index 000000000000..08706d68a3ad --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/modules/_mixins.scss @@ -0,0 +1,336 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use "sass:math"; + +@use 'config' as *; +@use 'breakpoint' as *; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin -make-col-ready( + $gutter: $grid-gutter, + $condensed-gutter: $grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter * 0.5); + padding-left: ($gutter * 0.5); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter * 0.5); + padding-left: ($condensed-gutter * 0.5); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter * 0.5); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin -make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin -make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin -make-grid-columns( + $breakpoints: $grid-breakpoints, + $gutter: $grid-gutter +) { + .#{$prefix}--col { + @include -make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include -make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include -make-col-ready($gutter); + } + + @include breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include -make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include -make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin make-row($gutter: $grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin -no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin -hang($gutter: $grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter * 0.5); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter * 0.5); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter * 0.5); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter * 0.5); + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `-make-container-max-widths` +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -make-container($breakpoints: $grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include -set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include breakpoint($name) { + padding-right: #{($grid-gutter * 0.5) + $margin}; + padding-left: #{($grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include breakpoint($name) { + padding-right: #{($grid-gutter * 0.5) + $margin}; + padding-left: #{($grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) { + @each $name, $value in $breakpoints { + @include breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin grid( + $breakpoints: $grid-breakpoints, + $grid-gutter: $grid-gutter, + $condensed-gutter: $grid-gutter--condensed +) { + .#{$prefix}--grid { + @include -make-container($breakpoints); + } + + @include largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include -make-grid-columns($breakpoints, $grid-gutter); + @include -no-gutter(); + @include -hang($grid-gutter); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/import-once.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/import-once.scss new file mode 100644 index 000000000000..f7fbca1d0adc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/import-once.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Used by `exports` mixin to track which modules have been imported +/// @type Map +/// @access public +/// @group @carbon/import-once +$imported-modules: () !default; + +/// Module export mixin that helps making sure a module is imported once and only once +/// @access public +/// @param {String} $name - Name of exported module +/// @param {Bool} $warn [false] - Warn when a module has been already imported +/// @content Declaration blocks to be imported +/// @group @carbon/import-once +@mixin exports($name, $warn: false) { + @if (index($imported-modules, $name) == null) { + $imported-modules: append($imported-modules, $name) !global; + @content; + } @else if $warn == true { + @warn 'Module `#{$name}` has already been imported.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/index.scss new file mode 100644 index 000000000000..182f0ad45699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/import-once/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'import-once'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_breakpoint.scss new file mode 100644 index 000000000000..6312bbf7d572 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_breakpoint.scss @@ -0,0 +1,246 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@import 'convert'; +@import 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter: carbon--rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter--condensed: carbon--rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: carbon--rem(320px), + ), + md: ( + columns: 8, + margin: carbon--rem(16px), + width: carbon--rem(672px), + ), + lg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1056px), + ), + xlg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1312px), + ), + max: ( + columns: 16, + margin: carbon--rem(24px), + width: carbon--rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-next( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n < length($breakpoint-names) { + @return nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-prev( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function carbon--is-smallest-breakpoint( + $name, + $breakpoints: $carbon--grid-breakpoints +) { + @return index(map-keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--largest-breakpoint-name( + $breakpoints: $carbon--grid-breakpoints +) { + $total-breakpoints: length($breakpoints); + @return carbon--key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width); + @if carbon--is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-between( + $lower, + $upper, + $breakpoints: $carbon--grid-breakpoints +) { + $is-number-lower: type-of($lower) == 'number'; + $is-number-upper: type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if( + not $is-number-lower and $min, + map-get($min, width) + 0.02, + $min + ); + $max-width: if( + not $is-number-upper and $max, + map-get($max, width) - 0.02, + $max + ); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include carbon--breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include carbon--breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint(carbon--largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.import.scss new file mode 100644 index 000000000000..f8cab364b5f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.import.scss @@ -0,0 +1,65 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.scss new file mode 100644 index 000000000000..1082749a63e1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_convert.scss @@ -0,0 +1,54 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1rem; +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1em; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.import.scss new file mode 100644 index 000000000000..15e9f7090f33 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.import.scss @@ -0,0 +1,117 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use "sass:math"; +@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.scss new file mode 100644 index 000000000000..a8113d75f885 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_key-height.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@import 'breakpoint'; +@import 'utilities'; + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @return ($width - (2 * $margin)) / $columns; + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_mini-unit.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_mini-unit.scss new file mode 100644 index 000000000000..c79b6ed564c2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_mini-unit.scss @@ -0,0 +1,23 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; + +/// Default mini-unit value +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--mini-unit-size: 8px !default; + +/// Get the value of the corresponding number of units +/// @param {Number} $count - The number of units to get the value for +/// @return {Number} In rem units +/// @access public +/// @group @carbon/layout +@function carbon--mini-units($count) { + @return carbon--rem($carbon--mini-unit-size * $count); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_spacing.scss new file mode 100644 index 000000000000..ae11fb9e45b9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_spacing.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/spacing'; +@import './generated/layout'; +@import './generated/fluid-spacing'; +@import './generated/container'; +@import './generated/icon-size'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_utilities.scss new file mode 100644 index 000000000000..af8e1e0eb4e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function carbon--key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_container.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_container.scss new file mode 100644 index 000000000000..c7ec355b9503 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_container.scss @@ -0,0 +1,73 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-01: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-02: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-03: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-05: 4rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--container: ( + $carbon--container-01, + $carbon--container-02, + $carbon--container-03, + $carbon--container-04, + $carbon--container-05 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-01 +$container-01: $carbon--container-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-02 +$container-02: $carbon--container-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-03 +$container-03: $carbon--container-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-04 +$container-04: $carbon--container-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-05 +$container-05: $carbon--container-05 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2532fa617901 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss @@ -0,0 +1,61 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-04: 10vw !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-01 +$fluid-spacing-01: $carbon--fluid-spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-02 +$fluid-spacing-02: $carbon--fluid-spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-03 +$fluid-spacing-03: $carbon--fluid-spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-04 +$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_icon-size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_icon-size.scss new file mode 100644 index 000000000000..a3537a118520 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_icon-size.scss @@ -0,0 +1,34 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-02: 1.25rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-01 +$icon-size-01: $carbon--icon-size-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-02 +$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_layout.scss new file mode 100644 index 000000000000..cbdc2c1af6a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_layout.scss @@ -0,0 +1,97 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-02: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-03: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-05: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-06: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-07: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-01 +$layout-01: $carbon--layout-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-02 +$layout-02: $carbon--layout-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-03 +$layout-03: $carbon--layout-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-04 +$layout-04: $carbon--layout-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-05 +$layout-05: $carbon--layout-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-06 +$layout-06: $carbon--layout-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-07 +$layout-07: $carbon--layout-07 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_size.scss new file mode 100644 index 000000000000..220cefc4baa1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_size.scss @@ -0,0 +1,17 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$size-xs: 1.5rem; +$size-sm: 2rem; +$size-md: 2.5rem; +$size-lg: 3rem; +$size-xl: 4rem; +$size-2xl: 5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_spacing.scss new file mode 100644 index 000000000000..67fc46d90cc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_spacing.scss @@ -0,0 +1,169 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-13: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09, + $carbon--spacing-10, + $carbon--spacing-11, + $carbon--spacing-12, + $carbon--spacing-13 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-01 +$spacing-01: $carbon--spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-02 +$spacing-02: $carbon--spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-03 +$spacing-03: $carbon--spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-04 +$spacing-04: $carbon--spacing-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-05 +$spacing-05: $carbon--spacing-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-06 +$spacing-06: $carbon--spacing-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-07 +$spacing-07: $carbon--spacing-07 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-08 +$spacing-08: $carbon--spacing-08 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-09 +$spacing-09: $carbon--spacing-09 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-10 +$spacing-10: $carbon--spacing-10 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-11 +$spacing-11: $carbon--spacing-11 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-12 +$spacing-12: $carbon--spacing-12 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-13 +$spacing-13: $carbon--spacing-13 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/index.scss new file mode 100644 index 000000000000..7c7fe0aca3be --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'layout'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/layout.scss new file mode 100644 index 000000000000..acc1f1e8f702 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/layout.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; +@import 'breakpoint'; +@import 'mini-unit'; +@import 'spacing'; +@import 'key-height'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_breakpoint.scss new file mode 100644 index 000000000000..e10967e39c7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_breakpoint.scss @@ -0,0 +1,232 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'convert'; +@use 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_convert.scss new file mode 100644 index 000000000000..3b28c4f09127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_convert.scss @@ -0,0 +1,51 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_spacing.scss new file mode 100644 index 000000000000..42e124108c91 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_spacing.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './generated/fluid-spacing'; +@forward './generated/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_utilities.scss new file mode 100644 index 000000000000..26a423de7b48 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2529ccd2dd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss @@ -0,0 +1,37 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-04: 10vw !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$fluid-spacing: ( + fluid-spacing-01: $fluid-spacing-01, + fluid-spacing-02: $fluid-spacing-02, + fluid-spacing-03: $fluid-spacing-03, + fluid-spacing-04: $fluid-spacing-04, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss new file mode 100644 index 000000000000..42f8fb4df1ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss @@ -0,0 +1,91 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-13: 10rem !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$spacing: ( + spacing-01: $spacing-01, + spacing-02: $spacing-02, + spacing-03: $spacing-03, + spacing-04: $spacing-04, + spacing-05: $spacing-05, + spacing-06: $spacing-06, + spacing-07: $spacing-07, + spacing-08: $spacing-08, + spacing-09: $spacing-09, + spacing-10: $spacing-10, + spacing-11: $spacing-11, + spacing-12: $spacing-12, + spacing-13: $spacing-13, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/icons.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/icons.scss new file mode 100644 index 000000000000..0b3a7dcad3bb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/icons.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +@include carbon--icons(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/index.scss new file mode 100644 index 000000000000..9c0f2e4db13c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'icons'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/mixins.scss new file mode 100644 index 000000000000..e42ac1ccedf2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/icons/mixins.scss @@ -0,0 +1,18 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Makes SVGs accessible in high contrast mode +/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345 +/// @access public +/// @group @carbon/icons +@mixin carbon--icons { + @media screen and (-ms-high-contrast: active) { + svg { + fill: ButtonText; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss new file mode 100644 index 000000000000..f7fbca1d0adc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Used by `exports` mixin to track which modules have been imported +/// @type Map +/// @access public +/// @group @carbon/import-once +$imported-modules: () !default; + +/// Module export mixin that helps making sure a module is imported once and only once +/// @access public +/// @param {String} $name - Name of exported module +/// @param {Bool} $warn [false] - Warn when a module has been already imported +/// @content Declaration blocks to be imported +/// @group @carbon/import-once +@mixin exports($name, $warn: false) { + @if (index($imported-modules, $name) == null) { + $imported-modules: append($imported-modules, $name) !global; + @content; + } @else if $warn == true { + @warn 'Module `#{$name}` has already been imported.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/index.scss new file mode 100644 index 000000000000..182f0ad45699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/import-once/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'import-once'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/index.scss new file mode 100644 index 000000000000..6a57c8801bb7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/index.scss @@ -0,0 +1,15 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import '@carbon/import-once/scss/import-once'; +@import '@carbon/colors/scss/colors'; +@import '@carbon/themes/scss/themes'; +@import '@carbon/layout/scss/layout'; +@import '@carbon/grid/scss/grid'; +@import '@carbon/icons/scss/icons'; +@import '@carbon/type/scss/type'; +@import '@carbon/motion/scss/motion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss new file mode 100644 index 000000000000..6312bbf7d572 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss @@ -0,0 +1,246 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@import 'convert'; +@import 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter: carbon--rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter--condensed: carbon--rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: carbon--rem(320px), + ), + md: ( + columns: 8, + margin: carbon--rem(16px), + width: carbon--rem(672px), + ), + lg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1056px), + ), + xlg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1312px), + ), + max: ( + columns: 16, + margin: carbon--rem(24px), + width: carbon--rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-next( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n < length($breakpoint-names) { + @return nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-prev( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function carbon--is-smallest-breakpoint( + $name, + $breakpoints: $carbon--grid-breakpoints +) { + @return index(map-keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--largest-breakpoint-name( + $breakpoints: $carbon--grid-breakpoints +) { + $total-breakpoints: length($breakpoints); + @return carbon--key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width); + @if carbon--is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-between( + $lower, + $upper, + $breakpoints: $carbon--grid-breakpoints +) { + $is-number-lower: type-of($lower) == 'number'; + $is-number-upper: type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if( + not $is-number-lower and $min, + map-get($min, width) + 0.02, + $min + ); + $max-width: if( + not $is-number-upper and $max, + map-get($max, width) - 0.02, + $max + ); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include carbon--breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include carbon--breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint(carbon--largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.import.scss new file mode 100644 index 000000000000..f8cab364b5f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.import.scss @@ -0,0 +1,65 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss new file mode 100644 index 000000000000..1082749a63e1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss @@ -0,0 +1,54 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1rem; +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1em; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.import.scss new file mode 100644 index 000000000000..15e9f7090f33 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.import.scss @@ -0,0 +1,117 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use "sass:math"; +@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss new file mode 100644 index 000000000000..a8113d75f885 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_key-height.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@import 'breakpoint'; +@import 'utilities'; + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @return ($width - (2 * $margin)) / $columns; + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss new file mode 100644 index 000000000000..c79b6ed564c2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_mini-unit.scss @@ -0,0 +1,23 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; + +/// Default mini-unit value +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--mini-unit-size: 8px !default; + +/// Get the value of the corresponding number of units +/// @param {Number} $count - The number of units to get the value for +/// @return {Number} In rem units +/// @access public +/// @group @carbon/layout +@function carbon--mini-units($count) { + @return carbon--rem($carbon--mini-unit-size * $count); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss new file mode 100644 index 000000000000..ae11fb9e45b9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_spacing.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/spacing'; +@import './generated/layout'; +@import './generated/fluid-spacing'; +@import './generated/container'; +@import './generated/icon-size'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss new file mode 100644 index 000000000000..af8e1e0eb4e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function carbon--key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_container.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_container.scss new file mode 100644 index 000000000000..c7ec355b9503 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_container.scss @@ -0,0 +1,73 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-01: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-02: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-03: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-05: 4rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--container: ( + $carbon--container-01, + $carbon--container-02, + $carbon--container-03, + $carbon--container-04, + $carbon--container-05 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-01 +$container-01: $carbon--container-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-02 +$container-02: $carbon--container-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-03 +$container-03: $carbon--container-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-04 +$container-04: $carbon--container-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-05 +$container-05: $carbon--container-05 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2532fa617901 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_fluid-spacing.scss @@ -0,0 +1,61 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-04: 10vw !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-01 +$fluid-spacing-01: $carbon--fluid-spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-02 +$fluid-spacing-02: $carbon--fluid-spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-03 +$fluid-spacing-03: $carbon--fluid-spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-04 +$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_icon-size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_icon-size.scss new file mode 100644 index 000000000000..a3537a118520 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_icon-size.scss @@ -0,0 +1,34 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-02: 1.25rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-01 +$icon-size-01: $carbon--icon-size-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-02 +$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_layout.scss new file mode 100644 index 000000000000..cbdc2c1af6a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_layout.scss @@ -0,0 +1,97 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-02: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-03: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-05: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-06: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-07: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-01 +$layout-01: $carbon--layout-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-02 +$layout-02: $carbon--layout-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-03 +$layout-03: $carbon--layout-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-04 +$layout-04: $carbon--layout-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-05 +$layout-05: $carbon--layout-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-06 +$layout-06: $carbon--layout-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-07 +$layout-07: $carbon--layout-07 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_size.scss new file mode 100644 index 000000000000..220cefc4baa1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_size.scss @@ -0,0 +1,17 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$size-xs: 1.5rem; +$size-sm: 2rem; +$size-md: 2.5rem; +$size-lg: 3rem; +$size-xl: 4rem; +$size-2xl: 5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_spacing.scss new file mode 100644 index 000000000000..67fc46d90cc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/generated/_spacing.scss @@ -0,0 +1,169 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-13: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09, + $carbon--spacing-10, + $carbon--spacing-11, + $carbon--spacing-12, + $carbon--spacing-13 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-01 +$spacing-01: $carbon--spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-02 +$spacing-02: $carbon--spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-03 +$spacing-03: $carbon--spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-04 +$spacing-04: $carbon--spacing-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-05 +$spacing-05: $carbon--spacing-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-06 +$spacing-06: $carbon--spacing-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-07 +$spacing-07: $carbon--spacing-07 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-08 +$spacing-08: $carbon--spacing-08 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-09 +$spacing-09: $carbon--spacing-09 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-10 +$spacing-10: $carbon--spacing-10 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-11 +$spacing-11: $carbon--spacing-11 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-12 +$spacing-12: $carbon--spacing-12 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-13 +$spacing-13: $carbon--spacing-13 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/index.scss new file mode 100644 index 000000000000..7c7fe0aca3be --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'layout'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss new file mode 100644 index 000000000000..acc1f1e8f702 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/layout.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; +@import 'breakpoint'; +@import 'mini-unit'; +@import 'spacing'; +@import 'key-height'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_breakpoint.scss new file mode 100644 index 000000000000..e10967e39c7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_breakpoint.scss @@ -0,0 +1,232 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'convert'; +@use 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_convert.scss new file mode 100644 index 000000000000..3b28c4f09127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_convert.scss @@ -0,0 +1,51 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_spacing.scss new file mode 100644 index 000000000000..42e124108c91 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_spacing.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './generated/fluid-spacing'; +@forward './generated/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_utilities.scss new file mode 100644 index 000000000000..26a423de7b48 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2529ccd2dd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_fluid-spacing.scss @@ -0,0 +1,37 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-04: 10vw !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$fluid-spacing: ( + fluid-spacing-01: $fluid-spacing-01, + fluid-spacing-02: $fluid-spacing-02, + fluid-spacing-03: $fluid-spacing-03, + fluid-spacing-04: $fluid-spacing-04, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_spacing.scss new file mode 100644 index 000000000000..42f8fb4df1ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/layout/modules/generated/_spacing.scss @@ -0,0 +1,91 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-13: 10rem !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$spacing: ( + spacing-01: $spacing-01, + spacing-02: $spacing-02, + spacing-03: $spacing-03, + spacing-04: $spacing-04, + spacing-05: $spacing-05, + spacing-06: $spacing-06, + spacing-07: $spacing-07, + spacing-08: $spacing-08, + spacing-09: $spacing-09, + spacing-10: $spacing-10, + spacing-11: $spacing-11, + spacing-12: $spacing-12, + spacing-13: $spacing-13, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/index.scss new file mode 100644 index 000000000000..6aebad33fbfb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'motion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss new file mode 100644 index 000000000000..eddd8c5891ca --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss @@ -0,0 +1,78 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @access public +/// @group @carbon/motion +$fast-01: 70ms !default; + +/// @access public +/// @group @carbon/motion +$fast-02: 110ms !default; + +/// @access public +/// @group @carbon/motion +$moderate-01: 150ms !default; + +/// @access public +/// @group @carbon/motion +$moderate-02: 240ms !default; + +/// @access public +/// @group @carbon/motion +$slow-01: 400ms !default; + +/// @access public +/// @group @carbon/motion +$slow-02: 700ms !default; + +/// Common component easings +/// @type Map +/// @access public +/// @group @carbon/motion +$carbon--easings: ( + standard: ( + productive: cubic-bezier(0.2, 0, 0.38, 0.9), + expressive: cubic-bezier(0.4, 0.14, 0.3, 1), + ), + entrance: ( + productive: cubic-bezier(0, 0, 0.38, 0.9), + expressive: cubic-bezier(0, 0, 0.3, 1), + ), + exit: ( + productive: cubic-bezier(0.2, 0, 1, 0.9), + expressive: cubic-bezier(0.4, 0.14, 1, 1), + ), +); + +/// Get the transition-timing-function for a given easing and motion mode +/// @param {String} $name - Can be `standard`, `entrance`, or `exit` +/// @param {String} $mode [productive] - Can be `productive` or `expressive` +/// @param {Map} $easings [$carbon--easings] - Easings map +/// @access public +/// @group @carbon/motion +/// @return {Function} CSS `cubic-bezier()` function +@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) { + @if map-has-key($easings, $name) { + $easing: map-get($easings, $name); + @if map-has-key($easing, $mode) { + @return map-get($easing, $mode); + } @else { + @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.'; + } + } @else { + @error 'Unable to find an easing named #{$name} in our supported easings.'; + } +} + +/// Set the transition-timing-function for a given easing and motion mode +/// @param {String} $name - The name of the easing curve to apply +/// @param {String} $mode - The mode for the easing curve to use +/// @access public +/// @group @carbon/motion +@mixin carbon--motion($name, $mode) { + transition-timing-function: carbon--motion($name, $mode); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss new file mode 100644 index 000000000000..6f1e2adce38d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss @@ -0,0 +1,39 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @access private +/// @group @carbon/themes +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/themes +@mixin custom-property($name, $value, $prefix: $custom-property-prefix) { + @if type-of($value) == map { + @each $property, $property-value in $value { + // Only support one-level of depth for values that are maps. This is to + // avoid bringing properties like `breakpoints` on type tokens + @if type-of($property-value) != map { + @include custom-property('#{$name}-#{$property}', $property-value); + } + } + } @else { + --#{$prefix}-#{$name}: #{$value}; + } +} + +/// @access private +/// @group @carbon/themes +@function should-emit($theme-a, $theme-b, $token, $emit-difference) { + @if $emit-difference == false { + @return true; + } + @return map-get($theme-a, $token) != map-get($theme-b, $token); +} + +// We import mixins last so that these methods are made available to the +// carbon--theme mixin +@import './generated/mixins'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss new file mode 100644 index 000000000000..dd8c574ee6d9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/tokens'; +@import './generated/themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss new file mode 100644 index 000000000000..0d6a099bfae8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/tokens'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_themes.scss new file mode 100644 index 000000000000..4e9bcd947b07 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_themes.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'generated/themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_tokens.scss new file mode 100644 index 000000000000..ade2391ec944 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/_tokens.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'generated/tokens'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_themes.scss new file mode 100644 index 000000000000..1988a6bbbd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_themes.scss @@ -0,0 +1,271 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Token values for the white theme +$white: ( + active-danger: #750e13, + active-light-ui: #c6c6c6, + active-primary: #002d9c, + active-secondary: #6f6f6f, + active-tertiary: #002d9c, + active-ui: #c6c6c6, + button-separator: #e0e0e0, + danger-01: #da1e28, + danger-02: #da1e28, + decorative-01: #e0e0e0, + disabled-01: #f4f4f4, + disabled-02: #c6c6c6, + disabled-03: #8d8d8d, + hover-danger: #b81921, + hover-field: #e5e5e5, + hover-light-ui: #e5e5e5, + hover-primary: #0353e9, + hover-primary-text: #0043ce, + hover-row: #e5e5e5, + hover-secondary: #4c4c4c, + hover-selected-ui: #cacaca, + hover-tertiary: #0353e9, + hover-ui: #e5e5e5, + icon-01: #161616, + icon-02: #525252, + icon-03: #ffffff, + interactive-01: #0f62fe, + interactive-02: #393939, + interactive-03: #0f62fe, + interactive-04: #0f62fe, + inverse-01: #ffffff, + inverse-02: #393939, + inverse-focus-ui: #ffffff, + inverse-hover-ui: #4c4c4c, + inverse-link: #78a9ff, + inverse-support-01: #fa4d56, + inverse-support-02: #42be65, + inverse-support-03: #f1c21b, + inverse-support-04: #4589ff, + link-01: #0f62fe, + link-02: #0043ce, + overlay-01: rgba(22, 22, 22, 0.5), + selected-light-ui: #e0e0e0, + selected-ui: #e0e0e0, + skeleton-01: #e5e5e5, + skeleton-02: #c6c6c6, + support-01: #da1e28, + support-02: #198038, + support-03: #f1c21b, + support-04: #0043ce, + text-01: #161616, + text-02: #525252, + text-03: #a8a8a8, + text-04: #ffffff, + text-05: #6f6f6f, + ui-01: #f4f4f4, + ui-02: #ffffff, + ui-03: #e0e0e0, + ui-04: #8d8d8d, + ui-05: #161616, + ui-background: #ffffff, + visited-link: #8a3ffc, +) !default; + +/// Token values for the g10 theme +$g10: ( + active-danger: #750e13, + active-light-ui: #c6c6c6, + active-primary: #002d9c, + active-secondary: #6f6f6f, + active-tertiary: #002d9c, + active-ui: #c6c6c6, + button-separator: #e0e0e0, + danger-01: #da1e28, + danger-02: #da1e28, + decorative-01: #e0e0e0, + disabled-01: #ffffff, + disabled-02: #c6c6c6, + disabled-03: #8d8d8d, + hover-danger: #b81921, + hover-field: #e5e5e5, + hover-light-ui: #e5e5e5, + hover-primary: #0353e9, + hover-primary-text: #0043ce, + hover-row: #e5e5e5, + hover-secondary: #4c4c4c, + hover-selected-ui: #cacaca, + hover-tertiary: #0353e9, + hover-ui: #e5e5e5, + icon-01: #161616, + icon-02: #525252, + icon-03: #ffffff, + interactive-01: #0f62fe, + interactive-02: #393939, + interactive-03: #0f62fe, + interactive-04: #0f62fe, + inverse-01: #ffffff, + inverse-02: #393939, + inverse-focus-ui: #ffffff, + inverse-hover-ui: #4c4c4c, + inverse-link: #78a9ff, + inverse-support-01: #fa4d56, + inverse-support-02: #42be65, + inverse-support-03: #f1c21b, + inverse-support-04: #4589ff, + link-01: #0f62fe, + link-02: #0043ce, + overlay-01: rgba(22, 22, 22, 0.5), + selected-light-ui: #e0e0e0, + selected-ui: #e0e0e0, + skeleton-01: #e5e5e5, + skeleton-02: #c6c6c6, + support-01: #da1e28, + support-02: #198038, + support-03: #f1c21b, + support-04: #0043ce, + text-01: #161616, + text-02: #525252, + text-03: #a8a8a8, + text-04: #ffffff, + text-05: #6f6f6f, + ui-01: #ffffff, + ui-02: #f4f4f4, + ui-03: #e0e0e0, + ui-04: #8d8d8d, + ui-05: #161616, + ui-background: #f4f4f4, + visited-link: #8a3ffc, +) !default; + +/// Token values for the g90 theme +$g90: ( + active-danger: #750e13, + active-light-ui: #8d8d8d, + active-primary: #002d9c, + active-secondary: #393939, + active-tertiary: #c6c6c6, + active-ui: #6f6f6f, + button-separator: #161616, + danger-01: #da1e28, + danger-02: #ff8389, + decorative-01: #6f6f6f, + disabled-01: #393939, + disabled-02: #6f6f6f, + disabled-03: #a8a8a8, + hover-danger: #b81921, + hover-field: #4c4c4c, + hover-light-ui: #656565, + hover-primary: #0353e9, + hover-primary-text: #a6c8ff, + hover-row: #4c4c4c, + hover-secondary: #606060, + hover-selected-ui: #656565, + hover-tertiary: #f4f4f4, + hover-ui: #4c4c4c, + icon-01: #f4f4f4, + icon-02: #c6c6c6, + icon-03: #ffffff, + interactive-01: #0f62fe, + interactive-02: #6f6f6f, + interactive-03: #ffffff, + interactive-04: #4589ff, + inverse-01: #161616, + inverse-02: #f4f4f4, + inverse-focus-ui: #0f62fe, + inverse-hover-ui: #e5e5e5, + inverse-link: #0f62fe, + inverse-support-01: #da1e28, + inverse-support-02: #24a148, + inverse-support-03: #f1c21b, + inverse-support-04: #0f62fe, + link-01: #78a9ff, + link-02: #a6c8ff, + overlay-01: rgba(0, 0, 0, 0.65), + selected-light-ui: #6f6f6f, + selected-ui: #525252, + skeleton-01: #353535, + skeleton-02: #525252, + support-01: #ff8389, + support-02: #42be65, + support-03: #f1c21b, + support-04: #4589ff, + text-01: #f4f4f4, + text-02: #c6c6c6, + text-03: #6f6f6f, + text-04: #ffffff, + text-05: #8d8d8d, + ui-01: #393939, + ui-02: #525252, + ui-03: #525252, + ui-04: #8d8d8d, + ui-05: #f4f4f4, + ui-background: #262626, + visited-link: #be95ff, +) !default; + +/// Token values for the g100 theme +$g100: ( + active-danger: #750e13, + active-light-ui: #6f6f6f, + active-primary: #002d9c, + active-secondary: #393939, + active-tertiary: #c6c6c6, + active-ui: #525252, + button-separator: #161616, + danger-01: #da1e28, + danger-02: #fa4d56, + decorative-01: #525252, + disabled-01: #262626, + disabled-02: #525252, + disabled-03: #8d8d8d, + hover-danger: #b81921, + hover-field: #353535, + hover-light-ui: #4c4c4c, + hover-primary: #0353e9, + hover-primary-text: #a6c8ff, + hover-row: #353535, + hover-secondary: #606060, + hover-selected-ui: #4c4c4c, + hover-tertiary: #f4f4f4, + hover-ui: #353535, + icon-01: #f4f4f4, + icon-02: #c6c6c6, + icon-03: #ffffff, + interactive-01: #0f62fe, + interactive-02: #6f6f6f, + interactive-03: #ffffff, + interactive-04: #4589ff, + inverse-01: #161616, + inverse-02: #f4f4f4, + inverse-focus-ui: #0f62fe, + inverse-hover-ui: #e5e5e5, + inverse-link: #0f62fe, + inverse-support-01: #da1e28, + inverse-support-02: #24a148, + inverse-support-03: #f1c21b, + inverse-support-04: #0f62fe, + link-01: #78a9ff, + link-02: #a6c8ff, + overlay-01: rgba(0, 0, 0, 0.65), + selected-light-ui: #525252, + selected-ui: #393939, + skeleton-01: #353535, + skeleton-02: #525252, + support-01: #fa4d56, + support-02: #42be65, + support-03: #f1c21b, + support-04: #4589ff, + text-01: #f4f4f4, + text-02: #c6c6c6, + text-03: #6f6f6f, + text-04: #ffffff, + text-05: #8d8d8d, + ui-01: #262626, + ui-02: #393939, + ui-03: #393939, + ui-04: #6f6f6f, + ui-05: #f4f4f4, + ui-background: #161616, + visited-link: #be95ff, +) !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_tokens.scss new file mode 100644 index 000000000000..cb6df17f6042 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/compat/generated/_tokens.scss @@ -0,0 +1,206 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use '../../modules/config'; +@use '../../modules/theme'; + +/// Internal helper for generating CSS Custom Properties +@function _get($token) { + @if config.$use-fallback-value == false { + @return var(--#{config.$prefix}-#{$token}); + } @else { + @return var(--#{config.$prefix}-#{$token}, #{theme.get($token)}); + } +} + +/// CSS Custom Property for the interactive-01 token +$interactive-01: _get('interactive-01') !default; + +/// CSS Custom Property for the interactive-02 token +$interactive-02: _get('interactive-02') !default; + +/// CSS Custom Property for the interactive-03 token +$interactive-03: _get('interactive-03') !default; + +/// CSS Custom Property for the interactive-04 token +$interactive-04: _get('interactive-04') !default; + +/// CSS Custom Property for the ui-background token +$ui-background: _get('ui-background') !default; + +/// CSS Custom Property for the ui-01 token +$ui-01: _get('ui-01') !default; + +/// CSS Custom Property for the ui-02 token +$ui-02: _get('ui-02') !default; + +/// CSS Custom Property for the ui-03 token +$ui-03: _get('ui-03') !default; + +/// CSS Custom Property for the ui-04 token +$ui-04: _get('ui-04') !default; + +/// CSS Custom Property for the ui-05 token +$ui-05: _get('ui-05') !default; + +/// CSS Custom Property for the text-01 token +$text-01: _get('text-01') !default; + +/// CSS Custom Property for the text-02 token +$text-02: _get('text-02') !default; + +/// CSS Custom Property for the text-03 token +$text-03: _get('text-03') !default; + +/// CSS Custom Property for the text-04 token +$text-04: _get('text-04') !default; + +/// CSS Custom Property for the text-05 token +$text-05: _get('text-05') !default; + +/// CSS Custom Property for the icon-01 token +$icon-01: _get('icon-01') !default; + +/// CSS Custom Property for the icon-02 token +$icon-02: _get('icon-02') !default; + +/// CSS Custom Property for the icon-03 token +$icon-03: _get('icon-03') !default; + +/// CSS Custom Property for the link-01 token +$link-01: _get('link-01') !default; + +/// CSS Custom Property for the link-02 token +$link-02: _get('link-02') !default; + +/// CSS Custom Property for the inverse-link token +$inverse-link: _get('inverse-link') !default; + +/// CSS Custom Property for the inverse-01 token +$inverse-01: _get('inverse-01') !default; + +/// CSS Custom Property for the inverse-02 token +$inverse-02: _get('inverse-02') !default; + +/// CSS Custom Property for the support-01 token +$support-01: _get('support-01') !default; + +/// CSS Custom Property for the support-02 token +$support-02: _get('support-02') !default; + +/// CSS Custom Property for the support-03 token +$support-03: _get('support-03') !default; + +/// CSS Custom Property for the support-04 token +$support-04: _get('support-04') !default; + +/// CSS Custom Property for the inverse-support-01 token +$inverse-support-01: _get('inverse-support-01') !default; + +/// CSS Custom Property for the inverse-support-02 token +$inverse-support-02: _get('inverse-support-02') !default; + +/// CSS Custom Property for the inverse-support-03 token +$inverse-support-03: _get('inverse-support-03') !default; + +/// CSS Custom Property for the inverse-support-04 token +$inverse-support-04: _get('inverse-support-04') !default; + +/// CSS Custom Property for the overlay-01 token +$overlay-01: _get('overlay-01') !default; + +/// CSS Custom Property for the danger-01 token +$danger-01: _get('danger-01') !default; + +/// CSS Custom Property for the danger-02 token +$danger-02: _get('danger-02') !default; + +/// CSS Custom Property for the inverse-focus-ui token +$inverse-focus-ui: _get('inverse-focus-ui') !default; + +/// CSS Custom Property for the hover-primary token +$hover-primary: _get('hover-primary') !default; + +/// CSS Custom Property for the active-primary token +$active-primary: _get('active-primary') !default; + +/// CSS Custom Property for the hover-primary-text token +$hover-primary-text: _get('hover-primary-text') !default; + +/// CSS Custom Property for the hover-secondary token +$hover-secondary: _get('hover-secondary') !default; + +/// CSS Custom Property for the active-secondary token +$active-secondary: _get('active-secondary') !default; + +/// CSS Custom Property for the hover-tertiary token +$hover-tertiary: _get('hover-tertiary') !default; + +/// CSS Custom Property for the active-tertiary token +$active-tertiary: _get('active-tertiary') !default; + +/// CSS Custom Property for the hover-ui token +$hover-ui: _get('hover-ui') !default; + +/// CSS Custom Property for the hover-light-ui token +$hover-light-ui: _get('hover-light-ui') !default; + +/// CSS Custom Property for the hover-selected-ui token +$hover-selected-ui: _get('hover-selected-ui') !default; + +/// CSS Custom Property for the active-ui token +$active-ui: _get('active-ui') !default; + +/// CSS Custom Property for the active-light-ui token +$active-light-ui: _get('active-light-ui') !default; + +/// CSS Custom Property for the selected-ui token +$selected-ui: _get('selected-ui') !default; + +/// CSS Custom Property for the selected-light-ui token +$selected-light-ui: _get('selected-light-ui') !default; + +/// CSS Custom Property for the inverse-hover-ui token +$inverse-hover-ui: _get('inverse-hover-ui') !default; + +/// CSS Custom Property for the hover-danger token +$hover-danger: _get('hover-danger') !default; + +/// CSS Custom Property for the active-danger token +$active-danger: _get('active-danger') !default; + +/// CSS Custom Property for the hover-row token +$hover-row: _get('hover-row') !default; + +/// CSS Custom Property for the visited-link token +$visited-link: _get('visited-link') !default; + +/// CSS Custom Property for the disabled-01 token +$disabled-01: _get('disabled-01') !default; + +/// CSS Custom Property for the disabled-02 token +$disabled-02: _get('disabled-02') !default; + +/// CSS Custom Property for the disabled-03 token +$disabled-03: _get('disabled-03') !default; + +/// CSS Custom Property for the decorative-01 token +$decorative-01: _get('decorative-01') !default; + +/// CSS Custom Property for the button-separator token +$button-separator: _get('button-separator') !default; + +/// CSS Custom Property for the skeleton-01 token +$skeleton-01: _get('skeleton-01') !default; + +/// CSS Custom Property for the skeleton-02 token +$skeleton-02: _get('skeleton-02') !default; + +/// CSS Custom Property for the hover-field token +$hover-field: _get('hover-field') !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss new file mode 100644 index 000000000000..c8e544c64051 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss @@ -0,0 +1,3622 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './themes'; + +/// Define theme variables from a map of tokens +/// @access public +/// @param {Map} $theme [$carbon--theme] - Map of theme tokens +/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens +/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables. +/// +/// @example scss +/// // Default usage +/// @include carbon--theme(); +/// +/// // Alternate styling (not white theme) +/// @include carbon--theme($carbon--theme--g90) { +/// // declarations... +/// } +/// +/// // Inline styling +/// @include carbon--theme($carbon--theme--g90) { +/// .my-dark-theme { +/// // declarations... +/// } +/// } +/// +/// @group @carbon/themes +@mixin carbon--theme( + $theme: $carbon--theme, + $emit-custom-properties: false, + $emit-difference: false +) { + $parent-carbon-theme: $carbon--theme; + $carbon--theme: $theme !global; + $interactive-01: map-get($theme, 'interactive-01') !global; + $interactive-02: map-get($theme, 'interactive-02') !global; + $interactive-03: map-get($theme, 'interactive-03') !global; + $interactive-04: map-get($theme, 'interactive-04') !global; + $ui-background: map-get($theme, 'ui-background') !global; + $ui-01: map-get($theme, 'ui-01') !global; + $ui-02: map-get($theme, 'ui-02') !global; + $ui-03: map-get($theme, 'ui-03') !global; + $ui-04: map-get($theme, 'ui-04') !global; + $ui-05: map-get($theme, 'ui-05') !global; + $text-01: map-get($theme, 'text-01') !global; + $text-02: map-get($theme, 'text-02') !global; + $text-03: map-get($theme, 'text-03') !global; + $text-04: map-get($theme, 'text-04') !global; + $text-05: map-get($theme, 'text-05') !global; + $text-error: map-get($theme, 'text-error') !global; + $icon-01: map-get($theme, 'icon-01') !global; + $icon-02: map-get($theme, 'icon-02') !global; + $icon-03: map-get($theme, 'icon-03') !global; + $link-01: map-get($theme, 'link-01') !global; + $link-02: map-get($theme, 'link-02') !global; + $inverse-link: map-get($theme, 'inverse-link') !global; + $field-01: map-get($theme, 'field-01') !global; + $field-02: map-get($theme, 'field-02') !global; + $inverse-01: map-get($theme, 'inverse-01') !global; + $inverse-02: map-get($theme, 'inverse-02') !global; + $support-01: map-get($theme, 'support-01') !global; + $support-02: map-get($theme, 'support-02') !global; + $support-03: map-get($theme, 'support-03') !global; + $support-04: map-get($theme, 'support-04') !global; + $inverse-support-01: map-get($theme, 'inverse-support-01') !global; + $inverse-support-02: map-get($theme, 'inverse-support-02') !global; + $inverse-support-03: map-get($theme, 'inverse-support-03') !global; + $inverse-support-04: map-get($theme, 'inverse-support-04') !global; + $overlay-01: map-get($theme, 'overlay-01') !global; + $danger-01: map-get($theme, 'danger-01') !global; + $danger-02: map-get($theme, 'danger-02') !global; + $focus: map-get($theme, 'focus') !global; + $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global; + $hover-primary: map-get($theme, 'hover-primary') !global; + $active-primary: map-get($theme, 'active-primary') !global; + $hover-primary-text: map-get($theme, 'hover-primary-text') !global; + $hover-secondary: map-get($theme, 'hover-secondary') !global; + $active-secondary: map-get($theme, 'active-secondary') !global; + $hover-tertiary: map-get($theme, 'hover-tertiary') !global; + $active-tertiary: map-get($theme, 'active-tertiary') !global; + $hover-ui: map-get($theme, 'hover-ui') !global; + $hover-light-ui: map-get($theme, 'hover-light-ui') !global; + $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global; + $active-ui: map-get($theme, 'active-ui') !global; + $active-light-ui: map-get($theme, 'active-light-ui') !global; + $selected-ui: map-get($theme, 'selected-ui') !global; + $selected-light-ui: map-get($theme, 'selected-light-ui') !global; + $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global; + $hover-danger: map-get($theme, 'hover-danger') !global; + $active-danger: map-get($theme, 'active-danger') !global; + $hover-row: map-get($theme, 'hover-row') !global; + $visited-link: map-get($theme, 'visited-link') !global; + $disabled-01: map-get($theme, 'disabled-01') !global; + $disabled-02: map-get($theme, 'disabled-02') !global; + $disabled-03: map-get($theme, 'disabled-03') !global; + $highlight: map-get($theme, 'highlight') !global; + $decorative-01: map-get($theme, 'decorative-01') !global; + $button-separator: map-get($theme, 'button-separator') !global; + $skeleton-01: map-get($theme, 'skeleton-01') !global; + $skeleton-02: map-get($theme, 'skeleton-02') !global; + $background: map-get($theme, 'background') !global; + $layer: map-get($theme, 'layer') !global; + $layer-accent: map-get($theme, 'layer-accent') !global; + $layer-accent-hover: map-get($theme, 'layer-accent-hover') !global; + $layer-accent-active: map-get($theme, 'layer-accent-active') !global; + $field: map-get($theme, 'field') !global; + $background-inverse: map-get($theme, 'background-inverse') !global; + $background-brand: map-get($theme, 'background-brand') !global; + $interactive: map-get($theme, 'interactive') !global; + $border-subtle: map-get($theme, 'border-subtle') !global; + $border-strong: map-get($theme, 'border-strong') !global; + $border-inverse: map-get($theme, 'border-inverse') !global; + $border-interactive: map-get($theme, 'border-interactive') !global; + $text-primary: map-get($theme, 'text-primary') !global; + $text-secondary: map-get($theme, 'text-secondary') !global; + $text-placeholder: map-get($theme, 'text-placeholder') !global; + $text-helper: map-get($theme, 'text-helper') !global; + $text-on-color: map-get($theme, 'text-on-color') !global; + $text-inverse: map-get($theme, 'text-inverse') !global; + $link-primary: map-get($theme, 'link-primary') !global; + $link-secondary: map-get($theme, 'link-secondary') !global; + $link-visited: map-get($theme, 'link-visited') !global; + $link-inverse: map-get($theme, 'link-inverse') !global; + $icon-primary: map-get($theme, 'icon-primary') !global; + $icon-secondary: map-get($theme, 'icon-secondary') !global; + $icon-on-color: map-get($theme, 'icon-on-color') !global; + $icon-inverse: map-get($theme, 'icon-inverse') !global; + $support-error: map-get($theme, 'support-error') !global; + $support-success: map-get($theme, 'support-success') !global; + $support-warning: map-get($theme, 'support-warning') !global; + $support-info: map-get($theme, 'support-info') !global; + $support-error-inverse: map-get($theme, 'support-error-inverse') !global; + $support-success-inverse: map-get($theme, 'support-success-inverse') !global; + $support-warning-inverse: map-get($theme, 'support-warning-inverse') !global; + $support-info-inverse: map-get($theme, 'support-info-inverse') !global; + $overlay: map-get($theme, 'overlay') !global; + $toggle-off: map-get($theme, 'toggle-off') !global; + $shadow: map-get($theme, 'shadow') !global; + $button-primary: map-get($theme, 'button-primary') !global; + $button-secondary: map-get($theme, 'button-secondary') !global; + $button-tertiary: map-get($theme, 'button-tertiary') !global; + $button-danger-primary: map-get($theme, 'button-danger-primary') !global; + $button-danger-secondary: map-get($theme, 'button-danger-secondary') !global; + $background-active: map-get($theme, 'background-active') !global; + $layer-active: map-get($theme, 'layer-active') !global; + $button-danger-active: map-get($theme, 'button-danger-active') !global; + $button-primary-active: map-get($theme, 'button-primary-active') !global; + $button-secondary-active: map-get($theme, 'button-secondary-active') !global; + $button-tertiary-active: map-get($theme, 'button-tertiary-active') !global; + $focus-inset: map-get($theme, 'focus-inset') !global; + $focus-inverse: map-get($theme, 'focus-inverse') !global; + $background-hover: map-get($theme, 'background-hover') !global; + $layer-hover: map-get($theme, 'layer-hover') !global; + $field-hover: map-get($theme, 'field-hover') !global; + $background-inverse-hover: map-get( + $theme, + 'background-inverse-hover' + ) !global; + $link-primary-hover: map-get($theme, 'link-primary-hover') !global; + $button-danger-hover: map-get($theme, 'button-danger-hover') !global; + $button-primary-hover: map-get($theme, 'button-primary-hover') !global; + $button-secondary-hover: map-get($theme, 'button-secondary-hover') !global; + $button-tertiary-hover: map-get($theme, 'button-tertiary-hover') !global; + $background-selected: map-get($theme, 'background-selected') !global; + $background-selected-hover: map-get( + $theme, + 'background-selected-hover' + ) !global; + $layer-selected: map-get($theme, 'layer-selected') !global; + $layer-selected-hover: map-get($theme, 'layer-selected-hover') !global; + $layer-selected-inverse: map-get($theme, 'layer-selected-inverse') !global; + $border-subtle-selected: map-get($theme, 'border-subtle-selected') !global; + $border-disabled: map-get($theme, 'border-disabled') !global; + $text-disabled: map-get($theme, 'text-disabled') !global; + $button-disabled: map-get($theme, 'button-disabled') !global; + $icon-disabled: map-get($theme, 'icon-disabled') !global; + $text-on-color-disabled: map-get($theme, 'text-on-color-disabled') !global; + $icon-on-color-disabled: map-get($theme, 'icon-on-color-disabled') !global; + $layer-selected-disabled: map-get($theme, 'layer-selected-disabled') !global; + $skeleton-background: map-get($theme, 'skeleton-background') !global; + $skeleton-element: map-get($theme, 'skeleton-element') !global; + $brand-01: map-get($theme, 'brand-01') !global; + $brand-02: map-get($theme, 'brand-02') !global; + $brand-03: map-get($theme, 'brand-03') !global; + $active-01: map-get($theme, 'active-01') !global; + $hover-field: map-get($theme, 'hover-field') !global; + $danger: map-get($theme, 'danger') !global; + $caption-01: map-get($theme, 'caption-01') !global; + $caption-02: map-get($theme, 'caption-02') !global; + $label-01: map-get($theme, 'label-01') !global; + $label-02: map-get($theme, 'label-02') !global; + $helper-text-01: map-get($theme, 'helper-text-01') !global; + $helper-text-02: map-get($theme, 'helper-text-02') !global; + $body-short-01: map-get($theme, 'body-short-01') !global; + $body-long-01: map-get($theme, 'body-long-01') !global; + $body-short-02: map-get($theme, 'body-short-02') !global; + $body-long-02: map-get($theme, 'body-long-02') !global; + $code-01: map-get($theme, 'code-01') !global; + $code-02: map-get($theme, 'code-02') !global; + $heading-01: map-get($theme, 'heading-01') !global; + $productive-heading-01: map-get($theme, 'productive-heading-01') !global; + $heading-02: map-get($theme, 'heading-02') !global; + $productive-heading-02: map-get($theme, 'productive-heading-02') !global; + $productive-heading-03: map-get($theme, 'productive-heading-03') !global; + $productive-heading-04: map-get($theme, 'productive-heading-04') !global; + $productive-heading-05: map-get($theme, 'productive-heading-05') !global; + $productive-heading-06: map-get($theme, 'productive-heading-06') !global; + $productive-heading-07: map-get($theme, 'productive-heading-07') !global; + $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global; + $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global; + $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global; + $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global; + $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global; + $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global; + $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global; + $quotation-01: map-get($theme, 'quotation-01') !global; + $quotation-02: map-get($theme, 'quotation-02') !global; + $display-01: map-get($theme, 'display-01') !global; + $display-02: map-get($theme, 'display-02') !global; + $display-03: map-get($theme, 'display-03') !global; + $display-04: map-get($theme, 'display-04') !global; + $legal-01: map-get($theme, 'legal-01') !global; + $legal-02: map-get($theme, 'legal-02') !global; + $body-compact-01: map-get($theme, 'body-compact-01') !global; + $body-compact-02: map-get($theme, 'body-compact-02') !global; + $body-01: map-get($theme, 'body-01') !global; + $body-02: map-get($theme, 'body-02') !global; + $heading-compact-01: map-get($theme, 'heading-compact-01') !global; + $heading-compact-02: map-get($theme, 'heading-compact-02') !global; + $heading-03: map-get($theme, 'heading-03') !global; + $heading-04: map-get($theme, 'heading-04') !global; + $heading-05: map-get($theme, 'heading-05') !global; + $heading-06: map-get($theme, 'heading-06') !global; + $heading-07: map-get($theme, 'heading-07') !global; + $fluid-heading-03: map-get($theme, 'fluid-heading-03') !global; + $fluid-heading-04: map-get($theme, 'fluid-heading-04') !global; + $fluid-heading-05: map-get($theme, 'fluid-heading-05') !global; + $fluid-heading-06: map-get($theme, 'fluid-heading-06') !global; + $fluid-paragraph-01: map-get($theme, 'fluid-paragraph-01') !global; + $fluid-quotation-01: map-get($theme, 'fluid-quotation-01') !global; + $fluid-quotation-02: map-get($theme, 'fluid-quotation-02') !global; + $fluid-display-01: map-get($theme, 'fluid-display-01') !global; + $fluid-display-02: map-get($theme, 'fluid-display-02') !global; + $fluid-display-03: map-get($theme, 'fluid-display-03') !global; + $fluid-display-04: map-get($theme, 'fluid-display-04') !global; + $spacing-01: map-get($theme, 'spacing-01') !global; + $spacing-02: map-get($theme, 'spacing-02') !global; + $spacing-03: map-get($theme, 'spacing-03') !global; + $spacing-04: map-get($theme, 'spacing-04') !global; + $spacing-05: map-get($theme, 'spacing-05') !global; + $spacing-06: map-get($theme, 'spacing-06') !global; + $spacing-07: map-get($theme, 'spacing-07') !global; + $spacing-08: map-get($theme, 'spacing-08') !global; + $spacing-09: map-get($theme, 'spacing-09') !global; + $spacing-10: map-get($theme, 'spacing-10') !global; + $spacing-11: map-get($theme, 'spacing-11') !global; + $spacing-12: map-get($theme, 'spacing-12') !global; + $spacing-13: map-get($theme, 'spacing-13') !global; + $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global; + $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global; + $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global; + $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global; + $layout-01: map-get($theme, 'layout-01') !global; + $layout-02: map-get($theme, 'layout-02') !global; + $layout-03: map-get($theme, 'layout-03') !global; + $layout-04: map-get($theme, 'layout-04') !global; + $layout-05: map-get($theme, 'layout-05') !global; + $layout-06: map-get($theme, 'layout-06') !global; + $layout-07: map-get($theme, 'layout-07') !global; + $container-01: map-get($theme, 'container-01') !global; + $container-02: map-get($theme, 'container-02') !global; + $container-03: map-get($theme, 'container-03') !global; + $container-04: map-get($theme, 'container-04') !global; + $container-05: map-get($theme, 'container-05') !global; + $size-xsmall: map-get($theme, 'size-xsmall') !global; + $size-small: map-get($theme, 'size-small') !global; + $size-medium: map-get($theme, 'size-medium') !global; + $size-large: map-get($theme, 'size-large') !global; + $size-xlarge: map-get($theme, 'size-xlarge') !global; + $size-2XLarge: map-get($theme, 'size-2XLarge') !global; + $icon-size-01: map-get($theme, 'icon-size-01') !global; + $icon-size-02: map-get($theme, 'icon-size-02') !global; + + @if global-variable-exists('feature-flags') == + false or + global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-v11-release') != + true + { + $background: $ui-background !global; + $layer: $ui-01 !global; + $layer-accent: $ui-03 !global; + $field: $field-01 !global; + $background-inverse: $inverse-02 !global; + $background-brand: $interactive-01 !global; + $interactive: $interactive-04 !global; + $border-subtle: $ui-03 !global; + $border-strong: $ui-04 !global; + $border-inverse: $ui-05 !global; + $border-interactive: $interactive-04 !global; + $text-primary: $text-01 !global; + $text-secondary: $text-02 !global; + $text-placeholder: $text-03 !global; + $text-helper: $text-05 !global; + $text-on-color: $text-04 !global; + $text-inverse: $inverse-01 !global; + $link-primary: $link-01 !global; + $link-secondary: $link-02 !global; + $link-visited: $visited-link !global; + $link-inverse: $inverse-link !global; + $icon-primary: $icon-01 !global; + $icon-secondary: $icon-02 !global; + $icon-on-color: $icon-03 !global; + $icon-inverse: $inverse-01 !global; + $support-error: $support-01 !global; + $support-success: $support-02 !global; + $support-warning: $support-03 !global; + $support-info: $support-04 !global; + $support-error-inverse: $inverse-support-01 !global; + $support-success-inverse: $inverse-support-02 !global; + $support-warning-inverse: $inverse-support-03 !global; + $support-info-inverse: $inverse-support-04 !global; + $overlay: $overlay-01 !global; + $toggle-off: $ui-04 !global; + $button-primary: $interactive-01 !global; + $button-secondary: $interactive-02 !global; + $button-tertiary: $interactive-03 !global; + $button-danger-primary: $danger-01 !global; + $button-danger-secondary: $danger-02 !global; + $background-active: $active-ui !global; + $layer-active: $active-ui !global; + $button-danger-active: $active-danger !global; + $button-primary-active: $active-primary !global; + $button-secondary-active: $active-secondary !global; + $button-tertiary-active: $active-tertiary !global; + $focus-inset: $inverse-01 !global; + $focus-inverse: $inverse-focus-ui !global; + $background-hover: $hover-ui !global; + $layer-hover: $hover-ui !global; + $field-hover: $hover-ui !global; + $background-inverse-hover: $inverse-hover-ui !global; + $link-primary-hover: $hover-primary-text !global; + $button-danger-hover: $hover-danger !global; + $button-primary-hover: $hover-primary !global; + $button-secondary-hover: $hover-secondary !global; + $button-tertiary-hover: $hover-tertiary !global; + $background-selected: $selected-ui !global; + $background-selected-hover: $hover-selected-ui !global; + $layer-selected: $selected-ui !global; + $layer-selected-hover: $hover-selected-ui !global; + $layer-selected-inverse: $ui-05 !global; + $border-subtle-selected: $active-ui !global; + $border-disabled: $disabled-01 !global; + $text-disabled: $disabled-02 !global; + $button-disabled: $disabled-02 !global; + $icon-disabled: $disabled-02 !global; + $text-on-color-disabled: $disabled-03 !global; + $icon-on-color-disabled: $disabled-03 !global; + $layer-selected-disabled: $disabled-03 !global; + $skeleton-background: $skeleton-01 !global; + $skeleton-element: $skeleton-02 !global; + } + @if global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-css-custom-properties') + { + $interactive-01: var( + --#{$custom-property-prefix}-interactive-01, + map-get($theme, 'interactive-01') + ) !global; + $interactive-02: var( + --#{$custom-property-prefix}-interactive-02, + map-get($theme, 'interactive-02') + ) !global; + $interactive-03: var( + --#{$custom-property-prefix}-interactive-03, + map-get($theme, 'interactive-03') + ) !global; + $interactive-04: var( + --#{$custom-property-prefix}-interactive-04, + map-get($theme, 'interactive-04') + ) !global; + $ui-background: var( + --#{$custom-property-prefix}-ui-background, + map-get($theme, 'ui-background') + ) !global; + $ui-01: var( + --#{$custom-property-prefix}-ui-01, + map-get($theme, 'ui-01') + ) !global; + $ui-02: var( + --#{$custom-property-prefix}-ui-02, + map-get($theme, 'ui-02') + ) !global; + $ui-03: var( + --#{$custom-property-prefix}-ui-03, + map-get($theme, 'ui-03') + ) !global; + $ui-04: var( + --#{$custom-property-prefix}-ui-04, + map-get($theme, 'ui-04') + ) !global; + $ui-05: var( + --#{$custom-property-prefix}-ui-05, + map-get($theme, 'ui-05') + ) !global; + $text-01: var( + --#{$custom-property-prefix}-text-01, + map-get($theme, 'text-01') + ) !global; + $text-02: var( + --#{$custom-property-prefix}-text-02, + map-get($theme, 'text-02') + ) !global; + $text-03: var( + --#{$custom-property-prefix}-text-03, + map-get($theme, 'text-03') + ) !global; + $text-04: var( + --#{$custom-property-prefix}-text-04, + map-get($theme, 'text-04') + ) !global; + $text-05: var( + --#{$custom-property-prefix}-text-05, + map-get($theme, 'text-05') + ) !global; + $text-error: var( + --#{$custom-property-prefix}-text-error, + map-get($theme, 'text-error') + ) !global; + $icon-01: var( + --#{$custom-property-prefix}-icon-01, + map-get($theme, 'icon-01') + ) !global; + $icon-02: var( + --#{$custom-property-prefix}-icon-02, + map-get($theme, 'icon-02') + ) !global; + $icon-03: var( + --#{$custom-property-prefix}-icon-03, + map-get($theme, 'icon-03') + ) !global; + $link-01: var( + --#{$custom-property-prefix}-link-01, + map-get($theme, 'link-01') + ) !global; + $link-02: var( + --#{$custom-property-prefix}-link-02, + map-get($theme, 'link-02') + ) !global; + $inverse-link: var( + --#{$custom-property-prefix}-inverse-link, + map-get($theme, 'inverse-link') + ) !global; + $field-01: var( + --#{$custom-property-prefix}-field-01, + map-get($theme, 'field-01') + ) !global; + $field-02: var( + --#{$custom-property-prefix}-field-02, + map-get($theme, 'field-02') + ) !global; + $inverse-01: var( + --#{$custom-property-prefix}-inverse-01, + map-get($theme, 'inverse-01') + ) !global; + $inverse-02: var( + --#{$custom-property-prefix}-inverse-02, + map-get($theme, 'inverse-02') + ) !global; + $support-01: var( + --#{$custom-property-prefix}-support-01, + map-get($theme, 'support-01') + ) !global; + $support-02: var( + --#{$custom-property-prefix}-support-02, + map-get($theme, 'support-02') + ) !global; + $support-03: var( + --#{$custom-property-prefix}-support-03, + map-get($theme, 'support-03') + ) !global; + $support-04: var( + --#{$custom-property-prefix}-support-04, + map-get($theme, 'support-04') + ) !global; + $inverse-support-01: var( + --#{$custom-property-prefix}-inverse-support-01, + map-get($theme, 'inverse-support-01') + ) !global; + $inverse-support-02: var( + --#{$custom-property-prefix}-inverse-support-02, + map-get($theme, 'inverse-support-02') + ) !global; + $inverse-support-03: var( + --#{$custom-property-prefix}-inverse-support-03, + map-get($theme, 'inverse-support-03') + ) !global; + $inverse-support-04: var( + --#{$custom-property-prefix}-inverse-support-04, + map-get($theme, 'inverse-support-04') + ) !global; + $overlay-01: var( + --#{$custom-property-prefix}-overlay-01, + map-get($theme, 'overlay-01') + ) !global; + $danger-01: var( + --#{$custom-property-prefix}-danger-01, + map-get($theme, 'danger-01') + ) !global; + $danger-02: var( + --#{$custom-property-prefix}-danger-02, + map-get($theme, 'danger-02') + ) !global; + $focus: var( + --#{$custom-property-prefix}-focus, + map-get($theme, 'focus') + ) !global; + $inverse-focus-ui: var( + --#{$custom-property-prefix}-inverse-focus-ui, + map-get($theme, 'inverse-focus-ui') + ) !global; + $hover-primary: var( + --#{$custom-property-prefix}-hover-primary, + map-get($theme, 'hover-primary') + ) !global; + $active-primary: var( + --#{$custom-property-prefix}-active-primary, + map-get($theme, 'active-primary') + ) !global; + $hover-primary-text: var( + --#{$custom-property-prefix}-hover-primary-text, + map-get($theme, 'hover-primary-text') + ) !global; + $hover-secondary: var( + --#{$custom-property-prefix}-hover-secondary, + map-get($theme, 'hover-secondary') + ) !global; + $active-secondary: var( + --#{$custom-property-prefix}-active-secondary, + map-get($theme, 'active-secondary') + ) !global; + $hover-tertiary: var( + --#{$custom-property-prefix}-hover-tertiary, + map-get($theme, 'hover-tertiary') + ) !global; + $active-tertiary: var( + --#{$custom-property-prefix}-active-tertiary, + map-get($theme, 'active-tertiary') + ) !global; + $hover-ui: var( + --#{$custom-property-prefix}-hover-ui, + map-get($theme, 'hover-ui') + ) !global; + $hover-light-ui: var( + --#{$custom-property-prefix}-hover-light-ui, + map-get($theme, 'hover-light-ui') + ) !global; + $hover-selected-ui: var( + --#{$custom-property-prefix}-hover-selected-ui, + map-get($theme, 'hover-selected-ui') + ) !global; + $active-ui: var( + --#{$custom-property-prefix}-active-ui, + map-get($theme, 'active-ui') + ) !global; + $active-light-ui: var( + --#{$custom-property-prefix}-active-light-ui, + map-get($theme, 'active-light-ui') + ) !global; + $selected-ui: var( + --#{$custom-property-prefix}-selected-ui, + map-get($theme, 'selected-ui') + ) !global; + $selected-light-ui: var( + --#{$custom-property-prefix}-selected-light-ui, + map-get($theme, 'selected-light-ui') + ) !global; + $inverse-hover-ui: var( + --#{$custom-property-prefix}-inverse-hover-ui, + map-get($theme, 'inverse-hover-ui') + ) !global; + $hover-danger: var( + --#{$custom-property-prefix}-hover-danger, + map-get($theme, 'hover-danger') + ) !global; + $active-danger: var( + --#{$custom-property-prefix}-active-danger, + map-get($theme, 'active-danger') + ) !global; + $hover-row: var( + --#{$custom-property-prefix}-hover-row, + map-get($theme, 'hover-row') + ) !global; + $visited-link: var( + --#{$custom-property-prefix}-visited-link, + map-get($theme, 'visited-link') + ) !global; + $disabled-01: var( + --#{$custom-property-prefix}-disabled-01, + map-get($theme, 'disabled-01') + ) !global; + $disabled-02: var( + --#{$custom-property-prefix}-disabled-02, + map-get($theme, 'disabled-02') + ) !global; + $disabled-03: var( + --#{$custom-property-prefix}-disabled-03, + map-get($theme, 'disabled-03') + ) !global; + $highlight: var( + --#{$custom-property-prefix}-highlight, + map-get($theme, 'highlight') + ) !global; + $decorative-01: var( + --#{$custom-property-prefix}-decorative-01, + map-get($theme, 'decorative-01') + ) !global; + $button-separator: var( + --#{$custom-property-prefix}-button-separator, + map-get($theme, 'button-separator') + ) !global; + $skeleton-01: var( + --#{$custom-property-prefix}-skeleton-01, + map-get($theme, 'skeleton-01') + ) !global; + $skeleton-02: var( + --#{$custom-property-prefix}-skeleton-02, + map-get($theme, 'skeleton-02') + ) !global; + $background: var( + --#{$custom-property-prefix}-background, + map-get($theme, 'background') + ) !global; + $layer: var( + --#{$custom-property-prefix}-layer, + map-get($theme, 'layer') + ) !global; + $layer-accent: var( + --#{$custom-property-prefix}-layer-accent, + map-get($theme, 'layer-accent') + ) !global; + $layer-accent-hover: var( + --#{$custom-property-prefix}-layer-accent-hover, + map-get($theme, 'layer-accent-hover') + ) !global; + $layer-accent-active: var( + --#{$custom-property-prefix}-layer-accent-active, + map-get($theme, 'layer-accent-active') + ) !global; + $field: var( + --#{$custom-property-prefix}-field, + map-get($theme, 'field') + ) !global; + $background-inverse: var( + --#{$custom-property-prefix}-background-inverse, + map-get($theme, 'background-inverse') + ) !global; + $background-brand: var( + --#{$custom-property-prefix}-background-brand, + map-get($theme, 'background-brand') + ) !global; + $interactive: var( + --#{$custom-property-prefix}-interactive, + map-get($theme, 'interactive') + ) !global; + $border-subtle: var( + --#{$custom-property-prefix}-border-subtle, + map-get($theme, 'border-subtle') + ) !global; + $border-strong: var( + --#{$custom-property-prefix}-border-strong, + map-get($theme, 'border-strong') + ) !global; + $border-inverse: var( + --#{$custom-property-prefix}-border-inverse, + map-get($theme, 'border-inverse') + ) !global; + $border-interactive: var( + --#{$custom-property-prefix}-border-interactive, + map-get($theme, 'border-interactive') + ) !global; + $text-primary: var( + --#{$custom-property-prefix}-text-primary, + map-get($theme, 'text-primary') + ) !global; + $text-secondary: var( + --#{$custom-property-prefix}-text-secondary, + map-get($theme, 'text-secondary') + ) !global; + $text-placeholder: var( + --#{$custom-property-prefix}-text-placeholder, + map-get($theme, 'text-placeholder') + ) !global; + $text-helper: var( + --#{$custom-property-prefix}-text-helper, + map-get($theme, 'text-helper') + ) !global; + $text-on-color: var( + --#{$custom-property-prefix}-text-on-color, + map-get($theme, 'text-on-color') + ) !global; + $text-inverse: var( + --#{$custom-property-prefix}-text-inverse, + map-get($theme, 'text-inverse') + ) !global; + $link-primary: var( + --#{$custom-property-prefix}-link-primary, + map-get($theme, 'link-primary') + ) !global; + $link-secondary: var( + --#{$custom-property-prefix}-link-secondary, + map-get($theme, 'link-secondary') + ) !global; + $link-visited: var( + --#{$custom-property-prefix}-link-visited, + map-get($theme, 'link-visited') + ) !global; + $link-inverse: var( + --#{$custom-property-prefix}-link-inverse, + map-get($theme, 'link-inverse') + ) !global; + $icon-primary: var( + --#{$custom-property-prefix}-icon-primary, + map-get($theme, 'icon-primary') + ) !global; + $icon-secondary: var( + --#{$custom-property-prefix}-icon-secondary, + map-get($theme, 'icon-secondary') + ) !global; + $icon-on-color: var( + --#{$custom-property-prefix}-icon-on-color, + map-get($theme, 'icon-on-color') + ) !global; + $icon-inverse: var( + --#{$custom-property-prefix}-icon-inverse, + map-get($theme, 'icon-inverse') + ) !global; + $support-error: var( + --#{$custom-property-prefix}-support-error, + map-get($theme, 'support-error') + ) !global; + $support-success: var( + --#{$custom-property-prefix}-support-success, + map-get($theme, 'support-success') + ) !global; + $support-warning: var( + --#{$custom-property-prefix}-support-warning, + map-get($theme, 'support-warning') + ) !global; + $support-info: var( + --#{$custom-property-prefix}-support-info, + map-get($theme, 'support-info') + ) !global; + $support-error-inverse: var( + --#{$custom-property-prefix}-support-error-inverse, + map-get($theme, 'support-error-inverse') + ) !global; + $support-success-inverse: var( + --#{$custom-property-prefix}-support-success-inverse, + map-get($theme, 'support-success-inverse') + ) !global; + $support-warning-inverse: var( + --#{$custom-property-prefix}-support-warning-inverse, + map-get($theme, 'support-warning-inverse') + ) !global; + $support-info-inverse: var( + --#{$custom-property-prefix}-support-info-inverse, + map-get($theme, 'support-info-inverse') + ) !global; + $overlay: var( + --#{$custom-property-prefix}-overlay, + map-get($theme, 'overlay') + ) !global; + $toggle-off: var( + --#{$custom-property-prefix}-toggle-off, + map-get($theme, 'toggle-off') + ) !global; + $shadow: var( + --#{$custom-property-prefix}-shadow, + map-get($theme, 'shadow') + ) !global; + $button-primary: var( + --#{$custom-property-prefix}-button-primary, + map-get($theme, 'button-primary') + ) !global; + $button-secondary: var( + --#{$custom-property-prefix}-button-secondary, + map-get($theme, 'button-secondary') + ) !global; + $button-tertiary: var( + --#{$custom-property-prefix}-button-tertiary, + map-get($theme, 'button-tertiary') + ) !global; + $button-danger-primary: var( + --#{$custom-property-prefix}-button-danger-primary, + map-get($theme, 'button-danger-primary') + ) !global; + $button-danger-secondary: var( + --#{$custom-property-prefix}-button-danger-secondary, + map-get($theme, 'button-danger-secondary') + ) !global; + $background-active: var( + --#{$custom-property-prefix}-background-active, + map-get($theme, 'background-active') + ) !global; + $layer-active: var( + --#{$custom-property-prefix}-layer-active, + map-get($theme, 'layer-active') + ) !global; + $button-danger-active: var( + --#{$custom-property-prefix}-button-danger-active, + map-get($theme, 'button-danger-active') + ) !global; + $button-primary-active: var( + --#{$custom-property-prefix}-button-primary-active, + map-get($theme, 'button-primary-active') + ) !global; + $button-secondary-active: var( + --#{$custom-property-prefix}-button-secondary-active, + map-get($theme, 'button-secondary-active') + ) !global; + $button-tertiary-active: var( + --#{$custom-property-prefix}-button-tertiary-active, + map-get($theme, 'button-tertiary-active') + ) !global; + $focus-inset: var( + --#{$custom-property-prefix}-focus-inset, + map-get($theme, 'focus-inset') + ) !global; + $focus-inverse: var( + --#{$custom-property-prefix}-focus-inverse, + map-get($theme, 'focus-inverse') + ) !global; + $background-hover: var( + --#{$custom-property-prefix}-background-hover, + map-get($theme, 'background-hover') + ) !global; + $layer-hover: var( + --#{$custom-property-prefix}-layer-hover, + map-get($theme, 'layer-hover') + ) !global; + $field-hover: var( + --#{$custom-property-prefix}-field-hover, + map-get($theme, 'field-hover') + ) !global; + $background-inverse-hover: var( + --#{$custom-property-prefix}-background-inverse-hover, + map-get($theme, 'background-inverse-hover') + ) !global; + $link-primary-hover: var( + --#{$custom-property-prefix}-link-primary-hover, + map-get($theme, 'link-primary-hover') + ) !global; + $button-danger-hover: var( + --#{$custom-property-prefix}-button-danger-hover, + map-get($theme, 'button-danger-hover') + ) !global; + $button-primary-hover: var( + --#{$custom-property-prefix}-button-primary-hover, + map-get($theme, 'button-primary-hover') + ) !global; + $button-secondary-hover: var( + --#{$custom-property-prefix}-button-secondary-hover, + map-get($theme, 'button-secondary-hover') + ) !global; + $button-tertiary-hover: var( + --#{$custom-property-prefix}-button-tertiary-hover, + map-get($theme, 'button-tertiary-hover') + ) !global; + $background-selected: var( + --#{$custom-property-prefix}-background-selected, + map-get($theme, 'background-selected') + ) !global; + $background-selected-hover: var( + --#{$custom-property-prefix}-background-selected-hover, + map-get($theme, 'background-selected-hover') + ) !global; + $layer-selected: var( + --#{$custom-property-prefix}-layer-selected, + map-get($theme, 'layer-selected') + ) !global; + $layer-selected-hover: var( + --#{$custom-property-prefix}-layer-selected-hover, + map-get($theme, 'layer-selected-hover') + ) !global; + $layer-selected-inverse: var( + --#{$custom-property-prefix}-layer-selected-inverse, + map-get($theme, 'layer-selected-inverse') + ) !global; + $border-subtle-selected: var( + --#{$custom-property-prefix}-border-subtle-selected, + map-get($theme, 'border-subtle-selected') + ) !global; + $border-disabled: var( + --#{$custom-property-prefix}-border-disabled, + map-get($theme, 'border-disabled') + ) !global; + $text-disabled: var( + --#{$custom-property-prefix}-text-disabled, + map-get($theme, 'text-disabled') + ) !global; + $button-disabled: var( + --#{$custom-property-prefix}-button-disabled, + map-get($theme, 'button-disabled') + ) !global; + $icon-disabled: var( + --#{$custom-property-prefix}-icon-disabled, + map-get($theme, 'icon-disabled') + ) !global; + $text-on-color-disabled: var( + --#{$custom-property-prefix}-text-on-color-disabled, + map-get($theme, 'text-on-color-disabled') + ) !global; + $icon-on-color-disabled: var( + --#{$custom-property-prefix}-icon-on-color-disabled, + map-get($theme, 'icon-on-color-disabled') + ) !global; + $layer-selected-disabled: var( + --#{$custom-property-prefix}-layer-selected-disabled, + map-get($theme, 'layer-selected-disabled') + ) !global; + $skeleton-background: var( + --#{$custom-property-prefix}-skeleton-background, + map-get($theme, 'skeleton-background') + ) !global; + $skeleton-element: var( + --#{$custom-property-prefix}-skeleton-element, + map-get($theme, 'skeleton-element') + ) !global; + $brand-01: var( + --#{$custom-property-prefix}-brand-01, + map-get($theme, 'brand-01') + ) !global; + $brand-02: var( + --#{$custom-property-prefix}-brand-02, + map-get($theme, 'brand-02') + ) !global; + $brand-03: var( + --#{$custom-property-prefix}-brand-03, + map-get($theme, 'brand-03') + ) !global; + $active-01: var( + --#{$custom-property-prefix}-active-01, + map-get($theme, 'active-01') + ) !global; + $hover-field: var( + --#{$custom-property-prefix}-hover-field, + map-get($theme, 'hover-field') + ) !global; + $danger: var( + --#{$custom-property-prefix}-danger, + map-get($theme, 'danger') + ) !global; + $spacing-01: var( + --#{$custom-property-prefix}-spacing-01, + map-get($theme, 'spacing-01') + ) !global; + $spacing-02: var( + --#{$custom-property-prefix}-spacing-02, + map-get($theme, 'spacing-02') + ) !global; + $spacing-03: var( + --#{$custom-property-prefix}-spacing-03, + map-get($theme, 'spacing-03') + ) !global; + $spacing-04: var( + --#{$custom-property-prefix}-spacing-04, + map-get($theme, 'spacing-04') + ) !global; + $spacing-05: var( + --#{$custom-property-prefix}-spacing-05, + map-get($theme, 'spacing-05') + ) !global; + $spacing-06: var( + --#{$custom-property-prefix}-spacing-06, + map-get($theme, 'spacing-06') + ) !global; + $spacing-07: var( + --#{$custom-property-prefix}-spacing-07, + map-get($theme, 'spacing-07') + ) !global; + $spacing-08: var( + --#{$custom-property-prefix}-spacing-08, + map-get($theme, 'spacing-08') + ) !global; + $spacing-09: var( + --#{$custom-property-prefix}-spacing-09, + map-get($theme, 'spacing-09') + ) !global; + $spacing-10: var( + --#{$custom-property-prefix}-spacing-10, + map-get($theme, 'spacing-10') + ) !global; + $spacing-11: var( + --#{$custom-property-prefix}-spacing-11, + map-get($theme, 'spacing-11') + ) !global; + $spacing-12: var( + --#{$custom-property-prefix}-spacing-12, + map-get($theme, 'spacing-12') + ) !global; + $spacing-13: var( + --#{$custom-property-prefix}-spacing-13, + map-get($theme, 'spacing-13') + ) !global; + $fluid-spacing-01: var( + --#{$custom-property-prefix}-fluid-spacing-01, + map-get($theme, 'fluid-spacing-01') + ) !global; + $fluid-spacing-02: var( + --#{$custom-property-prefix}-fluid-spacing-02, + map-get($theme, 'fluid-spacing-02') + ) !global; + $fluid-spacing-03: var( + --#{$custom-property-prefix}-fluid-spacing-03, + map-get($theme, 'fluid-spacing-03') + ) !global; + $fluid-spacing-04: var( + --#{$custom-property-prefix}-fluid-spacing-04, + map-get($theme, 'fluid-spacing-04') + ) !global; + $layout-01: var( + --#{$custom-property-prefix}-layout-01, + map-get($theme, 'layout-01') + ) !global; + $layout-02: var( + --#{$custom-property-prefix}-layout-02, + map-get($theme, 'layout-02') + ) !global; + $layout-03: var( + --#{$custom-property-prefix}-layout-03, + map-get($theme, 'layout-03') + ) !global; + $layout-04: var( + --#{$custom-property-prefix}-layout-04, + map-get($theme, 'layout-04') + ) !global; + $layout-05: var( + --#{$custom-property-prefix}-layout-05, + map-get($theme, 'layout-05') + ) !global; + $layout-06: var( + --#{$custom-property-prefix}-layout-06, + map-get($theme, 'layout-06') + ) !global; + $layout-07: var( + --#{$custom-property-prefix}-layout-07, + map-get($theme, 'layout-07') + ) !global; + $container-01: var( + --#{$custom-property-prefix}-container-01, + map-get($theme, 'container-01') + ) !global; + $container-02: var( + --#{$custom-property-prefix}-container-02, + map-get($theme, 'container-02') + ) !global; + $container-03: var( + --#{$custom-property-prefix}-container-03, + map-get($theme, 'container-03') + ) !global; + $container-04: var( + --#{$custom-property-prefix}-container-04, + map-get($theme, 'container-04') + ) !global; + $container-05: var( + --#{$custom-property-prefix}-container-05, + map-get($theme, 'container-05') + ) !global; + $size-xsmall: var( + --#{$custom-property-prefix}-size-xsmall, + map-get($theme, 'size-xsmall') + ) !global; + $size-small: var( + --#{$custom-property-prefix}-size-small, + map-get($theme, 'size-small') + ) !global; + $size-medium: var( + --#{$custom-property-prefix}-size-medium, + map-get($theme, 'size-medium') + ) !global; + $size-large: var( + --#{$custom-property-prefix}-size-large, + map-get($theme, 'size-large') + ) !global; + $size-xlarge: var( + --#{$custom-property-prefix}-size-xlarge, + map-get($theme, 'size-xlarge') + ) !global; + $size-2XLarge: var( + --#{$custom-property-prefix}-size-2XLarge, + map-get($theme, 'size-2XLarge') + ) !global; + $icon-size-01: var( + --#{$custom-property-prefix}-icon-size-01, + map-get($theme, 'icon-size-01') + ) !global; + $icon-size-02: var( + --#{$custom-property-prefix}-icon-size-02, + map-get($theme, 'icon-size-02') + ) !global; + } + @if $emit-custom-properties == true { + @if should-emit( + $theme, + $parent-carbon-theme, + 'interactive-01', + $emit-difference + ) + { + @include custom-property( + 'interactive-01', + map-get($theme, 'interactive-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'interactive-02', + $emit-difference + ) + { + @include custom-property( + 'interactive-02', + map-get($theme, 'interactive-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'interactive-03', + $emit-difference + ) + { + @include custom-property( + 'interactive-03', + map-get($theme, 'interactive-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'interactive-04', + $emit-difference + ) + { + @include custom-property( + 'interactive-04', + map-get($theme, 'interactive-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'ui-background', + $emit-difference + ) + { + @include custom-property( + 'ui-background', + map-get($theme, 'ui-background') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) { + @include custom-property('ui-01', map-get($theme, 'ui-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) { + @include custom-property('ui-02', map-get($theme, 'ui-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) { + @include custom-property('ui-03', map-get($theme, 'ui-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) { + @include custom-property('ui-04', map-get($theme, 'ui-04')); + } + + @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) { + @include custom-property('ui-05', map-get($theme, 'ui-05')); + } + + @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) { + @include custom-property('text-01', map-get($theme, 'text-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) { + @include custom-property('text-02', map-get($theme, 'text-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) { + @include custom-property('text-03', map-get($theme, 'text-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) { + @include custom-property('text-04', map-get($theme, 'text-04')); + } + + @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) { + @include custom-property('text-05', map-get($theme, 'text-05')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-error', + $emit-difference + ) + { + @include custom-property('text-error', map-get($theme, 'text-error')); + } + + @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) { + @include custom-property('icon-01', map-get($theme, 'icon-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) { + @include custom-property('icon-02', map-get($theme, 'icon-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) { + @include custom-property('icon-03', map-get($theme, 'icon-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) { + @include custom-property('link-01', map-get($theme, 'link-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) { + @include custom-property('link-02', map-get($theme, 'link-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-link', + $emit-difference + ) + { + @include custom-property('inverse-link', map-get($theme, 'inverse-link')); + } + + @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference) + { + @include custom-property('field-01', map-get($theme, 'field-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference) + { + @include custom-property('field-02', map-get($theme, 'field-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-01', + $emit-difference + ) + { + @include custom-property('inverse-01', map-get($theme, 'inverse-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-02', + $emit-difference + ) + { + @include custom-property('inverse-02', map-get($theme, 'inverse-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-01', + $emit-difference + ) + { + @include custom-property('support-01', map-get($theme, 'support-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-02', + $emit-difference + ) + { + @include custom-property('support-02', map-get($theme, 'support-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-03', + $emit-difference + ) + { + @include custom-property('support-03', map-get($theme, 'support-03')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-04', + $emit-difference + ) + { + @include custom-property('support-04', map-get($theme, 'support-04')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-support-01', + $emit-difference + ) + { + @include custom-property( + 'inverse-support-01', + map-get($theme, 'inverse-support-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-support-02', + $emit-difference + ) + { + @include custom-property( + 'inverse-support-02', + map-get($theme, 'inverse-support-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-support-03', + $emit-difference + ) + { + @include custom-property( + 'inverse-support-03', + map-get($theme, 'inverse-support-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-support-04', + $emit-difference + ) + { + @include custom-property( + 'inverse-support-04', + map-get($theme, 'inverse-support-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'overlay-01', + $emit-difference + ) + { + @include custom-property('overlay-01', map-get($theme, 'overlay-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference) + { + @include custom-property('danger-01', map-get($theme, 'danger-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference) + { + @include custom-property('danger-02', map-get($theme, 'danger-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) { + @include custom-property('focus', map-get($theme, 'focus')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-focus-ui', + $emit-difference + ) + { + @include custom-property( + 'inverse-focus-ui', + map-get($theme, 'inverse-focus-ui') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-primary', + $emit-difference + ) + { + @include custom-property( + 'hover-primary', + map-get($theme, 'hover-primary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'active-primary', + $emit-difference + ) + { + @include custom-property( + 'active-primary', + map-get($theme, 'active-primary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-primary-text', + $emit-difference + ) + { + @include custom-property( + 'hover-primary-text', + map-get($theme, 'hover-primary-text') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-secondary', + $emit-difference + ) + { + @include custom-property( + 'hover-secondary', + map-get($theme, 'hover-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'active-secondary', + $emit-difference + ) + { + @include custom-property( + 'active-secondary', + map-get($theme, 'active-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-tertiary', + $emit-difference + ) + { + @include custom-property( + 'hover-tertiary', + map-get($theme, 'hover-tertiary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'active-tertiary', + $emit-difference + ) + { + @include custom-property( + 'active-tertiary', + map-get($theme, 'active-tertiary') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference) + { + @include custom-property('hover-ui', map-get($theme, 'hover-ui')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-light-ui', + $emit-difference + ) + { + @include custom-property( + 'hover-light-ui', + map-get($theme, 'hover-light-ui') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-selected-ui', + $emit-difference + ) + { + @include custom-property( + 'hover-selected-ui', + map-get($theme, 'hover-selected-ui') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference) + { + @include custom-property('active-ui', map-get($theme, 'active-ui')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'active-light-ui', + $emit-difference + ) + { + @include custom-property( + 'active-light-ui', + map-get($theme, 'active-light-ui') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'selected-ui', + $emit-difference + ) + { + @include custom-property('selected-ui', map-get($theme, 'selected-ui')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'selected-light-ui', + $emit-difference + ) + { + @include custom-property( + 'selected-light-ui', + map-get($theme, 'selected-light-ui') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'inverse-hover-ui', + $emit-difference + ) + { + @include custom-property( + 'inverse-hover-ui', + map-get($theme, 'inverse-hover-ui') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-danger', + $emit-difference + ) + { + @include custom-property('hover-danger', map-get($theme, 'hover-danger')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'active-danger', + $emit-difference + ) + { + @include custom-property( + 'active-danger', + map-get($theme, 'active-danger') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference) + { + @include custom-property('hover-row', map-get($theme, 'hover-row')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'visited-link', + $emit-difference + ) + { + @include custom-property('visited-link', map-get($theme, 'visited-link')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'disabled-01', + $emit-difference + ) + { + @include custom-property('disabled-01', map-get($theme, 'disabled-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'disabled-02', + $emit-difference + ) + { + @include custom-property('disabled-02', map-get($theme, 'disabled-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'disabled-03', + $emit-difference + ) + { + @include custom-property('disabled-03', map-get($theme, 'disabled-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference) + { + @include custom-property('highlight', map-get($theme, 'highlight')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'decorative-01', + $emit-difference + ) + { + @include custom-property( + 'decorative-01', + map-get($theme, 'decorative-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-separator', + $emit-difference + ) + { + @include custom-property( + 'button-separator', + map-get($theme, 'button-separator') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'skeleton-01', + $emit-difference + ) + { + @include custom-property('skeleton-01', map-get($theme, 'skeleton-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'skeleton-02', + $emit-difference + ) + { + @include custom-property('skeleton-02', map-get($theme, 'skeleton-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background', + $emit-difference + ) + { + @include custom-property('background', map-get($theme, 'background')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layer', $emit-difference) { + @include custom-property('layer', map-get($theme, 'layer')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-accent', + $emit-difference + ) + { + @include custom-property('layer-accent', map-get($theme, 'layer-accent')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-accent-hover', + $emit-difference + ) + { + @include custom-property( + 'layer-accent-hover', + map-get($theme, 'layer-accent-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-accent-active', + $emit-difference + ) + { + @include custom-property( + 'layer-accent-active', + map-get($theme, 'layer-accent-active') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'field', $emit-difference) { + @include custom-property('field', map-get($theme, 'field')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-inverse', + $emit-difference + ) + { + @include custom-property( + 'background-inverse', + map-get($theme, 'background-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-brand', + $emit-difference + ) + { + @include custom-property( + 'background-brand', + map-get($theme, 'background-brand') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'interactive', + $emit-difference + ) + { + @include custom-property('interactive', map-get($theme, 'interactive')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-subtle', + $emit-difference + ) + { + @include custom-property( + 'border-subtle', + map-get($theme, 'border-subtle') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-strong', + $emit-difference + ) + { + @include custom-property( + 'border-strong', + map-get($theme, 'border-strong') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-inverse', + $emit-difference + ) + { + @include custom-property( + 'border-inverse', + map-get($theme, 'border-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-interactive', + $emit-difference + ) + { + @include custom-property( + 'border-interactive', + map-get($theme, 'border-interactive') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-primary', + $emit-difference + ) + { + @include custom-property('text-primary', map-get($theme, 'text-primary')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-secondary', + $emit-difference + ) + { + @include custom-property( + 'text-secondary', + map-get($theme, 'text-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-placeholder', + $emit-difference + ) + { + @include custom-property( + 'text-placeholder', + map-get($theme, 'text-placeholder') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-helper', + $emit-difference + ) + { + @include custom-property('text-helper', map-get($theme, 'text-helper')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-on-color', + $emit-difference + ) + { + @include custom-property( + 'text-on-color', + map-get($theme, 'text-on-color') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-inverse', + $emit-difference + ) + { + @include custom-property('text-inverse', map-get($theme, 'text-inverse')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'link-primary', + $emit-difference + ) + { + @include custom-property('link-primary', map-get($theme, 'link-primary')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'link-secondary', + $emit-difference + ) + { + @include custom-property( + 'link-secondary', + map-get($theme, 'link-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'link-visited', + $emit-difference + ) + { + @include custom-property('link-visited', map-get($theme, 'link-visited')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'link-inverse', + $emit-difference + ) + { + @include custom-property('link-inverse', map-get($theme, 'link-inverse')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-primary', + $emit-difference + ) + { + @include custom-property('icon-primary', map-get($theme, 'icon-primary')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-secondary', + $emit-difference + ) + { + @include custom-property( + 'icon-secondary', + map-get($theme, 'icon-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-on-color', + $emit-difference + ) + { + @include custom-property( + 'icon-on-color', + map-get($theme, 'icon-on-color') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-inverse', + $emit-difference + ) + { + @include custom-property('icon-inverse', map-get($theme, 'icon-inverse')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-error', + $emit-difference + ) + { + @include custom-property( + 'support-error', + map-get($theme, 'support-error') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-success', + $emit-difference + ) + { + @include custom-property( + 'support-success', + map-get($theme, 'support-success') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-warning', + $emit-difference + ) + { + @include custom-property( + 'support-warning', + map-get($theme, 'support-warning') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-info', + $emit-difference + ) + { + @include custom-property('support-info', map-get($theme, 'support-info')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-error-inverse', + $emit-difference + ) + { + @include custom-property( + 'support-error-inverse', + map-get($theme, 'support-error-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-success-inverse', + $emit-difference + ) + { + @include custom-property( + 'support-success-inverse', + map-get($theme, 'support-success-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-warning-inverse', + $emit-difference + ) + { + @include custom-property( + 'support-warning-inverse', + map-get($theme, 'support-warning-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'support-info-inverse', + $emit-difference + ) + { + @include custom-property( + 'support-info-inverse', + map-get($theme, 'support-info-inverse') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'overlay', $emit-difference) { + @include custom-property('overlay', map-get($theme, 'overlay')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'toggle-off', + $emit-difference + ) + { + @include custom-property('toggle-off', map-get($theme, 'toggle-off')); + } + + @if should-emit($theme, $parent-carbon-theme, 'shadow', $emit-difference) { + @include custom-property('shadow', map-get($theme, 'shadow')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-primary', + $emit-difference + ) + { + @include custom-property( + 'button-primary', + map-get($theme, 'button-primary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-secondary', + $emit-difference + ) + { + @include custom-property( + 'button-secondary', + map-get($theme, 'button-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-tertiary', + $emit-difference + ) + { + @include custom-property( + 'button-tertiary', + map-get($theme, 'button-tertiary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-danger-primary', + $emit-difference + ) + { + @include custom-property( + 'button-danger-primary', + map-get($theme, 'button-danger-primary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-danger-secondary', + $emit-difference + ) + { + @include custom-property( + 'button-danger-secondary', + map-get($theme, 'button-danger-secondary') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-active', + $emit-difference + ) + { + @include custom-property( + 'background-active', + map-get($theme, 'background-active') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-active', + $emit-difference + ) + { + @include custom-property('layer-active', map-get($theme, 'layer-active')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-danger-active', + $emit-difference + ) + { + @include custom-property( + 'button-danger-active', + map-get($theme, 'button-danger-active') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-primary-active', + $emit-difference + ) + { + @include custom-property( + 'button-primary-active', + map-get($theme, 'button-primary-active') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-secondary-active', + $emit-difference + ) + { + @include custom-property( + 'button-secondary-active', + map-get($theme, 'button-secondary-active') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-tertiary-active', + $emit-difference + ) + { + @include custom-property( + 'button-tertiary-active', + map-get($theme, 'button-tertiary-active') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'focus-inset', + $emit-difference + ) + { + @include custom-property('focus-inset', map-get($theme, 'focus-inset')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'focus-inverse', + $emit-difference + ) + { + @include custom-property( + 'focus-inverse', + map-get($theme, 'focus-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-hover', + $emit-difference + ) + { + @include custom-property( + 'background-hover', + map-get($theme, 'background-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-hover', + $emit-difference + ) + { + @include custom-property('layer-hover', map-get($theme, 'layer-hover')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'field-hover', + $emit-difference + ) + { + @include custom-property('field-hover', map-get($theme, 'field-hover')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-inverse-hover', + $emit-difference + ) + { + @include custom-property( + 'background-inverse-hover', + map-get($theme, 'background-inverse-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'link-primary-hover', + $emit-difference + ) + { + @include custom-property( + 'link-primary-hover', + map-get($theme, 'link-primary-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-danger-hover', + $emit-difference + ) + { + @include custom-property( + 'button-danger-hover', + map-get($theme, 'button-danger-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-primary-hover', + $emit-difference + ) + { + @include custom-property( + 'button-primary-hover', + map-get($theme, 'button-primary-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-secondary-hover', + $emit-difference + ) + { + @include custom-property( + 'button-secondary-hover', + map-get($theme, 'button-secondary-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-tertiary-hover', + $emit-difference + ) + { + @include custom-property( + 'button-tertiary-hover', + map-get($theme, 'button-tertiary-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-selected', + $emit-difference + ) + { + @include custom-property( + 'background-selected', + map-get($theme, 'background-selected') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'background-selected-hover', + $emit-difference + ) + { + @include custom-property( + 'background-selected-hover', + map-get($theme, 'background-selected-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-selected', + $emit-difference + ) + { + @include custom-property( + 'layer-selected', + map-get($theme, 'layer-selected') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-selected-hover', + $emit-difference + ) + { + @include custom-property( + 'layer-selected-hover', + map-get($theme, 'layer-selected-hover') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-selected-inverse', + $emit-difference + ) + { + @include custom-property( + 'layer-selected-inverse', + map-get($theme, 'layer-selected-inverse') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-subtle-selected', + $emit-difference + ) + { + @include custom-property( + 'border-subtle-selected', + map-get($theme, 'border-subtle-selected') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'border-disabled', + $emit-difference + ) + { + @include custom-property( + 'border-disabled', + map-get($theme, 'border-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-disabled', + $emit-difference + ) + { + @include custom-property( + 'text-disabled', + map-get($theme, 'text-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'button-disabled', + $emit-difference + ) + { + @include custom-property( + 'button-disabled', + map-get($theme, 'button-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-disabled', + $emit-difference + ) + { + @include custom-property( + 'icon-disabled', + map-get($theme, 'icon-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'text-on-color-disabled', + $emit-difference + ) + { + @include custom-property( + 'text-on-color-disabled', + map-get($theme, 'text-on-color-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-on-color-disabled', + $emit-difference + ) + { + @include custom-property( + 'icon-on-color-disabled', + map-get($theme, 'icon-on-color-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'layer-selected-disabled', + $emit-difference + ) + { + @include custom-property( + 'layer-selected-disabled', + map-get($theme, 'layer-selected-disabled') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'skeleton-background', + $emit-difference + ) + { + @include custom-property( + 'skeleton-background', + map-get($theme, 'skeleton-background') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'skeleton-element', + $emit-difference + ) + { + @include custom-property( + 'skeleton-element', + map-get($theme, 'skeleton-element') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference) + { + @include custom-property('brand-01', map-get($theme, 'brand-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference) + { + @include custom-property('brand-02', map-get($theme, 'brand-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference) + { + @include custom-property('brand-03', map-get($theme, 'brand-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference) + { + @include custom-property('active-01', map-get($theme, 'active-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'hover-field', + $emit-difference + ) + { + @include custom-property('hover-field', map-get($theme, 'hover-field')); + } + + @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) { + @include custom-property('danger', map-get($theme, 'danger')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'caption-01', + $emit-difference + ) + { + @include custom-property('caption-01', map-get($theme, 'caption-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'caption-02', + $emit-difference + ) + { + @include custom-property('caption-02', map-get($theme, 'caption-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference) + { + @include custom-property('label-01', map-get($theme, 'label-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'label-02', $emit-difference) + { + @include custom-property('label-02', map-get($theme, 'label-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'helper-text-01', + $emit-difference + ) + { + @include custom-property( + 'helper-text-01', + map-get($theme, 'helper-text-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'helper-text-02', + $emit-difference + ) + { + @include custom-property( + 'helper-text-02', + map-get($theme, 'helper-text-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-short-01', + $emit-difference + ) + { + @include custom-property( + 'body-short-01', + map-get($theme, 'body-short-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-long-01', + $emit-difference + ) + { + @include custom-property('body-long-01', map-get($theme, 'body-long-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-short-02', + $emit-difference + ) + { + @include custom-property( + 'body-short-02', + map-get($theme, 'body-short-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-long-02', + $emit-difference + ) + { + @include custom-property('body-long-02', map-get($theme, 'body-long-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) { + @include custom-property('code-01', map-get($theme, 'code-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) { + @include custom-property('code-02', map-get($theme, 'code-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-01', + $emit-difference + ) + { + @include custom-property('heading-01', map-get($theme, 'heading-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-01', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-01', + map-get($theme, 'productive-heading-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-02', + $emit-difference + ) + { + @include custom-property('heading-02', map-get($theme, 'heading-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-02', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-02', + map-get($theme, 'productive-heading-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-03', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-03', + map-get($theme, 'productive-heading-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-04', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-04', + map-get($theme, 'productive-heading-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-05', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-05', + map-get($theme, 'productive-heading-05') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-06', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-06', + map-get($theme, 'productive-heading-06') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'productive-heading-07', + $emit-difference + ) + { + @include custom-property( + 'productive-heading-07', + map-get($theme, 'productive-heading-07') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-01', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-01', + map-get($theme, 'expressive-heading-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-02', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-02', + map-get($theme, 'expressive-heading-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-03', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-03', + map-get($theme, 'expressive-heading-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-04', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-04', + map-get($theme, 'expressive-heading-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-05', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-05', + map-get($theme, 'expressive-heading-05') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-heading-06', + $emit-difference + ) + { + @include custom-property( + 'expressive-heading-06', + map-get($theme, 'expressive-heading-06') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'expressive-paragraph-01', + $emit-difference + ) + { + @include custom-property( + 'expressive-paragraph-01', + map-get($theme, 'expressive-paragraph-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'quotation-01', + $emit-difference + ) + { + @include custom-property('quotation-01', map-get($theme, 'quotation-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'quotation-02', + $emit-difference + ) + { + @include custom-property('quotation-02', map-get($theme, 'quotation-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'display-01', + $emit-difference + ) + { + @include custom-property('display-01', map-get($theme, 'display-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'display-02', + $emit-difference + ) + { + @include custom-property('display-02', map-get($theme, 'display-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'display-03', + $emit-difference + ) + { + @include custom-property('display-03', map-get($theme, 'display-03')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'display-04', + $emit-difference + ) + { + @include custom-property('display-04', map-get($theme, 'display-04')); + } + + @if should-emit($theme, $parent-carbon-theme, 'legal-01', $emit-difference) + { + @include custom-property('legal-01', map-get($theme, 'legal-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'legal-02', $emit-difference) + { + @include custom-property('legal-02', map-get($theme, 'legal-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-compact-01', + $emit-difference + ) + { + @include custom-property( + 'body-compact-01', + map-get($theme, 'body-compact-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'body-compact-02', + $emit-difference + ) + { + @include custom-property( + 'body-compact-02', + map-get($theme, 'body-compact-02') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'body-01', $emit-difference) { + @include custom-property('body-01', map-get($theme, 'body-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'body-02', $emit-difference) { + @include custom-property('body-02', map-get($theme, 'body-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-compact-01', + $emit-difference + ) + { + @include custom-property( + 'heading-compact-01', + map-get($theme, 'heading-compact-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-compact-02', + $emit-difference + ) + { + @include custom-property( + 'heading-compact-02', + map-get($theme, 'heading-compact-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-03', + $emit-difference + ) + { + @include custom-property('heading-03', map-get($theme, 'heading-03')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-04', + $emit-difference + ) + { + @include custom-property('heading-04', map-get($theme, 'heading-04')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-05', + $emit-difference + ) + { + @include custom-property('heading-05', map-get($theme, 'heading-05')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-06', + $emit-difference + ) + { + @include custom-property('heading-06', map-get($theme, 'heading-06')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'heading-07', + $emit-difference + ) + { + @include custom-property('heading-07', map-get($theme, 'heading-07')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-heading-03', + $emit-difference + ) + { + @include custom-property( + 'fluid-heading-03', + map-get($theme, 'fluid-heading-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-heading-04', + $emit-difference + ) + { + @include custom-property( + 'fluid-heading-04', + map-get($theme, 'fluid-heading-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-heading-05', + $emit-difference + ) + { + @include custom-property( + 'fluid-heading-05', + map-get($theme, 'fluid-heading-05') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-heading-06', + $emit-difference + ) + { + @include custom-property( + 'fluid-heading-06', + map-get($theme, 'fluid-heading-06') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-paragraph-01', + $emit-difference + ) + { + @include custom-property( + 'fluid-paragraph-01', + map-get($theme, 'fluid-paragraph-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-quotation-01', + $emit-difference + ) + { + @include custom-property( + 'fluid-quotation-01', + map-get($theme, 'fluid-quotation-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-quotation-02', + $emit-difference + ) + { + @include custom-property( + 'fluid-quotation-02', + map-get($theme, 'fluid-quotation-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-display-01', + $emit-difference + ) + { + @include custom-property( + 'fluid-display-01', + map-get($theme, 'fluid-display-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-display-02', + $emit-difference + ) + { + @include custom-property( + 'fluid-display-02', + map-get($theme, 'fluid-display-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-display-03', + $emit-difference + ) + { + @include custom-property( + 'fluid-display-03', + map-get($theme, 'fluid-display-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-display-04', + $emit-difference + ) + { + @include custom-property( + 'fluid-display-04', + map-get($theme, 'fluid-display-04') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-01', + $emit-difference + ) + { + @include custom-property('spacing-01', map-get($theme, 'spacing-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-02', + $emit-difference + ) + { + @include custom-property('spacing-02', map-get($theme, 'spacing-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-03', + $emit-difference + ) + { + @include custom-property('spacing-03', map-get($theme, 'spacing-03')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-04', + $emit-difference + ) + { + @include custom-property('spacing-04', map-get($theme, 'spacing-04')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-05', + $emit-difference + ) + { + @include custom-property('spacing-05', map-get($theme, 'spacing-05')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-06', + $emit-difference + ) + { + @include custom-property('spacing-06', map-get($theme, 'spacing-06')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-07', + $emit-difference + ) + { + @include custom-property('spacing-07', map-get($theme, 'spacing-07')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-08', + $emit-difference + ) + { + @include custom-property('spacing-08', map-get($theme, 'spacing-08')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-09', + $emit-difference + ) + { + @include custom-property('spacing-09', map-get($theme, 'spacing-09')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-10', + $emit-difference + ) + { + @include custom-property('spacing-10', map-get($theme, 'spacing-10')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-11', + $emit-difference + ) + { + @include custom-property('spacing-11', map-get($theme, 'spacing-11')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-12', + $emit-difference + ) + { + @include custom-property('spacing-12', map-get($theme, 'spacing-12')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'spacing-13', + $emit-difference + ) + { + @include custom-property('spacing-13', map-get($theme, 'spacing-13')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-spacing-01', + $emit-difference + ) + { + @include custom-property( + 'fluid-spacing-01', + map-get($theme, 'fluid-spacing-01') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-spacing-02', + $emit-difference + ) + { + @include custom-property( + 'fluid-spacing-02', + map-get($theme, 'fluid-spacing-02') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-spacing-03', + $emit-difference + ) + { + @include custom-property( + 'fluid-spacing-03', + map-get($theme, 'fluid-spacing-03') + ); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'fluid-spacing-04', + $emit-difference + ) + { + @include custom-property( + 'fluid-spacing-04', + map-get($theme, 'fluid-spacing-04') + ); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference) + { + @include custom-property('layout-01', map-get($theme, 'layout-01')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference) + { + @include custom-property('layout-02', map-get($theme, 'layout-02')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference) + { + @include custom-property('layout-03', map-get($theme, 'layout-03')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference) + { + @include custom-property('layout-04', map-get($theme, 'layout-04')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference) + { + @include custom-property('layout-05', map-get($theme, 'layout-05')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference) + { + @include custom-property('layout-06', map-get($theme, 'layout-06')); + } + + @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference) + { + @include custom-property('layout-07', map-get($theme, 'layout-07')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'container-01', + $emit-difference + ) + { + @include custom-property('container-01', map-get($theme, 'container-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'container-02', + $emit-difference + ) + { + @include custom-property('container-02', map-get($theme, 'container-02')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'container-03', + $emit-difference + ) + { + @include custom-property('container-03', map-get($theme, 'container-03')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'container-04', + $emit-difference + ) + { + @include custom-property('container-04', map-get($theme, 'container-04')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'container-05', + $emit-difference + ) + { + @include custom-property('container-05', map-get($theme, 'container-05')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-xsmall', + $emit-difference + ) + { + @include custom-property('size-xsmall', map-get($theme, 'size-xsmall')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-small', + $emit-difference + ) + { + @include custom-property('size-small', map-get($theme, 'size-small')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-medium', + $emit-difference + ) + { + @include custom-property('size-medium', map-get($theme, 'size-medium')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-large', + $emit-difference + ) + { + @include custom-property('size-large', map-get($theme, 'size-large')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-xlarge', + $emit-difference + ) + { + @include custom-property('size-xlarge', map-get($theme, 'size-xlarge')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'size-2XLarge', + $emit-difference + ) + { + @include custom-property('size-2XLarge', map-get($theme, 'size-2XLarge')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-size-01', + $emit-difference + ) + { + @include custom-property('icon-size-01', map-get($theme, 'icon-size-01')); + } + + @if should-emit( + $theme, + $parent-carbon-theme, + 'icon-size-02', + $emit-difference + ) + { + @include custom-property('icon-size-02', map-get($theme, 'icon-size-02')); + } + } + + @content; + + // Reset to default theme after apply in content + @if $carbon--theme != $parent-carbon-theme { + $carbon--theme: $parent-carbon-theme !global; + + @include carbon--theme(); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_themes.scss new file mode 100644 index 000000000000..cf33a719c862 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_themes.scss @@ -0,0 +1,2955 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +$carbon--theme--white: ( + interactive-01: #0f62fe, + interactive-02: #393939, + interactive-03: #0f62fe, + interactive-04: #0f62fe, + ui-background: #ffffff, + ui-01: #f4f4f4, + ui-02: #ffffff, + ui-03: #e0e0e0, + ui-04: #8d8d8d, + ui-05: #161616, + text-01: #161616, + text-02: #525252, + text-03: #a8a8a8, + text-04: #ffffff, + text-05: #6f6f6f, + text-error: #da1e28, + icon-01: #161616, + icon-02: #525252, + icon-03: #ffffff, + link-01: #0f62fe, + link-02: #0043ce, + inverse-link: #78a9ff, + field-01: #f4f4f4, + field-02: #ffffff, + inverse-01: #ffffff, + inverse-02: #393939, + support-01: #da1e28, + support-02: #198038, + support-03: #f1c21b, + support-04: #0043ce, + inverse-support-01: #fa4d56, + inverse-support-02: #42be65, + inverse-support-03: #f1c21b, + inverse-support-04: #4589ff, + overlay-01: rgba(22, 22, 22, 0.5), + danger-01: #da1e28, + danger-02: #da1e28, + focus: #0f62fe, + inverse-focus-ui: #ffffff, + hover-primary: #0353e9, + active-primary: #002d9c, + hover-primary-text: #0043ce, + hover-secondary: #4c4c4c, + active-secondary: #6f6f6f, + hover-tertiary: #0353e9, + active-tertiary: #002d9c, + hover-ui: #e5e5e5, + hover-light-ui: #e5e5e5, + active-ui: #c6c6c6, + active-light-ui: #c6c6c6, + selected-ui: #e0e0e0, + selected-light-ui: #e0e0e0, + inverse-hover-ui: #4c4c4c, + hover-selected-ui: #cacaca, + hover-danger: #b81921, + active-danger: #750e13, + hover-row: #e5e5e5, + visited-link: #8a3ffc, + disabled-01: #f4f4f4, + disabled-02: #c6c6c6, + disabled-03: #8d8d8d, + highlight: #d0e2ff, + decorative-01: #e0e0e0, + button-separator: #e0e0e0, + skeleton-01: #e5e5e5, + skeleton-02: #c6c6c6, + background: #ffffff, + layer: #f4f4f4, + layer-accent: #e0e0e0, + layer-accent-active: #a8a8a8, + layer-accent-hover: #d1d1d1, + field: #f4f4f4, + background-inverse: #393939, + background-brand: #0f62fe, + interactive: #0f62fe, + border-subtle: #e0e0e0, + border-strong: #8d8d8d, + border-inverse: #161616, + border-interactive: #0f62fe, + text-primary: #161616, + text-secondary: #525252, + text-placeholder: #a8a8a8, + text-helper: #6f6f6f, + text-on-color: #ffffff, + text-inverse: #ffffff, + link-primary: #0f62fe, + link-secondary: #0043ce, + link-visited: #8a3ffc, + link-inverse: #78a9ff, + icon-primary: #161616, + icon-secondary: #525252, + icon-on-color: #ffffff, + icon-inverse: #ffffff, + support-error: #da1e28, + support-success: #198038, + support-warning: #f1c21b, + support-info: #0043ce, + support-error-inverse: #fa4d56, + support-success-inverse: #42be65, + support-warning-inverse: #f1c21b, + support-info-inverse: #4589ff, + overlay: rgba(22, 22, 22, 0.5), + toggle-off: #8d8d8d, + shadow: rgba(0, 0, 0, 0.3), + button-primary: #0f62fe, + button-secondary: #393939, + button-tertiary: #0f62fe, + button-danger-primary: #da1e28, + button-danger-secondary: #da1e28, + background-active: #c6c6c6, + layer-active: #c6c6c6, + button-danger-active: #750e13, + button-primary-active: #002d9c, + button-secondary-active: #6f6f6f, + button-tertiary-active: #002d9c, + focus-inset: #ffffff, + focus-inverse: #ffffff, + background-hover: #e5e5e5, + layer-hover: #e5e5e5, + field-hover: #e5e5e5, + background-inverse-hover: #4c4c4c, + link-primary-hover: #0043ce, + button-danger-hover: #b81921, + button-primary-hover: #0353e9, + button-secondary-hover: #4c4c4c, + button-tertiary-hover: #0353e9, + background-selected: #e0e0e0, + background-selected-hover: #cacaca, + layer-selected: #e0e0e0, + layer-selected-hover: #cacaca, + layer-selected-inverse: #161616, + border-subtle-selected: #c6c6c6, + border-disabled: #f4f4f4, + text-disabled: #c6c6c6, + button-disabled: #c6c6c6, + icon-disabled: #c6c6c6, + text-on-color-disabled: #8d8d8d, + icon-on-color-disabled: #8d8d8d, + layer-selected-disabled: #8d8d8d, + skeleton-background: #e5e5e5, + skeleton-element: #c6c6c6, + brand-01: #0f62fe, + brand-02: #393939, + brand-03: #0f62fe, + active-01: #c6c6c6, + hover-field: #e5e5e5, + danger: #da1e28, + caption-01: ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ), + caption-02: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.32px, + ), + label-01: ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ), + label-02: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + helper-text-01: ( + font-size: 0.75rem, + line-height: 1.33333, + letter-spacing: 0.32px, + ), + helper-text-02: ( + font-size: 0.875rem, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + body-short-01: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + body-long-01: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.16px, + ), + body-short-02: ( + font-size: 1rem, + font-weight: 400, + line-height: 1.375, + letter-spacing: 0, + ), + body-long-02: ( + font-size: 1rem, + font-weight: 400, + line-height: 1.5, + letter-spacing: 0, + ), + code-01: ( + font-family: + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ), + code-02: ( + font-family: + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.32px, + ), + heading-01: ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.42857, + letter-spacing: 0.16px, + ), + productive-heading-01: ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + heading-02: ( + font-size: 1rem, + font-weight: 600, + line-height: 1.5, + letter-spacing: 0, + ), + productive-heading-02: ( + font-size: 1rem, + font-weight: 600, + line-height: 1.375, + letter-spacing: 0, + ), + productive-heading-03: ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + ), + productive-heading-04: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + productive-heading-05: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + productive-heading-06: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ), + productive-heading-07: ( + font-size: 3.375rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ), + expressive-heading-01: ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0.16px, + ), + expressive-heading-02: ( + font-size: 1rem, + font-weight: 600, + line-height: 1.5, + letter-spacing: 0, + ), + expressive-heading-03: ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.25rem, + line-height: 1.25, + ), + max: ( + font-size: 1.5rem, + line-height: 1.334, + ), + ), + ), + expressive-heading-04: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.75rem, + line-height: 1.25, + ), + max: ( + font-size: 2rem, + ), + ), + ), + expressive-heading-05: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 300, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 300, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 300, + letter-spacing: 0, + ), + ), + ), + expressive-heading-06: ( + font-size: 2rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 600, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 600, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 600, + letter-spacing: 0, + ), + ), + ), + expressive-paragraph-01: ( + font-size: 1.5rem, + font-weight: 300, + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: 1.75rem, + line-height: 1.28572, + ), + max: ( + font-size: 2rem, + line-height: 1.25, + ), + ), + ), + quotation-01: ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 1.25rem, + font-weight: 400, + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 1.25rem, + font-weight: 400, + letter-spacing: 0, + ), + lg: ( + font-size: 1.5rem, + font-weight: 400, + line-height: 1.334, + letter-spacing: 0, + ), + xlg: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + max: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + ), + ), + quotation-02: ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 2rem, + font-weight: 300, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + line-height: 1.22, + ), + lg: ( + font-size: 2.625rem, + line-height: 1.19, + ), + xlg: ( + font-size: 3rem, + line-height: 1.17, + ), + max: ( + font-size: 3.75rem, + ), + ), + ), + display-01: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.17, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ), + display-02: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.16, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ), + display-03: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ), + display-04: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ), + legal-01: ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ), + legal-02: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + body-compact-01: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + body-compact-02: ( + font-size: 1rem, + font-weight: 400, + line-height: 1.375, + letter-spacing: 0, + ), + body-01: ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.16px, + ), + body-02: ( + font-size: 1rem, + font-weight: 400, + line-height: 1.5, + letter-spacing: 0, + ), + heading-compact-01: ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.28572, + letter-spacing: 0.16px, + ), + heading-compact-02: ( + font-size: 1rem, + font-weight: 600, + line-height: 1.375, + letter-spacing: 0, + ), + heading-03: ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + ), + heading-04: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + heading-05: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + heading-06: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ), + heading-07: ( + font-size: 3.375rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ), + fluid-heading-03: ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.25rem, + line-height: 1.25, + ), + max: ( + font-size: 1.5rem, + line-height: 1.334, + ), + ), + ), + fluid-heading-04: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.75rem, + line-height: 1.25, + ), + max: ( + font-size: 2rem, + ), + ), + ), + fluid-heading-05: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 300, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 300, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 300, + letter-spacing: 0, + ), + ), + ), + fluid-heading-06: ( + font-size: 2rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 600, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 600, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 600, + letter-spacing: 0, + ), + ), + ), + fluid-paragraph-01: ( + font-size: 1.5rem, + font-weight: 300, + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: 1.75rem, + line-height: 1.28572, + ), + max: ( + font-size: 2rem, + line-height: 1.25, + ), + ), + ), + fluid-quotation-01: ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 1.25rem, + font-weight: 400, + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 1.25rem, + font-weight: 400, + letter-spacing: 0, + ), + lg: ( + font-size: 1.5rem, + font-weight: 400, + line-height: 1.334, + letter-spacing: 0, + ), + xlg: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + max: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + ), + ), + fluid-quotation-02: ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 2rem, + font-weight: 300, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + line-height: 1.22, + ), + lg: ( + font-size: 2.625rem, + line-height: 1.19, + ), + xlg: ( + font-size: 3rem, + line-height: 1.17, + ), + max: ( + font-size: 3.75rem, + ), + ), + ), + fluid-display-01: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.17, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ), + fluid-display-02: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.16, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ), + fluid-display-03: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ), + fluid-display-04: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ), + spacing-01: 0.125rem, + spacing-02: 0.25rem, + spacing-03: 0.5rem, + spacing-04: 0.75rem, + spacing-05: 1rem, + spacing-06: 1.5rem, + spacing-07: 2rem, + spacing-08: 2.5rem, + spacing-09: 3rem, + spacing-10: 4rem, + spacing-11: 5rem, + spacing-12: 6rem, + spacing-13: 10rem, + fluid-spacing-01: 0, + fluid-spacing-02: 2vw, + fluid-spacing-03: 5vw, + fluid-spacing-04: 10vw, + layout-01: 1rem, + layout-02: 1.5rem, + layout-03: 2rem, + layout-04: 3rem, + layout-05: 4rem, + layout-06: 6rem, + layout-07: 10rem, + container-01: 1.5rem, + container-02: 2rem, + container-03: 2.5rem, + container-04: 3rem, + container-05: 4rem, + size-xsmall: 1.5rem, + size-small: 2rem, + size-medium: 2.5rem, + size-large: 3rem, + size-xlarge: 4rem, + size-2XLarge: 5rem, + icon-size-01: 1rem, + icon-size-02: 1.25rem, +) !default; + +/// Carbon's g10 color theme +/// @type Map +/// @access public +/// @group @carbon/themes +$carbon--theme--g10: map-merge( + $carbon--theme--white, + ( + ui-background: #f4f4f4, + ui-01: #ffffff, + ui-02: #f4f4f4, + field-01: #ffffff, + field-02: #f4f4f4, + disabled-01: #ffffff, + background: #f4f4f4, + layer: #ffffff, + field: #ffffff, + border-disabled: #ffffff, + ) +) !default; + +/// Carbon's g80 color theme +/// @type Map +/// @access public +/// @group @carbon/themes +$carbon--theme--g80: map-merge( + $carbon--theme--white, + ( + background: #393939, + layer: #525252, + layer-accent: #6f6f6f, + layer-accent-active: #525252, + layer-accent-hover: #5e5e5e, + field: #525252, + background-inverse: #f4f4f4, + interactive: #78a9ff, + border-subtle: #6f6f6f, + border-strong: #a8a8a8, + border-inverse: #f4f4f4, + border-interactive: #4589ff, + text-primary: #f4f4f4, + text-secondary: #c6c6c6, + text-placeholder: #6f6f6f, + text-helper: #a8a8a8, + text-error: #ffb3b8, + text-inverse: #161616, + link-primary: #78a9ff, + link-secondary: #a6c8ff, + link-visited: #be95ff, + link-inverse: #0f62fe, + icon-primary: #f4f4f4, + icon-secondary: #c6c6c6, + icon-inverse: #161616, + support-error: #ff8389, + support-success: #42be65, + support-info: #4589ff, + support-error-inverse: #da1e28, + support-success-inverse: #24a148, + support-info-inverse: #0f62fe, + overlay: rgba(0, 0, 0, 0.65), + shadow: rgba(0, 0, 0, 0.8), + button-secondary: #6f6f6f, + button-tertiary: #ffffff, + button-danger-secondary: #ff8389, + button-separator: #161616, + background-active: #525252, + layer-active: #6f6f6f, + button-secondary-active: #525252, + button-tertiary-active: #c6c6c6, + focus: #ffffff, + focus-inset: #161616, + focus-inverse: #0f62fe, + highlight: #0043ce, + background-hover: #474747, + layer-hover: #636363, + field-hover: #636363, + background-inverse-hover: #e8e8e8, + link-primary-hover: #a6c8ff, + button-primary-hover: #0151e4, + button-secondary-hover: #5e5e5e, + button-tertiary-hover: #ffffff, + background-selected: #525252, + background-selected-hover: #636363, + layer-selected: #6f6f6f, + layer-selected-hover: #616161, + layer-selected-inverse: #f4f4f4, + border-subtle-selected: #8d8d8d, + border-disabled: #525252, + text-disabled: #8d8d8d, + button-disabled: #8d8d8d, + icon-disabled: #8d8d8d, + text-on-color-disabled: #c6c6c6, + icon-on-color-disabled: #c6c6c6, + layer-selected-disabled: #c6c6c6, + skeleton-background: #474747, + skeleton-element: #6f6f6f, + interactive-02: #6f6f6f, + interactive-03: #ffffff, + interactive-04: #78a9ff, + ui-background: #393939, + ui-01: #525252, + ui-02: #525252, + ui-03: #6f6f6f, + ui-04: #a8a8a8, + ui-05: #f4f4f4, + text-01: #f4f4f4, + text-02: #c6c6c6, + text-03: #6f6f6f, + text-05: #a8a8a8, + icon-01: #f4f4f4, + icon-02: #c6c6c6, + link-01: #78a9ff, + link-02: #a6c8ff, + inverse-link: #0f62fe, + field-01: #525252, + field-02: #6f6f6f, + inverse-01: #161616, + inverse-02: #f4f4f4, + support-01: #ff8389, + support-02: #42be65, + support-04: #4589ff, + inverse-support-01: #da1e28, + inverse-support-02: #24a148, + inverse-support-04: #0f62fe, + overlay-01: rgba(0, 0, 0, 0.65), + danger-02: #ff8389, + inverse-focus-ui: #0f62fe, + hover-primary: #0151e4, + hover-primary-text: #a6c8ff, + hover-secondary: #5e5e5e, + active-secondary: #525252, + hover-tertiary: #ffffff, + active-tertiary: #c6c6c6, + hover-ui: #474747, + hover-light-ui: #5e5e5e, + active-ui: #525252, + active-light-ui: #8d8d8d, + selected-ui: #525252, + selected-light-ui: #8d8d8d, + inverse-hover-ui: #e8e8e8, + hover-selected-ui: #616161, + hover-row: #636363, + visited-link: #be95ff, + disabled-01: #525252, + disabled-02: #8d8d8d, + disabled-03: #c6c6c6, + decorative-01: #6f6f6f, + skeleton-01: #474747, + skeleton-02: #6f6f6f, + brand-02: #6f6f6f, + brand-03: #ffffff, + active-01: #525252, + hover-field: #474747, + ) +) !default; + +/// Carbon's g90 color theme +/// @type Map +/// @access public +/// @group @carbon/themes +$carbon--theme--g90: map-merge( + $carbon--theme--white, + ( + interactive-02: #6f6f6f, + interactive-03: #ffffff, + interactive-04: #4589ff, + ui-background: #262626, + ui-01: #393939, + ui-02: #525252, + ui-03: #525252, + ui-05: #f4f4f4, + text-01: #f4f4f4, + text-02: #c6c6c6, + text-03: #6f6f6f, + text-05: #8d8d8d, + text-error: #ffb3b8, + icon-01: #f4f4f4, + icon-02: #c6c6c6, + link-01: #78a9ff, + link-02: #a6c8ff, + inverse-link: #0f62fe, + field-01: #393939, + field-02: #525252, + inverse-01: #161616, + inverse-02: #f4f4f4, + support-01: #ff8389, + support-02: #42be65, + support-04: #4589ff, + inverse-support-01: #da1e28, + inverse-support-02: #24a148, + inverse-support-04: #0f62fe, + overlay-01: rgba(0, 0, 0, 0.65), + danger-02: #ff8389, + focus: #ffffff, + inverse-focus-ui: #0f62fe, + hover-primary-text: #a6c8ff, + hover-secondary: #606060, + active-secondary: #393939, + hover-tertiary: #f4f4f4, + active-tertiary: #c6c6c6, + hover-ui: #4c4c4c, + hover-light-ui: #656565, + active-ui: #6f6f6f, + active-light-ui: #8d8d8d, + selected-ui: #525252, + selected-light-ui: #6f6f6f, + inverse-hover-ui: #e5e5e5, + hover-selected-ui: #656565, + hover-row: #4c4c4c, + visited-link: #be95ff, + disabled-01: #393939, + disabled-02: #6f6f6f, + disabled-03: #a8a8a8, + highlight: #0043ce, + decorative-01: #6f6f6f, + button-separator: #161616, + skeleton-01: #353535, + skeleton-02: #525252, + background: #262626, + layer: #393939, + layer-accent: #525252, + layer-accent-active: #8d8d8d, + layer-accent-hover: #636363, + field: #393939, + background-inverse: #f4f4f4, + interactive: #4589ff, + border-subtle: #525252, + border-inverse: #f4f4f4, + border-interactive: #4589ff, + text-primary: #f4f4f4, + text-secondary: #c6c6c6, + text-placeholder: #6f6f6f, + text-helper: #8d8d8d, + text-inverse: #161616, + link-primary: #78a9ff, + link-secondary: #a6c8ff, + link-visited: #be95ff, + link-inverse: #0f62fe, + icon-primary: #f4f4f4, + icon-secondary: #c6c6c6, + icon-inverse: #161616, + support-error: #ff8389, + support-success: #42be65, + support-info: #4589ff, + support-error-inverse: #da1e28, + support-success-inverse: #24a148, + support-info-inverse: #0f62fe, + overlay: rgba(0, 0, 0, 0.65), + shadow: rgba(0, 0, 0, 0.8), + button-secondary: #6f6f6f, + button-tertiary: #ffffff, + button-danger-secondary: #ff8389, + background-active: #6f6f6f, + layer-active: #6f6f6f, + button-secondary-active: #393939, + button-tertiary-active: #c6c6c6, + focus-inset: #161616, + focus-inverse: #0f62fe, + background-hover: #4c4c4c, + layer-hover: #4c4c4c, + field-hover: #4c4c4c, + background-inverse-hover: #e5e5e5, + link-primary-hover: #a6c8ff, + button-secondary-hover: #606060, + button-tertiary-hover: #f4f4f4, + background-selected: #525252, + background-selected-hover: #656565, + layer-selected: #525252, + layer-selected-hover: #656565, + layer-selected-inverse: #f4f4f4, + border-subtle-selected: #6f6f6f, + border-disabled: #393939, + text-disabled: #6f6f6f, + button-disabled: #6f6f6f, + icon-disabled: #6f6f6f, + text-on-color-disabled: #a8a8a8, + icon-on-color-disabled: #a8a8a8, + layer-selected-disabled: #a8a8a8, + skeleton-background: #353535, + skeleton-element: #525252, + brand-02: #6f6f6f, + brand-03: #ffffff, + active-01: #6f6f6f, + hover-field: #4c4c4c, + ) +) !default; + +/// Carbon's g100 color theme +/// @type Map +/// @access public +/// @group @carbon/themes +$carbon--theme--g100: map-merge( + $carbon--theme--white, + ( + interactive-02: #6f6f6f, + interactive-03: #ffffff, + interactive-04: #4589ff, + ui-background: #161616, + ui-01: #262626, + ui-02: #393939, + ui-03: #393939, + ui-04: #6f6f6f, + ui-05: #f4f4f4, + text-01: #f4f4f4, + text-02: #c6c6c6, + text-03: #6f6f6f, + text-05: #8d8d8d, + text-error: #ff8389, + icon-01: #f4f4f4, + icon-02: #c6c6c6, + link-01: #78a9ff, + link-02: #a6c8ff, + inverse-link: #0f62fe, + field-01: #262626, + field-02: #393939, + inverse-01: #161616, + inverse-02: #f4f4f4, + support-01: #fa4d56, + support-02: #42be65, + support-04: #4589ff, + inverse-support-01: #da1e28, + inverse-support-02: #24a148, + inverse-support-04: #0f62fe, + overlay-01: rgba(0, 0, 0, 0.65), + danger-02: #fa4d56, + focus: #ffffff, + inverse-focus-ui: #0f62fe, + hover-primary-text: #a6c8ff, + hover-secondary: #606060, + active-secondary: #393939, + hover-tertiary: #f4f4f4, + active-tertiary: #c6c6c6, + hover-ui: #353535, + hover-light-ui: #4c4c4c, + active-ui: #525252, + active-light-ui: #6f6f6f, + selected-ui: #393939, + selected-light-ui: #525252, + inverse-hover-ui: #e5e5e5, + hover-selected-ui: #4c4c4c, + hover-row: #353535, + visited-link: #be95ff, + disabled-01: #262626, + disabled-02: #525252, + highlight: #002d9c, + decorative-01: #525252, + button-separator: #161616, + skeleton-01: #353535, + skeleton-02: #525252, + background: #161616, + layer: #262626, + layer-accent: #393939, + layer-accent-active: #6f6f6f, + layer-accent-hover: #474747, + field: #262626, + background-inverse: #f4f4f4, + interactive: #4589ff, + border-subtle: #393939, + border-strong: #6f6f6f, + border-inverse: #f4f4f4, + border-interactive: #4589ff, + text-primary: #f4f4f4, + text-secondary: #c6c6c6, + text-placeholder: #6f6f6f, + text-helper: #8d8d8d, + text-inverse: #161616, + link-primary: #78a9ff, + link-secondary: #a6c8ff, + link-visited: #be95ff, + link-inverse: #0f62fe, + icon-primary: #f4f4f4, + icon-secondary: #c6c6c6, + icon-inverse: #161616, + support-error: #fa4d56, + support-success: #42be65, + support-info: #4589ff, + support-error-inverse: #da1e28, + support-success-inverse: #24a148, + support-info-inverse: #0f62fe, + overlay: rgba(0, 0, 0, 0.65), + toggle-off: #6f6f6f, + shadow: rgba(0, 0, 0, 0.8), + button-secondary: #6f6f6f, + button-tertiary: #ffffff, + button-danger-secondary: #fa4d56, + background-active: #525252, + layer-active: #525252, + button-secondary-active: #393939, + button-tertiary-active: #c6c6c6, + focus-inset: #161616, + focus-inverse: #0f62fe, + background-hover: #353535, + layer-hover: #353535, + field-hover: #353535, + background-inverse-hover: #e5e5e5, + link-primary-hover: #a6c8ff, + button-secondary-hover: #606060, + button-tertiary-hover: #f4f4f4, + background-selected: #393939, + background-selected-hover: #4c4c4c, + layer-selected: #393939, + layer-selected-hover: #4c4c4c, + layer-selected-inverse: #f4f4f4, + border-subtle-selected: #525252, + border-disabled: #262626, + text-disabled: #525252, + button-disabled: #525252, + icon-disabled: #525252, + skeleton-background: #353535, + skeleton-element: #525252, + brand-02: #6f6f6f, + brand-03: #ffffff, + active-01: #525252, + hover-field: #353535, + ) +) !default; + +/// Carbon's v9 color theme +/// @type Map +/// @access public +/// @group @carbon/themes +$carbon--theme--v9: map-merge( + $carbon--theme--white, + ( + interactive-01: #3d70b2, + interactive-02: #4d5358, + interactive-03: #3d70b2, + interactive-04: #3d70b2, + ui-background: #f4f7fb, + ui-01: #ffffff, + ui-02: #f4f7fb, + ui-03: #dfe3e6, + ui-04: #8897a2, + ui-05: #5a6872, + text-01: #152935, + text-02: #5a6872, + text-03: #cdd1d4, + text-05: #5a6872, + text-error: #e0182d, + icon-01: #3d70b2, + icon-02: #5a6872, + link-01: #3d70b2, + link-02: #3d70b2, + inverse-link: #5596e6, + field-01: #ffffff, + field-02: #f4f7fb, + inverse-02: #272d33, + support-01: #e0182d, + support-02: #5aa700, + support-03: #efc100, + support-04: #5aaafa, + inverse-support-01: #ff5050, + inverse-support-02: #8cd211, + inverse-support-03: #fdd600, + inverse-support-04: #5aaafa, + overlay-01: rgba(223, 227, 230, 0.5), + focus: #3d70b2, + inverse-focus-ui: #3d70b2, + hover-primary: #30588c, + active-primary: #30588c, + hover-primary-text: #294c86, + hover-secondary: #4d5b65, + active-secondary: #414f59, + hover-tertiary: #5a6872, + active-tertiary: #414f59, + hover-ui: #eef4fc, + hover-light-ui: #eef4fc, + active-ui: #dfeafa, + active-light-ui: #dfeafa, + selected-ui: #eef4fc, + selected-light-ui: #eef4fc, + hover-selected-ui: #dfeafa, + hover-danger: #c70014, + active-danger: #ad1625, + hover-row: #eef4fc, + visited-link: #294c86, + disabled-01: #fafbfd, + disabled-02: #dfe3e6, + disabled-03: #cdd1d4, + highlight: #f4f7fb, + decorative-01: #eef4fc, + skeleton-01: rgba(61, 112, 178, 0.1), + skeleton-02: rgba(61, 112, 178, 0.1), + background: #f4f7fb, + layer: #ffffff, + layer-accent: #dfe3e6, + layer-accent-hover: #ced4d9, + field: #ffffff, + background-inverse: #272d33, + background-brand: #3d70b2, + interactive: #3d70b2, + border-subtle: #dfe3e6, + border-strong: #8897a2, + border-inverse: #5a6872, + border-interactive: #3d70b2, + text-primary: #152935, + text-secondary: #5a6872, + text-placeholder: #cdd1d4, + text-helper: #5a6872, + link-primary: #3d70b2, + link-secondary: #3d70b2, + link-visited: #294c86, + link-inverse: #5596e6, + icon-primary: #3d70b2, + icon-secondary: #5a6872, + support-error: #e0182d, + support-success: #5aa700, + support-warning: #efc100, + support-info: #5aaafa, + support-error-inverse: #ff5050, + support-success-inverse: #8cd211, + support-warning-inverse: #fdd600, + support-info-inverse: #5aaafa, + overlay: rgba(223, 227, 230, 0.5), + toggle-off: #8897a2, + button-primary: #3d70b2, + button-secondary: #4d5358, + button-tertiary: #3d70b2, + background-active: #dfeafa, + layer-active: #dfeafa, + button-danger-active: #ad1625, + button-primary-active: #30588c, + button-secondary-active: #414f59, + button-tertiary-active: #414f59, + focus-inverse: #3d70b2, + background-hover: #eef4fc, + layer-hover: #eef4fc, + field-hover: #eef4fc, + link-primary-hover: #294c86, + button-danger-hover: #c70014, + button-primary-hover: #30588c, + button-secondary-hover: #4d5b65, + button-tertiary-hover: #5a6872, + background-selected: #eef4fc, + background-selected-hover: #dfeafa, + layer-selected: #eef4fc, + layer-selected-hover: #dfeafa, + layer-selected-inverse: #5a6872, + border-subtle-selected: #dfeafa, + border-disabled: #fafbfd, + text-disabled: #dfe3e6, + button-disabled: #dfe3e6, + icon-disabled: #dfe3e6, + text-on-color-disabled: #cdd1d4, + icon-on-color-disabled: #cdd1d4, + layer-selected-disabled: #cdd1d4, + skeleton-background: rgba(61, 112, 178, 0.1), + skeleton-element: rgba(61, 112, 178, 0.1), + brand-01: #3d70b2, + brand-02: #4d5358, + brand-03: #3d70b2, + active-01: #dfeafa, + hover-field: #eef4fc, + ) +) !default; + +/// Carbon's default theme +/// @type Map +/// @access public +/// @alias carbon--theme--white +/// @group @carbon/themes +$carbon--theme: ( + interactive-01: + if( + global-variable-exists('interactive-01'), + $interactive-01, + map-get($carbon--theme--white, 'interactive-01') + ), + interactive-02: + if( + global-variable-exists('interactive-02'), + $interactive-02, + map-get($carbon--theme--white, 'interactive-02') + ), + interactive-03: + if( + global-variable-exists('interactive-03'), + $interactive-03, + map-get($carbon--theme--white, 'interactive-03') + ), + interactive-04: + if( + global-variable-exists('interactive-04'), + $interactive-04, + map-get($carbon--theme--white, 'interactive-04') + ), + ui-background: + if( + global-variable-exists('ui-background'), + $ui-background, + map-get($carbon--theme--white, 'ui-background') + ), + ui-01: + if( + global-variable-exists('ui-01'), + $ui-01, + map-get($carbon--theme--white, 'ui-01') + ), + ui-02: + if( + global-variable-exists('ui-02'), + $ui-02, + map-get($carbon--theme--white, 'ui-02') + ), + ui-03: + if( + global-variable-exists('ui-03'), + $ui-03, + map-get($carbon--theme--white, 'ui-03') + ), + ui-04: + if( + global-variable-exists('ui-04'), + $ui-04, + map-get($carbon--theme--white, 'ui-04') + ), + ui-05: + if( + global-variable-exists('ui-05'), + $ui-05, + map-get($carbon--theme--white, 'ui-05') + ), + text-01: + if( + global-variable-exists('text-01'), + $text-01, + map-get($carbon--theme--white, 'text-01') + ), + text-02: + if( + global-variable-exists('text-02'), + $text-02, + map-get($carbon--theme--white, 'text-02') + ), + text-03: + if( + global-variable-exists('text-03'), + $text-03, + map-get($carbon--theme--white, 'text-03') + ), + text-04: + if( + global-variable-exists('text-04'), + $text-04, + map-get($carbon--theme--white, 'text-04') + ), + text-05: + if( + global-variable-exists('text-05'), + $text-05, + map-get($carbon--theme--white, 'text-05') + ), + text-error: + if( + global-variable-exists('text-error'), + $text-error, + map-get($carbon--theme--white, 'text-error') + ), + icon-01: + if( + global-variable-exists('icon-01'), + $icon-01, + map-get($carbon--theme--white, 'icon-01') + ), + icon-02: + if( + global-variable-exists('icon-02'), + $icon-02, + map-get($carbon--theme--white, 'icon-02') + ), + icon-03: + if( + global-variable-exists('icon-03'), + $icon-03, + map-get($carbon--theme--white, 'icon-03') + ), + link-01: + if( + global-variable-exists('link-01'), + $link-01, + map-get($carbon--theme--white, 'link-01') + ), + link-02: + if( + global-variable-exists('link-02'), + $link-02, + map-get($carbon--theme--white, 'link-02') + ), + inverse-link: + if( + global-variable-exists('inverse-link'), + $inverse-link, + map-get($carbon--theme--white, 'inverse-link') + ), + field-01: + if( + global-variable-exists('field-01'), + $field-01, + map-get($carbon--theme--white, 'field-01') + ), + field-02: + if( + global-variable-exists('field-02'), + $field-02, + map-get($carbon--theme--white, 'field-02') + ), + inverse-01: + if( + global-variable-exists('inverse-01'), + $inverse-01, + map-get($carbon--theme--white, 'inverse-01') + ), + inverse-02: + if( + global-variable-exists('inverse-02'), + $inverse-02, + map-get($carbon--theme--white, 'inverse-02') + ), + support-01: + if( + global-variable-exists('support-01'), + $support-01, + map-get($carbon--theme--white, 'support-01') + ), + support-02: + if( + global-variable-exists('support-02'), + $support-02, + map-get($carbon--theme--white, 'support-02') + ), + support-03: + if( + global-variable-exists('support-03'), + $support-03, + map-get($carbon--theme--white, 'support-03') + ), + support-04: + if( + global-variable-exists('support-04'), + $support-04, + map-get($carbon--theme--white, 'support-04') + ), + inverse-support-01: + if( + global-variable-exists('inverse-support-01'), + $inverse-support-01, + map-get($carbon--theme--white, 'inverse-support-01') + ), + inverse-support-02: + if( + global-variable-exists('inverse-support-02'), + $inverse-support-02, + map-get($carbon--theme--white, 'inverse-support-02') + ), + inverse-support-03: + if( + global-variable-exists('inverse-support-03'), + $inverse-support-03, + map-get($carbon--theme--white, 'inverse-support-03') + ), + inverse-support-04: + if( + global-variable-exists('inverse-support-04'), + $inverse-support-04, + map-get($carbon--theme--white, 'inverse-support-04') + ), + overlay-01: + if( + global-variable-exists('overlay-01'), + $overlay-01, + map-get($carbon--theme--white, 'overlay-01') + ), + danger-01: + if( + global-variable-exists('danger-01'), + $danger-01, + map-get($carbon--theme--white, 'danger-01') + ), + danger-02: + if( + global-variable-exists('danger-02'), + $danger-02, + map-get($carbon--theme--white, 'danger-02') + ), + focus: + if( + global-variable-exists('focus'), + $focus, + map-get($carbon--theme--white, 'focus') + ), + inverse-focus-ui: + if( + global-variable-exists('inverse-focus-ui'), + $inverse-focus-ui, + map-get($carbon--theme--white, 'inverse-focus-ui') + ), + hover-primary: + if( + global-variable-exists('hover-primary'), + $hover-primary, + map-get($carbon--theme--white, 'hover-primary') + ), + active-primary: + if( + global-variable-exists('active-primary'), + $active-primary, + map-get($carbon--theme--white, 'active-primary') + ), + hover-primary-text: + if( + global-variable-exists('hover-primary-text'), + $hover-primary-text, + map-get($carbon--theme--white, 'hover-primary-text') + ), + hover-secondary: + if( + global-variable-exists('hover-secondary'), + $hover-secondary, + map-get($carbon--theme--white, 'hover-secondary') + ), + active-secondary: + if( + global-variable-exists('active-secondary'), + $active-secondary, + map-get($carbon--theme--white, 'active-secondary') + ), + hover-tertiary: + if( + global-variable-exists('hover-tertiary'), + $hover-tertiary, + map-get($carbon--theme--white, 'hover-tertiary') + ), + active-tertiary: + if( + global-variable-exists('active-tertiary'), + $active-tertiary, + map-get($carbon--theme--white, 'active-tertiary') + ), + hover-ui: + if( + global-variable-exists('hover-ui'), + $hover-ui, + map-get($carbon--theme--white, 'hover-ui') + ), + hover-light-ui: + if( + global-variable-exists('hover-light-ui'), + $hover-light-ui, + map-get($carbon--theme--white, 'hover-light-ui') + ), + hover-selected-ui: + if( + global-variable-exists('hover-selected-ui'), + $hover-selected-ui, + map-get($carbon--theme--white, 'hover-selected-ui') + ), + active-ui: + if( + global-variable-exists('active-ui'), + $active-ui, + map-get($carbon--theme--white, 'active-ui') + ), + active-light-ui: + if( + global-variable-exists('active-light-ui'), + $active-light-ui, + map-get($carbon--theme--white, 'active-light-ui') + ), + selected-ui: + if( + global-variable-exists('selected-ui'), + $selected-ui, + map-get($carbon--theme--white, 'selected-ui') + ), + selected-light-ui: + if( + global-variable-exists('selected-light-ui'), + $selected-light-ui, + map-get($carbon--theme--white, 'selected-light-ui') + ), + inverse-hover-ui: + if( + global-variable-exists('inverse-hover-ui'), + $inverse-hover-ui, + map-get($carbon--theme--white, 'inverse-hover-ui') + ), + hover-danger: + if( + global-variable-exists('hover-danger'), + $hover-danger, + map-get($carbon--theme--white, 'hover-danger') + ), + active-danger: + if( + global-variable-exists('active-danger'), + $active-danger, + map-get($carbon--theme--white, 'active-danger') + ), + hover-row: + if( + global-variable-exists('hover-row'), + $hover-row, + map-get($carbon--theme--white, 'hover-row') + ), + visited-link: + if( + global-variable-exists('visited-link'), + $visited-link, + map-get($carbon--theme--white, 'visited-link') + ), + disabled-01: + if( + global-variable-exists('disabled-01'), + $disabled-01, + map-get($carbon--theme--white, 'disabled-01') + ), + disabled-02: + if( + global-variable-exists('disabled-02'), + $disabled-02, + map-get($carbon--theme--white, 'disabled-02') + ), + disabled-03: + if( + global-variable-exists('disabled-03'), + $disabled-03, + map-get($carbon--theme--white, 'disabled-03') + ), + highlight: + if( + global-variable-exists('highlight'), + $highlight, + map-get($carbon--theme--white, 'highlight') + ), + decorative-01: + if( + global-variable-exists('decorative-01'), + $decorative-01, + map-get($carbon--theme--white, 'decorative-01') + ), + button-separator: + if( + global-variable-exists('button-separator'), + $button-separator, + map-get($carbon--theme--white, 'button-separator') + ), + skeleton-01: + if( + global-variable-exists('skeleton-01'), + $skeleton-01, + map-get($carbon--theme--white, 'skeleton-01') + ), + skeleton-02: + if( + global-variable-exists('skeleton-02'), + $skeleton-02, + map-get($carbon--theme--white, 'skeleton-02') + ), + background: + if( + global-variable-exists('background'), + $background, + map-get($carbon--theme--white, 'background') + ), + layer: + if( + global-variable-exists('layer'), + $layer, + map-get($carbon--theme--white, 'layer') + ), + layer-accent: + if( + global-variable-exists('layer-accent'), + $layer-accent, + map-get($carbon--theme--white, 'layer-accent') + ), + layer-accent-hover: + if( + global-variable-exists('layer-accent-hover'), + $layer-accent-hover, + map-get($carbon--theme--white, 'layer-accent-hover') + ), + layer-accent-active: + if( + global-variable-exists('layer-accent-active'), + $layer-accent-active, + map-get($carbon--theme--white, 'layer-accent-active') + ), + field: + if( + global-variable-exists('field'), + $field, + map-get($carbon--theme--white, 'field') + ), + background-inverse: + if( + global-variable-exists('background-inverse'), + $background-inverse, + map-get($carbon--theme--white, 'background-inverse') + ), + background-brand: + if( + global-variable-exists('background-brand'), + $background-brand, + map-get($carbon--theme--white, 'background-brand') + ), + interactive: + if( + global-variable-exists('interactive'), + $interactive, + map-get($carbon--theme--white, 'interactive') + ), + border-subtle: + if( + global-variable-exists('border-subtle'), + $border-subtle, + map-get($carbon--theme--white, 'border-subtle') + ), + border-strong: + if( + global-variable-exists('border-strong'), + $border-strong, + map-get($carbon--theme--white, 'border-strong') + ), + border-inverse: + if( + global-variable-exists('border-inverse'), + $border-inverse, + map-get($carbon--theme--white, 'border-inverse') + ), + border-interactive: + if( + global-variable-exists('border-interactive'), + $border-interactive, + map-get($carbon--theme--white, 'border-interactive') + ), + text-primary: + if( + global-variable-exists('text-primary'), + $text-primary, + map-get($carbon--theme--white, 'text-primary') + ), + text-secondary: + if( + global-variable-exists('text-secondary'), + $text-secondary, + map-get($carbon--theme--white, 'text-secondary') + ), + text-placeholder: + if( + global-variable-exists('text-placeholder'), + $text-placeholder, + map-get($carbon--theme--white, 'text-placeholder') + ), + text-helper: + if( + global-variable-exists('text-helper'), + $text-helper, + map-get($carbon--theme--white, 'text-helper') + ), + text-on-color: + if( + global-variable-exists('text-on-color'), + $text-on-color, + map-get($carbon--theme--white, 'text-on-color') + ), + text-inverse: + if( + global-variable-exists('text-inverse'), + $text-inverse, + map-get($carbon--theme--white, 'text-inverse') + ), + link-primary: + if( + global-variable-exists('link-primary'), + $link-primary, + map-get($carbon--theme--white, 'link-primary') + ), + link-secondary: + if( + global-variable-exists('link-secondary'), + $link-secondary, + map-get($carbon--theme--white, 'link-secondary') + ), + link-visited: + if( + global-variable-exists('link-visited'), + $link-visited, + map-get($carbon--theme--white, 'link-visited') + ), + link-inverse: + if( + global-variable-exists('link-inverse'), + $link-inverse, + map-get($carbon--theme--white, 'link-inverse') + ), + icon-primary: + if( + global-variable-exists('icon-primary'), + $icon-primary, + map-get($carbon--theme--white, 'icon-primary') + ), + icon-secondary: + if( + global-variable-exists('icon-secondary'), + $icon-secondary, + map-get($carbon--theme--white, 'icon-secondary') + ), + icon-on-color: + if( + global-variable-exists('icon-on-color'), + $icon-on-color, + map-get($carbon--theme--white, 'icon-on-color') + ), + icon-inverse: + if( + global-variable-exists('icon-inverse'), + $icon-inverse, + map-get($carbon--theme--white, 'icon-inverse') + ), + support-error: + if( + global-variable-exists('support-error'), + $support-error, + map-get($carbon--theme--white, 'support-error') + ), + support-success: + if( + global-variable-exists('support-success'), + $support-success, + map-get($carbon--theme--white, 'support-success') + ), + support-warning: + if( + global-variable-exists('support-warning'), + $support-warning, + map-get($carbon--theme--white, 'support-warning') + ), + support-info: + if( + global-variable-exists('support-info'), + $support-info, + map-get($carbon--theme--white, 'support-info') + ), + support-error-inverse: + if( + global-variable-exists('support-error-inverse'), + $support-error-inverse, + map-get($carbon--theme--white, 'support-error-inverse') + ), + support-success-inverse: + if( + global-variable-exists('support-success-inverse'), + $support-success-inverse, + map-get($carbon--theme--white, 'support-success-inverse') + ), + support-warning-inverse: + if( + global-variable-exists('support-warning-inverse'), + $support-warning-inverse, + map-get($carbon--theme--white, 'support-warning-inverse') + ), + support-info-inverse: + if( + global-variable-exists('support-info-inverse'), + $support-info-inverse, + map-get($carbon--theme--white, 'support-info-inverse') + ), + overlay: + if( + global-variable-exists('overlay'), + $overlay, + map-get($carbon--theme--white, 'overlay') + ), + toggle-off: + if( + global-variable-exists('toggle-off'), + $toggle-off, + map-get($carbon--theme--white, 'toggle-off') + ), + shadow: + if( + global-variable-exists('shadow'), + $shadow, + map-get($carbon--theme--white, 'shadow') + ), + button-primary: + if( + global-variable-exists('button-primary'), + $button-primary, + map-get($carbon--theme--white, 'button-primary') + ), + button-secondary: + if( + global-variable-exists('button-secondary'), + $button-secondary, + map-get($carbon--theme--white, 'button-secondary') + ), + button-tertiary: + if( + global-variable-exists('button-tertiary'), + $button-tertiary, + map-get($carbon--theme--white, 'button-tertiary') + ), + button-danger-primary: + if( + global-variable-exists('button-danger-primary'), + $button-danger-primary, + map-get($carbon--theme--white, 'button-danger-primary') + ), + button-danger-secondary: + if( + global-variable-exists('button-danger-secondary'), + $button-danger-secondary, + map-get($carbon--theme--white, 'button-danger-secondary') + ), + background-active: + if( + global-variable-exists('background-active'), + $background-active, + map-get($carbon--theme--white, 'background-active') + ), + layer-active: + if( + global-variable-exists('layer-active'), + $layer-active, + map-get($carbon--theme--white, 'layer-active') + ), + button-danger-active: + if( + global-variable-exists('button-danger-active'), + $button-danger-active, + map-get($carbon--theme--white, 'button-danger-active') + ), + button-primary-active: + if( + global-variable-exists('button-primary-active'), + $button-primary-active, + map-get($carbon--theme--white, 'button-primary-active') + ), + button-secondary-active: + if( + global-variable-exists('button-secondary-active'), + $button-secondary-active, + map-get($carbon--theme--white, 'button-secondary-active') + ), + button-tertiary-active: + if( + global-variable-exists('button-tertiary-active'), + $button-tertiary-active, + map-get($carbon--theme--white, 'button-tertiary-active') + ), + focus-inset: + if( + global-variable-exists('focus-inset'), + $focus-inset, + map-get($carbon--theme--white, 'focus-inset') + ), + focus-inverse: + if( + global-variable-exists('focus-inverse'), + $focus-inverse, + map-get($carbon--theme--white, 'focus-inverse') + ), + background-hover: + if( + global-variable-exists('background-hover'), + $background-hover, + map-get($carbon--theme--white, 'background-hover') + ), + layer-hover: + if( + global-variable-exists('layer-hover'), + $layer-hover, + map-get($carbon--theme--white, 'layer-hover') + ), + field-hover: + if( + global-variable-exists('field-hover'), + $field-hover, + map-get($carbon--theme--white, 'field-hover') + ), + background-inverse-hover: + if( + global-variable-exists('background-inverse-hover'), + $background-inverse-hover, + map-get($carbon--theme--white, 'background-inverse-hover') + ), + link-primary-hover: + if( + global-variable-exists('link-primary-hover'), + $link-primary-hover, + map-get($carbon--theme--white, 'link-primary-hover') + ), + button-danger-hover: + if( + global-variable-exists('button-danger-hover'), + $button-danger-hover, + map-get($carbon--theme--white, 'button-danger-hover') + ), + button-primary-hover: + if( + global-variable-exists('button-primary-hover'), + $button-primary-hover, + map-get($carbon--theme--white, 'button-primary-hover') + ), + button-secondary-hover: + if( + global-variable-exists('button-secondary-hover'), + $button-secondary-hover, + map-get($carbon--theme--white, 'button-secondary-hover') + ), + button-tertiary-hover: + if( + global-variable-exists('button-tertiary-hover'), + $button-tertiary-hover, + map-get($carbon--theme--white, 'button-tertiary-hover') + ), + background-selected: + if( + global-variable-exists('background-selected'), + $background-selected, + map-get($carbon--theme--white, 'background-selected') + ), + background-selected-hover: + if( + global-variable-exists('background-selected-hover'), + $background-selected-hover, + map-get($carbon--theme--white, 'background-selected-hover') + ), + layer-selected: + if( + global-variable-exists('layer-selected'), + $layer-selected, + map-get($carbon--theme--white, 'layer-selected') + ), + layer-selected-hover: + if( + global-variable-exists('layer-selected-hover'), + $layer-selected-hover, + map-get($carbon--theme--white, 'layer-selected-hover') + ), + layer-selected-inverse: + if( + global-variable-exists('layer-selected-inverse'), + $layer-selected-inverse, + map-get($carbon--theme--white, 'layer-selected-inverse') + ), + border-subtle-selected: + if( + global-variable-exists('border-subtle-selected'), + $border-subtle-selected, + map-get($carbon--theme--white, 'border-subtle-selected') + ), + border-disabled: + if( + global-variable-exists('border-disabled'), + $border-disabled, + map-get($carbon--theme--white, 'border-disabled') + ), + text-disabled: + if( + global-variable-exists('text-disabled'), + $text-disabled, + map-get($carbon--theme--white, 'text-disabled') + ), + button-disabled: + if( + global-variable-exists('button-disabled'), + $button-disabled, + map-get($carbon--theme--white, 'button-disabled') + ), + icon-disabled: + if( + global-variable-exists('icon-disabled'), + $icon-disabled, + map-get($carbon--theme--white, 'icon-disabled') + ), + text-on-color-disabled: + if( + global-variable-exists('text-on-color-disabled'), + $text-on-color-disabled, + map-get($carbon--theme--white, 'text-on-color-disabled') + ), + icon-on-color-disabled: + if( + global-variable-exists('icon-on-color-disabled'), + $icon-on-color-disabled, + map-get($carbon--theme--white, 'icon-on-color-disabled') + ), + layer-selected-disabled: + if( + global-variable-exists('layer-selected-disabled'), + $layer-selected-disabled, + map-get($carbon--theme--white, 'layer-selected-disabled') + ), + skeleton-background: + if( + global-variable-exists('skeleton-background'), + $skeleton-background, + map-get($carbon--theme--white, 'skeleton-background') + ), + skeleton-element: + if( + global-variable-exists('skeleton-element'), + $skeleton-element, + map-get($carbon--theme--white, 'skeleton-element') + ), + brand-01: + if( + global-variable-exists('brand-01'), + $brand-01, + map-get($carbon--theme--white, 'brand-01') + ), + brand-02: + if( + global-variable-exists('brand-02'), + $brand-02, + map-get($carbon--theme--white, 'brand-02') + ), + brand-03: + if( + global-variable-exists('brand-03'), + $brand-03, + map-get($carbon--theme--white, 'brand-03') + ), + active-01: + if( + global-variable-exists('active-01'), + $active-01, + map-get($carbon--theme--white, 'active-01') + ), + hover-field: + if( + global-variable-exists('hover-field'), + $hover-field, + map-get($carbon--theme--white, 'hover-field') + ), + danger: + if( + global-variable-exists('danger'), + $danger, + map-get($carbon--theme--white, 'danger') + ), + caption-01: + if( + global-variable-exists('caption-01'), + $caption-01, + map-get($carbon--theme--white, 'caption-01') + ), + caption-02: + if( + global-variable-exists('caption-02'), + $caption-02, + map-get($carbon--theme--white, 'caption-02') + ), + label-01: + if( + global-variable-exists('label-01'), + $label-01, + map-get($carbon--theme--white, 'label-01') + ), + label-02: + if( + global-variable-exists('label-02'), + $label-02, + map-get($carbon--theme--white, 'label-02') + ), + helper-text-01: + if( + global-variable-exists('helper-text-01'), + $helper-text-01, + map-get($carbon--theme--white, 'helper-text-01') + ), + helper-text-02: + if( + global-variable-exists('helper-text-02'), + $helper-text-02, + map-get($carbon--theme--white, 'helper-text-02') + ), + body-short-01: + if( + global-variable-exists('body-short-01'), + $body-short-01, + map-get($carbon--theme--white, 'body-short-01') + ), + body-long-01: + if( + global-variable-exists('body-long-01'), + $body-long-01, + map-get($carbon--theme--white, 'body-long-01') + ), + body-short-02: + if( + global-variable-exists('body-short-02'), + $body-short-02, + map-get($carbon--theme--white, 'body-short-02') + ), + body-long-02: + if( + global-variable-exists('body-long-02'), + $body-long-02, + map-get($carbon--theme--white, 'body-long-02') + ), + code-01: + if( + global-variable-exists('code-01'), + $code-01, + map-get($carbon--theme--white, 'code-01') + ), + code-02: + if( + global-variable-exists('code-02'), + $code-02, + map-get($carbon--theme--white, 'code-02') + ), + heading-01: + if( + global-variable-exists('heading-01'), + $heading-01, + map-get($carbon--theme--white, 'heading-01') + ), + productive-heading-01: + if( + global-variable-exists('productive-heading-01'), + $productive-heading-01, + map-get($carbon--theme--white, 'productive-heading-01') + ), + heading-02: + if( + global-variable-exists('heading-02'), + $heading-02, + map-get($carbon--theme--white, 'heading-02') + ), + productive-heading-02: + if( + global-variable-exists('productive-heading-02'), + $productive-heading-02, + map-get($carbon--theme--white, 'productive-heading-02') + ), + productive-heading-03: + if( + global-variable-exists('productive-heading-03'), + $productive-heading-03, + map-get($carbon--theme--white, 'productive-heading-03') + ), + productive-heading-04: + if( + global-variable-exists('productive-heading-04'), + $productive-heading-04, + map-get($carbon--theme--white, 'productive-heading-04') + ), + productive-heading-05: + if( + global-variable-exists('productive-heading-05'), + $productive-heading-05, + map-get($carbon--theme--white, 'productive-heading-05') + ), + productive-heading-06: + if( + global-variable-exists('productive-heading-06'), + $productive-heading-06, + map-get($carbon--theme--white, 'productive-heading-06') + ), + productive-heading-07: + if( + global-variable-exists('productive-heading-07'), + $productive-heading-07, + map-get($carbon--theme--white, 'productive-heading-07') + ), + expressive-heading-01: + if( + global-variable-exists('expressive-heading-01'), + $expressive-heading-01, + map-get($carbon--theme--white, 'expressive-heading-01') + ), + expressive-heading-02: + if( + global-variable-exists('expressive-heading-02'), + $expressive-heading-02, + map-get($carbon--theme--white, 'expressive-heading-02') + ), + expressive-heading-03: + if( + global-variable-exists('expressive-heading-03'), + $expressive-heading-03, + map-get($carbon--theme--white, 'expressive-heading-03') + ), + expressive-heading-04: + if( + global-variable-exists('expressive-heading-04'), + $expressive-heading-04, + map-get($carbon--theme--white, 'expressive-heading-04') + ), + expressive-heading-05: + if( + global-variable-exists('expressive-heading-05'), + $expressive-heading-05, + map-get($carbon--theme--white, 'expressive-heading-05') + ), + expressive-heading-06: + if( + global-variable-exists('expressive-heading-06'), + $expressive-heading-06, + map-get($carbon--theme--white, 'expressive-heading-06') + ), + expressive-paragraph-01: + if( + global-variable-exists('expressive-paragraph-01'), + $expressive-paragraph-01, + map-get($carbon--theme--white, 'expressive-paragraph-01') + ), + quotation-01: + if( + global-variable-exists('quotation-01'), + $quotation-01, + map-get($carbon--theme--white, 'quotation-01') + ), + quotation-02: + if( + global-variable-exists('quotation-02'), + $quotation-02, + map-get($carbon--theme--white, 'quotation-02') + ), + display-01: + if( + global-variable-exists('display-01'), + $display-01, + map-get($carbon--theme--white, 'display-01') + ), + display-02: + if( + global-variable-exists('display-02'), + $display-02, + map-get($carbon--theme--white, 'display-02') + ), + display-03: + if( + global-variable-exists('display-03'), + $display-03, + map-get($carbon--theme--white, 'display-03') + ), + display-04: + if( + global-variable-exists('display-04'), + $display-04, + map-get($carbon--theme--white, 'display-04') + ), + legal-01: + if( + global-variable-exists('legal-01'), + $legal-01, + map-get($carbon--theme--white, 'legal-01') + ), + legal-02: + if( + global-variable-exists('legal-02'), + $legal-02, + map-get($carbon--theme--white, 'legal-02') + ), + body-compact-01: + if( + global-variable-exists('body-compact-01'), + $body-compact-01, + map-get($carbon--theme--white, 'body-compact-01') + ), + body-compact-02: + if( + global-variable-exists('body-compact-02'), + $body-compact-02, + map-get($carbon--theme--white, 'body-compact-02') + ), + body-01: + if( + global-variable-exists('body-01'), + $body-01, + map-get($carbon--theme--white, 'body-01') + ), + body-02: + if( + global-variable-exists('body-02'), + $body-02, + map-get($carbon--theme--white, 'body-02') + ), + heading-compact-01: + if( + global-variable-exists('heading-compact-01'), + $heading-compact-01, + map-get($carbon--theme--white, 'heading-compact-01') + ), + heading-compact-02: + if( + global-variable-exists('heading-compact-02'), + $heading-compact-02, + map-get($carbon--theme--white, 'heading-compact-02') + ), + heading-03: + if( + global-variable-exists('heading-03'), + $heading-03, + map-get($carbon--theme--white, 'heading-03') + ), + heading-04: + if( + global-variable-exists('heading-04'), + $heading-04, + map-get($carbon--theme--white, 'heading-04') + ), + heading-05: + if( + global-variable-exists('heading-05'), + $heading-05, + map-get($carbon--theme--white, 'heading-05') + ), + heading-06: + if( + global-variable-exists('heading-06'), + $heading-06, + map-get($carbon--theme--white, 'heading-06') + ), + heading-07: + if( + global-variable-exists('heading-07'), + $heading-07, + map-get($carbon--theme--white, 'heading-07') + ), + fluid-heading-03: + if( + global-variable-exists('fluid-heading-03'), + $fluid-heading-03, + map-get($carbon--theme--white, 'fluid-heading-03') + ), + fluid-heading-04: + if( + global-variable-exists('fluid-heading-04'), + $fluid-heading-04, + map-get($carbon--theme--white, 'fluid-heading-04') + ), + fluid-heading-05: + if( + global-variable-exists('fluid-heading-05'), + $fluid-heading-05, + map-get($carbon--theme--white, 'fluid-heading-05') + ), + fluid-heading-06: + if( + global-variable-exists('fluid-heading-06'), + $fluid-heading-06, + map-get($carbon--theme--white, 'fluid-heading-06') + ), + fluid-paragraph-01: + if( + global-variable-exists('fluid-paragraph-01'), + $fluid-paragraph-01, + map-get($carbon--theme--white, 'fluid-paragraph-01') + ), + fluid-quotation-01: + if( + global-variable-exists('fluid-quotation-01'), + $fluid-quotation-01, + map-get($carbon--theme--white, 'fluid-quotation-01') + ), + fluid-quotation-02: + if( + global-variable-exists('fluid-quotation-02'), + $fluid-quotation-02, + map-get($carbon--theme--white, 'fluid-quotation-02') + ), + fluid-display-01: + if( + global-variable-exists('fluid-display-01'), + $fluid-display-01, + map-get($carbon--theme--white, 'fluid-display-01') + ), + fluid-display-02: + if( + global-variable-exists('fluid-display-02'), + $fluid-display-02, + map-get($carbon--theme--white, 'fluid-display-02') + ), + fluid-display-03: + if( + global-variable-exists('fluid-display-03'), + $fluid-display-03, + map-get($carbon--theme--white, 'fluid-display-03') + ), + fluid-display-04: + if( + global-variable-exists('fluid-display-04'), + $fluid-display-04, + map-get($carbon--theme--white, 'fluid-display-04') + ), + spacing-01: + if( + global-variable-exists('spacing-01'), + $spacing-01, + map-get($carbon--theme--white, 'spacing-01') + ), + spacing-02: + if( + global-variable-exists('spacing-02'), + $spacing-02, + map-get($carbon--theme--white, 'spacing-02') + ), + spacing-03: + if( + global-variable-exists('spacing-03'), + $spacing-03, + map-get($carbon--theme--white, 'spacing-03') + ), + spacing-04: + if( + global-variable-exists('spacing-04'), + $spacing-04, + map-get($carbon--theme--white, 'spacing-04') + ), + spacing-05: + if( + global-variable-exists('spacing-05'), + $spacing-05, + map-get($carbon--theme--white, 'spacing-05') + ), + spacing-06: + if( + global-variable-exists('spacing-06'), + $spacing-06, + map-get($carbon--theme--white, 'spacing-06') + ), + spacing-07: + if( + global-variable-exists('spacing-07'), + $spacing-07, + map-get($carbon--theme--white, 'spacing-07') + ), + spacing-08: + if( + global-variable-exists('spacing-08'), + $spacing-08, + map-get($carbon--theme--white, 'spacing-08') + ), + spacing-09: + if( + global-variable-exists('spacing-09'), + $spacing-09, + map-get($carbon--theme--white, 'spacing-09') + ), + spacing-10: + if( + global-variable-exists('spacing-10'), + $spacing-10, + map-get($carbon--theme--white, 'spacing-10') + ), + spacing-11: + if( + global-variable-exists('spacing-11'), + $spacing-11, + map-get($carbon--theme--white, 'spacing-11') + ), + spacing-12: + if( + global-variable-exists('spacing-12'), + $spacing-12, + map-get($carbon--theme--white, 'spacing-12') + ), + spacing-13: + if( + global-variable-exists('spacing-13'), + $spacing-13, + map-get($carbon--theme--white, 'spacing-13') + ), + fluid-spacing-01: + if( + global-variable-exists('fluid-spacing-01'), + $fluid-spacing-01, + map-get($carbon--theme--white, 'fluid-spacing-01') + ), + fluid-spacing-02: + if( + global-variable-exists('fluid-spacing-02'), + $fluid-spacing-02, + map-get($carbon--theme--white, 'fluid-spacing-02') + ), + fluid-spacing-03: + if( + global-variable-exists('fluid-spacing-03'), + $fluid-spacing-03, + map-get($carbon--theme--white, 'fluid-spacing-03') + ), + fluid-spacing-04: + if( + global-variable-exists('fluid-spacing-04'), + $fluid-spacing-04, + map-get($carbon--theme--white, 'fluid-spacing-04') + ), + layout-01: + if( + global-variable-exists('layout-01'), + $layout-01, + map-get($carbon--theme--white, 'layout-01') + ), + layout-02: + if( + global-variable-exists('layout-02'), + $layout-02, + map-get($carbon--theme--white, 'layout-02') + ), + layout-03: + if( + global-variable-exists('layout-03'), + $layout-03, + map-get($carbon--theme--white, 'layout-03') + ), + layout-04: + if( + global-variable-exists('layout-04'), + $layout-04, + map-get($carbon--theme--white, 'layout-04') + ), + layout-05: + if( + global-variable-exists('layout-05'), + $layout-05, + map-get($carbon--theme--white, 'layout-05') + ), + layout-06: + if( + global-variable-exists('layout-06'), + $layout-06, + map-get($carbon--theme--white, 'layout-06') + ), + layout-07: + if( + global-variable-exists('layout-07'), + $layout-07, + map-get($carbon--theme--white, 'layout-07') + ), + container-01: + if( + global-variable-exists('container-01'), + $container-01, + map-get($carbon--theme--white, 'container-01') + ), + container-02: + if( + global-variable-exists('container-02'), + $container-02, + map-get($carbon--theme--white, 'container-02') + ), + container-03: + if( + global-variable-exists('container-03'), + $container-03, + map-get($carbon--theme--white, 'container-03') + ), + container-04: + if( + global-variable-exists('container-04'), + $container-04, + map-get($carbon--theme--white, 'container-04') + ), + container-05: + if( + global-variable-exists('container-05'), + $container-05, + map-get($carbon--theme--white, 'container-05') + ), + size-xsmall: + if( + global-variable-exists('size-xsmall'), + $size-xsmall, + map-get($carbon--theme--white, 'size-xsmall') + ), + size-small: + if( + global-variable-exists('size-small'), + $size-small, + map-get($carbon--theme--white, 'size-small') + ), + size-medium: + if( + global-variable-exists('size-medium'), + $size-medium, + map-get($carbon--theme--white, 'size-medium') + ), + size-large: + if( + global-variable-exists('size-large'), + $size-large, + map-get($carbon--theme--white, 'size-large') + ), + size-xlarge: + if( + global-variable-exists('size-xlarge'), + $size-xlarge, + map-get($carbon--theme--white, 'size-xlarge') + ), + size-2XLarge: + if( + global-variable-exists('size-2XLarge'), + $size-2XLarge, + map-get($carbon--theme--white, 'size-2XLarge') + ), + icon-size-01: + if( + global-variable-exists('icon-size-01'), + $icon-size-01, + map-get($carbon--theme--white, 'icon-size-01') + ), + icon-size-02: + if( + global-variable-exists('icon-size-02'), + $icon-size-02, + map-get($carbon--theme--white, 'icon-size-02') + ), +) !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_tokens.scss new file mode 100644 index 000000000000..9c202685b1cd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/generated/_tokens.scss @@ -0,0 +1,3179 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Primary interactive color; Primary buttons +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$interactive-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'interactive-01'), + map-get($carbon--theme, 'interactive-01'), + #0f62fe +) !default; + +/// Secondary interactive color; Secondary button +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$interactive-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'interactive-02'), + map-get($carbon--theme, 'interactive-02'), + #393939 +) !default; + +/// 4.5:1 AA contrast; Tertiary button +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$interactive-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'interactive-03'), + map-get($carbon--theme, 'interactive-03'), + #0f62fe +) !default; + +/// 3:1 AA contrast; Selected elements; Active elements; Accent icons +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$interactive-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'interactive-04'), + map-get($carbon--theme, 'interactive-04'), + #0f62fe +) !default; + +/// Default page background +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-background: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-background'), + map-get($carbon--theme, 'ui-background'), + #ffffff +) !default; + +/// Primary container background; Secondary page background +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-01'), + map-get($carbon--theme, 'ui-01'), + #f4f4f4 +) !default; + +/// Primary page background; Secondary container background +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-02'), + map-get($carbon--theme, 'ui-02'), + #ffffff +) !default; + +/// Subtle border; Tertiary background color +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-03'), + map-get($carbon--theme, 'ui-03'), + #e0e0e0 +) !default; + +/// 3:1 AA element contrast; Medium contrast border +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-04'), + map-get($carbon--theme, 'ui-04'), + #8d8d8d +) !default; + +/// 4.5:1 AA element contrast; High contrast border; Emphasis elements +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$ui-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'ui-05'), + map-get($carbon--theme, 'ui-05'), + #161616 +) !default; + +/// Primary text; Body copy; Headers; Hover text color for `$text-02` +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-01'), + map-get($carbon--theme, 'text-01'), + #161616 +) !default; + +/// Secondary text; Input labels; Help text +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-02'), + map-get($carbon--theme, 'text-02'), + #525252 +) !default; + +/// Placeholder text +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-03'), + map-get($carbon--theme, 'text-03'), + #a8a8a8 +) !default; + +/// Text on interactive colors +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-04'), + map-get($carbon--theme, 'text-04'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-05'), + map-get($carbon--theme, 'text-05'), + #6f6f6f +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-error: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-error'), + map-get($carbon--theme, 'text-error'), + #da1e28 +) !default; + +/// Primary icons +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-01'), + map-get($carbon--theme, 'icon-01'), + #161616 +) !default; + +/// Secondary icons +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-02'), + map-get($carbon--theme, 'icon-02'), + #525252 +) !default; + +/// Tertiary icons; Icons on interactive colors; Icons on non-ui colors +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-03'), + map-get($carbon--theme, 'icon-03'), + #ffffff +) !default; + +/// Primary links; Ghost button +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-01'), + map-get($carbon--theme, 'link-01'), + #0f62fe +) !default; + +/// Secondary link color for lower contrast backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-02'), + map-get($carbon--theme, 'link-02'), + #0043ce +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-link: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-link'), + map-get($carbon--theme, 'inverse-link'), + #78a9ff +) !default; + +/// Default input fields; Field color on $ui-backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$field-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'field-01'), + map-get($carbon--theme, 'field-01'), + #f4f4f4 +) !default; + +/// Input field color on `$ui-02` backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$field-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'field-02'), + map-get($carbon--theme, 'field-02'), + #ffffff +) !default; + +/// Inverse text color; Inverse icon color +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-01'), + map-get($carbon--theme, 'inverse-01'), + #ffffff +) !default; + +/// High contrast backgrounds; High contrast elements +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-02'), + map-get($carbon--theme, 'inverse-02'), + #393939 +) !default; + +/// Error +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-01'), + map-get($carbon--theme, 'support-01'), + #da1e28 +) !default; + +/// Success +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-02'), + map-get($carbon--theme, 'support-02'), + #198038 +) !default; + +/// Warning +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-03'), + map-get($carbon--theme, 'support-03'), + #f1c21b +) !default; + +/// Information +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-04'), + map-get($carbon--theme, 'support-04'), + #0043ce +) !default; + +/// Error on high contrast backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-support-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-support-01'), + map-get($carbon--theme, 'inverse-support-01'), + #fa4d56 +) !default; + +/// Success on high contrast backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-support-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-support-02'), + map-get($carbon--theme, 'inverse-support-02'), + #42be65 +) !default; + +/// Warning on high contrast backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-support-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-support-03'), + map-get($carbon--theme, 'inverse-support-03'), + #f1c21b +) !default; + +/// Information on high contrast backgrounds +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-support-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-support-04'), + map-get($carbon--theme, 'inverse-support-04'), + #4589ff +) !default; + +/// Background overlay +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$overlay-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'overlay-01'), + map-get($carbon--theme, 'overlay-01'), + rgba(22, 22, 22, 0.5) +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$danger-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'danger-01'), + map-get($carbon--theme, 'danger-01'), + #da1e28 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$danger-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'danger-02'), + map-get($carbon--theme, 'danger-02'), + #da1e28 +) !default; + +/// Focus border; Focus underline +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$focus: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'focus'), + map-get($carbon--theme, 'focus'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-focus-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-focus-ui'), + map-get($carbon--theme, 'inverse-focus-ui'), + #ffffff +) !default; + +/// `$interactive-01` hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-primary'), + map-get($carbon--theme, 'hover-primary'), + #0353e9 +) !default; + +/// `$interactive-01` active +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-primary'), + map-get($carbon--theme, 'active-primary'), + #002d9c +) !default; + +/// `$interactive-01` text hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-primary-text: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-primary-text'), + map-get($carbon--theme, 'hover-primary-text'), + #0043ce +) !default; + +/// `$interactive-02` hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-secondary'), + map-get($carbon--theme, 'hover-secondary'), + #4c4c4c +) !default; + +/// `$interactive-02` active; `$inverse-01` active +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-secondary'), + map-get($carbon--theme, 'active-secondary'), + #6f6f6f +) !default; + +/// `$interactive-03` hover; `$inverse-01` hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-tertiary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-tertiary'), + map-get($carbon--theme, 'hover-tertiary'), + #0353e9 +) !default; + +/// `$interactive-03` active +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-tertiary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-tertiary'), + map-get($carbon--theme, 'active-tertiary'), + #002d9c +) !default; + +/// `$ui-01` hover; `$ui-02` hover; Transparent background hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-ui'), + map-get($carbon--theme, 'hover-ui'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-light-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-light-ui'), + map-get($carbon--theme, 'hover-light-ui'), + #e5e5e5 +) !default; + +/// Data table selected row hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-selected-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-selected-ui'), + map-get($carbon--theme, 'hover-selected-ui'), + #cacaca +) !default; + +/// `$ui-01` active; `$ui-02` active +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-ui'), + map-get($carbon--theme, 'active-ui'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-light-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-light-ui'), + map-get($carbon--theme, 'active-light-ui'), + #c6c6c6 +) !default; + +/// Selected UI elements +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$selected-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'selected-ui'), + map-get($carbon--theme, 'selected-ui'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$selected-light-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'selected-light-ui'), + map-get($carbon--theme, 'selected-light-ui'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$inverse-hover-ui: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'inverse-hover-ui'), + map-get($carbon--theme, 'inverse-hover-ui'), + #4c4c4c +) !default; + +/// Danger hover; `$support-01` hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-danger: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-danger'), + map-get($carbon--theme, 'hover-danger'), + #b81921 +) !default; + +/// Danger active; `$support-01` active +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$active-danger: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-danger'), + map-get($carbon--theme, 'active-danger'), + #750e13 +) !default; + +/// Row hover +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$hover-row: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-row'), + map-get($carbon--theme, 'hover-row'), + #e5e5e5 +) !default; + +/// Visited links +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$visited-link: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'visited-link'), + map-get($carbon--theme, 'visited-link'), + #8a3ffc +) !default; + +/// Disabled fields; Disabled backgrounds; Disabled border +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$disabled-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'disabled-01'), + map-get($carbon--theme, 'disabled-01'), + #f4f4f4 +) !default; + +/// Disabled elements on `$disabled-01`; Disabled label; Disabled text on `$disabled-01`; Disabled icons; Disabled border +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$disabled-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'disabled-02'), + map-get($carbon--theme, 'disabled-02'), + #c6c6c6 +) !default; + +/// Disabled text on `$disabled-02`; Disabled icons on `$disabled-02` +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$disabled-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'disabled-03'), + map-get($carbon--theme, 'disabled-03'), + #8d8d8d +) !default; + +/// `$interactive-01` high light +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$highlight: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'highlight'), + map-get($carbon--theme, 'highlight'), + #d0e2ff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$decorative-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'decorative-01'), + map-get($carbon--theme, 'decorative-01'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-separator: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-separator'), + map-get($carbon--theme, 'button-separator'), + #e0e0e0 +) !default; + +/// Skeleton state of graphics +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$skeleton-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'skeleton-01'), + map-get($carbon--theme, 'skeleton-01'), + #e5e5e5 +) !default; + +/// Skeleton state of text +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$skeleton-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'skeleton-02'), + map-get($carbon--theme, 'skeleton-02'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background'), + map-get($carbon--theme, 'background'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer'), + map-get($carbon--theme, 'layer'), + #f4f4f4 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-accent: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-accent'), + map-get($carbon--theme, 'layer-accent'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-accent-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-accent-hover'), + map-get($carbon--theme, 'layer-accent-hover'), + #d1d1d1 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-accent-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-accent-active'), + map-get($carbon--theme, 'layer-accent-active'), + #a8a8a8 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$field: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'field'), + map-get($carbon--theme, 'field'), + #f4f4f4 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-inverse'), + map-get($carbon--theme, 'background-inverse'), + #393939 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-brand: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-brand'), + map-get($carbon--theme, 'background-brand'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$interactive: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'interactive'), + map-get($carbon--theme, 'interactive'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-subtle: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-subtle'), + map-get($carbon--theme, 'border-subtle'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-strong: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-strong'), + map-get($carbon--theme, 'border-strong'), + #8d8d8d +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-inverse'), + map-get($carbon--theme, 'border-inverse'), + #161616 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-interactive: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-interactive'), + map-get($carbon--theme, 'border-interactive'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-primary'), + map-get($carbon--theme, 'text-primary'), + #161616 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-secondary'), + map-get($carbon--theme, 'text-secondary'), + #525252 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-placeholder: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-placeholder'), + map-get($carbon--theme, 'text-placeholder'), + #a8a8a8 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-helper: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-helper'), + map-get($carbon--theme, 'text-helper'), + #6f6f6f +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-on-color: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-on-color'), + map-get($carbon--theme, 'text-on-color'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-inverse'), + map-get($carbon--theme, 'text-inverse'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-primary'), + map-get($carbon--theme, 'link-primary'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-secondary'), + map-get($carbon--theme, 'link-secondary'), + #0043ce +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-visited: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-visited'), + map-get($carbon--theme, 'link-visited'), + #8a3ffc +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-inverse'), + map-get($carbon--theme, 'link-inverse'), + #78a9ff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-primary'), + map-get($carbon--theme, 'icon-primary'), + #161616 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-secondary'), + map-get($carbon--theme, 'icon-secondary'), + #525252 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-on-color: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-on-color'), + map-get($carbon--theme, 'icon-on-color'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-inverse'), + map-get($carbon--theme, 'icon-inverse'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-error: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-error'), + map-get($carbon--theme, 'support-error'), + #da1e28 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-success: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-success'), + map-get($carbon--theme, 'support-success'), + #198038 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-warning: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-warning'), + map-get($carbon--theme, 'support-warning'), + #f1c21b +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-info: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-info'), + map-get($carbon--theme, 'support-info'), + #0043ce +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-error-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-error-inverse'), + map-get($carbon--theme, 'support-error-inverse'), + #fa4d56 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-success-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-success-inverse'), + map-get($carbon--theme, 'support-success-inverse'), + #42be65 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-warning-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-warning-inverse'), + map-get($carbon--theme, 'support-warning-inverse'), + #f1c21b +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$support-info-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'support-info-inverse'), + map-get($carbon--theme, 'support-info-inverse'), + #4589ff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$overlay: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'overlay'), + map-get($carbon--theme, 'overlay'), + rgba(22, 22, 22, 0.5) +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$toggle-off: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'toggle-off'), + map-get($carbon--theme, 'toggle-off'), + #8d8d8d +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$shadow: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'shadow'), + map-get($carbon--theme, 'shadow'), + rgba(0, 0, 0, 0.3) +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-primary'), + map-get($carbon--theme, 'button-primary'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-secondary'), + map-get($carbon--theme, 'button-secondary'), + #393939 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-tertiary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-tertiary'), + map-get($carbon--theme, 'button-tertiary'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-danger-primary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-danger-primary'), + map-get($carbon--theme, 'button-danger-primary'), + #da1e28 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-danger-secondary: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-danger-secondary'), + map-get($carbon--theme, 'button-danger-secondary'), + #da1e28 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-active'), + map-get($carbon--theme, 'background-active'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-active'), + map-get($carbon--theme, 'layer-active'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-danger-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-danger-active'), + map-get($carbon--theme, 'button-danger-active'), + #750e13 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-primary-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-primary-active'), + map-get($carbon--theme, 'button-primary-active'), + #002d9c +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-secondary-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-secondary-active'), + map-get($carbon--theme, 'button-secondary-active'), + #6f6f6f +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-tertiary-active: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-tertiary-active'), + map-get($carbon--theme, 'button-tertiary-active'), + #002d9c +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$focus-inset: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'focus-inset'), + map-get($carbon--theme, 'focus-inset'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$focus-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'focus-inverse'), + map-get($carbon--theme, 'focus-inverse'), + #ffffff +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-hover'), + map-get($carbon--theme, 'background-hover'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-hover'), + map-get($carbon--theme, 'layer-hover'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$field-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'field-hover'), + map-get($carbon--theme, 'field-hover'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-inverse-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-inverse-hover'), + map-get($carbon--theme, 'background-inverse-hover'), + #4c4c4c +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$link-primary-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-primary-hover'), + map-get($carbon--theme, 'link-primary-hover'), + #0043ce +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-danger-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-danger-hover'), + map-get($carbon--theme, 'button-danger-hover'), + #b81921 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-primary-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-primary-hover'), + map-get($carbon--theme, 'button-primary-hover'), + #0353e9 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-secondary-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-secondary-hover'), + map-get($carbon--theme, 'button-secondary-hover'), + #4c4c4c +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-tertiary-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-tertiary-hover'), + map-get($carbon--theme, 'button-tertiary-hover'), + #0353e9 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-selected: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-selected'), + map-get($carbon--theme, 'background-selected'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$background-selected-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'background-selected-hover'), + map-get($carbon--theme, 'background-selected-hover'), + #cacaca +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-selected: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-selected'), + map-get($carbon--theme, 'layer-selected'), + #e0e0e0 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-selected-hover: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-selected-hover'), + map-get($carbon--theme, 'layer-selected-hover'), + #cacaca +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-selected-inverse: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-selected-inverse'), + map-get($carbon--theme, 'layer-selected-inverse'), + #161616 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-subtle-selected: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-subtle-selected'), + map-get($carbon--theme, 'border-subtle-selected'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$border-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'border-disabled'), + map-get($carbon--theme, 'border-disabled'), + #f4f4f4 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-disabled'), + map-get($carbon--theme, 'text-disabled'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$button-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'button-disabled'), + map-get($carbon--theme, 'button-disabled'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-disabled'), + map-get($carbon--theme, 'icon-disabled'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$text-on-color-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'text-on-color-disabled'), + map-get($carbon--theme, 'text-on-color-disabled'), + #8d8d8d +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$icon-on-color-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-on-color-disabled'), + map-get($carbon--theme, 'icon-on-color-disabled'), + #8d8d8d +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$layer-selected-disabled: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layer-selected-disabled'), + map-get($carbon--theme, 'layer-selected-disabled'), + #8d8d8d +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$skeleton-background: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'skeleton-background'), + map-get($carbon--theme, 'skeleton-background'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$skeleton-element: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'skeleton-element'), + map-get($carbon--theme, 'skeleton-element'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +/// @alias interactive-01 +/// @deprecated +$brand-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'brand-01'), + map-get($carbon--theme, 'brand-01'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +/// @alias interactive-02 +/// @deprecated +$brand-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'brand-02'), + map-get($carbon--theme, 'brand-02'), + #393939 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +/// @alias interactive-03 +/// @deprecated +$brand-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'brand-03'), + map-get($carbon--theme, 'brand-03'), + #0f62fe +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +/// @alias active-ui +/// @deprecated +$active-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'active-01'), + map-get($carbon--theme, 'active-01'), + #c6c6c6 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +/// @alias hover-ui +/// @deprecated +$hover-field: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'hover-field'), + map-get($carbon--theme, 'hover-field'), + #e5e5e5 +) !default; + +/// @type {undefined} +/// @access public +/// @group @carbon/themes +$danger: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'danger'), + map-get($carbon--theme, 'danger'), + #da1e28 +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$caption-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'caption-01'), + map-get($carbon--theme, 'caption-01'), + ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$caption-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'caption-02'), + map-get($carbon--theme, 'caption-02'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$label-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'label-01'), + map-get($carbon--theme, 'label-01'), + ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$label-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'label-02'), + map-get($carbon--theme, 'label-02'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$helper-text-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'helper-text-01'), + map-get($carbon--theme, 'helper-text-01'), + ( + font-size: 0.75rem, + line-height: 1.33333, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$helper-text-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'helper-text-02'), + map-get($carbon--theme, 'helper-text-02'), + ( + font-size: 0.875rem, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-short-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-short-01'), + map-get($carbon--theme, 'body-short-01'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-long-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-long-01'), + map-get($carbon--theme, 'body-long-01'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-short-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-short-02'), + map-get($carbon--theme, 'body-short-02'), + ( + font-size: 1rem, + font-weight: 400, + line-height: 1.375, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-long-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-long-02'), + map-get($carbon--theme, 'body-long-02'), + ( + font-size: 1rem, + font-weight: 400, + line-height: 1.5, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$code-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'code-01'), + map-get($carbon--theme, 'code-01'), + ( + font-family: + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$code-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'code-02'), + map-get($carbon--theme, 'code-02'), + ( + font-family: + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-01'), + map-get($carbon--theme, 'heading-01'), + ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.42857, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-01'), + map-get($carbon--theme, 'productive-heading-01'), + ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-02'), + map-get($carbon--theme, 'heading-02'), + ( + font-size: 1rem, + font-weight: 600, + line-height: 1.5, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-02'), + map-get($carbon--theme, 'productive-heading-02'), + ( + font-size: 1rem, + font-weight: 600, + line-height: 1.375, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-03'), + map-get($carbon--theme, 'productive-heading-03'), + ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-04'), + map-get($carbon--theme, 'productive-heading-04'), + ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-05'), + map-get($carbon--theme, 'productive-heading-05'), + ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-06'), + map-get($carbon--theme, 'productive-heading-06'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$productive-heading-07: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'productive-heading-07'), + map-get($carbon--theme, 'productive-heading-07'), + ( + font-size: 3.375rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-01'), + map-get($carbon--theme, 'expressive-heading-01'), + ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-02'), + map-get($carbon--theme, 'expressive-heading-02'), + ( + font-size: 1rem, + font-weight: 600, + line-height: 1.5, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-03'), + map-get($carbon--theme, 'expressive-heading-03'), + ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.25rem, + line-height: 1.25, + ), + max: ( + font-size: 1.5rem, + line-height: 1.334, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-04'), + map-get($carbon--theme, 'expressive-heading-04'), + ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.75rem, + line-height: 1.25, + ), + max: ( + font-size: 2rem, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-05'), + map-get($carbon--theme, 'expressive-heading-05'), + ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 300, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 300, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 300, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-heading-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-heading-06'), + map-get($carbon--theme, 'expressive-heading-06'), + ( + font-size: 2rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 600, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 600, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 600, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$expressive-paragraph-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'expressive-paragraph-01'), + map-get($carbon--theme, 'expressive-paragraph-01'), + ( + font-size: 1.5rem, + font-weight: 300, + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: 1.75rem, + line-height: 1.28572, + ), + max: ( + font-size: 2rem, + line-height: 1.25, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$quotation-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'quotation-01'), + map-get($carbon--theme, 'quotation-01'), + ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 1.25rem, + font-weight: 400, + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 1.25rem, + font-weight: 400, + letter-spacing: 0, + ), + lg: ( + font-size: 1.5rem, + font-weight: 400, + line-height: 1.334, + letter-spacing: 0, + ), + xlg: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + max: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$quotation-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'quotation-02'), + map-get($carbon--theme, 'quotation-02'), + ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 2rem, + font-weight: 300, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + line-height: 1.22, + ), + lg: ( + font-size: 2.625rem, + line-height: 1.19, + ), + xlg: ( + font-size: 3rem, + line-height: 1.17, + ), + max: ( + font-size: 3.75rem, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$display-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'display-01'), + map-get($carbon--theme, 'display-01'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.17, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$display-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'display-02'), + map-get($carbon--theme, 'display-02'), + ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.16, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$display-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'display-03'), + map-get($carbon--theme, 'display-03'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$display-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'display-04'), + map-get($carbon--theme, 'display-04'), + ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$legal-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'legal-01'), + map-get($carbon--theme, 'legal-01'), + ( + font-size: 0.75rem, + font-weight: 400, + line-height: 1.33333, + letter-spacing: 0.32px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$legal-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'legal-02'), + map-get($carbon--theme, 'legal-02'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-compact-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-compact-01'), + map-get($carbon--theme, 'body-compact-01'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-compact-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-compact-02'), + map-get($carbon--theme, 'body-compact-02'), + ( + font-size: 1rem, + font-weight: 400, + line-height: 1.375, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-01'), + map-get($carbon--theme, 'body-01'), + ( + font-size: 0.875rem, + font-weight: 400, + line-height: 1.42857, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$body-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'body-02'), + map-get($carbon--theme, 'body-02'), + ( + font-size: 1rem, + font-weight: 400, + line-height: 1.5, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-compact-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-compact-01'), + map-get($carbon--theme, 'heading-compact-01'), + ( + font-size: 0.875rem, + font-weight: 600, + line-height: 1.28572, + letter-spacing: 0.16px, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-compact-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-compact-02'), + map-get($carbon--theme, 'heading-compact-02'), + ( + font-size: 1rem, + font-weight: 600, + line-height: 1.375, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-03'), + map-get($carbon--theme, 'heading-03'), + ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-04'), + map-get($carbon--theme, 'heading-04'), + ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-05'), + map-get($carbon--theme, 'heading-05'), + ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-06'), + map-get($carbon--theme, 'heading-06'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$heading-07: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'heading-07'), + map-get($carbon--theme, 'heading-07'), + ( + font-size: 3.375rem, + font-weight: 300, + line-height: 1.199, + letter-spacing: 0, + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-heading-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-heading-03'), + map-get($carbon--theme, 'fluid-heading-03'), + ( + font-size: 1.25rem, + font-weight: 400, + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.25rem, + line-height: 1.25, + ), + max: ( + font-size: 1.5rem, + line-height: 1.334, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-heading-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-heading-04'), + map-get($carbon--theme, 'fluid-heading-04'), + ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: 1.75rem, + line-height: 1.25, + ), + max: ( + font-size: 2rem, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-heading-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-heading-05'), + map-get($carbon--theme, 'fluid-heading-05'), + ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 300, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 300, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 300, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-heading-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-heading-06'), + map-get($carbon--theme, 'fluid-heading-06'), + ( + font-size: 2rem, + font-weight: 600, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + font-weight: 600, + line-height: 1.22, + letter-spacing: 0, + ), + lg: ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + ), + xlg: ( + font-size: 3rem, + font-weight: 600, + line-height: 1.17, + letter-spacing: 0, + ), + max: ( + font-size: 3.75rem, + font-weight: 600, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-paragraph-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-paragraph-01'), + map-get($carbon--theme, 'fluid-paragraph-01'), + ( + font-size: 1.5rem, + font-weight: 300, + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: 1.75rem, + line-height: 1.28572, + ), + max: ( + font-size: 2rem, + line-height: 1.25, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-quotation-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-quotation-01'), + map-get($carbon--theme, 'fluid-quotation-01'), + ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 1.25rem, + font-weight: 400, + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 1.25rem, + font-weight: 400, + letter-spacing: 0, + ), + lg: ( + font-size: 1.5rem, + font-weight: 400, + line-height: 1.334, + letter-spacing: 0, + ), + xlg: ( + font-size: 1.75rem, + font-weight: 400, + line-height: 1.28572, + letter-spacing: 0, + ), + max: ( + font-size: 2rem, + font-weight: 400, + line-height: 1.25, + letter-spacing: 0, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-quotation-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-quotation-02'), + map-get($carbon--theme, 'fluid-quotation-02'), + ( + font-family: unquote("'IBM Plex Serif', 'Georgia', Times, serif"), + font-size: 2rem, + font-weight: 300, + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.25rem, + line-height: 1.22, + ), + lg: ( + font-size: 2.625rem, + line-height: 1.19, + ), + xlg: ( + font-size: 3rem, + line-height: 1.17, + ), + max: ( + font-size: 3.75rem, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-display-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-display-01'), + map-get($carbon--theme, 'fluid-display-01'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.17, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-display-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-display-02'), + map-get($carbon--theme, 'fluid-display-02'), + ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 2.625rem, + ), + lg: ( + font-size: 3.375rem, + ), + xlg: ( + font-size: 3.75rem, + line-height: 1.16, + ), + max: ( + font-size: 4.75rem, + line-height: 1.13, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-display-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-display-03'), + map-get($carbon--theme, 'fluid-display-03'), + ( + font-size: 2.625rem, + font-weight: 300, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-display-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-display-04'), + map-get($carbon--theme, 'fluid-display-04'), + ( + font-size: 2.625rem, + font-weight: 600, + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: 4.25rem, + line-height: 1.15, + ), + lg: ( + font-size: 5.75rem, + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: 7.625rem, + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: 9.75rem, + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), + ) +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-01'), + map-get($carbon--theme, 'spacing-01'), + 0.125rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-02'), + map-get($carbon--theme, 'spacing-02'), + 0.25rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-03'), + map-get($carbon--theme, 'spacing-03'), + 0.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-04'), + map-get($carbon--theme, 'spacing-04'), + 0.75rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-05'), + map-get($carbon--theme, 'spacing-05'), + 1rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-06'), + map-get($carbon--theme, 'spacing-06'), + 1.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-07: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-07'), + map-get($carbon--theme, 'spacing-07'), + 2rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-08: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-08'), + map-get($carbon--theme, 'spacing-08'), + 2.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-09: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-09'), + map-get($carbon--theme, 'spacing-09'), + 3rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-10: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-10'), + map-get($carbon--theme, 'spacing-10'), + 4rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-11: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-11'), + map-get($carbon--theme, 'spacing-11'), + 5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-12: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-12'), + map-get($carbon--theme, 'spacing-12'), + 6rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$spacing-13: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'spacing-13'), + map-get($carbon--theme, 'spacing-13'), + 10rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-spacing-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-spacing-01'), + map-get($carbon--theme, 'fluid-spacing-01'), + 0 +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-spacing-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-spacing-02'), + map-get($carbon--theme, 'fluid-spacing-02'), + 2vw +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-spacing-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-spacing-03'), + map-get($carbon--theme, 'fluid-spacing-03'), + 5vw +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$fluid-spacing-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'fluid-spacing-04'), + map-get($carbon--theme, 'fluid-spacing-04'), + 10vw +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-01'), + map-get($carbon--theme, 'layout-01'), + 1rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-02'), + map-get($carbon--theme, 'layout-02'), + 1.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-03'), + map-get($carbon--theme, 'layout-03'), + 2rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-04'), + map-get($carbon--theme, 'layout-04'), + 3rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-05'), + map-get($carbon--theme, 'layout-05'), + 4rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-06: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-06'), + map-get($carbon--theme, 'layout-06'), + 6rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$layout-07: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'layout-07'), + map-get($carbon--theme, 'layout-07'), + 10rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$container-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'container-01'), + map-get($carbon--theme, 'container-01'), + 1.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$container-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'container-02'), + map-get($carbon--theme, 'container-02'), + 2rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$container-03: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'container-03'), + map-get($carbon--theme, 'container-03'), + 2.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$container-04: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'container-04'), + map-get($carbon--theme, 'container-04'), + 3rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$container-05: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'container-05'), + map-get($carbon--theme, 'container-05'), + 4rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-xsmall: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-xsmall'), + map-get($carbon--theme, 'size-xsmall'), + 1.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-small: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-small'), + map-get($carbon--theme, 'size-small'), + 2rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-medium: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-medium'), + map-get($carbon--theme, 'size-medium'), + 2.5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-large: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-large'), + map-get($carbon--theme, 'size-large'), + 3rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-xlarge: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-xlarge'), + map-get($carbon--theme, 'size-xlarge'), + 4rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$size-2XLarge: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'size-2XLarge'), + map-get($carbon--theme, 'size-2XLarge'), + 5rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$icon-size-01: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-size-01'), + map-get($carbon--theme, 'icon-size-01'), + 1rem +) !default; + +/// @type {Number} +/// @access public +/// @group @carbon/themes +$icon-size-02: if( + global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'icon-size-02'), + map-get($carbon--theme, 'icon-size-02'), + 1.25rem +) !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/index.scss new file mode 100644 index 000000000000..182c97c839a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_config.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_config.scss new file mode 100644 index 000000000000..83468f96381a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_config.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +$prefix: 'cds' !default; + +/// Specify if a fallback value should be provided for the CSS Custom Property +$use-fallback-value: true !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_theme.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_theme.scss new file mode 100644 index 000000000000..f56a411bcd0f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_theme.scss @@ -0,0 +1,120 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use 'sass:meta'; +@use 'config'; +@use 'themes'; + +/// Specify the fallback theme, used as a catch-all for tokens that you may not +/// have defined in your custom theme +$fallback: themes.$white !default; + +/// Specify the current theme. This can override existing tokens, or add new +/// tokens. If you are adding new tokens, it's recommended that you set the +/// fallback for your current theme +$theme: () !default; +$theme: map.merge($fallback, $theme); + +/// Local component tokens that can be updated with `@mixin add-component-tokens`. +$-component-tokens: (); + +/// Include the CSS Custom Properties for the active theme or a given theme on +/// a selector +@mixin theme($active-theme: $theme, $component-tokens...) { + @each $token, $value in $active-theme { + @include -custom-property($token, $value); + } + + @each $group in $component-tokens { + @each $token, $value in $group { + @include -custom-property($token, $value); + } + } + + @each $token, $value in $-component-tokens { + @include -custom-property( + $token, + -resolve-token-value($active-theme, $value) + ); + } +} + +/// Retrieve the value for the given $token from the current $theme +/// @param {String} $token +@function get($token) { + @if map.has-key($theme, $token) { + @return map.get($theme, $token); + } + @error "Unable to find token: #{$token} in current $theme"; +} + +/// Compare two themes to see if the second theme is a superset of the first +/// theme. In other words, this function will return true if every token in the +/// first theme is available in the second theme and has the same value. The +/// second theme is allowed to have additional values and it will still match. +/// @param {Map} $a +/// @param {Map} $b +/// @returns {Boolean} +@function matches($a, $b) { + @each $key, $value in $a { + @if map.has-key($b, $key) == false { + @return false; + } + + @if map.get($b, $key) != $value { + @return false; + } + } + + @return true; +} + +/// Add component tokens which will be included any time the theme mixin is +/// called +@mixin add-component-tokens($token-map) { + $-component-tokens: map.merge($-component-tokens, $token-map) !global; +} + +/// Determine the value from a component token that matches the given theme. +/// This is helpful when a component token may change depending on what theme the +/// component is being rendered in. +@function -resolve-token-value($active-theme: $theme, $token-value) { + @if meta.type-of($token-value) == map and map.has-key($token-value, values) { + $fallback: map.get($token-value, fallback); + $theme-values: map.get($token-value, values); + + @each $theme-value in $theme-values { + $theme-to-match: map.get($theme-value, theme); + $value: map.get($theme-value, value); + + @if matches($theme-to-match, $active-theme) { + @return $value; + } + } + + @return $fallback; + } + + @return $token-value; +} + +/// @access private +/// @group @carbon/themes +@mixin -custom-property($name, $value) { + @if meta.type-of($value) == map { + @each $property, $property-value in $value { + // Only support one-level of depth for values that are maps. This is to + // avoid bringing properties like `breakpoints` on type tokens + @if type-of($property-value) != map { + @include -custom-property('#{$name}-#{$property}', $property-value); + } + } + } @else { + --#{config.$prefix}-#{$name}: #{$value}; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_themes.scss new file mode 100644 index 000000000000..4e9bcd947b07 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_themes.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'generated/themes'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_tokens.scss new file mode 100644 index 000000000000..ade2391ec944 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_tokens.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'generated/tokens'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_utilities.scss new file mode 100644 index 000000000000..87e4ab159675 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/_utilities.scss @@ -0,0 +1,18 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; + +/// @access private +/// @group @carbon/themes +@function merge($map, $maps...) { + $result: $map; + @each $map in $maps { + $result: map.merge($result, $map); + } + @return $result; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_themes.scss new file mode 100644 index 000000000000..3ba8a667eb68 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_themes.scss @@ -0,0 +1,432 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use '@carbon/layout'; +@use '@carbon/type'; +@use '../utilities'; + +$white: ( + background: #ffffff, + background-active: #c6c6c6, + background-brand: #0f62fe, + background-hover: #e8e8e8, + background-inverse: #393939, + background-inverse-hover: #474747, + background-selected: #e0e0e0, + background-selected-hover: #d1d1d1, + border-disabled: #c6c6c6, + border-interactive: #0f62fe, + border-inverse: #161616, + border-strong-01: #8d8d8d, + border-strong-02: #8d8d8d, + border-strong-03: #8d8d8d, + border-subtle-00: #e0e0e0, + border-subtle-01: #e0e0e0, + border-subtle-02: #e0e0e0, + border-subtle-03: #e0e0e0, + border-subtle-selected-01: #c6c6c6, + border-subtle-selected-02: #c6c6c6, + border-subtle-selected-03: #c6c6c6, + field-01: #f4f4f4, + field-02: #ffffff, + field-03: #f4f4f4, + field-hover-01: #e8e8e8, + field-hover-02: #e8e8e8, + field-hover-03: #e8e8e8, + focus: #0f62fe, + focus-inset: #ffffff, + focus-inverse: #ffffff, + highlight: #d0e2ff, + icon-disabled: rgba(22, 22, 22, 0.25), + icon-inverse: #ffffff, + icon-on-color: #ffffff, + icon-on-color-disabled: #8d8d8d, + icon-primary: #161616, + icon-secondary: #525252, + interactive: #0f62fe, + layer-01: #f4f4f4, + layer-02: #ffffff, + layer-03: #f4f4f4, + layer-accent-01: #e0e0e0, + layer-accent-02: #e0e0e0, + layer-accent-03: #e0e0e0, + layer-accent-active-01: #a8a8a8, + layer-accent-active-02: #a8a8a8, + layer-accent-active-03: #a8a8a8, + layer-accent-hover-01: #d1d1d1, + layer-accent-hover-02: #d1d1d1, + layer-accent-hover-03: #d1d1d1, + layer-active-01: #c6c6c6, + layer-active-02: #c6c6c6, + layer-active-03: #c6c6c6, + layer-hover-01: #e8e8e8, + layer-hover-02: #e8e8e8, + layer-hover-03: #e8e8e8, + layer-selected-01: #e0e0e0, + layer-selected-02: #e0e0e0, + layer-selected-03: #e0e0e0, + layer-selected-disabled: #8d8d8d, + layer-selected-hover-01: #d1d1d1, + layer-selected-hover-02: #d1d1d1, + layer-selected-hover-03: #d1d1d1, + layer-selected-inverse: #161616, + link-inverse: #78a9ff, + link-inverse-active: #f4f4f4, + link-inverse-hover: #a6c8ff, + link-primary: #0f62fe, + link-primary-hover: #0043ce, + link-secondary: #0043ce, + link-visited: #8a3ffc, + overlay: rgba(22, 22, 22, 0.5), + shadow: rgba(0, 0, 0, 0.3), + skeleton-background: #e8e8e8, + skeleton-element: #c6c6c6, + support-caution-major: #ff832b, + support-caution-minor: #f1c21b, + support-caution-undefined: #8a3ffc, + support-error: #da1e28, + support-error-inverse: #fa4d56, + support-info: #0043ce, + support-info-inverse: #4589ff, + support-success: #24a148, + support-success-inverse: #42be65, + support-warning: #f1c21b, + support-warning-inverse: #f1c21b, + text-disabled: rgba(22, 22, 22, 0.25), + text-error: #da1e28, + text-helper: #6f6f6f, + text-inverse: #ffffff, + text-on-color: #ffffff, + text-on-color-disabled: #8d8d8d, + text-placeholder: rgba(22, 22, 22, 0.4), + text-primary: #161616, + text-secondary: #525252, + toggle-off: #8d8d8d, +) !default; +$white: utilities.merge( + $white, + layout.$spacing, + layout.$fluid-spacing, + type.$tokens +); + +$g10: ( + background: #f4f4f4, + background-active: #c6c6c6, + background-brand: #0f62fe, + background-hover: #e8e8e8, + background-inverse: #393939, + background-inverse-hover: #474747, + background-selected: #e0e0e0, + background-selected-hover: #d1d1d1, + border-disabled: #c6c6c6, + border-interactive: #0f62fe, + border-inverse: #161616, + border-strong-01: #8d8d8d, + border-strong-02: #8d8d8d, + border-strong-03: #8d8d8d, + border-subtle-00: #e0e0e0, + border-subtle-01: #e0e0e0, + border-subtle-02: #e0e0e0, + border-subtle-03: #e0e0e0, + border-subtle-selected-01: #c6c6c6, + border-subtle-selected-02: #c6c6c6, + border-subtle-selected-03: #c6c6c6, + field-01: #ffffff, + field-02: #f4f4f4, + field-03: #ffffff, + field-hover-01: #e8e8e8, + field-hover-02: #e8e8e8, + field-hover-03: #e8e8e8, + focus: #0f62fe, + focus-inset: #ffffff, + focus-inverse: #ffffff, + highlight: #d0e2ff, + icon-disabled: rgba(22, 22, 22, 0.25), + icon-inverse: #ffffff, + icon-on-color: #ffffff, + icon-on-color-disabled: #8d8d8d, + icon-primary: #161616, + icon-secondary: #525252, + interactive: #0f62fe, + layer-01: #ffffff, + layer-02: #f4f4f4, + layer-03: #ffffff, + layer-accent-01: #e0e0e0, + layer-accent-02: #e0e0e0, + layer-accent-03: #e0e0e0, + layer-accent-active-01: #a8a8a8, + layer-accent-active-02: #a8a8a8, + layer-accent-active-03: #a8a8a8, + layer-accent-hover-01: #d1d1d1, + layer-accent-hover-02: #d1d1d1, + layer-accent-hover-03: #d1d1d1, + layer-active-01: #c6c6c6, + layer-active-02: #c6c6c6, + layer-active-03: #c6c6c6, + layer-hover-01: #e8e8e8, + layer-hover-02: #e8e8e8, + layer-hover-03: #e8e8e8, + layer-selected-01: #e0e0e0, + layer-selected-02: #e0e0e0, + layer-selected-03: #e0e0e0, + layer-selected-disabled: #8d8d8d, + layer-selected-hover-01: #d1d1d1, + layer-selected-hover-02: #d1d1d1, + layer-selected-hover-03: #d1d1d1, + layer-selected-inverse: #161616, + link-inverse: #78a9ff, + link-inverse-active: #f4f4f4, + link-inverse-hover: #a6c8ff, + link-primary: #0f62fe, + link-primary-hover: #0043ce, + link-secondary: #0043ce, + link-visited: #8a3ffc, + overlay: rgba(22, 22, 22, 0.5), + shadow: rgba(0, 0, 0, 0.3), + skeleton-background: #e8e8e8, + skeleton-element: #c6c6c6, + support-caution-major: #ff832b, + support-caution-minor: #f1c21b, + support-caution-undefined: #8a3ffc, + support-error: #da1e28, + support-error-inverse: #fa4d56, + support-info: #0043ce, + support-info-inverse: #4589ff, + support-success: #24a148, + support-success-inverse: #42be65, + support-warning: #f1c21b, + support-warning-inverse: #f1c21b, + text-disabled: rgba(22, 22, 22, 0.25), + text-error: #da1e28, + text-helper: #6f6f6f, + text-inverse: #ffffff, + text-on-color: #ffffff, + text-on-color-disabled: #8d8d8d, + text-placeholder: rgba(22, 22, 22, 0.4), + text-primary: #161616, + text-secondary: #525252, + toggle-off: #8d8d8d, +) !default; +$g10: utilities.merge( + $g10, + layout.$spacing, + layout.$fluid-spacing, + type.$tokens +); + +$g90: ( + background: #262626, + background-active: #393939, + background-brand: #0f62fe, + background-hover: #333333, + background-inverse: #f4f4f4, + background-inverse-hover: #e8e8e8, + background-selected: #393939, + background-selected-hover: #474747, + border-disabled: rgba(141, 141, 141, 0.5), + border-interactive: #4589ff, + border-inverse: #f4f4f4, + border-strong-01: #8d8d8d, + border-strong-02: #a8a8a8, + border-strong-03: #c6c6c6, + border-subtle-00: #525252, + border-subtle-01: #525252, + border-subtle-02: #6f6f6f, + border-subtle-03: #8d8d8d, + border-subtle-selected-01: #6f6f6f, + border-subtle-selected-02: #8d8d8d, + border-subtle-selected-03: #a8a8a8, + field-01: #393939, + field-02: #525252, + field-03: #6f6f6f, + field-hover-01: #474747, + field-hover-02: #636363, + field-hover-03: #5e5e5e, + focus: #ffffff, + focus-inset: #161616, + focus-inverse: #0f62fe, + highlight: #0043ce, + icon-disabled: rgba(244, 244, 244, 0.25), + icon-inverse: #161616, + icon-on-color: #ffffff, + icon-on-color-disabled: rgba(255, 255, 255, 0.25), + icon-primary: #f4f4f4, + icon-secondary: #c6c6c6, + interactive: #4589ff, + layer-01: #393939, + layer-02: #525252, + layer-03: #6f6f6f, + layer-accent-01: #525252, + layer-accent-02: #6f6f6f, + layer-accent-03: #8d8d8d, + layer-accent-active-01: #8d8d8d, + layer-accent-active-02: #393939, + layer-accent-active-03: #525252, + layer-accent-hover-01: #636363, + layer-accent-hover-02: #5e5e5e, + layer-accent-hover-03: #7a7a7a, + layer-active-01: #6f6f6f, + layer-active-02: #8d8d8d, + layer-active-03: #393939, + layer-hover-01: #474747, + layer-hover-02: #636363, + layer-hover-03: #5e5e5e, + layer-selected-01: #525252, + layer-selected-02: #6f6f6f, + layer-selected-03: #8d8d8d, + layer-selected-disabled: #a8a8a8, + layer-selected-hover-01: #636363, + layer-selected-hover-02: #5e5e5e, + layer-selected-hover-03: #7a7a7a, + layer-selected-inverse: #f4f4f4, + link-inverse: #0f62fe, + link-inverse-active: #161616, + link-inverse-hover: #0043ce, + link-primary: #78a9ff, + link-primary-hover: #a6c8ff, + link-secondary: #a6c8ff, + link-visited: #be95ff, + overlay: rgba(0, 0, 0, 0.65), + shadow: rgba(0, 0, 0, 0.8), + skeleton-background: #333333, + skeleton-element: #525252, + support-caution-major: #ff832b, + support-caution-minor: #f1c21b, + support-caution-undefined: #a56eff, + support-error: #ff8389, + support-error-inverse: #da1e28, + support-info: #4589ff, + support-info-inverse: #0043ce, + support-success: #42be65, + support-success-inverse: #24a148, + support-warning: #f1c21b, + support-warning-inverse: #f1c21b, + text-disabled: rgba(244, 244, 244, 0.25), + text-error: #ffb3b8, + text-helper: #c6c6c6, + text-inverse: #161616, + text-on-color: #ffffff, + text-on-color-disabled: rgba(255, 255, 255, 0.25), + text-placeholder: rgba(244, 244, 244, 0.4), + text-primary: #f4f4f4, + text-secondary: #c6c6c6, + toggle-off: #8d8d8d, +) !default; +$g90: utilities.merge( + $g90, + layout.$spacing, + layout.$fluid-spacing, + type.$tokens +); + +$g100: ( + background: #161616, + background-active: #393939, + background-brand: #0f62fe, + background-hover: #292929, + background-inverse: #f4f4f4, + background-inverse-hover: #e8e8e8, + background-selected: #262626, + background-selected-hover: #333333, + border-disabled: rgba(141, 141, 141, 0.5), + border-interactive: #4589ff, + border-inverse: #f4f4f4, + border-strong-01: #6f6f6f, + border-strong-02: #8d8d8d, + border-strong-03: #a8a8a8, + border-subtle-00: #393939, + border-subtle-01: #393939, + border-subtle-02: #525252, + border-subtle-03: #6f6f6f, + border-subtle-selected-01: #525252, + border-subtle-selected-02: #6f6f6f, + border-subtle-selected-03: #8d8d8d, + field-01: #262626, + field-02: #393939, + field-03: #525252, + field-hover-01: #333333, + field-hover-02: #474747, + field-hover-03: #636363, + focus: #ffffff, + focus-inset: #161616, + focus-inverse: #0f62fe, + highlight: #002d9c, + icon-disabled: rgba(244, 244, 244, 0.25), + icon-inverse: #161616, + icon-on-color: #ffffff, + icon-on-color-disabled: rgba(255, 255, 255, 0.25), + icon-primary: #f4f4f4, + icon-secondary: #c6c6c6, + interactive: #4589ff, + layer-01: #262626, + layer-02: #393939, + layer-03: #525252, + layer-accent-01: #393939, + layer-accent-02: #525252, + layer-accent-03: #6f6f6f, + layer-accent-active-01: #6f6f6f, + layer-accent-active-02: #8d8d8d, + layer-accent-active-03: #393939, + layer-accent-hover-01: #474747, + layer-accent-hover-02: #636363, + layer-accent-hover-03: #5e5e5e, + layer-active-01: #525252, + layer-active-02: #6f6f6f, + layer-active-03: #8d8d8d, + layer-hover-01: #333333, + layer-hover-02: #474747, + layer-hover-03: #636363, + layer-selected-01: #393939, + layer-selected-02: #525252, + layer-selected-03: #6f6f6f, + layer-selected-disabled: #a8a8a8, + layer-selected-hover-01: #474747, + layer-selected-hover-02: #636363, + layer-selected-hover-03: #5e5e5e, + layer-selected-inverse: #f4f4f4, + link-inverse: #0f62fe, + link-inverse-active: #161616, + link-inverse-hover: #0043ce, + link-primary: #78a9ff, + link-primary-hover: #a6c8ff, + link-secondary: #a6c8ff, + link-visited: #be95ff, + overlay: rgba(0, 0, 0, 0.65), + shadow: rgba(0, 0, 0, 0.8), + skeleton-background: #292929, + skeleton-element: #393939, + support-caution-major: #ff832b, + support-caution-minor: #f1c21b, + support-caution-undefined: #a56eff, + support-error: #fa4d56, + support-error-inverse: #da1e28, + support-info: #4589ff, + support-info-inverse: #0043ce, + support-success: #42be65, + support-success-inverse: #24a148, + support-warning: #f1c21b, + support-warning-inverse: #f1c21b, + text-disabled: rgba(244, 244, 244, 0.25), + text-error: #ff8389, + text-helper: #a8a8a8, + text-inverse: #161616, + text-on-color: #ffffff, + text-on-color-disabled: rgba(255, 255, 255, 0.25), + text-placeholder: rgba(244, 244, 244, 0.4), + text-primary: #f4f4f4, + text-secondary: #c6c6c6, + toggle-off: #6f6f6f, +) !default; +$g100: utilities.merge( + $g100, + layout.$spacing, + layout.$fluid-spacing, + type.$tokens +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_tokens.scss new file mode 100644 index 000000000000..79cb17ae1aea --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/modules/generated/_tokens.scss @@ -0,0 +1,308 @@ +// Code generated by @carbon/themes. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use '../config'; +@use '../theme'; + +/// Internal helper for generating CSS Custom Properties +@function _get($token) { + @if config.$use-fallback-value == false { + @return var(--#{config.$prefix}-#{$token}); + } @else { + @return var(--#{config.$prefix}-#{$token}, #{theme.get($token)}); + } +} + +/// The CSS Custom Property for the `background` token +$background: _get('background') !default; + +/// The CSS Custom Property for the `background-active` token +$background-active: _get('background-active') !default; + +/// The CSS Custom Property for the `background-selected` token +$background-selected: _get('background-selected') !default; + +/// The CSS Custom Property for the `background-selected-hover` token +$background-selected-hover: _get('background-selected-hover') !default; + +/// The CSS Custom Property for the `background-hover` token +$background-hover: _get('background-hover') !default; + +/// The CSS Custom Property for the `background-brand` token +$background-brand: _get('background-brand') !default; + +/// The CSS Custom Property for the `background-inverse` token +$background-inverse: _get('background-inverse') !default; + +/// The CSS Custom Property for the `background-inverse-hover` token +$background-inverse-hover: _get('background-inverse-hover') !default; + +/// The CSS Custom Property for the `layer-01` token +$layer-01: _get('layer-01') !default; + +/// The CSS Custom Property for the `layer-active-01` token +$layer-active-01: _get('layer-active-01') !default; + +/// The CSS Custom Property for the `layer-hover-01` token +$layer-hover-01: _get('layer-hover-01') !default; + +/// The CSS Custom Property for the `layer-selected-01` token +$layer-selected-01: _get('layer-selected-01') !default; + +/// The CSS Custom Property for the `layer-selected-hover-01` token +$layer-selected-hover-01: _get('layer-selected-hover-01') !default; + +/// The CSS Custom Property for the `layer-02` token +$layer-02: _get('layer-02') !default; + +/// The CSS Custom Property for the `layer-active-02` token +$layer-active-02: _get('layer-active-02') !default; + +/// The CSS Custom Property for the `layer-hover-02` token +$layer-hover-02: _get('layer-hover-02') !default; + +/// The CSS Custom Property for the `layer-selected-02` token +$layer-selected-02: _get('layer-selected-02') !default; + +/// The CSS Custom Property for the `layer-selected-hover-02` token +$layer-selected-hover-02: _get('layer-selected-hover-02') !default; + +/// The CSS Custom Property for the `layer-03` token +$layer-03: _get('layer-03') !default; + +/// The CSS Custom Property for the `layer-active-03` token +$layer-active-03: _get('layer-active-03') !default; + +/// The CSS Custom Property for the `layer-hover-03` token +$layer-hover-03: _get('layer-hover-03') !default; + +/// The CSS Custom Property for the `layer-selected-03` token +$layer-selected-03: _get('layer-selected-03') !default; + +/// The CSS Custom Property for the `layer-selected-hover-03` token +$layer-selected-hover-03: _get('layer-selected-hover-03') !default; + +/// The CSS Custom Property for the `layer-selected-inverse` token +$layer-selected-inverse: _get('layer-selected-inverse') !default; + +/// The CSS Custom Property for the `layer-selected-disabled` token +$layer-selected-disabled: _get('layer-selected-disabled') !default; + +/// The CSS Custom Property for the `layer-accent-01` token +$layer-accent-01: _get('layer-accent-01') !default; + +/// The CSS Custom Property for the `layer-accent-active-01` token +$layer-accent-active-01: _get('layer-accent-active-01') !default; + +/// The CSS Custom Property for the `layer-accent-hover-01` token +$layer-accent-hover-01: _get('layer-accent-hover-01') !default; + +/// The CSS Custom Property for the `layer-accent-02` token +$layer-accent-02: _get('layer-accent-02') !default; + +/// The CSS Custom Property for the `layer-accent-active-02` token +$layer-accent-active-02: _get('layer-accent-active-02') !default; + +/// The CSS Custom Property for the `layer-accent-hover-02` token +$layer-accent-hover-02: _get('layer-accent-hover-02') !default; + +/// The CSS Custom Property for the `layer-accent-03` token +$layer-accent-03: _get('layer-accent-03') !default; + +/// The CSS Custom Property for the `layer-accent-active-03` token +$layer-accent-active-03: _get('layer-accent-active-03') !default; + +/// The CSS Custom Property for the `layer-accent-hover-03` token +$layer-accent-hover-03: _get('layer-accent-hover-03') !default; + +/// The CSS Custom Property for the `field-01` token +$field-01: _get('field-01') !default; + +/// The CSS Custom Property for the `field-hover-01` token +$field-hover-01: _get('field-hover-01') !default; + +/// The CSS Custom Property for the `field-02` token +$field-02: _get('field-02') !default; + +/// The CSS Custom Property for the `field-hover-02` token +$field-hover-02: _get('field-hover-02') !default; + +/// The CSS Custom Property for the `field-03` token +$field-03: _get('field-03') !default; + +/// The CSS Custom Property for the `field-hover-03` token +$field-hover-03: _get('field-hover-03') !default; + +/// The CSS Custom Property for the `interactive` token +$interactive: _get('interactive') !default; + +/// The CSS Custom Property for the `border-subtle-00` token +$border-subtle-00: _get('border-subtle-00') !default; + +/// The CSS Custom Property for the `border-subtle-01` token +$border-subtle-01: _get('border-subtle-01') !default; + +/// The CSS Custom Property for the `border-subtle-selected-01` token +$border-subtle-selected-01: _get('border-subtle-selected-01') !default; + +/// The CSS Custom Property for the `border-subtle-02` token +$border-subtle-02: _get('border-subtle-02') !default; + +/// The CSS Custom Property for the `border-subtle-selected-02` token +$border-subtle-selected-02: _get('border-subtle-selected-02') !default; + +/// The CSS Custom Property for the `border-subtle-03` token +$border-subtle-03: _get('border-subtle-03') !default; + +/// The CSS Custom Property for the `border-subtle-selected-03` token +$border-subtle-selected-03: _get('border-subtle-selected-03') !default; + +/// The CSS Custom Property for the `border-strong-01` token +$border-strong-01: _get('border-strong-01') !default; + +/// The CSS Custom Property for the `border-strong-02` token +$border-strong-02: _get('border-strong-02') !default; + +/// The CSS Custom Property for the `border-strong-03` token +$border-strong-03: _get('border-strong-03') !default; + +/// The CSS Custom Property for the `border-inverse` token +$border-inverse: _get('border-inverse') !default; + +/// The CSS Custom Property for the `border-interactive` token +$border-interactive: _get('border-interactive') !default; + +/// The CSS Custom Property for the `border-disabled` token +$border-disabled: _get('border-disabled') !default; + +/// The CSS Custom Property for the `text-primary` token +$text-primary: _get('text-primary') !default; + +/// The CSS Custom Property for the `text-secondary` token +$text-secondary: _get('text-secondary') !default; + +/// The CSS Custom Property for the `text-placeholder` token +$text-placeholder: _get('text-placeholder') !default; + +/// The CSS Custom Property for the `text-helper` token +$text-helper: _get('text-helper') !default; + +/// The CSS Custom Property for the `text-error` token +$text-error: _get('text-error') !default; + +/// The CSS Custom Property for the `text-inverse` token +$text-inverse: _get('text-inverse') !default; + +/// The CSS Custom Property for the `text-on-color` token +$text-on-color: _get('text-on-color') !default; + +/// The CSS Custom Property for the `text-on-color-disabled` token +$text-on-color-disabled: _get('text-on-color-disabled') !default; + +/// The CSS Custom Property for the `text-disabled` token +$text-disabled: _get('text-disabled') !default; + +/// The CSS Custom Property for the `link-primary` token +$link-primary: _get('link-primary') !default; + +/// The CSS Custom Property for the `link-primary-hover` token +$link-primary-hover: _get('link-primary-hover') !default; + +/// The CSS Custom Property for the `link-secondary` token +$link-secondary: _get('link-secondary') !default; + +/// The CSS Custom Property for the `link-visited` token +$link-visited: _get('link-visited') !default; + +/// The CSS Custom Property for the `link-inverse` token +$link-inverse: _get('link-inverse') !default; + +/// The CSS Custom Property for the `link-inverse-active` token +$link-inverse-active: _get('link-inverse-active') !default; + +/// The CSS Custom Property for the `link-inverse-hover` token +$link-inverse-hover: _get('link-inverse-hover') !default; + +/// The CSS Custom Property for the `icon-primary` token +$icon-primary: _get('icon-primary') !default; + +/// The CSS Custom Property for the `icon-secondary` token +$icon-secondary: _get('icon-secondary') !default; + +/// The CSS Custom Property for the `icon-inverse` token +$icon-inverse: _get('icon-inverse') !default; + +/// The CSS Custom Property for the `icon-on-color` token +$icon-on-color: _get('icon-on-color') !default; + +/// The CSS Custom Property for the `icon-on-color-disabled` token +$icon-on-color-disabled: _get('icon-on-color-disabled') !default; + +/// The CSS Custom Property for the `icon-disabled` token +$icon-disabled: _get('icon-disabled') !default; + +/// The CSS Custom Property for the `support-error` token +$support-error: _get('support-error') !default; + +/// The CSS Custom Property for the `support-success` token +$support-success: _get('support-success') !default; + +/// The CSS Custom Property for the `support-warning` token +$support-warning: _get('support-warning') !default; + +/// The CSS Custom Property for the `support-info` token +$support-info: _get('support-info') !default; + +/// The CSS Custom Property for the `support-error-inverse` token +$support-error-inverse: _get('support-error-inverse') !default; + +/// The CSS Custom Property for the `support-success-inverse` token +$support-success-inverse: _get('support-success-inverse') !default; + +/// The CSS Custom Property for the `support-warning-inverse` token +$support-warning-inverse: _get('support-warning-inverse') !default; + +/// The CSS Custom Property for the `support-info-inverse` token +$support-info-inverse: _get('support-info-inverse') !default; + +/// The CSS Custom Property for the `support-caution-major` token +$support-caution-major: _get('support-caution-major') !default; + +/// The CSS Custom Property for the `support-caution-minor` token +$support-caution-minor: _get('support-caution-minor') !default; + +/// The CSS Custom Property for the `support-caution-undefined` token +$support-caution-undefined: _get('support-caution-undefined') !default; + +/// The CSS Custom Property for the `highlight` token +$highlight: _get('highlight') !default; + +/// The CSS Custom Property for the `overlay` token +$overlay: _get('overlay') !default; + +/// The CSS Custom Property for the `toggle-off` token +$toggle-off: _get('toggle-off') !default; + +/// The CSS Custom Property for the `shadow` token +$shadow: _get('shadow') !default; + +/// The CSS Custom Property for the `focus` token +$focus: _get('focus') !default; + +/// The CSS Custom Property for the `focus-inset` token +$focus-inset: _get('focus-inset') !default; + +/// The CSS Custom Property for the `focus-inverse` token +$focus-inverse: _get('focus-inverse') !default; + +/// The CSS Custom Property for the `skeleton-background` token +$skeleton-background: _get('skeleton-background') !default; + +/// The CSS Custom Property for the `skeleton-element` token +$skeleton-element: _get('skeleton-element') !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss new file mode 100644 index 000000000000..e07cee11ca2e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/themes.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/tokens'; +@import './generated/themes'; +@import './mixins'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss new file mode 100644 index 000000000000..021d798b06ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_classes.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'prefix'; +@import 'styles'; +@import 'font-family'; + +/// Create type classes for font families, weights, styles +/// @access public +/// @group @carbon/type +@mixin carbon--type-classes { + // Font families + @each $name, $value in $carbon--font-families { + .#{$prefix}--type-#{$name} { + font-family: $value; + } + } + + // Font weights + @each $name, $value in $carbon--font-weights { + .#{$prefix}--type-#{$name} { + font-weight: $value; + } + } + + // Font styles + .#{$prefix}--type-italic { + font-style: italic; + } + + // Type styles + @each $name, $value in $tokens { + .#{$prefix}--type-#{$name} { + @include carbon--type-style($name, map-has-key($value, breakpoints)); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss new file mode 100644 index 000000000000..9803c8013ceb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_font-family.scss @@ -0,0 +1,70 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans +/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--font-families: ( + 'mono': + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"), + 'sans-condensed': + unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"), + 'sans-hebrew': + unquote( + "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif" + ), + 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"), +) !default; + +/// Get the font-family for an IBM Plex font +/// @param {String} $name +/// @return {String} +/// @access public +/// @group @carbon/type +@function carbon--font-family($name) { + @return map-get($carbon--font-families, $name); +} + +/// Include the `font-family` definition for the given name in your selector +/// @param {String} $name +/// @access public +/// @group @carbon/type +@mixin carbon--font-family($name) { + font-family: carbon--font-family($name); +} + +/// Suggested font weights to be used in product +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--font-weights: ( + 'light': 300, + 'regular': 400, + 'semibold': 600, +) !default; + +/// Retrieve the font-weight value for a given name +/// @param {String} $weight +/// @return {Number} +/// @access public +/// @group @carbon/type +@function carbon--font-weight($weight) { + @return map-get($carbon--font-weights, $weight); +} + +/// Set the `font-weight` property with the value for a given name +/// @param {String} $weight +/// @access public +/// @group @carbon/type +@mixin carbon--font-weight($weight) { + font-weight: carbon--font-weight($weight); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_classes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_classes.scss new file mode 100644 index 000000000000..021d798b06ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_classes.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'prefix'; +@import 'styles'; +@import 'font-family'; + +/// Create type classes for font families, weights, styles +/// @access public +/// @group @carbon/type +@mixin carbon--type-classes { + // Font families + @each $name, $value in $carbon--font-families { + .#{$prefix}--type-#{$name} { + font-family: $value; + } + } + + // Font weights + @each $name, $value in $carbon--font-weights { + .#{$prefix}--type-#{$name} { + font-weight: $value; + } + } + + // Font styles + .#{$prefix}--type-italic { + font-style: italic; + } + + // Type styles + @each $name, $value in $tokens { + .#{$prefix}--type-#{$name} { + @include carbon--type-style($name, map-has-key($value, breakpoints)); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_font-family.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_font-family.scss new file mode 100644 index 000000000000..9803c8013ceb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_font-family.scss @@ -0,0 +1,70 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans +/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--font-families: ( + 'mono': + unquote( + "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + ), + 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"), + 'sans-condensed': + unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"), + 'sans-hebrew': + unquote( + "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif" + ), + 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"), +) !default; + +/// Get the font-family for an IBM Plex font +/// @param {String} $name +/// @return {String} +/// @access public +/// @group @carbon/type +@function carbon--font-family($name) { + @return map-get($carbon--font-families, $name); +} + +/// Include the `font-family` definition for the given name in your selector +/// @param {String} $name +/// @access public +/// @group @carbon/type +@mixin carbon--font-family($name) { + font-family: carbon--font-family($name); +} + +/// Suggested font weights to be used in product +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--font-weights: ( + 'light': 300, + 'regular': 400, + 'semibold': 600, +) !default; + +/// Retrieve the font-weight value for a given name +/// @param {String} $weight +/// @return {Number} +/// @access public +/// @group @carbon/type +@function carbon--font-weight($weight) { + @return map-get($carbon--font-weights, $weight); +} + +/// Set the `font-weight` property with the value for a given name +/// @param {String} $weight +/// @access public +/// @group @carbon/type +@mixin carbon--font-weight($weight) { + font-weight: carbon--font-weight($weight); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_prefix.scss new file mode 100644 index 000000000000..09c7214038b8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_prefix.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type String +/// @access public +/// @group @carbon/type +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_reset.scss new file mode 100644 index 000000000000..36c1396ab826 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_reset.scss @@ -0,0 +1,90 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import '../vendor/@carbon/layout/convert'; +@import 'font-family'; +@import 'styles'; + +/// Include a type reset for a given body and mono font family +/// @param {String} $body-font-family [carbon--font-family('sans')] - The font family used on the `` element +/// @param {String} $mono-font-family [carbon--font-family('mono')] - The font family used on elements that require mono fonts, like the `` element +/// @access public +/// @group @carbon/type +@mixin carbon--type-reset( + // TODO: remove in next major release. This has been replaced with 100% + $base-font-size: $carbon--base-font-size, + $body-font-family: carbon--font-family('sans'), + $mono-font-family: carbon--font-family('mono') +) { + html { + font-size: 100%; + } + + body { + @include carbon--font-weight('regular'); + + font-family: $body-font-family; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + code { + font-family: $mono-font-family; + } + + strong { + @include carbon--font-weight('semibold'); + } +} + +/// Include default type styles +/// @access public +/// @group @carbon/type +@mixin carbon--default-type { + h1 { + @include carbon--type-style('productive-heading-06'); + } + + h2 { + @include carbon--type-style('productive-heading-05'); + } + + h3 { + @include carbon--type-style('productive-heading-04'); + } + + h4 { + @include carbon--type-style('productive-heading-03'); + } + + h5 { + @include carbon--type-style('productive-heading-02'); + } + + h6 { + @include carbon--type-style('productive-heading-01'); + } + + p { + @include carbon--type-style('body-long-02'); + } + + a { + @if global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-01') + { + color: map-get($carbon--theme, 'link-01'); + } @else { + color: #0062fe; + } + } + + em { + font-style: italic; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_scale.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_scale.scss new file mode 100644 index 000000000000..769db5c7fc3d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_scale.scss @@ -0,0 +1,59 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import '../vendor/@carbon/layout/convert'; + +/// Compute the type size for the given type scale step +/// @param {Number} $step +/// @return {Number} In px +/// @access public +/// @group @carbon/type +@function carbon--get-type-size($step) { + @if $step == 1 { + @return 12px; + } + // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2 + @return carbon--get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2; +} + +/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--type-scale: (); +@for $i from 1 through 23 { + $carbon--type-scale: append( + $carbon--type-scale, + carbon--rem(carbon--get-type-size($i)) + ); +} + +/// Get the value of a specific step in the type scale +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/type +@function carbon--type-scale($step) { + @return nth($carbon--type-scale, $step); +} + +/// Set the font-size value of a selector with the value at the given `$step` +/// @param {Number} $step +/// @access public +/// @group @carbon/type +@mixin carbon--type-scale($step) { + font-size: carbon--type-scale($step); +} + +/// Alias of `type-scale` mixin. +/// @param {Number} $step +/// @alias carbon--type-scale +/// @access public +/// @group @carbon/type +@mixin carbon--font-size($step) { + font-size: carbon--type-scale($step); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.import.scss new file mode 100644 index 000000000000..d8dfcffca814 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.import.scss @@ -0,0 +1,766 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use "sass:meta"; +@use "sass:math"; +@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// @type Map +/// @access public +/// @group @carbon/type +$caption-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$caption-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$helper-text-01: ( + font-size: carbon--type-scale(1), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$helper-text-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.43, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-01: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-02: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.43, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.29, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-01: $heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-02: $heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + // Extra digit needed for precision in Chrome + line-height: 1.199, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-07: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-01: map-merge( + $heading-01, + ( + line-height: 1.25, + ) +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-02: map-merge( + $heading-02, + ( + line-height: 1.5, + ) +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(5), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(6), + line-height: 1.334, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(8), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + font-weight: carbon--font-weight('light'), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('semibold'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-paragraph-01: ( + font-size: carbon--type-scale(6), + font-weight: carbon--font-weight('light'), + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: carbon--type-scale(7), + line-height: 1.29, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +); + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-01: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(5), + ), + lg: ( + font-size: carbon--type-scale(6), + line-height: 1.334, + ), + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.29, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-02: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-01: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-02: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.16, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-03: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-04: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$tokens: ( + caption-01: $caption-01, + caption-02: $caption-02, + label-01: $label-01, + label-02: $label-02, + helper-text-01: $helper-text-01, + helper-text-02: $helper-text-02, + body-short-01: $body-short-01, + body-short-02: $body-short-02, + body-long-01: $body-long-01, + body-long-02: $body-long-02, + code-01: $code-01, + code-02: $code-02, + heading-01: $heading-01, + heading-02: $heading-02, + productive-heading-01: $productive-heading-01, + productive-heading-02: $productive-heading-02, + productive-heading-03: $productive-heading-03, + productive-heading-04: $productive-heading-04, + productive-heading-05: $productive-heading-05, + productive-heading-06: $productive-heading-06, + productive-heading-07: $productive-heading-07, + expressive-paragraph-01: $expressive-paragraph-01, + expressive-heading-01: $expressive-heading-01, + expressive-heading-02: $expressive-heading-02, + expressive-heading-03: $expressive-heading-03, + expressive-heading-04: $expressive-heading-04, + expressive-heading-05: $expressive-heading-05, + expressive-heading-06: $expressive-heading-06, + quotation-01: $quotation-01, + quotation-02: $quotation-02, + display-01: $display-01, + display-02: $display-02, + display-03: $display-03, + display-04: $display-04, +); + +/// @param {Map} $map +/// @access public +/// @group @carbon/type +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +/// @param {Number} $value - Number with units +/// @return {Number} Without units +/// @access public +/// @group @carbon/type +@function strip-unit($value) { + @if meta.function-exists('div', 'math') { + @return math.div($value, $value * 0 + 1); + } @else { + @return $value / ($value * 0 + 1); + } +} + +/// This helper includes fluid type styles for the given token value. Fluid type +/// means that the `font-size` is computed using `calc()` in order to be +/// determined by the screen size instead of a breakpoint. As a result, fluid +/// styles should be used with caution in fixed width contexts. +/// +/// In addition, we make use of %-based line-heights so that the line-height of +/// each type style is computed correctly due to the dynamic nature of the +/// `font-size`. +/// +/// Most of the logic for this work comes from CSS Tricks: +/// https://css-tricks.com/snippets/css/fluid-typography/ +/// +/// @param {Map} $type-styles - The value of a given type token +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use +/// @access public +/// @group @carbon/type +@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) { + // Include the initial styles for the given token by default without any + // media query guard. This includes `font-size` as a fallback in the case + // that a browser does not support `calc()` + @include properties(map-remove($type-styles, breakpoints)); + // We also need to include the `sm` styles by default since they don't + // appear in the fluid styles for tokens + @include fluid-type-size($type-styles, sm, $breakpoints); + + // Finally, we need to go through all the breakpoints defined in the type + // token and apply the properties and fluid type size for that given + // breakpoint + @each $name, $values in map-get($type-styles, breakpoints) { + @include carbon--breakpoint($name) { + @include properties($values); + @include fluid-type-size($type-styles, $name, $breakpoints); + } + } +} + +/// Computes the fluid `font-size` for a given type style and breakpoint +/// @param {Map} $type-styles - The styles for a given token +/// @param {String} $name - The name of the breakpoint to which we apply the fluid +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system +/// @access public +/// @group @carbon/type +@mixin fluid-type-size( + $type-styles, + $name, + $breakpoints: $carbon--grid-breakpoints +) { + // Get the information about the breakpoint we're currently working in. Useful + // for getting initial width information + $breakpoint: map-get($breakpoints, $name); + + // Our fluid styles are captured under the 'breakpoints' property in our type + // styles map. These define what values to treat as `max-` variables below + $fluid-sizes: map-get($type-styles, breakpoints); + $fluid-breakpoint: (); + // Special case for `sm` because the styles for small are on the type style + // directly + @if $name == sm { + $fluid-breakpoint: map-remove($type-styles, breakpoints); + } @else { + $fluid-breakpoint: map-get($fluid-sizes, $name); + } + + // Initialize our font-sizes to the default size for the type style + $max-font-size: map-get($type-styles, font-size); + $min-font-size: map-get($type-styles, font-size); + @if map-has-key($fluid-breakpoint, font-size) { + $min-font-size: map-get($fluid-breakpoint, font-size); + } + + // Initialize our min and max width to the width of the current breakpoint + $max-vw: map-get($breakpoint, width); + $min-vw: map-get($breakpoint, width); + + // We can use `breakpoint-next` to see if there is another breakpoint we can + // use to update `max-font-size` and `max-vw` with larger values + $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints); + $next-fluid-breakpoint-name: null; + + // We need to figure out what the next available fluid breakpoint is for our + // given $type-styles. In this loop we try and iterate through breakpoints + // until we either manually set $next-breakpoint-available to null or + // `breakpoint-next` returns null. + @while $next-breakpoint-available { + @if map-has-key($fluid-sizes, $next-breakpoint-available) { + $next-fluid-breakpoint-name: $next-breakpoint-available; + $next-breakpoint-available: null; + } @else { + $next-breakpoint-available: carbon--breakpoint-next( + $next-breakpoint-available, + $breakpoints + ); + } + } + + // If we have found the next available fluid breakpoint name, then we know + // that we have values that we can use to set max-font-size and max-vw as both + // values derive from the next breakpoint + @if $next-fluid-breakpoint-name { + $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name); + $max-font-size: map-get( + map-get($fluid-sizes, $next-fluid-breakpoint-name), + font-size + ); + $max-vw: map-get($next-fluid-breakpoint, width); + + // prettier-ignore + font-size: calc(#{$min-font-size} + + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } @else { + // Otherwise, just default to setting the font size found from the type + // style or the given fluid breakpoint in the type style + font-size: $min-font-size; + } +} + +// TODO move following variable and `custom-property` mixin into shared file for +// both `@carbon/type` and `@carbon/themes` + +/// @access private +/// @group @carbon/type +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/type +@mixin custom-properties($name, $value) { + @each $property, $value in $value { + #{$property}: var( + --#{$custom-property-prefix}-#{$name}-#{$property}, + #{$value} + ); + } +} + +/// Helper mixin to include the styles for a given token in any selector in your +/// project. Also includes an optional fluid option that will enable fluid +/// styles for the token if they are defined. Fluid styles will cause the +/// token's font-size to be computed based on the viewport size. As a result, use +/// with caution in fixed contexts. +/// @param {String} $name - The name of the token to get the styles for +/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use +/// @access public +/// @group @carbon/type +@mixin carbon--type-style( + $name, + $fluid: false, + $breakpoints: $carbon--grid-breakpoints +) { + @if not map-has-key($tokens, $name) { + @error 'Unable to find a token with the name: `#{$name}`'; + } + + $token: map-get($tokens, $name); + + // If $fluid is set to true and the token has breakpoints defined for fluid + // styles, delegate to the fluid-type helper for the given token + // Otherwise remove token breakpoints + @if $fluid == true and map-has-key($token, 'breakpoints') { + @include fluid-type($token, $breakpoints); + } @else { + @if global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-css-custom-properties') + { + @include custom-properties($name, map-remove($token, 'breakpoints')); + } @else { + // Otherwise, we just include all the property declarations directly on the + // selector + @include properties(map-remove($token, 'breakpoints')); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.scss new file mode 100644 index 000000000000..7e4df058e0ba --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/_styles.scss @@ -0,0 +1,924 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// stylelint-disable number-max-precision + +@import '../vendor/@carbon/layout/breakpoint'; +@import 'font-family'; +@import 'scale'; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$caption-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$caption-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$helper-text-01: ( + font-size: carbon--type-scale(1), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$helper-text-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-01: $body-short-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-01: $body-long-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-02: $body-short-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-02: $body-long-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-01: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-02: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-compact-01: $productive-heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +$heading-compact-02: $productive-heading-02 !default; + +// Question for designers: +// heading-02 currently maps to productive heading-02 +// what are the styles for heading-compact-02? + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-03: $productive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-04: $productive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-05: $productive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-06: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + // Extra digit needed for precision in Chrome + line-height: 1.199, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-06: $productive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-07: ( + font-size: carbon--type-scale(12), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-07: $productive-heading-07 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-01: $heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-02: $heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(5), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(6), + line-height: 1.33333, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-03: $expressive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(8), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-04: $expressive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + font-weight: carbon--font-weight('light'), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-05: $expressive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('semibold'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-06: $expressive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-paragraph-01: ( + font-size: carbon--type-scale(6), + font-weight: carbon--font-weight('light'), + line-height: 1.33333, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: carbon--type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +); + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-paragraph-01: $expressive-paragraph-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-01: ( + font-family: carbon--font-family('serif'), + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(5), + ), + lg: ( + font-size: carbon--type-scale(6), + line-height: 1.33333, + ), + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-01: $quotation-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-02: ( + font-family: carbon--font-family('serif'), + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-02: $quotation-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-01: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-01: $display-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-02: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.16, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-02: $display-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-03: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-03: $display-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-04: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-04: $display-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$tokens: ( + caption-01: $caption-01, + caption-02: $caption-02, + label-01: $label-01, + label-02: $label-02, + helper-text-01: $helper-text-01, + helper-text-02: $helper-text-02, + body-short-01: $body-short-01, + body-short-02: $body-short-02, + body-long-01: $body-long-01, + body-long-02: $body-long-02, + code-01: $code-01, + code-02: $code-02, + heading-01: $heading-01, + heading-02: $heading-02, + productive-heading-01: $productive-heading-01, + productive-heading-02: $productive-heading-02, + productive-heading-03: $productive-heading-03, + productive-heading-04: $productive-heading-04, + productive-heading-05: $productive-heading-05, + productive-heading-06: $productive-heading-06, + productive-heading-07: $productive-heading-07, + expressive-paragraph-01: $expressive-paragraph-01, + expressive-heading-01: $expressive-heading-01, + expressive-heading-02: $expressive-heading-02, + expressive-heading-03: $expressive-heading-03, + expressive-heading-04: $expressive-heading-04, + expressive-heading-05: $expressive-heading-05, + expressive-heading-06: $expressive-heading-06, + quotation-01: $quotation-01, + quotation-02: $quotation-02, + display-01: $display-01, + display-02: $display-02, + display-03: $display-03, + display-04: $display-04, + // V11 Tokens + legal-01: $legal-01, + legal-02: $legal-02, + body-compact-01: $body-compact-01, + body-compact-02: $body-compact-02, + heading-compact-01: $heading-compact-01, + heading-compact-02: $heading-compact-02, + body-01: $body-01, + body-02: $body-02, + heading-03: $heading-03, + heading-04: $heading-04, + heading-05: $heading-05, + heading-06: $heading-06, + heading-07: $heading-07, + fluid-heading-03: $fluid-heading-03, + fluid-heading-04: $fluid-heading-04, + fluid-heading-05: $fluid-heading-05, + fluid-heading-06: $fluid-heading-06, + fluid-paragraph-01: $fluid-paragraph-01, + fluid-quotation-01: $fluid-quotation-01, + fluid-quotation-02: $fluid-quotation-02, + fluid-display-01: $fluid-display-01, + fluid-display-02: $fluid-display-02, + fluid-display-03: $fluid-display-03, + fluid-display-04: $fluid-display-04, +); + +/// @param {Map} $map +/// @access public +/// @group @carbon/type +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +/// @param {Number} $value - Number with units +/// @return {Number} Without units +/// @access public +/// @group @carbon/type +@function strip-unit($value) { + @return $value / ($value * 0 + 1); +} + +/// This helper includes fluid type styles for the given token value. Fluid type +/// means that the `font-size` is computed using `calc()` in order to be +/// determined by the screen size instead of a breakpoint. As a result, fluid +/// styles should be used with caution in fixed width contexts. +/// +/// In addition, we make use of %-based line-heights so that the line-height of +/// each type style is computed correctly due to the dynamic nature of the +/// `font-size`. +/// +/// Most of the logic for this work comes from CSS Tricks: +/// https://css-tricks.com/snippets/css/fluid-typography/ +/// +/// @param {Map} $type-styles - The value of a given type token +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use +/// @access public +/// @group @carbon/type +@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) { + // Include the initial styles for the given token by default without any + // media query guard. This includes `font-size` as a fallback in the case + // that a browser does not support `calc()` + @include properties(map-remove($type-styles, breakpoints)); + // We also need to include the `sm` styles by default since they don't + // appear in the fluid styles for tokens + @include fluid-type-size($type-styles, sm, $breakpoints); + + // Finally, we need to go through all the breakpoints defined in the type + // token and apply the properties and fluid type size for that given + // breakpoint + @each $name, $values in map-get($type-styles, breakpoints) { + @include carbon--breakpoint($name) { + @include properties($values); + @include fluid-type-size($type-styles, $name, $breakpoints); + } + } +} + +/// Computes the fluid `font-size` for a given type style and breakpoint +/// @param {Map} $type-styles - The styles for a given token +/// @param {String} $name - The name of the breakpoint to which we apply the fluid +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system +/// @access public +/// @group @carbon/type +@mixin fluid-type-size( + $type-styles, + $name, + $breakpoints: $carbon--grid-breakpoints +) { + // Get the information about the breakpoint we're currently working in. Useful + // for getting initial width information + $breakpoint: map-get($breakpoints, $name); + + // Our fluid styles are captured under the 'breakpoints' property in our type + // styles map. These define what values to treat as `max-` variables below + $fluid-sizes: map-get($type-styles, breakpoints); + $fluid-breakpoint: (); + // Special case for `sm` because the styles for small are on the type style + // directly + @if $name == sm { + $fluid-breakpoint: map-remove($type-styles, breakpoints); + } @else { + $fluid-breakpoint: map-get($fluid-sizes, $name); + } + + // Initialize our font-sizes to the default size for the type style + $max-font-size: map-get($type-styles, font-size); + $min-font-size: map-get($type-styles, font-size); + @if map-has-key($fluid-breakpoint, font-size) { + $min-font-size: map-get($fluid-breakpoint, font-size); + } + + // Initialize our min and max width to the width of the current breakpoint + $max-vw: map-get($breakpoint, width); + $min-vw: map-get($breakpoint, width); + + // We can use `breakpoint-next` to see if there is another breakpoint we can + // use to update `max-font-size` and `max-vw` with larger values + $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints); + $next-fluid-breakpoint-name: null; + + // We need to figure out what the next available fluid breakpoint is for our + // given $type-styles. In this loop we try and iterate through breakpoints + // until we either manually set $next-breakpoint-available to null or + // `breakpoint-next` returns null. + @while $next-breakpoint-available { + @if map-has-key($fluid-sizes, $next-breakpoint-available) { + $next-fluid-breakpoint-name: $next-breakpoint-available; + $next-breakpoint-available: null; + } @else { + $next-breakpoint-available: carbon--breakpoint-next( + $next-breakpoint-available, + $breakpoints + ); + } + } + + // If we have found the next available fluid breakpoint name, then we know + // that we have values that we can use to set max-font-size and max-vw as both + // values derive from the next breakpoint + @if $next-fluid-breakpoint-name { + $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name); + $max-font-size: map-get( + map-get($fluid-sizes, $next-fluid-breakpoint-name), + font-size + ); + $max-vw: map-get($next-fluid-breakpoint, width); + + // prettier-ignore + font-size: calc(#{$min-font-size} + + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } @else { + // Otherwise, just default to setting the font size found from the type + // style or the given fluid breakpoint in the type style + font-size: $min-font-size; + } +} + +// TODO move following variable and `custom-property` mixin into shared file for +// both `@carbon/type` and `@carbon/themes` + +/// @access private +/// @group @carbon/type +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/type +@mixin custom-properties($name, $value) { + @each $property, $value in $value { + #{$property}: var( + --#{$custom-property-prefix}-#{$name}-#{$property}, + #{$value} + ); + } +} + +/// Helper mixin to include the styles for a given token in any selector in your +/// project. Also includes an optional fluid option that will enable fluid +/// styles for the token if they are defined. Fluid styles will cause the +/// token's font-size to be computed based on the viewport size. As a result, use +/// with caution in fixed contexts. +/// @param {String} $name - The name of the token to get the styles for +/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use +/// @access public +/// @group @carbon/type +@mixin carbon--type-style( + $name, + $fluid: false, + $breakpoints: $carbon--grid-breakpoints +) { + @if not map-has-key($tokens, $name) { + @error 'Unable to find a token with the name: `#{$name}`'; + } + + $token: map-get($tokens, $name); + + // If $fluid is set to true and the token has breakpoints defined for fluid + // styles, delegate to the fluid-type helper for the given token + // Otherwise remove token breakpoints + @if $fluid == true and map-has-key($token, 'breakpoints') { + @include fluid-type($token, $breakpoints); + } @else { + @if global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-css-custom-properties') + { + @include custom-properties($name, map-remove($token, 'breakpoints')); + } @else { + // Otherwise, we just include all the property declarations directly on the + // selector + @include properties(map-remove($token, 'breakpoints')); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_mono.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_mono.scss new file mode 100644 index 000000000000..9121aba9bc58 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_mono.scss @@ -0,0 +1,430 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Mono `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-mono { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans-condensed.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans-condensed.scss new file mode 100644 index 000000000000..7c5af23a96ed --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans-condensed.scss @@ -0,0 +1,302 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Sans `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-sans-condensed { + // .woff support for IE11 + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfppYA.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYasyKg.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvpYA.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6ovo.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHbat.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527Ivo.woff) + format('woff'); + } + + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYstEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYotEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYQtEzi6D10.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KPLgKkPHhKABg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KLLgKkPHhKABg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KzLgKkPHhI.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYstEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYotEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYQtEzi6D10.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvjpYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvipYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvspYYnFBq4.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYamyK7Bh4sNLhM.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYanyK7Bh4sNLhM.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYapyK7Bh4sN.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvjpYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvipYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvspYYnFBq4.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans.scss new file mode 100644 index 000000000000..037a18aef3dd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans.scss @@ -0,0 +1,497 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Sans `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-sans { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuFKZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIJsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_serif.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_serif.scss new file mode 100644 index 000000000000..d0d50e55bcd9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_serif.scss @@ -0,0 +1,430 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Serif `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-serif { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_settings.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_settings.scss new file mode 100644 index 000000000000..54affbc42c6f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_inlined/font-face/_settings.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Defines how font files are loaded and displayed by the browser +/// @link https://css-tricks.com/almanac/properties/f/font-display/ +/// @access public +/// @group @carbon/type +$carbon--font-display: auto !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss new file mode 100644 index 000000000000..09c7214038b8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_prefix.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type String +/// @access public +/// @group @carbon/type +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss new file mode 100644 index 000000000000..6f54b3713d49 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss @@ -0,0 +1,90 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import '../layout/convert'; +@import 'font-family'; +@import 'styles'; + +/// Include a type reset for a given body and mono font family +/// @param {String} $body-font-family [carbon--font-family('sans')] - The font family used on the `` element +/// @param {String} $mono-font-family [carbon--font-family('mono')] - The font family used on elements that require mono fonts, like the `` element +/// @access public +/// @group @carbon/type +@mixin carbon--type-reset( + // TODO: remove in next major release. This has been replaced with 100% + $base-font-size: $carbon--base-font-size, + $body-font-family: carbon--font-family('sans'), + $mono-font-family: carbon--font-family('mono') +) { + html { + font-size: 100%; + } + + body { + @include carbon--font-weight('regular'); + + font-family: $body-font-family; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + code { + font-family: $mono-font-family; + } + + strong { + @include carbon--font-weight('semibold'); + } +} + +/// Include default type styles +/// @access public +/// @group @carbon/type +@mixin carbon--default-type { + h1 { + @include carbon--type-style('productive-heading-06'); + } + + h2 { + @include carbon--type-style('productive-heading-05'); + } + + h3 { + @include carbon--type-style('productive-heading-04'); + } + + h4 { + @include carbon--type-style('productive-heading-03'); + } + + h5 { + @include carbon--type-style('productive-heading-02'); + } + + h6 { + @include carbon--type-style('productive-heading-01'); + } + + p { + @include carbon--type-style('body-long-02'); + } + + a { + @if global-variable-exists('carbon--theme') and + map-has-key($carbon--theme, 'link-01') + { + color: map-get($carbon--theme, 'link-01'); + } @else { + color: #0062fe; + } + } + + em { + font-style: italic; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss new file mode 100644 index 000000000000..5e3d885e710a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_scale.scss @@ -0,0 +1,59 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import '../layout/convert'; + +/// Compute the type size for the given type scale step +/// @param {Number} $step +/// @return {Number} In px +/// @access public +/// @group @carbon/type +@function carbon--get-type-size($step) { + @if $step == 1 { + @return 12px; + } + // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2 + @return carbon--get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2; +} + +/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px +/// @type Map +/// @access public +/// @group @carbon/type +$carbon--type-scale: (); +@for $i from 1 through 23 { + $carbon--type-scale: append( + $carbon--type-scale, + carbon--rem(carbon--get-type-size($i)) + ); +} + +/// Get the value of a specific step in the type scale +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/type +@function carbon--type-scale($step) { + @return nth($carbon--type-scale, $step); +} + +/// Set the font-size value of a selector with the value at the given `$step` +/// @param {Number} $step +/// @access public +/// @group @carbon/type +@mixin carbon--type-scale($step) { + font-size: carbon--type-scale($step); +} + +/// Alias of `type-scale` mixin. +/// @param {Number} $step +/// @alias carbon--type-scale +/// @access public +/// @group @carbon/type +@mixin carbon--font-size($step) { + font-size: carbon--type-scale($step); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.import.scss new file mode 100644 index 000000000000..1bca8ed630bd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.import.scss @@ -0,0 +1,766 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use "sass:meta"; +@use "sass:math"; +@import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// @type Map +/// @access public +/// @group @carbon/type +$caption-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$caption-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$helper-text-01: ( + font-size: carbon--type-scale(1), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$helper-text-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.43, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-01: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.34, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-02: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.43, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.29, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-01: $heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-02: $heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + // Extra digit needed for precision in Chrome + line-height: 1.199, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-07: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-01: map-merge( + $heading-01, + ( + line-height: 1.25, + ) +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-02: map-merge( + $heading-02, + ( + line-height: 1.5, + ) +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(5), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(6), + line-height: 1.334, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.29, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(8), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + font-weight: carbon--font-weight('light'), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('semibold'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-paragraph-01: ( + font-size: carbon--type-scale(6), + font-weight: carbon--font-weight('light'), + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: carbon--type-scale(7), + line-height: 1.29, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +); + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-01: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(5), + ), + lg: ( + font-size: carbon--type-scale(6), + line-height: 1.334, + ), + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.29, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-02: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-01: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-02: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.16, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-03: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-04: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$tokens: ( + caption-01: $caption-01, + caption-02: $caption-02, + label-01: $label-01, + label-02: $label-02, + helper-text-01: $helper-text-01, + helper-text-02: $helper-text-02, + body-short-01: $body-short-01, + body-short-02: $body-short-02, + body-long-01: $body-long-01, + body-long-02: $body-long-02, + code-01: $code-01, + code-02: $code-02, + heading-01: $heading-01, + heading-02: $heading-02, + productive-heading-01: $productive-heading-01, + productive-heading-02: $productive-heading-02, + productive-heading-03: $productive-heading-03, + productive-heading-04: $productive-heading-04, + productive-heading-05: $productive-heading-05, + productive-heading-06: $productive-heading-06, + productive-heading-07: $productive-heading-07, + expressive-paragraph-01: $expressive-paragraph-01, + expressive-heading-01: $expressive-heading-01, + expressive-heading-02: $expressive-heading-02, + expressive-heading-03: $expressive-heading-03, + expressive-heading-04: $expressive-heading-04, + expressive-heading-05: $expressive-heading-05, + expressive-heading-06: $expressive-heading-06, + quotation-01: $quotation-01, + quotation-02: $quotation-02, + display-01: $display-01, + display-02: $display-02, + display-03: $display-03, + display-04: $display-04, +); + +/// @param {Map} $map +/// @access public +/// @group @carbon/type +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +/// @param {Number} $value - Number with units +/// @return {Number} Without units +/// @access public +/// @group @carbon/type +@function strip-unit($value) { + @if meta.function-exists('div', 'math') { + @return math.div($value, $value * 0 + 1); + } @else { + @return $value / ($value * 0 + 1); + } +} + +/// This helper includes fluid type styles for the given token value. Fluid type +/// means that the `font-size` is computed using `calc()` in order to be +/// determined by the screen size instead of a breakpoint. As a result, fluid +/// styles should be used with caution in fixed width contexts. +/// +/// In addition, we make use of %-based line-heights so that the line-height of +/// each type style is computed correctly due to the dynamic nature of the +/// `font-size`. +/// +/// Most of the logic for this work comes from CSS Tricks: +/// https://css-tricks.com/snippets/css/fluid-typography/ +/// +/// @param {Map} $type-styles - The value of a given type token +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use +/// @access public +/// @group @carbon/type +@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) { + // Include the initial styles for the given token by default without any + // media query guard. This includes `font-size` as a fallback in the case + // that a browser does not support `calc()` + @include properties(map-remove($type-styles, breakpoints)); + // We also need to include the `sm` styles by default since they don't + // appear in the fluid styles for tokens + @include fluid-type-size($type-styles, sm, $breakpoints); + + // Finally, we need to go through all the breakpoints defined in the type + // token and apply the properties and fluid type size for that given + // breakpoint + @each $name, $values in map-get($type-styles, breakpoints) { + @include carbon--breakpoint($name) { + @include properties($values); + @include fluid-type-size($type-styles, $name, $breakpoints); + } + } +} + +/// Computes the fluid `font-size` for a given type style and breakpoint +/// @param {Map} $type-styles - The styles for a given token +/// @param {String} $name - The name of the breakpoint to which we apply the fluid +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system +/// @access public +/// @group @carbon/type +@mixin fluid-type-size( + $type-styles, + $name, + $breakpoints: $carbon--grid-breakpoints +) { + // Get the information about the breakpoint we're currently working in. Useful + // for getting initial width information + $breakpoint: map-get($breakpoints, $name); + + // Our fluid styles are captured under the 'breakpoints' property in our type + // styles map. These define what values to treat as `max-` variables below + $fluid-sizes: map-get($type-styles, breakpoints); + $fluid-breakpoint: (); + // Special case for `sm` because the styles for small are on the type style + // directly + @if $name == sm { + $fluid-breakpoint: map-remove($type-styles, breakpoints); + } @else { + $fluid-breakpoint: map-get($fluid-sizes, $name); + } + + // Initialize our font-sizes to the default size for the type style + $max-font-size: map-get($type-styles, font-size); + $min-font-size: map-get($type-styles, font-size); + @if map-has-key($fluid-breakpoint, font-size) { + $min-font-size: map-get($fluid-breakpoint, font-size); + } + + // Initialize our min and max width to the width of the current breakpoint + $max-vw: map-get($breakpoint, width); + $min-vw: map-get($breakpoint, width); + + // We can use `breakpoint-next` to see if there is another breakpoint we can + // use to update `max-font-size` and `max-vw` with larger values + $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints); + $next-fluid-breakpoint-name: null; + + // We need to figure out what the next available fluid breakpoint is for our + // given $type-styles. In this loop we try and iterate through breakpoints + // until we either manually set $next-breakpoint-available to null or + // `breakpoint-next` returns null. + @while $next-breakpoint-available { + @if map-has-key($fluid-sizes, $next-breakpoint-available) { + $next-fluid-breakpoint-name: $next-breakpoint-available; + $next-breakpoint-available: null; + } @else { + $next-breakpoint-available: carbon--breakpoint-next( + $next-breakpoint-available, + $breakpoints + ); + } + } + + // If we have found the next available fluid breakpoint name, then we know + // that we have values that we can use to set max-font-size and max-vw as both + // values derive from the next breakpoint + @if $next-fluid-breakpoint-name { + $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name); + $max-font-size: map-get( + map-get($fluid-sizes, $next-fluid-breakpoint-name), + font-size + ); + $max-vw: map-get($next-fluid-breakpoint, width); + + // prettier-ignore + font-size: calc(#{$min-font-size} + + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } @else { + // Otherwise, just default to setting the font size found from the type + // style or the given fluid breakpoint in the type style + font-size: $min-font-size; + } +} + +// TODO move following variable and `custom-property` mixin into shared file for +// both `@carbon/type` and `@carbon/themes` + +/// @access private +/// @group @carbon/type +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/type +@mixin custom-properties($name, $value) { + @each $property, $value in $value { + #{$property}: var( + --#{$custom-property-prefix}-#{$name}-#{$property}, + #{$value} + ); + } +} + +/// Helper mixin to include the styles for a given token in any selector in your +/// project. Also includes an optional fluid option that will enable fluid +/// styles for the token if they are defined. Fluid styles will cause the +/// token's font-size to be computed based on the viewport size. As a result, use +/// with caution in fixed contexts. +/// @param {String} $name - The name of the token to get the styles for +/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use +/// @access public +/// @group @carbon/type +@mixin carbon--type-style( + $name, + $fluid: false, + $breakpoints: $carbon--grid-breakpoints +) { + @if not map-has-key($tokens, $name) { + @error 'Unable to find a token with the name: `#{$name}`'; + } + + $token: map-get($tokens, $name); + + // If $fluid is set to true and the token has breakpoints defined for fluid + // styles, delegate to the fluid-type helper for the given token + // Otherwise remove token breakpoints + @if $fluid == true and map-has-key($token, 'breakpoints') { + @include fluid-type($token, $breakpoints); + } @else { + @if global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-css-custom-properties') + { + @include custom-properties($name, map-remove($token, 'breakpoints')); + } @else { + // Otherwise, we just include all the property declarations directly on the + // selector + @include properties(map-remove($token, 'breakpoints')); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss new file mode 100644 index 000000000000..2222c438932d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss @@ -0,0 +1,924 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// stylelint-disable number-max-precision + +@import '../layout/breakpoint'; +@import 'font-family'; +@import 'scale'; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$caption-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$caption-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-01: ( + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$helper-text-01: ( + font-size: carbon--type-scale(1), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$helper-text-02: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-01: $body-short-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-01: $body-long-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-02: $body-short-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('regular'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-02: $body-long-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-01: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(1), + font-weight: carbon--font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-02: ( + font-family: carbon--font-family('mono'), + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-01: ( + font-size: carbon--type-scale(2), + font-weight: carbon--font-weight('semibold'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-compact-01: $productive-heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-02: ( + font-size: carbon--type-scale(3), + font-weight: carbon--font-weight('semibold'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +$heading-compact-02: $productive-heading-02 !default; + +// Question for designers: +// heading-02 currently maps to productive heading-02 +// what are the styles for heading-compact-02? + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-03: $productive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-04: $productive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-05: $productive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-06: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + // Extra digit needed for precision in Chrome + line-height: 1.199, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-06: $productive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-07: ( + font-size: carbon--type-scale(12), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-07: $productive-heading-07 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-01: $heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-02: $heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-03: ( + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(5), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(6), + line-height: 1.33333, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-03: $expressive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-04: ( + font-size: carbon--type-scale(7), + font-weight: carbon--font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.25, + ), + max: ( + font-size: carbon--type-scale(8), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-04: $expressive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-05: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + font-weight: carbon--font-weight('light'), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-05: $expressive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-06: ( + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('semibold'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-06: $expressive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-paragraph-01: ( + font-size: carbon--type-scale(6), + font-weight: carbon--font-weight('light'), + line-height: 1.33333, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: carbon--type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +); + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-paragraph-01: $expressive-paragraph-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-01: ( + font-family: carbon--font-family('serif'), + font-size: carbon--type-scale(5), + font-weight: carbon--font-weight('regular'), + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(5), + ), + lg: ( + font-size: carbon--type-scale(6), + line-height: 1.33333, + ), + xlg: ( + font-size: carbon--type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: carbon--type-scale(8), + line-height: 1.25, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-01: $quotation-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-02: ( + font-family: carbon--font-family('serif'), + font-size: carbon--type-scale(8), + font-weight: carbon--font-weight('light'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: carbon--type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: carbon--type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-02: $quotation-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-01: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.17, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-01: $display-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-02: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(10), + ), + lg: ( + font-size: carbon--type-scale(12), + ), + xlg: ( + font-size: carbon--type-scale(13), + line-height: 1.16, + ), + max: ( + font-size: carbon--type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-02: $display-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-03: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-03: $display-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-04: ( + font-size: carbon--type-scale(10), + font-weight: carbon--font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: carbon--type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: carbon--type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: carbon--type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: carbon--type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-04: $display-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$tokens: ( + caption-01: $caption-01, + caption-02: $caption-02, + label-01: $label-01, + label-02: $label-02, + helper-text-01: $helper-text-01, + helper-text-02: $helper-text-02, + body-short-01: $body-short-01, + body-short-02: $body-short-02, + body-long-01: $body-long-01, + body-long-02: $body-long-02, + code-01: $code-01, + code-02: $code-02, + heading-01: $heading-01, + heading-02: $heading-02, + productive-heading-01: $productive-heading-01, + productive-heading-02: $productive-heading-02, + productive-heading-03: $productive-heading-03, + productive-heading-04: $productive-heading-04, + productive-heading-05: $productive-heading-05, + productive-heading-06: $productive-heading-06, + productive-heading-07: $productive-heading-07, + expressive-paragraph-01: $expressive-paragraph-01, + expressive-heading-01: $expressive-heading-01, + expressive-heading-02: $expressive-heading-02, + expressive-heading-03: $expressive-heading-03, + expressive-heading-04: $expressive-heading-04, + expressive-heading-05: $expressive-heading-05, + expressive-heading-06: $expressive-heading-06, + quotation-01: $quotation-01, + quotation-02: $quotation-02, + display-01: $display-01, + display-02: $display-02, + display-03: $display-03, + display-04: $display-04, + // V11 Tokens + legal-01: $legal-01, + legal-02: $legal-02, + body-compact-01: $body-compact-01, + body-compact-02: $body-compact-02, + heading-compact-01: $heading-compact-01, + heading-compact-02: $heading-compact-02, + body-01: $body-01, + body-02: $body-02, + heading-03: $heading-03, + heading-04: $heading-04, + heading-05: $heading-05, + heading-06: $heading-06, + heading-07: $heading-07, + fluid-heading-03: $fluid-heading-03, + fluid-heading-04: $fluid-heading-04, + fluid-heading-05: $fluid-heading-05, + fluid-heading-06: $fluid-heading-06, + fluid-paragraph-01: $fluid-paragraph-01, + fluid-quotation-01: $fluid-quotation-01, + fluid-quotation-02: $fluid-quotation-02, + fluid-display-01: $fluid-display-01, + fluid-display-02: $fluid-display-02, + fluid-display-03: $fluid-display-03, + fluid-display-04: $fluid-display-04, +); + +/// @param {Map} $map +/// @access public +/// @group @carbon/type +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +/// @param {Number} $value - Number with units +/// @return {Number} Without units +/// @access public +/// @group @carbon/type +@function strip-unit($value) { + @return $value / ($value * 0 + 1); +} + +/// This helper includes fluid type styles for the given token value. Fluid type +/// means that the `font-size` is computed using `calc()` in order to be +/// determined by the screen size instead of a breakpoint. As a result, fluid +/// styles should be used with caution in fixed width contexts. +/// +/// In addition, we make use of %-based line-heights so that the line-height of +/// each type style is computed correctly due to the dynamic nature of the +/// `font-size`. +/// +/// Most of the logic for this work comes from CSS Tricks: +/// https://css-tricks.com/snippets/css/fluid-typography/ +/// +/// @param {Map} $type-styles - The value of a given type token +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use +/// @access public +/// @group @carbon/type +@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) { + // Include the initial styles for the given token by default without any + // media query guard. This includes `font-size` as a fallback in the case + // that a browser does not support `calc()` + @include properties(map-remove($type-styles, breakpoints)); + // We also need to include the `sm` styles by default since they don't + // appear in the fluid styles for tokens + @include fluid-type-size($type-styles, sm, $breakpoints); + + // Finally, we need to go through all the breakpoints defined in the type + // token and apply the properties and fluid type size for that given + // breakpoint + @each $name, $values in map-get($type-styles, breakpoints) { + @include carbon--breakpoint($name) { + @include properties($values); + @include fluid-type-size($type-styles, $name, $breakpoints); + } + } +} + +/// Computes the fluid `font-size` for a given type style and breakpoint +/// @param {Map} $type-styles - The styles for a given token +/// @param {String} $name - The name of the breakpoint to which we apply the fluid +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system +/// @access public +/// @group @carbon/type +@mixin fluid-type-size( + $type-styles, + $name, + $breakpoints: $carbon--grid-breakpoints +) { + // Get the information about the breakpoint we're currently working in. Useful + // for getting initial width information + $breakpoint: map-get($breakpoints, $name); + + // Our fluid styles are captured under the 'breakpoints' property in our type + // styles map. These define what values to treat as `max-` variables below + $fluid-sizes: map-get($type-styles, breakpoints); + $fluid-breakpoint: (); + // Special case for `sm` because the styles for small are on the type style + // directly + @if $name == sm { + $fluid-breakpoint: map-remove($type-styles, breakpoints); + } @else { + $fluid-breakpoint: map-get($fluid-sizes, $name); + } + + // Initialize our font-sizes to the default size for the type style + $max-font-size: map-get($type-styles, font-size); + $min-font-size: map-get($type-styles, font-size); + @if map-has-key($fluid-breakpoint, font-size) { + $min-font-size: map-get($fluid-breakpoint, font-size); + } + + // Initialize our min and max width to the width of the current breakpoint + $max-vw: map-get($breakpoint, width); + $min-vw: map-get($breakpoint, width); + + // We can use `breakpoint-next` to see if there is another breakpoint we can + // use to update `max-font-size` and `max-vw` with larger values + $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints); + $next-fluid-breakpoint-name: null; + + // We need to figure out what the next available fluid breakpoint is for our + // given $type-styles. In this loop we try and iterate through breakpoints + // until we either manually set $next-breakpoint-available to null or + // `breakpoint-next` returns null. + @while $next-breakpoint-available { + @if map-has-key($fluid-sizes, $next-breakpoint-available) { + $next-fluid-breakpoint-name: $next-breakpoint-available; + $next-breakpoint-available: null; + } @else { + $next-breakpoint-available: carbon--breakpoint-next( + $next-breakpoint-available, + $breakpoints + ); + } + } + + // If we have found the next available fluid breakpoint name, then we know + // that we have values that we can use to set max-font-size and max-vw as both + // values derive from the next breakpoint + @if $next-fluid-breakpoint-name { + $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name); + $max-font-size: map-get( + map-get($fluid-sizes, $next-fluid-breakpoint-name), + font-size + ); + $max-vw: map-get($next-fluid-breakpoint, width); + + // prettier-ignore + font-size: calc(#{$min-font-size} + + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } @else { + // Otherwise, just default to setting the font size found from the type + // style or the given fluid breakpoint in the type style + font-size: $min-font-size; + } +} + +// TODO move following variable and `custom-property` mixin into shared file for +// both `@carbon/type` and `@carbon/themes` + +/// @access private +/// @group @carbon/type +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/type +@mixin custom-properties($name, $value) { + @each $property, $value in $value { + #{$property}: var( + --#{$custom-property-prefix}-#{$name}-#{$property}, + #{$value} + ); + } +} + +/// Helper mixin to include the styles for a given token in any selector in your +/// project. Also includes an optional fluid option that will enable fluid +/// styles for the token if they are defined. Fluid styles will cause the +/// token's font-size to be computed based on the viewport size. As a result, use +/// with caution in fixed contexts. +/// @param {String} $name - The name of the token to get the styles for +/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use +/// @access public +/// @group @carbon/type +@mixin carbon--type-style( + $name, + $fluid: false, + $breakpoints: $carbon--grid-breakpoints +) { + @if not map-has-key($tokens, $name) { + @error 'Unable to find a token with the name: `#{$name}`'; + } + + $token: map-get($tokens, $name); + + // If $fluid is set to true and the token has breakpoints defined for fluid + // styles, delegate to the fluid-type helper for the given token + // Otherwise remove token breakpoints + @if $fluid == true and map-has-key($token, 'breakpoints') { + @include fluid-type($token, $breakpoints); + } @else { + @if global-variable-exists('feature-flags') and + map-get($feature-flags, 'enable-css-custom-properties') + { + @include custom-properties($name, map-remove($token, 'breakpoints')); + } @else { + // Otherwise, we just include all the property declarations directly on the + // selector + @include properties(map-remove($token, 'breakpoints')); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss new file mode 100644 index 000000000000..9121aba9bc58 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_mono.scss @@ -0,0 +1,430 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Mono `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-mono { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Mono SemiBold Italic'), + local('IBMPlexMono-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Mono'), local('IBMPlexMono'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans-condensed.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans-condensed.scss new file mode 100644 index 000000000000..7c5af23a96ed --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans-condensed.scss @@ -0,0 +1,302 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Sans `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-sans-condensed { + // .woff support for IE11 + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfppYA.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYasyKg.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvpYA.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6ovo.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHbat.woff) + format('woff'); + } + @font-face { + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527Ivo.woff) + format('woff'); + } + + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYstEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYotEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light Italic'), + local('IBMPlexSansCond-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8AfplYQtEzi6D10.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KPLgKkPHhKABg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KLLgKkPHhKABg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Condensed Italic'), + local('IBMPlexSansCond-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8nN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas-KzLgKkPHhI.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYstEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYotEzi6D11GTg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold Italic'), + local('IBMPlexSansCond-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8iN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYas8HPvlYQtEzi6D10.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvjpYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvipYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Condensed Light'), local('IBMPlexSansCond-Light'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4C6rvspYYnFBq4.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYamyK7Bh4sNLhM.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYanyK7Bh4sNLhM.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans Condensed'), local('IBMPlexSansCond'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYapyK7Bh4sN.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* vietnamese */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvjpYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, + U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvipYYnFBq4P1w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: swap; + font-family: 'IBM Plex Sans Condensed'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans Condensed SemiBold'), + local('IBMPlexSansCond-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v6/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvspYYnFBq4.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss new file mode 100644 index 000000000000..037a18aef3dd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_sans.scss @@ -0,0 +1,497 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Sans `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-sans { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuFKZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Sans SemiBold Italic'), + local('IBMPlexSans-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIJsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0370-03FF; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss new file mode 100644 index 000000000000..d0d50e55bcd9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_serif.scss @@ -0,0 +1,430 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'settings'; + +/// Serif `@font-face`'s +/// @access public +/// @group @carbon/type +@mixin carbon--font-face-serif { + // .woff support for IE11 + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff) + format('woff'); + } + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff) + format('woff'); + } + + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 300; + src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 400; + src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: italic; + font-weight: 600; + src: local('IBM Plex Serif SemiBold Italic'), + local('IBMPlexSerif-SemiBoldItalic'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 300; + src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 400; + src: local('IBM Plex Serif'), local('IBMPlexSerif'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } + /* cyrillic-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; + } + /* cyrillic */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* vietnamese */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; + } + /* latin-ext */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2) + format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-display: $carbon--font-display; + font-family: 'IBM Plex Serif'; + font-style: normal; + font-weight: 600; + src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'), + url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2) + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_settings.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_settings.scss new file mode 100644 index 000000000000..54affbc42c6f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/font-face/_settings.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Defines how font files are loaded and displayed by the browser +/// @link https://css-tricks.com/almanac/properties/f/font-display/ +/// @access public +/// @group @carbon/type +$carbon--font-display: auto !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/index.scss new file mode 100644 index 000000000000..da1b298fbe96 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'reset'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_classes.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_classes.scss new file mode 100644 index 000000000000..56f15ba6de04 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_classes.scss @@ -0,0 +1,42 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use 'font-family' as *; +@use 'prefix' as *; +@use 'styles' as *; + +/// Create type classes for font families, weights, styles +/// @access public +/// @group @carbon/type +@mixin type-classes { + // Font families + @each $name, $value in $font-families { + .#{$prefix}--type-#{$name} { + font-family: $value; + } + } + + // Font weights + @each $name, $value in $font-weights { + .#{$prefix}--type-#{$name} { + font-weight: $value; + } + } + + // Font styles + .#{$prefix}--type-italic { + font-style: italic; + } + + // Type styles + @each $name, $value in $tokens { + .#{$prefix}--type-#{$name} { + @include type-style($name, map.has-key($value, breakpoints)); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_font-family.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_font-family.scss new file mode 100644 index 000000000000..828d31ba308e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_font-family.scss @@ -0,0 +1,102 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans +/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif +/// @type Map +/// @access public +/// @group @carbon/type +$font-families: ( + 'mono': + unquote( + "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace" + ), + 'sans': + unquote( + "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-condensed': + unquote( + "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-arabic': + unquote( + "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-devanagari': + unquote( + "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-hebrew': + unquote( + "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-jp': + unquote( + "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-kr': + unquote( + "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-thai-looped': + unquote( + "'IBM Plex Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'sans-thai': + unquote( + "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + ), + 'serif': + unquote( + "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif" + ), +) !default; + +/// Get the font-family for an IBM Plex font +/// @param {String} $name +/// @return {String} +/// @access public +/// @group @carbon/type +@function font-family($name) { + @return map-get($font-families, $name); +} + +/// Include the `font-family` definition for the given name in your selector +/// @param {String} $name +/// @access public +/// @group @carbon/type +@mixin font-family($name) { + font-family: font-family($name); +} + +/// Suggested font weights to be used in product +/// @type Map +/// @access public +/// @group @carbon/type +$font-weights: ( + 'light': 300, + 'regular': 400, + 'semibold': 600, +) !default; + +/// Retrieve the font-weight value for a given name +/// @param {String} $weight +/// @return {Number} +/// @access public +/// @group @carbon/type +@function font-weight($weight) { + @return map-get($font-weights, $weight); +} + +/// Set the `font-weight` property with the value for a given name +/// @param {String} $weight +/// @access public +/// @group @carbon/type +@mixin font-weight($weight) { + font-weight: font-weight($weight); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_prefix.scss new file mode 100644 index 000000000000..09c7214038b8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_prefix.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type String +/// @access public +/// @group @carbon/type +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_reset.scss new file mode 100644 index 000000000000..dc78ab870232 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_reset.scss @@ -0,0 +1,92 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use 'sass:meta'; +@use '@carbon/layout'; +@use 'font-family' as *; +@use 'styles' as *; + +/// Include a type reset for a given body and mono font family +/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `` element +/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `` element +/// @access public +/// @group @carbon/type +@mixin reset( + // TODO: remove in next major release. This has been replaced with 100% + $base-font-size: layout.$base-font-size, + $body-font-family: font-family('sans'), + $mono-font-family: font-family('mono') +) { + html { + font-size: 100%; + } + + body { + @include font-weight('regular'); + + font-family: $body-font-family; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + code { + font-family: $mono-font-family; + } + + strong { + @include font-weight('semibold'); + } +} + +/// Include default type styles +/// @access public +/// @group @carbon/type +@mixin default-type { + h1 { + @include type-style('productive-heading-06'); + } + + h2 { + @include type-style('productive-heading-05'); + } + + h3 { + @include type-style('productive-heading-04'); + } + + h4 { + @include type-style('productive-heading-03'); + } + + h5 { + @include type-style('productive-heading-02'); + } + + h6 { + @include type-style('productive-heading-01'); + } + + p { + @include type-style('body-long-02'); + } + + a { + @if meta.global-variable-exists('carbon--theme') and + map.has-key($carbon--theme, 'link-01') + { + color: map.get($carbon--theme, 'link-01'); + } @else { + color: #0062fe; + } + } + + em { + font-style: italic; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_scale.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_scale.scss new file mode 100644 index 000000000000..999a08d7bf8c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_scale.scss @@ -0,0 +1,56 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '@carbon/layout'; + +/// Compute the type size for the given type scale step +/// @param {Number} $step +/// @return {Number} In px +/// @access public +/// @group @carbon/type +@function get-type-size($step) { + @if $step == 1 { + @return 12px; + } + // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2 + @return get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2; +} + +/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px +/// @type Map +/// @access public +/// @group @carbon/type +$type-scale: (); +@for $i from 1 through 23 { + $type-scale: append($type-scale, layout.rem(get-type-size($i))); +} + +/// Get the value of a specific step in the type scale +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/type +@function type-scale($step) { + @return nth($type-scale, $step); +} + +/// Set the font-size value of a selector with the value at the given `$step` +/// @param {Number} $step +/// @access public +/// @group @carbon/type +@mixin type-scale($step) { + font-size: type-scale($step); +} + +/// Alias of `type-scale` mixin. +/// @param {Number} $step +/// @alias type-scale +/// @access public +/// @group @carbon/type +@mixin font-size($step) { + font-size: type-scale($step); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_styles.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_styles.scss new file mode 100644 index 000000000000..874e6d61d612 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/modules/_styles.scss @@ -0,0 +1,875 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// stylelint-disable number-max-precision + +@use 'sass:map'; +@use 'sass:math'; +@use '@carbon/layout'; +@use 'font-family'; +@use 'scale'; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$caption-01: ( + font-size: scale.type-scale(1), + font-weight: font-family.font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$label-01: ( + font-size: scale.type-scale(1), + font-weight: font-family.font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-01: ( + font-size: scale.type-scale(1), + font-weight: font-family.font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$legal-02: ( + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @deprecated +/// @group @carbon/type +$helper-text-01: ( + font-size: scale.type-scale(1), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-01: ( + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-01: $body-short-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-01: ( + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-01: $body-long-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-short-02: ( + font-size: scale.type-scale(3), + font-weight: font-family.font-weight('regular'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-compact-02: $body-short-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-long-02: ( + font-size: scale.type-scale(3), + font-weight: font-family.font-weight('regular'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$body-02: $body-long-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-01: ( + font-family: font-family.font-family('mono'), + font-size: scale.type-scale(1), + font-weight: font-family.font-weight('regular'), + line-height: 1.33333, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$code-02: ( + font-family: font-family.font-family('mono'), + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('regular'), + line-height: 1.42857, + letter-spacing: 0.32px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-01: ( + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('semibold'), + line-height: 1.42857, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-01: ( + font-size: scale.type-scale(2), + font-weight: font-family.font-weight('semibold'), + line-height: 1.28572, + letter-spacing: 0.16px, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-compact-01: $productive-heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-02: ( + font-size: scale.type-scale(3), + font-weight: font-family.font-weight('semibold'), + line-height: 1.5, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-02: ( + font-size: scale.type-scale(3), + font-weight: font-family.font-weight('semibold'), + line-height: 1.375, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-compact-02: $productive-heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-03: ( + font-size: scale.type-scale(5), + font-weight: font-family.font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-03: $productive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-04: ( + font-size: scale.type-scale(7), + font-weight: font-family.font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-04: $productive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-05: ( + font-size: scale.type-scale(8), + font-weight: font-family.font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-05: $productive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-06: ( + font-size: scale.type-scale(8), + font-weight: font-family.font-weight('light'), + // Extra digit needed for precision in Chrome + line-height: 1.199, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-06: $productive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$productive-heading-07: ( + font-size: scale.type-scale(10), + font-weight: font-family.font-weight('light'), + line-height: 1.19, + letter-spacing: 0, +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$heading-07: $productive-heading-07 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-01: $heading-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-02: $heading-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-03: ( + font-size: scale.type-scale(5), + font-weight: font-family.font-weight('regular'), + line-height: 1.4, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: scale.type-scale(5), + line-height: 1.25, + ), + max: ( + font-size: scale.type-scale(6), + line-height: 1.334, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-03: $expressive-heading-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-04: ( + font-size: scale.type-scale(7), + font-weight: font-family.font-weight('regular'), + line-height: 1.28572, + letter-spacing: 0, + breakpoints: ( + xlg: ( + font-size: scale.type-scale(7), + line-height: 1.25, + ), + max: ( + font-size: scale.type-scale(8), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-04: $expressive-heading-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-05: ( + font-size: scale.type-scale(8), + font-weight: font-family.font-weight('regular'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(9), + font-weight: font-family.font-weight('light'), + line-height: 1.22, + ), + lg: ( + font-size: scale.type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: scale.type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: scale.type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-05: $expressive-heading-05 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-heading-06: ( + font-size: scale.type-scale(8), + font-weight: font-family.font-weight('semibold'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: scale.type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: scale.type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: scale.type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-heading-06: $expressive-heading-06 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$expressive-paragraph-01: ( + font-size: scale.type-scale(6), + font-weight: font-family.font-weight('light'), + line-height: 1.334, + letter-spacing: 0, + breakpoints: ( + lg: ( + font-size: scale.type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: scale.type-scale(8), + line-height: 1.25, + ), + ), +); + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-paragraph-01: $expressive-paragraph-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-01: ( + font-family: font-family.font-family('serif'), + font-size: scale.type-scale(5), + font-weight: font-family.font-weight('regular'), + line-height: 1.3, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(5), + ), + lg: ( + font-size: scale.type-scale(6), + line-height: 1.334, + ), + xlg: ( + font-size: scale.type-scale(7), + line-height: 1.28572, + ), + max: ( + font-size: scale.type-scale(8), + line-height: 1.25, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-01: $quotation-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$quotation-02: ( + font-family: font-family.font-family('serif'), + font-size: scale.type-scale(8), + font-weight: font-family.font-weight('light'), + line-height: 1.25, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(9), + line-height: 1.22, + ), + lg: ( + font-size: scale.type-scale(10), + line-height: 1.19, + ), + xlg: ( + font-size: scale.type-scale(11), + line-height: 1.17, + ), + max: ( + font-size: scale.type-scale(13), + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-quotation-02: $quotation-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-01: ( + font-size: scale.type-scale(10), + font-weight: font-family.font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(10), + ), + lg: ( + font-size: scale.type-scale(12), + ), + xlg: ( + font-size: scale.type-scale(13), + line-height: 1.17, + ), + max: ( + font-size: scale.type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-01: $display-01 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-02: ( + font-size: scale.type-scale(10), + font-weight: font-family.font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(10), + ), + lg: ( + font-size: scale.type-scale(12), + ), + xlg: ( + font-size: scale.type-scale(13), + line-height: 1.16, + ), + max: ( + font-size: scale.type-scale(15), + line-height: 1.13, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-02: $display-02 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-03: ( + font-size: scale.type-scale(10), + font-weight: font-family.font-weight('light'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: scale.type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: scale.type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: scale.type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-03: $display-03 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$display-04: ( + font-size: scale.type-scale(10), + font-weight: font-family.font-weight('semibold'), + line-height: 1.19, + letter-spacing: 0, + breakpoints: ( + md: ( + font-size: scale.type-scale(14), + line-height: 1.15, + ), + lg: ( + font-size: scale.type-scale(17), + line-height: 1.11, + letter-spacing: -0.64px, + ), + xlg: ( + font-size: scale.type-scale(20), + line-height: 1.07, + letter-spacing: -0.64px, + ), + max: ( + font-size: scale.type-scale(23), + line-height: 1.05, + letter-spacing: -0.96px, + ), + ), +) !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$fluid-display-04: $display-04 !default; + +/// @type Map +/// @access public +/// @group @carbon/type +$tokens: ( + caption-01: $caption-01, + label-01: $label-01, + helper-text-01: $helper-text-01, + body-short-01: $body-short-01, + body-short-02: $body-short-02, + body-long-01: $body-long-01, + body-long-02: $body-long-02, + code-01: $code-01, + code-02: $code-02, + heading-01: $heading-01, + heading-02: $heading-02, + productive-heading-01: $productive-heading-01, + productive-heading-02: $productive-heading-02, + productive-heading-03: $productive-heading-03, + productive-heading-04: $productive-heading-04, + productive-heading-05: $productive-heading-05, + productive-heading-06: $productive-heading-06, + productive-heading-07: $productive-heading-07, + expressive-paragraph-01: $expressive-paragraph-01, + expressive-heading-01: $expressive-heading-01, + expressive-heading-02: $expressive-heading-02, + expressive-heading-03: $expressive-heading-03, + expressive-heading-04: $expressive-heading-04, + expressive-heading-05: $expressive-heading-05, + expressive-heading-06: $expressive-heading-06, + quotation-01: $quotation-01, + quotation-02: $quotation-02, + display-01: $display-01, + display-02: $display-02, + display-03: $display-03, + display-04: $display-04, + // V11 Tokens + legal-01: $legal-01, + legal-02: $legal-02, + body-compact-01: $body-compact-01, + body-compact-02: $body-compact-02, + heading-compact-01: $heading-compact-01, + heading-compact-02: $heading-compact-02, + body-01: $body-01, + body-02: $body-02, + heading-03: $heading-03, + heading-04: $heading-04, + heading-05: $heading-05, + heading-06: $heading-06, + heading-07: $heading-07, + fluid-heading-03: $fluid-heading-03, + fluid-heading-04: $fluid-heading-04, + fluid-heading-05: $fluid-heading-05, + fluid-heading-06: $fluid-heading-06, + fluid-paragraph-01: $fluid-paragraph-01, + fluid-quotation-01: $fluid-quotation-01, + fluid-quotation-02: $fluid-quotation-02, + fluid-display-01: $fluid-display-01, + fluid-display-02: $fluid-display-02, + fluid-display-03: $fluid-display-03, + fluid-display-04: $fluid-display-04, +); + +/// @param {Map} $map +/// @access public +/// @group @carbon/type +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +/// @param {Number} $value - Number with units +/// @return {Number} Without units +/// @access public +/// @group @carbon/type +@function strip-unit($value) { + @return math.div($value, $value * 0 + 1); +} + +/// This helper includes fluid type styles for the given token value. Fluid type +/// means that the `font-size` is computed using `calc()` in order to be +/// determined by the screen size instead of a breakpoint. As a result, fluid +/// styles should be used with caution in fixed width contexts. +/// +/// In addition, we make use of %-based line-heights so that the line-height of +/// each type style is computed correctly due to the dynamic nature of the +/// `font-size`. +/// +/// Most of the logic for this work comes from CSS Tricks: +/// https://css-tricks.com/snippets/css/fluid-typography/ +/// +/// @param {Map} $type-styles - The value of a given type token +/// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use +/// @access public +/// @group @carbon/type +@mixin fluid-type($type-styles, $breakpoints: layout.$grid-breakpoints) { + // Include the initial styles for the given token by default without any + // media query guard. This includes `font-size` as a fallback in the case + // that a browser does not support `calc()` + @include properties(map.remove($type-styles, breakpoints)); + // We also need to include the `sm` styles by default since they don't + // appear in the fluid styles for tokens + @include fluid-type-size($type-styles, sm, $breakpoints); + + // Finally, we need to go through all the breakpoints defined in the type + // token and apply the properties and fluid type size for that given + // breakpoint + @each $name, $values in map.get($type-styles, breakpoints) { + @include layout.breakpoint($name) { + @include properties($values); + @include fluid-type-size($type-styles, $name, $breakpoints); + } + } +} + +/// Computes the fluid `font-size` for a given type style and breakpoint +/// @param {Map} $type-styles - The styles for a given token +/// @param {String} $name - The name of the breakpoint to which we apply the fluid +/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints for the grid system +/// @access public +/// @group @carbon/type +@mixin fluid-type-size( + $type-styles, + $name, + $breakpoints: layout.$grid-breakpoints +) { + // Get the information about the breakpoint we're currently working in. Useful + // for getting initial width information + $breakpoint: map.get($breakpoints, $name); + + // Our fluid styles are captured under the 'breakpoints' property in our type + // styles map. These define what values to treat as `max-` variables below + $fluid-sizes: map.get($type-styles, breakpoints); + $fluid-breakpoint: (); + // Special case for `sm` because the styles for small are on the type style + // directly + @if $name == sm { + $fluid-breakpoint: map.remove($type-styles, breakpoints); + } @else { + $fluid-breakpoint: map.get($fluid-sizes, $name); + } + + // Initialize our font-sizes to the default size for the type style + $max-font-size: map.get($type-styles, font-size); + $min-font-size: map.get($type-styles, font-size); + @if map.has-key($fluid-breakpoint, font-size) { + $min-font-size: map.get($fluid-breakpoint, font-size); + } + + // Initialize our min and max width to the width of the current breakpoint + $max-vw: map.get($breakpoint, width); + $min-vw: map.get($breakpoint, width); + + // We can use `breakpoint-next` to see if there is another breakpoint we can + // use to update `max-font-size` and `max-vw` with larger values + $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints); + $next-fluid-breakpoint-name: null; + + // We need to figure out what the next available fluid breakpoint is for our + // given $type-styles. In this loop we try and iterate through breakpoints + // until we either manually set $next-breakpoint-available to null or + // `breakpoint-next` returns null. + @while $next-breakpoint-available { + @if map.has-key($fluid-sizes, $next-breakpoint-available) { + $next-fluid-breakpoint-name: $next-breakpoint-available; + $next-breakpoint-available: null; + } @else { + $next-breakpoint-available: layout.breakpoint-next( + $next-breakpoint-available, + $breakpoints + ); + } + } + + // If we have found the next available fluid breakpoint name, then we know + // that we have values that we can use to set max-font-size and max-vw as both + // values derive from the next breakpoint + @if $next-fluid-breakpoint-name { + $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name); + $max-font-size: map.get( + map.get($fluid-sizes, $next-fluid-breakpoint-name), + font-size + ); + $max-vw: map.get($next-fluid-breakpoint, width); + + // prettier-ignore + font-size: calc(#{$min-font-size} + + #{strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) + ); + } @else { + // Otherwise, just default to setting the font size found from the type + // style or the given fluid breakpoint in the type style + font-size: $min-font-size; + } +} + +// TODO move following variable and `custom-property` mixin into shared file for +// both `@carbon/type` and `@carbon/themes` + +/// @access private +/// @group @carbon/type +$custom-property-prefix: 'cds' !default; + +/// @access private +/// @group @carbon/type +@mixin custom-properties($name, $value) { + @each $property, $value in $value { + #{$property}: var( + --#{$custom-property-prefix}-#{$name}-#{$property}, + #{$value} + ); + } +} + +/// Helper mixin to include the styles for a given token in any selector in your +/// project. Also includes an optional fluid option that will enable fluid +/// styles for the token if they are defined. Fluid styles will cause the +/// token's font-size to be computed based on the viewport size. As a result, use +/// with caution in fixed contexts. +/// @param {String} $name - The name of the token to get the styles for +/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the +/// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use +/// @access public +/// @group @carbon/type +@mixin type-style( + $name, + $fluid: false, + $breakpoints: layout.$grid-breakpoints +) { + @if not map.has-key($tokens, $name) { + @error 'Unable to find a token with the name: `#{$name}`'; + } + + $token: map.get($tokens, $name); + + // If $fluid is set to true and the token has breakpoints defined for fluid + // styles, delegate to the fluid-type helper for the given token + @if $fluid == true and map.has-key($token, 'breakpoints') { + @include fluid-type($token, $breakpoints); + } @else { + @if global-variable-exists('feature-flags') and + map.get($feature-flags, 'enable-css-custom-properties') + { + @include custom-properties($name, $token); + } @else { + // Otherwise, we just include all the property declarations directly on the + // selector + @include properties(map.remove($token, 'breakpoints')); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/type.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/type.scss new file mode 100644 index 000000000000..a2dfdc8bf1b6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/type.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './_inlined/reset'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/import-once.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/import-once.scss new file mode 100644 index 000000000000..f7fbca1d0adc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/import-once.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Used by `exports` mixin to track which modules have been imported +/// @type Map +/// @access public +/// @group @carbon/import-once +$imported-modules: () !default; + +/// Module export mixin that helps making sure a module is imported once and only once +/// @access public +/// @param {String} $name - Name of exported module +/// @param {Bool} $warn [false] - Warn when a module has been already imported +/// @content Declaration blocks to be imported +/// @group @carbon/import-once +@mixin exports($name, $warn: false) { + @if (index($imported-modules, $name) == null) { + $imported-modules: append($imported-modules, $name) !global; + @content; + } @else if $warn == true { + @warn 'Module `#{$name}` has already been imported.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/index.scss new file mode 100644 index 000000000000..182f0ad45699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/import-once/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'import-once'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_breakpoint.scss new file mode 100644 index 000000000000..6312bbf7d572 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_breakpoint.scss @@ -0,0 +1,246 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@import 'convert'; +@import 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter: carbon--rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter--condensed: carbon--rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: carbon--rem(320px), + ), + md: ( + columns: 8, + margin: carbon--rem(16px), + width: carbon--rem(672px), + ), + lg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1056px), + ), + xlg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1312px), + ), + max: ( + columns: 16, + margin: carbon--rem(24px), + width: carbon--rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-next( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n < length($breakpoint-names) { + @return nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-prev( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function carbon--is-smallest-breakpoint( + $name, + $breakpoints: $carbon--grid-breakpoints +) { + @return index(map-keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--largest-breakpoint-name( + $breakpoints: $carbon--grid-breakpoints +) { + $total-breakpoints: length($breakpoints); + @return carbon--key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width); + @if carbon--is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-between( + $lower, + $upper, + $breakpoints: $carbon--grid-breakpoints +) { + $is-number-lower: type-of($lower) == 'number'; + $is-number-upper: type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if( + not $is-number-lower and $min, + map-get($min, width) + 0.02, + $min + ); + $max-width: if( + not $is-number-upper and $max, + map-get($max, width) - 0.02, + $max + ); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include carbon--breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include carbon--breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint(carbon--largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.import.scss new file mode 100644 index 000000000000..f8cab364b5f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.import.scss @@ -0,0 +1,65 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.scss new file mode 100644 index 000000000000..1082749a63e1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_convert.scss @@ -0,0 +1,54 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1rem; +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1em; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.import.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.import.scss new file mode 100644 index 000000000000..15e9f7090f33 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.import.scss @@ -0,0 +1,117 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use "sass:math"; +@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.scss new file mode 100644 index 000000000000..a8113d75f885 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_key-height.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@import 'breakpoint'; +@import 'utilities'; + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @return ($width - (2 * $margin)) / $columns; + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_mini-unit.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_mini-unit.scss new file mode 100644 index 000000000000..c79b6ed564c2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_mini-unit.scss @@ -0,0 +1,23 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; + +/// Default mini-unit value +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--mini-unit-size: 8px !default; + +/// Get the value of the corresponding number of units +/// @param {Number} $count - The number of units to get the value for +/// @return {Number} In rem units +/// @access public +/// @group @carbon/layout +@function carbon--mini-units($count) { + @return carbon--rem($carbon--mini-unit-size * $count); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_spacing.scss new file mode 100644 index 000000000000..ae11fb9e45b9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_spacing.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/spacing'; +@import './generated/layout'; +@import './generated/fluid-spacing'; +@import './generated/container'; +@import './generated/icon-size'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_utilities.scss new file mode 100644 index 000000000000..af8e1e0eb4e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function carbon--key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_container.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_container.scss new file mode 100644 index 000000000000..c7ec355b9503 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_container.scss @@ -0,0 +1,73 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-01: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-02: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-03: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-05: 4rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--container: ( + $carbon--container-01, + $carbon--container-02, + $carbon--container-03, + $carbon--container-04, + $carbon--container-05 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-01 +$container-01: $carbon--container-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-02 +$container-02: $carbon--container-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-03 +$container-03: $carbon--container-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-04 +$container-04: $carbon--container-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-05 +$container-05: $carbon--container-05 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2532fa617901 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_fluid-spacing.scss @@ -0,0 +1,61 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-04: 10vw !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-01 +$fluid-spacing-01: $carbon--fluid-spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-02 +$fluid-spacing-02: $carbon--fluid-spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-03 +$fluid-spacing-03: $carbon--fluid-spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-04 +$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_icon-size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_icon-size.scss new file mode 100644 index 000000000000..a3537a118520 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_icon-size.scss @@ -0,0 +1,34 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-02: 1.25rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-01 +$icon-size-01: $carbon--icon-size-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-02 +$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_layout.scss new file mode 100644 index 000000000000..cbdc2c1af6a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_layout.scss @@ -0,0 +1,97 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-02: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-03: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-05: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-06: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-07: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-01 +$layout-01: $carbon--layout-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-02 +$layout-02: $carbon--layout-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-03 +$layout-03: $carbon--layout-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-04 +$layout-04: $carbon--layout-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-05 +$layout-05: $carbon--layout-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-06 +$layout-06: $carbon--layout-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-07 +$layout-07: $carbon--layout-07 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_size.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_size.scss new file mode 100644 index 000000000000..220cefc4baa1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_size.scss @@ -0,0 +1,17 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$size-xs: 1.5rem; +$size-sm: 2rem; +$size-md: 2.5rem; +$size-lg: 3rem; +$size-xl: 4rem; +$size-2xl: 5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_spacing.scss new file mode 100644 index 000000000000..67fc46d90cc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/generated/_spacing.scss @@ -0,0 +1,169 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-13: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09, + $carbon--spacing-10, + $carbon--spacing-11, + $carbon--spacing-12, + $carbon--spacing-13 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-01 +$spacing-01: $carbon--spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-02 +$spacing-02: $carbon--spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-03 +$spacing-03: $carbon--spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-04 +$spacing-04: $carbon--spacing-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-05 +$spacing-05: $carbon--spacing-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-06 +$spacing-06: $carbon--spacing-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-07 +$spacing-07: $carbon--spacing-07 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-08 +$spacing-08: $carbon--spacing-08 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-09 +$spacing-09: $carbon--spacing-09 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-10 +$spacing-10: $carbon--spacing-10 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-11 +$spacing-11: $carbon--spacing-11 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-12 +$spacing-12: $carbon--spacing-12 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-13 +$spacing-13: $carbon--spacing-13 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/index.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/index.scss new file mode 100644 index 000000000000..7c7fe0aca3be --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'layout'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/layout.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/layout.scss new file mode 100644 index 000000000000..acc1f1e8f702 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/layout.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; +@import 'breakpoint'; +@import 'mini-unit'; +@import 'spacing'; +@import 'key-height'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_breakpoint.scss new file mode 100644 index 000000000000..e10967e39c7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_breakpoint.scss @@ -0,0 +1,232 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'convert'; +@use 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_convert.scss new file mode 100644 index 000000000000..3b28c4f09127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_convert.scss @@ -0,0 +1,51 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_spacing.scss new file mode 100644 index 000000000000..42e124108c91 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_spacing.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './generated/fluid-spacing'; +@forward './generated/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_utilities.scss new file mode 100644 index 000000000000..26a423de7b48 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2529ccd2dd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss @@ -0,0 +1,37 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-04: 10vw !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$fluid-spacing: ( + fluid-spacing-01: $fluid-spacing-01, + fluid-spacing-02: $fluid-spacing-02, + fluid-spacing-03: $fluid-spacing-03, + fluid-spacing-04: $fluid-spacing-04, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss new file mode 100644 index 000000000000..42f8fb4df1ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss @@ -0,0 +1,91 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-13: 10rem !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$spacing: ( + spacing-01: $spacing-01, + spacing-02: $spacing-02, + spacing-03: $spacing-03, + spacing-04: $spacing-04, + spacing-05: $spacing-05, + spacing-06: $spacing-06, + spacing-07: $spacing-07, + spacing-08: $spacing-08, + spacing-09: $spacing-09, + spacing-10: $spacing-10, + spacing-11: $spacing-11, + spacing-12: $spacing-12, + spacing-13: $spacing-13, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/12.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/12.scss new file mode 100644 index 000000000000..9cc166539729 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/12.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16 +/// @type Map +/// @access public +/// @group @carbon/grid +$carbon--12-column-grid: map-merge( + $carbon--grid-breakpoints, + ( + lg: + map-merge( + map-get($carbon--grid-breakpoints, lg), + ( + columns: 12, + ) + ), + xlg: + map-merge( + map-get($carbon--grid-breakpoints, xlg), + ( + columns: 12, + ) + ), + max: + map-merge( + map-get($carbon--grid-breakpoints, max), + ( + columns: 12, + ) + ), + ) +); + +@include carbon--grid($breakpoints: $carbon--12-column-grid); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/12.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/12.scss new file mode 100644 index 000000000000..9cc166539729 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/12.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16 +/// @type Map +/// @access public +/// @group @carbon/grid +$carbon--12-column-grid: map-merge( + $carbon--grid-breakpoints, + ( + lg: + map-merge( + map-get($carbon--grid-breakpoints, lg), + ( + columns: 12, + ) + ), + xlg: + map-merge( + map-get($carbon--grid-breakpoints, xlg), + ( + columns: 12, + ) + ), + max: + map-merge( + map-get($carbon--grid-breakpoints, max), + ( + columns: 12, + ) + ), + ) +); + +@include carbon--grid($breakpoints: $carbon--12-column-grid); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.import.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.import.scss new file mode 100644 index 000000000000..1cfa18aaff9c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.import.scss @@ -0,0 +1,431 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@use 'sass:meta'; +@use 'sass:math'; +@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: $condensed-gutter * 0.5; + padding-left: $condensed-gutter * 0.5; + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: $gutter * 0.5; + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--end { + padding-right: $gutter * 0.5; + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--right { + padding-right: $gutter * 0.5; + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.scss new file mode 100644 index 000000000000..c468ff6e7bb1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_mixins.scss @@ -0,0 +1,415 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@import '../vendor/@carbon/layout/breakpoint'; +@import 'prefix'; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter / 2); + padding-left: ($condensed-gutter / 2); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter / 2); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($span / $columns); + flex: 0 0 percentage($span / $columns); + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: $span / $columns; + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter / 2; + margin-left: -1 * $gutter / 2; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter / 2); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter / 2); + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + padding-top: percentage($height / $width); + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter / 2; + padding-bottom: $grid-gutter / 2; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter / 2; + padding-bottom: $condensed-gutter / 2; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_prefix.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_inlined/_prefix.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.import.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.import.scss new file mode 100644 index 000000000000..e799c31da54f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.import.scss @@ -0,0 +1,431 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@use 'sass:meta'; +@use 'sass:math'; +@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: $condensed-gutter * 0.5; + padding-left: $condensed-gutter * 0.5; + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: $gutter * 0.5; + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--end { + padding-right: $gutter * 0.5; + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: $gutter * 0.5; + } + + .#{$prefix}--hang--right { + padding-right: $gutter * 0.5; + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter * 0.5) + $margin}; + padding-left: #{($carbon--grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss new file mode 100644 index 000000000000..a660109a4183 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_mixins.scss @@ -0,0 +1,415 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +// Helpers for defining columns, rows, and containers are heavily inspired by, +// and often derived from, bootstrap: +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss + +@import '@carbon/layout/scss/breakpoint'; +@import 'prefix'; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-ready( + $gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter / 2); + padding-left: ($condensed-gutter / 2); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter / 2); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($span / $columns); + flex: 0 0 percentage($span / $columns); + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin carbon--make-col-offset($span, $columns) { + $offset: $span / $columns; + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-grid-columns( + $breakpoints: $carbon--grid-breakpoints, + $gutter: $carbon--grid-gutter +) { + .#{$prefix}--col { + @include carbon--make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: carbon--breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include carbon--make-col-ready($gutter); + } + + @include carbon--breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include carbon--make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include carbon--make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--make-row($gutter: $carbon--grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter / 2; + margin-left: -1 * $gutter / 2; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin carbon--no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin carbon--hang($gutter: $carbon--grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter / 2); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter / 2); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter / 2); + } +} + +// ----------------------------------------------------------------------------- +// Aspect ratio +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + padding-top: percentage($height / $width); + } + } + + // leaving here for legacy support + .#{$prefix}--aspect-ratio--object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `make-container-max-widths` +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include carbon--set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } @else { + @include carbon--breakpoint($name) { + padding-right: #{($carbon--grid-gutter / 2) + $margin}; + padding-left: #{($carbon--grid-gutter / 2) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin carbon--make-container-max-widths( + $breakpoints: $carbon--grid-breakpoints +) { + @each $name, $value in $breakpoints { + @include carbon--breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin carbon--grid( + $breakpoints: $carbon--grid-breakpoints, + $grid-gutter: $carbon--grid-gutter, + $condensed-gutter: $carbon--grid-gutter--condensed +) { + .#{$prefix}--grid { + @include carbon--make-container($breakpoints); + } + + @include carbon--largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include carbon--make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter / 2; + padding-bottom: $grid-gutter / 2; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter / 2; + padding-bottom: $condensed-gutter / 2; + } + + @include carbon--make-grid-columns($breakpoints, $grid-gutter); + @include carbon--no-gutter(); + @include carbon--hang($grid-gutter); + @include carbon--aspect-ratio(); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_prefix.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_prefix.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/_prefix.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/grid.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/grid.scss new file mode 100644 index 000000000000..d3c2e6f4b9d4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/grid.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './_inlined/mixins'; + +@include carbon--grid(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/index.scss new file mode 100644 index 000000000000..6e4772178b3d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/index.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +@include carbon--grid(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_breakpoint.scss new file mode 100644 index 000000000000..a9b5e4bba12d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_breakpoint.scss @@ -0,0 +1,266 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use '@carbon/layout/scss/modules/convert'; + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, key-by-index($map, $total-length)); +} + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_config.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_config.scss new file mode 100644 index 000000000000..7598b1e4c065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_config.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Namespace prefix +/// @type String +/// @access public +/// @group @carbon/grid +$prefix: 'bx' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_css-grid.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_css-grid.scss new file mode 100644 index 000000000000..19f1261ba553 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_css-grid.scss @@ -0,0 +1,426 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use "sass:math"; + +@use 'sass:map'; +@use 'config' as *; +@use 'breakpoint' as *; + +@mixin css-grid() { + display: grid; + max-width: 99rem; + padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + margin-right: auto; + margin-left: auto; + column-gap: var(--cds-grid-gutter); + grid-template-columns: repeat( + var(--cds-grid-columns), + minmax(0, var(--cds-grid-column-size)) + ); +} + +@mixin subgrid() { + display: grid; + column-gap: var(--cds-grid-gutter); + grid-template-columns: repeat( + var(--cds-grid-columns), + minmax(0, var(--cds-grid-column-size)) + ); +} + +:root { + --cds-grid-columns: 4; + --cds-grid-column-size: 1fr; + --cds-grid-gutter: 2rem; + // Used to configure appropriate margins for condensed subgrids inside wide grids + --cds-grid-gutter-wide: 2rem; + --cds-grid-hang: 1rem; + --cds-grid-margin: 0; + + @include breakpoint(md) { + --cds-grid-columns: 8; + --cds-grid-margin: 1rem; + } + + @include breakpoint(lg) { + --cds-grid-columns: 16; + } + + @include breakpoint(max) { + --cds-grid-margin: 1.5rem; + } +} + +.#{$prefix}--css-grid { + @include css-grid(); +} + +.#{$prefix}--css-grid--12 { + @include css-grid(); + @include breakpoint(lg) { + --cds-grid-columns: 12; + } +} + +.#{$prefix}--subgrid { + @include subgrid(); +} + +.#{$prefix}--subgrid[class*='col'] { + display: grid; +} + +// ----------------------------------------------------------------------------- +// Narrow +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--narrow { + --cds-grid-margin: 1rem; + + padding-right: var(--cds-grid-margin); + padding-left: var(--cds-grid-margin); + + @include breakpoint(md) { + padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2); + } +} + +.#{$prefix}--css-grid--narrow > [class*='col'] { + margin-left: calc(var(--cds-grid-gutter) / 2 * -1); +} + +// Narrow subgrid inside wide +.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed) + .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow { + padding: 0; +} + +// Narrow subgrid column inside wide +.#{$prefix}--css-grid + .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow + > [class*='col'] { + margin-left: calc(var(--cds-grid-gutter) / 2 * -1); +} + +// ----------------------------------------------------------------------------- +// Condensed +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--condensed { + --cds-grid-gutter: 1px; + + column-gap: var(--cds-grid-gutter); + row-gap: var(--cds-grid-gutter); +} + +// condensed subgrid inside wide +.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow) + .bx--subgrid.#{$prefix}--css-grid--condensed { + margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1); + margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1); +} + +// ----------------------------------------------------------------------------- +// No Gutter +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--no-gutter { + // This is set to 0px (versus 0) so that the calc expression for padding for + // a grid container works as expected. Without the unit, the calc() will + // result in a value of 0. + // stylelint-disable-next-line length-zero-no-unit + --cds-grid-gutter: 0px; + + column-gap: var(--cds-grid-gutter); +} + +// ----------------------------------------------------------------------------- +// Full width +// ----------------------------------------------------------------------------- +.#{$prefix}--css-grid--full-width { + max-width: 100%; +} + +// ----------------------------------------------------------------------------- +// Column span +// ----------------------------------------------------------------------------- +@mixin -column-span($i) { + @if $i == 0 { + display: none; + } @else { + --cds-grid-columns: #{$i}; + + display: block; + grid-column: span $i / span $i; + } +} + +@for $i from 0 through 16 { + .#{$prefix}--col-span-#{$i} { + @include -column-span($i); + } +} + +.#{$prefix}--col-span-auto { + grid-column: auto; +} + +.#{$prefix}--col-span-100 { + grid-column: 1 / -1; +} + +@each $name, $value in $grid-breakpoints { + $columns: map.get($value, columns); + + @include breakpoint($name) { + @for $i from 0 through $columns { + .#{$prefix}--#{$name}\:col-span-#{$i} { + @include -column-span($i); + } + } + + .#{$prefix}--#{$name}\:col-span-auto { + grid-column: auto; + } + + .#{$prefix}--#{$name}\:col-span-100 { + grid-column: 1 / -1; + } + } +} + +.#{$prefix}--col-span-25 { + --cds-grid-columns: 1; + + grid-column: span 1; + + @include breakpoint(md) { + --cds-grid-columns: 2; + + grid-column: span 2; + } + + @include breakpoint(lg) { + --cds-grid-columns: 4; + + grid-column: span 4; + } +} + +.#{$prefix}--col-span-50 { + --cds-grid-columns: 2; + + grid-column: span 2; + + @include breakpoint(md) { + --cds-grid-columns: 4; + + grid-column: span 4; + } + + @include breakpoint(lg) { + --cds-grid-columns: 8; + + grid-column: span 8; + } +} + +.#{$prefix}--col-span-75 { + --cds-grid-columns: 3; + + grid-column: span 3; + + @include breakpoint(md) { + --cds-grid-columns: 6; + + grid-column: span 6; + } + + @include breakpoint(lg) { + --cds-grid-columns: 12; + + grid-column: span 12; + } +} + +// ----------------------------------------------------------------------------- +// Column offset +// ----------------------------------------------------------------------------- +@for $i from 1 through 17 { + .#{$prefix}--col-start-#{$i} { + grid-column-start: $i; + } + + .#{$prefix}--col-end-#{$i} { + grid-column-start: $i; + } +} + +.#{$prefix}--col-start-auto { + grid-column-start: auto; +} + +.#{$prefix}--col-end-auto { + grid-column-start: end; +} + +@each $name, $value in $grid-breakpoints { + $columns: map.get($value, columns); + + @include breakpoint($name) { + // The `grid-column-start` property is *not* inclusive. + // It starts the column *at* the column, not *on* the column. We must + // ensure that there is one additional class available for each breakpoint. + @for $i from 1 through $columns + 1 { + .#{$prefix}--#{$name}\:col-start-#{$i} { + grid-column-start: $i; + } + + .#{$prefix}--#{$name}\:col-end-#{$i} { + grid-column-end: $i; + } + } + + .#{$prefix}--#{$name}\:col-start-auto { + grid-column-start: auto; + } + + .#{$prefix}--#{$name}\:col-end-auto { + grid-column-start: end; + } + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- +.#{$prefix}--hang { + padding-left: var(--cds-grid-hang); +} + +// ----------------------------------------------------------------------------- +// Column gutter +// ----------------------------------------------------------------------------- +.#{$prefix}--gutter { + padding-right: var(--cds-grid-hang); + padding-left: var(--cds-grid-hang); +} + +.#{$prefix}--gutter-start { + padding-left: var(--cds-grid-hang); +} + +[dir='rtl'] .#{$prefix}--gutter-start { + padding-right: var(--cds-grid-hang); +} + +.#{$prefix}--gutter-end { + padding-right: var(--cds-grid-hang); +} + +[dir='rtl'] .#{$prefix}--gutter-end { + padding-left: var(--cds-grid-hang); +} + +// ----------------------------------------------------------------------------- +// Utilities +// ----------------------------------------------------------------------------- + +/// Justify items +.#{$prefix}--justify-items-start { + justify-items: start; +} + +.#{$prefix}--justify-items-end { + justify-items: end; +} + +.#{$prefix}--justify-items-center { + justify-items: center; +} + +/// Align items +.#{$prefix}--align-items-start { + align-items: start; +} + +.#{$prefix}--align-items-end { + align-items: end; +} + +.#{$prefix}--align-items-center { + align-items: center; +} + +// ----------------------------------------------------------------------------- +// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component? +// ----------------------------------------------------------------------------- + +/// The aspect ratios that are used to generate corresponding aspect ratio +/// classes in code +/// @type List +/// @access public +/// @group @carbon/grid +$carbon--aspect-ratios: ( + (16, 9), + (9, 16), + (2, 1), + (1, 2), + (4, 3), + (3, 4), + (3, 2), + (2, 3), + (1, 1) +); + +/// Generates the CSS classname utilities for the aspect ratios +/// +/// CSS Tricks article on aspect ratios and all the different ways it can be done. +/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6 +/// +/// That article references an earlier article on the topic. +/// https://keithjgrant.com/posts/2017/03/aspect-ratios/ +/// +/// @param {Number} $width width from an aspect ratio +/// @param {Number} $height height from an aspect ratio +/// @access private +/// @group @carbon/grid +@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) { + .#{$prefix}--aspect-ratio { + position: relative; + } + + .#{$prefix}--aspect-ratio::before { + width: 1px; + height: 0; + margin-left: -1px; + content: ''; + float: left; + } + + .#{$prefix}--aspect-ratio::after { + display: table; + clear: both; + content: ''; + } + + @each $aspect-ratio in $aspect-ratios { + $width: nth($aspect-ratio, 1); + $height: nth($aspect-ratio, 2); + + .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { + @if meta.function-exists('div', 'math') { + padding-top: percentage(math.div($height, $width)); + } @else { + padding-top: percentage(($height / $width)); + } + } + } +} + +@include carbon--aspect-ratio(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_mixins.scss new file mode 100644 index 000000000000..08706d68a3ad --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/modules/_mixins.scss @@ -0,0 +1,336 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use "sass:math"; + +@use 'config' as *; +@use 'breakpoint' as *; + +// ----------------------------------------------------------------------------- +// Columns +// ----------------------------------------------------------------------------- + +/// Used to initialize the default properties for a column class, most notably +/// for setting width and default gutters when a column's breakpoint has not been +/// hit yet. +/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system +/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter +/// @access private +/// @group @carbon/grid +@mixin -make-col-ready( + $gutter: $grid-gutter, + $condensed-gutter: $grid-gutter--condensed +) { + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: ($gutter * 0.5); + padding-left: ($gutter * 0.5); + + // For our condensed use-case, our gutters collapse to 2px solid, 1px on each + // side. + .#{$prefix}--row--condensed &, + .#{$prefix}--grid--condensed & { + padding-right: ($condensed-gutter * 0.5); + padding-left: ($condensed-gutter * 0.5); + } + + // For our narrow use-case, our container hangs 16px into the gutter + .#{$prefix}--row--narrow &, + .#{$prefix}--grid--narrow & { + padding-right: ($gutter * 0.5); + padding-left: 0; + } +} + +/// Define the width of the column for a given span and column count. +/// A width of 0 will hide the column entirely. +/// @param {Number} $span - The number of columns covered +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin -make-col($span, $columns) { + @if $span == 0 { + display: none; + } @else { + // Explicitly include `display: block` to override + display: block; + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + @if meta.function-exists('div', 'math') { + max-width: percentage(math.div($span, $columns)); + flex: 0 0 percentage(math.div($span, $columns)); + } @else { + max-width: percentage(($span / $columns)); + flex: 0 0 percentage(($span / $columns)); + } + } +} + +/// Create a column offset for a given span and column count. +/// @param {Number} $span - The number of columns the offset should cover +/// @param {Number} $columns - The total number of columns available +/// @access private +/// @group @carbon/grid +@mixin -make-col-offset($span, $columns) { + $offset: 0; + @if meta.function-exists('div', 'math') { + $offset: math.div($span, $columns); + } @else { + $offset: ($span / $columns); + } + @if $offset == 0 { + margin-left: 0; + } @else { + margin-left: percentage($offset); + } +} + +/// Output the CSS required for all the columns in a given grid system. +/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system +/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system +/// @access private +/// @group @carbon/grid +@mixin -make-grid-columns( + $breakpoints: $grid-breakpoints, + $gutter: $grid-gutter +) { + .#{$prefix}--col { + @include -make-col-ready($gutter); + } + + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint); + $columns: map-get(map-get($breakpoints, $breakpoint), columns); + + // Allow columns to stretch full width below their breakpoints + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include -make-col-ready($gutter); + } + } + + .#{$prefix}--col#{$infix}, + .#{$prefix}--col#{$infix}--auto { + @include -make-col-ready($gutter); + } + + @include breakpoint($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .#{$prefix}--col, + .#{$prefix}--col#{$infix} { + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + } + + .#{$prefix}--col--auto, + .#{$prefix}--col#{$infix}--auto { + width: auto; + // Reset earlier grid tiers + max-width: 100%; + flex: 1 0 0%; + } + + @for $i from 0 through $columns { + .#{$prefix}--col#{$infix}-#{$i} { + @include -make-col($i, $columns); + } + } + + @for $i from 0 through ($columns - 1) { + @if not($infix == '') { + .#{$prefix}--offset#{$infix}-#{$i} { + @include -make-col-offset($i, $columns); + } + } + } + } + } +} + +// ----------------------------------------------------------------------------- +// Rows +// ----------------------------------------------------------------------------- + +/// Define the properties for a selector assigned to a row in the grid system. +/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin make-row($gutter: $grid-gutter) { + display: flex; + flex-wrap: wrap; + margin-right: -1 * $gutter * 0.5; + margin-left: -1 * $gutter * 0.5; +} + +// ----------------------------------------------------------------------------- +// No gutter +// ----------------------------------------------------------------------------- + +/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These +/// classes are useful for dropping the gutter in fluid situations. +/// @access private +/// @group @carbon/grid +@mixin -no-gutter { + .#{$prefix}--no-gutter, + .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { + padding-right: 0; + padding-left: 0; + } + + .#{$prefix}--no-gutter--start, + .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--end, + .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { + padding-right: 0; + } + + // Deprecated ☠️ + .#{$prefix}--no-gutter--left, + .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] { + padding-left: 0; + } + + .#{$prefix}--no-gutter--right, + .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] { + padding-right: 0; + } +} + +// ----------------------------------------------------------------------------- +// Hang +// ----------------------------------------------------------------------------- + +/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are +/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type. +/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system +/// @access private +/// @group @carbon/grid +@mixin -hang($gutter: $grid-gutter) { + .#{$prefix}--hang--start { + padding-left: ($gutter * 0.5); + } + + .#{$prefix}--hang--end { + padding-right: ($gutter * 0.5); + } + + // Deprecated ☠️ + .#{$prefix}--hang--left { + padding-left: ($gutter * 0.5); + } + + .#{$prefix}--hang--right { + padding-right: ($gutter * 0.5); + } +} + +// ----------------------------------------------------------------------------- +// Grid +// ----------------------------------------------------------------------------- + +/// Create the container for a grid. Will cause full-bleed for the grid unless +/// max-width properties are added with `-make-container-max-widths` +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -make-container($breakpoints: $grid-breakpoints) { + margin-right: auto; + margin-left: auto; + + @include -set-largest-breakpoint(); + + @each $name, $value in $breakpoints { + $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name)); + $margin: map-get($value, margin); + + @if $prev-breakpoint { + $prev-margin: map-get($prev-breakpoint, margin); + @if $prev-margin != $margin { + @include breakpoint($name) { + padding-right: #{($grid-gutter * 0.5) + $margin}; + padding-left: #{($grid-gutter * 0.5) + $margin}; + } + } + } @else { + @include breakpoint($name) { + padding-right: #{($grid-gutter * 0.5) + $margin}; + padding-left: #{($grid-gutter * 0.5) + $margin}; + } + } + } +} + +/// Get the last breakpoint width and set max-width to its value +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) { + $largest-breakpoint: last-map-item($breakpoints); + + max-width: map-get($largest-breakpoint, 'width'); +} + +/// Add in the max-widths for each breakpoint to the container +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @access private +/// @group @carbon/grid +@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) { + @each $name, $value in $breakpoints { + @include breakpoint($name) { + max-width: map-get($value, width); + } + } +} + +/// Generate the CSS for a grid for the given breakpoints and gutters +/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints +/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters +/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter +/// @access public +/// @group @carbon/grid +@mixin grid( + $breakpoints: $grid-breakpoints, + $grid-gutter: $grid-gutter, + $condensed-gutter: $grid-gutter--condensed +) { + .#{$prefix}--grid { + @include -make-container($breakpoints); + } + + @include largest-breakpoint($breakpoints) { + .#{$prefix}--grid--full-width { + max-width: 100%; + } + } + + .#{$prefix}--row { + @include make-row(); + } + + .#{$prefix}--row-padding [class*='#{$prefix}--col'], + .#{$prefix}--col-padding { + padding-top: $grid-gutter * 0.5; + padding-bottom: $grid-gutter * 0.5; + } + + .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { + padding-top: $condensed-gutter * 0.5; + padding-bottom: $condensed-gutter * 0.5; + } + + @include -make-grid-columns($breakpoints, $grid-gutter); + @include -no-gutter(); + @include -hang($grid-gutter); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/import-once.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/import-once.scss new file mode 100644 index 000000000000..f7fbca1d0adc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/import-once.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Used by `exports` mixin to track which modules have been imported +/// @type Map +/// @access public +/// @group @carbon/import-once +$imported-modules: () !default; + +/// Module export mixin that helps making sure a module is imported once and only once +/// @access public +/// @param {String} $name - Name of exported module +/// @param {Bool} $warn [false] - Warn when a module has been already imported +/// @content Declaration blocks to be imported +/// @group @carbon/import-once +@mixin exports($name, $warn: false) { + @if (index($imported-modules, $name) == null) { + $imported-modules: append($imported-modules, $name) !global; + @content; + } @else if $warn == true { + @warn 'Module `#{$name}` has already been imported.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/index.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/index.scss new file mode 100644 index 000000000000..182f0ad45699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/import-once/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'import-once'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_breakpoint.scss new file mode 100644 index 000000000000..6312bbf7d572 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_breakpoint.scss @@ -0,0 +1,246 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@import 'convert'; +@import 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter: carbon--rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter--condensed: carbon--rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: carbon--rem(320px), + ), + md: ( + columns: 8, + margin: carbon--rem(16px), + width: carbon--rem(672px), + ), + lg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1056px), + ), + xlg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1312px), + ), + max: ( + columns: 16, + margin: carbon--rem(24px), + width: carbon--rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-next( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n < length($breakpoint-names) { + @return nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-prev( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function carbon--is-smallest-breakpoint( + $name, + $breakpoints: $carbon--grid-breakpoints +) { + @return index(map-keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--largest-breakpoint-name( + $breakpoints: $carbon--grid-breakpoints +) { + $total-breakpoints: length($breakpoints); + @return carbon--key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width); + @if carbon--is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-between( + $lower, + $upper, + $breakpoints: $carbon--grid-breakpoints +) { + $is-number-lower: type-of($lower) == 'number'; + $is-number-upper: type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if( + not $is-number-lower and $min, + map-get($min, width) + 0.02, + $min + ); + $max-width: if( + not $is-number-upper and $max, + map-get($max, width) - 0.02, + $max + ); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include carbon--breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include carbon--breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint(carbon--largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.import.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.import.scss new file mode 100644 index 000000000000..f8cab364b5f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.import.scss @@ -0,0 +1,65 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.scss new file mode 100644 index 000000000000..1082749a63e1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_convert.scss @@ -0,0 +1,54 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1rem; +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1em; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.import.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.import.scss new file mode 100644 index 000000000000..15e9f7090f33 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.import.scss @@ -0,0 +1,117 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use "sass:math"; +@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.scss new file mode 100644 index 000000000000..a8113d75f885 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_key-height.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@import 'breakpoint'; +@import 'utilities'; + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @return ($width - (2 * $margin)) / $columns; + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_mini-unit.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_mini-unit.scss new file mode 100644 index 000000000000..c79b6ed564c2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_mini-unit.scss @@ -0,0 +1,23 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; + +/// Default mini-unit value +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--mini-unit-size: 8px !default; + +/// Get the value of the corresponding number of units +/// @param {Number} $count - The number of units to get the value for +/// @return {Number} In rem units +/// @access public +/// @group @carbon/layout +@function carbon--mini-units($count) { + @return carbon--rem($carbon--mini-unit-size * $count); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_spacing.scss new file mode 100644 index 000000000000..ae11fb9e45b9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_spacing.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/spacing'; +@import './generated/layout'; +@import './generated/fluid-spacing'; +@import './generated/container'; +@import './generated/icon-size'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_utilities.scss new file mode 100644 index 000000000000..af8e1e0eb4e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function carbon--key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_container.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_container.scss new file mode 100644 index 000000000000..c7ec355b9503 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_container.scss @@ -0,0 +1,73 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-01: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-02: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-03: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-05: 4rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--container: ( + $carbon--container-01, + $carbon--container-02, + $carbon--container-03, + $carbon--container-04, + $carbon--container-05 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-01 +$container-01: $carbon--container-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-02 +$container-02: $carbon--container-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-03 +$container-03: $carbon--container-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-04 +$container-04: $carbon--container-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-05 +$container-05: $carbon--container-05 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2532fa617901 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_fluid-spacing.scss @@ -0,0 +1,61 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-04: 10vw !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-01 +$fluid-spacing-01: $carbon--fluid-spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-02 +$fluid-spacing-02: $carbon--fluid-spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-03 +$fluid-spacing-03: $carbon--fluid-spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-04 +$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_icon-size.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_icon-size.scss new file mode 100644 index 000000000000..a3537a118520 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_icon-size.scss @@ -0,0 +1,34 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-02: 1.25rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-01 +$icon-size-01: $carbon--icon-size-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-02 +$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_layout.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_layout.scss new file mode 100644 index 000000000000..cbdc2c1af6a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_layout.scss @@ -0,0 +1,97 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-02: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-03: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-05: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-06: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-07: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-01 +$layout-01: $carbon--layout-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-02 +$layout-02: $carbon--layout-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-03 +$layout-03: $carbon--layout-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-04 +$layout-04: $carbon--layout-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-05 +$layout-05: $carbon--layout-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-06 +$layout-06: $carbon--layout-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-07 +$layout-07: $carbon--layout-07 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_size.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_size.scss new file mode 100644 index 000000000000..220cefc4baa1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_size.scss @@ -0,0 +1,17 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$size-xs: 1.5rem; +$size-sm: 2rem; +$size-md: 2.5rem; +$size-lg: 3rem; +$size-xl: 4rem; +$size-2xl: 5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_spacing.scss new file mode 100644 index 000000000000..67fc46d90cc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/generated/_spacing.scss @@ -0,0 +1,169 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-13: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09, + $carbon--spacing-10, + $carbon--spacing-11, + $carbon--spacing-12, + $carbon--spacing-13 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-01 +$spacing-01: $carbon--spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-02 +$spacing-02: $carbon--spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-03 +$spacing-03: $carbon--spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-04 +$spacing-04: $carbon--spacing-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-05 +$spacing-05: $carbon--spacing-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-06 +$spacing-06: $carbon--spacing-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-07 +$spacing-07: $carbon--spacing-07 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-08 +$spacing-08: $carbon--spacing-08 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-09 +$spacing-09: $carbon--spacing-09 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-10 +$spacing-10: $carbon--spacing-10 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-11 +$spacing-11: $carbon--spacing-11 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-12 +$spacing-12: $carbon--spacing-12 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-13 +$spacing-13: $carbon--spacing-13 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/index.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/index.scss new file mode 100644 index 000000000000..7c7fe0aca3be --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'layout'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/layout.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/layout.scss new file mode 100644 index 000000000000..acc1f1e8f702 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/layout.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; +@import 'breakpoint'; +@import 'mini-unit'; +@import 'spacing'; +@import 'key-height'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_breakpoint.scss new file mode 100644 index 000000000000..e10967e39c7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_breakpoint.scss @@ -0,0 +1,232 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'convert'; +@use 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_convert.scss new file mode 100644 index 000000000000..3b28c4f09127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_convert.scss @@ -0,0 +1,51 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_spacing.scss new file mode 100644 index 000000000000..42e124108c91 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_spacing.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './generated/fluid-spacing'; +@forward './generated/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_utilities.scss new file mode 100644 index 000000000000..26a423de7b48 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2529ccd2dd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss @@ -0,0 +1,37 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-04: 10vw !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$fluid-spacing: ( + fluid-spacing-01: $fluid-spacing-01, + fluid-spacing-02: $fluid-spacing-02, + fluid-spacing-03: $fluid-spacing-03, + fluid-spacing-04: $fluid-spacing-04, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_spacing.scss new file mode 100644 index 000000000000..42f8fb4df1ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/grid/scss/vendor/@carbon/layout/modules/generated/_spacing.scss @@ -0,0 +1,91 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-13: 10rem !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$spacing: ( + spacing-01: $spacing-01, + spacing-02: $spacing-02, + spacing-03: $spacing-03, + spacing-04: $spacing-04, + spacing-05: $spacing-05, + spacing-06: $spacing-06, + spacing-07: $spacing-07, + spacing-08: $spacing-08, + spacing-09: $spacing-09, + spacing-10: $spacing-10, + spacing-11: $spacing-11, + spacing-12: $spacing-12, + spacing-13: $spacing-13, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/icons/scss/icons.scss b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/icons.scss new file mode 100644 index 000000000000..0b3a7dcad3bb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/icons.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'mixins'; + +@include carbon--icons(); diff --git a/packages/components/src/globals/scss/vendor/@carbon/icons/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/index.scss new file mode 100644 index 000000000000..9c0f2e4db13c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'icons'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/icons/scss/mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/mixins.scss new file mode 100644 index 000000000000..e42ac1ccedf2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/icons/scss/mixins.scss @@ -0,0 +1,18 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Makes SVGs accessible in high contrast mode +/// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345 +/// @access public +/// @group @carbon/icons +@mixin carbon--icons { + @media screen and (-ms-high-contrast: active) { + svg { + fill: ButtonText; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/import-once.scss b/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/import-once.scss new file mode 100644 index 000000000000..f7fbca1d0adc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/import-once.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Used by `exports` mixin to track which modules have been imported +/// @type Map +/// @access public +/// @group @carbon/import-once +$imported-modules: () !default; + +/// Module export mixin that helps making sure a module is imported once and only once +/// @access public +/// @param {String} $name - Name of exported module +/// @param {Bool} $warn [false] - Warn when a module has been already imported +/// @content Declaration blocks to be imported +/// @group @carbon/import-once +@mixin exports($name, $warn: false) { + @if (index($imported-modules, $name) == null) { + $imported-modules: append($imported-modules, $name) !global; + @content; + } @else if $warn == true { + @warn 'Module `#{$name}` has already been imported.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/index.scss new file mode 100644 index 000000000000..182f0ad45699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/import-once/scss/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'import-once'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss new file mode 100644 index 000000000000..6312bbf7d572 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_breakpoint.scss @@ -0,0 +1,246 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@import 'convert'; +@import 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter: carbon--rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--grid-gutter--condensed: carbon--rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: carbon--rem(320px), + ), + md: ( + columns: 8, + margin: carbon--rem(16px), + width: carbon--rem(672px), + ), + lg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1056px), + ), + xlg: ( + columns: 16, + margin: carbon--rem(16px), + width: carbon--rem(1312px), + ), + max: ( + columns: 16, + margin: carbon--rem(24px), + width: carbon--rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-next( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n < length($breakpoint-names) { + @return nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-prev( + $name, + $breakpoints: $carbon--grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { + $n: index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function carbon--is-smallest-breakpoint( + $name, + $breakpoints: $carbon--grid-breakpoints +) { + @return index(map-keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--largest-breakpoint-name( + $breakpoints: $carbon--grid-breakpoints +) { + $total-breakpoints: length($breakpoints); + @return carbon--key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function carbon--breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width); + @if carbon--is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) { + @if type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map-has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map-get($breakpoints, $name); + $width: map-get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint-between( + $lower, + $upper, + $breakpoints: $carbon--grid-breakpoints +) { + $is-number-lower: type-of($lower) == 'number'; + $is-number-upper: type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if( + not $is-number-lower and $min, + map-get($min, width) + 0.02, + $min + ); + $max-width: if( + not $is-number-upper and $max, + map-get($max, width) - 0.02, + $max + ); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include carbon--breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include carbon--breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint(carbon--largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) { + @include carbon--breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.import.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.import.scss new file mode 100644 index 000000000000..f8cab364b5f3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.import.scss @@ -0,0 +1,65 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1rem; + } @else { + @return ($px / $carbon--base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $carbon--base-font-size) * 1em; + } @else { + @return ($px / $carbon--base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.scss new file mode 100644 index 000000000000..1082749a63e1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_convert.scss @@ -0,0 +1,54 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function carbon--rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1rem; +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function carbon--em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @return ($px / $carbon--base-font-size) * 1em; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.import.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.import.scss new file mode 100644 index 000000000000..15e9f7090f33 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.import.scss @@ -0,0 +1,117 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes (*.import.scss) +// ------------------------------------------ +// +// This file is intended to be consumed and processed with dart-sass. +// It is incompatible with node-sass/libsass as it contains sass language features +// or functions that are unavailable in node-sass/libsass, such as `math.div`. +// +// The non-`.import` suffixed version of this file eg. `_filename.scss` +// is intended to be compatible with node-sass/libsass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@use 'sass:meta'; +@use "sass:math"; +@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */ +@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */ + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @if meta.function-exists('div', 'math') { + @return math.div($width - (2 * $margin), $columns); + } @else { + @return (($width - (2 * $margin)) / $columns); + } + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss new file mode 100644 index 000000000000..a8113d75f885 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_key-height.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +//------------------------------------------- +// Compatibility notes +// ------------------------------------------ +// +// This file is intended to be consumed and processed with node-sass/libsass. +// Sass language features only available in dart-sass, such as `math.div`, +// should not be used. +// +// The `.import` suffixed version of this file eg. `_filename.import.scss` +// is intended to be compatible with dart-sass. +// +// Styles authored within this file must be duplicated to the corresponding +// compatibility file to ensure we continue to support node-sass and dart-sass +// in v10. + +@import 'breakpoint'; +@import 'utilities'; + +/// Get the column width for a given breakpoint +/// @param {String} $breakpoint +/// @param {Map} $breakpoints [$carbon--grid-breakpoints] +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--get-column-width( + $breakpoint, + $breakpoints: $carbon--grid-breakpoints +) { + @if map-has-key($breakpoints, $breakpoint) { + $values: map-get($breakpoints, $breakpoint); + $width: map-get($values, width); + $margin: map-get($values, margin); + $columns: map-get($values, columns); + + @return ($width - (2 * $margin)) / $columns; + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} + +/// @type Map +/// @access public +/// @group @carbon/layout +$carbon--key-height-scales: ( + sm: ( + carbon--get-column-width(sm), + carbon--get-column-width(sm) * 2, + carbon--get-column-width(sm) * 3, + carbon--get-column-width(sm) * 4, + carbon--get-column-width(sm) * 5, + carbon--get-column-width(sm) * 6, + ), + md: ( + carbon--get-column-width(md), + carbon--get-column-width(md) * 2, + carbon--get-column-width(md) * 3, + carbon--get-column-width(md) * 4, + carbon--get-column-width(md) * 5, + carbon--get-column-width(md) * 6, + ), + lg: ( + carbon--get-column-width(lg), + carbon--get-column-width(lg) * 2, + carbon--get-column-width(lg) * 3, + carbon--get-column-width(lg) * 4, + carbon--get-column-width(lg) * 5, + carbon--get-column-width(lg) * 6, + carbon--get-column-width(lg) * 7, + carbon--get-column-width(lg) * 8, + ), + xlg: ( + carbon--get-column-width(xlg), + carbon--get-column-width(xlg) * 2, + carbon--get-column-width(xlg) * 3, + carbon--get-column-width(xlg) * 4, + carbon--get-column-width(xlg) * 5, + carbon--get-column-width(xlg) * 6, + carbon--get-column-width(xlg) * 7, + carbon--get-column-width(xlg) * 8, + ), + max: ( + carbon--get-column-width(max), + carbon--get-column-width(max) * 2, + carbon--get-column-width(max) * 3, + carbon--get-column-width(max) * 4, + carbon--get-column-width(max) * 5, + carbon--get-column-width(max) * 6, + carbon--get-column-width(max) * 7, + carbon--get-column-width(max) * 8, + ), +); + +/// Get the value of a key height step at a given breakpoint +/// @param {String} $breakpoint +/// @param {Number} $step +/// @return {Number} In rem +/// @access public +/// @group @carbon/layout +@function carbon--key-height($breakpoint, $step) { + @if map-has-key($carbon--key-height-scales, $breakpoint) { + @return nth(map-get($carbon--key-height-scales, $breakpoint), $step); + } @else { + @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss new file mode 100644 index 000000000000..c79b6ed564c2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_mini-unit.scss @@ -0,0 +1,23 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; + +/// Default mini-unit value +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--mini-unit-size: 8px !default; + +/// Get the value of the corresponding number of units +/// @param {Number} $count - The number of units to get the value for +/// @return {Number} In rem units +/// @access public +/// @group @carbon/layout +@function carbon--mini-units($count) { + @return carbon--rem($carbon--mini-unit-size * $count); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss new file mode 100644 index 000000000000..ae11fb9e45b9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_spacing.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import './generated/spacing'; +@import './generated/layout'; +@import './generated/fluid-spacing'; +@import './generated/container'; +@import './generated/icon-size'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_utilities.scss new file mode 100644 index 000000000000..af8e1e0eb4e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function carbon--key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_container.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_container.scss new file mode 100644 index 000000000000..c7ec355b9503 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_container.scss @@ -0,0 +1,73 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-01: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-02: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-03: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--container-05: 4rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--container: ( + $carbon--container-01, + $carbon--container-02, + $carbon--container-03, + $carbon--container-04, + $carbon--container-05 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-01 +$container-01: $carbon--container-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-02 +$container-02: $carbon--container-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-03 +$container-03: $carbon--container-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-04 +$container-04: $carbon--container-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--container-05 +$container-05: $carbon--container-05 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2532fa617901 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_fluid-spacing.scss @@ -0,0 +1,61 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing-04: 10vw !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-01 +$fluid-spacing-01: $carbon--fluid-spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-02 +$fluid-spacing-02: $carbon--fluid-spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-03 +$fluid-spacing-03: $carbon--fluid-spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--fluid-spacing-04 +$fluid-spacing-04: $carbon--fluid-spacing-04 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_icon-size.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_icon-size.scss new file mode 100644 index 000000000000..a3537a118520 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_icon-size.scss @@ -0,0 +1,34 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--icon-size-02: 1.25rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-01 +$icon-size-01: $carbon--icon-size-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--icon-size-02 +$icon-size-02: $carbon--icon-size-02 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_layout.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_layout.scss new file mode 100644 index 000000000000..cbdc2c1af6a8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_layout.scss @@ -0,0 +1,97 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-01: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-02: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-03: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-04: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-05: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-06: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--layout-07: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-01 +$layout-01: $carbon--layout-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-02 +$layout-02: $carbon--layout-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-03 +$layout-03: $carbon--layout-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-04 +$layout-04: $carbon--layout-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-05 +$layout-05: $carbon--layout-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-06 +$layout-06: $carbon--layout-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--layout-07 +$layout-07: $carbon--layout-07 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_size.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_size.scss new file mode 100644 index 000000000000..220cefc4baa1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_size.scss @@ -0,0 +1,17 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$size-xs: 1.5rem; +$size-sm: 2rem; +$size-md: 2.5rem; +$size-lg: 3rem; +$size-xl: 4rem; +$size-2xl: 5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_spacing.scss new file mode 100644 index 000000000000..67fc46d90cc8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/generated/_spacing.scss @@ -0,0 +1,169 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$carbon--spacing-13: 10rem !default; + +/// @type List +/// @access public +/// @group @carbon/layout +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09, + $carbon--spacing-10, + $carbon--spacing-11, + $carbon--spacing-12, + $carbon--spacing-13 +); + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-01 +$spacing-01: $carbon--spacing-01 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-02 +$spacing-02: $carbon--spacing-02 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-03 +$spacing-03: $carbon--spacing-03 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-04 +$spacing-04: $carbon--spacing-04 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-05 +$spacing-05: $carbon--spacing-05 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-06 +$spacing-06: $carbon--spacing-06 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-07 +$spacing-07: $carbon--spacing-07 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-08 +$spacing-08: $carbon--spacing-08 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-09 +$spacing-09: $carbon--spacing-09 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-10 +$spacing-10: $carbon--spacing-10 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-11 +$spacing-11: $carbon--spacing-11 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-12 +$spacing-12: $carbon--spacing-12 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +/// @alias carbon--spacing-13 +$spacing-13: $carbon--spacing-13 !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/index.scss new file mode 100644 index 000000000000..7c7fe0aca3be --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'layout'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/layout.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/layout.scss new file mode 100644 index 000000000000..acc1f1e8f702 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/layout.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'convert'; +@import 'breakpoint'; +@import 'mini-unit'; +@import 'spacing'; +@import 'key-height'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_breakpoint.scss new file mode 100644 index 000000000000..e10967e39c7d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_breakpoint.scss @@ -0,0 +1,232 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'convert'; +@use 'utilities'; + +/// Carbon gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter: convert.rem(32px); + +/// Carbon condensed gutter size in rem +/// @type Number +/// @access public +/// @group @carbon/layout +$grid-gutter--condensed: convert.rem(1px); + +// Initial map of our breakpoints and their values +/// @type Map +/// @access public +/// @group @carbon/layout +$grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: convert.rem(320px), + ), + md: ( + columns: 8, + margin: convert.rem(16px), + width: convert.rem(672px), + ), + lg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1056px), + ), + xlg: ( + columns: 16, + margin: convert.rem(16px), + width: convert.rem(1312px), + ), + max: ( + columns: 16, + margin: convert.rem(24px), + width: convert.rem(1584px), + ), +) !default; + +/// Get the value of the next breakpoint, or null for the last breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } + @return null; +} + +/// Get the value of the previous breakpoint, or null for the first breakpoint +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-prev( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map.keys($breakpoints) +) { + $n: list.index($breakpoint-names, $name); + @if $n != null and $n > 1 { + @return list.nth($breakpoint-names, $n - 1); + } + @return null; +} + +/// Check to see if the given breakpoint name +/// @param {String} $name - The name of the breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint +/// @return {Bool} +/// @access public +/// @group @carbon/layout +@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { + @return list.index(map.keys($breakpoints), $name) == 1; +} + +/// Returns the largest breakpoint name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @return {String} +/// @access public +/// @group @carbon/layout +@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { + $total-breakpoints: list.length($breakpoints); + @return key-by-index($breakpoints, $total-breakpoints); +} + +/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. +/// @param {String} $name - The name of the breakpoint +/// @return {String} +/// @access public +/// @group @carbon/layout +@function breakpoint-infix($name) { + @return '-#{$name}'; +} + +/// Generate a media query from the width of the given breakpoint to infinity +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (min-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width); + @if is-smallest-breakpoint($name, $breakpoints) { + @content; + } @else { + @media (min-width: $width) { + @content; + } + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the maximum width of the given styles +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { + @if meta.type-of($name) == 'number' { + @media (max-width: $name) { + @content; + } + } @else if map.has-key($breakpoints, $name) { + // We borrow this logic from bootstrap for specifying the value of the + // max-width. The maximum width is calculated by finding the breakpoint and + // subtracting .02 from its value. This value is used instead of .01 to + // avoid rounding issues in Safari + // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 + $breakpoint: map.get($breakpoints, $name); + $width: map.get($breakpoint, width) - 0.02; + @media (max-width: $width) { + @content; + } + } @else { + @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; + } +} + +/// Generate a media query for the range between the lower and upper breakpoints +/// @param {String | Number} $lower +/// @param {String | Number} $upper +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $is-number-lower: meta.type-of($lower) == 'number'; + $is-number-upper: meta.type-of($upper) == 'number'; + $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); + $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); + + @if $min and $max { + $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); + $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); + @media (min-width: $min-width) and (max-width: $max-width) { + @content; + } + } @else if $min != null and $max == null { + @include breakpoint-up($lower) { + @content; + } + } @else if $min == null and $max != null { + @include breakpoint-down($upper) { + @content; + } + } @else { + @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; + } +} + +/// Generate media query for the largest breakpoint +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { + @include breakpoint(largest-breakpoint-name()) { + @content; + } +} + +/// Generate a media query for a given breakpoint +/// @param {String | Number} $name +/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name +/// @content +/// @access public +/// @group @carbon/layout +@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { + @include breakpoint-up($name, $breakpoints) { + @content; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_convert.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_convert.scss new file mode 100644 index 000000000000..3b28c4f09127 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_convert.scss @@ -0,0 +1,51 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:meta'; +@use 'sass:math'; + +/// Default font size +/// @type Number +/// @access public +/// @group @carbon/layout +$base-font-size: 16px !default; + +/// Convert a given px unit to a rem unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with rem unit +/// @access public +/// @group @carbon/layout +@function rem($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1rem; + } @else { + @return ($px / $base-font-size) * 1rem; + } +} + +/// Convert a given px unit to a em unit +/// @param {Number} $px - Number with px unit +/// @return {Number} Number with em unit +/// @access public +/// @group @carbon/layout +@function em($px) { + @if unit($px) != 'px' { + // TODO: update to @error in v11 + @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; + } + + @if meta.function-exists('div', 'math') { + @return math.div($px, $base-font-size) * 1em; + } @else { + @return ($px / $base-font-size) * 1em; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_spacing.scss new file mode 100644 index 000000000000..42e124108c91 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_spacing.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './generated/fluid-spacing'; +@forward './generated/spacing'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_utilities.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_utilities.scss new file mode 100644 index 000000000000..26a423de7b48 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/_utilities.scss @@ -0,0 +1,41 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// Map deep get +/// @author Hugo Giraudel +/// @access public +/// @param {Map} $map - Map +/// @param {Arglist} $keys - Key chain +/// @return {*} Desired value +/// @group @carbon/layout +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +/// Provide a map and index, and get back the relevant key value +/// @access public +/// @param {Map} $map - Map +/// @param {Integer} $index - Key chain +/// @return {String} Desired value +/// @group @carbon/layout +@function key-by-index($map, $index) { + $keys: map-keys($map); + @return nth($keys, $index); +} + +/// Pass in a map, and get the last one in the list back +/// @access public +/// @param {Map} $map - Map +/// @return {*} Desired value +/// @group @carbon/layout +@function last-map-item($map) { + $total-length: length($map); + @return map-get($map, carbon--key-by-index($map, $total-length)); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_fluid-spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_fluid-spacing.scss new file mode 100644 index 000000000000..2529ccd2dd47 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_fluid-spacing.scss @@ -0,0 +1,37 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-01: 0 !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-02: 2vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-03: 5vw !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$fluid-spacing-04: 10vw !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$fluid-spacing: ( + fluid-spacing-01: $fluid-spacing-01, + fluid-spacing-02: $fluid-spacing-02, + fluid-spacing-03: $fluid-spacing-03, + fluid-spacing-04: $fluid-spacing-04, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_spacing.scss new file mode 100644 index 000000000000..42f8fb4df1ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/layout/scss/modules/generated/_spacing.scss @@ -0,0 +1,91 @@ +// Code generated by @carbon/layout. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2019 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-01: 0.125rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-02: 0.25rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-03: 0.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-04: 0.75rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-05: 1rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-06: 1.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-07: 2rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-08: 2.5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-09: 3rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-10: 4rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-11: 5rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-12: 6rem !default; + +/// @type Number +/// @access public +/// @group @carbon/layout +$spacing-13: 10rem !default; + +/// @type Map +/// @access public +/// @group @carbon/layout +$spacing: ( + spacing-01: $spacing-01, + spacing-02: $spacing-02, + spacing-03: $spacing-03, + spacing-04: $spacing-04, + spacing-05: $spacing-05, + spacing-06: $spacing-06, + spacing-07: $spacing-07, + spacing-08: $spacing-08, + spacing-09: $spacing-09, + spacing-10: $spacing-10, + spacing-11: $spacing-11, + spacing-12: $spacing-12, + spacing-13: $spacing-13, +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/motion/scss/index.scss b/packages/components/src/globals/scss/vendor/@carbon/motion/scss/index.scss new file mode 100644 index 000000000000..6aebad33fbfb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/motion/scss/index.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@import 'motion'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/motion/scss/motion.scss b/packages/components/src/globals/scss/vendor/@carbon/motion/scss/motion.scss new file mode 100644 index 000000000000..eddd8c5891ca --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/motion/scss/motion.scss @@ -0,0 +1,78 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @access public +/// @group @carbon/motion +$fast-01: 70ms !default; + +/// @access public +/// @group @carbon/motion +$fast-02: 110ms !default; + +/// @access public +/// @group @carbon/motion +$moderate-01: 150ms !default; + +/// @access public +/// @group @carbon/motion +$moderate-02: 240ms !default; + +/// @access public +/// @group @carbon/motion +$slow-01: 400ms !default; + +/// @access public +/// @group @carbon/motion +$slow-02: 700ms !default; + +/// Common component easings +/// @type Map +/// @access public +/// @group @carbon/motion +$carbon--easings: ( + standard: ( + productive: cubic-bezier(0.2, 0, 0.38, 0.9), + expressive: cubic-bezier(0.4, 0.14, 0.3, 1), + ), + entrance: ( + productive: cubic-bezier(0, 0, 0.38, 0.9), + expressive: cubic-bezier(0, 0, 0.3, 1), + ), + exit: ( + productive: cubic-bezier(0.2, 0, 1, 0.9), + expressive: cubic-bezier(0.4, 0.14, 1, 1), + ), +); + +/// Get the transition-timing-function for a given easing and motion mode +/// @param {String} $name - Can be `standard`, `entrance`, or `exit` +/// @param {String} $mode [productive] - Can be `productive` or `expressive` +/// @param {Map} $easings [$carbon--easings] - Easings map +/// @access public +/// @group @carbon/motion +/// @return {Function} CSS `cubic-bezier()` function +@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) { + @if map-has-key($easings, $name) { + $easing: map-get($easings, $name); + @if map-has-key($easing, $mode) { + @return map-get($easing, $mode); + } @else { + @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.'; + } + } @else { + @error 'Unable to find an easing named #{$name} in our supported easings.'; + } +} + +/// Set the transition-timing-function for a given easing and motion mode +/// @param {String} $name - The name of the easing curve to apply +/// @param {String} $mode - The mode for the easing curve to use +/// @access public +/// @group @carbon/motion +@mixin carbon--motion($name, $mode) { + transition-timing-function: carbon--motion($name, $mode); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/colors-test.js.snap b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/colors-test.js.snap new file mode 100644 index 000000000000..47c3d61e265b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/colors-test.js.snap @@ -0,0 +1,404 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@carbon/styles/scss/colors Public API 1`] = ` +Object { + "black": "#000000", + "black-100": "#000000", + "black-hover": "#212121", + "blue-10": "#edf5ff", + "blue-10-hover": "#dbebff", + "blue-100": "#001141", + "blue-100-hover": "#001f75", + "blue-20": "#d0e2ff", + "blue-20-hover": "#b8d3ff", + "blue-30": "#a6c8ff", + "blue-30-hover": "#8ab6ff", + "blue-40": "#78a9ff", + "blue-40-hover": "#5c97ff", + "blue-50": "#4589ff", + "blue-50-hover": "#1f70ff", + "blue-60": "#0f62fe", + "blue-60-hover": "#0050e6", + "blue-70": "#0043ce", + "blue-70-hover": "#0053ff", + "blue-80": "#002d9c", + "blue-80-hover": "#0039c7", + "blue-90": "#001d6c", + "blue-90-hover": "#00258a", + "colors": Object { + "black": Object { + "100": "#000000", + }, + "blue": Object { + "10": "#edf5ff", + "100": "#001141", + "20": "#d0e2ff", + "30": "#a6c8ff", + "40": "#78a9ff", + "50": "#4589ff", + "60": "#0f62fe", + "70": "#0043ce", + "80": "#002d9c", + "90": "#001d6c", + }, + "cool-gray": Object { + "10": "#f2f4f8", + "100": "#121619", + "20": "#dde1e6", + "30": "#c1c7cd", + "40": "#a2a9b0", + "50": "#878d96", + "60": "#697077", + "70": "#4d5358", + "80": "#343a3f", + "90": "#21272a", + }, + "cyan": Object { + "10": "#e5f6ff", + "100": "#061727", + "20": "#bae6ff", + "30": "#82cfff", + "40": "#33b1ff", + "50": "#1192e8", + "60": "#0072c3", + "70": "#00539a", + "80": "#003a6d", + "90": "#012749", + }, + "gray": Object { + "10": "#f4f4f4", + "100": "#161616", + "20": "#e0e0e0", + "30": "#c6c6c6", + "40": "#a8a8a8", + "50": "#8d8d8d", + "60": "#6f6f6f", + "70": "#525252", + "80": "#393939", + "90": "#262626", + }, + "green": Object { + "10": "#defbe6", + "100": "#071908", + "20": "#a7f0ba", + "30": "#6fdc8c", + "40": "#42be65", + "50": "#24a148", + "60": "#198038", + "70": "#0e6027", + "80": "#044317", + "90": "#022d0d", + }, + "magenta": Object { + "10": "#fff0f7", + "100": "#2a0a18", + "20": "#ffd6e8", + "30": "#ffafd2", + "40": "#ff7eb6", + "50": "#ee5396", + "60": "#d02670", + "70": "#9f1853", + "80": "#740937", + "90": "#510224", + }, + "orange": Object { + "10": "#fff2e8", + "100": "#231000", + "20": "#ffd9be", + "30": "#ffb784", + "40": "#ff832b", + "50": "#eb6200", + "60": "#ba4e00", + "70": "#8a3800", + "80": "#5e2900", + "90": "#3e1a00", + }, + "purple": Object { + "10": "#f6f2ff", + "100": "#1c0f30", + "20": "#e8daff", + "30": "#d4bbff", + "40": "#be95ff", + "50": "#a56eff", + "60": "#8a3ffc", + "70": "#6929c4", + "80": "#491d8b", + "90": "#31135e", + }, + "red": Object { + "10": "#fff1f1", + "100": "#2d0709", + "20": "#ffd7d9", + "30": "#ffb3b8", + "40": "#ff8389", + "50": "#fa4d56", + "60": "#da1e28", + "70": "#a2191f", + "80": "#750e13", + "90": "#520408", + }, + "teal": Object { + "10": "#d9fbfb", + "100": "#081a1c", + "20": "#9ef0f0", + "30": "#3ddbd9", + "40": "#08bdba", + "50": "#009d9a", + "60": "#007d79", + "70": "#005d5d", + "80": "#004144", + "90": "#022b30", + }, + "warm-gray": Object { + "10": "#f7f3f2", + "100": "#171414", + "20": "#e5e0df", + "30": "#cac5c4", + "40": "#ada8a8", + "50": "#8f8b8b", + "60": "#726e6e", + "70": "#565151", + "80": "#3c3838", + "90": "#272525", + }, + "white": Object { + "0": "#ffffff", + }, + "yellow": Object { + "10": "#fcf4d6", + "100": "#1c1500", + "20": "#fddc69", + "30": "#f1c21b", + "40": "#d2a106", + "50": "#b28600", + "60": "#8e6a00", + "70": "#684e00", + "80": "#483700", + "90": "#302400", + }, + }, + "cool-gray-10": "#f2f4f8", + "cool-gray-10-hover": "#e4e9f1", + "cool-gray-100": "#121619", + "cool-gray-100-hover": "#222a2f", + "cool-gray-20": "#dde1e6", + "cool-gray-20-hover": "#cdd3da", + "cool-gray-30": "#c1c7cd", + "cool-gray-30-hover": "#adb5bd", + "cool-gray-40": "#a2a9b0", + "cool-gray-40-hover": "#9199a1", + "cool-gray-50": "#878d96", + "cool-gray-50-hover": "#757b85", + "cool-gray-60": "#697077", + "cool-gray-60-hover": "#585e64", + "cool-gray-70": "#4d5358", + "cool-gray-70-hover": "#5d646a", + "cool-gray-80": "#343a3f", + "cool-gray-80-hover": "#434a51", + "cool-gray-90": "#21272a", + "cool-gray-90-hover": "#2b3236", + "cyan-10": "#e5f6ff", + "cyan-10-hover": "#cceeff", + "cyan-100": "#061727", + "cyan-100-hover": "#0b2947", + "cyan-20": "#bae6ff", + "cyan-20-hover": "#99daff", + "cyan-30": "#82cfff", + "cyan-30-hover": "#57beff", + "cyan-40": "#33b1ff", + "cyan-40-hover": "#059fff", + "cyan-50": "#1192e8", + "cyan-50-hover": "#0f7ec8", + "cyan-60": "#0072c3", + "cyan-60-hover": "#005fa3", + "cyan-70": "#00539a", + "cyan-70-hover": "#0066bd", + "cyan-80": "#003a6d", + "cyan-80-hover": "#00498a", + "cyan-90": "#012749", + "cyan-90-hover": "#013360", + "gray-10": "#f4f4f4", + "gray-10-hover": "#e8e8e8", + "gray-100": "#161616", + "gray-100-hover": "#292929", + "gray-20": "#e0e0e0", + "gray-20-hover": "#d1d1d1", + "gray-30": "#c6c6c6", + "gray-30-hover": "#b5b5b5", + "gray-40": "#a8a8a8", + "gray-40-hover": "#999999", + "gray-50": "#8d8d8d", + "gray-50-hover": "#7a7a7a", + "gray-60": "#6f6f6f", + "gray-60-hover": "#5e5e5e", + "gray-70": "#525252", + "gray-70-hover": "#636363", + "gray-80": "#393939", + "gray-80-hover": "#474747", + "gray-90": "#262626", + "gray-90-hover": "#333333", + "green-10": "#defbe6", + "green-10-hover": "#b6f6c8", + "green-100": "#071908", + "green-100-hover": "#0d300f", + "green-20": "#a7f0ba", + "green-20-hover": "#74e792", + "green-30": "#6fdc8c", + "green-30-hover": "#36ce5e", + "green-40": "#42be65", + "green-40-hover": "#3bab5a", + "green-50": "#24a148", + "green-50-hover": "#208e3f", + "green-60": "#198038", + "green-60-hover": "#166f31", + "green-70": "#0e6027", + "green-70-hover": "#11742f", + "green-80": "#044317", + "green-80-hover": "#05521c", + "green-90": "#022d0d", + "green-90-hover": "#033b11", + "magenta-10": "#fff0f7", + "magenta-10-hover": "#ffe0ef", + "magenta-100": "#2a0a18", + "magenta-100-hover": "#53142f", + "magenta-20": "#ffd6e8", + "magenta-20-hover": "#ffbdda", + "magenta-30": "#ffafd2", + "magenta-30-hover": "#ff94c3", + "magenta-40": "#ff7eb6", + "magenta-40-hover": "#ff57a0", + "magenta-50": "#ee5396", + "magenta-50-hover": "#e3176f", + "magenta-60": "#d02670", + "magenta-60-hover": "#b0215f", + "magenta-70": "#9f1853", + "magenta-70-hover": "#bf1d63", + "magenta-80": "#740937", + "magenta-80-hover": "#8e0b43", + "magenta-90": "#510224", + "magenta-90-hover": "#68032e", + "orange-10": "#fff2e8", + "orange-10-hover": "#ffe2cc", + "orange-100": "#231000", + "orange-100-hover": "#421e00", + "orange-20": "#ffd9be", + "orange-20-hover": "#ffc69e", + "orange-30": "#ffb784", + "orange-30-hover": "#ff9d57", + "orange-40": "#ff832b", + "orange-40-hover": "#fa6800", + "orange-50": "#eb6200", + "orange-50-hover": "#cc5500", + "orange-60": "#ba4e00", + "orange-60-hover": "#9e4200", + "orange-70": "#8a3800", + "orange-70-hover": "#a84400", + "orange-80": "#5e2900", + "orange-80-hover": "#753300", + "orange-90": "#3e1a00", + "orange-90-hover": "#522200", + "purple-10": "#f6f2ff", + "purple-10-hover": "#ede5ff", + "purple-100": "#1c0f30", + "purple-100-hover": "#341c59", + "purple-20": "#e8daff", + "purple-20-hover": "#dcc7ff", + "purple-30": "#d4bbff", + "purple-30-hover": "#c5a3ff", + "purple-40": "#be95ff", + "purple-40-hover": "#ae7aff", + "purple-50": "#a56eff", + "purple-50-hover": "#9352ff", + "purple-60": "#8a3ffc", + "purple-60-hover": "#7822fb", + "purple-70": "#6929c4", + "purple-70-hover": "#7c3dd6", + "purple-80": "#491d8b", + "purple-80-hover": "#5b24ad", + "purple-90": "#31135e", + "purple-90-hover": "#40197b", + "red-10": "#fff1f1", + "red-10-hover": "#ffe0e0", + "red-100": "#2d0709", + "red-100-hover": "#540d11", + "red-20": "#ffd7d9", + "red-20-hover": "#ffc2c5", + "red-30": "#ffb3b8", + "red-30-hover": "#ff99a0", + "red-40": "#ff8389", + "red-40-hover": "#ff6168", + "red-50": "#fa4d56", + "red-50-hover": "#ee0713", + "red-60": "#da1e28", + "red-60-hover": "#b81922", + "red-70": "#a2191f", + "red-70-hover": "#c21e25", + "red-80": "#750e13", + "red-80-hover": "#921118", + "red-90": "#520408", + "red-90-hover": "#66050a", + "teal-10": "#d9fbfb", + "teal-10-hover": "#acf6f6", + "teal-100": "#081a1c", + "teal-100-hover": "#0f3034", + "teal-20": "#9ef0f0", + "teal-20-hover": "#57e5e5", + "teal-30": "#3ddbd9", + "teal-30-hover": "#25cac8", + "teal-40": "#08bdba", + "teal-40-hover": "#07aba9", + "teal-50": "#009d9a", + "teal-50-hover": "#008a87", + "teal-60": "#007d79", + "teal-60-hover": "#006b68", + "teal-70": "#005d5d", + "teal-70-hover": "#007070", + "teal-80": "#004144", + "teal-80-hover": "#005357", + "teal-90": "#022b30", + "teal-90-hover": "#033940", + "warm-gray-10": "#f7f3f2", + "warm-gray-10-hover": "#f0e8e6", + "warm-gray-100": "#171414", + "warm-gray-100-hover": "#2c2626", + "warm-gray-20": "#e5e0df", + "warm-gray-20-hover": "#d8d0cf", + "warm-gray-30": "#cac5c4", + "warm-gray-30-hover": "#b9b3b1", + "warm-gray-40": "#ada8a8", + "warm-gray-40-hover": "#9c9696", + "warm-gray-50": "#8f8b8b", + "warm-gray-50-hover": "#7f7b7b", + "warm-gray-60": "#726e6e", + "warm-gray-60-hover": "#605d5d", + "warm-gray-70": "#565151", + "warm-gray-70-hover": "#696363", + "warm-gray-80": "#3c3838", + "warm-gray-80-hover": "#4c4848", + "warm-gray-90": "#272525", + "warm-gray-90-hover": "#343232", + "white": "#ffffff", + "white-0": "#ffffff", + "white-hover": "#e8e8e8", + "yellow-10": "#fcf4d6", + "yellow-10-hover": "#f8e6a0", + "yellow-100": "#1c1500", + "yellow-100-hover": "#332600", + "yellow-20": "#fddc69", + "yellow-20-hover": "#fccd27", + "yellow-30": "#f1c21b", + "yellow-30-hover": "#ddb00e", + "yellow-40": "#d2a106", + "yellow-40-hover": "#bc9005", + "yellow-50": "#b28600", + "yellow-50-hover": "#9e7700", + "yellow-60": "#8e6a00", + "yellow-60-hover": "#755800", + "yellow-70": "#684e00", + "yellow-70-hover": "#806000", + "yellow-80": "#483700", + "yellow-80-hover": "#5c4600", + "yellow-90": "#302400", + "yellow-90-hover": "#3d2e00", +} +`; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/config-test.js.snap b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/config-test.js.snap new file mode 100644 index 000000000000..ab8542133525 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/config-test.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@carbon/styles/scss/config Public API 1`] = ` +Object { + "css--default-type": true, + "css--font-face": true, + "css--reset": true, + "font-display": "swap", + "font-path": "~@ibm/plex", + "prefix": "cds", + "use-google-fonts": false, +} +`; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/motion-test.js.snap b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/motion-test.js.snap new file mode 100644 index 000000000000..21bea8b23e7c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/__snapshots__/motion-test.js.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@carbon/styles/scss/motion Public API 1`] = ` +Object { + "functions": Object { + "motion": true, + }, + "mixins": Object { + "motion": true, + }, + "variables": Object { + "duration-fast-01": "70ms", + "duration-fast-02": "110ms", + "duration-moderate-01": "150ms", + "duration-moderate-02": "240ms", + "duration-slow-01": "400ms", + "duration-slow-02": "700ms", + "ease-in": "cubic-bezier(0, 0, 0.38, 0.9)", + "ease-out": "cubic-bezier(0.2, 0, 1, 0.9)", + "easings": Object { + "entrance": Object { + "expressive": "cubic-bezier(0, 0, 0.3, 1)", + "productive": "cubic-bezier(0, 0, 0.38, 0.9)", + }, + "exit": Object { + "expressive": "cubic-bezier(0.4, 0.14, 1, 1)", + "productive": "cubic-bezier(0.2, 0, 1, 0.9)", + }, + "standard": Object { + "expressive": "cubic-bezier(0.4, 0.14, 0.3, 1)", + "productive": "cubic-bezier(0.2, 0, 0.38, 0.9)", + }, + }, + "standard-easing": "cubic-bezier(0.2, 0, 0.38, 0.9)", + "transition--base": "110ms", + "transition--expansion": "240ms", + }, +} +`; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/breakpoint-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/breakpoint-test.js new file mode 100644 index 000000000000..d153eb912c62 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/breakpoint-test.js @@ -0,0 +1,42 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/breakpoint', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../breakpoint'; + + $_: get('api', ( + mixins: ( + breakpoint: meta.mixin-exists('breakpoint', 'breakpoint'), + breakpoint-between: meta.mixin-exists('breakpoint-between', 'breakpoint'), + breakpoint-down: meta.mixin-exists('breakpoint-down', 'breakpoint'), + breakpoint-up: meta.mixin-exists('breakpoint-up', 'breakpoint'), + ), + )); + `); + + const { value: api } = get('api'); + expect(api).toEqual({ + mixins: { + breakpoint: true, + 'breakpoint-between': true, + 'breakpoint-down': true, + 'breakpoint-up': true, + }, + }); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/colors-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/colors-test.js new file mode 100644 index 000000000000..c4af9f2912e7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/colors-test.js @@ -0,0 +1,28 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/colors', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../colors'; + + $_: get('variables', meta.module-variables('colors')); + `); + + // Colors only exports variables at the moment + expect(get('variables').value).toMatchSnapshot(); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/config-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/config-test.js new file mode 100644 index 000000000000..92ab23f05d79 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/config-test.js @@ -0,0 +1,53 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/config', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../config'; + $_: get('variables', meta.module-variables('config')); + `); + + // Config only exports variables at the moment + expect(get('variables').value).toMatchSnapshot(); + }); + + test('overrides', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../config' with ( + $prefix: 'test', + $css--font-face: false, + $css--reset: false, + $css--default-type: false, + ); + + $_: get('config', ( + css--default-type: config.$css--default-type, + css--font-face: config.$css--font-face, + css--reset: config.$css--reset, + prefix: config.$prefix, + )); + `); + + expect(get('config').value).toEqual({ + 'css--default-type': false, + 'css--font-face': false, + 'css--reset': false, + prefix: 'test', + }); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/grid-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/grid-test.js new file mode 100644 index 000000000000..922b0c51b2ef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/grid-test.js @@ -0,0 +1,46 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/grid', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../grid' as *; + + $_: get('api', ( + variables: ( + grid-gutter: meta.variable-exists('grid-gutter'), + grid-breakpoints: meta.variable-exists('grid-breakpoints'), + ), + mixins: ( + css-grid: meta.mixin-exists('css-grid'), + subgrid: meta.mixin-exists('subgrid'), + ), + )); + `); + + const { value: api } = get('api'); + expect(api).toEqual({ + variables: { + 'grid-gutter': true, + 'grid-breakpoints': true, + }, + mixins: { + 'css-grid': true, + subgrid: true, + }, + }); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/layer-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/layer-test.js new file mode 100644 index 000000000000..6acc5991440a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/layer-test.js @@ -0,0 +1,82 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); +const css = require('css'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/layer', () => { + it('should map layer set values to scoped $prefix--layer selectors', async () => { + const { result } = await render(` + @use '../config' with ( + $prefix: 'cds', + ); + @use '../layer' with ( + $layer-sets: ( + field: ( + rgba(0, 0, 0, 0.3), + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0.1), + ), + background: ( + rgba(0, 0, 0, 0.8), + rgba(0, 0, 0, 0.7), + rgba(0, 0, 0, 0.6), + ), + ) + ); + `); + const { stylesheet } = css.parse(result.css.toString()); + + function findSelector(stylesheet, matcher) { + return stylesheet.rules.find((rule) => { + return rule.selectors.some((selector) => { + return selector.includes(matcher); + }); + }); + } + + function findDeclaration(rule, property) { + return rule.declarations.find((declaration) => { + return declaration.property.includes(property); + }); + } + + const root = findSelector(stylesheet, ':root'); + const layer1 = findSelector(stylesheet, '.cds--layer-one'); + const layer2 = findSelector(stylesheet, '.cds--layer-two'); + const layer3 = findSelector(stylesheet, '.cds--layer-three'); + + expect(findDeclaration(root, '--cds-field').value).toBe( + 'rgba(0, 0, 0, 0.3)' + ); + expect(findDeclaration(layer1, '--cds-field').value).toBe( + 'rgba(0, 0, 0, 0.3)' + ); + expect(findDeclaration(layer2, '--cds-field').value).toBe( + 'rgba(0, 0, 0, 0.2)' + ); + expect(findDeclaration(layer3, '--cds-field').value).toBe( + 'rgba(0, 0, 0, 0.1)' + ); + + expect(findDeclaration(layer1, '--cds-background').value).toBe( + 'rgba(0, 0, 0, 0.8)' + ); + expect(findDeclaration(layer2, '--cds-background').value).toBe( + 'rgba(0, 0, 0, 0.7)' + ); + expect(findDeclaration(layer3, '--cds-background').value).toBe( + 'rgba(0, 0, 0, 0.6)' + ); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/motion-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/motion-test.js new file mode 100644 index 000000000000..fa87f516691b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/motion-test.js @@ -0,0 +1,37 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/motion', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../motion'; + + $_: get('api', ( + variables: meta.module-variables('motion'), + functions: ( + motion: meta.function-exists('motion', 'motion'), + ), + mixins: ( + motion: meta.mixin-exists('motion', 'motion'), + ), + )); + `); + + const { value: api } = get('api'); + + expect(api).toMatchSnapshot(); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/reset-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/reset-test.js new file mode 100644 index 000000000000..1250ec6513ee --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/reset-test.js @@ -0,0 +1,28 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/reset', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../reset'; + + $_: get('mixin', meta.mixin-exists('reset', 'reset')); + `); + + const { value: mixin } = get('mixin'); + expect(mixin).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/theme-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/theme-test.js new file mode 100644 index 000000000000..8b06326ac3f5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/theme-test.js @@ -0,0 +1,151 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/theme', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../theme'; + + $_: get('api', ( + variables: map.keys(meta.module-variables('theme')), + mixins: ( + theme: meta.mixin-exists('theme', 'theme'), + ), + )); + `); + + const { value: api } = get('api'); + expect(api.mixins).toEqual({ + theme: true, + }); + expect(api.variables).toMatchInlineSnapshot(` + Array [ + "fallback", + "theme", + "background", + "background-active", + "background-selected", + "background-selected-hover", + "background-hover", + "background-brand", + "background-inverse", + "background-inverse-hover", + "layer-01", + "layer-active-01", + "layer-hover-01", + "layer-selected-01", + "layer-selected-hover-01", + "layer-02", + "layer-active-02", + "layer-hover-02", + "layer-selected-02", + "layer-selected-hover-02", + "layer-03", + "layer-active-03", + "layer-hover-03", + "layer-selected-03", + "layer-selected-hover-03", + "layer-selected-inverse", + "layer-selected-disabled", + "layer-accent-01", + "layer-accent-active-01", + "layer-accent-hover-01", + "layer-accent-02", + "layer-accent-active-02", + "layer-accent-hover-02", + "layer-accent-03", + "layer-accent-active-03", + "layer-accent-hover-03", + "field-01", + "field-hover-01", + "field-02", + "field-hover-02", + "field-03", + "field-hover-03", + "interactive", + "border-subtle-00", + "border-subtle-01", + "border-subtle-selected-01", + "border-subtle-02", + "border-subtle-selected-02", + "border-subtle-03", + "border-subtle-selected-03", + "border-strong-01", + "border-strong-02", + "border-strong-03", + "border-inverse", + "border-interactive", + "border-disabled", + "text-primary", + "text-secondary", + "text-placeholder", + "text-helper", + "text-error", + "text-inverse", + "text-on-color", + "text-on-color-disabled", + "text-disabled", + "link-primary", + "link-primary-hover", + "link-secondary", + "link-visited", + "link-inverse", + "link-inverse-active", + "link-inverse-hover", + "icon-primary", + "icon-secondary", + "icon-inverse", + "icon-on-color", + "icon-on-color-disabled", + "icon-disabled", + "support-error", + "support-success", + "support-warning", + "support-info", + "support-error-inverse", + "support-success-inverse", + "support-warning-inverse", + "support-info-inverse", + "support-caution-major", + "support-caution-minor", + "support-caution-undefined", + "highlight", + "overlay", + "toggle-off", + "shadow", + "focus", + "focus-inset", + "focus-inverse", + "skeleton-background", + "skeleton-element", + "layer", + "layer-active", + "layer-hover", + "layer-selected", + "layer-selected-hover", + "layer-accent", + "layer-accent-hover", + "layer-accent-active", + "field", + "field-hover", + "border-subtle", + "border-subtle-selected", + "border-strong", + ] + `); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/themes-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/themes-test.js new file mode 100644 index 000000000000..1cecf85464e0 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/themes-test.js @@ -0,0 +1,36 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/themes', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../themes'; + + $_: get('api', map.keys(meta.module-variables('themes'))); + `); + + const { value: api } = get('api'); + expect(api).toMatchInlineSnapshot(` + Array [ + "white", + "g10", + "g90", + "g100", + ] + `); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/type-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/type-test.js new file mode 100644 index 000000000000..033f99697816 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/__tests__/type-test.js @@ -0,0 +1,78 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/type', () => { + test('Public API', async () => { + const { get } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../type'; + + $_: get('api', ( + variables: map.keys(meta.module-variables('type')), + mixins: ( + reset: meta.mixin-exists('reset', 'type'), + type-style: meta.mixin-exists('type-style', 'type'), + font-family: meta.mixin-exists('font-family', 'type'), + default-type: meta.mixin-exists('default-type', 'type'), + ), + )); + `); + + const { value: api } = get('api'); + expect(api.mixins).toEqual({ + reset: true, + 'type-style': true, + 'font-family': true, + 'default-type': true, + }); + expect(api.variables).toMatchInlineSnapshot(` + Array [ + "caption-01", + "label-01", + "helper-text-01", + "body-short-01", + "body-short-02", + "body-long-01", + "body-long-02", + "code-01", + "code-02", + "heading-01", + "heading-02", + "productive-heading-01", + "productive-heading-02", + "productive-heading-03", + "productive-heading-04", + "productive-heading-05", + "productive-heading-06", + "productive-heading-07", + "expressive-paragraph-01", + "expressive-heading-01", + "expressive-heading-02", + "expressive-heading-03", + "expressive-heading-04", + "expressive-heading-05", + "expressive-heading-06", + "quotation-01", + "quotation-02", + "display-01", + "display-02", + "display-03", + "display-04", + "tokens", + ] + `); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_breakpoint.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_breakpoint.scss new file mode 100644 index 000000000000..887392d69d9c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_breakpoint.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/grid/scss/modules/breakpoint' + show breakpoint, breakpoint-between, breakpoint-down, breakpoint-up; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_colors.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_colors.scss new file mode 100644 index 000000000000..69b65d4625db --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_colors.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/colors'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_config.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_config.scss new file mode 100644 index 000000000000..b58928049541 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_config.scss @@ -0,0 +1,50 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// If true, includes font face mixins from scss/fonts +/// @access public +/// @type Bool +/// @group config +$css--font-face: true !default; + +/// If true, include reset CSS +/// @access public +/// @type Bool +/// @group config +$css--reset: true !default; + +/// If true, include default type +/// @access public +/// @type Bool +/// @group config +$css--default-type: true !default; + +/// Specify the default value for the `font-display` property used for fonts +/// loaded with @font-face +/// @access public +/// @type String +/// @group config +$font-display: 'swap' !default; + +/// Specify the base path for loading IBM Plex +/// @access public +/// @type String +/// @group config +$font-path: '~@ibm/plex' !default; + +/// Specify if IBM Plex should be provided by Google Fonts +/// @access public +/// @type String +/// @group config +$use-google-fonts: false !default; + +/// The value used to prefix selectors and CSS Custom Properties across the +/// codebase +/// @access public +/// @type String +/// @group config +$prefix: 'cds' !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_feature-flags.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_feature-flags.scss new file mode 100644 index 000000000000..ddbce6c05d72 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_feature-flags.scss @@ -0,0 +1,15 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/feature-flags' with ( + $feature-flags: ( + 'enable-css-custom-properties': true, + 'enable-use-controlled-state-with-value': true, + 'enable-css-grid': true, + 'enable-v11-release': true, + ) !default +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_grid.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_grid.scss new file mode 100644 index 000000000000..20af0bccdeec --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_grid.scss @@ -0,0 +1,20 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'config'; + +@forward '@carbon/grid' + show css-grid, + subgrid, + $grid-gutter, + $grid-gutter-condensed, + $grid-breakpoints + with ( + $prefix: config.$prefix + ); + +@use '@carbon/grid'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_layer.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_layer.scss new file mode 100644 index 000000000000..f314517c651d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_layer.scss @@ -0,0 +1,112 @@ +// +// Copyright IBM Corp. 2021 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:list'; +@use 'sass:map'; +@use './config' as *; +@use './theme'; +@use './utilities/custom-property'; + +$-default-layer-sets: ( + layer: ( + theme.$layer-01, + theme.$layer-02, + theme.$layer-03, + ), + layer-active: ( + theme.$layer-active-01, + theme.$layer-active-02, + theme.$layer-active-03, + ), + layer-hover: ( + theme.$layer-hover-01, + theme.$layer-hover-02, + theme.$layer-hover-03, + ), + layer-selected: ( + theme.$layer-selected-01, + theme.$layer-selected-02, + theme.$layer-selected-03, + ), + layer-selected-hover: ( + theme.$layer-selected-hover-01, + theme.$layer-selected-hover-02, + theme.$layer-selected-hover-03, + ), + layer-accent: ( + theme.$layer-accent-01, + theme.$layer-accent-02, + theme.$layer-accent-03, + ), + layer-accent-hover: ( + theme.$layer-accent-hover-01, + theme.$layer-accent-hover-02, + theme.$layer-accent-hover-03, + ), + layer-accent-active: ( + theme.$layer-accent-active-01, + theme.$layer-accent-active-02, + theme.$layer-accent-active-03, + ), + field: ( + theme.$field-01, + theme.$field-02, + theme.$field-03, + ), + field-hover: ( + theme.$field-hover-01, + theme.$field-hover-02, + theme.$field-hover-03, + ), + border-subtle: ( + theme.$border-subtle-01, + theme.$border-subtle-02, + theme.$border-subtle-03, + ), + border-subtle-selected: ( + theme.$border-subtle-selected-01, + theme.$border-subtle-selected-02, + theme.$border-subtle-selected-03, + ), + border-strong: ( + theme.$border-strong-01, + theme.$border-strong-02, + theme.$border-strong-03, + ), +); + +/// Define a map of layer sets, each set should have values for each layer in +/// the application. The key of this map is used for the CSS Custom Property +/// name whose value is updated as more layers are added. +/// @type {Map} +$layer-sets: () !default; +$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets); + +/// Emit the layer tokens defined in $layer-sets for the given $level +/// @param {Number} $level +@mixin -emit-layer-tokens($level) { + @each $key, $layer-set in $layer-sets { + $value: list.nth($layer-set, $level); + @include custom-property.declaration($key, $value); + } +} + +:root { + @include -emit-layer-tokens(1); +} + +.#{$prefix}--layer-one { + @include -emit-layer-tokens(1); +} + +.#{$prefix}--layer-two { + @include -emit-layer-tokens(2); +} + +.#{$prefix}--layer-three { + @include -emit-layer-tokens(3); +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_motion.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_motion.scss new file mode 100644 index 000000000000..08e6f75faf3c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_motion.scss @@ -0,0 +1,67 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/motion'; +@use '@carbon/motion'; + +/// Used primarily for removing elements from the screen +/// @type Function +/// @access public +/// @group global-motion +$ease-in: cubic-bezier(0.25, 0, 1, 1); + +/// Used for adding elements to the screen or changing on-screen states at a user's input +/// @type Function +/// @access public +/// @group global-motion +$ease-out: cubic-bezier(0, 0, 0.25, 1); + +/// Used for the majority of animations +/// @type Function +/// @access public +/// @group global-motion +$standard-easing: cubic-bezier(0.5, 0, 0.1, 1); + +/// Base transition duration +/// @type Number +/// @access public +/// @group global-motion +$transition--base: 250ms; + +/// Expansion duration +/// @type Number +/// @access public +/// @group global-motion +$transition--expansion: 300ms; + +/// Default ease-in for components +/// @access public +/// @type Function +/// @group global-motion +$ease-in: cubic-bezier(0, 0, 0.38, 0.9); + +/// Default ease-out for components +/// @access public +/// @type Function +/// @group global-motion +$ease-out: cubic-bezier(0.2, 0, 1, 0.9); + +/// Default easing for components +/// @access public +/// @type Function +/// @group global-motion +$standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9); + +/// @access public +/// @group global-motion +/// @alias duration--fast-02 +$transition--base: motion.$duration-fast-02; + +/// @access public +/// @group global-motion +/// @alias duration--moderate-02 +$transition--expansion: motion.$duration-moderate-02; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_reset.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_reset.scss new file mode 100644 index 000000000000..174333e27aaf --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_reset.scss @@ -0,0 +1,172 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'config'; +@use 'type'; + +@mixin reset { + /// http://meyerweb.com/eric/tools/css/reset/ + /// v2.0 | 20110126 + /// License: none (public domain) + /// Start vendor reset + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + padding: 0; + border: 0; + margin: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; + } + + /* HTML5 display-role reset for older browsers */ + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + + body { + line-height: 1; + } + + ol, + ul { + list-style: none; + } + + blockquote, + q { + quotes: none; + } + + blockquote::before, + blockquote::after, + q::before, + q::after { + content: ''; + // stylelint-disable-next-line declaration-block-no-duplicate-properties + content: none; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + /// End vendor reset + + html { + box-sizing: border-box; + } + + *, + *::before, + *::after { + box-sizing: inherit; + } + + @include type.reset(); + + /// Makes SVGs accessible in high contrast mode + /// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345 + @media screen and (-ms-high-contrast: active) { + svg { + fill: ButtonText; + } + } +} + +@if config.$css--reset == true { + @include reset; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_spacing.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_spacing.scss new file mode 100644 index 000000000000..6eb1c72f8012 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_spacing.scss @@ -0,0 +1,27 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/layout/scss/modules/spacing' +show + $spacing, + $spacing-01, + $spacing-02, + $spacing-03, + $spacing-04, + $spacing-05, + $spacing-06, + $spacing-07, + $spacing-08, + $spacing-09, + $spacing-10, + $spacing-11, + $spacing-12, + $spacing-13, + $fluid-spacing-01, + $fluid-spacing-02, + $fluid-spacing-03, + $fluid-spacing-04; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_theme.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_theme.scss new file mode 100644 index 000000000000..5215b7de5649 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_theme.scss @@ -0,0 +1,38 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use './config' as *; +@use '@carbon/themes/scss/modules/config' with ( + $prefix: $prefix, +); +@use './compat/themes' as compat; +@use './themes'; + +@forward '@carbon/themes/scss/modules/theme' with ( + $fallback: themes.$white !default, + $theme: compat.$white !default, +); +@forward '@carbon/themes/scss/modules/tokens'; +@use '@carbon/themes/scss/modules/tokens'; +@use './utilities/custom-property'; + +// Layer sets +$layer: custom-property.get-var('layer'); +$layer-active: custom-property.get-var('layer-active'); +$layer-hover: custom-property.get-var('layer-hover'); +$layer-selected: custom-property.get-var('layer-selected'); +$layer-selected-hover: custom-property.get-var('layer-selected-hover'); +$layer-accent: custom-property.get-var('layer-accent'); +$layer-accent-hover: custom-property.get-var('layer-accent-hover'); +$layer-accent-active: custom-property.get-var('layer-accent-active'); + +$field: custom-property.get-var('field'); +$field-hover: custom-property.get-var('field-hover'); + +$border-subtle: custom-property.get-var('border-subtle'); +$border-subtle-selected: custom-property.get-var('border-subtle-selected'); +$border-strong: custom-property.get-var('border-strong'); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_themes.scss new file mode 100644 index 000000000000..0068517026af --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_themes.scss @@ -0,0 +1,8 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/themes/scss/modules/themes' show $white, $g10, $g90, $g100; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_type.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_type.scss new file mode 100644 index 000000000000..7f6dcacde295 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_type.scss @@ -0,0 +1,49 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'config'; +@forward '@carbon/type' show + // Mixins + reset, + type-style, + font-family, + default-type, + type-classes, + + // Variables + $caption-01, + $label-01, + $helper-text-01, + $body-short-01, + $body-short-02, + $body-long-01, + $body-long-02, + $code-01, + $code-02, + $heading-01, + $heading-02, + $productive-heading-01, + $productive-heading-02, + $productive-heading-03, + $productive-heading-04, + $productive-heading-05, + $productive-heading-06, + $productive-heading-07, + $expressive-paragraph-01, + $expressive-heading-01, + $expressive-heading-02, + $expressive-heading-03, + $expressive-heading-04, + $expressive-heading-05, + $expressive-heading-06, + $quotation-01, + $quotation-02, + $display-01, + $display-02, + $display-03, + $display-04, + $tokens; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_zone.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_zone.scss new file mode 100644 index 000000000000..611ac0bcc197 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/_zone.scss @@ -0,0 +1,35 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use 'sass:meta'; +@use './config'; +@use './themes'; +@use './theme'; +// Inline themes depend on layer styles to property reset the layer level +@use './layer'; +@use './utilities/custom-property'; + +/// Specify a Map of zones where the key will be used as part of the selector +/// and the value will be a map used to emit CSS Custom Properties for all color +/// values +$zones: ( + white: themes.$white, + g10: themes.$g10, + g90: themes.$g90, + g100: themes.$g100, +) !default; + +@each $name, $theme in $zones { + .#{config.$prefix}--#{'' + $name} { + @each $key, $value in $theme { + @if type-of($value) == color { + @include custom-property.declaration($key, $value); + } + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_theme.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_theme.scss new file mode 100644 index 000000000000..e8304438c5f5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_theme.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '../theme'; +@forward '@carbon/themes/scss/compat/tokens'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_themes.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_themes.scss new file mode 100644 index 000000000000..746f50be1316 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/compat/_themes.scss @@ -0,0 +1,35 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use '@carbon/themes/scss/compat/themes' as compat; +@use '../themes'; + +// For our compatability themes, we will merge the themes from v10 and v11 and +// provide this combination as one of our four default themes. +// +// This is useful for situations where a user is trying to use the compatability +// theme, for example: +// +// ```scss +// @use '@carbon/styles/scss/reset'; +// @use '@carbon/styles/scss/compat/themes'; +// @use '@carbon/styles/scss/compat/theme' with ( +// $theme: themes.$g100 +// ); +// ``` +// +// Without merging these themes, then the value of a token in v11 would default +// to our $white theme. As a result, the user would need to specify both the +// `$theme` and the `$fallback` to the `scss/compat/theme` module. +// +// Now that we merge the themes, this code snippet will function as expected. + +$white: map.merge(themes.$white, compat.$white); +$g10: map.merge(themes.$g10, compat.$g10); +$g90: map.merge(themes.$g90, compat.$g90); +$g100: map.merge(themes.$g100, compat.$g100); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/accordion-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/accordion-test.js new file mode 100644 index 000000000000..630c5a0b10e0 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/accordion-test.js @@ -0,0 +1,47 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/accordion', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../accordion'; + + $_: get('mixin', meta.mixin-exists('accordion', 'accordion')); + $_: get('variables', map.keys(meta.module-variables('accordion'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` + Array [ + "flex-direction", + "justify-content", + "arrow-margin", + "title-margin", + "content-padding", + ] + `); + }); + + test('configuration', async () => { + const { unwrap } = await render(` + @use '../accordion' with ( + $flex-direction: row, + ); + $_: get('direction', accordion.$flex-direction); + `); + expect(unwrap('direction')).toBe('row'); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/breadcrumb-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/breadcrumb-test.js new file mode 100644 index 000000000000..196b905670fd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/breadcrumb-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/breadcrumb', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../breadcrumb'; + + $_: get('mixin', meta.mixin-exists('breadcrumb', 'breadcrumb')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/button-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/button-test.js new file mode 100644 index 000000000000..a124c975d970 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/button-test.js @@ -0,0 +1,71 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/button', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../button'; + + $_: get('mixin', meta.mixin-exists('button', 'button')); + $_: get('variables', map.keys(meta.module-variables('button'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` +Array [ + "button-font-weight", + "button-font-size", + "button-border-radius", + "button-height", + "button-padding", + "button-padding-field", + "button-padding-sm", + "button-padding-lg", + "button-padding-ghost", + "button-padding-ghost-field", + "button-padding-ghost-sm", + "button-border-width", + "button-outline-width", + "button-separator", + "button-primary", + "button-secondary", + "button-tertiary", + "button-danger-primary", + "button-danger-secondary", + "button-danger-active", + "button-primary-active", + "button-secondary-active", + "button-tertiary-active", + "button-danger-hover", + "button-primary-hover", + "button-secondary-hover", + "button-tertiary-hover", + "button-disabled", + "button-tokens", +] +`); + }); + + test('configuration', async () => { + const { unwrap } = await render(` + @use '../button' with ( + $button-height: 2rem, + ); + $_: get('height', button.$button-height); + `); + expect(unwrap('height')).toBe('2rem'); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/checkbox-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/checkbox-test.js new file mode 100644 index 000000000000..8ba6581aa680 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/checkbox-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/checkbox', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../checkbox'; + + $_: get('mixin', meta.mixin-exists('checkbox', 'checkbox')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/code-snippet-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/code-snippet-test.js new file mode 100644 index 000000000000..c623c9cd9781 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/code-snippet-test.js @@ -0,0 +1,44 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/code-snippet', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../code-snippet'; + + $_: get('mixin', meta.mixin-exists('code-snippet', 'code-snippet')); + $_: get('variables', map.keys(meta.module-variables('code-snippet'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` + Array [ + "copy-active", + "copy-btn-feedback", + ] + `); + }); + + test('configuration', async () => { + const { unwrap } = await render(` + @use '../code-snippet' with ( + $copy-active: #000, + ); + $_: get('background-color', code-snippet.$copy-active); + `); + expect(unwrap('background-color')).toBe('#000'); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/combo-box-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/combo-box-test.js new file mode 100644 index 000000000000..185ae5b07a9b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/combo-box-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/combo-box', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../combo-box'; + + $_: get('mixin', meta.mixin-exists('combo-box', 'combo-box')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/content-switcher-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/content-switcher-test.js new file mode 100644 index 000000000000..d087dac2c62d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/content-switcher-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/content-switcher', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../content-switcher'; + + $_: get('mixin', meta.mixin-exists('content-switcher', 'content-switcher')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/copy-button-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/copy-button-test.js new file mode 100644 index 000000000000..4a027b932f0b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/copy-button-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/copy-button', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../copy-button'; + + $_: get('mixin', meta.mixin-exists('copy-button', 'copy-button')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/data-table-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/data-table-test.js new file mode 100644 index 000000000000..7cad9cdbac2f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/data-table-test.js @@ -0,0 +1,85 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/data-table', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../data-table'; + + $_: get('mixin', meta.mixin-exists('data-table', 'data-table')); + $_: get('variables', map.keys(meta.module-variables('data-table'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` + Array [ + "data-table-column-hover", + ] + `); + }); +}); + +describe('scss/components/data-table/action', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../data-table/action'; + + $_: get('mixin', meta.mixin-exists('data-table-action', 'action')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); + +describe('scss/components/data-table/expandable', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../data-table/expandable'; + + $_: get('mixin', meta.mixin-exists('data-table-expandable', 'expandable')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); + +describe('scss/components/data-table/skeleton', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../data-table/skeleton'; + + $_: get('mixin', meta.mixin-exists('data-table-skeleton', 'skeleton')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); + +describe('scss/components/data-table/sort', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../data-table/sort'; + + $_: get('mixin', meta.mixin-exists('data-table-sort', 'sort')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/date-picker-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/date-picker-test.js new file mode 100644 index 000000000000..505604af9d92 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/date-picker-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/date-picker', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../date-picker'; + + $_: get('mixin', meta.mixin-exists('date-picker', 'date-picker')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/dropdown-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/dropdown-test.js new file mode 100644 index 000000000000..e392215303f2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/dropdown-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/dropdown', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../dropdown'; + + $_: get('mixin', meta.mixin-exists('dropdown', 'dropdown')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/file-uploader.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/file-uploader.js new file mode 100644 index 000000000000..35e4eb06073c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/file-uploader.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/file-uploader', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../file-uploader'; + + $_: get('mixin', meta.mixin-exists('file-uploader', 'file-uploader')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/form-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/form-test.js new file mode 100644 index 000000000000..2e384a903434 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/form-test.js @@ -0,0 +1,43 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/form', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../form'; + + $_: get('mixin', meta.mixin-exists('form', 'form')); + $_: get('variables', map.keys(meta.module-variables('form'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` + Array [ + "input-label-weight", + ] + `); + }); + + test('configuration', async () => { + const { unwrap } = await render(` + @use '../form' with ( + $input-label-weight: 600, + ); + $_: get('font-weight', form.$input-label-weight); + `); + expect(unwrap('font-weight')).toBe(600); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/inline-loading-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/inline-loading-test.js new file mode 100644 index 000000000000..5b5f8e23c815 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/inline-loading-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/inline-loading', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../inline-loading'; + + $_: get('mixin', meta.mixin-exists('inline-loading', 'inline-loading')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/link-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/link-test.js new file mode 100644 index 000000000000..ac212fe9edef --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/link-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/link', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../link'; + + $_: get('mixin', meta.mixin-exists('link', 'link')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-box-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-box-test.js new file mode 100644 index 000000000000..302aa57d14fe --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-box-test.js @@ -0,0 +1,36 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/list-box', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../list-box'; + + $_: get('mixin', meta.mixin-exists('list-box', 'list-box')); + $_: get('variables', map.keys(meta.module-variables('list-box'))); + `); + expect(unwrap('mixin')).toBe(true); + expect(unwrap('variables')).toMatchInlineSnapshot(` + Array [ + "list-box-width", + "list-box-height", + "list-box-inline-height", + "list-box-menu-width", + ] + `); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-test.js new file mode 100644 index 000000000000..7bc2de5d9685 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/list-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/list', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../list'; + + $_: get('mixin', meta.mixin-exists('list', 'list')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/loading-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/loading-test.js new file mode 100644 index 000000000000..e56619cc749f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/loading-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/loading', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../loading'; + + $_: get('mixin', meta.mixin-exists('loading', 'loading')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/menu-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/menu-test.js new file mode 100644 index 000000000000..72a29b6c30e3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/menu-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/menu', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../menu'; + + $_: get('mixin', meta.mixin-exists('menu', 'menu')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/modal-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/modal-test.js new file mode 100644 index 000000000000..530d38702097 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/modal-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/modal', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../modal'; + + $_: get('mixin', meta.mixin-exists('modal', 'modal')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/multiselect-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/multiselect-test.js new file mode 100644 index 000000000000..9aff71f0a068 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/multiselect-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/multiselect', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../multiselect'; + + $_: get('mixin', meta.mixin-exists('multiselect', 'multiselect')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/notification-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/notification-test.js new file mode 100644 index 000000000000..5f4210505c1f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/notification-test.js @@ -0,0 +1,49 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/notification', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../notification'; + + $_: get('mixins', ( + toast-notification: meta.mixin-exists('toast-notification', 'notification'), + inline-notification: meta.mixin-exists('inline-notification', 'notification'), + )); + + $_: get('tokens', map.keys(meta.module-variables('notification'))); + `); + + expect(unwrap('mixins')).toEqual({ + 'toast-notification': true, + 'inline-notification': true, + }); + expect(unwrap('tokens')).toEqual([ + 'notification-background-error', + 'notification-background-success', + 'notification-background-info', + 'notification-background-warning', + 'notification-action-hover', + 'notification-action-tertiary-inverse', + 'notification-action-tertiary-inverse-active', + 'notification-action-tertiary-inverse-hover', + 'notification-action-tertiary-inverse-text', + 'notification-action-tertiary-inverse-text-on-color-disabled', + 'notification-tokens', + ]); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/number-input-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/number-input-test.js new file mode 100644 index 000000000000..01811005979e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/number-input-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/number-input', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../number-input'; + + $_: get('mixin', meta.mixin-exists('number-input', 'number-input')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/overflow-menu-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/overflow-menu-test.js new file mode 100644 index 000000000000..1d0d6d827789 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/overflow-menu-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/overflow-menu', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../overflow-menu'; + + $_: get('mixin', meta.mixin-exists('overflow-menu', 'overflow-menu')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-nav-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-nav-test.js new file mode 100644 index 000000000000..9fed68ef938e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-nav-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/pagination-nav', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../pagination-nav'; + + $_: get('mixin', meta.mixin-exists('pagination-nav', 'pagination-nav')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-test.js new file mode 100644 index 000000000000..1818eb2b6ff9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/pagination-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/pagination', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../pagination'; + + $_: get('mixin', meta.mixin-exists('pagination', 'pagination')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-bar-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-bar-test.js new file mode 100644 index 000000000000..1e7b87fd852d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-bar-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/progress-bar', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../progress-bar'; + + $_: get('mixin', meta.mixin-exists('progress-bar', 'progress-bar')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-indicator-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-indicator-test.js new file mode 100644 index 000000000000..ae5ad740c980 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/progress-indicator-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/progress-indicator', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../progress-indicator'; + + $_: get('mixin', meta.mixin-exists('progress-indicator', 'progress-indicator')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/radio-button-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/radio-button-test.js new file mode 100644 index 000000000000..704239b9dc4c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/radio-button-test.js @@ -0,0 +1,25 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/radio-button', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../radio-button/radio-button'; + $_: get('mixin', meta.mixin-exists('radio-button', 'radio-button')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/search-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/search-test.js new file mode 100644 index 000000000000..ebd40c2e7caf --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/search-test.js @@ -0,0 +1,25 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/search', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../search'; + $_: get('mixin', meta.mixin-exists('search', 'search')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/select-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/select-test.js new file mode 100644 index 000000000000..79a68188a882 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/select-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/select', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../select'; + + $_: get('mixin', meta.mixin-exists('select', 'select')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/skeleton-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/skeleton-test.js new file mode 100644 index 000000000000..7dd3f1a29396 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/skeleton-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/skeleton-styles', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../skeleton-styles'; + + $_: get('mixin', meta.mixin-exists('skeleton-styles', 'skeleton-styles')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/slider-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/slider-test.js new file mode 100644 index 000000000000..74459aae3bc0 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/slider-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/slider', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../slider'; + + $_: get('mixin', meta.mixin-exists('slider', 'slider')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/structured-list-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/structured-list-test.js new file mode 100644 index 000000000000..64a65ef25212 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/structured-list-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/structured-list', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../structured-list'; + + $_: get('mixin', meta.mixin-exists('structured-list', 'structured-list')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tabs-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tabs-test.js new file mode 100644 index 000000000000..8aefc6cbc4cc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tabs-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/tabs', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../tabs'; + + $_: get('mixin', meta.mixin-exists('tabs', 'tabs')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tag-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tag-test.js new file mode 100644 index 000000000000..e9a25d746089 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tag-test.js @@ -0,0 +1,25 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/tag', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../tag/tag'; + $_: get('mixin', meta.mixin-exists('tag', 'tag')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-area-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-area-test.js new file mode 100644 index 000000000000..2162b85e64a3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-area-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/text-area', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../text-area'; + + $_: get('mixin', meta.mixin-exists('text-area', 'text-area')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-input-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-input-test.js new file mode 100644 index 000000000000..cbf607593877 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/text-input-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/text-input', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../text-input'; + + $_: get('mixin', meta.mixin-exists('text-input', 'text-input')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tile-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tile-test.js new file mode 100644 index 000000000000..ecdf72cb3014 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tile-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/tile', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../tile'; + + $_: get('mixin', meta.mixin-exists('tile', 'tile')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/time-picker-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/time-picker-test.js new file mode 100644 index 000000000000..cdc2826faa5d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/time-picker-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/time-picker', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../time-picker'; + + $_: get('mixin', meta.mixin-exists('time-picker', 'time-picker')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/toggle-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/toggle-test.js new file mode 100644 index 000000000000..b072fca364dd --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/toggle-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/toggle', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../toggle'; + + $_: get('mixin', meta.mixin-exists('toggle', 'toggle')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tooltip-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tooltip-test.js new file mode 100644 index 000000000000..3958b6c4d42d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/tooltip-test.js @@ -0,0 +1,25 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/tooltip', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../tooltip/tooltip'; + $_: get('mixin', meta.mixin-exists('tooltip', 'tooltip')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/treeview-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/treeview-test.js new file mode 100644 index 000000000000..99b6715dd069 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/treeview-test.js @@ -0,0 +1,25 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/treeview', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../treeview'; + $_: get('mixin', meta.mixin-exists('treeview', 'treeview')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/ui-shell-test.js b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/ui-shell-test.js new file mode 100644 index 000000000000..55e6d1ba62f8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/__tests__/ui-shell-test.js @@ -0,0 +1,27 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/ui-shell', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../ui-shell'; + + $_: get('mixin', meta.mixin-exists('ui-shell', 'ui-shell')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/_index.scss new file mode 100644 index 000000000000..cca88e0e5936 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/_index.scss @@ -0,0 +1,58 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'accordion'; +@use 'breadcrumb'; +@use 'button'; +@use 'checkbox'; +@use 'code-snippet'; +@use 'combo-box'; +@use 'content-switcher'; +@use 'copy-button'; +@use 'data-table'; +@use 'data-table/action'; +@use 'data-table/expandable'; +@use 'data-table/skeleton'; +@use 'data-table/sort'; +@use 'date-picker'; +@use 'dropdown'; +@use 'file-uploader'; +@use 'form'; +@use 'inline-loading'; +@use 'link'; +@use 'list'; +@use 'list-box'; +@use 'loading'; +@use 'menu'; +@use 'modal'; +@use 'multiselect'; +@use 'notification'; +@use 'number-input'; +@use 'overflow-menu'; +@use 'pagination'; +@use 'pagination-nav'; +@use 'popover'; +@use 'progress-bar'; +@use 'progress-indicator'; +@use 'radio-button'; +@use 'search'; +@use 'select'; +@use 'skeleton-styles'; +@use 'slider'; +@use 'stack'; +@use 'structured-list'; +@use 'tabs'; +@use 'tag'; +@use 'text-area'; +@use 'text-input'; +@use 'tile'; +@use 'time-picker'; +@use 'toggletip'; +@use 'toggle'; +@use 'tooltip'; +@use 'treeview'; +@use 'ui-shell'; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_accordion.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_accordion.scss new file mode 100644 index 000000000000..55dc1123ffd8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_accordion.scss @@ -0,0 +1,309 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../breakpoint' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../theme' as *; +@use '../../spacing' as *; +@use '../../type' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/component-reset'; +@use '../../utilities/convert'; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; + +/// @type Value +/// @access public +/// @group accordion +$flex-direction: row-reverse !default; + +/// @type Value +/// @access public +/// @group accordion +$justify-content: flex-start !default; + +/// @type Value +/// @access public +/// @group accordion +$arrow-margin: 2px $spacing-05 0 0 !default; + +/// @type Value +/// @access public +/// @group accordion +$title-margin: 0 0 0 $spacing-05 !default; + +/// @type Value +/// @access public +/// @group accordion +$content-padding: 0 0 0 $spacing-05 !default; + +@mixin accordion { + .#{$prefix}--accordion { + @include component-reset.reset; + + width: 100%; + list-style: none; + } + + .#{$prefix}--accordion__item { + overflow: visible; + border-top: 1px solid $border-subtle; + transition: all $duration-fast-02 motion(standard, productive); + + &:last-child { + border-bottom: 1px solid $border-subtle; + } + } + + .#{$prefix}--accordion__heading { + @include button-reset.reset; + + position: relative; + display: flex; + width: 100%; + min-height: convert.rem(40px); + flex-direction: $flex-direction; + align-items: flex-start; + justify-content: $justify-content; + padding: convert.rem(10px) 0; + margin: 0; + color: $text-primary; + cursor: pointer; + transition: background-color motion(standard, productive) $duration-fast-02; + + &:hover::before, + &:focus::before { + position: absolute; + top: -1px; + left: 0; + width: 100%; + height: calc(100% + 2px); + content: ''; + } + + &:hover::before { + background-color: $layer-hover; + } + + &:focus { + outline: none; + } + + &:focus::before { + @include focus-outline('outline-compat'); + } + } + + // Size styles + .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading { + min-height: convert.rem(48px); + } + + .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading { + min-height: convert.rem(32px); + padding: convert.rem(5px) 0; + } + + // Disabled styles + .#{$prefix}--accordion__heading[disabled] { + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow { + fill: $icon-disabled; + } + + .#{$prefix}--accordion__heading[disabled]:hover::before { + background-color: transparent; + } + + .#{$prefix}--accordion__item--disabled, + .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item { + // v10 icon doesn't have 1:1 translation, keeping color same as enabled state + // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147 + border-top: 1px solid $border-subtle; + } + + li.#{$prefix}--accordion__item--disabled:last-of-type { + // v10 icon doesn't have 1:1 translation, keeping color same as enabled state + // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147 + border-bottom: 1px solid $border-subtle; + } + + .#{$prefix}--accordion__arrow { + @include focus-outline('reset'); + + width: 1rem; + height: 1rem; + // Without flex basis and flex shrink being set here, our icon width can go + // <16px and cause the icon to render in the incorrect artboard size + flex: 0 0 1rem; + margin: $arrow-margin; + fill: $icon-primary; + transform: rotate(-270deg) #{'/*rtl:ignore*/'}; + transition: all $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--accordion__title { + @include type-style('body-long-01'); + + z-index: 1; + width: 100%; + margin: $title-margin; + text-align: left; + } + + .#{$prefix}--accordion__content { + display: none; + padding-right: $spacing-05; + padding-left: $spacing-05; + // Transition property for when the accordion closes + transition: padding motion(standard, productive) $duration-fast-02; + + // Custom breakpoints based on issue #4993 + @include breakpoint-up(480px) { + padding-right: $spacing-09; + } + + @include breakpoint-up(640px) { + padding-right: 25%; + } + + > p { + @include type-style('body-long-01'); + } + } + + .#{$prefix}--accordion--start .#{$prefix}--accordion__heading { + // Reverse `$flex-direction` token: + flex-direction: row; + } + + .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow { + // Alters `$arrow-margin` token: + margin: 2px 0 0 $spacing-05; + } + + .#{$prefix}--accordion--start .#{$prefix}--accordion__title { + margin-right: $spacing-05; + } + + .#{$prefix}--accordion--start .#{$prefix}--accordion__content { + margin-left: $spacing-07; + } + + .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content, + .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content { + display: block; + } + + @keyframes collapse-accordion { + 0% { + @include -content-visible; + } + 100% { + @include -content-hidden; + } + } + + @keyframes expand-accordion { + 0% { + @include -content-hidden; + } + 100% { + @include -content-visible; + } + } + + .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content { + animation: $duration-fast-02 motion(standard, productive) collapse-accordion; + } + + .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content { + animation: $duration-fast-02 motion(standard, productive) expand-accordion; + } + + .#{$prefix}--accordion__item--active { + overflow: visible; + + .#{$prefix}--accordion__content { + display: block; + padding-top: $spacing-03; + padding-bottom: $spacing-06; + // Transition property for when the accordion opens + transition: padding-top motion(entrance, productive) $duration-fast-02, + padding-bottom motion(entrance, productive) $duration-fast-02; + } + + .#{$prefix}--accordion__arrow { + fill: $icon-primary; + transform: rotate(-90deg) #{'/*rtl:ignore*/'}; + } + } + + // Skeleton state + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading, + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button { + cursor: default; + } + + .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow { + cursor: default; + fill: $icon-primary; + pointer-events: none; + + &:hover, + &:focus, + &:active { + border: none; + cursor: default; + outline: none; + } + } + + .#{$prefix}--accordion.#{$prefix}--skeleton + .#{$prefix}--accordion__heading:hover::before { + background-color: transparent; + } + + .#{$prefix}--accordion--end.#{$prefix}--skeleton + .#{$prefix}--accordion__arrow { + margin-left: $spacing-05; + } + + .#{$prefix}--skeleton + .#{$prefix}--accordion__heading:focus + .#{$prefix}--accordion__arrow { + border: none; + cursor: default; + outline: none; + } + + .#{$prefix}--accordion__title.#{$prefix}--skeleton__text { + margin-bottom: 0; + } + + // Windows HCM fix + .#{$prefix}--accordion__arrow, + .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow { + @include high-contrast-mode('icon-fill'); + } +} + +@mixin -content-visible { + height: 100%; + opacity: 1; + visibility: inherit; +} + +@mixin -content-hidden { + height: 0; + opacity: 0; + visibility: hidden; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_index.scss new file mode 100644 index 000000000000..91b1d5a07699 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/accordion/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'accordion'; +@use 'accordion'; + +@include accordion.accordion; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_breadcrumb.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_breadcrumb.scss new file mode 100644 index 000000000000..3a743fcd3b46 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_breadcrumb.scss @@ -0,0 +1,149 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../breakpoint' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/skeleton' as *; + +@mixin breadcrumb { + .#{$prefix}--breadcrumb { + @include reset; + @include type-style('body-short-01'); + + display: inline; + + @include breakpoint(md) { + display: flex; + flex-wrap: wrap; + } + } + + .#{$prefix}--breadcrumb-item { + position: relative; + display: flex; + align-items: center; + margin-right: $spacing-03; + } + + .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited { + color: $link-primary; + + &:hover { + color: $link-primary-hover; + } + } + + .#{$prefix}--breadcrumb-item::after { + margin-left: $spacing-03; + color: $text-primary; + content: '/'; + } + + .#{$prefix}--breadcrumb--no-trailing-slash + .#{$prefix}--breadcrumb-item:last-child::after { + content: ''; + } + + .#{$prefix}--breadcrumb-item:last-child, + .#{$prefix}--breadcrumb-item:last-child::after { + margin-right: 0; + } + + .#{$prefix}--breadcrumb .#{$prefix}--link { + white-space: nowrap; + } + + .#{$prefix}--breadcrumb-item [aria-current='page'], + .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current + .#{$prefix}--link { + color: $text-primary; + cursor: auto; + + &:hover { + text-decoration: none; + } + } + + // Overflow Menu overrides + .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu { + position: relative; + width: rem(20px); + height: rem(18px); + + &:focus { + outline: 1px solid $focus; + } + + &:hover { + background: transparent; + } + + // Used to mimic link underline + &::after { + position: absolute; + bottom: 2px; + width: rem(12px); + height: 1px; + background: $link-primary-hover; + content: ''; + opacity: 0; + transition: opacity $duration-fast-01 motion(standard, productive); + } + } + + .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after { + opacity: 1; + } + + .#{$prefix}--breadcrumb-item + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open { + background: transparent; + box-shadow: none; + } + + .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon { + position: relative; + fill: $link-primary; + transform: translateY(4px); + } + + .#{$prefix}--breadcrumb-item + .#{$prefix}--overflow-menu:hover + .#{$prefix}--overflow-menu__icon { + fill: $link-primary-hover; + } + + .#{$prefix}--breadcrumb-menu-options:focus { + outline: none; + } + + $caret-size: rem(7px); + .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after { + top: -$caret-size; + left: $caret-size * 2; + width: 0; + height: 0; + border-right: $caret-size solid transparent; + border-bottom: $caret-size solid $field; + border-left: $caret-size solid transparent; + margin: 0 auto; + background: transparent; + } + + // Skeleton State + .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link { + @include skeleton; + + width: rem(100px); + height: 1rem; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_index.scss new file mode 100644 index 000000000000..1af6dfea5ccb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/breadcrumb/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'breadcrumb'; +@use 'breadcrumb'; + +@include breadcrumb.breadcrumb; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_button.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_button.scss new file mode 100644 index 000000000000..b2754da5e912 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_button.scss @@ -0,0 +1,428 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'vars' as *; +@use 'mixins' as *; +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline'; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/visually-hidden' as *; +@use 'tokens' as *; + +@mixin button { + .#{$prefix}--btn { + @include button-base; + } + + // Reset intrinsic padding in Firefox (see #731) + .#{$prefix}--btn::-moz-focus-inner { + padding: 0; + border: 0; + } + + .#{$prefix}--btn--primary { + @include button-theme( + $button-primary, + transparent, + $text-on-color, + $button-primary-hover, + currentColor, + $button-primary-active + ); + + &:hover { + color: $text-on-color; + } + } + + .#{$prefix}--btn--secondary { + @include button-theme( + $button-secondary, + transparent, + $text-on-color, + $button-secondary-hover, + currentColor, + $button-secondary-active + ); + + &:hover, + &:focus { + color: $text-on-color; + } + } + + .#{$prefix}--btn--tertiary { + @include button-theme( + transparent, + $button-tertiary, + $button-tertiary, + $button-tertiary-hover, + currentColor, + $button-tertiary-active + ); + + &:hover { + color: $text-inverse; + } + + &:focus { + background-color: $button-tertiary; + color: $text-inverse; + } + + &:active { + border-color: transparent; + background-color: $button-tertiary-active; + color: $text-inverse; + } + + &:disabled, + &:hover:disabled, + &:focus:disabled, + &.#{$prefix}--btn--disabled, + &.#{$prefix}--btn--disabled:hover, + &.#{$prefix}--btn--disabled:focus { + background: transparent; + color: $text-on-color-disabled; + outline: none; + } + } + + .#{$prefix}--btn--ghost { + @include button-theme( + transparent, + transparent, + $link-primary, + $layer-hover, + currentColor, + $layer-active + ); + + padding: $button-padding-ghost; + + .#{$prefix}--btn__icon { + position: static; + margin-left: $spacing-03; + } + + &:hover, + &:active { + color: $link-primary-hover; + } + + &:active { + background-color: $background-active; + } + + &:disabled, + &:hover:disabled, + &:focus:disabled, + &.#{$prefix}--btn--disabled, + &.#{$prefix}--btn--disabled:hover, + &.#{$prefix}--btn--disabled:focus { + border-color: transparent; + background: transparent; + color: $text-on-color-disabled; + outline: none; + } + + &.#{$prefix}--btn--sm { + padding: $button-padding-ghost-sm; + } + + // V11: remove field + &.#{$prefix}--btn--field, + &.#{$prefix}--btn--md { + padding: $button-padding-ghost-field; + } + + &:not([disabled]) svg { + fill: $icon-primary; + } + } + + .#{$prefix}--btn--icon-only { + padding-right: rem(15px); + padding-left: rem(15px); + + .#{$prefix}--btn__icon { + position: static; + } + + &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon, + &.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon { + margin: 0; + } + } + + .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected { + background: $background-selected; + } + + .#{$prefix}--btn path[data-icon-path='inner-path'] { + fill: none; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only + .#{$prefix}--btn__icon + path:not([data-icon-path]):not([fill='none']), + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { + fill: $icon-primary; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon + path:not([data-icon-path]):not([fill='none']), + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] + .#{$prefix}--btn__icon, + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost[disabled]:hover + .#{$prefix}--btn__icon { + fill: $icon-on-color-disabled; + } + + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] { + cursor: not-allowed; + } + + // V11: remove field + .#{$prefix}--btn--field.#{$prefix}--btn--icon-only, + .#{$prefix}--btn--md.#{$prefix}--btn--icon-only { + padding-right: rem(11px); + padding-left: rem(11px); + } + + .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only { + padding-right: rem(7px); + padding-left: rem(7px); + } + + .#{$prefix}--btn--danger { + @include button-theme( + $button-danger-primary, + transparent, + $text-on-color, + $button-danger-hover, + currentColor, + $button-danger-active + ); + + &:hover { + color: $text-on-color; + } + + // TODO: deprecate single dash tertiary + &-tertiary, + &--tertiary { + @include button-theme( + transparent, + $button-danger-secondary, + $button-danger-secondary, + $button-danger-hover, + currentColor, + $button-danger-active + ); + + &:hover { + border-color: $button-danger-hover; + color: $text-on-color; + } + + &:focus { + background-color: $button-danger-primary; + color: $text-on-color; + } + + &:active { + border-color: $button-danger-active; + background-color: $button-danger-active; + color: $text-on-color; + } + + &:disabled, + &:hover:disabled, + &:focus:disabled, + &.#{$prefix}--btn--disabled, + &.#{$prefix}--btn--disabled:hover, + &.#{$prefix}--btn--disabled:focus { + background: transparent; + color: $text-on-color-disabled; + outline: none; + } + } + + // TODO: deprecate single dash ghost + &-ghost, + &--ghost { + @include button-theme( + transparent, + transparent, + $button-danger-secondary, + $button-danger-hover, + currentColor, + $button-danger-active + ); + + padding: $button-padding-ghost; + + .#{$prefix}--btn__icon { + position: static; + margin-left: $spacing-03; + } + + &:hover, + &:active { + color: $text-on-color; + } + + &:disabled, + &:hover:disabled, + &:focus:disabled, + &.#{$prefix}--btn--disabled, + &.#{$prefix}--btn--disabled:hover, + &.#{$prefix}--btn--disabled:focus { + border-color: transparent; + background: transparent; + color: $text-disabled; + outline: none; + } + + &.#{$prefix}--btn--sm { + padding: $button-padding-ghost-sm; + } + + // V11: Remove field + &.#{$prefix}--btn--field, + &.#{$prefix}--btn--md { + padding: $button-padding-ghost-field; + } + } + } + + .#{$prefix}--btn--sm { + min-height: rem(32px); + padding: $button-padding-sm; + } + + // V11: change xl to 2xl + .#{$prefix}--btn--xl:not(.#{$prefix}--btn--icon-only) { + @include button-padding-large; + + min-height: rem(80px); + } + + // V11: change lg to xl + .#{$prefix}--btn--lg:not(.#{$prefix}--btn--icon-only) { + @include button-padding-large; + + min-height: rem(64px); + } + + // V11: Remove field + .#{$prefix}--btn--field, + .#{$prefix}--btn--md { + min-height: rem(40px); + padding: $button-padding-field; + } + + //expressive styles + .#{$prefix}--btn--expressive { + @include type-style('body-compact-02'); + + min-height: 3rem; + } + + .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive { + padding: 12px 13px; + //default size 48px + } + + .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon { + width: rem(20px); + height: rem(20px); + } + + .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive { + max-width: rem(320px); + } + + // Skeleton State + .#{$prefix}--btn.#{$prefix}--skeleton { + @include skeleton; + + width: rem(150px); + } + + // button set styles + .#{$prefix}--btn-set { + display: flex; + } + + .#{$prefix}--btn-set--stacked { + flex-direction: column; + } + + .#{$prefix}--btn-set .#{$prefix}--btn { + width: 100%; + // 196px from design kit + max-width: rem(196px); + + &:not(:focus) { + box-shadow: rem(-1px) 0 0 0 $button-separator; + } + + &:first-of-type:not(:focus) { + box-shadow: inherit; + } + } + + .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn { + box-shadow: inherit; + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) { + box-shadow: 0 rem(-1px) 0 0 $button-separator; + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) { + box-shadow: inherit; + } + + .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled { + box-shadow: rem(-1px) 0 0 0 $icon-on-color-disabled; + + &:first-of-type { + box-shadow: none; + } + } + + .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled { + box-shadow: 0 rem(-1px) 0 0 $layer-selected-disabled; + + &:first-of-type { + box-shadow: none; + } + } + + // Windows HCM fix + .#{$prefix}--btn:focus { + @include high-contrast-mode('focus'); + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only + .#{$prefix}--btn__icon + path:not([data-icon-path]):not([fill='none']), + .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_index.scss new file mode 100644 index 000000000000..d6b34fe0df76 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_index.scss @@ -0,0 +1,17 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'vars'; +@forward 'button'; +@forward 'tokens'; + +@use '../../theme'; +@use 'button'; +@use 'tokens'; + +@include theme.add-component-tokens(tokens.$button-tokens); +@include button.button; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_mixins.scss new file mode 100644 index 000000000000..1561fc7d683a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_mixins.scss @@ -0,0 +1,111 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'vars' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/component-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/custom-property'; +@use 'tokens' as *; + +$button-focus-color: custom-property.get-var('button-focus-color', $focus); + +@mixin button-base { + @include component-reset.reset; + @include type-style('body-compact-01'); + + position: relative; + display: inline-flex; + width: max-content; + max-width: rem(320px); + min-height: $button-height; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + padding: $button-padding; + // Fix to remove added margins on buttons in safari (see #5155) + margin: 0; + border-radius: $button-border-radius; + cursor: pointer; + outline: none; + text-align: left; + text-decoration: none; + transition: background $duration-fast-01 motion(entrance, productive), + box-shadow $duration-fast-01 motion(entrance, productive), + border-color $duration-fast-01 motion(entrance, productive), + outline $duration-fast-01 motion(entrance, productive); + vertical-align: top; + + &:disabled, + &:hover:disabled, + &:focus:disabled, + &.#{$prefix}--btn--disabled, + &.#{$prefix}--btn--disabled:hover, + &.#{$prefix}--btn--disabled:focus { + border-color: $button-disabled; + background: $button-disabled; + box-shadow: none; + color: $text-on-color-disabled; + cursor: not-allowed; + } + + .#{$prefix}--btn__icon { + position: absolute; + right: rem(16px); + width: rem(16px); + height: rem(16px); + flex-shrink: 0; + } +} + +/// Button variant styles +/// @access private +/// @group button +@mixin button-theme( + $bg-color, + $border-color, + $font-color, + $hover-bg-color, + $icon-color, + $active-color +) { + border-width: $button-outline-width; + border-style: solid; + border-color: $border-color; + background-color: $bg-color; + color: $font-color; + + &:hover { + background-color: $hover-bg-color; + } + + &:focus { + border-color: $button-focus-color; + box-shadow: inset 0 0 0 $button-outline-width $button-focus-color, + inset 0 0 0 $button-border-width $background; + } + + &:active { + background-color: $active-color; + } + + .#{$prefix}--btn__icon, + .#{$prefix}--btn__icon path:not([data-icon-path]):not([fill='none']) { + fill: $icon-color; + } +} + +@mixin button-padding-large { + align-items: baseline; + padding-top: $spacing-05; + padding-right: $spacing-10; + padding-left: $spacing-05; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_tokens.scss new file mode 100644 index 000000000000..35a78a4a2d54 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_tokens.scss @@ -0,0 +1,424 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:map'; +@use '../../themes'; +@use '../../utilities/component-tokens'; + +$button-separator: ( + fallback: #e0e0e0, + values: ( + ( + theme: themes.$white, + value: #e0e0e0, + ), + ( + theme: themes.$g10, + value: #e0e0e0, + ), + ( + theme: themes.$g90, + value: #161616, + ), + ( + theme: themes.$g100, + value: #161616, + ), + ), +) !default; + +$button-primary: ( + fallback: #0f62fe, + values: ( + ( + theme: themes.$white, + value: #0f62fe, + ), + ( + theme: themes.$g10, + value: #0f62fe, + ), + ( + theme: themes.$g90, + value: #0f62fe, + ), + ( + theme: themes.$g100, + value: #0f62fe, + ), + ), +) !default; + +$button-secondary: ( + fallback: #393939, + values: ( + ( + theme: themes.$white, + value: #393939, + ), + ( + theme: themes.$g10, + value: #393939, + ), + ( + theme: themes.$g90, + value: #6f6f6f, + ), + ( + theme: themes.$g100, + value: #6f6f6f, + ), + ), +) !default; + +$button-tertiary: ( + fallback: #0f62fe, + values: ( + ( + theme: themes.$white, + value: #0f62fe, + ), + ( + theme: themes.$g10, + value: #0f62fe, + ), + ( + theme: themes.$g90, + value: #ffffff, + ), + ( + theme: themes.$g100, + value: #ffffff, + ), + ), +) !default; + +$button-danger-primary: ( + fallback: #da1e28, + values: ( + ( + theme: themes.$white, + value: #da1e28, + ), + ( + theme: themes.$g10, + value: #da1e28, + ), + ( + theme: themes.$g90, + value: #da1e28, + ), + ( + theme: themes.$g100, + value: #da1e28, + ), + ), +) !default; + +$button-danger-secondary: ( + fallback: #da1e28, + values: ( + ( + theme: themes.$white, + value: #da1e28, + ), + ( + theme: themes.$g10, + value: #da1e28, + ), + ( + theme: themes.$g90, + value: #ff8389, + ), + ( + theme: themes.$g100, + value: #fa4d56, + ), + ), +) !default; + +$button-danger-active: ( + fallback: #750e13, + values: ( + ( + theme: themes.$white, + value: #750e13, + ), + ( + theme: themes.$g10, + value: #750e13, + ), + ( + theme: themes.$g90, + value: #750e13, + ), + ( + theme: themes.$g100, + value: #750e13, + ), + ), +) !default; + +$button-primary-active: ( + fallback: #002d9c, + values: ( + ( + theme: themes.$white, + value: #002d9c, + ), + ( + theme: themes.$g10, + value: #002d9c, + ), + ( + theme: themes.$g90, + value: #002d9c, + ), + ( + theme: themes.$g100, + value: #002d9c, + ), + ), +) !default; + +$button-secondary-active: ( + fallback: #6f6f6f, + values: ( + ( + theme: themes.$white, + value: #6f6f6f, + ), + ( + theme: themes.$g10, + value: #6f6f6f, + ), + ( + theme: themes.$g90, + value: #393939, + ), + ( + theme: themes.$g100, + value: #393939, + ), + ), +) !default; + +$button-tertiary-active: ( + fallback: #002d9c, + values: ( + ( + theme: themes.$white, + value: #002d9c, + ), + ( + theme: themes.$g10, + value: #002d9c, + ), + ( + theme: themes.$g90, + value: #c6c6c6, + ), + ( + theme: themes.$g100, + value: #c6c6c6, + ), + ), +) !default; + +$button-danger-hover: ( + fallback: #b81922, + values: ( + ( + theme: themes.$white, + value: #b81922, + ), + ( + theme: themes.$g10, + value: #b81922, + ), + ( + theme: themes.$g90, + value: #b81921, + ), + ( + theme: themes.$g100, + value: #b81921, + ), + ), +) !default; + +$button-primary-hover: ( + fallback: #0050e6, + values: ( + ( + theme: themes.$white, + value: #0050e6, + ), + ( + theme: themes.$g10, + value: #0050e6, + ), + ( + theme: themes.$g90, + value: #0050e6, + ), + ( + theme: themes.$g100, + value: #0050e6, + ), + ), +) !default; + +$button-secondary-hover: ( + fallback: #474747, + values: ( + ( + theme: themes.$white, + value: #474747, + ), + ( + theme: themes.$g10, + value: #474747, + ), + ( + theme: themes.$g90, + value: #5e5e5e, + ), + ( + theme: themes.$g100, + value: #5e5e5e, + ), + ), +) !default; + +$button-tertiary-hover: ( + fallback: #0050e6, + values: ( + ( + theme: themes.$white, + value: #0050e6, + ), + ( + theme: themes.$g10, + value: #0050e6, + ), + ( + theme: themes.$g90, + value: #f4f4f4, + ), + ( + theme: themes.$g100, + value: #f4f4f4, + ), + ), +) !default; + +$button-disabled: ( + fallback: #c6c6c6, + values: ( + ( + theme: themes.$white, + value: #c6c6c6, + ), + ( + theme: themes.$g10, + value: #c6c6c6, + ), + ( + theme: themes.$g90, + value: rgba(141, 141, 141, 0.3), + ), + ( + theme: themes.$g100, + value: rgba(141, 141, 141, 0.3), + ), + ), +) !default; + +$button-tokens: ( + button-separator: $button-separator, + button-primary: $button-primary, + button-secondary: $button-secondary, + button-tertiary: $button-tertiary, + button-danger-primary: $button-danger-primary, + button-danger-secondary: $button-danger-secondary, + button-danger-active: $button-danger-active, + button-primary-active: $button-primary-active, + button-secondary-active: $button-secondary-active, + button-tertiary-active: $button-tertiary-active, + button-danger-hover: $button-danger-hover, + button-primary-hover: $button-primary-hover, + button-secondary-hover: $button-secondary-hover, + button-tertiary-hover: $button-tertiary-hover, + button-disabled: $button-disabled, +); + +$button-separator: component-tokens.get-var( + $button-separator, + 'button-separator' +); + +$button-primary: component-tokens.get-var($button-primary, 'button-primary'); + +$button-secondary: component-tokens.get-var( + $button-secondary, + 'button-secondary' +); + +$button-tertiary: component-tokens.get-var($button-tertiary, 'button-tertiary'); + +$button-danger-primary: component-tokens.get-var( + $button-danger-primary, + 'button-danger-primary' +); + +$button-danger-secondary: component-tokens.get-var( + $button-danger-secondary, + 'button-danger-secondary' +); + +$button-danger-active: component-tokens.get-var( + $button-danger-active, + 'button-danger-active' +); + +$button-primary-active: component-tokens.get-var( + $button-primary-active, + 'button-primary-active' +); + +$button-secondary-active: component-tokens.get-var( + $button-secondary-active, + 'button-secondary-active' +); + +$button-tertiary-active: component-tokens.get-var( + $button-tertiary-active, + 'button-tertiary-active' +); + +$button-danger-hover: component-tokens.get-var( + $button-danger-hover, + 'button-danger-hover' +); + +$button-primary-hover: component-tokens.get-var( + $button-primary-hover, + 'button-primary-hover' +); + +$button-secondary-hover: component-tokens.get-var( + $button-secondary-hover, + 'button-secondary-hover' +); + +$button-tertiary-hover: component-tokens.get-var( + $button-tertiary-hover, + 'button-tertiary-hover' +); + +$button-disabled: component-tokens.get-var($button-disabled, 'button-disabled'); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_vars.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_vars.scss new file mode 100644 index 000000000000..7879dae95c21 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/button/_vars.scss @@ -0,0 +1,76 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../spacing' as *; + +/// @type Number +/// @access public +/// @group button +$button-font-weight: 400 !default; + +/// @type Number +/// @access public +/// @group button +$button-font-size: 0.875rem !default; + +/// @type Number +/// @access public +/// @group button +$button-border-radius: 0 !default; + +/// @type Number +/// @access public +/// @group button +$button-height: 3rem !default; + +/// @type Value +/// @access public +/// @group button +$button-padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px !default; + +/// @type Value +/// @access public +/// @group button +$button-padding-field: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px !default; + +/// @type Value +/// @access public +/// @group button +$button-padding-sm: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px !default; + +/// @type Number +/// @access public +/// @group button +$button-padding-lg: $spacing-04 !default; + +/// @type Number +/// @access public +/// @group button +/// Uses the same padding-y as normal buttons, but removes extra padding-right +$button-padding-ghost: calc(0.875rem - 3px) 16px !default; + +/// @type Number +/// @access public +/// @group button +/// Uses the same padding-y as field buttons, but removes extra padding-right +$button-padding-ghost-field: calc(0.675rem - 3px) 16px !default; + +/// @type Number +/// @access public +/// @group button +/// Uses the same padding-y as small buttons, but removes extra padding-right +$button-padding-ghost-sm: calc(0.375rem - 3px) 16px !default; + +/// @type Number +/// @access public +/// @group button +$button-border-width: 2px !default; + +/// @type Number +/// @access public +/// @group button +$button-outline-width: 1px !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_checkbox.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_checkbox.scss new file mode 100644 index 000000000000..c6c3e60dbdf1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_checkbox.scss @@ -0,0 +1,207 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../form'; +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/visually-hidden' as *; + +@mixin checkbox { + // Spacing between checkboxes + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { + position: relative; + margin-bottom: $spacing-02; + } + + // Spacing above collection of checkboxes + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type { + margin-top: rem(3px); + } + + // Shift collection of checkboxes up if label is present + // to account for the 2px top margin for the first checkbox + .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { + margin-top: -#{$spacing-01}; + } + + // Spacing below collection of checkboxes + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { + margin-bottom: rem(3px); + } + + // Visually, we'll hide the checkbox input and create our own styled version + // to match the specs. + .#{$prefix}--checkbox { + @include visually-hidden; + //even though its hidden, positioning is for native validation to be aligned to checkbox + top: 1.25rem; + left: 0.7rem; + } + + // The label corresponds to the content inside of the `label` tag. Since we're + // creating our own checkbox style, we'll need to position this in order to + // accommodate the spacing needed for the checkbox. + .#{$prefix}--checkbox-label { + @include reset; + @include type-style('body-short-01'); + + position: relative; + display: flex; + min-height: rem(24px); + padding-top: rem(3px); + padding-left: rem(20px); + cursor: pointer; + user-select: none; + } + + .#{$prefix}--checkbox-label-text { + // Add extra spacing when label is present + padding-left: rem(6px); + } + + // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after` + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label::after { + box-sizing: border-box; + } + + // Spacing for presentational checkbox + .#{$prefix}--checkbox-label::before { + // We need to position the pseudo-element absolutely in the space that we've + // created with the padding from the label itself. We position only with + // `top` since we don't want the checkbox to be centered vertically with the + // text overflows. + position: absolute; + top: rem(2px); + left: 0; + + // According to the spec, we'll want the bounding box for our checkbox to + // be 16px. The border size will be what will be updated during the + // different checkbox states. + width: rem(16px); + height: rem(16px); + border: 1px solid $icon-primary; + // increase left margin for #6480 + margin: rem(2px) rem(2px) rem(2px) rem(3px); + + // Checkboxes with a background color look visually off against a parent container. + background-color: transparent; + border-radius: 1px; + content: ''; + } + + // Create the appearance of the check in the `after` pseudo-element + .#{$prefix}--checkbox-label::after { + position: absolute; + top: rem(8px); + left: rem(7px); + width: rem(9px); + height: rem(5px); + border-bottom: 2px solid $icon-inverse; + border-left: 2px solid $icon-inverse; + margin-top: rem(-3px) #{'/*rtl:0rem*/'}; + background: none; + content: ''; + transform: scale(0) rotate(-45deg); + transform-origin: bottom right #{'/*rtl:center*/'}; + } + + //---------------------------------------------- + // Checked + // --------------------------------------------- + + // Update properties for checked checkbox + .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before { + border-width: 1px; + border-color: $icon-primary; + background-color: $icon-primary; + } + + // Display the check + .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after { + transform: scale(1) rotate(-45deg) #{'/*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'}; + } + + // Indeterminate symbol + .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::after { + top: rem(11px); + width: rem(8px); + border-bottom: 2px solid $icon-inverse; + border-left: 0 solid $icon-inverse; + transform: scale(1) rotate(0deg); + } + + //---------------------------------------------- + // Focus + // --------------------------------------------- + + // Unchecked + .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label__focus::before, + // Checked + .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before, + // Indeterminate + .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before { + outline: 2px solid $focus; + outline-offset: 1px; + } + + //---------------------------------------------- + // Disabled + // --------------------------------------------- + + .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label, + .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] { + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true']::before { + border-color: $icon-disabled; + } + + .#{$prefix}--checkbox:checked:disabled + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox:indeterminate:disabled + + .#{$prefix}--checkbox-label::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before, + .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'][data-contained-checkbox-disabled='true']::before { + background-color: $icon-disabled; + } + + //----------------------------------------------- + // Skeleton + //----------------------------------------------- + + .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton { + @include skeleton; + + width: rem(100px); + height: $spacing-05; + + // Add extra spacing when label is present + margin: rem(1px) 0 0 rem(6px); + } + + //----------------------------------------------- + // InlineCheckbox + //----------------------------------------------- + .#{$prefix}--checkbox--inline { + position: relative; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_index.scss new file mode 100644 index 000000000000..b229e1b88f43 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/checkbox/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'checkbox'; +@use 'checkbox'; + +@include checkbox.checkbox; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_code-snippet.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_code-snippet.scss new file mode 100644 index 000000000000..5ed39975fab4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_code-snippet.scss @@ -0,0 +1,581 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../copy-button'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/keyframes' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/tooltip' as *; +@use '../../utilities/z-index' as *; +@use 'mixins' as *; + +/// @type Color +/// @access public +/// @group copy-button +$copy-active: $layer-active !default; + +/// @type Color +/// @access public +/// @group copy-button +$copy-btn-feedback: $background-inverse !default; + +@mixin code-snippet { + .#{$prefix}--snippet { + @include reset; + } + + .#{$prefix}--snippet--disabled, + .#{$prefix}--snippet--disabled + .#{$prefix}--btn.#{$prefix}--snippet-btn--expand { + background-color: $layer; + color: $text-disabled; + } + + .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover, + .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover { + background-color: $layer; + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--snippet--disabled .#{$prefix}--snippet__icon, + .#{$prefix}--snippet--disabled + .#{$prefix}--snippet-btn--expand + .#{$prefix}--icon-chevron--down { + fill: $icon-disabled; + } + + .#{$prefix}--snippet code { + @include type-style('code-01'); + } + + // Inline Code Snippet + .#{$prefix}--snippet--inline { + @include reset; + + position: relative; + display: inline; + padding: 0; + border: 2px solid transparent; + background-color: $field; + border-radius: 4px; + color: $text-primary; + cursor: pointer; + + &:hover { + background-color: $layer-accent; + } + + &:active { + background-color: $copy-active; + } + + &:focus { + border: 2px solid $focus; + outline: none; + } + + &::before { + @include tooltip--caret; + + display: none; + } + + .#{$prefix}--copy-btn__feedback { + @include tooltip--content('icon'); + + display: none; + overflow: visible; + box-sizing: content-box; + margin: auto; + clip: auto; + } + + @include tooltip--placement('icon', 'bottom', 'center'); + } + + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating + .#{$prefix}--copy-btn__feedback { + display: block; + } + + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out + .#{$prefix}--copy-btn__feedback { + animation: $duration-fast-02 motion(standard, productive) hide-feedback; + } + + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before, + .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in + .#{$prefix}--copy-btn__feedback { + animation: $duration-fast-02 motion(standard, productive) show-feedback; + } + + .#{$prefix}--snippet--inline code { + padding: 0 $spacing-03; + } + + .#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy { + display: inline-block; + + &:hover { + background-color: $field; + cursor: auto; + } + } + + .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover { + background-color: $field-02; + cursor: auto; + } + + // Single Line Snippet + .#{$prefix}--snippet--single { + @include bx--snippet; + + display: flex; + height: $spacing-08; + align-items: center; + padding-right: $spacing-08; + } + + .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy { + padding: 0; + + &::after { + right: $spacing-05; + } + } + + .#{$prefix}--snippet--single .#{$prefix}--snippet-container { + position: relative; + display: flex; + height: 100%; + align-items: center; + padding-left: $spacing-05; + overflow-x: auto; + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--snippet--single pre { + @include type-style('code-01'); + + padding-right: $spacing-03; + } + + // Preserve whitespace, but don't allow wrapping for inline and single + .#{$prefix}--snippet--single pre, + .#{$prefix}--snippet--inline code { + white-space: pre; + } + + // Multi Line Snippet + .#{$prefix}--snippet--multi { + @include bx--snippet; + + display: flex; + padding: $spacing-05; + } + + //collapsed snippet container + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { + position: relative; + min-height: 100%; + max-height: 100%; + order: 1; + overflow-y: auto; + transition: max-height $duration-moderate-01 motion(standard, productive); + } + + // expanded snippet container + .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand + .#{$prefix}--snippet-container { + padding-bottom: $spacing-05; + transition: max-height $duration-moderate-01 motion(standard, productive); + } + + .#{$prefix}--snippet--multi.#{$prefix}--snippet--wraptext pre { + white-space: pre-wrap; + word-wrap: break-word; + } + + // collapsed pre + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { + padding-right: $spacing-08; + padding-bottom: rem(24px); + overflow-x: auto; + } + + .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy + .#{$prefix}--snippet-container + pre { + padding-right: 0; + } + + // expanded pre + .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand + .#{$prefix}--snippet-container + pre { + overflow-x: auto; + } + + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after { + position: absolute; + top: 0; + right: 0; + width: rem(16px); + height: 100%; + // Safari interprets `transparent` differently, so make color token value transparent instead: + background-image: linear-gradient(to right, rgba($field, 0), $field); + content: ''; + } + + .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code { + overflow: hidden; + } + + //Copy Button + .#{$prefix}--snippet__icon { + width: rem(16px); + height: rem(16px); + fill: $icon-primary; + transition: all $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--snippet-button { + @include reset; + + position: absolute; + top: 0; + right: 0; + display: flex; + overflow: visible; + width: $spacing-08; + height: $spacing-08; + align-items: center; + justify-content: center; + padding: 0; + border: none; + background-color: $field; + cursor: pointer; + outline: none; + + &:focus { + @include focus-outline('outline'); + + outline-color: $focus; + } + } + + .#{$prefix}--snippet--multi .#{$prefix}--snippet-button { + top: $spacing-03; + right: $spacing-03; + width: $spacing-07; + height: $spacing-07; + } + + .#{$prefix}--snippet-button:hover { + background: $field-hover; + } + + .#{$prefix}--snippet-button:active { + background-color: $copy-active; + } + + .#{$prefix}--btn--copy__feedback { + @include type-style('body-short-01'); + @include font-family('sans'); + + z-index: z('overlay'); + top: 0.75rem; + right: 1.25rem; + left: inherit; + font-weight: 400; + } + + .#{$prefix}--btn--copy__feedback::before, + .#{$prefix}--btn--copy__feedback::after { + background: $copy-btn-feedback; + } + + .#{$prefix}--btn--copy__feedback::after { + border: none; + } + + // TODO: remove copy button styles above + .#{$prefix}--snippet .#{$prefix}--copy-btn { + @include font-family('sans'); + + position: absolute; + top: 0; + right: 0; + } + + // Show more / less button + .#{$prefix}--snippet-btn--expand { + @include type-style('body-short-01'); + @include font-family('sans'); + + position: absolute; + z-index: 10; + right: 0; + bottom: 0; + display: inline-flex; + align-items: center; + + padding: $spacing-03 $spacing-05; + border: 0; + background-color: $field; + color: $text-primary; + } + + .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text { + position: relative; + top: rem(-1px); + } + + .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand { + display: none; + } + + .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { + margin-left: $spacing-03; + fill: $icon-primary; + transform: rotate(0deg); + transition: $duration-moderate-01 motion(standard, productive); + } + + .#{$prefix}--snippet-btn--expand:hover { + background: $field-hover; + color: $text-primary; + } + + .#{$prefix}--snippet-btn--expand:active { + background-color: $copy-active; + } + + .#{$prefix}--snippet-btn--expand:focus { + @include focus-outline('outline'); + + border-color: transparent; + } + + .#{$prefix}--snippet--expand + .#{$prefix}--snippet-btn--expand + .#{$prefix}--icon-chevron--down { + transform: rotate(180deg); + transition: transform $transition--expansion; + } + + // Light version + .#{$prefix}--snippet--light, + .#{$prefix}--snippet--light .#{$prefix}--snippet-button, + .#{$prefix}--snippet--light .#{$prefix}--btn.#{$prefix}--snippet-btn--expand, + .#{$prefix}--snippet--light .#{$prefix}--copy-btn { + background-color: $field-02; + } + + .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover, + .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover, + .#{$prefix}--snippet--light + .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover, + .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover { + background-color: $layer-hover-02; + } + + .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active, + .#{$prefix}--snippet--light .#{$prefix}--snippet-button:active, + .#{$prefix}--snippet--light + .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active, + .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active { + background-color: $layer-active-02; + } + + .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after, + .#{$prefix}--snippet--light.#{$prefix}--snippet--multi + .#{$prefix}--snippet-container + pre::after { + // Safari interprets `transparent` differently, so make color token value transparent instead: + background-image: linear-gradient(to right, rgba($field-02, 0), $field-02); + } + + // Skeleton State + .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container { + width: 100%; + height: 100%; + } + + .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback { + // (The height of button) + (The height of the tooltip's triangle) + 4px + top: rem(50.8px); + right: auto; + left: 50%; + + &::before { + top: 0; + } + + &::after { + top: rem(-4px); + } + } + + .#{$prefix}--snippet--multi .#{$prefix}--copy-btn { + z-index: 10; + top: $spacing-03; + right: $spacing-03; + width: $spacing-07; + height: $spacing-07; + } + + .#{$prefix}--snippet--multi + .#{$prefix}--snippet-button + .#{$prefix}--btn--copy__feedback { + // (The height of button) + (The height of the tooltip's triangle) + 4px + top: rem(42.8px); + } + + .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback { + // TODO: use updated global tooltip mixins under the hood + // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec + top: calc(100% - #{rem(4px)}); + right: auto; + left: 50%; + } + + // Overflow Indicator + .#{$prefix}--snippet__overflow-indicator--left, + .#{$prefix}--snippet__overflow-indicator--right { + z-index: 1; + width: $spacing-05; + flex: 1 0 auto; + } + + .#{$prefix}--snippet__overflow-indicator--left { + order: 0; + margin-right: -$spacing-05; + background-image: linear-gradient(to left, transparent, $field); + } + + .#{$prefix}--snippet__overflow-indicator--right { + order: 2; + margin-left: -$spacing-05; + background-image: linear-gradient(to right, transparent, $field); + } + + .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right, + .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left { + position: absolute; + width: $spacing-07; + height: calc(100% - #{$spacing-02}); + } + + .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right { + right: $spacing-08; + } + + .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy + .#{$prefix}--snippet__overflow-indicator--right { + right: 0; + } + + .#{$prefix}--snippet--single + .#{$prefix}--snippet-container:focus + ~ .#{$prefix}--snippet__overflow-indicator--right { + right: calc(#{$spacing-08} + #{rem(2px)}); + } + + .#{$prefix}--snippet--single + .#{$prefix}--snippet-container:focus + + .#{$prefix}--snippet__overflow-indicator--left { + left: rem(2px); + } + + .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left { + background-image: linear-gradient(to left, transparent, $field-02); + } + + .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right { + background-image: linear-gradient(to right, transparent, $field-02); + } + + // Safari-only media query + // since fades won't appear correctly with CSS custom properties + // see: tabs, code snippet, and modal overflow indicators + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .#{$prefix}--snippet__overflow-indicator--left { + background-image: linear-gradient(to left, rgba($field, 0), $field); + } + + .#{$prefix}--snippet__overflow-indicator--right { + background-image: linear-gradient(to right, rgba($field, 0), $field); + } + } + } + + .#{$prefix}--snippet--multi.#{$prefix}--skeleton { + height: rem(98px); + } + + .#{$prefix}--snippet--single.#{$prefix}--skeleton { + height: rem(56px); + } + + .#{$prefix}--snippet.#{$prefix}--skeleton span { + @include skeleton; + + display: block; + width: 100%; + height: 1rem; + margin-top: 0.5rem; + + &:first-child { + margin: 0; + } + + &:nth-child(2) { + width: 85%; + } + + &:nth-child(3) { + width: 95%; + } + } + + .#{$prefix}--snippet--single.#{$prefix}--skeleton + .#{$prefix}--snippet-container { + padding-bottom: 0; + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--snippet__icon { + @include high-contrast-mode('icon-fill'); + } + + .#{$prefix}--snippet--inline:focus { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--snippet--single, + .#{$prefix}--snippet--multi { + @include high-contrast-mode('outline'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_index.scss new file mode 100644 index 000000000000..a9b2125cd40d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'code-snippet'; +@use 'code-snippet'; + +@include code-snippet.code-snippet; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_mixins.scss new file mode 100644 index 000000000000..afabeb0a09c8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/code-snippet/_mixins.scss @@ -0,0 +1,21 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../theme' as *; +@use '../../type' as *; + +/// Code snippet base styles +/// @access private +/// @group code-snippet +@mixin bx--snippet { + @include type-style('code-01'); + + position: relative; + width: 100%; + max-width: rem(768px); + background-color: $field; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_combo-box.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_combo-box.scss new file mode 100644 index 000000000000..1ec82cc6b41f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_combo-box.scss @@ -0,0 +1,45 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../list-box'; +@use '../../config' as *; +@use '../../theme' as *; + +/// Combo box styles +/// @access public +/// @group combo-box +@mixin combo-box { + .#{$prefix}--combo-box:hover { + background-color: $field; + } + + // V11: Possibly deprecate + .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover { + background-color: $field-02; + } + + .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear { + display: none; + } + + .#{$prefix}--combo-box.#{$prefix}--list-box--expanded + .#{$prefix}--text-input { + border-bottom-color: $border-subtle; + } + + .#{$prefix}--combo-box .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box--warning + .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field, + .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning + .#{$prefix}--list-box__field { + padding: 0; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_index.scss new file mode 100644 index 000000000000..944ed681931e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/combo-box/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'combo-box'; +@use 'combo-box'; + +@include combo-box.combo-box; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_content-switcher.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_content-switcher.scss new file mode 100644 index 000000000000..87ccc4a0858d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_content-switcher.scss @@ -0,0 +1,219 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; + +@mixin content-switcher { + .#{$prefix}--content-switcher { + display: flex; + width: 100%; + height: rem(40px); + justify-content: space-evenly; + } + + .#{$prefix}--content-switcher--sm { + height: rem(32px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--content-switcher--xl, + .#{$prefix}--content-switcher--lg { + height: rem(48px); + } + + .#{$prefix}--content-switcher-btn { + @include reset; + @include font-family('sans'); + @include focus-outline('reset'); + @include type-style('body-short-01'); + + position: relative; + display: inline-flex; + overflow: hidden; + width: 100%; + align-items: center; + padding: $spacing-03 $spacing-05; + border: none; + border-top: rem(1px) solid $border-inverse; + border-bottom: rem(1px) solid $border-inverse; + margin: 0; + background-color: transparent; + color: $text-secondary; + text-align: left; + text-decoration: none; + transition: all $duration-moderate-01 motion(standard, productive); + white-space: nowrap; + + &::after { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + background-color: $layer-selected-inverse; + content: ''; + transform: scaleY(0); + transform-origin: bottom; + transition: all $duration-moderate-01 motion(standard, productive); + } + + &:disabled::after { + display: none; + } + + &:focus { + z-index: 3; + border-color: $focus; + box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset; + } + + &:focus::after { + clip-path: inset(3px 3px 3px 3px); + } + + &:hover { + color: $text-primary; + cursor: pointer; + } + + &:hover, + &:active { + z-index: 3; + background-color: $layer-hover; + color: $text-primary; + } + + &:disabled { + border-color: $border-disabled; + background-color: transparent; + color: $text-disabled; + + &:hover { + cursor: not-allowed; + } + } + + &:disabled:first-child, + &:disabled:last-child { + border-color: $border-disabled; + } + } + + .#{$prefix}--content-switcher-btn:first-child { + border-left: rem(1px) solid $border-inverse; + border-bottom-left-radius: rem(4px); + border-top-left-radius: rem(4px); + } + + .#{$prefix}--content-switcher-btn:last-child { + border-right: rem(1px) solid $border-inverse; + border-bottom-right-radius: rem(4px); + border-top-right-radius: rem(4px); + } + + .#{$prefix}--content-switcher--selected, + .#{$prefix}--content-switcher--selected:first-child, + .#{$prefix}--content-switcher--selected:last-child { + border: 0; + } + + .#{$prefix}--content-switcher-btn::before { + position: absolute; + z-index: 2; + left: 0; + display: block; + width: rem(1px); + height: rem(16px); + background-color: $border-subtle; + content: ''; + } + + .#{$prefix}--content-switcher-btn:first-of-type::before { + display: none; + } + + .#{$prefix}--content-switcher-btn:focus::before, + .#{$prefix}--content-switcher-btn:focus + + .#{$prefix}--content-switcher-btn::before, + .#{$prefix}--content-switcher-btn:hover::before, + .#{$prefix}--content-switcher-btn:hover + + .#{$prefix}--content-switcher-btn::before, + .#{$prefix}--content-switcher--selected::before, + .#{$prefix}--content-switcher--selected + + .#{$prefix}--content-switcher-btn::before { + background-color: transparent; + } + + .#{$prefix}--content-switcher-btn:disabled::before, + .#{$prefix}--content-switcher-btn:disabled:hover + + .#{$prefix}--content-switcher-btn:disabled::before { + background-color: $border-disabled; + } + + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled + + .#{$prefix}--content-switcher-btn::before, + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover + + .#{$prefix}--content-switcher-btn::before { + background-color: transparent; + } + + .#{$prefix}--content-switcher__icon { + fill: $icon-secondary; + transition: fill $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--content-switcher__icon + span { + margin-left: $spacing-03; + } + + .#{$prefix}--content-switcher__label { + z-index: 1; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + } + + .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon, + .#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon { + fill: $icon-primary; + } + + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected { + z-index: 3; + background-color: $layer-selected-inverse; + color: $text-inverse; + + &:disabled { + background-color: $layer-selected-disabled; + color: $text-disabled; + } + + &::after { + transform: scaleY(1); + } + } + + .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected + .#{$prefix}--content-switcher__icon { + fill: $icon-inverse; + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--content-switcher-btn:focus { + @include high-contrast-mode('focus'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_index.scss new file mode 100644 index 000000000000..b48ebace8270 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/content-switcher/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'content-switcher'; +@use 'content-switcher'; + +@include content-switcher.content-switcher; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_copy-button.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_copy-button.scss new file mode 100644 index 000000000000..3715d6c6d57b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_copy-button.scss @@ -0,0 +1,147 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../motion' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/keyframes' as *; +@use '../../utilities/tooltip' as *; +@use '../../utilities/visually-hidden' as *; + +@mixin copy-button { + .#{$prefix}--btn--copy { + position: relative; + overflow: visible; + + .#{$prefix}--btn__icon { + margin-left: rem(5px); + } + } + + .#{$prefix}--btn--copy__feedback { + position: absolute; + top: 1.2rem; + left: 50%; + display: none; + + &::before { + @include box-shadow; + @include type-style('body-short-01'); + + z-index: 2; + top: 1.1rem; + padding: $spacing-02; + border-radius: 4px; + color: $text-inverse; + content: attr(data-feedback); + font-weight: 400; + pointer-events: none; + transform: translateX(-50%); + white-space: nowrap; + } + + &::after { + z-index: 1; + top: 0.85rem; + left: -0.3rem; + width: 0.6rem; + height: 0.6rem; + border-right: 1px solid $background-inverse; + border-bottom: 1px solid $background-inverse; + content: ''; + transform: rotate(-135deg); + } + + &::before, + &::after { + position: absolute; + display: block; + background: $background-inverse; + } + + &--displayed { + display: inline-flex; + } + } + + // TODO: deprecate above styles + + .#{$prefix}--copy-btn { + @include reset; + + position: relative; + display: flex; + width: $spacing-08; + height: $spacing-08; + align-items: center; + justify-content: center; + padding: 0; + border: none; + background-color: $layer; + cursor: pointer; + + &:hover { + background-color: $layer-hover; + } + + &:active { + background-color: $layer-active; + } + + &::before { + @include tooltip--caret; + + display: none; + } + + .#{$prefix}--copy-btn__feedback { + @include tooltip--content('icon'); + + display: none; + overflow: visible; + box-sizing: content-box; + margin: auto; + clip: auto; + } + + @include tooltip--placement('icon', 'bottom', 'center'); + + &:focus { + @include focus-outline('outline'); + + outline-color: $focus; + } + + &.#{$prefix}--copy-btn--animating::before, + &.#{$prefix}--copy-btn--animating .#{$prefix}--copy-btn__feedback { + display: block; + } + + &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before, + &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out + .#{$prefix}--copy-btn__feedback { + // https://github.com/stylelint/stylelint/issues/2363 + animation: $duration-fast-02 motion(standard, productive) hide-feedback; + } + + &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before, + &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in + .#{$prefix}--copy-btn__feedback { + animation: $duration-fast-02 motion(standard, productive) show-feedback; + } + } + + // Needs to come after reset so hidden text is not set to font-size: 100% + .#{$prefix}--copy { + font-size: 0; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_index.scss new file mode 100644 index 000000000000..3786fb2e416b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/copy-button/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'copy-button'; +@use 'copy-button'; + +@include copy-button.copy-button; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_data-table.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_data-table.scss new file mode 100644 index 000000000000..be47444d01e6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_data-table.scss @@ -0,0 +1,996 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'mixins' as *; +@use 'vars' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/text-overflow' as *; + +/// Data table core styles +/// @access public +/// @group data-table +@mixin data-table { + //---------------------------------------------------------------------------- + // Container + //---------------------------------------------------------------------------- + .#{$prefix}--data-table-container { + position: relative; + // Allow space for focus styles + padding-top: $spacing-01; + } + + .#{$prefix}--data-table-content { + overflow-x: auto; + } + + //---------------------------------------------------------------------------- + // Table title text + //---------------------------------------------------------------------------- + .#{$prefix}--data-table-header { + padding: $spacing-05 0 $spacing-06 $spacing-05; + background: $layer; + } + + .#{$prefix}--data-table-header__title { + @include type-style('productive-heading-03'); + + color: $text-primary; + } + + .#{$prefix}--data-table-header__description { + @include type-style('body-short-01'); + + color: $text-secondary; + } + + //---------------------------------------------------------------------------- + // Data table + //---------------------------------------------------------------------------- + .#{$prefix}--data-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + } + + .#{$prefix}--data-table thead { + @include type-style('productive-heading-01'); + + background-color: $layer-accent; + } + + .#{$prefix}--data-table tbody { + @include type-style('body-short-01'); + + width: 100%; + background-color: $layer; + } + + .#{$prefix}--data-table tr { + width: 100%; + height: $spacing-09; + border: none; + } + + .#{$prefix}--data-table tbody tr, + .#{$prefix}--data-table tbody tr td, + .#{$prefix}--data-table tbody tr th { + transition: background-color $duration-fast-01 motion(entrance, productive); + } + + .#{$prefix}--data-table tbody tr:hover { + background: $layer-hover; + } + + .#{$prefix}--data-table tbody tr:hover td, + .#{$prefix}--data-table tbody tr:hover th { + border-top: 1px solid $layer-hover; + border-bottom: 1px solid $layer-hover; + background: $layer-hover; + color: $text-primary; + } + + .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link, + .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link { + color: $link-secondary; + } + + .#{$prefix}--data-table th, + .#{$prefix}--data-table td { + text-align: left; + vertical-align: middle; + } + + .#{$prefix}--data-table th { + padding-right: $spacing-05; + padding-left: $spacing-05; + background-color: $layer-accent; + color: $text-primary; + } + + .#{$prefix}--data-table th:last-of-type { + // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position + position: static; + width: auto; + } + + .#{$prefix}--data-table .#{$prefix}--table-header-label { + text-align: left; + } + + .#{$prefix}--data-table td, + .#{$prefix}--data-table tbody th { + padding-right: $spacing-05; + padding-left: $spacing-05; + border-top: 1px solid $layer; + border-bottom: 1px solid $border-subtle; + background: $layer; + color: $text-secondary; + + + td:first-of-type { + padding-left: $spacing-04; + } + } + + @supports (-moz-appearance: none) { + .#{$prefix}--data-table td { + // Fix to show borders in ff + background-clip: padding-box; + } + } + + // Form Control Overrides + + .#{$prefix}--data-table .#{$prefix}--list-box input[role='combobox'], + .#{$prefix}--data-table .#{$prefix}--list-box input[type='text'], + .#{$prefix}--data-table .#{$prefix}--dropdown, + .#{$prefix}--data-table .#{$prefix}--list-box, + .#{$prefix}--data-table .#{$prefix}--number input[type='number'], + .#{$prefix}--data-table .#{$prefix}--number__control-btn::before, + .#{$prefix}--data-table .#{$prefix}--number__control-btn::after, + .#{$prefix}--data-table .#{$prefix}--text-input, + .#{$prefix}--data-table .#{$prefix}--select-input { + background-color: $field-02; + } + + // Overflow Menu Overrides + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu[aria-expanded='false']:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu[aria-expanded='true']:focus { + outline: none; + } + + @media screen and (hover: hover), + (-ms-high-contrast: active), + (-ms-high-contrast: none) { + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu + .#{$prefix}--overflow-menu__icon { + opacity: 0; + } + } + + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open + .#{$prefix}--overflow-menu__icon { + opacity: 1; + } + + .#{$prefix}--data-table.#{$prefix}--data-table--visible-overflow-menu + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu + .#{$prefix}--overflow-menu__icon, + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu:hover + .#{$prefix}--overflow-menu__icon, + .#{$prefix}--data-table + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu:focus + .#{$prefix}--overflow-menu__icon, + .#{$prefix}--data-table + tr:hover + td.#{$prefix}--table-column-menu + .#{$prefix}--overflow-menu + .#{$prefix}--overflow-menu__icon { + opacity: 1; + } + + .#{$prefix}--table-row--menu-option + .#{$prefix}--overflow-menu-options__btn + .#{$prefix}--overflow-menu-options__option-content + svg { + position: relative; + // Used to center svg without setting display flex //display block needed for overflow text truncation + top: rem(3px); + margin-right: $spacing-03; + } + + .#{$prefix}--data-table .#{$prefix}--overflow-menu, + .#{$prefix}--data-table .#{$prefix}--overflow-menu__trigger { + &:hover { + background-color: $layer-selected-hover; + } + } + + .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu, + .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu__trigger { + &:hover { + background-color: $layer-hover; + } + } + + .#{$prefix}--data-table--selected .#{$prefix}--link { + color: $link-secondary; + } + + // V11: Remove compact, short styles + .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu, + .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu, + .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu, + .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { + height: rem(24px); + padding-top: 0; + padding-bottom: 0; + } + + // V11: Remove short styles + .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu, + .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { + height: rem(32px); + } + + .#{$prefix}--data-table--md td.#{$prefix}--table-column-menu { + height: rem(40px); + } + + // V11: Remove tall styles + .#{$prefix}--data-table--tall .#{$prefix}--table-column-menu, + .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu { + padding-top: $spacing-03; + } + + //---------------------------------------------------------------------------- + //ZEBRA + //---------------------------------------------------------------------------- + + .#{$prefix}--data-table--zebra + tbody + tr:not(.#{$prefix}--parent-row):nth-child(odd) + td { + border-bottom: 1px solid $layer; + } + + .#{$prefix}--data-table--zebra + tbody + tr:not(.#{$prefix}--parent-row):nth-child(even) + td { + border-top: 1px solid $layer-accent; + border-bottom: 1px solid $layer-accent; + background-color: $layer-accent; + } + + .#{$prefix}--data-table--zebra + tbody + tr:not(.#{$prefix}--parent-row):hover + td { + border-top: 1px solid $layer-hover; + border-bottom: 1px solid $layer-hover; + background-color: $layer-hover; + } + + //---------------------------------------------------------------------------- + // Select + //---------------------------------------------------------------------------- + .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label { + padding-left: 0; + } + + .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox { + // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position + position: static; + width: rem(32px); + background: $layer-accent; + transition: background-color $duration-fast-01 motion(entrance, productive); + } + + .#{$prefix}--data-table + .#{$prefix}--table-column-checkbox + .#{$prefix}--checkbox:focus + + .#{$prefix}--checkbox-label::before { + //make checkbox focus larger to match expansion btn focus + outline-offset: rem(6px); + } + + .#{$prefix}--data-table--compact + .#{$prefix}--table-column-checkbox + .#{$prefix}--checkbox:focus + + .#{$prefix}--checkbox-label::before, + .#{$prefix}--data-table--xs + .#{$prefix}--table-column-checkbox + .#{$prefix}--checkbox:focus + + .#{$prefix}--checkbox-label::before { + //make checkbox match expansion button focus size + outline-offset: rem(2px); + } + + .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox, + .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox, + .#{$prefix}--data-table thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table tbody td.#{$prefix}--table-expand { + min-width: 0; + } + + .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox, + .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox { + width: 2.5rem; + // spacing between checkbox / chevron and next cell should be 8px / 0.5rem + padding-right: rem(4px); + padding-left: 1rem; + } + + .#{$prefix}--data-table thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table tbody td.#{$prefix}--table-expand { + width: rem(32px); + height: rem(32px); + } + + // V11: Remove compact + .#{$prefix}--data-table--compact thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--compact tbody td.#{$prefix}--table-expand, + .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand { + width: rem(24px); + height: rem(24px); + padding: 0 0 0 0.5rem; + } + + // V11: remove short + .#{$prefix}--data-table--short thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--short tbody td.#{$prefix}--table-expand, + .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand { + width: rem(32px); + height: rem(32px); + padding: 0; + padding-left: 0.5rem; + } + + .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand { + width: rem(40px); + height: rem(40px); + padding: rem(4px) 0 rem(4px) rem(8px); + } + + // V11: remove tall + .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand, + .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand, + .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand { + height: rem(64px); + padding-top: rem(10px); + padding-bottom: rem(22px); + } + + // V11: remove tall + .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox, + .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox { + padding-top: rem(13px); + } + + // V11: remove tall + .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio, + .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio { + padding-top: $spacing-05; + } + + .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover { + background: $data-table-column-hover; + } + + //---------------------------------------------------------------------------- + // Radio + //---------------------------------------------------------------------------- + .#{$prefix}--table-column-radio { + width: 48px; + } + + .#{$prefix}--table-column-radio .#{$prefix}--radio-button__appearance { + margin-right: rem(-2px); + } + + // default selected row + zebra select - even child + .#{$prefix}--data-table--zebra + tbody + tr:nth-child(odd).#{$prefix}--data-table--selected + td, + tr.#{$prefix}--data-table--selected td { + border-top: 1px solid $layer-selected; + // Bottom border acts as separator from other rows + border-bottom: 1px solid $layer-active; + background-color: $layer-selected; + color: $text-primary; + } + + // First row + .#{$prefix}--data-table--zebra + tbody + tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected + td, + tr.#{$prefix}--data-table--selected:first-of-type td { + // Top border acts as separator from thead + border-top: 1px solid $layer-active; + } + + // last row + zebra select last + .#{$prefix}--data-table--zebra + tbody + tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected + td, + .#{$prefix}--data-table--zebra + tbody + tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected + td, + tr.#{$prefix}--data-table--selected:last-of-type td { + // Doesn't need separators + border-top: 1px solid $layer-selected; + border-bottom: 1px solid $layer-selected; + } + + // zebra select - odd child + .#{$prefix}--data-table--zebra + tbody + tr:nth-child(even).#{$prefix}--data-table--selected + td { + border-bottom: 1px solid $layer-active; + } + + .#{$prefix}--data-table--zebra + tbody + tr:nth-child(even).#{$prefix}--data-table--selected:hover + td { + border-bottom: 1px solid $data-table-column-hover; + } + + // hover + zebra select - even child + .#{$prefix}--data-table--zebra + tbody + tr:nth-child(odd).#{$prefix}--data-table--selected:hover + td, + .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td { + border-top: 1px solid $data-table-column-hover; + border-bottom: 1px solid $data-table-column-hover; + background: $data-table-column-hover; + color: $text-primary; + } + + // selected overflow menu + .#{$prefix}--data-table--selected + .#{$prefix}--overflow-menu + .#{$prefix}--overflow-menu__icon { + opacity: 1; + } + + // V11: Remove this compact block + //---------------------------------------------------------------------------- + // Compact + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--compact thead tr, + .#{$prefix}--data-table--compact tbody tr, + .#{$prefix}--data-table--compact tbody tr th { + height: rem(24px); + } + + .#{$prefix}--data-table--compact .#{$prefix}--table-header-label { + padding-top: rem(2px); + padding-bottom: rem(2px); + } + + .#{$prefix}--data-table--compact td, + .#{$prefix}--data-table--compact tbody tr th { + padding-top: rem(2px); + padding-bottom: rem(2px); + } + + .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu { + width: rem(32px); + height: 100%; + } + + .#{$prefix}--data-table.#{$prefix}--data-table--compact + .#{$prefix}--table-column-checkbox { + padding-top: 0; + padding-bottom: 0; + } + + .#{$prefix}--data-table.#{$prefix}--data-table--compact + .#{$prefix}--table-column-checkbox + .#{$prefix}--checkbox-label { + height: rem(23px); + // 24px row - 1px border + min-height: rem(23px); + } + + //---------------------------------------------------------------------------- + // Extra Small + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--xs thead tr, + .#{$prefix}--data-table--xs tbody tr, + .#{$prefix}--data-table--xs tbody tr th { + height: rem(24px); + } + + .#{$prefix}--data-table--xs .#{$prefix}--table-header-label { + padding-top: rem(2px); + padding-bottom: rem(2px); + } + + .#{$prefix}--data-table--xs td, + .#{$prefix}--data-table--xs tbody tr th { + padding-top: rem(2px); + padding-bottom: rem(2px); + } + + .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu { + width: rem(32px); + height: calc(100% + 1px); + } + + .#{$prefix}--data-table.#{$prefix}--data-table--xs + .#{$prefix}--table-column-checkbox { + padding-top: 0; + padding-bottom: 0; + } + + .#{$prefix}--data-table.#{$prefix}--data-table--xs + .#{$prefix}--table-column-checkbox + .#{$prefix}--checkbox-label { + height: rem(23px); + // 24px row - 1px border + min-height: rem(23px); + } + + // V11: Remove this short block + //---------------------------------------------------------------------------- + // Short + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--short thead tr, + .#{$prefix}--data-table--short tbody tr, + .#{$prefix}--data-table--short tbody tr th { + height: rem(32px); + } + + .#{$prefix}--data-table--short .#{$prefix}--table-header-label { + padding-top: rem(7px); + padding-bottom: rem(7px); + } + + .#{$prefix}--data-table--short td, + .#{$prefix}--data-table--short tbody tr th { + padding-top: rem(7px); + padding-bottom: rem(6px); + } + + .#{$prefix}--data-table.#{$prefix}--data-table--short + .#{$prefix}--table-column-checkbox { + padding-top: rem(3px); + padding-bottom: rem(3px); + } + + .#{$prefix}--data-table--short .#{$prefix}--overflow-menu { + height: 100%; + } + + //---------------------------------------------------------------------------- + // Small + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--sm thead tr, + .#{$prefix}--data-table--sm tbody tr, + .#{$prefix}--data-table--sm tbody tr th { + height: rem(32px); + } + + .#{$prefix}--data-table--sm .#{$prefix}--table-header-label { + padding-top: rem(7px); + padding-bottom: rem(7px); + } + + .#{$prefix}--data-table--sm td, + .#{$prefix}--data-table--sm tbody tr th { + padding-top: rem(7px); + padding-bottom: rem(6px); + } + + .#{$prefix}--data-table.#{$prefix}--data-table--sm + .#{$prefix}--table-column-checkbox { + padding-top: rem(3px); + padding-bottom: rem(3px); + } + + .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu { + height: calc(100% + 1px); + } + + //---------------------------------------------------------------------------- + // Medium + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--md thead tr, + .#{$prefix}--data-table--md tbody tr, + .#{$prefix}--data-table--md tbody tr th { + height: rem(40px); + } + + .#{$prefix}--data-table--md .#{$prefix}--table-header-label { + padding-top: rem(7px); + padding-bottom: rem(7px); + } + + .#{$prefix}--data-table--md td, + .#{$prefix}--data-table--md tbody tr th { + padding-top: rem(7px); + padding-bottom: rem(6px); + } + + .#{$prefix}--data-table.#{$prefix}--data-table--md + .#{$prefix}--table-column-checkbox { + padding-top: rem(3px); + padding-bottom: rem(3px); + } + + .#{$prefix}--data-table--md .#{$prefix}--table-column-menu { + padding-top: rem(3px); + padding-bottom: rem(3px); + } + + // V11: remove this tall block + //---------------------------------------------------------------------------- + // Tall + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--tall thead tr, + .#{$prefix}--data-table--tall tbody tr, + .#{$prefix}--data-table--tall tbody tr th { + height: rem(64px); + } + + .#{$prefix}--data-table--tall .#{$prefix}--table-header-label { + padding-top: $spacing-05; + padding-bottom: $spacing-05; + } + + .#{$prefix}--data-table--tall td, + .#{$prefix}--data-table--tall tbody tr th { + padding-top: 1rem; + } + + .#{$prefix}--data-table--tall th, + .#{$prefix}--data-table--tall td { + vertical-align: top; + } + + .#{$prefix}--data-table--tall .#{$prefix}--data-table--cell-secondary-text { + @include type-style('label-01'); + } + + //---------------------------------------------------------------------------- + // Extra Large + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--xl thead tr, + .#{$prefix}--data-table--xl tbody tr, + .#{$prefix}--data-table--xl tbody tr th { + height: rem(64px); + } + + .#{$prefix}--data-table--xl .#{$prefix}--table-header-label { + padding-top: $spacing-05; + padding-bottom: $spacing-05; + } + + .#{$prefix}--data-table--xl td, + .#{$prefix}--data-table--xl tbody tr th { + padding-top: 1rem; + } + + .#{$prefix}--data-table--xl th, + .#{$prefix}--data-table--xl td { + vertical-align: top; + } + + .#{$prefix}--data-table--xl .#{$prefix}--data-table--cell-secondary-text { + @include type-style('label-01'); + } + + //---------------------------------------------------------------------------- + // Static + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--static { + width: auto; + } + + // ------------- + // Sticky header + // ------------- + .#{$prefix}--data-table_inner-container { + background-color: $layer-accent; + transform: translateZ(0); + } + + .#{$prefix}--data-table--sticky-header { + display: block; + overflow-y: scroll; + + thead, + tbody, + tr, + th, + td { + display: flex; + } + + thead { + position: sticky; + z-index: 1; + top: 0; + overflow: scroll; + width: 100%; + // Hides ie scrollbar + -ms-overflow-style: none; + will-change: transform; + } + + thead tr th { + border-bottom: 1px solid $layer-active; + } + + tbody { + flex-direction: column; + // Hides ie scrollbar + -ms-overflow-style: none; + overflow-x: scroll; + will-change: transform; + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row { + height: auto; + min-height: 3rem; + } + + tr.#{$prefix}--expandable-row:not(.#{$prefix}--parent-row) { + height: auto; + } + + .#{$prefix}--table-expand { + max-width: rem(48px); + } + + thead .#{$prefix}--table-expand { + align-items: center; + } + + .#{$prefix}--parent-row { + min-height: 3rem; + } + + // V11: remove compact, tall, and short + &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--sm) + td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) { + padding-top: rem(14px); + } + + // Taken from L125 _data-table-expandable + // Used to hide white line when parent row is hovered when child is expanded + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + + tr[data-child-row] + td { + border-top: 1px solid $layer-hover; + } + + tr.#{$prefix}--expandable-row:last-of-type { + overflow: hidden; + } + + tr.#{$prefix}--data-table--selected:first-of-type td { + border-top: none; + } + + // Selectable fix + thead th.#{$prefix}--table-column-checkbox, + tbody tr td.#{$prefix}--table-column-checkbox { + width: rem(36px); + min-width: rem(36px); + align-items: center; + } + + // V11: remove tall + &.#{$prefix}--data-table--tall thead th.#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--xl thead th.#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--tall td.#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--xl td.#{$prefix}--table-column-checkbox { + align-items: flex-start; + } + + // Overflow fix + /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */ + th.#{$prefix}--table-column-checkbox ~ th:last-of-type:empty { + max-width: rem(64px); + } + + th:empty:not(.#{$prefix}--table-expand) { + max-width: 2.25rem; + } + + td.#{$prefix}--table-column-menu { + height: auto; + align-items: center; + padding-top: 0; + } + + //hides webkit scrollbar + thead::-webkit-scrollbar, + tbody::-webkit-scrollbar { + display: none; + } + + //hides ff scrollbar + @-moz-document url-prefix() { + thead, + tbody { + scrollbar-width: none; + } + } + + tbody tr:last-of-type { + border-bottom: 0; + } + + th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon), + td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { + width: 100%; + min-width: 0; + } + + // V11: remove compact, short, tall + &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) { + height: auto; + } + + // Compact + // V11: remove compact + &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) { + min-height: rem(24px); + } + + // Short + // V11: remove short + &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) { + min-height: rem(32px); + } + + // Tall + // V11: remove tall + &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row), + &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) { + min-height: rem(64px); + } + + // Expansion overrides + // V11: remove compact + &.#{$prefix}--data-table--compact tr td.#{$prefix}--table-expand, + &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand { + padding-top: rem(4px); + } + + // V11: remove short + &.#{$prefix}--data-table--short tr td.#{$prefix}--table-expand, + &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand { + padding-top: rem(8px); + } + + .#{$prefix}--table-header-label { + @include text-overflow; + + max-width: calc(100% - 10px); + // Needed to reduce 1px jump when toggling between variations + padding-top: rem(15px); + padding-bottom: 1rem; + overflow-y: hidden; + } + + // V11: remove compact + &.#{$prefix}--data-table--compact th .#{$prefix}--table-header-label, + &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label { + padding-top: rem(3px); + padding-bottom: 0; + } + + // V11: remove short + &.#{$prefix}--data-table--short th .#{$prefix}--table-header-label, + &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label { + padding-top: rem(8px); + padding-bottom: 0; + } + + // V11: remove tall + &.#{$prefix}--data-table--tall th .#{$prefix}--table-header-label, + &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label { + padding-top: 1rem; + } + + // V11: remove tall + &.#{$prefix}--data-table--tall th.#{$prefix}--table-expand, + &.#{$prefix}--data-table--xl th.#{$prefix}--table-expand { + display: flex; + align-items: flex-start; + } + + // With dynamic content overrides + // V11: remove compact, short + &.#{$prefix}--data-table--compact + tr.#{$prefix}--parent-row + .#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--short + tr.#{$prefix}--parent-row + .#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--xs + tr.#{$prefix}--parent-row + .#{$prefix}--table-column-checkbox, + &.#{$prefix}--data-table--sm + tr.#{$prefix}--parent-row + .#{$prefix}--table-column-checkbox { + align-items: flex-start; + } + } + + @include sticky-header($max-width: 100%); + + // ------------------- + // with boolean column + // ------------------- + .#{$prefix}--data-table + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { + margin: 0; + } + + // V11: remove short, compact + .#{$prefix}--data-table--short + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type, + .#{$prefix}--data-table--compact + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type, + .#{$prefix}--data-table--xs + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type, + .#{$prefix}--data-table--sm + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { + margin: rem(-3px) 0; + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--data-table-content { + @include high-contrast-mode('outline'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_index.scss new file mode 100644 index 000000000000..4c1cb39060d5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_index.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'vars'; +@forward 'data-table'; +@use 'data-table'; + +@include data-table.data-table; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_mixins.scss new file mode 100644 index 000000000000..466fb948e76e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_mixins.scss @@ -0,0 +1,34 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@use '../../config' as *; + +// @access public +// @content Includes a block of styles for sticky data tables that sets table max-width, max-height and column min-width +// @example - @include sticky-header($max-height: rem(900px), $min-width: rem(30px)); +// @param {value} $max-width [100%] - sets the max-width of the data table parent container +// @param {value} $max-height [rem(300px)] - sets the max-height of the data table +// @param {value} $min-width [rem(100px)] - sets the min-width of th's and td's so their sizes align +@mixin sticky-header( + $min-width: false, + $max-width: 100%, + $max-height: rem(300px) +) { + .#{$prefix}--data-table--max-width { + max-width: $max-width; + } + + .#{$prefix}--data-table--sticky-header { + max-height: $max-height; + + @if $min-width { + th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon), + td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { + min-width: $min-width; + } + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_vars.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_vars.scss new file mode 100644 index 000000000000..4ac909c4f232 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_vars.scss @@ -0,0 +1,13 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../theme' as *; + +/// @type Color +/// @access public +/// @group data-table +$data-table-column-hover: $layer-selected-hover !default; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_data-table-action.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_data-table-action.scss new file mode 100644 index 000000000000..dfe8bc015a37 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_data-table-action.scss @@ -0,0 +1,661 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../../config' as *; +@use '../../../motion' as *; +@use '../../../spacing' as *; +@use '../../../theme' as *; +@use '../../../type' as *; +@use '../../../utilities/button-reset'; +@use '../../../utilities/convert' as *; +@use '../../../utilities/focus-outline' as *; +@use '../../button/vars' as *; + +/// Data table action styles +/// @access public +/// @group data-table +@mixin data-table-action { + //------------------------------------------------- + //TOOLBAR + //------------------------------------------------- + .#{$prefix}--table-toolbar { + // Need for batch actions + position: relative; + display: flex; + overflow: hidden; + width: 100%; + height: $spacing-09; + background-color: $layer; + } + + .#{$prefix}--toolbar-content { + display: flex; + width: 100%; + height: $spacing-09; + justify-content: flex-end; + transform: translate3d(0, 0, 0); + transition: transform $duration-fast-02 motion(standard, productive), + clip-path $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content { + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + } + + .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input { + height: 3rem; + padding: 0 3rem; + // For toolbar animation with (esp.) persistent search box + background-color: transparent; + } + + .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { + width: 3rem; + height: 3rem; + } + + //------------------------------------------------- + //DEPRECATED v10/v9 search behavior + //------------------------------------------------- + .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container { + display: flex; + align-items: center; + opacity: 1; + transition: opacity 110ms; + } + + //------------------------------------------------- + //HIDDEN SEARCH - DEFAULT TOOLBAR + //------------------------------------------------- + .#{$prefix}--toolbar-search-container-expandable { + position: relative; + width: $spacing-09; + height: $spacing-09; + box-shadow: none; + cursor: pointer; + transition: width $transition--expansion $standard-easing, + background-color $duration-fast-02 motion(entrance, productive); + + &:hover { + background-color: $field-hover; + } + } + + .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable { + width: 3rem; + } + + .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input { + height: 100%; + cursor: pointer; + opacity: 0; + } + + .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active) + .#{$prefix}--search-input { + padding: 0; + } + + .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input { + cursor: not-allowed; + } + + .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search + .#{$prefix}--label { + visibility: hidden; + } + + .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search + .#{$prefix}--search-close { + width: $spacing-09; + height: $spacing-09; + + &::before { + top: rem(2px); + height: calc(100% - #{rem(4px)}); + background-color: $field-hover; + } + } + + .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search + .#{$prefix}--search-close:focus::before { + background-color: $focus; + } + + //------------------------------------------------- + // Seach icon + //-------------------------------------------------v + // lg expandable icon spacing + .#{$prefix}--table-toolbar + .#{$prefix}--search--lg + .#{$prefix}--search-magnifier-icon { + left: 0; + } + + // lg persistent icon spacing + .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm) + .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg + .#{$prefix}--search-magnifier-icon { + left: 1rem; + } + + // sm expandable icon spacing + .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm + .#{$prefix}--search--sm:not(.#{$prefix}--toolbar-search-container-active):not(.#{$prefix}--toolbar-search-container-persistent) + .#{$prefix}--search-magnifier-icon { + left: 0; + } + + .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm + .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon { + left: 0.5rem; + } + + // sm persistent icon spacing + .#{$prefix}--table-toolbar + .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm + .#{$prefix}--search-magnifier-icon { + left: 0.5rem; + } + + .#{$prefix}--toolbar-search-container-expandable + .#{$prefix}--search-magnifier-icon { + width: $spacing-09; + height: $spacing-09; + padding: $spacing-05; + } + + .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled + .#{$prefix}--search-magnifier-icon { + background-color: $layer; + cursor: not-allowed; + transition: background-color none; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:focus, + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:active, + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:hover { + border: none; + background-color: transparent; + outline: none; + } + + //------------------------------------------------- + //ACTIVE SEARCH - DEFAULT TOOLBAR + //------------------------------------------------- + + .#{$prefix}--toolbar-search-container-active.#{$prefix}--search { + width: 100%; + } + + .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input { + opacity: 1; + } + + .#{$prefix}--toolbar-search-container-active .#{$prefix}--label, + .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input { + padding: 0 $spacing-09; + cursor: text; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-input:focus + + .#{$prefix}--search-close { + border: none; + box-shadow: none; + outline: none; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-input:not(:placeholder-shown) { + border: none; + background-color: $field-hover; + } + + //------------------------------------------------- + //SEARCH CLOSE BUTTON + //------------------------------------------------- + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close, + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-close:hover, + .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close, + .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover { + border: none; + background-color: transparent; + } + + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-close::before { + display: none; + } + + //------------------------------------------------- + //TOOLBAR BUTTONS + //------------------------------------------------- + .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action { + @include button-reset.reset; + + display: flex; + width: $spacing-09; + height: $spacing-09; + padding: $spacing-05; + cursor: pointer; + transition: background $duration-fast-02 motion(entrance, productive); + } + + // DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead + .#{$prefix}--toolbar-action { + @include button-reset.reset; + + display: flex; + width: $spacing-09; + height: $spacing-09; + cursor: pointer; + transition: background $duration-fast-02 motion(entrance, productive); + } + + .#{$prefix}--toolbar-action:hover:not([disabled]) { + background-color: $field-hover; + } + + .#{$prefix}--toolbar-action:hover[aria-expanded='true'] { + background-color: $layer; + } + + .#{$prefix}--toolbar-action[disabled] { + cursor: not-allowed; + } + + .#{$prefix}--toolbar-action[disabled] .#{$prefix}--toolbar-action__icon { + cursor: not-allowed; + fill: $icon-disabled; + } + + .#{$prefix}--toolbar-action:focus:not([disabled]), + .#{$prefix}--toolbar-action:active:not([disabled]) { + @include focus-outline('outline'); + + &.#{$prefix}--toolbar-search-container-expandable { + // The focus style is handled by search input in it, need to avoid duplicate animation + outline: none; + } + } + + .#{$prefix}--toolbar-action ~ .#{$prefix}--btn { + max-width: none; + margin: 0; + white-space: nowrap; + } + + .#{$prefix}--overflow-menu--data-table { + height: $spacing-09; + } + + //------------------------------------------------- + //TOOLBAR BUTTON ICONS + //------------------------------------------------- + .#{$prefix}--toolbar-action__icon { + width: auto; + max-width: $spacing-05; + height: $spacing-05; + fill: $icon-primary; + } + + //------------------------------------------------- + //PERSISTENT SEARCH - OPTIONAL TOOLBAR + //------------------------------------------------- + .#{$prefix}--toolbar-search-container-persistent { + position: relative; + width: 100%; + height: $spacing-09; + opacity: 1; + } + + .#{$prefix}--toolbar-search-container-persistent + + .#{$prefix}--toolbar-content { + position: relative; + width: auto; + } + + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search { + position: initial; + } + + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-magnifier-icon { + left: $spacing-05; + } + + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input { + height: $spacing-09; + padding: 0 $spacing-09; + border: none; + } + + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-input:focus:not([disabled]) { + @include focus-outline('outline'); + } + + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-input:hover:not([disabled]) { + background-color: $field-hover; + } + + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-input:active:not([disabled]), + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-input:not(:placeholder-shown) { + background-color: $field-hover; + } + + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { + width: $spacing-09; + height: $spacing-09; + } + + .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container, + .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content { + clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + transform: translate3d(0, 48px, 0); + transition: transform $duration-fast-02 motion(standard, productive), + clip-path $duration-fast-02 motion(standard, productive); + } + + //------------------------------------------------- + //BATCH ACTIONS + //------------------------------------------------- + .#{$prefix}--batch-actions { + position: absolute; + top: 0; + left: 0; + display: flex; + width: 100%; + height: 100%; + align-items: center; + padding-right: $spacing-06; + padding-left: $spacing-06; + background-color: $background-brand; + clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + overflow-x: auto; + pointer-events: none; + transform: translate3d(0, 48px, 0); + transition: transform $duration-fast-02 motion(standard, productive), + clip-path $duration-fast-02 motion(standard, productive), + opacity $duration-fast-02 motion(standard, productive); + will-change: transform; + } + + .#{$prefix}--batch-actions:focus { + @include focus-outline; + } + + .#{$prefix}--batch-actions--active { + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + pointer-events: all; + transform: translate3d(0, 0, 0); + } + + //btns container + .#{$prefix}--action-list { + position: absolute; + right: 0; + display: flex; + } + + .#{$prefix}--action-list .#{$prefix}--btn { + min-width: 0; + padding: $button-padding-ghost; + color: $text-on-color; + } + + .#{$prefix}--action-list .#{$prefix}--btn:disabled { + color: $text-on-color-disabled; + } + + .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon { + position: static; + margin-left: $spacing-03; + fill: $icon-on-color; + } + + .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon .st0 { + fill: none; + } + + .#{$prefix}--batch-download { + //makes it smaller to match other icons + padding: rem(1px); + } + + // Override btn styles + .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::before, + .#{$prefix}--action-list .#{$prefix}--btn--primary::before, + .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::after, + .#{$prefix}--action-list .#{$prefix}--btn--primary::after { + display: none; + } + + .#{$prefix}--action-list .#{$prefix}--btn--primary:focus { + outline: 2px solid $layer; + outline-offset: rem(-2px); + } + + // cancel btn pseudo element + .#{$prefix}--action-list + .#{$prefix}--btn--primary:nth-child(3):hover + + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before, + .#{$prefix}--action-list + .#{$prefix}--btn--primary:nth-child(3):focus + + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { + opacity: 0; + } + + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { + position: absolute; + //visually 16px spacing is 1px too low + top: rem(15px); + left: 0; + display: block; + width: rem(1px); + height: $spacing-05; + border: none; + background-color: $text-on-color; + content: ''; + opacity: 1; + transition: opacity $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before { + opacity: 0; + transition: opacity $transition--base $standard-easing; + } + + // cancel btn + .#{$prefix}--batch-summary__cancel { + position: relative; + padding-right: $spacing-05; + } + + // items selected text + .#{$prefix}--batch-summary { + position: absolute; + left: 0; + display: flex; + align-items: center; + margin-left: $spacing-05; + color: $text-on-color; + } + + .#{$prefix}--batch-summary__para { + @include type-style('body-short-01'); + } + + //------------------------------------------------- + //SMALL TOOLBAR + //------------------------------------------------- + // V11: remove --small + .#{$prefix}--table-toolbar--small, + .#{$prefix}--table-toolbar--sm { + height: rem(32px); + min-height: rem(32px); + + .#{$prefix}--toolbar-search-container-expandable, + .#{$prefix}--toolbar-search-container-persistent { + height: rem(32px); + } + + .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input, + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input { + height: rem(32px); + } + + .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close, + .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { + width: rem(32px); + height: rem(32px); + } + + .#{$prefix}--toolbar-search-container-expandable + .#{$prefix}--search-magnifier-icon, + .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--search-magnifier-icon { + width: rem(32px); + height: rem(32px); + padding: $spacing-03; + } + + .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent { + width: 100%; + } + + //hidden + .#{$prefix}--toolbar-search-container-expandable { + width: rem(32px); + } + + .#{$prefix}--toolbar-search-container-expandable + .#{$prefix}--search + .#{$prefix}--search-input { + padding: 0 $spacing-09; + } + + //active + .#{$prefix}--toolbar-search-container-active { + flex: auto; + transition: flex 175ms $standard-easing; + } + + .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input { + visibility: inherit; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-input:focus { + @include focus-outline('outline'); + + background-color: $field-hover; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-input:active, + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-input:not(:placeholder-shown) { + background-color: $field-hover; + } + + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:focus, + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:active, + .#{$prefix}--toolbar-search-container-active + .#{$prefix}--search-magnifier-icon:hover { + @include focus-outline('reset'); + + background-color: transparent; + } + + .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action { + width: rem(32px); + //:after element is 2rem but w/o this trigger button is for some reason 28px + min-width: rem(32px); + height: rem(32px); + } + + .#{$prefix}--toolbar-content { + height: rem(32px); + } + + .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { + width: 2rem; + height: 2rem; + } + } + + .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover { + background-color: transparent; + } + + //------------------------------------------------- + // SMALL BATCH ACTIONS + //------------------------------------------------- + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small + .#{$prefix}--batch-actions + .#{$prefix}--action-list, + .#{$prefix}--table-toolbar--sm + .#{$prefix}--batch-actions + .#{$prefix}--action-list { + height: rem(32px); + } + + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action, + .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action { + width: rem(32px); + height: rem(32px); + padding: $spacing-03 0; + } + + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary, + .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary { + height: rem(32px); + min-height: auto; + padding-top: calc(0.375rem - 3px); + padding-bottom: calc(0.375rem - 3px); + } + + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before, + .#{$prefix}--table-toolbar--sm + .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { + top: rem(8px); + } + + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small + .#{$prefix}--toolbar-action + ~ .#{$prefix}--btn, + .#{$prefix}--table-toolbar--sm + .#{$prefix}--toolbar-action + ~ .#{$prefix}--btn { + overflow: hidden; + height: rem(32px); + } + + // V11: remove --small selector block + .#{$prefix}--table-toolbar--small .#{$prefix}--batch-summary, + .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary { + min-height: 2rem; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_index.scss new file mode 100644 index 000000000000..769d5126950f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'data-table-action'; +@use 'data-table-action'; + +@include data-table-action.data-table-action; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_data-table-expandable.scss new file mode 100644 index 000000000000..6e4c75d2f45c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_data-table-expandable.scss @@ -0,0 +1,409 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../../config' as *; +@use '../../../motion' as *; +@use '../../../spacing' as *; +@use '../../../theme' as *; +@use '../../../utilities/button-reset'; +@use '../../../utilities/convert' as *; +@use '../../../utilities/focus-outline' as *; +@use '../../../utilities/high-contrast-mode' as *; + +/// Data table expandable styles +/// @access public +/// @group data-table +@mixin data-table-expandable { + //---------------------------------------------------------------------------- + // Parent row + //---------------------------------------------------------------------------- + //first row top border + .#{$prefix}--data-table tr.#{$prefix}--parent-row:first-of-type td { + border-top: 1px solid $border-subtle; + } + + //---------------------------------------------------------------------------- + // Child row + //---------------------------------------------------------------------------- + // default styles + .#{$prefix}--expandable-row--hidden td { + width: auto; + padding: $spacing-05; + border-top: 0; + } + + //child row hidden + tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + + tr[data-child-row] { + height: 0; + transition: height $duration-moderate-01 motion(standard, productive); + } + + tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + + tr[data-child-row] + td { + padding-top: 0; + padding-bottom: 0; + border: 0; + background-color: $layer-hover; + transition: padding $duration-moderate-01 motion(standard, productive), + background-color $duration-moderate-01 motion(standard, productive); + } + + tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + + tr[data-child-row] + td + .#{$prefix}--child-row-inner-container { + overflow: hidden; + max-height: 0; + } + + //child row visible + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] { + transition: height $duration-moderate-01 motion(standard, productive); + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td { + padding-left: 4rem; + border-bottom: 1px solid $border-subtle; + transition: padding-bottom $duration-fast-02 motion(standard, productive), + transform $duration-fast-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive); + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + + tr[data-child-row] + td + .#{$prefix}--child-row-inner-container { + max-height: 100%; + } + + // bottom border overrides + .#{$prefix}--parent-row.#{$prefix}--expandable-row > td, + .#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] > td { + border-bottom: 1px solid $border-subtle; + box-shadow: 0 1px $border-subtle; + } + + .#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + + tr[data-child-row] + > td { + box-shadow: none; + } + + .#{$prefix}--parent-row.#{$prefix}--expandable-row > td:first-of-type { + // First td doesn't have a visible border + box-shadow: none; + } + + //---------------------------------------------------------------------------- + // Hover styles + //---------------------------------------------------------------------------- + tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td, + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td, + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row { + transition: height $duration-moderate-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive); + } + + // hovering on collapsed parent + tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover + td { + border-top: 1px solid $border-subtle; + border-bottom: 1px solid $border-subtle; + } + + // hovering on expanded parent + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td { + border-top: 1px solid $border-subtle; + border-bottom: 1px solid $border-subtle; + background-color: $layer-hover; + color: $text-primary; + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type { + // First td doesn't have a visible border + border-bottom: 1px solid $layer-hover; + } + + // Child row when hovering on expanded parent + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + + tr[data-child-row] + td { + border-bottom: 1px solid $border-subtle; + background-color: $layer-hover; + color: $text-primary; + } + + //hovering on expanded child row + tr.#{$prefix}--expandable-row--hover + tr[data-child-row] td { + border-bottom: 1px solid $border-subtle; + } + + //hovering on expanded child row (class added to parent) + tr.#{$prefix}--expandable-row--hover { + background-color: $layer-hover; + } + + tr.#{$prefix}--expandable-row--hover td { + border-top: 1px solid $border-subtle; + border-bottom: 1px solid $border-subtle; + background-color: $layer-hover; + color: $text-primary; + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover + td:first-of-type { + // First parent td doesn't have visible bottom border + border-bottom: 1px solid transparent; + } + + //---------------------------------------------------------------------------- + // Expand icon column + //---------------------------------------------------------------------------- + .#{$prefix}--data-table td.#{$prefix}--table-expand { + border-bottom: 1px solid $border-subtle; + } + + .#{$prefix}--data-table + th.#{$prefix}--table-expand + + .#{$prefix}--table-column-checkbox, + .#{$prefix}--data-table + td.#{$prefix}--table-expand + + .#{$prefix}--table-column-checkbox { + padding-right: rem(6px); + padding-left: rem(6px); + } + + .#{$prefix}--data-table + th.#{$prefix}--table-expand + + .#{$prefix}--table-column-checkbox + + th, + .#{$prefix}--data-table + td.#{$prefix}--table-expand + + .#{$prefix}--table-column-checkbox + + td { + padding-left: rem(8px); + } + + .#{$prefix}--data-table td.#{$prefix}--table-expand, + .#{$prefix}--data-table th.#{$prefix}--table-expand { + padding: 0.5rem; + padding-right: 0; + } + + .#{$prefix}--data-table + td.#{$prefix}--table-expand[data-previous-value='collapsed'] { + border-bottom: 1px solid transparent; + } + + .#{$prefix}--table-expand[data-previous-value='collapsed'] + .#{$prefix}--table-expand__svg { + transform: rotate(270deg); + transition: transform $duration-moderate-01 motion(standard, productive); + } + + .#{$prefix}--table-expand__button { + @include button-reset.reset('false'); + + display: inline-flex; + width: 100%; + // Account for the border in `.bx--table-expand` + height: calc(100% + 1px); + align-items: center; + justify-content: center; + padding: 0 0.5rem; + vertical-align: inherit; + } + + .#{$prefix}--table-expand__button:focus { + box-shadow: inset 0 0 0 2px $focus; + outline: none; + } + + .#{$prefix}--table-expand__svg { + fill: $layer-selected-inverse; + transform: rotate(90deg); + transition: transform $duration-moderate-01 motion(standard, productive); + } + + // V11: remove tall + .#{$prefix}--data-table--tall .#{$prefix}--table-expand__button, + .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button { + width: rem(32px); + padding: 0; + } + + // fix expanded parent separating border length + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + td.#{$prefix}--table-expand + + td::after { + position: absolute; + bottom: rem(-1px); + left: 0; + width: rem(8px); + height: rem(1px); + background: $layer-accent; + content: ''; + } + + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + td.#{$prefix}--table-expand + + td::after, + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover + td.#{$prefix}--table-expand + + td::after { + background: $layer-hover; + } + + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected + td.#{$prefix}--table-expand + + td::after { + display: none; + } + + //---------------------------------------------------------------------------- + //ZEBRA + //---------------------------------------------------------------------------- + .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td, + .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td { + border-bottom: 1px solid $layer; + } + + .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td, + .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td { + border-top: 1px solid $layer-accent; + border-bottom: 1px solid $layer-accent; + background-color: $layer-accent; + } + + .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td, + .#{$prefix}--data-table--zebra + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + + tr[data-child-row] + td { + transition: transform $duration-moderate-01 motion(standard, productive), + border-bottom $duration-moderate-01 motion(standard, productive), + border-top $duration-moderate-01 motion(standard, productive); + } + + .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:hover td, + .#{$prefix}--data-table--zebra + tbody + tr[data-parent-row]:hover + + tr[data-child-row] + td, + .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td { + border-top: 1px solid $layer-hover; + border-bottom: 1px solid $layer-hover; + background-color: $layer-hover; + } + + .#{$prefix}--data-table--zebra + tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover + td { + border-top: 1px solid $layer-hover; + border-bottom: 1px solid $layer-hover; + background: $layer-hover; + } + + //---------------------------------------------------------------------------- + // Selected + //---------------------------------------------------------------------------- + // Parent collapsed + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td { + border-top: 1px solid $layer-active; + border-bottom: 1px solid $border-subtle; + background: $layer-selected; + box-shadow: 0 1px $layer-active; + } + + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td { + border-bottom: 1px solid transparent; + background: $layer-selected; + box-shadow: 0 1px $layer-active; + color: $text-primary; + } + + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td { + border-bottom: 1px solid transparent; + background: $layer-selected; + box-shadow: 0 1px $border-subtle; + } + + // Parent collapsed hover + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover + td { + border-top: 1px solid $layer-selected-hover; + border-bottom: 1px solid $border-subtle; + background: $layer-selected-hover; + box-shadow: 0 1px $layer-selected-hover; + } + + // Parent expanded + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + td, + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + td:first-of-type { + border-bottom: 1px solid transparent; + // No visible border when expanded + box-shadow: 0 1px $layer-selected; + } + + // Parent expanded hover + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover + td, + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover + td:first-of-type, + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover + td, + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover + td:first-of-type { + border-top: 1px solid $layer-selected-hover; + border-bottom: 1px solid transparent; + background: $layer-selected-hover; + box-shadow: 0 1px $layer-selected-hover; + } + + // Child row expanded + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + + tr[data-child-row] + td { + border-top: 1px solid $layer-active; + border-bottom: 1px solid $border-subtle; + background-color: $layer-hover; + box-shadow: 0 1px $layer-active; + color: $text-primary; + } + + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + + tr[data-child-row]:last-of-type + td { + padding-bottom: rem(24px); + box-shadow: inset 0 -1px $layer-active; + } + + // Child row expanded hover + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover + + tr[data-child-row] + td, + tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover + + tr[data-child-row] + td { + background: $layer-selected; + } + + // Windows HCM fix + .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg { + @include high-contrast-mode('focus'); + } + + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--table-expand__svg { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_index.scss new file mode 100644 index 000000000000..bf31cba49f4e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'data-table-expandable'; +@use 'data-table-expandable'; + +@include data-table-expandable.data-table-expandable; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss new file mode 100644 index 000000000000..3403fda90bf8 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss @@ -0,0 +1,72 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../../config' as *; +@use '../../../spacing' as *; +@use '../../../theme' as *; +@use '../../../utilities/convert' as *; +@use '../../../utilities/skeleton' as *; + +/// Data table skeleton styles +/// @access public +/// @group data-table +@mixin data-table-skeleton { + .#{$prefix}--data-table.#{$prefix}--skeleton th { + padding-left: 1rem; + vertical-align: middle; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton th span, + .#{$prefix}--data-table.#{$prefix}--skeleton td span { + @include skeleton; + + display: block; + + width: rem(64px); + height: rem(16px); + } + + .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td { + border-color: $border-subtle; + background: transparent; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:first-of-type, + .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td:last-of-type { + border-color: $border-subtle; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton .#{$prefix}--table-sort { + pointer-events: none; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton th span { + background: $skeleton-element; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton th span::before { + background: $skeleton-background; + } + + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--data-table-header__title { + @include skeleton; + + width: rem(120px); + height: rem(24px); + } + + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--data-table-header__description { + @include skeleton; + + width: rem(160px); + height: rem(16px); + + margin-top: $spacing-03; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_index.scss new file mode 100644 index 000000000000..0b9a705aac03 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/skeleton/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'data-table-skeleton'; +@use 'data-table-skeleton'; + +@include data-table-skeleton.data-table-skeleton; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_data-table-sort.scss new file mode 100644 index 000000000000..76c888b920a2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_data-table-sort.scss @@ -0,0 +1,241 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@use '../vars' as *; +@use '../../../config' as *; +@use '../../../motion' as *; +@use '../../../spacing' as *; +@use '../../../theme' as *; +@use '../../../utilities/button-reset'; +@use '../../../utilities/convert' as *; +@use '../../../utilities/focus-outline' as *; +@use '../../../utilities/high-contrast-mode' as *; + +/// Data table sort styles +/// @access public +/// @group data-table +@mixin data-table-sort { + // ------------------------------------- + // Sortable table + // ------------------------------------- + .#{$prefix}--data-table--sort th, + .#{$prefix}--data-table th[aria-sort] { + height: $spacing-09; + padding: 0; + border-top: none; + border-bottom: none; + } + + // ------------------------------------- + // Th > Button + // ------------------------------------- + .#{$prefix}--table-sort { + @include button-reset.reset(false); + + display: flex; + width: 100%; + min-height: 100%; + align-items: center; + justify-content: space-between; + padding-left: $spacing-05; + background-color: $layer-accent; + color: $text-primary; + font: inherit; + line-height: 1; + transition: background-color $duration-fast-01 motion(entrance, productive), + outline $duration-fast-01 motion(entrance, productive); + } + + .#{$prefix}--table-sort:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--table-sort:hover { + background: $data-table-column-hover; + } + + // changes opacity when th is inactive (see line 161) + .#{$prefix}--table-sort:focus svg, + .#{$prefix}--table-sort:hover svg { + opacity: 1; + } + + // Override for when `isSortable` is set on `DataTable` as well as `TableHeader` + .#{$prefix}--data-table.#{$prefix}--data-table--sort + th + > .#{$prefix}--table-header-label { + padding-right: $spacing-05; + padding-left: $spacing-05; + } + + // ------------------------------------- + // Th > Button > Span (span required for flex bugs in Safari) + // ------------------------------------- + th .#{$prefix}--table-sort__flex { + display: flex; + width: 100%; + height: 100%; + min-height: 3rem; + align-items: center; + justify-content: space-between; + } + + // V11: Remove compact, short, tall + .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl) + th + .#{$prefix}--table-sort__flex { + /* IE11 workaround for align-items: center and min-height + https://github.com/philipwalton/flexbugs/issues/231 */ + @media screen and (-ms-high-contrast: active), + screen and (-ms-high-contrast: none) { + height: 2.99rem; + } + } + + // V11: remove compact + .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex, + .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex { + min-height: 1.5rem; + } + + // V11: remove short + .#{$prefix}--data-table--short.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex, + .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex { + min-height: 2rem; + } + + .#{$prefix}--data-table--md.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex { + min-height: 2.5rem; + } + + // V11: remove tall + .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex, + .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort__flex { + min-height: 4rem; + align-items: flex-start; + } + + // ------------------------------------- + //Th > Button > Svg (Sort Icons) + // ------------------------------------- + // inactive icons + .#{$prefix}--table-sort .#{$prefix}--table-sort__icon-inactive { + display: block; + } + + .#{$prefix}--table-sort .#{$prefix}--table-sort__icon { + display: none; + } + + .#{$prefix}--table-sort__icon-unsorted { + width: rem(20px); + min-width: $spacing-05; + margin-right: $spacing-03; + margin-left: $spacing-03; + fill: $icon-primary; + opacity: 0; + } + + .#{$prefix}--table-sort.#{$prefix}--table-sort--active { + background: $data-table-column-hover; + } + + // active icons + .#{$prefix}--table-sort.#{$prefix}--table-sort--active + .#{$prefix}--table-sort__icon-unsorted { + display: none; + } + + .#{$prefix}--table-sort.#{$prefix}--table-sort--active + .#{$prefix}--table-sort__icon { + display: block; + opacity: 1; + } + + .#{$prefix}--table-sort--ascending .#{$prefix}--table-sort__icon { + transform: rotate(180deg); + } + + .#{$prefix}--table-sort__icon { + width: rem(20px); + min-width: $spacing-05; + margin-right: $spacing-03; + margin-left: $spacing-03; + fill: $icon-primary; + opacity: 1; + transform: rotate(0); + transition: transform $transition--base $standard-easing; + } + + //---------------------------------------------------------------------------- + // Compact, Short, Tall Sortable + //---------------------------------------------------------------------------- + // Sortable compact + // V11: remove compact + .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort th, + .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th { + height: rem(24px); + } + + // Sortable Short + // V11: remove short + .#{$prefix}--data-table--short.#{$prefix}--data-table--sort th, + .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th { + height: rem(32px); + } + + // Sortable Medium + // V11: remove short + .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th { + height: rem(40px); + } + + // Sortable Tall + // V11: remove tall + .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort th, + .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th { + height: rem(64px); + } + + // V11: remove tall + .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort, + .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort + th + .#{$prefix}--table-sort { + display: inline-block; + height: rem(64px); + } + + // V11: remove tall + .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon-unsorted, + .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon, + .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted, + .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon { + margin-top: rem(13px); + } + + // Windows HCM fix + .#{$prefix}--table-sort__icon, + .#{$prefix}--table-sort__icon-unsorted { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_index.scss new file mode 100644 index 000000000000..65f0a0734829 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'data-table-sort'; +@use 'data-table-sort'; + +@include data-table-sort.data-table-sort; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_date-picker.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_date-picker.scss new file mode 100644 index 000000000000..597f55c3b7c3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_date-picker.scss @@ -0,0 +1,211 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../colors' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../theme' as *; +@use '../../spacing' as *; +@use '../../type' as *; +@use '../form/form'; +@use '../../utilities/component-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/placeholder-colors' as *; +@use '../../utilities/skeleton' as *; +@use 'flatpickr' as *; + +/// Date picker styles +/// @access public +/// @group date-picker +@mixin date-picker { + @include flatpickr; + + .#{$prefix}--date-picker { + display: flex; + } + + // V11: Possibly deprecate + .#{$prefix}--date-picker--light .#{$prefix}--date-picker__input { + background: $field-02; + } + + .#{$prefix}--date-picker ~ .#{$prefix}--label { + order: 1; + } + + .#{$prefix}--date-picker-container { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .#{$prefix}--date-picker-input__wrapper { + position: relative; + display: flex; + align-items: center; + } + + .#{$prefix}--date-picker.#{$prefix}--date-picker--simple + .#{$prefix}--date-picker__input, + .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label { + width: rem(120px); + } + + .#{$prefix}--date-picker.#{$prefix}--date-picker--simple + .#{$prefix}--date-picker-input__wrapper--invalid, + .#{$prefix}--date-picker.#{$prefix}--date-picker--simple + .#{$prefix}--date-picker-input__wrapper--warn { + .#{$prefix}--date-picker__input, + ~ .#{$prefix}--form-requirement { + width: rem(152px); + } + } + + .#{$prefix}--date-picker.#{$prefix}--date-picker--simple.#{$prefix}--date-picker--short { + .#{$prefix}--date-picker__input { + width: 5.7rem; + } + } + + .#{$prefix}--date-picker.#{$prefix}--date-picker--single + .#{$prefix}--date-picker__input { + width: rem(288px); + } + + .#{$prefix}--date-picker + .#{$prefix}--date-picker-input__wrapper--warn + ~ .#{$prefix}--form-requirement { + color: $text-primary; + } + .#{$prefix}--date-picker__input { + @include component-reset.reset; + @include type-style('code-02'); + @include focus-outline('reset'); + + position: relative; + display: block; + height: rem(40px); + padding: 0 $spacing-05; + border: none; + border-bottom: 1px solid $border-strong; + background-color: $field; + color: $text-primary; + transition: $duration-fast-01 motion(standard, productive) all; + + &:focus, + &.#{$prefix}--focused { + @include focus-outline('outline'); + } + + &:disabled { + border-bottom: 1px solid transparent; + background-color: $field; + color: $text-disabled; + cursor: not-allowed; + } + + &:disabled::placeholder { + color: $text-disabled; + } + + &:disabled:hover { + border-bottom: 1px solid transparent; + } + + &::placeholder { + @include placeholder-colors; + } + } + + // Size variant styles + // TODO V11: Remove xl selector + .#{$prefix}--date-picker__input--xl, + .#{$prefix}--date-picker__input--lg { + height: rem(48px); + } + + .#{$prefix}--date-picker__input--sm { + height: rem(32px); + } + + .#{$prefix}--date-picker__icon { + position: absolute; + z-index: 1; + // vertically center icon within parent container on IE11 + top: 50%; + right: 1rem; + fill: $icon-primary; + pointer-events: none; + transform: translateY(-50%); + } + + .#{$prefix}--date-picker__icon--invalid, + .#{$prefix}--date-picker__icon--warn { + cursor: auto; + } + + .#{$prefix}--date-picker__icon--warn { + fill: $support-warning; + } + + // V11: Do we have an always black token? + .#{$prefix}--date-picker__icon--warn path:first-of-type { + fill: $black-100; + opacity: 1; + } + + .#{$prefix}--date-picker__icon--invalid { + fill: $support-error; + } + + .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input { + padding-right: $spacing-09; + } + + .#{$prefix}--date-picker__input:disabled ~ .#{$prefix}--date-picker__icon { + cursor: not-allowed; + fill: $icon-disabled; + } + + .#{$prefix}--date-picker--range + > .#{$prefix}--date-picker-container:first-child { + margin-right: rem(1px); + } + + .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container, + .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input { + width: rem(143.5px); + } + + // Skeleton State + .#{$prefix}--date-picker.#{$prefix}--skeleton input, + .#{$prefix}--date-picker__input.#{$prefix}--skeleton { + @include skeleton; + + width: 100%; + + &::placeholder { + color: transparent; + } + } + + .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label { + @include skeleton; + + width: rem(75px); + height: rem(14px); + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--date-picker__icon { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_flatpickr.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_flatpickr.scss new file mode 100644 index 000000000000..675dd2ac9ef2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_flatpickr.scss @@ -0,0 +1,540 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../motion' as *; +@use '../../theme' as *; +@use '../../spacing' as *; +@use '../../type' as *; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; + +@use '../button/tokens' as *; + +@keyframes fpFadeInDown { + from { + opacity: 0; + transform: translate3d(0, -20px, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@keyframes fpSlideLeft { + from { + transform: translate3d(0, 0, 0); + } + to { + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes fpSlideLeftNew { + from { + transform: translate3d(100%, 0, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes fpSlideRight { + from { + transform: translate3d(0, 0, 0); + } + to { + transform: translate3d(100%, 0, 0); + } +} + +@keyframes fpSlideRightNew { + from { + transform: translate3d(-100%, 0, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes fpFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes fpFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@mixin flatpickr { + .flatpickr-calendar { + position: absolute; + overflow: hidden; + width: rem(315px); + max-height: 0; + box-sizing: border-box; + padding: 0; + border: 0; + animation: none; + border-radius: 0; + direction: ltr; + opacity: 0; + text-align: center; + touch-action: manipulation; + visibility: hidden; + @include high-contrast-mode('outline'); + } + + .flatpickr-calendar.open, + .flatpickr-calendar.inline { + overflow: visible; + max-height: rem(640px); + opacity: 1; + visibility: inherit; + } + + .flatpickr-calendar.open { + @include box-shadow; + + z-index: 99999; + display: flex; + overflow: hidden; + width: rem(288px); + height: rem(336px); + flex-direction: column; + align-items: center; + justify-content: center; + padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02; + border: none; + margin-top: rem(-2px); + background-color: $layer-01; + + &:focus { + @include focus-outline('border'); + } + } + + .flatpickr-calendar.animate.open { + animation: fpFadeInDown $duration-fast-02 motion(entrance, productive); + } + + .flatpickr-calendar.inline { + position: relative; + top: rem(2px); + display: block; + } + + .flatpickr-calendar.static { + position: absolute; + top: calc(100% + 2px); + } + + .flatpickr-calendar.static.open { + z-index: 999; + display: block; + } + + .flatpickr-calendar.hasWeeks { + width: auto; + } + + .dayContainer { + display: flex; + height: rem(246px); + flex-wrap: wrap; + justify-content: space-around; + padding: 0; + outline: 0; + } + + .flatpickr-calendar .hasWeeks .dayContainer, + .flatpickr-calendar .hasTime .dayContainer { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .flatpickr-calendar .hasWeeks .dayContainer { + border-left: 0; + } + + .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { + height: rem(40px); + border-top: 1px solid #e6e6e6; + } + + .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { + height: auto; + } + + .flatpickr-calendar:focus { + outline: 0; + } + + .flatpickr-months { + display: flex; + width: 100%; + justify-content: space-between; + } + + .flatpickr-month { + @include type-style('productive-heading-01'); + + display: flex; + height: rem(40px); + align-items: center; + background-color: transparent; + color: $text-primary; + line-height: 1; + text-align: center; + } + + .flatpickr-prev-month, + .flatpickr-next-month { + z-index: 3; + display: flex; + width: rem(40px); + height: rem(40px); + align-items: center; + justify-content: center; + padding: 0; + cursor: pointer; + fill: $icon-primary; + line-height: 16px; + text-decoration: none; + transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'}; + transition: background-color $duration-fast-01 motion(standard, productive); + user-select: none; + // Windows HCM fix + @include high-contrast-mode('icon-fill'); + + &:hover { + background-color: $background-hover; + } + } + + .flatpickr-next-month.disabled svg, + .flatpickr-prev-month.disabled svg { + cursor: not-allowed; + fill: $icon-disabled; + } + + .flatpickr-next-month.disabled:hover svg, + .flatpickr-prev-month.disabled:hover svg { + fill: $icon-disabled; + } + + .flatpickr-current-month { + @include type-style('productive-heading-01'); + + display: flex; + height: rem(28px); + align-items: center; + justify-content: center; + text-align: center; + } + + .flatpickr-current-month .cur-month { + margin-right: $spacing-02; + margin-left: $spacing-02; + + &:hover { + background-color: $background-hover; + } + } + + .numInputWrapper { + position: relative; + width: rem(60px); + + &:hover { + background-color: $background-hover; + } + } + + .numInputWrapper .numInput { + display: inline-block; + width: 100%; + padding: $spacing-02; + border: none; + margin: 0; + // Added in when upgraded to Flatpickr 4.5.5 (#1977) + -moz-appearance: textfield; /* Firefox */ + background-color: $field-01; + color: $text-primary; + cursor: default; + font-family: inherit; + font-size: inherit; + font-weight: 600; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ + // Added in when upgraded to Flatpickr 4.5.5 (#1977) + -webkit-appearance: none; + } + + &:focus { + @include focus-outline('border'); + } + + &[disabled], + &[disabled]:hover { + background-color: $layer-01; + color: $text-disabled; + pointer-events: none; + } + } + + .numInputWrapper .arrowUp { + top: rem(4px); + border-bottom: 0; + + &::after { + border-bottom: rem(4px) solid $border-subtle; + } + } + + .numInputWrapper .arrowDown { + top: rem(11px); + + &::after { + border-top: rem(4px) solid $border-subtle; + } + } + + .numInputWrapper .arrowUp, + .numInputWrapper .arrowDown { + position: absolute; + left: 2.6rem; + width: rem(12px); + height: 50%; + padding: 0 rem(4px) 0 rem(2px); + border: none; + cursor: pointer; + line-height: 50%; + opacity: 0; + + &::after { + position: absolute; + top: 33%; + display: block; + border-right: rem(4px) solid transparent; + border-left: rem(4px) solid transparent; + content: ''; + } + + &:hover::after { + border-top-color: $button-primary; + border-bottom-color: $button-primary; + } + + &:active::after { + border-top-color: $border-interactive; + border-bottom-color: $border-interactive; + } + } + + .numInput[disabled] ~ .arrowUp::after { + border-bottom-color: $text-disabled; + } + + .numInput[disabled] ~ .arrowDown::after { + border-top-color: $text-disabled; + } + + .numInputWrapper:hover .arrowUp, + .numInputWrapper:hover .arrowDown { + opacity: 1; + } + + .numInputWrapper:hover .numInput[disabled] ~ .arrowUp, + .numInputWrapper:hover .numInput[disabled] ~ .arrowDown { + opacity: 0; + } + + .flatpickr-weekdays { + display: flex; + height: rem(40px); + align-items: center; + } + + .flatpickr-weekdaycontainer { + display: flex; + width: 100%; + } + + .flatpickr-weekday { + @include type-style('body-short-01'); + + flex: 1; + color: $text-primary; + cursor: default; + } + + .flatpickr-days:focus { + outline: 0; + } + + .flatpickr-calendar.animate .dayContainer.slideLeft { + animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), + fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + } + + .flatpickr-calendar.animate .dayContainer.slideLeft, + .flatpickr-calendar.animate .dayContainer.slideLeftNew { + transform: translate3d(-100%, 0, 0); + } + + .flatpickr-calendar.animate .dayContainer.slideLeftNew { + animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), + fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + } + + .flatpickr-calendar.animate .dayContainer.slideRight { + animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), + fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); + transform: translate3d(100%, 0, 0); + } + + .flatpickr-calendar.animate .dayContainer.slideRightNew { + animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), + fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); + } + + .flatpickr-day { + @include type-style('body-short-01'); + + display: flex; + width: rem(40px); + height: rem(40px); + align-items: center; + justify-content: center; + color: $text-primary; + cursor: pointer; + transition: all $duration-fast-01 motion(standard, productive); + + &:hover { + background: $background-hover; + } + + &:focus { + @include focus-outline('outline'); + + outline-color: $button-primary; + } + } + + .nextMonthDay, + .prevMonthDay { + color: $text-helper; + } + + .flatpickr-day.today { + position: relative; + color: $link-primary; + font-weight: 600; + + &::after { + position: absolute; + bottom: rem(7px); + left: 50%; + display: block; + width: rem(4px); + height: rem(4px); + background-color: $link-primary; + content: ''; + transform: translateX(-50%); + } + } + + .flatpickr-day.today.no-border { + border: none; + } + + .flatpickr-day.today.selected { + @include focus-outline('outline'); + + &::after { + display: none; + } + } + + .flatpickr-day.inRange { + background-color: $highlight; + color: $text-primary; + } + + .flatpickr-day.selected { + background-color: $button-primary; + color: $text-on-color; + @include high-contrast-mode('focus') { + outline-style: dotted; + } + + &:focus { + outline: rem(1px) solid $layer-02; + outline-offset: rem(-3px); + } + } + + .flatpickr-day.startRange.selected { + z-index: 2; + box-shadow: none; + } + + .flatpickr-day.startRange.inRange:not(.selected), + .flatpickr-day.endRange.inRange { + @include focus-outline('outline'); + + z-index: 3; + background: $layer-01; + } + + .flatpickr-day.endRange:hover { + @include focus-outline('outline'); + + background: $layer-01; + color: $text-primary; + } + + .flatpickr-day.endRange.inRange.selected { + background: $button-primary; + color: $text-on-color; + } + + .flatpickr-day.flatpickr-disabled { + color: $text-disabled; + cursor: not-allowed; + + &:hover { + background-color: transparent; + } + } + + .flatpickr-input[readonly] { + cursor: pointer; + } + + .flatpickr-day.today, + .flatpickr-day.inRange { + @include high-contrast-mode { + color: Highlight; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_index.scss new file mode 100644 index 000000000000..8eadcb442716 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'date-picker'; +@use 'date-picker'; + +@include date-picker.date-picker; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_dropdown.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_dropdown.scss new file mode 100644 index 000000000000..b1697a954e29 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_dropdown.scss @@ -0,0 +1,477 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../list-box'; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/z-index' as *; + +/// Dropdown styles +/// @access public +/// @group dropdown +@mixin dropdown { + .#{$prefix}--dropdown__wrapper--inline { + display: inline-grid; + align-items: center; + grid-gap: 0 rem(24px); + grid-template: auto auto / auto min-content; + + .#{$prefix}--label { + @include type-style('body-short-01'); + } + + .#{$prefix}--label, + .#{$prefix}--form__helper-text, + .#{$prefix}--form-requirement { + margin: 0; + } + + .#{$prefix}--form-requirement { + grid-column: 2; + } + } + + .#{$prefix}--dropdown { + @include reset; + @include focus-outline('reset'); + + position: relative; + display: block; + width: 100%; + height: rem(40px); + border: none; + border-bottom: 1px solid $border-strong; + background-color: $field; + color: $text-primary; + cursor: pointer; + list-style: none; + outline: 2px solid transparent; + transition: background-color $duration-fast-01 motion(standard, productive); + + &:hover { + background-color: $field-hover; + } + } + + // Menu's triggering element updated to button with Downshift v5 upgrade + .#{$prefix}--dropdown .#{$prefix}--list-box__field { + text-align: left; + } + + .#{$prefix}--dropdown--lg { + height: rem(48px); + max-height: rem(48px); + } + + .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow { + top: rem(16px); + } + + .#{$prefix}--dropdown--sm { + height: rem(32px); + max-height: rem(32px); + } + + .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow { + top: rem(8px); + } + + .#{$prefix}--dropdown--open { + border-bottom-color: $border-subtle; + } + + .#{$prefix}--dropdown--invalid { + @include focus-outline('invalid'); + + .#{$prefix}--dropdown-text { + padding-right: rem(56px); + } + + + .#{$prefix}--form-requirement { + display: inline-block; + max-height: rem(200px); + color: $text-error; + } + } + + .#{$prefix}--dropdown__invalid-icon { + position: absolute; + top: 50%; + right: $spacing-08; + fill: $support-error; + transform: translateY(-50%); + } + + .#{$prefix}--dropdown--open:hover { + background-color: $field; + } + + .#{$prefix}--dropdown--open:focus { + outline: 1px solid transparent; + } + + .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list { + @include box-shadow; + + // 40px item height * 5.5 items shown + max-height: rem(220px); + transition: max-height $duration-fast-02 motion(entrance, productive); + } + + // V11: Possibly deprecate + .#{$prefix}--dropdown--light { + background-color: $field-02; + + &:hover { + background-color: $layer-hover-02; + } + } + + .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list { + bottom: 2rem; + } + + .#{$prefix}--dropdown__arrow { + position: absolute; + top: rem(13px); + right: 1rem; + fill: $icon-primary; + pointer-events: none; + transform-origin: 50% 45%; + transition: transform $duration-fast-02 motion(standard, productive); + } + + button.#{$prefix}--dropdown-text { + width: 100%; + border: none; + // button-reset mixin contradicts with bx--dropdown-text styles + background: none; + color: $text-primary; + text-align: left; + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--dropdown-text { + @include type-style('body-short-01'); + + display: block; + overflow: hidden; + // Account for the border in `.bx--dropdown` + height: calc(100% + 1px); + // 2rem + SVG width + padding-right: rem(42px); + padding-left: $spacing-05; + text-overflow: ellipsis; + white-space: nowrap; + } + + .#{$prefix}--dropdown-list { + @include reset; + @include focus-outline('reset'); + @include box-shadow; + @include type-style('body-short-01'); + + position: absolute; + z-index: z('dropdown'); + display: flex; + width: 100%; + max-height: 0; + flex-direction: column; + background-color: $layer; + list-style: none; + // NOTE: IE, Edge, and Safari do not support two value `overflow` shorthand. + overflow-x: hidden; + overflow-y: auto; + transition: max-height $duration-fast-02 motion(standard, productive); + } + + // V11: Possibly deprecate + .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list { + background-color: $field-02; + } + + .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open) + .#{$prefix}--dropdown-item { + visibility: hidden; + } + + .#{$prefix}--dropdown-item { + position: relative; + opacity: 0; + transition: visibility $duration-fast-01 motion(standard, productive), + opacity $duration-fast-01 motion(standard, productive), + background-color $duration-fast-01 motion(standard, productive); + visibility: inherit; + + &:hover { + background-color: $layer-hover; + + + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link { + border-color: transparent; + } + } + + &:active { + background-color: $layer-selected; + } + + &:first-of-type .#{$prefix}--dropdown-link { + border-top-color: transparent; + } + } + + .#{$prefix}--dropdown-item:last-of-type .#{$prefix}--dropdown-link { + border-bottom: none; + } + + .#{$prefix}--dropdown-link { + @include focus-outline('reset'); + + display: block; + overflow: hidden; + height: rem(40px); + padding: rem(11px) 0; + border: 1px solid transparent; + border-top-color: $border-subtle; + margin: 0 $spacing-05; + color: $text-secondary; + font-weight: normal; + line-height: 1rem; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover { + border-color: transparent; + color: $text-primary; + } + } + + // V11: Possibly deprecate + .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link { + border-top-color: $border-subtle-02; + } + + .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link { + height: rem(32px); + padding-top: rem(7px); + padding-bottom: rem(7px); + } + + .#{$prefix}--dropdown--focused, + .#{$prefix}--dropdown-link:focus { + @include focus-outline('outline'); + + padding: rem(11px) rem(16px); + margin: 0; + } + + // We don't want to apply focus styles via focus selector when using the aria-activedescendant structure + .#{$prefix}--dropdown-list[aria-activedescendant] + .#{$prefix}--dropdown-link:focus { + // Copied from .bx--dropdown-link styles + padding: rem(11px) 0; + margin: 0 $spacing-05; + outline: none; + } + + // Need added weight for item that is :focused and .bx--dropdown--focused + .#{$prefix}--dropdown-list[aria-activedescendant] + .#{$prefix}--dropdown--focused:focus { + // copied from default focus styles + @include focus-outline('outline'); + + padding: rem(11px) rem(16px); + margin: 0; + } + + // Don't want to allow multiple elements have a "selected" style. Not sure why active + // had unique styles initially but creating an overwrite for the latest HTML markup for + // backwards compatibility. For the next major release it would be possible to clean up + // the HTML structure to prevent the user of :active and :focus styles which is creating + // these duplicated styles in the list. The Carbon 10 version of dropdown is already + // supporting 2 very different HTML structures. + .#{$prefix}--dropdown-list[aria-activedescendant] + .#{$prefix}--dropdown-item:active { + background-color: inherit; + } + + .#{$prefix}--dropdown-item:hover .#{$prefix}--dropdown-link { + border-bottom-color: $layer-hover; + } + + .#{$prefix}--dropdown--open .#{$prefix}--dropdown__arrow { + transform: rotate(-180deg); + } + + .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm + .#{$prefix}--dropdown-list { + // 32px item height * 5.5 items shown + max-height: rem(176px); + } + + .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item { + opacity: 1; + } + + .#{$prefix}--dropdown--disabled { + border-bottom-color: transparent; + + &:hover { + background-color: $field; + } + + &:focus { + outline: none; + } + + // TODO: remove in v11 + .#{$prefix}--dropdown-text, + .#{$prefix}--list-box__label { + color: $text-disabled; + } + + // TODO: remove in v11 + .#{$prefix}--dropdown__arrow, + .#{$prefix}--list-box__menu-icon svg { + fill: $icon-disabled; + } + + // V11: Possibly deprecate + &.#{$prefix}--dropdown--light:hover { + background-color: $field-02; + } + } + + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__field, + .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__menu-icon { + cursor: not-allowed; + } + + .#{$prefix}--dropdown--auto-width { + width: auto; + max-width: rem(400px); + } + + .#{$prefix}--dropdown--inline { + display: inline-block; + width: auto; + border-bottom-color: transparent; + background-color: transparent; + justify-self: start; + transition: background $duration-fast-01 motion(entrance, productive); + + &:hover { + background-color: $field-hover; + } + + &.#{$prefix}--dropdown--disabled { + background-color: transparent; + } + + .#{$prefix}--dropdown__arrow { + top: rem(8px); + right: rem(8px); + } + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open { + background-color: transparent; + } + + .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text { + display: inline-block; + overflow: visible; + height: rem(32px); + padding: rem(7px) $spacing-07 rem(7px) $spacing-04; + color: $text-primary; + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled + .#{$prefix}--dropdown-text { + color: $text-disabled; + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled:focus + .#{$prefix}--dropdown-text { + outline: 0; + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid + .#{$prefix}--dropdown__invalid-icon { + right: rem(32px); + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid + .#{$prefix}--dropdown-text { + padding-right: rem(56px); + } + + .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus + .#{$prefix}--dropdown-list { + @include box-shadow; + } + + .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link { + font-weight: normal; + } + + .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected { + display: block; + background-color: $layer-hover; + color: $text-primary; + + &:hover { + background-color: $layer-selected; + } + + .#{$prefix}--dropdown-link { + border-top-color: transparent; + } + + + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link { + border-top-color: transparent; + } + + .#{$prefix}--list-box__menu-item__selected-icon { + display: block; + } + } + + // Skeleton State + .#{$prefix}--dropdown-v2.#{$prefix}--skeleton, + .#{$prefix}--dropdown.#{$prefix}--skeleton { + @include skeleton; + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--dropdown .#{$prefix}--list-box__field { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--list-box__menu-item__option { + @include high-contrast-mode { + outline: none; + } + } + + .#{$prefix}--list-box__menu-item__selected-icon { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_index.scss new file mode 100644 index 000000000000..933aadd8b218 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/dropdown/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'dropdown'; +@use 'dropdown'; + +@include dropdown.dropdown; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_file-uploader.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_file-uploader.scss new file mode 100644 index 000000000000..d093294b83df --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_file-uploader.scss @@ -0,0 +1,351 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/visually-hidden' as *; + +@use '../button'; +@use '../form'; +@use '../loading'; + +/// File uploader styles +/// @access public +/// @group file-uploader +@mixin file-uploader { + .#{$prefix}--file { + width: 100%; + } + + .#{$prefix}--file--invalid { + margin-right: $spacing-03; + fill: $support-error; + } + + // TODO: sync with type + .#{$prefix}--file--label { + @include reset; + @include type-style('productive-heading-01'); + + margin-bottom: $spacing-03; + color: $text-primary; + } + + .#{$prefix}--file--label--disabled { + color: $text-disabled; + } + + .#{$prefix}--file-input { + @include visually-hidden; + } + + // This class is of old markup with "select file" button + // New code should use link-style "select file" UI (`.bx--file-browse-btn`) + // TODO: deprecate this block + .#{$prefix}--file-btn { + display: inline-flex; + padding-right: rem(64px); + margin: 0; + } + + .#{$prefix}--file-browse-btn { + display: inline-block; + width: 100%; + max-width: rem(320px); + @if not enabled('enable-v11-release') { + margin-bottom: $spacing-03; + } + + color: $link-primary; + cursor: pointer; + outline: 2px solid transparent; + outline-offset: -2px; + transition: $duration-fast-02 motion(standard, productive); + + &:focus, + &:hover { + outline: 2px solid $focus; + } + + &:hover, + &:focus, + &:active, + &:active:visited { + text-decoration: underline; + } + + &:active { + color: $text-primary; + } + } + + .#{$prefix}--file-browse-btn--disabled { + color: $text-disabled; + cursor: no-drop; + text-decoration: none; + + &:hover, + &:focus { + color: $text-disabled; + outline: none; + text-decoration: none; + } + } + + .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container { + border: 1px dashed button.$button-disabled; + } + + .#{$prefix}--label-description { + @include reset; + @include type-style('body-short-01'); + + margin-bottom: $spacing-05; + color: $text-secondary; + } + + .#{$prefix}--label-description--disabled { + color: $text-disabled; + } + + // For backwards compatibility + .#{$prefix}--file-btn ~ .#{$prefix}--file-container { + margin-top: $spacing-06; + } + + .#{$prefix}--btn ~ .#{$prefix}--file-container { + margin-top: $spacing-05; + } + + .#{$prefix}--file .#{$prefix}--file-container, + .#{$prefix}--file ~ .#{$prefix}--file-container { + margin-top: $spacing-03; + } + + .#{$prefix}--file__selected-file { + display: grid; + max-width: rem(320px); + min-height: $spacing-09; + align-items: center; + margin-bottom: $spacing-03; + background-color: $field; + gap: rem(12px) $spacing-05; + grid-auto-rows: auto; + grid-template-columns: 1fr auto; + word-break: break-word; + + &:last-child { + margin-bottom: 0; + } + + .#{$prefix}--form-requirement { + display: block; + max-height: none; + margin: 0; + grid-column: 1 / -1; + } + + .#{$prefix}--inline-loading__animation .#{$prefix}--loading { + // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment + margin-right: 0; + } + + .#{$prefix}--file-filename { + @include type-style('body-short-01'); + + overflow: hidden; + margin-left: $spacing-05; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + // V11: Remove --field + .#{$prefix}--file__selected-file--field, + .#{$prefix}--file__selected-file--md { + min-height: rem(40px); + gap: $spacing-03 $spacing-05; + } + + .#{$prefix}--file__selected-file--sm { + min-height: rem(32px); + gap: $spacing-02 $spacing-05; + } + + // TODO: deprecate this block + .#{$prefix}--file__selected-file--invalid__wrapper { + @include focus-outline('invalid'); + + max-width: rem(320px); + margin-bottom: $spacing-03; + background-color: $field; + outline-width: 1px; + } + + .#{$prefix}--file__selected-file--invalid { + @include focus-outline('invalid'); + + padding: rem(12px) 0; + } + + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm { + padding: $spacing-02 0; + } + + // V11: Remove --field + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field, + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md { + padding: $spacing-03 0; + } + + .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement { + padding-top: $spacing-05; + border-top: 1px solid $border-subtle; + } + + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm + .#{$prefix}--form-requirement { + padding-top: rem(7px); + } + + // V11: Remove --field + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field + .#{$prefix}--form-requirement, + .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md + .#{$prefix}--form-requirement { + padding-top: rem(11px); + } + + .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement__title, + .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement__supplement { + @include type-style('label-01'); + + padding: 0 $spacing-05; + } + + .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement__title { + color: $text-error; + } + + .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement__supplement { + color: $text-primary; + } + + // TODO: deprecate + .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement { + @include type-style('caption-01'); + + display: block; + overflow: visible; + max-height: rem(200px); + padding: $spacing-03 $spacing-05; + color: $text-error; + font-weight: 400; + } + + .#{$prefix}--file__selected-file--invalid + + .#{$prefix}--form-requirement + .#{$prefix}--form-requirement__supplement { + padding-bottom: $spacing-03; + color: $text-primary; + } + + .#{$prefix}--file__state-container { + display: flex; + min-width: 1.5rem; + align-items: center; + justify-content: center; + padding-right: $spacing-05; + + .#{$prefix}--loading__svg { + stroke: $icon-primary; + } + } + + .#{$prefix}--file__state-container .#{$prefix}--file-complete { + cursor: pointer; + fill: $interactive; + + &:focus { + @include focus-outline('border'); + } + + // for checkmark contrast + [data-icon-path='inner-path'] { + fill: $icon-on-color; + opacity: 1; + } + } + + .#{$prefix}--file__state-container .#{$prefix}--file-invalid { + width: $spacing-05; + height: $spacing-05; + fill: $support-error; + } + + .#{$prefix}--file__state-container .#{$prefix}--file-close { + display: flex; + width: $spacing-06; + height: $spacing-06; + align-items: center; + justify-content: center; + padding: 0; + border: none; + background-color: transparent; + cursor: pointer; + fill: $icon-primary; + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--file__state-container .#{$prefix}--file-close svg path { + fill: $icon-primary; + } + + .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation { + margin-right: -$spacing-03; + } + + .#{$prefix}--file__drop-container { + display: flex; + overflow: hidden; + height: rem(96px); + align-items: flex-start; + justify-content: space-between; + padding: $spacing-05; + border: 1px dashed $border-strong; + } + + .#{$prefix}--file__drop-container--drag-over { + background: none; + outline: 2px solid $focus; + outline-offset: -2px; + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--file__selected-file { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--file__state-container .#{$prefix}--file-close svg path { + @include high-contrast-mode('icon-fill'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_index.scss new file mode 100644 index 000000000000..4bee650d5ea5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/file-uploader/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'file-uploader'; +@use 'file-uploader'; + +@include file-uploader.file-uploader; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_form.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_form.scss new file mode 100644 index 000000000000..528fd2af9db6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_form.scss @@ -0,0 +1,197 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/skeleton' as *; + +/// @type Number +/// @access public +/// @group global-themes +$input-label-weight: 400 !default; + +@mixin form { + .#{$prefix}--fieldset { + @include reset; + + @if not enabled('enable-v11-release') { + margin-bottom: $spacing-07; + } + } + + @if not enabled('enable-v11-release') { + .#{$prefix}--fieldset--no-margin { + margin-bottom: 0; + } + } + + .#{$prefix}--form-item { + @include type-style('body-short-01'); + + display: flex; + // We specify `auto` as the default value so that the form item does + // not collapse in IE11 due to a `flex-basis` of 0 only working with + // `flex-direction: row` + flex: 1 1 auto; + flex-direction: column; + align-items: flex-start; + } + + .#{$prefix}--label { + @include reset; + @include type-style('label-01'); + + display: inline-block; + margin-bottom: $spacing-03; + color: $text-secondary; + font-weight: $input-label-weight; + line-height: 1rem; + vertical-align: baseline; + } + + @if enabled('enable-v11-release') { + .#{$prefix}--label--no-margin { + margin-bottom: 0; + } + } + + .#{$prefix}--label .#{$prefix}--tooltip__trigger { + // When tooltip trigger is put in form label the trigger button should fit in the size of label + // https://github.com/IBM/carbon-components-react/issues/115 + @include type-style('label-01'); + } + + // Skeleton State + .#{$prefix}--label.#{$prefix}--skeleton { + @include skeleton; + + width: rem(75px); + height: rem(14px); + } + + input[type='number'] { + font-family: carbon--font-family('mono'); + } + + input[data-invalid]:not(:focus), + .#{$prefix}--number[data-invalid] input[type='number']:not(:focus), + .#{$prefix}--text-input__field-wrapper[data-invalid] + > .#{$prefix}--text-input--invalid:not(:focus), + .#{$prefix}--text-area__wrapper[data-invalid] + > .#{$prefix}--text-area--invalid:not(:focus), + .#{$prefix}--select-input__wrapper[data-invalid] + .#{$prefix}--select-input:not(:focus), + .#{$prefix}--list-box[data-invalid]:not(:focus), + .#{$prefix}--combo-box[data-invalid] .#{$prefix}--text-input:not(:focus) { + @include focus-outline('invalid'); + } + + input[data-invalid], + .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper, + .#{$prefix}--number__input-wrapper--warning, + .#{$prefix}--date-picker-input__wrapper, + .#{$prefix}--date-picker-input__wrapper--warn, + .#{$prefix}--date-picker-input__wrapper--invalid, + .#{$prefix}--time-picker--invalid, + .#{$prefix}--text-input__field-wrapper[data-invalid], + .#{$prefix}--text-input__field-wrapper--warning, + .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input, + .#{$prefix}--text-area__wrapper[data-invalid], + .#{$prefix}--select-input__wrapper[data-invalid], + .#{$prefix}--select--warning .#{$prefix}--select-input__wrapper, + .#{$prefix}--time-picker[data-invalid], + .#{$prefix}--list-box[data-invalid], + .#{$prefix}--list-box--warning { + ~ .#{$prefix}--form-requirement { + display: block; + overflow: visible; + max-height: rem(200px); + font-weight: 400; + } + } + + input[data-invalid], + .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper, + .#{$prefix}--date-picker-input__wrapper, + .#{$prefix}--date-picker-input__wrapper--invalid, + .#{$prefix}--time-picker--invalid, + .#{$prefix}--text-input__field-wrapper[data-invalid], + .#{$prefix}--text-area__wrapper[data-invalid], + .#{$prefix}--select-input__wrapper[data-invalid], + .#{$prefix}--time-picker[data-invalid], + .#{$prefix}--list-box[data-invalid] { + ~ .#{$prefix}--form-requirement { + color: $text-error; + } + } + + //Fluid Form + .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper[data-invalid], + .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning { + display: block; + } + + @if not enabled('enable-v11-release') { + .#{$prefix}--form--fluid .#{$prefix}--fieldset { + margin: 0; + } + } + + .#{$prefix}--form--fluid input[data-invalid] { + outline: none; + } + + .#{$prefix}--form--fluid .#{$prefix}--form-requirement { + padding: $spacing-03 rem(40px) $spacing-03 $spacing-05; + margin: 0; + } + + // Fix for red ring when input is marked required in Firefox, refs #744 + input:not(output):not([data-invalid]):-moz-ui-invalid { + box-shadow: none; + } + + .#{$prefix}--form-requirement { + @include reset; + @include type-style('caption-01'); + + display: none; + overflow: hidden; + max-height: 0; + margin: $spacing-02 0 0; + } + + .#{$prefix}--select--inline .#{$prefix}--form__helper-text { + margin-top: 0; + } + + .#{$prefix}--form__helper-text { + @include type-style('helper-text-01'); + + z-index: 0; + // Added to prevent error text from displaying under helper text in Safari (#6392) + width: 100%; + margin-top: $spacing-02; + color: $text-secondary; + opacity: 1; + } + + .#{$prefix}--label--disabled, + .#{$prefix}--form__helper-text--disabled { + color: $text-disabled; + } + + // If a FormGroup is disabled, Form labels and helper text nested inside should also be disabled + fieldset[disabled] .#{$prefix}--label, + fieldset[disabled] .#{$prefix}--form__helper-text { + color: $text-disabled; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_index.scss new file mode 100644 index 000000000000..317c474004dc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/form/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'form'; +@use 'form'; + +@include form.form; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_index.scss new file mode 100644 index 000000000000..e7c44a20af74 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'inline-loading'; +@use 'inline-loading'; + +@include inline-loading.inline-loading; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_inline-loading.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_inline-loading.scss new file mode 100644 index 000000000000..eeb29b8df912 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_inline-loading.scss @@ -0,0 +1,99 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'keyframes'; +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; + +/// @type Number +/// @access private +/// @group loading +$-loading-gap-small: 110; + +/// Inline loading styles +/// @access public +/// @group inline-loading +@mixin inline-loading { + .#{$prefix}--inline-loading { + display: flex; + width: 100%; + min-height: 2rem; + align-items: center; + } + + .#{$prefix}--inline-loading__text { + @include type-style('label-01'); + + color: $text-secondary; + } + + .#{$prefix}--inline-loading__animation { + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-right: $spacing-03; + } + + .#{$prefix}--inline-loading__checkmark-container { + fill: $support-success; + + // For deprecated older markup + &.#{$prefix}--inline-loading__svg { + position: absolute; + top: 0.75rem; + width: 0.75rem; + } + + &[hidden] { + display: none; + } + } + + .#{$prefix}--inline-loading__checkmark { + animation-duration: 250ms; + animation-fill-mode: forwards; + animation-name: stroke; + fill: none; + stroke: $interactive; + stroke-dasharray: 12; + stroke-dashoffset: 12; + stroke-width: 1.8; + transform-origin: 50% 50%; + } + + .#{$prefix}--inline-loading--error { + width: rem(16px); + height: rem(16px); + fill: $support-error; + + &[hidden] { + display: none; + } + } + + .#{$prefix}--loading--small .#{$prefix}--inline-loading__svg { + stroke: $interactive; + } + /* If IE11 Don't show check animation */ + @media screen and (-ms-high-contrast: active), + screen and (-ms-high-contrast: none) { + .#{$prefix}--inline-loading__checkmark-container { + top: 1px; + right: 0.5rem; + } + + .#{$prefix}--inline-loading__checkmark { + animation: none; + stroke-dasharray: 0; + stroke-dashoffset: 0; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_keyframes.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_keyframes.scss new file mode 100644 index 000000000000..43c3fc2a708b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/inline-loading/_keyframes.scss @@ -0,0 +1,12 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@keyframes stroke { + 100% { + stroke-dashoffset: 0; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_index.scss new file mode 100644 index 000000000000..8a9ad8e087f7 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'link'; +@use 'link'; + +@include link.link; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_link.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_link.scss new file mode 100644 index 000000000000..508998d83be2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/link/_link.scss @@ -0,0 +1,113 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type'; +@use '../../utilities/component-reset'; +@use '../../utilities/custom-property'; +@use '../../utilities/focus-outline' as *; + +$link-text-color: custom-property.get-var('link-text-color', $link-primary); +$link-hover-text-color: custom-property.get-var( + 'link-hover-text-color', + $link-primary-hover +); +$link-focus-text-color: custom-property.get-var( + 'link-focus-text-color', + $focus +); + +/// Link styles +/// @access public +/// @group link +@mixin link { + .#{$prefix}--link { + @include component-reset.reset; + @include type.type-style('body-short-01'); + + display: inline-flex; + color: $link-text-color; + outline: none; + text-decoration: none; + transition: color $duration-fast-01 motion(standard, productive); + + &:hover { + color: $link-hover-text-color; + text-decoration: underline; + } + + &:active, + &:active:visited, + &:active:visited:hover { + color: $text-primary; + text-decoration: underline; + } + + &:focus { + @include focus-outline; + + outline-color: $link-focus-text-color; + } + + &:visited { + color: $link-primary; + } + + &:visited:hover { + color: $link-primary-hover; + } + } + + .#{$prefix}--link--disabled, + .#{$prefix}--link--disabled:hover { + @include component-reset.reset; + @include type.type-style('body-short-01'); + + color: $text-disabled; + cursor: not-allowed; + font-weight: 400; + text-decoration: none; + } + + .#{$prefix}--link.#{$prefix}--link--visited:visited { + color: $link-visited; + } + + .#{$prefix}--link.#{$prefix}--link--visited:visited:hover { + color: $link-primary-hover; + } + + .#{$prefix}--link.#{$prefix}--link--inline { + text-decoration: underline; + + &:focus, + &:visited { + text-decoration: none; + } + } + + .#{$prefix}--link--disabled.#{$prefix}--link--inline { + text-decoration: underline; + } + + .#{$prefix}--link--sm { + @include type.type-style('helper-text-01'); + } + + .#{$prefix}--link--lg { + @include type.type-style('body-short-02'); + } + + .#{$prefix}--link__icon { + display: inline-flex; + align-self: center; + margin-left: $spacing-03; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_index.scss new file mode 100644 index 000000000000..2a19f693f111 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'list-box'; +@use 'list-box'; + +@include list-box.list-box; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_list-box.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_list-box.scss new file mode 100644 index 000000000000..a5dbb1b4cd51 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list-box/_list-box.scss @@ -0,0 +1,837 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../button/tokens' as *; +@use '../text-input'; +@use '../tag'; +@use '../tag/mixins' as *; +@use '../../config' as *; +@use '../../colors' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../spacing' as *; +@use '../../motion' as *; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/z-index' as *; + +/// @type Number +/// @access public +/// @group list-box +$list-box-width: 100%; + +/// @type Number +/// @access public +/// @group list-box +$list-box-height: rem(40px); + +/// @type Number +/// @access public +/// @group list-box +$list-box-inline-height: $list-box-height; + +/// @type Number +/// @access public +/// @group list-box +$list-box-menu-width: rem(300px); + +/// List box styles +/// @access public +/// @group list-box +@mixin list-box { + // The overall container element for a `list-box`. Has two variants, + // `disabled` and `inline`. + .#{$prefix}--list-box__wrapper--inline { + display: inline-grid; + align-items: center; + grid-gap: rem(4px); + grid-template: auto auto / auto auto; + + .#{$prefix}--label { + @include type-style('body-short-01'); + } + + .#{$prefix}--label, + .#{$prefix}--form__helper-text, + .#{$prefix}--form-requirement { + margin: 0; + } + + .#{$prefix}--form__helper-text { + max-width: none; + } + + .#{$prefix}--form-requirement { + grid-column: 2; + } + } + + .#{$prefix}--list-box { + @include reset; + + position: relative; + width: $list-box-width; + height: rem(40px); + max-height: rem(40px); + border: none; + border-bottom: 1px solid $border-strong; + background-color: $field; + color: $text-primary; + cursor: pointer; + transition: all $duration-fast-01 motion(standard, productive); + + &:hover { + background-color: $field-hover; + } + } + + .#{$prefix}--list-box--lg { + height: rem(48px); + max-height: rem(48px); + } + + .#{$prefix}--list-box--sm { + height: rem(32px); + max-height: rem(32px); + } + + .#{$prefix}--list-box--expanded { + border-bottom-color: $border-subtle; + } + + .#{$prefix}--list-box--expanded:hover { + background-color: $field; + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover { + background-color: $field-02; + } + + .#{$prefix}--list-box .#{$prefix}--text-input { + min-width: 0; + height: 100%; + } + + // invalid states + .#{$prefix}--list-box__invalid-icon { + position: absolute; + top: 50%; + right: $spacing-08; + fill: $support-error; + transform: translateY(-50%); + } + + .#{$prefix}--list-box__invalid-icon--warning { + fill: $support-warning; + } + + .#{$prefix}--list-box__invalid-icon--warning path[fill] { + fill: $black-100; + opacity: 1; + } + + .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field, + .#{$prefix}--list-box.#{$prefix}--list-box--warning + .#{$prefix}--list-box__field { + padding-right: $spacing-10; + border-bottom: 0; + } + + .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline + .#{$prefix}--list-box__field { + padding-right: rem(56px); + } + + // V11: Possibly deprecate + // Light variation for 'list-box' + .#{$prefix}--list-box--light { + background-color: $field-02; + + &:hover { + background-color: $layer-hover-02; + } + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu { + background: $field-02; + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option { + border-top-color: $border-subtle-02; + } + + .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded { + border-bottom-color: transparent; + } + + // Disabled state for `list-box` + .#{$prefix}--list-box--disabled:hover { + background-color: $field; + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled { + background-color: $field-02; + } + + .#{$prefix}--list-box--disabled, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus { + border-bottom-color: transparent; + outline: none; + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label, + .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline + .#{$prefix}--list-box__label { + color: $text-disabled; + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg { + fill: $icon-disabled; + } + + .#{$prefix}--list-box--disabled, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon { + cursor: not-allowed; + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover, + .#{$prefix}--list-box--disabled + .#{$prefix}--list-box__menu-item--highlighted { + color: $text-disabled; + text-decoration: none; + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover { + cursor: not-allowed; + } + + // disabled && invalid + .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field { + padding-right: $spacing-09; + } + + .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline + .#{$prefix}--list-box__field { + padding-right: $spacing-07; + } + + // Inline variant for a `list-box` + .#{$prefix}--list-box.#{$prefix}--list-box--inline { + border-width: 0; + background-color: transparent; + + &:hover { + background-color: $field-hover; + } + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded { + border-bottom-width: 0; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded + .#{$prefix}--list-box__field[aria-expanded='true'] { + border-width: 0; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover, + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover { + background-color: transparent; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline + .#{$prefix}--list-box__field { + padding: 0 $spacing-07 0 $spacing-03; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline + .#{$prefix}--list-box__menu-icon { + right: $spacing-03; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline + .#{$prefix}--list-box__invalid-icon { + right: $spacing-07; + } + + .#{$prefix}--list-box--inline .#{$prefix}--list-box__label { + color: $text-primary; + } + + .#{$prefix}--list-box--inline .#{$prefix}--list-box__field { + height: 100%; + } + + .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field { + max-width: rem(480px); + } + + .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu { + min-width: rem(288px); + max-width: rem(480px); + } + + // The field we use for input, showing selection, etc. + .#{$prefix}--list-box__field { + @include button-reset.reset; + + position: relative; + display: inline-flex; + overflow: hidden; + // Account for the border in `.bx--list-box` + height: calc(100% + 1px); + align-items: center; + padding: 0 $spacing-09 0 $spacing-05; + cursor: pointer; + outline: none; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + } + + .#{$prefix}--list-box__field:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--list-box__field[disabled] { + color: $text-disabled; + outline: none; + } + + // populated input field + .#{$prefix}--list-box__field .#{$prefix}--text-input { + padding-right: rem(72px); + } + + // invalid && populated input field + .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input, + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__field + .#{$prefix}--text-input { + // to account for clear input button outline + padding-right: rem(98px); + } + + .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input + + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__field + .#{$prefix}--text-input + + .#{$prefix}--list-box__invalid-icon { + // to account for clear input button outline + right: rem(66px); + } + + // empty input field + .#{$prefix}--list-box__field .#{$prefix}--text-input--empty { + padding-right: $spacing-09; + } + + // invalid && empty input field + .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty, + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty { + padding-right: carbon--mini-units(9); + } + + .#{$prefix}--list-box[data-invalid] + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty + + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__field + .#{$prefix}--text-input--empty + + .#{$prefix}--list-box__invalid-icon { + // to account for clear input button outline + right: rem(40px); + } + + // Label for a `list-box__field` + .#{$prefix}--list-box__label { + @include type-style('body-short-01'); + + overflow: hidden; + color: $text-primary; + text-overflow: ellipsis; + user-select: none; + white-space: nowrap; + } + + // Menu status inside of a `list-box__field` + .#{$prefix}--list-box__menu-icon { + @include button-reset.reset($width: false); + + position: absolute; + right: $spacing-05; + display: flex; + width: rem(24px); + height: rem(24px); + align-items: center; + justify-content: center; + cursor: pointer; + outline: none; + transition: transform $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--list-box__menu-icon > svg { + fill: $icon-primary; + } + + .#{$prefix}--list-box__menu-icon--open { + width: rem(24px); + justify-content: center; + transform: rotate(180deg); + } + + // Selection indicator for a `list-box__field` + .#{$prefix}--list-box__selection { + @include button-reset.reset($width: false); + + position: absolute; + top: 50%; + /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */ + right: rem(36px); + display: flex; + width: rem(24px); + height: rem(24px); + align-items: center; + justify-content: center; + cursor: pointer; + transform: translateY(-50%); + transition: background-color $duration-fast-01 motion(standard, productive); + user-select: none; + + &:focus { + @include focus-outline('outline'); + + &:hover { + @include focus-outline('outline'); + } + } + } + + .#{$prefix}--list-box__selection > svg { + fill: $icon-primary; + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:focus { + outline: none; + } + + // Modifier for a selection to show that multiple selections have been made + .#{$prefix}--list-box__selection--multi { + @include type-style('label-01'); + + position: static; + top: auto; + display: flex; + width: auto; + height: rem(24px); + align-items: center; + justify-content: space-between; + padding: rem(8px); + // Align with hover circle of X button + padding-right: rem(2px); + margin-right: rem(10px); + background-color: $background-inverse; + border-radius: rem(12px); + color: $text-inverse; + line-height: 0; + transform: none; + } + + .#{$prefix}--list-box__selection--multi > svg { + width: rem(20px); + height: rem(20px); + padding: rem(2px); + margin-left: rem(4px); + fill: $icon-inverse; + + &:hover { + background-color: $button-secondary-hover; + border-radius: 50%; + } + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi { + @include tag-theme($text-disabled, $field); + + > svg { + fill: $icon-disabled; + + &:hover { + background-color: initial; + } + } + } + + .#{$prefix}--list-box__selection--multi:hover { + outline: none; + } + + // Descendant of a `list-box` that displays a list of options to select + .#{$prefix}--list-box__menu { + @include box-shadow(); + + position: absolute; + z-index: z('dropdown'); + right: 0; + left: 0; + width: $list-box-width; + background-color: $layer; + overflow-y: auto; + transition: max-height $duration-fast-02 motion(standard, productive); + + &:focus { + // remove default browser focus in firefox + @include focus-outline('border'); + } + } + + .#{$prefix}--list-box + .#{$prefix}--list-box__field[aria-expanded='false'] + + .#{$prefix}--list-box__menu { + max-height: 0; + } + + .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu { + // 40px item height * 5.5 items shown + max-height: rem(220px); + } + + .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg + .#{$prefix}--list-box__menu { + // 48px item height * 5.5 items shown + max-height: rem(264px); + } + + .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm + .#{$prefix}--list-box__menu { + // 32px item height * 5.5 items shown + max-height: rem(176px); + } + + // Descendant of a `list-box__menu` that represents a selection for a control + .#{$prefix}--list-box__menu-item { + @include type-style('body-short-01'); + + position: relative; + height: rem(40px); + color: $text-secondary; + cursor: pointer; + transition: background $duration-fast-01 motion(standard, productive); + user-select: none; + + &:hover { + background-color: $layer-hover; + } + + &:active { + background-color: $layer-selected; + } + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover { + background-color: $layer-hover-02; + } + + .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item { + height: rem(32px); + } + + .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item { + height: rem(48px); + } + + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover { + background-color: transparent; + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active { + // To Do: What should this variable be? + // background-color: $selected-light-ui; + } + + .#{$prefix}--list-box--disabled + .#{$prefix}--list-box__menu-item__option:hover { + border-top-color: $border-subtle; + } + + .#{$prefix}--list-box__menu-item:first-of-type + .#{$prefix}--list-box__menu-item__option { + border-top-color: transparent; + } + + .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item__option { + color: $text-primary; + } + + .#{$prefix}--list-box__menu-item:hover + + .#{$prefix}--list-box__menu-item + .#{$prefix}--list-box__menu-item__option { + border-top-color: transparent; + } + + .#{$prefix}--list-box--disabled + .#{$prefix}--list-box__menu-item:hover + + .#{$prefix}--list-box__menu-item + .#{$prefix}--list-box__menu-item__option { + border-top-color: $border-subtle; + } + + .#{$prefix}--list-box__menu-item__option { + @include focus-outline('reset'); + + display: block; + overflow: hidden; + height: rem(40px); + padding: rem(11px) 0; + padding-right: $spacing-06; + border-top: 1px solid transparent; + border-top-color: $border-subtle; + border-bottom: 1px solid transparent; + margin: 0 $spacing-05; + color: $text-secondary; + font-weight: normal; + line-height: 1rem; + text-decoration: none; + text-overflow: ellipsis; + transition: border-color $duration-fast-01 motion(standard, productive), + color $duration-fast-01 motion(standard, productive); + white-space: nowrap; + + &:focus { + @include focus-outline('outline'); + + padding: rem(11px) rem(16px); + border-color: transparent; + margin: 0; + } + + &:hover { + border-color: transparent; + color: $text-primary; + } + } + + .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option { + height: rem(32px); + padding-top: rem(7px); + padding-bottom: rem(7px); + } + + .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option { + height: rem(48px); + padding-top: rem(15px); + padding-bottom: rem(15px); + } + + .#{$prefix}--list-box--disabled + .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item__option, + .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option { + color: $text-disabled; + } + + .#{$prefix}--list-box__menu-item[disabled], + .#{$prefix}--list-box__menu-item[disabled] *, + .#{$prefix}--list-box__menu-item[disabled] + .#{$prefix}--list-box__menu-item__option, + .#{$prefix}--list-box__menu-item[disabled]:hover { + color: $text-disabled; + cursor: not-allowed; + outline: none; + } + + .#{$prefix}--list-box__menu-item[disabled]:hover { + background-color: revert; + } + + .#{$prefix}--list-box__menu-item[disabled] + .#{$prefix}--checkbox-label::before { + border-color: $text-disabled; + } + + .#{$prefix}--list-box__menu-item[disabled] + .#{$prefix}--list-box__menu-item__option { + border-top-color: $border-subtle; + } + + .#{$prefix}--list-box__menu-item[disabled]:hover + + .#{$prefix}--list-box__menu-item + .#{$prefix}--list-box__menu-item__option { + border-top-color: $border-subtle; + } + + .#{$prefix}--list-box.#{$prefix}--list-box--inline + .#{$prefix}--list-box__menu-item__option { + margin: 0 $spacing-03; + + &:focus { + padding-right: $spacing-03; + padding-left: $spacing-03; + margin: 0; + } + } + + .#{$prefix}--list-box__menu-item--highlighted { + border-color: transparent; + background-color: $layer-hover; + color: $text-primary; + } + + .#{$prefix}--list-box__menu-item--highlighted + .#{$prefix}--list-box__menu-item__option, + .#{$prefix}--list-box__menu-item--highlighted + + .#{$prefix}--list-box__menu-item + .#{$prefix}--list-box__menu-item__option { + border-top-color: transparent; + } + + .#{$prefix}--list-box__menu-item--highlighted + .#{$prefix}--list-box__menu-item__option { + color: $text-primary; + } + + .#{$prefix}--list-box__menu-item--active { + border-bottom-color: $layer-selected; + background-color: $layer-selected; + color: $text-primary; + } + + // V11: Possibly deprecate + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active { + // To Do: What should this token be? + // border-bottom-color: $selected-light-ui; + // background-color: $selected-light-ui; + } + + .#{$prefix}--list-box__menu-item--active:hover, + .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted { + border-bottom-color: $layer-selected-hover; + background-color: $layer-selected-hover; + } + + .#{$prefix}--list-box__menu-item--active + .#{$prefix}--list-box__menu-item__option { + color: $text-primary; + } + + // Hide top border if previous list item is selected + .#{$prefix}--list-box__menu-item--active + + .#{$prefix}--list-box__menu-item + > .#{$prefix}--list-box__menu-item__option { + border-top-color: transparent; + } + + .#{$prefix}--list-box__menu-item__selected-icon { + position: absolute; + top: 50%; + right: rem(16px); + display: none; + fill: $icon-primary; + transform: translateY(-50%); + } + + .#{$prefix}--list-box--inline + .#{$prefix}--list-box__menu-item__selected-icon { + right: rem(8px); + } + + .#{$prefix}--list-box__menu-item--active + .#{$prefix}--list-box__menu-item__selected-icon { + display: block; + } + + .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label { + width: 100%; + } + + .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // Dropdown top orientation modifiers + .#{$prefix}--list-box--up .#{$prefix}--list-box__menu { + bottom: 2.5rem; + } + + .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm + .#{$prefix}--list-box__menu, + .#{$prefix}--list-box--up.#{$prefix}--list-box--sm + .#{$prefix}--list-box__menu, + .#{$prefix}--list-box--up + .#{$prefix}--list-box--sm + .#{$prefix}--list-box__menu { + bottom: 2rem; + } + + .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg + .#{$prefix}--list-box__menu, + .#{$prefix}--list-box--up.#{$prefix}--list-box--lg + .#{$prefix}--list-box__menu, + .#{$prefix}--list-box--up + .#{$prefix}--list-box--lg + .#{$prefix}--list-box__menu { + bottom: 3rem; + } + + // Tweaks for descendants + // When handling input, we need to target nodes that specifically opt-in to + // the type text in order to make sure the text input is styled + // correctly. + // TODO: remove [role='combobox'] in v11 + .#{$prefix}--list-box input[role='combobox'], + .#{$prefix}--list-box input[type='text'] { + min-width: 0; + background-color: inherit; + } + + // Windows HCM fix + .#{$prefix}--list-box__field, + .#{$prefix}--list-box__menu, + .#{$prefix}--multi-select .#{$prefix}--tag--filter { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--list-box__field:focus, + .#{$prefix}--multi-select .#{$prefix}--tag__close-icon:focus, + .#{$prefix}--list-box__menu-item--highlighted + .#{$prefix}--list-box__menu-item__option { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--list-box__menu-icon > svg, + .#{$prefix}--list-box__selection > svg, + .#{$prefix}--list-box__selection--multi > svg { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_index.scss new file mode 100644 index 000000000000..f0202b94909c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'list'; +@use 'list'; + +@include list.list; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_list.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_list.scss new file mode 100644 index 000000000000..0bccf02aeae2 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/list/_list.scss @@ -0,0 +1,94 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +//----------------------------- +// List +//----------------------------- + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type'; +@use '../../utilities/component-reset'; +@use '../../utilities/convert'; + +/// List styles +/// @access public +/// @group list +@mixin list { + .#{$prefix}--list--nested, + .#{$prefix}--list--unordered, + .#{$prefix}--list--ordered, + .#{$prefix}--list--ordered--native { + @include component-reset.reset; + @include type.type-style('body-long-01'); + + list-style: none; + } + + .#{$prefix}--list--expressive, + .#{$prefix}--list--expressive .#{$prefix}--list--nested { + @include type.type-style('body-long-02'); + } + + .#{$prefix}--list--ordered--native { + list-style: decimal; + } + + .#{$prefix}--list__item { + color: $text-primary; + } + + .#{$prefix}--list--nested { + margin-left: convert.rem(32px); + } + + .#{$prefix}--list--nested .#{$prefix}--list__item { + padding-left: $spacing-02; + } + + .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) { + counter-reset: item; + } + + .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) + > .#{$prefix}--list__item { + position: relative; + } + + .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) + > .#{$prefix}--list__item::before { + position: absolute; + left: convert.rem(-24px); + content: counter(item) '.'; + counter-increment: item; + } + + .#{$prefix}--list--ordered.#{$prefix}--list--nested, + .#{$prefix}--list--ordered--native.#{$prefix}--list--nested { + list-style-type: lower-latin; + } + + .#{$prefix}--list--unordered > .#{$prefix}--list__item { + position: relative; + + &::before { + position: absolute; + left: calc(-1 * #{$spacing-05}); + // – en dash + content: '\002013'; + } + } + + .#{$prefix}--list--unordered.#{$prefix}--list--nested + > .#{$prefix}--list__item::before { + // offset to account for smaller ▪ vs – + left: calc(-1 * #{$spacing-04}); + // ▪ square + content: '\0025AA'; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_animation.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_animation.scss new file mode 100644 index 000000000000..68f6af28d8e9 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_animation.scss @@ -0,0 +1,39 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../motion'; + +@mixin spin { + // Animate the container + animation-duration: 690ms; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: rotate; + animation-timing-function: linear; + + // Animate the stroke + svg circle { + animation-duration: 10ms; + animation-name: init-stroke; + animation-timing-function: motion.$standard-easing; + } +} + +@mixin stop { + // Animate the container + animation: rotate-end-p1 700ms motion.$ease-out forwards, + rotate-end-p2 700ms motion.$ease-out 700ms forwards; + + // Animate the stroke + svg circle { + animation-delay: 700ms; + animation-duration: 700ms; + animation-fill-mode: forwards; + animation-name: stroke-end; + animation-timing-function: motion.$ease-out; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_functions.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_functions.scss new file mode 100644 index 000000000000..bc8ff62edcdc --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_functions.scss @@ -0,0 +1,10 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@function loading-progress($circumference, $percentage) { + @return $circumference - $percentage * 0.01 * $circumference; +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_index.scss new file mode 100644 index 000000000000..7ca9d31bb97b --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'loading'; +@use 'loading'; + +@include loading.loading; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_loading.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_loading.scss new file mode 100644 index 000000000000..9c57e212193a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_loading.scss @@ -0,0 +1,140 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../utilities/component-reset'; +@use '../../utilities/convert'; +@use '../../utilities/z-index' as *; +@use 'vars' as *; +@use 'functions' as *; +@use 'animation'; + +/// Loading styles +/// @access private +/// @group loading +@mixin loading { + .#{$prefix}--loading { + @include component-reset.reset; + @include animation.spin; + + width: $loading-size; + height: $loading-size; + } + + // Animation (Spin by default) + .#{$prefix}--loading__svg { + fill: transparent; + } + + .#{$prefix}--loading__svg circle { + stroke-dasharray: $circumference $circumference; + stroke-linecap: butt; + stroke-width: 10; + } + + .#{$prefix}--loading__stroke { + stroke: $interactive; + stroke-dashoffset: loading-progress($circumference, 81); + } + + .#{$prefix}--loading--small .#{$prefix}--loading__stroke { + stroke-dashoffset: loading-progress($circumference, 48); + } + + .#{$prefix}--loading--stop { + @include animation.stop; + } + + .#{$prefix}--loading--small { + width: convert.rem(16px); + height: convert.rem(16px); + + circle { + stroke-width: 16; + } + } + + .#{$prefix}--loading--small .#{$prefix}--loading__svg { + stroke: $interactive; + } + + .#{$prefix}--loading__background { + stroke: $layer-accent; + stroke-dashoffset: -22; + } + + // Negative values for `stroke-dashoffset` are not supported in Safari + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + circle.#{$prefix}--loading__background { + stroke-dasharray: 265; + stroke-dashoffset: 0; + } + } + } + + .#{$prefix}--loading-overlay { + position: fixed; + z-index: z('overlay'); + top: 0; + left: 0; + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + background-color: $overlay; + transition: background-color $duration-slow-02 motion(standard, expressive); + } + + .#{$prefix}--loading-overlay--stop { + display: none; + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @keyframes rotate-end-p1 { + 100% { + transform: rotate(360deg); + } + } + + @keyframes rotate-end-p2 { + 100% { + transform: rotate(-360deg); + } + } + + /* Stroke animations */ + @keyframes init-stroke { + 0% { + stroke-dashoffset: loading-progress($circumference, 0); + } + 100% { + stroke-dashoffset: loading-progress($circumference, 81); + } + } + + @keyframes stroke-end { + 0% { + stroke-dashoffset: loading-progress($circumference, 81); + } + 100% { + stroke-dashoffset: loading-progress($circumference, 0); + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_vars.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_vars.scss new file mode 100644 index 000000000000..236c7559f093 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/loading/_vars.scss @@ -0,0 +1,21 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +/// @type Number +/// @access private +/// @group loading +$radius: 44; + +/// @type Number +/// @access private +/// @group loading +$circumference: $radius * 2 * 3.1416; + +/// @type Number +/// @access private +/// @group loading +$loading-size: 5.5rem; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_index.scss new file mode 100644 index 000000000000..10933bdd0719 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'menu'; +@use 'menu'; + +@include menu.menu; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_menu.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_menu.scss new file mode 100644 index 000000000000..528cf618a1a4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/menu/_menu.scss @@ -0,0 +1,144 @@ +// +// Copyright IBM Corp. 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../button/tokens' as button; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/z-index' as *; + +/// Menu styles +/// @access public +/// @group menu +@mixin menu { + .#{$prefix}--menu { + @include box-shadow; + + position: fixed; + z-index: z('modal'); + min-width: 13rem; + max-width: 18rem; + padding: $spacing-02 0; + background-color: $layer; + visibility: hidden; + } + + .#{$prefix}--menu--open { + visibility: visible; + + &:focus { + @include focus-outline('border'); + } + } + + .#{$prefix}--menu--invisible { + opacity: 0; + pointer-events: none; + } + + .#{$prefix}--menu-option { + position: relative; + // $size-sm + height: 2rem; + background-color: $layer; + color: $text-primary; + cursor: pointer; + transition: background-color $duration-fast-01 motion(standard, productive); + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--menu-option--active, + .#{$prefix}--menu-option:hover { + background-color: $layer-hover; + } + + .#{$prefix}--menu-option--danger:hover, + .#{$prefix}--menu-option--danger:focus { + background-color: button.$button-danger-primary; + color: $text-on-color; + } + + .#{$prefix}--menu-option > .#{$prefix}--menu { + margin-top: calc(#{$spacing-02} * -1); + } + + .#{$prefix}--menu-option__content { + display: flex; + height: 100%; + align-items: center; + justify-content: space-between; + padding: 0 $spacing-05; + } + + .#{$prefix}--menu-option__content--disabled { + background-color: $layer; + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label, + .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info, + .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon { + color: $text-disabled; + } + + .#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label { + margin-left: $spacing-05; + } + + .#{$prefix}--menu-option__label { + @include type-style('body-short-01'); + + overflow: hidden; + flex-grow: 1; + // add top/bottom padding to make sure letters are not cut off by hidden overflow + padding: $spacing-02 0; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + } + + .#{$prefix}--menu-option__info { + display: inline-flex; + margin-left: $spacing-05; + } + + .#{$prefix}--menu-option__icon { + display: flex; + width: 1rem; + height: 1rem; + align-items: center; + margin-right: $spacing-03; + } + + .#{$prefix}--menu-divider { + width: 100%; + height: 1px; + margin: $spacing-02 0; + background-color: $border-subtle; + } + + $supported-sizes: ( + // $size-md + 'md': 2.5rem, + // $size-lg + 'lg': 3rem + ); + + @each $size, $value in $supported-sizes { + .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option { + height: $value; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_index.scss new file mode 100644 index 000000000000..ffefd6099a89 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'modal'; +@use 'modal'; + +@include modal.modal; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_modal.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_modal.scss new file mode 100644 index 000000000000..0ed643484fc1 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/modal/_modal.scss @@ -0,0 +1,381 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../breakpoint' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/component-reset' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/z-index' as *; + +@use '../button'; + +/// Modal styles +/// @access public +/// @group modal +@mixin modal { + .#{$prefix}--modal { + position: fixed; + z-index: z('modal'); + top: 0; + left: 0; + display: flex; + width: 100vw; + height: 100vh; + align-items: center; + justify-content: center; + background-color: $overlay; + content: ''; + opacity: 0; + transition: opacity $duration-moderate-02 motion(exit, expressive), + visibility 0ms linear $duration-moderate-02; + visibility: hidden; + + &.is-visible { + opacity: 1; + transition: opacity $duration-moderate-02 motion(entrance, expressive), + visibility 0ms linear; + visibility: inherit; + } + + // V11: Question for design: do we have an updated tokens for fields that exist on `layer`? + .#{$prefix}--pagination, + .#{$prefix}--pagination__control-buttons, + .#{$prefix}--text-input, + .#{$prefix}--text-area, + .#{$prefix}--search-input, + .#{$prefix}--select-input, + .#{$prefix}--dropdown, + .#{$prefix}--dropdown-list, + .#{$prefix}--number input[type='number'], + .#{$prefix}--date-picker__input, + .#{$prefix}--multi-select { + background-color: $field-02; + } + } + + .#{$prefix}--modal.is-visible .#{$prefix}--modal-container { + transform: translate3d(0, 0, 0); + transition: transform $duration-moderate-02 motion(entrance, expressive); + } + + // ----------------------------- + // Modal container + // ----------------------------- + .#{$prefix}--modal-container { + position: fixed; + top: 0; + display: grid; + overflow: hidden; + width: 100%; + height: 100%; + max-height: 100%; + background-color: $layer; + grid-template-columns: 100%; + grid-template-rows: auto 1fr auto; + // make modal edge visible on high contrast themes (#3880) + outline: 3px solid transparent; + outline-offset: -3px; + transform: translate3d(0, -24px, 0); + transform-origin: top center; + transition: transform $duration-moderate-02 motion(exit, expressive); + + @include breakpoint(md) { + position: static; + width: 84%; + height: auto; + max-height: 90%; + } + + @include breakpoint(lg) { + width: 60%; + max-height: 84%; + } + + @include breakpoint(xlg) { + width: 48%; + } + } + + // ----------------------------- + // Modal content + // ----------------------------- + .#{$prefix}--modal-content { + @include type-style('body-long-01'); + + position: relative; + // Required to accommodate focus outline's negative offset: + padding-top: $spacing-03; + // anything besides text/p spans full width, with just 16px padding + padding-right: $spacing-05; + padding-left: $spacing-05; + margin-bottom: $spacing-09; + color: $text-primary; + font-weight: 400; + grid-column: 1/-1; + grid-row: 2/-2; + overflow-y: auto; + + &:focus { + @include focus-outline('outline'); + } + } + + //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated + // text/p gets 20% right padding + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content { + padding-right: 20%; + @include type-style('body-long-01'); + } + + //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\ + // anything besides text/p spans full width, with just 16px padding + .#{$prefix}--modal-content--with-form { + padding-right: $spacing-05; + } + + // ----------------------------- + // Modal header + // ----------------------------- + .#{$prefix}--modal-header { + padding-top: $spacing-05; + padding-right: $spacing-09; + padding-left: $spacing-05; + margin-bottom: $spacing-03; + grid-column: 1/-1; + grid-row: 1/1; + } + + .#{$prefix}--modal-header__label { + @include type-style('label-01'); + + margin-bottom: $spacing-02; + color: $text-secondary; + } + + .#{$prefix}--modal-header__heading { + @include type-style('productive-heading-03'); + + color: $text-primary; + } + + // ----------------------------- + // XS Modal + // ----------------------------- + .#{$prefix}--modal-container--xs { + //text always spans full width in xs modals + .#{$prefix}--modal-content__regular-content { + padding-right: $spacing-05; + } + + .#{$prefix}--modal-content p { + //.#{$prefix}--modal-content already has 16px padding so this doesn't need any + padding-right: 0; + } + + @include breakpoint(md) { + width: 48%; + } + + @include breakpoint(lg) { + width: 32%; + max-height: 48%; + } + + @include breakpoint(xlg) { + width: 24%; + } + } + + // ----------------------------- + // SM Modal + // ----------------------------- + .#{$prefix}--modal-container--sm { + //text spans full width in sm modals below 1056 + .#{$prefix}--modal-content__regular-content { + padding-right: $spacing-05; + } + + .#{$prefix}--modal-content p { + //.#{$prefix}--modal-content already has 16px padding so this doesn't need any + padding-right: 0; + } + + @include breakpoint(md) { + width: 60%; + } + + @include breakpoint(lg) { + width: 42%; + max-height: 72%; + + .#{$prefix}--modal-content p, + .#{$prefix}--modal-content__regular-content { + padding-right: 20%; + } + } + + @include breakpoint(xlg) { + width: 36%; + } + } + + // ----------------------------- + // LG Modal + // ----------------------------- + .#{$prefix}--modal-container--lg { + @include breakpoint(md) { + width: 96%; + } + + @include breakpoint(lg) { + width: 84%; + max-height: 96%; + } + + @include breakpoint(xlg) { + width: 72%; + } + } + + // ----------------------------- + // Modal overflow + // ----------------------------- + // Required so overflow-indicator disappears at end of content + .#{$prefix}--modal-scroll-content > *:last-child { + padding-bottom: $spacing-07; + } + + .#{$prefix}--modal-content--overflow-indicator { + position: absolute; + bottom: $spacing-09; + left: 0; + width: 100%; + height: rem(32px); + background-image: linear-gradient(to bottom, transparent, $layer); + content: ''; + grid-column: 1/-1; + grid-row: 2/-2; + pointer-events: none; + } + + // Safari-only media query + // won't appear correctly with CSS custom properties + // see: code snippet and tabs overflow indicators + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .#{$prefix}--modal-content--overflow-indicator { + background-image: linear-gradient(to bottom, rgba($layer, 0), $layer); + } + } + } + + .#{$prefix}--modal-content:focus + ~ .#{$prefix}--modal-content--overflow-indicator { + width: calc(100% - 4px); + margin: 0 2px 2px; + } + + @media screen and (-ms-high-contrast: active) { + .#{$prefix}--modal-scroll-content > *:last-child { + padding-bottom: 0; + } + + .#{$prefix}--modal-content--overflow-indicator { + display: none; + } + } + + // ----------------------------- + // Modal footer + // ----------------------------- + .#{$prefix}--modal-footer { + display: flex; + height: rem(64px); + justify-content: flex-end; + margin-top: auto; + grid-column: 1/-1; + grid-row: -1/-1; + } + + .#{$prefix}--modal-footer .#{$prefix}--btn { + max-width: none; + height: rem(64px); + flex: 0 1 50%; + padding-top: $spacing-05; + padding-bottom: $spacing-07; + margin: 0; + } + + .#{$prefix}--modal-footer--three-button .#{$prefix}--btn { + flex: 0 1 25%; + align-items: flex-start; + } + + // ----------------------------- + // Modal close btn + // ----------------------------- + .#{$prefix}--modal-close { + position: absolute; + z-index: 2; + top: 0; + right: 0; + overflow: hidden; + width: 3rem; + height: 3rem; + padding: rem(12px); + border: 2px solid transparent; + background-color: transparent; + cursor: pointer; + transition: background-color $duration-fast-02 motion(standard, productive); + + &:hover { + background-color: $layer-hover; + } + + &:focus { + border-color: $focus; + outline: none; + } + } + + .#{$prefix}--modal-close::-moz-focus-inner { + border: 0; + } + + .#{$prefix}--modal-close__icon { + width: rem(20px); + height: rem(20px); + fill: $icon-primary; + } + + .#{$prefix}--body--with-modal-open { + overflow: hidden; + } + + .#{$prefix}--body--with-modal-open .#{$prefix}--tooltip, + .#{$prefix}--body--with-modal-open .#{$prefix}--overflow-menu-options { + z-index: z('modal'); + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--modal-close__icon { + @include high-contrast-mode('icon-fill'); + } + + .#{$prefix}--modal-close:focus { + @include high-contrast-mode('focus'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_index.scss new file mode 100644 index 000000000000..cbeac0ee0bc5 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'multiselect'; +@use 'multiselect'; + +@include multiselect.multiselect; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_multiselect.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_multiselect.scss new file mode 100644 index 000000000000..978954ae00f4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_multiselect.scss @@ -0,0 +1,103 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../list-box'; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; + +/// Multi select styles +/// @access public +/// @group multi-select +@mixin multiselect { + .#{$prefix}--multi-select .#{$prefix}--tag { + min-width: auto; + margin: 0 $spacing-03 0 0; + } + + .#{$prefix}--multi-select--filterable .#{$prefix}--tag { + margin: 0 $spacing-03 0 $spacing-05; + } + + .#{$prefix}--multi-select .#{$prefix}--list-box__menu { + min-width: auto; + } + + .#{$prefix}--multi-select + .#{$prefix}--list-box__menu-item__option + .#{$prefix}--checkbox-wrapper { + display: flex; + width: 100%; + height: 100%; + align-items: center; + } + + .#{$prefix}--multi-select + .#{$prefix}--list-box__menu-item__option + .#{$prefix}--checkbox-label { + display: inline-block; + overflow: hidden; + width: 100%; + padding-left: rem(28px); + text-overflow: ellipsis; + white-space: nowrap; + } + + .#{$prefix}--multi-select + .#{$prefix}--list-box__menu-item__option + > .#{$prefix}--form-item { + flex-direction: row; + margin: 0; + } + + .#{$prefix}--multi-select + .#{$prefix}--list-box__menu-item + .#{$prefix}--checkbox:checked + ~ .#{$prefix}--checkbox-label-text { + color: $text-primary; + } + + .#{$prefix}--multi-select--filterable { + transition: outline-color $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box + .#{$prefix}--text-input { + border: rem(2px) solid transparent; + background-clip: padding-box; + outline: none; + } + + .#{$prefix}--multi-select--filterable--input-focused { + @include focus-outline('outline'); + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected + .#{$prefix}--text-input { + padding-left: 0; + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover + .#{$prefix}--text-input { + background-color: $field; + } + + .#{$prefix}--multi-select--filterable + .#{$prefix}--list-box__selection--multi { + margin: 0 0 0 $spacing-05; + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline, + .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline + .#{$prefix}--text-input { + border-bottom: 0; + background-color: transparent; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_actionable-notification.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_actionable-notification.scss new file mode 100644 index 000000000000..deb8d6e6cb42 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_actionable-notification.scss @@ -0,0 +1,413 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@use 'mixins' as *; +@use '../../breakpoint' as *; +@use '../../colors' as *; +@use '../../config' as *; +@use '../../feature-flags' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../themes' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/focus-outline' as *; +@use './tokens' as *; +@use '../button/mixins' as button-mixins; +@use '../button/vars' as button-vars; + +/// Actionable notification styles +/// @access public +/// @group notification +@mixin actionable-notification { + .#{$prefix}--actionable-notification { + @include reset; + + position: relative; + display: flex; + width: 100%; + min-width: rem(288px); + max-width: rem(288px); + height: auto; + min-height: rem(48px); + flex-wrap: wrap; + @if not enabled('enable-v11-release') { + margin-top: $spacing-05; + margin-bottom: $spacing-05; + } + + color: $text-inverse; + + @include breakpoint(md) { + max-width: rem(608px); + flex-wrap: nowrap; + } + + @include breakpoint(lg) { + max-width: rem(736px); + } + + @include breakpoint(max) { + max-width: rem(832px); + } + } + + .#{$prefix}--actionable-notification--toast { + min-width: rem(288px); + max-width: rem(288px); + flex-wrap: wrap; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + a { + color: $link-inverse; + } + + .#{$prefix}--actionable-notification a { + text-decoration: none; + } + + .#{$prefix}--actionable-notification a:hover { + text-decoration: underline; + } + + .#{$prefix}--actionable-notification a:focus { + outline: 1px solid $link-inverse; + } + + .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast + a:focus { + @include focus-outline; + } + + .#{$prefix}--actionable-notification--low-contrast { + color: $text-primary; + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + border-width: 1px 1px 1px 0; + border-style: solid; + content: ''; + filter: opacity(0.4); + pointer-events: none; + } + } + + .#{$prefix}--actionable-notification--error { + @include notification--experimental( + $support-error-inverse, + $background-inverse + ); + } + + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--error { + @include notification--experimental( + $support-error, + $notification-background-error + ); + + &::before { + border-color: $support-error; + } + } + + .#{$prefix}--actionable-notification--success { + @include notification--experimental( + $support-success-inverse, + $background-inverse + ); + } + + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--success { + @include notification--experimental( + $support-success, + $notification-background-success + ); + + &::before { + border-color: $support-success; + } + } + + .#{$prefix}--actionable-notification--info, + .#{$prefix}--actionable-notification--info-square { + @include notification--experimental( + $support-info-inverse, + $background-inverse + ); + } + + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info, + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info-square { + @include notification--experimental( + $support-info, + $notification-background-info + ); + + &::before { + border-color: $support-info; + } + } + + .#{$prefix}--actionable-notification--warning, + .#{$prefix}--actionable-notification--warning-alt { + @include notification--experimental( + $support-warning-inverse, + $background-inverse + ); + } + + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning, + .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning-alt { + @include notification--experimental( + $support-warning, + $notification-background-warning + ); + + &::before { + border-color: $support-warning; + } + } + + .#{$prefix}--actionable-notification--warning + .#{$prefix}--inline-notification__icon, + .#{$prefix}--actionable-notification--warning + .#{$prefix}--toast-notification__icon + path[opacity='0'] { + fill: $black-100; + opacity: 1; + } + + .#{$prefix}--actionable-notification__details { + display: flex; + flex-grow: 1; + margin: 0 $spacing-09 0 $spacing-05; + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast) + .#{$prefix}--actionable-notification__details { + @include breakpoint(md) { + margin: 0 $spacing-05; + } + } + + .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon { + flex-shrink: 0; + margin-top: rem(14px); + margin-right: $spacing-05; + } + + .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon { + flex-shrink: 0; + margin-top: $spacing-05; + margin-right: $spacing-05; + } + + .#{$prefix}--actionable-notification__text-wrapper { + display: flex; + flex-wrap: wrap; + padding: rem(15px) 0; + } + + .#{$prefix}--actionable-notification__content { + @include type-style('body-short-01'); + + word-break: break-word; + } + + /* Ghost action button when inline */ + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { + height: rem(32px); + margin-bottom: $spacing-03; + margin-left: $spacing-08; + + @include breakpoint(md) { + margin: $spacing-03 0; + } + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { + color: $link-inverse; + } + + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $background-inverse-hover; + } + + .#{$prefix}--actionable-notification--low-contrast + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--actionable-notification--low-contrast + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $notification-action-hover; + } + + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus { + border-color: transparent; + box-shadow: none; + outline: 2px solid $focus-inverse; + outline-offset: -2px; + } + + .#{$prefix}--actionable-notification--low-contrast + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus { + outline-color: $focus; + } + + .#{$prefix}--actionable-notification--hide-close-button + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { + margin-right: $spacing-03; + } + + /* Tertiary action button when not inline (toast) */ + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { + margin-bottom: $spacing-03; + + // Button should be left aligned with text. 20px is the width of the notification icon + margin-left: calc(#{$spacing-07} + #{rem(20px)}); + } + + // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification + // background is dark, the button styles have to be inversed again. + // So essentially the: + // btn-tertiary white theme button styles should become g100 button styles + // btn-tertiary g10 theme button styles should become g90 button styles + // btn-tertiary g90 theme button styles should become g10 button styles + // btn-tertiary g100 theme button styles should become white button styles + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { + @include button-mixins.button-theme( + transparent, + $notification-action-tertiary-inverse, + $notification-action-tertiary-inverse, + $notification-action-tertiary-inverse-hover, + currentColor, + $notification-action-tertiary-inverse-active + ); + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover { + color: $notification-action-tertiary-inverse-text; + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus { + border-color: $focus-inverse; + background-color: $notification-action-tertiary-inverse; + box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse, + inset 0 0 0 button-vars.$button-border-width $background-inverse; + color: $notification-action-tertiary-inverse-text; + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:active { + border-color: transparent; + background-color: $notification-action-tertiary-inverse-active; + color: $notification-action-tertiary-inverse-text; + } + + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:disabled, + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled, + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus:disabled, + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled, + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover, + .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast) + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:focus { + background: transparent; + color: $notification-action-tertiary-inverse-text-on-color-disabled; + outline: none; + } + + .#{$prefix}--actionable-notification--hide-close-button + .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { + margin-right: $spacing-03; + } + + .#{$prefix}--actionable-notification__close-button { + @include focus-outline('reset'); + + position: absolute; + top: 0; + right: 0; + display: flex; + width: rem(48px); + min-width: rem(48px); + max-width: rem(48px); + height: rem(48px); + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + border: none; + background: transparent; + cursor: pointer; + transition: outline $duration-fast-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive); + + &:focus { + outline: 2px solid $focus-inverse; + outline-offset: -2px; + } + + .#{$prefix}--actionable-notification__close-icon { + fill: $icon-inverse; + } + + @include breakpoint(md) { + position: static; + } + } + + .#{$prefix}--actionable-notification--toast + .#{$prefix}--actionable-notification__close-button { + @include breakpoint(md) { + position: absolute; + } + } + + .#{$prefix}--actionable-notification--low-contrast + .#{$prefix}--actionable-notification__close-button:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--actionable-notification--low-contrast + .#{$prefix}--actionable-notification__close-button + .#{$prefix}--actionable-notification__close-icon { + fill: $icon-primary; + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--actionable-notification { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--actionable-notification__close-button:focus, + .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--actionable-notification__action-button:focus { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon, + .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon { + @include high-contrast-mode('icon-fill'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_index.scss new file mode 100644 index 000000000000..aa9e74716b5a --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_index.scss @@ -0,0 +1,22 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward './tokens'; +@forward 'inline-notification'; +@forward 'toast-notification'; +@forward 'actionable-notification'; + +@use '../../theme'; +@use './tokens'; +@use './inline-notification'; +@use './toast-notification'; +@use './actionable-notification'; + +@include theme.add-component-tokens(tokens.$notification-tokens); +@include inline-notification.inline-notification; +@include toast-notification.toast-notification; +@include actionable-notification.actionable-notification; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_inline-notification.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_inline-notification.scss new file mode 100644 index 000000000000..62bd4c20b149 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_inline-notification.scss @@ -0,0 +1,331 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// +@use 'mixins' as *; +@use '../../breakpoint' as *; +@use '../../colors' as *; +@use '../../config' as *; +@use '../../feature-flags'; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../themes' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/focus-outline' as *; +@use './tokens' as *; + +/// Inline notification styles +/// @access public +/// @group notification +@mixin inline-notification { + .#{$prefix}--inline-notification { + @include reset; + + position: relative; + display: flex; + width: 100%; + min-width: rem(288px); + max-width: rem(288px); + height: auto; + min-height: rem(48px); + flex-wrap: wrap; + @if not enabled('enable-v11-release') { + margin-top: $spacing-05; + margin-bottom: $spacing-05; + } + + color: $text-inverse; + + @include breakpoint(md) { + max-width: rem(608px); + flex-wrap: nowrap; + } + + @include breakpoint(lg) { + max-width: rem(736px); + } + + @include breakpoint(max) { + max-width: rem(832px); + } + } + + .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast) + a { + color: $link-inverse; + } + + .#{$prefix}--inline-notification a { + text-decoration: none; + } + + .#{$prefix}--inline-notification a:hover { + text-decoration: underline; + } + + .#{$prefix}--inline-notification a:focus { + outline: 1px solid $link-inverse; + } + + .#{$prefix}--inline-notification.#{$prefix}--inline-notification--low-contrast + a:focus { + @include focus-outline; + } + + .#{$prefix}--inline-notification--low-contrast { + color: $text-primary; + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + border-width: 1px 1px 1px 0; + border-style: solid; + content: ''; + filter: opacity(0.4); + pointer-events: none; + } + } + + .#{$prefix}--inline-notification--error { + @include notification--experimental( + $support-error-inverse, + $background-inverse + ); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error { + @include notification--experimental( + $support-error, + $notification-background-error + ); + + &::before { + border-color: $support-error; + } + } + + .#{$prefix}--inline-notification--success { + @include notification--experimental( + $support-success-inverse, + $background-inverse + ); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success { + @include notification--experimental( + $support-success, + $notification-background-success + ); + + &::before { + border-color: $support-success; + } + } + + .#{$prefix}--inline-notification--info, + .#{$prefix}--inline-notification--info-square { + @include notification--experimental( + $support-info-inverse, + $background-inverse + ); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info, + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square { + @include notification--experimental( + $support-info, + $notification-background-info + ); + + &::before { + border-color: $support-info; + } + } + + .#{$prefix}--inline-notification--warning, + .#{$prefix}--inline-notification--warning-alt { + @include notification--experimental( + $support-warning-inverse, + $background-inverse + ); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning, + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt { + @include notification--experimental( + $support-warning, + $notification-background-warning + ); + + &::before { + border-color: $support-warning; + } + } + + .#{$prefix}--inline-notification--warning + .#{$prefix}--inline-notification__icon + path[opacity='0'] { + fill: $black-100; + opacity: 1; + } + + .#{$prefix}--inline-notification__details { + display: flex; + flex-grow: 1; + margin: 0 $spacing-09 0 $spacing-05; + + @include breakpoint(md) { + margin: 0 $spacing-05; + } + } + + .#{$prefix}--inline-notification__icon { + flex-shrink: 0; + margin-top: rem(14px); + margin-right: $spacing-05; + } + + .#{$prefix}--inline-notification__text-wrapper { + display: flex; + flex-wrap: wrap; + padding: rem(15px) 0; + } + + @if feature-flags.enabled('enable-v11-release') { + .#{$prefix}--inline-notification__content { + @include type-style('body-short-01'); + + word-break: break-word; + } + } @else { + .#{$prefix}--inline-notification__title { + @include type-style('productive-heading-01'); + + margin: 0 $spacing-02 0 0; + } + + .#{$prefix}--inline-notification__subtitle { + @include type-style('body-short-01'); + + word-break: break-word; + } + } + + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { + height: rem(32px); + margin-bottom: $spacing-03; + margin-left: $spacing-08; + + @include breakpoint(md) { + margin: $spacing-03 0; + } + } + + .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast) + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { + color: $link-inverse; + } + + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $background-inverse-hover; + } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $notification-action-hover; + } + + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus { + border-color: transparent; + box-shadow: none; + outline: 2px solid $focus-inverse; + outline-offset: -2px; + } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus { + outline-color: $focus; + } + + .#{$prefix}--inline-notification--hide-close-button + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { + margin-right: $spacing-03; + } + + .#{$prefix}--inline-notification__close-button { + @include focus-outline('reset'); + + position: absolute; + top: 0; + right: 0; + display: flex; + width: rem(48px); + min-width: rem(48px); + max-width: rem(48px); + height: rem(48px); + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + border: none; + background: transparent; + cursor: pointer; + transition: outline $duration-fast-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive); + + &:focus { + outline: 2px solid $focus-inverse; + outline-offset: -2px; + } + + .#{$prefix}--inline-notification__close-icon { + fill: $icon-inverse; + } + + @include breakpoint(md) { + position: static; + } + } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__close-button:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__close-button + .#{$prefix}--inline-notification__close-icon { + fill: $icon-primary; + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--inline-notification { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--inline-notification__close-button:focus, + .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--inline-notification__action-button:focus { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--inline-notification__icon { + @include high-contrast-mode('icon-fill'); + } + .#{$prefix}--inline-notification__close-icon { + @include high-contrast-mode('icon-fill'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_mixins.scss new file mode 100644 index 000000000000..e4e5c5f24c8d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_mixins.scss @@ -0,0 +1,42 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; + +/// @access public +/// @group notification +@mixin inline-notification--color($color) { + border: 1px solid $color; + border-left: 6px solid $color; + + .#{$prefix}--inline-notification__icon { + fill: $color; + } +} + +//---------------------------------------------- +// Toast Notification +// --------------------------------------------- + +/// @access private +/// @group notification +@mixin notification--color($color) { + border-left: 6px solid $color; +} + +/// @access private +/// @group notification +@mixin notification--experimental($color, $background-color) { + border-left: 3px solid $color; + background: $background-color; + + .#{$prefix}--inline-notification__icon, + .#{$prefix}--toast-notification__icon, + .#{$prefix}--actionable-notification__icon { + fill: $color; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_toast-notification.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_toast-notification.scss new file mode 100644 index 000000000000..bd872e2d5576 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_toast-notification.scss @@ -0,0 +1,265 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'mixins' as*; +@use 'tokens' as *; +@use '../../breakpoint' as *; +@use '../../colors' as *; +@use '../../config' as *; +@use '../../feature-flags'; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../themes' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/focus-outline' as *; +@use './tokens' as *; + +/// Toast notification styles +/// @access public +/// @group notification +@mixin toast-notification { + .#{$prefix}--toast-notification { + @include reset; + + display: flex; + width: rem(288px); + height: auto; + padding-left: $spacing-05; + @if not enabled('enable-v11-release') { + margin-top: $spacing-03; + margin-right: $spacing-05; + margin-bottom: $spacing-03; + } + + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); + color: $text-inverse; + + @if not enabled('enable-v11-release') { + &:first-child { + margin-top: $spacing-05; + } + } + + @include breakpoint(max) { + width: rem(352px); + } + } + + .#{$prefix}--toast-notification:not(.#{$prefix}--toast-notification--low-contrast) + a { + color: $link-inverse; + } + + .#{$prefix}--toast-notification a { + text-decoration: none; + } + + .#{$prefix}--toast-notification a:hover { + text-decoration: underline; + } + + .#{$prefix}--toast-notification a:focus { + outline: 1px solid $link-inverse; + } + + .#{$prefix}--toast-notification.#{$prefix}--toast-notification--low-contrast + a:focus { + @include focus-outline; + } + + .#{$prefix}--toast-notification--low-contrast { + color: $text-primary; + } + + .#{$prefix}--toast-notification--error { + @include notification--experimental( + $support-error-inverse, + $background-inverse + ); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error { + @include notification--experimental( + $support-error, + $notification-background-error + ); + } + + .#{$prefix}--toast-notification--success { + @include notification--experimental( + $support-success-inverse, + $background-inverse + ); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success { + @include notification--experimental( + $support-success, + $notification-background-success + ); + } + + .#{$prefix}--toast-notification--info, + .#{$prefix}--toast-notification--info-square { + @include notification--experimental( + $support-info-inverse, + $background-inverse + ); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info, + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square { + @include notification--experimental( + $support-info, + $notification-background-info + ); + } + + .#{$prefix}--toast-notification--warning, + .#{$prefix}--toast-notification--warning-alt { + @include notification--experimental( + $support-warning-inverse, + $background-inverse + ); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning, + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt { + @include notification--experimental( + $support-warning, + $notification-background-warning + ); + } + + .#{$prefix}--toast-notification--warning + .#{$prefix}--toast-notification__icon + path[opacity='0'] { + fill: $black-100; + opacity: 1; + } + + .#{$prefix}--toast-notification__icon { + flex-shrink: 0; + margin-top: $spacing-05; + margin-right: $spacing-05; + } + + @if feature-flags.enabled('enable-v11-release') { + .#{$prefix}--toast-notification__content { + @include type-style('body-short-01'); + + margin-top: $spacing-05; + margin-right: $spacing-05; + margin-bottom: $spacing-05; + word-break: break-word; + } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__content { + color: $text-primary; + } + } @else { + .#{$prefix}--toast-notification__details { + margin-right: $spacing-05; + } + } + + .#{$prefix}--toast-notification__close-button { + @include focus-outline('reset'); + + display: flex; + width: rem(48px); + min-width: rem(48px); + height: rem(48px); + min-height: rem(48px); + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + border: none; + margin-left: auto; + background-color: transparent; + cursor: pointer; + transition: outline $transition--base, background-color $transition--base; + + &:focus { + outline: 2px solid $focus-inverse; + outline-offset: -2px; + } + + .#{$prefix}--toast-notification__close-icon { + fill: $icon-inverse; + } + } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__close-button:focus { + @include focus-outline('outline'); + } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__close-button + .#{$prefix}--toast-notification__close-icon { + fill: $icon-primary; + } + + @if not feature-flags.enabled('enable-v11-release') { + .#{$prefix}--toast-notification__title { + @include type-style('productive-heading-01'); + + margin-top: $spacing-05; + font-weight: 600; + word-break: break-word; + } + + .#{$prefix}--toast-notification__subtitle { + @include type-style('body-short-01'); + + margin-top: 0; + margin-bottom: $spacing-05; + color: $text-inverse; + word-break: break-word; + } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__subtitle { + color: $text-primary; + } + + .#{$prefix}--toast-notification__caption { + @include type-style('body-short-01'); + + padding-top: $spacing-03; + margin-bottom: $spacing-05; + color: $text-inverse; + } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__caption { + color: $text-primary; + } + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--toast-notification { + @include high-contrast-mode('outline'); + } + .#{$prefix}--toast-notification__close-button:focus { + @include high-contrast-mode('focus'); + } + .#{$prefix}--toast-notification__close-icon { + @include high-contrast-mode('icon-fill'); + } + .#{$prefix}--toast-notification__icon { + @include high-contrast-mode('icon-fill'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_tokens.scss new file mode 100644 index 000000000000..18dfc14c5065 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_tokens.scss @@ -0,0 +1,262 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use 'sass:color'; +@use "sass:map"; +@use "sass:list"; +@use '../../colors'; +@use '../../themes'; +@use '../../theme'; +@use '../../utilities/component-tokens'; +@use '../button/tokens' as button-tokens; + +$notification-background-error: ( + fallback: colors.$red-10, + values: ( + ( + theme: themes.$white, + value: colors.$red-10, + ), + ( + theme: themes.$g10, + value: colors.$red-10, + ), + ( + theme: themes.$g90, + value: theme.$layer, + ), + ( + theme: themes.$g100, + value: theme.$layer, + ), + ), +) !default; + +$notification-background-success: ( + fallback: colors.$green-10, + values: ( + ( + theme: themes.$white, + value: colors.$green-10, + ), + ( + theme: themes.$g10, + value: colors.$green-10, + ), + ( + theme: themes.$g90, + value: theme.$layer, + ), + ( + theme: themes.$g100, + value: theme.$layer, + ), + ), +) !default; + +$notification-background-info: ( + fallback: colors.$blue-10, + values: ( + ( + theme: themes.$white, + value: colors.$blue-10, + ), + ( + theme: themes.$g10, + value: colors.$blue-10, + ), + ( + theme: themes.$g90, + value: theme.$layer, + ), + ( + theme: themes.$g100, + value: theme.$layer, + ), + ), +) !default; + +$notification-background-warning: ( + fallback: color.mix(colors.$yellow-30, colors.$white-0, 15%), + values: ( + ( + theme: themes.$white, + value: color.mix(colors.$yellow-30, colors.$white-0, 15%), + ), + ( + theme: themes.$g10, + value: color.mix(colors.$yellow-30, colors.$white-0, 15%), + ), + ( + theme: themes.$g90, + value: theme.$layer, + ), + ( + theme: themes.$g100, + value: theme.$layer, + ), + ), +) !default; + +$notification-action-hover: ( + fallback: colors.$white-0, + values: ( + ( + theme: themes.$white, + value: colors.$white-0, + ), + ( + theme: themes.$g10, + value: colors.$white-0, + ), + ( + theme: themes.$g90, + value: theme.$layer-hover, + ), + ( + theme: themes.$g100, + value: theme.$layer-hover, + ), + ), +) !default; + +$notification-action-tertiary-inverse: ( + fallback: map.get(button-tokens.$button-tokens, button-tertiary, fallback), + values: + component-tokens.get-inverse-theme-values( + map.get(button-tokens.$button-tokens, button-tertiary) + ), +) !default; + +$notification-action-tertiary-inverse-active: ( + fallback: + map.get(button-tokens.$button-tokens, button-tertiary-active, fallback), + values: + component-tokens.get-inverse-theme-values( + map.get(button-tokens.$button-tokens, button-tertiary-active) + ), +) !default; + +$notification-action-tertiary-inverse-hover: ( + fallback: + map.get(button-tokens.$button-tokens, button-tertiary-hover, fallback), + values: + component-tokens.get-inverse-theme-values( + map.get(button-tokens.$button-tokens, button-tertiary-hover) + ), +) !default; + +$notification-action-tertiary-inverse-text: ( + fallback: map.get(themes.$white, text-inverse), + values: ( + ( + theme: themes.$white, + value: map.get(themes.$g100, text-inverse), + ), + ( + theme: themes.$g10, + value: map.get(themes.$g90, text-inverse), + ), + ( + theme: themes.$g90, + value: map.get(themes.$g10, text-inverse), + ), + ( + theme: themes.$g100, + value: map.get(themes.$white, text-inverse), + ), + ), +) !default; + +$notification-action-tertiary-inverse-text-on-color-disabled: ( + fallback: map.get(themes.$white, text-on-color-disabled), + values: ( + ( + theme: themes.$white, + value: map.get(themes.$g100, text-on-color-disabled), + ), + ( + theme: themes.$g10, + value: map.get(themes.$g90, text-on-color-disabled), + ), + ( + theme: themes.$g90, + value: map.get(themes.$g10, text-on-color-disabled), + ), + ( + theme: themes.$g100, + value: map.get(themes.$white, text-on-color-disabled), + ), + ), +) !default; + +$notification-tokens: ( + notification-background-error: $notification-background-error, + notification-background-success: $notification-background-success, + notification-background-info: $notification-background-info, + notification-background-warning: $notification-background-warning, + notification-action-hover: $notification-action-hover, + notification-action-tertiary-inverse: $notification-action-tertiary-inverse, + notification-action-tertiary-inverse-active: + $notification-action-tertiary-inverse-active, + notification-action-tertiary-inverse-hover: + $notification-action-tertiary-inverse-hover, + notification-action-tertiary-inverse-text: + $notification-action-tertiary-inverse-text, + notification-action-tertiary-inverse-text-on-color-disabled: + $notification-action-tertiary-inverse-text-on-color-disabled, +); + +$notification-background-error: component-tokens.get-var( + $notification-background-error, + 'notification-background-error' +); + +$notification-background-success: component-tokens.get-var( + $notification-background-success, + 'notification-background-success' +); + +$notification-background-info: component-tokens.get-var( + $notification-background-info, + 'notification-background-info' +); + +$notification-background-warning: component-tokens.get-var( + $notification-background-warning, + 'notification-background-warning' +); + +$notification-action-hover: component-tokens.get-var( + $notification-action-hover, + 'notification-action-hover' +); + +$notification-action-tertiary-inverse: component-tokens.get-var( + $notification-action-tertiary-inverse, + 'notification-action-tertiary-inverse' +); + +$notification-action-tertiary-inverse-active: component-tokens.get-var( + $notification-action-tertiary-inverse-active, + 'notification-action-tertiary-inverse-active' +); + +$notification-action-tertiary-inverse-hover: component-tokens.get-var( + $notification-action-tertiary-inverse-hover, + 'notification-action-tertiary-inverse-hover' +); + +$notification-action-tertiary-inverse-text: component-tokens.get-var( + $notification-action-tertiary-inverse-text, + 'notification-action-tertiary-inverse-text' +); + +$notification-action-tertiary-inverse-text-on-color-disabled: component-tokens.get-var( + $notification-action-tertiary-inverse-text-on-color-disabled, + 'notification-action-tertiary-inverse-text-on-color-disabled' +); diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_index.scss new file mode 100644 index 000000000000..5c820c683c82 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'number-input'; +@use 'number-input'; + +@include number-input.number-input; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_number-input.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_number-input.scss new file mode 100644 index 000000000000..c273d8ceb69d --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/number-input/_number-input.scss @@ -0,0 +1,482 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../colors' as *; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/convert' as *; + +/// Number input styles +/// @access public +/// @group number-input +@mixin number-input { + .#{$prefix}--number { + @include reset; + + position: relative; + display: flex; + width: 100%; + flex-direction: column; + } + + .#{$prefix}--number input[type='number'] { + @include type-style('body-short-01'); + @include focus-outline('reset'); + + display: inline-flex; + width: 100%; + min-width: 9.375rem; + height: rem(40px); + box-sizing: border-box; + padding-right: rem(128px); + padding-left: $spacing-05; + border: 0; + border-bottom: rem(1px) solid $border-strong; + + // Firefox: Hide spinner (up and down buttons) + -moz-appearance: textfield; + background-color: $field; + border-radius: 0; + color: $text-primary; + font-family: font-family('mono'); + font-weight: 300; + transition: background-color $duration-fast-01 motion(standard, productive), + outline $duration-fast-01 motion(standard, productive); + + &:focus { + @include focus-outline('outline'); + } + + &:disabled ~ .#{$prefix}--number__controls { + cursor: not-allowed; + pointer-events: none; + } + + &:disabled ~ .#{$prefix}--number__controls svg { + fill: $icon-disabled; + } + + // IE: Hide "clear-field" `x` button on input field + &::-ms-clear { + display: none; + } + + // Safari: Hide number spinner + &::-webkit-inner-spin-button { + appearance: none; + } + } + + // TODO V11: Remove xl selector + .#{$prefix}--number--xl.#{$prefix}--number input[type='number'], + .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] { + padding-right: rem(144px); + } + + .#{$prefix}--number--sm.#{$prefix}--number input[type='number'] { + padding-right: rem(112px); + } + + .#{$prefix}--number input[type='number']:disabled, + .#{$prefix}--number--readonly input[type='number'] { + border-bottom-color: transparent; + background-color: $field; + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--number__input-wrapper { + position: relative; + display: flex; + align-items: center; + } + + .#{$prefix}--number__controls { + @include reset; + + position: absolute; + // vertically center controls within parent container on IE11 + top: 50%; + right: 0; + display: flex; + width: rem(80px); + height: 100%; + flex-direction: row; + align-items: center; + justify-content: center; + transform: translateY(-50%); + } + + .#{$prefix}--number__control-btn { + @include button-reset.reset; + + position: relative; + display: inline-flex; + height: 100%; + align-items: center; + justify-content: center; + border-bottom: rem(1px) solid $border-strong; + color: $icon-primary; + + &::before, + &::after { + position: absolute; + top: rem(2px); + display: block; + width: rem(2px); + // height: calc(100% - 4px) is calculated differently in Safari + height: rem(36px); + background-color: $field; + content: ''; + } + + &::before { + left: 0; + } + + &::after { + right: 0; + } + + svg { + fill: currentColor; + } + + &:focus { + @include focus-outline; + + color: $icon-primary; + outline-offset: -2px; + outline-width: 2px; + } + + &:hover { + background-color: $field-hover; + color: $icon-primary; + cursor: pointer; + + &::before, + &::after { + background-color: $field-hover; + } + } + + &:focus::before, + &:focus::after, + &:hover:focus::before, + &:hover:focus::after { + background-color: transparent; + } + + &:disabled { + border-bottom-color: transparent; + color: $text-disabled; + cursor: not-allowed; + } + } + + // set orders to facilitate styling for rule dividers + .#{$prefix}--number__control-btn.down-icon { + order: 1; + } + + .#{$prefix}--number__control-btn.up-icon { + order: 2; + } + + // add top and bottom outlines to number controls when input is focused + .#{$prefix}--number + input[type='number']:focus + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn { + border-bottom-width: 0; + + &:hover { + @include focus-outline('outline'); + + border: 0; + } + } + + .#{$prefix}--number + input[type='number'][data-invalid] + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn { + border-bottom-width: 0; + } + + // add invalid outline to number controls only when invalid input is not focused + .#{$prefix}--number + input[type='number'][data-invalid]:not(:focus) + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn:hover { + @include focus-outline('invalid'); + } + + .#{$prefix}--number + input[type='number']:focus + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn.up-icon::after { + background-color: transparent; + } + + .#{$prefix}--number + input[type='number'][data-invalid] + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn.up-icon::after { + background-color: $support-error; + } + + .#{$prefix}--number + input[type='number'][data-invalid]:focus + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn.up-icon::after, + .#{$prefix}--number + input[type='number'][data-invalid] + ~ .#{$prefix}--number__controls + .#{$prefix}--number__control-btn.up-icon:focus::after { + background-color: $focus; + } + + .#{$prefix}--number__rule-divider { + position: absolute; + z-index: z('overlay'); + width: rem(1px); + height: rem(16px); + background-color: $border-subtle; + + &:first-of-type { + order: 0; + } + } + + // rule divider styles + .#{$prefix}--number__controls + .#{$prefix}--number__rule-divider:first-of-type { + left: 0; + background-color: transparent; + } + + .#{$prefix}--number__invalid + + .#{$prefix}--number__controls + .#{$prefix}--number__rule-divider:first-of-type { + background-color: $border-subtle; + } + + // V11: Possibly deprecate + .#{$prefix}--number--light .#{$prefix}--number__rule-divider, + .#{$prefix}--number--light + .#{$prefix}--number__invalid + + .#{$prefix}--number__controls + .#{$prefix}--number__rule-divider:first-of-type { + background-color: $border-subtle-02; + } + + .#{$prefix}--number + input[type='number']:disabled + + .#{$prefix}--number__controls + .#{$prefix}--number__rule-divider:first-of-type { + background-color: transparent; + } + + .#{$prefix}--number + input[type='number']:disabled + + .#{$prefix}--number__controls + .#{$prefix}--number__rule-divider { + background-color: $icon-disabled; + } + + .#{$prefix}--number__control-btn:focus ~ .#{$prefix}--number__rule-divider { + background-color: transparent; + } + + .#{$prefix}--number--readonly .#{$prefix}--number__control-btn { + display: none; + } + + .#{$prefix}--number__invalid { + position: absolute; + right: rem(96px); + fill: $support-error; + } + + // TODO V11: Remove xl selector + .#{$prefix}--number--xl .#{$prefix}--number__invalid, + .#{$prefix}--number--lg .#{$prefix}--number__invalid { + right: rem(112px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__invalid { + right: rem(80px); + } + + .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider { + position: absolute; + right: rem(80px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--number--xl + .#{$prefix}--number__invalid + + .#{$prefix}--number__rule-divider, + .#{$prefix}--number--lg + .#{$prefix}--number__invalid + + .#{$prefix}--number__rule-divider { + right: rem(96px); + } + + .#{$prefix}--number--sm + .#{$prefix}--number__invalid + + .#{$prefix}--number__rule-divider { + right: rem(64px); + } + + .#{$prefix}--number__control-btn.down-icon:hover + ~ .#{$prefix}--number__rule-divider, + .#{$prefix}--number__control-btn.up-icon:hover + + .#{$prefix}--number__rule-divider, + .#{$prefix}--number__control-btn.down-icon:focus + ~ .#{$prefix}--number__rule-divider, + .#{$prefix}--number__control-btn.up-icon:focus + + .#{$prefix}--number__rule-divider { + background-color: transparent; + } + + .#{$prefix}--number__invalid--warning { + fill: $support-warning; + } + + .#{$prefix}--number__invalid--warning path:first-of-type { + fill: $black-100; + opacity: 1; + } + + // V11: Possibly deprecate + .#{$prefix}--number--light input[type='number'] { + background-color: $field-02; + } + + // V11: Possibly deprecate + .#{$prefix}--number--light input[type='number']:disabled, + .#{$prefix}--number--light + .#{$prefix}--number--readonly + input[type='number'] { + background-color: $field-02; + } + + // V11: Possibly deprecate + .#{$prefix}--number--light .#{$prefix}--number__control-btn::before, + .#{$prefix}--number--light .#{$prefix}--number__control-btn::after { + background-color: $field-02; + } + + // V11: Possibly deprecate + .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover, + .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before, + .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after { + background-color: $layer-hover-02; + } + + .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before, + .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after { + background-color: transparent; + } + + // Size Variant styles + // TODO V11: Remove xl selector + .#{$prefix}--number--xl input[type='number'], + .#{$prefix}--number--lg input[type='number'] { + height: rem(48px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--number--xl .#{$prefix}--number__controls, + .#{$prefix}--number--lg .#{$prefix}--number__controls { + width: rem(96px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--number--xl .#{$prefix}--number__control-btn, + .#{$prefix}--number--lg .#{$prefix}--number__control-btn { + width: rem(48px); + + &::before, + &::after { + // height: calc(100% - 4px) is calculated differently in Safari + height: rem(44px); + } + } + + .#{$prefix}--number--sm input[type='number'] { + height: rem(32px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__controls { + width: rem(64px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn { + width: rem(32px); + + &::before, + &::after { + // height: calc(100% - 4px) is calculated differently in Safari + height: rem(28px); + } + } + + //No label positioning adjustment + .#{$prefix}--number--nolabel + .#{$prefix}--label + + .#{$prefix}--form__helper-text { + margin-top: 0; + } + + // No steppers + .#{$prefix}--number--nosteppers input[type='number'] { + padding-right: rem(48px); + } + + .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid { + right: rem(16px); + } + + // Skeleton State + .#{$prefix}--number.#{$prefix}--skeleton { + @include skeleton; + + width: 100%; + height: 2.5rem; + + input[type='number'] { + display: none; + } + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--number__control-btn:hover, + .#{$prefix}--number__control-btn:focus { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--number__control-btn { + @include high-contrast-mode('outline'); + } + + .#{$prefix}--number__control-btn svg { + @include high-contrast-mode('icon-fill'); + } + /* stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_index.scss new file mode 100644 index 000000000000..e0f7649d0b58 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'overflow-menu'; +@use 'overflow-menu'; + +@include overflow-menu.overflow-menu; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_overflow-menu.scss new file mode 100644 index 000000000000..9cdfd80a3973 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/overflow-menu/_overflow-menu.scss @@ -0,0 +1,352 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../button/tokens' as button; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/z-index' as *; + +/// Overflow menu styles +/// @access public +/// @group overflow-menu +@mixin overflow-menu { + .#{$prefix}--overflow-menu, + .#{$prefix}--overflow-menu__trigger { + @include button-reset.reset; + @include reset; + @include focus-outline('reset'); + + position: relative; + display: flex; + width: rem(40px); + height: rem(40px); + align-items: center; + justify-content: center; + cursor: pointer; + transition: outline $duration-fast-02 motion(entrance, productive), + background-color $duration-fast-02 motion(entrance, productive); + + &:focus { + @include focus-outline('outline'); + } + + &:hover { + background-color: $background-hover; + } + } + + .#{$prefix}--overflow-menu--sm { + width: rem(32px); + height: rem(32px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--overflow-menu--xl, + .#{$prefix}--overflow-menu--lg { + width: rem(48px); + height: rem(48px); + } + + // Overwrite Icon Tooltip focus styles + .#{$prefix}--overflow-menu__trigger.#{$prefix}--tooltip--a11y.#{$prefix}--tooltip__trigger:focus { + @include focus-outline('outline'); + + svg { + outline: none; + } + } + + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open, + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open + .#{$prefix}--overflow-menu__trigger { + @include box-shadow; + + background-color: $layer; + transition: none; + } + + .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open, + .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open + .#{$prefix}--overflow-menu__trigger { + background-color: $field-02; + } + + .#{$prefix}--overflow-menu__icon { + width: rem(16px); + height: rem(16px); + fill: $icon-primary; + } + + .#{$prefix}--overflow-menu-options { + @include reset; + @include box-shadow; + + position: absolute; + z-index: z('floating'); + top: 32px; + left: 0; + display: none; + width: rem(160px); + flex-direction: column; + align-items: flex-start; + background-color: $layer; + list-style: none; + + &::after { + position: absolute; + display: block; + background-color: $layer; + content: ''; + transition: background-color $duration-fast-02 + motion(entrance, productive); + } + } + + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover { + background-color: $layer; + } + + .#{$prefix}--overflow-menu-options--light { + background-color: $field-02; + &::after { + background-color: $field-02; + } + } + + .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover { + background-color: $field-02; + } + + .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after { + top: rem(-3px); + left: 0; + width: rem(40px); + height: rem(3px); + } + + .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after { + bottom: rem(-8px); + left: 0; + width: rem(40px); + height: rem(8px); + } + + .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after { + top: 0; + right: rem(-6px); + width: rem(6px); + height: rem(40px); + } + + .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { + top: 0; + left: rem(-6px); + width: rem(6px); + height: rem(40px); + } + + .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options { + &[data-floating-menu-direction='bottom']::after, + &[data-floating-menu-direction='top']::after { + width: rem(32px); + } + &[data-floating-menu-direction='left']::after, + &[data-floating-menu-direction='right']::after { + height: rem(32px); + } + } + + // TODO V11: Remove xl selector + .#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options, + .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options { + &[data-floating-menu-direction='bottom']::after, + &[data-floating-menu-direction='top']::after { + width: rem(48px); + } + &[data-floating-menu-direction='left']::after, + &[data-floating-menu-direction='right']::after { + height: rem(48px); + } + } + + .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after, + .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after { + right: 0; + left: auto; + } + + .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after, + .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { + top: auto; + bottom: 0; + } + + .#{$prefix}--overflow-menu-options--open { + display: flex; + } + + .#{$prefix}--overflow-menu-options__content { + width: 100%; + } + + .#{$prefix}--overflow-menu-options__option { + @include reset; + + display: flex; + width: 100%; + height: rem(40px); + align-items: center; + padding: 0; + background-color: transparent; + transition: background-color $duration-fast-02 motion(entrance, productive); + } + + .#{$prefix}--overflow-menu-options--sm + .#{$prefix}--overflow-menu-options__option { + height: rem(32px); + } + + // TODO V11: Remove xl selector + .#{$prefix}--overflow-menu-options--xl + .#{$prefix}--overflow-menu-options__option, + .#{$prefix}--overflow-menu-options--lg + .#{$prefix}--overflow-menu-options__option { + height: rem(48px); + } + + .#{$prefix}--overflow-menu--divider { + border-top: 1px solid $border-subtle; + } + + .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider { + border-top: 1px solid $border-subtle-02; + } + + a.#{$prefix}--overflow-menu-options__btn::before { + display: inline-block; + height: 100%; + content: ''; + vertical-align: middle; + } + + .#{$prefix}--overflow-menu-options__btn { + @include type-style('body-short-01'); + @include focus-outline('reset'); + + display: inline-flex; + width: 100%; + max-width: 11.25rem; + height: 100%; + align-items: center; + padding: 0 $spacing-05; + border: none; + background-color: transparent; + color: $text-secondary; + cursor: pointer; + font-family: inherit; + font-weight: 400; + text-align: left; + transition: outline $duration-fast-02 motion(entrance, productive), + background-color $duration-fast-02 motion(entrance, productive), + color $duration-fast-02 motion(entrance, productive); + + &:hover { + color: $text-primary; + } + + &:focus { + @include focus-outline('outline'); + } + + &::-moz-focus-inner { + border: none; + } + } + + .#{$prefix}--overflow-menu-options__btn svg { + fill: $icon-secondary; + } + + .#{$prefix}--overflow-menu-options__btn:hover svg { + fill: $icon-primary; + } + + .#{$prefix}--overflow-menu-options__option-content { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .#{$prefix}--overflow-menu-options__option:hover { + background-color: $layer-hover; + } + + .#{$prefix}--overflow-menu-options__option--danger + .#{$prefix}--overflow-menu-options__btn:hover, + .#{$prefix}--overflow-menu-options__option--danger + .#{$prefix}--overflow-menu-options__btn:focus { + background-color: button.$button-danger-primary; + color: $text-on-color; + + svg { + fill: currentColor; + } + } + + .#{$prefix}--overflow-menu-options__option--disabled:hover { + background-color: $layer; + cursor: not-allowed; + } + + .#{$prefix}--overflow-menu-options__option--disabled + .#{$prefix}--overflow-menu-options__btn { + color: $text-disabled; + pointer-events: none; + + &:hover, + &:active, + &:focus { + @include focus-outline('reset'); + + background-color: $layer; + } + } + + .#{$prefix}--overflow-menu-options__option--disabled + .#{$prefix}--overflow-menu-options__btn + svg { + fill: $icon-disabled; + } + + .#{$prefix}--overflow-menu--flip { + left: -140px; + + &::before { + left: 145px; + } + } + + // Windows HCM fix + /* stylelint-disable */ + .#{$prefix}--overflow-menu:focus, + .#{$prefix}--overflow-menu-options__btn:focus { + @include high-contrast-mode('focus'); + } + + .#{$prefix}--overflow-menu svg { + @include high-contrast-mode('icon-fill'); + } + /*stylelint-enable */ +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_index.scss new file mode 100644 index 000000000000..58e81ba55fed --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'pagination-nav'; +@use 'pagination-nav'; + +@include pagination-nav.pagination-nav; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_mixins.scss new file mode 100644 index 000000000000..6aee8c0bcbf4 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_mixins.scss @@ -0,0 +1,38 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../motion' as *; + +/// Pseudo underline +/// @access public +/// @group pagination-nav +@mixin pseudo-underline() { + &:not(.#{$prefix}--pagination-nav__page--direction) { + &::after { + position: absolute; + bottom: 0; + left: 50%; + display: block; + width: 0; + height: $spacing-02; + background-color: $background-brand; + content: ''; + opacity: 0; + transition: width $duration-fast-02 motion(standard, productive); + } + } + + .#{$prefix}--pagination-nav__page--active + &::after, + &.#{$prefix}--pagination-nav__page--active::after { + left: calc(50% - #{$spacing-05 * 0.5}); + width: $spacing-05; + opacity: 1; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_pagination-nav.scss new file mode 100644 index 000000000000..25848a169c2e --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination-nav/_pagination-nav.scss @@ -0,0 +1,171 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../type' as *; +@use '../../theme' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/visually-hidden' as *; +@use 'mixins' as *; + +/// Pagination nav base styles +/// @access public +/// @group pagination-nav +/// @param {Color} $text-color [$text-02] +/// @param {Color} $text-color-active [$text-02] +/// @param {Color} $background-color-hover [$hover-ui] +/// @param {Color} $background-color-active [initial] +/// @param {Number} $font-weight [400] +/// @param {Number} $item-padding [0] +/// @param {Number} $button-min-width [$spacing-09] +/// @param {Value} $button-padding [1.0625rem $spacing-02] +/// @param {Number} $button-direction-size [$spacing-09] +/// @param {Number} $select-icon-top-position [$spacing-05] +/// @param {Number} $select-icon-left-position [$spacing-05] +@mixin pagination-nav( + $color: $text-secondary, + $text-color-active: $text-secondary, + $background-color-hover: $background-hover, + $background-color-active: initial, + $font-weight: 400, + $item-padding: 0, + $button-min-width: $spacing-09, + $button-padding: 1.0625rem $spacing-02, + $button-direction-size: $spacing-09, + $select-icon-top-position: $spacing-05, + $select-icon-left-position: $spacing-05 +) { + .#{$prefix}--pagination-nav { + @include reset; + @include type-style('body-short-01'); + + line-height: 0; + } + + .#{$prefix}--pagination-nav__list { + display: flex; + align-items: center; + list-style: none; + } + + .#{$prefix}--pagination-nav__list-item { + padding: $item-padding; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + + .#{$prefix}--pagination-nav__page { + @include type-style('body-short-01'); + @include button-reset.reset($width: false); + + position: relative; + display: block; + min-width: $button-min-width; + padding: $button-padding; + border-radius: 0; + color: $text-secondary; + font-weight: $font-weight; + line-height: 1; + outline: 0; + text-align: center; + text-decoration: none; + transition: background-color $duration-fast-02 motion(standard, productive), + color $duration-fast-02 motion(standard, productive); + user-select: none; + + &:hover { + background-color: $background-color-hover; + color: $text-secondary; + } + + &:focus { + @include focus-outline('outline'); + } + + &:disabled, + &.#{$prefix}--pagination-nav__page--disabled { + background: none; + color: rgba($text-secondary, 0.5); + outline: none; + pointer-events: none; + } + + @include pseudo-underline(); + + &.#{$prefix}--pagination-nav__page--active { + background-color: $background-color-active; + color: $text-color-active; + font-weight: 600; + } + + .#{$prefix}--pagination-nav__icon { + fill: currentColor; + pointer-events: none; + } + } + + .#{$prefix}--pagination-nav__page--direction { + display: flex; + width: $button-direction-size; + height: $button-direction-size; + align-items: center; + justify-content: center; + line-height: 0; + } + + .#{$prefix}--pagination-nav__select { + position: relative; + } + + .#{$prefix}--pagination-nav__page--select { + max-height: $button-min-width; + appearance: none; + text-indent: calc(50% - 4.5px); + // Override some Firefox user-agent styles + @-moz-document url-prefix() { + text-indent: 0; + } + } + + .#{$prefix}--pagination-nav__select-icon-wrapper { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + + @include pseudo-underline(); + + .#{$prefix}--pagination-nav__page--active + & { + .#{$prefix}--pagination-nav__select-icon { + display: none; + } + } + } + + .#{$prefix}--pagination-nav__select-icon { + position: absolute; + top: calc(50% - #{$select-icon-top-position * 0.5}); + left: calc(50% - #{$select-icon-top-position * 0.5}); + pointer-events: none; + } + + .#{$prefix}--pagination-nav__accessibility-label { + @include visually-hidden; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_index.scss new file mode 100644 index 000000000000..41247596149c --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'pagination'; +@use 'pagination'; + +@include pagination.pagination; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_pagination.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_pagination.scss new file mode 100644 index 000000000000..824f09fca470 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/pagination/_pagination.scss @@ -0,0 +1,261 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../motion' as *; +@use '../../type' as *; +@use '../../breakpoint' as *; +@use '../../theme' as *; +@use '../../utilities/component-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; + +/// Pagination styles +/// @access public +/// @group pagination +@mixin pagination { + .#{$prefix}--data-table-container + .#{$prefix}--pagination { + border-top: 0; + } + + .#{$prefix}--pagination { + @include component-reset.reset; + @include type-style('body-compact-01'); + + display: flex; + width: calc(100% - 1px); + min-height: rem(40px); + align-items: center; + justify-content: space-between; + border-top: 1px solid $border-subtle; + background-color: $layer; + overflow-x: auto; + + @include breakpoint('md') { + overflow: initial; + + .#{$prefix}--pagination__control-buttons { + display: flex; + } + } + + // mobile friendly pagination + @include breakpoint-down('md') { + .#{$prefix}--pagination__left > *, + .#{$prefix}--pagination__right > * { + display: none; + } + + .#{$prefix}--pagination__items-count { + display: initial; + } + + .#{$prefix}--pagination__control-buttons { + display: flex; + } + } + } + + .#{$prefix}--pagination--sm { + min-height: rem(32px); + } + + .#{$prefix}--pagination--lg { + min-height: rem(48px); + } + + .#{$prefix}--pagination .#{$prefix}--select { + height: 100%; + align-items: center; + } + + .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper { + display: flex; + height: 100%; + } + + .#{$prefix}--pagination .#{$prefix}--select-input { + @include type-style('body-compact-01'); + + width: auto; + min-width: auto; + height: 100%; + line-height: rem(40px); + } + + // Extra specificity is needed to preserve padding + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input { + padding: 0 2.25rem 0 $spacing-05; + } + + .#{$prefix}--pagination--sm .#{$prefix}--select-input { + line-height: rem(32px); + } + + .#{$prefix}--pagination--lg .#{$prefix}--select-input { + line-height: rem(48px); + } + + .#{$prefix}--pagination .#{$prefix}--select-input:hover { + background: $layer-hover; + } + + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus, + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus + option, + .#{$prefix}--pagination + .#{$prefix}--select--inline + .#{$prefix}--select-input:focus + optgroup { + background-color: $layer; + } + + .#{$prefix}--pagination .#{$prefix}--select__arrow { + top: 50%; + transform: translate(-0.5rem, -50%); + } + + .#{$prefix}--pagination + .#{$prefix}--select__item-count + .#{$prefix}--select-input { + border-right: 1px solid $border-subtle; + } + + .#{$prefix}--pagination + .#{$prefix}--select__page-number + .#{$prefix}--select-input { + border-left: 1px solid $border-subtle; + } + + .#{$prefix}--pagination__left, + .#{$prefix}--pagination__right { + display: flex; + height: 100%; + align-items: center; + } + + .#{$prefix}--pagination__left > .#{$prefix}--form-item, + .#{$prefix}--pagination__right > .#{$prefix}--form-item { + height: 100%; + } + + .#{$prefix}--pagination__left .#{$prefix}--pagination__text, + .#{$prefix}--pagination__right .#{$prefix}--pagination__text { + white-space: nowrap; + } + + .#{$prefix}--pagination__left .#{$prefix}--pagination__text { + margin-right: rem(1px); + } + + .#{$prefix}--pagination__right .#{$prefix}--pagination__text { + margin-right: 1rem; + margin-left: rem(1px); + } + + .#{$prefix}--pagination__left { + padding: 0 $spacing-05 0 0; + + @include breakpoint('md') { + padding: 0 $spacing-05; + } + } + + .#{$prefix}--pagination__text { + @include breakpoint('md') { + display: inline-block; + } + } + + span.#{$prefix}--pagination__text { + margin-left: $spacing-05; + color: $text-secondary; + } + + .#{$prefix}--pagination__button, + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { + @include component-reset.reset; + + display: flex; + width: rem(40px); + height: rem(40px); + min-height: rem(32px); + align-items: center; + justify-content: center; + border: none; + border-left: 1px solid $border-subtle; + margin: 0; + background: none; + cursor: pointer; + fill: $icon-primary; + transition: outline $duration-fast-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--pagination--sm .#{$prefix}--pagination__button, + .#{$prefix}--pagination--sm + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { + width: rem(32px); + height: rem(32px); + } + + .#{$prefix}--pagination--lg .#{$prefix}--pagination__button, + .#{$prefix}--pagination--lg + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { + width: rem(48px); + height: rem(48px); + } + + .#{$prefix}--pagination__button:focus, + .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button { + @include focus-outline('outline'); + + border-left: 0; + } + + .#{$prefix}--pagination__button:hover, + .#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button { + background: $layer-hover; + } + + .#{$prefix}--pagination__button--no-index, + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button--no-index { + cursor: not-allowed; + fill: $icon-disabled; + } + + .#{$prefix}--pagination__button:disabled:hover, + .#{$prefix}--pagination__button--no-index:hover, + .#{$prefix}--btn--ghost:disabled:hover.#{$prefix}--pagination__button, + .#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button--no-index { + border-color: $border-subtle; + background: $layer; + cursor: not-allowed; + fill: $icon-disabled; + } + + // Skeleton state + .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text { + margin-right: 1rem; + margin-bottom: 0; + } + + // Windows HCM fix + // stylelint-disable-next-line no-duplicate-selectors + .#{$prefix}--pagination__button, + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { + @include high-contrast-mode('outline'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_index.scss new file mode 100644 index 000000000000..4c6a81393a3f --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'popover'; +@use 'popover'; + +@include popover.popover; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_popover.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_popover.scss new file mode 100644 index 000000000000..a58ae13979a3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/popover/_popover.scss @@ -0,0 +1,365 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../theme'; +@use '../../utilities/box-shadow' as *; +@use '../../utilities/custom-property'; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/' as *; +@use '../../utilities/convert' as *; + +/// The Popover component is used for triggering a pop-up next to a trigger +/// element, typically a button, in a given direction. It is made up of several +/// parts and includes a handful of modifiers to change the appearance. +/// +/// The parts of a popover include: +/// The popover container `.cds-popover-container` +/// This container contains the trigger and the popover and is used to +/// coordinate positioning relative to the trigger button +/// +/// The popover +/// This is an intermediate container that is used for the +/// `filter: drop-shadow()` effect on the popover content and the caret. It is +/// an absolutely positioned container that matches the dimensions of the +/// container so that popover content and caret can be positioned absolutely. +/// +/// Popover content +/// This is the containing element for user-provided content and sets the +/// background and text color for the area. +/// +/// Popover caret +/// This caret is an optional modifier that displays a character centered with +/// respect to the trigger element + +// The background color for the popover container +$popover-background-color: custom-property.get-var( + 'popover-background-color', + theme.$layer +); + +// The drop shadow value used for the popover container +$popover-drop-shadow: custom-property.get-var('popover-drop-shadow', 'none'); + +// The border radius value for the popover container +$popover-border-radius: custom-property.get-var('popover-border-radius', 2px); + +// The text color used for text placed inside of the popover +$popover-text-color: custom-property.get-var( + 'popover-text-color', + theme.$text-primary +); + +// The distance between the popover container and the triggering element +// Specify the distance between the popover and the trigger. This value must +// have a unit otherwise the `calc()` expression will not work +// stylelint-disable-next-line length-zero-no-unit +$popover-offset: custom-property.get-var('popover-offset', 0rem); + +// Customize the dimensions of the caret by specifying its width or height. +// These values will be flipped in left or right directions to have the +// correct dimensions +$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px)); +$popover-caret-height: custom-property.get-var( + 'popover-caret-height', + rem(6px) +); + +@mixin popover { + // Container + .#{$prefix}--popover-container { + position: relative; + display: inline-block; + } + + /// Modifiers + + // Light modifier + .#{$prefix}--popover--light .#{$prefix}--popover-content { + @include custom-property.declaration( + 'popover-background-color', + theme.$layer-02 + ); + } + + // High contrast modifier + .#{$prefix}--popover--high-contrast .#{$prefix}--popover { + @include custom-property.declaration( + 'popover-background-color', + theme.$background-inverse + ); + @include custom-property.declaration( + 'popover-text-color', + theme.$text-inverse + ); + } + + // Drop shadow modifier + .#{$prefix}--popover--drop-shadow .#{$prefix}--popover { + @include custom-property.declaration( + 'popover-drop-shadow', + drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) + ); + } + + // Caret tip modifier + .#{$prefix}--popover--caret { + @include custom-property.declaration('popover-offset', rem(10px)); + } + + // Popover, this element contains both the caret and the popover content + .#{$prefix}--popover { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + filter: $popover-drop-shadow; + pointer-events: none; + } + + // Popover content + .#{$prefix}--popover-content { + position: absolute; + z-index: z('floating'); + display: none; + width: max-content; + max-width: rem(368px); + background-color: $popover-background-color; + border-radius: $popover-border-radius; + color: $popover-text-color; + pointer-events: auto; + } + + .#{$prefix}--popover--open .#{$prefix}--popover-content { + display: block; + } + + // We use a pseudo element inside of the popover to create a space between the + // target and the popover. This helps in situations like toolcarets where you do + // not want the toolcaret to disappear when the user moves from the target to + // the popover. + .#{$prefix}--popover-content::before { + position: absolute; + display: none; + content: ''; + } + + .#{$prefix}--popover--open .#{$prefix}--popover-content::before { + display: block; + } + + // Popover caret + .#{$prefix}--popover-caret { + position: absolute; + z-index: z('floating'); + display: none; + background-color: $popover-background-color; + // We use `will-change: transform` to prevent antialiasing when our caret + // has subpixel rendering. When this happens, a single pixel line appears + // between the caret and popover-content that we would like to avoid + will-change: transform; + } + + .#{$prefix}--popover--open.#{$prefix}--popover--caret + .#{$prefix}--popover-caret { + display: block; + } + + //----------------------------------------------------------------------------- + // Bottom + //----------------------------------------------------------------------------- + + // Popover content placement + .#{$prefix}--popover--bottom .#{$prefix}--popover-content { + bottom: 0; + left: 50%; + transform: translate(-50%, calc(100% + $popover-offset)); + } + + .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content { + bottom: 0; + left: 0; + transform: translate(0, calc(100% + $popover-offset)); + } + + .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content { + right: 0; + bottom: 0; + transform: translate(0, calc(100% + $popover-offset)); + } + + // Popover hover area placement + .#{$prefix}--popover--bottom .#{$prefix}--popover-content::before, + .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before, + .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before { + top: 0; + right: 0; + left: 0; + height: $popover-offset; + transform: translateY(-100%); + } + + // Caret placement + .#{$prefix}--popover--bottom .#{$prefix}--popover-caret, + .#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret, + .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret { + bottom: 0; + left: 50%; + width: $popover-caret-width; + height: $popover-caret-height; + clip-path: polygon(0% 100%, 50% 0%, 100% 100%); + transform: translate(-50%, $popover-offset); + } + + //----------------------------------------------------------------------------- + // Top + //----------------------------------------------------------------------------- + + // Popover content placement + .#{$prefix}--popover--top .#{$prefix}--popover-content { + top: 0; + left: 50%; + transform: translate(-50%, calc(-100% - $popover-offset)); + } + + .#{$prefix}--popover--top-left .#{$prefix}--popover-content { + top: 0; + left: 0; + transform: translate(0, calc(-100% - $popover-offset)); + } + + .#{$prefix}--popover--top-right .#{$prefix}--popover-content { + top: 0; + right: 0; + transform: translate(0, calc(-100% - $popover-offset)); + } + + // Popover hover area placement + .#{$prefix}--popover--top .#{$prefix}--popover-content::before, + .#{$prefix}--popover--top-left .#{$prefix}--popover-content::before, + .#{$prefix}--popover--top-right .#{$prefix}--popover-content::before { + right: 0; + bottom: 0; + left: 0; + height: $popover-offset; + transform: translateY(100%); + } + + // Caret placement + .#{$prefix}--popover--top .#{$prefix}--popover-caret, + .#{$prefix}--popover--top-left .#{$prefix}--popover-caret, + .#{$prefix}--popover--top-right .#{$prefix}--popover-caret { + top: 0; + left: 50%; + width: $popover-caret-width; + height: $popover-caret-height; + clip-path: polygon(0% 0%, 50% 100%, 100% 0%); + transform: translate(-50%, calc(-1 * $popover-offset)); + } + + //----------------------------------------------------------------------------- + // Right + //----------------------------------------------------------------------------- + + // Popover content placement + .#{$prefix}--popover--right .#{$prefix}--popover-content { + top: 50%; + left: 100%; + // Add in 0.1px to prevent rounding errors where the content is + // moved farther than the caret + transform: translate($popover-offset, -50%); + } + + .#{$prefix}--popover--right-top .#{$prefix}--popover-content { + top: 0; + left: 100%; + transform: translate($popover-offset, 0); + } + + .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content { + bottom: 0; + left: 100%; + transform: translate($popover-offset, 0); + } + + // Popover hover area placement + .#{$prefix}--popover--right .#{$prefix}--popover-content::before, + .#{$prefix}--popover--right-top .#{$prefix}--popover-content::before, + .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before { + top: 0; + bottom: 0; + left: 0; + width: $popover-offset; + transform: translateX(-100%); + } + + // Caret placement + .#{$prefix}--popover--right .#{$prefix}--popover-caret, + .#{$prefix}--popover--right-top .#{$prefix}--popover-caret, + .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret { + top: 50%; + left: 100%; + width: $popover-caret-height; + height: $popover-caret-width; + clip-path: polygon(0% 50%, 100% 0%, 100% 100%); + transform: translate(calc($popover-offset - 100%), -50%); + } + + //----------------------------------------------------------------------------- + // Left + //----------------------------------------------------------------------------- + + // Popover content placement + .#{$prefix}--popover--left .#{$prefix}--popover-content { + top: 50%; + right: 100%; + // Add in 0.1px to prevent rounding errors where the content is + // moved farther than the caret + transform: translate(calc(-1 * $popover-offset + 0.1px), -50%); + } + + .#{$prefix}--popover--left-top .#{$prefix}--popover-content { + top: 0; + right: 100%; + // Add in 0.1px to prevent rounding errors where the content is + // moved farther than the caret + transform: translate(calc(-1 * $popover-offset + 0.1px), 0); + } + + .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content { + right: 100%; + bottom: 0; + // Add in 0.1px to prevent rounding errors where the content is + // moved farther than the caret + transform: translate(calc(-1 * $popover-offset + 0.1px), 0); + } + + // Popover hover area placement + .#{$prefix}--popover--left .#{$prefix}--popover-content::before, + .#{$prefix}--popover--left-top .#{$prefix}--popover-content::before, + .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before { + top: 0; + right: 0; + bottom: 0; + width: $popover-offset; + transform: translateX(100%); + } + + // Caret placement + .#{$prefix}--popover--left .#{$prefix}--popover-caret, + .#{$prefix}--popover--left-top .#{$prefix}--popover-caret, + .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret { + top: 50%; + right: 100%; + width: $popover-caret-height; + height: $popover-caret-width; + clip-path: polygon(0% 0%, 100% 50%, 0% 100%); + transform: translate(calc(-1 * $popover-offset + 100%), -50%); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_index.scss new file mode 100644 index 000000000000..e3521031b965 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'progress-bar'; +@use 'progress-bar'; + +@include progress-bar.progress-bar; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_progress-bar.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_progress-bar.scss new file mode 100644 index 000000000000..2e11cdbd5e28 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-bar/_progress-bar.scss @@ -0,0 +1,82 @@ +// +// Copyright IBM Corp. 2021 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; + +/// Progress Bar styles +/// @access public +/// @group progress-bar +@mixin progress-bar { + .#{$prefix}--progress-bar__label { + @include type-style('body-short-01'); + + display: block; + margin-bottom: $spacing-03; + color: $text-primary; + } + + .#{$prefix}--progress-bar__track { + position: relative; + width: 100%; + height: rem(8px); + background-color: $layer; + } + + .#{$prefix}--progress-bar__bar { + display: block; + width: 100%; + height: 100%; + background-color: $interactive; + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--progress-bar--indeterminate + .#{$prefix}--progress-bar__track::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + animation-duration: 1400ms; + animation-iteration-count: infinite; + animation-name: progress-bar-indeterminate; + animation-timing-function: linear; + background-image: linear-gradient( + 90deg, + $interactive 12.5%, + transparent 12.5% + ); + background-position-x: 0%; + background-size: 200% 100%; + content: ''; + } + + .#{$prefix}--progress-bar__helper-text { + @include type-style('helper-text-01'); + + margin-top: $spacing-02; + color: $text-secondary; + } + + @keyframes progress-bar-indeterminate { + 0% { + background-position-x: 25%; + } + + 80%, + 100% { + background-position-x: -105%; + } + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_index.scss new file mode 100644 index 000000000000..79ba3984ffc3 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'progress-indicator'; +@use 'progress-indicator'; + +@include progress-indicator.progress-indicator; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_progress-indicator.scss new file mode 100644 index 000000000000..4923b8e452af --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -0,0 +1,334 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../button'; +@use '../tooltip'; +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/button-reset'; +@use '../../utilities/component-reset'; +@use '../../utilities/tooltip' as *; + +/// @type Value +/// @access public +/// @group progress-indicator +$progress-indicator-bar-width: 1px inset transparent !default; + +/// Progress indicator styles +/// @access public +/// @group progress-indicator +@mixin progress-indicator { + .#{$prefix}--progress { + @include component-reset.reset; + + display: flex; + list-style: none; + } + + .#{$prefix}--progress-step { + position: relative; + display: inline-flex; + overflow: visible; + width: rem(128px); + min-width: 7rem; + flex-direction: row; + + .#{$prefix}--tooltip__label { + display: block; + } + } + + .#{$prefix}--progress--space-equal .#{$prefix}--progress-step { + min-width: 8rem; + flex-grow: 1; + } + + .#{$prefix}--progress-line { + position: absolute; + left: 0; + width: rem(128px); + height: 1px; + border: $progress-indicator-bar-width; + } + + .#{$prefix}--progress--space-equal .#{$prefix}--progress-line { + width: 100%; + min-width: rem(128px); + } + + .#{$prefix}--progress-step svg { + position: relative; + z-index: 1; + width: $spacing-05; + height: $spacing-05; + flex-shrink: 0; + margin: rem(10px) $spacing-03 0 0; + border-radius: 50%; + fill: $interactive; + } + + .#{$prefix}--progress-label { + @include type-style('body-short-01'); + + overflow: hidden; + max-width: rem(88px); + margin: $spacing-03 0 0 0; + color: $text-primary; + line-height: 1.45; + text-overflow: ellipsis; + transition: box-shadow $duration-fast-02 motion(standard, productive), + color $duration-fast-02 motion(standard, productive); + white-space: nowrap; + + &::before { + display: block; + content: ''; + } + } + + .#{$prefix}--progress-label:hover { + box-shadow: 0 rem(1px) $link-primary; + color: $link-primary; + cursor: pointer; + } + + .#{$prefix}--progress-label:focus { + box-shadow: 0 rem(3px) 0 0 $link-primary; + color: $link-primary; + outline: none; + } + + .#{$prefix}--progress--space-equal .#{$prefix}--progress-label { + max-width: 100%; + margin-right: 0.75rem; + } + + .#{$prefix}--progress-label:active { + //is this still a color token?? + box-shadow: 0 rem(3px) 0 0 $background-brand; + color: $background-brand; + } + + //OVERFLOW STYLING + .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip, + .#{$prefix}--progress-label-overflow:focus ~ .#{$prefix}--tooltip { + visibility: inherit; + } + + .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret { + margin-left: rem(10px); + } + + .#{$prefix}--tooltip__text { + padding: 0; + margin: 0; + font-weight: normal; + } + + //single line tooltip + .#{$prefix}--progress-step .#{$prefix}--tooltip { + @include type-style('body-long-01'); + + display: block; + width: rem(125px); + + min-width: rem(115px); + min-height: $spacing-06; + padding: $spacing-03 $spacing-05; + margin-top: rem(40px); + margin-left: rem(22px); + color: $text-inverse; + visibility: hidden; + } + + //multiline tooltip + .#{$prefix}--progress-step .#{$prefix}--tooltip_multi { + @include type-style('body-long-01'); + + width: rem(150px); + height: auto; + color: $text-inverse; + } + + //OPTIONAL HELPER TEXT STYLING + .#{$prefix}--progress-optional { + @include type-style('label-01'); + + position: absolute; + left: 0; + margin-top: rem(28px); + margin-left: $spacing-06; + color: $text-secondary; + text-align: start; + } + + //CURRENT STYLING + .#{$prefix}--progress-step--current { + .#{$prefix}--progress-line { + background-color: $interactive; + } + } + + //INCOMPLETE STYLING + .#{$prefix}--progress-step--incomplete { + svg { + fill: $icon-primary; + } + + .#{$prefix}--progress-line { + background-color: $border-subtle; + } + } + + //COMPLETED STYLING + .#{$prefix}--progress-step--complete { + .#{$prefix}--progress-line { + background-color: $interactive; + } + } + + //interactive button + .#{$prefix}--progress-step-button { + @include button-reset.reset; + + display: flex; + text-align: left; + } + + //unclickable button + .#{$prefix}--progress-step-button--unclickable { + cursor: default; + outline: none; + } + + .#{$prefix}--progress-step-button--unclickable + .#{$prefix}--progress-label:hover { + box-shadow: none; + color: $text-primary; + cursor: default; + } + + .#{$prefix}--progress-step-button--unclickable + .#{$prefix}--tooltip__label:hover { + box-shadow: 0 rem(1px) $link-primary; + color: $link-primary; + cursor: pointer; + } + + .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable) + .#{$prefix}--progress-label:active { + box-shadow: 0 rem(3px) 0 0 $interactive; + color: $interactive; + } + + //DISABLED STYLING + .#{$prefix}--progress-step--disabled { + cursor: not-allowed; + pointer-events: none; + + svg { + cursor: not-allowed; + fill: $icon-disabled; + } + + .#{$prefix}--progress-label, + .#{$prefix}--progress-label:hover { + box-shadow: none; + color: $text-disabled; + cursor: not-allowed; + } + + .#{$prefix}--progress-label:focus, + .#{$prefix}--progress-label:active { + box-shadow: none; + outline: none; + } + + .#{$prefix}--progress-line { + cursor: not-allowed; + } + + .#{$prefix}--progress-label-overflow:hover + ~ .#{$prefix}--tooltip--definition + .#{$prefix}--tooltip--definition__bottom { + display: none; + } + } + + // ERROR STYLING + .#{$prefix}--progress__warning > * { + fill: $support-error; + } + + // Skeleton State + .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label { + @include skeleton; + + width: rem(40px); + height: rem(14px); + margin-top: 0.625rem; + } + + // Vertical Variant + + .#{$prefix}--progress--vertical { + display: flex; + flex-direction: column; + } + + .#{$prefix}--progress--vertical .#{$prefix}--progress-step, + .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button { + width: initial; + min-width: initial; + min-height: 3.625rem; + flex-wrap: wrap; + align-content: flex-start; + } + + .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg, + .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg { + display: inline-block; + // 1px top margin based on visual review + margin: rem(1px) $spacing-03 0; + } + + .#{$prefix}--progress--vertical .#{$prefix}--progress-label { + display: inline-block; + width: initial; + max-width: rem(160px); + margin: 0; + vertical-align: top; + white-space: initial; + } + + .#{$prefix}--progress--vertical + .#{$prefix}--progress-step + .#{$prefix}--tooltip { + margin-top: 0.5rem; + } + + .#{$prefix}--progress--vertical .#{$prefix}--progress-optional { + position: static; + width: 100%; + margin-top: auto; + margin-left: $spacing-07; + } + + .#{$prefix}--progress--vertical .#{$prefix}--progress-line { + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 100%; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_index.scss new file mode 100644 index 000000000000..c04805ddc715 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_index.scss @@ -0,0 +1,4 @@ +@forward 'radio-button'; +@use 'radio-button'; + +@include radio-button.radio-button; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_radio-button.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_radio-button.scss new file mode 100644 index 000000000000..b57c663f7346 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/radio-button/_radio-button.scss @@ -0,0 +1,200 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +//----------------------------- +// Radio +//----------------------------- + +@use '../../theme' as *; +@use '../../type'; +@use '../form'; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/component-reset' as *; +@use '../../utilities/visually-hidden' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/convert' as *; +@use '../../config' as *; +@use '../../spacing' as *; + +@use '../button/tokens' as *; + +/// @type Number +/// @access public +/// @group radio-button +$radio-border-width: 1px !default; + +/// Radio button styles +/// @access private +/// @group radio-button +@mixin radio-button { + .#{$prefix}--radio-button-group { + @include reset; + + display: flex; + align-items: center; + } + + // Remove spacing above collection of radio buttons if label is present + .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group { + margin-top: 0; + } + + // vertical radio button + .#{$prefix}--radio-button-group--vertical { + flex-direction: column; + align-items: flex-start; + + &.#{$prefix}--radio-button-group--label-left { + align-items: flex-end; + } + + .#{$prefix}--radio-button__label { + margin-right: 0; + line-height: carbon-mini-units(2.5); + } + + .#{$prefix}--radio-button__label:not(:last-of-type) { + margin-bottom: $spacing-03; + } + } + + .#{$prefix}--radio-button { + @include visually-hidden; + + visibility: inherit; + } + + .#{$prefix}--radio-button__label { + @include type.type-style('body-short-01'); + + display: flex; + align-items: center; + margin-right: $spacing-05; + cursor: pointer; + } + + .#{$prefix}--radio-button__appearance { + @include reset; + + width: rem(18px); + height: rem(18px); + flex-shrink: 0; + border: $radio-border-width solid $icon-primary; + margin: rem(1px) $spacing-03 rem(2px) rem(2px); + background-color: transparent; + border-radius: 50%; + } + + .#{$prefix}--radio-button:checked + + .#{$prefix}--radio-button__label + .#{$prefix}--radio-button__appearance { + display: flex; + align-items: center; + justify-content: center; + border-color: $icon-primary; + + &::before { + position: relative; + display: inline-block; + width: 100%; + height: 100%; + background-color: $icon-primary; + border-radius: 50%; + content: ''; + transform: scale(0.5); + + // Allow the selected button to be seen in Windows HCM for IE/Edge + @media screen and (-ms-high-contrast: active) { + // Utilize a system color variable to accommodate any user HCM theme + background-color: WindowText; + } + + // Firefox only HCM solution + @media screen and (prefers-contrast) { + // Utilize a system color variable to accommodate any user HCM theme + border: 2px solid WindowText; + } + } + } + + .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label { + color: $button-disabled; + cursor: not-allowed; + } + + .#{$prefix}--radio-button:disabled + + .#{$prefix}--radio-button__label + .#{$prefix}--radio-button__appearance, + .#{$prefix}--radio-button:disabled:checked + + .#{$prefix}--radio-button__label + .#{$prefix}--radio-button__appearance { + border-color: $border-disabled; + + &::before { + background-color: $button-disabled; + } + } + + // Focus + + .#{$prefix}--radio-button:focus + + .#{$prefix}--radio-button__label + .#{$prefix}--radio-button__appearance { + outline: 2px solid $focus; + outline-offset: 1.5px; + } + + // Skeleton State + .#{$prefix}--radio-button__label.#{$prefix}--skeleton { + @include skeleton; + + width: rem(100px); + height: rem(18px); + } + + .#{$prefix}--radio-button__label.#{$prefix}--skeleton + .#{$prefix}--radio-button__appearance { + display: none; + } + + .#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label { + display: flex; + align-items: flex-start; + justify-content: center; + margin: 0; + } + + .#{$prefix}--radio-button-wrapper:not(:last-of-type) { + margin-right: $spacing-05; + } + + .#{$prefix}--radio-button-group--vertical + .#{$prefix}--radio-button-wrapper:not(:last-of-type) { + margin-right: 0; + margin-bottom: $spacing-03; + } + + .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label, + .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right + .#{$prefix}--radio-button__label { + flex-direction: row; + } + + .#{$prefix}--radio-button-group--label-left .#{$prefix}--radio-button__label, + .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left + .#{$prefix}--radio-button__label { + flex-direction: row-reverse; + } + + .#{$prefix}--radio-button-group--label-left + .#{$prefix}--radio-button__appearance, + .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left + .#{$prefix}--radio-button__appearance { + margin-right: 0; + margin-left: $spacing-03; + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_index.scss new file mode 100644 index 000000000000..3ec6f18a44ab --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_index.scss @@ -0,0 +1,4 @@ +@forward 'search'; +@use 'search'; + +@include search.search; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_search.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_search.scss new file mode 100644 index 000000000000..5e5b92cf9a25 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/search/_search.scss @@ -0,0 +1,373 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +//----------------------------- +// Search +//----------------------------- + +@use '../../theme' as *; +@use '../../config' as *; +@use '../../type'; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../utilities/placeholder-colors' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/visually-hidden' as *; +@use '../../utilities/component-reset' as *; +@use '../../utilities/skeleton' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/button-reset'; + +/// Search styles +/// @access public +/// @group search +@mixin search { + .#{$prefix}--search { + position: relative; + display: flex; + width: 100%; + align-items: center; + } + + .#{$prefix}--search .#{$prefix}--label { + @include visually-hidden; + } + + .#{$prefix}--search-input { + @include reset; + @include type.type-style('body-short-01'); + @include focus-outline('reset'); + + width: 100%; + order: 1; + padding: 0 $spacing-08; + border: none; + border-bottom: 1px solid $border-strong; + appearance: none; + background-color: $field; + color: $text-primary; + text-overflow: ellipsis; + transition: background-color $duration-fast-02 motion(standard, productive), + outline $duration-fast-02 motion(standard, productive); + + &:focus { + @include focus-outline('outline'); + } + + &::placeholder { + @include placeholder-colors; + } + + &::-ms-clear { + display: none; + } + } + + .#{$prefix}--search-input[disabled] { + border-bottom: 1px solid transparent; + background-color: $field; + color: $text-disabled; + cursor: not-allowed; + + &::placeholder { + color: $field; + } + } + .#{$prefix}--search--light .#{$prefix}--search-input { + background: $field-02; + } + + .#{$prefix}--search--light .#{$prefix}--search-close::before { + background: $field-02; + } + + // Small styles + .#{$prefix}--search--sm .#{$prefix}--search-input, + .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-input { + height: rem(32px); + // 8px padding on either side of icon + 16px icon (32px) + padding: 0 $spacing-07; + } + + .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon { + left: rem(8px); + } + + // Large styles + // V11: change lg to md + .#{$prefix}--search--lg .#{$prefix}--search-input, + .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-input { + height: rem(40px); + // 12px padding on either side of icon + 16px icon (40px) + padding: 0 $spacing-08; + } + + // V11: change lg to md + .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon { + left: rem(12px); + } + + // V11: change xl to lg + .#{$prefix}--search--xl .#{$prefix}--search-input, + .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-input { + height: rem(48px); + // 16px padding on either side of icon + 16px icon (48px) + padding: 0 $spacing-09; + } + + .#{$prefix}--search-magnifier-icon { + position: absolute; + z-index: 2; + top: 50%; + left: $spacing-05; + width: rem(16px); + height: rem(16px); + fill: $icon-secondary; + pointer-events: none; + transform: translateY(-50%); + } + + .#{$prefix}--search-close { + @include button-reset.reset(false); + @include focus-outline('reset'); + + position: absolute; + top: 0; + right: 0; + + &::before { + position: absolute; + top: rem(1px); + left: 0; + display: block; + width: 2px; + height: calc(100% - 2px); + background-color: $field; + content: ''; + transition: background-color $duration-fast-02 + motion(standard, productive); + } + + &:hover { + border-bottom: 1px solid $border-strong; + + &::before { + background-color: $field-hover; + } + } + } + + .#{$prefix}--search-button { + flex-shrink: 0; + margin-left: $spacing-01; + background-color: $field; + + svg { + fill: currentColor; + vertical-align: middle; + } + } + + .#{$prefix}--search-close svg { + fill: inherit; + } + + .#{$prefix}--search-close, + .#{$prefix}--search-button { + display: flex; + width: rem(40px); + height: rem(40px); + align-items: center; + justify-content: center; + border-width: 1px 0; + border-style: solid; + border-color: transparent; + cursor: pointer; + fill: $icon-primary; + opacity: 1; + transition: opacity $duration-fast-02 motion(standard, productive), + background-color $duration-fast-02 motion(standard, productive), + outline $duration-fast-02 motion(standard, productive), + border $duration-fast-02 motion(standard, productive); + visibility: inherit; + + &:hover { + background-color: $field-hover; + } + + &:focus { + @include focus-outline('outline'); + } + + &:active { + @include focus-outline('outline'); + + background-color: $background-selected; + } + } + + .#{$prefix}--search--disabled .#{$prefix}--search-close, + .#{$prefix}--search--disabled.#{$prefix}--search--expandable + .#{$prefix}--search-magnifier { + cursor: not-allowed; + outline: none; + + &:hover { + border-bottom-color: transparent; + background-color: transparent; + } + + &:hover::before { + background-color: transparent; + } + } + + .#{$prefix}--search--disabled svg { + fill: $icon-on-color-disabled; + } + + .#{$prefix}--search-close:focus, + .#{$prefix}--search-close:active { + &::before { + background-color: $focus; + } + } + + .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover { + @include focus-outline('outline'); + } + + .#{$prefix}--search--sm { + .#{$prefix}--search-close, + ~ .#{$prefix}--search-button, + &.#{$prefix}--search--expandable, + &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { + width: rem(32px); + height: rem(32px); + } + + &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { + padding: 0 rem(32px); + } + } + + // V11: change lg to md + .#{$prefix}--search--lg { + .#{$prefix}--search-close, + ~ .#{$prefix}--search-button, + &.#{$prefix}--search--expandable, + &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { + width: rem(40px); + height: rem(40px); + } + + &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { + padding: 0 rem(40px); + } + } + + // V11: change xl to lg + .#{$prefix}--search--xl { + .#{$prefix}--search-close, + ~ .#{$prefix}--search-button, + &.#{$prefix}--search--expandable, + &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { + width: rem(48px); + height: rem(48px); + } + + &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { + padding: 0 rem(48px); + } + } + + .#{$prefix}--search-close--hidden { + opacity: 0; + visibility: hidden; + } + + // V11: change xl to lg, lg to md + .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input, + .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input, + .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input { + @include skeleton; + + width: 100%; + + &::placeholder { + color: transparent; + } + } + + .#{$prefix}--search--expandable { + transition: width $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--search--expandable.#{$prefix}--search--expanded { + width: 100%; + } + + .#{$prefix}--search--expandable .#{$prefix}--search-input { + width: 0; + padding: 0; + transition: padding $duration-fast-01 motion(standard, productive), + width 0s linear $duration-fast-01; + + &::placeholder { + position: relative; + opacity: 0; + transition-duration: $duration-fast-01; + transition-property: padding, opacity; + transition-timing-function: motion(standard, productive); + } + } + + .#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-input { + width: 100%; + transition: padding $duration-fast-01 motion(standard, productive); + + &::placeholder { + position: relative; + padding: 0; + opacity: 1; + } + } + + .#{$prefix}--search--expandable .#{$prefix}--search-magnifier { + position: absolute; + cursor: pointer; + } + + .#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover { + background-color: $background-hover; + } + + .#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-magnifier { + pointer-events: none; + } + + .#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon { + fill: $icon-primary; + } + + .#{$prefix}--search--expandable.#{$prefix}--search--expanded + .#{$prefix}--search-magnifier-icon { + fill: $icon-secondary; + } + + // Windows HCM fix + .#{$prefix}--search-close svg, + .#{$prefix}--search-magnifier-icon { + @include high-contrast-mode('icon-fill'); + } +} diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_index.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_index.scss new file mode 100644 index 000000000000..31f9101fcdf6 --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'select'; +@use 'select'; + +@include select.select; diff --git a/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_select.scss b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_select.scss new file mode 100644 index 000000000000..7c4b53e543fb --- /dev/null +++ b/packages/components/src/globals/scss/vendor/@carbon/styles/scss/components/select/_select.scss @@ -0,0 +1,268 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../spacing' as *; +@use '../../motion' as *; +@use '../../type' as *; +@use '../../breakpoint' as *; +@use '../../theme' as *; +@use '../../utilities/component-reset'; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/high-contrast-mode' as *; +@use '../../utilities/skeleton' as *; +@use '../form'; + +/// Select styles +/// @access public +/// @group select +@mixin select { + .#{$prefix}--select { + @include component-reset.reset; + + position: relative; + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + } + + .#{$prefix}--select-input__wrapper { + position: relative; + display: flex; + width: 100%; + align-items: center; + } + + .#{$prefix}--select-input { + @include type-style('body-short-01'); + @include focus-outline('reset'); + + display: block; + width: 100%; + height: rem(40px); + padding: 0 $spacing-09 0 $spacing-05; + border: none; + border-bottom: 1px solid $border-strong; + appearance: none; + background-color: $field; + border-radius: 0; + color: $text-primary; + cursor: pointer; + font-family: inherit; + // reset disabled