From 183fbb31a5968987ddc30a9a1bb67e56ab266a68 Mon Sep 17 00:00:00 2001 From: Oseer Williams Date: Fri, 2 Aug 2024 15:34:54 -0400 Subject: [PATCH] feat(theme): add teradata theming --- libs/react-components/.storybook/main.ts | 4 +- libs/react-components/.storybook/manager.js | 8 ++++ .../.storybook/public/favicon.ico | Bin 0 -> 15086 bytes libs/react-components/.storybook/teradata.svg | 13 ++++++ libs/react-components/.storybook/theme.css | 25 +++++++++++ libs/react-components/.storybook/theme.js | 41 ++++++++++++++++++ package-lock.json | 16 +++---- package.json | 4 +- 8 files changed, 100 insertions(+), 11 deletions(-) create mode 100644 libs/react-components/.storybook/manager.js create mode 100644 libs/react-components/.storybook/public/favicon.ico create mode 100644 libs/react-components/.storybook/teradata.svg create mode 100644 libs/react-components/.storybook/theme.css create mode 100644 libs/react-components/.storybook/theme.js diff --git a/libs/react-components/.storybook/main.ts b/libs/react-components/.storybook/main.ts index 33579ea..3949e45 100644 --- a/libs/react-components/.storybook/main.ts +++ b/libs/react-components/.storybook/main.ts @@ -1,10 +1,12 @@ import type { StorybookConfig } from '@storybook/react-vite'; -import { resolve } from 'path'; +import { join, resolve } from 'path'; import { terser } from 'rollup-plugin-terser'; const config: StorybookConfig = { stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], + staticDirs: [join(__dirname, './public')], + addons: [ '@storybook/addon-essentials', '@storybook/addon-interactions', diff --git a/libs/react-components/.storybook/manager.js b/libs/react-components/.storybook/manager.js new file mode 100644 index 0000000..4b32ea5 --- /dev/null +++ b/libs/react-components/.storybook/manager.js @@ -0,0 +1,8 @@ +import { addons } from '@storybook/manager-api'; +import '@covalent/tokens/index.css'; +import tdTheme from './theme.js'; +import './theme.css'; + +addons.setConfig({ + theme: tdTheme, +}); \ No newline at end of file diff --git a/libs/react-components/.storybook/public/favicon.ico b/libs/react-components/.storybook/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..1f738e886f7885be8b8fcb6a34e54939c3cb79d4 GIT binary patch literal 15086 zcmdU$Ym64v8OLXLflY48t zd%-qVQUgsBtwAHU5XHn>lw||;(x|j*FA*%eh*UAPET$j|yHEeWnK|#y&d$s`=iT>Z zVUquzdFMRmJpc2Y>vPW8AZQ9&f(tGP6t)K&&JBV&K@haJ$G@ip!ESw4a935(4pebcNp2Jh;Fp)B$5`_gvC8OqxXj^`)Kpn0NM-F;Z;J!Yq06>*$>o!OH+&1g4=-Zk6!Y}7YgKl0!KXSm}>uom~SKV!@N>Z9rB zo~O*FiYskvqS_1K-Q^F@)76*1e2du^e`a>d6<*^{C7+lx-0_8ce2;LfXj>B5G07jB zUi>TBS>vek%mrnj{ec?n?(&86Qel0OuBZNdLdjt$3B3U|B}ZaJI`4q zp5KW2s#{|=Xgw7AFEM{F|FMYwaazBP@E<33hWwt5KQu`;4 z|Mr)M{lLTW1>YDj`yB13vFm?0&W3aP(f2N))Ov{d^wV8t3vV|2e2fckisoF8y_{0@ zEly4jZkhX6ltpozvGgS5UAoLL*+1QT*|asvZB@FdX}c$XD}I4csvXtHA=4Hm@`6+0 z{;eyA`Gbc-8}FSIf0O>vewQ$`RKCZE4)j z?|kj^2OJzLlfAlm3@6*er4rVjuz?R{s!yTEdpzCA0G%=?tGAz zJ0LU2v#kDl%1N)=!^RiFpTj40`(oG@xP1bAZT2kj`R0;#tX$0cTeac}DmW4ZXYzX> z2qqKu20;s9x9$-UqELT^2v-HcF~WsGpkzuI1WKla!(l(aTZ5pNP!>*y-F#OsO^1B0 z=hIDQ8G3s8p24f1@8X>jiQZ<3!QY!m7=j&3KbX?+1U@C7`M{wl z3Ym`IN`LWr<+@n+Ea~1|P5+NKj#SGTGy1^SZ;#6R_kEGfTmLg#^mFMi-f!rWPINO~ z=8kK$DeCoc?Nz&HN59!uWb@BlZ}wT?)bB<0f8mX0*KacW>aA)M)%WGmiSCU;uI;J! zQ?E4p>mH}wtV=qQdvUJ4J72#_xs$rkUD)5r`y(nJ`}gj-=ANo`o77SCj&A0zT$u*z zcXQ}?>38$Dm;Pn3{jrU!`yv|_#G&8Y{@496I_IZd0{TaRj-oiXZpoF&s(;3~zo(2y-MY2QToLHmX$+K|%o#0S!{{x$6uDhMi zbSU|8^S>OIcx=FjWPREv#}Q;X}@8W_8u0poxs*Yzji5lH8g;3Z6P=WRURit*c+$sS6<{v-snIVI?>HO z1=|wsLS>(#3UigMRk%plAiO4EbHF>_h|@01=ttkD32TG{f~&K1NE|ZLk~#2O*eq1! znRghE!Z3bM#3LK#p^*POAOURLiw3O*B_Z^*Il8^DI ze4?GN>rDS4-PhH+j5W#3AB>nENJH9tD`~|6zj5n7Bmd>jZP6O$YipuAyG*35*w5*IMdjZmtd{Lr1Ll++E~Ks0A7!PU zxu<&9pH$znTfuzp>Tg8*VNT}mJbpImm46<>_Cq_C%!u|&IjY#b(tce(i1Q#%@BWj> hqgCm#N9q21M0>#f>e0PgF?F-wD&##b9$C_m_WwOFdaeKf literal 0 HcmV?d00001 diff --git a/libs/react-components/.storybook/teradata.svg b/libs/react-components/.storybook/teradata.svg new file mode 100644 index 0000000..1cb5ada --- /dev/null +++ b/libs/react-components/.storybook/teradata.svg @@ -0,0 +1,13 @@ + + + Teradata logo + + + + + + + + + + \ No newline at end of file diff --git a/libs/react-components/.storybook/theme.css b/libs/react-components/.storybook/theme.css new file mode 100644 index 0000000..b41f2f2 --- /dev/null +++ b/libs/react-components/.storybook/theme.css @@ -0,0 +1,25 @@ +/* Storybook theme overrides */ +.sidebar-header { + max-width: 213px; + } + #root > div > div[role='main'] > div { + box-shadow: none; + } + + #root > div > div[role='main'] > div { + border: 1px solid rgba(0, 0, 0, 0.12); + } + + #storybook-explorer-tree .sidebar-item[data-selected='true'], + #storybook-explorer-tree .sidebar-item[data-selected='true'] svg { + color: var(--cv-light-on-primary); + } + + #storybook-explorer-tree .sidebar-item[data-selected='true'], + #storybook-explorer-tree .sidebar-item[data-selected='true'] svg { + color: var(--cv-light-on-primary); + } + + #storybook-explorer-tree .sidebar-item[data-selected='false'] svg { + color: var(--cv-light-secondary); + } \ No newline at end of file diff --git a/libs/react-components/.storybook/theme.js b/libs/react-components/.storybook/theme.js new file mode 100644 index 0000000..390c10f --- /dev/null +++ b/libs/react-components/.storybook/theme.js @@ -0,0 +1,41 @@ +import { create } from '@storybook/theming'; +import brandImage from './teradata.svg'; +import { + CvLightPrimary, + CvLightAccent, + CvLightSurface, + CvLightBackground, + CvDarkOnBackground, + CvLightOnBackground, + CvLightTextIconOnBackground, +} from '@covalent/tokens'; + +export default create({ + base: 'light', + + colorPrimary: CvLightPrimary, + colorSecondary: CvLightAccent, + + // UI + appBg: CvLightBackground, + appContentBg: CvLightSurface, + appBorderRadius: '8px', + + // Text colors + textColor: CvLightOnBackground, + textInverseColor: CvDarkOnBackground, + + // Toolbar default and active colors + barTextColor: CvLightTextIconOnBackground, + barSelectedColor: CvLightPrimary, + barHoverColor: CvLightAccent, + barBg: CvLightSurface, + + // Form colors + inputBg: 'transparent', + + // Branding + brandTitle: 'Teradata Design System', + // brandUrl: 'https://teradata.lol', + brandImage, +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6186932..2af0fef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,8 +18,8 @@ "@babel/plugin-transform-react-jsx": "^7.23.4", "@babel/preset-react": "^7.14.5", "@chromatic-com/storybook": "^1.5.0", - "@covalent/components": "^8.13.0", - "@covalent/tokens": "^8.13.0", + "@covalent/components": "^8.18.0", + "@covalent/tokens": "^8.18.0", "@lit/react": "^1.0.5", "@nx/cypress": "19.0.0", "@nx/eslint": "19.0.0", @@ -2428,15 +2428,15 @@ } }, "node_modules/@covalent/components": { - "version": "8.14.0", - "resolved": "https://registry.npmjs.org/@covalent/components/-/components-8.14.0.tgz", - "integrity": "sha512-9LsD+vpTkUEj+URY+upZSR7PnbjUzb35UJH4gR6YfoSxOoL0eqB2tyt4ol4wqVdDhetxcIRrMxK2XW1bhqJ+Tg==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/@covalent/components/-/components-8.18.0.tgz", + "integrity": "sha512-NRB5ZWZZblqOHK+SIOcv4S/UMa61cpHt8T9l6PfuPuOF5cOUMcWVs9+1UnycHTOYdujk+YE1fTGw0H+nPMywuw==", "dev": true }, "node_modules/@covalent/tokens": { - "version": "8.14.0", - "resolved": "https://registry.npmjs.org/@covalent/tokens/-/tokens-8.14.0.tgz", - "integrity": "sha512-ODhx1BGDg8vc1asSSMaECb5q6/wPe10X/6WNQiy1J5ZMym7Ja82pZePy5NEhvnGBg7kfLT2agbTJ9ZGKsCOSfg==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/@covalent/tokens/-/tokens-8.18.0.tgz", + "integrity": "sha512-MJ+EMQ+9E+nezHyzKDtWLm7rHaQNlkJIbtVa6c0CD0pTsoOBzfxAXD3XfdKM7MMbJkSEuLRwW5DKjKAeLNSkaw==", "dev": true }, "node_modules/@cspotcode/source-map-support": { diff --git a/package.json b/package.json index 8c2e6eb..8bc3914 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "@babel/plugin-transform-react-jsx": "^7.23.4", "@babel/preset-react": "^7.14.5", "@chromatic-com/storybook": "^1.5.0", - "@covalent/components": "^8.13.0", - "@covalent/tokens": "^8.13.0", + "@covalent/components": "^8.18.0", + "@covalent/tokens": "^8.18.0", "@lit/react": "^1.0.5", "@nx/cypress": "19.0.0", "@nx/eslint": "19.0.0",