@telia/teddy 0.0.1

package/README.md

@@ -0,0 +1,82 @@
+# Teddy - Telia Norway's Design System
+
+![Teddy - Telia Norway's Design System](/other/stories/assets/teddy200.png)
+
+Welcome to Teddy, Telia Norway's advanced component library crafted to enhance the development of consistent,
+user-friendly interfaces. Teddy offers a suite of components styled in harmony with Telia's brand guidelines, aiming to
+facilitate UI development and enrich user experience.
+
+## Project Philosophy
+
+Teddy is built on a foundation of three core principles:
+
+- **Modularity and Reusability**: Our focus is on creating small, modular components that can be easily integrated and
+  reused, accelerating development and ensuring UI consistency.
+
+- **Accessibility**: With a commitment to inclusivity, accessibility is at the forefront of our design process. We aim
+  to make our components universally usable, adhering to WCAG guidelines and accessibility best practices.
+
+- **Performance**: We prioritize high performance to guarantee a smooth user experience. Our components are optimized
+  for efficiency, balancing speed with functionality.
+
+## Getting Started
+
+To contribute to or utilize Teddy:
+
+1. **Clone the repository**:
+
+   ```bash
+   git clone https://github.com/telia-company/teddy
+   ```
+
+2. **Setup**
+
+   - Node.js (v20)
+   - PNPM (v8)
+
+3. **Install dependencies**:
+
+   ```bash
+   pnpm install
+   ```
+
+### Explore and Develop
+
+The Teddy project is structured to support efficient development, particularly through its `lib` and `other`
+directories. These directories are essential for the project, serving different but related purposes.
+
+#### Lib Folder
+
+The `lib` directory is where the core parts of the Teddy library are located. It contains:
+
+- **Components**: The core UI components of the library.
+- **Styles**: Util styles for consistency across components.
+- **Utils**: Utility functions and hooks for enhanced component functionality.
+- **Icons and Tokens**: Generated from the `other` folder, these assets include icons and design tokens for the
+  library's visual design.
+- **Teams**: A space for teams to develop custom components for specific needs, separate from the main library.
+
+#### Other Folder
+
+The `other` directory supports the development and documentation of Teddy with: Incorporating the functionality of the
+`plopfile.ts` script into the `README.md` under the **Scripts** section, you can describe it as follows:
+
+- **Scripts**: Contains automation scripts crucial for the development and maintenance of the project. These scripts
+  include:
+  - **Icon and Token Generation**: Scripts for generating icons and tokens that populate the `lib/icons` and
+    `lib/tokens` directories, ensuring design consistency and scalability across the project.
+  - **Component Scaffolding with Plop**: Utilizes `plopfile.ts` to automate the process of creating new components,
+    whether they are core components, team-specific components, or derived from the Purpur project. This setup
+    streamlines the addition of new components to the project by providing a series of prompts to specify the
+    component's attributes (such as name, category, and team) and then automatically generating the necessary files
+    according to predefined templates. This process not only saves time but also enforces coding and design standards
+    across the project.
+- **Stories**: Storybook stories that document the project.
+- **Tokens**: Source files for design tokens that dictate the library's foundational styles.
+- **SVG-Icons**: A collection of SVG files that are transformed into svg-sprite for the library. For more information,
+  [read the icon.md file](/docs/icons.md)
+
+## Contributing
+
+We welcome contributions to Teddy! Whether you're improving existing components, adding new features, or enhancing
+documentation, your input is invaluable. See our [`CONTRIBUTING.md`](/docs/CONTRIBUTING.md) for contribution guidelines.

package/dist/assets/button.css

@@ -0,0 +1 @@
+@keyframes _fadeInAnimation_882sa_1{0%{opacity:0}to{opacity:1}}@keyframes _scaleInAnimation_882sa_1{0%{scale:0}to{scale:100%}}._teddy-button_882sa_17{align-items:center;border-radius:var(--teddy-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--teddy-typography-scale-100);font-family:var(--teddy-typography-family-default);font-weight:var(--teddy-typography-weight-medium);gap:var(--teddy-spacing-100);justify-content:center;line-height:var(--teddy-spacing-300);outline:0;position:relative;text-decoration:none;transition-duration:var(--teddy-motion-duration-100);transition-timing-function:var(--teddy-motion-easing-ease-in-out);transition-property:background-color,color;width:auto}._teddy-button_882sa_17:focus:before{border-radius:var(--teddy-border-radius-full);box-shadow:0 0 0 var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);content:"";opacity:1;display:block;inset:calc(var(--teddy-spacing-25) * -1);position:absolute}._teddy-button_882sa_17:focus:not(:focus-visible):before{opacity:0}._teddy-button_882sa_17 svg{display:block}._teddy-button--sm_882sa_52{padding:var(--teddy-spacing-100) var(--teddy-spacing-250)}._teddy-button--sm_882sa_52._teddy-button--icon-only_882sa_55{padding:var(--teddy-spacing-100)}._teddy-button--md_882sa_58{padding:var(--teddy-spacing-150) var(--teddy-spacing-300)}._teddy-button--md_882sa_58._teddy-button--icon-only_882sa_55{padding:var(--teddy-spacing-150)}._teddy-button--lg_882sa_64{padding:var(--teddy-spacing-200) var(--teddy-spacing-400)}._teddy-button--lg_882sa_64._teddy-button--icon-only_882sa_55{padding:var(--teddy-spacing-200)}._teddy-button--full-width_882sa_70{width:100%}._teddy-button--primary_882sa_73{background-color:var(--teddy-color-background-interactive-primary);color:var(--teddy-color-text-interactive-on-primary)}._teddy-button--primary_882sa_73:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-primary-hover)}._teddy-button--primary_882sa_73:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-primary-active)}._teddy-button--primary-negative_882sa_83{background-color:var(--teddy-color-background-interactive-primary-negative);color:var(--teddy-color-text-interactive-on-primary-negative)}._teddy-button--primary-negative_882sa_83:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-primary-negative-hover);border-color:var(--teddy-color-background-interactive-primary-negative-hover)}._teddy-button--primary-negative_882sa_83:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-primary-negative-active);border-color:var(--teddy-color-background-interactive-primary-negative-active)}._teddy-button--secondary_882sa_95{background-color:var(--teddy-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--teddy-border-width-xs) var(--teddy-color-border-interactive-primary);color:var(--teddy-color-text-interactive-primary)}._teddy-button--secondary_882sa_95:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-hover)}._teddy-button--secondary_882sa_95:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-active)}._teddy-button--secondary-negative_882sa_106{background-color:var(--teddy-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--teddy-border-width-xs) var(--teddy-color-border-interactive-primary-negative);color:var(--teddy-color-text-interactive-primary-negative)}._teddy-button--secondary-negative_882sa_106:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-hover)}._teddy-button--secondary-negative_882sa_106:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-active)}._teddy-button--expressive_882sa_117{background-color:var(--teddy-color-background-interactive-expressive);color:var(--teddy-color-text-interactive-on-expressive)}._teddy-button--expressive_882sa_117:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-expressive-hover)}._teddy-button--expressive_882sa_117:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-expressive-active)}._teddy-button--expressive-negative_882sa_127{background-color:var(--teddy-color-background-interactive-expressive-negative);color:var(--teddy-color-text-interactive-on-expressive-negative)}._teddy-button--expressive-negative_882sa_127:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-expressive-negative-hover);color:var(--teddy-color-text-interactive-on-expressive-negative-hover)}._teddy-button--expressive-negative_882sa_127:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-expressive-negative-active);color:var(--teddy-color-text-interactive-on-expressive-negative-active)}._teddy-button--negative_882sa_139._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-disabled-negative);color:var(--teddy-color-text-weak-negative)}._teddy-button--secondary_882sa_95._teddy-button--disabled_882sa_77,._teddy-button--secondary-negative_882sa_106._teddy-button--disabled_882sa_77{box-shadow:none}._teddy-button--destructive_882sa_146{background-color:var(--teddy-color-background-interactive-destructive);color:var(--teddy-color-text-interactive-on-destructive)}._teddy-button--destructive_882sa_146:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-destructive-hover)}._teddy-button--destructive_882sa_146:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-destructive-active)}._teddy-button--destructive-negative_882sa_156{background-color:var(--teddy-color-background-interactive-destructive);color:var(--teddy-color-text-interactive-on-destructive)}._teddy-button--destructive-negative_882sa_156:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-destructive-hover)}._teddy-button--destructive-negative_882sa_156:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-destructive-active)}._teddy-button--tertiary-purple_882sa_166{background-color:var(--teddy-color-background-interactive-transparent);color:var(--teddy-color-text-interactive-primary)}._teddy-button--tertiary-purple_882sa_166._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-transparent)}._teddy-button--tertiary-purple_882sa_166:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-hover)}._teddy-button--tertiary-purple_882sa_166:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-active)}._teddy-button--tertiary-purple-negative_882sa_179{background-color:var(--teddy-color-background-interactive-transparent);color:var(--teddy-color-text-interactive-primary-negative)}._teddy-button--tertiary-purple-negative_882sa_179._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-transparent)}._teddy-button--tertiary-purple-negative_882sa_179:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-hover);color:var(--teddy-color-text-interactive-primary-negative-hover)}._teddy-button--tertiary-purple-negative_882sa_179:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-active);color:var(--teddy-color-text-interactive-primary-negative-active)}._teddy-button--text-negative_882sa_194{border-radius:0;padding-left:0;padding-right:0;background-color:var(--teddy-color-background-interactive-transparent);color:var(--teddy-color-text-interactive-primary-negative)}._teddy-button--text-negative_882sa_194:focus-visible:before{border-radius:0}._teddy-button--text-negative_882sa_194._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-transparent)}._teddy-button--text-negative_882sa_194:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-hover);color:var(--teddy-color-text-interactive-primary-negative-hover)}._teddy-button--text-negative_882sa_194:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-negative-active);color:var(--teddy-color-text-interactive-primary-negative-active)}._teddy-button--text_882sa_194{border-radius:0;padding-left:0;padding-right:0;background-color:var(--teddy-color-background-interactive-transparent);color:var(--teddy-color-text-interactive-primary)}._teddy-button--text_882sa_194:focus-visible:before{border-radius:0}._teddy-button--text_882sa_194._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-transparent);color:var(--teddy-color-text-weak)}._teddy-button--text_882sa_194:hover:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-hover)}._teddy-button--text_882sa_194:active:not(._teddy-button--disabled_882sa_77){background-color:var(--teddy-color-background-interactive-transparent-active)}._teddy-button--disabled_882sa_77{background-color:var(--teddy-color-background-interactive-disabled);color:var(--teddy-color-text-weak);cursor:not-allowed;transition-duration:var(--teddy-motion-duration-400)}._teddy-button__loading_882sa_241{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;border-radius:inherit;background-color:var(--teddy-color-transparent-gray-100);animation:_fadeInAnimation_882sa_1 ease var(--teddy-motion-duration-2000);animation-iteration-count:1;animation-fill-mode:forwards}._teddy-button__loading_882sa_241 ._teddy-button__spinner_882sa_252 circle{stroke:var(--teddy-color-transparent-black-700)}._teddy-button--icon-only_882sa_55 ._teddy-button__loading_882sa_241{background-color:var(--teddy-color-gray-100)}