New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@biom3/design-tokens

Package Overview
Dependencies
Maintainers
2
Versions
51
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@biom3/design-tokens - npm Package Compare versions

Comparing version

0.0.8-alpha
to
0.0.9-alpha

.eslintrc.js
css/text.global.css
src/baseTokens.ts
src/uiTokens.ts

405

dist/index.d.ts

@@ -71,7 +71,7 @@ type Colors = {

type Shadows = {
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};

@@ -91,2 +91,4 @@ type Gradient = {

size: {
600: string;
500: string;
400: string;

@@ -100,2 +102,3 @@ 300: string;

size: {
600: string;
500: string;

@@ -161,3 +164,3 @@ 400: string;

};
"2xSmall": {
'2xSmall': {
regular: {

@@ -208,3 +211,3 @@ fontSize: string;

heading: {
"2xLarge": {
'2xLarge': {
regular: {

@@ -347,2 +350,86 @@ fontSize: string;

};
type PrimaryButtonSizeTokens = {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
cutawaySize: string;
borderSize: string;
};
hover: {
cutawaySize: string;
borderSize: string;
};
press: {
cutawaySize: string;
borderSize: string;
};
disabled: {
cutawaySize: string;
borderSize: string;
};
};
};
type PrimaryButtonUiTokens = {
coloring: {
backgroundColor: string;
textColor: string;
borderColor: string;
};
size: {
small: PrimaryButtonSizeTokens;
medium: PrimaryButtonSizeTokens;
large: PrimaryButtonSizeTokens;
};
};
type SecondaryButtonSizeTokens = {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
hover: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
press: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
disabled: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
};
};
type SecondaryButtonUiTokens = {
coloring: {
borderColor: string;
textColor: string;
};
size: {
small: SecondaryButtonSizeTokens;
medium: SecondaryButtonSizeTokens;
large: SecondaryButtonSizeTokens;
};
};
type PrimaryButtconSizeTokens = {
iconSize: string;
buttonSize: string;
};
type ButtconUiTokens = {
small: PrimaryButtconSizeTokens;
medium: PrimaryButtconSizeTokens;
large: PrimaryButtconSizeTokens;
};
type UiTokens = {

@@ -352,4 +439,7 @@ text: UiText;

elevation: Elevation;
primaryButton: PrimaryButtonUiTokens;
buttcon: ButtconUiTokens;
secondaryButton: SecondaryButtonUiTokens;
};
type Enumerate<N extends number, Acc extends number[] = []> = Acc["length"] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc["length"]]>;
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

@@ -361,3 +451,3 @@ type ProcessedUiTokens = UiTokens & {

borderRadius: {
[key in `x${IntRange<1, 51>}`]: `${string}px`;
[key in `x${IntRange<1, 26>}`]: `${string}px`;
};

@@ -373,9 +463,2 @@ };

type Union<L extends unknown | undefined, R extends unknown | undefined> = L extends undefined ? R extends undefined ? undefined : R : R extends undefined ? L : L | R;
/**
* LeafPaths
* Get all the paths to the leaves of an object
* @example
* type Keys = LeafPaths<{ a: { b: { c: string } }>
* // 'a.b.c'
*/
type LeafPaths<T extends GenericObject, Prev extends Primitive | undefined = undefined, Path extends Primitive | undefined = undefined> = {

@@ -390,10 +473,15 @@ [K in keyof T]: T[K] extends GenericObject ? LeafPaths<T[K], Union<Prev, Path>, Join<Path, K>> : Join<Path, K>;

type ValidSxValues = LooseAutocomplete<DesignTokensPaths>;
type BiomeTheme = {
base: ProcessedBaseTokens;
ui: ProcessedUiTokens;
};
type ProcessedBaseTokens = BaseTokens & {
breakpointAsArray: number[];
};
declare const fontFaceStylesImport = "@import url(\"https://design-system.immutable.com/hosted-for-ds/css/im-fonts-v4.css\");";
declare const base: BaseTokens;
declare const onDarkBase: BaseTokens;
declare const ui: UiTokens;
declare const designTokens: {
base: BaseTokens;
ui: UiTokens;
};

@@ -406,4 +494,279 @@ type Leaf = string | undefined | {

declare function smartPickTokenValue<T extends unknown>(themeProps: DesignTokens, selector: string): T;
declare function calculateSpacingAndBorderRadiusTokens(uiTokens: UiTokens, baseTokens: BaseTokens): ProcessedUiTokens;
declare function calculateSpacingAndBorderRadiusTokens(uiTokens: ProcessedUiTokens, baseTokens: BaseTokens): {
text: UiText;
icon: UiIcon;
elevation: Elevation;
primaryButton: {
coloring: {
backgroundColor: string;
textColor: string;
borderColor: string;
};
size: {
small: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
cutawaySize: string;
borderSize: string;
};
hover: {
cutawaySize: string;
borderSize: string;
};
press: {
cutawaySize: string;
borderSize: string;
};
disabled: {
cutawaySize: string;
borderSize: string;
};
};
};
medium: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
cutawaySize: string;
borderSize: string;
};
hover: {
cutawaySize: string;
borderSize: string;
};
press: {
cutawaySize: string;
borderSize: string;
};
disabled: {
cutawaySize: string;
borderSize: string;
};
};
};
large: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
cutawaySize: string;
borderSize: string;
};
hover: {
cutawaySize: string;
borderSize: string;
};
press: {
cutawaySize: string;
borderSize: string;
};
disabled: {
cutawaySize: string;
borderSize: string;
};
};
};
};
};
buttcon: {
small: {
iconSize: string;
buttonSize: string;
};
medium: {
iconSize: string;
buttonSize: string;
};
large: {
iconSize: string;
buttonSize: string;
};
};
secondaryButton: {
coloring: {
borderColor: string;
textColor: string;
};
size: {
small: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
hover: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
press: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
disabled: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
};
};
medium: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
hover: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
press: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
disabled: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
};
};
large: {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
hover: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
press: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
disabled: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
};
};
};
};
spacing: {
x1: `${string}px`;
x2: `${string}px`;
x3: `${string}px`;
x4: `${string}px`;
x5: `${string}px`;
x6: `${string}px`;
x7: `${string}px`;
x8: `${string}px`;
x9: `${string}px`;
x10: `${string}px`;
x11: `${string}px`;
x12: `${string}px`;
x13: `${string}px`;
x14: `${string}px`;
x15: `${string}px`;
x16: `${string}px`;
x17: `${string}px`;
x18: `${string}px`;
x19: `${string}px`;
x20: `${string}px`;
x21: `${string}px`;
x22: `${string}px`;
x23: `${string}px`;
x24: `${string}px`;
x25: `${string}px`;
x26: `${string}px`;
x27: `${string}px`;
x28: `${string}px`;
x29: `${string}px`;
x30: `${string}px`;
x31: `${string}px`;
x32: `${string}px`;
x33: `${string}px`;
x34: `${string}px`;
x35: `${string}px`;
x36: `${string}px`;
x37: `${string}px`;
x38: `${string}px`;
x39: `${string}px`;
x40: `${string}px`;
x41: `${string}px`;
x42: `${string}px`;
x43: `${string}px`;
x44: `${string}px`;
x45: `${string}px`;
x46: `${string}px`;
x47: `${string}px`;
x48: `${string}px`;
x49: `${string}px`;
x50: `${string}px`;
};
borderRadius: {
x1: `${string}px`;
x2: `${string}px`;
x3: `${string}px`;
x4: `${string}px`;
x5: `${string}px`;
x6: `${string}px`;
x7: `${string}px`;
x8: `${string}px`;
x9: `${string}px`;
x10: `${string}px`;
x11: `${string}px`;
x12: `${string}px`;
x13: `${string}px`;
x14: `${string}px`;
x15: `${string}px`;
x16: `${string}px`;
x17: `${string}px`;
x18: `${string}px`;
x19: `${string}px`;
x20: `${string}px`;
x21: `${string}px`;
x22: `${string}px`;
x23: `${string}px`;
x24: `${string}px`;
x25: `${string}px`;
};
};
export { BaseTokens, BorderRadius, Borders, Breakpoints, Colors, DesignTokens, DesignTokensPaths, Elevation, Font, Gradient, Gradients, Icons, IntRange, LeafPaths, ProcessedUiTokens, Shadows, Spacing, Text, UiIcon, UiText, UiTokens, ValidSxValues, base, calculateSpacingAndBorderRadiusTokens, designTokens, onDarkBase, base as onLightBase, pickTokenValue, recursivelyResolveTokens, smartPickTokenValue, ui };
declare const designTokens: {
base: BaseTokens;
ui: UiTokens;
};
export { BaseTokens, BiomeTheme, BorderRadius, Borders, Breakpoints, Colors, DesignTokens, DesignTokensPaths, Elevation, Font, Gradient, Gradients, Icons, IntRange, LeafPaths, ProcessedBaseTokens, ProcessedUiTokens, Shadows, Spacing, Text, UiIcon, UiText, UiTokens, ValidSxValues, base, calculateSpacingAndBorderRadiusTokens, designTokens, fontFaceStylesImport, onDarkBase, base as onLightBase, pickTokenValue, recursivelyResolveTokens, smartPickTokenValue, ui };

