[4.x] Upgrade to Tailwind 3 (#7519)

* [4.x] Tailwind 2.x Shift (#7495) * Bump Tailwind dependencies * Shift Tailwind config * Shift core Tailwind utilities * Convert to Tailwind 2.0 colors * Normalize `@apply` utility names * Revert "Convert to Tailwind 2.0 colors" This reverts commit bc898ed. * bring back enough config to compile * strip out old spacing in preparation for find + replace session * don't need custom minHeights * go back to 2 spaces to simplify the diff * Migrate our custom Tailwind sizing scale to Tailwind defaults (#7499) Co-authored-by: Jack McDade <[email protected]> --------- Co-authored-by: Shift <[email protected]> Co-authored-by: Jason Varga <[email protected]> Co-authored-by: Jesse Leite <[email protected]> * Tailwind 3.x Shift (#7511) * Bump Tailwind dependencies * Configure JIT mode * Shift core Tailwind utilities * Streamline Tailwind config file * go back to 2 spaces * revert unwanted removal --------- Co-authored-by: Shift <[email protected]> * wip * Replace SCSS comments with CSS equivalents Co-Authored-By: Jesse Leite <[email protected]> * wip Co-Authored-By: Jesse Leite <[email protected]> * Refactor away SCSS vars, mixins, extends, and general cleanup * Slide closer to tailwind defaults for borders, radius, and letters. * Get rid of superfluous blue-dark and blue-darker, consolidate more TW config * Remove unused breadcrumbs component styles * Switch grey to a 100-900 scale instead of 10-90 * playing with color * all greys are now gray * finally center that little elusive booger * set a few better default text colors * Round that 'tar * Remove unused alerts component styles * Restructure, round out, and refactor colors * Remove unused normalization * Remove utilities now present in TW3 * Remove a few last remnants of SCSS * Remove unused animations --------- Co-authored-by: Shift <[email protected]> Co-authored-by: Jason Varga <[email protected]> Co-authored-by: Jesse Leite <[email protected]>
statamic · Feb 11, 2023 · 76a4b03 · 76a4b03
1 parent 7580f19
commit 76a4b03
Show file tree

Hide file tree

Showing 315 changed files with 29,434 additions and 10,876 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -92,11 +92,14 @@
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@vitejs/plugin-vue2": "^2.2.0",
+    "autoprefixer": "^10.4.0",
+    "babel-jest": "^24.9.0",
     "cross-env": "^5.2.1",
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
     "laravel-vite-plugin": "^0.7.2",
-    "tailwindcss": "^1.9.0",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.0",
     "vite": "^4.0.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,8 @@
 module.exports = {
-    plugins: [
-        require('tailwindcss'),
-        require('autoprefixer'),
-    ],
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 };
diff --git a/resources/sass/components/array.scss → resources/css/components/array.css b/resources/sass/components/array.scss → resources/css/components/array.css
@@ -16,7 +16,7 @@
     }
 
     th {
-        @apply border-r p-1 bg-grey-30;
+        @apply border-r p-2 bg-gray-300;
     }
 
     td {
@@ -46,12 +46,12 @@
     }
 
     td:focus-within {
-        @apply bg-grey-20;
+        @apply bg-gray-200;
     }
 
-    // Read Only
+    /* Read Only */
     .read-only-field & {
-        th { @apply text-grey-50; }
-        tr td { @apply bg-grey-20; }
+        th { @apply text-gray-500; }
+        tr td { @apply bg-gray-200; }
     }
 }
diff --git a/resources/sass/components/assets.scss → resources/css/components/assets.css b/resources/sass/components/assets.scss → resources/css/components/assets.css
@@ -2,9 +2,7 @@
    ASSETS
    ========================================================================== */
 
-// only used in the folder editor now.
 .asset-modal {
-	// Saving overlay
 	.saving {
 		position: absolute;
 		top: 0;
@@ -33,7 +31,7 @@
 
 .drag-notification {
     @apply text-lg absolute inset-0 text-center rounded flex items-center justify-center;
-    border: 1px dashed theme('colors.grey-60');
+    border: 1px dashed theme('colors.gray.600');
     pointer-events: none;
     z-index: 1049;
     background: rgba(white, .9);
@@ -56,7 +54,7 @@
     }
 
     tbody tr td {
-        @apply p-1;
+        @apply p-2;
     }
 
 }
@@ -160,9 +158,7 @@
     }
 
     .asset-meta {
-        @apply border-t w-full;
-        font-size: 12px;
-        color: $color_gray_light;
+        @apply border-t w-full text-2xs text-gray-700;
     }
 
     .asset-filename {
@@ -178,16 +174,11 @@
     .asset-thumb-container:hover .asset-controls {
         display: block;
     }
-
-    &.is-selected {
-        background: rgba($color_dark_blue, .07);
-        border-radius: 4px;
-    }
 }
 
 .asset-tile.selected {
     @apply border-blue;
-    box-shadow: 0 0 0 1px theme('colors.blue');
+    box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
 
 }
 
