From 37382883aab2c8fb4f5017463126b4b677bc9c11 Mon Sep 17 00:00:00 2001 From: John Leider Date: Wed, 2 Mar 2022 11:24:07 -0600 Subject: [PATCH] fix(colors): remove local defined colors, re-implement sass there are 3 ways that background/text colors are derived: * variant support (v-card, v-alert, etc) * form control variants (uses a different variant system) * paper components (v-sheet, v-toolbar, etc) --- .../vuetify/src/components/VAlert/VAlert.tsx | 5 +-- .../vuetify/src/components/VBadge/VBadge.sass | 4 +-- .../vuetify/src/components/VBadge/VBadge.tsx | 5 +-- .../__snapshots__/VBadge.spec.tsx.snap | 34 +++++++++---------- .../src/components/VBadge/_variables.scss | 5 +-- .../vuetify/src/components/VCard/VCard.tsx | 5 +-- .../__snapshots__/VCard.spec.ts.snap | 4 +-- .../vuetify/src/components/VField/VField.sass | 1 + .../src/components/VField/_variables.scss | 1 + .../vuetify/src/components/VSheet/VSheet.tsx | 5 +-- .../__snapshots__/VSheet.spec.ts.snap | 2 +- .../src/components/VSheet/_variables.scss | 2 +- .../src/components/VToolbar/VToolbar.sass | 1 + .../src/components/VToolbar/VToolbar.tsx | 5 +-- .../src/components/VToolbar/_variables.scss | 7 ++++ .../vuetify/src/styles/generic/_colors.scss | 2 +- .../vuetify/src/styles/tools/_variant.sass | 1 + 17 files changed, 43 insertions(+), 46 deletions(-) diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx index 370aedb1e8a..a05a3f8a18b 100644 --- a/packages/vuetify/src/components/VAlert/VAlert.tsx +++ b/packages/vuetify/src/components/VAlert/VAlert.tsx @@ -74,10 +74,7 @@ export const VAlert = defineComponent({ ...makeRoundedProps(), ...makeTagProps(), ...makeThemeProps(), - ...makeVariantProps({ - color: 'surface-variant', - variant: 'contained-flat', - } as const), + ...makeVariantProps({ variant: 'contained-flat' } as const), }, emits: { diff --git a/packages/vuetify/src/components/VBadge/VBadge.sass b/packages/vuetify/src/components/VBadge/VBadge.sass index 366fc6c7bdd..bfc7b79a2d8 100644 --- a/packages/vuetify/src/components/VBadge/VBadge.sass +++ b/packages/vuetify/src/components/VBadge/VBadge.sass @@ -23,6 +23,8 @@ transition: $badge-transition white-space: nowrap + @include tools.theme($badge-theme...) + .v-badge--bordered & &::after border-radius: inherit @@ -44,8 +46,6 @@ padding: 0 width: $badge-dot-width - @include tools.theme($badge-theme...) - &::after border-width: $badge-dot-border-width diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx index 5ba907db03e..034f0b05d9f 100644 --- a/packages/vuetify/src/components/VBadge/VBadge.tsx +++ b/packages/vuetify/src/components/VBadge/VBadge.tsx @@ -24,10 +24,7 @@ export const VBadge = defineComponent({ props: { bordered: Boolean, - color: { - type: String, - default: 'surface-variant', - }, + color: String, content: String, dot: Boolean, floating: Boolean, diff --git a/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap b/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap index 22e8d91499a..6d59cb06c46 100644 --- a/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap +++ b/packages/vuetify/src/components/VBadge/__tests__/__snapshots__/VBadge.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`VBadge.tsx should match snapshot with badge slot and { content: '10', m element - - - - - - - - - - - - - -
-
-
- +
`; exports[`VCard should render slots and match a snapshot 1`] = ` -
+
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass index 710ee1e549f..5d14e30863d 100644 --- a/packages/vuetify/src/components/VField/VField.sass +++ b/packages/vuetify/src/components/VField/VField.sass @@ -45,6 +45,7 @@ &--variant-contained background: $field-control-contained-background border-color: transparent + color: $field-control-contained-color @include tools.elevation($field-control-contained-elevation) diff --git a/packages/vuetify/src/components/VField/_variables.scss b/packages/vuetify/src/components/VField/_variables.scss index 2337788db48..fd5315e16f8 100644 --- a/packages/vuetify/src/components/VField/_variables.scss +++ b/packages/vuetify/src/components/VField/_variables.scss @@ -16,6 +16,7 @@ $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing // CONTROL $field-control-contained-background: rgb(var(--v-theme-surface)) !default; +$field-control-contained-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default; $field-control-contained-elevation: 2 !default; $field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default; $field-control-padding-start: 16px !default; diff --git a/packages/vuetify/src/components/VSheet/VSheet.tsx b/packages/vuetify/src/components/VSheet/VSheet.tsx index 1e68b23e9d5..e59dafcf12e 100644 --- a/packages/vuetify/src/components/VSheet/VSheet.tsx +++ b/packages/vuetify/src/components/VSheet/VSheet.tsx @@ -19,10 +19,7 @@ export const VSheet = defineComponent({ name: 'VSheet', props: { - color: { - type: String, - default: 'surface', - }, + color: String, ...makeBorderProps(), ...makeDimensionProps(), diff --git a/packages/vuetify/src/components/VSheet/__tests__/__snapshots__/VSheet.spec.ts.snap b/packages/vuetify/src/components/VSheet/__tests__/__snapshots__/VSheet.spec.ts.snap index 677e4c7e8fb..61eb7480878 100644 --- a/packages/vuetify/src/components/VSheet/__tests__/__snapshots__/VSheet.spec.ts.snap +++ b/packages/vuetify/src/components/VSheet/__tests__/__snapshots__/VSheet.spec.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`VSheet should match a snapshot 1`] = ` -
+
`; diff --git a/packages/vuetify/src/components/VSheet/_variables.scss b/packages/vuetify/src/components/VSheet/_variables.scss index fa8ebd0141c..82384e53778 100644 --- a/packages/vuetify/src/components/VSheet/_variables.scss +++ b/packages/vuetify/src/components/VSheet/_variables.scss @@ -2,7 +2,7 @@ // Defaults $sheet-background: rgb(var(--v-theme-surface)) !default; -$sheet-color: rgb(var(--v-theme-on-surface)) !default; +$sheet-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default; $sheet-border-color: settings.$border-color-root !default; $sheet-border-radius: 0 !default; $sheet-border-style: settings.$border-style-root !default; diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass index 70eccf7970f..eda33a5bf9b 100644 --- a/packages/vuetify/src/components/VToolbar/VToolbar.sass +++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass @@ -18,6 +18,7 @@ @include tools.elevation($toolbar-elevation) @include tools.rounded($toolbar-border-radius) + @include tools.theme($toolbar-theme...) @at-root @include tools.density('v-toolbar', $toolbar-density) using ($modifier) diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx index 7d0ae39ae54..87e54d312ff 100644 --- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx +++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx @@ -31,10 +31,7 @@ const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact' export const makeVToolbarProps = propsFactory({ absolute: Boolean, collapse: Boolean, - color: { - type: String, - default: 'surface', - }, + color: String, density: { type: String as PropType, default: 'default', diff --git a/packages/vuetify/src/components/VToolbar/_variables.scss b/packages/vuetify/src/components/VToolbar/_variables.scss index d8c11eea489..f3b4df1a760 100644 --- a/packages/vuetify/src/components/VToolbar/_variables.scss +++ b/packages/vuetify/src/components/VToolbar/_variables.scss @@ -2,6 +2,8 @@ @use "../../styles/settings/variables"; @use "../../styles/tools/functions"; +$toolbar-background: rgb(var(--v-theme-surface)) !default; +$toolbar-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default; $toolbar-border-radius: 0 !default; $toolbar-btn-icon-size: 48px !default; $toolbar-collapsed-border-radius: 24px !default; @@ -47,3 +49,8 @@ $toolbar-prominent-title-typography: ( $toolbar-prominent-title-line-height, $toolbar-prominent-title-text-transform ); + +$toolbar-theme: ( + $toolbar-background, + $toolbar-color +) !default; diff --git a/packages/vuetify/src/styles/generic/_colors.scss b/packages/vuetify/src/styles/generic/_colors.scss index 9662417b144..beb8609994d 100644 --- a/packages/vuetify/src/styles/generic/_colors.scss +++ b/packages/vuetify/src/styles/generic/_colors.scss @@ -14,7 +14,7 @@ @mixin background-text-color($color_name, $color_type) { $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type); - color: $map_value; + color: $map_value !important; } @if (settings.$color-pack) { diff --git a/packages/vuetify/src/styles/tools/_variant.sass b/packages/vuetify/src/styles/tools/_variant.sass index 0b14b0fb4b1..40affdc0cd4 100644 --- a/packages/vuetify/src/styles/tools/_variant.sass +++ b/packages/vuetify/src/styles/tools/_variant.sass @@ -23,6 +23,7 @@ &--variant-contained, &--variant-contained-flat background: $contained-background + color: $contained-color @if ($contained-elevation > 0) &--variant-contained