231

dist/index.js

@@ -46,2 +46,3 @@ "use strict";

designTokens: () => designTokens,
fontFaceStylesImport: () => fontFaceStylesImport,
onDarkBase: () => onDarkBase,

@@ -127,7 +128,7 @@ onLightBase: () => base,

var onDarkShadows = {
500: "0px 8px 16px 8px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.32)",
600: "0px 8px 12px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
700: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
800: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px 2px rgba(0, 0, 0, 0.32)",
900: "0px 2px 4px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32);"
100: "0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",
200: "0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",
300: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",
400: "0px 6px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
500: "0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"
};

@@ -266,7 +267,7 @@ var onDarkGradients = {

var onLightShadows = {
500: "0px 8px 16px 8px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.32)",
600: "0px 8px 12px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
700: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
800: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32)",
900: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32)"
100: "0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)",
200: "0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)",
300: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)",
400: "0px 8px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
500: "0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)"
};

@@ -331,5 +332,8 @@ var onLightGradients = {

// src/tokens.ts
// src/baseTokens.ts
var fontFaceStylesImport = `@import url("https://design-system.immutable.com/hosted-for-ds/css/im-fonts-v4.css");`;
var border = {
size: {
600: "6px",
500: "5px",
400: "4px",

@@ -343,2 +347,3 @@ 300: "3px",

size: {
600: "64px",
500: "48px",

@@ -563,2 +568,4 @@ 400: "32px",

};
// src/uiTokens.ts
var ui = {

@@ -601,8 +608,191 @@ icon: {

}
},
primaryButton: {
coloring: {
backgroundColor: "base.color.brand.1",
textColor: "base.color.brand.2",
borderColor: "base.color.brand.1"
},
size: {
small: {
buttonHeight: "ui.spacing.x8",
horizontalPadding: "ui.spacing.x4",
fontSize: "base.text.body.xSmall.regular.fontSize",
borderRadius: "ui.borderRadius.x10",
interaction: {
inactive: {
cutawaySize: "",
borderSize: ""
},
hover: {
cutawaySize: "base.border.size.100",
borderSize: "base.border.size.200"
},
press: {
cutawaySize: "base.border.size.200",
borderSize: "base.border.size.200"
},
disabled: {
cutawaySize: "",
borderSize: ""
}
}
},
medium: {
buttonHeight: "ui.spacing.x12",
horizontalPadding: "ui.spacing.x7",
fontSize: "base.text.body.medium.regular.fontSize",
borderRadius: "ui.borderRadius.x15",
interaction: {
inactive: {
cutawaySize: "",
borderSize: ""
},
hover: {
cutawaySize: "base.border.size.200",
borderSize: "base.border.size.300"
},
press: {
cutawaySize: "base.border.size.300",
borderSize: "base.border.size.300"
},
disabled: {
cutawaySize: "",
borderSize: ""
}
}
},
large: {
buttonHeight: "ui.spacing.x20",
horizontalPadding: "ui.spacing.x8",
fontSize: "base.text.body.medium.regular.fontSize",
borderRadius: "ui.borderRadius.x20",
interaction: {
inactive: {
cutawaySize: "",
borderSize: ""
},
hover: {
borderSize: "base.border.size.400",
cutawaySize: "base.border.size.200"
},
press: {
cutawaySize: "base.border.size.400",
borderSize: "base.border.size.400"
},
disabled: {
cutawaySize: "",
borderSize: ""
}
}
}
}
},
secondaryButton: {
coloring: {
borderColor: "base.color.brand.1",
textColor: "base.color.brand.1"
},
size: {
small: {
buttonHeight: "ui.spacing.x8",
horizontalPadding: "ui.spacing.x4",
fontSize: "base.text.body.xSmall.regular.fontSize",
borderRadius: "ui.borderRadius.x15",
interaction: {
inactive: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
},
hover: {
innerBorderSize: "base.border.size.100",
cutawaySize: "base.border.size.100",
outerBorderSize: "base.border.size.200"
},
press: {
innerBorderSize: "base.border.size.200",
cutawaySize: "base.border.size.100",
outerBorderSize: "base.border.size.200"
},
disabled: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
}
}
},
medium: {
buttonHeight: "ui.spacing.x12",
horizontalPadding: "ui.spacing.x7",
fontSize: "base.text.body.medium.regular.fontSize",
borderRadius: "ui.borderRadius.x20",
interaction: {
inactive: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
},
hover: {
innerBorderSize: "base.border.size.100",
cutawaySize: "base.border.size.200",
outerBorderSize: "base.border.size.300"
},
press: {
innerBorderSize: "base.border.size.300",
cutawaySize: "base.border.size.200",
outerBorderSize: "base.border.size.300"
},
disabled: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
}
}
},
large: {
buttonHeight: "ui.spacing.x20",
horizontalPadding: "ui.spacing.x8",
fontSize: "base.text.body.medium.regular.fontSize",
borderRadius: "ui.borderRadius.x25",
interaction: {
inactive: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
},
hover: {
innerBorderSize: "base.border.size.200",
cutawaySize: "base.border.size.200",
outerBorderSize: "base.border.size.400"
},
press: {
innerBorderSize: "base.border.size.400",
cutawaySize: "base.border.size.200",
outerBorderSize: "base.border.size.400"
},
disabled: {
innerBorderSize: "",
cutawaySize: "",
outerBorderSize: "base.border.size.200"
}
}
}
}
},
buttcon: {
small: {
iconSize: "base.icon.size.200",
buttonSize: "ui.spacing.x8"
},
medium: {
iconSize: "base.icon.size.300",
buttonSize: "ui.spacing.x12"
},
large: {
iconSize: "base.icon.size.300",
buttonSize: "ui.spacing.x20"
}
}
};
var designTokens = {
base,
ui
};

