-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
… css prop. names, library sources also updated to use these new names; E.g., '--x-theme-...' is now '--x-color...', '--x-{name}-hsl-...' is now '-x-{name}-color-...', and '--x-...-hsla-...' is now '--x-...-color-with-alpha-...'.- Loading branch information
Showing
12 changed files
with
484 additions
and
563 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| html, body { | ||
| --x-font-family: Arial, Verdana, Helvetica, Sans-Serif; | ||
| --x-focus-ring-color: currentColor; | ||
|
|
||
| margin: 0; | ||
| padding: 0; | ||
| font: normal 1rem var(--x-font-family); | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| html, body { | ||
| --x-focus-ring-color: Field; | ||
|
|
||
| background: var(--x-neutral-hsl-1); | ||
| color: var(--x-neutral-hsl-5); | ||
| } | ||
| } | ||
| html, body { | ||
| --x-font-family: Arial, Verdana, Helvetica, Sans-Serif; | ||
| --x-focus-ring-color: currentColor; | ||
|
|
||
| margin: 0; | ||
| padding: 0; | ||
| font: normal 1rem var(--x-font-family); | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| html, body { | ||
| --x-focus-ring-color: Field; | ||
|
|
||
| background: var(--x-neutral-color-1); | ||
| color: var(--x-neutral-color-5); | ||
| } | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
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,4 +1,4 @@ | ||
| :root { | ||
| --x-input-border-width: var(--x-2px); | ||
| --x-input-border-color: var(--x-theme-4, var(--x-neutral-hsl-4)); | ||
| } | ||
| :root { | ||
| --x-input-border-width: var(--x-2px); | ||
| --x-input-border-color: var(--x-color-4, var(--x-neutral-color-4)); | ||
| } |
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,16 +1,16 @@ | ||
| :root { | ||
| --x-highlight-color: var(--x-theme-5, var(--x-neutral-hsl-5)); | ||
|
|
||
| --x-focus-ring-width: 0.09375rem; /*1.5px;*/ | ||
| --x-focus-ring-color: currentColor; | ||
|
|
||
| --x-border-radius: var(--x-3px); | ||
| --x-border-width: var(--x-1px); | ||
|
|
||
| --x-input-speed: 0.13s; | ||
| --x-input-border-width: var(--x-1px); | ||
| --x-input-highlight-color: var(--x-highlight-color); | ||
| --x-input-text-color: FieldText /*ButtonText*/; | ||
| --x-input-bg-color: Field; | ||
| --x-input-border-color: ButtonBorder; | ||
| } | ||
| :root { | ||
| --x-highlight-color: var(--x-color-5, var(--x-neutral-color-5)); | ||
|
|
||
| --x-focus-ring-width: 0.09375rem; /*1.5px;*/ | ||
| --x-focus-ring-color: currentColor; | ||
|
|
||
| --x-border-radius: var(--x-3px); | ||
| --x-border-width: var(--x-1px); | ||
|
|
||
| --x-input-speed: 0.13s; | ||
| --x-input-border-width: var(--x-1px); | ||
| --x-input-highlight-color: var(--x-highlight-color); | ||
| --x-input-text-color: FieldText /*ButtonText*/; | ||
| --x-input-bg-color: Field; | ||
| --x-input-border-color: ButtonBorder; | ||
| } |
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,84 +1,89 @@ | ||
| /** | ||
| * colors.js | ||
| * | ||
| * Outputs the library's css color properties - Colors are made up of `hsl`, and `hsla` generated colors. | ||
| */ | ||
| import fs from 'fs'; | ||
| import * as path from "path"; | ||
| import url from "url"; | ||
| import {xThemes} from "../../constants.js"; | ||
|
|
||
| const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); | ||
|
|
||
| const {log, error} = console, | ||
| primary = ['primary', 224], | ||
| secondary = ['secondary', 300], | ||
| success = ['success', 120], | ||
| info = ['info', 180], | ||
| warning = ['warning', 30], | ||
| danger = ['danger', 0], | ||
| neutral = ['neutral', 0], | ||
| fileName = 'index.css', | ||
|
|
||
| genColorsCss = (outputFilePath = path.join(__dirname, '../../css/modules/colors/', fileName)) => { | ||
| const lightnessNums = '.'.repeat(10) | ||
| .split('') | ||
| .map((_, i) => ((i + 1) * 10) - (i === 9 ? 1 : 0)), | ||
|
|
||
| themeColors = [ | ||
| primary, secondary, success, info, | ||
| warning, danger, neutral | ||
| ] | ||
| .flatMap(([c, cN], j) => | ||
| lightnessNums.flatMap((lightness, i) => ([ | ||
| ` --x-${c}-hsl-${i + 1}: ` + | ||
| `hsl(${cN}, ${c === 'neutral' ? 0 : 72}%, ${lightness}%);`, | ||
| ` --x-${c}-hsla-${i + 1}: ` + | ||
| `hsla(${cN}, ${c === 'neutral' ? 0 : 89}%, ${lightness}%, ${1 - ((lightness - 1) * .01)});`, | ||
| ])) | ||
| ).join('\n'), | ||
|
|
||
| themeVars = Object.keys(xThemes).reduce((agg, k, j) => { | ||
| const themeName = xThemes[k]; | ||
|
|
||
| // @todo deprecate --x-theme-{\d} and --x-theme-hsla-{\d} in | ||
| // exchange for the '--x-theme-color-*'. | ||
| return agg + ` | ||
| .x-theme-${themeName} { | ||
| ${lightnessNums.flatMap((_, i) => ([ | ||
| ` --x-theme-${i + 1}: var(--x-${themeName}-hsl-${i + 1});`, | ||
| ` --x-theme-color-${i + 1}: var(--x-${themeName}-hsl-${i + 1});`, | ||
| ` --x-theme-hsla-${i + 1}: var(--x-${themeName}-hsla-${i + 1});`, | ||
| ` --x-theme-color-hsla-${i + 1}: var(--x-${themeName}-hsla-${i + 1});` | ||
| ])) | ||
| .join('\n')} | ||
| }\n` | ||
| }, ''); | ||
|
|
||
| return fs.promises.writeFile(outputFilePath, `/** | ||
| * colors.css | ||
| * | ||
| * The library's base colors (tentative). | ||
| */ | ||
| :root { | ||
| ${themeColors} | ||
| --x-field: Field; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| :root { | ||
| --x-field: var(--x-neutral-hsl-1); | ||
| } | ||
| } | ||
| ${themeVars.trim()} | ||
| `) | ||
| .then( | ||
| () => log(`file ${fileName} written successfully`), | ||
| error | ||
| ); | ||
| }; | ||
|
|
||
| export {genColorsCss}; | ||
| /** | ||
| * colors.js | ||
| * | ||
| * Outputs the library's css color properties - Colors are made up of `hsl`, and `hsla` generated colors. | ||
| */ | ||
| import fs from 'fs'; | ||
| import * as path from "path"; | ||
| import url from "url"; | ||
| import {xThemes} from "../../constants.js"; | ||
|
|
||
| const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); | ||
|
|
||
| const {log, error} = console, | ||
| primary = ['primary', 256, 72], | ||
| secondary = ['secondary', 300, 72], | ||
| success = ['success', 120, 72], | ||
| info = ['info', 180, 72], | ||
| warning = ['warning', 30, 72], | ||
| danger = ['danger', 0, 72], | ||
| neutral = ['neutral', 0, 0], | ||
| fileName = 'index.css', | ||
|
|
||
| genColorsCss = (outputFilePath = path.join(__dirname, '../../css/modules/colors/', fileName)) => { | ||
| const lightnessNums = new Array(9) | ||
| .fill(null, 0, 9) | ||
| .map((_, i) => ((i + 1) * 10) - (i === 9 ? 1 : 0)) | ||
| .concat([95, 99, 100]), | ||
|
|
||
| themeColors = [ | ||
| primary, secondary, success, info, | ||
| warning, danger, neutral | ||
| ] | ||
| .flatMap(([name, degree, saturation], j) => | ||
| lightnessNums.flatMap((lightness, i) => { | ||
| const alpha = 1 - ((lightness - 1) * .01); | ||
|
|
||
| return [ | ||
| ` --x-${name}-color-${i + 1}: ` + | ||
| `hsl(${degree}, ${saturation}%, ${lightness}%);`, | ||
| ` --x-${name}-color-with-alpha-${i + 1}: ` + | ||
| `hsla(${degree}, ${saturation}%, ${lightness}%, ${alpha});`, | ||
| ]; | ||
| }) | ||
| ).join('\n'), | ||
|
|
||
| themeVars = Object.keys(xThemes).reduce((agg, k, j) => { | ||
| const themeName = xThemes[k]; | ||
|
|
||
| // @todo deprecate --x-theme-{\d} and --x-theme-hsla-{\d} in | ||
| // exchange for the '--x-theme-color-*'. | ||
| return agg + ` | ||
| .x-theme-${themeName} { | ||
| ${lightnessNums.flatMap((lightness, i) => { | ||
| return [ | ||
| ` --x-color-${i + 1}: var(--x-${themeName}-color-${i + 1});`, | ||
| ` --x-color-with-alpha-${i + 1}: var(--x-${themeName}-color-with-alpha-${i + 1});`, | ||
| ]; | ||
| }) | ||
| .join('\n')} | ||
| }\n` | ||
| }, ''); | ||
|
|
||
| return fs.promises.writeFile(outputFilePath, `/** | ||
| * colors.css | ||
| * | ||
| * The library's base colors (tentative). | ||
| */ | ||
| :root { | ||
| ${themeColors} | ||
| --x-field: Field; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| :root { | ||
| --x-field: var(--x-neutral-hsl-1); | ||
| } | ||
| } | ||
| ${themeVars.trim()} | ||
| `) | ||
| .then( | ||
| () => log(`file ${fileName} written successfully`), | ||
| error | ||
| ); | ||
| }; | ||
|
|
||
| export {genColorsCss}; |
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
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