Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(@kadena/ui): Add responsiveStyle and mapToProperty utility theme functions #1022

Merged
merged 7 commits into from
Oct 11, 2023
Merged

feat(@kadena/ui): Add responsiveStyle and mapToProperty utility theme functions #1022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0809ea9
add responsive style function
eileenmguo Oct 10, 2023
bf7ef22
cleanup
eileenmguo Oct 10, 2023
865d642
cleanup
eileenmguo Oct 10, 2023
5649758
applying to docs
eileenmguo Oct 10, 2023
2b1e685
fix docs build
eileenmguo Oct 10, 2023
ab2d94f
fix lint error
eileenmguo Oct 11, 2023
aae4059
add changeset
eileenmguo Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tender-suits-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@kadena/react-ui': minor
---

Added responsiveStyle and mapToProperty styling utility functions
26 changes: 13 additions & 13 deletions packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';

import { style, styleVariants } from '@vanilla-extract/css';

Expand Down Expand Up @@ -76,33 +76,33 @@ export const figureClass = style([
{
width: `100%`,

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
aspectRatio: '1',
},
},
}),
},
]);

export const figureVariant = styleVariants({
default: {
width: '100%',
aspectRatio: '16 / 3',
'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
},
},
}),
},
large: {
width: '100%',
aspectRatio: '16 / 7',
'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
width: `clamp(${vars.sizes.$48}, 20vw, ${vars.sizes.$64})`,
},
},
}),
},
});

Expand Down Expand Up @@ -130,12 +130,12 @@ export const gridWrapperClass = style([
"header"
`,

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
gridTemplateAreas: `
"header image"
`,
},
},
}),
},
]);
9 changes: 4 additions & 5 deletions packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';

import type { ComplexStyleRule } from '@vanilla-extract/css';
import { style } from '@vanilla-extract/css';
Expand Down Expand Up @@ -29,17 +29,16 @@ export const stripItemWrapperClass = style([
},
},

'@media': {
[`screen and ${breakpoints.lg}`]: {
...responsiveStyle({
lg: {
flex: '33%',

selectors: {
'&:last-child': {
display: 'none',
},
},
},
},
}),
},
]);

Expand Down
22 changes: 10 additions & 12 deletions packages/apps/docs/src/components/BottomPageSection/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';

import { style } from '@vanilla-extract/css';

Expand All @@ -9,15 +9,13 @@ export const bottomWrapperClass = style([
}),
]);

export const bottomWrapperCodeLayoutClass = style([
{
'@media': {
[`screen and ${breakpoints.xl}`]: {
width: '56%',
},
[`screen and ${breakpoints.xxl}`]: {
width: '60%',
},
export const bottomWrapperCodeLayoutClass = style(
responsiveStyle({
xl: {
width: '56%',
},
},
]);
xxl: {
width: '60%',
},
}),
);
15 changes: 8 additions & 7 deletions packages/apps/docs/src/components/BrowseSection/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';

import { style, styleVariants } from '@vanilla-extract/css';

Expand All @@ -21,11 +21,11 @@ export const directionVariants = styleVariants({
rowGap: 0,
flexDirection: 'column',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
flexDirection: 'row',
},
},
}),
},
],
column: [
Expand Down Expand Up @@ -68,11 +68,12 @@ export const listItemClass = style([
}),
{
flexBasis: '50%',
'@media': {
[`screen and ${breakpoints.md}`]: {

...responsiveStyle({
md: {
flexBasis: '33%',
},
},
}),
},
]);

Expand Down
38 changes: 19 additions & 19 deletions packages/apps/docs/src/components/DocsCard/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';

import { style, styleVariants } from '@vanilla-extract/css';

Expand Down Expand Up @@ -70,77 +70,77 @@ export const backgroundVariant = styleVariants({
backgroundPosition: 'right -150px bottom -150px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -250px bottom -250px',
backgroundSize: '500px',
},
},
}),
},
contribute: {
backgroundRepeat: 'no-repeat',
backgroundImage: `url("/assets/background/contribute.svg")`,
backgroundPosition: 'right -165px bottom -120px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -300px bottom -200px',
backgroundSize: '500px',
},
},
}),
},
quickstart: {
backgroundRepeat: 'no-repeat',
backgroundImage: `url("/assets/background/quickstart.svg")`,
backgroundPosition: 'right -140px bottom -120px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -220px bottom -220px',
backgroundSize: '500px',
},
},
}),
},
smartwallet: {
backgroundRepeat: 'no-repeat',
backgroundImage: `url("/assets/background/smartwallet.svg")`,
backgroundPosition: 'right -140px bottom -120px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -320px bottom -120px',
backgroundSize: '500px',
},
},
}),
},
react: {
backgroundRepeat: 'no-repeat',
backgroundImage: `url("/assets/background/react.svg")`,
backgroundPosition: 'right -140px bottom -120px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -250px bottom -220px',
backgroundSize: '450px',
},
},
}),
},
marmalade: {
backgroundRepeat: 'no-repeat',
backgroundImage: `url("/assets/background/marmalade.svg")`,
backgroundPosition: 'right -140px bottom -120px',
backgroundSize: '300px',

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
backgroundPosition: 'right -200px bottom -220px',
backgroundSize: '450px',
},
},
}),
},
default: {},
});
31 changes: 15 additions & 16 deletions packages/apps/docs/src/components/Layout/Blog/styles.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';

import { style } from '@vanilla-extract/css';

Expand Down Expand Up @@ -38,28 +38,27 @@ export const pageGridClass = style({
"footer footer"
`,

'@media': {
[`screen and ${breakpoints.md}`]: {
...responsiveStyle({
md: {
gridTemplateColumns: '0% 5% auto 5%',

gridTemplateAreas: `
"header header header header"
"pageheader pageheader pageheader pageheader"
". content . ."
"footer footer footer footer"
`,
"header header header header"
"pageheader pageheader pageheader pageheader"
". content . ."
"footer footer footer footer"
`,
},

[`screen and ${breakpoints.xxl}`]: {
xxl: {
gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)',
gridTemplateAreas: `
"header header header header"
"pageheader pageheader pageheader pageheader"
". content ."
"footer footer footer footer"
`,
"header header header header"
"pageheader pageheader pageheader pageheader"
". content ."
"footer footer footer footer"
`,
},
},
}),
});

export const articleMetaDataItemClass = style({
Expand Down
Loading