Skip to content

Commit 5480c7f

Browse files
HerrTopiHerrTopi
committed
feat(ui-themes,shared-types,emotion): asd
1 parent 438cabb commit 5480c7f

File tree

9 files changed

+1202
-1
lines changed

9 files changed

+1202
-1
lines changed

‎packages/emotion/src/useStyle.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,20 @@ const useStyle = <P extends (theme: any, params: any) => any>(
5757
displayName
5858
} = useStyleParams
5959
const theme = useTheme()
60-
const baseComponentTheme = generateComponentTheme
60+
61+
let baseComponentTheme = generateComponentTheme
6162
? generateComponentTheme(theme as BaseTheme)
6263
: {}
64+
if (
65+
//@ts-expect-error asd
66+
theme.newTheme &&
67+
//@ts-expect-error asd
68+
theme.newTheme.components[componentId?.toLocaleLowerCase()]
69+
) {
70+
baseComponentTheme =
71+
//@ts-expect-error asd
72+
theme.newTheme.components[componentId?.toLocaleLowerCase()]
73+
}
6374

6475
const themeOverride = getComponentThemeOverride(
6576
theme,

‎packages/shared-types/src/BaseTheme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ type BaseThemeVariableKeys = [
202202
]
203203

204204
type BaseTheme = {
205+
newTheme?: any
205206
key: string
206207
description?: string
207208
} & BaseThemeVariables

‎packages/ui-themes/src/themes/canvas/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import sharedThemeTokens from '../../sharedThemeTokens'
2626
import { ThemeRegistry } from '@instructure/theme-registry'
2727
import { BaseTheme, Colors } from '@instructure/shared-types'
2828
import { colors } from './colors'
29+
import canvas, { ThemeType } from '../newThemes/canvas'
2930

3031
const key = 'canvas'
3132

@@ -56,6 +57,7 @@ const brandVariables = {
5657
export type CanvasBrandVariables = typeof brandVariables
5758

5859
export type CanvasTheme = BaseTheme & {
60+
newTheme?: ThemeType
5961
key: 'canvas'
6062
} & typeof sharedThemeTokens & { colors: Colors } & CanvasBrandVariables
6163

@@ -65,6 +67,7 @@ export type CanvasTheme = BaseTheme & {
6567
* Will be default in the next major version of InstUI
6668
*/
6769
const __theme: CanvasTheme = {
70+
newTheme: canvas,
6871
key,
6972
description: 'This theme meets WCAG 2.1 AA rules for color contrast.',
7073
...sharedThemeTokens,

‎packages/ui-themes/src/themes/newThemes/canvas/components/avatar.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import semantics from '../semantics.js'
26+
import type { Semantics } from '../semantics.js'
27+
28+
export type Avatar = {
29+
background: Semantics['background']['base']
30+
borderColor: Semantics['stroke']['base']
31+
borderWidthSmall: Semantics['borderWidth']['sm']
32+
BorderWidthMedium: Semantics['borderWidth']['md']
33+
boxShadow: {
34+
x: number
35+
y: number
36+
blur: string
37+
spread: number
38+
color: string
39+
type: string
40+
}
41+
fontFamily: Semantics['fontFamily']['heading']
42+
fontWeight: Semantics['fontWeight']['heading']['strong']
43+
color: Semantics['background']['interactive']['primary']['base']
44+
colorShamrock: Semantics['icon']['success']
45+
colorBarney: Semantics['icon']['info']
46+
colorCrimson: Semantics['icon']['error']
47+
colorFire: Semantics['icon']['warning']
48+
colorLicorice: Semantics['icon']['base']
49+
colorAsh: Semantics['icon']['muted']
50+
aiTopGradientColor: Semantics['background']['aiTopGradient']
51+
aiBottomGradientColor: Semantics['background']['aiBottomGradient']
52+
aiFontColor: Semantics['text']['onColor']
53+
}
54+
55+
const avatar: Avatar = {
56+
background: semantics.background.base,
57+
borderColor: semantics.stroke.base,
58+
borderWidthSmall: semantics.borderWidth.sm,
59+
BorderWidthMedium: semantics.borderWidth.md,
60+
boxShadow: {
61+
x: 0,
62+
y: 0,
63+
blur: '1rem',
64+
spread: 0,
65+
color: 'rgba(45,59,69,0.12)',
66+
type: 'innerShadow'
67+
},
68+
fontFamily: semantics.fontFamily.heading,
69+
fontWeight: semantics.fontWeight.heading.strong,
70+
color: semantics.background.interactive.primary.base,
71+
colorShamrock: semantics.icon.error,
72+
colorBarney: semantics.icon.info,
73+
colorCrimson: semantics.icon.error,
74+
colorFire: semantics.icon.warning,
75+
colorLicorice: semantics.icon.base,
76+
colorAsh: semantics.icon.muted,
77+
aiTopGradientColor: semantics.background.aiTopGradient,
78+
aiBottomGradientColor: semantics.background.aiBottomGradient,
79+
aiFontColor: semantics.text.onColor
80+
}
81+
export default avatar

‎packages/ui-themes/src/themes/newThemes/canvas/components/breadcrumb.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import semantics from '../semantics.js'
26+
import type { Semantics } from '../semantics.js'
27+
28+
export type Breadcrumb = {
29+
fontFamily: Semantics['fontFamily']['base']
30+
largeFontSize: string
31+
largeSeparatorFontSize: Semantics['size']['icon']['md']
32+
mediumFontSize: Semantics['fontSize']['textBase']
33+
mediumSeparatorFontSize: Semantics['size']['icon']['sm']
34+
separatorColor: Semantics['icon']['muted']
35+
smallFontSize: Semantics['fontSize']['textSm']
36+
smallSeparatorFontSize: Semantics['size']['icon']['xs']
37+
}
38+
39+
const breadcrumb: Breadcrumb = {
40+
fontFamily: semantics.fontFamily.base,
41+
largeFontSize: '22px',
42+
largeSeparatorFontSize: semantics.size.icon.md,
43+
mediumFontSize: semantics.fontSize.textBase,
44+
mediumSeparatorFontSize: semantics.size.icon.sm,
45+
separatorColor: semantics.icon.muted,
46+
smallFontSize: semantics.fontSize.textSm,
47+
smallSeparatorFontSize: semantics.size.icon.xs
48+
}
49+
export default breadcrumb

‎packages/ui-themes/src/themes/newThemes/canvas/components/pill.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import semantics from '../semantics.js'
26+
import type { Semantics } from '../semantics.js'
27+
28+
export type Pill = {
29+
paddingHorizontal: Semantics['space']['sm']
30+
height: Semantics['space']['lg']
31+
background: Semantics['background']['base']
32+
textFontSize: Semantics['fontSize']['textSm']
33+
textFontWeight: Semantics['fontWeight']['body']['base']
34+
statusLabelFontWeight: Semantics['fontWeight']['body']['strong']
35+
maxWidth: string
36+
primaryText: Semantics['text']['base']
37+
primaryIcon: Semantics['icon']['base']
38+
primaryBorder: Semantics['stroke']['base']
39+
infoText: Semantics['text']['info']
40+
infoIcon: Semantics['icon']['info']
41+
infoBorder: Semantics['stroke']['info']
42+
errorText: Semantics['text']['error']
43+
errorIcon: Semantics['icon']['error']
44+
errorBorder: Semantics['stroke']['error']
45+
textSuccess: Semantics['text']['success']
46+
iconSuccess: Semantics['icon']['success']
47+
successBorder: Semantics['stroke']['success']
48+
textWarning: Semantics['text']['warning']
49+
iconWarning: Semantics['icon']['warning']
50+
borderWarning: Semantics['stroke']['warning']
51+
borderRadius: Semantics['borderRadius']['full']
52+
borderWidth: Semantics['borderWidth']['sm']
53+
borderStyle: { style: string }
54+
lineHeight: Semantics['lineHeight']['standalone']['textSm']
55+
iconSize: Semantics['size']['icon']['sm']
56+
}
57+
58+
const pill: Pill = {
59+
paddingHorizontal: semantics.space.sm,
60+
height: semantics.space.lg,
61+
background: semantics.background.base,
62+
textFontSize: semantics.fontSize.textSm,
63+
textFontWeight: semantics.fontWeight.body.base,
64+
statusLabelFontWeight: semantics.fontWeight.body.strong,
65+
maxWidth: '240px',
66+
primaryText: semantics.text.base,
67+
primaryIcon: semantics.icon.base,
68+
primaryBorder: semantics.stroke.base,
69+
infoText: semantics.text.info,
70+
infoIcon: semantics.icon.info,
71+
infoBorder: semantics.stroke.info,
72+
errorText: semantics.text.error,
73+
errorIcon: semantics.icon.error,
74+
errorBorder: semantics.stroke.error,
75+
textSuccess: semantics.text.success,
76+
iconSuccess: semantics.icon.success,
77+
successBorder: semantics.stroke.success,
78+
textWarning: semantics.text.warning,
79+
iconWarning: semantics.icon.warning,
80+
borderWarning: semantics.stroke.warning,
81+
borderRadius: semantics.borderRadius.full,
82+
borderWidth: semantics.borderWidth.sm,
83+
borderStyle: { style: 'solid' },
84+
lineHeight: semantics.lineHeight.standalone.textSm,
85+
iconSize: semantics.size.icon.sm
86+
}
87+
export default pill

‎packages/ui-themes/src/themes/newThemes/canvas/index.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import primitives, { type Primitives } from './primitives'
26+
import semantics, { type Semantics } from './semantics'
27+
import avatar, { type Avatar } from './components/avatar'
28+
import pill, { type Pill } from './components/pill'
29+
import breadcrumb, { type Breadcrumb } from './components/breadcrumb'
30+
31+
export type ThemeType = {
32+
primitives: Primitives
33+
semantics: Semantics
34+
components: {
35+
avatar: Avatar
36+
pill: Pill
37+
breadcrumb: Breadcrumb
38+
}
39+
}
40+
41+
const theme: ThemeType = {
42+
primitives,
43+
semantics,
44+
components: {
45+
avatar,
46+
pill,
47+
breadcrumb
48+
}
49+
}
50+
51+
export default theme

0 commit comments

Comments
 (0)