@@ -636,6 +826,6 @@ // src/utils.ts

const processedTokens = __spreadValues({}, uiTokens);
Array.from(Array(50)).forEach((x, i) => {
Array.from(Array(50)).forEach((_, i) => {
processedTokens.spacing[`x${i + 1}`] = `${(i + 1) * parseInt(baseTokens.spacingUnit, 10)}px`;
});
Array.from(Array(25)).forEach((x, i) => {
Array.from(Array(25)).forEach((_, i) => {
processedTokens.borderRadius[`x${i + 1}`] = `${(i + 1) * parseInt(baseTokens.borderRadiusUnit, 10)}px`;

@@ -645,2 +835,8 @@ });

}
// src/index.ts
var designTokens = {
base,
ui
};
// Annotate the CommonJS export names for ESM import in node:

@@ -651,2 +847,3 @@ 0 && (module.exports = {

designTokens,
fontFaceStylesImport,
onDarkBase,

@@ -653,0 +850,0 @@ onLightBase,

3

package.json
{
"name": "@biom3/design-tokens",
"version": "0.0.8-alpha",
"version": "0.0.9-alpha",
"main": "./dist/index.js",

@@ -14,3 +14,2 @@ "types": "./dist/index.d.ts",

"typecheck": "tsc --noEmit",
"dev": "npm run build",
"prebuild": "rm -rf ./dist",

@@ -17,0 +16,0 @@ "build": "npm run build:tokens; npm run build:ts",

12

readme.md

@@ -21,3 +21,3 @@ ![BIOM3-textured-logos-10](https://user-images.githubusercontent.com/1452237/205792502-2b1e7d79-6f0e-42dc-a455-dbcb5506cef1.png)

```typescript
import { base, ui } from "@biom3/design-tokens";
import { base, ui } from '@biom3/design-tokens';
```

@@ -30,3 +30,3 @@

```typescript
import { onDarkBase, ui, pickTokenValue } from "@biom3/design-tokens";
import { onDarkBase, ui, pickTokenValue } from '@biom3/design-tokens';
const DemoComponent = () => (

@@ -49,5 +49,5 @@ <div

```typescript
import "@biom3/design-tokens/css/base-onLight.global.css"; // contains all "onLight" BASE design-tokens
import '@biom3/design-tokens/css/base-onLight.global.css'; // contains all "onLight" BASE design-tokens
// import "@biom3/design-tokens/css/base-onDark.global.css"; // contains all "onDark" BASE design-tokens
import "@biom3/design-tokens/css/ui.global.css"; // contains all UI design-tokens
import '@biom3/design-tokens/css/ui.global.css'; // contains all UI design-tokens
```

@@ -65,4 +65,4 @@

/* some custom styles.css file: */
@import "@biom3/design-tokens/css/base-onDark.global.css";
@import "@biom3/design-tokens/css/ui.global.css";
@import '@biom3/design-tokens/css/base-onDark.global.css';
@import '@biom3/design-tokens/css/ui.global.css';

@@ -69,0 +69,0 @@ /* your bespoke item class styles */

77

src/dumpTokens.ts

@@ -1,31 +0,34 @@

import * as tokens from "./tokens";
import { DesignTokens, ProcessedUiTokens, UiTokens } from "./types";
import { ProcessedUiTokens, UiTokens } from './types';
import fs from 'fs/promises';
import { designTokens } from '.';
import { fontFaceStylesImport } from './baseTokens';
import {
recursivelyOutputTokens,
wrapCssFileWithBodySelector,
} from './fileSystemUtils';
import { onDarkColors, onDarkGradients, onDarkShadows } from './themes/onDark';
import {
onLightColors,
onLightGradients,
onLightShadows,
} from "./themes/onLight";
import { onDarkColors, onDarkGradients, onDarkShadows } from "./themes/onDark";
} from './themes/onLight';
import {
calculateSpacingAndBorderRadiusTokens,
recursivelyConvertUiToBaseTokenCssVariableReferences,
recursivelyResolveTokens,
} from "./utils";
import {
recursivelyOutputTokens,
wrapCssFileWithBodySelector,
} from "./fileSystemUtils";
} from './utils';
(async () => {
await fs.appendFile('css/text.global.css', fontFaceStylesImport);
await recursivelyOutputTokens(
{
spacingUnit: tokens.base.spacingUnit,
borderRadiusUnit: tokens.base.borderRadiusUnit,
font: tokens.base.font,
text: tokens.base.text,
breakpoint: tokens.base.breakpoint,
spacingUnit: designTokens.base.spacingUnit,
borderRadiusUnit: designTokens.base.borderRadiusUnit,
font: designTokens.base.font,
text: designTokens.base.text,
breakpoint: designTokens.base.breakpoint,
},
"base",
"css/base-onLight.global.css"
'base',
'css/base-onLight.global.css',
);

@@ -35,10 +38,10 @@

{
spacingUnit: tokens.base.spacingUnit,
borderRadiusUnit: tokens.base.borderRadiusUnit,
font: tokens.base.font,
text: tokens.base.text,
breakpoint: tokens.base.breakpoint,
spacingUnit: designTokens.base.spacingUnit,
borderRadiusUnit: designTokens.base.borderRadiusUnit,
font: designTokens.base.font,
text: designTokens.base.text,
breakpoint: designTokens.base.breakpoint,
},
"base",
"css/base-onDark.global.css"
'base',
'css/base-onDark.global.css',
);

@@ -52,4 +55,4 @@

},
"base",
"css/base-onLight.global.css"
'base',
'css/base-onLight.global.css',
);

@@ -63,4 +66,4 @@

},
"base",
"css/base-onDark.global.css"
'base',
'css/base-onDark.global.css',
);

@@ -70,4 +73,6 @@

recursivelyConvertUiToBaseTokenCssVariableReferences({
text: tokens.ui.text,
elevation: tokens.ui.elevation,
text: designTokens.ui.text,
elevation: designTokens.ui.elevation,
primaryButton: designTokens.ui.primaryButton,
icon: designTokens.ui.icon,
} as UiTokens);

@@ -81,3 +86,3 @@

} as ProcessedUiTokens,
tokens.base
designTokens.base,
);

@@ -87,9 +92,9 @@

uiTokensWithCalculatedTokens,
"ui",
"css/ui.global.css"
'ui',
'css/ui.global.css',
);
await wrapCssFileWithBodySelector("css/base-onLight.global.css");
await wrapCssFileWithBodySelector("css/base-onDark.global.css");
await wrapCssFileWithBodySelector("css/ui.global.css");
await wrapCssFileWithBodySelector('css/base-onLight.global.css');
await wrapCssFileWithBodySelector('css/base-onDark.global.css');
await wrapCssFileWithBodySelector('css/ui.global.css');
})();

14

src/fileSystemUtils.ts

@@ -1,3 +0,3 @@

import fs from "fs/promises";
import prependFile from "prepend-file";
import fs from 'fs/promises';
import prependFile from 'prepend-file';

@@ -15,5 +15,5 @@ type BaseTokensLeaf =

leafParents: string,
cssFileName: string
cssFileName: string,
) {
if (typeof leaf !== "string" && typeof leaf !== "number" && leaf != null) {
if (typeof leaf !== 'string' && typeof leaf !== 'number' && leaf != null) {
let leafKey: keyof typeof leaf;

@@ -23,5 +23,5 @@ for (leafKey in leaf) {

const selectors = `${leafParents}-${String(leafKey)}`;
if (typeof child === "object") {
if (typeof child === 'object') {
await recursivelyOutputTokens({ ...child }, selectors, cssFileName);
} else if (typeof child === "string") {
} else if (typeof child === 'string') {
await fs.appendFile(cssFileName, `\n --${selectors}: ${child};`);

@@ -35,3 +35,3 @@ }

await prependFile(fileName, `body {`);
await fs.appendFile(fileName, "\n}");
await fs.appendFile(fileName, '\n}');
}

21

src/index.ts

@@ -0,16 +1,15 @@

import { base, fontFaceStylesImport, onDarkBase } from './baseTokens';
import { ui } from './uiTokens';
export * from './types';
export {
base,
base as onLightBase,
onDarkBase,
ui,
designTokens,
} from "./tokens";
export {
calculateSpacingAndBorderRadiusTokens,
pickTokenValue,
calculateSpacingAndBorderRadiusTokens,
recursivelyResolveTokens,
smartPickTokenValue,
} from "./utils";
} from './utils';
export { base, base as onLightBase, onDarkBase, ui, fontFaceStylesImport };
export * from "./types";
export const designTokens = {
base,
ui,
};

112

src/themes/onDark.ts

@@ -1,51 +0,51 @@

import { Colors, Gradients, Shadows } from "../types";
import { Colors, Gradients, Shadows } from '../types';
export const onDarkColors: Colors = {
brand: {
1: "#F3F3F3",
2: "#131313",
3: "#E0E0E0",
4: "#B6B6B6",
5: "#36E0F8",
6: "#1F8290",
7: "#B026BD",
1: '#F3F3F3',
2: '#131313',
3: '#E0E0E0',
4: '#B6B6B6',
5: '#36E0F8',
6: '#1F8290',
7: '#B026BD',
},
neutral: {
1000: "#0D0D0D",
900: "#131313",
800: "#1F1F1F",
700: "#323232",
600: "#444444",
500: "#575757",
1000: '#0D0D0D',
900: '#131313',
800: '#1F1F1F',
700: '#323232',
600: '#444444',
500: '#575757',
},
accent: {
1: "#F191FA",
2: "#36E0F8",
3: "#6FD6F2",
4: "#61ADEB",
5: "#99A8EA",
6: "#E4F4F7",
7: "#F8D1DE",
8: "#F2B7DA",
1: '#F191FA',
2: '#36E0F8',
3: '#6FD6F2',
4: '#61ADEB',
5: '#99A8EA',
6: '#E4F4F7',
7: '#F8D1DE',
8: '#F2B7DA',
},
translucent: {
dim: {
800: "#131313CC",
700: "#131313A3",
600: "#1313137A",
500: "#1313133D",
400: "#13131329",
300: "#1313131F",
200: "#13131314",
100: "#1313130A",
800: '#131313CC',
700: '#131313A3',
600: '#1313137A',
500: '#1313133D',
400: '#13131329',
300: '#1313131F',
200: '#13131314',
100: '#1313130A',
},
bright: {
800: "#F3F3F3CC",
700: "#F3F3F3A3",
600: "#F3F3F37A",
500: "#F3F3F33D",
400: "#F3F3F329",
300: "#F3F3F31F",
200: "#F3F3F314",
100: "#F3F3F30A",
800: '#F3F3F3CC',
700: '#F3F3F3A3',
600: '#F3F3F37A',
500: '#F3F3F33D',
400: '#F3F3F329',
300: '#F3F3F31F',
200: '#F3F3F314',
100: '#F3F3F30A',
},

@@ -55,16 +55,16 @@ },

guidance: {
bright: "#36E0F8",
dim: "#94E9F5 ",
bright: '#36E0F8',
dim: '#94E9F5 ',
},
success: {
bright: "#ABF690",
dim: "#D5FAC7",
bright: '#ABF690',
dim: '#D5FAC7',
},
attention: {
bright: "#FAFD7E",
dim: "#F6F8B9",
bright: '#FAFD7E',
dim: '#F6F8B9',
},
fatal: {
bright: "#FF637F",
dim: "#F9ABB9",
bright: '#FF637F',
dim: '#F9ABB9',
},

@@ -75,7 +75,7 @@ },

export const onDarkShadows: Shadows = {
500: "0px 8px 16px 8px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.32)",
600: "0px 8px 12px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
700: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
800: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 8px 2px rgba(0, 0, 0, 0.32)",
900: "0px 2px 4px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32);",
100: '0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)',
200: '0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)',
300: '0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)',
400: '0px 6px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)',
500: '0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)',
} as const;

@@ -85,4 +85,4 @@

1: {
spectrum: "linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);",
blendMode: "normal",
spectrum: 'linear-gradient(90.68deg, #C9A2F6 0%, #83E3F0 99.82%);',
blendMode: 'normal',
svgDefs: `

@@ -94,3 +94,3 @@ <linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"

</linearGradient>`,
svgDefIds: "gradient-1-singleLayer",
svgDefIds: 'gradient-1-singleLayer',
},

@@ -100,3 +100,3 @@ 2: {

radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
blendMode: "normal, normal",
blendMode: 'normal, normal',
svgDefs: `

@@ -121,3 +121,3 @@ <radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
blendMode: "normal, normal, normal",
blendMode: 'normal, normal, normal',
svgDefs: `

@@ -124,0 +124,0 @@ <radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

112

src/themes/onLight.ts

@@ -1,51 +0,51 @@

import { Colors, Gradients, Shadows } from "../types";
import { Colors, Gradients, Shadows } from '../types';
export const onLightColors: Colors = {
brand: {
1: "#131313",
2: "#FFFFFF",
3: "#E0E0E0",
4: "#868686",
5: "#36E0F8",
6: "#1F8290",
7: "#B026BD",
1: '#131313',
2: '#FFFFFF',
3: '#E0E0E0',
4: '#868686',
5: '#36E0F8',
6: '#1F8290',
7: '#B026BD',
},
neutral: {
1000: "#D9D9D9",
900: "#E2E2E2",
800: "#ECECEC",
700: "#F3F3F3",
600: "#FAFAFA",
500: "#FFFFFF",
1000: '#D9D9D9',
900: '#E2E2E2',
800: '#ECECEC',
700: '#F3F3F3',
600: '#FAFAFA',
500: '#FFFFFF',
},
accent: {
1: "#B026BD",
2: "#1FD3F5",
3: "#67C6E0",
4: "#5AA0D9",
5: "#8395E5",
6: "#D8EFF4",
7: "#F5BDD0",
8: "#EC98CA",
1: '#B026BD',
2: '#1FD3F5',
3: '#67C6E0',
4: '#5AA0D9',
5: '#8395E5',
6: '#D8EFF4',
7: '#F5BDD0',
8: '#EC98CA',
},
translucent: {
dim: {
800: "#0D0D0DCC",
700: "#0D0D0DA3",
600: "#0D0D0D7A",
500: "#0D0D0D3D",
400: "#0D0D0D29",
300: "#0D0D0D1F",
200: "#0D0D0D14",
100: "#0D0D0D0A",
800: '#0D0D0DCC',
700: '#0D0D0DA3',
600: '#0D0D0D7A',
500: '#0D0D0D3D',
400: '#0D0D0D29',
300: '#0D0D0D1F',
200: '#0D0D0D14',
100: '#0D0D0D0A',
},
bright: {
800: "#FFFFFFCC",
700: "#FFFFFFA3",
600: "#FFFFFF7A",
500: "#FFFFFF3D",
400: "#FFFFFF29",
300: "#FFFFFF1F",
200: "#FFFFFF14",
100: "#FFFFFF0A",
800: '#FFFFFFCC',
700: '#FFFFFFA3',
600: '#FFFFFF7A',
500: '#FFFFFF3D',
400: '#FFFFFF29',
300: '#FFFFFF1F',
200: '#FFFFFF14',
100: '#FFFFFF0A',
},

@@ -55,16 +55,16 @@ },

guidance: {
bright: "#36E0F8",
dim: "#9AEFFB",
bright: '#36E0F8',
dim: '#9AEFFB',
},
success: {
bright: "#ABF790",
dim: "#D5FAC7",
bright: '#ABF790',
dim: '#D5FAC7',
},
attention: {
bright: "#FBFF6D",
dim: "#FCFEBF",
bright: '#FBFF6D',
dim: '#FCFEBF',
},
fatal: {
bright: "#FF637F",
dim: "#FFB1BF",
bright: '#FF637F',
dim: '#FFB1BF',
},

@@ -75,7 +75,7 @@ },

export const onLightShadows: Shadows = {
500: "0px 8px 16px 8px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.32)",
600: "0px 8px 12px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
700: "0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)",
800: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32)",
900: "0px 2px 8px 2px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.32)",
100: '0px 1px 2px rgba(0, 0, 0, 0.16), 0px 1px 4px 1px rgba(0, 0, 0, 0.32)',
200: '0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px rgba(0, 0, 0, 0.32)',
300: '0px 4px 8px 4px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.32)',
400: '0px 8px 10px 4px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32)',
500: '0px 8px 12px 6px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.32)',
} as const;

@@ -85,4 +85,4 @@

1: {
spectrum: "linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)",
blendMode: "normal",
spectrum: 'linear-gradient(90.68deg, #F191FA 0%, #83E3F0 99.82%)',
blendMode: 'normal',
svgDefs: `<linearGradient id="gradient-1-singleLayer" x1="0" y1="0" x2="24" y2="0.214702"

@@ -93,3 +93,3 @@ gradientUnits="userSpaceOnUse">

</linearGradient>`,
svgDefIds: "gradient-1-singleLayer",
svgDefIds: 'gradient-1-singleLayer',
},

@@ -99,3 +99,3 @@ 2: {

radial-gradient(72% 240% at 28% 28%, #A3EEF8 0%, #A4DCF5 16%, #A6AEEC 40%, #ECBEE1 100%)`,
blendMode: "normal, normal",
blendMode: 'normal, normal',
svgDefs: `<radialGradient id="gradient-2-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

@@ -119,3 +119,3 @@ gradientTransform="translate(4.7777 4.75595) rotate(44.9817) scale(18.6995 39.6574)">

radial-gradient(4000% 10450% at 0% 0%, #7EF8FE 0%, #7ABFEC 30.21%, #AEC3ED 45.54%, #DEF3F6 61.46%, #FAF9F3 100%)`,
blendMode: "normal, normal, normal",
blendMode: 'normal, normal, normal',
svgDefs: `<radialGradient id="gradient-3-bottomLayer" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

@@ -122,0 +122,0 @@ gradientTransform="rotate(60.6728) scale(36.75 1550.85)">

143

src/types.ts
// Base Types
// ? wtf do we do with typography: numerical?
export type Colors = {

@@ -74,7 +73,7 @@ brand: {

export type Shadows = {
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};

@@ -97,2 +96,4 @@

size: {
600: string;
500: string;
400: string;

@@ -107,2 +108,3 @@ 300: string;

size: {
600: string;
500: string;

@@ -170,3 +172,3 @@ 400: string;

};
"2xSmall": {
'2xSmall': {
regular: {

@@ -217,3 +219,3 @@ fontSize: string;

heading: {
"2xLarge": {
'2xLarge': {
regular: {

@@ -364,2 +366,92 @@ fontSize: string;

type PrimaryButtonSizeTokens = {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
cutawaySize: string;
borderSize: string;
};
hover: {
cutawaySize: string;
borderSize: string;
};
press: {
cutawaySize: string;
borderSize: string;
};
disabled: {
cutawaySize: string;
borderSize: string;
};
};
};
type PrimaryButtonUiTokens = {
coloring: {
backgroundColor: string;
textColor: string;
borderColor: string;
};
size: {
small: PrimaryButtonSizeTokens;
medium: PrimaryButtonSizeTokens;
large: PrimaryButtonSizeTokens;
};
};
type SecondaryButtonSizeTokens = {
buttonHeight: string;
horizontalPadding: string;
fontSize: string;
borderRadius: string;
interaction: {
inactive: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
hover: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
press: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
disabled: {
innerBorderSize: string;
cutawaySize: string;
outerBorderSize: string;
};
};
};
type SecondaryButtonUiTokens = {
coloring: {
borderColor: string;
textColor: string;
};
size: {
small: SecondaryButtonSizeTokens;
medium: SecondaryButtonSizeTokens;
large: SecondaryButtonSizeTokens;
};
};
type PrimaryButtconSizeTokens = {
iconSize: string;
buttonSize: string;
};
type ButtconUiTokens = {
small: PrimaryButtconSizeTokens;
medium: PrimaryButtconSizeTokens;
large: PrimaryButtconSizeTokens;
};
export type UiTokens = {

@@ -369,2 +461,5 @@ text: UiText;

elevation: Elevation;
primaryButton: PrimaryButtonUiTokens;
buttcon: ButtconUiTokens;
secondaryButton: SecondaryButtonUiTokens;
};

@@ -374,6 +469,6 @@

N extends number,
Acc extends number[] = []
> = Acc["length"] extends N
Acc extends number[] = [],
> = Acc['length'] extends N
? Acc[number]
: Enumerate<N, [...Acc, Acc["length"]]>;
: Enumerate<N, [...Acc, Acc['length']]>;

@@ -388,3 +483,3 @@ // Use this sparingly. Type-level math is expensive.

spacing: { [key in `x${IntRange<1, 51>}`]: `${string}px` };
borderRadius: { [key in `x${IntRange<1, 51>}`]: `${string}px` };
borderRadius: { [key in `x${IntRange<1, 26>}`]: `${string}px` };
};

@@ -405,3 +500,3 @@

L extends Primitive | undefined,
R extends Primitive | undefined
R extends Primitive | undefined,
> = L extends string | number

@@ -417,3 +512,3 @@ ? R extends string | number

L extends unknown | undefined,
R extends unknown | undefined
R extends unknown | undefined,
> = L extends undefined

@@ -427,13 +522,11 @@ ? R extends undefined

/**
* LeafPaths
* Get all the paths to the leaves of an object
* @example
* type Keys = LeafPaths<{ a: { b: { c: string } }>
* // 'a.b.c'
*/
// LeafPaths
// Get all the paths to the leaves of an object
// @example
// type Keys = LeafPaths<{ a: { b: { c: string } }>
// // 'a.b.c'
export type LeafPaths<
T extends GenericObject,
Prev extends Primitive | undefined = undefined,
Path extends Primitive | undefined = undefined
Path extends Primitive | undefined = undefined,
> = {

@@ -453,1 +546,9 @@ [K in keyof T]: T[K] extends GenericObject

export type ValidSxValues = LooseAutocomplete<DesignTokensPaths>;
export type BiomeTheme = {
base: ProcessedBaseTokens;
ui: ProcessedUiTokens;
};
export type ProcessedBaseTokens = BaseTokens & {
breakpointAsArray: number[];
};

46

src/utils.ts

@@ -1,9 +0,3 @@

import {
BaseTokens,
DesignTokens,
IntRange,
ProcessedUiTokens,
UiTokens,
} from "./types";
import get from "lodash.get";
import get from 'lodash.get';
import { BaseTokens, DesignTokens, IntRange, ProcessedUiTokens } from './types';

@@ -20,11 +14,11 @@ export type Leaf =

leaf: T,
theme: DesignTokens
theme: DesignTokens,
) {
if (typeof leaf !== "string" && leaf != null) {
if (typeof leaf !== 'string' && leaf != null) {
let leafKey: keyof typeof leaf;
for (leafKey in leaf) {
let child = leaf[leafKey];
if (typeof child === "object") {
if (typeof child === 'object') {
leaf[leafKey] = recursivelyResolveTokens({ ...child }, theme);
} else if (typeof child === "string") {
} else if (typeof child === 'string') {
const resolvedValue = pickTokenValue<string>(theme, child);

@@ -41,3 +35,3 @@ leaf[leafKey] = resolvedValue;

themeProps: DesignTokens,
selector: string
selector: string,
) => get(themeProps, selector) as T;

@@ -47,6 +41,6 @@

themeProps: DesignTokens,
selector: string
selector: string,
) {
let pickedToken = pickTokenValue<string | object>(themeProps, selector);
if (typeof pickedToken === "string" && pickedToken.match(/^base./)) {
if (typeof pickedToken === 'string' && pickedToken.match(/^base./)) {
pickedToken = pickTokenValue<string | object>(themeProps, pickedToken);

@@ -58,7 +52,7 @@ }

export function calculateSpacingAndBorderRadiusTokens(
uiTokens: UiTokens,
baseTokens: BaseTokens
uiTokens: ProcessedUiTokens,
baseTokens: BaseTokens,
) {
const processedTokens = { ...uiTokens } as ProcessedUiTokens;
Array.from(Array(50)).forEach((x, i) => {
const processedTokens = { ...uiTokens };
Array.from(Array(50)).forEach((_, i) => {
processedTokens.spacing[`x${i + 1}` as `x${IntRange<1, 51>}`] = `${

@@ -68,4 +62,4 @@ (i + 1) * parseInt(baseTokens.spacingUnit, 10)

});
Array.from(Array(25)).forEach((x, i) => {
processedTokens.borderRadius[`x${i + 1}` as `x${IntRange<1, 51>}`] = `${
Array.from(Array(25)).forEach((_, i) => {
processedTokens.borderRadius[`x${i + 1}` as `x${IntRange<1, 26>}`] = `${
(i + 1) * parseInt(baseTokens.borderRadiusUnit, 10)

@@ -79,14 +73,14 @@ }px`;

export function recursivelyConvertUiToBaseTokenCssVariableReferences<
T extends Leaf
T extends Leaf,
>(leaf: T) {
if (typeof leaf !== "string" && leaf != null) {
if (typeof leaf !== 'string' && leaf != null) {
let leafKey: keyof typeof leaf;
for (leafKey in leaf) {
let child = leaf[leafKey];
if (typeof child === "object") {
if (typeof child === 'object') {
leaf[leafKey] = recursivelyConvertUiToBaseTokenCssVariableReferences({
...child,
});
} else if (typeof child === "string") {
leaf[leafKey] = `var(--${child.replaceAll(".", "-")})`;
} else if (typeof child === 'string') {
leaf[leafKey] = `var(--${child.replaceAll('.', '-')})`;
}

@@ -93,0 +87,0 @@ }

4

tsup.config.ts

@@ -1,5 +0,5 @@

import { defineConfig } from "tsup";
import { defineConfig } from 'tsup';
export default defineConfig({
entry: [".src/index.ts"],
entry: ['.src/index.ts'],
splitting: false,

@@ -6,0 +6,0 @@ sourcemap: true,

src/tokens.ts
css/base-onDark.global.css

Sorry, the diff of this file is not supported yet

css/base-onLight.global.css

Sorry, the diff of this file is not supported yet

css/ui.global.css

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet