SpareBank1/designsystem
Dec 2024 – Sep 2025
9 Months active
Languages Used
JavaScriptLESSTypeScripttsxLessReactYAMLCSS
Technical Skills
CSSComponent ArchitectureContext APIFront-end DevelopmentFrontend DevelopmentReact
tuva-odegard
PROFILE
Tuva-odegard
Tuva Ødegård contributed to the SpareBank1/designsystem repository by engineering scalable UI components and modernizing the design system’s theming, accessibility, and developer workflows. Over nine months, Tuva delivered features such as a context-driven Datepicker, a semantic color system, and a dark mode overhaul, while refactoring component architecture for maintainability. She applied technologies including React, TypeScript, and LESS to implement accessible, themeable components and robust build tooling. Her work addressed both user experience and developer productivity, introducing Storybook-driven documentation, improved CI/CD pipelines, and type-safe exports. The depth of her contributions ensured cohesive design, reliable integration, and long-term maintainability across products.
Overall Statistics
Feature vs Bugs
64%Features
Repository Contributions
152Total
Bugs
31
Commits
152
Features
54
Lines of code
65,837
Activity Months9
Your Network
45 people
Work History
September 2025
12 Commits • 3 Features
Sep 1, 2025Summary for SpareBank1/designsystem — September 2025 (2025-09). This month delivered major theming and UI polish across the design system, with three key features and several bug fixes that improve consistency, accessibility, and developer productivity. Key features delivered: - Dark Mode System Overhaul and Theme Controls: new ffe-dark/ffe-light class names, manual override capabilities, Storybook integration, and a new theme setting in the settings dashboard; accompanied by accent color adjustments and updated documentation. Notable: breaking change to dark mode background accents requiring updates in consuming apps. - Chips UI Enhancements: comprehensive refinements to Chip components including hiding unselected icons, improved spacing, a new selectable state indicator, and label sizing via CSS classes; updated stories and component refactors to improve styling encapsulation. - Investment Dashboard Visual Enhancement: added a subtle background color to InvestmentDashboard to improve visual polish and consistency. - Documentation and changelog updates: aligned docs with new theming tokens and components; updated modal docs for dark mode usage and maintained changelog entries. Major bugs fixed: - Fixed incorrect selection visuals for chipselectable when not selected; removed legacy text style dependencies (ffd-small-text and ffe-body-paragraph) in chips to ensure consistent typography. - Addressed consistency issues across dark mode naming in Storybook and docs to reduce visual regressions during theming rollout. Overall impact and accomplishments: - Achieved a cohesive, scalable theming foundation across the design system, enabling faster theming changes, safer product adoption, and reduced risk of visual regressions. - Improved developer experience with clearer tokens, updated Storybook/examples, and thorough documentation to support long-term maintainability. - Enhanced user interface polish and accessibility through consistent component styling and visual cues. Technologies/skills demonstrated: - CSS class-based theming and design tokens (ffe-dark, ffe-light, accent adjustments) - Storybook integration and documentation practices - React component refactoring and styling encapsulation - Change management including breaking changes coordination and changelog maintenance
12 Commits • 3 Features
Sep 1, 2025Summary for SpareBank1/designsystem — September 2025 (2025-09). This month delivered major theming and UI polish across the design system, with three key features and several bug fixes that improve consistency, accessibility, and developer productivity. Key features delivered: - Dark Mode System Overhaul and Theme Controls: new ffe-dark/ffe-light class names, manual override capabilities, Storybook integration, and a new theme setting in the settings dashboard; accompanied by accent color adjustments and updated documentation. Notable: breaking change to dark mode background accents requiring updates in consuming apps. - Chips UI Enhancements: comprehensive refinements to Chip components including hiding unselected icons, improved spacing, a new selectable state indicator, and label sizing via CSS classes; updated stories and component refactors to improve styling encapsulation. - Investment Dashboard Visual Enhancement: added a subtle background color to InvestmentDashboard to improve visual polish and consistency. - Documentation and changelog updates: aligned docs with new theming tokens and components; updated modal docs for dark mode usage and maintained changelog entries. Major bugs fixed: - Fixed incorrect selection visuals for chipselectable when not selected; removed legacy text style dependencies (ffd-small-text and ffe-body-paragraph) in chips to ensure consistent typography. - Addressed consistency issues across dark mode naming in Storybook and docs to reduce visual regressions during theming rollout. Overall impact and accomplishments: - Achieved a cohesive, scalable theming foundation across the design system, enabling faster theming changes, safer product adoption, and reduced risk of visual regressions. - Improved developer experience with clearer tokens, updated Storybook/examples, and thorough documentation to support long-term maintainability. - Enhanced user interface polish and accessibility through consistent component styling and visual cues. Technologies/skills demonstrated: - CSS class-based theming and design tokens (ffe-dark, ffe-light, accent adjustments) - Storybook integration and documentation practices - React component refactoring and styling encapsulation - Change management including breaking changes coordination and changelog maintenance
September 2025
August 2025
8 Commits • 5 Features
Aug 1, 2025August 2025 focused on strengthening the SpareBank1 design system for DSBanken through developer-experience enhancements, stronger type safety, and governance improvements. Key features were delivered that streamline local development, improve build reliability, and provide practical usage references for teams adopting the DSBanken components. The work emphasizes business value by enabling faster onboarding, reducing friction in code integrations, and ensuring consistent messaging across commits and documentation.
August 2025
8 Commits • 5 Features
Aug 1, 2025August 2025 focused on strengthening the SpareBank1 design system for DSBanken through developer-experience enhancements, stronger type safety, and governance improvements. Key features were delivered that streamline local development, improve build reliability, and provide practical usage references for teams adopting the DSBanken components. The work emphasizes business value by enabling faster onboarding, reducing friction in code integrations, and ensuring consistent messaging across commits and documentation.
July 2025
30 Commits • 18 Features
Jul 1, 2025Month: 2025-07 — Key business-value driven updates across the SpareBank1 design system. Delivered UI color system upgrades, DSBanken feature enhancements, accessibility/semantics improvements, and documentation changes, aligned with the latest ffe-core tokens and design guidelines. Several items include breaking changes and migration notes to support a smooth transition for downstream teams.
30 Commits • 18 Features
Jul 1, 2025Month: 2025-07 — Key business-value driven updates across the SpareBank1 design system. Delivered UI color system upgrades, DSBanken feature enhancements, accessibility/semantics improvements, and documentation changes, aligned with the latest ffe-core tokens and design guidelines. Several items include breaking changes and migration notes to support a smooth transition for downstream teams.
July 2025
June 2025
10 Commits • 1 Features
Jun 1, 2025June 2025 monthly summary for SpareBank1/designsystem focused on delivering accessibility improvements and stabilizing the component ecosystem through robust dependency management across ffe-* React components. Key work included an accessibility enhancement for ButtonGroup and comprehensive fixes to ensure all dependent packages are correctly wired, with documentation and tests updated accordingly.
June 2025
10 Commits • 1 Features
Jun 1, 2025June 2025 monthly summary for SpareBank1/designsystem focused on delivering accessibility improvements and stabilizing the component ecosystem through robust dependency management across ffe-* React components. Key work included an accessibility enhancement for ButtonGroup and comprehensive fixes to ensure all dependent packages are correctly wired, with documentation and tests updated accordingly.
May 2025
6 Commits • 2 Features
May 1, 2025Monthly summary for 2025-05 (SpareBank1/designsystem). Key features delivered this month include the Badge component across the design system and the ffe-badge-react package, with CSS variable theming, accompanying docs and tests; and the Tag system across ffe-tags and ffe-tags-react, with theming, color variants, Storybook docs, unit tests, and type definitions. In addition, a bug fix was applied to ensure the chevron color in dropdowns renders correctly in dark mode by adjusting LESS variables in dark color media queries. The work enhances UI consistency, reduces time to adopt new patterns, and strengthens theming and accessibility across products. Technologies demonstrated include design system architecture, cross-package React component development, CSS variables and LESS theming, Storybook documentation, unit testing, and TypeScript typings.
6 Commits • 2 Features
May 1, 2025Monthly summary for 2025-05 (SpareBank1/designsystem). Key features delivered this month include the Badge component across the design system and the ffe-badge-react package, with CSS variable theming, accompanying docs and tests; and the Tag system across ffe-tags and ffe-tags-react, with theming, color variants, Storybook docs, unit tests, and type definitions. In addition, a bug fix was applied to ensure the chevron color in dropdowns renders correctly in dark mode by adjusting LESS variables in dark color media queries. The work enhances UI consistency, reduces time to adopt new patterns, and strengthens theming and accessibility across products. Technologies demonstrated include design system architecture, cross-package React component development, CSS variables and LESS theming, Storybook documentation, unit testing, and TypeScript typings.
May 2025
April 2025
22 Commits • 10 Features
Apr 1, 2025April 2025 monthly summary for SpareBank1/designsystem: Delivered accessibility fixes, theming enhancements, and workflow improvements that drive business value and developer productivity. Key achievements include fixes to keyboard focus and accessibility across core components, a unified dark-mode/color system rollout, and enhanced feedback UI. Documentation and design-to-code workflows were improved to support faster, accessible product delivery. Details: - Accessibility and focus stabilization across the design system: fixed linktext focus styling in ffe-core, corrected focus on CardAction in ffe-cards, and radioblock cleanup in ffe-form. - Theming and dark mode rollout: aligned dark mode colors and white backgrounds on accent contexts across ffe-accordion, ffe-cards, ffe-form, ffe-datepicker and their React variants; updated color variables in tabs, tables, and chips. - Feedback UI enhancements: new styling and flow improvements for FFE Feedback and FFE Feedback React, including new buttons and consent option. - Design-to-code workflow: Figma sync with TSX setup enabling smoother sync from Figma. - Documentation and accessibility: updated ffe-core-react docs to add href on linktext to improve focusability and accessibility. Business value and impact: These changes enhance accessibility, ensure consistency with the core color system, improve visual coherence across components, and accelerate delivery through improved design-to-code synchronization and documentation. Technologies/skills demonstrated: Accessibility (focus management, keyboard navigation), theming and dark-mode design system updates, React component engineering (FFE family), TSX-based Figma integration, documentation and collaboration workflows.
April 2025
22 Commits • 10 Features
Apr 1, 2025April 2025 monthly summary for SpareBank1/designsystem: Delivered accessibility fixes, theming enhancements, and workflow improvements that drive business value and developer productivity. Key achievements include fixes to keyboard focus and accessibility across core components, a unified dark-mode/color system rollout, and enhanced feedback UI. Documentation and design-to-code workflows were improved to support faster, accessible product delivery. Details: - Accessibility and focus stabilization across the design system: fixed linktext focus styling in ffe-core, corrected focus on CardAction in ffe-cards, and radioblock cleanup in ffe-form. - Theming and dark mode rollout: aligned dark mode colors and white backgrounds on accent contexts across ffe-accordion, ffe-cards, ffe-form, ffe-datepicker and their React variants; updated color variables in tabs, tables, and chips. - Feedback UI enhancements: new styling and flow improvements for FFE Feedback and FFE Feedback React, including new buttons and consent option. - Design-to-code workflow: Figma sync with TSX setup enabling smoother sync from Figma. - Documentation and accessibility: updated ffe-core-react docs to add href on linktext to improve focusability and accessibility. Business value and impact: These changes enhance accessibility, ensure consistency with the core color system, improve visual coherence across components, and accelerate delivery through improved design-to-code synchronization and documentation. Technologies/skills demonstrated: Accessibility (focus management, keyboard navigation), theming and dark-mode design system updates, React component engineering (FFE family), TSX-based Figma integration, documentation and collaboration workflows.
March 2025
51 Commits • 9 Features
Mar 1, 2025March 2025 monthly summary for SpareBank1 design system focusing on delivering a scalable, accessible, and cohesive design system across React and non-React packages. Key outcomes include expanded button sizing, standardized theming variables, wave package migration, and extensive semantic color fixes across components, with maintained backward compatibility and improved Storybook documentation.
51 Commits • 9 Features
Mar 1, 2025March 2025 monthly summary for SpareBank1 design system focusing on delivering a scalable, accessible, and cohesive design system across React and non-React packages. Key outcomes include expanded button sizing, standardized theming variables, wave package migration, and extensive semantic color fixes across components, with maintained backward compatibility and improved Storybook documentation.
March 2025
January 2025
10 Commits • 4 Features
Jan 1, 2025January 2025 monthly summary for SpareBank1/designsystem focusing on delivering a cohesive design system refresh, improved accessibility through semantic colors, enhanced preview capabilities, and strengthened CI/CD/build reliability.
January 2025
10 Commits • 4 Features
Jan 1, 2025January 2025 monthly summary for SpareBank1/designsystem focusing on delivering a cohesive design system refresh, improved accessibility through semantic colors, enhanced preview capabilities, and strengthened CI/CD/build reliability.
December 2024
3 Commits • 2 Features
Dec 1, 2024December 2024, SpareBank1/designsystem: Delivered key Datepicker improvements and a major architecture overhaul, delivering improved UX and long-term maintainability. UI/UX enhancements include refactoring datepicker input styling and added CSS variables for hover and error states to improve accessibility and interaction. Implemented a new internal Datepicker structure with context and separate components for input and calendar logic, removing inputProps and requiring labelId to enable maintainability and extensibility. Resolved targeted fixes such as enabling copy into the datepicker field and other related fixes. Impact: smoother user date entry, easier future enhancements, and clearer integration points for date-related components.
3 Commits • 2 Features
Dec 1, 2024December 2024, SpareBank1/designsystem: Delivered key Datepicker improvements and a major architecture overhaul, delivering improved UX and long-term maintainability. UI/UX enhancements include refactoring datepicker input styling and added CSS variables for hover and error states to improve accessibility and interaction. Implemented a new internal Datepicker structure with context and separate components for input and calendar logic, removing inputProps and requiring labelId to enable maintainability and extensibility. Resolved targeted fixes such as enabling copy into the datepicker field and other related fixes. Impact: smoother user date entry, easier future enhancements, and clearer integration points for date-related components.
December 2024
Activity
Loading activity data...
Quality Metrics
Correctness90.0%
Maintainability91.0%
Architecture85.4%
Performance88.6%
AI Usage20.2%
Skills & Technologies
Programming Languages
CSSHTMLJavaScriptLESSLessMarkdownReactShellTypeScriptYAML
Technical Skills
AccessibilityBuild ConfigurationBuild ToolsCI/CDCSSCSS PreprocessingChangelog ManagementComponent ArchitectureComponent DevelopmentComponent DocumentationComponent LibraryComponent Library DevelopmentComponent Library IntegrationComponent Library ManagementComponent Library Usage
Repositories Contributed To
Overview of all repositories you've contributed to across your timeline