Skip to content

Commit

Permalink
fix: renamed custom media query (#2495)
Browse files Browse the repository at this point in the history
  • Loading branch information
PKulkoRaccoonGang committed Aug 1, 2024
1 parent e362e09 commit d63c2ec
Show file tree
Hide file tree
Showing 14 changed files with 47 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/Card/Card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,7 @@ a.pgn__card {
}
}

@media (--max-pgn-size-breakpoint-xs) {
@media (--pgn-size-breakpoint-max-width-xs) {
.pgn__card-footer {
&.horizontal > :not(:last-child) {
margin-inline-end: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/ColorPicker/ColorPicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

.form-field {
@media (--min-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-min-width-sm) {
margin-inline-end: 0;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/DataTable/DataTable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
display: flex;
align-items: flex-start;

@media (--max-pgn-size-breakpoint-xl) {
@media (--pgn-size-breakpoint-max-width-xl) {
overflow-x: scroll;
}

Expand Down
4 changes: 2 additions & 2 deletions src/Form/_Form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
flex-grow: 1;
align-items: flex-start;

@media (--min-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-min-width-sm) {
margin-inline-end: var(--pgn-spacing-form-control-gutter);
}

Expand Down Expand Up @@ -597,7 +597,7 @@ select.form-control {
.pgn__form-autosuggest__dropdown {
@include pgn-box-shadow(1, "centered");

@media (--min-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-min-width-sm) {
margin-inline-end: var(--pgn-spacing-form-control-gutter);
}

Expand Down
2 changes: 1 addition & 1 deletion src/ProductTour/Checkpoint.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
max-width: var(--pgn-size-product-tour-checkpoint-width-max);

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
min-width: 90%;
max-width: 90%;
}
Expand Down
4 changes: 2 additions & 2 deletions src/Toast/Toast.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@
}
}

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
max-width: 100%;
}

@media (--min-pgn-size-breakpoint-md) {
@media (--pgn-size-breakpoint-min-width-md) {
min-width: var(--pgn-size-toast-max-width);
max-width: var(--pgn-size-toast-max-width);
}
Expand Down
2 changes: 1 addition & 1 deletion src/Toast/ToastContainer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
left: 0;
}

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
bottom: var(--pgn-spacing-toast-container-gutter-sm);
right: var(--pgn-spacing-toast-container-gutter-sm);
left: var(--pgn-spacing-toast-container-gutter-sm);
Expand Down
24 changes: 12 additions & 12 deletions styles/css/core/custom-media-breakpoints.css
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Mon, 05 Jun 2023 02:30:54 GMT
* Generated on Thu, 03 Aug 2023 08:09:26 GMT
*/

@custom-media --min-pgn-size-breakpoint-xs (min-width: 0);
@custom-media --max-pgn-size-breakpoint-xs (max-width: 576px);
@custom-media --min-pgn-size-breakpoint-sm (min-width: 576px);
@custom-media --max-pgn-size-breakpoint-sm (max-width: 768px);
@custom-media --min-pgn-size-breakpoint-md (min-width: 768px);
@custom-media --max-pgn-size-breakpoint-md (max-width: 992px);
@custom-media --min-pgn-size-breakpoint-lg (min-width: 992px);
@custom-media --max-pgn-size-breakpoint-lg (max-width: 1200px);
@custom-media --min-pgn-size-breakpoint-xl (min-width: 1200px);
@custom-media --max-pgn-size-breakpoint-xl (max-width: 1400px);
@custom-media --min-pgn-size-breakpoint-xxl (min-width: 1400px);
@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px);
@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px);
@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px);
@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px);
@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px);
@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px);
@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px);
5 changes: 3 additions & 2 deletions tokens/style-dictionary.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const StyleDictionary = require('style-dictionary');
const chroma = require('chroma-js');
const { colorYiq, darken, lighten } = require('./sass-helpers');
const cssUtilities = require('./css-utilities');
const { composeBreakpointName } = require('./utils');

const { fileHeader, sortByReference } = StyleDictionary.formatHelpers;

Expand Down Expand Up @@ -185,9 +186,9 @@ StyleDictionary.registerFormat({

for (let i = 0; i < breakpoints.length; i++) {
const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
customMediaVariables += `@custom-media --min-${currentBreakpoint.name} (min-width: ${currentBreakpoint.value});\n`;
customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
if (nextBreakpoint) {
customMediaVariables += `@custom-media --max-${currentBreakpoint.name} (max-width: ${nextBreakpoint.value});\n`;
customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
}
}

Expand Down
12 changes: 12 additions & 0 deletions tokens/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,21 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
});
}

/**
* Composes a breakpoint name according to the Paragon namespace.
*
* @param {string} breakpointName - breakpoint initial name.
* @param {string} format - screen width format.
* @return {string} - new breakpoint name.
*/
function composeBreakpointName(breakpointName, format) {
return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
}

module.exports = {
createIndexCssFile,
getFilesWithExtension,
getSCSStoCSSMap,
transformInPath,
composeBreakpointName,
};
4 changes: 2 additions & 2 deletions www/src/components/Menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -139,11 +139,11 @@
.pgn-doc__menu-all-components .pgn-doc__menu-component-list {
columns: 4;

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
columns: 2;
}

@media (--max-pgn-size-breakpoint-xs) {
@media (--pgn-size-breakpoint-max-width-xs) {
columns: 1;
}
}
10 changes: 5 additions & 5 deletions www/src/components/Search/Search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
margin: 6.875rem auto auto;
cursor: auto;

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
max-width: 100%;
margin: auto;
border-radius: 0;
Expand All @@ -65,7 +65,7 @@
border-top: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
padding: 0 1.625rem;

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
position: absolute;
border-radius: 0;
bottom: 0;
Expand All @@ -92,7 +92,7 @@
padding: 0 1.625rem;
max-height: 20.9375rem;

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
height: 100%;
// stylelint-disable-next-line max-line-length
max-height: calc(var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
Expand Down Expand Up @@ -290,7 +290,7 @@
text-decoration: underline;
}

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
font-size: var(--pgn-typography-font-size-base);
line-height: var(--pgn-typography-line-height-base);
font-weight: var(--pgn-typography-font-weight-semi-bold);
Expand Down Expand Up @@ -318,7 +318,7 @@
}

.DocSearch-Cancel {
@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
margin-right: 1.1875rem;
}
}
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/_doc-elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@
align-items: center;
background-color: var(--pgn-color-gray-100);

@media (--max-pgn-size-breakpoint-sm) {
@media (--pgn-size-breakpoint-max-width-sm) {
max-width: 100%;
}
}
Expand Down
6 changes: 3 additions & 3 deletions www/src/components/header/Header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@
width: 13.25rem;
height: 2.75rem;

@media (--max-pgn-size-breakpoint-md) {
@media (--pgn-size-breakpoint-max-width-md) {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
overflow: hidden;
padding: .625rem .75rem;
}

@media (--max-pgn-size-breakpoint-xs) {
@media (--pgn-size-breakpoint-max-width-xs) {
margin: 0 0 0 .5rem;
width: 2rem;
height: 2rem;
Expand Down Expand Up @@ -103,7 +103,7 @@
&-settings-and-search .DocSearch.DocSearch-Button {
margin: 0 var(--pgn-spacing-spacer-base) 0 0;

@media (--max-pgn-size-breakpoint-xs) {
@media (--pgn-size-breakpoint-max-width-xs) {
margin: 0 .5rem 0 0;
}
}
Expand Down

0 comments on commit d63c2ec

Please sign in to comment.