diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap index 9bfc31656285..dd0ae9a81894 100644 --- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap +++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Snapshot Tests should match snapshots 1`] = ` +exports[`@carbon/styles should have stable public scss entrypoints 1`] = ` Array [ "scss/compat/theme", "scss/compat/themes", diff --git a/packages/styles/__tests__/styles-test.js b/packages/styles/__tests__/styles-test.js index 13b43b675181..2189471f9448 100644 --- a/packages/styles/__tests__/styles-test.js +++ b/packages/styles/__tests__/styles-test.js @@ -91,36 +91,51 @@ const filepaths = [ 'scss/components/treeview', 'scss/components/ui-shell', ]; -describe.each(filepaths)('%s', (filepath) => { - it('should be importable', async () => { - await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined(); + +describe('@carbon/styles', () => { + describe.each(filepaths)('%s', (filepath) => { + it('should be importable', async () => { + await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined(); + }); }); -}); -describe('Snapshot Tests', () => { - it('should match snapshots', async () => { + it('should have stable public scss entrypoints', async () => { expect(filepaths).toMatchSnapshot(); }); -}); -describe('@carbon/styles/scss/config', () => { - test('Config overrides', async () => { - const { get } = await render(` - @use 'sass:meta'; - @use '../scss/config' with ( - $prefix: 'custom-prefix', - $css--font-face: false, - ); + describe('scss/config', () => { + test('config overrides', async () => { + const { get } = await render(` + @use 'sass:meta'; + @use '../scss/config' with ( + $prefix: 'custom-prefix', + $css--font-face: false, + ); - $_: get('config', ( - prefix: config.$prefix, - css--font-face: config.$css--font-face, - )); - `); + $_: get('config', ( + prefix: config.$prefix, + css--font-face: config.$css--font-face, + )); + `); + + expect(get('config').value).toEqual({ + prefix: 'custom-prefix', + ['css--font-face']: false, + }); + }); + }); - expect(get('config').value).toEqual({ - prefix: 'custom-prefix', - ['css--font-face']: false, + describe('import order', () => { + it('should support bringing in stylesheets independently', async () => { + await expect( + render(` + @use '../scss/reset'; + @use '../scss/grid'; + @use '../scss/breakpoint'; + @use '../scss/colors'; + @use '../scss/components'; + `) + ).resolves.not.toThrow(); }); }); }); diff --git a/packages/styles/scss/_reset.scss b/packages/styles/scss/_reset.scss index 54643b478804..962ad7ce5175 100644 --- a/packages/styles/scss/_reset.scss +++ b/packages/styles/scss/_reset.scss @@ -6,7 +6,7 @@ // @use 'config'; -@use 'type'; +@use 'type/reset' as type; @mixin reset { /// http://meyerweb.com/eric/tools/css/reset/ diff --git a/packages/styles/scss/_type.scss b/packages/styles/scss/type/_index.scss similarity index 98% rename from packages/styles/scss/_type.scss rename to packages/styles/scss/type/_index.scss index 7f6dcacde295..51356a4676f8 100644 --- a/packages/styles/scss/_type.scss +++ b/packages/styles/scss/type/_index.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@use 'config'; +@use '../config'; @forward '@carbon/type' show // Mixins reset, diff --git a/packages/styles/scss/type/_reset.scss b/packages/styles/scss/type/_reset.scss new file mode 100644 index 000000000000..cab65014a81a --- /dev/null +++ b/packages/styles/scss/type/_reset.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/type/scss/modules/reset'; diff --git a/packages/type/index.scss b/packages/type/index.scss index ae5d964ae6f5..7bff12346d25 100644 --- a/packages/type/index.scss +++ b/packages/type/index.scss @@ -13,3 +13,4 @@ @forward 'scss/modules/reset'; @forward 'scss/modules/scale'; @forward 'scss/modules/styles'; +@forward 'scss/modules/default-type'; diff --git a/packages/type/scss/modules/_default-type.scss b/packages/type/scss/modules/_default-type.scss new file mode 100644 index 000000000000..af679c8f3a11 --- /dev/null +++ b/packages/type/scss/modules/_default-type.scss @@ -0,0 +1,55 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// 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 'styles' as *; + +/// 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/type/scss/modules/_reset.scss b/packages/type/scss/modules/_reset.scss index dc78ab870232..8a7c834372db 100644 --- a/packages/type/scss/modules/_reset.scss +++ b/packages/type/scss/modules/_reset.scss @@ -9,7 +9,6 @@ @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 @@ -43,50 +42,3 @@ @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; - } -}