Upgrade to 2.0.0

Removed SASS breakpoints helper

Usage of breakpoints helper for layouts

Remove the current @use from your SASS:

_10

@use '@kickstartds/core/source/core/breakpoint';

_10

_10

.content {

_10

@include breakpoint.media('>xl') {

_10

--ks-spacing-xl: 8em;

_10

}

_10

}

Replace it with a standard media query for this: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Like this:

_10

@media (min-width: 75em) {

_10

.content {

_10

--ks-spacing-xl: 8em;

_10

}

_10

}

Where xl in our case equates to 75em. You can use the CSS Properties generated for you, to help still writing maintainable media queries. For example:

_10

--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';

Usage of breakpoints helper for components

Remove the current @use from your SASS:

_24

@use '@kickstartds/core/source/core/breakpoint';

_24

_24

.l-section {

_24

--section-dark--headline-color: var(--color-white);

_24

--section-dark--text-color: var(--color-grey-1);

_24

_24

--section--background-light: var(--color-grey);

_24

_24

&__container {

_24

--l-section_col--min-width: 16rem;

_24

_24

.content & {

_24

--l-section_col--min-width: 10rem;

_24

_24

@include breakpoint.media('>s') {

_24

--l-section_col--min-width: 9rem;

_24

}

_24

_24

@include breakpoint.media('>l') {

_24

--l-section_col--min-width: 12rem;

_24

}

_24

}

_24

}

_24

}

Replace it with:

_26

@use '@kickstartds/core/source/core/container' with (

_26

$name: 'section-content'

_26

);

_26

_26

.l-section {

_26

--section-dark--headline-color: var(--color-white);

_26

--section-dark--text-color: var(--color-grey-1);

_26

_26

--section--background-light: var(--color-grey);

_26

_26

&__container {

_26

--l-section_col--min-width: 16rem;

_26

_26

.content & {

_26

--l-section_col--min-width: 10rem;

_26

_26

@include container.size('≥', 640px) {

_26

--l-section_col--min-width: 9rem;

_26

}

_26

_26

@include container.size('≥', 1024px) {

_26

--l-section_col--min-width: 12rem;

_26

}

_26

}

_26

}

_26

}

Or:

Search:

_10

import { createContext, useContext } from 'react';

_10

/* ... */

_10

export const Consumption = (props) => {

_10

const Component = useContext(ConsumptionContext);

_10

return <Component {...props} />;

_10

};

and:

_10

@use '@kickstartds/core/source/core/breakpoint';

Replace:

_10

import { createContext } from 'react';

_10

import { withContainer } from '@kickstartds/core/lib/container';

_10

/* ... */

_10

export const Consumption = withContainer('consumption', ConsumptionContext);

and:

_10

@use '@kickstartds/core/source/core/container' with (

_10

$name: 'consumption'

_10

);