Azure
/
iot-ux-fluent-css
зеркало из https://github.com/Azure/iot-ux-fluent-css.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Add codegen tools to generate theming ts files (#35)

This commit is contained in:
Patricio Beltran 2020-03-20 15:02:01 -07:00 коммит произвёл GitHub
Родитель 7152cce365
Коммит a310d20aa7
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
22 изменённых файлов: 695 добавлений и 304 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
.gitignore поставляемый
Просмотреть файл

@ -332,5 +332,8 @@ ASALocalRun/
# Node modules
node_modules
# Package-lock
package-lock.json
# Built files
lib/
codegen/**/*.js
codegen/**/*.d.ts
codegen/**/*.js.map

10
.npmignore
Просмотреть файл

@ -5,4 +5,12 @@
/example/
# Configs
.config/
.config/
# Codegen
/codegen/
# no .tsx or .ts files, but include .d.ts
*.tsx
*.ts
!*.d.ts

15
.vscode/launch.json поставляемый Normal file
Просмотреть файл

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\codegen\\index.js",
"outFiles": ["${workspaceFolder}\\codegen\\**\\*.js"]
}
]
}

5
CHANGELOG.md
Просмотреть файл

@ -1,5 +1,10 @@
# CHANGELOG
## v8.0.1
## Changed
- Change non-scss files to use css
- Added codegen to generate theme-related typescript files
## v8.0.0
## Changed
- Deprecated mapping and made each theme to have its own palette that shares the same naming convention

98
README.md
Просмотреть файл

