Merge pull request #1552 from fabiofranzini/react-tailwindcss
This commit is contained in:
Hugo Bernier
GitHub
commit
8d039e70df
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.11.0",
|
||||
"libraryName": "react-tailwindcss",
|
||||
"libraryId": "62daa1f6-c9b4-4664-b101-37ccbddb47da",
|
||||
"environment": "spo",
|
||||
"packageManager": "npm",
|
||||
"isCreatingSolution": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
- TailWind CSS
|
||||
platforms:
|
||||
- React
|
||||
createdDate: 10/17/2020 12:00:00 AM
|
||||
---
|
||||
|
||||
# react-tailwindcss
|
||||
|
||||
## Summary
|
||||
|
||||
This project shows how to integrate [Tailwind CSS](https://tailwindcss.com/) framework into a SPFx React project by:
|
||||
- Create a custom Tailwind CSS config file
|
||||
- Create a custom Gulp Task to process the Tailwind CSS generated file and optimize it
|
||||
- Using CSS custom properties to manage in Tailwind CSS Classes the Theme Variant into sections
|
||||
- Avoid writing SASS but only use Tailwind CSS classes to style components
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Basic knowledge of [Tailwind CSS](https://tailwindcss.com/)
|
||||
- Basic knowledge of [GulpJs](https://gulpjs.com/)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-tailwindcss | Fabio Franzini, [@franzinifabio](https://twitter.com/franzinifabio)
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|October 17, 2020|Initial release
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Ensure that you are at the solution folder
|
||||
- in the command-line run:
|
||||
- **npm install**
|
||||
- **gulp serve**
|
||||
|
||||
## References
|
||||
|
||||
- [Getting started with Tailwind CSS](https://tailwindcss.com/)
|
||||
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tailwindcss" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"hello-tailwind-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/HelloTailwindCss/HelloTailwindCssWebPart.js",
|
||||
"manifest": "./src/webparts/HelloTailwindCss/HelloTailwindCssWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"HelloTailwindCssWebPartStrings": "lib/webparts/HelloTailwindCss/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-tailwindcss",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-tailwindcss-client-side-solution",
|
||||
"id": "62daa1f6-c9b4-4664-b101-37ccbddb47da",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-tailwindcss.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
// Step 1 + './src/tailwind.css' + './tailwind.config.js'
|
||||
let tailwindBuild = build.subTask('build-tailwind', (gulp, buildOptions, done) => {
|
||||
const postcss = require('gulp-postcss');
|
||||
|
||||
gulp.src(`${buildOptions.srcFolder}/tailwind.css`)
|
||||
.pipe(postcss([
|
||||
require('tailwindcss')('./tailwind.config.js'),
|
||||
require('gulp-autoprefixer')
|
||||
]))
|
||||
.pipe(gulp.dest(buildOptions.libFolder));
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
build.rig.addPostBuildTask(tailwindBuild);
|
||||
// End Step 1
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"name": "react-tailwindcss",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run tailwind:css && gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test",
|
||||
"build:tailwind": "postcss tailwind.source.css -o src/tailwind.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.11.0",
|
||||
"@microsoft/sp-lodash-subset": "1.11.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
|
||||
"@microsoft/sp-property-pane": "1.11.0",
|
||||
"@microsoft/sp-webpart-base": "1.11.0",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.11.0",
|
||||
"@microsoft/sp-module-interfaces": "1.11.0",
|
||||
"@microsoft/sp-tslint-rules": "1.11.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.11.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"tailwindcss": "^1.8.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
:root {
|
||||
--tw-fui-themeDarker: #004578;
|
||||
--tw-fui-themeDark: #005a9e;
|
||||
--tw-fui-themeDarkAlt: #106ebe;
|
||||
--tw-fui-themePrimary: #0078d4;
|
||||
--tw-fui-themeSecondary: #2b88d8;
|
||||
--tw-fui-themeTertiary: #71afe5;
|
||||
--tw-fui-themeLight: #c7e0f4;
|
||||
--tw-fui-themeLighter: #deecf9;
|
||||
--tw-fui-themeLighterAlt: #eff6fc;
|
||||
--tw-fui-black: #000000;
|
||||
--tw-fui-blackTranslucent40: rgba(0, 0, 0, .4);
|
||||
--tw-fui-neutralDark: #212121;
|
||||
--tw-fui-neutralPrimary: #333333;
|
||||
--tw-fui-neutralPrimaryAlt: #3c3c3c;
|
||||
--tw-fui-neutralSecondary: #666666;
|
||||
--tw-fui-neutralSecondaryAlt: #767676;
|
||||
--tw-fui-neutralTertiary: #a6a6a6;
|
||||
--tw-fui-neutralTertiaryAlt: #c8c8c8;
|
||||
--tw-fui-neutralQuaternary: #d0d0d0;
|
||||
--tw-fui-neutralQuaternaryAlt: #dadada;
|
||||
--tw-fui-neutralLight: #eaeaea;
|
||||
--tw-fui-neutralLighter: #f4f4f4;
|
||||
--tw-fui-neutralLighterAlt: #f8f8f8;
|
||||
--tw-fui-accent: #0078d4;
|
||||
--tw-fui-white: #ffffff;
|
||||
--tw-fui-whiteTranslucent40: rgba(255, 255, 255, .4);
|
||||
--tw-fui-yellow: #ffb900;
|
||||
--tw-fui-yellowLight: #fff100;
|
||||
--tw-fui-orange: #d83b01;
|
||||
--tw-fui-orangeLight: #ea4300;
|
||||
--tw-fui-orangeLighter: #ff8c00;
|
||||
--tw-fui-redDark: #a80000;
|
||||
--tw-fui-red: #e81123;
|
||||
--tw-fui-magentaDark: #5c005c;
|
||||
--tw-fui-magenta: #b4009e;
|
||||
--tw-fui-magentaLight: #e3008c;
|
||||
--tw-fui-purpleDark: #32145a;
|
||||
--tw-fui-purple: #5c2d91;
|
||||
--tw-fui-purpleLight: #b4a0ff;
|
||||
--tw-fui-blueDark: #002050;
|
||||
--tw-fui-blueMid: #00188f;
|
||||
--tw-fui-blue: #0078d4;
|
||||
--tw-fui-blueLight: #00bcf2;
|
||||
--tw-fui-tealDark: #004b50;
|
||||
--tw-fui-teal: #008272;
|
||||
--tw-fui-tealLight: #00b294;
|
||||
--tw-fui-greenDark: #004b1c;
|
||||
--tw-fui-green: #107c10;
|
||||
--tw-fui-greenLight: #bad80a;
|
||||
/* ***** */
|
||||
--tw-fui-bodyBackground: #ffffff;
|
||||
--tw-fui-bodyStandoutBackground: #f8f8f8;
|
||||
--tw-fui-bodyFrameBackground: #ffffff;
|
||||
--tw-fui-bodyFrameDivider: #eaeaea;
|
||||
--tw-fui-bodyText: #333333;
|
||||
--tw-fui-bodyTextChecked: #000000;
|
||||
--tw-fui-bodySubtext: #666666;
|
||||
--tw-fui-bodyDivider: #eaeaea;
|
||||
--tw-fui-disabledBackground: #f4f4f4;
|
||||
--tw-fui-disabledText: #a6a6a6;
|
||||
--tw-fui-disabledSubtext: #d0d0d0;
|
||||
--tw-fui-disabledBodyText: #a6a6a6;
|
||||
--tw-fui-disabledBodySubtext: #c8c8c8;
|
||||
--tw-fui-focusBorder: #666666;
|
||||
--tw-fui-variantBorder: #eaeaea;
|
||||
--tw-fui-variantBorderHovered: #a6a6a6;
|
||||
--tw-fui-defaultStateBackground: #f8f8f8;
|
||||
--tw-fui-errorText: #a80000;
|
||||
--tw-fui-warningText: #333333;
|
||||
--tw-fui-errorBackground: rgba(232, 17, 35, .2);
|
||||
--tw-fui-blockingBackground: rgba(234, 67, 0, .2);
|
||||
--tw-fui-warningBackground: rgba(255, 185, 0, .2);
|
||||
--tw-fui-warningHighlight: #ffb900;
|
||||
--tw-fui-successBackground: rgba(186, 216, 10, .2);
|
||||
--tw-fui-inputBorder: #a6a6a6;
|
||||
--tw-fui-inputBorderHovered: #333333;
|
||||
--tw-fui-inputBackground: #ffffff;
|
||||
--tw-fui-inputBackgroundChecked: #0078d4;
|
||||
--tw-fui-inputBackgroundCheckedHovered: #106ebe;
|
||||
--tw-fui-inputForegroundChecked: #ffffff;
|
||||
--tw-fui-inputFocusBorderAlt: #0078d4;
|
||||
--tw-fui-smallInputBorder: #666666;
|
||||
--tw-fui-inputText: #333333;
|
||||
--tw-fui-inputTextHovered: #212121;
|
||||
--tw-fui-inputPlaceholderText: #666666;
|
||||
--tw-fui-buttonBackground: #f4f4f4;
|
||||
--tw-fui-buttonBackgroundChecked: #c8c8c8;
|
||||
--tw-fui-buttonBackgroundHovered: #eaeaea;
|
||||
--tw-fui-buttonBackgroundCheckedHovered: #eaeaea;
|
||||
--tw-fui-buttonBackgroundPressed: #eaeaea;
|
||||
--tw-fui-buttonBackgroundDisabled: #f4f4f4;
|
||||
--tw-fui-buttonBorder: transparent;
|
||||
--tw-fui-buttonText: #333333;
|
||||
--tw-fui-buttonTextHovered: #212121;
|
||||
--tw-fui-buttonTextChecked: #212121;
|
||||
--tw-fui-buttonTextCheckedHovered: #000000;
|
||||
--tw-fui-buttonTextPressed: #212121;
|
||||
--tw-fui-buttonTextDisabled: #a6a6a6;
|
||||
--tw-fui-buttonBorderDisabled: transparent;
|
||||
--tw-fui-primaryButtonBackground: #0078d4;
|
||||
--tw-fui-primaryButtonBackgroundHovered: #106ebe;
|
||||
--tw-fui-primaryButtonBackgroundPressed: #005a9e;
|
||||
--tw-fui-primaryButtonBackgroundDisabled: #f4f4f4;
|
||||
--tw-fui-primaryButtonBorder: transparent;
|
||||
--tw-fui-primaryButtonText: #ffffff;
|
||||
--tw-fui-primaryButtonTextHovered: #ffffff;
|
||||
--tw-fui-primaryButtonTextPressed: #ffffff;
|
||||
--tw-fui-primaryButtonTextDisabled: #d0d0d0;
|
||||
--tw-fui-accentButtonBackground: #0078d4;
|
||||
--tw-fui-accentButtonText: #ffffff;
|
||||
--tw-fui-menuBackground: #ffffff;
|
||||
--tw-fui-menuDivider: #c8c8c8;
|
||||
--tw-fui-menuIcon: #0078d4;
|
||||
--tw-fui-menuHeader: #0078d4;
|
||||
--tw-fui-menuItemBackgroundHovered: #f4f4f4;
|
||||
--tw-fui-menuItemBackgroundPressed: #eaeaea;
|
||||
--tw-fui-menuItemText: #333333;
|
||||
--tw-fui-menuItemTextHovered: #212121;
|
||||
--tw-fui-listBackground: #ffffff;
|
||||
--tw-fui-listText: #333333;
|
||||
--tw-fui-listItemBackgroundHovered: #f4f4f4;
|
||||
--tw-fui-listItemBackgroundChecked: #eaeaea;
|
||||
--tw-fui-listItemBackgroundCheckedHovered: #dadada;
|
||||
--tw-fui-listHeaderBackgroundHovered: #f4f4f4;
|
||||
--tw-fui-listHeaderBackgroundPressed: #eaeaea;
|
||||
--tw-fui-actionLink: #333333;
|
||||
--tw-fui-actionLinkHovered: #212121;
|
||||
--tw-fui-link: #0078d4;
|
||||
--tw-fui-linkHovered: #004578;
|
||||
--tw-fui-listTextColor: #333333;
|
||||
--tw-fui-menuItemBackgroundChecked: #eaeaea;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "acebbfec-5fc8-42b0-94e5-cfbc43222cae",
|
||||
"alias": "HelloTailwindCssWebPart",
|
||||
"componentType": "WebPart",
|
||||
"supportsThemeVariants": true,
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "Hello TailwindCss" },
|
||||
"description": { "default": "Hello TailwindCss description" },
|
||||
"officeFabricIconFontName": "Duststorm",
|
||||
"properties": {
|
||||
"description": "Hello TailwindCss"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import * as strings from 'HelloTailwindCssWebPartStrings';
|
||||
import HelloTailwindCss from './components/HelloTailwindCss';
|
||||
import { IHelloTailwindCssProps } from './components/IHelloTailwindCssProps';
|
||||
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
|
||||
|
||||
export interface IHelloTailwindCssWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class HelloTailwindCssWebPart extends BaseClientSideWebPart<IHelloTailwindCssWebPartProps> {
|
||||
|
||||
private _themeProvider: ThemeProvider;
|
||||
private _themeVariant: IReadonlyTheme | undefined;
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
// Consume the new ThemeProvider service
|
||||
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
|
||||
|
||||
// If it exists, get the theme variant
|
||||
this._themeVariant = this._themeProvider.tryGetTheme();
|
||||
|
||||
// Register a handler to be notified if the theme variant changes
|
||||
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
|
||||
|
||||
// Apply theme variant as CSS Variables at current DOM node
|
||||
this._applyThemeVariant();
|
||||
|
||||
return super.onInit();
|
||||
}
|
||||
|
||||
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
|
||||
this._themeVariant = args.theme;
|
||||
this._applyThemeVariant();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private _applyThemeVariant() {
|
||||
let style = this.domElement.style;
|
||||
|
||||
style.setProperty('--tw-fui-themeDarker', this._themeVariant.palette.themeDarker);
|
||||
style.setProperty('--tw-fui-themeDark', this._themeVariant.palette.themeDark);
|
||||
style.setProperty('--tw-fui-themeDarkAlt', this._themeVariant.palette.themeDarkAlt);
|
||||
style.setProperty('--tw-fui-themePrimary', this._themeVariant.palette.themePrimary);
|
||||
style.setProperty('--tw-fui-themeSecondary', this._themeVariant.palette.themeSecondary);
|
||||
style.setProperty('--tw-fui-themeTertiary', this._themeVariant.palette.themeTertiary);
|
||||
style.setProperty('--tw-fui-themeLight', this._themeVariant.palette.themeLight);
|
||||
style.setProperty('--tw-fui-themeLighter', this._themeVariant.palette.themeLighter);
|
||||
style.setProperty('--tw-fui-themeLighterAlt', this._themeVariant.palette.themeLighterAlt);
|
||||
style.setProperty('--tw-fui-black', this._themeVariant.palette.black);
|
||||
style.setProperty('--tw-fui-blackTranslucent40', this._themeVariant.palette.blackTranslucent40);
|
||||
style.setProperty('--tw-fui-neutralDark', this._themeVariant.palette.neutralDark);
|
||||
style.setProperty('--tw-fui-neutralPrimary', this._themeVariant.palette.neutralPrimary);
|
||||
style.setProperty('--tw-fui-neutralPrimaryAlt', this._themeVariant.palette.neutralPrimaryAlt);
|
||||
style.setProperty('--tw-fui-neutralSecondary', this._themeVariant.palette.neutralSecondary);
|
||||
style.setProperty('--tw-fui-neutralSecondaryAlt', this._themeVariant.palette.neutralSecondaryAlt);
|
||||
style.setProperty('--tw-fui-neutralTertiary', this._themeVariant.palette.neutralTertiary);
|
||||
style.setProperty('--tw-fui-neutralTertiaryAlt', this._themeVariant.palette.neutralTertiaryAlt);
|
||||
style.setProperty('--tw-fui-neutralQuaternary', this._themeVariant.palette.neutralQuaternary);
|
||||
style.setProperty('--tw-fui-neutralQuaternaryAlt', this._themeVariant.palette.neutralQuaternaryAlt);
|
||||
style.setProperty('--tw-fui-neutralLight', this._themeVariant.palette.neutralLight);
|
||||
style.setProperty('--tw-fui-neutralLighter', this._themeVariant.palette.neutralLighter);
|
||||
style.setProperty('--tw-fui-neutralLighterAlt', this._themeVariant.palette.neutralLighterAlt);
|
||||
style.setProperty('--tw-fui-accent', this._themeVariant.palette.accent);
|
||||
style.setProperty('--tw-fui-white', this._themeVariant.palette.white);
|
||||
style.setProperty('--tw-fui-whiteTranslucent40', this._themeVariant.palette.whiteTranslucent40);
|
||||
style.setProperty('--tw-fui-yellow', this._themeVariant.palette.yellow);
|
||||
style.setProperty('--tw-fui-yellowLight', this._themeVariant.palette.yellowLight);
|
||||
style.setProperty('--tw-fui-orange', this._themeVariant.palette.orange);
|
||||
style.setProperty('--tw-fui-orangeLight', this._themeVariant.palette.orangeLight);
|
||||
style.setProperty('--tw-fui-orangeLighter', this._themeVariant.palette.orangeLighter);
|
||||
style.setProperty('--tw-fui-redDark', this._themeVariant.palette.redDark);
|
||||
style.setProperty('--tw-fui-red', this._themeVariant.palette.red);
|
||||
style.setProperty('--tw-fui-magentaDark', this._themeVariant.palette.magentaDark);
|
||||
style.setProperty('--tw-fui-magenta', this._themeVariant.palette.magenta);
|
||||
style.setProperty('--tw-fui-magentaLight', this._themeVariant.palette.magentaLight);
|
||||
style.setProperty('--tw-fui-purpleDark', this._themeVariant.palette.purpleDark);
|
||||
style.setProperty('--tw-fui-purple', this._themeVariant.palette.purple);
|
||||
style.setProperty('--tw-fui-purpleLight', this._themeVariant.palette.purpleLight);
|
||||
style.setProperty('--tw-fui-blueDark', this._themeVariant.palette.blueDark);
|
||||
style.setProperty('--tw-fui-blueMid', this._themeVariant.palette.blueMid);
|
||||
style.setProperty('--tw-fui-blue', this._themeVariant.palette.blue);
|
||||
style.setProperty('--tw-fui-blueLight', this._themeVariant.palette.blueLight);
|
||||
style.setProperty('--tw-fui-tealDark', this._themeVariant.palette.tealDark);
|
||||
style.setProperty('--tw-fui-teal', this._themeVariant.palette.teal);
|
||||
style.setProperty('--tw-fui-tealLight', this._themeVariant.palette.tealLight);
|
||||
style.setProperty('--tw-fui-greenDark', this._themeVariant.palette.greenDark);
|
||||
style.setProperty('--tw-fui-green', this._themeVariant.palette.green);
|
||||
style.setProperty('--tw-fui-greenLight', this._themeVariant.palette.greenLight);
|
||||
|
||||
style.setProperty('--tw-fui-bodyBackground', this._themeVariant.semanticColors.bodyBackground);
|
||||
style.setProperty('--tw-fui-bodyStandoutBackground', this._themeVariant.semanticColors.bodyStandoutBackground);
|
||||
style.setProperty('--tw-fui-bodyFrameBackground', this._themeVariant.semanticColors.bodyFrameBackground);
|
||||
style.setProperty('--tw-fui-bodyFrameDivider', this._themeVariant.semanticColors.bodyFrameDivider);
|
||||
style.setProperty('--tw-fui-bodyText', this._themeVariant.semanticColors.bodyText);
|
||||
style.setProperty('--tw-fui-bodyTextChecked', this._themeVariant.semanticColors.bodyTextChecked);
|
||||
style.setProperty('--tw-fui-bodySubtext', this._themeVariant.semanticColors.bodySubtext);
|
||||
style.setProperty('--tw-fui-bodyDivider', this._themeVariant.semanticColors.bodyDivider);
|
||||
style.setProperty('--tw-fui-disabledBackground', this._themeVariant.semanticColors.disabledBackground);
|
||||
style.setProperty('--tw-fui-disabledText', this._themeVariant.semanticColors.disabledText);
|
||||
style.setProperty('--tw-fui-disabledSubtext', this._themeVariant.semanticColors.disabledSubtext);
|
||||
style.setProperty('--tw-fui-disabledBodyText', this._themeVariant.semanticColors.disabledBodyText);
|
||||
style.setProperty('--tw-fui-disabledBodySubtext', this._themeVariant.semanticColors.disabledBodySubtext);
|
||||
style.setProperty('--tw-fui-focusBorder', this._themeVariant.semanticColors.focusBorder);
|
||||
style.setProperty('--tw-fui-variantBorder', this._themeVariant.semanticColors.variantBorder);
|
||||
style.setProperty('--tw-fui-variantBorderHovered', this._themeVariant.semanticColors.variantBorderHovered);
|
||||
style.setProperty('--tw-fui-defaultStateBackground', this._themeVariant.semanticColors.defaultStateBackground);
|
||||
style.setProperty('--tw-fui-errorText', this._themeVariant.semanticColors.errorText);
|
||||
style.setProperty('--tw-fui-warningText', this._themeVariant.semanticColors.warningText);
|
||||
style.setProperty('--tw-fui-errorBackground', this._themeVariant.semanticColors.errorBackground);
|
||||
style.setProperty('--tw-fui-blockingBackground', this._themeVariant.semanticColors.blockingBackground);
|
||||
style.setProperty('--tw-fui-warningBackground', this._themeVariant.semanticColors.warningBackground);
|
||||
style.setProperty('--tw-fui-warningHighlight', this._themeVariant.semanticColors.warningHighlight);
|
||||
style.setProperty('--tw-fui-successBackground', this._themeVariant.semanticColors.successBackground);
|
||||
style.setProperty('--tw-fui-inputBorder', this._themeVariant.semanticColors.inputBorder);
|
||||
style.setProperty('--tw-fui-inputBorderHovered', this._themeVariant.semanticColors.inputBorderHovered);
|
||||
style.setProperty('--tw-fui-inputBackground', this._themeVariant.semanticColors.inputBackground);
|
||||
style.setProperty('--tw-fui-inputBackgroundChecked', this._themeVariant.semanticColors.inputBackgroundChecked);
|
||||
style.setProperty('--tw-fui-inputBackgroundCheckedHovered', this._themeVariant.semanticColors.inputBackgroundCheckedHovered);
|
||||
style.setProperty('--tw-fui-inputForegroundChecked', this._themeVariant.semanticColors.inputForegroundChecked);
|
||||
style.setProperty('--tw-fui-inputFocusBorderAlt', this._themeVariant.semanticColors.inputFocusBorderAlt);
|
||||
style.setProperty('--tw-fui-smallInputBorder', this._themeVariant.semanticColors.smallInputBorder);
|
||||
style.setProperty('--tw-fui-inputText', this._themeVariant.semanticColors.inputText);
|
||||
style.setProperty('--tw-fui-inputTextHovered', this._themeVariant.semanticColors.inputTextHovered);
|
||||
style.setProperty('--tw-fui-inputPlaceholderText', this._themeVariant.semanticColors.inputPlaceholderText);
|
||||
style.setProperty('--tw-fui-buttonBackground', this._themeVariant.semanticColors.buttonBackground);
|
||||
style.setProperty('--tw-fui-buttonBackgroundChecked', this._themeVariant.semanticColors.buttonBackgroundChecked);
|
||||
style.setProperty('--tw-fui-buttonBackgroundHovered', this._themeVariant.semanticColors.buttonBackgroundHovered);
|
||||
style.setProperty('--tw-fui-buttonBackgroundCheckedHovered', this._themeVariant.semanticColors.buttonBackgroundCheckedHovered);
|
||||
style.setProperty('--tw-fui-buttonBackgroundPressed', this._themeVariant.semanticColors.buttonBackgroundPressed);
|
||||
style.setProperty('--tw-fui-buttonBackgroundDisabled', this._themeVariant.semanticColors.buttonBackgroundDisabled);
|
||||
style.setProperty('--tw-fui-buttonBorder', this._themeVariant.semanticColors.buttonBorder);
|
||||
style.setProperty('--tw-fui-buttonText', this._themeVariant.semanticColors.buttonText);
|
||||
style.setProperty('--tw-fui-buttonTextHovered', this._themeVariant.semanticColors.buttonTextHovered);
|
||||
style.setProperty('--tw-fui-buttonTextChecked', this._themeVariant.semanticColors.buttonTextChecked);
|
||||
style.setProperty('--tw-fui-buttonTextCheckedHovered', this._themeVariant.semanticColors.buttonTextCheckedHovered);
|
||||
style.setProperty('--tw-fui-buttonTextPressed', this._themeVariant.semanticColors.buttonTextPressed);
|
||||
style.setProperty('--tw-fui-buttonTextDisabled', this._themeVariant.semanticColors.buttonTextDisabled);
|
||||
style.setProperty('--tw-fui-buttonBorderDisabled', this._themeVariant.semanticColors.buttonBorderDisabled);
|
||||
style.setProperty('--tw-fui-primaryButtonBackground', this._themeVariant.semanticColors.primaryButtonBackground);
|
||||
style.setProperty('--tw-fui-primaryButtonBackgroundHovered', this._themeVariant.semanticColors.primaryButtonBackgroundHovered);
|
||||
style.setProperty('--tw-fui-primaryButtonBackgroundPressed', this._themeVariant.semanticColors.primaryButtonBackgroundPressed);
|
||||
style.setProperty('--tw-fui-primaryButtonBackgroundDisabled', this._themeVariant.semanticColors.primaryButtonBackgroundDisabled);
|
||||
style.setProperty('--tw-fui-primaryButtonBorder', this._themeVariant.semanticColors.primaryButtonBorder);
|
||||
style.setProperty('--tw-fui-primaryButtonText', this._themeVariant.semanticColors.primaryButtonText);
|
||||
style.setProperty('--tw-fui-primaryButtonTextHovered', this._themeVariant.semanticColors.primaryButtonTextHovered);
|
||||
style.setProperty('--tw-fui-primaryButtonTextPressed', this._themeVariant.semanticColors.primaryButtonTextPressed);
|
||||
style.setProperty('--tw-fui-primaryButtonTextDisabled', this._themeVariant.semanticColors.primaryButtonTextDisabled);
|
||||
style.setProperty('--tw-fui-accentButtonBackground', this._themeVariant.semanticColors.accentButtonBackground);
|
||||
style.setProperty('--tw-fui-accentButtonText', this._themeVariant.semanticColors.accentButtonText);
|
||||
style.setProperty('--tw-fui-menuBackground', this._themeVariant.semanticColors.menuBackground);
|
||||
style.setProperty('--tw-fui-menuDivider', this._themeVariant.semanticColors.menuDivider);
|
||||
style.setProperty('--tw-fui-menuIcon', this._themeVariant.semanticColors.menuIcon);
|
||||
style.setProperty('--tw-fui-menuHeader', this._themeVariant.semanticColors.menuHeader);
|
||||
style.setProperty('--tw-fui-menuItemBackgroundHovered', this._themeVariant.semanticColors.menuItemBackgroundHovered);
|
||||
style.setProperty('--tw-fui-menuItemBackgroundPressed', this._themeVariant.semanticColors.menuItemBackgroundPressed);
|
||||
style.setProperty('--tw-fui-menuItemText', this._themeVariant.semanticColors.menuItemText);
|
||||
style.setProperty('--tw-fui-menuItemTextHovered', this._themeVariant.semanticColors.menuItemTextHovered);
|
||||
style.setProperty('--tw-fui-listBackground', this._themeVariant.semanticColors.listBackground);
|
||||
style.setProperty('--tw-fui-listText', this._themeVariant.semanticColors.listText);
|
||||
style.setProperty('--tw-fui-listItemBackgroundHovered', this._themeVariant.semanticColors.listItemBackgroundHovered);
|
||||
style.setProperty('--tw-fui-listItemBackgroundChecked', this._themeVariant.semanticColors.listItemBackgroundChecked);
|
||||
style.setProperty('--tw-fui-listItemBackgroundCheckedHovered', this._themeVariant.semanticColors.listItemBackgroundCheckedHovered);
|
||||
style.setProperty('--tw-fui-listHeaderBackgroundHovered', this._themeVariant.semanticColors.listHeaderBackgroundHovered);
|
||||
style.setProperty('--tw-fui-listHeaderBackgroundPressed', this._themeVariant.semanticColors.listHeaderBackgroundPressed);
|
||||
style.setProperty('--tw-fui-actionLink', this._themeVariant.semanticColors.actionLink);
|
||||
style.setProperty('--tw-fui-actionLinkHovered', this._themeVariant.semanticColors.actionLinkHovered);
|
||||
style.setProperty('--tw-fui-link', this._themeVariant.semanticColors.link);
|
||||
style.setProperty('--tw-fui-linkHovered', this._themeVariant.semanticColors.linkHovered);
|
||||
style.setProperty('--tw-fui-listTextColor', this._themeVariant.semanticColors.listTextColor);
|
||||
style.setProperty('--tw-fui-menuItemBackgroundChecked', this._themeVariant.semanticColors.menuItemBackgroundChecked);
|
||||
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IHelloTailwindCssProps> = React.createElement(
|
||||
HelloTailwindCss,
|
||||
{
|
||||
description: this.properties.description
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from 'react';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import './../../../tailwind.css';
|
||||
import User, { IUserProps } from './User';
|
||||
|
||||
export interface IDocumentCardProps {
|
||||
title: string;
|
||||
documentImageUrl: string;
|
||||
lastEditUserInfo: IUserProps;
|
||||
}
|
||||
|
||||
export default class DocumentCard extends React.Component<IDocumentCardProps, {}> {
|
||||
public render(): React.ReactElement<IDocumentCardProps> {
|
||||
return (
|
||||
<div className="max-w-sm overflow-hidden bg-white text-black border border-solid border-gray-400 hover:outline-none hover:shadow-lg hover:cursor-pointer">
|
||||
<img className="w-full border-0 border-solid border-b border-gray-400" src={this.props.documentImageUrl} alt="Document Preview" />
|
||||
<div className="px-4 py-3 pt-1">
|
||||
<div className="text-lg mb-2">{this.props.title}</div>
|
||||
<User profileImageUrl={this.props.lastEditUserInfo.profileImageUrl}
|
||||
line1={this.props.lastEditUserInfo.line1}
|
||||
line2={this.props.lastEditUserInfo.line1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import * as React from 'react';
|
||||
import { IHelloTailwindCssProps } from './IHelloTailwindCssProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import './../../../tailwind.css';
|
||||
import DocumentCard from './DocumentCard';
|
||||
import HorizontalCard from './HorizontalCard';
|
||||
import { Stack } from 'office-ui-fabric-react';
|
||||
|
||||
export default class HelloTailwindCss extends React.Component<IHelloTailwindCssProps, {}> {
|
||||
public render(): React.ReactElement<IHelloTailwindCssProps> {
|
||||
return (
|
||||
<Stack gap="20">
|
||||
<DocumentCard title="Revenue stream proposal fiscal year 2016 version02.pptx"
|
||||
documentImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/document-preview.png"
|
||||
lastEditUserInfo={{
|
||||
profileImageUrl: "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",
|
||||
line1: "Annie Lindqvist",
|
||||
line2: "Created a few minutes ago"
|
||||
}}
|
||||
/>
|
||||
<HorizontalCard title="Can coffee make you a better developer?"
|
||||
description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
|
||||
documentImageUrl="//tailwindcss.com/img/card-left.jpg"
|
||||
lastEditUserInfo={{
|
||||
profileImageUrl: "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",
|
||||
line1: "Annie Lindqvist",
|
||||
line2: "Aug 18"
|
||||
}}
|
||||
/></Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import * as React from 'react';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import './../../../tailwind.css';
|
||||
import User, { IUserProps } from './User';
|
||||
|
||||
export interface IHorizontalCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
documentImageUrl: string;
|
||||
lastEditUserInfo: IUserProps;
|
||||
}
|
||||
|
||||
const rootClassName = "sp-col-1/3:max-w-sm sp-col-1:max-w-full sp-col-1:flex overflow-hidden shadow hover:outline-none hover:shadow-lg hover:cursor-pointer";
|
||||
|
||||
export default class HorizontalCard extends React.Component<IHorizontalCardProps, {}> {
|
||||
public render(): React.ReactElement<IHorizontalCardProps> {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="h-48 sp-col-1:h-auto sp-col-1:w-48 flex-none bg-cover text-center overflow-hidden" style={{ backgroundImage: "url('//tailwindcss.com/img/card-left.jpg')" }} title="Woman holding a mug">
|
||||
</div>
|
||||
<div className="border-r border-b border-l border-gray-400 sp-col-1:border-l-0 sp-col-1:border-t bg-buttonBackground text-buttonText p-4 flex flex-col justify-between leading-normal">
|
||||
<div className="mb-8">
|
||||
<div className="font-bold text-xl mb-2">{this.props.title}</div>
|
||||
<p className="text-base text-buttonTextDisabled">{this.props.description}</p>
|
||||
</div>
|
||||
<User profileImageUrl={this.props.lastEditUserInfo.profileImageUrl}
|
||||
line1={this.props.lastEditUserInfo.line1}
|
||||
line2={this.props.lastEditUserInfo.line1} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface IHelloTailwindCssProps {
|
||||
description: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import * as React from 'react';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import './../../../tailwind.css';
|
||||
|
||||
export interface IUserProps {
|
||||
profileImageUrl: string;
|
||||
line1: string;
|
||||
line2: string;
|
||||
}
|
||||
|
||||
export default class User extends React.Component<IUserProps, {}> {
|
||||
public render(): React.ReactElement<IUserProps> {
|
||||
return (
|
||||
<div className="flex mt-4">
|
||||
<img className="h-8 w-8 rounded-full mr-2" src={this.props.profileImageUrl} />
|
||||
<div className="text-left">
|
||||
<div className="font-bold text-xs">{this.props.line1}</div>
|
||||
<div className="text-xs text-buttonTextDisabled">{this.props.line2}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IHelloTailwindCssWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'HelloTailwindCssWebPartStrings' {
|
||||
const strings: IHelloTailwindCssWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
const customSpSectionVariant = ['sp-col-1', 'sp-col-1/2', 'sp-col-1/3', 'sp-col-2/3'];
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
enabled: true,
|
||||
content: ['./src/**/*.tsx'],
|
||||
options: {
|
||||
whitelistPatterns: [/^CanvasSection*/]
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
themeDarker: 'var(--tw-fui-themeDarker)',
|
||||
themeDark: 'var(--tw-fui-themeDark)',
|
||||
themeDarkAlt: 'var(--tw-fui-themeDarkAlt)',
|
||||
themePrimary: 'var(--tw-fui-themePrimary)',
|
||||
themeSecondary: 'var(--tw-fui-themeSecondary)',
|
||||
themeTertiary: 'var(--tw-fui-themeTertiary)',
|
||||
themeLight: 'var(--tw-fui-themeLight)',
|
||||
themeLighter: 'var(--tw-fui-themeLighter)',
|
||||
themeLighterAlt: 'var(--tw-fui-themeLighterAlt)',
|
||||
//black: 'var(--tw-fui-black)',
|
||||
blackTranslucent40: 'var(--tw-fui-blackTranslucent40)',
|
||||
neutralDark: 'var(--tw-fui-neutralDark)',
|
||||
neutralPrimary: 'var(--tw-fui-neutralPrimary)',
|
||||
neutralPrimaryAlt: 'var(--tw-fui-neutralPrimaryAlt)',
|
||||
neutralSecondary: 'var(--tw-fui-neutralSecondary)',
|
||||
neutralSecondaryAlt: 'var(--tw-fui-neutralSecondaryAlt)',
|
||||
neutralTertiary: 'var(--tw-fui-neutralTertiary)',
|
||||
neutralTertiaryAlt: 'var(--tw-fui-neutralTertiaryAlt)',
|
||||
neutralQuaternary: 'var(--tw-fui-neutralQuaternary)',
|
||||
neutralQuaternaryAlt: 'var(--tw-fui-neutralQuaternaryAlt)',
|
||||
neutralLight: 'var(--tw-fui-neutralLight)',
|
||||
neutralLighter: 'var(--tw-fui-neutralLighter)',
|
||||
neutralLighterAlt: 'var(--tw-fui-neutralLighterAlt)',
|
||||
accent: 'var(--tw-fui-accent)',
|
||||
//white: 'var(--tw-fui-white)',
|
||||
whiteTranslucent40: 'var(--tw-fui-whiteTranslucent40)',
|
||||
yellow: 'var(--tw-fui-yellow)',
|
||||
yellowLight: 'var(--tw-fui-yellowLight)',
|
||||
orange: 'var(--tw-fui-orange)',
|
||||
orangeLight: 'var(--tw-fui-orangeLight)',
|
||||
orangeLighter: 'var(--tw-fui-orangeLighter)',
|
||||
redDark: 'var(--tw-fui-redDark)',
|
||||
red: 'var(--tw-fui-red)',
|
||||
magentaDark: 'var(--tw-fui-magentaDark)',
|
||||
magenta: 'var(--tw-fui-magenta)',
|
||||
magentaLight: 'var(--tw-fui-magentaLight)',
|
||||
purpleDark: 'var(--tw-fui-purpleDark)',
|
||||
purple: 'var(--tw-fui-purple)',
|
||||
purpleLight: 'var(--tw-fui-purpleLight)',
|
||||
blueDark: 'var(--tw-fui-blueDark)',
|
||||
blueMid: 'var(--tw-fui-blueMid)',
|
||||
blue: 'var(--tw-fui-blue)',
|
||||
blueLight: 'var(--tw-fui-blueLight)',
|
||||
tealDark: 'var(--tw-fui-tealDark)',
|
||||
teal: 'var(--tw-fui-teal)',
|
||||
tealLight: 'var(--tw-fui-tealLight)',
|
||||
greenDark: 'var(--tw-fui-greenDark)',
|
||||
green: 'var(--tw-fui-green)',
|
||||
greenLight: 'var(--tw-fui-greenLight)',
|
||||
/* ***** */
|
||||
bodyBackground: 'var(--tw-fui-bodyBackground)',
|
||||
bodyStandoutBackground: 'var(--tw-fui-bodyStandoutBackground)',
|
||||
bodyFrameBackground: 'var(--tw-fui-bodyFrameBackground)',
|
||||
bodyFrameDivider: 'var(--tw-fui-bodyFrameDivider)',
|
||||
bodyText: 'var(--tw-fui-bodyText)',
|
||||
bodyTextChecked: 'var(--tw-fui-bodyTextChecked)',
|
||||
bodySubtext: 'var(--tw-fui-bodySubtext)',
|
||||
bodyDivider: 'var(--tw-fui-bodyDivider)',
|
||||
disabledBackground: 'var(--tw-fui-disabledBackground)',
|
||||
disabledText: 'var(--tw-fui-disabledText)',
|
||||
disabledSubtext: 'var(--tw-fui-disabledSubtext)',
|
||||
disabledBodyText: 'var(--tw-fui-disabledBodyText)',
|
||||
disabledBodySubtext: 'var(--tw-fui-disabledBodySubtext)',
|
||||
focusBorder: 'var(--tw-fui-focusBorder)',
|
||||
variantBorder: 'var(--tw-fui-variantBorder)',
|
||||
variantBorderHovered: 'var(--tw-fui-variantBorderHovered)',
|
||||
defaultStateBackground: 'var(--tw-fui-defaultStateBackground)',
|
||||
errorText: 'var(--tw-fui-errorText)',
|
||||
warningText: 'var(--tw-fui-warningText)',
|
||||
errorBackground: 'var(--tw-fui-errorBackground)',
|
||||
blockingBackground: 'var(--tw-fui-blockingBackground)',
|
||||
warningBackground: 'var(--tw-fui-warningBackground)',
|
||||
warningHighlight: 'var(--tw-fui-warningHighlight)',
|
||||
successBackground: 'var(--tw-fui-successBackground)',
|
||||
inputBorder: 'var(--tw-fui-inputBorder)',
|
||||
inputBorderHovered: 'var(--tw-fui-inputBorderHovered)',
|
||||
inputBackground: 'var(--tw-fui-inputBackground)',
|
||||
inputBackgroundChecked: 'var(--tw-fui-inputBackgroundChecked)',
|
||||
inputBackgroundCheckedHovered: 'var(--tw-fui-inputBackgroundCheckedHovered)',
|
||||
inputForegroundChecked: 'var(--tw-fui-inputForegroundChecked)',
|
||||
inputFocusBorderAlt: 'var(--tw-fui-inputFocusBorderAlt)',
|
||||
smallInputBorder: 'var(--tw-fui-smallInputBorder)',
|
||||
inputText: 'var(--tw-fui-inputText)',
|
||||
inputTextHovered: 'var(--tw-fui-inputTextHovered)',
|
||||
inputPlaceholderText: 'var(--tw-fui-inputPlaceholderText)',
|
||||
buttonBackground: 'var(--tw-fui-buttonBackground)',
|
||||
buttonBackgroundChecked: 'var(--tw-fui-buttonBackgroundChecked)',
|
||||
buttonBackgroundHovered: 'var(--tw-fui-buttonBackgroundHovered)',
|
||||
buttonBackgroundCheckedHovered: 'var(--tw-fui-buttonBackgroundCheckedHovered)',
|
||||
buttonBackgroundPressed: 'var(--tw-fui-buttonBackgroundPressed)',
|
||||
buttonBackgroundDisabled: 'var(--tw-fui-buttonBackgroundDisabled)',
|
||||
buttonBorder: 'var(--tw-fui-buttonBorder)',
|
||||
buttonText: 'var(--tw-fui-buttonText)',
|
||||
buttonTextHovered: 'var(--tw-fui-buttonTextHovered)',
|
||||
buttonTextChecked: 'var(--tw-fui-buttonTextChecked)',
|
||||
buttonTextCheckedHovered: 'var(--tw-fui-buttonTextCheckedHovered)',
|
||||
buttonTextPressed: 'var(--tw-fui-buttonTextPressed)',
|
||||
buttonTextDisabled: 'var(--tw-fui-buttonTextDisabled)',
|
||||
buttonBorderDisabled: 'var(--tw-fui-buttonBorderDisabled)',
|
||||
primaryButtonBackground: 'var(--tw-fui-primaryButtonBackground)',
|
||||
primaryButtonBackgroundHovered: 'var(--tw-fui-primaryButtonBackgroundHovered)',
|
||||
primaryButtonBackgroundPressed: 'var(--tw-fui-primaryButtonBackgroundPressed)',
|
||||
primaryButtonBackgroundDisabled: 'var(--tw-fui-primaryButtonBackgroundDisabled)',
|
||||
primaryButtonBorder: 'var(--tw-fui-primaryButtonBorder)',
|
||||
primaryButtonText: 'var(--tw-fui-primaryButtonText)',
|
||||
primaryButtonTextHovered: 'var(--tw-fui-primaryButtonTextHovered)',
|
||||
primaryButtonTextPressed: 'var(--tw-fui-primaryButtonTextPressed)',
|
||||
primaryButtonTextDisabled: 'var(--tw-fui-primaryButtonTextDisabled)',
|
||||
accentButtonBackground: 'var(--tw-fui-accentButtonBackground)',
|
||||
accentButtonText: 'var(--tw-fui-accentButtonText)',
|
||||
menuBackground: 'var(--tw-fui-menuBackground)',
|
||||
menuDivider: 'var(--tw-fui-menuDivider)',
|
||||
menuIcon: 'var(--tw-fui-menuIcon)',
|
||||
menuHeader: 'var(--tw-fui-menuHeader)',
|
||||
menuItemBackgroundHovered: 'var(--tw-fui-menuItemBackgroundHovered)',
|
||||
menuItemBackgroundPressed: 'var(--tw-fui-menuItemBackgroundPressed)',
|
||||
menuItemText: 'var(--tw-fui-menuItemText)',
|
||||
menuItemTextHovered: 'var(--tw-fui-menuItemTextHovered)',
|
||||
listBackground: 'var(--tw-fui-listBackground)',
|
||||
listText: 'var(--tw-fui-listText)',
|
||||
listItemBackgroundHovered: 'var(--tw-fui-listItemBackgroundHovered)',
|
||||
listItemBackgroundChecked: 'var(--tw-fui-listItemBackgroundChecked)',
|
||||
listItemBackgroundCheckedHovered: 'var(--tw-fui-listItemBackgroundCheckedHovered)',
|
||||
listHeaderBackgroundHovered: 'var(--tw-fui-listHeaderBackgroundHovered)',
|
||||
listHeaderBackgroundPressed: 'var(--tw-fui-listHeaderBackgroundPressed)',
|
||||
actionLink: 'var(--tw-fui-actionLink)',
|
||||
actionLinkHovered: 'var(--tw-fui-actionLinkHovered)',
|
||||
link: 'var(--tw-fui-link)',
|
||||
linkHovered: 'var(--tw-fui-linkHovered)',
|
||||
listTextColor: 'var(--tw-fui-listTextColor)',
|
||||
menuItemBackgroundChecked: 'var(--tw-fui-menuItemBackgroundChecked)',
|
||||
}
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
accessibility: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
alignContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
alignItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
alignSelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
appearance: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundAttachment: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundClip: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundImage: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gradientColorStops: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundPosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundRepeat: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
backgroundSize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderCollapse: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderRadius: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
borderWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
boxShadow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
boxSizing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
container: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
cursor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
display: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
divideColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
divideOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
divideStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
divideWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fill: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
flex: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
flexDirection: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
flexGrow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
flexShrink: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
flexWrap: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
float: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
clear: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontFamily: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontSize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontSmoothing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontVariantNumeric: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
fontWeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
height: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
inset: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
justifyContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
justifyItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
justifySelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
letterSpacing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
lineHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
listStylePosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
listStyleType: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
margin: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
maxHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
maxWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
minHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
minWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
objectFit: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
objectPosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
opacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
order: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
outline: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
overflow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
overscrollBehavior: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
padding: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
placeContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
placeItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
placeSelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
placeholderColor: customSpSectionVariant.concat(['focus']),
|
||||
placeholderOpacity: customSpSectionVariant.concat(['focus']),
|
||||
pointerEvents: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
position: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
resize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
space: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
stroke: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
strokeWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
tableLayout: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
textAlign: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
textColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
textOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
textDecoration: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
textTransform: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
userSelect: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
verticalAlign: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
visibility: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
whitespace: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
width: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
wordBreak: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
zIndex: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gap: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridAutoFlow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridTemplateColumns: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridColumn: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridColumnStart: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridColumnEnd: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridTemplateRows: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridRow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridRowStart: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
gridRowEnd: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transform: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transformOrigin: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
scale: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
rotate: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
translate: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
skew: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transitionProperty: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transitionTimingFunction: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transitionDuration: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
transitionDelay: customSpSectionVariant.concat(['hover', 'focus']),
|
||||
animation: customSpSectionVariant
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({ addVariant, e }) {
|
||||
addVariant('sp-col-1', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.CanvasSection.CanvasSection-col.CanvasSection-xl12 .${e(`sp-col-1${separator}${className}`)}`
|
||||
})
|
||||
}),
|
||||
addVariant('sp-col-1/2', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.CanvasSection.CanvasSection-col.CanvasSection-xl6 .${e(`sp-col-1/2${separator}${className}`)}`
|
||||
})
|
||||
}),
|
||||
addVariant('sp-col-1/3', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.CanvasSection.CanvasSection-col.CanvasSection-xl4 .${e(`sp-col-1/3${separator}${className}`)}`
|
||||
})
|
||||
}),
|
||||
addVariant('sp-col-2/3', ({ modifySelectors, separator }) => {
|
||||
modifySelectors(({ className }) => {
|
||||
return `.CanvasSection.CanvasSection-col.CanvasSection-xl8 .${e(`sp-col-2/3${separator}${className}`)}`
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true,
|
||||
purgeLayersByDefault: true
|
||||
}
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue