Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Huge commit :) Finish refactoring default css custom props. Adds a bu…
…ild process in the CSS package for generating a minified css-dist/common.min.css file which has the css custom properties required for things like font family, color, spacing, etc., that components require as a prerequisite. Used for all framework packages.
- Loading branch information
1 parent
b1457d2
commit 5fe65bd
Showing
46 changed files
with
887 additions
and
343 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,77 @@ | ||
| @import "button.css"; | ||
| @import "button-group.css"; | ||
| @import "card.css"; | ||
| @import "colors.css"; | ||
| @import "flexboxgrid-grid.css"; | ||
| @import "flexboxgrid-col.css"; | ||
| @import "flexboxgrid-row.css"; | ||
| @import "header.css"; | ||
| @import "headernav.css"; | ||
| @import "headernavitem.css"; | ||
| @import "input.css"; | ||
| @import "progress.css"; | ||
| @import "spacing.css"; | ||
| @import "typography.css"; | ||
| /** | ||
| * Color tokens | ||
| */ | ||
|
|
||
| body { | ||
| font-family: var(--agnosticui-font-family); | ||
| line-height: var(--agnosticui-line-height); | ||
| font-size: var(--agnosticui-body); | ||
| :root { | ||
| /* Please, please, please, at mimimum redefine primary and secondary ;) */ | ||
| --agnosticui-primary: Fuchsia; | ||
| --agnosticui-secondary: Teal; | ||
| --agnosticui-gray-extra-light: #f8f8f8; | ||
| --agnosticui-gray-light: #e9e9e9; | ||
| --agnosticui-gray-mid: #d8d8d8; | ||
| --agnosticui-gray-mid-dark: #cccccc; | ||
| --agnosticui-gray-dark: #aaaaaa; | ||
| --agnosticui-dark: #333333; | ||
| --agnosticui-light: #ffffff; | ||
| /* Caption, Sub-heading, etc., can be added here */ | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-bottom: 40px; } | ||
| h1 { font-size: var(--agnosticui-h1); } | ||
| h2 { font-size: var(--agnosticui-h2); } | ||
| h3 { font-size: var(--agnosticui-h3); } | ||
| h4 { font-size: var(--agnosticui-h4); } | ||
| h5 { font-size: var(--agnosticui-h5); } | ||
| h6 { font-size: var(--agnosticui-h6); } | ||
|
|
||
| /* For inline code blocks I use <i> */ | ||
| i { | ||
| background-color: var(--agnosticui-gray-extra-light); | ||
| border: 1px solid var(--agnosticui-gray-mid); | ||
| border-radius: 3px; | ||
| display: inline; | ||
| font-family: var(--agnosticui-font-family-mono); | ||
| font-style: normal; | ||
| color: var(--agnosticui-dark); | ||
| margin: 0 3px 0 1px; | ||
| padding: 1px 5px 2px 5px; | ||
| position: relative; | ||
| top: -1px; | ||
| } | ||
|
|
||
| .quoted::before { | ||
| /* Many sans fonts do not have smart or book quotes so prefer ones that do */ | ||
| font-family: Georgia, 'Times New Roman', Times, serif; | ||
| content: open-quote; | ||
| } | ||
|
|
||
| .quoted::after { | ||
| /* Many sans fonts do not have smart or book quotes so prefer ones that do */ | ||
| font-family: Georgia, 'Times New Roman', Times, serif; | ||
| content: close-quote; | ||
| } | ||
|
|
||
| .quoted { | ||
| /* Kind of cludgy, but this will preserve your main font within the smart quotes */ | ||
| font-family: inherit; | ||
| quotes: "“""”""‘""’"; | ||
| /** | ||
| * Space tokens | ||
| * | ||
| * These spacing tokens are, essentially, literals for use on a | ||
| * slightly modified 8pt grid, but also converge conveniently with | ||
| * some common type scale boundaries: | ||
| * 10, 12, 14, 18, 24, 36, 48, 64, 72 | ||
| * Note, that we do not prefix these with `agnostic-default-` as | ||
| * they're not meant to be overriden and mainly used: | ||
| * 1. internally within AgnosticUI | ||
| * 2. optionally by your app if you like these and want to | ||
| * import them for example. | ||
| * Feel free to use your spacing scale if you so desire. | ||
| */ | ||
| :root { | ||
| --Space-80: 80px; | ||
| --Space-72: 72px; | ||
| --Space-64: 64px; | ||
| --Space-56: 56px; | ||
| --Space-48: 48px; | ||
| --Space-40: 40px; | ||
| --Space-32: 32px; | ||
| --Space-24: 24px; | ||
| --Space-16: 16px; | ||
| --Space-14: 14px; | ||
| --Space-12: 12px; | ||
| --Space-10: 10px; | ||
| --Space-8: 8px; | ||
| --Space-6: 6px; | ||
| --Space-4: 4px; | ||
| } | ||
|
|
||
| /** | ||
| * Font size tokens | ||
| * These are perhaps a bit arbitrary but were chosen from both the | ||
| * default point sizes for type in OS X, and the classic typographic | ||
| * scale as provided by The Elements of Typographic Style which are: | ||
| * 9, 10, 11, 12, 13, 14, 18, 24, 36, 48, (alt. 60) 64, 72, 96, 144, 288 | ||
| * | ||
| * You're encouraged to change these setttings to whatever suits your app's needs | ||
| * best—these are just sensible defaults to get you started. | ||
| */ | ||
|
|
||
| p { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| div, | ||
| section { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| margin-bottom: var(--Space-40); | ||
| } | ||
|
|
||
| form { | ||
| width: 100%; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .row { | ||
| flex-direction: row; | ||
| align-items: center; | ||
| :root { | ||
| --agnosticui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --agnosticui-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; | ||
| --agnosticui-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | ||
| --agnosticui-line-height: 1.5; | ||
| --agnosticui-h1: 64px; | ||
| --agnosticui-h2: 48px; | ||
| --agnosticui-h3: 36px; | ||
| --agnosticui-h4: 24px; | ||
| --agnosticui-h5: 18px; | ||
| --agnosticui-h6: 14px; | ||
| --agnosticui-body: 16px; | ||
| --agnosticui-font-weight-bold: 600; | ||
| --agnosticui-font-weight-light: 300; | ||
| --agnosticui-font-color: #333333; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * Color tokens | ||
| */ | ||
|
|
||
| :root { | ||
| /* Please, please, please, at mimimum redefine primary and secondary ;) */ | ||
| --agnosticui-primary: Fuchsia; | ||
| --agnosticui-secondary: Teal; | ||
| --agnosticui-gray-extra-light: #f8f8f8; | ||
| --agnosticui-gray-light: #e9e9e9; | ||
| --agnosticui-gray-mid: #d8d8d8; | ||
| --agnosticui-gray-mid-dark: #cccccc; | ||
| --agnosticui-gray-dark: #aaaaaa; | ||
| --agnosticui-dark: #333333; | ||
| --agnosticui-light: #ffffff; | ||
| /* Caption, Sub-heading, etc., can be added here */ | ||
| } | ||
|
|
||
| /** | ||
| * Space tokens | ||
| * | ||
| * These spacing tokens are, essentially, literals for use on a | ||
| * slightly modified 8pt grid, but also converge conveniently with | ||
| * some common type scale boundaries: | ||
| * 10, 12, 14, 18, 24, 36, 48, 64, 72 | ||
| * Note, that we do not prefix these with `agnostic-default-` as | ||
| * they're not meant to be overriden and mainly used: | ||
| * 1. internally within AgnosticUI | ||
| * 2. optionally by your app if you like these and want to | ||
| * import them for example. | ||
| * Feel free to use your spacing scale if you so desire. | ||
| */ | ||
| :root { | ||
| --Space-80: 80px; | ||
| --Space-72: 72px; | ||
| --Space-64: 64px; | ||
| --Space-56: 56px; | ||
| --Space-48: 48px; | ||
| --Space-40: 40px; | ||
| --Space-32: 32px; | ||
| --Space-24: 24px; | ||
| --Space-16: 16px; | ||
| --Space-14: 14px; | ||
| --Space-12: 12px; | ||
| --Space-10: 10px; | ||
| --Space-8: 8px; | ||
| --Space-6: 6px; | ||
| --Space-4: 4px; | ||
| } | ||
|
|
||
| /** | ||
| * Font size tokens | ||
| * These are perhaps a bit arbitrary but were chosen from both the | ||
| * default point sizes for type in OS X, and the classic typographic | ||
| * scale as provided by The Elements of Typographic Style which are: | ||
| * 9, 10, 11, 12, 13, 14, 18, 24, 36, 48, (alt. 60) 64, 72, 96, 144, 288 | ||
| * | ||
| * You're encouraged to change these setttings to whatever suits your app's needs | ||
| * best—these are just sensible defaults to get you started. | ||
| */ | ||
|
|
||
| :root { | ||
| --agnosticui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | ||
| --agnosticui-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; | ||
| --agnosticui-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | ||
| --agnosticui-line-height: 1.5; | ||
| --agnosticui-h1: 64px; | ||
| --agnosticui-h2: 48px; | ||
| --agnosticui-h3: 36px; | ||
| --agnosticui-h4: 24px; | ||
| --agnosticui-h5: 18px; | ||
| --agnosticui-h6: 14px; | ||
| --agnosticui-body: 16px; | ||
| --agnosticui-font-weight-bold: 600; | ||
| --agnosticui-font-weight-light: 300; | ||
| --agnosticui-font-color: #333333; | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.