@logto/core-kit 1.0.0-beta.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Silverhand Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/declaration/dom.d.ts

@@ -0,0 +1,77 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+type InputType =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week';
+
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
+type AutoCompleteType =
+  | 'name'
+  | 'honorific-prefix'
+  | 'given-name'
+  | 'additional-name'
+  | 'family-name'
+  | 'honorific-suffix'
+  | 'nickname'
+  | 'username'
+  | 'new-password'
+  | 'current-password'
+  | 'one-time-code'
+  | 'organization-title'
+  | 'organization'
+  | 'street-address'
+  | 'address-line1'
+  | 'address-line2'
+  | 'address-line3'
+  | 'address-level4'
+  | 'address-level3'
+  | 'address-level2'
+  | 'address-level1'
+  | 'country'
+  | 'country-name'
+  | 'postal-code'
+  | 'cc-name'
+  | 'cc-given-name'
+  | 'cc-additional-name'
+  | 'cc-family-name'
+  | 'cc-number'
+  | 'cc-exp'
+  | 'cc-exp-month'
+  | 'cc-exp-year'
+  | 'cc-csc'
+  | 'cc-type'
+  | 'transaction-currency'
+  | 'transaction-amount'
+  | 'language'
+  | 'bday'
+  | 'bday-day'
+  | 'bday-month'
+  | 'bday-year'
+  | 'sex'
+  | 'url'
+  | 'photo'
+  | 'mobile';
+
+// TO-DO: remove me
+interface Body {
+  json<T>(): Promise<T>;
+}

package/declaration/index.ts

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-unassigned-import */
+import './react-app.d';
+import './dom.d';
+/* eslint-enable import/no-unassigned-import */

package/declaration/react-app.d.ts