@ -5,21 +5,22 @@ The Azure IoT Fluent CSS Library is a minimal set of styles, themes and colors t
Usage
-----
Install as a package via npm with the command `npm install @microsoft/azure-iot-ux-fluent-css`.
In your custom.scss, you’ll import the library's source Sass files. You are free to pick and choose the parts that you need.
In your scss entry point you should import the normalize Sass file. This will import all the styles to the DOM and you should be able to use them freely in your css code.
```sass import
@import "~@microsoft/azure-iot-ux-fluent-css/src/colors";
@import "~@microsoft/azure-iot-ux-fluent-css/src/mixins";
```saas import
@import "~@microsoft/azure-iot-ux-fluent-css/src/normalize";
```
With that setup in place, you can begin to modify any of the Sass variables and maps in your custom.scss.
The whole library is mostly based on CSS custom properties, so once the normalize is imported you are free to use the variables on your code without having to import anything with Sass. The constants and mixins are exceptions to this, since these are defined using Sass.
Theming
-------
To theme your app, wrap the themed properties in @themify mixin.
To theme your app, just make sure your html element has the `theme` attribute set to the name of one of the supported themes (see [themes](`./src/themes/readme.md`) for more info) and use one of the defined themed variables.
```
.symbol {
@ -28,85 +29,34 @@ To theme your app, wrap the themed properties in @themify mixin.
left: 50%;
transform: translate(-50%, -50%);
padding: $gutter-small;
@include themify {
fill: themed('color-fill-tile-symbol');
stroke: themed('color-stroke-tile-symbol');
}
fill: var(--color-foreground-default);
stroke: var(--color-foreground-default);
}
```
The above SCSS will generate two separate theme variations.
```
.symbol {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 16px;
}
.theme-dark .symbol {
fill: #FFFFFF;
stroke: #FFFFFF;
}
.theme-light .symbol {
fill: #212121;
stroke: #212121;
}
```
This technique is relatively efficient, as only the necessary css markups that vary between the themes are generated.
Customization
-------------
It is easy to customize and build on top of the Common IoT Fluent CSS Library. The library includes the colors in a Sass map of key value pairs. All Sass maps include the !default flag and can be overridden and extended without modifying the library's source code.
### Modify map
It is easy to customize and build on top of the Common IoT Fluent CSS Library. The library includes the colors in CSS Custom properties, which means that you can just add your own declaration and it will either override or add up to the ones defined here.
To modify an existing color in our $themes map, simply redefine the key value pair in your custom Sass file:
We recommend adding all CSS Custom property declarations on the root file, since it's the technique supported by most browsers.
Note that if you want to add them to a specific theme you will ned to specify the theme attribute in the root element.
### Extend with a custom theme
To extend the supported themes, add your own theme declaration following the same pattern as the supported themes.
All variables have to be defined. Look at [themes](./src/themes/readme.md) for an explanation on what the different colors are for and how are they constructed.
```
$theme-dark: (
color-fill-tile-symbol: #ff4136
);
:root[theme="christmas"] {
--color-content-background-primary: #ff4136;
--color-content-background-secondary: #36FF53;
...
}
```
### Add to map
To add a new color to one of our existing themes, add the new key and value:
```
$theme-dark: (
color-fill-tile-symbol-new: #aa4136
);
```
### Remove from map
To remove colors from $themes, use map-remove:
```
$theme-dark: map-remove($theme-dark, "color-fill-tile-symbol");
```
### Extend $themes with a custom theme
To extend the $themes map with new themes, add the new map of colors:
```
$themes: (
christmas: (
color-fill-tile-symbol: #ff4136,
color-stroke-tile-symbol: #36FF53
)
);
```
See the `example` directory for sample consumption code. Use `npm run build` to see the sample css output.
Contributing
============

179
codegen/index.ts Normal file
Просмотреть файл

@ -0,0 +1,179 @@
import ThemesParser, { ThemeDefinition, ThemesData } from './themesParser';
import { OutputWritter } from './outputWritter';
import { join } from 'path';
const OUTPUT_PATH = './lib/';
interface Theme {
name: string;
definition: ThemeDefinition;
}
function validateThemesEqual(themeA: Theme, themeB: Theme) {
const aSections = Object.getOwnPropertyNames(themeA.definition);
const bSections = Object.getOwnPropertyNames(themeB.definition);
if (aSections.length !== bSections.length) {
throw `Theme '${themeA.name}' has ${aSections.length} sections (${aSections.join(', ')}) and theme '${themeB.name}' has ${bSections.length} sections (${bSections.join(', ')})`;
}
for (const section of aSections) {
const aSectionProperties = Object.getOwnPropertyNames(themeA.definition[section]);
const bSectionProperties = Object.getOwnPropertyNames(themeB.definition[section]);
if (aSectionProperties.length !== bSectionProperties.length) {
throw `Section '${section}' has different properties on theme '${themeA.name}' (${aSectionProperties.join(', ')}) and theme '${themeB.name}' (${bSectionProperties.join(', ')})`;
}
for (const property of aSectionProperties) {
if (!bSectionProperties.includes(property)) {
throw `Property '${property}' exists on section '${section}' for theme '${themeA.name}' but not for theme '${themeB.name}'`;
}
}
}
}
async function parseAndValidateThemeFiles() {
const parser = new ThemesParser();
const data = await parser.readThemeFiles();
const themes = Object.keys(data);
for (let i = 1; i < themes.length; i++) {
const themeA = themes[i - 1];
const themeB = themes[i];
validateThemesEqual({
name: themeA,
definition: data[themeA]
},
{
name: themeB,
definition: data[themeB]
})
}
return data;
}
async function generateTSFiles(themes: ThemesData) {
const utilsFile = new OutputWritter(join(OUTPUT_PATH, './colorUtils.ts'));
const defaultThemesFile = new OutputWritter(join(OUTPUT_PATH, './defaultThemes.ts'));
const typesFile = new OutputWritter(join(OUTPUT_PATH, './themeTypes.ts'));
const indexFile = new OutputWritter(join(OUTPUT_PATH, './index.ts'));
indexFile.writeLine(`export * from './colorUtils';`);
indexFile.writeLine(`export * from './themeTypes';`);
indexFile.writeLine(`export * from './defaultThemes';`);
indexFile.flush();
const themeDefs = Object.keys(themes);
typesFile.writeLine(`export type DefinedThemes = '${themeDefs.join('\' | \'')}'`);
typesFile.writeLine();
typesFile.writeLine('export interface ThemeColorDefinition { }');
typesFile.writeLine();
const allProperties = new Set<string>();
const sections: { [sectionName: string]: string } = {};
let typesDefined = false;
defaultThemesFile.writeLine('import { CustomTheme } from \'./themeTypes\';');
defaultThemesFile.writeLine();
defaultThemesFile.writeLine('export const DefaultThemes: {');
defaultThemesFile.writeLine('[theme: string]: CustomTheme', 1);
defaultThemesFile.writeLine('} = {');
for (const [themeName, themeSections] of Object.entries(themes)) {
defaultThemesFile.writeLine(`${themeName}: {`, 1);
for (const [sectionName, sectionVariables] of Object.entries(themeSections)) {
defaultThemesFile.writeLine(`${sectionName}: {`, 2);
if (!typesDefined) {
const sectionTypeName = `${sectionName.replace(/^./, g => g.toUpperCase())}Colors`;
sections[sectionName] = sectionTypeName;
typesFile.writeLine(`export interface ${sectionTypeName} extends ThemeColorDefinition {`);
}
for (const [property, value] of Object.entries(sectionVariables)) {
defaultThemesFile.writeLine(`'${property}': '${value}',`, 3);
if (!typesDefined) {
allProperties.add(property);
typesFile.writeLine(`'${property}': string;`, 1);
}
}
defaultThemesFile.writeLine('},', 2);
if (!typesDefined) {
typesFile.writeLine('}');
typesFile.writeLine();
}
}
defaultThemesFile.writeLine('},', 1);
if (!typesDefined) {
typesFile.writeLine('export interface CustomTheme {');
for (const [sectionName, sectionTypeName] of Object.entries(sections)) {
typesFile.writeLine(`${sectionName}?: ${sectionTypeName};`, 1);
}
typesFile.writeLine('}');
typesDefined = true;
}
}
defaultThemesFile.writeLine('};');
// ============= UTILS
utilsFile.writeLine('import { CustomTheme } from \'./themeTypes\';')
utilsFile.writeLine();
utilsFile.writeLine('export function createCustomThemeStylesheet(theme: CustomTheme) {');
utilsFile.writeLine('let embeddedStyles = \'\\n/** Custom theme **/\\n:root[theme="custom"] {\\n\\n\';', 1);
utilsFile.writeLine();
utilsFile.writeLine('for (const [themeSection, values] of Object.entries(theme)) {', 1);
utilsFile.writeLine('embeddedStyles += ` /* ${themeSection} */\\n`;', 2);
utilsFile.writeLine();
utilsFile.writeLine('for (const [propertyName, propertyValue] of Object.entries(values)) {', 2)
utilsFile.writeLine('embeddedStyles += ` ${propertyName}: ${propertyValue};\\n`;', 3);
utilsFile.writeLine('}', 2);
utilsFile.writeLine();
utilsFile.writeLine('embeddedStyles += \'\\n\';', 2);
utilsFile.writeLine('}', 1);
utilsFile.writeLine('return `<style type="text/css">${embeddedStyles}</style>`;', 1);
utilsFile.writeLine('}');
utilsFile.writeLine();
utilsFile.writeLine('export function clearThemeProperties(DOMElement: HTMLElement) {');
utilsFile.writeLine('for (const color of [', 1);
for (const property of allProperties) {
utilsFile.writeLine(`'${property}',`, 2);
}
utilsFile.writeLine(']) {', 1);
utilsFile.writeLine('DOMElement.style.removeProperty(color);', 2);
utilsFile.writeLine('}', 1);
utilsFile.writeLine('}');
defaultThemesFile.flush();
typesFile.flush();
utilsFile.flush();
}
async function main() {
try {
const themes = await parseAndValidateThemeFiles();
await generateTSFiles(themes);
return 0;
} catch (e) {
console.error(e);
return 1;
}
}
main();

70
codegen/outputWritter.ts Normal file
Просмотреть файл

