style: adjust icon size and vertical align

ICIJ · Jul 15, 2024 · 921e0f9 · 921e0f9
1 parent 165ec5e
commit 921e0f9
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 7 deletions.
diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
@@ -176,7 +176,7 @@ const rawSize = computed(() => {
   if (isRawSize.value) {
     return props.size
   }
-  return '1em'
+  return '1.25em'
 })
 
 const style = computed(() => {
@@ -204,8 +204,6 @@ const classList = computed(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--phosphor-icon-raw-size, 1em);
-  width: var(--phosphor-icon-raw-size, 1em);
   @include ph-icon-size($ph-icon-size-scale-base);
  
   @each $size, $value in $ph-icon-sizes {

diff --git a/lib/styles/mixins.scss b/lib/styles/mixins.scss
@@ -41,7 +41,7 @@
 @mixin ph-icon-size ($font-size) {
   font-size: divide($font-size, $ph-icon-size-scale-base) * 1em;
   line-height: divide(1, $font-size) * 1em;
-  vertical-align: (divide(3, $font-size) - divide(3, 8)) * 1em;
+  vertical-align: (divide(4, $font-size) - divide(3, 7)) * 1em;
 }
 
 @mixin ph-icon-layers-size($font-size) {

diff --git a/lib/styles/variables.scss b/lib/styles/variables.scss
@@ -92,7 +92,7 @@ $tooltip-opacity: 1 !default;
 
 $alert-border-width: 0 !default;
 
-$ph-icon-size-scale-base: 18 !default;
+$ph-icon-size-scale-base: 20 !default;
 
 $ph-icon-size-scale-2xs: 12 !default;
 $ph-icon-size-scale-xs: 14 !default;

diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
@@ -98,8 +98,7 @@ export const VariantSecondary = {
 export const WithText = {
   args: {
     name: 'globe',
-    variant: 'primary',
-    size: '1em'
+    variant: 'primary'
   },
   render: (args) => ({
     components: {