feature(global) Implement dark mode #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

fdendorfer wants to merge 111 commits into main from feature/SDWNE-3456-dark-mode

+5,198 −4,677

app/.storybook/main.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ const config: StorybookConfig = { @@
         { from: '../public', to: '/' },
         { from: '../../dist/', to: '/dist' },
         { from: '../../css/foundations/fonts/', to: '/dist/fonts' },
+        { from: '../../dist/', to: '/dist' },
       ],
     }
     export default config

app/.storybook/preview.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -61,11 +61,28 @@ export default {
  
        },

        backgrounds: {

          values: [

            { name: 'Light', value: 'var(--color-white, #fff)' },

            { name: 'Dark', value: 'var(--color-secondary-600, #5f755f)' },

            { name: 'Light', value: 'light' },

            { name: 'Dark', value: 'dark' },

          ],

          // 👇 Specify which background is shown by default

          default: 'Light',

        },

      },

      decorators: [

        (_, args) => {

          const theme = args.globals?.backgrounds?.value

          switch (theme) {

            case 'light':

              document.querySelector('html')?.setAttribute('data-theme', 'light')

              break

            case 'dark':

              document.querySelector('html')?.setAttribute('data-theme', 'dark')

              break

            default:

              document.querySelector('html')?.setAttribute('data-theme', 'auto')

              break

          }

          return { template: `<story/>` }

        },

      ],

    }

0 app/public/images/grid-example-1.png → app/assets/images/grid-example-1.png

File renamed without changes

0 app/public/images/grid-example-2.png → app/assets/images/grid-example-2.png

File renamed without changes

0 app/public/images/grid-example-3.png → app/assets/images/grid-example-3.png

File renamed without changes

app/components/ch/components/AlertBanner.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ @@
                     :icon="link.icon ? link.icon : 'ArrowRight'"
                     icon-pos="right"
                     size="sm"
-                    variant="link-negative"
+                    variant="link"
+                    class="link--negative"
                   />
                 </div>
               </li>
@@ Expand Down @@

