@instructure/ui-view 11.7.4-snapshot-106 → 11.7.4-snapshot-108

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-106](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-106) (2026-07-16)
+## [11.7.4-snapshot-108](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-108) (2026-07-16)
 
 
 ### Features
 
+* **many:** add prop most shared tokens to prop options in view ([a08bb3e](https://github.com/instructure/instructure-ui/commit/a08bb3e15759681c5247c8bf27b7a87fa0766dde))
 * **many:** remove deprecated v2 items ([eaf8876](https://github.com/instructure/instructure-ui/commit/eaf88767c9beb95c4e09ee5705c387dfd79e4cb7))
 * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
 

package/es/View/v2/styles.js

@@ -38,10 +38,25 @@ const processBorderRadiusValue = (value, sharedTokens) => {
     if (v === 'circle') return '100%';
     if (v === 'pill') return '999em';
 
+    // Handle legacy values
+    if (v === 'small') return sharedTokens.legacy.radiusSmall;
+    if (v === 'medium') return sharedTokens.legacy.radiusMedium;
+    if (v === 'large') return sharedTokens.legacy.radiusLarge;
+
     // Handle SharedTokens values
-    if (v === 'small') return sharedTokens.legacy.radiusSmall; // 2px in Canvas
-    if (v === 'medium') return sharedTokens.legacy.radiusMedium; // 4px in Canvas
-    if (v === 'large') return sharedTokens.legacy.radiusLarge; // 8px in Canvas
+    if (v === 'xxl') return sharedTokens.borderRadius.xxl;
+    if (v === 'xl') return sharedTokens.borderRadius.xl;
+    if (v === 'lg') return sharedTokens.borderRadius.lg;
+    if (v === 'md') return sharedTokens.borderRadius.md;
+    if (v === 'sm') return sharedTokens.borderRadius.sm;
+    if (v === 'xs') return sharedTokens.borderRadius.xs;
+    if (v === 'full') return sharedTokens.borderRadius.full;
+    if (v === 'card.nestedContainer.sm') return sharedTokens.borderRadius.card.nestedContainer.sm;
+    if (v === 'card.nestedContainer.md') return sharedTokens.borderRadius.card.nestedContainer.md;
+    if (v === 'card.nestedContainer.lg') return sharedTokens.borderRadius.card.nestedContainer.lg;
+    if (v === 'card.sm') return sharedTokens.borderRadius.card.sm;
+    if (v === 'card.md') return sharedTokens.borderRadius.card.md;
+    if (v === 'card.lg') return sharedTokens.borderRadius.card.lg;
 
     // Pass through CSS values (1rem, 12px, etc.)
     return v;
@@ -58,11 +73,16 @@ const processBorderWidthValue = (value, sharedTokens) => {
     if (v === 'auto' || v === '0') return v;
     if (v === 'none') return '0';
 
-    // Handle SharedTokens values
+    // Handle legacy values
     if (v === 'small') return sharedTokens.strokeWidth.sm;
     if (v === 'medium') return sharedTokens.strokeWidth.md;
     if (v === 'large') return sharedTokens.strokeWidth.lg;
 
+    // Handle SharedTokens values
+    if (v === 'sm') return sharedTokens.strokeWidth.sm;
+    if (v === 'md') return sharedTokens.strokeWidth.md;
+    if (v === 'lg') return sharedTokens.strokeWidth.lg;
+
     // Pass through CSS values (1rem, 2px, etc.)
     return v;
   });
@@ -267,6 +287,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     }
   };
   const borderColorVariants = {
+    //legacy colors
     transparent: {
       borderColor: componentTheme.borderColorTransparent
     },
@@ -293,6 +314,52 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     },
     danger: {
       borderColor: componentTheme.borderColorDanger
+    },
+    //new colors
+    strongColor: {
+      borderColor: sharedTokens.stroke.strongColor
+    },
+    visualSeparator: {
+      borderColor: sharedTokens.stroke.visualSeparator
+    },
+    accentAsh: {
+      borderColor: sharedTokens.stroke.accentAsh
+    },
+    accentAurora: {
+      borderColor: sharedTokens.stroke.accentAurora
+    },
+    accentBlue: {
+      borderColor: sharedTokens.stroke.accentBlue
+    },
+    accentGreen: {
+      borderColor: sharedTokens.stroke.accentGreen
+    },
+    accentGrey: {
+      borderColor: sharedTokens.stroke.accentGrey
+    },
+    accentHoney: {
+      borderColor: sharedTokens.stroke.accentHoney
+    },
+    accentOrange: {
+      borderColor: sharedTokens.stroke.accentOrange
+    },
+    accentPlum: {
+      borderColor: sharedTokens.stroke.accentPlum
+    },
+    accentRed: {
+      borderColor: sharedTokens.stroke.accentRed
+    },
+    accentSea: {
+      borderColor: sharedTokens.stroke.accentSea
+    },
+    accentSky: {
+      borderColor: sharedTokens.stroke.accentSky
+    },
+    accentStone: {
+      borderColor: sharedTokens.stroke.accentStone
+    },
+    accentViolet: {
+      borderColor: sharedTokens.stroke.accentViolet
     }
   };
   const backgroundColorVariants = {
@@ -353,6 +420,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     }
   };
   const shadowVariants = {
+    //legacy
     topmost: {
       boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation4)
     },
