refactor: added box-shadows

edx · Dec 27, 2023 · ea56aba · ea56aba
1 parent 967a5e2
commit ea56aba
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 7 deletions.
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
@@ -5,8 +5,8 @@
 // Alerts
 
 .alert-dismissible .close {
-  color: theme-color("gray");
   opacity: 1;
+  color: theme-color("gray");
 
   &:hover {
     color: theme-color("gray");

diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css
@@ -1,6 +1,6 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Sun, 23 Jul 2023 16:09:04 GMT
+ * Generated on Fri, 25 Aug 2023 10:06:17 GMT
  */
 
diff --git a/paragon/css/themes/light/variables.css b/paragon/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 Thu, 10 Aug 2023 08:21:39 GMT
+ * Generated on Fri, 25 Aug 2023 10:06:18 GMT
  */
 
 :root {
@@ -63,8 +63,12 @@
   --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
   --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
   --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-image-thumbnail-box-shadow: none;
-  --pgn-elevation-form-input-base: none;
+  --pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
+  --pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
+  --pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075);
+  --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
   --pgn-color-info-base: #00688DFF;
   --pgn-color-tooltip-bg-base: #00262BFF;
   --pgn-color-tooltip-light: #00262BFF;
@@ -231,6 +235,8 @@
   --pgn-elevation-box-shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
   --pgn-elevation-box-shadow-base: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
   --pgn-elevation-toast-box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15);
+  --pgn-elevation-form-control-select-border-focus: inset 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-elevation-form-control-indicator-checked-focus: inset 0 1px 1px rgba(0, 0, 0, .075);
   --pgn-elevation-popover-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
   --pgn-elevation-modal-content-box-shadow-sm-up: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
   --pgn-elevation-dropdown-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
@@ -274,6 +280,7 @@
   --pgn-color-btn-border-inverse-outline-primary: #707070FF;
   --pgn-color-btn-bg-inverse-brand: #D23228FF;
   --pgn-color-input-btn-focus: #00262BFF;
+  --pgn-elevation-form-input-focus: 0 0 0 1px #00262BFF;
   --pgn-color-btn-disabled-border-inverse-outline-primary: #707070FF;
   --pgn-color-btn-disabled-text-inverse-warning: #D6B600FF;
   --pgn-color-btn-disabled-text-outline-warning: #D6B600FF;

diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
@@ -0,0 +1,13 @@
+{
+  "elevation": {
+    "code": {
+      "kbd": {
+        "box-shadow": {
+          "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
+          "type": "shadow",
+          "source": "$kbd-box-shadow"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
@@ -2,7 +2,47 @@
   "elevation": {
     "form": {
       "input": {
-        "base": { "value": "none" }
+        "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)" },
+        "focus": {
+          "value": "{elevation.input.btn-focus.box-shadow}",
+          "type": "shadow",
+          "source": "$input-focus-box-shadow"
+        }
+      },
+      "control": {
+        "indicator": {
+          "checked": {
+            "focus": {
+              "value": "{elevation.form.input.base}",
+              "type": "shadow",
+              "source": "$custom-control-indicator-focus-box-shadow"
+            }
+          }
+        },
+        "range": {
+          "track": {
+            "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)",
+            "type": "shadow",
+            "source": "$custom-range-track-box-shadow"
+          },
+          "thumb": {
+            "base": {
+              "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
+            }
+          }
+        },
+        "select": {
+          "border": {
+            "base": {
+              "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$custom-select-box-shadow"
+            },
+            "focus": {
+              "value": "{elevation.form.control.select.border.base}",
+              "type": "shadow",
+              "source": "$custom-select-focus-box-shadow"
+            }
+          }
+        }
       }
     }
   }

diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
@@ -2,7 +2,7 @@
   "elevation": {
     "image": {
       "thumbnail": {
-        "box-shadow": { "value": "none" }
+        "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)" }
       }
     }
   }