diff --git a/README.md b/README.md index a26ec056..79bef1fb 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-beta.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index c7f755c9..f5ece03e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 6cdc756a..39792254 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,13 @@ "lerna": "^7.1.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.8" + }, + "overrides": { + "gatsby-remark-external-links": { + "unist-util-find": "1.0.2" + } + }, + "resolutions": { + "**/gatsby-remark-external-links/unist-util-find": "1.0.2" } } diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index 41c5ac74..1dae3585 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit 41c5ac7443275a0274a06661f0569b5026cdf917 +Subproject commit 1dae358508d06a45b9722476300169fb876319ba diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs index 0a395873..50682b5d 160000 --- a/packages/coreui-react-chartjs +++ b/packages/coreui-react-chartjs @@ -1 +1 @@ -Subproject commit 0a39587318f6a285003e01db331d977cecab58ee +Subproject commit 50682b5d072d8f4863935d8bc81ef42b188971b1 diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index d3472677..b3281539 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-beta.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.9.0-rc.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index f6a02330..04747829 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -60,7 +60,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "@coreui/coreui": "4.3.0-beta.0", + "@coreui/coreui": "4.2.6", "react": ">=17", "react-dom": ">=17" } diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index ca25f5f3..9d785923 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -66,7 +66,7 @@ export interface CDropdownProps extends HTMLAttributes void /** diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index f2b128b8..cbd92ec7 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -13,7 +13,7 @@ export interface CPopoverProps extends Omit, 'tit /** * Apply a CSS fade transition to the popover. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ animation?: boolean /** @@ -31,13 +31,13 @@ export interface CPopoverProps extends Omit, 'tit /** * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index 32593916..dcecf2ee 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -13,7 +13,7 @@ export interface CTooltipProps extends Omit, 'con /** * Apply a CSS fade transition to the tooltip. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ animation?: boolean /** @@ -27,13 +27,13 @@ export interface CTooltipProps extends Omit, 'con /** * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ delay?: number | { show: number; hide: number } /** * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. * - * @since 4.9.0-beta.2 + * @since 4.9.0-rc.0 */ fallbackPlacements?: Placements | Placements[] /** diff --git a/packages/coreui-react/src/hooks/index.ts b/packages/coreui-react/src/hooks/index.ts index 5ee1b5e3..a5f43e64 100644 --- a/packages/coreui-react/src/hooks/index.ts +++ b/packages/coreui-react/src/hooks/index.ts @@ -1,5 +1,4 @@ -import { useColorModes } from './useColorModes' import { useForkedRef } from './useForkedRef' import { usePopper } from './usePopper' -export { useColorModes, useForkedRef, usePopper } +export { useForkedRef, usePopper } diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 451f42fc..7d493cd5 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -13,7 +13,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass` \| `FunctionComponent` | div | | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | | **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | +| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | +| **onHide** **_4.9.0-rc.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index 0e991b9e..ea5724ba 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -7,12 +7,15 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | +| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | | **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top | +| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | | **title** | Title node for your component. | `ReactNode` | - | | **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | | **visible** | Toggle the visibility of popover component. | `boolean` | - | diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index c7c4388f..e7d61f16 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -11,7 +11,8 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | `number` | - | +| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `` component. | `string` | - | | **thin** | Makes progress bar thinner. | `boolean` | - | -| **value** | The percent to progress the ProgressBar (out of 100). | `number` | 0 | +| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - | | **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | | **white** | Change the default color to white. | `boolean` | - | diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx new file mode 100644 index 00000000..109af3cf --- /dev/null +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -0,0 +1,10 @@ + +```jsx +import { CProgressStacked } from '@coreui/react' +// or +import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index 010885cb..a89da7ed 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -7,11 +7,14 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **animation** **_4.9.0-rc.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true | | **className** | A string of all className you want applied to the component. | `string` | - | | **content** | Content node for your component. | `ReactNode` | - | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 0] | +| **delay** **_4.9.0-rc.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | +| **fallbackPlacements** **_4.9.0-rc.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | +| **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'` | top | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | hover | -| **visible** | Toggle the visibility of popover component. | `boolean` | - | +| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | +| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | ['hover', 'focus'] | +| **visible** | Toggle the visibility of tooltip component. | `boolean` | - | diff --git a/packages/docs/content/components/button-group.mdx b/packages/docs/content/components/button-group.mdx index 5d521743..496654b9 100644 --- a/packages/docs/content/components/button-group.mdx +++ b/packages/docs/content/components/button-group.mdx @@ -49,7 +49,7 @@ These classes can also be added to groups of links, as an alternative to the ` Active link Link - Link + yarLink ``` diff --git a/packages/docs/content/components/chart.mdx b/packages/docs/content/components/chart.mdx index 5de2d340..e4b8e43b 100644 --- a/packages/docs/content/components/chart.mdx +++ b/packages/docs/content/components/chart.mdx @@ -44,24 +44,8 @@ A line chart is a way of plotting data points on a line. Often, it is used to sh [Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties) export const LineChartExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties) export const BarChartExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties) export const RadarChartExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.r.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties) export const DoughnutAndPieExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties) export const PolarAreaExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties) export const BubbleChartExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( { A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties) export const ScatterChartExample = () => { - const chartRef = useRef() - - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (chartRef.current) { - chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color') - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - } - }) - }, [chartRef]) - return ( -Variables for the [dark navbar](#color-schemes): - - - ### SASS loops [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. diff --git a/packages/docs/content/forms/validation.mdx b/packages/docs/content/forms/validation.mdx index 17020582..615c89d0 100644 --- a/packages/docs/content/forms/validation.mdx +++ b/packages/docs/content/forms/validation.mdx @@ -680,18 +680,6 @@ return ( ## Customizing -### CSS variables - -CoreUI for React components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - - - -These variables are also color mode adaptive, meaning they change color while in dark mode. - ### SASS variables - - - - diff --git a/packages/docs/content/layout/containers.mdx b/packages/docs/content/layout/containers.mdx index 3e0fe2a7..76bb8d06 100644 --- a/packages/docs/content/layout/containers.mdx +++ b/packages/docs/content/layout/containers.mdx @@ -22,13 +22,13 @@ The table below illustrates how each container's `max-width` compares to the ori | | Extra small
<576px
| Small
≥576px
| Medium
≥768px
| Large
≥992px
| X-Large
≥1200px
| XX-Large
≥1400px
| | --- | --- | --- | --- | --- | --- | --- | -| `.container` | 100% | 540px | 720px | 960px | 1140px | 1320px | -| `.container-sm` | 100% | 540px | 720px | 960px | 1140px | 1320px | -| `.container-md` | 100% | 100% | 720px | 960px | 1140px | 1320px | -| `.container-lg` | 100% | 100% | 100% | 960px | 1140px | 1320px | -| `.container-xl` | 100% | 100% | 100% | 100% | 1140px | 1320px | -| `.container-xxl` | 100% | 100% | 100% | 100% | 100% | 1320px | -| `.container-fluid` | 100% | 100% | 100% | 100% | 100% | 100% | +| `.container` | 100% | 540px | 720px | 960px | 1140px | 1320px | +| `.container-sm` | 100% | 540px | 720px | 960px | 1140px | 1320px | +| `.container-md` | 100% | 100% | 720px | 960px | 1140px | 1320px | +| `.container-lg` | 100% | 100% | 100% | 960px | 1140px | 1320px | +| `.container-xl` | 100% | 100% | 100% | 100% | 1140px | 1320px | +| `.container-xxl` | 100% | 100% | 100% | 100% | 100% | 1320px | +| `.container-fluid` | 100% | 100% | 100% | 100% | 100% | 100% | ## Default container diff --git a/packages/docs/package.json b/packages/docs/package.json index 7964b705..2e530d22 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "4.9.0-beta.2", + "version": "4.9.0-rc.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^3.1.2", - "@coreui/coreui": "4.3.0-beta.0", + "@coreui/coreui": "4.2.6", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.1.0", "@coreui/react-chartjs": "^2.1.3", diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index 4404f1aa..70e4e58a 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -7,28 +7,13 @@ import { cibTwitter, cilCloudDownload, cilMenu, - cilSun, - cilMoon, - cilContrast, cilHandshake, } from '@coreui/icons' -import { - CButton, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CHeader, - CHeaderNav, - CHeaderToggler, - CNavItem, - useColorModes, -} from '@coreui/react/src' +import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src' import { AppContext } from './../AppContext' const Header: FC = () => { - const { colorMode, setColorMode } = useColorModes('coreui-react-docs-theme') return ( <> @@ -63,50 +48,6 @@ const Header: FC = () => {
- - - {colorMode === 'dark' ? ( - - ) : (colorMode === 'auto' ? ( - - ) : ( - - ))} - - - setColorMode('light')} - > - Light - - setColorMode('dark')} - > - Dark - - setColorMode('auto')} - > - Auto - - - -
  • -
    -
    -
    • { const captureEnd = `// scss-docs-end ${capture}` const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`) const captured = re.exec(_file.node.internal.content) - const code = captured && captured[1].trim() + const code = captured ? captured[1].trim() : undefined + + if (code === undefined) { + console.error(`Can't find "${capture}" in ${_file.node.relativePath}`) + } return ( code && ( diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx index 26326fcf..4df70645 100644 --- a/packages/docs/src/components/Sidebar.tsx +++ b/packages/docs/src/components/Sidebar.tsx @@ -48,7 +48,7 @@ const Sidebar: FC = ({ ...props }) => { -
    Framework:
    +
    Framework:
    React.js diff --git a/packages/docs/src/styles/_footer.scss b/packages/docs/src/styles/_footer.scss index 7544a17b..14e22108 100644 --- a/packages/docs/src/styles/_footer.scss +++ b/packages/docs/src/styles/_footer.scss @@ -7,7 +7,7 @@ @include font-size(.875rem); a { - color: var(--#{$prefix}tertiary-color); + color: #768192; text-decoration: none; &:hover, diff --git a/packages/docs/src/styles/_prism.scss b/packages/docs/src/styles/_prism.scss index 6145e4b6..21bfa2c9 100644 --- a/packages/docs/src/styles/_prism.scss +++ b/packages/docs/src/styles/_prism.scss @@ -6,8 +6,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli * @author Rose Pritchard */ -:root, -[data-coreui-theme="light"] { +:root { // --base00: #fff; // --base01: #f5f5f5; --base02: #c8c8fa; @@ -24,32 +23,6 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli --base0D: #{$purple-500}; // #795da3 --base0E: #{$pink-600}; // #a71d5d --base0F: #333; - } - -@include color-mode(dark, true) { - // --base00: #282c34; - // --base01: #353b45; - --base02: #3e4451; - --base03: #868e96; - --base04: #868e96; - --base05: #abb2bf; - --base06: #b6bdca; - --base07: #{$orange-300}; // #d19a66 - --base08: #{$cyan-300}; - --base09: #{$orange-300}; // #d19a66 - --base0A: #{$yellow-200}; // #e5c07b - --base0B: #{$teal-300}; // #98c379 - --base0C: #{$teal-300}; // #56b6c2 - --base0D: #{$blue-300}; // #61afef - --base0E: #{$indigo-200}; // #c678dd - --base0F: #{$red-300}; // #be5046 - - .language-diff .gd { - color: $red-400; - } - .language-diff .gi { - color: $green-400; - } } code[class*='language-'], diff --git a/packages/docs/src/styles/_search.scss b/packages/docs/src/styles/_search.scss index c487e640..8b19708c 100644 --- a/packages/docs/src/styles/_search.scss +++ b/packages/docs/src/styles/_search.scss @@ -5,26 +5,6 @@ --docsearch-logo-color: var(--cui-primary); } -@include color-mode(dark, true) { - // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3 - // in html[data-theme="dark"] selector - // and are slightly modified for formatting purpose - --docsearch-text-color: #f5f6f7; - --docsearch-container-background: rgba(9, 10, 17, .8); - --docsearch-modal-background: #15172a; - --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; - --docsearch-searchbox-background: #090a11; - --docsearch-searchbox-focus-background: #000; - --docsearch-hit-color: #bec3c9; - --docsearch-hit-shadow: none; - --docsearch-hit-background: #090a11; - --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); - --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3); - --docsearch-footer-background: #1e2136; - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2); - --docsearch-muted-color: #7f8497; -} - .DocSearch-Container { --docsearch-muted-color: var(--cui-secondary-color); --docsearch-hit-shadow: none; diff --git a/packages/docs/src/styles/_syntax.scss b/packages/docs/src/styles/_syntax.scss deleted file mode 100644 index ac38381a..00000000 --- a/packages/docs/src/styles/_syntax.scss +++ /dev/null @@ -1,142 +0,0 @@ -:root, -[data-coreui-theme="light"] { - // --base00: #fff; - // --base01: #f5f5f5; - --base02: #c8c8fa; - --base03: #565c64; - --base04: #666; - --base05: #333; - --base06: #fff; - --base07: #{$teal-700}; // #9a6700 - --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 - --base09: #{$cyan-700}; // #087990 - --base0A: #{$purple-500}; // #795da3 - --base0B: #{$blue-700}; // #183691 - --base0C: #{$blue-700}; // #183691 - --base0D: #{$purple-500}; // #795da3 - --base0E: #{$pink-600}; // #a71d5d - --base0F: #333; -} - -@include color-mode(dark, true) { - // --base00: #282c34; - // --base01: #353b45; - --base02: #3e4451; - --base03: #868e96; - --base04: #868e96; - --base05: #abb2bf; - --base06: #b6bdca; - --base07: #{$orange-300}; // #d19a66 - --base08: #{$cyan-300}; - --base09: #{$orange-300}; // #d19a66 - --base0A: #{$yellow-200}; // #e5c07b - --base0B: #{$teal-300}; // #98c379 - --base0C: #{$teal-300}; // #56b6c2 - --base0D: #{$blue-300}; // #61afef - --base0E: #{$indigo-200}; // #c678dd - --base0F: #{$red-300}; // #be5046 - - .language-diff .gd { - color: $red-400; - } - .language-diff .gi { - color: $green-400; - } -} - -.hl { background-color: var(--base02); } -.c { color: var(--base03); } -.err { color: var(--base08); } -.k { color: var(--base0E); } -.l { color: var(----base09); } -.n { color: var(--base08); } -.o { color: var(--base05); } -.p { color: var(--base05); } -.cm { color: var(--base04); } -.cp { color: var(--base08); } -.c1 { color: var(--base03); } -.cs { color: var(--base04); } -.gd { color: var(--base08); } -.ge { font-style: italic; } -.gh { - font-weight: 600; - color: var(--base0A); -} -.gi { color: var(--cui-success); } -.gp { - font-weight: 600; - color: var(--base04); -} -.gs { font-weight: 600; } -.gu { - font-weight: 600; - color: var(--base0C); -} -.kc { color: var(--base0E); } -.kd { color: var(--base0E); } -.kn { color: var(--base0C); } -.kp { color: var(--base0E); } -.kr { color: var(--base0E); } -.kt { color: var(--base0A); } -.ld { color: var(--base0C); } -.m { color: var(--base09); } -.s { color: var(--base0C); } -.na { color: var(--base0A); } -.nb { color: var(--base05); } -.nc { color: var(--base07); } -.no { color: var(--base08); } -.nd { color: var(--base07); } -.ni { color: var(--base08); } -.ne { color: var(--base08); } -.nf { color: var(--base0B); } -.nl { color: var(--base05); } -.nn { color: var(--base0A); } -.nx { color: var(--base0A); } -.py { color: var(--base08); } -.nt { color: var(--base08); } -.nv { color: var(--base08); } -.ow { color: var(--base0C); } -.w { color: #fff; } -.mf { color: var(--base09); } -.mh { color: var(--base09); } -.mi { color: var(--base09); } -.mo { color: var(--base09); } -.sb { color: var(--base0C); } -.sc { color: #fff; } -.sd { color: var(--base04); } -.s2 { color: var(--base0C); } -.se { color: var(--base09); } -.sh { color: var(--base0C); } -.si { color: var(--base09); } -.sx { color: var(--base0C); } -.sr { color: var(--base0C); } -.s1 { color: var(--base0C); } -.ss { color: var(--base0C); } -.bp { color: var(--base05); } -.vc { color: var(--base08); } -.vg { color: var(--base08); } -.vi { color: var(--base08); } -.il { color: var(--base09); } - -// Color commas in rgba() values -.m + .o { color: var(--base03); } - -// Fix bash -.language-sh .c { color: var(--base03); } - -.chroma { - .language-bash, - .language-sh { - .line::before { - color: var(--base03); - content: "$ "; - user-select: none; - } - } - - .language-powershell::before { - color: var(--base0C); - content: "PM> "; - user-select: none; - } -} diff --git a/packages/docs/src/styles/_variables.scss b/packages/docs/src/styles/_variables.scss index b53b7754..f60159f9 100644 --- a/packages/docs/src/styles/_variables.scss +++ b/packages/docs/src/styles/_variables.scss @@ -9,6 +9,7 @@ $cd-gutter-x: 3rem; $cd-callout-variants: info, warning, danger !default; :root { + --cui-tertiary-bg: #f0f4f7; --cd-purple: #{$cd-purple}; --cd-violet: #{$cd-violet}; --cd-accent: #{$cd-accent};