Iteration

epicmaxco · Apr 30, 2024 · 68e2d18 · 68e2d18
1 parent 5177eb3
commit 68e2d18
Show file tree

Hide file tree

Showing 22 changed files with 290 additions and 211 deletions.
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -3,6 +3,7 @@
     class="va-avatar"
     :class="classesComputed"
     :style="computedStyle"
+    v-bind="variablesComputed"
   >
     <va-progress-circle
       v-if="$props.loading"
@@ -88,16 +89,13 @@ const backgroundColorComputed = computed(() => {
 
 const { textColorComputed } = useTextColor(backgroundColorComputed)
 
-const variablesComputed = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
 const computedStyle = computed(() => ({
-  ...variablesComputed.value,
   fontSize: props.fontSize,
 }))
 
-const classesComputed = useBem('va-avatar', () => ({
-  ...pick(props, ['square']),
-}))
+const classesComputed = useBem('va-avatar', () => pick(props, ['square']))
 
 const hasLoadError = ref(false)
 
@@ -126,21 +124,29 @@ defineExpose({
 @import "variables";
 
 .va-avatar {
-  align-items: var(--va-avatar-align-items-current);
-  display: var(--va-avatar-display-current);
-  justify-content: var(--va-avatar-justify-content-current);
-  line-height: var(--va-avatar-line-height-current);
-  position: var(--va-avatar-position-current);
-  text-align: var(--va-avatar-text-align-current);
-  vertical-align: var(--va-avatar-vertical-align-current);
-  border-radius: var(--va-avatar-border-radius-current);
+  align-items: var(--va-avatar-align-items);
+  display: var(--va-avatar-display);
+  justify-content: var(--va-avatar-justify-content);
+  line-height: var(--va-avatar-line-height);
+  position: var(--va-avatar-position);
+  text-align: var(--va-avatar-text-align);
+  vertical-align: var(--va-avatar-vertical-align);
+  border-radius: var(--va-avatar-border-radius);
   font-family: var(--va-font-family);
   background-color: v-bind(backgroundColorComputed);
   color: v-bind(textColorComputed);
-  width: var(--va-avatar-size-current);
-  min-width: var(--va-avatar-size-current);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
-  height: var(--va-avatar-size-current);
-  font-size: var(--va-avatar-font-size-current);
+  width: var(--va-avatar-size);
+  min-width: var(--va-avatar-size);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
+  height: var(--va-avatar-size);
+  font-size: var(--va-avatar-font-size);
+
+  &--small {
+    --va-avatar-size: 32px;
+  }
+
+  &--large {
+    --va-avatar-size: 64px;
+  }
 
   &--square {
     --va-avatar-border-radius: 0;

diff --git a/packages/ui/src/components/va-avatar/_variables.scss b/packages/ui/src/components/va-avatar/_variables.scss
@@ -10,12 +10,6 @@
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
 
-  /* Small */
-  --va-avatar-small-size: 32px;
-
   /* Medium */
   --va-avatar-size: 48px;
-
-  /* Large */
-  --va-avatar-large-size: 64px;
 }
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
@@ -161,6 +161,7 @@ const computedClass = useBem('va-button', () => ({
   iconOnly: isOnlyIcon.value,
   leftIcon: !isOnlyIcon.value && !!props.icon && !props.iconRight,
   rightIcon: !isOnlyIcon.value && !props.icon && !!props.iconRight,
+  ...(props.size && { [props.size]: true }),
 }))
 
 // styles
@@ -182,7 +183,7 @@ const contentColorComputed = useButtonTextColor(
   isHovered,
 )
 
-const variablesComputed = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
 const computedStyle = computed(() => ({
   borderColor: props.borderColor ? getColor(props.borderColor) : 'transparent',
@@ -202,28 +203,61 @@ defineExpose({
 
 .va-button {
   position: relative;
-  padding: var(--va-button-padding-current);
-  display: var(--va-button-display-current);
-  justify-content: var(--va-button-justify-content-current);
-  align-items: var(--va-button-align-items-current);
-  border-width: var(--va-button-border-width-current);
-  border-color: var(--va-button-border-color-current);
-  border-style: var(--va-button-border-style-current);
-  background-image: var(--va-button-background-image-current);
-  box-shadow: var(--va-button-box-shadow-current);
+  padding: var(--va-button-padding);
+  display: var(--va-button-display);
+  justify-content: var(--va-button-justify-content);
+  align-items: var(--va-button-align-items);
+  border-width: var(--va-button-border-width);
+  border-color: var(--va-button-border-color);
+  border-style: var(--va-button-border-style);
+  background-image: var(--va-button-background-image);
+  box-shadow: var(--va-button-box-shadow);
   font-family: var(--va-font-family);
-  font-weight: var(--va-button-font-weight-current);
+  font-weight: var(--va-button-font-weight);
   text-decoration: none;
   text-transform: initial;
-  transition: var(--va-button-transition-current);
+  transition: var(--va-button-transition);
   box-sizing: border-box;
-  cursor: var(--va-button-cursor-current);
+  cursor: var(--va-button-cursor);
   z-index: 0;
   vertical-align: top;
+  line-height: var(--va-button-line-height);
+  border-radius: var(--va-button-border-radius);
+  letter-spacing: var(--va-button-letter-spacing);
+  min-height: var(--va-button-size);
+  min-width: var(--va-button-size);
 
-  --va-progress-circle-small-size: 16px;
   --va-progress-circle-size: 24px;
-  --va-progress-circle-large-size: 32px;
+
+  &--small {
+    --va-button-size: 1.5rem;
+    --va-button-content-py: 0.25rem;
+    --va-button-content-px: 0.375rem;
+    --va-button-only-icon-content-px: 0.25rem;
+    --va-button-font-size: 0.8125rem;
+    --va-button-letter-spacing: 0;
+    --va-button-line-height: 1rem;
+    --va-button-border-radius: 0.125rem;
+    --va-button-icon-side-padding: var(--va-button-content-py);
+    --va-button-icons-spacing: 0.125rem;
+    --va-button-loader-size: 16px;
+    --va-progress-circle-size: 16px;
+  }
+
+  &--large {
+    --va-button-size: 3rem;
+    --va-button-content-py: 0.75rem;
+    --va-button-content-px: 1rem;
+    --va-button-only-icon-content-px: 1rem;
+    --va-button-font-size: 1.05rem;
+    --va-button-letter-spacing: 0;
+    --va-button-line-height: 1.5rem;
+    --va-button-border-radius: 0.5rem;
+    --va-button-icon-side-padding: var(--va-button-content-py);
+    --va-button-icons-spacing: 0.25rem;
+    --va-button-loader-size: 32px;
+    --va-progress-circle-size: 32px;
+  }
 
   &::after,
   &::before {
@@ -258,63 +292,57 @@ defineExpose({
     }
   }
 
-  line-height: var(--va-button-line-height-current);
-  border-radius: var(--va-button-border-radius-current);
-  letter-spacing: var(--va-button-letter-spacing-current);
-  min-height: var(--va-button-size-current);
-  min-width: var(--va-button-size-current);
-
   .va-button__content {
-    font-size: var(--va-button-font-size-current);
+    font-size: var(--va-button-font-size);
     padding:
-      var(--va-button-content-py-current)
-      var(--va-button-content-px-current);
-    line-height: var(--va-button-line-height-current);
+      var(--va-button-content-py)
+      var(--va-button-content-px);
+    line-height: var(--va-button-line-height);
   }
 
   // set icons the same size as text
   .va-button__left-icon,
   .va-button__right-icon {
-    // font-size: var(--va-button-line-height-current) !important;
-    // height: var(--va-button-line-height-current) !important;
-    // line-height: var(--va-button-line-height-current) !important;
+    // font-size: var(--va-button-line-height) !important;
+    // height: var(--va-button-line-height) !important;
+    // line-height: var(--va-button-line-height) !important;
   }
 
   .va-button__left-icon {
-    margin-right: var(--va-button-icons-spacing-current);
+    margin-right: var(--va-button-icons-spacing);
   }
 
   .va-button__right-icon {
-    margin-left: var(--va-button-icons-spacing-current);
+    margin-left: var(--va-button-icons-spacing);
   }
 
   &--bordered {
-    border-width: var(--va-button-bordered-border-current);
-    border-style: var(--va-button-bordered-style-current);
+    border-width: var(--va-button-bordered-border);
+    border-style: var(--va-button-bordered-style);
 
     .va-button__content {
       padding-top:
         calc(
-          var(--va-button-content-py-current) -
-          var(--va-button-bordered-border-current)
+          var(--va-button-content-py) -
+          var(--va-button-bordered-border)
         );
       padding-bottom:
         calc(
-          var(--va-button-content-py-current) -
-          var(--va-button-bordered-border-current)
+          var(--va-button-content-py) -
+          var(--va-button-bordered-border)
         );
     }
   }
 
   &--left-icon {
     .va-button__content {
-      padding-left: var(--va-button-icon-side-padding-current);
+      padding-left: var(--va-button-icon-side-padding);
     }
   }
 
   &--right-icon {
     .va-button__content {
-      padding-right: var(--va-button-icon-side-padding-current);
+      padding-right: var(--va-button-icon-side-padding);
     }
   }
 

diff --git a/packages/ui/src/components/va-button/_variables.scss b/packages/ui/src/components/va-button/_variables.scss
@@ -14,19 +14,6 @@
   --va-button-padding: 0;
   --va-button-cursor: pointer;
 
-  /* Small */
-  --va-button-small-size: 1.5rem;
-  --va-button-small-content-py: 0.25rem;
-  --va-button-small-content-px: 0.375rem;
-  --va-button-small-only-icon-content-px: 0.25rem;
-  --va-button-small-font-size: 0.8125rem;
-  --va-button-small-letter-spacing: 0;
-  --va-button-small-line-height: 1rem;
-  --va-button-small-border-radius: 0.125rem;
-  --va-button-small-icon-side-padding: var(--va-button-small-content-py);
-  --va-button-small-icons-spacing: 0.125rem;
-  --va-button-small-loader-size: 16px;
-
   /* Medium */
   --va-button-size: 2.25rem;
   --va-button-content-py: 0.5rem;
@@ -40,19 +27,6 @@
   --va-button-icons-spacing: var(--va-gap-medium);
   --va-button-loader-size: 24px;
 
-  /* Large */
-  --va-button-large-size: 3rem;
-  --va-button-large-content-py: 0.75rem;
-  --va-button-large-content-px: 1rem;
-  --va-button-large-only-icon-content-px: 1rem;
-  --va-button-large-font-size: 1.05rem;
-  --va-button-large-letter-spacing: 0;
-  --va-button-large-line-height: 1.5rem;
-  --va-button-large-border-radius: 0.5rem;
-  --va-button-large-icon-side-padding: var(--va-button-large-content-py);
-  --va-button-large-icons-spacing: 0.25rem;
-  --va-button-large-loader-size: 32px;
-
   /* Bordered */
   --va-button-bordered-border: 1px;
   --va-button-bordered-style: solid;