app/components/ch/components/BackToTopBtn.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ const props = defineProps({ @@
       type: {
         type: String,
         validator: (prop) =>
-          ['default', 'negative', 'outline'].includes(prop as string),
+          ['negative', 'outline'].includes(prop as string),
         default: () => undefined,
       },
       target: {
@@ Expand Down @@

app/components/ch/components/Badge.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -20,8 +20,8 @@ @@
     </template>
     <script setup lang="ts">
-    import { computed, type PropType } from 'vue';
-    import SvgIcon from '../components/SvgIcon.vue';
+    import { computed, type PropType } from 'vue'
+    import SvgIcon from '../components/SvgIcon.vue'
     const props = defineProps({
       label: {
@@ Expand All / @@ -48,6 +48,7 @@ const props = defineProps({ @@
             'pink',
             'indigo',
             'negative',
+            'active',
           ].includes(prop as string),
       },
       size: {
@@ Expand Down @@

app/components/ch/components/BadgeFilter.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,223 +3,223 @@
  
        <Badge

          label="Alle"

          size="base"

          :color="activeFilter === 'all' ? 'negative' : 'gray'"

          :color="activeFilter === 'all' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('all')"

          :disabled="disabledFilters.includes('all')"

        />

        <Badge

          label="0-9"

          size="base"

          :color="activeFilter === 'numeric' ? 'negative' : 'gray'"

          :color="activeFilter === 'numeric' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('numeric')"

          :disabled="disabledFilters.includes('numeric')"

        />

        <Badge

          label="A"

          size="base"

          :color="activeFilter === 'a' ? 'negative' : 'gray'"

          :color="activeFilter === 'a' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('a')"

          :disabled="disabledFilters.includes('a')"

        />

        <Badge

          label="B"

          size="base"

          :color="activeFilter === 'b' ? 'negative' : 'gray'"

          :color="activeFilter === 'b' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('b')"

          :disabled="disabledFilters.includes('b')"

        />

        <Badge

          label="C"

          size="base"

          :color="activeFilter === 'c' ? 'negative' : 'gray'"

          :color="activeFilter === 'c' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('c')"

          :disabled="disabledFilters.includes('c')"

        />

        <Badge

          label="D"

          size="base"

          :color="activeFilter === 'd' ? 'negative' : 'gray'"

          :color="activeFilter === 'd' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('d')"

          :disabled="disabledFilters.includes('d')"

        />

        <Badge

          label="E"

          size="base"

          :color="activeFilter === 'e' ? 'negative' : 'gray'"

          :color="activeFilter === 'e' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('e')"

          :disabled="disabledFilters.includes('e')"

        />

        <Badge

          label="F"

          size="base"

          :color="activeFilter === 'f' ? 'negative' : 'gray'"

          :color="activeFilter === 'f' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('f')"

          :disabled="disabledFilters.includes('f')"

        />

        <Badge

          label="G"

          size="base"

          :color="activeFilter === 'g' ? 'negative' : 'gray'"

          :color="activeFilter === 'g' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('g')"

          :disabled="disabledFilters.includes('g')"

        />

        <Badge

          label="H"

          size="base"

          :color="activeFilter === 'h' ? 'negative' : 'gray'"

          :color="activeFilter === 'h' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('h')"

          :disabled="disabledFilters.includes('h')"

        />

        <Badge

          label="I"

          size="base"

          :color="activeFilter === 'i' ? 'negative' : 'gray'"

          :color="activeFilter === 'i' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('i')"

          :disabled="disabledFilters.includes('i')"

        />

        <Badge

          label="J"

          size="base"

          :color="activeFilter === 'j' ? 'negative' : 'gray'"

          :color="activeFilter === 'j' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('j')"

          :disabled="disabledFilters.includes('j')"

        />

        <Badge

          label="K"

          size="base"

          :color="activeFilter === 'k' ? 'negative' : 'gray'"

          :color="activeFilter === 'k' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('k')"

          :disabled="disabledFilters.includes('k')"

        />

        <Badge

          label="L"

          size="base"

          :color="activeFilter === 'l' ? 'negative' : 'gray'"

          :color="activeFilter === 'l' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('l')"

          :disabled="disabledFilters.includes('l')"

        />

        <Badge

          label="M"

          size="base"

          :color="activeFilter === 'm' ? 'negative' : 'gray'"

          :color="activeFilter === 'm' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('m')"

          :disabled="disabledFilters.includes('m')"

        />

        <Badge

          label="N"

          size="base"

          :color="activeFilter === 'n' ? 'negative' : 'gray'"

          :color="activeFilter === 'n' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('n')"

          :disabled="disabledFilters.includes('n')"

        />

        <Badge

          label="O"

          size="base"

          :color="activeFilter === 'o' ? 'negative' : 'gray'"

          :color="activeFilter === 'o' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('o')"

          :disabled="disabledFilters.includes('o')"

        />

        <Badge

          label="P"

          size="base"

          :color="activeFilter === 'p' ? 'negative' : 'gray'"

          :color="activeFilter === 'p' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('p')"

          :disabled="disabledFilters.includes('p')"

        />

        <Badge

          label="Q"

          size="base"

          :color="activeFilter === 'q' ? 'negative' : 'gray'"

          :color="activeFilter === 'q' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('q')"

          :disabled="disabledFilters.includes('q')"

        />

        <Badge

          label="R"

          size="base"

          :color="activeFilter === 'r' ? 'negative' : 'gray'"

          :color="activeFilter === 'r' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('r')"

          :disabled="disabledFilters.includes('r')"

        />

        <Badge

          label="S"

          size="base"

          :color="activeFilter === 's' ? 'negative' : 'gray'"

          :color="activeFilter === 's' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('s')"

          :disabled="disabledFilters.includes('s')"

        />

        <Badge

          label="T"

          size="base"

          :color="activeFilter === 't' ? 'negative' : 'gray'"

          :color="activeFilter === 't' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('t')"

          :disabled="disabledFilters.includes('t')"

        />

        <Badge

          label="U"

          size="base"

          :color="activeFilter === 'u' ? 'negative' : 'gray'"

          :color="activeFilter === 'u' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('u')"

          :disabled="disabledFilters.includes('u')"

        />

        <Badge

          label="V"

          size="base"

          :color="activeFilter === 'v' ? 'negative' : 'gray'"

          :color="activeFilter === 'v' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('v')"

          :disabled="disabledFilters.includes('v')"

        />

        <Badge

          label="W"

          size="base"

          :color="activeFilter === 'w' ? 'negative' : 'gray'"

          :color="activeFilter === 'w' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('w')"

          :disabled="disabledFilters.includes('w')"

        />

        <Badge

          label="X"

          size="base"

          :color="activeFilter === 'x' ? 'negative' : 'gray'"

          :color="activeFilter === 'x' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('x')"

          :disabled="disabledFilters.includes('x')"

        />

        <Badge

          label="Y"

          size="base"

          :color="activeFilter === 'y' ? 'negative' : 'gray'"

          :color="activeFilter === 'y' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('y')"

          :disabled="disabledFilters.includes('y')"

        />

        <Badge

          label="Z"

          size="base"

          :color="activeFilter === 'z' ? 'negative' : 'gray'"

          :color="activeFilter === 'z' ? 'active' : 'gray'"

          clickable

          :badgeClicked="() => badgeClicked('z')"

          :disabled="disabledFilters.includes('z')"

app/components/ch/components/Btn.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -32,10 +32,7 @@ const props = defineProps({ @@
             'outline',
             'bare',
             'filled',
-            'outline-negative',
-            'bare-negative',
             'link',
-            'link-negative',
           ].includes(prop as string),
         default: () => undefined,
       },
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature(global) Implement dark mode #139

Diff view

Diff view

There are no files selected for viewing

Uh oh!

feature(global) Implement dark mode #139

Are you sure you want to change the base?

feature(global) Implement dark mode #139

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!