mirror of https://github.com/openedx/paragon.git
feat: update style dictionary to v4
This commit is contained in:
Peter Kulko
parent
0e16dbbff8
commit
cae4ee59da
|
|
@ -1,13 +1,13 @@
|
|||
#!/usr/bin/env node
|
||||
const chalk = require('chalk');
|
||||
const themeCommand = require('../lib/install-theme');
|
||||
const helpCommand = require('../lib/help');
|
||||
const buildTokensCommand = require('../lib/build-tokens');
|
||||
const replaceVariablesCommand = require('../lib/replace-variables');
|
||||
const buildScssCommand = require('../lib/build-scss');
|
||||
const { sendTrackInfo } = require('../lib/utils');
|
||||
const versionCommand = require('../lib/version');
|
||||
const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
|
||||
import chalk from 'chalk';
|
||||
import themeCommand from '../lib/install-theme.js';
|
||||
import helpCommand from '../lib/help.js';
|
||||
import buildTokensCommand from '../lib/build-tokens.js';
|
||||
import replaceVariablesCommand from '../lib/replace-variables.js';
|
||||
import buildScssCommand from '../lib/build-scss.js';
|
||||
import { sendTrackInfo } from '../lib/utils.js';
|
||||
import versionCommand from '../lib/version.js';
|
||||
import migrateToOpenEdxScopeCommand from '../lib/migrate-to-openedx-scope.js';
|
||||
|
||||
const commandAliases = {
|
||||
'-v': 'version',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
const fs = require('fs');
|
||||
const sass = require('sass');
|
||||
const postCSS = require('postcss');
|
||||
const postCSSCustomMedia = require('postcss-custom-media');
|
||||
const postCSSImport = require('postcss-import');
|
||||
const postCSSMinify = require('postcss-minify');
|
||||
const combineSelectors = require('postcss-combine-duplicated-selectors');
|
||||
const { pathToFileURL } = require('url');
|
||||
const path = require('path');
|
||||
const minimist = require('minimist');
|
||||
const chalk = require('chalk');
|
||||
const ora = require('ora');
|
||||
const { capitalize } = require('./utils');
|
||||
import fs from 'fs';
|
||||
import sass from 'sass';
|
||||
import postCSS from 'postcss';
|
||||
import postCSSCustomMedia from 'postcss-custom-media';
|
||||
import postCSSImport from 'postcss-import';
|
||||
import postCSSMinify from 'postcss-minify';
|
||||
import combineSelectors from 'postcss-combine-duplicated-selectors';
|
||||
import { pathToFileURL } from 'url';
|
||||
import path from 'path';
|
||||
import minimist from 'minimist';
|
||||
import chalk from 'chalk';
|
||||
import ora from 'ora';
|
||||
import { capitalize } from './utils.js';
|
||||
|
||||
const paragonThemeOutputFilename = 'theme-urls.json';
|
||||
|
||||
|
|
@ -185,4 +185,4 @@ function buildScssCommand(commandArgs) {
|
|||
});
|
||||
}
|
||||
|
||||
module.exports = buildScssCommand;
|
||||
export default buildScssCommand;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
const path = require('path');
|
||||
const minimist = require('minimist');
|
||||
const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
|
||||
const { createIndexCssFile } = require('../tokens/utils');
|
||||
import path from 'path';
|
||||
import minimist from 'minimist';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { StyleDictionary, colorTransform, createCustomCSSVariables } from '../tokens/style-dictionary.js';
|
||||
import { createIndexCssFile } from '../tokens/utils.js';
|
||||
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
|
||||
/**
|
||||
* Builds tokens for CSS styles from JSON source files.
|
||||
|
|
@ -29,11 +33,13 @@ async function buildTokensCommand(commandArgs) {
|
|||
'source-tokens-only': hasSourceTokensOnly,
|
||||
themes,
|
||||
} = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
|
||||
|
||||
// console.log('build-tokens.js - dirname =======>', dirname);
|
||||
// console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary);
|
||||
// console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary.hooks);
|
||||
const coreConfig = {
|
||||
include: [
|
||||
path.resolve(__dirname, '../tokens/src/core/**/*.json'),
|
||||
path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
|
||||
path.resolve(dirname, '../tokens/src/core/**/*.json'),
|
||||
path.resolve(dirname, '../tokens/src/core/**/*.toml'),
|
||||
],
|
||||
source: tokensSource
|
||||
? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
|
||||
|
|
@ -53,29 +59,32 @@ async function buildTokensCommand(commandArgs) {
|
|||
outputReferences: !hasSourceTokensOnly,
|
||||
},
|
||||
},
|
||||
{
|
||||
format: 'css/custom-media-breakpoints',
|
||||
destination: 'core/custom-media-breakpoints.css',
|
||||
filter: hasSourceTokensOnly ? 'isSource' : undefined,
|
||||
options: {
|
||||
outputReferences: !hasSourceTokensOnly,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// format: 'css/custom-media-breakpoints',
|
||||
// destination: 'core/custom-media-breakpoints.css',
|
||||
// filter: hasSourceTokensOnly ? 'isSource' : undefined,
|
||||
// options: {
|
||||
// outputReferences: !hasSourceTokensOnly,
|
||||
// },
|
||||
// },
|
||||
],
|
||||
transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
|
||||
transforms: StyleDictionary.hooks.transformGroups.css.filter(item => {
|
||||
// console.log('build-tokens.js - item =======>', item);
|
||||
return item !== 'size/rem';
|
||||
}).concat('color/sass-color-functions', 'str-replace'),
|
||||
options: {
|
||||
fileHeader: 'customFileHeader',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// console.log('build-tokens.js - coreConfig =======>', coreConfig);
|
||||
const getStyleDictionaryConfig = (themeVariant) => ({
|
||||
...coreConfig,
|
||||
include: [
|
||||
...coreConfig.include,
|
||||
path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`),
|
||||
path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`),
|
||||
path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.json`),
|
||||
path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`),
|
||||
],
|
||||
source: tokensSource
|
||||
? [
|
||||
|
|
@ -85,8 +94,11 @@ async function buildTokensCommand(commandArgs) {
|
|||
: [],
|
||||
transform: {
|
||||
'color/sass-color-functions': {
|
||||
...StyleDictionary.transform['color/sass-color-functions'],
|
||||
transformer: (token) => colorTransform(token, themeVariant),
|
||||
...StyleDictionary.hooks.transforms['color/sass-color-functions'],
|
||||
transform: (token) => {
|
||||
// console.log('build-tokens.js - color/sass-color-functions =======>', token);
|
||||
return colorTransform(token, themeVariant);
|
||||
},
|
||||
},
|
||||
},
|
||||
format: {
|
||||
|
|
@ -107,27 +119,28 @@ async function buildTokensCommand(commandArgs) {
|
|||
outputReferences: !hasSourceTokensOnly,
|
||||
},
|
||||
},
|
||||
{
|
||||
format: 'css/utility-classes',
|
||||
destination: `themes/${themeVariant}/utility-classes.css`,
|
||||
filter: hasSourceTokensOnly ? 'isSource' : undefined,
|
||||
options: {
|
||||
outputReferences: !hasSourceTokensOnly,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// format: 'css/utility-classes',
|
||||
// destination: `themes/${themeVariant}/utility-classes.css`,
|
||||
// filter: hasSourceTokensOnly ? 'isSource' : undefined,
|
||||
// options: {
|
||||
// outputReferences: !hasSourceTokensOnly,
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
StyleDictionary.extend(coreConfig).buildAllPlatforms();
|
||||
new StyleDictionary(coreConfig).buildAllPlatforms();
|
||||
createIndexCssFile({ buildDir, isTheme: false });
|
||||
|
||||
themes.forEach((themeVariant) => {
|
||||
themes.forEach(async (themeVariant) => {
|
||||
const config = getStyleDictionaryConfig(themeVariant);
|
||||
StyleDictionary.extend(config).buildAllPlatforms();
|
||||
// console.log('build-tokens.js - config =======>', config);
|
||||
new StyleDictionary(config).buildAllPlatforms();
|
||||
createIndexCssFile({ buildDir, isTheme: true, themeVariant });
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = buildTokensCommand;
|
||||
export default buildTokensCommand;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable no-console */
|
||||
const chalk = require('chalk');
|
||||
import chalk from 'chalk';
|
||||
|
||||
/**
|
||||
* Finds a command based on the given name in the commands object.
|
||||
|
|
@ -67,4 +67,4 @@ function helpCommand(commands, commandArgs) {
|
|||
});
|
||||
}
|
||||
|
||||
module.exports = helpCommand;
|
||||
export default helpCommand;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const inquirer = require('inquirer');
|
||||
const childProcess = require('child_process');
|
||||
import inquirer from 'inquirer';
|
||||
import childProcess from 'child_process';
|
||||
|
||||
/**
|
||||
* Prompts the user to enter the @edx/brand package they want to install.
|
||||
|
|
@ -45,4 +45,4 @@ async function themeCommand() {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = themeCommand;
|
||||
export default themeCommand;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import chalk from 'chalk';
|
||||
|
||||
const isValidFileExtension = (filename) => /(.jsx|.js|.tsx|.ts|.md|.rst|.scss)$/.test(filename.toLowerCase());
|
||||
|
||||
|
|
@ -59,4 +59,4 @@ function migrateToOpenEdxScopeCommand() {
|
|||
console.error(`${chalk.green.bold('Paragon migration to Openedx scope completed successfully.')}`); // eslint-disable-line no-console
|
||||
}
|
||||
|
||||
module.exports = migrateToOpenEdxScopeCommand;
|
||||
export default migrateToOpenEdxScopeCommand;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const minimist = require('minimist');
|
||||
const { transformInPath } = require('../tokens/utils');
|
||||
const mapSCSStoCSS = require('../tokens/map-scss-to-css');
|
||||
import minimist from 'minimist';
|
||||
import { transformInPath } from '../tokens/utils.js';
|
||||
import mapSCSStoCSS from '../tokens/map-scss-to-css.js';
|
||||
|
||||
/**
|
||||
* Replaces CSS or SASS variables in a file with their corresponding values.
|
||||
|
|
@ -35,4 +35,4 @@ async function replaceVariablesCommand(commandArgs) {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = replaceVariablesCommand;
|
||||
export default replaceVariablesCommand;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const axios = require('axios');
|
||||
import axios from 'axios';
|
||||
|
||||
/**
|
||||
* Sends request to the Netlify function to inform about specified event.
|
||||
|
|
@ -27,4 +27,4 @@ function capitalize(str) {
|
|||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
module.exports = { sendTrackInfo, capitalize };
|
||||
export { sendTrackInfo, capitalize };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/* eslint-disable no-console */
|
||||
const chalk = require('chalk');
|
||||
const { version } = require('../package.json');
|
||||
import chalk from 'chalk';
|
||||
import packageJson from '../package.json' assert { type: 'json' };
|
||||
|
||||
function versionCommand() {
|
||||
console.log(`Paragon CLI version: ${chalk.bold(version)}`);
|
||||
console.log(`Paragon CLI version: ${chalk.bold(packageJson.version)}`);
|
||||
}
|
||||
|
||||
module.exports = versionCommand;
|
||||
export default versionCommand;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "@openedx/paragon",
|
||||
"version": "20.18.1",
|
||||
"type": "module",
|
||||
"description": "Accessible, responsive UI component library based on Bootstrap.",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.js",
|
||||
|
|
@ -93,7 +94,7 @@
|
|||
"react-table": "^7.7.0",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"sass": "^1.58.3",
|
||||
"style-dictionary": "^3.7.1",
|
||||
"style-dictionary": "^4.0.1",
|
||||
"tabbable": "^5.3.3",
|
||||
"uncontrollable": "^7.2.1",
|
||||
"uuid": "^9.0.0"
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* IMPORTANT: This file is the result of assembling design tokens
|
||||
* Do not edit directly
|
||||
* Generated on Fri, 22 Sep 2023 08:20:17 GMT
|
||||
*/
|
||||
|
||||
@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);
|
||||
|
|
@ -1,9 +1,3 @@
|
|||
/**
|
||||
* IMPORTANT: This file is the result of assembling design tokens
|
||||
* Do not edit directly
|
||||
* Generated on Wed, 15 May 2024 12:30:36 GMT
|
||||
*/
|
||||
|
||||
:root {
|
||||
--pgn-theme-interval: 8%;
|
||||
--pgn-other-form-control-custom-file-content: Browse;
|
||||
|
|
@ -45,9 +39,9 @@
|
|||
--pgn-transition-btn: none;
|
||||
--pgn-transition-badge: none;
|
||||
--pgn-typography-line-height-micro: .938rem;
|
||||
--pgn-typography-line-height-sm: 1.5;
|
||||
--pgn-typography-line-height-lg: 1.5;
|
||||
--pgn-typography-line-height-base: 1.5556;
|
||||
--pgn-typography-line-height-sm: 1.5rem;
|
||||
--pgn-typography-line-height-lg: 1.5rem;
|
||||
--pgn-typography-line-height-base: 1.5556rem;
|
||||
--pgn-typography-font-weight-table-th: normal;
|
||||
--pgn-typography-font-weight-lead: inherit;
|
||||
--pgn-typography-font-weight-bolder: bolder;
|
||||
|
|
@ -70,26 +64,17 @@
|
|||
--pgn-typography-font-size-sm: .875rem;
|
||||
--pgn-typography-font-size-lg: 1.4063rem;
|
||||
--pgn-typography-font-size-base: 1.125rem;
|
||||
--pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
|
||||
--pgn-typography-font-family-serif: serif;
|
||||
--pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
|
||||
--pgn-typography-print-page-size: a3;
|
||||
--pgn-typography-display-mobile: 3.25rem;
|
||||
--pgn-typography-display-line-height-mobile: 3.5rem;
|
||||
--pgn-typography-display-line-height-base: 1;
|
||||
--pgn-typography-display-line-height-base: 1rem;
|
||||
--pgn-typography-display-4: 7.5rem;
|
||||
--pgn-typography-display-3: 5.625rem;
|
||||
--pgn-typography-display-2: 4.875rem;
|
||||
--pgn-typography-display-1: 3.75rem;
|
||||
--pgn-typography-toast-font-size: .875rem;
|
||||
--pgn-typography-spacer-line-height: 1px;
|
||||
--pgn-typography-pagination-line-height: 1.5rem;
|
||||
--pgn-typography-pagination-font-size-sm: .875rem;
|
||||
--pgn-typography-nav-link-text-decoration: none;
|
||||
--pgn-typography-nav-link-font-weight: 500;
|
||||
--pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
|
||||
--pgn-typography-menu-select-btn-link-text-decoration-line: underline;
|
||||
--pgn-typography-image-figure-caption-font-size: 90%;
|
||||
--pgn-typography-link-decoration-brand-inline-hover: underline;
|
||||
--pgn-typography-link-decoration-brand-inline-base: underline;
|
||||
--pgn-typography-link-decoration-brand-hover: underline;
|
||||
|
|
@ -102,14 +87,23 @@
|
|||
--pgn-typography-link-decoration-inline-base: underline;
|
||||
--pgn-typography-link-decoration-hover: underline;
|
||||
--pgn-typography-link-decoration-base: none;
|
||||
--pgn-typography-input-btn-line-height-sm: 1.4286;
|
||||
--pgn-typography-input-btn-line-height-base: 1.3333;
|
||||
--pgn-typography-input-btn-line-height-sm: 1.4286rem;
|
||||
--pgn-typography-input-btn-line-height-base: 1.3333rem;
|
||||
--pgn-typography-input-btn-font-size-lg: 1.325rem;
|
||||
--pgn-typography-input-btn-font-size-sm: .875rem;
|
||||
--pgn-typography-input-btn-font-size-base: 1.125rem;
|
||||
--pgn-typography-input-btn-font-family: inherit;
|
||||
--pgn-typography-headings-line-height: 1.25;
|
||||
--pgn-typography-headings-line-height: 1.25rem;
|
||||
--pgn-typography-headings-font-family: inherit;
|
||||
--pgn-typography-toast-font-size: .875rem;
|
||||
--pgn-typography-spacer-line-height: 1px;
|
||||
--pgn-typography-pagination-line-height: 1.5rem;
|
||||
--pgn-typography-pagination-font-size-sm: .875rem;
|
||||
--pgn-typography-nav-link-text-decoration: none;
|
||||
--pgn-typography-nav-link-font-weight: 500;
|
||||
--pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
|
||||
--pgn-typography-menu-select-btn-link-text-decoration-line: underline;
|
||||
--pgn-typography-image-figure-caption-font-size: 90%;
|
||||
--pgn-typography-dropdown-item-text-decoration: none;
|
||||
--pgn-typography-code-font-size: 87.5%;
|
||||
--pgn-typography-badge-font-size: 75%;
|
||||
|
|
@ -120,8 +114,22 @@
|
|||
--pgn-spacing-table-cell-padding-base: .75rem;
|
||||
--pgn-spacing-label-margin-bottom: .5rem;
|
||||
--pgn-spacing-spacer-base: 1rem;
|
||||
--pgn-spacing-spacer-0: 0;
|
||||
--pgn-spacing-tooltip-margin: 0;
|
||||
--pgn-spacing-spacer-0: 0rem;
|
||||
--pgn-spacing-mark-padding: .2em;
|
||||
--pgn-spacing-paragraph-margin-bottom: 1rem;
|
||||
--pgn-spacing-list-group-item-padding-x: 1.25rem;
|
||||
--pgn-spacing-list-group-item-padding-y: .75rem;
|
||||
--pgn-spacing-list-inline-padding: .5rem;
|
||||
--pgn-spacing-input-btn-padding-lg-x: 1.25rem;
|
||||
--pgn-spacing-input-btn-padding-lg-y: .6875rem;
|
||||
--pgn-spacing-input-btn-padding-sm-x: .75rem;
|
||||
--pgn-spacing-input-btn-padding-sm-y: .4375rem;
|
||||
--pgn-spacing-input-btn-padding-x: 1rem;
|
||||
--pgn-spacing-input-btn-padding-y: .5625rem;
|
||||
--pgn-spacing-headings-margin-bottom: .5rem;
|
||||
--pgn-spacing-caret-vertical-align: .255em;
|
||||
--pgn-spacing-caret-base: .255em;
|
||||
--pgn-spacing-tooltip-margin: 0rem;
|
||||
--pgn-spacing-tooltip-padding-x: .5rem;
|
||||
--pgn-spacing-tooltip-padding-y: .5rem;
|
||||
--pgn-spacing-toast-container-gutter-sm: .625rem;
|
||||
|
|
@ -132,9 +140,9 @@
|
|||
--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
|
||||
--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
|
||||
--pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
|
||||
--pgn-spacing-sticky-offset: 0;
|
||||
--pgn-spacing-stepper-header-step-list-margin: 0;
|
||||
--pgn-spacing-stepper-header-step-list-padding-x: 0;
|
||||
--pgn-spacing-sticky-offset: 0rem;
|
||||
--pgn-spacing-stepper-header-step-list-margin: 0rem;
|
||||
--pgn-spacing-stepper-header-step-list-padding-x: 0rem;
|
||||
--pgn-spacing-stepper-header-step-list-padding-y: .25rem;
|
||||
--pgn-spacing-stepper-header-step-padding: .25rem;
|
||||
--pgn-spacing-stepper-header-padding-y: .75rem;
|
||||
|
|
@ -166,20 +174,6 @@
|
|||
--pgn-spacing-modal-inner-padding-base: 1.5rem;
|
||||
--pgn-spacing-menu-item-icon-margin-left: .25em;
|
||||
--pgn-spacing-image-thumbnail-padding: .25rem;
|
||||
--pgn-spacing-mark-padding: .2em;
|
||||
--pgn-spacing-paragraph-margin-bottom: 1rem;
|
||||
--pgn-spacing-list-group-item-padding-x: 1.25rem;
|
||||
--pgn-spacing-list-group-item-padding-y: .75rem;
|
||||
--pgn-spacing-list-inline-padding: .5rem;
|
||||
--pgn-spacing-input-btn-padding-lg-x: 1.25rem;
|
||||
--pgn-spacing-input-btn-padding-lg-y: .6875rem;
|
||||
--pgn-spacing-input-btn-padding-sm-x: .75rem;
|
||||
--pgn-spacing-input-btn-padding-sm-y: .4375rem;
|
||||
--pgn-spacing-input-btn-padding-x: 1rem;
|
||||
--pgn-spacing-input-btn-padding-y: .5625rem;
|
||||
--pgn-spacing-headings-margin-bottom: .5rem;
|
||||
--pgn-spacing-caret-vertical-align: .255em;
|
||||
--pgn-spacing-caret-base: .255em;
|
||||
--pgn-spacing-form-control-select-icon-padding: .5625rem;
|
||||
--pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem;
|
||||
--pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem;
|
||||
|
|
@ -200,7 +194,7 @@
|
|||
--pgn-spacing-dropdown-padding-y-item: .25rem;
|
||||
--pgn-spacing-dropdown-padding-y-base: .5rem;
|
||||
--pgn-spacing-dropdown-padding-x-item: 1rem;
|
||||
--pgn-spacing-dropdown-padding-x-base: 0;
|
||||
--pgn-spacing-dropdown-padding-x-base: 0rem;
|
||||
--pgn-spacing-dropdown-spacer: .125rem;
|
||||
--pgn-spacing-data-table-footer-position: center;
|
||||
--pgn-spacing-data-table-padding-cell: .5rem .75rem;
|
||||
|
|
@ -237,7 +231,7 @@
|
|||
--pgn-spacing-card-loading-skeleton-spacer: .313rem;
|
||||
--pgn-spacing-card-footer-action-gap: .5rem;
|
||||
--pgn-spacing-card-columns-gap: 1.25rem;
|
||||
--pgn-spacing-card-columns-count: 3;
|
||||
--pgn-spacing-card-columns-count: 3rem;
|
||||
--pgn-spacing-card-margin-group: 12px;
|
||||
--pgn-spacing-card-spacer-y: .75rem;
|
||||
--pgn-spacing-card-spacer-x: 1.25rem;
|
||||
|
|
@ -264,7 +258,9 @@
|
|||
--pgn-size-breakpoint-lg: 992px;
|
||||
--pgn-size-breakpoint-md: 768px;
|
||||
--pgn-size-breakpoint-sm: 576px;
|
||||
--pgn-size-breakpoint-xs: 0;
|
||||
--pgn-size-breakpoint-xs: 0rem;
|
||||
--pgn-size-input-btn-focus-width: 1px;
|
||||
--pgn-size-caret-width: .3em;
|
||||
--pgn-size-tooltip-arrow-width: .8rem;
|
||||
--pgn-size-tooltip-arrow-height: .4rem;
|
||||
--pgn-size-tooltip-max-width: 200px;
|
||||
|
|
@ -274,18 +270,18 @@
|
|||
--pgn-size-tabs-notification-width: 1rem;
|
||||
--pgn-size-tabs-notification-height: 1rem;
|
||||
--pgn-size-stepper-step-bubble-error-shadow-width: 3px;
|
||||
--pgn-size-stepper-step-width-min: 0;
|
||||
--pgn-size-stepper-step-width-min: 0rem;
|
||||
--pgn-size-stepper-header-height-min: 5.13rem;
|
||||
--pgn-size-stack-gap: 0;
|
||||
--pgn-size-stack-gap: 0rem;
|
||||
--pgn-size-spinner-sm-border-width: .2em;
|
||||
--pgn-size-spinner-sm-width: 1rem;
|
||||
--pgn-size-spinner-base-border-width: .25em;
|
||||
--pgn-size-spinner-base-width: 2rem;
|
||||
--pgn-size-search-field-border-radius: 0;
|
||||
--pgn-size-search-field-border-radius: 0rem;
|
||||
--pgn-size-search-field-border-width-focus: .3125rem;
|
||||
--pgn-size-search-field-border-width-base: .0625rem;
|
||||
--pgn-size-progress-bar-threshold-circle: .5625rem;
|
||||
--pgn-size-progress-bar-border-radius: 0;
|
||||
--pgn-size-progress-bar-border-radius: 0rem;
|
||||
--pgn-size-progress-bar-border-width: 1px;
|
||||
--pgn-size-progress-bar-height-annotated: .3125rem;
|
||||
--pgn-size-progress-bar-height-base: 1rem;
|
||||
|
|
@ -297,7 +293,7 @@
|
|||
--pgn-size-popover-icon-width: 1rem;
|
||||
--pgn-size-popover-icon-height: 1rem;
|
||||
--pgn-size-popover-max-width: 480px;
|
||||
--pgn-size-pagination-focus-outline: 0;
|
||||
--pgn-size-pagination-focus-outline: 0rem;
|
||||
--pgn-size-pagination-toggle-border-sm: .25rem;
|
||||
--pgn-size-pagination-toggle-border-base: .3125rem;
|
||||
--pgn-size-pagination-reduced-dropdown-min-width: 6rem;
|
||||
|
|
@ -307,7 +303,7 @@
|
|||
--pgn-size-pagination-icon-height: 2.25rem;
|
||||
--pgn-size-pagination-icon-width: 2.25rem;
|
||||
--pgn-size-navbar-nav-scroll-max-height: 75vh;
|
||||
--pgn-size-nav-tabs-border-radius: 0;
|
||||
--pgn-size-nav-tabs-border-radius: 0rem;
|
||||
--pgn-size-nav-tabs-border-width: 2px;
|
||||
--pgn-size-nav-tabs-link-border-bottom-width: .188rem;
|
||||
--pgn-size-nav-pills-link-border-width: 1px;
|
||||
|
|
@ -328,8 +324,6 @@
|
|||
--pgn-size-icon-sm: 1.25rem;
|
||||
--pgn-size-icon-xs: 1rem;
|
||||
--pgn-size-icon-inline: .8em;
|
||||
--pgn-size-input-btn-focus-width: 1px;
|
||||
--pgn-size-caret-width: .3em;
|
||||
--pgn-size-form-border-radius-width: .125rem;
|
||||
--pgn-size-form-border-radius-check-focus: .0625rem;
|
||||
--pgn-size-form-autosuggest-border-width: .125rem;
|
||||
|
|
@ -337,10 +331,10 @@
|
|||
--pgn-size-form-autosuggest-icon-width: 2.4rem;
|
||||
--pgn-size-form-grid-gutter-width: 0.625rem;
|
||||
--pgn-size-form-control-border-radio-indicator-radius: 50%;
|
||||
--pgn-size-form-control-border-checkbox-indicator-radius: 0;
|
||||
--pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
|
||||
--pgn-size-form-control-icon-width: 2rem;
|
||||
--pgn-size-form-control-range-thumb-border-radius: 1rem;
|
||||
--pgn-size-form-control-range-thumb-border-base: 0;
|
||||
--pgn-size-form-control-range-thumb-border-base: 0rem;
|
||||
--pgn-size-form-control-range-thumb-width: 1rem;
|
||||
--pgn-size-form-control-range-track-border-radius: 1rem;
|
||||
--pgn-size-form-control-range-track-height: .5rem;
|
||||
|
|
@ -396,7 +390,7 @@
|
|||
--pgn-size-annotation-border-radius: .25rem;
|
||||
--pgn-size-annotation-max-width: 18.75rem;
|
||||
--pgn-size-annotation-arrow-border-width: .5rem;
|
||||
--pgn-size-alert-border-width: 0;
|
||||
--pgn-size-alert-border-width: 0rem;
|
||||
--pgn-size-rounded-pill: 50rem;
|
||||
--pgn-size-border-radius-sm: .25rem;
|
||||
--pgn-size-border-radius-lg: .425rem;
|
||||
|
|
@ -415,6 +409,11 @@
|
|||
--pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
|
||||
--pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
|
||||
--pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
|
||||
--pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
|
||||
--pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
|
||||
--pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
|
||||
|
|
@ -422,16 +421,22 @@
|
|||
--pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
|
||||
--pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
|
||||
--pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
|
||||
--pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
|
||||
--pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
|
||||
--pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
|
||||
--pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
|
||||
--pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
|
||||
--pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
|
||||
--pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
|
||||
--pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
|
||||
--pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
|
||||
--pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
|
||||
--pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
|
||||
--pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
|
||||
--pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
|
||||
--pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
|
||||
--pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
|
||||
--pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
|
||||
--pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
|
||||
--pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
|
||||
--pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
|
||||
--pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
|
||||
--pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
|
||||
--pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
|
||||
|
|
@ -443,6 +448,7 @@
|
|||
--pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
|
||||
--pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
|
||||
--pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
|
||||
--pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
|
||||
--pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
|
||||
--pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
|
||||
--pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
|
||||
|
|
@ -471,12 +477,25 @@
|
|||
--pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
|
||||
--pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
|
||||
--pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
|
||||
--pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
|
||||
--pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
|
||||
--pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
|
||||
--pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
|
||||
--pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
|
||||
--pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
|
||||
--pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
|
||||
--pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
|
||||
--pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
|
||||
--pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
|
||||
--pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
|
||||
--pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
|
||||
--pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
|
||||
--pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
|
||||
--pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
|
||||
--pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
|
||||
--pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
|
||||
--pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
|
||||
--pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
|
||||
--pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
|
||||
--pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
|
||||
--pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
|
||||
|
|
@ -488,8 +507,11 @@
|
|||
--pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
|
||||
--pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
|
||||
--pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
|
||||
--pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
|
||||
--pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
|
||||
--pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
|
||||
--pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
|
||||
--pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
|
||||
--pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
|
||||
--pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
|
||||
--pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
|
||||
|
|
@ -498,9 +520,16 @@
|
|||
--pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
|
||||
--pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
|
||||
--pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
|
||||
--pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
|
||||
--pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-list-group-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-input-btn-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
|
||||
--pgn-size-hr-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
|
||||
--pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
|
||||
--pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
|
||||
--pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
|
||||
--pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
|
||||
--pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
|
||||
|
|
@ -508,96 +537,61 @@
|
|||
--pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
|
||||
--pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
|
||||
--pgn-size-pagination-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
|
||||
--pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
|
||||
--pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
|
||||
--pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
|
||||
--pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
|
||||
--pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
|
||||
--pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
|
||||
--pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-list-group-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-input-btn-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
|
||||
--pgn-size-hr-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
|
||||
--pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
|
||||
--pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
|
||||
--pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
|
||||
--pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
|
||||
--pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
|
||||
--pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
|
||||
--pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
|
||||
--pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
|
||||
--pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
|
||||
--pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
|
||||
--pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
|
||||
--pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
|
||||
--pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
|
||||
--pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
|
||||
--pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
|
||||
--pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
|
||||
--pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
|
||||
--pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-dropdown-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
|
||||
--pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
|
||||
--pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-card-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
|
||||
--pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
|
||||
--pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
|
||||
--pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
|
||||
--pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
|
||||
--pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
|
||||
--pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
|
||||
--pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
|
||||
--pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
|
||||
--pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
|
||||
--pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
|
||||
--pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
|
||||
--pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
|
||||
--pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
|
||||
--pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
|
||||
--pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
|
||||
--pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
|
||||
--pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
|
||||
--pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
|
||||
--pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
|
||||
--pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
|
||||
--pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
|
||||
--pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
|
||||
--pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
|
||||
--pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
|
||||
--pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
|
||||
--pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
|
||||
--pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
|
||||
--pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
|
||||
--pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
|
||||
--pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
|
||||
--pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
|
||||
--pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
|
||||
--pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
|
||||
--pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
|
||||
--pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
|
||||
--pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
|
||||
--pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
|
||||
--pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
|
||||
--pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
|
||||
--pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
|
||||
--pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
|
||||
--pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-dropdown-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
|
||||
--pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
|
||||
--pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
|
||||
--pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
|
||||
--pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-card-border-width: var(--pgn-size-border-width);
|
||||
--pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-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-width: var(--pgn-size-input-btn-border-width);
|
||||
--pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
|
||||
--pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
|
||||
--pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
|
||||
--pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
|
||||
--pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
|
||||
--pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
|
||||
--pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
|
||||
--pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
|
||||
--pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
|
||||
--pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
|
||||
--pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
|
||||
--pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
|
||||
--pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
|
||||
--pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
|
||||
--pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
|
||||
--pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
|
||||
--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: var(--pgn-size-border-radius-sm);
|
||||
--pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
|
||||
--pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
|
||||
--pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
|
||||
--pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
|
||||
--pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -49,7 +49,7 @@ function borderColor(token) {
|
|||
`;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
bgVariant,
|
||||
textEmphasisVariant,
|
||||
borderColor,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils');
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { getSCSStoCSSMap, getFilesWithExtension } from './utils.js';
|
||||
|
||||
const BASE_PATH = path.resolve(__dirname, './src');
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
|
||||
const BASE_PATH = path.resolve(dirname, './src');
|
||||
const TOKEN_PREFIX = '--pgn';
|
||||
|
||||
function mapSCSStoCSS(sourcePath) {
|
||||
|
|
@ -21,4 +25,4 @@ function mapSCSStoCSS(sourcePath) {
|
|||
return SCSStoCSSMap;
|
||||
}
|
||||
|
||||
module.exports = mapSCSStoCSS;
|
||||
export default mapSCSStoCSS;
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const chroma = require('chroma-js');
|
||||
const chalk = require('chalk');
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import chroma from 'chroma-js';
|
||||
import chalk from 'chalk';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
|
||||
/**
|
||||
* Javascript version of bootstrap's color-yiq function. Decides whether to return light color variant or dark one
|
||||
|
|
@ -25,10 +29,10 @@ function colorYiq({
|
|||
threshold,
|
||||
themeVariant = 'light',
|
||||
}) {
|
||||
const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8');
|
||||
const defaultThresholdFile = fs.readFileSync(path.resolve(dirname, 'src/core/global', 'other.json'), 'utf8');
|
||||
const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold'];
|
||||
|
||||
const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8');
|
||||
const defaultColorsFile = fs.readFileSync(path.resolve(dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8');
|
||||
const {
|
||||
'yiq-text-dark': defaultDark,
|
||||
'yiq-text-light': defaultLight,
|
||||
|
|
@ -91,7 +95,7 @@ function colorYiq({
|
|||
const lighten = (color, hslPercent) => color.set('hsl.l', color.get('hsl.l') + hslPercent);
|
||||
const darken = (color, hslPercent) => lighten(color, -hslPercent);
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
colorYiq,
|
||||
darken,
|
||||
lighten,
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@
|
|||
"bg": {
|
||||
"base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" },
|
||||
"disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" },
|
||||
"size": { "value": "24px 24px", "type": "dimension", "source": "$custom-select-bg-size" }
|
||||
"size": { "value": "{color.gray.100}", "type": "dimension", "source": "$custom-select-bg-size" }
|
||||
},
|
||||
"border": {
|
||||
"base": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" },
|
||||
"primary": {
|
||||
"base": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"inverse": {
|
||||
"base": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
"focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
|
||||
},
|
||||
"active": {
|
||||
"base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
|
||||
"base": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
|
||||
},
|
||||
"inverse-active": {
|
||||
"base": { "value": "{color.icon-button.accent}", "type": "color" },
|
||||
|
|
@ -188,10 +188,10 @@
|
|||
"primary": {
|
||||
"base": { "value": "{color.primary.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.accent}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"inverse": {
|
||||
"base": { "value": "{color.icon-button.accent}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.accent}", "type": "color" }
|
||||
},
|
||||
"active": {
|
||||
|
|
@ -200,9 +200,9 @@
|
|||
"focus": { "value": "{color.icon-button.accent}", "type": "color" }
|
||||
},
|
||||
"inverse-active": {
|
||||
"base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
|
||||
"hover": { "value": "color.icon-button.text.primary.base", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
|
||||
"base": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"hover": { "value": "{color.icon-button.bg.base}", "type": "color" },
|
||||
"focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
|
||||
}
|
||||
},
|
||||
"secondary": {
|
||||
|
|
@ -375,7 +375,7 @@
|
|||
"box-shadow": {
|
||||
"primary": {
|
||||
"base": {
|
||||
"value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow"
|
||||
"value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}", "type": "shadow"
|
||||
},
|
||||
"inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
|
||||
"active": { "value": "none", "type": "shadow" },
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
/**
|
||||
* This module creates and exports custom StyleDictionary instance for Paragon.
|
||||
*/
|
||||
const toml = require('js-toml');
|
||||
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;
|
||||
import * as toml from 'js-toml';
|
||||
import StyleDictionary from 'style-dictionary';
|
||||
import chroma from 'chroma-js';
|
||||
import { fileHeader, sortByReference, usesReferences, getReferences } from 'style-dictionary/utils';
|
||||
import { colorYiq, darken, lighten } from './sass-helpers.js';
|
||||
import cssUtilities from './css-utilities.js';
|
||||
import { composeBreakpointName } from './utils.js';
|
||||
|
||||
const colorTransform = (token, theme) => {
|
||||
// console.log('style-dictionary.js - colorTransform =======>', token);
|
||||
|
||||
const {
|
||||
name: tokenName,
|
||||
value,
|
||||
original,
|
||||
modify = [],
|
||||
} = token;
|
||||
const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor'];
|
||||
const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none'];
|
||||
|
||||
if (reservedColorValues.includes(original.value)) {
|
||||
return original.value;
|
||||
}
|
||||
|
||||
console.log('value =======>', value);
|
||||
let color = chroma(value);
|
||||
|
||||
if (modify && modify.length > 0) {
|
||||
|
|
@ -70,18 +71,19 @@ const createCustomCSSVariables = ({
|
|||
themeVariant,
|
||||
}) => {
|
||||
const { dictionary, options, file } = formatterArgs;
|
||||
|
||||
// console.log('style-dictionary.js - createCustomCSSVariables =======>', dictionary, options, file);
|
||||
const outputTokens = themeVariant
|
||||
? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant))
|
||||
: dictionary.allTokens;
|
||||
|
||||
const variables = outputTokens.sort(sortByReference(dictionary)).map(token => {
|
||||
let { value } = token;
|
||||
|
||||
// console.log('style-dictionary.js - token =======>', token);
|
||||
const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences;
|
||||
|
||||
if (dictionary.usesReference(token.original.value) && outputReferencesForToken) {
|
||||
const refs = dictionary.getReferences(token.original.value);
|
||||
if (usesReferences(token.original.value) && outputReferencesForToken) {
|
||||
// console.log('style-dictionary.js - refs =======>', token.original.value);
|
||||
// console.log('style-dictionary.js - dictionary =======>', dictionary);
|
||||
const refs = getReferences(token.original.value, dictionary.tokens);
|
||||
refs.forEach(ref => {
|
||||
value = value.replace(ref.value, `var(--${ref.name})`);
|
||||
});
|
||||
|
|
@ -100,10 +102,12 @@ StyleDictionary.registerTransform({
|
|||
name: 'color/sass-color-functions',
|
||||
transitive: true,
|
||||
type: 'value',
|
||||
matcher(token) {
|
||||
return token.attributes.category === 'color' || token.value?.toString().startsWith('#');
|
||||
filter: (token) => token.attributes.category === 'color' || token.value?.toString().startsWith('#'),
|
||||
transform: (token) => {
|
||||
// console.log('style-dictionary.js - color/sass-color-functions =======>', token);
|
||||
return colorTransform(token);
|
||||
},
|
||||
transformer: colorTransform,
|
||||
// transformer: colorTransform,
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -113,14 +117,19 @@ StyleDictionary.registerTransform({
|
|||
name: 'str-replace',
|
||||
transitive: true,
|
||||
type: 'value',
|
||||
matcher(token) {
|
||||
return token.modify && token.modify[0].type === 'str-replace';
|
||||
},
|
||||
transformer(token) {
|
||||
filter: (token) => token.modify && token.modify[0].type === 'str-replace',
|
||||
transform: (token) => {
|
||||
console.log('style-dictionary.js - str-replace =======>', token);
|
||||
const { value, modify } = token;
|
||||
const { toReplace, replaceWith } = modify[0];
|
||||
return value.replaceAll(toReplace, replaceWith);
|
||||
},
|
||||
// transformer(token) {
|
||||
// console.log('style-dictionary.js - str-replace =======>', token);
|
||||
// const { value, modify } = token;
|
||||
// const { toReplace, replaceWith } = modify[0];
|
||||
// return value.replaceAll(toReplace, replaceWith);
|
||||
// },
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -128,7 +137,7 @@ StyleDictionary.registerTransform({
|
|||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/custom-variables',
|
||||
formatter: formatterArgs => createCustomCSSVariables({ formatterArgs }),
|
||||
format: formatterArgs => createCustomCSSVariables({ formatterArgs }),
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -138,64 +147,65 @@ StyleDictionary.registerFormat({
|
|||
* each key should have a list of valid values) and generates CSS classes with using functions defined in
|
||||
* 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string.
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/utility-classes',
|
||||
formatter({ dictionary, file }) {
|
||||
const { utilities } = dictionary.properties;
|
||||
// StyleDictionary.registerFormat({
|
||||
// name: 'css/utility-classes',
|
||||
// format: ({ dictionary, file }) => {
|
||||
// const { utilities } = dictionary.properties;
|
||||
|
||||
if (!utilities) {
|
||||
return '';
|
||||
}
|
||||
// if (!utilities) {
|
||||
// return '';
|
||||
// }
|
||||
|
||||
let utilityClasses = '';
|
||||
// let utilityClasses = '';
|
||||
|
||||
utilities.forEach(({ filters, utilityFunctionsToApply }) => {
|
||||
let tokens = dictionary.allTokens;
|
||||
// utilities.forEach(({ filters, utilityFunctionsToApply }) => {
|
||||
// let tokens = dictionary.allTokens;
|
||||
|
||||
Object.entries(filters).forEach(([attributeName, allowedValues]) => {
|
||||
tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName]));
|
||||
});
|
||||
// Object.entries(filters).forEach(([attributeName, allowedValues]) => {
|
||||
// tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName]));
|
||||
// });
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const token of tokens) {
|
||||
// Get action token by reference
|
||||
const ref = dictionary.getReferences(token.original.actions.default)[0];
|
||||
token.actions = { default: `var(--${ref.name})` };
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const funcName of utilityFunctionsToApply) {
|
||||
utilityClasses += cssUtilities[funcName](token);
|
||||
}
|
||||
}
|
||||
});
|
||||
// // eslint-disable-next-line no-restricted-syntax
|
||||
// for (const token of tokens) {
|
||||
// // Get action token by reference
|
||||
// const ref = dictionary.getReferences(token.original.actions.default)[0];
|
||||
// token.actions = { default: `var(--${ref.name})` };
|
||||
// // eslint-disable-next-line no-restricted-syntax
|
||||
// for (const funcName of utilityFunctionsToApply) {
|
||||
// utilityClasses += cssUtilities[funcName](token);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
return fileHeader({ file }) + utilityClasses;
|
||||
},
|
||||
});
|
||||
// return fileHeader({ file }) + utilityClasses;
|
||||
// },
|
||||
// });
|
||||
|
||||
/**
|
||||
* Formatter to generate CSS custom media queries for responsive breakpoints.
|
||||
* Gets input about existing tokens of the 'size' category,
|
||||
* 'breakpoints' subcategory, and generates a CSS custom media queries.
|
||||
*/
|
||||
StyleDictionary.registerFormat({
|
||||
name: 'css/custom-media-breakpoints',
|
||||
formatter({ dictionary, file }) {
|
||||
const { size: { breakpoint } } = dictionary.properties;
|
||||
// StyleDictionary.registerFormat({
|
||||
// name: 'css/custom-media-breakpoints',
|
||||
// format: ({ dictionary, file }) => {
|
||||
// console.log('style-dictionary.js - css/custom-media-breakpoints =======>', dictionary);
|
||||
// const { breakpoint } = dictionary.properties.size;
|
||||
|
||||
let customMediaVariables = '';
|
||||
const breakpoints = Object.values(breakpoint || {});
|
||||
// let customMediaVariables = '';
|
||||
// const breakpoints = Object.values(breakpoint || {});
|
||||
|
||||
for (let i = 0; i < breakpoints.length; i++) {
|
||||
const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
|
||||
customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
|
||||
if (nextBreakpoint) {
|
||||
customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
|
||||
}
|
||||
}
|
||||
// for (let i = 0; i < breakpoints.length; i++) {
|
||||
// const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
|
||||
// customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
|
||||
// if (nextBreakpoint) {
|
||||
// customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
|
||||
// }
|
||||
// }
|
||||
|
||||
return fileHeader({ file }) + customMediaVariables;
|
||||
},
|
||||
});
|
||||
// return fileHeader({ file }) + customMediaVariables;
|
||||
// },
|
||||
// });
|
||||
|
||||
/**
|
||||
* Custom file header for custom and built-in formatters.
|
||||
|
|
@ -214,15 +224,19 @@ StyleDictionary.registerFileHeader({
|
|||
*/
|
||||
StyleDictionary.registerFilter({
|
||||
name: 'isSource',
|
||||
matcher: token => token?.isSource === true,
|
||||
filter: token => {
|
||||
// console.log('style-dictionary.js - isSource =======>', token);
|
||||
return token?.isSource === true;
|
||||
},
|
||||
});
|
||||
|
||||
StyleDictionary.registerParser({
|
||||
name: 'toml-parser',
|
||||
pattern: /\.toml$/,
|
||||
parse: ({ contents }) => toml.load(contents),
|
||||
parser: ({ contents }) => toml.load(contents),
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
StyleDictionary,
|
||||
createCustomCSSVariables,
|
||||
colorTransform,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const fs = require('fs');
|
||||
const readline = require('readline');
|
||||
const path = require('path');
|
||||
import fs from 'fs';
|
||||
import readline from 'readline';
|
||||
import path from 'path';
|
||||
|
||||
function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) {
|
||||
const content = fs.statSync(location);
|
||||
|
|
@ -201,7 +201,7 @@ function composeBreakpointName(breakpointName, format) {
|
|||
return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
createIndexCssFile,
|
||||
getFilesWithExtension,
|
||||
getSCSStoCSSMap,
|
||||
|
|
|
|||
Loading…
Reference in New Issue