Artur/eng 7937 create frosted uicolors package (#226)

Co-authored-by: baked <[email protected]>

packages/frosted-ui-colors/.gitignore

@@ -0,0 +1,6 @@
+/node_modules/
+/types
+.DS_Store
+/*.css
+index.js
+index.mjs

packages/frosted-ui-colors/.npmignore

@@ -0,0 +1,8 @@
+/src/
+/scripts/
+.gitignore
+tsconfig.json
+rollup.config.js
+yarn.lock
+pnpm.lock
+package-lock.json

packages/frosted-ui-colors/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Radix
+Copyright (c) 2025 Whop
+
+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.

packages/frosted-ui-colors/README.md

@@ -0,0 +1,17 @@
+# Frosted UI Colors
+
+**A gorgeous, accessible color system used by Whop.**
+
+---
+
+## Documentation
+
+For full documentation, visit [storybook.whop.dev](https://storybook.whop.dev/?path=/docs/guides-3-color--docs).
+
+## Installation
+
+`pnpm add @frosted-ui/colors`
+
+## Acknowledgments
+
+Frosted UI is heavily based on [Radix Colors](https://www.radix-ui.com/colors).

packages/frosted-ui-colors/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@frosted-ui/colors",
+  "private": false,
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "Frosted UI Colors",
+  "main": "index.js",
+  "module": "index.mjs",
+  "types": "types/index.d.ts",
+  "scripts": {
+    "build": "pnpm clean && pnpm install && pnpm rollup -c && pnpm build-css-modules",
+    "build-css-modules": "node ./scripts/build-css-modules.js",
+    "prepublishOnly": "pnpm build",
+    "postpublish": "pnpm clean",
+    "clean": "rm -f *.css index.js index.mjs",
+    "release": "turbo-module publish"
+  },
+  "keywords": [
+    "frosted-ui",
+    "colors"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^8.2.1",
+    "@types/node": "^15.0.3",
+    "@whop-sdk/turbo-module": "^0.0.5",
+    "rollup": "^2.48.0",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
+  }
+}

packages/frosted-ui-colors/rollup.config.js

@@ -0,0 +1,21 @@
+// rollup.config.js
+import typescript from '@rollup/plugin-typescript'
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'index.js',
+      format: 'cjs',
+    },
+    {
+      file: 'index.mjs',
+      format: 'es',
+    },
+  ],
+  plugins: [
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
+  ],
+}

packages/frosted-ui-colors/scripts/build-css-modules.js

@@ -0,0 +1,64 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+const allColorScales = require('../index');
+
+const outputDir = require('../tsconfig.json').compilerOptions.outDir;
+
+const supportsP3AtRule = '@supports (color: color(display-p3 1 1 1))';
+const matchesP3MediaRule = '@media (color-gamut: p3)';
+
+Object.keys(allColorScales)
+  .filter((key) => !key.includes('P3'))
+  .forEach((key) => {
+    let selector = ':root, .light, .light-theme';
+
+    if (key === 'blackA' || key === 'whiteA') {
+      selector = ':root';
+    }
+
+    if (key.includes('Dark')) {
+      selector = '.dark, .dark-theme';
+    }
+
+    const srgbValues = Object.entries(allColorScales).find(
+      ([name]) => name === key,
+    )[1];
+
+    const srgbCssProperties = Object.entries(srgbValues)
+      .map(([name, value]) => [toCssCasing(name), value])
+      .map(([name, value]) => `  --${name}: ${value};`)
+      .join('\n');
+
+    const srgbCssRule = `${selector} {\n${srgbCssProperties}\n}`;
+
+    const p3Values = Object.entries(allColorScales).find(
+      ([name]) => name === key + 'P3' || name === key.replace(/.$/, 'P3A'),
+    )[1];
+
+    const p3CssProperties = Object.entries(p3Values)
+      .map(([name, value]) => [toCssCasing(name), value])
+      .map(([name, value]) => `      --${name}: ${value};`)
+      .join('\n');
+
+    let p3CssRule = `    ${selector} {\n${p3CssProperties}\n    }`;
+    p3CssRule = `  ${matchesP3MediaRule} {\n${p3CssRule}\n  }`;
+    p3CssRule = `${supportsP3AtRule} {\n${p3CssRule}\n}`;
+
+    fs.writeFileSync(
+      path.join(outputDir, toFileName(key) + '.css'),
+      `${srgbCssRule}\n\n${p3CssRule}`,
+    );
+  });
+
+function toCssCasing(str) {
+  return str
+    .replace(/([a-z])(\d)/, '$1-$2')
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase();
+}
+
+function toFileName(str) {
+  return toCssCasing(str).replace(/-a$/, '-alpha');
+}

packages/frosted-ui-colors/src/blackA.ts

@@ -0,0 +1,29 @@
+export const blackA = {
+  blackA1: "rgba(0, 0, 0, 0.05)",
+  blackA2: "rgba(0, 0, 0, 0.1)",
+  blackA3: "rgba(0, 0, 0, 0.15)",
+  blackA4: "rgba(0, 0, 0, 0.2)",
+  blackA5: "rgba(0, 0, 0, 0.3)",
+  blackA6: "rgba(0, 0, 0, 0.4)",
+  blackA7: "rgba(0, 0, 0, 0.5)",
+  blackA8: "rgba(0, 0, 0, 0.6)",
+  blackA9: "rgba(0, 0, 0, 0.7)",
+  blackA10: "rgba(0, 0, 0, 0.8)",
+  blackA11: "rgba(0, 0, 0, 0.9)",
+  blackA12: "rgba(0, 0, 0, 0.95)",
+};
+
+export const blackP3A = {
+  blackA1: "color(display-p3 0 0 0 / 0.05)",
+  blackA2: "color(display-p3 0 0 0 / 0.1)",
+  blackA3: "color(display-p3 0 0 0 / 0.15)",
+  blackA4: "color(display-p3 0 0 0 / 0.2)",
+  blackA5: "color(display-p3 0 0 0 / 0.3)",
+  blackA6: "color(display-p3 0 0 0 / 0.4)",
+  blackA7: "color(display-p3 0 0 0 / 0.5)",
+  blackA8: "color(display-p3 0 0 0 / 0.6)",
+  blackA9: "color(display-p3 0 0 0 / 0.7)",
+  blackA10: "color(display-p3 0 0 0 / 0.8)",
+  blackA11: "color(display-p3 0 0 0 / 0.9)",
+  blackA12: "color(display-p3 0 0 0 / 0.95)",
+};