@@ -362,7 +430,20 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     above: {
       boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation2)
     },
-    none: {}
+    none: {},
+    //new
+    elevation1: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation1)
+    },
+    elevation2: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation2)
+    },
+    elevation3: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation3)
+    },
+    elevation4: {
+      boxShadow: boxShadowObjectsToCSSString(sharedTokens.boxShadow.elevation4)
+    }
   };
   const {
     focusColor,

package/lib/View/v2/styles.js

@@ -44,10 +44,25 @@ const processBorderRadiusValue = (value, sharedTokens) => {
     if (v === 'circle') return '100%';
     if (v === 'pill') return '999em';
 
+    // Handle legacy values
+    if (v === 'small') return sharedTokens.legacy.radiusSmall;
+    if (v === 'medium') return sharedTokens.legacy.radiusMedium;
+    if (v === 'large') return sharedTokens.legacy.radiusLarge;
+
     // Handle SharedTokens values
-    if (v === 'small') return sharedTokens.legacy.radiusSmall; // 2px in Canvas
-    if (v === 'medium') return sharedTokens.legacy.radiusMedium; // 4px in Canvas
-    if (v === 'large') return sharedTokens.legacy.radiusLarge; // 8px in Canvas
+    if (v === 'xxl') return sharedTokens.borderRadius.xxl;
+    if (v === 'xl') return sharedTokens.borderRadius.xl;
+    if (v === 'lg') return sharedTokens.borderRadius.lg;
+    if (v === 'md') return sharedTokens.borderRadius.md;
+    if (v === 'sm') return sharedTokens.borderRadius.sm;
+    if (v === 'xs') return sharedTokens.borderRadius.xs;
+    if (v === 'full') return sharedTokens.borderRadius.full;
+    if (v === 'card.nestedContainer.sm') return sharedTokens.borderRadius.card.nestedContainer.sm;
+    if (v === 'card.nestedContainer.md') return sharedTokens.borderRadius.card.nestedContainer.md;
+    if (v === 'card.nestedContainer.lg') return sharedTokens.borderRadius.card.nestedContainer.lg;
+    if (v === 'card.sm') return sharedTokens.borderRadius.card.sm;
+    if (v === 'card.md') return sharedTokens.borderRadius.card.md;
+    if (v === 'card.lg') return sharedTokens.borderRadius.card.lg;
 
     // Pass through CSS values (1rem, 12px, etc.)
     return v;
@@ -64,11 +79,16 @@ const processBorderWidthValue = (value, sharedTokens) => {
     if (v === 'auto' || v === '0') return v;
     if (v === 'none') return '0';
 
-    // Handle SharedTokens values
+    // Handle legacy values
     if (v === 'small') return sharedTokens.strokeWidth.sm;
     if (v === 'medium') return sharedTokens.strokeWidth.md;
     if (v === 'large') return sharedTokens.strokeWidth.lg;
 
+    // Handle SharedTokens values
+    if (v === 'sm') return sharedTokens.strokeWidth.sm;
+    if (v === 'md') return sharedTokens.strokeWidth.md;
+    if (v === 'lg') return sharedTokens.strokeWidth.lg;
+
     // Pass through CSS values (1rem, 2px, etc.)
     return v;
   });
@@ -273,6 +293,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     }
   };
   const borderColorVariants = {
+    //legacy colors
     transparent: {
       borderColor: componentTheme.borderColorTransparent
     },
@@ -299,6 +320,52 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     },
     danger: {
       borderColor: componentTheme.borderColorDanger
+    },
+    //new colors
+    strongColor: {
+      borderColor: sharedTokens.stroke.strongColor
+    },
+    visualSeparator: {
+      borderColor: sharedTokens.stroke.visualSeparator
+    },
+    accentAsh: {
+      borderColor: sharedTokens.stroke.accentAsh
+    },
+    accentAurora: {
+      borderColor: sharedTokens.stroke.accentAurora
+    },
+    accentBlue: {
+      borderColor: sharedTokens.stroke.accentBlue
+    },
+    accentGreen: {
+      borderColor: sharedTokens.stroke.accentGreen
+    },
+    accentGrey: {
+      borderColor: sharedTokens.stroke.accentGrey
+    },
+    accentHoney: {
+      borderColor: sharedTokens.stroke.accentHoney
+    },
+    accentOrange: {
+      borderColor: sharedTokens.stroke.accentOrange
+    },
+    accentPlum: {
+      borderColor: sharedTokens.stroke.accentPlum
+    },
+    accentRed: {
+      borderColor: sharedTokens.stroke.accentRed
+    },
+    accentSea: {
+      borderColor: sharedTokens.stroke.accentSea
+    },
+    accentSky: {
+      borderColor: sharedTokens.stroke.accentSky
+    },
+    accentStone: {
+      borderColor: sharedTokens.stroke.accentStone
+    },
+    accentViolet: {
+      borderColor: sharedTokens.stroke.accentViolet
     }
   };
   const backgroundColorVariants = {
@@ -359,6 +426,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     }
   };
   const shadowVariants = {
+    //legacy
     topmost: {
       boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation4)
     },
