[FX-NULL] Add PoC on Tailwind preset inheritance

packages/base-tailwind/src/index.js

@@ -1,4 +1,34 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  theme: {},
+  // Place for base semantic tokens
+  theme: {
+    colors: {
+      white: '#FFFFFF',
+      black: '#000000',
+      blue: {
+        100: '#EDF1FD',
+        150: '#D5DEFA',
+      },
+    },
+    blur: {
+      4: '4px',
+      8: '8px',
+      12: '12px',
+      32: '32px',
+    },
+    borderWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+    },
+    borderRadius: {
+      0: '0px',
+      1: '4px',
+      2: '8px',
+      3: '12px',
+      25: '100px',
+      999: '999px',
+    },
+  },
 }

packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx

@@ -56,6 +56,40 @@ export const AvatarWrapper = (props: Props) => {
       <div
         className={twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white')}
       >
+        <div>
+          <p className='text-xxl text-white'>Test text white</p>
+          <p className='text-xxl text-blue-100'>Test text blue 100</p>
+          <p className='text-xxl text-blue-150'>Test text blue 150</p>
+          <p className='text-xxl text-blue-200'>Test text blue 200</p>
+        </div>
+        <div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-blue-150'
+          >
+            Color from Base preset, should be blue
+          </div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-red-100'
+          >
+            Color from Picasso preset, should be red
+          </div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-custom-9000'
+          >
+            Color from Caliber preset, should be pink
+          </div>
+        </div>
+        <div>
+          <div className='w-[300px] h-[100px] bg-blue-100 opacity-1'>
+            Opacity 1 (from Caliber)
+          </div>
+          <div className='w-[300px] h-[100px] bg-blue-100 opacity-10'>
+            Opacity 10 (from Picasso)
+          </div>
+        </div>
         <div
           style={style}
           data-testid={dataTestId}

packages/caliber-tailwind/CHANGELOG.md

@@ -0,0 +1,125 @@
+# @toptal/picasso-tailwind
+
+## 2.8.0
+
+### Minor Changes
+
+- [#4430](https://github.com/toptal/picasso/pull/4430) [`27d596a`](https://github.com/toptal/picasso/commit/27d596a3bb913923f7d7e577ac3a7b6f9045b42f) Thanks [@sashuk](https://github.com/sashuk)!
+- add snackbar `zIndex` value
+
+## 2.7.0
+
+### Minor Changes
+
+- [#4414](https://github.com/toptal/picasso/pull/4414) [`c06cf2c`](https://github.com/toptal/picasso/commit/c06cf2c21d6cd294ef4903613268e747670f252b) Thanks [@AdrianContiu](https://github.com/AdrianContiu)!
+
+### picasso-tailwind
+
+- add new colors to tailwindCss configuration
+
+### Patch Changes
+
+- [#4345](https://github.com/toptal/picasso/pull/4345) [`6716e0b`](https://github.com/toptal/picasso/commit/6716e0bb3178a7f452f2c79ce56dd524e9bd8685) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Picasso Tailwind Config
+
+- added animations required to make `Loader` work
+
+## 2.6.1
+
+### Patch Changes
+
+- [#4377](https://github.com/toptal/picasso/pull/4377) [`9bd24fbde266515ac9d4baa98e0b5625616b7e22`](https://github.com/toptal/picasso/commit/9bd24fbde266515ac9d4baa98e0b5625616b7e22) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+- remove `module` entry from `package.json`
+
+## 2.6.0
+
+### Minor Changes
+
+- [#4320](https://github.com/toptal/picasso/pull/4320) [`75540be4ee8bd57c4da93ae725782c39c7cf85b2`](https://github.com/toptal/picasso/commit/75540be4ee8bd57c4da93ae725782c39c7cf85b2) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- add `currentColor` to tailwindCss configuration
+
+## 2.5.1
+
+### Patch Changes
+
+- [#4321](https://github.com/toptal/picasso/pull/4321) [`d03712b77511528d0139da4b5ef74e797d64446c`](https://github.com/toptal/picasso/commit/d03712b77511528d0139da4b5ef74e797d64446c) Thanks [@ruslan-sed](https://github.com/ruslan-sed)!
+- add index.d.ts
+
+## 2.5.0
+
+### Minor Changes
+
+- [#4294](https://github.com/toptal/picasso/pull/4294) [`0c9807b800ed8a992de72f47bc1263d24a2fd4d8`](https://github.com/toptal/picasso/commit/0c9807b800ed8a992de72f47bc1263d24a2fd4d8) Thanks [@dmaklygin](https://github.com/dmaklygin)!
+- add design tokens for Button component
+
+## 2.4.0
+
+### Minor Changes
+
+- [#4276](https://github.com/toptal/picasso/pull/4276) [`045081fe7fed880890cb16d5defd7859d1e0b147`](https://github.com/toptal/picasso/commit/045081fe7fed880890cb16d5defd7859d1e0b147) Thanks [@sashuk](https://github.com/sashuk)!
+- extend maximum width classes with fractions of 12
+  - extend width, height, and padding classes for inputs
+
+## 2.3.0
+
+### Minor Changes
+
+- [#4200](https://github.com/toptal/picasso/pull/4200) [`4ee1ebdafd9e5830d5ec6007620186d5a61befee`](https://github.com/toptal/picasso/commit/4ee1ebdafd9e5830d5ec6007620186d5a61befee) Thanks [@mkrl](https://github.com/mkrl)!
+- migrate Typography to TailwindCSS
+  - style overrides for Typography have been moved to picasso-provider
+  - added utility classes `font-inherit-weight` and `font-inherit-size` to Picasso Tailwind config
+
+## 2.2.0
+
+### Minor Changes
+
+- [#4173](https://github.com/toptal/picasso/pull/4173) [`d22bf5d913428b586e2813cf530f4e96d46b622e`](https://github.com/toptal/picasso/commit/d22bf5d913428b586e2813cf530f4e96d46b622e) Thanks [@sashuk](https://github.com/sashuk)!
+- add shadows to support elevations in Paper
+
+## 2.1.0
+
+### Minor Changes
+
+- [#4172](https://github.com/toptal/picasso/pull/4172) [`0ccb256c05520b3a21bca08642bdf1cc47be88a2`](https://github.com/toptal/picasso/commit/0ccb256c05520b3a21bca08642bdf1cc47be88a2) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- extend default z-index util classes with z-modal and z-drawer
+
+## 2.0.1
+
+### Patch Changes
+
+- [#4164](https://github.com/toptal/picasso/pull/4164) [`84d579cee65c88aeb6ba58318c43d8deb5201b30`](https://github.com/toptal/picasso/commit/84d579cee65c88aeb6ba58318c43d8deb5201b30) Thanks [@mkrl](https://github.com/mkrl)!
+- migrate to Picasso by Parts
+  - picasso is now distributed as a set of independent packages with the main package `@toptal/picasso` now being a collection of re-exported packages
+
+## 2.0.0
+
+### Major Changes
+
+- [#4146](https://github.com/toptal/picasso/pull/4146) [`83f24c7fb0f60941fff7388253d5812694ac4eae`](https://github.com/toptal/picasso/commit/83f24c7fb0f60941fff7388253d5812694ac4eae) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- override default Tailwind spacings with BASE spacings
+
+## 1.0.1
+
+### Patch Changes
+
+- [#4055](https://github.com/toptal/picasso/pull/4055) [`291c8f812`](https://github.com/toptal/picasso/commit/291c8f812a377d0bcf39b490e316b5ec94f93cfe) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- refactor from typescript to plain javascript
+
+## 1.0.0
+
+### Major Changes
+
+- [#3993](https://github.com/toptal/picasso/pull/3993) [`340319442`](https://github.com/toptal/picasso/commit/34031944299df941dbf42503954ca7f9158f930a) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Tailwind
+
+- release Tailwind configuration package
+
+### Patch Changes
+
+- [#4008](https://github.com/toptal/picasso/pull/4008) [`29eeced5c`](https://github.com/toptal/picasso/commit/29eeced5caf580a71f072736e03d9388b557b855) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Tailwind
+
+- add correct prefix to package.json exports

packages/caliber-tailwind/README.md

@@ -0,0 +1,3 @@
+# `caliber-tailwind`
+
+DO NOT PUSH TO MASTER

packages/caliber-tailwind/bin/build.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+rm -rf ./dist-package
+mkdir ./dist-package
+cp -R ./src ./dist-package
+cp ./README.md ./dist-package/README.md
+cp ./package.json ./dist-package/package.json
+cp ../../LICENSE ./dist-package/LICENSE

packages/caliber-tailwind/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@toptal/caliber-tailwind",
+  "version": "0.0.1",
+  "description": "Caliber Tailwind configuration DO NOT PUSH TO MASTER",
+  "author": "Toptal",
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-tailwind#readme",
+  "license": "MIT",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "scripts": {
+    "build:package": "sh ./bin/build.sh",
+    "prepublishOnly": "yarn build:package"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.10"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.3.5"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

packages/caliber-tailwind/src/index.d.ts

@@ -0,0 +1,5 @@
+export const theme: Partial<
+  CustomThemeConfig & {
+    extend: Partial<CustomThemeConfig>
+  }
+>

packages/caliber-tailwind/src/index.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [],
+  theme: {
+    colors: {
+      custom: {
+        9000: 'pink',
+      },
+    },
+  },
+}

packages/caliber-tailwind/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": { "outDir": "dist-package" },
+  "include": ["src"],
+  "references": []
+}