@crystallize/design-system 1.11.1 → 1.11.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.11.3
+
+### Patch Changes
+
+- 7b69e70: Replace old colors classes with the proper ones
+
+## 1.11.2
+
+### Patch Changes
+
+- 3cfc9ede: Upgrade tailwindcss to version 3.3.0
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/index.css

@@ -539,43 +539,34 @@ button {
 .relative {
   position: relative;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .left-2 {
   left: 0.5rem;
 }
+.left-6 {
+  left: 1.5rem;
+}
+.right-10 {
+  right: 2.5rem;
+}
 .right-2 {
   right: 0.5rem;
 }
 .top-0 {
   top: 0px;
 }
-.left-6 {
-  left: 1.5rem;
-}
-.right-10 {
-  right: 2.5rem;
+.top-2 {
+  top: 0.5rem;
 }
 .z-50 {
   z-index: 50;
 }
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.mt-8 {
-  margin-top: 2rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 .mb-4 {
   margin-bottom: 1rem;
@@ -586,9 +577,18 @@ button {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
 .block {
   display: block;
 }
@@ -598,12 +598,12 @@ button {
 .inline {
   display: inline;
 }
-.flex {
-  display: flex;
-}
 .\!flex {
   display: flex !important;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
@@ -625,48 +625,48 @@ button {
 .h-24 {
   height: 6rem;
 }
-.h-\[8px\] {
-  height: 8px;
+.h-5 {
+  height: 1.25rem;
+}
+.h-6 {
+  height: 1.5rem;
 }
 .h-\[44px\] {
   height: 44px;
 }
+.h-\[8px\] {
+  height: 8px;
+}
 .h-full {
   height: 100%;
 }
-.h-6 {
-  height: 1.5rem;
+.w-4 {
+  width: 1rem;
 }
-.h-5 {
-  height: 1.25rem;
+.w-5 {
+  width: 1.25rem;
 }
-.w-\[8px\] {
-  width: 8px;
+.w-6 {
+  width: 1.5rem;
 }
 .w-\[44px\] {
   width: 44px;
 }
+.w-\[8px\] {
+  width: 8px;
+}
 .w-full {
   width: 100%;
 }
-.w-6 {
-  width: 1.5rem;
-}
-.w-4 {
-  width: 1rem;
-}
-.w-5 {
-  width: 1.25rem;
-}
-.min-w-\[44px\] {
-  min-width: 44px;
-}
 .min-w-\[150px\] {
   min-width: 150px;
 }
 .min-w-\[200px\] {
   min-width: 200px;
 }
+.min-w-\[44px\] {
+  min-width: 44px;
+}
 .max-w-\[1100px\] {
   max-width: 1100px;
 }
@@ -688,15 +688,15 @@ button {
 .resize {
   resize: both;
 }
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
 .grid-cols-10 {
   grid-template-columns: repeat(10, minmax(0, 1fr));
 }
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
 .grid-cols-\[1fr_1px_1fr\] {
   grid-template-columns: 1fr 1px 1fr;
 }
@@ -724,31 +724,26 @@ button {
 .justify-items-center {
   justify-items: center;
 }
-.gap-6 {
-  gap: 1.5rem;
+.gap-0 {
+  gap: 0px;
 }
-.gap-4 {
-  gap: 1rem;
+.gap-0\.5 {
+  gap: 0.125rem;
 }
 .gap-1 {
   gap: 0.25rem;
 }
-.gap-0\.5 {
-  gap: 0.125rem;
+.gap-4 {
+  gap: 1rem;
 }
-.gap-0 {
-  gap: 0px;
+.gap-6 {
+  gap: 1.5rem;
 }
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -759,6 +754,11 @@ button {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -788,12 +788,12 @@ button {
 .rounded-sm {
   border-radius: 0.125rem;
 }
-.border-0 {
-  border-width: 0px;
-}
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -804,37 +804,37 @@ button {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
 }
+.\!bg-purple-50-900 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
+}
+.bg-elevate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+}
 .bg-gray {
   background-color: rgb(var(--c-color-gray));
 }
-.bg-gray-50-900 {
+.bg-gray-100-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
 }
-.bg-white {
+.bg-gray-50-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
 }
 .bg-purple-50-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.\!bg-purple-50-900 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
-}
-.bg-gray-100-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
-}
-.bg-\[length\:18px_18px\] {
-  background-size: 18px 18px;
+.bg-\[length\:16px_16px\] {
+  background-size: 16px 16px;
 }
 .bg-\[length\:17px_17px\] {
   background-size: 17px 17px;
 }
-.bg-\[length\:16px_16px\] {
-  background-size: 16px 16px;
+.bg-\[length\:18px_18px\] {
+  background-size: 18px 18px;
 }
 .bg-\[length\:20px_20px\] {
   background-size: 20px 20px;
@@ -845,14 +845,18 @@ button {
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
 .p-\[5px\] {
   padding: 5px;
 }
-.p-10 {
-  padding: 2.5rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .px-3 {
   padding-left: 0.75rem;
@@ -862,21 +866,17 @@ button {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 .py-0\.5 {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .text-center {
   text-align: center;
@@ -899,6 +899,12 @@ button {
     "Segoe UI Symbol",
     "Noto Color Emoji";
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[14px\] {
+  font-size: 14px;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -907,21 +913,15 @@ button {
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.text-\[14px\] {
-  font-size: 14px;
-}
-.text-\[10px\] {
-  font-size: 10px;
-}
-.font-normal {
-  font-weight: 400;
-}
 .font-bold {
   font-weight: 700;
 }
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .italic {
   font-style: italic;
 }
@@ -931,10 +931,6 @@ button {
 .text-gray {
   color: rgb(var(--c-color-gray));
 }
-.text-gray-700-200 {
-  --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
-}
 .text-gray-300-600 {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
@@ -943,6 +939,10 @@ button {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
 }
+.text-gray-700-200 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+}
 .text-pink-600-300 {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
@@ -953,12 +953,12 @@ button {
 .opacity-100 {
   opacity: 1;
 }
-.opacity-60 {
-  opacity: 0.6;
-}
 .opacity-30 {
   opacity: 0.3;
 }
+.opacity-60 {
+  opacity: 0.6;
+}
 .opacity-80 {
   opacity: 0.8;
 }
@@ -1532,10 +1532,7 @@ button {
 }
 .c-dialog-overlay {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   z-index: 10;
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
@@ -3211,13 +3208,13 @@ button {
   will-change: transform;
   box-sizing: border-box;
   position: absolute;
-  top: 0px;
   left: 0px;
+  top: 0px;
   z-index: 10;
   display: flex;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
   padding: 0.25rem;
   opacity: 0;
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -85,12 +85,12 @@
     "storybook": "7.0.0-beta.14",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
-    "tailwindcss": "^3.2.4",
-    "tsconfig": "0.0.0",
+    "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
     "vite": "^4.1.1",
-    "vitest": "^0.29.1"
+    "vitest": "^0.29.1",
+    "tsconfig": "0.0.0"
   },
   "keywords": [
     "react",

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -5,7 +5,7 @@
   height: 43px;
   will-change: transform;
   box-sizing: border-box;
-  @apply absolute top-0 left-0 z-10 flex rounded-md bg-white p-1 opacity-0 shadow-md;
+  @apply absolute left-0 top-0 z-10 flex rounded-md bg-elevate p-1 opacity-0 shadow-md;
 }
 
 .c-floating-text-format-popup button.popup-item {

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof RichTextEditor> = {
   decorators: [
     Story => (
       <div className="bg-gray-50-900 p-10">
-        <div className="shadow-md border-red bg-white max-w-[1100px] mx-auto rounded-md">
+        <div className="shadow-md border-red bg-elevate max-w-[1100px] mx-auto rounded-md">
           <Story />
         </div>
       </div>