@@ -243,16 +234,16 @@
     @apply flex flex-1 items-center;
 
     .meta-item {
-  		@apply flex items-start flex-col border-l px-2 h-full justify-center;
+  		@apply flex items-start flex-col border-l px-4 h-full justify-center;
       cursor: text;
     }
 
     .meta-label {
-		@apply block p-0 text-sm text-grey-80;
+		@apply block p-0 text-sm text-gray-800;
     }
 
 	.meta-value {
-		@apply block p-0 text-xs text-grey-60;
+		@apply block p-0 text-xs text-gray-600;
     }
 }
 
@@ -269,15 +260,15 @@
         padding: 0 25px;
 
         &:not(:first-child) {
-            border-left: 1px solid $border;
+            @apply border;
         }
         svg { opacity: .75; }
         &:hover svg { opacity: 1; }
     }
 }
 
 .asset-editor .editor-preview {
-	@apply bg-grey-80 flex flex-col justify-between;
+	@apply bg-gray-800 flex flex-col justify-between;
 
     .editor-preview-image {
         flex: 1;
@@ -300,10 +291,10 @@
     }
 
     .editor-file-actions {
-		@apply bg-grey-90 p-2 text-center h-16;
+		@apply bg-gray-900 p-4 text-center h-16;
 
         button {
-            @apply mx-sm;
+            @apply mx-1;
         }
     }
 }

diff --git a/resources/sass/components/blueprints.scss → resources/css/components/blueprints.css b/resources/sass/components/blueprints.scss → resources/css/components/blueprints.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .blueprint-section {
-    @apply p-1 min-h-48 outline-none;
+    @apply p-2 min-h-40 outline-none;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
@@ -17,14 +17,14 @@
 .blueprint-drag-handle {
     @apply flex-none;
     cursor: move;
-    background: rgba(black, 0.01) url('../svg/drag-dots.svg') 50% 50% no-repeat;
+    background: rgba(0, 0, 0, 0.01) url('../svg/drag-dots.svg') 50% 50% no-repeat;
 }
 
 .blueprint-section-field {
-    @apply relative mb-1 px-sm z-10 outline-none;
+    @apply relative mb-2 px-1 z-10 outline-none;
 
     .blueprint-section-field-inner {
-        @apply relative border rounded bg-grey-20 shadow-sm flex outline-none z-10;
+        @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
     }
 
     &.draggable-source--is-dragging {
@@ -36,22 +36,22 @@
     }
 }
 
-// Use specific selector because we don't want it to happen
-// when used inside  a grid field configuratormajig.
+/*  Use specific selector because we don't want it to happen */
+/*  when used inside  a grid field configuratormajig. */
 .blueprint-section .blueprint-section-field-actions > div {
     @apply w-1/2;
 }
 
 .blueprint-section-import {
     &:before {
         content: '';
-        @apply border rounded absolute bg-grey-20 shadow-sm;
+        @apply border rounded absolute bg-gray-200 shadow-sm;
         top: -3px; left: 6px; right: 0; bottom: 3px; z-index: 1;
     }
 }
 
-// These are applied here rather than the utility classes so they don't override
-// the inline widths defined by the draggable library.
+/*  These are applied here rather than the utility classes so they don't override */
+/*  the inline widths defined by the draggable library. */
 .blueprint-section-field-w-1\/4 { @apply w-1/4 };
 .blueprint-section-field-w-1\/3 { @apply w-1/3 };
 .blueprint-section-field-w-1\/2 { @apply w-1/2 };
@@ -60,22 +60,22 @@
 .blueprint-section-field-w-full { @apply w-full };
 
 .blueprint-add-section-container {
-    @apply p-1 flex min-h-48;
+    @apply p-2 flex min-h-40;
 
     .draggable-container--is-dragging & {
         display: none;
     }
 }
 
 .blueprint-add-section-button {
-    @apply relative w-full border border-grey-50 border-dashed rounded flex justify-center items-center text-grey-70;
+    @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
 
     &:hover {
-        @apply border-grey text-grey-100;
+        @apply border-gray text-gray-950;
     }
 
     .blueprint-section-draggable-zone {
-        @apply absolute inset-0 p-2;
+        @apply absolute inset-0 p-4;
     }
 
     .blueprint-section-field {
@@ -96,7 +96,7 @@
     cursor: pointer;
 
     .field-width-label {
-        @apply absolute text-4xs font-bold w-full text-center z-10 text-grey-70;
+        @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700;
         top: 3px;
         pointer-events: none;
     }
@@ -106,15 +106,15 @@
     }
 
     .field-width-notch {
-        @apply relative border border-grey-40 border-l-0;
+        @apply relative border border-gray-400 border-l-0;
         width: 8px;
 
         &.notch-25 {
             @apply border-l rounded-l-sm;
         }
 
         &.filled {
-            @apply border-grey-40 border-r-0 bg-white;
+            @apply border-gray-400 border-r-0 bg-white;
             margin: -1px 0;
         }
 

diff --git a/resources/sass/components/cards.scss → resources/css/components/cards.css b/resources/sass/components/cards.scss → resources/css/components/cards.css
@@ -3,9 +3,9 @@
    ========================================================================== */
 
 .card {
-    @apply .shadow .bg-white .rounded-md .p-1;
+    @apply shadow bg-white rounded-md p-2;
 }
 
 @screen md {
-    .card { @apply .p-2; }
+    .card { @apply p-4; }
 }
diff --git a/resources/sass/components/column-picker.scss → resources/css/components/column-picker.css b/resources/sass/components/column-picker.scss → resources/css/components/column-picker.css
@@ -15,13 +15,13 @@
         }
 
         &:hover  {
-            @apply bg-grey-20;
+            @apply bg-gray-200;
         }
 
-        // Drag interaction
+        /*  Drag interaction */
         &.draggable-mirror,
         &.draggable-source--is-dragging {
-            // @apply bg-white;
+            /*  @apply bg-white; */
             cursor: grabbing;
         }
     }

diff --git a/resources/sass/components/configure.scss → resources/css/components/configure.css b/resources/sass/components/configure.scss → resources/css/components/configure.css
@@ -7,10 +7,10 @@
            @apply border-b;
        }
 
