matcha-theme 1.0.23 → 1.0.25

package/README.md

@@ -1,193 +1,9 @@
-# MatchaComponents
-
-#### Repository
-[Link to the project](https://bitbucket.org/inradar/design-system/src/master/).
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0. | Node Version - lts/iron -> v20.12.2
-
-## How to create a component
-
-
-### Create a new module
-To generate a new module run the command:
-> Terminal: `ng g m test-component --project matcha-components`
-
-### Create a new Component
-To generate a component inside of your module run the command:
-> Terminal: `ng g c test-component/my-test-component --project matcha-components` 
-
-### Update your new module file
-
-Import the component file inside of created module.
-
-###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
-``` TS
-import { MyTestComponentComponent } from './test-component/my-test-component.component';
-```
-
-Declare the new component
-###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
-``` TS
-declarations: [MyTestComponentComponent],
-```
-
-Export the new component
-###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
-``` TS
-exports: [MyTestComponentComponent],
-```
-
-### Update your new component file
-We are working with modules and by default the angular-cli create components to working with standalone. Update your component decorator to look like this:
-
-######  Path: design-system/projects/matcha-components/src/lib/test-component/my-test-component.component.ts
-``` TS
-@Component({
-  selector: 'lib-my-test-component',
-  templateUrl: './my-test-component.component.html',
-  styleUrl: './my-test-component.component.scss'
-})
-```
-
-### Update MatchaComponentsModule
-Update the core module of library matcha-components.
-Import the module of the component file inside of created module.
-######  Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
-```TS
-import { TestComponentModule } from './test-component/test-component.module';`
-```
-
-Import the new module
-######  Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
-```TS
-imports: [TestComponentModule, ...`
-```
-
-Export the new module
-######  Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
-```TS
-exports: [TestComponentModule, ...`
-```
-
-### Update Public API File
-Add the export for your new component
-######  Path: design-system/projects/matcha-components/src/public-api.ts
-```TS
-export * from './lib/test-component/my-test-component/my-test-component.component';
-```
-
-Add the export for your new module
-######  Path: design-system/projects/matcha-components/src/public-api.ts
-```TS
-export * from './lib/test-component/test-component.module';
-```
-
-## How to test a component before publish
-
-### Update AppModule
-Go to the main project folder src and find the app.modules.ts file.
-
-Import the module file inside app.module.
-######  Path: design-system/src/app/app.modules.ts
-```TS
-import { TestComponentModule } from '../../projects/matcha-components/src/public-api';
-```
- 
-Import the module
-######  Path: design-system/src/app/app.modules.ts
-```TS
-imports: [TestComponentModule, ...
-```
-
-### Call the component tag somewhere in your test aplication
-Add the component `tag` inside of template file
-######  Path: design-system/src/app/dashboard/dashboard.component.html
-``` HTML
-<lib-my-test-component></lib-my-test-component>
-```
-
-### Run the test project
-Run the serve command
-> Terminal: `ng s`
-
-## How to publish
-
-### Update Version
-Inside of projects folder in find the package.json of matcha-components and update the version
-######  Path: design-system/projects/matcha-components/package.json
-```JSON
-{
-    "name": "matcha-components",
-    "version": "x.x.xx",
-    "peerDependencies": {},
-    "dependencies": {},
-    "sideEffects": false
-}
-```
-
-### Build the matcha-component project
-The build artifacts will be stored in the `dist/` directory. Run the build command
-> Terminal: `ng build matcha-components`
-
-### Publicação do pacote
-In the terminal change the directory to the bundle folder of matcha-components inside of dist folder. This is the folder that will be published in NPM.
-> Terminal: `cd dist/matcha-components`
-
-Now we can do the package publication command:
-> Terminal: `npm publish`
-
-## Test published component
-
-In the terminal go back to the root of design-system
-
-> Terminal: `cd ../..`
-	
-Now you must remove the previous installation of matcha-components to ensure the new installation.
-> Terminal: `npm uninstall matcha-components`
-
-Than install the new version of matcha-components
-> Terminal: `npm i matcha-components`
-
-Update the imports in app.modules to the matcha-component from node_modules.
-
-######  Path: design-system/src/app/app.modules.ts
-```TS
-import { TestComponentModule } from 'matcha-components';
-```
-Run the serve command:
-> Terminal: `ng s`
-
-
----
-
-### Storybook
-Run `ng run matcha-components:storybook` or `npm run storybook`to execute the storybook aplication and see the documentation of all components via [storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
-
----
-
-### Scaffold
-You can also use `ng g directive|pipe|service|class|guard|interface|enum|module --project matcha-components`, in case of nested components you can use `ng g c component-name/child-component --project matcha-component`.
-
-> Note: Don't forget to add `--project matcha-components` or else it will be added to the default project in your `angular.json` file.
-
----
-
-### Running example aplication
-
-Run `ng s --project matcha-design-system` to execute an angular aplication that you can for exemple test your components or directives in pratice.
-
----
-
-### Unit tests
-
-Run `ng test matcha-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
 # Matcha-Theme
 
 ###  Theming Matcha Components
 Place the class (`.theme-default-light`) that you define in theme file, inside of `body` tag. This way you can cover the whole application with the theme. 
 
-Some like this `<body class=".theme-default-light">`.
+Some like this `<body class="theme-default-light">`.
 
 
 ```scss

package/abstracts/_colors.scss

@@ -377,6 +377,19 @@ $index: 0;
                 #{$attribute}: map-get($warn, default) !important;
             }
         }
+        
+        @if ($attribute == "color") {
+            .primary {
+                #{$attribute}: map-get($primary, default-contrast) !important;
+            }
+            .accent {
+                #{$attribute}: map-get($accent, default-contrast) !important;
+            }
+            .warn {
+                #{$attribute}: map-get($warn, default-contrast) !important;
+            }
+        }
+        
         .#{$attribute}-primary {
             #{$attribute}: map-get($primary, default) !important;
             &-alpha {

package/abstracts/_functions.scss

@@ -172,7 +172,7 @@
 // Note: The spec doesn't mention letter spacing. The values here come from
 // eyeballing it until it looked exactly like the spec examples.
 @function matcha-typography-config(
-    $font-family: '"CircularStd", "Helvetica Neue", "Arial", sans-serif, "angular";',
+    $font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
     $display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
     $display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
     $display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),

package/abstracts/_sizes.scss

@@ -152,3 +152,15 @@
         }
     }
 }
+.max-w-1920{
+    max-width: 1920px;
+}
+.max-w-1440{
+    max-width: 1440px;
+}
+.max-w-1024{
+    max-width: 1024px;
+}
+.max-w-600{
+    max-width: 600px;
+}

package/abstracts/_typography.scss

@@ -118,4 +118,7 @@
     & {
         font-family: matcha-font-family($config, body-1);
     }
+    button{
+        font-family: matcha-font-family($config, title);
+    }
 }

package/components/matcha-buttons.scss

@@ -13,39 +13,41 @@
         transition: all 50ms linear;
         overflow: hidden;
         position: relative;
+        font-size: 16px;
+        font-weight: 700;
         &-xs {
-            font-size: 14px;
-            padding: $spacing-inline-s;
-            border-radius: $border-radius-medium;
-            line-height: $size-line-height-minimum;
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(32px);
+            max-height: px-to-rem(32px);
         }
 
         &-sm {
-            font-size: 16px;
-            padding: $spacing-inline-s;
-            border-radius: $border-radius-medium;
-            line-height: $size-line-height-small;
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(40px);
+            max-height: px-to-rem(40px);
         }
 
         &-md {
-            font-size: 16px;
-            padding: $spacing-inline-s;
-            border-radius: $border-radius-medium;
-            line-height: $size-line-height-medium;
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(48px);
+            max-height: px-to-rem(48px);
         }
 
         &-lg {
-            font-size: 20px;
-            padding: $spacing-inline-s;
-            border-radius: $border-radius-medium;
-            line-height: $size-line-height-large;
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(56px);
+            max-height: px-to-rem(56px);
         }
 
         &-xl {
-            font-size: 20px;
-            padding: $spacing-inline-m;
-            border-radius: $border-radius-medium;
-            line-height: $size-line-height-xlarge;
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(56px);
+            max-height: px-to-rem(56px);
         }
 
         &-main {
@@ -59,7 +61,7 @@
         &-md,
         &-lg,
         &-xl {
-            min-width: 48px;
+            min-width: 24px;
 
             &.stroked {
                 box-shadow: 0px 0px 0px 2px inset;
@@ -107,6 +109,15 @@
             text-decoration: underline;
             padding: 0;
         }
+        
+        &-icon {
+            aspect-ratio: 1;
+            padding: 0 !important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
         .ripple {
             position: absolute;
             background: rgba(0,0,0,.15);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "1.0.23",
+    "version": "1.0.25",
     "description": "styles for matcha-design-system",
     "main": "main.scss",
     "scripts": {