@ -0,0 +1,70 @@
import { EOL } from "os";
import { promisify } from "util";
import { writeFile, mkdir } from "fs";
import { dirname } from "path";
const OUTPUT_INDENT = ' ';
export class OutputWritter {
private size: number;
private buffer: Buffer;
private head: number;
private outputFilePath: string;
constructor(filePath: string) {
this.size = 1024;
this.buffer = Buffer.alloc(this.size);
this.head = 0;
this.outputFilePath = filePath;
this.ensureSizeAvailable = this.ensureSizeAvailable.bind(this);
this.writeLine = this.writeLine.bind(this);
this.flush = this.flush.bind(this);
this.writeAutogenComment = this.writeAutogenComment.bind(this);
this.writeAutogenComment();
}
private ensureSizeAvailable(size: number) {
if (this.buffer.length - this.head < size) {
var oldBuffer = this.buffer;
var newSize = this.size + (this.size >> 1) + size;
this.buffer = Buffer.alloc(newSize);
oldBuffer.copy(this.buffer);
this.size = newSize;
}
}
public writeLine(line: string = '', indentationLevel: number = 0) {
if (indentationLevel) {
this.ensureSizeAvailable(4 * indentationLevel);
for (let i = 0; i < indentationLevel; i++) {
this.buffer.write(OUTPUT_INDENT, this.head);
this.head += 4;
}
}
const lineLength = Buffer.byteLength(line);
this.ensureSizeAvailable(lineLength);
this.buffer.write(line, this.head);
this.head += lineLength;
const eolLength = Buffer.byteLength(EOL);
this.ensureSizeAvailable(eolLength);
this.buffer.write(EOL, this.head);
this.head += eolLength;
}
private writeAutogenComment() {
this.writeLine('/**');
this.writeLine(' * THIS IS AN AUTOGENERATED FILE, YOU SHOULD NOT MODIFY IT MANUALLY');
this.writeLine(' * TO REGENERATE THIS FILE RUN `NPM RUN CODEGEN`.');
this.writeLine(' */');
}
public async flush() {
await promisify(mkdir)(dirname(this.outputFilePath), { recursive: true });
await promisify(writeFile)(this.outputFilePath, this.buffer.slice(0, this.head), { flag: 'w+', encoding: 'utf8' });
}
}

122
codegen/themesParser.ts Normal file
Просмотреть файл

@ -0,0 +1,122 @@
import { readdir, createReadStream } from 'fs';
import { promisify } from 'util';
import { join } from 'path';
import { createInterface } from 'readline';
const THEMES_DIR = join(process.cwd(), 'src/themes/');
const COLORS_PATH = join(process.cwd(), 'src/_colors.css');
const THEME_FILENAME_PATTERN = new RegExp(/_color\.(.*)\.css/);
const CSS_CUSTOM_PROPERTY_COLOR_MATCH = new RegExp(/--color-(.*)/, 'gi');
const CSS_CUSTOM_PROPERTY_DATA_COLOR_MATCH = new RegExp(/--data-color-.*/, 'gi');
const CSS_VAR_MATCH = new RegExp(/var\((.*)\)/, 'gi');
const CSS_SECTION_MATCH = new RegExp(/\/\*(.*)\*\//, 'gi');
const CSS_COMMENT_START_MATCH = new RegExp(/\/\*/, 'gi');
const CSS_COMMENT_END_MATCH = new RegExp(/\*\//, 'gi');
interface PropertySection {
[property: string]: string;
}
export interface ThemeDefinition {
[section: string]: PropertySection;
}
export interface ThemesData {
[theme: string]: ThemeDefinition;
}
export default class ThemesParser {
constructor() { }
public async readThemeFiles() {
let globalVariables = {};
const globalColors = await ThemesParser.parseCSSFile(COLORS_PATH); // Colors file has the global colors that are shared across themes
for (const globalSection of Object.values(globalColors)) {
globalVariables = {
...globalSection,
...globalVariables
};
}
const themesData: ThemesData = {};
const files = await promisify(readdir)(THEMES_DIR);
for (const filename of files) {
const filenameMatch = filename.match(THEME_FILENAME_PATTERN);
if (filenameMatch) {
const themeName = filenameMatch[filenameMatch.length - 1];
const themeFileData = await ThemesParser.parseCSSFile(join(THEMES_DIR, filenameMatch[0]), globalVariables);
themesData[themeName] = themeFileData;
}
}
return themesData;
}
/**
* Parses a css theme file.
*
* Theme files all attach to the following rules:
* - The file name indicates the theme name (_color.${themeName}.css),
* this same one matches the root attribute definition
* - Each section starts with a one line comment that indicates the section name
* \/\* Section Name \*\/
* - There's no variables outside a section.
* - Multi line comments are allowed, but the comment has to have the starting symbol in
* it's own line (\/\*) and the ending symbol also in it's own line (\*\/)
*
* @remarks This parsing method asumes these rules, it doesn't validate them.
*/
private static async parseCSSFile(filePath: string, globalVariables: PropertySection = {}): Promise<ThemeDefinition> {
const colorValues: ThemeDefinition = {};
const rl = createInterface({ input: createReadStream(filePath) });
let insideComment = false;
let currentSection = '';
for await (const line of rl) {
const sectionMatch = line.match(CSS_SECTION_MATCH);
if (!insideComment && sectionMatch) {
currentSection = sectionMatch[0]
.replace(/\/\*/, '') // Remove start of comment
.replace(/\*\//, '') // Remove end of comment
.trim()
.replace(/([-_ ][a-z])/gi, (g) => g.toUpperCase().replace(/[-_ ]/, ''))
.replace(/^./g, (g) => g.toLowerCase()); // Ensure cammelCase
colorValues[currentSection] = {};
} else if (insideComment && line.match(CSS_COMMENT_END_MATCH)) {
insideComment = false;
continue;
} else if (line.match(CSS_COMMENT_START_MATCH)) {
insideComment = true;
continue;
}
if (!insideComment && line) {
if (line.match(CSS_CUSTOM_PROPERTY_COLOR_MATCH) || line.match(CSS_CUSTOM_PROPERTY_DATA_COLOR_MATCH)) {
const withoutSemiColon = line.replace(';', '');
let [propertyName, value] = withoutSemiColon.split(':');
value = value.trim();
propertyName = propertyName.trim();
const varMatch = value.match(CSS_VAR_MATCH);
if (varMatch) {
const mappedValue = globalVariables[value.replace(/(var\()|(\)$)/g, '')]; // Remove var() and use only the var name
if (!mappedValue) {
throw `Variable does not exist: ${value}`;
}
colorValues[currentSection][propertyName] = mappedValue;
} else {
colorValues[currentSection][propertyName] = value;
}
}
}
}
return colorValues;
}
}

25
package-lock.json сгенерированный Normal file
Просмотреть файл

@ -0,0 +1,25 @@
{
"name": "@microsoft/azure-iot-ux-fluent-css",
"version": "8.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/node": {
"version": "13.9.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.9.1.tgz",
"integrity": "sha512-E6M6N0blf/jiZx8Q3nb0vNaswQeEyn0XlupO+xN6DtJ6r6IT4nXrTry7zhIfYvFCl3/8Cu6WIysmUBKiqV0bqQ==",
"dev": true
},
"normalize.css": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
},
"typescript": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
"dev": true
}
}
}

15
package.json
Просмотреть файл

