@instructure/ui-themes 11.7.10 → 11.7.11-snapshot-4

package/src/themes/newThemeTokens/componentTypes/stepper.ts

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type Stepper = {
+  stepGap: string
+  stepContentGap: string
+  stepPaddingInlineEnd: string
+  /** Vertical only. */
+  stepPaddingBlockEnd: string
+  currentStepTextGap: string
+  compactStrokeFilledColor: string
+  compactStrokeColor: string
+  compactStrokeErrorColor: string
+  compactStrokeGap: string
+  compactStrokeHeight: string
+  compactStrokeRadius: string
+  mobileToggleBackground: string
+  mobileToggleBorderRadius: string
+  mobileTogglePaddingHorizontal: string
+  mobileTogglePaddingVertical: string
+  mobileToggleContentGap: string
+}
+
+export default Stepper

package/src/themes/newThemeTokens/componentTypes/subNav.ts

@@ -0,0 +1,36 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type SubNav = {
+  strokeColor: string
+  textColor: string
+  padding: string
+  gap: string
+  navItemsGap: string
+  minimizedVerticalPadding: string
+  minimizedWidth: string
+  minimizedHoverWidth: string
+}
+
+export default SubNav

package/src/themes/newThemeTokens/componentTypes/subNavItem.ts

@@ -0,0 +1,38 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type SubNavItem = {
+  backgroundColor: string
+  hoverBackgroundColor: string
+  activeBackgroundColor: string
+  selectedBackgroundColor: string
+  textColor: string
+  selectedTextColor: string
+  logoutTextColor: string
+  borderRadius: string
+  padding: string
+  gap: string
+}
+
+export default SubNavItem

package/src/themes/newThemeTokens/dark/components/alert.ts

