Skip to content

Commit

Permalink
fix: adopt DTCG format, fix color scales, add build:watch, update typ…
Browse files Browse the repository at this point in the history 
…ography tokens
  • Loading branch information
@adamstankiewicz
adamstankiewicz committed Sep 8, 2024
1 parent 9c93550 commit bbe3716
Show file tree
Hide file tree
Showing 53 changed files with 3,655 additions and 2,737 deletions.
2,384 changes: 1,878 additions & 506 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@
"build-tokens": "paragon build-tokens --source ./tokens/src --build-dir ./paragon/css --source-tokens-only",
"build-scss": "paragon build-scss --corePath ./paragon/core.scss --themesPath ./paragon/css/themes --defaultThemeVariants light",
"build": "make build",
"build:watch": "nodemon --ignore dist -x \"make build\"",
"paragon:help": "paragon help"
},
"devDependencies": {
"@openedx/paragon": "22.0.0-alpha.25"
"@openedx/paragon": "file:../paragon/openedx-paragon-20.18.1.tgz",
"nodemon": "^3.1.4"
}
}
5 changes: 2 additions & 3 deletions paragon/css/core/custom-media-breakpoints.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Fri, 24 May 2024 22:53:44 GMT
* Do not edit directly, this file was auto-generated. while transforming design tokens.
* See <root>/tokens/README.md for more details.
*/

151 changes: 57 additions & 94 deletions paragon/css/core/variables.css
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,77 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Fri, 24 May 2024 22:53:44 GMT
* Do not edit directly, this file was auto-generated. while transforming design tokens.
* See <root>/tokens/README.md for more details.
*/

