1166 introduce color modifiers

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
-  plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread', "@babel/transform-typescript"],
+  plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread', "@babel/transform-typescript", "@babel/plugin-proposal-private-methods"],
   env: {
     test: {
       presets: [

cypress/integration/tokens.spec.js

@@ -508,15 +508,15 @@ describe('TokenListing', () => {
       value: 'composition.regular',
     });
     cy.get('[data-cy=composition-token-dropdown]').click();
-    cy.get('[data-cy=property-dropdown-menu-element-sizing]').click();
+    cy.get('[data-cy=item-dropdown-menu-element-sizing]').click();
     fillInput({
       input: 'value',
       value: '$sizing.xs',
     });
     cy.get('[data-cy=button-style-add-multiple]').click();
 
     cy.get('[data-cy=composition-token-dropdown]').eq(1).click();
-    cy.get('[data-cy=property-dropdown-menu-element-opacity]').click();
+    cy.get('[data-cy=item-dropdown-menu-element-opacity]').click();
     fillInputNth({
       input: 'value',
       value: '$opacity.30',
@@ -525,7 +525,7 @@ describe('TokenListing', () => {
 
     cy.get('[data-cy=button-style-add-multiple]').click();
     cy.get('[data-cy=composition-token-dropdown]').eq(2).click();
-    cy.get('[data-cy=property-dropdown-menu-element-fontSizes]').click();
+    cy.get('[data-cy=item-dropdown-menu-element-fontSizes]').click();
     fillInputNth({
       input: 'value',
       value: '$font-size.4',

package.json

@@ -41,6 +41,8 @@
     "@sentry/react": "^6.2.5",
     "@stitches/react": "^1.2.8",
     "@storybook/addon-postcss": "^2.0.0",
+    "@types/chroma-js": "^2.1.4",
+    "@types/color": "^3.0.3",
     "@types/file-saver": "^2.0.5",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "autoprefixer": "^10.2.5",
@@ -49,7 +51,9 @@
     "bitbucket": "^2.7.0",
     "buffer": "^6.0.3",
     "case": "^1.6.3",
+    "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
+    "colorjs.io": "^0.4.2",
     "color2k": "^2.0.1",
     "core-js": "^3.9.1",
     "cypress-react-selector": "^2.3.6",
@@ -111,6 +115,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/preset-env": "^7.12.16",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.16",

src/app/components/ColorPickerTrigger.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { styled } from '@/stitches.config';
+
+const TriggerButton = styled('button', {
+  width: '$5',
+  height: '$5',
+  borderRadius: '$2',
+  border: '1px solid $borderMuted',
+  cursor: 'pointer',
+  fontSize: 0,
+});
+
+type Props = {
+  onClick?: () => void;
+  background: string | undefined;
+};
+
+export const ColorPickerTrigger: React.FC<Props> = ({
+  onClick, background,
+}) => (
+  <TriggerButton
+    type="button"
+    css={{ background }}
+    onClick={onClick}
+  />
+);