@@ -33,7 +33,7 @@ const alert = (semantic: Semantics) => ({
   contentFontFamily: semantic.fontFamily.base,
   contentFontSize: semantic.fontSize.textBase,
   contentFontWeight: semantic.fontWeight.body.base,
-  contentLineHeight: semantic.lineHeight.standalone.base,
+  contentLineHeight: semantic.lineHeight.paragraph.textBase,
   dangerBackground: semantic.color.background.error,
   dangerBackgroundInline: semantic.color.background.pastel.error,
   dangerBorderColor: semantic.color.stroke.error,
@@ -60,6 +60,8 @@ const alert = (semantic: Semantics) => ({
     modify: { type: "alpha", value: 0.2, space: "hsl" },
   },
   warningIconBackground: semantic.color.background.warning,
+  textOnColor: semantic.color.text.onColor,
+  textBase: semantic.color.text.base,
   contentPaddingVertical: semantic.spacing.spaceMd,
   contentPaddingHorizontal: semantic.spacing.spaceMd,
   iconPaddingLeft: semantic.spacing.spaceMd,

package/src/themes/newThemeTokens/dark/components/globalNav.ts

@@ -0,0 +1,59 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const globalNav = (semantic: Semantics) => ({
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fill: semantic.color.icon.interactive.action.primaryOnColor.base,
+  borderColor: semantic.color.stroke.muted,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  minimizedminWidth: "6.5rem",
+  toggleTransition: "300ms",
+  minWidth: "16rem",
+  margin: semantic.spacing.spaceMd,
+  minimizedMargin: "0.375rem",
+  boxShadow: {
+    0: {
+      x: "0rem",
+      y: "0.0625rem",
+      blur: "0.125rem",
+      spread: "0rem",
+      color: semantic.color.dropShadow.shadowColor1,
+      type: "dropShadow",
+    },
+    1: {
+      x: "0rem",
+      y: "0.125rem",
+      blur: "0.25rem",
+      spread: "0.125rem",
+      color: semantic.color.dropShadow.shadowColor2,
+      type: "dropShadow",
+    },
+  },
+  borderRadius: semantic.borderRadius.lg,
+  minimizedBorderRadius: semantic.borderRadius.container.sm,
+  borderWidth: semantic.borderWidth.sm,
+})
+export default globalNav

package/src/themes/newThemeTokens/dark/components/imageCard.ts

@@ -0,0 +1,66 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const imageCard = (semantic: Semantics) => ({
+  borderRadiusBaseSm: "0.75rem",
+  borderRadiusBaseMd: semantic.borderRadius.container.md,
+  borderRadiusBaseLg: semantic.borderRadius.container.md,
+  paddingBaseSm: semantic.spacing.padding.container.xs,
+  paddingBaseMd: semantic.spacing.padding.container.sm,
+  paddingBaseLg: semantic.spacing.padding.container.md,
+  boxShadow: {
+    0: {
+      x: semantic.dropShadow.x.elevation1.dropshadow1,
+      y: semantic.dropShadow.y.elevation1.dropshadow1,
+      blur: semantic.dropShadow.blur.elevation1.dropshadow1,
+      spread: semantic.dropShadow.spread.elevation1.dropshadow1,
+      color: semantic.color.dropShadow.shadowColor1,
+      type: "dropShadow",
+    },
+    1: {
+      x: semantic.dropShadow.x.elevation1.dropshadow1,
+      y: semantic.dropShadow.y.elevation1.dropshadow2,
+      blur: semantic.dropShadow.blur.elevation1.dropshadow2,
+      spread: semantic.dropShadow.spread.elevation1.dropshadow2,
+      color: semantic.color.dropShadow.shadowColor2,
+      type: "dropShadow",
+    },
+  },
+  backgroundColor: semantic.color.background.container,
+  breakpointMd: "20rem",
+  breakpointLg: "40rem",
+  imgTextGapSm: semantic.spacing.gap.cards.md,
+  imgTextGapMd: "1.25rem",
+  imgTextGapLg: semantic.spacing.gap.cards.lg,
+  imgBorderRadiusSm: semantic.borderRadius.md,
+  imgBorderRadiusMd: semantic.borderRadius.lg,
+  imgBorderRadiusLg: semantic.borderRadius.lg,
+  titleContentGapSm: semantic.spacing.spaceSm,
+  titleContentGapMd: semantic.spacing.spaceSm,
+  titleContentGapLg: semantic.spacing.spaceSm,
+  imgAspectRatio: 1.77778,
+})
+export default imageCard

package/src/themes/newThemeTokens/dark/components/mainNav.ts

@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const mainNav = (semantic: Semantics) => ({
+  margin: "0.75rem",
+  minimizedMargin: "0rem",
+  gap: semantic.spacing.padding.container.xxs,
+  navItemsGap: semantic.spacing.spaceXs,
+})
+export default mainNav

package/src/themes/newThemeTokens/dark/components/mainNavAccountItem.ts

@@ -0,0 +1,43 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const mainNavAccountItem = (semantic: Semantics) => ({
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  innerFocusOutlineColor: semantic.color.transparentColor,
+  outerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  currentBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  currentTextColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
+  selectedInnerFocusOutlineColor: semantic.color.transparentColor,
+  selectedOuterFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  padding: semantic.spacing.padding.container.xxs,
+  borderRadius: semantic.borderRadius.container.sm,
+  borderColor: semantic.color.stroke.muted,
+  minimizedItemSize: "2.75rem",
+})
+export default mainNavAccountItem

package/src/themes/newThemeTokens/dark/components/mainNavInstitutionLogo.ts

@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const mainNavInstitutionLogo = (semantic: Semantics) => ({
+  textColor: semantic.color.text.base,
+  strokeColor: semantic.color.stroke.muted,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceMd,
+})
+export default mainNavInstitutionLogo

package/src/themes/newThemeTokens/dark/components/mainNavItem.ts

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const mainNavItem = (semantic: Semantics) => ({
+  horizontalPadding: semantic.spacing.spaceSm,
+  verticalPadding: "0.25rem",
+  iconWrapperHeight: "2.25rem",
+  minimizedItemSize: "2.75rem",
+  borderRadius: semantic.borderRadius.md,
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  fontFamily: semantic.fontFamily.base,
+  fontSize: semantic.fontSize.textBase,
+  fontWeight: semantic.fontWeight.body.base,
+  innerFocusOutlineColor: semantic.color.transparentColor,
+  outerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  lineHeight: semantic.lineHeight.paragraph.base,
+  linkTextDecoration: "none",
+  currentBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  currentTextColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
+  selectedInnerFocusOutlineColor: semantic.color.transparentColor,
+  selectedOuterFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+})
+export default mainNavItem

package/src/themes/newThemeTokens/dark/components/pill.ts

@@ -28,7 +28,6 @@ const pill = (semantic: Semantics) => ({
   paddingHorizontal: semantic.spacing.spaceSm,
   paddingHorizontalMedium: semantic.spacing.spaceMd,
   paddingHorizontalLarge: semantic.spacing.spaceMd,
-  paddingVertical: semantic.spacing.spaceXs,
   gapIconLabel: semantic.spacing.spaceXs,
   gapIconLabelMedium: semantic.spacing.spaceSm,
   gapIconLabelLarge: semantic.spacing.spaceSm,
@@ -41,7 +40,7 @@ const pill = (semantic: Semantics) => ({
   textFontSizeMedium: semantic.fontSize.textSm,
   textFontSizeLarge: semantic.fontSize.textBase,
   textFontWeight: semantic.fontWeight.body.base,
-  statusLabelFontWeight: semantic.fontWeight.body.base,
+  statusLabelFontWeight: semantic.fontWeight.body.strong,
   maxWidth: "240px",
   baseBorderColor: { value: semantic.color.stroke.strong, modify: { type: "alpha", value: 0.2, space: "hsl" } },
   baseTextColor: semantic.color.text.base,
@@ -83,6 +82,8 @@ const pill = (semantic: Semantics) => ({
   borderRadius: semantic.borderRadius.full,
   borderWidth: semantic.borderWidth.sm,
   lineHeight: semantic.lineHeight.standalone.textSm,
+  lineHeightMedium: semantic.lineHeight.standalone.textBase,
+  lineHeightLarge: semantic.lineHeight.standalone.textLg,
   fontFamily: semantic.fontFamily.base,
   borderStyle: "solid",
 })

package/src/themes/newThemeTokens/dark/components/stepItem.ts

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const stepItem = (semantic: Semantics) => ({
+  stepStrokeFilledColor: semantic.color.stroke.info,
+  stepStrokeColor: semantic.color.stroke.base,
+  stepStrokeFilledWidth: semantic.borderWidth.lg,
+  stepStrokeWidth: semantic.borderWidth.md,
+  stepStrokeRadius: semantic.borderRadius.xs,
+})
+export default stepItem

package/src/themes/newThemeTokens/dark/components/stepper.ts

@@ -0,0 +1,48 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const stepper = (semantic: Semantics) => ({
+  stepGap: semantic.spacing.spaceSm,
+  stepContentGap: semantic.spacing.spaceSm,
+  stepPaddingInlineEnd: semantic.spacing.spaceLg,
+  stepPaddingBlockEnd: semantic.spacing.spaceXl,
+  currentStepTextGap: semantic.spacing.spaceXs,
+  compactStrokeFilledColor: semantic.color.stroke.info,
+  compactStrokeColor: semantic.color.stroke.base,
+  compactStrokeErrorColor: semantic.color.stroke.error,
+  compactStrokeGap: semantic.spacing.spaceSm,
+  compactStrokeHeight: semantic.borderWidth.lg,
+  compactStrokeRadius: semantic.borderRadius.xs,
+  mobileToggleBackground: {
+    value: semantic.color.background.interactive.action.secondary.base,
+    modify: { type: "alpha", value: 0.2, space: "hsl" },
+  },
+  mobileToggleBorderRadius: semantic.borderRadius.interactive.base,
+  mobileTogglePaddingHorizontal: semantic.spacing.padding.interactive.horizontal.lg,
+  mobileTogglePaddingVertical: semantic.spacing.spaceSm,
+  mobileToggleContentGap: semantic.spacing.spaceSm,
+})
+export default stepper

package/src/themes/newThemeTokens/dark/components/subNav.ts

@@ -0,0 +1,37 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const subNav = (semantic: Semantics) => ({
+  strokeColor: semantic.color.stroke.muted,
+  textColor: semantic.color.text.base,
+  padding: semantic.spacing.spaceMd,
+  gap: semantic.spacing.spaceSm,
+  navItemsGap: semantic.spacing.spaceXs,
+  minimizedVerticalPadding: "1.625rem",
+  minimizedWidth: "2rem",
+  minimizedHoverWidth: "2.25rem",
+})
+export default subNav

package/src/themes/newThemeTokens/dark/components/subNavItem.ts

@@ -0,0 +1,39 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Semantics } from "../semantics"
+
+const subNavItem = (semantic: Semantics) => ({
+  backgroundColor: semantic.color.transparentColor,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  activeBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  selectedBackgroundColor: semantic.color.background.brand,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  selectedTextColor: semantic.color.text.inverse,
+  logoutTextColor: semantic.color.text.error,
+  borderRadius: semantic.borderRadius.lg,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceSm,
+})
+export default subNavItem