@@ -368,7 +436,20 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
     above: {
       boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation2)
     },
-    none: {}
+    none: {},
+    //new
+    elevation1: {
+      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation1)
+    },
+    elevation2: {
+      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation2)
+    },
+    elevation3: {
+      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation3)
+    },
+    elevation4: {
+      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation4)
+    }
   };
   const {
     focusColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-view",
-  "version": "11.7.4-snapshot-106",
+  "version": "11.7.4-snapshot-108",
   "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-106",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-106",
-    "@instructure/shared-types": "11.7.4-snapshot-106",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-106",
-    "@instructure/emotion": "11.7.4-snapshot-106",
-    "@instructure/ui-i18n": "11.7.4-snapshot-106",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-106",
-    "@instructure/ui-themes": "11.7.4-snapshot-106",
-    "@instructure/ui-position": "11.7.4-snapshot-106"
+    "@instructure/emotion": "11.7.4-snapshot-108",
+    "@instructure/console": "11.7.4-snapshot-108",
+    "@instructure/shared-types": "11.7.4-snapshot-108",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-108",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-108",
+    "@instructure/ui-position": "11.7.4-snapshot-108",
+    "@instructure/ui-i18n": "11.7.4-snapshot-108",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-108",
+    "@instructure/ui-themes": "11.7.4-snapshot-108"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-106",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-106"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-108",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-108"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/ContextView/v1/props.ts

@@ -30,7 +30,6 @@ import type {
 } from '@instructure/shared-types'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import type {
-  Shadow,
   Spacing,
   Stacking,
   WithStyleProps,
@@ -52,7 +51,7 @@ type ContextViewOwnProps = {
   debug?: boolean
   margin?: Spacing
   padding?: Spacing
-  shadow?: Shadow
+  shadow?: 'resting' | 'above' | 'topmost' | 'none'
   stacking?: Stacking
   placement?: PlacementPropValues
   borderColor?: string

package/src/View/v1/props.ts

@@ -33,8 +33,6 @@ import type {
   WithStyleProps,
   Spacing,
   BorderWidth,
-  BorderRadii,
-  Shadow,
   Stacking,
   ComponentStyle,
   StyleObject
@@ -182,11 +180,11 @@ type ViewOwnProps = {
    * assigned to individual corners in CSS shorthand style (e.g., `"medium large none pill"`).
    * Also accepts valid CSS length values like `1rem` or `12px`
    */
-  borderRadius?: BorderRadii
+  borderRadius?: string
   /**
    * Controls the shadow depth for the `<View />`
    */
-  shadow?: Shadow
+  shadow?: 'resting' | 'above' | 'topmost' | 'none'
 
   /**
    * Controls the z-index depth for the `<View />`