@ -1,14 +1,27 @@
{
"name": "@microsoft/azure-iot-ux-fluent-css",
"description": "Azure IoT common styles library for CSS, Colors and Themes",
"version": "8.0.0",
"version": "8.0.1",
"license": "MIT",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"sideEffects": false,
"scripts": {
"build:codegen": "tsc -p ./tsconfig.json",
"build:generated": "tsc -p ./tsconfig.generated.json",
"codegen": "node ./codegen/index.js && npm run build:generated",
"prepublish": "npm run build:codegen && npm run codegen"
},
"engines": {
"node": "^8.0.0"
},
"dependencies": {
"normalize.css": "^8.0.1"
},
"devDependencies": {
"@types/node": "^13.9.1",
"typescript": "^3.8.3"
},
"repository": {
"type": "git",
"url": "https://github.com/Azure/iot-ux-fluent-css"

66
src/_colors.scss → src/_colors.css
Просмотреть файл

@ -1,33 +1,33 @@
/**
* Common Azure IoT Colors
*/
/**
* These are the colors that are always constant, no matter what the theme is.
*/
:root {
// Semi-transparent Colors
--color-dark-transparent-primary: rgba(0, 0, 0, 0.8);
--color-dark-transparent-half: rgba(0, 0, 0, 0.5);
--color-dark-transparent-third: rgba(0, 0, 0, 0.3);
--color-dark-transparent-tenth: rgba(0, 0, 0, 0.1);
--color-light-transparent-primary: rgba(255, 255, 255, 0.8);
--color-light-transparent-half: rgba(255, 255, 255, 0.5);
--color-light-transparent-third: rgba(255, 255, 255, 0.3);
--color-light-transparent-tenth: rgba(255, 255, 255, 0.1);
}
/**
* Import deprecated color theme mappings
*/
@import "./deprecated/color.palette";
@import "./deprecated/color.light";
@import "./deprecated/color.dark";
/**
* Import palettes for different supported themes
*/
@import "./themes/color.light";
@import "./themes/color.dark";
/**
* Common Azure IoT Colors
*/
/**
* These are the colors that are always constant, no matter what the theme is.
*/
:root {
/* Semi-transparent Colors */
--color-dark-transparent-primary: rgba(0, 0, 0, 0.8);
--color-dark-transparent-half: rgba(0, 0, 0, 0.5);
--color-dark-transparent-third: rgba(0, 0, 0, 0.3);
--color-dark-transparent-tenth: rgba(0, 0, 0, 0.1);
--color-light-transparent-primary: rgba(255, 255, 255, 0.8);
--color-light-transparent-half: rgba(255, 255, 255, 0.5);
--color-light-transparent-third: rgba(255, 255, 255, 0.3);
--color-light-transparent-tenth: rgba(255, 255, 255, 0.1);
}
/**
* Import deprecated color theme mappings
*/
@import "./deprecated/color.palette";
@import "./deprecated/color.light";
@import "./deprecated/color.dark";
/**
* Import palettes for different supported themes
*/
@import "./themes/color.light";
@import "./themes/color.dark";

0
src/_depth.scss → src/_depth.css
Просмотреть файл

11
src/_normalize.scss
Просмотреть файл

@ -156,14 +156,15 @@
a {
text-decoration: none;
color: var(--color-accent-hover);
color: var(--color-accent);
&:hover {
color: var(--color-accent-selected);
&:hover,
&:focus {
color: var(--color-accent-hover);
}
&:focus {
color: var(--color-accent);
&:active {
color: var(--color-accent-selected);
}
}

88
src/_typography.scss → src/_typography.css
Просмотреть файл

@ -1,44 +1,44 @@
/**
* Typography constants
*/
:root {
--font-size-hero: 4rem; //64px
--font-size-h1: 2rem; //32px
--font-size-h2: 1.25rem; //20px
--font-size-h3: 1rem; //16px
--font-size-h4: 0.875rem; //14px
--font-size-default: 0.875rem; //14px
--font-size-small: 0.75rem; //12px
--font-size-xsmall: 0.5rem; //8 px
--font-family-base: Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
--font-family-default: Segoe UI Regular, var(--font-family-base);
--font-family-light: Segoe UI Semilight, var(--font-family-base);
--font-family-semibold: Segoe UI Semibold, var(--font-family-base);
--font-family-din-regular: DIN-Regular, var(--font-family-default);
--font-weight-headings: 600; //semibold
--font-weight-hero: 300; //semilight
--line-height-hero: 5rem; //80px
--line-height-h1: 2.75rem; //44px
--line-height-h2: 1.75rem; //28px
--line-height-h3: 1.375rem; //22px
--line-height-h4: 1.25rem; //20px
--line-height-default: 1.25rem; //20px
--line-height-small: 1.125rem; //18px
--line-height-xsmall: 0.75rem; //12px
// Icons
--icon-font-family: "icons";
--icon-size-base: 1rem;
--icon-size-xsmall: var(--icon-size-base);
--icon-size-small: calc(1 * var(--icon-size-base));
--icon-size-medium: calc(2 * var(--icon-size-base));
--icon-size-large: calc(3 * var(--icon-size-base));
--icon-size-xlarge: calc(4 * var(--icon-size-base));
--icon-size-xxlarge: calc(5 * var(--icon-size-base));
}
/**
* Typography constants
*/
:root {
--font-size-hero: 4rem;
--font-size-h1: 2rem;
--font-size-h2: 1.25rem;
--font-size-h3: 1rem;
--font-size-h4: 0.875rem;
--font-size-default: 0.875rem;
--font-size-small: 0.75rem;
--font-size-xsmall: 0.5rem;
--font-family-base: Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
--font-family-default: Segoe UI Regular, var(--font-family-base);
--font-family-light: Segoe UI Semilight, var(--font-family-base);
--font-family-semibold: Segoe UI Semibold, var(--font-family-base);
--font-family-din-regular: DIN-Regular, var(--font-family-default);
--font-weight-headings: 600;
--font-weight-hero: 300;
--line-height-hero: 5rem;
--line-height-h1: 2.75rem;
--line-height-h2: 1.75rem;
--line-height-h3: 1.375rem;
--line-height-h4: 1.25rem;
--line-height-default: 1.25rem;
--line-height-small: 1.125rem;
--line-height-xsmall: 0.75rem;
/* Icons */
--icon-font-family: "icons";
--icon-size-base: 1rem;
--icon-size-xsmall: var(--icon-size-base);
--icon-size-small: calc(1 * var(--icon-size-base));
--icon-size-medium: calc(2 * var(--icon-size-base));
--icon-size-large: calc(3 * var(--icon-size-base));
--icon-size-xlarge: calc(4 * var(--icon-size-base));
--icon-size-xxlarge: calc(5 * var(--icon-size-base));
}

70
src/deprecated/_color.dark.scss → src/deprecated/_color.dark.css
Просмотреть файл

@ -3,7 +3,7 @@
*/
:root[theme='dark'] {
// Shell
/* Shell */
--color-bg-navbar: var(--color-grey-70);
--color-bg-navbar-hover: var(--color-grey-60);
--color-bg-navbar-selected: var(--color-grey-80);
@ -19,7 +19,7 @@
--color-border-navbar-focus: var(--color-blue-10);
--color-border-navbar-selected: var(--color-blue-10);
// Surfaces
/* Surfaces */
--color-bg-panel: var(--color-grey-80);
--color-bg-container: var(--color-grey-80);
--color-bg-dashboard: var(--color-grey-80);
@ -33,7 +33,7 @@
--shadow-popup-panel: -3px 3px 10px -3px var(--color-dark-transparent-primary);
--shadow-balloon: 0 8px 10px 0 var(--color-dark-transparent-tenth);
// Controls
/* Controls */
--color-bg-blastshield: var(--color-dark-transparent-primary);
--color-bg-balloon: var(--color-black);
--color-bg-form: transparent;
@ -48,15 +48,15 @@
--color-icon-thumbnail: var(--color-white);
--color-icon-tile: var(--color-grey-40);
// Interactions
/* Interactions */
--color-bg-hover: var(--color-grey-70);
--color-bg-selected: var(--color-grey-60);
// All Tiles
--color-border-tile: var(--color-grey-60); // 0.5px border
/* All Tiles */
--color-border-tile: var(--color-grey-60);
--color-border-tile-hover: var(--color-blue-10);
// Gallery Tiles
/* Gallery Tiles */
--color-bg-gallery-tile: var(--color-grey-90);
--color-bg-gallery-tile-default: var(--color-black);
--color-bg-gallery-tile-blue: var(--color-blue-40);
@ -65,12 +65,12 @@
--color-text-gallery-tile-banner: var(--color-white);
--color-border-card-banner: var(--color-grey-80);
// Dashboard Tiles
/* Dashboard Tiles */
--color-bg-dashboard: var(--color-grey-80);
--color-tile-symbol: var(--color-white);
--color-stroke-tile-symbol: var(--color-white);
// Input Fields
/* Input Fields */
--color-bg-input-rest: var(--color-grey-80);
--color-bg-input-hover: transparent;
--color-bg-input-selected: transparent;
@ -84,7 +84,7 @@
--color-text-regular: var(--color-white);
--color-text-placeholder: var(--color-text-30);
// Dropdowns
/* Dropdowns */
--color-dropdown-rest: var(--color-grey-90);
--color-dropdown-hover: var(--color-grey-50);
--color-dropdown-focus: var(--color-grey-60);
@ -94,7 +94,7 @@
--color-border-dropdown-focus: var(--color-blue-10);
--color-text-dropdown-disabled: var(--color-text-disabled);
// Radio button
/* Radio button */
--color-bg-radio-rest: transparent;
--color-bg-radio-hover: transparent;
--color-bg-radio-selected: transparent;
@ -105,11 +105,11 @@
--color-border-radio-selected: var(--color-white);
--color-border-radio-focused: var(--color-white);
--color-border-radio-disabled: var(--color-grey-60);
--color-center-radio-hover: var(--color-blue-10); //On hover center will reduce to 2px circle
--color-center-radio-selected: var(--color-white); //On selected center will return to normal size
--color-center-radio-hover: var(--color-blue-10);
--color-center-radio-selected: var(--color-white);
--color-center-radio-disabled: var(--color-text-30);
// Toggle
/* Toggle */
--color-bg-toggle-on-rest: var(--color-blue-10);
--color-bg-toggle-off-rest: var(--color-white);
--color-bg-toggle-on-hover: var(--color-blue-20);
@ -128,19 +128,19 @@
--color-border-toggle-off-disabled: var(--color-text-30);
--color-circle-toggle-on-rest: var(--color-white);
--color-circle-toggle-off-rest: var(--color-grey-40);
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
--color-circle-toggle-on-hover: var(--color-white);
--color-circle-toggle-off-hover: var(--color-grey-20);
--color-circle-toggle-on-focus: var(--color-white);
--color-circle-toggle-off-focus: var(--color-black);
--color-circle-toggle-on-disabled: var(--color-text-20);
--color-circle-toggle-off-disabled: var(--color-text-20);
// Checkbox
/* Checkbox */
--color-checkmark-checkbox: var(--color-white);
--color-border-checkbox-hover: var(--color-white);
--color-bg-checkbox-selected: transparent;
// General Borders
/* General Borders */
--color-border-rest: var(--color-text-20);
--color-border-hover: var(--color-white);
--color-border-focus: var(--color-blue-10);
@ -150,7 +150,7 @@
--color-border-controls: var(--color-white);
--color-outline: var(--color-blue-10);
// General Texts
/* General Texts */
--color-text-rest: var(--color-white);
--color-text-chevron: var(--color-white);
--color-text-error: var(--color-status-60);
@ -163,7 +163,7 @@
--color-text-active: var(--color-white);
--color-text-action-trigger: var(--color-text-rest);
// Buttons
/* Buttons */
--color-bg-btn-standard-rest: transparent;
--color-bg-btn-standard-hover: var(--color-grey-90);
--color-bg-btn-standard-focus: transparent;
@ -190,23 +190,23 @@
--color-text-btn-negative: var(--color-white);
--color-border-btn-negative: var(--color-status-30);
// Hyperlinks
/* Hyperlinks */
--color-hyperlink-rest: var(--color-blue-50);
--color-hyperlink-hover: var(--color-blue-30);
--color-hyperlink-focus: var(--color-blue-50);
--color-hyperlink-disabled: var(--color-text-30);
// Loading
/* Loading */
--color-bg-loader-panel: var(--color-grey-70);
--color-bg-loader-spinner: var(--color-blue-10);
--color-border-loader-global-segment: var(--color-blue-10);
--color-border-loader-global-track: var(--color-grey-40);
// Upload
/* Upload */
--color-bg-upload: var(--color-grey-20);
--color-border-upload: var(--color-grey-30);
// Tabs
/* Tabs */
--color-pivot-rest: var(--color-text-30);
--color-pivot-hover: var(--color-white);
--color-pivot-focus: var(--color-white);
@ -216,11 +216,11 @@
--color-text-pivot-rest: var(--color-grey-30);
--color-text-pivot-selected: var(--color-text-30);
// Charts
/* Charts */
--color-chart-xy-lines: var(--color-grey-60);
--color-chart-gap-stroke: var(--color-grey-60);
// Alerts
/* Alerts */
--color-bg-alert-info: var(--color-global-30);
--color-bg-alert-info-close-hover: transparent;
--color-text-alert-info: var(--color-blue-40);
@ -237,32 +237,20 @@
--color-bg-alert-success-close-hover: transparent;
--color-text-alert-success: var(--color-status-40);
// Color picker
/* Color picker */
--color-border-colorpicker-in: var(--color-white);
--color-border-colorpicker-out: var(--color-text-20);
// Calendar
/* Calendar */
--color-bg-calendar-btn-current: var(--color-blue-10);
--color-bg-calendar-btn-hover: var(--color-grey-20);
--color-bg-calendar-btn-focus: transparent;
--color-border-calendar-btn-focus: var(--color-text-20);
// Icon
/* Icon */
--color-icon-danger: var(--color-status-60);
// Data Colors
// @todo uncomment this when we update the color picker for fluent support
// --data-color-1: var(--DM-Azul);
// --data-color-2: var(--DM-Atlantic);
// --data-color-3: var(--DM-Mango);
// --data-color-4: var(--DM-Blush);
// --data-color-5: var(--DM-Pacific);
// --data-color-6: var(--DM-Grape);
// --data-color-7: var(--DM-Lilac);
// --data-color-8: var(--DM-Scarlet);
// --data-color-9: var(--DM-Sahara);
// --data-color-10: var(--DM-Leaf);
// --data-color-11: var(--DM-Empty-data);
/* Data Colors */
--data-color-1: var(--color-green-1);
--data-color-2: var(--color-green-2);
--data-color-3: var(--color-green-3);

70
src/deprecated/_color.light.scss → src/deprecated/_color.light.css
Просмотреть файл

@ -3,7 +3,7 @@
*/
:root, :root[theme='light'] {
// Shell
/* Shell */
--color-bg-navbar: var(--color-grey-20);
--color-bg-navbar-hover: var(--color-grey-30);
--color-bg-navbar-selected: var(--color-white);
@ -19,7 +19,7 @@
--color-border-navbar-focus: var(--color-blue-10);
--color-border-navbar-selected: var(--color-blue-10);
// Surfaces
/* Surfaces */
--color-bg-panel: var(--color-grey-10);
--color-bg-container: var(--color-white);
--color-bg-dashboard: var(--color-grey-10);
@ -33,7 +33,7 @@
--shadow-popup-panel: -3px 3px 10px -3px var(--color-dark-transparent-primary);
--shadow-balloon: 0 8px 10px 0 var(--color-dark-transparent-tenth);
// Controls
/* Controls */
--color-bg-blastshield: var(--color-dark-transparent-third);
--color-bg-balloon: var(--color-white);
--color-bg-form: var(--color-white);
@ -48,15 +48,15 @@
--color-icon-thumbnail: var(--color-white);
--color-icon-tile: var(--color-grey-40);
// Interactions
/* Interactions */
--color-bg-hover: var(--color-grey-20);
--color-bg-selected: var(--color-white);
// All Tiles
--color-border-tile: var(--color-grey-30); // 0.5px border
/* All Tiles */
--color-border-tile: var(--color-grey-30);
--color-border-tile-hover: var(--color-blue-10);
// Gallery Tiles
/* Gallery Tiles */
--color-bg-gallery-tile: var(--color-white);
--color-bg-gallery-tile-default: var(--color-white);
--color-bg-gallery-tile-blue: var(--color-blue-40);
@ -65,12 +65,12 @@
--color-text-gallery-tile-banner: var(--color-white);
--color-border-card-banner: transparent;
// Dashboard Tiles
/* Dashboard Tiles */
--color-bg-dashboard: var(--color-grey-10);
--color-tile-symbol: var(--color-text-10);
--color-stroke-tile-symbol: var(--color-text-10);
// Input Fields
/* Input Fields */
--color-bg-input-rest: var(--color-white);
--color-bg-input-hover: var(--color-white);
--color-bg-input-selected: var(--color-white);
@ -84,7 +84,7 @@
--color-text-regular: var(--color-text-10);
--color-text-placeholder: var(--color-text-20);
// Dropdowns
/* Dropdowns */
--color-dropdown-rest: var(--color-white);
--color-dropdown-hover: var(--color-grey-20);
--color-dropdown-focus: var(--color-grey-30);
@ -94,7 +94,7 @@
--color-border-dropdown-focus: var(--color-text-20);
--color-text-dropdown-disabled: var(--color-text-30);
// Radio button
/* Radio button */
--color-bg-radio-rest: var(--color-white);
--color-bg-radio-hover: var(--color-white);
--color-bg-radio-selected: var(--color-white);
@ -105,11 +105,11 @@
--color-border-radio-selected: var(--color-text-10);
--color-border-radio-focused: var(--color-text-10);
--color-border-radio-disabled: var(--color-text-30);
--color-center-radio-hover: var(--color-text-10); //On hover center will reduce to 2px circle
--color-center-radio-selected: var(--color-blue-20); //On selected center will return to normal size
--color-center-radio-hover: var(--color-text-10);
--color-center-radio-selected: var(--color-blue-20);
--color-center-radio-disabled: var(--color-grey-40);
// Toggle
/* Toggle */
--color-bg-toggle-on-rest: var(--color-blue-10);
--color-bg-toggle-off-rest: var(--color-white);
--color-bg-toggle-on-hover: var(--color-blue-20);
@ -128,19 +128,19 @@
--color-border-toggle-off-disabled: var(--color-text-10);
--color-circle-toggle-on-rest: var(--color-white);
--color-circle-toggle-off-rest: var(--color-text-20);
--color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
--color-circle-toggle-on-hover: var(--color-white);
--color-circle-toggle-off-hover: var(--color-black);
--color-circle-toggle-on-focus: var(--color-white);
--color-circle-toggle-off-focus: var(--color-text-20);
--color-circle-toggle-on-disabled: var(--color-grey-20);
--color-circle-toggle-off-disabled: var(--color-grey-40);
// Checkbox
/* Checkbox */
--color-checkmark-checkbox: var(--color-white);
--color-border-checkbox-hover: var(--color-text-10);
--color-bg-checkbox-selected: var(--color-blue-10);
// General Borders
/* General Borders */
--color-border-rest: var(--color-grey-40);
--color-border-hover: var(--color-text-10);
--color-border-focus: var(--color-blue-10);
@ -150,7 +150,7 @@
--color-border-controls: var(--color-grey-40);
--color-outline: var(--color-blue-10);
// General Texts
/*General Texts */
--color-text-rest: var(--color-text-10);
--color-text-chevron: var(--color-text-10);
--color-text-error: var(--color-status-30);
@ -163,7 +163,7 @@
--color-text-active: var(--color-white);
--color-text-action-trigger: var(--color-text-rest);
// Buttons
/* Buttons */
--color-bg-btn-standard-rest: var(--color-white);
--color-bg-btn-standard-hover: var(--color-grey-20);
--color-bg-btn-standard-focus: var(--color-white);
@ -190,23 +190,23 @@
--color-text-btn-negative: var(--color-white);
--color-border-btn-negative: var(--color-status-30);
// Hyperlinks
/* Hyperlinks */
--color-hyperlink-rest: var(--color-blue-20);
--color-hyperlink-hover: var(--color-blue-30);
--color-hyperlink-focus: var(--color-blue-10);
--color-hyperlink-disabled: var(--color-text-30);
// Loading
/* Loading */
--color-bg-loader-panel: var(--color-grey-20);
--color-bg-loader-spinner: var(--color-blue-10);
--color-border-loader-global-segment: var(--color-blue-10);
--color-border-loader-global-track: var(--color-grey-40);
// Upload
/* Upload */
--color-bg-upload: var(--color-grey-20);
--color-border-upload: var(--color-grey-30);
// Tabs
/* Tabs */
--color-pivot-rest: var(--color-text-20);
--color-pivot-hover: var(--color-text-10);
--color-pivot-focus: var(--color-text-10);
@ -216,11 +216,11 @@
--color-text-pivot-rest: var(--color-text-20);
--color-text-pivot-selected: var(--color-text-10);
// Charts
/* Charts */
--color-chart-xy-lines: var(--color-grey-30);
--color-chart-gap-stroke: var(--color-grey-30);
// Alerts
/* Alerts */
--color-bg-alert-info: var(--color-global-30);
--color-bg-alert-info-close-hover: transparent;
--color-text-alert-info: var(--color-blue-40);
@ -237,32 +237,20 @@
--color-bg-alert-success-close-hover: transparent;
--color-text-alert-success: var(--color-status-40);
// Color picker
/* Color picker */
--color-border-colorpicker-in: var(--color-white);
--color-border-colorpicker-out: var(--color-text-20);
// Calendar
/* Calendar */
--color-bg-calendar-btn-current: var(--color-blue-10);
--color-bg-calendar-btn-hover: var(--color-grey-20);
--color-bg-calendar-btn-focus: transparent;
--color-border-calendar-btn-focus: var(--color-text-20);
// Icon
/* Icon */
--color-icon-danger: var(--color-status-30);
// Data Colors
// @todo uncomment this when we update the color picker for fluent support
// --data-color-1: var(--LT-Azul);
// --data-color-2: var(--LT-Atlantic);
// --data-color-3: var(--LT-Mango);
// --data-color-4: var(--LT-Blush);
// --data-color-5: var(--LT-Pacific);
// --data-color-6: var(--LT-Grape);
// --data-color-7: var(--LT-Lilac);
// --data-color-8: var(--LT-Scarlet);
// --data-color-9: var(--LT-Sahara);
// --data-color-10: var(--LT-Leaf);
// --data-color-11: var(--LT-Empty-data);
/* Data Colors */
--data-color-1: var(--color-green-1);
--data-color-2: var(--color-green-7);
--data-color-3: var(--color-green-8);

15
src/deprecated/_color.palette.scss → src/deprecated/_color.palette.css
Просмотреть файл

@ -3,7 +3,7 @@
*/
:root {
// Main Palette Colors
/* Main Palette Colors */
--color-white: #FFFFFF;
--color-grey-10: #FAF9F8;
--color-grey-20: #F3F2F1;
@ -16,7 +16,7 @@
--color-grey-90: #0D0E0F;
--color-black: #000000;
// Accent colors
/* Accent colors */
--color-blue-10: #136BFB;
--color-blue-20: #0065D9;
--color-blue-30: #0053B3;
@ -25,7 +25,7 @@
--color-blue-60: #2F7FDB;
--color-blue-70: #8DAACB;
// Status
/* Status */
--color-status-10: #879092;
--color-status-20: #D58E00;
--color-status-30: #A50606;
@ -34,18 +34,18 @@
--color-status-60: #FF2828;
--color-status-70: #89FF98;
// Alert
/* Alert */
--color-global-10: #FFF4CE;
--color-global-20: #DFF6DD;
--color-global-30: #CEF1FF;
--color-global-40: #FDE7E9;
// Text
/* Text */
--color-text-10: #323130;
--color-text-20: #666666;
--color-text-30: #A6A6A6;
// Data Colors
/* Data Colors */
--LT-Azul: #118DFF;
--DM-Azul: #118DFF;
--LT-Atlantic: #3A4BC6;
@ -69,8 +69,7 @@
--LT-Empty-data: #868886;
--DM-Empty-data: #868886;
// @todo remove
// [Deprecated] Legacy colors
/* [Deprecated] Legacy colors */
--color-green-1: #01b8aa;
--color-green-2: #6be8dc;
--color-green-3: #59cec3;

50
src/themes/_color.dark.scss → src/themes/_color.dark.css
Просмотреть файл

@ -1,24 +1,23 @@
:root[theme="dark"] {
// ---- General
// Content background
/* Content background */
--color-content-background-primary: #292D30;
--color-content-background-secondary: #25282a; //#0d0e0f;
--color-content-background-secondary: #25282a;
// State
/* State */
--color-state-hover: #31373e;
--color-state-selected: #434343;
--color-state-selected-hover: #b3b0ad;
--color-state-disabled: #31373e;
// Accent
/* Accent */
--color-accent: #60aaff;
--color-accent-hover: #136bfb;
--color-accent-selected: #2f7fbd;
--color-accent-selected-hover: #8daacb;
--color-accent-foreground: #ffffff;
// Status
/* Status */
--color-status-success: #89ff98;
--color-status-success-foreground: #323130;
--color-status-informational: #879092;
@ -28,16 +27,14 @@
--color-status-danger: #ff2828;
--color-status-danger-foreground: #ffffff;
// Foreground
/* Foreground */
--color-foreground-default: #ffffff;
--color-foreground-complementary: #323130;
--color-foreground-inactive: #f2f2f2;
--color-foreground-disabled: #a6a6a6;
--color-foreground-secondary: #434343;
// ---- Component specific
// Masthead
/* Masthead */
--color-masthead-background: #3c3c41;
--color-masthead-foreground: #ffffff;
--color-masthead-button-hover: #666666;
@ -45,16 +42,15 @@
--color-search-background-hover: #ffffff;
--color-search-text-hover: #000000;
--color-search-text-placeholder: #666666;
--color-search-button-foreground: #ffffff;
// Main nav
/* Main nav */
--color-main-nav-background: #31373e;
--color-main-nav-background-hover: #434343;
--color-main-nav-background-selected: #292D30;
--color-main-nav-foreground-primary: #ffffff;
--color-main-nav-foreground-secondary: #434343;
// Alert
/* Alert */
--color-global-background-success: #dff6dd;
--color-global-foreground-success: #323130;
--color-global-background-informational: #cef1ff;
@ -64,19 +60,21 @@
--color-global-background-error: #fde7e9;
--color-global-foreground-error: #a50606;
// Data Colors
// @todo uncomment this when we update the color picker for fluent support
// --data-color-1: #118dff;
// --data-color-2: #4e4dff;
// --data-color-3: #ff9254;
// --data-color-4: #c83d95;
// --data-color-5: #00c7e2;
// --data-color-6: #9911b0;
// --data-color-7: #ffadc1;
// --data-color-8: #e04854;
// --data-color-9: #fcd641;
// --data-color-10: #1ce099;
// --data-color-empty: #868886;
/* Data */
/*
* @todo uncomment this when we update the color picker for fluent support
* --data-color-1: #118dff;
* --data-color-2: #4e4dff;
* --data-color-3: #ff9254;
* --data-color-4: #c83d95;
* --data-color-5: #00c7e2;
* --data-color-6: #9911b0;
* --data-color-7: #ffadc1;
* --data-color-8: #e04854;
* --data-color-9: #fcd641;
* --data-color-10: #1ce099;
* --data-color-empty: #868886;
*/
--data-color-1: #01b8aa;
--data-color-2: #6be8dc;
--data-color-3: #59cec3;

50
src/themes/_color.light.scss → src/themes/_color.light.css
Просмотреть файл

@ -1,25 +1,23 @@
:root,
:root[theme="light"] {
// ---- General
// Content background
/* Content background */
--color-content-background-primary: #ffffff;
--color-content-background-secondary: #faf9f8;
// State
/* State */
--color-state-hover: #f3f2f1;
--color-state-selected: #dadada;
--color-state-selected-hover: #c8c8c8;
--color-state-disabled: #f3f2f1;
// Accent
/* Accent */
--color-accent: #136bfb;
--color-accent-hover: #0065d9;
--color-accent-selected: #0053b3;
--color-accent-selected-hover: #00418c;
--color-accent-foreground: #ffffff;
// Status
/* Status */
--color-status-success: #3bb44a;
--color-status-success-foreground: #323130;
--color-status-informational: #879092;
@ -29,16 +27,14 @@
--color-status-danger: #a50606;
--color-status-danger-foreground: #ffffff;
// Foreground
/* Foreground */
--color-foreground-default: #323130;
--color-foreground-complementary: #ffffff;
--color-foreground-inactive: #666666;
--color-foreground-disabled: #a6a6a6;
--color-foreground-secondary: #dadada;
// ---- Component specific
// Masthead
/* Masthead */
--color-masthead-background: #3c3c41;
--color-masthead-foreground: #ffffff;
--color-masthead-button-hover: #666666;
@ -46,16 +42,15 @@
--color-search-background-hover: #ffffff;
--color-search-text-hover: #000000;
--color-search-text-placeholder: #666666;
--color-search-button-foreground: #ffffff;
// Main nav
/* Main nav */
--color-main-nav-background: #f3f2f1;
--color-main-nav-background-hover: #dadada;
--color-main-nav-background-selected: #ffffff;
--color-main-nav-foreground-primary: #323130;
--color-main-nav-foreground-secondary: #dadada;
// Alert
/* Alert */
--color-global-background-success: #dff6dd;
--color-global-foreground-success: #323130;
--color-global-background-informational: #cef1ff;
@ -65,20 +60,21 @@
--color-global-background-error: #fde7e9;
--color-global-foreground-error: #a50606;
// ---- Data
// @todo uncomment this when we update the color picker for fluent support
// --data-color-1: #118dff;
// --data-color-2: #3a4bc6;
// --data-color-3: #e66c37;
// --data-color-4: #c83d95;
// --data-color-5: #009eb3;
// --data-color-6: #750985;
// --data-color-7: #835dd0;
// --data-color-8: #e04854;
// --data-color-9: #bd8608;
// --data-color-10: #18a03c;
// --data-color-empty: #868886;
/* Data */
/*
* @todo uncomment this when we update the color picker for fluent support
* --data-color-1: #118dff;
* --data-color-2: #3a4bc6;
* --data-color-3: #e66c37;
* --data-color-4: #c83d95;
* --data-color-5: #009eb3;
* --data-color-6: #750985;
* --data-color-7: #835dd0;
* --data-color-8: #e04854;
* --data-color-9: #bd8608;
* --data-color-10: #18a03c;
* --data-color-empty: #868886;
*/
--data-color-1: #01b8aa;
--data-color-2: #99e3dd;
--data-color-3: #67d4cc;

1
src/themes/readme.md
Просмотреть файл

@ -54,7 +54,6 @@ The files have the following structure:
--color-search-background-hover
--color-search-text-hover
--color-search-text-placeholder
--color-search-button-foreground
// Main nav
--color-main-nav-background

10
tsconfig.generated.json Normal file
Просмотреть файл

@ -0,0 +1,10 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"sourceMap": false,
"rootDir": "lib"
},
"include": [
"lib/**/*"
]
}

22
tsconfig.json Normal file
Просмотреть файл

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"rootDir": "codegen",
"sourceMap": true,
"declaration": true,
"types": [
"@types/node"
]
},
"include": [
"codegen/**/*"
],
"exclude": [
"node_modules"
]
}