From 213828454b15cee8d257ee82182e5869127f7661 Mon Sep 17 00:00:00 2001 From: Mikkel Laursen Date: Fri, 16 Oct 2020 18:39:15 -0600 Subject: [PATCH] fix(table): table border color uses hex values to fix chrome colSpan rendering issue (#982) The table borders no longer use the `rmd-divider` mixin and colors due to a weird rendering issue with `colSpan` on tables. The workaround for this issue is to use a non-rgba value so the table now has new hex values for this: - `$rmd-table-light-border-color: #e0e0e0 !default` - `$rmd-table-dark-border-color: #2f2f2f !default` - `$rmd-table-border-color: if($rmd-light-theme, $rmd-table-light-border-color, $rmd-table-dark-border-color) !default` This also added a new `--rmd-table-border-color` CSS variable to configure this and should automatically update if you use the `rmd-theme-light/rmd-theme-dark` mixins. --- .../src/constants/sassdoc/divider.ts | 2 +- .../src/constants/sassdoc/table.ts | 99 ++++++++++++++----- .../src/constants/sassdoc/theme.ts | 32 ++++-- packages/table/src/_mixins.scss | 3 +- packages/table/src/_variables.scss | 34 +++++++ packages/theme/src/_mixins.scss | 14 +++ 6 files changed, 151 insertions(+), 33 deletions(-) diff --git a/packages/documentation/src/constants/sassdoc/divider.ts b/packages/documentation/src/constants/sassdoc/divider.ts index 62f5fdc23a..0830d033f6 100644 --- a/packages/documentation/src/constants/sassdoc/divider.ts +++ b/packages/documentation/src/constants/sassdoc/divider.ts @@ -50,6 +50,7 @@ const sassdoc: PackageSassDoc = { packageName: "card", }, { name: "rmd-divider", type: "mixin", packageName: "divider" }, + { name: "rmd-table-row", type: "mixin", packageName: "table" }, ], requires: [ { name: "rmd-theme-get-var", type: "function", packageName: "theme" }, @@ -184,7 +185,6 @@ const sassdoc: PackageSassDoc = { source: "packages/divider/src/_mixins.scss#L50-L56", usedBy: [ { name: "react-md-layout", type: "mixin", packageName: "layout" }, - { name: "rmd-table-row", type: "mixin", packageName: "table" }, ], requires: [ { name: "rmd-divider-theme", type: "mixin", packageName: "divider" }, diff --git a/packages/documentation/src/constants/sassdoc/table.ts b/packages/documentation/src/constants/sassdoc/table.ts index 93e3d52dda..5a730589a7 100644 --- a/packages/documentation/src/constants/sassdoc/table.ts +++ b/packages/documentation/src/constants/sassdoc/table.ts @@ -43,7 +43,10 @@ const sassdoc: PackageSassDoc = { description: "This function is used to get one of the table's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current `$rmd-table-theme-values`\n\nThis function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.", source: "packages/table/src/_functions.scss#L32-L39", - usedBy: [{ name: "rmd-table", type: "mixin", packageName: "table" }], + usedBy: [ + { name: "rmd-table", type: "mixin", packageName: "table" }, + { name: "rmd-table-row", type: "mixin", packageName: "table" }, + ], requires: [ { name: "rmd-theme-get-var", type: "function", packageName: "theme" }, { @@ -143,6 +146,8 @@ const sassdoc: PackageSassDoc = { { name: "rmd-table", type: "mixin", packageName: "table" }, { name: "rmd-thead", type: "mixin", packageName: "table" }, { name: "rmd-table-cell", type: "mixin", packageName: "table" }, + { name: "rmd-theme-light", type: "mixin", packageName: "theme" }, + { name: "rmd-theme-dark", type: "mixin", packageName: "theme" }, ], requires: [ { @@ -341,11 +346,16 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-row", description: "Creates the styles for the `` element.\n\nNote: The base class actually has no styles.\n", - source: "packages/table/src/_mixins.scss#L260-L299", + source: "packages/table/src/_mixins.scss#L260-L300", usedBy: [{ name: "react-md-table", type: "mixin", packageName: "table" }], requires: [ { name: "rmd-table-theme", type: "mixin", packageName: "table" }, - { name: "rmd-divider-border", type: "mixin", packageName: "divider" }, + { + name: "rmd-divider-theme-var", + type: "function", + packageName: "divider", + }, + { name: "rmd-table-theme-var", type: "function", packageName: "table" }, { name: "rmd-transition-standard-time", type: "variable", @@ -355,13 +365,13 @@ const sassdoc: PackageSassDoc = { packageName: "table", code: "@mixin rmd-table-row { … }", sourceCode: - "@mixin rmd-table-row {\n &--selected {\n @include rmd-table-theme(background-color, selected-color);\n\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, selected-color);\n }\n }\n\n &--clickable:hover {\n cursor: pointer;\n }\n\n &--bordered {\n @include rmd-divider-border(bottom);\n\n // this is actually pretty nice since it'll also NOT create a border on the\n // header row (which we want)\n &:last-child {\n border-bottom-width: 0;\n }\n }\n\n &--hoverable {\n @include rmd-utils-mouse-only {\n @include rmd-transition(standard);\n\n transition: background-color $rmd-transition-standard-time;\n\n &:hover {\n @include rmd-table-theme(background-color, hover-color);\n\n // see the `.rmd-table-cell--sticky` selector for more info :/\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, hover-color);\n }\n }\n }\n }\n}\n", + "@mixin rmd-table-row {\n &--selected {\n @include rmd-table-theme(background-color, selected-color);\n\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, selected-color);\n }\n }\n\n &--clickable:hover {\n cursor: pointer;\n }\n\n &--bordered {\n border-bottom: rmd-divider-theme-var(size) solid\n rmd-table-theme-var(border-color);\n\n // this is actually pretty nice since it'll also NOT create a border on the\n // header row (which we want)\n &:last-child {\n border-bottom-width: 0;\n }\n }\n\n &--hoverable {\n @include rmd-utils-mouse-only {\n @include rmd-transition(standard);\n\n transition: background-color $rmd-transition-standard-time;\n\n &:hover {\n @include rmd-table-theme(background-color, hover-color);\n\n // see the `.rmd-table-cell--sticky` selector for more info :/\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, hover-color);\n }\n }\n }\n }\n}\n", type: "mixin", }, "react-md-table": { name: "react-md-table", description: "Creates all the styles for the table package.\n", - source: "packages/table/src/_mixins.scss#L302-L328", + source: "packages/table/src/_mixins.scss#L303-L329", usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }], requires: [ { @@ -389,11 +399,50 @@ const sassdoc: PackageSassDoc = { }, }, variables: { + "rmd-table-light-border-color": { + name: "rmd-table-light-border-color", + description: + "The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table. This will be applied when using the light theme.\n\nNote: this value is _close_ to the divider default value of `rgba($rmd-black-base, 0.12)`", + source: "packages/table/src/_variables.scss#L17", + since: "2.3.2", + usedBy: [ + { name: "rmd-theme-light", type: "mixin", packageName: "theme" }, + ], + packageName: "table", + type: "Color", + value: "#e0e0e0", + overridable: true, + }, + "rmd-table-dark-border-color": { + name: "rmd-table-dark-border-color", + description: + "The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table. This will be applied when using the dark theme.\n\nNote: this value is _close_ to the divider default value of `rgba($rmd-white-base, 0.12)`", + source: "packages/table/src/_variables.scss#L28", + since: "2.3.2", + usedBy: [{ name: "rmd-theme-dark", type: "mixin", packageName: "theme" }], + packageName: "table", + type: "Color", + value: "#2f2f2f", + overridable: true, + }, + "rmd-table-border-color": { + name: "rmd-table-border-color", + description: + "The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table.", + source: "packages/table/src/_variables.scss#L35-L39", + since: "2.3.2", + packageName: "table", + type: "Color", + value: + "if(\n $rmd-theme-light,\n $rmd-table-light-border-color,\n $rmd-table-dark-border-color\n)", + compiled: "#e0e0e0", + overridable: true, + }, "rmd-table-cell-horizontal-padding": { name: "rmd-table-cell-horizontal-padding", description: "The amount of padding to apply to the left and right of each `` and `` in a table.\n", - source: "packages/table/src/_variables.scss#L11", + source: "packages/table/src/_variables.scss#L44", packageName: "table", type: "Number", value: "1rem", @@ -403,7 +452,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-vertical-padding", description: 'The amount of padding to apply to the top or bottom for each `` and `` in a table when the cell\'s alignment is set to `"top"` or `"bottom"`.', - source: "packages/table/src/_variables.scss#L17", + source: "packages/table/src/_variables.scss#L50", packageName: "table", type: "Number", value: "0.375rem", @@ -413,7 +462,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-sticky-position", description: "The default position to use for a sticky cell that appears within the `` in all tables. This is mostly used if you want to have a custom `` that describes an entire row and should always be visible.\n\nIf you want to update a specific table, you should use the `rmd-table-theme-update-var` mixin for the `sticky-cell` value.", - source: "packages/table/src/_variables.scss#L27", + source: "packages/table/src/_variables.scss#L60", packageName: "table", type: "Number", value: "0", @@ -423,7 +472,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-sticky-z-index", description: "The z-index to apply to all sticky cells within a table. This value doesn't matter too much, but it should just be greater than 1 if you have checkbox cells so that the header will cover the checkboxes.", - source: "packages/table/src/_variables.scss#L34", + source: "packages/table/src/_variables.scss#L67", usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -433,7 +482,7 @@ const sassdoc: PackageSassDoc = { "rmd-table-cell-height": { name: "rmd-table-cell-height", description: "The minimum height for each ``.\n", - source: "packages/table/src/_variables.scss#L38", + source: "packages/table/src/_variables.scss#L71", usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -444,7 +493,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-dense-height", description: "The minimum height to set for each `` with the dense spec.", - source: "packages/table/src/_variables.scss#L43", + source: "packages/table/src/_variables.scss#L76", usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -454,7 +503,7 @@ const sassdoc: PackageSassDoc = { "rmd-table-cell-color": { name: "rmd-table-cell-color", description: "The text color for `` cells within a table.", - source: "packages/table/src/_variables.scss#L49", + source: "packages/table/src/_variables.scss#L82", usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }], requires: [ { name: "rmd-theme-var", type: "function", packageName: "theme" }, @@ -469,7 +518,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-horizontal-alignments", description: "The supported horizontal alignments for the table cell. You can set this value to `null` if you do not want to generate any additional alignments other than the default (`left`), or set to a list of one value if you do not need all the alignments.", - source: "packages/table/src/_variables.scss#L57", + source: "packages/table/src/_variables.scss#L90", usedBy: [ { name: "rmd-table-cell-horizontal-alignments", @@ -486,7 +535,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-cell-vertical-alignments", description: 'A map of the supported `vertical-align` for a table cell align with the amount of padding to apply. Tables are "fun" to style since theres some weird stuff with how `height` + `padding` works by default so when the `vertical-align` is set to `top` or `bottom`, you also need to apply some padding OR update the `line-height` for the cell. I decided to go with a `padding` approach to make things a bit easier for non-text cells.\n\nNote: You can also set this value to `null` if you do not want to generate the minimal styles for the non-middle alignments.', - source: "packages/table/src/_variables.scss#L70", + source: "packages/table/src/_variables.scss#L103", usedBy: [ { name: "rmd-table-cell-vertical-alignments", @@ -503,7 +552,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-header-cell-height", description: "The minimum height for each `` that appears in the ``.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-height`.", - source: "packages/table/src/_variables.scss#L78", + source: "packages/table/src/_variables.scss#L111", usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -514,7 +563,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-header-cell-dense-height", description: "The minimum height for each `` that appears in the `` with the dense spec.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-dense-height`.", - source: "packages/table/src/_variables.scss#L87", + source: "packages/table/src/_variables.scss#L120", usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -525,7 +574,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-header-cell-color", description: "The color to use for `` cells within a table.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-color`.", - source: "packages/table/src/_variables.scss#L95", + source: "packages/table/src/_variables.scss#L128", usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -537,7 +586,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-header-sticky-position", description: "The default position for a sticky header cell in all tables. If you want to update the header position for a specific table, you can just use the `rmd-table-theme-update-var` mixin for the `sticky-header` variable instead.", - source: "packages/table/src/_variables.scss#L102", + source: "packages/table/src/_variables.scss#L135", packageName: "table", type: "Number", value: "0", @@ -547,7 +596,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-row-hover-color", description: "The background color to use when hovering over a row within the `` and the `hoverable` styles have been enabled.", - source: "packages/table/src/_variables.scss#L109", + source: "packages/table/src/_variables.scss#L142", requires: [ { name: "rmd-black-base", type: "variable", packageName: "theme" }, ], @@ -561,7 +610,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-row-selected-color", description: "The background color to use when a row has been selected within the ``.", - source: "packages/table/src/_variables.scss#L116", + source: "packages/table/src/_variables.scss#L149", requires: [ { name: "rmd-states-theme-var", @@ -579,7 +628,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-footer-sticky-position", description: "The default position for a sticky footer cell in all tables. If you want to update the footer position for a specific table, you can just use the `rmd-table-theme-update-var` mixin for the `sticky-footer` variable instead.", - source: "packages/table/src/_variables.scss#L123", + source: "packages/table/src/_variables.scss#L156", packageName: "table", type: "Number", value: "0", @@ -589,7 +638,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-checkbox-padding", description: "The amount of padding to apply to a table checkbox cell. This should normally be smaller than the default left and right padding to reduce the width of this cell.", - source: "packages/table/src/_variables.scss#L130", + source: "packages/table/src/_variables.scss#L163", usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }], packageName: "table", type: "Number", @@ -600,7 +649,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-table-theme-values", description: 'A Map of all the "themeable" parts of the table package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.', - source: "packages/table/src/_variables.scss#L137-L148", + source: "packages/table/src/_variables.scss#L170-L182", usedBy: [ { name: "rmd-table-theme", type: "function", packageName: "table" }, { name: "rmd-table-theme-var", type: "function", packageName: "table" }, @@ -615,9 +664,9 @@ const sassdoc: PackageSassDoc = { packageName: "table", type: "Map", value: - "(\n cell-color: $rmd-table-cell-color,\n cell-h-padding: $rmd-table-cell-horizontal-padding,\n cell-v-padding: $rmd-table-cell-vertical-padding,\n cell-height: $rmd-table-cell-height,\n cell-dense-height: $rmd-table-cell-dense-height,\n hover-color: $rmd-table-row-hover-color,\n selected-color: $rmd-table-row-selected-color,\n sticky-header: $rmd-table-header-sticky-position,\n sticky-cell: $rmd-table-cell-sticky-position,\n sticky-footer: $rmd-table-footer-sticky-position,\n)", + "(\n border-color: $rmd-table-border-color,\n cell-color: $rmd-table-cell-color,\n cell-h-padding: $rmd-table-cell-horizontal-padding,\n cell-v-padding: $rmd-table-cell-vertical-padding,\n cell-height: $rmd-table-cell-height,\n cell-dense-height: $rmd-table-cell-dense-height,\n hover-color: $rmd-table-row-hover-color,\n selected-color: $rmd-table-row-selected-color,\n sticky-header: $rmd-table-header-sticky-position,\n sticky-cell: $rmd-table-cell-sticky-position,\n sticky-footer: $rmd-table-footer-sticky-position,\n)", compiled: - "(\n cell-color: var(--rmd-theme-text-primary-on-background, #212121),\n cell-h-padding: 1rem,\n cell-v-padding: 0.375rem,\n cell-height: 3.25rem,\n cell-dense-height: 2rem,\n hover-color: rgba(0, 0, 0, 0.12),\n selected-color: var(--rmd-states-selected-color, rgba(0, 0, 0, 0.16)),\n sticky-header: 0,\n sticky-cell: 0,\n sticky-footer: 0,\n)", + "(\n border-color: #e0e0e0,\n cell-color: var(--rmd-theme-text-primary-on-background, #212121),\n cell-h-padding: 1rem,\n cell-v-padding: 0.375rem,\n cell-height: 3.25rem,\n cell-dense-height: 2rem,\n hover-color: rgba(0, 0, 0, 0.12),\n selected-color: var(--rmd-states-selected-color, rgba(0, 0, 0, 0.16)),\n sticky-header: 0,\n sticky-cell: 0,\n sticky-footer: 0,\n)", overridable: true, }, }, diff --git a/packages/documentation/src/constants/sassdoc/theme.ts b/packages/documentation/src/constants/sassdoc/theme.ts index ef7b7ec5ba..5fb690ac24 100644 --- a/packages/documentation/src/constants/sassdoc/theme.ts +++ b/packages/documentation/src/constants/sassdoc/theme.ts @@ -1309,7 +1309,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light", description: "This mixin can be used to apply the light theme by updating **every** color theme variable across all react-md packages.\n\nNote: You'll still need to ensure that all the package's mixins were imported to get this to work.\n", - source: "packages/theme/src/_mixins.scss#L104-L226", + source: "packages/theme/src/_mixins.scss#L104-L233", requires: [ { name: "rmd-theme-update-var", type: "mixin", packageName: "theme" }, { @@ -1342,6 +1342,11 @@ const sassdoc: PackageSassDoc = { type: "mixin", packageName: "states", }, + { + name: "rmd-table-theme-update-var", + type: "mixin", + packageName: "table", + }, { name: "rmd-tabs-theme-update-var", type: "mixin", @@ -1463,18 +1468,23 @@ const sassdoc: PackageSassDoc = { type: "variable", packageName: "states", }, + { + name: "rmd-table-light-border-color", + type: "variable", + packageName: "table", + }, ], packageName: "theme", code: "@mixin rmd-theme-light { … }", sourceCode: - "@mixin rmd-theme-light {\n @include rmd-theme-update-var(background, $rmd-theme-light-background);\n @include rmd-theme-update-var(surface, $rmd-theme-light-surface);\n @include rmd-theme-update-var(on-surface, $rmd-black-base);\n @include rmd-theme-update-var(\n text-primary-on-background,\n $rmd-theme-primary-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-secondary-on-background,\n $rmd-theme-secondary-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-hint-on-background,\n $rmd-theme-hint-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-disabled-on-background,\n $rmd-theme-disabled-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-icon-on-background,\n $rmd-theme-icon-on-light-color\n );\n\n @if mixin-exists(rmd-app-bar-theme-update-var) {\n @include rmd-app-bar-theme-update-var(\n default-background-color,\n $rmd-app-bar-default-light-theme-background-color\n );\n @include rmd-app-bar-theme-update-var(\n default-color,\n $rmd-app-bar-default-light-theme-color\n );\n }\n\n @if mixin-exists(rmd-card-theme-update-var) {\n @include rmd-card-theme-update-var(\n color,\n $rmd-theme-primary-text-on-light-color\n );\n @include rmd-card-theme-update-var(\n secondary-color,\n $rmd-theme-secondary-text-on-light-color\n );\n }\n\n @if mixin-exists(rmd-chip-theme-update-var) {\n @include rmd-chip-theme-update-var(\n solid-background-color,\n $rmd-chip-solid-light-background-color\n );\n @include rmd-chip-theme-update-var(\n solid-color,\n $rmd-chip-solid-light-color\n );\n @include rmd-chip-theme-update-var(\n solid-disabled,\n $rmd-chip-solid-light-disabled-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-background-color,\n $rmd-chip-outline-light-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-color,\n $rmd-chip-outline-light-color\n );\n }\n\n @if mixin-exists(rmd-divider-theme-update-var) {\n @include rmd-divider-theme-update-var(\n background-color,\n $rmd-divider-background-color-on-light\n );\n }\n\n @if mixin-exists(rmd-form-theme-update-var) {\n @include rmd-form-theme-update-var(\n text-border-color,\n $rmd-text-field-light-border-color\n );\n @include rmd-form-theme-update-var(\n text-border-hover-color,\n $rmd-text-field-light-border-hover-color\n );\n @include rmd-form-theme-update-var(\n text-filled-color,\n $rmd-text-field-filled-light-background-color\n );\n }\n\n @if mixin-exists(rmd-states-theme-update-var) {\n @include rmd-states-theme-update-var(\n hover-color,\n $rmd-states-light-theme-hover-color\n );\n @include rmd-states-theme-update-var(\n focus-color,\n $rmd-states-light-theme-focus-color\n );\n @include rmd-states-theme-update-var(\n pressed-color,\n $rmd-states-light-theme-pressed-color\n );\n @include rmd-states-theme-update-var(\n selected-color,\n $rmd-states-light-theme-selected-color\n );\n @include rmd-states-theme-update-var(\n ripple-background-color,\n $rmd-states-light-theme-ripple-background-color\n );\n }\n\n @if mixin-exists(rmd-tabs-theme-update-var) {\n @include rmd-tabs-theme-update-var(active, $rmd-black-base);\n @include rmd-tabs-theme-update-var(\n inactive,\n $rmd-theme-secondary-text-on-light-color\n );\n }\n}\n", + "@mixin rmd-theme-light {\n @include rmd-theme-update-var(background, $rmd-theme-light-background);\n @include rmd-theme-update-var(surface, $rmd-theme-light-surface);\n @include rmd-theme-update-var(on-surface, $rmd-black-base);\n @include rmd-theme-update-var(\n text-primary-on-background,\n $rmd-theme-primary-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-secondary-on-background,\n $rmd-theme-secondary-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-hint-on-background,\n $rmd-theme-hint-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-disabled-on-background,\n $rmd-theme-disabled-text-on-light-color\n );\n @include rmd-theme-update-var(\n text-icon-on-background,\n $rmd-theme-icon-on-light-color\n );\n\n @if mixin-exists(rmd-app-bar-theme-update-var) {\n @include rmd-app-bar-theme-update-var(\n default-background-color,\n $rmd-app-bar-default-light-theme-background-color\n );\n @include rmd-app-bar-theme-update-var(\n default-color,\n $rmd-app-bar-default-light-theme-color\n );\n }\n\n @if mixin-exists(rmd-card-theme-update-var) {\n @include rmd-card-theme-update-var(\n color,\n $rmd-theme-primary-text-on-light-color\n );\n @include rmd-card-theme-update-var(\n secondary-color,\n $rmd-theme-secondary-text-on-light-color\n );\n }\n\n @if mixin-exists(rmd-chip-theme-update-var) {\n @include rmd-chip-theme-update-var(\n solid-background-color,\n $rmd-chip-solid-light-background-color\n );\n @include rmd-chip-theme-update-var(\n solid-color,\n $rmd-chip-solid-light-color\n );\n @include rmd-chip-theme-update-var(\n solid-disabled,\n $rmd-chip-solid-light-disabled-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-background-color,\n $rmd-chip-outline-light-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-color,\n $rmd-chip-outline-light-color\n );\n }\n\n @if mixin-exists(rmd-divider-theme-update-var) {\n @include rmd-divider-theme-update-var(\n background-color,\n $rmd-divider-background-color-on-light\n );\n }\n\n @if mixin-exists(rmd-form-theme-update-var) {\n @include rmd-form-theme-update-var(\n text-border-color,\n $rmd-text-field-light-border-color\n );\n @include rmd-form-theme-update-var(\n text-border-hover-color,\n $rmd-text-field-light-border-hover-color\n );\n @include rmd-form-theme-update-var(\n text-filled-color,\n $rmd-text-field-filled-light-background-color\n );\n }\n\n @if mixin-exists(rmd-states-theme-update-var) {\n @include rmd-states-theme-update-var(\n hover-color,\n $rmd-states-light-theme-hover-color\n );\n @include rmd-states-theme-update-var(\n focus-color,\n $rmd-states-light-theme-focus-color\n );\n @include rmd-states-theme-update-var(\n pressed-color,\n $rmd-states-light-theme-pressed-color\n );\n @include rmd-states-theme-update-var(\n selected-color,\n $rmd-states-light-theme-selected-color\n );\n @include rmd-states-theme-update-var(\n ripple-background-color,\n $rmd-states-light-theme-ripple-background-color\n );\n }\n\n @if mixin-exists(rmd-table-theme-update-var) {\n @include rmd-table-theme-update-var(\n border-color,\n $rmd-table-light-border-color\n );\n }\n\n @if mixin-exists(rmd-tabs-theme-update-var) {\n @include rmd-tabs-theme-update-var(active, $rmd-black-base);\n @include rmd-tabs-theme-update-var(\n inactive,\n $rmd-theme-secondary-text-on-light-color\n );\n }\n}\n", type: "mixin", }, "rmd-theme-dark": { name: "rmd-theme-dark", description: "This mixin can be used to apply the dark theme by updating **every** color theme variable across all react-md packages.\n\nThis is really great to use within a media query for browsers that now support the `prefers-color-scheme` so that if the user has the dark theme enabled, they'll automatically gain the dark theme while using your app as well.\n\nNote: You'll still need to ensure that all the package's mixins were imported to get this to work.", - source: "packages/theme/src/_mixins.scss#L243-L362", + source: "packages/theme/src/_mixins.scss#L250-L376", requires: [ { name: "rmd-theme-update-var", type: "mixin", packageName: "theme" }, { @@ -1507,6 +1517,11 @@ const sassdoc: PackageSassDoc = { type: "mixin", packageName: "states", }, + { + name: "rmd-table-theme-update-var", + type: "mixin", + packageName: "table", + }, { name: "rmd-tabs-theme-update-var", type: "mixin", @@ -1628,6 +1643,11 @@ const sassdoc: PackageSassDoc = { type: "variable", packageName: "states", }, + { + name: "rmd-table-dark-border-color", + type: "variable", + packageName: "table", + }, ], packageName: "theme", examples: [ @@ -1635,21 +1655,21 @@ const sassdoc: PackageSassDoc = { code: "@media (prefers-color-scheme: dark) {\n :root {\n @include rmd-theme-dark;\n }\n}\n", compiled: - "@media (prefers-color-scheme: dark) {\n :root {\n --rmd-theme-background: #303030;\n --rmd-theme-surface: #424242;\n --rmd-theme-on-surface: #fff;\n --rmd-theme-text-primary-on-background: #d9d9d9;\n --rmd-theme-text-secondary-on-background: #b3b3b3;\n --rmd-theme-text-hint-on-background: gray;\n --rmd-theme-text-disabled-on-background: gray;\n --rmd-theme-text-icon-on-background: #b3b3b3;\n --rmd-app-bar-default-background-color: #212121;\n --rmd-app-bar-default-color: #fff;\n --rmd-card-color: #d9d9d9;\n --rmd-card-secondary-color: #b3b3b3;\n --rmd-chip-solid-background-color: #212121;\n --rmd-chip-solid-color: #fff;\n --rmd-chip-solid-disabled: #262626;\n --rmd-chip-outline-background-color: #424242;\n --rmd-chip-outline-color: #fff;\n --rmd-divider-background-color: rgba(255, 255, 255, 0.12);\n --rmd-form-text-border-color: rgba(255, 255, 255, 0.5);\n --rmd-form-text-border-hover-color: rgba(255, 255, 255, 0.87);\n --rmd-form-text-filled-color: #616161;\n --rmd-states-hover-color: rgba(0, 0, 0, 0.04);\n --rmd-states-focus-color: rgba(0, 0, 0, 0.12);\n --rmd-states-pressed-color: rgba(0, 0, 0, 0.16);\n --rmd-states-selected-color: rgba(0, 0, 0, 0.12);\n --rmd-states-ripple-background-color: rgba(0, 0, 0, 0.08);\n --rmd-tabs-active: #fff;\n --rmd-tabs-inactive: #b3b3b3;\n }\n}\n", + "@media (prefers-color-scheme: dark) {\n :root {\n --rmd-theme-background: #303030;\n --rmd-theme-surface: #424242;\n --rmd-theme-on-surface: #fff;\n --rmd-theme-text-primary-on-background: #d9d9d9;\n --rmd-theme-text-secondary-on-background: #b3b3b3;\n --rmd-theme-text-hint-on-background: gray;\n --rmd-theme-text-disabled-on-background: gray;\n --rmd-theme-text-icon-on-background: #b3b3b3;\n --rmd-app-bar-default-background-color: #212121;\n --rmd-app-bar-default-color: #fff;\n --rmd-card-color: #d9d9d9;\n --rmd-card-secondary-color: #b3b3b3;\n --rmd-chip-solid-background-color: #212121;\n --rmd-chip-solid-color: #fff;\n --rmd-chip-solid-disabled: #262626;\n --rmd-chip-outline-background-color: #424242;\n --rmd-chip-outline-color: #fff;\n --rmd-divider-background-color: rgba(255, 255, 255, 0.12);\n --rmd-form-text-border-color: rgba(255, 255, 255, 0.5);\n --rmd-form-text-border-hover-color: rgba(255, 255, 255, 0.87);\n --rmd-form-text-filled-color: #616161;\n --rmd-states-hover-color: rgba(0, 0, 0, 0.04);\n --rmd-states-focus-color: rgba(0, 0, 0, 0.12);\n --rmd-states-pressed-color: rgba(0, 0, 0, 0.16);\n --rmd-states-selected-color: rgba(0, 0, 0, 0.12);\n --rmd-states-ripple-background-color: rgba(0, 0, 0, 0.08);\n --rmd-table-border-color: #2f2f2f;\n --rmd-tabs-active: #fff;\n --rmd-tabs-inactive: #b3b3b3;\n }\n}\n", type: "scss", description: "Media Query Example", }, ], code: "@mixin rmd-theme-dark { … }", sourceCode: - "@mixin rmd-theme-dark {\n @include rmd-theme-update-var(background, $rmd-theme-dark-background);\n @include rmd-theme-update-var(surface, $rmd-theme-dark-surface);\n @include rmd-theme-update-var(on-surface, $rmd-white-base);\n @include rmd-theme-update-var(\n text-primary-on-background,\n $rmd-theme-primary-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-secondary-on-background,\n $rmd-theme-secondary-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-hint-on-background,\n $rmd-theme-hint-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-disabled-on-background,\n $rmd-theme-disabled-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-icon-on-background,\n $rmd-theme-icon-on-dark-color\n );\n\n @if mixin-exists(rmd-app-bar-theme-update-var) {\n @include rmd-app-bar-theme-update-var(\n default-background-color,\n $rmd-app-bar-default-dark-theme-background-color\n );\n @include rmd-app-bar-theme-update-var(\n default-color,\n $rmd-app-bar-default-dark-theme-color\n );\n }\n\n @if mixin-exists(rmd-card-theme-update-var) {\n @include rmd-card-theme-update-var(\n color,\n $rmd-theme-primary-text-on-dark-color\n );\n @include rmd-card-theme-update-var(\n secondary-color,\n $rmd-theme-secondary-text-on-dark-color\n );\n }\n\n @if mixin-exists(rmd-chip-theme-update-var) {\n @include rmd-chip-theme-update-var(\n solid-background-color,\n $rmd-chip-solid-dark-background-color\n );\n @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-dark-color);\n @include rmd-chip-theme-update-var(\n solid-disabled,\n $rmd-chip-solid-dark-disabled-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-background-color,\n $rmd-chip-outline-dark-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-color,\n $rmd-chip-outline-dark-color\n );\n }\n\n @if mixin-exists(rmd-divider-theme-update-var) {\n @include rmd-divider-theme-update-var(\n background-color,\n $rmd-divider-background-color-on-dark\n );\n }\n\n @if mixin-exists(rmd-form-theme-update-var) {\n @include rmd-form-theme-update-var(\n text-border-color,\n $rmd-text-field-dark-border-color\n );\n @include rmd-form-theme-update-var(\n text-border-hover-color,\n $rmd-text-field-dark-border-hover-color\n );\n @include rmd-form-theme-update-var(\n text-filled-color,\n $rmd-text-field-filled-dark-background-color\n );\n }\n\n @if mixin-exists(rmd-states-theme-update-var) {\n @include rmd-states-theme-update-var(\n hover-color,\n $rmd-states-dark-theme-hover-color\n );\n @include rmd-states-theme-update-var(\n focus-color,\n $rmd-states-dark-theme-focus-color\n );\n @include rmd-states-theme-update-var(\n pressed-color,\n $rmd-states-dark-theme-pressed-color\n );\n @include rmd-states-theme-update-var(\n selected-color,\n $rmd-states-dark-theme-selected-color\n );\n @include rmd-states-theme-update-var(\n ripple-background-color,\n $rmd-states-dark-theme-ripple-background-color\n );\n }\n\n @if mixin-exists(rmd-tabs-theme-update-var) {\n @include rmd-tabs-theme-update-var(active, $rmd-white-base);\n @include rmd-tabs-theme-update-var(\n inactive,\n $rmd-theme-secondary-text-on-dark-color\n );\n }\n}\n", + "@mixin rmd-theme-dark {\n @include rmd-theme-update-var(background, $rmd-theme-dark-background);\n @include rmd-theme-update-var(surface, $rmd-theme-dark-surface);\n @include rmd-theme-update-var(on-surface, $rmd-white-base);\n @include rmd-theme-update-var(\n text-primary-on-background,\n $rmd-theme-primary-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-secondary-on-background,\n $rmd-theme-secondary-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-hint-on-background,\n $rmd-theme-hint-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-disabled-on-background,\n $rmd-theme-disabled-text-on-dark-color\n );\n @include rmd-theme-update-var(\n text-icon-on-background,\n $rmd-theme-icon-on-dark-color\n );\n\n @if mixin-exists(rmd-app-bar-theme-update-var) {\n @include rmd-app-bar-theme-update-var(\n default-background-color,\n $rmd-app-bar-default-dark-theme-background-color\n );\n @include rmd-app-bar-theme-update-var(\n default-color,\n $rmd-app-bar-default-dark-theme-color\n );\n }\n\n @if mixin-exists(rmd-card-theme-update-var) {\n @include rmd-card-theme-update-var(\n color,\n $rmd-theme-primary-text-on-dark-color\n );\n @include rmd-card-theme-update-var(\n secondary-color,\n $rmd-theme-secondary-text-on-dark-color\n );\n }\n\n @if mixin-exists(rmd-chip-theme-update-var) {\n @include rmd-chip-theme-update-var(\n solid-background-color,\n $rmd-chip-solid-dark-background-color\n );\n @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-dark-color);\n @include rmd-chip-theme-update-var(\n solid-disabled,\n $rmd-chip-solid-dark-disabled-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-background-color,\n $rmd-chip-outline-dark-background-color\n );\n @include rmd-chip-theme-update-var(\n outline-color,\n $rmd-chip-outline-dark-color\n );\n }\n\n @if mixin-exists(rmd-divider-theme-update-var) {\n @include rmd-divider-theme-update-var(\n background-color,\n $rmd-divider-background-color-on-dark\n );\n }\n\n @if mixin-exists(rmd-form-theme-update-var) {\n @include rmd-form-theme-update-var(\n text-border-color,\n $rmd-text-field-dark-border-color\n );\n @include rmd-form-theme-update-var(\n text-border-hover-color,\n $rmd-text-field-dark-border-hover-color\n );\n @include rmd-form-theme-update-var(\n text-filled-color,\n $rmd-text-field-filled-dark-background-color\n );\n }\n\n @if mixin-exists(rmd-states-theme-update-var) {\n @include rmd-states-theme-update-var(\n hover-color,\n $rmd-states-dark-theme-hover-color\n );\n @include rmd-states-theme-update-var(\n focus-color,\n $rmd-states-dark-theme-focus-color\n );\n @include rmd-states-theme-update-var(\n pressed-color,\n $rmd-states-dark-theme-pressed-color\n );\n @include rmd-states-theme-update-var(\n selected-color,\n $rmd-states-dark-theme-selected-color\n );\n @include rmd-states-theme-update-var(\n ripple-background-color,\n $rmd-states-dark-theme-ripple-background-color\n );\n }\n\n @if mixin-exists(rmd-table-theme-update-var) {\n @include rmd-table-theme-update-var(\n border-color,\n $rmd-table-dark-border-color\n );\n }\n\n @if mixin-exists(rmd-tabs-theme-update-var) {\n @include rmd-tabs-theme-update-var(active, $rmd-white-base);\n @include rmd-tabs-theme-update-var(\n inactive,\n $rmd-theme-secondary-text-on-dark-color\n );\n }\n}\n", type: "mixin", }, "react-md-theme": { name: "react-md-theme", description: "Creates all the styles for a theme in react-md. This will start by creating CSS Variables for each theme variable and then create class names for each variable.", - source: "packages/theme/src/_mixins.scss#L373-L375", + source: "packages/theme/src/_mixins.scss#L387-L389", usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }], requires: [ { diff --git a/packages/table/src/_mixins.scss b/packages/table/src/_mixins.scss index 0c0f5ba502..b22d13942a 100644 --- a/packages/table/src/_mixins.scss +++ b/packages/table/src/_mixins.scss @@ -271,7 +271,8 @@ } &--bordered { - @include rmd-divider-border(bottom); + border-bottom: rmd-divider-theme-var(size) solid + rmd-table-theme-var(border-color); // this is actually pretty nice since it'll also NOT create a border on the // header row (which we want) diff --git a/packages/table/src/_variables.scss b/packages/table/src/_variables.scss index bcc8d2f325..4494619fea 100644 --- a/packages/table/src/_variables.scss +++ b/packages/table/src/_variables.scss @@ -5,6 +5,39 @@ @import '~@react-md/states/dist/functions'; @import '~@react-md/theme/dist/mixins'; +/// The border color to use for tables due to a chrome rendering bug when the +/// `colSpan` is used on a table. This will be applied when using the light +/// theme. +/// +/// Note: this value is _close_ to the divider default value of +/// `rgba($rmd-black-base, 0.12)` +/// +/// @since 2.3.2 +/// @type Color +$rmd-table-light-border-color: #e0e0e0 !default; + +/// The border color to use for tables due to a chrome rendering bug when the +/// `colSpan` is used on a table. This will be applied when using the dark +/// theme. +/// +/// Note: this value is _close_ to the divider default value of +/// `rgba($rmd-white-base, 0.12)` +/// +/// @since 2.3.2 +/// @type Color +$rmd-table-dark-border-color: #2f2f2f !default; + +/// The border color to use for tables due to a chrome rendering bug when the +/// `colSpan` is used on a table. +/// +/// @since 2.3.2 +/// @type Color +$rmd-table-border-color: if( + $rmd-theme-light, + $rmd-table-light-border-color, + $rmd-table-dark-border-color +) !default; + /// The amount of padding to apply to the left and right of each `` and /// `` in a table. /// @type Number @@ -135,6 +168,7 @@ $rmd-table-checkbox-padding: 0.5rem !default; /// /// @type Map $rmd-table-theme-values: ( + border-color: $rmd-table-border-color, cell-color: $rmd-table-cell-color, cell-h-padding: $rmd-table-cell-horizontal-padding, cell-v-padding: $rmd-table-cell-vertical-padding, diff --git a/packages/theme/src/_mixins.scss b/packages/theme/src/_mixins.scss index e4b7c7398a..ded662fb5a 100644 --- a/packages/theme/src/_mixins.scss +++ b/packages/theme/src/_mixins.scss @@ -216,6 +216,13 @@ ); } + @if mixin-exists(rmd-table-theme-update-var) { + @include rmd-table-theme-update-var( + border-color, + $rmd-table-light-border-color + ); + } + @if mixin-exists(rmd-tabs-theme-update-var) { @include rmd-tabs-theme-update-var(active, $rmd-black-base); @include rmd-tabs-theme-update-var( @@ -352,6 +359,13 @@ ); } + @if mixin-exists(rmd-table-theme-update-var) { + @include rmd-table-theme-update-var( + border-color, + $rmd-table-dark-border-color + ); + } + @if mixin-exists(rmd-tabs-theme-update-var) { @include rmd-tabs-theme-update-var(active, $rmd-white-base); @include rmd-tabs-theme-update-var(