-       // Push toggle off to the right
+       /*  Push toggle off to the right */
        > .publish-fields > .toggle-fieldtype {
            @apply flex justify-between items-center;
            .help-block, .help-block p { @apply mb-0; }
-           .field-inner { @apply pr-4; }
+           .field-inner { @apply pr-8; }
        }
    }
diff --git a/resources/sass/components/dashboard.scss → resources/css/components/dashboard.css b/resources/sass/components/dashboard.scss → resources/css/components/dashboard.css
diff --git a/...ces/sass/components/fieldtypes/array.scss → ...urces/css/components/fieldtypes/array.css b/...ces/sass/components/fieldtypes/array.scss → ...urces/css/components/fieldtypes/array.css
@@ -28,18 +28,12 @@
         tr > :last-child { border-right: 0; }
     }
 
-    // Dynamic Mode
+    /*  Dynamic Mode */
     .array-dynamic .btn {
+        @apply text-blue block w-full h-auto border-0 text-left shadow-none;
         background: #f4f4f4;
-        color: $brand-primary;
         padding: 10px 10px 11px;
-        display: block;
-        width: 100%;
-        height: auto;
-        box-shadow: none;
-        border: 0;
         margin: 15px 0 0;
-        text-align: left;
 
         &:hover, &:active, &:focus {
             top: 0;

diff --git a/...es/sass/components/fieldtypes/assets.scss → ...rces/css/components/fieldtypes/assets.css b/...es/sass/components/fieldtypes/assets.scss → ...rces/css/components/fieldtypes/assets.css
@@ -7,24 +7,27 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex items-center px-2 py-1 bg-grey-20 border rounded;
+    @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
 
     &.is-expanded {
         @apply border-b-0 rounded-b-none;
     }
 
     .asset-upload-control {
-      @apply ml-2;
+      @apply ml-4;
     }
 
     .upload-text-button {
-        @apply text-blue underline whitespace-no-wrap;
+        @apply text-blue underline whitespace-nowrap;
         &:hover {
-            @apply text-blue-dark;
+            @apply text-blue-800;
         }
     }
 }
 
+.assets-fieldtype .drag-drop-text {
+    @apply ml-1;
+}
 
 
 /* Inside a Grid
@@ -59,8 +62,8 @@
     display: none;
 }
 
-// Only show the trash button when its a solo field.
-// Probably better as a template condition but difficult at the moment.
+/*  Only show the trash button when its a solo field. */
+/*  Probably better as a template condition but difficult at the moment. */
 .assets-fieldtype .delete-bard-set {
     display: none;
     .bard-set-solo & { display: block; }
@@ -71,5 +74,5 @@
 /* Responsive Wangjangling
   ========================================================================== */
 
-// hide the 'or drag to upload' text when too narrow
+/*  hide the 'or drag to upload' text when too narrow */
 .assets-fieldtype .narrow .assets-fieldtype-picker .drag-drop-text { display: none; }