feat(palette): add representative color variables (#199)

pubg · Jun 4, 2024 · a1fb2ff · a1fb2ff
1 parent 243a282
commit a1fb2ff
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 73 deletions.
diff --git a/packages/vlossom/src/components/vs-button/VsButton.scss b/packages/vlossom/src/components/vs-button/VsButton.scss
@@ -6,8 +6,8 @@
     justify-content: center;
     align-items: center;
     white-space: nowrap;
-    max-height: var(--vs-button-maxHeight, 3rem);
-    padding: var(--vs-button-padding, 0.4rem 1rem);
+    height: var(--vs-button-height, 2.4rem);
+    padding: var(--vs-button-padding, 0.6rem 1.5rem);
     border: var(--vs-button-border, 1px solid var(--vs-line-color));
     border-radius: var(--vs-button-borderRadius, calc(var(--vs-radius-ratio) * 0.4rem));
     cursor: pointer;
@@ -52,8 +52,7 @@
     }
 
     &[disabled] {
-        opacity: 0.45;
-        pointer-events: none;
+        @include disabled;
     }
 
     &.vs-state-box {
@@ -85,17 +84,17 @@
 // size
 .vs-button {
     &.dense {
-        padding: var(--vs-button-padding, 0.2rem 0.8rem);
+        padding: var(--vs-button-padding, 0.2rem 1.2rem);
         border-radius: var(--vs-button-borderRadius, calc(var(--vs-radius-ratio) * 0.3rem));
         font-size: var(--vs-button-fontSize, 0.8rem);
-        max-height: var(--vs-button-maxHeight, 2.4rem);
+        height: var(--vs-button-height, 1.8rem);
     }
 
     &.large {
-        padding: var(--vs-button-padding, 0.6rem 1.4rem);
+        padding: var(--vs-button-padding, 0.6rem 1.6rem);
         border-radius: var(--vs-button-borderRadius, calc(var(--vs-radius-ratio) * 0.6rem));
         font-size: var(--vs-button-fontSize, 1.2rem);
-        max-height: var(--vs-button-maxHeight, 3.7rem);
+        height: var(--vs-button-height, 2.8rem);
     }
 }
 

diff --git a/packages/vlossom/src/components/vs-button/types.ts b/packages/vlossom/src/components/vs-button/types.ts
@@ -7,6 +7,6 @@ export interface VsButtonStyleSet {
     fontSize?: string;
     fontWeight?: string | number;
     hoverBackgroundColor?: string;
-    maxHeight?: string;
+    height?: string;
     padding?: string;
 }
diff --git a/packages/vlossom/src/components/vs-chip/VsChip.scss b/packages/vlossom/src/components/vs-chip/VsChip.scss
@@ -19,10 +19,10 @@
         align-items: center;
         justify-content: center;
         border-radius: 50%;
-        background-color: rgba(255, 255, 255, 0.7);
+        background-color: var(--vs-white);
         border: var(--vs-chip-border, 1px solid var(--vs-line-color));
-        height: calc(var(--vs-chip-height, 1.4rem) * 0.8);
-        width: calc(var(--vs-chip-height, 1.4rem) * 0.8);
+        height: calc(var(--vs-chip-height, 1.35rem) * 0.8);
+        width: calc(var(--vs-chip-height, 1.35rem) * 0.8);
     }
 
     .close-button {
@@ -69,12 +69,6 @@
         color: var(--vs-chip-fontColor, var(--vs-primary-comp-font));
         border: var(--vs-chip-border, 1px solid var(--vs-primary-comp-bg));
 
-        .icon-container {
-            background-color: var(--vs-white);
-            color: var(--vs-gray-900);
-            border: var(--vs-chip-border, 1px solid var(--vs-line-color));
-        }
-
         &:hover {
             background-color: var(--vs-chip-hoverBackgroundColor, var(--vs-primary-comp-bg-hover));
         }

diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss
@@ -17,7 +17,7 @@
     .required-star {
         position: relative;
         top: 0.2rem;
-        color: var(--vs-red-600);
+        color: var(--vs-red);
         margin-left: 0.15rem;
 
         &.disabled {

diff --git a/packages/vlossom/src/components/vs-stepper/VsStepper.scss b/packages/vlossom/src/components/vs-stepper/VsStepper.scss
@@ -1,3 +1,5 @@
+@use '@/styles/mixin' as *;
+
 $fontSize: var(--vs-stepper-fontSize, 1rem);
 $stepButtonW: var(--vs-stepper-stepSize, 1.8rem);
 
@@ -6,8 +8,8 @@ $stepButtonW: var(--vs-stepper-stepSize, 1.8rem);
     -webkit-tap-highlight-color: transparent;
 
     .item-line {
-        background-color: var(--vs-comp-bg-active);
-        height: 0.2rem;
+        background-color: var(--vs-area-bg-active);
+        height: 0.3rem;
         left: $stepButtonW;
         right: $stepButtonW;
         position: absolute;
@@ -94,9 +96,12 @@ $stepButtonW: var(--vs-stepper-stepSize, 1.8rem);
 
             &.selected {
                 .item-step {
-                    border: var(--vs-stepper-activeColor, var(--vs-primary-comp-bg));
+                    border: 1px solid var(--vs-stepper-activeColor, var(--vs-primary-comp-bg));
                     background-color: var(--vs-stepper-activeBackgroundColor, var(--vs-primary-comp-bg));
                     color: var(--vs-primary-comp-font);
+
+                    outline: 3px solid var(--vs-primary-comp-bg);
+                    outline-offset: 3px;
                 }
 
                 .item-name {
@@ -106,17 +111,7 @@ $stepButtonW: var(--vs-stepper-stepSize, 1.8rem);
             }
 
             &.disabled {
-                cursor: default;
-
-                .item-step {
-                    background-color: var(--vs-gray-100);
-                    color: transparentize(#adadad, 0.6);
-                }
-
-                .item-name {
-                    color: var(--vs-gray-200);
-                    opacity: 0.6;
-                }
+                @include disabled;
             }
         }
     }

diff --git a/packages/vlossom/src/components/vs-table/VsTable.scss b/packages/vlossom/src/components/vs-table/VsTable.scss
@@ -7,9 +7,10 @@
     table {
         min-width: 100%;
         border-spacing: 0 !important;
+        margin-bottom: 0.6rem;
 
         caption {
-            caption-side: var(--vs-table-captionSide, top);
+            caption-side: var(--vs-table-captionSide, bottom);
             text-align: var(--vs-table-captionTextAlign, center);
             padding: 1rem 0;
             color: var(--vs-table-captionFontColor, var(--vs-font-color));
@@ -40,11 +41,11 @@
         }
 
         thead tr {
-            background-color: var(--vs-table-headerBackgroundColor, var(--vs-comp-bg));
+            background-color: var(--vs-table-headerBackgroundColor, var(--vs-area-bg-active));
             border: var(--vs-table-headerBorder, 1px solid var(--vs-line-color));
 
             th {
-                color: var(--vs-table-headerFontColor, var(--vs-comp-font));
+                color: var(--vs-table-headerFontColor, var(--vs-font-color));
                 font-size: var(--vs-table-headerFontSize, 0.9rem);
                 font-weight: var(--vs-table-headerFontWeight, 600);
                 min-height: var(--vs-table-headerMinHeight, 2.7rem);
@@ -68,7 +69,7 @@
             position: relative;
             transition: background-color 0.2s;
             background-color: var(--vs-table-bodyBackgroundColor, transparent);
-            border-bottom: var(--vs-table-bodyBorder, 1px solid var(--vs-gray-200));
+            border-bottom: var(--vs-table-bodyBorder, 1px solid var(--vs-line-color));
             color: var(--vs-table-bodyFontColor, var(--vs-font-color));
 
             &.selected {
@@ -116,7 +117,7 @@
                         }
 
                         &:hover {
-                            box-shadow: 0 0 4px var(--vs-comp-bg-hover);
+                            box-shadow: 0 0 4px var(--vs-comp-shadow);
                         }
 
                         &:disabled {
@@ -140,7 +141,7 @@
                     width: 95%;
                     height: 60%;
                     border-radius: calc(var(--vs-radius-ratio) * 0.3rem);
-                    background-color: var(--vs-gray-200);
+                    background-color: var(--vs-gray-light);
                     animation: skeleton-loading 0.6s infinite alternate;
                 }
             }
@@ -166,7 +167,7 @@
         }
 
         .table-empty {
-            border-bottom: 1px solid var(--vs-gray-400);
+            border-bottom: 1px solid var(--vs-line-color);
             padding: 2.2rem 0;
             text-align: center;
             opacity: 0.3;
@@ -187,7 +188,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: 0.5rem;
-    margin: 0.6rem 0;
+    margin-bottom: 0.6rem;
 
     .pagination-options {
         width: 10rem;
@@ -221,9 +222,10 @@
             th:first-child {
                 color: transparent;
                 height: 2.2rem;
+                padding-left: 1rem;
             }
             margin-bottom: 0.4rem;
-            border: 1px solid var(--vs-gray-200);
+            border: 1px solid var(--vs-line-color);
         }
 
         table {
@@ -235,7 +237,7 @@
             display: flex !important;
             flex-direction: column;
             margin: 0.4rem 0 0 0;
-            border: 1px solid var(--vs-gray-200);
+            border: 1px solid var(--vs-line-color);
 
             &:first-of-type {
                 margin-top: 0;
@@ -244,13 +246,25 @@
             td {
                 display: flex;
                 justify-content: space-between;
-                padding: 0.4rem 1rem !important;
-                border-top: 1px dashed var(--vs-gray-200);
+                padding: 0.4rem 1rem;
+                border-top: 1px dashed var(--vs-line-color);
                 overflow-x: auto;
 
-                &::before {
+                &.selectable-td {
+                    &:before {
+                        display: none;
+                    }
+
+                    justify-content: flex-start;
+                }
+
+                .table-data {
+                    justify-content: flex-end;
+                }
+
+                &:before {
                     content: attr(data-label);
-                    color: var(--vs-comp-font);
+                    color: var(--vs-primary-comp-bg-active);
                     display: block;
                     line-height: 3rem;
                     margin-right: 1.4rem;
@@ -270,19 +284,20 @@
                     }
                 }
                 &.expanded-row-content {
-                    border-top: none;
+                    border: none;
+                    box-shadow: none;
                 }
 
                 &.expandable-td {
-                    padding: 0.4rem !important;
+                    padding: 0.4rem;
                     button {
                         flex: 1;
                     }
                 }
 
                 &.expanded-row-content {
                     display: flex !important;
-                    padding-top: 0;
+                    padding-top: 0.5rem;
                     padding-bottom: 1.2rem;
 
                     .expand-contents {
@@ -297,7 +312,7 @@
         }
 
         .table-empty {
-            border-top: 1px solid var(--vs-gray-200);
+            border-top: 1px solid var(--vs-line-color);
         }
     }
 }

diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -2,10 +2,8 @@
     <div :class="['vs-table', `vs-${computedColorScheme}`, { dense }]" :style="computedStyleSet">
         <div class="table-wrap">
             <table>
-                <caption v-if="caption">
-                    {{
-                        caption
-                    }}
+                <caption v-if="$slots['caption']">
+                    <slot name="caption" />
                 </caption>
                 <vs-table-header
                     :headers="headers"

diff --git a/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts b/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts
@@ -79,6 +79,8 @@ describe('VsTable', () => {
                 props: {
                     headers,
                     items,
+                },
+                slots: {
                     caption: 'CAPTION',
                 },
             });

diff --git a/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts b/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
@@ -58,9 +58,19 @@ export const ColorScheme: Story = {
 };
 
 export const Caption: Story = {
-    args: {
-        caption: 'Fruit Shopping List',
-    },
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+            <vs-table v-bind="args">
+                <template #caption>
+                    This is a table caption
+                </template>
+            </vs-table>
+        `,
+    }),
 };
 
 export const Dense: Story = {
@@ -243,7 +253,7 @@ export const HeaderSlot: Story = {
                     </template>
                     <template #header-checked="{ header }">
                         Liked
-                    </template> 
+                    </template>
                 </vs-table>
             </div>
         `,
@@ -316,13 +326,11 @@ export const StyleSet: Story = {
             selectedBackgroundColor: '#DCD6F7',
             selectedFontColor: '#0f4c75',
         },
-        caption: 'Table 1: Fruit Shopping List',
     },
 };
 
 export const PreDefinedStyleSet: Story = {
     args: {
         styleSet: 'myStyleSet',
-        caption: 'Table 1: Fruit Shopping List',
     },
 };
diff --git a/packages/vlossom/src/components/vs-tabs/VsTabs.scss b/packages/vlossom/src/components/vs-tabs/VsTabs.scss
@@ -52,9 +52,9 @@ $fontWeight: var(--vs-tabs-fontWeight, 400);
                 }
 
                 &.selected {
-                    background-color: var(--vs-tabs-backgroundColor, var(--vs-area-bg-active));
-                    color: var(--vs-primary-comp-bg-active);
-                    border-bottom: 2px solid var(--vs-tabs-backgroundColor, var(--vs-primary-comp-bg-active));
+                    background-color: var(--vs-tabs-backgroundColor, var(--vs-area-bg-hover));
+                    color: var(--vs-primary-comp-bg);
+                    border-bottom: 2px solid var(--vs-tabs-backgroundColor, var(--vs-primary-comp-bg));
                     font-weight: calc($fontWeight + 200);
                 }
 

diff --git a/packages/vlossom/src/components/vs-text-wrap/VsTextWrap.scss b/packages/vlossom/src/components/vs-text-wrap/VsTextWrap.scss
@@ -20,15 +20,15 @@
     .text-wrap-buttons {
         > button {
             &.copy-button {
-                color: var(--vs-text-wrap-copyIconColor, var(--vs-indigo-500));
+                color: var(--vs-text-wrap-copyIconColor, var(--vs-indigo));
 
                 .copied {
-                    color: green;
+                    color: var(--vs-green);
                 }
             }
 
             &.link-button {
-                color: var(--vs-text-wrap-linkIconColor, var(--vs-blue-500));
+                color: var(--vs-text-wrap-linkIconColor, var(--vs-light-blue));
                 transform: rotate(135deg);
             }
         }