Add more cases

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

@@ -65,6 +65,14 @@ export const AvatarWrapper = (props: Props) => {
           <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 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.3.6"
+  },
+  "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: {
+    opacity: {
+      0: '0',
+      1: '0.01',
+      2: '0.02',
+    },
+  },
+}

packages/caliber-tailwind/tsconfig.json

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

packages/picasso-tailwind/src/index.js

@@ -12,6 +12,11 @@ module.exports = {
     }),
   ],
   theme: {
+    opacity: {
+      0: '0',
+      10: '0.1',
+      20: '0.2',
+    },
     screens: {
       xs: '0px',
       sm: '480px',
@@ -124,55 +129,6 @@ module.exports = {
         200: theme.colors.black,
       },
     }),
-    // colors: {
-    //   white: '#FFFFFF',
-    //   black: '#000000',
-    //   transparent: 'transparent',
-    //   current: 'currentColor',
-    //   blue: {
-    //     100: '#EDF1FD',
-    //     150: '#D5DEFA',
-    //     400: '#25A9EF',
-    //     500: '#204ECF',
-    //     600: '#183A9E',
-    //     700: '#0F256E',
-    //   },
-    //   green: {
-    //     100: 'var(--color-green-light-100)',
-    //     150: 'var(--color-green-light-150)',
-    //     500: 'var(--color-green-light-500)',
-    //     600: 'var(--color-green-light-600)',
-    //     700: 'var(--color-green-light-700)',
-    //   },
-    //   gray: {
-    //     50: '#FCFCFC',
-    //     100: '#F3F4F6',
-    //     200: '#EBECED',
-    //     300: '#E5E7EA',
-    //     400: '#D8D9DC',
-    //     500: '#C4C6CA',
-    //     600: '#84888E',
-    //   },
-    //   graphite: {
-    //     700: '#455065',
-    //     800: '#262D3D',
-    //     900: '#191E28',
-    //   },
-    //   red: {
-    //     100: '#FBEDF1',
-    //     150: '#F5D8E0',
-    //     500: '#D42551',
-    //   },
-    //   yellow: {
-    //     100: '#FFF5E3',
-    //     150: '#F8E7C8',
-    //     500: '#E59C01',
-    //   },
-    //   purple: {
-    //     500: '#6727CF',
-    //   },
-    //   inheritColor: 'inherit',
-    // },
     extend: {
       zIndex: {
         drawer: 1200,

tailwind.config.js

@@ -1,5 +1,7 @@
 // Ignore missing imports as packages are definitely present in the project
 /* eslint-disable import/no-extraneous-dependencies */
+const picassoPreset = require('@toptal/picasso-tailwind')
+const caliberPreset = require('@toptal/caliber-tailwind')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -8,6 +10,15 @@ module.exports = {
     require('@toptal/base-tailwind'),
     require('@toptal/picasso-tailwind'),
   ],
+  theme: {
+    opacity: {
+      0: caliberPreset.theme.opacity['0'],
+      1: caliberPreset.theme.opacity['1'],
+      2: caliberPreset.theme.opacity['2'],
+      10: picassoPreset.theme.opacity['10'],
+      20: picassoPreset.theme.opacity['20'],
+    }
+  },
   corePlugins: {
     preflight: false,
   },

tsconfig.pkgsrc.json

@@ -11,6 +11,7 @@
     { "path": "packages/picasso-provider" },
     { "path": "packages/picasso-query-builder" },
     { "path": "packages/picasso-rich-text-editor" },
+    { "path": "packages/caliber-tailwind" },
     { "path": "packages/picasso-tailwind" },
     { "path": "packages/picasso-tailwind-merge" },
     { "path": "packages/shared" },