@@ -0,0 +1,65 @@
+// Copied from react-scripts/lib/react-app.d.ts
+
+declare module '*.avif' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.bmp' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.gif' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.jpg' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.jpeg' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.png' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.webp' {
+  const source: string;
+  export default source;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const source: string;
+  export default source;
+}
+
+declare module '*.module.css' {
+  const classes: Readonly<Record<string, string>>;
+  export default classes;
+  export = classes;
+}
+
+declare module '*.module.scss' {
+  const classes: Readonly<Record<string, string>>;
+  export default classes;
+  export = classes;
+}
+
+declare module '*.module.sass' {
+  const classes: Readonly<Record<string, string>>;
+  export default classes;
+  export = classes;
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './utilities';
+export * from './regex';
+export * from './language';
+export * from './scope';

package/lib/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utilities"), exports);
+__exportStar(require("./regex"), exports);
+__exportStar(require("./language"), exports);
+__exportStar(require("./scope"), exports);

package/lib/language.d.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+export declare const languageKeys: readonly ["en", "fr", "pt-PT", "zh-CN", "tr-TR", "ko-KR"];
+export declare const languageKeyGuard: z.ZodEnum<["en", "fr", "pt-PT", "zh-CN", "tr-TR", "ko-KR"]>;
+export declare type LanguageKey = z.infer<typeof languageKeyGuard>;
+export declare const getDefaultLanguage: (language: string) => LanguageKey;

package/lib/language.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultLanguage = exports.languageKeyGuard = exports.languageKeys = void 0;
+const zod_1 = require("zod");
+const zod_2 = require("./utilities/zod");
+exports.languageKeys = ['en', 'fr', 'pt-PT', 'zh-CN', 'tr-TR', 'ko-KR'];
+exports.languageKeyGuard = zod_1.z.enum(exports.languageKeys);
+const getDefaultLanguage = (language) => {
+    return exports.languageKeyGuard.or((0, zod_2.fallback)('en')).parse(language);
+};
+exports.getDefaultLanguage = getDefaultLanguage;

package/lib/regex.d.ts

@@ -0,0 +1,7 @@
+export declare const emailRegEx: RegExp;
+export declare const phoneRegEx: RegExp;
+export declare const usernameRegEx: RegExp;
+export declare const passwordRegEx: RegExp;
+export declare const redirectUriRegEx: RegExp;
+export declare const hexColorRegEx: RegExp;
+export declare const dateRegex: RegExp;

package/lib/regex.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateRegex = exports.hexColorRegEx = exports.redirectUriRegEx = exports.passwordRegEx = exports.usernameRegEx = exports.phoneRegEx = exports.emailRegEx = void 0;
+exports.emailRegEx = /^\S+@\S+\.\S+$/;
+exports.phoneRegEx = /^\d+$/;
+exports.usernameRegEx = /^[A-Z_a-z]\w*$/;
+exports.passwordRegEx = /^.{6,}$/;
+exports.redirectUriRegEx = /^https?:\/\//;
+exports.hexColorRegEx = /^#[\da-f]{3}([\da-f]{3})?$/i;
+exports.dateRegex = /^\d{4}(-\d{2}){2}/;

package/lib/scope.d.ts

@@ -0,0 +1,49 @@
+export declare enum PreservedScope {
+    OpenId = "openid",
+    OfflineAccess = "offline_access"
+}
+export declare type UserClaim = 'name' | 'picture' | 'username' | 'role_names' | 'email' | 'email_verified' | 'phone_number' | 'phone_number_verified' | 'custom_data' | 'identities';
+/**
+ * Scopes for ID Token and Userinfo Endpoint.
+ */
+export declare enum UserScope {
+    /**
+     * Scope for basic user info.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    Profile = "profile",
+    /**
+     * Scope for user email address.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    Email = "email",
+    /**
+     * Scope for user phone number.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    Phone = "phone",
+    /**
+     * Scope for user's custom data.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    CustomData = "custom_data",
+    /**
+     * Scope for user's social identity details.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    Identities = "identities"
+}
+/**
+ * Mapped claims that ID Token includes.
+ */
+export declare const idTokenClaims: Readonly<Record<UserScope, UserClaim[]>>;
+/**
+ * Additional claims that Userinfo Endpoint returns.
+ */
+export declare const userinfoClaims: Readonly<Record<UserScope, UserClaim[]>>;
+export declare const userClaims: Readonly<Record<UserScope, UserClaim[]>>;

package/lib/scope.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.userClaims = exports.userinfoClaims = exports.idTokenClaims = exports.UserScope = exports.PreservedScope = void 0;
+var PreservedScope;
+(function (PreservedScope) {
+    PreservedScope["OpenId"] = "openid";
+    PreservedScope["OfflineAccess"] = "offline_access";
+})(PreservedScope = exports.PreservedScope || (exports.PreservedScope = {}));
+/**
+ * Scopes for ID Token and Userinfo Endpoint.
+ */
+var UserScope;
+(function (UserScope) {
+    /**
+     * Scope for basic user info.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    UserScope["Profile"] = "profile";
+    /**
+     * Scope for user email address.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    UserScope["Email"] = "email";
+    /**
+     * Scope for user phone number.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    UserScope["Phone"] = "phone";
+    /**
+     * Scope for user's custom data.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    UserScope["CustomData"] = "custom_data";
+    /**
+     * Scope for user's social identity details.
+     *
+     * See {@link idTokenClaims} for mapped claims in ID Token and {@link userinfoClaims} for additional claims in Userinfo Endpoint.
+     */
+    UserScope["Identities"] = "identities";
+})(UserScope = exports.UserScope || (exports.UserScope = {}));
+/**
+ * Mapped claims that ID Token includes.
+ */
+exports.idTokenClaims = Object.freeze({
+    [UserScope.Profile]: ['name', 'picture', 'username', 'role_names'],
+    [UserScope.Email]: ['email', 'email_verified'],
+    [UserScope.Phone]: ['phone_number', 'phone_number_verified'],
+    [UserScope.CustomData]: [],
+    [UserScope.Identities]: [],
+});
+/**
+ * Additional claims that Userinfo Endpoint returns.
+ */
+exports.userinfoClaims = Object.freeze({
+    [UserScope.Profile]: [],
+    [UserScope.Email]: [],
+    [UserScope.Phone]: [],
+    [UserScope.CustomData]: ['custom_data'],
+    [UserScope.Identities]: ['identities'],
+});
+exports.userClaims = Object.freeze(
+// Hard to infer type directly, use `as` for a workaround.
+// eslint-disable-next-line no-restricted-syntax
+Object.fromEntries(Object.values(UserScope).map((current) => [
+    current,
+    [...exports.idTokenClaims[current], ...exports.userinfoClaims[current]],
+])));

package/lib/utilities/color.d.ts

@@ -0,0 +1,4 @@
+import color from 'color';
+export declare const absoluteLighten: (baseColor: color, delta: number) => color<number[]>;
+export declare const absoluteDarken: (baseColor: color, delta: number) => color<number[]>;
+export declare const generateDarkColor: (lightColor: string) => string;

package/lib/utilities/color.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDarkColor = exports.absoluteDarken = exports.absoluteLighten = void 0;
+const color_1 = __importDefault(require("color"));
+// Color hsl lighten/darken takes percentage value only, need to implement absolute value update
+const absoluteLighten = (baseColor, delta) => {
+    const hslArray = baseColor.hsl().round().array();
+    return (0, color_1.default)([hslArray[0] ?? 0, hslArray[1] ?? 0, (hslArray[2] ?? 0) + delta], 'hsl');
+};
+exports.absoluteLighten = absoluteLighten;
+const absoluteDarken = (baseColor, delta) => {
+    const hslArray = baseColor.hsl().round().array();
+    return (0, color_1.default)([hslArray[0] ?? 0, hslArray[1] ?? 0, (hslArray[2] ?? 0) - delta], 'hsl');
+};
+exports.absoluteDarken = absoluteDarken;
+const generateDarkColor = (lightColor) => (0, exports.absoluteLighten)((0, color_1.default)(lightColor), 10).hex();
+exports.generateDarkColor = generateDarkColor;

package/lib/utilities/file.d.ts

@@ -0,0 +1 @@
+export declare const getFileContents: (filePath: string, fallbackContent: string) => string;

package/lib/utilities/file.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileContents = void 0;
+const fs_1 = require("fs");
+const getFileContents = (filePath, fallbackContent) => {
+    if ((0, fs_1.existsSync)(filePath)) {
+        return (0, fs_1.readFileSync)(filePath, 'utf8');
+    }
+    return fallbackContent;
+};
+exports.getFileContents = getFileContents;

package/lib/utilities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './file';
+export * from './react-router';
+export * from './color';
+export * from './string';
+export * from './zod';

package/lib/utilities/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./file"), exports);
+__exportStar(require("./react-router"), exports);
+__exportStar(require("./color"), exports);
+__exportStar(require("./string"), exports);
+__exportStar(require("./zod"), exports);

package/lib/utilities/react-router.d.ts

@@ -0,0 +1 @@
+export declare const getBasename: (prefix: string, developmentPort: string) => string;

package/lib/utilities/react-router.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBasename = void 0;
+const getBasename = (prefix, developmentPort) => {
+    const isBasenameNeeded = process.env.NODE_ENV !== 'development' || process.env.PORT === developmentPort;
+    return isBasenameNeeded ? '/' + prefix : '';
+};
+exports.getBasename = getBasename;

package/lib/utilities/string.d.ts

@@ -0,0 +1 @@
+export declare const generateRandomString: (size: number, alphabet?: string) => string;

package/lib/utilities/string.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRandomString = void 0;
+const nanoid_1 = require("nanoid");
+const generateRandomString = (size, alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz') => (0, nanoid_1.customAlphabet)(alphabet, size)();
+exports.generateRandomString = generateRandomString;

package/lib/utilities/zod.d.ts

@@ -0,0 +1,11 @@
+/**
+ * https://github.com/colinhacks/zod/issues/316#issuecomment-850906479
+ * Create a schema matches anything and returns a value. Use it with `or`:
+ *
+ * const schema = zod.number();
+ * const tolerant = schema.or(fallback(-1));
+ *
+ * schema.parse('foo')      // => ZodError
+ * tolerant.parse('foo')    // -1
+ */
+export declare function fallback<T>(value: T): import("zod").ZodEffects<import("zod").ZodAny, T, any>;

package/lib/utilities/zod.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fallback = void 0;
+const zod_1 = require("zod");
+/**
+ * https://github.com/colinhacks/zod/issues/316#issuecomment-850906479
+ * Create a schema matches anything and returns a value. Use it with `or`:
+ *
+ * const schema = zod.number();
+ * const tolerant = schema.or(fallback(-1));
+ *
+ * schema.parse('foo')      // => ZodError
+ * tolerant.parse('foo')    // -1
+ */
+function fallback(value) {
+    return (0, zod_1.any)().transform(() => value);
+}
+exports.fallback = fallback;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@logto/core-kit",
+  "version": "1.0.0-beta.11",
+  "main": "lib/index.js",
+  "author": "Silverhand Inc. <contact@silverhand.io>",
+  "license": "MIT",
+  "files": [
+    "declaration",
+    "lib",
+    "scss"
+  ],
+  "scripts": {
+    "precommit": "lint-staged",
+    "build": "rm -rf lib/ && tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput --incremental",
+    "lint": "eslint --ext .ts src",
+    "lint:report": "pnpm lint --format json --output-file report.json",
+    "prepack": "pnpm build",
+    "stylelint": "stylelint \"scss/**/*.scss\""
+  },
+  "engines": {
+    "node": "^16.0.0"
+  },
+  "dependencies": {
+    "color": "^4.2.3",
+    "nanoid": "^3.1.23",
+    "zod": "^3.18.0"
+  },
+  "devDependencies": {
+    "@silverhand/eslint-config": "1.0.0",
+    "@silverhand/eslint-config-react": "1.0.0",
+    "@silverhand/essentials": "^1.2.0",
+    "@silverhand/ts-config": "1.0.0",
+    "@silverhand/ts-config-react": "1.0.0",
+    "@types/color": "^3.0.3",
+    "@types/node": "^16.3.1",
+    "@types/react": "^18.0.20",
+    "eslint": "^8.21.0",
+    "lint-staged": "^13.0.0",
+    "postcss": "^8.4.6",
+    "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "typescript": "^4.7.4"
+  },
+  "eslintConfig": {
+    "extends": "@silverhand/react"
+  },
+  "stylelint": {
+    "extends": "@silverhand/eslint-config-react/.stylelintrc"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a20eabc36dadad4969d2acbf6bac7655257f3f55"
+}

package/scss/_console-themes.scss

@@ -0,0 +1,339 @@
+@mixin light {
+  // tonal palettes
+  --color-all-0: #000;
+  --color-all-100: #fff;
+  --color-primary-10: #190064;
+  --color-primary-20: #2d009d;
+  --color-primary-30: #4300da;
+  --color-primary-40: #5d34f2;
+  --color-primary-50: #7958ff;
+  --color-primary-60: #947dff;
+  --color-primary-70: #af9eff;
+  --color-primary-80: #cabeff;
+  --color-primary-90: #e6deff;
+  --color-primary-95: #f5eeff;
+  --color-primary-99: #fffbff;
+  --color-secondary-10: #201c00;
+  --color-secondary-20: #373100;
+  --color-secondary-30: #4f4700;
+  --color-secondary-40: #695f00;
+  --color-secondary-50: #847900;
+  --color-secondary-60: #9f930d;
+  --color-secondary-70: #baad2d;
+  --color-secondary-80: #d7c947;
+  --color-secondary-90: #f4e560;
+  --color-secondary-95: #fff480;
+  --color-secondary-99: #fffbf7;
+  --color-tertiary-10: #350041;
+  --color-tertiary-20: #560068;
+  --color-tertiary-30: #7b0093;
+  --color-tertiary-40: #9927af;
+  --color-tertiary-50: #b545ca;
+  --color-tertiary-60: #d361e7;
+  --color-tertiary-70: #f07eff;
+  --color-tertiary-80: #faabff;
+  --color-tertiary-90: #ffd5ff;
+  --color-tertiary-95: #ffeafe;
+  --color-tertiary-99: #fcfcfc;
+  --color-error-10: #410001;
+  --color-error-20: #680003;
+  --color-error-30: #930006;
+  --color-error-40: #ba1b1b;
+  --color-error-50: #dd3730;
+  --color-error-60: #ff5449;
+  --color-error-70: #ff897a;
+  --color-error-80: #ffb4a9;
+  --color-error-90: #ffdad4;
+  --color-error-95: #ffede9;
+  --color-error-99: #fcfcfc;
+  --color-neutral-10: #191c1d;
+  --color-neutral-20: #2d3132;
+  --color-neutral-30: #444748;
+  --color-neutral-40: #5c5f60;
+  --color-neutral-50: #747778;
+  --color-neutral-60: #8e9192;
+  --color-neutral-70: #a9acac;
+  --color-neutral-80: #c4c7c7;
+  --color-neutral-90: #e0e3e3;
+  --color-neutral-95: #eff1f1;
+  --color-neutral-99: #f7f8f8;
+  --color-neutral-variant-10: #1b1b22;
+  --color-neutral-variant-20: #302f38;
+  --color-neutral-variant-30: #47464e;
+  --color-neutral-variant-40: #5f5d67;
+  --color-neutral-variant-50: #78767f;
+  --color-neutral-variant-60: #928f9a;
+  --color-neutral-variant-70: #adaab4;
+  --color-neutral-variant-80: #c9c5d0;
+  --color-neutral-variant-90: #e5e1ec;
+  --color-neutral-variant-95: #f3effa;
+  --color-neutral-variant-99: #fffbff;
+  --color-success-10: #002106;
+  --color-success-20: #00390b;
+  --color-success-30: #005314;
+  --color-success-40: #116d26;
+  --color-success-50: #32873d;
+  --color-success-60: #4ea254;
+  --color-success-70: #68be6c;
+  --color-success-80: #83da85;
+  --color-success-90: #9fe79f;
+  --color-success-95: #bdefbd;
+  --color-success-99: #ebf9eb;
+  --color-alert-10: #2b1700;
+  --color-alert-20: #472a00;
+  --color-alert-30: #663e00;
+  --color-alert-40: #865300;
+  --color-alert-50: #a76900;
+  --color-alert-60: #ca8000;
+  --color-alert-70: #eb9918;
+  --color-alert-80: #ffb95a;
+  --color-alert-90: #ffddb5;
+  --color-alert-95: #ffeedc;
+  --color-alert-99: #fff5eb;
+
+  // color aliases
+  --color-primary: var(--color-primary-40);
+  --color-on-primary: var(--color-all-100);
+  --color-primary-container: var(--color-primary-90);
+  --color-on-primary-container: var(--color-primary-10);
+  --color-secondary: var(--color-secondary-40);
+  --color-on-secondary: var(--color-all-100);
+  --color-secondary-container: var(--color-secondary-30);
+  --color-on-secondary-container: var(--color-secondary-10);
+  --color-tertiary: var(--color-tertiary-40);
+  --color-on-tertiary: var(--color-all-100);
+  --color-tertiary-container: var(--color-tertiary-90);
+  --color-on-tertiary-container: var(--color-tertiary-10);
+  --color-error: var(--color-error-40);
+  --color-on-error: var(--color-all-100);
+  --color-error-container: var(--color-error-90);
+  --color-on-error-container: var(--color-error-10);
+  --color-background: var(--color-neutral-99);
+  --color-on-background: var(--color-neutral-10);
+  --color-surface: var(--color-neutral-99);
+  --color-surface-1: #ecebf6; // Neutral-99 + 2% Neutral-Variant-50 + 5% Primary-40
+  --color-surface-2: #e8e6f6; // Neutral-99 + 2% Neutral-Variant-50 + 8% Primary-40
+  --color-surface-3: #e3e0f6; // Neutral-99 + 2% Neutral-Variant-50 + 11% Primary-40
+  --color-surface-4: #dfdaf5; // Neutral-99 + 2% Neutral-Variant-50 + 14% Primary-40
+  --color-surface-5: #dcd6f5; // Neutral-99 + 2% Neutral-Variant-50 + 16% Primary-40
+  --color-on-surface: var(--color-neutral-10);
+  --color-surface-variant: var(--color-neutral-variant-90);
+  --color-on-surface-variant: var(--color-neutral-variant-30);
+  --color-outline: var(--color-neutral-variant-50);
+  --color-primary-hover: var(--color-primary-50);
+  --color-primary-pressed: var(--color-primary-30);
+  --color-danger-hover: var(--color-error-50);
+  --color-danger-pressed: var(--color-error-30);
+  --color-text: var(--color-neutral-10);
+  --color-text-link: var(--color-primary-40);
+  --color-icon: var(--color-neutral-50);
+  --color-caption: var(--color-neutral-50);
+  --color-border: var(--color-neutral-80);
+  --color-divider: var(--color-neutral-90);
+  --color-disabled: var(--color-neutral-80);
+  --color-base: var(--color-surface-1);
+  --color-layer-1: var(--color-all-100);
+  --color-layer-2: var(--color-neutral-95);
+  --color-float: var(--color-all-100);
+  --color-layer-light: var(--color-neutral-99);
+  --color-inverse-surface: var(--color-neutral-20);
+  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-inverse-primary: var(--color-primary-50);
+  --color-shadow: var(--color-all-100);
+  --color-white: #fff;
+  --color-button-icon: var(--color-primary-80);
+  --color-icon-background: var(--color-neutral-variant-95);
+  --color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
+  --color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
+  --color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
+  --color-hover-variant: rgba(93, 52, 242, 8%); // 8% Primary-40
+  --color-pressed-variant: rgba(93, 52, 242, 12%); // 12% Primary-40
+  --color-focused-variant: rgba(93, 52, 242, 16%); // 16% Primary-40
+
+  // Shadows
+  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
+
+  // Client specific variables (not available in design system)
+  --color-danger-toast-background: var(--color-error-95);
+  --color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
+  --color-tooltip-background: #34353f; // dark theme Surface-4
+  --color-tooltip-text: var(--color-neutral-99);
+  --color-overlay: rgba(0, 0, 0, 30%);
+  --color-drawer-overlay: rgba(0, 0, 0, 40%);
+  --color-guide-dropdown-background: var(--color-white);
+  --color-guide-dropdown-border: var(--color-border);
+  --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
+}
+
+@mixin dark {
+  // tonal palettes
+  --color-all-0: #fff;
+  --color-all-100: #000;
+  --color-primary-10: #fffbff;
+  --color-primary-20: #f5eeff;
+  --color-primary-30: #e6deff;
+  --color-primary-40: #cabeff;
+  --color-primary-50: #af9eff;
+  --color-primary-60: #947dff;
+  --color-primary-70: #7958ff;
+  --color-primary-80: #5d34f2;
+  --color-primary-90: #4300da;
+  --color-primary-95: #2d009d;
+  --color-primary-99: #190064;
+  --color-secondary-10: #fffbf7;
+  --color-secondary-20: #fff480;
+  --color-secondary-30: #f4e560;
+  --color-secondary-40: #d7c947;
+  --color-secondary-50: #baad2d;
+  --color-secondary-60: #9f930d;
+  --color-secondary-70: #847900;
+  --color-secondary-80: #695f00;
+  --color-secondary-90: #4f4700;
+  --color-secondary-95: #373100;
+  --color-secondary-99: #201c00;
+  --color-tertiary-10: #fcfcfc;
+  --color-tertiary-20: #ffeafe;
+  --color-tertiary-30: #ffd5ff;
+  --color-tertiary-40: #faabff;
+  --color-tertiary-50: #f07eff;
+  --color-tertiary-60: #d361e7;
+  --color-tertiary-70: #b545ca;
+  --color-tertiary-80: #9927af;
+  --color-tertiary-90: #7b0093;
+  --color-tertiary-95: #560068;
+  --color-tertiary-99: #350041;
+  --color-error-10: #fcfcfc;
+  --color-error-20: #ffede9;
+  --color-error-30: #ffdad4;
+  --color-error-40: #ffb4a9;
+  --color-error-50: #ff897a;
+  --color-error-60: #ff5449;
+  --color-error-70: #dd3730;
+  --color-error-80: #ba1b1b;
+  --color-error-90: #930006;
+  --color-error-95: #680003;
+  --color-error-99: #410001;
+  --color-neutral-10: #f7f8f8;
+  --color-neutral-20: #eff1f1;
+  --color-neutral-30: #e0e3e3;
+  --color-neutral-40: #c4c7c7;
+  --color-neutral-50: #a9acac;
+  --color-neutral-60: #8e9192;
+  --color-neutral-70: #747778;
+  --color-neutral-80: #5c5f60;
+  --color-neutral-90: #444748;
+  --color-neutral-95: #2d3132;
+  --color-neutral-99: #191c1d;
+  --color-neutral-variant-10: #fffbff;
+  --color-neutral-variant-20: #f3effa;
+  --color-neutral-variant-30: #e5e1ec;
+  --color-neutral-variant-40: #c9c5d0;
+  --color-neutral-variant-50: #adaab4;
+  --color-neutral-variant-60: #928f9a;
+  --color-neutral-variant-70: #78767f;
+  --color-neutral-variant-80: #5f5d67;
+  --color-neutral-variant-90: #47464e;
+  --color-neutral-variant-95: #302f38;
+  --color-neutral-variant-99: #1b1b22;
+  --color-success-10: #ebf9eb;
+  --color-success-20: #bdefbd;
+  --color-success-30: #9fe79f;
+  --color-success-40: #83da85;
+  --color-success-50: #68be6c;
+  --color-success-60: #4ea254;
+  --color-success-70: #32873d;
+  --color-success-80: #116d26;
+  --color-success-90: #005314;
+  --color-success-95: #00390b;
+  --color-success-99: #002106;
+  --color-alert-10: #fff5eb;
+  --color-alert-20: #ffeedc;
+  --color-alert-30: #ffddb5;
+  --color-alert-40: #ffb95a;
+  --color-alert-50: #eb9918;
+  --color-alert-60: #ca8000;
+  --color-alert-70: #a76900;
+  --color-alert-80: #865300;
+  --color-alert-90: #663e00;
+  --color-alert-95: #472a00;
+  --color-alert-99: #2b1700;
+
+  // color aliases
+  --color-primary: var(--color-primary-70);
+  --color-on-primary: var(--color-all-0);
+  --color-primary-container: var(--color-primary-30);
+  --color-on-primary-container: var(--color-primary-30);
+  --color-secondary: var(--color-secondary-70);
+  --color-on-secondary: var(--color-all-0);
+  --color-secondary-container: var(--color-secondary-90);
+  --color-on-secondary-container: var(--color-secondary-30);
+  --color-tertiary: var(--color-tertiary-70);
+  --color-on-tertiary: var(--color-all-0);
+  --color-tertiary-container: var(--color-tertiary-90);
+  --color-on-tertiary-container: var(--color-tertiary-30);
+  --color-error: var(--color-error-70);
+  --color-on-error: var(--color-all-0);
+  --color-error-container: var(--color-error-90);
+  --color-on-error-container: var(--color-error-30);
+  --color-background: var(--color-neutral-99);
+  --color-on-background: var(--color-neutral-10);
+  --color-surface: var(--color-neutral-99);
+  --color-surface-1: #25272b; // Neutral-99 + 2% Neutral-40 + 5% Primary-80
+  --color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-40 + 8% Primary-80
+  --color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-40 + 11% Primary-80
+  --color-surface-4: #34353f; // Neutral-99 + 2% Neutral-40 + 14% Primary-80
+  --color-surface-5: #383844; // Neutral-99 + 2% Neutral-40 + 16% Primary-80
+  --color-on-surface: var(--color-neutral-10);
+  --color-surface-variant: var(--color-neutral-variant-90);
+  --color-on-surface-variant: var(--color-neutral-variant-40);
+  --color-outline: var(--color-neutral-variant-60);
+  --color-primary-hover: var(--color-primary-60);
+  --color-primary-pressed: var(--color-primary-80);
+  --color-danger-hover: var(--color-error-60);
+  --color-danger-pressed: var(--color-error-80);
+  --color-text: var(--color-neutral-10);
+  --color-text-link: var(--color-primary-40);
+  --color-icon: var(--color-neutral-50);
+  --color-caption: var(--color-neutral-50);
+  --color-border: var(--color-neutral-80);
+  --color-divider: var(--color-neutral-90);
+  --color-disabled: var(--color-neutral-80);
+  --color-base: var(--color-surface);
+  --color-layer-1: var(--color-surface-2);
+  --color-layer-2: var(--color-surface-4);
+  --color-float: var(--color-surface-4);
+  --color-layer-light: var(--color-surface-4);
+  --color-inverse-surface: var(--color-neutral-20);
+  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-inverse-primary: var(--color-primary-80);
+  --color-shadow: var(--color-all-100);
+  --color-white: #fff;
+  --color-button-icon: var(--color-primary-20);
+  --color-icon-background: #3a3b59;
+  --color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
+  --color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
+  --color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
+  --color-hover-variant: rgba(202, 190, 255, 8%); // 8% Primary-40
+  --color-pressed-variant: rgba(202, 190, 255, 12%); // 12% Primary-40
+  --color-focused-variant: rgba(202, 190, 255, 16%); // 16% Primary-40
+
+  // Shadows
+  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
+
+  // Client specific variables (not available in design system)
+  --color-danger-toast-background: var(--color-error-99);
+  --color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
+  --color-tooltip-background: var(--color-surface-4);
+  --color-tooltip-text: var(--color-neutral-10);
+  --color-overlay: rgba(0, 0, 0, 30%);
+  --color-drawer-overlay: rgba(0, 0, 0, 60%);
+  --color-guide-dropdown-background: var(--color-neutral-variant-80);
+  --color-guide-dropdown-border: var(--color-neutral-variant-70);
+  --color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
+}

package/scss/_fonts.scss

@@ -0,0 +1,32 @@
+$font-family:
+  -apple-system,
+  system-ui,
+  'BlinkMacSystemFont',
+  'Segoe UI',
+  'Roboto',
+  'Helvetica Neue',
+  'Helvetica',
+  'Arial',
+  sans-serif,
+  'Apple Color Emoji';
+
+:root {
+  --font-family: #{$font-family};
+  --font-headline-large: 600 32px/40px #{$font-family};
+  --font-headline-medium: 600 28px/36px #{$font-family};
+  --font-headline-small: 600 24px/32px #{$font-family};
+  --font-title-large: 600 20px/28px #{$font-family};
+  --font-title-medium: 600 16px/24px #{$font-family};
+  --font-title-small: 600 14px/20px #{$font-family};
+  --font-label-large: 500 14px/20px #{$font-family};
+  --font-label-medium: 500 12px/16px #{$font-family};
+  --font-label-small: 500 11px/16px #{$font-family};
+  --font-body-large: 400 16px/24px #{$font-family};
+  --font-body-medium: 400 14px/20px #{$font-family};
+  --font-body-small: 400 12px/16px #{$font-family};
+  --font-subhead-1: 500 16px/24px #{$font-family};
+  --font-subhead-2: 500 14px/20px #{$font-family};
+  --font-subhead-cap: 700 12px/16px #{$font-family};
+  --font-subhead-cap-small: 700 10px/16px #{$font-family};
+  --font-button: 500 14px/20px #{$font-family};
+}