From 989d0f39a3a6eeeb3bd177ae8df0115208878459 Mon Sep 17 00:00:00 2001 From: Mikkel Laursen Date: Sat, 11 Jul 2020 18:22:20 -0600 Subject: [PATCH] docs: Added @require to a few theme items --- .../src/constants/sassdoc/form.ts | 32 +++-- .../src/constants/sassdoc/list.ts | 8 +- .../src/constants/sassdoc/theme.ts | 112 ++++++++++++------ .../src/constants/sassdoc/tree.ts | 2 +- packages/form/src/toggle/_variables.scss | 2 + packages/theme/src/_variables.scss | 3 + 6 files changed, 105 insertions(+), 54 deletions(-) diff --git a/packages/documentation/src/constants/sassdoc/form.ts b/packages/documentation/src/constants/sassdoc/form.ts index 266bd7f019..a045d7b6d5 100644 --- a/packages/documentation/src/constants/sassdoc/form.ts +++ b/packages/documentation/src/constants/sassdoc/form.ts @@ -2093,9 +2093,19 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-track-background-color", description: "The background color for a switch's track. This is the element that the ball animates left and right on.", - source: "packages/form/src/toggle/_variables.scss#L48-L52", + source: "packages/form/src/toggle/_variables.scss#L50-L54", requires: [ { name: "rmd-black-base", type: "variable", packageName: "theme" }, + { + name: "rmd-theme-dark-elevation", + type: "variable", + packageName: "theme", + }, + { + name: "rmd-theme-dark-elevation-colors", + type: "variable", + packageName: "theme", + }, ], packageName: "form", type: "Color", @@ -2108,7 +2118,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-track-border-radius", description: "The border radius to apply to the switch's track. This is the element that the ball animates left and right on.\n", - source: "packages/form/src/toggle/_variables.scss#L57", + source: "packages/form/src/toggle/_variables.scss#L59", usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }], packageName: "form", type: "Number", @@ -2118,7 +2128,7 @@ const sassdoc: PackageSassDoc = { "rmd-switch-ball-size": { name: "rmd-switch-ball-size", description: "The size of the switch's ball.\n", - source: "packages/form/src/toggle/_variables.scss#L61", + source: "packages/form/src/toggle/_variables.scss#L63", usedBy: [ { name: "rmd-switch", type: "mixin", packageName: "form" }, { name: "rmd-switch-input", type: "mixin", packageName: "form" }, @@ -2132,7 +2142,7 @@ const sassdoc: PackageSassDoc = { "rmd-switch-ball-border-radius": { name: "rmd-switch-ball-border-radius", description: "The border radius for the switch's ball.\n", - source: "packages/form/src/toggle/_variables.scss#L65", + source: "packages/form/src/toggle/_variables.scss#L67", usedBy: [{ name: "rmd-switch-ball", type: "mixin", packageName: "form" }], packageName: "form", type: "Number", @@ -2143,7 +2153,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-ball-offset", description: "The amount of offset that should be applied to the ball relative to its track. This is really used so the ball can overlap the track a bit to look a bit nicer.\n", - source: "packages/form/src/toggle/_variables.scss#L70", + source: "packages/form/src/toggle/_variables.scss#L72", usedBy: [ { name: "rmd-switch-input", type: "mixin", packageName: "form" }, { name: "rmd-switch-ball", type: "mixin", packageName: "form" }, @@ -2157,7 +2167,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-container-vertical-padding", description: "The vertical padding for the switch container. This should generally be large enough so that the ball does not overlap any other elements.\n", - source: "packages/form/src/toggle/_variables.scss#L75", + source: "packages/form/src/toggle/_variables.scss#L77", usedBy: [ { name: "rmd-switch-container", type: "mixin", packageName: "form" }, ], @@ -2170,7 +2180,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-container-horizontal-padding", description: "The horizontal padding for the switch container. This should generally be large enough so that the ball does not overlap the label or other elements.", - source: "packages/form/src/toggle/_variables.scss#L81", + source: "packages/form/src/toggle/_variables.scss#L83", usedBy: [ { name: "rmd-switch-container", type: "mixin", packageName: "form" }, ], @@ -2184,7 +2194,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-ball-disabled-color", description: "The color to use for the switch's ball when it is toggled on and disabled.", - source: "packages/form/src/toggle/_variables.scss#L88-L94", + source: "packages/form/src/toggle/_variables.scss#L90-L96", usedBy: [ { name: "rmd-switch-input", type: "mixin", packageName: "form" }, ], @@ -2207,7 +2217,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-progress-width", description: "The width of the circular progress bar. This will make the progress bar more prominent than the normal circular progress.\n", - source: "packages/form/src/toggle/_variables.scss#L99", + source: "packages/form/src/toggle/_variables.scss#L101", usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }], packageName: "form", type: "Number", @@ -2218,7 +2228,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-progress-background-color", description: "The background color to use for the switch's ball while the the switch is loading.", - source: "packages/form/src/toggle/_variables.scss#L105", + source: "packages/form/src/toggle/_variables.scss#L107", usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }], requires: [ { name: "rmd-white-base", type: "variable", packageName: "theme" }, @@ -2233,7 +2243,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-switch-progress-padding", description: "The amount of padding to apply to the async switch's progress bar. This will make it so there is some space between the switch's ball and the progress bar.\n", - source: "packages/form/src/toggle/_variables.scss#L110", + source: "packages/form/src/toggle/_variables.scss#L112", usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }], packageName: "form", type: "Number", diff --git a/packages/documentation/src/constants/sassdoc/list.ts b/packages/documentation/src/constants/sassdoc/list.ts index e883f96150..3f6c58cfe1 100644 --- a/packages/documentation/src/constants/sassdoc/list.ts +++ b/packages/documentation/src/constants/sassdoc/list.ts @@ -364,7 +364,7 @@ const sassdoc: PackageSassDoc = { "rmd-list-item": { name: "rmd-list-item", description: "Creates all the styles for a list item.\n", - source: "packages/list/src/_mixins.scss#L148-L240", + source: "packages/list/src/_mixins.scss#L148-L242", usedBy: [ { name: "react-md-list", type: "mixin", packageName: "list" }, { name: "rmd-tree-item", type: "mixin", packageName: "tree" }, @@ -425,13 +425,13 @@ const sassdoc: PackageSassDoc = { packageName: "list", code: "@mixin rmd-list-item { … }", sourceCode: - '@mixin rmd-list-item {\n @include rmd-list-item-base;\n\n &--clickable {\n @include rmd-utils-hide-focus-outline;\n @include rmd-states-surface;\n }\n\n &[aria-disabled] {\n @include rmd-theme(color, text-disabled-on-background);\n }\n\n &--link {\n color: inherit;\n text-decoration: none;\n }\n\n &--medium {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-medium-height)\n );\n }\n\n &--large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-large-height)\n );\n }\n\n &--extra-large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-extra-large-height)\n );\n }\n\n &--three-lines {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-three-line-height)\n );\n\n .rmd-list-item__text--secondary {\n @include rmd-typography-line-clamp;\n @include rmd-list-theme(max-height, item-secondary-three-line-height);\n\n line-height: $rmd-list-item-secondary-text-line-height;\n white-space: normal;\n }\n }\n\n &--dense {\n @include rmd-list-item-dense-theme;\n }\n\n &__text {\n @include rmd-typography-text-overflow-ellipsis;\n @include rmd-utils-rtl {\n margin-left: auto;\n }\n\n display: block;\n flex-grow: 1;\n // this is so it overlays the background colors from the interaction states\n z-index: 1;\n\n &--secondary {\n @include rmd-theme(color, text-secondary-on-background);\n }\n }\n\n &__addon {\n flex-shrink: 0;\n\n &--top {\n align-self: flex-start;\n }\n\n &--bottom {\n align-self: flex-end;\n }\n\n &--before {\n // this should only be added on the first icon in the list item since it\'s the only\n // one that should match the "keyline" of the app. The right icon/avatars should\n // have the existing text icon spacing.\n @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));\n }\n\n &--avatar-before {\n @include rmd-list-item-addon-spacing(rmd-avatar-theme-var(size));\n }\n\n &--media {\n @include rmd-icon-theme-update-var(\n text-spacing,\n rmd-list-theme-var(media-spacing)\n );\n @include rmd-list-theme(width, media-size);\n }\n\n &--media-large {\n @include rmd-list-theme-update-var(\n media-size,\n rmd-list-theme-var(media-large-size)\n );\n }\n }\n}\n', + '@mixin rmd-list-item {\n @include rmd-list-item-base;\n\n &--clickable {\n @include rmd-utils-hide-focus-outline;\n @include rmd-states-surface;\n }\n\n &--disabled {\n @include rmd-theme(color, text-disabled-on-background);\n\n pointer-events: none;\n }\n\n &--link {\n color: inherit;\n text-decoration: none;\n }\n\n &--medium {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-medium-height)\n );\n }\n\n &--large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-large-height)\n );\n }\n\n &--extra-large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-extra-large-height)\n );\n }\n\n &--three-lines {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-three-line-height)\n );\n\n .rmd-list-item__text--secondary {\n @include rmd-typography-line-clamp;\n @include rmd-list-theme(max-height, item-secondary-three-line-height);\n\n line-height: $rmd-list-item-secondary-text-line-height;\n white-space: normal;\n }\n }\n\n &--dense {\n @include rmd-list-item-dense-theme;\n }\n\n &__text {\n @include rmd-typography-text-overflow-ellipsis;\n @include rmd-utils-rtl {\n margin-left: auto;\n }\n\n display: block;\n flex-grow: 1;\n // this is so it overlays the background colors from the interaction states\n z-index: 1;\n\n &--secondary {\n @include rmd-theme(color, text-secondary-on-background);\n }\n }\n\n &__addon {\n flex-shrink: 0;\n\n &--top {\n align-self: flex-start;\n }\n\n &--bottom {\n align-self: flex-end;\n }\n\n &--before {\n // this should only be added on the first icon in the list item since it\'s the only\n // one that should match the "keyline" of the app. The right icon/avatars should\n // have the existing text icon spacing.\n @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));\n }\n\n &--avatar-before {\n @include rmd-list-item-addon-spacing(rmd-avatar-theme-var(size));\n }\n\n &--media {\n @include rmd-icon-theme-update-var(\n text-spacing,\n rmd-list-theme-var(media-spacing)\n );\n @include rmd-list-theme(width, media-size);\n }\n\n &--media-large {\n @include rmd-list-theme-update-var(\n media-size,\n rmd-list-theme-var(media-large-size)\n );\n }\n }\n}\n', type: "mixin", }, "rmd-list-subheader": { name: "rmd-list-subheader", description: "Creates the styles for a subheader within a list.\n", - source: "packages/list/src/_mixins.scss#L243-L255", + source: "packages/list/src/_mixins.scss#L245-L257", usedBy: [{ name: "react-md-list", type: "mixin", packageName: "list" }], requires: [ { name: "rmd-typography", type: "mixin", packageName: "typography" }, @@ -448,7 +448,7 @@ const sassdoc: PackageSassDoc = { "react-md-list": { name: "react-md-list", description: "Creats all the styles for the list package.\n", - source: "packages/list/src/_mixins.scss#L258-L272", + source: "packages/list/src/_mixins.scss#L260-L274", usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }], requires: [ { diff --git a/packages/documentation/src/constants/sassdoc/theme.ts b/packages/documentation/src/constants/sassdoc/theme.ts index 673fc2497d..ea7f7e3753 100644 --- a/packages/documentation/src/constants/sassdoc/theme.ts +++ b/packages/documentation/src/constants/sassdoc/theme.ts @@ -696,7 +696,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-text-color", description: 'This function is used to auto-generate "reasonable" defaults for the text colors based on a the background it is on. This will basically check if the provided color is considered light or dark, and choose a value from either the dark theme text colors or the light theme text colors so that it is still legible.\n\nNOTE: This is not perfect since it only handles the min-contrast ration of 3:1 by default so you still might need to define your own overrides.', - source: "packages/theme/src/_variables.scss#L318-L326", + source: "packages/theme/src/_variables.scss#L320-L328", requires: [ { name: "rmd-theme-contrast-tone", @@ -4392,11 +4392,21 @@ const sassdoc: PackageSassDoc = { type: "variable", packageName: "chip", }, + { + name: "rmd-switch-track-background-color", + type: "variable", + packageName: "form", + }, { name: "rmd-theme-dark-elevation", type: "mixin", packageName: "theme", }, + { + name: "rmd-theme-dark-background", + type: "variable", + packageName: "theme", + }, ], packageName: "theme", type: "Boolean", @@ -4661,9 +4671,23 @@ const sassdoc: PackageSassDoc = { }, "rmd-theme-dark-background": { name: "rmd-theme-dark-background", - description: "The dark theme's background color.\n", - source: "packages/theme/src/_variables.scss#L145", - usedBy: [{ name: "rmd-theme-dark", type: "mixin", packageName: "theme" }], + description: "The dark theme's background color.", + source: "packages/theme/src/_variables.scss#L147", + usedBy: [ + { name: "rmd-theme-dark", type: "mixin", packageName: "theme" }, + { + name: "rmd-theme-dark-elevation-colors", + type: "variable", + packageName: "theme", + }, + ], + requires: [ + { + name: "rmd-theme-dark-elevation", + type: "variable", + packageName: "theme", + }, + ], packageName: "theme", type: "Color", value: "if($rmd-theme-dark-elevation, #121212, #303030)", @@ -4674,7 +4698,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-surface", description: "The dark theme's surface color.\n\nNote: If the `$rmd-theme-dark-elevation` variable is set to `true`, this value will not really be used.\n", - source: "packages/theme/src/_variables.scss#L152", + source: "packages/theme/src/_variables.scss#L154", usedBy: [ { name: "rmd-chip-outline-dark-background-color", @@ -4693,7 +4717,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-class", description: "The class name that gets applied to the root `` element if your app switches between dark and light themes. This is really only used for the changing the background color based on elevation when the app is in dark mode and the `$rmd-theme-dark-elevation` boolean is enabled.\n\nIf this is set to `prefers-color-scheme`, the dark elevation styles will only be applied when the `@media (prefers-color-scheme: dark)`.", - source: "packages/theme/src/_variables.scss#L164", + source: "packages/theme/src/_variables.scss#L166", since: "2.1.0", usedBy: [ { @@ -4710,7 +4734,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-background": { name: "rmd-theme-background", description: "The theme's background color.\n", - source: "packages/theme/src/_variables.scss#L168-L172", + source: "packages/theme/src/_variables.scss#L170-L174", usedBy: [ { name: "rmd-divider-background-color", @@ -4729,7 +4753,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-surface", description: "The theme's surface background color. This is the background color that will be used for any temporary 'material' (or surface)\n\nEx: Dialogs, Lists\n", - source: "packages/theme/src/_variables.scss#L179-L183", + source: "packages/theme/src/_variables.scss#L181-L185", usedBy: [ { name: "rmd-card-secondary-color", @@ -4748,7 +4772,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-on-surface", description: "The color to use when text should be displayed on a surface or temporary material. The default behavior is to test if the surface color's contrast tone. If the color is considered 'dark', `$rd-white-base` will be used.\nOtherwise `$rmd-black-base` will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).\n", - source: "packages/theme/src/_variables.scss#L193-L197", + source: "packages/theme/src/_variables.scss#L195-L199", packageName: "theme", type: "Color", value: @@ -4760,7 +4784,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-primary-text-color", description: "The default light theme's primary text color. This default value changes between the result of `rgba` or `lighten` with `$rmd-black-base`.\n", - source: "packages/theme/src/_variables.scss#L202-L206", + source: "packages/theme/src/_variables.scss#L204-L208", packageName: "theme", type: "Color", value: @@ -4772,7 +4796,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-secondary-text-color", description: "The default light theme's secondary text color. This default value changes between the result of `rgba` or `lighten` with `$rmd-black-base`.\n", - source: "packages/theme/src/_variables.scss#L211-L215", + source: "packages/theme/src/_variables.scss#L213-L217", packageName: "theme", type: "Color", value: @@ -4784,7 +4808,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-hint-text-color", description: "The default light theme's hint text color. This default value changes between the result of `rgba` or `lighten` with `$rmd-black-base`.\n", - source: "packages/theme/src/_variables.scss#L220-L224", + source: "packages/theme/src/_variables.scss#L222-L226", packageName: "theme", type: "Color", value: @@ -4796,7 +4820,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-disabled-text-color", description: "The default light theme's disabled text color. This default value changes between the result of `rgba` or `lighten` with `$rmd-black-base`.\n", - source: "packages/theme/src/_variables.scss#L229-L233", + source: "packages/theme/src/_variables.scss#L231-L235", packageName: "theme", type: "Color", value: @@ -4808,7 +4832,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-icon-color", description: "The default light theme's icon text color. This default value changes between the result of `rgba` or `lighten` with `$rmd-black-base`.\n", - source: "packages/theme/src/_variables.scss#L238-L242", + source: "packages/theme/src/_variables.scss#L240-L244", packageName: "theme", type: "Color", value: @@ -4820,7 +4844,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-primary-text-color", description: "The default dark theme's primary text color. This default value changes between the result of `rgba` or `darken` with `$rmd-white-base`.\n", - source: "packages/theme/src/_variables.scss#L247", + source: "packages/theme/src/_variables.scss#L249", packageName: "theme", type: "Color", value: "darken($rmd-white-base, 15%)", @@ -4831,7 +4855,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-secondary-text-color", description: "The default dark theme's secondary text color. This default value changes between the result of `rgba` or `darken` with `$rmd-white-base`.\n", - source: "packages/theme/src/_variables.scss#L252", + source: "packages/theme/src/_variables.scss#L254", packageName: "theme", type: "Color", value: "darken($rmd-white-base, 30%)", @@ -4842,7 +4866,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-hint-text-color", description: "The default dark theme's hint text color. This default value changes between the result of `rgba` or `darken` with `$rmd-white-base`.\n", - source: "packages/theme/src/_variables.scss#L257", + source: "packages/theme/src/_variables.scss#L259", packageName: "theme", type: "Color", value: "darken($rmd-white-base, 50%)", @@ -4853,7 +4877,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-disabled-text-color", description: "The default dark theme's disabled text color. This default value changes between the result of `rgba` or `darken` with `$rmd-white-base`.\n", - source: "packages/theme/src/_variables.scss#L262", + source: "packages/theme/src/_variables.scss#L264", packageName: "theme", type: "Color", value: "darken($rmd-white-base, 50%)", @@ -4864,7 +4888,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-icon-color", description: "The default dark theme's icon text color. This default value changes between the result of `rgba` or `darken` with `$rmd-white-base`.\n", - source: "packages/theme/src/_variables.scss#L267", + source: "packages/theme/src/_variables.scss#L269", packageName: "theme", type: "Color", value: "darken($rmd-white-base, 30%)", @@ -4875,7 +4899,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-light-text-colors", description: "A Map of all the light theme text colors for quick loopups.\n", - source: "packages/theme/src/_variables.scss#L271-L277", + source: "packages/theme/src/_variables.scss#L273-L279", usedBy: [ { name: "rmd-theme-text-color", @@ -4895,7 +4919,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-text-colors", description: "A Map of all the light theme text colors for quick loopups.\n", - source: "packages/theme/src/_variables.scss#L281-L287", + source: "packages/theme/src/_variables.scss#L283-L289", usedBy: [ { name: "rmd-theme-text-color", @@ -4915,7 +4939,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-primary-text-on-background-color", description: 'The primary text color to use on the background "surface". This is not related to the `$rmd-theme-primary` variable.\n', - source: "packages/theme/src/_variables.scss#L332-L335", + source: "packages/theme/src/_variables.scss#L334-L337", see: [ { name: "rmd-theme-text-color", @@ -4933,7 +4957,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-secondary-text-on-background-color", description: 'The secondary text color to use on the background "surface". This is not related to the `$rmd-theme-secondary` variable.\n', - source: "packages/theme/src/_variables.scss#L341-L344", + source: "packages/theme/src/_variables.scss#L343-L346", see: [ { name: "rmd-theme-text-color", @@ -4950,7 +4974,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-hint-text-on-background-color": { name: "rmd-theme-hint-text-on-background-color", description: 'The hint text color to use on the background "surface".\n', - source: "packages/theme/src/_variables.scss#L349-L352", + source: "packages/theme/src/_variables.scss#L351-L354", see: [ { name: "rmd-theme-text-color", @@ -4968,7 +4992,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-disabled-text-on-background-color", description: 'The disabled text color to use on the background "surface".\n', - source: "packages/theme/src/_variables.scss#L357-L360", + source: "packages/theme/src/_variables.scss#L359-L362", see: [ { name: "rmd-theme-text-color", @@ -4985,7 +5009,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-icon-on-background-color": { name: "rmd-theme-icon-on-background-color", description: 'The icon color to use on the background "surface".\n', - source: "packages/theme/src/_variables.scss#L365", + source: "packages/theme/src/_variables.scss#L367", see: [ { name: "rmd-theme-text-color", @@ -5003,7 +5027,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-primary-text-on-light-color", description: "The primary text color to use on the light colored surface. This is not related to the `$rmd-theme-primary` variable.\n", - source: "packages/theme/src/_variables.scss#L371", + source: "packages/theme/src/_variables.scss#L373", see: [ { name: "rmd-theme-text-color", @@ -5024,7 +5048,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-secondary-text-on-light-color", description: "The secondary text color to use on the light colored surface. This is not related to the `$rmd-theme-secondary` variable.\n", - source: "packages/theme/src/_variables.scss#L377", + source: "packages/theme/src/_variables.scss#L379", see: [ { name: "rmd-theme-text-color", @@ -5044,7 +5068,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-hint-text-on-light-color": { name: "rmd-theme-hint-text-on-light-color", description: "The hint text color to use on the light colored surface.\n", - source: "packages/theme/src/_variables.scss#L382", + source: "packages/theme/src/_variables.scss#L384", see: [ { name: "rmd-theme-text-color", @@ -5065,7 +5089,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-disabled-text-on-light-color", description: "The disabled text color to use on the light colored surface.\n", - source: "packages/theme/src/_variables.scss#L387", + source: "packages/theme/src/_variables.scss#L389", see: [ { name: "rmd-theme-text-color", @@ -5085,7 +5109,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-icon-on-light-color": { name: "rmd-theme-icon-on-light-color", description: "The icon color to use on the light colored surface.\n", - source: "packages/theme/src/_variables.scss#L392", + source: "packages/theme/src/_variables.scss#L394", see: [ { name: "rmd-theme-text-color", @@ -5106,7 +5130,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-primary-text-on-dark-color", description: "The primary text color to use on the dark colored surface. This is not related to the `$rmd-theme-primary` variable.\n", - source: "packages/theme/src/_variables.scss#L398", + source: "packages/theme/src/_variables.scss#L400", see: [ { name: "rmd-theme-text-color", @@ -5125,7 +5149,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-secondary-text-on-dark-color", description: "The secondary text color to use on the dark colored surface. This is not related to the `$rmd-theme-secondary` variable.\n", - source: "packages/theme/src/_variables.scss#L404", + source: "packages/theme/src/_variables.scss#L406", see: [ { name: "rmd-theme-text-color", @@ -5143,7 +5167,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-hint-text-on-dark-color": { name: "rmd-theme-hint-text-on-dark-color", description: "The hint text color to use on the dark colored surface.\n", - source: "packages/theme/src/_variables.scss#L409", + source: "packages/theme/src/_variables.scss#L411", see: [ { name: "rmd-theme-text-color", @@ -5162,7 +5186,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-disabled-text-on-dark-color", description: "The disabled text color to use on the dark colored surface.\n", - source: "packages/theme/src/_variables.scss#L414", + source: "packages/theme/src/_variables.scss#L416", see: [ { name: "rmd-theme-text-color", @@ -5180,7 +5204,7 @@ const sassdoc: PackageSassDoc = { "rmd-theme-icon-on-dark-color": { name: "rmd-theme-icon-on-dark-color", description: "The icon color to use on the dark colored surface.\n", - source: "packages/theme/src/_variables.scss#L419", + source: "packages/theme/src/_variables.scss#L421", see: [ { name: "rmd-theme-text-color", @@ -5199,7 +5223,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-dark-elevation-colors", description: "A map containing all the available dark theme elevation colors. This needs to contain a color for each elevation in the `@react-md/elevation` package\n(0 - 24).", - source: "packages/theme/src/_variables.scss#L427-L453", + source: "packages/theme/src/_variables.scss#L430-L456", since: "2.1.0", usedBy: [ { @@ -5212,12 +5236,24 @@ const sassdoc: PackageSassDoc = { type: "variable", packageName: "chip", }, + { + name: "rmd-switch-track-background-color", + type: "variable", + packageName: "form", + }, { name: "rmd-theme-dark-elevation", type: "mixin", packageName: "theme", }, ], + requires: [ + { + name: "rmd-theme-dark-background", + type: "variable", + packageName: "theme", + }, + ], packageName: "theme", type: "Map", value: @@ -5230,7 +5266,7 @@ const sassdoc: PackageSassDoc = { name: "rmd-theme-values", description: "A Map of all the theme values that can be used throughout the app. This is mainly created so that the specific `rmd-theme--NAME` classes can be created, but also for the `rmd-theme` function to get a specific color within your theme.\n", - source: "packages/theme/src/_variables.scss#L460-L493", + source: "packages/theme/src/_variables.scss#L463-L496", usedBy: [ { name: "rmd-theme", type: "function", packageName: "theme" }, { name: "rmd-theme-var", type: "function", packageName: "theme" }, diff --git a/packages/documentation/src/constants/sassdoc/tree.ts b/packages/documentation/src/constants/sassdoc/tree.ts index 1e0b2ed6c5..885080fc04 100644 --- a/packages/documentation/src/constants/sassdoc/tree.ts +++ b/packages/documentation/src/constants/sassdoc/tree.ts @@ -338,7 +338,7 @@ const sassdoc: PackageSassDoc = { { code: ".rmd-tree-item {\n @include rmd-tree-item;\n}\n", compiled: - '.rmd-tree-item {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n list-style: none;\n}\n.rmd-tree-item:focus {\n outline-style: none;\n}\n.rmd-tree-item::-moz-focus-inner {\n border: 0;\n}\n.rmd-tree-item__content {\n min-height: var(--rmd-list-item-height, 3rem);\n align-items: center;\n display: flex;\n padding: var(--rmd-list-item-vertical-padding, 0.5rem)\n var(--rmd-list-item-horizontal-padding, 1rem);\n position: relative;\n}\n.rmd-tree-item__content--clickable {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rmd-tree-item__content--clickable:focus {\n outline-style: none;\n}\n.rmd-tree-item__content--clickable::-moz-focus-inner {\n border: 0;\n}\n.rmd-tree-item__content--clickable:focus {\n outline-style: none;\n}\n.rmd-tree-item__content--clickable::-moz-focus-inner {\n border: 0;\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus::before {\n box-shadow: var(--rmd-states-focus-shadow, inset 0 0 0 0.125rem #2196f3);\n}\n.rmd-tree-item__content--clickable::before {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n border-radius: inherit;\n content: "";\n pointer-events: none;\n z-index: 0;\n background-color: var(--rmd-states-background-color, transparent);\n transition: background-color 0.15s;\n}\n.rmd-tree-item__content--clickable:disabled,\n.rmd-tree-item__content--clickable[aria-disabled="true"] {\n --rmd-states-hover-color: transparent;\n}\n.rmd-tree-item__content--clickable:not(:disabled):not([aria-disabled="true"]):hover {\n cursor: pointer;\n}\n.rmd-tree-item__content--clickable:hover {\n --rmd-states-background-color: var(\n --rmd-states-hover-color,\n rgba(0, 0, 0, 0.08)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus {\n --rmd-states-background-color: var(\n --rmd-states-focus-color,\n rgba(0, 0, 0, 0.24)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus:hover {\n --rmd-states-background-color: var(\n --rmd-states-hover-color,\n rgba(0, 0, 0, 0.08)\n );\n}\n.rmd-utils--touch .rmd-tree-item__content--clickable:focus,\n.rmd-utils--touch .rmd-tree-item__content--clickable:hover {\n --rmd-states-background-color: transparent;\n}\n.rmd-tree-item__content--clickable.rmd-states--pressed {\n --rmd-states-background-color: var(\n --rmd-states-pressed-color,\n rgba(0, 0, 0, 0.32)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable.rmd-states--pressed {\n --rmd-states-background-color: var(\n --rmd-states-pressed-color,\n rgba(0, 0, 0, 0.32)\n );\n}\n.rmd-tree-item__content[aria-disabled] {\n color: var(--rmd-theme-text-disabled-on-background, #9e9e9e);\n}\n.rmd-tree-item__content--link {\n color: inherit;\n text-decoration: none;\n}\n.rmd-tree-item__content--medium {\n --rmd-list-item-height: var(--rmd-list-item-medium-height, 3.5rem);\n}\n.rmd-tree-item__content--large {\n --rmd-list-item-height: var(--rmd-list-item-large-height, 4rem);\n}\n.rmd-tree-item__content--extra-large {\n --rmd-list-item-height: var(--rmd-list-item-extra-large-height, 4.5rem);\n}\n.rmd-tree-item__content--three-lines {\n --rmd-list-item-height: var(--rmd-list-item-three-line-height, 5.5rem);\n}\n.rmd-tree-item__content--three-lines .rmd-list-item__text--secondary {\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n display: -webkit-box;\n max-height: var(--rmd-list-item-secondary-three-line-height, 3rem);\n line-height: 1.42857;\n white-space: normal;\n}\n.rmd-tree-item__content--dense {\n --rmd-list-item-height: var(--rmd-list-dense-item-height, 2.5rem);\n --rmd-list-item-medium-height: var(--rmd-list-dense-item-medium-height, 3rem);\n --rmd-list-item-large-height: var(--rmd-list-dense-item-large-height, 3.5rem);\n --rmd-list-item-extra-large-height: var(\n --rmd-list-dense-item-extra-large-height,\n 4rem\n );\n --rmd-list-item-three-line-height: var(\n --rmd-list-dense-item-three-line-height,\n 5rem\n );\n --rmd-list-item-secondary-three-line-height: var(\n --rmd-list-dense-item-secondary-three-line-height,\n 2.25rem\n );\n}\n.rmd-tree-item__content__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n flex-grow: 1;\n z-index: 1;\n}\n[dir="rtl"] .rmd-tree-item__content__text {\n margin-left: auto;\n}\n.rmd-tree-item__content__text--secondary {\n color: var(--rmd-theme-text-secondary-on-background, #757575);\n}\n.rmd-tree-item__content__addon {\n flex-shrink: 0;\n}\n.rmd-tree-item__content__addon--top {\n align-self: flex-start;\n}\n.rmd-tree-item__content__addon--bottom {\n align-self: flex-end;\n}\n.rmd-tree-item__content__addon--before {\n --rmd-icon-text-spacing: calc(\n var(--rmd-list-text-keyline, 4.5rem) -\n var(--rmd-list-item-horizontal-padding, 1rem) -\n var(--rmd-icon-size, 1.5rem)\n );\n}\n.rmd-tree-item__content__addon--avatar-before {\n --rmd-icon-text-spacing: calc(\n var(--rmd-list-text-keyline, 4.5rem) -\n var(--rmd-list-item-horizontal-padding, 1rem) -\n var(--rmd-avatar-size, 2.5rem)\n );\n}\n.rmd-tree-item__content__addon--media {\n --rmd-icon-text-spacing: var(--rmd-list-media-spacing, 1rem);\n width: var(--rmd-list-media-size, 3.5rem);\n}\n.rmd-tree-item__content__addon--media-large {\n --rmd-list-media-size: var(--rmd-list-media-large-size, 6.25rem);\n}\n.rmd-tree-item__content--selected {\n --rmd-states-background-color: var(\n --rmd-states-selected-color,\n rgba(0, 0, 0, 0.16)\n );\n}\n.rmd-utils--touch .rmd-tree-item__content--selected:hover,\n.rmd-utils--touch .rmd-tree-item__content--selected:focus {\n --rmd-states-background-color: var(\n --rmd-states-selected-color,\n rgba(0, 0, 0, 0.16)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--focused {\n box-shadow: inset 0 0 0 2px #2196f3;\n}\n', + '.rmd-tree-item {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n list-style: none;\n}\n.rmd-tree-item:focus {\n outline-style: none;\n}\n.rmd-tree-item::-moz-focus-inner {\n border: 0;\n}\n.rmd-tree-item__content {\n min-height: var(--rmd-list-item-height, 3rem);\n align-items: center;\n display: flex;\n padding: var(--rmd-list-item-vertical-padding, 0.5rem)\n var(--rmd-list-item-horizontal-padding, 1rem);\n position: relative;\n}\n.rmd-tree-item__content--clickable {\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rmd-tree-item__content--clickable:focus {\n outline-style: none;\n}\n.rmd-tree-item__content--clickable::-moz-focus-inner {\n border: 0;\n}\n.rmd-tree-item__content--clickable:focus {\n outline-style: none;\n}\n.rmd-tree-item__content--clickable::-moz-focus-inner {\n border: 0;\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus::before {\n box-shadow: var(--rmd-states-focus-shadow, inset 0 0 0 0.125rem #2196f3);\n}\n.rmd-tree-item__content--clickable::before {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n border-radius: inherit;\n content: "";\n pointer-events: none;\n z-index: 0;\n background-color: var(--rmd-states-background-color, transparent);\n transition: background-color 0.15s;\n}\n.rmd-tree-item__content--clickable:disabled,\n.rmd-tree-item__content--clickable[aria-disabled="true"] {\n --rmd-states-hover-color: transparent;\n}\n.rmd-tree-item__content--clickable:not(:disabled):not([aria-disabled="true"]):hover {\n cursor: pointer;\n}\n.rmd-tree-item__content--clickable:hover {\n --rmd-states-background-color: var(\n --rmd-states-hover-color,\n rgba(0, 0, 0, 0.08)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus {\n --rmd-states-background-color: var(\n --rmd-states-focus-color,\n rgba(0, 0, 0, 0.24)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable:focus:hover {\n --rmd-states-background-color: var(\n --rmd-states-hover-color,\n rgba(0, 0, 0, 0.08)\n );\n}\n.rmd-utils--touch .rmd-tree-item__content--clickable:focus,\n.rmd-utils--touch .rmd-tree-item__content--clickable:hover {\n --rmd-states-background-color: transparent;\n}\n.rmd-tree-item__content--clickable.rmd-states--pressed {\n --rmd-states-background-color: var(\n --rmd-states-pressed-color,\n rgba(0, 0, 0, 0.32)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--clickable.rmd-states--pressed {\n --rmd-states-background-color: var(\n --rmd-states-pressed-color,\n rgba(0, 0, 0, 0.32)\n );\n}\n.rmd-tree-item__content--disabled {\n color: var(--rmd-theme-text-disabled-on-background, #9e9e9e);\n pointer-events: none;\n}\n.rmd-tree-item__content--link {\n color: inherit;\n text-decoration: none;\n}\n.rmd-tree-item__content--medium {\n --rmd-list-item-height: var(--rmd-list-item-medium-height, 3.5rem);\n}\n.rmd-tree-item__content--large {\n --rmd-list-item-height: var(--rmd-list-item-large-height, 4rem);\n}\n.rmd-tree-item__content--extra-large {\n --rmd-list-item-height: var(--rmd-list-item-extra-large-height, 4.5rem);\n}\n.rmd-tree-item__content--three-lines {\n --rmd-list-item-height: var(--rmd-list-item-three-line-height, 5.5rem);\n}\n.rmd-tree-item__content--three-lines .rmd-list-item__text--secondary {\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n display: -webkit-box;\n max-height: var(--rmd-list-item-secondary-three-line-height, 3rem);\n line-height: 1.42857;\n white-space: normal;\n}\n.rmd-tree-item__content--dense {\n --rmd-list-item-height: var(--rmd-list-dense-item-height, 2.5rem);\n --rmd-list-item-medium-height: var(--rmd-list-dense-item-medium-height, 3rem);\n --rmd-list-item-large-height: var(--rmd-list-dense-item-large-height, 3.5rem);\n --rmd-list-item-extra-large-height: var(\n --rmd-list-dense-item-extra-large-height,\n 4rem\n );\n --rmd-list-item-three-line-height: var(\n --rmd-list-dense-item-three-line-height,\n 5rem\n );\n --rmd-list-item-secondary-three-line-height: var(\n --rmd-list-dense-item-secondary-three-line-height,\n 2.25rem\n );\n}\n.rmd-tree-item__content__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n flex-grow: 1;\n z-index: 1;\n}\n[dir="rtl"] .rmd-tree-item__content__text {\n margin-left: auto;\n}\n.rmd-tree-item__content__text--secondary {\n color: var(--rmd-theme-text-secondary-on-background, #757575);\n}\n.rmd-tree-item__content__addon {\n flex-shrink: 0;\n}\n.rmd-tree-item__content__addon--top {\n align-self: flex-start;\n}\n.rmd-tree-item__content__addon--bottom {\n align-self: flex-end;\n}\n.rmd-tree-item__content__addon--before {\n --rmd-icon-text-spacing: calc(\n var(--rmd-list-text-keyline, 4.5rem) -\n var(--rmd-list-item-horizontal-padding, 1rem) -\n var(--rmd-icon-size, 1.5rem)\n );\n}\n.rmd-tree-item__content__addon--avatar-before {\n --rmd-icon-text-spacing: calc(\n var(--rmd-list-text-keyline, 4.5rem) -\n var(--rmd-list-item-horizontal-padding, 1rem) -\n var(--rmd-avatar-size, 2.5rem)\n );\n}\n.rmd-tree-item__content__addon--media {\n --rmd-icon-text-spacing: var(--rmd-list-media-spacing, 1rem);\n width: var(--rmd-list-media-size, 3.5rem);\n}\n.rmd-tree-item__content__addon--media-large {\n --rmd-list-media-size: var(--rmd-list-media-large-size, 6.25rem);\n}\n.rmd-tree-item__content--selected {\n --rmd-states-background-color: var(\n --rmd-states-selected-color,\n rgba(0, 0, 0, 0.16)\n );\n}\n.rmd-utils--touch .rmd-tree-item__content--selected:hover,\n.rmd-utils--touch .rmd-tree-item__content--selected:focus {\n --rmd-states-background-color: var(\n --rmd-states-selected-color,\n rgba(0, 0, 0, 0.16)\n );\n}\n.rmd-utils--keyboard .rmd-tree-item__content--focused {\n box-shadow: inset 0 0 0 2px #2196f3;\n}\n', type: "scss", description: "Example Usage SCSS", }, diff --git a/packages/form/src/toggle/_variables.scss b/packages/form/src/toggle/_variables.scss index 9312cb698f..ad4ec9cb52 100644 --- a/packages/form/src/toggle/_variables.scss +++ b/packages/form/src/toggle/_variables.scss @@ -44,6 +44,8 @@ $rmd-switch-track-width: 2.25rem !default; /// left and right on. /// /// @require $rmd-black-base +/// @require $rmd-theme-dark-elevation +/// @require $rmd-theme-dark-elevation-colors /// @type Color $rmd-switch-track-background-color: if( $rmd-theme-dark-elevation, diff --git a/packages/theme/src/_variables.scss b/packages/theme/src/_variables.scss index 3d8e20ff20..0c2a2e2ff1 100644 --- a/packages/theme/src/_variables.scss +++ b/packages/theme/src/_variables.scss @@ -141,6 +141,8 @@ $rmd-theme-light-background: $rmd-grey-50 !default; $rmd-theme-light-surface: $rmd-white-base !default; /// The dark theme's background color. +/// +/// @require $rmd-theme-dark-elevation /// @type Color $rmd-theme-dark-background: if($rmd-theme-dark-elevation, #121212, #303030) !default; @@ -423,6 +425,7 @@ $rmd-theme-icon-on-dark-color: rmd-theme-text-color(icon, dark) !default; /// (0 - 24). /// /// @since 2.1.0 +/// @require $rmd-theme-dark-background /// @type Map $rmd-theme-dark-elevation-colors: ( 0: $rmd-theme-dark-background,