:root {
--pgn-typography-font-line-height-base: 1rem;
--pgn-typography-font-line-height-14: 6.75rem;
--pgn-typography-font-line-height-13: 5.625rem;
--pgn-typography-font-line-height-12: 5.25rem;
--pgn-typography-font-line-height-11: 4.875rem;
--pgn-typography-font-line-height-10: 4.25rem;
--pgn-typography-font-line-height-9: 3.75rem;
--pgn-typography-font-line-height-8: 3.375rem;
--pgn-typography-font-line-height-7: 3rem;
--pgn-typography-font-line-height-6: 2.625rem;
--pgn-typography-font-line-height-5: 2.25rem;
--pgn-typography-font-line-height-4: 1.75rem;
--pgn-typography-font-line-height-3: 1.5rem;
--pgn-typography-font-line-height-2: 1.25rem;
--pgn-typography-font-weight-almost-bold: 600;
--pgn-typography-font-weight-lead: 400;
--pgn-typography-font-weight-bolder: bolder;
--pgn-typography-font-weight-bold: 700;
--pgn-typography-font-weight-semi-bold: 500;
--pgn-typography-font-weight-normal: 400;
--pgn-typography-font-weight-light: 300;
--pgn-typography-font-weight-lighter: lighter;
--pgn-typography-font-size-heading-extra-small: 0.75rem;
--pgn-typography-font-size-heading-small: 0.875rem;
--pgn-typography-font-size-heading-default: 1.125rem;
--pgn-typography-font-size-heading-large: 1.375rem;
--pgn-typography-font-size-body-micro: 0.6875rem;
--pgn-typography-font-size-body-extra-small: 0.75rem;
--pgn-typography-font-size-body-small: 0.875rem;
--pgn-typography-font-size-body-default: 1.125rem;
--pgn-typography-font-size-body-large: 1.375rem;
--pgn-typography-font-size-display-subhead: 3.125rem;
--pgn-typography-font-size-display1: 3.75rem;
--pgn-typography-font-size-display2: 4.875rem;
--pgn-typography-font-size-display3: 5.625rem;
--pgn-typography-font-size-display4: 6.75rem;
--pgn-typography-font-size-lead: 1.375rem;
--pgn-typography-font-size-mobile-display1: 3rem;
--pgn-typography-font-size-mobile-display2: 3.625rem;
--pgn-typography-font-size-mobile-display3: 4.375rem;
--pgn-typography-font-size-mobile-display4: 5.25rem;
--pgn-typography-font-size-mobile-h4: 1.375rem;
--pgn-typography-font-size-mobile-h3: 1.5rem;
--pgn-typography-font-size-mobile-h2: 1.75rem;
--pgn-typography-font-size-mobile-h1: 1.875rem;
--pgn-typography-font-size-h6: 1.125rem;
--pgn-typography-font-size-h5: 1.25rem;
--pgn-typography-font-size-h4: 1.5rem;
--pgn-typography-font-size-h3: 1.75rem;
--pgn-typography-font-size-h2: 2.25rem;
--pgn-typography-font-size-h1: 3rem;
--pgn-typography-font-size-small-x: 0.75rem;
--pgn-typography-font-size-small-base: 0.875rem;
--pgn-typography-font-size-base: 1.125rem;
--pgn-typography-font-family-monospace: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--pgn-typography-font-family-sans-serif: "Inter", "Helvetica Neue", Arial, sans-serif;
--pgn-typography-display-weight-4: 700;
--pgn-typography-display-weight-3: 700;
--pgn-typography-display-weight-2: 700;
--pgn-typography-display-weight-1: 700;
--pgn-typography-line-height-display-mobile: 1; /* Mobile line height of display level. */
--pgn-typography-font-weight-display-4: 900; /* Font weight of display level 4. */
--pgn-typography-font-weight-display-3: 900; /* Font weight of display level 3. */
--pgn-typography-font-weight-display-2: 900; /* Font weight of display level 2. */
--pgn-typography-font-weight-display-1: 900; /* Font weight of display level 1. */
--pgn-typography-font-size-display-mobile-4: 5.25rem; /* Mobile font size of display level 4. */
--pgn-typography-font-size-display-mobile-3: 4.375rem; /* Mobile font size of display level 3. */
--pgn-typography-font-size-display-mobile-2: 3.625rem; /* Mobile font size of display level 2. */
--pgn-typography-font-size-display-mobile-1: 3rem; /* Mobile font size of display level 1. */
--pgn-typography-font-size-display-4: 6.125rem; /* Font size of display level 4. */
--pgn-typography-font-size-display-3: 5.625rem; /* Font size of display level 3. */
--pgn-typography-font-size-display-2: 4.875rem; /* Font size of display level 2. */
--pgn-typography-font-size-display-1: 3.75rem; /* Font size of display level 1. */
--pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
--pgn-typography-font-size-h6-base: 1.125rem; /* Font size of heading level 6. */
--pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
--pgn-typography-font-size-h5-base: 1.25rem; /* Font size of heading level 5. */
--pgn-typography-font-size-h4-mobile: 1.375rem; /* Mobile font size of heading level 4. */
--pgn-typography-font-size-h4-base: 1.5rem; /* Font size of heading level 4. */
--pgn-typography-font-size-h3-mobile: 1.5rem; /* Mobile font size of heading level 3. */
--pgn-typography-font-size-h3-base: 1.75rem; /* Font size of heading level 3. */
--pgn-typography-font-size-h2-mobile: 1.75rem; /* Mobile font size of heading level 2. */
--pgn-typography-font-size-h2-base: 2.25rem; /* Font size of heading level 2. */
--pgn-typography-font-size-h1-mobile: 1.875rem; /* Mobile font size of heading level 1. */
--pgn-typography-font-size-h1-base: 3rem; /* Font size of heading level 1. */
--pgn-typography-font-family-monospace: '"Roboto Mono"', SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */
--pgn-typography-font-family-serif: var(--pgn-typography-font-family-sans-serif); /* Serif font family. */
--pgn-typography-font-family-sans-serif: "Inter", '"Helvetica Neue"', Arial, sans-serif; /* Sans-serif font family. */
--pgn-typography-headings-font-weight: 700;
--pgn-typography-btn-font-weight: 500;
--pgn-typography-badge-font-weight: 400;
--pgn-typography-badge-font-size: 0.75rem;
--pgn-spacing-spacer-base: 1rem;
--pgn-spacing-spacer-0: 0;
--pgn-spacing-grid-gutter-width: var(--pgn-spacing-spacer-4); /* Grid gutter width value. */
--pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
--pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
--pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
--pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */
--pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */
--pgn-spacing-spacer-base: 1rem; /* Basic space value */
--pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */
--pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */
--pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */
--pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
--pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
--pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
--pgn-spacing-spacer-0: 0; /* Space value of level 0 */
--pgn-spacing-caret-vertical-align: calc(var(--pgn-size-caret-width) * .67);
--pgn-spacing-caret-base: calc(var(--pgn-size-caret-width) * 1);
--pgn-spacing-dropdown-padding-y-item: var(--pgn-spacing-spacer-2-5);
--pgn-spacing-dropdown-padding-y-base: var(--pgn-spacing-spacer-2);
--pgn-spacing-card-spacer-y: var(--pgn-spacing-spacer-3);
--pgn-spacing-card-spacer-x: var(--pgn-spacing-spacer-4);
--pgn-spacing-btn-focus-gap: 2px;
--pgn-size-input-btn-border-width: 1px;
--pgn-size-popover-border-width: 0px;
--pgn-size-nav-pills-border-radius: 0;
--pgn-size-image-thumbnail-border-radius: 0;
--pgn-size-input-btn-border-width: 1px;
--pgn-size-form-input-radius-border-sm: 0;
--pgn-size-form-input-radius-border-lg: 0;
--pgn-size-form-input-radius-border-base: 0;
--pgn-size-dropdown-border-width: 0;
--pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
--pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
--pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
--pgn-size-btn-border-radius-sm: 100px;
--pgn-size-btn-border-radius-lg: 100px;
--pgn-size-btn-border-radius-base: 100px;
--pgn-size-border-radius-sm: .375rem;
--pgn-size-border-radius-lg: .375rem;
--pgn-size-border-radius-base: .375rem;
--pgn-typography-font-line-height-1: 1rem;
--pgn-typography-font-weight-base: 400;
--pgn-typography-font-size-lg: calc(1.125rem * 1.25);
--pgn-typography-font-family-serif: "Inter", "Helvetica Neue", Arial, sans-serif;
--pgn-spacing-spacer-5-5: calc(1rem * 4);
--pgn-spacing-spacer-4-5: calc(1rem * 2);
--pgn-spacing-spacer-3-5: calc(1rem * 1.25);
--pgn-spacing-spacer-2-5: calc(1rem * .75);
--pgn-spacing-spacer-1-5: calc(1rem * .375);
--pgn-spacing-spacer-6: calc(1rem * 5);
--pgn-spacing-spacer-5: calc(1rem * 3);
--pgn-spacing-spacer-4: calc(1rem * 1.5);
--pgn-spacing-spacer-3: 1rem;
--pgn-spacing-spacer-2: calc(1rem * .5);
--pgn-spacing-spacer-1: calc(1rem * .25);
--pgn-spacing-caret-vertical-align: calc(.3em * .67);
--pgn-spacing-caret-base: calc(.3em * 1);
--pgn-size-btn-focus-border-radius-sm: 100px;
--pgn-size-btn-focus-border-radius-base: calc(100px + calc(2px + 2px));
--pgn-spacing-grid-gutter-width: calc(1rem * 4);
--pgn-spacing-dropdown-padding-y-item: calc(1rem * .75);
--pgn-spacing-dropdown-padding-y-base: calc(1rem * .5);
--pgn-spacing-card-spacer-y: 1rem;
--pgn-spacing-card-spacer-x: calc(1rem * 1.5);
--pgn-size-btn-focus-border-radius-lg: calc(100px + calc(2px + 2px));
--pgn-size-border-radius-sm: .375rem; /* Small border radius. */
--pgn-size-border-radius-lg: .375rem; /* Large border radius. */
--pgn-size-border-radius-base: .375rem; /* Default border radius. */
}
1 change: 0 additions & 1 deletion paragon/css/themes/light/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
@import "variables.css";
@import "utility-classes.css";
Empty file removed paragon/css/themes/light/utility-classes.css
View file
Empty file.
Loading

0 comments on commit bbe3716

Please sign in to comment.