refactor: refactoring of tokens in the Dropzone component

openedx · Dec 6, 2023 · e61658f · e61658f
1 parent fe8d431
commit e61658f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 24 deletions.
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
@@ -16,19 +16,19 @@
   }
 
   &:hover {
-    box-shadow: var(--pgn-spacing-dropzone-border-hover) solid var(--pgn-color-dropzone-box-shadow-hover);
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    box-shadow: var(--pgn-spacing-dropzone-border-focus) solid var(--pgn-color-dropzone-box-shadow-focus);
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow: var(--pgn-spacing-dropzone-border-error) solid var(--pgn-color-dropzone-box-shadow-error);
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    box-shadow: var(--pgn-spacing-dropzone-border-active) solid var(--pgn-color-dropzone-box-shadow-active);
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 16 Nov 2023 10:44:11 GMT
+ * Generated on Wed, 06 Dec 2023 09:28:09 GMT
  */
 
 :root {
@@ -195,10 +195,6 @@
   --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
   --pgn-spacing-form-input-check-margin-x-base: .25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
-  --pgn-spacing-dropzone-border-error: 2px;
-  --pgn-spacing-dropzone-border-active: 2px;
-  --pgn-spacing-dropzone-border-focus: 2px;
-  --pgn-spacing-dropzone-border-hover: 2px;
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: .625rem;

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 20:38:34 GMT
+ * Generated on Wed, 06 Dec 2023 09:28:09 GMT
  */
 
 :root {
@@ -922,7 +922,6 @@
   --pgn-color-form-input-border: var(--pgn-color-gray-500);
   --pgn-color-form-input-plaintext: var(--pgn-color-body-base);
   --pgn-color-form-input-placeholder: var(--pgn-color-gray-500);
-  --pgn-color-dropzone-border-active: var(--pgn-color-primary-500);
   --pgn-color-dropzone-border-base: var(--pgn-color-gray-500);
   --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500);
   --pgn-color-dropdown-link-active-base: var(--pgn-color-active);
@@ -1131,6 +1130,7 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
   --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-action-default-danger-900: #60161DFF;
@@ -1264,9 +1264,6 @@
   --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base);
   --pgn-color-form-input-focus-border: var(--pgn-color-input-focus);
   --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border);
-  --pgn-color-dropzone-border-error: var(--pgn-color-danger-300);
-  --pgn-color-dropzone-border-focus: var(--pgn-color-info-300);
-  --pgn-color-dropzone-border-hover: var(--pgn-color-info-300);
   --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500);
   --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
   --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
@@ -1471,6 +1468,9 @@
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
+  --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
+  --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
   --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
   --pgn-color-pagination-text-base: var(--pgn-color-link-base);
   --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);

diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
@@ -14,11 +14,7 @@
     "dropzone": {
       "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" },
-        "hover": { "value": "2px", "type": "dimension", "source": "$dropzone-border-hover" },
-        "focus": { "value": "2px", "type": "dimension", "source": "$dropzone-border-focus" },
-        "active": { "value": "2px", "type": "dimension", "source": "$dropzone-border-active" },
-        "error": { "value": "2px", "type": "dimension", "source": "$dropzone-border-error" }
+        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" }
       }
     }
   }

diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
@@ -8,12 +8,16 @@
         "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
       },
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" },
-        "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" },
-        "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" },
-        "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" },
-        "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" }
+        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }
       }
     }
+  },
+  "elevation": {
+    "dropzone": {
+      "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" },
+      "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" },
+      "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" },
+      "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" }
+    }
   }
 }